@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Raleway&display=swap');:root{
      /* --bg : #f5a82a;
      --bg_sec : #facb81;
      --brown : #ea8331;
      --black : #191714;
      --light_black : #4a4a4a;
      --grey: #b4b4b4;
      --light_grey : #f0f0f0;
      --error: #fa3939;
       */

      --bg: #1d2529;
      --bg_sec: #1d6a6a;
      --base_light: #1f8053;
      --base_sec_light: #6ab2b2;
      --base_sec_opaque: #b9b9b9;
      --light_text: #46b88a;
      --astro_yellow: #fe9e0d;
      --blue_text: #3281b9;
      --bg_color: #e4f4ff;
      --light-grey: #cfc9c98a;
      --white: #f5f5f5;
      --black: #1f1f1f;
      --grey: #534f4f;
      --error: #fa3939;
      --opaque : #000000a2;
}
body{
      font-family: "Poppins", sans-serif !important;
}
.header{
      font-family: "Raleway", sans-serif !important;
}
.primary_button{
      border: 1px solid var(--base_light);
      padding: 10px 20px;
      color: white;
      background: linear-gradient(to right, var(--bg), var(--bg_sec));
}
.primary_button:disabled{
      background: var(--bg_sec);
      cursor: not-allowed;
}
.primary_button:hover{
      background: var(--grey);
      border: 1px solid var(--black);
      color: var(--black);
}
.primary_button_outline{
      border: 1px solid var(--bg);
      padding: 10px 20px;
      background: transparent;
      color: var(--bg);
}
.primary_button_outline:hover{
      background: var(--grey);
      border: 1px solid var(--black);
      color: var(--black);
}

.flex_column{
      display: flex;
      flex-flow: column;
}
.g_10px{
      gap: 10px;
}
.g_20px{
      gap: 20px;
}
.p_10px{
      padding: 10px;
}
.p_20px{
      padding: 20px;
}
.white_text{
      color: white !important;
}
.white_bg{
      background: white;
}
.flexible{
      display: flex;
      justify-content: center;
      align-items: center;
}
.brad_10px{
      border-radius: 10px;
}
.light_grey_bg{
      background: var(--light_grey) !important;
}
.mtop_10px{
      margin-top: 10px;
}
.error_text{
      color: var(--error) !important;
}
.space_between{
      display: flex;
      justify-content: space-between;
}
.font_30px{
      font-size: 30px;
}
.font_25px{
      font-size: 25px;
}
.align_center{
      display: flex;
      align-items: center;
}
.scrollbar{
      overflow: scroll;
}
.scrollbar::-webkit-scrollbar{
      width: 10px;
      height: 10px;
}
.scrollbar::-webkit-scrollbar-thumb{
      background: var(--grey);
}
.mb_20px{
      margin-bottom: 20px;
}
.light_grey_border{
      border: 1px solid var(--light_grey);
}
.grey_bg{
      background: var(--grey);
}
.space_around{
      display: flex;
      justify-content: space-around;
}
button{
      display: flex;
      gap: 13px;
      align-items: center;
      justify-content: center;
}
.w-40{
      width: 40%;
}
a{
      text-decoration: none !important;
}
.capitalize{
      text-transform: capitalize !important;
}
.pos_rel{
      position: relative;
}
.cp{
      cursor: pointer;
}
.p_10px0{
      padding: 10px 0;
}
.black_text{
      color: black;
}
.border{
      border: 1px solid red !important;
}

/* dashboard */
.dashboard_body{
      padding: 10px;
      margin-bottom: 60px;
}
.dashboard{
      border: 1px solid var(--grey);
      background: white;
      display: flex;
      flex-flow: column;
      gap: 20px;
}
.dashboard_header{
      padding: 20px;
      background: linear-gradient(to right, var(--bg), var(--bg_sec));
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
}
.bg{
      background: var(--bg);
}
.form-control, .form-select{
      border-radius: 0px !important;
}
.mtop_30px{
      margin-top: 30px;
}
.thick{
      font-weight: 600;
}
.right{
      display: flex;
      justify-content: right;
      text-align: right;
}
.brad_0px{
      border-radius: 0px !important;
}
.flex{
      display: flex;
}
.d_none{
      display: none;
}
.hover{
      background: var(--bg_sec);
      padding: 10px;
}
.no_border{
      border: none !important;
}
.no_focus:focus{
      border: none;
      box-shadow: none;
}
.no_white_space{
      white-space: nowrap;
}
.w_fc{
      width: fit-content;
}

@media screen and (min-width : 700px) {
      .dashboard_body{
            width: 90%;
            margin: auto;
      }
}
@media screen and (min-width : 900px) {
      .dashboard_body{
            width: 880px;
            margin: auto;
            margin-bottom: 100px;
      }
}