:root {
	--primary-green: #009945; /* legacy fallback */
	--ebits-blue: #27A9E3;
	--font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
	/* New semantic tokens injected at runtime via Blade root vars; keep fallbacks */
	--color-primary: var(--color-primary, #009945);
	--color-primary-hover: var(--color-primary-hover, #007a38);
	--color-primary-muted: var(--color-primary-muted, #4fbf7c);
}

html, body {
	/*height: 100%;*/
	min-height: 100vh !important;
	width: 100%;
	font-size: 16px !important;
	/* background: url(../img/bg3.jpg) !important; */
	background: var(--dynamic-image-path) !important;
	/*background: url(../img/light_wool.png) var(--primary-green) !important;*/
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: cover !important;
	background-blend-mode: overlay !important;
	font-family: var(--font-family) !important;
}

.page {
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	min-height: 100vh;
}

.form-container {
	width: 80%;
	height: 80%;
	background-color: rgba(255, 255, 255, 0.81);
	border-radius: 5px;
	box-shadow: 0 16px 26px -10px rgba(63, 106, 216, 0.15), 0 4px 25px 0px rgba(0, 0, 0, 0.11), 0 8px 10px -5px rgba(63, 106, 216, 0.08);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.form-image-container {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: rgba(0, 150, 45, 0.05);
}

.main-form-container {
	flex: 2;
	padding: 2em;
}

.text-muted {
	opacity: .5;
}

.no-margin-top {
	margin-top: 0 !important;
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

.form-control {
	width: 100% !important;
	height: 30px !important;
	padding: 5px 10px !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	background: none !important;
	border: 2px solid rgba(0, 0, 0, 0.15) !important;
	font-weight: 600 !important;
	font-family: var(--font-family);
}

.form-control:focus {
	border: 2px solid var(--color-primary) !important;
	box-shadow: none !important;
	color: var(--color-primary);
	background: var(--color-primary-muted, rgba(0,153,69,0.07)) !important;
}

.form-control:hover {
	border: 2px solid var(--color-primary) !important;
}

.form-group label {
	font-weight: bold;
}

.login-form, .password-reset-form {
	width: 65%;
}

input[type="checkbox"] {
	width: 15px !important;
	height: 15px !important;
}

.logo-container {
	/*width: 85%;*/
	text-align: left;
	display: flex;
	margin-bottom: 70px;
}

@media all and (max-width: 1024px) {
	.form-container {
		width: 95%;
	}

	.logo-text {
		font-size: 35px !important;
		align-self: center;
		padding-left: 10px;
	}

	.logo-image {
		width: 100px !important;
	}
}

@media all and (max-width: 768px) {
	.logo-text {
		font-size: 26px !important;
		align-self: center;
		padding-left: 15px;
	}

	.logo-image {
		width: 70px !important;
	}

	.form-image-container {
		display: none;
	}
}

@media all and (max-width: 426px) {
	.logo-text {
		font-size: 18px !important;
		align-self: center;
		padding-left: 10px !important;
	}

	.logo-image {
		width: 45px !important;
	}
}

.logo {
	width: 100px;
	display: inline;
	flex: 1;
}

.logo-text {
	flex: 2;
	font-size: 40px;
	padding-left: 10px;
	font-weight: bold;
	line-height: 1.3;
	color: var(--color-primary);
}

.form-group {
	margin-bottom: 20px;
}

.btn-primary {
	min-width: 90px !important;
	height: 40px !important;
	font-size: 16px !important;
	font-weight: bold !important;
	font-family: var(--font-family) !important;
	border: none !important;
	border-radius: 8px !important;
	background: var(--color-primary) !important;
	color: #fff !important;
	text-shadow: none !important;
}

a {
	color: var(--color-primary) !important;
}

.alert {
    padding-left: 25px !important;
    text-shadow: none !important;
}

.alert ul {
    margin: 0 !important;
}

/*.alert-danger, .alert-error {
    color: #fafcfd !important;
    background-color: #f37474 !important;
    border-color: #eed3d7 !important;
    text-shadow: none !important;
}*/

.otp {
    position: relative !important;
    /*width: 320px !important;*/
    /*margin: 0 auto !important;*/
}

.otp fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.otp fieldset div {
    display: flex !important;
    align-items: center !important;
}

.otp legend {
    margin: 0 auto 1em !important;
    color: #5555FF !important;
}

.otp-number {
    width: 1.2em !important;
    line-height: 1 !important;
    margin: 0.1em !important;
    padding: 8px 0 4px !important;
    font-size: 2.3em !important;
    text-align: center !important;
    appearance: textfield !important;
    -webkit-appearance: textfield !important;
	border: 2px solid var(--color-primary) !important;
	color: var(--color-primary) !important;
    border-radius: 4px !important;
    height: 1em !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* 2 group of 3 items */
input[type="number"]:nth-child(n+4) {
    order: 2 !important;
}
/*.otp div::before {
    content: '' !important;
    height: 2px !important;
    width: 24px !important;
    margin: 0 .25em !important;
    order: 1 !important;
    background: #BBBBFF !important;
}*/

.otp label.otp-label {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.form-control, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, select, .dataTables_wrapper .form-control, .dataTables_wrapper textarea, .dataTables_wrapper input[type="text"], .dataTables_wrapper input[type="password"], .dataTables_wrapper input[type="datetime"], .dataTables_wrapper input[type="datetime-local"], .dataTables_wrapper input[type="date"], .dataTables_wrapper input[type="month"], .dataTables_wrapper input[type="time"], .dataTables_wrapper input[type="week"], .dataTables_wrapper input[type="number"], .dataTables_wrapper input[type="email"], .dataTables_wrapper input[type="url"], .dataTables_wrapper input[type="search"], .dataTables_wrapper input[type="tel"], .dataTables_wrapper input[type="color"], .dataTables_wrapper .uneditable-input, .dataTables_wrapper select, .select2-container--default .select2-search--dropdown .select2-search__field {
    width: 95% !important;
    height: 25px !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: none !important;
    border: 2px solid rgba(0, 0, 0, 0.15) !important;
    font-weight: 600 !important;
    font-family: var(--font-family);
}

.iziModal .form-control {
    width: 100% !important;
    height: 40px !important;
}

select.form-control, .dataTables_wrapper select {
    height: 39px !important;
    width: 100% !important;
}

select.form-control{
    height: 39px !important;
    width: 100% !important;
}

.form-control:focus, .dataTables_wrapper .form-control:focus, .dataTables_wrapper textarea:focus, .dataTables_wrapper input[type="text"]:focus, .dataTables_wrapper input[type="password"]:focus, .dataTables_wrapper input[type="datetime"]:focus, .dataTables_wrapper input[type="datetime-local"]:focus, .dataTables_wrapper input[type="date"]:focus, .dataTables_wrapper input[type="month"]:focus, .dataTables_wrapper input[type="time"]:focus, .dataTables_wrapper input[type="week"]:focus, .dataTables_wrapper input[type="number"]:focus, .dataTables_wrapper input[type="email"]:focus, .dataTables_wrapper input[type="url"]:focus, .dataTables_wrapper input[type="search"]:focus, .dataTables_wrapper input[type="tel"]:focus, .dataTables_wrapper input[type="color"]:focus, .dataTables_wrapper .uneditable-input:focus, .dataTables_wrapper select:focus, .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border: 2px solid var(--color-primary) !important;
	box-shadow: none !important;
	color: var(--color-primary) !important;
	background: var(--color-primary-muted, rgba(0,153,69,0.07)) !important;
}

.form-control:hover, .dataTables_wrapper textarea:hover, .dataTables_wrapper input[type="text"]:hover, .dataTables_wrapper input[type="password"]:hover, .dataTables_wrapper input[type="datetime"]:hover, .dataTables_wrapper input[type="datetime-local"]:hover, .dataTables_wrapper input[type="date"]:hover, .dataTables_wrapper input[type="month"]:hover, .dataTables_wrapper input[type="time"]:hover, .dataTables_wrapper input[type="week"]:hover, .dataTables_wrapper input[type="number"]:hover, .dataTables_wrapper input[type="email"]:hover, .dataTables_wrapper input[type="url"]:hover, .dataTables_wrapper input[type="search"]:hover, .dataTables_wrapper input[type="tel"]:hover, .dataTables_wrapper input[type="color"]:hover, .dataTables_wrapper .uneditable-input:hover, .dataTables_wrapper select:hover, .select2-container--default .select2-selection--single:hover, .select2-container--default .select2-search--dropdown .select2-search__field:hover {
	border: 2px solid var(--color-primary) !important;
}

.form-group label {
	font-weight: bold !important;
	color: #5c5c5c;
}

input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
}

.form-group {
    margin-bottom: 10px !important;
}

.student-update-form [class*="span"]{
	margin-left: 18px;
}