/* Write your custom CSS here */

body {
    overflow-x: hidden;
}

@media screen and (max-width: 480px) {
    .sidebar-hidden .main-wrapper {
        overflow: hidden !important;
        display: none;
    }
}

@media (max-width: 1350px) {
    .page-sidebar {
        z-index: 0
    }
}

html[dir="rtl"] ul.accordion-menu svg{
    margin-left: 10px;
}

html[dir="rtl"] body {
    overflow-y: visible;
}

html[dir="rtl"] .tr-text {
    margin-right: 20px;
}

html[dir="rtl"] .page-sidebar {
    position: absolute;
    left: 0;
    margin-left: 10px;
    height: auto;
    height: -webkit-fill-available;
}

@media screen and (max-width: 480px) {
    html[dir="rtl"] .page-sidebar {
        margin-left: 5.5vw
    }
}

.accordion-menu {
    z-index: 100000;
}

tr.calendar.day {
    background-color: #0090ff !important;
    --bs-table-striped-bg: #0090ff !important;
    color: white !important;
    text-align: center !important;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate-miltistring {
    --max-lines: 3;
    max-height: calc(1.5rem * 3);
    overflow: hidden;
}

.pair {
    text-align: center; 
    min-width: 50px; 
    max-width: 50px
}

.rounded-circle {
    border-radius: 30rem
}

div.col-xl-2 > div > span.video_type {
    position: absolute;
    top: 115px;
    left: 30px;
}

div.col-xl-3 > div > span.video_type {
    position: absolute;
    top: 165px;
    left: 30px;
}

div.col-xl-2 > div > img {
    height: 125px;
}

div.col-xl-3 > div > img {
    height: 175px;
}

/* Мессенджер */
div.mail-text {
    overflow-y: auto;
}

.open-email-content {
    overflow-y: hidden !important;
}

ul.messenger-dialog {
    margin-left: 0; /* Отступ слева в браузере IE и Opera */
    padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
    max-height: calc(100vh - 520px);
}

.mail-info .mail-author img.online {
    width: 50px;
    border-radius: 50px;
    border: 4px solid rgb(0,144,255);
    float: left;
}

ul.messenger-dialog > li {
    list-style-type: none;
}

ul.messenger-dialog > li > p {
    margin: 0;
}

ul.messenger-dialog > li > time {
    font-size: 10px;
}

ul.messenger-dialog > li > div.btn-group {
    margin-top: 20px;
    margin-bottom: -10px;
    margin-left: -20px;
    margin-right: -10px;
    width: 110%;
}
ul.messenger-dialog > li > div.btn-group > .btn {
    border-radius: 0px !important;
}

ul.messenger-dialog > li > div.btn-group > .btn:last-child {
    border-bottom-right-radius: 30px !important;
}

ul.messenger-dialog li.sender {
    max-width: 80%;
    width: max-content;
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 30px;
    margin-bottom: 10px;
    border-bottom-left-radius: 0px;
    background: rgb(238,238,238);
    background: linear-gradient(52deg, rgba(238,238,238,1) 0%, rgba(246,246,246,1) 47%, rgba(242,242,242,1) 100%);
}

ul.messenger-dialog li.recipient {
    max-width: 80%;
    width: max-content;
    text-align: right;
    color: white;
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    margin: 0 0 0 auto;
    border-radius: 30px;
    border-bottom-right-radius: 0px;
    margin-bottom: 10px;
    background: rgb(0,144,255);
    background: linear-gradient(52deg, rgba(0,144,255,1) 0%, rgba(150,209,255,1) 100%);
}

.mail-text::-webkit-scrollbar {
    width: 12px;               /* ширина scrollbar */
}

.mail-text::-webkit-scrollbar-thumb {
    background-color: rgba(238,238,238,1);
    display: none;
    background: linear-gradient(52deg, rgba(238,238,238,1) 0%, rgba(246,246,246,1) 47%, rgba(242,242,242,1) 100%);    /* цвет плашки */
    border-radius: 20px;       /* закругления плашки */
    border: 3px solid white;  /* padding вокруг плашки */
}

.mail-answer {
    background-color: white;
    padding: 30px;
}

#button-send {
    height: 50px;
}

.card-body .counter-center{
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.card-body .counter-left{
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: left;
}

.card-body .counter-right{
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: right;
}

.card-danger {
    color: white;
    background: rgb(255,149,149);
    background: linear-gradient(321deg, rgba(255,149,149,1) 0%, rgba(221,44,44,1) 100%);
}


.card-warning {
    color: white;
    background: rgb(255, 223, 149);
    background: linear-gradient(321deg, rgb(255, 209, 149) 0%, rgb(228, 151, 28) 100%);
}

.card-info {
    color: white;
    background: rgb(149, 221, 255);
    background: linear-gradient(321deg, rgb(149, 204, 255) 0%, rgb(28, 115, 228) 100%);
}

.card-success {
    color: white;
    background: rgb(161, 255, 149);
    background: linear-gradient(321deg, rgb(149, 255, 167) 0%, rgb(22, 185, 58) 100%);
}

.select-picture {
    position: absolute;
    color: white;
    background: #00000063;
    border-radius: 150px;
    display: none;
}

.schedule-program {
    padding: 0;
    margin: 0;
}

.schedule-add-button {
    margin-top: 14px;
    margin-left: 14px;
    margin-right: 14px;
    width: 20%;
    float: center;
}

.loader .hints {
    top: 60%;
    position: absolute;
    width: 100%;
    height: 40px;
}

ul.messenger-dialog-attachments {
    list-style: none;
    padding: 0;
}

ul.messenger-dialog-attachments > li {
    margin-top: 5px;
    margin-bottom: 5px;
}

ul.messenger-dialog-attachments > li > a {
    display: flex;
    flex-flow: row;
    gap: 10px;
}

ul.messenger-dialog-attachments > li > a > div.attachment-icon {
    padding: 15px;
    width: 50px;
    height: 50px;
    border-radius: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.messenger-dialog-attachments > li > a > div.attachment-file {
    display: flex;
    flex-flow: column;
}

ul.messenger-dialog-attachments > li > a > div.attachment-file > p {
    margin-bottom: 0;
}