html, body {
    height: 100%;
    background-color: #f2f3f8;
    padding-top: 25px;
    font-size: 15px;
    font-weight: 300;
    font-family: Montserrat;
}

.form-control {
    padding: 6px 6px !important;
}

.pointer {
    cursor: pointer;
}


.help-cursor {
    cursor: help;
}

@media (max-width: 1025px) {
    nav.navbar-invert > div > a {
        margin-left: 25px;
    }
}

nav.navbar-invert > div > a {
    font-weight: 600;
    color: #fff;
    font-size: 2.1rem;
}

.va-super {
    vertical-align: super;
}

nav.navbar-invert > div > ul > li > a {
    font-weight: 400;
    color: #fff;
    display: inline-flex;
    cursor: pointer;
}

[data-target="#navbarCollapse"] {
    color: white;
}

aside > li > a {
    background-color: white;
}

/*nav.navbar-invert > div > ul > li.active {*/
/*color: rgb(116, 34, 102);*/
/*font-weight: 600;*/
/*border-bottom: 3px solid #f4516c;*/
/*}*/

.navbar-right {
    margin-right: 0px;
    margin-top: 15px;
}

.navbar-right > li > a {
    padding-bottom: 20px;
}

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

.navdiv {
    height: 100%;
    z-index: 2;
    max-width: 245px;
    float: left;
}

#navbarCollapse > div {
    padding-top: 9px;
}

nav .btn-primary {
    border: 1px solid white;
}

aside {
    position: fixed;
    height: 100%;
    background-color: #fff;
    font-weight: 400;
    font-size: 1rem;
    width: 245px;
    float: left;
    /*aside menu autohiding*/
    transform: translateX(0);
    transition: transform .3s;
    will-change: transform;
    z-index: 5;
    border-right: 1px solid #ebedf2;
    overflow-y: scroll;
    overflow-y: auto;
}

#showmenu[value="false"] ~ aside {
    transform: translateX(-100%);
}

#showmenuIcon {
    position: absolute;
    z-index: 1031;
    /*More impotant than display: none, set by Bootstrap on navbar collapse*/
    display: inline-block;
    margin-left: -10px;
    padding: 5px 10px 10px;
    top: 17px;
    left: 20px;
    font-size: 1rem;
    color: white;
}

@media (max-width: 1025px) {
    #showmenuIcon {
        display: inline-block !important;
        font-size: 12.5px;
    }
}

@media (min-width: 1025px) {
    div > aside {
        position: relative;
    }

    /*Attibute value has higher specificity that mediaqueries*/
    #showmenu[value="true"] ~ aside {
        transform: translateX(0);
    }

    #showmenu[value="false"] ~ aside {
        transform: translateX(0);
    }
}

.container-fluid {
    height: 100%;
    overflow: auto;
    scrollbar-gutter: stable;
}

aside > ul.nav {
    padding-left: 0px;
    padding-right: 0px;
}

ul.nav > li > a {
    padding: 0px 10px;
}

ul.nav > li > a > span {
    vertical-align: middle;
}

aside#simple > ul.nav > li > a:hover {
    background-color: #fff;
!important;
    color: #33B2E0 !important;
    font-weight: bolder;
}

aside#simple > ul.nav > li.active > a {
    background-color: #33B2E0 !important;
    color: #fff !important;
}

aside#simple > ul.nav > li.active > a {
    background-color: rgb(248, 248, 251);
    color: #33B2E0;
}

.modal-table {
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-bottom: 1px solid #f4f5f8;
}

.modal-dialog.modal-900 {
    width: 900px !important;
}

.modal-dialog.modal-1600 {
    width: 90% !important;
    max-width: 1600px;
}

/* AI Agent voice picker: SlimSelect + preview button on one row, browse link on the next */
.ai-voice-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* min-width keeps the dropdown from collapsing to 0 (and forces the browse link to wrap to its
   own row) when the preview button is hidden - otherwise .ss-main (basis 0) + link (basis 100%)
   pack onto one row and the selector disappears. */
.ai-voice-cell > .ss-main {
    flex: 1 1 0%;
    min-width: 150px;
}

.ai-voice-cell > .ai-voice-preview-btn {
    flex: 0 0 auto;
    margin-left: 8px;
}

.ai-voice-preview-btn .glyphicon {
    margin-right: 5px;
}

.ai-voice-cell > .ai-voice-browse-link {
    flex: 1 1 100%;
    margin-top: 8px;
}

.ai-voice-cell > audio {
    display: none;
}

/* Deepgram voice browser filter row: search + 4 selectors, all equal width on one row */
.dg-voice-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.dg-voice-filters > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Break at word boundaries, not mid-word: overrides the global `tbody td { word-break: break-all
   !important }`. Short atomic columns (Model, Name, Gender, Age, Language, Accent) stay on one line;
   the multi-word columns (Characteristics, Use Cases) wrap at spaces. */
.deepgram-voice-browser-modal .table td,
.deepgram-voice-browser-modal .table th,
.deepgram-voice-browser-modal .table code {
    word-break: normal !important;
    overflow-wrap: break-word;
}

.deepgram-voice-browser-modal .table td:nth-child(1),
.deepgram-voice-browser-modal .table td:nth-child(2),
.deepgram-voice-browser-modal .table td:nth-child(4),
.deepgram-voice-browser-modal .table td:nth-child(5),
.deepgram-voice-browser-modal .table td:nth-child(6),
.deepgram-voice-browser-modal .table td:nth-child(7) {
    white-space: nowrap;
}

.ai-voice-cell > .error,
.ai-voice-cell > .help-block {
    flex: 1 1 100%;
}

.license-inform {
    margin-top: 10px;
}

.custom-tooltip {
    margin-top: 5px;
    margin-right: 85px;
}

.btn {
    /*font-family: Poppins;*/
    font-weight: 600;
    background-image: none;
    display: inline-flex;
}

.btn-block {
    display: block;
}

.btn:active {
    box-shadow: none;
    font-weight: 500;
    font-family: Montserrat;
}

.btn-info, .btn-info:hover {
    color: #fff;
    background-color: #33B2E0;
    border-color: #33B2E0;
    box-shadow: none;
}

.btn-success, .btn-success:hover {
    color: #fff;
    background-color: #33B2E0;
    border-color: #33B2E0;
    box-shadow: none;
}

.btn-primary, .btn-primary:hover {
    color: #fff;
    box-shadow: none;
}


.btn-default, .btn-default:hover {
    color: #575962;
    background-color: #fff;
    border-color: #ebedf2;
    box-shadow: none;
}

.btn-danger, .btn-danger:hover {
    color: #fff;
    background-color: #f4516c;
    border-color: #f4516c;
    box-shadow: none;
}

.btn-secondary, .btn-secondary:hover {
    color: #212529;
    background: #fff;
    border-color: #ebedf2;
    box-shadow: none;
}

.glyphicon {
    font-size: smaller;
    line-height: 16px;
}

ul {
    list-style-type: none;
}

form > h2 { /*Form header style*/
    font-size: 1.55rem;
    font-weight: 500;
    color: #3f4047;
}

.well > h3 { /*Section header style*/
    font-size: 1.3rem;
    font-weight: 500;
    color: #3f4047;
    border-bottom: 1px solid #ebedf2;
    padding: 25px;
}

.word-break {
    word-break: break-all;
}

/*Common ID for the filenames in upload modals*/
#file-name-label {
    word-break: break-all;
}

small {
    font-size: 1rem;
    font-weight: 300;
    color: #afb2c1;
}

h3 > i > img {
    max-width: 25px;
    max-height: 25px;
    padding-bottom: 5px;
}

h3 > a {
    font-weight: 300;
}

h5 {
    color: #575962;
    font-weight: 400;
    font-size: 1rem;
}

i {
    color: #7b7e8a;
    font-weight: 300;
    font-size: .85rem;
    font-style: normal;
}

.well {
    background-color: #fff;
    background-image: none;
    border: none;
}

.form-control {
    border-color: #ebedf2;
    color: #575962;
    box-shadow: none;
}

.form-control {
    width: 100%;
}

.form-control[disabled] {
    background-color: #dcdee2;
}

label {
    color: #3f4047;
    font-weight: normal;
    margin-bottom: 5px;
}

input[type=checkbox][type=radio] {
    background: #e2e5ec;
    border: 1px solid transparent;
}

/*Fix for Chrome input autofill color*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid #ebedf2;
    -webkit-text-fill-color: #575962;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

.toggle.btn {
    border-color: #ebedf2;
}

.toggle-group > .btn-primary {
    background-color: #33B2E0;
}

section {
    color: #7b7e8a;
    font-size: .85rem;
    font-weight: 400;
    border: 1px solid #ebedf2;
    padding: 1.4em;
    border-radius: 6px;
    margin: 10px 0px;
    padding: 1.4em;
    height: max-content;
}

section > input[type=radio], section > div > input[type=radio] {
    transform: scale(1.5);
    margin-left: .5em;
    margin-right: 1.5em;
}

section > label, section > div > label {
    color: #3f4047;
    font-size: 1.1rem;
}

section > div {
    padding-top: .7rem;
    padding-left: 2.5rem;
    height: max-content;
}

btn-group {
    display: block;
}

i > img {
    max-width: 40px;
    max-height: 40px;
}

.modal > .modal-content { /*Modal user profile/logout window*/
    width: 275px;
}

.table {
    color: #575962;
}

.mb-10 > div {
    border-bottom: 2px solid #f4f5f8;
    margin: 40px 0px -11px 0px;
    padding: 4px 5px 8px 7px;
    font-weight: 500;
}

.table > tbody > tr > td {
    border-top: 1px solid #f4f5f8;
    font-weight: 300;
}

.tooltip {
    z-index: 1052;
}

.tooltip-inner {
    background-color: #fff;
    color: #6f727d;
    padding: 12px 15px;
    font-size: 0.75rem;
    font-weight: 300;
    opacity: 1;
    box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .25)
}

label + div.tooltip > .tooltip-arrow {
    border-bottom-color: #fff;
}

label[data-toggle=collapse] {
    padding: 15px;
    font-weight: 300;
    text-transform: uppercase;
    border-bottom: 1px solid #efefef;
    margin-bottom: .5rem;
    background-color: white;
    -webkit-text-stroke: 0.5px;
}

label[data-toggle=collapse]:hover {
    background-color: #fbfbfb;
    color: rgba(0, 0, 0, 0.4);
}

label[data-toggle=collapse] + .collapse {
    background-color: #efefef;
    padding: 1.5rem;
    font-size: .9rem;
}

label[data-toggle="collapse"] + .collapse.white {
    background-color: #fff !important;
}

#logoutModal {
    margin-top: 15px;
    right: 15px;
    min-width: 220px !important;
    background-color: #FFF;
    max-width: 450px;
}

#logoutModal > li {
    padding: 0px 15px;
}

#logoutModal > li a {
    padding: 0px;
    border-top: 1px solid #efefef;
}

#logoutModal > li button.emulate-a {
    width: 100%;
    height: 100%;
    z-index: 1001 !important;
    text-align: inherit;
    background-color: transparent;
    border: inherit;
    vertical-align: inherit;
    padding: 0px;
}

/*.quantity-wrapper */
.btn-decrement .glyphicon, .btn-increment .glyphicon {
    line-height: 20px;
}

.btn-increment, .btn-decrement {
    max-width: 40px;
    min-width: 40px;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    background-color: transparent

}

.btn-increment, .btn-decrement, .number-input-container input {
    border: #5c828a solid 1px;
    border-radius: 1.3vh;
    height: 34px;
}

.number-input-container {
    padding-left: 0px;
    padding-right: 0px;
    width: 9em;
    min-width: 20px;
    position: relative;
}

.btn-decrement {
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    right: unset;
    left: 0;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.btn-increment {
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

th.quantity-wrapper-header {
    padding-left: 3.5em !important;
}

th.left-position {
    padding-left: 3.2em !important;
}

th.align-limit {
    padding-left: 23px !important;
}

th.align-limit-more {
    padding-left: 40px !important;
}

th.align-limit-even-more {
    padding-left: 52px !important;
}

tr label.individual-check-box {
    top: -2px;
}

/*.quantity-wrapper */

.liWithoutSlash:before {
    content: none !important;
}

#resetScroll {
    position: absolute;
    bottom: 13px;
    right: 27px;
    background-color: white;
    padding: 8px 15px;
    z-index: 1000;
    font-size: x-large;
    border-radius: 30px;
    box-shadow: 0px 0px 15px 1px rgba(69, 65, 78, 0.2);
    display: none;
    opacity: 0.7;
    cursor: pointer;
}

.form-login {
    max-width: 500px;
    padding: 15px;
    margin: 20px auto;
}

.search-dropdown {
    max-height: 20rem;
    overflow-y: auto;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-0 {
    margin-top: 0;
}

.mtb-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mt-5 {
    margin-top: 5px;
}

.mtm-6 {
    margin-top: -6px;
}

.mt-9 {
    margin-top: 9px !important;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-2 {
    margin-top: 2px;
}

.mlm-15 {
    margin-left: -15px !important;
}

.ml-5 {
    margin-left: 5px;
}

.ml-0 {
    margin-left: 0px !important;
}

.ml-3 {
    margin-left: 3px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-14 {
    margin-left: 14px;
}

.at-char {
    padding: 0px !important;
    padding-top: 4px !important;
    width: 1% !important;
    position: relative;
    min-height: 1px;
}

.after-at-char {
    width: 15.67% !important;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.mr-0 {
    margin-right: 0px !important;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.p-0 {
    padding: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-0-i {
    padding-bottom: 0 !important;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pt-13 {
    padding-top: 13px !important;
}

.pt-0 {
    padding-top: 0;
}

.pt-3 {
    padding-top: 3px;
}

.pt-5 {
    padding-top: 5px;
}

.pt-7 {
    padding-top: 7px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-18 {
    padding-top: 18px;
}

.pt-20 {
    padding-top: 20px;
}

.pl-5 {
    padding-left: 5px;
}

.pl-0 {
    padding-left: 0px !important;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-25 {
    padding-left: 25px;
}

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.padding-0 {
    padding: 0px !important;
}

.w-0 {
    width: 0% !important;
}

.t-row {
    border-top: 1px solid #f4f5f8;
    font-weight: 300;
    padding: 10px 0;
    overflow-x: visible;
}

@media (max-width: 768px) {
    .input-group {
        display: table-row;
    }
}

.link-icon:hover, .link-icon:active, .link-icon:before, .link-icon:focus, .link-icon:hover {
    text-decoration: none !important;
}

.breadcrumb, .search-entry {
    background-color: transparent !important;
}

ul.nav > div.in {
    background-color: #eeeeee;
}

@media (min-width: 1025px) {
    #enterpriseSearch, #systemSearch {
        display: none;
    }
}

.navbar-fixed-bottom > div > ul.nav > li > a {
    padding: 25px 10px;
}

.selectpicker {
    font-weight: 400;
}

.input-group .bootstrap-select.form-control {
    z-index: inherit;
}

th a.sort {
    padding-right: 18px;
    position: relative;
    display: inline-flex;
    width: auto;
}

a.sort {
    text-decoration: none;
    cursor: pointer !important;
    color: #575962;
    font-weight: bold;
    font-size: 15px;
}

a.sort:hover {
    color: #575962;
!important;
}

a.sort:before,
a.sort:after {
    border: 4px solid transparent;
    content: "";
    display: inline-flex;
    height: 0;
    right: 5px;
    top: 50%;
    position: absolute;
    width: 0;
}

a.sort-off:before {
    border-bottom-color: #C8C8C8;
    margin-top: -9px;
}

a.sort-off:after {
    border-top-color: #C8C8C8;
    margin-top: 1px;
}

a.sort-up:before {
    border-bottom-color: #33B2E0;
    margin-top: -9px;
}

a.sort-up:after {
    border-top-color: #C8C8C8;
    margin-top: 1px;
}

a.sort-down:before {
    border-bottom-color: #C8C8C8;
    margin-top: -9px;
}

a.sort-down:after {
    border-top-color: #33B2E0;
    margin-top: 1px;
}

.domain-scroll-y {
    display: block;
    max-height: 300px;
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.landing-link {
    font-weight: bold;
    cursor: pointer !important;
}

.text-lgrey {
    color: #b6b6b6;
}

.text-dgrey {
    color: #636363;
}

.badge-lgrey {
    min-width: 120px;
    background-color: #b6b6b6;
}

.badge-dgrey {
    min-width: 120px;
    background-color: #636363;
}

.badge-success {
    min-width: 120px;
    background-color: #28a745;
}

.badge-danger {
    min-width: 120px;
    background-color: #dc3545;
}

/* AI Agent Call History "Busy" status pill */
.badge-orange {
    min-width: 120px;
    background-color: #e67e22;
}

/* small status indicator dot shown before the Call History status pill; reuses the
   same badge-* color class as the pill next to it (only for the background color) so the two always
   agree. min-width/padding are reset here because the shared badge-* classes carry min-width:120px,
   which would otherwise stretch this 8px dot into a 120px-wide oval. */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    margin-right: 6px;
}

/* Call History status pill sizes to its label instead of the shared badge-* min-width:120px
   (which is used elsewhere and must stay). Two-class selector so it wins over .badge-<color>. */
.badge.ai-call-status-badge {
    min-width: 0;
}

.badge-red {
    background-color: #dc3545;
}

.badge-green {
    background-color: #28a745;
}

.badge-blue {
    background-color: #0378a8;
}

.badge-clickable {
    cursor: pointer !important;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */
}

.dot {
    height: 10px;
    width: 10px;
    min-width: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dot-green {
    background-color: #28a745;
}

.dot-red {
    background-color: #dc3545;
}

.dot-blue {
    background-color: #337ab7;
}

.dot-grey {
    background-color: #b6b6b6;
}

.dot-black {
  background-color: #424242;
}

.glyph-link {
    font-size: 18px;
    line-height: 30px;
    cursor: pointer !important;
}

.red {
    color: #dc3545;
}

.dark-red {
    color: #B80034;
}

.light-orange {
    color: #ed9f2b;
}

.gray {
    color: #808080;
}

.dark-gray {
    color: #404040;
}

.no-decoration {
    text-decoration: none !important;
}

.green {
    color: #28a745;
}

.btn-green {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.btn-green:hover {
    background-color: #248f3d !important;
    border-color: #248f3d !important;
}

.btn-grey {
  background-color: #b6b6b6 !important;
  border-color: #b6b6b6 !important;
  color: #ffffff;
}

.blue {
    color: #0378a8;
}

.form-group:focus {
    outline: none;
}

*, *:focus, *:hover {
    outline: none;
}

.icon-button {
    font-weight: normal;
    font-size: 18px;
    line-height: 17px !important;
    padding: 0 !important;
}

.col-portal-16 {
    width: 100%;
}

.col-portal-15 {
    width: 93.75%;
}

.col-portal-14 {
    width: 87.5%;
}

.col-portal-13 {
    width: 81.25%;
}

.col-portal-12 {
    width: 75%;
}

.col-portal-11 {
    width: 68.75%;
}

.col-portal-10 {
    width: 62.5%;
}

.col-portal-9 {
    width: 56.25%;
}

.col-portal-8 {
    width: 50%;
}

.col-portal-7 {
    width: 43.75%;
}

.col-portal-6 {
    width: 37.5%;
}

.col-portal-5 {
    width: 31.25%;
}

.col-portal-4 {
    width: 25%;
}

.col-portal-3 {
    width: 18.75%;
}

.col-portal-2 {
    width: 12.5%;
}

.col-portal-1-5 {
    width: 9.37%;
}

.col-portal-1 {
    width: 6.25%;
}

.col-portal-0 {
    width: 3%;
}

.col-portal-0,.col-portal-1,.col-portal-1-5, .col-portal-2, .col-portal-3, .col-portal-4, .col-portal-5, .col-portal-6, .col-portal-7, .col-portal-8,
.col-portal-9, .col-portal-10, .col-portal-11, .col-portal-12, .col-portal-13, .col-portal-14, .col-portal-15, .col-portal-16 {
    position: relative;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
}

.voice-badge {
    min-width: 0px !important;
    margin: 0px 5px;
    line-height: 1.3 !important;
}

.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin: 2px 7px;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.sf-search-results {
    padding-right: 15px;
    padding-left: 15px;
    max-height: 200px;
    overflow-y: auto;
}

.device-type-table {
    display: block;
    max-height: 350px; /* Just for the demo          */
    overflow-y: auto; /* Trigger vertical scroll    */
    overflow-x: hidden; /* Hide the horizontal scroll */
}

.man-did-table {
    display: block;
    max-height: 350px; /* Just for the demo          */
    overflow-y: auto; /* Trigger vertical scroll    */
    overflow-x: hidden; /* Hide the horizontal scroll */
}

.hidden-select > select {
    display: none;
}

.tagify {
    border: 1px solid #ebedf2 !important;
}

.ss-main .ss-single-selected {
    height: 34px !important;
    border: 1px solid #ebedf2 !important;
}

.ss-option-selected {
    color: #fff !important;
    background-color: #33B2E0 !important;
    font-weight: 600 !important;
}

#switch-selector div.ss-content {
    width: 150px !important;
}

#switch-switcher {
    padding: 3px;
    width: 60px !important;
    height: 34px !important;
    border: 1px solid #ebedf2 !important;
    border-radius: 5px;
    background: #fff;
    color: #666;
}

#switch-switcher > option {
    font-style: normal;
    font-size: 15px;
    font-family: Helvetica, Arial, sans-serif;
}

ul.tab-big > li > a {
    padding: 9px 19px;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-menu { /* used to be tt-dropdown-menu in older versions */
    width: 400px;
    margin-top: 4px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px;
}

.tt-suggestion.tt-cursor, .tt-suggestion:hover {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

.custom-autosuggestion {
    border-bottom: 1px solid #d4d4d0
}

.border-bottom {
    width: 100%;
    border-bottom: 1px solid #d4d4d0
}

.modal-big {
    width: 1000px;
}

body.dragging, body.dragging * {
    cursor: move !important;
}

.dragged {
    position: absolute;
    opacity: 0.7;
    z-index: 2000;
}

.itemz {
    padding: 5px;
    border: 1px solid #d4d4d0;
    margin: 1px;
    font-weight: 400;
}

#sortable li.placeholder {
    position: relative;
    /** More li styles **/
}

.aup > ul {
    list-style-type: disc;
}

#sortable li.placeholder:before {
    position: absolute;
    /** Define arrowhead **/
}

.min-w-200 {
    min-width: 200px;
}

.small-table {
    max-height: 300px;
    overflow: scroll;
    overflow-x: hidden;
}

.medium-table {
    max-height: 400px;
    overflow: scroll;
    overflow-x: hidden;
}

.large-table {
    max-height: 500px;
    overflow: scroll;
    overflow-x: hidden;
}

.xsmall-table {
    max-height: 200px;
    overflow: scroll;
    overflow-x: hidden;
}

.font-native {
    font-size: 100%;
}

.modal-body-scroll {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.card {
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-block {
    padding: 25px;
}

.order-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.w-f {
    width: 100%;
}

.m-a {
    margin: auto;
}

.vdivide [class*='col-']:not(:last-child):after {
    background: #e0e0e0;
    width: 1px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    min-height: 100%;
}

.h-70 {
    height: 70px;
}

.my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.calls-card-color {
    color: #2a95cb;
}

.calls-card-background {
    background: rgb(158, 202, 225, 0.05);
}

.minutes-card-color {
    color: #1f5379;
}

.minutes-card-background {
    background: rgb(49, 130, 189, 0.05);
}

.px-0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.pr-0 {
    padding-right: 0px !important;
}

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap {
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap; /* Opera <7 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* IE */
}

.wb {
    word-wrap: break-word;
}


.error {
    color: darkred;
    font-style: italic;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-3 {
    padding: 3px;
}

.glyphicon.glyphicon-one-fine-dot-blue:before {
    content: "\25cf";
    font-size: 1.3em;
    color: #337ab7;
}

.glyphicon.glyphicon-one-fine-dot-red:before {
    content: "\25cf";
    font-size: 1.3em;
    color: red;
}

.glyphicon.glyphicon-one-fine-dot-green:before {
    content: "\25cf";
    font-size: 1.3em;
    color: green;
}

.tail-select {
    width: 100% !important;
}

.tableBodyScroll tbody {
    display: block;
    max-height: 500px;
    overflow-y: auto;
    padding: 2px;
}

div.tab-content div.tab-pane table.tableBodyScroll tbody {
    max-height: 650px;
    overflow-y: auto;
}

.customTableBodyScroll tbody {
    display: block;
    max-height: 500px;
    overflow-y: auto;
    padding: 2px;
}

.tableBodyScroll thead,
.customTableBodyScroll thead,
.tableBodyScroll tbody tr, .customTableBodyScroll tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.tableBodyScroll td, .customTableBodyScroll td {
    overflow: hidden;
}

div.sticky-container {
    padding-right: 0;
    /*background-color: #fff;*/
    background-image: none;
    border: none;
    background-repeat: repeat-x;
}

@media (max-width: 479px) {
    a.btn.btn-danger#custom-delete-button {
        margin-top: 5px;
    }
}

.hov-inner {
    display: none;
}

.hov-outer:hover {
    border-radius: 3px;
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.4);
}

.hov-outer:hover div.hov-inner {
    display: block;
}

.modal-xl {
    width: 90%;
    max-width: 1200px;
}

.btn-wide {
    width: 100% !important;
}

.center-label {
    font-weight: bold;
    margin: 0 auto;
}

.w-85 {
    width: 85px !important;
}

.margin-auto {
    margin: auto !important;
}

.inline {
    display: inline !important;
}

@media (min-width: 768px) {
    .modal-110 {
        width: 660px;
    }
}

.ss-main .ss-single-selected .placeholder, .ss-main .ss-single-selected .placeholder {
    width: 1px;
}

.spin {
    z-index: 9999999;
    opacity: 0.3 !important;
}

.bootstrap-autocomplete {
    overflow: hidden;
}

.cursor-default {
    cursor: default !important;
}

.left {
    float: left;
}

.forest-green {
    color: forestgreen;
}

.twitter-typeahead {
    width: 100% !important;
}

.right {
    float: right;
}

.slider-selection {
    background: #BABABA;
}

.slider-handle {
    background-color: #33B2E0 !important;
    color: #33B2E0 !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#33B2E0), to(#33B2E0));
}

.navbar-li {
    display: initial !important;
}

.custom-li {
    display: inline-flex !important;
}

.custom-li .dropdown-menu > li {
    font-size: 14px;
    border-bottom: 1px solid #b3b3b3;
    cursor: pointer;
}

.custom-li .dropdown-menu > li > a > div {
    overflow: hidden;
    white-space: unset;
}

.custom-li div.ss-main .ss-single-selected {
    border: none !important;
    background-color: transparent !important;
    padding-right: 0;
}

.custom-li div.ss-main .ss-content {
    width: 280px;
}

.custom-li div.ss-main .ss-single-selected .placeholder {
    width: auto;
    display: inline-flex;
    max-width: 260px;
}

.custom-li div.ss-main .ss-single-selected .ss-arrow {
    margin-top: 0;
}

.overlaySelector div.ss-main {
    display: none;
}

.liWithoutSlash div.ss-main .ss-single-selected .placeholder {
    display: none;
}

.middle-li div.ss-main .ss-single-selected .placeholder {
    display: none;
}

.middle-li:before {

}

.li-slash:before {

}

.overlaySelector select.custom-select {
    display: inline-block !important;
    min-height: 100%;
    border: 1px solid #ebedf2;
    border-radius: 5px;
    height: 35px;
    max-width: 160px;
    cursor: pointer;
    padding: 5px;
}


ul.nav-buttons > li > a {
    padding: 6px 12px;
}

ul.nav-buttons > li > a > span {
    vertical-align: unset;
}

tr.middle-centered th {
    vertical-align: middle !important;
}

.initially-hidden {
    visibility: hidden;
}

.webex-modal-wrapper {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.webex-modal-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    border: 1px solid #ddd;
    height: 100%;
}
.webex-modal-panel.active{
    border: 1px solid #ed9f2b;
}

.webex-modal-panel-header {
    padding: 10px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ddd;
}

.webex-modal-panel-body {
    flex: 1;
    text-align: center;
    padding: 5px;
}

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.vertical-align-super {
    vertical-align: super;
}

.font-21 {
    font-size: 21px;
}

.webex-modal-panel-footer {
    flex: 0;
    padding: 5px;
}

.tableFixHead {
    overflow: auto;
    height: 500px;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
}

.danger tr, .danger td {
    border-color: #f2dede !important;
}

.danger-hover {
    background-color: #ebcccc !important;
    border-color: #ebcccc !important;
}

.danger-hover tr, .danger-hover td {
    border-color: #ebcccc !important;
}

ul li.access_list {
    padding: 5px;
    list-style: circle;
}


.custom-li div.fstElement {
    font-size: 0.7em;
    background-color: transparent;
    border: none;
    box-shadow: none !important;
}

.custom-li input.fstQueryInput:focus, .navbar-li input.fstQueryInput:focus {
    box-shadow: 0 0 5px #5897fb;
}

.custom-li input.fstQueryInput, .navbar-li input.fstQueryInput {
    border: 1px solid #dcdee2;
    border-radius: 4px;
    background-color: #fff;
    outline: 0;
    -webkit-box-sizing: border-box;
    -webkit-appearance: textfield;
}

.custom-li span.fstSelected, .navbar-li span.fstSelected {
    background-color: #2694f1;
    cursor: not-allowed;
    font-weight: 700 !important;
    /* Use value below in order to change color, that color is used in slim selector for selected item:
       Color -> '#33B2E0;'
     */
}

.custom-li input.fstQueryInput, .navbar-li input.fstQueryInput {
    border: 1px solid #dcdee2;
    border-radius: 4px;
    background-color: #fff;
    outline: 0;
    -webkit-box-sizing: border-box;
    -webkit-appearance: textfield;
}

.custom-li div.fstToggleBtn {
    min-width: auto;
    padding-top: .51429em;
    padding-left: .21429em;

    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.navbar-li div.fstToggleBtn {
    position: initial;
}

.custom-li div.fstToggleBtn:after, .navbar-li div.fstToggleBtn:after {
    margin-top: -5px;
    margin-left: 9px;
    margin-right: -6px;
    border-top-color: #504949;
    top: 47%;
    border: solid #666;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transition: transform .2s, margin .2s;
    transform: rotate(45deg);
}

.middle-li div.fstToggleBtn {
    width: 20px;
    height: 20px;
    overflow: hidden;
    color: transparent;
    margin-top: 7px;
}

.custom-li div.fstMultipleMode .fstControls, .navbar-li div.fstMultipleMode .fstControls {
    width: 100%;
}

.custom-li div.fstSingleMode .fstControls {
    width: 280px;
}

.spinner-container {
    padding-top: 10px;
    margin-left: -15px;
    display: flex;
    font-size: initial;
    right: 13px;
    position: absolute;
}

.aligned-td {
    display: flex !important;
    width: 100% !important;
    padding-top: 13px !important;
}

th.th-display-flex {
    display: flex; /* Flex Seating needs alignment of active */
}

.aligned-checkbox {
    margin-top: -5px;
    position: inherit !important;
}

.custom-dot {
    margin-top: 5px;
    margin-right: 5px;
    padding: 5px;
}

.navbar-li div.fstElement {
    font-size: 0.7em;
    background-color: transparent;
    box-shadow: none !important;
    border: 1px solid #dcdee2;
    border-radius: 4px;
}

.navbar-li span.fstResultItem, .custom-li span.fstResultItem {
    padding: .35em .71429em;
}

.custom-li span.fstResultItem {
    font-weight: 400;
}

.navbar-li div.fstToggleBtn {
    min-width: auto;
    padding: .5em 1.5em 0.5em .4em;
    color: #333;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.navbar-li div.fstToggleBtn:after {
    margin-right: 0;
}

.head-pad {
    padding-bottom: 15px !important;
}

.row-pad {
    padding-top: 13px !important;
}

tbody tr {
    word-break: break-all !important;
}

tbody td {
    word-break: break-all !important;
}

.word-break {
    word-break: break-word !important;
}

.number-input-container .error {
    word-break: break-word;
}


.h-45 {
    text-align: center;
    height: 45px;
}

.responsive-card {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 4fr 4fr;
    grid-column-gap: 0.1vw;
    height: 100%;
    text-align: center;
}

.responsive-label {
    font-size: 1.1vw;
}

.responsive-main-label {
    font-size: 1.25vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.responsive-metric-label {
    font-size: 1.25vw;
}

@media (max-width: 1440px) {
    .responsive-main-label {
        font-size: 1.5vw;
    }

    .responsive-metric-label {
        font-size: 1.5vw;
    }

    .responsive-label {
        font-size: 1.2vw;
    }
}

@media (max-width: 1200px) {
    .responsive-main-label {
        font-size: 1.8vw;
    }

    .responsive-metric-label {
        font-size: 1.8vw;
    }

    .responsive-label {
        font-size: 1.5vw;
    }
}

@media (max-width: 1025px) {
    .responsive-main-label {
        font-size: 2.3vw;
    }

    .responsive-metric-label {
        font-size: 2.3vw;
    }

    .responsive-label {
        font-size: 1.8vw;
    }
}

@media (max-width: 850px) {
    .responsive-main-label {
        font-size: 2.6vw;
    }

    .responsive-metric-label {
        font-size: 2.6vw;
    }

    .responsive-label {
        font-size: 2.2vw;
    }
}

@media (max-width: 750px) {
    .responsive-main-label {
        font-size: 4vw;
    }

    .responsive-metric-label {
        font-size: 4vw;
    }

    .responsive-label {
        font-size: 3vw;
    }
}

@media (max-width: 500px) {
    .responsive-main-label {
        font-size: 6.5vw;
    }

    .responsive-metric-label {
        font-size: 6.5vw;
    }

    .responsive-label {
        font-size: 6vw;
    }
}

@media (max-width: 1800px) {
    .custom-header > a.sort:before {
        /*margin-top: 0;*/
    }

    .custom-header > a.sort:after {
        /*margin-top: 10px;*/
    }
}

@media (max-width: 1920px) {
    .fax-custom-header > a.sort:before {
        margin-top: 2px;
    }

    .fax-custom-header > a.sort:after {
        margin-top: 12px;
    }
}

.double-line-header > a.sort:before {
    margin-top: 0;
}

.double-line-header > a.sort:after {
    margin-top: 10px;
}

.border-right-0 {
    border-right: 0px !important;
}

.custom-tagify-span .tagify__input {
    width: 54% !important;
}

.custom-tagify-span .tagify__tag {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 98%;
}

.custom-tagify-span span.tagify__tag-text {
    width: 100%;
}

.white-space-nowrap {
    white-space: nowrap;
}

.list-section-cell {
    text-align: center;
}

#sip-contacts {
    text-align: justify;
}

#sip-list-0, #sip-list-1, #sip-list-2, #sip-list-3, #sip-list-4 {
    display: inline-block;
    width: 100%;
}

#sip-list-0:after, #sip-list-1:after, #sip-list-2:after, #sip-list-3:after, #sip-list-4:after {
    height: 100%;
    display: inline-block;
}

.search-entry > li + li:before {
    color: #ccc;
    content: "/\00a0";
    padding: 0;
}

.span-details {
    font-size: 1.5em;
}

/* AI Call History Name column: the accent agent-name link should be normal body size + bold, not the
   global .span-details 1.5em (which rendered it ~22px and inconsistent with the rest of the table). */
.ai-call-history-open strong.span-details {
    font-size: unset;
    font-weight: 600;
}

/* AI Call History search control: softly rounded 8px outer corners + a lighter border, so the input
   and Search button read as one modern grouped control instead of a hard square box. */
#ai-call-history-search {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-color: #d3d7de;
}
#ai-call-history-search + .input-group-btn > .btn {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* AI Call History "Action" dropdown button: lay label + caret out with flex so the caret stays
   vertically centered beside the text (in the flex toolbar it floated to the top-right corner). */
.ai-ch-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ai-ch-action-btn .caret {
    margin: 0;
}

/* AI Call History phone-number copy icon: subtle muted glyph next to the number, accent on hover. */
.ai-call-history-copy {
    margin-left: 6px;
    color: #9aa0ac;
    font-size: 12px;
}
.ai-call-history-copy:hover {
    color: #337ab7;
}

.line-up-icon {
    position: relative;
    bottom: 5px;
}

.modal-full-screen {
    width: 100%;
}

.tail-select .select-label .label-inner {
    padding: 7px 10px 7px 10px !important;
}

.overflow-y-inherit {
    overflow-y: inherit !important;
}

.no-undrln {
    text-decoration: none !important;
}

#user-registrations-content table:first-child tr:first-child td:first-child {
    width: 10rem;
}

.captcha-style {
    color: white;
    font-weight: 600;
}

.tail-select {
    min-width: 250px !important;
}

.item-tooltip + .tooltip > .tooltip-inner {
    border: 1px solid #4d4d4d;
    font-size: 12px;
}

.clone-group .navbar-li div.fstToggleBtn {
    max-width: none;
    color: #666;
}

.clone-group .navbar-li div.fstElement {
    color: #666;
    border: 1px solid #ebedf2 !important;
}

.pagination .ss-single-selected, .pagination input {
    margin: 0 !important;
    padding: 0 !important;
    border: none;
}

.pagination input {
    height: 35px;
    min-width: 7em;
}

.pagination li.go-to-page-button a span.glyphicon {
    font-size: 18px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.pagination li.go-to-page-button a{
    cursor: pointer;
}

.pagination span {
    white-space: nowrap;
}

.pagination .ss-main .ss-single-selected {
    height: 35px !important;
}

.pagination > li input {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd
}

.pagination > li input {
    border-radius: 0;
    border-color: #ddd;
    border-left: none;
}

.pagination > li .ss-main > div.ss-single-selected, .pagination > li input {
    border-radius: 0;
    border-color: #ddd !important;
    padding: 5px !important;
    padding-top: 5px !important;
    border-left: none;
    min-height: 2.38em;
}

.pagination > li .ss-main > div.ss-single-selected:hover {
    color: #337ab7
}

.pagination > li > span:focus, .pagination > li > span:hover {
    background-color: white !important;
    border-color: #ddd !important;
}

.pagination > li > a, .pagination > li > span {
    height: 100%
}

.pagination > li > span.span-details {
    font-size: unset;
}

.no-search-on-slim-select + div.ss-main .ss-content .ss-search {
    display: none;
}

.table > thead > tr > th { /*VF-2750 Visual bug with Sorting Control arrows.*/
    vertical-align: middle;
}


.filter-panel {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
    border-radius: 5px;
    padding: 5px;
    font-weight: 600;
    background-color: #ddd;
    border: 1px #ddd solid;
}

.filter-tag {
    padding: 5px;
    cursor: default;
    color: white;
    display: inline-block;
    background-color: #787878;
    text-decoration: none;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}
.danger>a {
    color: red;
    cursor: pointer;
}
input[data-toggle=toggle] {
    display: none !important;/*Maks all inputs that shall be converted to toggle non-visible before document.ready*/
}
select:not([keep-native-select], .hourselect, .minuteselect, .secondselect, .ampmselect) {/*<select keep-native-select="..." and daterangepicker time selector shall be used to keep native select and not transform it slim-select*/
    display: none !important;/*Maks all selects that shall be converted to slim-select non-visible before document.ready*/
}
select[multiple=multiple]:not(.hidden) {/*current css implementation does not support aggregation of the :not()
    Therefore this rule makes sure that multiple selects still visible unless they are have class hidden*/
    display: block !important;
}
#top-scroll-wrapper, .top-scroll-wrapper-placer {
    height: 26.6px;
    width: 98.8%;
}
.date-range-picker {
    background: #fff;
    cursor: pointer;
    border: 1px solid #ebedf2;
    border-radius: 4px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.date-range-picker.label-inside {
    padding-left: 5px;
}
.date-range-picker span {
    text-wrap: wrap;/*chrome*/
    white-space: break-spaces;/*firefox*/
}
div.ranges ul li {
    font-family: Montserrat;
    font-size: 15px !important;
}
ul.margin-left-percent {/*used in aligning buttons row on call-recordings*/
    margin-left: -1%
}
li > a.report-link {
    background: transparent;
    padding-right: 0px !important;
    cursor: pointer;
}
li > a.report-link:hover {
    background: transparent !important;
    padding-right: 0px;
    cursor: pointer;
    text-decoration: underline;
}
/*VF-3757 start*/
.glyphicon-copy:before {
    font-family: 'portal-icons';
    content: "\e981";
}
.glyphicon-copy:hover:before {/*VF-3757 More elegant solution*/
    font-family: 'portal-icons';
    content: "\e982";
}
/*VF-3757 end*/

#logoutModal li > a, #logoutModal li > a button {/*VF-3788*/
    display: flex;
    align-items: center;
}

#logoutModal .fa {/*VF-3579 match icon-* sizing in profile dropdown*/
    font-size: xx-large;
    line-height: 2;
    padding: 2px 10px;
    display: inline-block;
    text-align: center;
}

#logoutModal .fa-moon-o {/*VF-3579 solid crescent moon — FA4 has no filled variant*/
    color: inherit;
}
#logoutModal .fa-moon-o::before {
    content: '' !important;
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    border-radius: 50%;
    background: currentColor;
    -webkit-mask: radial-gradient(circle at 68% 50%, transparent 36%, black 38%);
    mask: radial-gradient(circle at 68% 50%, transparent 36%, black 38%);
    transform: rotate(-30deg);
    vertical-align: middle;
}

aside #globalSearch {/*currently commented in parts/navigation_new.html*/
    display: block;
}

#enterpriseSearch > #globalSearch {/*currently commented in parts/navigation_new.html*/
    margin-bottom:15px;
    margin-left: 15px;
}

aside[id=simple].navbar-ex1-collapse li:not([data-toggle=collapse])>a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

@media (min-width: 1025px) {
    li.menu-spacer {
        display:none;
    }
}

@media (min-width: 1010px) {/*Show Global Search as icon on screens narrower then 1025px*/
    #globalSearch .global-search-button-icon{
        display: none;
    }
    #globalSearch .global-search-button-text{
        display: block;
    }
}
@media (max-width: 1010px) {/*Show Global Search as input field on screens wider then 1025px*/
    #globalSearch .global-search-button-icon{
        display: block;
    }
    #globalSearch .global-search-button-text{
        display: none;
    }
}

#navbarCollapse.navbar-collapse.collapse.in {/*System789012345678901234567890*/
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
.id-separator-domain-clipboard-copy {
    display: flex;
    align-items: center;
}
/*VF-4346 align @ inside of combined <id>@<domain> element*/
.id-separator-domain-clipboard-copy > .input-group-addon {
    padding-top:8px;
    padding-right: 10px;
    padding-left: 5px;
    height: 2.43em;
    width: 2em;
}
/*VF-4346 put Copy icon outside of combined <id>@<domain> element*/
.id-separator-domain-clipboard-copy > a.copy-by-template {
    position: absolute;
    right: -20px;
}

.pagination a {/*presides .pagination > .active > a,...*/
    cursor: pointer;
}

.pagination li.active.go-to-page-button a {/*follows .pagination > .active > a,...*/
    cursor: pointer;
}
/*VF-4288 Fix Pagination Cursor Behavior on 'Fax History' Page*/
.pagination a , .pagination li.active.go-to-page-button a {
    cursor: pointer;
}

.modal-large {
    width: 1500px;
}

.chart-container {
    width: 1450px;
    height:550px
}
label.aligned-checkbox a.font-21.icon-delete {/*VF-4341 Unify Remove Icon*/
    cursor: pointer;
    color: #CC0000;
}
.select-domains {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}
.disable-click{
    pointer-events:none;
}
label.handle-password-label > * {
    padding-left: 5px;
}
label.handle-password-label {
    display: flex;
    flex-flow: nowrap;
    align-items: center;
    text-wrap-mode: nowrap;
}
.glyphicon-info-sign {
    cursor: help;
}
.glyphicon-copy {
    cursor: pointer;
}



/* Transcription column specific styles */
.transcription-column {
    width: 20%;
    max-width: 100%;
}

/* Applied to the text content in transcription column */
.transcription-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 500;
    display: block;
}

.call-details-row {
    margin-bottom: 15px;
    display: flex;
}

.call-details-label {
    width: 80px;
    text-align: right;
    padding-right: 15px;
    font-weight: bold;
    min-width: 80px;
}

.call-details-value {
    flex: 1;
}

/* Fix for the label-less row to maintain alignment */
.call-details-row-no-label {
    margin-bottom: 15px;
    display: flex;
    padding-left: 0;
}

/* Transcript panel styles */
.transcript-panel {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    position: relative;
    background-color: #fff;
}

.transcript-copy-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #777;
    background: none;
    border: none;
    cursor: pointer;
}

.transcript-line {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

.transcript-timestamp {
    color: #777;
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 10px;
}

.timestamp-link {
    color: #777;
    cursor: pointer;
    text-decoration: none;
}

.timestamp-link:hover {
    text-decoration: underline;
}

.transcript-speaker {
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

.transcript-message {
    font-size: 14px;
    line-height: 1.5;
    display: block;
    margin-left: 10px;
    margin-top: 0;
}

/* Note panel styles */
.note-panel {
    margin-top: 20px;
}

.note-header {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
}

.note-textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    min-height: 80px;
    resize: vertical;
}


.call-details-tab-button-group {
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
}

.call-details-tab-button {
    display: inline-block;
    padding: 8px 15px;
    font-weight: 500;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    cursor: pointer;
    outline: none;
    margin-right: -1px;
}

.call-details-tab-button:first-child {
    border-radius: 4px 0 0 4px;
}

.call-details-tab-button:last-child {
    border-radius: 0 4px 4px 0;
    margin-right: 0;
}

.call-details-tab-button.active {
    background-color: #fff;
    border-bottom-width: 2px;
    padding-bottom: 7px;
}


.topics-content span {
    font-size: 15px;
    font-weight: 400;
}

.call-details-tabs {
    margin-top: 30px;
    border-bottom: 1px solid #ddd;
}

.call-details-tabs a {
    display: inline-block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.call-details-tab-content {
    padding: 20px 0;
}

.call-details-note {
    margin-top: 30px;
}

.call-details-note h5 {
    font-weight: bold;
    margin-bottom: 10px;
}

.call-details-note textarea {
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
    min-height: 80px;
    resize: vertical;
}


.truncate-cell {
    max-width: 200px;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.table-fixed {
    table-layout: fixed;
}

/* Additional styles for Call Details modal */
.btn-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    padding: 6px 0;
    font-size: 18px;
}

.mt-2 {
    margin-top: 10px;
}

.mt-4 {
    margin-top: 20px;
}

.transcript-entry {
    flex: 1;
    min-width: 0;
}

.transcript-time {
    width: 50px;
    color: #777;
}


.transcript-text {
    flex: 1;
    min-width: 200px;
}

/* Transcript highlighting styles */
.transcript-word {
    display: inline-block;
    border-radius: 2px;
    padding: 1px;
    cursor: pointer;
}

.transcript-word.current {
    background-color: #ffc107;
    font-weight: bold;
}

.transcript-word.spoken {
    background-color: #fbff0c;
}


.transcript-speaker {
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
}

.transcript-message {
    display: inline;
    vertical-align: top;
}

a:focus {
  outline: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}

.copy-col {
  display: inline-flex !important;
  align-items: flex-start;
}

.copy-col p {
  min-width: 0;
  margin: 0;
}

.copy-col a {
  margin-left: 3px;
}

.probe-field-wrap {
    display: flex;
    align-items: center;
}

.probe-field-wrap .form-control {
    flex: 1;
    min-width: 0;
}

.probe-field-wrap .bw-probe-status {
    flex: 0 0 20px;
    width: 20px;
    align-self: stretch;
    margin-left: 8px;
    font-size: 18px;
    /* Cancel Bootstrap's ".glyphicon { position: relative; top: 1px }" (tuned for icons
       sitting inline with text) and the generic ".glyphicon { line-height: 16px }" override
       from earlier in this file — both fight the flex centering below. */
    position: static;
    top: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

#editModal .tooltip .tooltip-inner {
    max-width: 300px;
}

.badge-health-fail {
    background-color: #d9534f;
}

/* Temporarily forces an inactive Bootstrap tab-pane to report real layout dimensions
   (offsetWidth/offsetHeight > 0) so jQuery Validate's `ignore: ":hidden"` rule stops skipping
   its fields during a whole-form .valid() check, without actually showing it to the user —
   position:absolute takes it out of flow (no layout jump) and visibility:hidden keeps it unpainted.
   Used by validateAllTabsBeforeSave() in switches.html. */
#edit-form-panel .tab-pane.probe-validate-offscreen {
    display: block;
    position: absolute;
    visibility: hidden;
    left: -9999px;
    top: 0;
}

.tab-health-badge {
    font-size: 16px;
    vertical-align: middle;
}

.tab-health-badge.badge {
    font-size: 13px;
    padding: 3px 7px;
}

/* VF-4923 — CSS View Transitions API, portal-wide.

   This is the whole feature. Browsers without View Transitions ignore
   @view-transition and behave exactly as before.

   No element needs a view-transition-name. Everything is captured in the
   single default "root" snapshot, and the UA cross-fades it with
   mix-blend-mode: plus-lighter — which is mathematically lossless, so any
   region whose pixels are identical on both pages (top menu, side menu,
   tab strips, table headers) renders perfectly static, and total opacity
   never dips. Only genuinely different content visibly fades.

   Do NOT add view-transition-name to the chrome to "stabilise" it: naming
   pulls an element into its own group, whose UA animation interpolates
   size and position, so any geometry difference between two pages turns
   into a visible morph — that IS the jumping. Naming also makes the
   element a stacking context (it trapped the breadcrumb dropdown, and
   would paint Bootstrap modals under their own .modal-backdrop), and a
   name used twice in one document aborts the whole transition.

   Likewise do not override ::view-transition-old/new with custom keyframes:
   the UA animations carry the plus-lighter blend, and an "animation"
   shorthand replaces them, which makes the whole page flash toward the
   background mid-fade. */
@view-transition {
    navigation: auto;
}

/* The UA default cross-fade is only 250ms linear, which on a real server is
   invisible: the browser holds the frozen old page for the whole request
   (420-690ms measured on demo1) and then blinks to the new one. Stretching the
   fade to 450ms is what actually reads as a transition.

   Set animation-DURATION (longhand), never the `animation` shorthand. The
   shorthand replaces the UA animations outright, and one of them
   (-ua-mix-blend-mode-plus-lighter) is what keeps the cross-fade lossless;
   losing it makes the page dip toward the background mid-fade. The longhand
   retimes the UA animations and leaves the blend in place — verified in-browser:
   both plus-lighter animations survive and every animation reports 450ms.

   Old and new must keep the SAME duration and easing. Their opacity curves are
   1 -> 0 and 0 -> 1 through the same function, so they sum to exactly 1 at
   every instant; different timings on the two would break that and reintroduce
   the dip. No transform here either — translating the root snapshot moves the
   whole viewport image, chrome included, which is what read as jumping. */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 450ms;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* showSpinner() (common-functions.js) appends a 30%-black blocking backdrop
   plus the shared spin.js ring to <body> on click, so every navigation used
   to darken the page for the server round-trip and snap bright again on
   arrival. Hold both invisible for 1s, then fade in over 200ms: normal
   navigations never paint them (and so never capture them into the
   transition snapshot either), genuinely slow operations still get their
   spinner, softly.

   The 1s threshold is measured, not arbitrary. Page loads on demo1 run
   420-690ms (responseEnd 420/512/516/612ms, domInteractive up to 690ms) —
   a shorter hold expires mid-navigation, so the spinner fades in just
   before the swap and reads as a dark pulse. Local loads are ~150ms and
   never reached it, which is why this only showed up once deployed. 1s is
   also the conventional threshold below which a wait needs no spinner.
   Raise this if a slower environment shows the pulse again; do not lower
   it below the environment's typical page load.

   filter:opacity() rather than the opacity property because .spin sets
   "opacity: .3 !important" and an animation cannot override !important;
   rather than visibility because a visibility:hidden backdrop stops
   intercepting clicks, and blocking double-clicks from t=0 is its job.
   filter changes rendering only — hit-testing is unaffected. */
#spinner-fade,
body > .spinner {
    animation: portal-spinner-delayed-reveal 1200ms linear both;
}

@keyframes portal-spinner-delayed-reveal {
    0%, 83.33% {
        filter: opacity(0);
    }
    100% {
        filter: opacity(1);
    }
}