.home { width: 100%; padding: 15px 0 100px; &__title { font-size: 40px; } &__info { width: 100%; margin: 35px 0; display: flex; flex-direction: column; row-gap: 15px; overflow: auto; &::-webkit-scrollbar-thumb { background: #0255ff; border-radius: 5px; } &::-webkit-scrollbar { border-radius: 8px; width: 5px; height: 10px; background: gray; } .info { &__top { display: flex; justify-content: space-between; min-width: 1213px; } &__search { display: flex; padding: 5px 10px; border-radius: 8px; border: 2px solid gray; max-width: 300px; width: 100%; align-items: center; input { border: none; width: 100%; outline: none; } img { width: 18px; height: 18px; } } &__filters { display: flex; padding: 10px 15px; background-color: #2f95f2; align-items: center; justify-content: space-between; min-width: 1213px; &Img { width: 20px; height: 20px; } &__items { display: flex; column-gap: 10px; } button { display: flex; align-items: center; font-size: 17px; max-width: 200px; border: none; color: white; width: 100%; cursor: pointer; column-gap: 8px; justify-content: center; img { width: 17px; height: 17px; } } .filter { &__reset { background-color: #0668c2; } &__confirm { background-color: #00529d; } } } &__tableWrapper { min-width: 1243px; .tableItem { padding: 10px; border: 1px solid #cbcbcb; &__name { font-weight: 700; } .center { text-align: center; } &__edit { display: flex; cursor: pointer; align-items: center; justify-content: center; img { width: 15px; height: 15px; } } } table { width: 100%; font-size: 15px; font-weight: 500; display: flex; flex-direction: column; row-gap: 10px; margin-bottom: 15px; thead { display: grid; tr { display: grid; grid-template-columns: 7% 50% 16% 12% 10% 5%; } } tbody { display: grid; row-gap: 10px; tr { display: grid; grid-template-columns: 7% 50% 16% 12% 10% 5%; } } } } } } }