@font-face {
    font-family: 'SF UI Display Ultralight';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Ultralight'), url('../fonts/fonts-2022/sf-ui/sf-ui-display-ultralight.woff') format('woff');
}

@font-face {
    font-family: 'SF UI Display Thin';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Thin'), url('../fonts/fonts-2022/sf-ui/sf-ui-display-thin.woff') format('woff');
}

@font-face {
    font-family: 'SF UI Display Light';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Light'), url('../fonts/fonts-2022/sf-ui/sf-ui-display-light.woff') format('woff');
}

@font-face {
    font-family: 'SF UI Display Medium';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Medium'), url('../fonts/fonts-2022/sf-ui/sf-ui-display-medium.woff') format('woff');
}

@font-face {
    font-family: 'SF UI Display Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Semibold'), url('../fonts/fonts-2022/sf-ui/sf-ui-display-semibold.woff') format('woff');
}

@font-face {
    font-family: 'SF UI Display Bold';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Bold'), url('../fonts/fonts-2022/sf-ui/sf-ui-display-bold.woff') format('woff');
}

@font-face {
    font-family: 'SF UI Display Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Heavy'), url('../fonts/fonts-2022/sf-ui/sf-ui-display-heavy.woff') format('woff');
}

@font-face {
    font-family: 'SF UI Display Black';
    font-style: normal;
    font-weight: normal;
    src: local('SF UI Display Black'), url('../fonts/fonts-2022/sf-ui/sf-ui-display-black.woff') format('woff');
}

:root {
    --subtitle-text-color: #A6A6A6;
    --label-text-color: #231F20;
    --main-color-green: #A5D69E;
    --secondary-color-green: #6AB04C;
    --color-blue: #1B9CFC;
    --smallest-font: 12px;
    --detail-font: 14px;
    --body-font: 16px;
    --body-font-md: 18px;
    --title-font-xs: 20px;
    --title-font-sm: 22px;
    --title-font-md: 24px;
    --title-font-25: 25px;
    --title-font: 28px;
    --title-font-30: 30px;
    --title-font-35: 35px;
    --main-title-font-sm: 38px;
    --main-title-font: 42px;
}

.font-smallest {
    font-size: var(--smallest-font);
}

.font-detail {
    font-size: var(--detail-font) !important;
}

.font-body {
    font-size: var(--body-font) !important;
}

.font-title {
    font-size: var(--title-font);
}

.font-main-title {
    font-size: var(--main-title-font);
}

.font-20 {
    font-size: var(--title-font-xs);
}

.font-25 {
    font: normal normal medium 26px/39px 'SF UI Display Medium';
}

.font-22 {
    font-size: var(--title-font-sm);
}

.font-30 {
    font-size: var(--title-font-30);
}

.font-35 {
    font-size: var(--title-font-35);
}

.font-bold-sf {
    font: normal normal bold 25px/30px SF UI Display Bold, sans-serif;
}

.font-bold-tx {
    font-family: 'SF UI Display Bold', sans-serif;
}

.font-light {
    font-family: 'SF UI Display Light', sans-serif;
}

.font-thin {
    font-family: 'SF UI Display Thin', sans-serif;
}

.font-medium {
    font-family: 'SF UI Display', sans-serif;
}

.font-semibold {
    font-family: 'SF UI Display Semibold', sans-serif;
}

a {
    color: var(--main-color-green);
}

a:hover {
    color: var(--main-color-green);
}

.table td {
    border: 0 !important;
}

td:first-child,
th:first-child {
    border-radius: 15px 0 0 15px;
}

td:last-child,
th:last-child {
    border-radius: 0 15px 15px 0;
}

.badge-success-opacity {
    background: rgba(165, 214, 158, 0.2);
}

.badge-warning-opacity {
    background: rgba(240, 147, 43, 0.2);
}

.badge-danger-opacity {
    background: rgba(235, 77, 75, 0.2);
}

.box-contener {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 8px 20px #1C1A1808;
    border: 0.699999988079071px solid #EBEBEB;
    border-radius: 30px;
    opacity: 1;
}

.border-1px {
    border: 1px solid;
}

.btn-background-info {
    background: rgba(27, 156, 252, 0.2);
    border: 0;
    color: var(--color-blue);
}

.btn-border-radius {
    border-radius: 15px;
}

.d-flex {
    gap: 5px 20px;
}

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

.subtitle {
    font: normal normal medium 18px/23px SF UI Display Medium;
}

.input-form {
    background: #231F2007 0% 0% no-repeat padding-box !important;
    border: 1px solid #231F2015 !important;
    border-radius: 20px !important;
    opacity: 1 !important;
}

.label-form {
    color: var(--label-text-color);
    font: normal normal medium 18px/23px SF UI Display Medium;
}

.main-title {
    font-family: 'SF UI Display Heavy';
}

.top-header {
    box-shadow: 0px 3px 10px #1C1A1808;
}

.input-form::-webkit-input-placeholder {
    text-align: left;
    font: normal normal medium 14px/31px SF UI Display Medium !important;
    letter-spacing: 0px;
    color: var(--subtitle-text-color) !important;
    text-transform: initial;
    opacity: 1;
}

.input-form::-moz-placeholder {
    text-align: left;
    font: normal normal medium 14px/31px SF UI Display Medium !important;
    letter-spacing: 0px;
    color: var(--subtitle-text-color) !important;
    text-transform: initial;
    opacity: 1;
}

.input-form:-ms-input-placeholder {
    text-align: left;
    font: normal normal medium 14px/31px SF UI Display Medium !important;
    letter-spacing: 0px;
    color: var(--subtitle-text-color) !important;
    text-transform: initial;
    opacity: 1;
}

.input-form::placeholder {
    text-align: left;
    font: normal normal medium 14px/31px SF UI Display Medium !important;
    letter-spacing: 0px;
    color: var(--subtitle-text-color) !important;
    text-transform: initial;
    opacity: 1;
}

.btn-main-submit-outline {
    background: transparent 0% 0% no-repeat padding-box;
    border: 1px solid var(--main-color-green);
    border-radius: 20px;
    font: normal normal bold 20px/31px SF UI Display Bold;
    opacity: 1;
    padding: 5px 20px;
}

.btn-main-submit-outline:hover {
    background: var(--main-color-green) 0% 0% no-repeat padding-box;
    color: #FFFFFF;
}

.btn-main-submit {
    background: var(--main-color-green) 0% 0% no-repeat padding-box;
    border: 1px solid #231F2015;
    border-radius: 20px;
    font: normal normal bold 20px/31px SF UI Display Bold;
    opacity: 1;
    padding: 10px 20px;
}

.btn-main-submit:hover {
    background: #343A40 0% 0% no-repeat padding-box;
}

.sign-line {
    margin: 30px 0 15px 0 !important;
    text-transform: initial !important;
}

.sign-line:before {
    margin-right: 65px !important;
}

.sign-line:after {
    margin-left: 65px !important;
}

.text-success-green {
    color: var(--main-color-green);
}

.text-secondary-success {
    color: var(--secondary-color-green);
}

.icon-blue {
    color: var(--color-blue);
}

#list_smb_portal th {
    color: var(--subtitle-text-color);
}

.letter-spacing-1 {
    letter-spacing: 1px;
}

.input-search {
    max-width: 350px !important;
    width: 350px !important;
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    .mx-sm-5 {
        margin-bottom: 5px !important;
    }
}