@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap');
/*............... GENERAL STYLE .........................*/
  :root {
    color-scheme: light;
    --color-first: #343434; /* primary text */
    --color-second: #2277D1; /* denim blue accent */
    --color-third: #9EEAF9; /* light cyan accent */
    --color-white: #FFFFFF;
    --color-light: #EDEEEF;
    --color-black: #030303;
    --color-dark: #343434;
    --color-hover: #C0DFFF; /* pale sky hover */
    --color-active: #9EEAF9; /* light cyan active */
    --color-red: #DA0000;
    --bg-light-gray: #EDEEEF;
    --bg-gray: #FFFFFF;
    --bg-gray1: #C0DFFF;
    --bg-gray2: #C0DFFF;
    --font-family-primary: "Open Sans", sans-serif;
    --font-family-heading: "Poppins", sans-serif;
    --shadow: 0 1px 2px 0 rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .13);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --color-first: #FFFFFF;
      --color-second: #9EEAF9;
      --color-third: #C0DFFF;
      --color-white: #343434;
      --color-light: #030303;
      --color-black: #030303;
      --color-dark: #FFFFFF;
      --color-hover: #343434;
      --color-active: #2277D1;
      --bg-light-gray: #030303;
      --bg-gray: #030303;
      --bg-gray1: #343434;
      --bg-gray2: #343434;
    }
  }
  *,::before,::after {box-sizing: border-box;}
  * {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-first);
    text-transform: none;
    text-wrap: auto;
  }
  html { scroll-behavior: smooth; }
  body { 
    background: var(--bg-gray);
    padding-bottom: 0;
    margin: 0;
    overflow-x: hidden;
  }
  a, a:hover, a:focus, a:focus-visible { text-decoration: none; outline: none; }
  img {object-fit: contain;object-position: center;}
  ul li {list-style: none;}
  ul.list li {list-style: disc;color: var(--color-black);}
  html[data-bs-theme="dark"] .chat-input-box i {color: var(--color-first);}
  blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre { margin: 0;}  
  h1,h2,h3,h4,h5,h6 { font-family: var(--font-family-heading); color: var(--color-first); }
  .w-fit-content {width: fit-content !important;}
  .min-h-100 { min-height: 100%;height: 100%;}
  .modal-backdrop{z-index: 10000;}
  .modal{z-index: 10001;}
  .z-2 {z-index: 2;}
/*............... BORDER STYLES .........................*/  
  .border-dark {border-color: var(--color-dark) !important;}
  .border-first {border-color: var(--color-first) !important;}
  .radius-0 {border-radius: 0 !important;}
  .radius-50 {border-radius: 50px !important;}
  .radius-100 {border-radius: 100% !important;}
/*............... FORM FIELDS STYLES ....................*/   
  html[data-bs-theme="dark"] input:-webkit-autofill,
  html[data-bs-theme="dark"] input:-webkit-autofill:hover,
  html[data-bs-theme="dark"] input:-webkit-autofill:focus,
  html[data-bs-theme="dark"] input:-webkit-autofill:active {
    -webkit-box-shadow: none !important;
  } 
  input.form-control,select.form-select,textarea,
  input.form-control:focus,select.form-select:focus,textarea:focus{background: var(--color-white);color: var(--color-first);}
  .form-control {
    outline: none !important;
    box-shadow: none !important;
  }
/*............... TEXT LIMIT STYLES .....................*/ 
  .text-limit-1,.text-limit-2,.text-limit-3,.text-limit-4{
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .text-limit-1{-webkit-line-clamp: 1;}
  .text-limit-2{-webkit-line-clamp: 2;}
  .text-limit-3{-webkit-line-clamp: 3;}
  .text-limit-4{-webkit-line-clamp: 4;}
/*............... HEADING STYLES ........................*/
  .webContent .mainHeading{    
    font-size:2rem;
    line-height:1.2;
    letter-spacing: 0px;
    color:var(--color-first);
    font-family: var(--font-family-work-sans); 
    text-transform: capitalize;
  }
  .webContent .largeHeading{    
    font-size:1.8rem;
    line-height:1.2;
    color:var(--color-black);
    font-family: var(--font-family-work-sans); 
    text-transform: capitalize;
  }
  .webContent .subHeading {
    font-size: 1.4rem;
    color: var(--color-second);
    font-family: var(--font-family-roboto);
  }
  .webContent p {
    font-weight: 400;
    color: var(--color-dark);
    font-size: 1rem;
    line-height: 1.6;
    font-family: var(--font-family-roboto);
  }
/*............... COLORS & Background....................*/
  .color-first {
    color: var(--color-first) !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .bg-color-black {
    background: var(--color-black) !important;
  }
/*............... SVG COLORS ............................*/
  svg.fill-first path {
    fill: var(--color-first) !important;
  }

  svg.fill-second path {
    fill: var(--color-second) !important;
  }

  svg.fill-third path {
    fill: var(--color-third) !important;
  }
  svg.fill-white path {
    fill: var(--color-white) !important;
  }

  svg.fill-dark path {
    fill: var(--color-dark) !important;
  }

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

  svg.fill-stroke-first path {
    stroke: var(--color-first) !important;
  }

  svg.fill-stroke-second path {
    stroke: var(--color-second) !important;
  }

  svg.fill-stroke-third path {
    stroke: var(--color-third) !important;
  }
  svg.fill-stroke-white path {
    stroke: var(--color-white) !important;
  }

  svg.fill-stroke-dark path {
    stroke: var(--color-dark) !important;
  }

  svg.fill-stroke-black path {
    stroke: var(--color-black) !important;
  }
/*............... ICON SIZES ............................*/
  .iconSize-8 {
    min-width: 8px;
    height: 8px;
  }

  .iconSize-10 {
    min-width: 10px;
    height: 10px;
  }
  .iconSize-12 {
    min-width: 12px;
    height: 12px;
  }
  .iconSize-15 {
    min-width: 15px;
    height: 15px;
  } 
  .iconSize-16 {
    min-width: 16px;
    height: 16px;
  }
  .iconSize-18 {
    min-width: 18px;
    height: 18px;
  }
  .iconSize-20 {
    min-width: 20px;
    height: 20px;
  }
  .iconSize-24 {
    min-width: 24px;
    height: 24px;
  }
  .iconSize-25 {
    min-width: 25px;
    height: 25px;
  }

  .iconSize-30 {
    min-width: 30px;
    height: 30px;
  }

  .iconSize-35 {
    min-width: 35px;
    height: 35px;
  }

  .iconSize-40 {
    min-width: 40px;
    height: 40px;
  }
  .iconSize-48 {
    min-width: 48px;
    height: 48px;
  }
/*............... FONT SIZE..............................*/
  .text-xxl {
    font-size: 1.5rem !important;
    line-height: normal;
  }

  .text-xl {
    font-size: 1.25rem !important;
    line-height: normal;
  }

  .text-lg {
    font-size: 1.125rem !important;
    line-height: normal;
  }

  .text-md {
    font-size: 1rem !important;
    line-height: normal;
  }

  .text-sm {
    font-size: 0.875rem !important;
    line-height: normal;
  }

  .text-xs {
    font-size: 0.75rem !important;
    line-height: normal;
  }
/*............... FONT WIGHT ............................*/
  .fw-400 {
    font-weight: 400 !important;
  }

  .fw-500 {
    font-weight: 500 !important;
  }

  .fw-600 {
    font-weight: 600 !important;
  }

  .fw-700 {
    font-weight: 700 !important;
  }
/*............... BUTTON STYLE ..........................*/
  .button-style {
    border-radius: 5px;
    padding: 5px 20px;
    letter-spacing: 0px;
    text-transform: capitalize;
    outline: 0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    background-color: transparent;
  }
  .button-style.button-sm{padding: 3px 10px;font-size:0.875rem; }
  .button-style:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .btn-w-100 { width: 100px;text-align: center; }  
  .no-bg-btn {
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .btn-outline-first {
    color: var(--color-first);
    border: 1px solid var(--color-first);
  }

  .btn-outline-second {
    color: var(--color-second);
    border: 1px solid var(--color-second);
  }

  .btn-outline-third {
    color: var(--color-third);
    border: 1px solid var(--color-third);
  }

  .btn-first {
    background: var(--color-first);
    color: var(--color-white);
    border: 1px solid var(--color-first)
  }

  .btn-second {
    background: var(--color-second);
    color: var(--color-white);
    border: 1px solid var(--color-second)
  }

  .btn-third {
    background: var(--color-third);
    color: var(--color-white);
    border: 1px solid var(--color-third)
  }
/*............... DROPDOWN STYLE ........................*/
  .no-toggle-after:after {
    display: none !important;
  }
  .dropdown-toggle {
    white-space: unset;
  }
  .dropdown-box {
    transform: translate(0, 0) !important;
  }
  .dropdown-box .dropdown-item .dropdown-a {
    min-height: 48px;
  }
  .dropdown-box .dropdown-item.active .dropdown-a,
  .dropdown-box .dropdown-item .dropdown-a:hover {
    border: 1px solid var(--color-dark);
    background-color: var(--color-light) !important;
  }  
  .dropdown-item:focus, .dropdown-item:hover{background: transparent;}
/*............... MAIN SECTION ..........................*/  
  .main-layout-container {
    display: flex;
    min-height: 100vh;
    padding-top: 76px;
    position: relative;
  }

  .main-content-wrapper {
    flex: 1;
    margin-left: 100px;
    min-height: calc(100vh - 76px);
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease;
    width: calc(100% - 100px);
  }

  .main-content-wrapper.has-slide-menu {
    margin-left: 360px;
    width: calc(100% - 360px);
  }
  
  @media screen and (max-width: 1400px) {
    .main-content-wrapper.has-slide-menu {
      margin-left: 360px;
      width: calc(100% - 360px);
    }
  }
  
  @media screen and (max-width: 1200px) {
    .click-menu-panel,
    .slide-menu-panel {
      width: 240px;
    }
    
    .main-content-wrapper.has-slide-menu {
      margin-left: 340px;
      width: calc(100% - 340px);
    }
    
    .filter-bar-section.has-slide-menu {
      margin-left: 340px;
      width: calc(100% - 340px);
    }
    
    footer.has-slide-menu {
      margin-left: 340px;
      width: calc(100% - 340px);
    }
  }

  .main-section {
    width: 100%;
    margin: 0;
    padding-top: 0;
    flex: 1;
    padding-bottom: 60px;
  }

  .webContent {
    padding: 20px 24px;
    width: 100%;
    max-width: 100%;
    background-color: #f1f3f4    ;
  }

  @media screen and (max-width: 991px) {
    .main-content-wrapper {
      margin-left: 0 !important;
      width: 100% !important;
    }

    .main-content-wrapper.has-slide-menu {
      margin-left: 0 !important;
      width: 100% !important;
    }

    .webContent {
      padding: 16px;
    }
    
    .main-layout-container {
      flex-direction: column;
    }
  }

  @media screen and (max-width: 768px) {
    .webContent {
      padding: 12px;
    }
    
    .main-section {
      padding-bottom: 80px;
    }
  }

  @media screen and (max-width: 576px) {
    .webContent {
      padding: 8px;
    }
    
    .main-section {
      padding-bottom: 100px;
    }
  }
  
  @media screen and (max-width: 480px) {
    .webContent {
      padding: 8px 4px;
    }
  }

  .main-section-padding-left {
    padding-left: 0;
  }

  /* Adjust for slide menu panel */