/* font-family: "Poppins", sans-serif; */

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  background-color: #F4F5FA;
}

html {
  box-sizing: border-box;
}

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

.container {
  width: 100%;
  max-width: 1240px;
  padding: 0 20px;
  margin: 0 auto;
}

:root {
  --black: #000000;
  --black-1: #45464E;
  --black-2: #6E7079;
  --black-3: #1C1D22;
  --white: #ffffff;
  --darkblue: #051340;
  --blue: #202C5D;
  --primary: #5570F1;
  --gray: #ABAFB1;
}

/* === common === */

h1,
h2,
h3,
h4,
h5,
h6,
a,
p {
  font-family: "Poppins", sans-serif;
  color: var(--black-1);
}

.fw-500 {
  font-weight: 500;
}

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

.fw-700 {
  font-weight: 700;
}

p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black-2);
  margin-bottom: 0px;
}

a {
  text-decoration: none;
  color: var(--primary);
  font-size: 14px;
  font-weight: 400;
}

a:hover {
  color: var(--blue);
}

h2 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: var(--black-2);
}

/* h3{
  font-size: 20px;
  line-height: 30px;
} */
.fs-10 {
  font-size: 10px;
  line-height: 14px;
}

.fs-14 {
  font-size: 14px;
  line-height: 20px;
}

.fs-16 {
  font-size: 16px;
  line-height: 24px;
}

.fs-12 {
  font-size: 12px;
  line-height: 16px;
}

.fs-20 {
  font-size: 20px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-20 {
  margin-bottom: 20px;
}

.text-black1 {
  color: var(--black-1);
}

.text-black2 {
  color: var(--black-2);
}

.text-black3 {
  color: var(--black-3);
}

.pt-24 {
  padding-top: 24px !important;
}

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

.btn:focus {
  box-shadow: unset;
}

/* ==== UI - Sign up & other flows (B2C - Paid Candidates ) 5 Jun ==== */


/* Button */

.btn-blue {
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  padding: 12px 16px;
  /* min-width: 172px; */
  border-radius: 8px;
  background-color: var(--primary);
  color: var(--white);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn-border-blue {
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid var(--primary);
  color: var(--primary);
  cursor: pointer;
}

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

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

/* Sidebar */
.admin-info .admin-dashboard {
  min-width: 273px;
  width: 273px;
  position: fixed;
  background-color: var(--blue);
  color: #ffffff;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.admin-info .dashboard-content {
  margin-left: 273px;
  min-height: 100vh;
  position: relative;
}

.admin-info .admin-dashboard ul li a {
  font-size: 14px;
  line-height: 16px;
  color: var(--white);
  font-weight: 400;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 8px;
}

.admin-info .admin-dashboard ul li {
  margin-bottom: 4px;
}

.admin-info .admin-dashboard ul li:last-child {
  margin-bottom: 0px;
}

.admin-info .admin-dashboard ul li a.active,
.admin-info .admin-dashboard ul li a:hover {
  background-color: var(--darkblue);
  border-radius: 8px;
}

.admin-info .admin-dashboard ul li a img {
  height: 20px;
  width: 20px;
  object-fit: contain;
}

.logout-icon {
  margin-top: auto;
}

.logout-icon a {
  color: #A6A8B1;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logout-icon a:hover {
  color: var(--white);
}

.admin-info .responsive-logo {
  display: none;
}

.sidebar-collapsed .responsive-logo {
  display: block;
}

.dashboard-menu {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}

.dashboard-menu ::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.dashboard-menu {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sidebar-collapsed .dashboard-menu .navbar-nav li a span,
.sidebar-collapsed .toggle-btn,
.sidebar-collapsed .dasktop-logo,
.sidebar-collapsed .logout-icon a span {
  display: none;
}

.sidebar-collapsed .logo-row a.navbar-brand {
  margin-right: 0px !important;
}

.sidebar-collapsed .logo-row {
  justify-content: center !important;
}

.admin-info.sidebar-collapsed .admin-dashboard {
  min-width: 80px;
  width: 80px;
}

.admin-info.sidebar-collapsed .dashboard-content {
  margin-left: 80px;
}


/* ==== Header ===== */
.main-header {
  background-color: var(--white);
  padding: 6px 24px;
  border-bottom: 1px solid #E1E2E9;
  background-color: #ffffff;
}

.main-header .navbar .left-side .breadcrumb li a img {
  height: 16px;
  width: 16px;
  object-fit: contain;
}

.main-header .navbar .left-side .breadcrumb li a,
.main-header .navbar .left-side .breadcrumb li {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #8B8D97;
}

.main-header .navbar .left-side .breadcrumb li.active {
  color: #1C1D22;
}

.main-header .navbar .left-side .breadcrumb li a:hover {
  color: var(--primary);
}

.main-header .right-side ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.main-header .right-side ul li a {
  padding: 0;
}

.main-header .right-side ul li a img.notification-bell-icon {
  height: 20px;
  width: 20px;
  object-fit: contain;
}

.main-header .right-side ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-header .right-side ul li a img.profile-img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
}


/* Table Details */
.p-24 {
  padding: 24px;
}

.details-table {
  border: 1px solid #E1E2E9;
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 8%);
}

.heading h2 {
  color: var(--black-1);
  font-weight: 500;
}

.search-style input {
  background-color: #FAFAFA !important;
  border-radius: 8px;
  padding: 12px 50px 12px 50px;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  border: unset;
  color: var(--black-1);
}

.search-style input:focus {
  box-shadow: unset;
}

.search-style input::placeholder {
  color: #ABAFB1;
}

.search-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;

}

.border-btn {
  padding: 12px 16px;
  border: 1px solid #F1F3F9;
  border-radius: 8px;
  font-size: 14px;
  color: #53545C;
  font-weight: 400;
  line-height: 20px;
  display: inline-block;

}

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

.border-btn img,
.manage-btn .border-btn img {
  height: 18px;
  width: 18px;
  object-fit: contain;
}

.border-btn:hover img {
  filter: brightness(0) invert(1);
}

.search-style {
  position: relative;
  max-width: 300px;
  width: 100%;
}

.search-style::before {
  content: "";
  background-image: url("../images/icon/search-input.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 18px;
  width: 18px;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

.search-clear-button {
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: initial;
}

.manage-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.table-design table tr th {
  border-bottom: unset !important;
  background-color: #F4F5FA;
}

.table-design table tr th,
.table-design table tbody tr td {
  padding: 10px 16px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--black-1);
  border: 1px solid #F1F3F9;
}

.table-design table tbody tr td {
  color: var(--black-2);
}

.table-design table tbody tr td a {
  font-size: 14px;
  font-weight: 400;
  color: var(--black-2);
}

.table-design table tbody tr:nth-of-type(odd) {
  background-color: #ffffff !important;
  --bs-table-accent-bg: #ffffff !important;
}

.table-design table tbody tr:nth-of-type(even) {
  background-color: #FAFAFA !important;
  --bs-table-accent-bg: #FAFAFA !important;
}

.table-design table tbody tr td a:hover {
  color: var(--primary);
}

.tyrehotel-detail table tr th:nth-of-type(3),
.tyrehotel-detail table tr th:last-child {
  width: 50px;
}

.tyrehotel-detail table tr th:nth-of-type(2),
.tyrehotel-detail table tr th:nth-of-type(1) {
  width: 202px;
}

.tyrehotel-detail table {
  margin-bottom: 200px;
}

.badge {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  border-radius: 8px;
  color: #757575;
  background-color: #F2F2F2;
}

.badge.bg-blue {
  background-color: #E6F2FF;
  color: #0073E6;
}

.badge.bg-green {
  background-color: #E6F4E6;
  color: #388E3C;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.table-pagination {
  padding: 16px;
  /* border-top: 1px solid #E1E2E9; */
  border-top: 1px solid #F1F3F9;
}

.table-pagination .select-item select {
  background-color: rgba(94, 99, 102, 0.08);
  color: #8B8D97;
  padding: 3px 11px;
  font-size: 12px;
  line-height: 16px;
  min-width: 58px;
  border: unset;
}

.table-pagination .select-item select:focus {
  box-shadow: unset;
}

.table-pagination .per-page-items {
  display: flex;
  align-items: center;
  gap: 16px;
}

.table-pagination .items-per-text {
  font-size: 14px;
  line-height: 16px;
  color: #A6A8B1;
  font-weight: 400;
}

.table-pagination .number-items {
  color: #666666;
}

.navigation-arrow a img {
  height: 16px;
  width: 16px;
  object-fit: contain;
}

.hover-eye {
  position: relative;
}

.hover-eye:hover::before {
  content: "";
  background-image: url("../images/icon/eyeslash.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 16px;
  width: 16px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.table-design table thead .hover-eye img {
  opacity: 0;
  float: right;
}

.table-design table thead .hover-eye:hover {
  opacity: 1;
}

/*  ==== Filter ==== */
.filter-info {
  background-color: #EAECF8;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.filter-info label {
  color: #53545C;
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;

}

.filter-info .select-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-info .select-filter select {
  background-color: #FFFFFF;
  border: unset;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 18px;
  color: #53545C;
}

.filter-info .select-style {
  max-width: 183px;
  width: 100%;
}

.filter-info .select-filter-row {
  width: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-selected p {
  background-color: #DBDEEE;
  display: inline-flex;
  padding: 4px 8px;
  align-items: center;
  justify-content: center;
  color: #53545C;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  border-radius: 36px;
}

.filter-selected p a img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.display-filter,
.filter-selected {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.open-filter {
  position: relative;
}

.open-filter .filter-count {
  font-size: 12px;
  color: var(--black);
  line-height: 16px;
  height: 22px;
  width: 22px;
  align-items: center;
  justify-content: center;
  /* background-color: #FFCC91; */
  background-color: #fdf0df;
  color: var(--gray);
  border-radius: 50%;
  position: absolute;
  right: -8px;
  top: -8px;
  /* display: none; */
  display: flex;
}

.open-filter.active {
  background-color: var(--primary);
}

.open-filter.active img {
  filter: brightness(0) invert(1);
}

.open-filter.active .filter-count {
  display: flex;
  background-color: #FFCC91;
  color: black;
}

/* Tyrehotels ==== Start */

.peter-slide {
  display: flex;
  justify-content: space-between;
  padding: 0px 0px 24px;
}

.peter-slide h3 {
  color: var(--black-1);
  font-size: 20px;
  line-height: 30px;
}

.peter-slide-style {
  display: flex;
  align-items: center;
  gap: 10px;
}


.table-style {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 8%);
  border-radius: 12px;
  background-color: var(--white);
  border: 1px solid #E1E2E9;
}

/* .table-style .table>:not(caption)>*>* {
  background-color: #F4F5FA !important;
} */

.table-style .table-striped>tbody>tr:nth-of-type(odd) {
  --bs-table-accent-bg: #fff !important;
}

.table-style .table-striped>tbody>tr:nth-of-type(even) {
  --bs-table-accent-bg: #FAFAFA !important;
}
/* 
.table-style .table-striped>tbody>tr:hover {
  --bs-table-accent-bg: #FEF9F2 !important;
} */

.sub-table tbody tr:nth-of-type(odd) {
  background-color: #ffffff;
}

.sub-table tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}
/* 
.sub-table tbody tr:hover {
  background-color: #FEF9F2;
} */

.table-style thead th {
  background-color: #F4F5FA !important;
  border: 1px solid #F1F3F9 !important;
  padding: 14px 10px;
}

.table-style thead th {
  font-size: 14px;
  color: #45464E;
  font-weight: 400;
}

.table-style tr td {
  padding: 14px 10px;
  color: #6E7079;
  font-size: 14px;
  border: 1px solid #F1F3F9 !important;
}

.table-style tr td a {
  color: #6E7079;
  font-size: 14px;
}

/* 
.pl-16 {
  padding-left: 16px !important;
} */

.table-style .opacity-0 {
  opacity: 0;
}

.table-style .opacity-0:hover {
  opacity: 1;
}

/* .bg-table-row td {
  background-color: #FAFAFA !important;
} */

.side-bar-style {
  width: 670px;
  margin: 24px;
  border-radius: 12px;
  padding: 24px;
  overflow-y: auto;
}

.side-bar-style .offcanvas-body {
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.side-bar-style .offcanvas-header {
  padding-bottom: 24px !important;
  padding: 0;
}

.side-bar-style .offcanvas-body {
  padding-top: 24px !important;
  border-top: 1px solid #E1E2E9;
}

.side-bar-style .form-input-style {
  background-color: #fff;
  border: 1px solid #CFD3D4;
  padding: 6px 16px;
  border-radius: 8px;
}

.side-bar-style .form-input-style.company-input,
.side-bar-style .form-input-style.disabled-input {
  background-color: #F2F4F5 !important;
}

.side-bar-style .form-input-style input,
.side-bar-style .form-input-style .form-select {
  padding: 0;
  background-color: #ffffff00 !important;
  border: none !important;
}

.side-bar-style .form-input-style input::placeholder {
  color: #ABAFB1 !important;
}

.form-input-style input:focus,
.form-input-style .form-select:focus {
  box-shadow: unset !important;
}

.form-input-style label {
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 6px;
  color: #5E6366 !important;
}

.mt-16 {
  margin-top: 16px;
}

.two-form-row {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #E1E2E9;
}

.form-select:valid {
  color: #5E6366;
}

.sub-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
}

.bg-dark-row tr {
  background-color: #F2F2F2 !important;
}

.sent-emil-style {
  background: #F0F2FC;
  padding: 13px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-sidebar .modal-backdrop {
  background: rgba(163, 163, 163, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.table-sidebar .modal-backdrop.show {
  opacity: 1 !important;
}

.table-sidebar .offcanvas-end {
  border: none !important;
}

.mb-200 {
  margin-bottom: 200px;
}

.table-sidebar table a.txt-primary:hover {
  text-decoration: underline;
}

/* Tyrehotels ==== End */

/* Dealer groups & dealers  ==== Start */

.rotate-180 {
  rotate: 180deg !important;
}

.table-sidebar.sidebar-overlay .modal-backdrop {
  background-color: #000;
  opacity: 0.5 !important;
}

.w-60 {
  width: 60px;
}

.two-table {
  display: none;
}

/* Dealer groups & dealers  ==== End */


/* Wheelsets  ==== Start */

/* Wheelsets  ==== Start */
.light-green {
  background-color: #E6F4E6;
  color: #388E3C;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 14px;
}

.txt-green {
  color: #6AB086;
  font-weight: 500;
}

.bg-dark-green {
  background-color: #6AB086 !important;
  color: var(--white);
}

.bg-dark-yellow {
  background-color: #FFC774 !important;
  color: var(--white);
}

.bg-dark-red {
  background-color: #E75F5F !important;
  color: var(--white);
}

.light-yellow {
  background-color: #FFF0D1 !important;
  color: #B07601;
}

.light-brown {
  background-color: #F2F2F2 !important;
  color: #B07601;
}

.dealer-row-style h5 {
  font-size: 14px;
  line-height: 16px;
  color: #6E7079;
  font-weight: 400;
  margin-bottom: 4px;
}

.dealer-row-style p {
  font-size: 10px;
  line-height: 12px;
}

.large-cell h5 {
    font-size: 14px;
    line-height: 16px;
    color: #6E7079;
    font-weight: 400;
    margin-bottom: 4px;
}

.large-cell p {
    font-size: 10px;
    line-height: 12px;
}

.wheelset-table-style .table-responsive {
  overflow-x: auto;
  cursor: grab;
}

.wheelset-table-style .table-responsive:active {
  cursor: grabbing;
}

.wheelset-table-style .table-responsive::-webkit-scrollbar {
  display: none;
}

.wheelset-table-style .table {
  min-width: 2550px;
  white-space: nowrap;
  user-select: none;
}

.dropdown-menu-box {
  position: absolute;
  background: #fff;
  border: 1px solid #E1E2E9;
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(61, 70, 112, 0.08);
  /* padding: 12px; */
  padding: 8px;
  z-index: 99999;
  right: 10px;
  /* width: 260px; */
  min-width: 260px;
  width: max-content;
}

.dropdown-menu-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu-box li {
  display: flex;
  align-items: center;
  /* padding: 14px 16px; */
  padding: 8px 10px;
  color: #45464E;
  /* font-size: 16px; */
  font-size: 14px;
  cursor: pointer;
}

.dropdown-menu-box li:hover {
  background-color: #FFF2E2;
  border-radius: 8px;
}

.delete-menu-item:hover {
  background-color: #fdddda !important;
}

.dropdown-menu-box-li-button {
  background: transparent; 
  /* width: 234px; */
  width: 100%;
  /* height: 50.85px; */
  /* padding: 14px 16px; */
  padding: 8px 10px;
  border: none; 
  text-align: left;
}

.dropdown-menu-box img {
  /* width: 20px; */
  width: 17px;
  /* margin-right: 10px; */
  margin-right: 8px;
  margin-bottom: 2px;
}

.hover-td {
  position: relative;
}

.hover-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hover-li {
  position: relative;
  display: inline-block;
}

.custom-hover-box {
  display: none;
  position: absolute;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 32px rgba(61, 70, 112, 0.08);
  border: 1px solid #ddd;
  border-radius: 12px;
  z-index: 10;
  padding: 16px;
  top: -10px;
  min-width: 240px;
}

.custom-hover-box li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

.custom-hover-box li:last-child {
  border-bottom: none;
}

.hover-li:hover .custom-hover-box {
  display: block;
}

.switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: sans-serif;
  font-size: 14px;
  color: #333;
}

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider Design */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
  width: 40px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Checked state */
input:checked+.slider {
  background-color: #5570F166;
}

input:checked+.slider:before {
  transform: translateX(20px);
  background-color: var(--primary);
}

.progress-bar {
  background-color: #FAFAFA;
  height: 5px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 15px;
}

.progress {
  height: 100%;
  background-color: var(--primary);
  width: 0%;
  transition: width 0.4s ease;
}


.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.step-title {
  font-size: 20px;
  color: #45464E;
}

.step-indicator {
  font-size: 14px;
  color: #6e82a5;
}

.progress-container {
  background-color: #f0f0f0;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0 20px 0;
}

.progress {
  height: 100%;
  width: 25%;
  background-color: #6c63ff;
  transition: width 0.3s ease-in-out;
}

.form-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  margin-bottom: 18px;
}

.form-section h6 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #53545C;
}

.form-section .toggle {
  display: flex;
  align-items: center;
  gap: 18px;
}

.form-section .toggle label {
  font-size: 14px;
  line-height: 16px;
  color: #2B2F32;
}

.mt-40 {
  margin-top: 40px;
}

.form-input-style.step-2-style {
  width: 140px;
  padding-right: 0;
}

.form-input-style.step-2-style:hover {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
  appearance: #fff;
}

.form-input-style.step-2-style:hover select {
  color: var(--white);
}

.form-input-style.step-2-style select:hover {
  color: var(--white);
}

.form-input-style.step-2-style select option {
  color: #53545C;
}

.feature-group {
  margin-bottom: 24px;
}

.feature-title {
  font-size: 12px;
  margin-bottom: 6px;
  color: #5E6366;
}

.options {
  display: flex;
  gap: 20px;
}

.options label {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #83898C;
}

.feature-group input[type="radio"] {
  accent-color: var(--primary);
  border: 1px solid var(--primary);
  width: 16px;
  height: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.copy-detail-style {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #F5F6FA;
  border-radius: 4px;
  padding: 10px 12px;
}

.copy-detail-style input[type="checkbox"],
.custom-dropdown input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #E1E2E9 !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease-in-out !important;
}

.copy-detail-style input[type="checkbox"]::before,
.custom-dropdown input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 6px;
  height: 10px;
  border: 1px solid var(--primary) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) scale(0) !important;
  transition: transform 0.2s ease-in-out !important;
}

.copy-detail-style input[type="checkbox"]:checked::before,
.custom-dropdown input[type="checkbox"]:checked::before {
  transform: rotate(45deg) scale(1) !important;
}

.mb-40 {
  margin-bottom: 40px;
  border-bottom: 1px solid #F1F3F9;
  border-top: 1px solid #F1F3F9;
  padding: 25px 0px;
}


.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.toggle .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.toggle-wrapper .switch input:checked+.slider {
  background-color: #4f46e5;
}

.toggle-wrapper .switch input:checked+.slider:before {
  transform: translateX(20px);
}

.locations-container {
  display: none;
  gap: 10px;
  flex-wrap: wrap;
}

.location-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.chip-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}


.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modern-toggle {
  position: relative;
  width: 36px;
  height: 12px;
}

.modern-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-wrapper .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #5570F11F;
  /* light purple */
  border-radius: 999px;
  transition: 0.3s;
}

.toggle-wrapper .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 1px;
  top: -4px;
  background-color: #BBC5CB;
  /* blue dot */
  border-radius: 50%;
  transition: 0.3s;
}

.modern-toggle input:checked+.slider {
  background-color: #5570F166;
  /* muted background */
}

.modern-toggle input:checked+.slider:before {
  transform: translateX(18px);
}

label.toggle-label {
  font-size: 14px;
  color: #4b5563;
}

.w-295 {
  width: 295px;
}

.custom-select-wrapper {
  position: relative;
}

.custom-select-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
}

.selected-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-grow: 1;
}

.selected-options .tag {
  background-color: #FEF9F2;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.arrow {
  margin-left: auto;
  font-size: 14px;
}

.custom-dropdown {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 32px #3D467014;
  z-index: 10;
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  top: 64px;
  left: 0;
}

.custom-dropdown label {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.navbar-nav .sidebar-dropdown-style .dropdown-menu {
  background-color: transparent !important;
  width: 86% !important;
  box-shadow: none !important;
  border: none !important;
  transform: translate(33px, 40px) !important;
}

.dropdown-toggle::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url(../images/icon/white-drop.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none !important;
}

.sidebar-collapsed .dropdown-toggle::after {
  display: none;
}

.tabs-style .nav-tabs .nav-link.active {
  background-color: transparent !important;
  border-bottom: 4px solid #5570F1 !important;
  color: #2B2F32 !important;
  border-color: #dee2e600 #dee2e600 #ffffff00;
  font-size: 16px;
  line-height: 18px;
}

.tabs-style .nav-tabs .nav-link:focus,
.tabs-style .nav-tabs .nav-link:hover {
  border-color: #dee2e600 #dee2e600 #ffffff00;
}

.tabs-style .nav-tabs .nav-link {
  color: #ABAFB1;
  font-size: 16px;
  line-height: 18px;
}

.txt-blue2 {
  color: #3D50A8 !important;
}

.tab-content-style {
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.tab-content-style p {
  color: #45464E;
}

.border-r {
  border-right: 1px solid #E1E2E9;
  padding: 0 18px;
  margin: 0 10px;
}

.p-border-r {
  border-right: 1px solid #E1E2E9;
  padding: 0 8px;
  margin: 0px -5px;
}

.tab-bg-light {
  background-color: #FAFAFA !important;
  border-radius: 8px 8px 0px 0px;
}

.tab-two-style {
  background-color: var(--white);
  border-radius: 0px 0px 8px 8px;

}

.tab-two-style .winter-tab-style {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.tab-two-style .winter-tab-style p {
  margin-bottom: 4px;
  color: #A6A8B1;
}

.tab-two-style .tyre-card {
  border: 1px solid #E1E2E9;
  border-radius: 12px;
  /* padding: 16px; */
  background: #F1FDF1;
  margin-bottom: 20px;
  overflow: hidden;
}

.tyre-card .tyre-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tyre-card .tyre-status .status {
  color: #E75F5F;
  font-weight: 500;
}

.tyre-card .tyre-status .result {
  background: transparent;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 400;
  color: #6AB086;
  border: 1px solid #6AB086;
  margin-left: 12px;
}

.tyre-card .tyre-img {
  width: 80px;
  height: 32px;
}

.tyre-card .tyre-title {
  font-weight: 400;
  font-size: 16px;
  color: #33343A;
  margin-bottom: 8px;
}

.tyre-card .info-label {
  color: #6E7079;
}

.border-l {
  border-left: 1px solid #E1E2E9;
  padding: 0px 8px;
  margin: 0px 8px;
}

.pb-24 {
  padding: 16px 24px;
}

.icon-bg {
  background-color: #FAFAFA;
  border-radius: 8px;
  padding: 8px;
}

.mt-15 {
  margin-top: -15px;
}

.tyre-card.summer-card {
  background-color: #FEECE9;
}

.tyre-card.bg-light-card {
  background-color: #FAFAFA;
}

.tyre-card.bg-yellow-card {
  background-color: #FFF8E7;
}

.tyre-card .tyre-status .result.red-btn {
  border: 1px solid #B71C1C;
  color: #B71C1C;
}

.tyre-card .tyre-status .result.yellow-btn {
  border: 1px solid #F9A825;
  color: #F9A825;
}

.txt-red {
  color: #E75F5F;
}

.tab-customer-style {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.tab-customer-style h4 {
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: #45464E;
}

.tab-customer-style a {
  text-decoration: underline;
}

.border-12 {
  border-radius: 12px;
}

.tab-box-shadow {
  /* box-shadow: rgba(159, 166, 173, 0.105) 0px 8px 24px; */
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 8%);
}

.h-100vh {
  height: 100vh;
}

.history-input .form-input-style {
  background-color: #fff;
  border: 1px solid #F1F3F9;
  padding: 6px 16px;
  border-radius: 8px;
  height: 45px;
  width: 250px;
}


.form-input-style input,
.history-input .form-input-style .form-select {
  padding: 0;
  background-color: #ff000000 !important;
  border: none !important;
}

.bg-purple {
  background-color: #F7E6F9;
  color: #8E44AD;
}

.bg-irisblue {
  background-color: #DBFAFF;
  color: #00ACC1;
}

.tab-border-1 {
  border: 1px solid #E1E2E9;
}

.all-wheelsets-slider {
  width: 300px;
  /* padding: 10px; */
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  scrollbar-width: thin;
  height: 100vh;
  transition: all 0.3s ease;
}

.wheelsets-slide-menu {
  display: flex;
  gap: 8px;
}

/* .all-wheelsets-slider::-webkit-scrollbar {
  display: none;
} */

.all-wheelsets-slider .wheelsets-header {
  display: flex;
  align-items: center;
  padding: 24px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  justify-content: space-between;
}

.pbl-24 {
  padding: 0px 24px;
}

.tab-table-width {
  width: calc(100% - 300px);
}

.slidebartoggle+.tab-table-width {
  width: calc(100% - 60px);
}

.all-wheelsets-slider .search-box .clear {
  font-size: 18px;
  cursor: pointer;
  color: #aaa;
}

.all-wheelsets-slider .list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.all-wheelsets-slider .item {
  padding: 8px 24px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.all-wheelsets-slider .item:hover {
  background-color: #FEF9F2;
}

.all-wheelsets-slider .item.selected {
  background-color: #FFF2E2;
}

.all-wheelsets-slider .name {
  font-weight: 500;
  color: #222;
}

.all-wheelsets-slider .phone,
.all-wheelsets-slider .code {
  font-size: 14px;
  color: #6E7079;
}

.all-wheelsets-slider .search-style::before {
  left: 35px;
}

.all-wheelsets-slider .search-style input {
  padding: 12px 16px 12px 40px;
  background-color: var(--white) !important;
}

.wheelsets-menu {
  display: flex;
  gap: 8px;
}

.all-wheelsets-slider.slidebartoggle .wheelsets-menu {
  flex-direction: column;
}

.all-wheelsets-slider.slidebartoggle .name,
.all-wheelsets-slider.slidebartoggle .phone,
.all-wheelsets-slider.slidebartoggle .search-style,
.all-wheelsets-slider.slidebartoggle .code,
.all-wheelsets-slider.slidebartoggle .list {
  display: none;
}

.all-wheelsets-slider.slidebartoggle .vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-align: center;
}

.all-wheelsets-slider.slidebartoggle .vertical-img {
  transform: rotate(180deg);
}

.all-wheelsets-slider.slidebartoggle .wheelsets-header {
  flex-direction: column;
  gap: 28px;
}

.all-wheelsets-slider.slidebartoggle {
  width: 60px;
  overflow: hidden;
}

.all-wheelsets-slider.slidebartoggle .wheelsets-slide-menu {
  flex-direction: column;
  gap: 10px;
}

.dropdown-container:hover .dropdown-menu-box {
  display: block;
}

.dropdown-menu-box.vehicle-dropdown {
  top: 40px;
  right: 0px;
}

.details-tabs {
  display: flex;
}

/* Wheelsets  ==== End */

/* Rack Location  ==== Start */

.dropdown-menu-box.row-dropdown {
  top: 30px;
  right: 50px;
}

.th-w-50 {
  width: 50px;
}

.rank-select.form-input-style {
  background-color: #fff;
  border: 1px solid #CFD3D4;
  padding: 6px 16px;
  border-radius: 8px;
  height: 45px;
  width: 350px;
}


.rank-select.form-input-style select {
  border: none;
  padding: 4px 0px;
}

.bg-light-yellow {
  background-color: #FEF9F2;
  color: #45464E;
}

.user-roles.side-bar-style .offcanvas-body {
  padding-top: 20px !important;
}

.toggle-wrapper.faq-toggle {
  justify-content: space-between;
  padding: 8px 0px;
}

.faqs-sec-style .accordion-button {
  padding: 24px 0px;
  box-shadow: none;
  background-color: transparent;
}

.faqs-sec-style .accordion-button::after {
  background-image: url(/assets/images/icon/plus-blue.svg);
}

.faqs-sec-style .accordion-button:not(.collapsed)::after {
  background-image: url(/assets/images/icon/minus-icon.svg);
}

.faqs-sec-style .accordion-body {
  padding-top: 10px;
  padding-bottom: 24px;
  padding-left: 0;
  padding-right: 0;
}

.faqs-sec-style .accordion-button:not(.collapsed) {
  color: #53545C !important;
}

.faq-sec {
  background-color: var(--white);
  border-radius: 12px;
  margin: 24px;
  box-shadow: 0px 4px 32px #3D467014;
}

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

/* Rack Location  ==== End */


.accordion-body .form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.accordion-body .form-check-input:focus {
  box-shadow: unset !important;
}

.accordion-body .form-check label {
  color: #45464E;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  margin-top: 3px;
}

.accordion-body .table-design table tbody tr td {
  padding: 14px 16px;
}

.accordion-body .table-design table tbody tr th {
  vertical-align: middle;
}

.faq-section .accordion-body {
  padding: 0px !important;
}

.faq-section .accordion-button::after {
  background-image: url("../images/icon/plus-blue.svg");
}

.faq-section .accordion-button:not(.collapsed)::after {
  background-image: url("../images/icon/minus-icon.svg");
}

.faq-section .accordion-button {
  padding: 24px;
  background-color: #ffffff;
  box-shadow: unset;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  color: #53545C;
  border-radius: 12px !important;
}

.faq-section .accordion-item {
  border: 1px solid #F1F3F9 !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

.faq-section {
  padding: 16px !important;
  background-color: #ffffff;
  border-radius: 12px;
}

.dropdown-menu-box.archived-dropdown {
  left: 5px;
  top: 46px;
  width: 340px;
  padding: 0;
}

.side-bar-style.user-style .user-pt-24 {
  padding-top: 24px !important;
}

.dropdown-menu-box.archived-dropdown li {
  font-size: 14px;
  line-height: 16px;
}

.dropdown-menu-box.archived-dropdown li:hover {
  border-radius: 0;
  background-color: #F0F2FC;
}

/* Login Sign Up  */

.auth-fluid-box {
  /* background-image: url('https://scandimateadb2c.blob.core.windows.net/root/assets/images/banner.jpg'); */
  background-color: #202c5d;
}



/* === Signup === */

.signup-page {
  height: 100%;
}

.signup-page .auth-fluid {
  height: 100% !important;
}

.signup-page .auth-fluid-box {
  padding: 40px;
  max-width: 400px;
  height: 100%;
  border-radius: 0;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.signup-page .auth-fluid-box:before {
  content: "";
  background: linear-gradient(180deg, rgba(47, 54, 102, 1) 0%, rgba(47, 54, 102, 0) 100%);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.signup-page .hiring-journey-info {
  z-index: 9;
  position: relative;
}

.signup-page .logo-brand,
.signup-page .signup-step-headline {
  margin-bottom: 64px;
}

.logo-brand img {
  width: 150px;
}

.signup-page .signup-step-headline p {
  color: var(--lightblue);
}

.signup-step ul {
  list-style: none;
  padding: 0px;
  color: #ffffff;
  position: relative;
}

.signup-step ul li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 36px;
  position: relative;
}

.signup-step ul li::after {
  content: "";
  background-color: rgba(255, 255, 255, 0.3);
  height: 28px;
  width: 1px;
  position: absolute;
  left: 13px;
  /* transform: translateX(-50%); */
  top: 30px;
}

.signup-step ul li a {
  color: var(--white);
}

.signup-step ul li .step-num {
  background-color: rgba(255, 255, 255, 0.4);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: #ffffff;
  position: relative;
}

.signup-step ul li.active .step-num {
  color: var(--blue);
  background-color: #ffffff;
}

.signup-step ul li .step-num::before {
  content: "";
  background-color: rgba(207, 209, 229, 0.2);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.signup-step ul li:last-child {
  padding-bottom: 0px;
}

.signup-step ul li:last-child::after {
  display: none;
}

.welcome-signup {
  padding: 40px 62px;
  height: 100%;
  display: flex;
  /* align-items: center; */
  margin-left: 400px;
  width: calc(100% - 400px);
}

.h-100vh {
  height: 100vh;
}

.welcome-signup .signup-info {
  max-width: 452px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  margin-top: auto;
  margin-bottom: auto;
}

.form-style label {
  font-size: 14px;
  font-weight: 500;
  color: #999999;
  line-height: 20px;
  margin-bottom: 4px;
  display: block;
  width: 100%;
}

.form-style input,
.form-style textarea {
  color: var(--black-1);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  margin-bottom: 24px !important;
  border: 1px solid #E6E6E6;
  border-radius: 8px;
  padding: 9px 13px;
  font-family: "Poppins", sans-serif;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
  width: 100%;
  outline: none;
}

.form-style textarea {
  min-height: 132px !important;
}

.form-style input::placeholder,
.form-style textarea::placeholder {
  color: #CCCCCC;
  font-weight: 400;
}

.mb-60 {
  margin-bottom: 60px;
}

.mt-60 {
  margin-top: 60px;
}

input:focus,
textarea:focus {
  box-shadow: unset !important;
}

.signup-step ul li .step-num img {
  height: 26px;
  width: 26px;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background-color: #ffffff;
            border-radius: 50%; */
}

.signup-step ul li.complated .step-num span {
  background-color: #ffffff;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.link-text {
  color: var(--blue);
  font-size: 14px;
  font-weight: 500;
}

.login-info input {
  margin-bottom: 0px !important;
}

.profile-pic input.hidden {
  display: none !important;
  visibility: hidden !important;
}

.profile-pic img {
  border-radius: 50%;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.select2-selection__clear,
.select2-selection__arrow {
  display: none;
}

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

.signup-page .phone-group .select2 {
  width: 15% !important;
}

.signup-form h3 {
  font-weight: 600;
}

.signup-page .heading,
.signup-page form .intro {
  display: none;
}

.signup-page form .buttons,
.login-page form>.buttons,
.forgot-pwd #attributeList .buttons {
  margin-top: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.login-page form .buttons {
  margin-top: 70px;
}

.forgot-pwd form .buttons {
  margin-top: 20px;
}

.signup-page form .entry-item {
  position: relative;
  margin-bottom: 24px;
}

.signup-page form .entry-item .password-label a {
  position: absolute;
  bottom: -36px;
  right: 0;
  font-size: 14px;
  line-height: 32px;
  font-weight: 500;
}

.signup-page .error {
  color: #de1616;
}

.signup-page .error p {
  margin-bottom: 0px;
  color: #de1616;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #E6E6E6 !important;
}

.signup-page form ul {
  list-style: none;
  padding: 0 !important;
}

.signup-page .helpLink,
.signup-form .intro {
  display: none;
}

.forgot-pwd h1 {
  margin-bottom: 60px !important;
}

.signup-page .signup-form {
  margin-bottom: 40px;
}

.mx-btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

.clear-filter-text {
  color: #5570F1;
}

  .clear-filter-text:hover {
    color: initial;
  }


/* Profile Icon */

.profile-icon-div {
  box-sizing: border-box;
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center; 
  gap: 8px; 
  padding: 4px;
  background: #5571ff44; 
  border: 2.5px solid transparent;
  border-radius: 999999px; 
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 8%);
  transition: border 0.3s ease;
}

  .profile-icon-div:hover,
  .profile-icon-div.open {
    border-color: #3a3aff47;
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 8%);
  }
  
  .profile-icon-div:hover {
    cursor: pointer;
  }
  
.profile-icon-chevron {
  width: 0.825em;
  height: 0.825em;
  margin-bottom: 3px;
  transition: transform 0.3s ease;
  transform-origin: center;
}

  .profile-icon-div.open .profile-icon-chevron {
    transform: rotate(180deg);
  }

.profile-icon {
  height: 42px; 
  width: 42px; 
  background-color: #202C5D; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  text-align: center;
  border-radius: 100%; 
}

.profile-icon-dropdown {
  height: 86px !important;
  width: 86px !important;
  background-color: #202C5D !important; 
  display: flex !important; 
  justify-content: center !important; 
  text-align: center !important;
  align-items: center !important; 
  border-radius: 100% !important; 
}

.profile-icon-text {
  color: #FFFFFF; 
  font-size: 1em; 
  font-weight: 400;
}

.profile-icon-text-dropdown {
  color: #FFFFFF !important; 
  font-size: 2.5em !important; 
  font-weight: 400 !important;
}

.profile-icon-fallback {
  width: 1.25em; 
  height: 1.25em; 
  margin-bottom: 2px;
}

.profile-icon-fallback-dropdown {
  width: 3.5em !important; 
  height: 3.5em !important; 
  margin-bottom: 2px !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
}