﻿/**************************************
    Global_2 Start
**************************************/
/**To avoid unwanted vertical scroll bar in Chrome, Firefox and Edge**/
form {    
    margin-bottom: 0em;
}

/*1. BANNER */
.banner {
    background: #009ee5;
    height: 65px;
}

    .banner img {
        width: auto;
        height: auto;
        max-height: 49px;
        padding: 15px 10px;
        float: left;
        position: absolute;
    }

        .banner img.starnik {
            height: 34.5px !important;
        }

img[id$=imgLogo] {
    display: block;
    margin: 0 auto;
}

.company-name {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    position: relative;
    top: 15px;
}

    .company-name span {
    }

/*2. PAGE HEADER */
.page_header {
    text-align: center;
}

    .page_header td {
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 15px !important;
        font-weight: bold;
        color: #000000;
    }

    .page_header img {
        float: right;
    }

/*3. BODY */
body {
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
}

    body * {
        font-family: Arial;
        color: #000000;
        font-size: 12px;
    }

/*4. MENU */
/* Menu CSS in the menu*.css */

/*5. PAGE CONTAINER */
.page-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.fixed-width-page-container {
    width: 1000px;
}

/*6 Header */
.Header1 {
    font-size: 16px;
    font-weight: bold;
}

.Header2 {
    font-size: 15px !important;
    font-weight: bold;
    color: #d0021b;
}

.pagesubheader {
    font-weight: bold;
}

.pagesubheader1 {
    text-decoration: underline;
}


.boxHelpText {
    font-style: italic;
}
/*7. TEXTAREA, TEXTBOX AND DROP DOWN LIST */
/*8. TEXTBOX */
/*9. DROP DOWN LIST */
/*10. LISTBOX */
input[type=text], input[type=password], select, textarea, select[multiple=multiple], input[type=number] {
    /** This is for the Textbox, drop down list and multiline textboxes **/
    display: inline-block;
    width: 100%;
    height: 27px;
    padding: 4px 6px;
    line-height: 1.4285;
    font-size: 12px;
    background-color: #fff;
    background-image: none;
    border: solid 1px #009ee5;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.required {
    border: solid 1px #d0021b !important;
    box-shadow: none;
}

textarea.required {
    border: solid 1px transparent !important;
    box-shadow: 0 0 0 1px #d0021b;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #9b9b9b;
}

textarea { /** Multiline text box **/
    height: auto;
    overflow: auto;
    border: solid 1px transparent;
    box-shadow: 0 0 0 1px #009ee5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    scrollbar-base-color: #fbfbfb;
    scrollbar-face-color: #f3f3f3;
}


select[multiple=multiple] {
    scrollbar-base-color: #fbfbfb;
    scrollbar-face-color: #f3f3f3;
    border: solid 1px transparent;
    box-shadow: 0 0 0 1px #009ee5;
}

input[type=file] {
    width: 100%;
    background: none;
    cursor: pointer;
    /**To display the border for file uploader control in Chrome**/
    -webkit-border-end: solid 1px #009ee5;
    -webkit-border-before: solid 1px #009ee5;
    -webkit-border-after: solid 1px #009ee5;
}

    input[type=file]::-ms-value {
        border: 0px;
        background-color: #fff;
        float: right;
        border: solid 0.01px #009ee5;
    }

    input[type=file]::-ms-browse {
        display: inline-block;
        padding: 6px 12px;
        margin: 0 5px;
        font-weight: bold;
        line-height: 1.42857143;
        letter-spacing: 0.5px;
        color: #ffffff;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        font-size: 12px;
        background-image: none;
        background-color: #6a4889;
        border: 1px solid transparent;
        border-radius: 7px;
        -webkit-transition: .3s;
        transition: .3s;
    }

    /**file uploader - Browse button css for Chrome**/
    input[type=file]::-webkit-file-upload-button {
        display: inline-block;
        padding:6px 12px;
        font-weight: bold;        
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;        
        color: #ffffff;
        cursor: pointer;        
        background-image: none;
        background-color: #6a4889;
        border: 1px solid transparent;       
        width: 90px;
        text-indent: -5px;                
    }    
 
/**file uploader css for firefox**/    
@-moz-document url-prefix() {
    input[type=file]{
        vertical-align: middle;
        cursor: pointer;       
        background-image: none;
        border: 1px solid #009ee5;         
        height:25px;
    }
    select option {
    height: 15.5px !important;
    }
    select[multiple=multiple] option {
    height: 15.3px !important;
}
}

input[type=text]::-ms-expand, select::-ms-expand, textarea::-ms-expand {
    /** This is for the design of the drop down list and multiline expand button **/
    background-color: transparent;
    border: 0;
}

input[type=text][disabled], select[disabled], input[type=text][readonly], select[readonly], textarea[disabled] {
    background-color: #eee;
    opacity: 1;
    cursor: not-allowed;
}

/*11. RADIO BUTTON */
/*12. CHECKBOX  */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    background-color: #ffffff;
    border: 0px;
    cursor: pointer;
    clear: none;
    outline: 0.02px solid;
    outline: auto -webkit-focus-ring-color;
    outline-color: #4a90e2;
    vertical-align: middle;
    display: inline-block;
}

    input[type="checkbox"] ~ label {
        vertical-align: middle;
        clear: both;
        text-align: left;
        display: inline;
    }

    input[type="checkbox"]:before {
        -webkit-appearance: none;
        -moz-appearance: none;
        clear: none;
        background-color: #ffffff;
        content: '';
        display: block;
        border: 0px;
        position: relative;
        
   }

    input[type="checkbox"]:checked:before {
        -webkit-appearance: none;
        -moz-appearance: none;
        content: '\002714';
        margin-left: 3px;
        margin-top: 1px;
        width: 13px;
        height: 10px;
        font-size: 11px;
    }

    input[type="checkbox"]:not(:checked) :before {
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #ffffff;
    }

    input[type="radio"][disabled], input[type="checkbox"][disabled] {
        cursor: not-allowed;
    }

/*13. BUTTON */
input[type=button], input[type=submit], a[class^=btn] {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 5px;
    font-weight: bold;
    line-height: 1.42857143;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    font-size: 12px;
    background-image: none;
    background-color: #868586;
    border: 1px solid transparent;
    border-radius: 7px;
    -webkit-transition: .3s;
    transition: .3s;
    text-decoration: none;
}

    input[type=button]:hover, input[type=submit]:hover, a[class^=btn]:hover {
        /* border-radius: 0px; */
    }

        input[type=button]:hover:after, input[type=submit]:hover:after, a[class^=btn]:hover:after {
            width: 0%;
        }

    input[type=button][disabled], input[type=submit][disabled], a[class^=btn][disabled] {
        cursor: not-allowed;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }

.btn-delete, .btn-reset {
    background-color: #ff4848 !important;
    border-color: #ff4848 !important;
}

.btn-search, .btn-confirm {
    background-color: #4a90e2 !important;
    border-color: #4a90e2 !important;
}

.btn-cancel {
    background-color: #868586 !important;
    border-color: #868586 !important;
}

.btn-apply, .btn-mathsign {
    background-color: #890ff3 !important;
    border-color: #890ff3 !important;
}

.btn-openpopup, .btn-next, .btn-addnew, .btn-retry, .btn-sync, .btn-ready, .btn-gather, .btn-Archive {
    background-color: #fca518 !important;
    border-color: #fca518 !important;
}

.btn-openpopup, .btn-next, .btn-retry, .btn-sync, .btn-ready, .btn-gather, .btn-estimate, .btn-preview, .btn-addnew, .btn-alert, .btn-import, .btn-send, .btn-reverse, .btn-Archive {
    color: #000000 !important;
}

.btn-openpopup, .btn-next {
    padding: 5px 10px !important;
}

.btn-download, .btn-upload, .btn-runreport, .btn-runbackendreport, .btn-view, .btn-print, .btn-export {
    background-color: #0d7a62 !important;
    border-color: #0d7a62 !important;
}

.btn-export, .btn-print, .btn-runreport, .btn-delete, .btn-cancel {
    color: #ffffff !important;
}

.btn-close, .btn-preview, .btn-inactive {
    background-color: #ffffff !important;
}

.btn-close, .btn-inactive {
    border-color: #7c7c7c !important;
    color: #7c7c7c !important;
}

.btn-preview {
    border: solid 0.8px #444444 !important;
}

.btn-back {
    background-color: #f77080 !important;
    border-color: #f77080 !important;
}

.btn-moveup, .btn-movedown, .btn-alert, .btn-check, .btn-refresh, .btn-estimate, .btn-import, .btn-send, .btn-changeout, .btn-addfavorite {
    background-color: #ffba00 !important;
    border-color: #ffba00 !important;
}

.btn-rollback {
    background-color: #8b1a09 !important;
    border-color: #8b1a09 !important;
}

.btn-rapidmoveout {
    background-size: 18px 18px !important;
    padding: 0 !important;
    background-image: url(../image/rapidmoveout.jpg) !important;
    padding-bottom: 4px !important;
    background-repeat: no-repeat !important;
    padding-right: 18px !important;
    padding-bottom: 18px !important;
    cursor: hand !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.btn-clone, .btn-setup {
    background-color: #00BE93 !important;
    border-color: #00BE93 !important;
}

.btn-save, .btn-update, .btn-updatefavorite, .btn-saveandnew, .btn-updateandnew, .btn-yes, .btn-run, .btn-calculate, .btn-select {
    background-color: #5fac07 !important;
    border-color: #5fac07 !important;
}

.btn-no {
    background-color: #fff !important;
    color: #4a90e2 !important;
    border-color: #4a90e2 !important;
}

.btn-interface {
    background-color: #BDE5F8 !important;
    color: #00529B !important;
    border-color: #BDE5F8 !important;
}

.btn-exclude {
    background-color: #00ffff !important;
    color: #000000 !important;
    border-color: #00ffff !important;
}

.btn-moveleft, .btn-moveright {
    height: 25px !important;
    width: 46px !important;
    padding: 0px !important;
    border: none !important;
    border-radius: 0px !important;
    background: none !important;
    background-repeat: no-repeat !important;
    background-size: 46px 25px !important;
}

.btn-moveright {
    background-image: url(../image/double-forward-button.png) !important;
    margin-bottom: 5px !important;
}

.btn-moveleft {
    background-image: url(../image/double-back-button.png) !important;
    margin-top: 5px !important;
}

.btn-moveup, .btn-movedown, .btn-check, .btn-transparent, .btn-changeout, .btn-addfavorite, .btn-refresh {
    color: #000000 !important;
}

.btn-moveup, .btn-movedown {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}

.btn-reverse {
    background-color: #eb9201 !important;
    border-color: #eb9201 !important;
}

.btn-transparent {
    background-color: transparent !important;
    border: none;
    font-weight: normal !important;
    width: 100%;
}

.btn-importreset {
    background-color: #ffffff !important;
    border: solid 0.8px #ff4848 !important;
    color: #ff4848 !important;
}

.btn-addnewImage, .btn-deleteImage, .btn-editImage, .btn-downloadImage, .btn-addressImage {
    background: none !important;
    width: 22px !important;
    height: 22px !important;
}

.btn-large {
    font-size: 18px !Important;
}

/*14. HYPERLINK */

a {
    color: #033b7e;
    text-decoration: underline;
    cursor: pointer;
}

    a:link {
        color: #033b7e;
    }

    a:hover {
    }

    a:visited {
        color: #10a1e3;
    }

    a:active {
    }

/*15. FIELDSET */
fieldset {
    border: solid 1px #4a90e2;
}

/*16. LEGEND */
legend {
    font-weight: bold;
    text-align: left;
}

    legend .tips {
        padding-left: 10px;
        font-weight: normal;
        font-style: italic;
    }

/*17. TABLE */
table {
    border-collapse: collapse;
    width: 100%;
}

    table tr th {
    }

    table tr td {
        border: 0;
    }

/*18. FORM CONTROL CONTAINER */
.from-control-container, .form-control-container {
    max-width: 100%;
}

    .from-control-container > thead > tr > th, .from-control-container > tbody > tr > th, .from-control-container > tfoot > tr > th, .from-control-container > thead > tr > td, .from-control-container > tbody > tr > td, .from-control-container > tfoot > tr > td,
    .form-control-container > thead > tr > th, .form-control-container > tbody > tr > th, .form-control-container > tfoot > tr > th, .form-control-container > thead > tr > td, .form-control-container > tbody > tr > td, .form-control-container > tfoot > tr > td {
        padding-bottom: 5px;
        padding-left: 5px;
        line-height: 1.42857143;
    }

    .from-control-container > thead > tr > th, .form-control-container > thead > tr > th {
        vertical-align: bottom;
    }

/*19. GRID */
.grid, .tableAlt {
    margin: 0 auto;
    border-collapse: collapse;
    border: 0px;
    font-size: 12px;
}

.Grid_Header {
    text-align: center;
    background-color: #d7e6f3;
    font-weight: bold;
    color: #000000;
    border: solid 1px #dddddd;
}

.Grid_Header_WithoutBorder {
    background-color: #d7e6f3;
    font-weight: bold;
    color: #000000;
    border: solid 1px #dddddd;
}

.Grid_Header, .Grid_Header_WithoutBorder {
    border: 0px;
}

    .Grid_Header > td, .Grid_Header > th {
        padding: 5px;
        background-color: #d7e6f3;
        font-weight: bold;
        border: solid 1px #999999;
    }
    .Grid_Header_WithoutBorder > td, .Grid_Header_WithoutBorder > th {        
        padding: 5px;
        background-color: #d7e6f3;
        font-weight: bold;
    }

.Grid_SubHeader > td, .Grid_SubHeader1 > td {
    font-weight: bold;
    border: solid 1px #999999;
}

.Grid_SubHeader1 > td {
    padding: 5px;
}

.Grid_Footer {
    text-align: center;
    background-color: #d7e6f3;
    font-weight: bold;
    color: #000000;
}

    .Grid_Footer > td {
        padding: 5px;
        font-weight: bold;
        background-color: #d7e6f3;
        border: solid 1px #999999 !important;
    }

.Grid_Item, .Grid_Item_WithoutBorder, .tableAlt tr:nth-child(odd) {
    background-color: #ffffff;
}

    .Grid_Item > td, .Grid_Alt > td, .tableAlt tr {
        border: solid 1px #999999;
        padding: 5px;
    }

    .Grid_Item_WithoutBorder > td, .Grid_Alt_WithoutBorder > td {
        border-bottom: solid 1px #c7c7c7;
        padding: 7px 5px 7px 5px;
    }

.Grid_Alt, .Grid_Alt_WithoutBorder, .tableAlt tr:nth-child(even) {
    background-color: #eeeeee;
}

    .Grid_Item input[type=text], .Grid_Alt input[type=text], .Grid_Item select, .Grid_Alt select, .Grid_Footer input[type=text], .Grid_Footer select, .Grid_SubHeader1 input[type=text], .Grid_SubHeader1 select, .Grid_SubHeader input[type=text], .Grid_SubHeader select {
        height: 25px;
        padding: 3.5px 6px;
    }

.grid .highlightedText {
    font-weight: bold;
    font-size: 13px;
}

.Grid_BillingProcessUtilityFooter {
    vertical-align: top;
    border: solid 1px #999999 !important;
}

    .Grid_BillingProcessUtilityFooter > td {
        border: solid 1px #999999 !important;
        padding: 5px;
    }

.Grid_SubTotal {
    background-color: #dff2bf;
    font-size: 15px !important;
}
    .Grid_SubTotal > td {
        padding: 10px 5px 10px 5px;
        border: solid 1px #999999;
    }

    .Grid_SubTotal * {
        font-size: 15px !important;
        font-weight: bold;
    }

/**/
.grid_inputcolumns {
    margin: 0 auto;
    border-collapse: collapse;
    border: 0px;
    font-size: 12px;
}

    .grid_inputcolumns .Grid_Header {
        text-align: center;
        background-color: #d7e6f3;
        font-weight: bold;
        color: #000000;
        border: solid 1px #999999;
    }

    .grid_inputcolumns .Grid_Header {
        border: 0px;
    }

        .grid_inputcolumns .Grid_Header td {
            padding: 15px 0;
            background-color: #d7e6f3;
            font-weight: bold;
            border: solid 1px #999999 !important;
        }


    .grid_inputcolumns .Grid_Footer {
        text-align: center;
        background-color: #d7e6f3;
        font-weight: bold;
        color: #000000;
    }

    .grid_inputcolumns .grid_inputcolumns .Grid_Footer td {
        padding: 15px 0;
        font-weight: bold;
        background-color: #d7e6f3;
        border: solid 1px #d7e6f3 !important;
    }

    .grid_inputcolumns td, .grid_inputcolumns .grid_inputcolumns th, .grid_inputcolumns .Grid_Alt, .grid_inputcolumns .Grid_Alt td, .grid_inputcolumns .Grid_Item, .grid_inputcolumns .Grid_Item td, .grid_inputcolumns .Grid_Header, .grid_inputcolumns .Grid_Header th, .grid_inputcolumns .Grid_Header td, .grid_inputcolumns .Grid_Alt th, .grid_inputcolumns .Grid_Item th {
        border-collapse: collapse;
        border: 0px;
        padding: 5px;
    }

        .grid_inputcolumns .Grid_Item > td, .grid_inputcolumns .Grid_Alt > td {
            border: solid 1px #999999;
            padding-left: 13px;
            padding-right: 13px;
        }


    .grid_inputcolumns .Grid_Item {
        background-color: #dddddd;
        border: solid 1px #dddddd !important;
    }

    .grid_inputcolumns .Grid_Alt {
        background-color: #dddddd;
        border: solid 1px #dddddd !important;
    }

        .grid_inputcolumns .Grid_Item input[type=text], .grid_inputcolumns .Grid_Item select, .grid_inputcolumns .Grid_Alt input[type=text], .grid_inputcolumns .Grid_Alt select {
            height: 25px;
            border: 0;
            padding: 3.5px 6px;
        }

        .grid_inputcolumns .Grid_Item textarea, .grid_inputcolumns .Grid_Alt textarea {
            border: 0;
            box-shadow: 0px 0px 0px 0px;
        }

.grid_billingsetup {
    margin: 0 auto;
    border-collapse: collapse;
    border: 0px;
    font-size: 12px;
    background-color: #ffffff !important;
}

    .grid_billingsetup .Grid_Header {
        text-align: center;
        font-weight: bold;
        color: #000000;
        border: solid 1px #999999;
    }

        .grid_billingsetup .Grid_Header > td {
            background-color: #d7e6f3;
            padding: 10px 20px;
            font-weight: bold;
            border: 0px !important;
            height: 38px;
        }


    .grid_billingsetup .Grid_Footer {
        text-align: center;
        font-weight: bold;
        color: #000000;
    }

        .grid_billingsetup .Grid_Footer td {
            padding: 15px 0;
            font-weight: bold;
        }

    .grid_billingsetup td, .grid_billingsetup .grid_inputcolumns th, .grid_billingsetup .Grid_Alt, .grid_billingsetup .Grid_Alt td, .grid_billingsetup .Grid_Item, .grid_billingsetup .Grid_Item td, .grid_billingsetup .Grid_Alt th, .grid_billingsetup .Grid_Item th {
        border-collapse: collapse;
        padding: 5px;
    }

        .grid_billingsetup .Grid_Item > td, .grid_billingsetup .Grid_Alt > td {
            padding-left: 10px;
            padding-right: 10px;
        }

    .grid_billingsetup .Grid_Item {
        border: solid 1px #999999;
        background-color: #ffffff;
    }

    .grid_billingsetup .Grid_Alt {
        border: solid 1px #999999;
        background-color: #ffffff;
    }

        .grid_billingsetup .Grid_Item input[type=text], .grid_billingsetup .Grid_Item select, .grid_billingsetup .Grid_Alt input[type=text], .grid_billingsetup .Grid_Alt select {
            height: 25px;
            padding: 3.5px 6px;
        }

/*20. FORM-GROUP */
.form-group {
    margin-right: 10px;
}

    .form-group label, .form-group span {
        text-align: left;
    }

    .form-group .labelHeader {
        font-weight: bold;
        font-size: 16px;
    }

/*21. SEARCH BOX */
.searchbox {
    border-radius: 5px;
    border: 1px solid #999999 !important;
    background-color: #d7e6f3;
    padding: 10px 20px;
    margin-bottom: 10px;
}

    .searchbox .fieldset {
        background-color: #fff;
        border: 1px solid #999999 !important;
    }

    .searchbox .showhide a {
        text-align: left;
        color: #033b7e;
    }

    .searchbox legend .tips {
        padding-left: 10px;
        font-weight: normal;
        font-style: italic;
        font-weight: bold !important;
    }

/*22. PAGINATION */
.pagination {
    margin: 2px 0 2px 0;
    width: auto;
}

    .pagination .nextbutton, .pagination .lastbutton, .pagination .previousbutton, .pagination .firstbutton {
        background-repeat: no-repeat;
        background-size: 45px 25px;
        height: 25px;
        width: 45px !important;
        font-weight: bolder;
    }

    .pagination .nextbutton {
        background-image: url(../image/single-forward-button.png);
    }

    .pagination .lastbutton {
        background-image: url(../image/double-forward-button.png);
    }

    .pagination .previousbutton {
        background-image: url(../image/single-back-button.png);
    }

    .pagination .firstbutton {
        background-image: url(../image/double-back-button.png);
    }

    .pagination tr {
        border: 0;
        margin: 0;
        padding: 0;
        font-size: 11px;
        list-style: none;
        margin-right: 2px;
    }

    .pagination a {
        border: solid 1px #ffba00;
        margin-right: 2px;
        height: 25px;
        text-align: center;
        vertical-align: middle;
        line-height: 25px;
        font-weight: bold;
        color: #777777;
        min-width: 25px;
    }

    .pagination .disable {
        border: solid 1px #DEDEDE;
        color: #888888;
        display: block;
        float: left;
        font-weight: bold;
        margin-right: 2px;
        background-color: #eee;
        opacity: 1;
        cursor: not-allowed;
    }

    .pagination .button {
        font-weight: bolder;
    }

    .pagination .active {
        background: #ffba00;
        color: #043385;
        font-weight: bold;
        display: block;
        float: left;
        height: 25px;
        text-align: center;
        vertical-align: middle;
        line-height: 25px;
        padding-right: 6px;
        padding-left: 6px;
        width: 25px;
        border: 1px solid #ffba00;
    }

    .pagination a:link, .pagination a:visited, .pagination a {
        color: #777777;
        display: block;
        float: left;
        font-weight: bold;
        /*padding: 6px 6px;*/
        text-decoration: none;
    }

    .pagination a:hover {
        border: solid 1px #0e509e;
    }

    .pagination .information {
        color: #009ee5;
        padding-right: 25px;
        padding-left: 0px;
        padding-top: 6px;
        font-weight: bold;
        font-style: italic;
        text-align: left;
        font-size: 12px;
        height: 25px;
    }

    .pagination input[type=text] {
        width: 40px !important;
        border-radius: 1px;
    }

    .pagination .gobtn {
        width: 40px !important;
        border-radius: 1px;
        font-weight: bold;
        text-align: center;
        color: #043385 !important;
    }

/*23. EASY NOTES */
.easynotes {
    background: #efefef;
    margin: 0 6px 5px 6px;
    padding: 10px;
    width: 97%;
    border-radius: 5px;
}

    .easynotes textarea {
        overflow: hidden;
        height: 37px;
    }

    .easynotes table {
        width: 100%;
    }

    .easynotes td.button {
        width: 63px;
    }

/*24. HELP BOX */
.helpbox {
    border: solid 1px #4a90e2;
    border-radius: 5px;
    padding: 10px 5px;
    background-color: #ffffff;
}

    .helpbox .header {
        font-weight: bold;
    }

    .helpbox .subheader {
        font-weight: bold;
    }

    .helpbox .content {
        font-style: italic;
    }

/*25 */
.status-box, .resident-status-box {
    background-color: #efefef;
    padding: 10px;
    margin: 0 7px 5px 7px;
    float: left;
    min-height: 95px;
    height: auto;
    width: 30%;
}

    .status-box .content, .resident-status-box .content {
        font-weight: bold;
    }

.information-box {
    background-color: #efefef;
    padding: 10px;
    margin: 0 7px 5px 7px;
    float: left;
    height: auto;
}

    .information-box:empty {
        display: none;
    }

    .information-box .content {
        font-weight: bold;
    }

    .information-box img, .information-box input[type=image] {
        width: 15px;
        height: 15px;
    }

/*26. Information Message */
/*27. Warning Message */
/*28. Success Message */
/*29. Information Message */
/*30. Validation Message */
.infoMessage, .warningMessage, .successMessage, .errorMessage, .validationMessage, .autohidesuccessMessage, .authideerrorMessage {
    border: 1px solid;
    /*margin: 10px 0px;*/
    padding: 10px 5px 10px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    text-align: left;
}

.infoMessageWithoutImage, .warningMessageWithoutImage, .successMessageWithoutImage, .errorMessageWithoutImage {
    border: 1px solid;   
    padding: 10px 5px 10px 12px;    
    text-align: left;
}

    .infoMessage .title, .infoMessageWithoutImage .title, .warningMessage .title, .warningMessageWithoutImage .title, .successMessage .title, .successMessageWithoutImage .title, .errorMessage .title, .errorMessageWithoutImage .title, .validationMessage .title {
        padding-bottom: 5px;
        font-size: 14px;
        font-weight: bold;
    }

.infoMessage {
    background-color: #BDE5F8;
    color: #000000;
    background-image: url(../image/info.png);
    border-radius: 5px;
    border: solid 1px #309fe2;
}

.infoMessageWithoutImage {
    background-color: #BDE5F8;
    color: #000000;   
    border-radius: 5px;
    border: solid 1px #309fe2;
}

    .infoMessage a, .infoMessage a:hover, .infoMessage a:visited, .infoMessageWithoutImage a, .infoMessageWithoutImage a:hover, .infoMessageWithoutImage a:visited {
        color: #000000;
        font-weight: bold;
    }

.successMessage, .autohidesuccessMessage {
    background-color: #DFF2BF;
    color: #000000;
    background-image: url(../image/success.png);
    border-radius: 5px;
    border: solid 1px #6cab26;
}

.successMessageWithoutImage {
    background-color: #DFF2BF;
    color: #000000;
    border-radius: 5px;
    border: solid 1px #6cab26;
}

    .successMessage a, .successMessage a:hover, .successMessage a:visited, .successMessageWithoutImage a, .successMessageWithoutImage a:hover, .successMessageWithoutImage a:visited {
        color: #000000;
        font-weight: bold;
    }

.warningMessage {
    background-color: #FEEFB3;
    color: #000000;
    border-radius: 5px;
    border: 1px solid #fca518;
    background-image: url(../image/warning.png);
}

.warningMessageWithoutImage {
    background-color: #FEEFB3;
    color: #000000;
    border-radius: 5px;
    border: 1px solid #fca518;   
}

    .warningMessage a, .warningMessage a:hover, .warningMessage a:visited, .warningMessageWithoutImage a, .warningMessageWithoutImage a:hover, .warningMessageWithoutImage a:visited {
        color: #000000;
        font-weight: bold;
    }

.errorMessage, .authideerrorMessage {
    background-color: #FFBABA;
    color: #000000;
    background-image: url(../image/error.png);
    border-radius: 5px;
    border: solid 1px #f8596c;
}
.errorMessageWithoutImage {
    background-color: #FFBABA;
    color: #000000;    
    border-radius: 5px;
    border: solid 1px #f8596c;
}

    .errorMessage a, .errorMessage a:hover, .errorMessage a:visited, .errorMessageWithoutImage a, .errorMessageWithoutImage a:hover, .errorMessageWithoutImage a:visited {
        color: #000000;
        font-weight: bold;
    }

.validationMessage {
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url(../image/error.png);
}

.autohidesuccessMessage, .authideerrorMessage, .autohideMessage {
    width: 50%;
    position: fixed;
    top: 2%;
    left: 25%;
    display: none;
}

    .autohidesuccessMessage:not(:empty), .authideerrorMessage:not(:empty), .autohideMessage:not(:empty) {
        display: block;
    }

.floating-message {
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    z-index: 1000;
    padding: 10px;
    padding-left: 50px;
}

/*29. LOGIN PAGE */
.loginpage {
    width: 100%;
    height: 100%;
}

    .loginpage .information {
        background-color: #009ee5;
        height: 100%;
        width: 50%;
        float: left;
    }

        .loginpage .information img {
            width: 100%;
        }


    .loginpage .logininfo {
        height: 100%;
        width: 50%;
        float: left;
    }

        .loginpage .logininfo .content {
            width: 100%;
        }

            .loginpage .logininfo .content .welcomemsg {
                font-size: 28px;
                letter-spacing: 0.6px;
                text-align: center;
                color: #009ee5;
            }

            .loginpage .logininfo .content .title {
                font-size: 20px;
                font-weight: normal;
                font-style: normal;
                font-stretch: normal;
                text-align: left;
                color: #4b5565;
            }

            .loginpage .logininfo .content .logintext {
                padding-bottom: 50px;
                padding-top: 10px;
                font-size: 16px;
                letter-spacing: 0.3px;
                text-align: center;
                color: #a3a3a3 !important;
            }

            .loginpage .logininfo .content .caption {
                color: #4b5565;
                font-size: 16px;
            }
            
            .loginpage .logininfo .content .helptext {
                color: #009ee5;
            }

            .loginpage .logininfo .content .largefont {
                font-size: 15px !important;
            }

            .loginpage .logininfo .content .textbox {
                border: solid 1px #d2d5d7;
                height: 40px;
                margin-top: 8px;
                margin-bottom: 8px;
            }

                .loginpage .logininfo .content .textbox:focus {
                    border-color: #66afe9;
                }


        .loginpage .logininfo input:-ms-input-placeholder {
            text-align: left;
            font-size: 14px;
        }

        .loginpage .logininfo input:-moz-placeholder {
            text-align: left;
            font-size: 14px;
        }

    .loginpage input[type=text] {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    .loginpage .btn-login {
        margin-left: 0px !important;
        background-color: #71d300 !important;
        border-color: #71d300 !important;
        height: 35px;
        color: #fff !important;
        font-weight: normal !important;
        padding-bottom: 6px !important;
        padding-top: 6px !important;
        text-transform: uppercase;
        border-radius: 3px !important;
    }


        .loginpage .btn-login:hover, .loginpage .btn-login:focus {
            font-weight: bolder !important;
        }

    .loginpage .logininfo .content .fslogin .caption {
        color: #4b5565;
        font-size: 18px !important;
    }

    .loginpage .fslogin .btn-login {
        margin-left: 0px !important;
        background-color: #71d300 !important;
        border-color: #71d300 !important;
        height: 35px;
        font-size: 18px;
        color: #fff !important;
        font-weight: bold !important;
        padding-bottom: 6px !important;
        padding-top: 6px !important;
        text-transform: uppercase;
        border-radius: 3px !important;
    }

    .loginpage .logininfo .content .fslogin .textbox {
        font-size: 18px !important;
    }

/*30. VALIDATOR */
.validator, span.validator span {
    color: #d0021b !important;
    font-weight: bold !important;
}

    .validator li {
        color: #d0021b !important;
        font-weight: bold !important;
    }

/*31. FOOTER */
.footer {
    background-position: center;
    vertical-align: middle;
    cursor: hand;
}

    .footer td {
        color: #a3a3a3 !important;
        font-weight: bold;
    }


    .footer .starniklogo {
        background-image: url(../image/starniklogo.jpg);
        background-size: 72px 16px;
        background-repeat: no-repeat;
        width: 80px;
        background-position-x: 5px;
        height: 20px;
    }

/*32. VOID TRANSACTION */
.Voidedtran_bg,.flaggedNotes_bg, .Voidedtran_bg_WithoutBorder {
    background-color: #f8e71c;
}

    .Voidedtran_bg td, .flaggedNotes_bg td{
        background-color: #f8e71c;
        border-collapse: collapse;
        padding: 5px;
        border: solid 1px #999999;
    }
    .Voidedtran_bg_WithoutBorder td {
        background-color: #f8e71c;
        border-collapse: collapse;
        padding: 7px 5px 7px 5px;
        border-bottom: solid 1px #c7c7c7;
    }

/*33. VOID TRANSACTION */
.pendingtran_bg, .pendingtran_bg_WithoutBorder {
    background-color: #b6b4b4;
}

    .pendingtran_bg td {
        background-color: #b6b4b4;
        border-collapse: collapse;
        padding: 5px;
        border: solid 1px #999999;
    }

    .pendingtran_bg_WithoutBorder td {
        background-color: #b6b4b4;
        border-collapse: collapse;
        padding: 7px 5px 7px 5px;
        border-bottom: solid 1px #c7c7c7;
    }

.Viewmoretransaction {
    background-color: #BDE5F8;
}
/*34 OPTIONAL COLUMNS*/
.optionalcolumns-border {
    display: block;
    border: 1px solid #999999;
    padding: 10px 20px;
    margin-bottom: 10px;
}

    .optionalcolumns-border legend .tips {
        padding-left: 10px;
        font-weight: normal;
        font-style: italic;
        font-weight: bold !important;
    }

/*NO WIDTH*/
.widthauto {
    width: auto !important;
}
/*NO HEIGHT*/
.heightauto {
    height: auto;
}
/*TEXT ALIGN*/
.aligncenter {
    text-align: center !important;
}

.alignleft {
    text-align: left !important;
}

.alignright {
    text-align: right !important;
}

.valign-top {
    vertical-align: top !important;
}

.valign-middle {
    vertical-align: middle !important;
}

.valign-bottom {
    vertical-align: bottom !important;
}

.contentcenter {
    margin-left: auto !important;
    margin-right: auto !important;
}

.nowrap {
    white-space: nowrap;
}

/*ALIGNMENT*/
.floatleft {
    float: left;
}

.floatright {
    float: right;
}

/**/
.billingProcessUtilityDays {
    padding-left: 10px;
    font-weight: bold;
    color: #ff4848;
}

.sortArrow {
    color: #333366;
    font-family: webdings;
    font-size: 1em;
    font-weight: bold;
}

/** TREE VIEW ***/
.treeview {
}

    .treeview table {
        width: auto;
    }

    .treeview a {
        text-decoration: underline;
    }

    .treeview img {
        padding-right: 5px;
    }

    .treeview td {
        padding-bottom: 5px;
    }

/* FORMDATA */
.formdata {
}

    .formdata label, .formdata .label {
        font-weight: normal;
    }

    .formdata .content {
        font-weight: bold;
    }

/* Password Strength */
.passwordStrength {
}

    .passwordStrength TD {
        color: #888 !important;
        font-size: 9px !important;
    }

    .passwordStrength DIV {
        display: inline-block;
        border: 1px solid #AAA;
        height: 6px;
        margin-right: .8em;
        width: 1.4em;
        overflow: hidden;
        vertical-align: top;
        background-color: transparent;
        *overflow: hidden;
        *display: inline;
    }

    .passwordStrength P {
        display: none;
        width: 25em;
        color: #888 !important;
        font-size: 9px !important;
    }

.setupBox {
    border: solid 1px #999999;
    background-color: #fafafa;
    padding: 10px;
}

    .setupBox .Displaycaption {
        font-size: 14px;
    }

    .setupBox .Displaycontent {
        font-size: 14px;
        font-weight: bold;
    }

.meteroutofservicedate_bg {
    background-color: #c0c0c0;
}

.systemsestimatedread_bg, .unconfirmedbills_bg, .paymentplanpastduebyallocateddatestatus_bg, .selecteddelinquencystep_bg, .newmeteroverlappingwitholdmeter_bg {
    background-color: #ffff00;
}

.manuallyestimatedread_bg, .outofservicedatelessthaninstallationdate_bg {
    background-color: #FF9900;
}

.meterstaticreading_bg {
    background-color: #F9966B;
}

.missingReadingorUsage_bg {
    background-color: #ff0000;
}

.staticMeter_bg {
    background-color: #99ff99;
}

.excludeResident_bg, .unconfirmedrevisedbills_bg, .priortoeffectivedate_bg {
    background-color: #00ffff;
}

input[type=checkbox].excludeResident_bg {
    outline: 5px solid #00ffff !important;
}

.activeworkorder {
    color: #ff0000;
}

.highlightext {
    color: #ff0000;
}

.no-gutter {
    margin: 0px !important;
}

.colorLegend {
    width: auto;
}

    .colorLegend .caption {
        font-weight: bold;
        padding-right: 10px;
    }

    .colorLegend .text {
        font-weight: normal;
        padding-right: 5px;
        padding-left: 5px;
    }

    .colorLegend .legend {
        width: 15px;
        height: 15px;
        border: solid 1px #000000;
    }

.noborder {
    border: none !important;
}

.noleftborder {
    border-left: none !important;
}

.norightborder {
    border-right: none !important;
}

.norightpadding {
    padding-right: 0px !important;
}

.noleftpadding {
    padding-left: 0px !important;
}

.notoppadding {
    padding-top: 0px !important;
}

.nobottompadding {
    padding-bottom: 0px !important;
}

.tile {
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3);
    border: solid 1px #999999;
    padding: 0px;
    margin: 5px;
    display: inline-block;
    max-width: 100px;
    cursor: pointer;
    min-width: 200px;
    min-height: 100px;
    vertical-align: top;
}

    .tile .title {
        display: block;
        font-size: 15px;
        color: #000;
        padding: 0px;
        padding-bottom: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 10px;
        margin-right: 10px;
        width: 100%;
    }

    .tile .description {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 10px;
        margin-right: 10px;
        color: #000;
    }

.dropablePlaceHolder {
    background-color: #999999;
    vertical-align: top;
    margin: 10px;
    margin-left: 0px;
    margin-right: 20px;
    padding: 10px 5px;
    max-width: 100px;
    display: inline-block;
    cursor: pointer;
    border: solid 1px #999999;
    min-width: 290px;
    min-height: 220px;
    border-radius: 3px;
}

    .dropablePlaceHolder .boxNumber {
        color: #FFFFFF;
        font-weight: bold;
        vertical-align: middle;
        text-align: center;
    }

.mappedtile {
    vertical-align: top;
    background-color: #fafafa;
    margin: 10px;
    margin-left: 0px;
    margin-right: 20px;
    padding: 10px 5px;
    max-width: 100px;
    display: inline-block;
    cursor: pointer;
    border: solid 1px #999999;
    min-width: 290px;
    min-height: 220px;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

    .mappedtile .container {
        margin: 5px;
    }

    .mappedtile input, .mappedtile textarea, .mappedtile select {
        width: 100%;
    }

    .mappedtile .text {
        display: block;
        font-weight: 500;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .mappedtile .description {
        display: block;
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: left;
    }

    .mappedtile .delete {
        border: none;
        Width: 20px;
        Height: 20px;
        float: right;
        vertical-align: top;
        margin-right: -15px;
        margin-top: -20px;
        z-index: 5;
    }

.info {
    color: #878787;
    font-style: italic;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.message, .message * {
    color: #d0021b !important;
}

.billeditem_bg, .mappedbillingfactor_bg, .collectionbycommunity_bg, .onlinepaymentNoTransactionId_bg {
    background-color: yellow;
}

.transferresident_bg, .confirmedbills_bg, .communitiesnotauthorized_bg {
    background-color: silver;
}

.stoppayment_bg {
    background-color: #FF5151;
}

.inactivecommunity_bg {
    background-color: #99CCFF;
}

.duplicatetransaction_bg {
    background-color: #FF8C00;
}

.autopayTransaction_bg {
    background-color: #abb2b9;
}

.suspenseAccountTransaction_bg {
    background-color: #06ed06;
}

.success_bg {
    background-color: #98FB98;
}

.error_bg {
    background-color: #FFBABA !Important;
}

.noworkorderitem_bg {
    background-color: #ff686e;
}

.allowedforedit_bg {
    background-color: orange;
}

.completed_bg {
    background-color: #7fff7f;
}

.running_bg {
    background-color: #fca518;
}

.open_bg {
    background-color: #bde5f8;
}

.completedwitherror_bg {
    background-color: #ff7f7f;
}

td.interface {
    background-color: #BDE5F8;
    color: #00529B;
}

    td.interface input {
        border: solid 1px #00529B;
        color: #00F;
    }

.interface_check {
    outline: 5px solid #BDE5F8 !important;
}

.errorAlert {
    color: #D8000C;
    background-color: #FFBABA;
}

.warningAlert {
    color: #9F6000;
    background-color: #FEEFB3;
}

.infoAlert {
    color: #00529B;
    background-color: #BDE5F8;
}

.ignoreAlert {
    color: #00529B;
    background-color: #66FF99;
}

.workflowdone {
    background-color: #7fff7f !important;
}

.workflowreddays {
    background-color: #ff7f7f !important;
}

    .workflowreddays > a {
        color: #ffffff !important;
    }

.workflowyellowdays {
    background-color: #ffff7f !important;
}

.workflowweekend {
    background-color: #7f7fff !important;
}

    .workflowweekend > a {
        color: #ffffff !important;
    }

.defaultbackground {
    background-color: transparent;
}

.nominheight {
    min-height: 0px;
}

.inactive_check {
    outline: 5px solid yellow !important;
}

.unsavedPMOptionCommunity {
    background-color: #FFC0CB;
}

.taskflowsection {
    padding: 10px;
    border: 1px solid #055fad;
    border-radius: 5px;
    margin: 10px;
    text-align: left;
    background-color: #d7e6f3;
}

    .taskflowsection .heading {
        color: #055fad;
        border-bottom: 1px solid #055fad;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .taskflowsection * {
        color: #055fad;
        font-size: 12px !important;
    }

    .taskflowsection .validator {
        color: #d0021b !Important;
    }

    .taskflowsection .subheading {
        color: #055fad;
        font-weight: normal !important;
    }

.taskflowButton {
    background-color: #197fd7 !important;
    color: #fff !important;
    border: 1px solid #055fad !important;
    min-width: 100px;
}

.autocomplete-suggestions {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    overflow: auto;
    -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}

.autocomplete-no-suggestion {
    padding: 2px 5px;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #000;
}

.autocomplete-group {
    padding: 2px 5px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    display: block;
    border-bottom: 1px solid #000;
}

.warning-popup, .error-popup {
    top: 110px;
    left: 30%;
    width: 466px;
    height: auto;
    min-height: 255px;
    position: fixed;
    background-color: #ffffff;
    border: solid 1px #055fad;
    border-radius: 5px;
    z-index: 50;
    vertical-align: top;
}

.warning-popup.nominheight, .error-popup.nominheight {
    min-height:0px !important;
    top:140px !important;
}

    .warning-popup .title, .error-popup .title {
        text-align: left;
        background-color: #D7E6F3;
        color: #055fad;
        padding: 5px;
        margin-top: 1px;
        margin-left: 1px;
        margin-right: 1px;
        text-transform: uppercase;
        font-size: 1.2em;
        font-weight: bold;
        border-bottom: 1px solid #055fad;
    }

    .warning-popup .body, .error-popup .body {
        font-size: 20px;
        text-align: center;
        vertical-align: top;
        padding-top: 15px;
        padding-bottom: 15px;
        white-space: normal;
    }

    .warning-popup .message {
        margin: 0 auto;
        color: #660000;
        font-size: 12px;
        padding: 5px 5px 5px 50px;
        background-position: 10px center;
        text-align: left;
        background-image: url(../image/warning.png);
        background-repeat: no-repeat;
    }

     .error-popup .message {
        margin: 0 auto;
        color: #660000;
        font-size: 12px;
        padding: 5px 5px 5px 50px;
        background-position: 10px center;
        text-align: left;
        background-image: url(../image/error.png);
        background-repeat: no-repeat;
    }
      .warning-popup.nominheight .message *, .error-popup.nominheight .message * {
    color: #000000 !important;
    }
    .warning-popup .content, .error-popup .content {
        margin: 0 auto;
        color: #660000;
        font-size: 12px;
    }

        .warning-popup .content p {
            margin: 5px 0 5px 13px;
            text-align: left;
            font-size: 13px;
        }

.largefont {
    font-size: 20px !Important;
}

.futureworkorder_bg {
    background-color: yellow !important;
}

.verticalline {
    padding: 5px;
    border-left: solid 1px #999999 !important;
}

.fileHelp {
    margin: 0 auto;
}

    .fileHelp .grid {
        border: 0px;
    }

        .fileHelp .heading, .fileHelp .grid .heading > td, .fileHelp .grid .heading > th {
            padding: 7px;
            background-color: #d7e6f3;
            border: solid 1px #999999;
            text-align: center;
            font-weight: bold;
            color: #000000;
            border-bottom: 0px;
        }

        .fileHelp .grid .Grid_Item, .fileHelp .grid .Grid_Alt {
            background-color: #ffffff !important;
        }

            .fileHelp .grid .Grid_Item > td, .fileHelp .grid .Grid_Alt > td {
                border: solid 1px #999999;
                padding: 5px;
            }

                .fileHelp .grid .Grid_Item > td:first-child, .fileHelp .grid .Grid_Alt > td:first-child {
                    font-weight: bold;
                }

            .fileHelp .grid .Grid_Item .helptext, .fileHelp .grid .Grid_Alt .helptext {
                font-style: italic !important;
            }


.highlightTextBox {
    border: 1.5px solid blue !Important;
    font-weight: bold;
}

.readableSetupDisplay {
    padding: 10px;
    border: 1px solid #B5B5B5;
    border-radius: 5px;
    margin: 10px;
    text-align: left;
}

    .readableSetupDisplay .header {
        font-size: 26px;
    }

    .readableSetupDisplay .description {
        font-style: italic;
    }

.section {
    border-collapse: collapse;
    border: solid 1px #B5B5B5;
}

    .section > td {
        margin: 0px !Important;
        padding: 0px !Important;
    }

    .section .header {
        padding: 7px;
        white-space: normal;
        border-bottom: solid 1px #B5B5B5;
    }

    .section .active {
        background-color: #d7e6f3;
    }

    .section .inactive {
        background-color: #D9D9D9;
    }

    .section div {
        padding-top: 3px;
    }

    .section .labelHeader {
        font-weight: bold;
        font-size: 16px;
    }

.childsection {
    padding: 7px 7px 0px 25px;
}

    .childsection .active {
        background-color: #fff8e5;
    }

    .childsection .inactive {
        background-color: #D9D9D9;
    }

    .childsection .header {
        border: 1px solid #B5B5B5;
    }

        .childsection .header > td {
            white-space: normal;
            padding: 7px !Important;
        }

    .childsection div {
        padding-top: 3px;
    }

    .childsection .labelHeader {
        font-weight: bold;
        font-size: 16px;
    }

.details td {
    background-color: #fff;
    padding: 7px 7px 3px 7px;
    white-space: normal;
}

.readableSetupDisplay .details .content {
    font-weight: bold;
}


.woSection {
    background-color: #FFFFFF !Important;
    color: #ede4db !Important;
    padding: 5px 10px 10px 10px;
    border: 1px solid #6d6d6d;
    border-radius: 5px;
    display: inline-block;
    margin: 10px;
    text-align: left;
}

    .woSection .legend {
        color: #6d6d6d !Important;
        font-weight: bold;
        font-size: 1em;
    }

.woHeader {
    text-decoration: underline;
    color: #686868;
    font-weight: bold;
    font-size: 12px;
}

.woListItem {
    padding: 5px;
    margin: 3px;
    background-color: #ffe7a6 !Important;
    border: solid 1px #777777;
    font-size: 18px;
}

    .woListItem .Content {
        font-size: 14px !important;
    }

    .woListItem .description {
        font-weight: bold;
    }

    .woListItem A:link {
        text-decoration: none;
        font-size: 14px;
        color: #033b7e !Important;
    }

    .woListItem A[disabled] {
        text-decoration: none;
        font-size: 14px;
        cursor: text;
    }

    .woListItem IMG {
        float: left;
        width: 22px;
        height: 22px;
    }

.childCommunities_bg, .billprocessinginotherbatch_bg, .nopminterfacelicense_bg, .paymentplanactivestatus_bg, .paymentplancompletedduebyallocateddatestatus_bg {
    background-color: #98FB98 !Important;
}

.sectionSideBar {
    padding: 0px !important;
    border: none !important;
}

.section, .sectionSideBar {
    padding: 10px;
    border: 1px solid #B5B5B5;
    border-radius: 5px;
    display: inline-table;
    margin: 10px;
    text-align: left;
}

    .sectionSideBar .heading {
        color: #444444 !Important;
        font-size: 14px !Important;
        font-weight: bold !Important;
        margin-left: 5px;
        margin-right: 5px;
    }

        .sectionSideBar .heading a {
            color: #033b7e !Important;
            font-size: 14px !Important;
            font-weight: bold !Important;
        }

    .sectionSideBar .active {
        background-color: #d7e6f3 !important;
        border: solid 1px #777777 !important;
    }

    .sectionSideBar a {
        color: #033b7e !Important;
        font-size: 12px !Important;
        font-weight: bold !Important;
    }

.parentcategory_bg {
    background-color: #DFF2BF !Important;
}

/* Help control css */
.help {
    background-image: url(../image/HelpButton.png);
    outline: none;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    cursor: pointer;
}

    .help div {
        display: none;
        z-index: 10;
        padding: 8px 8px;
        margin-top: -8px;
        margin-left: 22px;
        margin-right: 15px;
        line-height: 15px;
        position: absolute;
        color: #111;
        border: 1px solid #4a90e2;
        background: #ffffff;
        font-size: 12px;
        white-space: normal;
    }

    .help div {
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-box-shadow: 5px 5px 8px #c0ddff;
        -webkit-box-shadow: 5px 5px 8px #c0ddff;
        box-shadow: 5px 5px 8px #c0ddff;
    }

.unprintedbills, .paymentplanpastdueandbalanceispaidstatus_bg {
    background-color: #FEEFB3 !Important;
}

.courtesybill {
    color: royalblue !important;
}

.colorLegend .courtesybill {
    background-color: royalblue !important;
}

.cautionbox {
    border-radius: 5px;
    border: solid 1px #f8596c;
    padding: 10px 5px 10px 50px;
    text-align: center;
}

    .cautionbox, .cautionbox * {
        color: #d0021b;
        font-weight: bold;
    }

        .cautionbox .cautiontext {
            font-size: 16px;
            text-decoration: underline;
        }

.infoBox {
    color: #00529b !Important;
    background-color: #BDE5F8;
    border: 1px solid;
    padding: 10px 5px 10px 15px;
    border-radius: 5px;
    font-size: 13px;
}

    .infoBox * {
        color: #00529b !Important;
    }

.recentlysaved_bg, .mdmmeterbatch_bg, .interface_check_bg {
    background-color: #BDE5F8 !Important;
}

.unconfirmedregularbills_bg, .inactivecommunitiesbills, .paymentplanpastduebycurrentdatestatus_bg, .paymentplanpastdueandbalancenotpaidstatus_bg, .billingrunafterbatchposted_bg {
    background-color: #FFBABA !Important;
}

.unconfirmedfinalbills_bg, .exportprocessdoesnotallow_bg {
    background-color: #FF5721 !Important;
}

.realtimefinalbill_bg {
    background-color: #66CCFF !Important;
}

.controlGroupBox {
    border: 1px solid #999999;
}

.Templatelist {
}

    .Templatelist fieldset {
        border: solid 1px #999999!important;
        background-color: #ffffff !important;
    }

    .Templatelist .Header, .Templatelist .Header > td, .Templatelist .Header > th {
        text-align: left;
        font-weight: bold;
        background: none !important;
        color: #000000;
        border: 0px;
        padding: 5px 30px 5px 5px;
    }

    .Templatelist .row {
        background-color: #ffffff !important;
        border: 0px !important;
    }

        .Templatelist .row > td {
            padding: 5px 30px 5px 5px;
            border: 0px !important;
        }

    .Templatelist Hr {
        border: 1px solid #999999;
    }

.recentlysaved_bg {
    background-color: #BDE5F8 !Important;
}

.changedoutmeters_bg, .previousbillable_bg {
    background-color: red !Important;
}

.changedoutmeters {
    color: red !important;
}

.Meterinstalled_br {
    border: 1px solid green !important;
}

.confirmbox {
    background-color: #efefef;
    padding: 10px;
}

.meterchangeout {
    color: #ff0000 !important;
    background-color: #FFFFFF !important;
}

.grid_Add {
    border: 0px;
    font-size: 12px;
}

    .grid_Add .grid {
        margin: 0 auto;
        border-collapse: collapse;
    }

        .grid_Add .grid .Grid_Header {
            text-align: center;
            background-color: #d7e6f3;
            font-weight: bold;
            color: #000000;
            border: solid 1px #dddddd;
        }

            .grid_Add .grid .Grid_Header > td, .grid_Add .grid .Grid_Header > th {
                padding: 5px;
                background-color: #d7e6f3;
                font-weight: bold;
                border: solid 1px #999999;
            }

        .grid_Add .grid .Grid_Footer {
            text-align: center;
            font-weight: bold;
            color: #000000;
        }

            .grid_Add .grid .Grid_Footer > td {
                padding: 5px;
                border: solid 1px #999999 !important;
                background-color: #eeeeee !important;
            }

        .grid_Add .grid .Grid_Item, .grid_Add .grid .Grid_Alt {
            background-color: #ffffff;
        }

            .grid_Add .grid .Grid_Item > td, .Grid_Alt > td {
                border: solid 1px #999999;
                padding: 5px;
            }

            .grid_Add .grid .Grid_Item input[type=text], .grid_Add .grid .Grid_Alt input[type=text], .grid_Add .grid .Grid_Item select, .grid_Add .grid .Grid_Alt select, .grid_Add .grid .Grid_Footer input[type=text], .grid_Add .grid .Grid_Footer select, .grid_Add .grid .Grid_SubHeader1 input[type=text], .grid_Add .grid .Grid_SubHeader1 select, .grid_Add .grid .Grid_SubHeader input[type=text], .grid_Add .grid .Grid_SubHeader select {
                height: 25px;
                padding: 3.5px 6px;
            }

.displayBox {
    border: solid 1px #999999;
    background-color: #fff;
    padding: 15px;
}

.currentbillable_bg {
    background-color: blue;
}

.Meterinstalled {
    color: green !important;
}

.btn-attachmentImage {
    background: none !important;
    width: 16px !important;
    height: 16px !important;
}

.largearrow {
    font-size: 75px !important;
}

.multipledropdown {
}

    .multipledropdown .tableborder {
        border-bottom: 1px solid #999999;
    }

.grid_list {
    font-size: 12px;
}

    .grid_list .grid {
        margin: 0 auto;
        border-collapse: collapse;
        border: solid 1px #999999;
    }

        .grid_list .grid .grid_Header {
            text-align: center;
            background-color: #007db6;
            font-weight: bold;
        }

            .grid_list .grid .grid_Header > td, .grid_list .grid .grid_Header > th {
                padding: 5px;
                background-color: #007db6;
                font-weight: bold;
                border: 0px;
                color: #ffffff;
            }

        .grid_list .grid .Grid_subheader {
            text-align: center;
            font-weight: bold;
            color: #000000;
        }

            .grid_list .grid .Grid_subheader > td {
                padding: 5px;
                border: solid 1px #999999 !important;
                background-color: #d7e6f3 !important;
            }

        .grid_list .grid .Grid_Item, .grid_list .grid .Grid_Alt {
            background-color: #ffffff;
        }

            .grid_list .grid .Grid_Item > td, .grid_list .grid .Grid_Alt > td {
                padding: 5px;
                border: 0px;
            }

        .grid_list .grid .description {
            font-style: italic;
        }

.inacticvebaseline * {
    color: red !important;
    text-decoration: underline;
}

.baselinelist {
    list-style-type: none;
}

.grid_summary {
    font-size: 12px;
}

    .grid_summary .grid {
        margin: 0 auto;
        border-collapse: collapse;
        border: 0px;
    }

        .grid_summary .grid .grid_Header {
            text-align: left;
            background-color: #007db6;
            font-weight: bold;
        }

            .grid_summary .grid .grid_Header > td, .grid_summary .grid .grid_Header > th {
                padding: 5px;
                background-color: #007db6;
                font-weight: bold;
                color: #ffffff;
                font-size: 15px !important;
                border: 0px;
                border: 1px solid #999999;
            }


        .grid_summary .grid .display > td {
            padding: 5px;
        }

        .grid_summary .grid .description {
            font-style: italic;
        }

        .grid_summary .grid .horizontalline {
            border-top: 1px solid #999999;
        }

        .grid_summary .grid .Grid_header1 {
            text-align: center;
            font-weight: bold;
            color: #000000;
        }

            .grid_summary .grid .Grid_header1 > td, .grid_summary .grid .Grid_header1 > th {
                padding: 5px;
                background-color: #d7e6f3 !important;
                font-size: 15px !important;
                border: 0px;
                border: 1px solid #999999;
            }

        .grid_summary .grid .sub_grid {
            padding-left: 10px;
        }

            .grid_summary .grid .sub_grid .Grid_subheader {
                text-align: center;
                font-weight: bold;
            }

                .grid_summary .grid .sub_grid .Grid_subheader > td, .grid_summary .grid .sub_grid .Grid_subheader > th {
                    padding: 5px;
                    background-color: #d7e6f3 !important;
                    color: #000000;
                    border: 0px;
                    border-bottom: 1px solid #999999;
                }

            .grid_summary .grid .sub_grid .Grid_Item {
                background-color: #ffffff;
            }

            .grid_summary .grid .sub_grid .Grid_Alt {
                background-color: #ffffff;
            }

                .grid_summary .grid .sub_grid .Grid_Item > td, .grid_summary .grid .sub_grid .Grid_Alt > td {
                    padding: 5px;
                    border: 0px;
                    border-bottom: 1px solid #999999;
                }

            .grid_summary .grid .sub_grid .Grid_SubHeading > td {
                font-weight: bold;
                padding: 5px;
                border: 0px;
                border-bottom: 1px solid #999999;
            }

        .grid_summary .grid .sub_grid1 {
            padding-left: 10px;
        }

            .grid_summary .grid .sub_grid1 .Grid_subheader {
                text-align: center;
                font-weight: bold;
            }

                .grid_summary .grid .sub_grid1 .Grid_subheader > td, .grid_summary .grid .sub_grid1 .Grid_subheader > th {
                    padding: 5px;
                    background-color: #d7e6f3 !important;
                    border: 0px;
                    color: #000000;
                }

            .grid_summary .grid .sub_grid1 .Grid_Item {
                background-color: #ffffff;
            }

            .grid_summary .grid .sub_grid1 .Grid_Alt {
                background-color: #ffffff;
            }

                .grid_summary .grid .sub_grid1 .Grid_Item > td, .grid_summary .grid .sub_grid1 .Grid_Alt > td {
                    padding: 5px;
                    border: 0px;
                }

.sectionrow {
    padding: 10px;
    margin-bottom: 10px;
    border: solid 1px #e2e6e9;
    border-left: solid 15px #007db6;
    background-color: #f7f7f7;
}

.iconImage {
    background: none !important;
    width: 24px !important;
    vertical-align: middle;
}

.delinquencyprocessactionheader_bg {
    background-color: #FFA07A !important
}

.delinquencyprocessactionsubheader_bg {
    background-color: #FFFFE0 !important
}

.delinquencyprocessborder {
     border-right: solid 1px #999999;
}

/*Suggestion Form*/
.suggestionpage_header {
   
    padding-top: 5px;
    padding-bottom: 10px;
    font-weight: bold;
    color: #000000;
    text-align: center;
}
.suggestionformicon {
    background-image: url(../image/Suggestionicon.png);
    width: 23px;
    height: 23px;
    cursor: pointer;
    float: right;
    padding-right: 5px;
}

.suggestionform {
    background-color: #efefef;
    padding: 10px;
}

    .suggestionform .subject {
        background-color: #d7e6f3;
    }

        .suggestionform .subject .subjectinput {
            padding-top: 10px;
            padding-right: 15px;
            padding-bottom: 10px;
            padding-left:15px;
        }

    .suggestionform .details td {
        padding-top: 0px;
    }

    .suggestionform .details textarea {
        border-radius: 0px;
        border-collapse: collapse !important;
        border-top: none !important;
        box-shadow: none;
        -webkit-box-shadow: none;
        width: 100% !Important;
        height: 200px !Important;
    }

.usermanualicon {
    background-image: url(../image/question-mark.png);
    width: 20px;
    height: 20px;
    cursor: pointer;
    float: right;
}

.bulletedhelpbox {
    margin-top: 8px;
    padding: 17px;
    border-radius: 3px;
    background-color: #007db6;
    border: solid 1px #007db6;
    color: #ffffff;
    font-size: 16px !important;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

    .bulletedhelpbox .title {
        min-height: 23px;
        font-size: 16px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.44;
        text-align: left;
        color: #ffffff;
    }

    .bulletedhelpbox .subtitle {
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        color: #ffffff;
    }

    .bulletedhelpbox hr {
        border-top: solid 1px #ffffff;
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .bulletedhelpbox li {
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.86;
        text-align: left;
        color: #ffffff;
        list-style: none;
        margin-left: -25px;
        padding-right: 20px;
    }

        .bulletedhelpbox li:before {
            content: " ";
            margin-left: -17px;
            width: 15px;
            height: 15px;
            padding-right: 20px;
            padding-bottom: 0px;
            padding-top: 0px;
            background-image: url(../image/rightblue.png);
            background-repeat: no-repeat;
            background-size: 15px 15px;
            background-position-x:center;
            background-position-y:center;
            color: #ffffff;
            display: inline-block;
        }

        .bulletedhelpbox li.success:before {
            background-image: url(../image/rightGreen.png);
        }


.rowsection {
    margin-top: 8px;
    border-radius: 3px;
    background-color: #f7f7f7;
    border: solid 1px #e2e6e9;
    border-left: solid 15px #007db6;
    padding-left: 33px;
    padding-top: 21px;
    padding-bottom: 11px;
    padding-right: 33px;
    vertical-align: middle;
}

    .rowsection .content {
        font-weight: normal;
        font-size: 14px !Important;
        color: #4b5565 !important;
        letter-spacing: 0;
    }

    .rowsection .form-group {
        
        margin-bottom: 15px;
    }

        .rowsection .form-group {
            text-align: left;
        }

            .rowsection .form-group label {
                display:block;
                font-weight: normal;
                font-size: 14px !Important;
                margin-bottom: 5px !Important;
                color: #4b5565 !Important;
            }

    .rowsection .required {
        padding-left: 2px !Important;
        border: none !Important;
        color: #ff686e;
        
    }

    .rowsection .validator {
        color: #ff686e !Important;
        font-size: 14px !Important;
        line-height: 1.63;
        font-weight: normal !Important;
    }

    
.form-control {
    display: block;
    width: 100%;
    height: 40px !Important;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #d2d5d7;
    padding-left: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px !Important;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    text-align: left;
    color: #4b5565;
}

    .form-control:focus {
        border-color: #66afe9;
        outline: 0;
    }

    .form-control::-moz-placeholder {
        color: #999999;
        opacity: 1;
    }

    .form-control:-ms-input-placeholder {
        color: #999999;
    }

    .form-control::-webkit-input-placeholder {
        color: #999999;
    }

    .form-control::-ms-expand {
        border: 0;
        background-color: transparent;
    }

    .form-control[disabled],
    .form-control[readonly],
    fieldset[disabled] .form-control {
        background-color: #eeeeee;
        opacity: 1;
    }

    .form-control[disabled],
    fieldset[disabled] .form-control {
        cursor: not-allowed;
    }

span.form-control {
    height: 21px !important;
    border-radius: 5px !Important;
    text-align: left;
    padding-right: 0px !Important;
    padding-top: 10px !Important;
    vertical-align: middle;
    width: 98% !important;
    font-weight: bold !important;
}

/* THIS IS FOR MAITENANCE NOTIFICATION DON'T CHANGE THIS AND NOT USE ANY OTHER PAGE */
#message {
    right:0;
}

/* INACTIVE SUBTYPE */
.inactivesubtype_bg {
    background-color: #696969;
}
.inactivesubtype_text {
    color: #696969;
}
    .inactivesubtype_bg td {
        background-color: #696969;
        border-collapse: collapse;
        padding: 5px;
        border: solid 1px #999999;
    }

/*Delinquency Process List */
.delinquency_process_list {
    text-align: center;
}

    .delinquency_process_list dd {
        line-height: 0.0;
        margin: 0px;
        margin-top: 0px;
        padding: 0px;
    }

    .delinquency_process_list ul {
        margin: 0px;
        margin-left: 5px;
    }

    .delinquency_process_list td {
        padding-top: 2px;
    }

    /*Rule Set Setup Page*/
    @media screen and (-ms-high-contrast: active),(-ms-high-contrast:none){.ie11{padding:10px}}
    @supports (-ms-ime-align:auto){.ie11{padding:10px}}

    .rounded_border {
        padding: 4px 12px;
        border-radius: 6px;
    }

/* PROGRESS */
.progress-bar {
    background-color: #e5e9eb;
    height: 20px;
    position: relative;
    width: 100%;
    border-radius: 10px;
}

    .progress-bar .completed, .progress-bar .running, .progress-bar .open, .progress-bar .completedwitherror {
        animation-duration: 3s;
        animation-name: width;
        background-size: 24em 0.25em;
        height: 100%;
        position: relative;
        border-radius: 10px;
    }

    .progress-bar .completed {
        background-color: #7fff7f;
    }

    .progress-bar .running {
        background-color: #fca518;
    }

    .progress-bar .open {
        background-color: #bde5f8;
    }

    .progress-bar .completedwitherror {
        background-color: #ff7f7f;
    }

.progress-bar .no-animation {
    animation-duration: 0s !important;
}

@keyframes width {
    0%, 100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }

    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.collapsible {
    background-color: #D7E6F3;
    color: #000000;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 13px;
    font-weight:bold;
}

.parentdisplaytext {
    width: 100%; 
    font-weight: bold;
}
    
    .parentdisplaytext .childdisplaytext {
        padding-left: 4em;
    }

/* Chrome, Safari, Edge, Opera */ /*To Hide a arrow in text box*/
.noarrownumericbox {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 34.9px;
    border-radius: 4px;
}

    .switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #ccc;
        background-color: #f7f7f7;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 4px;
    }

        .switch .slider:before {
            position: absolute;
            content: "";
            height: 33.9px;
            width: 39px;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 4px;
        }

    .switch input:checked + .slider:before {
        background-color: #007db6;
    }

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before {
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
}

.switch .text {
    color: white;
}

    .switch .text:before {
        position: absolute;
        top: 7px;
        content: "ON";
        right: 8px;
        font-weight: bold;
        font-size: 15px;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
    }

    .switch .text:after {
        position: absolute;
        top: 7px;
        content: "OFF";
        left: 6px;
        font-weight: bold;
        font-size: 15px;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
    }

.switch input + .slider + .text:after {
    opacity: 1;
}

.switch input + .slider + .text:before {
    opacity: 0;
}

.switch input:checked + .slider + .text:after {
    opacity: 0;
}

.switch input:checked + .slider + .text:before {
    opacity: 1;
}

.delinquencyprocessborder .btn {
    padding: 6px 5px !important;
    font-size: 11px !important;
    width:38px !important;
}

/*to display the content vertically center*/

.Valigncontentcenter {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*Overriding the existing css only security error page*/
.securityError .Header1 {
    font-size: 15px !important;
}

.successbox .successMessage, .errorbox .errorMessage, .infoMessagewithGrid .infoMessage {
    background-position: 3px 5px;
    padding: 12px 20px 4px 20px;
}
    .successbox .successMessage .displaytext, .errorbox .errorMessage .displaytext, .infoMessagewithGrid .infoMessage .displaytext {
        padding-bottom: 10px;
        padding-left: 20px;
        font-weight: 600;
    }

.wrap, .wrap option {
    word-wrap: normal !important;
    white-space: normal;
}

.margin-bottom-3px, .margin-bottom-3px option {
    margin-bottom: 3px;
}

.lightborder, .lightborder * {
    border-color: #99999959 !important;
}

    .lighter-border {
        border-color: #99999959 !important;
    }

.resizable-listbox select {
    resize: both;
    min-height: 200px !important;
    min-Width: 600px !important;
}


.lighter-border > td, .lighter-border > th {
    border: solid 1px #99999961;
}

.power-template-container {
    width: 100%;
    max-width: 1200px;
    min-width: 1030px;
    margin: 0 auto;
    box-sizing: border-box;
}

.accordion {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

    .accordion .accordion-button, .accordion .accordion-header {
        font-weight: bold;
        text-decoration: none;
        background: #88bfff !important;
        font-size: 15px;        
    }

        .accordion .accordion-button{
            padding:10px;
        }

        .accordion .accordion-button:not(.collapsed) {
            box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075) !important;
        }

        .accordion .accordion-header .highlight {
            background-color: #ffba00 !important;
        }

    .accordion .accordion-body {
        background-color: #fafafa !important;
        padding: 5px;
    }

    .accordion .accordion-item {
        margin: 5px;
        border: none !important;
    }

/* Dynamic Form Grid - Main container */
.dynamic-form-grid {    
    border: 1px solid #99999961;
    width: 100%;
    align-items: center;    
}

    .dynamic-form-grid .field-row {
        display: grid;
        grid-template-columns: 170px 1fr;
    }

    /* Field label styling */
    .dynamic-form-grid .field-label {
        padding: 5px;
        background-color: #f8f9fa;
        font-weight: 500;
        border-right: 1px solid #99999961;
        border-bottom: 1px solid #99999961;
        display: flex;
        align-items: center;
        word-break: break-word;
        word-wrap: break-word;
    }

    /* Field data styling */
    .dynamic-form-grid .field-data {
        padding: 5px;
        border-bottom: 1px solid #99999961;
        min-height: 37px;        
        align-items: center;
    }

        /* Add this to ensure span content is also properly aligned */
        .dynamic-form-grid .field-data span {
            display: inline-flex;
            align-items: center;
            font-weight: bold;
        }

    /* Complex field container (spans full width) */
    .dynamic-form-grid .complex-container {
        grid-column: 1 / -1;
        padding: 0;
        border-bottom: 1px solid #99999961;
        width: 100%;
    }

        .dynamic-form-grid .complex-container .header {
            font-weight: bold;
            padding-top: 5px;
        }

    /* Inner grid for complex fields */
    .dynamic-form-grid .inner-grid {
        display: grid;
        grid-template-columns: 170px 1fr;
        height: 100%;
    }

    /* Inner label styling - no bottom border */
    .dynamic-form-grid .inner-label {
        border-bottom: none;
    }

    /* Inner data styling - no bottom border */
    .dynamic-form-grid .inner-data {
        border-bottom: none;
    }

    .light-border {
        border: 1px solid #99999961 !important;
    }

.header-bg {
    background-color: #d7e6f3 !important;
}