/* Created by Adrian Duval - 2021 - change root parameters to smoothly affect visuals in a causal manner */
:root {
	/* main themes */
	--active-color :					#99CCFF;


	/* text colors (color = text color) */
	--main-text-color :					#F7F9FB;	/**/
	--main-contrast-text-color :		#0E2028;	/**/ /* must be contrasting from main-text-color */
	--highlight-color :					#FDC86D;	/* must be contrasting with form bg color */
	--dark-text-color :					#13232F;
	--neutral-text-color:				#808080;
	--alert-color:						#D9512C;
	--error-color :						red;
	--neutral-color : 					#8C8E8D;
	--action-color :					#13232F;
	--success-color :					#4BB543;
	--disabled-success-color :			#6C9461;
	--pending-color :					#F29339;
	--link-color : 						#99CCFF;	/* same as action-bg */
	--link-color-hover : 				#7299BF;	/* same as action-bg-hover */
	--mailto-color :					#99CCFF;
	--mailto-color-hover : 				#B3D9FF;
	--legend-color :					#13232F;
	--label-active-color :				#FFFFFF;	/* = white with 100% opacity */
	--label-inactive-color :			#FFFFFF80;	/* = white with 50% transparency */
	--req-color :						#D9512C;	/* color of required symbol in inputs (= '*') */
	
	/* background colors (bg = background color) */
	--body-bg :							#E9DCC9;	/**/	/* linen = main background color of site (#F7F9FB on HC)*/
	--main-menu-bg :					#31708E;	/**/
	--inactive-tab-bg :					#5085A5;	/**/
	--inactive-tab-bg-hover :			#5085A580; 	/**/
	--active-tab-bg :					#99CCFF80; 	/**/	/* may be the same as "action", but I want to differentiate it to be able to call them separately */
	--login-bg:							#5085A5;
	--logout-bg:						#5085A5;
	--modal-bg:							#00000080;
	--form-bg :							#275971;	/**/ /*#13232F;*/
	--form-shadow :						#27597154;	/* = form-bg with 33% opacity */
	--semi-transparent-form-bg			#275971CC;
	--question-bg :						#224e62; 	/**/
	--question-bg-shadow :				#224e6254;	/**/
	--question-bg-hover :				#1b3e4e;	/**/
	--alert-bg :						#B22222;	/**/
	--alert-bg-hover :					#8B0000;	/**/
	--success-bg :						var(--success-color);
	--success-bg-hover :				#258f1d;
	--odd-bg :							#31708E;	/*differentiates colors between table lines (odd vs even)*/
	--even-bg :							#5085A5;	/*differentiates colors between table lines (odd vs even)*/
	--oddeven-bg-hover :				#1d4254;
	--neutral-bg:						#808080;
	--neutral-bg-hover :				#585858;
	--neutral-semi-transparent-bg:		#80808080; /**/
	--action-bg :						#99CCFF;
	--action-bg-hover :					#7299BF;
	
	--error-bg:							red;
	--alert-semi-transparent-bg :		#FFCC9980;
	--alert-semi-transparent-bg-hover :	#FFB36680;
	--disabled-bg :						#000000;	/* = black */
	--disabled-semi-transparent-bg :	#00000080;
	--selected-bg :						#99CCFF;
	--selected-bg-hover :				#7299BF;
	--table-header-bg :					#808080;	/*#687864*/
	--table-header-bg-hover :			#585858;
	
	--yellow-bg:						#fce303;
	--yellow-bg-hover:					#dbc500;
	--yellow-bg-completed:				#6b6b00;
	--lightgreen-bg:					lightgreen;
	--lightgreen-bg-hover:				#75c275;
	--lightgreen-bg-completed:			#3f6b3f;
	--red-bg:							red;
	--red-bg-hover:						#CE0101;
	--red-bg-completed:					#6e0000;
	--skyblue-bg:						skyblue;
	--skyblue-bg-hover:					#6ca4bc;
	--skyblue-bg-completed:				#37525e;
	--orchid-bg:						orchid;
	--orchid-bg-hover:					#ae59ab;
	--orchid-bg-completed:				#61325f;
	--orange-bg:						orange;
	--orange-bg-hover:					#cc8400;
	--orange-bg-completed:				#7a5000;
	--green-bg:							#1ab188;
	--green-bg-hover:					#179b77;
	--gray-bg:							gray;
	--gray-bg-hover:					#666666;
	
	/* border colors */
	--input-border-color :				#A0B3B0; /**/
	--mycalendar-border-color :			#A0B3B0;
	
	/* just colors (not specifically dedicated to text-color or background-color) */
	--chuv-green :						#4BA546;
	--black	:							#000000;
	/*--semi-transparent-black :			*/
	
	/* box shadows */
	--box-shadow :						0 4px 10px 4px var(--form-shadow);
	--question-shadow :					0 4px 10px 4px var(--question-bg-shadow);
	/* transitions */
	--default-transition :				all 0.5s ease;
	--border-color-transition :			border-color .25s ease;
	--grabbable-transition :			all .2s ease-in-out;
	
	/* animations */
	--default-animation :				animatezoom 0.5s;
}
/* basic ---------------------------------------------------------------------------------------------------------------------- */

.bold {
	font-weight : bold;
}

div.timer_wrapper {
	text-align:center;
	font-size: 18px;
	max-width: 300px;
	margin: 10px auto;
	background-color: rgba(19, 35, 47, 1);
	border-radius: 8px;
}

span.timer {
color: white;
font-weight: bold;
font-size: 18px;
max-width: 300px;
cursor: pointer;

padding: 4px;
}

span.timer:hover {
color: var(--action-bg);
-webkit-transition: color .6s ease;
}
.register_case {
min-width: 500px;
padding: 10px;
text-align: center;
margin: 10px auto;
}

.error-color-background {
	background-color: var(--error-color);	
}

.success-color-background {
	background-color: var(--success-color);
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

input.observation_grid {
text-align: right; 
border: none; 
max-width: 3em; 
font-size: min(3vw, 17px);
}

div.preselect {
border:1px solid rgba(255, 0, 0, 0);
border-radius: 50px;
max-width: 3em;
margin: auto;
padding-top: 4px;
padding-bottom: 4px;
-webkit-transition: 0.5s ease;
 transition: 0.5s ease;
}


div.preselectactive {
border:1px solid rgba(255, 0, 0, 1);
border-radius: 50px;
max-width: 3em;
margin: auto;
padding-top: 4px;
padding-bottom: 4px;
-webkit-transition: 0.5s ease;
 transition: 0.5s ease;
}

.tableheader {
	background-color:	var(--table-header-bg);
}

.tableheader:hover, .tableheaderhovered {
	background-color:	var(--table-header-bg-hover);
	-webkit-transition: color .6s ease;
}
.odd {
	background:			var(--odd-bg);
}


.even {
	background:			var(--even-bg);
}

.odd:hover, .even:hover {
	background:			var(--oddeven-bg-hover);
	-webkit-transition: color .6s ease;
}
.oddhovered, .evenhovered {
	background:			var(--oddeven-bg-hover);
	-webkit-transition: color .6s ease;
}

table.grid, div.grid{
	background:			var(--form-bg);
	box-shadow: none;
}

td.r_yellow {
	background-color:	var(--yellow-bg);
}
td.r_yellow:hover{
	background-color: var(--yellow-bg-hover);
}
td.completed.r_yellow {
	background-color: var(--yellow-bg-completed);
}

td.r_lightgreen {
	background-color: var(--lightgreen-bg);
}
td.r_lightgreen:hover {
	background-color:var(--lightgreen-bg-hover);
}
td.completed.r_lightgreen {
	background-color: var(--lightgreen-bg-completed);
}
td.r_red {
	background-color: var(--red-bg);
}
td.r_red:hover {
	background-color: var(--red-bg-hover);
}
td.completed.r_red {
	background-color: var(--red-bg-completed);
}
td.r_skyblue {
	background-color: var(--skyblue-bg);
}
 td.r_skyblue:hover {
	background-color: var(--skyblue-bg-hover);
}
td.completed.r_skyblue {
	background-color: var(--skyblue-bg-completed);
}
td.r_orchid {
	background-color: var(--orchid-bg);
}
td.r_orchid:hover {
	background-color: var(--orchid-bg-hover);
}
td.completed.r_orchid {
	background-color: var(--orchid-bg-completed);
}
td.r_orange {
	background-color: var(--orange-bg);
}
td.r_orange:hover {
	background-color: var(--orange-bg-hover);
}
td.completed.r_orange {
	background-color: var(--orange-bg-completed);
}

button.red, td.red, th.red {
	background-color: var(--red-bg);
}
button.red:hover, td.red:hover, th.red:hover {
	background-color: var(--red-bg-hover);
}
button.green,td.green,th.green {
	background-color: var(--green-bg);
}
button.green:hover,td.green:hover,th.green:hover {
	background-color: var(--green-bg-hover);
}
button.lightgreen,td.lightgreen,th.lightgreen {
	background-color: var(--lightgreen-bg);
}
button.lightgreen:hover,td.lightgreen:hover,th.lightgreen:hover {
	background-color:	var(--lightgreen-bg-hover);
}
button.gray, td.gray, th.gray {
	background-color: var(--gray-bg);
}
button.gray:hover,td.gray:hover,th.gray:hover{
	background-color: var(--gray-bg-hover);
}
button.yellow, td.yellow, th.yellow {
	background-color: var(--yellow-bg);
}
button.yellow:hover,td.yellow:hover,td.yellow:hover {
	background-color: var(--yellow-bg-hover);
}
button.orange, td.orange, th.orange {
	background-color: var(--orange-bg);
}
button.orange:hover,td.orange:hover,td.orange:hover {
	background-color: var(--orange-bg-hover);
}

.rotate90 {
 width:10px;
  transform: rotate(-90deg);
  /* Legacy vendor prefixes that you probably don't need... */
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.rotate-text {
	background-color: var(--orange-bg);
  display: inline-block; /* Ensure text behaves like a block element */
  transform: rotate(-90deg); /* Rotate the text only */
  transform-origin: left bottom; /* Adjust the rotation point as needed */
  white-space: nowrap; /* Prevent text wrapping */
  text-align: center; /* Aligns text properly */
  vertical-align: middle; /* Ensures proper alignment in table cells */
}

th.rotate-header {
    width: 30px;                  /* Adjust this value based on your text */
    vertical-align: middle;       /* Ensure content aligns vertically */
    text-align: center;           /* Center align horizontally */
    padding: 5px;                 /* Optional: Add some padding */
}

div.mimicktablegrideval { /* for Communication section */
	
	box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
	border-radius: 40px;
	table-layout: fixed;
	max-width:100%;
	padding: 30px;
}

.caseformObs {
	border-radius: 40px;
	background-color : gold;
	box-shadow: none;
}

html {
	overflow-y:					scroll;
	overflow-x:					hidden;
	-ms-text-size-adjust:		100%;
	-webkit-text-size-adjust:	100%
}
div.mycases {
	display: block;
	float: center;
	width: 95%;
	margin: 5px auto 5px auto;
	padding: 5px 0px 5px 10px;
	font-weight: bold;
	font-size: min(3vw, 18px);
}

div.fieldset { 
  display: block;
  margin: 0 auto;
  max-width: 1000px;
  padding: 10px 15px;
  border: 1px solid white;
  border-radius: 5px;
}

fieldset {
	padding: 5px 10px;
	border: 1px solid white;
	border-radius: 5px;
}

.condition-fieldset {
	border: 1px solid red;
}

ul,ol {
	margin : 0px;
}

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} /* not sure of utility */

body {
	margin:				0;
}

/* hidden or invisible should disappear 29.01.2025 */
.hidden {
    display: none;
}

.invisible {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.cursor-wait {
	cursor: wait !important;
}


/* font (sizes & display) ---------------------------------------------------------------------------------------------------------------------- */
html,body{
	font-family:		'Goudy Bookletter 1911',sans-serif; /* alernative = "Segoe UI",Arial,sans-serif */
	font-size:16px;
	line-height:1.5
}

input,textarea,select,button,a,div,span,p,h1,h2,h3,h4,h5,h6{
	font:				inherit;
}

h1,h2,h3,h4,h5,h6{
	font-weight:		400;
	margin:				10px 0;
	text-align:			center;
}

h1,.h1{font-size:3vw;}
h2,.h2{font-size:2.7vw}
h3,.h3{font-size:2.5vw}
h4,.h4{font-size:2.2vw}
h5,.h5{font-size:2vw}
h6,.h6{font-size:1.7vw}

input,textarea,select,label,div {
	font-size:			min(1.7vw, 16px);
}

div.hideshowQ { /* div englobing buttons to hide or show questions in grids */
	font-size:			min(3em, 20px);
}

textarea.item {
  font-size: min(1.7vw, 14px);
}

.tab-pagination a { /* next & prev menus */
	font-size:			1.7vw;
}

.tab-buttonstyle a {
	font-size: min(3vw, 20px);
}

.capitalize {
	text-transform: uppercase;
}


/* text colors ---------------------------------------------------------------------------------------------------------------------- */
div,p,span,a,legend,h1,h2,h3,h4,h5,h6,button,input,textarea,select { /* can add specifics like 'input[type="radio"]' if I want to target a specific input */
	color:				var(--main-text-color);
}

label {
	color:				var(--label-inactive-color);
}

label.highlight{
	color:				var(--label-active-color);
}

.tab-pagination a {	/* next & prev menus */
	color:				var(--main-text-color);
}

.req {
	color:				var(--req-color);
}

.link-color {
	color:				var(--link-color);
}

.link-color:hover,a.reactive:hover {
	color:				var(--link-color-hover);
}

.mailto-color {
	color :				var(--mailto-color);
}

.mailto-color:hover {
	color :				var(--mailto-color-hover);
}

.alert-color {
	color:				var(--alert-color);
}

.error-color {
	color:				var(--error-color);
}
.neutral-color {
	color:				var(--neutral-color);
}
.pending-color {
	color:				var(--pending-color);
}
.highlight-color {
	color:				var(--highlight-color);
}
.success-color {
	color:				var(--success-color);
}

.contrast-color {
	color:				var(--main-contrast-text-color);
}

.glyphicon-remove {
  color:				var(--alert-color);
}

.glyphicon-ok {
  color:				var(--main-text-color);
}
/* background color ---------------------------------------------------------------------------------------------------------------------- */
html, body {
	height: 100%;
	width:auto;
    margin: 0;
	background-color: var(--body-bg);
}

.form,.form-background-color {
	background-color:	var(--form-bg);
}

.full-banner,.small-banner {
	background-color:	var(--form-bg);
}

div.Question {
	background-color:	var(--question-bg);
}

.alert-bg,div.Question.QCheck-fail {
	background-color:	var(--alert-bg);
}

.alert-bg:hover,div.Question.QCheck-fail:hover {
	background-color:	var(--alert-bg-hover);
}

select,input,textarea {
	background-color:	inherit;
}

.modal {
	 background-color: var(--black); /* Fallback color */
	 background-color: var(--modal-bg); /* Black w/ opacity */
}
.success-bg {
	background-color:	var(--success-bg);
}

.success-bg:hover {
	background-color:	var(--success-bg-hover);
}

.error-bg {
	background-color:	var(--error-bg);
}
/* ------ links */
.tab-pagination a { /* next & prev menus */
	background:			var(--neutral-semi-transparent-bg);
}

.pagination a.active{
	background:			var(--main-menu-bg);
}

.tab-buttonstyle a {
	background-color:	var(--inactive-tab-bg);
}

a.active,button.active {
	background-color:	var(--active-tab-bg );
}

.link-full-cell {
    display: block;
    width: 100%;
    height: 100%;
    /*color: inherit; */
    text-decoration: none;
	/*padding: 100px; /* Optional: Adds padding inside the link */
}

/* ------ buttons */
button, a.button-like {
	outline:		none;
	-webkit-appearance:	none;
	margin:			5px;
	padding:		10px;
	font-size:		max(1.2em, 12px);
	border-radius:	16px;
	border:			0;	
}

button.table-head {
	width:			100%;
	margin :		0px;
	padding:		5px;
	border-radius:	8px;
}

a.button-like {
	padding:		12px;
}

.button-block {
  display: block;
  width: 100%;
  text-transform: uppercase;
}

.small-button-block {
	display: block;
	width: 100%;
}

button.delete-question {
	margin-bottom:1em;
}

.action {	/* = class for all the main buttons that "do" something (= an action) */
	color:				var(--action-color);
	background-color:	var(--action-bg);
	font-size:			clamp(14px, 1.2vw, 18px);
}

.action-bg {
	color:				var(--action-color);
	background-color:	var(--action-bg);
}

.neutral,button.neutral {
	color:				var(--neutral-color);
	background-color:	var(--neutral-bg);	
}

.neutral-bg {
	background-color:	var(--neutral-bg);	
}

.action:hover {
	background:			var(--action-bg-hover);
}

button.inline-button {
	font-size:			inherit;
}


/* hover effects on background ---------------------------------------------------------------------------------------------------------------------- */
.tab-buttonstyle a:hover:not(.active),.tab-pagination a:hover:not(.active) {
	background-color:	var(--inactive-tab-bg-hover);
}

div.Question:hover {
	background-color:	var(--question-bg-hover);
}
button.neutral:hover {
	background-color:	var(--neutral-bg-hover);	
}

/* border & border-radius ---------------------------------------------------------------------------------------------------------------------- */
.form,.small-banner {
	border-radius:		40px;
}

input, textarea,select,div.Question {
	border:				1px solid var(--input-border-color);
	
}

input:focus, textarea:focus, select:focus, div.Question:hover{
	outline:			0;
	border-color:		var(--active-bg);
}

input, textarea,select {
	border-radius:		20px;
}

div.Question {
	border-radius: 16px;
}

/* box shadow ---------------------------------------------------------------------------------------------------------------------- */
table,.form {
	 box-shadow:		var(--box-shadow);
}

div.Question {
	box-shadow:			var(--question-shadow);
}
/* cursor ---------------------------------------------------------------------------------------------------------------------- */
a, button,select {
	cursor:				pointer;
}

input[type="text"], textarea {
	cursor:				text;
}

label {
	pointer-events:		none;
}
label.switch {
    pointer-events: auto;
}


/* transition ---------------------------------------------------------------------------------------------------------------------- */
button,a,span,label,.tab-pagination a,.odd,.even,div.Question{
	-webkit-transition:	var(--default-transition);
	transition:			var(--default-transition);
}
input, textarea,select {
	-webkit-transition: var(--border-color-transition), box-shadow .25s ease;
	transition:			var(--border-color-transition), box-shadow .25s ease;
}
/* animation ---------------------------------------------------------------------------------------------------------------------- */

/*  Zoom Animation */
.animate {
  -webkit-animation:	var(--default-animation);
  animation:			var(--default-animation);
}

div.Question{
	 transform: scale(1);
	 transition: all 0.5s;
}

div.Question.fall {
	 transform: scale(0);
   /* animation: fallAway 0.5s;*/
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* display, align & shapes ---------------------------------------------------------------------------------------------------------------------- */

/* building blocks */
.form {
	padding:			20px;
	max-width:			90%;
	height:				auto;
	margin:				2px auto;
}

.welcome-form {
	width: 40%;
	max-width: 500px;
	min-width: 250px; /* (new) don't shrink too much */
	background: var(--form-bg);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	text-align: center;
	padding: 20px;
	margin-left: 45%;
	margin-bottom: 20%;
	margin-top: 80px; /* <<< (new) push down under menu */
}

@media (max-width: 768px) {
	.welcome-form {
		width: 80%; /* <<< become wider on small screen */
		margin-left: auto; /* <<< center on mobile */
		margin-right: auto;
		margin-top: 100px; /* slightly larger top space if needed */
	}
}

.background-container {
	background-image: url('/images/rescos_accueil.JPG');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* align items to the start */
}

.responsive-img {
	width: 100%;
	max-width: 300px; /* limit image size */
	height: auto;
	display: block;
	margin: 0 auto 20px auto; /* center + margin under logo */
}

table.grid {
	margin : 10px auto;
}

.bubble-form {
	margin-top:			20px;
}

.full-banner,.small-banner {
	padding:			5px;
	height:				auto;
	margin:				2px auto;
}
.small-banner {
	max-width:			70%;
}
.full-banner {
	width:				100%;
}

.info-form {	/* used for success/error forms */
	max-width:	70%;
	margin-top: 10%;
}

input,select,textarea { /* !!!!! Might need to be revised */
	margin:				0;
}

div.tab-pagination { 		/* for prev & next menus */
	width:				100%;
	top:				-5px;
	text-align:			center;
}

.double-inline:after, .triple-inline:after {
	content:			"";
	display:			table;
	clear:				both;
}

.double-inline > div, .triple-inline > div {
	float:				left;
	margin-right:		2%;
}
.double-inline > div {
	width:				48%;
}

.triple-inline > div {
  	width:				30%;
}

.double-inline > span, .triple-inline > span { /* might need revising */
	display:			inline-block;
	width:				auto;
	margin-right:		2%;
}

.double-inline > div:last-child, .triple-inline > div:last-child,.double-inline > span:last-child, .triple-inline > span:last-child  {
	margin:				0;
}

.push-right {
	margin-left:		2vw;
}

.modal {
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  padding: 50px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

.imgmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,1); /* Black w/ opacity */
  text-align: center;
 
}

.itemrule { /* Au moins xx = oui; xx = +/- ; xx = non */
	font-size:	0.8em;
}
@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}
.centerer {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: var(--neutral-color);
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: var(--contrast-color);
  text-decoration: none;
  cursor: pointer;
}
.insidemodal {
	max-width: 100% ; 
	max-height:95%;
	margin: auto;
	display: inline-block;
	vertical-align: middle;
	animation-name: zoom;
	animation-duration: 0.6s;
	cursor: default;
}
.img {
	margin-top : 2%;
	margin-bottom : 2%;
	display: inline-block;
	max-width:45%; 
	cursor: zoom-in; 
	height:auto;
	vertical-align: top;
}
.aud, .vid {
	display: inline-block;
	width:45%; 
	height:auto;
	vertical-align: top;
	text-align: center;
}
/* input -------- */
input, textarea, select {
	height:				2.5em;
	width:				100%;
	padding:			8px 15px;
	resize:				vertical;
	white-space:		pre-wrap;
	/* to remove the weird gloss effect dropdown list Safari */
	-webkit-appearance: none;
}
select.select {
	background-color: var(--form-shadow);
}

input[type="radio"] { 
	-webkit-appearance:	radio;
	display:			inline-block;
	width:				auto;
	height:				auto;
	opacity:			1;	
}

input[type="checkbox"] { 
	-webkit-appearance:	checkbox;
	display:			inline-block;
	width:				auto;
	height:				auto;
	opacity:			1;	
}

.dynamic_list>input {
  display: none;
}

.dynamic_list>input:first-child {
  display: block;
}

.blockingdiv {
  background: rgba(19, 35, 47, 1);
  height: 120%;
  width: 100%;
  text-align:center;
  z-index:99999;
}
/* label -------- */
label {
	position:			absolute;
	-webkit-transform:	translateY(0.5em);
	transform:			translateY(0.5em);
	left:				1em;
	/*-webkit-backface-visibility: hidden;*/
}

label.active {
	display:			block;
	-webkit-transform:	translateY(-1.5em);
    transform:			translateY(-1.5em);
	left:				0.5em;
}

label.active .req,label.active .pex {/* used to make the "required " (=req) or "for example" (=pex) stars (*) in input and select field disappear when filled */
  opacity:				0;
}

label.prefilled {
	position:			absolute;
	left:				0.5em;
	-webkit-transform:	translateY(-1.5em);
	transform:			translateY(-1.5em);
}


/* list -------- */


/* link -------- */
a {
	text-decoration:	none;
	cursor:				pointer;
}

.tab-pagination a { 		/* next & prev menus */
	display:			inline-block;
	text-decoration: 	none;
	margin:				10px auto;
	padding:			4px 15px;
}
/* fieldset -------- */
/* table -------- */

table, th, td {
  border:				none;
  border-collapse:		collapse; 
  overflow-wrap: 		break-word;
}

table {
	box-shadow: 0 4px 10px 4px var(--question-bg-shadow);
	
	table-layout: fixed;
	width:100%;
}

th.title {
	padding: 15px;
	text-align: left;
}
/* checkbox */
/* The switch - the box around the slider */


.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--error-color);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--success-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Disabled state */
.switch input:disabled + .slider {
  background-color: var(--disabled-success-color); /* Grayish color for disabled state */
  cursor: not-allowed;
}

.switch input:disabled + .slider:before {
  background-color: #f2f2f2; /* Lighter gray for the knob */
}

/* Rounded sliders */
.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}


/* special classes of display & positions -------- */
div.hideshow-Osection { /* div englobing radio inputs to hide or show observation sections (Osection -> ASMC)*/
	display:inline-block;
	margin-bottom:15px;
}
div.Question {
	max-width: 90%;
	padding: 0.5em;
	margin-bottom:1em;
	box-shadow: 0 4px 100px 4px var(--question-bg-shadow);
}
div.hideshowQ { /* div englobing buttons to hide or show questions in grids */
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top:20px;
	width: 5%;
	float:right;
}

.hidwshowQ > button {
	max-width:90%;
	
}

a.shownextQ, a.hidelastQ {
display:block;
text-align: center;
border: 1px solid #ffffff;
color: #ffffff;
background-color: rgba(13, 24, 33, 0.7);
border-radius: 5px;
font-size: calc(14px + .5vw);
width: 100%;
margin-bottom:15px;
}

a.shownextQ:hover, a.hidelastQ:hover {
border: 1px solid #1ab188;
}


.tab-buttonstyle a {
	display: block;
	padding: 5px;
	float: left;
	width: 50%;
	text-align: center;
}

.third-width a {
	width: 33%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
}
.sticky {
	position:			-webkit-sticky; /* Safari */
	position:			sticky;
	left:				0;
	z-index:			2;
}

.inline-block {
	display:			inline-block;
}



.center {
	text-align:			center;
}

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

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

.big-margin-top { /* add a margin on top of element */
	margin-top:5rem;
}
.form-content > div{
  display: none;
}

.form-content > div:first-child{ /* sets up the viewing of first step tab when loading window */
  display: block;
}
/* special classes of building blocks (risk of f****** up site if you touch)-------- */

.field-wrap,.Q-wrap {
  position: relative; 
}

.field-wrap {
	margin-bottom:		40px;
}

textarea.item {
  display: inline-block;
  width: 30%;
  margin-top: 5px;
  margin-right: 1.5%;
  margin-left: 1.5%;
}

#insideAdminPopup {
    display: block;
}

.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    /* Center horizontally */
    display: block;
    margin: 0 auto;
}

/* Keyframes to create the spinning animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.progress-bar-container {
  width: 100%;
  background-color: var(--action-bg-hover);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 20px;
}

.progress-bar {
  width: 0;
  height: 30px;
  background-color: var(--action-bg);
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 5px;
}

/* @media screen (changes parameters if smaller screen) ------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 650px) {
	div.form,.small-banner {
  		max-width:99%;
	}
	input,textarea,select,label,div {
		font-size:			1em;
	}
	textarea.item, button {
  		font-size: 	0.8em;
	}
}

@media screen and (max-width: 650px) {
	select, input, textarea, label, label.prefilled, span.pex, label.req, label.active, label.itemrule-label, label.itemrule-label.active, span.pex, th, td, input.observation_grid, div.mycases, button.button {
		font-size: 2.5vw;
	}
	h1,.h1{font-size:30pt;}
	h2,.h2{font-size:24pt}
	h3,.h3{font-size:20pt}
	h4,.h4{font-size:16pt}
	h5,.h5{font-size:0.8em}
	h6,.h6{font-size:12pt}
  span.griditem {
	 font-size: 2.5vw;
  }
  
  span.gridtitle, span.grid_question {
	  font-size: 3vw;
  }

}