@charset "UTF-8";
    /**
 * Modal
 */
    
    .modal{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        margin: 0 auto;
        background-color: #fff;
        width: 780px;
        max-width: 780px;
        height: auto;
        padding: 0;
        border-radius: 3px;
        opacity: 0;
        overflow-y: auto;
        visibility: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        backface-visibility: hidden;
        transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    }

.modal .close-modal{
        border: none;
        background: transparent;
        position: absolute;
        cursor: pointer;
        right: 15px;
        opacity: 0;
        backface-visibility: hidden;
        transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1), transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
        transition-delay: 0.3s;
    }

.modal .close-modal svg{
        width: 1em;
        height: 1em;
    }

.modal-flex{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
    }

.modal .modal-title{
        width: 100%;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 26px;
        font-weight: 600;
        color: #333333;
        text-align: left!important;
        line-height: 26px;
    }

.modal-img{
        width: 100%;
        height: auto;
    }

.modal .modal-content{
        opacity: 0;
        backface-visibility: hidden;
        transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
        transition-delay: 0.3s;
        border: none;
    }

.modal .modal-button{
        display: flex;
        justify-content: space-around;
        width: 90%;
        bottom: 1rem;
    }

.modal.active{
        visibility: visible;
        opacity: 1;
        transform: scale(1);
        z-index: 1100;
    }

.modal.active .modal-content{
        opacity: 1;
    }

.modal textarea{
        resize: vertical;
        min-height: 220px;
        width: 100%;
    }

.modal button:active,
.modal button:focus,
.modal-overlay button:active,
.modal-overlay button:focus{
        outline: 0 !important;
    }/*Стилизация модального окна*/
    
    .modal.active .close-modal{
        transform: translateY(-5px);
    }

.modal .modal__content{
        min-width: 350px;
    }

.modal.active .close-modal{
        transform: translateY(5px);
        opacity: 1;
    }

.modal .modal__footer{
        display: flex;
        align-items: center;
        justify-content: center;
    }

.modal{
        border-radius: 4px;
    }

.pt-20{
        padding-top: 20px !important;
    }

.pt-10{
        padding-top: 10px !important;
    }

.p-15{
        padding: 25px!important;
    }

.d-flex,
.calc .d-flex,
.modal-overlay .d-flex{
        display: flex;
    }

.bold,
.calc .bold,
.modal-overlay .bold{
        font-weight: bold;
    }

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

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

.mr-15{
        margin-right: 15px;
    }

.mr-30{
        margin-right: 30px;
    }

.mb-20{
        margin-bottom: 20px!important;
    }

.mb-10{
        margin-bottom: 10px!important;
    }

.mt-30{
        margin-top: 30px;
    }

.mt-15{
        margin-top: 15px;
    }

.w-100,
.calc .w-100,
.modal-overlay .w-100{
        width: 100% !important;
    }

.hidden,
.calc .hidden,
.modal-overlay .hidden{
        overflow: hidden;
    }

.modal .form__row{
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
    }

.modal .form__item{
        position: relative;
        padding-top: 40px;
        margin-bottom: 0;
    }

.modal .form .form__label{
        position: absolute;
        left: 10px;
        top: 50px;
        transition: top 0.5s;
        color: black !important;
    }

.modal .form input,
.modal .form textarea{
        border: 1px solid #E0E0E0;
        border-radius: 4px;
        width: 100%;
        display: block;
        background-color: #fff;
        color: #171d26;
        padding: 10px 15px;
    }

.modal .form input:focus,
.modal .form textarea:focus{
        border: 1px solid #59BAE4;
        border-radius: 4px;
        outline: none;
        background-size: 100% 100%, 100% 100%;
        transition-duration: 0.3s;
        background: white;
    }

.modal .form-group{
        display: flex;
        margin: 0;
    }

.modal .form-group__btn{
        border: 1px solid #E0E0E0;
        border-radius: 5px;
        background: white;
        height: 37px;
        width: 37px;
        line-height: 33px;
        cursor: pointer;
    }

.modal .form-group__btn:hover,
.modal .form-group__btn:active{
        background: #59BAE4;
        color: white;
    }

.modal .form-group__field{
        display: inline-flex;
        border: 1px solid #E0E0E0;
        border-radius: 5px;
        width: 150px;
        margin: 0 3px;
        user-select: none;
    }

.d-none{
        display: none !important;
    }/**
 * Mobile styling
 */
    
    .modal .form__row{
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
    }

.modal .form__item{
        position: relative;
        padding-top: 40px;
    }

.modal .form input:not(:-moz-placeholder-shown)+label,
.modal .form textarea:not(:-moz-placeholder-shown)+label{
        top: 10px;
    }

.modal .form input:not(:-ms-input-placeholder)+label,
.modal .form textarea:not(:-ms-input-placeholder)+label{
        top: 10px;
    }

.modal .form input:focus+label,
.modal .form input:not(:placeholder-shown)+label,
.modal .form textarea:focus+label,
.modal .form textarea:not(:placeholder-shown)+label{
        top: 10px;
    }

.modal .form ::-webkit-input-placeholder{
        opacity: 0;
    }

.modal .form input:focus::-webkit-input-placeholder,
.modal .form textarea:focus::-webkit-input-placeholder{
        opacity: 1;
    }

.loading-st1{
        position: relative !important;
    }

.loading-st1:after{
        content: " ";
        display: inline-block;
        border-radius: 50%;
        border-color: #309dff transparent #309dff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }button.loading-st1:after{
        position: absolute;
        left: calc(50% - 10px);
        top: calc(50% - 10px);
        background: #ffffff1f;
        width: 20px;
        height: 20px;
        border-width: 3px;
        border-color: #fff transparent #fff transparent;
        box-shadow: 0 0 20px 0 #ffffff78;
    }

@keyframes lds-dual-ring {
        0% {
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }/*toaster*/
    
    .notification-container{
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        height: auto;
        line-height: 1rem;
        position: fixed;
        width: 100%;
        z-index: 999;
        text-align: center;
        background: #dfa2a2;
        border-radius: 4px;
        color: white;
        padding: 15px 0;
        box-shadow: 1px 2px 12px 1px rgba(117, 117, 117, 0.62);
        transition: opacity 1s ease 0.5s;
        user-select: none;
        cursor: pointer;
    }

.notification-container.success{
        background: #bbd6bb;
    }

.notification-container.warning{
        background: #f3ba64;
    }

.notification-container.error{
        background: #dfa2a2;
    }

.modal .close-modal .close-icon{
        background: url(../../icons/modal-cross.svg) no-repeat left;
        width: 20px;
        height: 20px;
        display: block;
    }/*Валидация окна модального*/
    
    .cl-input-error,
.cl-input-valid{
        padding-right: calc(1.5em + .75rem);
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }

.cl-input-error{
        border: 1px solid #dc3545!important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    }

.cl-input-valid{
        border-radius: 4px;
        border-color: #198754!important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    }

.modal-text{
        width: 95%;
        font-size: 15px;
        font-weight: 300;
        line-height: 19px;
        color: #333;
        margin-top: 13px;
        margin-bottom: 10px;
    }

.close-icon{
        position: relative;
        right: 3px;
    }

.modal-list{
        list-style-type: none;
        height: 85px;
        display: flex;
        flex-flow: column wrap;
        padding: 0;
        width: 50%;
        margin-bottom: 0;
    }

.modal-list>li{
        display: flex;
        align-items: center;
        color: #333;
        font-style: italic;
        font-weight: 300;
        line-height: 19px;
    }

.modal-list>li::before{
        background: #D10000;
        content: "";
        width: 3px;
        height: 3px;
        margin-right: 8px;
        flex-shrink: 0;
    }

.close-modal{
		box-shadow: none;
		top: initial
	}

.span-modal{
        display: inline-block;
        font-size: 16px;
        color: #333;
        font-weight: 300;
        margin-bottom: 3px;
    }

.modal-price{
        font-family: "Roboto Condensed", sans-serif;
        display: inline-flex;
        font-size: 26px;
    }

.modal-border::before{
        content: "";
        height: 45px;
        border-left: 2px solid #D10000;
        margin-right: 14px;
    }

.modal-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

.modal-grid__item span{
        font-size: 12px;
        font-style: italic;
        font-weight: 300;
        line-height: 30px;
    }

.modal-grid__item img{
        width: 100%;
        height: auto;
        object-fit: contain;
    }

@media only screen and (max-width: 768px) {
        .modal form{
            width: 100% !important;
        }

.modal .form{
            display: flex;
            flex-flow: column;
        }

.modal .form__row{
            display: flex;
            flex-flow: column;
            width: 100%;
        }

.modal .form__item{
            width: 100%;
        }

.modal .modal__content{
            margin: 0;
        }

.modal-list>li{
            align-items: flex-start;
        }

.modal-list>li::before{
            margin-top: 8px;
        }

.modal-list{
            width: 100%;
        }
    }

@media only screen and (max-width: 420px) {
        .modal h1{
            font-size: 1.5rem;
        }

.modal{
            padding: 15px!important;
        }

.modal .modal{
            position: fixed;
            top: 0;
            left: 0;
            min-width: 15rem;
            max-width: 100%;
            width: 100%;
            height: 100%;
            border-radius: 0;
            transform: scale(1.1);
        }

.modal .close-modal{
            right: -2px !important;
        }

.modal-grid__item span{
            line-height: 11px;
            display: inline-block;
            margin-top: 5px;
        }

.modal-text{
            font-size: 14px;
            line-height: 17px;
        }

.modal .modal-title{
            font-size: 25px;
        }

.modal .close-modal .close-icon{
            background: url(../../icons/modal-cross-mobile.svg) no-repeat left;
            width: 16px;
            height: 16px;
            display: block;
        }
    }

@media only screen and (min-width: 250px) {
        .modal-overlay{
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            background-color: rgba(0, 0, 0, 0.8);
            opacity: 0;
            visibility: hidden;
            backface-visibility: hidden;
            transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
        }

.modal-overlay.active{
            opacity: 1;
            visibility: visible;
            z-index: 1050;
        }
    }