/*? Глобальные переменные */
:root {
    /*/ Цвета */
    --mbg-opacity-0:  #00000000;

    --mclr-black-005: #0000000D;
    --mclr-black-01:  #0000001A;
    --mclr-black-025: #00000040;
    --mclr-black:     #000000FF;

    --mclr-white-01:  #FFFFFF1A;
    --mclr-white-02:  #FFFFFF33;
    --mclr-white-04:  #FFFFFF66;
    --mclr-white-035: #FFFFFF59;
    --mclr-white-05:  #FFFFFF80;
    --mclr-white-075: #FFFFFFBF;
    --mclr-white:     #FFFFFFFF;

    --mclr-red:       #C52828;
    --mclr-orange_E5:    #E5A64D;
    --mclr-orange_E5-02: #E5A64D33;
    --mclr-orange:    #EF5026;
    --mclr-orange-02: #EF502633;
    --mclr-orange-08: #EF5026CC;

    --mclr-green_EC: #ECF6EE;
    --mclr-green_4F: #4FB442;
    --mclr-green_23:     #23AA03FF;
    --mclr-green_23-015: #21AA0326;
    --mclr-green_23-02:  #21AA0333;
    --mclr-green_23-05:  #21AA0380;
    --mclr-green_23-08:  #23AA03CC;

    --mclr-light-green-02: #9DD29133;
    --mclr-light-green-08: #9DD291CC;

    --mclr-1E:    #1E1E1E;
    --mclr-2F-05: #2F2F2F80;
    --mclr-2F:    #2F2F2F;
    --mclr-30:    #303030;
    --mclr-31:    #313131;
    --mclr-4A-05: #4A4A4A80;
    --mclr-4A:    #4A4A4A;
    --mclr-4E:    #4E4E4E;
    --mclr-50-05: #50505080;
    --mclr-50:    #505050;
    --mclr-52:    #525352;
    --mclr-68:    #686868;
    --mclr-A9:    #A9A9A9;
    --mclr-CA:    #CACACA;
    --mclr-D1:    #D1D1D1;
    --mclr-D8:    #D8D8D8;
    --mclr-D9:    #D9D9D9;
    --mclr-E0:    #E0E0E0;
    --mclr-E0-08: #E0E0E0CC;
    --mclr-E1:    #E1E1E1;
    --mclr-EA:    #EAEAEA;
    --mclr-F1:    #F1F1F1;
    --mclr-F4:    #F4F4F4;
    --mclr-F5:    #F5F5F5;
    --mclr-F8-02: #F8F8F833;
    --mclr-F8:    #F8F8F8;

    /* Сайт */
    --mclr-F5E8EF:    #F5E8EF;
    --mclr-930B4F:    #930B4F;
    --mclr-930B4F-08: #930B4FCC;
}

.lazy-load-img {
    filter: blur(2px);
    transition: filter 0.3s;
}
.lazy-load-img.loaded {
    filter: blur(0);
}
.lazy-load-img-skeleton-parent {
    background: linear-gradient( 90deg, #eee 25%, #f5f5f5 37%, #eee 63% );
    background-size: 400% 100%;
    animation: shimmer 2.8s infinite;
}
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
.lazy-load-img-skeleton-parent .lazy-load-img-skeleton {
    opacity: 0;
}
.lazy-load-img-skeleton-parent.loaded {
    background: none;
    animation: none;
}
.lazy-load-img-skeleton-parent.loaded .lazy-load-img-skeleton {
    opacity: 1;
}

html { height: 100% }
body { min-height: 100% }

img {
    max-width: 100%;
    height: auto
}

.modal-header {
    border-bottom: none !important;
    padding-bottom: 0;
    display: flex;
    justify-content: end
}
.modal-header .btn-close { margin-bottom: 0 !important }
.modal-body { padding-top: 0 }

/*? Кнопки и поля ввода */
/*/ bootstrap */
button, input, optgroup, select, textarea {
    margin: 0px 0px 15px 0px !important;
    font-family: "Montserrat";
}
input, textarea { outline: none }

input[type="checkbox"] { margin-right: 0.5em !important }

/*? Custom input */
.input-wrapper {
    position: relative;
    margin-bottom: 15px;
    padding: 0px;
}
.input-wrapper.shadow-wrapper {
    border-radius: 12px;
    box-shadow: 0px 0px 20px var(--mclr-black-01);
}
.input-enter {
    width: 100%;
    height: 100%;
    padding: 20px 20px;
    margin: 0px !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--mclr-68);
    border: 1px solid var(--mclr-E0-08);
    border-radius: 12px;
    background-color: var(--mclr-white);
}
.input-placeholder {
    position: absolute;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mclr-68);
    cursor: text;
    transition: 0.5s;
}
.input-error-message {
    display: none;
    position: absolute;
    top: 100%;
    padding: 0 20px;
    font-size: 11px;
    font-weight: 400;
    color: var(--mclr-red);
}

.input-wrapper.active .input-placeholder {
    transform: translateY(2px);
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--mclr-68);
    padding-bottom: 0;
    padding-top: 0;
    height: 10px;
    transition: 0.5s;
}

/*? Ошибка вне Yii2 */
.input-wrapper.error .input-placeholder { color: var(--mclr-red) }
.input-wrapper.error .input-enter {
    color: var(--mclr-red);
    border: 1px solid var(--mclr-red) !important;
    border-radius: 5px;
    background-color: var(--mclr-white)
}
.input-wrapper.error .input-error-message { display: block }
/*? Ошибка при использовании Yii2 */
.input-wrapper .has-error .input-placeholder { color: var(--mclr-red) }
.input-wrapper .has-error .input-enter {
    color: var(--mclr-red);
    border: 1px solid var(--mclr-red) !important;
    border-radius: 5px;
    background-color: var(--mclr-white)
}
.input-wrapper .has-error .input-error-message { display: block }

/*? Для значка загрузки */
/* Зеленые шарики */
.loader {
    height: 15px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(farthest-side, var(--mclr-green_4F) 90%, var(--mbg-opacity-0));
    background:
      var(--_g) left,
      var(--_g) right;
    background-size: 25% 100%;
    display: grid;
}
.loader:before,
.loader:after {
    content: "";
    height: inherit;
    aspect-ratio: 1;
    grid-area: 1/1;
    margin: auto;
    border-radius: 50%;
    transform-origin: -100% 50%;
    background: var(--mclr-green_4F);
    animation: l49 1s infinite linear;
}
.loader:after {
    transform-origin: 200% 50%;
    --s:-1;
    animation-delay: -.5s;
}
@keyframes l49 {
    58%,
    100% {transform: rotate(calc(var(--s,1)*1turn))}
}

/*? Кнопки */
.btn-930B4F-fixed {
    width: 213px;
    min-height: 52px;
    background-color: var(--mclr-930B4F);
    border: var(--mclr-930B4F) solid 2px;
    color: var(--mclr-white);
    font-size: 16px;
    font-weight: 600;
    border-radius: 5000px;
    padding: 5px 15px;
    cursor: pointer;
    transition: 0.3s;
}
.btn-930B4F-fixed:hover,
.btn-930B4F-fixed:active {
    background: var(--mbg-opacity-0);
    color: var(--mclr-930B4F);
    border-color: var(--mclr-930B4F);
    transition: 0.3s;
}

/*? Сокращение */
.alignment-center {
    display: flex;
    justify-content: center;
    align-items: center;
}


.bg-hor-grad-green-orange     { background-image: linear-gradient(100deg, var(--mclr-light-green-08), var(--mclr-green_23-08), var(--mclr-orange-08)) }
.bg-white  { background-color: var(--mclr-white) }
.bg-930B4F { background-color: var(--mclr-930B4F) }
.bg-F5E8EF { background-color: var(--mclr-F5E8EF) }
.bg-black  { background-color: var(--mclr-black) }

/*? Boreder */
/* .border-none { border: none !important } */

/*/ Закругления */
.rounded-10-tlr-none {
    border-radius: 10px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
.rounded-10   { border-radius: 10px !important }

.rounded-pill { border-radius: 5000px !important }
.rounded-circle { border-radius: 50% !important }

/*/ Цвет */
.border-930B4F { border-color: var(--mclr-930B4F) }

/*? Text */
p { margin-top: 0px }

/*/ Font-family */
.font-f-Montserrat { font-family: "Montserrat", "Arial", sans-serif }

/*/ Font-size */
.font-size-5  { font-size:  5px !important }
.font-size-8  { font-size:  8px !important }
.font-size-9  { font-size:  9px !important }
.font-size-10 { font-size: 10px !important }
.font-size-11 { font-size: 11px !important }
.font-size-12 { font-size: 12px !important }
.font-size-13 { font-size: 13px !important }
.font-size-14 { font-size: 14px !important }
.font-size-15 { font-size: 15px !important }
.font-size-16 { font-size: 16px !important }
.font-size-18 { font-size: 18px !important }
.font-size-20 { font-size: 20px !important }
.font-size-22 { font-size: 22px !important }
.font-size-24 { font-size: 24px !important }
.font-size-26 { font-size: 26px !important }
.font-size-28 { font-size: 28px !important }
.font-size-30 { font-size: 30px !important }
.font-size-32 { font-size: 32px !important }
.font-size-34 { font-size: 34px !important }
.font-size-36 { font-size: 36px !important }
.font-size-38 { font-size: 38px !important }
.font-size-40 { font-size: 40px !important }
.font-size-42 { font-size: 42px !important }
.font-size-44 { font-size: 44px !important }
.font-size-46 { font-size: 46px !important }
.font-size-48 { font-size: 48px !important }
.font-size-60 { font-size: 60px !important }

/*/ Font-weight */
/* .font-w-300 { font-weight: 300 !important } */
.font-w-400 { font-weight: 400 !important }
.font-w-500 { font-weight: 500 !important }
.font-w-600 { font-weight: 600 !important }
.font-w-700 { font-weight: 700 !important }

/*/ Line height */
/* .line-h-110per { line-height: 110% !important }
.line-h-120per { line-height: 120% !important }
.line-h-130per { line-height: 130% !important }
.line-h-140per { line-height: 140% !important } */

/*/ Text color */
.text-930B4F { color: var(--mclr-930B4F) }
.text-black  { color: var(--mclr-black) }
.text-white  { color: var(--mclr-white) }

.text-930B4F-08-hover:hover            { color: var(--mclr-930B4F-08) }
.text-decoration-underline-hover:hover { text-decoration: underline !important }

.cursor-grab {
    cursor: grab;
}

/*? li::marker */
/*/ Маленькие фиолетовые точки */
ul.dots-930B4F li::marker {
    color: var(--mclr-930B4F)
}

/*/ Маленькие фиолетовые плюсики */
ul.pluses-930B4F {
    list-style: none;
    padding-left: 40px; /* общий отступ списка */
}
ul.pluses-930B4F li {
    position: relative;
}
ul.pluses-930B4F li::before {
    content: "+";
    position: absolute;
    left: -20px;      /* расстояние от текста */
    color: var(--mclr-930B4F);
    font-weight: 700;
    font-size: 20px;
}

/*/ Height */
.h-100 { height: 100% }

/*? collapse element */
.collapse-wrapper {
    background-color: var(--mclr-white);
    padding: 0em;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    height: auto;
    position: relative;
}
.collapse-header {
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: none;
    transition: box-shadow 0.5s;
    padding: 21.5px 12.5px;
    
}
.collapse-header #is-close {
    transform: rotate(0deg);
    transition: 0.3s;
}
.collapse-body {
    padding: 0em 1.5em;
    max-height: 0px;
    opacity: 0;
    transition: max-height 0.2s, opacity 0.5s, padding 0.5s;
}
.collapse-body div { display: none }
.collapse-wrapper.active .collapse-header {
    box-shadow: 0px 5px 5px var(--mclr-black-005);
    transition: box-shadow 0.5s;
}
.collapse-wrapper.active #is-close {
    transform: rotate(225deg);
    transition: 0.3s;
}
.collapse-wrapper.active .collapse-body {
    padding: 2em 1.5em 1em 1.5em;
    max-height: 5000px;
    opacity: 1;
    transition: max-height 0.2s, opacity 0.5s, padding-top 0.5s, padding-bottom 0.5s;
}
.collapse-wrapper.active .collapse-body div {
    display: block
}
.collapse-header,
.collapse-wrapper.active .collapse-body {
    @media (min-width: 576px) { padding: 37px 29px 37px 47px; }
    @media (min-width: 992px) { padding: 20px 25px 20px 60px; }
    @media (min-width: 1200px) { padding: 25px 25px 25px 60px; }
}

/*?---------/*/
/*? Font-size */
@media(min-width: 576px)  {
    .font-size-5-sm  { font-size:  5px !important }
    .font-size-8-sm  { font-size:  8px !important }
    .font-size-9-sm  { font-size:  9px !important }
    .font-size-10-sm { font-size: 10px !important }
    .font-size-11-sm { font-size: 11px !important }
    .font-size-12-sm { font-size: 12px !important }
    .font-size-13-sm { font-size: 13px !important }
    .font-size-14-sm { font-size: 14px !important }
    .font-size-15-sm { font-size: 15px !important }
    .font-size-16-sm { font-size: 16px !important }
    .font-size-18-sm { font-size: 18px !important }
    .font-size-20-sm { font-size: 20px !important }
    .font-size-22-sm { font-size: 22px !important }
    .font-size-24-sm { font-size: 24px !important }
    .font-size-26-sm { font-size: 26px !important }
    .font-size-28-sm { font-size: 28px !important }
    .font-size-30-sm { font-size: 30px !important }
    .font-size-32-sm { font-size: 32px !important }
    .font-size-34-sm { font-size: 34px !important }
    .font-size-36-sm { font-size: 36px !important }
    .font-size-38-sm { font-size: 38px !important }
    .font-size-40-sm { font-size: 40px !important }
    .font-size-42-sm { font-size: 42px !important }
    .font-size-44-sm { font-size: 44px !important }
    .font-size-46-sm { font-size: 46px !important }
    .font-size-48-sm { font-size: 48px !important }
    .font-size-60-sm { font-size: 60px !important }

    /* .line-h-130per-sm { line-height: 130% !important } */
}
@media(min-width: 768px) {
    .font-size-5-md  { font-size:  5px !important }
    .font-size-8-md  { font-size:  8px !important }
    .font-size-9-md  { font-size:  9px !important }
    .font-size-10-md { font-size: 10px !important }
    .font-size-11-md { font-size: 11px !important }
    .font-size-12-md { font-size: 12px !important }
    .font-size-13-md { font-size: 13px !important }
    .font-size-14-md { font-size: 14px !important }
    .font-size-15-md { font-size: 15px !important }
    .font-size-16-md { font-size: 16px !important }
    .font-size-18-md { font-size: 18px !important }
    .font-size-20-md { font-size: 20px !important }
    .font-size-22-md { font-size: 22px !important }
    .font-size-24-md { font-size: 24px !important }
    .font-size-26-md { font-size: 26px !important }
    .font-size-28-md { font-size: 28px !important }
    .font-size-30-md { font-size: 30px !important }
    .font-size-32-md { font-size: 32px !important }
    .font-size-34-md { font-size: 34px !important }
    .font-size-36-md { font-size: 36px !important }
    .font-size-38-md { font-size: 38px !important }
    .font-size-40-md { font-size: 40px !important }
    .font-size-42-md { font-size: 42px !important }
    .font-size-44-md { font-size: 44px !important }
    .font-size-46-md { font-size: 46px !important }
    .font-size-48-md { font-size: 48px !important }
    .font-size-60-md { font-size: 60px !important }
}
@media(min-width: 992px) {
    .font-size-5-lg  { font-size:  5px !important }
    .font-size-8-lg  { font-size:  8px !important }
    .font-size-9-lg  { font-size:  9px !important }
    .font-size-10-lg { font-size: 10px !important }
    .font-size-11-lg { font-size: 11px !important }
    .font-size-12-lg { font-size: 12px !important }
    .font-size-13-lg { font-size: 13px !important }
    .font-size-14-lg { font-size: 14px !important }
    .font-size-15-lg { font-size: 15px !important }
    .font-size-16-lg { font-size: 16px !important }
    .font-size-18-lg { font-size: 18px !important }
    .font-size-20-lg { font-size: 20px !important }
    .font-size-22-lg { font-size: 22px !important }
    .font-size-24-lg { font-size: 24px !important }
    .font-size-26-lg { font-size: 26px !important }
    .font-size-28-lg { font-size: 28px !important }
    .font-size-30-lg { font-size: 30px !important }
    .font-size-32-lg { font-size: 32px !important }
    .font-size-34-lg { font-size: 34px !important }
    .font-size-36-lg { font-size: 36px !important }
    .font-size-38-lg { font-size: 38px !important }
    .font-size-40-lg { font-size: 40px !important }
    .font-size-42-lg { font-size: 42px !important }
    .font-size-44-lg { font-size: 44px !important }
    .font-size-46-lg { font-size: 46px !important }
    .font-size-48-lg { font-size: 48px !important }
    .font-size-60-lg { font-size: 60px !important }

    /* .line-h-110per-lg { line-height: 110% !important } */
}
@media(min-width: 1200px) {
    .font-size-5-xl  { font-size:  5px !important }
    .font-size-8-xl  { font-size:  8px !important }
    .font-size-9-xl  { font-size:  9px !important }
    .font-size-10-xl { font-size: 10px !important }
    .font-size-11-xl { font-size: 11px !important }
    .font-size-12-xl { font-size: 12px !important }
    .font-size-13-xl { font-size: 13px !important }
    .font-size-14-xl { font-size: 14px !important }
    .font-size-15-xl { font-size: 15px !important }
    .font-size-16-xl { font-size: 16px !important }
    .font-size-18-xl { font-size: 18px !important }
    .font-size-20-xl { font-size: 20px !important }
    .font-size-22-xl { font-size: 22px !important }
    .font-size-24-xl { font-size: 24px !important }
    .font-size-26-xl { font-size: 26px !important }
    .font-size-28-xl { font-size: 28px !important }
    .font-size-30-xl { font-size: 30px !important }
    .font-size-32-xl { font-size: 32px !important }
    .font-size-34-xl { font-size: 34px !important }
    .font-size-36-xl { font-size: 36px !important }
    .font-size-38-xl { font-size: 38px !important }
    .font-size-40-xl { font-size: 40px !important }
    .font-size-42-xl { font-size: 42px !important }
    .font-size-44-xl { font-size: 44px !important }
    .font-size-46-xl { font-size: 46px !important }
    .font-size-48-xl { font-size: 48px !important }
    .font-size-60-xl { font-size: 60px !important }
}
@media(min-width: 1400px) {
    .font-size-5-xxl  { font-size:  5px !important }
    .font-size-8-xxl  { font-size:  8px !important }
    .font-size-9-xxl  { font-size:  9px !important }
    .font-size-10-xxl { font-size: 10px !important }
    .font-size-11-xxl { font-size: 11px !important }
    .font-size-12-xxl { font-size: 12px !important }
    .font-size-13-xxl { font-size: 13px !important }
    .font-size-14-xxl { font-size: 14px !important }
    .font-size-15-xxl { font-size: 15px !important }
    .font-size-16-xxl { font-size: 16px !important }
    .font-size-18-xxl { font-size: 18px !important }
    .font-size-20-xxl { font-size: 20px !important }
    .font-size-22-xxl { font-size: 22px !important }
    .font-size-24-xxl { font-size: 24px !important }
    .font-size-26-xxl { font-size: 26px !important }
    .font-size-28-xxl { font-size: 28px !important }
    .font-size-30-xxl { font-size: 30px !important }
    .font-size-32-xxl { font-size: 32px !important }
    .font-size-34-xxl { font-size: 34px !important }
    .font-size-36-xxl { font-size: 36px !important }
    .font-size-38-xxl { font-size: 38px !important }
    .font-size-40-xxl { font-size: 40px !important }
    .font-size-42-xxl { font-size: 42px !important }
    .font-size-44-xxl { font-size: 44px !important }
    .font-size-46-xxl { font-size: 46px !important }
    .font-size-48-xxl { font-size: 48px !important }
    .font-size-60-xxl { font-size: 60px !important }
}

/*? Text-weight */
/* @media(min-width: 500px) { .font-w-600-500px { font-weight: 600 !important } } */
/*/---------/*/
@media(min-width: 576px) {
    .font-w-400-sm { font-weight: 400 !important }
    .font-w-450-sm { font-weight: 450 !important }
    .font-w-500-sm { font-weight: 500 !important }
    .font-w-550-sm { font-weight: 550 !important }
    .font-w-600-sm { font-weight: 600 !important }
    .font-w-650-sm { font-weight: 650 !important }
    .font-w-700-sm { font-weight: 700 !important }
    .font-w-750-sm { font-weight: 750 !important }
}

@media(min-width: 992px) {
    .font-w-400-lg { font-weight: 400 !important }
    .font-w-450-lg { font-weight: 450 !important }
    .font-w-500-lg { font-weight: 500 !important }
    .font-w-550-lg { font-weight: 550 !important }
    .font-w-600-lg { font-weight: 600 !important }
    .font-w-650-lg { font-weight: 650 !important }
    .font-w-700-lg { font-weight: 700 !important }
    .font-w-750-lg { font-weight: 750 !important }
}
@media(min-width: 1200px) {
    .font-w-400-xl { font-weight: 400 !important }
    .font-w-450-xl { font-weight: 450 !important }
    .font-w-500-xl { font-weight: 500 !important }
    .font-w-550-xl { font-weight: 550 !important }
    .font-w-600-xl { font-weight: 600 !important }
    .font-w-650-xl { font-weight: 650 !important }
    .font-w-700-xl { font-weight: 700 !important }
    .font-w-750-xl { font-weight: 750 !important }
}

.cursor-pointer {
    cursor: pointer !important
}