/*Inputs Here*/

/*
ooooo                                        .
`888'                                      .o8
 888  ooo. .oo.   oo.ooooo.  oooo  oooo  .o888oo  .oooo.o
 888  `888P"Y88b   888' `88b `888  `888    888   d88(  "8
 888   888   888   888   888  888   888    888   `"Y88b.
 888   888   888   888   888  888   888    888 . o.  )88b
o888o o888o o888o  888bod8P'  `V88V"V8P'   "888" 8""888P'
                   888
                  o888o
*/


input[type="button"].btn-cancel {
	text-shadow: none;
	border: none;
}


input[type=button].cancel:hover:enabled 	{
	background: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	border: none;
	color: blue;
	text-decoration: underline;
	text-shadow: none;
}




.highlight--changed	{
	border: 1px solid hsl(30, 100%, 48%);
	background-color: hsl(30, 100%, 48%, 0.125);
}

.highlight--changed :is(input, select, textarea)	{
	background-color: unset;
}


select[readonly]{
	background: #eee;
	cursor:no-drop;
}

select[readonly] option{
	display:none;
}

/* Do NOT color the options, it will not highlight selected options
select > option {}
select > option:not(selected) {
  background: #f2f2f2;
}

select[multiple] > option:selected {
  background: #2aa1ff;
}

*/


input[type=checkbox] {
	min-height: 25px;
	min-width: 25px;
	width: 25px;
	height: 25px;
	margin-inline: auto;

}

input.placeholder_text,
textarea.placeholder_text {
	color: #888888;
}




textarea
,select
,input
,button
,.btn--fake 	{

	--_width: var(--width, 150px);
	--_padding: var(--padding,  5px 7px);
	--_text-align: var(--text-align, left);
	--_margin: var(--margin);


	background-color: white;

	border: 1px solid;
	border-color: #848484 #c1c1c1 #e1e1e1;
	border-radius: 1px;
	outline: 0;

	width: var(--_width);
	padding: var(--_padding);
	margin: var(--_margin);

	vertical-align: top;
	text-align: var(--_text-align);

	font-family:unset;
	font-style: unset;
	font-variant-ligatures: unset;
	font-variant-caps: unset;
	font-variant-numeric: unset;
	font-variant-east-asian: unset;
	font-weight: unset;
	font-stretch: unset;
	font-size: unset;
	font-family: unset;
	line-height: unset;
}

a.btn--fake {
	text-decoration: none;        /* remove underline */
	display: inline-block;        /* allows padding */
	text-align: center;
}


textarea 	{
	//overflow: hidden;
	overflow-y: auto;
	resize: none;
	min-height: 100px;
	height: 100%;
	resize: vertical;
}

textarea[maxlength="8000"] {
	min-height: 350px;
}





input:invalid
,button:invalid
,select:invalid
,textarea:invalid {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}

input:focus
,input[type=button]:focus
,button:focus
,select:focus
,textarea:focus {
	box-shadow: 1px 1px 8px 3px rgba(10, 112, 188, 0.62);
}


input[type=file]:focus
,input[type=file]:active
,input[type=radio]:focus
,input[type=radio]:active
,input[type=checkbox]:focus
,input[type=checkbox]:active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}

input[type=button]
,button
,.btn--fake {
	padding: var(--btn--padding, .5em 1em);
	width: var(--btn--width, auto);
	margin: var(--btn--margin, 10px);
	font-size: var(--btn--font-size, 1.25rem);
	text-align: var(--text-align, center);
	text-shadow: var(--text-shadow);
	display: var(--btn--display, inline-block);

	position: relative;
	min-width: fit-content;
	text-decoration: none;

	font-weight: bold;
	font-style: normal;
	font-smoothing: antialiased;
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		-o-font-smoothing: antialiased;
		-ms-font-smoothing: antialiased;

	border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		-ms-border-radius: 3px;


	border: none;

	box-shadow: 0 0 1px rgba(0,0,0,0.35)
				,0px 1px 3px rgba(0,0,0,0.18)
				,inset 0px -3px 0px rgba(0,0,0,0.35)
				,inset 0px 14px 14px rgba(255,255,255,0.10);
		-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.35)
					,0px 1px 3px rgba(0,0,0,0.18)
					,inset 0px -3px 0px rgba(0,0,0,0.35)
					,inset 0px 14px 14px rgba(255,255,255,0.10);
		-moz-box-shadow: 0 0 1px rgba(0,0,0,0.35)
					,0px 1px 3px rgba(0,0,0,0.18)
					,inset 0px -3px 0px rgba(0,0,0,0.35)
					,inset 0px 14px 14px rgba(255,255,255,0.10);
		-o-box-shadow: 0 0 1px rgba(0,0,0,0.35)
					,0px 1px 3px rgba(0,0,0,0.18)
					,inset 0px -3px 0px rgba(0,0,0,0.35)
					,inset 0px 14px 14px rgba(255,255,255,0.10);
		-ms-box-shadow: 0 0 1px rgba(0,0,0,0.35)
					,0px 1px 3px rgba(0,0,0,0.18)
					,inset 0px -3px 0px rgba(0,0,0,0.35)
					,inset 0px 14px 14px rgba(255,255,255,0.10);
	cursor: pointer;

}

.btn--large 	{
	--btn--padding: 1em;
	--btn--width: 17em;
}


button:active
,button:hover:enabled
,.btn:active
,.btn:hover:enabled
,.btn:hover:enabled:active
,input[type=reset]:active
,input[type=submit]:active
,input[type=button]:active
,input[type=button]:hover:enabled
,input[type=reset]:hover:enabled:active
,input[type=submit]:hover:enabled:active
,input[type=button]:hover:enabled:active {
/* Active State (clicked on) */

//	font-size: calc(var(--font-size, 1.25rem) * 1.125);
	filter: brightness(120%);

	border-top: 1px solid rgba(0,0,0,0.55);
	box-shadow: 0 0 10px rgba(0,0,0,0.35)
				,0px 2px 1px rgba(255,255,255,0.50)
				,inset 0px 1px 4px rgba(0,0,0,0.35)
				,inset 0px -14px 14px rgba(255,255,255,0.10);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35)
					,0px 2px 1px rgba(255,255,255,0.50)
					,inset 0px 1px 4px rgba(0,0,0,0.35)
					,inset 0px -14px 14px rgba(255,255,255,0.10);
		-moz-box-shadow: 0 0 10px rgba(0,0,0,0.35)
					,0px 2px 1px rgba(255,255,255,0.50)
					,inset 0px 1px 4px rgba(0,0,0,0.35)
					,inset 0px -14px 14px rgba(255,255,255,0.10);
		-o-box-shadow: 0 0 10px rgba(0,0,0,0.35)
					,0px 2px 1px rgba(255,255,255,0.50)
					,inset 0px 1px 4px rgba(0,0,0,0.35)
					,inset 0px -14px 14px rgba(255,255,255,0.10);
		-ms-box-shadow: 0 0 10px rgba(0,0,0,0.35)
					,0px 2px 1px rgba(255,255,255,0.50)
					,inset 0px 1px 4px rgba(0,0,0,0.35)
					,inset 0px -14px 14px rgba(255,255,255,0.10);
		-webkit-animation: none;

}

button:hover:enabled
,.btn:hover:enabled
,input[type=reset]:hover:enabled
,input[type=submit]:hover:enabled
,input[type=button]:hover:enabled	{
	/* Hover State */
//	background-image: linear-gradient(rgb(0 0 0/20%) 0 0);

	transform: translate(0, 2px) scale(1.05);
	-webkit-transform: translate(0, 2px) scale(1.05);
	-moz-transform: translate(0, 2px) scale(1.05);
}




button::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
	border: 0;
	--btn--padding: 0;
	--input--padding: 0;
}

[disabled] {
	pointer-events: none; /* Allow pointer-events so that on hover will work  */
	background-color: var(--color-disabled) ;
	border: black 1.5px solid ;
	color: black ;
	cursor: default; /* Keeps the default cursor instead of 'not-allowed' */

}

.floatingLabel:has(.chosen-disabled)
,.floatingLabel:has(.chosen-disabled) > * {
	cursor: default;
	background-color: var(--clr-disabled);
	color: black;
}

//.disabled .information .chosen-disabled
//,.disabled .information input[disabled] {
//	border: none;
//}


/* Allow pointer events, so that TITLE will show on hover */
input[type="button"][disabled]
,button[disabled] {
	border: black 1.5px solid;
	background: none;
	background-color: lightgrey;
	color: black;
	font-weight: normal;
	cursor: not-allowed;
	text-shadow: none;
	pointer-events: unset;
}


button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled] {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	color:black;
	cursor: default;
	border: black 1.5px solid;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #888888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #888888;
}



.divSearch input[type=button]{
	--width: 100px;
}

.information :is(input[disabled], select[disabled], textarea[disabled]) {
	border: none;
}



input[type=button]#btnNewHighSchool 	{
	background-color: var(--color-highSchool);
	--color: white;
	--width: auto;
	--margin: .5em;
}



input[type=button]#btn--menu--student 	{
	background-color: hsl(170, 100%, 15%);
	color: white;
}


input[type=button]#btn--list-student-id 	{
	background-color: hsl(187, 100%, 38%);
	color: white;
}





input[type=button]#btn--menu--student:disabled 	{
	background-color: #BFBFBF;
	color: black;
}

#search--buttons input[type=button]
,#search--buttons a.btn 	{
	padding: 12px 15px;
	margin: .5em;
	width: fit-content;
}


:is(.form__buttons, .form--buttons) input[type=button] {
	--btn--font-size: 1.4rem;
	--btn--padding: .5em .75em;
	--btn--margin: 1em;
}




select option.disabled
,.chosen-results li.disabled 	{
	color: red;
}


.buttons {
	display: var(--display, flex);
	align-items: center;
	justify-content: space-around;
	margin: 2em 1em;
}

.buttons hr:not(.hr-vertical) {
	width: 90%;
}

.buttons input[type=button] {
	--btn--font-size: 1.30rem;
	--btn--padding: .75em;

	width: var(--btn--width, 200px);
	margin: var(--btn--margin, .5em);
}


.container__buttons-wrapper input[type=button] {
	--margin: 1em 1em 1em 0;
	--font-size: 1.25rem;
}





[data-toggle=all] {
	--btn--hue: 0;
	--btn--saturation: 0%;
	--btn--lightness: 66%;
	--btn--color: black;
}