@media (max-width: 991.98px) {
	.main > .navbar,
	.main > .footer,
	.main > .content { width: 100% !important; }
}

.side-left { float: left; }
.side-right { float: right; }

/* ------------------------------------------------------------ *\
	Iphone
\* ------------------------------------------------------------ */

.iphone { position: relative; max-width: 100%; width: 347px; }

.iphone__image { position: relative; }
.iphone__image img { max-width: 100%; height: auto; }

.iphone__content { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; 
/*	padding: 16% 9% 5%; */
}
.iphone__content-header { font-size: 1rem; color: #696969; text-align: center;}
.iphone__content-header h3 { margin-bottom: 1rem; }
.iphone__content-header p { margin-bottom: 10px; }

.iphone__content-logo { position: relative; z-index: 1; overflow: hidden; width: 100px; height: 100px; border: 3px solid #fff; border-radius: 50%; margin: 0 auto -50px; background: #fff; }
.iphone__content-logo img { position: absolute; top: 50%; left: 50%; max-width: 100%; height: auto; transform: translate(-50%, -50%); }

.iphone-box { overflow: hidden; border-radius: 10px; background: #0040aa; }
.iphone-box:not(:last-child) { margin-bottom: 10px; }
.iphone-box:last-child { padding-bottom: 50px; }
.iphone-box img { max-width: 100%; height: auto; }

.iphone-box__lesson {}
.iphone-box__news {}
.iphone-box__progress {}
.iphone-box__actions {}

@media (max-width: 820px) {
	.side-left { float: none; }
	.side-right { float: none; }

	.iphone { margin-top: 30px; }
}

@media (max-width: 450px) {
	.iphone__content-header p,
	.iphone__content-header h3 { margin-bottom: 5px; }

	.iphone__content-logo { width: 70px; height: 70px; margin-bottom: -35px; }
}

@media (max-width: 350px) {
	.iphone__content-header p,
	.iphone__content-header h3 { margin-bottom: 0; }

	.iphone__content-header h3 { font-size: 1rem; }

	.iphone__content-logo { width: 50px; height: 50px; margin-bottom: -25px; }
}

/* Iphone Secondary Styling  */
.iphone--secondary .iphone__content{
	background-size: contain;
}

.iphone--secondary .iphone__content-header{
	display: flex;
	justify-content: space-between;
	padding: 20% 10% 4%;
	align-items: center;
	margin-bottom: 20px;
}

.iphone--secondary .iphone__content-logo{
	width: 40px;
	height: 40px;
	margin: unset;
}

.iphone--secondary .iphone__content-menu{
	display: flex;
	align-items: center;
}

.iphone--secondary .iphone__content_name{
	margin-left: 20px;
	color: #fff;
	text-align: left;
}

.iphone--secondary .menu {
	display: flex;
	flex-direction: column;
}

.iphone--secondary .menu span{
	background-color: #fff;
	width: 35px;
	height: 3px;
	display: block;
	border-radius: 3px;
}

.iphone--secondary .menu span + span{
	margin-top: 5px;
}

.iphone--secondary .iphone__content_name p {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
}


.iphone--secondary .iphone__content-scheduled{
	padding: 0 10% 0;
	border-radius: 5px;
	margin-bottom: 20px;
}

.iphone--secondary .iphone__content-status{
	padding: 0 10% 0;
	margin-bottom: 20px;
}

.iphone--secondary .iphone__content-advantage{
	padding: 0 10% 0;
	border-radius: 5px;
	margin-bottom: 20px;
}

.iphone--secondary .iphone__content-gaps{
	padding: 0 10% 0;
	border-radius: 5px;
	margin-bottom: 20px;
}

/* Iphone--Light */
.iphone--light .iphone__content-header{
	background-color: #805c81;
}

/* Scheduled */
.scheduled .scheduled__inner{
	color: #fff;
	margin-bottom: 10px;
	border-radius: 5px;
}

.scheduled .scheduled__head{
	padding: 15px 20px 8px;
	border-bottom:1px solid white;
}

.scheduled .scheduled__head p {
	margin-bottom: 10px;
}

.scheduled .scheduled__content{
	padding: 10px 20px 15px;
	position: relative;
}

.scheduled .scheduled__subtitle p{
	margin-bottom: 4px;
	line-height: 1;
	font-size: 14px;
}

.scheduled .scheduled__date{
	display: flex;
	flex-direction: row;
	font-size: 22px;
	margin-bottom: 15px;
	gap: 10px;
}

.scheduled .scheduled__date p {
	margin: 0;
}

.scheduled .scheduled__icon{
	position: absolute;
	right: 10px;
	top: 0;
	transform: translateY(-50%);
}

.scheduled .scheduled__options ul{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	color: #fff;
	padding: unset;
	font-size: 14px;
	list-style: none;
	margin: 0 -10px;
	align-items: center;
	margin-bottom: 10px;
}

.scheduled .scheduled__options p{
	margin-bottom: 5px;
}

.scheduled .scheduled__options ul li{
	padding: 3px 8px;
}

.scheduled .scheduled__options ul li.check {
	color:#000;
	background-color: #fff;
	border-radius: 4px;
	font-size: 14px; 
}

.status,
.gaps {
	color:white ;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.status .status__content{
	width: 100%;
}

.status .status__actions{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.status .status__action{
	padding: 16px 0;
	width: 50%;
	border-radius: 5px;
	text-align: center; 
}

.gaps{
	padding: 15px 10px;
	border-radius: 5px;
}

.status h4,
.gaps h4{
	font-weight: 600;
	line-height: 1;
	margin: 0;
	color: white;
	font-size: 12px; 
}

/* Advantages */
.advantages{
	border-radius: 5px;
}

.advantages .advantages__head{
	color: #fff;
	padding: 15px 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.advantages .advantages__head h4{
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 5px; 
}

.advantages .advantages__head p{
	font-size: 12px;
}

.advantages__content{
	background-color: #2753ab;
	padding: 15px 10px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.advantages__content ul{
	color: #fff;
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0; 
	margin: 0; 
}

.advantages__content ul li {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	gap: 5px;
}

.advantages__content ul li:nth-child(2){
	flex-direction: row-reverse;
}

.advantages__content ul li i{
	font-size: 18px;
}

/* ------------------------------------------------------------ *\
	Theory Test Pro Data
\* ------------------------------------------------------------ */

.theory-test-pro-data {
	max-width: 1000px;
}

.theory-test-pro-data ul {
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0 -7px -20px;
	list-style: none;
}

.theory-test-pro-data li {
	float: left;
	width: 25%;
	padding: 0 7px 20px;
}

.theory-test-pro-data .size-1of3 {
	width: 33.333333%;
}

.theory-test-pro-data .size-3of5 {
	width: 37.5%;
}

.theory-test-pro-data .group {
	position: relative;
	overflow: hidden;
	padding: 25px 20px;
	background: #FFF;
	font-size: 1rem;
	font-weight: 500;
	box-shadow: 0 0 0.875rem 0 rgb(53 64 82 / 5%);
	border:1px solid #dee2e6;
}

.theory-test-pro-data .group h5 {
	color: #999abb;
}

.theory-test-pro-data .group strong {
	font-size: 1.2rem;
	font-weight: 700;
}

.theory-test-pro-data .group .feather-lg {
	width: 30px;
	height: 30px;
}

.theory-test-pro-data .group__aside {
	float: left;
	width: 50px;
}

.theory-test-pro-data .group__content {
	float: right;
	width: calc(100% - 50px);
}

.theory-test-pro-data .group__row {
	margin-bottom: 10px;
}

.theory-test-pro-data .group__row span {
	float: right;
	color: #999abb;
}
.theory-test-pro-data .group__row--basic span {
	color: #c74443;
}

.theory-test-pro-data .group__row--good span {
	color: #395393;
}

.theory-test-pro-data .group__row--great span {
	color: #6caa57;
}

.theory-test-pro-data .group__progress {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 9px;
	border-radius: 9px;
	margin-top: 5px;
	background: #e9ecef;
}

.theory-test-pro-data .group__row:not(:last-child) .group__progress {
	margin-bottom: 20px;
}

.theory-test-pro-data .group__progress__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 9px;
	border-radius: 9px;
	background: #ebe9ec;
	transition: width .3s;
}


.theory-test-pro-data .group__progress__overlay--lightblue {
	background: #42bdff;
}

.theory-test-pro-data .group__progress__overlay--darkblue {
	background: #2a6aff;
}

.theory-test-pro-data .group__progress__overlay--basic {
	background: #c74443;
}

.theory-test-pro-data .group__progress__overlay--good {
	background: #395393;
}

.theory-test-pro-data .group__progress__overlay--great {
	background: #6caa57;
}

/* ------------------------------------------------------------ *\
	Account Table
\* ------------------------------------------------------------ */

.account-table{
	width: 900px;
	margin: 10px 0 30px 0;
	color: black;
	border-spacing: 20px;
}

.account-table tr:nth-child(odd) td, .table-prices tr:nth-child(odd){
	background: unset;
}

.account-table thead{
	font-size: 18px;
	font-weight: bold;
}

.account-table .table__content{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 50%; 
}

.account-table td h4{
	margin-right: 5px;
	font-size: 16px; 
}

.account-table td p{
	color: #495057;
	font-size: 13px; 
}

.account-table .btn{
	background-color: #d7d7d7;
	color: black;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 4px;
	line-height: 1;
	transition: .3s opacity  ease;
}

.account-table .btn:hover{
	opacity: .6;
}

.tables{
	display: flex;
	flex-direction: row;
}

.tables .table{
	width: 20%;
}

body:before {
	pointer-events: none;
	z-index: 999;
	position: fixed;
	opacity: 0;
	transition: opacity .3s ;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .8);
}

body:after {
	pointer-events: none;
	z-index: 1000;
	position: fixed;
	content: '';
	opacity: 0;
	transition:  opacity .3s;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 100px;
	background: url('../images/loading.svg') 0 0 no-repeat;
	background-size: cover;
}

body.is-loading:before ,
body.is-loading:after {
	pointer-events: initial;
	opacity: 1;
}

/* Instructors Listing */
.instructors-listing .instructors__items{
	display: flex;
	flex-direction: column;
	margin: -10px 0;
}

.instructors-listing .instructors__items .instructors__item{
	width: 100%;
	padding: 5px 0;
}

/* Instructor Billing */
.instructor-billing{
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 3fr 1fr;
	background-color: white;
	border: 1px transparent;
	border-radius: 5px;
    background: #f1f5f8;
    padding: 10px 18px;
}

.instructor-billing .instructor__name{
	font-size: 13px;
	font-weight: bold;
	color: #000c2f;
}

.instructor-billing .instructor__name .instructor__admin{
	font-size: 12px;
	color: gray;
	text-transform: uppercase;
}

.instructor-billing .instructor__packages{
	justify-self: center;
}

.instructor-billing .instructor__info{
	text-align: right;
}

/* Packages */

.packages{
	display: flex;
	flex-direction:row;
	list-style: none;
	margin: 0 -20px;
	padding:unset;
}

.packages .package{
	padding: 0 10px;
}

.packages .package a {
	min-width: 85px;
	font-size: 13px;
	background-color: #526a84 !important;
	border: 1px solid #526a84;
	border-radius: 5px;
	color: white;
	transition: background-color .3s ease, color .3s ease;
}

.packages .package a:hover,
.packages .package a.is-active{
	color: #526a84;
	background-color: white !important;
}

/* Instructor-Listing--Alt */
.instructors-listing--alt .instructor-billing .packages{
	margin: 0 -5px;
}

.instructors-listing--alt .instructor-billing .packages .package{
	padding: 0 5px;
}

.instructors-listing--alt .instructor-billing .packages .package a{
	font-size: 12px;
	font-weight: 500;
}

@media (max-width: 768px) {
	.instructors-listing--alt .instructor-billing{
		grid-template-columns: repeat(4, 1fr);
		row-gap: 10px;
	}

	.instructors-listing--alt .instructor-billing .instructor__packages .packages{
		flex-wrap: wrap;
	}

	.instructors-listing--alt .instructor-billing .instructor__packages .packages .package a{
		min-width: 70px;
	}

	.instructors-listing--alt .instructor-billing .instructor__name{
		grid-column: span 2;
	}

	.instructors-listing--alt .instructor-billing .instructor__packages{
		grid-row: 2;
		grid-column: 1/-1;
		justify-self: center;
	}

	.instructors-listing--alt .instructor-billing .instructor__info{
		grid-column: span 2;
	}
}

@media (max-width: 425px){
	.instructors-listing--alt .instructor-billing{
	}

	
	.instructors-listing--alt .instructor-billing .instructor__packages{
		width: 70%;
	}

	.instructors-listing--alt .instructor-billing .instructor__packages .packages{
		flex-direction: column;
		margin: 5px 0;
	}

	.instructors-listing--alt .instructor-billing .instructor__packages .packages .package{
		padding: 5px 0;
	}

	.instructors-listing--alt .instructor-billing .instructor__packages .packages .package a{
		width: 100%;
	}
}