@font-face {
    font-family: "reem";
    src: url("../fonts/reem_kufi/ReemKufi-Regular.ttf");
}

@font-face {
    font-family: "avant";
    src: url("../fonts/avant/avant_garde_book.ttf");
}

@font-face {
    font-family: "ramadhan";
    src: url("../fonts/ramadhan/RamadhanMubarokRegular-jEJal.otf");
}

:root {
  --mainfont: 'avant';
  --theme: #00693E;
  --themefont: #eceff1;
  --activemenu: #009150;
  --bginfo: #007791;
  --secondaryprimary: #e8f5e9;
}

h1 {
	font-family: var(--mainfont)!important;
}

h2 {
	font-family: var(--mainfont)!important;
}

h3 {
	font-family: var(--mainfont)!important;
}

h4 {
	font-family: var(--mainfont)!important;
}

h5 {
	font-family: var(--mainfont)!important;
}

h6 {
	font-family: var(--mainfont)!important;
}

label {
	font-family: var(--mainfont)!important;
}

select.form-control {
	font-family: var(--mainfont)!important;
}


p {
	font-family: var(--mainfont)!important;
}

.account-card {
	padding: 15px 15px;
	width: 100%;
	height: 320px;
	border: 0.05em solid #e0e0e0;
	border-radius: 10px;
}

.account-card:hover {
	background: #fafafa;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.12);
}

.badge.badge-light-primary {
	background-color: var(--secondaryprimary)!important;
	color: var(--theme) !important;
}


/* CSS */
.button-39 {
  background-color: #FFFFFF;
  border: 1px solid rgb(209,213,219);
  border-radius: .5rem;
/*  box-sizing: border-box;*/
  color: #111827;
/*  font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
  font-family: var(--mainfont)!important;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: .50rem 1rem;
  text-align: center;
  text-decoration: none #D1D5DB solid;
  text-decoration-thickness: auto;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-39:hover {
  background-color: rgb(249,250,251);
  color: #1b5e20;
}

.button-39:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.button-39:focus-visible {
  box-shadow: none;
}

.btn-primary {
  border-color: var(--theme)!important;
  background-color: var(--theme) !important;
  color: #fff !important;
}

.btn-primary:focus {
  background-color: var(--theme)!important;
}

.btn.btn-primary:active {
  background-color: var(--theme)!important;
}

.btn-primary:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px var(--theme);
}

.btn-info {
  border-color: var(--bginfo)!important;
  background-color: var(--bginfo) !important;
  color: #fff !important;
}

.btn-info:focus {
  background-color: var(--bginfo)!important;
}

.btn.btn-info:active {
  background-color: var(--bginfo)!important;
}

.btn-info:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px var(--bginfo);
}

.card-header .card-title {
	font-family: var(--mainfont)!important;
	font-weight: 700!important;
}

.card-hebahan {
	/* height: 500px;
	margin: 10px;
	border-radius: 5px;
	border: 0.05em solid #cfd8dc;
	text-overflow: ellipsis!important; */

	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	border: 0 solid rgba(34, 41, 47, 0.125);
	border-radius: 0.428rem;
	margin: 10px 5px;
	/*width: 300px;*/
}

.card-hebahan:hover {
	box-shadow: 0 4px 24px 0 rgb(129, 125, 125) !important; 
}

.card-hebahan > a {
	color: rgba(0, 0, 0, 0.6)!important;
}

.card-hebahan-header {
	height: 200px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	border-top-left-radius: 0.428rem;
  border-top-right-radius: 0.428rem;
}

.card-hebahan-body > p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-hebahan-footer {
	font-size: 12px;
	text-align: right;
	color: rgba(0,0,0,0.5);
}

.custom-dropzone-message {
	position: absolute;
	top: 2;
	left: 20%;
	/*width: 100%;*/
}

.custom-login-background {
	width: 100%!important;
	height: 100%!important;
	/*background-color: blue;*/
	position: absolute;
	top: 1;
}

.custom-login-background-bg {
	width: 100%!important;
	height: 100%!important;
	position: absolute;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.custom-login-background-fg {
	width: 100%!important;
	height: 100%!important;
	position: absolute;
	background-color: var(--theme)!important;
	color: #fff!important;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: var(--theme);
  background-color: var(--secondaryprimary);
}

.quote-text {
	color: #fff!important;
}

.dark\:bg-gray-900 {
	background-color: #004800!important;
}

.derma_card {
	height: 450px;
	margin: 10px;
	border-radius: 5px;
	border: 0.05em solid #cfd8dc;
	text-overflow: ellipsis!important;
}

.derma_card_body {
	height: 300px;
	/*padding: 5px 10px;*/
}

.derma_card_desc_space {
	height: 75px;
	overflow: hidden;
  text-overflow: ellipsis;
}

.derma_card_header {
	height: 150px;
	background-position: center!important;
	background-size: contain!important;
	background-repeat: none!important;
}

.dropzone {
	border: 0.05em solid #cfd8dc!important;
	min-height: 200px!important;
	border-radius: 10px!important;
	position: relative;
}

.dropzone:hover {
	background-color: #f5f5f5;
}

.dz-message {
	display: none!important;
}

.jumbo-button-mhub {
	height: 200px!important;
	width: 200px!important;
	border-radius: 10px;
	border: 0.05em solid #cfd8dc;
}

.jumbo-button-mhub a {
	text-decoration: none!important;
	color: black;
	opacity: 0.6;
}

.jumbo-button-mhub:hover {
	cursor: pointer;
	background-color: #f5f5f5;
}

.jumbo-text-mhub {
	font-size: 100px!important;
}

.kufi-reem {
	font-family: 'ramadhan'!important;
	font-size: 40px!important;
	color: #fff!important;
}

.kufi-reem-dark {
	font-family: 'ramadhan'!important;
	font-size: 50px!important;
	color: var(--theme)!important;
}

.msjd-dropzone {
	border: 0.05em solid black!important;
	height: 150px!important;
	border-radius: 10px!important;
}

.splide__slide {
  opacity: 0.6;
  height: 200px!important;
  width: auto!important;
}

.splide__slide.is-active {
  opacity: 1;
}

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


/**
 * SIDEBAR STYLING SECTION
 */

.main-menu.menu-dark .navigation > li.active > a {
	background: rgba(255, 255, 255, 0.1)!important;
	box-shadow: none!important;
}

.main-menu.menu-dark .navigation > li ul .active {
	background: rgba(255, 255, 255, 0.1)!important;
	box-shadow: none!important;
}

.navbar-brand h2 {
	color: var(--themefont)!important;
}

.semi-dark-layout .main-menu {
	background-color: var(--theme)!important;
	color: #fff!important;
}

.semi-dark-layout .main-menu-content .navigation-main {
/*	background-color: #006500;*/
	background: none!important;
	font-family: var(--mainfont)!important;
}

.semi-dark-layout .main-menu-content .navigation-main .navigation-header {
	/*color: #b3ffb3!important;*/
	opacity: 0.8;
	color: var(--themefont)!important;
	font-family: var(--mainfont)!important;
	font-weight: bold!important;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item a::after, .semi-dark-layout .main-menu-content .navigation-main .nav-item a {
	color: var(--themefont)!important;
}

.semi-dark-layout .main-menu-content .navigation-main .active.nav-item a {
	/*color: red!important;*/
	background-color: var(--activemenu)!important;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content {
	background-color: none!important;
	background: none!important;
}

/*header submenu*/
.semi-dark-layout .main-menu-content .navigation-main .nav-item.open:not(.sidebar-group-active) > a {
	background-color: none!important;
	background: rgba(0, 0, 0, 0.1)!important;
	/*color: red!important;*/
}

.table {
	font-family: var(--mainfont)!important;
}

.table thead tr th {
	font-family: var(--mainfont)!important;
}

.main-menu.menu-dark .navigation > li.open:not(.menu-item-closing) > a, .main-menu.menu-dark .navigation > li.sidebar-group-active > a {
	background: var(--activemenu)!important;
}

.section_card {
    padding: 20px;
    text-align: left;
    border-radius: 10px;
    border: 0.05em solid #e0e0e0;
    background-color: #f5f5f5;
    font-family: var(--mainfont)!important;
}

.section_card:hover {
    background-color: #eceff1;
}

.section_content {
    text-decoration: none!important;
    font-family: var(--themefont)!important;
    color: #757575;
}

/*content submenu*/
.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content li:not(.active) a {
	background-color: none!important;
	background: rgba(0, 0, 0, 0.1)!important;
}

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a::after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.1rem;
	height: 1.1rem;
	width: 1.1rem;
	display: inline-block;
	position: absolute;
	right: 20px;
	top: 14px;
	transform: rotate(0deg);
	transition: all 0.2s ease-out;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content li.active a {
	background-color: #00AB66!important;
}


.semi-dark-layout .main-menu .shadow-bottom {
	background: linear-gradient(180deg, #006500 44%, rgba(40, 48, 70, 0.51) 73%, rgba(40, 48, 70, 0));
}

.shadow {
	box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1) !important; 
}

.text-primary {
	color: var(--theme)!important;
}

.themefont {
	font-family: var(--mainfont)!important;
}