/* DEFAULT #0072c6 */
* {
    /* This is part of boot strap style, should include in default CSS to prevent bootstrap overriding */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    *::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background-color: #f1f1f1;
    }

    *::-webkit-scrollbar-track {
        box-shadow: rgba(245, 254, 245, 0.30) 0 0 8px inset;
        -webkit-box-shadow: rgba(245, 254, 245, 0.30) 0 0 8px inset;
        outline: solid 1px rgba(245, 254, 245, 0.1);
    }

    *::-webkit-scrollbar-thumb {
        background-color: rgba(194, 195, 201, 0.70);
        outline: none;
    }

        *::-webkit-scrollbar-thumb:hover {
            background-color: rgb(153, 153, 155);
        }

    /* Arrow Background Colour */
    *::-webkit-scrollbar-button:vertical:start:decrement {
        width: 12px;
        height: 12px;
        background: linear-gradient(120deg, #e0e0e0 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(240deg, #e0e0e0 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(0deg, #e0e0e0 30%, rgba(0, 0, 0, 0) 31%);
        background-color: #b6b6b6;
    }

    *::-webkit-scrollbar-button:vertical:end:increment {
        width: 12px;
        height: 12px;
        background: linear-gradient(300deg, #e0e0e0 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(60deg, #e0e0e0 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(180deg, #e0e0e0 30%, rgba(0, 0, 0, 0) 31%);
        background-color: #b6b6b6;
    }

    *::-webkit-scrollbar-button:horizontal:end:increment {
        width: 12px;
        height: 12px;
        background: linear-gradient(210deg, #e0e0e0 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(330deg, #e0e0e0 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(90deg, #e0e0e0 30%, rgba(0, 0, 0, 0) 31%);
        background-color: #b6b6b6;
    }

    *::-webkit-scrollbar-button:horizontal:start:decrement {
        width: 12px;
        height: 12px;
        background: linear-gradient(30deg, #e0e0e0 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(150deg, #e0e0e0 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(270deg, #e0e0e0 30%, rgba(0, 0, 0, 0) 31%);
        background-color: #b6b6b6;
    }

    *::-webkit-scrollbar-button:vertical:start:hover, *::-webkit-scrollbar-button:vertical:end:hover, *::-webkit-scrollbar-button:horizontal:start:hover, *::-webkit-scrollbar-button:horizontal:end:hover {
        background-color: #3e7af6;
    }


body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-style: normal;
    font-weight: normal;
    background-color: #fff;
    visibility: visible;
    opacity: 1;
}

    body.show-body {
        visibility: visible;
        opacity: 1;
        transition: all 6000ms ease-in-out;
    }

    body.hide-body {
        visibility: hidden;
        opacity: 0;
        transition: all 6000ms ease-in-out;
    }

#panelContainer {
    background-color: #fff;
}

.versapanel {
    border: solid 1px #ddd !important;
}

#panel4 {
    border-right: solid 1px #ddd !important;
}

a {
    font-size: 8pt;
    line-height: 10pt;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

    a:link {
        color: #444444;
        text-decoration: none;
    }

    a:active {
        color: #444444;
        text-decoration: none;
    }

    a:visited {
        color: #444444;
        text-decoration: none;
    }

    a:hover {
        color: #ffffff;
        text-decoration: none;
        background-color: #0072c6;
    }

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loadingsystem {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../images/large_loading.png);
    background-position: center;
    background-size: 180px;
    width: 530px;
    height: 200px;
    animation: spin linear 2806ms infinite;
    -webkit-animation: spin linear 2806ms infinite;
    -moz-animation: spin linear 2806ms infinite;
    -o-animation: spin linear 2806ms infinite;
}

.loadingtext {
    font-family: 'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 22pt;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    color: #2AABE2;
}

#divHeaderMenuLinks {
    position: relative;
    display: flex;
    flex-direction: row;
    float: right;
    right: -8px;
}

    #divHeaderMenuLinks img {
        width: 24px;
        height: 24px;
    }

#divUserProfile {
    position: relative;
    z-index: 900;
    width: 50px;
    height: 50px;
    /*border-left: solid 2px #ffffff;*/
    cursor: pointer;
}

.headerbutton {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px;
    min-width: 50px;
    height: 50px;
    background-color: transparent;
    border: solid 1px transparent;
    /*border-left-color: #eef7ff;*/
    cursor: pointer;
}

    .headerbutton:hover {
        position: relative;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 12px;
        min-width: 50px;
        height: 50px;
        background-color: #17234e;
        border: solid 1px transparent;
        /*border-left-color: #eef7ff;*/
        cursor: pointer;
    }

.font-awesome.iconimg {
    font-size: 1.6rem;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
}

.line-awesome.iconimg {
    font-size: 2.2rem;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
}

.material-icons.iconimg {
    font-size: 2.2rem;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
}

.settingcontainerhide {
    z-index: 0;
    visibility: hidden;
    position: absolute;
    left: 250px;
    top: 49px;
    width: 300px;
    max-height: 600px;
    border: solid 1px #a0a0a0;
    border-radius: 5px 5px;
    background-color: #ffffff;
    padding: 10px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: left visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: left visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: left visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-out;
    transition-property: left visibility;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
    cursor: default;
}

.settingcontainershow {
    z-index: 2000;
    visibility: visible;
    position: absolute;
    left: -250px;
    top: 49px;
    width: 300px;
    max-height: 600px;
    border: solid 1px #a0a0a0;
    border-radius: 5px 5px;
    background-color: #ffffff;
    padding: 10px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    box-shadow: -8px 8px 45px #343434;
    -webkit-transition-property: left visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: left visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-in;
    -o-transition-property: left visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-in;
    transition-property: left visibility;
    transition-duration: 250ms;
    transition-timing-function: ease-in;
    cursor: default;
}


    .settingcontainershow:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 28px;
        top: -15px;
        border: 7px solid;
        border-color: transparent transparent #a0a0a0 transparent;
    }

    .settingcontainershow:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 28px;
        top: -14px;
        border: 7px solid;
        border-color: transparent transparent #ffffff transparent;
    }

.HeaderMenuBody {
    z-index: 800;
    position: absolute;
    visibility: hidden;
    width: 152px;
    max-height: 0;
    overflow-y: hidden;
    top: 49px;
    left: 0;
    background-color: #ffffff;
    border: solid 1px #0072c6;
    box-shadow: #424242 5px 5px 20px;
    -webkit-transition-property: max-height;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: max-height;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: max-height;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: max-height;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.HeaderMenuBodyShow {
    z-index: 800;
    position: absolute;
    top: 49px;
    left: 0;
    width: 152px;
    max-height: 365px;
    overflow-y: hidden;
    background-color: #ffffff;
    border: solid 1px #0072c6;
    box-shadow: #424242 5px 5px 20px;
    -webkit-transition-property: max-height;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: max-height;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: max-height;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: max-height;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.HeaderMenuBodyShadow {
    position: absolute;
    top: 2px;
    left: 2px;
    /*background-color:#e0e0e0;	
	border: solid 1px #e0e0e0;*/

    box-shadow: 0 0 10px #a0a0a0;
}

.HeaderMenuItem {
    position: relative;
    clear: both;
    cursor: pointer;
    min-height: 30px;
    border-top: none 1px transparent;
    border-right: none 1px transparent;
    border-bottom: none 1px transparent;
    border-left: none 1px transparent;
    padding: 8px;
    margin: 0 0 0 0;
    color: #343434;
}

.HeaderMenuItemOver {
    position: relative;
    clear: both;
    cursor: pointer;
    min-height: 30px;
    border-top: none 1px transparent;
    border-right: none 1px transparent;
    border-bottom: none 1px transparent;
    border-left: none 1px transparent;
    padding: 8px;
    margin: 0 0 0 0;
    background-color: #55b3f8;
    color: #ffffff;
}

    .HeaderMenuItemOver > .HeaderMenuItemText, .HeaderMenuItemOver > span.style1 {
        color: #ffffff;
    }

.HeaderMenuItemText {
    position: relative;
    float: left;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    font-size: 9pt;
    line-height: 12pt;
    font-weight: normal;
    font-style: normal;
    color: #333;
    cursor: default;
    border: none;
}

.HeaderMenuItemImage {
    position: absolute;
    top: 0;
    right: 0;
    float: right;
    background-color: #e2e2e2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    width: 24px;
    height: 30px;
}

.HeaderMenuItemDivider {
    position: relative;
    left: 0;
    top: 0;
    clear: both;
    cursor: default;
    height: 1px;
    background-color: #9CC6FF;
    padding: 0 0 0 0;
}

.HeaderMenuItemDividerIcon {
    position: absolute;
    top: 0;
    right: 0;
    float: right;
    background-color: #e2e2e2;
    min-width: 24px;
    min-height: 1px;
}

.HeaderMenuItemError {
    position: relative;
    clear: both;
    cursor: pointer;
    min-height: 30px;
    border-top: none 1px transparent;
    border-right: none 1px transparent;
    border-bottom: none 1px transparent;
    border-left: none 1px transparent;
    padding: 8px;
    margin: 0;
    background-image: url(../images/warning.png);
    background-repeat: no-repeat;
    background-position: 254px 6px;
    background-size: 16px;
    background-color: #F44336;
    color: #ffffff;
}

    .HeaderMenuItemError .style1 {
        color: #ffffff;
    }

.officetoolsbutton {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: #0072c6;
    background-image: url(../images/favicon_32.png);
    background-repeat: no-repeat;
    background-position: center;
    border-left: solid 1px transparent;
    border-right: solid 1px #F1F2F4;
    cursor: pointer;
}

.officetoolsbuttonhover {
    position: absolute;
    z-index: 2028;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: #17234e;
    background-image: url(../images/favicon_32.png);
    background-repeat: no-repeat;
    background-position: center;
    border-left: solid 1px transparent;
    border-right: solid 1px #F1F2F4;
    cursor: pointer;
}

.officetoolscontainerhide {
    visibility: hidden;
    z-index: 2028;
    position: absolute;
    transform: translate(-681px, -296px);
    height: 296px;
    width: 681px;
    background-color: transparent;
    border-radius: 3px 3px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: left top opacity;
    -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: left top opacity;
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: left top opacity;
    -o-transition-duration: 500ms;
    -o-transition-timing-function: linear;
    transition-property: left top opacity;
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.officetoolscontainershow {
    z-index: 2028;
    position: absolute;
    transform: translate(5px, 45px);
    height: 296px;
    width: 681px;
    background-color: transparent;
    border-radius: 3px 3px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition-property: left top opacity;
    -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: left top opacity;
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: left top opacity;
    -o-transition-duration: 500ms;
    -o-transition-timing-function: linear;
    transition-property: left top opacity;
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.officetoolscontentwrapper {
    position: relative;
    width: 676px;
    height: 270px;
    margin: 16px 5px 5px 5px;
    padding: 5px;
    border: solid 1px #ffffff;
    border-radius: 4px 4px;
    background-color: #ffffff;
    box-shadow: #424242 5px 5px 30px;
}


    .officetoolscontentwrapper:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 15px;
        top: -15px;
        border: 7px solid;
        border-color: transparent transparent #ffffff transparent;
    }

    .officetoolscontentwrapper:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 15px;
        top: -14px;
        border: 7px solid;
        border-color: transparent transparent #ffffff transparent;
    }

.officetoolscontenthide {
    position: absolute;
    top: 5px;
    left: 5px;
    max-height: 222px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    visibility: hidden;
    overflow: hidden;
    -webkit-transition-property: opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.officetoolscontentshow {
    position: absolute;
    top: 5px;
    left: 5px;
    max-height: 222px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    visibility: visible;
    overflow: hidden;
    -webkit-transition-property: opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

    .officetoolscontentshow:hover {
        overflow: auto;
    }

div.officetoolscontentshow::-webkit-scrollbar {
    width: 0.2rem;
    height: 0.2rem;
}

div.officetoolscontentshow:hover::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
}

div.officetoolscontentshow::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    outline: none;
    border: none;
}

div.officetoolscontentshow::-webkit-scrollbar-thumb {
    border: solid 1px transparent;
    border-radius: 0.1em;
    background-color: #ddd;
    outline: none;
}

.officetoolslink {
    position: relative;
    border-radius: 0 0 2px 2px;
    background-color: #0072c6;
    top: -43px;
    margin: 6px 6px 6px 7px;
    padding: 7px;
    font-size: 8pt;
    line-height: 10pt;
    color: #ffffff;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

.officetiletabon {
    display: inline-table;
    padding: 4px;
    font-size: 8pt;
    line-height: 10pt;
    color: #ffffff;
    font-style: normal;
    font-weight: bold;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: underline;
    cursor: pointer;
}

.officetiletaboff {
    display: inline-table;
    padding: 4px;
    font-size: 8pt;
    line-height: 10pt;
    color: #ffffff;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    cursor: pointer;
}

.officetoolstile {
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 10px;
    position: relative;
    float: left;
    margin: 3px;
    width: 104px;
    height: 104px;
    border: 2px solid transparent;
    cursor: pointer;
    -webkit-transition-property: border;
    -webkit-transition-duration: 50ms;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-property: border;
    -moz-transition-duration: 50ms;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-property: border;
    -o-transition-duration: 50ms;
    -o-transition-timing-function: ease-in-out;
    transition-property: border;
    transition-duration: 50ms;
    transition-timing-function: ease-in-out;
}

.officetoolstilehover {
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 10px;
    position: relative;
    float: left;
    margin: 3px;
    width: 104px;
    height: 104px;
    border: 2px solid #6f9acb;
    cursor: pointer;
    -webkit-transition-property: border;
    -webkit-transition-duration: 50ms;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-property: border;
    -moz-transition-duration: 50ms;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-property: border;
    -o-transition-duration: 50ms;
    -o-transition-timing-function: ease-in-out;
    transition-property: border;
    transition-duration: 50ms;
    transition-timing-function: ease-in-out;
}

.officetoolstiletext {
    position: absolute;
    left: 8px;
    bottom: 8px;
    text-align: left;
    font-size: 8pt;
    line-height: 10pt;
    color: #ffffff;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

.navPanel {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 900;
    font-size: 8pt;
    line-height: 10pt;
    color: #ffffff;
    font-style: normal;
    font-weight: bold;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: left;
    border: solid 1px transparent;
    background-color: #0072c6;
}

.navbarMenuHide {
    z-index: 200;
    position: absolute;
    top: -1px;
    left: 47px;
    background-color: #0072c6;
    border: solid 1px #0072c6;
    padding: 0;
    width: 0px;
    overflow-y: hidden;
    overflow-x: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition-property: width background-color opacity;
    -webkit-transition-duration: 50ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: width background-color opacity;
    -moz-transition-duration: 50ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: width background-color opacity;
    -o-transition-duration: 50ms;
    -o-transition-timing-function: linear;
    transition-property: width background-color opacity;
    transition-duration: 50ms;
    transition-timing-function: linear;
}

.navbarMenuShow {
    z-index: 200;
    position: absolute;
    top: -1px;
    left: 47px;
    background-color: #0072c6;
    border: solid 1px #0072c6;
    padding: 0;
    width: 236px;
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: #424242 5px 5px 20px;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition-property: width background-color opacity;
    -webkit-transition-duration: 150ms;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 50ms;
    -moz-transition-property: width background-color opacity;
    -moz-transition-duration: 150ms;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: 50ms;
    -o-transition-property: width background-color opacity;
    -o-transition-duration: 150ms;
    -o-transition-timing-function: linear;
    -o-transition-delay: 50ms;
    transition-property: width background-color opacity;
    transition-duration: 150ms;
    transition-timing-function: linear;
    transition-delay: 50ms;
}

.navbarItem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    background-color: #0072c6;
    white-space: nowrap;
}

.navbarItemOver {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    background-color: #55b3f8;
    white-space: nowrap;
}

    .navbarItem > i[class^=fa], .navbarItemOver > i[class^=fa] {
        font-size: 2.6rem;
        line-height: 3.5rem;
        color: #fff;
    }

    .navbarItem > i[class^=la], .navbarItemOver > i[class^=la] {
        font-size: 2.6rem;
        line-height: 3.5rem;
        color: #fff;
    }

    .navbarItem > span.material-icons, .navbarItemOver > span.material-icons {
        font-size: 2.6rem;
        line-height: 3.5rem;
        color: #fff;
    }

    .navbarItem > span.navbar-letter-icon, .navbarItemOver > span.navbar-letter-icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        top: 14px;
        left: 22px;
        font-size: 1.3rem;
        color: #fff;
        border: solid 2px transparent;
        border-radius: 50%;
        background-color: #0072c6;
    }

    .navbarItemOver > span.navbar-letter-icon {
        background-color: #55b3f8;
    }

.navbarSubMenuItem {
    height: 28px;
    position: relative;
    clear: both;
    cursor: pointer;
    color: #555555;
    background-color: #ffffff;
}

.navbarSubMenuItemOver {
    height: 28px;
    position: relative;
    clear: both;
    cursor: pointer;
    color: #ffffff;
    background-color: #55b3f8;
}

.navbarSubMenuItemImage {
    position: absolute;
    background-color: #e2e2e2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    width: 24px;
    height: 28px;
}

.navbarSubMenuItemText {
    position: absolute;
    padding: 4px;
    left: 24px;
    font-size: 9pt;
    line-height: 12pt;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: left;
    width: calc(100% - 28px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.navbarItemDivider {
    position: relative;
    text-align: center;
    cursor: pointer;
    height: 1px;
    background-color: #dcdcdc;
    white-space: nowrap;
}

#navTree {
    display: block;
    border: solid 1px transparent;
    padding: 0 0 0 0;
    margin: 5px 0 0 0;
    height: 900px;
    overflow: hidden;
    width: 200px;
}

    #navTree:hover {
        overflow: auto;
    }

.loading {
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    display: block;
    width: 10000px;
    height: 10000px;
    background-color: #EEE;
    padding-top: 25%;
    padding-left: 25%;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

.unloading {
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
    display: none;
    width: 160px;
    height: 160px;
    background-color: #EEE;
    overflow: hidden;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../images/logo96.png);
    background-position: center;
    background-size: 32px;
    animation: spin linear 1500ms infinite;
    -webkit-animation: spin linear 1500ms infinite;
    -moz-animation: spin linear 1500ms infinite;
    -o-animation: spin linear 1500ms infinite;
    /*background-image: url(../images/loading.gif);
 	background-position: center;
 	background-repeat: no-repeat;*/
}

.searching {
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    display: none;
    width: 0;
    height: 0;
    background-color: #FFF;
    overflow: hidden;
    opacity: 0.9;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=90);
}

.dlgBody, .dlgBodyNoBorders, .noteBody, .bdyOptions, .bdySpell, .bdyRules, .bdyFontEdit, .bdyDatePkr {
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    font-size: 8pt;
    line-height: 10pt;
    font-style: normal;
    font-weight: normal;
    color: #333;
    background-color: #f0f0f0;
    overflow: hidden;
}

.dlgBodyNoBorders {
    margin: 0px;
}

.dlgHR {
    width: 100%;
    height: 1px;
    color: #7f9db9;
    background-color: #7f9db9;
    border: none;
}

.dlgTitle {
    font-size: 8pt;
    line-height: 10pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    text-align: left;
    width: 100%;
    height: 22px;
    background-color: #f0f2f5;
    border-bottom: 1px solid #e2e4e7;
    padding: 4px 0 0 4px;
}

.mdiBody, .mdiBodyNoMargins {
    background-color: #ffffff;
    overflow: hidden;
}

.mdiBodyNoMargins {
    margin: 0px;
    overflow: hidden;
}

.noMargins {
    margin: 0px;
}

.mainframe {
    position: relative;
    display: block;
    margin: 14px 4px 4px 4px;
    border: solid 1px transparent;
}

.mainBodyNoScrolls {
    background-color: #ffffff;
    margin: 0px;
    overflow: hidden;
}

.mainBody {
    background-color: #ffffff;
    margin: 0px;
}

#divHeader {
    min-height: 64px;
    border-bottom: 1px solid #c2c3c5;
}

.mainBodyHeader {
    background-color: #ffffff;
    border: none;
    height: 34px;
    padding: 0.2rem;
}

.mainBodyHeader2 {
    background-color: #11416b;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 0px solid #ffffff;
    height: 25px;
}

.mainBodyHeader > span {
    font-size: 12pt;
    line-height: 15pt;
    color: #15428b;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

.mainBodyHeader > #divFilters {
    display: inline;
    float: right;
    margin: 3px 3px 0 3px;
    font-size: 8pt;
    line-height: 10pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

    .mainBodyHeader > #divFilters > span {
        display: inline;
        margin: 0px 3px 0 3px;
        font-size: 8pt;
        line-height: 10pt;
        color: #333333;
        font-style: normal;
        font-weight: normal;
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    }

    .mainBodyHeader > #divFilters > select {
        display: inline;
        margin: 0px 3px 0 3px;
    }


.mainBodySubHeader, .mainBodySubHeader1, .mainBodyPaging {
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    background-color: transparent;
    height: 32px;
}

.mainBodySubHeader1 {
    height: 30px;
}

.mainBodyPaging {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0.3rem;
}

/* Multiple-Select Style */
.ms-parent {
    min-width: unset !important;
    max-width: 100% !important;
    margin: 3px 1px;
}

    .ms-parent > button.ms-choice {
        position: relative;
        padding: 0.5rem !important;
        height: 21px;
        color: #333333;
        background-color: #ffffff;
    }

        .ms-parent > button.ms-choice > span {
            color: #333;
            padding: 1px 6px;
        }

        .ms-parent > button.ms-choice > div {
            position: absolute;
            min-width: 20px !important;
            max-width: 20px !important;
            height: 20px !important;
            top: 0;
            right: 0;
            background: none;
        }

            .ms-parent > button.ms-choice > div:before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                color: #333;
                content: '\25bc';
                font-family: Arial;
                text-align: center;
            }

            .ms-parent > button.ms-choice > div.open:before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                color: #333;
                content: '\25b2';
                font-family: Arial;
                text-align: center;
            }

.ms-drop.bottom {
    color: #333 !important;
    background-color: #ffffff !important;
    height: unset !important;
}

/* Style Scrollbars */
.ms-drop ul::-webkit-scrollbar {
    width: 0.2rem;
    height: 0.2rem;
}

.ms-drop ul:hover::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
}

.ms-drop ul::-webkit-scrollbar-track {
    box-shadow: rgba(0, 0, 0, 0.30) 0px 0px 0.175em inset;
    -webkit-box-shadow: inset 0 0 0.175em rgba(0,0,0,0.3);
    outline: none;
}

.ms-drop ul::-webkit-scrollbar-thumb {
    border: solid 1px transparent;
    border-radius: 0.3em;
    background-color: #fff;
    outline: solid 1px transparent;
}
/* Style Scrollbars */

.ms-drop li {
    padding: 4px;
    color: #333;
    background-color: #fff;
}
/* Multiple-Select Style */

#versaGrid-Header {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0.3rem;
    height: 36px;
    color: #444444;
    background-color: #fff;
    border-bottom: solid 1px #a0a0a0;
}

.versaGrid-SubHeading {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column: 1/3;
    grid-row: 2/3;
    margin: -3px 0 0 0;
}

.versaGrid-Paging {
    position: relative;
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

.versagrid-nav-button {
    width: 32px;
    height: 24px;
}

.versagrid-nav-dropdown {
    width: 64px;
    text-align: center;
}

div.versaimg {
    resize: both;
    overflow: hidden;
}

div.versaimg > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Start Note Styles */
.popupNoteBorder {
    display: none;
    width: 380px;
    height: 360px;
    border: solid 1px #D9B341;
    box-shadow: #343434 5px 5px 30px;
}

.popupNoteHeader {
    height: 28px;
    background-image: url(../images/notes.png);
    background-position: 4px 3px;
    background-repeat: no-repeat;
    background-color: #FFF993;
    border-bottom: 1px solid #D9B341;
    padding: 4px;
    cursor: default;
}

.popupNoteTitle {
    float: left;
    width: calc(100% - 52px);
    height: 28px;
    font-family: 'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 9pt;
    font-style: normal;
    font-weight: bold;
    line-height: 11pt;
    color: #333333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 0 0 24px;
}

.popupNoteBody {
    width: 100%;
    height: 330px;
    padding: 3px;
    background-color: #FFFFB7;
}

.popupNoteNav {
    float: left;
    width: 100%;
    height: 24px;
    padding: 0;
}

.popupNoteBody > div:nth-child(2) {
    height: calc(100% - 25px) !important;
}

.popupNoteButton, .popupNoteButtonActive {
    float: left;
    display: inline;
    width: 44px;
    height: 28px;
    border: solid 1px #cdcdcd;
    border-radius: 2px 2px;
    background: linear-gradient(#f6f6f6, #dddddd);
    margin: 0 1px 0 1px;
    color: #333333;
    font-family: 'Segoe UI', Arial, Verdana, Tahoma;
    font-size: 8pt;
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

.popupNoteButtonActive {
    background: linear-gradient(#FFF993, #D9B341);
    color: #333333;
}

    .popupNoteButton:hover, .popupNoteButtonActive:hover {
        border: solid 1px #787878;
    }

.popupNoteBody textarea {
    padding: 4px;
    border: 1px solid #D9B341;
    background-color: #FFF2B5;
    width: 370px;
    height: 297px;
    overflow: auto;
}

.popupNoteClose {
    float: right;
    position: relative;
    display: inline-table;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -96px 0;
    background-color: #C75050;
    top: -1px;
}


.popupDayNote {
    position: relative;
    display: inline-table;
    float: left;
    background-color: rgb(237, 200, 126);
    border: solid 1px rgb(255, 255, 255);
    width: 16px;
    height: 16px;
    margin: 6px 0 0 0;
    cursor: pointer;
}

    .popupDayNote:before {
        position: absolute;
        display: inline-block;
        border-top: solid 3px rgb(237,200,126);
        border-right: solid 3px rgb(237,200,126);
        border-left: solid 3px #fff;
        border-bottom: solid 3px #fff;
        width: 0px;
        height: 0px;
        left: 0;
        bottom: 0;
        content: '';
    }

    .popupDayNote:after {
        position: absolute;
        display: inline-block;
        border: solid 1px #fff;
        width: 5px;
        height: 5px;
        left: 0px;
        bottom: 0px;
        content: '';
    }

.popupDayHasNote {
    position: relative;
    display: inline-table;
    float: left;
    background-color: rgb(237, 200, 126);
    border: solid 1px rgb(255, 255, 255);
    width: 16px;
    height: 16px;
    margin: 6px 0 0 0;
    cursor: pointer;
}

    .popupDayHasNote:before {
        position: absolute;
        display: inline-block;
        border-top: solid 3px #e24216;
        border-right: solid 3px #e24216;
        border-left: solid 3px #fff;
        border-bottom: solid 3px #fff;
        width: 0px;
        height: 0px;
        left: 0;
        bottom: 0;
        content: '';
    }

    .popupDayHasNote:after {
        position: absolute;
        display: inline-block;
        border: solid 1px #fff;
        width: 5px;
        height: 5px;
        left: 0px;
        bottom: 0px;
        content: '';
    }

/* End Note Styles */

.noscroll {
    overflow: hidden; /* Remove Scrollbars */
}

.readingPaneBody {
    background-color: #ffffff;
}

.readingPaneContainer {
    background-color: #ffffff;
    border-right: #ffffff 1px solid;
    border-top: #ffffff 1px solid;
    border-left: #ffffff 1px solid;
    border-bottom: #ffffff 1px solid
}

.readingPaneFrame {
    padding-top: 10px;
    margin-top: 0px;
    margin-left: 0px;
    width: 100%;
    height: 100%;
    border-top: #6593cf 1px solid;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
}

.readonly {
    background-color: #f3f3f3;
}

.mainMenuBar {
    background-color: #c3daf9; /* #2557ad */
}

.statusBarImg {
    display: inline;
    float: left;
    width: 16px;
    height: 16px;
    padding: 0 6px 0 0;
    margin: 0 0 0 0;
    border-style: none;
    border-width: 0px;
}

.statusBarText, .statusBarItem {
    display: inline;
    float: left;
    position: relative;
    height: 16px;
    margin-top: 2px;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 2px;
    font-size: 8pt;
    line-height: 8pt;
    color: #ffffff;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    white-space: nowrap;
}

.statusBar {
    z-index: 500;
    position: relative;
    display: inline;
    float: left;
    height: 30px;
    width: 100%;
    margin: 0 5px 0 0;
    background-color: #0072c6;
    border-collapse: collapse;
    border-top: solid 1px #A0A0A0;
    border-bottom: solid 0 #000000;
    border-left: solid 1px transparent;
    border-right: solid 1px transparent;
    -webkit-box-sizing: unset;
    -moz-box-sizing: unset;
    box-sizing: unset;
}

.statusBarItem {
    position: relative;
    float: left;
    padding: 4px 0 0 0;
}

.statusBarItemSpacer {
    position: relative;
    float: left;
    height: 20px;
}

.statusBarSpacer {
    position: relative;
    background-color: #0072c6;
    width: 1px;
    height: 0;
}

.horizontalGrip, .verticalGrip {
    background-color: #ffffff;
    border-top: 0px solid #ffffff;
    border-bottom: 1px solid #A5ACB5;
    border-left: 0px solid #ffffff;
    border-right: 0px solid #ffffff;
    text-align: center;
    height: 8px;
}

.verticalGrip {
    background-color: #CAE1FB;
}

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.rotate180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.sectionDivider {
    width: 100%;
    border-top: solid 1px #6593cf;
    margin: 4px 0 4px 0;
}

.rowSelect {
    background-color: #a6a8ea;
}

/* Start versaCalendar Nav Styling */
#divContents > div.calButton, #divContents > div.calButtonSelected {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0.5rem 0;
    width: 5rem;
    height: 5rem;
    margin: 0 0 1rem 0;
    font-size: 8pt;
    line-height: 8pt;
    color: #333;
    font-style: normal;
    font-weight: bold;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    border-radius: 0.3rem;
    background-color: transparent;
}

#divContents > div.calButtonSelected {
    color: #fff;
    background-color: #0072c6;
    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
}

    div.calButton > span, div.calButtonSelected > span {
        font-size: 2rem;
    }

#divContents > div.calButton::after {
    content: attr(data-label);
    position: absolute;
    width: 100%;
    height: 3rem;
    left: 0;
    bottom: -1rem;
}

#divContents > div.calButton > img {
    box-shadow: 1px 1px 3px transparent;
}

#divContents > div.calButtonSelected > img {
    box-shadow: 1px 1px 3px #808080;
}

#divContents > div.calButtonSelected::after {
    content: attr(data-label);
    position: absolute;
    width: 100%;
    height: 3rem;
    left: 0;
    bottom: -1rem;
}

/* End versaCalendar Nav Styling */

.cbToolbar {
    background-color: #f1f1f1;
    border-left: 0px solid #A0A0A0;
    border-right: 0px solid #A0A0A0;
    border-top: 0px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
    height: 26px;
    cursor: default;
}

.cbToolbarHeading {
    position: relative;
    top: -2px;
    right: 4px;
    margin: 0 0 0 4px;
    font-family: 'Segoe UI', Verdana, Arial, sans-serif;
    font-size: 12pt;
    line-height: 16pt;
    font-weight: normal;
    color: #ffffff;
    cursor: default;
}

.trButtons {
    /* No longer used */
}

.previewBody {
    background-color: white;
    border-color: #405580;
}

.commentsBody {
    padding: 0 0 0 0;
    background-color: #ffffff;
}

.correspondenceBody {
    padding: 0 0 0 0;
    background-color: #ffffff;
}

.systemTable {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    width: 100%;
    border-collapse: collapse;
    font-size: 8pt;
    line-height: 10pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

    .systemTable td {
        border: 1px solid #dddddd;
        border-collapse: collapse;
    }

.systemTableHeading {
    font-size: 8pt;
    line-height: 10pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    background-color: #cccccc;
}

.printFriendlyTable {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    width: 100%;
    border-collapse: collapse;
}

    .printFriendlyTable td {
        padding: 4px;
    }

.printFriendlyTableHeading {
    font-size: 8pt;
    line-height: 10pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    background-color: #cccccc;
}

.rowselected {
    background-color: #316ac5;
    color: white;
}

.rowunselected {
    background-color: transparent;
    color: #333333;
}

H1, .heading1, .heading1a {
    font-size: 14pt;
    line-height: 16pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

.heading1a {
    color: #15428b;
}

H2, .heading2 {
    font-size: 12pt;
    line-height: 14pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

H3, .heading3, .heading3a {
    font-size: 12pt;
    line-height: 14pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

.heading3a {
    color: #15428b;
}

H4, .heading4 {
    font-size: 8pt;
    line-height: 11pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

IFRAME, FRAME {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd; /* InactiveCaption #2557ad */
}

    iframe#SysQueueFrame {
        height: calc(100vh - 120px);
        width: calc(100vw - 216px);
        min-width: 254px;
    }

    iframe#SysGroupFrame, iframe#SysKeyFrame {
        height: calc(100vh - 130px);
        width: calc(100vw - 148px);
        min-width: 316px;
    }

    iframe#SysUserFrame {
        height: calc(100vh - 176px);
        width: calc(100vw - 174px);
        min-width: 524px;
    }

    iframe#WatcherFrame {
        width: calc(100vw - 82px) !important;
        height: calc(100vh - 172px) !important;
    }

    iframe#ifmList {
        height: calc(100vh - 124px) !important;
        width: calc(100vw - 148px) !important;
        min-width: 242px;
    }

    iframe#SysReportFrame {
        height: calc(100vh - 160px);
    }

    iframe#SysArticleFrame, iframe#SysNewsFrame, iframe#SysEventsFrame, iframe#SysFormFrame, iframe#SysTutorialsFrame, iframe#SysScheduleFrame, iframe#SysTemplateFrame, iframe#SysActionTemplateFrame, iframe#SysUpdateTemplateFrame, iframe#SysChangeRequestPoliciesFrame, iframe#SysRoutingRuleFrame {
        height: calc(100vh - 170px);
    }

    iframe#SysLabelsFrame {
        height: calc(100vh - 120px);
    }

    iframe#TableRecordsFrame, iframe#LookupListsListFrame {
        width: calc(100vw - 60px);
        height: calc(100vh - 250px);
    }

    iframe#SecProfFrame {
        height: calc(100vh - 312px) !important;
        width: calc(100vw - 148px) !important;
        min-height: 164px;
    }

    iframe#SecProfPropFrame {
        width: calc(100vw - 52px) !important;
        min-height: 164px;
    }

    iframe#ResultsFrame {
        height: calc(100vh - 234px) !important;
        width: calc(100vw - 56px) !important;
    }

.div1 {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

.IFRAMENoBorder {
    border-top: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
}

/*  2021-08-02] - Latest Chrome seems to have ignored the cell nowrap attribute */
td[nowrap] {
    white-space: nowrap;
}

.default, .divRow, .divCol1, .divCol2, .style1, .style1l, .style1a, .style1b, .style1c, .style1d, .style1e, .style2, .style3, .sysmessage, .sysmessagetitle, .smtext1, .smtext2, .bold1, .bold1a, .bold2, .bold3, .kblink, SELECT, INPUT, TEXTAREA, BUTTON {
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    outline: none;
}

#cellIFRAME, #cellButtons {
    white-space: normal;
}

.attachmentlist {
    font-size: 8pt;
    line-height: 8pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

SELECT, INPUT[type="text"], INPUT[type="password"], TEXTAREA, FIELDSET, .textinput {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    margin: 1px;
    padding: 3px;
}

select {
    height: 24px;
    margin: 1px;
    padding: 1px;
}

    select > option {
        background-color: #fff;
        color: #333;
    }

INPUT[type="text"], INPUT[type="password"], TEXTAREA {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #bbbbbb;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #bbbbbb;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #bbbbbb;
}

INPUT[type="button"], INPUT[type="button"]:hover {
    font-family: 'Segoe UI', 'Segoe UI Light', Verdana, Arial;
    font-size: 8pt;
    line-height: 10pt;
    font-style: normal;
    font-weight: normal;
    border: solid 1px #dddddd;
    background-color: ButtonFace;
    color: #444444;
    min-height: 24px;
    outline: none;
}

    input[type="button"]:hover {
        border: solid 1px #acacac;
    }

    input[type="button"]:active {
        border: solid 1px #acacac;
        border-left: solid 1px #888;
        border-top: solid 1px #888;
    }

    input[type="button"].buttonDisabled {
        background-color: #cccccc;
        cursor: not-allowed;
        outline: none;
    }

    input[type="button"].versaButton {
        width: 8rem;
        padding: 1rem;
        text-align: center;
        margin: 0.5rem;
        color: #f0f0f0;
        border: solid 1px #196fc5;
        background-color: #2d81d5;
    }

        input[type="button"].versaButton:active, input[type="button"].versaButton:hover {
            color: #f0f0f0;
            border: solid 1px #c57a09;
            background-color: #d79128;
        }

textarea {
    resize: none;
}

INPUT[type="text"].readonly {
    cursor: default;
    background-color: #f8f8f8;
}

.style1 {
    color: #333333;
}

.style1a {
    color: #525152;
}

.style1b {
    color: rgb(2,15,120);
}

    .style1b a:link, .style1b a:visited, .style1b a:active {
        color: rgb(2,15,120);
    }

    .style1b a:hover {
        color: rgb(255,255,255);
        background-color: #0072c6;
    }

.style1c {
    color: rgb(0,192,0);
}

    .style1c a:link, .style1c a:visited, .style1c a:active {
        color: rgb(0,192,0);
    }

    .style1c a:hover {
        color: rgb(255,255,255);
        background-color: #0072c6;
    }

.style1d {
    color: rgb(238,71,0);
}

.style1e {
    color: rgb(192,0,192);
}

    .style1e a:link, .style1e a:visited, .style1e a:active {
        color: rgb(192,0,192);
    }

    .style1e a:hover {
        color: rgb(255,255,255);
        background-color: #0072c6;
    }

.style1l {
    color: #dcdada;
}

.style2 {
    color: #000000;
    white-space: nowrap;
}

.style3 {
    color: #ffffff;
    white-space: nowrap;
}

.sysmessagetitle {
    font-size: 8pt;
    line-height: 11pt;
    font-weight: normal;
}

.sysmessage {
    font-size: 8pt;
    line-height: 11pt;
}

.kblink {
    color: rgb(0,0,255);
    text-decoration: underline;
}

.bold1, .bold3 {
    font-weight: bold;
}

.bold1a a:link, .bold1a a:active, .bold1a a:visited {
    font-weight: bold;
    color: #444444;
    background-color: transparent;
}

.bold1a a:hover {
    font-weight: bold;
    color: #ffffff;
    background-color: #0072c6;
}

.bold2 {
    font-weight: bold;
    color: rgb(255,255,255);
}

.bold3 a:link, .bold3 a:active, .bold3 a:visited {
    font-weight: bold;
    color: #444444;
    background-color: transparent;
}

.bold3 a:hover {
    font-weight: bold;
    color: #ffffff;
    background-color: #0072c6;
}

.smtext1 {
    font-size: 6pt;
    line-height: 8pt;
    color: #444444;
}

.smtext2 {
    font-size: 7pt;
    line-height: 8pt;
}

.comp1, .error1 {
    font-size: 8pt;
    line-height: 10pt;
    color: rgb(238,71,0);
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

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

.tableheader1 {
    background-color: #CEE3FB;
    border-style: solid;
    border-collapse: separate;
    border-top-color: #A3A7AC;
    border-bottom-color: #A0A0A0;
    border-left-color: #9ac6ff;
    border-right-color: #9ac6ff;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
}

.tablerowselected {
    background-color: #a6a8ea;
}

.tablerecords1, .tablerecords2 {
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    cursor: pointer;
}


.tablerecords1 {
    background-color: rgb(255,255,255);
}

.tablerecords2 {
    background-color: rgb(221,221,221);
}

.toolbarruler {
    position: relative;
    display: inline-block;
    background-color: #bbd7fc;
    height: 27px;
    background-image: url(../images/ruler1.png);
}

.toolbarleft {
    display: inline;
    float: left;
    width: 8px;
    height: 16px;
    background-color: transparent;
    padding-top: 3px;
    padding-left: 0px;
    padding-bottom: 3px;
    padding-right: 0px;
    cursor: default;
}

.toolbarbuttonimg {
    display: inline;
    float: left;
    width: 16px;
    height: 16px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border-style: none;
    border-width: 0px;
}

.toolbarbuttonimgspacer {
    display: inline;
    position: relative;
    float: left;
    width: 5px;
    height: 16px;
    padding: 0px 0px 0px 0px;
    border-style: none;
    border-width: 0px;
}

.toolbarbuttontext {
    display: inline;
    float: left;
    position: relative;
    top: 2px;
    height: 22px;
    margin-top: 0;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 2px;
    font-size: 8pt;
    line-height: 8pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

.toolbarbutton {
    display: inline;
    float: left;
    height: 22px;
    background-color: transparent;
    padding-top: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
    cursor: default;
    border-width: 0px;
    border-color: #ffbe6b;
    border-style: none;
}

    .toolbarbutton:hover, .toolbarbuttonover {
        display: inline;
        float: left;
        height: 22px;
        background-color: #cde6f7;
        padding-top: 2px;
        padding-left: 2px;
        padding-bottom: 2px;
        padding-right: 2px;
        cursor: pointer;
        border-width: 1px;
        border-color: #7bbae5;
        border-style: solid;
    }

.toolbarbuttondisabled {
    display: inline;
    float: left;
    height: 22px;
    background-color: #cccccc;
    border-width: 1px;
    border-color: #c9c4c4;
    border-style: solid;
    padding-top: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
    cursor: not-allowed;
    outline: none;
}

.toolbarbuttonspacer {
    display: inline;
    float: left;
    width: 7px;
    height: 16px;
    background-color: transparent;
    padding-top: 3px;
    padding-left: 1px;
    padding-bottom: 3px;
    padding-right: 1px;
    cursor: default;
}

.toolbarbuttonbutton {
    position: absolute;
    top: -3px;
    height: 22px;
    font-size: 8pt;
    line-height: 8pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

.customButtonImg {
    display: inline;
    width: 16px;
    height: 16px;
    margin: 6px;
    border-style: none;
    border-width: 0px;
}

.customButtonText {
    display: inline;
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

.customButton {
    background-color: #ffffff;
    border-left: 0px solid #A0A0A0;
    border-right: 0px solid #A0A0A0;
    border-top: 0px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
    height: 30px;
    width: 100%;
    cursor: default;
}

.customButtonOver {
    background-color: #e6f2fa;
    border-left: 0px solid #A0A0A0;
    border-right: 0px solid #A0A0A0;
    border-top: 0px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
    height: 30px;
    width: 100%;
    cursor: default;
}

.imgButton {
    float: left;
    height: 16px;
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
    cursor: default;
    border-width: 1px;
    border-color: #707070;
    border-style: solid;
}

.imgButtonDisabled {
    float: left;
    height: 16px;
    background-color: transparent;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
    cursor: default;
}

.imgButtonDisabled, input[type="button"].buttonDisabled, input[type="button"][disabled="disabled"] {
    color: #838383 !important;
    background-color: #CCCCCC !important;
    border-width: 1px !important;
    border-color: #CCCCCC !important;
    border-style: solid !important;
    cursor: not-allowed;
    outline: none;
}

.imgButtonVerticalHolder {
    height: 24px;
}

.sideButton, .sideButtonOver, .sideButtonSelected {
    position: relative;
    width: 118px;
    height: 22px;
    border: 0px none #ffffff;
    background-color: #ffffff;
    padding: 6px 3px 1px 10px;
    margin: 2px 2px 2px 2px;
    font-size: 8pt;
    line-height: 1.5;
    color: #3b3b3b;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

.sideButtonOver {
    border: 1px solid #fdf7cf;
    background-color: #fdf7cf;
    padding: 5px 2px 0px 9px;
}

.sideButtonSelected {
    border: 1px solid #ffe48a;
    background-color: #ffe48a;
    padding: 5px 2px 0px 9px;
}

/* Context Menu Start */

.ContextMenuBody:before {
    content: ' ';
    position: absolute;
    background-color: #e9eeee;
    width: 24px;
    height: 100%;
    white-space: nowrap;
}

.ContextMenuBody {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    /*
	background-color:#e9eeee;
	background-image:url(../images/menus/background.png);
    */
    border: solid 1px #6593cf;
    box-shadow: #343434 5px 5px 10px;
}

.ContextMenuBodyShadow {
    position: absolute;
    top: 2px;
    left: 2px;
}

.ContextMenuItem {
    position: relative;
    display: flex;
    align-items: center;
    clear: both;
    cursor: default;
    min-height: 24px;
    border-top: solid 1px transparent;
    border-right: solid 1px transparent;
    border-bottom: solid 1px transparent;
    border-left: solid 1px transparent;
    padding: 2px;
    margin: 0;
}

.ContextMenuItemOver {
    position: relative;
    display: flex;
    align-items: center;
    clear: both;
    cursor: default;
    min-height: 24px;
    border-top: solid 1px #ffbd69;
    border-right: solid 1px #ffbd69;
    border-bottom: solid 1px #ffbd69;
    border-left: solid 1px #ffbd69;
    padding: 2px;
    margin: 0;
    background-color: #ffe7a2;
}

.ContextMenuItemDisabled {
    filter: alpha(opacity=35);
    position: relative;
    display: flex;
    align-items: center;
    clear: both;
    cursor: default;
    min-height: 24px;
    border-top: solid 1px transparent;
    border-right: solid 1px transparent;
    border-bottom: solid 1px transparent;
    border-left: solid 1px transparent;
    padding: 2px;
    margin: 0;
}

.ContextMenuItemDivider {
    position: relative;
    clear: both;
    cursor: default;
    /*
	background-image:url(../images/menus/contextmenu_divider.png);
	background-repeat:repeat-x;	
    */
    background-color: #9CC6FF;
    height: 1px;
    border: none 1px #000000;
    padding: 0 0 0 0;
    margin: 2px 4px 2px 28px;
}

.ContextMenuItemText {
    position: relative;
    float: left;
    color: #333333;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    padding: 0;
    cursor: default;
    border: none;
}

.ContextMenuItemImage {
    position: relative;
    top: 0;
    left: 0;
    padding: 3px 0;
    float: left;
    width: 24px;
    height: 24px;
    border: none;
}

.ContextMenuItemImageBlank {
    position: relative;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border: none;
}

/* Context Menu End */


.timeline {
    background-color: rgb(128,255,128);
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: Verdana, Arial;
    text-decoration: none;
}


.disableImage {
    color: #B5B6CE;
    cursor: default;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
    /* filter: progid:DXImageTransform.Microsoft.Emboss(); */
}

.editDivImg {
    float: left;
    position: relative;
    background-color: #FFF;
    LEFT: 0;
    TOP: 0;
    border-left: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    border-right: 1px none #dddddd;
    border-bottom: 1px solid #dddddd;
    height: 20px;
}

.editDiv {
    display: inline-block;
    background-color: #FFFFFF;
    border: 1px solid #dddddd;
    width: 100px;
    height: 20px;
    text-align: left;
    padding: 2px 1px 1px 2px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: text;
}

.editDivRight {
    float: left;
    background-color: #FFFFFF;
    border-left: 1px none #dddddd;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    width: 100px;
    height: 20px;
    text-align: left;
    padding: 2px 1px 1px 2px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
}

/* side tabs */
.mainSideBody {
    position: relative;
    margin-left: 200px;
    top: 10px;
    background-color: #ffffff;
}

.sidetabs {
    float: left;
    width: 180px;
    padding-top: 12px;
    padding-left: 10px;
    background-color: #f0f0f0;
}

.sidetabselected {
    background-color: #ffffff;
    font-size: 8pt;
    color: #0072c6;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: Left;
    cursor: pointer;
    height: 25px;
    padding-top: 1px;
    margin-bottom: 6px;
    border-bottom: solid 1px #dbdbdb;
    border-left: solid 1px #dbdbdb;
    border-top: none;
    border-right: none;
    user-select: none;
}

.sidetabover {
    background-color: #e1e1e1;
    font-size: 8pt;
    color: #0072c6;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: Left;
    cursor: pointer;
    height: 25px;
    padding-top: 1px;
    margin-bottom: 6px;
    border-bottom: solid 1px #dbdbdb;
    border-left: solid 1px #dbdbdb;
    border-top: none;
    border-right: none;
    user-select: none;
}

.sidetabsunselected {
    background-color: transparent;
    font-size: 8pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: Left;
    cursor: pointer;
    height: 25px;
    padding-top: 1px;
    margin-bottom: 6px;
    border-bottom: solid 1px #acacac;
    border-left: solid 1px #acacac;
    border-top: none;
    border-right: none;
    user-select: none;
}

.sidetabshidden {
    display: none;
}

.sidetabhighlighted {
    background-color: #f2ca47;
    font-size: 8pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: Left;
    cursor: pointer;
    height: 25px;
    padding-top: 1px;
    margin-bottom: 6px;
    border-bottom: solid 1px #919B9C;
    border-left: solid 1px #919B9C;
    border-top: none;
    border-right: none;
    user-select: none;
}

.sidetabsnone {
    background-color: transparent;
}

.sidetabimg {
    width: 16px;
    height: 16px;
    margin: 5px;
    border-style: none;
    border-width: 0px;
}

.sidetabtext {
    display: inline;
    position: relative;
    height: 25px;
    font-size: 8pt;
    line-height: 8pt;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

/* end of side tabs */

.tabbody {
    background-color: #ffffff; /*#f4f3ee;*/
    border-style: solid;
    border-width: 1px;
    border-top-color: #acacac;
    border-bottom-color: #acacac;
    border-left-color: #acacac;
    border-right-color: #acacac;
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    padding: 15px;
    cursor: default;
    font-size: 8pt;
    line-height: 1.5;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: left;
}

.tabon {
    background-color: #ffffff; /*#f4f3ee;*/
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-top-color: #acacac;
    border-top-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-right-style: solid;
    font-size: 8pt;
    line-height: 1.5;
    color: #0072c6;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: center;
    padding: 0 6px 0 6px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.taboff {
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-bottom-color: #acacac;
    border-top-color: #acacac;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    font-size: 8pt;
    line-height: 1.5;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: center;
    padding: 0 6px 0 6px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.tabdisabled {
    background-color: #ece9d8;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-bottom-color: #acacac;
    border-top-color: #acacac;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    font-size: 8pt;
    line-height: 1.5;
    color: #aaaaaa;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: center;
    padding: 0 6px 0 6px;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.tabspacer {
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-bottom-color: #acacac;
    border-top-color: #acacac;
    border-top-width: 1px;
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-style: none;
    cursor: default;
    white-space: nowrap;
}

.tabdivspacer {
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.tabnone {
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-bottom-color: #acacac;
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-style: none;
    user-select: none;
}

.mditabbody {
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-top-color: #acacac;
    border-bottom-color: #acacac;
    border-left-color: #acacac;
    border-right-color: #acacac;
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    padding: 10px;
    cursor: default;
    font-size: 8pt;
    line-height: 1.5;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: left;
}

.mditabon {
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-top-color: #acacac;
    border-top-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-right-style: solid;
    font-size: 8pt;
    line-height: 1.5;
    color: #0072c6;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: center;
    padding: 0 8px 0 8px;
    white-space: nowrap;
    cursor: pointer;
}

.mditabhighlight {
    background-color: #fdf7cf;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-top-color: #ffc83c;
    border-top-width: 3px;
    border-top-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-right-style: solid;
    font-size: 8pt;
    line-height: 1.5;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: center;
    padding: 0 8px 0 8px;
    white-space: nowrap;
    cursor: pointer;
}

.mditabhighlight1a {
    background-color: #fae38b;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-bottom-color: #acacac;
    border-top-color: #acacac;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    font-size: 8pt;
    line-height: 1.5;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: center;
    padding: 0 8px 0 8px;
    white-space: nowrap;
    cursor: pointer;
}

.mditaboff, .mditabover {
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-bottom-color: #acacac;
    border-top-color: #acacac;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    font-size: 8pt;
    line-height: 1.5;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: center;
    padding: 0 8px 0 8px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.mditabover {
    color: #0072c6;
    cursor: default;
}

.mditabdisabled {
    background-color: #ece9d8;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-bottom-color: #acacac;
    border-top-color: #acacac;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    font-size: 8pt;
    line-height: 1.5;
    color: #aaaaaa;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: center;
    padding: 0 8px 0 8px;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}


.mditabhidden {
    display: none;
}

.mditabspacer {
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-right-color: #acacac;
    border-left-color: #acacac;
    border-bottom-color: #acacac;
    border-top-color: #acacac;
    border-top-width: 1px;
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-style: none;
    cursor: default;
    white-space: nowrap;
}

.mditabdivspacer {
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.mditabnone {
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-bottom-color: #acacac;
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-style: none;
    user-select: none;
}

.dgContainer {
    margin: 0;
    padding: 0;
    min-height: 100px;
    width: 100%;
    overflow: auto;
    background-color: transparent;
    border: 0px solid transparent;
}

.datagrid, .datagridnoborders, .datagridHeader, .datagridRow, .datagridAltRow, .datagridArchiveRow, .versagrid, .versagrid-noborders, .versagrid-header, .versagrid-select-row, .versagrid-highlight-row, .versagrid-row, .versagrid-alt-row, .versagrid-archive-row {
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    cursor: default;
}

.datagridnoborders {
    cursor: default;
}

.datagrid {
    border-collapse: collapse;
    border-right: solid 1px transparent;
}

    .datagrid th, .datagrid td {
        border: 1px #eeeeee solid;
        padding: 4px;
    }

        .datagrid th:first-child, .datagrid td:first-child {
            border-left: 1px solid transparent;
        }

        .datagrid th:last-child, .datagrid td:last-child {
            border-right: 1px solid transparent;
        }

td.datagridHeader, td.datagridHeaderAsc, td.datagridHeaderDesc, .versagrid-row-header {
    color: #333333;
    background-color: #f0f0f0;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #f0f0f0;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #f0f0f0;
    text-align: left;
}

    td.datagridHeader:after {
        content: '';
        background-image: none;
        background-repeat: no-repeat;
    }

    td.datagridHeaderAsc:after {
        content: '';
        float: right;
        width: 16px;
        height: 16px;
        content: '';
        background-image: url(../images/ascending.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    td.datagridHeaderDesc:after {
        content: '';
        float: right;
        width: 16px;
        height: 16px;
        background-image: url(../images/descending.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    td.datagridHeader > i.material-icons {
        font-size: 1rem;
        color: #838383;
        padding: 0;
    }

    td.datagridHeader a {
        color: #444444;
    }

        td.datagridHeader a:hover {
            color: #444444;
            background-color: transparent;
        }

    td.datagridHeader:first-child {
        border-left: 1px solid transparent;
    }

    td.datagridHeader:last-child {
        border-left: 1px solid transparent;
    }

.datagridRow, .versagrid-row {
    background-color: #FFFFFF;
}

.datagridAltRow, .versagrid-alt-row {
    background-color: #FFFFFF;
}

.datagridSelectRow, .versagrid-select-row {
    background-color: #cde6f7;
}

.datagridHighlightRow, .versagrid-highlight-row {
    background-color: #FFE8A7;
}

.datagridArchiveRow, .versagrid-archive-row {
    color: #333333;
    background-color: #EFE0FF;
}

.formheading {
    font-size: 10pt;
    color: #15428b;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

.formsubheading {
    font-size: 8pt;
    color: #15428b;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
}

.formquestion {
    font-size: 8pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: Verdana, Arial;
    text-decoration: none;
}

/* Start versaModalDialog Styles */

.modaldialogtitle1 {
    font-size: 10pt;
    line-height: 10pt;
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    text-align: left;
    background-color: #5d6771;
    border-bottom: 1px solid #5d6771;
    padding: 4px 0 8px 4px;
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    background-image: url(../images/favicon.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
}

.modaldialogtitle2 {
    font-size: 10pt;
    line-height: 10pt;
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    text-align: left;
    background-color: #5d6771;
    border-bottom: 1px solid #5d6771;
    padding: 4px 0 8px 4px;
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    background-image: url(../images/info.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
}

.modaldialogtitle3 {
    font-size: 10pt;
    line-height: 10pt;
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    text-align: left;
    background-color: #5d6771;
    border-bottom: 1px solid #5d6771;
    padding: 4px 0 8px 4px;
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    background-image: url(../images/help1.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
}

.modaldialog {
    background-color: #eeeeee;
    padding: 8px;
    border: 1px solid #666666;
}

.modaldialognoborder {
    background-color: #eeeeee;
}

.modaldialogborder {
    border-style: solid;
    border-width: 4px;
    border-color: #5d6771;
    border-top-width: 2px;
    box-sizing: border-box;
}


.mdbox {
    position: absolute;
    visibility: visible;
    background-color: #5d6771;
    padding: 5px 5px 5px 5px;
    border: 1px solid #5d6771;
    box-shadow: #656464 2px 2px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mdboxheader {
    position: relative;
    height: 25px;
    background-color: #5d6771;
    font-size: 10pt;
    line-height: 10pt;
    color: #ffffff;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    cursor: default;
}

.mdboxtitlebuttons {
    position: absolute;
    right: 0;
    top: -1px;
}

.mdboxhelp {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/info2.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center center;
    background-color: transparent;
    top: -1px;
}

.mdboxhelphover {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/info2.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center center;
    background-color: #213E7A;
    top: -1px;
}

.mdboxclose {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -96px 0;
    background-color: #C75050;
    top: -1px;
}

.mdboxclosehover {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons_hover.png);
    background-repeat: no-repeat;
    background-position: -96px 0;
    background-color: #E81123;
    top: -1px;
}

.mdboxmax {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -72px 0;
    background-color: transparent;
    top: -1px;
}

.mdboxmaxhover {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons_hover.png);
    background-repeat: no-repeat;
    background-position: -72px 0;
    background-color: #213E7A;
    top: -1px;
}

.mdboxrestore {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -48px 0;
    background-color: transparent;
    top: -1px;
}

.mdboxrestorehover {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons_hover.png);
    background-repeat: no-repeat;
    background-position: -48px 0;
    background-color: #213E7A;
    top: -1px;
}

.mdboxmin {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -24px 0;
    background-color: transparent;
    top: -1px;
}

.mdboxminhover {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons_hover.png);
    background-repeat: no-repeat;
    background-position: -24px 0;
    background-color: #213E7A;
    top: -1px;
}

.mdboxpopout {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: transparent;
    top: -1px;
}

.mdboxpopouthover {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    font-size: 10pt;
    color: rgb(255,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: 'Arial Black', Arial, Verdana;
    cursor: pointer;
    background-image: url(../images/window_icons_hover.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #213E7A;
    top: -1px;
}

.mdbox > div:nth-child(2) {
    position: relative;
    height: calc(100% - 74px);
    background-color: #f9f9f9;
    border: 1px solid #ffffff;
    border-bottom: 1px solid transparent;
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    overflow: hidden;
    padding: 0px 0px 0px 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mdboxmessage1 {
    position: relative;
    background-image: url(../images/cross.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.mdboxmessage2 {
    position: relative;
    background-image: url(../images/excl1.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.mdboxmessage3 {
    position: relative;
    background-image: url(../images/info1.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.mdboxmessage4 {
    position: relative;
    background-image: url(../images/vdicon.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.mdbox > div:nth-child(2) > div {
    overflow: auto;
    padding: 5px;
    width: 100%;
    height: 100%;
    border: solid 1px transparent;
    border-left: solid 1px #f0f0f0;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    font-size: 8pt;
    line-height: 10pt;
    font-style: normal;
    font-weight: normal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mdboxinput {
    position: relative;
    background-color: #f2f2f2;
    padding: 10px 10px 10px 10px;
    text-align: center;
    border-top: 1px solid #d6d6d6;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    height: 48px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .mdboxinput INPUT[type="button"], .mdboxinput INPUT[type="button"]:hover {
        position: relative;
        height: 28px;
        width: 80px;
        padding: 4px;
        top: 0px;
        font-size: 10pt;
        line-height: 11pt;
        color: #444444;
        font-style: normal;
        font-weight: normal;
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    }


        .mdboxinput INPUT[type="button"]:hover {
            border: solid 1px #54a7ee;
        }

/* End versaModalDialog Styles */

#mdlayer {
    /*background-image: url(../images/overlay.png);*/
    z-index: 3000;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.7;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    background-color: #7c7c7c;
}

    #mdlayer.drag {
        z-index: 100000;
    }

.modaldrag {
    z-index: 100001;
    opacity: 0.7;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    background-color: #929292;
}

/* Inline Windows Start */

.windowHeader {
    height: 20px;
    background-color: #0072c6;
    padding: 4px 4px 4px 4px;
    border-top: 1px solid #aaaaaa;
    border-left: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
}

.windowBody {
    background-color: #f0f0f0;
    padding: 6px 6px 0px 6px;
    border-left: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
}

.windowFooter {
    background-color: #f0f0f0;
    padding: 4px 4px 4px 4px;
    text-align: right;
    border-bottom: 1px solid #aaaaaa;
    border-left: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
}

.windowTitle {
    position: relative;
    top: 2px;
    font-size: 8pt;
    line-height: 10pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: Verdana, Arial, Segoe UI;
    text-decoration: none;
}

.windowClose:after {
    content: 'X';
    font-weight: bold;
    line-height: 13pt;
}

.windowClose {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    font-size: 7pt;
    font-style: normal;
    font-weight: normal;
    padding: 1px 0 0 0;
    border: 2px solid #ffffff;
    width: 32px;
    height: 22px;
    margin: 2px;
    background-color: #ad0303;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
}

/* Inline Windows End */

/* Style For WebForm Layout Start */

.divRow {
    position: relative;
    padding: 0 0 0 0;
    height: 24px;
    clear: both;
}

.divCol1Container {
    position: absolute;
    width: 100%;
}

.divCol1 {
    position: relative;
    margin: 0 0 0 70px;
}

.divCol2 {
    position: relative;
    top: 2px;
    width: 70px;
    float: left;
}

.divFixedCol1 {
    position: relative;
    top: 2px;
    width: 100px;
    float: left;
    white-space: nowrap;
}

.divFixedCol2 {
    position: relative;
    width: 210px;
    float: left;
    white-space: nowrap;
}

.textBox100 /* 100% Wide TextBox */ {
    position: relative;
    width: 100%;
    left: -2px;
}
/* Style For WebForm Layout End */

.progress {
    border: none;
    background-image: url(../images/loading_background.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding-left: 0px;
    padding-top: 0px;
    z-index: 1;
}

/* Style For Reporting Dashboard Charting Start */
.imgReportChart {
    padding: 20px 0 20px 0;
}
/* Style For Reporting Dashboard Charting End */


.hideUserCustomisePanel {
    z-index: 0;
    visibility: hidden;
    position: absolute;
    transform: translate(-1px, calc(100% + 300px));
    border-right: 1px solid #f1f1f1;
    background-color: #034c81;
    color: #f2f2f2;
    box-shadow: #343434 2px -2px 8px;
    opacity: 0.0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    -webkit-transition-property: bottom opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: bottom opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: bottom opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-out;
    transition-property: bottom opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
}

.showUserCustomisePanel {
    z-index: 2000;
    visibility: visible;
    position: absolute;
    transform: translate(-1px, calc(100% - 27px));
    border-right: 1px solid #f1f1f1;
    background-color: #034c81;
    color: #f2f2f2;
    box-shadow: #343434 2px -2px 8px;
    opacity: 0.9;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    -webkit-transition-property: bottom opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: bottom opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-in;
    -o-transition-property: bottom opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-in;
    transition-property: bottom opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: ease-in;
}

.statusBarLogin, .statusBarLoginHover {
    display: inline;
    float: left;
    position: relative;
    margin-top: 0;
    margin-right: 5px;
    margin-bottom: 0;
    margin-left: 2px;
    font-size: 8pt;
    line-height: 8pt;
    color: #ffffff;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    z-index: 2;
    left: -3px;
    top: 0px;
    padding: 8px 0 0 6px;
    height: 27px;
    background-color: transparent;
    cursor: default;
}

.statusBarLoginHover {
    z-index: 3;
    color: #f2f2f2;
    background-color: #034c81;
}

/* Style for Custom Free Text Panel Start */
.divCustomContainer {
    position: relative;
    color: #808080;
    width: 20px;
    height: 20px;
    right: 10px;
    overflow: hidden;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

/* Style for Custom Free Text Panel End */

/* Style for versaChat Start */
/* This is required here for different themes */
.versaChatShow {
    position: fixed;
    z-index: 10;
    visibility: visible;
    background-color: #E3EEFB;
    border: solid 1px #AAAAAA;
    box-shadow: #343434 -5px -5px 30px;
    overflow: hidden;
    width: 32vw;
    height: 36vh;
    min-width: 490px;
    min-height: 352px;
    right: 2px;
    bottom: 26px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition-property: height opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: height opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: height opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: height opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.versaChatHide {
    position: fixed;
    z-index: 10;
    visibility: hidden;
    background-color: #E3EEFB;
    border: solid 1px #AAAAAA;
    overflow: hidden;
    width: 32vw;
    height: 0;
    min-width: 490px;
    min-height: 0;
    right: 2px;
    bottom: 26px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: height opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: height opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: height opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: height opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.versaChatStatus, .versaChatAlert {
    position: relative;
    float: right;
    padding: 6px 6px 0 6px;
    width: 124px;
    height: 30px;
    font-size: 8pt;
    line-height: 8pt;
    color: #ffffff;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    background-color: #0072c6;
}

.versaChatAlert {
    position: relative;
    float: right;
    padding: 6px 6px 0 6px;
    height: 30px;
    font-size: 8pt;
    line-height: 8pt;
    color: #15428B;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
    background-color: #ffc83c;
}

.chatStyle1, .chatBold1, .chatBold2, .chatBold3 {
    font-size: 8pt;
    line-height: 10pt;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-decoration: none;
}

.chatBold1 {
    font-weight: bold;
}

.chatBold2 {
    font-weight: bold;
    color: #ffffff;
}

.chatBold3 {
    font-weight: bold;
    font-style: italic;
}

/* Style for versaChat End */

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: visible;
    opacity: 0.8;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    background-color: #7f8285;
    -webkit-transition-property: visibility background-color opacity;
    -webkit-transition-duration: 50ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: visibility background-color opacity;
    -moz-transition-duration: 50ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: visibility background-color opacity;
    -o-transition-duration: 50ms;
    -o-transition-timing-function: linear;
    transition-property: visibility background-color opacity;
    transition-duration: 50ms;
    transition-timing-function: linear;
}

@-webkit-keyframes gridrefresh {
    0% {
        left: -2%;
        letter-spacing: 1px;
    }

    100% {
        left: 102%;
        letter-spacing: 10px;
    }
}

@-moz-keyframes gridrefresh {
    0% {
        left: -2%;
        letter-spacing: 1px;
    }

    100% {
        left: 102%;
        letter-spacing: 10px;
    }
}

@-o-keyframes gridrefresh {
    0% {
        left: -2%;
        letter-spacing: 1px;
    }

    100% {
        left: 102%;
        letter-spacing: 10px;
    }
}

@keyframes gridrefresh {
    0% {
        left: -2%;
        letter-spacing: 1px;
    }

    100% {
        left: 102%;
        letter-spacing: 10px;
    }
}

.overlaytext {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    z-index: 3;
    overflow: hidden;
    visibility: visible;
    font-family: 'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10pt;
    line-height: 180px;
    font-weight: normal;
    font-style: normal;
    color: #ffffff;
    text-align: center;
    opacity: 1.0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    transform: translate(-50%, -50%);
}

    .overlaytext:after {
        position: absolute;
        left: 0;
        top: 50%;
        content: "......";
        font-family: 'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
        font-weight: bold;
        color: #ffffff;
        line-height: 36px;
        opacity: 0.7;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        animation: gridrefresh ease-in-out 8000ms infinite;
        -webkit-animation: gridrefresh ease-in-out 8000ms infinite;
        -moz-animation: gridrefresh ease-in-out 8000ms infinite;
        -o-animation: gridrefresh ease-in-out 8000ms infinite;
    }

.overlaytransition {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    background-color: transparent;
    -webkit-transition-property: visibility background-color opacity;
    -webkit-transition-duration: 1500ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: visibility background-color opacity;
    -moz-transition-duration: 1500ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: visibility background-color opacity;
    -o-transition-duration: 1500ms;
    -o-transition-timing-function: linear;
    transition-property: visibility background-color opacity;
    transition-duration: 1500ms;
    transition-timing-function: linear;
}

.transparent {
    width: 100%;
    height: 100%;
    opacity: 0.9;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    background-color: #818181;
}


@-webkit-keyframes overlay-progress {
    0% {
        content: '.';
        letter-spacing: 0px;
        transform: translate(50%, 360%);
    }

    20% {
        content: '..';
        letter-spacing: 3px;
        transform: translate(70%, 360%);
    }

    40% {
        content: '...';
        letter-spacing: 6px;
        transform: translate(90%, 360%);
    }

    60% {
        content: '....';
        letter-spacing: 6px;
        transform: translate(110%, 360%);
    }

    80% {
        content: '.....';
        letter-spacing: 12px;
        transform: translate(130%, 360%);
    }

    100% {
        content: '......';
        letter-spacing: 12px;
        transform: translate(150%, 360%);
    }
}

@-moz-keyframes overlay-progress {
    0% {
        content: '.';
        letter-spacing: 0px;
        transform: translate(50%, 360%);
    }

    20% {
        content: '..';
        letter-spacing: 3px;
        transform: translate(70%, 360%);
    }

    40% {
        content: '...';
        letter-spacing: 6px;
        transform: translate(90%, 360%);
    }

    60% {
        content: '....';
        letter-spacing: 6px;
        transform: translate(110%, 360%);
    }

    80% {
        content: '.....';
        letter-spacing: 12px;
        transform: translate(130%, 360%);
    }

    100% {
        content: '......';
        letter-spacing: 12px;
        transform: translate(150%, 360%);
    }
}

@-o-keyframes overlay-progress {
    0% {
        content: '.';
        letter-spacing: 0px;
        transform: translate(50%, 360%);
    }

    20% {
        content: '..';
        letter-spacing: 3px;
        transform: translate(70%, 360%);
    }

    40% {
        content: '...';
        letter-spacing: 6px;
        transform: translate(90%, 360%);
    }

    60% {
        content: '....';
        letter-spacing: 6px;
        transform: translate(110%, 360%);
    }

    80% {
        content: '.....';
        letter-spacing: 12px;
        transform: translate(130%, 360%);
    }

    100% {
        content: '......';
        letter-spacing: 12px;
        transform: translate(150%, 360%);
    }
}

@keyframes overlay-progress {
    0% {
        content: '.';
        letter-spacing: 0px;
        transform: translate(50%, 360%);
    }

    20% {
        content: '..';
        letter-spacing: 3px;
        transform: translate(70%, 360%);
    }

    40% {
        content: '...';
        letter-spacing: 6px;
        transform: translate(90%, 360%);
    }

    60% {
        content: '....';
        letter-spacing: 6px;
        transform: translate(110%, 360%);
    }

    80% {
        content: '.....';
        letter-spacing: 12px;
        transform: translate(130%, 360%);
    }

    100% {
        content: '......';
        letter-spacing: 12px;
        transform: translate(150%, 360%);
    }
}

.overlay-signin {
    display: block;
    position: absolute;
    z-index: 1031;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: visible;
    opacity: 0.9;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    background-color: #7f8285;
}

    .overlay-signin::after {
        content: '......';
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 50%;
        height: 10%;
        margin: 0 auto;
        font-family: 'Segoe UI Light';
        font-size: 24pt;
        font-weight: normal;
        color: #ffffff;
        animation: overlay-progress alternate 5000ms infinite;
        -webkit-animation: overlay-progress alternate 5000ms infinite;
        -moz-animation: overlay-progress alternate 5000ms infinite;
        -o-animation: overlay-progress alternate 5000ms infinite;
    }

    .overlay-signin::before {
        content: 'Validating Your Access';
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 50%;
        height: 10%;
        margin: 0 auto;
        transform: translate(50%, 345%);
        font-family: 'Segoe UI Light';
        font-size: 24pt;
        font-weight: normal;
        text-align: center;
        color: #ffffff;
    }

/* Notification Area */

.headernotification {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px;
    width: 50px;
    height: 50px;
    background-color: #47e621;
    border: solid 1px transparent;
    border-left-color: #F1F2F4;
    cursor: pointer;
}

.headernotificationover {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px;
    width: 50px;
    height: 50px;
    background-color: #0d223f;
    border: solid 1px transparent;
    border-left-color: #F1F2F4;
    cursor: pointer;
}

.headernotification span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: solid 1px #d9d9d9;
    border-radius: 50%;
    right: 5px;
    top: 5px;
    font-family: 'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    font-style: normal;
    text-align: center;
    background-color: #ffffff;
    color: rgb(207, 10, 10);
}

.headernotificationover span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: solid 1px #d9d9d9;
    border-radius: 50%;
    right: 5px;
    top: 5px;
    font-family: 'Segoe UI', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    font-style: normal;
    text-align: center;
    background-color: #000000;
    color: rgb(255, 255, 255);
}

.notificationHide {
    z-index: 1000;
    visibility: hidden;
    position: absolute;
    right: 4px;
    top: -490px;
    width: 370px;
    height: 486px;
    background-color: #ffffff;
    border: solid 1px #e2e2e2;
    border-radius: 6px 6px;
    box-shadow: #ebebeb 2px 2px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: z-index top opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: z-index top opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: z-index top opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: z-index top opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.notificationShow {
    z-index: 2000;
    visibility: visible;
    position: absolute;
    right: 4px;
    top: 49px;
    width: 370px;
    height: 486px;
    background-color: #ffffff;
    border: solid 1px #f2f2f2;
    border-radius: 6px 6px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    box-shadow: 8px 8px 45px #343434;
    -webkit-transition-property: z-index top opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: z-index top opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: z-index top opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: z-index top opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
    cursor: default;
}

    .notificationShow:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 55px;
        top: -15px;
        border: 7px solid;
        border-color: transparent transparent #e2e2e2 transparent;
    }

    .notificationShow:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 55px;
        top: -14px;
        border: 7px solid;
        border-color: transparent transparent #0072c6 transparent;
    }

.notificationHeader {
    top: 0;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
    font-size: 12pt;
    font-weight: bold;
    font-style: normal;
    color: #ffffff;
    height: 36px;
    padding: 6px;
    background-color: #0072c6;
    border-bottom: solid 1px #e2e2e2;
    border-radius: 6px 6px 0 0;
}

.notificationContent {
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
    font-size: 8pt;
    font-weight: normal;
    font-style: normal;
    color: #444444;
    padding: 0;
    height: 418px;
    overflow-y: auto;
    overflow-x: hidden;
    top: 30px;
    cursor: default;
}

.notificationItem {
    visibility: visible;
    position: relative;
    padding: 8px;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: normal;
    font-style: normal;
    color: #444444;
    left: 0;
    min-height: 80px;
    width: calc(100% - 1em);
    overflow-y: auto;
    overflow-x: hidden;
    border: solid 1px #e1e1e1;
    border-radius: 2px 2px;
    background-color: transparent;
    margin: 6px 10px 10px 6px;
    cursor: pointer;
}

    .notificationItem:hover, .notificationItem:hover p.bold1, .notificationItem:hover .notificationClose {
        color: #fff;
        background-color: #55b3f8;
    }

/* Multi-line Ellipsis */
.notificationItem {
    overflow: hidden;
    position: relative;
    min-height: 80px;
    max-height: 132px;
    text-align: left;
    padding-right: 1em;
}

    .notificationItem:before {
        content: '...';
        position: absolute;
        right: 8px;
        bottom: 4px;
    }

    .notificationItem:after {
        content: '';
        position: absolute;
        right: 0;
        width: 330px;
        height: 132px;
        margin-top: 0.2em;
    }

    .notificationItem p.bold1 {
        font-size: 1.2rem;
    }

.notificationDismiss {
    visibility: hidden;
    position: relative;
    padding: 0;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: normal;
    font-style: normal;
    color: #444444;
    left: 390px;
    min-height: 0;
    max-height: 0;
    width: calc(100% - 1em);
    overflow-y: hidden;
    overflow-x: hidden;
    border: none;
    border-radius: 2px 2px;
    background-color: transparent;
    margin: 0;
    -webkit-transition-property: all;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: all;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: all;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: all;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

    .notificationDismiss p.bold1 {
        font-size: 1.2rem;
    }

.notifyMeContainerHide {
    z-index: 4;
    position: fixed;
    visibility: hidden;
    right: -8px;
    bottom: -192px;
    width: 348px;
    height: 192px;
    -o-transition-property: bottom visibility;
    -o-transition-duration: 1000ms;
    -o-transition-timing-function: ease-out;
    -moz-transition-property: bottom visibility;
    -moz-transition-duration: 1000ms;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-property: bottom visibility;
    -webkit-transition-duration: 1000ms;
    -webkit-transition-timing-function: ease-out;
    transition-property: bottom visibility;
    transition-duration: 1000ms;
    transition-timing-function: ease-out;
}

.notifyMeContainerShow {
    z-index: 4;
    position: fixed;
    visibility: visible;
    right: -8px;
    bottom: 48px;
    width: 348px;
    height: 192px;
    -o-transition-property: bottom visibility;
    -o-transition-duration: 1000ms;
    -o-transition-timing-function: ease-in;
    -moz-transition-property: bottom visibility;
    -moz-transition-duration: 1000ms;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: bottom visibility;
    -webkit-transition-duration: 1000ms;
    -webkit-transition-timing-function: ease-in;
    transition-property: bottom visibility;
    transition-duration: 1000ms;
    transition-timing-function: ease-in;
}

.notifyMeHide {
    z-index: 1;
    visibility: hidden;
    position: absolute;
    transform: translate(0, 248px);
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    color: transparent;
    width: 328px;
    height: 192px;
    overflow: hidden;
    border: solid 1px #0072c6;
    border-radius: 2px 2px;
    background-color: #ffffff;
    box-shadow: 6px 6px 16px rgba(0,0,0,0.2);
    padding: 0px;
    margin: 0 0 0 0;
    cursor: pointer;
}

.notifyMeShow {
    z-index: 8;
    visibility: visible;
    position: absolute;
    transform: translate(0, 0);
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    color: #444444;
    width: 328px;
    height: 192px;
    overflow: hidden;
    border: solid 1px #0072c6;
    border-radius: 2px 2px;
    background-color: #ffffff;
    box-shadow: 6px 6px 16px rgba(0,0,0,0.2);
    padding: 0px;
    margin: 3px 0 0 0;
    cursor: pointer;
}

    .notifyMeHide > div:first-child, .notifyMeShow > div:first-child {
        /* Heading */
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
        font-size: 11pt;
        line-height: 15pt;
        font-weight: bold;
        font-style: normal;
        color: #ffffff;
        padding: 4px;
        width: 300px;
        height: 32px;
        background-color: #0072c6;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .notifyMeHide > div:nth-child(2n), .notifyMeShow > div:nth-child(2n) {
        /* Title */
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
        font-size: 10pt;
        line-height: 12pt;
        font-weight: bold;
        font-style: normal;
        color: #444444;
        padding: 8px;
        width: 326px;
        height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .notifyMeHide > div:nth-child(3n), .notifyMeShow > div:nth-child(3n) {
        /* Description */
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
        font-size: 9pt;
        line-height: 11pt;
        font-weight: normal;
        font-style: normal;
        color: #444444;
        padding: 8px;
        width: 324px;
        height: 123px;
    }

    .notifyMeHide > div:nth-child(4n)::after, .notifyMeShow > div:nth-child(4n)::after {
        /* Close Text */
        content: 'X';
        font-size: 10pt;
        color: #f69494;
    }

    .notifyMeHide > div:nth-child(4n), .notifyMeShow > div:nth-child(4n) {
        /* Close */
        position: absolute;
        right: 0px;
        top: 0px;
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
        font-size: 10pt;
        font-weight: bold;
        font-style: normal;
        color: #bb0404;
        text-align: center;
        width: 28px;
        height: 32px;
        background-color: #0072c6;
    }

    /* Multi-line Ellipsis */
    .notifyMeShow > div:nth-child(3n) {
        overflow: hidden;
        position: relative;
        max-height: 123px;
        text-align: left;
        padding-right: 1em;
    }

        .notifyMeShow > div:nth-child(3n):before {
            content: '...';
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .notifyMeShow > div:nth-child(3n):after {
            content: '';
            position: absolute;
            right: 0;
            width: 324px;
            height: 123px;
            margin-top: 0.2em;
        }

.notificationAbout {
    position: absolute;
    float: right;
    top: -2px;
    right: 64px;
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-image: url(../images/info2.png);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center center;
    cursor: pointer;
}

.notificationSettings {
    position: absolute;
    float: right;
    top: -2px;
    right: 32px;
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-image: url(../images/settings2.png);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center center;
    cursor: pointer;
}

.notificationClose:after {
    content: '\2192';
    font-family: 'Arial Black';
}

.notificationClose {
    position: absolute;
    float: right;
    top: -4px;
    right: 8px;
    width: 24px;
    height: 24px;
    font-family: 'Arial Black';
    font-weight: bold;
    font-size: 22px;
    font-style: normal;
    line-height: 18px;
    color: #858484;
    background-color: transparent;
    cursor: pointer;
}

.notificationFooter {
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
    font-size: 8pt;
    font-weight: bold;
    font-style: normal;
    color: #ffffff;
    height: 30px;
    padding: 6px;
    background-color: #0072c6;
    border-top: solid 1px #e2e2e2;
    border-radius: 0 0 6px 6px;
    cursor: default;
}

    .notificationFooter label {
        min-width: 100px;
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
        font-size: 8pt;
        font-weight: bold;
        font-style: normal;
        color: #ffffff;
        cursor: pointer;
    }

/* Start Settings Dialog Area */
#SettingsContainer {
    z-index: 500001;
    position: absolute;
    width: 282px;
    height: 312px;
    left: 50%;
    top: 50%;
    font-size: 8pt;
    font-family: 'Segoe UI', Verdana, Arial;
    color: #333;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(102, 102, 102);
    border-radius: 3px;
    box-shadow: rgb(128, 128, 128) 3px 3px 10px;
    background-color: #fff;
    box-sizing: unset;
}

    #SettingsContainer > div:first-child {
        position: relative;
        top: 0;
        height: 26px;
        background-image: url(../images/settings.png);
        background-repeat: no-repeat;
        background-position: 4px 4px;
        border-width: 1px;
        border-style: solid;
        border-color: transparent transparent rgb(102, 102, 102);
        border-image: initial;
        border-radius: 3px 3px 0px 0px;
        box-sizing: unset;
    }

        #SettingsContainer > div:first-child > span:first-child {
            position: relative;
            left: 24px;
            font-size: 9pt;
            font-weight: bold;
            line-height: 24px;
            padding: 0px 4px 4px;
        }

/* End Settings Dialog Area */

/* End Notification Area*/

/* Quick Summary Styles */

.quickSummaryShow {
    z-index: 1000;
    position: fixed;
    visibility: visible;
    left: 0px;
    bottom: 27px;
    width: 250px;
    height: 330px;
    background-color: #ffffff;
    border: solid 1px #a0a0a0;
    box-shadow: #343434 5px 5px 30px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition-property: height opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: height opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: height opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: height opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.quickSummaryHide {
    z-index: 1000;
    position: fixed;
    visibility: hidden;
    left: 0px;
    bottom: 27px;
    width: 250px;
    height: 0px;
    background-color: #ffffff;
    border: solid 1px #a0a0a0;
    box-shadow: #343434 5px 5px 30px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: height opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: height opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: height opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: height opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}
/* End Quick Summary Styles */

/* CRM Correspondence Styles Start */

.imgAttach {
    float: left;
    display: inline;
    font-family: 'Segoe UI', Arial, Verdana, Tahoma;
    width: 16px;
    height: 16px;
    padding: 0 2px 0 0;
}

.textAttach {
    float: left;
    display: inline;
    padding: 1px 3px 1px 1px;
    font-family: 'Segoe UI', Arial, Verdana, Tahoma;
    font-size: 8pt;
    line-height: 10pt;
}

/* CRM Correspondence Styles End */

/* Additional versaChat Styles Start */

#vchatImgPreview.hidePreview {
    visibility: hidden;
    position: fixed;
    z-index: 900;
    left: 0px;
    top: 51px;
    background-color: #ffffff;
    margin: 0 auto;
    border: solid 6px #a0a0a0;
    overflow: hidden;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: left top opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: left top opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: left top opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: left top opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

#vchatImgPreview.showPreview {
    visibility: visible;
    position: fixed;
    z-index: 900;
    left: 0px;
    top: 51px;
    background-color: #ffffff;
    margin: 0 auto;
    border: solid 6px #a0a0a0;
    overflow: hidden;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition-property: left top opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: left top opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: left top opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: left top opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

/* Additional versaChat Styles End */

/* Start versaFooterMenu */

.versafooterToolsVisible {
    display: block;
    clear: both;
    height: 45px;
    background-color: #f1f1f1;
    border-bottom: solid 1px #ffffff;
}

.versafooterToolsHidden {
    display: block;
    clear: both;
    height: 1px;
    background-color: transparent;
    border-bottom: solid 1px transparent;
}

.versafooterGripDown:before {
    content: 's';
    font-family: 'Wingdings 3';
    font-weight: bold;
    font-size: 8px;
    line-height: 9px;
    margin: 0 4px 0 0;
}

.versafooterGripDown:hover {
    color: #adadad;
}

.versafooterGripDown {
    z-index: 4;
    position: absolute;
    left: 0;
    bottom: 68px;
    width: 100%;
    height: 8px;
    color: #f1f1f1;
    text-align: right;
    border-top: solid 1px #fff;
    background-color: #f1f1f1;
    cursor: pointer;
}

.versafooterGripUp:before {
    content: 'r';
    font-family: 'Wingdings 3';
    font-weight: bold;
    font-size: 4px;
    line-height: 9px;
    margin: 0 4px 0 0;
}

.versafooterGripUp:hover {
    color: #ffffff;
    bottom: 28px;
    height: 4px;
    background-color: #0072c6;
    border-top: solid 1px #ffffff;
}

.versafooterGripUp {
    z-index: 4;
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 100%;
    height: 1px;
    color: #0072c6;
    text-align: right;
    background-color: #0072c6;
    border-top: none 0px transparent;
    cursor: pointer;
}

.versafooterToolsContent, .versafooterToolsContentActive {
    position: relative;
    top: 4px;
    left: 4px;
    font-size: 20pt;
    line-height: 22pt;
    color: #565656;
    font-style: normal;
    font-weight: 200;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, sans-serif;
    text-transform: none;
    cursor: pointer;
}

    .versafooterToolsContent:hover, .versafooterToolsContentActive:hover {
        color: #0072c6;
    }

.versafooterToolsContentActive {
    text-decoration: none;
    background-color: transparent;
    color: #0072c6;
    cursor: pointer;
}

/* End versaFooterMenu */

/* Start Javascript Object Properties Container */

#PropertiesContainer {
    z-index: 500001;
    position: absolute;
    width: 271px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px #5d6771;
    border-radius: 3px 3px;
    box-shadow: 3px 3px 10px #343434;
    background-color: #5d6771;
    -webkit-box-sizing: unset;
    box-sizing: unset;
}

    #PropertiesContainer > div:nth-child(1) {
        /* Header */
        position: relative;
        background-color: #5d6771;
        padding: 0 4px 4px 4px;
        font-size: 9pt;
        line-height: 28px;
        color: #ffffff;
        font-style: normal;
        font-weight: normal;
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
        text-decoration: none;
        width: 261px;
        height: 28px;
        -webkit-box-sizing: unset;
        box-sizing: unset;
    }

        #PropertiesContainer > div:nth-child(1) > div:nth-child(1):hover {
            background-color: #cc1b34;
        }

        #PropertiesContainer > div:nth-child(1) > div:nth-child(1) {
            /* Close Button */
            position: absolute;
            float: right;
            top: 1px;
            right: 0px;
            width: 20px;
            height: 14px;
            padding: 4px;
            background-color: transparent;
            font-size: 9pt;
            line-height: 14px;
            color: #ffffff;
            font-style: normal;
            font-weight: normal;
            font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            -webkit-box-sizing: unset;
            box-sizing: unset;
        }

    #PropertiesContainer > div:nth-child(2) {
        /* Info Window */
        position: relative;
        left: 2px;
        background-color: #f0f0f0;
        width: 255px;
        height: 202px;
        padding: 12px 6px;
        -webkit-box-sizing: unset;
        box-sizing: unset;
    }

        #PropertiesContainer > div:nth-child(2) > div:nth-child(1) {
            /* Product Name */

            font-size: 14pt;
            line-height: 30px;
            color: #000000;
            font-style: normal;
            font-weight: normal;
            font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
            text-align: left;
            text-decoration: none;
            height: 30px;
            -webkit-box-sizing: unset;
            box-sizing: unset;
        }

        #PropertiesContainer > div:nth-child(2) > div:nth-child(2) {
            /* Version */

            font-size: 12pt;
            line-height: 30px;
            color: #000000;
            font-style: normal;
            font-weight: normal;
            font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
            text-align: left;
            text-decoration: none;
            height: 30px;
            -webkit-box-sizing: unset;
            box-sizing: unset;
        }

        #PropertiesContainer > div:nth-child(2) > div:nth-child(3) {
            /* Copyright */
            position: absolute;
            bottom: 10px;
            font-size: 8pt;
            line-height: 10pt;
            color: #000000;
            font-style: normal;
            font-weight: normal;
            font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
            text-align: left;
            text-decoration: none;
            height: 24px;
            -webkit-box-sizing: unset;
            box-sizing: unset;
        }

/* End Javascript Object Properties Container */



/* Start Dashboard Nav Css */

.mysummarysubheader {
    height: 28px;
    border-bottom: solid 1px #a0a0a0;
    padding: 3px 0 0 0;
}

.mysummarylist {
    list-style-type: none;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-padding-start: 10px;
    margin: 10px 0 0 -6px;
}

.mysummaryitem {
    font-size: 10pt;
    line-height: 13pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: left;
    text-decoration: none;
    padding: 8px;
    cursor: pointer;
}

.mysummaryitemover {
    font-size: 10pt;
    line-height: 13pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Sans Serif';
    text-align: left;
    text-decoration: underline;
    padding: 8px;
    cursor: pointer;
}


/* End Dashboard Nav Css */

/* Start Account Access Browser Info */
.browserAccessInfoHeading {
    font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
    font-size: 14pt;
    line-height: 16pt;
    color: #333333;
    font-style: normal;
    font-weight: normal;
}

.browserAccessInfo {
    width: calc(100% - 12px);
    height: calc(100% - 42px);
    margin: 12px 6px 6px 6px;
}

    .browserAccessInfo div:nth-child(n+1) {
        position: relative;
        top: 2px;
        float: left;
        width: 92px;
        height: 24px;
        margin: 0 0 6px 0;
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
        font-size: 8pt;
        line-height: 10pt;
        color: #333333;
        font-style: normal;
        font-weight: bold;
        white-space: nowrap;
    }

    .browserAccessInfo div:nth-child(2n+1) {
        position: relative;
        top: 2px;
        float: left;
        width: calc(100% - 96px);
        height: 24px;
        margin: 0 0 6px 0;
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
        font-size: 8pt;
        line-height: 10pt;
        color: #333333;
        font-style: normal;
        font-weight: normal;
        white-space: nowrap;
    }

    .browserAccessInfo div:first-child {
        width: 100%;
        height: 28px;
        font-family: 'Segoe UI', Verdana, Arial, Tahoma, 'MS Reference Sans Serif';
        font-size: 8pt;
        line-height: 10pt;
        color: #333333;
        font-style: normal;
        font-weight: bold;
        text-decoration: underline;
    }

/* End Account Access Browser Info */

/* Hide and Show Divs Based on Media Size */

@media (min-width: 1078px) {
    #divQuickSearch {
        display: block;
        background-color: #fff !important;
    }
}

@media (max-width: 1077px) {
    #divQuickSearch {
        display: none;
    }
}

@media (min-width: 778px) {
    #srsAppName {
        display: block;
    }
}

@media (max-width: 777px) {
    #srsAppName {
        display: none;
    }
}

@media (min-width: 920px) {
    #srsControls {
        display: block;
    }
}

@media (max-width: 919px) {
    #srsControls {
        display: none;
    }
}

@media (min-width: 960px) {
    .mainBodyHeader > #divFilters {
        display: block;
    }
}

@media (max-width: 959px) {
    .mainBodyHeader > #divFilters {
        display: none;
    }
}

@media (min-width: 901px) {
    #CurrentLocation {
        display: block;
    }
}

@media (max-width: 900px) {
    #CurrentLocation {
        display: none;
    }
}

@media (min-width: 653px) {
    #divChatStatus {
        display: block;
    }
}

@media (max-width: 652px) {
    #divChatStatus {
        display: none;
    }
}