@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(../fonts/Font-Family-200.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Font-Family-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Font-Family-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Font-Family-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Font-Family-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Font-Family-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/Font-Family-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-family: 'Plus Jakarta Sans';
  --primary-color: var(--userThemeColor, hsla(0, 88%, 37%, 1));
  --text-color: #343a40;
  --border-color: #cdc7c7;
  --white-color: hsla(0, 100%, 100%, 1);
  --bg-color: hsla(225, 29%, 95%, 1);
  --light-bg-color: var(--userThemelightColor, hsla(6, 67%, 94%, 1));
  --green-light: #f2ffda;
  --lemon-green: #699913;
  --form-border: #ced4da;
  --ash-color: #a0aec0;
  --light-ash-color: #eaeff5;
  --red-light: #FFF3E5;
  --red-cream: #FFECEC;
  --red-peach: #FFAEAE;
  --userThemelightColor2: rgb(255, 105, 105);
  --browse-btn-text: 'Browse';
}

html>* {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #212427;
}

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: var(--font-family), sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeSpeed;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--text-color);
  background-color: var(--bg-color);
  position: relative;
  height: 100%;
  width: 100%;
  font-weight: 300;
  -webkit-overflow-scrolling: touch;
}

.custom-file-input:lang(en)~.custom-file-label::after {
    content: var(--browse-btn-text);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 40px var(--bg-color) inset !important;
}

div,
aside,
article,
input,
button,
select,
footer,
ul,
li,
a,
img {
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.transition-none {
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

a:hover {
  color: var(--primary-color);
}
.excelIcon:hover{
	color: var(--primary-color);
}

button {
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}


h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title {
  font-family: var(--font-family), sans-serif;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-xs {
  padding: 0.15rem 0.6rem;
  font-size: 0.65rem;
}

h3 {
  text-transform: uppercase;
  color: var(--text-color);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(33, 33, 33, 0.14) !important;
  cursor: not-allowed;
  border: 1px solid rgba(33, 33, 33, 0.14);
  opacity: 0.5;
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(33, 33, 33, 0.14) !important;
}

.contain-section {
  width: min(100% - 1rem, 180rem);
  margin: 0 auto;
  height: min(100% - 2vh);
  overflow: hidden;
}

.ui-datepicker {
  background: var(--white);
  border-color: var(--border-color);
  border-radius: 8px;
  font-family: var(--font-family), sans-serif !important;
}

.ui-datepicker .ui-datepicker-title {
  color: var(--text-color);
}

.ui-datepicker .ui-datepicker-calendar th {
  color: var(--text-color);
  font-weight: 700;
  font-size: 0.65rem;
  margin-bottom: 0.25rem;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month .ui-state-default {
  color: var(--text-color);
  background: var(--white-color);
}

.ui-datepicker .ui-datepicker-calendar td span,
.ui-datepicker .ui-datepicker-calendar td a {
  color: var(--text-color);

}

.ui-datepicker .ui-datepicker-calendar td {
  border: 0;
  padding: 0;
  background-color: var(--white-color);
  text-align: center;

}

.ui-datepicker .ui-datepicker-calendar .ui-datepicker-today a {
  background: var(--light-bg-color);
  color: var(--primary-color);
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-active,
.ui-datepicker .ui-datepicker-calendar .ui-state-default:hover {
  color: var(--primary-color);
  background: var(--light-bg-color);
  font-weight: 600;
  border-radius: 5px;
}


.ui-datepicker-calendar>thead {
  background-color: var(--white-color);
  border-bottom: 1px dashed var(--border-color);
}

.ui-datepicker-month {
  color: var(--primary-color);
}

.ui-datepicker-year {
  border: 0;
}

.ui-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0.75em 0;
}


.ui-datepicker .ui-datepicker-title {
  line-height: 1.6 !important;
  text-align: center;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 4.8em !important;
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
  padding: 1px 2px;
  font-size: 0.7rem !important;
}


.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
  position: unset !important;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  position: unset !important;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before {
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49ImFyY3MiPjxwb2x5bGluZSBwb2ludHM9IjE2IDE4IDIyIDEyIDE2IDYiPjwvcG9seWxpbmU+PC9zdmc+);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: 16px;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center left;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49ImFyY3MiPjxwb2x5bGluZSBwb2ludHM9IjggNiAyIDEyIDggMTgiPjwvcG9seWxpbmU+PC9zdmc+);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: 16px;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center right;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  display: none !important;
}

.ui-datepicker .ui-datepicker-calendar td span,
.ui-datepicker .ui-datepicker-calendar td a {
  text-align: center;
}

.daterangepicker {
  padding: 15px;
  width: auto;
}

.daterangepicker.opensright::before,
.daterangepicker.opensright::after {
  display: none;
}

.daterangepicker .calendar {
  max-width: 300px;
}

.daterangepicker .input-mini,
.daterangepicker .form-control:hover,
.daterangepicker .form-control:focus,
.daterangepicker .input-mini.active {
  border-radius: 0 !important;
  border: 0 !important;
  background: none !important;
}

.daterangepicker .daterangepicker_input i {
  color: var(--ash-color);
}

.daterangepicker .table-condensed thead {
  margin-bottom: 20px;
}

.daterangepicker .calendar th,
.daterangepicker .calendar td {
  font-weight: normal;
  padding: 5px 10px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date,
.daterangepicker td.in-range,
.daterangepicker td.in-range:hover {
  background: #e1f7ff;
  color: var(--blue-azure);
}

.daterangepicker .range_inputs .btn-success {
  background: var(--green-hover);
}

.daterangepicker .range_inputs .cancelBtn {
  background: #fff;
  margin-left: 10px;
  color: #2205bf;
}

.daterangepicker .range_inputs .cancelBtn:hover {
  background: #2205bf;
  color: #fff;
}



.bg-primary-color {
  background: var(--primary-color);
}

.bg-text-color {
  background: var(--text-color);
}

.bg-dark-text-color {
  background: var(--dark-text-color);
}

.bg-ash-color {
  background: var(--ash-color);
}

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

.bg-main-nav-hover {
  background: var(--main-nav-hover);
}

.bg-sub-nav {
  background: var(--sub-nav);
}

.bg-sub-nav-hover {
  background: var(--sub-nav-hover);
}

.bg-nav-icon {
  background: var(--nav-icon);
}

.bg-form-border {
  background: var(--form-border);
}

.bg-title {
  background: var(--title);
}

.bg-black-green {
  background: var(--black-green);
}

.bg-green {
  background: var(--green);
}

.bg-green-hover {
  background: var(--green-hover);
}

.bg-green-cream {
  background: var(--green-cream);
}

.bg-green-light {
  background: var(--green-light);
}

.bg-lemon-green {
  background: var(--lemon-green);
}

.bg-blue {
  background: var(--blue);
}

.bg-blue-hover {
  background: var(--blue-hover);
}

.bg-blue-light {
  background: var(--blue-light);
}

.bg-blue-azure {
  background: var(--blue-azure);
}

.bg-blue-sky {
  background: var(--blue-sky);
}

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

.bg-red-hover {
  background: var(--red-hover);
}

.bg-red-light {
  background: var(--red-light);
}

.bg-red-cream {
  background: var(--red-cream);
}

.bg-red-peach {
  background: var(--red-peach);
}

.bg-orange {
  background: var(--orange);
}

.bg-orange-hover {
  background: var(--orange-hover);
}

.bg-orange-light {
  background: var(--red-orange);
}

.bg-orange-cream {
  background: var(--orange-cream);
}

.bg-error {
  background: var(--error);
}

.bg-error-text {
  background: var(--error-text);
}


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

.disabled {
  color: #ddd !important;
}

.primary-color {
  color: var(--primary-color);
}

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


.ash-color {
  color: var(--ash-color);
}

.light-ash-color {
  color: var(--light-ash-color);
}



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


.error {
  color: var(--error);
}

.error-text {
  color: var(--error-text);
}


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

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

.text-700 {
  font-weight: 700 !important;
}

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

.form-control,
input.phone,
.custom-file-label {
  font-size: 14px;
  color: var(--text-color);
  border: 1px solid var(--form-border);
  border-radius: 2px;
  height: 3rem;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.form-control {
  border-radius: 0.45em;
  /* box-shadow: var(--border-color) 0px 1px 2px 0px; */
}

.form-control:hover:not(.form-control:disabled, .form-control[readonly], .phone-no-input-section .form-control, #input_searchLOI.form-control, .select2-container--default.select2-container--disabled .select2-selection--single),
.form-control:focus:not(.form-control:disabled, .form-control[readonly], .phone-no-input-section .form-control, #input_searchLOI.form-control, .select2-container--default.select2-container--disabled .select2-selection--single) {
  background: rgba(33, 33, 33, 0.03);
  border: 1px solid rgba(33, 33, 33, 0.32);
  outline: none;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: rgba(33, 33, 33, 0.14) !important;
  cursor: not-allowed;
  border: 1px solid rgba(33, 33, 33, 0.14);
  opacity: 0.5;
}

.phone-no-input-section .form-control:focus {
  border: 0;
}


.form-control.tokenfield {
  height: 4rem;
}

.custom-file-input,
.custom-file-label {
  height: 3rem;
  line-height: 2.4;
  cursor: pointer;
}

.custom-file .upload_filename {
  float: left;
  width: calc(100% - 6.464rem);
  line-height: 1.3;
}

.custom-file-label {
  margin-top: 5px;
  margin-bottom: 0;
  padding-right: 6rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-file-input,
.custom-file-label {
  float: left;
  width: 80px;
  border: 0;
  padding: 0;
  border-radius: 2px;
}

.custom-file-label::after {
  background: var(--blue);
  border-left-color: var(--blue);
}

.custom-file-input:focus~.custom-file-label,
.custom-file-input:focus~.custom-file-label::after {
  border: 1px solid #bab2eb;
  box-shadow: none;
}

.custom-control-label {
  font-size: 13px !important;
}

.col-form-label {
  padding-top: 0;
  align-self: center !important;
}

.ui-datepicker {
  transition: block 4s ease-in-out;
}

input.phone {
  height: 48px;
  padding: 0.375rem 0.75rem;
}

.multi-input {
  margin-left: -0.65rem;
  margin-right: -0.5rem;
}

.multi-input .col-* {
  padding: 0;
}

.multi-input>div {
  padding-right: 0.1rem;
  flex: 0 0 calc(25% - 21px);
  max-width: calc(25% - 21px);
}

.multi-input .form-control {
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  text-align: center;
}

.multi-input>div:last-of-type {
  padding-right: 0;
}

.check-status>i {
  display: none;
}

.check-status.valid>i.fa-check {
  display: inline-block;
  color: var(--green);
}

.check-status.invalid>i.fa-times {
  display: inline-block;
  color: var(--red);
}

.img-checkbox>li {
  width: 17%;
  /* margin: 0 1.5% 10px; */
}

.checkbox-group {
  position: relative;
}

.checkbox-group .custom-control {
  padding: 25px 25px 40px 25px;
  line-height: auto;
}

.checkbox-group input[type="checkbox"][class^="checkbox-input"] {
  display: none;
}

.checkbox-group label {
  border: 1px solid var(--form-border);
  margin-bottom: 0;
  padding: 15px;
  display: block;
  position: relative;
  cursor: pointer;
  text-align: center;
  border-radius: 0.45em;
}

.checkbox-group label:before {
  background-color: white;
  color: white;
  content: "\f00c";
  display: block;
  border-radius: 10px;
  border: 2px solid var(--form-border);
  position: absolute;
  left: auto;
  top: 10px;
  right: 10px;
  padding-top: 5px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 7px;
}

.checkbox-group label:before:hover {
  border-color: var(--green-hover);
}

.checkbox-group label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
}

.checkbox-group input[class^="checkbox-input"]:checked+label {
  border-color: var(--primary-color);
}

.checkbox-group input[class^="checkbox-input"]:checked+label:before {
  font: normal normal normal 11px/1 FontAwesome;
  background-color: var(--primary-color);
  transform: scale(1);
  border: 0;
}

.checkbox-group input[class^="checkbox-input"]:checked+label img {
  z-index: -1;
}

.iti {
  display: block;
}

.required-text {
  margin: -6px 1.5px 0 0;
  font-size: 0.9rem;
}

.info-label {
  position: absolute;
  padding: 0.375rem 0.75rem;
  right: 13px;
  top: 1px;
  bottom: 1px;
  line-height: 2.5;
  background: var(--light-ash-color);
  border-radius: 0 3px 3px 0;
  color: var(--black-green);
}

.custom-control-label:before {
  border-color: var(--border-color);
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background: var(--primary-color);
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
  background: rgba(33, 33, 33, 0.14);
  border-color: rgba(33, 33, 33, 0.14);
  cursor: not-allowed;
  opacity: 0.5;
}

.ui-datepicker-trigger::after {
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZmlsbDogcmdiYSgwLCAwLCAwLCAwLjY1KTt0cmFuc2Zvcm06IDttc0ZpbHRlcjo7Ij48cGF0aCBkPSJNNyAxMWgydjJIN3ptMCA0aDJ2Mkg3em00LTRoMnYyaC0yem0wIDRoMnYyaC0yem00LTRoMnYyaC0yem0wIDRoMnYyaC0yeiI+PC9wYXRoPjxwYXRoIGQ9Ik01IDIyaDE0YzEuMTAzIDAgMi0uODk3IDItMlY2YzAtMS4xMDMtLjg5Ny0yLTItMmgtMlYyaC0ydjJIOVYySDd2Mkg1Yy0xLjEwMyAwLTIgLjg5Ny0yIDJ2MTRjMCAxLjEwMy44OTcgMiAyIDJ6TTE5IDhsLjAwMSAxMkg1VjhoMTR6Ij48L3BhdGg+PC9zdmc+);
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.265em;
  display: inline-block;
}

.input-group .ui-datepicker-trigger,
.input-group>.input-group-prepend>.input-group-text {
  padding: 0;
  border: 0 ; /* important remove jay*/
  border-left: 0;
  background: rgba(0, 0, 0, 0.035) !important;
  color: var(--text-color);
  border-radius: 0 0.45em 0.45em 0 !important;
  width: 3em;
}



.field-placeholder {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: #fff;
  font-size: 0.65rem;
  display: grid;
  place-items: center;
  font-weight: 600;
  border: 1px solid var(--form-border);
}

.has-error .field-placeholder {
  border-color: var(--red);
  color: var(--red);
}

.has-success .field-placeholder {
  border-color: var(--lemon-green);
  color: var(--lemon-green);
}

/* .form-group:hover .field-placeholder {
  background: #f5f8fb;
} */

.select2-results__option {
  padding: 10px;
  font-size: 15px;
}

.select2.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0.282rem 10px;
}

.select2-container--default .select2-selection--single {
  border-color: var(--form-border) !important;
  line-height: 50px !important;
  border-radius: 8px !important;
}

.select2-container--default .select2-selection--single:hover:not(.select2-container--default.select2-container--disabled .select2-selection--single) {
  background: rgba(33, 33, 33, 0.03);
  border-color: rgba(33, 33, 33, 0.32) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--primary-color);
  color: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: 0;
  margin-top: -10px;
  margin-left: -10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  color: var(--text-color);
  background-image: url('data:image/svg+xml,<svg class="menu-arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" width="12" height="12"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg>');
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: center;
  transition: all 900ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b:after {
  border: 0;
  transform: rotate(180deg);
}

.select2-container--open {
  z-index: 10000;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  font-size: 14px;
  color: var(--text-color) !important;
  height: 45px;
}

.autocomplete-select.form-control {
  padding: 0;
}

.select-pure__select {
  align-items: center;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  color: #363b3e;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  justify-content: left;
  min-height: 44px;
  padding: 5px 10px;
  position: relative;
  transition: 0.2s;
  width: 100%;
}

.select-pure__options {
  border-radius: 2px;
  color: #363b3e;
  display: none;
  left: 0;
  max-height: 221px;
  overflow-y: scroll;
  position: absolute;
  top: 50px;
  width: 100%;
  z-index: 500;
}

.select-pure__select--opened .select-pure__options {
  display: block;
  border: 1px solid var(--ash-color);
}

.select-pure__option {
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
  box-sizing: border-box;
  height: 44px;
  line-height: 25px;
  padding: 10px;
}

.select-pure__option--disabled {
  color: var(--ash-color);
}

.select-pure__option--selected {
  color: var(--ash-color);
  cursor: initial;
  pointer-events: none;
  background: var(--light-ash-color);
}

.select-pure__option--hidden {
  display: none;
}

.select-pure__selected-label {
  align-items: "center";
  background: var(--blue-sky);
  border-radius: 18px;
  color: var(--dark-text-color);
  cursor: initial;
  display: inline-flex;
  justify-content: "center";
  margin: 3px 10px 0 0;
  padding: 4px 12px;
}

.select-pure__selected-label:last-of-type {
  margin-right: 0;
}

.select-pure__selected-label i {
  cursor: pointer;
  display: inline-block;
  margin: 4px 0 0 7px;
  font-size: 12px;
  color: var(--blue);
}

.select-pure__selected-label img {
  cursor: pointer;
  display: inline-block;
  height: 18px;
  margin-left: 7px;
  width: 14px;
}

.select-pure__selected-label i:hover {
  color: var(--blue-azure);
}

.select-pure__autocomplete {
  background: #f9f9f8;
  border-bottom: 1px solid #e4e4e4;
  border-left: none;
  border-right: none;
  border-top: none;
  box-sizing: border-box;
  font-size: 16px;
  outline: none;
  padding: 10px;
  width: 100%;
}

.select-pure__placeholder--hidden {
  display: none;
}

button.ms-choice {
  border: 0;
  background: transparent;
  color: var(--text-color);
}

button.ms-choice>span {
  line-height: 1.6;
}

button.ms-choice>div {
  background: none;
  font: normal normal normal 14px/1 FontAwesome;
  color: #718096;
}

button.ms-choice>div:after {
  content: "";
  position: absolute;
  width: 13px;
  height: 20px;
  top: 10px;
  bottom: 0;
  margin: auto;
  right: 5px;
  background-image: url('data:image/svg+xml,<svg class="menu-arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" width="12" height="12"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg>');
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  transition: all 900ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

button.ms-choice>div.open {
  background: transparent;
}

button.ms-choice>div.open:after {
  transform: rotate(180deg);
}

.ms-drop {
  left: 0;
}

/* 
.collapse-partial .collapse[aria-expanded="true"] {
  display: block;
  height: 200px;
  overflow: hidden;
  background: none;
}

 .collapse.show[aria-expanded="false"], .collapsing{
  height: auto !important;
  max-height: 500px;
  height: 100px;
}

.collapse-partial a {
  text-decoration: none;
  height: 100%;
}

.collapse-partial a.collapsed:after {
  content: "Show More";
  font-size: 0.775rem;
  border-bottom: 0;
  font-weight: 600;
  color: var(--primary-color);
}

.collapse-partial a:not(.collapsed):after {
  content: "Show Less";
  font-size: 0.775rem;
  border-bottom: 0;
  font-weight: 600;
  color: var(--primary-color);
} */



.tags-blocks {
  padding: 7px 10px;
  border: 1px solid var(--form-border);
  height: 50px;
  border-radius: 3px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  border-radius: 4px;
  background: var(--blue-light) !important;
  border: 1px solid var(--blue-sky) !important;
  font-size: 14px;
  color: var(--dark-text-color) !important;
  line-height: 22px;
}

.tags-blocks .tag-div:last-child {
  margin-right: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 5px;
  color: var(--blue);
  font-size: 14px;
  cursor: pointer;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #007bd9;
}


.custom-switch-indicator {
  background: #d5dce1;
  border: 1px solid #b7c1ca !important;
  cursor: pointer;
  height: 17px;
  width: 40px;
}

.custom-switch-indicator:before {
  width: 10px;
  height: 10px;
  box-shadow: none;
  top: 0.165rem;
  left: 0.165rem;
}

.custom-switch-input:checked~.custom-switch-indicator:before {
  left: calc(1rem + 10px);
}

.custom-switch-input:focus~.custom-switch-indicator {
  box-shadow: none !important;
}


.custom-switch-input:checked~.custom-switch-indicator {
  background-color: var(--light-bg-color);
}

.custom-switch-input:checked~.custom-switch-indicator::before {
  background-color: var(--primary-color);
}

.status-switch-section .custom-switch-indicator {
  background-color: #FFDEDD;
  cursor: pointer;
}

.status-switch-section .custom-switch-indicator::before {
  background-color: #f44336;
}

.status-switch-section .custom-switch-input:checked~.custom-switch-indicator {
  background-color: #ddffdd;
}

.status-switch-section .custom-switch-input:checked~.custom-switch-indicator::before {
  background-color: #4caf50;
}

.custom-radio .custom-control-input:checked~.custom-control-label::before {
  background-color: var(--primary-color);
}


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

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}


.card {
  margin-bottom: 2.25rem;
  color: #718096;
  border: 1px solid var(--ash-color);
}

.card-header {
  z-index: 10;
}

.card-header>* {
  padding: 0;
}



.card-body .table-responsive {
  overflow-y: auto;
}


.rounded-left {
  border-radius: 8px 0 0 8px !important;
}

.rounded-right {
  border-radius: 0 8px 8px 0 !important;
}

.h-3rem {
  height: 3rem !important;
}


.error {
  display: none;
}

.help-block {
  display: block;
  color: var(--text-color);
  font-size: 10px;
  display: block;
  margin-top: 2px;
  padding: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  color: var(--red);
}

.has-error .form-control,
.has-error .select2-container--default .select2-selection--single {
  border-color: var(--red) !important;
  background: var(--red-cream) !important;
}




.has-error .error {
  display: block;
  margin-top: 2px;
  padding: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  color: var(--red);
}

.has-success .form-control,
.has-success .select2-container--default .select2-selection--single {
  background: var(--green-light) !important;
  border-color: var(--lemon-green) !important;
}



.has-error>input:-webkit-autofill,
.has-error>input:-webkit-autofill:hover,
.has-error>input:-webkit-autofill:focus,
.has-error>input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 40px var(--red-cream) inset !important;
  border-color: var(--red) !important;
}

.has-success>input:-webkit-autofill,
.has-error>input:-webkit-autofill:hover,
.has-error>input:-webkit-autofill:focus,
.has-error>input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 40px var(--green-light) inset !important;
  border-color: var(--lemon-green) !important;
}


.tr-error {
  background: var(--red-cream) !important;
}

.tr-error .issue {
  color: var(--red);
}

.tr-error .issue>span {
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--red);
  cursor: help;
}

.tooltip {
  background: var(--ash);
}

.has-success label.custom-file-label {
  border-color: var(--white);
}

.has-error label.custom-file-label {
  border-color: var(--white) !important;
}




.excel-dropdown .dropdown-item:focus,
.excel-dropdown .dropdown-item:hover {
  color: #23b528 !important;
}

.lsp-excel-dropdown .dropdown-item:focus,
.lsp-excel-dropdown .dropdown-item:hover {
  color: var(--sub-nav-hover) !important;
}

.admin-excel-dropdown .dropdown-item:focus,
.admin-excel-dropdown .dropdown-item:hover {
  color: var(--blue) !important;
}


.ui-pnotify {
  z-index: 10000001;
}

.ui-pnotify.notify .ui-pnotify-container,
.ui-pnotify.notifyError .ui-pnotify-container,
.ui-pnotify.notifySuccess .ui-pnotify-container,
.ui-pnotify.custom .ui-pnotify-container {
  box-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5);
  border-width: 0 !important;
  border-radius: 0.85rem !important;
  border-color: transparent !important;
}

.ui-pnotify-icon,
.ui-pnotify.notifyError .ui-pnotify-icon {
  display: table;
  margin-right: 0.5rem;
  border-radius: 0.85rem;
  height: 3rem;
  width: 3rem;
}

.ui-pnotify.notifySuccess .ui-pnotify-icon {
  display: grid;
  place-items: center;
  background: #f0fdf0;
}


.ui-pnotify.notifySuccess .ui-pnotify-icon>span {
  background: #29cf39;
  color: var(--white-color);
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 100%;
  padding: 0.15em;
}

.alert-success::after {
  content: "";
  background-color: #29cf39;
  height: 4px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.ui-pnotify.notifyError .ui-pnotify-icon {
  display: grid;
  place-items: center;
  background: #fff0f0;
}

.ui-pnotify.notifyError .ui-pnotify-icon>span {
  background: #f00404;
  color: var(--white-color);
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 100%;
  padding: 0.15em;
}

.alert-danger::after {
  content: "";
  background-color: #f00404;
  height: 4px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.ui-pnotify.notify .ui-pnotify-icon {
  display: grid;
  place-items: center;
  background: #d8f1ff;
}

.ui-pnotify.notify .ui-pnotify-icon>span {
  background: #1171ef;
  color: var(--white-color);
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 100%;
  padding: 0.15em;
}

.alert-info::after {
  content: "";
  background-color: #1171ef;
  height: 4px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

h4.ui-pnotify-title {
  margin-top: 0.25rem;
  text-transform: capitalize;
  font-size: 1.05rem;
  padding-left: 1.5em;
  letter-spacing: 0;
  margin-bottom: 0.15rem;
  color: var(--text-color);
  font-weight: 500;
}

.ui-pnotify-text {
  font-size: 0.85rem;
  letter-spacing: 0;
  padding-left: 4.4em;
  color: var(--text-color);
  font-weight: 400;
}

.ui-pnotify-closer,
.ui-pnotify-sticker {
  color: var(--text-color);
  opacity: 0.5;
}

.ui-pnotify-closer {
  margin-left: 0.6rem;
}

.ui-pnotify .btn-default {
  font-size: 12px;
}

.ui-pnotify .btn.btn-default {
  background: var(--blue-azure) !important;
  border: 1px solid var(--blue-azure) !important;
  border-radius: 3px !important;
  color: #fff;
}

.ui-pnotify .btn.btn-default.cancel {
  background: none !important;
  border: 0 !important;
  text-decoration: underline;
  color: var(--dark-text-color);
  text-transform: none;
}


.notifyConfirm .ui-pnotify-container {
  background-color: var(--white-color) !important;
  box-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5);
  border-width: 0 !important;
  border-radius: 0.85rem !important;
  border-color: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.notifyConfirm .ui-pnotify-container>* {
  margin: 0 !important;
  padding: 0 !important;
}



.ui-pnotify.notifyConfirm .ui-pnotify-icon {
  display: grid;
  place-items: center;
  background-image: linear-gradient(to right, var(--userThemeColor) 11%, var(--userThemelightColor2) 100%);
  color: #FFF;
  margin-bottom: 1rem !important;
}

.notifyConfirm .ui-pnotify-container::after {
  background-color: var(--userThemeColor);
}

.notifyConfirm .ui-pnotify-container>div:last-child {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem !important;
}

.notifyConfirm .ui-pnotify-container .ui-pnotify-title {
  margin-bottom: 0.45rem !important;
}

.notifyConfirm .ui-pnotify-container>div:last-child>button:first-child {
  flex: 1 1 0;
  color: var(--text-color);
  text-transform: uppercase;
}

.notifyConfirm .ui-pnotify-container>div:last-child>button:last-child {
  flex: 1 1 0;
  background-color: var(--userThemeColor) !important;
  border-radius: 9999px !important;
  text-transform: uppercase;
}


.ui-pnotify-closer,
.ui-pnotify-sticker {
  display: flex;
  visibility: visible !important;
}

.app-container {
  width: min(100% - 1em, 150em);
  height: 100%;
  margin: 0 auto;
}

.form-label {
  font-weight: 500;
  text-transform: capitalize;
  font-size: 0.78rem !important;
}

.form-label>span {
  color: red;
}

.btn-outline {
  border: 1px solid var(--primary-color);
  position: relative;
  color: var(--primary-color);
  transition: 0.3s ease all;
  z-index: 1;
  border-radius: 3em;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  font-weight: 500;
  font-size: 0.95em;
  text-transform: uppercase;
}

.btn-outline:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: var(--primary-color);
  z-index: -1;
}

.btn-outline:hover,
.btn-outline:focus {
  color: var(--white-color) !important;
}

.btn-outline:hover:before,
.btn-outline:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
  color: var(--white-color) !important;
}

.btn-outline:active {
  transform: scale(0.9);
  color: var(--white-color) !important;
}

.btn-outline:hover {
  background-color: var(--white-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--white-color) !important;
}

.btn-primary {
  border: 1px solid var(--primary-color);
  position: relative;
  color: var(--white-color);
  transition: 0.3s ease all;
  z-index: 1;
  border-radius: 3em;
  overflow: hidden;
  background-color: var(--primary-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  font-weight: 500;
  font-size: 0.95em;
  text-transform: uppercase;
}

.btn-primary:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: var(--white-color);
  z-index: -1;
}

.btn-primary:hover,
.btn-primary:focus {
  color: var(--primary-color) !important;
}

.btn-primary:hover:before,
.btn-primary:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.btn-primary:active {
  transform: scale(0.9);
}

.btn-primary:hover {
  background-color: var(--white-color) !important;
  border-color: var(--primary-color) !important;
}



.btn.disabled,
.btn-primary.disabled,
.btn-primary:disabled {
  pointer-events: none;
}


.card {
  border-radius: 0.75em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 0.75em;
  color: var(--text-color);
}

.card-header {
  padding: 0;
  border-color: var(--border-color);
  min-height: 2.5em;
  text-transform: capitalize;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 600;
}

.card-body {
  padding: 0;
  border-color: var(--border-color);
  height: 100%;
}


#loading {
  display: grid;
  place-items: center;
}

.loader-section {
  display: grid;
  place-items: center;
  gap: 0.55em;
}

/* .loader-circle-section {
  width: 6rem;
  height: 6rem;
  background-color: var(--white-color);
  border-radius: 50%;
  padding: 0.55rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
} */

.loader-circle-section {
  width: 4.35rem;
  height: 4.35rem;
  background-color: var(--white-color);
  border-radius: 50%;
  padding: 0.55rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  -webkit-animation: flip-icon 1100ms infinite;
  animation: flip-icon 1100ms infinite;
}

#loading img {
  position: relative;
  top: 0;
  margin: 0 auto;
  display: grid;
  place-items: center;
  height: 100%;
}


/* #loading img {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 0;
  margin: 0 auto;
  display: grid;
  place-items: center;
  height: 100%;
  z-index: 1;
} */

.road-section {
  overflow: hidden;
  position: absolute;
  perspective: 500px;
  top: 58%;
  display: none;
}

.road {
  opacity: 0.9;
  width: 120vw;
  height: 21px;
  background: #555;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(80, 80, 80, 0.2) 50%, rgba(30, 30, 30, 0.4) 70%, rgba(60, 60, 60, 0.5) 87%, rgba(180, 180, 180, 0.5) 100%);
  background-size: 19vw auto;
  transform-origin: center bottom;
  transform: rotateX(45deg) translate(-20vw);
  animation: roadMoving 1s linear infinite;
  display: none;
}

.road-stripes {
  position: absolute;
  opacity: 0.5;
  top: 40%;
  width: 120vw;
  height: 3px;
  background: repeating-linear-gradient(to right, var(--white-color), var(--white-color) 8vw, transparent 8vw, transparent 20vw);
  display: none;
}

.loading-text {
  margin: 0;
  font-size: 0.76rem;
  color: var(--white-color);
  letter-spacing: 3px;
  font-weight: 400;
  text-transform: uppercase;
  margin-left: 1rem;
}

@keyframes flip-icon {
  0% {
    transform: rotateY(360deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

.tab-content--section .profilels-tabs>ul {
  display: none;
}

.tab-content--section .item::before {
  content: attr(data-title);
  border: 1px solid var(--primary-color);
  width: 100%;
  display: block;
  padding: 0.5rem 1rem;
  color: var(--primary-color);
  font-weight: 500;
  background-color: var(--light-bg-color);
}

.header-h6 {
  font-size: 1.28rem;
  font-weight: 700;
}

.tab-activation-section {
  height: 100%;
  padding: 1rem;
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.edit-btn {
  font-size: 0.75rem;
  padding: 0.22rem 1rem !important;
  box-shadow: none !important;
}

.details-section {
  height: calc(100% - 3.5em);
  margin-top: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.company-logo-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.company-logo-section>span>span:first-child {
  color: rgba(0, 0, 0, 0.6);
}

.company-logo-section>span>span:first-child:hover {
  color: var(--primary-color);
}

.company-logo-section>div {
  height: max-content;
  width: max-content;
  max-width: 160px;
  max-height: 160px;
  padding: 0.55em;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 2px dashed var(--primary-color);
  background-color: var(--light-bg-color);
}

.item-content {
  height: 100%;
}

#div_companyProfile>div:not(:nth-child(n+5)) {
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.641rem;
}

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

.border-right-dashed {
  border-right: 2px dashed var(--border-color);
}

.dropify-wrapper {
  font-family: "Inter", sans-serif;
  color: gray;
  border: 1px solid var(--border-color);
  text-transform: capitalize;
  border-radius: 8px;
}

.pointofContact-tab-section,
.pointofContactEdit-tab-section {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.55rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.pointofContact-tab-section>li,
.pointofContactEdit-tab-section>li {
  cursor: pointer;
  color: #afafaf;
  position: relative;
}

.pointofContact-tab-section>li.ActiveTab,
.pointofContactEdit-tab-section>li.ActiveTab {
  color: var(--primary-color);
}

.pointofContact-tab-section>li:after,
.pointofContactEdit-tab-section>li:after {
  position: absolute;
  content: "";
  display: block;
  clear: both;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0.15rem;
  top: calc(100% + 7px);
  -webkit-transition: width 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: width 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--primary-color);
  opacity: 0;
}

.pointofContact-tab-section>li.ActiveTab:after,
.pointofContactEdit-tab-section>li.ActiveTab:after {
  width: 100%;
  opacity: 1;
}

.pointer-event-none {
  pointer-events: none;
  opacity: 0.35;
}

.contact-tab-content {
  display: none;
  height: 100%;
}

.contact-tab-content.ActiveTab {
  display: block;
}

.d-none {
  display: none !important;
}

.h-85 {
  height: 85vh;
}

.btn.disabled,
.btn-primary.disabled,
.btn-primary:disabled {
  color: #FFF !important;
  background: gray !important;
  border: 1px solid #DDD !important;
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
  border-radius: 3rem;
}

.grid-list-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80px;
  border: 1.25px solid var(--primary-color);
  border-radius: 8px;
  overflow: hidden;
}

.grid-list-view>span {
  display: grid;
  place-items: center;
  padding: 0.25rem;
  border-radius: 5px;
  cursor: pointer;
  color: var(--primary-color);
}

.grid-list-view>span.active-view {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.searchBox-container {
  background-color: var(--light-bg-color);
  padding: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--primary-color);
  border-radius: 8px;
  width: 40px;
  transition: 300ms;
  overflow: hidden;
  cursor: pointer;
}

.searchBox-container.active {
  transition: 200ms;
  width: 250px;
}

.searchBox-container.active .close-icon {
  transition: 500ms;
  scale: 1;
}

.searchBox-container .search-icon,
.searchBox-container .close-icon {
  position: relative;
  min-width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchBox-container .close-icon {
  scale: 0;
}

.searchInput {
  border: 0;
  outline: 0;
  background-color: transparent;
  height: 100%;
  width: min(100% - 4rem);
  margin: 0 auto;
  font-size: 0.85rem;
}

table>thead:not(.ui-datepicker-calendar > thead) {
  background-color: var(--light-bg-color);
}



table>thead>tr>th,
.table>thead>tr>th {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.82rem;
}

.table td,
.table td span {
  font-size: 0.745rem;
  font-weight: 400;
  vertical-align: middle;
}

.table td:not(:first-child, .ui-datepicker-calendar td) {
  border-left: 1px solid rgb(233, 236, 239);
}


table>tbody>tr:not(.ui-datepicker-calendar > tbody > tr) {
  border-bottom: 1px solid rgb(233, 236, 239);
  position: relative;
}

.table-min-dropdown {
  border-color: var(--border-color);
  padding: 5px;
  border-radius: 5px;
}

.btn-success {
  box-shadow: none !important;
  background-color: rgb(242, 251, 243) !important;
  color: rgb(93, 203, 108) !important;
  font-weight: 700;
  border-radius: 2rem !important;
  transition: all 600ms cubic-bezier(0, 0, 0, 1);
}

.btn-success:hover {
  background-color: #5dcb6c !important;
}

.btn-info {
  box-shadow: none !important;
  background-color: rgb(235, 254, 255) !important;
  color: rgb(28, 214, 244) !important;
  font-weight: 700;
  border-radius: 2rem !important;
  transition: all 600ms cubic-bezier(0, 0, 0, 1);
}

.btn-info:hover {
  background-color: #1cd6f4 !important;
}

.btn-warning {
  box-shadow: none !important;
  background-color: rgb(255, 251, 197) !important;
  color: rgb(226, 147, 0) !important;
  font-weight: 700;
  border-radius: 2rem !important;
}

.btn-warning:hover {
  background-color: rgb(255, 191, 0) !important;
  color: #FFF !important;
}

.btn-alert {
  color: #f18000 !important;
  background-color: #ffeec5 !important;
  font-weight: 700;
  border-radius: 2rem !important;
  border: 1px solid !important;
  box-shadow: none !important;
}

.btn-alert:hover {
  background-color: #f18000 !important;
  color: #FFF !important;
}

.btn-danger {
  color: #ff3f54 !important;
  background-color: #ffcace !important;
  font-weight: 700;
  border-radius: 2rem !important;
  border: 1px solid !important;
  box-shadow: none !important;
}

.btn-danger:hover {
  background-color: #ff3f54 !important;
  color: #FFF !important;
}

.btn-pink {
  color:#db599b !important;
  background-color: #fae9f3  !important;
  font-weight: 700;
  border-radius: 2rem !important;
  border: 1px solid !important;
  box-shadow: none !important;
}

.btn-pink:hover {
  background-color: #db599b  !important;
  color: #FFF !important;
}


.show_pass {
  position: absolute;
  top: 13px;
  right: 25px;
  cursor: pointer;
  opacity: 0.6;
}

.remove-icon {
  width: 2rem;
  height: 2rem;
  color: var(--white-color);
  background-image: linear-gradient(135deg, rgb(251, 113, 121) 0%, rgb(226, 28, 55) 100%);
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 2rem;
  cursor: pointer;
}

.back-search-lsp {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: var(--primary-color);
  font-size: 0.79rem;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
}

.search-lsp-form-section {
  border-right: 1px solid var(--form-border);
  padding: 1rem;
  height: 100%;
}

.lsp-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  grid-gap: 1em;
}

.lsp-card-box {
  height: 100%;
  overflow: hidden;
  box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
  border-radius: 1rem;
  position: relative;
}

.lsp-card-box>.top-bg-section {
  background-color: var(--light-bg-color);
  height: 8em;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%, 0% 38%);
}

.company-logo-view {
  margin: auto;
  position: absolute;
  left: 0;
  top: 20px;
  right: 0;
  display: grid;
  place-items: center;
  background-color: var(--white-color);
  width: 100px;
  height: 100px;
  border: 0.25vmin solid var(--primary-color);
  border-radius: 15px;
  overflow: hidden;
  padding: 0.75rem;
}

.company-logo-view>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.lsp-company-details {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lsp-company-details>h3 {
  font-size: 1.125rem;
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0.55px;
  color: var(--primary-color);
  text-align: center;
}

.lsp-company-details>ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  padding: 0rem 1rem;
  margin-top: 0.4em;
}

.lsp-company-details>ul>li {
  font-size: 0.85rem;
}

.lsp-company-notFound-section {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: min(100% - 1rem, 50ch);
  margin: 0 auto;
}

.lsp-company-notFound-section>h1 {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.75rem;
  opacity: 0.5;
  animation: shine 4s linear infinite;
  mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .5) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
  mask-size: 500%;
}

.lsp-list-card {
  border: 1px solid #BDBDBD;
  height: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 0.75rem;
  overflow: hidden;
  width: 100%;
}

.lsp-list-card>header>h5 {
  font-size: 0.935rem;
  font-weight: 600;
  color: var(--primary-color);
}

.profile-icon-bg {
  width: 2em;
  height: 2em;
  background-color: var(--light-bg-color);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 2em 0 0;
}

.action-options {
  position: absolute; /* changed  absolute to relative */
  background-color: var(--white-color);
  border-radius: 40px;
  width: auto;
  left: 0; /*  changed 0 to 46*/
  top: auto; /* changed  auto to -14*/
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #DDDD;
  place-items: center;
  overflow: hidden;
  display: none;
  animation: showActionToolTip 500ms ease-in-out;
  transform: translateX(40px);
  z-index: 2;
}
/* .action-show svg{
	margin-top: 3px; changed added  
} */

.action-options>ul {
  display: flex;
  justify-content: flex-start;
}

.action-options>ul>li {
  flex: 1 1 0;
  cursor: pointer;
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.action-options>ul>li:hover {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.action-options>ul>li>svg {
  width: 0.98em;
  height: 0.98em;
}

.action-options>ul>li:not(:last-child) {
  border-right: 1px solid #DDD;
}

.action-show {
  border-radius: 40px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.action-show:hover {
  background-color: rgb(237 237 237 / 80%);
}

.action-show:hover .action-options {
  display: grid;
}


.traffic-light-container {
  width: 10ch;
  height: 3.5ch;
  background-color: var(--white-color);
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px 5px;
  border: 2px solid #403d3d70;
  border-radius: 10px;
  margin: 0 auto;
  flex-direction: row-reverse;
}

.traffic-light-circle {
  width: 20px;
  height: 20px;
  background-color: #403d3d54;
  border-radius: 100%;
  color: var(--white-color);
  opacity: 0.45;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.traffic-light-circle>svg {
  width: 100%;
  height: 100%;
}

.traffic-light-circle>span {
  font-size: 1.125em !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 0;
  letter-spacing: 0;
}

.traffic-green-circle {
  background-color: RGB(50, 164, 49);
  position: relative;
  color: var(--white-color);
  opacity: 1;
}

.traffic-red-circle {
  background-color: hsl(0, 100%, 50%);
  position: relative;
  color: var(--white-color);
  opacity: 1;
}

.traffic-yellow-circle {
  background-color: hsl(45, 100%, 50%);
  position: relative;
  color: var(--white-color);
  opacity: 1;
}


.ui-widget {
  font-family: var(--font-family);
  font-size: 13px;
  /* height: calc(100vh - 475px) !important; */
}



.card-height {
  height: auto;
  min-height: calc(100vh - 90px);
  max-height: max-content;
}

.modal-header {
  padding: 0.7em 1em;
  border-bottom: 1px solid var(--border-color);
  background-color: hsl(0deg 0% 93% / 35%);

}

.modal-header>* {
  font-weight: 700;
}

.modal-footer {
  padding: 0.7em 1em;
  border-top: 1px solid var(--border-color);
  background-color: hsl(0deg 0% 93% / 35%);
}

.modal .modal-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #DDDD;
  border-radius: 1rem;
}

.modal.show .modal-content {
  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.form-border-section {
  border: 0.085em solid var(--primary-color);
  padding: 1rem 0 0 0;
  position: relative;
  height: auto;
  margin-top: 1.5rem;
}

.form-separation-heading {
  position: absolute;
  top: -11px;
  left: 30px;
  background: var(--white-color);
  /* width: 5em; */
  text-align: center;
  color: var(--primary-color);
  font-weight: 700;
  padding: 0 0.65em;
  font-size: 0.88rem !important;
  text-transform: uppercase;
}

.form-scroll-view {

  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.45em;
}

.uplod-driver-photo .dropify-wrapper {
  border: 2px dashed var(--border-color);
}

.span_ProfileSection {
  width: 5cm;
  display: grid;
  place-items: center;
}


.custom-file-input,
.custom-file-label {
  width: 100% !important;
  height: 3rem;
  border-radius: 0.45rem;
  overflow: hidden;
  padding: 0 1rem;
  line-height: 3;
  border: 1px solid rgba(33, 33, 33, 0.32) !important;
  outline: 0 !important;
}

.custom-file-label {
  margin-top: 0;
  margin-bottom: 0;
  outline: 0 !important;
}

.custom-file-label::after {
  background-color: rgba(0, 0, 0, 0.035) !important;
  color: var(--text-color);
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  width: 6rem;
  font-size: 0.86rem;
  font-weight: 500;
  outline: 0;
}

.custom-file-input:focus~.custom-file-label::after {
  border-width: 0 !important;
  box-shadow: none;
}

.custom-file {
  height: 100%;
}

.border-for-radio-section {
  border: 1px solid var(--form-border);
  border-radius: 0.45em;
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: none !important;
}

.grid-row {
  display: grid;
  grid-template-rows: 0.05fr 1fr;
}

.grid-row>* {
  margin: 0.5rem;
}

.phone-no-input-section {
  display: flex;
  align-items: center;
  border: 1px solid var(--form-border);
  border-radius: 0.45em;
  overflow: hidden;
  height: 3rem;
}

.phone-no-input-section>* {
  border: 0;
  padding: 0 !important;
  background: transparent !important;
  height: 100%;
}


.phone-no-input-section>select {
  width: 4.5rem;
  text-align: center;
  height: 100%;
  border-radius: 0;
}

.phone-no-input-section>input {
  border-radius: 0;
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
  width: 100%;
  border-left: 1px solid var(--form-border) !important;
}

.phone-no-input-section:hover:not(.phone-no-input-section>input:disabled) {
  border: 1px solid rgba(33, 33, 33, 0.32);
}

.phone-no-input-section:hover:not(.phone-no-input-section>input:disabled),
.phone-no-input-section:focus:not(.phone-no-input-section>input:disabled) {
  background-color: rgba(33, 33, 33, 0.03);
}

.phone-no-input-section.has-error {
  border-color: var(--red) !important;
  background: var(--red-cream) !important;
}

.phone-no-input-section.has-success {
  background: var(--green-light) !important;
  border-color: var(--lemon-green) !important;
}


.form-listing-section {
  border: 1px solid var(--border-color);
  height: 100%;
  border-radius: 0.65rem;
  overflow: hidden;
}

.form-listing-section>h6 {
  background-color: var(--bg-color);
  min-height: 2rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.886rem;
  letter-spacing: 0;
  font-weight: 600;
}

.dashed-curve {
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 0.12fr;
  align-items: center;
  overflow: hidden;
}

.edit-save-btn {
  background-color: var(--light-bg-color);
  height: 100%;
  color: var(--primary-color);
  display: grid;
  place-items: center;
  cursor: pointer;
}


.showEditSection {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  width: 95%;
  display: unset;
  right: 0;
}

.traffic--countBox {
  background-color: var(--light-bg-color);
  height: 100%;
  border-radius: 0.85rem;
  padding: 1rem;
}


.icon-section {
  background-color: var(--light-bg-color);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--primary-color);
}

.icon-section>svg {
  fill: var(--primary-color);
}

.traffic-Top-CountBox--Section {
  background-image: linear-gradient(123deg, var(--primary-color) 0%, var(--userThemelightColor2) 100%);
  display: grid;
  grid-template-columns: 1fr 0.4fr;
  align-items: center;
  color: var(--white-color);
  padding: 0.55rem 0;
  border-radius: 0.75em;
}


.traffic-Top-CountBox--Section>div>h6 {
  letter-spacing: 1px;
  opacity: 0.9;
}

.details-box-view-section {
  display: grid;
  grid-template-columns: 7rem 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  background-color: var(--white-color);
  border: 2px solid var(--userThemelightColor2);
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.card-logo-section {
  background-color: var(--userThemelightColor2);
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--white-color);
}

.card-logo-section>span {
  /* background-color: hsla(0,100%,100%,0.2); */
  color: var(--white-color);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid hsla(0, 100%, 100%, 0.5);
}

.card-logo-section>span>svg {
  fill: currentColor;
}

.card-logo-section>h5 {
  opacity: 0.9;
  letter-spacing: 1.25px;
  font-weight: 600;
}

.traffic-lights-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.traffic-lights-section>* {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--primary-color);
  height: 100%;
  border-top: 0;
  border-bottom: 0;
}


.traffic-light-circle-dashboard-view {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.traffic-lights-section>div>span {
  padding: 0.35rem;
  display: grid;
  place-items: center;
  height: 100%;
}

.traffic-lights-section>div>span:nth-child(2) {
  border-top: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  width: 100%;
  text-align: center;
}


.traffic-lights-section>div:nth-child(2) {
  border-right-width: 0;
  border-left-width: 0;
  border-radius: 0px;
}

.traffic-lights-section>div:nth-child(3) {
  border-right: 0;
}

.traffic-lights-section>div>span:nth-child(3) {
  border-radius: 0px;
  border-bottom: 2px solid var(--primary-color);
  width: 100%;
  text-align: center;
}

.has-success>.custom-file-input,
.has-success>div>.custom-file-label {
  background: var(--green-light) !important;
  border-color: var(--lemon-green) !important;
}

.has-error>.custom-file-input,
.has-error>div>.custom-file-label {
  border-color: var(--red) !important;
  background: var(--red-cream) !important;
}

.form-img-view {
  aspect-ratio: 1/1;
  object-fit: contain;
  object-position: center;
  width: 5cm;
  border: 1px solid var(--border-color);
  padding: 0.35em;
  overflow: hidden;
  border-radius: 8px;
}

.form-img--edit-view {
  aspect-ratio: 1/1;
  object-fit: contain;
  object-position: center;
  width: 100%;
  border: 1px solid var(--border-color);
  padding: 0.35em;
  overflow: hidden;
  border-radius: 8px;
}

.form-edit-gap {
  gap: 0.55rem;
}

.form-edit-gap>span:hover {
  color: var(--primary-color);
}

.save-btn {
  color: var(--primary-color);
  display: grid;
  place-items: center;
  background-color: var(--userThemelightColor);
  width: 2.35em;
  height: 2.35em;
  border-radius: 99999px;
  overflow: hidden;
  padding: 0;
}

.forms-Heading-bg {
  background-image: linear-gradient(43deg, var(--userThemelightColor), var(--userThemelightColor), var(--white-color));
  padding: 0.25rem 0.35rem;
  color: var(--primary-color);
}

.document-img-view--section {
  width: 5cm;
}



.opacity-0 {
  opacity: 0;
}

.modal-body {
  height: 100%;
  height: 100%;
  max-height: calc(100vh - 300px);
  overflow: auto;
}


@media (min-width: 576px) {
  .modal-dialog {
    max-width: calc(100% - 8rem);
  }
}

.content-loader {
  width: 100%;
  height: 100%;
  background: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.content-loader>.spinner {
  border-color: var(--text-color) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
}

.content-loader>.spinner {
  -webkit-animation: spinner .5s linear infinite;
  animation: spinner .5s linear infinite;
  border-color: var(--text-color) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  display: inline-block;
  height: 2.5em;
  width: 2.5em;
}

.ms-drop {
  border-radius: 0 0 0.75em 0.75em;
}

.ms-search {
  height: 2.5rem !important;
  border-radius: 0.45em;
}

.ms-search input {
  background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM0ZjRlNGUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTguNjksOC42OWE5LDksMCwwLDAsMTIsMTMuMzlsMy41NywzLjU4YTEsMSwwLDAsMCwxLjQyLDAsMSwxLDAsMCwwLDAtMS40MmwtMy41OC0zLjU3YTksOSwwLDAsMC0xMy4zOS0xMlpNMjAsMjBhNyw3LDAsMSwxLDAtOS45QTcsNywwLDAsMSwyMCwyMFoiIGRhdGEtbmFtZT0iTGF5ZXIgMiIvPjwvc3ZnPg==) no-repeat;
  background-position: left center;
  background-size: 1.65em;
  height: 100% !important;
  padding: 0.5em 1rem 0.5em 1.5rem;
  border-color: var(--border-color);
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background-blend-mode: difference;
}


.ms-drop input[type="checkbox"] {
  margin: 0 !important;
  accent-color: var(--primary-color);
  height: 0.845rem;
  width: 0.845rem;
}

.ms-drop ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ms-drop ul>li>label {
  display: flex;
  gap: 0.565rem;
  margin-left: 0px;
  align-items: center;
  margin-bottom: 0;
}

.ms-drop ul>li label {
  font-weight: 400;
  font-size: 0.724rem !important;
  letter-spacing: 0.35px;
}

.ms-drop ul>li {
  display: contents;
}

.document-type-section {
  /* background-color: rgb(0 0 0 / 0.075); */
  border-radius: 8px;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0.85rem;
  margin: 0 auto;
}

span+small {
  white-space: nowrap;
}

.document-type-section>svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: rgb(0 0 0 / 0.65);
}

.tip-notification--section {
  position: absolute;
  top: 10px;
  left: 0;
  right: 10px;
  width: min(400px, 100% - 1rem);
  height: auto;
  min-height: 8ch;
  z-index: 99999999;
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  background-color: var(--white-color);
  margin: 0 0 0 auto;
  border-radius: 10px;
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.0585), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.notification-tip--icon {
  background-color: #FFF59D;
  clip-path: ellipse(80% 80% at 10% 50%);
  display: flex;
  align-items: center;
}

.notification-tip--icon>span {
  background-color: rgb(251 192 45);
  padding: 0.5rem;
  border-radius: 7px;
  margin: 0 20%;
}

.notification-tip--icon>span>svg {
  fill: #fff59d;
  width: 1.75rem;
  height: 1.75rem;
}

.notification-content--section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.55rem 0.45rem 0.55rem 0;
}

.notification-content--section>h6 {
  width: 100%;
  margin: 0;
  font-size: 0.975rem;
  text-transform: capitalize;
  word-spacing: 2px;
  font-weight: 600;
  text-align: center;
}

.notification-content--section>p {
  text-align: start;
  width: 100%;
  margin: 0 auto;
  font-size: 0.7655rem;
  word-spacing: 2px;
  text-transform: capitalize;
  font-weight: 500;
  color: #000000b0;
}


.trip-map-tab--section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: min(100% - 25%, 60ch);
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.trip-map-tab--section>* {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 3rem;
  cursor: pointer;
  pointer-events: none;
}

.trip-map-tab--section>*>h2 {
  background-color: #DDD;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  position: relative;
  z-index: 2;
}


.trip-map-tab--section>*.active>h2 {
  background-color: var(--primary-color);
  color: var(--white);
}

.trip-map-tab--section>*>p {
  font-size: 0.8596rem;
  text-transform: uppercase;
  font-weight: 600;
  word-spacing: 2px;
  position: relative;
  z-index: 2;
  background-color: transparent;
}

.trip-map-tab--section>*.active>p {
  color: var(--primary-color);
}

.trip-map-tab--section>*::before,
.trip-map-tab--section>*::after {
  position: absolute;
  left: 0;
  content: " ";
  width: 100%;
  height: 1.525rem;
  z-index: 1;
  border: 1px solid var(--border-color);
  background-color: #EBEBEB;
}

.trip-map-tab--section>*.active::before,
.trip-map-tab--section>*.active::after {
  border-width: 2px;
  border-color: var(--primary-color);
  background-color: var(--userThemelightColor);
}

.trip-map-tab--section>*:before {
  top: 0;
  transform: skew(30deg);
  border-radius: 0.2em 0.2em 0 0;
  border-bottom: 0;
}

.trip-map-tab--section>*:after {
  bottom: 0;
  transform: skew(-30deg);
  border-radius: 0 0 0.2em 0.2em;
  border-top: 0;
}

.trip-tabcontent {
  border-top: 2px solid var(--primary-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vh - 140px);
}

.trip-form-section {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  grid-gap: 1rem;
}

.trip-form-section>*:nth-child(1) {
  grid-row: 1;
}

.trip-form-section>*:nth-child(2) {
  grid-row: 2;
}

.trip-form-section>*:nth-child(3) {
  grid-row: 3;
  border-top: 1px solid var(--border-color);
}

.trip-form-section-content {
  position: relative;
  overflow-y: auto;
  height: 100%;
}

.trip-form-section-content>* {
  position: absolute;
  width: 100%;
}

.trip-map-section {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100%;
}

.trip-map-append {
  height: calc(100vh - 220px) !important;
}

.custom-zoom-control-button {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: auto;
  background: var(--white-color);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.custom-zoom-control-button>ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.custom-zoom-control-button>ul>li {
  display: grid;
  place-items: center;
  color: #222222;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.custom-zoom-control-button>ul>li:is(:hover, :focus) {
  background-color: rgb(0 0 0 / 0.0385);
}

.custom-zoom-control-button>ul>li:is(:nth-child(2), :nth-child(3), :nth-child(4)) {
  border-top: 1px solid rgb(0 0 0 / 0.1);
}



#input_searchLOI.form-control {
  height: 45px;
  border-width: 0;
  outline: none;
  margin-top: 24px;
  margin-left: 24px;
  width: 22rem;
  border-radius: 8px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjNGY0ZjRmIgo+PHBhdGggZD0iTTM1OSwzNDQuOWExNzAuNTc3LDE3MC41NzcsMCwwLDAsNDMuNC0xMTMuOGMwLTk0LjUtNzYuOS0xNzEuMy0xNzEuMy0xNzEuMy05NC41LDAtMTcxLjMsNzYuOS0xNzEuMywxNzEuM3M3Ni45LDE3MS4zLDE3MS4zLDE3MS4zQTE3MC41NzcsMTcwLjU3NywwLDAsMCwzNDQuOSwzNTlsOTAuMyw5MC4zYTkuODIsOS44MiwwLDAsMCw3LjEsMi45LDEwLjI0MywxMC4yNDMsMCwwLDAsNy4xLTIuOSw5Ljk1OSw5Ljk1OSwwLDAsMCwwLTE0LjFaTTc5LjcsMjMxLjFjMC04My40LDY3LjktMTUxLjMsMTUxLjMtMTUxLjNzMTUxLjMsNjcuOSwxNTEuMywxNTEuM1MzMTQuNCwzODIuNCwyMzEsMzgyLjQsNzkuNywzMTQuNSw3OS43LDIzMS4xWiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-color: #fff;
  background-position: 7px center;
  background-size: 6%;
  color: #222;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  padding: 1rem;
  font-size: 0.845rem;
  padding-left: 2.155rem;
}

#input_searchLOI::placeholder {
  color: #222222;
  letter-spacing: 0.45px;
  font-family: var(--font-family);
}


.polyline-tool-section {
  position: absolute;
  top: 50px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.polyline-tool-section>div:first-child {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

.polyline-tool-section>div>span {
  background-color: var(--white-color);
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #222222;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.polyline-tool-section>div:nth-child(1)>span:first-child {
  border-radius: 8px 0 0 8px;
  border-right: 1px solid rgb(0 0 0 / 0.1);
  text-align: center;
}

.polyline-tool-section>div:nth-child(1)>span:nth-child(2) {
  width: 60px;
  text-align: center;
  cursor: not-allowed;
}

.polyline-tool-section>div:nth-child(1)>span:last-child {
  border-radius: 0 8px 8px 0;
  border-left: 1px solid rgb(0 0 0 / 0.1);
  text-align: center;
}

.polyline-tool-section>div:last-child>span {
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.event-type-list-section {
  position: relative;
}

.event-type-list-section>div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
  overflow: hidden;
  transition: height 600ms ease;
}

.event-type-list-section>div>span {
  display: flex;
  align-items: center;
}

.event-type-list-section>div>span>b {
  opacity: 0.85;
  font-weight: 600;
  font-size: 0.75rem;
}

.event-type-list-section>div>span>strong {
  font-weight: 500;
  font-size: 0.8445rem;
}

.event-type-list-section>div>span>strong>i {
  color: var(--lemon-green);
}

.showhide-table-list {
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255));
  padding: 0.5rem;
  position: absolute;
  bottom: 0;
  height: 60px;
  width: 100%;
  left: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  color: var(--primary-color);
  font-size: 0.785rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  cursor: pointer;
}

.alert-tab-form--section {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  row-gap: 1rem;
}

.alert-tab-form--section>header {
  grid-row: 1;
}

.alert-tab-form--section>div {
  grid-row: 2;
  position: relative;
  overflow-y: auto;
  height: calc(100vh - 280px);
}

.alert-tab-form--section>footer {
  grid-row: 3;
  border-top: 1px solid var(--border-color);
}

.form-scrollable_content {
  position: absolute;
  width: 100%;
}

.more-tool--section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-left: 0.85rem;
}

.more-tool--section>* {
  flex: 0 0 10%;
  display: flex;
  align-items: center;
  font-weight: 400;
}

.tab-bg--border {
  border-top: 2px solid var(--primary-color);
  height: 0.1rem;
  width: 100%;
  position: absolute;
  top: 0;
  /* transform: translateY(50%); */
  bottom: 0;
  margin: auto;
}


.service-arrow-section {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid;
  border-right: 0;
  border-bottom: 0;
  border-radius: 20px 0 0 0;
  transition: background-color 400ms ease, color 300ms ease;
}

.box--info-section {

  flex: 1 1 0;

}


.box--icon {
  position: relative;
  background-color: var(--userThemeColor);
  height: 3.55rem;
  width: 3.55rem;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  color: var(--white-color);
}

.box--icon::before {
  content: "";
  width: 4.25rem;
  height: 4.25rem;
  border: 1px solid var(--primary-color);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 9999px;
  opacity: 0.35;
}

.box--icon::after {
  content: "";
  width: 4.25rem;
  height: 4.25rem;
  background-color: var(--primary-color);
  opacity: 0.075;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 9999px;
}

.box-shadow-hover {
  cursor: pointer;
  transition: scale 400ms ease-in, box-shadow 300ms ease;
  overflow: hidden;
}

.box--icon>svg {
  fill: currentColor;
}

.box-shadow-hover:hover {
  /* outline: 8px solid var(--userThemelightColor2) !important; */
  box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
  scale: 103%;
}

.box-shadow-hover:hover .service-arrow-section {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.gap-1 {
  gap: 0.55rem;
}

.event-Type-badge {
  display: flex;
  background-color: var(--userThemelightColor);
  border: 1px solid var(--primary-color);
  padding: 0.35rem 0.6rem;
  border-radius: 7px;
  color: var(--primary-color);
}

.event-Type-badge>* {
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}


.horizontal-tab-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: auto;
}

.horizontal-tab-section>ul {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2rem;
  margin: 0;
  padding: 0;
  height: 100%;
  margin-top: 0.25rem;
}

.horizontal-tab-section>ul>li {
  font-size: 0.945rem;
  text-transform: capitalize;
  font-weight: 600;
  height: 100%;
  opacity: 0.35;
  color: #242424;
  letter-spacing: 0.500px;
  cursor: pointer;
  position: relative;
  transition: opacity 600ms ease-in;

}

.horizontal-tab-section>ul>li:is(.active) {
  opacity: 1;
  font-weight: 700;
}

.horizontal-tab-section>ul>li::after {
  content: "";
  position: absolute;
  top: calc(100% + 14px);
  height: 0.2145rem;
  width: 0;
  left: 50%;
  margin: 0 auto;
  transform: translateX(-50%);
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  background-color: var(--primary-color);
  transition: width 500ms ease;
  opacity: 0;
}

.horizontal-tab-section>ul>li:is(.active)::after {
  width: 100%;
  opacity: 1;
}

.trip-add-form--section {
  display: flex;
  width: 100%;
  height: 100%;
}

.trip-add-form--section>div:first-child {
  flex: 0 0 35%;
  height: calc(100vh - 90px);
}

.trip-add-form--section>div:last-child {
  flex: 0 0 65%;
  height: calc(100vh - 90px);
}

/* #div_tripView .trip-add-form--section>div:first-child {
  flex: 0 0 35%;
  height: calc(100vh - 90px);
} */


/* #div_tripView .trip-form--section:not(#div_addTripEdit .trip-form--section) {
  flex: 0 0 65%;
  height: calc(100vh - 90px);
} */


.trip-form--section {
  flex: 0 0 80%;
  height: calc(100vh - 90px);
  padding: 0.55rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  row-gap: 1rem;
}


.trip-form--section>*:first-child {
  grid-row: 1;
}

.trip-form--section>*:not(:first-child, :last-child) {
  grid-row: 2;
  position: relative;
  overflow-y: auto;
}

.trip-form--section>*:last-child {
  grid-row: 3;
  border-top: 1px solid var(--border-color);
}

.form-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.add-Transits-inputs {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  position: absolute;
  right: 0px;
  border-radius: 5px;
  top: 0.15px;
  border: 1px solid rgb(0 0 0 / 0.1);
}

.add-Transits-inputs>* {
  display: grid;
  place-items: center;
  height: 20px;
  width: 20px;
  cursor: pointer;
}

.add-Transits-inputs>*:last-child {
  border-left: 1px solid rgb(0 0 0 / 0.1);
}

.add-Transits-inputs>*:is(:hover, :focus) {
  background-color: rgb(0 0 0 / 0.0385);
}

.table th,
.text-wrap table th,
.text-wrap table td {
  border-top: 0;
}

.trip-to-details-section {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.third-title,
.sec-title {
  font-size: 0.945rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 1.325rem;
  padding-right: 0.655rem;
}

.third-title>span,
.sec-title>span {
  display: flex;
  align-items: center;
  gap: 0.355rem;
}

.third-title>span>span,
.sec-title>span>span {
  opacity: 0.55;
  font-weight: 700;
}

.tabs-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - 100px);
}

.tabs-content>header {
  grid-row: 1;
}

.tabs-content>article {
  grid-row: 2;
  height: 100%;
  position: relative;
  overflow-y: auto;
}

.tabs-content>article>div {
  position: absolute;
  min-height: 100%;
  width: 100%;
  left: 0;
}

.tabs-content>footer {
  grid-row: 3;
  display: flex;
  align-items: center;
  min-height: 10px;
  justify-content: end;
  border-top: 1px solid var(--border-color);
  padding-top: 0.55rem;
}

#div_tripList>.tabs-content>header .horizontal-tab-section>ul>li::after {
  top: calc(100% + 6px);
}

.browse-pdf-listing {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
}

.browse-pdf-listing>li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.browse-pdf-listing>li>div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
}

.browse-pdf-listing>li>div>svg {
  width: 26px;
  height: 26px;
  fill: #ED1C24;
}

.browse-pdf-listing>li>div>label {
  font-size: 0.788em !important;
  font-weight: 500;
  margin-bottom: 0;
}

.browse-pdf-listing>li>span {
  display: grid;
  place-items: center;
  cursor: pointer;
}

.browse-pdf-listing>li>span>svg {
  width: 18px;
  height: 18px;
}

.total-trip-view {
  display: flex;
  align-items: center;
  gap: 20px;
}

.view-trip {
  font-size: 0.8525rem;
  font-weight: 700;
  color: var(--userThemeColor);
  display: grid;
  place-items: center;
}

.total-trip-text {
  font-size: 0.695rem;
  font-weight: 700;
  color: #9b9b9b;
  text-transform: uppercase;
  letter-spacing: 0.085rem;
}

.trip-line {
  border: 1px solid #e7e7e7;
  flex: 1 1 0;
}

.traffic-view-for-trip {
  margin: 0;
  height: 2.65ch;
  width: 8ch;
}

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

.modal-view-btn {
  background-color: var(--userThemelightColor);
  color: var(--userThemeColor);
  padding: 0.428rem;
  display: grid;
  place-items: center;
  border-radius: 4px;
  border: 1px solid var(--userThemeColor);
}

.parallelogram-Shape-card {
  border: 1px solid var(--userThemeColor);
  padding: 0.55rem;
  position: relative;
}

.details-card {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  align-items: center;
  border: 1px solid #d7d7d7;
  padding: 0.425rem;
  margin-bottom: 0.65rem;
  border-radius: 10px;
}

.details-card>div:first-child {
  height: 100%;
  border-right: 1px dashed var(--border-color);
  align-items: center;
  justify-content: center;
  opacity: 0.825;
}

.details-card>div:first-child>h5 {
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: 0.25px;
}

.section-denoted,
.section-denoted1 {
  --border-color-denoted: var(--border-color);
  border: 1px solid var(--border-color-denoted);
  position: relative;
  border-radius: 10px;
  animation: fadeInUp 200ms ease;
}

.section-denoted::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: #FFF;
  top: -10px;
  left: calc(100% - 75vw);
  border-top: var(--border-color-denoted) solid 1px;
  border-left: var(--border-color-denoted) solid 1px;
  transform: rotate(45deg);
}

.section-denoted1::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: #FFF;
  top: -10px;
  left: calc(100% - 51.025vw);
  border-top: var(--border-color-denoted) solid 1px;
  border-left: var(--border-color-denoted) solid 1px;
  transform: rotate(45deg);
}

.event-type-count-badge {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 99px;
  position: relative;
  cursor: pointer;
}

.event-type-count {
  background-color: var(--userThemelightColor);
  display: grid;
  place-items: center;
  font-weight: 700 !important;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 3px solid #FFF;
  color: var(--userThemeColor);
}

.alert-mode-icon>svg {
  opacity: 0.625;
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
}

.alert-Mode-listing {
  display: flex;
  align-items: start;
  gap: 0.55rem;
  flex-direction: column;
}

.alert-Mode-listing>li {
  display: flex;
  align-items: center;
  gap: 0.265rem;
}

.alert-Mode-listing>li>span {
  font-size: 0.785rem;
  font-weight: 500;
}

.document-inner-form-section {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1.45rem;
  margin-bottom: 1rem;
}

.document-inner-form-section {
  border-bottom: 2px dashed #DDD;
}



.document-icon {
  display: grid;
  place-items: center;
  height: 2.35rem;
  width: 2.35rem;
  background-color: var(--userThemeColor);
  color: var(--white-color);
  padding: 8px;
  border-radius: 100%;
  position: relative;
  z-index: 6;
}

.document-icon::before {
  content: "";
  width: 2.9rem;
  height: 2.9rem;
  background-color: var(--primary-color);
  opacity: 0.258;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 9999px;
  z-index: -1;
}








/* .document-vertical-form-line{
  height: 100%;
  width: ;
} */


/*************************Trip Dashboard CSS*********************************/
.trip-count-strip {
  padding: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100% - 1rem, 55ch);
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 1.25rem 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  flex-wrap: wrap;
}

.trip-count-strip>li {
  margin: 0 1.55rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}



.trip-count-strip>li>span:first-child {
  font-size: 0.8945rem;
  font-weight: 700;
  opacity: 0.355;
}

.trip-count-strip>li>span:last-child {
  font-size: 0.8945rem;
  font-weight: 700;
}

.trip-dashboard--tab>ul {
  margin: 0;
  padding: 0;
  border-bottom: 0.25rem solid rgba(221, 221, 221, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: auto;
  gap: 1rem;
  height: 52px;
}


.trip-dashboard--tab>ul>li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c2c2c2;
  cursor: pointer;
  flex: 1 1 0;
  position: relative;
  justify-content: center;
  padding-bottom: 6px;
}

.trip-dashboard--tab>ul>li::after {
  content: "";
  height: 3px;
  width: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  background-color: currentColor;
  top: calc(100% + 5px);
  border-radius: 3rem;
  transition: all 400ms ease;
}

.trip-dashboard--tab>ul>li:not(:nth-child(1), :nth-child(2))::after {
  top: 100%;
}

.trip-dashboard--tab>ul>li.active::after {
  width: 100%;
}

.trip-dashboard--tab>ul>li>.tab-icon {
  pointer-events: none;
}

.trip-dashboard--tab>ul>li>.tab-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.895px;
  text-transform: capitalize;
  align-self: center;
  pointer-events: none;
  white-space: nowrap;
}

.trip-dashboard--tab>ul>li>.tab-count {
  font-size: 0.745rem;
  font-weight: 600;
  background-color: #f6f6f6;
  padding: 5px 8px;
  border-radius: 4px;
  letter-spacing: 0.45px;
  transition: all 400ms ease;
  pointer-events: none;
  color: #7e7e7e;
}

.driving.active {
  color: #39B54A;
}

.trip-dashboard--tab>ul>li.driving.active>.tab-count {
  background-color: #39B54A;
  color: #FFF;
}

.parked.active {
  color: #F18000;
}

.trip-dashboard--tab>ul>li.parked.active>.tab-count {
  background-color: #F18000;
  color: #FFF;
}


.completed.active {
  color: #00B8D9;
}

.trip-dashboard--tab>ul>li.completed.active>.tab-count {
  background-color: #00B8D9;
  color: #FFF;
}

.terminated.active {
  color: #F00404;
}

.trip-dashboard--tab>ul>li.terminated.active>.tab-count {
  background-color: #F00404;
  color: #FFF;
}

.Not-Tracked.active {
  color: #718096;
}

.trip-dashboard--tab>ul>li.Not-Tracked.active>.tab-count {
  background-color: #718096;
  color: #FFF;
}

.all.active {
  color: #224aff;
}

.trip-dashboard--tab>ul>li.all.active>.tab-count {
  background-color: #224aff;
  color: #FFF;
}

div[data-tab="driving-tab"] table thead, div[data-tab="driving-tab"] .searchBox-container{
  background-color: #f2ffda;
}

div[data-tab="driving-tab"] thead th, div[data-tab="driving-tab"] .searchBox-container .search-icon, .searchBox-container .close-icon {
  color: #39B54A;
}

div[data-tab="parked-tab"] table thead, div[data-tab="parked-tab"] .searchBox-container {
  background-color: #FFF3E5;
}

div[data-tab="parked-tab"] thead th, div[data-tab="parked-tab"] .searchBox-container .search-icon, .searchBox-container .close-icon {
  color: #F18000;
}

div[data-tab="completed-tab"] table thead, div[data-tab="completed-tab"] .searchBox-container {
  background-color: #ECFAFF;
}

div[data-tab="completed-tab"] thead th, div[data-tab="completed-tab"] .searchBox-container .search-icon, .searchBox-container .close-icon {
  color: #00B8D9;
}

div[data-tab="terminated-tab"] table thead, div[data-tab="terminated-tab"] .searchBox-container {
  background-color: #FFF3E5;
}

div[data-tab="terminated-tab"] thead th, div[data-tab="terminated-tab"] .searchBox-container .search-icon, .searchBox-container .close-icon  {
  color: #F00404;
}


div[data-tab="notTracked-tab"] table thead,  div[data-tab="notTracked-tab"].searchBox-container {
  background-color: #bdd3f4;
}

div[data-tab="notTracked-tab"] thead th, div[data-tab="notTracked-tab"] .searchBox-container .search-icon, .searchBox-container .close-icon  {
  color: #718096;
}


div[data-tab="all-tab"] table thead, div[data-tab="all-tab"] .searchBox-container {
  background-color: #DEE4FC;
}

div[data-tab="all-tab"] thead th, div[data-tab="all-tab"] .searchBox-container .search-icon, .searchBox-container .close-icon {
  color: var(--userThemeColor);
}

.a-formImgView {
  width: 5cm;
}

.lightboxCSS {
/*   overflow: hidden; */
  height: 100%;
}

.border-bottom-dashed {
  border-bottom: 2px dashed #e1e1e1;
}

.search-Criteria-section {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
}

.search-Criteria-section li {
  background-color: #ededed;
  padding: 0.25rem 0.545rem;
  border-radius: 4px;
  border: 1px solid #DDD;
}

.search-Criteria-section li h6 {
  opacity: 0.658;
}

/**********************************************REPORT UI DESIGN*******************************************************/

.report--Container{
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.left-side---Container {
  height: 100%;
  position: fixed;
  left: 0;
  width: auto;
  top: 0;
  padding-top: 70px;
  display: flex;
  z-index: 2;
  transform: translateX(-150px);
  transition: all 1s ease;
}

.left-side---Container_Open{
  width: 100%;
  background-color: rgba(239, 239, 239, 0.525);
  backdrop-filter: blur(.75px);
}

.side-Bar--listing{
  height: 100%;
  position: absolute;
  top:0;
  width: 53px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  z-index: 1;
}


.side-Bar--listing::before{
  content: "";
  width: 5px;
  height: 100%;
  background-color: rgba(var(--userThemRGBColor),1);
  position: absolute;
  top: 0;
  left: 0;
}

.side-Bar--listing > span{
  width: 100%;
  height: calc(100% - 180px);
  position: relative;
  display: grid;
  place-items: center;
  color: var(--white-color);
  cursor: pointer;
  margin-top: 70px;
}

.side-Bar--listing > span::before{
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  position: absolute;
  bottom: 0;
  border-left: 70px solid transparent;
  border-top: 39px solid var(--bg-color);
  z-index: -1
}

.side-Bar--listing > span::after {
  content: "";
  width: 100%;
  height: 30px;
  background-color: var(--primary-color);
  position: absolute;
  top: calc(100% - 30px);
  border-top: 39px solid transparent;
  border-right: 70px solid var(--bg-color);
  z-index: -1;
}

.side-Bar--listing > span > svg{
  pointer-events: none;
}

.side-Bar--Content{
  width: 350px;
  height: 100%;
  background-color: var(--white-color);
  border: 1px solid rgba(12, 12, 12, .15);
  border-left: 0;
  display: none;
  transform: translateX(-500px);
  padding: 1.25rem .55rem .55rem .55rem;
}


.right-side---Container{
  width: 100%;
  height: 100%;
  margin-left: 4.25em;
  margin-right: .5rem;
}

.slide-expand-arrow {
  position: absolute;
  top: 20px;
  right: -19px;
}

.slide-expand-arrow span {
  height: 40px;
  width: 100%;
  display: grid;
  background-color: #FFF;
  place-items: center;
  border-radius: 0 .5rem .5rem 0;
  cursor: pointer;
  border: 1px solid rgba(12, 12, 12, .15);
  border-left: 0;
}


.slide-expand-arrow span svg{
  width: 18px;
  height: 18px;
  color: rgba(12, 12, 12, .65);
}

.report-header--section {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(89.96deg, #FCFCFC 1%, rgba(var(--userThemRGBColor),.275) 50%, #FFFFFF 99%);
  padding: 0.4rem;
  border-bottom: 1.55px solid var(--userThemelightColor);
  border-top: 1.55px solid var(--userThemelightColor);
}


.report-form--section {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 100%;
  height: 100%;
}

.report-form--section>form {
  grid-row: 1;
  position: relative;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.report-form--section>form>div {
  position: absolute;
  left: 0;
  width: 100%;
}

.report-form--section>footer {
  grid-row: 2;
}

.left-side-section {
  position: fixed;
}

.right-side-section {
  margin-left: 25%;
}

.downloadExcel-btn-for-report {
  background-color: var(--light-bg-color);
  padding: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--primary-color);
  border-radius: 12px;
 /*  overflow: hidden; */
  cursor: pointer;
  border: 2px dotted var(--userThemeColor);
}

.filter-section-for-report ul {
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.click-filter {
  background-color: #FFF;
  align-items: center;
  display: flex;
  gap: 0.35rem;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid currentColor;
  color: var(--userThemeColor);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in;
}

.click-filter.active {
  background-color: var(--light-bg-color);
}

.click-not-filter {
  background-color: #FFF;
  align-items: center;
  display: flex;
  gap: 0.55rem;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid currentColor;
  color: rgb(210, 211, 215);
  font-size: 13px;
  font-weight: 600;
  cursor: not-allowed;
}

.click-filter.active .filter-cheked {
  display: flex !important;
  transform: scale(1);
}

.filter-cheked {
  display: none !important;
  transform: scale(0.55);
  transition: transform 1s ease-in-out;
}

.sub-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sub-filter>div {
  border: 1px solid var(--border-color);
  padding: 0.35rem 0.658rem;
  border-radius: 8px;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.55rem;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: .425rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #d0d5dd;
  padding: .15rem .675rem;
  font-size: .765rem;
  border-radius: .5rem;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 0 rgb(249, 250, 251), 0 1px 2px 0 rgba(16, 24, 40, .06);
}

.add-btn>svg {
  width: 17px;
  height: 17px;
  color: var(--primary-color);
}

.dropdown-item:hover, .dropdown-item:focus {
  color: var(--primary-color);
  text-decoration: none;
  background-color: #f1f1f5;
}

.active-bar
{
background-color: #19a061 !important;
}

.inactive-bar
{
background-color: #ff2323 !important;
}

.verifyLabel::before, .verifyLabel::after {
  top: 0.4rem;
  width: 1.4rem;
  height: 1.4rem;
}

/* Traffic Light Filter / Download Btn */
.pdpa-verified
{
background-color: white;
  width: 23px;
  height: 23px;
  color: RGB(50, 164, 49);
  border-radius: 100%;
  display: inline-block;
  margin-left: 2px;
  bottom: 2px;
}

.downloadExcel-container {
  background-color: var(--light-bg-color);
  padding: 0.55rem;
  display: grid;
  place-items: center;
  color: var(--primary-color);
  border-radius: 8px;
  width: 40px;
  cursor: pointer;
}

.excel-icon{
position: relative;
  min-width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selectDiv{
  padding: 0.55rem;
  display: flex;
  color: var(--primary-color);
  border-radius: 8px;
  cursor: pointer;
}
  
.filter-dropdown{
  border: 1px solid rgb(52, 58, 64);
  padding: 0.25rem 1rem;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
opacity: 0.75;
cursor: pointer;
}

.traffic-filter  .dropdown-menu.show{
	min-width: 12.8rem;
	top: 7px !important;
	padding: 0.55rem 0.25rem;
	border-radius: 8px;
	margin: 0 auto;
	right: 0;
	left: -3px !important;
}

.traffic-filter  .dropdown-menu.show a{
  gap: 1rem;
}

.traffic-filter  .dropdown-menu.show a span{
flex: 1 1 0;
}
  

.traffic-filter .dropdown-menu a:hover {
  background: #f0f1f7 !important;
  border-radius: 8px;
}
.export-toggle
{
background-color: var(--light-bg-color);
  padding: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--primary-color);
  border-radius: 8px;
  width: 40px;
  height: 37px;
  transition: 300ms;
  overflow: hidden;
  cursor: pointer;
  border: 0;
}

.export-toggle::after 
{
display: none;
}

.export-dropdown .dropdown-menu.show
{
min-width: 4rem;
top: 7px !important;
padding: 0.55rem 0.25rem;
border-radius: 8px;
margin: 0 auto;
right: 0;
left: -3px !important;
}

.export-dropdown .dropdown-menu a:hover {
  background: #f0f1f7 !important;
  border-radius: 8px;
}

.auto-refresh-btn {
  display: grid;
  place-items: center;
  border-radius: .5rem;
  color: var(--primary-color);
  background-color: var(--light-bg-color);
  padding: 0.5rem .85rem;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  overflow: hidden;
}

.auto-refresh-btn>div {
  display: grid;
  place-items: center;
  grid-template-columns: auto 60px;
  gap: .2rem;
  animation: showAutoRefresh 400ms ease;
}

.table--left-side-arrow {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-65%,-50%);
  width: 30px;
  height: 30px;
  z-index: 1;
  cursor: pointer;
}

.table--left-side-arrow_Fixed {
  position: fixed;
  left: 0;
  top: 60%;
  transform: translate(0%,-50%);
  width: 30px;
  height: 30px;
  z-index: 1;
  cursor: pointer;
}

.table--left-side-arrow>span {
  --delay:.125s;
  background-color: rgb(236 237 243);
  display: grid;
  place-items: center;
  border-radius: 0 8px 8px 0;
  width: 100%;
  height: 100%;
  color: var(--userThemeColor);
  transform: translateX(0px);
  opacity: 1;
  visibility: visible;
  transition: all 800ms ease-in-out var(--delay);
  box-shadow: 3px 0 3px -1px rgba(0, 0, 0, 0.16);
}

.table--left-side-arrow.hide-left-arrow{
  visibility: hidden;
}

.table--left-side-arrow.hide-left-arrow>span{
  transform: translateX(-5px);
  opacity: 0;
  visibility: hidden;
}

.table--right-side-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(65%,-50%);
  width: 30px;
  height: 30px;
  z-index: 1;
  cursor: pointer;
}

.table--right-side-arrow_Fixed{
  position: fixed;
  right: 0;
  top: 60%;
  transform: translate(0%,-50%);
  width: 30px;
  height: 30px;
  z-index: 1;
  cursor: pointer;
}

.table--right-side-arrow>span {
  --delay:.125s;
  background-color: rgb(236 237 243);
  display: grid;
  place-items: center;
  border-radius: 8px 0 0 8px;
  width: 100%;
  height: 100%;
  color: var(--userThemeColor);
  transform: translateX(0px);
  opacity: 1;
  visibility: visible;
  transition: all 800ms ease-in-out var(--delay);
  box-shadow: -3px 0 3px -1px rgba(0, 0, 0, 0.16);
}

.table--right-side-arrow.hide-right-arrow{
  visibility: hidden;
}

.table--right-side-arrow.hide-right-arrow>span {
  transform: translateX(5px);
  opacity: 0;
  visibility: hidden;
}

.progress {
  height: 25px;
  font-weight: 700;
  border-radius: .325rem;
  font-size: .782rem;
  letter-spacing: 0;
}


.document-no-verified {
  background-color: white;
  width: 23px;
  height: 23px;
  color: red;
  border-radius: 100%;
  display: inline-block;
  margin-left: 2px;
  bottom: 2px;
}

.document-yes-verified {
  background-color: white;
  width: 23px;
  height: 23px;
  color: RGB(50, 164, 49);
  border-radius: 100%;
  display: inline-block;
  margin-left: 2px;
  bottom: 2px;
}


.tree-structure--main {
  position: relative;
}

.tree-structure--main::after {
  content: "";
  position: absolute;
  width: 2px;
  height: calc(100% / 1.185);
  left: 30px;
  top: -8px;
  border-right: 1px dashed #212121;
  opacity: .385;
}


.tree-structure--main>div>div:nth-child(1)>div::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 1px;
  left: -32px;
  top: 50%;
  border-top: 1px dashed #212121;
  opacity: .385;
}

.tree-structure--main>div>div:nth-child(1)>div::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: -21px;
  top: 50%;
  border: 1px dashed #212121;
  transform: rotate(45deg) translateY(-65%);
  border-bottom: 0;
  border-left: 0;
  opacity: .385;
}

.client-tree--section {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  width: 100%;
  gap: .85rem;
}


.client-main-tree-section{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* .client-main-section li{
position: relative;
}

.client-main-section > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--userThemeColor);
  width: 2px;
  height: 100%;
} */

.client-main-section > li >span {
  padding: .375rem 1rem;
  border-radius: .289rem;
  font-size: .734rem;
  font-weight: 700;
  background-color: var(--userThemelightColor);
  color: var(--userThemeColor);
  border: 1px solid currentColor;
  text-align: center;
}

.client-tree--block{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.client-tree--block::before {
  content: "";
  position: absolute;
  left: -30px;
  width: 1px;
  height: calc(100% - 9px);
  /* background-color: var(--userThemelightColor2); */
  border-left: 1px solid var(--userThemeColor);
  top: -12px;
}


.client-tree--block > span{
  position: relative;
  padding: .375rem 1rem;
  border-radius: .289rem;
  font-size: 10px;
  font-weight: 600;
  color: var(--userThemeColor);
  border: 1px solid currentColor;
}

.client-tree--block > span::before {
  content: "";
  position: absolute;
  left: -30.7px;
  top: 5px;
  display: block;
  height: 1em;
  width: 30px;
  border-bottom: 1px solid var(--userThemeColor);
  border-left: 1px solid var(--userThemeColor);
  border-radius: 0 0 0 1em;
}


#uploadPlantModal .modal-dialog {
  width: min(100% - 1rem,calc(60em + .5vw));
}

#uploadPlantModal .document-inner-form-section{
  margin: 0;
  border: 0;
}

#uploadPlantModal .document-inner-form-section::after {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 30.75px;
  border-left: 2px dashed var(--userThemelightColor2);
}


.no-sort{
  pointer-events: none;
}

.default-sort-order{
  opacity: .25;
}

.sort-order-top svg{
  margin-top: 5px;
}

.sort-order-bottom svg{
  margin-bottom: 5px;
}

#PDF_Viewer_Section{
  display: none;
  opacity: 0;
  transform: translateY("100%");
}

.pdf-container{
  display: flex;
  flex-direction: column;
}

.top-badge--section{
  display: flex;
  justify-content: end;
}

.top-badge--section > div{
  display: flex;
  align-items: center;
  background-color: hsla(0, 88%, 37%, 1);
  height: 47px;
  margin-top: 2em;
}

.pdf-logo-section{
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  background-color: var(--white-color);
  border: 3px solid #b10b0b;
  border-radius: 9999px;
  overflow: hidden;
  padding: .5em;
  margin-left: -1em;
}

.badge-section {
  color: #FFF;
  padding: 0 1em;
  margin: 0;
  font-size: .925em;
  font-weight: 500;
  word-spacing: 2px;
}

.pdf-content-section svg{
  fill: #b10b0b;
}

.pdf-logo-section img {
  width: 100%;
  max-width: 100%;
}

.pdf-content--container {
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-gap: 8px;
  grid-auto-flow: dense;
  color: #222222;
  margin-bottom: 2rem;
}

.section-heading{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b10b0b;
  position: relative;
  grid-area: span 4 / span 4;
}

.section-heading::after {
  content: "";
  width: 40ch;
  border-bottom: 2px dashed #b10b0b;
  position: absolute;
  top: 100%;
}

.section-heading > span{
  height: 50px;
  width: 50px;
}

.pdf-content--listing{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
}

.pdf--img-section{
  grid-area: span 5 / span 2;
  position: relative;
}

.drivername--pdf{
  grid-area: span 4 / span 4;
  display: grid;
  align-items: center;
}

.inner-content--listing{
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 1rem;
}

.inner-content--listing svg{
  color: #b10b0b;
}

.driver-img--section {
  display: grid;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.driver-img--section img {
  display: inline-block;
  height: 230px;
}

/* #appendClients {
  counter-reset: clients;
} */

/* #appendClients>span::before {
  content: counter(clients) ")  ";
  counter-increment: clients;
} */

.grid-area-1--3{
  grid-area: span 1 / span 3;
}

.grid-area-1--2{
  grid-area: span 1 / span 2;
}

.grid-area-1--4{
  grid-area: span 1 / span 4;
}

.grid-template-columns-1 {
  grid-template-columns: 1fr;
}

.page-break {
  page-break-before: always;
  margin-bottom: 80px; 
}

.pdf-viewer-btn--section{
  position: fixed;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.pdf-viewer-btn--section button {
  border-radius: 9999px;
  height: 45px;
  width: 45px;
  padding: 0;
}

/*******************************DOCUMENT TAB *************************************************/
.document-tab--section{
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
 /*  margin: 0 auto 2rem auto; */
  height: 45px;
}

.document-tab--section span {
  flex: 120px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  height: 100%;
  display: grid;
  align-items: center;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-top: 2px solid rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.25);
}

.document-tab--section span.active{
  background-color: var(--primary-color);
  color: #FFF;
  border: 0;
} 


.document-tab--section span::before {
  content: "";
  height: calc(100% + .5px);
  position: absolute;
  border: 2px solid rgba(0, 0, 0, 0.14);
  width: 30px;
  border-radius: 0 0 0 0;
  left: -10.5px;
  transform: skew(-25deg);
  border-width: 0 0 0 2px;
  border-radius: 0;
  top: -1px;
}

.document-tab--section span::after{
  content: "";
  height: calc(100% + .5px);
  position: absolute;
  border: 2px solid rgba(0, 0, 0, 0.14);
  width: 30px;
  border-radius: 0 0 0 0;
  right: -10.5px;
  transform: skew(25deg);
  border-width: 0 2px 0 0;
  border-radius: 0;
  top: -1px;
}

.document-tab--section span.active::after,
.document-tab--section span.active::before {
  background: rgba(var(--userThemRGBColor), 1);
  border: 0;
  height: 100%;
  top: 0;
  z-index: 50;
}


.archived-img{
  width: 4cm;
}

.verified-badge {
  padding: .115em .115em .125em .8em;
  margin-left: 1em;
  border-radius: 999px;
  font-size: 12px;
  display: flex;
  align-items: center;
  width: fit-content;
  gap: .25em;
  letter-spacing: .55px;
  font-weight: 600;
}

.verified-badge svg{
  width: 20px;
  height: 20px;
}

.data-tooltip{
  position: relative;
  z-index: 999; /* Changed 999 to 99*/
}


.data-tooltip::before,
.data-tooltip::after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.2s ease;
}

.data-tooltip::before {
  content: attr(data-tooltip-content);
  width: max-content;
  font-size: 10px;
  font-weight: 500;
  background-color: rgba(var(--userThemRGBColor), .85);
  color: #FFF;
  padding: 3px 15px;
  border-radius: 6px;
  top: calc(100% + 5px);
  letter-spacing: 1px;
  max-width: 300px;
  white-space: pre-wrap;
}

.data-tooltip:not(.data-tooltip-left)::after {
  content: "";
  border-bottom: 5px solid rgba(var(--userThemRGBColor),.85);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: calc(100% + 1px);
}

.data-tooltip:hover::before,
.data-tooltip:hover::after {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.data-tooltip-left::before {
  right: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%) !important;
}


.archived-delete {
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: red;
  transform: translate(-50px, -10px);
  border-radius: 9999px;
  color: #FFF;
  z-index: 1;
}

.archived-delete > .data-tooltip::after {
  border-bottom: 5px solid red;
}

.archived-delete > .data-tooltip::before {
  background-color: red;
}

.archive-doc-tree .archived-delete{
  transform: translate(-50px, 20px);
}

/* Hide the previous and next arrows */
.lb-prev, .lb-next {
  display: none !important;
}

/* Hide the image count */
.lb-number {
  display: none !important;
}

.lb-closeContainer{
  max-width: 100%;
  /* min-width: 130px; */
}

@media all and (min-width: 1230px) {
  .tab-content--section .profilels-tabs>ul {
    display: flex;
  }

  .tab-content--section {
    display: grid;
    grid-template-columns: 18rem 3fr;
    height: 100%;
  }

  .tab-content--section>aside {
    height: 100%;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: auto;
  }

  .tabs-listing-section {
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--white-color);
    position: relative;
    z-index: 9;
  }

  .tabs-listing-section>li>a {
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75em;
    color: #afafaf;
    padding: 0.9rem 1.5rem;
    transition: color 900ms cubic-bezier(0.075, 0.82, 0.165, 1);
    position: relative;
  }

  .tabs-listing-section>li>a {
    border-bottom: 1px solid var(--border-color);
  }

  .tabs-listing-section>li>a>span {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    background: var(--bg-color);
    border-radius: 50%;
    font-size: 1.2rem;
    overflow: hidden;
    font-weight: 600;
  }

  .tabs-listing-section>li>a>div {
    display: flex;
    flex-direction: column;
  }

  .tabs-listing-section>li>a>div>label {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
  }

  .tabs-listing-section>li>a>div>small {
    text-transform: none;
    font-size: 0.65rem;
  }

  .tabs-listing-section>li>a:after {
    position: absolute;
    content: "";
    display: block;
    clear: both;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    top: 50%;
    -webkit-transition: height 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: height 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-right: 0.15rem solid var(--primary-color);
  }

  .tabs-listing-section>li>a.currentTab {
    color: var(--primary-color);
  }

  .tabs-listing-section>li>a.currentTab>span {
    background: var(--light-bg-color);
  }

  .tabs-listing-section>li>a.currentTab:after {
    height: 100%;
  }

  .tab-content--section .item {
    min-height: 0;
  }

  .tab-content--section .item::before {
    display: none;
  }

  .tab-content--section.tabs-side .profilels-tabs li {
    display: block;
  }

  .verified-section {
    display: grid;
    place-items: center;
    grid-template-rows: 1fr 3fr 1fr;
    gap: 0.45rem;
    margin-bottom: 2vh;
  }

  .tab-activation-section>.item {
    display: none;
  }

  .tab-activation-section>.item.currentTab {
    display: block;
  }

  .tab-content--section .item {
    height: 100%;
  }

  .item-content>div {
    height: min(100vh - 30vh, 90%);
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media (max-width: 1230px) {
  .contain-section {
    height: auto;
    overflow: hidden;
  }

  .tab-content--section {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }

  .tab-activation-section>.item>.item-content {
    opacity: 0;
    visibility: hidden;
    height: 0;
  }

  .tab-activation-section>.item.currentTab>.item-content {
    visibility: visible;
    opacity: 1;
    height: auto;
    margin-bottom: 1rem;
  }

  .item-content:last-child {
    margin-bottom: 0;
  }

  .item-content>div {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .item-content {
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-color);
    border-top: 0;
  }

  .right-side-section {
    margin-left: 0%;
  }

  .left-side-section {
    position: relative;
  }
  
  .filter-section-for-report ul{
    flex-wrap: wrap;
  }

    .sub-filter {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }

    .sub-filter>div {
      padding: 0.455rem 0.658rem;
      grid-template-columns: 1fr;
      align-items: center;
      gap: 1rem;
  }
}

@media (max-width: 1000px) {
  .search-lsp-form-section {
    border-bottom: 1px solid var(--form-border);
    border-right: 0;
  }

  .lsp-company-notFound-section {
    height: 350px;
  }

  .grid-row {
    display: flex;
    flex-direction: column;
  }

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

}

@media (max-width: 768px) {

  .report-form--section{
    height: 70vh;
  }

  .search-Criteria-section ul {
    flex-wrap: wrap;
  }

  .search-Criteria-section li {
    flex: 1 1 auto;
  }

  .search-Criteria-section {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .form-scroll-view {
    height: 90vh;
  }

  #div_companyProfile>div:not(:nth-child(n+6)) {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.75rem;
  }

  .company-profile-tab--Section {
    flex-direction: column;
  }

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

  .tip-notification--section {
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .tree-structure--main::after {
    height: calc(100% * .78);
  }

}


@keyframes showAutoRefresh {
  from {
    opacity: 0;
    scale: 0.85;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shine {
  from {
    -webkit-mask-position: 80%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}

@keyframes showActionToolTip {
  from {
    transform: translateX(30px);
  }

  to {
    transform: translateX(40px);
  }

}

@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}

/* @keyframes roadMoving {
  to {
    transform: rotateX(45deg) translate(0vw);
  }
} */

@keyframes loadMapToolBar {
  0% {
    transform: translateX(-1000px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes showMapType {
  0% {
    transform: translateX(10px) scale(.98);
  }

  100% {
    transform: translateX(0px) scale(1);
  }
}



.moveRight{
	animation : moveRight 0.3s linear;
}

@keyframes moveRight {
	0% {
	 transform :translateX(-50px);
	}
	100% {
	 transform : translateX(0);
	}
}

.moveLeft {
	animation : moveLeft 0.3s linear;	
}

@keyframes moveLeft {
	0% {
	 transform :translateX(50px);
	}
	100% {
	 transform : translateX(0);
	}
}

.arch-div > div:nth-child(2)::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 1px;
  left: -32px;
  top: 40%;
  border-top: 1px dashed #212121;
  opacity: .385;
}

.arch-div > div:nth-child(2)::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: -21px;
  top: 40%;
  border: 1px dashed #212121;
  transform: rotate(45deg) translateY(-65%);
  border-bottom: 0;
  border-left: 0;
  opacity: .385;
}

.profileThemeImage{
	width: 150px;
	height: 140px;
	object-fit: contain;
	
}

.gap-50
{
    gap: 50px;
}

/*===== Added by Jayesh ==============*/

#div_lspTable header div:nth-child(1){
	margin-left: auto !important;
	
}

.pdf-client-details > li >span {	
	color: black !important;
    background-color: white !important;
}
.pdf-client-tree::before{
	border-left: 1px solid black !important;
}
.pdf-client-tree > span {
	color: black !important;
}
.pdf-client-tree-span::before{
	border-left: 1px solid black !important;
	border-bottom: 1px solid black !important;
}
.text-green{
	color: #32a431 !important;
}

/* Fixing table thead header for all pages  */

table thead:not(.checkListTable thead) {
	position: sticky;
    top: 0;
    z-index: 999;
}

.table-responsive:not(.modal-body .table-responsive, .lsp-dashboard, .client-dashboard){
	height: 75vh;
    overflow: auto;
}
.downloadExcel-container{
	z-index: 9999 !important;
}
body.modal-open .downloadExcel-container{
	z-index: 0 !important;
}
.pdf-icon_Driver{
	z-index: 1 !important;
}

.action-show svg {
	margin-top: 3px;
}

#form_primeMoverEdit, #form_addDriverEdit, #form_trailerEdit{
	height: 65vh;
    overflow-y: auto;
}
#div_PrimeMoverView .form-scroll-view, #div_DriverView .form-scroll-view, #div_TrailerView .form-scroll-view{
	height: 66vh;
}
#div_msdsUploadView .form-scroll-view{
	height: 75vh;
}

#div_addMsdsUploadForm{
	height: 85vh;
    overflow-y: auto;
}

#form_addMsdsUploadEdit{
	height: 68vh;
    overflow-y: auto;
}

.dropdown-menu{
	z-index: 99999;
}


/* ========== Media Query Here ============= */
@media (min-width: 360px) and (max-width: 480px){
	/* SignIn Page */
	#registerAs li{
		padding-left: 10px;
    	gap: 0.4rem;
	}
	#registerAs li span svg{
		height: 1.3em;
	}
	
	#registerAs li:nth-child(2){
		padding-left: 5px;
    	gap: 0.2rem;
	}
	#registerAs li:nth-child(2) span svg{
		height: 1.7em;
	}
	
	/* Driver Details Page  and Prime Mover and Trailer Page*/
	.card-header{
		align-items: normal !important;
	}
	.traffic-filter{
		margin-right: 0px !important;
	}
	.card-header-btn{
		margin-left: auto !important;
    	flex-direction: column !important;
    	align-items: end !important;
    	gap: 0.8rem;
	}
	.searchBox-container.active {
	    transition: 200ms;
	    width: 170px; /* 146px */
	}

	/* .header-title-action{
		flex-wrap: nowrap !important;
	} */
	.right-btn-group{
		display: block !important;
		margin-left: auto !important;
		text-align: end;
	}	
	.remove-border{
		border-right: none !important;
		margin-bottom: 0.5rem !important;
		margin-right: 0 !important;
        padding-right: 0 !important;
	}
	.document-inner-form-section div h5{
		display: block !important;
	}
	.verified-badge{
		margin-left: auto !important;
	}
	
	.document-inner-form-section div .btn-archive{
		margin-top: 10px;
    	margin-left: auto;
	}
	.modal-dialog{
		width: 92% !important;
	}
	#ui-datepicker-div{
		left: 44px !important;
	}
	
	.first-latter-input-div{
		width: 35%;
	}
	@media (max-width: 768px) {
	    .select2-container {
	        width: 0 !important;
		}
	}
	
	/* CDS Page  */
	
	/* .card-parent-div{
		width: 80% !important;
	} */
	.img-checkbox{
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
	}
	.img-checkbox > li{
		width: 100% !important;
	}
	/* .cds-header-div{
		display: block !important;
	}
	.cds-btn-group{
		justify-content: flex-end !important;
	} */
	
	
	/* Location Page  */
	
	.trip-map-tab--section>*>h2 {
		height: 20px !important;
	}
	
	#div_tripList header{
		display: block !important;
	}
	
	.loi-btn-group{
		justify-content: end !important;
	}
	
	#div_loiEdit{
		overflow-y: auto;
	}
	#input_searchLOI.form-control {
	    margin-top: 8px;
	    margin-left: 8px;
	    width: 18rem;
    }
    .polyline-tool-section {
    	top: 55px;
	}
	.custom-zoom-control-button {
	    top: 55px;
	    right: 9px;
	}
	
	#div_categoryEdit footer{
		padding-right: 0 !important;
	}
	
	.trip-map-section {
    	display: block !important;
    }
    
    #div_setLocationEdit footer {
    	flex-direction: column;
    	gap: 10px;
    }
    #div_setLocationEdit footer div:nth-child(2) {
    	gap: 5px;
    }
    #div_setLocationEdit footer div:nth-child(3) {
    	flex-direction: column;
	    gap: 8px;
	    margin-bottom: 10px;
	    margin-left: auto;
    }
    #plot{
    	padding-left: 1.5rem !important;
    	padding-right: 1.5rem !important;
    }	
    /* #button_footerAdjusyBoundaryMap{
    	padding-left: 1.5rem !important;
    	padding-right: 1.5rem !important;
    } */
    
    #button_footerListCancel, #button_footerSaveMap{
    	margin-left: auto !important;
    }
    #button_footerListCancel, #a_headerBackStepList{
    	margin-right: 0 !important;
    }
    
    #button_footerListCancel, #a_headerBackStepList, #button_footerSaveMap, #button_footerAdjusyBoundaryMap{
    	width: 100%;
    }
    
    /*  Driving Alert Page */
    #div_driverAlertList div:nth-child(1){
    	margin-left: auto !important;
    }
    
    .trip-map-tab--section {
    	width: min(100% - 10%, 60ch);
    }
    .trip-map-tab--section>* > h2 {
    	width: 1.5rem !important;
        height: 1.5rem !important;
        padding-left: 4px;
        padding-right: 4px;
    }
    #div_driverAlertList header div{
    	margin-left: auto !important;
    }
    .trip-map-tab--section>* {
/*     	gap: 0.5rem !important; */
    	display: grid !important;
	    grid-template-columns: 0fr 4fr;
	    gap: 0.5rem !important;
    }
    .trip-map-tab--section>*>p {
    	font-size: 0.7596rem !important;
    }
    #div_moreEvent{
    	display: block !important;
    }
    #moreEventTypes, #moreEventType{
    	flex-direction: column;
    	align-content: start !important;
    	align-items: flex-start !important;
    }
    #moreEventType{
    	margin-bottom: 1rem !important;
    }
    
    #div_addDriverAlertForm footer{
    	padding-right: 0 !important;
    }
    
    /* #div_addAlertModeForm header{
    	width: 81% !important;
    } */
    
    #div_addAlertModeForm footer{
    	display: block !important;
    	text-align: end !important;
    }
    
    #button_footerCancelAlertMode{
    	margin-right: 0 !important;
    	margin-bottom: 5px !important;
    }
    
    /*  Trip Alert Page */
    .header-right-section{
    	margin-left: auto;
    }
    
    #div_MoreEventType{
    	display: block !important;
    }
    #div_addTripAlertForm footer{
    	padding-right: 0px 
    }
    
    #button_footerTripAlertCancel{
    	margin-right: 0 !important;
    }
    #button_footerTripAlertSave{
    	margin-top: 8px !important;
    }
    @media (max-width: 440px) {
	    .select2-container {
	        margin-top: 0px !important;
/* 	        margin-left: 10px; */
		}
	}
	
    /* Trips Page */
    .action-options {
    	border-radius: 10px !important;
/*     	left: 15px !important; */
    }
    .actionHolderloiModuleName, .actionHoldertripModuleName, .actionHoldersitesModuleName,
    .actionHoldersitesUserModuleName, .actionHoldertripProfileModuleName{
    	top: 0 !important;
    }
    .action-options>ul {
    	flex-direction: column;
	}
    
    .tripHeaderBtn{
    	margin-top: 30px;
    	justify-content: flex-end ;
    }
    .mapDiv{
    	padding: 10px;
    }
    #div_addTripEdit div:nth-child(1), #div_tripView div:nth-child(1), #div_addSitesForm div:nth-child(1), #div_SitesView div:nth-child(1){
    	display: block !important;
    }
    
    .trip-form--section footer{
    	padding-right: 0px;
    }
    #driverAlertModal .modal-body, #tripAlertModal .modal-body{
    	overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    #div_tripView footer{
    	flex-direction: column;
    	align-items: end !important;
	    gap: 10px;
    }
    
    #a_headerBackTripList, #a_DeleteTrip{
    	margin-right: 0 !important;
    }
    #a_headerBackTripList, #a_tripViewEdit{
    	width: 44% !important;
    }
    
    
    
    /* Trip Assign Page*/
    .horizontal-tab-section {
    	height: auto !important;
    	padding-left: 0 !important;
    }
    .tripNameDiv{
    	display: block !important;
    }
    .trip-to-details-section{
    	display: block !important;
    	margin-top: 1rem
    }
    #a_headerViewTrip{
    	margin-left:  auto;
    }
    
    
    /* Trip Tracked Report Page */
    
    .side-Bar--Content section:nth-child(1){
    	height: 100%
    }
    .div_tripTrackReport{
    	width: 85% !important;
    }
    .tripTrackReport-header, .gateCheckReport-header{
    	flex-direction: column;
	    align-items: end !important;
	    gap: 1rem;
    }
    .tripTrackReport-header h5, .gateCheckReport-header h5{
    	margin-right: auto !important;
    }
    
    
    /* Gate Check Report Page */
    .div_gateCheckReport{
    	width: 80% !important;
    }
    
    /* Trip Map Dashboard Page */
    
    #div_vehicleTrackingDateTime{
    	width: 84% !important;
    }
    .list-text-overflow {
    	width: 170px !important;
    }
    
    .labelTextDiv{
    	justify-content: normal !important;
    }
    .tab--content-section header{
    	width: 85% !important;
    }
    
    .map-type-card{
    	width: 180px !important;
    	top: 35px !important;
    	right: 60px !important;
    }
    .replay--section {
    	left: 58% !important;
    }
    
    /* lsp-gsp (GSP) Page */
    
    .lsp-gsp-header-div, .pm-header-div, .lsp-cc-header-div, .cc-lsp-header-div, .adminCC-header-div, .adminCC-LSP-header-div, .adminLSP-header-div{
    	flex-direction: column;
	    gap: 10px;
	    align-items: end !important;
    }
    #a_headerAddGspTable, #button_headerTrailerMapSave, #a_headerAddLspTable{
    	margin-right: 0 !important;
    }
    
    /* LSP-CC Page*/
    
    #div_DriverList header, #div_PrimeMoverList header, #div_TrailerList header, #div_lspTable header, #div_gspTable header, #div_trafficLight header{
/*     	display: block !important; */
    	flex-direction: column;
        gap: 5px;
        align-items: end !important;
    }
    #div_DriverList header h6, #div_PrimeMoverList header h6, #div_TrailerList header h6, #div_lspTable header h6, #div_gspTable header h6, #div_trafficLight header h6{
    	margin-right: auto !important;
    }
    
    /* CC-LSP Page  */
    
    .tree-structure--main::after {
    	left: -1px;
    }
    .tree-structure--main>div>div:nth-child(1)>div::before {
	    width: 16px;
	    left: -25px;
	    top: 50%;
	}
	.tree-structure--main>div>div:nth-child(1)>div::after {
	    width: 10px;
	    height: 10px;
	    left: -23px;
	    top: 50%;
	}
	.document-div{
		margin-left: 25px !important;
	}
    
    /* Sites Page  */
    
    .sites-header{
    	display: block !important;
    }
    
    .sites-header-div{
    	margin-top: 30px;
    	justify-content: flex-end;
    }
    
    .user-sites-header, .facilities-site-header{
    	flex-direction: column;
	    align-items: end !important;
	    gap: 0.5rem;
    }
    #a_headerAddSiteUsers, #a_headerAddSitePlants{
    	margin-right: 0 !important;
    }
    #div_bodySites{
    	padding-right: 1rem !important;
    }
    #div_sitePlantList{
    	margin-right: 0 !important;
    }
    
    /* GPS PM Page */
    .gpsPM-header h6{
    	margin-right: auto !important;
    }
    
    /* Admin CC */
	#div_ccTable header{
		flex-direction: column;
    	align-items: end !important;
	}
	#div_ccTable header h6{
		margin-right: auto;
	}
	.item-content {
/* 		border: none !important; */
    }
    
    
    /* Dashboard Pages Here (lspDashboard Page)*/
    
    .vehicle-card{
    	display: block !important;
    }
    #violation_chart, .vehicle-card div:nth-child(1), .vehicle-card div:nth-child(2){
    	padding: 0!important;
    }
    .card-trip-div{
	    gap: 0.5rem;
	    flex-wrap: wrap;
	    justify-content: flex-start !important;
    }
    
    .icon-header svg{
    	width: 30px;
    	height: 30px;
    }
    .icon-header h5{
    	font-size: 1rem;
    }
    
}

/******** TimeLine For Details CSS ********* */

.detailsInfoModal-dialog{
	width: 90% !important;
}
.detailsInfoModal-body{
	max-height: calc(100vh - 220px) !important;
}

.timeLine-driver{
    text-align: center;
    margin: 30px 0;
    color: #444
}
.fw-600{
    font-weight: 600;
}
.main-timeline {
    position: relative
}

.mainModal{
    background: white;
    padding: 15px;
    border-radius: 0.5rem;
}


/******************* Timeline Demo - 3 *****************/
.main-timeline3 {
    overflow: hidden;
    position: relative
}

.main-timeline3:before {
    content: "";
    width: 0px;
    height: 100%;
    border: 2px solid #95959580;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%)
}

.main-timeline3 .timeline {
    width: 50%;
    padding: 10px 60px 10px 100px;
    float: right;
    position: relative
}

.main-timeline3 .timeline:before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: hsl(0deg 88.3% 36.86%);
    border: 5px solid #fff;
    box-shadow: 0 0 1px 4px hsl(0deg 88.3% 36.86%);
    position: absolute;
    top: 42px;
    left: -9px
}

.main-timeline3 .timeline-content {
    display: block;
    background: #e9e9e7;
    padding: 40px 25px 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2) inset;
    position: relative;
    width: max-content;
    border-radius: 0.5rem;
    
}

.main-timeline3 .timeline-content:hover {
    text-decoration: none
}

.main-timeline3 .year {
	display: block;
    width: 80px;
    height: 33px;
    background: hsl(0deg 88.3% 36.86%);
    padding: 0 0 0 20px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 31px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .4) inset;
    border-radius: 10px 10px 10px 0;
    position: absolute;
    top: 10px;
    left: -15px;
}

.main-timeline3 .year:before {
        content: "";
    border-top: 15px solid hsl(0deg 88.3% 36.86%);
    border-left: 15px solid transparent;
    border-bottom: 20px solid transparent;
    position: absolute;
    bottom: -34px;
    left: 0;
}

.main-timeline3 .title {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #4a4a4a
}

.main-timeline3 .description {
    font-size: 14px;
    color: #6f6f6f;
    margin: 0 0 5px
}

.main-timeline3 .timeline:nth-child(2n) {
    padding: 10px 100px 10px 164px;
    text-align: right
}

.main-timeline3 .timeline:nth-child(2n):before {
    left: auto;
    right: -9px;
    background: hsl(0deg 88.3% 36.86%);
    box-shadow: 0 0 1px 4px hsl(0deg 88.3% 36.86%);
}

.main-timeline3 .timeline:nth-child(2n) .year {
    padding-right: 50px;
    border-radius: 10px 10px 0;
    left: auto;
    right: -20px;
    background: hsl(0deg 88.3% 36.86%)
}

.main-timeline3 .timeline:nth-child(2n) .year:before {
    border-left: none;
    border-right: 20px solid transparent;
    left: auto;
    right: 0;
    border-top-color: hsl(0deg 88.3% 36.86%);
}

.main-timeline3 .timeline:nth-child(2) {
    margin-top: 140px
}

.main-timeline3 .timeline:nth-child(odd) {
    margin: -140px 0 0
}

.main-timeline3 .timeline:nth-child(even) {
    margin-bottom: 140px
}

.main-timeline3 .timeline:first-child {
    margin: 0
}
.main-timeline3 .timeline:last-child:nth-child(even) {
    margin-top: 140px;
}
.main-timeline3 .timeline:nth-child(3n):before {
    background: hsl(0deg 88.3% 36.86%);
    box-shadow: 0 0 1px 4px hsl(0deg 88.3% 36.86%);
}

.main-timeline3 .timeline:nth-child(3n) .year {
    background: hsl(0deg 88.3% 36.86%);
}

.main-timeline3 .timeline:nth-child(3n) .year:before {
    border-top-color: hsl(0deg 88.3% 36.86%);
}

.main-timeline3 .timeline:nth-child(4n):before {
    background: hsl(0deg 88.3% 36.86%);
    box-shadow: 0 0 1px 5px hsl(0deg 88.3% 36.86%);
}

.main-timeline3 .timeline:nth-child(4n) .year {
    background: hsl(0deg 88.3% 36.86%);
}

.main-timeline3 .timeline:nth-child(4n) .year:before {
    border-top-color: hsl(0deg 88.3% 36.86%);
}

@media only screen and (max-width:990px) {
    .main-timeline3:before {
        top: 8%
    }

    .main-timeline3 .timeline {
        padding: 10px 10px 10px 100px
    }

    .main-timeline3 .timeline:nth-child(2n) {
        padding: 10px 100px 10px 10px
    }
}

@media only screen and (max-width:767px) {
    .main-timeline3:before {
        width: 8px;
        top: 0;
        left: 12px;
        transform: translateX(0)
    }

    .main-timeline3 .timeline,
    .main-timeline3 .timeline:nth-child(even),
    .main-timeline3 .timeline:nth-child(odd) {
        width: 100%;
        float: none;
        text-align: left;
        padding: 0 0 0 60px;
        margin: 0 0 30px
    }

    .main-timeline3 .timeline:before,
    .main-timeline3 .timeline:nth-child(2n):before {
        width: 20px;
        height: 20px;
        border: 3px solid #fff;
        top: 38px;
        left: 6px
    }

    .main-timeline3 .timeline:nth-child(2n) .year {
        right: auto;
        left: -20px;
        border-radius: 10px 10px 10px 0
    }

    .main-timeline3 .timeline:nth-child(2n) .year:before {
        border-left: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: none;
        right: auto;
        left: 0
    }
}

.expiryDateBorderRed{
	border: 1px solid red !important;
	border-right: none !important;
}
.expiryDateCalBorderRed{
	border: 1px solid red !important;
	border-left: none !important;
}

.session-expried--section {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.166);
  top: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
}

.session-expried--content {
  background-color: #FFF;
  padding: 1em;
  width: min(100% - 1rem, 45ch);
  border-radius: 16px;
  height: 60vh;
}

.expried--content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.expried-icon {
  width: 250px;
  height: 250px;
  color: var(--primary-color);
}

.expried-icon svg {
  color: var(--primary-color);
}

.expried--content div {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50px);
}

.expried--content h1 {
  font-size: 1.65em;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .45;
}

.expried--content p {
  font-size: 0.95em;
  text-align: center;
  font-weight: 400;
  margin-bottom: 2em;
}

.expried--content button {
  margin-bottom: 1em;
  width: 80px;
  text-align: center;
  justify-content: center;
}

.expried--content small {
  font-size: .925em;
  font-weight: 600;
  letter-spacing: 1px;
  color: #242424;
}

.fill-button {
  background-color: var(--primary-color);
  color: #fffffff2;
  text-transform: uppercase !important;
  font-weight: 700;
  border: 1px solid var(--primary-color);
  padding: 5px 20px;
  font-size: 11px;
  letter-spacing: .65px;
  box-shadow: none !important;
  border-radius: 999px !important;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

.fill-button svg,
.fill-button span {
  position: relative;
  z-index: 2;
}

.fill-button:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #fff;
  transition: all .35s;
}

.fill-button:hover {
  color: var(--primary-color);
}

.fill-button:hover:after {
  width: 100%;
  color: var(--primary-color);
}

.fill-button:hover svg {
  fill: var(--primary-color);
}


.unfill-button {
  background-color: #FFF;
  color: var(--primary-color);
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--primary-color);
  padding: 5px 20px;
  font-size: 11px;
  letter-spacing: .65px;
  box-shadow: none !important;
  border-radius: 999px !important;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.unfill-button svg,
.unfill-button span {
  position: relative;
  z-index: 2;
}


.unfill-button:after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: var(--primary-color);
  transition: all .35s;
  z-index: -1;
}

.unfill-button:hover {
  color: #FFF;
}

.unfill-button:hover:after {
  width: 100%;
  color: #FFF;
}

.unfill-button:hover svg {
  fill: #FFF;
}

.btn-purple {
    box-shadow: none !important;
    background-color: rgb(251 235 255) !important;
    color: rgb(197 28 244) !important;
    font-weight: 700;
    border-radius: 2rem !important;
    transition: all 600ms cubic-bezier(0, 0, 0, 1);
    border-color: #8200d9;
}

.btn-purple:hover
{
	background-color: #dd1cf4 !important;
	border-color: #be00ff;
}