body{
    font-family: Roboto, Helvetica, Arial;
}

@font-face{
    font-family: 'Roboto';
    src: local('Roboto'),
    url('../../resources/fonts/Roboto-Regular.ttf') format('truetype');
    src: local('Roboto'),
    url('../../resources/fonts/Roboto-Bold.ttf') format('truetype');
}
.x-body{
    font-family: 'Roboto'; 
    font-size: 12px;
}

.msg-wrap {
    word-wrap: break-word !important;
    white-space: normal !important;
    background-color: aqua !important;
    font-size: 19px;
}

.x-component .x-window-text .x-box-item .x-component-default {
    margin: 10px;
    width: 500px;
    word-wrap: break-word !important;
    height: 300px;
}

.x-box-inner {
    height: 300px;
}

.loadingIndexBackground {
    background-image: url('../wallpaper/BlueAbstract_old.jpg');
    width: 100%;
    height: 100%;
}

.x-mask.splashscreen {
    background-image: url('../wallpaper/BlueAbstract_old.jpg');
    background-color: #232729;
    opacity: 1;
}
.customOpenMask{
    background-color: #232729;
    opacity: 0.2;
}
.openSplashScreen {
    /* background-image: url('../wallpaper/LoadingBg2.png');*/
    background-image: url("../wallpaper/BlueAbstract_old.jpg");
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0px;
    background-color: #232729;
    opacity: 1.0;
    z-index: 2000;
    text-align: center;
    transition: opacity 3.5s ease-in-out;
    background-size: cover !important;
}
.hideOpenSplashScreen{
    opacity: 0;
}
.openSplashScreen .lsnonlinelogo{
    color: white; 
    font-size: 50px; 
    position: fixed; 
    top: 20%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    opacity: 1;
    width: 100px;
}
.hideLsnOnlineLogo{
    opacity: 0;
}
.greyForm{
    background-color: whitesmoke;
}
/*.x-mask-msg {
    background-color: #232729;
    opacity: 0.2;
}*/
/*.x-mask{
    opacity: 0.5;
}*/
.x-mask-msg.splashscreen{
    /*.x-mask-msg.splashscreen div { */
        font-size: 16px;
        font-weight: bold;
        padding: 30px 5px 5px 5px;
        border: none;
        width: 260px;
        background-color: transparent;
        background-position: top center;
        text-align: center;
        opacity: 1;
        color: white;
    }
    /*.x-message-box .x-window-body .x-box-inner {
        min-height: 110px !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        background-color: seagreen;
        width: 500px !important;
        height: 500px !important;
    }
    
    .x-window .x-message-box .x-layer .x-window-default .x-closable .x-window-closable .x-window-default-closable .x-border-box {
        margin: 10px;*/
        /* width: 500px !important;*/
        /*height: 500px !important;
    }*/
    
    
    
    .x-splash-icon{
        background-image: url('../images/ListenerOnlineLoadingIcon.png') !important;
        background-repeat: no-repeat;
        /*margin-top: -20px; */
        margin-bottom: 15px;
        height: 120px;
        /*position: absolute;
        top: 150px;
        left: 300px;*/
    }
    .loadScreenBase{
        position: absolute; 
        top: 0px; 
        left: 0px;
        height: 100%;
        width: 100%;
        bottom: 0px;
        right: 0px;
        z-index: 1;
    }
    .loadScreenCenter{
        position: absolute;
        top: 40%;
        left: 40%;
        width: 20%;
        z-index: 2;
        background-color: red;
    }
    /********  QUESTIONNAIRE STYLING ****************/
    .questionTab {
        width: 350px;
        /*height: 25px;*/
        border-left: 4px solid #567798;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 60px;
        border-bottom-right-radius: 60px;
        background-color: #e3e3e3;
        padding: 10px;
        vertical-align: middle;
        font-family: Roboto, Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
    
    .backWhite {
        border-radius: 5px;
        background-color: white;
        /*height: 25px;*/
        padding: 0px;
        vertical-align: middle;
        font-family: Roboto, Arial, Helvetica, sans-serif;
        font-weight: normal;
        border-radius: 4px;
        border: 1px solid darkgray;
    }
    
    .questionAnswer {
        /*height: 25px;*/
        background-color: white;
        padding: 10px;
        vertical-align: middle;
        font-family: Roboto, Arial, Helvetica, sans-serif;
        font-weight: normal;
    }
    /********   DATA NORMALISATION QUERY ************/
    .x-textfield .dataNormQuery {
        font-family: 'Consolas';
        font-size: 0.9em;
        color: darkgray;
    }
    .dataNormQueryBlue {
        font-family: 'Consolas';
        font-size: 0.9em;
        color: blue;
    }
    .dataNormCodeView {
        font-family: 'Consolas';
        font-size: 0.9em;
        color: darkgray;
        background-color: whitesmoke;
        border: 1px solid darkgray;
        border-radius: 5px;
        width: 100%;
        height: 100%;
    }
    .dataNormGrey{
        color: gray;
    }
    
    td .siteListHover:hover{
        cursor: pointer;
        background-color: lightblue;
        border: 1px solid darkblue;
    }
    /* ******   CAPSLOCK WARNING *******************/
    .capslock {
        background: url('../icons/cautionTriangle.png') no-repeat center left;
        padding: 2px;
        padding-left: 20px;
        font-weight: 700;
    }
    .btnLogout{
        background-color: white;
    }
    
    /*  ********* MULTISELECT CHECKBOX OPTIONS ********/
    
    .x-boundlist-item img.chkCombo {
        background: transparent url(../../build/development/ListenerOnline/classic/resources/images/menu/default-unchecked.png);
        height: 16px;
        width: 16px; 
    }
    .x-boundlist-selected img.chkCombo{
        background: transparent url(../../build/development/ListenerOnline/classic/resources/images/menu/default-checked.png);
        height: 16px;
        width: 16px;
    }
    
    /* numbered buttons */
    #status-buttons                 {  }
    #status-buttons a               { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; }
    #status-buttons a:hover         { text-decoration:none; }
    
    /* we will style the span as the circled number */
    #status-buttons span            { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; 
        border-radius:50%; }
        
        /* active buttons turn light green-blue*/
        #status-buttons a.active span   { background:#00BC8C; }
        
        
        .btnTab {
            color:#FFF; 
            display:inline-block; 
            font-size:12px; 
            margin-right:10px; 
            text-align:center; 
            text-transform:uppercase;
            background:#00BC8C; 
            display:block; 
            height:30px; 
            margin:0 auto 10px; padding-top:5px; width:30px; border-radius:50% !important;
        }
        
        .btnTabCurrentStep{
            background-color: blue !important;
        }
        
        .btnTabCompletedStep{
            background-color:green !important;
        }
        .btnTabInCompleteStep{
            background-color:orange !important;
        }
        
        .CollapsableButton {
            /*background-color: #040505 !important;*/
            border-color: #040505 transparent transparent transparent !important; 
            border-top: 0px solid #f00 !important;
            border-right: 20px solid transparent !important;
            border-left: 20px solid transparent !important;
            margin:0 auto 10px; padding-top:5px; width:30px !important;
            display: inline-block;
            background-image: none !important;
            
        }
        /********* USER MANAGEMENT BUTTON ****************8*/
        .userIconBtn {
            background-color: white;
            width: 16px;
            height: 16px;
            padding: 0px;
            background-image: url('../icons/user.gif');
            background-repeat: no-repeat;
            border: 1px solid darkgray;
            border-radius: 3px;
        }
        /********* NO MODULES APPEARING ON DESKTOP **********/
        .ux-desktop-noModules {
            background-color: white;
            opacity: 0.8;
            border: 1px solid whitesmoke;
            border-radius: 15px;
            height: 40px;
            color: black;
            font-weight: bold;
        }
        /******** LOCK SCREEN STYLES *******************************/
        .lockScreenPadding{
            padding: 10px;
            background-color: rgba(255,255,255,0.4);
            width: 100%;
            height: 100%;
        }
        .toolbardark{
            background-color: darkgray;
        }
        .componentLock{
            background-color: rgba(0,0,0,0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            background-image: url('../wallpaper/Wood-Oryx.jpg');
            z-index: 19005;
        }
        .lockCenter{
            text-align: center;
            vertical-align: middle;
            align-content: center;
        }
        .lockForm{
            background-color: blue;
            width: 400px;
            height: 300px;
            z-index: 1000;
            border: 1px solid darkgray;
        }
        .lockUserPanel{
            background-color: #5285b0;
            padding: 10px;
            width: 100%;
            height: 100px;
        }
        .imgThumbnail{
            width: 30px;
            height: 30px;
            border: 1px solid whitesmoke;
            border-radius: 15px;
        }
        .imgSmallThumbnail{
            width: 25px;
            height: 25px;
            border: 1px solid darkgray;
            border-radius: 13px; 
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .lockHeader{
            color: white;
            font-size: 1.3em;
            font-weight: bold;
        }
        .lockSubHeader{
            color: white;
            font-size: 1.1em;
            font-style: italic;
        }
        .lockWindow{
            z-index: 19200;
        }
        /**************** INLINE FORMS ********************************/
        .inline-form {
            background-color: whitesmoke;
        }
        /***************** CUSTOM BUTTON COLOURS **********************/
        .submitButton .x-btn-glyph {
            color: seagreen;
        }
        
        .cancelButton .x-btn-glyph{
            color: darkred;
        }
        
        .red .x-panel-header-glyph{
            color: darkred;
        }
        
        .blue .x-btn-glyph{
            color: midnightblue;
        }
        /*************** CUSTOM PANEL HEADERS **************************/
        .subHeader .x-panel-header, x-panel-border{
            background-color: darkgray;
            border-color: darkgray;
        }
        
        /************** CLIENT CAPTURE FORMS ****************************/
        .detailHeader{
            font-weight: bold,
        }
        .detailLabel{
            font-weight: normal;
            font-style: italic;
            text-decoration: underline;
            cursor: crosshair;
            border: 1px solid darkgray;
            border-radius: 5px;
            background-color: whitesmoke;
            height: 15px;
        }
        /*.activeClient .fa-2x .fa-user .fa{
            color: seagreen
        }
        .fa .fa-user .fa-2x .suspendedClient{
            color: darkred;
        }*/
        /************ CUSTOM LOADING MASK SPINNER **********************/
        .custom-mask-loading .x-mask-msg-text{
            position: relative;
            background-image: url(../images/loadingSpinner2.gif);
            background-position: center top;
            width: 200px;
            height: 80px;
            background-color: transparent;
            /*border: 1px solid darkgray;
            border-radius: 10px;*/
        }
        .writingBottom{
            position: absolute;
            bottom: 3px;
            left: 0px;
            width: 100%;
        }
        .centeredText{
            width: 100%;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-style: italic;
            color: #2c5684;
        }
        /************ SEARCH RESULTS STYLING *******************8*/
        .ux-dataview{
            /*float: left;
            width: 500px;*/
        }
        .searchItem{
            background-color: whitesmoke;
            border-bottom: 1px dashed darkgray;
            width: 100%;
            margin: 0px 0px 0px 0px;
            cursor: pointer;
            cursor: hand;
        }
        .searchItem .green:hover{
            background-color: #c3e1cf;
            color: black;
        }
        .searchItem .red:hover{
            background-color: #ffe6d5;
        }
        .searchItem .orange:hover{
            background-color: #ffebb6;
        }
        .searchHeader{
            font-family: Calibri, Arial, Helvetica, sans-serif;
            font-size: 1.2em;
            font-weight: bold;
        }
        .searchSubHeader{
            font-family: Calibri, Arial, Helvetica, sans-serif;
            font-size: 1.0em;
            font-style: italic;
        }
        .searchContext{
            font-size: 0.9em;
            color: darkgray;
        }
        .searchSubContext{
            font-size: 0.75em;
            color: lightgray;
        }
        .searchType{
            font-size: 0.8em;
            color: darkgray;
            text-align: center;
            vertical-align: top;
        }
        .searchLeftColumn{
            width: 50px;
            border-right: 1px solid lightgray;
        }
        .filterText{
            border: 1px solid lightgray;
            border-radius: 2px;
            /*color: darkgray;*/
        }
        .filterForm{
            background-color: lightgray;
            border-bottom: 1px solid darkgray;
            width: 100%;
        }
        .green .fal{
            color: seagreen;
        }
        .red .fal{
            color: maroon;
        }
        .blue .fa{
            color: #24668c;
        }
        .orange .fa{
            color: orange;
        }
        .grey .fa{
            color: lightgray;
        }
        .white .fa{
            color: white;
        }
        .ACTIVE .fa{
            color: seagreen;
        }
        .SUSPENDED .fa{
            color: red;
        }
        .recordCountToolbar{
            width: 100%;
            text-align: right;
            font-size: 0.6em;
            color: darkgray;
            font-style: italic;
            font-weight: bold;
            background-color: lightgray;
            border-top: 1px solid darkgray;
        }
        .x-panel .pnlAdvancedFilter{
            background-color: darkgray;
            border-bottom: 2px solid #2a507e;
            font-size: 0.6em;
            font-weight: normal;
            color: darkgray;
        }
        .framelessWindow{
            border: 1px solid transparent;
            border-radius: 15px;
            $window-header-background-color: rgba(255,255,255,0.4);
        }

        .searchItem-active-row .x-grid-cell {
            color: seagreen;
        }

        .searchItem-inActive-row .x-grid-cell {
            color: maroon;
        }
        /************ COMPANY LOGO STYLING ***********************/
        .transparentLogoBackground{
            background-color: transparent;
        }
        .logoImageLimit{
            max-width: 150px;
            max-height: 200px;
            background-color: transparent;
            opacity: 0;
        }
        .x-tool-draggable {
            content: "\xf047" !important;
            font-family: FontAwesome;
            left:-5px;
            position:absolute;
            top:0;
        } 
        @keyframes fadeLogo {
            from { opacity: 1.0; }
            50% { opacity: 0.4; }
            to { opacity: 1.0; }
        }
        
        @-webkit-keyframes fadeLogo {
            from { opacity: 1.0; }
            50% { opacity: 0.4; }
            to { opacity: 1.0; }
        }
        .logoBlink {
            animation:fadeLogo 15000ms infinite;
            -webkit-animation:fadeLogo 15000ms infinite;
        }
        /****** CUSTOM TAB PANEL BACKGROUND *************/
        .customTab .x-tab{
            background-color: #8bb89f;
            border-radius: 5px 5px 0px 0px;
            color: white;
        }
        .lightBlueTab .x-tab{
            background-color: #165488;
            border-radius: 5px 5px 0px 0px;
            color: white;
        }
        .objectFieldPanel{
            background-color: whitesmoke;
            border: 1px solid darkgray;
        }
        i.mce-i-[fa-youtube]:before {   
            content: "\f167";       
            font-family: "FontAwesome";
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            color: #000;
            font-size: 1.5em;
            padding-right: 0.5em;
            position: absolute;
            top: 15%;
            left: 0;
        }
        .histLeftColumn{
            background-color: lightgrey;
            font-weight: bold;
        }
        .histUnderline{
            border-bottom: 1px solid darkgray;
        }
        
        
        
        .summaryWindow .x-window-header {
            background-color: #005983;
            color: white;
        }
        
        .summaryWindow .x-body {
            border: 1px solid black;
            border-radius: 5px;
            font-family: Roboto;
            font-size: 0.9em;
            background-color: pink;
        }
        .summaryPanel .x-panel-header
        {
            background-color: #005983;
            color: white;
        }
        
        .summaryDebtor .x-panel-header {
            background-color: #5cacb3;
            color: white;
        }
        
        .x-window-header .whiteTool {
            color: white;
        }
        /****** ROTATION OF HEADER TEXT ON DYNAMIC GRID **********/
        .grid-header-rotate .x-column-header-text {
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
            /* transform doesn't work on inline elements */
            /*display: inline-block;
            vertical-align: top;
            font-weight: normal;
            font-style: italic;
            font-size: 0.8em;
            padding: 0;
            text-align: center;*/
            /*margin-left:0;
            margin-right:auto;*/
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: red;
            /* need to hard code a height for this to work */
            /* you could use Ext.util.TextMetrics if you needed to dynamically determine the text size */
            height: 500px;
            width: 60px;
        }
        /******* INSTRUCTION PANEL STYLING ********/
        .instructionPanel{
            background-color: whitesmoke;
            border: 1px solid darkgray;
            border-radius: 10px;
            color: #005983;
            padding: 10px;
            margin: 10px;
        }
        .instructionText{
            padding: 20px;
            font-style: italic;
            font-family: Calibri, Arial, Helvetica;
            font-size: 1.1em;
            color: darkgray;
        }.blue{
            color: #005983;
            font-weight: bold;
        }
        .newClientPanel{
            background-color: #005983;
            color: white;
            border: 1px solid darkblue;
            border-radius: 5px;
            width: 100px;
            padding: 3px;
        }
        .newClientFieldset{
            background-color: #e7d9b0;
        }
        .existingClientPanel{
            background-color: #d4a000;
            color: white;
            border: 1px solid orange;
            border-radius: 5px;
            width: 150px;
            padding: 3px;
        }
        .existingClientFieldset{
            background-color: #bde5f9;
        }
        /******** PROGRESS INDICATOR ****************/
        .progressIndicator{
            background-color: whitesmoke;
            border: none;
            color: darkgray;
            padding: 10px;
            margin: 10px;
        }
        .stageComplete{
            color: #0bab6d;
            font-weight: bold;
        }
        .stageIncomplete{
            color: lightgray;
            font-weight: normal;
        }
        .currentStage{
            color: #005983;
            font-weight: bold;
            border-bottom: 1px solid #005983;
        }
        .orangeButton{
            background-color: #f49000;
            color: white;
        }
        .checkboxgroup{
            background-color: white;
            border: 1px solid darkgray;
            border-radius: 5px;
            font-size: 1em;
            font-style: italic;
            color: darkgray;
        }
        /*******  LEAD CAPTURE ICON STYLING *******/
        .fa-filter-disabled:before {
            content: "\f0b0";
            position: absolute;
            font-size: 1em;
            left: 1px;
            top: 1px;
        }
        .fa-filter-disabled:after {
            content: "\f05e";
            position: absolute;
            color: darkred;
            font-size: 1.7em;
            left: -4px;
            top: -10px;
        }
        .fa-warning{
            content: "\f071";
            color: whitesmoke;
            font-size: 1.1em;    
        }
        .fa-done{
            content: "\f05d";
            color: #46558a;
        }
        #salescalendar {
            max-width: 900px;
            margin: 0 auto;
        }
        .italicbold{
            font-style: italic;
            font-weight: bold;
        }
        .templateHeader{
            background-color: #dca0e0;
            color: black;
            font-weight: bold;
            font-size: 1.2em;
        }
        .systemHeader{
            background-color: orange;
            color: black;
            font-weight: bold;
            font-size: 1.2em;
        }
        .fieldHeader{
            background-color: #5dcbcf;
            color: black;
            font-weight: bold;
            font-size: 1.2em;
        }
        /*******  STYLE CLASSES FOR CONTRACT CHECKING **********/
        .invalidAnswer {
            background-color: red;
            color: white;
            border: 1px solid maroon;
            border-radius: 3px;
            cursor: pointer;
            cursor: hand;
        }
        .validAnswer {
            background-color: white;
            color: black;
            border: 1px solid darkgray;
            border-radius: 3px;
            cursor: pointer;
            cursor: hand;
        }
        .pnlDetails{
            background-color: black;
            color: white;
            font-size: 1.2em;
        }
        .component-tool-export .x-tool-export{
            background-image:none !important;
            font: 16px/1 FontAwesome;
        }
        .component-tool-export .x-tool-export:before{
            content: "\xf138" !important;
        }
        .customWinMask{
            background-color: rgba(0,0,0,0.1);
        }
        
        /******** SIDE NAVIGATION MAIN MENU BAR ************************/
        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 46;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 10px;
            overflow-y: auto;
        }
        
        .sidenav a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
        
        .sidenav a:hover, .offcanvas a:focus{
            color: #f1f1f1;
        }
        
        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        @media screen and (max-height: 450px) {
            .sidenav {
                padding-top: 15px;
            }
            
            .sidenav a {
                font-size: 18px;
            }
        }
        
        /**************** END OF SIDE MENU BAR ********************/
        
        /**************** RIGHT SIDE TASK BAR *********************/
        
        .sidetaskbar {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            right: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 10px;
            overflow-y: hidden;
        }
        
        .sidetaskbar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
        
        .sidetaskbar a:hover, .offcanvas a:focus {
            color: #f1f1f1;
        }
        
        .sidetaskbar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        @media screen and (max-height: 450px) {
            .sidetaskbar {
                padding-top: 15px;
            }
            
            .sidetaskbar a {
                font-size: 18px;
            }
        }
        
        /**************** END OF SIDE TASK BAR ********************/
        
        #main {
            transition: margin-left .5s;
            padding: 16px;
        }

    .menuIcon {
        background-color: black;
        border: none;
        color: white;
        font-size: 25px;
        font-weight: 500;
        vertical-align: middle;
        margin-left: 0px;
    }
    .menuIcon:hover {
        background-color: black;
        border: none;
        color: white;
        font-size: 25px;
        font-weight: 800;
        vertical-align: middle;
        margin-left: 0px;
    }
        .menuIcon:after {
            background-color: black;
            border: none;
            color: white;
            font-size: 25px;
            font-weight: 800;
            vertical-align: middle;
            margin-left: 0px;
        }
        
        
        .menuHeader {
            width: 100%;
            height: 45px;
            background-color: black;
            color: white;
            font-size: 25px;
            font-weight: 500;
            vertical-align: middle;
            margin-left: 0px;
            transition: margin-left .5s;
        }
        
        .menuHeader .x-panel-body {
            width: 100%;
            height: 45px;
            background-color: black;
            color: white;
            font-size: 25px;
            font-weight: 500;
            /*font-family: Arial;*/
            vertical-align: middle;
            margin-left: 0px;
            transition: margin-left .5s;
        }
        .alternatingView{
            background-color: whitesmoke;
        }
        .bookmarkmenu {
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background-color: #f4f4f4;
            overflow-x: hidden;
            transition: 0.5s;
            /*padding-top: 10px;*/
            overflow-y: hidden;
            font-size: 13px;
        }
        
        .bookmarkmenu a {
            /*padding: 8px 8px 8px 32px;*/
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
        
        .bookmarkmenu a:hover, .offcanvas a:focus {
            color: #f1f1f1;
        }
        
        .bookmarkitem {
            padding: 5px 10px 5px 10px;
            color: darkgray;
            margin: 5px 2px 0px 2px;
            cursor: pointer;
            cursor: hand;
            text-transform: uppercase;
            border: 1px solid lightgray;
            font-family: Roboto, Arial, Arial, Helvetica, sans-serif
            /*height: 30px;*/
        }
        
        .bookmarkitemnopadding {
            padding: 10px;
            color: darkgray;
            margin: 5px 2px 0px 2px;
            cursor: pointer;
            cursor: hand;
            text-transform: uppercase;
            border: 1px solid lightgray;
            font-family: Roboto, Arial, Arial, Helvetica, sans-serif;
            text-align: center;
            height: 30px;
        }
        
        .complete {
            color: #424242;
            border-left: 5px solid #2b477b;
            background-color: whitesmoke;
        }
        
        .incomplete {
            color: #6a2000;
            background-color: #f4debc;
            border-left: 5px solid #fbaa2a;
        }
        
        .invalid {
            color: #6a2000;
            background-color: #c9a8a8;
            border-left: 5px solid #8c2f2f;
        }
        
        .enabled {
            color: #395a88;
        }
        
        .disabled {
            color: lightgray;
            cursor: not-allowed;
        }
        
        .incomplete {
            color: #bf7500;
        }
        
        .floatingMenu {
            position: fixed;
            top: 0px;
        }
        
        .bookmarkNavigation .x-panel-header {
            background-color: #165488;
            color: white;
            font-size: 0.6em;
            font-family: Roboto, Arial, Arial, Helvetica, sans-serif;
        }
        
        
        /* ****** DYNAMIC SPACING OF COLUMNS ******************/
        
        .testPink{
            background-color: pink;
        }
        
        .testBlue{
            background-color: lightblue;
        }
        /******** END OF DYNAMIC SPACING **********************/
        
        .nestedForm {
            background-color: #f6f6f6;
            border: none;
        }
        
        .topAlign{
            vertical-align: top;
        }
        /****** CUSTOMISED TOOL ICONS ******/
        .abc-tool-home .x-tool-home{
            font-family: FontAwesome;
            content: "\f095";
            display: inline-block;
            /*background-image:url(resources/icons/menuBars.png);*/
        }
        .processCountText
        {
            font-size: 22px !important;
            display:inline-block;
            text-align:center;
            font-weight:bold;
        } 
        .processOrderText{
            display:inline-block;
            font-weight:bold;
        }
        .labelErrorCountText{
            font-size: 16px !important;
            font-weight:bold;
            color:red !important;
        }
        .workflowContainer{
            background-color:whitesmoke;
        }
        .workflowItem{
            border: 1px solid darkgray;
            border-radius: 5px;
            background-color: lightblue;
        }
        .quoteSectionLabel
        {
            font-size:14px;
            font-weight:bold ;
        }
        .quoteTotalLabel
        {
            font-size:19px;
            font-weight:bold ;
        }
        .btnDeleteSection
        {
            background-color: lightgray !important;
            background-image: none;
            color:black !important;
        }
        .msg_floating {
            position: absolute !important;
            z-index: 1000000 !important;
        }
        /******** TASK STYLING ********************************************/
        .taskItem{
            cursor: pointer !important;
            cursor: hand !important;
            border: 1px solid darkgray;
            background-color: transparent;
            margin: 0px 20px 0px 0px;
        }
        .taskItem .header {
            background-color: lightgray;
            font-weight: bold;
            font-size: 1.2em;
            padding-left: 5px;
            padding: 5px;
            margin: 0px;
            border-bottom: 3px solid #05598e;
            font-style: italic;
            margin-bottom: 5px;
        }
        .taskItem.header:hover{
            background-color: red;
        }
        .taskIcon {
            width: 30px;
            background-color: white;
            text-align: center;
            color: darkgray;
            vertical-align: top;
        }
        .userConnectionStatus{
            font-weight: bold;
            font-size: 1.0em;
        }
        .userConnectionStatus .connected{
            color:#1a6a1e !important;
        }
        .decisionOutcome.x-toolbar{
            background: #5FA2DD !important;
        }
        
        .signalRnormal {
            background-color: #d1e5ce;
            border: 1px solid darkgreen;
        }
        .signalRnormal i{
            color: darkgreen;
        }
        .signalRerror {
            background-color: #edcbd2;
            border: 1px solid maroon;
        }
        .signalRstart {
            background-color: #b1d7e1;
            border: 1px solid #2a4970;
        }
        .signalRend {
            background-color: #d6bfe0;
            border: 1px solid #7d4c91;
        }
        .roundedUserImage
        {
            border: 2px solid darkgray;
            border-radius: 75px;
        }
        /****** BREADCRUMB NOTIFICATION ************/
        .breadcrumb {
            padding-top: 2px;
            margin-left: 10px;
            font-size: 15px;
            font-style: normal;
            color: 03436f;
            font-weight: bold;
        }
        
        /****** END OF BREADCRUMB SECTION **********/
        .lowerCase {
            text-transform: lowercase;
        }
        
        /***** EMULATE BUTTONS *********************/
        .emulateButton {
            background-color: #25528a;
            border-radius: 5px;
            height: 30px;
            width: 150px;
            border: 1px solid #1e3b5f;
            font-size: 1.3em;
            font-weight: bold;
            padding: 5px;
            /*box-shadow: 2px 5px 10px rgba(136,136,136,0.2);*/
            cursor: pointer;
            color: white;
        }
        .iconCls {
            padding: 5px 10px 5px 10px;
        }
        
        .ibox-title {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            background-color: #ffffff;
            border-color: #e7eaec;
            border-image: none;
            border-style: solid solid none;
            border-width: 2px 0 0;
            color: inherit;
            margin-bottom: 0;
            padding: 15px 15px 7px;
            min-height: 48px;
        }
        .ibox-content {
            background-color: #ffffff;
            color: inherit;
            padding: 15px 20px 20px 20px;
            border-color: #e7eaec;
            border-image: none;
            border-style: solid solid none;
            border-width: 1px 0;
        }
        .OverLabel {
            font-size: 10px;
            font-style: italic;
        }
        /****** TOOLTIP INFORMATION ON CLIENT DASHBOARD *****************/
        
        .tooltip {
            position: relative;
            display: inline-block;
            /*border-bottom: 1px dotted black;*/
        }
        
        /*  ABOVE */
        .tooltip .tooltiptextabove {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 150%;
            left: 50%;
            margin-left: -60px;
        }
        
        .tooltip .tooltiptextabove::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }
        
        /* RIGHT*/
        .tooltip .tooltiptextright {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 110%;
        }
        
        .tooltip .tooltiptextright::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent black transparent transparent;
        }
        
        /* LEFT */
        .tooltip .tooltiptextleft {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            top: -5px;
            right: 110%;
        }
        
        .tooltip .tooltiptextleft::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent black;
        }
        
        /* BELOW */
        
        .tooltip .tooltiptextbelow {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1000;
            top: 150%;
            left: 50%;
            margin-left: -60px;
        }
        
        .tooltip .tooltiptextbelow::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            z-index: 1000;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }
        
        .tooltip:hover .tooltiptext {
            visibility: visible;
            z-index: 100000;
        }

        /** LIGHTER TOOLTIP DISPLAY */

        .tooltip .tooltiptextrightlight {
            visibility: hidden;
            width: 120px;
            background-color: #669999;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 110%;
        }

            .tooltip .tooltiptextrightlight::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 100%;
                margin-top: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent #669999 transparent transparent;
            }

        .tooltip .tooltiptextleftlight {
            visibility: hidden;
            width: 120px;
            background-color: #669999;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            top: -5px;
            right: 110%;
        }

            .tooltip .tooltiptextleftlight::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 100%;
                margin-top: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent transparent transparent #669999;
            }
        
        /*END TOOLTIP*/
        
        .cadTitle {
            font-weight: bold;
        }
        
        /*  CLIENT CHANGE FORM */
        .textInput {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        
        .password-verification-error{
            color:white !important;
            font-size:large;    
        }
        
        .radio-change-value {
            font-weight: bold;   
            text-align: left;
        }
        
        /* RADIO GRID STATUSES*/
        .radio-active-row .x-grid-cell {
            color: #006633;
            font-weight: bold;
        }
        
        .radio-suspended-row .x-grid-cell {
            color: #900;
            font-weight: bold;
        }

        .radio-pending-row .x-grid-cell {
            color: darkorange;
            font-weight: bold;
        }
        
        .radio-future-row .x-grid-cell {
            color: orange;
        }
        
        .radio-temporary-row .x-grid-cell {
            color: olivedrab;
        }
        
        .radio-test-row .x-grid-cell {
            color: green;
        }
        /* END OF RADIO GRID STATUSES*/
        /*GRID*/
        .x-grid-row-summary .x-grid-cell-inner {
            font-weight: bold;
            /*font-size: 16px;*/
            padding-bottom: 5px;
            padding-top: 5px;
            background-color: #8b97a0;
        } 
        .grid-summary-footer .x-grid-cell {
            color: #090;
            background-color:blueviolet;
            font-size:18px;
            font-weight:bold;
        }
        /*END OF GRID*/
        /* QUESTIONNAIRE STYLES */
        .questionnaire-locked-row .x-grid-cell {
            color: maroon;
        }
        .x-hide-display .x-grid-cell {
            display: none;
        }
        /* END OF QUESTIONNAIRE STYLES */
        /** HEADER STYLES */
        .headerBlue {
            color: dimgrey;
            font-weight: bold;
            font-size: 1.5em;
            text-align: left;
            padding: 5px;
        }
        
        /************** ERROR LOG ******************/
        .errorWindow .x-window-header {
            background-color: #ffcc1a;
            border-radius: 5px 5px 0px 0px;
            border: 1px solid #ffcc1a;
            color: black;
        }
        
        .errorWindow .x-window-body {
            background-color: whitesmoke;
            border-radius: 5px 5px 0px 0px;
            border: 1px solid #ffcc1a;
            color: black;
        }
        
        .errorWindow .x-btn-glyph {
            color: white;
            background-color: #ffcc1a;
        }

        /***** WF ACTIVITY DELETE BUTTON *****/
        .x-btn.deleteButton {
           background-color: #c85353
        }
        .x-btn.deleteButton:hover {
            background-color: red;
        }

        /***** WF CHANGED WARNING ******/
        .x-btn.changeButton {
            background-color: #FF5733;
            width: 300px;
            border: 1px solid #C70039;
            border-radius: 5px;
        }
        .x-btn.changeButton:hover {
            background-color: #ffcc1a;
            border-radius: 5px;
        }

        .x-btn.changeButton:focus {
            background-color: #FF5733;
        }
        
        /***** ALERT BUTTON ***************/
        .x-btn.alertButton {
            border-bottom: 3px solid #ffcc1a;
            border-radius: 5px;
            border: none;
        }
        
        .x-btn-glyph.alertButton {
            background-color: #ffeba4;
            color: red;
        }
        
        .alertButton .x-btn-glyph {
            color: darkred;
        }
        
        .alertText {
            font-size: 12px;
            font-family: Verdana, Calibri;
            font-weight: normal;
            margin: 0px 10px 0px 10px;
            color: whitesmoke;
        }
        
        .alertIcon{
            font-size: 16px;
            color: orange;
        }
        
        .x-btn.alertButton:hover {
            background-color: #ffcc1a;
            border-radius: 5px;
        }
        
        .x-btn.alertButton:focus {
            border-bottom: 3px solid red;
            border-radius: 5px;
            border-top: 3px solid red;
        }
        /******* TASK TEXT ****************/
        .taskText {
            font-size: 12px;
            font-family: Verdana, Calibri;
            font-weight: normal;
            margin: 0px 10px 0px 10px;
            color: whitesmoke;
            cursor: pointer;
        }
        .tasks {
            cursor: pointer;
        }
        .fa-stack[data-count]:after {
            position: absolute;
            right: -30%;
            top: -40%;
            content: attr(data-count);
            font-size: 70%;
            padding: .6em;
            border-radius: 999px;
            line-height: .75em;
            color: white;
            background: rgba(255,0,0,.85);
            text-align: center;
            min-width: 1em;
            font-weight: bold;
        }
        .baseTemplateHeader {
            font-size: 1.5em;
            font-weight: bold;
            color: #494949;
            font-style: italic;
            font-family: Roboto, Arial, Arial, Helvetica, sans-serif;
        }
        /**** CONTEXT MENU BUTTONS ****/
        .x-btn.contextButton {
            color: white;
            padding: 10px;
            background-color: #316f7e;
            border-bottom: 1px solid #7c7c7c;
        }
        .x-btn.contextButton:hover{
            background-color: seagreen;
        }
        .x-btn-glyph.contextButton {
            position: absolute;
            left: 10px;
        }
        .contextmenuitem {
            width: 300px;
            color: #4b778e;
            background-color: whitesmoke;
            border-bottom: 1px solid darkgreen;
            padding: 5px;
        }
        .contextmenuitem:hover{
            background-color: seagreen;
            color: white;
            cursor: pointer;
        }
        
        /*.dashboardWindow .x-panel-body{
            border-radius: 10px;
        }*/
        
        .dashboardWindow .x-panel-header{
            border-radius: 10px 10px 0px 0px;
            border: 1px solid darkred;
        }
        
        .loginWindow .x-panel-header {
            border-radius: 10px 10px 0px 0px;
        }
        
        .loginWindow .x-panel-body {
            border-radius: 0px 0px 10px 10px;
        }
        
        .loginWindow .x-btn {
            border-radius: 10px;
            width: 100%;
        }
        
        .loginWindow .x-textfield .x-body{
            font-size: 14px;
            color: darkgray;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
        }
        
        .loginWindow .x-btn .forgotPassword {
            background-color: whitesmoke;
            border: 1px solid lightgray;
        }
        
        .bluecorner {
            width: 30px;
            background-color: #0057a2;
            border-radius: 10px 0px 0px 10px;
            color: white;
            height: 32px;
            font-size: 14px;
            margin-top: -7px;
            padding-top: 7px;
            padding-right: 9px;
        }
        
        .redcorner {
            width: 30px;
            background-color: #C70039;
            border-radius: 10px 0px 0px 10px;
            color: white;
            height: 32px;
            font-size: 14px;
            margin-top: -7px;
            padding-top: 7px;
            padding-right: 9px;
        }
        
        .redCallWindow .x-window-header{
            background-color: maroon;
        }
        .radiogroupbox {
            background-color: whitesmoke;
            border: 1px solid darkgray;
            border-radius: 5px;
        }
        /****** WORKFLOW REQUIRED FIELDS GRID STYLING ****************/
        .invalid-row .x-grid-cell {
            color: maroon;
            font-weight: bold;
            background-color: #cfcccc;
        }
        
        .valid-row .x-grid-cell {
            color: black;
        }
        
        .invalidQuery .x-panel-header-default {
            background-color: maroon;
            color: white;
        }
        .invalidQuery .x-panel-header .x-btn {
            background-color: maroon;
        }
        
        .invalidQuery .x-panel{
            border: 1px solid maroon;
        }
        
        .invalidQueryBorder .x-panel-body{
            background-color: maroon;
        }
        
        /**** ERROR CONTROL ******/
        .errorRedBlock{
            background-color: red;
            min-width: 350px;
            width: 50%;
            border: 1px solid red;
            border-radius: 5px;
        }
        .splitter {
            background-color: lightgray;
        }
        .smallredicon {
            color: maroon;
        }
        /***** SYNC TO LSN STATUS  *******/
        .lsnSyncFalse
        {
            background-color: maroon;
            color: white;
        }
        .lsnSyncTrue{
            background-color: green;
            color: white;
        }
        /***** MESSAGE BOX DIALOG **************/
        .messageBox {
            text-align: center;
            margin: 15% 0px 20% 0px;
            font-size: 1.1em;
            background-color: rgba(255,255,255,1);
            width: 100%;
            height: 250px;
            color: black;
            border: 1px solid darkgray;
        }
        .innerMessageBox {
            float: left;
            margin-left: 30%;
            width: 40%;
            background-color: whitesmoke;
            border: 1px solid green;
        }
        .messageHead {
            height: 40px;
            border-bottom: 1px solid red;
            font-weight: bold;
            font-size: 1.2em;
            margin-left: 160px;
            margin-top: 30px;
            width: 80%;
            border: 1px solid orange;
            text-align: left;
        }
        .messageText {
            margin-top: 20px;
            width: 80%;
            margin-left: 160px;
            border: 1px solid pink;
            text-align: center;
        }
        .messageIcon {
            width: 150px;
            height: 150px;
            background-color: whitesmoke;
            border: 1px solid darkgray;
            border-radius: 5px;
            color: darkblue;
            float: left;
            margin-left: 0px;
            margin-top: 20px;
            text-align: center;
            vertical-align: middle;
        }
        .docClick {
            cursor: pointer;
            text-decoration: underline;
        }
        .breadcrumbSubHeader {
            font-size: 0.7em;
            font-decoration: italic;
        }
        
        .breadcrumbBoxEmpty {
            background-color: #f6f6f6;
            border-radius: 0px 0px 5px 5px;
            border: 1px dotted darkgray;
            margin: 0px 10px 0px 0px;
            padding: 2px;
            width: 100px;
            text-align: center;
        }
        
        .breadcrumbButton {
            
            border-radius: 0px 0px 5px 5px;
            border: 1px dotted darkgray;
            margin: 0px 10px 0px 0px;
            padding: 2px;
            width: 100px;
            text-align: center;
        }
        
        .breadcrumb-contract-wiz {
            list-style: none;
            overflow: hidden;
            font: 18px Sans-Serif;
            color: white;
            text-decoration: none;
            padding: 10px 0 10px 65px;
            background: brown; /* fallback color */
            background: hsla(34,85%,35%,1);
            position: relative;
            display: block;
            float: left;
        }
        
        .breadcrumb-contract-wiz li {
            float: left;
        }
        
        .breadcrumb-contract-wiz li a {
            color: white;
            text-decoration: none;
            padding: 10px 0 10px 65px;
            background: brown; /* fallback color */
            background: hsla(34,85%,35%,1);
            position: relative;
            display: block;
            float: left;
        }
        
        breadcrumbBoxSelected {
            background-color: whitesmoke;
            border-radius: 5px;
            border: 1px dotted darkgray;
            border-bottom: 2px solid darkgreen;
            margin: 0px 10px 0px 0px;
            padding: 2px;
            width: 100px;
        }
        .x-btn .btnRightAlign{
            position: absolute;
            right: 0px;
            z-index: 100;
        }
        .googleinput{
            border: 1px solid darkgray;
            background-color: whitesmoke;
        }
        
        .teal-color {
            color: teal;
        }
        
        .phone-icon-large{
            font-size:24px;
        }
        
        .phone-extension-large {
            font-size: 36px;
        }
        
        .flex-container {
            align-content: space-around;
        }
        
        .invalidRestriction{
            color: maroon;
            font-weight: bold;
            text-align: center;
            vertical-align: middle;
        }
        
        .swal-overlay {
            z-index: 10000000000 !important;
        }
        
        .phContactName{
            font-weight: bold;
            font-size: 1.1em;
        }
        
        .phContactNumber{
            font-weight: normal;
            font-style: italic;
            font-size: 0.9em;
        }
        .list .x-dataview-item {
            width: 25%;
            display: inline-block;
        }
        /* DATANORM STYLE */
        .datanorm-included-row .x-grid-cell {
            color: #669933;
            font-weight: bold;
        }
        
        .tsksearch{
            margin-top: 5px !important;
            margin-left: 5px !important;
        }
        
        .syncSuccess{
            color: #69d4ec;
        }
        .syncError{
            color: #ee5858;
        }
        .syncProcessing{
            color: rgb(243, 208, 92);
        }

.isactive .x-grid-cell {
    color: green !important;
}

.isinactive .x-grid-cell {
    color: red !important;
}

/****** ACCORDION NOTES STRUCTURE *****/
.noteCard {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 10px;
    border:none;
    outline: none;
    border-radius: 5px;
    width: 95%;
}
.active .noteCard {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    /*background-color: #eee;*/
    background-color: whitesmoke;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    position: relative;   
    border-radius: 5px;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .accordion:hover {
        background-color: #ccc;    
    }

.active {
    border-radius: 5px 5px 0px 0px;
    background-color: #eee;
}

    .accordion .title {
        /*position: absolute;*/
        /*top: 10px;
        left: 40px;*/
        font-weight: bold;
        font-size: 1.2em;
    }
    .accordion .titleRight {
        text-align: right; 
        float: right; 
        font-style: normal;
        font-weight: normal;
    }
    .accordion .escalate {
        text-align: right;
        float: right;
        font-style: normal;
        font-weight: normal;
    }
    .accordion .date {
        /*position: absolute;*/
/*        top: 25px;
*/        left: 30px;
        font-style: italic;
    }
    .accordion .message {
        /*position: absolute;*/
/*        top: 38px;
        left: 30px;
*/        font-weight: normal;
        font-size: 15px;
        padding-top: 10px;
    }
    .accordion .bottomRight{
        position: absolute;
        bottom: 3px;
        right: 5px;
        float: right;
    }

/* Style the accordion panel. Note: hidden by default */
.accordionPanel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
    border-top: 1px solid darkgray;
    border-radius: 0px 0px 5px 5px;
}

.noteItemLeft {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    background-color: whitesmoke;
    background-color: #52ab98;
    color: white;
    border: 2px solid #c8d8e4;
    border-radius: 7px;
    margin-bottom: 10px;
    padding: 5px;
    width: 600px;
    float: left
}
.noteItemRight {
    text-align: right;
    background-color: #2b6777;
    color: white;
    border: 2px solid #c8d8e4;
    border-radius: 7px;
    margin-bottom: 10px;
    padding: 5px;
    width: 600px;
    float: right
}

.noteItem:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.noteCard .noteItemContainer {
    padding: 2px 16px;
}

.noteCard .cardHeader {
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 5px 5px 0px 0px;
    text-transform: uppercase;
}

.noteCard .date {
    font-style: italic;    
}

.noteCard .message {
    font-weight: normal;
}
.noteCard .escalateChildLeft {
    text-align: right;
    float: right;
    font-style: normal;
    font-weight: normal;
}
.noteCard .escalateChildRight {
    text-align: left;
    float: left;
    font-style: normal;
    font-weight: normal;
}
/******* NEW DYNAMIC GRID TICKET CLASSES *******/
.dynTicketCard {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 10px;
    border: none;
    outline: none;
    border-radius: 5px;
    width: 100%;
    color: #444;
    width: 100%;
    text-align: left;
    position: relative;
}

.dynTicketCard .title {
    /*position: absolute;*/
    /*top: 10px;
        left: 40px;*/
    font-weight: bold;
    font-size: 1.2em;
}

.dynTicketCard .titleRight {
    text-align: right;
    float: right;
    font-style: normal;
    font-weight: normal;
}

.dynTicketCard .escalate {
    text-align: right;
    float: right;
    font-style: normal;
    font-weight: normal;
}

.dynTicketCard .date {
    /*position: absolute;*/
    /*        top: 25px;
*/ left: 30px;
    font-style: italic;
}

..dynTicketCard .message {
    /*position: absolute;*/
    /*        top: 38px;
        left: 30px;
*/ font-weight: normal;
    font-size: 14px;
    padding-top: 10px;
}

.tickAccordion .bottomRight {
    position: absolute;
    bottom: 3px;
    right: 5px;
    float: right;
}

.ClosedBadge {
    background-color: #669966;
    color: white;
    padding: 3px;
    border-radius: 3px;
}
.ClosedRow {
    background-color: rgba(102, 153, 102, 0.1);
    border-left: 3px solid red;
}
.ClosePendingBadge {
    background-color: #FF5733;
    color: white;
    padding: 3px;
    border-radius: 3px;
}
.ClosePendingRow {
    background-color: rgba(255, 87, 51, 0.1);
}
.CloseRequestedBadge {
    background-color: #FF5733;
    color: white;
    padding: 3px;
    border-radius: 3px;
}
.CloseRequestRow {
    background-color: rgba(241, 192, 131, 0.1);
    border-left: 3px solid red;
}
.x-grid-cell .CloseRequestedRow {
    background-color: #f1c3a1;
}
.CanCloseBadge {
    background-color: #900C3F;
    color: white;
    padding: 3px;
    border-radius: 3px;
}
.CanCloseRow {
    background-color: rgba(255, 87, 51, 0.1);
}
.ChildLockBadge {
    background-color: #666699;
    color: white;
    padding: 3px;
    border-radius: 3px;
}
.ChildLockRow {
    background-color: rgba(102, 102, 153, 0.1);
}
.AskForCloseBadge {
    background-color: #ed9e47;
    color: white;
    padding: 3px;
    border-radius: 3px;
}
.AskForCloseRow {
    background-color: rgba(237, 158, 71, 0.1);
}


/****** ACCORDION TICKET STRUCTURE *****/
.ticketCard {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 10px;
    border: none;
    outline: none;
    border-radius: 5px;
    width: 95%;
}

.active .ticketCard {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Style the buttons that are used to open and close the accordion panel */
.tickAccordion {
    /*background-color: #eee;*/
    background-color: whitesmoke;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    position: relative;
    border-radius: 5px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.tickAccordion:hover {
    background-color: #ccc;
}

.active {
    border-radius: 5px 5px 0px 0px;
    background-color: #eee;
}

/* Style the accordion panel. Note: hidden by default */
.tickAccordionPanel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
    border-top: 1px solid darkgray;
    border-radius: 0px 0px 5px 5px;
}

.ticketItemLeft {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    background-color: whitesmoke;
    background-color: #52ab98;
    color: white;
    border: 2px solid #c8d8e4;
    border-radius: 7px;
    margin-bottom: 10px;
    padding: 5px;
    width: 600px;
    float: left
}

.ticketItemRight {
    text-align: right;
    background-color: #2b6777;
    color: white;
    border: 2px solid #c8d8e4;
    border-radius: 7px;
    margin-bottom: 10px;
    padding: 5px;
    width: 600px;
    float: right
}

.ticketItem:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* ticket actions */
.ticketActionLeft {
    padding-top: -100px;
    padding-left: 20px;
    padding-bottom: 20px;
    float: left
}

.ticketActionRight {
    padding-top: -100px;
    right: 20px;
    padding-bottom: 20px;
    float: right
}

/* Add some padding inside the card container */
.ticketCard .ticketItemContainer {
    padding: 2px 16px;
}

.ticketCard .cardHeader {
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 5px 5px 0px 0px;
    text-transform: uppercase;
}

ticketCard .date {
    font-style: italic;
}

ticketCard .message {
    font-weight: normal;
}

ticketCard .escalateChildLeft {
    text-align: right;
    float: right;
    font-style: normal;
    font-weight: normal;
}

.ticketCard .escalateChildRight {
    text-align: left;
    float: left;
    font-style: normal;
    font-weight: normal;
}
.tickAccordion .title {
    /*position: absolute;*/
    /*top: 10px;
        left: 40px;*/
    font-weight: bold;
    font-size: 1.2em;
}

.tickAccordion .titleRight {
    text-align: right;
    float: right;
    font-style: normal;
    font-weight: normal;
}

.tickAccordion .escalate {
    text-align: right;
    float: right;
    font-style: normal;
    font-weight: normal;
}

.tickAccordion .date {
    /*position: absolute;*/
    /*        top: 25px;
*/ left: 30px;
    font-style: italic;
}

.tickAccordion .message {
    /*position: absolute;*/
    /*        top: 38px;
        left: 30px;
*/ font-weight: normal;
    font-size: 14px;
    padding-top: 10px;
}

.tickAccordion .bottomRight {
    position: absolute;
    bottom: 3px;
    right: 5px;
    float: right;
}

/*** TICKET GRID CLOSE OPTIONS SPLIT BUTTON ***/
.ticketBtn {
    background-color: #900C3F;
    color: white;
    padding: 5px;
    font-size: 12px;
    border: none;
    outline: none;
}

.ticketDropdown {
    position: absolute;
    display: inline-block;
}

.ticketDropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 100px;
    z-index: 1000;
}

.ticketDropdown-content a {
    color: black;
    padding: 5px;
    text-decoration: none;
    display: block;
}

.ticketDropdown-content a:hover {
    background-color: #ddd
}

.ticketDropdown:hover .dropdown-content {
    display: block;
}

.ticketBtn:hover, .ticketDropdown:hover .ticketBtn {
    background-color: #C70039;
}

.workflowNotification {
    background-color: #333333;
    border: 1px solid darkgray;
    border-radius: 5px;
    width: 250px;
    height: 30px;
    margin-right: 30px;
    margin-top: -10px;
    padding: 10px;
    padding-bottom: 15px;
    font-size: 14px;
    color: darkgray;
    text-align: left;
}

/**** STYLING TO VIEWING IMAGE IN TENANT PROPERTIES ***/
.previewImage{
    cursor: zoom-in;
}
.fieldsetBg {
    background-color: #f5f5f5;
}
/**** ROLE LIST STYLING *****/
.role-list-row-default {
    color: #669999;
    font-weight: bold;
}
.role-list-row-inProgress {
    color: #d09324
}
.role-list-row-error{
    color: maroon;
}
.role-list-row-success {
    color: darkgreen;
}
/****** UPDATE MESSAGING *****/
.timerText {
    font-size: 20px;
    font-weight: bold;
    color: goldenrod;
}
.timerLabel {
    font-size: 12px;
    font-weight: bold;
    color: goldenrod;
}
.timerOverdue {
    font-size: 12px;
    font-weight: bold;
    color: maroon;
}
.timerBackground {
    background-color: whitesmoke;
    border: 1px solid darkgray;
}
.updateDetailLabel {
    font-weight: bold;
}
.timerTransparent {
    background-color: transparent;
}
.updateMsg {
    width: 100%;
    background-color: whitesmoke;
    padding: 20px;
    border-bottom: 1px solid darkgray;
}
.updateMsgDate {
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
}
.updateMsgContent {
    font-size: 13px;
    font-weight: normal;
}
.fltRightButton{
    float: right;
    margin-right: 10px;
}
.userLeft{
    float: left;
    margin-left: 0px;
    font-size: 0.9em;
    font-style: italic;
    color: darkslategrey;
}
.dateLeft{
    float: left;
    font-size: 0.8em;
    color: darkslategray;
}
.buttonRight {
    margin-top: 10px;
    margin-right: 0px;
}
.ticketNo {
    font-weight: bold;
}
.gridRowCustom{
    border-width: 5px;
    background-color: red;
}

.mandatory-field {
    border-color: maroon;
    border-width: thin;
    border-style: solid;
}
/** WORKFLOW MONITOR **/
.wfMonCount .x-panel-header {
    border-radius: 10px 10px 0px 0px;
    background-color: green;
}
.wfMonCount .x-panel-body {
    border-radius: 0px 0px 10px 10px;
}
.wfMonCount .x-textfield .x-body {
    font-size: 14px;
    color: darkgray;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
.wfMonError .x-panel-header {
    border-radius: 10px 10px 0px 0px;
    background-color: maroon;
}

.wfMonError .x-panel-body {
    border-radius: 0px 0px 10px 10px;
}

.wfMonError .x-textfield .x-body {
    font-size: 14px;
    color: darkgray;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

.countFloatingDiv {
    position: absolute;
    top: 0px;
    left: 5%;
    height: 500px;
    width: 500px;
    z-index: 99;
}
.errorFloatingDiv{

}
/* Base toggle switch */
.x-toggle-switch .x-form-cb-label {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 24px;
    background-color: orange; /* default off color */
    border-radius: 24px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 0;
}

/* Hide native checkbox */
.x-toggle-switch .x-form-cb-wrap input {
    display: none;
}

/* Slider knob */
.x-toggle-switch .x-form-cb-label:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* True (on) */
.x-toggle-switch.x-toggle-true .x-form-cb-label {
    background-color: green;
}

    .x-toggle-switch.x-toggle-true .x-form-cb-label:after {
        transform: translateX(26px);
    }

/* False (off) */
.x-toggle-switch.x-toggle-false .x-form-cb-label {
    background-color: orange;
}

    .x-toggle-switch.x-toggle-false .x-form-cb-label:after {
        transform: translateX(0px);
    }


#toast-container.toast-top-right {
    top: 100px; /* <-- sets 100px buffer from top */
    right: 12px;
}