/* ***************************************************
** Theme Name: SALLA
** Theme URI: https://
** Description:
** Author: Ahmed EL-AwaDy
** Author URI:
** Author Mobile:
** Version: 1.0
****************************************************** */
/*scrollbar theme*/
:root {
--main-color: #004956;
--secondary-color: #baf3e6;
--main-color-light: #01939b;
--red-color: #d90303;
--light-gray-color: #f6f6f6;
--dark-gray-color: #505050;
--gray-color: #a0a0a0;
--black-color: #000;
--white-color: #fff;
--green-color: #17B40A;
--light-font-ar: "Cairo-Light-Ar";
--medium-font-ar: "Cairo-Medium-Ar";
--bold-font-ar: "Cairo-Bold-Ar";
--black-font-ar: "Cairo-Black-Ar";
--filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(275deg) brightness(106%) contrast(101%);
--filter-main: brightness(0) saturate(100%) invert(23%) sepia(10%) saturate(5875%) hue-rotate(149deg) brightness(92%) contrast(101%);
}
.dark_mode {
--main-color: #004956;
--secondary-color: #000;
--main-color-light: #01939b;
--red-color: #d90303;
--light-gray-color: #f6f6f6;
--dark-gray-color: #505050;
--gray-color: #a0a0a0;
--black-color: #000;
--white-color: #000;
--green-color: #17B40A;
--light-font-ar: "Cairo-Light-Ar";
--medium-font-ar: "Cairo-Medium-Ar";
--bold-font-ar: "Cairo-Bold-Ar";
--black-font-ar: "Cairo-Black-Ar";
}
::-webkit-scrollbar {
width: 2px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb:hover {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-image: none;
}
body {
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: var(--secondary-color) !important;
}
&::-webkit-scrollbar-thumb {
background: var(--main-color) !important;
opacity: .5;
}
&::-webkit-scrollbar-thumb:hover {
background: var(--main-color) !important;
opacity: 1;
}
}
::-webkit-input-placeholder {
color: var(--gray-color);
}
:-ms-input-placeholder {
color: var(--gray-color);
}
::placeholder {
color: var(--gray-color);
}
button {
background: transparent;
outline: none;
box-shadow: none;
border: 0;
}
.bg-gray {
background-color: #edefef;
}
@font-face {
font-family: "Cairo-Light-Ar";
src: url("../../fonts/ar/Cairo-Regular.ttf");
}
@font-face {
font-family: "Cairo-Medium-Ar";
src: url("../../fonts/ar/Cairo-SemiBold.ttf");
}
@font-face {
font-family: "Cairo-Bold-Ar";
src: url("../../fonts/ar/Cairo-Bold.ttf");
}
@font-face {
font-family: "Cairo-Black-Ar";
src: url("../../fonts/ar/Cairo-black.ttf");
}
::-moz-selection {
background: rgba(166, 175, 189, 0.3);
}
::selection {
background: rgba(166, 175, 189, 0.3);
}
html {
scroll-behavior: smooth;
}
* {
-webkit-font-smoothing: antialiased;
-moz-os-font-smoothing: grayscale;
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
vertical-align: baseline;
/* */
font-size: 1rem;
transition: all 200ms ease-in-out;
}
p {
color: #494949;
}
a {
text-decoration: none !important;
color: var(--secondary-color);
font-family: var(--medium-font-ar);
}
a:hover {
color: var(--main-color);
opacity: 1 !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
img {
max-width: 100%;
}
body {
font-family: var(--light-font-ar);
font-weight: 400;
font-style: normal;
line-height: 1;
font-size: 17px;
outline: none;
overflow-x: hidden;
text-align: start;
direction: rtl;
}
main {
padding-top: 5rem;
}
section {
padding-block: 70px;
overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--bold-font-ar);
margin: 0;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.page_loader {
width: 100%;
height: 100vh;
background-color: var(--white-color);
z-index: 9999999999999999;
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.page_loader .logo {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 90px;
width: 90px;
}
.page_loader .logo img {
width: 50px;
margin: 0 auto;
animation: loader 1.5s linear infinite;
}
.page_loader .logo::before {
content: "";
background-image: url(../../images/icons/circle.svg);
width: 90px;
height: 90px;
background-repeat: no-repeat;
position: absolute;
background-size: 90px;
background-position: center;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
animation: spin 1.5s linear infinite;
}
@keyframes loader {
0% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
.btn-animation-1 {
width: 120px;
padding: 5px 1rem;
border-radius: 5px;
border: 0px solid transparent;
box-shadow: none !important;
background-color: var(--secondary-color);
font-size: 1rem;
font-family: var(--bold-font-ar);
color: var(--main-color);
overflow: hidden;
height: 50px;
position: relative;
isolation: isolate;
}
.btn-animation-1::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -100%;
background-color: var(--main-color);
width: 100%;
height: 100%;
transition: all 200ms ease-in-out;
z-index: -1;
}
.btn-animation-1:hover::before {
bottom: 0;
}
.btn-animation-1:hover {
color: var(--white-color);
}
.btn-animation-2 {
width: 120px;
padding: 5px 1rem;
border-radius: 5px;
border: 0px solid transparent;
box-shadow: none !important;
background-color: var(--main-color);
font-size: 1rem;
font-family: var(--bold-font-ar);
color: var(--white-color);
overflow: hidden;
height: 50px;
position: relative;
isolation: isolate;
}
.btn-animation-2::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -100%;
background-color: var(--secondary-color);
width: 100%;
height: 100%;
transition: all 200ms ease-in-out;
z-index: -1;
}
.btn-animation-2:hover::before {
bottom: 0;
}
.btn-animation-2:hover {
color: var(--main-color);
}
.btn-animation-3 {
width: 120px;
padding: 5px 1rem;
border-radius: 5px;
border: 0px solid transparent;
box-shadow: none !important;
background-color: rgb(0 73 86 / 10%);
font-size: 1rem;
font-family: var(--bold-font-ar);
color: var(--main-color);
overflow: hidden;
height: 50px;
position: relative;
isolation: isolate;
}
.btn-animation-3::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -100%;
background-color: var(--white-color);
color: var(--main-color);
width: 100%;
height: 100%;
transition: all 200ms ease-in-out;
z-index: -1;
}
.btn-animation-3:hover::before {
bottom: 0;
}
.btn-animation-3:hover {
color: var(--main-color);
}
/**
* Animation: Ripple
* --------------------------------------------------
*/
@-webkit-keyframes a-ripple {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
@keyframes a-ripple {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
.c-ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
z-index: 2;
}
.c-ripple__circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.c-ripple.is-active .c-ripple__circle {
-webkit-animation: a-ripple 0.4s ease-in;
animation: a-ripple 0.4s ease-in;
}
.btn-animation-2 img {
margin-inline-end: 10px;
}
.btn-animation-2:hover img {
filter: invert(61%) sepia(62%) saturate(7283%) hue-rotate(157deg) brightness(90%) contrast(99%);
}
.text-gradient {
background: -webkit-linear-gradient(45deg,
var(--main-color),
var(--secondary-color) 130%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.cursor-help {
cursor: help;
}
/* START:: HEADER STYLE */
header {
padding-block: 1rem;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);
position: fixed;
top: 0;
width: 100%;
/* height: 100%; */
background-color: var(--white-color);
z-index: 99999;
}
header .site_logo {}
header .site_logo img {}
header .navbar {
padding: 0;
display: flex;
align-items: center;
width: 100%;
}
header .navbar ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
header .navbar ul li {}
header .navbar ul li a {
color: var(--main-color);
position: relative;
padding-inline: 0.5rem;
overflow: hidden;
}
header .navbar ul li a::before {
content: "";
height: 3px;
width: 50%;
position: absolute;
right: -1rem;
background-color: transparent;
transition: all 0.3s ease-in-out;
bottom: -0.5rem;
}
header .navbar ul li a::after {
content: "";
height: 3px;
width: 50%;
position: absolute;
left: -1rem;
background-color: transparent;
transition: all 0.3s ease-in-out;
bottom: -0.5rem;
}
header .navbar ul li a.active,
header .navbar ul li a:hover {
color: var(--black-color);
}
header .navbar ul li a.active::before,
header .navbar ul li a:hover::before {
right: 0;
background-color: var(--main-color);
}
header .navbar ul li a.active::after,
header .navbar ul li a:hover::after {
left: 0;
background-color: var(--main-color);
}
header .actions_header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
header .actions_header li {}
header .actions_header li a {}
header .actions_header li a i {
font-size: 1.2rem;
color: #969696;
}
header .actions_header li button i.fa-search {
color: var(--main-color);
}
header .actions_header li .dropdown-toggle-custom.show i {
color: var(--main-color);
}
header .actions_header li .dropdown-menu-notifications {
min-width: 500px;
box-shadow: 0px 0px 6px 5px rgb(0 0 0 / 4%);
border: 0;
text-align: start;
width: 500px;
z-index: 9;
padding-bottom: 60px;
transform: translate(0px, 85px) !important;
margin: auto !important;
/* opacity: 0; */
padding-top: 0;
}
header .actions_header li .dropdown-menu-notifications.show {
transform: translate(0px, 55px) !important;
}
header .actions_header li button i.fa-search.search-2 {
color: #969696;
}
header .actions_header li a.profile {
display: block;
}
header .actions_header li a.profile img {
width: 40px;
height: 40px;
border-radius: 50%;
}
header .actions_header li a svg.fa-bookmark {
color: #969696;
}
.tooltip {
z-index: 99999999;
font-family: var(--medium-font-ar);
}
.tooltip-arrow {
transition: all 0s ease-in-out !important;
}
.tooltip .tooltip-inner {
background-image: linear-gradient(45deg,
var(--main-color) 50%,
var(--secondary-color) 90%);
background-color: transparent;
}
.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: var(--main-color);
}
/* END:: HEADER STYLE */
/* START:: AUTHENTICATION */
.authentication_section {
position: relative;
padding: 0;
background-color: var(--secondary-color);
height: 100vh;
}
.authentication_section .authentication_bg {
position: relative;
background-color: var(--white-color);
border-top-left-radius: 60px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 60px;
}
.authentication_section .page_reverse .authentication_bg {
border-top-left-radius: 0;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 0;
}
.authentication_section .authentication_bg.authentication_bg_v {
position: relative;
background-color: var(--secondary-color);
border-radius: 0;
isolation: isolate;
}
.authentication_section .authentication_bg.authentication_bg_v::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 75vh;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 60px;
background-color: var(--white-color);
z-index: -1;
}
/* .authentication_section .authentication_bg.authentication_bg_v::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 25vh;
background-color: var(--secondary-color);
z-index: -2;
} */
.authentication_card {
box-shadow: 0px 4px 35px 0px #00000014;
padding: 3.5rem 3rem;
border-radius: 40px;
max-height: 85vh;
overflow-y: hidden;
background-color: var(--white-color);
min-height: 70vh;
}
.authentication_card .authentication_title {}
.authentication_card .authentication_title img {
margin-bottom: 3rem;
}
.authentication_card .authentication_title h3 {
font-size: 1.3rem;
font-family: var(--bold-font-ar);
}
.authentication_card .authentication_title p {
color: var(--gray-color);
line-height: 2rem;
margin-top: 1rem;
}
.authentication_form {
margin-top: 2rem;
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden;
}
.authentication_form .form-group {
margin-bottom: 2rem;
}
.card-size {
width: 580px;
}
.authentication_form .form-group input {
background-color: transparent;
border: 1px solid var(--light-gray-color);
outline: none !important;
height: 50px;
border-radius: 6px;
padding-inline-end: 80px;
}
.authentication_form .form-group input:focus {
color: #212529;
border-color: var(--secondary-color);
outline: 0;
box-shadow: 0 0 0 0.25rem rgb(186 243 230 / 35%);
}
.authentication_form .form-group input::-webkit-input-placeholder {
color: var(--gray-color);
}
.authentication_form .form-group input:-ms-input-placeholder {
color: var(--gray-color);
}
.authentication_form .form-group input::placeholder {
color: var(--gray-color);
}
.authentication_form .form-group textarea {
background-color: #f8f8f9;
border: 1px solid #dadbdb;
outline: none !important;
box-shadow: 0px 2px 4px rgb(0 0 0 / 25%) !important;
height: 220px !important;
resize: none;
}
.authentication_form .form-group select {
padding-inline-end: 2rem;
padding-inline-start: 1rem;
background-position: left 1rem center !important;
/* background-size: contain; */
background-color: transparent;
border: 1px solid var(--light-gray-color);
outline: none !important;
height: 50px;
border-radius: 6px;
box-shadow: none !important;
}
.authentication_form .form-group label {
color: var(--dark-gray-color);
font-family: var(--medium-font-ar);
margin-bottom: 1rem;
font-size: 1rem;
}
.authentication_form .form-group label small {
color: var(--red-color);
}
.authentication_form .submit_btn {
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
}
.authentication_form .reset-password {
display: flex;
align-items: center;
justify-content: space-between;
}
.authentication_form .reset-password a {
color: var(--dark-gray-color);
font-size: 0.9rem;
font-family: var(--medium-font-ar);
}
.authentication_form .reset-password a:hover {
color: var(--main-color);
}
.authentication_form .register-text {
text-align: center;
color: var(--dark-gray-color);
margin-top: 2rem;
font-family: var(--medium-font-ar);
}
.authentication_form .reset-password label a {
color: var(--main-color);
text-decoration: underline !important;
font-size: 1rem;
margin-inline-start: 0.2rem;
}
.authentication_form .register-text a {
color: var(--main-color);
font-size: 1rem;
font-family: var(--medium-font-ar);
}
#hide_eye,
#hide_eye2 {
display: none;
}
.show_hide {
position: absolute;
left: 1rem;
top: 1rem;
cursor: pointer;
}
.show_hide i {
color: #a5aba2;
font-size: 1.2rem;
}
.authentication_form .form-check {
padding: 0;
display: flex;
align-items: center;
}
.authentication_form .form-check label {
display: block;
border-radius: 4px;
font-family: var(--medium-font-ar);
cursor: pointer;
-webkit-user-select: none;
/* Safari */
-ms-user-select: none;
/* IE 10 and IE 11 */
user-select: none;
/* Standard syntax */
}
.authentication_form .form-check-input {
float: none;
margin: 0;
border: 2px solid var(--main-color);
width: 22px;
height: 22px;
margin-inline-end: 0.5rem;
background-size: 15px;
background-position: center;
box-shadow: none !important;
}
.authentication_form .form-check-input:checked {
background-color: var(--main-color);
background-size: 20px;
}
.authentication_form .form-switch .form-check-input {
width: 48px;
height: 26px;
}
form.registration-form fieldset {
display: none;
}
.prev-image {
margin-bottom: 2rem;
}
.prev-image .prev-image-label {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
input {
width: 76px;
height: 76px;
position: absolute;
inset: 0;
margin: 0 auto;
}
}
/* .prev-image .prev-image-label img {
width: 76px;
height: 76px;
background-image: url('data:image/svg+xml,');
background-size: 24px 24px;
background-repeat: no-repeat;
border-radius: 10px;
cursor: pointer;
object-fit: cover;
object-position: top;
background-color: #e3faf5;
border: 1px dashed var(--secondary-color);
background-position: center;
} */
.prev-image .prev-image-label .btn_and_hint {
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
position: relative;
width: 76px;
height: 76px;
background-image: url('data:image/svg+xml,');
background-size: 24px 24px;
background-repeat: no-repeat;
border-radius: 10px;
cursor: pointer;
object-fit: cover;
object-position: top;
background-color: #e3faf5;
border: 1px dashed var(--secondary-color);
background-position: center;
}
.prev-image .prev-image-label .btn_and_hint .remove_image i {
color: var(--white-color);
margin: 0;
}
.prev-image .prev-image-label .btn_and_hint .remove_image {
display: none;
width: 24px;
height: 24px;
background-color: var(--red-color);
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
}
.prev-image .prev-image-label .btn_and_hint span {
width: max-content;
padding: 1rem;
cursor: pointer;
margin-bottom: 1rem;
}
.prev-image .prev-image-label .btn_and_hint p {
color: rgba(0, 0, 0, 0.4);
font-size: 0.9rem;
font-family: var(--bold-font-ar);
}
.head_wizard_form {
margin-bottom: 5rem;
}
.head_wizard_form h3 {
margin-bottom: 1rem;
color: var(--black-color);
font-size: 1.8rem;
font-family: var(--black-font-ar);
}
.head_wizard_form p {
color: #6b6060;
margin: 0;
font-family: var(--bold-font-ar);
}
.authentication_form.authentication_form_custom .form-group {}
.prev-image label input.invalid+.image_validate {
border: 1px solid red !important;
}
.authentication_form.authentication_form_custom .form-group input,
.authentication_form.authentication_form_custom .form-group select {
background-color: transparent;
border-radius: 4px;
border: 0;
}
.authentication_form.authentication_form_custom .form-group input.invalid {
border: 1px solid red;
}
.authentication_form.authentication_form_custom .form-group textarea {
background-color: transparent;
}
.steps_dots {
border-bottom: 1px solid rgb(160 160 160 / 25%);
padding-bottom: 1.2rem;
}
.steps_dots p {
color: var(--gray-color);
margin-top: 2rem;
font-size: 0.9rem;
margin-bottom: 0;
}
.steps_dots ul {
display: flex;
align-items: center;
}
.steps_dots ul li {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: var(--medium-font-ar);
font-size: 0.9rem;
position: relative;
}
.steps_dots ul li small {
color: var(--gray-color);
}
.steps_dots ul li.active small {
color: var(--main-color);
}
.steps_dots ul li span {
width: 35px;
height: 35px;
background: rgb(0 73 86 / 15%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--main-color);
font-family: var(--bold-font-ar);
margin-bottom: 1rem;
transition: all 500ms ease-in-out;
border: 2px solid var(--main-color);
}
.steps_dots ul li small {
font-size: 0.9rem;
}
.steps_dots ul li::after {
content: "";
width: 75px;
background-image: url("../../images/icons/dashed.svg");
background-position: center left;
background-size: 75px;
position: absolute;
left: -38px;
top: 17px;
transition: all 500ms ease-in-out;
height: 4px;
background-repeat: repeat-x;
}
.steps_dots ul li.active::after {
background-image: url("../../images/icons/dashed_color.svg");
}
.steps_dots ul li:last-child:after {
display: none;
}
.steps_dots ul li.active span,
.steps_dots ul li.finish span {
border-color: var(--secondary-color);
background-color: var(--secondary-color);
display: flex;
align-items: center;
}
.steps_dots ul li.finish::after {
background: linear-gradient(239.11deg,
var(--secondary-color) -31.67%,
var(--main-color) 192.97%);
}
.steps_dots ul li.finish small {
background: -webkit-linear-gradient(45deg,
var(--main-color),
var(--secondary-color) 130%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.steps_dots ul li span img {
margin: 0 !important;
}
#regForm .tab {
display: none;
}
#regForm .tab .single_check {
width: 14.666667%;
}
#regForm .tab .single_check label {
width: 100%;
height: 110px;
box-shadow: 0px 2px 4px rgb(0 0 0 / 25%) !important;
border-radius: 5px;
border: 0;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-family: var(--black-font-ar);
color: var(--black-color);
cursor: pointer;
}
#regForm .tab .single_check input:checked+label {
background: linear-gradient(239.11deg, #4ad7cf -31.67%, #344892 192.97%);
color: var(--white-color);
transition: all 500ms ease-in-out;
}
.btn-group-custom {
display: flex;
align-items: center;
justify-content: space-between;
}
.title_tab {
text-align: center;
margin-block: 5rem;
}
.title_tab h3 {
color: var(--black-color);
font-size: 1.2rem;
}
.title_tab h2 {
background: -webkit-linear-gradient(45deg,
var(--main-color),
var(--secondary-color) 130%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin-top: 2rem;
}
.breadcrumb {
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
margin-top: 2rem;
}
.breadcrumb ul {
display: flex;
align-items: center;
justify-content: center;
}
.breadcrumb ul li {
margin-inline-end: 1rem;
color: var(--main-color);
}
.breadcrumb ul li a {
color: var(--main-color);
}
.breadcrumb p {
margin: 0;
margin-top: 1.5rem;
}
.breadcrumb ul li:last-child a {
color: var(--secondary-color);
}
.content_page {}
.content_page .sidebar_support {}
.content_page .title_content {}
.content_page .title_content h2 {
font-size: 1.3rem;
color: var(--black-color);
margin-bottom: 2rem;
}
.content_page .sidebar_support ul {}
.content_page .sidebar_support ul li {
margin-bottom: 2rem;
}
.content_page .sidebar_support ul li a {
color: var(--black-color);
display: flex;
align-items: center;
}
.content_page .sidebar_support ul li a i {
margin-inline-end: 1rem;
font-size: 1.2rem;
}
.content_page .sidebar_support ul li a.active {
color: var(--main-color);
}
.content_page .sidebar_support ul li a:hover {
color: var(--main-color);
}
.data_table {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: var(--white-color);
padding: 3rem 1rem 1rem;
overflow: hidden;
}
.dataTables_length {
display: inline-block;
float: left;
margin-bottom: 1rem;
}
.dataTables_filter {
float: right;
display: inline-block;
margin-bottom: 1rem;
}
.data_table .dataTables_filter input {
border-radius: 4px;
border: 1px solid;
color: var(--main-color);
border-color: var(--main-color);
padding: 0.3rem 1rem;
}
.data_table div.dataTables_wrapper div.dataTables_length select {
border-radius: 4px;
color: var(--main-color);
border-color: var(--main-color);
padding: 0.3rem 1rem;
color: var(--main-color) !important;
font-family: var(--bold-font-ar);
text-align: center;
}
.data_table table.dataTable>thead>tr {
border-color: #9ea29c !important;
}
.data_table table.dataTable>tbody>tr {
background-color: transparent;
border-color: #9ea29c;
}
.data_table table.dataTable td,
.data_table table.dataTable th {
padding-block: 1.5rem;
text-align: start;
}
.data_table table.dataTable thead>tr>th.sorting:before {
/* top: 50%; */
right: 90%;
}
.data_table table thead tr th {
color: var(--main-color) !important;
font-family: var(--bold-font-ar);
}
.data_table table.dataTable thead>tr>th.sorting::after {
top: 60%;
right: 90%;
}
.data_table table.dataTable thead>tr>th.sorting {
padding-inline: 1rem 2rem;
}
.data_table div.dataTables_wrapper div.dataTables_filter input {
margin-inline-start: 1rem;
}
.data_table div.dataTables_wrapper div.dataTables_filter {
color: var(--main-color) !important;
font-family: var(--bold-font-ar);
}
.data_table div#dataTable_info {
display: inline-block;
padding-block: 1rem;
float: left;
margin-top: 1rem;
color: var(--main-color);
font-family: var(--bold-font-ar);
font-size: 0.9rem;
}
.data_table div#dataTable_paginate {
float: right;
display: flex;
align-items: center;
padding-block: 1rem;
}
.data_table div#dataTable_paginate span a {
border: 1px solid;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-inline: 0.5rem;
border-radius: 50%;
color: var(--main-color);
border: 1px solid var(--main-color);
font-family: var(--bold-font-ar);
cursor: pointer;
}
.data_table div#dataTable_paginate span a.current {
background: linear-gradient(239.11deg, #4ad7cf -31.67%, #344892 192.97%);
}
.data_table div#dataTable_paginate span a.current {
border: 1px solid transparent;
color: var(--white-color) !important;
}
.data_table div#dataTable_paginate span a:hover {
background: linear-gradient(239.11deg, #4ad7cf -31.67%, #344892 192.97%);
border: 1px solid transparent;
color: #fff;
}
.data_table div#dataTable_paginate span {
display: flex;
}
.data_table .paginate_button {
color: var(--main-color) !important;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
cursor: pointer;
}
.data_table .paginate_button.disabled {
cursor: default;
opacity: 0.6;
}
#editor {
font-family: var(--medium-font-ar) !important;
}
.cke_combo {
direction: rtl;
font-family: var(--medium-font-ar) !important;
}
.cke_top {
background-color: var(--white-color);
}
.cke_chrome {
border-radius: 5px;
overflow: hidden;
box-shadow: 0px 2px 4px rgb(0 0 0 / 25%) !important;
}
.authentication_form.authentication_form_custom .form-group .form-control-disabled {
box-shadow: none !important;
}
.card_form {
background: #fcfcfd;
box-shadow: 0px 4px 16px 1px rgb(0 0 0 / 8%);
padding: 2rem 1rem;
border-radius: 5px;
margin-bottom: 2rem;
margin-inline: -0.75rem;
}
/* END:: OTHERS */
.authentication_form .custom-input input[type="file"] {
margin-left: -2px !important;
}
.authentication_form .custom-input input[type="file"]::-webkit-file-upload-button {
display: none;
}
.authentication_form .custom-input input[type="file"]::file-selector-button {
display: none;
}
.authentication_form .custom-input:hover label {
background-color: #dde0e3;
cursor: pointer;
}
.authentication_form.authentication_form_custom .custom-input label {
border: 1px solid rgba(0, 0, 0, 0.3) !important;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
border-end-end-radius: 0;
border-start-end-radius: 0;
width: 100px;
}
.authentication_form.authentication_form_custom .custom-input {
width: 90%;
}
.authentication_form.authentication_form_custom .custom-input input.form-control {
border: 1px solid rgba(0, 0, 0, 0.3) !important;
box-shadow: none !important;
display: flex;
align-items: center;
border-inline-start: 0 !important;
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.authentication_form.authentication_form_custom .custtom .custom-input input.form-control {
border: 0 !important;
box-shadow: 0px 2px 4px rgb(0 0 0 / 25%) !important;
}
.authentication_form.authentication_form_custom .custtom .custom-input label.form-label-custom {
box-shadow: 0px 2px 4px rgb(0 0 0 / 25%) !important;
}
.authentication_form.authentication_form_custom .custtom .custom-input label {
border: 0 !important;
}
.code_group {
padding-inline: 3rem;
}
.code_group .form-group {
width: 70px;
height: 50px;
}
.resend_code_btn {
width: 100%;
text-align: center;
height: 50px;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--gray-color);
font-family: var(--medium-font-ar);
}
.resend_code_btn img {
filter: invert(19%) sepia(73%) saturate(1212%) hue-rotate(155deg) brightness(91%) contrast(102%);
margin: 0;
}
@-webkit-keyframes rotating
/* Safari and Chrome */
{
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
.js-timeout {
border-radius: 5px;
box-shadow: none !important;
background-color: transparent;
font-size: 1.5rem;
font-family: var(--bold-font-ar);
color: var(--main-color);
transition: background 800ms ease-in !important;
overflow: hidden;
text-align: center;
height: 50px;
align-items: center;
}
.count_down_timer {
margin-bottom: 1rem;
}
.count_down_timer .countdown_reset::before {
content: "";
height: 100%;
width: 100%;
position: absolute;
z-index: 99999999999;
backdrop-filter: grayscale(1);
inset: 0;
}
.count_down_timer .countdown__time {
color: var(--main-color);
font-size: 1.5rem;
font-family: var(--bold-font-ar);
text-align: center;
}
.count_down_timer .countdown__time--orange {
color: var(--red-color);
}
.count_down_timer .countdown__time--orange+.countdown_reset::before {
z-index: -1;
backdrop-filter: grayscale(0);
}
.countdown_reset {
overflow: hidden;
height: 50px;
position: relative;
margin-top: 1rem;
}
.authentication_form .btn_select {
width: 115px;
height: 45px;
border-radius: 10px;
background-color: transparent;
border: 0 !important;
/* outline: 0 !important; */
box-shadow: none !important;
background-image: url("../../images/icons/arrow_down.svg");
background-size: 12px;
background-position: center left 1rem;
background-repeat: no-repeat;
padding-inline-end: 1.5rem;
}
.authentication_form .btn_select li {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.authentication_form .btn_select:hover li {
margin: 0px;
cursor: pointer;
}
.authentication_form .btn_select:hover {
background-color: transparent;
border: 1px solid transparent;
box-shadow: inset 0 0px 0px 1px #ccc;
}
.authentication_form .btn_select:focus {
outline: none;
}
.authentication_form .lang-select {
margin-inline-end: 10px;
position: absolute;
margin: 0;
height: 100%;
left: 0;
display: flex;
align-items: center;
}
.authentication_form .vodiapicker {
display: none;
}
.authentication_form .lang_list #loop_list_language {
padding-left: 0;
margin: 0;
}
.authentication_form .lang_list #loop_list_language li {
list-style: none;
margin-block: 5px;
}
.authentication_form .lang_list #loop_list_language li:hover {
background-color: #f4f3f3;
}
.authentication_form .mobile_select img {
margin-inline-end: 5px;
width: 26px;
height: 17px;
}
.authentication_form #loop_list_language img {
width: 28px;
height: 15px;
}
.authentication_form .mobile_select span {
font-size: 0.9rem;
color: var(--gray-color);
}
.authentication_form .form-group.mobile_select {
position: relative;
}
.authentication_form .lang_list {
display: none;
position: absolute;
background-color: var(--light-gray-color);
width: 100%;
box-shadow: 1px 1px 1px #ccc;
border-radius: 10px;
padding: 10px 5px;
top: 112%;
z-index: 99;
max-height: 150px;
overflow: auto;
}
.authentication_form .mobile_select input {
direction: rtl;
}
.code-input {
padding: 0 !important;
}
.questions_slider {}
.questions_slider .question {}
.questions_slider .question .head_question {
margin-bottom: 1.2rem;
}
.questions_slider .question .head_question p {
text-align: center;
margin-bottom: 0;
color: var(--black-color);
font-family: var(--bold-font-ar);
}
.questions_slider .slick-dots {
position: inherit;
inset: 0;
padding: 0;
text-align: center;
}
.questions_slider .slick-dots li {
padding: 0;
width: 10px;
height: 10px;
}
.questions_slider .slick-dots li button {
background-color: rgb(0 73 86 / 15%);
height: 100%;
width: 100%;
border-radius: 50%;
}
.questions_slider .slick-dots li button:before {
display: none !important;
}
.questions_slider .slick-dots li.slick-active button {
background-color: var(--secondary-color);
}
.questions_slider .body_question {
display: flex;
align-items: center;
gap: 1.5rem;
width: 100%;
justify-content: center;
padding: 2rem 1.5rem 0.8rem;
flex-wrap: wrap;
}
.questions_slider .body_question .radio_group {
width: 45%;
height: 50px;
}
.questions_slider .body_question .radio_group label {
width: 100%;
color: var(--main-color);
background-color: transparent;
border: 1px solid var(--main-color);
outline: none;
box-shadow: none;
height: 100%;
font-size: 1.2rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 8px;
}
.questions_slider .body_question .radio_group label::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -100%;
background-color: var(--main-color);
width: 100%;
height: 100%;
transition: all 200ms ease-in-out;
z-index: -1;
}
.questions_slider .body_question .radio_group input:checked+label::before {
bottom: 0;
}
.questions_slider .body_question .radio_group input:checked+label {
color: var(--white-color);
}
.question_store {}
.question_store .body_questions_store {}
.question_store .body_questions_store p {
font-size: 1.2rem;
color: var(--black-color);
font-family: var(--bold-font-ar);
margin-bottom: 2rem;
}
.question_store .body_questions_store .form-check {
margin-bottom: 2rem;
}
.question_store .body_questions_store .form-check label {
color: var(--gray-color);
font-family: var(--light-font-ar);
}
.actions_group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.actions_group a {
text-align: center;
}
:focus-visible {
/* box-shadow: 0px 0px 0px 3px #000 !important; */
outline: var(--main-color) auto 1px !important;
}
.authentication_form .form-group input:focus-visible {
outline: var(--main-color) auto 1px !important;
}
.authentication_form .form-group select:focus-visible {
outline: var(--main-color) auto 1px !important;
}
.authentication_card {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.authentication_card .authentication_title,
.authentication_card .authentication_form {
width: 100%;
}
.authentication_section .authentication_side_bar {
height: 100%;
background-color: rgb(255 255 255 / 60%);
border-radius: 20px;
z-index: 9;
}
.h-90 {
height: 90% !important;
padding-inline: 2.5rem 1.6rem;
}
.authentication_side_bar {}
.authentication_side_bar .head_sidebar {
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
.authentication_side_bar .head_sidebar a {}
.authentication_side_bar .head_sidebar a img {}
.authentication_side_bar .body_sidebar {
/* overflow: hidden; */
}
.authentication_side_bar .body_sidebar ul {
display: flex;
flex-direction: column;
gap: 1.5rem;
/* overflow: auto;
height: */
max-height: calc(100vh - 300px);
;
overflow-y: auto;
}
.authentication_side_bar .body_sidebar ul li {}
.authentication_side_bar .body_sidebar ul li {
padding-inline-end: 2rem;
}
.authentication_side_bar .body_sidebar ul li a {
display: flex;
align-items: center;
justify-content: start;
gap: 1rem;
color: var(--gray-color);
padding: 1rem 2.5rem;
border-radius: 40px 0px 0px 40px;
}
.authentication_side_bar .body_sidebar ul li a .index {
width: 32px;
height: 32px;
background: rgb(0 73 86 / 15%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--main-color);
font-family: var(--medium-font-ar);
transition: all 500ms ease-in-out;
border: 1px solid var(--main-color);
}
.authentication_side_bar .body_sidebar ul li a.active,
.authentication_side_bar .body_sidebar ul li:hover a {
background-color: var(--secondary-color);
color: var(--main-color);
}
.authentication_side_bar .body_sidebar ul li a.active .index,
.authentication_side_bar .body_sidebar ul li:hover a .index {
background: var(--main-color);
color: var(--white-color);
}
.authentication_side_bar .body_sidebar ul li a.done {
color: var(--main-color);
}
.authentication_side_bar .body_sidebar ul li a.done .index {
background-color: var(--secondary-color);
color: var(--main-color);
border: 0;
}
.form-check-group {
display: flex;
flex-wrap: wrap;
}
.form-check-group .form-check {
width: 33%;
margin-bottom: 1.5rem;
}
.form-check-group .form-check label {
font-size: 14px;
color: var(--gray-color);
font-family: var(--light-font-ar);
}
.authentication_form .form-check.form-check-radio {
padding: 0;
display: flex;
align-items: center;
margin-inline-start: 0;
}
.authentication_form .form-check.form-check-radio .form-check-input {
width: 18px;
height: 18px;
border-width: 1px;
/* box-shadow: inset 0px 0px 0px 1px #fff !important; */
}
.authentication_form .form-check.form-check-radio label {
font-family: var(--light-font-ar);
}
.authentication_form .form-check.form-check-radio {
width: 25%;
}
.other_input {
opacity: 0;
height: 0;
}
.show_other_input {
opacity: 1;
height: 50px;
}
.examples {
margin-block: 1rem;
color: var(--gray-color);
display: flex;
gap: .5rem;
font-size: 1rem;
}
.examples ul {
display: flex;
flex-wrap: wrap;
width: 78%;
gap: .5rem;
}
.examples ul li {
/* width: 33.3%; */
margin-bottom: .5rem;
font-family: var(--bold-font-ar);
color: var(--black-color);
}
.form_actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.form_actions button,
.form_actions a {
width: 50% !important;
text-align: center;
}
#map {
height: 270px;
width: 100%;
border-radius: 8px;
}
.map_input {}
.map_input .input_with_icon {}
.authentication_form .map_input .input_with_icon {
font-family: var(--light-font-ar);
height: 35px;
top: 1rem !important;
background-color: var(--white-color);
width: calc(100% - 2rem);
margin: 0 auto;
right: 0;
background-image: url("../../images/icons/search.svg");
background-repeat: no-repeat;
background-position: left 1rem center;
background-size: 20px 20px;
}
.authentication_form .map_input .input_with_icon::-webkit-input-placeholder {
color: var(--gray-color);
font-family: var(--light-font-ar) !important;
font-weight: 100 !important;
font-size: .8rem;
}
.authentication_form .map_input .input_with_icon:-ms-input-placeholder {
color: var(--gray-color);
font-family: var(--light-font-ar) !important;
font-weight: 100 !important;
font-size: .8rem;
}
.authentication_form .map_input .input_with_icon::placeholder {
color: var(--gray-color);
font-family: var(--light-font-ar) !important;
font-weight: 100 !important;
font-size: .8rem;
}
.integration_container {}
.integration_container .integration {
display: flex;
gap: 1rem;
border-bottom: 1px solid rgb(160 160 160 / 30%);
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.integration_container .integration .logo {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background-color: #ccc;
}
.integration_container .integration .logo img {}
.integration_container .integration .text {
width: calc(100% - 70px);
}
.integration_container .integration .text h3 {
display: flex;
align-items: start;
justify-content: space-between;
font-family: var(--medium-font-ar);
font-size: 1.2rem;
margin-bottom: .5rem;
}
.integration_container .integration .text h3 label {}
.integration_container .integration .text p {
color: #A5A5A5;
margin: 0;
}
.integration_container .integration .text h3 input {
background-size: 22px 22px;
background-position: 100% center;
border: 0;
background-color: var(--main-color);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
cursor: pointer;
}
.integration_container .integration .text h3 input:checked {
border: 0;
background-color: var(--secondary-color);
background-position: 0% center;
}
.integration_container .more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
font-size: 1.4rem;
font-family: var(--bold-font-ar);
color: var(--main-color);
margin-block: 1.5rem;
}
.integration_container .more span {
color: var(--black-color);
font-family: var(--light-font-ar);
}
.authentication_form .form-check.form-switch {}
/* START:: MENU COLLAPSE MOBILE VIEW */
.collapse_btn_menu {
width: 35px;
height: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
margin-bottom: 1rem;
margin: 0;
}
.collapse_btn_menu span {
display: block;
position: absolute;
height: 5px;
width: 50%;
background: var(--main-color);
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.collapse_btn_menu span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
.collapse_btn_menu span:nth-child(odd) {
left: 0px;
border-radius: 9px 0 0 9px;
}
.collapse_btn_menu span:nth-child(1),
.collapse_btn_menu span:nth-child(2) {
top: 0px;
}
.collapse_btn_menu span:nth-child(3),
.collapse_btn_menu span:nth-child(4) {
top: .7rem;
}
.collapse_btn_menu span:nth-child(5),
.collapse_btn_menu span:nth-child(6) {
top: 1.4rem;
}
.collapse_btn_menu.open span:nth-child(1),
.collapse_btn_menu.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.collapse_btn_menu.open span:nth-child(2),
.collapse_btn_menu.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.collapse_btn_menu.open span:nth-child(1) {
left: 5px;
top: 7px;
}
.collapse_btn_menu.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
.collapse_btn_menu.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
.collapse_btn_menu.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
.collapse_btn_menu.open span:nth-child(5) {
left: 5px;
top: 15px;
}
.collapse_btn_menu.open span:nth-child(6) {
left: calc(50% - 5px);
top: 15px;
}
.toggle_side_bar {
width: 35px;
height: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
margin-bottom: 1rem;
margin: 0;
}
.toggle_side_bar span {
display: block;
position: absolute;
height: 5px;
width: 50%;
background: var(--main-color);
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.toggle_side_bar span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
.toggle_side_bar span:nth-child(odd) {
left: 0px;
border-radius: 9px 0 0 9px;
}
.toggle_side_bar span:nth-child(1),
.toggle_side_bar span:nth-child(2) {
top: 0px;
}
.toggle_side_bar span:nth-child(3),
.toggle_side_bar span:nth-child(4) {
top: .7rem;
}
.toggle_side_bar span:nth-child(5),
.toggle_side_bar span:nth-child(6) {
top: 1.4rem;
}
.toggle_side_bar.open span:nth-child(1),
.toggle_side_bar.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle_side_bar.open span:nth-child(2),
.toggle_side_bar.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.toggle_side_bar.open span:nth-child(1) {
left: 0px;
top: 7px;
}
.toggle_side_bar.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
.toggle_side_bar.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
.toggle_side_bar.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
.toggle_side_bar.open span:nth-child(5) {
left: 0px;
top: 18px;
}
.toggle_side_bar.open span:nth-child(6) {
left: calc(50% - 5px);
top: 18px;
}
.menu_collapse {
overflow: hidden;
height: max-content;
padding: 1rem;
align-items: center;
justify-content: space-between;
display: none;
background-color: var(--white-color);
z-index: 8;
position: relative;
}
.overLay_side_menu {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-color: rgb(0 73 86 / 30%);
z-index: 8;
backdrop-filter: blur(3px);
right: -100%;
}
.more_images {}
.more_images img {
border-radius: 50%;
width: 50px;
height: 50px;
}
.more_images img:first-child {
margin-inline-end: -18px;
}
.themes_slider {
/* padding-inline: 0rem; */
width: 90%;
margin: 0 auto;
}
.themes_slider .slick-prev {
background-image: url("../../images/icons/left_arrow_slider.svg");
right: 0;
background-size: 20px 20px;
width: 20px;
height: 20px;
z-index: 8;
}
.themes_slider .slick-next {
background-image: url("../../images/icons/right_arrow_slider.svg");
left: 0;
background-size: 20px 20px;
width: 20px;
height: 20px;
z-index: 8;
}
.themes_slider .slick-arrow.slick-disabled {
opacity: .5;
cursor: no-drop;
}
.themes_slider .slick-next::before,
.themes_slider .slick-prev::before {
display: none;
}
.single_theme_container {
text-align: center;
height: 335px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.single_theme_container .image {
width: 300px;
height: 335px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.single_theme_container .themes_actions {
display: flex;
align-items: end;
gap: 1rem;
position: absolute;
width: 100%;
padding-inline: 1rem;
transition: all 1s ease-in-out;
overflow: hidden;
height: 100%;
box-shadow: #7e7e7e 0px -320px 150px -130px inset;
padding-bottom: 1rem;
bottom: -100%;
}
.single_theme_container .image img {
width: 100%;
object-fit: cover;
}
.single_theme_container .image span {
position: absolute;
top: 1rem;
right: 0;
background-color: var(--white-color);
padding: 8px;
font-size: .9rem;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
color: var(--green-color);
}
.single_theme_container:hover .image span {
color: var(--white-color);
background-color: var(--green-color);
}
.single_theme_container:hover .themes_actions {
bottom: 0;
}
.single_theme_container .themes_actions .btn-group {
width: 50%;
height: 40px;
}
.single_theme_container .themes_actions .btn-group input {}
.single_theme_container .themes_actions .btn-group label::before {}
.single_theme_container .themes_actions .btn-group label::after {
content: "اختيار";
transition: all .3s ease-in-out;
}
.single_theme_container .themes_actions .btn-group.theme_selected input:checked+label::after {
content: "تم اختياره";
}
.single_theme_container .themes_actions .btn-group.theme_pay input+label::after {
content: "شراء";
}
.single_theme_container .themes_actions .btn-group.theme_selected input:checked+label::before {
content: '';
background-image: url("../../images/icons/check.svg");
background-size: 10px;
height: 20px;
width: 20px;
border: 2px solid var(--main-color);
border-radius: 50%;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
position: relative;
transition: all .3s ease-in-out;
opacity: 0;
}
.single_theme_container .themes_actions .btn-group.theme_selected input:checked+label::before {
opacity: 1;
}
.single_theme_container .themes_actions .btn-group label {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
height: 40px;
background-color: var(--secondary-color);
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 7px;
isolation: isolate;
transition: all .3s ease-in-out;
color: var(--main-color);
font-family: var(--medium-font-ar);
width: 100%;
}
.single_theme_container .themes_actions .btn-group input:checked+label {}
.single_theme_container .themes_actions a {
height: 40px;
width: 50%;
background-color: transparent;
border: 1px solid var(--secondary-color);
font-family: var(--medium-font-ar);
color: var(--secondary-color);
border-radius: 7px;
transition: all 0s ease-in-out !important;
}
.single_theme_container .themes_actions a:hover {
border: 0;
}
.single_theme_container .themes_actions .btn-group.theme_pay input+label {
pointer-events: none;
}
.message_pay {
position: absolute;
bottom: -100%;
width: calc(100% - 2rem);
background-color: var(--white-color);
height: 40px;
left: 0;
right: 0;
margin: 0 auto;
font-size: .8rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--main-color);
border-top-left-radius: 7px;
border-top-right-radius: 7px;
opacity: 0;
transition: all 1s ease-in-out;
z-index: 9;
}
.single_theme_container .themes_actions .btn-group.theme_pay:hover+a+.message_pay {
opacity: 1;
bottom: 1rem;
}
.message_pay:hover {
opacity: 1;
bottom: 1rem;
}
.preview_theme {
img {
min-height: 590px;
width: 100%;
object-fit: fill;
}
button {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--white-color);
position: absolute;
top: 1rem;
right: 1rem;
}
}
/* START:: TABS */
.head_tabs {
ul.nav-tabs {
li.nav-item {
width: 50%;
button.nav-link {
border: 0 !important;
background-color: transparent !important;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
position: relative;
color: #A5A5A5;
font-size: 20px;
&::after {
content: '';
height: 4px;
width: 0;
position: absolute;
bottom: 1px;
background-color: var(--secondary-color);
border-radius: 10px;
transition: all .3s ease-in-out;
margin: 0 auto;
}
&.active {
font-family: var(--medium-font-ar);
color: var(--main-color);
&::after {
width: 80%;
}
}
}
border: 0;
}
border: 0;
justify-content: space-between;
}
width: 300px;
margin: 0 auto;
background-color: #e3faf5
}
.body_tabs {
margin-top: 1rem;
.tab-content {
.tab-pane {
.packages_slider {
.package {
padding: 1rem;
background-color: #e3faf5;
margin: 0 auto;
width: 300px !important;
height: 330px;
position: relative;
overflow: hidden;
.package_offer {
position: absolute;
left: 0;
top: 0;
direction: ltr;
.before {
width: 90px;
height: 90px;
direction: ltr;
position: absolute;
z-index: 2;
&::before {
content: '';
border-style: solid;
border-width: 90px 90px 0 0;
border-color: var(--red-color) transparent transparent transparent;
transform: rotate(0deg);
position: absolute;
left: 0;
}
span {
position: absolute;
left: 0px;
right: 0px;
height: 65%;
top: 0px;
font-size: 1.3rem;
font-family: var(--medium-font-ar);
color: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
width: 55%;
}
}
.after {
width: 130px;
height: 130px;
direction: ltr;
position: absolute;
z-index: 1;
&::before {
content: '';
border-style: solid;
border-width: 130px 130px 0 0;
border-color: var(--secondary-color) transparent transparent transparent;
transform: rotate(0deg);
position: absolute;
left: 0;
}
span {
position: absolute;
left: -12px;
right: 0;
height: 100%;
top: -10px;
font-size: 1rem;
font-family: var(--medium-font-ar);
color: var(--main-color);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
transform: rotate(-45deg);
}
}
}
.head_package {
h5 {
font-family: var(--medium-font-ar);
margin-bottom: 1rem;
}
p {
color: var(--gray-color);
margin: 0;
}
margin-bottom: 1.5rem;
}
.body_package {
h3 {
color: var(--main-color);
text-align: center;
display: flex;
align-items: end;
justify-content: center;
gap: .5rem;
span {
font-size: .88rem;
font-family: var(--medium-font-ar);
}
}
ul {
display: flex;
align-items: start;
justify-content: start;
gap: 1rem;
flex-direction: column;
margin-top: 1rem;
li {
display: flex;
align-items: center;
justify-content: start;
gap: .5rem;
height: max-content;
color: var(--gray-color);
img {
width: 14px;
height: 14px;
}
}
}
}
.footer_package {
position: absolute;
bottom: -100%;
width: 100%;
left: 0;
right: 0;
transition: all 1s ease-in-out;
.btn-group {
width: 100%;
height: 40px;
label {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
height: 40px;
border: 1px solid var(--main-color);
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 7px;
isolation: isolate;
transition: all .3s ease-in-out;
color: var(--main-color);
font-family: var(--medium-font-ar);
width: calc(100% - 2rem);
margin: 0 auto;
&::after {
content: "اختر الباقة";
transition: all .3s ease-in-out;
z-index: 2;
}
&::before {
content: '';
background-color: var(--main-color);
width: 100%;
height: 100%;
position: absolute;
bottom: -100%;
transition: all .3s ease-in-out;
}
}
input:checked+label::after {
content: "تم اختيار الباقه";
color: var(--white-color);
}
input:checked+label::before {
bottom: 0;
}
}
}
&:hover {
.footer_package {
bottom: 1rem;
}
}
}
.slick-prev {
background-image: url("../../images/icons/left_arrow_slider.svg");
right: 0;
background-size: 20px 20px;
width: 20px;
height: 20px;
z-index: 8;
}
.slick-next {
background-image: url("../../images/icons/right_arrow_slider.svg");
left: 0;
background-size: 20px 20px;
width: 20px;
height: 20px;
z-index: 8;
}
.slick-arrow.slick-disabled {
opacity: .5;
cursor: no-drop;
}
.slick-next::before,
.slick-prev::before {
display: none;
}
}
}
}
}
.more_actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
button {
color: var(--main-color) !important;
font-size: .9rem;
display: flex;
align-items: center;
gap: .5rem;
font-family: var(--medium-font-ar);
cursor: pointer;
img {
width: 8px;
height: 8px;
}
}
span.badge {
background-color: var(--main-color);
font-weight: 100;
opacity: .6;
padding: 5px 8px;
}
}
.features_modal {
position: absolute;
right: 0;
left: 0;
top: -100%;
height: 100%;
width: max-content;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
transition: all 1s ease-in-out;
&.show_features_modal {
top: 0;
}
.modal-content {
box-shadow: 0px 4px 35px 0px #00000014;
border-radius: 40px !important;
width: calc(580px - 1.3rem);
overflow: hidden;
border: 0;
padding: 0;
height: 85vh;
}
.modal-header {
background-color: #f3f9f9;
padding: 2rem;
align-items: start;
justify-content: start;
gap: .8rem;
border: 0;
.btn-close {
margin: 0;
background-image: url('data:image/svg+xml,');
background-size: 25px;
height: 15px;
width: 25px;
opacity: 1;
padding: 0;
margin-top: .8rem;
}
h5 {
color: var(--black-color);
font-size: 1.5rem;
font-family: var(--medium-font-ar);
p {
color: var(--gray-color);
margin-bottom: 0;
margin-top: .8rem;
}
}
}
.modal-body {
max-height: 58vh;
margin-top: 1.5rem;
padding: 2rem;
overflow-y: auto;
.accordion {
.accordion-item {
border: 0;
margin-bottom: 1rem;
.accordion-body {
border: 1px solid #ccdbdd !important;
border-radius: 10px;
padding: 1rem 1.25rem;
color: var(--gray-color);
font-size: 1rem;
line-height: 2rem;
}
.accordion-header {
margin-bottom: .7rem;
.accordion-button {
background-color: #f5f8f8;
border: 1px solid var(--main-color) !important;
border-radius: 10px;
box-shadow: none;
background-color: var(--main-color);
color: var(--white-color);
font-family: var(--medium-font-ar);
font-size: 20px;
gap: .5rem;
&::after {
display: none;
}
img {
filter: invert(94%) sepia(100%) saturate(0%) hue-rotate(218deg) brightness(104%) contrast(101%);
}
&.collapsed {
background-color: #f5f8f8;
border: 1px solid #ccdbdd !important;
color: var(--main-color);
img {
filter: none;
}
}
}
}
}
}
}
}
.op-0 {
opacity: 0;
}
.text-red {
color: var(--red-color) !important;
}
/* START:: INDEX DASHBOARD */
main#main {
background-color: #BAF3E666;
min-height: 100vh;
position: relative;
padding: 0;
overflow: hidden;
.side_menu__container {
position: fixed;
top: 0;
width: 300px;
display: flex;
align-items: start;
right: 0;
height: 100%;
z-index: 99;
transition: all .5s ease-in-out;
&.hidden_sidebar {
right: -100%;
}
.side_menu_dash {
height: 100%;
width: 100%;
background-color: var(--white-color);
.head_side_bar {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 200px;
.logo {
padding-block: 1.5rem;
}
.my_store {
display: flex;
align-items: center;
justify-content: start;
gap: .5rem;
border-block: 1px solid rgb(160 160 160 / 20%);
padding-block: .5rem;
padding-inline: .5rem;
width: 100%;
h6 {
color: var(--black-color);
font-family: var(--medium-font-ar);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
a {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
overflow: hidden;
font-size: .9rem;
height: 30px;
border-radius: 25px;
padding: 0;
font-family: var(--light-font-ar);
max-width: 110px;
&:hover {
img {
filter: invert(100%) sepia(97%) saturate(24%) hue-rotate(213deg) brightness(104%) contrast(100%);
}
}
}
}
}
}
.body_side_bar {
overflow-y: auto;
max-height: calc(100% - 220px);
ul {
li {
padding-inline: 1.5rem;
position: relative;
isolation: isolate;
a {
display: flex;
align-items: center;
justify-content: start;
gap: 1.3rem;
width: 100%;
overflow: hidden;
position: relative;
padding-block: 1rem;
color: var(--dark-gray-color);
transition: all .3s ease-in-out;
}
&::before {
content: '';
position: absolute;
right: -100%;
top: 5px;
height: 80%;
width: 3px;
border-radius: 5px;
background-color: var(--main-color);
transition: all .4s ease-in-out;
animation-duration: .4s;
}
&::after {
content: '';
position: absolute;
right: -100%;
top: 0;
height: 100%;
width: 100%;
background-color: var(--main-color);
opacity: .2;
isolation: auto;
z-index: -1;
transition: all .3s ease-in-out;
}
&:hover,
&.active {
&::before {
right: 5px;
}
&::after {
right: 0;
}
a {
.icon {
img {
filter: brightness(0) saturate(100%) invert(21%) sepia(15%) saturate(4958%) hue-rotate(153deg) brightness(100%) contrast(106%);
}
}
color: var(--main-color);
}
}
}
}
h5 {
font-family: var(--medium-font-ar);
color: var(--gray-color);
font-size: 1rem;
margin-block: 1.5rem;
padding-inline: 1.5rem;
}
}
}
}
.page_content {
padding-inline-start: 300px;
z-index: 9;
padding-block: 0 !important;
.app_bar__container {
/* transition: all .5s ease-in-out; */
.app_bar_dash {
position: fixed;
top: 0;
width: calc(100% - 300px);
height: 80px;
background-color: var(--white-color);
display: flex;
align-items: center;
padding-inline: 1.5rem;
z-index: 999;
.search_box {
max-width: 100%;
.form-group {
position: relative;
/* overflow: hidden; */
input {
&.form-control {
background-color: transparent;
box-shadow: none !important;
border: 1px solid var(--light-gray-color);
height: 45px;
border-radius: 8px;
padding-inline-start: calc(100px + 1rem);
padding-inline-end: 45px;
outline: none !important;
&::-webkit-input-placeholder {
color: var(--gray-color);
font-size: .95rem;
}
&:-ms-input-placeholder {
color: var(--gray-color);
font-size: .95rem;
}
&::placeholder {
color: var(--gray-color);
font-size: .95rem;
}
}
}
.dropdown {
height: 39px;
width: 100px;
position: absolute;
right: 3px;
top: 3px;
* {
direction: rtl;
text-align: start;
}
.dropdown-toggle {
height: 39px;
width: 100px;
border: 0;
background-color: var(--secondary-color);
box-shadow: none !important;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1rem;
color: var(--main-color);
&::after {
border: 0;
background-image: url("../../images/dash_icons/dropdown_arrow.svg");
width: 10px;
height: 10px;
background-size: 10px 10px;
background-repeat: no-repeat;
margin: 0;
transition: all .3s ease-in-out;
}
&.show {
&::after {
transform: rotate(180deg);
}
}
}
.dropdown-menu {
width: 100px !important;
max-width: 100px !important;
min-width: 100px !important;
border-radius: 8px;
border: 1px solid var(--light-gray-color);
padding: 0;
transform: none !important;
max-height: 0;
overflow: hidden;
top: 40px !important;
transition: max-height 0.3s ease-in-out;
display: block !important;
opacity: 0;
&.show {
max-height: 500px;
transition: max-height 1s ease-in-out;
opacity: 1;
}
li {
padding: 0 .3rem;
.dropdown-item {
color: var(--gray-color);
font-size: 1rem;
border-bottom: 2px solid var(--light-gray-color);
text-align: center;
padding: .7rem 0;
background-color: transparent !important;
&.active {
color: var(--main-color);
}
&:hover {
background-color: transparent !important;
}
}
&:last-child {
a {
border-bottom: 0;
}
}
}
}
}
.submit_btn {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 100%;
img {
width: 20px;
height: 20px;
}
}
}
}
.profile_and_actions {
.form-group {
position: relative;
/* overflow: hidden; */
width: 160px;
.dropdown {
height: 45px;
width: 160px;
* {
direction: rtl;
text-align: start;
}
.dropdown-toggle {
height: 45px;
width: 160px;
border: 0;
background-color: transparent;
box-shadow: none !important;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1rem;
color: var(--main-color);
gap: .5rem;
padding: 0;
&::after {
border: 0;
background-image: url("../../images/dash_icons/dropdown_arrow_gray.svg");
width: 10px;
height: 10px;
background-size: 10px 10px;
background-repeat: no-repeat;
margin: 0;
transition: all .3s ease-in-out;
}
&.show {
&::after {
transform: rotate(180deg);
}
}
h6 {
font-size: 14px;
font-family: var(--medium-font-ar);
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
.dropdown-menu {
width: 160px !important;
max-width: 160px !important;
min-width: 160px !important;
border-radius: 8px;
border: 1px solid var(--light-gray-color);
padding: 0;
transform: none !important;
max-height: 0;
overflow: hidden;
top: calc(100% + 1rem) !important;
transition: max-height 0.3s ease-in-out;
display: block !important;
opacity: 0;
&.show {
max-height: 500px;
transition: max-height 1s ease-in-out;
opacity: 1;
}
li {
padding: 0 .6rem;
.dropdown-item {
color: var(--gray-color);
font-size: 1rem;
border-bottom: 2px solid var(--light-gray-color);
text-align: start;
padding: .7rem 0;
background-color: transparent !important;
display: flex;
align-items: center;
gap: .5rem;
&.active {
color: var(--main-color);
}
&:hover {
background-color: transparent !important;
}
}
&:last-child {
a {
border-bottom: 0;
}
button {
border-bottom: 0;
}
}
}
}
}
}
.actions_switch_gifts {
display: flex;
align-items: center;
gap: 1rem;
li {
button.switch_mode {
position: relative;
width: 40px;
height: 40px;
border-radius: 8px;
background-color: rgb(186 243 230 / 20%);
}
button.gifts {
position: relative;
width: 40px;
height: 40px;
border-radius: 8px;
background-color: rgb(186 243 230 / 20%);
}
button {
padding: 0;
}
}
}
}
}
}
.content {
padding-inline: 1.5rem;
padding-block: 100px 1rem !important;
/* max-height: 100vh; */
/* overflow-y: auto; */
/* .col-12.wow.animate.fadeInUp {
visibility: visible !important;
animation-name: fadeInUp !important;
} */
}
}
}
.span-tooltip {
position: absolute;
right: 115px;
top: 0;
height: 100%;
align-items: center;
justify-content: center;
-webkit-user-select: none;
/* Safari */
-ms-user-select: none;
/* IE 10 and IE 11 */
user-select: none;
/* Standard syntax */
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
}
.tooltip {
.tooltip-arrow {
display: none;
}
.tooltip-inner {
max-width: 300px;
background-color: var(--white-color);
border: 1px solid var(--light-gray-color);
font-size: .8rem;
background-image: none;
color: var(--gray-color);
padding: 1rem;
font-weight: 100;
}
}
.padding-inline-start-custom {
padding-inline-start: calc(100px + 2.5rem) !important;
}
.base_dialog {
.modal-dialog {
max-width: 615px;
width: 615px;
.modal-content {
border-radius: 20px;
border: 0;
overflow: hidden;
.modal-header {
/* padding: 2.5rem 2.5rem 0rem 2.5rem; */
border-bottom: 0;
border-radius: 0;
position: absolute;
right: 2rem;
top: 1rem;
z-index: 1;
.btn-close {
background-image: none;
padding: 0;
width: 30px;
height: 30px;
}
}
.modal-body {
padding: 3rem 2rem;
.content {
overflow-y: auto;
max-height: 50vh;
}
.title {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
flex-direction: column;
margin-bottom: 1.2rem;
h4 {
color: var(--black-color);
font-family: var(--medium-font-ar);
font-size: 1.5rem;
}
p {
font-family: var(--medium-font-ar);
color: var(--gray-color);
font-size: 1rem;
}
}
}
}
}
}
.modal-backdrop {
background-color: rgb(0 0 0 / 20%);
}
.copy_link_box {
position: relative;
margin-bottom: 1.2rem;
input {
border: 0;
outline: none !important;
box-shadow: none !important;
width: 100px;
max-width: 100px;
cursor: pointer;
background-color: transparent;
color: var(--dark-gray-color);
border-inline-end: 1px solid #0049565c;
font-family: var(--medium-font-ar);
font-size: 1rem;
}
button {
display: flex;
align-items: center;
background-color: #BAF3E666;
color: var(--dark-gray-color);
padding: .5rem 1rem;
border-radius: 8px;
gap: .5rem;
span {
width: 25px;
height: 25px;
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
display: inline-block;
&.copy {
background-image: url("../../images/dash_icons/copy.svg");
}
&.check {
background-image: url("../../images/dash_icons/copy_check.svg");
}
}
}
}
.share-box {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1.2rem;
li {
button {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: var(--light-gray-color);
position: relative;
padding: 0;
/* &:hover{ */
&::before {
background-color: var(--secondary-color);
}
/* } */
i {
font-size: 1.2rem;
&.fa-whatsapp {
color: #25D366;
}
&.fa-whatsapp {
color: #25D366;
}
&.fa-twitter {
color: #1DA1F2;
}
&.fa-facebook-f {
color: #3B579D;
}
&.fa-telegram-plane {
color: #2081C7;
}
&.fa-at {
color: #DC3737;
}
}
}
}
}
.btns_dialog_base {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
button {
border: 0 !important;
background-color: transparent !important;
font-family: var(--light-font-ar);
color: var(--main-color);
}
}
.editor_content {
display: flex;
align-items: start;
justify-content: center;
gap: 1rem;
flex-direction: column;
padding-top: 1rem;
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--black-color);
font-family: var(--medium-font-ar);
}
ul {
display: flex;
align-items: start;
flex-direction: column;
justify-content: center;
gap: 1rem;
padding-inline-start: 1rem;
li {
color: var(--gray-color);
font-family: var(--light-font-ar);
line-height: 1.7rem;
list-style: decimal;
font-size: 1rem;
}
}
p {
color: var(--gray-color);
font-family: var(--light-font-ar);
line-height: 1.7rem;
list-style: decimal;
font-size: 1rem;
strong {
color: var(--black-color);
}
}
.hint {
color: var(--red-color);
font-size: 1rem;
margin-block: 1rem;
display: flex;
align-items: center;
gap: .5rem;
&::before {
content: '';
width: 5px;
height: 5px;
background-color: var(--red-color);
}
}
.stores_container {
display: flex;
flex-direction: column;
width: 100%;
.single_store {
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid rgb(160 160 160 / 20%);
padding-block: 1rem;
width: 100%;
&:last-child {
border-bottom: 0;
}
}
}
}
.main-card {
max-height: 310px;
min-height: 310px;
padding: 1.5rem;
background-color: var(--white-color);
border-radius: 10px;
overflow: hidden;
&:hover {
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}
.title-card {
font-family: var(--bold-font-ar);
font-size: 1.2rem;
}
.list_container {
overflow-y: scroll;
max-height: 230px;
ul {
li {
display: flex;
align-items: start;
gap: 1rem;
border-bottom: 1px solid #a0a0a066;
padding-block: .5rem;
.image {
border-radius: 5px;
border: 1px solid var(--light-gray-color);
overflow: hidden;
width: 44px;
height: 48px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.icon {
width: 30px;
height: 30px;
border-radius: 10px;
background-color: var(--secondary-color);
display: flex;
align-items: center;
justify-content: center;
}
h4 {
font-size: .9rem;
font-family: var(--medium-font-ar);
color: var(--main-color);
display: flex;
align-items: start;
justify-content: start;
gap: .5rem;
flex-direction: column;
span {
font-size: 10px;
color: var(--gray-color);
}
}
&:last-child {
border: 0;
}
}
}
&.products_list {
ul {
li {
.image {
width: 84px;
height: 56px;
img {
object-position: center;
}
}
h4 {
color: var(--black-color);
span {
color: var(--main-color);
opacity: .5;
font-size: .8rem;
}
}
}
}
}
}
.area-chart {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
transition: all 0s ease-in-out !important;
.apexcharts-xaxis-label-custom * {
font-size: 12px !important;
}
.apexcharts-tooltip-y-group {
display: flex;
gap: .5rem;
.apexcharts-tooltip-text-y-label {
font-size: 14px !important;
}
.apexcharts-tooltip-text-y-value {
font-size: 14px !important;
}
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
background-color: var(--main-color);
font-family: var(--light-font-ar) !important;
border: 0;
padding-block: .5rem;
color: var(--white-color);
}
}
}
.floating_actions {
position: fixed;
bottom: 4rem;
left: 8rem;
z-index: 999999;
.floating_actions_input {
display: none;
&:checked~.floating_actions_dots .fab-action {
opacity: 1;
}
&:checked~.floating_actions_dots {
z-index: 22;
.floating_actions_dot {
transform: scale(1);
&:nth-child(1) {
left: 0rem;
top: 100px;
}
&:nth-child(2) {
right: 0rem;
top: 100px;
}
&:nth-child(3) {
top: 50px;
}
}
}
&:checked+.floating_actions_label {
span {
&.close {
opacity: 1;
transform: rotate(0deg);
}
}
}
}
.floating_actions_label {
position: absolute;
bottom: 0;
left: 0rem;
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--secondary-color);
transition: all 0.3s ease;
z-index: 99;
cursor: pointer;
.images {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 40px;
height: 40px;
}
}
span {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(135deg);
i {
font-size: 2rem;
color: var(--main-color);
}
}
}
.floating_actions_dots {
position: absolute;
bottom: 0;
left: -65px;
border: 1px solid transparent;
width: 200px;
height: 200px;
transition: all 0.3s ease;
transform-origin: bottom right;
z-index: -1;
.floating_actions_dot {
position: absolute;
width: 45px;
height: 45px;
background-color: var(--secondary-color);
border-radius: 50%;
top: 50%;
opacity: 1;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
cursor: pointer;
&:nth-child(1) {
left: 76px;
top: 135px;
transition: all 0.3s ease-in-out;
}
&:nth-child(2) {
left: inherit;
right: 76px;
top: 135px;
transition: all 0.6s ease-in-out;
}
&:nth-child(3) {
bottom: inherit;
right: 0;
left: 0;
top: 135px;
margin: 0 auto;
transition: all 0.9s ease-in-out;
}
}
}
}
@keyframes blink {
50% {
opacity: 0.25;
}
}
/* .support_custom_dialog {
z-index: 0;
.overlay_support_custom_dialog {
position: fixed;
top: 80px;
left: 0;
z-index: 1040;
width: calc(100vw - 300px);
height: calc(100vh - 80px);
z-index: -9;
transition: all 0s;
&.show {
background-color: rgb(0 0 0 / 20%);
z-index: 9;
}
}
} */
.base_dialog.blogs {
z-index: 999999;
.modal-dialog {
width: auto;
max-width: max-content;
margin: 0;
left: 9rem;
position: absolute;
bottom: 10rem;
align-items: end;
.modal-content {
min-height: 400px;
max-height: 400px;
min-width: 420px;
max-width: 420px;
border-radius: 30px;
.modal-body {
min-height: 400px;
max-height: 400px;
min-width: 420px;
max-width: 420px;
}
}
}
.modal-single-blog {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: var(--white-color);
z-index: -1;
border-radius: 30px;
opacity: 0;
padding: 3rem 2rem;
&.show {
opacity: 1;
z-index: 9;
}
.modal-single-blog-head {
display: flex;
align-items: center;
justify-content: center;
button {
width: 30px;
height: 30px;
position: absolute;
right: 40px;
top: 25px;
img {
width: 100%;
height: 100%;
}
}
img {
width: 40px;
height: 50px;
}
}
.modal-single-blog-body {
background-color: #baf3e566;
padding: 1rem;
margin-top: 1rem;
position: relative;
max-height: 250px;
overflow-y: auto;
h3 {
width: 100%;
font-family: var(--light-font-ar);
color: var(--dark-gray-color);
display: flex;
align-items: center;
gap: 1.1rem;
color: var(--main-color);
font-size: 1rem;
}
ul {
margin-top: 1rem;
display: flex;
align-items: start;
justify-content: start;
flex-direction: column;
gap: 2rem;
li {
font-size: .9rem;
color: var(--dark-gray-color);
}
}
}
}
}
.base_dialog.updates_record {
z-index: 999999;
.modal-dialog {
width: auto;
max-width: max-content;
margin: 0;
left: 9rem;
position: absolute;
bottom: 10rem;
align-items: end;
.modal-content {
min-height: 400px;
max-height: 400px;
min-width: 555px;
max-width: 555px;
border-radius: 30px;
.modal-body {
min-height: 400px;
max-height: 400px;
min-width: 555px;
max-width: 555px;
}
}
}
}
.base_modal_content {
.base_modal_head {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
img {
width: 40px;
height: 50px;
}
h3 {
font-size: 1.3rem;
font-family: var(--medium-font-ar);
}
}
.base_modal_body {
.search_list {
width: 100%;
.form-group {
background-color: #baf3e566;
padding: 1rem;
margin-top: 1rem;
position: relative;
input {
height: 45px;
border: 0;
box-shadow: none !important;
border-radius: 8px;
}
button {
position: absolute;
left: 1rem;
width: 45px;
display: flex;
height: 45px;
align-items: center;
justify-content: center;
top: 1rem;
}
}
}
.results_container {
background-color: #FAFAFA;
border: 1px solid var(--light-gray-color);
border-radius: 15px;
padding: 1rem 1.2rem;
width: 100%;
margin-top: 1rem;
display: flex;
align-items: start;
justify-content: start;
flex-direction: column;
gap: 1rem;
overflow-y: auto;
max-height: 130px;
li {
width: 100%;
a {
width: 100%;
font-family: var(--light-font-ar);
color: var(--dark-gray-color);
display: flex;
align-items: center;
gap: 1.1rem;
border-bottom: 1px solid #BDBDBD;
padding-bottom: 1rem;
.icon {
img {}
}
}
&:last-child {
a {
padding-bottom: 0rem;
border-bottom: 0;
}
}
}
}
}
}
.main-table {
overflow: auto;
max-height: 230px;
.table {
tr {
td {
color: var(--black-color);
font-size: .9rem;
padding-block: .5rem;
padding-inline: 0 .5rem;
vertical-align: middle;
border-color: #a0a0a066;
font-family: var(--medium-font-ar);
.image {
display: flex;
align-items: end;
justify-content: center;
background-color: var(--secondary-color);
width: 45px;
height: 45px;
overflow: hidden;
border-radius: 10px;
img {
max-width: 100%;
max-width: 100%;
object-fit: contain;
object-position: center;
}
}
.chip {
width: max-content;
height: 35px;
padding-inline: 1rem;
border-radius: 25px;
background-color: var(--secondary-color);
color: var(--main-color);
display: flex;
align-items: center;
}
}
}
}
}
.text--primary {
color: var(--main-color) !important;
}
.text--secondary {
color: var(--secondary-color) !important;
}
.text--gray {
color: var(--gray-color) !important;
}
/* END:: INDEX DASHBOARD */
/* START:: PRODUCT PAGE */
.content {
position: relative;
.filter_bar {
background-color: #e3faf5;
height: 80px;
width: calc(100% - 300px);
position: fixed;
top: 80px;
left: 0;
z-index: 8;
padding-inline: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
.filter_actions {
display: flex;
align-items: center;
gap: 1rem;
.dropdown {
height: 40px;
border-radius: 25px !important;
button {
display: flex;
align-items: center;
height: 100%;
width: max-content;
padding-inline: 1.5rem;
font-family: var(--light-font-ar);
color: var(--dark-gray-color);
gap: .7rem;
background-color: var(--white-color);
border-radius: 25px !important;
font-size: .9rem;
&::after {
display: none;
}
&:hover {
img {
filter: var(--filter-white);
}
color: var(--white-color);
}
}
&.filter_dropDwon {
.dropdown-menu {
right: 0 !important;
}
}
.dropdown-menu {
width: 253px !important;
min-width: 253px !important;
max-width: 253px;
border-radius: 8px;
border: 1px solid var(--light-gray-color);
padding: 0;
transform: none !important;
max-height: 0;
overflow: hidden;
top: 50px !important;
transition: max-height 0.3s ease-in-out;
display: block !important;
opacity: 0;
&.show {
max-height: 500px;
transition: max-height 1s ease-in-out;
opacity: 1;
}
.btns_dropdown {
display: flex;
padding: 1rem;
gap: 1rem;
align-items: center;
justify-content: space-between;
button {
border-radius: 8px !important;
padding: .8rem 1rem;
&:first-child {
background-color: var(--secondary-color);
}
&:last-child {
background-color: var(--light-gray-color);
color: var(--dark-gray-color);
}
}
}
.accordion {
border: 0;
overflow: hidden;
.accordion-item {
border: 0;
/* border-bottom: 1px solid var(--gray-color) !important; */
.accordion-header {
.accordion-button {
width: 100%;
border-radius: 0 !important;
box-shadow: none;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--main-color);
font-family: var(--light-font-ar);
flex-direction: row-reverse;
padding: 1rem;
&::before {
content: '';
background-image: url(../../images/dash_icons/dropdown_arrow_gray.svg);
width: 10px;
height: 10px;
background-size: 10px 10px;
background-repeat: no-repeat;
filter: var(--filter-main);
transform: rotate(-180deg);
transition: all .3s ease-in-out;
}
&.collapsed {
&::before {
transform: rotate(0deg);
}
}
}
}
.accordion-collapse {
direction: rtl;
.accordion-body {
direction: rtl;
text-align: start;
padding: .5rem;
width: calc(100% - 2rem);
margin: 0 auto;
border: 2px solid var(--light-gray-color);
border-radius: 10px;
.form-check {
padding-inline-end: 0;
display: flex;
align-items: center;
gap: .5rem;
border-bottom: 1px solid rgb(160 160 160 / 30%);
padding: .5rem;
&:last-child {
border-bottom: 0;
}
input {
float: none;
margin: 0;
cursor: pointer;
width: 18px;
height: 18px;
background-color: transparent !important;
box-shadow: none !important;
border: 2px solid var(--main-color);
&:checked {
background-image: url('data:image/svg+xml,');
background-size: 10px 8px;
}
}
label {
color: var(--dark-gray-color);
font-size: 0.8rem;
font-family: var(--medium-font-ar);
cursor: pointer;
}
}
}
}
}
}
}
}
ul.nav-tabs {
border: 0 !important;
display: flex;
gap: 1rem;
li {
button {
padding: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgb(0 73 86 / 15%);
border: 0;
&.active {
background-color: var(--main-color);
img {
filter: var(--filter-white);
}
}
&:hover {
img {
filter: var(--filter-white);
}
}
img {
width: 18px;
height: 18px;
}
}
}
}
}
}
}
.products_container {
padding-top: 5rem;
.single_product {
border-radius: 10px;
overflow: hidden;
display: block;
.head_product {
width: 100%;
height: 260px;
position: relative;
overflow: hidden;
.image {
height: 260px;
width: 100%;
img {
height: 100%;
width: 100%;
transition: all 1s ease-in-out;
object-fit: cover;
}
}
.head_actions {
.select_product {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
.form-check {
padding: 0;
width: 25px;
height: 25px;
margin: 0;
input {
cursor: pointer;
width: 25px;
height: 25px;
background-color: transparent !important;
box-shadow: none !important;
border: 2.5px solid var(--main-color);
float: none;
padding: 0;
margin: 0;
&:checked {
background-image: url('data:image/svg+xml,');
background-size: 15px 10px;
}
}
}
}
.pin_mark {
position: absolute;
top: 1rem;
left: 0;
z-index: 2;
.form-check {
padding: 0;
width: auto;
height: 25px;
margin: 0;
input {
&+label {
background-color: var(--white-color);
cursor: pointer;
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
img {
transition: all 0s;
}
}
&:checked {
&+label {
background-color: var(--red-color);
img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(11deg) brightness(109%) contrast(111%);
}
}
}
&:hover {
&+label {
background-color: var(--red-color);
img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(11deg) brightness(109%) contrast(111%);
}
}
}
}
}
}
.add_images_btn {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
margin: 0 auto;
width: max-content;
height: 35px;
font-family: var(--medium-font-ar);
border-radius: 25px;
font-size: .8rem;
}
}
}
.body_product {
background-color: var(--white-color);
padding: 1rem;
.info_product {
.form-group {
position: relative;
&.input_with_suffix {
>span {
position: absolute;
left: 1rem;
top: 1rem;
font-size: .8rem;
color: var(--main-color);
font-family: var(--medium-font-ar);
}
.form-control {
padding-inline-end: 3rem;
}
}
&.input_with_actions {
.form-control {
padding-inline-end: 200px;
&:disabled {
background-color: transparent !important;
cursor: no-drop;
}
}
.input_actions {
position: absolute;
left: 8px;
display: flex;
align-items: center;
gap: .5rem;
top: 8px;
background-color: var(--white-color);
button.notifiactions {
width: 30px;
height: 30px;
padding: 0;
&:hover {
img {
filter: var(--filter-white);
}
}
}
.form-check {
input {
&:checked {
+label {
img {
filter: var(--filter-white);
}
&::before {
top: 0;
}
}
}
}
}
label.notifiactions {
width: 30px;
height: 30px;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
&:hover {
img {
filter: var(--filter-white);
}
}
}
button.options {
height: 30px;
padding: 0;
font-size: 10px;
width: max-content;
font-family: var(--medium-font-ar);
padding-inline: 1rem;
}
}
}
.form-control {
border: 1px solid var(--light-gray-color);
padding: 1rem;
color: var(--gray-color);
font-family: var(--medium-font-ar);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
border-radius: 6px;
font-size: .8rem;
max-height: 45px;
}
}
}
}
&:hover {
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
.head_product {
.image {
img {
transform: scale(1.3);
}
}
}
}
}
}
.alert {
background-color: rgb(186 243 230 / 20%);
display: flex;
color: var(--dark-gray-color);
line-height: 1.5rem;
font-size: .7rem;
gap: .5rem;
align-items: center;
img {
filter: brightness(0) saturate(100%) invert(17%) sepia(69%) saturate(1879%) hue-rotate(163deg) brightness(95%) contrast(101%);
}
}
body {
.select2-container {
z-index: 9999999999999;
.select2-dropdown {
border: 0;
border-radius: 5px;
padding: .5rem;
transform: translateY(.8rem);
}
.select2-results__options {
li {
text-align: center;
}
}
}
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
color: var(--main-color) !important;
background-color: var(--secondary-color) !important;
}
.product_options_dialog {
.custom_form_modal {
max-height: 65vh;
.btn-remove {
filter: brightness(0) saturate(100%) invert(16%) sepia(84%) saturate(7444%) hue-rotate(0deg) brightness(107%) contrast(117%);
width: 30px;
height: 30px;
}
.content_form_repeater {
max-height: 0;
transition: max-height .3s ease-out;
overflow: hidden;
overflow-y: auto;
.add_new_option_container {
background-color: var(--light-gray-color);
}
.container_rows {
background-color: var(--light-gray-color);
}
.inputs_group {
display: flex;
align-items: center;
gap: 1rem;
button.btn-remove {
width: 25px;
}
}
.input_with_icon_delete {
display: flex;
align-items: center;
gap: 1rem;
button {
width: 25px;
height: 25px;
}
}
&.active_content_form_repeater {
max-height: 500px;
transition: max-height 1s ease-in;
}
.form-group {
input {
height: 45px;
font-size: 14px;
background-color: var(--white-color);
color: var(--gray-color);
border-radius: 6px;
&::placeholder {
color: var(--gray-color);
}
}
}
.select2-container--bootstrap-5 .select2-selection {
height: 45px;
background-color: var(--white-color);
font-size: 14px;
color: var(--gray-color);
border-radius: 6px;
border: none;
display: flex;
align-items: center;
justify-content: start;
direction: rtl;
.select2-selection__rendered {
font-size: 14px;
color: var(--gray-color);
}
}
.select2-container {
z-index: 1 !important;
}
}
.form-switch {
padding: 1rem 0;
display: flex;
align-items: center;
gap: .5rem;
input {
margin: 0;
float: none;
width: 50px;
height: 25px;
background-color: var(--light-gray-color);
border-color: var(--light-gray-color);
box-shadow: none;
background-image: url('data:image/svg+xml,');
background-position: left 1px top 1px;
&:checked {
background-image: url('data:image/svg+xml,');
background-position: left 101% top 1px;
background-color: var(--secondary-color);
opacity: 1;
}
}
label {
font-size: 1rem;
color: var(--dark-gray-color);
font-family: var(--medium-font-ar);
}
}
}
}
.add_images_dialog {
z-index: 9999999;
.prev-image.prev-custom {
input {
width: 220px;
height: 110px;
opacity: 0;
z-index: 999;
}
.btn_and_hint {
width: 220px;
height: 110px;
padding: 1rem;
align-items: end;
justify-content: end;
background-color: rgb(0 73 86 / 10%);
border: 0;
background-position: center top 1.2rem;
overflow: hidden;
.custom-frame {
position: absolute;
background-position: center;
z-index: 99;
width: 100%;
height: 100%;
inset: 0;
}
button {
z-index: 9999;
}
p {
margin: 0;
font-family: var(--medium-font-ar);
font-size: .9rem;
color: var(--main-color);
line-height: 1.5rem;
text-align: center;
}
}
}
}
.custom_form_modal {
max-height: 250px;
overflow-y: auto;
.form-group {
input {
background-color: transparent;
border: 1px solid var(--light-gray-color);
outline: none !important;
height: 50px;
border-radius: 6px;
}
}
}
.search_icon_sm {
display: none;
}
.mobile_toggle_btn {
display: none !important;
}
.side_bar_overLay {
display: none;
}
.selectOptions+.select2 {
width: 100% !important;
}
#accordionValues {
background-color: var(--light-gray-color);
padding: 1rem;
margin-top: 1rem;
.select_infinity {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
.total_content {
font-size: 1rem;
font-family: var(--medium-font-ar);
}
.form-check {
padding: 0;
width: 25px;
height: 25px;
margin: 0;
label {
width: max-content;
display: flex;
align-items: center;
gap: .7rem;
font-family: var(--medium-font-ar);
color: var(--main-color);
input {
cursor: pointer;
width: 25px;
height: 25px;
background-color: transparent !important;
box-shadow: none !important;
border: 2.5px solid var(--main-color);
float: none;
padding: 0;
margin: 0;
&:checked {
background-image: url('data:image/svg+xml,');
background-size: 15px 10px;
}
}
}
}
}
.accordion-item {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border: 0;
.accordion-button {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 0;
box-shadow: none;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--secondary-color);
font-family: var(--medium-font-ar);
font-size: 1rem;
color: var(--main-color);
&.collapsed {
background-color: var(--white-color);
}
&::after {
margin: 0;
filter: var(--filter-main) !important;
}
}
}
}
/* END:: PRODUCT PAGE */
/* START:: =========================== LANDING PAGE =========================== */
header.landing {
max-height: 90px;
box-shadow: 0 4px 35px 0 rgb(0 0 0 / 8%);
.landing_header {
display: flex;
align-items: center;
justify-content: space-between;
.logo {
width: 25%;
a {
img {}
}
}
nav.nav {
width: 50%;
ul {
display: flex;
gap: 2rem;
li {
a {
color: var(--dark-gray-color);
font-family: var(--medium-font-ar);
font-size: 1rem;
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -.3rem;
height: 3px;
width: 0%;
background-color: var(--main-color);
margin: 0 auto;
border-radius: 5px;
transition: all .3s ease-in-out;
}
&.active {
&::after {
width: 80%;
}
}
&:hover {
&::after {
width: 80%;
}
}
}
}
}
}
.header_actions {
display: flex;
gap: 1rem;
width: 25%;
a {
color: var(--dark-gray-color);
font-family: var(--medium-font-ar);
font-size: 1rem;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
&:hover {
color: var(--white-color);
}
&.btn-animation-1 {
background-color: rgb(186 243 230 / 30%);
border: 1px solid var(--secondary-color);
}
&.btn-animation-3 {
border: 1px solid var(--main-color);
&::before {
background-color: var(--main-color);
}
}
}
}
}
}
.hero_section {
background-color: rgb(186 243 230 / 40%);
height: 88vh;
display: flex;
align-items: center;
padding-top: 100px;
.right_part {
position: relative;
padding: 1.5rem;
&::after {
content: '';
border-radius: 12px;
background-color: var(--secondary-color);
height: calc(100% - 3rem);
width: calc(100% - 6rem);
position: absolute;
inset: 0;
z-index: -1;
}
img {
border-radius: 12px;
/* width: calc(100% - 1.5rem); */
}
.social_media_icons {
box-shadow: 0 0 12px 0 rgb(0 0 0 / 7%);
background-color: var(--white-color);
padding: 1rem;
border-radius: 8px;
width: max-content;
position: absolute;
left: 1rem;
bottom: 0;
ul {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
li {
a {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--main-color);
border-radius: 50%;
i {
transition: all .5s ease-in-out;
color: var(--white-color);
}
&.twitter {
background-color: #1DA1F2;
}
&.linkedin {
background-color: #0078B5;
}
&.instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #B900B4 90%);
}
&.facebook {
background-color: #3B579D;
}
&.google {
background-color: #DB4437;
}
&.whatsapp {
background-color: #25D366;
}
&.tiktok {
background-color: #323232;
}
&:hover {
i {
transform: rotateY(360deg);
}
}
}
}
}
}
}
.left_part {
h1 {
font-family: var(--medium-font-ar);
font-size: 32px;
margin-bottom: 1.5rem;
}
p {
line-height: 2.8rem;
font-size: 20px;
color: var(--dark-gray-color);
margin-bottom: 2.5rem;
}
.left_part_actions {
display: flex;
gap: 1.5rem;
a {
width: max-content !important;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--medium-font-ar);
border-radius: 6px !important;
}
}
}
}
.statistics_section {
background-color: var(--main-color);
.section_title {
color: var(--white-color);
}
.single_static {
background-color: rgb(255 255 255 / 20%);
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
.icon {
height: 40px;
width: 40px;
border-radius: 8px;
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
}
.text {
.counter-value {
font-size: 1.4rem;
color: var(--secondary-color);
margin-bottom: .5rem;
&::after {
content: " + ";
}
}
span {
color: var(--white-color);
font-size: .9rem;
}
}
&:hover {
.icon {
background-color: var(--main-color);
img {
transform: rotateY(360deg);
filter: var(--filter-white);
}
}
}
}
}
.services_section {
padding-top: 35px;
.section_title {
background-color: var(--white-color);
/* z-index: 9999999;
top: 80px;
width: 100%;
left: 0;
right: 0; */
text-align: center;
padding-block: 35px;
}
.all_services {
height: 50vh;
overflow-y: scroll;
.col-lg-3 {
&:nth-child(odd) {
.single_service {
background-color: #EEFCF9;
.head_service {
h4 {
color: var(--main-color);
}
.icon {
background-color: var(--secondary-color);
img {
filter: var(--filter-main);
}
}
}
&::after {
background-color: var(--secondary-color);
}
&:hover {
.head_service {
h4 {
color: var(--main-color);
}
.icon {
background-color: var(--main-color);
img {
filter: var(--filter-white);
}
}
}
.text {
p {
color: var(--dark-gray-color);
}
}
}
}
}
}
.single_service {
background-color: var(--light-gray-color);
border-radius: 12px;
padding: 1.5rem;
position: relative;
overflow: hidden;
isolation: isolate;
margin-bottom: 1rem;
.head_service {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
z-index: 2;
h4 {
font-size: 1.2rem;
color: var(--main-color);
font-family: var(--medium-font-ar);
transition: all .5s ease-in-out;
}
.icon {
background-color: var(--main-color);
border-radius: 12px;
height: 45px;
width: 45px;
display: flex;
align-items: center;
justify-content: center;
transition: all .5s ease-in-out;
img {
filter: var(--filter-white);
transition: all .5s ease-in-out;
}
}
}
.text {
p {
font-size: 1rem;
color: var(--dark-gray-color);
line-height: 2rem;
transition: all .5s ease-in-out;
}
z-index: 2;
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: var(--main-color);
left: 0;
right: 0;
z-index: -1;
bottom: -100%;
transition: all .5s ease-in-out;
}
&:hover {
&::after {
bottom: 0%;
}
.head_service {
h4 {
color: var(--white-color);
}
.icon {
background-color: var(--secondary-color);
img {
filter: var(--filter-main);
transform: rotateY(360deg);
}
}
}
.text {
p {
color: var(--white-color);
}
z-index: 2;
}
}
}
}
}
.follow_up_section {
background-color: var(--light-gray-color);
.mobile_frame {
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.follow_up_content {
width: 80%;
h2 {
font-size: 1.8rem;
font-family: var(--medium-font-ar);
}
p {
margin-block: 2rem;
color: var(--dark-gray-color);
line-height: 2.5rem;
font-size: 1.3rem;
}
img {
width: 120px;
height: 120px;
border-radius: 12px;
}
}
}
.interfaces_section {
p {
font-size: 1.3rem;
line-height: 2.5rem;
color: var(--dark-gray-color);
}
img {
width: 100%;
}
}
.slider_follow_section {
background-color: #EEFCF9;
#SliderFollow {
width: 60%;
margin: 0 auto;
.item {
text-align: center;
h4 {
font-size: 1.8rem;
font-family: var(--medium-font-ar);
margin-bottom: 2rem;
}
p {
color: var(--dark-gray-color);
line-height: 2.5rem;
font-size: 1.3rem;
}
}
.owl-dots {
display: flex;
justify-content: center;
align-items: center;
gap: .7rem;
button {
width: 15px;
height: 15px;
background-color: var(--gray-color);
border-radius: 50%;
&.active {
background-color: var(--main-color);
}
}
}
}
}
.map_section {
position: relative;
.map_vector {
img {}
}
.logos {
position: absolute;
left: 0;
right: 0;
height: 100%;
width: 100%;
img {
position: absolute;
width: 48px;
height: 48px;
border-radius: 50%;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
&:nth-child(1) {
left: 36%;
top: 10%;
animation: scaleUp 2.1s ease-in-out 2.1s infinite;
}
&:nth-child(2) {
right: 30%;
top: 20%;
animation: scaleUp 2.2s ease-in-out 2.2s infinite;
}
&:nth-child(3) {
top: 45%;
right: 33%;
animation: scaleUp 2.3s ease-in-out 2.3s infinite;
}
&:nth-child(4) {
top: 46%;
right: 47%;
animation: scaleUp 2.4s ease-in-out 2.4s infinite;
}
&:nth-child(5) {
top: 68%;
left: 30%;
animation: scaleUp 2.5s ease-in-out 2.5s infinite;
}
}
}
}
.our_partners {
background-color: var(--main-color);
padding-block: 2rem;
.item {
img {
object-fit: contain;
}
}
}
.footer_landing {
background-color: var(--light-gray-color);
padding-top: 70px;
.right_part {
a {
margin-bottom: 1.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-size: 1.1rem;
line-height: 2.2rem;
color: var(--dark-gray-color);
text-align: center;
}
}
.center_part {
ul {
display: flex;
align-items: center;
justify-content: start;
flex-wrap: wrap;
text-align: start;
li {
width: 50%;
text-align: start;
display: flex;
a {
font-size: 1.1rem;
color: var(--dark-gray-color);
margin-bottom: 2rem;
}
}
}
}
.left_part {
.footer_actions {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
a {
border-radius: 6px;
border: 1px solid var(--main-color);
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: end;
gap: .5rem;
text-align: end;
padding: 5px 1rem;
width: 140px;
&:hover {
background-color: #EEFCF9;
border: 1px solid #EEFCF9;
}
img {}
span {
font-size: .7rem;
display: block;
margin-bottom: 5px;
color: var(--gray-color);
}
h6 {
font-size: .8rem;
font-family: var(--medium-font-ar);
color: var(--main-color);
}
}
}
.social_media_icons_footer {
border-radius: 8px;
width: max-content;
ul {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
li {
a {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--main-color);
border-radius: 50%;
i {
transition: all .5s ease-in-out;
color: var(--white-color);
}
&.twitter {
background-color: #1DA1F2;
}
&.linkedin {
background-color: #0078B5;
}
&.instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #B900B4 90%);
}
&.facebook {
background-color: #3B579D;
}
&.google {
background-color: #DB4437;
}
&.whatsapp {
background-color: #25D366;
}
&.tiktok {
background-color: #323232;
}
&:hover {
i {
transform: rotateY(360deg);
}
}
}
}
}
}
}
.copy_rights {
color: var(--dark-gray-color);
font-size: 1.1rem;
text-align: center;
border-top: 1px solid var(--gray-color);
padding-block: 35px;
margin-top: 35px;
}
.footer_title {
font-size: 1.3rem;
color: var(--main-color);
text-align: start;
font-family: var(--medium-font-ar);
margin-bottom: 2rem;
}
}
.row {
overflow: hidden;
}
.section_title {
text-align: center;
font-family: var(--medium-font-ar);
margin-bottom: 2rem;
}
@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.hide_all_screens {
display: none;
}
.single_page_content {
padding-top: 130px;
padding-bottom: 0;
p {
font-size: 1.1rem;
color: var(--dark-gray-color);
line-height: 3rem;
text-align: center;
}
&.bg-secondary {
background-color: #EEFCF9 !important;
}
.title_page {
text-align: center;
margin-bottom: 2rem;
font-size: 1.1rem;
color: var(--main-color);
}
ul {
display: flex;
flex-direction: column;
gap: 1.5rem;
li {
list-style: decimal;
color: var(--dark-gray-color);
font-size: 1.1rem;
line-height: 2rem;
}
}
}
.hero_about {
padding-top: 120px;
background-color: rgb(186 243 230 / 40%);
.left_part {
h1 {
font-family: var(--medium-font-ar);
font-size: 32px;
margin-bottom: 1.5rem;
text-align: center;
}
p {
line-height: 2.8rem;
font-size: 20px;
color: var(--dark-gray-color);
margin-bottom: 2.5rem;
text-align: center;
}
}
.about-box {
background: url(../../images/landing/Newslatter.svg), linear-gradient(90deg, rgba(0, 73, 86, 1) 0%, rgba(186, 243, 230, 1) 100%);
background-size: cover;
background-position: center;
border-radius: 50px;
padding: 3rem;
/* height: 400px; */
.right_part {
width: 80%;
h2 {
font-size: 1.7rem;
color: var(--white-color);
font-family: var(--medium-font-ar);
margin-bottom: 2rem;
}
p {
font-size: 1.2rem;
line-height: 2.5rem;
color: var(--white-color);
}
}
}
}
.packages_content {
padding-top: 140px;
.table-responsive {
max-height: calc(100vh - 50px);
overflow-y: auto;
.table_heads {
thead {
position: sticky !important;
top: 0px !important;
z-index: 1 !important;
background-color: var(--white-color);
tr {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1rem;
th {
background-color: var(--main-color);
text-align: center;
border: 0;
padding: 1.2rem;
border-radius: 8px;
color: var(--white-color);
width: 25%;
font-size: 1.2rem;
font-family: var(--medium-font-ar);
&:first-child {
background-color: rgb(0 73 86 / 20%);
color: var(--main-color);
}
span {
font-size: 1.5rem;
font-family: var(--bold-font-ar);
}
}
}
}
}
.title_table {}
.table_body {
tbody {
tr {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
position: relative;
overflow: hidden;
&::before {
content: '';
background-color: var(--light-gray-color);
position: absolute;
height: 78%;
width: 75%;
right: 25%;
top: 0;
border-radius: 6px;
}
&[colspan] {
&::before {
display: none;
}
}
td {
padding: 1.2rem;
width: 25%;
font-size: 1.2rem;
text-align: center;
/* background-color: var(--light-gray-color); */
height: 58px;
border: 0;
position: relative;
margin-bottom: 1rem;
&[colspan] {
width: 100%;
border: 0 !important;
background-color: #EEFCF9 !important;
border-radius: 6px;
text-align: center;
padding: 1rem;
margin-block: 2rem;
font-family: var(--medium-font-ar);
color: var(--main-color);
font-size: 1.1rem;
}
&:first-child {
border: 1px solid #a5a5a566;
border-radius: 6px;
background-color: transparent;
/* margin-inline-end: 2rem; */
}
&:nth-child(2) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
&:nth-child(3) {
&::before {
content: "";
position: absolute;
right: 0;
height: 70%;
width: 2px;
background-color: #a5a5a566;
border-radius: 5px;
top: 8px;
}
&::after {
content: "";
position: absolute;
left: 0;
height: 70%;
width: 2px;
background-color: #a5a5a566;
border-radius: 5px;
top: 8px;
}
}
&:nth-child(4) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
}
}
}
}
}
}
.table_btns {
button {
min-width: 160px;
}
}
.about_btns {
button {
font-family: var(--medium-font-ar);
&.btn-animation-1 {
min-width: 160px;
background-color: transparent;
border: 1px solid var(--white-color);
color: var(--white-color);
&::before {
background-color: var(--secondary-color);
}
&:hover {
color: var(--main-color);
border: 1px solid var(--secondary-color);
}
}
&.btn-animation-2 {
min-width: 160px;
background-color: var(--white-color);
color: var(--main-color);
&::before {
background-color: var(--main-color);
}
&:hover {
color: var(--white-color);
}
}
}
}
.card_section {
background-color: #EEFCF9 !important;
.right_part {
h2 {
font-size: 1.5rem;
color: var(--main-color);
}
p {
color: #A5A5A5;
font-size: 1.1rem;
margin-block: 1.5rem;
width: 70%;
line-height: 2.5rem;
}
button {
font-family: var(--medium-font-ar);
width: max-content;
}
}
}
.page_loader {
width: 100%;
height: 100vh;
background-color: var(--white-color);
z-index: 9999999999999999;
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: center;
background: url(../../images/landing/Newslatter.svg), var(--white-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.page_loader .logo {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 90px;
width: 90px;
}
.page_loader_child {
border: 5px solid var(--main-color);
border-radius: 50%;
animation: 1s page_loader_child linear infinite;
position: relative;
display: inline-block;
width: 100%;
height: 100%;
color: inherit;
vertical-align: middle;
pointer-events: none;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
&:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: -10px;
left: 50%;
border: 8px solid var(--secondary-color);
border-radius: 50%;
}
}
@keyframes page_loader_child {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* END:: ============================ LANDING PAGE ============================ */