/*************** Document CSS *********************/

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*, *::before, *::after {
    box-sizing: border-box;
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

html {
    font-family: Verdana, Arial, sans-serif;
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

.bg_dark {
    background-color: #0378b3;
}

.show { display: block !important; }
.hide {
    display: none !important;
}
.flex {
    display: flex !important;
}

#screensize {
    float:right;
}

#pagecontainer {
    position: relative;
    z-index: 0;
    overflow: hidden;
    /*height: 1000vh;*/
    padding-bottom: 50px;
    background: url(../images/textures/grey.png) repeat scroll 0% 0% transparent;
    background: url(../images/textures/brushed-alum.png) repeat scroll 0% 0% transparent;
    background: url(../images/textures/redox-02.png) repeat scroll 0% 0% transparent;
    background: url(../images/textures/subtle-dark-vertical.png) repeat scroll 0% 0% transparent;
    background-color: #f2f9ff;
}

#maincontentcontainer {
    width: 100vw;
    background-color: #fff;
    margin: auto;
    background-color: transparent;
}

#bodycontentcontainer {
}

#footercontentcontainer {
}

/**********************************************************/
/*************** Header CSS *********************/

#announcementcontainer {
    width: 100%;
    height: 25px;
}

#topheaderrow, #middleheaderrow, #bottomheaderrow {
    height: 55px;
}

#bottomheaderrow {
    display: flex;
}

#headerlogocontainer {
    width: 220px;
    height: 160px;
    position: relative;
    display: inline-block;
}

/*************** Logo CSS *********************/

#weblogobg, #weblogo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 7px;
    left: 0;
}

#weblogobg {
    background: url(../images/weblogobg.png) no-repeat;
    background-size: 220px;
    opacity: 0.8;
}

#weblogo {
    background: url(../images/weblogo.png) no-repeat;
    z-index: 10;
    background-size: 220px;
    position: relative;
}

#weblogoname {
    position: relative;
    bottom: -170px;
    right: -43px;
    font-size: 1.2rem;
}

#weblogo:hover {
    cursor: pointer;
}

/*************** Top Header Row *********************/

#topheaderrow { position: relative; }

#accountlinkscontainer {
    float: right;
    position: absolute;
    bottom: 0px;
    right: 20px;
}

#topaccountlink, #topcartlink {
    position: relative;
    display: inline-block;
}

#topaccountlink {
    margin-right: 10px;
}

#topaccountlinkicon, #topaccountlinklabel, #topcartlinkicon, #topcartlinklabel {
    display: inline-block;
}

#topaccountlinkicon {
    bottom: 1px;
    position: relative;
}

#topaccountlinklabel, #topcartlinklabel {
    font-size: 0.95rem;
    position: relative;
    bottom: 4px;
}

#topcartlink {

}

#topcartlinkicon {

}

#topcartlinklabel {

}

/**********************************************************/
/*************** Middle Header Row *********************/

#headercontentcontainer {
    display: none;
}

#pagetitle {
    font-size: 24px !important;
    color: #0378b3 !important;
    display: inline-block;
}

#middleheaderrow {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+27,239ef7+100&0+31,0.65+100 */
    background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 27%, rgba(2,9,14,0) 31%, rgba(35,158,247,0.65) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 27%,rgba(2,9,14,0) 31%,rgba(35,158,247,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(0,0,0,0) 27%,rgba(2,9,14,0) 31%,rgba(35,158,247,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6239ef7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*************** Input Box with Label *********************/
#headersearch {
    display: inline-block;
    float: right;
    margin-top: 10px;
    margin-right: 20px;
}

.inputgroup {
    display: inline-block;
    height: 40px;
}

.inputboxcontainer {
    display: inline-block;
    vertical-align: top;
    height: 40px;
}

.inputgroup label {
    display: inline-block;
    margin-top: 7px;
    float: left;
    font-size: 16px;
    color: #666;
    margin-right: 10px;
}

.inputbox {
    display: inline-block;
    padding: 4px;
    font-size: 18px;
    line-height: 1.1;
    color: #CCC;
    vertical-align: middle;
    margin-top: 4px;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.inputglasscontainer {
    width: 37px;
    height: 30px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    display: inline-block;
    margin-left: -10px;
    margin-top: 4px;
    background-color: #036394;
}

.search__icon {
    float: left;
    width: 20px;
    height: 20px;
    fill: white;
    margin: 5px 8px;
}

#navbarbuttoncontainer {
    display: inline-block;
    float: right;
    width: auto;
    height: auto;
    position: relative;
    margin-right: 20px;
    top: 13px;
    z-index: 9001;
}

.navbarbutton {
    display: none;
}

.navbarbutton:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.navbarbutton {
    padding: 0.10rem 0.35rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: #f9f9fa;
    border: 1px solid #aaa;
    border-radius: 0.25rem;
    color: rgba(0, 0, 0, 0.5);
    /*border-color: rgba(0, 0, 0, 0.1);*/
}

.navbaricon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-category {
    display: block;
    font-size: 13px;
    position: relative;
    color: #666;
    padding: 0.5rem;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
}

.navbarsubmenushow {
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-transition: all 2s ease !important;
    -moz-transition: all 2s ease !important;
    -o-transition: all 2s ease !important;
    transition: all 2s ease !important;
}

.navbar-submenu-header {
    background-color: #0378b3;
    color: white;
    height: 26px;
    padding: 2px 10px;
    border-radius: 4px 4px 0px 0px;
}

.navbar-submenu-title {
    font-size: 0.9rem;
    font-weight: 500;
    font-style: italic;
}

.navbar-submenu-viewall {
    float: right;
    font-size: 0.7rem;
    margin-top: 2px;
}

.navbarsecondlevel {
    font-size: 1.0rem;
    padding-bottom: 5px;
}

.navbarthirdlevel {

}

/**********************************************************/
/*************** Bottom Header Row *********************/
#headerrowscontainer {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    flex: 1;
}

.headerrowcontainer {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid lightgray;
}

#headername {
    background: url(../images/header_name.png) no-repeat;
    height: 50px;
    width: 271px;
    background-size: 300px;
    background-position: 9px 7px;
    display: inline-block;
}

#topnavbarcontainer {
    /*background-color: lightgrey;*/
    /*width: 865px;*/
    height: 50px;
    margin: auto;
    display: inline-block;
    flex: 1;
}

#topnavbar {
    padding: 0px 10px;
    min-width: 700px;
}

#navbarfirst0 {
    width: 55px;
}

#navbarfirst1 {
    width: 58px;
}

#navbarfirst2 {
    width: 76px;
}

#navbarfirst3 {
    width: 49px;
}

#navbarfirst4 {
    width: 89px;
}

#navbarfirst5 {
    width: 58px;
}

#navbarfirst6 {
    width: 82px;
}

#navbarfirst7 {
    width: 92px;
}

#navbarfirst8 {
    width: 60px;
}



.bg-light {
    background-color: #f8f9fa !important;
    background: url(../images/textures/redox-02.png) repeat scroll 0% 0% transparent;
}

.navbar {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.nav-link {
    display: block;
}

.navbar .nav-link {
    color: #666;
    padding: 0.5rem;
}

.dropdown {
    font-size: 13px;
    position: relative;
}

.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    /*
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    */
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

#bodycontentcontainer {
    width: 100vw;
    background-color: #fff;
    margin: auto;
    margin-top: 10px;
    border: 1px solid #e2e2e2;
    padding: 10px;
    background-color: #f8f9fa !important;
    min-height: 300px;
}

/* ribbon style */
/*http://www.css3d.net/ribbon-generator/*/
.ribbon-wrapper {
    position: relative;
    margin-left: -10px;
    border-bottom: 5px solid #e9eef1;
    border-top: 0px solid #eeeed7;
    margin-top: 5px;
    width: calc(100% + 50px);
}

.ribbongradient {
    border-bottom: 10px solid #eeeed7;
    -moz-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -webkit-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -moz-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -webkit-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
}

.ribbon-front {
    height: 30px;
    position: relative;
    text-align: center;
    left: -15px;
    z-index: 2;
}

.ribbon-back-left {
    position: absolute;
    top: 10px;
    left: -29px;
    width: 30px;
    height: 30px;
    background-color: #edf4f8;
    z-index: 0;
}

.ribbon-back-right {
    position: absolute;
    top: 10px;
    right: 2px;
    width: 29px;
    height: 30px;
    background-color: #edf4f8;
    z-index: 0;
}

.ribbon-front,
.ribbon-back-left,
.ribbon-back-right {
    border: 1px solid #dadada;
    border-radius: 4px;
    box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 1px 0.8px rgba(0,0,0,0.3);
    -khtml-box-shadow: 0px 1px 0.8px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 0.8px rgba(0,0,0,0.3);
    -o-box-shadow: 0px 1px 0.8px rgba(0,0,0,0.4);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f9ff+0,b6d8ff+100 */
    background: rgb(242,249,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(242,249,255,1) 0%, rgba(182,216,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(242,249,255,1) 0%,rgba(182,216,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(242,249,255,1) 0%,rgba(182,216,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9ff', endColorstr='#b6d8ff',GradientType=0 ); /* IE6-9 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2fffa+0,d0f7e5+100 */
    background: rgb(242,255,250); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(242,255,250,1) 0%, rgba(208,247,229,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(242,255,250,1) 0%,rgba(208,247,229,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(242,255,250,1) 0%,rgba(208,247,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2fffa', endColorstr='#d0f7e5',GradientType=0 ); /* IE6-9 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e8f9ff+0,fdffff+7,e7fdff+10,ebf9ff+30,d3f0ff+54,c8e7fe+75,bcdcfe+100 */
    background: #e8f9ff; /* Old browsers */
    background: -moz-linear-gradient(top, #e8f9ff 0%, #fdffff 7%, #e7fdff 10%, #ebf9ff 30%, #d3f0ff 54%, #c8e7fe 75%, #bcdcfe 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e8f9ff 0%,#fdffff 7%,#e7fdff 10%,#ebf9ff 30%,#d3f0ff 54%,#c8e7fe 75%,#bcdcfe 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e8f9ff 0%,#fdffff 7%,#e7fdff 10%,#ebf9ff 30%,#d3f0ff 54%,#c8e7fe 75%,#bcdcfe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f9ff', endColorstr='#bcdcfe',GradientType=0 ); /* IE6-9 */
}

.ribbon-text {
    height: 20px;
    line-height: 28px;
    /*font-family: "Franklin Gothic Medium","Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;*/
    color: #3d80ab;
    font-size: 18px;
    position: relative;
    /*font-style: italic;*/
    text-shadow: 0px 1px 0px #eee;
}

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
    position: absolute;
    z-index: 1;
    border-style: solid;
    height: 0px;
    width: 0px;
}

.ribbon-edge-topleft,
.ribbon-edge-topright {
}

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
    top: 30px;
}

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
    left: -15px;
    border-color: transparent #678CA4 transparent transparent;
}

.ribbon-edge-topleft {
    top: 0px;
    border-width: 0px 15px 0 0;
}

.ribbon-edge-bottomleft {
    border-width: 0 15px 10px 0;
}

.ribbon-edge-topright,
.ribbon-edge-bottomright {
    left: 960px;
    border-color: transparent transparent transparent #678CA4;
    left: -15px;
    top: 0px;
}

.ribbon-edge-topright {
    top: 0px;
    border-width: 0px 0 0 15px;
}

.ribbon-edge-bottomright {
    border-width: 0 0 10px 15px;
    position: relative;
    float: right;
}









hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}



/*Style for Dialog boxes*/
.ui-widget.primadialog {
    font-family: Verdana,Arial,sans-serif;
    font-size: 12px;
}

.ui-widget-content.primadialog {
    background: #F9F9F9;
    border: 1px solid #A1988F;
    color: #222222;
}

.ui-dialog.primadialog {
    left: 0;
    outline: 0 none;
    padding: 0 !important;
    position: absolute;
    top: 0;
}

.ui-dialog.primadialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    position: relative;
    padding: 10px 20px !important;
    margin: 0;
}

.ui-dialog.primadialog .ui-widget-header {
    background: #EDF4F8;
    background: -webkit-gradient(linear, left top, left bottom, from(#EDF4F8), to(#DEF3FF));
    background: -moz-linear-gradient(top, #EDF4F8, #DEF3FF);
    border: 0;
    font-weight: bold;
    font-family: Arial,Helvetica,sans-serif;
    color: #666;
    font-size: 12px;
    border-bottom: 1px solid #BBB;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.ui-dialog.primadialog .ui-dialog-titlebar {
    padding: 5px;
    position: relative;
    font-size: 1em;
}

.ui-dialog.primadialog .ui-button-text {
    font-size: 0.9em;
    padding: 3px 5px;
}

.ui-dialog.primadialog .ui-state-focus {
    border: 1px solid #D3D3D3 !important;
}

.ui-dialog.primadialog .ui-state-hover {
    border: 1px solid #A1988F !important;
}

.ui-dialog.primadialog .ui-dialog-buttonpane {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    margin-top: 0px;
}







#menu_return_button_container {
    display: none;
    float: right;
}

.grid-container {
    display: grid;
    grid-template-columns: 145px 145px 145px 145px;
    gap: 50px;
    /*background-color: #007aaf;*/
    padding: 10px;
}

.grid-container > div {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    text-align: center;
    padding: 10px 0;
    font-size: 30px;
}

.toolkit_icon_label {
    font-size: 15px;
}

.toolkit_icons {
    border: solid 1px #c1c6c9;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

    .toolkit_icons:before, .toolkit_icons:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        top: 10px;
        bottom: 10px;
        left: 0;
        right: 0;
        -moz-border-radius: 100px / 10px;
        border-radius: 100px / 10px;
    }

    .toolkit_icons:after {
        right: 10px;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
    }


.toolkit_icons:hover {
    border: solid 1px #007aaf;
}

#remote_power_input_container {
    margin-top: 40px;
    margin-left: 50px;
    margin-bottom: 20px;
}

.remote_power_image_label {
    font-size: 18px;
    color: black;
    margin-top: 5px;
    FONT-WEIGHT: 500;
    font-style: italic;
}

#pdu_voltage_input, #ont_input, #combiner_container, #wire_gauge_input {
    width: 220px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}

#pdu_image, #ont_image, #combiner_image {
    width: 150px;
    height: 60px;
    display: inline-block;
    position: relative;
    z-index: 10;
}

.remote_power_slider_container {
    padding-bottom: 15px;
}

.remote_power_horizontal_line {
    display: inline-block;
    width: 480px;
    height: 5px;
    border-top: 2px solid black;
    position: relative;
    z-index: 0;
    margin-top: 38px;
    margin-left: -50px;
}

.remote_power_icon {
    border: 1px solid #007aaf;
    background-color: #b0d8f5;
    border-radius: 8px;
}

.remote_power_image_header {
    font-size: 11px;
    width: 148px;
    height: 18px;
    background-color: navajowhite;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-top: 1px;
    border-bottom: 1px solid #007aaf;
}

#wire_gauge_input {
    position: relative;
    vertical-align: top;
    margin-top: -167px;
    margin-left: 317px;
}

table.engineering_toolkit_result_table {
    font-size: 12px;
    width: 550px;
    border: 1px solid #bbb;
    border-collapse: collapse;
    margin: 0 auto;
    table-layout: fixed;
    width: 100%;
}

table.engineering_toolkit_result_table tr {
}

    table.engineering_toolkit_result_table td {
        border: 1px solid #bbb;
        padding-right: 6px;
    }

        table.engineering_toolkit_result_table td:nth-child(n) {
            text-align: right;
            background-color: #e5f2ff;
            min-width: 360px;
        }

        table.engineering_toolkit_result_table td:nth-child(2) {
            background-color: cornsilk;
            min-width: 140px;
        }

table.engineering_toolkit_result_table tfoot td {

}

.tcooutput, .tco_15yr_table {
    min-width: 100px;
}

/*CARBON SUMMARY TABLE*/


/*TCO SUMMARY SAVINGS TABLE*/
table.engineering_toolkit_result_table.tcooutput {
    width: 300px;
}

table.engineering_toolkit_result_table.tcooutput td {
    min-width: 200px;
}

table.engineering_toolkit_result_table.tcooutput tbody td {
    background-color: #f2f9ff;
}

table.engineering_toolkit_result_table.tcooutput td:nth-child(2) {
    background-color: cornsilk;
    min-width: 140px;
}

table.engineering_toolkit_result_table.tcoquickviewtable {
    width: 224px;
}

table.engineering_toolkit_result_table.tcoquickviewtable tr td {
    color: #555;
    width: 223px;
}

table.engineering_toolkit_result_table.tcoquickviewtable tfoot tr td {
    background-color: #016895;
    border: 1px solid #016895;
}

#btnSubmitAdvancedQuickView {
    padding: 1px 4px;
    font-size: 10px;
    margin-top: 5px;
}


/*15 YEAR TCO TABLE*/
#tco_tool_15year_table {
    display: block;
    /*margin-top: 160px;*/
}

table .engineering_toolkit_result_table.tco_15yr_table {
    min-width: 100px;
}

table.engineering_toolkit_result_table.tco_15yr_table thead tr td {
    font-size: 11px;
}

table.engineering_toolkit_result_table.tco_15yr_table td {
    min-width: 68px;
    font-size: 12px;
}

table.engineering_toolkit_result_table.tco_15yr_table td:nth-child(1) {
    min-width: 85px !important;
}

table.engineering_toolkit_result_table.tco_15yr_table tfoot tr td:nth-child(1) {
    font-size: 10px;
}

table.engineering_toolkit_result_table.tco_15yr_table td:nth-child(2) {
    background-color: #e5f2ff;
    
}

table.engineering_toolkit_result_table.tco_15yr_table td:nth-child(n) {
    background-color: #f2f9ff;
}

table.engineering_toolkit_result_table.tco_15yr_table tbody tr:nth-child(1) td {
    border-top: 2px solid #aaa;
}

table.engineering_toolkit_result_table.tco_15yr_table tfoot td:nth-child(n) {
    background-color: cornsilk;
}

table.engineering_toolkit_result_table.tco_15yr_table tfoot tr:nth-child(1) td {
    border-top: 2px solid #aaa;
}

.textcenter {
    text-align: center !important;
}

.textleft {
    text-align: left !important;
}

.textright {
    text-align: right !important;
}

table.engineering_toolkit_question_table {
    font-size: 14px;
    /*width: 550px;*/
    /*border: 1px solid #bbb;*/
    border-collapse: collapse;
    margin: 0 auto;
}

    table.engineering_toolkit_question_table tr {
    }

    table.engineering_toolkit_question_table td {
        /*border: 1px solid #bbb;*/
        padding-right: 6px;
    }

        table.engineering_toolkit_question_table td:nth-child(n) {
            text-align: right;
            /*background-color: #e5f2ff;*/
            min-width: 440x;
        }

        table.engineering_toolkit_question_table td:nth-child(2) {
            /*background-color: cornsilk;*/ 
            min-width: 140px;
            text-align: left;
        }

    table.engineering_toolkit_question_table tfoot td {
    }

.superscript {
    font-size: 9px;
    vertical-align: text-top;
}

.arrow-down {
    height: 0px;
    width: 0px;
    border: none;
    border-top: 7px solid #000000;
    border-left: 7px solid rgba(0,0,0,0);
    border-right: 7px solid rgba(0,0,0,0);
}

.arrow-up {
    height: 0px;
    width: 0px;
    border: none;
    border-bottom: 7px solid #000000;
    border-left: 7px solid rgba(0,0,0,0);
    border-right: 7px solid rgba(0,0,0,0);
}

.arrow-left {
    height: 0px;
    width: 0px;
    border: none;
    border-right: 7px solid #000000;
    border-top: 7px solid rgba(0,0,0,0);
    border-bottom: 7px solid rgba(0,0,0,0);
}

.arrow-right {
    height: 0px;
    width: 0px;
    border: none;
    border-left: 7px solid #000000;
    border-top: 7px solid rgba(0,0,0,0);
    border-bottom: 7px solid rgba(0,0,0,0);
}



.tco_advanced_group_arrow {
    display: inline-block;
    float: left;
    margin-top: 1px;
    margin-left: 16px;
    border: 1px solid #ccc;
    padding: 4px 7px;
    background-color: white;
    border-radius: 3px;
}

.tco_advanced_group_arrow:hover {
    cursor: pointer;
}

    /*Total Cost of Ownership Tool*/
#tco_input_container, #remote_power_tool_container, #tco_tool_header, #carbon_tool_simplified, #tco_tool_simplified, #tco_tool_advanced, #adv_fttd_div, #adv_rack_div,
#total_cost_of_ownership_tool_container, #optical_network_carbon_savings_tool_container {
    display: none;
}

#adv_rack_div {
    display: block;
}

.tcotoolname {
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    margin-left: 10px;
    display: inline-block;
}

table#adv_fttd_input {
    display: none;
}

.tcoviewselect{
    display: inline-block;
    float: right;
}

.tcotooldescription {
    TEXT-ALIGN: CENTER;
    MARGIN-TOP: 17px;
    color: #F89B2C !important;
    font-weight: 600;
}

.tcotoolselect {
    font-family: Verdana,Geneva,sans-serif;
    /*width: 120px;*/
    height: 30px;
    font-size: 15px;
    color: #AAA;
    background: url(/assets/images/checkout_selectboxdown.png) 93% center/12px no-repeat #FFF;
    border: 1px solid #A1988F;
    margin-top: 0;
    padding-left: 8px;
    padding-right: 10px;
}

#tco_input_container_simplified, #carbon_input_container_simplified {
    padding: 0px 20px;
    text-align: center;
}

#tco_simplifiedinput, #tco_advancedinput, #carbon_simplifiedinput {
    margin-top: 25px;
}

#tco_simplifiedinput, #carbon_simplifiedinput {
    display: inline-block;
    width: 600px;
}

#tco_simplifiedoutput, #carbon_simplifiedoutput {
    width: 475px;
    display: inline-block;
    /*border: 1px solid #ccc;*/
    margin-left: 22px;
    position: relative;
    vertical-align: top;
    Margin-top: 30px;
}

#tco_simplifiedoutput, #carbon_simplifiedoutput {
    display: none;
    visibility: hidden;
}

#tco_summary_chart {
    display: inline-block;
    visibility: visible;
    border: 1px solid #ccc;
    width: 400px;
    height: 300px;
}

.tco_singlelinequestioncontainer {
    margin-top: 5px;
}

.tco_inputbox {
    display: block;
    height: 24px;
    width: 300px;
    padding: 2px 10px;
    font-size: 18px;
    line-height: 1.1;
    color: #CCC;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.075) inset;
    vertical-align: middle;
    transition: border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;
}

.tco_inputbox:focus {
    color: #666;
    border-color: #94B8D5;
    outline: 0px none;
    box-shadow: 0px 1px 1px rgba(160, 207, 245, 0.6) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
}

.tco_numfloors {
    display: inline-block;
    width: 50px;
    text-align: center;
    height: 28px;
}

#width_tmp_select {
    display: none;
}

.adv_section_div {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 17px 30px 14px;
}

.adv_section_header_container {
    position: relative;
    display: block;
    width: 100%;
}

.adv_section_header {
    position: relative;
    display: inline-block;
    background-color: #f8f9fa;
    padding: 0px 5px;
    float: left;
    margin-left: 12px;
    margin-top: -2px;
}

.adv_section_header_reset {
    position: relative;
    display: inline-block;
    float: right;
    right: 20px;
    margin-top: -2px;
}

.button_tco.tco_reset_group {
    margin-top: 0px !important;
    padding: 3px 6px !important;
}

.radioitemcontainer, .checkboxitemcontainer {
    border: 1px solid #bbb;
    height: 30px;
    display: inline-block;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 2px 10px;
}

.checkboxitemcontainer {
    
}

.tco_radio_container, .tco_checkbox_container {
    padding-bottom: 3px;
}

.tco_radio {
    background-image: url(/assets/images/checkoutradio.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    padding-left: 22px;
    height: 18px;
    line-height: 18px;
    cursor: pointer;
}

.tco_radio, .tco_radio_label, .tco_checkbox, .tco_checkbox_label {
    display: inline-block;
    vertical-align: middle;
}

.tco_radio_label, .tco_checkbox_label {
    font-size: 16px;
}

.tco_checkbox_label {
    padding-left: 5px;
}

.tco_radio.selected {
    background-position: 0 -18px !important;
}

.checkbox_span {
    margin-top: -4px;
    position: relative;
    display: block;
    margin-left: -2px;
}

.tco_checkbox {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0px 3px 2px;
    width: 17px;
    height: 18px;
    display: inline-block;
    cursor: pointer;
    font-size: 18px;
    background: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    display: inline-block;
    margin-top: -1px;
}

.tco_adv_slider_container {
    height: 50px;
}

.tco_simplified_red_letters {
    font-size: 14px;
    color: black;
    font-weight: 500;
}

.tco_advanced_quickview {
    width: 250px;
    background-color: #016895;
    position: fixed;
    float: right;
    right: -230px;
    color: #ddd;
    text-orientation: sideways;
    writing-mode: vertical-lr;
    font-size: 14px;
    padding-top: 5px;
    font-weight: 500;
    padding-bottom: 5px;
}

.tco_advanced_quickview:hover {
    cursor: pointer;

}

#tco_quickview_results {
    writing-mode: horizontal-tb;
    text-orientation: revert;

}

#tco_adv_opencloseallgroups {
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    padding: 17px 87px 4px 0px;
}

#btnTCOAdvancedOpenAllGroups, #btnTCOAdvancedCloseAllGroups, #btnTCOAdvancedResetAllGroups {
    padding: 3px 6px;
    float: right;
    margin-left: 8px;
    margin-top: 0px;
}




/*Tabs*/
#tco_detailed_results_container, #tco_detailedresults_copy, #carbon_detailed_results_container {
    margin-top: 80px;
    display: block;
    position: relative;
    visibility: hidden;
    opacity: 0;
    z-index: 0;
}

#carbon_detailed_results_container {
    border: 1px solid #aaa;
    border-radius: 8px;
    margin-top: 20px;
}


#tco_detailed_annual_tab, #tco_detailed_initialcost_tab, #tco_detailed_energy_tab, #tco_detailed_carbon_tab, #tco_detailed_opticalcost_tab, #tco_detailed_copppercost_tab, #tco_detailed_bom_tab {
    font-size: 14px;
    text-align: center;
    line-height: 27px;
    height: 28px;
    width: 173px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 15px 15px 0px 0px;
    z-index: -1;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: top;
}

#tco_detailed_annual_tab, #tco_detailed_opticalcost_tab, #tco_detailed_carbon_tab {
    background-color: #e2e8ef;
}

#tco_detailed_annual_tab {
    border-bottom: none;
}

#tco_detailed_opticalcost_tab {
    left: -45px;
    z-index: -30;
}

#tco_detailed_carbon_tab {
    background-color: #e1fbe1;
    left: -90px;
    z-index: -60;
}

#tco_detailed_initialcost_tab, #tco_detailed_copppercost_tab {
    background-color: white;
    left: -15px;
    z-index: -10;
}

#tco_detailed_copppercost_tab {
    left: -60px;
    z-index: -40;
}

#tco_detailed_energy_tab, #tco_detailed_bom_tab {
    background-color: antiquewhite;
    left: -30px;
    z-index: -20;
}

#tco_detailed_bom_tab {
    left: -75px;
    z-index: -50;
}

#tco_detailed_annual_tab:hover, #tco_detailed_initialcost_tab:hover, #tco_detailed_energy_tab:hover, #tco_detailed_carbon_tab:hover, #tco_detailed_opticalcost_tab:hover, #tco_detailed_copppercost_tab:hover, #tco_detailed_bom_tab:hover {
    cursor: pointer;
}

.notabbottomborder {
    border-bottom: none !important;
}

.showtabbottomborder {
    border-bottom: 1px solid #ccc !important;
}

.tco_detailed_results_container_title h1 {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 16px 0;
    grid-gap: 14px;
    padding: 0 20px;
}

.tco_detailed_results_container_title h1:after, .tco_detailed_results_container_title h1:before {
    content: " ";
    display: block;
    border-bottom: 2px solid #ccc;
}


#tco_detailed_results_tab_container {
    position: absolute;
    z-index: 1;
    height: 0px;
    margin-top: -28px;
    width: 1240px;
}

#tco_detailed_results_content_container {
    width: 100%;
    background: #e2e8ef;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 15px 15px;
    padding: 10px;
    position: relative;
    top: -1px;
    z-index: 0;
    border: 1px solid #ccc;
    min-height: 442px;
}

#tco_tool_initialsummary_container, #tco_tool_initiallayer1_container, #tco_tool_initialequipment_container, #tco_tool_electricalcooling_container, #tco_tool_realestate_container {
    display: inline-block;
    position: relative;
    width: 23%;
}

#tco_tool_initialsummary_container {
    width: 30%;
}

#tco_tool_initialcost_container, #tco_tool_energy_container, #tco_tool_poncost_container, #tco_tool_tradcost_container, #tco_tool_carbon_container, #tco_tool_bom_container {
    position: absolute;
    display: none;
    visibility: hidden;
    margin-top: 20px;
    height: 0;
}

#tco_tool_firstcost_summary_container, #tco_tool_firstcost_parts_container {
    position: relative;
    display: inline-block;
    text-align: center;
}

#tco_tool_firstcost_parts_container {
    margin-top: 50px;
}

#tco_tool_initialsummary_table tr td {
    font-size: 16px;
}

#tco_tool_initiallayer1_table tr td {
    font-size: 14px;
}

#tco_tool_equipmentsummary_table tr td {
    font-size: 14px;
}

#tco_tool_electriccooling_table tr td {
    font-size: 14px;
}

#tco_tool_realestate_table tr td {
    font-size: 14px;
}

#tco_energysummary_table, #tco_energydetail_table, #tco_coolingdetail_table {
    /*table-layout: inherit;*/
}

#tco_energysummary_table tr td:nth-child(1), #tco_energydetail_table tr td:nth-child(1), #tco_coolingdetail_table tr td:nth-child(1) {
    width: 180px !important;
}

#tco_tool_energy_summary_container, #tco_tool_energy_parts_container {
    position: relative;
    display: inline-block;
    text-align: center;
}

#tco_tool_energy_parts_container {
    padding-top: 40px;

}

#tco_tool_energysummary_container, #tco_tool_energypower_container, #tco_tool_energycooling_container {
    display: inline-block;
    position: relative;
    width: 40%;
}

#tco_energysummary_table tr td,
#tco_energydetail_table tr td,
#tco_coolingdetail_table tr td 
{
font-size: 12px;
min-width: 100px;
}

#tco_energysummary_table thead tr:nth-child(n+1) td:nth-child(1),
#tco_energydetail_table thead tr:nth-child(n+1) td:nth-child(1),
#tco_coolingdetail_table thead tr:nth-child(n+1) td:nth-child(1) 
{
    background-color: transparent !important;
    border: 1px solid transparent;
    border-right: 1px solid #bbb;
}

.energytableseparatorcolumn {
    min-width: 15px !important;
    width: 15px !important;
    background-color: antiquewhite !important;
    border: none !important;
}

.energytabletopheader {
    background-color: rgb(62 131 183) !important;
    color: white;
    font-size: 16px;
}

/*OPTICAL COST & COPPER COST TAB*/
#tco_poncost_table, #tco_tradcost_table {
    table-layout: auto !important;
    position: relative;
    display: inline-block;
    border: 0;
}

#tco_poncost_table thead tr td, #tco_tradcost_table thead tr td {
    text-align: center;
}

#tco_poncost_table tr td:nth-child(1), #tco_tradcost_table tr td:nth-child(1) {
    width: 310px !important;
}

#tco_poncost_table td:not(:first-child), #tco_tradcost_table td:not(:first-child) {
    padding: 0px 8px !important;
}

#tco_poncost_table tbody .categoryheaderrow, #tco_tradcost_table tbody .categoryheaderrow {
    text-align: left;
    padding-left: 30px;
    background-color: #a6d2f1 !important;
}

.theadgrey {
    background-color: #c6cbd1 !important;
}

/*BOM TAB*/
#tco_tool_bom_container {
    width: 100%;
    text-align: center;
}

#tco_bom_table {
    table-layout: auto;
    width: 80%;
}

#tco_bom_table tbody tr td:nth-child(1) {
    width: 150px !important;
}

#tco_bom_table tbody tr td:nth-child(3) {
    width: 500px !important;
}


/*CARBON OFFSET TAB*/
#tco_tool_carbon_container {
    /*margin-top:-90px;*/
}

#tco_tool_carboncapexsummary_container, #tco_tool_carbontotalsummary_container {
    display: inline-block;
    width: 24% !important;
}

#tco_tool_carbontotalsummary_container {
    width: 26% !important;
}

#tco_carboncapexsummary_table, #tco_carbontotalsummary_table {
    display: inline-block;
    border: 0px solid transparent !important;
}

#tco_carbontotalsummary_table, #tco_carbonopexsummary_table, #tco_carbonopexpowerdetail_table, #tco_carbonopexcoolingdetail_table {
    /*table-layout: inherit;*/
}

#tco_carbontotalsummary_table tr td:nth-child(1), #tco_carbonopexsummary_table tr td:nth-child(1), #tco_carbonopexpowerdetail_table tr td:nth-child(1), #tco_carbonopexcoolingdetail_table tr td:nth-child(1) {
    width: 180px !important;
}

#tco_carbontotalsummary_table tfoot tr td:nth-child(1), #tco_carbonopexsummary_table tfoot tr td:nth-child(1), #tco_carbonopexsummary_table tfoot tr td:nth-child(1), #tco_carbonopexpowerdetail_table tfoot tr td:nth-child(1), #tco_carbonopexcoolingdetail_table tfoot tr td:nth-child(1) {
    font-size: 11px;
}

#tco_tool_carbonopex_summary_container, #tco_tool_carbonopex_parts_container {
    position: relative;
    display: inline-block;
    text-align: center;
}

#tco_tool_carbonopex_parts_container {
    padding-top: 40px;
}

#tco_tool_carbontotalsummary_container, #tco_tool_carbonopexsummary_container, #tco_tool_carbonopexpower_container, #tco_tool_carbonopexcooling_container {
    display: inline-block;
    position: relative;
    width: 40%;
}

#tco_carboncapexsummary_table tr td,
#tco_carbonopexsummary_table tr td,
#tco_carbonopexpowerdetail_table tr td,
#tco_carbonopexcoolingdetail_table tr td {
    font-size: 12px;
    min-width: 100px;
}

#tco_carbonopexsummary_table thead tr:nth-child(n+1) td:nth-child(1),
#tco_carbonopexpowerdetail_table thead tr:nth-child(n+1) td:nth-child(1),
#tco_carbonopexcoolingdetail_table thead tr:nth-child(n+1) td:nth-child(1) {
    background-color: transparent !important;
    border: 1px solid transparent;
    border-right: 1px solid #bbb;
}

.energytableseparatorcolumn {
    min-width: 15px !important;
    width: 15px !important;
    background-color: antiquewhite !important;
    border: none !important;
}

.energytabletopheader {
    background-color: rgb(62 131 183) !important;
    color: white;
    font-size: 16px;
}

#tco_tool_table_divider_plus, #tco_tool_table_divider_equal {
    display: inline-block;
    font-size: 40px;
    vertical-align: top;
    margin-top: 91px;
}


/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 480px) {
    #headerlogocontainer {
            position: relative;
            height: 110px;
            width: 140px;
        }

        #headerrowscontainer {
            width: 100vw;
            margin-top: -115px;
        }

        #topheaderrow, #middleheaderrow, #bottomheaderrow {
            width: 100vw;
        }

        #topheaderrow {
            height: 30px;
        }

        #topnavbarcontainer {
            display: none;
        }

        #headername {
            background: url(../images/header_name360.png) no-repeat;
            background-size: 117px;
            background-position: 150px 0px;
            background: url(../images/header_name360b.png) no-repeat;
            background-size: 150px;
            background-position: 142px 6px;
            width: 80vw;
            height: 55px;
        }

        #navbarbuttoncontainer {
            margin-right: 10px;
        }

        .navbarbutton {
            display: block;
        }

        #weblogobg, #weblogo {
            background-size: 140px;
            top: 0px;
            margin-top: -3px;
        }

        #bottomheaderrow {
            border: none;
            border-bottom: 1px solid lightgray;
        }

        #headersearch {
            width: 100vw;
            float: none;
            margin-right: 0px;
        }

        #txtInputSearch.inputbox {
            font-size: 16px;
            width: 225px !important;
        }

        #submitsearch.inputglasscontainer {
            height: 28px;
        }

        .inputgroup {
            display: block;
            width: 350px;
            margin: 0 auto;
        }
    }
    /* Smartphones (landscape) ----------- */
    @media only screen and (min-width : 480px) and (max-width : 820px) {
        #maincontentcontainer {
            width: calc(100% + 10px);
            padding-right: 10px;
        }

        #headerrowscontainer {
            padding-right: 8px;
            margin-top: -115px;
            width: calc(100% + 0px);
        }

        #headercontentcontainer, #bodycontentcontainer {
            width: calc(100% - 3px);
        }

        #headerlogocontainer {
            position: relative;
            height: 110px;
            width: 140px;
        }

        .headerrowcontainer {
            padding-left: 5px;
            padding-right: 5px;
        }

        #topheaderrow, #middleheaderrow, #bottomheaderrow {
            width: calc(100% + 8px);
        }

        #topheaderrow {
            height: 30px;
        }

        #weblogobg, #weblogo {
            background-size: 140px;
            top: 0px;
            margin-top: -3px;
        }

        #headername {
            background: url(../images/header_name360.png) no-repeat;
            background-size: 117px;
            background-position: 150px 0px;
            background: url(../images/header_name360b.png) no-repeat;
            background-size: 150px;
            background-position: 142px 6px;
            width: 50vw;
            height: 55px;
        }

        #txtInputSearch.inputbox {
            width: 180px !important;
        }

        #topnavbarcontainer {
            width: calc(100%);
            margin: 0px;
            padding: 0px;
            height: 45px;
        }

        .navbar-category {
            font-size: 11px;
            padding: 0.5rem 0.25rem;
        }

        .nav-item.dropdown {
            padding: 0px;
        }

        li.nav-item.dropdown {
            padding: 0px;
        }

        .dropdown {
            font-size: 11px;
        }

        #bottomheaderrow {
            height: 50px;
        }

        #topnavbar {
            width: calc(100% + 10px);
            padding-right: 0px;
        }
    }

    @media only screen and (min-width : 820px) and (max-width : 1200px) {
        #maincontentcontainer {
            width: calc(100% + 10px);
            padding-right: 10px;
        }

        #headerrowscontainer {
            padding-right: 8px;
        }

        #bodycontentcontainer {
            width: calc(100% - 16px);
        }
        /*
    #headerlogocontainer {
        position: relative;
        height: 110px;
        width: 140px;
    }
    .headerrowcontainer {
        padding-left: 5px;
        padding-right: 5px;
    }

    #topheaderrow, #middleheaderrow, #bottomheaderrow {
        width: 100vw;
    }

    #topheaderrow {
        height: 30px;
    }

    #weblogobg, #weblogo {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 20px;
        left: 0;
    }

    #weblogobg {
        background: url(../images/weblogobg.png) no-repeat;
        background-size: 220px;
        opacity: 0.8;
    }

    #weblogo {
        background: url(../images/weblogo.png) no-repeat;
        z-index: 10;
        background-size: 220px;
        position: relative;
    }

    #weblogoname {
        position: relative;
        bottom: -170px;
        right: -43px;
        font-size: 1.2rem;
    }

    #headername {
        background: url(../images/header_name360.png) no-repeat;
        background-size: 117px;
        background-position: 150px 0px;
        background: url(../images/header_name360b.png) no-repeat;
        background-size: 150px;
        background-position: 142px 6px;
        width: 50vw;
        height: 55px;
        background: url(../images/header_name.png) no-repeat;
        height: 50px;
        width: 271px;
        background-size: 300px;
        background-position: 9px 7px;
        display: inline-block;
    }

    #txtInputSearch.inputbox {
        width: 180px !important;
    }

    #topnavbarcontainer {
        width: 100vw;
        margin: 0px;
        padding: 0px;
        height: 45px;
    }

    .navbar-category {
        font-size: 11px;
        padding: 0.5rem 0.25rem;
    }

    .nav-item.dropdown {
        padding: 0px;
    }

    li.nav-item.dropdown {
        padding: 0px;
    }

    .dropdown {
        font-size: 11px;
    }

    #bottomheaderrow {
        height: 50px;
    }
    */


    }

    @media only screen and (min-width : 1200px) {
        #maincontentcontainer, #bodycontentcontainer {
            width: 1170px;
        }


        #headercontentcontainer {
            display: block;
        }
    }

    @media only screen and (max-width : 1300px) {
        .ribbon-back-left, .ribbon-back-right {
            display: none;
        }

        .ribbon-wrapper {
            border-bottom: 5px solid rgba(255, 255, 255, 0);
        }
    }

    @media only screen and (max-width : 1000px) {
        #weblogobg, #weblogo {
            background-size: calc(100% + 10px);
        }
    }

    @media only screen and (max-width : 920px) {
        #weblogobg, #weblogo {
            background-size: 140px;
        }

        #headerlogocontainer {
            position: absolute;
        }

        #headername {
            margin-left: 125px;
        }

        #headercontentcontainer {
            padding-left: 8px;
        }
    }

    @media only screen and (max-width : 1250px) {
        .ribbon-edge-bottomleft, .ribbon-edge-bottomright {
            display: none;
        }

        .ribbon-wrapper {
            width: calc(100% + 8px);
        }

        .ribbon-front {
            left: 6px;
        }
    }
    /*Horizontal Nav Bar*/
    .container-fluid .container {
    padding-left: 0;
    padding-right: 0;
}

.navbar-submenu {
    white-space: nowrap;
    /*height: 200px;*/
    min-width: 250px;
    background-color: white;
    display: block;
    position: absolute;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    box-shadow: 0 10px 20px -10px grey;
    margin-top: 8px;
    margin-left: -10px;
    /*display: none;*/
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    transition-delay: 0.25s;
    z-index: 1000;
}

.navbar-showarrow:after {
    content: "";
    position: absolute;
    top: 35px;
    left: 30%;
    border-style: solid;
    border-width: 25px 25px 0;
    border-bottom: 10px solid #0378b3;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.navbar-showarrow:before {
    content: "";
    position: absolute;
    top: 35px;
    left: 30%;
    border-style: solid;
    border-width: 26px 26px 0;
    border-bottom: 10px solid black;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    display: block;
    width: 0;
    z-index: 0;
}

.navbar-submenu.right {
    right: 0px;
}

    .navbar-submenu.right:after {
        left: auto;
        right: 20px;
    }

    .navbar-submenu.right:before {
        left: auto;
        right: 20px;
    }

.dropdown:hover > .navbar-submenu {
    /*display: block;*/
    visibility: visible;
    opacity: 1;
    transition-delay: 0.5s;
}

.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu a::after {
        transform: rotate(-90deg);
        position: absolute;
        right: 6px;
        top: .8em;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .1rem;
        margin-right: .1rem;
    }

ul {
    list-style: none;
    padding: 0;
    line-height: 1.5;
}

    ul li {
        list-style: none;
        padding-left: 10px;
    }

.navbarsubmenu-col-container {
    padding: 20px;
}

.navbar-submenu-col {
    display: inline-block;
    vertical-align: top;
    padding-right: 30px;
}

.navbar-submenu-col ul {
    line-height: 2em;
    font-size: 1em;
    color: black;
}

.navbar-submenu-col ul ul {
    line-height: 1.5em;
    font-size: .95em;
    color: #888;
    margin-bottom: 0rem;
}

.navlink {
    padding: 0;
}



.container-fluid {
    display: none;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(/assets/images/checkout_selectboxdown.png) 97% center no-repeat #EEE;
    background-position-x: 97%;
    background-position-y: 46%;
    background-size: 4% auto;
    border-radius: 4px;
}

.checkoutmonthselect, .checkoutyearselect {
    font-family: Verdana,Geneva,sans-serif;
    width: 120px;
    height: 30px;
    font-size: 15px;
    color: #AAA;
    background: url(/assets/images/checkout_selectboxdown.png) 93% center/12% auto no-repeat #FFF;
    border: 1px solid #A1988F;
    margin-top: 0;
    padding-left: 8px;
}

.configuration_question {
    color: #134977;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding-right: 10px;
}

.checkbox {
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0 3px 2px;
    cursor: pointer;
    background: #e1ffff; /* Old browsers */
    background: -moz-linear-gradient(top, #e1ffff 0%, #fdffff 5%, #e6f8fd 45%, #c8eefb 65%, #bee4f8 91%, #b1d8f5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e1ffff 0%,#fdffff 5%,#e6f8fd 45%,#c8eefb 65%,#bee4f8 91%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e1ffff 0%,#fdffff 5%,#e6f8fd 45%,#c8eefb 65%,#bee4f8 91%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 ); /* IE6-9 */
    height: 16px;
    width: 16px;
    font-size: .9em;
    margin-top: 0;
    line-height: 16px;
    color: #666;
}

.checkbox_question_question, .checkbox_question_checkboxes {
    display: inline-block;
    vertical-align: middle;
}

.checkbox_question_checkboxes {
    margin-left: 8px;
}

.weight500 {
    font-weight: 500 !important;
}

.checkmark {
    font-family: Arial;
    font-size: 20px;
    float: left;
    margin-left: -2px;
    margin-top: -4px;
}

.subQuestionContainer {
    display: none;
    height: 200px;
    width: 200px;
    background-color: white;
}

.button_tco:active {
    border-top-color: #1b435e;
    background: #1b435e;
}

.button_tco:hover {
    background: #AEDAEC;
    color: #FFF;
    cursor: pointer;
}

.button_tco {
    font-family: Verdana,Arial,sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: 12px;
    font-weight: 400;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999;
    color: #555;
    padding: 5px 8px;
    background: #E1F3FD;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#E1F3FD));
    background: -webkit-linear-gradient(top,#fff,#E1F3FD);
    background: -moz-linear-gradient(top,#fff,#E1F3FD);
    background: -ms-linear-gradient(top,#fff,#E1F3FD);
    background: -o-linear-gradient(top,#fff,#E1F3FD);
    margin-top: 15px
}

/*PANORAMA INVENTORY*/
#parse_ems_inventory_container {
    display: none;
    float: left;
}


    /*------------------------------------------------------------------------*/

/**
  * @yaireo/ui-range - CSS-only custom, flexible, range input
  *
  * @version v2.1.15
  * @homepage https://github.com/yairEO/ui-range
  */

.range-slider {
    --primary-color: #3b79b4;
    --value-offset-y: var(--ticks-gap);
    --value-active-color: white;
    --value-background: transparent;
    --value-background-hover: var(--primary-color);
    --value-font: 700 12px/1 Arial;
    --fill-color: var(--primary-color);
    --progress-background: #EEE;
    --progress-radius: 20px;
    --track-height: calc(var(--thumb-size)/2);
    --min-max-font: 12px Arial;
    --min-max-opacity: .5;
    --min-max-x-offset: 10%;
    --thumb-size: 22px;
    --thumb-color: white;
    --thumb-shadow: 0 0 3px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.5) inset, 0 0 0 99px var(--thumb-color) inset;
    --thumb-shadow-active: 0 0 0 calc(var(--thumb-size)/4) inset var(--thumb-color), 0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0,0,0,.4);
    --thumb-shadow-hover: var(--thumb-shadow);
    --ticks-thickness: 1px;
    --ticks-height: 5px;
    --ticks-gap: var(--ticks-height, 0);
    --ticks-color: silver;
    --step: 1;
    --ticks-count: (var(--max) - var(--min)) / var(--step);
    --maxTicksAllowed: 30;
    --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
    --x-step: Max( var(--step), var(--too-many-ticks) * (var(--max) - var(--min)) );
    --tickIntervalPerc_1: Calc( (var(--max) - var(--min)) / var(--x-step) );
    --tickIntervalPerc: calc( (100% - var(--thumb-size))/var(--tickIntervalPerc_1) * var(--tickEvery, 1) );
    --value-a: Clamp(var(--min), var(--value, 0), var(--max));
    --value-b: var(--value, 0);
    --text-value-a: var(--text-value, "");
    --completed-a: calc((var(--value-a) - var(--min) ) / (var(--max) - var(--min)) * 100);
    --completed-b: calc((var(--value-b) - var(--min) ) / (var(--max) - var(--min)) * 100);
    --ca: Min(var(--completed-a), var(--completed-b));
    --cb: Max(var(--completed-a), var(--completed-b));
    --thumbs-too-close: Clamp( -1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1 );
    --thumb-close-to-min: Min(1, Max(var(--ca) - 5, 0));
    --thumb-close-to-max: Min(1, Max(95 - var(--cb), 0));
    box-sizing: content-box;
    display: inline-block;
    height: Max(var(--track-height), var(--thumb-size));
    background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;
    background-size: var(--tickIntervalPerc) var(--ticks-height);
    background-position-x: calc(var(--thumb-size)/2 - var(--ticks-thickness)/2);
    background-position-y: var(--flip-y, bottom);
    padding-bottom: var(--flip-y, var(--ticks-gap));
    padding-top: calc(var(--flip-y) * var(--ticks-gap));
    position: relative;
    z-index: 1
}

    .range-slider[data-ticks-position='top'] {
        --flip-y: 1
    }

    .range-slider::before, .range-slider::after {
        --offset: calc(var(--thumb-size)/2);
        content: counter(x);
        display: var(--show-min-max, block);
        font: var(--min-max-font);
        position: absolute;
        bottom: var(--flip-y, -2.5ch);
        top: calc(-2.5ch * var(--flip-y));
        opacity: Clamp(0, var(--at-edge), var(--min-max-opacity));
        transform: translateX(calc( var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
        pointer-events: none
    }

    .range-slider::before {
        --before: 1;
        --at-edge: var(--thumb-close-to-min);
        counter-reset: x var(--min);
        left: var(--offset)
    }

    .range-slider::after {
        --at-edge: var(--thumb-close-to-max);
        counter-reset: x var(--max);
        right: var(--offset)
    }

.range-slider__values {
    position: relative;
    top: 50%;
    line-height: 0;
    text-align: justify;
    width: 100%;
    pointer-events: none;
    margin: 0 auto;
    z-index: 5
}

    .range-slider__values::after {
        content: '';
        width: 100%;
        display: inline-block;
        height: 0;
        background: red
    }

.range-slider__progress {
    --start-end: calc(var(--thumb-size)/2);
    --clip-end: calc(100% - (var(--cb) ) * 1%);
    --clip-start: calc(var(--ca) * 1%);
    --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
    position: absolute;
    left: var(--start-end);
    right: var(--start-end);
    top: calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/2 - var(--track-height)/2);
    height: calc(var(--track-height));
    background: var(--progress-background, #EEE);
    pointer-events: none;
    z-index: -1;
    border-radius: var(--progress-radius)
}

    .range-slider__progress::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        clip-path: var(--clip);
        top: 0;
        bottom: 0;
        background: var(--fill-color, black);
        box-shadow: var(--progress-flll-shadow);
        z-index: 1;
        border-radius: inherit
    }

    .range-slider__progress::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        box-shadow: var(--progress-shadow);
        pointer-events: none;
        border-radius: inherit
    }

.range-slider > input {
    -webkit-appearance: none;
    width: 100%;
    height: var(--thumb-size);
    margin: 0;
    position: absolute;
    left: 0;
    top: calc(50% - Max(var(--track-height), var(--thumb-size))/2 + calc(var(--ticks-gap)/2 * var(--flip-y, -1)));
    cursor: -webkit-grab;
    cursor: grab;
    outline: none;
    background: none
}

    .range-slider > input:not(:only-of-type) {
        pointer-events: none
    }

    .range-slider > input::-webkit-slider-thumb {
        appearance: none;
        border: none;
        height: var(--thumb-size);
        width: var(--thumb-size);
        transform: var(--thumb-transform);
        border-radius: var(--thumb-radius, 50%);
        background: var(--thumb-color);
        box-shadow: var(--thumb-shadow);
        pointer-events: auto;
        transition: .1s
    }

    .range-slider > input::-moz-range-thumb {
        appearance: none;
        border: none;
        height: var(--thumb-size);
        width: var(--thumb-size);
        transform: var(--thumb-transform);
        border-radius: var(--thumb-radius, 50%);
        background: var(--thumb-color);
        box-shadow: var(--thumb-shadow);
        pointer-events: auto;
        transition: .1s
    }

    .range-slider > input::-ms-thumb {
        appearance: none;
        border: none;
        height: var(--thumb-size);
        width: var(--thumb-size);
        transform: var(--thumb-transform);
        border-radius: var(--thumb-radius, 50%);
        background: var(--thumb-color);
        box-shadow: var(--thumb-shadow);
        pointer-events: auto;
        transition: .1s
    }

    .range-slider > input:hover {
        --thumb-shadow: var(--thumb-shadow-hover)
    }

        .range-slider > input:hover + output {
            --value-background: var(--value-background-hover);
            --y-offset: -5px;
            color: var(--value-active-color);
            /*box-shadow: 0 0 0 3px var(--value-background)*/
        }

    .range-slider > input:active {
        --thumb-shadow: var(--thumb-shadow-active);
        cursor: grabbing;
        z-index: 2
    }

        .range-slider > input:active + output {
            transition: 0s
        }

    .range-slider > input:nth-of-type(1) {
        --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999,1)
    }

        .range-slider > input:nth-of-type(1) + output {
            --value: var(--value-a);
            --x-offset: calc(var(--completed-a) * -1%)
        }

            .range-slider > input:nth-of-type(1) + output:not(:only-of-type) {
                --flip: calc(var(--thumbs-too-close) * -1)
            }

            .range-slider > input:nth-of-type(1) + output::after {
                content: var(--prefix, "") var(--text-value-a) var(--suffix, "")
            }

    .range-slider > input:nth-of-type(2) {
        --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999,1)
    }

        .range-slider > input:nth-of-type(2) + output {
            --value: var(--value-b)
        }

    .range-slider > input:only-of-type ~ .range-slider__progress {
        --clip-start: 0
    }

    .range-slider > input + output {
        --flip: -1;
        --x-offset: calc(var(--completed-b) * -1%);
        --pos: calc(((var(--value) - var(--min))/(var(--max) - var(--min))) * 100%);
        pointer-events: none;
        position: absolute;
        z-index: 5;
        background: var(--value-background);
        border-radius: 8px;
        padding: 0px 4px;
        left: var(--pos);
        transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));
        transition: all .12s ease-out, left 0s
    }

        .range-slider > input + output::after {
            content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
            font: var(--value-font)
        }}