/* Global Colors */
:root {
    /* Blues */
    --primary-blue: #1863dc;
    --secondary-blue: #60abf9;
    --accent-blue: #e1eeff;

    /* Item Selected Blue */
    --item-selected-blue: #e0efff;

    /* Text Colors */
    --text-color1: #000;
    --text-color2: #333;
    --text-color3: #8d9297;
    --text-color4: #798292;
    --text-color5: #0c0c0c;
    --text-color6: #6b6b6b;
    --text-color7: #41454d;
    --text-color8: #586370;

    /* Background Colors */
    --bg-color1: #d7d7da;
    --bg-color2: #ececf1;
    --bg-color3: #f7f7fa;
    --bg-color4: #e3e3e6;
    --bg-color5: #fbfbfb;
    --bg-color6: #f3f3f3;
    /* Main Fonts */
    --primary-font: 'Roboto', sans-serif;
    /* --primary-font: 'Montserrat', sans-serif; */

    /* Font Size */
    --fs-xxs: 0.4rem;
    --fs-xs: 0.6rem;
    --fs-sm: 0.8rem;
    --fs-med: 1rem;
    --fs-lg: 1.2rem;
    --fs-xl: 1.4rem;
    --fs-xxl: 1.8rem;
    --fs-xxxl: 2rem;
    --btn-font: 0.95rem;
    --close-icon: 1.1rem;
    --sidebar-icon: 1.2rem;

    /* Padding */
    --pad-xxxs: 0.3rem;
    --pad-xxs: 0.4rem;
    --pad-xs: 0.6rem;
    --pad-sm: 0.8rem;
    --pad-med: 1rem;
    --pad-lg: 1.2rem;
    --pad-xl: 1.4rem;
    --pad-xxl: 1.6rem;
    --pad-xxxl: 2rem;
    --pad-xxxxl: 2.4rem;
    --pad-xxxxxl: 2.8rem;
    --pad-xxxxxxl: 3.2rem;

    /* Margin */
    --margin-xs: 0.6rem;
    --margin-sm: 0.8rem;
    --margin-med: 1rem;
    --margin-lg: 1.2rem;
    --margin-xl: 1.4rem;
    --margin-xxl: 1.6rem;
}

/* Global Colors */
.pastel-yellow{
  background-color: #ffd281;
  color: #a66c01;
}.pastel-green{
  background-color: #b3ecb3;
  color: #059f48;
}.pastel-purple{
  background-color: #e5caff;
  color: blueviolet;
}.pastel-orange {
  background-color: #ffbf7c;
  color: #dc6618;
}.pastel-blue {
  background-color: #d0e0ff;
  color: var(--primary-blue);
}.pastel-pink{
  background-color: #ffc9d2;
  color: #e03a59;
}.pastel-red{
  /* background-color: #f7a5a5; */
  background-color: #f7b8b8;
  color: #cc0202;
}.pastel-gray{
  background-color: #f2f2f2;
  color: gray !important;
}.pastel-gold{
  background: linear-gradient(135deg, #ffbc00 0%, #fbd881 100%);
  color: #7c5b1e;
}

.notification-green{
  background-color: rgb(232, 245, 233);
  color: rgb(46, 125, 50);
}.notification-green.notification-border{
  border: 1px solid #b5dab8;
}.notification-yellow{
  background-color: rgb(255, 248, 225);
  color: #db9e50;
}.notification-yellow.notification-border{
  border: 1px solid #facc78;
}

/* Max Width */
.max-width-none{
  width: 100%;
  max-width: unset;
}

.max-width-0{
  width: 100%;
  max-width: 1100px;
}.max-width-1{
  width: 100%;
  max-width: 1000px;
}.max-width-2{
  width: 100%;
  max-width: 900px;
}.max-width-3{
  width: 100%;
  max-width: 800px;
}.max-width-4{
  width: 100%;
  max-width: 700px;
}.max-width-5{
  width: 100%;
  max-width: 600px;
}.max-width-6{
  width: 100%;
  max-width: 500px;
}.max-width-7{
  width: 100%;
  max-width: 400px;
}.max-width-8{
  width: 100%;
  max-width: 300px;
}.max-width-9{
  width: 100%;
  max-width: 200px;
}.max-width-9-1{
  width: 100%;
  max-width: 190px;
}.max-width-9-2{
  width: 100%;
  max-width: 180px;
}.max-width-9-3{
  width: 100%;
  max-width: 170px;
}.max-width-9-4{
  width: 100%;
  max-width: 160px;
}.max-width-9-5{
  width: 100%;
  max-width: 150px;
}.max-width-9-6{
  width: 100%;
  max-width: 140px;
}.max-width-9-7{
  width: 100%;
  max-width: 130px;
}.max-width-9-8{
  width: 100%;
  max-width: 120px;
}.max-width-9-9{
  width: 100%;
  max-width: 110px;
}.max-width-10{
  width: 100%;
  max-width: 100px;
}.max-width-10-1{
  width: 100%;
  max-width: 90px;
}

.max-width-extend-1{
  width: 100%;
  max-width: 1400px;
}.max-width-extend-2{
  width: 100%;
  max-width: 1500px;
}.max-width-extend-3{
  width: 100%;
  max-width: 1600px;
}.max-width-extend-4{
  width: 100%;
  max-width: 1700px;
}

.width-0{
  width: 15rem;
}.width-1{
  width: 14rem;
}.width-2{
  width: 13rem;
}.width-3{
  width: 12rem;
}.width-4{
  width: 11rem;
}.width-5{
  width: 10rem;
}.width-6{
  width: 9rem;
}.width-7{
  width: 8rem;
}.width-8{
  width: 7rem;
}.width-9{
  width: 6rem;
}.width-10{
  width: 5rem;
}.width-11{
  width: 4rem;
}.width-12{
  width: 3rem;
}.width-13{
  width: 2rem;
}

.min-width-0{
  min-width: 0px;
}.min-width-0-1{
  min-width: 10px;
}.min-width-0-2{
  min-width: 20px;
}.min-width-0-3{
  min-width: 30px;
}.min-width-0-4{
  min-width: 40px;
}.min-width-0-5{
  min-width: 50px;
}.min-width-0-6{
  min-width: 60px;
}.min-width-0-7{
  min-width: 70px;
}.min-width-0-8{
  min-width: 80px;
}.min-width-0-9{
  min-width: 90px;
}.min-width-1{
  min-width: 100px;
}.min-width-2{
  min-width: 200px;
}.min-width-2-1{
  min-width: 210px;
}.min-width-2-2{
  min-width: 220px;
}.min-width-2-3{
  min-width: 230px;
}.min-width-2-4{
  min-width: 240px;
}.min-width-2-5{
  min-width: 250px;
}.min-width-3{
  min-width: 300px;
}.min-width-4{
  min-width: 400px;
}.min-width-5{
  min-width: 500px;
}.min-width-6{
  min-width: 600px;
}

.align-center{
  align-items: center;
}.justify-center{
  justify-content: center;
}

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

.overflow-unset{
  overflow: unset !important;
}

/* No Margin */
.margin-0{
  margin: 0 !important;
}

.margin-top-0{
  margin-top: 0 !important;
}.margin-top-1{
  margin-top: 0.2rem;
}.margin-top-2{
  margin-top: 0.4rem;
}.margin-top-3{
  margin-top: 0.6rem;
}.margin-top-4{
  margin-top: 0.8rem;
}.margin-top-5{
  margin-top: 1rem;
}.margin-top-6{
  margin-top: 1.2rem;
}.margin-top-7{
  margin-top: 1.4rem;
}.margin-top-8{
  margin-top: 1.6rem;
}.margin-top-9{
  margin-top: 1.8rem;
}.margin-top-10{
  margin-top: 2rem;
}.margin-top-11{
  margin-top:2.2rem;
}.margin-top-12{
  margin-top: 2.4rem;
}.margin-top-13{
  margin-top: 2.6rem;
}.margin-top-14{
  margin-top: 2.8rem;
}.margin-top-15{
  margin-top: 3rem;
}.margin-top-16{
  margin-top: 3.2rem;
}.margin-top-17{
  margin-top: 3.4rem;
}.margin-top-18{
  margin-top: 3.6rem;
}.margin-top-19{
  margin-top: 3.8rem;
}.margin-top-20{
  margin-top: 4rem;
}

.margin-bottom-0{
  margin-bottom: 0 !important;
}.margin-bottom-1{
  margin-bottom: 0.2rem;
}.margin-bottom-2{
  margin-bottom: 0.4rem;
}.margin-bottom-3{
  margin-bottom: 0.6rem;
}.margin-bottom-4{
  margin-bottom: 0.8rem;
}.margin-bottom-5{
  margin-bottom: 1rem;
}.margin-bottom-6{
  margin-bottom: 1.2rem;
}.margin-bottom-7{
  margin-bottom: 1.4rem;
}.margin-bottom-8{
  margin-bottom: 1.6rem;
}.margin-bottom-9{
  margin-bottom: 1.8rem;
}.margin-bottom-10{
  margin-bottom: 2rem;
}.margin-bottom-11{
  margin-bottom:2.2rem;
}.margin-bottom-12{
  margin-bottom: 2.4rem;
}.margin-bottom-13{
  margin-bottom: 2.6rem;
}.margin-bottom-14{
  margin-bottom: 2.8rem;
}.margin-bottom-15{
  margin-bottom: 3rem;
}.margin-bottom-16{
  margin-bottom: 3.2rem;
}.margin-bottom-17{
  margin-bottom: 3.4rem;
}.margin-bottom-18{
  margin-bottom: 3.6rem;
}.margin-bottom-19{
  margin-bottom: 3.8rem;
}.margin-bottom-20{
  margin-bottom: 4rem;
}

.margin-left-0{
  margin-left: 0 !important;
}.margin-left-1{
  margin-left: 0.2rem;
}.margin-left-2{
  margin-left: 0.4rem;
}.margin-left-3{
  margin-left: 0.6rem;
}.margin-left-4{
  margin-left: 0.8rem;
}.margin-left-5{
  margin-left: 1rem;
}.margin-left-6{
  margin-left: 1.2rem;
}.margin-left-7{
  margin-left: 1.4rem;
}.margin-left-8{
  margin-left: 1.6rem;
}.margin-left-9{
  margin-left: 1.8rem;
}.margin-left-10{
  margin-left: 2rem;
}.margin-left-11{
  margin-left:2.2rem;
}.margin-left-12{
  margin-left: 2.4rem;
}.margin-left-13{
  margin-left: 2.6rem;
}.margin-left-14{
  margin-left: 2.8rem;
}.margin-left-15{
  margin-left: 3rem;
}.margin-left-16{
  margin-left: 3.2rem;
}.margin-left-17{
  margin-left: 3.4rem;
}.margin-left-18{
  margin-left: 3.6rem;
}.margin-left-19{
  margin-left: 3.8rem;
}.margin-left-20{
  margin-left: 4rem;
}

/* Cursor Status */
.cursor-pointer{
  cursor: pointer;
}.cursor-auto{
  cursor: auto !important;
}

/* No Padding */
.padding-0{
  padding: 0 !important;
}

.padding-top-0{
  padding-top: 0rem !important;
}.padding-top-1{
  padding-top: 1rem;
}.padding-top-1-5{
  padding-top: 1.5rem;
}.padding-top-2{
  padding-top: 2rem;
}

.padding-bottom-0{
  padding-bottom: 0rem !important;
}.padding-bottom-1{
  padding-bottom: 1rem !important;
}.padding-bottom-1-5{
  padding-bottom: 1.5rem !important;
}.padding-bottom-2{
  padding-bottom: 2rem !important;
}

.padding-left-0{
  padding-left: 0rem !important;
}.padding-left-1{
  padding-left: 1rem;
}.padding-left-1-5{
  padding-left: 1.5rem;
}.padding-left-2{
  padding-left: 2rem;
}.padding-left-2-1{
  padding-left: 2.1rem !important;
}.padding-left-2-2{
  padding-left: 2.2rem !important;
}.padding-left-2-5{
  padding-left: 2.5rem !important;
}.padding-left-3{
  padding-left: 3rem;
}

.padding-right-0{
  padding-right: 0rem !important;
}.padding-right-1{
  padding-right: 1rem;
}.padding-right-1-5{
  padding-right: 1.5rem;
}.padding-right-2{
  padding-right: 2rem;
}

/* Border Radius */
.border-radius-plus{
  border-radius: 24px;
}

.hidden {
  display: none !important;
}