/* --------------------------------------------------
Author: Anastasios Pallas / tcpallas@gmail.com
Version 3.2
Last Update: 2018-11-22
-------------------------------------------------- */

/* OER CUSTOM STYLES */

body > .container {
	min-width: 1140px !important;
}

#rotate-screen-alert {
	z-index: 1000;
	display: none;
	width:360px;
	height: auto;
	position: fixed; /* or absolute */
	top: 50%;
	left: 50%;
	border:2px dashed red;
	background:white;
	opacity: 1;
	font-weight:bold;
	font-size:26px;
	color:red;
	padding:20px;
	text-align: center;
}

.theme-blue-sea #oer_canvas {
	background-size:25px 25px;	
}

#canvas {
	margin-top:35px;
	background:transparent;
	opacity:1;
	/* border:1px dashed #fff; */
}


#canvas_overlay {
}

#btn_theory, #btn_application, #btn_investigation {
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	top:75px;
	left:40px;
	cursor:pointer;
}

#btn_application {
	top:135px;
}

#btn_investigation {
	top:192px;
}

/* circuit values at the bottom */
#circuit_values_txt {
	display: block;
	position: absolute;
	margin-top: -50px;
	right: 6%; /* 70px; */
    /*
	position: inherit;
    right: 30px;
    bottom: 20px;
	*/
	text-align: center;
    font-size: 17px;
    font-weight: normal;
    font-family: inherit;
    color: #006699;
    width: 400px;
	cursor: default;
}

/* blackbox */
#blackbox_R,
#blackbox_L,
#blackbox_C {
	display:block;
	position: absolute;
	width:98px;
	top:185px;
	font-family:courier;
	font-size:16px;
	font-weight:bold;
	text-align:center;
}

#blackbox_R	input,
#blackbox_L input,
#blackbox_C input {
	display:inline-block;
	text-align:center;
	width:52px;
	height:17px;
	line-height:17px;
	border:0;
	font-family:courier;
	font-size:16px;
	font-weight:bold;
	color:#000;
	border-bottom:1px solid #444;
}

#blackbox_R {
	right:514px;
}
#blackbox_L {
	right:385px;
}
#blackbox_C {
	right:256px;
}

.fa-check {
	display:none;
	color:green;
	margin-right:5px;
}

.fa-times {
	display:none;
	color:red;
	margin-right:5px;
}






/* Customize Modals for Theory, Application and Investigation */
.modal-header {
    border-bottom: 0;
    padding: 0 1rem;
}

.modal-content {
    background: #1c3457;
    opacity: 0.95;
}

.modal-content .close {
    font-weight: normal;
    font-size: 3rem;
    color: white;
}

.modal-title {
	padding-top: 12px;
	color: #71abdc;
}

.modal-body {
    color: white;
}

/* tooltip */
.tooltip-inner {
    background-color: #00adf2;
    color:#fff;
}
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #00adf2;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #00adf2;
}
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
 	border-bottom-color: #00adf2;
}
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #00adf2;
}



/* Fix responsive for canvas overlay objects */
/*
@media screen and (max-width: 1140px) {
	#btn_theory, #btn_application, #btn_investigation {
		top:8%;
		left:1.8%;
	}
	#btn_application {
		top:16%;
	}
	#btn_investigation {
		top:24%;
	}

	#blackbox_C {
		right: 246px;
	}
}
*/


/* Responsive - Scale to fit mobile screen */
@media screen and (max-width: 1024px) {
	.container {
		transform: scale(0.90);
	}
	#btn_theory, #btn_application, #btn_investigation {
		top:58px;
		left:17px;
	}
	#btn_application{
		top:121px;
	}
	#btn_investigation{
		top:181px;
	}

	#blackbox_R, #blackbox_L, #blackbox_C {
		top:175px;
	}

	#blackbox_C {
		right:245px;
	}
}

@media screen and (max-width: 960px) {
	.container {
		transform: scale(0.84);
	}
}


@media screen and (max-width: 812px) {
	.container {
		transform: scale(0.71);
	}
}


@media screen and (max-width: 768px) {
	.container {
		transform: scale(0.67);
	}
}

@media screen and (max-width: 736px) {
	.container {
		transform: scale(0.64);
	}
}

@media screen and (max-width: 667px) {
	.container {
		transform: scale(0.58);
	}
}

@media screen and (max-width: 576px) {
	.container {
		transform: scale(0.5);
	}
}

@media screen and (min-width: 576px) {
	.modal-dialog {
		max-width: 720px;
	}
}



/* Mobile - Force user to use only landscape orientation */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
	height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }

  #rotate-screen-alert {
  	display: block;
  	transform: rotate(90deg);
  }

  #oer_canvas {
  	opacity:0.2;
  }
}