@import url("https://fonts.googleapis.com/css?family=Cairo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");

/*Color palette*/
:root {
  --white: #ffffff;
  --gray98: #fafafa;
  --gray96: #f5f5f5;
  --gray94: #f0f0f0;
  --gray90: #e6e6e6;
  --gray85: #d9d9d9;
  --gray80: #cccccc;
  --gray70: #b3b3b3;
  --gray60: #999999;
  --gray50: #808080;
  --gray40: #666666;
  --gray30: #4d4d4d;
  --gray20: #333333;
  --gray15: #262626;
  --gray10: #1a1a1a;
  --gray5: #0d0d0d;
  --action: #2e4bf2;
  --confirm: #00994a;
  --danger: #e83f33;
  --warning: #f18f1c;
  --nutral: #f5f5f5;
  --diabled: #e6e6e6;
  --info: #0083f2;
  --arrowLeftPosition: 10%;
  --arrowRightPosition: 95%;
}

/*fonts*/
:root {
  --fontColor: #4d4d4d;
  --fontFamily: "Open Sans", "Cairo";
  --fontSize: 12px;
  --light: 200;
  --medium: 300;
  --regular: 500;
  --important: 500;
  --highlighted: 700;
  --bold: 900;
}

/* elements */
:root {
  --elementMinHeight: 20px;
  --elementHeight: 26px;
  --elementWidth: 100%;
  --elementMinWidth: 90px;
  --elementBorder: 1px solid var(--gray70);
  --elementPadding: 2px;
  --elementMargin: 0px;
  --elementRadius: 0px;
}

/* containers */

:root {
  --containerPadding: 0px;
  --containerMargin: 0px;
  --containerBorder: 0px dashed var(--gray70);
  --containerRadius: 0;
  --containerMaxHeight: 28px;
  --containerHeight: 35px;
}

* {
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  color: var(--fontColor);
  outline: none;
  font-weight: var(--important);
  box-sizing: border-box;
}

html,
body {
  background: var(--white);
  padding: 0px;
  margin: 0px;
  height: 100%;
  min-height: 100%;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*  width */
.w8 {
  width: 8px !important;
}
.w12 {
  width: 12px !important;
}
.w16 {
  width: 16px !important;
}
.w20 {
  width: 20px !important;
}
.w24 {
  width: 24px !important;
}
.w32 {
  width: 32px !important;
}
.w40 {
  width: 40px !important;
}
.w50 {
  width: 50px !important;
}

.w100 {
  width: 100px !important;
}
.w200 {
  width: 200px !important;
}
.w300 {
  width: 300px !important;
}
.w400 {
  width: 400px !important;
}
.w500 {
  width: 500px !important;
}
.w600 {
  width: 600px !important;
}
.w700 {
  width: 700px !important;
}
.w800 {
  width: 800px !important;
}

.w100p {
  width: 100% !important;
}
.w50p {
  width: 50% !important;
}
.w25p {
  width: 25% !important;
}

/*  height    */
.h8 {
  height: 8px !important;
}
.h12 {
  height: 12px !important;
}
.h16 {
  height: 16px !important;
}
.h24 {
  height: 24px !important;
}
.h32 {
  height: 32px !important;
}
.h40 {
  height: 40px !important;
}
.h50 {
  height: 50px !important;
}

.h100 {
  height: 100px !important;
}
.h200 {
  height: 200px !important;
}
.h300 {
  height: 300px !important;
}
.h400 {
  height: 400px !important;
}
.h500 {
  height: 500px !important;
}
.h600 {
  height: 600px !important;
}
.h700 {
  height: 700px !important;
}
.h800 {
  height: 800px !important;
}

.h100p {
  height: 100% !important;
}
.h50p {
  height: 50% !important;
}
.h25p {
  height: 25% !important;
}

/*  padding   */
.p2 {
  padding: 2px !important;
}
.p4 {
  padding: 4px !important;
}
.p5 {
  padding: 5px !important;
}
.p8 {
  padding: 8px !important;
}
.p10 {
  padding: 10px !important;
}
.p20 {
  padding: 20px !important;
}
.plr10 {
  padding-left: 10px;
  padding-right: 10px;
}
.plr20 {
  padding-left: 20px;
  padding-right: 20px;
}

/*  margin  */
.m2 {
  margin: 2px !important;
}
.m4 {
  margin: 4px !important;
}
.m5 {
  margin: 5px !important;
}
.m8 {
  margin: 8px !important;
}
.m10 {
  margin: 10px !important;
}
.m20 {
  margin: 20px !important;
}
.mlr10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mlr20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mlr25 {
  margin-left: 25px;
  margin-right: 25px;
}

.mt2 {
  margin-top: 2px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}

/* font */
.f10 {
  font-size: 10px !important;
}
.f11 {
  font-size: 11px !important;
}
.f12 {
  font-size: 12px !important;
}
.f13 {
  font-size: 13px !important;
}
.f14 {
  font-size: 14px !important;
}
.f16 {
  font-size: 16px !important;
}
.f18 {
  font-size: 18px !important;
}
.f20 {
  font-size: 20px !important;
}
.f24 {
  font-size: 24px !important;
}
.bold {
  font-weight: bold;
}

.r1 {
  border-radius: 1px !important;
}
.r5 {
  border-radius: 5px !important;
}
.r10 {
  border-radius: 10px !important;
}
.r20 {
  border-radius: 20px !important;
}

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