@import "../../assets/styles/variables.scss"; input[type="number"] { -moz-appearance: textfield; } a{ text-decoration: none; } .overlay{ position: fixed; /* Sit on top of the page content */ width: 100%; /* Full width (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); /* Black background with opacity */ z-index: 2; /* Specify a stack order in case you're using a different order for other elements */ cursor: pointer; /* Add a pointer on hover */ .loading-spinner{ position: relative; top: 45%; left: 50%; } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } .dropdown .btn:first-child:active { border: none; box-shadow: none; } .dropdown { button { background-color: #fff; border: none; color: #160846; background: #ffffff; border: 0.5px solid #d8e0fd; border-radius: 32px; @media (min-width: 320px) and (max-width: 820px){ border-radius: 6px; } } & button::after { content: none; } & .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active, .btn:hover { background-color: #fff; border: none; color: #160846; box-shadow: none; // border: 0.5px solid #d8e0fd; // box-shadow: 0px 21px 57px rgba(0, 0, 0, 0.1); } .dropdown-menu { border: 1px solid #e3e3e3; filter: drop-shadow(0px 4px 4px rgba(107, 114, 128, 0.1)); border-radius: 8px; padding: 0; width: 98%; min-width: 20%; a { background: #ffffff; border-radius: 0; font-size: 0.7rem; font-family: "Poppins"; font-style: normal; font-weight: 400; color: #000; } & a:first-of-type { border-radius: 8px 8px 0px 0px; } & a:last-of-type { border-radius: 0px 0px 8px 8px; } & a:not(:last-of-type) { // border-bottom: 0.5px solid #E3E3E3;; } .dropdown-item:hover { background-color: #e8f4f8; transition: all 0.5s ease; } } } .select-dropdown { background: transparent; &.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active, .btn:hover { background-color: transparent; } .dropdown-toggle { border: none; background-color: transparent; padding: 0; width: 100%; text-align: left; .input-wrap { width: 100%; position: relative; font-family: "Poppins"; font-style: normal; font-weight: 400; font-size: 0.5rem; margin-bottom: 5%; label { display: block; font-family: "Poppins"; font-style: normal; font-weight: 400; font-size: 0.7rem; } .control.text { padding: 0.8rem; } .control { background: #ffffff; border: 0.5px solid #17181a; border-radius: 8px; padding: 7px; width: 100%; &:focus-visible { outline: none; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.08)); } } .arrow-down { position: absolute; right: 10%; top: 60%; width: 0.6rem; filter: invert(100%) sepia(99%) saturate(2%) hue-rotate(220deg) brightness(94%) contrast(100%); color: #fff; } } } &:hover { box-shadow: none; } .dropdown-menu { width: 100%; margin-left: 0%; max-height: 60vh; overflow-y: auto; } } .table-title.tab-page { display: flex; align-items: center; font-family: "Poppins"; font-style: normal; font-weight: 500; margin-top: 3%; margin-left: 2%; @media (min-width: 320px) and (max-width: 820px){ justify-content: space-between; padding: 1rem 2%; background: #f8f8f8; border: 1px solid #eeeeee; margin-top: 0; margin-left: 0; } .header { font-size: 1rem; color: #000; } .mobileSearchIcon{ display: none; @media (min-width: 320px) and (max-width: 820px){ display: block; } } } .tab-wrap { position: relative; width: 96%; .search-wrap { position: absolute; top: -0.1%; right: 3%; background: #ffffff; border: 1px solid #b6b2ca; box-shadow: 0px 1px 6px rgb(195 203 217 / 20%); border-radius: 24px; padding: 5px 14px; width: 20%; display: flex; justify-content: center; &.mobileview{ display: none; margin-top: 12px; margin-bottom: 12px; } @media (min-width: 320px) and (max-width: 820px){ position: relative; top: 0; right: auto; width: 95%; margin: auto; display: none; &.showMobile{ display: flex; } } .search-icon { color: #b2aec7; vertical-align: middle; font-size: 1rem; position: absolute; left: 2.5%; top: 25%; } .search-input { font-family: "Montserrat"; font-weight: 300; border: none; width: 100%; font-size: 0.6rem; padding-left: 6%; &:focus-visible { outline: none; } } } .search-wrap.tab-wrap-inner-search{ right: 0; } .page-wrap { padding-top: 0; } } .nav.nav-tabs { width: 100%; border-bottom: 1px solid $nav-bottom-border; padding: 2%; padding-right: 0%; padding-left: 0; margin-left: 2%; padding-bottom: 0; padding-top: 0; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; .nav-tab-wrap { display: flex; justify-content: space-between; } .nav-item { &:first-of-type { .nav-link { padding-left: 0; } } .nav-link { font-family: "Poppins"; font-style: normal; font-weight: 400; font-size: 0.8rem; color: #292d32; border: none; width: max-content; &.active { color: $active-nav; border-bottom: 1px solid $active-nav; } } } } .card-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 14px; .card { width: 24%; background: #fafbff; border: 1px solid #d8e0fd; border-radius: 20px; margin-bottom: 1.4rem; display: flex; flex-direction: row; padding: 1rem; padding-bottom: 0.6rem; justify-content: space-between; .details { width: 70%; .title { font-family: "Poppins"; font-style: normal; font-weight: 500; font-size: 0.6rem; color: #747474; text-transform: uppercase; @media (min-width: 320px) and (max-width: 820px) { font-size: 0.56; } } .count { font-family: "Poppins"; font-style: normal; font-weight: 600; font-size: 1.2rem; color: #000; @media (min-width: 320px) and (max-width: 820px) { font-size: 0.85; } } } img { width: 25%; } } &.two-col { justify-content: center; .card { width: 40%; margin-left: 1.5%; .details { width: auto; } .card-dropdown { button { padding:5px 1.5rem 5px 10px; display: flex; justify-content: center; align-items: center; span { font-size: 0.58rem; margin-right: 5px; } svg { width: 10px; } } .dropdown-menu a { font-size: 0.5rem; padding-left: 10px; } } img { width: 15%; } } } } .closeBtn { width: 18px; height: 18px; border-radius: 6px; background-color: black; position: relative; &:hover { cursor: pointer; } &::before, &::after { content: ""; width: 2px; height: 10px; position: absolute; background-color: $white; border-radius: 4px; left: 44%; top: 4px; } &::before { transform: rotate(45deg); } &::after { transform: rotate(-45deg); } } input[type="radio"] { border: 1px solid #000; border-radius: 2px; padding: 0.5em; -webkit-appearance: none; } input[type="radio"]:checked { background: black; background-size: 9px 9px; } input[type="checkbox"]:checked::before { content: "\2714"; display: inline-block; // position: absolute; width: 0.71rem; height: 0.71rem; line-height: 0.71rem; text-align: center; background-color: green; border: $primary; color: white; font-size: 7px; border-radius: 2px; } input[type="checkbox"]:checked { accent-color: white; } input[type="radio"]:focus { outline-color: transparent; }