/* Base level styling */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --black: rgb(0, 0, 0);
    --white: rgb(255, 255, 255);
    --blue: rgba(0, 0, 153, 1); /*#000099*/
    --bluelight: rgba(0, 0, 153, .8); /*#000099*/
    --green: rgba(0, 102, 0, 1); /*#006600*/
    --greenlight: rgba(0, 102, 0, .9); /*#006600*/
    --yellow: rgb(255, 199, 0); /*#FFC700*/
    --yellowalternate: rgb(255, 190, 28);
    --yellowdisabled: rgb(255, 229, 164);
    --grey: rgb(227,227,227); /*#E3E3E3*/
    --greyalternate: rgb(201,201,201); /*#c9c9c9*/
    --greylight: rgba(227,227,227, 1);
    --greyverylight: #fafafa;
    --greydark: #616161;
    --red: rgba(255,204,204, 1);
    --redlight: rgba(255,204,204, .8);
    --reddark: #dd3737;
}
/*
@font-face {
    font-family: 'Open Sans';
    src: url('../../fonts/OpenSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans Bold';
    src: url('../../fonts/OpenSans-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}*/
html{
    font-size:10px;
}

body {
    font-family: 'Open Sans';
    font-size: 1.25rem;
    font-variant-ligatures: none !important;
    font-feature-settings: "liga" 0;
    margin:0;
}

body.dark-mode{

}

@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}

a {
    color:var(--blue);
    cursor: pointer;
}
a:visited {
    color: var(--green);
}
    a:hover {
        color: #CC0000;
    }

/* Base Input Styling */
input:not([type="submit"]):not([type="button"]), select, textarea {
    font-weight:bold;
    font-size: 1.4rem;
    color: blue;
    border: 1px solid #BBBBBB;
    background: white;
}

input:not([type="submit"]):not([type="button"]):disabled, select:disabled, textarea:disabled, input:not([type="submit"]):not([type="button"]).disabled, select.disabled, textarea.disabled {
    color: #666;
}


/* Utilities Classes*/
.margin_b_5, .margin-b-5 {
    margin-bottom: 5px !important;
}
.margin_b_10, .margin-b-10 {
    margin-bottom: 10px !important;
}

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

.margin_t_5, .margin-t-5 {
    margin-top: 5px !important;
}

.margin_t_10, .margin-t-10 {
    margin-top: 10px !important;
}
.margin_0, .margin-0 {
    margin: 0 !important;
}

.padding_0, .padding-0 {
    padding: 0 !important;
}

.text_left, .text-left {
    text-align: left !important;
}

.text_right, .text-right {
    text-align: right !important;
}
.text_center, .text-center{
    text-align:center !important;
}
.pull_right{
    float:right;
}
.pull_left{
    float:left;
}

.small_text, .text_sm, .text-sm {
    font-size: 80% !important;
}
.text_lg, .text-lg {
    font-size: 1.4rem !important;
}
.text_xl, .text-xl {
    font-size: 1.7rem !important;
}
.bold_text, .bold-text, .text_bold, .text-bold, strong, b {
    font-weight: bold;
}
.v-middle{
    vertical-align:middle;
}

.text-green{
    color: var(--green);
}
.text-red {
    color: var(--reddark);
}

.font-greydark, text-greydark{
    color:var(--greydark);
}

.outline-red{
    border:1px solid var(--red);
}

.smallgreentext {
    COLOR: #006600;
    FONT-FAMILY: Verdana, sans-serif;
    FONT-SIZE: 10px
}

.info_icon {
    cursor: pointer;
    height: 12px;
    width: 12px;
    display: inline-block;
    vertical-align: middle;
}

    .info_icon.large {
        height: 24px;
        width: 24px;
    }

    .info_icon img {
        width: 100%;
        height: auto;
    }




/* Standard Layout*/
#layout_container{
    /*margin-top:40px;*/
    padding:8px;
}

#page_container{
    margin-top:15px;
}

.section_box {
    margin: 30px 0 30px 0;
    padding: 10px;
    border: 1px solid gray;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.section_box.no_border {
    padding: 0;
    border: none;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    -ms-border-radius: none;
    border-radius: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.section_box.left_align {
    width: 49%;
    float: left;
    display: inline-block;
}

.section_box.right_align {
    width: 49%;
    float: right;
    display: inline-block;
}


    .section_box .title {
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 10px;
        background-color: var(--grey);
        margin: -10px -10px 10px -10px;
        padding: 10px 10px 10px 10px;
        font-weight: bold;
    }
    .section_box .title .title_button, .section_box .title .title_edit_button {
        text-align: right;
        margin-top: -24px;
    }
        .section_box .title .title_button .button,
        .section_box .title .title_edit_button .button {
            border: 1px solid var(--greydark);
            font-size: 1.2rem;
            padding: 3px 5px;
            font-weight:normal;
        }
    .section_box .section_box .title {
        background-color: var(--greydark);
        color:white;
    }
    .section_box .instructions {
        font-size: 1.1rem;
        margin: 10px 0 10px 5px;
    }

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

    .section_box .field_label {
        text-transform: uppercase; /*font-size:13px;*/
        padding-left:5px;
    }

        .section_box .field_label {
            color: black;
            font-weight: normal;
        }

            .section_box .required_entry:after {
                content: ' *';
                color: red;
            }

            .section_box .suggested_entry:after {
                content: ' *';
                color: blue;
            }

.small_red_text {
    color: #ff0000;
    font-family: 'Open Sans', Arial,Helvetica,sans-serif;
    font-size: 80%;
}

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

        .section_box .field_data.text-lg {
            font-size: 1.6rem;
        }

    .section_box .field_list td {
        border-bottom: 1px solid #E0E0E0;
    }

    .section_box .tabulation th {
        background: #F0F0F0;
        font-size: 80%;
        font-weight:bold;
    }

    .section_box .tabulation td { 
    }

    .section_box .tabulation .data {
    }

    .section_box .tabulation .data_caps {
        text-transform: uppercase;
    }

    .section_box .tabulation .data_small {
        font-size: 80%;
    }

    .section_box .tabulation_grid th {
        border-bottom: 1px solid gray;
        background: #F0F0F0;
        font-size: 80%;
        font-weight:bold;
        text-align: center;
    }

    .section_box .tabulation tr.inactive, .section_box .tabulation_grid tr.inactive {
        background-color: #F0F0F0;
        color: #808080;
    }

    .section_box .tabulation tr.bg-red, .section_box .tabulation_grid tr.bg-red {
        background-color: var(--redlight);
    }

    .section_box .tabulation tr.bg-green, .section_box .tabulation_grid tr.bg-green {
        background-color: #D9FFCC;
    }

    .section_box .tabulation tr.bg-grey, .section_box .tabulation_grid tr.bg-grey {
        background-color: var(--grey);
    }

    .section_box .tabulation_grid td {
        border-bottom: 1px solid #E0E0E0;
    }

    .section_box .tabulation_grid .data {
    }

    .section_box .tabulation_grid .data_caps {
        text-transform: uppercase;
    }

    .section_box .tabulation_grid .data_small {
        font-size: 80%;
    }

    .section_box .tabulation_grid header {
        border-bottom: 1px solid gray;
        background: #F0F0F0;
        font-size: 80%;
        font-weight:bold;
        text-align: center;
    }
    /* Sorting / filtering / paging list styling */
    .section_box .tabulation_grid th .sort, .section_box .tabulation_grid th .sort {
        cursor: pointer;
        color: #000099;
        text-decoration: underline;
        margin-bottom: 5px;
    }

        .section_box .tabulation_grid th .sort:hover, .section_box .tabulation_grid th .sort:hover {
            color: red;
        }

        .section_box .tabulation_grid th .sort.asc, .section_box .tabulation_grid th .sort.desc {
            padding-right: 10px;
        }

    .section_box .tabluation_grid th .sort.asc:after {
        content: ' ';
        position: relative;
        left: 2px;
        border: 8px solid transparent;
        bottom: 15px;
        border-bottom-color: blue;
    }

    .section_box .tabluation_grid th .sort.desc:after {
        content: ' ';
        position: relative;
        left: 2px;
        border: 8px solid transparent;
        top: 10px;
        border-bottom-color: blue;
    }

    .section_box .tabulation_grid th .sort.asc:after {
        content: ' ';
        position: relative;
        left: 5px;
        border: 5px solid transparent;
        bottom: 10px;
        border-bottom-color: #006600;
    }

    .section_box .tabulation_grid th .sort.desc:after {
        content: ' ';
        position: relative;
        left: 5px;
        border: 5px solid transparent;
        top: 10px;
        border-top-color: #006600;
    }

    .section_box .tabulation_grid th .sort a:visited {
        color: #000099 !important;
    }
    .section_box .tabulation_grid table.hover tr:hover {
        background-color: var(--greylight);
    }

    .section_box .tabulation table.hover tr:hover {
        background-color: var(--greylight);
    }
.section_box_top_content{
    margin-bottom:-25px;
    font-size:1rem;
}
    .section_box_top_content .required_instruction{
        font-weight:bold;
        color: red;
    }

    table.table {
        width: 100%;
        border-collapse: collapse;
    }

        table.table tr th,
        table.table tr td {
            padding: 5px;
            margin: 0;
        }

            table.table tr th.col-10,
            table.table tr td.col-10 {
                width: 10%;
            }

            table.table tr th.col-20,
            table.table tr td.col-20 {
                width: 20%;
            }

            table.table tr th.col-30,
            table.table tr td.col-30 {
                width: 30%;
            }

            table.table tr th.col-40,
            table.table tr td.col-40 {
                width: 40%;
            }

            table.table tr th.col-50,
            table.table tr td.col-50 {
                width: 50%;
            }

            table.table tr th.col-60,
            table.table tr td.col-60 {
                width: 60%;
            }

            table.table tr th.col-70,
            table.table tr td.col-70 {
                width: 70%;
            }

            table.table tr th.col-80,
            table.table tr td.col-80 {
                width: 80%;
            }

            table.table tr th.col-90,
            table.table tr td.col-90 {
                width: 90%;
            }

        table.table td.actions a {
            font-weight:bold;
            text-decoration: underline;
            cursor: pointer;
        }

        table.table td.actions {
            text-align: center;
        }

        table.table tfoot td {
            font-weight: bold;
            border-top: 1px solid black !important;
            border-bottom: 1px solid black !important;
        }

input[type=file].dragdrop {
    /* display: none; */ padding: 20px 40px;
    border: 2px dashed #e3e3e3 !important;
}



/* Buttons */
.button_box {
    width: 100%;
    text-align: center;
    padding: 20px;
}

    .button_box .button:not(:last-child) {
        margin-right: 5px;
    }

    .button_box.left_align {
        text-align: left;
        padding-left: 0px;
    }

    .button_box.right_align {
        text-align: right;
        padding-right: 0px;
    }

    .button_box.no-padding{
        padding-top:0;
    }

.content_box {
    font-size: 12px;
    margin: 15px 0 15px 0;
}

/* Buttons*/
a.button {
    text-decoration: none;
}

button.button, a.button {
    cursor: pointer;
    color: var(--black);
    font-family: 'Open Sans';
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--greyalternate);
    text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    background-clip: padding-box;
    background: var(--grey);
    /*background: #e7e7e7;
    background: -webkit-linear-gradient(-90deg, #e7e7e7, #c6c6c6);
    background: linear-gradient(180deg, #e7e7e7, #c6c6c6);*/
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

    button.button:hover, a.button:hover {
        border: 1px solid var(--greydark);
    }

.button.button_secondary {
    background: var(--bluelight);
    color: var(--white);
    border: 1px solid var(--blue);
}

    .button.button_secondary:hover, .button.button_secondary:focus, .button.button_secondary:active {
        background: var(--blue);
        border: 1px solid var(--black);
    }

.button.button_outline {
    background: transparent;
    color: var(--black);
    border: 1px solid var(--greydark);
}

    .button.button_outline:hover, .button.button_outline:focus, .button.button_outline:active {
        border: 1px solid var(--black);
    }

.button.button_save, .button.button-save {
    background: var(--yellowalternate);
    border: 1px solid var(--yellowalternate);
}

    .button.button_save:hover, .button.button_save:focus, .button.button_save:active {
        background: var(--yellow);
        border: 1px solid var(--greydark);
    }

    .button.button_save:disabled {
        background: var(--yellowdisabled);
        color: var(--greydark);
        border: 1px solid var(--greydark);
        cursor: default;
    }

.button.button_save_2 {
    background: var(--greenlight);
    color: var(--white);
    border: 1px solid var(--greenlight);
}

    .button.button_save_2:hover, .button.button_save_2:focus, .button.button_save_2:active {
        background: var(--green);
        border: 1px solid var(--black);
    }
.button.button_error {
    background: var(--reddark);
    color: var(--white);
    border: 1px solid var(--reddark);
}

    .button.button_error:hover, .button.button_error:focus, .button.button_error:active {
        background: var(--reddark);
        border: 1px solid var(--greydark);
    }

.button.button_xs {
    padding: 1px 2px;
    font-size: 1.1rem;
}

.button.button_sm {
    padding: 2px 4px;
    font-size: 1.3rem;
}

.button.button_lg {
    padding: 8px 10px;
    font-size: 1.6rem;
}

.button.button_xl {
    padding: 10px 12px;
    font-size: 16px;
}


/*Tiles*/
.tile {
    text-decoration: none;
    font-weight:bold;
    text-align: center;
    color: var(--blue);
    width: 100%;
    background: var(--greylight);
    border-radius: 3px;
    margin-bottom: 10px;
}
.tile.hover{
    cursor: pointer;
}
.tile.left{
    text-align:left;
}
    .tile .tile_title{
        height:40px;
    }
    .tile .tile_description{
        min-height:55px;
        overflow:auto;
    }
    .tile .tile_description.collapsed{
        height:14px;
        overflow:hidden;
    }
    .tile .tile_title {
        font-size: 1.3rem;
        padding: 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .tile .tile_description {
        font-size: 1rem;
        padding: 5px 10px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    /* Standard tile design */
    .tile.blue:not(.secondary) .tile_title {
        background-color: var(--blue);
        color: white;
    }

    .tile.blue:not(.secondary) .tile_description {
        background-color: var(--bluelight);
        color: white;
    }

    .tile.blue:not(.secondary) .b2g_collapse_indicator {
        color: white;
    }
    .tile.green:not(.secondary) .tile_title {
        background-color: var(--green);
        color: white;
    }

    .tile.green:not(.secondary) .tile_description {
        background-color: var(--greenlight);
        color: white;
    }
    .tile.yellow:not(.secondary) .tile_title {
        background-color: var(--yellowalternate);
        color: black;
    }
    .tile.yellow:not(.secondary) .tile_description {
        background-color: var(--yellowalternate);
        color: var(--greydark);
    }
    .tile.red:not(.secondary) .tile_title {
        background-color: var(--reddark);
        color: white;
    }
    .tile.red:not(.secondary) .tile_description {
        background-color: var(--reddark);
        color: black;
    }

    .tile.hover:hover:not(.secondary) .tile_title, .tile.active:not(.secondary) .tile_title {
        background-color: var(--blue);
        color: white;
    }
    .tile.hover:hover:not(.secondary) .tile_description, .tile.active:not(.secondary) .tile_description {
        background-color: var(--blue);
        color: white;
    }
    .tile.blue.hover:hover:not(.secondary) .tile_title, .tile.blue.active:not(.secondary) .tile_title {
        background-color: var(--bluelight);
        color: white;
    }

    .tile.blue.hover:hover:not(.secondary) .tile_description, .tile.blue.active:not(.secondary) .tile_description {
        background-color: var(--blue);
        color: white;
    }
    .tile.green.hover:hover:not(.secondary) .tile_title, .tile.green.active:not(.secondary) .tile_title {
        background-color: var(--greenlight);
        color: white;
    }

    .tile.green.hover:hover:not(.secondary) .tie_description, .tile.green.active:not(.secondary) .tile_description {
        background-color: var(--green);
        color: white;
    }

    /* Alternate tile design */
    .tile.secondary .tile_title {
        background-color: var(--grey);
    }

    .tile.secondary.blue .tile_title {
        background-color: var(--blue);
        color: white;
    }

    .tile.secondary.green .tile_title {
        background-color: var(--green);
        color: white;
    }
    .tile.secondary.hover:hover .tile_title, .tile.secondary.active .tile_title {
        background-color: var(--greydark);
        color: white;
    }

    .tile.secondary.blue.hover:hover .tile_title, .tile.secondary.blue.active .tile_title {
        background-color: var(--bluelight);
    }

    .tile.secondary.green.hover:hover .tile_title, .tile.secondary.green.active .tile_title {
        background-color: var(--greenlight);
    }

    /* Small Tile Design */
    .tile.small {
        min-width: 50px;
        max-width:80px;
        background: var(--greylight);
        border-radius: 3px;
        margin-bottom: 5px;
        display: inline-block;
        margin-right: 5px;
    }
        .tile.small .tile_title {
            font-size: 1.3rem;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }

    /* Badge Tile Design */
    .badge{
        display:inline-block;
        border-radius:3px;
        background-color:var(--greydark);
        padding:3px 5px;
        color:white;
        font-weight:bold;
        font-size:1.1rem;
    }
    .badge.blue{
        background-color:var(--blue);
    }
    .badge.green{
        background-color:var(--green);
    }
    .badge.yellow{
        background-color:var(--yellowalternate);
        color:black;
    }
    .badge.red{
        background-color:var(--reddark);
    }


@media (min-width: 992px) {
}





/*Alerts*/

div.alert_container {
    padding: 0;
    margin: 0;
}
.alert_container .alert_wrapper{
    margin-right:4px;
}

    /*Option 1*/
div.alert.active {
    position: fixed;
    top: 45px;
    right: 15px;
    align-items: center;
    vertical-align: middle;
    animation: slide_left 0.5s;
    transform: translateX(0);
    color: #eee;
    font-size: 1.3rem;
    padding: 14px 20px;
    border-radius: 3px;
    min-width: 300px;
    max-width: 500px;
    display: flex;
    justify-content: space-between;
    z-index: 9999;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}


/*Option 2 slides down from top*/
/*div.b2g-alert.active {
    position: absolute;
    top: 0;
    width: 100vw;
    vertical-align: middle;
    
    opacity: 1;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    animation: slide_down 1s ease forwards;
    margin-bottom: 10px;
    z-index: 10;
}*/

div.alert {
    display: none;
}


.alert.active.success {
    background: green;
}

.alert.active.error {
    background: var(--reddark);
}

.alert.active.warning {
    background: var(--yellow);
    color: black;
}

.alert.active.info {
    background: var(--blue);
}

.alert.active.default {
    background: #e0e0e0;
    color: black;
}

div .alert_wrapper span.fa {
    vertical-align: middle;
    margin-right: 5px;
}

div .alert_wrapper span.alert_message {
    vertical-align: middle;
    font-size: 1.3rem;
}

.alert span.fa {
    font-size: 1.4rem;
}

.alert span.fa-times-circle {
    cursor: pointer;
}

.warning-bar {
    padding: 10px;
    border-radius: 3px;
    color: var(--black);
    border: 1px solid var(--greydark);
    background-color:var(--greylight);
}
    .warning-bar.danger, .warning-bar.red {
        border: 1px solid red;
        background-color: var(--redlight);
    }

/*
.b2g-button-group ul li {
    list-style: none;
}
*/


@media (min-width: 576px) {
}

@media (min-width: 768px) {
    
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {
}



@media (min-width: 576px) {
  
}

@media (min-width: 768px) {
    /*
    div.b2g-btn-text {
        opacity: 0;
    }
    .b2g-nav-row li{
        display: block;
    }
    */
}
@media (min-width: 992px) {
    
}

@media (min-width: 1200px) {
   
}


/* Popup alerts / confirm*/
.popup_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    font-family: inherit;
    overflow: hidden;
    background-color:rgba(0,0,0,.2);
    padding-top:20%;
}

    .popup_container .popup {
        width:50%;
        background: white;
        border-radius: 3px;
        position: relative;
        outline: none;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        border:1px solid var(--greydark);
    }
        .popup_container .popup .popup_title{
            padding:15px 15px 5px 15px;
            font-size:1.4rem;
        }
        .popup_container .popup .popup_content {
            padding: 5px 15px;
            background-color: white;
        }
        .popup_container .popup .popup_button_box {
            padding: 5px 15px 15px 15px;
            background-color: white;
        }
        .popup_container .popup .popup_button_box .button:not(:last-child){
            margin-right:10px;
        }

@media (min-width: 768px) {

    .popup_container .popup {
        width:35%;
    }
}
@media (min-width: 992px) {
    .popup_container .popup {
        width: 35%;
    }
}

/* Forms */
.b2g-input-container.invalid input, .b2g-input-container.invalid select, .b2g-input-container.invalid textarea {
    /*border-left: 2px solid var(--reddark);*/
    background-color: var(--redlight);
}
.b2g-input-validate-container {
    /*padding:5px;*/
    padding-left: 5px;
    font-weight: bold;
}

    div[id^=b2g-input-validate-error]{
        color:var(--reddark);
        font-size:1.2rem;
    }

.b2g-input-container {
    
}

.b2g-input-container .b2g-input {
    padding: 6px 3px;
    font-size: 1.4rem;
    font-family: 'Open Sans';
    margin-bottom: 3px;
}
input.b2g-input[type=checkbox], input.b2g-input[type=radio] {
    width:initial;
    vertical-align:text-top;
}
.b2g-input-container label{
    vertical-align:top;
}
.b2g-input-container input.b2g-input, .b2g-input-container select.b2g-input, .b2g-input-container textarea.b2g-input{
    border-radius:2px;
}

.b2g-input-container input[type=text].b2g-input, .b2g-input-container textarea.b2g-input {
    width: 100%;
}

.b2g-input-container select.b2g-input option{
    font-weight:bold;
}

.b2g-input-container input[type=file].b2g-input {
    width: 100%;
    padding:10px;
}

.b2g-input-container label.file-upload-label{
    width: 100%;
    padding: 10px;
}



.b2g-input-container textarea.b2g-input{
    width:100%;
    min-height:75px;
}

.b2g-input-container .b2g-input-help-text {
    color: var(--greydark);
    font-size: 80%;
}

.b2g-input-container input.b2g-input.datepicker, .b2g-input-container input.b2g-input.datetimepicker, .b2g-input-container input.b2g-input.timepicker{
    max-width:200px;
}

.b2g-input-container .radio_button_large, .b2g-input-container .checkbox_large {
    padding-left: 27px;
    text-indent: -27px;
    margin-bottom: 5px;
}

    .b2g-input-container input[type=checkbox].large, .b2g-input-container input[type=radio].large {
        transform: scale(1.5);
        -ms-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        padding: 5px;
        margin: 4px 8px 4px 4px;
    }

.b2g-input-container .ms-parent{
    width:100%;
}

::placeholder, ::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #BBBBBB;
    opacity: 1; /* Firefox */
    font-family: 'Open Sans';
    font-weight:normal;
}

@media (min-width: 768px) {
    /*.b2g-input-container input[type=text].b2g-input {
        width: 75%;
    }
    .b2g-input-container input.b2g-input.datepicker, .b2g-input-container input.b2g-input.datetimepicker, .b2g-input-container input.b2g-input.timepicker {
        width: 25%;
    }*/
}

@media (min-width: 992px) {
    /*.b2g-input-container input[type=text].b2g-input {
        width: 50%;
    }*/

    .tabulation_grid .b2g-input-container {
        width: 100% !important;
    }
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #BBBBBB;
    font-family: 'Open Sans';
    font-weight: normal;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #BBBBBB;
    font-family: 'Open Sans';
    font-weight: normal;
}

/* Footer */
#footer{
    padding:10px;
}




/* Misc. */
.b2g_collapse{}
.b2g_collapse .b2g_collapse_indicator {
    float:right;
    cursor:pointer;
    font-size:75%;
    color:var(--greydark);
}



/* Busy Box Styling */
#BusyBoxDiv {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5); /*JTS*/
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
}

    #BusyBoxDiv img {
        display: block;
        width: 150px;
        height: 150px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -75px 0 0 -75px;
        overflow: hidden;
        pointer-events: none;
    }

/* HTML supported  TOOLTIPS --  IN PROGRESS */

/*
.b2g_tooltip_text{
    display:none;
}


.b2g-tooltip {
    position: relative;
    border-bottom: 1px dotted black;
}

    .b2g-tooltip:hover {
        cursor: pointer;
    }

    .b2g-tooltip .b2g-tooltip-text {
        visibility: hidden;
        padding: 5px 4px;
        min-width: 30px;
        max-width: 300px;
        background-color: var(--greydark);
        color: var(--white);
        text-align: center;
        border-radius: 6px;
        font-size: .9rem;
        position: absolute;
        z-index: 1;
        display:block;
    }

        .b2g-tooltip .b2g-tooltip-text.left {
            right: 5px;
        }

    .b2g-tooltip:hover .b2g-tooltip-text {
        visibility: visible;
    }
    */


/* CSS only  TOOLTIPS */
[data-tooltip] {
    position: relative;
    cursor: pointer;
    text-transform: initial;
}
[data-tooltip].underline{
    border-bottom: 1px dotted black;
}
    /* Positioning and visibility settings of the tooltip */
    [data-tooltip]:before,
    [data-tooltip]:after {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        left: 50%;
        bottom: calc(100% + 5px);
        pointer-events: none;
        transition: 0.1s;
        will-change: transform;
    }

    /* The actual tooltip with a dynamic width */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        padding: 5px 4px;
        min-width: 30px;
        max-width: 300px;
        width: max-content;
        width: -moz-max-content;
        border-radius: 3px;
        font-size:1rem;
        background-color: var(--greydark);
        background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44));
        box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
        color: var(--white);
        text-align: center;
        transform: translate(-50%, -5px) scale(0.5);
    }

    /* Tooltip arrow */
    [data-tooltip]:after {
        content: '';
        border-style: solid;
        border-width: 5px 5px 0px 5px;
        border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
        transition-duration: 0s; /* If the mouse leaves the element, 
                                the transition effects for the 
                                tooltip arrow are "turned off" */
        transform-origin: top; /* Orientation setting for the
                                slide-down effect */
        transform: translateX(-50%) scaleY(0);
    }

    /* Tooltip becomes visible at hover */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        visibility: visible;
        opacity: 1;
    }
    /* Scales from 0.5 to 1 -> grow effect */
    [data-tooltip]:hover:before {
        transition-delay: 0.3s;
        transform: translate(-50%, -5px) scale(1);
    }
    /* Slide down effect only on mouseenter (NOT on mouseleave) */
    [data-tooltip]:hover:after {
        transition-delay: 0.4s; /* Starting after the grow effect */
        transition-duration: 0.1s;
        transform: translateX(-50%) scaleY(1);
    }


/* LEFT */
/* Tooltip + arrow */
[data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after {
    left: auto;
    right: calc(100% + 5px);
    bottom: 50%;
}

/* Tooltip */
[data-tooltip-location="left"]:before {
    transform: translate(-5px, 50%) scale(0.5);
}

[data-tooltip-location="left"]:hover:before {
    transform: translate(-5px, 50%) scale(1);
}

/* Arrow */
[data-tooltip-location="left"]:after {
    border-width: 5px 0px 5px 5px;
    border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
    transform-origin: left;
    transform: translateY(50%) scaleX(0);
}

[data-tooltip-location="left"]:hover:after {
    transform: translateY(50%) scaleX(1);
}



/* RIGHT */
[data-tooltip-location="right"]:before,
[data-tooltip-location="right"]:after {
    left: calc(100% + 5px);
    bottom: 50%;
}

[data-tooltip-location="right"]:before {
    transform: translate(5px, 50%) scale(0.5);
}

[data-tooltip-location="right"]:hover:before {
    transform: translate(5px, 50%) scale(1);
}

[data-tooltip-location="right"]:after {
    border-width: 5px 5px 5px 0px;
    border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
    transform-origin: right;
    transform: translateY(50%) scaleX(0);
}

[data-tooltip-location="right"]:hover:after {
    transform: translateY(50%) scaleX(1);
}



/* BOTTOM */
[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
    top: calc(100% + 5px);
    bottom: auto;
}

[data-tooltip-location="bottom"]:before {
    transform: translate(-50%, 5px) scale(0.5);
}

[data-tooltip-location="bottom"]:hover:before {
    transform: translate(-50%, 5px) scale(1);
}

[data-tooltip-location="bottom"]:after {
    border-width: 0px 5px 5px 5px;
    border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
    transform-origin: bottom;
}





/* list page pagination container */
.pagination-container {
    font-size: 80%;
    color: #999999;
    margin-top: -25px;
}

    .pagination-container ul {
        list-style-type: none;
        padding-left: 0;
    }

        .pagination-container ul li {
            display: inline-block;
            padding: 5px;
        }

.b2g-input-container.autocomplete {
    position: relative;
    text-align:left;
}
.b2g-input-container .autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
}
    .b2g-input-container .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: var(--white);
        border-bottom: 1px solid var(--grey);
    }
    .b2g-input-container .autocomplete-items div:hover {
        background-color: var(--greylight);
    }
    .b2g-input-container .autocomplete-items div.active {
        background-color: var(--greylight);
    }

/* END AUTOCOMPLETE */

                .pagination-container ul li.PagedList-pageCountAndLocation a:hover {
                    color: #999999;
                }

    .pagination-container a {
    }

        .pagination-container a:visited {
            color: #000099;
        }

.b2g-input-container.autocomplete {
    position: relative;
    text-align: left;
}

.b2g-input-container .autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
}

    .b2g-input-container .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: var(--white);
        border-bottom: 1px solid var(--grey);
    }

        .b2g-input-container .autocomplete-items div:hover {
            background-color: var(--greylight);
        }

        .b2g-input-container .autocomplete-items div.active {
            background-color: var(--greylight);
        }

/* Drag and Drop */
input[type=file].dragdrop {
    /*display:none;*/
    padding: 20px 40px;
    border: 2px dashed #e3e3e3 !important;
}

input[type=file].dragover {
    border: 2px dashed #42EB50 !important;
    background: #e3e3e3 !important;
}

div.dragdrop {
    background-color: #CCFFCC;
    border: 1px dashed #555;
    height: 10rem;
    color: black;
    text-align: center;
    vertical-align: middle;
    font-size: 1.3rem;
    font-family: 'Open Sans';
    font-weight: bold;
    line-height: 10rem;
}

div.dragover {
    background-color: #009900;
    color: white;
}
/* END AUTOCOMPLETE */

/*
button.b2g-tile-button {
    position: relative;
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 2px 1px 2px lightgray;
    width: 100%;
    height: 50px;
    transition: 0.4s;
    text-align: left;
    color: #1F4788;
    font-weight: bold;
    font-size: 1.3rem;
}

    button.b2g-tile-button span {
        float: right;
        color: #777;
        margin-top: 3px;
    }
    button.b2g-accordion-button:after {
        font-family: FontAwesome;
        content: '\f067'; 
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 8px;
    }
    button.b2g-tile-button:focus {
        outline: none;
    }
    
div.panel {
    padding: 0 18px;
    background-color: #fafafa;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in;
    opacity: 0;
}

    div.panel.show {
        opacity: 1;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        max-height: 500px;
    }

*/