:root {
    --dark-mode-background-color: #434343;
    --dark-mode-card-background-color: #333333;
}

/*Liquid Layout styles */
#pagecontent {
    text-align:left;
    font-size: 0;
    padding-bottom:40px; /* Height of the footer element plus 10 for spacing */
}
#footer
{
    padding:12px 0;    
}
.grid 
{
    display:inline-block;
    font-size:initial;
    vertical-align: top;
}

/*.col1-1
{
    display: inline-block;
    vertical-align: top;
    width:100%;
}
.col2-1, .col2-2, .col3-1, .col3-2, .col3-3 , .col4x2-DO WE EVEN USE THIS?
{
    width:495px;
    display: inline-block;
    vertical-align: top;
}

.col4x1
{
    width: 247px;
}

.col4x3
{
    width: -moz-calc(100% - 247px);
    width: -webkit-calc(100% - 247px);
    width: calc(100% - 247px);
    min-width: 743px;
}*/

/*---IF WE MAINTAIN OUR CURRENT COLUMN PARADIGM I SUGGEST THE FOLLOWING STYLING---*/
.col1-1
{
    width:100%;
}
.col2-1, .col2-2
{
    width:50%;
}
.col3-1, .col3-2, .col3-3
{
    width:33.33333333333333%;
}
.col4x1 
{
    width: 247px;
}
.col4x3 
{
    width: -moz-calc(100% - 247px);
    width: -webkit-calc(100% - 247px);
    width: calc(100% - 247px);
    min-width: 247px;
}

/* ---THESE ARE NEW COLUMNS FOR A MORE RESPONSIVE UI--- */
.col
{
    display: inline-block;
    vertical-align: top;
    /*float: left;*/
}

.size1of1 { width:100%; }
.size1of2 { width:50%; }
.size1of3 { width:33.33333333333333%; min-width:470px;}
.size1of4 { width:25%; }
.size3of4 { width:75%; }
.size1of8 { width:12.5%; }

/* Reference
.size8of8{width:100%;}
.size7of8{width:87.5%;}
.size6of8{width:75%;}
.size5of8{width:62.5%;}
.size4of8{width:50%;}
.size3of8{width:37.5%;}
.size2of8{width:25%;}
.size1of8{width:12.5%;}
.size4of4{width:100%;}
.size3of4{width:75%;}
.size2of4{width:50%;}
.size1of4{width:25%;}
.size2of2{width:100%;}
.size1of2{width:50%;}
.size3of3{width:100%;}
.size2of3{width:66.66666666666666%;}
.size1of3{width:33.33333333333333%;}
.size1of1{width:100%;}
*/


/* ---WE ARE CURRENTLY USING FLUIDPANELS AND FLUID PRIMARILY FOR MARGIN TOP AND MARGIN RIGHT. WE CAN USE THE PAGECONTENT CLASS INSTEAD!!!--- */
.fluidpanels, .fluid
{
    margin-right: 5px;
    margin-top: 5px;
    font-size:0;
}
.fluidpanels .fluid
{
    margin-right: 0px;
}
.fluidpanels .fluidpanels
{
    margin-right: 0px;
    margin-top: 0px;
}

#quotenav 
{
    border:1px solid #CCCCCC;
    margin-top:-11px;
    margin-bottom:5px;
    margin-left: 5px;
    background-color:#fff;
    /* border-bottom-right-radius:3px;
    -webkit-border-bottom-right-radius:3px;
    -moz-border-bottom-right-radius:3px;
    border-bottom-left-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-bottom-left-radius:3px; */
}

body
{
    background-color:#F3F3F3;
}

div.panel div.title
{
    overflow: visible;
    min-height:23px;
    padding:0px 0px 3px 5px;
}
/*div.panel.toolbar { padding: 5px 5px 6px 5px; }*/
div.panel.toolbar { padding: 0px 5px 6px 5px; } /* RESPONSIVE UI */
div.panel.toolbar .btn
{
    margin-top:6px;
}
div.panel.toolbar .toolbutton, div.panel.toolbar a:link, div.panel.toolbar .left .btn
{
    margin-top: 5px !important;
}
div.panel.toolbar .left .btn
{
    margin-top: 6px !important;
}

#helpmask
{
    width:100%;
    height:100%;
    height:-moz-calc(100% - 51px);
    height:-webkit-calc(100% - 51px);
    height:calc(100% - 51px);
    margin-top:-5px;
}

/* -- OPEN QUOTE AND SUCCESSLIST -- */
#docmode
{
    width: 275px;
}

/* --- SETTINGS SOURCE GROUPS --- */

.source-list-container
{
    width: 50% !important;
    margin-right: 0px !important;
}
.source-list {
    width: 100% !important;
    border: 1px dashed #888 !important;
}


/* --- IE10'S VIEWPORT UI SCALING -- */
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

/* Dark Mode Theme */

body.darkMode .grid 
{
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode .col1-1
{
    background-color: var(--dark-mode-background-color);
}

/* End Dark Mode Theme */