/* CSS Variable declarations for global use */

/**************************************************************/
/**             GLOBAL CSS VARIABLES STARTS                  **/
/**************************************************************/

:root {
  /* Font families and styles */
  --main-font-family: "Raleway" !important;
  --main-font-normal-style: "normal";
  --main-font-italic-style: "italic";

  /* Grafterr standard used colors */
  --main-grafterr-red-color: #e84e41;
  --main-grafterr-green-color: #1c9e76;
  --main-grafterr-blue-color: #3658a4;
  --main-grafterr-purple-color: #764b96;
  --main-grafterr-skyblue-color: #5ec1d6;
  --main-grafterr-white-color: #ffffff;
  --main-grafterr-black-color: #0000;
  --color-red: red;
  --color-select: #ff621f;

  /* Text colors */
  --main-text-back-dark: #181818;
  --main-text-black-light: #454545;
  --main-text-white: #fbfbfb;
  /* Font weights */
  --main-font-weight-bold: 700;
  --main-font-weight-light: 400;
  --main-font-weight-medium: 500;

  /* Button border-radius */
  --main-button-border-radius: 14px;
  --active-color_backgroud_btn: #3c2f3a;
  --inactive-color_backgroud: #c1c1c1;
  --border-radius: 16px;
  --hover: #3c2f3a;
  --Main-text: #333;
  --border-color: 1px solid rgba(189, 189, 189, 0.3);
  --header-text-color: #212121;
  /* --active-color_backgroud:#3C2F3A;
      --inactive-color_backgroud:#c1c1c1; */
  /* Fixing the Website width */
  --main-website-fixed-width: 2200px;

  /* Device breaking points for Responsive Design */
  /* --mini-mobile-breakpoint: 320px;
    --tablet-breakpoint: 768px;
    --desktop-breakpoint: 1080px;
    --m-desktop-breakpoint: 1200px;
    --xl-desktop-breakpoint: 1400px;
    --xxl-desktop-breakpoint: 1600px;
    --xxxl-desktop-breakpoint: 1800px; */
  --main-color: #ffff;
  --background-color: #c1c1c1;

  /* main-toggle */
  --main-toggle-background: #ff621f;
}

body {
  font-family: "Raleway" !important;
}

.header_back_btn {
  margin-left: 10px;
}

.pageHeaderI {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 10px;
  background-color: #fff !important;
  box-shadow: 0px 2px 4px 0px #0000000f;
}

.pageHeaderI h2 {
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 700;
  color: var(--header-text-color);
  text-align: center;
}

.groupInput input:focus~.mainInputLabel {
  padding: 0px 4px !important;
}

.onOffToggle {
  width: auto !important;
  z-index: 9 !important;
}

.mainInput {
  font-size: 14px;
  padding: 10px 10px 10px 15px !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-weight: 500;
  border: 1px solid #BDBDBD4D !important;
  height: 55px;
  color: #555 !important;
}

.mainInput:focus {
  border: var(--border-color) !important;
  box-shadow: none !important;
}

input:focus~.mainInputLabel,
input:valid~.mainInputLabel {
  top: -8px !important;
  font-size: 12px;
  background: #ffffff;
  color: var(--Main-text);
}

input:-internal-autofill-selected {
  background: none !important;
}

.form input {
  border: 1px solid #bdbdbd4d !important;
}

.groupInput .mainInputLabel {
  top: 15px !important;
}

.onOffToggleSlider {
  width: 44px !important;
  height: 22px !important;
}

.onOffToggleInput:checked+.onOffToggleSlider {
  background-color: #ff621f;
  border: none;
}

.onOffToggleInput:checked+.onOffToggleSlider:before {
  transform: translateX(21px) !important;
}

.onOffToggleSlider:before {
  height: 20px !important;
  width: 20px !important;
  left: 2px;
  top: 1px;
}

.onOffToggleInput:checked+.onOffToggleSlider:after {
  content: "";
}

.onOffToggleSlider:after {
  content: "";
}

.onEmptyImagePosition {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.global_error {
  color: #ff621f !important;
  font-size: 12px !important;
  font-weight: 400;
  background: none !important;
  width: max-content !important;
}

.select_text {
  color: #ff621f !important;
}

.panelLinks {
  font-family: "Raleway" !important;
}

.onOffToggleSlider {
  width: 44px !important;
  height: 22px !important;
}

.onOffToggleInput:checked+.onOffToggleSlider {
  background-color: #ff621f !important;
  border: none;
}

.onOffToggleInput:checked+.onOffToggleSlider:before {
  transform: translateX(21px) !important;
}

.onOffToggleSlider:before {
  content: "";
  height: 20px !important;
  width: 20px !important;
  left: 2px;
  top: 1px;
}

.miniOnOffToggleInput:checked+.miniOnOffToggleSlider {
  background-color: #ff621f !important;
  border: none;
}

.miniOnOffToggleInput:checked+.miniOnOffToggleSlider:before {
  transform: translateX(22px);
}

.miniOnOffToggleSlider {
  width: 46px !important;
  height: 24px !important;
}

.miniOnOffToggleSlider:before {
  content: "";
  height: 20px;
  width: 20px !important;
  left: 2px;
  top: 2px;
}

.miniOnOffToggleInput:checked+.miniOnOffToggleSlider:after {
  content: "";
  color: #ffffff;
  padding-left: 8px;
  padding-top: 3px;
  font-weight: normal;
  font-size: 14px;
}

.saveBtn {
  background-color: var(--active-color_backgroud_btn) !important;
  color: var(--main-color) !important;
  border-radius: var(--border-radius);
  margin: 0px !important;
  font-weight: 600;
  font-size: 16px !important;
  text-transform: math-auto;
  height: 50px !important;
  min-height: 50px !important;
}

.saveBtn:hover {
  background-color: var(--active-color_backgroud_btn);
}

.empty_Btn {
  border: 2px solid #3c2f3a !important;
  color: #3c3f3a !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  height: 50px !important;
  min-height: 50px !important;
  font-size: 16px !important;
  background: transparent !important;
}

.DetailsTitle {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
}

.mainTitle {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
}

.page_titile {
  font-size: 30px !important;
  color: #333 !important;
  font-weight: 600 !important;
}

.page-breadcrumb .breadcrumb {
  text-transform: math-auto;
  margin-left: 18px;
}

.subTitle {
  font-size: 14px !important;
  color: #555 !important;
  font-weight: 500;
}

.popupTitle {
  font-size: 20px !important;
  color: #333 !important;
  font-weight: 600 !important;
  margin-bottom: 0px !important;
}

.userName {
  color: #333 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  opacity: 1 !important;
}

.svg_global {
  fill: #ff621f;
}

.modal-header {
  border-bottom: 0px !important;
}

.modal-footer {
  border-bottom: 0px !important;
}

.setUpTag {
  display: block !important;
}

.pageHeader {
  background: #fff !important;
  box-shadow: 0px 2px 4px 0px #0000000f;
}

.profile-dropdown {
  background: #fff !important;
}

.switchTabs {
  width: 100% !important;
}

.dashboard-content {
  max-width: 100% !important;
}

.tab-pane {
  width: 100% !important;
}

.pageheaderTitle {
  font-size: 20px;
  margin-bottom: 8px;
  margin-left: 18px;
  color: #333;
  font-family: "Raleway" !important;
  font-weight: 600;
}

.form-control {
  border: var(--border-color) !important;
}

.form-control:focus {
  border: var(--border-color) !important;
  box-shadow: none !important;
}

/* .popup_menu_header {
  position: absolute;
  right: 25px;
} */
.helpicon_col {
  justify-content: flex-end;
}



.modal-backdrop {
  z-index: 999 !important;
}

.modal-header .close {
  font-size: 30px !important;
  font-weight: 600 !important;
  position: absolute;
  right: 12px;
  top: 6px;
}

.nav-left-sidebar {
  overflow-x: hidden !important;
}

.switch-to-legacy-panel {
  background-color: #fff;
  color: #3c2f3a;
  border: 2px solid #3c2f3a !important;
  border-radius: 12px !important;
  padding: 12px 25px !important;
}

/* .profile-dropdown svg {
  width: 27px !important;
  height: 22px !important;
} */
.leftMenuActive {
  /* background: #EBF0FE !important; */
}

.helpIcon {
  display: none !important;
}

.logoutBtn {
  display: flex !important;
}

.pageHeader {
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.help_icon {
  margin-top: 10px;
  display: block;
}

.pageHeaderSwitchAndHelpBtnsSec {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-header {
  margin-bottom: 0 !important;
}

.profile-dropdown svg {
  background: transparent !important;
  margin-right: 10px !important;
}



@media screen and (max-width: 767px) {
  .onOffToggleSlider {
    width: 44px !important;
    height: 22px !important;
  }

  .onOffToggleInput:checked+.onOffToggleSlider {
    background-color: #ff621f;
    border: none;
  }

  .onOffToggleInput:checked+.onOffToggleSlider:before {
    transform: translateX(21px) !important;
  }

  .onOffToggleSlider:before {
    content: "";
    height: 20px !important;
    width: 20px !important;
    left: 2px;
    top: 1px;
  }

  .global_error {
    color: #ff621f !important;
    font-size: 12px !important;
    font-weight: 400;
    background: none !important;
  }

  .groupInput .mainInputLabel {
    font-size: 14px !important;
  }

  .pageHeader {
    min-height: 70px !important;
  }

  .mainInput {
    font-size: 14px !important;

  }

  .modal-header .close {
    font-size: 30px !important;
    font-weight: 600 !important;
  }

  .saveBtn {
    background-color: var(--active-color_backgroud_btn);
    color: var(--main-color);
    border-radius: var(--border-radius);
    margin-top: 34px;
    font-weight: 600;
    font-size: 16px !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  .miniOnOffToggleInput:checked+.miniOnOffToggleSlider {
    background-color: #ff621f;
    border: none;
  }

  .miniOnOffToggleInput:checked+.miniOnOffToggleSlider:before {
    transform: translateX(22px);
  }

  .miniOnOffToggleSlider {
    width: 46px !important;
    height: 24px !important;
  }

  .miniOnOffToggleSlider:before {
    content: "";
    height: 20px;
    width: 20px !important;
    left: 2px;
    top: 2px;
  }

  .miniOnOffToggleInput:checked+.miniOnOffToggleSlider:after {
    content: "";
    color: #ffffff;
    padding-left: 8px;
    padding-top: 3px;
    font-weight: normal;
    font-size: 14px;
  }

  .pageHeaderI h2 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 700;
    color: var(--header-text-color);
    text-align: center;
  }

  .dashboard-wrapper {
    background: #f9f9f9 !important;
  }

  .pos_backgroundColorMain {
    background: #f9f9f9 !important;
  }

  .form input:focus {
    box-shadow: none !important;
  }

  .DetailsTitle {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }

  .mainTitle {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }

  .page_titile {
    font-size: 20px !important;
    color: #333 !important;
    font-weight: 600 !important;
  }

  .subTitle {
    font-size: 13px !important;
    color: #555 !important;
    font-weight: 500;
  }

  .popupTitle {
    font-size: 16px !important;
    color: #333 !important;
    font-weight: 600 !important;
    margin-bottom: 0px !important;
  }

  .pageheaderTitle {
    font-size: 18px !important;
    margin-bottom: 0px !important;
    margin-left: 50px;
  }

  .setUpTag {
    display: none !important;
  }

  .menu-btn {
    top: 37%;
  }

  .pageHeader {
    background: #fff !important;
    box-shadow: 0px 2px 4px 0px #0000000f;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .profile-dropdown {
    background: #fff !important;
  }

  .navbar-nav {
    background: #f9f9f9 !important;
  }



  .nav-left-sidebar {
    z-index: 9999;
  }

  .page-breadcrumb .breadcrumb {
    margin-left: 45px;
    width: max-content;
  }

  .switch-to-legacy-panel {
    margin-left: -29px;
    font-size: 12px !important;
    padding: 10px 8px !important;
    display: none !important;
  }

  .profile-dropdown svg {
    margin-right: 0px !important;
  }

  .help_icon {
    display: none !important;
  }

  .helpIcon {
    display: flex !important;
  }

  .profileAccountCancellationText {
    margin-left: 10px !important;

  }

}

@media screen and (min-width:768px) and (max-width:1024px) {
  .pageHeader {
    background: #fff !important;
    box-shadow: 0px 2px 4px 0px #0000000f;
    position: sticky;
    top: 0;
    z-index: 998;
  }

  .dashboard-wrapper {
    margin-left: 0px !important;
  }

  .nav-left-sidebar {
    z-index: 9999;
  }

  .page-breadcrumb .breadcrumb {
    margin-left: 50px;
  }

  .pageheaderTitle {
    margin-left: 50px !important;
  }
  .help_icon{
    margin-right: 0px !important;
  }
}

@media screen and (min-device-width: 821px) and (max-device-width: 1180px) and (orientation: landscape) {
  .page-breadcrumb .breadcrumb {
    margin-left: 25px;
  }

  .pageheaderTitle {
    margin-left: 25px !important;
  }
}

.required {
  color: #ff621f;
  font-size: 30px;
  position: absolute;
  top: -10px;
}

.setUpTagInternal {
  gap: 5px;
}

@media screen and (max-width: 767px) {
  .page-breadcrumb .breadcrumb {
    padding-top: 0px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1){

  .dashboard-wrapper {
      margin-left: 300px !important;
  }
  .help_icon{
    margin-right: 0px !important;
  }
 
}
/**************************************************************/
/**             GLOBAL CSS VARIABLES ENDS                    **/
/**************************************************************/