@import url('/static/css/fonts.css');
@import url('/static/css/svg_sprite.css');

*{
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}


:root{
    --white-color:#FFFFFF;
    --gray-color:#C2CBD7;
    --light-gray-color:#F0F3F9;
    --dark-gray-color:#848F9E;
    --dark-color:#282C30;
    --yellow-color:#F4BE33;
    --green-color:#27ae60;
    --light-green-color:#d5f6e3;
    --red-color:#ee5253;
    --light-red-color:#fad1d1; 
    --purple-color:#B025BC;
    --light-purple-color:#F2CCF5;
    --dark-purple-color:#7F1B88;
    --gradient-color:linear-gradient(to right, #b025bc 0%, #090d69 100%);
}

body, html{
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    color: var(--dark-color);
    line-height:normal;
    overflow-x: hidden;
}

body.modal-open {
    overflow-y: hidden;
    padding-right: 0 !important;
  }


img{user-drag: none;-webkit-user-drag: none;-moz-user-select: none;}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a{width: auto !important;text-decoration: none !important;}

.fw-700{font-weight: 700;}
.fw-600{font-weight: 600;}
.fw-500{font-weight: 500;}

.br-16{border-radius: 16px;}
.br-12{border-radius: 12px !important;}
.br-10{border-radius: 10px;}
.white-cl{color: var(--white-color);}
.white-bg{background: var(--white-color)!important;}
.gradient-bg{background: var(--gradient-color);}
.gradient-text{background: var(--gradient-color);-webkit-text-fill-color: transparent;background-clip: text;}
.dark-cl{color: var(--dark-color);}
.gray-cl{color: var(--gray-color);}
.gray-bg{background-color: var(--gray-color) !important;}
.light-gray-bg{background-color: var(--light-gray-color) !important;}
.dark-gray-cl{color: var(--dark-gray-color);}
.green-cl{color:var(--green-color);}
.red-cl{color:var(--red-color);}
.red-bg{background: var(--red-color) !important;}
.yellow-cl{color:var(--yellow-color);}
.yellow-bg{background: var(--yellow-color);}
.green-bg{background: var(--green-color) !important;}
.light-green-bg{background: var(--light-green-color);}
.light-purple-bg{background: var(--light-purple-color);}
.dark-purple-cl{color: var(--dark-purple-color);}
.dark-purple-bg{background: var(--dark-purple-color) !important;}

.p-40{padding: 2.5em !important;}
.p-24{padding: 24px !important;}
.p-20{padding: 20px !important;}
.p-16{padding: 16px !important;}
.p-12{padding: 12px !important;}
.p-6{padding: 6px !important;}

.plr-16{padding-left: 16px;padding-right: 16px;}
.plr-16-tb-8{padding: 8px 16px;}

.ptb-24{padding-top: 24px!important;padding-bottom: 24px!important;}
.ptb-12{padding-top: 12px!important;padding-bottom: 12px!important;}
.ptb-10{padding-top: 10px!important;padding-bottom: 10px!important;}
.ptb-6{padding-top: 6px!important;padding-bottom: 6px!important;}

.mt-32{margin-top: 32px;}
.mt-24{margin-top: 24px;}
.mt-16{margin-top: 16px !important;}
.mt-12{margin-top: 12px !important;}

.mb-32{margin-bottom: 32px !important;}
.mb-24{margin-bottom: 24px !important;}
.mb-16{margin-bottom: 16px !important;}
.mb-12{margin-bottom: 12px !important;}

.ml-8{margin-left: 8px;}

.mlr-12{margin-left: 12px;margin-right: 12px;}

.hidden{display: none !important;}
.fs-7{font-size:14px;}

#main-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px}
#main-loader img{animation:beat 1s infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.95)}}

.login-bg{background-image:url(../img/login-bg.svg);background-repeat:no-repeat;background-size:cover;height:100%;background-attachment:fixed}
.loader{width:8px;color:var(--purple-color);aspect-ratio:1;border-radius:50%;box-shadow:38px -38px 0 0,76px -38px 0 0,114px -38px 0 0,38px 0 0 10px,76px 0 0 10px,114px 0 0 10px,38px 38px 0 0,76px 38px 0 0,114px 38px 0 0;transform:translateX(-76px);animation:l26 2s infinite linear}@keyframes l26{12.5%{box-shadow:38px -38px 0 0,76px -38px 0 0,114px -38px 0 10px,38px 0 0 10px,76px 0 0 0,114px 0 0 10px,38px 38px 0 0,76px 38px 0 0,114px 38px 0 0}25%{box-shadow:38px -38px 0 10px,76px -38px 0 0,114px -38px 0 10px,38px 0 0 0,76px 0 0 0,114px 0 0 0,38px 38px 0 0,76px 38px 0 10px,114px 38px 0 0}50%{box-shadow:38px -38px 0 10px,76px -38px 0 10px,114px -38px 0 0,38px 0 0 0,76px 0 0 0,114px 0 0 0,38px 38px 0 0,76px 38px 0 0,114px 38px 0 10px}62.5%{box-shadow:38px -38px 0 0,76px -38px 0 0,114px -38px 0 0,38px 0 0 10px,76px 0 0 0,114px 0 0 0,38px 38px 0 0,76px 38px 0 10px,114px 38px 0 10px}75%{box-shadow:38px -38px 0 0,76px -38px 0 10px,114px -38px 0 0,38px 0 0 0,76px 0 0 0,114px 0 0 10px,38px 38px 0 0,76px 38px 0 0,114px 38px 0 10px}87.5%{box-shadow:38px -38px 0 0,76px -38px 0 10px,114px -38px 0 0,38px 0 0 0,76px 0 0 10px,114px 0 0 0,38px 38px 0 10px,76px 38px 0 0,114px 38px 0 0}}
h1.welcome-text {
    font-size: 2.5em;
    margin: 0;
}

p.welcome-subtitle-text {
    font-size: 1.125em;
    margin: 0;
}

.info-block p{
    font-size: 1.25em;
    line-height: 24px;
    margin: 0;
}

.info-block .author-name{
    width: fit-content;
    text-align: center;
    font-size: 1.25em;
}

.main-left-block{height: 768px;}

p.agreements{font-size:0.875em;}

.agreements a:hover{color: var(--dark-color);}

input{
    border-radius: 12px !important;
    background: var(--light-gray-color) !important;
    border: none !important;
    padding: 16px !important;
    outline: none !important;
    font-weight: 600;
    line-height: normal !important;
}

input::placeholder{
    color: var(--dark-gray-color) !important;
    font-weight: 400;
}

input:focus {
    background: var(--white-color) !important;
    box-shadow:inset 0px 0px 0px 1px var(--purple-color) !important;
    font-weight: 600;
}

.iti{display: block !important;font-weight: 600;}

.iti input{
    padding: 20px 20px 20px 80px !important;
    font-weight: 600;
}

.iti__selected-country{border-radius: 12px !important;}

button{
    border: none!important;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

button:hover{ opacity: .75;}

button:disabled{
    background:var(--gray-color);
    color: var(--dark-gray-color);
    cursor:not-allowed;
}

button:disabled:hover {opacity: 1;}


.screenshot img {
    max-width: 100%;
    height: auto;
    margin-top: 74px;
}

#loader {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50%;
}


.sms-code-digit{
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    padding: 12px;
    margin: 0;
}

.logo{
    width: 140px;
    height: 24px;
    object-fit: cover;
    display: block;
   margin: 0 auto;
   transition: all 0.5s ease;
}

.logo:hover{transform: scale(1.1);}

.nav-left-bar .divider{border-left: 2px solid var(--gray-color);height: 16px;}

.nav-left-bar .list-links ul a{color: var(--dark-color);}
.nav-left-bar .list-links li{margin-top:12px;}
.nav-left-bar .list-links li svg{margin-right:8px;}

.nav-left-bar .list-links li:hover, .nav-left-bar .list-links .icon:hover,.active-bar, .nav-left-bar .store-select a:hover{background:var(--gradient-color);-webkit-text-fill-color:transparent;background-clip:text;}
.nav-left-bar .list-links li:nth-child(1):hover .icon-card, .nav-left-bar .list-links li:nth-child(2):hover .icon-truck, .nav-left-bar .list-links li:nth-child(3):hover .icon-comment, .nav-left-bar .list-links li:nth-child(1):hover .icon-fav, .nav-left-bar .list-links li:nth-child(2):hover .icon-like, .nav-left-bar .list-links li:nth-child(3):hover .icon-question, .nav-left-bar .list-links li:nth-child(4):hover .icon-cart, .nav-left-bar .list-links li:nth-child(1):hover .icon-tariff, .nav-left-bar .signout:hover {background: var(--gradient-color)!important;}
.active-bar svg{background: var(--gradient-color);background-clip:none;}

.nav-left-bar .list-links li img{padding-right:8px;}

.nav-left-bar .signout svg{margin-top: 2px;}

.nav-left-bar .signout a{color:var(--dark-color);}

.nav-left-bar .signout:hover a{color:var(--white-color);}

.nav-left-bar .signout:hover .icon-exit{background:var(--white-color);}

.alert{transition:0.5s;border:none;line-height: 1.75em;margin-bottom: 0;}.alert-success{background-color:#DEF7E9;color:#2ECC71;}.alert-success svg{background:#2ECC71}.alert-warning{background-color:#ffe9d7;color:#fa8231;}.alert-warning svg{background:#fa8231}.alert-info{background-color:#D6EBFF;color:#1E90FF;}.alert-info svg{background:#1E90FF}.blink-animation{-webkit-animation:blink-animation 2s infinite both;animation:blink-animation 2s infinite both}@-webkit-keyframes blink-animation{0%,50%,100%{opacity:1}25%,75%{opacity:0}}


.form-select{
    border:none;
    background-color:var(--light-gray-color);
    border-radius:12px;
    outline: none !important;
}

.form-select:focus{background-color: var(--white-color) !important;border: none !important;box-shadow:inset 0px 0px 0px 1px var(--purple-color) !important;}
h2.title-section{font-size: 1.75em;}
#tabButtons.row, #addRansom .row, #myTabReviews.row, #myTab.row, #accordion-buttons.row{--bs-gutter-x: 0.5rem !important;}


.active-tab{color: var(--white-color) !important;background: var(--gradient-color) !important;font-weight: 500}
.border-b, .border-gray{background-color:transparent !important;box-shadow:inset 0px 0px 0px 1px var(--gray-color) !important;}
.border-b:hover{box-shadow: none !important;background: var(--gradient-color) !important;color: var(--white-color);}
.border-b:hover svg{background:var(--white-color);}

a.erase-link:hover{color:var(--purple-color)}

.table-responsive::-webkit-scrollbar {
    width: 1em;
    height: 8px;
  }

.pointsContainerStyle::-webkit-scrollbar, .delivery-scrolling-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 16px;
  }
  
  .table-responsive::-webkit-scrollbar-track, .pointsContainerStyle::-webkit-scrollbar-track, .delivery-scrolling-wrapper::-webkit-scrollbar-track {
  background:var(--light-gray-color);
    border-radius: 10px;
  }

  .table-responsive::-webkit-scrollbar-thumb, .pointsContainerStyle::-webkit-scrollbar-thumb, .delivery-scrolling-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--gray-color); 
    border-radius: 10px;
  }

#map{height: 530px;}

.point-item{
    background: var(--light-gray-color) !important;
    color: var(--dark-gray-color) !important;
    padding: 12px !important;
    gap: 10px !important;
    margin-right: 8px;
    margin-bottom: 6px !important;
    border-radius: 12px;
}

.modal-address {
white-space: nowrap;
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
}

#telegram-logo{
 width: 160px;
    height: 160px;
    margin-left: 19px;
}

@media only screen and (max-width: 991px) {
    #map{height: 320px;}
    #selectAreaButton{display: none;}
#pointAddressForm{display: none;}
    
}    

#canvas {
    position: absolute;
    overflow-y: hidden;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    z-index: 9999;
    display: none;
  }