/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights

- Line heights

- Letter spacing

--- 02 COLORS

- Primary: 
- Tints:
- Shades: 
- Accents:
- Greys
--- 05 SHADOWS



--- 06 BORDER-RADIUS

Default: 
Medium: 

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

@font-face {
    font-family: "Pilat";
    src: url("../fonts/Pilat/Pilat-Thin.woff2") format("woff2"), url("../fonts/Pilat/Pilat-Thin.woff") format("woff");
    font-weight: 250;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat";
    src: url("../../fonts/Pilat/Pilat-Light.woff2") format("woff2"), url("../fonts/Pilat/Pilat-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat";
    src: url("../fonts/Pilat/Pilat-Regular.woff2") format("woff2"), url("../fonts/Pilat/Pilat-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat";
    src: url("../fonts/Pilat/Pilat-Book.woff2") format("woff2"), url("../fonts/Pilat/Pilat-Book.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat";
    src: url("../fonts/Pilat/Pilat-DemiBold.woff2") format("woff2"), url("../fonts/Pilat/Pilat-DemiBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat";
    src: url("../fonts/Pilat/Pilat-Bold.woff2") format("woff2"), url("../fonts/Pilat/Pilat-Bold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat";
    src: url("../fonts/Pilat/Pilat-Heavy.woff2") format("woff2"), url("../fonts/Pilat/Pilat-Heavy.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat";
    src: url("../fonts/Pilat/Pilat-Black.woff2") format("woff2"), url("../fonts/Pilat/Pilat-Black.woff") format("woff");
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat Wide";
    src: url("../fonts/Pilat/PilatWide-Bold.woff2") format("woff2"), url("../fonts/Pilat/PilatWide-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat Wide";
    src: url("../fonts/Pilat/PilatWide-Black.woff2") format("woff2"), url("../fonts/Pilat/PilatWide-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat Wide";
    src: url("../fonts/Pilat/PilatWide-Book.woff2") format("woff2"), url("../fonts/Pilat/PilatWide-Book.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat Wide";
    src: url("../fonts/Pilat/PilatWide-Thin.woff2") format("woff2"), url("../fonts/Pilat/PilatWide-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat Wide";
    src: url("../fonts/Pilat/PilatWide-Regular.woff2") format("woff2"), url("../fonts/Pilat/PilatWide-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat Wide";
    src: url("../fonts/Pilat/PilatWide-Light.woff2") format("woff2"), url("../fonts/Pilat/PilatWide-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat Wide";
    src: url("../fonts/Pilat/PilatWide-DemiBold.woff2") format("woff2"), url("../fonts/Pilat/PilatWide-DemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Pilat Wide";
    src: url("../fonts/Pilat/PilatWide-Heavy.woff2") format("woff2"), url("../fonts/Pilat/PilatWide-Heavy.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/******************************************/
/*      Color Styles      */
/******************************************/

:root {
    --color-aqua: aqua;
    --color-black: black;
    --color-blue: blue;
    --color-fuchsia: fuchsia;
    --color-gray: gray;
    --color-green: green;
    --color-lime: lime;
    --color-maroon: maroon;
    --color-navy: navy;
    --color-olive: olive;
    --color-purple: purple;
    --color-red: red;
    --color-silver: silver;
    --color-teal: teal;
    --color-white: white;
    --color-yellow: yellow;
    /* CSS3 Colors */
    --color-aliceblue: aliceblue;
    --color-antiquewhite: antiquewhite;
    --color-aquamarine: aquamarine;
    --color-azure: azure;
    --color-beige: beige;
    --color-bisque: bisque;
    --color-blanchedalmond: blanchedalmond;
    --color-blueviolet: blueviolet;
    --color-brown: brown;
    --color-burlywood: burlywood;
    --color-cadetblue: cadetblue;
    --color-chartreuse: chartreuse;
    --color-chocolate: chocolate;
    --color-coral: coral;
    --color-cornflowerblue: cornflowerblue;
    --color-cornsilk: cornsilk;
    --color-crimson: crimson;
    --color-cyan: cyan;
    --color-darkblue: darkblue;
    --color-darkcyan: darkcyan;
    --color-darkgoldenrod: darkgoldenrod;
    --color-darkgray: darkgray;
    --color-darkgreen: darkgreen;
    --color-darkkhaki: darkkhaki;
    --color-darkmagenta: darkmagenta;
    --color-darkolivegreen: darkolivegreen;
    --color-darkorange: darkorange;
    --color-darkorchid: darkorchid;
    --color-darkred: darkred;
    --color-darksalmon: darksalmon;
    --color-darkseagreen: darkseagreen;
    --color-darkslateblue: darkslateblue;
    --color-darkslategray: darkslategray;
    --color-darkturquoise: darkturquoise;
    --color-darkviolet: darkviolet;
    --color-deeppink: deeppink;
    --color-deepskyblue: deepskyblue;
    --color-dimgray: dimgray;
    --color-dodgerblue: dodgerblue;
    --color-firebrick: firebrick;
    --color-floralwhite: floralwhite;
    --color-forestgreen: forestgreen;
    --color-gainsboro: gainsboro;
    --color-ghostwhite: ghostwhite;
    --color-gold: gold;
    --color-goldenrod: goldenrod;
    --color-greenyellow: greenyellow;
    --color-honeydew: honeydew;
    --color-hotpink: hotpink;
    --color-indianred: indianred;
    --color-indigo: indigo;
    --color-ivory: ivory;
    --color-khaki: khaki;
    --color-lavender: lavender;
    --color-lavenderblush: lavenderblush;
    --color-lawngreen: #0b7304;
    --color-lemonchiffon: lemonchiffon;
    --color-lightblue: lightblue;
    --color-lightcoral: lightcoral;
    --color-lightcyan: lightcyan;
    --color-lightgoldenrodyellow: lightgoldenrodyellow;
    --color-lightgray: lightgray;
    --color-lightgreen: lightgreen;
    --color-lightpink: lightpink;
    --color-lightsalmon: lightsalmon;
    --color-lightseagreen: lightseagreen;
    --color-lightskyblue: lightskyblue;
    --color-lightslategray: lightslategray;
    --color-lightsteelblue: lightsteelblue;
    --color-lightyellow: lightyellow;
    --color-limegreen: limegreen;
    --color-linen: linen;
    --color-magenta: magenta;
    --color-mediumaquamarine: mediumaquamarine;
    --color-mediumblue: mediumblue;
    --color-mediumorchid: mediumorchid;
    --color-mediumpurple: mediumpurple;
    --color-mediumseagreen: mediumseagreen;
    --color-mediumslateblue: mediumslateblue;
    --color-mediumspringgreen: mediumspringgreen;
    --color-mediumturquoise: mediumturquoise;
    --color-mediumvioletred: mediumvioletred;
    --color-midnightblue: midnightblue;
    --color-mintcream: mintcream;
    --color-mistyrose: mistyrose;
    --color-moccasin: moccasin;
    --color-navajowhite: navajowhite;
    --color-oldlace: oldlace;
    --color-olivedrab: olivedrab;
    --color-orange: orange;
    --color-orangered: orangered;
    --color-orchid: orchid;
    --color-palegoldenrod: palegoldenrod;
    --color-palegreen: palegreen;
    --color-paleturquoise: paleturquoise;
    --color-palevioletred: palevioletred;
    --color-papayawhip: papayawhip;
    --color-peachpuff: peachpuff;
    --color-peru: peru;
    --color-pink: pink;
    --color-plum: plum;
    --color-powerblue: powderblue;
    --color-purple: purple;
    --color-rosybrown: rosybrown;
    --color-royalblue: royalblue;
    --color-saddlebrown: saddlebrown;
    --color-salmon: salmon;
    --color-sandybrown: sandybrown;
    --color-seagreen: seagreen;
    --color-seashell: seashell;
    --color-sienna: sienna;
    --color-skyblue: skyblue;
    --color-slateblue: slateblue;
    --color-slategray: slategray;
    --color-snow: snow;
    --color-springgreen: springgreen;
    --color-steelblue: steelblue;
    --color-tan: tan;
    --color-thistle: thistle;
    --color-tomato: tomato;
    --color-turquoise: turquoise;
    --color-violet: violet;
    --color-wheat: wheat;
    --color-whitesmoke: whitesmoke;
    --color-yellowgreen: yellowgreen;
}

/* Example usage of color variables */
/* Define color classes */
.aqua {
    color: var(--color-aqua) !important;
}

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

.black {
    color: var(--color-black) !important;
}

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

.blue {
    color: var(--color-blue) !important;
}

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

.fuchsia {
    color: var(--color-fuchsia) !important;
}

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

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

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

.green {
    color: var(--color-green) !important;
}

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

.lime {
    color: var(--color-lime) !important;
}

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

.maroon {
    color: var(--color-maroon) !important;
}

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

.navy {
    color: var(--color-navy) !important;
}

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

.olive {
    color: var(--color-olive) !important;
}

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

.purple {
    color: var(--color-purple) !important;
}

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

.red {
    color: var(--color-red) !important;
}

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

.silver {
    color: var(--color-silver) !important;
}

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

.teal {
    color: var(--color-teal) !important;
}

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

.white {
    color: var(--color-white) !important;
}

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

.yellow {
    color: var(--color-yellow) !important;
}

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

.aliceblue {
    color: var(--color-aliceblue) !important;
}

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

.antiquewhite {
    color: var(--color-antiquewhite) !important;
}

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

.aquamarine {
    color: var(--color-aquamarine) !important;
}

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

.azure {
    color: var(--color-azure) !important;
}

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

.beige {
    color: var(--color-beige) !important;
}

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

.bisque {
    color: var(--color-bisque) !important;
}

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

.blanchedalmond {
    color: var(--color-blanchedalmond) !important;
}

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

.blueviolet {
    color: var(--color-blueviolet) !important;
}

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

.brown {
    color: var(--color-brown) !important;
}

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

.burlywood {
    color: var(--color-burlywood) !important;
}

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

.cadetblue {
    color: var(--color-cadetblue) !important;
}

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

.chartreuse {
    color: var(--color-chartreuse) !important;
}

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

.chocolate {
    color: var(--color-chocolate) !important;
}

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

.coral {
    color: var(--color-coral) !important;
}

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

.cornflowerblue {
    color: var(--color-cornflowerblue) !important;
}

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

.cornsilk {
    color: var(--color-cornsilk) !important;
}

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

.crimson {
    color: var(--color-crimson) !important;
}

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

.cyan {
    color: var(--color-cyan) !important;
}

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

.darkblue {
    color: var(--color-darkblue) !important;
}

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

.darkcyan {
    color: var(--color-darkcyan) !important;
}

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

.darkgoldenrod {
    color: var(--color-darkgoldenrod) !important;
}

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

.darkgray {
    color: var(--color-darkgray) !important;
}

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

.darkgreen {
    color: var(--color-darkgreen) !important;
}

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

.darkkhaki {
    color: var(--color-darkkhaki) !important;
}

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

.darkmagenta {
    color: var(--color-darkmagenta) !important;
}

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

.darkolivegreen {
    color: var(--color-darkolivegreen) !important;
}

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

.darkorange {
    color: var(--color-darkorange) !important;
}

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

.darkorchid {
    color: var(--color-darkorchid) !important;
}

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

.darkred {
    color: var(--color-darkred) !important;
}

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

.darksalmon {
    color: var(--color-darksalmon) !important;
}

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

.darkseagreen {
    color: var(--color-darkseagreen) !important;
}

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

.darkslateblue {
    color: var(--color-darkslateblue) !important;
}

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

.darkslategray {
    color: var(--color-darkslategray) !important;
}

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

.darkturquoise {
    color: var(--color-darkturquoise) !important;
}

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

.darkviolet {
    color: var(--color-darkviolet) !important;
}

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

.deeppink {
    color: var(--color-deeppink) !important;
}

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

.deepskyblue {
    color: var(--color-deepskyblue) !important;
}

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

.dimgray {
    color: var(--color-dimgray) !important;
}

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

.dodgerblue {
    color: var(--color-dodgerblue) !important;
}

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

.firebrick {
    color: var(--color-firebrick) !important;
}

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

.floralwhite {
    color: var(--color-floralwhite) !important;
}

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

.forestgreen {
    color: var(--color-forestgreen) !important;
}

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

.gainsboro {
    color: var(--color-gainsboro) !important;
}

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

.ghostwhite {
    color: var(--color-ghostwhite) !important;
}

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

.gold {
    color: var(--color-gold) !important;
}

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

.goldenrod {
    color: var(--color-goldenrod) !important;
}

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

.greenyellow {
    color: var(--color-greenyellow) !important;
}

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

.honeydew {
    color: var(--color-honeydew) !important;
}

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

.hotpink {
    color: var(--color-hotpink) !important;
}

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

.indianred {
    color: var(--color-indianred) !important;
}

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

.indigo {
    color: var(--color-indigo) !important;
}

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

.ivory {
    color: var(--color-ivory) !important;
}

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

.khaki {
    color: var(--color-khaki) !important;
}

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

.lavender {
    color: var(--color-lavender) !important;
}

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

.lavenderblush {
    color: var(--color-lavenderblush) !important;
}

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

.lawngreen {
    color: var(--color-lawngreen) !important;
}

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

.lemonchiffon {
    color: var(--color-lemonchiffon) !important;
}

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

.lightblue {
    color: var(--color-lightblue) !important;
}

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

.lightcoral {
    color: var(--color-lightcoral) !important;
}

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

.lightcyan {
    color: var(--color-lightcyan) !important;
}

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

.lightgoldenrodyellow {
    color: var(--color-lightgoldenrodyellow) !important;
}

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

.lightgray {
    color: var(--color-lightgray) !important;
}

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

.lightgreen {
    color: var(--color-lightgreen) !important;
}

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

.lightpink {
    color: var(--color-lightpink) !important;
}

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

.lightsalmon {
    color: var(--color-lightsalmon) !important;
}

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

.lightseagreen {
    color: var(--color-lightseagreen) !important;
}

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

.lightskyblue {
    color: var(--color-lightskyblue) !important;
}

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

.lightslategray {
    color: var(--color-lightslategray) !important;
}

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

.lightsteelblue {
    color: var(--color-lightsteelblue) !important;
}

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

.lightyellow {
    color: var(--color-lightyellow) !important;
}

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

.limegreen {
    color: var(--color-limegreen) !important;
}

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

.linen {
    color: var(--color-linen) !important;
}

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

.magenta {
    color: var(--color-magenta) !important;
}

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

.mediumaquamarine {
    color: var(--color-mediumaquamarine) !important;
}

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

.mediumblue {
    color: var(--color-mediumblue) !important;
}

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

.mediumorchid {
    color: var(--color-mediumorchid) !important;
}

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

.mediumpurple {
    color: var(--color-mediumpurple) !important;
}

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

.mediumseagreen {
    color: var(--color-mediumseagreen) !important;
}

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

.mediumslateblue {
    color: var(--color-mediumslateblue) !important;
}

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

.mediumspringgreen {
    color: var(--color-mediumspringgreen) !important;
}

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

.mediumturquoise {
    color: var(--color-mediumturquoise) !important;
}

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

.mediumvioletred {
    color: var(--color-mediumvioletred) !important;
}

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

.midnightblue {
    color: var(--color-midnightblue) !important;
}

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

.mintcream {
    color: var(--color-mintcream) !important;
}

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

.mistyrose {
    color: var(--color-mistyrose) !important;
}

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

.moccasin {
    color: var(--color-moccasin) !important;
}

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

.navajowhite {
    color: var(--color-navajowhite) !important;
}

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

.oldlace {
    color: var(--color-oldlace) !important;
}

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

.olivedrab {
    color: var(--color-olivedrab) !important;
}

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

.orange {
    color: var(--color-orange) !important;
}

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

.orangered {
    color: var(--color-orangered) !important;
}

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

.orchid {
    color: var(--color-orchid) !important;
}

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

.palegoldenrod {
    color: var(--color-palegoldenrod) !important;
}

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

.palegreen {
    color: var(--color-palegreen) !important;
}

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

.paleturquoise {
    color: var(--color-paleturquoise) !important;
}

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

.palevioletred {
    color: var(--color-palevioletred) !important;
}

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

.papayawhip {
    color: var(--color-papayawhip) !important;
}

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

.peachpuff {
    color: var(--color-peachpuff) !important;
}

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

.peru {
    color: var(--color-peru) !important;
}

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

.pink {
    color: var(--color-pink) !important;
}

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

.plum {
    color: var(--color-plum) !important;
}

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

.powderblue {
    color: var(--color-powderblue) !important;
}

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

.purple {
    color: var(--color-purple) !important;
}

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

.rosybrown {
    color: var(--color-rosybrown) !important;
}

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

.royalblue {
    color: var(--color-royalblue) !important;
}

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

.saddlebrown {
    color: var(--color-saddlebrown) !important;
}

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

.salmon {
    color: var(--color-salmon) !important;
}

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

.sandybrown {
    color: var(--color-sandybrown) !important;
}

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

.seagreen {
    color: var(--color-seagreen) !important;
}

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

.seashell {
    color: var(--color-seashell) !important;
}

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

.sienna {
    color: var(--color-sienna) !important;
}

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

.skyblue {
    color: var(--color-skyblue) !important;
}

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

.slateblue {
    color: var(--color-slateblue) !important;
}

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

.slategray {
    color: var(--color-slategray) !important;
}

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

.snow {
    color: var(--color-snow) !important;
}

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

.springgreen {
    color: var(--color-springgreen) !important;
}

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

.steelblue {
    color: var(--color-steelblue) !important;
}

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

.tan {
    color: var(--color-tan) !important;
}

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

.thistle {
    color: var(--color-thistle) !important;
}

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

.tomato {
    color: var(--color-tomato) !important;
}

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

.turquoise {
    color: var(--color-turquoise) !important;
}

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

.violet {
    color: var(--color-violet) !important;
}

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

.wheat {
    color: var(--color-wheat) !important;
}

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

.whitesmoke {
    color: var(--color-whitesmoke) !important;
}

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

.yellowgreen {
    color: var(--color-yellowgreen) !important;
}

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

/******************************************/
/*      General Styles      */
/******************************************/

*,
::after,
::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    letter-spacing: 0.5px;
}

body {
    color: #333;
    font-family: "Pilat", sans-serif;
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-primary-1, #1e1450);
}

.header-primary {
    font-weight: 900;
    text-transform: uppercase;
}

a {
    cursor: pointer;
    text-decoration: none;
    font-family: "Pilat", sans-serif;
}

/*li {
  list-style: none;
}
*/
.wrapper {
    display: flex;
}

.main {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f5f3f5;
    transition: all 0.35s ease-in-out;
}

.content {
    width: auto;
}

.content-header {
    height: 3.75rem;
    background: var( --gradient-dp-world, linear-gradient(90deg, #1e1343 0%, #312a82 50%, #5154b6 100%) );
}

.toggle-btn {
    font-size: 1.125rem;
}

/******************************************/
/*      Sidebar      */
/******************************************/

#sidebar {
    width: 70px;
    min-width: 70px;
    z-index: 1000;
    transition: all 0.25s ease-in-out;
    background: linear-gradient(0deg, #1e1343 0%, #312a82 50%, #5154b6 100%);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 35px 0 rgba(48, 57, 66, 0.6);
    height: 100vh;
}

    #sidebar.expand {
        width: 280px;
        min-width: 280px;
    }

        #sidebar.expand .logo-img {
            width: 16rem;
            padding: 1rem 1rem;
            transition: all 0.25s ease-in-out;
        }

    #sidebar:not(.expand) .logo-mini-img {
        width: 100%;
        max-width: 6rem;
        padding: 0.5rem;
        display: block;
    }

    #sidebar.expand .logo-mini-img {
        display: none;
    }

.sidebar-wrapper {
    overflow-y: auto;
    transition: all 0.2s ease-in;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
}

.sidebar-item ul li a {
    color: var(--primary-primary-6, #fff);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
    letter-spacing: 0.00875rem;
    text-transform: capitalize;
    background-color: var(--Primary-Neutral-2, #3a3a42);
    padding: -45px;
}

.sidebar-link.active {
    background-color: #ececff;
    color: var(--Primary-Primary1, #1e1450);
}

.sidebar-link:hover {
    background: linear-gradient( 90deg, rgba(236, 236, 255, 0.15) 0%, rgba(236, 236, 255, 0) 100% );
}

.sidebar-item ul li a:hover {
    background: linear-gradient(90deg, #6e6e72 0.8%, #3a3a42 100%);
}

#sidebar:not(.expand) .sidebar-logo a,
#sidebar:not(.expand) a.sidebar-link span {
    display: none;
}

.sidebar-nav {
    padding: 0rem 0 2rem 0;
    flex: 1 1 auto;
}

a.sidebar-link {
    padding: 0.75rem 1.625rem;
    color: var(--primary-primary-6, #fff);
    position: relative;
    display: flex;
    gap: 0.75rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem; /* 171.429% */
    letter-spacing: 0.00875rem;
    text-transform: capitalize;
}

#sidebar.expand a.sidebar-link:has(.fa-arrow-right) {
    padding-left: 48px;
    padding-right: 12px;
}

.sidebar-link i {
    font-size: 1.1rem;
    line-height: 1.5;
}

#sidebar:not(.expand) .sidebar-link i {
    font-size: 1.25rem;
}

a.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.075);
    border-left: 3px solid #3b7ddd;
}

#sidebar:not(.expand) .sidebar-item .sidebar-dropdown {
    position: absolute;
    left: 70px;
    background-color: #0e2238;
    padding: 0;
    min-width: 15rem;
    display: none;
}

#sidebar:not(.expand) .sidebar-item:hover > .has-dropdown + .sidebar-dropdown {
    display: block;
    max-height: 15em;
    width: max-content;
    opacity: 1;
    z-index: 1;
}

    #sidebar:not(.expand)
    .sidebar-item:hover > .has-dropdown + .sidebar-dropdown
    span:not(.secondary-menu),
    #sidebar:not(.expand)
    .sidebar-item:hover > .has-dropdown + .sidebar-dropdown
    span:not(.primary-menu) {
        display: inline-block;
    }

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 0.075rem 0.075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all 0.2s ease-out;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all 0.2s ease-out;
}

/******************************************/
/*      Sidebar end     */
/******************************************/

.table-header {
    background: var(--primary-primary-2, #3e3c90) !important;
    color: var(--primary-primary-6, #fff);
}

/*.tbody {
    color: var(--primary-dpw-black-main, #0F0F19); 
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 450;
    line-height: 1rem;*/ /* 114.286% */
/*}*/
/*
table.table tbody tr td,
table.table thead tr th,
table.table thead {
    border-left: 1px solid #f4f4f4;
    border-right: 1px solid #f4f4f4;
}*/

/******************************************/
/*      Buttons and Badges     */
/******************************************/
.btn--border-radius {
    border-radius: 1.53819rem !important;
}

.btn--line-height {
    line-height: 1.33031rem;
}

.dpw-btn-blue {
    color: var(--color-white, #ffffff);
    border-radius: 0.3125rem;
    background: var(--primary-primary-2, #3e3c90);
    /*    margin-left: 5px;*/
}

    .dpw-btn-blue:hover,
    .dpw-btn-blue:active,
    .dpw-btn-blue:focus {
        color: var(--color-white, #ffffff);
        background: var(--primary-primary-2, #4a4bab);
        /*transform: scale(1.1) !important;
        margin-left: 5px;*/
    }

.dpw-btn-green {
    color: var(--color-white, #ffffff);
    border-radius: 0.3125rem;
    background: var(--semantic-semantic-1, #00ca8c);
    /*   margin-left: 5px;*/
}

    .dpw-btn-green:hover,
    .dpw-btn-green:active {
        color: var(--color-white, #ffffff);
        background: var(--semantic-semantic-1, #00b67e);
        /*  transform: scale(1.1) !important;
        margin-left: 5px;*/
    }

.dpw-btn-red {
    color: var(--color-white, #ffffff);
    border-radius: 0.3125rem;
    background: var(--semantic-semantic-3, #ff3a60);
    /*    margin-left: 5px;*/
}

    .dpw-btn-red:hover,
    .dpw-btn-red:active {
        color: var(--color-white, #ffffff);
        border-radius: 0.3125rem;
        background: var(--semantic-semantic-3, #e63456);
        /*        transform: scale(1.1) !important;
        margin-left: 5px;*/
    }
.dpw-btn-grey {
    background-color: #d3d3d3;
    color: #6c757d;
    cursor: not-allowed;
}

.dpw-btn-yellow {
    color: var(--color-white, #ffffff);
    border-radius: 0.3125rem;
    background: var(--semantic-semantic-3, #ffc90c);
    /*margin-left: 5px;*/
}

    .dpw-btn-yellow:hover,
    .dpw-btn-yellow:active,
    .dpw-btn-yellow:focus {
        color: var(--color-white, #ffffff);
        border-radius: 0.3125rem;
        background: var(--semantic-semantic-3, #e6b50b);
        /* transform: scale(1.1) !important;
        margin-left: 5px;*/
    }

.dpw-btn-default {
    color: var(--Primary-DPW-Black-Main, #0f0f19);
    border-radius: 0.3125rem;
    border: 0.665px solid #0f0f19;
    margin-left: 5px;
}

.dpw-btn-primary {
    border-radius: 1.53819rem;
    background: var( --Gradient-DP-World, linear-gradient(90deg, #1e1343 0%, #312a82 50%, #5154b6 100%) );
    color: var(--Primary-DPW-White-Main, #f5f3f5);
    text-align: center;
    font-weight: 600;
    line-height: 1.33031rem;
}

    .dpw-btn-primary:hover,
    .dpw-btn-primary:active {
        color: var(--Primary-DPW-White-Main, #f5f3f5);
        background: var( --Gradient-DP-World, linear-gradient(90deg, #5154b6 0%, #312a82 50%, #1e1343 100%) );
    }

.dpw-btn-secondary {
    border-radius: 1.53819rem;
    border: 0.665px solid #0f0f19;
    color: var(--Primary-DPW-Black-Main, #0f0f19);
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.33031rem;
}

    .dpw-btn-secondary:hover,
    .dpw-btn-secondary:active {
        border: 0.665px solid #1e1343;
        color: var(--Primary-DPW-White-Main, #f5f3f5);
        background-color: #312a82;
    }

.dpw-btn-cancel {
    border-radius: 1.53819rem;
    border: 0.665px solid #FF2261;
    color: var(--Primary-DPW-Black-Main, #FF2261);
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.33031rem;
}

    .dpw-btn-cancel:hover,
    .dpw-btn-cancel:active {
        border: 0.665px solid #FF5F5F;
        color: var(--Primary-DPW-White-Main, #f5f3f5);
        background-color: #FF5F5F;
    }

.dpw-btn-submit {
    border-radius: 1.53819rem;
    background: #23cd8a; /* Solid color */
    color: var(--Primary-DPW-White-Main, #f5f3f5);
    text-align: center;
    font-weight: 600;
    line-height: 1.33031rem;
}

    .dpw-btn-submit:hover,
    .dpw-btn-submit:active {
        color: var(--Primary-DPW-White-Main, #f5f3f5);
        background: #00E68C; /* Keep the same solid color on hover/active */
    }


.dpw-btn-blue.disabled,
.dpw-btn-yellow.disabled,
.dpw-btn-red.disabled,
.dpw-btn-green.disabled,
.dpw-btn-default.disabled {
    background: #777777;
    color: var(--color-white, #ffffff);
}

.form-label--text {
    font-size: 0.9rem;
    font-weight: 800;
}

/*input[type="checkbox"] {
  margin: 4px 0 0;
  line-height: normal;
  width: 20px;
  height: 20px;
}*/

.dpw-txt-pending,
.pending-dpw-txt {
    font-weight: 800;
    color: #5154b6;
    background-color: rgb(81 84 182 / 15%);
    padding: 3px 6px !important;
    border-radius: 5px;
    line-height: 22px;
    border: 1px #5154b6 solid;
    font-size: 0.875rem;
    height: fit-content;
    min-width: 8rem;
}

.dpw-txt-transaction,
.transaction-dpw-txt {
    font-weight: 800;
    color: #5154b6;
    background-color: rgb(81 84 182 / 15%);
    padding: 3px 6px !important;
    border-radius: 5px;
    line-height: 22px;
    border: 1px #ac6cff solid;
    font-size: 0.875rem;
    height: fit-content;
    min-width: 8rem;
}
.badge--inprogress {
    font-weight: 800;
    color: #5154b6;
    background-color: rgb(81 84 182 / 15%);
    border: 1px #5154b6 solid;
}


.dpw-txt-dark {
    font-weight: 800;
    color: #000000d9;
    background-color: rgb(0 0 0 / 13%);
    padding: 3px 6px !important;
    border-radius: 5px;
    line-height: 22px;
    border: 1px black solid;
    font-size: 0.875rem;
    height: fit-content;
    min-width: 8rem;
}

.dpw-txt-approve,
.approve-dpw-txt {
    font-weight: 800;
    color: #56a41a;
    background-color: rgb(111 213 32 / 15%);
    padding: 3px 6px !important;
    border-radius: 5px;
    line-height: 22px;
    border: 1px #6fd520 solid;
    font-size: 0.875rem;
    height: fit-content;
    min-width: 8rem;
}

.badge--success {
    font-weight: 800;
    color: #56a41a;
    background-color: rgb(111 213 32 / 15%);
    border: 1px #6fd520 solid;
}

.dpw-txt-reject,
.reject-dpw-txt {
    font-weight: 800;
    color: #ff5f5f;
    background-color: rgb(255 95 95 / 15%);
    padding: 3px 6px !important;
    border-radius: 5px;
    line-height: 22px;
    border: 1px #ff5f5f solid;
    font-size: 0.875rem;
    height: fit-content;
    min-width: 8rem;
}

.badge--danger {
    font-weight: 800;
    color: #ff5f5f;
    background-color: rgb(255 95 95 / 15%);
    border: 1px #ff5f5f solid;
}

.dpw-txt-warning,
.warning-dpw-txt {
    font-weight: 800;
    color: #c29a10;
    background-color: rgb(255 201 12 / 15%);
    padding: 3px 6px !important;
    border-radius: 5px;
    line-height: 22px;
    border: 1px #ffc90c solid;
    font-size: 0.875rem;
    height: fit-content;
    min-width: 8rem;
}

.badge--warning {
    font-weight: 800;
    color: #c29a10;
    background-color: rgb(255 201 12 / 15%);
    border: 1px #ffc90c solid;
}

.badge--orange {
    font-weight: 800;
    color: #ff9300;
    background-color: #fff2e1;
    border: 1px #ff9300 solid;
}

.bg--warning {
    background-color: #c29a10 !important;
    color: white !important;
}

.bg--inprogress {
    background-color: #5154b6 !important;
    color: white !important;
}

.bg--success {
    background-color: #56a41a !important;
    color: white !important;
}

.bg--danger {
    background-color: #ff5f5f !important;
    color: white !important;
}

.text--warning {
    color: #c29a10 !important;
}

.text--inprogress {
    color: #5154b6 !important;
}

.text--success {
    color: #56a41a !important;
}

.text--danger {
    color: #ff5f5f !important;
}

.flatpickr-clear {
    margin-block: 10px;
    cursor: pointer;
}

    .flatpickr-clear button {
        font-weight: 700 !important;
    }

        .flatpickr-clear button:hover {
            background-color: #e9ecef;
        }

.bg--primary {
    background: var(--primary-primary-2, #3e3c90) !important;
    color: var(--primary-primary-6, #fff) !important;
}

.bg--secondary {
    background: #bfbfbfe8;
}

.highlight-red {
    background-color: #FF7074;
    color: white; /* Optional: to ensure text is readable on red background */
}

.header-txt-white {
    color: var(--color-white, #fff) !important;
}

.modal--title-primary {
    color: var(--primary-primary-6, #fff) !important;
}

.bg-header {
    background-color: #203764 !important;
}

.bg-body {
    background-color: #c5e0b3 !important;
}

.mandatory-aster::after {
    content: " *";
    color: red;
    font-weight: bolder;
    font-size: 1rem;
}

@media (max-width: 75em) {
    #sidebar:not(.expand) {
        margin-left: -70px;
        box-shadow: none;
    }
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
    border-radius: 4px;
    padding: 10px 0;
    animation-name: dropdown-animate;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border: 0;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

    .dropdown-menu .dropdown-header,
    .dropdown-menu .dropdown-footer {
        text-align: center;
        font-size: 15px;
        padding: 10px 25px;
    }

        .dropdown-menu .dropdown-footer a {
            color: #444444;
            text-decoration: underline;
        }

            .dropdown-menu .dropdown-footer a:hover {
                text-decoration: none;
            }

    .dropdown-menu .dropdown-divider {
        color: #a5c5fe;
        margin: 0;
    }

    .dropdown-menu .dropdown-item {
        font-size: 14px;
        padding: 10px 15px;
        transition: 0.3s;
    }

        .dropdown-menu .dropdown-item i {
            margin-right: 10px;
            font-size: 18px;
            line-height: 0;
        }

        .dropdown-menu .dropdown-item:hover {
            background-color: #f6f9ff;
        }

/*--------------------------------------------------------------
# Paginaiton
--------------------------------------------------------------*/
/*.pagination {
    display: inline-block;
}

    .pagination a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
    }

        .pagination a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }
*/

.pagination .page-link {
    color: #3e3c90;
}

    .pagination .page-link:hover {
        color: #3e3c90;
    }
/*--------------------------------------------------------------
# Spinner (loading)
--------------------------------------------------------------*/
/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index: 2500;
    /*overflow: show;*/
    margin: 0 auto;
    top: 50%;
    left: 50%;
    /*bottom: 0;
        right: 0;*/
    width: 50px;
    height: 50px;
}

    .loading:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
        /* hide "loading..." text */
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
        mix-blend-mode: multiply;
    }

        .loading:not(:required):after {
            content: "";
            display: block;
            font-size: 10px;
            width: 150px;
            height: 100px;
            background-image: url("../images/loader.gif");
            margin: 0 auto;
        }

/*overriding sweetmodal popup*/
.sweet-modal-overlay {
    z-index: 1100;
}

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -7px;
        right: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf1;
        border-left: 1px solid #eaedf1;
    }
}

@keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

.ng-cloak {
    display: none;
}

.grid--action {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
}

/*--------------------------------------------------------------
# Column Define in Table 
--------------------------------------------------------------*/
.col--1 {
    width: 1% !important;
}

.col--2 {
    width: 2% !important;
}

.col--3 {
    width: 3% !important;
}

.col--4 {
    width: 4% !important;
}

.col--5 {
    width: 5% !important;
}

.col--6 {
    width: 6% !important;
}

.col--7 {
    width: 7% !important;
}

.col--8 {
    width: 8% !important;
}

.col--9 {
    width: 9% !important;
}

.col--10 {
    width: 10% !important;
}

.col--15 {
    width: 15% !important;
}

.col--20 {
    width: 20% !important;
}

.col--25 {
    width: 25% !important;
}

.col--30 {
    width: 30% !important;
}

.col--35 {
    width: 35% !important;
}

.col--40 {
    width: 40% !important;
}

.col--45 {
    width: 45% !important;
}

.col--50 {
    width: 50% !important;
}

.col--55 {
    width: 55% !important;
}

.col--60 {
    width: 60% !important;
}

.col--65 {
    width: 65% !important;
}

.col--70 {
    width: 70% !important;
}

.col--75 {
    width: 75% !important;
}

.col--80 {
    width: 80% !important;
}

.col--85 {
    width: 85% !important;
}

.col--90 {
    width: 90% !important;
}

.col--95 {
    width: 95% !important;
}

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

/* -------------------------------------------------------------------------
  VERTICAL STEPPERS
-------------------------------------------------------------------------- */

/* Steps */
.step {
    position: relative;
    min-height: 1em;
    color: gray;
}

    .step + .step {
        margin-top: 1.5em;
    }

    .step > div:first-child {
        position: static;
        height: 0;
    }

    .step > div:not(:first-child) {
        margin-left: 1.5em;
        padding-left: 1em;
    }

    .step.step-active {
        color: #4285f4;
    }

        .step.step-active .circle {
            background-color: #4285f4;
        }

/* Circle */
.circle {
    background: gray;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 0 3px #fff;
}

    /* Vertical Line */
    .circle:after {
        content: " ";
        position: absolute;
        display: block;
        top: 1px;
        right: 50%;
        bottom: 1px;
        left: 50%;
        height: 100%;
        width: 1px;
        transform: scale(1, 2);
        transform-origin: 50% -100%;
        background-color: rgba(0, 0, 0, 0.25);
        /*z-index: -1;*/
    }

    /* Specific background colors based on status */
    .circle.bg--inprogress:after {
        background-color: #5154b6;
    }

    .circle.bg--success:after {
        background-color: #56a41a;
    }

    .circle.bg--danger:after {
        background-color: #ff5f5f;
    }

.step:last-child .circle:after {
    display: none;
}

/* Stepper Titles */
.title {
    line-height: 1.5em;
    font-weight: bold;
}

.caption {
    font-size: 0.8em;
}

.customOption {
    width: auto;
    display: initial;
    margin-left: 15px;
    border: 2px solid #bdc3c7;
    color: #34495e;
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.467;
    padding: 8px 8px;
    height: 42px;
    -webkit-appearance: listitem;
    border-radius: 6px;
}

.grid--btn-group {
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.625rem;
}

.btn--dpw:hover {
    color: unset !important;
    background-color: unset !important;
    border-color: unset !important;
}

.disabled-link {
    pointer-events: none;
    background: #cccccc !important;
    color: #666666 !important;
}

    .disabled-link:hover {
        cursor: not-allowed !important;
    }

.pe-none {
    /* pointer-events: none; */
}

    .pe-none:hover {
        cursor: not-allowed !important;
    }

.mandatory-star {
    color: red;
}

.max-content {
    width: max-content !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*--------------------------------------------------------------
# Bottom to Top button
--------------------------------------------------------------*/
#scrollToMainBtn {
    display: none;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 99;
    border: none;
    outline: none;
    transition: all 0.4s;
}

    #scrollToMainBtn:hover {
        background-color: #555; /* Add a dark-grey background on hover */
    }

/*--------------------------------------------------------------
# Overriding Boostrap datepicker
--------------------------------------------------------------*/
.datepicker {
    font-size: 0.875rem;
}

@media print {
    #scrollToMainBtn {
        display: none;
    }
}

.card-a4 {
    margin: auto;
    width: 53.75rem;
    min-height: 62.5rem;
}

.table--fixed {
    table-layout: fixed;
    width: 100%;
}

.overlined--text {
    text-decoration: overline;
}

.min-w-auto {
    min-width: auto !important;
}

.icon-grow {
    cursor: pointer;
}

    .icon-grow:hover i {
        transform: scale(1.5);
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    }

/*--------------------- Printable -----------------*/

.avoid--break {
    page-break-inside: avoid;
    /*break-inside: avoid;*/
}

.avoid-split-row tr {
    page-break-inside: avoid;
}

.pdf--page-break {
    page-break-after: always;
}

.html--2-pdf-arabic {
    font-family: 'Courier New', Courier, monospace;
    word-wrap: normal;
    direction: rtl;
}

/*--------------------- Printable End -----------------*/

.text-right-colon {
    position: relative;
}

    .text-right-colon::after {
        content: ":";
        position: absolute;
        right: 0; /* aligns the colon to the far right edge */
    }


.notify--count {
    display: inline-flex;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    justify-content: center;
    align-items: center;
    margin-left: 0.55rem;
}

.dataTables_length{
  margin-bottom: 0.5rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 22px;
    vertical-align: middle;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    transition: .4s;
    border-radius: 22px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background: var(--primary-primary-2, #3E3C90);
}

    input:checked + .slider:before {
        transform: translateX(22px);
    }