.theme-light {
    --color-signature: #7058b7;
    --color-signature-dark: #6B54A5;
    --color-header: #ffffff;
    --color-body-background: #EBEDEF;
    --color-block-container: #ffffff;
    --color-left-menu-header: #644ca9;
    --color-input-background: #ffffff;
    --color-lan-ddl-border: #ffffff;
    --color-lan-ddl-outer-border: #c4c7cc;
    --color-label: #5e5e5e;
    --color-menu-hover: #e8eaed;
    --color-dots-black: #7058b7;
    --color-avatar: #2570e0;
    --color-dots-hover: #e8eaed;
    --color-menu-icon-labels: #333333;
    --color-svg-signature-fill: #7058b7;
    --color-menu-line: #B2BBC3;
    --color-input-border: #dbdbdb;
    --color-left-menu-hover: #503994;
    --color-black-and-white: black;
    --color-login-background: #f9f9f9;
    --color-context-menu-border: #DADCE0;
    --color-svg-white: #ffffff;
    --color-footer-border: #c8ced3;
    --color-table-header: #7058b7;
    --color-rod-table-line: #DADCE0;
    --lang-arrow: url("../Images/Icons/arrow.svg");
    --color-disbaled: #bcc3ca;
    --color-player-slider-line: #EBEDEF;
    --color-player-background: #D7D8D9;
    --color-context-menu-split: #f4f4f4;
    --color-context-menu-disbaled: rgb(160, 160, 160);
    --icon-Play: url(../../images/Icons/SearchResults/PlayContextMenu/Play.svg);
    --icon-PlayInPopUp: url(../../images/Icons/SearchResults/PlayContextMenu/playPopUp.svg);
    --icon-PlayAll: url(../../images/Icons/SearchResults/PlayContextMenu/playAll.svg);
    --icon-PlaySelected: url(../../images/Icons/SearchResults/PlayContextMenu/playFileSelect.svg);
    --icon-DownloadCDR: url(../../images/Icons/SearchResults/PlayContextMenu/downloadCDR.svg);
    --icon-DownloadFile: url(../../images/Icons/SearchResults/PlayContextMenu/downloadFile.svg);
    --icon-DownloadSelectedFiles: url(../../images/Icons/SearchResults/PlayContextMenu/downloadSelectFile.svg);
    --icon-EmailFile: url(../../images/Icons/SearchResults/PlayContextMenu/emailFile.svg);
    --icon-DoNotArchive: url(../../images/Icons/SearchResults/PlayContextMenu/nozip.svg);
    --icon-CanBeArchive: url(../../images/Icons/SearchResults/PlayContextMenu/zip.svg);
    --icon-Restore: url(../../images/Icons/SearchResults/PlayContextMenu/restore.svg);
    --icon-VerifySignature: url(../../images/Icons/SearchResults/PlayContextMenu/signature.svg);
    --icon-UpdateCustomField: url(../../images/Icons/SearchResults/PlayContextMenu/update_Custom_Field.svg);
    --icon-QMScored: url(../../images/Icons/SearchResults/PlayContextMenu/qmScore.svg);
    --icon-GlobalCallID: url(../../images/Icons/SearchResults/PlayContextMenu/i1_fill.svg);
    --icon-CorrelatorID: url(../../images/Icons/SearchResults/PlayContextMenu/i2_fill.svg);
    --icon-ChannelID: url(../../images/Icons/SearchResults/PlayContextMenu/i3_fill.svg);
    --icon-Collapse: url(../../images/Icons/SearchResults/PlayContextMenu/collapse.svg);
    --icon-UpdateSelected: url(../../images/Icons/SearchResults/PlayContextMenu/UpdateSelected.svg);
    --icon-ViewNotes: url(../../images/Icons/SearchResults/PlayContextMenu/viewNotes.svg);
    --icon-AddNotes: url(../../images/Icons/SearchResults/PlayContextMenu/addNote.svg);
    --icon-EmailNotes: url(../../images/Icons/SearchResults/PlayContextMenu/emailFile.svg);
    --icon-DownloadNotes: url(../../images/Icons/SearchResults/PlayContextMenu/downloadFile.svg);
    --icon-DeleteSelected: url(../../images/Icons/SearchResults/PlayContextMenu/deleteSelected.svg);
    --icon-RemoveFlag: url(../../images/Icons/SearchResults/PlayContextMenu/cross.svg);
    --color-button-background: #7058b7;
    --color-button-border: #7058b7;
    --color-alertbox-border: #7058b7;
    --color-pageheading: #7058b7;
    --color-left-menu-background: #7058b7;
    --color-page-loading-background: #ffffff;
    --color-title-bar: #7058b7;
    --color-opr-logo-fill: #A1A0A1;
    --color-opr-logo-fill2: #231F20;
    --context-menu-shadow: .175;
    --color-input-disbaled: #E9E6E5;
    --color-purplelicense-tile: #EBEDEF;
    --color-purplelicense-header: #ededed;
    --color-purplelicense-border: #EBEDEF;
    --color-purplelicense-headings: #6B54A5;
    --color-scrollbar: #b9b9bc;
    --color-calendar-border: #c5c5c5;
    --color-calendar-background: #f6f6f6;
    --color-calendar-text: #454545;
    --color-calendar-hover-background: #ededed;
    --color-calendar-hover-border: #cccccc;
    --color-calendar-hover-text: #2b2b2b;
    --color-purplelicense-popup-border: #EBECEC;
    --color-popup-overlay: #ffffff;
    --color-qm-dashboard-header: Gray;
    --color-qm-dashboard-border: #aaaaaa;
    --color-player-range-disabled: #CECCCC;
    --color-button-disabled-background: #d1d1d1;
    --color-button-disabled-border: #f7f7f7;
    --color-button-disabled-text: rgba(159, 159, 159, 1);
    --color-input-disabled-text: #5e5e5e;
    --color-speechanalytics-opacity: 0.5;
    --color-speechanalytics-heading-disabled: #AEAEAE;
    --color-qm-scorecard-header: #cfcfd2;
    --color-qm-scorecard-splitter: black;
    --color-opr-logo-fill3: #231F20;
    --color-purple-license-tile-disabled: #dcdfe3;
    --color-purple-label-disabled: #F2F2F2;
    --color-purple-circle-label-disabled: #C9C9C9;
    --color-purple-circle-disabled: #F2F2F2;
    --color-file-upload-background: #D4D0C8;
    --color-rod-heading-disabled: #e5e5e5;
    --icon-NoFlag: url(../../images/ImageButton/8.png);
    --color-rod-cluster-disabled: #D8DADD;
    --search-bg-color: #d8dce1;
    --color-popup-docs-overlay: rgba(255, 255, 255, 0.8);
    --color-button-playlist: #7058b7;
    --icon-PlayList: url(../../images/Icons/SearchResults/PlayContextMenu/AddCallPlayList.svg);
    --icon-ShareCall: url(../../images/Icons/SearchResults/PlayContextMenu/ShareCall.svg);
    --icon-UnShareCall: url(../../images/Icons/SearchResults/PlayContextMenu/UnshareCall.svg);
    --icon-ViewCategory: url(../../images/Icons/SearchResults/PlayContextMenu/ViewCategory.svg);
    --icon-ViewSentiment: url(../../images/Icons/SearchResults/PlayContextMenu/ViewSentiment.svg);
    --icon-ViewCategory: url(../../images/Icons/SearchResults/PlayContextMenu/ViewCategory.svg);
    --icon-ViewSentiment: url(../../images/Icons/SearchResults/PlayContextMenu/ViewSentiment.svg);
    --icon-ViewCallSummary: url(../../images/Icons/SearchResults/PlayContextMenu/ViewCallSummary.svg);
    --color-ai-disclaimer: #ecedef;
    --workflow-menu-panel-border: "#dcdcdc";
    --color-signature-all: #7058b7;
    --color-chat-border: #ccd2d6;
    --color-svg-focus-visible: #333;
}

.theme-dark {
    --color-signature: #333539;
    --color-signature-dark: #060709;
    --color-header: #181b23;
    --color-body-background: #000000;
    --color-block-container: #181b23;
    --color-left-menu-header: #060709;
    --color-input-background: #0f1118;
    --color-lan-ddl-border: #26272B;
    --color-lan-ddl-outer-border: #0f1118;
    --color-label: #ffffff;
    --color-menu-hover: #4b4e53;
    --color-dots-black: #ffffff;
    --color-avatar: #7058b7;
    --color-dots-hover: #4b4e53;
    --color-menu-icon-labels: #ffffff;
    --color-svg-signature-fill: #ffffff;
    --color-menu-line: #ffffff;
    --color-input-border: #0f1118;
    --color-left-menu-hover: #7058b7;
    --color-black-and-white: #ffffff;
    --color-login-background: #12151b;
    --color-context-menu-border: #0c0e12;
    --color-svg-white: #ffffff;
    --color-footer-border: #181b23;
    --color-table-header: #0c0e12;
    --color-rod-table-line: #0c0e12;
    --lang-arrow: url("../Images/Icons/arrow-gray.svg");
    --color-disbaled: #2a2e39;
    --color-player-slider-line: #060709;
    --color-player-background: #060709;
    --color-context-menu-split: #0c0e12;
    --color-context-menu-disbaled: #46494e;
    --icon-Play: url(../../images/Icons/SearchResults/PlayContextMenu/Play_Dark.svg);
    --icon-PlayInPopUp: url(../../images/Icons/SearchResults/PlayContextMenu/playPopUp_Dark.svg);
    --icon-PlayAll: url(../../images/Icons/SearchResults/PlayContextMenu/playAll_Dark.svg);
    --icon-PlaySelected: url(../../images/Icons/SearchResults/PlayContextMenu/playFileSelect_Dark.svg);
    --icon-DownloadCDR: url(../../images/Icons/SearchResults/PlayContextMenu/downloadCDR_Dark.svg);
    --icon-DownloadFile: url(../../images/Icons/SearchResults/PlayContextMenu/downloadFile_Dark.svg);
    --icon-DownloadSelectedFiles: url(../../images/Icons/SearchResults/PlayContextMenu/downloadSelectFile_Dark.svg);
    --icon-EmailFile: url(../../images/Icons/SearchResults/PlayContextMenu/emailFile_Dark.svg);
    --icon-DoNotArchive: url(../../images/Icons/SearchResults/PlayContextMenu/nozip_Dark.svg);
    --icon-CanBeArchive: url(../../images/Icons/SearchResults/PlayContextMenu/zip_Dark.svg);
    --icon-Restore: url(../../images/Icons/SearchResults/PlayContextMenu/restore_Dark.svg);
    --icon-VerifySignature: url(../../images/Icons/SearchResults/PlayContextMenu/signature_Dark.svg);
    --icon-UpdateCustomField: url(../../images/Icons/SearchResults/PlayContextMenu/update_Custom_Field_Dark.svg);
    --icon-QMScored: url(../../images/Icons/SearchResults/PlayContextMenu/qmScore_Dark.svg);
    --icon-GlobalCallID: url(../../images/Icons/SearchResults/PlayContextMenu/i1_fill_Dark.svg);
    --icon-CorrelatorID: url(../../images/Icons/SearchResults/PlayContextMenu/i2_fill_Dark.svg);
    --icon-ChannelID: url(../../images/Icons/SearchResults/PlayContextMenu/i3_fill_Dark.svg);
    --icon-Collapse: url(../../images/Icons/SearchResults/PlayContextMenu/collapse_Dark.svg);
    --icon-UpdateSelected: url(../../images/Icons/SearchResults/PlayContextMenu/UpdateSelected_Dark.svg);
    --icon-ViewNotes: url(../../images/Icons/SearchResults/PlayContextMenu/viewNotes_Dark.svg);
    --icon-AddNotes: url(../../images/Icons/SearchResults/PlayContextMenu/addNote_Dark.svg);
    --icon-EmailNotes: url(../../images/Icons/SearchResults/PlayContextMenu/emailFile_Dark.svg);
    --icon-DownloadNotes: url(../../images/Icons/SearchResults/PlayContextMenu/downloadFile_Dark.svg);
    --icon-DeleteSelected: url(../../images/Icons/SearchResults/PlayContextMenu/deleteSelected_Dark.svg);
    --icon-RemoveFlag: url(../../images/Icons/SearchResults/PlayContextMenu/cross_Dark.svg);
    --color-button-background: #7058b7;
    --color-button-border: #7058b7;
    --color-alertbox-border: #0c0e12;
    --color-pageheading: #181b23;
    --color-left-menu-background: #0f1117;
    --color-page-loading-background: #ffffff;
    --color-title-bar: #7058b7;
    --color-opr-logo-fill: #ffffff;
    --color-opr-logo-fill2: #ffffff;
    --context-menu-shadow: .37;
    --color-input-disbaled: #2a2e39;
    --color-purplelicense-tile: #0f1118;
    --color-purplelicense-header: #0c0e12;
    --color-purplelicense-border: #0c0e12;
    --color-purplelicense-headings: #ffffff;
    --color-scrollbar: #181b23;
    --color-calendar-border: #0c0e12;
    --color-calendar-background: #181b23;
    --color-calendar-text: #ffffff;
    --color-calendar-hover-background: #7058b7;
    --color-calendar-hover-border: #0c0e12;
    --color-calendar-hover-text: #ffffff;
    --color-purplelicense-popup-border: #0c0e12;
    --color-popup-overlay: #24262a;
    --color-qm-dashboard-header: #0c0e12;
    --color-qm-dashboard-border: #0c0e12;
    --color-player-range-disabled: #2b303c;
    --color-button-disabled-background: #2a2e39;
    --color-button-disabled-border: #2a2e39;
    --color-button-disabled-text: rgb(75 77 81);
    --color-input-disabled-text: rgb(75 77 81);
    --color-speechanalytics-opacity: 1;
    --color-speechanalytics-heading-disabled: rgb(75 77 81);
    --color-qm-scorecard-header: #0c0e12;
    --color-qm-scorecard-splitter: #c4c7cc;
    --color-opr-logo-fill3: #ffffff;
    --color-purple-license-tile-disabled: #2a2e39;
    --color-purple-label-disabled: rgb(75 77 81);
    --color-purple-circle-label-disabled: rgb(75 77 81);
    --color-purple-circle-disabled: #2a2e39;
    --color-file-upload-background: #0f1118;
    --color-rod-heading-disabled: #2a2e39;
    --icon-NoFlag: url(../../images/ImageButton/8MO.png);
    --color-rod-cluster-disabled: rgb(75 77 81);
    --color-popup-docs-overlay: rgba(36, 38, 42, 0.8);
    --color-button-playlist: #ffffff;
    --icon-PlayList: url(../../images/Icons/SearchResults/PlayContextMenu/AddCallPlayList_Dark.svg);
    --icon-ShareCall: url(../../images/Icons/SearchResults/PlayContextMenu/ShareCall_Dark.svg);
    --icon-UnShareCall: url(../../images/Icons/SearchResults/PlayContextMenu/UnshareCall_Dark.svg);
    --icon-ViewCategory: url(../../images/Icons/SearchResults/PlayContextMenu/ViewCategory_Dark.svg);
    --icon-ViewSentiment: url(../../images/Icons/SearchResults/PlayContextMenu/ViewSentiment_Dark.svg);
    --icon-ViewCallSummary: url(../../images/Icons/SearchResults/PlayContextMenu/ViewCallSummary_Dark.svg);
    --color-ai-disclaimer: #0c0e12;
    --workflow-menu-panel-border: "#dcdcdc";
    --color-signature-all: #7058b7;
    --color-chat-border: #0c0e12;
    --color-svg-focus-visible: #5d479d;
}

#MasterPageMainTable {
    padding-top: 0% !important;
    padding-bottom: 0px;
    width: 100% !important;
    margin: 0 auto;
    flex-shrink: 1;
    flex-grow: 1;
    height: 100vh;
}

a:hover {
    color: var(--color-label);
    text-decoration: none;
}

.floatright {
    float: right;
}

.floatleft {
    float: left !important;
}

.margin10 {
    margin: 10px !important;
}

.marginsubitem {
    margin: 10px !important;
}

.MenuHeader {
    background-color: #644ca9 !important;
    height: 40px !important;
    width: 100% !important;
    padding: 0px 7px 0px 5px !important;
}

.CenterPageCaption {
    padding-top: 10px !important;
}

.SubItem a {
    height: 15px;
    font: 0.688rem Verdana, Tahoma, Arial;
    text-decoration: none;
    color: #ffffff;
}

    .SubItem a:hover {
        color: #ffffff;
    }

.texttransparent {
    color: #ffffff;
}

.SubItem {
    text-align: left;
    vertical-align: middle;
    padding: 10px 0px 0px 10px !important;
    display: flex;
    align-items: center;
}

.TopHeader {
    background-repeat: no-repeat;
    width: 100% !important; /*width:1224px; to 100% BY AB*/
    height: 116px;
    margin-left: 215px; /*new after fixing top header*/
    position: fixed; /*new after fixing top header*/
}

.MiddleRow {
    border: none !important;
    /*height: 350px;*/
    /* width:-webkit-fill-available !important; */ /*width:1224px; to 100% BY AB*/
    width: 100% !important; /*Added After moved to top BY AB*/
    margin-top: 62px; /*Added After moved to top BY AB*/
}

.RightBodySection {
    border: 1px solid #D6D4D5;
    width: 100%;
    height: 100%;
    /* width:996px; */
    padding: 10px;
    padding-right: 10px;
    background-color: White;
}

a {
    color: var(--color-label);
    text-decoration: none;
    FONT-SIZE: 0.813rem;
    font-weight: bold;
    FONT-FAMILY: 'Arial';
    cursor: pointer;
}

.TopHeaderMiddle {
    background-color: White;
    /* width:350px; */ /*width:230px; to 350px BY AB*/
    width: 100% !important;
    height: 116px;
}

/*td {
    FONT-FAMILY: 'Arial' !important;
    FONT-SIZE: 9pt !important;
}*/

.width200 {
    width: 200px !important;
}

.footercss {
    background-color: white;
    bottom: 0px;
    width: 100%;
    position: fixed;
    width: -webkit-fill-available;
    margin-left: 215px;
}

.LeftMenuSection {
    /* margin-bottom: 35px !important; */
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    position: fixed; /*new*/
    overflow-y: auto; /*new*/
    height: -webkit-fill-available; /*new*/
    overflow-x: hidden; /*new*/
    background-color: #6B54A5; /*new*/
}

body {
    /*background-color: white !Important;*/
    z-index: 999999;
    FONT-FAMILY: 'Arial';
    FONT-SIZE: 0.813rem;
}

.inner-div {
    float: left;
    width: calc(100% - 215px); /*new commented*/
    width: 100%;
    height: 100%;
    padding-left: 215px; /*new*/
    margin-top: 116px; /*new after fixing top header*/
}

@media(max-width: 767px) {
    .inner-div {
        width: 100%;
        padding-left: 0px;
    }

    .LeftMenuSection {
        display: none
    }

    .TopHeader {
        margin-left: 0px;
    }

    .footercss {
        margin-left: 0px;
    }
}
/*Borders Hide BY AB*/
.LeftMenuSection {
    border: none !important;
}

.RightBodySection {
    border: none !important;
}
/*Overflow Styling Start*/
.overflow {
    overflow: auto;
}

::-webkit-scrollbar {
    width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #644ca9;
}
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #644ca9;
    }

.main .container-fluid {
    padding-bottom: 30px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y {
    width: 6px !important;
    background-color: #999;
}

.ps__rail-y {
    position: absolute;
    right: 0;
    display: none;
    width: 8px !important;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
}
/*Overflow Styling End*/
.minimizer {
    position: fixed;
    bottom: 0px;
    width: 215px;
    cursor: pointer;
    vertical-align: middle;
    padding: 0px 7px 0px 5px !important;
    background-color: #644ca9 !important;
    height: 40px !important;
}

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

.lblwidth100 {
    width: 100px;
}

.lblwidth150 {
    width: 150px;
}

.title {
    color: var(--color-label) !important;
    font-size: 0.813rem;
    font-weight: bold;
    padding-left: 11px;
}

.company-container .title > label {
    cursor: pointer;
}

.title-bar {
    background-color: var(--color-title-bar) !important;
    height: 2px;
    margin-left: 9px;
    width: 100px;
}

.bgcolor {
    background-color: transparent;
}

label {
    FONT-FAMILY: 'Arial' !important;
    FONT-SIZE: 0.813rem !important;
    font-weight: unset;
}

/*td,
th {
    padding: unset;
}

table {
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
}*/

#ContentPlaceHolder {
    background-color: unset;
}

.margin103 {
    margin-left: 103px;
}

.margin153 {
    margin-left: 153px;
}

.margin30 {
    /*margin: 20px;*/
    margin0px;
}

.margintop5 {
    margin-top: 5px;
}

.gridcontainer {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.boxshadowradius {
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%), 0 2px 2px rgb(0 0 0 / 10%);
    border-radius: 7px;
    background-color: var(--color-block-container);
    overflow: auto;
}

textarea:focus, input[type=text]:focus {
    outline: none;
    /*border: none;
    border-bottom: 1px solid #ebedef;*/
}
 

[type="search"] {
    outline-offset: unset;
    border-radius: 4px;
    border: 1px solid var(--color-input-border);
    height: 27px;
}

.updatebutton {
    background-color: var(--color-button-background);
    border: 1px solid var(--color-button-border);
    color: var(--color-svg-white);
    min-width: 70px;
    height: 30px;
    border-radius: 3px;
    cursor: pointer;
    padding: 1px 10px;
    font-size: 0.813rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: none;
    transition: all 0.3s ease;
    /*margin-left: 5px;*/
}

.updatebuttonjobs {
    background-color: var(--color-button-background);
    border: 1px solid var(--color-button-border);
    color: var(--color-svg-white);
    /* min-width: 70px; */
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    /* padding: 1px 10px; */
    font-size: 0.813rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: none;
    transition: all 0.3s ease;
    /* margin-left: 5px; */
}

.aligndisplay {
    align-items: center;
    display: inline-flex;
}

.marginleft10 {
    margin-left: 10px;
}

.textbox {
    margin-bottom: 0.5rem;
}

@media (min-width: 500px) {
    .cpwidth {
        width: 20%;
    }

    .margin153 {
        margin-left: 0px;
    }

    .doubleConatinerBlockLeft {
        padding: 0px !important;
    }

    .doubleConatinerBlockRight {
        padding: 0px !important;
    }

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

@media (max-width: 500px) {

    .hide-container {
        display: none;
    }

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

    .profile-tile-padding-top {
        padding-top: 10px !important;
    }

    .profile-tile-outer-padding-top {
        padding-top: 0px !important;
    }
}


@media (max-width: 768px) {

    .hide-container {
        display: none;
    }

    .system-audit-config .right-child-small-screen
    {
        margin-top: 30px !important;
    }

    .system-audit-config .left-child
    {
        margin-right: 0px !important;
    }

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

    .profile-tile-padding-top {
        padding-top: 10px !important;
    }

    .profile-tile-outer-padding-top {
        padding-top: 0px !important;
    }
}

@media (max-width: 992px) {

    .player-vertical-dots-container {
        display: none !important;
    }

    .player-dimensions {
        width: 100% !important;
    }

    .player-holder-padding-right {
        padding-right: 10px !important
    }

    .license-text-align {
        text-align: left !important;
    }

    .license-button-align {
        text-align: left !important;
    }

    .profile-tile-outer-padding-top {
        padding-top: 10px;
    }

    .profile-large-tile-padding-top {
        padding-top: 20px !important;
    }
}

@media (max-width: 1200px) {

}

@media (max-width: 1391px) {

    .hide-search-container {
        display: none;
    }

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

.license-text-align {
    text-align: center
}

.license-button-align {
    text-align: right;
}

@media (min-width: 768px) {
    .cpwidth {
        width: 100%;
    }

    .margin153 {
        margin-left: 153px;
    }

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

    .doubleConatinerBlockLeft {
        padding: 0px !important;
    }

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

@media (min-width: 992px) {
    .cpwidth {
        width: 100%;
    }

    .margin153 {
        margin-left: 153px;
    }

    .playerInfoHeight {
        height: 415px;
    }

    .paddingPlayerInfoRows {
        padding-bottom: 20px;
    }

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

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

    .license-hide-container {
        display: none;
    }
}

@media (min-width: 1200px) {
    .cpwidth {
        width: 100%;
    }

    .margin153 {
        margin-left: 153px;
    }

    .playerInfoHeight {
        height: 415px;
    }

    .paddingPlayerInfoRows {
        padding-bottom: 20px;
    }

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

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

    .search-criteria-flex {
        display: flex;
    }

    .license-hide-container {
        display: none;
    }
}

.trunkpacketizeroutline {
    display: flex;
    flex-direction: column;
    overflow: auto;
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-right: 10px;
}

.NoteText {
    margin-left: 10px;
}

.lblwidth130 {
    width: 130px;
}

/*.lblwidth200 {
    width: 200px;
}*/

input[type=password]:focus {
    outline: none;
    /*border: none;
    border-bottom: 1px solid #ebedef;*/
}

.btn-disable {
    color: var(--color-button-disabled-text);
    background-color: var(--color-button-disabled-background);
    border: 1px solid var(--color-button-disabled-border);
    min-width: 70px;
    height: 30px;
    border-radius: 3px;
    cursor: pointer;
    padding: 1px 10px;
    font-size: 0.813rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: none;
    transition: all 0.3s ease;
}

.margin30 {
    margin: 0px;
}

/*.lblwidth200 {
    width: 200px;
}*/

.lblwidth250 {
    width: 250px;
}

.lblwidth300 {
    width: 300px;
}

.marginleft220 {
    margin-left: 220px;
}

.displayinlineflex {
    display: inline-flex !important;
}

.lblwidth175 {
    width: 175px;
}

.checkbox-label-height {
    height: 27px;
}
/*.CollapseHeaderPurple {
    border-radius: 5px !important;
}*/

hr {
    margin-top: 0px !important;
    margin-bottom: 0.5rem !important;
}

/*Fahad*/
:root {
    --size-tiny: 1rem;
    --size-tiny-standard: 1.1rem;
    --size-tiny-plus: 1.2rem;
    --size-tiny-big: 1.3rem;
    --size-base: 1.4rem;
    --size-base-standard: 1.5rem;
    --size-base-plus: 1.6rem;
    --size-base-big: 1.7rem;
    --size-medium: 1.8rem;
    --size-medium-standard: 1.9rem;
    --size-medium-plus: 2.0rem;
    --size-medium-plus-a: 2.3rem;
    --size-large: 2.4rem;
    --size-large-plus: 2.8rem;
    --size-extra: 3.2rem;
    --size-extra-plus: 3.6rem;
    /* COLOR SCHEMES */
    --base-black: #5e5e5e;
    --base-color: #2570e0;
    --base-text-color: #5e5e5e;
    --text-black-white: #fff;
    --text-white-silver: #fff;
    --base-selected-text-color: #fff;
    --gradient-inner-color: hsla(0, 0%, 100%, 0);
    --base-dropdown-background: #fff;
    --base-dropdown-background2: #fff;
    --base-dropdown-li-hover: #e8eaed;
    --dot-svg-hover: #e8eaed;
    --selected-svg-fill: #fff;
    --base-svg-fill: #5e5e5e;
    --svg-background: #1a59b7;
    --dropdown-svg-fill: #5e5e5e;
    --topbar-search-background: #ececec;
    --topbar-background: #fff;
    --topbar-speaker: #5e5e5e;
    --line-separator: #dee0e3;
    --search-svg-fill: #5e5e5e;
    --left-panel-main-heading: #2570E0;
    --left-panel-courses-heading: #f4f4f4;
    --left-panel-conversation-hover: #f8f8f8;
    --left-panel-draggable: #d1d1d1;
    --home-background: #e8eaed;
    --bubbles-header: #e8eaed;
    --bubble-body: #fff;
    --svg-toggler: #f8f8f8;
    --file-background: #b8c2db;
    --file-detail-body: #f8f8f8;
    --files-detail-hover: #dee0e3;
    --files-tab-hover: #e8eaed;
    --bubble-detail-svg: #5e5e5e;
    --seacrh-body: transparent;
    --conversation-tab: #f8f8f8;
    --conversation-tab-secondary: #f8f8f8;
    --tab-button: #B9C0C2;
    --message-others: #fff;
    --call-background: #dcdee1;
    --datatable-background: #fff;
    --datatable-inner: #fff;
    --datatable-inner-border: #dbdbdb;
    --datatable-tr: #fff;
    --datatable-input-border: #dbdbdb;
    --datatable-background-border: #dbdbdb;
    --attendance-border: #cecece;
    --attendance-background: #fff;
    --line-separator-attendance: #dbdbdb;
    --graph-background: #fff;
    --absent-student-bar: #dbdbdb;
    --present-student-bar: #fff;
    --present-information-hover: #e2e2e2;
    --top-overlay-background: #8e8e93;
    --inner-svg-fill: #fff;
    --topoverlay-text: #fff;
    --modal-footer: #e8eaed;
    --modal-footer-button-border: #2570E0;
    --modal-footer-button-background: transparent;
    --modal-footer-button-text: #2570E0;
    --hover-modal-button: #2570E0;
    --hover-modal-text: #fff;
    --modal-input-border: #cecece;
    --modal-input-background: #fff;
    --modal-disabled-button: #fff;
    --searched-list-bakground: #fff;
    --create-new-title: #989898;
    --warning-message: #721c24;
    --disabled-background: #e5e6ea;
    --disabled-button-border: #B5A9A9;
    --disabled-button-text: #B5A9A9;
    --disabled-text: #5e5e5e;
    --search-bar-basic: #fff;
    --login-left-container: rgb(37 112 224 / 80%);
    --login-right-container: #fff;
    --login-text-fields: #fff;
    --jquery-modal-body: #f8f8f8;
    --jquery-modal-footer: #e8eaed;
    --jquery-modal-button: #fff;
    --jquery-orange: orange;
    --jquery-orange-border: orange;
    --jquery-orange-button-hover: orange;
    --jquery-red: red;
    --jquery-red-border: red;
    --jquery-red-button-hover: red;
    --jquery-green: green;
    --jquery-green-border: green;
    --jquery-green-button-hover: green;
    --jquery-blue: blue;
    --jquery-blue-border: blue;
    --jquery-blue-button-hover: blue;
    --silver-white-svg: #fff;
    --radius-background: #2570E0;
    --slide-1: url('../../../assets/img/welcome/school_watermark.png');
    --slide-2: url('../../../assets/img/welcome/home_footer.png');
    /* by MOT for Dashboard */
    --dashboardiconscolor: #2570e0;
    --dashboardpadding: 9px !important;
    --loading-background: #2570e0;
    --lan-ddl-hover-text-color: #5e5e5e;
    --lan-ddl-active-text-color: white;
    --lan-ddl-child-bg: white;
    --lan-ddl-title-bg: white;
    --arrow-svg-ddl-size: 10px;
    --lan-ddl-li-hover: #e8eaed;
    --lan-ddl-border: #c4c7cc;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    opacity: 0;
}


/* Track */

::-webkit-scrollbar-track {
    background: hsla(0, 0%, 100%, 0);
}


/* Handle */

::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
    border-radius: 1px;
}


    /* Handle on hover */

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-scrollbar);
    }

div:hover > ::-webkit-scrollbar {
    opacity: 1;
}

#app-container {
    height: 100%;
    width: 100%;
    display: flex;
    box-sizing: border-box;
}

.right-container {
    width: 100%;
    background-color: var(--color-body-background);
    flex-shrink: 1;
    flex-grow: 1;
    min-height: 100vh;
}

.left-menu {
    width: 100%;
    z-index: 1001;
    height: 100vh;
}

.left-menu-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 106px);
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
}

    .left-menu-scroll::-webkit-scrollbar {
        display: none;
    }

#Content-Place-Holder {
    width: 100%;
    display: block;
    overflow: auto;
    height: calc(100% - 182px) !important;
    background-color: none !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    /*overflow-x:hidden;*/
}


.page-heading {
    margin: 20px;
    width: calc(100%-40px);
    background-color: var(--color-pageheading);
    border-radius: 5px;
}

    .page-heading .content {
        color: var(--color-svg-white);
        display: flex;
        justify-content: space-between;
        height: 36px;
        align-items: center;
        padding: 5px;
        padding-left: 20px;
    }

        .page-heading .content .first {
            display: flex;
            align-items: center;
        }

        .page-heading .content svg {
            fill: var(--color-svg-white);
            height: 20px;
            width: 20px;
            margin-right: 10px;
        }

.alcatel-logo {
    height: 70px;
    padding: 10px;
    display: flex;
    justify-content: center;
}

.alcatel-logo--vertical-align {
    /*display: flex;
    align-items: center*/
}

.left-menu .alcatel-logo svg {
    width: 180px;
    height: 40px
}

.left-menu .menu-header {
    background-color: var(--color-left-menu-header) !important;
    height: 36px;
    width: 100%;
    padding: 10px 20px 10px 20px;
    color: var(--color-svg-white);
    font-weight: 400;
    cursor: pointer;
    margin-bottom: 2px;
}

.left-menu-header {
    padding: 10px 18px 10px 12px !important;
}

.left-menu .menu-header .content {
    display: flex;
    justify-content: space-between;
}

    .left-menu .menu-header .content .second {
        padding-top: 7px;
        margin-left: 6px;
    }

        .left-menu .menu-header .content .second svg {
            height: 6px;
            width: 10px;
            fill: #ffffff;
        }

    .left-menu .menu-header .content svg {
        height: 24px;
        width: 24px;
        fill: var(--color-svg-white) !important;
    }

.left-menu-heading-svg {
    position: relative;
    bottom: 4px;
}

.left-container .menu-footer .content svg {
    height: 8px;
    width: 14px;
    fill: var(--color-svg-white) !important;
}

.left-container .menu-footer {
    background-color: var(--color-left-menu-header) !important;
    height: 36px;
    width: 220px;
    padding: 16px 20px 10px 20px;
    color: #ffffff;
    font-weight: 400;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 99;
    /*transition: 0.2s ease-in-out;*/
    cursor: pointer;
}

.simple-flex {
    display: flex;
}

.left-container .menu-footer .content {
    display: flex;
    justify-content: flex-end;
}

    .left-container .menu-footer .content .second {
        /*padding-top: 7px;*/
    }

.menu-footer-content {
    justify-content: center !important;
}

.left-menu .menu-block {
    /*border: 1px solid transparent !important;*/
    background-color: var(--color-left-menu-background);
    border-top: 0px;
}

    .left-menu .menu-block .item {
        padding: 8px;
    }

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

.left-menu .menu-block .sub-item a {
    /*margin-left: 16px;*/
    font: 0.688rem Verdana, Tahoma, Arial;
    text-decoration: none;
    color: var(--color-svg-white) !important;
}

.left-menu .menu-block .sub-item .left-menu-text {
    padding-left: 16px
}


.left-menu .menu-block .sub-item a:hover {
    /*color: #ffffff;*/
}

.left-menu .menu-block .sub-item {
    height: 36px;
    padding: 6px 12px 6px 12px;
    text-align: left;
    vertical-align: middle;
    display: flex;
    align-items: center;
    cursor: pointer;
    outline:none
}

    .left-menu .menu-block .sub-item:hover {
        background-color: var(--color-left-menu-hover);
        border-radius: 5px;
    }

    .left-menu .menu-block .sub-item:focus {
        background-color: var(--color-left-menu-hover);
        border-radius: 5px;
    }

    .left-menu .menu-block .sub-item svg {
        height: 24px;
        width: 24px;
        fill: var(--color-svg-white) !important;
    }

.transform-arrow {
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.transform-arrow-90 {
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.transform-arrow-90-padding {
    margin-bottom: 7px;
    margin-left: 5px !important;
}

.display-none {
    display: none;
}

.import-grid-row {
    border-bottom: 1px solid var(--color-context-menu-border);
    height: 30px;
}

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

.left-container {
    width: 220px;
    background-color: var(--color-left-menu-background);
    flex-shrink: 0;
    flex-grow: 0;
    min-height: 100vh;
    /*transition: 0.2s ease-in-out;*/
}

.left-container-collapsed {
    width: 64px !important;
}

.left-menu-text-collapsed {
    display: none;
    transition: 0.3s ease-in-out;
}


.header {
    height: 70px;
    width: 100%;
    background-color: var(--color-header);
    display: flex;
    align-items: center;
    padding-left: 30px;
    padding-right: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    flex-grow: 0;
}

    .header .menu-line {
        height: 14px;
        width: 24px;
        fill: #B2BBC3;
        cursor: pointer;
    }

    .header .logo {
        margin-left: 25px;
        margin-right: 25px;
    }

        .header .logo svg {
            height: 32px;
            width: 360px;
        }

    .header > .title {
        font-size: 0.938rem;
        color: black;
        padding-top: 9px;
        font-weight: 600;
        padding-left: 0px !important;
    }

    .header > .version {
        font-size: 0.875rem;
        color: #b2bbc3;
        padding-top: 9px;
        display: flex;
        font-weight: 400;
    }

        .header > .version .splitter {
            padding-left: 12px;
            padding-right: 12px;
        }

        .header > .version label {
            font-size: 0.875rem !important;
            color: #c4c9cf;
            font-weight: 400;
        }

        .header > .version span {
            font-size: 0.875rem !important;
            color: #c4c9cf;
            font-weight: 400;
        }


    .header > .logged-in {
        font-size: 0.875rem;
        color: black;
        /*padding-top: 5px;*/
        margin-right: 12px;
    }

        .header > .logged-in span {
            FONT-FAMILY: 'Arial' !important;
            FONT-SIZE: 0.813rem !important;
            font-weight: unset;
            color: var(--color-label);
        }

    .header > .logged-in-splitter {
        margin-right: 12px;
        height: 25px;
        border-radius: 4px;
        margin-bottom: 0px !important;
        border: 1px solid var(--lan-ddl-border)
    }

.search-results-checkbox {
    position: relative;
    bottom: 2px
}

.player-cross {
    position: absolute;
    top: 40px;
    right: 6px;
}

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

.padding-top-05rem {
    padding-top: 0.5rem !important;
}
/*@media (min-width: 500px) {

    .header .logo svg {
        height: 32px;
        width: 160px;
    }
    .header > .title {
        display: none;
    }
}*/
/*@media (max-width: 544px) {

    .header .logo svg {
        height: 32px;
        width: 160px;
    }
    .header > .title {
        display: none;
    }
}*/
/*@media (min-width: 768px) {

    .header .logo svg {
        height: 32px;
        width: 210px;
    }

    .header > .title {
      display: none;
    }
}*/
/*@media (min-width: 992px) {

    .header .logo svg {
        height: 32px;
        width: 260px;
    }
    .header > .title {
        display: block;
    }
}*/
@media (max-width: 544px) {
    .header .logo svg {
        height: 32px;
        width: 200px !important;
    }
}

@media (max-width: 768px) {

    .header .logo svg {
        height: 32px;
        width: 260px;
    }
}

@media (max-width: 1130px) {

    .header > .title {
        display: none;
    }

    .header > .version {
        display: none;
    }

    .header > .logged-in {
        display: none;
    }

    /*.header .logo svg {
        height: 32px;
        width: 360px;
    }*/
}

/*************** START LANGUAGE DROPDOWN ****************/

.lan-block {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 5px;
    cursor: pointer;
}

    .lan-block .lan-title {
        font-size: 0.75rem;
        color: var(--base-text-color);
        font-weight: 600;
        display: flex;
        align-items: center;
        vertical-align: middle;
        border-radius: 4px;
        background-color: var(--color-input-background);
        padding: 2px;
        border: 1px solid var(--color-input-border);
        border-width: 0px;
        width: 69px;
        min-width: 69px;
        outline: none;
    }

        .lan-block .lan-title .arrow {
            width: var(--arrow-svg-ddl-size);
            height: var(--arrow-svg-ddl-size);
            background: var(--lang-arrow) no-repeat;
            margin-left: auto;
            margin-right: 4px;
        }

        .lan-block .lan-title .lbl {
            font-size: 0.75rem;
            color: var(--color-label);
            font-weight: 600;
            display: flex;
            align-items: center;
            vertical-align: middle;
            margin-left: 4px;
            margin-right: 10px;
        }

    .lan-block .menu {
        z-index: 8000;
        min-width: 69px;
        width: 69px;
        padding-left: 3px;
        padding-right: 3px;
        margin-top: 4px;
        border: 1px solid var(--color-context-menu-border);
        border-radius: .25rem;
        box-shadow: 0 6px 12px rgb(0, 0, 0, var(--context-menu-shadow));
        background-color: var(--color-block-container);
        height:auto !important;
    }

        .lan-block .menu .lan-item {
            padding: 2px;
            padding-left: 4px;
            display: flex;
            align-items: center;
            vertical-align: middle;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-label);
        }

            .lan-block .menu .lan-item:hover {
                background-color: var(--color-menu-hover);
                color: var(--color-label);
                border-radius: 2px;
            }

            .lan-block .menu .lan-item.active {
                background-color: var(--base-color);
                color: var(--lan-ddl-active-text-color);
                border-radius: 2px;
            }

.lan-box {
    border: 1px solid var(--color-lan-ddl-outer-border);
    border-radius: 4px;
    margin-bottom: 0px !important;
    /*margin-right: 12px;*/
    height: 25px;
    width:71px;
}

.lan-box-child {
    top: 42px;
}

.top-header-incident-parent {
    margin-left: auto;
}

.top-header-incident-parent-svg {
    width: 24px;
    height: 24px;
    fill: var(--color-dots-black);
}

.top-header-incident {
    margin-right: 12px;
    position: relative;
}

.ServerIncidentsNotif {
    position: absolute;
    right: 16px;
    /* padding: 5px; */
    padding-left: 5px;
    padding-right: 5px;
    bottom: 13px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-radius: 5px;
}

/*************** END LANGUAGE DROPDOWN ****************/
/********* Menu Icon **********/
.menu-icon {
    /*margin-right: 13px;*/
    margin-left: 2px;
    /* width: 20px;
    height: 49px;
    text-align: center;
    position: absolute;
    right: 17px;    */
}

    .menu-icon .connected_user {
        display: flex;
        align-items: center;
        height: 30px;
        width: 23px;
        cursor: pointer;
        border-width: 0px;
        padding: 0px;
        background-color: var(--color-input-background);
        outline: none;
    }

        .menu-icon .connected_user:hover {
            background-color: var(--color-dots-hover);
            border-radius: 4px;
            cursor: pointer;
        }

        .menu-icon .connected_user svg {
            width: 3px;
            height: 13px;
            cursor: pointer;
            margin-left: 10px;
            fill: var(--color-dots-black);
        }



    .menu-icon #ddl-menu {
        position: absolute;
        top: -11px !important;
        left: 54.5px;
        will-change: transform;
        -webkit-transform: translate(-100%, 40%);
        transform: translate3d(-260px, 46px, 0px) !important;
        z-index: 100000;
        min-width: 230px;
        font-size: var(--size-base);
        text-align: left;
        list-style: none;
        background-color: var(--color-block-container);
        color: var(--base-text-color);
        background-clip: padding-box;
        border: 1px solid var(--color-context-menu-border);
        border-radius: 6px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, var(--context-menu-shadow));
        /*padding: 10px 10px;*/
        padding-top: 0px;
    }

    .menu-icon > #ddl-menu::before {
        position: absolute;
        top: -7px;
        right: 5px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid var(--color-context-menu-border);
        border-left: 7px solid transparent;
        border-bottom-color: var(--color-context-menu-border);
        content: '';
    }

    .menu-icon > #ddl-menu::after {
        position: absolute;
        top: -6px;
        right: 6px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid var(--color-block-container);
        border-left: 6px solid transparent;
        content: '';
    }

    .menu-icon > #ddl-menu > div > a {
        color: var(--base-text-color) !important;
        text-decoration: none;
        display: block;
        padding: 8px 10px 8px 30px;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: var(--size-tiny-big);
        margin: 4px 0px;
        cursor: pointer;
        border-radius: 2px;
    }

    .menu-icon > #ddl-menu .site-container {
    }

        .menu-icon > #ddl-menu .site-container .site-label {
            color: var(--base-text-color) !important;
            text-decoration: none;
            display: block;
            padding: 8px 10px 8px 10px;
            font-size: 0.75rem;
            font-weight: 400;
            line-height: var(--size-tiny-big);
            /*margin: 4px 0px;*/
            cursor: default;
            border-radius: 2px;
            margin-bottom: 0px;
            /*position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 20px;*/
        }

    .menu-icon > #ddl-menu .site-info {
    }


    .menu-icon > #ddl-menu .site-bars {
        margin-right: 12px;
        height: 15px;
        width: 3px;
        background-color: #7058b7;
        margin-bottom: 0px !important;
        border: 1px solid #7058b7;
    }

    .menu-icon #ddl-menu div {
      outline:none;
    }

    .menu-icon #ddl-menu .div-hover:hover {
        background-color: var(--color-menu-hover);
        cursor: pointer !important;
        border-radius: 4px;
    }

.menu-title-svg {
    z-index: 10;
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}

.info-title-svg-vertical {
    z-index: 10;
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
    vertical-align:middle;
}

.info-title-svg {
    z-index: 10;
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}

.dropdown-toggle::after {
    display: none !important;
}

.pos-relative {
    position: relative;
}

.menu-icon-labels-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu {
    padding-bottom: 10px !important;
}

.menu-icon-labels {
    color: var(--color-menu-icon-labels);
    FONT-SIZE: 0.75rem !important;
    margin-bottom: 0px;
}

.menu-icon-labels-parent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /*font-weight: 600*/
}

.menu-icon-fl .avatar {
    height: 30px;
    width: 30px;
    background: var(--color-avatar);
    border-radius: 50%;
    /* margin-right: 9px; */
    text-align: center;
    display: flex;
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    align-content: center;
    cursor: pointer;
}

    .menu-icon-fl .avatar label {
        cursor: pointer;
        font-size: 0.938rem;
        color: white;
        /* text-align: center;
    margin-top: 2px; */
        margin-bottom: 0px !important;
    }

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

.align-horizontal-middle {
    display: flex;
    align-items: center;
}

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



body {
    margin: 0;
    background-color: var(--color-body-background);
    overflow: hidden;
    outline: none;
}

#dialog-alert, #dialog-confirm {
    box-sizing: initial
}

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

.dbigTileSettings {
    border: 1px solid #cbcdce;
    border-radius: 5px;
    height: 450px;
    padding: 10px;
    text-align: center;
}

.dTileBackgroundColor {
    background-color: var(--color-block-container);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
    border: 0px;
}

.dBigTileHeader {
    color: #2f79fe;
    font-size: 0.875rem;
    font-weight: bold;
    text-align: left;
    user-select: none;
    padding-left: 10px;
}

.graph-titles {
    color: var(--color-svg-signature-fill);
}

.btn-delete-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}

.btn-delete-disabled-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-disbaled);
}

.btn-edit-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}

.ui-dialog-titlebar-close {
    display: none;
}

.btn-edit-disabled-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-disbaled);
}

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

.enbale-rod-svg {
    width: 16px;
    height: 16px;
    fill: #2FAE1D;
}

.disable-rod-svg {
    width: 16px;
    height: 16px;
    fill: #D21223;
}

.btn-share-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}

.btn-shared-svg {
    width: 16px;
    height: 16px;
    fill: #E6AD45;
}

.btn-share-disabled-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-disbaled);
}


.btn-copy-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}

.call-flag-svg-1 {
    width: 16px;
    height: 16px;
    fill: #F17100;
}

.call-flag-svg-2 {
    width: 16px;
    height: 16px;
    fill: #047DE4;
}

.call-flag-svg-3 {
    width: 16px;
    height: 16px;
    fill: #0D01EE;
}

.call-flag-svg-4 {
    width: 16px;
    height: 16px;
    fill: #19CAE0;
}

.call-flag-svg-5 {
    width: 16px;
    height: 16px;
    fill: #737373;
}


.call-flag-svg-6 {
    width: 16px;
    height: 16px;
    fill: #E41A04;
}

.call-flag-svg-7 {
    width: 16px;
    height: 16px;
    fill: #E4AA00;
}

.search-btn-delete-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
    margin-top: 2px;
}

.btn-sync-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}

.save-search-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.text-align-center {
    text-align: center;
}

.lbl-no-data {
    color: red;
    margin-bottom: 0px;
}

.grid-actions-space {
    margin-right: 14px;
}

.tb-description-height {
    height: 70px !important;
}

.time-combobox {
    width: 50px !important;
}

.selected-agents-padding {
    padding-bottom: 25px;
}

.job-btn-delete-svg {
    width: 16px;
    height: 16px;
    fill: #7058b7;
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
}

.SA_NoteText {
    font-size: smaller;
    padding-right: 5px;
    padding-left: 20px !important;
}

.SA_TableStyle {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    background-color: var(--color-block-container);
    padding: 15px 15px 15px 15px;
    font-size: 0.813rem;
    border-radius: 7px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
    border-collapse: separate;
}

.CollapseHeaderPurple {
    border: 0px solid #D6D4D5;
    cursor: pointer;
    /*background-color: #7058b7;*/
    height: 30px;
    color: #7058b7 !important;
    font-size: 0.917rem;
    font-weight: bold;
    font-family: 'Arial';
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 0px;
    font-size: 0.75rem;
    margin-bottom: 5px;
    width: 100%;
}

.CollapseHeaderPurpleLabels {
    color: #7058b7 !important;
}

.SA_CollapseHeaderDisabledLabels {
    color: var(--color-speechanalytics-heading-disabled) !important;
}

.SA-dots-svg {
    width: 3px;
    height: 13px;
    fill: #7058b7;
}

.SA_CollapseHeaderDisabled {
    border: 0px solid #c6c6c6;
    cursor: pointer;
    height: 30px;
    color: white;
    font-size: 0.917rem;
    font-weight: bold;
    font-family: 'Arial';
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 0px;
    font-size: 0.75rem;
    margin-bottom: 5px;
    width: 100%;
}

.SA_TableStyleDisabled {
    width: 100%;
    height: 100%;
    /*border: 1px solid #c6c6c6;*/
    margin-bottom: 20px;
    background-color: var(--color-block-container);
    padding: 15px 15px 15px 15px;
    font-size: 0.813rem;
    border-radius: 7px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
    border-collapse: separate;
}

.dashboard-chart-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}

    .dashboard-chart-row .first {
        width: 60% !important;
    }

    .dashboard-chart-row .second {
        width: 40% !important;
    }

    .dashboard-chart-row .first-margin {
        margin-right: 20px
    }

    .dashboard-chart-row .chart-header {
        display: flex;
        justify-content: space-between;
    }

    .dashboard-chart-row .chart-size {
        width: 100% !important;
        height: 400px;
    }


.dashboard-chart-first-row {
    width: 100% !important;
}


    .dashboard-chart-first-row .chart-header {
        display: flex;
        justify-content: space-between;
    }

    .dashboard-chart-first-row .chart-size {
        width: 100% !important;
        height: 400px;
    }

.dashboard-chart-recordedcalls-row {
    width: 100%;
    margin-bottom: 20px;
}


    .dashboard-chart-recordedcalls-row .chart-header {
        display: flex;
        justify-content: space-between;
    }

    .dashboard-chart-recordedcalls-row .chart-size {
        width: 100%;
        height: 400px;
    }

.width-100-per {
    width: 100%;
}

table {
    border-collapse: unset;
}

.search-results-svg {
    height: 16px;
    width: 16px;
}

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

.margin-top-0px {
    margin-top: 0px !important;
}

.search-results-inbound-fill {
    fill: #7058b7;
}

.search-results-info-inbound-fill {
    fill: #FFFFFF;
}

.search-results-info-outbound-fill {
    fill: #FFFFFF;
}


.search-results-outbound-fill {
    fill: #E6AD45;
}

.actionsT {
    text-align: right;
}

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

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

.license-grid-wrapper {
    padding-bottom: 25px !important;
}

.license-grid-header {
    color: var(--color-svg-white);
}

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

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

.padding-left-16px {
    padding-left: 16px;
}

.search-results-grid-space {
    margin-right: 8px;
}

.search-results-grid-left-space {
    margin-left: 8px;
}

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

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

.margin-bottom-5px {
    margin-bottom: 5px !important;
}

.selected-agents-containter {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

    .selected-agents-containter .child-padding {
        padding-top: 10px;
    }

    .selected-agents-containter .child-margin {
        margin-bottom: 2px;
    }

.lbl-color-white {
    color: #ffffff;
}

a:not([href]):not([tabindex]) {
    color: var(--color-label);
}

    a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
        color: var(--color-label);
    }

.span-text-font {
    color: var(--color-label) !important;
    FONT-FAMILY: 'Arial' !important;
    FONT-SIZE: 0.813rem !important;
    font-weight: unset;
}

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

.tb-container-width {
    max-width: 248px;
}

.settings-popup-left {
    left: 84.5px !important
}

.settings-popup-dots-left {
    left: 53px !important
}

.silent-monitor-flags {
    width: 180px !important;
    left: 30px !important;
    top: 20px !important
}

.padding-bottom-05rem {
    padding-bottom: 0.5rem;
}

.ajax__calendar_container {
    box-sizing: content-box;
}

.silent-monitor-fields-width {
    max-width: 200px !important;
}

/*Fahad*/
/*zeeshan*/
.company-container {
    width: 100%;
    /* height: 100%;*/
    margin-bottom: 10px;
}

    .company-container .block {
        padding: 10px 0px 5px 0px;
    }

        .company-container .block .title {
            color: #2f79fe;
            font-size: 0.813rem;
            font-weight: bold;
            padding-left: 20px;
            margin-bottom: -6px !important;
        }

.block .block-container {
    background-color: var(--color-block-container);
    padding: 25px 5px 25px 0px;
    font-size: 0.813rem;
    border-radius: 7px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
}

.block .block-container-wrapper {
    background-color: var(--color-block-container);
    padding: 25px 0px 25px 0px;
    font-size: 0.813rem;
    border-radius: 7px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
    overflow: auto;
}

.grid-container-wrapper {
    min-width: 800px;
}

.block-container .row {
    padding-left: 5px !important;
    padding-right: 2px !important;
}

    .block-container .row .items {
        padding: 0px !important;
    }

    .block-container .row .item {
        padding-left: 20px !important;
        padding-bottom: 10px !important;
    }

        .block-container .row .item .chk {
            margin-left: 10px;
        }

.block-container .rows .items .first {
    /* width: 40%; */
    padding-left: 0px;
}

.block-container .rows .items .second {
    /* width: 60%; */
}

.block-container .rows .items .first > label {
    margin-right: 5px;
}

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

.smallcombobox {
    width: 50px;
}


.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 28px;
    padding-right: 10px;
    padding-left: 10px;
}

input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin: 5px 5px 5px 6px;
}

input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
    margin: 5px 0px 5px 0px;
}

.toppageheaderRow {
    padding-left: 20px;
}

.swithchlabel {
    cursor: pointer !important;
    margin: 0;
    color: white;
}

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

.jobListBox {
    padding: 10px;
    background-color: var(--color-input-background);
    overflow: auto;
    border-left: 2px;
    width: 240px;
    height: 150px;
    border: 1px solid var(--color-input-border);
    border-radius: 3px;
    margin-top: 8px;
}

.job-list-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-input-border);
    padding-bottom: 10px;
}

/*zeeshan*/
.button-height-27px {
    height: 27px !important
}

.backgrey {
    background-color: var(--color-block-container) !important;
    border-radius: 7px;
}

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

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

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

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

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

/*Player*/
.player-info .called-id {
    font-size: 0.813rem;
    font-weight: bold;
}

.player-cross-svg {
    width: 20px;
    height: 20px;
    fill: #bcc3ca;
}

    .player-cross-svg:hover {
        fill: #7058b7;
    }

.bookmark-cross-svg {
    width: 18px;
    height: 18px;
    margin-top: 6px;
    fill: #bcc3ca;
}

    .bookmark-cross-svg:hover {
        fill: #7058b7;
    }

.player-Signature-svg {
    width: 16px;
    height: 22px;
    fill: green;
}

.player-Signature-label-green {
    color: green;
    margin-left: 5px;
}
 
.player-Signature-label-red{
    color: red;
    margin-left:5px;
}
.player-Signature-svg-red {
    fill: red !important;
}

.player-Signature-svg-orange {
    fill: red !important;
}

.player-info-svg {
    width: 20px;
    height: 20px;
    fill: var(--color-svg-signature-fill);
}

.player-info-svg-disabled {
    width: 20px;
    height: 20px;
    fill: var(--color-disbaled);
}

.player-full-screen-svg {
    width: 20px;
    height: 20px;
    fill: #bcc3ca;
}

.player-vertical-dots-svg {
    width: 3px;
    height: 28px;
    fill: #ffffff;
}

.player-full-screen-svg:hover {
    fill: #7058b7;
}



.btnMute {
    width: 14px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
}

.btnUnMute {
    width: 14px;
    height: 22px;
    fill: var(--color-disbaled);
}

.btn25 {
    width: 2px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
}

.btn50 {
    width: 2px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
}

.btn75 {
    width: 2px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
}

.btn100 {
    width: 2px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
}

.btn25G {
    width: 2px;
    height: 22px;
    fill: var(--color-disbaled);
}

.btn50G {
    width: 2px;
    height: 22px;
    fill: var(--color-disbaled);
}

.btn75G {
    width: 2px;
    height: 22px;
    fill: var(--color-disbaled);
}

.btn100G {
    width: 2px;
    height: 22px;
    fill: var(--color-disbaled);
}

.player-btnRev-svg {
    width: 22px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
    margin-right: 20px;
}

.player-svg-disbaled {
    width: 22px;
    height: 22px;
    fill: var(--color-disbaled);
    margin-right: 20px;
}


.player-btnPrevious-svg {
    width: 22px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
    margin-right: 20px;
}

.player-btnPrevious-svg-disabled {
    width: 22px;
    height: 22px;
    fill: var(--color-disbaled);
    margin-right: 20px;
}

.player-btnPause-svg {
    width: 22px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
    margin-right: 20px;
}


.player-btnPlay-svg {
    width: 22px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
    margin-right: 20px;
}

.player-btnStop-svg {
    width: 22px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
    margin-right: 20px;
}

.player-btnNext-svg {
    width: 22px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
    margin-right: 20px;
}

.player-btnNext-svg-disabled {
    width: 22px;
    height: 22px;
    fill: var(--color-disbaled);
    margin-right: 20px;
}

.player-btnFwd-svg {
    width: 22px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
    margin-right: 15px;
}

.player-svg-enabled {
    fill: var(--color-svg-signature-fill) !important;
}

.player-svg-disabled {
    fill: var(--color-disbaled) !important;
}

.player-logo-svg {
    width: 485px;
    height: 46px;
}


.player-bookmark-conatiner {
    width: 53px;
    height: 34px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

    .player-bookmark-conatiner:hover {
        background-color: var(--color-menu-hover);
    }


.player-graphMenu-conatiner {
    width: 53px;
    height: 34px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

    .player-graphMenu-conatiner:hover {
        background-color: var(--color-menu-hover);
    }


/*.player-graphMenu-conatiner.active .player-graphMenu-svg {
        fill: #FFFFFF;
    }

    .player-graphMenu-conatiner.active .graphMenu-menu-arrowup {
        fill: #FFFFFF;
    }*/

.player-skipSilence-conatiner {
    width: 56px;
    height: 34px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

    .player-skipSilence-conatiner:hover {
        background-color: var(--color-menu-hover);
    }

/*.player-skipSilence-conatiner:hover .player-skipSilence-svg {
    fill: #FFFFFF;
}

.player-skipSilence-conatiner:hover .skipSilence-menu-arrowup {
    fill: #FFFFFF;
}*/

.player-skipSilence-svg {
    width: 30px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
}

.player-skipSilence-svg-disabled {
    width: 30px;
    height: 22px;
    fill: var(--color-disbaled);
}


.player-graphMenu-svg {
    width: 22px;
    height: 22px;
    fill: var(--color-svg-signature-fill);
    margin-bottom: 1px;
}

.player-graphMenu-svg-disabled {
    width: 22px;
    height: 22px;
    fill: var(--color-disbaled);
    margin-bottom: 1px;
}

.skipSilence-menu-arrowup {
    width: 10px;
    height: 6px;
    fill: var(--color-svg-signature-fill);
    margin-left: 5px;
    margin-bottom: 4px;
}

.skipSilence-menu-arrowup-disabled {
    width: 10px;
    height: 6px;
    fill: var(--color-disbaled);
    margin-left: 5px;
    margin-bottom: 4px;
}

.graphMenu-menu-arrowup {
    width: 10px;
    height: 6px;
    fill: var(--color-svg-signature-fill);
    margin-left: 5px;
    margin-bottom: 5px;
}

.graphMenu-menu-arrowup-disabled {
    width: 10px;
    height: 6px;
    fill: var(--color-disbaled);
    margin-left: 5px;
    margin-bottom: 5px;
}


.gain-menu-arrowup {
    width: 10px;
    height: 6px;
    fill: var(--color-svg-signature-fill);
    margin-left: 5px;
    margin-bottom: 4px;
}

.gain-menu-arrowup-disabled {
    width: 10px;
    height: 6px;
    fill: var(--color-disbaled);
    margin-left: 5px;
    margin-bottom: 4px;
}

.player-info .splitter {
    height: 26px;
    width: 2px;
    color: #bcc3ca;
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 4px;
    border: 1px solid #bcc3ca;
}

.player-info .splitter-margins {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.player-info .icon-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-info .icon-flex-Signature {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.player-info .icon-flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#player-info-container .child-row {
    background-color: #7058b7;
}

#player-info-details {
    padding-top: 10px;
    padding-left: 0px !important
}

    #player-info-details label {
        color: #ffffff;
    }

.player-vertical-dots-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #7058B7;
    width: 13px;
    padding-left: 5px;
    padding-right: 5px;
}

#player-container {
    display: flex;
    flex-direction: column;
    min-height: 290px !important;
}

.player-holder-container {
    /*resize: vertical;*/
    overflow: auto;
    min-height: 290px;
}

#player-control-container {
    height: 100%;
}

#player-info-container {
}

@media (min-width: 500px) {

    .player-col-12 {
        width: 100%;
    }

    .appearance .theme-container > div > img {
        width: 115px;
    }

    .overall-sentiment-container {
        width: 200px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 201.5px
    }

    .overall-sentiment-labels {
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        width: calc(100% - 200px);
    }

    .chart-size-needle {
        max-width: 200px;
        max-height: 100px;
        width: 100%;
    }

    .sentiment-chart-container {
        width: 157px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 201.5px;
    }

    .sentiment-chart-size {
        min-width: 157px !important;
        min-height: 157px !important;
    }

    .overall-sentiment-item label {
        font-size: 1.563rem !important;
        font-weight: bold;
        margin: 0;
    }

    .emogi-size {
        width: 50px;
        height: 50px;
    }

    .sentiment-item span {
        font-size: 1.25rem !important;
        margin: 0;
    }

    .sentiment-item .grey-text {
        font-size: 0.938rem !important;
        color: #888888;
        margin-bottom: 0px !important;
    }

    .sentiment-labels {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100% - 157px);
        padding-left: 15px;
    }

}

@media (min-width: 576px) {

    .player-col-sm-12 {
        width: 100%;
    }

    .overall-sentiment-container {
        width: 250px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 201.5px
    }

    .overall-sentiment-labels {
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        width: calc(100% - 250px);
    }

    .chart-size-needle {
        max-width: 250px;
        max-height: 125px;
        width: 100%;
    }

    .sentiment-chart-container {
        width: 167px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 201.5px;
    }

    .sentiment-chart-size {
        min-width: 167px !important;
        min-height: 167px !important;
    }

    .overall-sentiment-item label {
        font-size: 1.875rem !important;
        font-weight: bold;
        margin: 0;
    }

    .emogi-size {
        width: 60px;
        height: 60px;
    }

    .sentiment-item span {
        font-size: 1.563rem !important;
        margin: 0;
    }

    .sentiment-item .grey-text {
        font-size: 0.938rem !important;
        color: #888888;
        margin-bottom: 0px !important;
    }

    .sentiment-labels {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100% - 167px);
        padding-left: 20px;
    }
}

@media (min-width: 768px) {

    .player-col-md-12 {
        width: 100%;
    }

    .appearance .theme-container > div > img {
        width: 170px;
    }

    .overall-sentiment-container {
        width: 300px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 201.5px
    }

    .overall-sentiment-labels {
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        width: calc(100% - 300px);
    }

    .chart-size-needle {
        max-width: 300px;
        max-height: 150px;
        width: 100%;
    }

    .sentiment-chart-container {
        width: 177px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 201.5px;
    }

    .sentiment-chart-size {
        min-width: 177px !important;
        min-height: 177px !important;
    }

    .overall-sentiment-item label {
        font-size: 2.188rem !important;
        font-weight: bold;
        margin: 0;
    }

    .emogi-size {
        width: 70px;
        height: 70px;
    }

    .sentiment-item span {
        font-size: 1.875rem !important;
        margin: 0;
    }

    .sentiment-item .grey-text {
        font-size: 1.25rem !important;
        color: #888888;
        margin-bottom: 0px !important;
    }

    .sentiment-labels {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100% - 177px);
        padding-left: 25px;
    }
}

@media (min-width: 992px) {
    .player-col-lg-9 {
        width: 75%;
        min-width: 50%;
        max-width: 75%;
    }

    .player-col-lg-3 {
        width: 25%;
    }

    .appearance .theme-container > div > img {
        width: 120px;
    }

    .overall-sentiment-container {
        width: 200px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 181.5px;
    }

    .overall-sentiment-labels {
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        width: calc(100% - 200px);
    }

    .chart-size-needle {
        max-width: 200px;
        max-height: 100px;
        width: 100%;
    }

    .sentiment-chart-container {
        width: 157px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 181.5px;
    }

    .sentiment-chart-size {
        min-width: 157px !important;
        min-height: 157px !important;
    }

    .overall-sentiment-item label {
        font-size: 1.563rem !important;
        font-weight: bold;
        margin: 0;
    }

    .emogi-size {
        width: 50px;
        height: 50px;
    }

    .sentiment-item span {
        font-size: 1.25rem !important;
        margin: 0;
    }

    .sentiment-item .grey-text {
        font-size: 0.938rem !important;
        color: #888888;
        margin-bottom: 0px !important;
    }

    .sentiment-labels {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100% - 157px);
        padding-left: 15px;
    }
}


@media (min-width: 1200px) {
    .player-col-xl-9 {
        width: 75%;
        min-width: 50%;
        max-width: 75%;
    }

    .player-col-xl-3 {
        width: 25%;
    }

    .appearance .theme-container > div > img {
        width: 135px;
    }

    .overall-sentiment-container {
        width: 250px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 191.5px;
    }

    .overall-sentiment-labels {
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        width: calc(100% - 250px);
    }

    .chart-size-needle {
        max-width: 250px;
        max-height: 125px;
        width: 100%;
    }

    .sentiment-chart-container {
        width: 167px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 191.5px;
    }

    .sentiment-chart-size {
        min-width: 167px !important;
        min-height: 167px !important;
    }

    .overall-sentiment-item label {
        font-size: 1.875rem !important;
        font-weight: bold;
        margin: 0;
    }

    .emogi-size {
        width: 60px;
        height: 60px;
    }

    .sentiment-item span {
        font-size: 1.563rem !important;
        margin: 0;
    }

    .sentiment-item .grey-text {
        font-size: 0.938rem !important;
        color: #888888;
        margin-bottom: 0px !important;
    }

    .sentiment-labels {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100% - 167px);
        padding-left: 20px;
    }
}

@media (min-width: 1391px) {

    .appearance .theme-container > div > img {
        width: 170px;
    }

    .overall-sentiment-container {
        width: 300px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 201.5px
    }

    .overall-sentiment-labels {
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        width: calc(100% - 300px);
    }

    .chart-size-needle {
        max-width: 300px;
        max-height: 150px;
        width: 100%;
    }

    .sentiment-chart-container {
        width: 177px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 201.5px;
    }

    .sentiment-chart-size {
        min-width: 177px !important;
        min-height: 177px !important;
    }

    .overall-sentiment-item label {
        font-size: 2.188rem !important;
        font-weight: bold;
        margin: 0;
    }

    .emogi-size
    {
        width:70px;
        height:70px;
    }

    .sentiment-item span {
        font-size: 1.875rem !important;
        margin: 0;
    }

    .sentiment-item .grey-text {
        font-size: 1.25rem !important;
        color: #888888;
        margin-bottom: 0px !important;
    }

    .sentiment-labels {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100% - 177px);
        padding-left: 25px;
    }
}


@media (min-width: 1920px) {

    .appearance .theme-container > div > img {
        width: 230px;
    }
}

@media (min-width: 500px) {



    #player-info-container {
        min-width: 100%;
    }
}

@media (min-width: 576px) {



    #player-info-container {
        min-width: 100%;
    }
}

@media (min-width: 768px) {



    #player-info-container {
        min-width: 100%;
    }
}

@media (min-width: 992px) {


    #player-info-container {
        min-width: 25%;
    }
}

@media (min-width: 1200px) {


    #player-info-container {
        min-width: 25%;
    }
}

.player-dimensions {
    width: calc(100% - 13px);
    height: 100%;
    min-height: 290px;
    position: relative;
}

.player-holder-padding-right {
    padding-right: 0px
}

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

.fastfoward {
    position: relative;
    bottom: 1px;
    font-size: 1.75rem;
    color: var(--color-svg-signature-fill);
}

.margin-top-10px {
    margin-top: 10px !important;
}


/*Player*/



.player-menu-icon #ddl-menu {
    position: absolute;
    top: -175px !important;
    left: 1px !important;
    will-change: transform;
    -webkit-transform: translate(-100%, 40%);
    transform: translate3d(-40px, 46px, 0px) !important;
    z-index: 100000;
    min-width: 120px;
    font-size: var(--size-base);
    text-align: left;
    list-style: none;
    background-color: var(--color-block-container);
    color: var(--base-text-color);
    background-clip: padding-box;
    border: 1px solid var(--color-context-menu-border);
    border-radius: 6px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, var(--context-menu-shadow));
    /*padding: 10px 10px;*/
    padding-top: 0px;
}

.player-menu-icon > #ddl-menu::before {
    position: absolute;
    top: 113px;
    right: 50px;
    display: inline-block;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-context-menu-border);
    border-left: 10px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.player-menu-icon > #ddl-menu::after {
    position: absolute;
    top: 113px;
    right: 50px;
    display: inline-block;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-block-container);
    border-left: 10px solid transparent;
    content: '';
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.player-menu-icon > #ddl-menu > div > a {
    color: var(--base-text-color) !important;
    text-decoration: none;
    display: block;
    padding: 8px 10px 8px 30px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: var(--size-tiny-big);
    margin: 4px 0px;
    cursor: pointer;
    border-radius: 2px;
}



.player-menu-icon > #ddl-menu .site-container .site-label {
    color: var(--base-text-color) !important;
    text-decoration: none;
    display: block;
    padding: 8px 10px 8px 10px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: var(--size-tiny-big);
    cursor: default;
    border-radius: 2px;
    margin-bottom: 0px;
}






.player-menu-icon #ddl-menu .div-hover:hover {
    background-color: var(--color-menu-hover);
    cursor: pointer !important;
    border-radius: 4px;
}

.player-menu-icon #ddl-menu .div-hover[disabled]:hover {
    background-color: transparent;
    cursor: default !important;
    border-radius: 0px;
}

.dropdown-toggle::after {
    display: none !important;
}

.player-menu-icon-labels-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu {
    padding-bottom: 10px !important;
}

.menu-icon-labels {
    color: var(--color-menu-icon-labels);
    FONT-SIZE: 0.75rem !important;
    margin-bottom: 0px;
}

.player-menu-icon-labels-parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

#player-skipSilence-Menu {
    display: flex;
    align-items: flex-end;
}

#player-graph-Menu {
    display: flex;
    align-items: flex-end;
}

#player-bookmark-Menu {
    display: flex;
    align-items: flex-end;
}

.player-menu-title-svg {
    z-index: 10;
    width: 18px;
    height: 18px;
    fill: var(--color-svg-signature-fill);
}

#divPlayerObjectChrome {
}

.slider-overlaw {
    height: 5px;
    background-color: #7058b7;
}

.player-volume-line {
    width: 37px;
    height: 2px;
    fill: var(--color-svg-signature-fill);
    position: absolute;
    left: 0px;
    top: 35px;
}

.playerViewNote {
    fill: #FFFFFF !important;
}

.lblServerDisabled {
    color: var(--color-rod-cluster-disabled) !important;
    cursor: default;
    pointer-events: none;
}

.lblServerSpliter {
    height: 15px;
    width: 2px;
    color: #bcc3ca;
    margin-left: 19px;
    margin-right: 6px;
    border-radius: 4px;
    border: 1px solid #bcc3ca;
    position: relative;
    top: 2px;
}

.ActiveServerStatus {
    width: 10px;
    height: 10px;
    background-color: #7ED320;
    border-radius: 6px;
    position: absolute;
    right: -12px;
    top: 0px;
}

.StopServerStatus {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 6px;
    position: absolute;
    right: -12px;
    top: 0px;
}

#VisibleReportContentctl00_ContentPlaceHolder2_Ctrl_AdminReports1_ReportViewer2_ctl09:first-child {
    text-align: -webkit-center !important;
}

#VisibleReportContentctl00_ContentPlaceHolder2_Ctrl_UserReports1_ReportViewer2_ctl09:first-child {
    text-align: -webkit-center !important;
}

#VisibleReportContentctl00_ContentPlaceHolder2_Ctrl_SupervisorReports1_ReportViewer2_ctl09:first-child {
    text-align: -webkit-center !important;
}

#VisibleReportContentctl00_ContentPlaceHolder2_ctrl_TenantReports1_ReportViewer2_ctl09:first-child {
    text-align: -webkit-center !important;
}

#VisibleReportContentctl00_ContentPlaceHolder2_ReportViewer2_ctl09:first-child {
    text-align: -webkit-center !important;
}

.player-horizontal-dots-svg {
    width: 28px;
    height: 3px;
    fill: var(--color-disbaled);
    cursor: row-resize !important;
    user-select: none;
    position: relative;
    top: 10px;
}

#player-holder {
    /*background-color: #D7D8D9;*/
}

.purple-quantity-arrowup {
    height: 15px;
    width: 15px;
    -ms-transform: rotate(180deg);
    transform: rotate( 180deg);
    position: absolute;
    top: 0px;
    margin-left: 5px;
}

.purple-quantity-arrowdown {
    height: 15px;
    width: 15px;
    position: absolute;
    top: 12px;
    margin-left: 5px;
}

.width-600px {
    width: 600px !important;
    padding: 15px 15px 20px 15px !important;
}

.padding-right-5px {
    padding-right: 5px !important;
}

.horizontal-align {
    display: flex;
    justify-content: flex-end;
}

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

.popUpDetailsDownGrade {
    width: 55vw !important;
    height: 64vh !important;
    padding: 23px !important;
    padding-right: 0px !important;
}

    .popUpDetailsDownGrade label {
        margin-bottom: 0px !important;
    }

    .popUpDetailsDownGrade .license-list-item {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #EBEDEF;
    }

    .popUpDetailsDownGrade .flex-start {
        display: flex;
        align-items: center;
    }

    .popUpDetailsDownGrade .license-list-item svg {
        height: 24px;
        width: 24px;
        fill: #6B54A5 !important;
        margin-right: 10px;
    }

    .popUpDetailsDownGrade .license-list-item .child-item {
        margin-left: 34px;
        padding-top: 10px;
    }

    .popUpDetailsDownGrade .license-item {
        /*margin-bottom: 10px;*/
        padding-bottom: 10px;
        border-bottom: 1px solid var(--color-purplelicense-border);
        display: flex;
        align-items: center;
        background-color: var(--color-purplelicense-header);
        padding-top: 10px;
        padding-left: 10px;
        min-height: 45px;
    }

        .popUpDetailsDownGrade .license-item svg {
            height: 24px;
            width: 24px;
            fill: var(--color-purplelicense-headings) !important;
            margin-right: 10px;
        }


    .popUpDetailsDownGrade .sub-license-item {
        /*margin-bottom: 10px;
        padding-bottom: 10px;*/
        border-bottom: 1px solid var(--color-purplelicense-border);
        display: flex;
        align-items: center;
        background-color: var(--color-block-container);
        /*padding-top: 10px;*/
        /*padding-left: 10px;*/
        min-height: 45px;
    }

    .popUpDetailsDownGrade .first-sub-license-item {
        /*margin-bottom: 10px;
        padding-bottom: 10px;*/
        border-bottom: 1px solid var(--color-purplelicense-border);
        display: flex;
        align-items: center;
        background-color: var(--color-block-container);
        /*padding-top: 10px;*/
        padding-left: 44px;
        min-height: 45px;
    }

        .popUpDetailsDownGrade .first-sub-license-item svg {
            height: 24px;
            width: 24px;
            fill: #6B54A5 !important;
            margin-right: 10px;
        }

    .popUpDetailsDownGrade .description-column {
        flex-direction: column;
        align-items: flex-start;
        display: flex;
    }

        .popUpDetailsDownGrade .description-column .error-note {
            font-size: 0.625rem !important;
            color: red;
            white-space: pre-wrap;
        }

    .popUpDetailsDownGrade .license-heading {
        font-weight: bold;
        margin-right: 10px;
        color: var(--color-purplelicense-headings);
    }

    .popUpDetailsDownGrade .sub-license-heading {
        /*font-weight: bold;
        margin-right: 10px;
        color: #6B54A5;*/
    }

    .popUpDetailsDownGrade .license-desc {
        font-weight: bold;
        color: #6B54A5;
    }

.downGradeContainer {
    /*height: 520px;*/
    position:relative;
    margin-right: 3px;
}

.downGradeContainerHeadings {
    display: flex;
    justify-content: space-between;
    padding-right:30px;
}

.downGradeNestedContainer {
    padding-right: 23px;
    display: flex;
    justify-content: space-between;
    overflow-y: auto;
    height: 50vh;
}

    .downGradeNestedContainer:after {
        border-bottom: 1px solid var(--color-purplelicense-border);
        position: absolute;
        content: '';
        bottom: 0px;
        width: calc(100% - 29px);
    }
    }

.downGradeContainerHeadings .first-main-heading {
    font-weight: bold;
    margin-bottom: 10px !important;
    color: var(--color-purplelicense-headings);
    margin-left: 44px;
}

.downGradeContainerHeadings .main-heading {
    font-weight: bold;
    margin-bottom: 10px !important;
    color: var(--color-purplelicense-headings);
}

.popUpDetailsDownGrade .btn-container {
    padding-right: 31px;
    padding-top: 26px;
}

.popUpDetailsDownGrade .downGradeDesc {
    margin-bottom: 20px;
}

.margin-bottom-0px {
    margin-bottom: 0px !important
}

.margin-bottom-01px {
    margin-bottom: 1px !important
}

.applyLicenseStates {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999;
    background: rgba(248, 248, 250, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .applyLicenseStates .state-container {
        width: 830px;
        height: 325px;
        padding: 30px;
        background-color: var(--color-block-container);
        border: 1px solid var(--color-purplelicense-popup-border);
        border-radius: 6px;
        z-index: 99999;
        margin: auto;
    }

    .applyLicenseStates .state-container-secondary {
        width: 730px !important;
    }

    .applyLicenseStates .state-container .row {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 20px;
    }

    .applyLicenseStates .state-container .text-row {
        display: flex;
        justify-content: center;
        min-height: 20px;
    }

    .applyLicenseStates .state-container .button-row {
        display: flex;
        justify-content: flex-end;
        min-height: 20px;
    }

.display-none-important {
    display: none !important;
}

.applyLicenseStates label {
    margin-bottom: 0px !important;
}

.applyLicenseStates .state-container .heading {
    margin-bottom: 30px;
}


    .applyLicenseStates .state-container .heading label {
        font-weight: bold;
        font-size: 1.125rem !important;
    }

.applyLicenseStates .state-container .partition {
    width: 145px;
}


.applyLicenseStates .state-container .disabled label {
    color: var(--color-purple-label-disabled) !important;
}

.applyLicenseStates .state-container .please-wait label {
    color: #6E4EB3 !important;
}

.applyLicenseStates .state-container .success label {
    color: #8AC149 !important;
}

.applyLicenseStates .state-container .partition .hidden-left-arm, .hidden-right-arm {
    width: 45px;
    height: 5px;
}

.applyLicenseStates .state-container .partition .right-arm-disbaled, .left-arm-disbaled {
    width: 45px;
    height: 5px;
    background-color: var(--color-purple-circle-disabled);
}

.applyLicenseStates .state-container .partition .right-arm-purple, .left-arm-purple {
    width: 45px;
    height: 5px;
    background-color: #6E4EB3;
}

.applyLicenseStates .state-container .partition .right-arm-green, .left-arm-green {
    width: 45px;
    height: 5px;
    background-color: #8AC149;
}

.applyLicenseStates .state-container .partition .circle {
    background-color: var(--color-purple-circle-disabled);
    width: 55px;
    height: 55px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .applyLicenseStates .state-container .partition .circle label {
        color: var(--color-purple-circle-label-disabled) !important;
        font-size: 1.25rem !important;
    }

.applyLicenseStates .state-container .partition .purple-circle {
    background-color: #6E4EB3;
    width: 55px;
    height: 55px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .applyLicenseStates .state-container .partition .purple-circle label {
        color: #ffffff !important;
        font-size: 1.25rem !important;
    }

.applyLicenseStates .state-container .partition .green-circle {
    background-color: #8AC149;
    width: 55px;
    height: 55px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .applyLicenseStates .state-container .partition .green-circle label {
        color: #ffffff !important;
        font-size: 1.25rem !important;
    }



.applyLicenseStates .state-container .partition .license-loading-container {
    height: 64px;
    align-content: center;
}

.applyLicenseStates .state-container .partition .license-loading {
    width: 24px;
    height: 24px;
}


.applyLicenseStates .state-container .partition .success-svg {
    width: 24px;
    height: 24px;
    fill: #8AC149;
}

.tile {
    border-radius: 7px;
    /*padding-right: 15px;
    padding-left: 15px;*/
    background-color: var(--color-purplelicense-tile);
    overflow: hidden;
    /*display: flex;
    align-items: center;*/
    min-height: 140px !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%), 0 2px 2px rgb(0 0 0 / 10%);
    border-top: 1px solid var(--color-purplelicense-tile);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.tile .selected-tile {
    background-color: #7058b7 !important; 
}

.tile .svg-outer {
    background-color: var(--color-purple-license-tile-disabled);
    border-radius: 10px;
    padding: 25px;
}

    .tile .svg-outer .svg {
        height: 50px;
        width: 50px;
        fill: #c2cad3;
    }

    .tile .svg-outer .svg-enabled {
        height: 50px;
        width: 50px;
        fill: white;
    }

.tile .content {
    height: 100%;
    padding-top:10px;
}

    .tile .content .val {
        font-size: 2.5rem;
        font-weight: 500;
        color: #393939;
        padding-left: 15px;
        text-align: left;
    }

    .tile .content .tile-title {
        /*font-size: clamp(12px,1vw,16px) !important;*/
        font-size: 1.188rem !important;
        font-weight: 600;
        color: #9296a3 !important;
        margin-bottom: 0px !important;
        /*overflow-wrap: anywhere;*/
    }

    .tile .content .tile-description {
        font-size: clamp(13px, 0.65vw,14px) !important;
        color: #9296a3 !important;
        margin-bottom: 0px !important;
        /*overflow-wrap: anywhere;*/
    }

    .tile .content .tile-title-enabled {
        /*font-size: clamp(12px,1vw,16px) !important;*/
        font-size: 1.188rem !important;
        font-weight: 600;
        color: var(--color-label) !important;
        margin-bottom: 0px !important;
        /*overflow-wrap: anywhere;*/
    }

    .tile .content .tile-description-enabled {
        font-size: clamp(13px, 0.65vw,14px) !important;
        color: var(--color-label) !important;
        margin-bottom: 0px !important;
        /*overflow-wrap: anywhere;*/
    }
.tile .switch-hover-container {
   display:flex;
   justify-content: flex-end;
}

.tile .switch-hover {
    font-size: 0.813rem !important;
    font-weight: 400;
    color: #7058b7 !important;
    margin-bottom: 0px !important;
    /*overflow-wrap: anywhere;*/
    position: absolute;
    bottom: 10px;
}

        .tile .switch-hover:hover {
            color: #7058b7 !important;
        }

.tile .align-item {
    display: flex;
    align-items: center;
}

.tile .row-height {
min-height:20px;
}

.profile-tile-outer {
    /*background-color: #EBEDEF;*/
    /*padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 7px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #dbdbdb;*/
}

.padding-right-20px {
    padding-right: 20px !important;
}

.height-width-0px {
    height: 0px;
    width:0px;
}

.flex-end-important {
    justify-content: flex-end !important;
}

.profile-svg {
width:20px;
height:20px;
fill: #7058b7;
margin-right:5px;
}

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

.primaryTable .ROD_headerGridDisabled {
    background-color: var(--color-rod-heading-disabled) !important;
    color: var(--color-button-disabled-text) !important;
    padding: 2px 7px 0px 13px !important;
}

.primaryTable .ROD_headerGrid {
    background-color: var(--color-table-header) !important;
    color: var(--color-svg-white) !important;
    padding: 2px 7px 0px 13px !important;
}

.primaryTable td {
    color: var(--color-label) !important;
}

.primaryTable tr th {
    color: var(--color-svg-white) !important;
    text-align: left;
}

.login-logo {
    display: flex;
    justify-content: space-between;
    padding-left: 25px;
    padding-right: 25px
}

 .login-logo svg {
    height: 48px;
    width: 360px;
}

.login-dots svg {
    width: 3px;
    height: 13px;
    cursor: pointer;
    fill: var(--color-dots-black); 
}

.company-container .block .title span{
    color: var(--color-label) !important;
}

textarea {
    background-color: var(--color-input-background);
    color: var(--color-label);
    border: 1px solid var(--color-input-border);
}


/****** START Material Switch BLUE *******/

.material-switch > input[type="checkbox"] {
    display: none !important;
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

.material-switch:disabled > label {
    cursor: default !important; 
}


    .material-switch > label::before {
        background: #b4b4b4;
        border-radius: 8px;
        content: '';
        height: 16px;
        margin-top: -8px;
        position: absolute;
        transition: all 0.4s ease-in-out;
        width: 40px;
    }

    .material-switch > label::after {
        background: #ffffff;
        border-radius: 16px;
        content: '';
        height: 22px;
        left: -4px;
        margin-top: -8px;
        position: absolute;
        top: -3px;
        transition: all 0.3s ease-in-out;
        width: 22px;
        box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 40%);
    }

.material-switch > input[type="checkbox"]:checked + label::before {
    background: #daceff;
}

.material-switch > input[type="checkbox"]:checked + label::after {
    background: #7058b7;
    left: 20px;
    box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 40%);
}


/****** END START Material Switch BLUE *******/

/****** START Material Switch DISABLED *******/

.material-switch-dis > input[type="checkbox"] {
    display: none;
}

.material-switch-dis > label {
    height: 0px;
    position: relative;
    width: 40px;
}

    .material-switch-dis > label::before {
        background: #dfe5eb;
        border-radius: 8px;
        content: '';
        height: 16px;
        margin-top: -8px;
        position: absolute;
        transition: all 0.4s ease-in-out;
        width: 40px;
    }

    .material-switch-dis > label::after {
        background: white;
        border-radius: 16px;
        content: '';
        height: 22px;
        left: -4px;
        margin-top: -8px;
        position: absolute;
        top: -3px;
        transition: all 0.3s ease-in-out;
        width: 22px;
        box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 40%);
    }

.material-switch-dis > input[type="checkbox"]:checked + label::before {
    background: #dfe5eb;
}

.material-switch-dis > input[type="checkbox"]:checked + label::after {
    background: #d1d7de;
    left: 20px;
    box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 40%);
}

/****** END START Material Switch DISABLED *******/



.ajax__calendar .ajax__calendar_container {
    border: 1px solid var(--color-context-menu-border) !important;
    background-color: var(--color-block-container) !important;
    color: var(--color-label) !important;
}

.ajax__calendar .ajax__calendar_other .ajax__calendar_day {
    background-color: var(--color-block-container) !important;
    border-color: transparent !important;
    color: var(--color-label) !important;
}

.ajax__calendar .ajax__calendar_dayname {
    border-bottom: 0px solid var(--color-context-menu-border) !important;
}

.ajax__calendar .ajax__calendar_day {
    border: 1px solid transparent !important;
}

.ajax__calendar .ajax__calendar_active .ajax__calendar_day {
    background-color: var(--color-menu-hover) !important;
    color: var(--color-label) !important;
}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {
    background-color: var(--color-menu-hover) !important;
    color: var(--color-label) !important;
}

.ajax__calendar .ajax__calendar_footer {
    border-top: 1px solid var(--color-context-menu-border) !important;
}

/*#ctl00_ContentPlaceHolder2_Ctrl_AdminReports1_ceFromSSR_daysTableHeaderRow td {
    border-bottom: 1px solid var(--color-context-menu-border) !important;
}*/


#ctl00_ContentPlaceHolder2_Ctrl_AdminReports1_ReportViewer2_fixedTable, #ctl00_ContentPlaceHolder2_Ctrl_UserReports1_ReportViewer2_fixedTable, #ctl00_ContentPlaceHolder2_Ctrl_SupervisorReports1_ReportViewer2_fixedTable, #ctl00_ContentPlaceHolder2_ctrl_TenantReports1_ReportViewer2_fixedTable, #ctl00_ContentPlaceHolder2_ReportViewer2_fixedTable {
    background-color: #ffffff;
}

#ctl00_ContentPlaceHolder2_ReportViewer2_ctl09::-webkit-scrollbar-thumb {
    background-color: #b9b9bc !important;
}

#ctl00_ContentPlaceHolder2_Ctrl_AdminReports1_ReportViewer2_ctl09::-webkit-scrollbar-thumb {
    background-color: #b9b9bc !important;
}

#ctl00_ContentPlaceHolder2_Ctrl_SupervisorReports1_ReportViewer2_ctl09::-webkit-scrollbar-thumb {
    background-color: #b9b9bc !important;
}

#ctl00_ContentPlaceHolder2_Ctrl_UserReports1_ReportViewer2_ctl09::-webkit-scrollbar-thumb {
    background-color: #b9b9bc !important;
}

#ctl00_ContentPlaceHolder2_ctrl_TenantReports1_ReportViewer2_ctl09::-webkit-scrollbar-thumb {
    background-color: #b9b9bc !important;
}

.color-span {
    color: var(--color-label) !important;
}

.four-eye-svg {
    z-index: 10;
    width: 24px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}


.email-info-svg {
    z-index: 10;
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
    padding-left: 10px; 
}

.drag-sort-handle {
    z-index: 10;
    width: 13px;
    height: 15px;
    fill: var(--color-svg-signature-fill);
    cursor: move;
    padding-left:5px;
}

.drag-sort-handle-disabled {
    z-index: 10;
    width: 13px;
    height: 15px;
    fill: var(--color-disbaled);
    cursor: default;
    padding-left: 5px;
}



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

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


.download-svg {
    width: 26px;
    height: 26px;
}


.no-hover {
    pointer-events: none;
}

.transcription-svg {
height:16px;
width:28px;
}

.transcription-error-svg {
    fill: red !important;
}

.transcription-disbaled-svg {
    height: 16px;
    width: 28px;
}


.shared-call-svg {
    height: 16px;
    width: 16px;
}

.shared-call-disbaled-svg {
    height: 16px;
    width: 16px;
}


textarea {
resize: none;
}
.bg-transpatent{
    background-color: transparent !important;
}

.ajax__dropdown_frame_line {
    background-color: transparent !important;
}

.ajax__dropdown_arrow {
    background-color: transparent !important;
}

.purple-pop-up-width{
    width:55vw !important;
}

.purple-pop-up-height {
    width: 64vh !important;
}

.page-note {
    margin: 20px;
    margin-left: 40px;
}

.font-weight-bold
{
    font-weight: bold;
}

.purple-error-note
{
    color:red;
}

.lbl-error-color{
    color: red !important
}

.server-flex{
    display: flex;
    justify-content: space-between;
}

.remote-server-led
{
    height:24px;
    width:24px;
}

.server-grey-led {
    fill: #B4B4B4;
}

.server-green-led {
    fill: #2FAE1D;
}

.server-red-led {
    fill: #B90010;
}

.server-yellow-led {
    fill: #E7BF03;
}

.width-50-per{
    width:50%;
}

.server-flex{
    display:flex;
    justify-content: center;
}

.server-align-items {
    align-items: center;
}

.system-audit-config{
    padding-left: 20px !important;
    padding-right:20px !important;
}



    .system-audit-config .left-child {
        border: 1px solid var(--color-context-menu-border);
        margin-right: 15px;
        padding-top: 13px;
        padding-right: 6px;
        padding-bottom: 20px;
        border-radius: 7px;
    }


    .system-audit-config .right-child {
        border: 1px solid var(--color-context-menu-border);
        padding-top: 13px;
        padding-right: 6px;
        padding-bottom: 20px;
        border-radius: 7px;
    }

.system-audit-config .site-menu{
    display:flex;
    justify-content:space-between;
}

    .system-audit-config .site-menu-dropdown{
        position: absolute;
        right: 0px;
        bottom: 15px;
    }

    .system-audit-config .serviceTableCellC {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }


.modal {
    position: fixed;
    z-index: 1050;
    display: none;
    overflow: hidden !important;
    outline: 0;
    bottom: auto;
    height: 100vh;
}

.modal-dialog {
    max-width: 580px !important;
    margin: auto !important;
}

@media (max-width: 767px) {

    .two-factor-auth {
        font-size: 1.563rem !important;
    }

    .auth-info-msg {
        font-size: 1.25rem !important;
    }

    .square {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.563rem !important;
    }
}

@media (min-width: 500px) {

    .modal-dialog {
        max-width: 500px !important;
        /* max-width: calc(100vw - 5%)!important; */
    }
}

@media (min-width: 768px) {
    .modal-dialog {
        max-width: 700px !important;
        /* max-width: calc(100vw - 20%)!important; */
    }
}

@media (min-width: 992px) {

    .modal-dialog {
        max-width: 800px !important;
        /* max-width: calc(100vw - 30%)!important; */
    }
}

@media (min-width: 1128px) {

    .modal-dialog {
        max-width: 800px !important;
        /* max-width: calc(100vw - 10%)!important; */
    }
}

@media (min-width: 1391px) {

    .modal-dialog {
        max-width: 800px !important;
        /* max-width: calc(100vw - 63%)!important; */
    }
}

.modal-content {
    min-height: 520px !important;
    overflow-y: auto;
}

.modal-contente {
    border-radius: 10px !important;
    position: relative !important;
    background: var(--color-block-container) !important;
    overflow: hidden !important;
    width: 100%;
}

.modal-header {
    background: #2f79fe;
}

.modal-headere {
    font-size: 0.813rem !important;
    font-weight: 600 !important;
    padding: 30px 30px 0px 60px;
    background: var(--color-block-container) !important;
    color: #5e5e5e !important;
    border-bottom: revert !important;
}

.header-tile {
    position: relative;
    overflow: auto;
    width: 100%;
}

.modal-bodye {
    padding: 35px 25px 35px 25px !important;
    overflow-y: auto;
    margin-top: 0px !important;
}

.two-factor-auth {
    text-align: center;
}

.two-factor-auth .lock-icon {
    margin-bottom: 20px;
}

    .two-factor-auth > label {
        font-size: 1.875rem !important;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
        color: var(--color-svg-signature-fill) !important;
        margin-bottom: 40px;
    }

.square-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.square {
    width: 60px;
    max-width: 60px;
    height: 60px;
    max-height: 60px;
    /* margin: 7px 15px 40px; */
    border-radius: 5px;
    border: 1px solid var(--color-input-border);
    background-color: var(--color-input-background);
    outline: none;
    color: var(--color-label) !important;
    text-align: center;
    font-size: 2.188rem;
    margin-right: 25px;
}

    .square:focus {
        border: solid 2px var(--color-input-border) !important;
    }

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

.twofactorinfo-container {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-info-msg .twofactorinfo {
    font-size: 1.25rem !important;
    color: var(--color-label);
    font-weight: bold;
    text-align: center;
}

    .auth-info-msg .svg-container {
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: 100%;
    justify-content: center;
}



.btn-cancel {
    width: 115px;
    height: 40px;
    margin-top: 40px;
    margin-right: 25px;
    border-radius: 10px;
    background-color: var(--color-button-background) !important;
    border: 2px solid var(--color-button-border);
    border-radius: 10px;
}

.btn-validate {
    width: 115px;
    height: 40px;
    border-radius: 10px;
    border: none;
    margin-top: 40px;
    cursor: default;
    color: var(--color-button-disabled-text);
    background-color: var(--color-button-disabled-background);
}

.btn-validate:focus {
    outline: none !important;
}

.btn-validate-opacity {
    opacity: 1 !important;
    background-color: var(--color-button-background) !important;
    cursor: pointer;
}

.pagesizecalc {
    height: calc(100vh - 0px) !important;
}

.auth-info-forgot {
    position: absolute;
    right: 25px;
}

.send-email-again {
 
    justify-content: center;
    display: flex;
     text-align: center; 
    width: 100%;
    margin-top:40px;
}

.send-email-again-margin {

    margin-top: 39.5px !important;
}

.send-email-again > label {
    text-decoration: underline;
    margin-bottom: 0px;
    cursor: pointer;
    color: var(--color-label);
    font-size: 0.875rem !important;
    font-weight: bold;
}

.Oval {
    width: 24px;
    height: 24px;
    background-color: var(--color-button-background) !important;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
}
.bw-uses {
    text-align: center;
}
.bw-uses label {
    text-align: center;
    color: var(--color-label);
    margin-top: 20px;
    margin-bottom: 0px !important;
}

.learn-more {
    text-align: center;
}

    .learn-more label {
        font-size: 0.875rem !important;
        font-weight: bold;
        color: var(--color-label);
        margin-top: 20px;
        text-decoration: underline;
        margin-bottom: 0px !important;
        cursor: pointer;
    }

.question-mark {
    width: 12px;
    height: 12px;
    fill: #FFFFFF;
}

.display-flex-center {
    display: flex;
    justify-content: center;
    width: 100%;
}


.CancelText {
    width: 49px;
    height: 24px;
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
    color: var(--color-svg-white) !important;
}


.emailtextbutton {
    width: 49px;
    height: 24px;
    font-size: 1.125rem;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
}

.importCloudPBXs {
   height:auto !important;
}

.color-red{
    color:red;
}


.rainbow-hub-info-svg {
    z-index: 10;
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
    position: relative;
    top: 4px;
}

.rainbow-hub-info-svg-container {
    padding-left:5px
}

.margin-top-8px {
    margin-top: 8px;
}

.copy-button {
    position: absolute;
    left: 230px;
    top: 8px;
}

.rainbow-chat-row {
    height: 436px;
    width: 350px;
    position: fixed;
    bottom: 45px;
    right: 11px;
    z-index: 98;
  /*  border: 1px solid var(--color-footer-border);*/
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, var(--context-menu-shadow));
}

.rainbow-chat-header {
    height: 36px;
    width: 100%;
    background-color: var(--color-pageheading);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.rainbow-chat-cross {
    width: 13px;
    height: 13px;
    fill: var(--color-svg-white) !important;
    cursor:pointer;
}

.rainbow-chat-logo {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-white) !important; 
    margin-right: 10px;
}

.rainbow-chat-row iframe {
    width: 100%;
    height: calc(100% - 36px);
    border: 1px solid var(--color-footer-border);
    border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
 
.floating-btn-action {
    bottom: 3rem;
    position: fixed;
    right: 1rem;
    z-index: 1000;
}

.floating-btn-fab {
    padding: 0;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-btn-custom {
    background-color: var(--color-left-menu-background);
    cursor:pointer;
}

.floating-btn-custom:hover {
    background-color: var(--color-left-menu-hover);
}

 
.rainbow-chat-svg {
    width: 24px;
    height: 24px;
    fill: var(--color-svg-white) !important;
}

/**/
 
/* animations to expand boxChrome, Safari, Opera */

@-webkit-keyframes openbox {
    0% {
        height: 0px;
        width: 0px;
    }

    100% {
        height: 436px;
        width: 350px;
    }
}

@keyframes openbox {
    0% {
        height: 0px;
        width: 0px;
    }

    100% {
        height: 436px;
        width: 350px;
    }
}

@-webkit-keyframes closebox {
    0% {
        height: 436px;
        width: 350px;
    }

    100% {
        height: 0px;
        width: 0px;
    }
}

@keyframes closebox {
    0% {
        height: 436px;
        width: 350px;
    }

    100% {
        height: 0px;
        width: 0px;
    }
}
 

div.chatBox {
    z-index: 100;
} 

.hide-chat {
    display: none;
}

.hide-chat-Box {
    -webkit-animation: closebox 0.25s ease-out;
    /* Chrome, Safari, Opera */

    animation: closebox 0.25s ease-out;
    height: 0 !important;
    width: 0 !important;
    display: none !important;
}

.show-chat-Box {
    -webkit-animation: openbox 0.25s ease-in;
    animation: openbox 0.25s ease-in;
    height: 436px;
    width: 350px;
}

.silent-monitor-chat{
    width:16px;
    height:16px;
}

.rainbow-chat-header .header-container {
    display: flex;
    align-items: center;
    color: var(--color-svg-white);
}

    .rainbow-chat-header .header-container label {
        color: var(--color-svg-white);
        margin-bottom:0px !important
    }


.searchBarParent {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 1rem 0;
    background-color: var(--base-shade-color);
    width: 100%;
}

.filter-container {
    display: flex;
/*    font-size: var(--size-tiny-plus);*/
    flex-wrap: wrap;
    width: 80%;
}

.filter-container {
    width: calc(100% - 200px) !important;
    justify-content: flex-end;
    height: 30px;
}

.connectedBtnLabel {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

#connectedBtnOptions {
    border: 1px solid;
    border-color: var(--color-left-menu-background);
    display: flex;
    border-radius: 3px;
    border-right:0px;
}

.btn-border-r {
    border-right: 1px solid !important;
    border-color: var(--color-left-menu-background) !important;
}

#connectedBtnOptions .filter-options {
    border-radius: 0px !important;
    border: 0px !important;
    padding: 6px 10px !important;
    border-right: 1px solid !important;
    border-color: var(--color-left-menu-background) !important;
}



.btnFilledBlue {
    background-color: var(--color-left-menu-background);
    border: 1px solid;
    border-color: var(--color-left-menu-background);
    color: #fff;
    cursor: pointer;
}


.btnNotFilledBlue {
    border: 1px solid;
    border-color: var(--color-left-menu-background);
    color: var(--color-label);
    background-color: var(--color-block-container);
    cursor: pointer;
}

    .btnNotFilledBlue:hover {
        background-color: var(--color-left-menu-background);
        color: #fff;
    }



.searchTextAdded {
    width: 200px !important;
}

.searchIcon {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.searchSvg {
    width: 100%;
    height: 100%;
    fill: #b9bdc9;
}

.searchInput {
    background: 0 0;
    border: none;
/*    font-size: var(--size-tiny-plus);*/
    width: 100%;
    color: var(--base-text-color);
    padding: 0 0 0 23px;
    font-weight: 400;
    outline: none;
    padding-top: 2px;
}

.searchClear {
    width: 18px;
    height: 18px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    cursor: pointer;
    fill: var(--base-text-color);
}

    .searchClear:hover {
        background: var(--base-icon-hover-color);
    }

    .searchClear > svg {
        width: 10px;
        height: 10px;
    }


.searchBar {
    padding: 5px 10px;
    border-radius: 15px;
    height: 30px;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    z-index: 100;
    background: var(--search-bg-color);
    width: 35px;
    transition: all .1s linear;
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-left: auto;
}

    .searchBar:hover, .searhBar:focus-within {
        width: 200px;
    }

.searchBar:hover .searchClear {
    display: flex;
}


.rbcButtons {
    position: relative;
    min-width: 74px;
    max-width: 124px;
    height: 30px;
    border-radius: 3px;
    padding: 5px 10px;
   /* font-size: 1.3rem;*/
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: none;
    transition: all 0.3s ease;
}

.combobox-width-auto {
    width: auto !important;
}

.padding-left-25px {
    padding-left: 15px !important;
}

#docs-overlay {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: var(--color-popup-docs-overlay);
    overflow: scroll;
}

#docs-container {
    position:relative;
    width: auto;
    margin: 20px auto;
    background-color: #fff;
    border: 1px solid var(--color-context-menu-border);
    padding: 100px 72px 80px 100px;
    max-width: 816px;
    min-height: 1056px;
}

#docs-content
{

}

.docs-cross {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
    cursor: pointer;
}

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


.table-bordered {
    border-collapse: collapse;
}

    .table-bordered thead th, .table-bordered thead td {
        border-bottom-width: 0px;
    }


    .table-bordered th, .table-bordered td {
        border: 1px solid #000;
    }

.player-queue-container {
    margin-right: 10px;
    position:relative;
}

    .player-queue-container .calls-count {
        position: absolute;
        top: -7px;
        right: -10px;
        height: 20px;
        width: 20px;
        background: var(--color-pageheading) !important;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        cursor:pointer;
    }

        .player-queue-container .calls-count > label {
            color: var(--color-svg-white);
            cursor:pointer;
        }

.player-queue {
    width: 24px;
    height: 24px;
    fill: var(--color-svg-signature-fill);
    cursor:pointer;
}


.player-queue-dis {
    width: 24px;
    height: 24px;
    fill: var(--color-disbaled);
    cursor: default;
}


.link-splitter {
    margin-right: 12px;
    height: 25px;
    border-radius: 4px;
    margin-bottom: 0px !important;
    border: 1px solid var(--lan-ddl-border);
    margin-left: 12px;
}


.player-playlist {
    width: 770px;
    left: -480px !important;
    padding:0px !important;
    z-index: 100 !important;
}

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


.playlist .heading-part
{
    height:36px;
    padding-left:15px;
    padding-right:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.playlist .heading-part > div> label
{
    margin-bottom: 0px !important;
    font-weight:bold;
}


.playlist .table-part {
    max-height: 349px;
    width:100%;
    padding-left: 17px;
    padding-right: 17px;
    padding-top: 17px;
    border-top: 1px solid var(--color-context-menu-border);
    border-bottom: 1px solid var(--color-context-menu-border);
}

.playlist .footer-part{
    width: 100%;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}


    .playlist .footer-part > div > input {
        background-color: transparent !important;
        color: var(--color-button-playlist) !important;
    }

#gvPlayList > thead > tr > th > span {
    font-size: 0.813rem !important
}

#gvPlayList > tbody :last-child > td {
  border-bottom: 0px !important
}



#gvPlayList > tfoot {
   display:none;
}




.dataTables_scrollHeadInner {
    width: 100% !important;
}

    .dataTables_scrollHeadInner > table {
        width: 100% !important;
    }


        .dataTables_scrollHeadInner > table > thead > tr > th > span {
            font-size: 0.813rem !important
        }

 


.dataTables_scrollFoot {
    display: none;
}


.playlist-btnPlay-svg {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-signature-fill);
}

.dashbord-260px {
   width: calc(100vw - 266px);
}

.dashbord-40px {
    width: calc(100vw - 46px);
}

.dashbord-104px {
    width: calc(100vw - 110px);
}

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

    .appearance .theme-container {
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
    }

        .appearance .theme-container > div > label {
            margin-bottom: 10px;
            margin-top: 10px;
            font-weight: bold;
        }



table.rtplogger-no-header thead {
/*    display:none;*/
}

.rtp-table-widths-30{
    width : 20%;
    padding-left:5px !important;
}


.rtp-table-widths-25 {
    width: 18%;
    padding-left: 2.7px !important;
}

.rtp-table-widths-20 {
    width: 17%;
}

.rtp-table-widths-10 {
    width: 10%;
}

.rtp-table-widths-5 {
    width: 5%;
    padding-left: 8.4px !important;
}

.rtp-table-padding {
    padding-left: 7.3px !important;
}


.rtp-table-widths-2 {
    width: 2%;
    padding-left: 0px !important;
}

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


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

.appearance .CallAI-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-input-border);
    border-radius: .25rem;
    width: 380px;
    height: 150px;
}
.dbigTileSettingsCallAI {
    border: 1px solid #cbcdce;
    border-radius: 5px;
    min-height: 250px;
    max-height:100%;
    padding: 10px;
    text-align: center;
    min-width:363px;
   max-width:100%;
}

.CallAI-chart-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
 
}

    .CallAI-chart-row .first {
        width: 100% !important;
    }

    .CallAI-chart-row .second {
        width: 100% !important;
  
    }
    .CallAI-chart-row .third {
        width: 100% !important;
    }
 

    .CallAI-chart-row .chart-header {
        display: flex;
        justify-content: space-between;
    }

    .CallAI-chart-row .chart-size {
        width: 100% !important;
  
    }



.CallAI-chart-first-row {
    width: 100% !important;
}


    .CallAI-chart-first-row .chart-header {
        display: flex;
        justify-content: space-between;
    }

    .CallAI-chart-first-row .chart-size {
        width: 100% !important;
        height: 253px;
    }

.CallAI-chart-recordedcalls-row {
    width: 100%;
    margin-bottom: 20px;
}


    .CallAI-chart-recordedcalls-row .chart-header {
        display: flex;
        justify-content: space-between;
    }

    .CallAI-chart-recordedcalls-row .chart-size {
        width: 100%;
        height: 253px;
    }
.CAigTileSettings {
    border: 1px solid #cbcdce;
    border-radius: 5px;
   
    padding: 10px;
    text-align: center;
}


.height-100{
    height: 100% !important;
}

.padding-top-15px
{
    padding-top: 15px !important;
}

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


.min-height-20px
{
    min-height: 20px !important;
}

.height-15px
{
    height: 15px !important;
    min-height: 15px !important;
}

.footer-container {
    height: 36px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100%;
    background: var(--color-header);
    z-index: 0;
    border-top: 1px solid var(--color-footer-border);
    font-size: 0.75rem;
    text-align: right;
    padding-right: 20px;
    padding-top: 9px;
    color: var(--color-label);
    font-weight: 600;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 50px;
}

.move_accessibility_div {
    position: fixed !important;
    right: 0 !important;
    top: -55px !important;
    width: 25px;
    height: 30px;
    transition: 0.4s ease-out;
    z-index: 99;
}

    .move_accessibility_div:hover {
        width: 100px;
        transform: translate(0px, 50px) !important;
    }

.move-icon-with-div {
    top: 30px;
}

.activeTop {
    width: 100px;
    transform: translate(0px, 50px) !important;
}


/* Accessibility Position Change */

.moveright {
    right: 30px !important;
}

.moveleft {
    left: 60px !important;
}

.moveup {
    top: 110px !important;
}

.movedown {
    bottom: 30px !important;
}

.move_accessibilitymanu_left {
    left: 130px !important;
}

.move-accessibility-top {
    top: 0 !important;
}

#ddlLan:focus-visible {
    outline: 3px solid var(--color-dots-hover) !important;
    outline-offset: -1px;
}

.lan-block .menu .lan-item:focus-visible {
    background-color: var(--color-menu-hover);
    color: var(--color-label);
    border-radius: 2px;
}

.menu-icon .connected_user:focus-visible {
    background-color: var(--color-dots-hover);
       border-radius: 4px;
       outline:none;
 
}

.menu-icon #ddl-menu .div-hover:focus-visible  {
    background-color: var(--color-menu-hover);
    cursor: pointer !important;
    border-radius: 4px;
}

.min-height-60vh {
    min-height: 60vh;
}

.ai-disclaimer {
    background-color: var(--color-ai-disclaimer);
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px;
}

    .ai-disclaimer > label {
        color: #828282;
        font-size: 12px !important;
        margin-bottom: 0px !important;
    }


.azure-chat-row {
    height: 72vh;
    width: 480px;
    position: fixed;
    bottom: 45px;
    right: 11px;
    z-index: 98;
    /*  border: 1px solid var(--color-footer-border);*/
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, var(--context-menu-shadow));
    min-height: 32vh !important;
    max-height: 72vh;
}

    .azure-chat-row iframe {
        width: 100%;
        height: 100%;
        border: 1px solid var(--color-footer-border);
        border-radius: 8px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

.chat-container {
    height: calc(100% - 36px);
}

#drag-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    display: none; /* shown only while dragging */
    z-index: 999999; /* must be on top of iframe */
}

.resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 100%;
    cursor: ew-resize;
    z-index: 1000;
    /*    background: linear-gradient( to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100% );*/
    border-left: 2px solid rgba(var(--color-chat-border), 0.3) !important;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding-left: 2px;
}

    .resize-handle svg {
        width: 18px;
        height: 18px;
        pointer-events: none;
        opacity: 0.6;
        transition: opacity 0.2s ease;
        flex-shrink: 0;
    }

    .resize-handle:hover {
        background: linear-gradient(to right, rgba(var(--color-chat-border), 0.25) 0%, rgba(var(--color-chat-border), 0.15) 50%, rgba(var(--color-chat-border), 0.05) 100%);
        border-left-color: rgba(var(--color-chat-border), 0.5);
        width: 13px;
    }

        .resize-handle:hover svg {
            opacity: 0.9;
        }

    .resize-handle:active {
        background: linear-gradient( to right, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.1) 100% );
        border-left-color: rgba(255, 255, 255, 0.7);
    }

        .resize-handle:active svg {
            opacity: 1;
        }
.resize-handle-vertical {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 10px;
    cursor: ns-resize;
    z-index: 1001;
    background: linear-gradient( to bottom, rgba(var(--color-signature), 0.3) 0%, rgba(var(--color-signature), 0.2) 50%, rgba(var(--color-signature), 0.1) 100% );
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding-bottom: 2px;
    pointer-events: auto;
    touch-action: none;
}

    .resize-handle-vertical svg {
        width: 18px;
        height: 18px;
        pointer-events: none;
        opacity: 0.6;
        transition: opacity 0.2s ease;
        flex-shrink: 0;
    }

    .resize-handle-vertical:hover {
     /*   background: linear-gradient( to bottom, rgba(var(--color-signature), 0.5) 0%, rgba(var(--color-signature), 0.35) 50%, rgba(var(--color-signature), 0.2) 100% );*/
        border-bottom-color: rgba(255, 255, 255, 0.7);
        height: 14px;
    }

        .resize-handle-vertical:hover svg {
            opacity: 0.9;
        }

    .resize-handle-vertical:active {
        background: linear-gradient( to bottom, rgba(var(--color-signature), 0.7) 0%, rgba(var(--color-signature), 0.5) 50%, rgba(var(--color-signature), 0.3) 100% );
    }

        .resize-handle-vertical:active svg {
            opacity: 1;
        }

.azure-chat-logo {
    width: 16px;
    height: 16px;
    fill: var(--color-svg-white) !important;
    margin-right: 10px;
    margin-left:7px;
}

.azure-chat-cross {
    width: 13px;
    height: 13px;
    fill: var(--color-svg-white) !important;
    cursor: pointer;
    margin-right:10px;
}


div.azureai-chatBox {
    z-index: 100;
}


.azureai-chat-header {
    height: 36px;
    width: 100%;
    background-color: var(--color-pageheading);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

    .azureai-chat-header .header-container {
        display: flex;
        align-items: center;
        color: var(--color-svg-white);
    }

        .azureai-chat-header .header-container label {
            color: var(--color-svg-white);
            margin-bottom: 0px !important
        }

.hide-chat-Box {
    -webkit-animation: closebox 0.25s ease-out;
    /* Chrome, Safari, Opera */

    animation: closebox 0.25s ease-out;
    height: 0 !important;
    width: 0 !important;
    display: none !important;
}


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




.process-elipses {
    padding-top: 0px;
    margin: 3px;
    margin-top: 0px;
    white-space: nowrap;
    width: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.process-elipses-legacy {
    padding-top: 0px;
    margin: 3px;
    margin-top: 0px;
    white-space: nowrap;
    width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*:focus-visible {
    outline: 0.2rem solid var(--color-button-background);
    border-radius: 2px;*/
    /*    box-shadow: 0 0 0 2px var(--color-button-background), 0 0 0 4px var(--color-button-background);*/
/*}*/


a:focus-visible {
    color: #7058b7 !important;
}

.textbox:focus-visible, .multitextbox:focus-visible {
    border: 2px solid #7058b7;
}

.combobox:focus-visible, .listbox:focus-visible, select:focus-visible {
    border: 2px solid #7058b7;
}

.button:focus-visible {
    background-color: #5d479d !important;
    outline: none;
}

.search-btn-delete-svg:focus-visible {
    fill: var(--color-svg-focus-visible) !important;
    outline: none;
}

.login-dots:focus-visible {
    background-color: var(--color-dots-hover) !important;
    outline:none;
}

#menuLogin:focus-visible {
    background-color: var(--color-dots-hover) !important;
    outline: none;
}

.smallButton:focus-visible {
    border: 2px solid #5d479d;
}

.search-data:focus-visible {
    border-bottom: 2px solid #5d479d;
    outline: none;
}


.btn-delete-svg:focus, .btn-edit-svg:focus, .btn-copy-svg:focus, .btn-share-svg:focus, .btn-sync-svg:focus, .player-full-screen-svg:focus, .player-info-svg:focus, .player-cross-svg:focus {
    outline: none;
}


.btn-delete-svg:focus-visible, .btn-edit-svg:focus-visible, .btn-copy-svg:focus-visible, .btn-share-svg:focus-visible, .btn-shared-svg:focus-visible, .btn-sync-svg:focus-visible, .player-full-screen-svg:focus-visible, .player-info-svg:focus-visible, .player-cross-svg:focus-visible,
.btnMute:focus-visible, .btn25:focus-visible, .btn50:focus-visible, .btn75:focus-visible, .btn100:focus-visible, .gain-menu-arrowup:focus-visible, .player-btnRev-svg:focus-visible, .player-btnPlay-svg:focus-visible, .player-btnPause-svg:focus-visible, .player-btnStop-svg:focus-visible,
.player-btnFwd-svg:focus-visible, .fastfoward:focus-visible, .gain-menu-arrowup:focus-visible, .bookmark-cross-svg:focus-visible, .btnMute:focus-visible, .btnMute:focus-visible, .btnMute:focus-visible, .btnMute:focus-visible, .btn-edit-disabled-svg:focus-visible, .player-btnNext-svg:focus-visible, .player-graphMenu-svg:focus-visible, .graphMenu-menu-arrowup:focus-visible, .player-skipSilence-svg:focus-visible, .skipSilence-menu-arrowup:focus-visible {
    fill: var(--color-svg-focus-visible) !important;
    outline: none;
}

.player-menu-icon #ddl-menu .div-hover:focus {
    background-color: var(--color-menu-hover);
    cursor: pointer !important;
    border-radius: 4px;
}

input[type="checkbox"]:focus-visible {
    outline: 1px solid #5d479d !important;
    outline-offset: 1px;
}

.FlagsContexMenu:focus-visible {
    outline: 1px solid #5d479d !important;
    outline-offset: 1px;
}

#ImgbtnFirst:focus-visible, #ImgbtnPrevious:focus-visible, #ImgbtnNext:focus-visible, #ImgbtnLast:focus-visible {
    outline: 1px solid #5d479d !important;
    outline-offset: 1px;
}

:focus {
    outline: none !important
}

.button-accessibility:focus-visible {
    background-color: #5d479d !important;
    outline: none;
}