/* Composition Styles */
body, html {height: 100%;}

	/* #c1, #c2, #c3 {} */
	#c1 {background: url(/assets/ui/bg_content.jpg) no-repeat 100% 4px;}
	.elementary #c1 {background: url(/assets/ui/bg_content_elementary.jpg) no-repeat 100% 4px;}
	.secondary #c1 {background: url(/assets/ui/bg_content_secondary.jpg) no-repeat 100% 4px;}
	#c1 table, #c1_1 table {width: 100%;}
	/* .consolidation {} */
	.consolidation table {font-size: 94%;}
	.consolidation .stats p {
		float: left;
		width: 45%;
		margin-bottom: 4px;
		padding-right: 15px;
		}
	.consolidation .stats p.reason {width: 100%;}
		        
    .weakStrongTable th {
    	background: none;
    	color: #333;
    	vertical-align: top;
    	}
    	.weakStrongTable th.weakStrong {
    		background: transparent url(/assets/ui/bg_line.gif) repeat-x 0 50%;
    		}
		.weakStrongTable th.weakStrongnoback {background: transparent;}
		
		.weakStrongTable th.weakStrongnoback .weak {
			background: #e2decc;
			float: left;
			margin-left: -5px;
			padding: 1px 12px 0 5px;
			}
			
			.weakStrongTable th.weakStrongnoback .strong {
			background: #e2decc;
			float: right;
			margin-right: -5px;
			padding: 1px 5px 0 12px;
			}
			
		.weakStrongTable th.weakStrong .weak {
			background: #e2decc url(/assets/ui/bg_arrow_left.gif) no-repeat 100% 50%;
			float: left;
			margin-left: -5px;
			padding: 1px 12px 0 5px;
			}
		.weakStrongTable th.weakStrong .strong {
			background: #e2decc url(/assets/ui/bg_arrow_right.gif) no-repeat 0 50%;
			float: right;
			margin-right: -5px;
			padding: 1px 5px 0 12px;
			}
		.weakStrongTable td {
			width: 16%;
			}
	
	.content {
		padding: 15px 17px;
		}
		#c2 .content {
			padding-top: 25px;
			}
		
		.content ul li {
			background: url(/assets/ui/bg_li.png) no-repeat 0 6px;
			margin: 0;
			padding-left: 17px;
			}
		.content ul.arrow li{
			background: url(/assets/ui/bg_arrow_right.gif) no-repeat 0 6px;
			margin: 0;
			padding-left: 17px;
		}
		.content ol {
			margin-left: 17px;
			}			

    .error, .failure {
        color: red;
    }
    .success, .notice {
        color: green;
    }

	#footer {
		background: #29568f url(/assets/ui/bg_footer.png) repeat-x;
		clear: both;
		color: #fff;
		font-size: 79%;
		letter-spacing: 1px;
		line-height: 100%;
		margin: 0;
		padding: 15px;
		position: relative;
		text-align: right;
		}
			#footer a { color:#fff; }
			#footer ul {
				float: right;
				}
			#footer li {
				float: left;
				padding: 0 10px;
				}
				#footer li.last {
					border-right: none;
					padding-right: 0;
					}
			#footer p {
				clear: both;
				margin-bottom: 0;
				}
	#header {
		background: url(/assets/ui/bg_header.png) repeat-y;
    background-color: rgb(226, 222, 204);
		margin: 0;
		position: relative;
		}
		#header #logo {
			display: block;
			padding: 2px 10px 4px;
			}
			#logo img {
				width: 350px;
			}
	
	
	.logout {
	    float: right;
	}
	
	a.skip {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	a.skip:focus {
		position: static;
		width: auto;
		height: auto;
	}


	.questionnaire {
		font-size: 89%
		}
		.student h1 {
			color: #29568F;
			}
			.young h2, .young h1 {
				font-family: "Comic Sans MS", "Comic Sans MS", cursive;
				}
				.young #c1 h2, .elementary #c1 h2 {
					background: url(/assets/ui/bg_h2_young.gif) no-repeat 0 50%;
					padding-left: 25px;
					}
		
		.questionnaire #navSecondary li {
			background: none;
			border-bottom: 1px solid #d4d0b7;
			line-height: 110%;
			padding: 5px 0 5px 20px;
			}
			.questionnaire #navSecondary li.inprogress {
				background-image: url(/assets/ui/pause-circle-fill.svg);
				background-repeat: no-repeat;
				background-position: 0;
				background-size: auto 1em;
				}
				
			.questionnaire #navSecondary li.complete {
				background-image: url(/assets/ui/check-circle-fill.svg);
				background-repeat: no-repeat;
				background-position: 0;
				background-size: auto 1em;
				}
				.young #navSecondary li.complete {
					background-image: url(/assets/ui/emoji-smile-fill.svg);
					background-repeat: no-repeat;
					background-position: 0;
					background-size: auto 1em;
					}
			.questionnaire #navSecondary ul li.new {
				background-image: url(/assets/ui/asterisk.svg);
				background-repeat: no-repeat;
				background-position: 0;
				background-size: auto 1em;
				}
			.questionnaire #navSecondary li.last {
				padding-left: 0;
				}
		
		.questionnaire #navSecondary ul {
			border-top: 1px solid #d4d0b7;
			padding-left: 0;
			}
				
		div.observers {
			clear: both;
			padding-top: 8px
			}
		
		#submitQuestionnaire a, #printResponses a, #submitExit a {
		  	background: #29568F;
		  	border-left: 1px solid #B7D100;
		  	border-top: 1px solid #B7D100;
		  	border-bottom: 1px solid #1643CC;
		  	border-right: 1px solid #1643CC;
		  	color: white;
		  	display: block;
		  	padding: 1px 4px;
		  	text-align: center;
		  	word-spacing: nowrap;
		  	}

		a#plainButton{
			appearance: auto;
			user-select: none;
			align-items: flex-start;
			text-align: center;
			cursor: default;
			box-sizing: border-box;
			background-color: buttonface;
			color: buttontext;
			white-space: pre;
			padding-block: 1px;
			padding-inline: 6px;
			border-width: 2px;
			border-style: outset;
			border-color: buttonborder;
			border-image: initial;
		}
		input#submitButton{
			appearance: auto;
			user-select: none;
			align-items: flex-start;
			text-align: center;
			cursor: default;
			box-sizing: border-box;
			background-color: buttonface;
			color: buttontext;
			white-space: pre;
			padding-block: 4px;
			padding-inline: 6px; 
			border-width: 2px;
			border-style: outset;
			border-color: buttonborder;
			border-image: initial;
		}

		a#backButton {
			background: #29568F;
			border-left: 1px solid #B7D100;
			border-top: 1px solid #B7D100;
			border-bottom: 1px solid #1643CC;
			border-right: 1px solid #1643CC;
			color: white;
			display: block;
			padding: 1px 4px;
			text-align: center;
			word-spacing: nowrap;
			}

		  	#submitQuestionnaire a:hover,#printResponses a:hover, #submitExit a:hover {
		  		background: #1643CC;
		  		text-decoration: none;
		  		}
		
		.question ul  {
			padding-left: 0;
			}
			.question ul li {
				background: none;
				padding-left: 0;
				}

		.questions span.elaborationLabel {
		  	font-size: 100%;
		  	}
		  	.questions div.answerElaboration {
		  		margin-left: 20px;
		  		margin-top: -5px;  
		  		}
		div.errorExplanation {
			border: 2px solid red;
			padding: 10px;
			}
			div.errorExplanation h2 {
				margin: 0px;
				}
		p.flash_failure {
			color: red;
			}
		p.flash_success {
			color: green;
			}

		#confirmBox{
			position: absolute;
			top: 100px;
			left: 0px;
			width: 100%;
			}
			
		#confirmBox div{
			width: 250px;
			background: #CF6;
			border: 2px solid black;
			margin: 0 auto;
			padding: 15px;
			text-align: center;
			}
			
	#printBlanks{
		/* div#container */
		margin-left: 1%;
		margin-right: 1%;
		background:FFF;
	}
	
	#printBlanks div {
		margin: 0 auto;
		text-align: center;
	}

    fieldset td.mult-input 
    {
	    background-color: #29568f;
	    text-align:center;
    }
		
	ul.nav {
	 	border-bottom: 1px solid #b7d100;
	 	min-height: 2.125em;
	 	margin: -12px -17px 8px;
	 	padding: 4px 0 0 8px;
	 	}
	ul.nav li {
	 	background: none;
	 	border-right: 1px solid #b7d100;
	 	float: left;
	 	font-weight: bold;
	 	padding: 4px 8px 2px;
	 	}
	 	.nav li a {
	 		float: left;
	 		font-weight: bold;
	 		/*font-weight: normal;*/
	 		}
	ul.actions {
		width: 95px;
		margin: 0;
		padding: 0;
		}
		ul.actions li {
			background: none;
			float:left;
			padding: 1px;
			} 		
			
	#sidebar {
		border-left: 1px solid #b4af87;
		color: #534120;
		float: right;
		margin: 20px -17px 10px 20px;
		width: 200px;
		}
		
	table {
		border-collapse: collapse;
		margin-bottom: 20px;
		text-align: left;
		}
	th {
		background: #29568f;
		border: 1px solid #fff;
		color: #fff;
		padding: 5px;
		}

		
	td {
		border: 1px solid #fff;
		padding: 1px 5px;
		vertical-align: top;
		}
	        /* MH: added to push action links apart. take this out if something
                else breaks */
                td a {
                      padding-right: 3px;
                     }
                     
/* .proto table {
		
		}
.proto table th {
		
		}
.proto table td {
		
		} */
	        /* MH: added to push action links apart. take this out if something
                else breaks */
                td a {
                      padding-right: 3px;
                     }


        		
table.noborder, table.noborder td{
		border:none;
		
	}
	
  .slider {
    width: 100%;

    }
    .slider table, .slider tr, .slider td, .slider th{
      border:solid;
	  border-width:1px;
	  border-color:black;   
    }
    
    .slider tr td {
      vertical-align: middle;
      }
    .slider td.sliderControl {
      width: 200px;
      }
    .slider td.notes {
      width: 250px;
      }
    .slider td.tag {
      padding-top: 20px;
      padding-bottom: 20px;
      }
    /* clear existing form css */
    .slider div {
      padding: 0;
      float: none;
      display: block;
      }
  	/* slider track with rounded ends */
  	.slider .track {
		-webkit-appearance: none;
		appearance: none;
  		background: rgb(180,180,180);
		opacity: .7;
  		width:200px; 
		height:9px;
		border-radius: 5px;
		-webkit-transition: .2s;
		transition: opacity .2s;
  	  }
	.slider .track::-webkit-slider-thumb {
		background: limegreen;
		cursor: pointer;
	}
	.slider .track::-moz-range-thumb {
		background: limegreen;
		cursor: pointer;
	}
	.slider .track::-ms-thumb {
		background: limegreen;
		cursor: pointer;
	}
	.slider .track:hover {
		opacity: 1;
	}
  	  
  	
		
	/* form style */
	
	form {
		margin: 0;
		padding: 0;
		}
	form h2 {
		margin: 0 0 5px;
		}
	form div {
		float: left;
		padding: 5px 15px 5px 5px;			
		}
		
	
	fieldset {
		border: none;
		clear: left;
		margin: 0;
		padding: 0;
		}
		
	fieldset.boxed {
		background: #E8EEF4;
		float: left;
		margin: 0 0 4px;
		width: 100%;
		}

	.checkbox input[type="checkbox"], .radio input[type="radio"] {
		position: absolute;
		background: transparent;
		}	
	.checkbox input[type="text"] {
		display: block;
		}		
	.select select, .text input, .textarea textarea {	
		width: 100%;
		}			
	
	/* label, legend {	
		} */
	label {
		display:block;
		}
                        .text label { display: inline; }
                        .text input { width: 95%; }
                        form div { 
                                    float: none; 
                                } 
			.checkbox label, .radio label {
				padding: 0 0 0 22px;
				}		
			label span, legend span {
				font-size: 89%;
				}
			.required label, .required legend, legend.required {
				font-weight: bold;
				}
				.required label b, .required label strong, .required legend b, .required legend strong {
					font-weight: normal;
					}
			label.elaboration {
				display: inline;
				}			
		legend { 
			position: relative; 
				left: -5px; 
			}
                .elaboration-text {
                        margin-left:20px;
                         }
                .questionnaire .text.half {
                            margin:-20px 0 30px 0;
                            }
	.full {
		width: 95%;
		}				
	.half {
		width: 46%;
		}	
	.quarter {
		width: 22%;
		}			
	.third {
		width: 33%;
		}
	.three-quarters {
		width: 70%;
		}			
	.two-thirds {
		width: 60%;
		}			

	.fieldWithErrors {
	    display: inline;
			margin: 0px;
			padding: 0px;
	}

	.fieldWithErrors input, .fieldWithErrors select {
	    background-color: #ffdfdf;
	}
	
	#logininfo {
		/* font-size: 150%; */
		font-weight: bold;
	  }
	  #logininfo code {
	   font-size: 150%;
	   font-weight: bold;
	   }
	
	.developmentinfo {
		margin-top: 15px;
		border: 2px solid green;
		padding: 10px;
		background-color: #CCC;
	}
	
	div.scale {
		font-size: 125%;
		font-weight: bold;
	}
	
	div.sectionInstructions {
		font-size: 125%;
	}
    .cliT1{background-color:#A5A4DE;}
	.cliT2{background-color:#B5C8E8;}
	.cliT3{background-color:#DFC7E1;}
	.cliT4{background-color:#EFBDE3;}
	.cliT5{background-color:#CF8AA7;}
	/*Need 2 new colors from Julie*/
	.cliT6{background-color:#b2decd;}
	.cliT7{background-color:#a4decd;}
	/*end*/
	.cliP1{background-color:#CFEA8B;}
	.cliP2{background-color:#A3E6BD;}
	.cliP3{background-color:#A9DD95;}
	.cliP4{background-color:#BACF96;}
	.cliP5{background-color:#97E074;}
	.cliS1{background-color:#F5D753;}
	.cliS2{background-color:#F5AA01;}
	.cliS3{background-color:#FF993A;}
	.cliS4{background-color:#FEDA00;}
	.cliS5{background-color:#F1C181;}
	.cliO1{background-color:#B5C8E8;}
	.cliO2{background-color:#8EC9E9;}
	.cliO3{background-color:#6DD5E2;}
	.cliO4{background-color:#92B1CD;}
	.cliO5{background-color:#5BB6E5;}
	.sw{background-color:#FF657F;}
	
    div.consolidationLineItem, span.consolidationLineItem {
        border: 1px solid #CCC8B8;
        /*background-color: #EFECE3;*/
        line-height: 100%;
        margin: 2px 0;
        padding: 2px 3px;
    }
    	div.consolidationLineItem sub, span.consolidationLineItem sub {
    		font-size: 79%;
    		line-height: 90%;
    		vertical-align: -1px;
    		}

.actionlist {
	display:flex;
	flex-direction: column;
	align-content: space-around;
}

.actionlist a, #ShowHideLink, .analysis-item, .analysis-item a {
	align-items: center;
	display: flex;
	flex-direction:row;
	gap:2px;
}
.analysis-item span {
	margin: 0 10px;
}

.alphacube_n, .alphacube_nw, .alphacube_ne,
.alphacube_w, .alphacube_e,
.alphacube_s, .alphacube_sw, .alphacube_sizer {
	border-color: #000 !important;
	border-style: solid !important;
}

.alphacube_n {
	border-width: 1px 0 0 0 !important; }
.alphacube_nw {
	border-width: 1px 0 0 1px !important; }
.alphacube_ne {
	border-width: 1px 1px 0 0 !important; }
.alphacube_w {
	border-width: 0 0 0 1px !important; }
.alphacube_e {
	border-width: 0 1px 0 0 !important; }
.alphacube_s {
	border-width: 0 0 1px 0 !important; }
.alphacube_sw {
	border-width: 0 0 1px 1px !important; }
.alphacube_sizer {
	border-width: 0 1px 1px 0 !important; }


.table_window{
	background-color: #29568f;
}

html body .alphacube_close {
	background-image: url(/assets/ui/rectangle-xmark-regular.svg);
	background-color: red;
	border: 1px solid #000;
	right: 14px;
}
html body .alphacube_minimize {
	background-image: url(/assets/ui/window-minimize-solid.svg);
	background-color: #b7d100;
	border: 1px solid #000;
	right: 66px;
}
html body .alphacube_maximize {
	background-image: url(/assets/ui/window-maximize-regular.svg);
	background-color: #b7d100;
	border: 1px solid #000;
	right: 40px;
}

html body .alphacube_close,
html body .alphacube_minimize,
html body .alphacube_maximize {
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 80%;
}


div#contentedit {
	min-height: 1rem;
	border: 2px solid #767676;
	background-color: #fff;
}