@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap');

* {
	box-sizing: border-box;
}

:root {
	--mainColor : #2593F7;
	--borderColor: #D9D9D9;
	--grayColor: #D9D9D9;
	--activeColor: #E8F4FF;
	--shadowColor: #0000000A;
	--grayText: #888888;
	--activeRow: #f6f8fe;
}

.black-link{
	color: black;
	text-decoration: none;
}

.blue-link {
	color: var(--mainColor);
	text-decoration: none;
}

.cover-img-container {
	height: 100%;
}

.cover-img-container img {
	object-fit: cover;
	height: 100%;
}

.content-container {
	padding: 70px;
	min-height: 100vh;
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
}

.content-container .header {
	margin-bottom: 15px;
}

.content-container .header .page-title {
	font-size: 30px;
}

.content-container .header .page-title a.logo{
	width: fit-content;
}

.content-container .body .tab-title {
	font-size: 32px;
	margin-bottom: 25px;
}

.content-container .body .tab-title .sub-title {
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.content-container .body .tab-title .sub-title .text {
	color: var(--grayColor);
}

.content-container .body .tab-title .sub-title .tab-num {
	color: var(--mainColor);
}


.content-container .body .tab-title img {
	cursor: pointer;
}

.content-container .body form {
	margin-top: 15px;
}

.content-container .body .form-label {
	margin-bottom: 15px;
}

.content-container .body label {
	display: inline-block;
	font-size: 14px;
	margin-bottom: 8px;
}

.content-container .body .footer-input-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.content-container .body .submit-btn {
	background-color: var(--mainColor);
	color: white;
	padding: 12px 12px;
	font-size: 16px;
	margin-bottom: 20px;
}

.content-container .body .main-input {
	padding: 12px 12px;
	border: 1px solid var(--borderColor);
}

.footer-input-group {
	margin-top: 7px;
}

.form-footer {
	margin-top: 25px;
}

select {
	-webkit-appearance: auto !important;
	appearance: auto !important;
}

label[for='uploadimg']{
	display: block !important;
    width: 100px;
    height: 100px;
    border: 1px dotted #556EE6;
	border-radius: 4px;
	position: relative;
	cursor: pointer;
}

label[for='uploadimg'] img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


.select2-container--default {
	width: 100% !important;
}

.select2-container--default .select2-selection--multiple {
	border: 1px solid var(--borderColor) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color:#f4f9ff !important;
    border: 1px solid  #f4f9ff !important;
	color: var(--mainColor);
	padding-left: 0 !important;
	padding-right: 20px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	left: unset !important;
	color: black !important;
	right: 0;
}

.select2-container--default .select2-search--inline .select2-search__field {
    height: 50px !important;
    padding: 12px 12px !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
	margin: 0 !important;
	position: absolute;
    top: calc(100% + 2px );
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
	display: flex !important;
    align-items: center !important;
}

.step {
	display: none;
}


/* Start Dashboard */
#dashboard .main-container .main-content{
	display: flex;
	font-family: 'Outfit', sans-serif;
}

#dashboard .main-container .main-content .center-container {
	flex-grow: 1;
	background-color: #F8F9FE;
	/* height: 100vh; */
	margin-left: 250px;
}

#dashboard .main-container .main-content .left-container {
	width: 250px;
	height: 100vh;
	overflow: auto;
	background-color: white;
	padding: 15px;
	transition: 0.5s;
	position: fixed;
	top: 0;
	left: 0;
}

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--grayColor);
	border-radius: 5px;
}

#dashboard .main-container .main-content .left-container a.logo {
	width: 100%;
    display: inline-block;
    text-align: center !important;
}

#dashboard .main-container .main-content .left-container .list-container {
	margin-top: 40px;
}

#dashboard .main-container .main-content .left-container .list-container .list-item {
	height: 57px;
	border-radius: 5px;
	padding: 0 15px;
	text-decoration: none;
	margin-bottom: 2px;
	color: black;
}

.active-list-item {
	background-color: var(--activeColor);
	color: var(--mainColor) !important;
}

#dashboard .main-container .main-content .left-container .list-container .list-item:hover {
	background-color: var(--activeColor);
}

#dashboard .main-container .main-content .left-container .list-container .list-item .icon {
	margin-right: 10px;
}

#dashboard .main-container .main-content .center-container .custome-navbar{
	padding: 22px 22px;
	background-color: white;
	box-shadow: var(--shadowColor) 0px 2px 6px;
}

.notification{
	width: 40px;
    height: 40px;
    background: var(--activeColor);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item {
	margin-right: 5px;
	margin-left: 5px;
}

.list-btn {
	cursor: pointer;
}

.show-sidebar{
	height: 100% !important;
}

.page-content {
	padding: 40px 30px;
}

.page-content .header {
	margin-bottom: 15px;
}
.page-content .header .main-title{
	font-size: 20px;
	margin-bottom: 10px;
}

.page-content .header .sub-title{
	font-size: 12px;
	color: var(--grayText);
}

.page-content > .body{
	/* padding: 30px 0; */
}

.page-content .body .card-container {
	margin-bottom: 15px;
}

.page-content .body .card-container .card-content {
	background-color: white;
	padding: 25px 25px;
	border-radius: 8px;
}

.page-content .body .card-container .card-content .details {
	margin-left: 20px;
}

.page-content .body .card-container .card-content .details .title {
	margin-bottom: 4px;
	font-weight: 500;
}

.page-content .body .card-container .card-content .details .count{
	font-size: 24px;
	font-weight: 500;
	color: var(--mainColor);
}

.custom-row {
	margin-bottom: 15px;
}

.custome-table {
	width: 100%;
}

.custome-table tr {
	height: 57px;
}

.active-row{
	background-color: var(--activeRow)
}

th, td{
	text-align: center;
}

.page-footer {
	background-color: #EEF0F2;
	padding: 15px 15px;
	color: #A4AFB7;
	font-size: 14px;
}

/* Media Query */
@media (max-width: 767px) {
	.cover-img-container {
		display: none;
	}

	.content-container {
		padding: 50px 25px;
	}

	#dashboard .main-container .main-content .center-container .custome-navbar {
		padding: 15px 10px;
	}

	#dashboard .main-container .main-content .left-container .logo-container {
		justify-content: space-between;
	}

	#dashboard .main-container .main-content .left-container a.logo {
		width: fit-content;
	}

	#dashboard .main-container .main-content .left-container {
		position: absolute;
		top: 70px;
		left: 0;
		width: 100%;
		height: 65px;
		overflow: hidden;
		background-color: white;
		padding: 15px;
	}

	#dashboard .main-container .main-content .center-container {
		margin-left: 0;
	}

	.page-content {
		padding: 100px 30px;
	}
}

@media (min-width: 768px) and (max-width: 991px){
	.cover-img-container {
		height: 30vh;
	}

	.cover-img-container img {
		object-fit: cover;
	}
}

/*  spinner loading*/

.loading-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: #00000061;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #2593F7;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #2593F7 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.list-address {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 11px;
    max-height: 200px;
    background: #fff;
    z-index: 30;
    overflow: auto;
}
.list-address option:hover {
    background: #ddd;
}