/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


html body .content {
	min-height: auto;
}

.content-wrapper {
	padding: 20px 0px;
	min-height: calc(100vh - 188px);
}

.form-small {
	max-width: 600px;
	margin: 20px auto;
}

.material-symbols-outlined {
    font-size: 1.71em;
    line-height: 0.5848em;
    vertical-align: -0.35055em;
}

.form-group-style label {
	margin: 0px !important;
}

table .actions {
	width: 100px;
}

body {
	background: url(../img/bg-main.jpg) no-repeat top center #eaf6fa;
	background-size: contain;
}

body.admin {
	background-image: none !important;
}

body.home {
	background-image: url(../img/bg-home.jpg);
}

body.no-menu {
	padding: 0px !important;
}

.header-navbar {
	background: #fc9901;
	color: #ffffff;
}

.header-navbar .brand-text {
	color: #ffffff;
}


.material-horizontal-layout .app-content .content-header .content-header-dark.bg-img {
	background-image: none !important;
	background-color: #3f4a54;
}

.material-horizontal-layout .app-content .content-header .content-header-dark .content-header-right,
.material-horizontal-layout .app-content .content-header .content-header-dark .content-header-left {
	background-color: #3f4a54;
}

.splash,
.logo {
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
	margin: auto;
}

.page-error {
	color: #ffffff;
	text-align: center;
	padding: 30px 0px;	
}

.page-error h1 {
	font-weight: bold;
	color: #ffffff;
	line-height: 40px;
}

.group-section {
	display: none;
}

.group-section.show {
	display: block !important;
} 

.login-container {
	max-width: 400px;
	margin: auto;
}

.pace-progress {
	background-color: #fc9901 !important;
}

.card-header {
	background: #fc9901;
	color: #ffffff;
}

.card-header .card-title {
	color: #ffffff;
	font-weight: bold;
}

.btn-primary {
    border-color: #38cdff !important;
    background-color: #38cdff !important;
    color: #FFFFFF;
}

.btn-primary:hover {
    border-color: #1fc7ff !important;
    background-color: #1fc7ff !important;
    color: #FFF !important;
}

.app-content .wizard > .actions > ul > li > a {
    background: #38cdff;
}

.app-content .wizard > .steps > ul > li.current .step {
    border-color: #38cdff;    
    color: #38cdff;
}

.app-content .wizard > .steps > ul > li.done .step {
    background-color: #38cdff;
    border-color: #38cdff;    
}

.app-content .wizard.wizard-circle > .steps > ul > li:before, 
.app-content .wizard.wizard-circle > .steps > ul > li:after {
    background-color: #38cdff;
}

.breadcrumb .breadcrumb-item a {
	color: #38cdff !important;
}

.breadcrumb .breadcrumb-item a:hover {
	color: #6bdaff !important;
}

.btn-primary:focus, .btn-primary:active {
    border-color: #38cdff !important;
    background-color: #38cdff !important;    
}

.form-title {
	text-align: center;
	padding: 30px 0px;
}

#appointment-slots a {
	display: block;
	text-align: center;
	margin: 20px auto;
	font-size: 24px;
	border-radius: 20px;
}

.content-body {
	padding-bottom: 30px;
}

table.table {
	margin-top: 20px;
}

.input-display {
	padding: 5px 0px;
}

.form-group-style label {
	color: #fc9901;
}

#change-password {
	display: none;
}

#change-password.show {
	display: block;
}

.btn-slot.active {
	background-color: #1fc7ff !important;
}

#appointment-processing {
	display: none;
	color: #464855;
	text-align: center;
	padding-bottom: 10px;
}

#appointment-processing.show {
	display: block;
}

#section-list {
	margin-left:-15px; 
	margin-right:-15px; 
	padding-top:20px; 
	margin-bottom:-4px;
}

#input-message {
	height: 300px;
	border-bottom: none;
}

#section-list input {
	padding: 5px;
	border: 1px solid rgba(0, 0, 0, 0.07);	
}

#section-list input.hide {
	display: none;
}

#section-list .name.hide {
	display: none;
}

#section-list .icon-edit.hide {
	display: none;
}

.enrollee-status-admin {
	text-transform: uppercase;
    font-size: 25px;
}

@media (max-width:320px) {
	.content-wrapper {
		min-height: calc(100vh - 126px);
	}

	.flexbox-container {
		min-height: calc(100vh - 156px) !important;
	}
}

@media (max-width:425px) {
	.flexbox {	
		min-width: calc(100vw - 30px) !important;
	}
}

@media (min-width:321px) and (max-width:1024px) {
	.content-wrapper {
		min-height: calc(100vh - 114px);
	}

	.flexbox-container {
		min-height: calc(100vh - 135px);
	}
}

@media (max-width:375px) {
	.splash {	
    	padding-top: 20px;
    	padding-bottom: 20px;    
    	width: 200px;
	}
}

@media (max-width:430px) {
	.splash img.large,
	.logo img.large {
		display: none;
	}

	body.home {
		background-image: url(../img/bg-home-mobile.jpg);
		background-size: contain;
	}

	#appointment-slots a {
		font-size: 16px !important;
	}
}

@media (min-width:376px) and (max-width:430px) {
	.splash {	
    	padding-top: 20px;
    	padding-bottom: 20px;    
    	width: 260px;
	}
}

@media (min-width:431px) {
	.splash img.small,
	.logo img.small {
		display: none;
	}

	.splash {
		padding: 158px 0px;
		/*width: 34vw;*/
	}

	body {
		background-size: cover;
	}
}