@import "./css/text.css";
@import "./css/buttons.css";
@import "./css/padding_and_margin.css";

.dropdown-menu li {
position: relative;
}
.dropdown-menu .dropdown-submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
display: block;
}

.dropdown-hover:hover>.dropdown-menu {
display: inline-block;
}

.dropdown-hover>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
/*.row {*/
/*  --mdb-gutter-x: 0;*/
/*}*/



.custom-color-picker {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 80px; /* Ширина input + отступ */
    width: 50px; /* Высота input */
    background-color: #ffffff; /* Белый цвет по умолчанию или цвет, который вам нужен */
    border: 1px solid #ccc; /* Граница для выделения выбранного цвета */
    border-radius: 4px; /* Округленные углы */
}

@font-face {
    font-family: 'Montserrat';
    src: url('../static/theme/fonts/Montserrat-SemiBold.ttf') format('ttf');
}

.custom-logo-font {
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size:  calc( 20 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    font-style: normal;
    font-weight: 600;
    line-height:  calc( 26 * ( 1px - ( (1920px - 100vw) / 1920  ) )); /* 130% */
    text-transform: uppercase;

    width:  calc( 195 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height:  calc( 26 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    margin-top:  calc( 5 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    margin-bottom:  calc( 35 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.custom-font-size-menu {
    color: #ADB5BD;
    font-family: Montserrat;
    font-size:  calc( 10 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    font-style: normal;
    font-weight: 600;
    line-height:  calc( 11 * ( 1px - ( (1920px - 100vw) / 1920  ) )); /* 110% */

    padding-left: calc( 32 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    padding-right: calc( 32 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    padding-top:  calc( 29 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    margin-bottom:  calc( -3 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.navbar .nav-item .nav-link {
    color: #0a47a9;
    font-weight: 100;
}


.nav-custom-bar {
    font-weight: 600;
    font-size:  calc( 14 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.navbar-vertical.navbar-expand-lg {
    width:  calc( 257 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.custom-logo {
    width:  calc( 33 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height:  calc( 32.948 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    flex-shrink: 0;
    margin-top:  calc( 14 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse {
    flex-shrink: 0;
    margin-top: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.custom-nav-link {
    font-family: Montserrat;
    font-size:  calc( 14 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    font-style: normal;
    font-weight: 600;
    line-height:  calc( 14 * ( 1px - ( (1920px - 100vw) / 1920  ) )); /* 100% */
}

.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: calc( 12.4 * ( 1px - ( (1920px - 100vw) / 1920  ) )) calc( 32 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    padding-top:  calc( 20 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    padding-right: calc( 32 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    padding-bottom: 0px;
    padding-left: calc( 28 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    font-weight: 600;
    color: #6c757d;
    font-family: Montserrat, sans-serif;
    font-size:  calc( 14 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.navbar-vertical.navbar-expand-lg .navbar-nav .nav .nav-item .nav-link {
  padding-left:  calc( 75 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
  padding-top:  calc( 11 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
  padding-bottom: 0px;
  font-weight: 500;
}

.sub-nav-link {
    color: #1E1E1E;
    font-family: Montserrat;
    font-size:  calc( 14 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    font-style: normal;
    font-weight: 500;
    line-height:  calc( 14 * ( 1px - ( (1920px - 100vw) / 1920  ) )); /* 100% */
    padding-left:  calc( 75 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.header {
    height:  calc( 126 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    left: calc( 257 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}
.main-content {
    margin-top:  calc( 126 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    margin-left: calc( 257 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.card{
    border-radius:  calc( 12 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    border: 1px solid #E9ECEF;
    background: #FFF;
    box-shadow: 0px 8px calc( 16 * ( 1px - ( (1920px - 100vw) / 1920  ) )) 0px rgba(0, 0, 0, 0.04);
}

.card-header:first-child{
    border-top-left-radius:  calc( 12 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    border-top-right-radius:  calc( 12 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    border-bottom: 1px solid #E9ECEF;
    background: #FFF;
    font-size:  calc( 14 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    font-weight: 600;
    color: #1E1E1E;
    font-family: Montserrat;
    font-style: normal;
    padding-left: calc( 16 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}
.nav-tabs{
    border-bottom: 0px;
}

.custom-form-control {
  border-color: #dee2e6;
  font-size: calc( 16 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}



.sidebar-compact .navbar-vertical.navbar-expand-lg .navbar-nav .nav-item > .collapse-box, .sidebar-icons .navbar-vertical.navbar-expand-lg .navbar-nav .nav-item > .collapse-box {
    left: calc( 48 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.sidebar-compact .signout .custom-hidden-icon, .sidebar-icons .signout .custom-hidden-icon {
  display: none;
}

.navbar-vertical .navbar-vertical-footer-list > li {
  list-style: none;
  padding: 0px 0;
}

.table > :not(:last-child) > :last-child > * {
  border-bottom-color: #e1e1e1;
}

.btn-light {
    border-color: #dee2e6 !important;
}


.col-14 {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  width: 14%;
}

.form-switch .form-check-input {
    width:  calc( 43 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height:  calc( 24 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.custom-icon-9-16 {
    width: calc( 9 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height: calc( 16 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}
.custom-icon-13_419 {
    width: calc( 13.419 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height: calc( 13.419 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}


.custom-icon-10 {
    width: calc( 10 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height: calc( 10 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.custom-icon-13 {
    width: calc( 13 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height: calc( 13 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.custom-icon-14 {
    width: calc( 13 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height: calc( 13 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.custom-icon-16 {
    width: calc( 16 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height: calc( 16 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.custom-icon-18 {
    width: calc( 18 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height: calc( 18 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.custom-icon-24 {
    width: calc( 24 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height: calc( 24 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
}

.form-control-color {
    width:  calc( 58 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    height:  calc( 58 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    font-size: calc( 35 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    border: 0px;
    padding: 0px;
    max-width:  calc( 64 * ( 1px - ( (1920px - 100vw) / 1920  ) ));
    color: #DEE2E6;
}

.custom-switch-box-orange:checked{
    background-color: #FD933A !important;
    border-color: #FD933A !important;
}

.custom-switch-box-red:checked{
    background-color: #E25563 !important;
    border-color: #E25563 !important;
}

.form-control:disabled{
    background-color: #FFFFFF;
}