@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap');


:root {
    --color-primary: #614cae;
    --color-light-primary: #7560c4;
    --color-secondary: #e2bd6b;

    --color-male: rgba(107, 107, 226, .2);
    --color-female: rgba(237, 155, 238, .2);

    --text-color-male: rgba(107, 107, 226, 1);
    --text-color-female: rgba(237, 155, 238, 1);

    --range-color-1: #e51f1f;
    --range-color-2: #f2a134;
    --range-color-3: #ead157;
    --range-color-4: #bbdb44;
    --range-color-5: #4fd227;

    --range-color-1-transparent: rgba(229, 31, 31, .4);
    --range-color-2-transparent: rgba(242, 161, 52, .4);
    --range-color-3-transparent: rgba(234, 209, 87, .4);
    --range-color-4-transparent: rgba(187, 219, 68, .4);
    --range-color-5-transparent: rgba(79, 210, 39, .4);

    --bg-1-transparent: rgba(229, 31, 31, .2);
    --bg-5-transparent: rgba(79, 210, 39, .2);


    --background-color: #eae5ff;
    --background-strong: rgba(234, 229, 255, .8);
    --background-linear-color: linear-gradient(45deg, #bcb4da, #eae5ff);
    --surface-color: rgba(250, 250, 250, 0.55);
    --surface-color-highlight: rgba(250, 250, 250, 0.2);
    --bg-shadow: rgba(0,0,0,.05);

    --glass-border: rgba(100, 100, 100, 0.1);
    --blur: 3px;

    --header-color: #343434;
    --paragraph-color: #545454;

    --header-color-opp: #ececec;
}

[data-theme='dark-purple'] {
    --background-color: #1c1928;
    --background-strong: rgba(28, 25, 40, .8);
    --background-linear-color: linear-gradient(45deg, #1c1928, #2c2741);
    --surface-color: rgba(85, 78, 114, 0.18);
    --bg-shadow: rgba(0,0,0,.15);

    --glass-border: rgba(255, 255, 255, 0.10);

    --header-color: #ececec;
    --paragraph-color: #c2c2c2;

    --header-color-opp: #ececec;
}

::-webkit-scrollbar {width: 12px;height: 12px;}
::-webkit-scrollbar-thumb {background-color: #614cae;border-radius: 6px;border: 2px solid #fff;}
::-webkit-scrollbar-track {background: transparent;}

* {scrollbar-width: thin;scrollbar-color: var(--color-primary) transparent;}
*,*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;font-family: "Noto Kufi Arabic", sans-serif;font-weight: 300;font-optical-sizing: auto;font-style: normal;line-height: 1;}
body{background: var(--background-color);overflow-x: hidden;}
#app {background: var(--background-linear-color);overflow-x: hidden;}
header, main , footer, .popup-body {width: 100%;max-width: 1492px;margin: 0 auto;padding: 20px;}
.surface {background: var(--surface-color) !important;backdrop-filter: blur(2px);}
.surface.blur-strong {backdrop-filter: blur(4px) !important;}
.surface-strong {background: var(--surface-color-highlight);}
.popup {display: none; position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: var(--background-linear-color);z-index: 1000;overflow-y: auto;-webkit-overflow-scrolling: touch;}

.transition10 {transition: .25s;}

h1,h2,h3,h4,h5 {color: var(--header-color);font-weight: 400;}
p {color: var(--paragraph-color);}
a {color: var(--paragraph-color);text-decoration: none;}

h1 {font-size: 14pt;}
h2 {font-size: 12pt;}
h3 {font-size: 10pt;}
h4 {font-size: 8pt;}
h5 {font-size: 8pt;}
h6 {font-size: 4pt;}

img {height: 100%;}
svg {height: 100%;width: 100%;}

.absolute {position: absolute;}
.block {display: block;}
.none {display: none;}

.center {text-align: center;}
.justify-center {justify-content: center !important;}
.justify-right {justify-content: right !important;}
.justify-left {justify-content: left !important;}

.top-left-1008 {left: 10px;top: 8px;}
.top-right-1008 {right: 10px;top: 8px;}

.font8pt {font-size: 8pt !important;}
.font12pt {font-size: 12pt !important;}
.font16pt {font-size: 16pt !important;}

.bold {font-weight: 500 !important;}
.slim {font-weight: 200 !important;}

.h30px {height: 30px;}
.h60px {height: 60px;}
.h80px {height: 100px;}
.h150px {height: 150px;}
.h100p {height: 100%;}
.hmax {height: max-content;}

.w60px {width: 60px;}
.w100p {width: 100%;}
.fit {width: fit-content;}

.p1010 {padding: 10px;}
.p1515 {padding: 15px;}
.p0020 {padding: 0px 20px;}
.p1020 {padding: 10px 20px;}
.p2000 {padding: 20px 0px;}
.p2010 {padding: 20px 10px;}
.p2020 {padding: 20px;}
.p4000 {padding: 40px 0px;}
.p4020 {padding: 40px 20px;}
.p2040 {padding: 20px 40px;}

.m0005 {margin: 0px 5px;}
.m5000 {margin: 5px 0px;}
.m0010 {margin: 0px 10px;}
.m1000 {margin: 10px 0px;}
.m1500 {margin: 15px 0px;}
.m2000 {margin: 20px 0px;}
.m2020 {margin: 20px;}
.m4000 {margin: 40px 0px;}
.mauto {margin: auto;}
.m1000t {margin-top: 10px;}

.parent {position: relative;}
.pointer {cursor: pointer;}
.default-cursor {cursor: default !important;}

.border-glass {border: 1px solid var(--glass-border) !important;}

.border-left-top-bottom-0 {border-bottom-left-radius: 0px !important;border-top-left-radius: 0px !important;}
.border-right-top-bottom-0 {border-bottom-right-radius: 0px !important;border-top-right-radius: 0px !important;}

.border-primary {border-color: var(--color-primary);}
.border-light-primary {border-color: var(--color-light-primary);}
.border-secondary {border-color: var(--color-secondary);}

.bg-primary {background: var(--color-primary);}
.bg-secondary {background: var(--color-secondary);}
.bg-shadow {background: var(--bg-shadow) !important;}
.bg-blue {background: var(--color-male) !important;}

.op-05 {opacity: .5;}

.bg-range-1 {background: var(--range-color-1);}
.bg-range-2 {background: var(--range-color-2);}
.bg-range-3 {background: var(--range-color-3);}
.bg-range-4 {background: var(--range-color-4);}
.bg-range-5 {background: var(--range-color-5);}

.bg-range-0-transparent {background: #7560c426;}
.bg-range-1-transparent {background: var(--range-color-1-transparent);}
.bg-range-2-transparent {background: var(--range-color-2-transparent);}
.bg-range-3-transparent {background: var(--range-color-3-transparent);}
.bg-range-4-transparent {background: var(--range-color-4-transparent);}
.bg-range-5-transparent {background: var(--range-color-5-transparent);}

.bg-1-transparent {background: var(--bg-1-transparent);}
.bg-1-transparent.active {background: var(--range-color-1-transparent);}
.bg-5-transparent {background: var(--bg-5-transparent);}
.bg-5-transparent.active {background: var(--range-color-5-transparent);}

.color-primary {color: var(--color-primary);}
.color-secondary {color: var(--color-secondary);}
.color-male {color: var(--text-color-male);}
.color-female {color: var(--text-color-female);}

.shadow-subject {text-shadow: 0 0 8px var(--header-color);}
.shadow-male {text-shadow: 0 0 8px var(--text-color-male);}
.shadow-female {text-shadow: 0 0 8px var(--text-color-female);}

.rounded {border-radius: 8px;}
.rounded-lg {border-radius: 16px;}

.flex {display:flex;justify-content:space-between;align-items:center;}

.button {background: var(--color-primary);border: 0;color: #fff;cursor: pointer;}
.button-no-bg {background: 0;border: 0;color: var(--header-color);cursor: pointer;}

.button-no-bg.active {background: #7560c426 !important;color: var(--header-color-opp) !important;}

.hvrbg:hover {background: #7560c426 !important;color: var(--header-color-opp) !important;}
.hvrbg:hover h1, .hvrbg:hover h2, .hvrbg:hover h3, .hvrbg:hover h4, .hvrbg:hover h5, .hvrbg:hover h6 {color: var(--header-color-opp) !important;}

.grid {margin: 20px auto;width:100%;display:grid;grid-template-columns: 1fr 1fr;grid-row: auto auto;grid-column-gap: 20px;grid-row-gap: 20px;}

.switcher {transition: transform .28s ease, top .28s ease, left .28s ease, width .28s ease, opacity .28s ease;will-change: transform, left, width;}
.switcher.switcher-fixed {position: fixed;top: 20px;z-index: 999;}

.select {color: var(--header-color);font-weight: 400;font-size: 8pt;line-height: 1.5;-moz-appearance: none; appearance: none;-webkit-appearance: none;}
.select:focus {background: var(--background-color) !important;}

input {-moz-appearance: none; appearance: none;-webkit-appearance: none;font-size: 12pt;color: var(--header-color);}
textarea {-moz-appearance: none; appearance: none;-webkit-appearance: none;font-size: 12pt;color: var(--header-color);resize: none;}
input[type="checkbox"] {position: absolute;opacity: 0;width: 0;height: 0;pointer-events: none;}
input[type="checkbox"]:checked+label {background: var(--surface-color) !important;}

.search {padding-left: 70px;}
.search-icon {position: absolute;left: 10px;width: 50px;}

.radio.all:checked+label {background: var(--surface-color-highlight) !important;}
.radio.male:checked+label {background: var(--color-male) !important;}
.radio.female:checked+label {background: var(--color-female) !important;}

hr {height: 1px;background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.5, #333333), to(rgba(0, 0, 0, 0)));background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0));background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0));background: -o-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0));background: linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0));border: 0;opacity: .5;}
hr:after {display: block;content: '';height: 30px;background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0)));background-image: -webkit-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);background-image: -moz-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);background-image: -o-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);background-image: radial-gradient(farthest-side at center top, #cccccc 0%, rgba(255, 255, 255, 0) 100%);opacity: .5;}

.badgeset {display: inline-block;}
.status {width: 12px;height: 12px;position: relative;right: -10px;}
.status.positive {background: var(--range-color-5);box-shadow: 0 0 8px var(--range-color-5);}
.status.negative {background: var(--range-color-1);box-shadow: 0 0 8px var(--range-color-1);}

.step-selector {display: flex;justify-content: space-between;position: relative;overflow: hidden;}
.step {display: flex;flex-direction: column;width: 100%;align-items: center;position: relative;z-index: 1;cursor: pointer;}
.step input {display: none;}
.step span {display: block;width: 100%;height: 30px;line-height: 30px;text-align: center;color: white;font-size: 12px;}
.step.active span {background: var(--range-color);}
.step.active.last-selected {border-radius: 8px 0 0 8px;overflow: hidden;}
.last-step {border-radius: 8px 0 0 8px;overflow: hidden;}

@media(max-width: 768px) {
    .switcher h2 {font-size: 8pt;}
    #rates .badge {padding: 6px 12px;}
    #rates .badge h4 {font-size: 7pt;}
    #rates .status {width: 8px;height: 8px;right: -5px;}
    .popup-body .badgeset {margin-top: 0px !important;}
    .badge {padding: 8px 14px;}
    .badge h4 {font-size: 7pt;}
    .status {width: 9px;height: 9px;right: -5px;}
}

.progress {display: flex;flex-direction: row;overflow: hidden;background: transparent;width: 100%;}
.progress-step {height: 100%;transition: width 0.5s ease, background 0.5s ease;}
.progress h3 {color: #ececec !important;}

.unimake {height: 20px;}