.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.form-signin .checkbox {
    font-weight: 400;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input#subdomain {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input#username {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.message-textarea {
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    width: -webkit-fill-available;
    padding: 11px 32px 10px 8px;
    font-size: 1em;
}

.messages-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
}

.messages-wrap {
    overflow-y: auto;
    flex-grow: 1;
}

.messages-wrap .bg-msg-other {
    background-color: #f5f6f7;
}

#sms_recents li a div div.avatar {
    position: relative;
}

#sms_recents li a div div.avatar span.avatar-badge {
    position: absolute;
    top: 5px;
    right: 4px;
    z-index: 99;
    width: fit-content;
    height: fit-content;
}

#sms_textarea:empty:before {
    content: attr(placeholder);
    color: #555;
}

.vmail-msg-btns:hover .btn {
    transition: border 500ms ease-out;

}

.table-vmail tr:not(:hover) .vmail-msg-btns .btn.btn-sm {
    --bs-btn-color: #aab3c3;
    --bs-btn-border-color: #aab3c3;
    --bs-btn-hover-color: #03070b;
    --bs-btn-hover-bg: #aab3c3;
    --bs-btn-hover-border-color: #aab3c3;
    --bs-btn-focus-shadow-rgb: 170, 179, 195;
    --bs-btn-active-color: #03070b;
    --bs-btn-active-bg: #aab3c3;
    --bs-btn-active-border-color: #aab3c3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 11, 0.125);
    --bs-btn-disabled-color: #aab3c3;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #aab3c3;
    --bs-gradient: none;
}

.offcanvas-size-xl {
    --bs-offcanvas-width: min(95vw, 600px) !important;
}

.offcanvas-size-xxl {
    --bs-offcanvas-width: min(95vw, 75vw) !important;
}

.offcanvas-size-md {
    /* add Responsivenes to default offcanvas */
    --bs-offcanvas-width: min(95vw, 400px) !important;
}

.offcanvas-size-sm {
    --bs-offcanvas-width: min(95vw, 250px) !important;
}

.c-pointer {
    cursor: pointer;
}

#calls_recents li a.recent-call div.btn-recents {
    display: none !important;
}

#calls_recents li a.recent-call:hover div.btn-recents {
    display: inline-flex !important;
}

label.form-check-label,
input.form-check-input {
    cursor: pointer;
}

input.form-check-input:checked+label {
    text-decoration: underline;
    font-weight: bold;
    font-size: 16px;
}

.glow-info {
    animation: glow 1s infinite alternate;
}

li.active .glow-info {
    animation: unset;
}

@keyframes glow {
    from {
        background-color: var(--bs-warning);
    }

    to {
        background-color: var(--bs-secondary);
    }
}

/* custom invalid labels for loating inpout*/
form.needs-validation input~label.invalid {
    display: none !important;
}

form.was-validated input:invalid~label.invalid {
    display: inline !important;
}

form.was-validated input:invalid~label.label {
    display: none !important;
}

form.was-validated input:not(:invalid)~label.invalid {
    display: none !important;
}

form.was-validated input:not(:invalid)~label.label {
    display: inline !important;
}

form.was-validated fieldset.upload_dropZone:has(> input:invalid) {
    outline: 2px dashed var(--bs-danger-border-subtle) !important;
}

form.was-validated fieldset.upload_dropZone:has(> input:valid) {
    outline: 2px dashed var(--bs-success-border-subtle) !important;
}

fieldset.upload_dropZone:has(> input:valid) .show-files {
    display: block !important;
}

fieldset.upload_dropZone:has(> input:valid) .show-nofiles {
    display: none !important;
}

fieldset.upload_dropZone:has(> input:invalid) .show-nofiles {
    display: block !important;
}

fieldset.upload_dropZone:has(> input:invalid) .show-files {
    display: none !important;
}

/* Arrange buttons */
.btn-matrix {
    flex-wrap: wrap;
    /* allow buttons to jump to another row */
}

.btn-matrix>.btn {
    width: 33%;
    /* force buttons to have the same width regardless of content */
}

.btn-matrix>.btn:nth-child(3n + 4) {
    margin-left: 0;
    /* because .btn-group adds `margin-left: -1px;` to all buttons */
}

.btn-matrix>.btn:nth-child(n + 4) {
    margin-top: -1px;
    /* superimpose borders of the buttons from adjacent rows */
}

/* Fix border radius */
.btn-matrix>.btn:first-child {
    border-bottom-left-radius: 0;
}

.btn-matrix>.btn:nth-child(3) {
    border-top-right-radius: 4px !important;
}

.btn-matrix>.btn:nth-last-child(3) {
    border-bottom-left-radius: 4px !important;
}

.btn-matrix>.btn:last-child {
    border-top-right-radius: 0;
}

table.table-nowordwrap>tbody>tr>td {
    white-space: nowrap;
}

@media (min-width: 992px) {
    .col-lg-5half {
        flex: 0 0 auto;
        width: 45.8333332%;
    }
}

.users-msg-summary {
    max-height: 100px;
    min-width: 200px;
    overflow-y: auto;
}

.h-fill {
    height: -webkit-fill-available !important;
}

.table-resize-wrapper {
    position: absolute;
    top: 5em;
    left: 1em;
    right: 1em;
    bottom: 1em;
}

.table-tr-pointer tbody tr td {
    cursor: pointer;
}

.scheduled-callback-input {
    display: none;
}

.scheduled-callback-sv {
    display: none;
}

.form-check-input:checked~.scheduled-callback-input {
    display: block;
}

.form-check-input:checked~.scheduled-callback-sv {
    display: flex;
}

*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
}

*::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--bs-secondary);
}

/*hacks for floating labels with select2*/
select[multiple]+.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    padding-top: 1em;
}

select[multiple]+.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    border: none
}

select[multiple]+.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 55px !important;
    border: var(--bs-border-width) solid #9dabbb;
}

select[multiple]+.select2-container--bootstrap-5 .select2-selection--multiple.select2-multi-sm {
    max-height: 45px !important;
    min-height: 45px !important;
    border: var(--bs-border-width) solid #9dabbb;
}

select[multiple]+.select2-container--bootstrap-5 .select2-selection--multiple.select2-multi-sm+label {
    font-size: 13px;
}

#manager-reports-stage .form-floating input.form-control {
    min-height: 54px;
    height: 54px;
}

#manager-reports-stage .form-floating input.form-control+label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.ctxmenu {
    position: fixed;
    border: 1px solid;
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 2px 0;
    box-shadow: var(--bs-box-shadow);
    background: #fff;
    margin: 0;
    z-index: 9999;
    overflow-y: auto;
    font-family: var(--bs-body-font-family);
    font-size: 14px;
    box-sizing: border-box;
}

.ctxmenu li {
    margin: 1px 0;
    display: block;
    position: relative;
    user-select: none
}

.ctxmenu li.heading {
    font-weight: bold;
    margin-left: -5px
}

.ctxmenu li span {
    display: block;
    padding: 2px 20px;
    cursor: default
}

.ctxmenu li a {
    color: inherit;
    text-decoration: none
}

.ctxmenu li.disabled {
    color: #ccc
}

.ctxmenu li.divider {
    border-bottom: 1px solid;
    border-color: var(--bs-border-color);
    margin: 5px 0
}

.ctxmenu li.interactive:hover {
    background: var(--bs-secondary-bg-subtle);
}

.ctxmenu li.submenu::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: .4em;
    margin: auto .1rem auto auto;
    border-style: solid;
    border-color: var(--bs-border-color);
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
    width: .3rem;
    height: .3rem
}

.ctxmenu li.submenu.disabled::after {
    border-color: var(--bs-border-color);
}

.dropdown-menu.dt-button-collection>div {
    max-height: 50vh;
    overflow-y: auto;
}

.dt-scroll-head table.table {
    table-layout: fixed;
}

.dt-scroll-head table.table thead th {
    white-space: nowrap;
    /* Prevents text from wrapping to a new line */
    overflow: hidden;
    /* Hides any content that overflows the element's box */
    text-overflow: ellipsis;
    /* Displays an ellipsis (...) to indicate truncated text */
}



@keyframes fadeout {
    0% {
        opacity: 1;
        visibility: visible;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 1;
    }
}

span.volume>i {
    visibility: hidden;
    margin-left: 1px;
    margin-right: 1px;
    animation:fadeout 200ms linear;
}

span.volume[data-level="0"]>i {
    visibility: hidden;
    animation:fadeout 200ms linear;
}

span.volume[data-level="1"]>i:nth-child(-n + 1) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="2"]>i:nth-child(-n + 2) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="3"]>i:nth-child(-n + 3) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="4"]>i:nth-child(-n + 4) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="5"]>i:nth-child(-n + 5) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="6"]>i:nth-child(-n + 6) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="7"]>i:nth-child(-n + 7) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="8"]>i:nth-child(-n + 8) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="9"]>i:nth-child(-n + 9) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="10"]>i:nth-child(-n + 10) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="11"]>i:nth-child(-n + 11) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="12"]>i:nth-child(-n + 12) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="13"]>i:nth-child(-n + 13) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="14"]>i:nth-child(-n + 14) {
    visibility: visible;
    animation:fadein 200ms linear;
}

span.volume[data-level="15"]>i:nth-child(-n + 15) {
    visibility: visible;
    animation:fadein 200ms linear;
}

#loader {
  animation: lspin 1s linear infinite;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px;
}

@keyframes lspin {
  0% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px var(--bs-secondary-color), 
      20px -20px var(--bs-secondary-color), 
      30px -10px var(--bs-secondary-color), 
      30px 0px var(--bs-secondary-color), 
      30px 10px var(--bs-secondary-color), 
      20px 20px var(--bs-secondary-color), 
      10px 30px var(--bs-secondary-color), 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  6.25% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px var(--bs-secondary-color), 
      20px -20px var(--bs-secondary-color), 
      30px -10px var(--bs-secondary-color), 
      30px 0px var(--bs-secondary-color), 
      30px 10px var(--bs-secondary-color), 
      20px 20px var(--bs-secondary-color), 
      10px 30px var(--bs-secondary-color), 
      0px 30px var(--bs-secondary-color), 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  12.5% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px var(--bs-secondary-color), 
      30px -10px var(--bs-secondary-color), 
      30px 0px var(--bs-secondary-color), 
      30px 10px var(--bs-secondary-color), 
      20px 20px var(--bs-secondary-color), 
      10px 30px var(--bs-secondary-color), 
      0px 30px var(--bs-secondary-color), 
      -10px 30px var(--bs-secondary-color), 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  18.75% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px var(--bs-secondary-color), 
      30px 0px var(--bs-secondary-color), 
      30px 10px var(--bs-secondary-color), 
      20px 20px var(--bs-secondary-color), 
      10px 30px var(--bs-secondary-color), 
      0px 30px var(--bs-secondary-color), 
      -10px 30px var(--bs-secondary-color), 
      -20px 20px var(--bs-secondary-color), 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  25% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px var(--bs-secondary-color), 
      30px 10px var(--bs-secondary-color), 
      20px 20px var(--bs-secondary-color), 
      10px 30px var(--bs-secondary-color), 
      0px 30px var(--bs-secondary-color), 
      -10px 30px var(--bs-secondary-color), 
      -20px 20px var(--bs-secondary-color), 
      -30px 10px var(--bs-secondary-color), 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  31.25% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px var(--bs-secondary-color), 
      20px 20px var(--bs-secondary-color), 
      10px 30px var(--bs-secondary-color), 
      0px 30px var(--bs-secondary-color), 
      -10px 30px var(--bs-secondary-color), 
      -20px 20px var(--bs-secondary-color), 
      -30px 10px var(--bs-secondary-color), 
      -30px 0px var(--bs-secondary-color), 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  37.5% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px var(--bs-secondary-color), 
      10px 30px var(--bs-secondary-color), 
      0px 30px var(--bs-secondary-color), 
      -10px 30px var(--bs-secondary-color), 
      -20px 20px var(--bs-secondary-color), 
      -30px 10px var(--bs-secondary-color), 
      -30px 0px var(--bs-secondary-color), 
      -30px -10px var(--bs-secondary-color), 
      -20px -20px transparent,
      -10px -30px transparent;
  }
  43.75% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px var(--bs-secondary-color), 
      0px 30px var(--bs-secondary-color), 
      -10px 30px var(--bs-secondary-color), 
      -20px 20px var(--bs-secondary-color), 
      -30px 10px var(--bs-secondary-color), 
      -30px 0px var(--bs-secondary-color), 
      -30px -10px var(--bs-secondary-color), 
      -20px -20px var(--bs-secondary-color),
      -10px -30px transparent;
  }
  50% {
    box-shadow: 
      0px -30px transparent, 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px var(--bs-secondary-color), 
      -10px 30px var(--bs-secondary-color), 
      -20px 20px var(--bs-secondary-color), 
      -30px 10px var(--bs-secondary-color), 
      -30px 0px var(--bs-secondary-color), 
      -30px -10px var(--bs-secondary-color), 
      -20px -20px var(--bs-secondary-color),
      -10px -30px var(--bs-secondary-color);
  }
  56.25% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px transparent, 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px var(--bs-secondary-color), 
      -20px 20px var(--bs-secondary-color), 
      -30px 10px var(--bs-secondary-color), 
      -30px 0px var(--bs-secondary-color), 
      -30px -10px var(--bs-secondary-color), 
      -20px -20px var(--bs-secondary-color),
      -10px -30px var(--bs-secondary-color);
  }
  62.5% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px var(--bs-secondary-color), 
      20px -20px transparent, 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px var(--bs-secondary-color), 
      -30px 10px var(--bs-secondary-color), 
      -30px 0px var(--bs-secondary-color), 
      -30px -10px var(--bs-secondary-color), 
      -20px -20px var(--bs-secondary-color),
      -10px -30px var(--bs-secondary-color);
  }
  68.75% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px var(--bs-secondary-color), 
      20px -20px var(--bs-secondary-color), 
      30px -10px transparent, 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px var(--bs-secondary-color), 
      -30px 0px var(--bs-secondary-color), 
      -30px -10px var(--bs-secondary-color), 
      -20px -20px var(--bs-secondary-color),
      -10px -30px var(--bs-secondary-color);
  }
  75% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px var(--bs-secondary-color), 
      20px -20px var(--bs-secondary-color), 
      30px -10px var(--bs-secondary-color), 
      30px 0px transparent, 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px var(--bs-secondary-color), 
      -30px -10px var(--bs-secondary-color), 
      -20px -20px var(--bs-secondary-color),
      -10px -30px var(--bs-secondary-color);
  }
  81.25% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px var(--bs-secondary-color), 
      20px -20px var(--bs-secondary-color), 
      30px -10px var(--bs-secondary-color), 
      30px 0px var(--bs-secondary-color), 
      30px 10px transparent, 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px var(--bs-secondary-color), 
      -20px -20px var(--bs-secondary-color),
      -10px -30px var(--bs-secondary-color);
  }
  87.5% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px var(--bs-secondary-color), 
      20px -20px var(--bs-secondary-color), 
      30px -10px var(--bs-secondary-color), 
      30px 0px var(--bs-secondary-color), 
      30px 10px var(--bs-secondary-color), 
      20px 20px transparent, 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px var(--bs-secondary-color),
      -10px -30px var(--bs-secondary-color);
  }
  93.75% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px var(--bs-secondary-color), 
      20px -20px var(--bs-secondary-color), 
      30px -10px var(--bs-secondary-color), 
      30px 0px var(--bs-secondary-color), 
      30px 10px var(--bs-secondary-color), 
      20px 20px var(--bs-secondary-color), 
      10px 30px transparent, 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px var(--bs-secondary-color);
  }
  100% {
    box-shadow: 
      0px -30px var(--bs-secondary-color), 
      10px -30px var(--bs-secondary-color), 
      20px -20px var(--bs-secondary-color), 
      30px -10px var(--bs-secondary-color), 
      30px 0px var(--bs-secondary-color), 
      30px 10px var(--bs-secondary-color), 
      20px 20px var(--bs-secondary-color), 
      10px 30px var(--bs-secondary-color), 
      0px 30px transparent, 
      -10px 30px transparent, 
      -20px 20px transparent, 
      -30px 10px transparent, 
      -30px 0px transparent, 
      -30px -10px transparent, 
      -20px -20px transparent,
      -10px -30px transparent;
  }
}
.empty-hide:empty {
    display: none !important;
}