/* green primary :#95C11F
    green hover : #83a91f
    text red hover : #E71D73
*/
:root {
  --bs-primary: #039F9C;
  --bs-primary-hover: #373847;
  --bs-danger: #D2002E;
  --bs-orange: #fd7e14;
  --text-dark-muted: #5456749c;
  /*colors for gradien*/
  --bs-primary1: #038e8b;
  --bs-primary2: #11888e;
  --bs-primary3: #437599;
  --bs-primary4: #545674;
  /*end of colors for gradien*/
  /*background base colors */
  --bg-secondary: #FFCC00;
  --bg-light: #ECECEC;
  --bg-white: #FFFFFF;
  --bg-gray: #ECECEC;
  --bg-muted: #CCCCCC;
  --bg-gray-hover: #d6d6d6;
  --bg-primary-transparent: #fbfbfb49;
  /************************/
  /* text color */
  --text-dark: #272727;
  --text-primary: #545674;
  --text-primary-hover: #545674;
  --text-info: #007AD6;
  --text-success: #00A130;
  --text-muted: #CCCCCC;
  --text-green: #0DC87D;
  /**************/
  /* font */
  --font-family: Metropolis;
  /********/
  /*border radius*/
  --br-primary: 12px;
  --br-secondary: 7px;
  --br-input-primary: .475rem;
  /***************/
  /* height */
  --input-h-primary: 42.95px;
  /*********/
  /* box-shadow */
  --box-shadow: 0px 0px 8px #0000000F;
  --text-box-shadow: 0px 3px 6px #00000029;
  /**************/
  /* border color */
  --border-color-primary: #2727276e;
  --border-color-light: #ECECEC;
  --border-color-card: #E2E2E2;
}

/************************* General Style **********************************/
body {
  font-family: var(--font-family) !important;
  background-color: var(--bg-white) !important;
}
/* overflow */
.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}
/*****************/
.page-item.active .page-link,
/******** background color ***************/
.bg-primary {
  background: var(--bs-primary4) !important;
}

.page-item.disabled .page-link {
  color: var(--bs-primary4) !important;
  pointer-events: none;
  background-color: #F4F7FA;
  border-color: transparent
}

.page-item .page-link {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.475rem;
  height: 2.5rem;
  min-width: 2.5rem;
  font-weight: 500;
  font-size: 1.075rem;
  background-color: #F4F7FA;
}

.page-item.next:not(:hover):not(:focus):not(.disabled) .page-link, .page-item.previous:not(:hover):not(:focus):not(.disabled) .page-link {
  background-color: #F4F7FA;
}

.paginate_button.page-item.next {
  background: url(/dashboard-assets/assets/media/icons/duotone/Navigation/Angle-right.svg)
}

.bg-warning,
.bg-secondary {
  background-color: var(--bg-secondary);
}

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

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

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

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

.bg-muted {
  background-color: var(--bg-muted) !important;
}
/****************************************/

/******* begain of Buttons Style ********/
.btn-primary {
  background: var(--bs-primary4) !important;
}

color: #fff !important;
background-color: var(--bs-primary-hover) !important;
}
/*end of Buttons Style*/

/******** text style  ***********/
.text-primary {
  color: var(--bs-primary) !important;
}

.text-primary3 {
  color: var(--bs-primary3) !important;
}

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

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

.text-orange {
  color: var(--bs-orange);
}

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

.text-hover-primary:hover {
  color: var(--text-primary-hover) !important;
}

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

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

.text-white {
  color: white !important;
}

.text-primary-800 {
  font-weight: 800 !important;
}

.text-primary-900 {
  font-weight: 900 !important;
}

.text-deleted {
  text-decoration: line-through !important;
}

.text-t-upper {
  text-transform: uppercase !important;
  letter-spacing: 0px !important;
}

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

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

.text-boxShadow {
  text-shadow: var(--text-box-shadow) !important;
}

.link-primary {
  color: var(--bs-primary) !important;
}
/******  end of text style ******/



/***** height *******/
.line-height {
  line-height: 2 !important;
}

.h-35px {
  height: 35px;
}

.minh-40px {
  height: 40px !important;
  min-height: 40px !important;
}

.border-none {
  border: none !important;
}


.pointer {
  cursor: pointer !important;
}

.disp-none {
  display: none;
}

.input-h-primary {
  height: var(--input-h-primary);
}
/********************/
/********* width *********/
.w-md-90 {
  width: 90% !important;
}

.w-md-80 {
  width: 80% !important;
}

.w-80px {
  width: 80px !important;
}

.w-60px {
  width: 60px !important;
}

.w-85px {
  width: 85px !important;
}

.w-170px {
  width: 170px;
}

.w-260px {
  width: 260px !important;
}

.w-600px {
  width: 600px !important;
}

.w-fit-content {
  width: fit-content !important;
}
/********************/
/* borders */
.b-primary {
  border: 1px solid var(--border-color-primary) !important;
}

.b-card {
  border: 1px solid var(--border-color-card) !important;
}

.b-light {
  border: 1px solid var(--border-color-light) !important;
}

.b-none {
  border: none !important;
}
/**** end of borders */

/* border radius */
.br-primary {
  border-radius: var(--br-primary) !important;
}

.br-8px {
  border-radius: 8px !important;
}

.br-13px {
  border-radius: 13px !important;
}

.br-20px {
  border-radius: 20px !important;
}

.CountryCodesContainer .input-with-prefix,
.br-end-none {
  border-end-end-radius: 0px !important;
  border-start-end-radius: 0px !important;
}

.phoneNumberContainer .input-with-prefix,
.br-start-none {
  border-start-start-radius: 0px !important;
  border-end-start-radius: 0px !important;
}
/******************/
.hidden {
  display: none;
}

.break-word {
  word-break: break-word !important;
}

.boxShadow {
  box-shadow: var(--box-shadow) !important;
}

.boxShadow-hover:hover {
  transition: all 0.4s !important;
  box-shadow: 0px 7px 21px #0000001A !important;
}

.title-static {
  font-size: var(--font-size-6xl);
  line-height: 50px;
  display: inline-block;
  width: 100%;
  position: relative;
}

  .title-static::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -17px;
    border-top: 5px solid var(--color-brown-200);
    box-sizing: border-box;
    width: 75px;
    height: 10px;
  }

.z-index-2 {
  z-index: 2 !important;
}
/* google-map-iframe */
.google-map-iframe iframe {
  width: 270px;
  height: 125px;
  border-radius: 4px;
}
/*********************/
/********************** end of General Style ****************************/

/*  require star */
.required-star::after {
  content: '*';
  color: var(--bs-danger) !important;
  margin: 0px 10px !important;
}
/*  end of require star */


/********** bootstrap-colorpicker style ************/
.input-group.colorpicker {
  box-sizing: border-box;
}

.colorpicker {
  padding: 0px;
  border: none;
}

  .colorpicker::before, .colorpicker::after {
    display: none;
  }
/********************************/


/*********  tagify style *************/
.iti__flag {
  background-image: url("../img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("../img/flags@2x.png");
  }
}
/********************************/



/* Ajax Loader */
.ajax-loader {
  background-color: var(--bg-primary-transparent);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1070;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

  .ajax-loader img {
    width: 140px;
  }
/****************/


/********************* hedaer style start ****************************/
.aside-header {
  box-shadow: 0px 0px 0px #0000000F !important;
  background-color: white !important;
}

  .aside-header .la-navicon.text-white,
  .aside-header .lang-icon,
  .aside-header .btn.btn-icon.text-white,
  .aside-header .flaticon-search.text-white {
    color: var(--text-dark) !important;
  }

.header {
  box-shadow: 0px 0px 0px #0000000F !important;
  z-index: 3 !important;
}

.header-fixed:not([data-kt-sticky-header=on]) .topbar .btn.btn-icon.btn-no-hover.show,
.btn-no-hover:hover {
  background-color: transparent !important;
}

/************************ hedaer style end  *************************/
/************************ asid style  *************************/
.aside-menu-header {
  background-color: var(--bs-primary4);
  border-top-right-radius: var(--br-primary);
  border-top-left-radius: var(--br-primary);
}

.drawer .aside-menu-header,
.drawer {
  border-top-right-radius: var(--br-primary);
  border-top-left-radius: 0px !important;
}

  .drawer .aside-menu-header {
    background-color: var(--bs-primary) !important;
  }

.menu-state-title-primary .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title,
.aside-menu-title-active {
  color: var(--bs-primary) !important;
}

.menu-state-bullet-primary .menu-item .aside-menu-title-active svg path,
.menu-state-bullet-primary .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title svg path {
  fill: var(--bs-primary) !important;
}

/* Media query */
@media only screen and (min-width: 992px) {
  .aside-enabled .content {
    padding-left: 30px !important;
  }

  .aside-enabled[data-kt-sticky-aside-sticky=on] .content {
    padding-left: 295px !important;
  }

  /************************ asid style end  *************************/
  /* fix phone input border radius with prefix code style */
  input.input-with-prefix {
    border-bottom-right-radius: var(--br-input-primary) !important;
    border-top-right-radius: var(--br-input-primary) !important;
  }

  .prefix-input {
    border-bottom-left-radius: var(--br-input-primary) !important;
    border-top-left-radius: var(--br-input-primary) !important;
  }
  /********************************************************/



  /************************* croppie *************************/
  .container-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    padding-bottom: 0;
  }

  .container-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

  #selectedFile-img {
    border-radius: 4px;
  }

  #upload-aphoto {
    background: red;
    border-color: red;
  }
  /******************** End of croppie *******************/



  /******************* Style from Demo2 of Timeline3 ************/
  .timeline.timeline-3 .timeline-items {
    margin: 0;
    padding: 0;
  }

    .timeline.timeline-3 .timeline-items .timeline-item {
      margin-left: 25px;
      border-left: 2px solid #EBEDF3;
      padding: 0 0 20px 50px;
      position: relative;
    }

      .timeline.timeline-3 .timeline-items .timeline-item .timeline-media {
        position: absolute;
        top: 0;
        left: -26px;
        border: 2px solid #EBEDF3;
        border-radius: 100%;
        width: 50px;
        height: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #ffffff;
        line-height: 0;
      }

        .timeline.timeline-3 .timeline-items .timeline-item .timeline-media i {
          font-size: 1.4rem;
        }

        .timeline.timeline-3 .timeline-items .timeline-item .timeline-media .svg-icon svg {
          height: 24px;
          width: 24px;
        }

        .timeline.timeline-3 .timeline-items .timeline-item .timeline-media img {
          max-width: 48px;
          max-height: 48px;
          border-radius: 100%;
        }

      .timeline.timeline-3 .timeline-items .timeline-item .timeline-content {
        border-radius: 0.85rem;
        position: relative;
        background-color: #F3F6F9;
        padding: 0.75rem 1.5rem;
      }

        .timeline.timeline-3 .timeline-items .timeline-item .timeline-content:before {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: 10px;
          left: -25px;
          border-right: solid 10px #F3F6F9;
          border-bottom: solid 17px transparent;
          border-left: solid 17px transparent;
          border-top: solid 17px transparent;
        }

      .timeline.timeline-3 .timeline-items .timeline-item:last-child {
        border-left-color: transparent;
        padding-bottom: 0;
      }
  /*************************************************************/
  /************ label style from demo2 style ******************/
  .label {
    padding: 0;
    margin: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    font-size: 0.8rem;
    background-color: #EBEDF3;
    color: #3F4254;
    font-weight: 400;
    height: 20px;
    width: 20px;
    font-size: 0.8rem;
  }

    .label.label-primary {
      color: #FFFFFF;
      background-color: #6993FF;
    }

    .label.label-outline-primary {
      background-color: transparent;
      color: #6993FF;
      border: 1px solid #6993FF;
    }

      .label.label-outline-primary.label-outline-2x {
        border: 2px solid #6993FF;
      }

    .label.label-light-primary {
      color: #6993FF;
      background-color: #E1E9FF;
    }

    .label.label-secondary {
      color: #3F4254;
      background-color: #E4E6EF;
    }

    .label.label-outline-secondary {
      background-color: transparent;
      color: #3F4254;
      border: 1px solid #E4E6EF;
    }

      .label.label-outline-secondary.label-outline-2x {
        border: 2px solid #E4E6EF;
      }

    .label.label-light-secondary {
      color: #E4E6EF;
      background-color: #EBEDF3;
    }

    .label.label-success {
      color: #ffffff;
      background-color: #1BC5BD;
    }

    .label.label-outline-success {
      background-color: transparent;
      color: #1BC5BD;
      border: 1px solid #1BC5BD;
    }

      .label.label-outline-success.label-outline-2x {
        border: 2px solid #1BC5BD;
      }

    .label.label-light-success {
      color: #1BC5BD;
      background-color: #C9F7F5;
    }

    .label.label-info {
      color: #ffffff;
      background-color: #8950FC;
    }

    .label.label-outline-info {
      background-color: transparent;
      color: #8950FC;
      border: 1px solid #8950FC;
    }

      .label.label-outline-info.label-outline-2x {
        border: 2px solid #8950FC;
      }

    .label.label-light-info {
      color: #8950FC;
      background-color: #EEE5FF;
    }

    .label.label-warning {
      color: #ffffff;
      background-color: #FFA800;
    }

    .label.label-outline-warning {
      background-color: transparent;
      color: #FFA800;
      border: 1px solid #FFA800;
    }

      .label.label-outline-warning.label-outline-2x {
        border: 2px solid #FFA800;
      }

    .label.label-light-warning {
      color: #FFA800;
      background-color: #FFF4DE;
    }

    .label.label-danger {
      color: #ffffff;
      background-color: #F64E60;
    }

    .label.label-outline-danger {
      background-color: transparent;
      color: #F64E60;
      border: 1px solid #F64E60;
    }

      .label.label-outline-danger.label-outline-2x {
        border: 2px solid #F64E60;
      }

    .label.label-light-danger {
      color: #F64E60;
      background-color: #FFE2E5;
    }

    .label.label-light {
      color: #7E8299;
      background-color: #F3F6F9;
    }

    .label.label-outline-light {
      background-color: transparent;
      color: #3F4254;
      border: 1px solid #F3F6F9;
    }

      .label.label-outline-light.label-outline-2x {
        border: 2px solid #F3F6F9;
      }

    .label.label-light-light {
      color: #F3F6F9;
      background-color: #F3F6F9;
    }

    .label.label-dark {
      color: #ffffff;
      background-color: #181C32;
    }

    .label.label-outline-dark {
      background-color: transparent;
      color: #181C32;
      border: 1px solid #181C32;
    }

      .label.label-outline-dark.label-outline-2x {
        border: 2px solid #181C32;
      }

    .label.label-light-dark {
      color: #181C32;
      background-color: #D1D3E0;
    }

    .label.label-white {
      color: #3F4254;
      background-color: #ffffff;
    }

    .label.label-outline-white {
      background-color: transparent;
      color: #ffffff;
      border: 1px solid #ffffff;
    }

      .label.label-outline-white.label-outline-2x {
        border: 2px solid #ffffff;
      }

    .label.label-light-white {
      color: #ffffff;
      background-color: #ffffff;
    }

    .label.label-inline {
      width: auto;
      padding: 0.15rem 0.75rem;
      border-radius: 0.42rem;
    }

      .label.label-inline.label-md {
        padding: 0.8rem 0.6rem;
      }

      .label.label-inline.label-lg {
        padding: 0.9rem 0.75rem;
      }

      .label.label-inline.label-xl {
        padding: 1rem 0.85rem;
      }

    .label.label-pill {
      border-radius: none;
    }

    .label.label-rounded {
      border-radius: 0.42rem;
    }

    .label.label-square {
      border-radius: 0;
    }

    .label.label-dot {
      display: inline-block;
      font-size: 0 !important;
      vertical-align: middle;
      text-align: center;
    }

    .label.label-inline {
      width: auto;
    }

    .label.label-dot {
      line-height: 6px;
      min-height: 6px;
      min-width: 6px;
      height: 6px;
      width: 6px;
    }

    .label.label-sm {
      height: 16px;
      width: 16px;
      font-size: 0.75rem;
    }

      .label.label-sm.label-inline {
        width: auto;
      }

      .label.label-sm.label-dot {
        line-height: 4px;
        min-height: 4px;
        min-width: 4px;
        height: 4px;
        width: 4px;
      }

    .label.label-lg {
      height: 24px;
      width: 24px;
      font-size: 0.9rem;
    }

      .label.label-lg.label-inline {
        width: auto;
      }

      .label.label-lg.label-dot {
        line-height: 8px;
        min-height: 8px;
        min-width: 8px;
        height: 8px;
        width: 8px;
      }

    .label.label-xl {
      height: 28px;
      width: 28px;
      font-size: 1rem;
    }

      .label.label-xl.label-inline {
        width: auto;
      }

      .label.label-xl.label-dot {
        line-height: 10px;
        min-height: 10px;
        min-width: 10px;
        height: 10px;
        width: 10px;
      }

  /*.accordion-button:not(.collapsed)::after {
    background-image: none;
  }*/

  .m-b-40 {
    margin-bottom: 40px;
  }
  /**************************************/
  /******************  delete Modal *******************/
  .swal2-styled.swal2-confirm {
    background-color: var(--bs-primary) !important;
  }
  /***************************************************/
  /************* select2 close icon in international phone number  ************/
  .CountryCodesContainer .select2-container--bootstrap5 .select2-selection__clear {
    right: 5px !important;
    left: auto !important;
  }
  /*********************************************/
  /***************** media query ********************/
  @media only screen and (min-width: 768px) {
    .p-md-5 {
      padding: 1.25rem !important;
    }
  }

  @media only screen and (min-width: 576px) {
    .mb-sm-7, .my-sm-7 {
      margin-bottom: 1.75rem !important;
    }
  }

  @media only screen and (max-width: 600px) {
    .w-600px {
      width: 100% !important;
    }
    /* tabel groupo button */
    .table .btn-group {
      flex-direction: column;
    }

      .table .btn-group .btn {
        margin: 4px 0px;
        width: 100px;
      }
    /* end of tabel groupo button */
  }
  /*************   End of  Media Query  ********************/

  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    /* Now your own custom styles */
    height: 16px;
    width: 16px;
    background: url(/dashboard-assets/assets/media/icons/clearIcon.svg);
  }