:root {
	--transparent-color: #ffffff00;
	
    --white-color: #ffffff;
	--white-color-15: #ffffff26;
	--white-color-25: #ffffff40;
	--white-color-50: #ffffff80;
	--white-color-75: #ffffffbf;
	
    --black-color: #000000;
    --black-color-10: #0000001a;
	--black-color-15: #00000026;
	--black-color-25: #00000040;
	--black-color-50: #00000080;
	--black-color-75: #000000bf;

    --theme-color-01: #06412b;
	--theme-color-01-15: #06412b26;
	--theme-color-01-25: #06412b40;
	--theme-color-01-50: #06412b80;
	--theme-color-01-75: #06412bbf;
	
    --theme-color-02: #00754a;
	--theme-color-02-15: #00754a26;
	--theme-color-02-25: #00754a40;
	--theme-color-02-50: #00754a80;
	--theme-color-02-75: #00754abf;
	
	--theme-color-03: #f37544;
	--theme-color-03-15: #f3754426;
	--theme-color-03-25: #f3754440;
	--theme-color-03-50: #f3754480;
	--theme-color-03-75: #f37544bf;

	--gray-color: #f4f6f8;
    --gray-color-25: #f4f6f840;
    --gray-color-50: #f4f6f880;
    --gray-color-75: #f4f6f8bf;
	
	--red-color: #b41e1e;
	--red-color-25: #b41e1e40;
	
	--green-color: #40afe1;
	--yellow-color: #f37544;

    --color-02-bg: #9dab07;
    --color-02-bg-50: #9dab0780;

    --color-03-bg: #ab5307;
    --color-03-bg-50: #ab530780;

    --color-04-bg: #31331c;
    --color-04-bg-50: #31331c80;

    --color-05-bg: #ab078d;
    --color-05-bg-50: #ab078d80;

    --color-06-bg: #5007ab;
    --color-06-bg-50: #5007ab80;

    --color-07-bg: #0777ab;
    --color-07-bg-50: #0777ab80;

    --color-001: #fffaf2;
    --color-002: #f3fff3;
    --color-003: #f2f8ff;
    --color-004: #f9f2ff;
	
	--border-radius-01: 0;
	--border-radius-02: .5rem;
	--border-radius-03: 0 0 .5rem .5rem;
	--border-radius-04: .5rem .5rem 0 0;
    --border-radius-05: .25rem;
    --border-radius-06: 50%;

	--font-poppins: "Poppins", sans-serif;
    --font-kufi: "Noto Kufi Arabic", sans-serif;
	--font-awesome: "Font Awesome 5 Pro", sans-serif;

    --color-01: #1877F2;
    --color-02: #fa7e1e;
    --color-03: #14171a;
    --color-04: #0077b5;
    --color-05: #fe2c55;
    --color-06: #ff0000;
    --color-07: #065cab;
    --color-08: #1a7d36;
    --color-09: #075e54;
	--color-10: #b41e1e;

    --main-color-01: #00754a;
}

* {
    outline: 0 !important;
    box-shadow: none !important;
}

html {
    position: relative;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
	font-family: var(--font-kufi);
    color: var(--black-color);
    background-color: var(--gray-color);
	font-size: 1rem;
	font-weight: 400;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    min-height: 100%;
	direction: rtl;
}

a,
a:focus,
a:hover {
    text-decoration: none !important;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

ul {
    padding: 0;
    margin-bottom: 0;
}

/* li {
    list-style: none;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
	margin-bottom: 0;
    line-height: normal;
}

p {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1320px;
    }
}

@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1320px;
    }
}

@media (max-width: 576px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
		padding-right: 1.25rem !important;
		padding-left: 1.25rem !important;
    }
}

.container-fluid {
    padding-left: 2vw !important;
    padding-right: 2vw !important;
}

@media (max-width: 992px){
	.container-fluid {
		padding-left: 4vw !important;
		padding-right: 4vw !important;
	}	
}

::selection {
    background: var(--theme-color-01);
    color: var(--white-color);
}

.dir-num {
    direction: ltr;
    text-align: right;
}

.lang-en {
    font-family: var(--font-poppins);
}

.lang-ar {
    font-family: var(--font-kufi);
}


/****** Preloader ******/

.preloader {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    pointer-events: none;
    backface-visibility: hidden;
}

.preloader::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--gray-color);
    transition: .5s linear;
    transform: translateX(0);
    pointer-events: none;
    z-index: -1;
}

.preloader.loaded::after {
    transition: .5s linear;
}

.preloader.loaded::after {
    transform: translateX(-101%);
}

.preloader.loaded img {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}


/****** Header ******/

header {
    position: fixed;
    top: 0;
    left: 0;
	right: 0;
    z-index: 20;
	border-radius: var(--border-radius-03);
	background-color: var(--main-color-01);
	border: none;
    border-bottom: 1px solid var(--black-color-15);
}

header .toggle-menu {
	font-size: 1.5rem;
	color: var(--white-color);
}

header .dropdown-toggle::after {
	display: none;
}

header .dropdown-toggle,
header .dropdown-toggle:focus {
	font-size: .875rem;
	color: var(--white-color);
}

header .dropdown-toggle:hover {
	color: var(--white-color-75);
}

header .dropdown-toggle i {
	font-size: 1.5rem;
	position: relative;
    top: 4px;
}

header .dropdown-menu {
    min-width: 12rem;
    padding:0;
    margin: 0;
    left: 0 !important;
    right: auto !important;
    font-size: .875rem;
    color: var(--black-color-75);
    text-align: right;
    background-color: var(--white-color);
	border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
	overflow: hidden;
}

header .dropdown-menu[data-bs-popper] {
    margin-top: .75rem;
}

header .dropdown-menu .dropdown-item,
header .dropdown-menu .dropdown-item:focus {
    color: var(--black-color);
    background-color: var(--white-color);
	padding: .5rem .75rem;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

header .dropdown-menu .dropdown-item.dropdown-item-link,
header .dropdown-menu .dropdown-item.dropdown-item-link:focus {
    color: var(--black-color);
    background-color: var(--white-color);
	padding: .5rem .75rem;
    border-top: 1px dashed var(--black-color-15);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

header .dropdown-menu .dropdown-item.dropdown-item-link:hover {
    color: var(--black-color-75);
    background-color: var(--gray-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

header .dropdown-menu .dropdown-item .fw-600 {
    font-weight: 600;
}

@media (max-width: 992px){
	.navbar-nav {
		position: absolute;
		left: 4vw;
		top: .75rem;
        display: inline-block;
	}
	header .navbar-nav .dropdown-menu {
		position: absolute !important;
	}
    header .navbar-nav .dropdown {
        display: inline-block;
	}
}

header.headroom--not-top {
    position: fixed;
	background-color: var(--main-color-01);
}

header.headroom--unpinned {
    opacity: 1;
}

header.headroom {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

header.headroom.headroom--pinned {
    -webkit-animation-name: headroom--pinned;
    animation-name: headroom--pinned;
}

header.headroom.headroom--unpinned {
    -webkit-animation-name: headroom--unpinned;
    animation-name: headroom--unpinned;
}

header.headroom.headroom--unpinned.headroom--between {
	opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
}

header.headroom.headroom--pinned.headroom--between {
    -webkit-animation-name: headroom--unpinned;
    animation-name: headroom--unpinned;
}

@-webkit-keyframes headroom--pinned {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes headroom--pinned {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes headroom--unpinned {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes headroom--unpinned {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}


/****** Footer ******/

footer {
	position: relative;
    bottom: 0;
    z-index: 20;
	border-radius: var(--border-radius-04);
	background-color: var(--main-color-01);
	border: none;
    border-top: 1px solid var(--black-color-15);
    color: var(--white-color);
	padding: .75rem 0;
    margin-top: 2rem;
}

footer p {
    font-size: .875rem;
}

footer a.footer-social-link,
footer a.footer-social-link:focus {
    color: var(--white-color);
	font-size: 1rem;
    margin-left: 1rem;
}

footer a.footer-social-link:hover {
    color: var(--white-color-75);
}


/****** Side Menu ******/

.side-menu {
	display: block;
    position: fixed;
    top: 1rem;
    right: 1rem;
	bottom: 1rem;
    width: 15rem;
    height: calc(100vh - 2rem);
    padding: .75rem;
    border-radius: var(--border-radius-02);
    background-color: var(--white-color);
	border: 1px solid var(--black-color-15);
    margin: 0;
    z-index: 25;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.side-menu .top-side {
	text-align: center;
	padding-bottom: .75rem;
    padding-top: .75rem;
	border: none;
    border-radius: var(--border-radius-02);
    background-color: #ffffff;
    border-bottom: 1px dashed var(--black-color-25);
}

.side-menu .top-side img {
	width: 80%;
}

.side-menu .links-side {
    position: relative;
	padding-top: .75rem;
	padding-bottom: .75rem;
    overflow: hidden;
    height: 100%;
}

.side-menu .links-side .ps__rail-y {
    width: .25rem;
}

.side-menu .links-side .ps__thumb-y {
    background-color: var(--black-color-25);
    border-radius: .5rem;
    width: .25rem;
    right: 0;
}

@media (max-width: 992px){
	.side-menu {
		right: -16rem;
		-webkit-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
	.side-menu.show {
		right: 1rem !important;
		-webkit-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
	.side-menu-bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--black-color-15);
		z-index: 22;
		display: none;
		-webkit-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
	.side-menu-bg.show {
		display: block;
		-webkit-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
}

.side-menu .links-side li {
    width: 100%;
	margin-bottom: 0.25rem;
    display: inline-block;
}

.side-menu .links-side li a,
.side-menu .links-side li a:focus {
    color: var(--black-color-75);
	background-color: var(--transparent-color);
    position: relative;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    display: block;
}

.side-menu .links-side li a:hover,
.side-menu .links-side li a.active,
.side-menu .links-side li a:active {
    color: var(--black-color);
    background-color: var(--gray-color);
	border-radius: var(--border-radius-02); 
}

.side-menu .links-side li a i {
	margin-left: .5rem;
	font-size: 1rem;
	width: 1.25rem;
}

.side-menu .links-side li .menu-submenu {
    width: 100%;
    margin-top: 1px;
}

.side-menu .links-side li a.submenu-side::after {
	content: "\f067";
    font-family: var(--font-awesome);
    position: relative;
	float: left;
	color: var(--black-color-75);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.side-menu .links-side li.active a.submenu-side {
    color: var(--black-color);
    background-color: var(--gray-color);
	border-radius: var(--border-radius-02); 
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.side-menu .links-side li.active a.submenu-side::after {
	content: "\f068";
	color: var(--black-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.side-menu .links-side li.active>.menu-submenu {
    display: block;
    background-color: var(--gray-color);
    border-radius: var(--border-radius-02);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.side-menu .links-side .menu-submenu[aria-expanded="true"] {
    display: block;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.side-menu .menu-submenu li a,
.side-menu .menu-submenu li a:focus {
    padding-right: 4rem;
    background-color: var(--transparent-color);
    color: var(--black-color);
}

.side-menu .links-side .menu-submenu li a,
.side-menu .links-side .menu-submenu li a:focus {
    padding-right: 1rem;
    background-color: var(--transparent-color);
    color: var(--black-color-75);
}

.side-menu .links-side .menu-submenu li a:hover,
.side-menu .links-side .menu-submenu li a.active{
    color: var(--black-color);
}

.side-menu .links-side .menu-submenu li a::before {
	content: "\f068";
    font-family: var(--font-awesome);
    position: relative;
	font-size: .5rem;
	padding-left: .5rem;
}

.toggle-side-menu .side-menu {
    right: -15rem;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.toggle-side-menu header,
.toggle-side-menu footer,
.toggle-side-menu main {
    padding-right: 0;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

@media (min-width: 992px){
	header, footer, main {
		padding-right: 16rem;
		-webkit-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
}


/****** Main Pages ******/

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

.bord-right-white {
    border-right: 12px solid #ffffff;
}

.bord-top-white {
    border-top: 12px solid #ffffff;
}

.signin-page main {
	padding-right: 0;
}

.signin-page .signinup {
    position: relative;
}

.signinup .signinupimg {
	text-align: center;
}

.signinup .signinupimg img {
	width: 16rem;
    height: auto;
}

.signinup .signinupimg h1 {
    font-size: 1rem;
    line-height: normal;
	text-align: center;
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;

}

.page-title {
    position: relative;
    padding: 0 0 .5rem 0;;
    border-bottom: 1px dashed var(--black-color-15);
    margin-bottom: 1.5rem;
}

.page-title .title-home-link {
    display: inline-block;
}

.page-title .title-home-link i,
.title-page-title .home-link i:focus {
    color: var(--black-color-75);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.page-title .title-home-link i:hover {
    color: var(--black-color);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.page-title .title-home-link::after {
    content: "\f104";
	font-family: var(--font-awesome);
	color: var(--black-color-75);
    position: relative;
    top: 1px;
    margin-right: .5rem;
    margin-left: .25rem;
}

.page-title .title-page-link,
.page-title .title-page-link a,
.page-title .title-page-link a:focus {
    color: var(--black-color-75);
    font-size: .875rem;
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.page-title .title-page-link a:hover {
    color: var(--black-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.page-title .title-page-link::after {
    content: "\f104";
	font-family: var(--font-awesome);
	color: var(--black-color-75);
    position: relative;
    top: 1px;
    margin-right: .5rem;
    margin-left: .25rem;
}

.page-title .title-page-name {
    display: inline-block;
    color: var(--black-color);
    font-size: 1rem;
    font-weight: 600;
}

.card {
    background-color: var(--white-color);
    background-clip: border-box;
    border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
}

.card .card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: var(--white-color);
    border-bottom: 1px dashed var(--black-color-15);
	color: var(--black-color);
}

.card .card-header:first-child {
    border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0;
}

.card .card-footer {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: var(--white-color);
    border-top: 1px dashed var(--black-color-15);
	color: var(--black-color);
}

.card .card-footer:last-child {
    border-radius: 0 0 calc(.5rem - 1px) calc(.5rem - 1px);
}

.form-label {
    margin-bottom: .125rem;
	margin-right: .25rem;
    font-weight: 600;
    font-size: .875rem;
}

.alert-danger {
    color: var(--red-color);
    background-color: var(--red-color-25);
    border-color: var(--red-color);
	border-radius: var(--border-radius-02);
	padding: .75rem;
}

.form-outline {
    position: relative;
}

.form-outline .form-control {
    padding: .5rem .75rem;
    color: var(--black-color);
    background-color: var(--white-color);
    border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.form-outline input.form-control {
    height: 42px;
}

.form-outline .form-control:focus {
    border: 1px solid var(--black-color-25);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.form-outline .form-check-input {
    border: 1px solid var(--black-color-25);
    background-color: var(--transparent-color);
    position: relative;
    top: -2px;
    width: 20px;
    height: 20px;
    margin-left: 0.5rem;
}

.form-outline .form-check-input[type=checkbox] {
    border-radius: var(--border-radius-05);
}

.form-outline .form-check-input:checked {
    background-color: var(--transparent-color);
    border-color: var(--black-color-25);
}

.form-outline .form-check-input:checked[type=checkbox] {
    background-image: none;
}

.form-outline .form-check-input:checked[type=checkbox]::after {
    content: "\f00c";
    font-family: var(--font-awesome);
    font-size: .875rem;
    font-weight: 400;
    color: var(--black-color);
    position: relative;
    top: -3px;
    right: 2px;
}

.form-outline .form-check-input:checked[type=radio] {
    background-image: none;
}

.form-outline .form-check-input:checked[type=radio]::after {
    content: "\f111";
    font-family: var(--font-awesome);
    font-size: 13px;
    font-weight: 800;
    color: var(--black-color);
    position: absolute;
    top: 0px;
    left: 2.125px;
    width: 13px;
    height: 13px;
}

.form-outline .form-check-label {
    color: var(--black-color);
}

.form-outline.is-invalid .form-check-input {
    border: 1px solid var(--red-color);
}

.form-outline.is-invalid .form-control,
.form-outline.is-invalid .form-control:focus {
    border: 1px solid var(--red-color);
}

.form-outline.is-invalid .invalid-feedback {
    width: auto;
    position: absolute;
    top: 0;
    left: .25rem;
    color: var(--red-color);
    font-size: .875rem;
    margin: 0;
    margin-top: .125rem;
    display: block !important;
}

.form-outline .invalid-feedback {
    display: none !important;
}

.form-outline .form-control:disabled,
.form-outline .form-control[readonly] {
    background-color: var(--gray-color) !important;
    opacity: 1;
}

.form-outline .toggle-password {
    position: relative;
    left: .75rem;
    top: 2.25rem;
	float: left;
    z-index: 5;
    color: var(--black-color-50);
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.form-outline .toggle-password~.form-control {
    padding-left: 2.5rem !important;
}

.form-outline .eye::before {
    content: "\f06e";
    font-family: var(--font-awesome);
    font-size: 1rem;
}

.form-outline .eye-slash::before {
    content: "\f070";
    font-family: var(--font-awesome);
    font-size: 1rem;
}

.form-outline .input-group-cus {
	position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: var(--white-color-25);
	color: var(--white-color-75);
    padding: 1rem;
	font-weight: 600;
}

.form-outline .dropdown-item img {
	width: 1.5rem;
	height: auto;
	margin-right: .25rem;
    border: 1px solid var(--black-color-15);
}

.form-outline .filter-option-inner-inner img {
	width: 1.5rem;
	height: auto;
	margin-right: .25rem;
	border: 1px solid var(--black-color-15);
}

.form-outline .input-group-cus-02 {
    direction: ltr;
}

.form-outline .input-group-cus-02 .input-select-cus {
	width: calc(100% - 15rem);
    text-align: left !important;
    margin-right: 0 !important;
    margin-left: -1px !important;
    border-top-right-radius: var(--border-radius-02) !important;
    border-bottom-right-radius: var(--border-radius-02) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.form-outline .input-group-cus-02 .btn-light {
    direction: rtl !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--border-radius-02) !important;
    border-bottom-left-radius: var(--border-radius-02) !important;
}

.form-outline .input-group-cus-02 .filter-option-inner-inner {
    direction: ltr;
}

.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-left-radius: var(--border-radius-02) !important;
    border-bottom-left-radius: var(--border-radius-02) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.form-outline .input-group-text {
    padding: .5rem .75rem;
    color: var(--black-color);
    background-color: var(--gray-color);
    border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
}

.input-group.search-box:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: var(--border-radius-02) !important;
    border-bottom-right-radius: var(--border-radius-02) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn-cus-01,
.btn-cus-01:focus {
    text-align: center;
    position: relative;
    padding: .5rem 1rem;
	width: auto;
    border-radius: var(--border-radius-02);
    color: var(--black-color);
    border: 1px solid var(--transparent-color);
    font-weight: 500;
    display: inline-block;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-cus-01:hover {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.link-cus,
.link-cus:focus {
    font-size: .875rem;
	color: var(--black-color-75);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.link-cus:hover {
	color: var(--black-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.link-cus-02,
.link-cus-02:focus {
    font-size: 1rem;
	font-weight: 600;
	color: var(--black-color-75);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.link-cus-02:hover {
	color: var(--black-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-01,
.btn-01:focus {
    text-align: center;
    position: relative;
    padding: .5rem 1.5rem;
	width: 100%;
    border-radius: var(--border-radius-02);
    color: var(--black-color);
    border: 1px solid var(--transparent-color);
    font-weight: 500;
    display: inline-block;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-01:hover {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-01.btn-01-cus {
    width: 60%;
    display: block;
}

@media (max-width: 576px) {
    .btn-01.btn-01-cus {
        width: 100%;
        display: block;
    }
}

.btn-01::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--white-color-15);
    transition: .5s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.btn-01:hover::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.btn-02,
.btn-02:focus {
    text-align: center;
    position: relative;
    padding: .125rem .25rem;
	width: auto;
	min-width: 4.75rem;
	font-size: .75rem;
    border-radius: var(--border-radius-02);
    color: var(--black-color);
    border: 1px solid var(--transparent-color);
    font-weight: 400;
    display: inline-block;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-02:hover {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-02::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--white-color-15);
    transition: .5s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.btn-02:hover::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.btn-03,
.btn-03:focus {
    text-align: center;
    position: relative;
    padding: .5rem 2rem;
	width: auto;
	min-width: 5rem;
	font-size: 1rem;
    border-radius: var(--border-radius-02);
    color: var(--black-color);
    border: 1px solid var(--transparent-color);
    font-weight: 600;
    display: inline-block;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-03:hover {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.btn-03::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--white-color-15);
    transition: .5s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.btn-03:hover::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.black-color-bg,
.black-color-bg:focus {
	border: 1px solid var(--theme-color-01-25);
	background-color: var(--theme-color-01-50);
	color: var(--white-color);
}

.black-color-bg:hover {
	border: 1px solid var(--theme-color-01-25);
	background-color: var(--theme-color-01-50);
	color: var(--white-color);
}

.color-02-bg,
.color-02-bg:focus {
	border: 1px solid var(--color-02-bg-50);
	background-color: var(--color-02-bg);
	color: var(--white-color);
}

.color-02-bg:hover {
	border: 1px solid var(--color-02-bg-50);
	background-color: var(--color-02-bg);
	color: var(--white-color);
}

.color-03-bg,
.color-03-bg:focus {
	border: 1px solid var(--color-03-bg-50);
	background-color: var(--color-03-bg);
	color: var(--white-color);
}

.color-03-bg:hover {
	border: 1px solid var(--color-03-bg-50);
	background-color: var(--color-03-bg);
	color: var(--white-color);
}

.color-04-bg,
.color-04-bg:focus {
	border: 1px solid var(--color-04-bg-50);
	background-color: var(--color-04-bg);
	color: var(--white-color);
}

.color-04-bg:hover {
	border: 1px solid var(--color-04-bg-50);
	background-color: var(--color-04-bg);
	color: var(--white-color);
}

.color-05-bg,
.color-05-bg:focus {
	border: 1px solid var(--color-05-bg-50);
	background-color: var(--color-05-bg);
	color: var(--white-color);
}

.color-05-bg:hover {
	border: 1px solid var(--color-05-bg-50);
	background-color: var(--color-05-bg);
	color: var(--white-color);
}

.color-06-bg,
.color-06-bg:focus {
	border: 1px solid var(--color-06-bg-50);
	background-color: var(--color-06-bg);
	color: var(--white-color);
}

.color-06-bg:hover {
	border: 1px solid var(--color-06-bg-50);
	background-color: var(--color-06-bg);
	color: var(--white-color);
}

.color-07-bg,
.color-07-bg:focus {
	border: 1px solid var(--color-07-bg-50);
	background-color: var(--color-07-bg);
	color: var(--white-color);
}

.color-07-bg:hover {
	border: 1px solid var(--color-07-bg-50);
	background-color: var(--color-07-bg);
	color: var(--white-color);
}

.theme-color-01-bg,
.theme-color-01-bg:focus {
	border: 1px solid var(--theme-color-01);
	background-color: var(--theme-color-01);
	color: var(--white-color);
}

.theme-color-01-bg:hover {
	border: 1px solid var(--theme-color-01);
	background-color: var(--theme-color-01);
	color: var(--white-color);
}

.theme-color-02-bg,
.theme-color-02-bg:focus {
	border: 1px solid var(--theme-color-02);
	background-color: var(--theme-color-02);
	color: var(--white-color);
}

.theme-color-02-bg:hover {
	border: 1px solid var(--theme-color-02);
	background-color: var(--theme-color-02);
	color: var(--white-color);
}

.theme-color-03-bg,
.theme-color-03-bg:focus {
	border: 1px solid var(--theme-color-03);
	background-color: var(--theme-color-03);
	color: var(--white-color);
}

.theme-color-03-bg:hover {
	border: 1px solid var(--theme-color-03);
	background-color: var(--theme-color-03);
	color: var(--white-color);
}

.gray-color-bg {
	background-color: var(--gray-color) !important;
}

.red-color-bg,
.red-color-bg:focus {
	border: 1px solid var(--red-color);
	background-color: var(--red-color);
	color: var(--white-color);
}

.red-color-bg:hover {
	border: 1px solid var(--red-color);
	background-color: var(--red-color);
	color: var(--white-color);
}

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

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

.green-color-bg,
.green-color-bg:focus {
	border: 1px solid var(--green-color);
	background-color: var(--green-color);
	color: var(--white-color);
}

.green-color-bg:hover {
	border: 1px solid var(--green-color);
	background-color: var(--green-color);
	color: var(--white-color);
}

.model-frameless .modal-content {
    background-color: var(--transparent-color);
    border: none;
    border-radius: var(--border-radius-02);
}

.model-frameless .modal-body {
    padding: .5rem 0 0 0;
}

.model-frameless .modal-body.modal-body-cus {
    background-color: var(--gray-color);
    border: none;
    border-radius: var(--border-radius-02);
    padding: 1rem;
}

.model-frameless .btn-close,
.model-frameless .btn-close:focus {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: var(--white-color);
    background: none;
    border: 0;
    border-radius: var(--border-radius-02);
    opacity: .75;
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.model-frameless .btn-close:hover {
    opacity: 1;
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.model-frameless .btn-close::after {
    content: "\f00d";
	font-family: var(--font-awesome);
	color: var(--white-color);
    font-size: 1.5rem;
    font-weight: 300;
	position: relative;
    top: -.75rem;
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-backdrop {
    background-color: var(--black-color-75);
}

hr {
    margin: 1.25rem 0;
    padding: 0;
    color: inherit;
    background-color: var(--black-color-25);
    border: none;
    opacity: 1;
    height: 1px !important;
    width: 100%;
}

hr.hr-cus {
    margin: 1.25rem 0;
    padding: 0;
    color: inherit;
    background-color: var(--black-color-25);
    border: none;
    opacity: 1;
    height: 2px !important;
    width: 100%;
}

hr.hr-cus-02 {
    margin: .5rem 0;
    padding: 0;
    color: inherit;
    background-color: var(--black-color-25);
    border: none;
    opacity: 1;
    height: 1px !important;
    width: 100%;
}

.cv-ifram {
    width: 100%;
    height: 100%;
    min-height: 75vh;
    border: 0;
    margin: 0;
    padding: 0;
}

.action-cus {
    min-width: 16rem;
}

.employee-cus .action-cus {
    min-width: auto;
}

@media (max-width: 576px) {
    .cv-ifram {
        min-height: 50vh;
    }
}

.signup-page main {
	padding-left: 0;
}

.signup-page .signinup {
    position: relative;
    padding-top: 10vh;
    padding-bottom: 5vh;
}

.signup-page .nav-tabs {
    border-bottom: 1px solid var(--black-color-15);
}

.signup-page .nav-tabs .nav-link {
    margin-bottom: -2px;
    background: 0 0;
    border: 1px solid var(--transparent-color);
    border-bottom: 1px solid var(--black-color-10);
    border-top-left-radius: var(--border-radius-02);
    border-top-right-radius: var(--border-radius-02);
    color: var(--black-color-75);
    font-weight: 600;
    background-color: var(--gray-color);
    margin-left: .5rem;
    margin-right: .5rem;
    position: relative;
    bottom: 1px;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.signup-page .nav-tabs .nav-item.show .nav-link,
.signup-page .nav-tabs .nav-link.active {
    color: var(--black-color);
    background-color: var(--white-color);
    border-color: var(--black-color-15) var(--black-color-15) var(--white-color) var(--black-color-15);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.date-icon::before {
    content: "\f073";
    font-family: var(--font-awesome);
    font-size: 1rem;
    color: var(--black-color-75);
    position: absolute;
    right: 0.75rem;
    top: 2.125rem;
    cursor: pointer;
}

.datetimepickers {
    cursor: pointer;
}

.social-icons a.footer-social-link,
.social-icons a.footer-social-link:focus {
    color: var(--black-color-75);
	font-size: 1rem;
    margin-left: 1rem;
}

.social-icons a.footer-social-link:hover {
    color: var(--theme-color-02);
}

.text-arabic {
    font-family: var(--font-kufi);
    text-align: right !important;
    direction: rtl !important;
}

.tab-ar {
    font-family: var(--font-kufi);
    text-align: right;
    direction: rtl;
}

.tours-img,
.excursions-img,
.gallery-img {
    height: 4rem;
    width: auto;
}

.tours-img-02,
.excursions-img-02,
.gallery-img-02 {
    height: 6rem;
    width: auto;
}

.gallery-img-03 {
    height: 12rem;
    width: auto;
    max-width: 100%;
}

.articles-img-02 {
    height: 12rem;
    width: auto;
    max-width: 100%;
}

.iframe-vid {
    width: 11rem;
    height: 6rem;
    border: none;
}

.iframe-vid-02 {
    width: 35rem;
    height: 20rem;
    border: none;
}

.badge-cus {
    position: absolute;
    top: 1.125rem;
    left: 0;
    padding: .35rem .5rem .25rem .5rem;
    background-color: var(--red-color);
}

.accordion-button {
    padding: 1rem 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--black-color-75);
    background-color: var(--gray-color);
    margin-top: .5rem;
    border-radius: var(--border-radius-02) !important;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.accordion-button:not(.collapsed) {
    color: var(--black-color);
    background-color: var(--theme-color-01-25);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.accordion-button::after {
    content: "\f107";
    font-family: var(--font-awesome);
    font-size: 1.25rem;
    color: var(--black-color-50);
    background-image: none;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    color: var(--black-color);
    transform: rotateX(-180deg);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.accordion-body {
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-02) !important;
    border-bottom: 1px solid var(--black-color-25);
}

.accordion-item {
    background-color: var(--white-color);
    border: none;
}

.accordion .collapsing {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.isotope a,
.isotope a:focus {
    color: var(--black-color);
    font-weight: 500;
}

.isotope a:hover {
    color: var(--theme-color-02);
}

.mfp-bg {
    background: var(--black-color-50) !important;
    opacity: 1 !important;
}

.mfp-iframe-holder {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mfp-image-holder .mfp-close,
.mfp-image-holder .mfp-close:focus,
.mfp-iframe-holder .mfp-close,
.mfp-iframe-holder .mfp-close:focus {
    color: var(--white-color-75);
    right: -.5rem;
    text-align: right;
    padding-right: .5rem;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.mfp-image-holder .mfp-close:hover,
.mfp-iframe-holder .mfp-close:hover {
    color: var(--white-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.mfp-iframe-holder .mfp-content {
    max-width: 75% !important;
}

.import-phones:disabled,
.import-emails:disabled {
    opacity: .5;
    pointer-events: none;
}


/****** Bootstrap Select ******/

.form-outline .bootstrap-select.form-control {
    padding: 0 !important;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: var(--black-color-50);
}

.form-outline .form-control:-ms-input-placeholder {
	color: var(--black-color-50) !important;
	font-weight: 400 !important;
	opacity: 1 !important;
}

.form-outline .form-control::-ms-input-placeholder {
	color: var(--black-color-50) !important;
	font-weight: 400 !important;
	opacity: 1 !important;
}

.form-outline .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    position: absolute;
    display: inline-block;
    left: 16px;
	right: auto;
    top: 12px;
}

.form-outline .bootstrap-select.show-tick .dropdown-menu li a span.text {
    margin-left: 34px;
	margin-right: 0;
}

.bootstrap-select .btn-light {
    color: var(--black-color);
    background-color: var(--white-color);
	padding: .5625rem .75rem;
    border: none !important;
	border-radius: var(--border-radius-02);
}

.bootstrap-select .btn {
    color: var(--black-color);
    background-color: var(--white-color);
    border: none !important;
    padding: .5rem .75rem;
    border-radius: var(--border-radius-02);
}

.bootstrap-select .actions-btn.btn.btn-light {
    border: 1px solid var(--black-color-15) !important;
    padding: .25rem .75rem;
    border-radius: var(--border-radius-05);
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
	outline: none !important;
}

.bootstrap-select .dropdown-toggle .filter-option {
    text-align: right;
}

.bootstrap-select .dropdown-menu {
    padding: 0;
    color: var(--black-color);
    text-align: right;
    list-style: none;
    background-color: var(--white-color);
    background-clip: padding-box;
    border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
    box-shadow: 0 4px 8px 0 var(--black-color-10), 0 4px 8px 0 var(--black-color-10) !important;
}

.bootstrap-select .dropdown-item {
    padding: .5rem .75rem;
    color: var(--black-color-75);
}

.bootstrap-select .dropdown-item:focus,
.bootstrap-select .dropdown-item:hover {
    color: var(--black-color);
    background-color: var(--gray-color)
}

.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active {
    color: var(--white-color);
    text-decoration: none;
    background-color: var(--theme-color-02)
}


/****** Data Table ******/

.cus-datatable {
    width: 100%;
    overflow: hidden;
    color: var(--black-color);
}

.cus-datatable .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--gray-color);
    color: var(--black-color);
}

.cus-datatable .table-striped tfoot,
.cus-datatable .table-striped thead {
    background-color: var(--theme-color-01-25);
}

.cus-datatable .page-item:first-child .page-link {
    border-top-right-radius: var(--border-radius-02);
    border-bottom-right-radius: var(--border-radius-02);
    color: var(--black-color);
}

.cus-datatable .page-item:last-child .page-link {
    border-top-left-radius: var(--border-radius-02);
    border-bottom-left-radius: var(--border-radius-02);
}

.cus-datatable .page-item.disabled .page-link {
    color: var(--black-color-75);
    background-color: var(--white-color);
    border-color: var(--black-color-15);
}

.cus-datatable .page-item.active .page-link {
    background-color: var(--theme-color-02);
    border-color: var(--theme-color-02);
    color: var(--white-color);
}

.cus-datatable .page-link {
    color: var(--black-color);
    background-color: var(--white-color);
    border: 1px solid var(--black-color-15);
}

.cus-datatable .page-link:hover {
    z-index: 2;
    color: var(--black-color);
    background-color: var(--black-color-15);
    border-color: var(--black-color-15);
}

.cus-datatable .form-control-sm {
    min-height: calc(1.5em + .5rem + 2px);
    padding: .5rem .75rem;
	padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: 1rem;
    font-size: .875rem;
    border-radius: var(--border-radius-02);
	border: 1px solid var(--black-color-15);
    background-color: var(--white-color);
    color: var(--black-color);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.cus-datatable .form-control-sm:focus {
	border: 1px solid var(--black-color-25);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.cus-datatable .form-select-sm {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: 1rem;
    font-size: .875rem;
	border: 1px solid var(--black-color-15);
	border-radius: var(--border-radius-02);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	cursor: pointer;
	width: .75rem;
    height: .75rem;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23b41e1e' d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") no-repeat !important;
}

.cus-datatable table.dataTable {
    margin-top: .75rem !important;
    margin-bottom: 1rem !important;
}

.cus-datatable .table>:not(:last-child)>:last-child>* {
    border-bottom-color: var(--black-color-15);
	font-weight: 500;
}

.cus-datatable table.table {
    border-color: var(--black-color-15);
    color: var(--black-color);
}

.cus-datatable table.table thead tr th {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}

.cus-datatable div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    font-size: .875rem;
}

.cus-datatable div.dataTables_wrapper div.dataTables_info {
    font-size: .875rem;
}

div.dt-buttons {
    margin-top: .5rem;
    float: right !important;
}

button.dt-button,
button.dt-button:focus {
    text-align: center !important;
    position: relative !important;
    padding: .25rem 1rem !important;
	width: auto !important;
	font-size: .875rem !important;
    border-radius: var(--border-radius-02) !important;
    color: var(--black-color) !important;
    border: 1px solid var(--theme-color-01) !important;
    background: none !important;
	background-color: var(--theme-color-01) !important;
	color: var(--white-color) !important;
    font-weight: 400 !important;
    display: inline-block !important;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

button.dt-button:hover {
    border: 1px solid var(--theme-color-02) !important;
	background-color: var(--theme-color-02) !important;
	color: var(--white-color) !important;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.table td,
.table th {
    vertical-align: middle;
}

.table td.td-cus {
    line-height: normal;
}

.table-100 {
    width: 100% !important;
}

@media (max-width: 576px) {
    .cus-datatable div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        margin: 1rem 0;
    }
    .cus-datatable div.dataTables_wrapper div.dataTables_length,
    .cus-datatable div.dataTables_wrapper div.dataTables_filter,
    .cus-datatable div.dataTables_wrapper div.dataTables_info,
    .cus-datatable div.dataTables_wrapper div.dataTables_paginate {
        margin-bottom: .5rem;
    }
    .cus-datatable div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: right !important;
    }
    .cus-datatable .page-link {
        padding: .375rem .4rem;
    }
    .cus-datatable.table-cus {
		overflow-x: auto;
	}
}

.table-cus.table-cus-02 .table-striped tbody tr {
    color: var(--black-color);
}

.table-cus.table-cus-02 .table-striped tbody th {
    font-weight: 600;
}

.table-cus.table-cus-02 .table-striped tbody tr a,
.table-cus.table-cus-02 .table-striped tbody tr a:focus,
.table-cus.table-cus-02 .table-striped tbody tr a:hover {
    color: var(--black-color);
    border-bottom: 1px solid var(--black-color);
}

.table-cus.table-cus-02 .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--gray-color);
}

.table-cus.table-cus-02 .table-title-02 {
	background-color: var(--black-color-25);
    margin: 1.5rem 0 0.5rem 0;
    padding: 0.5rem;
	font-size: .875rem;
    font-weight: 700;
}

.table-cus.table-view tbody tr th {
    font-size: .875rem;
}

.email-exist,
.email-exist-edit,
.email-domain,
.email-domain-edit,
.admin-name-exist,
.admin-name-exist-edit,
.gender-name-exist,
.gender-name-exist-edit,
.marital-name-exist,
.marital-name-exist-edit,
.churche-name-exist,
.churche-name-exist-edit,
.marital-level-exist,
.marital-level-exist-edit,
.academic-name-exist,
.academic-name-exist-edit,
.priest-name-exist,
.priest-name-exist-edit,
.servant-name-exist,
.servant-name-exist-edit,
.student-name-exist,
.student-name-exist-edit,
.lesson-name-exist,
.lesson-name-exist-edit,
.lectures-name-exist,
.lectures-name-exist-edit,
.melody-name-exist,
.melody-name-exist-edit,
.groupx-name-exist,
.groupx-name-exist-edit,
.username-exist,
.username-exist-edit,
.date-exist,
.date-exist-edit,
.deacon-exist,
.deacon-exist-edit,
.classx-exist,
.classx-exist-edit,
.level-name-exist,
.level-name-exist-edit,
.percentage-total-exist,
.exam2-exist,
.mass-name-exist,
.people-name-exist,
.people-name-exist-edit,
.mass-name-exist-edit,
.file-size,
.file-size-02,
.file-size-03,
.file-size-04,
.file-size-edit,
.password-wrong {
    width: auto;
    position: absolute;
    top: 0;
    left: 0.25rem;
    color: var(--red-color);
    font-size: .875rem;
    margin: 0;
    margin-top: 0.25rem;
    display: none;
}

.page-over {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--black-color-50);
	z-index: 1080;
	display: none;
}

.page-over::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.5rem;
	height: 3.5rem;
	border: .25rem solid var(--white-color);
	border-top: .25rem solid transparent;
	border-radius: 50%;
	animation: spin .5s linear 0s infinite;
	margin-left: -1.75rem;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}

#rescoundit a,
#rescoundit a:focus {
    color: var(--black-color-75);
}

#rescoundit a:hover {
    color: var(--black-color);
}

.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:focus,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    text-decoration: line-through !important;
    color: var(--black-color-50) !important;
}

.bootstrap-datetimepicker-widget .btn-primary {
    color: var(--white-color);
    background-color: var(--black-color-25);
    border-color: var(--black-color-50);
}

.bootstrap-datetimepicker-widget table td {
    color: var(--black-color) !important;
}


/****** Sweet Alert ******/

.sweet-alert {
    padding: 1rem;
    border-radius: var(--border-radius-02);
}

.sweet-alert h3 {
    font-size: 1.5rem;
}

.sweet-alert .sa-confirm-button-container,
.sweet-alert .sa-button-container {
    position: relative;
    display: grid !important;
}

.sweet-alert .btn-primary,
.sweet-alert .btn-primary:focus {
    text-align: center;
    padding: .5rem 2.5rem;
    border-radius: var(--border-radius-02);
    font-weight: 400;
    color: var(--white-color);
    background-color: var(--theme-color-02);
    border: 1px solid var(--theme-color-02);
    display: inline-block;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.sweet-alert .btn-primary:hover {
    color: var(--white-color);
    -webkit-box-shadow: 0 5px 20px 0 rgb(18 54 94 / 20%) !important;
    box-shadow: 0 5px 20px 0 rgb(18 54 94 / 20%) !important;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.sweet-alert .sa-icon.sa-success .sa-line {
    background-color: var(--green-color);
}

.sweet-alert .sa-icon.sa-success .sa-placeholder {
    border: 4px solid rgba(52, 122, 42, .5);
}

.sweet-alert .sa-icon.sa-error .sa-line {
    background-color: var(--red-color);
}

.sweet-alert .sa-icon.sa-error {
    border-color: var(--red-color);
}

.sweet-alert .sa-icon.sa-warning .sa-body {
    background-color: var(--yellow-color);
}

.sweet-alert .sa-icon.sa-warning .sa-dot {
    background-color: var(--yellow-color);
}

.sweet-alert .sa-icon.sa-warning {
    border-color: var(--yellow-color);
}

.sweet-overlay {
    background-color: var(--black-color-50);
    z-index: 1090;
}

.sweet-alert .btn-dark,
.sweet-alert .btn-dark:focus {
    text-align: center;
    padding: .5rem 2.5rem;
    margin-bottom: .5rem;
    border-radius: var(--border-radius-02);
    font-weight: 400;
    color: var(--white-color);
    background-color: var(--red-color);
    border: 1px solid var(--red-color);
    display: inline-block;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.sweet-alert .btn-dark:hover {
    color: var(--white-color);
    -webkit-box-shadow: 0 5px 20px 0 rgb(18 54 94 / 20%) !important;
    box-shadow: 0 5px 20px 0 rgb(18 54 94 / 20%) !important;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.sweet-alert[data-has-cancel-button="true"] .btn-primary {
    background-color: var(--red-color);
    border: 1px solid var(--red-color);
}

.sweet-alert[data-has-cancel-button="true"] .btn-dark {
    background-color: var(--theme-color-02);
    border: 1px solid var(--theme-color-02);
}


/****** Editor ******/

.note-editor.note-airframe.card,
.note-editor.note-frame.card {
    background-color: var(--white-color);
    background-clip: border-box;
    border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.is-invalid .note-editor.note-airframe.card,
.is-invalid .note-editor.note-frame.card {
    border: 1px solid var(--red-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.note-editor.card .note-toolbar.card-header {
    padding: .25rem .5rem .5rem .5rem;
    margin-bottom: 0;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--black-color-15);
    color: var(--black-color);
    border-radius: var(--border-radius-04);
}

.note-editor.note-airframe,
.note-editor.note-frame {
    background-color: var(--white-color);
    background-clip: border-box;
    border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.is-invalid .note-editor.note-airframe,
.is-invalid .note-editor.note-frame {
    border: 1px solid var(--red-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.note-editor.note-airframe .note-statusbar,
.note-editor.note-frame .note-statusbar {
    background-color: var(--gray-color);
    border-bottom-left-radius: var(--border-radius-02);
    border-bottom-right-radius: var(--border-radius-02);
    border-top: 1px solid var(--black-color-15);
}

.note-editor .note-toolbar>.note-btn-group,
.note-popover .popover-content>.note-btn-group {
    margin-left: 0;
    margin-right: .25rem;
    margin-top: .25rem;
}

.note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
    padding: .5rem .75rem;
}

.note-editor.note-airframe .note-editing-area .note-codable, .note-editor.note-frame .note-editing-area .note-codable {
    background-color: var(--white-color);
    color: var(--black-color);
    display: none;
    font-family: Menlo, Monaco, monospace, sans-serif;
    font-size: 14px;
	font-weight: 400;
    margin-bottom: 0;
    outline: none;
    padding: .5rem .75rem;
    resize: none;
    width: 100%;
}

.note-editor .dropdown-toggle::after {
    margin-left: .5rem;
    position: relative;
    top: 2px; 
}

.note-icon-caret:before {
    display: none;
}

.note-editor .dropdown-menu {
    font-size: 12px;
    color: var(--black-color);
    background-color: var(--white-color);
    border: 1px solid var(--black-color-15);
    border-radius: .25rem;
}

.note-editor ul,
.note-editor ol {
    padding: inherit;
    margin-bottom: 0;
}

.note-editor .note-toolbar .note-para .note-dropdown-menu,
.note-popover .popover-content .note-para .note-dropdown-menu {
    min-width: 243px;
    padding: .5rem;
}

.note-editor .note-toolbar {
    padding: .25rem .75rem .5rem .75rem;
    color: var(--black-color);
    background-color: var(--white-color);
    border-bottom: 1px solid;
    border-color: var(--black-color-15);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.note-editor .note-toolbar .note-dropdown-menu,
.note-popover .popover-content .note-dropdown-menu {
    min-width: 200px;
}

a.note-dropdown-item,
a.note-dropdown-item:hover {
    margin: .25rem 0;
    padding: .25rem .5rem;
}

.note-editor .note-toolbar .note-style .dropdown-style blockquote,
.note-editor .note-toolbar .note-style .dropdown-style pre,
.note-popover .popover-content .note-style .dropdown-style blockquote,
.note-popover .popover-content .note-style .dropdown-style pre {
    margin: 0;
    padding: 0 .5rem;
}

.note-modal-content {
    width: 600px !important;
    top: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .5rem;
    box-shadow: 0 6px 40px rgba(0, 0, 0, .5) !important;
    padding: 15px;
    margin: auto !important;
    transform: translate(0, -50%) !important;
}

.note-modal-backdrop {
    z-index: 1039;
}


/****** Rate ******/

.rating-container .clear-rating {
    color: var(--theme-color-03);
    cursor: not-allowed;
    display: none;
    vertical-align: middle;
    font-size: 15px;
    padding-right: 5px;
}

.rating-container .empty-stars {
    color: var(--theme-color-03);
}

.rating-container .filled-stars {
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    color: var(--theme-color-03);
    white-space: nowrap;
    overflow: hidden;
    -webkit-text-stroke: 1px var(--transparent-color);
    text-shadow: none;
}

.rating-md {
    font-size: 1.5rem;
}

.rating-container .caption {
    color: var(--white-color);
	background-color: var(--theme-color-03);
	border-radius: .25rem;
    display: inline-block;
    vertical-align: middle;
    font-size: .875rem;
    margin-top: -2px;
    margin-left: 5px;
    margin-right: 0;
}

.rating-container .star {
    margin: 0 2px;
}

.rating-disabled .rating-stars {
	cursor: default !important;
}

#table-hotels .rating-md {
    font-size: 1rem;
}

#selectedcitieslist {
    position: relative;
}

#selectedcitieslist li {
    background-color: var(--black-color-10);
    padding: .25rem .5rem;
    margin: .25rem;
    display: inline-block;
    border-radius: .25rem;
    cursor: move;
}

#selectedcitieslist li::marker {
    display: none;
}

.card-pic {
    position: relative;
    background-color: var(--theme-color-01-50);
    border-radius: var(--border-radius-02);
    border: 1px solid var(--black-color-15);
    padding: 1rem;
}

.card-pic img.church-logo {
    width: 70%;
}

.card-pic .card-name {
    font-size: 1.5rem;
    color: var(--white-color);
    font-weight: 700;
}

.card-pic .card-code {
    font-size: 1.5rem;
    color: var(--white-color);
    font-weight: 700;
}

.card-pic .profile-pic {
    position: relative;
    padding: 0;
    padding-top: 125%;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--black-color-25);
    border-radius: var(--border-radius-02);
    background-color: var(--white-color);
    background-image: url(../img/profile-pic.webp);
}

.profile-pic-view {
    position: relative;
    padding: 0;
    padding-top: 125%;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--black-color-25);
    border-radius: var(--border-radius-02);
    background-color: var(--white-color);
    background-image: url(../img/profile-pic.webp);
}

.card-pic hr.card-hr {
    margin: 1rem 0;
    padding: 0;
    color: inherit;
    background-color: var(--white-color);
    border: none;
    opacity: 1;
    height: 1px !important;
    width: 100%;
}

.card-pic .card-qrcode {
    padding: .25rem;
    background-color: var(--white-color);
}

.card-qrcode-view {
    padding: .25rem;
    background-color: var(--white-color);
}

.profile-pic-cus {
    position: relative;
    padding: 0;
    padding-top: 125%;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--black-color-25);
    border-radius: var(--border-radius-02);
    background-color: var(--white-color);
    background-image: url(../img/profile-pic.webp);
}

@media (max-width: 992px) {
    .card-pic {
        padding: .5rem;
    }
    .card-pic img.church-logo {
        width: 75%;
    }
    .card-pic .card-name {
        font-size: .875rem;
    }
    .card-pic .card-code {
        font-size: .75rem;
    }
    .card-pic hr.card-hr {
        margin: .5rem 0;
    }
}

.card-pic-02 {
    position: relative;
    background-color: var(--theme-color-01-50);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
}

.card-pic-02.stu-card {
    background-image: url(../img/card-bg-stu.webp);
}

.card-pic-02.ser-card {
    background-image: url(../img/card-bg-ser.webp);
}

.card-pic-02.pep-card {
    background-image: url(../img/card-bg-pep.webp);
}

.card-pic-02 .card-name {
    position: absolute;
    bottom: 18.75%;
    left: 9%;
    text-align: left;
    font-size: 1.25rem;
    color: var(--white-color);
    font-weight: 700;
}

.card-pic-02 .card-code {
    position: absolute;
    bottom: 10.75%;
    left: 9%;
    text-align: left;
    font-size: 1.5rem;
    color: var(--white-color);
    font-weight: 700;
}

.card-pic-02 .profile-pic {
    position: absolute;
    width: 25.5%;
    left: 6.5%;
    top: 25.5%;
    padding: 0;
    padding-top: 30%;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius-02);
    background-color: var(--white-color);
    background-image: url(../img/profile-pic.webp);
}

.card-pic-02 .card-qrcode {
    position: absolute;
    padding: .25rem;
    background-color: var(--white-color);
    width: 22%;
    right: 7%;
    bottom: 10.5%;
}

.card-pic-02 .card-qrcode-img {
    position: relative;
    width: 100%;
    padding: 0;
    padding-top: 100%;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 992px) {
    .card-pic-02 .card-name {
        font-size: .5rem;
    }
    .card-pic-02 .card-code {
        font-size: .5rem;
    }
}

@media (max-width: 992px) {
    .modal-xl {
        max-width: 700px;
    }
}

.table-cus.table-view #table-lesson tbody tr th {
    min-width: 12vw;
}

.table-cus.table-view #table-lesson tr td a,
.table-cus.table-view #table-lesson tr td a:focus,
.table-cus.table-view #table-student tr td a,
.table-cus.table-view #table-student tr td a:focus,
.table-cus.table-view #table-servant tr td a,
.table-cus.table-view #table-servant tr td a:focus{
    color: var(--theme-color-02);
    border-bottom: 1px solid var(--theme-color-02);
    display: inline-block;
    font-weight: 500;
}

.table-cus.table-view #table-lesson tr td a:hover,
.table-cus.table-view #table-student tr td a:hover,
.table-cus.table-view #table-servant tr td a:hover {
    color: var(--black-color);
    border-bottom: 1px solid var(--black-color);
}

.embed-pdf {
    width: 100%;
    height: 600px;
}

@media (max-width: 576px) {
    .embed-pdf {
        width: 100%;
        height: 600px;
    }
}

.bor-bot-cus {
    padding: 0 0 .75rem 0;
    border-bottom: 1px dashed var(--black-color-15);
}

@media (max-width: 576px) {
    canvas.chartxx {
        height: 100% !important;
    }
}

.nav-pills {
    margin-bottom: -1px;
    z-index: 1;
    position: relative;
}

.nav-pills .nav-link {
    display: block;
    padding: .5rem 2rem;
    margin: 0 .25rem;
    border: 1px solid;
    border-color: var(--transparent-color);
    color: var(--black-color-75);
    border-radius: .5rem .5rem 0 0;
    background-color: var(--black-color-15);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--black-color);
    background-color: var(--white-color);
    border-color: var(--black-color-15) var(--black-color-15) var(--white-color) var(--black-color-15);
    pointer-events: none;
    cursor: default;
}

.tr-bg-red {
    background-color: #b41e1e26 !important;
}

.tab-tree .tree-level[data-level="0"] { 
    background-color: var(--gray-color);
}

.tab-tree .tree-level[data-level="1"] { 
    background-color: var(--color-001);
    position: relative;
    display: inline-table;
    right: 2rem;
    width: calc(100% - 2rem) !important;
}

.tab-tree .tree-level[data-level="2"] { 
    background-color: var(--color-002);
    position: relative;
    display: inline-table;
    right: 2rem;
    width: calc(100% - 2rem) !important;
}

.tab-tree .tree-level[data-level="3"] { 
    background-color: var(--color-003);
    position: relative;
    display: inline-table;
    right: 2rem;
    width: calc(100% - 2rem) !important;
}

.tab-tree .tree-level[data-level="4"] { 
    background-color: var(--color-004);
    position: relative;
    display: inline-table;
    right: 2rem;
    width: calc(100% - 2rem) !important;
}

.tab-tree .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--transparent-color);
}

.tab-tree tbody tr td:nth-of-type(1) {
    width: 6%;
}

.tab-tree tbody tr td:nth-of-type(2) {
    width: 37%;
}

.tab-tree tbody tr td:nth-of-type(3) {
    width: 57%;
}


/* Cards */

.card-cus-01 {
    position: relative;
    background-color: var(--dark-color-15);
    padding: 0 0 1rem 0;
    margin-bottom: 0;
    text-align: center;
}

@media (max-width: 576px) {
	.card-cus-01 {
        padding: 0;
        margin-bottom: 2rem;
    }
}

.card-cus-01 .card-img {
    position: relative;
    margin: 0;
    margin-bottom: .75rem;
	padding: 0;
	padding-top: 60%;
    overflow: hidden;
    border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.card-cus-01 .card-name,
.card-cus-01 .card-name a,
.card-cus-01 .card-name a:focus {
    font-family: var(--font-lato);
	color: var(--theme-color-02);
	font-size: 1.25rem;
	font-weight: 700;
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.card-cus-01 .card-name span {
    font-family: var(--font-lato);
	color: var(--theme-color-01);
    display: block;
    margin-top: .5rem;
	font-size: .875rem;
	font-weight: 700;
}

.card-cus-01 .card-name a:hover {
	color: var(--theme-color-01);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.card-cus-01 .card-info {
	position: relative;
    padding: 0 1rem;
}

.card-cus-01 .card-info p {
	font-size: .875rem;
}

.viewdetails-02 .nav-tabs .nav-link,
.viewdetails-02 .nav-tabs .nav-link:focus {
    border-color: var(--transparent-color);
    color: var(--black-color-75);
}

.viewdetails-02 .nav-tabs .nav-link:hover {
    border-color: var(--transparent-color);
    color: var(--black-color);
}

.viewdetails-02 .nav-tabs .nav-item.show .nav-link,
.viewdetails-02 .nav-tabs .nav-link.active,
.viewdetails-02 .nav-tabs .nav-item.show .nav-link:hover,
.viewdetails-02 .nav-tabs .nav-link:hover.active {
    color: var(--theme-color-02);
    font-weight: 700;
    background-color: var(--white-color);
    border-color: var(--black-color-15) var(--black-color-15) var(--white-color);
}

.isotope {
	width: 100%;
	height: 100%;
	position: relative;
}

.isotope.isotope-cus a::before {
	content: "\f00e";
	font-family: var(--font-awesome);
	font-weight: 300;
    font-size: 2rem;
	color: var(--white-color);
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
    opacity: 1;
	-webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	z-index: 1;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.isotope.isotope-cus a:hover::before {
	opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.isotope.isotope-cus a::after {
	content: "";
    background-color: var(--black-color-25);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-01);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.isotope.isotope-cus a:hover::after {
    background-color: var(--transparent-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.isotope .isotope-img {
    position: relative;
    padding: 0;
    padding-top: 75%;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    border-radius: var(--border-radius-01);
}

.vid-tit,
.vid-tit:focus {
    color: var(--black-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.vid-tit:hover {
    color: var(--theme-color-02);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.mfp-counter {
    direction: ltr;
}

.mfp-arrow {
    position: absolute;
    opacity: .75;
    margin: 0;
    top: 50%;
    margin-top: 0;
    padding: 0;
    width: auto;
    height: auto;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.mfp-arrow:active {
    margin-top: 0;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.mfp-arrow::before,
.mfp-arrow::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 0;
    margin-left: 0;
    border: none;
    opacity: 1;
}

.mfp-arrow-left {
    left: 1rem;
}

.mfp-arrow-left::after {
    content: "\f053";
    font-family: var(--font-awesome);
    color: var(--white-color);
    font-size: 1.5rem;
    -webkit-box-shadow: 0 0 5px 1px rgb(0 0 0 / 7%) !important;
    box-shadow: 0 0 5px 1px rgb(0 0 0 / 7%) !important;
}

.mfp-arrow-left::before {
    border: none;
}

.mfp-arrow-right {
    right: 3rem;
}

.mfp-arrow-right::after {
    content: "\f054";
    font-family: var(--font-awesome);
    color: var(--white-color);
    font-size: 1.5rem;
    -webkit-box-shadow: 0 0 5px 1px rgb(0 0 0 / 7%) !important;
    box-shadow: 0 0 5px 1px rgb(0 0 0 / 7%) !important;
}

.mfp-arrow-right:before {
    border: none;
}


/* News Swiper */

.newsswiper {
	padding-bottom: 2rem;
    padding-top: 0;
}

.newsswiper.swiper-container {
    padding-left: .75rem;
    padding-right: .75rem;
}

.newsswiper .swiper-container-horizontal>.swiper-pagination-bullets,
.newsswiper .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}

.newsswiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: var(--border-radius-06);
    background-color: var(--theme-color-02-25);
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.newsswiper .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--theme-color-01);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}


/* Events Swiper */

.eventsswiper {
	padding-bottom: 2rem;
    padding-top: 0;
}

.eventsswiper.swiper-container {
    padding-left: .75rem;
    padding-right: .75rem;
}

.eventsswiper .swiper-container-horizontal>.swiper-pagination-bullets,
.eventsswiper .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}

.eventsswiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: var(--border-radius-06);
    background-color: var(--theme-color-02-25);
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.eventsswiper .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--theme-color-01);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.eventsviewdetails-02 .nav-tabs .nav-link,
.eventsviewdetails-02 .nav-tabs .nav-link:focus {
    border-color: var(--transparent-color);
    color: var(--black-color-75);
}

.eventsviewdetails-02 .nav-tabs .nav-link:hover {
    border-color: var(--transparent-color);
    color: var(--black-color);
}

.eventsviewdetails-02 .nav-tabs .nav-item.show .nav-link,
.eventsviewdetails-02 .nav-tabs .nav-link.active,
.eventsviewdetails-02 .nav-tabs .nav-item.show .nav-link:hover,
.eventsviewdetails-02 .nav-tabs .nav-link:hover.active {
    color: var(--theme-color-02);
    font-weight: 700;
    background-color: var(--white-color);
    border-color: var(--black-color-15) var(--black-color-15) var(--white-color);
}


/* Awareness Swiper */

.awarenessswiper {
	padding-bottom: 2rem;
    padding-top: 0;
}

.awarenessswiper.swiper-container {
    padding-left: .75rem;
    padding-right: .75rem;
}

.awarenessswiper .swiper-container-horizontal>.swiper-pagination-bullets,
.awarenessswiper .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}

.awarenessswiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: var(--border-radius-06);
    background-color: var(--theme-color-02-25);
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.awarenessswiper .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--theme-color-01);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.awarenessviewdetails-02 .nav-tabs .nav-link,
.awarenessviewdetails-02 .nav-tabs .nav-link:focus {
    border-color: var(--transparent-color);
    color: var(--black-color-75);
}

.awarenessviewdetails-02 .nav-tabs .nav-link:hover {
    border-color: var(--transparent-color);
    color: var(--black-color);
}

.awarenessviewdetails-02 .nav-tabs .nav-item.show .nav-link,
.awarenessviewdetails-02 .nav-tabs .nav-link.active,
.awarenessviewdetails-02 .nav-tabs .nav-item.show .nav-link:hover,
.awarenessviewdetails-02 .nav-tabs .nav-link:hover.active {
    color: var(--theme-color-02);
    font-weight: 700;
    background-color: var(--white-color);
    border-color: var(--black-color-15) var(--black-color-15) var(--white-color);
}


/* Loyalty Swiper */

.loyaltyswiper {
	padding-bottom: 2rem;
    padding-top: 0;
}

.loyaltyswiper.swiper-container {
    padding-left: .75rem;
    padding-right: .75rem;
}

.loyaltyswiper .swiper-container-horizontal>.swiper-pagination-bullets,
.loyaltyswiper .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}

.loyaltyswiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: var(--border-radius-06);
    background-color: var(--theme-color-02-25);
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.loyaltyswiper .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--theme-color-01);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.loyaltyviewdetails-02 .nav-tabs .nav-link,
.loyaltyviewdetails-02 .nav-tabs .nav-link:focus {
    border-color: var(--transparent-color);
    color: var(--black-color-75);
}

.loyaltyviewdetails-02 .nav-tabs .nav-link:hover {
    border-color: var(--transparent-color);
    color: var(--black-color);
}

.loyaltyviewdetails-02 .nav-tabs .nav-item.show .nav-link,
.loyaltyviewdetails-02 .nav-tabs .nav-link.active,
.loyaltyviewdetails-02 .nav-tabs .nav-item.show .nav-link:hover,
.loyaltyviewdetails-02 .nav-tabs .nav-link:hover.active {
    color: var(--theme-color-02);
    font-weight: 700;
    background-color: var(--white-color);
    border-color: var(--black-color-15) var(--black-color-15) var(--white-color);
}


/* Apps Swiper */

.appsswiper {
	padding-bottom: 2rem;
    padding-top: 0;
}

.appsswiper.swiper-container {
    padding-left: .75rem;
    padding-right: .75rem;
}

.appsswiper .swiper-container-horizontal>.swiper-pagination-bullets,
.appsswiper .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}

.appsswiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: var(--border-radius-06);
    background-color: var(--theme-color-02-25);
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.appsswiper .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--theme-color-01);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.appsviewdetails-02 .nav-tabs .nav-link,
.appsviewdetails-02 .nav-tabs .nav-link:focus {
    border-color: var(--transparent-color);
    color: var(--black-color-75);
}

.appsviewdetails-02 .nav-tabs .nav-link:hover {
    border-color: var(--transparent-color);
    color: var(--black-color);
}

.appsviewdetails-02 .nav-tabs .nav-item.show .nav-link,
.appsviewdetails-02 .nav-tabs .nav-link.active,
.appsviewdetails-02 .nav-tabs .nav-item.show .nav-link:hover,
.appsviewdetails-02 .nav-tabs .nav-link:hover.active {
    color: var(--theme-color-02);
    font-weight: 700;
    background-color: var(--white-color);
    border-color: var(--black-color-15) var(--black-color-15) var(--white-color);
}

.intro-img {
    position: relative;
    margin: 0;
    margin-left: -2vw;
    padding: 0;
    height: 100%;
}

/* .intro-img::after {
    content: "";
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/intro-img.webp);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
} */


/* Employees Page Title */

.page-title.page-title-cus {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 50% 50%;
    position: relative;
    text-align: center;
    z-index: 0;
    height: 40vh;
    border-bottom: none;
    border-radius: var(--border-radius-02);
    overflow: hidden;
}

.page-title.page-title-cus::before {
	content: "";
    background-color: var(--black-color-25);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.page-title.page-title-cus .page-title-name {
    position: absolute;
    bottom: 10%;
    width: 100%;
    color: var(--white-color-75);
    z-index: 1;
}

.page-title.page-title-cus .title-home-link {
    display: inline-block;
}

.page-title.page-title-cus .title-home-link i,
.title-page-title .home-link i:focus {
    color: var(--white-color-75);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.page-title.page-title-cus .title-home-link i:hover {
    color: var(--white-color);
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.page-title.page-title-cus .title-home-link::after {
    content: "\f104";
	font-family: var(--font-awesome);
	color: var(--white-color-75);
    position: relative;
    top: 1px;
    margin-right: .5rem;
    margin-left: .25rem;
}

.page-title.page-title-cus .title-page-link,
.page-title.page-title-cus .title-page-link a,
.page-title.page-title-cus .title-page-link a:focus {
    color: var(--white-color-75);
    font-size: .875rem;
	-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.page-title.page-title-cus .title-page-link a:hover {
    color: var(--white-color);
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.page-title.page-title-cus .title-page-link::after {
    content: "\f104";
	font-family: var(--font-awesome);
	color: var(--white-color-75);
    position: relative;
    top: 1px;
    margin-right: .5rem;
    margin-left: .25rem;
}

.page-title.page-title-cus .title-page-name {
    display: inline-block;
    color: var(--white-color);
    font-size: 2rem;
    font-weight: 700;
    display: block;
}

.profile-pic-cus.profile-pic-cus-02 {
    padding-top: 90%;
}

.single-contact {
    border: 1px solid var(--black-color-15);
    border-radius: var(--border-radius-02);
    background-color: var(--white-color);
    padding: 1.25rem 2rem;
    align-items: center;
    position: relative;
}

.single-contact .title {
    color: var(--white-color);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.single-contact .title i {
    height: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    border-radius: 50px;
    background-color: var(--theme-color-02);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.single-contact .icon i {
    color: var(--white-color);
    font-size: 1.25rem;
}

.single-contact .content {
    line-height: 1;
}

.single-contact .content .title-name {
    margin-bottom: 0;
    text-align: center;
}

.single-contact .content .title-name a,
.single-contact .content .title-name a:focus {
    color: var(--black-color);
    line-height: 3rem;
    font-weight: 600;
    font-size: 1.25rem;
}

.single-contact .content .title-name a:hover {
    color: var(--theme-color-01);
}

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

.single-contact.bg-color-01 .title i {
    background-color: var(--white-color);
    color: var(--color-01);
}

.single-contact.bg-color-01 .content .title-name a,
.single-contact.bg-color-01 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-01 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-02 .title i {
    background-color: var(--white-color);
    color: var(--color-02);
}

.single-contact.bg-color-02 .content .title-name a,
.single-contact.bg-color-02 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-02 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-03 .title i {
    background-color: var(--white-color);
    color: var(--color-03);
}

.single-contact.bg-color-03 .content .title-name a,
.single-contact.bg-color-03 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-03 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-04 .title i {
    background-color: var(--white-color);
    color: var(--color-04);
}

.single-contact.bg-color-04 .content .title-name a,
.single-contact.bg-color-04 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-04 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-05 .title i {
    background-color: var(--white-color);
    color: var(--color-05);
}

.single-contact.bg-color-05 .content .title-name a,
.single-contact.bg-color-05 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-05 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-06 .title i {
    background-color: var(--white-color);
    color: var(--color-06);
}

.single-contact.bg-color-06 .content .title-name a,
.single-contact.bg-color-06 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-06 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-07 .title i {
    background-color: var(--white-color);
    color: var(--color-07);
}

.single-contact.bg-color-07 .content .title-name a,
.single-contact.bg-color-07 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-07 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-08 .title i {
    background-color: var(--white-color);
    color: var(--color-08);
}

.single-contact.bg-color-08 .content .title-name a,
.single-contact.bg-color-08 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-08 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-09 .title i {
    background-color: var(--white-color);
    color: var(--color-09);
}

.single-contact.bg-color-09 .content .title-name a,
.single-contact.bg-color-09 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-09 .content .title-name a:hover {
    color: var(--white-color-75);
}

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

.single-contact.bg-color-10 .title i {
    background-color: var(--white-color);
    color: var(--color-10);
}

.single-contact.bg-color-10 .content .title-name a,
.single-contact.bg-color-10 .content .title-name a:focus {
    color: var(--white-color);
}

.single-contact.bg-color-10 .content .title-name a:hover {
    color: var(--white-color-75);
}


/* Card Knowledge */

.card-knowledge {
    background-color: var(--main-color-01);
    color: var(--white-color);
    font-size: .75rem;
}

.table-knowledge .action-cus {
    width: 25%;
    min-width: 25%;
}

.tree, .tree ul {
    list-style: none;
    margin: 0 0 0 .75rem;
    padding-right: 1rem;
    border-right: 1px dashed var(--white-color-75);
    border-left: none;
    direction: rtl;
}

.tree li {
    position: relative;
    margin: .25rem 0;
}

.tree li::before {
    content: "";
    position: absolute;
    right:-1rem;
    top: .9em;
    width: 1rem;
    border-top:1px dashed var(--white-color-75);
}

.node {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    direction: rtl;
}

.node i {
    color: var(--white-color);
    font-size: 1rem;
    transition: color .2s ease;
}

.node:hover i {
    color: var(--white-color);
}


/* Light & Dark Theme */

body.lighttheme header .light-theme {
  display: none;
}

body.darktheme header .dark-theme {
  display: none;
}

body.darktheme {
	--transparent-color: #ffffff00;
	
    --white-color: #1e1e2d;
	--white-color-15: #1e1e2d26;
	--white-color-25: #1e1e2d40;
	--white-color-50: #1e1e2d80;
	--white-color-75: #1e1e2dbf;
	
    --black-color: #ffffff;
    --black-color-10: #ffffff1a;
	--black-color-15: #ffffff26;
	--black-color-25: #ffffff40;
	--black-color-50: #ffffff80;
	--black-color-75: #ffffffbf;

    --theme-color-01: #06412b;
	--theme-color-01-15: #06412b26;
	--theme-color-01-25: #06412b40;
	--theme-color-01-50: #06412b80;
	--theme-color-01-75: #06412bbf;
	
    --theme-color-02: #00754a;
	--theme-color-02-15: #00754a26;
	--theme-color-02-25: #00754a40;
	--theme-color-02-50: #00754a80;
	--theme-color-02-75: #00754abf;
	
	--theme-color-03: #f37544;
	--theme-color-03-15: #f3754426;
	--theme-color-03-25: #f3754440;
	--theme-color-03-50: #f3754480;
	--theme-color-03-75: #f37544bf;

	--gray-color: #151521;
    --gray-color-25: #55555540;
    --gray-color-50: #55555580;
    --gray-color-75: #555555bf;
	
	--red-color: #b41e1e;
	--red-color-25: #b41e1e40;
	
	--green-color: #40afe1;
	--yellow-color: #f37544;

    --color-02-bg: #9dab07;
    --color-02-bg-50: #9dab0780;

    --color-03-bg: #ab5307;
    --color-03-bg-50: #ab530780;

    --color-04-bg: #d9e458;
    --color-04-bg-50: #d9e45880;

    --color-05-bg: #ab078d;
    --color-05-bg-50: #ab078d80;

    --color-06-bg: #5007ab;
    --color-06-bg-50: #5007ab80;

    --color-07-bg: #0777ab;
    --color-07-bg-50: #0777ab80;

    --color-001: #35312c;
    --color-002: #1f211f;
    --color-003: #343639;
    --color-004: #37343b;

    --color-01: #1877F2;
    --color-02: #fa7e1e;
    --color-03: #9ba1a8;
    --color-04: #0077b5;
    --color-05: #fe2c55;
    --color-06: #ff0000;
    --color-07: #065cab;
    --color-08: #1a7d36;
    --color-09: #075e54;
	--color-10: #b41e1e;

    --main-color-01: #102b21;

}

.darktheme header .dropdown-toggle,
.darktheme header .dropdown-toggle:focus {
    color: var(--black-color);
}

.darktheme header .dropdown-toggle:hover {
	color: var(--black-color-75);
}

.darktheme .page-title.page-title-cus::before {
    background-color: var(--white-color-25);
}

.darktheme footer {
    color: var(--black-color);
}

.darktheme .black-color-bg,
.darktheme .black-color-bg:focus {
	color: var(--black-color);
}

.darktheme .black-color-bg:hover {
	color: var(--black-color);
}

.darktheme .red-color-bg,
.darktheme .red-color-bg:focus {
	color: var(--black-color);
}

.darktheme .red-color-bg:hover {
	color: var(--black-color);
}

.darktheme .theme-color-02-bg,
.darktheme .theme-color-02-bg:focus {
	color: var(--black-color);
}

.darktheme .theme-color-02-bg:hover {
	color: var(--black-color);
}

.darktheme .green-color-bg,
.darktheme .green-color-bg:focus {
    color: var(--black-color);
}

.darktheme .green-color-bg:hover {
	color: var(--black-color);
}

.darktheme .theme-color-03-bg,
.darktheme .theme-color-03-bg:focus {
	color: var(--black-color);
}

.darktheme .theme-color-03-bg:hover {
	color: var(--black-color);
}

.darktheme .page-title.page-title-cus .page-title-name {
    color: var(--black-color-75);
}

.darktheme .page-title.page-title-cus .title-home-link i,
.darktheme .title-page-title .home-link i:focus {
    color: var(--black-color-75);
}

.darktheme .page-title.page-title-cus .title-home-link i:hover {
    color: var(--black-color);
}

.darktheme .page-title.page-title-cus .title-home-link::after {
	color: var(--black-color-75);
}

.darktheme .page-title.page-title-cus .title-page-link,
.darktheme .page-title.page-title-cus .title-page-link a,
.darktheme .page-title.page-title-cus .title-page-link a:focus {
    color: var(--black-color-75);
}

.darktheme .page-title.page-title-cus .title-page-link a:hover {
    color: var(--black-color);
}

.darktheme .page-title.page-title-cus .title-page-link::after {
	color: var(--black-color-75);
}

.darktheme .page-title.page-title-cus .title-page-name {
    color: var(--black-color);
}

.darktheme .modal-backdrop {
    background-color: var(--white-color-75);
}

.darktheme .model-frameless .btn-close,
.darktheme .model-frameless .btn-close:focus {
    color: var(--black-color);
}

.darktheme .model-frameless .btn-close::after {
    color: var(--black-color);
}

.darktheme .theme-color-01-bg,
.darktheme .theme-color-01-bg:focus {
    color: var(--black-color);
}

.darktheme .isotope.isotope-cus a::before {
    color: var(--black-color);
}

.darktheme .isotope.isotope-cus a::after {
    background-color: var(--white-color-25);
}

.darktheme .single-contact .title {
    color: var(--black-color);
}

.darktheme .single-contact.bg-color-01 .title i,
.darktheme .single-contact.bg-color-02 .title i,
.darktheme .single-contact.bg-color-03 .title i,
.darktheme .single-contact.bg-color-04 .title i,
.darktheme .single-contact.bg-color-05 .title i,
.darktheme .single-contact.bg-color-06 .title i,
.darktheme .single-contact.bg-color-07 .title i,
.darktheme .single-contact.bg-color-08 .title i,
.darktheme .single-contact.bg-color-09 .title i,
.darktheme .single-contact.bg-color-10 .title i {
    background-color: var(--black-color);
}

.darktheme .single-contact.bg-color-01 .content .title-name a,
.darktheme .single-contact.bg-color-01 .content .title-name a:focus,
.darktheme .single-contact.bg-color-02 .content .title-name a,
.darktheme .single-contact.bg-color-02 .content .title-name a:focus,
.darktheme .single-contact.bg-color-03 .content .title-name a,
.darktheme .single-contact.bg-color-03 .content .title-name a:focus,
.darktheme .single-contact.bg-color-04 .content .title-name a,
.darktheme .single-contact.bg-color-04 .content .title-name a:focus,
.darktheme .single-contact.bg-color-05 .content .title-name a,
.darktheme .single-contact.bg-color-05 .content .title-name a:focus,
.darktheme .single-contact.bg-color-06 .content .title-name a,
.darktheme .single-contact.bg-color-06 .content .title-name a:focus,
.darktheme .single-contact.bg-color-07 .content .title-name a,
.darktheme .single-contact.bg-color-07 .content .title-name a:focus,
.darktheme .single-contact.bg-color-08 .content .title-name a,
.darktheme .single-contact.bg-color-08 .content .title-name a:focus,
.darktheme .single-contact.bg-color-09 .content .title-name a,
.darktheme .single-contact.bg-color-09 .content .title-name a:focus,
.darktheme .single-contact.bg-color-10 .content .title-name a,
.darktheme .single-contact.bg-color-10 .content .title-name a:focus {
    color: var(--black-color);
}

.darktheme .single-contact.bg-color-01 .content .title-name a:hover,
.darktheme .single-contact.bg-color-02 .content .title-name a:hover,
.darktheme .single-contact.bg-color-03 .content .title-name a:hover,
.darktheme .single-contact.bg-color-04 .content .title-name a:hover,
.darktheme .single-contact.bg-color-05 .content .title-name a:hover,
.darktheme .single-contact.bg-color-06 .content .title-name a:hover,
.darktheme .single-contact.bg-color-07 .content .title-name a:hover,
.darktheme .single-contact.bg-color-08 .content .title-name a:hover,
.darktheme .single-contact.bg-color-09 .content .title-name a:hover,
.darktheme .single-contact.bg-color-10 .content .title-name a:hover {
    color: var(--black-color-75);
}

.darktheme .card-knowledge {
    color: var(--black-color);
}

.darktheme .tree,
.darktheme .tree ul {
    border-right: 1px dashed var(--black-color-75);
}

.darktheme .tree li::before {
    border-top: 1px dashed var(--black-color-75);
}

.darktheme .node i {
    color: var(--black-color);
}

.darktheme .node:hover i {
    color: var(--black-color);
}


/****** Article contint ******/

.article-cont {
    position: relative;
    margin-bottom: 3rem;
    display: inline-block;
    width: 100%;
}

.article-cont h2,
.article-cont h3,
.article-cont h4 {
    margin-bottom: 1rem;
}

.article-cont p {
    color: var(--black-color);
}

.article-cont ul,
.article-cont ol {
    padding-left: 1.25rem;
}

.article-cont ul li {
    list-style: disc;
}

.article-cont ol li {
    list-style: auto;
}

.article-cont p a,
.article-cont p a:focus {
    font-weight: 600;
    color: var(--theme-color-02);
    border-bottom: 1px solid var(--theme-color-02);
}

.article-cont p a:hover {
    color: var(--theme-color-02);
    border-bottom: 1px solid var(--theme-color-02);
}

.article-cont ul a,
.article-cont ul a:focus,
.article-cont ol a,
.article-cont ol a:focus,
.article-cont ul li a,
.article-cont ul li a:focus,
.article-cont ol li a,
.article-cont ol li a:focus {
    font-weight: 600;
    color: var(--theme-color-02);
    border-bottom: 1px solid var(--theme-color-02);
}

.article-cont ul a:hover,
.article-cont ol a:hover,
.article-cont ul li a:hover,
.article-cont ol li a:hover {
    color: var(--dark-color);
    border-bottom: 1px solid var(--dark-color);
}

.article-cont .video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--border-radius-01);
    margin-bottom: 1rem;
    overflow: hidden;
  }

.article-cont .video-container .iframe-cus {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;	
}

.article-cont .article-cont-img {
    overflow: hidden;
    border-radius: var(--border-radius-01);
}

.article-cont .article-cont-link,
.article-cont .article-cont-link:focus {
    color: var(--black-color);
    border-bottom: 1px solid var(--black-color);
}

.article-cont .article-cont-link:hover {
    color: var(--theme-color-01);
    border-bottom: 1px solid var(--theme-color-01);
}

@media (max-width: 576px) {
    .article-cont {
        margin-bottom: 2rem;
    }
}


/****** Pagination ******/

.search-cus.pagination .page-link,
.search-cus.pagination .page-link:focus {
    position: relative;
    display: block;
    font-size: .9375rem;
    color: var(--black-color);
    text-decoration: none;
    background-color: var(--transparent-color);
    border: 1px solid var(--transparent-color);
    border-radius: var(--border-radius-01);
    margin-left: .5rem !important;
    margin-right: .5rem !important;
    padding-left: 0;
    padding-right: 0;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 1.875 !important;
    text-align: center;
    transition: none;
    transition: all .5s ease-in-out;
}

.search-cus.pagination .page-link:hover,
.search-cus.pagination .page-item.active .page-link {
    color: var(--white-color);
    text-decoration: none;
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    transition: all .5s ease-in-out;
}

.search-cus.pagination .page-item:first-child .page-link,
.search-cus.pagination .page-item:first-child .page-link:focus {
    border-radius: var(--border-radius-01);
    background-color: var(--white-color);
    color: var(--black-color);
    box-shadow: 0 2px 5px var(--black-color-15) !important;
}

.search-cus.pagination .page-item:first-child .page-link:hover {
    border-radius: var(--border-radius-01);
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    color: var(--white-color);
}

.search-cus.pagination .page-item:last-child .page-link,
.search-cus.pagination .page-item:last-child .page-link:focus {
    border-radius: var(--border-radius-01);
    background-color: var(--white-color);
    color: var(--black-color);
    box-shadow: 0 2px 5px var(--black-color-15) !important;
}

.search-cus.pagination .page-item:last-child .page-link:hover {
    border-radius: var(--border-radius-01);
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
    color: var(--white-color);
}

.search-cus.pagination .page-item.disabled .page-link {
    opacity: .5;
    pointer-events: none;
}

.search-cus.pagination .page-item.disabled .page-link.page-link-cus {
    opacity: .75;
    pointer-events: none;
    background-color: var(--transparent-color);
    border: none;
    width: 1rem;

}

@media (max-width: 576px) {
    .search-cus.pagination .page-link,
    .search-cus.pagination .page-link:focus {
        font-size: .75rem;
        margin-left: .125rem !important;
        margin-right: .125rem;
        width: 1.75rem;
        height: 1.75rem;
        line-height: 1.25 !important;
    }
}