:root {
  --main-color: #293042;
  --bg-color:   #202634;
  --text-color: #ffffffcc;
  --brown-bg:   #544526;
  --brown-text: #93815b;
}

/* Ширина полосы прокрутки */
::-webkit-scrollbar {
    width: 5px;
}

/* Фон дорожки */
::-webkit-scrollbar-track {
    background: #1d222e;
}

/* Ползунок */
::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #293042, #445273);
    border-radius: 6px;
}

/* Эффект при наведении */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #45547b, #6382cf);
}

.ajax-modal {
    pointer-events: auto !important;
}

body{
    background-color: var(--bg-color);
}

.icms-header__middle {
    background-color: var(--main-color);
    box-shadow: 0px 2px 6px var(--bg-color);
    border-bottom: 1px solid #1d222f;
}

.alert-brown {
    background-color: var(--brown-bg);
    color: var(--brown-text);
}

#fset_rating .form-inline .btn {
    display: none;
}

.datagrid {
    background-color: var(--main-color) !important;
    color: #adb5bd;
    font-size: 0.95em;
}

.datagrid .fs-small .datagrid-column-html{
    font-size: 0.75rem;
}

.datagrid a {
    color: #fff;
}

.datagrid th,
.datagrid td {
    border-top: 1px solid #454d62;
    border-bottom: none; 
    border-left: none; 
    border-right: none;
}

.datagrid tbody tr:nth-of-type(odd) {
    background-color: rgb(255 255 255 / 4%);
}


.form-control,
.form-control:focus, 
body#tinymce,
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
    border: none !important;
    border-bottom: 2px solid #424d69 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

input.form-control, textarea.form-control {
    margin-top: -7px !important;
    padding: 0 !important;
    color: var(--text-color) !important;
}

.chosen-container-multi .chosen-choices {
    padding: 0 !important;
}

.form-control:focus {
    border-bottom: 2px solid #254495 !important;
}

.form-group label {
    margin: 0;
    font-size: 0.75rem;
    color: #58647e;
}


.datagrid td.with_filter,
.datagrid th.with_filter {
    background-color: transparent;
}

.datagrid .img-thumbnail {
    border: none; 
}

.datagrid tr.selected td,
.datagrid tr.selected:hover td,
.datagrid tr.current-edit-line td,
.datagrid tr.current-edit-line:hover td {
    background-color: #3f80ea26 !important;
}

.datagrid .dropdown-multiselect input {
    background-color: #282e3e !important;
}

.datagrid .actions {
    justify-content: end;
}

.page-link {
    color: #adb5bd !important;
    background-color: var(--main-color) !important;
    border-color: #454d62 !important;
}

.page-item.active .page-link {
    color: #ffffff !important;
    background-color: #3867d6 !important;
    border-color: #3867d6 !important;
}

.cp_toolbar.navbar {
    background-color: var(--main-color) !important;
    padding: 0.5rem !important;
}

.cp_toolbar.navbar .nav-link {
    color: #fff;
    background-color: #3867d6;
    margin: 0 0.5rem;
}

.cp_toolbar.navbar .delete .nav-link {
    background-color: #d63838ab;
}

form {
    padding: .5rem 2rem;
    color: #adb5bd;
}

.form-group.ft_image .widget_image_single {
    left: 15px !important;
}

.poster-micro .image-container,
.poster-micro .image-container a {
    width: 50px;
    height: 50px;
}

.poster-mini {
    max-width: 100px;
}

.poster-mini .image-container {
    width: 100px;
    height: 145px;
}

.poster .image-container {
    width: 200px;
    height: 300px;
}

.image-container {
    position: relative;
    overflow: hidden;
    border-radius: .25rem;
    display: flex;
    justify-content: center;
}

.image-container .image-placeholder {
    position: absolute;
    inset: 0;
    background-image: url(../images/placeholder_movie_rect_dark.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #f2f2f2;
    border-radius: 0.25rem !important;
}

.image-container img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single:not(.chosen-single-with-deselect) div:after {
    background-color: transparent !important;
    box-shadow: none !important;
}

.chosen-container-single .chosen-single div {
    background-color: #262c39 !important;
}

.chosen-container .chosen-drop {
    background-color: #262c39 !important;
}

.chosen-container-single .chosen-search input[type="text"] {
    background-color: #282d38 !important;
    border: 1px solid #323b4e !important;
}

.chosen-container-multi .chosen-choices .search-choice {
    border: 1px solid #3867d663 !important;
    background-color: #3867d673 !important;
    color: #c9c9c9 !important;
    margin-left: 0 !important;
    border-radius: 1px !important;
}

.input-group-text {
    color: #b6b8b9 !important;
    background-color: transparent !important;
    border: none !important;
    margin-bottom: -5px !important;
    margin-left: -15px !important;
    z-index: 1 !important;
    padding: 0 !important;
}

.input-group-text.prefix {
    padding: 0 1rem !important;
    margin-bottom: 5px !important;
}

.tab-content {
    margin-top: 2rem;
}

.custom-select:disabled {
    color: #cccccc !important;
    background-color: #394350 !important;
}

.custom-select,
.dropdown-multiselect input.form-control {
    background: #282e3e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3E%3Cpath fill='%23adb5bd' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") right 0.75rem center / 8px 10px no-repeat !important;
}

.modal-body .close {
    color: #da2525 !important;
    text-shadow: none !important;
}

.modal-body .close:hover {
    color: #d02222 !important
}

.modal-body {
    background-color: #293042b3 !important;
    padding: 0 !important;
}

.modal-footer {
    background-color: #293042 !important;
}

.modal-header {
    padding: 0.7rem 1rem !important;
    background-color: var(--main-color) !important;
}

.text-break {
    background-color: var(--main-color) !important;
    color: #bababa !important;
}


.bg-dark-blue {
    background-color: var(--main-color);
}

.min-w-150 {min-width: 150px;}
.wmp-100 {max-width: 100px;}
.mw-px-150 {min-width: 150px;}
.fs-07 {font-size: .7rem;}
.fs-08 {font-size: .8rem;}
.fs-085 {font-size: .85rem;}
.fs-09 {font-size: .9rem;}

.text-xs  { font-size: .75rem; }   /* ~12px */
.text-sm  { font-size: .875rem; }  /* ~14px */
.text-base{ font-size: 1rem; }      /* ~16px */
.text-lg  { font-size: 1.125rem; }  /* ~18px */
.text-xl  { font-size: 1.25rem; }   /* ~20px */
.text-2xl { font-size: 1.4rem; }    /* ~24px */
.text-3xl { font-size: 1.875rem; }  /* ~30px */
.text-4xl { font-size: 2.25rem; }   /* ~36px */

.q-badge {
    padding: 0 .15rem;
    border-radius: 0.15rem;
    color: #fff;
}

.q-badge.q-hd {background-color: #5284cacc; border: 1px solid #4f7cbb57;}
.q-badge.q-fhd {background-color: #4cb060d6; border: 1px solid #63b172;}
.q-badge.q-2k {background-color: #ca5252cc; border: 1px solid #bb4f4f57;}
.q-badge.q-4k {background-color: #d97706cc; border: 1px solid #d97706a3;}

.rating-diff { margin-left: 4px; font-size: 0.8em;}
.rating-diff--pos { color: #25a559; }
.rating-diff--neg { color: #d94040; }


.search-block .search-result {
    position: absolute;
    left: 0;
    z-index: 999;
    display: none;
    width: 100%;
    text-align: left;
    transition: opacity .15s ease, transform .15s ease;
    background: #2f384b;
    box-shadow: 1px 1px 3px #202634;
}

.search-block .search-result a {
    color: #c5c5c5;
    text-decoration: none;
    display: block;
    padding: 0.7rem 0;
}

.search-block .search-result a:hover {
    background-color: #293141;
    color: #fff;
}

.search-block .search-result .title {
    line-height: 1;
    font-size: 0.9em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.search-block .search-result .title .is-series {
    display: inline-block;
    background-color: #475983;
    color: #d5d5d5;
    border-radius: 0.1rem;
    font-size: 0.7rem;
    padding: 1px 2px;
}


.search-block .search-result .no-result {
    text-align: center;
    padding: 1rem;
}

.search-block form {
    width: 400px;
}

.search-block .search-input {
    width: 100%;
    outline: none;
    border: 1px solid #222733;
    background-color: #202634;
    color: #bfbfbf;
    padding: 0.2rem 0.5rem;
    border-radius: 0.2rem;
}

.nav-tabs .nav-link.active {
    color: #c3c3c3;
    background-color: #293042;
}

.datagrid .grid_field_edit {
    width: auto !important;
    background-color: var(--main-color) !important;
    border: 1px solid var(--main-color) !important;
}

.table-responsive {
    display: grid;
    grid-template-rows: auto 1fr;
    max-height: 75vh !important;
    margin: 1rem 0;
}

.datagrid tbody {
    overflow-y: auto;
}

.datagrid thead th {
    position: sticky !important;
    top: 0;
    background-color: #2e374b;
    z-index: 5;
    border-bottom: none !important;
}

.datagrid tbody .filter th {
    position: sticky !important;
    top: 46px;
    background-color: #2e374b;
    z-index: 5;
    box-shadow: 3px 3px 3px #212839;
}

/* Чтобы ширины ячеек совпадали */
.datagrid {
    border-collapse: separate;
}

.ui-widget-content {
    border: 1px solid #22293c !important;
    background: #293042 !important;
    color: #a3a3a3 !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #272c3a !important;
    background: #272c3a !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: #ffffff !important;
    background-color: #3867d6 !important;
    border-color: #3867d6 !important;
}

.ui-datepicker table td span, .ui-datepicker table td a {
    text-align: center !important;
}