/* Add here all your css styles (customizations) */
.pull-right-img{
	position		: absolute;
    right			: 15px;
    top				: 15px;
}
.modal-header{
	display			: block;
}
.dropdown-menu table #shopping-cart-items tr td span {
	font-size		: 12px;
}
.dropdown-menu.show {
    min-width		: 350px;
	max-width		: 366px;
	border			: none;
}
.course-dropdown .dropdown-menu.show {
    min-width		: 250px;
	max-width		: 250px;
	border			: 1px solid #e8e8e8;
}
.menu-icons-container{
	display			: inherit;
}
.g-brd-around{
	border			: initial;
}
.u-btn-outline-lightgray{
	font-size		: 12px;
}
.desktop-login-logout-button{
	display			: inline-table;
}
.desktop-login-logout-button .dropdown-menu{
	left			: unset;
	right			: 0px;
	padding-left	: 15px;
}
.desktop-login-logout-button .dropdown-toggle::after{
	display			: none;
}
.desktop-login-logout-button .btn{
	border-radius	: 0px;
}
.language-change-desktop a.dropdown-toggle img{
	height			: 18px;
    margin-top		: -4px;
}
.language-change-desktop .dropdown-menu img{
	height			: 18px;
    margin-top		: -4px;
}
.language-change-desktop .dropdown-menu.show{
	min-width		: 150px;
	border-radius	: 0px;
}
.language-change-desktop .dropdown-toggle::after{
	content			: "";
}
.no-border-radius{
	border-radius	: 0px;
}
tbody .collapse.show{
	border-right: 5px solid #72c02c;
	border-left: 5px solid #72c02c;
	border-bottom: 3px solid #72c02c;
}
.notification-page table tbody h3{
	font-size		: 14px;
	font-weight		: bold;
}
.notification-page table tbody tr.unread{
	border-left		: 2px solid #72c02c;
}
.list-unstyled a {
	opacity			: 1 !important;
}
input.checkbox-input {
	display			: none;
}
#lessons-list{
	width				: 100%;
}
#lessons-list > article {
	border-bottom		: 2px solid #e8e8e8;
}
#lessons-list > div {
	padding-left		: 0px;
	padding-right		: 0px;
}
#my-students-list{
	width				: 100%;
}
#my-students-list article {
	border-bottom		: 2px solid #e8e8e8;
}
#my-students-list .collapse > td {
	width				: 100%;
	padding				: 0px;
}
#my-students-list .collapse table{
	width				: 100%;
}
.student-img-container img{
	width				: 24px;
	height				: 24px;
	object-fit			: cover;
}
#students-list tbody tr[data-toggle='collapse']{
	cursor				: pointer;
}
#courses-searching-form input[type="checkbox"] {
	display			: none;
}
#courses-searching-form input[type="radio"] {
	display			: none;
}
#tickets-searching-form label.u-check{
	border-left		: 1px solid #bbbbbb38;
}
.tickets-list #search-results small.g-brd-blue-left{
	color		: blue;
}
.tickets-list #search-results small.g-brd-red-left{
	color		: red;
}
.tickets-list #search-results small.g-brd-green-left{
	color		: green;
}
.tickets-list #search-results small.g-brd-gray-left{
	color		: gray;
}
.fit-image{
	object-fit			: cover;
}
.course-flag{
	width: 18px;
    margin-top: -3px;
}
.img-thumbail {
	border				: 2px solid #868e9678;
}
.u-icon-v1{
	width				: 28px;
    height				: 28px;
}
.u-icon-v1 i.fa.fa-file-o{
	font-size			: 12px;
}
.u-icon-v1 span{
	min-width			: 16px;
    min-height			: 16px
}
#featured-teachers-list .description{
	margin-right		: 115px;
}
.table td{
	vertical-align: middle;
}
.table th{
	vertical-align: middle;
}
.quick-cart-table td.actions{
	width: 27px;
    vertical-align: middle;
}
.navbar-brand.d-flex .logo{
	max-height: 80px;
    position: absolute;
    top: -20px;
}
.navbar-toggler.navbar-toggler-right{
	top: -5px;
}
.sk-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.logged-in-dropdown-menu .navbar-nav{
	display: block
}
.img-fluid.w-100{
	height: 250px;
	width: 350px;
}
.img-fluid{
	object-fit: cover;
}
.js-go-to.u-go-to-v1{
	bottom					: 60px !important;
}
.u-ss.u-ss_initialized{
	-webkit-transition		: width 1s; /* For Safari 3.1 to 6.0 */
    transition				: width 1s;
}
.u-ss.u-ss_initialized.u-ss_opened .u-ss-toggler.g-color-primary{
	position				: absolute;
    right					: 0px;
    z-index					: 99;
    top						: 65px;
	-webkit-transition		: width 1s; /* For Safari 3.1 to 6.0 */
    transition				: width 1s;
}
.u-ss-toggler{
	top						: 75px;
}
.logged-in-dropdown-menu .dropdown-menu.show{
	min-width				: 260px;
    max-width				: 300px;
	border					: 1px solid rgba(187, 187, 187, 0.8313725490196079);
    border-radius			: 0px;
}
.shopping-cart-top-menu .dropdown-menu.show{
	min-width				: 260px;
    max-width				: 300px;
	border					: 1px solid rgba(187, 187, 187, 0.8313725490196079);
    border-radius			: 0px;
}
.shopping-cart-top-menu .dropdown-menu {
    left: unset;
    right: 0px;
    padding-left: 0px;
}
.shopping-cart-top-menu .js-scrollbar{
	overflow-x				: hidden;
	overflow-y				: -;
}
.logged-in-dropdown-menu .dropdown-menu.show .fa{
	width					: 20px;
    text-align				: center;
}
.u-ss.u-ss_initialized .g-bg-white-opacity-0_9 {
    background-color: #000000c9 !important;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }
/* ===================TOGGLE SWITCH===================== */
.custom-toggle-switch > input[type="checkbox"] {
	display					: none;   
}
.custom-toggle-switch > label {
	cursor					: pointer;
	height					: 0px;
	position				: relative; 
	width					: 40px;
	top						: 3px;
}
.custom-toggle-switch > label::before {
	background				: rgb(0, 0, 0);
	box-shadow				: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
	border-radius			: 8px;
	content					: '';
	height					: 10px;
	margin-top				: -8px;
	position				: absolute;
	opacity					: 0.3;
	transition				: all 0.4s ease-in-out;
	width					: 36px;
	left					: 0px;
}
.custom-toggle-switch > label::after {
	background				: rgb(255, 255, 255);
	border-radius			: 16px;
	box-shadow				: 0px 0px 5px rgba(0, 0, 0, 0.3);
	content					: '';
	height					: 18px;
	width					: 18px;
	left					: -4px;
	margin-top				: -8px;
	position				: absolute;
	top						: -4px;
	transition				: all 0.3s ease-in-out;
}
.custom-toggle-switch > input[type="checkbox"]:checked + label::before {
	background				: inherit;
	opacity					: 0.5;
}
.custom-toggle-switch > input[type="checkbox"]:checked + label::after {
	background				: inherit;
	left					: 20px;
}
/* ===================TOGGLE SWITCH===================== */
@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.width-64 {
	max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
    line-height: 32px;
    margin: 15px 0px 0px 15px;
}
.width-64 .logged-in-dropdown-menu .dropdown-menu.show .fa {
	padding-top			: 10px;
}
.no-padding {
	padding				: 0px;
}
.profile-dropdown{
	padding					: 0px;
}
.profile-dropdown span{
	padding-left			: 10px;
	padding-right			: 10px;
}
a[data-target="#modal-change-profile-picture"] {
	position				: absolute;
    z-index					: 9;
    right					: 15px;
    padding					: 5px 10px 5px 10px;
}
.rated .g-color-primary{
	color					: #ffd707 !important;
}

#edit-profile-form {
	
}
#add-schedule-form {
	
}
#add-schedule-form #hours-list > div{
	float				: left;
	padding-right		: 15px;
}
#add-schedule-form label{
	padding-top			: 5px;
}
#agenda-calendar .months-container .month-container {
	float				: left;
	width				: 25%;
	height				: 225px !important;
}
#agenda-calendar .calendar-header {
	border-bottom		: 2px solid #e8e8e8;
}
#agenda-calendar .month-title {
	border-bottom		: 1px solid #e8e8e8;
}
#agenda-calendar .glyphicon {
	border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
#agenda-calendar .glyphicon-chevron-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
#agenda-calendar .glyphicon-chevron-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
#result-interval-hours h3{
	display				: inline;
}
.black-color{
	color			: #000 !important;
}
#add-lesson-form-container{
	display			: none;
}
.hidden{
	display			: none;
}
select.form-control:not([size]):not([multiple]){
	height			: initial;
}
.title .toggle-add-lesson-form{
	float				: right;
}
/*************************************************************/
/********************* COURSE SESSION ************************/
/*************************************************************/
body.coursesession {
    width				: 100%;
    background-color	: #f0efef;
    margin				: 0px;
    padding				: 0px;
}
.coursesession #participants-list {
	width				: 100%;
}
.coursesession #participants-list video{
	width				: 49%;
    height				: 300px;
}
.coursesession .header-container {
	margin-bottom		: 2px;
    width				: 100%;
	max-height			: 50px;
	height				: 50px;
	background-color	: #72c02c;
}
.coursesession .media-container {
    width				: 100%;
	height				: 100vh;
	background-color	: #FFF;
}
.coursesession .media-container .video-container{
    width				: 100%;
}
.coursesession .video-container > img{
    width				: 100% !important;
	height				: 260px;
	object-fit			: cover;
}
.coursesession .logo {
    width				: 10%;
	text-align			: center;
}
.coursesession .course-name {
    width				: 30%;
}
.coursesession .course-media-status {
    width				: 20%;
}
.coursesession .course-session-tools {
    width				: 20%;
}
.coursesession .user-profile {
    width				: 40%;
}
.coursesession .user-profile .btn-group {
	padding-right		: 15px;
	float				: right;
}
.coursesession .user-profile .btn-group .btn{
	background-color	: rgba(255, 255, 255, 0);
}
.coursesession .course-name {
    line-height			: 50px;
}
.coursesession .header-container > div{
    display				: block;
	float				: left;
	line-height			: 50px;
}
.coursesession .header-container div.logo{
	line-height			: initial;
}
.coursesession .header-container div.logo img{
	max-height			: 46px;
}
.coursesession .header-container img.rec-status, .coursesession .header-container img.camera-status, .coursesession .header-container img.mic-status{
	max-height			: 32px;
    float				: left;
    text-align			: center;
    padding-top			: 9px;
}
.coursesession .body-container{
	width				: 100%;
    height				: calc(100% - 90px);
    color				: red;
    display				: block;
}
.coursesession .body-container .media-stream{
	width: 25%;
    background-color: #FFF;
    float: left;
    height: calc(100vh - 102px);
    overflow-y: hidden;
    overflow-x: hidden;
}
.coursesession .body-container .courses-apps{
	width				: 75%;
	background-color	: #000;
	float				: right;
    overflow-y			: scroll;
    height				: calc(100vh - 98px);
}
.user-profile .user-fullname{
	line-height			: 50px;
    margin				: 0px;
	font-size			: 16px;
}
.coutndown-wrapper-time{
	font-size			: 8px !important;
}
.header-container img.user-profile-img {
	max-height			: 30px;
    float				: left;
    line-height			: 24px;
    border				: 1px solid #f1f0f0;
    border-radius		: 2px;
    margin-right		: 5px;
}
.footer-container{
	position			: fixed;
	width				: 100%;
	height				: 48px;
	background-color	: #666;
	bottom				: 0px
}
.footer-container .container{
	width				: 90%;
	margin				: 0 auto;
}
.footer-container .container .app-info p{
	line-height			: 48px;
    padding				: 0px;
    margin				: 0px;
}
.footer-container .container .app-info{
	width				: 50%;
	float				: left;
}
.footer-container .container .app-links{
	width				: 50%;
	float				: right;
}
.footer-container .container .app-links ul{
	line-height			: 48px;
    padding				: 0px;
    margin				: 0px;
	text-align			: center;
	list-style-type		: none;
	text-align			: right;
	float				: right;
}
.footer-container .container .app-links ul li {
	float				: left;
	padding-right		: 10px;
	padding-left		: 10px;
}
.footer-container .container .app-links ul li a{
	color				: #FFF;
}
.coursesession .chat-container .chat-messages{
	max-height			: calc(100vh - 215px);
	height				: calc(100vh - 215px);
    padding				: 0px 5px;
    overflow-y			: scroll;
    overflow-x			: hidden;
}
.coursesession .chat-container .chat-header {
	height				: 36px;
    color				: #000;
    background-color	: red;
    text-align			: center;
	position			: relative;
}
.coursesession .chat-container .chat-header h3{
	padding				: 0px;
    margin				: 0px;
    font-size			: 16px;
    line-height			: 38px;
    position			: absolute;
    left				: 0px;
    right				: 0px;
}
.coursesession .chat-container .chat-messages > span {
	text-align			: center;
	color				: #000;
	display				: block;
	border-radius		: 5px;
}
.coursesession .chat-container .chat-messages .chat-item {
	background-color	: #f1f0f0;
	color				: #4b4f56;
	border-radius		: 5px;
}
.coursesession .chat-container .chat-messages .chat-item.my-comment {
    background-color	: #4080ff;
	color				: #fff;
}
.coursesession .chat-container .chat-messages .chat-item {
	width				: 100%;
	clear				: both;
	border-bottom		: 1px solid rgb(187, 187, 187);
    min-height			: 40px;
	margin-bottom		: 5px;
	padding				: 10px;
	line-height: 16px;
}
.coursesession .chat-container .chat-messages .chat-item img {
	width				: 32px;
	height				: 32px;
	object-fit			: cover;
	border-radius		: 50%;
	border				: 1px solid #666;
	padding				: 2px;
	float				: left;
	margin-right		: 5px;
	margin-top			: -7px;
}
.coursesession .chat-container .chat-messages .chat-item span {
	width				: 100%;
	color				: #000;
	font-size			: 14px;
}
.coursesession .chat-container .chat-messages .chat-item.my-comment img {
	width				: 32px;
	height				: 32px;
	object-fit			: cover;
	border-radius		: 50%;
	border				: 1px solid #666;
	padding				: 2px;
	float				: right;
	margin-left			: 5px;
}
.coursesession .chat-container .chat-messages .chat-item.my-comment span{
	width				: 100%;
	color				: #000;
}
.coursesession .chat-container .chat-form-container {
	widows				: 100%;
	margin-bottom		: 5px;
}
.coursesession .chat-container .chat-form-container textarea {
	line-height: 15px;
    font-size: 12px;
	height: 50px;
}
.coursesession .app-tab-swicher{
	width				: 100%;
	height				: 32px;
	padding				: 0px;
	margin				: 0px;
	background-color	: rgba(211, 209, 210, 0.53);
}
.coursesession .app-tab-swicher a img{
	height				: 18px;
}
.coursesession .app-tab-swicher button img{
	height				: 18px;
}
.coursesession .chat-container .chat-form-container textarea{
	width				: 100%;
	max-height			: 40px;
}
.coursesession .pull-right.custom-toggle-switch{
    position			: absolute;
    right				: 5px;
    top					: 10px;
}
.coursesession #whiteboard{
	height				: calc(100vh - 405px);
}
#app-list > div {
	display				: none;
}
#app-list > div.active {
	display				: block;
}
/*************************************************************/
/********************* END COURSE SESSION ********************/
/*************************************************************/
/* Small Devices, Tablets LG */
@media only screen and (max-width : 1200px) {
	.hidden-lg{
		display			: none;
	}
	.months-container .month-container{
		width			: 33% !important;
	}
}
/* Small Devices, Tablets MD */
@media screen and (max-width:992px) {
	.hidden-md{
		display			: none;
	}
	.navbar-toggler.navbar-toggler-right {
		top: -16px;
	}
	.navbar-brand.d-flex .logo {
		max-height: 48px;
		position: absolute;
		top: -15px;
		left: 5px;
	}
	.menu-icons-container{
		right: 70px;
		position: absolute;
		top: -10px;
		display: inherit;
	}
	.navbar-collapse .navbar-nav{
		margin-top: 15px;
		border-top: 2px solid #e8e8e8;
	}
	.navbar-collapse .navbar-nav li{
		padding-top: 15px;
		border-top: 1px solid rgba(187, 187, 187, 0.21);
		padding-bottom: 15px;
		width: 100%;
		text-align: center;
	}
	.u-header{
		height: 50px;
	}
	.desktop-login-logout-button .dropdown-menu{
		top: 42px;
		right: -80px;
	}
	.months-container .month-container{
		width			: 50% !important;
	}
}
/* Small Devices, Tablets SM */
@media only screen and (max-width : 768px) {
	.hidden-sm{
		display			: none;
	}
}
@media screen and (min-width:600px) {
	.rounded-circle.g-width-40.g-height-40{
		cursor: pointer;
		-webkit-transition: all .3s ease; /* Safari and Chrome */
		-moz-transition: all .3s ease; /* Firefox */
		-o-transition: all .3s ease; /* IE 9 */
		-ms-transition: all .3s ease; /* Opera */
		transition: all .3s ease;
	}
	.rounded-circle.g-width-40.g-height-40:hover{
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0) scale(10.20); /* Safari and Chrome */
		-moz-transform: scale(10.20); /* Firefox */
		-ms-transform: scale(10.20); /* IE 9 */
		z-index:9999;
		transform: translate(0) scale(2,3);
		object-fit: cover;
		border: 2px solid #31313154;
		border-radius: 0px !important;
	}
}
@media screen and (max-width:600px) {
	.js-sticky-block{
		height			: auto !important;
	}
	.desktop-login-logout-button .dropdown-menu {
		left			: -20.coursesession .chat-container .chat-messages0px !important;
		padding-left	: 15px;
	}
	.language-change-desktop .btn.btn-default.dropdown-toggle{
		padding-left	: 0px;
	}
	.shopping-cart-top-menu .dropdown-menu.show{
		left			: -200px !important;
		padding-left	: 0px;
	}
}
/* Small Devices, Tablets XS */
@media screen and (max-width:480px) {
	.months-container .month-container{
		width			: 100% !important;
	}
	.hidden-xs{
		display			: none;
	}
	.navbar-toggler.navbar-toggler-right {
		top				: -20px;
	}
	.navbar-brand.d-flex .logo {
		max-height		: 48px;
		position		: absolute;
		top				: -15px;
		left			: 5px;
	}
	.d-flex .logo {
		max-height		: 48px;
		position		: absolute;
		top				: -15px;
		left			: 5px;
	}
}
.datetimepicker table {
    height: 215px;
    width: 315px;
}
.datetimepicker table thead tr {
    height: 40px;
}
.datetimepicker table thead tr th.next {
    background-color: #32c787;
}
.datetimepicker table thead tr th.prev {
    background-color: #32c787;
}