﻿@media screen and (max-width:992px) {.padded-right-border-30, .padded-left-border-30 {border: none;}}
@media screen and (max-width:992px) {.padded-right-30{padding:0px;}}
@media screen and (max-width:992px) {.inner-right-col{padding-top:12px;}}
@media screen and (max-width:767px){
    #eloqua_form input[type="button"] {text-align: center !important;width: 320px !important;padding:15px 15px!important;}
}
@media screen and (max-width:479px){
    #eloqua_form input[type="button"] {text-align: center !important;width: 280px !important;padding:15px 20px!important;font-size:14px!important;}
}
@media screen and (max-width:320px){
    #eloqua_form input[type="button"] {text-align: center !important;width: 240px !important;padding:15px 20px!important;font-size:12px!important;}
}

.setmargin {margin-bottom:10px;}
.modal-header { border:none; }
.centered-modal.in { display: flex !important; }
.centered-modal .modal-dialog { margin: auto; }
#modal-links-list .links-list__link span{color:#005eb8; font-weight:bold;}
@media screen and (min-width:992px){#modal-links-list .links-list__link span::after{color:#005eb8;}}

/* Reset UI Button */
.ui-button, .ui-button:hover { border:none; background:none;}

.padded-right-30{padding-right:30px;}
.padded-left-30{padding-left:30px;}
.padded-right-border-30{padding-right:30px;border-right:2px solid rgba(128,128,128,0.31)} 
.padded-left-border-30{padding-left:30px;border-left:2px solid rgba(128,128,128,0.31)}

#welcome{color:#FFF;}

#rememmberme-checkbox, #tnc2-checkbox, #tnc3-checkbox, #optin-checkbox {
    float: left;
    margin-right: 8px !important
}
#rememmberme-checkbox-label{float:left;padding-top:6px!important;width:auto!important}
#optin-checkbox-p{margin-top:5px;}
#optin-checkbox-label{font-weight:bold; text-align:justify;}
#tnc2-checkbox-p {
    margin-top: 5px;
}

#tnc2-checkbox-label {
    font-weight: bold;
    text-align: justify;
}
#tnc3-checkbox-p {
    margin-top: 5px;
}

#tnc3-checkbox-label {
    font-weight: bold;
    text-align: justify;
}
#wrapper-breadcrumb{padding-bottom:10px;}
.alert{ color:#F00; }

/* Tool Tips */
#tooltip{text-align: center;color: #fff;background: #111;position: absolute;z-index: 100;padding: 15px;}
/* triangle decoration */
#tooltip:after{width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #111;content: '';position: absolute;left: 50%;bottom: -10px;margin-left: -10px;}
#tooltip.top:after{border-top-color: transparent;border-bottom: 10px solid #111;top: -20px;bottom: auto;}
#tooltip.left:after{left: 10px;margin: 0;}
#tooltip.right:after{right: 10px;left: auto;margin: 0;}

#hgcAllRegistrations { margin-bottom: 30px; }
.grid_footer { margin-top:8px; }
.float-left{float: left;}
.float-right{float: right;}
.ui_icon_gray {background: url("/Content/images/ui-icons-gray.png") repeat-x scroll 50% 50% #e5eff8;height: 16px;width: 16px;background-repeat: no-repeat;display: block;overflow: hidden;text-indent: -99999px; }
.appGrid .grid_order {background-position: -128px 0; }
.appGrid .asc {background-position: 0 -16px; }
.appGrid .desc {background-position: -64px -16px; }
div#serialNumberBlock, div#serialNumber01Block, div#serialNumber02Block, div#serialNumber03Block, div#serialNumber04Block, div#serviceNumberBlock {
    position: relative;
}
span#hgcCheckSerialNumberStatusImage, span#hgcCheckSerialNumber01StatusImage, span#hgcCheckSerialNumber02StatusImage, span#hgcCheckSerialNumber03StatusImage, span#hgcCheckSerialNumber04StatusImage, span#hgcCheckServiceNumberStatusImage {
    position: absolute;
    top: 40px;
    right: 5px;
}
/* Prod Reg Responsive Table */
table.prodregResponsive { width: 100%; border-collapse: collapse; }
table.prodregResponsive tr:nth-of-type(odd) { background: #f8f8f8; } /* Zebra striping */
table.prodregResponsive th { background: #005eb8; color: white; font-weight: bold; font-size:11px; }
table.prodregResponsive td, table.prodregResponsive th { padding: 6px; border: 1px solid #ccc; text-align: center; font-size:11px; }

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
	table.prodregResponsive, table.prodregResponsive thead, table.prodregResponsive tbody, table.prodregResponsive th, table.prodregResponsive td, table.prodregResponsive tr { display: block; }	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.prodregResponsive thead tr { position: absolute;top: -9999px;left: -9999px;}	
	table.prodregResponsive tr { border: 1px solid #ccc; }	
	table.prodregResponsive td { /* Behave  like a "row" */border: none;border-bottom: 1px solid #eee; position: relative;padding-left: 50%; }	
	table.prodregResponsive td:before { position: absolute; /* Now like a table header */ top: 6px;left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;/* Top/left values mimic padding */}
    table.prodregResponsive td, table.prodregResponsive th { text-align: left; font-size:10px; }
}

/* Prod Reg - Registration */
#eloqua_form .RadioButton {padding-top:5px; padding-bottom:5px;}
#eloqua_form .RadioButton label{display: block; margin-bottom: 5px; font-weight: bold; float: left; width: 87%; }
#eloqua_form .RadioButton input[type="radio"]{ float:left; color:#005eb8; margin:0;}
#eloqua_form .RadioButton label {float: left!important; margin-left:5px; width:auto;}

#eloqua_form input[type="submit"]:disabled, 
#eloqua_form input[type="button"]:disabled, 
#eloqua_form input[type="submit"]:disabled:hover, 
#eloqua_form input[type="button"]:disabled:hover{ 
    background:none !important;
    border: 2px solid #e3e3e3!important; 
    color: #e3e3e3!important;
}

/* Prod Reg - New product Serial Number */
div#replacementNewSerialNumberContainer {
    border: 1px solid #CCC;
    padding:5px;
}
p#prevAddedNewSerialNumber {
    border: 1px solid #CCC;
    padding:5px;
    color:#808080;
}
