.page {
background-color: #43768d;
}
.smd-wrap {
margin: 0 auto;
border-radius: 24px;
background: rgba(32, 57, 68, 0.2);
color: #fff;
margin-bottom: 20px;
}
.smd-wrap .top {
background-color: #111F2699;
padding: 24px;
border-radius: 24px 24px 0 0;
}
.smd-pills {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px
}
.smd-pill {
appearance: none;
border: 0;
cursor: pointer;
background: #203a46;
color: #FFFFFF;
font-weight: 400;
line-height: 120%;
border-radius: 999px;
background-color: #0000001F;
backdrop-filter: blur(12px);
font-size: 16px;
padding: 12px 24px;
}
.smd-pill[aria-selected="true"] {
background: #F29602;
color: #1b1b1b;
text-shadow: 0.5px 0px 0px #1b1b1b;
}
.smd-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 14px;
margin-top: 0;
}
.smd-mobile-bar {
display: none;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px
}
.smd-mobile-search-bar {
display: none;
}
.smd-filters-btn {
background: #F29602;
color: #000;
border: 0;
border-radius: 999px;
height: 40px;
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0%;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 12px
}
.smd-filters-icon svg {
display: block;
}
.smd-chips {
display: flex;
flex-wrap: wrap;
gap: 8px 15px;
margin: 12px 12px;
}
.smd-filter-search {
grid-column: 1 / -1;
width: 100%;
}
.smd-filter-search .smd-search-input,
.smd-drawer-panel .smd-drawer-search {
appearance: none;
box-sizing: border-box;
width: 100%;
height: 50px;
margin: 0;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 59px;
padding: 5px 30px;
outline: none;
font-family: inherit;
font-weight: 400;
font-size: 16px;
line-height: 140%;
letter-spacing: 0;
background-color: transparent;
}
.smd-search-input:hover,
.smd-search-input:focus,
.smd-drawer-panel .smd-drawer-search:hover,
.smd-drawer-panel .smd-drawer-search:focus {
border-color: #f29602;
}
.smd-search-input::placeholder,
.smd-drawer-panel .smd-drawer-search::placeholder {
color: #FFFFFF;
opacity: 1;
}
.smd-chip {
background: #223d49;
color: #FFFFFF;
border-radius: 999px;
padding: 4px 8px 4px 12px;
font-size: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.smd-chip-x {
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 0;
height: auto;
}
.smd-load-more {
display: none;
background-color: #F29602;
color: #1b1b1b;
border: 0;
border-radius: 999px;
padding: 10px 18px;
font-weight: 600
}
.smd-wrap .smd-load-more:hover,
.smd-wrap .smd-load-more:focus {
background-color: #F29602;
color: #1b1b1b;
}
.smd-wrap .smd-load-more:disabled,
.smd-wrap .smd-load-more:disabled:hover,
.smd-wrap .smd-load-more:disabled:focus {
background-color: #6B7280;
color: #D1D5DB;
cursor: default;
}
.smd-drawer {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .4);
display: none;
z-index: 999999
}
.smd-drawer.open {
display: block;
}
.smd-drawer-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
background: #1a3340;
padding: 16px;
padding-top: 60px;
padding-bottom: 40px;
overflow: auto
}
@media (min-width: 992px) {
.smd-drawer-panel {
max-width: 420px;
}
}
.smd-drawer-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px
}
.smd-drawer-title {
display: none;
}
.smd-drawer-back {
background: transparent;
border: 0;
color: #fff;
font-size: 20px;
padding: 8px;
display: flex;
gap: 28px;
font-weight: 500;
font-size: 16px;
line-height: 150%;
}
.smd-drawer-title {
font-weight: 600;
}
.smd-drawer-main {
display: grid;
gap: 20px;
}
.smd-drawer-row {
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
border: 1px solid #FFFFFF99;
color: #f5f5f5;
border-radius: 999px;
padding: 14px 24px;
font-weight: 400;
font-size: 16px;
line-height: 140%;
}
.smd-drawer-arrow {
font-size: 20px;
}
.smd-drawer-listview {
display: none;
}
.smd-drawer-listview.active {
display: block;
}
.smd-drawer-list {
display: none;
}
.smd-drawer-list.active {
display: grid;
gap: 17px;
}
.smd-drawer-options {
display: grid;
gap: 17px;
}
.smd-drawer-section {
margin-bottom: 14px;
}
.smd-drawer-label {
font-size: 12px;
margin-bottom: 8px;
}
.smd-drawer-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
position: relative;
}
.smd-drawer-item:before {
position: absolute;
content: '';
left: 0;
bottom: -9px;
width: 100%;
height: 1px;
background-color: #FFFFFF33;
}
.smd-drawer-item input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
border-radius: 4px;
background: transparent;
border: 2px solid #9CA3A6;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
} .smd-drawer-item input[type="checkbox"]:checked {
background-color: #F5A300;
border-color: #F5A300;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M3.66667 7.05719L1.13807 4.5286C0.877722 4.26825 0.455612 4.26825 0.195262 4.5286C-0.0650874 4.78895 -0.0650874 5.21105 0.195262 5.4714L3.19526 8.47141C3.45561 8.73176 3.87772 8.73176 4.13807 8.47141L11.4714 1.13807C11.7318 0.877721 11.7318 0.455612 11.4714 0.195262C11.2111 -0.0650874 10.7889 -0.0650874 10.5286 0.195262L3.66667 7.05719Z' fill='%231C1D21'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 9px;
}
.smd-drawer-actions {
display: grid;
gap: 8px;
margin-top: 12px
}
.smd-apply {
background: #F29602;
border: 0;
border-radius: 999px;
padding: 10px 16px;
font-weight: 600
}
.smd-clear {
background: transparent;
border: 0;
color: #e9f0f3
}
.smd-filter {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.smd-label {
font-size: 16px;
line-height: 140%;
font-weight: 400;
padding-left: 0;
margin-bottom: 0;
}
.smd-select {
background: #132f3a;
color: #fff;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
padding: 10px 14px;
outline: none
}
.smd-table-wrap {
overflow: auto;
padding: 0px 12px;
padding-top: 12px;
}
.smd-table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.smd-table th,
.smd-table td {
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
vertical-align: top;
color: #FFFFFF;
}
.smd-table tr {
padding: 8px 0px;
border-bottom: none;
}
.smd-table th {
white-space: nowrap;
font-weight: 600;
font-size: 14px;
line-height: 140%;
color: #A0BDCB;
}
.smd-table td {
font-size: 16px;
font-weight: 400;
line-height: 140%;
}
.smd-table tbody tr:hover {
background: #203944
}
.smd-status {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
line-height: 140%;
background: #00000033;
}
.smd-status-ok {
color: #34C759;
}
.smd-status-warning {
color: #FFCC00;
}
.smd-status-error {
color: #FF383C;
}
.smd-doc {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
line-height: 140%;
background: #00000033;
color: #f29602;
}
.smd-doc:hover {
background: #273f4b
}
.smd-foot {
padding: 16px 24px 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.smd-pages {
display: flex;
align-items: center;
gap: 8px
}
.smd-page {
font-weight: 600;
font-size: 16px;
line-height: 140%;
letter-spacing: 0%;
text-align: center;
color: #A0BDCB;
background-color: transparent;
padding: 11px 10px;
border-radius: 12px;
aspect-ratio: 1;
width: 44px;
height: 44px;
max-width: 44px;
max-height: 44px;
cursor: pointer
}
.smd-page-active {
background: #273f4b;
color: #FFF;
font-weight: 600
}
.smd-page-next,
.smd-page-prev {
padding: 12px;
}
.smd-page[disabled] {
cursor: default
}
.smd-page-list {
display: flex;
gap: 4px
}
.smd-page-num {
min-width: 28px;
text-align: center
}
.smd-page-ellipsis {
color: #A0BDCB;
cursor: default;
}
.smd-count {
font-weight: 400;
font-size: 16px;
line-height: 140%;
letter-spacing: 0%;
color: #A0BDCB;
margin: 0;
display: block;
white-space: nowrap;
}
.top > .smd-count-top {
margin-bottom: 16px;
}
.smd-mobile-bar .smd-count,
.smd-wrap > .smd-count-top {
display: none;
}
.smd-foot .smd-count {
margin: 0;
}
@media (max-width: 991px) {
.smd-chips {
margin: 12px 0px;
}
.smd-table-wrap {
padding: 0;
}
.smd-table tbody tr:hover {
background-color: transparent;
}
.smd-wrap {
background-color: transparent;
}
.smd-wrap .top {
background-color: transparent;
padding: 0;
}
.smd-filters {
display: none;
grid-template-columns: repeat(2, minmax(160px, 1fr))
}
.smd-pills {
display: none;
}
.smd-mobile-bar {
display: flex;
}
.top > .smd-count-top,
.smd-foot .smd-count {
display: none;
}
.smd-mobile-bar .smd-count {
display: block;
flex: 1 1 auto;
margin: 0;
min-width: 0;
text-align: right;
white-space: normal;
}
.smd-mobile-search-bar {
display: block;
margin: 14px 0 12px;
}
.smd-pages {
display: none;
}
.smd-load-more {
display: inline-block;
}
.smd-foot {
flex-direction: column;
align-items: center;
gap: 0;
margin: 0;
margin-top: 12px;
}
.smd-table thead {
display: none;
}
.smd-table td {
padding: 0;
border-bottom: 0;
}
}
.smd-cards-cell {
padding: 0;
border-bottom: 0;
}
.smd-card {
background: rgba(255, 255, 255, .04);
border-radius: 18px;
padding: 16px;
margin-bottom: 12px;
}
.smd-card-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-top: 1px solid rgba(255, 255, 255, 0.2)
}
.smd-card-row-primary {
padding-top: 0;
border-top: 0;
flex-wrap:wrap;
}
.smd-card-row span:first-child {
color: #A0BDCB;
font-weight: 600;
font-size: 14px;
line-height: 140%;
}
.smd-card-row > span:last-child {
}
.smd-card-toggle {
width: 100%;
margin-top: 10px;
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
line-height: 140%;
letter-spacing: 0%;
background: #00000033;
border: 0;
border-radius: 999px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600
}
.smd-card-toggle .smd-card-chevron {
display: inline-flex;
transition: transform .2s ease;
}
.smd-card-toggle.smd-open .smd-card-chevron {
transform: rotate(180deg);
}
.smd-card-more .smd-card-row:first-of-type {
border-top: none;
}
.smd-filters .selectric {
line-height: 24px;
width: 100%;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 59px;
height: 50px;
font-size: 16px;
padding: 5px 30px;
margin-top: 0;
}
.smd-filters .selectric:hover {
border-color: #f29602;
}
.smd-filters .selectric .label {
position: relative;
overflow: unset;
margin: 0;
color: #F5F5F5;
font-weight: 400;
font-size: 16px;
line-height: 140%;
letter-spacing: 0%;
display: flex;
align-items: center;
width: fit-content;
}
.smd-filters .selectric .button {
background-color: transparent;
height: 100%;
width: 70px;
}
.smd-filters .selectric-items {
background-color: #223d49;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: none;
}
.selectric-items li:first-of-type {
display: none;
}
.smd-filters .selectric li {
line-height: 40px;
font-size: 16px !important;
}
.selectric-items li {
font-size: 16px !important;
padding: 0px 30px;
color: var(--color-text-main2);
}
.selectric .label {
font-size: 20px;
color: var(--color-lable);
position: relative;
overflow: unset;
margin: 0;
}
.selectric .label:before {
content: '*';
position: absolute;
right: -10px;
top: 0%;
color: var(--color-base);
}
.selectric-items ul {
cursor: auto;
}
.smd-filters .selectric-items li {
line-height: 40px !important;
}
.selectric-items li:hover {
background-color: var(--color-base);
}
@media (max-width: 1900px) {
.selectric {
height: 50px;
font-size: 16px;
padding: 5px 30px;
}
.selectric .label {
font-size: 16px;
}
.selectric-items li {
font-size: 16px !important;
}
}.smd-desktop-multiselect-trigger {
appearance: none;
box-sizing: border-box;
width: 100%;
height: 50px;
margin: 0;
background-color: transparent;
color: #F5F5F5;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 59px;
padding: 5px 48px 5px 30px;
outline: none;
font-family: inherit;
font-weight: 400;
font-size: 16px;
line-height: 140%;
letter-spacing: 0;
text-align: left;
cursor: pointer;
position: relative;
justify-content: flex-start;
}
.smd-desktop-multiselect-trigger:hover,
.smd-desktop-multiselect-trigger:focus,
.smd-desktop-multiselect-open .smd-desktop-multiselect-trigger {
border-color: #f29602;
background-color: transparent;
}
.smd-desktop-multiselect-trigger-label {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.smd-desktop-multiselect-trigger-label:after {
content: '*';
color: #f29602;
margin-left: 4px;
}
.smd-desktop-multiselect-trigger-icon {
position: absolute;
right: 30px;
top: 50%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #A0BDCB;
transform: translateY(-50%);
}
.smd-desktop-multiselect-open .smd-desktop-multiselect-trigger-icon {
transform: translateY(-50%) rotate(180deg);
}
.smd-desktop-multiselect-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 2px);
z-index: 20;
max-height: min(520px, 70vh);
overflow: hidden;
background: #223d49;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 16px;
box-shadow: none;
}
.smd-desktop-multiselect-menu .smd-desktop-multiselect-search {
background: transparent;
border: none;
border-bottom: #F29602 1px solid;
border-radius: 0;
font-size: 16px;
margin: 4px auto 0;
width: calc(100% - 24px);
padding: 12px 4px;
height: 60px;
}
.smd-desktop-multiselect-search::placeholder {
color: #A0BDCB;
opacity: 1;
}
.smd-desktop-multiselect-options {
max-height: calc(min(520px, 70vh) - 82px);
overflow: auto;
}
.smd-desktop-multiselect-option {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
position: relative;
margin: 0 12px 5px;
cursor: pointer;
}
.smd-desktop-multiselect-option:before {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #FFFFFF33;
}
.smd-desktop-multiselect-option-text {
font-size: 16px;
font-weight: 300;
color: #e0e0e0;
}
.smd-desktop-multiselect-checkbox {
appearance: none;
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 4px;
background: transparent;
border: 2px solid #9CA3A6;
cursor: pointer;
position: relative;
}
.smd-desktop-multiselect-checkbox:checked {
background-color: #F5A300;
border-color: #F5A300;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M3.66667 7.05719L1.13807 4.5286C0.877722 4.26825 0.455612 4.26825 0.195262 4.5286C-0.0650874 4.78895 -0.0650874 5.21105 0.195262 5.4714L3.19526 8.47141C3.45561 8.73176 3.87772 8.73176 4.13807 8.47141L11.4714 1.13807C11.7318 0.877721 11.7318 0.455612 11.4714 0.195262C11.2111 -0.0650874 10.7889 -0.0650874 10.5286 0.195262L3.66667 7.05719Z' fill='%231C1D21'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 9px;
}
.smd-desktop-multiselect-empty {
padding: 18px 30px;
color: #A0BDCB;
font-size: 16px;
line-height: 140%;
}