/* --------------------------------------------------------------------- Main Styles ------------------------------------------------------------- */
/*CSS3*/
/*Description: This style Sheet works with Bootsrap 3.3.7
    NOTE: Do not add Boostrap classes to this style sheet.  Please add addtional classes to override bootstrap classes
*/

/*Default bootstrap  font-size is 1.4em*/

/****************************************************************************Base Class*************************************************************/


/*Set defaults to override boostrap font-size for accessiblity reasons*/

html {
    font-size: 0.6em !important;
}

title {
    font-size: 0.6em !important;
}

body {
    color: #333333;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.25em !important;
    /*line-height: 1.5em;*/
}
/*skip link*/
#skip-link a, #skip-link a:link, #skip-link a:visited {
    color: #0D5977;
}

    #skip-link a:active, #skip-link a:focus, #skip-link a:hover {
        text-decoration: underline;
    }

a,
a:link,
a:visited,
a:active {
    color: #0D5977;
}

    a:focus {
        text-decoration: underline;
    }

    a:hover {
        text-decoration: underline;
        /*color: #000;*/
    }

h1 {
    font-size: 1.8em;
}

h2 {
    font-size: 1.6em;
    font-weight: Bold;
    color: #2f3f4e;
    margin-bottom: 5px;
    margin-top: 5px;
}

h3 {
    font-size: 1.4em !important;
    font-weight: Bold;
    color: #2f3f4e;
    margin-bottom: 5px;
    margin-top: 5px;
}

h4 {
    color: #00357a;
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 5px !important;
}




label {
    font-size: 1.0em;
    color: #333333;
    margin-bottom: 0;
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}


/*Override boostrap classes for accessiblity (font-size)*/
.btn {
    font-size: 1.0em !important;
}

.tooltip {
    font-size: 0.8em !important;
}

.list-group > a {
    text-decoration: none !important;
}

    .list-group > a:hover {
        text-decoration: underline !important;
    }

/*#region Main Container*/

.main-container {
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
}
/*Override bootstrap container*/
.container {
    max-width: 1005px !important;
    width: auto !important;
}

/* Language Switch*/

#gc-bar {
    font-size: 1.0em;
    margin-top: 1em;
    line-height: 1.4em;
    list-style: outside none none;
    padding-left: 0;
}

    #gc-bar > li {
        display: inline-block;
        padding: 0 0.7em;
        border-right: 1px solid #999999;
    }

    #gc-bar li.first {
        padding: 0 1.2em;
    }

    #gc-bar li.last {
        border-right: none;
    }

    #gc-bar li#skipNav {
        color: #000000;
        height: 1px;
        left: -10000px;
        overflow: hidden;
        position: absolute;
        top: auto;
        width: 1px;
    }
/*#endregion*/
/*#region header*/
.mcscs-arc {
    background: none #c0c0c0;
    height: 45px;
    padding-top: 0.7em;
}

#site-name-en {
    font: 700 1.4em Raleway, sans-serif;
    line-height: 1.9rem;
    margin-top: 7px;
    margin-bottom: 0.7em;
    margin-left: 5px;
    padding-top: 4px;
}

@charset "utf-8";

@font-face {
    font-family: Raleway;
    font-weight: 400;
    font-style: normal;
    src: url(../fonts/Raleway-regular/Raleway-regular.eot);
    src: url(../fonts/Raleway-regular/Raleway-regular.eot?#iefix) format("embedded-opentype"), local("Raleway"), local("Raleway-regular"), url(../fonts/Raleway-regular/Raleway-regular.woff2) format("woff2"), url(../fonts/Raleway-regular/Raleway-regular.woff) format("woff"), url(../fonts/Raleway-regular/Raleway-regular.ttf) format("truetype"), url(../fonts/Raleway-regular/Raleway-regular.svg#Raleway) format("svg")
}

@font-face {
    font-family: Raleway;
    font-weight: 700;
    font-style: normal;
    src: url(../fonts/Raleway-700/Raleway-700.eot);
    src: url(../fonts/Raleway-700/Raleway-700.eot?#iefix) format("embedded-opentype"), local("Raleway Bold"), local("Raleway-700"), url(../fonts/Raleway-700/Raleway-700.woff2) format("woff2"), url(../fonts/Raleway-700/Raleway-700.woff) format("woff"), url(../fonts/Raleway-700/Raleway-700.ttf) format("truetype"), url(../fonts/Raleway-700/Raleway-700.svg#Raleway) format("svg")
}
/*#endregion*/

/*#region top Nav*/

#mcscs-sm .top-nav ul.menu {
    background-color: #333;
    list-style: outside none none;
    padding-left: 0;
    margin-bottom: 5px;
}

    #mcscs-sm .top-nav ul.menu li {
        display: inline;
    }

        #mcscs-sm .top-nav ul.menu li a {
            border-right: 2px solid #ffffff;
            color: #ffffff;
            display: inline;
            font-size: 1.0em;
            font-weight: 700;
            line-height: 30px;
            padding: 0 10px 0 6px;
            text-transform: uppercase;
            vertical-align: middle;
            text-decoration: none;
        }

            #mcscs-sm .top-nav ul.menu li a:hover {
                text-decoration: underline;
                background-color: #f5e79e !important;
                color: #000;
            }

        #mcscs-sm .top-nav ul.menu li.last a {
            border: none !important;
        }

/*Left Nav Top*/
.nav_top {
    background-size: 100%;
    height: 6px;
    line-height: 1px;
    background-color: #868686;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* ----------------- Top Menu ----------------------- */

#block-menu-menu-top-menu li a {
    background-color: inherit !important;
}

    #block-menu-menu-top-menu li a:hover {
        background-color: inherit !important;
    }

/*#endregion*/
/*#region Footer*/

.region-footer a {
    color: #666;
    text-decoration: underline;
    border-left: 1px solid #000;
    padding: 0 5px;
}

    .region-footer a:visited,
    .region-footer a:active {
        color: #565656;
    }

    .region-footer a:focus,
    .region-footer a:hover {
        color: black;
        font-weight: bold;
    }

.region-footer ul {
    list-style: outside none none;
    padding-left: 0;
    float: left;
}

.region-footer li {
    display: inline-block;
    font-weight: bold;
    font-size: 1.1em;
}

.footer-border {
    border-top: 1px solid #7f7f7f;
    width: 100%;
    margin-bottom: 5px;
}

.region-footer,
.region-splash-footer {
    width: 100%;
    font-size: 0.8em;
    text-transform: uppercase;
}

    .region-footer ul:first-child + ul {
        float: right;
    }

    .region-footer ul li:first-child a {
        border-left: none;
    }

    .region-footer ul.right {
        float: right;
    }

.footer p.last-mod {
    clear: right;
    float: right;
    margin: 0 10px 0 0;
    text-align: right;
    text-transform: none;
    color: #656565;
    font-size: 1.2em;
    font-weight: 700;
}
/*#endregion*/
/*#region Accessible class */

h1.accessible,
h2.accessible {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.accessible {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}
/*#endregion*/
/*#region menu*/
.menu-title-wrapper {
    color: #000;
    display: block;
    padding: 4px 10px 6px;
    background: url("../images/arrow_down.gif") no-repeat right 40%;
    margin-right: 10px;
}

.collapsed .menu-title-wrapper {
    color: #000;
    display: block;
    padding: 4px 10px 6px;
    background: url("../images/arrow_right.gif") no-repeat right 40%;
    margin-right: 10px;
}

/*.sidebar-first {
    padding: 0;
}*/

ul.sub-menu-block {
    margin: 0;
    padding: 0;
    float: none;
    font-size: inherit;
    position: relative;
    box-shadow: none;
    padding: 0;
    text-align: left;
}

    ul.sub-menu-block li {
        display: inline;
    }

        ul.sub-menu-block li a.oactive,
        ul.sub-menu-block li ul li a.active,
        ul.sub-menu-block li.oactive a.active {
            background-color: #f9ecaa !important;
        }

        ul.sub-menu-block li a {
            background: #f7f7ef url("../images/triangle_right.gif") no-repeat scroll 12px 49%;
            border-bottom: 1px dotted #666;
            background-color: #f7f7ef;
            color: #000;
            display: block;
            font-weight: 700;
            padding: 8px 4px 10px 24px;
        }

            ul.sub-menu-block li a:hover {
                /*background-color: #FE9400;*/
                background-color: #f5e79e;
            }


    ul.sub-menu-block .sub-menu > li > a {
        background-color: #fff;
        color: #000;
    }

    ul.sub-menu-block li ul li a {
        background: #fff url("../images/triangle_right.gif") no-repeat scroll 23px 13px;
        padding: 8px 4px 8px 36px;
        color: #000;
    }

.dropdown ul li {
    background-color: #fff;
}

/*#region Wizard Steps Left-Nav*/

#sub-menu-block-wizard {
    margin: 0;
    padding: 0;
}

    #sub-menu-block-wizard li {
        display: inline;
    }

    #sub-menu-block-wizard .sub-menu {
        float: none;
        font-size: inherit;
        position: relative;
        box-shadow: none;
        padding: 0;
        text-align: left;
    }

    #sub-menu-block-wizard li a {
        border-bottom: 1px dotted #666;
        /*background-color: #f7f7ef;*/
        color: #000;
        display: block;
        font-weight: 700;
        padding: 8px 4px 10px 24px;
        background: #f7f7ef url("../images/triangle_right.gif") no-repeat scroll 12px 49%;
    }

        #sub-menu-block-wizard li a:hover {
            background: #f5e79e url("../images/triangle_right.gif") no-repeat scroll 12px 49%;
        }
        /*Highlight current step*/

        #sub-menu-block-wizard li a.currentStep {
            color: #ffffff;
            font-weight: bold;
            background-color: #547d54;
            text-decoration: none;
        }

/*#endregion*/

/*#endregion*/
/* -------------------------------------------------------------------- Breadcrumbs ------------------------------------------------------------------ */

.breadcrumb {
    font-size: 1em;
    margin: 0;
    padding: 5px;
}

/*#region Navigation*/

#mcscs-main-menu,
.cx-navbar-collapse h2 a,
#mcscs-main-menu h2.block-title a,
#menu-emergency-management-portal h2.block-title a {
    color: #000;
    display: block;
}

    .cx-navbar-collapse h2,
    #mcscs-main-menu h2.block-title,
    #menu-emergency-management-portal h2.block-title {
        margin: 0px;
        padding: 0px;
        background-color: #ececec;
        background-image: url("../images/arc_left_mycolour.gif");
        background-repeat: no-repeat;
        border-bottom: 1px solid #fff;
        border-top: 1px solid #fff;
        font-size: 1.1em;
        font-weight: bold;
    }

        #mcscs-main-menu h2.block-title a:hover,
        #menu-emergency-management-portal h2.block-title a:hover {
            text-decoration: none;
        }

#mcscs-resources ul li a {
    border-bottom: none;
    background-color: #F0EDDE;
}

#mcscs-resources ul li {
    border-bottom: 1px dotted #b5b8b9;
    line-height: 160%;
    list-style-position: outside;
    margin-left: 0;
    padding: 8px 0 8px 60px;
}

/*default a link*/
.row a {
    font-weight: 700;
    text-decoration: underline;
}

    .row a:hover, .row a:focus {
        text-decoration: underline;
        color: #000000;
        background-color: #f5e79e;
    }

.content-wrapper {
    padding-left: 0px;
    padding-top: 6px;
}

.wrap-text-md {
    word-wrap: break-word; /*old browsers*/
    overflow-wrap: break-word;
    width: 100%;
    display: block;
}

/*spacing classes*/
.zero-pad-right {
    padding-right: 0px !important;
}

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

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

.zero-pad-top-bottom {
    padding-bottom: 0;
    padding-top: 0;
}

.zero-pad {
    padding: 0 !important;
}

.zero-pad-bottom {
    padding-bottom: 0;
}

.zero-marg-bottom {
    margin-bottom: 0;
}

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


.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

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

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

.pad-right-30 {
    padding-right: 30px !important;
}

.pad-left-30 {
    padding-left: 30px !important;
}

.pad-left-lg {
    padding-left: 100px;
}

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


.element-invisible {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
}

    .element-invisible.element-focusable:active,
    .element-invisible.element-focusable:focus {
        position: static !important;
        clip: auto;
        overflow: visible;
        height: auto;
    }


#smrp {
    padding-bottom: 0px !important;
    min-height: 5px !important;
    margin-bottom: 0px !important;
}

#myNavbar,
#smrp {
    display: none !important;
}
/*#endregion*/

/*#region Link lists*/

.link-list {
    font-size: 1em;
    margin: 0;
    padding: 5px;
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

    .link-list > li {
        display: inline-block;
    }

/*#endregion*/
/*#region Spacer Classes*/
.no-space {
    padding: 0;
}

.text-required-spacer {
    padding-left: 0;
}

.reset-space {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

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

.row-spacer-top {
    margin-top: 10px;
}

.row-reset {
    margin-top: 0;
    margin-bottom: 0;
}

.row-reset-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

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

.row-spacer-top-bottom {
    margin-top: 6px;
    margin-bottom: 6px;
}

.row-spacer-nav-top {
    margin-top: 5px;
}

.row-spacer-sides {
    padding-right: 10px;
    padding-left: 10px;
}

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

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

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

.login-spacer-right {
    padding-right: 40px;
}

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

.label-spacer {
    padding-top: 7px;
}

.centered {
    float: none;
    margin: 0 auto;
}

/*#endregion*/

/*************************************************************************Message boxes********************************************************************/

.cst-well {
    min-height: 16px;
    padding: 15px;
    margin-bottom: 5px;
    border-radius: 4px;
}


.default-msg {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    color: #000000;
}

.info-msg {
    background-color: #dce6f4;
    border: 1px solid #007acc;
}

.warning-msg {
    background-color: #f5e79e;
    border: 1px solid #e7c623;
}

.alert-msg {
    background-color: #e6bcbc;
    border: 1px solid #cd7979;
}

.success-msg {
    border: 1px solid #3c763d;
    background-color: #dff0d8;
}




/*#region Wizard header*/

.wizard-header {
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid #666;
    padding-bottom: 5px;
}

    .wizard-header h2 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.6em;
        Font-Weight: Bold;
        color: #993333;
    }

.page-header {
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid #666;
    padding-bottom: 5px;
}

    .page-header h2 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.6em;
        Font-Weight: Bold;
        color: #993333;
    }
/*#endregion*/

/*#region Cosmetic Styles*/

.highlight {
    background-color: #e5e5e5;
    border-radius: 4px;
    padding: 10px;
}

.hr-line {
    margin: 0;
    border: 1px solid #e5e5e5;
    width: 97%;
    margin-left: 10px;
}

.note {
    background-color: #e5e5e5;
    border-radius: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    /*margin-left: 10px;*/
    margin-right: 10px;
}

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

.municipal-name {
    background-color: #666;
    color: #ffffff;
    padding: 3px;
}

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

/*Admin Dashboard*/
.text-huge {
    font-size: 4em;
}

.text-medium {
    font-size: 1.2em;
}

.gl-size-xl {
    font-size: 5.0em !important;
    /*line-height: 160%;*/
}

.gl-size-l {
    font-size: 4.0em !important;
    /*line-height: 160%;*/
}

.text-large {
    font-size: 1.4em;
}

.text-normal {
    font-size: 1.0em;
}

.text-small {
    font-size: 0.8em;
}

.text-no-bold label {
    font-weight: normal !important;
}

.panel-heading-hyperlink {
    font-size: 0.8em;
}

.list-group-heading {
    font-size: 1.2em !important;
    Font-Weight: Bold;
    color: #993333;
}

/*#endregion*/
/*text banner*/

.promo-box {
    background-color: #666;
    box-shadow: 2px 2px 3px #666;
    padding: 10px 10px 5px 10px;
    border-radius: 4px;
}

    .promo-box h2 {
        color: #ffffff;
        font-size: 2.0em;
        font-weight: bold;
        background-color: #00779e;
        padding: 5px 5px 5px 5px;
    }

/*Badge color*/
/*override bootstrap*/
.badge {
    background-color: #575757 !important;
}

.badge-truncate {
    max-width: 250px;
    display: block;
    text-overflow: ellipsis;
}

.badge-color-primary {
    background-color: #575757;
}

.badge-color-secondary {
    background-color: #800080;
}

.badge-color-dark {
    background-color: #1a1a1a;
}


.badge-color-warning {
    background-color: #AD5F00;
}

.badge-color-alert {
    background-color: #993838;
}

.badge-color-success {
    background-color: #286600;
}

.badge-color-info {
    background-color: #00779e;
}


/*#region custom fieldset*/
/*question-groups*/
.cst-fieldset legend {
    color: #00357a;
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 5px !important;
    border-bottom: none;
}

.cst-fieldset-list-group legend {
    color: #00357a;
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 5px !important;
    border-bottom: none;
}


/*#endregion*/


/*#region Identity box*/
.identity-box {
    background-color: #333;
    color: #ffffff;
    padding: 15px;
}

    .identity-box label {
        color: #ffffff;
    }

    .identity-box a, .identity-box a:link,
    .identity-box a:visited,
    .identity-box a:active {
        color: #ffffff;
        text-decoration: underline;
    }

        .identity-box a:focus, .identity-box a:hover {
            text-decoration: underline;
            color: #000;
        }

    .identity-box ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .identity-box li {
        display: inline;
    }


/*#endregion*/


/***************************************************************************Buttons******************************************************************************/
/*#region Home page buttons*/
.btn-icon {
    background-color: #666 !important;
    padding: 50px 5px 50px 5px;
    border-radius: 15px;
    float: left;
    display: block;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
    line-height: 1.1;
    /*vertical-align: middle;*/
    color: #ffffff !important;
    font-size: 2em;
    min-height: 155px;
}

    .btn-icon:hover {
        box-shadow: inset 0 0 0 10px #e4701e;
        background-color: #666;
        transition: box-shadow .3s ease;
        text-decoration: underline;
    }

    .btn-icon a:link {
        background-color: #666;
    }
/*#endregion*/

/*#region Buttons*/



.btn-main {
    color: #ffffff !important;
    text-shadow: none !important;
    background-image: none !important;
    border-color: #ccc !important;
    box-shadow: none !important;
}

    .btn-main:hover, .btn-main:focus {
        /*text-shadow: 0 1px 0 #fff !important;*/
        /*font-weight: bold;*/
        text-decoration: underline;
        box-shadow: inset 0 0 0 2px #ffffff !important;
        transition: box-shadow .3s ease;
    }


    .btn-main:active {
        /*transform: translateY(2px);*/
        opacity: 0.9;
    }

.btn-modal {
    color: #ffffff !important;
    text-shadow: none !important;
    background-image: none !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    font-weight: bold;
    padding: 9px 15px !important;
    -webkit-appearance: none !important;
    border: 0;
    font-size: 1.2em !important;
}

    .btn-modal:hover {
        box-shadow: inset 0 0 0 5px #e4701e !important;
        background-color: #666;
        transition: box-shadow .3s ease;
        text-decoration: underline;
    }

    .btn-modal:active {
        /*transform: translateY(2px);*/
        opacity: 0.9;
    }

.btn-size {
    font-size: 1.2em !important;
}

.btn-nav {
    background-color: #547d54 !important;
}

.btn-add {
    background-color: #666 !important;
}

.btn-save {
    background-color: #a36a00 !important;
}

.btn-delete {
    background-color: #c12e2a !important;
}

.btn-refresh {
    background-color: #333 !important;
}

.btn-update {
    background-color: #008080 !important;
}

.btn-pdf {
    background-color: #a36a00 !important;
}

.btn-finish {
    background-color: #00357a !important;
}



.btn-submit {
    background-color: #333 !important;
    /*color: #ffffff !important;
    text-shadow: 0 1px 0 #ffffff !important;*/
}

.btn-glyphicon {
    color: #000000;
}

.glyphicon-delete {
    color: #c12e2a !important;
}

.glyphicon-edit {
    color: #00357a !important;
}

btn-search {
}





/*file upload*/

.btn-upldate input[type=file] {
    display: block;
}

/*#endregion*/


/*todo  add arrow*/
.btn-nav span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

    .btn-nav span:after {
        content: '\00bb';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

/*Dropdownlist*/
/*.btn-dropdown, .btn-dropdown:focus, .btn-group:hover {
    color: #ffffff !important;
    background-image: none !important;
    text-shadow: 0 1px 0 #fff !important;
    border-color: #ccc !important;
    background-color: #4B6A88;
    color: #ffffff;
}*/

/*.btn-main-dropdown > .btn-default {
        background-image: none !important;
    border-color: #4B6A88 !important;
    border: 2px solid #4B6A88;
    background-color: #4B6A88;
    color: #ffffff !important;
    text-shadow: 0 1px 0 #fff !important;
}*/

/*select option {
    color: #ffffff !important;
    background-image: none !important;
    text-shadow: 0 1px 0 #fff !important;
    border-color: #ccc !important;
    background-color: #4B6A88;
    color: #ffffff;
}*/


/*Disabled Link*/
a.disabled {
    /* Make the disabled links grayish*/
    color: gray;
    /* And disable the pointer events */
    pointer-events: none;
}


/* Required field  */

.form-group.required .control-label:after {
    content: "*";
    color: red;
}


input[type="date"].form-control {
    line-height: inherit;
}



.rd-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    /*z-index: -1;*/
}

.rd-btn label {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    /*margin-top: 10px;*/
    padding-left: 30px;
    padding-right: 10px;
    line-height: 36px;
    cursor: pointer;
}

    .rd-btn label::before {
        content: " ";
        position: absolute;
        top: 6px;
        left: 0;
        display: block;
        width: 24px;
        height: 24px;
        border: 2px solid #4B6A88;
        border-radius: 4px;
    }

.rd-btn input[type="radio"] + label::before {
    border-radius: 18px;
}
/* Checked */

.rd-btn input[type="radio"]:checked + label {
    padding-left: 10px;
    color: #ffffff;
    z-index: 1;
}

    .rd-btn input[type="radio"]:checked + label::before {
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #4B6A88;
        z-index: -1;
    }
/* Transition */

.rd-btn label,
.rd-btn label::before {
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
}

ol.lower-alpha {
    list-style-type: lower-alpha;
}


/*/*Checkbox*/
/* .roundedTwo */
/* Base for label styling */
.cst-chk {
    margin-top: 7px;
}

    .cst-chk [type="checkbox"]:not(:checked),
    .cst-chk [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }

        .cst-chk [type="checkbox"]:not(:checked) + label,
        .cst-chk [type="checkbox"]:checked + label {
            position: relative;
            padding-left: 1.5em;
            padding-right: 1.25em;
            cursor: pointer;
            padding-top: 0;
        }

            /* checkbox aspect */
            .cst-chk [type="checkbox"]:not(:checked) + label:before,
            .cst-chk [type="checkbox"]:checked + label:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 1.25em;
                height: 1.25em;
                border: 2px solid #4B6A88;
                background: #fff;
                border-radius: 4px;
                box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
            }
            /* checked mark aspect */
            .cst-chk [type="checkbox"]:not(:checked) + label:after,
            .cst-chk [type="checkbox"]:checked + label:after {
                content: '✔';
                position: absolute;
                top: .1em;
                left: .1em;
                font-size: 1.3em;
                line-height: 0.8;
                color: #ffffff;
                transition: all .2s;
                background: #4B6A88;
            }
            /* checked mark aspect changes */
            .cst-chk [type="checkbox"]:not(:checked) + label:after {
                opacity: 0;
                transform: scale(0);
            }

            .cst-chk [type="checkbox"]:checked + label:after {
                opacity: 1;
                transform: scale(1);
            }
    /* disabled checkbox */
    .cst-chk [type="checkbox"]:disabled:not(:checked) + label:before,
    .cst-chk [type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        border-color: #bbb;
        background-color: #ddd;
    }

    .cst-chk [type="checkbox"]:disabled:checked + label:after {
        color: #999;
    }

    .cst-chk [type="checkbox"]:disabled + label {
        color: #aaa;
    }
    /* accessibility */
    .cst-chk [type="checkbox"]:checked:focus + label:before,
    .cst-chk [type="checkbox"]:not(:checked):focus + label:before {
        border: 2px solid #4B6A88;
    }

    /* hover style just for information */
    .cst-chk label:hover:before {
        border: 2px solid #4778d9 !important;
    }


/*#Modal Default*/
.modal-header-info {
    color: #fff;
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
    background-color: #4B6A88;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.modal-footer-info {
    color: #fff;
    padding: 9px 15px;
    border-top: 1px solid #eee;
    background-color: #4B6A88;
    /*-moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;*/
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

h2.modal-title {
    color: #ffffff;
    Font-Size: 1.4em !important;
    Font-Weight: Bold;
}

h2.modal-title-sm {
    color: #ffffff;
    Font-Size: 1.2em !important;
    Font-Weight: Bold;
}

h3.modal-title {
    color: #ffffff;
    Font-Size: 1.4em;
    Font-Weight: Bold;
}

/*medium size modal*/
@media (min-width: 768px) {
    .modal-md {
        width: 600px;
    }
}



.para-section {
    margin-top: 0;
    margin-bottom: 0;
}

.para-indent {
    padding-left: 1.5em;
}

/*overide bootstrap class*/
.close {
    color: #ffffff;
    opacity: 1;
    font-size: 1.6em;
}


/*#endregion*/

/*Top Navigation Pill*/
.nav-pills > li.cst-nav-pill > a {
    color: #fff;
    background-color: #666;
}

.nav > li.cst-nav-pill > a:focus, .nav > li.cst-nav-pill > a:hover {
    box-shadow: inset 0 0 0 5px #e4701e;
    background-color: #666;
    transition: box-shadow .3s ease;
    text-decoration: underline;
}


/*Box Heading Pills*/
.nav-pills > li.cst-heading-pill > a {
    color: #fff;
    background-color: #00779e;
    pointer-events: none;
}

.nav-pills-active > li.cst-heading-pill > a:focus,
.nav-pills-active > li.cst-heading-pill > a:hover {
    color: #fff;
    background-color: #00779e;
    pointer-events: none;
}



/*alert pill*/
.nav-pills > li.cst-pill-alert-active > a,
.nav-pills-alert-active > li.cst-pill-alert-active > a:focus,
.nav-pills-alert-active > li.active > a:hover {
    color: #fff;
    background-color: #a94442;
    pointer-events: none;
}

.nav-pills > li > a {
    border-radius: 4px;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.nav-pills .glyphicon {
    position: absolute;
    padding-top: 5px;
}

.cst-pill-box {
    margin-top: 5px;
    margin-bottom: 5px;
    border-left: 5px solid #b32017;
    border-bottom: 2px solid #666666;
    padding-bottom: 5px;
}



/**********************************************************************Web form group Panels********************************************************/

.web-form-radio legend {
    display: block;
    margin-bottom: 10px;
    border: 0;
    font-size: 1em;
    line-height: 160%;
    font-weight: bold;
}

/*question panel*/
.question-panel {
    /*border: 2px solid #666;*/
    margin: 5px 1px 10px 1px;
    padding-top: 10px;
    padding-bottom: 10px;
    /*border-style: solid;
    border-radius: 4px;*/
    font-size: 1.0em;
}

    .question-panel legend {
        display: block;
        margin-bottom: 10px;
        border: 0;
        padding-left: 0;
        padding-top: 5px;
        font-size: 1em;
        line-height: 160%;
        font-weight: bold;
    }


legend.question-group {
    color: #00357a;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 5px;
    border-bottom: 1px solid #e5e5e5;
}


.question-panel h3 {
    Font-Size: 1.4em;
    Font-Weight: Bold;
    color: #2f3f4e;
    margin-bottom: 13px;
    margin-top: 13px;
    margin-left: 10px;
}

.hira-panel {
    border: 2px solid #666;
    margin: 5px 1px 1px 1px;
    padding-bottom: 10px;
    border-style: solid;
    border-radius: 4px;
    display: block;
    box-sizing: border-box;
    font-size: 1.0em;
}

    .hira-panel legend {
        Font-Size: 1.4em;
        Font-Weight: Bold;
        color: #2f3f4e;
        margin-left: 10px;
        padding-top: 5px;
        border: none;
    }

    .hira-panel label {
        margin-bottom: 0;
        padding-top: 10px;
    }

.hira-panel-background {
    background-color: #2f3f4e;
}

.hira-panel option {
    background: #4B6A88;
}



/*Used in forms*/
/***********************************************************Tooltip********************************************************************************************/
.cst-tooltip {
    position: relative;
    display: block;
    padding-top: 5px;
    cursor: pointer;
}

.tooltip-spacer {
    padding-left: 0;
}

.tooltip-spacer-bottom {
    margin-bottom: 5px;
}

.gl-size {
    font-size: 2.0em !important;
    /*line-height: 160%;*/
}


.gl-size-medium {
    font-size: 1.4em !important;
    padding-right: 5px;
}

.cst-tooltip-login {
    display: inline-block;
    padding-top: 0;
}


.cst-tooltip,
.cst-tooltip a:link,
.cst-tooltip a:visited, .cst-tooltip a:active {
    color: #333333 !important;
}




/**********disabled textboxes**************/

.form-control[disabled] {
    border: none;
    background-color: #EBEBE4;
    color: #333333;
}

.cst-img {
    padding-top: 10px;
    position: relative;
}


.down-arrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.municipal-panel {
    border: 2px solid #666;
    margin: 5px 1px 1px 1px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-style: solid;
    border-radius: 4px;
    font-size: 1.0em;
}

    .municipal-panel .form-group {
        margin-bottom: 0;
    }

    .municipal-panel legend {
        Font-Size: 1.4em;
        Font-Weight: Bold;
        color: #2f3f4e;
        margin-bottom: 5px;
        border-bottom: none;
        padding-left: 15px;
    }

    .municipal-panel h3 {
        Font-Size: 1.4em;
        Font-Weight: Bold;
        color: #2f3f4e;
        margin-bottom: 5px;
        margin-top: 5px;
    }

.login-panel legend {
    Font-Size: 1.6em;
    Font-Weight: Bold;
    color: #2f3f4e;
    margin-bottom: 5px;
    border-bottom: none;
    padding-left: 193px;
}



/*Contact Panel*/

.contact-panel {
    border: 2px solid #666;
    margin: 5px 1px 1px 1px;
    padding-bottom: 10px;
    border-style: solid;
    border-radius: 4px;
    font-size: 1.0em;
}

    .contact-panel .form-group {
        margin-bottom: 0;
    }

    .contact-panel legend {
        color: #00357a;
        font-size: 1.6em;
        font-weight: bold;
        margin-bottom: 0;
        padding-bottom: 5px !important;
        padding-left: 10px;
    }

    .contact-panel h3 {
        Font-Size: 1.4em;
        Font-Weight: Bold;
        color: #2f3f4e;
        margin-bottom: 13px;
        margin-top: 13px;
    }


.modal-panel-contact {
    /*border: 2px solid #666;
    margin: 5px 1px 1px 1px;
    padding-bottom: 10px;
    border-style: solid;
    border-radius: 4px;*/
    font-size: 1.0em;
}

    .modal-panel-contact .form-group {
        margin-bottom: 0;
    }

    .modal-panel-contact legend {
        color: #00357a;
        font-size: 1.6em;
        font-weight: bold;
        margin-bottom: 0;
        padding-bottom: 5px !important;
        padding-left: 10px;
    }

    .modal-panel-contact h3 {
        Font-Size: 1.4em;
        Font-Weight: Bold;
        color: #2f3f4e;
        margin-bottom: 13px;
        margin-top: 13px;
    }

    /*.modal-panel-contact .bootstrap-select {
        display: block !important;
    }*/




    .modal-panel-contact .bootstrap-select > select.bs-select-hidden, select.bs-select-hidden, select.selectpicker {
        display: block !important;
    }

/*Modal Panel*/
.modal-panel {
    border: 3px solid #4B6A88;
    margin: 1px;
    padding-bottom: 10px;
    border-style: solid;
    border-radius: 4px;
    font-size: 1.0em;
}

    .modal-panel .form-group {
        margin-bottom: 0;
    }

    .modal-panel legend {
        color: #00357a;
        padding: 9px 15px;
        border-bottom: 1px solid #eee;
        background-color: #ffffff;
        font-weight: bold;
    }

.Modal-panel-panel h3 {
    Font-Size: 1.0em;
    Font-Weight: Bold;
    color: #2f3f4e;
    margin-bottom: 13px;
    margin-top: 13px;
}



/*#region *******************Table Style*********************/
/*Table in Panel*/
.panel-grid {
    padding: 0 !important;
}


/* Small table*/
.panel-table-sm {
    margin-bottom: 0 !important;
}

    .panel-table-sm td {
        padding-right: 0.1em !important;
        padding-left: 0.1em !important;
        padding-top: 0.8em !important;
        padding-bottom: 0.8em !important;
    }

/*Medium table*/
.panel-table-md {
    margin-bottom: 0 !important;
}

    .panel-table-md td {
        padding: 0.5em !important;
    }


/*Large Table*/
.panel-table-lg {
    margin-bottom: 0 !important;
}

    /*custom training grid*/

    .panel-table-lg td {
        padding: 0.8em !important;
    }

.tbl-word-wrap-xl {
    word-wrap: break-word; /*old browsers*/
    overflow-wrap: break-word;
    width: 300px;
}

.tbl-word-wrap-lg {
    word-wrap: break-word; /*old browsers*/
    overflow-wrap: break-word;
    width: 250px;
}

.tbl-word-wrap-md {
    word-wrap: break-word; /*old browsers*/
    overflow-wrap: break-word;
    width: 175px;
}

.tbl-word-wrap-sm {
    word-wrap: break-word; /*old browsers*/
    overflow-wrap: break-word;
    width: 100px;
}
/*date/time columns*/
.tbl-word-wrap-dt {
    word-wrap: break-word; /*old browsers*/
    overflow-wrap: break-word;
    width: 100px;
}

.overflow-wrap-hack {
    max-width: 1px;
}


/*Table- No Caption*/
.tblhorz {
    padding: 0;
    border-collapse: collapse;
    border: 0 #ddd !important;
    border: 2px solid #666;
    /*min-width: 75%;*/
    border-collapse: collapse;
    width: 100%;
    border-style: solid;
}
    /*Border around the table and table cells*/

    .tblhorz th {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .tblhorz th,
    .tblhorz td {
        border: 1px dotted #666;
        padding: 0.8em;
    }

        /*Cell Spacing and padding*/
        /*Border Style*/
        /*seperate border for header and data*/

        .tblhorz th[scope=col] {
            border-bottom: 2px solid #666;
            border-top: 2px solid #666;
            /*border-left: 2px solid #333;*/
        }

        .tblhorz th + th[scope=col] {
            border-right: 1px dotted #666;
        }

        .tblhorz th[scope=row] {
            border-right: 2px solid #666;
        }
        /* Set colours for all header cells in the top row except "Code"*/
        /* Set colours for all header cells in the top row */

        .tblhorz th[scope=col] {
            background-color: #2f3f4e;
            color: #ffffff;
            font-weight: bold;
        }
        /* This has been set as the same color as the header cells - change if desired*/

        .tblhorz th + th[scope=col] {
            background-color: #2f3f4e;
            color: #ffffff;
        }



            .tblhorz th + th[scope=col] a {
                text-decoration: underline;
            }


    .tblhorz tr.alt th,
    .tblhorz tr.alt td {
        background-color: #f4f4f4;
    }
    /*Hover effect for readability*/
    .tblhorz tr.highlight,
    .tblhorz tr:hover th[scope=row],
    .tblhorz tr:hover td {
        background-color: #ffff99;
    }

    .tblhorz caption {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
        display: none;
    }

    .tblhorz a,
    .tblhorz a:link,
    .tblhorz a:visited,
    .tblhorz a:active {
        text-decoration: underline;
        background-color: transparent;
    }

/*#region Horizontal table - new*/


.table-horizontal {
    padding: 0;
    border-collapse: collapse;
    border: 0 #ddd !important;
    border: 2px solid #666;
    border-collapse: collapse;
    width: 100%;
    border-style: solid;
}
    /*Border around the table and table cells*/

    .table-horizontal th {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .table-horizontal th,
    .table-horizontal td {
        border: 1px solid #666;
        padding: 0.8em;
    }

        /*Cell Spacing and padding*/
        /*Border Style*/
        /*seperate border for header and data*/

        .table-horizontal th[scope=col] {
            border-bottom: 1px solid #666;
            border-top: 1px solid #666;
        }

        .table-horizontal th + th[scope=col] {
            border-right: 1px solid #666;
        }

        .table-horizontal th[scope=row] {
            border-right: 1px solid #666;
        }
        /* Set colours for all header cells in the top row except "Code"*/
        /* Set colours for all header cells in the top row */

        .table-horizontal th[scope=col] {
            background-color: #2f3f4e;
            color: #ffffff;
            font-weight: bold;
        }
        /* This has been set as the same color as the header cells - change if desired*/

        .table-horizontal th + th[scope=col] {
            background-color: #2f3f4e;
            color: #ffffff;
        }



            .table-horizontal th + th[scope=col] a {
                text-decoration: underline;
            }


    .table-horizontal tr.alt th,
    .table-horizontal tr.alt td {
        background-color: #f4f4f4;
    }
    /*Hover effect for readability*/
    .table-horizontal tr.highlight,
    .table-horizontal tr:hover th[scope=row],
    .table-horizontal tr:hover td {
        /*background-color: #ffff99;*/
    }

    .table-horizontal caption {
        color: #00357a;
        font-size: 1.6em;
        font-weight: bold;
        margin-bottom: 0;
        padding-bottom: 5px !important;
    }

    .table-horizontal a,
    .table-horizontal a:link,
    .table-horizontal a:visited,
    .table-horizontal a:active {
        text-decoration: underline;
        background-color: transparent;
    }

        .table-horizontal a:hover {
            text-decoration: underline;
            color: #0D5977;
            background-color: transparent;
            font-weight: bold;
        }

    .table-horizontal tr:nth-child(even) {
        background-color: #d9d9d9;
    }

/*No caption*/
.table-horizontal-caption-sr-only caption {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
    display: none !important;
}

/*#endregion*/

/*Edit Grid Link*/
.rad-button-link a, .rad-button-link a:link {
    color: #333 !important;
}

    .rad-button-link a:hover {
        color: #000000;
    }


/*End button link*/

.tblhorz a:hover {
    text-decoration: underline;
    color: #0D5977;
    background-color: transparent;
    font-weight: bold;
}

.tblhorz tr:nth-child(even) {
    background-color: #d9d9d9;
}

/*#endregion*/

/*Processing Modal*/



/*Submit Survey Modal Box*/

.cst-modal {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #333333;
    z-index: 1100;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}

/*Class for Submitting Compliance*/
.loading {
    font-family: Arial;
    font-size: 1.0em;
    border: 5px solid #00475f;
    width: 400px;
    height: 300px;
    display: none;
    position: fixed;
    background-color: #ffffff;
    z-index: 1200;
    text-align: center;
    padding: 5px;
}

    .loading hr {
        border-top: 1px dashed #a9a9a9;
    }

    .loading h2 {
        color: #993333;
    }


/*Saving Modal*/

.save-modal {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #333333;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}

.save {
    font-family: Arial;
    font-size: 1.0em;
    border: 5px solid #00475f;
    width: 200px;
    height: 200px;
    display: none;
    position: fixed;
    background-color: #ffffff;
    z-index: 999;
    text-align: center;
    padding: 5px;
}

    .save hr {
        border-top: 1px dashed #a9a9a9;
    }

    .save h2 {
        color: #993333;
    }

/*
    Styles to enable the validation and masking of fields.
    They may be used for styling as well. 
    Entered here so that Visual Studio intellisense will not complain.
*/

.cancel {
}

.email {
}

.phoneCA {
}

.phoneUS {
}

.tollfree {
}

.passwordMatch {
}

.postalCodeCA {
    text-transform: uppercase;
}

.validExtension {
}

.validName {
}

.pwCheck {
}

.ValidExtension {
}

stepComplete {
}

stepIncomplete {
}

stepInactive {
}


/*#region Validation Styles*/

.has-error {
    color: #7c2128;
    font-weight: bold;
    display: block;
}

[data-required=true]:after {
    /*content: url('/iconStar.gif');*/
    content: " [*]";
    color: #a70000;
    font-weight: bold;
}

.error {
    color: #7c2128;
    font-weight: bold;
    display: block;
    overflow: hidden;
}

.text-required {
    font-weight: bold;
    color: #a70000;
}

.text-optional {
    font-weight: bold;
    color: #854200;
}

.val-default {
    padding: 5px;
    border-radius: 4px;
}

.val-success {
    border: 1px solid #3c763d;
    background-color: #dff0d8;
    font-weight: bold;
}

.val-error {
    border: 1px solid #7c2128;
    background-color: #ecb6bd;
    font-weight: bold;
}

/*#endregion*/




/*Confirmation Page*/

.ConfirmationNumber {
    border: 1px solid #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow: 2px 2px 3px #666;
    box-shadow: 2px 2px 3px #666;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;
    width: 35%;
}

    .ConfirmationNumber p {
        margin: 0 0 0 0;
        padding-left: 5px;
        font-weight: bold;
        color: #2f3f4e;
    }

.label-ConfirmationID {
    padding-top: 5px;
}

/*Sign-in classes*/
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}

    .form-signin legend {
        Font-Size: 1.6em;
        Font-Weight: Bold;
        color: #2f3f4e;
        margin-bottom: 5px;
    }

    .form-signin .form-signin-heading,
    .form-signin .checkbox {
        margin-bottom: 10px;
    }

    .form-signin .checkbox {
        font-weight: normal;
    }

    .form-signin .form-control {
        position: relative;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        font-size: 1.4em;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }


/*FAQ Section*/
/* LIST #2 */
#list2 {
    width: 100%;
}

    #list2 ol {
        font-size: 1.6em;
        color: #144a80;
    }

        #list2 ol li {
        }

            #list2 ol li p {
                padding: 5px;
                font-size: 0.6em;
                color: #000;
                border-left: 1px solid #999;
            }

                #list2 ol li p em {
                    font-style: italic;
                    display: block;
                    font-weight: bold;
                }

.contact-panel .selectpicker {
    display: block !important;
}

.icon-middle-align {
    vertical-align: middle;
    padding-right: 5px;
}

.hyperlink-middle-align {
    padding-top: 14px;
}



.list-group > a:hover {
    text-decoration: underline;
    color: #000000;
    background-color: #f5e79e;
}

/*Dashbaord Panel Summary*/


.event-primary h2 {
    margin-top: 10px;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}


.dashbaord-summary {
    display: inline-block;
    width: 100%;
    color: rgb(255, 255, 255);
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
}


    .dashbaord-summary.mutedgreen {
        background-color: #425742;
    }

    .dashbaord-summary.mutedpurple {
        background-color: #53536E;
    }

    .dashbaord-summary.mutedred {
        background-color: #694F4F;
    }

    .dashbaord-summary.mutedorange {
        background-color: #874112;
    }

    .dashbaord-summary > .total {
        display: block;
        font-size: 2.5em;
        font-weight: 100;
    }

    .dashbaord-summary > .type {
        display: block;
        font-size: 1.5em;
        font-weight: 900;
        line-height: 1;
    }

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.padding-left-box {
    padding: 1px 1px 1px 0;
}

.padding-right-box {
    padding: 1px 0 1px 0;
}

.panel-primary > .panel-footer {
    color: #fff !important;
    background-color: #337ab7;
    border-color: #337ab7;
}

    .panel-primary > .panel-footer p, .panel-primary a {
        color: #FFF
    }

.panel-body-padding {
    padding: 5px;
}

.panel-secondary {
    border-color: #00357a;
}

    .panel-secondary .panel-heading {
        background-color: #00357a;
    }

/*Rad Modal Contacts*/
.modal-dialog-override {
    margin-top: 0;
}


/*RAD MODAL*/
.rad-modal-header-info {
    Font-Size: 1.2em;
    Font-Weight: Bold;
    color: #ffffff;
    margin-bottom: 5px;
    border-bottom: 5px;
    padding: 10px 0 10px 15px;
    background-color: #2f3f4e;
}


.rad-modal-footer-info {
    color: #fff;
    padding: 9px 15px;
    border-top: 1px solid #eee;
    background-color: #4B6A88;
    /*-moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;*/
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

h2.rad-modal-title {
    color: #ffffff;
    Font-Size: 1.4em;
    Font-Weight: Bold;
    margin-top: 0;
}

.rad-modal-body {
    padding: 0 !important;
}



/*RAD GRID - Pop up modal Heading*/
.dt-after dt:after {
    content: ":";
}

@media (min-width: 768px) {
    .dl-horizontal.dt-space dt {
        width: 300px !important;
    }
}

@media (min-width: 768px) {
    .dl-horizontal.dt-word-break dt {
        word-wrap: break-word;
    }
}


/*override boostrap for accessiblity purposes*/
.modal-accessible h3.panel-title {
    font-size: 1.2em !important;
}


.myPhoneClass {
    min-width: 120px;
}

.myDateClass {
    text-align: center;
}

/*************CUSTOM RAD COMBO BOX STYLE *********/


.rad-combobox .RadComboBox_Default .rcbInner .k-widget .k-combobox .RadMultiColumnComboBox .RadMultiColumnComboBox_Default .k-dropdowngrid {
    border-color: #cccccc !important;
    color: #555 !important;
    background-color: #fff;
    border-radius: 3px;
}

.rad-combobox .RadComboBox .rcbActionButton .k-select {
    height: 2.0em !important;
}

.rad-combobox .RadComboBox .rcbInput .k-input .RadMultiColumnComboBox .RadMultiColumnComboBox_Default {
    color: #555 !important;
    height: 2.0em !important;
    font-size: 1.0em !important;
}

.rad-combobox .RadComboBoxDropDown .rcbScroll .rcbWidth {
    height: 100%;
}


.rad-combobox .RadComboBox_Default {
    color: #333333;
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.0em !important;
}

    .rad-combobox .RadComboBox_Default rcbInputCell {
        height: 50px;
    }

.rad-combobox .RadComboBox .rcbDisabled .rcbInput {
    border: none !important;
    background-color: #EBEBE4 !important;
    color: #333333 !important;
}

.rad-combobox .RadComboBox .rcbDisabled {
    background-color: #EBEBE4 !important;
    color: #333333 !important;
}
/*Label for radcombox sr-only*/
.rad-combobox .rcbLabel {
    display: none !important;
}


.rad-combobox-input {
    height: 100%;
}




/*#region RAD GRID STYLE Override*********/


/*Default size of Rad Grid  (x)*/
.btn-rad {
    font-size: 1.0em !important;
}


/*Rad grid Calendar disabled*/
.RadInput_Default .riTextBox {
    border: none !important;
    background-color: #EBEBE4 !important;
    color: #333333 !important;
    display: block !important;
    width: 100% !important;
    height: 34px !important;
    padding: 6px 12px !important;
    line-height: 1.42857143 !important;
    color: #555 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
}

/*Rad Grid override default classes*/
#rad-grid-reports .RadGrid {
    border: none;
}

    #rad-grid-reports .RadGrid .rgMasterTable {
        font-size: 1.0em;
        padding: 0;
        border-collapse: collapse;
        width: 100%;
    }

        #rad-grid-reports .RadGrid .rgMasterTable th, .RadGrid .rgMasterTable td {
            border: 1px solid #666;
            padding: 0.8em;
        }

            #rad-grid-reports .RadGrid .rgMasterTable th[scope=col] {
                border-bottom: 1px solid #666;
                border-top: 1px solid #666;
            }

        #rad-grid-reports .RadGrid .rgMasterTable + th[scope=col] {
            border-right: 1px solid #666;
        }

        #rad-grid-reports .RadGrid .rgMasterTable th[scope=row] {
            border-right: 1px solid #666;
        }

    #rad-grid-reports .RadGrid .rgAltRow > td:first-child {
        border-left: 1px solid #666;
        background-color: #d9d9d9;
    }

    #rad-grid-reports .RadGrid .rgRow > td:first-child {
        border-left: 1px solid #666;
    }

    #rad-grid-reports .RadGrid .rgMasterTable th[scope=col] {
        background-color: #2f3f4e;
        color: #ffffff;
        font-weight: bold;
    }

    /*alternating  rows*/
    #rad-grid-reports .RadGrid .rgRow > td {
        border-bottom: 1px solid;
    }

    #rad-grid-reports .RadGrid .rgAltRow {
        background-color: #d9d9d9;
    }

        #rad-grid-reports .RadGrid .rgAltRow > td {
            border-bottom: 1px solid;
        }

/*Rad Grid Group Header*/
#rad-grid-reports .rgGroupHeader > td {
    background-color: #465A72;
    color: #ffffff;
}

/*Fix for pager hover links*/
#rad-grid-reports .RadGrid table.rgMasterTable a:hover {
    color: #000000 !important;
}

/*Rad grid pager*/
#rad-grid-reports .RadGrid .rgPager {
    background-color: #2f3f4e;
}


/*Next and previous buttons*/
#rad-grid-reports .RadGrid .t-button {
    color: #ffffff;
}

    #rad-grid-reports .RadGrid .t-button:hover {
        text-decoration: underline;
    }


/*Pager labels*/
#rad-grid-reports .RadGrid .rgPagerCell .rgPagerLabel {
    color: #ffffff;
}

#rad-grid-reports .RadGrid .rgPagerCell .rgInfoPart {
    color: #ffffff;
}


#rad-grid-reports .RadGrid .rgPagerCell .rgNumPart a {
    color: #ffffff !important;
}

    #rad-grid-reports .RadGrid .rgPagerCell .rgNumPart a:hover {
        text-decoration: underline;
    }

#rad-grid-reports .RadGrid .rgFooter {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}



#rad-grid-reports .rgFooter > td {
    background-color: #BDC9D6;
    font-weight: bold;
    border: none;
}

/*Rad Grid No Records*/
#rad-grid-reports .rgNoRecords {
    background-color: #e6bcbc;
    border: 1px solid #cd7979;
}


#rad-grid-reports .rgHeader a {
    color: #ffffff !important;
    text-decoration: underline;
}

#rad-grid-reports .rgHeader {
    background-color: #2f3f4e;
    text-align: center;
}

#rad-grid-reports .rgGroupHeader {
    box-shadow: 0 1px 3px #c4c4c4;
    line-height: 22px;
    color: #888;
}

#rad-grid-reports .RadGrid table.rgMasterTable tr .rgGroupCol {
    white-space: nowrap;
    padding-right: 3px !important;
    padding-left: 3px !important;
    text-align: left !important;
    max-width: 0;
    overflow: visible;
    border-right: none;
}


#rad-grid-reports .rgMasterTable {
    width: 100% !important;
    overflow: auto !important;
    display: table !important;
    table-layout: auto !important;
}

#rad-grid-reports .rad-button button {
    font-weight: bold;
    text-decoration: underline !important;
}

#rad-grid-reports .rad-button:hover {
    font-size: 1.0em !important;
}


#rad-grid-reports .RadGrid .rgPagerCell .RadInput {
    width: 4em !important;
}

#rad-grid-reports .modal-font-size {
    font-size: 1.2em !important;
}

/*Filter row*/
#rad-grid-reports .RadGrid .rgFilterRow > td {
    padding-right: 3px;
    padding-left: 8px;
    white-space: normal !important;
}

/*Filter boxes*/

#rad-grid-reports .RadGrid .rgFilterBox {
    border: 2px solid #4B6A88;
    padding: 4px 10px;
    box-sizing: border-box;
    line-height: 1.42857143;
}

#rad-grid-reports .RadInput .riTextBox {
    border: 2px solid #4B6A88;
}

/*Rad grid date picker*/
#rad-grid-reports .RadMenu_Vista ul.rmGroup {
    background-color: white !important;
}

#rad-grid-reports .RadCalendar {
    background-color: white;
}

#rad-grid-reports .RadPicker_Vista {
    background-color: white !important;
}

/*Combo box in grid*/

#rad-grid-reports .RadComboBox .rcbInput {
    color: #ffffff;
}

/*Pager size dropdown box*/
#rad-grid-reports .RadComboBox .rcbInner {
    color: #ffffff;
}

#rad-grid-reports .RadComboBox .rcbReadOnly .rcbInput {
    color: #ffffff;
    font-weight: bold;
}


#rad-grid-reports .RadComboBox .rcSelect {
    background-color: silver;
}

/*override for rad grid*/
.rad-grid-reports-override .RadGrid table.rgMasterTable tr .rgGroupCol {
    white-space: normal !important;
}



/*#endregion*/


/*#region Rad file upload control override*/

/*fieldset*/

.fieldset-box {
    border: 1px solid #ddd;
    margin: 1.125rem 0;
    padding: .5625rem 1.125rem;
}

    .fieldset-box legend {
        width: inherit; /* Or auto */
        padding: 0 10px; /* To give a bit of padding on the left and right */
        border-bottom: none;
    }




/*Select button*/

.rad-file-upload {
    font-family: Verdana, Arial, sans-serif !important;
}


    .rad-file-upload .ruUploadProgress {
        width: 100% !important;
    }


    .rad-file-upload .RadUpload .ruBrowse {
        padding: 6px 12px !important;
        height: 100% !important;
    }

    .rad-file-upload .RadUpload .ruFakeInput, .RadUpload .ruButton {
        vertical-align: middle !important;
    }

    /*input field*/
    .rad-file-upload .RadUpload .ruFakeInput {
        display: inline-block;
        width: 25em;
        height: 100%;
        border: 2px solid #4B6A88 !important;
        padding: 4px 0;
    }


    /*Selected files list*/
    .rad-file-upload .RadUpload .ruFileLI .ruFileWrap {
        padding: 5px 0;
        width: 500px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .rad-file-upload .RadUpload .ruFileLI {
        margin-bottom: 4px;
    }


    .rad-file-upload .RadUpload .radIcon {
        height: 20px !important;
    }
    /*Remove button*/
    .rad-file-upload .RadUpload .ruFileLI .ruButton {
        font-size: 1em;
        margin-left: 10px;
        cursor: pointer;
        /*border: 1px solid #4B6A88 !important;
        border-radius: 4px !important;*/
        color: #0D5977 !important;
        text-decoration: underline;
        /*padding: 4px 4px !important;*/
        margin-right: 10px;
    }


        .rad-file-upload .RadUpload .ruFileLI .ruButton:hover {
            color: #7c2128 !important;
            font-weight: bold;
        }

    /*Success Message*/

    .rad-file-upload .ruUploadSuccess {
        border: 1px solid #3c763d;
        padding: 4px !important;
        margin-top: 4px !important;
    }

    .rad-file-upload .RadButton_Default.rbSkinnedButton {
        margin-top: 2px;
    }

    /*File not supported error*/
    .rad-file-upload .ruErrorMessage {
        color: #7c2128;
        font-weight: bold;
        display: block;
        padding-left: 5px !important;
        padding-bottom: 5px !important;
    }

    .rad-file-upload .ruUploadFailure {
        border: 1px solid #cd7979;
        margin-top: 5px !important;
        /*padding: 4px !important;*/
        word-wrap: break-word;
    }



    /*Upload button*/
    .rad-file-upload .RadButton .rbDecorated {
        height: 100% !important;
        padding: 6px 12px !important;
        line-height: 0 !important;
        font-family: Verdana, Arial, sans-serif !important;
    }



/*#endregion*/
/*#region File upload Grid*/
.file-upload-grid {
    padding: 0;
    border-collapse: collapse;
    border: 0 #ddd !important;
    border: 2px solid #666;
    /*min-width: 75%;*/
    border-collapse: collapse;
    width: 100%;
    border-style: solid;
}
    /*Border around the table and table cells*/

    .file-upload-grid th {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .file-upload-grid th,
    .file-upload-grid td {
        border: 1px dotted #666;
        padding: 0.8em;
    }
        /*Cell Spacing and padding*/
        /*Border Style*/
        /*seperate border for header and data*/

        .file-upload-grid th[scope=col] {
            border-bottom: 2px solid #666;
            border-top: 2px solid #666;
            /*border-left: 2px solid #333;*/
        }

        .file-upload-grid th + th[scope=col] {
            border-right: 1px dotted #666;
        }

        .file-upload-grid th[scope=row] {
            border-right: 2px solid #666;
        }
        /* Set colours for all header cells in the top row except "Code"*/
        /* Set colours for all header cells in the top row */

        .file-upload-grid th[scope=col] {
            /*color: #2f3f4e;*/
            /*background-color: #373737;*/
            background-color: #2f3f4e;
            color: #ffffff;
            font-weight: bold;
            /*background-color: #2f3f4e;*/
        }
        /* This has been set as the same color as the header cells - change if desired*/

        .file-upload-grid th + th[scope=col] {
            background-color: #2f3f4e;
            color: #ffffff;
        }



            .file-upload-grid th + th[scope=col] a {
                text-decoration: underline;
            }


    .file-upload-grid tr.alt th,
    .file-upload-grid tr.alt td {
        background-color: #f4f4f4;
    }
    /*Hover effect for readability*/
    .file-upload-grid tr.highlight,
    .file-upload-grid tr:hover th[scope=row],
    .file-upload-grid tr:hover td {
        background-color: #ffff99;
    }

    .file-upload-grid caption {
        font-size: 1.4em !important;
        font-weight: Bold;
        color: #2f3f4e;
        margin-bottom: 5px;
        padding-top: 0 !important;
    }

    .file-upload-grid a,
    .file-upload-grid a:link,
    .file-upload-grid a:visited,
    .file-upload-grid a:active {
        text-decoration: underline;
        background-color: transparent;
    }


        .file-upload-grid a:hover {
            text-decoration: underline;
            color: #0D5977;
            background-color: transparent;
            font-weight: bold;
        }

    .file-upload-grid tr:nth-child(even) {
        background-color: #d9d9d9;
    }



/*#endregion*/

/*todo test for accessiblity*/
/*Empty data grid - remove border*/
.EmptyDataGrid td {
    border: 0 !important;
    padding: 0 !important;
}
/*Hover effect for readability*/
.EmptyDataGrid tr:hover td {
    background-color: #ffffff !important;
}

/*#region tab styles*/

.cst-tab .nav-tabs > li.active > a {
    color: #ffffff;
    background-color: #575757;
}

.cst-tab .tab-content {
    border: 1px solid #ddd;
    border-top: 5px solid #00779e;
    border-bottom: 5px solid #00779e;
    padding: 15px 25px;
}

/*#endregion*/

/*#region My apps, home page*/

.ds-btn li {
    list-style: none;
    float: left;
    padding: 10px;
}

    .ds-btn li a span {
        padding-left: 15px;
        padding-right: 5px;
        width: 100%;
        display: inline-block;
        text-align: left;
    }

        .ds-btn li a span small {
            width: 100%;
            display: inline-block;
            text-align: left;
        }



/*#endregion*/


/*#region App Tiles */

/*TODO: Check if the .app class can be removed?*/
.app {
    min-height: 16px;
    padding: 15px;
    margin-bottom: 5px;
    border-radius: 4px;
}

    .app a {
        color: #333333;
        text-decoration: none;
    }

/* Button App Tiles */

.btn-app {
    white-space: normal;
    min-height: 125px;
    width: 100%;
    text-decoration: none;
    color: #333333;
}

.row a.btn-app {
    font-weight: normal;
}

a.btn-app:link,
a.btn-app:visited,
a.btn-app:active,
a.btn-app:hover,
a.btn-app:focus {
    color: #333333;
}

a.btn-app:active,
a.btn-app:hover,
a.btn-app:focus {
    border-color: #666666;
    box-shadow: inset 0 0 0 2px #666666;
    transition: box-shadow .3s ease;
}

    a.btn-app:active h2,
    a.btn-app:active p,
    a.btn-app:hover h2,
    a.btn-app:hover p,
    a.btn-app:focus h2,
    a.btn-app:focus p {
        text-decoration: underline;
    }


/* App Tile Colour Pairs */

.app-colour-1 {
    background-color: #99CC99;
    border-color: #99CC99;
}

.app-colour-2 {
    background-color: #CC9999;
    border-color: #CC9999;
}

.app-colour-3 {
    background-color: #CCCCCC;
    border-color: #CCCCCC;
}

.app-colour-4 {
    background-color: #9999CC;
    border-color: #9999CC;
}

.app-colour-5 {
    background-color: #66FFFF;
    border-color: #66FFFF;
}

.app-colour-6 {
    background-color: #FECD57;
    border-color: #FECD57;
}

.app-colour-7 {
    background-color: #99CCCC;
    border-color: #99CCCC;
}

.app-colour-8 {
    background-color: #CCCC99;
    border-color: #CCCC99;
}

.app-colour-9 {
    background-color: #6699FF;
    border-color: #6699FF;
}

.app-colour-10 {
    background-color: #CC99CC;
    border-color: #CC99CC;
}


/*App glyphs*/
.icon-tile-size {
    font-size: 6.0em;
}

/*#endregion*/

/*#region Rad check box*/

.rad-checkbox button.RadCheckBox {
    font-size: 1.2em;
}

/* makes the checkbox icon elastic in addition to the label text */
.rad-checkbox .RadButton.RadCheckBox .rbIcon,
.RadButton.RadCheckBox .rbIcon::before {
    font-size: inherit;
    width: 1em;
    height: 1em;
}
/*#endregion*/


/*#region Branding*/

.brand-pane {
    border-radius: 6px;
    padding: 10px 15px;
}

    .brand-pane img {
        width: 120px;
    }

    .brand-pane h2 {
        color: #ffde53;
        font-size: 2em;
        font-weight: normal;
        padding-left: .5em;
        padding-right: .5em;
    }

@media (min-width: 768px) {
    .brand-pane img {
        width: 160px;
    }

    .brand-pane h2 {
        font-size: 2.75em;
    }
}

.brand-emo {
    background-color: #020178;
}

.brand-ofm {
    background-color: #333333;
}

.brand-ofmem {
    background-color: #333333;
}

/*#endregion Branding*/

/*#region Rad window skin - DeleteSkin */

/*Refer to https://docs.telerik.com/devtools/wpf/styling-and-appearance/glyphs/common-styles-appearance-glyphs-reference-sheet */


.RadWindow.RadWindow_RadDeleteSkin {
    border-width: 0; /* Change border width */
    border-radius: 8px;
    background-color: #9E0000; /* Change Content base background color */
    /*border-color: #450349; /* Change border color */
    color: #333333;
    font-weight: bold;
    /*font: 16px Tahoma, Verdana, sans-serif;*/
}

    .RadWindow.RadWindow_RadDeleteSkin .rwTitleBar {
        height: 32px; /* Change TitleBar height */
        background-color: #9E0000;
        border-radius: 8px;
    }

    /*Title*/
    .RadWindow.RadWindow_RadDeleteSkin .rwTitleWrapper .rwTitle {
        color: #fff; /* Should be specified in order to be different than the Content text color */
        font-size: 1.2em; /* Change font size */
        height: 24px; /* Change height */
        line-height: 24px; /* Change line-height to position the title in the middle if you have changed font size already */
    }

    .RadWindow.RadWindow_RadDeleteSkin .rwContent {
        background-color: #ffffff; /* Change content background color */
        color: #333333; /* Change content font color */
        border-radius: 8px;
        font-weight: bold;
    }

    .RadWindow.RadWindow_RadDeleteSkin .rwTitle {
        margin: 0;
        padding: 0 0 0 30px;
        width: 100%;
        border-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        display: inline-block;
        overflow: hidden;
    }


    .RadWindow.RadWindow_RadDeleteSkin .rwIcon:before {
        content: "\e403"; /*warning sign*/
        color: #ffffff;
        font-weight: bold;
        margin: -.25em 0 0 -.25em;
        width: 1em;
        height: 1em;
        vertical-align: middle;
        font: 2em/1 "WebComponentsIcons";
        display: block;
    }


    .RadWindow.RadWindow_RadDeleteSkin .rwConfirmDialog:before {
        content: none;
    }

    .RadWindow.RadWindow_RadDeleteSkin .rwDialogContent {
        min-height: 50px;
        padding: 0 0 0 0;
    }


    /*Close button*/

    .RadWindow.RadWindow_RadDeleteSkin .rwCloseButton:before {
        content: "\e11b";
        color: #ffffff;
    }

    .RadWindow.RadWindow_RadDeleteSkin .rwCommandButton:before {
        content: "\e11b";
        margin: auto;
        padding: 0;
        display: inline-block;
        font: 16px/1 "WebComponentsIcons";
        color: #ffffff;
        font-weight: bold;
        text-align: center;
        vertical-align: top;
    }

    .RadWindow.RadWindow_RadDeleteSkin .rwCommandButton {
        padding: 2px;
        border: 1px solid transparent;
        border-radius: 2px;
        line-height: 1;
        display: inline-block;
        text-decoration: none;
        vertical-align: top;
    }


    /*Dialgoue Buttons*/

    .RadWindow.RadWindow_RadDeleteSkin .rwDialogButtons button {
        padding: 4px 10px;
        border-width: 1px;
        border-style: solid;
        border-color: #cccccc;
        border-radius: 4px;
        color: #ffffff;
        background-color: #666666;
    }

        .RadWindow.RadWindow_RadDeleteSkin .rwDialogButtons button:hover {
            text-decoration: underline;
            box-shadow: inset 0 0 0 2px #ffffff !important;
            transition: box-shadow .3s ease;
        }


/*#endregion*/



/*Rad button defaults*/
.rbButton {
    padding: 6px 12px !important;
}

/*#region Accessbility udpated - Fonts from px to em*/

.jumbotron p {
    font-size: 1.4em;
}


legend {
    font-size: 1.6em;
}

/*#endregion*/