/* Fida Marwat (Sr. UXUI and Front End Developer) */



/* first media query for mobile responsiveness */

@media(max-width:767px){

	.months-row {
	    margin-top: 0px;
	}

	.mobile-cardd{
		margin-bottom: 30px;
	}

	.months-row .card{
		margin-bottom: 20px;
	}

	.custom-mobile-tabs .nav-item{
		width: 100%;
	}

	.custom-mobile-tabs .nav-item .nav-link{
		margin: auto;
	}

	.custom-w-50{
		width: 100% !important;
	}

	#progress{
		width: 90%;
	}

	.d-block .btn{
		width: 100%;
		margin: 10px 0px;
	}

	.navbar-nav .dropdown-menu{
		position: absolute;
	}

	.low,
	.medium,
	.high{
		display: flex;
		align-items: center;
	}

	.low .fa,
	.medium .fa,
	.high .fa{
		padding-right: 5px;
	}

	.customm-collapse:not(.show){
		display: table-column !important;
	}

	.collapse:not(.show){
		display: block;
		margin-top: 20px;
	}

	.custom-accordion .collapse:not(.show){
		display: none;
		margin-top: 0px;
	}

	#topbar{
		padding-bottom: 20px;
	}

	.btn-outline-secondary{
		margin-left: 0px;
	}

	.navbar-nav{
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30px;
	}

    .chart-right {
	    position: relative;
	    margin-top: 0px;
	}

	.chart-left{
	    position: relative;
	    margin-top: 80px;
	}

	#left-sidebar{
		display: none;
	}

	.offset-btnn{
	  display: block;
	}

	.chart-cardd{
		min-height: auto;
	}

}


/* second media query for tablet responsiveness */

@media(min-width:768px) and (max-width:991px){

	.col-sm-12-100{
		width: 100% !important;
	}

	.col-sm-6-50{
		width: 50% !important;
	}

	.right-card-sm{
		margin-top: 0px !important;
		margin-left: 15px;
	}

	.left-card-sm{
		margin-right: 15px;
	}

	.customm-collapse:not(.show){
		display: table-column !important;
	}

	.collapse:not(.show){
		display: block;
		margin-top: 20px;
	}

	.custom-accordion .collapse:not(.show){
		display: none;
		margin-top: 0px;
	}

	.navbar-nav{
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30px;
	}

	.btn-outline-secondary{
		margin-left: 0px;
	}

	#topbar{
		padding-bottom: 20px;
	}

	.chart-cardd{
		min-height: auto;
	}

	.chart-right {
	    position: relative;
	    margin-top: 80px;
	    display: flex;
	}

	.chart-left{
	    position: relative;
	    margin-top: 80px;
	}

	.months-row {
	    margin-top: 0px;
	}

	.navbar-nav .dropdown-menu{
		position: absolute;
	}

	.offset-btnn{
	  display: block;
	}

	#left-sidebar{
		display: none;
	}
}



/* third media query for laptop responsiveness */

@media(min-width:992px) and (max-width:1200px){
	.col-sm-12-100{
		width: 100% !important;
	}

	.col-sm-6-50{
		width: 50% !important;
	}

	.right-card-sm{
		margin-top: 0px !important;
		margin-left: 15px;
	}

	.left-card-sm{
		margin-right: 15px;
	}

	.btn-outline-secondary{
		margin-left: 30px;
	}

	#topbar{
		padding-bottom: 20px;
	}

	.chart-cardd{
		min-height: auto;
	}

	.chart-right {
	    position: relative;
	    margin-top: 80px;
	    display: flex;
	}

	.chart-left{
	    position: relative;
	    margin-top: 80px;
	}

	.months-row {
	    margin-top: 0px;
	}

	.navbar-nav .dropdown-menu{
		position: absolute;
	}

	.offset-btnn{
	  display: block;
	}

	#left-sidebar{
		display: none;
	}

	.collapse:not(.show){
		display: block;
		margin-top: 20px;
	}

	.custom-accordion .collapse:not(.show){
		display: none;
		margin-top: 0px;
	}
}

@media(min-width:1201px) and (max-width:1280px){
	.left-sidebar-card{
		width: 200px;
	}
}

@media(min-width:1024px) and (max-width:1366px){
	.customm-collapse:not(.show){
		display: table-column !important;
	}
}