/* Merriweather Font */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

:root{
	--main-bg-color: #F2F2F2; /*grey*/
	--main-text-color:#049DD9; /*blue*/
	--second-bg-color:#c1efde; /*green*/
	--second-text-color:#000000; /*black*/
	--third-bg-color:#077fad; /*dark blue*/
	--fourth-bg-color: #D95204; /*orange*/
	--fifth-bg-color: #8BA1E1; /*purple*/ 
	--sixth-bg-color: #035E73; /*dark-green*/ 
	--seventh-bg-color: #4168DD; /*login color*/ 
}

body{
	font-family: "Merriweather", serif;;
}

.primary-text{
	color: var(--main-text-color);
}

.second-text{
	color: var(--second-text-color);
}

.secondary-bg{
	background-color: var(--second-bg-color);
}

.rounded-full{
	border-radius: 100%;
}

.dashboard-icon{
	background-color: var(--sixth-bg-color);
	color: var(--main-bg-color);
	position: relative;
	top: -30px;
	left: 0;
}

.box{
	height: 250px;
	color: var(--sixth-bg-color);
}

.box h3,h5{
	font-weight: 700;
}

.box p{
	font-weight: 500
}

.role{
	color: var(--main-text-color);
}

#wrapper{
	overflow-x: hidden;
}

#sidebar-wrapper{
	min-height: 100vh;
	margin-left: -15rem;
	-webkit-transition: margin 0.25s ease-out;;
	-moz-transition: margin 0.25s ease-out;;
	-o-transition: margin 0.25s ease-out;;
	transition: margin 0.25s ease-out;
}

#sidebar-wrapper .sidebar-heading{
	padding: 0.875rem 1.25rem;
	font-size: 1.2rem;
}

#sidebar-wrapper .list-group{
	width: 15rem;
}

#page-content-wrapper{
	min-width: 100vw;
	background-color: var(--main-bg-color);
}

#wrapper.toggled #sidebar-wrapper{
	margin-left: 0;
}

#menu-toggle, #notifications{
	cursor: pointer;
}

.list-group-item{
	border:none;
	padding: 20px 30px;
	font-weight: 500;
	display: flex;
	align-items:center;
}

.list-group-item:hover{
	color: #ffffff;
	background-color: var(--main-text-color) !important;
}

.list-group-item.active{
	background-color: transparent;
	color: var(--main-text-color);
	font-weight: bold;
	border: none;
}

#button-addon2{
	border: 1px solid #dedcdc;
}

#button-addon2:hover{
	color: #FFFFFF;
	background-color:#656D73;
}

#navbarDropdown{
	width: 37px;
}

.dropdown-menu span{
	color: var(--main-text-color);
}

.active{
	color: #ffffff !important;
	background-image: linear-gradient(to right, var(--third-bg-color) , var(--main-text-color));
}

.add{
	color: #FFFFFF;
	background-color: var(--main-text-color);
}

.add:hover{
	color: #FFFFFF;
	background-color: var(--third-bg-color);
}

.table tr th{
	font-weight: 600;
	color: var(--third-bg-color);
}

.table-header{
	width: 100%;
	background-image: linear-gradient(to right, var(--third-bg-color) , var(--main-text-color));
}

.table-responsive{
	width: 100%;
}

.table{
	width: 100%;
}

tbody tr td span i{
	cursor: pointer;
}

.navbar div h2{
	color: var(--main-text-color);
}

.modal-header{
	color: #FFFFFF;
	background-image: linear-gradient(to right, var(--third-bg-color) , var(--main-text-color));
}

.Viewtext{
	color: var(--main-text-color);
}

.final-print {
	background-color: var(--fourth-bg-color);
	color: #FFFFFF
}

.search-by-month{
	color: var(--main-text-color);
	font-weight: 900;
}

#loginBody{
	background-color: var(--fifth-bg-color);
}

.loginContainer{
	height: 100vh;
}

#loginImage{
	width: 500px;
}

.card-head img{
	width: 500px;
}

.card-body h3{
	color: var(--main-text-color);
	font-weight: 900;
}

.card-body .btn{
	background-color: var(--fifth-bg-color);
	color: #FFFFFF;
}

.login-title{
	color: var(--seventh-bg-color) !important;
}

.analysis{
	height: 300px;
}

#reportrange{
	background: #fff; 
	cursor: pointer; 
	padding: 5px 10px; 
	border: 1px solid #ccc;
	width: 100%;
}

.tab {
	display: inline-block;
	padding: 10px 20px;
	cursor: pointer;
	background: #FFFFFF;
	margin-right: 5px;
	border-radius: 5px 5px 0 0;
  }

  .tab.show {
	background: var(--main-text-color);
	color: #FFFFFF;
	border-bottom: 2px solid white;
  }

  .tab-content {
	display: none;
	padding: 20px;
  }

  .tab-contents{
	margin-left: 12px;
}

  .tab-content.show {
	display: block;
  }

@media (min-width:768px){
	#sidebar-wrapper{
		margin-left:0;
	}
	#page-content-wrapper{
		min-width:0;
		width:100%;
	}
	#wrapper.toggled #sidebar-wrapper{
		margin-left: -15rem;
	}
}

.sidebar-heading img{
	width: 165px;
}

.pdfIcon{
	width: 30px;
}