/* Custom additions - Martin & Ashley */
HTML, BODY {height:100%}
BODY{
	background-color: #fff;
	background: linear-gradient(to bottom, #ededed 0, #fff 100%);
    background: url('../siteimages/background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size:cover; /*100% auto;*/  
	
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 300;
	color: #444;
    font-size: 14px;
}

h1, h2, h3, h4, h5, .popover-title {
    font-weight: 100; /* Roboto Light */
    margin:0;
    padding:0;
    color:inherit;
}

h1 {
	font-size:28px;
}

h2 {
	font-size:16px;
}

h3 {
	font-size:32px;
	text-align:center;
}

h4 {
	display:inline-block;
	padding-left:10px;
	font-size:16px;
}

h5 {
	color:#999;
	font-weight:bold;
	line-height:13px;
	font-size:12px;
}
.vertical-center {
	display:flex;
	align-items:center;
}
.hide {
	display:none;
}
.div-table{display:table;width:100%;height:100%;}
.div-row{display:table-row;}
.div-cell, .div-cell-top, .div-cell-middle, .div-cell-bottom{display:table-cell;}
.div-cell-top{vertical-align:top;}
.div-cell-middle{vertical-align:middle;}
.div-cell-bottom{vertical-align:bottom;}

/*header and branding ---------------------------------------------*/
#expireCol {
	position:absolute;
	bottom:3px;
	left:35%;
}
.navbar-fixed-top {
	height:85px;
}
header{
	box-sizing: content-box;
	height: 80px;
	background-color: rgba(255, 255, 255, 0.9);
  	 border-bottom: 10px solid #007DB8;
	 position: fixed;
	 width: 100%;
	 z-index:600;
	 top:0;
}
header .navbar-brand{
	color: inherit;
	font-size: 38px;
	font-weight: 300;
	line-height: 80px;
	color: #666;
	height: 80px;
	padding: 0px;
	padding-left: 25px;
}
header .navbar-brand .pageTitle{
	vertical-align:middle;
}
header .navbar-brand-image{
	line-height: 80px;
	width: 404px;
	height: 40px;
	margin: 20px 0px 20px 30px;
	background-image: url("../siteimages/delltech_logo_gry.png");
	background-repeat: no-repeat;
	background-position: middle right;
	background-size: auto 50px;
}
body.dark header, body.bgImage header{background-color: #444;}
body.dark header .navbar-brand, body.bgImage header .navbar-brand {color:#fff;}
/*body.dark header .navbar-brand-image, body.bgImage header .navbar-brand-image  {background-image: url("../images/logos/DellEMC_Logo_white_40.png");}
 top nav bar  ---------------------------------------------*/
header .navbar{border:none;}
header .navbar .nav{height: 80px;}
header .navbar .nav > li > a {
	line-height: 80px;
	color: #444;
	padding: 0px 8px;
	font-size: 19px;
}
header .navbar .nav > li > a i {line-height: inherit; vertical-align: middle;}
header .navbar .nav > li > a:hover, header .navbar .nav > li > a.active{
	background-color: #007DB8;
	color: white;
}
body.bgImage header .navbar .nav > li > a:not(:focus) {
	color:white;
}
/*footer -----------------------------*/
.navbar-fixed-bottom {
	background-color: rgba(255, 255, 255, .9);
	border-top: 5px solid #007DB8;
	height:75px;
	color: #444;
}
.footerText {
    font-size: 16px;
}

.footerText label {
	color:inherit;
}
.footerText .checkbox input{width: 17px;height: 17px;}
#primaryFooter .col-md-4 {
	border-bottom:solid 2px transparent;
}

#primaryFooter .leftFooterItem {
	float:left;
	padding-right: 10px;
}
#primaryFooter a {
	padding-left:10px;
	color:inherit;
	font-size:14px;
	font-weight:200;
}

#primaryFooter a:hover {
	color:inherit;
	text-decoration:none;
}
#primaryFooter .imgBlock {
	display:none;
	width:auto;
}
#primaryFooter .imgBlock-dark{display:inline-block;}

body.light #primaryFooter .imgBlock {
	display:inline-block;
}
body.light #primaryFooter .imgBlock-dark {
	display:none;
}

.col-sm-12:hover {
	background-color:rgba(255,255,255,.5);
	border-color:#337ab7;
	text-decoration:none;
}

#primaryFooter .col-sm-12:hover {
	background-color:transparent;
	border-bottom: 2px solid #007DB8;
	border-radius:0;
	text-decoration:none;
}

/*body------------------------------------*/
.colLeft {
	padding: 0 30px;
    font-size: 16px;
	border-right:dashed 2px #ccc;
}

.colLeft > .center-block {
	margin-bottom:5%;
}

.colRight {
	padding: 0 10px;
    font-size: 16px;
}
.rightNavItem {
	/*margin-left:40px;*/
	padding:15px 0 15px 30px;
	border-radius:5px;
	border:solid 2px transparent;
	cursor:pointer;
}
/*.link-spanner {
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}*/

.rightNavItem, .rightNavItem a {
	color:#ffffff;
}
.rightNavItem:hover, .rightNavItem:hover a, .rightNavItem a:hover {
	color:#ffffff;
	text-decoration:underline;
}
.imgBlock {
	display:inline-block;
	width:80px;
}

/*dtw exit button*/
#dtweBtn {
	position: absolute;
	bottom: 30px;
	right: 20%;
	/*left: 50%;*/
}
.dtwBtn {
	padding: 0 12px;
	border: 1px solid #fff;
	border-radius: 0;
	border-color: #fff;
	background-color: #fff;
	font-size: 16px
}

/*Start Button*/
#mainPanel {
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-radius:0;
}
#mainPanel .panel {
	margin:0;
}

#mainPanel.panel.panel-default > a {
	font-size:18px;
}
.panel {
	background-color:transparent;
}
#mainPanel .panel-body {
	padding:0;
}

#mainPanel div[id^='menu'] > .panel-body {
	padding:0 10px 0 10px;
}

#mainPanel > .list-group-item {
	border-bottom:2px solid #ddd;
}

#mainPanel > .list-group-item:hover {
	background-color: #444 !important;
}

#mainPanel .panel > .list-group-item:hover {
	background-color: #444 !important;
}

#mainPanel .panel-body > .list-group-item:hover {
	background-color: #1d72af !important;
}

#mainPanel .list-group-item {
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	text-align:center;
	padding: 10px 15px;
	background-color:#2d95dd;
	color:#ffffff;
	text-decoration:none;
}
a[aria-expanded="true"].list-group-item .caret{
	transform: rotate(180deg);
}



/*Modals---------------------------------------*/
#virtRackModal {
	padding:0 !important;
}

.modal-virtRack {
	margin: 0 auto;
}

.modal-header {
	padding:0;
	height:auto;
	border:none;
	/*background-color:#0076CE;*/
	color: #fff;
}

.virtualRack {
	background-color:#1e1e1e;
}

#videoModal .modal-content {
	background-color:#000000;
}

.modal-virtRack .modal-body {
	padding: 0;
}

#videoBody .col-md-4 {
	padding:15px;
}

#keyControls .col-md-3 {
	height:auto;
}

#keyControls .col-md-9 {
	width:auto;
}

#keyControls.modal-dialog {
    margin-top:15%;
}

#keyControls > .modal-content {
    background-color:#007db7;
	border: #ffffff 1px solid;
	max-width:60%;
	border-radius: 0;
	padding:5px 10px;
}

#keyControls .modal-header {
	background-color:#007db7;
}

#keyControls .modal-header h4 {
	font-size:22px;
}

#keyControls .modal-title {
	line-height:40px;
}

#keyControls .modal-body {
	padding:5px 40px 20px;
}

.close {
	font-size:40px;
	color:#fff;
	opacity:1;
}

#keyControls .col-md-9 p {
	text-align:left;
	line-height:50px;
}

#keyControls .row {
	padding:20px 0 10px 0;
	overflow:auto;
	background-color:#3397c6;
	text-align:center;
}

#keyControls .row:nth-of-type(3) {
	margin-top:20px;
}

#keyControls .col-md-4:nth-of-type(2) {
	/*display:flex;*/
	justify-content:center;
}

#keyControls .col-md-4:nth-of-type(3) {
	/*display:flex;
	justify-content:flex-end;*/
}

#srvModal.modal-dialog {
    margin:10px auto 0 auto;
}

#srvModal > .modal-content {
    background-color:#000000;
	border: #ffffff 1px solid;
	max-width:80%;
	border-radius: 0;
	padding:0;
}

#srvModal .modal-header {
    position:absolute;
	top:12px;
	left:0;
	width:98%;
	z-index:10;
}

#srvModal .modal-body {
	padding:0;
}

#srvFrame[style] { height: 95vh !important; }

.redSquare {
  border: solid 2px #ff0000;
  width: 50px;
  height: 50px;
}

.keyPress {
  border: solid 2px #ffffff;
  width: 50px;
  height: 50px;
  display:flex;
  justify-content: center; /* center items vertically, in this case */
    align-items: center;    
}

.navKeyText {
	color: #ffffff;
    font-size: 15px;
}

.keyPress > p {
	margin:0;
	padding:0;
	line-height:65px;
}

.arrowBox {
    width: 40px;
    overflow: auto;
}

.line {
    margin-top: 4px;
    width: 30px;
    background: #ffffff;
    height: 4px;
}

.leftLine {
	float:left;
}

.rightLine {
	float:right;
}

.arrow {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.leftArrow {
	border-left: #ffffff 8px solid;
	float: left;
}

.rightArrow {
	border-right: #ffffff 8px solid;
	float: right;
}

/* Responsive layouts - Martin */

@media screen and (min-width: 768px) {
	.modal-dialog {
		width: 100%;
	}
	
	.navbar-header {
		float:none;
	}
}
@media screen and (max-width: 700px) {

	#dellLogo img{
		height: 30px;
	}
	#rightNav {
		display:none;
	}
	.colLeft{border:none;}
	.leftFooterItem img{height:20px;margin-bottom:8px;}
	#hotspots .checkContainer{font-size:14px;}
	#hotspots .checkbox-inline+.checkbox-inline, #hotspots .radio-inline+.radio-inline{
	margin-left:0px;
	}
}
@media screen and (max-width: 600px) {

	#demoWrapper.container {
		padding:0;
		justify-content:center;
	}
	
	#demoWrapper .col-md-7 {
		padding:0;
	}
	
	#primaryNav .col-md-7 {
		display:none;
	}
	#primaryNav .container {
		justify-content:center;
	}
	#hotspots.text-center{text-align:left;}
	/*.navbar-fixed-bottom {
		display:none;
	}*/
}