/*
*	Site: TesTex School
*	Dev: Dan Schwartz
*	Date: 10/7/2020
*	Notes: Overall style sheet for the TesTex School which includes modules and test/quizes
*
*/

/* Clear and refresh css  */


/* Overall */
/* html {} */

body {
	background: url("../content/TesTexDotsbackground.4251ebc6.png");
	background-repeat: no-repeat;
  	-webkit-background-size: cover;
 	-moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	padding:10px;
}
/* class and ID list */
/* #ModuleList {} */
/* #ModuleCreateForm{} */
ul {
	list-style: none;
}


footer {
	display: block;
    position: fixed;
    bottom: 0px;
    background: black;
    width: 100%;
    left: 0px;
	height:22px;
	z-index:30;
}
footer p {
	text-align: center;
	color:#fff;
}
.push {
	display: block;
    position: relative;
    bottom: 0px;
    width: 100%;
    left: 0px;
    height:55px;
}

.hotlink{
    cursor: pointer;
    color: rgb(0, 119, 255);
    text-decoration: none;
}

.hotlink:hover{
    color:blue;
    text-decoration:underline;
}

.cursorPointer{
	cursor:pointer;
}

#NEXT{
	margin-top:8px;
}

.pButton{
	margin-top:8px;
}

#questionTextCSS{
	margin-top:10px;
	margin-bottom:10px;
}

#question-image img{
	height:200px;
	width:auto;
}

.newtable-hover tbody tr:hover td{
	color: #212529;
  	background-color: rgba(0, 0, 0, 0.075);
}

.correctRow{
background-color: rgba(0, 230, 64, .1);
}

.wrongRow{
	background-color:rgba(242, 38, 19, .1)
}

.pendingRow{
	background-color:rgba(240, 255, 0, .1)
}

.textRight{
	text-align: right;
}
/* ***************************************************************************************************** */
                                            /* SLIDES */
/* ***************************************************************************************************** */
#SlideShow{
	position:relative;
	min-height:60vh;
	max-height:auto;
	background-image:linear-gradient(
        to top right,
        lightgrey,
        white
	);
	border-radius:5px;
	border:1px solid grey;
	overflow:hidden;
  

}

/* currently not using the full image functionality */
#slide-img-full{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	box-shadow: inset 0 0 2000px rgba(255, 255, 255, 1); /* this gives the frosted appearance inside */
	opacity:30%;
	height:60vh;
	width:100vw;
	border-radius:.8em;
	position:absolute;
	z-index:1;
	
}

.slide-full-bullet{
	position:relative;
	z-index:10;
	text-align:center;
	margin-top:10%;
}


/* old button stylings - Delete when finished */
/* #NEXTSLIDE{
	position:absolute;
	top:100%;
	right:1%;
    margin-top:1%;
    z-index:20;	
}

#PREVIOUS_SLIDE{
	position:absolute;
	top:100%;
    margin-top:1%;
    z-index:20;	
} */

#NEXTSLIDE{
	margin-top:1%;
	float:right;
}

#PREVIOUS_SLIDE{
	margin-top:1%;
	float:left;
}

#slide-img-left{
	padding:0;
}


#slide-content-left, #slide-content-right{
	margin-top:1%;
}

#slide-heading-IMG{
	text-align:center;
	margin-top:2%;
	margin-bottom:2%;
	
}

#slide-text-no-bullet{
	text-align:center;
	margin:10% auto;
}

#slide-text{
	text-align:center;
	margin-left:5%;
	margin-top:3%;
}

#bullets{
	margin-top:2%;
	margin-left:2%;
	margin-right:5%;
}

#bullets li{
	font-size:20px;
	margin-bottom:2%;
}

#slide-title-center{
	margin-top:2%;
	margin-left:2%;

}

#slide-img-center img{
	width:50%;
	display:block;
	margin:1% auto;
}

#slide-sub-center{
	text-align:center;
}

#slide-just-img img{
	display:block;
	margin:0 auto;
}

.just-image-parent{
	background-color:black;
}


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

/* ***************************************************************************************************** */
                                         /* PROCTOR */
/* ***************************************************************************************************** */

#finalize-back button{
	margin-left:10px;
}
#readmore{
	margin-left:5px;
	height:1em;
	width:auto;
	text-align:center;
	font-size:15px;
	line-height:0;
	padding-top:0px;

}


/* ***************************************************************************************************** */
                                         /* END PROCTOR */
/* ***************************************************************************************************** */

/* BOOTSTRAP FIXES */
.btn-outline-dark{
	    background-color: whitesmoke !important;
}
.btn-outline-dark:hover {
	background-color: #343a40 !important;
}
button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}
/* fixes cutting off values in number input boxes */
input.form-control{
	width:auto;
}

/* ***************************************************************************************************** */
                                         /* LOADING ICON */
/* ***************************************************************************************************** */

.spinner {
    /* transform:translate(350%,150%); */
    transform:translate(0%,0%);
    width:150px;
    height:150px;
    background:transparent;
    border:3px solid #3c3c3c;
    border-radius:50%;
    text-align:center;
    line-height:150px;
    font-family:sans-serif;
    font-size:20px;
    color:black;
    letter-spacing:4px;
    text-transform:uppercase;
    text-shadow:0 0 10px black;
    box-shadow:0 0 20px rgba(0,0,0,.5);
}

.spinner:before {
    content:'';
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:3px solid transparent;
    border-top:3px solid #d4d4cd;
    border-right:3px solid #d4d4cd;
    border-radius:50%;
    animation:animateC 2s linear infinite;
}

.spinnerIcon{
    display:block;
    position:absolute;
    top:calc(50% - 2px);
    left:50%;
    width:50%;
    height:4px;
    background:transparent;
    transform-origin:left;
    animation:animate 2s linear infinite;
}

.spinnerIcon:before {
    content:'';
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#d4d4cd;
    top:-6px;
    right:-8px;
    box-shadow:0 0 20px #d4d4cd;
}

@keyframes animateC {
    0%
    {
        transform:rotate(0deg);
    }
    100%
    {
        transform:rotate(360deg);
    }
}

@keyframes animate {
    0%
    {
    transform:rotate(45deg);
    }
    100%
    {
    transform:rotate(405deg);
    }
}


/* ***************************************************************************************************** */
                                         /* Freeze Columns */
/* ***************************************************************************************************** */

#fixCol thead th:nth-child(2) {
	position: sticky;
	left: 0;
	z-index: 2;
}

#fixCol tbody td:nth-child(2) {
	position: sticky;
	left: 0;
	background: white;
	z-index: 1;
}
#fixCol tbody  tr:nth-child(odd) td:nth-child(2){
	background: #f0f0f1;
}