:root {
    --sidebar-width: 0px;
    --scrollbar-width: 0px;
    --bs-body-color: #565656;
}

* {
    box-sizing: border-box;
}

body {
    z-index: 0;
    font-family: Rubik, sans;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background-image: url(/img/background.webp);*/
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.15;
    z-index: -1;
}

h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
}

.btn-danger:disabled, .btn-success:disabled, .btn-primary:disabled{
    opacity: 1;
    border-color: whitesmoke;
    background: whitesmoke;
    color: gray;
}

.card{
    border-radius: 14px;
    box-shadow: 2px 2px 4px gray;
}

.card-not-active{
    background: #f7f7f7;
    color: #c0c0c0;
}

.dropdown-menu{
    max-height: 500px;
    overflow: auto;
}

.default-dropdown .dropdown-menu{
    min-height: 37px;
    width: -webkit-fill-available;
    width: -moz-available;
}

.dropdown-menu .dropdown-item{
    white-space: normal;
}

.hx-context-menu-item a{
    color: #666666;
    padding: 8px 10px;
    border-top: 1px solid #cacacab0;
}

.dropdown-menu .hx-context-menu-item:first-child a{
    border-top: none;
}

.dropdown-menu{
    padding: 0;
}

.dropdown-toggle::after{
    position: absolute;
    right: 7px;
    top: 14px;
}

.default-dropdown button{
    color: #484848;
    text-decoration: none;
    font-size: 14px;
    position: relative;
    text-align: left;
    padding-right: 25px;

    width: 1px; /*без этого трюка, при слишком большом тексте элемент уходит за горизонт*/
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: block;
}

.default-dropdown button:hover{
    color: #484848;
}

.default-dropdown button:disabled{
    color: gray;
    opacity: 1;
}

.default-dropdown{
    border: 1px solid #b3b3b3;
    width: 100%;
}

.input-readonly{
    min-height: 37px;
    border: 1px solid #b3b3b3;
    color: gray;
    width: 100%;
    border-radius: 4px;
    padding: 6px 12px;
}

.max-height-200-px{
    max-height: 200px;
    overflow: auto;
}

.status-mark{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin: 0 auto 5px auto;
}

.status-mark-blue{
    background: #4f93f6;
    box-shadow: 0px 0px 5px #4f93f6;
}

.status-mark-orange{
    background: #f19f00;
    box-shadow: 0px 0px 5px #f19f00;
}

.under-header{
    font-size: 10px;
    white-space: nowrap;
}

.card .msz-icon img{
    margin: 0 10px 0 0;
}

.card .ticket-type-icon img, .card .benefit-format-icon img{
    width: 24px;
    height: 24px;
    border: 1px solid lightblue;
    border-radius: 50%;
    margin: 0 0 0 10px;
}

.min-td-width{
    width: 1%; 
    min-width: 40px;
}

.benefit-consumer-card {
    white-space: nowrap;
    width: 100%;
}

.benefit-consumer-reset-key {
    display: flex;
    flex-direction: column;
}

.benefit-consumer-transport{
    white-space: normal;
    width: 60%;
}

.benefit-consumer-reset-key > button {
    align-self: flex-end;
}

input.invalid {
    border-color: #dc3545;
}