* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* font-size: 18px; */
}
:root {
    --bs-primary: #302cff;
    --bs-primary-rgb: 48,44,255;
    --bs-link-color: #302cff;
    --bs-link-hover-color: #1e1ae4;
}

.btn-primary {
    --bs-btn-bg: #302cff;
    --bs-btn-border-color: #302cff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e1ae4;
    --bs-btn-hover-border-color: #1e1ae4;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1e1ae4;
    --bs-btn-active-border-color: #1e1ae4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #302cff;
    --bs-btn-disabled-border-color: #302cff;
  }

  .btn-outline-primary {
    --bs-btn-color: #302cff;
    --bs-btn-border-color: #302cff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e1ae4;
    --bs-btn-hover-border-color: #1e1ae4;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1e1ae4;
    --bs-btn-active-border-color: #1e1ae4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #1e1ae4;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #1e1ae4;
    --bs-gradient: none;
  }
  .pagination {
    --bs-pagination-active-bg: #302cff;
    --bs-pagination-active-border-color: #302cff;
  }

.page-empty {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f4;
}

.sidebar {
    min-height: calc(100vh - 85px);
    width: 40px;
    min-width: 40px;
    background-color: #f3f3f4;
    transition: 0.3s ease-in-out;
}

.sidebar.open {
    min-width: 240px;
    width: 240px;
}
.sidebar-menu {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    transition: all 0.3s ease-in-out;
}
.sidebar-menu:hover {
    margin-right: 6px;
    cursor: pointer;

}
.sidebar.open .sidebar-menu i{
    transform: rotateY(180deg);
}

.menu-wrapper {
    height: 40px;
    display: flex;
    justify-content: end;
}

.cursor-pointer{
    cursor: pointer;
}

.text-small {
    font-size: 0.75rem;
}
.nav__title {
    font-size: 1rem;
    color: #6F6F78;
    text-transform: uppercase;
}
.nav__item {
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 40px;

    padding-left: 10px;
    margin-left: 0;
    margin-bottom: 0.2rem;
    box-sizing: border-box;
    border: 1px solid transparent;

    transition: all 0.3s ease-in-out;
}
.nav__title {
    opacity: 0;
}
.nav__item .icon {
    margin-right: 6px;
    margin-top: 4px;
}
.nav__item .label {
    opacity: 0;
}
.nav__item:hover {
    border: 1px solid transparent;
    border-bottom: 1px solid #302cff;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    padding-left: 10px;
}
.nav__item.nav__item_active:hover{
    color: #ffffff;
}
.nav__item_active {
    background: #302cff;
    color: #ffffff;
}

.sidebar.open .nav__item {
    border-radius: 20px 0 0 20px;

    padding-left: 1rem ;
    margin-left: 1.6rem;
    margin-bottom: 0.2rem;

    border-right: 1px solid transparent;

}
.sidebar.open .nav__item .label {
    opacity: 1;
}

.sidebar.open .nav__title {
    opacity: 1;
}

.sidebar.open .nav__item .label {
    opacity: 1;
}

.sidebar.open .nav__item:hover {
    border: 1px solid #302cff;
    border-right: 1px solid transparent;
    padding-left: 1.2rem ;
}

.btn.btn-sm.btn-only-icon {
    padding: 2px;
}
.btn.btn-sm.btn-only-icon i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-hover > tbody > tr:hover > td.audio-details {
    --bs-table-accent-bg: none;
}

.player {
    background: #b3b6c1;
    height: 40px;
}

.audio-stop, .snn-stop {
    display: flex;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.all-play-buttons {
    display: flex;
}
.badge-block {
    height: 52px;
}

.player-button {
    font-size: 30px;
    margin-top: -5px;
    height: 30px;

    background: none;
    border: none;
}

.player-button-main {
    font-size: 45px;
    margin-top: -5px;

    background: none;
    border: none;
}
#timeline-snn {
    background: #d8d9df;
}

.player-button:disabled {
    background: none;
    border: none;
}
.player-button.disabled {
    color: #7f7f7f !important;
    cursor: auto;
}


.confirm-delete {
    display: flex;
    position: absolute;
    background: white;
    width: 100%;
    left: 0;
    padding: 1rem;
    height: calc(100% - 10px);
    top: 5px;
}

.offcanvas {
    z-index: 9999;
}

.list-item {
    border: 1px solid #b4b4b4;
    border-radius: 15px;
}

.hide {
   display: none;
}

.loader-container {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.data {
    /*display: none;*/
}
.popover {
    position: absolute;
}

.input-daterange input:first-child {
    border-radius: .375rem !important;
}

.input-daterange input:last-child {
    border-radius: .375rem !important;
}

.show-audio-details {
    font-size: 25px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.form-floating.input-group > label {
    /*padding: 0.75rem 2.75rem;*/
    margin-left: 40px !important;
    z-index: 9999;
}
.show-audio-details {
    color: #302cff;
}
.last-audio {
    animation: color-change 1s forwards;
}

.avatar {
    width: 160px;
    height: 160px;
    background: #eaeaea;
    border-radius: 80px;
    margin: 0 auto;
    background: url('../images/avatar_default.png');
    background-size: cover;
}

.outside {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}
.btn-circle {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid #a5adb0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-circle.active {
    width: 32px;
    height: 32px;
    border-radius: 0 16px 16px 0;
    border: 1px solid #a5adb0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid transparent;
}

.btn-circle:hover {
    border: 1px solid #6c757d;
}
.btn-circle i{
    height: 20px;
    width: 20px;
    padding-left: 1px;
}
.dd-menu {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);

    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: 0.375rem 0 0.375rem 0.375rem;
}

.client-block {
    /*background: url('../images/client_bg.jpg');*/
    /*background-size: cover;*/
    background: #cff4fc;
    background: #f3f3f4;

}

.item:hover {
    color: #302cff;
}



@keyframes color-change {
    0% {
        color: #302cff;
    }
    100% {
        color: #ffc107;
    }
}