/* --------------------------------------------------
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;
}

#oer_canvas {
	background-size:50px 50px;	
}

#canvas {
	margin:32px 0;
	background:transparent;
	opacity:1;
	/* border:1px dashed #fff; */
}


/* 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;
}


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

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

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

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

.modal-body {
    color: white;
}

@media (min-width: 1140px) {
	.modal-dialog {
    	max-width: 920px !important;
    }
}



/* 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;
  }
}