/* Unique style templates for ahihtcoesa experiment */

body { 
	padding-top: 70px;
	padding-bottom: 20px; 
	padding-left: 0px;
	padding-right: 0px;
}

section {
	padding-top: 20px;
	padding-bottom: 20px;
}

.image {
	width: 100%;
}

div.instructions {
	padding-left: 20px;
	padding-right: 20px;
	/*padding-top: 20px;
	padding-bottom: 20px;*/
}

div.response {
	padding-left: 50px;
}

div.stimuli {
	/*padding-left: 20px;
	padding-right: 20px;
	/*padding-top: 20px;
	/*padding-bottom: 20px;*/
	/*height: 150px;*/
}

div.pg {
	border:2px solid gray;
	padding:20px;
	-moz-border-radius: 20px;
	border-radius: 15px;
}

form.white {
	background-color: white;
}

div.white {
	background-color: white;
}

div.stim-bar {
	background-color: white
}

div.outcome {
	font-size: 20px;
}

div.option {
	border:1.5px solid gainsboro;
	border-radius: 5px;
}

button.btn-stim {
}

button.btn-dv {
}

.btn {
	white-space:normal !important;
	/*word-wrap: break-word;*/
	word-break: normal;
}

input:disabled {
	opacity: .7;
}


div.vertical-align {
	display: flex;
    align-items: center;
}

div.instruction-text {
	min-height:200px;
}

span.bar-label {
	position: absolute;
	font-size: 15px;
	left: 47.5%;
	color: #404040;
}

span.left-label {
	font-size: 15px;
	position: absolute; 
	text-align: left;
	margin-left: 5px;
	color: #404040;
}

div.progress-stim {
	height:23px;
	background-color: white;
	border:1px solid gainsboro;
};

.progress-bar {
	-webkit-transition: width 0.1s ease-in-out;
	transition: width 0.1s ease-in-out;
}


/* Next Trial Button */
/* This isn't being used anymore */
/*.Next_Trial{
    /*background-color: #D9D9D9;*/ /* button color: grey */
    /*background-color: #3EA5FF;*/ /* button color: blue */
    /*border: black;*/
    /*border-style: solid;
    border-width: 2px;*/
    /*color: black;*/ /* change text color*/
    /*font-weight: bold;*/ /* bold button text */
    /*padding: 7px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;*/
/*}*/ 



/* Switch: Lever 1 */
.onoffswitch1 {
    position: relative; width: 84px; /* this changes width of lever */
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch1-checkbox {
    display: none;
}
.onoffswitch1-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1.8px solid #999999; border-radius: 20px;
}
.onoffswitch1-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch1-inner:before, .onoffswitch1-inner:after {
    display: block; float: left; width: 50%; height: 15px; /* this changes heigth of lever */ padding: 0; 
    line-height: 15px; /* match this number to height # above */
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch1-inner:before {
    content: "";
    padding-left: 20px;
    background-color: #EEEEEE; color: #FFFFFF;
}
.onoffswitch1-inner:after {
    content: "";
    padding-right: 40px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch1-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 50px;
    border: 1.8px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch1-checkbox:checked + .onoffswitch1-label .onoffswitch1-inner {
    margin-left: 0;
}
.onoffswitch1-checkbox:checked + .onoffswitch1-label .onoffswitch1-switch {
    right: 0px; 
}


/*Switch: Lever 2 */
.onoffswitch2 {
    position: relative; width: 84px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch2-checkbox {
    display: none;
}
.onoffswitch2-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1.8px solid #999999; border-radius: 20px;
}
.onoffswitch2-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch2-inner:before, .onoffswitch2-inner:after {
    display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch2-inner:before {
    content: "";
    padding-left: 20px;
    background-color: #EEEEEE; color: #FFFFFF;
}
.onoffswitch2-inner:after {
    content: "";
    padding-right: 40px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch2-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 50px;
    border: 1.8px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-inner {
    margin-left: 0;
}
.onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-switch {
    right: 0px; 
}


/*Switch: Lever 3 */
.onoffswitch3 {
    position: relative; width: 84px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch3-checkbox {
    display: none;
}
.onoffswitch3-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1.8px solid #999999; border-radius: 20px;
}
.onoffswitch3-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch3-inner:before, .onoffswitch3-inner:after {
    display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch3-inner:before {
    content: "";
    padding-left: 20px;
    background-color: #EEEEEE; color: #FFFFFF;
}
.onoffswitch3-inner:after {
    content: "";
    padding-right: 40px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch3-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 50px;
    border: 1.8px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-inner {
    margin-left: 0;
}
.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-switch {
    right: 0px; 
}


/*Switch: Lever 4 */
.onoffswitch4 {
    position: relative; width: 84px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch4-checkbox {
    display: none;
}
.onoffswitch4-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1.8px solid #999999; border-radius: 20px;
}
.onoffswitch4-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch4-inner:before, .onoffswitch4-inner:after {
    display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch4-inner:before {
    content: "";
    padding-left: 20px;
    background-color: #EEEEEE; color: #FFFFFF;
}
.onoffswitch4-inner:after {
    content: "";
    padding-right: 40px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch4-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 50px;
    border: 1.8px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch4-checkbox:checked + .onoffswitch4-label .onoffswitch4-inner {
    margin-left: 0;
}
.onoffswitch4-checkbox:checked + .onoffswitch4-label .onoffswitch4-switch {
    right: 0px; 
}


/*Switch: Lever 5 */
.onoffswitch5 {
    position: relative; width: 84px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch5-checkbox {
    display: none;
}
.onoffswitch5-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1.8px solid #999999; border-radius: 20px;
}
.onoffswitch5-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch5-inner:before, .onoffswitch5-inner:after {
    display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch5-inner:before {
    content: "";
    padding-left: 20px;
    background-color: #EEEEEE; color: #FFFFFF;
}
.onoffswitch5-inner:after {
    content: "";
    padding-right: 40px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch5-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 50px;
    border: 1.8px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch5-checkbox:checked + .onoffswitch5-label .onoffswitch5-inner {
    margin-left: 0;
}
.onoffswitch5-checkbox:checked + .onoffswitch5-label .onoffswitch5-switch {
    right: 0px; 
}


/*Switch: Lever 6 */
.onoffswitch6 {
    position: relative; width: 84px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch6-checkbox {
    display: none;
}
.onoffswitch6-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1.8px solid #999999; border-radius: 20px;
}
.onoffswitch6-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch6-inner:before, .onoffswitch6-inner:after {
    display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch6-inner:before {
    content: "";
    padding-left: 20px;
    background-color: #EEEEEE; color: #FFFFFF;
}
.onoffswitch6-inner:after {
    content: "";
    padding-right: 40px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch6-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 50px;
    border: 1.8px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch6-checkbox:checked + .onoffswitch6-label .onoffswitch6-inner {
    margin-left: 0;
}
.onoffswitch6-checkbox:checked + .onoffswitch6-label .onoffswitch6-switch {
    right: 0px; 
}


/* Sliders */

#slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 14px; /* Set a specific slider handle width */
    height: 16px; /* Slider handle height */
    background: #787878; /* grey background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 15px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    background: #787878; /* grey background */
    cursor: pointer; /* Cursor on hover */
}

/* Inhibit Scrolling*/
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

/* instructions css  */
.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

/*bottom*/
.black_overlay_1 {
  display: none;
  position: absolute;
  top: 300px;
/*  top: 32.5%;*/
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

/*top*/
.black_overlay_2 {
  display: none;
  position: absolute;
  top: 0px;
  left: 0%;
  width: 100%; /*100*/  
  height: 250px;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

/*left*/
.black_overlay_3 {
  display: none;
  position: absolute;
  top: 250px;
  left: 0%;
  width: 520px; /*41.5*/  
  height: 50px; /*100*/  
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

/*right*/
.black_overlay_4 {
  display: none;
  position: absolute;
  top: 250px;
  left: 625px; /*52.7*/  
  width: 100%; /*100*/  
  height: 50px; /*100*/  
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

.white_content0 {
  display: none;
  position: absolute;
  top: 25%;
  left: 40%;
  right: 40%;
  width: 475px;
  height: 375px;
  padding: 16px;
  border: 5px solid #545151;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}


.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 40%;
  right: 40%;
  width: 475px;
  height: 450px;
  padding: 16px;
  border: 5px solid #545151;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

.white_content2 {
  display: none;
  position: absolute;
  top: 25%;
  left: 40%;
  right: 40%;
  width: 400px;
  height: 400px;
  padding: 16px;
  border: 5px solid #545151;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

.white_content3 {
  display: none;
  position: absolute;
  top: 25%;
  left: 40%;
  right: 40%;
  width: 400px;
  height: 350px;
  padding: 16px;
  border: 5px solid #545151;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

.white_content4{
  display: none;
  position: absolute;
  /*margin-right:180px;*/
  top: 15%;
  /*left: ;*/
  right: 100px;
  width: 475px;
  height: 395px;
  padding: 16px;
  border: 5px solid #545151;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}


.switch_1_example_box {
  display: none;
  position: absolute;
  /*position: relative;*/
  top: 30%;
  left: 450%;
  right: 20%;
  width: 100px;
  height: 60px;
  padding: 16px;
  opacity: 1;
  border: 5px solid #545151;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

/* Zac's CSS... */
.text-right{
	text-align: right;
  padding-right: 30px;
}


.text-center{
  text-align: center;
}

.table_layout1{
  text-align: left;
  padding-left: 146.5px;
  padding-right: 10px;
  padding-top:20px;
}

.table_layout2{
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.table_layout3{
  text-align: right;
  padding-right: 20px;
  padding-top:20px;
}

.table_layout4{
  text-align: right;
  padding-right: 20px;
  padding-bottom: 20px;
}

.Policy_ColumnA{
}

.Policy_ColumnB{
}

.Left_Box_Column{
  width:15px;
}

.Decision_Column{
  width: 84px;
  position: inherit;
}

.Slider_Column{
  width: 100px;
  position: inherit;
}

/*.Slider_Column_Header{
  width: 100px;
  position: relative;
  opacity: 0;
}*/



.Slider_Hover{
}

/* hover-over text*/

  /* Tooltip container */
  .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

  /* Tooltip text */
  .tooltip + .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #FFFFFF;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
 /*     top: -5px;
      left: 105%;*/
   
      /* Position the tooltip text - see examples below! */
      position: absolute;
      z-index: 1;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover + .tooltiptext {
      visibility: visible;
  }


.Slider_Header_Link_Class{
  font-size: 8pt;
}

/* hover text attempt 2*/
.tiptext{
}

.Slider_Header_Hover_Text{
  display: none;
  position: relative;
  z-index: 1;
  border:2.5px solid #000;
  color: #FFFFFF;
  background-color: #000000;
  /*top: 60%;*/
  /*left: 50%;*/
  /*padding-bottom: 10px;*/
  margin: -135px;
  margin-top: -40px;
  margin-right:5px;
  font-size:9pt;
}


/* Hover text */




/* EVI Hover-text*/
.EVI_hover{
  
}

.EVI_hover_class{
    display: none;
    z-index: 1;
    position: absolute;
    border:5px solid #000;
    color: #FFFFFF;
    background-color: #000000;
/*    top: 5%;
    left: 50%;*/
    font-
}

.hover_class{
  width: 240px;
  position: inherit;
}

  /* Parent Div's */
.hover_class_1a{
  width: 240px;
  position: inherit;
}

.hover_class_1b{
  width: 240px;
  padding-left: 15px;
  position: inherit;
}

.hover_text{
    display: none;
    z-index: 1;
    position: absolute;
    border:5px solid #000;
    color: #FFFFFF;
    background-color: #000000;
/*    top: 5%;
    left: 50%;*/
    font-
}

.EVI_hover_text{
    display: none;
    position: relative;
    width:190px;
    left:-30px;
    top: 17px;
    border:2.5px solid #000;
    color: #FFFFFF;
    background-color: #000000;
    /*top: 60%;*/
    /*left: 50%;*/
    padding-left: 2px;
    /*padding-bottom: 10px;*/
    margin: -15px;
    font-
}



.slider_hover_text{
    display: none;
    position: relative;
    width:15px;
    left:-55px;
    border:2.5px solid #000;
    color: #FFFFFF;
    background-color: #000000;
    /*top: 60%;*/
    /*left: 50%;*/
    /*padding-bottom: 10px;*/
    margin: -15px;
    font-
}

.hover_text_1b{
    display: none;
    position: absolute;
    border:5px solid #000;
    color: #FFFFFF;
    background-color: #000000;
    top: 5%;
    left: 50%;
    font-
}


/**/

.main_table{
    z-index: -1
}

.child_table{
    z-index: 1
}

.zero-opacity{
  opacity: 0;
}



/* Color Style*/

.Col_Buttons{
  border: 1px solid #000;
  border-style: solid;
  /*opacity: .2;*/

  width: 100px;
  height: 60px;
  padding: 16px;

}

.Col_Buttons_On{
  border: 3px solid #000;
  border-style: solid;
  /*opacity: .2;*/

  width: 100px;
  height: 60px;
  padding: 16px;

}

.Col_Buttons_Off{
  opacity: .6;
  border: 3px solid #FFF;
  border-style: solid;
  width: 100px;
  height: 60px;
  padding: 16px;

}

.Fun_Img_Select{
  opacity:1;
  border: 3px solid #000;
  border-style: solid;
}

.Fun_Img_Off{
  opacity:.9;
  border: 3px solid #FFF;
  border-style: solid;
}

.removeurl{
    -webkit-appearance: btn btn-primary;
    -moz-appearance: btn btn-primary;
    /*appearance: button;*/

    text-decoration: none;
    color: white;
}


/*.Next_Trial{
    /*background-color: #D9D9D9; /* button color: grey 
    /*background-color: #3EA5FF;*/ /* button color: blue */
    /*border: black;*/
    /*border-style: solid;
    border-width: 2px;*/
    /*color: black;*/ /* change text color*/
    /*font-weight: bold;*/ /* bold button text */
    /*padding: 7px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;*/
/*}*/