
@media only screen and (min-width: 1200px) {
	.container {width: 90% !important; }
	#inbox_container #inbox_msgbar{bottom: 0px !important}
	#holidayoffer { left:23%; }
}

@media screen and ( max-height: 1200px ){
	#app { min-height: 91vh; }
	#inbox_container #inbox_msgbar{bottom: 2px !important}
	.chat_heading {top: -4px !important;}
	.chat_heading i{ width: 30px}
	.appointment_data .btn-alpha{ height: auto !important; padding: 10px 30px !important;}
	.topbtn .btn-beta{height: 36px !important; padding: 6px 20px !important;}
	.download_app img { height: 35px !important;}
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
	.hidden-sm.bars-mob, .clickload.hidden-sm{ display: none !important; }
}

@media only screen and (max-width: 1100px) {
	.inbox_msgfromclient, .inbox_msgfromteacher{ padding: 15px !important; font-size: 13px !important;}
	.inbox_time { position: relative !important;}
	#app .cr_main{height: 85% !important;}
	#inbox_container #inbox_msgbar input{height: 45px !important;}
	#inbox_container #inbox_msgbar button{ padding: 14px 0 !important}
	#inbox_main{margin-bottom: 0% !important; height: 92% !important;}
	.inbox_msgfromteacher{ margin-right: 10% !important}
	.inbox_msgfromclient{ margin-left: 10% !important}
	#inbox_main{ max-height: 1000px !important; margin-bottom: 0% !important; height: 87% !important; padding-bottom: 10px;} #inbox_container #inbox_msgbar {bottom: 20px !important;}
	.appointment_data .btn-alpha{ padding: 10px 5px !important }
	/*.side_bar .nav.navbar-nav{ display: block !important; margin-top: 80px !important }*/
	.side_bar .nav.navbar-nav li{ float: none; }
	.appointment_data .btn-alpha{ height: auto !important; padding: 10px 18px !important;}
	.chat_heading {top: -4px !important;}
	.header .download_app{ display: none !important; }
	.footer_area, .footer_area .download_app{ display: block !important; text-align: center; }
	.footer_area .download_app{ margin: 20px auto }
	.footer_area .download_app img{ height: auto !important; }
	/*.show_large{ display: none; }
	.hide_large{ display: block !important; }*/
	.topbtn .btn-beta { padding: 6px 13px !important;}
	.topbtn .btn-beta i{ font-size: 20px }
	.header { padding: 3px 0px; display: flex; align-items: center;}
}

@media only screen and (min-width: 1025px) {
	.admin_header .partw2 {width: 18% !important;}
	.admin_header .partw_main{ width: 80% !important; margin-left: 20% !important }
	.admin_header .stw2 {width: 15% !important;}
	.admin_header .header .mt1_new{ margin-left: 23% }
	#balancemins { font-size: 15px !important;}
}

@media only screen and (min-width: 990px) and (max-width: 1024px) {
	.side_bar .nav.navbar-nav{ display: block;}
	.side_bar .navbar-nav > li{ width: 100% !important; float: none;}
	.main_flex { display: flex;	flex-direction: row; }
	}


@media only screen and (max-width: 991px) {
	#holidayoffer { left:16%; }
	.side_bar .navbar-header, .side_bar ul{ width: auto !important; }
	.navbar-toggle {margin-top: 18px !important; }
	.navbar-toggle .icon-bar {background-color: #fff; }
	.side_bar .nav.navbar-nav{ margin: 0 0 0 65px !important; }
	.side_bar .navbar{margin-bottom: 0; }
	.side_bar .navbar-brand {display: inline-block; float: left; height: auto; width: 75px; }
	.side_bar, .right_container{width: 100%; }
	.side_bar .navbar-nav > li{ border: none; width: auto !important; float: left !important }
	.main_flex{flex-direction: column; justify-content: space-between; }
	.side_bar li a img{max-width: 20px !important; }
	.side_bar li{min-height: 40px; }
	#conversation th{ min-width: 100px !important }
	#inbox_container #inbox_msgbar {bottom: 25px !important;}
	.appointment_data .btn-alpha{ height: auto !important; margin: 10px auto !important }
	.hidden-sm.bars-mob, .clickload.hidden-sm{ display: block !important; }
	.inbox_profile_photo{ width: 40px !important; height: 40px !important}
	.side_bar ul a{padding: 16px 20px;}
	.admin_header .partw_main{ width: 74% !important; margin-left: 24% !important }
	.nav.navbar-nav {display: flex; justify-content: flex-end; }
	#lessonchat_chatbox{ right: 29% !important }
	.logo_img_header { margin: 19px 14px;}
}

@media screen and ( max-width: 850px ){
	#app { min-height: 91vh}
	.cr_loading{ padding-left: 10px !important; padding-right: 10px !important }
	.appointment_data .btn-alpha { padding: 10px 8px !important; text-align: center;}
	#lessonchat_chatbox { right: 35% !important;}
	#holidayoffer { left:20%; }
}

@media screen and ( max-width: 800px ){
	.appointment_data .btn-alpha { padding: 10px 0 !important; height: auto !important;}
	.appointment_data .col-sm-2 .btn-alpha{ padding: 10px 20px !important;}
	.chat_heading i{ font-size: 18px !important; top: 0 !important; left: auto !important;right: -5px !important;position: absolute !important; }
	.chat_heading {top: 0px !important; left: -5px}
	#holidayoffer {width:98%;left:1%;}
	#holidayoffer_santa { display:block;width:100%; }
	#holidayoffer_santa img { max-width:none;max-height:55px; }
	#holidayoffer_text { margin:1%;display:block;width:98%;}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.side_bar {position: relative; }
	.side_bar ul {display: flex; flex-direction: row; }
	.sidebar-header h4 a{ float: none !important; margin-bottom: 5px }
	.canvas-holder h3{min-height: 55px; }
	.db-box-sml{width: 100%; padding: 20px; }
	.left-part{width: 40%; }
	.right-part{width: 60%; }
	.right-part ul li{width: 19%; }
	.right-part img {width: 50px; }
	.gutter-xl {padding: 0 20px; }
	.modal-body h4 {font-size: 15px; }
	.act-title {font-size: 11px; }
	.admin_header .nav.navbar-nav {display: block; justify-content: end; position: relative; }
	.admin_header .navbar-nav > li{ float: none }
	.admin_header .nav.navbar-nav a{ padding: 12px 0 !important;}
	.admin_header .header .mt1_new{ margin-left: 30% }
	.admin_header .side_bar{ position: fixed !important }
	.admin_header .right_container { margin-left: 9% !important;}
	.admin_header .header .nav.navbar-nav {position: relative; }
	.drop_down.dropdown {float: right; position: absolute; right: 0; top: -25px; }
	 #datatable_filter label {margin: 5px; }
	.table-responsive {border: 1px solid #ddd; margin-bottom: 15px; overflow-x: scroll; overflow-y: hidden; width: 100%; }
	.left-part ul li {font-size: 13px; }
	.p-title {font-size: 35px; }
	.panel-heading h3 {font-size: 36px; }
	.words {margin: 5px; }
	#homework_hint_button input{width: 34% !important; }
	.right_container {margin-left: 0; }
	.right-part {width: 100%; padding: 0; }
	.header h3 {font-size: 16px; }
	.header .navbar-nav li {margin: -5px 0px; } body {font-size: 14px; }
	.db-box {padding: 10px; }
	.db-box-sml {padding: 15px !important; }
	.left-part ul li {font-size: 12px; margin: 5px 0; }
	.right-part ul li {margin: 10px; }
	.words {margin: 5px; }
	.hidden-sm.bars-mob, .clickload.hidden-sm{ display: none !important ; }
	.header .col-md-6 .download_app { top: 1px !important }
	.header .col-md-6 .topbtn { top: 7px !important }
	.header .col-md-6 h3{ top: 3px !important }
	.header h3{ max-width: 194px }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	#inbox_container #inbox_msgbar {bottom: 10px !important;}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
}

@media only screen and (max-width: 767px) {
	.logo {justify-content: flex-start; max-width: none; }
	.container-fluid {width: 100% }
	.side_bar ul a {align-items: center; background: transparent none repeat scroll 0 0; color: #fff; display: flex; flex-direction: row; justify-content: start !important; width: 100%; }
	.side_bar ul span {margin-left: 20px; }
	.db-box-sml {padding: 15px !important; }
	.left-part ul li {font-size: 12px; margin: 5px 0; }
	.right-part ul li {margin: 10px; }
	.words {margin: 5px; }
	#homework_hint_button input{width: 80% !important; }
	.octb_form {padding: 30px 10px 10px; width: 100%; margin: 50px 0; }
	.outer-wall {padding: 20px; }
	.side_bar {position: relative; }
	.right_container {margin-left: 0; }
	.right-part {width: 100%; padding: 0; }
	.right-part img {width: 40px; }
	.right-part ul li {width: 60px; }
	.act-title {font-size: 10px; }
	.db-box {padding: 10px; margin-bottom: 20px; }
	.overview_English .chosen-container  {margin-bottom: 20px; }
	/*.header h3 {font-size: 18px; }
	.header .topbtn { top: 6px !important;  margin-left: 5px !important }*/
	.header h3 {font-size: 18px; float: left !important; }
	.header .topbtn { top: auto;  margin-left: 0px !important; float: right !important; }
	#datatable_filter input {background-size: 24px; }
	.dropdown-menu {background: #EEE !important; }
	.dropdown-menu::before {border: none; }
	.dropdown-menu::after {border: none; }
	.mobile-icon .bars-mob {font-size: 24px; position: absolute; right: 31px; top: -85px; display: none !important; }
	.m-menu {color: #fff; font-weight: 600; text-transform: uppercase; }
	.m-text {font-weight: 600; color: #000; }
	.ph-icon {display: none; }
	.ph-text {margin-left: 0; }
	.gutter-xl {padding: 0 10px; }
	#progress_bar .mt5 {margin-top: 0; }
	.big-form-inner{width: 100%; }
	.canvas-holder{margin-top: 20px !important; }
	.db-box-sml{display: block; }
	.db-box-sml .left-part {width: 100%; display: block; padding: 20px; }
	.inner_tabs li{margin-bottom: 15px; }
	.inner_tabs li:last-child{margin-bottom: 0px; }
	.form-option li input, .time-box{margin:0 0 20px 0; width: 100%; }
	.form-option li{display: block; margin: 0; }
	.header .drop_down{margin-top: 13px; }
	.comn_pad, .header{padding-left: 0; padding-right: 0; }
	.page-heading.comn_pad{ padding: 0 !important; margin: 0 !important }
	.ph-text h4 {margin-top: 0px;margin-bottom: 0px;}
	#datatable_filter input{ margin: 5px 0 0 !important }
	.dataTables_filter{ margin-bottom: 5px !important }
	.words {margin: 5px; }
	#homework_hint_button input{width: 70%; }
	.gutter-xl {padding: 0 20px; }
	#conversation th{ min-width: 60px !important }
	.admin_header .side_bar{ width: 100% !important; z-index: 0 !important }
	.admin_header .right_container{ margin-left:0 !important; width: 100% !important }
	.admin_header .client-list { margin-top: 116px;}
	#inbox_container #inbox_msgbar{bottom:0px !important}
	#inbox_main{  margin-bottom: 0 !important; padding-bottom:40px !important }
	#inbox_container{height: 86% !important;	}
	.chat_m-hide-show{ display: inline-block !important; margin-right: 5px; cursor: pointer; }
	.chat_m-hide-show i{  color: #448CCB !important; padding: 5px; font-size: 18px;vertical-align: -3px; }
	.generic_title{ text-align: left !important; }
	#app #cr_sidebar2{ left: -250px !important; width: 250px !important; height: 100% !important; min-height: 250px !important; top: 0 !important }
	#app .cr_main{height:92% !important; left: 0px !important; width: 100% !important; top: 0 !important}
	#app #cr_sidebar2.newone{ left: 0 !important; top: 0 !important }
	#app .cr_main.newone{ left: 250px !important; top: 0 !important }
	/*#app{ position: relative !important; height: 100% !important; width: 100%; overflow: scroll;}*/
	footer.burger{ padding: 20px 0 !important }
	.generic_title{ margin: 10px !important; min-height: 30px; line-height: 30px }
	.chat_heading {top: -4px !important;}
	.row.appointment_area{ margin: 0 !important }
	.download_app {top: 1px !important;}
	.page-heading{ margin: 10px 0 !important }
	.appointment_area .col-md-12.mt2{ margin: 10px 0 !important }
	.download_app img{height: 38px !important;}
	.download_app a{ padding: 0px 3px 5px 8px !important }
	.nav.navbar-nav{ position: relative !important; width: 100% }
	.header .mobile-icon{position: absolute !important; top: -64px;height: 52px; right: 0px; width: 100% !important; z-index: 1; margin-top: 0 !important; border-bottom: 1px solid #DDDDDD; }
	.mobile-icon .nav.navbar-nav.monly{width: 100% !important; height: 100%; margin: 0; text-align: right; border-radius: 0; padding-right: 45px;}
	.mobile-icon .navbar{ min-height: 0 !important; margin-bottom: 0 !important }
	.mobile-icon .nav.navbar-nav.monly li:not(.dropdown_minutes){ text-align: right; }
	.mobile-icon .nav.navbar-nav.monly li>a{ padding: 0; line-height: 30px !important; text-align: center;/* min-width: 50px */}
	.mobile-icon .nav.navbar-nav.monly li>.dropdown-menu a{ width: auto !important }
	.side_bar .navbar-nav > li{ width: 100% !important }
	.mobile-icon .nav.navbar-nav.monly li i{ color: #438CCB; font-size: 28px }
	#notification123 i{ font-size: 28px; color: #438CCB; }
	.notification_msg1{ position: fixed !important; top: 10px; right: 70px; display:inline-block !important; }
	.img-wallet>a>img, .mobile-icon li>a>.logout123 { display: none !important; }
	.mobile-icon li>.dropdown-toggle{display: flex; justify-content: center; align-items: center;}
	.mobile-icon li>.dropdown-toggle > span {flex-shrink: 0; color: black}
	.mobile-icon li>.dropdown-toggle > span.unavailable-minutes {color: #F9834D}
	.mobile-icon li>.dropdown-toggle > .trans_label {display: none}
	.mobile-icon i{ display: inline-block !important;  }
	#notification123 i{ position: relative; }
	.mobile-icon .navbar-toggle {margin-top: 13px !important; margin: 0 !important; position: absolute; top: -52px; right: 0;}
    #burger {right: 10px;}
	.mobile-icon .navbar-toggle i{ color: #305896; font-size: 28px }
	.mobile-icon .navbar-nav .open .dropdown-menu{ position: absolute !important; padding:0; background:#fff !important; z-index: 11; left: -130px !important; min-width: 210px !important; border: 1px solid #ddd;}
	.mobile-icon  .navbar-nav .open.img-wallet .dropdown-menu{min-width: 250px !important;}
	.mobile-icon .navbar-nav .notification_msg .dropdown-menu{ min-width: 275px !important; left: -150px !important; }
	.mobile-icon .nav.navbar-nav.monly .dropdown-menu li>a{ padding: 10px 20px !important; text-align: left !important; border-bottom: 1px solid #ddd; display: block;   word-wrap: break-word;word-break: break-word; white-space: normal !important}
	.dropdown-menu li{ width: 100% !important; text-align: left !important; }
	.img-wallet img {width: 27px !important;}
	.navbar-toggle{margin-right: 0px !important; }
	.language-1{width: 30px}
	.myaccount{width: 30px}
	.notification_msg{width: 30px}
	.notification_msg > a{position: relative; top: 2px;}
	.logout123{display: none !important;}
	.language-1>a>i{ top: 4px; position: relative; }
	.myaccount>a>i{ position: relative; }
	.img-wallet>a>i{ top: 0px; position: relative; }
	.side_bar .fa-navicon{ display: inline-block !important; font-size: 25px !important; padding-right: 10px !important; }
	.side_bar button .m-menu, .mobile-hide{ display: none !important; }
	.mobile-show{ display: block !important; position: relative; }
	.mobile-icon .navbar-brand{ display: inline-block !important; position: absolute; left: 0; top: -60px; }
	.mobile-icon .navbar-brand img{ max-width: 45px !important }
	.mobile-icon .mobile-show ul{ display: inline-block; }
	.mobile-icon .mobile-show li{ display: inline-block; }
	.mobile-icon .mobile-show li:last-child{ border: none !important }
	.mobile-icon .mobile-show li a{ display: inline-block; width: 100%; margin: 0; padding: 10px;  }
    .mobile-language-list.lang-list li {
        display: inline;
        width: 100%;
        margin: 0;
        padding: 10px;
        cursor: pointer;
        font-size: 16px;
        color: #aec2d2;
    }
    .mobile-language-list.lang-list li.active {
        color: #fff;
    }
	.mobile-icon .mobile-show li.active a{
        background: #7BD483;
    }
	.mobile-icon .mobile-show li span{ display: inline-block !important; }
	.inbox_msgfromclient{ margin-right: 15% !important; margin-left: 10% !important; max-width: 75% !important }
	.inbox_msgfromteacher{margin-left: 15% !important; margin-right: 10% !important;  max-width: 75% !important }
	.app_data table span, .app_data table del{ width: auto !important; display: block !important; }
	.custom_field [type="radio"]:checked + label::after, .custom_field [type="radio"]:not(:checked) + label::after{ font-size: 16px !important }
	.custom_field div {width: 18% !important; min-width: 80px !important; height:80px !important; margin: 10px 1% !important;}
	.custom_field div {line-height: 80px !important;}
	#notification123{ background: none }
	.img-wallet a #refreshusd{ display: flex; align-items: center; right: 17px !important; top: 13px; font-size:1em !important;}
	.appointment_data .app_data1 .btn-beta{ height: auto; line-height: 22px; padding: 5px 6px; margin-bottom: 0 !important; margin-top: 5px; }
	#lessonchat_chatbox{ right:15px !important }
	.appointment_data .btn-alpha{ line-height: auto !important }
	.chat_heading {top: 0px !important; width: 190px; margin: 0 auto;}
	.chat_heading i {right: 0 !important; left: auto !important; position: relative; width: 20px; top: -1px !important; font-size: 22px !important; }
	.shift-btm{ margin-top: 54px !important; margin-bottom: 6px;}
	.navbar-toggle{ border-radius: 0 !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -o-border-radius: 0 !important;  }
	.cnt_details li{ width: 48%; margin: 0 1%; float: left; padding: 0 }
	.cnt_details li:first-child{ width: 98% !important }
	#editpass .form-group{ margin-bottom: 30px !important }
	.appointment_popup_close a { top: 0px !important; right: 0px !important;}
	.appointment_popup_close a i{ font-size: 20px }

	.appointment_data .mobile-formatting .btn.btn-alpha, .appointment_data .mobile-formatting .btn.btn-beta{ padding: 10px 0 !important; width: 100% !important; text-align: center; max-width: 150px; font-size: 13px; height: auto !important; font-weight: 600; line-height: 100%; margin: 0 !important }
	.appointment_data .mobile-formatting .app_data1{ font-weight: bold; font-size: 18px; margin-top: -2px; }
	.appointment_data .mobile-formatting .app_data1 div{ font-size: 13px; font-weight: 400 }
	#app_data_123, #app_data_123 td{ height: 200px !important; overflow-y: auto !important; }
	#app_data_123, #app_data_123 td{ padding: 0 }
	#app_data_123 td{ display: none; width: 100%; text-align: left; border: none !important;}
	#app_data_123 td span{padding:8px; border-bottom: 1px solid #ddd !important; }
	#app_data_123 td span:last-child{ border-bottom: 0 !important }
	#app_data_123 td#earlyeorning{ display: block; }
	#app_data_123.app_data table{ border-right: none !important }
	.mobile-formatting .table-responsive{ border: none !important; width: 94% !important; margin: 0 auto !important; height: 200px !important; overflow-y: auto !important;  }
	.language_filed{ margin-top: 10px }
	.logo_img_header { position: absolute;max-width: 40px;top: -41px;left: 10px;margin:0;}
}

@media only screen and (max-width: 640px) {
	input#search, .select select{height: 30px !important; padding: 4px 10px !important; background:#fff !important;}
	.appointment_area .select>div{ width: 49% !important; display: block !important; float: left !important; }
	.appointment_area .select>div span{ height: 25px; display: inline-block;}
	.appointment_area .select>div:first-child{ margin-right: 1% !important; margin-left: 0 !important}
	.appointment_area .select>div:last-child{ margin-left: 1% !important; }
	.appointment_area .select>div input, .appointment_area .select>div select{ width: 100% !important; margin-top: 0 !important }
}

@media only screen and (max-width: 500px) {
	#inbox_container {height: 92% !important;}
	.language_detail li{ padding: 5px !important }
	.language_detail li {background: rgba(0,0,0,.02) !important;}
	.custom_field div {width: 18% !important; min-width: 18% !important; margin: 10px 1% !important; height: 64px !important}
	.custom_field div {line-height: 64px !important;}
	.custom_field [type="radio"]:checked + label::after, .custom_field [type="radio"]:not(:checked) + label::after {    font-size: 13px !important;}
	.table-right table, .language_filed, body {font-size: 13px !important;}
	.big-form-inner.mt4{ margin-top: 0 !important }
	.table-right { margin: 10px -4% !important; width: 108% !important}
	.btn-alpha {height: auto !important; padding: 5px 20px !important;}
	.table-right table{ width: 100% !important }
	.mobile-icon .mobile-show li img { width: 20px !important;}
	.cnt_details li:first-child {width: 95% !important;}
	.appointment_popup_close a { top: 2px !important; right: 2px !important; background: #fff; line-height: 100% !important}
	.dropdown_minutes{ margin-left: 10px }
}


@media only screen and (max-width: 479px) {
	#inbox_container{height: 91% !important}
	.language-1{display: none !important}
	.mobile-icon .navbar-nav li.language-1.open .dropdown-menu{left: -72px !important; }
	.mobile-icon .navbar-nav li.img-wallet.open .dropdown-menu{left: -78px !important; }
	.mobile-icon .navbar-nav li.notification_msg.open .dropdown-menu{left: -50px !important; }
	.mobile-icon .navbar-nav li.myaccount.open .dropdown-menu{left: -90px !important; }
	.appointment_popup td{ padding: 5px !important }
	.table-responsive .app_data1{ padding-right: 0px !important }
	.appointment_popup li{ font-weight: 400; font-size: 13px; padding-left: 0 !important; padding-right: 0 !important }
	.header h3 {font-size: 16px !important;}
	.cnt_details li{ width: 100%; margin: 0 1%; float: left; padding: 0 }
	.appointment_data li .btn-alpha{ margin: 10px 4% !important; width: 90%; display: block; }
	#lessonchat_chatbox{ width: 94% !important; right: 3% !important; left: auto !important }
	#balancemins { right: -8px !important; }

}

@media only screen and (max-width: 400px) {
	#inbox_container {height: 92% !important;}
	.appointment_popup td{ padding: 2px !important }
	.header .topbtn .btn-beta{ padding: 8px 12px !important }
	.header h3{ display: block !important; }
	.header .topbtn{ float: none !important; clear: both; }
	.header {padding: 0px !important;}
	.header .mobile-icon {top: -91px !important; margin-top: 0px !important; z-index: 123}
	.header .topbtn{ padding: 5px 0px !important; top: -2px !important }
	.header h3{top: 3px !important; margin-bottom:8px; float: none !important; clear: both;}
	.shift-btm {margin-top: 60px !important;}
}
@media only screen and (max-width: 350px) {
	.form-control {width: 100%;}
	.pull-left, .pull-right {font-size: 12px;}
	.checkbox .cr .cr-icon {font-size: .65em;}
	.pull-right {margin: 0;}
	.header h3{ margin: 5px 5px 5px 0 !important;}
	.shift-btm { margin-top: 60px !important; margin-bottom: 10px !important;}
	.img-wallet a #refreshusd{right: 22px !important;}
	.header h3{max-width:240px;}
	#balancemins { right: -8px !important; }
}




