/* -------------------------------------------------------------------------- */
/*                                    Fonts                                   */
/* -------------------------------------------------------------------------- */
/* 100 - Thin */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

/* 200 - ExtraLight */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

/* 300 - Light */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

/* 400 - Regular */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* 500 - Medium */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

/* 600 - SemiBold */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

/* 700 - Bold */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* 800 - ExtraBold */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

/* 900 - Black */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

/* -------------------------------------------------------------------------- */
/*                          Override Bootstrap Colors                         */
/* -------------------------------------------------------------------------- */
:root {
    --bs-link-color: #ff7648;
    --bs-primary: #FF7648;
    --bs-primary-darken: #ee673a;
    --bs-font-sans-serif: 'Poppins', sans-serif;
    --bs-btn-focus-shadow-rgb: rgb(255, 118, 72);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 118, 72,.5);
    --bs-primary-rgb: 255, 118, 72;
    --bs-dropdown-link-active-bg: #FF7648;
}

/* a:hover {
    color: #eb5625 !important;
} */

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #e6e6e6;
    --bs-btn-border-color: #e6e6e6;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #c6c7c8;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #e6e6e6;
    --bs-btn-disabled-border-color: #e6e6e6;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--bs-primary);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-darken);
    --bs-btn-hover-border-color: var(--bs-primary-darken);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-darken);
    --bs-btn-active-border-color: var(--bs-primary-darken);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(255, 118, 72,.5);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.offcanvas {
    --bs-offcanvas-width: 350px;
}

::placeholder {
  color: var(--bs-body-color) !important;
  opacity: .5 !important;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    outline: 0;
    
    box-shadow: 0 0 0 .25rem rgba(255, 118, 72, .25);
}

.link-primary:active, .link-primary:focus, .link-primary:hover {
  color: #ee673a !important;
  -webkit-text-decoration-color: #ee673a !important;
  text-decoration-color: #ee673a !important;
}

.nav-link:focus, .nav-link:hover {
    color: #ee673a;
}

.accordion-button:not(.collapsed) {
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/*                             ChoicesJs Overrides                            */
/* -------------------------------------------------------------------------- */
.choices__list--single {
  padding: 0 16px 0 0;
}

.choices {
  margin-bottom: 0px;
}

/* -------------------------------------------------------------------------- */
/*                                   Widgets                                  */
/* -------------------------------------------------------------------------- */

/* -------------------------------- Grid Menu ------------------------------- */

.widget-grid_menu a {
  border-radius: 20px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #ccc;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.widget-grid_menu .item .title {
  text-transform: uppercase;
}

.widget-grid_menu .title {
  font-size: 13px;
}

@media (min-width: 768px) {
  .widget-grid_menu .title {
    font-size: 16px;
  }
}

/* ---------------------------- Accordion Simple ---------------------------- */
.widget-accordion_simple {
  .title {
    font-weight: 600;
    font-size: 19px;
  }

  .icon {
    display: none;
  }

  .accordion-toggle.collapsed {
    .icon-plus {
      display: initial;
    }
  }

  .accordion-toggle:not(.collapsed) {
    .icon-minus {
      display: initial;
    }
  }

  a.accordion-toggle {
    text-decoration: none;
    color:#424242;
  }

  .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: #5B5B5B;
  }

  .panel {
    border-bottom: 1px solid #ccc;
    padding: 12px 0;
    font-size: 16px;

    @media (max-width: 767px) {
      font-size: 14px;
    }
  }

  .panel-body {
    color: #000;
    padding: 12px 0;
    font-size: 14px;

    @media (max-width: 767px) {
      font-size: 13px;
    }
  }


}

/* -------------------------------------------------------------------------- */
/*                               Generic Styles                               */
/* -------------------------------------------------------------------------- */
.view-title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  text-align: center;

  @media (min-width: 768px) {
    font-size: 32px;
  }
}

.form-switch .form-check-input {
  width: 3em;
  height: 2em;
}

.form-switch.switch-sm .form-check-input {
  width: 2em !important;
  height: 1em !important;
}

.switch-2-option {
  &.checked .right {
    color: #FF7648;
  }
  &:not(.checked) .left {
    color: #FF7648;
  }

  .form-check-input,.form-check-input:focus {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FF7648'/%3e%3c/svg%3e");
  }
  .form-check-input:checked {
      background-color: #fff;
      border-color: #fff;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FF7648'/%3e%3c/svg%3e");
  }
}

.form-check-input:checked {
    background-color: #ff7648;
    border-color: #ff7648;
}

.form-check-input:focus {
    border-color: #fea886;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 118, 72, .25);
}

/* -------------------------------------------------------------------------- */
/*                                 Scrollbars                                 */
/* -------------------------------------------------------------------------- */
  
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #ababab #ffffff;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way chrome won't override `::-webkit-scrollbar-*` selectors */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #00000077 #00000000 !important;
}

/* -------------------------------------------------------------------------- */
/*                                product line                                */
/* -------------------------------------------------------------------------- */
.project-product-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 1.5rem;

    .product-img-outer {
        border: 1px solid #ddd;
        padding: 6px;
        border-radius: 4px;
        max-width: 140px;
        max-height: 140px;
        margin-right: 12px;
        aspect-ratio: 1 / 1;
        height: 100%;
        width: 100%;
    }
    .product-img-container {
        background-color: #E4E4E433;
        height: 100%;
        width: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            mix-blend-mode: multiply;
        }
        
    }
    .title {
        font-weight: 600;
        font-size: 17px;
        margin-bottom: 4px;
        line-height: 130%;
    }
    .subtitle {
        font-size: 13px;
        margin-bottom: 0;
    }
    .downloads {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
    }
    .download-file-link {
        border: 1px solid #767676;
        color: #1E1E1E !important;
        text-decoration: none;
        padding: 4px;
        font-size: 11px;
        margin-bottom: 8px;
        margin-right: 8px;

        @media (max-width: 767px) {
          font-size: 10px;
        }

        .extension {
            font-weight: 600;
        }
    }
}