src/styles/media.css
/*==============================================================
	Media css
==============================================================*/
@media (max-width: 1400px){
}
@media (min-width: 1301px) and (max-width: 1400px){
	.header{width: calc(100% - 250px);}
	.brand-logo{width: 250px;}
	.left-side-bar{width: 250px;}
	.main-container{padding-left: 270px;}
}
@media (min-width: 1200px) and (max-width: 1400px){
	.device-usage-chart .width-50-p{width: 100%;}
}
@media (min-width: 1301px){
	.sidebar-shrink .left-side-bar.open, .sidebar-shrink .left-side-bar{left: -281px;}
	.sidebar-shrink .header{width: 100%;}
	.sidebar-shrink .main-container{padding-left: 20px;}
}
@media (max-width: 1300px){
	.main-container{padding-left: 5px; padding-right: 5px;}
	.header-left .menu-icon{display: flex;}
	.header{width: 100%;}
	.left-side-bar{left: -281px;}
	.left-side-bar .close-sidebar{display: block;}
	.left-side-bar:before{display: block; opacity: 0; visibility: hidden;}
	.left-side-bar.open:before{opacity: 1; visibility: visible; display: none;}
	.left-side-bar .brand-logo a{text-align: left; padding: 5px 15px;}
	.left-side-bar .brand-logo a img, .left-side-bar .brand-logo a .svg{margin: 0;}
	.header-right .brand-logo{display: table;}
	.header-right .menu-icon{display: block; padding-left: 15px; padding-top: 7px;}
	.footer-wrap{width: 100%;}
	.mobile-menu-overlay{display: block; opacity: 0; visibility: hidden;}
	.mobile-menu-overlay.show{opacity: 0.6; visibility: visible;}
}
@media (min-width: 1025px){
	.header-left .header-search{display: block !important;}
}
@media (max-width: 1024px){
	.header{position: relative;}
	.header-left{width: 25%;}
	.header-right{width: 75%;}
	.main-container{padding-top: 10px;}
	.header-left .search-toggle-icon{display: flex;}
	.header-left .header-search{padding: 15px 20px; position: absolute; left: 0; top: 100%; background: #ffffff; display: none;}
	.register-page-wrap .wizard-content .wizard{padding-left: 300px;}
	.register-page-wrap .wizard-content .wizard .steps{width: 300px;}
}
@media (max-width: 991px){
	.device-usage-chart .width-50-p{width: 100%;}
}
@media (max-width: 767px){
	.header{position: fixed; left: 0; top: 0; -webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, .1); -moz-box-shadow: 0px 5px 25px rgba(0, 0, 0, .1); box-shadow: 0px 5px 25px rgba(0, 0, 0, .1);}
	.main-container{padding-top: 80px;}
	.login-box{padding: 40px 15px;}
	.login-header .brand-logo a img{max-width: 150px;}
	/*.main-container{height: auto;}*/
	.pre-loader{background-size: 43%;}
	.xs-pd-20-10{padding: 20px 10px;}
	.xs-mb-20{margin-bottom: 20px;}
	h1, .h1 {font-size: 2rem;}
	h2, .h2{font-size: 1.6rem;}
	h4, .h4 {font-size: 1.4rem;}
	.main-container{padding-bottom: 0;}
	.footer-wrap{position: relative; height: auto;}
	.user-notification{margin-right: 5px;}
	.user-notification .dropdown-menu{width: 100%; min-width: 300px;}
	.user-info-dropdown .dropdown-toggle .user-name{display: none;}
	.page-header{margin-bottom: 30px;}
	.forgot-password{text-align: center;}
	.ionicons-list li{width: 16.60%;}
	.timeline .timeline-date{position: relative; top: 0; margin-bottom: 20px; left: 35px;}
	.timeline ul:before{left: 10px;}
	.timeline ul li{padding-left: 0px; padding-bottom: 0;}
	.timeline ul li:before{left: 2px; top: 28px;}
	.fc-toolbar .fc-left{float: none !important; padding-bottom: 10px;}
	.fc-toolbar .fc-left:after, .fc-toolbar .fc-right:after{content: ""; clear: both; display: table;}
	.fc-toolbar .fc-right{float: none !important; padding-bottom: 10px;}
	.faq-wrap .card-header .btn{font-size: 17px;}
	.error-page h1{font-size: 150px;}
}
@media (max-width: 660px){
	.docs-buttons .btn-group-crop{display: block;}
	.select-role .btn-group .btn{padding-left: 35px; font-size: 14px;}
	.select-role .btn-group .btn .icon{left: 5px; width: 25px; height: 25px;}
	.select-role .btn-group .btn .icon .svg{width: 25px; height: 25px;}
	.forgot-password a{font-size: 14px; font-weight: 600;}
	.btn-group-lg>.btn, .btn-lg{font-size: 16px;}
	.register-page-wrap .wizard-content .wizard{padding-left: 0;}
	.register-page-wrap .wizard-content .wizard .steps{display: none;}
}