/**
 * Общие стили CMS
 *
 * @version     1.102
 */

:root{
    /* шрифт для компонентов */
    --component-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

*, ::after, ::before{
    box-sizing: border-box;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    margin-right: auto;
    margin-left: auto;
}

video,
input[type="image"],
svg, /* slamax.ru - логотип */
img{
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.gu-mirror{
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: .8;
}

.gu-hide{
    display: none !important;
}

.gu-unselectable{
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.gu-transit{
    opacity: .5;
}

.transfer{
    position: absolute;
    border: 2px dotted #DDD;
    border-radius: 5px;
    z-index: 9999;
}

input.transfer{
    background-color: #F8F8F8;
}

.twitter-tweet{
    max-width: 100%;
    height: auto;
    width: auto !important;
}

.youtube{
    position: relative;
    padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
    height: 0;
    overflow: hidden;
}

.youtube43{
    position: relative;
    padding-bottom: 75%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
    height: 0;
    overflow: hidden;
}

.youtube43 iframe,
.youtube iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 0;
    outline-width: 0;
}

.no-transition{
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.loader{
    color: #000;
    font-size: 20px;
    margin: 100px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@keyframes load4{
    0%,
    100%{
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5%{
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25%{
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5%{
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em, 0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    50%{
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    62.5%{
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75%{
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
    }
    87.5%{
        box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
    }
}

.rotate{
    display: block;
    width: 150px;
    height: 150px;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translateX(50%);
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

.pulse-effect{
    animation: pulse 0.3s ease-in-out;
}

/* скругления */
.dropdown-menu{
    padding: 0 !important;
}

/* раскраска выпадающих элементов  */
/*.dropdown-menu a.dropdown-item:active,*/
.dropdown-menu a.dropdown-item.active{
    background-color: var(--primary-bg, #6C757D);
    color: var(--primary-color, #FFF);
}

.dropdown-menu a.dropdown-item:hover{
    background-color: #F2F2F2;
    color: #000;
}

.dropdown-menu a.dropdown-item.active:hover{
    background-color: var(--primary-bg-hover, #545B62);
    color: var(--primary-color-hover, #FFF);
}

.dropdown-menu li a,
.no-select{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.spoiler .spoiler-title{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 1em;
    border-bottom: 1px dotted #000;
    cursor: pointer;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.spoiler .spoiler-title .spoiler-toggle{
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    margin: calc(0.5em - 6px) 5px 0 0;
    background: url("/frontend/image/spoiler.png") 0 0 no-repeat;
}

.spoiler.opened .spoiler-title .spoiler-toggle{
    background: url("/frontend/image/spoiler.png") 0 100% no-repeat;
}

.spoiler .spoiler-content{
    display: none;
    overflow: auto;
    padding-bottom: 4px;
}

.spoiler.opened .spoiler-content{
    display: block;
}

.dropdown-toggle{
    white-space: normal;
}

.page_control .pagination{
    overflow: auto;
    margin: 0 !important;
    flex-flow: row wrap;
    font-size: 14px;
}

.page_control .pagination .page-item .page-link{
    display: grid;
    justify-content: center;
    align-content: center;
    /*noinspection CssUnresolvedCustomProperty*/
    color: var(--control-color, #212529);
    border: var(--control-border, 1px solid #CED4DA);
    width: 29px;
    height: 29px;
    /*noinspection CssUnresolvedCustomProperty*/
    font-family: var(--component-font, Roboto);
    font-size: 100%;
    line-height: 1em;
    z-index: 0;
}

.page_control .pagination .page-item .page-link:hover{
    /*noinspection CssUnresolvedCustomProperty*/
    color: var(--work-link-color-hover, #000);
    text-decoration: none;
}

.page_control .pagination .page-item.disabled .page-link{
    color: #888;
}

.page_control .pagination .page-item.prev,
.page_control .pagination .page-item.next{
    display: none;
}

.page_control .pagination .page-item.prev .page-link,
.page_control .pagination .page-item.next .page-link{
    font-family: monospace;
    font-size: 150%;
}

.page_control .pagination .page-item.active:not(.disabled) .page-link{
    border: 1px solid var(--primary-bg-hover, #6C757D);
    background-color: var(--primary-bg-hover, #6C757D);
    color: var(--primary-color-hover, #FFF);
}

.page_control .pagination .page-item .page-link:focus{
    box-shadow: none !important;
}

.page_control .pagination > .page-item:not(:first-child) .page-link{
    margin-left: 0;
    border-left-width: 0;
}

.page_control .pagination > .page-item:nth-child(2) .page-link{
    border-left: 1px solid #DEE2E6;
    border-radius: .25rem 0 0 .25rem;
}

.page_control .pagination > .page-item:nth-last-child(2) .page-link{
    border-radius: 0 .25rem .25rem 0;
}


@media (min-width: 378px){
    .page_control .pagination .page-item.prev,
    .page_control .pagination .page-item.next{
        display: block;
    }

    .page_control .pagination .page-item:nth-child(2) .page-link{
        border-left-width: 0;
        border-radius: 0;
    }

    .page_control .pagination .page-item:nth-last-child(2) .page-link{
        border-radius: 0;
    }
}

@media (min-width: 462px){
    .page_control .pagination{
        font-size: 18px;
    }

    .page_control .pagination .page-item .page-link{
        width: 36px;
        height: 36px;
    }
}

/*noinspection ALL*/
.table tbody td i,
a.dropdown-item i,
a.dropdown-item i-p, /* .ico-place */
a.dropdown-item i-pt, /* .ico-plus-tree */
a.dropdown-item i-mt, /* .ico-minus-tree */
a.dropdown-item i-sl{ /* .ico-single-line */
    display: inline-block;
    width: 21px;
    height: 30px;
    margin: -3px 0;
    float: left;
}

/*noinspection ALL*/
i-pt,
.ico-plus-tree{
    background: url("/frontend/image/sprite_tree.png") 1px 0 no-repeat;
    cursor: pointer;
}

/*noinspection ALL*/
i-pt.last,
.ico-plus-tree.last{
    background: url("/frontend/image/sprite_tree.png") -20px 0 no-repeat;
}

/*noinspection ALL*/
i-pt.first,
.ico-plus-tree.first{
    background: url("/frontend/image/sprite_tree.png") -41px 0 no-repeat;
}

/*noinspection ALL*/
i-mt,
.ico-minus-tree{
    background: url("/frontend/image/sprite_tree.png") -20px -30px no-repeat;
    cursor: pointer;
}

/*noinspection ALL*/
i-sl,
.ico-single-line{
    background: url("/frontend/image/sprite_tree.png") 1px -60px no-repeat;
}

/*noinspection ALL*/
i-sl.last,
.ico-single-line.last,
ul > li:last-child i-sl,
ul > li:last-child .ico-single-line{
    background: url("/frontend/image/sprite_tree.png") -20px -60px no-repeat;
}

/*noinspection ALL*/
i-sl.first,
.ico-single-line.first{
    background: url("/frontend/image/sprite_tree.png") -41px -60px no-repeat;
}

/*noinspection ALL*/
i-mt.last,
.ico-minus-tree.first.last{
    background: url("/frontend/image/sprite_tree.png") -41px -30px no-repeat;
}

select:disabled{
    color: #F00;
}

/* CSS для визуализации */

/* тег DEL или .CROSS для перечёркивания содержимого красным крестом */
del,
.cross{
    display: inline; /* запрещает перенос текста на следующую строку */
    text-decoration: none;
    position: relative;
    overflow: hidden; /* запрещает обтекать другие блоки */
}

del:before,
.cross:before{
    content: '';
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="rgba(255,0,0,.9)" stroke-width="1.5"><line x2="100%" y2="100%"/><line y1="100%" x2="100%"/></svg>') no-repeat;
}

/* немодальные окна */
.modal-header,
.modal-footer{
    background-color: transparent;
    border: none;
}

/* модальные окна */
.modal .modal-header{
    border-bottom: 1px solid #DEE2E6;
    background-color: #F8F8F8;
    border-radius: 6px 6px 0 0;
    padding: 10px 15px;
}

.modal .modal-footer{
    border-top: 1px solid #DEE2E6;
    background-color: #F8F8F8;
}

.modal-header .close,
.modal-footer [name="close"]{
    display: none;
}

.modal .modal-header .close{
    display: block;
}

.modal-header h4{
    display: block;
    min-height: 25px;
    overflow: hidden;
}

.modal .modal-body label.control-label{
    text-align: left;
    font-weight: normal;
    position: relative;
}

.modal-footer{
    border-radius: 0 0 6px 6px;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: 1rem;
}

.modal .modal-footer{
    padding: 1rem;
}

.modal-footer > *{
    margin: 0;
}

.modal-footer button[name="send"]{
    grid-column: 1 / 3;
}

@media screen and (min-width: 360px){
    .modal-footer button[name="send"]{
        grid-column: 1 / 1;
    }

    .modal .modal-footer [name="close"]{
        display: block;
    }
}

.form-group .input-group{
    width: 100%;
}

.btn.btn-custom{
    color: var(--primary-color, #FFF);
    background-color: var(--primary-bg, #6C757D);
    border: 1px solid var(--primary-border, #F8F9FA);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn.btn-custom:hover{
    color: var(--primary-color-hover, #FFF);
    background-color: var(--primary-bg-hover, #5C636A);
    border-color: var(--primary-border-hover, #F8F9FA);
}

.btn.btn-custom-close{
    color: #333;
    background-color: #F8F9FA;
    border-color: #CED4DA;
}

.btn.btn-custom-close:hover{
    color: var(--primary-color, #FFF);
    background-color: var(--primary-bg, #5C636A);
    border-color: var(--primary-border, #F8F9FA);
}

/* стилизация контролов и селектов */
select.form-select,
input.form-control,
textarea.form-control{
    color: var(--control-color, #000);
    background-color: var(--control-bg, #FFF);
    border: var(--control-border, 1px solid #CED4DA);
    box-shadow: var(--control-shadow, none);
}

select.form-select:hover,
input.form-control:hover,
textarea.form-control:hover{
    color: var(--control-color-hover, #000);
    background-color: var(--control-bg-hover, #FFF);
    border: var(--control-border-hover, 1px solid #CED4DA);
    box-shadow: var(--control-shadow-hover, none);
}

select.form-select:focus,
input.form-control:focus,
textarea.form-control:focus{
    color: var(--control-color-focus, #000);
    background-color: var(--control-bg-focus, #FFF);
    border: var(--control-border-focus, 1px solid #CED4DA);
    box-shadow: var(--control-shadow-focus, 0 0 0 0.25rem rgba(13, 110, 253, 0.25));
}

select.form-select option{
    color: var(--control-color-focus, #000);
}

/* стилизация placeholder в input/textarea */
.form-control::placeholder{
    color: var(--control-placeholder, #6C757D);
    opacity: 1;
    text-overflow: ellipsis !important;
    transition: all 0.8s ease;
}

.form-control:hover::placeholder{
    color: var(--control-placeholder-hover, #6C757D);
}

.form-control:focus::placeholder{
    opacity: 0;
}

/* стилизация placeholder select */
select.form-select.placeholder{
    color: var(--control-placeholder, #6C757D);
}

select.form-select:invalid{
    color: var(--control-placeholder, #6C757D);
}

select.form-select.placeholder:hover{
    color: var(--control-placeholder-hover, #6C757D);
}

select.form-select:invalid:hover{
    color: var(--control-placeholder-hover, #6C757D);
}

select.form-select option[value=""][disabled]{
    display: none;
}

/* подсветка выходных красным цветом */
.tempus-dominus-widget .date-container-days > div:nth-child(7n-1),
.tempus-dominus-widget .date-container-days > div:nth-child(7n){
    color: #A00;
}

.tempus-dominus-widget .date-container{
    padding-right: 5px;
}

.tempus-dominus-widget .date-container .picker-switch{
    text-transform: capitalize;
    font-size: 20px;
}

.tempus-dominus-widget .date-container-days > .dow{
    border-bottom: 1px solid #DDD;
    align-self: center;
}

.tempus-dominus-widget .calendar-header{
    grid-template-columns: 50px 1fr 50px !important;
    grid-auto-rows: 33px;
}

.tempus-dominus-widget .time-container-clock{
    font-size: 30px;
}

.tempus-dominus-widget .calendar-header .previous,
.tempus-dominus-widget .calendar-header .next{
    padding: 0 !important;
}

.tempus-dominus-widget .calendar-header .previous:hover,
.tempus-dominus-widget .calendar-header .next:hover{
    background: var(--td-btn-hover-bg);
}

.tempus-dominus-widget .toolbar svg{
    width: 30px;
    height: 30px;
}