/*When pushing to production these css needs to add in style.css*/

.mobile.account .half-site { width:100%;padding:0 0 10px;background-color: #f3f3f3;margin-bottom:20px; }
.mobile.account .half-site p.box_account { padding: 20px 0px 20px 5px;margin-left: 10px;font-size: 22px;    background-image: url(/img/Separater.png);background-size: 95%; }
.mobile .half-site.account_info > div { width:100%;margin-left:10px;padding-bottom: 10px; }
.mobile .orders1 { background:transparent !important; }
#acc_load_orders { width: calc( 100% - 10px); padding-bottom: 10px;margin-left:10px; }
.orders { width:97% !important; }
.app_ship, .app_bill { line-height: 14px; }
.datacorner_label { font-size:10px;color:#6A6A6A; }
#framersTable td { vertical-align: top; }
#framersTable1 em { font-style: normal;display: block; }
#framersTable1 .orders1 em:nth-child(3){ margin-top:10px; }
#corners tbody td:first-child { vertical-align: middle; }
/*end*/

.head_slide { width: 100%;margin-bottom: 15px; }

/*Hamburger CSS*/

div#navtoggler_acc{  /* Sample burger icon to toggle menu state */
    z-index: 9;
    display: block;
    position: relative;
    font-size: 7px;
    /* change font size to change label dimensions. Leave width/height below alone */
    width: 4em;
    height: 2em;
    top: 0;
    left: 0;
    text-indent: -1000px;
    border: 0.6em solid black;
    /* border color */
    border-width: 0.6em 0;
    cursor: pointer;
    margin-top: 33px;
    margin-right: 30px;
}


div#navtoggler_acc::before{ /* Sample burger icon */
  /* inner strip inside label */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.6em;
  top: 50%;
  margin-top: -0.3em;
  left: 0;
  background: black; /* stripes background color. Change to match border color of parent label above */
}

nav#ddfullscreenmenu_acc{ /* Full screen nav menu */
  width: 100%;
  height: 100%;
  visibility: hidden;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  -webkit-transform: scale(0.9);  /* initially scale down nav size */
  transform: scale(0.9);
  background: white; /* menu background color */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 20px;
	z-index: 100000;
  opacity: 0;
  overflow: hidden;
  overflow-y: auto;
	text-align: left;
  -webkit-transition: visibility 0s 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

nav#ddfullscreenmenu_acc.openmenu{ /* open menu class */
	visibility: visible;
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
  -webkit-transition-delay: 0s;
  -transition-delay: 0s;
}

nav#ddfullscreenmenu_acc div#closex_acc{ /* Large x close button inside nav */
  width: 36px;
  height: 50px;
	overflow: hidden;
  display: block;
  position: absolute;
  cursor: pointer;
	text-indent: -1000px;
  z-index: 10;
  top: 5px;
  right: 5px;
}

nav#ddfullscreenmenu_acc div#closex_acc::before, nav div#closex_acc::after{ /* render large cross inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background: black;
  top: 50%;
  margin-top: -3px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

nav#ddfullscreenmenu_acc div#closex_acc::after{ /* render large cross inside close button */
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


div#ulwrapper_acc{
  position: relative;
  width: 100%; /* menu UL width */
  /*margin: auto;*/
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: 50%;
  perspective-origin: 50%;
}

nav#ddfullscreenmenu_acc ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  max-height: 100%;
  font: bold 2em 'Bitter', Lato; /* use google font inside nav UL */
	-webkit-transition: all 0.5s .1s;
	transition: all 0.5s .1s;
}

nav#ddfullscreenmenu_acc ul li{
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 1px solid lightgray;
}

nav#ddfullscreenmenu_acc ul li.header > a:after{ /* right arrow inside header LIs */
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 8px solid darkred;
  border-color: transparent transparent transparent darkred;
}

nav#ddfullscreenmenu_acc ul.submenu{ /* style for non "first page" ULs */
  position: absolute;
  top: 0;
  left: 0;
	opacity: 0;
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
}

nav#ddfullscreenmenu_acc ul li a,
nav#ddfullscreenmenu_acc ul li.breadcrumb{
	text-decoration: none;
  color: black; /* link color */
  text-transform: uppercase;
  padding: 15px 15px 10px 25px;
  display: block;
  /*border-radius: 20px;*/
  cursor: pointer;
  font-size: 1.4rem;
}

nav#ddfullscreenmenu_acc ul li.breadcrumb{
  background: #eee;
  position: relative;
}

nav#ddfullscreenmenu_acc ul li.breadcrumb:after{ /* back arrow inside breadcrumb LI */
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid darkred;
  border-color: transparent darkred transparent transparent;
}

nav#ddfullscreenmenu_acc ul li a:hover{
  background: #eee;
}


nav#ddfullscreenmenu_acc ul.hidemenu{
  transform: rotateY(30deg) translateZ(-5px) !important;
  opacity: 0;
  pointer-events: none;
}

nav#ddfullscreenmenu_acc ul.showmenu{
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  pointer-events: auto;
}


/*Hamburger CSS end*/


.box_account{ font-family: Josefin Sans; }

.avaiable_info{ text-align: left;width: 90%;margin: auto;padding: 5px 0px; }
.dataspan { float: right; }
.list-products li:not(.item-line){ width: 33%;max-width: inherit;max-height: unset !important; }
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .list-products li:not(.item-line){ width: 42%;max-width: inherit; }
}
.cornerStyle{
    overflow: hidden; 
    max-height: 500px; 
    width: 91px; 
    padding-right: 12px; 
    outline: none;
}
#tablehead{
    background: none; font-weight:normal; width:99%; top:130px;display: block;padding-top: 30px;
}

.printInfo:hover{
    height:32px;
    width:32px;
    padding-top:6px;
}
#a:hover + #b {
    text-decoration: underline;
}
.printText:hover{
    text-decoration: underline;
    text-align: left;
}
#imgHoverGrid:hover {
  border: 1px solid grey !important;
  padding:0px;
}

.black-border{
    border: 1px solid grey !important;
}
#imgHoverList:hover {
  border: 1px solid grey !important;
  padding:0px;
}
 #corners thead, #framersTable thead{
    position: fixed
 }
 .winIE #framersTable{
    width: 99% !important; 
 }
 .winIE #servicePopper2{
    width:44.5% !important;
 }
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    .mac-os.ipad #servicePopper4{
        left:10px !important;
    }
 }
 .winIE .table_template{
     overflow-x:hidden;
 }
 .winIE #corners thead, .winIE #framersTable thead{
     position: absolute;
 }
.mac-os.safari.ipad .header_right{ width:45%; }
 
 @media  (max-width:1366px){
     .frozen-header{width: 95%}
 }
  @media  (min-width:1367px){
     .frozen-header{width: 95.5%}
 }
 #corners tr{
     cursor:default;
 }
.truck_delivery{
    font-size:12px;
}
.popper__border.pricing_popper_border:not(.framer_popper .pricing_popper_border) {
    left: calc(28% - 10px) !important;
}
.header_right_li:focus{
    font-size: 14px;
    position: relative;
    top: -1px;
    left: -1px;
}

#dropdownset {
    display:inline-flex;
    height:28px;
    
}
#dropdownset span{
    vertical-align:middle!important;
}

#dropdownset .CaptionCont.SelectBox{
    padding: 1px 8px;
}

#dropdownset .optWrapper{
    
    top:29px!important;
}

#dropdownset .optWrapper ul.options{
    
text-align:left!important;
    
}

#dropdownset .optWrapper ul.options li.opt{
    
padding-left:20px!important;
    
}

.quick-de.val.select-values{
    margin-left: 5px;
}
.drop{
    font-size:12px;
}
.orders thead {
    font-size: 12px;
}
.scrollbox3 {
    overflow: auto;
    width: 670px;
    height: 160px;
    padding: 0 5px;
    border:none;
    width:98% !important;
}

.track3 {
    width: 7px;
    background: rgba(0, 0, 0, 0);
    margin-right: 2px;
    border-radius: 10px;

}


.handle3 {
    width: 7px;
    right: 0;
    background: #999;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 7px;
}


.scrollbox4 {
    overflow: auto;
    width: 98% !important;
    padding: 0 5px;
    border:none;
}
.scrollbox5 {
    overflow: auto;
    width: 98% !important;
    padding-bottom: 10px !important;
    padding-left: 0px !important;
    padding-right:0px !important;
    border:none;
    
}
.track5 {
    width: 100% !important;
    background: rgba(0, 0, 0, 0);
    margin-right: 2px;
    border-radius: 10px;
    padding-left:8px !important;
}


.handle5 {
    width: 7px;
    right: 0;
    background: #999;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 7px;
}

.track4 {
    width: 7px;
    background: rgba(0, 0, 0, 0);
    margin-right: 2px;
    border-radius: 10px;

}


.handle4 {
    width: 7px;
    right: 0;
    background: #999;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 7px;
}


.service_corner #ago {
  width: 113px;
}
.service_corner .drop {
  text-align: left;
  margin-bottom: 10px;
  padding-left:10px;
}

#corners thead tr td {
    font-size: 12px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: normal;
    padding-bottom: 3px;
    text-align:center;
}
#corners table {
  border: 1px;
}
#corners tbody  td {
  padding-top: 7px;
  padding-bottom: 10px;
  padding-left: 0;
  vertical-align:top;
}
input[type="email"], input[type="password"], input[type="text"]:not(#autocomplete):not(#autocomplete-bckg)
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}
.winIE .search .clear_input{
    top: 8px;
}
.load {
    background: rgba(0, 0, 0, 0.1) url(/img/loader3.gif) no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
    background-position: center;
    background-size: 9%;
}
       textarea {
    border-radius: 1em;
	padding:6px;
    border: 0.5px solid #a9a8a7;
    outline: none;
    resize: none;
}
/*#add-item:hover {
    background: #8b2e2d !important;
}*/
.poprefrence{
    color:#dc7027;
    border-bottom: 1px solid #F4A87E;
}
#popEmail:hover{
    border-bottom: 1px solid black;
}
.textdiv {
   margin: 10px auto;
   background: #f6f6f6;
    
   border-radius: 10px;
  }
  .textdivYellow {
    margin: 15px auto;
   background: rgba(255, 255, 51, 0.26);
   border-radius: 10px;
  }
  .textdivNoBG {
   margin: 10px auto;
   border-radius: 10px;
  }
.action-add a {
    background: #a9413f none repeat scroll 0 0;
    color: #fff;
    font-size: 16px;
    margin-top: 30px;
    padding: 7px 34px;
    text-decoration: none;
}
.action-add1 a {
    background: #a9413f none repeat scroll 0 0;
    color: #fff;
    font-size: 16px;
    margin-top: 30px;
    padding: 7px 34px;
    text-decoration: none;
}
input[type="radio"]{
    vertical-align: middle;
    
    float:none;
}
/*.border-bottom {
    width: 83% !important;
}not needed*/
.action-add1{
    margin-bottom: 20px;
    margin-top:5% !important;
}
.action-add{
    margin-bottom: 20px;
}
.account_dashboard .spinner {
    background: url("/img/spinner.gif") no-repeat scroll 40% center rgba(0, 0, 0, 0.05);
}

.pad_class{
    padding:0px 0px;
}


.custom_header{
    padding-top: 20px;
    display:flex;
}
.custom_header_text{
    font-weight:bold !important;
    font-size:30px !important;
}

.header_left{
    width:100%;
    display:flex;
}
.header_right{
    width:50%;
    padding-top: 25px;
}
.header_right_li { 
    padding-left: 1em; 
    color: #dc7027;
    font-size:13px;
    width: 100px;
    text-decoration: underline;
    padding-top:17px;
}

 .header_right_li:before {
    /*content: "• ";
    color: #F4A87E;*/ /* or whatever color you prefer */
    padding-right:0px;
}

.header_right_li_popover { 
    padding-left: 1em; 
    text-indent: -.7em;
    font-size:small;
    font-weight:normal;
    color:#5f5f5f;
}
.header_right_li_popover:before {
    content: "• ";
    color:#5f5f5f;
}

.short-link li a{
    font-weight:bold;
}
.short-link li:hover a {
    font-size: 14px !important;
    position: relative;
    left: -3px;
    top:-1px;
}
.menu li{
    /* padding-right:2px; */
}
.custom_link:link, .custom_link:visited, .custom_link:hover, .custom_link:active {
    color: #dc7027;
}
/** popover related **/


.table_template{
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-family: arial;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding-top: 5px;
   /* min-width: 850px;*/
}
.cnt {
   background: #a9413f none repeat scroll 0 0;
    color: #fff;
    font-size: 16px;
    padding: 5px 40px;
    text-decoration: none;
}
.product-layout table {
    border-collapse: collapse;
    width:100%;
}
.product-layout thead tr td:first-child {
    padding-left: 5px;
}
.product-layout thead tr td {
    color: #a9a8a7;
    font-size: 17px;
    border-bottom: 1px solid #8f8f8f;
}
thead tr td {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
   /* color: black; */
   color: gray;
   text-align:left;
}
.product-layout tbody tr td {
    border-bottom: 1px solid #e0e0e0;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 14px;
    color: #7c7b7a;
}
tbody tr td {
    color:black;
    font-size: 12px;
    width: 100px;
    padding: 5px 5px;
    text-align:left;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
	border-right: 0px solid #e0e0e0;
	padding-top: 13px;
    padding-bottom: 13px;
}
.recntorder tr td{
    color: #7c7b7a;
    font-size: 14px;
    width: 100px;
    padding: 5px 5px;
    text-align:left;
    border-bottom: 1px solid #e0e0e0;
    border-left: none;
	border-right: none;
	padding-top: 13px;
    padding-bottom: 13px;
    vertical-align:middle;
}
.framer_programmer_popover tr td {
    color: #7c7b7a;
    font-size: 14px;
   
    padding: 5px 5px;
    text-align:left;
}
.row tbody tr td {
    color: #7c7b7a;
    font-size: 14px;
    padding: 5px 5px;
    text-align:left;
}
.popper.service_popper {
    width: 45% !important;
    min-width:479px;
    border-radius:0.5em !important;
}
.popper.programmer_popper{
    border-radius:0.5em !important;
    top:17px !important; 
}
.popper {
  display: none;
  height: auto !important;
  width: auto !important;
  box-shadow: 3px 3px 3px #a9a8a7;
  background-color:white;
  border: 1px solid #a9a8a7;
  z-index: 10000;
}

.service_corner{
    width:70% !important;
}
@media(max-width:1160px){
    .service_corner{
        width:90% !important;
        transform: translate3d(15px, 50px, 0px) !important;
    }
}
.mac-os.ipad .service_corner{
    width:77% !important;
}

.link-anchor {
  position: relative;
  width: 0;
  font-size: .8em;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}
.anchor-wrapper {
  border: none;
}
.anchor-wrapper:hover .link-anchor {
  opacity: 1;
}

section h1[id]:focus,
section h2[id]:focus,
section h3[id]:focus,
section h4[id]:focus,
section h5[id]:focus {
  outline: 0;
}

p.thin {
    font-weight: 100;
    margin: 0;
    line-height: 1.2em;
}

p.bold {
    font-weight: 900;
    margin: 0;
    margin-top: -5px;
}

.rel {
    width: 30%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    padding: 20px;
    border-style: dotted;
    border-color: white;
    border-width: medium;
}

.popper,
.tooltip {
    position: absolute;
    color: black;
    width: 150px;
    border-radius: 3px;
    /*box-shadow: 0 0 2px rgba(0,0,0,0.5);*/
    padding: 10px;
    text-align: center;
}
.style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 10px;
}

.popper__arrow_service {
    left: calc(51% - 40px) !important;
}

.popper__arrow_bottom_service{
    left: calc(51% - 41px) !important;
}
.tooltip .tooltip-arrow,
.popper .popper__arrow {
   /** border-color: #FFC107; **/
   z-index: 1;
border-color: white;
}
.style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
}
/*.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
    margin-bottom: 10px;
}*/
.popper[x-placement^="top"] .popper__arrow:not(.pricing_popper_arrow),
.tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 10px 10px 0 10px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -10px;
    left: calc(28% - 10px) !important;
    margin-top: 0;
    margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
    margin-top: 10px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 10px 10px 10px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -10px;
    left: calc(50% - 10px);
    margin-top: 0;
    margin-bottom: 0;
}

.popper__arrow_bottom{
    border-width: 0px 11px 11px 11px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #a9a8a7;
    top: -21px;
    left: calc(50% - 11px);
    margin-top: 0;
    margin-bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 10px;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
    margin-left: 10px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 10px 10px 10px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -10px;
    top: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
    margin-right: 10px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 10px 0 10px 10px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -10px;
    top: calc(50% - 10px);
    margin-left: 0;
    margin-right: 0;
}
.orders1 td,th {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    color: grey;
    border-bottom: 1px solid #e0dddb !important;
}  
/** end of popover related **/
#ago:-moz-focusring,#days:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
/*#days:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}*/

.partNumber{
    color: black;
    text-decoration: none
}

.partNumber:hover {
    text-decoration: underline;
    cursor: pointer;
    color: black;
}
@media (max-width:1024px ){
    .service_corner .popper__arrow_service{ left: calc( 80% - -1px) !important;}
    .service_corner .popper__arrow_bottom_service{ left: 80% !important; }
}
@media (min-width:1025px){
    .service_corner .popper__arrow_service{left: calc( 73% - -1px) !important;  }
    .service_corner .popper__arrow_bottom_service{ left: 73% !important; }
}
.accountInfo div{ width:auto; }
.pricing_popper_arrow { left: 15px !important;}

#servicePopper2 { width:90% !important;top: -44px !important; }
#lablCount label { font-size:13px; }