/*=================================================================================================
    Common Resolutions:
    320px - 480px   Mobile Devices
    481px - 768px   iPads, Tablets
    769px - 1024px  Small screens, laptops
    1025px - 1200px Desktops, large screens
    1201px and up   Extra large screens, TV
        
    ===============================================================================================
    Date        Programmer  Description Of Modification
    -----------------------------------------------------------------------------------------------
    10/26/20    J. Miller   Revised styles for paging
    07/29/21    J. Miller   Resolved grid-row-cursor-hover and fixed-grid-column issue by removing
                            all cc_Grid_ThinRow:hover styles except for igg_item: hover
    08/09/21    J. Miller   Rewrote to use discrete ranges instead of overlapping styles
    08/11/21                Revised to use device-ranges instead of min-ranges
    08/13/21    J. Miller   Refined logo size styles
    10/14/21    J. Miller   Fixed lblRightRf height for 1024px or wider screens
    10/06/22    J. Miller   Added read-only style for checkbox
    10/21/22    J. Miller   Removed "background-color: black !important;" style for checkbox
    10/31/22    J. Miller   Added 3px margin to left of User ID and right of Interlink Technologies
=================================================================================================*/
html, body, form {
    background-color: white;
    color: #333; /* light black */
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/*----------------------------------------------------------*/
/* HEADER - CRT and RF
/*----------------------------------------------------------*/
.can_header {
    overflow: hidden;
    width: 100%
}

.title {
    clear: none;
    text-align: center;
}

.rf_table {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    overflow: hidden;
    width: 100%;
}

.rf_tableRow {
    display: table-row;
    width: 100%
}

.rf_tableCell {
    display: table-cell;
    width: 100%;
    overflow: hidden;
}

.rfTitle {
    clear: none;
}


/* CRT */
.btnArrows {
    cursor: pointer;
}

.btnLeftCrt {
    color: ghostwhite;
    font-size: 0.85em;
    float: left;
    margin: 3px 0 0 5px;
    padding: 0 2px 2px 0;
    position: relative;
}

    .btnLeftCrt:hover {
        background-color: white;
        color: #66b2f3;
        cursor: pointer;
    }

/* ///////////////////////////////////////////////////////////////////////// */
.btnRightCrt {
    color: ghostwhite;
    font-size: 0.85em;
    float: right;
    margin: 3px 5px 0 0;
    padding: 0 0 2px 2px;
    position: relative;
}

    .btnRightCrt:hover {
        background-color: white;
        color: #66b2f3;
        cursor: pointer;
    }
/* ///////////////////////////////////////////////////////////////////////// */

/* RF */
.btnEnter {
    background-color: gainsboro;
    border-style: outset;
    float: left;
    font-size: 10pt;
    min-width: 60px;
    margin: 3px 0 3px 5px;
    padding: 0 5px 3px 5px;
    text-align: center;
}

    .btnEnter:hover {
        background-color: burlywood;
    }



/* ///////////////////////////////////////////////////////////////////////// */

/* MHD Menu Navigation Buttons*/
.MHD {
    color: ghostwhite;
    font-size: 1.0em;
    float: right;
    /*margin: 3px 0 0 5px;*/
    padding: 0 2px 2px 2px;
    position: relative;
}

.backmenu {
    color: ghostwhite;
    font-size: 1.75em;
    font-weight: 900;
    text-decoration: none;
    height: 0.5em;
    float: right;
    margin: -10px 0 0 5px;
    padding: 0 2px 20px 2px;
    position: relative;
}

.fwdmenu {
    color: ghostwhite;
    font-size: 1.75em;
    font-weight: 900;
    text-decoration: none;
    height: 0.5em;
    float: right;
    margin: -10px 5px 0 0;
    padding: 0 2px 20px 2px;
    position: relative;
}

.backmenu:hover {
    background-color: white;
    color: #66b2f3;
}

.fwdmenu:hover {
    background-color: white;
    color: #66b2f3;
}

.can_menu {
    background-color: white;
    min-height: 33px;
    width: 100%;
}

.mnu_line {
    background-color: white;
    display: inline-block;
}

/* CRT Tools Menu */
.can_tools {
    float: right;
    overflow: hidden;
}

.can_crit {
    background-color: gainsboro;
    float: left;
    width: 100%;
}

.it_TabFont {
    font-size: medium;
}


/*----------------------------------------------------------*/
/* FOOTER 
    /*----------------------------------------------------------*/
.can_footer {
    background-color: #e4e4e4; /* very light gray */
    margin: 0;
    padding: 1px 2px 1px 0;
    min-height: 15px;
    overflow: hidden;
}

.footer_action {
    float: left;
    clear: left;
    padding: 0 15px 3px 0px;
    width: 100%;
    background-color: #d76f29;
    /*background-color: #ebb693;*/
}

/* Dialog Footer */
.footer_nav {
    background-color: #d76f29;
    height: 28px;
    width: 100%;
    overflow: hidden;
}

.rowCount {
    border-right: solid 1px;
    float: left;
    padding-right: 8px;
    margin-right: 8px;
    font-size: 0.75em !important;
}

.user {
    font-size: 0.75em !important;
    float: left;
    margin-left: 3px;
    margin-right: 8px;
}


/*----------------------------------------------------------*/
/* BODY and CONTAINERS
    /*----------------------------------------------------------*/
#canSpan {
    background-color: #e4e4e4; /* very light gray */
    /*min-height: 100%;*/
    height: 100%;
    margin: 0 0 -18px;
}

.can_body {
    background-color: #fff; /* white */
    padding: 0 0 0 0;
    height: 100%; /*280px;*/
    width: 100%;
    overflow: hidden;
}

.can_body_box {
    /*padding: 0 12px 0 0;*/
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.float_box {
    float: left;
    clear: none;
    border: thin;
    border-style: solid;
    border-color: lightgray;
    padding: 3px;
    margin: 5px;
}

.fieldset {
    float: left;
    /*border:thin solid #007471;*/
    margin: 3px 5px 3px 5px;
    padding: 2px;
    /*clear:both;*/
}

.fieldset_legend {
    color: #007471;
    font-size: small;
    font-weight: bold;
}

.float_left {
    float: left;
    /*padding: 2px;*/
}

/* */
/*.cc_label {

}*/

.uppercase {
    text-transform: uppercase;
}

/*----------------------------------------------------------*/
/* Composite Controls
/*----------------------------------------------------------*/
.cc_lbl {
    padding: 1px 0 1px 2px;
    margin: 0;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    /*font-size: 0.75em;*/
    font-size: 9.0pt;
    background-color: transparent;
    /*background-color: aqua;*/
    color: darkslategray;
    float: left;
    clear: both !important;
}

.cc_lblchk {
    /*margin: 1px 1px 1px 10px;*/
    padding: 0;
    width: 100%;
}

    .cc_lblchk:read-only {
        color: white !important;
    }

.cc_lbledt {
    /*margin: 1px 1px 1px 10px;*/
    padding: 0;
    width: 100%;
}

    .cc_lbledt:read-only {
        color: black !important;
    }

.cc_lbledt_can {
    overflow: visible;
    /*padding: 0.75px;*/
    /*margin: 1px 5px 1px 3px;*/
    /*background-color: coral !important;*/
    margin: 1px 11px 1px 1px;
}

.cc_ok {
    background-color: gainsboro;
    border-style: outset;
    float: right;
    clear: both;
    margin: 2px;
    min-width: 50px;
    padding: 0 5px 2px 5px;
    font-size: 10pt;
    text-align: center;
}

    .cc_ok:hover {
        background-color: burlywood;
    }



.cc_edt_fastpath {
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    /*font-size: 1.05em !important;*/
    font-size: 12pt !important;
    border-color: #9BB7E0 !important;
    color: black !important;
    clear: both !important;
    margin: 10px !important;
    overflow: hidden !important;
}



/*----------------------------------------------------------*/
/* WebImageButton overrides
/*----------------------------------------------------------*/
/*.WebImageButtonContainer  {
}*/

/*.WebImageButtonContainer > table {
    width: 100% !important;
}*/

/*.WebImageButtonContainer.table > table {
        width: 100% !important;
    }*/

/*tbody.ig_b > table {
    width: 100% !important;
}*/

/*.ig_b > table {
    width: 100% !important;
}*/

/*----------------------------------------------------------*/
/* WebDropDown overrides
/*----------------------------------------------------------*/
.igdd_ValueDisplay {
    font-size: 1.05em !important;
}

.igdd_ControlArea {
    border-color: #9BB7E0 !important;
}

.igdd_DropDownList {
    width: 100% !important;
}

/*----------------------------------------------------------*/
/* WebDataGrid overrides
/*----------------------------------------------------------*/

tbody > tr > td.RAlign {
    text-align: right !important;
}



.cc_Grid_FilterCell {
    height: 25px !important;
    background-color: #f8eeee !important;
    color: #ff0000 !important;
}

tr.igg_FilterRow > td {
    height: 25px !important;
    background-color: #f8eeee !important;
    color: #ff0000 !important;
}

.cc_Grid_Pointer > tr > td {
    height: 25px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}



tbody.igg_Item > tr:hover > td {
    height: 25px !important;
    background-color: #CCCCCC !important;
    color: White;
}

tbody > tr.cc_GridRow_Yellow > td {
    height: 25px !important;
    background-color: lemonchiffon !important;
}

tbody > tr.cc_GridRow_LightGreen > td {
    height: 25px !important;
    background-color: #b6ff00 !important;
    color: black !important;
}

tbody > tr > td.cc_GridRow_Red_cell {
    height: 25px !important;
    background-color: #d76f29 !important;
    color: white !important;
}

tbody > tr > td.cc_GridRow_LightGreen_cell {
    height: 25px !important;
    background-color: #b6ff00 !important;
    color: black !important;
}

tbody > tr > td.cc_GridRow_LightOrange_cell {
    height: 25px !important;
    background-color: #fba55e !important;
    color: black !important;
}

tbody > tr > td.cc_GridRow_LightRed_cell {
    height: 25px !important;
    background-color: #e45b5b !important;
    color: black !important;
}

tbody > tr > td.cc_Grid_Checkmark {
    height: 25px !important;
    text-align: center !important;
}

tbody > tr > td.cc_Grid_RedText {
    height: 25px !important;
    color: #ff0000 !important;
}

tbody > tr > td.cc_Grid_RedCheckmark {
    height: 25px !important;
    color: #ff0000 !important;
    text-align: center !important;
}

cc_Grid_Cell_MultiLine {
    height: 25px !important;
    white-space: normal !important;
}

tbody > tr > td.igg_SelectedCell {
    height: 25px !important;
    background-color: #faebd7 !important;
    border-bottom: solid 1px #9ECBD6 !important;
    color: #444444 !important;
    outline: none !important;
}

/* Hide filter rules not relevant at this time */

#it_Grid_TextRuleDropDown_UL li[mkr="IsNull_item"] {
    display: none;
}

#it_Grid_TextRuleDropDown_UL li[mkr="IsNotNull_item"] {
    display: none;
}

#it_Grid_DateTimeRuleDropDown_UL li[mkr="Equals_item"] {
    display: none;
}

#it_Grid_DateTimeRuleDropDown_UL li[mkr="IsNull_item"] {
    display: none;
}

#it_Grid_DateTimeRuleDropDown_UL li[mkr="IsNotNull_item"] {
    display: none;
}

#it_Grid_NumericRuleDropDown_UL li[mkr="IsNull_item"] {
    display: none;
}

#it_Grid_NumericRuleDropDown_UL li[mkr="IsNotNull_item"] {
    display: none;
}

#it_Grid_BooleanRuleDropDown_UL li[mkr="IsNull_item"] {
    display: none;
}

#it_Grid_BooleanRuleDropDown_UL li[mkr="IsNotNull_item"] {
    display: none;
}



.gridCellBold {
    font-weight: bold !important;
}

.list {
    list-style: none;
    overflow: hidden;
}

/*----------------------------------------------------------*/
/* WebDataMenu overrides
/*----------------------------------------------------------*/

/* disabled menu options used as fixed spacers */
.disabled_MenuItem {
    background-color: gainsboro !important;
    width: 7px !important;
}

/* force horizontal menu to stay on 1 line */
.igdm_MenuGroupHorizontalRoot {
    /*margin: 0px;*/
    /*padding-top: 0px;*/
    /*padding-left: 0px;*/
    /*list-style-type: none;*/
    /*cursor: default;*/
    /*cursor: pointer !important;*/
    /*color: #444444;*/
    display: inline !important;
}

/* change top/bottom padding to match vertical (Opts) menu */
.igdm_MenuItemHorizontalRoot {
    /*font-size: 10px;*/
    /*border: solid 1px Transparent;*/
    /*padding: 6px 6px 6px 12px;*/
    padding: 4px 6px 4px 12px !important;
    /*float: left;*/
    /*_border: 0px;*/
    /*color: #444444;*/
}

/* force hand pointer on root menu */
.igdm_MenuItemHorizontalRootLink {
    /*font-size: 12px;*/
    /*font-family: Segoe UI,Arial,Verdana,Helvetica,sans-serif;*/
    /*display: block;*/
    /*cursor: default;*/
    cursor: pointer !important;
    /*color: #444444;*/
    /*text-decoration: none;*/
}

/* force hand pointer on children menus*/
.igdm_MenuItemHorizontalLink {
    /*font-size: 12px;*/
    /*font-family: Segoe UI,Arial,Verdana,Helvetica,sans-serif;*/
    /*display: block;*/
    /*cursor: default;*/
    cursor: pointer !important;
    /*color: #444444;*/
    /*text-decoration: none;*/
}

/* List Item (LI) no inner content */
/*.igdm_MenuItemHorizontalSeparator, igdm_MenuItemVerticalSeparator {
    background-color: #d76f29 !important;
    border-style: solid;
    border-color: black !important;
    border-width: 1px !important;
    margin-top: 0px;
    padding: 0px;
    display: block;
    width: 1px;
    width: 1px;
    height: 100%;
    margin: 0px auto;
}*/

/* force hand pointer on root menu */
.igdm_MenuItemVerticalRootLink {
    /*font-size: 12px;*/
    /*line-height: 12px; /* IE7 empty space fix. */
    /*font-family: Segoe UI,Arial,Verdana,Helvetica,sans-serif;*/
    /*display: block;*/
    /*cursor: default;*/
    cursor: pointer !important;
    /*color: #444444;*/
    /*text-decoration: none;*/
}

/* force hand pointer on children menus*/
.igdm_MenuItemVerticalLink {
    /*font-size: 12px;*/
    /*line-height: 12px; /* IE7 empty space fix. */
    /*font-family: Segoe UI,Arial,Verdana,Helvetica,sans-serif;*/
    /*display: block;*/
    /*cursor: default;*/
    cursor: pointer !important;
    /*color: #444444;*/
    /*text-decoration: none;*/
}



/*####################################################################################################*/
/* no LOGO
/*####################################################################################################*/
/*@media (min-width:500px) and (min-height:320px) {*/
.logos {
    background-color: white;
    margin: 0 5px 0 5px;
    height: 0;
}
/*}*/

/*####################################################################################################*/
/* 500/320 LOGO
/*####################################################################################################*/
@media (min-width:500px) and (min-height:320px) {
    .logos {
        background-image: url("../images/logo.png"), url("../images/warehouselink.png") !important;
        background-repeat: no-repeat;
        background-position: left, right;
        background-size: auto 37px;
        margin: 0 5px 0 5px;
        height: 37px;
    }
}

/*####################################################################################################*/
/* 500/500 LOGO
/*####################################################################################################*/
@media (min-width:500px) and (min-height:500px) {
    .logos {
        background-image: url("../images/logo.png"), url("../images/warehouselink.png") !important;
        background-repeat: no-repeat;
        background-position: left, right;
        /*background-size: auto 74px;
        height: 74px;*/
        background-size: auto 56px;
        height: 56px;
        margin: 0 5px 0 5px;
    }
}

/*####################################################################################################*/
/* 850/850 LOGO
/*####################################################################################################*/
/*@media (min-width:850px) and (min-height:850px) {
    .logos {
        background-image: url("../images/logo.png"), url("../images/warehouselink.png") !important;
        background-repeat: no-repeat;
        background-position: left, right;*/
/*background-size: auto 74px;
        height: 74px;*/
/*background-size: auto 56px;
        height: 56px;
        margin: 0 5px 0 5px;
    }
}*/




/*####################################################################################################*/
/* 319 MAX
/*####################################################################################################*/
/*@media (orientation: landscape) and (max-width:319px) and (orientation: portrait) and (max-height:319px) {*/
@media (max-device-width:319px) {
    .copyright {
        float: right;
        font-size: 0;
        margin-right: 3px;
    }

    .can_title {
        background-color: #d76f29; /* #d76f29 */
        color: #fff; /* white */
        font-size: 1em;
        padding: 0 3px 3px 5px;
        /*margin: 2px 0px 2px 0px;*/
        width: 100%;
        overflow: hidden;
    }

    .lblLeftRf {
        color: ghostwhite;
        font-size: 10pt;
        float: left;
        margin: 3px 0 0 5px;
        padding: 0 2px 2px 2px;
        position: relative;
    }

    .btnLeftRf {
        color: ghostwhite;
        font-size: 10pt;
        float: left;
        margin: 3px 0 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnLeftRf:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
            font-weight: bold;
        }


    /* ///////////////////////////////////////////////////////////////////////// */
    .lblRightRf {
        color: black;
        font-size: 10pt;
        font-weight: bold;
        float: right;
        margin: 3px 0 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

    .btnRightRf {
        color: ghostwhite;
        font-size: 10pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
        }

    .btnRightRf_disabled {
        color: darkred;
        font-size: 10pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf_disabled:hover {
            cursor: default;
        }

    .btnRightRf2 {
        color: cyan;
        font-size: 10pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 0 2px;
        position: relative;
    }

        .btnRightRf2:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
        }

    .btnRightRf2_disabled {
        color: darkred;
        font-size: 10pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf2_disabled:hover {
            cursor: default;
        }


    /* ///////////////////////////////////////////////////////////////////////// */
    .cc_edt {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 12pt !important;
        border-color: #9BB7E0 !important;
        color: black !important;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    .cc_edt_red {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 12pt !important;
        border-color: #9BB7E0 !important;
        color: red !important;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    .cc_edt_red_bold {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 12pt !important;
        border-color: #9BB7E0 !important;
        color: red !important;
        font-weight: bold;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    /*.cc_edt_fastpath {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;*/
    /*font-size: 1.05em !important;*/
    /*font-size: 12pt !important;
        border-color: #9BB7E0 !important;
        color: black !important;
        clear: both !important;
        margin: 10px !important;
    }*/

    .cc_bulletList {
        font-size: 10pt !important;
        /*overflow-y: scroll !important;*/
    }

    .cc_edtbtn {
        height: 100%;
        width: 100%;
        margin-top: 2px;
        margin-left: 8px;
    }

    .cc_edtbtncell:hover {
        background-color: #b6d7de;
    }

    .cc_Grid_Header {
        font-size: 7.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }

    .cc_Grid_Header2 {
        background-color: #5ea4e0;
        font-size: 7.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }

    .cc_Grid_Header3 {
        background-color: #039692;
        font-size: 7.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }


    tbody.cc_Grid_ThinRow > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        height: 25px !important;
        font-size: 10pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_ThinRow::selection > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        background-color: burlywood !important;
        height: 25px !important;
        font-size: 10pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_MultiRow > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        height: 25px !important;
        font-size: 10pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_MultiRow::selection > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        background-color: burlywood !important;
        height: 25px !important;
        font-size: 10pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_ThinRowWrap > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        /*height: DON'T SET BECAUSE OF MULTI-LINE TEXT FOR RF*/
        line-height: 14px !important;
        padding: 2px 2px 2px 3px !important;
        white-space: normal !important;
        cursor: pointer !important;
    }

    .gridSummaries {
        font-size: 9pt !important;
    }
}


/*####################################################################################################*/
/* 320 to 767
/*####################################################################################################*/
/*@media (orientation: landscape) and (min-width:320px) and (max-width:767px) and (orientation: portrait) and (min-height:320px) and (max-height:767px) {*/
@media (min-device-width:320px) and (max-device-width:767px) {
    .copyright {
        float: right;
        font-size: 0.75em !important;
    }

    .can_title {
        background-color: #d76f29; /* #d76f29 */
        color: #fff; /* white */
        font-size: 1.2em;
        padding: 0 3px 3px 5px;
        width: 100%;
        overflow: hidden;
    }

    .lblLeftRf {
        color: ghostwhite;
        font-size: 16pt;
        float: left;
        margin: 3px 0 0 5px;
        padding: 0 2px 2px 2px;
        position: relative;
    }

    .btnLeftRf {
        color: ghostwhite;
        font-size: 16pt;
        float: left;
        margin: 3px 0 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnLeftRf:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
            font-weight: bold;
        }

    /* ///////////////////////////////////////////////////////////////////////// */
    .lblRightRf {
        color: black;
        font-size: 16pt;
        font-weight: bold;
        float: right;
        margin: 3px 0 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

    .btnRightRf {
        color: ghostwhite;
        font-size: 16pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
        }

    .btnRightRf_disabled {
        color: darkred;
        font-size: 16pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf_disabled:hover {
            cursor: default;
        }

    .btnRightRf2 {
        color: cyan;
        font-size: 16pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 0 2px;
        position: relative;
    }

        .btnRightRf2:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
        }

    .btnRightRf2_disabled {
        color: darkred;
        font-size: 16pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf2_disabled:hover {
            cursor: default;
        }


    /* ///////////////////////////////////////////////////////////////////////// */

    .cc_edt {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 18pt !important;
        border-color: #9BB7E0 !important;
        color: black !important;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    .cc_edt_red {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 18pt !important;
        border-color: #9BB7E0 !important;
        color: red !important;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    .cc_edt_red_bold {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 18pt !important;
        border-color: #9BB7E0 !important;
        color: red !important;
        font-weight: bold;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    /*.cc_edt_fastpath {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;*/
    /*font-size: 1.05em !important;*/
    /*font-size: 18pt !important;
        border-color: #9BB7E0 !important;
        color: black !important;
        clear: both !important;
    }*/

    .cc_bulletList {
        font-size: 12pt !important;
    }

    .cc_edtbtn {
        height: 150%;
        width: 150%;
        margin-top: 2px;
        margin-left: 8px;
    }

    .cc_edtbtncell:hover {
        background-color: #b6d7de;
    }

    .cc_Grid_Header {
        font-size: 12pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }

    .cc_Grid_Header2 {
        background-color: #5ea4e0;
        font-size: 12pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }

    .cc_Grid_Header3 {
        background-color: #039692;
        font-size: 12pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }


    tbody.cc_Grid_ThinRow > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        height: 35px !important;
        font-size: 18pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_ThinRow::selection > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        background-color: burlywood !important;
        height: 35px !important;
        font-size: 18pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_MultiRow > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        height: 35px !important;
        font-size: 18pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_MultiRow::selection > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        background-color: burlywood !important;
        height: 35px !important;
        font-size: 18pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_ThinRowWrap > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        /*height: DON'T SET BECAUSE OF MULTI-LINE TEXT FOR RF*/
        line-height: 14px !important;
        padding: 2px 2px 2px 3px !important;
        white-space: normal !important;
        cursor: pointer !important;
    }

    .gridSummaries {
        font-size: 12pt !important;
    }
}


/*####################################################################################################*/
/* 768 to 1023
/*####################################################################################################*/
/*@media (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) and (min-height: 768px) and (max-height: 1023px) {*/
@media (min-device-width: 768px) and (max-device-width: 1023px) {
    .copyright {
        float: right;
        font-size: 0.75em !important;
    }

    .can_title {
        background-color: #d76f29; /* #d76f29 */
        color: #fff; /* white */
        font-size: 1.5em;
        padding: 0 3px 3px 5px;
        width: 100%;
        overflow: hidden;
    }

    .lblLeftRf {
        color: ghostwhite;
        font-size: 13pt;
        float: left;
        margin: 3px 0 0 5px;
        padding: 0 2px 2px 2px;
        position: relative;
    }

    .btnLeftRf {
        color: ghostwhite;
        font-size: 13pt;
        float: left;
        margin: 3px 0 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnLeftRf:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
            font-weight: bold;
        }

    /* ///////////////////////////////////////////////////////////////////////// */
    .lblRightRf {
        color: black;
        font-size: 13pt;
        font-weight: bold;
        float: right;
        margin: 3px 0 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

    .btnRightRf {
        color: ghostwhite;
        font-size: 13pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
        }

    .btnRightRf_disabled {
        color: darkred;
        font-size: 13pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf_disabled:hover {
            cursor: default;
        }

    .btnRightRf2 {
        color: cyan;
        font-size: 13pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 0 2px;
        position: relative;
    }

        .btnRightRf2:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
        }

    .btnRightRf2_disabled {
        color: darkred;
        font-size: 13pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf2_disabled:hover {
            cursor: default;
        }


    /* ///////////////////////////////////////////////////////////////////////// */
    .cc_edt {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 15pt !important;
        border-color: #9BB7E0 !important;
        color: black !important;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    .cc_edt_red {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 15pt !important;
        border-color: #9BB7E0 !important;
        color: red !important;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    .cc_edt_red_bold {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 15pt !important;
        border-color: #9BB7E0 !important;
        color: red !important;
        font-weight: bold;
        clear: both !important;
        padding: 0 5px 0 5px;
        width: 99% !important;
    }

    /*.cc_edt_fastpath {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;*/
    /*font-size: 1.05em !important;*/
    /*font-size: 15pt !important;
        border-color: #9BB7E0 !important;
        color: black !important;
        clear: both !important;
    }*/

    .cc_bulletList {
        font-size: 13pt !important;
    }

    .cc_edtbtn {
        height: 125%;
        width: 125%;
        margin-top: 2px;
        margin-left: 8px;
    }

    .cc_edtbtncell:hover {
        background-color: #b6d7de;
    }

    .cc_Grid_Header {
        font-size: 9.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }

    .cc_Grid_Header2 {
        background-color: #5ea4e0;
        font-size: 9.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }

    .cc_Grid_Header3 {
        background-color: #039692;
        font-size: 9.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }


    tbody.cc_Grid_ThinRow > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        height: 30px !important;
        font-size: 14pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_ThinRow::selection > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        background-color: burlywood !important;
        height: 30px !important;
        font-size: 14pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_MultiRow > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        height: 30px !important;
        font-size: 14pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_MultiRow::selection > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        background-color: burlywood !important;
        height: 30px !important;
        font-size: 14pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_ThinRowWrap > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        /*height: DON'T SET BECAUSE OF MULTI-LINE TEXT FOR RF*/
        line-height: 14px !important;
        padding: 2px 2px 2px 3px !important;
        white-space: normal !important;
        cursor: pointer !important;
    }

    .gridSummaries {
        font-size: 10.5pt !important;
    }
}


/*####################################################################################################*/
/* 1024
/*####################################################################################################*/
/*@media (orientation: landscape) and (min-width: 1024px) and (orientation: portrait) and (min-height: 1024px) {*/
@media (min-device-width: 1024px) {
    .copyright {
        float: right;
        font-size: 0.75em !important;
    }

    .can_title {
        background-color: #d76f29; /* #d76f29 */
        color: #fff; /* white */
        font-size: 1em;
        padding: 0 3px 3px 5px;
        width: 100%;
        overflow: hidden;
    }

    /* ///////////////////////////////////////////////////////////////////////// */
    .lblLeftRf {
        color: ghostwhite;
        font-size: 10pt;
        float: left;
        margin: 3px 0 0 5px;
        padding: 0 2px 2px 2px;
        position: relative;
    }

    .btnLeftRf {
        color: ghostwhite;
        font-size: 10pt;
        float: left;
        margin: 3px 0 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnLeftRf:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
            font-weight: bold;
        }

    /* ///////////////////////////////////////////////////////////////////////// */
    .lblRightRf {
        color: black;
        font-size: 10pt;
        font-weight: bold;
        float: right;
        margin: 3px 0 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

    .btnRightRf {
        color: ghostwhite;
        font-size: 10pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
        }

    .btnRightRf_disabled {
        color: darkred;
        font-size: 10pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf_disabled:hover {
            cursor: default;
        }

    .btnRightRf2 {
        color: cyan;
        font-size: 10pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 0 2px;
        position: relative;
    }

        .btnRightRf2:hover {
            background-color: white;
            color: #66b2f3;
            cursor: pointer;
        }

    .btnRightRf2_disabled {
        color: darkred;
        font-size: 10pt;
        float: right;
        margin: 3px 10px 0 0;
        padding: 0 2px 2px 2px;
        position: relative;
    }

        .btnRightRf2_disabled:hover {
            cursor: default;
        }

    /* ///////////////////////////////////////////////////////////////////////// */
    .cc_edt {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 12pt !important;
        border-color: #9BB7E0 !important;
        color: black !important;
        clear: both !important;
        width: 99% !important;
    }

    .cc_edt_red {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 12pt !important;
        border-color: #9BB7E0 !important;
        color: red !important;
        clear: both !important;
        width: 93% !important;
    }

    .cc_edt_red_bold {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        /*font-size: 1.05em !important;*/
        font-size: 12pt !important;
        border-color: #9BB7E0 !important;
        color: red !important;
        font-weight: bold;
        clear: both !important;
        width: 93% !important;
    }

    /*.cc_edt_fastpath {
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;*/
    /*font-size: 1.05em !important;*/
    /*font-size: 12pt !important;
        border-color: #9BB7E0 !important;
        color: black !important;
        clear: both !important;
    }*/

    .cc_bulletList {
        font-size: 12pt !important;
    }


    /* ///////////////////////////////////////////////////////////////////////// */


    .cc_edtbtn {
        height: 100%;
        width: 100%;
        margin-top: 2px;
        margin-left: 2px;
    }

    .cc_edtbtncell:hover {
        background-color: #b6d7de;
    }

    .cc_Grid_Header {
        font-size: 7.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }

    .cc_Grid_Header2 {
        background-color: #5ea4e0;
        font-size: 7.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }

    .cc_Grid_Header3 {
        background-color: #039692;
        font-size: 7.5pt !important;
        font-weight: normal;
        padding: 2px 2px 2px 2px;
    }


    tbody.cc_Grid_ThinRow > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        height: 25px !important;
        font-size: 10pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_ThinRow::selection > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        background-color: burlywood !important;
        height: 25px !important;
        font-size: 10pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_MultiRow > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        height: 25px !important;
        font-size: 10pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_MultiRow::selection > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        background-color: burlywood !important;
        height: 25px !important;
        font-size: 10pt !important;
        line-height: 3px !important;
        padding: 1px 2px 1px 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    tbody.cc_Grid_ThinRowWrap > tr > td {
        border: 0.05px solid rgba(221, 217, 217, 0.34) !important;
        /*height: DON'T SET BECAUSE OF MULTI-LINE TEXT FOR RF*/
        line-height: 14px !important;
        padding: 2px 2px 2px 3px !important;
        white-space: normal !important;
        cursor: pointer !important;
    }

    .gridSummaries {
        font-size: 9pt !important;
    }
}