/* @import url(/public/assets/css/theme-root.css); */

.select2-div .select2-container--default .select2-selection--single {
    background: var(--bg-white) !important;
    background-image: linear-gradient(315deg, var(--bg-white) 0%, var(--bg-gredi) 74%) !important;
    color: var(--text-black) !important;
	order: 1 !important;
}
.swal2-popup.swal2-toast .swal2-title{
	font-size: 1.5em !important;
}
.card-body{
    padding: 0.6rem !important;
}
.main-backgroung-image{
    background: url('../images/citynights.jpg')rgba(25, 25, 26, 0.425);
    background-size:cover;
    background-blend-mode: multiply;
}
.main-body-login-page{
    width: 70%;
    position: relative;
    margin:10% 15%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.app-sidebar__heading{
    font-size: 2rem !important;
    /* text-transform: capitalize; */
    letter-spacing: 2px !important;
    font-weight: 500 !important;
    margin: 1.75rem 0 0px 0 !important; 
}
.no-gutters.row{
    margin-top: 0px;
}

.app-login-box{
    margin: 15px 0 15px 0;
    /* text-align: center !important; */
}

.app-login-box h4{
    text-align: center !important;
}

.my-btn-primary{
    padding: 3px 10px 3px !important;
    font-size: 24px !important;
}

/* .btn:not(:disabled):not(.disabled){
    margin: 0px 0px 0px 0px !important;

} */

.slider-light,.slick-slider{
    height: 100%;
}

.slick-slider .slider-content{
    margin: 0 1rem 0rem 1rem !important;
}

.main-card {
    border-radius: 2px 30px !important;
	overflow: hidden;
}
@media screen and (max-width: 992px) {
	.card.mb-3{
		margin-bottom: 7rem !important;
	}
	#raise_query,#admission_leads,#file_upload_section,#timeline_table{
		margin-bottom: 5rem !important;
	}
}

.main-card:hover{
    border-left: 3px solid #3f6ad8;
    box-shadow: 0 0rem 0.5rem var(--bg-blue);
    transition: all 0.5s;
}
.error {
	color: #b33;
	order: 2 !important;
}

.card-header{
    background-color: #e0f3ff;
    border-radius: 2px 30px 0 0!important;
}
.card-header, .card-title {
	font-weight: normal;
}
.nav-link {
	font-weight: normal;
}
table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting {
	font-weight: normal !important;
}
.card .card-footer{
    
    border-radius:0 0 2px 30px !important;
}
.select2-container--open .select2-dropdown{
    border-radius: 10px !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.select2-container--default .select2-results>.select2-results__options
{
  border-radius: 10px;
  padding: 1.5rem 0;
  min-width: 11.875rem;
  background-color: var(--bg-white);
  left: -2rem;
  top: 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: visibility 0.1s ease;
}

.select2-results{
    border-radius: 10px !important;
}

.select2-container .select2-search--inline .select2-search__field{
    margin-top: 5px !important; 
}

.select2-container--default .select2-results>.select2-results__options::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -5px;
  left: 30%;
  width: 1.25rem;
  height: 1.25rem;
  transform: rotate(45deg);
  background-color: var(--text-blue-avtive);
}
.select2-results__option--selectable{
    /* background-color: var(--text-lightblue) !important; */
    color: var(--text-black) !important;
    text-transform: capitalize;
    font-weight: bold;
	font-size: 1.4em !important;
    border-radius: 0.25rem !important;
    transition: all .2s;
    margin: 2px 0.25rem;   
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 1.5 !important;
}
.select2-results__option--selectable:hover{
    background-color: var(--text-lightblue) !important;
    color: var(--text-blue-avtive) !important;
    font-weight: bold;
    border-radius: 0.25rem !important;
    border-left: 3px solid var(--text-blue-avtive);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{

    background:var(--text-lightblue) ;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    background:var(--text-blue-avtive) ;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
    text-transform: capitalize;
}

.btn-primary.btn-shadow:hover{
    background: transparent;
    border: 2px solid var(--bg-blue);
    color: var(--text-blue-avtive);
    font-weight: 800 !important;
}
.btn-danger.btn-shadow:hover{
    background: transparent;
    border: 2px solid #d92550;
    color: #d92550;
    font-weight: 800 !important;
}

.btn-success.btn-shadow:hover{
    background: transparent;
    border: 2px solid #3ac47d;
    color: #3ac47d;
    font-weight: 800 !important;
}
.active a{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.vertical-nav-menu li a:hover i.metismenu-icon {
    font-weight: 800 !important;
    color: var(--text-black);
}
.vertical-nav-menu li a:hover {
    letter-spacing: 1px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.app-theme-white .app-header {
    background-color: var(--bg-white);
    background-image: linear-gradient(
315deg
, var(--bg-white) 0%, var(--bg-gredi) 74%);
}

.header__pane{
    padding: 5% 8%;
    background-color: var(--text-lightblue) !important;
    border-radius: 100% 0 0 0px;
}
.header__pane:hover{
    border-left: 3px solid var(--text-blue-avtive);
}
.app-header__logo{
    padding: 0 0 0 1.5rem !important;
    /* border: 3px solid var(--text-lightblue); */
	overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.genio-class{
    border-radius:15px 0 15px 0 ;
    margin: 2rem 0rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#name,
#password,
#Email,
#Username,
#otp{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#name:hover,
#password:hover,
#Email:hover,
#Username:hover,
#otp:hover{
    border-bottom: 3px solid var(--bg-blue);
    transition: all .3s ;
}

.my-btn-primary{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    
}
.bg-premium-dark,.slick-slider .slide-img-bg{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* login form css */
.logingform-student {
    display: flex;
}
.recoverform-student {
    display: none;
}
.otpform-student {
    display: none;
}
.newpasswordform-student {
    display: none;
}

:root {
	--fg: #17181c;
	--shade1: #4a4a53;
	--shade2: #cccdd1;
	--shade3: #f3f4f8;
	--shade4: #ffffff;
	--dur1: 1s;
	--dur2: 6s;
}
#main {
	margin: auto;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    height: 100% !important;
}
.preloader {
	animation: largePopOut var(--dur1) linear;
	border-radius: 50%;
	box-shadow:
		0.15em 0.15em 0.15em var(--shade4) inset,
		-0.15em -0.15em 0.15em var(--shade1) inset,
		1em 1em 2em var(--shade1), 
		-1em -1em 2em var(--shade4);
	margin-bottom: 3em;
	position: relative;
	width: 12em;
	height: 12em;
}
.preloader__square {
	animation: smallPopOut1 var(--dur1) linear, popInOut var(--dur2) var(--dur1) linear infinite;
	border-radius: 0.5em;
	box-shadow:
		0.15em 0.15em 0.15em var(--shade4) inset,
		-0.15em -0.15em 0.15em var(--shade1) inset,
		0.25em 0.25em 0.5em var(--shade1),
		-0.25em -0.25em 0.5em var(--shade4);
	position: absolute;
	top: 2.5em;
	left: 2.5em;
	width: 3em;
	height: 3em;
}
.preloader__square:nth-child(n + 2):nth-child(-n + 3) {
	left: 6.5em;
}
.preloader__square:nth-child(n + 3) {
	top: 6.5em;
}
.preloader__square:nth-child(2) {
	animation: smallPopOut2 var(--dur1) linear, move2 var(--dur2) var(--dur1) linear infinite;
}
.preloader__square:nth-child(3) {
	animation: smallPopOut3 var(--dur1) linear, move3 var(--dur2) var(--dur1) linear infinite;
}
.preloader__square:nth-child(4) {
	animation: smallPopOut4 var(--dur1) linear, move4 var(--dur2) var(--dur1) linear infinite;
}
.status {
	animation: fadeIn var(--dur1) linear forwards;
	text-align: center;
    font-size: 36px;
    color: #fff;
}
.status__dot {
	animation: appear1 var(--dur1) var(--dur1) steps(1,start) infinite;
	display: inline-block;
}
.status__dot:nth-child(2) {
	animation: appear2 var(--dur1) var(--dur1) steps(1,start) infinite;
}
.status__dot:nth-child(3) {
	animation: appear3 var(--dur1) var(--dur1) steps(1,start) infinite;
}

.select2-container .select2-selection--single:focus-visible{
	outline: -webkit-focus-ring-color auto 0px !important;
}


/* Animations */
@keyframes largePopOut {
	from, 20% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	40% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			2em 2em 2em var(--shade1), 
			-2em -2em 4em var(--shade4);
	}
	60%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			1em 1em 2em var(--shade1), 
			-1em -1em 2em var(--shade4);
	}
}
@keyframes smallPopOut1 {
	from, 40% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	60% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
	}
	80%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
	}
}

@keyframes smallPopOut2 {
	from, 45% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	65% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
	}
	85%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
	}
}

@keyframes smallPopOut3 {
	from, 50% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	70% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
	}
	90%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
	}
}

@keyframes smallPopOut4 {
	from, 55% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1), 
			0 0 0 var(--shade4);
	}
	75% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
	}
	95%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
	}
}
@keyframes popInOut {
	from {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(0,0);
	}
	4% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(0,0);
	}
	8% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(0,0);
	}
	12%, 16% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(4em,0);
	}
	20% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(4em,0);
	}
	24%, 25% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(4em,0);
	}
	29% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(4em,0);
	}
	33% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(4em,0);
	}
	37%, 41% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(4em,4em);
	}
	45% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(4em,4em);
	}
	49%, 50% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(4em,4em);
	}
	54% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(4em,4em);
	}
	58% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(4em,4em);
	}
	62%, 66% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(0,4em);
	}
	70% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(0,4em);
	}
	74%, 75% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(0,4em);
	}
	79% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(0,4em);
	}
	83% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(0,4em);
	}
	87%, 91% {
		box-shadow:
			0 0 0 var(--shade4) inset,
			0 0 0 var(--shade1) inset,
			0 0 0 var(--shade1),
			0 0 0 var(--shade4);
		transform: translate(0,0);
	}
	95% {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.5em 0.5em 0.5em var(--shade1),
			-0.5em -0.5em 1em var(--shade4);
		transform: translate(0,0);
	}
	99%, to {
		box-shadow:
			0.15em 0.15em 0.15em var(--shade4) inset,
			-0.15em -0.15em 0.15em var(--shade1) inset,
			0.25em 0.25em 0.5em var(--shade1),
			-0.25em -0.25em 0.5em var(--shade4);
		transform: translate(0,0);
	}
}
@keyframes move2 {
	from, 8% {
		transform: translate(0,0);
		width: 3em;
		height: 3em;
	}
	12% {
		transform: translate(-4em,0);
		width: 7em;
		height: 3em;
	}
	16%, 83% {
		transform: translate(-4em,0);
		width: 3em;
		height: 3em;
	}
	87% {
		transform: translate(-4em,0);
		width: 3em;
		height: 7em;
	}
	91%, to {
		transform: translate(-4em,4em);
		width: 3em;
		height: 3em;
	}
}
@keyframes move3 {
	from, 33% {
		transform: translate(0,0);
		height: 3em;
	}
	37% {
		transform: translate(0,-4em);
		height: 7em;
	}
	41%, to {
		transform: translate(0,-4em);
		height: 3em;
	}
}
@keyframes move4 {
	from, 58% {
		transform: translate(0,0);
		width: 3em;
	}
	62% {
		transform: translate(0,0);
		width: 7em;
	}
	66%, to {
		transform: translate(4em,0);
		width: 3em;
	}
}
@keyframes fadeIn {
	from, 67% {
		opacity: 0;
	}
	83.3%, to {
		opacity: 1;
	}
}
@keyframes appear1 {
	from {
		visibility: hidden;
	}
	33%, to {
		visibility: visible;
	}
}
@keyframes appear2 {
	from, 33% {
		visibility: hidden;
	}
	67%, to {
		visibility: visible;
	}
}
@keyframes appear3 {
	from, 67% {
		visibility: hidden;
	}
	to {
		visibility: visible;
	}
}

.pe-7s-graph:before{
    content : "\e64e" !important ;
}

.pe-7s-note2:before{
    content: "\e69d" !important ;
}

.pe-7s-mail-open:before{
    content: "\e63b" !important ;
}

.pe-7s-folder:before{
    content: "\e653" !important ;
}

.pe-7s-clock:before {
	content: "\e66b" !important ;
}

::placeholder {
    /* color: var(--text-black) !important; */
	opacity: 0.6 !important; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    /* color: var(--text-black) !important; */
}

::-ms-input-placeholder { /* Microsoft Edge */
    /* color: var(--text-black) !important; */
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td{
    text-align: center !important;
}




/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--fg: #e3e4e8;
		--shade1: #23252a;
		--shade2: #3e424c;
		--shade3: #4a4e5a;
		--shade4: #686e7e;
	}
}


@media screen and (max-width: 1096px) {
    .slick-slider .slider-content{
        margin: 0 1rem 4rem 1rem !important;
    }
}
@media screen and (max-width: 990px) {
    .genio-class1{
        display: block !important;
    }
}
@media screen and (max-width: 576px) {
    .main-body-login-page{
        width: 80%;
        margin: 10% 10%;
    }
    .main-backgroung-image{
        background-size: 100vh;
    }
}
@media screen and (max-width: 540px) {
    .main-body-login-page{
        width: 80%;
        margin: 10% 10%;
    }
    .main-backgroung-image{
        background-size: 100vh;
    }
}
@media screen and (max-width: 320px) {
    .app-container{
        display: grid !important;
    }
    .main-body-login-page{
        width: 100%;
        height: 100vh;
        margin: 0% 0%;
    }
    .main-backgroung-image{
        background-size: 100vh;
    }
}