@font-face {
    font-family: 'Gilroy';
    font-weight: 100;
    src: url('/fonts/Gilroy-Thin.ttf') format('ttf'),
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 300;
    src: url('/fonts/Gilroy-Light.ttf') format('ttf'),
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 400;
    src: url('/fonts/Gilroy-Regular.ttf') format('ttf'),
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 500;
    src: url('/fonts/Gilroy-Medium.ttf') format('ttf'),
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 600;
    src: url('/fonts/Gilroy-Semibold.ttf') format('ttf'),
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 700;
    src: url('/fonts/Gilroy-Bold.ttf') format('ttf'),
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 800;
    src: url('/fonts/Gilroy-Extrabold.ttf') format('ttf'),
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 900;
    src: url('/fonts/Gilroy-Heavy.ttf') format('ttf'),
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    margin: 0;
}

p {
    font-family: "Gilroy";
}

a {
    font-family: "Gilroy";
    color: #080809;
    text-decoration: none;
}

.f-f-gilroy {
    font-family: "Gilroy";
}

.w-2 {
    width: 2%;
}

.w-2-2 {
    width: 2.2%;
}

.w-2-5 {
    width: 2.5%;
}

.w-3 {
    width: 3%;
}

.w-3-5 {
    width: 3.5%;
}

.w-4 {
    width: 4%;
}

.w-5 {
    width: 5%;
}

.w-8 {
    width: 8%;
}

.w-10 {
    width: 10%;
}

.w-12 {
    width: 12%;
}

.w-12-5 {
    width: 12.5%;
}

.w-13 {
    width: 13%;
}

.w-15 {
    width: 15%;
}

.w-16 {
    width: 16%;
}

.w-17-8 {
    width: 17.8%;
}

.w-20 {
    width: 20%;
}

.w-22 {
    width: 22%;
}

.w-23 {
    width: 23%;
}

.w-23-5 {
    width: 23.5%;
}

.w-24 {
    width: 24%;
}

.w-25 {
    width: 25%;
}

.w-27 {
    width: 27%;
}

.w-30 {
    width: 30%;
}

.w-31 {
    width: 31%;
}

.w-32 {
    width: 32%;
}

.w-33 {
    width: 33%;
}

.w-35 {
    width: 35%;
}

.w-40 {
    width: 40%;
}

.w-45 {
    width: 45%;
}

.w-48 {
    width: 48%;
}

.w-49 {
    width: 49%;
}

.w-50 {
    width: 50%;
}

.w-55 {
    width: 55%;
}

.w-63 {
    width: 63%;
}

.w-67 {
    width: 67%;
}

.w-71-5 {
    width: 71.5%;
}

.w-74-5 {
    width: 74.5%;
}

.w-75 {
    width: 75%;
}

.w-78 {
    width: 78%;
}

.w-80 {
    width: 80%;
}

.w-82 {
    width: 82%;
}

.w-84 {
    width: 84%;
}

.w-88 {
    width: 88%;
}

.w-94 {
    width: 94%;
}

.w-100 {
    width: 100%;
}

.w-28px {
    width: 28px;
}

.w-118px {
    width: 118px;
}

.w-234px {
    width: 234px;
}

.w-120 {
    width: 120px;
}

.w-webkit-fill-available {
    width: -webkit-fill-available;
}

.w-min-content {
    width: min-content;
}

.w-22px {
    width: 22px;
}

.w-50px {
    width: 50px;
}

.w-65px {
    width: 65px;
}

.h-22px {
    height: 22px;
}

.h-41px {
    height: 41px;
}

.h-46px {
    height: 46px;
}

.h-48px {
    height: 48px;
}

.h-50px {
    height: 50px;
}

.h-118px {
    height: 118px;
}

.h-121px {
    height: 121px;
}

.h-163px {
    height: 163px;
}

.h-207px {
    height: 207px;
}

.w-52px {
    width: 52px;
}

.w-1200 {
    width: 1200px;
}

.w-1695 {
    min-width: 1200px;
    width: 88.2%;
    max-width: 1695px;
}

.w-1820 {
    min-width: 1200px;
    width: 94.8%;
    max-width: 1820px;
}

.h-100 {
    height: 100%;
}

h1 {
    margin: 0;
}

h2 {
    margin: 0;
}

h3 {
    margin: 0;
}

h4 {
    margin: 0;
}

h5 {
    margin: 0;
}

h6 {
    margin: 0;
}

p {
    margin: 0;
    color: #080809;
}

label {
    color: #080809;
    font-family: "Gilroy";
}

.f-size-10 {
    font-size: 10px;
}

.f-size-12 {
    font-size: 12px;
}

.f-size-14 {
    font-size: 14px;
}

.f-size-16 {
    font-size: 16px;
}

.f-size-18 {
    font-size: 18px;
}

.f-size-20 {
    font-size: 20px;
}

.f-size-22 {
    font-size: 22px;
}

.f-size-24 {
    font-size: 24px;
}

.f-size-26 {
    font-size: 26px;
}

.f-size-28 {
    font-size: 28px;
}

.f-size-30 {
    font-size: 30px;
}

.f-size-32 {
    font-size: 32px;
}

.f-size-36 {
    font-size: 36px;
}

.f-size-44 {
    font-size: 44px;
}

.f-size-58 {
    font-size: 58px;
}

.c-C21010 {
    color: #C21010;
}

.c-242424 {
    color: #242424;
}

.c-2D74FF {
    color: #2D74FF;
}

.c-2B70D6 {
    color: #2B70D6;
}

.c-3A3A3A {
    color: #3A3A3A;
}

.c-3D3D3D {
    color: #3D3D3D;
}

.c-004ADD {
    color: #004ADD;
}

.c-5A5A5B {
    color: #5A5A5B;
}

.c-555659 {
    color: #555659;
}

.c-505151 {
    color: #505151;
}

.c-5E5E5F {
    color: #5E5E5F;
}

.c-02398B {
    color: #02398B;
}

.c-909090 {
    color: #909090;
}

.c-929293 {
    color: #929293;
}

.c-1E94AD {
    color: #1E94AD;
}

.c-A42323 {
    color: #A42323;
}

.c-9E4C28 {
    color: #9E4C28;
}

.c-264FB7 {
    color: #264FB7;
}

.c-8925B8 {
    color: #8925B8;
}

.c-B22089 {
    color: #B22089;
}

.c-B92046 {
    color: #B92046;
}

.c-2421C0 {
    color: #2421C0;
}

.c-B97119 {
    color: #B97119;
}

.c-25B922 {
    color: #25B922;
}

.c-0D5CD1 {
    color: #0D5CD1;
}

.c-156BEC {
    color: #156BEC;
}

.c-FFFFFF {
    color: #FFFFFF;
}

.c-062663 {
    color: #062663;
}

.c-4E4E4F {
    color: #4E4E4F;
}

.c-4C4C4C {
    color: #4C4C4C;
}

.c-080809 {
    color: #080809;
}

.c-B5B5B6 {
    color: #B5B5B6;
}

.c-BB6909 {
    color: #BB6909;
}

.c-808080 {
    color: #808080;
}

.c-808182 {
    color: #808182;
}

.c-4A628E {
    color: #4A628E;
}

.c-F3F6FA {
    color: #F3F6FA;
}

.c-666666 {
    color: #666666;
}

.c-686869 {
    color: #686869;
}

.c-6D6E6E {
    color: #6D6E6E;
}

.c-656667 {
    color: #656667;
}

.c-6194E2 {
    color: #6194E2;
}

.c-E6E6E6 {
    color: #E6E6E6;
}

.c-E07F0D {
    color: #E07F0D;
}

.c-565658 {
    color: #565658;
}

.c-6B6B6B {
    color: #6B6B6B;
}

.c-767677 {
    color: #767677;
}

.c-79797A {
    color: #79797A;
}

.c-898989 {
    color: #898989;
}

.c-525353 {
    color: #525353;
}

.c-080809-animeted > p {
    color: #080809;
    transition: color 0.5s;
}

.c-080809-animeted:hover > p {
    color: #0D5CD1;
}

.t-a-center {
    text-align: center;
}

.t-a-left {
    text-align: left;
}

.t-a-right {
    text-align: right;
}

.min-h-100vh {
    min-height: 100vh;
}

.al-it-center {
    align-items: center;
}

.al-it-start {
    align-items: start;
}

.al-it-end {
    align-items: end;
}

.al-it-baseline {
    align-items: baseline;
}

.al-sf-stretch {
    align-self: stretch;
}

.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

.d-grid {
    display: grid;
}

.d-inline-flex {
    display: inline-flex;
}

.d-inline-block {
    display: inline-block;
}

.pos-absolute {
    position: absolute;
}

.t-0 {
    top: 0;
}

.l-0 {
    left: 0;
}

.b-0 {
    bottom: 0;
}

.obj-fit-cover {
    object-fit: cover;
}

.p-l-48px {
    padding-left: 48px;
}

.p-l-30px {
    padding-left: 64px;
}

.p-l-36px {
    padding-left: 36px;
}

.p-l-64px {
    padding-left: 64px;
}

.p-l-8px {
    padding-left: 16px;
}

.p-l-12px {
    padding-left: 12px;
}

.p-r-16px {
    padding-right: 16px;
}

.p-r-24 {
    padding-right: 24px;
}

.p-r-5per {
    padding-right: 5%;
}

.p-t-b-16px {
    padding-top: 16px;
    padding-bottom: 16px;
}

.p-t-b-12px {
    padding-top: 12px;
    padding-bottom: 12px;
}

.p-t-b-35px {
    padding-top: 35px;
    padding-bottom: 35px;
}

.p-t-b-50px {
    padding-top: 50px;
    padding-bottom: 50px;
}

.p-t-b-75px {
    padding-top: 75px;
    padding-bottom: 75px;
}

.p-t-b-98px {
    padding-top: 98px;
    padding-bottom: 98px;
}

.p-b-98px {
    padding-bottom: 98px;
}

.p-b-10 {
    padding-bottom: 10px;
}

.p-t-8px {
    padding-top: 8px;
}

.p-5px {
    padding: 5px;
}

.p-10px {
    padding: 10px;
}

.p-15px {
    padding: 15px;
}

.p-20px {
    padding: 20px;
}

.p-24px {
    padding: 24px;
}

.p-30px {
    padding: 30px;
}

.p-32px {
    padding: 32px;
}

.p-38px {
    padding: 38px;
}

.p-12-38 {
    padding: 12px 38px;
}

.p-40-80 {
    padding: 40px 80px;
}

.p-22-29 {
    padding: 22px 29px;
}

.p-l-r-38px {
    padding-left: 38px;
    padding-right: 38px;
}

.p-21-17 {
    padding: 21px 17px;
}

.p-21-31 {
    padding: 21px 31px;
}

.p-36-19 {
    padding: 36px 19px;
}

.p-35-64 {
    padding: 35px 64px;
}

.p-45-58 {
    padding: 45px 58px;
}

.p-12-20 {
    padding: 12px 20px;
}

.p-12-24 {
    padding: 12px 24px;
}

.p-16-22 {
    padding: 16px 22px;
}

.p-25-34 {
    padding: 25px 34px;
}

.p-25-20 {
    padding: 25px 20px;
}

.p-34-l-r {
    padding-left: 34px;
    padding-right: 34px;
}

.p-24-l-r {
    padding-left: 24px;
    padding-right: 24px;
}

.p-20-l-r {
    padding-left: 20px;
    padding-right: 20px;
}

.p-12-l-r {
    padding-left: 12px;
    padding-right: 12px;
}

.p-18-l-r {
    padding-left: 18px;
    padding-right: 18px;
}

.p-20-l-r {
    padding-left: 20px;
    padding-right: 20px;
}

.p-42-l-r {
    padding-left: 42px;
    padding-right: 42px;
}

.p-16-56 {
    padding: 16px 56px;
}

.p-16-20 {
    padding: 16px 20px;
}

.p-16-l-r {
    padding-left: 16px;
    padding-right: 16px;
}

.p-8-l-r {
    padding-left: 8px;
    padding-right: 8px;
}

.p-64-l-r {
    padding-left: 64px;
    padding-right: 64px;
}

.p-20-20-25-20 {
    padding: 20px 20px 25px 20px
}

.border-r-30px {
    border-radius: 30px;
}

.border-r-20px {
    border-radius: 20px;
}

.border-r-10px {
    border-radius: 10px;
}

.border-r-15px {
    border-radius: 15px;
}

.border-r-8px {
    border-radius: 8px;
}

.border-r-6px {
    border-radius: 6px;
}

.border-r-5px {
    border-radius: 5px;
}

.border-r-3px {
    border-radius: 3px;
}

.border-r-50per {
    border-radius: 50%;
}

.border-r-0-10-10-10 {
    border-radius: 0 10px 10px 10px;
}

.border-r-10-10-0-0 {
    border-radius: 10px 10px 0px 0px;
}

.border-r-0-0-10-10 {
    border-radius: 0px 0px 10px 10px;
}

.border-r-0-10-0-0 {
    border-radius: 0px 10px 0px 0px;
}

.border-r-20-20-0-0 {
    border-radius: 20px 20px 0px 0px;
}

.border-color-A0A0A1 {
    border: #A0A0A1 solid 1px;
}

.border-color-5F94E3 {
    border: #5F94E3 solid 1px;
}

.border-color-6396E3 {
    border: #6396E3 solid 1px;
}

.border-color-6295E2 {
    border: #6295E2 solid 1px;
}

.border-color-6194E2 {
    border: #6194E2 solid 1px;
}

.border-color-3E86F3 {
    border: #3E86F3 solid 1px;
}

.border-color-77ABF7 {
    border: #77ABF7 solid 1px;
}

.border-color-D2D3D4 {
    border: #D2D3D4 solid 1px !important;
}

.border-color-D4786C {
    border: #D4786C solid 1px;
}

.border-color-DBDBDB {
    border: #DBDBDB solid 1px;
}

.border-color-0D5CD1 {
    border: #0D5CD1 solid 1px;
}

.border-color-DBE5F5 {
    border: #DBE5F5 solid 1px;
}

.border-color-FFFFFF {
    border: #FFFFFF solid 1px;
}

.border-color-9ABBEB {
    border: #9ABBEB solid 1px;
}

.border-color-BFBFBF-dashed {
    border: #BFBFBF dashed 1px;
}

.border-color-709EE4-dashed {
    border: #709EE4 dashed 1px;
}

.border-color-0D5CD1-16 {
    border: rgba(13, 92, 209, 0.16) solid 1px;
} 

.border-color-0D5CD1-type-of-property {
    border: #9ABBEB solid 1px;
}

    .border-color-0D5CD1-type-of-property:hover {
        border: #0D5CD1 solid 1px;
        transition: border 0.5s ease-out !important;
    }

.inp-phone {
    background: url(../refs/ic_round-phone.png) no-repeat scroll 24px center;
    outline: none;
}

.inp-pass {
    background: url(/refs/ic_round-password.png) no-repeat scroll 24px center;
    outline: none;
}

.inp-profile-name {
    background: url(/references/ic_baseline-person.png) no-repeat scroll 24px center;
    outline: none;
}

.inp-profile-phone {
    background: url(/references/profile-phone.png) no-repeat scroll 24px center;
    outline: none;
}

.inp-profile-email {
    background: url(/references/profile-email.png) no-repeat scroll 24px center;
    outline: none;
}

.inp-search-order {
    background: url(/references/search.png) no-repeat scroll 15px center;
    outline: none;
}

.inp-reg-phone {
    background: url(/references/phone-gray.png) no-repeat scroll 24px center;
    outline: none;
}

.b-EBF0FA {
    background-color: #EBF0FA;
}

.border-none {
    border: none;
}

.float-right {
    float: right;
}

.w-30px {
    width: 30px;
}

.w-460px {
    width: 460px;
}

.w-372px {
    width: 372px;
}

.w-221px {
    width: 221px;
}

.w-141px {
    width: 141px;
}

.w-60px {
    width: 60px;
}

.w-45px {
    width: 45px;
}

.w-37px {
    width: 37px;
}

.h-45px {
    height: 45px;
}

.h-32px {
    height: 32px;
}

.h-37px {
    height: 37px;
}

.h-40px {
    height: 40px;
}

.h-80px {
    height: 80px;
}

.h-88px {
    height: 88px;
}

.h-93px {
    height: 93px;
}

.h-50px {
    height: 50px;
}

.h-52px {
    height: 52px;
}

.h-58px {
    height: 58px;
}

.h-60px {
    height: 60px;
}

.h-61px {
    height: 61px;
}

.h-62px {
    height: 62px;
}

.h-65px {
    height: 65px;
}

.h-67px {
    height: 67px;
}

.h-min-65px {
    min-height: 65px;
}

.h-89 {
    height: 89px;
}

.m-0-64-0-auto {
    margin: 0 65px 0 auto;
}

.m-0-0-0-auto {
    margin: auto auto auto auto;
}

.m-0-auto {
    margin: 0 auto;
}

.m-sdfsdf {
    margin: 0;
}

.m-b-2 {
    margin-bottom: 2px;
}

.m-b-3 {
    margin-bottom: 3px;
}

.m-b-4 {
    margin-bottom: 4px;
}

.m-b-5 {
    margin-bottom: 5px;
}

.m-b-6 {
    margin-bottom: 6px;
}

.m-b-8 {
    margin-bottom: 8px;
}

.m-b-9 {
    margin-bottom: 9px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-b-12 {
    margin-bottom: 12px;
}

.m-b-14 {
    margin-bottom: 14px;
}

.m-b-15 {
    margin-bottom: 15px;
}

.m-b-16 {
    margin-bottom: 16px;
}

.m-b-18 {
    margin-bottom: 18px;
}

.m-b-20 {
    margin-bottom: 20px;
}

.m-b-23 {
    margin-bottom: 23px;
}

.m-b-24 {
    margin-bottom: 24px;
}

.m-b-25 {
    margin-bottom: 25px;
}

.m-b-26 {
    margin-bottom: 26px;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-b-35 {
    margin-bottom: 35px;
}

.m-b-40 {
    margin-bottom: 40px;
}

.m-b-42 {
    margin-bottom: 42px;
}

.m-b-45 {
    margin-bottom: 45px;
}

.m-b-50 {
    margin-bottom: 50px;
}

.m-b-55 {
    margin-bottom: 55px;
}

.m-b-56 {
    margin-bottom: 56px;
}

.m-b-60 {
    margin-bottom: 60px;
}

.m-b-69 {
    margin-bottom: 69px;
}

.m-b-73 {
    margin-bottom: 73px;
}

.m-b-74 {
    margin-bottom: 74px;
}

.h-70px {
    height: 70px;
}

.h-72px {
    height: 72px;
}

.h-75px {
    height: 75px;
}

.h-76px {
    height: 76px;
}

.m-b-84 {
    margin-bottom: 84px;
}

.m-b-87 {
    margin-bottom: 87px;
}

.m-b-92 {
    margin-bottom: 92px;
}

.m-b-98 {
    margin-bottom: 98px;
}

.m-l-4 {
    margin-left: 4px;
}

.m-l-5 {
    margin-left: 5px;
}

.m-l-8 {
    margin-left: 8px;
}

.m-l-11 {
    margin-left: 11px;
}

.m-l-12 {
    margin-left: 12px;
}

.m-l-17 {
    margin-left: 17px;
}

.m-l-18 {
    margin-left: 18px;
}

.m-l-20 {
    margin-left: 20px;
}

.m-l-24 {
    margin-left: 24px;
}

.m-l-25 {
    margin-left: 25px;
}

.m-l-29 {
    margin-left: 29px;
}

.m-l-30 {
    margin-left: 30px;
}

.m-l-35 {
    margin-left: 35px;
}

.m-l-1 {
    margin-left: 1%;
}

.m-l-2 {
    margin-left: 2%;
}

.m-l-1-5 {
    margin-left: 1.5%;
}

.m-l-11per {
    margin-left: 11%;
}

.m-t-3 {
    margin-top: 3px;
}

.m-t-7 {
    margin-top: 7px;
}

.m-t-8 {
    margin-top: 8px;
}

.m-t-10 {
    margin-top: 10px;
}

.m-t-18 {
    margin-top: 18px;
}

.m-t-29 {
    margin-top: 29px;
}

.m-t-78 {
    margin-top: 78px;
}

.m-t-100 {
    margin-top: 100px;
}

.m-r-4 {
    margin-right: 4px;
}

.m-r-5 {
    margin-right: 5px;
}

.m-r-6 {
    margin-right: 6px;
}

.m-r-7 {
    margin-right: 7px;
}

.m-r-8 {
    margin-right: 8px;
}

.m-r-10 {
    margin-right: 10px;
}

.m-r-11 {
    margin-right: 11px;
}

.m-r-12 {
    margin-right: 12px;
}

.m-r-14 {
    margin-right: 14px;
}

.m-r-15 {
    margin-right: 15px;
}

.m-r-18 {
    margin-right: 18px;
}

.m-r-20 {
    margin-right: 20px;
}

.m-r-23 {
    margin-right: 23px;
}

.m-r-24 {
    margin-right: 24px;
}

.m-r-25 {
    margin-right: 25px;
}

.m-r-26 {
    margin-right: 26px;
}

.m-r-34 {
    margin-right: 34px;
}

.m-r-38 {
    margin-right: 38px;
}

.m-r-40 {
    margin-right: 40px;
}

.m-r-48 {
    margin-right: 48px;
}

.m-r-1 {
    margin-right: 1%;
}

.m-r-2 {
    margin-right: 2%;
}

.m-r-17-5 {
    margin-right: 17.5%;
}

.m-r-11per {
    margin-right: 11%;
}

.m-r-15per {
    margin-right: 15%;
}

.w-100-p-64 {
    width: calc(100% - 64px);
}

.w-100-p-66 {
    width: calc(100% - 66px);
}

.w-100-p-68 {
    width: calc(100% - 68px);
}

.w-100-p-48 {
    width: calc(100% - 48px);
}

.w-100-p-32 {
    width: calc(100% - 32px);
}

.w-50-p-32 {
    width: calc(50% - 32px);
}

.w-32px {
    width: 32px;
}

.w-24px {
    width: 24px;
}

.w-18px {
    width: 18px;
}

.w-200px {
    width: 200px;
}

.w-240px {
    width: 240px;
}

.h-18px {
    height: 18px;
}

.h-24px {
    height: 24px;
}

.h-28px {
    height: 28px;
}

.h-30px {
    height: 30px;
}

.h-81px {
    height: 81px;
}

.h-230px {
    height: 230px;
}

.bg-color-FEEEDA {
    background-color: #FEEEDA;
}

.bg-color-FEFEFE {
    background-color: #FEFEFE;
}

.bg-color-FEFEFE-type-of-property {
    background-color: #F9FAFB;
    transition: background-color 0.5s;
}

    .bg-color-FEFEFE-type-of-property:hover {
        background-color: #FEFEFE;
    }

.bg-color-F7F8F9 {
    background-color: #F7F8F9;
}

.bg-color-004ADD {
    background-color: #004ADD;
}

.bg-color-B6D1F9 {
    background-color: #B6D1F9;
}

.bg-color-A4C5F6-30 {
    background-color: rgba(164, 197, 246, 0.3);
}

.bg-color-EAF2FF {
    background-color: #EAF2FF;
}

.bg-color-ECEDEF {
    background-color: #ECEDEF;
}

.bg-color-E76565 {
    background-color: #E76565;
}

.bg-color-E7E7E7 {
    background-color: #E7E7E7;
}

.bg-color-E9E9EA {
    background-color: #E9E9EA;
}

.bg-color-EEF0F3 {
    background-color: #EEF0F3;
}

.bg-color-E8EFFA {
    background-color: #E8EFFA;
}

.bg-color-C2F1FB {
    background-color: #C2F1FB;
}

.bg-color-F9C8C8 {
    background-color: #F9C8C8;
}

.bg-color-F9D7C8 {
    background-color: #F9D7C8;
}

.bg-color-FCECD9 {
    background-color: #FCECD9;
}

.bg-color-F6F7F9 {
    background-color: #F6F7F9;
}

.bg-color-CAD9FF {
    background-color: #CAD9FF;
}

.bg-color-EECAFF {
    background-color: #EECAFF;
}

.bg-color-EEF0F3 {
    background-color: #EEF0F3;
}

.bg-color-FFCAF0 {
    background-color: #FFCAF0;
}

.bg-color-FFCAD7 {
    background-color: #FFCAD7;
}

.bg-color-CBCAFF {
    background-color: #CBCAFF;
}

.bg-color-FFE7CA {
    background-color: #FFE7CA;
}

.bg-color-C7FFC6 {
    background-color: #C7FFC6;
}

.bg-color-F0F0F0 {
    background-color: #F0F0F0;
}

.bg-color-F6F7F9 {
    background-color: #F6F7F9;
}

.bg-color-DBE5F5 {
    background-color: #DBE5F5;
}

.bg-color-DBEBFD {
    background-color: #DBEBFD;
}

.bg-color-DEE8F9 {
    background-color: #DEE8F9;
}

.bg-color-F5F5F5 {
    background-color: #F5F5F5;
}

.bg-color-F5F9FF {
    background-color: #F5F9FF;
}

.bg-color-DDEAFD {
    background-color: #DDEAFD;
}

.bg-color-F9F9F9 {
    background-color: #F9F9F9;
}

.bg-color-F2F6FB {
    background-color: #F2F6FB;
}

.bg-color-FFDCDC {
    background-color: #FFDCDC;
}

.bg-color-F4F4F4 {
    background-color: #F4F4F4;
}

.bg-color-FDFEFF {
    background-color: #FDFEFF;
}

.bg-color-F0F6FF {
    background-color: #F0F6FF;
}

.bg-color-D9E8FD {
    background-color: #D9E8FD;
}

.bg-color-D9D9DA {
    background-color: #D9D9DA;
}

.bg-color-0D5CD1 {
    background-color: #0D5CD1;
}

.bg-color-0B1E43 {
    background-color: #0B1E43
}

.bg-color-4A556B {
    background-color: #4A556B;
}

.bg-color-EDEFF3 {
    background-color: #EDEFF3;
}

.bg-color-E0EAF9 {
    background-color: #E0EAF9;
}

.bg-color-EBF0FA {
    background-color: #EBF0FA;
}

.bg-color-E3E4E5 {
    background-color: #E3E4E5;
}

.bg-color-F2F4F7 {
    background-color: #F2F4F7;
}

.bg-color-F2F6FF {
    background-color: #F2F6FF;
}

.bg-color-062663 {
    background-color: #062663;
}

.bg-color-FFFFFF {
    background-color: #FFFFFF;
}

.bg-color-E4EBF9 {
    background-color: #E4EBF9;
}

.bg-color-F4F7FC {
    background-color: #F4F7FC;
}

.bg-color-D5E1FA {
    background-color: #D5E1FA;
}

.bg-color-FDF7F7 {
    background-color: #FDF7F7;
}

.bg-color-E3EDFD {
    background-color: #E3EDFD;
}

.bg-color-hover-EBF2FD {
    background-color: #FFFFFF;
    transition: background-color 0.5s;
}

    .bg-color-hover-EBF2FD:hover {
        background-color: #EBF2FD;
    }

.bg-color-0D5CD1-btn {
    background-color: #0D5CD1;
}

    .bg-color-0D5CD1-btn:hover {
        background-color: #0A4CB0;
        transition: background-color 0.5s;
    }

.text-decoration-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.placeholder-40::placeholder {
    color: #080809; /* Здесь укажите нужный вам цвет */
    opacity: 0.4; /* Делает цвет непрозрачным, по умолчанию может быть уменьшена прозрачность */
}

.preview-container {
    display: none;
    flex-wrap: wrap;
    gap: 10px;
}

#customersContainer {
    min-height: 870px;
}

.menu {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 47px 13px rgba(69, 69, 69, 0.0), /* Тень на 0%, практически невидимая */ ¶ 0px 30px 12px rgba(69, 69, 69, 0.01), /* Тень на 1% */ ¶ 0px 17px 10px rgba(69, 69, 69, 0.05), /* Тень на 5% */ ¶ 0px 8px 8px rgba(69, 69, 69, 0.09), /* Тень на 9% */ ¶ 0px 2px 4px rgba(69, 69, 69, 0.10); /* Тень на 10% */
    margin-top: 10px;
    min-width: 10%;
    z-index: 9999; /* Высокий z-index для отображения поверх других элементов */
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.text {
    color: #080809; /* Изначальный цвет текста */
    transition: color 0.3s ease; /* Плавное изменение цвета текста */
    font-weight: 500;
}

.icon {
    opacity: 0; /* Изначально скрыть иконку */
    transition: opacity 0.3s ease; /* Плавное появление иконки */
    fill: #080809; /* Цвет иконки */
}

.menu-item:hover .text {
    color: #59595A; /* Цвет текста при наведении */
}

.menu-item:hover .icon {
    opacity: 1; /* Показать иконку при наведении */
}

.menu-hr {
    border: none;
    border-top: #CFCFCF solid 1px;
    width: 95%;
}

.svg-rotate {
    transition: transform 0.3s ease; /* Плавный переход */
}

    .svg-rotate.open {
        transform: rotate(180deg);
    }

    .svg-rotate.closed {
        transform: rotate(0deg);
    }

.fadeInItems {
    opacity: 0;
    animation: fadeInItemsAnimation 0.5s ease-in-out forwards;
}

@keyframes fadeInItemsAnimation {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes fadeOutMenu {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.show-menu {
    display: block;
    animation: fadeInMenu 0.3s ease forwards;
}

.hide-menu {
    animation: fadeOutMenu 0.3s ease forwards;
    animation-fill-mode: forwards;
}

#addMoreArea:hover {
    background-color: #e0e0e0; /* Легкий фон для выделения при наведении */
}

#addMoreArea svg {
    margin-bottom: 0;
}

#dropArea {
    position: relative;
}

    #dropArea.dragging, #addMoreArea.dragging {
        border-color: #0D5CD1; /* Цвет для состояния перетаскивания */
        background-color: #f0f8ff; /* Легкий фон для выделения */
    }

.preview-container img, .preview-container iframe {
    border-radius: 10px;
}

#addMoreArea {
    width: 170px;
    height: 170px;
    cursor: pointer;
    flex-shrink: 0; /* Убирает сжатие элемента в контейнере */
}

#addMoreDocsArea {
    width: 200px;
    height: 200px;
    cursor: pointer;
    flex-shrink: 0; /* Убирает сжатие элемента в контейнере */
}

    #addMoreDocsArea:hover {
        background-color: #e0e0e0; /* Легкий фон для выделения при наведении */
    }

    #addMoreDocsArea svg {
        margin-bottom: 0;
    }

#addMoreArea-edit {
    width: 170px;
    height: 170px;
    cursor: pointer;
    flex-shrink: 0; /* Убирает сжатие элемента в контейнере */
}

    #addMoreArea-edit:hover {
        background-color: #e0e0e0; /* Легкий фон для выделения при наведении */
    }

    #addMoreArea-edit svg {
        margin-bottom: 0;
    }

#addMoreAreaDocs-edit {
    width: 170px;
    height: 170px;
    cursor: pointer;
    flex-shrink: 0;
}

    #addMoreAreaDocs-edit:hover {
        background-color: #e0e0e0;
    }

    #addMoreAreaDocs-edit svg {
        margin-bottom: 0;
    }

.preview-item {
    position: relative;
    display: inline-block;
    margin-left: 5px;
}

.remove-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.46);
    color: white;
    border: none;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

    .remove-button svg {
        margin-top: 2px;
    }

.preview-container img, .preview-container iframe {
    border-radius: 10px;
}

#participant-select-menu {
    margin: 0 0 0 auto;
}

#participant-select-menu-edit {
    margin: 0 0 0 auto;
}

.hr-D4D5D6 {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.hr-AAAAAB {
    margin: 0;
    border: none;
    border-top: 1px solid #AAAAAB;
    width: 100%;
    margin-top: -2px;
}

.hr-E6E6E6 {
    border: 1px solid #E6E6E6;
}

.hr-E6E6E6-full-width {
    margin: 0;
    border: none;
    border-top: 1px solid #E6E6E6;
    width: 100%;
}

.hr-BDBEBF {
    margin: 0;
    border: none;
    border-top: 1px solid #BDBEBF;
    width: 100%;
}

.bx-shd-btn {
    box-shadow: inset 7px 7px 20px 4px rgba(237, 240, 244, 0.31), inset -7px -5px 20px 0 rgba(237, 240, 244, 0.31);
}

.bx-shd-main-btn {
    box-shadow: inset -7px -5px 20px 0 rgba(237, 240, 244, 0.2), inset 7px 7px 20px 4px rgba(237, 240, 244, 0.2);
}

.bx-shd-cart {
    transition: box-shadow 0.5s ease-in-out;
}

    .bx-shd-cart:hover {
        box-shadow: 0px 55px 55px 0px rgba(77, 77, 77, 0.09), 0px 14px 30px 0px rgba(77, 77, 77, 0.10);
    }

.j-c-left {
    justify-content: left;
}

.j-c-sp-betw {
    justify-content: space-between;
}

.j-c-right {
    justify-content: right;
}

.j-c-center {
    justify-content: center;
}

.f-w-300 {
    font-weight: 300;
}

.f-w-400 {
    font-weight: 400;
}

.f-w-600 {
    font-weight: 600 !important;
}

.f-w-500 {
    font-weight: 500 !important;
}

.f-w-700 {
    font-weight: 700 !important;
}
/*.f-w-hover-600:hover{
    font-weight: 600 !important;
    transition: font-weight 0.5s;
}*/

.border-B5B5B6 {
    border: #B5B5B6 solid 1px;
}

.border-A5BEF1 {
    border: #A5BEF1 solid 1px;
}

.border-E6E6E6 {
    border: #E6E6E6 solid 1px;
}

.border-004ADD {
    border: #004ADD solid 1px;
}

.border-6095E3 {
    border: #6095E3 solid 1px;
}

.outline-none {
    outline: none;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.cirle-active {
    border-radius: 50%;
    background-color: #E4EBF9;
    padding: 5px;
    height: 30px;
    width: 30px;
    border: #9DABC9 solid 1px;
}

.cirle {
    border-radius: 50%;
    background-color: #ffffff;
    padding: 5px;
    height: 30px;
    width: 30px;
    border: #9DABC9 solid 1px;
}

.bg-hover-4A556B:hover {
    background-color: #4A556B;
}

.bg-hover-062663 {
    transition: background-color 0.5s ease-in-out;
}

    .bg-hover-062663:hover {
        background-color: #062663;
        border: none;
        color: #FFFFFF;
    }

.bg-hover-FFFFFF:hover {
    background-color: #fff;
}

.c-hover-0D5CD1:hover {
    color: #0D5CD1;
}

.c-hover-062663:hover {
    color: #062663;
}

.c-hover-59595A {
    transition: color 0.3s ease-in-out;
}

    .c-hover-59595A:hover {
        color: #59595A;
    }

.c-hover-0D5CD1 {
    transition: color 0.5s ease-in-out;
}

    .c-hover-0D5CD1:hover {
        color: #0D5CD1;
    }

.bg-hover-062663-btn:hover {
    background-color: #062663;
}

.main-button {
    background-color: #062663;
    border: none;
    color: #FFFFFF;
    box-shadow: inset -7px -5px 20px 0 rgba(237, 240, 244, 0.2), inset 7px 7px 20px 4px rgba(237, 240, 244, 0.2);
    transition: box-shadow 0.5s ease-in-out;
}

    .main-button:hover {
        background-color: #062663;
        border: none;
        color: #FFFFFF;
        box-shadow: none;
        transition: box-shadow 0.5s ease-in-out;
    }

.img-report-hover {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('/references/report.png');
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
}

    .img-report-hover:hover {
        background-image: url('/references/report-blue.png');
    }

.chbox-0D5CD1 {
    min-width: 21px !important;
    height: 21px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .chbox-0D5CD1:checked {
        background-color: #0D5CD1;
        border-color: #0D5CD1;
    }

    .chbox-0D5CD1::before {
        content: url('/refs/checkbox.png');
        display: block;
        text-align: center;
        line-height: 24px;
        font-size: 16px;
        color: #fff;
        font-weight: bold;
    }

.modal {
    position: fixed;
    top: 0;
    right: -100%;
    width: 60%;
    height: 100%;
    background-color: white;
    overflow-x: hidden;
    transition: right 0.9s ease;
    z-index: 1000;
}

.modal-small {
    position: fixed;
    top: 0;
    right: -100%;
    width: 22%;
    height: 100%;
    background-color: white;
    overflow-x: hidden;
    transition: right 0.9s ease;
    z-index: 1000;
}

.modal-medium {
    position: fixed;
    top: 0;
    right: -100%;
    width: 40%;
    height: 100%;
    background-color: white;
    overflow-x: hidden;
    transition: right 0.9s ease;
    z-index: 1000;
}

.modal-content {
    position: relative;
}

.modal.open {
    right: 0;
}

.modal-small.open {
    right: 0;
}

.modal-medium.open {
    right: 0;
}

@media screen and (max-width: 1440px) {
    .modal {
        width: 84%;
    }

    .modal-small {
        width: 84%;
    }

    .modal-medium {
        width: 84%;
    }
}

.modal-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: visible;
    transition: background-color 0.5s ease, visibility 0.5s ease;
    z-index: 999;
}

.custom-select {
    background: url('/references/arrow-black-down.png') no-repeat right;
    background-position-x: calc(100% - 16px);
    background-color: #F4F7FC;
}

.popover {
    display: none;
    position: absolute;
    background-color: #E4EBF9;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-top: 10px;
    min-width: 12%;
    z-index: 9999; /* Высокий z-index для отображения поверх других элементов */
}

.clientstatus {
    display: none;
    position: absolute;
    background: linear-gradient(to right, hsla(220, 71%, 50%, 0.7), hsla(220, 71%, 50%, 0.7));
    border-radius: 0px 5px 5px 5px;
    padding: 10px;
    margin-top: 10px;
    margin-left: 10px;
    z-index: 9999; /* Высокий z-index для отображения поверх других элементов */
    color: white;
}

#toggle-button {
    transition: transform 0.3s ease;
}

.rotated {
    transform: rotate(180deg);
}

.bill-m-b-20:not(:last-child) {
    margin-bottom: 20px;
}

.clientorder-m-b-14:not(:last-child) {
    margin-bottom: 14px;
}

.obj-m-b-12:not(:last-child) {
    margin-bottom: 12px;
}

.obj-m-b-8:not(:last-child) {
    margin-bottom: 8px;
}

.clients-m-b-10:not(:last-child) {
    margin-bottom: 10px;
}

.green-circle {
    border-radius: 50%;
    background-color: #A5E4A7;
    height: 22px;
    width: 22px;
}

.yellow-circle {
    border-radius: 50%;
    background-color: #F6EEA0;
    height: 22px;
    width: 22px;
}

.blue-circle {
    border-radius: 50%;
    background-color: #A5D6FA;
    height: 22px;
    width: 22px;
}

.underline {
    text-decoration: underline solid #79797A 2px;
}

.underline-hover {
    text-decoration: underline solid transparent 1px; /* Начальное состояние: прозрачное подчеркивание */
    transition: text-decoration 0.5s ease-in-out;
}

    .underline-hover:hover {
        text-decoration: underline solid #0D5CD1 1px;
    }

.bg-plane {
    background-image: url('/references/industrial-port-container-yard\ 2.jpg');
    background-size: cover; /* Покрыть всю площадь div */
    background-position: center; /* Центрировать изображение */
    height: 100vh; /* Высота 100% от высоты видимой области */
    width: 100%
}

.d-none {
    display: none;
}

.d-inline {
    display: inline;
}

.white-space-nowrap {
    white-space: nowrap;
}

.box-sizing-border-box {
    box-sizing: border-box;
}

.gap-17px {
    gap: 17px;
}

.gap-13px {
    gap: 13px;
}



.d-flex.j-c-sp-betw.w-100.gap-17px.box-sizing-border-box > div {
    flex: 1;
    min-width: 200px;
    text-align: center;
    border: 2px solid #77ABF7;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    transition: background-color 0.5s ease, flex-grow 0.5s ease;
}

    .d-flex.j-c-sp-betw.w-100.gap-17px.box-sizing-border-box > div:hover {
        background-color: #EBF2FD;
        flex-grow: 2;
    }

    .d-flex.j-c-sp-betw.w-100.gap-17px.box-sizing-border-box > div > p {
        transition: font-weight 0.5s ease;
    }

    .d-flex.j-c-sp-betw.w-100.gap-17px.box-sizing-border-box > div:hover > p {
        font-weight: 600;
    }


.d-flex.j-c-sp-betw.w-75.gap-17px.box-sizing-border-box > div {
    flex: 1;
    min-width: 200px;
    text-align: center;
    border: 2px solid #77ABF7;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    transition: background-color 0.5s ease, flex-grow 0.5s ease;
}

    .d-flex.j-c-sp-betw.w-75.gap-17px.box-sizing-border-box > div:hover {
        background-color: #EBF2FD;
        flex-grow: 2;
    }

    .d-flex.j-c-sp-betw.w-75.gap-17px.box-sizing-border-box > div > p {
        transition: font-weight 0.5s ease;
    }

    .d-flex.j-c-sp-betw.w-75.gap-17px.box-sizing-border-box > div:hover > p {
        font-weight: 600;
    }


.border-color-D4786C.border-r-10px.d-flex.j-c-center.al-it-center.cursor-default.bg-color-FDF7F7.w-100.p-32px.box-sizing-border-box > svg {
    width: 9px;
    height: 51px;
}

.hr1 {
    border: none; /* Убираем стандартную границу */
    border-top: 1px solid #0D5CD1; /* Задаем левую границу для вертикального hr */
    flex-grow: 1; /* Если хотите, чтобы hr заполнял доступное пространство */
}

.hr2 {
    border: none; /* Убираем стандартную границу */
    border-top: 3px solid #FFFFFF; /* Задаем левую границу для вертикального hr */
    border-radius: 3px;
    z-index: 1;
}

.hr3 {
    border: none; /* Убираем стандартную границу */
    border-top: 3px solid rgba(255, 255, 255, 0.5); /* Задаем левую границу для вертикального hr */
    border-radius: 3px;
    z-index: 1;
}

.hr4 {
    border: none; /* Убираем стандартную границу */
    border-top: 1px solid #BDBDC3; /* Задаем левую границу для вертикального hr */
    border-radius: 3px;
}

.ellipsis {
    flex-grow: 1;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.4); /* Вместо текста можно использовать пунктирное подчеркивание */
    height: 1px; /* Высота линии */
}

.custom-range {
    position: relative;
    width: 100%; /* Ширина слайдера */
}

    /* Убираем стандартную стилизацию полоски */
    .custom-range input[type="range"] {
        -webkit-appearance: none; /* Убираем стандартное оформление */
        width: 100%; /* Ширина слайдера */
        height: 10px; /* Высота полоски */
        background: transparent; /* Прозрачный фон */
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(25%);
        z-index: 1;
    }

        /* Стили для самой точки (ползунка) */
        .custom-range input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; /* Убираем стандартное оформление ползунка */
            width: 19px; /* Ширина ползунка */
            height: 19px; /* Высота ползунка */
            background: #0D5CD1; /* Цвет ползунка */
            cursor: pointer; /* Курсор для ползунка */
            border-radius: 50%; /* Круглая форма ползунка */
            border: 2px solid #FFFFFF;
            position: relative;
            z-index: 2;
        }

        .custom-range input[type="range"]::-moz-range-thumb {
            width: 19px; /* Ширина ползунка */
            height: 19px; /* Высота ползунка */
            background: #0D5CD1; /* Цвет ползунка */
            cursor: pointer; /* Курсор для ползунка */
            border-radius: 50%; /* Круглая форма ползунка */
            border: 2px solid #FFFFFF;
        }

        .custom-range input[type="range"]::-ms-thumb {
            width: 19px; /* Ширина ползунка */
            height: 19px; /* Высота ползунка */
            background: #0D5CD1; /* Цвет ползунка */
            cursor: pointer; /* Курсор для ползунка */
            border-radius: 50%; /* Круглая форма ползунка */
            border: 2px solid #FFFFFF;
        }

.input-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .input-container::after {
        content: '₽'; /* Символ рубля */
        position: absolute;
        right: 10px; /* Положение символа рубля от правого края */
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px; /* Размер шрифта для символа рубля */
        color: #080809; /* Цвет символа рубля */
        font-family: "Gilroy";
        font-weight: 500;
    }

    .input-container.term::after {
        content: 'дн.'; /* Символ рубля */
        position: absolute;
        right: 10px; /* Положение символа рубля от правого края */
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px; /* Размер шрифта для символа рубля */
        color: #080809; /* Цвет символа рубля */
        font-family: "Gilroy";
        font-weight: 500;
    }

#filter-sale {
    display: none;
}

.filter-shadow-custom {
    box-shadow: 0px 81px 23px 0px rgba(48, 48, 48, 0), /* X: 0, Y: 81, Blur: 23, Spread: 0, Color: #303030, Alpha: 0% */
    0px 52px 21px 0px rgba(48, 48, 48, 0.01), /* X: 0, Y: 52, Blur: 21, Spread: 0, Color: #303030, Alpha: 1% */
    0px 29px 18px 0px rgba(48, 48, 48, 0.05), /* X: 0, Y: 29, Blur: 18, Spread: 0, Color: #303030, Alpha: 5% */
    0px 13px 13px 0px rgba(48, 48, 48, 0.09), /* X: 0, Y: 13, Blur: 13, Spread: 0, Color: #303030, Alpha: 9% */
    0px 3px 7px 0px rgba(48, 48, 48, 0.1); /* X: 0, Y: 3, Blur: 7, Spread: 0, Color: #303030, Alpha: 10% */
}

/* Ключевые кадры для анимации высоты */


/* Начальные стили для скрытого элемента */
#more-loan {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    display: flex;
}

    /* Стиль для отображенного элемента */
    #more-loan.show {
        opacity: 1;
        max-height: 500px; /* Увеличьте значение в зависимости от содержимого */
        display: flex;
    }

#more-sale {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    display: flex;
}

    /* Стиль для отображенного элемента */
    #more-sale.show {
        opacity: 1;
        max-height: 500px; /* Увеличьте значение в зависимости от содержимого */
        display: flex;
    }



.flex-wrap-wrap {
    flex-wrap: wrap;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Минимальная ширина элемента 250px, гибко заполняет пространство */
    column-gap: 20px;
    row-gap: 40px;
    justify-content: center; /* Выравнивание по центру, если контейнер шире */
}


.doc-shadow {
    box-shadow: 0px 296px 83px rgba(89, 89, 89, 0.0), /* Тень на 0%, практически невидимая */
    0px 190px 76px rgba(89, 89, 89, 0.01), /* Тень на 1% */
    0px 107px 64px rgba(89, 89, 89, 0.05), /* Тень на 5% */
    0px 47px 47px rgba(89, 89, 89, 0.09), /* Тень на 9% */
    0px 12px 26px rgba(89, 89, 89, 0.10); /* Тень на 10% */
}

.border-r-10px.doc-shadow.p-36-19.box-sizing-border-box.al-sf-stretch {
    display: grid;
    grid-template-rows: auto 1fr; /* Первая строка для текста, вторая для элемента внизу */
}

.d-flex.al-it-end {
    grid-row: 2; /* Размещает элемент во второй строке */
}

.f-w-500.f-size-18 > a {
    display: block;
}

.parent-select-filter {
    width: 35%; /* Ваша ширина блока */
    background-color: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #DBE5F5;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
}

.parent-select-profile {
    width: 49%; /* Ваша ширина блока */
    background-color: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
}

.parent-select-100 {
    width: 100%; /* Ваша ширина блока */
    background-color: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
}

.parent-select-obj {
    width: 74%; /* Ваша ширина блока */
    background-color: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
}

.w-20.bg-color-FFFFFF.border-r-10px.box-sizing-border-box .parent-select-filter {
    width: 35%; /* Ваша ширина блока */
    background-color: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
}

.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper-profile {
    position: relative;
    width: 100%;
}

select {
    width: 100%;
    border: none;
    outline: none;
    font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 500;
    box-sizing: border-box;
    padding-right: 30px; /* Оставляем место для стрелки */
    -webkit-appearance: none; /* Для браузеров на базе WebKit, включая Chrome и Safari */
    -moz-appearance: none; /* Для Firefox */
    appearance: none; /* Стандартное свойство */
}

    select::-ms-expand {
        display: none; /* Убираем стрелку для IE */
    }

/* Стиль стрелки (если необходимо) */
.select-wrapper::after {
    content: "";
    position: absolute;
    right: 10px; /* Расстояние от края */
    top: 50%;
    transform: translateY(-50%);
    width: 15px; /* Ширина стрелки */
    height: 10px; /* Высота стрелки */
    background: url('/refs/arrow-select.svg') no-repeat center center;
    background-size: contain; /* Масштабирование фона */
    pointer-events: none; /* Чтобы стрелка не мешала кликам */
}

.select-wrapper-profile::after {
    content: "";
    position: absolute;
    right: 0px; /* Расстояние от края */
    top: 50%;
    transform: translateY(-50%);
    width: 15px; /* Ширина стрелки */
    height: 10px; /* Высота стрелки */
    background: url('/refs/arrow-select.svg') no-repeat center center;
    background-size: contain; /* Масштабирование фона */
    pointer-events: none; /* Чтобы стрелка не мешала кликам */
}

.faq-content {
    height: 0; /* Начальная высота для скрытого состояния */
    opacity: 0; /* Начальная непрозрачность для скрытого состояния */
    overflow: hidden; /* Скрываем содержимое за пределами высоты */
    transition: height 2s ease, opacity 0.5s ease; /* Плавное изменение высоты и непрозрачности */
    padding: 0; /* Паддинг по умолчанию */
}

    .faq-content.show {
        height: auto; /* Высота автоматически подстраивается под содержимое */
        opacity: 1; /* Полная непрозрачность */
    }

.arrow {
    transition: transform 0.3s ease; /* Плавное вращение */
}

    .arrow.rotate {
        transform: rotate(180deg); /* Вращение на 180 градусов */
    }

html {
    height: -webkit-fill-available;
}

.sort-pooper {
    display: none; /* По умолчанию скрыто */
    position: absolute; /* Позиционируем относительно ближайшего позиционированного предка или самого документа */
    top: 100%; /* Располагаем под элементом */
    left: 0; /* Прижимаем к левому краю элемента */
    background-color: white; /* Фон модального окна */
    border-radius: 10px;
    padding: 17px 21px; /* Внутренние отступы */
    z-index: 1000; /* Размещаем поверх всех элементов */
    margin-top: 5px;
    box-shadow: 0px 78px 22px rgba(0, 0, 0, 0.0), 0px 50px 20px rgba(0, 0, 0, 0.01), 0px 28px 17px rgba(0, 0, 0, 0.05), 0px 12px 12px rgba(0, 0, 0, 0.09), 0px 3px 7px rgba(0, 0, 0, 0.10);
    width: 242px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    opacity: 0; /* Начальная невидимость */
}

    .sort-pooper.visible {
        display: block; /* Показать модальное окно */
        opacity: 1; /* Сделать видимым */
    }

#sort-arrow {
    transition: transform 0.3s ease; /* Переход для плавного поворота */
}

    #sort-arrow.rotate {
        transform: rotate(180deg); /* Поворот на 180 градусов */
    }

.arrow-hover {
    position: relative; /* Это нужно, чтобы псевдо-элемент позиционировался относительно родителя */
    padding-right: 30px; /* Добавляем отступ справа, чтобы изображение не перекрывало текст */
}

    .arrow-hover::after {
        content: ''; /* Без текста */
        display: block; /* Блоковое отображение */
        position: absolute; /* Абсолютное позиционирование относительно родителя */
        right: 0; /* Позиция справа от родителя */
        top: 50%; /* Центрируем по вертикали */
        transform: translateY(-50%); /* Корректировка по вертикали */
        width: 8px; /* Ширина изображения */
        height: 12px; /* Высота изображения */
        background: url('/refs/arrow-right-grey.png') no-repeat center center; /* Замените путь на свой */
        background-size: contain; /* Убедитесь, что изображение масштабируется правильно */
        opacity: 0; /* Начально скрываем изображение */
        transition: opacity 0.3s ease; /* Плавное появление */
    }

    .arrow-hover:hover::after {
        opacity: 1; /* Показываем изображение при наведении */
    }

#sort-type-div {
    display: inline-flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    /* Добавьте другие стили, если нужно, например, width, height, и т.д. */
}

    #sort-type-div.show {
        opacity: 1;
        visibility: visible;
    }

.grid-item {
    cursor: pointer;
}

.flex-direction-column {
    flex-direction: column;
}

.object-shadow-1 {
    box-shadow: 0px -224px 63px rgba(0, 0, 0, 0.0), 0px -144px 57px rgba(0, 0, 0, 0.01), 0px -81px 48px rgba(0, 0, 0, 0.05), 0px -36px 36px rgba(0, 0, 0, 0.09), 0px -9px 20px rgba(0, 0, 0, 0.10);
}

.object-shadow-2 {
    box-shadow: 0px -102px 28px rgba(133, 133, 133, 0.0), 0px -65px 26px rgba(133, 133, 133, 0.01), 0px -37px 22px rgba(133, 133, 133, 0.05), 0px -16px 16px rgba(133, 133, 133, 0.09), 0px -4px 9px rgba(133, 133, 133, 0.10);
}

.object-shadow-3 {
    box-shadow: 0px 47px 13px rgba(92, 92, 92, 0.0), 0px 30px 12px rgba(92, 92, 92, 0.01), 0px 17px 10px rgba(92, 92, 92, 0.05), 0px 7px 7px rgba(92, 92, 92, 0.09), 0px 2px 4px rgba(92, 92, 92, 0.10);
}

.w-100.d-flex.m-b-30 > img {
    border-radius: 10px;
}

.hr5 {
    border: none; /* Убираем стандартную границу */
    border-top: 1px solid #E4E5E6; /* Задаем левую границу для вертикального hr */
    border-radius: 3px;
    margin-bottom: 30px;
}

.description-wrapper {
    overflow: hidden;
    max-height: 0; /* Начальная высота для скрытого состояния */
    transition: max-height 1s ease-out; /* Анимация изменения высоты */
}

    .description-wrapper.open {
        max-height: 500px; /* Установите достаточно большую высоту для отображения содержимого */
    }

.description-content {
    display: block; /* Содержимое внутри обертки */
}

.image {
    border: solid 1px;
    padding: 3px;
    cursor: pointer;
    height: 71px;
    width: 132px;
}

.image-1 {
    border-color: #3E86F3;
}

.image-2, .image-3 {
    border-color: #FFFFFF;
}

.container-obj-photos {
    border: solid 1px #FFFFFF;
    border-radius: 10px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: auto;
    position: relative;
}

.container-obj-photos .content-obj-photos {
    /*background-image: url('/refs/object-photo-3.png');*/
    width: 140px;
    height: 100%;
    background-size: contain;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
}

.container-obj-photos .content-obj-photos::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* затемнение */
    z-index: 1;
}

.container-obj-photos .content-obj-photos p {
    position: relative;
    z-index: 2;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
}

#dynamic-height {
    position: relative;
    display: flex;
    justify-content: center;
}

    #dynamic-height p {
        color: white; /* Adjust as needed */
        font-size: 12px;
        font-weight: 600;
    }

.obj-photos-title {
    position: absolute;
    bottom: 40px; /* Расстояние от низа */
    left: 50%; /* Центрируем по горизонтали */
    transform: translateX(-50%);
    background-color: rgba(139, 142, 147, 0.87);
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 5px;
}

.obj-photos-title-active {
    width: 0; /* Начальное состояние */
    height: 4px;
    border-radius: 5px;
    background-color: #FFFFFF;
    animation: active-grow-obj-photos 0.5s ease-out forwards; /* Анимация */
}

@keyframes active-grow-obj-photos {
    from {
        width: 0;
    }

    to {
        width: 15px; /* Конечное состояние */
    }
}

.obj-photos-title-passive {
    width: 0; /* Начальное состояние */
    height: 4px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.65);
    animation: passive-grow-obj-photos 0.5s ease-out forwards; /* Анимация */
    animation-delay: 0.2s; /* Задержка, чтобы анимация началась после активного элемента */
}

@keyframes passive-grow-obj-photos {
    from {
        width: 0;
    }

    to {
        width: 4px; /* Конечное состояние */
    }
}

.obj-photos-left {
    position: absolute;
    bottom: 40%; /* Расстояние от низа */
    left: 30px; /* Центрируем по горизонтали */
    transform: translateY(-40%);
    background-color: rgba(248, 248, 248, 0.69);
    height: 33px;
    width: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .obj-photos-left svg {
        margin-left: -2px;
    }

.obj-photos-right {
    position: absolute;
    bottom: 40%;
    right: 30px;
    transform: translateY(-40%);
    background-color: rgba(248, 248, 248, 0.69);
    height: 33px;
    width: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .obj-photos-right svg {
        margin-right: -2px;
    }

#image-previewer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    background-color: #FFFFFF;
}

.image-previewer-left {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 15%;
    padding: 5px;
    overflow-y: auto;
    height: 100vh;
}

.image-previewer-center {
    margin-left: 15%;
    margin-right: 1%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1;
}

.image-previewer-right {
    height: fit-content;
    width: 1%;
    margin-top: 15px;
    margin-right: 15px;
}

.image-previewer-left img {
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 10px;
    padding: 5px;
}

.h-100vh {
    height: 100vh;
    object-fit: cover;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .image-previewer-left {
        width: 20%;
    }

    .image-previewer-center {
        margin-left: 20%;
    }
}

@media (max-width: 992px) {
    .image-previewer-left {
        width: 30%;
    }

    .image-previewer-center {
        margin-left: 30%;
    }
}

@media (max-width: 768px) {
    .image-previewer-left {
        display: none;
    }

    .image-previewer-center {
        margin-left: 0;
        margin-right: 0;
    }

    .image-previewer-right {
        width: 10%;
    }
}

@media (max-width: 480px) {
    .image-previewer-right {
        width: 15%;
        margin-right: 5px;
    }

        .image-previewer-right svg {
            width: 18px;
            height: 18px;
        }
}

.image-previewer-left, .image-previewer-center, .image-previewer-right {
    box-sizing: border-box;
}

    /* Убедитесь, что изображения не превышают ширину родительского контейнера */
    .image-previewer-left img, .image-previewer-center img {
        max-width: 100%;
        height: 250px;
    }

.border-bottom-1 {
    border: none;
    border-bottom: #080809 solid 3px;
}

.tab {
    position: relative;
    overflow: hidden;
}

    .tab:not(.active):hover {
        color: #0D5CD1;
    }

    .tab::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background-color: #080809;
        transition: width 0.4s ease;
    }

    .tab.active {
        font-weight: 600;
        margin-top: -1px;
    }

        .tab.active::after {
            width: 100%;
        }

    .tab.removing::after {
        transition: width 0.4s ease;
        width: 0;
    }

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1000;
}

    .overlay.show {
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }
/* Стили для белого блока */
.overlay-content {
    width: 499px;
    transform: scale(0.2);
    transition: transform 0.5s ease;
}

.overlay-content-obj {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
    transform: scale(0.2);
}

.overlay-content-client {
    position: absolute;
    width: 1200px;
    top: 90%;
    left: 50%;
    transition: transform 0.5s ease;
    transform: translate(-50%, -50%) scale(0.2);
}

.overlay.show .overlay-content {
    transform: scale(1);
}

.overlay.show .overlay-content-obj {
    transform: scale(1);
}

.overlay.show .overlay-content-client {
    transform: translate(-50%, -50%) scale(1);
}

.sidebar {
    position: sticky;
    top: 20px;
    align-self: flex-start; /* Это нужно, чтобы sidebar не сдвигался вниз */
    /* Другие стили для второго блока */
}

body.modal-open {
    margin-right: 15px;
    overflow: hidden;
}

.input-auth-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .input-auth-container svg {
        position: absolute;
        top: 50%;
        left: 19px;
        transform: translateY(-50%);
        transition: opacity 0.3s ease;
        pointer-events: none; /* Иконка не мешает взаимодействию с input */
    }

    .input-auth-container input {
        padding: 10px 10px 10px 55px; /* Отступы для иконки */
        width: 100%;
        border: 1px solid transparent;
        outline: none;
        box-sizing: border-box;
        transition: padding-left 0.3s ease, background-color 0.3s ease, border 0.3s ease; /* Переходы для padding-left, background-color и border */
        background-color: #F2F6FF;
        border-radius: 10px;
        font-size: 18px;
        height: 72px;
    }

        .input-auth-container input:focus + svg {
            opacity: 0;
        }

        .input-auth-container input:focus {
            padding-left: 19px; /* Уменьшаем padding-left, когда иконка исчезает */
            background-color: #fff; /* Белый фон при фокусировке */
            border: 1px solid #3E86F3; /* Синяя граница при фокусировке */
        }

.menu {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 47px 13px rgba(69, 69, 69, 0.0), /* Тень на 0%, практически невидимая */
    0px 30px 12px rgba(69, 69, 69, 0.01), /* Тень на 1% */
    0px 17px 10px rgba(69, 69, 69, 0.05), /* Тень на 5% */
    0px 8px 8px rgba(69, 69, 69, 0.09), /* Тень на 9% */
    0px 2px 4px rgba(69, 69, 69, 0.10); /* Тень на 10% */
    margin-top: 10px;
    min-width: 10%;
    z-index: 9999; /* Высокий z-index для отображения поверх других элементов */
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.text {
    color: #080809; /* Изначальный цвет текста */
    transition: color 0.3s ease; /* Плавное изменение цвета текста */
    font-weight: 500;
}

.icon {
    opacity: 0; /* Изначально скрыть иконку */
    transition: opacity 0.3s ease; /* Плавное появление иконки */
    fill: #080809; /* Цвет иконки */
}

.menu-item:hover .text {
    color: #59595A; /* Цвет текста при наведении */
}

.menu-item:hover .icon {
    opacity: 1; /* Показать иконку при наведении */
}

.menu-hr {
    border: none;
    border-top: #CFCFCF solid 1px;
    width: 95%;
}

.svg-rotate {
    transition: transform 0.3s ease; /* Плавный переход */
}

    .svg-rotate.open {
        transform: rotate(180deg);
    }

    .svg-rotate.closed {
        transform: rotate(0deg);
    }