@font-face {
    font-family: 'Noto-Sans';
    src: url(../fonts/NotoSans-VariableFont_wdth,wght.ttf);
    font-weight: 100 900;
}

/*Change Chrome's new blue checkbox/radio styling to a grey*/

input[type="radio"], input[type="checkbox"] {
    filter: saturate(0);
}

html {
    font-size: 14px;
}

body {
    font-family: 'Noto-Sans',sans-serif !important;
    color: #404040;
}

input.igte_Edit,
input.igte_EditInContainer {
    font-family: 'Noto-Sans',sans-serif;
    font-size: 14px;
}

.dataTree > table {
    /*    font-family: Arial, Helvetica, sans-serif;*/
    font-family: 'Noto-Sans',sans-serif !important;
    font-weight: 600;
}

.footerSpace {
    height: 75px;
}

div.modal-body {
    font-weight: 300;
    line-height: 1.75em;
}

h4.modal-title,
div.modal-title {
    font-weight: 400;
    font-weight: 400;
}


td:focus {
    outline: none;
}

.reportName {
    font-size: x-large;
    font-weight: bolder;
    color: #414141;
}

/*START PANELS*/

.dashboardSettingsButtonPanel {
    background: white;
    border-radius: 4px;
    color: #444444;
    display: flex;
    align-items: center;
    align-content: center;
    gap: 0;
}

.dashboardSettingsImageButtonsLeft {
    height: 14px;
    width: 9px;
    margin-left: 3px;
}

.dashboardSettingsImageButtonsRight {
    height: 14px;
    width: 9px;
    margin-right: 3px;
    margin-left: 1px;
}

.dashboardSettingsText {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* General Panel*/


.genPanels {
    background: #A8E2FF;
    border-radius: 4px;
    margin-bottom: 10px;
    z-index: 10;
    padding: 10px;
    display: inline-block;
}

div.genPanels > legend {
    display: inline-block;
}

div.genPanels.no-top-radius {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.moveablePanel {
    position: absolute;
}

/*Hold tabs for bootstrap tabbed menus*/
.panTabHolder {
    background: #A8E2FF;
    border-radius: 4px;
    margin-bottom: 0px;
    border-bottom: 0px;
    position: relative;
    top: 2px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.panTabContent {
    border-top: 0px;
}

.errorPanel {
    background-color: #ff3333 !important;
    color: black;
    border-radius: 4px;
    padding-top: 30px;
}

/*.innerPanel {
    border: none;
    margin-bottom: 0px;
}*/

div.import-panel {
    padding: 0.75em;
    border-radius: 4px;
    border: 1px solid white;
}

    div.import-panel hr {
        margin-top: 0.75em;
        margin-bottom: 0.75em;
    }

    div.import-panel div.panel-header,
    div.panel-header {
        font-size: 1.25em;
        font-weight: 500;
    }

/*Panels to float next to each other*/

.columns {
    display: inline-block !important;
    padding: 10px !important;
    vertical-align: text-top !important;
}


.centeredPanel {
    margin: auto;
    padding: 10px;
    width: 50%;
    overflow: hidden;
    display: block !important;
}
/*END PANELS*/

/*HERE FOR CSS CHECKING*/
/*fonts were bolded by default for radio options*/

.importRadio {
    display: inline-flex;
    flex-direction: row;
    gap: 0.5em;
    justify-content: flex-start;
    align-items: center;
}

    .importRadio > label,
    .importRadio > input[type=radio] {
        margin: 0;
    }


/*START HEADER*/

.masterHeader {
    overflow: hidden;
    position: relative;
}

.lowerRight {
    position: absolute;
    right: 0;
    bottom: 0;
}

.versionText {
    color: black;
    vertical-align: bottom;
}

.masterLogo {
    display: inline-block;
    vertical-align: bottom;
}


.companyHeader {
    display: inline-block;
    max-width: 400px;
    margin-left: 10px;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
}


/*START DROPDOWNLIST AREA*/

/*DropdownList Menu*/

/* Changes to bootstrap select (dropdown menu styling)*/


/*this is not working dropdown areas are still side just show thin till dropdown*/


.dropdownButtons > .btn > div {
    background-color: white !important;
}

/*Selected dropdownlist element*/

div.dropdownButtons > button.btn.dropdown-toggle {
/*    border: 1px solid #000 !important;*/
/*    border-color: black;*/
    border-radius: 4px;
    padding: 0;
    padding-left: 0.5em;
    vertical-align: middle;
    height: 25px;
    display: inline-block;
    font-weight: 500;
}

div.genPanels.panel.panel-primary {
    font-weight: 300;
}

    div.genPanels.panel.panel-primary .adminTextbox,
    div.genPanels.panel.panel-primary input {
        font-weight: 400;
    }

div.genPanels hr {
    margin-bottom: 1em;
    margin-top: 1em;
}

/*Outline of selected item in dropdown list*/

.dropdownButtons > div > .selected {
    border-color: black !important;
}

/*END DROPDOWNLIST AREA*/

.label, .glyphicon {
    margin-right: 5px;
}

div.admingrid span.glyphicon.glyphicon-check,
div.admingrid span.glyphicon.glyphicon-unchecked {
    cursor: not-allowed;
}
/*Button Groups*/
.btn-margin {
    display: flex;
    flex-direction: row;
    margin-top: 1.25em;
    justify-content: flex-end;
}

/*START Trees in panels*/


div.checkbox-tree.ig_Control * {
    color: white;
    text-decoration: none;
}

div.checkbox-tree.ig_Control img:nth-child(2) {
    cursor: pointer;
}

/*END Trees in panels*/
/* CallTypes Specific Tree (no collapse)*/
#cpMainContent_wdtCallTypes > ul > li > img:first-of-type {
    display: none;
}

/*Start Security Users Tree*/

div.security-rolefunctions-tree.ig_Control * {
    font-family: 'Noto-Sans',sans-serif;
    color: white;
    text-decoration: none;
    cursor: default;
    text-decoration: none;
}

div.security-rolefunctions-tree.ig_Control li a {
    font-size: 1rem;
}

    div.security-rolefunctions-tree.ig_Control li a.igdt_NodeRoot {
        font-size: 1.25rem;
    }

/*START Stored/Scheduled Reports Grid*/


.sGrids {
    border-color: black;
    border-width: 1px;
    border-style: solid;
    width: 80%;
}

/*END Stored/Scheduled Reports Grid*/

div.email-list.genPanels {
    padding: 0;
    width: 100%;
    border: none;
    max-height: 60vh;
    overflow-y: auto;
}


/* Styling for most input boxes in the admin area, padding to match the dropdowns*/
/* commented out vertical-align, was probably used incorrectly and matches up better now when trying to do columns better
    Clayton 01/10/19*/
genPanel input.adminTextBox,
input.adminTextBox {
    border: 1px solid #808080 !important;
    border-color: #262626;
    border-radius: 4px;
    padding: 3px 5px;
    height: 25px;
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 400;
}

    input.adminTextbox.text-right {
        text-align: right;
    }

.grids input.adminTextBox {
    width: 100%;
}

.grids-sm input.adminTextBox {
    width: 100px;
}

.grids > div {
    display: inline-flex;
    align-items: center;
}

.grids .dropdownButtons,
.grids .dropdownButtons button {
    margin: 0;
    padding: 0;
}

div.grids div input.adminTextBoxLong,
.adminTextBoxLong {
    width: 200px;
}

.editControl {
    display: block;
}


.adminLabels {
    line-height: 25px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 5px;
}

.emailTextbox {
    min-width: 400px;
    color: black;
    padding: 2px;
    border-color: black;
}

.notesTextBox {
    border: 1px solid #B1B1B1 !important;
    border-color: black;
    border-radius: 4px;
    padding: 3px 5px;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 5px;
    min-width: 50%;
    color: black;
    height: 125px;
    border-radius: 3px;
    line-height: 20px;
}

/* Below added in to override bootstrap's values*/


/* To style the panel's group headings*/

div > fieldset > legend,
.panel > fieldset > legend,
.inPanel > fieldset > legend,
.font-s-21 {
    font-size: 21px;
    color: white;
}


.admingrid {
    /*    font-family: 'Century Gothic', CenturyGothic !important;*/
    font-family: 'Noto-Sans',sans-serif !important;
}

/*Change font of row items (all grids!)*/
.ig_Item {
    /*    font-family: 'Century Gothic', CenturyGothic, Arial, Verdana !important;*/
    font-family: 'Noto-Sans',sans-serif !important;
    font-size: 12px;
}

div .admingrid {
    border: none;
}

.admingrid tbody.igg_Item > tr > td {
    border-top: none;
    border-bottom: none;
    padding-top: 6px;
    padding-bottom: 6px;
}

.navbar-nav > li a:focus, .navbar-nav > li a:hover {
    background: #82D7FF !important;
}

#mnuLogin {
    text-align: center !important;
}

.mnuLoginSmall {
    font-size: 12px !important;
}


/*General styling for the rounded corners*/
admingrid.tobdy.igg_IGHeaderCaption > tr > th {
    white-space: nowrap !important;
}

.igg_HeaderCaption {
    white-space: nowrap !important;
    background-color: #ff0000 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding-left: 6px !important;
}

/*VR Playback Button Override*/

/*This was the new fix for the VR playback*/
/*Clayton 01/17*/
#viewer-layout-main-panel > div > div > div > div > span {
    z-index: 999 !important;
}

/*New selector for sidebar, disabled rest of CSS*/

#documentMapPanel > ul > li {
    font-weight: bolder;
    font-size: 14px;
    color: black !important;
}

#viewer-layout-main-panel {
    /*line-height:normal!important;*/
}

    /*For speaker icons to line up correctly*/
    #viewer-layout-main-panel > div > div > div > div > span > a {
        /*font-size:10px;*/
    }

        #viewer-layout-main-panel > div > div > div > div > span > a > img {
            vertical-align: baseline;
        }

.noWrapCellStyle {
    white-space: nowrap;
}

tbody.gridOverflowStyle tr td {
    overflow: visible;
}

.callPlayer {
    padding-top: 10px;
}

.reportRules {
    border-color: red;
    color: red;
    border-radius: 3px;
    border-width: thin;
}
/*Hidden Buttons*/

.sortGrids {
    display: inline-block;
    height: 400px !important;
}

/* Bootstrap-submenu would open navbar-right submenus to the left
    This overrides that for regular sized screens. The small screens
    were already working. The 2nd one changes the caret position
    */
@media (min-width: 768px) {

    .dropdown-menu-right .dropdown-submenu .dropdown-menu,
    .navbar-right .dropdown-submenu .dropdown-menu {
        left: 100%;
        right: auto;
        border-top-right-radius: 4px;
        border-top-left-radius: 0;
    }

    .dropdown-menu-right .dropdown-submenu > a:after,
    .navbar-right .dropdown-submenu > a:after {
        float: right;
        margin-top: 6px;
        margin-right: -10px;
        border-left: 4px dashed;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
    }

    #mnuAdvancedSettings:after {
        float: left;
        border-left: none;
        margin-left: -10px;
        margin-right: 0;
        border-right: 4px dashed;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
    }

    .menu-left {
        left: auto !important;
        right: 100% !important;
        border-top-left-radius: 4px !important;
        border-top-right-radius: 0 !important;
    }
}

/* Used for labels in a column simulating a table for spacing with the adminTextbox*/


/*More table**/


.tableCell {
    height: 35px;
    vertical-align: middle;
}

/*OVERLAY FOR AJAX REQUESTS*/

.overlay {
    position: fixed;
    z-index: 98;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(170,170,170, 0.8);
    filter: alpha(opacity=80);
    opacity: 1;
}

.overlayContent {
    z-index: 97;
    margin: 250px auto;
    width: 375px;
    height: 80px;
    background: rgba(255,77,77, 1);
    border-radius: 3px;
    border-color: black;
    border-width: 10px;
    opacity: 1;
}

.ajaxProcessing {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    color: #000;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
    opacity: 1;
    border-radius: 5px;
    border-width: 10px;
    border-color: black;
    margin-left: 25px;
}

    .ajaxProcessing:after {
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        -webkit-animation: ellipsis steps(4,end) 900ms infinite;
        animation: ellipsis steps(4,end) 900ms infinite;
        content: "\2026"; /* ascii code for the ellipsis character */
        width: 0px;
    }

@keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

.overlayContent h2 {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    color: #000;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
    opacity: 1;
    border-radius: 5px;
    border-width: 10px;
    border-color: black;
}

.overlayContent2 {
    z-index: 97;
    margin: 250px auto;
    width: 350px;
    height: 115px;
    background: rgba(255,77,77, 1);
    border-radius: 3px;
    border-color: black;
    border-width: 10px;
    opacity: 1;
}

    .overlayContent2 h2 {
        font-size: 30px;
        font-weight: bold;
        color: #000;
        text-align: center;
        vertical-align: middle;
        line-height: 40px;
        opacity: 1;
        border-radius: 5px;
        border-width: 10px;
        border-color: black;
        padding-top: 20px;
        margin-bottom: 5px;
    }

.overlayContent img {
    width: 80px;
    height: 80px;
}

.loadSpinner {
    border: 4px solid #d9d9d9;
    border-top: 4px solid #666666;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 2s linear infinite;
    display: block;
    margin: auto;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.ajaxSpinner {
    border: 15px solid #d9d9d9;
    border-top: 15px solid #666666;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    animation: spin 2s linear infinite;
    display: block;
    margin: auto;
}

.ajaxOverlay {
    position: fixed;
    z-index: 98;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(242, 242, 242, 0.5);
}

.transcription-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(242, 242, 242, 0.5);
    z-index:50;
}

.ajaxSpinnerContainer {
    z-index: 97;
    margin: 250px auto;
    width: 375px;
    height: 80px;
    border-radius: 3px;
    border-color: black;
    border-width: 10px;
    opacity: 1;
}

.centerMe {
    margin: auto;
    text-align: center;
}

.centerMeBlock {
    margin: auto;
    text-align: center;
    display: block;
    padding-bottom: 5px;
}

.formLabel {
    width: 100px;
    display: inline-block;
}

/*Printer Icon for webviewer HTML */

input.printerButton btnPrintLocal {
    background-image: url(/images/Print.ico); /* 16px x 16px */
    background-color: green; /* make the button transparent */
    background-repeat: no-repeat; /* make the background image appear only once */
    background-position: 0px 0px; /* equivalent to 'top left' */
    border: none; /* assuming we don't want any borders */
    cursor: pointer; /* make the cursor like hovering over an <a> element */
    height: 25px; /* make this the size of your image */
    vertical-align: middle; /* align the text vertically centered */
}

.btnPrintLocal2 {
    background-image: url(/images/Print.ico);
    margin-right: 10px;
}

/*DASHBOARD User CSS*/

.grid12 > table > tbody > tr > td > table > tbody > tr > td > div > table > tbody > tr > td {
    font-size: 12px !important;
}

.grid12 > table > tbody > tr > td > table > tbody > tr > td > div > table > tbody > tr > th {
    font-size: 14px !important;
}

.grid14 > table > tbody > tr > td > table > tbody > tr > td > div > table > tbody > tr > td {
    font-size: 14px !important;
}

.grid14 > table > tbody > tr > td > table > tbody > tr > td > div > table > tbody > tr > th {
    font-size: 16px !important;
}

.grid16 > table > tbody > tr > td > table > tbody > tr > td > div > table > tbody > tr > td {
    font-size: 16px !important;
}

.grid16 > table > tbody > tr > td > table > tbody > tr > td > div > table > tbody > tr > th {
    font-size: 18px !important;
}

.grid18 > table > tbody > tr > td > table > tbody > tr > td > div > table > tbody > tr > td {
    font-size: 18px !important;
}

.grid18 > table > tbody > tr > td > table > tbody > tr > td > div > table > tbody > tr > th {
    font-size: 20px !important;
}

.gridBold {
    font-weight: bold !important;
}

/*DASHBOARD GENERAL CSS*/

.dashPanel {
    display: inline-block !important;
    padding: 10px;
    vertical-align: text-top !important;
    border-color: red !important;
}

    .dashPanel > fieldset {
        text-align: center;
        font-size: larger;
    }

        .dashPanel > fieldset > legend {
            font-weight: bolder;
        }

.ratePanelTitle {
    text-align: center;
    font-weight: bold;
    display: block;
}

.ratePanel {
    border: 1px;
    border-color: #808080;
    border-radius: 2px;
    border-style: solid;
    margin-bottom: 5px;
}

.panelBorder {
    border: 1px;
    border-color: #808080;
    border-radius: 3px;
    border-style: solid;
    margin-bottom: 5px;
    padding: 1em;
}

/*Infragistics Edit Overrides*/

.menuSpacer {
    height: 5px;
    border-bottom: solid;
    border-width: 1px;
    border-color: black;
}

.textWidthChecker {
    font-family: 'Noto-Sans',sans-serif !important;
    text-align: left;
    font-size: 14px;
    text-transform: uppercase;
    padding-left: 8px;
    font-weight: bold;
    color: white !important;
}

.rowTextWidthChecker {
    /*    font-family: "Century Gothic";*/
    font-family: 'Noto-Sans',sans-serif !important;
    text-align: left;
    font-size: 13px;
    padding-left: 8px;
    padding-right: 8px;
    color: white !important;
}


/*Call recordings view imagine button*/

.gridPlayButton {
    height: 24px;
    width: 24px;
}

.gridUpDownArrows {
    height: 15px;
    width: 20px;
    display: block;
    padding: 3px;
}

.gridLeftRightArrows {
    height: 20px;
    width: 15px;
    display: block;
    padding: 3px;
    margin: auto;
}

    .gridLeftRightArrows:focus {
        outline: none;
    }

.gridSelectDeleteX {
    height: 20px;
    width: 20px;
    display: inline;
    float: right;
}

.gridToggleButton {
    height: 25px;
    width: 50px;
}

.centerGridItem {
    display: block;
    margin: auto;
}

.centerGridCheckbox {
    text-align: center !important;
    vertical-align: middle !important;
}

.hiddenColumn {
    display: none;
}

.rbList > tbody > tr > td > label {
    font-size: 14px;
    font-weight: 300;
    margin-left: 5px;
}

table.rbList label {
    font-size: 14px;
    font-weight: 300;
    margin-left: 5px;
}

table.rbList tbody td,
div.radio-single {
    display: flex;
    flex-direction: row;
    margin: 0 0 0.25em 0;
    gap: 0.75em;
    align-content: center;
}

    div.radio-single input[type=radio] {
        margin: 0;
    }

    table.rbList tbody td > label,
    table.rbList tbody td > input {
        margin: 0
    }

ul.panTabs li,
.panTabs li a.tabTitles{
    font-weight: 400;
}

.panTabs > li > a:hover,
.panTabs > li.active > a {
    background-color: #cccccc !important;
}

.criteriaGrid .igg_HeaderCaption {
    display: none !important;
}

/*Alert CSS*/

.alert-collection {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

    .alert-collection hr {
        border-top-color: #f7e1b5;
    }

    .alert-collection .alert-link {
        color: #66512c;
    }

.alert-call {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

    .alert-call hr {
        border-top-color: #f7e1b5;
    }

    .alert-call .alert-link {
        color: #66512c;
    }

.alertLink {
    color: white;
    font-weight: 500;
    text-decoration: underline;
}

    .alertLink:hover {
        color: white;
        font-weight: 500;
    }

.reportSaveLabel {
    font-size: 18px;
}

.reportSaveLabelBuffer {
    display: block;
    height: 10px;
}

.audioConvertAjax {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 99;
    top: 0;
    left: 0;
    text-align: center;
    font-weight: bolder;
    color: black;
    border-radius: 4px;
    background-color: rgba(255,51,51, 1);
    font-size: 1.5em;
}

.audioConvertText {
    margin-left: 40px;
}

.audioContainer {
    position: relative;
    min-height: 60px;
}

.panCallPlayer {
    min-width: 320px;
}

.wdpText {
    position: relative;
    top: -5px;
}

.wpdContainer {
    margin-top: 5px;
}

.logDateSelect {
    height: 40px;
}

.removeButton {
    margin: 0 auto;
    border: none;
    background-color: inherit;
    font-size: larger;
    font-weight: bolder;
}

.removeButtonWrapper {
    text-align: center;
}

.columnTitle {
    font-size: 16px;
}

.alert-userMessage {
    background-color: #414141;
    color: white;
    border: 1px solid #cccccc;
    font-weight: 300;
}

    .alert-userMessage > .close {
        color: #999999;
        opacity: 1;
        text-shadow: none;
    }


/* Delete Modals*/

.delClose {
    color: white;
    opacity: 1;
}


    .delClose:hover {
        color: #808080;
        text-decoration: none;
        cursor: pointer;
        filter: alpha(opacity=50);
        opacity: 1;
        text-shadow: none;
    }

.gridTitle {
    font-size: 18px;
}

.callAlert {
    border-radius: 4px;
    padding: 10px;
    background: #414141;
    border-color: black;
    color: white;
}

.callAlertTitle {
    font-size: 18px;
}

.callAlertClose {
    color: white;
    opacity: .6;
    font-weight: 300;
    z-index: 99;
}

    .callAlertClose:hover {
        opacity: .2;
        color: white;
        text-shadow: none;
        font-weight: 300;
    }

    .callAlertClose:focus {
        opacity: .2;
        color: white;
        text-shadow: none;
        font-weight: 300;
    }

.inTabPanel {
    padding-left:0.5em;
    padding-right:0.5em;
    padding-bottom:0.5em;
}

.moveablePanel > fieldset > a {
    display: none;
}

.moveablePanel > fieldset > legend {
    margin-bottom: 5px;
}

.moveablePanel legend:hover {
    cursor: grab;
}

.glyphButton {
    margin: 0px 0px 0px 0px;
    border: none;
    padding: 0px;
    background: #414141 !important;
}

.glyphButtonWrapper {
    margin-left: 5px;
}

    .glyphButtonWrapper:hover {
        cursor: pointer;
    }

.scroll-window {
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid white;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}


.station-search-input-row,
.flex-row,
.flex-row-input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
    .flex-row .adminTextBox,
    .flex-row-input .adminTextBox {
        margin-bottom: 0;
    }

    .flex-row-input input[type=radio],
    .flex-row-input label {
        margin: 0;
    }

.flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2em;
    align-items: start;
}

    .flex-row-center > div {
        position: relative;
    }

.flex-row-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 0.5em;
}

.flex-row-input {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: flex-start;
    gap: 1em;
}

.flex-row-input {
    justify-content: flex-start;
    gap: 0.5em;
}

    .flex-row-input .dropdownButtons,
    div.flex-row-input div input.adminTextBox {
        margin-bottom: 0;
    }

.station-search-input-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
}

.flex-column,
.flex-column-label > span {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    gap: 0.5em;
}

.flex-column-center {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: center;
    gap: 0.5em;
}

div.flex-col-label-input {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    gap: 0.25em;
}

div.panel-right,
.panel-results {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 1em;
}

.flex-wide {
    width: 100%;
}

.flex-column > * {
    min-height: 1em;
}

.flex-column.no-min-height > * {
    min-height: 0;
}

div.input-control-with-label {
    display: inline-block;
    margin-left: auto;
}

#cpMainContent_cbShowSearchPanel + label {
    font-weight: 400;
}

.callrecordingsview-advancedcricon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

span.disk-usage-label {
    font-size: 21px;
}

div.grid-edit-cell {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    div.grid-edit-cell button {
        height: 1.25em;
    }

div.input-form {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

ul.general-list li {
    margin-top: 5px;
}

.listSelection {
    overflow-y: auto;
}

.panel-unregistered {
    float: right;
    display: inline-flex;
    flex-direction: column;
    align-content: end;
    background: rgba(255,255,255,0);
    margin-bottom: 15px;
}

.panel-unregistered-text {
    font-size: 45px;
    color: rgba(255,0,0,1);
    text-transform: uppercase;
}

.panel-unregistered-phone {
    color: rgba(0,0,0,0.8);
    font-size: 25px;
    font-weight: 600;
}

div.label-column > div {
    height: 2em;
    line-height: 2em;
    white-space: nowrap;
}

div.input-checkbox-column {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}


    div.input-checkbox-column > span,
    div.input-checkbox-column > div > span {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        div.input-checkbox-column > span.checkbox-text-right,
        div.input-checkbox-column > div > span.checkbox-text-right {
            display: flex;
            flex-direction: row;
            gap: 0.25em;
            justify-content: flex-start;
        }


span.side-text {
    font-size: 0.75em;
    padding-bottom: 0.5em;
}

.report-back-button {
    float: right;
}

/* Removed the find resolution control and used a grid to display things correctly, this would need to be changed
    for mobile screens to use the breakpoints
*/

.report-viewer-container {
    display: grid;
    grid-template-columns: 10vw 1fr 10vw;
    height: 100vh;
}

.webViewer {
    height: 100vh;
    line-height: normal;
}

    .webViewer > div {
        height: 100vh !important;
    }

.webviewer-toolbar-button-listenall {
    width: 40px;
    height: 40px;
}

.webviewer-toolbar-button-listenallContent {
    width: 40px;
    height: 40px;
}

/*First row of call detail with grade report gets a div covering the entire first row. In call detail report the link span 
    is inside the div and clickable but in the grades report it is outside and not clickable. Attempted to move controls a bit
    but that did not work. Below selector was what firefox gave for that element.
    We had this issue before and I believe I tried to hide to div but that led to other issues. Unsure what the cause is
    but figured I'd try setting the zindex this time and see if that helps.
    Div itself is empty but has the size of the row. No other rows have a div just the first one.

    The multiple selectors are for logos and company names to be on the report. There's a chance it could use a
    more general selector but haven't tested it.

    Turns out that the fix would hide the call recording icon on the call detail report, only other solution I could
    think of was to change all span's zindexes higher.
*/

/*.webViewer div:nth-child(1) > div:nth-child(1) > div:nth-child(4) > div:nth-child(1) > div:nth-child(14),
.webViewer div:nth-child(1) > div:nth-child(1) > div:nth-child(4) > div:nth-child(1) > div:nth-child(12),
.webViewer div:nth-child(1) > div:nth-child(1) > div:nth-child(4) > div:nth-child(1) > div:nth-child(13) {
    z-index: -1;
}*/

.webViewer span {
    z-index: 5;
}

.panel-header-note {
    font-size: 0.75em;
    font-style: italic;
}

.grid-setup-tax {
    display: inline-grid;
    grid-template-rows: 40px 40px 40px 40px;
    grid-template-columns: 45px 80px 80px;
}

.grid-collection-alert {
    display: grid;
    grid-template-columns: 65px 200px 200px;
    margin-bottom: 1em;
    grid-auto-rows: 30px;
}

    .grid-collection-alert span.checkbox-text-left {
        gap: 0;
    }

div.grids input[type=text] {
    margin-bottom: 2px;
}

div.grids input[type=checkbox] {
    /*    margin-right: 0.5em;*/
    margin-bottom: 2px;
    margin-top: 0px;
}

.grids > div {
    vertical-align: middle;
}

div > fieldset > legend {
    font-weight: 500;
    padding-bottom: 0.15em;
    margin-bottom: 0.75em;
}

div.admingrid tbody {
    font-weight: 400;
}

input.date-picker {
    padding-left: 0.5em !important;
}

.grids {
    grid-column-gap: 1em;
    grid-row-gap: 0.15em;
}

div.grids div input[type=radio] {
    margin-top: 0;
}

div.tab-pane {
    padding-top: 0;
}

div.transcription-view {
    z-index: 100;
    position: relative;
    margin: 250px auto;
    max-width: 750px;
    max-height: 70vh;
    background: rgb(25,25,25);
    border-radius: 0.25em;
    padding: 0 1em 1em 1em;
}

div.transcription-container {
    position: relative;
}

    div.transcription-container div.transcription-select-container div.bootstrap-select.dropdownButtons {
        width: 100%;
    }

div.transcription-container div.modal-header {  
    padding: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-bottom:20px;
}

div.transcription-text {
    max-height: 25vh;
    overflow-y: auto;
    line-height: 1.75em;
    letter-spacing: 0.5px;   
}

div.transcription-view-content {
font-weight:300;
}

span.transcription-field-name {
    font-weight: 500;
}

div.genPanels h1,
div.genPanels .h1,
div.genPanels h2,
div.genPanels .h2,
div.genPanels h3,
div.genPanels .h3 {
    margin-top: 1rem;
}

div.transcription-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
}

div.modal-footer {
    padding: 0.25em;
}
a.external-link{
    text-decoration:underline;
    color:white;
}

/*So far only used for consolidated site list*/

.checkboxListCheckLeft label {
    font-weight: 300;
    margin-left: 5px;
    vertical-align: middle;
    margin-bottom: 0px;
}

.checkboxListCheckLeft input {
    margin: 0 auto;
    vertical-align: middle;
}

.checkboxListCheckLeft td {
    padding-top: 5px;
}

/*CHECKBOXES START*/

.checkbox-list-check-left td > input,
.checkboxTextLeft > input,
.checkbox-text-left > input,
.checkbox-text-right > input,
.checkboxTextRight > input {
    position: relative;
    /*    top: 2px;*/
}

.checkbox-list-check-left td > label,
.checkboxTextLeft > label,
.checkbox-text-left > label,
.checkbox-text-right > label,
.checkboxTextRight > label {
    padding-right: 5px;
    margin-bottom: 0;
    font-weight: 300;
}

    .checkbox-list-check-left td > label:hover,
    .checkbox-list-check-left td > input:hover,
    .checkboxTextLeft > input:hover,
    .checkboxTextLeft > label:hover
    .checkbox-text-left > input:hover,
    .checkbox-text-left > label:hover,
    .checkboxTextRight > input:hover,
    .checkboxTextRight > label:hover,
    .checkbox-text-right > input:hover,
    .checkbox-text-right > label:hover {
        cursor: pointer;
    }

.aspNetDisabled.checkbox-list-check-left td > label:hover,
.aspNetDisabled.checkbox-list-check-left td > input:hover,
.aspNetDisabled.checkboxTextLeft > input:hover,
.aspNetDisabled.checkboxTextLeft > label:hover
.aspNetDisabled.checkbox-text-left > input:hover,
.aspNetDisabled.checkbox-text-left > label:hover,
.aspNetDisabled.checkboxTextRight > input:hover,
.aspNetDisabled.checkboxTextRight > label:hover,
.aspNetDisabled.checkbox-text-right > input:hover,
.aspNetDisabled.checkbox-text-right > label:hover {
    cursor: not-allowed;
}

.checkboxTextRight > label,
.checkbox-text-right > label {
    padding-left: 5px;
    margin-bottom: 0;
}

table.checkbox-list-check-left td,
span.checkbox-text-left,
span.checkbox-text-right,
span.checkboxTextLeft,
span.checkboxTextRight {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-content: center;
    flex-basis: auto;
    gap: 2em;
    align-items: center;
}

    table.checkbox-list-check-left td input,
    span.checkbox-text-left input,
    span.checkbox-text-right input,
    span.checkboxTextLeft input,
    span.checkboxTextRight input {
        margin: 0;
    }

div.grids span.checkbox-text-left,
div.grids div.checkbox-text-left {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
}

div.grids span.checkbox-text-right,
div.grids div.checkbox-text-right {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    gap: 0.5em;
}

div.checkbox-single {
    margin-top: 0.5em;
}

    table.checkbox-list-check-left td,
    div.checkbox-single > span {
        justify-content: flex-start;
        gap: 0.5em;
    }

table.checkbox-list-check-left td {
    height: 40px;
}


/*CHECKBOXES END*/
.genPanels > input,
.genPanels > div.dropdownButtons > button,
.genPanels > fieldset > input {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

div.dropdown-menu.open {
    margin-top: 0;
}


.grid-graph-settings {
    display: grid;
    grid-template-columns: 150px 220px;
    grid-auto-rows: 40px;
}



.grid-two-column {
    display: grid;
    grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content);
    grid-auto-rows: 40px;
}

div.grid-three-column,
.grid-three-column {
    display: grid;
    grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content);
    grid-auto-rows: 40px;
}

    .grid-three-column input[type=radio] {
        margin-left: 0.5em;
    }

.grid-email-settings {
    display: grid;
    grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content);
    grid-template-rows: 40px 40px 40px 40px 130px 40px 40px 40px 40px 40px
}
.grids-row-30{
    grid-auto-rows:30px;
}

.btn-group-bottom {
    position: absolute;
    bottom: 0;
}