* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

/* Form Element based */
.col.form-element {
  height: 50px !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

.form-element-label {
  display: inline-block;
  font-size: 18px;
  width: 150px;
  line-height: 300%;
  text-align: left;
}

.form-label-align-right {
  text-align: right;
}

.form-element-input-text {
  width: 130px;
  border-radius: 5px;
  margin-left: 5px;
  padding: 5px;
}

.form-element-input-area {
  width: 130px;
  border-radius: 5px;
  margin-left: 5px;
  vertical-align: top;
  padding: 3px;
}

.form-element-checkbox {
  width: 50px;
  margin-left: 5px;
}

.form-element-select,
.form-element-input-select {
  width: 130px;
  height: 30px;
  border-radius: 5px;
  margin-left: 5px;
}

.form-element>.form-element-label,
.form-element>.form-element-input-text,
.form-element>.form-element-input-area,
.form-element>.form-element-input-select {
  width: 40%;
  height: 40px;
}

.form-element-mandatory {
  color: #ff0000;
  font-size: 16px;
}

/* Alert Based */
.alert-container {
  position: fixed;
  bottom: 4%;
  right: 3%;
  width: 305px;
  border-radius: 10px;
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 99;
}

.alert-close-icon {
  float: right;
  width: 17px;
  margin-top: 3px;
  line-height: 19px;
  color: #ffffff;
  background: #ff0000;
  border-radius: 30px;
  cursor: pointer;
}

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

/*Page Other Styles*/
.custom-container {
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  height: 100%;
  /* position: relative; */
}

.custom-container-footer {
  width: 100%;
  height: 8%;
  position: absolute;
  bottom: 0;
}

.custom-inner-container {
  width: 100%;
  height: 100%;
}

.div-container {
  padding: 20px 20px 10px 20px;
  box-sizing: border-box;
}

.header-divider {
  border: 2px solid black;
  text-align: center;
}

.pagename-head-container {
  display: flex;
  text-align: center;
  align-items: center;
  width: 100%;
  justify-content: center;
}

/*Button Based */
.action-btn-container {
  height: 36px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.actions-btn {
  border-radius: 4px;
  border: none;
  display: flex;
  height: 34px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.btn-add,
.btn-edit,
.btn-request,
.btn-pause,
.btn-reMap,
.btn-unMap,
.btn-resume,
.btn-delete,
.btn-save,
.btn-clear {
  border-radius: 5px;
  border: none;
  padding: 4px 10px;
}

.grid-btn-add,
.grid-btn-all,
.grid-btn-archive,
.grid-btn-active,
.grid-btn-paused,
.grid-btn-design {
  border-radius: 5px;
  border: none;
  padding: 4px;
  min-width: 13%;
}

.grid-btn-headrow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.btn-ok {
  background-color: #ff4c4c;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.btn-cancel {
  background-color: #ccc;
  color: black;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

#reserved_label {
  font-weight: bold;
  display: inline-block;
  width: 150px;
  text-align: center;
  line-height: 50%;
  margin-right: 20px;
}

.v-center {
  /*to make menu image center*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.v-dcol {
  flex-direction: column;
}

.v-drow {
  flex-direction: row;
}

.v-wfull {
  width: 100%;
}

.vscomp-ele {
  max-width: 100% !important;
  z-index: 999 !important;
  position: relative;
  /* or position: absolute; or position: fixed; */
}

.v-end {
  justify-content: end;
}

.get-start {
  text-align: center;
  color: #0423ee;
  font-size: xx-large;
  font-style: italic;
}

.check_icon {
  background: #2cc52c;
  height: 32px;
  text-align: center;
  width: 32px;
  border-radius: 18px;
  color: white;
}

.confirm_popup {
  box-shadow: 0 0px 3px 0px #2a2525;
  padding-right: 9px;
}

.confirm_popup_label {
  width: 80px !important;
}

.disabledRow {
  background-color: #f0f0f0;
  /* color: #cbcaca; */
}

.selectOptionDivAlign {
  transform: translate3d(0px, 51.2153px, 0px) !important;
}

.SelectionBoxPluginAlign {
  padding: 10px;
  border-radius: 6px;
  width: 44% !important;
  position: absolute;
}

.common_align_details {
  word-break: break-word;
  white-space: normal;
  text-align: left;
}

.common-search-label-align {
  display: flex;
  justify-content: start;
}

/* Bv my common css Start */

/* Common colors Start */
:root {
  --white: #ffffff;
  --dark: #070607;
  --dark-1: #272727;
  --label-color: #6a6a6a;
  --border: #e2e8f0;
  --disable-input: #f5f7fa;
  --placeholder: #ced4da;
  --cr-ash: #8b9cae;
  --cr-pink: #dc478f;
  --cr-pink-dark: #d21e75;
  --cr-pink-lite: #fbe8f1;
  --cr-yellow: #f6bd11;
  --cr-yellow-dark: #edb303;
  --cr-yellow-light: #fbf0c8;
  --cr-purple: #7472fc;
  --cr-purple-dark: #5c5afb;
  --cr-purple-lite: #eeeeff;
  --cr-blue: #3577f1;
  --cr-blue-dark: #0f4fc3;
  --cr-blue-lite: #e1ebfd;
  --cr-green: #67c23a;
  --cr-green-dark: #40ad0b;
  --cr-green-lite: #e3f5f1;
  --cr-red: #c70909;
  --cr-red-dark: #ad0505;
  --cr-red-lite: #fde4e3;
  --lite-green: #67c23a;
  --cr-sea-green: #86bd7a;
  --cr-sea-green-lite: #eff7ee;
  --cr-orange: #fc6d26;
  --cr-orange-hover: #e84d00;
  --cr-orange-light: #fff0e8;
  --pop-up-bg: #00000030;
  --cr-bg: #edf1f6;
  /* Common colors End */

  .w-100 {
    width: 100% !important;
  }

  .h-50 {
    height: 50% !important;
  }

  .h-75 {
    height: 75% !important;
  }

  .h-80 {
    height: 80% !important;
  }

  .h-90 {
    height: 90% !important;
  }

  .h-25 {
    height: 25% !important;
  }

  .h-60 {
    height: 60% !important;
  }

  .h-70 {
    height: 70% !important;
  }

  .h-30 {
    height: 30% !important;
  }

  .h-40 {
    height: 40% !important;
  }

  .h-20 {
    height: 20% !important;
  }

  .h-10 {
    height: 10% !important;
  }

  .w-50 {
    width: 50% !important;
  }

  .w-75 {
    width: 75% !important;
  }

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

  .w-90 {
    width: 90% !important;
  }

  .w-25 {
    width: 25% !important;
  }

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

  .w-70 {
    width: 70% !important;
  }

  .w-30 {
    width: 30% !important;
  }

  .w-40 {
    width: 40% !important;
  }

  .w-20 {
    width: 20% !important;
  }

  .w-10 {
    width: 10% !important;
  }

  .w-5 {
    width: 5% !important;
  }

  .w-15 {
    width: 15% !important;
  }

  .h-100 {
    height: 100% !important;
  }

  .flex-alignend {
    display: flex;
    align-items: flex-end;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .flex-start {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }

  .bv-label {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 4px;
    color: var(--label-color);
  }

  .bv-input {
    font-size: 14px;
    font-weight: 400;
    height: 34px;
    border-radius: 4px;
    padding: 5px 10px;
    width: 100%;
    border: none;
  }

  .bv-input-border {
    font-size: 14px;
    font-weight: 400;
    height: 34px;
    border-radius: 4px;
    padding: 5px 10px;
    width: 100%;
    border: 1px solid var(--border);

    &:focus-visible {
      outline: 2px solid var(--cr-blue);
      outline-offset: 1px;
    }
  }

  /* input with checkbox */
  .inputcheckbox {
    display: flex;
    align-items: center;
    gap: 0px;

    .bv-input-border {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      font-family: "Poppins", sans-serif;
      font-size: 14px;
    }

    .inputchecklabel {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      font-weight: 400;
      color: var(--white);
      height: 34px;
      padding: 6px 10px;
      font-family: "Poppins", sans-serif;
      margin: 0;
      cursor: pointer;
      background-color: var(--cr-blue);
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;

      input[type="checkbox"] {
        margin: 0;
      }
    }
  }

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

    &:hover,
    &:active,
    &:focus {
      color: var(--white);
      background: var(--cr-green-dark);
      border: 1px solid var(--cr-green-dark);
    }

    &:focus-visible {
      outline: 2px solid var(--cr-green);
      outline-offset: 1px;
    }
  }

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

    &:hover,
    &:active,
    &:focus {
      color: var(--white);
      background: var(--cr-orange-hover);
      border: 1px solid var(--cr-orange-hover);
    }

    &:focus-visible {
      outline: 2px solid var(--cr-orange);
      outline-offset: 1px;
    }
  }

  .btn-skyblue {
    background-color: var(--cr-blue);
    border: 1px solid var(--cr-blue);
    color: var(--white);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--cr-blue-dark);
      border: 1px solid var(--cr-blue-dark);
      color: var(--white);
    }

    &:focus-visible {
      outline: 2px solid var(--cr-blue-dark);
      outline-offset: 1px;
    }
  }

  .btn-bright-blue {
    background-color: var(--cr-blue);
    border: 1px solid var(--cr-blue);
    color: var(--white);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--cr-blue-dark);
      border: 1px solid var(--cr-blue-dark);
      color: var(--white);
    }

    &:focus-visible {
      outline: 2px solid var(--cr-blue-dark);
      outline-offset: 1px;
    }
  }

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

    &:hover,
    &:active,
    &:focus {
      background-color: var(--cr-red-dark);
      border: 1px solid var(--cr-red-dark);
      color: var(--white);
    }

    &:focus-visible {
      outline: 2px solid var(--cr-red-dark);
      outline-offset: 1px;
    }
  }

  .btn-ash {
    background-color: var(--disable-input);
    border: 1px solid var(--disable-input);
    color: var(--dark);

    &:hover,
    &:active,
    &:focus {
      color: var(--dark);
      background-color: var(--disable-input);
      border: 1px solid var(--disable-input);
    }

    &:focus-visible {
      outline: 2px solid var(--border);
      outline-offset: 1px;
    }
  }

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

    &:hover,
    &:active,
    &:focus {
      background-color: var(--cr-yellow);
      border: 1px solid var(--cr-yellow);
      color: var(--white);
    }

    &:focus-visible {
      outline: 2px solid var(--cr-yellow);
      outline-offset: 1px;
    }
  }

  .filterbar {
    background-color: #2563eb;
    padding: 5px;
    margin: 0px;
    height: 16vh;
    display: flex;
    align-items: center;
    border-radius: 6px;

    .bv-label {
      color: #ffffff;
    }
  }
}

.custom-inner-container {
  #grid_div {
    width: 100%;
    height: 100%;
  }

  .tablebody {
    margin: 0px;
    padding: 20px;
    height: calc(100% - 100px);
  }
}

.popup-inner-container {
  border-radius: 6px;
  background-color: var(--white);

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 20px;
    background-color: var(--cr-bg);

    .popup-header-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--dark-1);
      margin: 0;
    }

    .popup-header-close-icon {
      margin: 0;
      height: 26px;
      width: 26px;
      background-color: var(--white);
      color: var(--dark-1);
      box-shadow: 0 4px 8px 0 #00000033;

      &:hover {
        background-color: var(--cr-red);
        color: var(--white);
      }
    }
  }

  .popup-body-container {
    padding: 20px 10px;
    max-height: 500px;
    min-height: 200px;
  }

  .popup-footer-container {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: end;
    padding-inline: 20px;
    align-items: center;
    background-color: var(--cr-bg);
  }
}

/* table icon buttons */

/* Style for buttons with title="Edit" */
.action-btn {
  color: white;
  height: 34px;
  width: 34px;
  min-height: 34px;
  min-width: 34px;
  display: flex;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  border: none;
}

.action-btn[title="Edit"] {
  background-color: #4caf50;
}

/* Style for buttons with title="Delete" */
.action-btn[title="Delete"] {
  background-color: #f44336;
}

.welcome-container {

  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
}

html,
body {
  height: 100% !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

/* Common styles for vendor management section */

/* vendor section */
.vendormgmt-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .vendormgmtheader {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    height: 140px;
    min-height: 140px;
  }

  .vendormgmtselect {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 20px;
    flex-direction: column;
  }

  .vendor-head-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 45px;
    background-color: var(--disable-input);

    .tab-btn {
      border: none;
      height: 45px;
      width: 200px;
      color: var(--label-color);
      background-color: var(--disable-input);
      border-left: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child {
        border-left: none;
      }

      &.active {
        background-color: var(--white);
        color: var(--dark);
        border-top: 3px solid var(--cr-blue-dark);
        font-weight: 600;
        font-size: 15px;
      }
    }
  }

  .vendormgmttablebody {
    padding-inline: 20px;
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    height: calc(100% - 140px);
  }
}

.queuecard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  box-sizing: border-box;

  .queuetitle {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
  }

  .qusubalable {
    font-weight: 400;
    color: var(--label-color);
  }

  .qumnalable {
    font-size: 18px !important;
    font-weight: 600;
    color: var(--dark-1);
  }

  .qucnalable {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--dark-1);
  }

  .queuecard-content {
    font-size: 14px;
    color: var(--label-color);
    text-align: center;
  }

  .avatar-box {
    width: 40px;
    height: 40px;
    background-color: #4a90e2;
    color: white;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
  }
}

.icon-copy {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: var(--white);
    background-color: var(--cr-blue);
    border-radius: 4px;
  }
}

.align-label {
  display: flex;
  justify-content: start;
}

@media (max-height: 600px) {
  #sm_result_popup {
    height: 65vh !important;
  }

  #invoiceDetails{
    height: 67vh !important;
  }
}