:root {
    --tbr-background-01: #F5F8FA;
    --tbr-background-02: #EDEBF7;
    --tbr-primary: #0583D2;
    --tbr-secondary: #30BFB1;
    --tbr-tertiary: #4F42B4;
    --tbr-quaternary: #FFAA00;
    --tbr-quinary: #EF305E;
    --light: #FFFFFF;
    --txt-body: #7B7E86;
}

html, body {
    background-color: var(--tbr-background-02);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    letter-spacing: .25px;
    line-height: 18px;
    color: var(--txt-body);
    font-weight: 500;
}

p {
    color: var(--txt-body);
}

a {
    color: var(--tbr-primary) !important;
    text-decoration: none;
}

.tbr_container {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    background-color: var(--light);
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
    overflow-x: hidden;
    box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
    -moz-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
}

.tbr_page--header {
    background-color: var(--tbr-background-01);
    padding: 20px 20px 70px;
    margin-bottom: -40px;
    text-align: center;
}

.tbr_page--header [aria-expanded="true"] {
    display: none;
}

.tbr_page--header p {
    margin-bottom: 16px;
}

.tbr_logo--wrap {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid #DCD9F0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px;
    overflow: hidden;
}

.tbr_logo--wrap img {
    width: 100%;
    height: 100%;
}

.tbr_logo {
    height: 50px;
    margin-bottom: 16px;
}

.tbr_business--name {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 8px;
    color: #17283C;
}

.tbr_contents {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--light);
    border-radius: 40px 40px 0 0;
    padding: 30px 20px;
}

.tbr_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 43px;
    border-radius: 43px;
    box-shadow: none;
    outline: none;
    border: none;
    color: var(--txt-body);
    background-color: var(--tbr-background-02);
    transition: all .3s;
    font-weight: 500;
}

.tbr_btn.tbr_btn--warning {
    background-color: var(--tbr-quaternary) !important;
    color: var(--light) !important;
    box-shadow: 0px 8px 24px 0px rgba(255, 170, 0, 0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(255, 170, 0, 0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(255, 170, 0, 0.2);
}

.tbr_btn.tbr_btn.tbr_btn--success {
    background-color: var(--tbr-secondary) !important;
    color: var(--light) !important;
    box-shadow: 0px 8px 24px 0px rgba(48, 191, 177, 0.2);
    -webkit-box-shadow: 0px 8px 24px 0px rgba(48, 191, 177, 0.2);
    -moz-box-shadow: 0px 8px 24px 0px rgba(48, 191, 177, 0.2);
}

.tbr_btn.tbr_btn--warning:hover,
.tbr_btn.tbr_btn--warning:focus,
.tbr_btn.tbr_btn--warning:active,
.tbr_btn.tbr_btn--success:hover,
.tbr_btn.tbr_btn--success:focus,
.tbr_btn.tbr_btn--success:active {
    box-shadow: none;
}

.tbr_btn:focus,
.tbr_btn:active {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Alert */
.alert-danger {
    background-color: rgba(239, 48, 93, 0.1);
    border-radius: 8px;
    border: none;
    color: var(--tbr-quinary);
}

.tbr_spinner {
    border-width: 1px;
    width: 16px !important;
    height: 16px !important;
}

/* Form Control */
.form-control::placeholder { color: var(--txt-body); opacity: .6; }
.form-control:-ms-input-placeholder { color: var(--txt-body); opacity: .6; }
.form-control::-ms-input-placeholder { color: var(--txt-body); opacity: .6; }

.form-control {
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: none;
    color: var(--txt-body);
    background-color: var(--tbr-background-01) !important;
    border: 2px solid var(--tbr-background-01);
}

.form-control:focus,
.form-control:active {
    color: var(--txt-body);
    border: 2px solid var(--tbr-secondary);
    box-shadow: none !important;
    outline: none !important;
}

.input-group-text {
    background-color: var(--tbr-background-02);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-weight: 500;
    color: var(--txt-body);
    padding: 4px 14px;
    border-radius: 8px 0 0 8px;
}

textarea {
    resize: none;
}

/* Select2 */
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--light);
    color: var(--txt-body);
    border: none;
    overflow: hidden;
    border-radius: 8px !important;
    margin-top: 4px;
    box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15);
    padding-bottom: 8px;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
    margin-top: -4px;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search {
    padding: 8px;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--tbr-background-01);
    color: var(--txt-body);
    border-radius: 8px;
    min-height: 42px;
    padding: 4px 16px;
    font-weight: 500;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--tbr-background-01);
    color: var(--tbr-secondary);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, 
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true] {
    background-color: var(--tbr-secondary);
    color: var(--light);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--txt-body);
    font-size: 13px;
    font-weight: 500;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    padding: 8px 16px;
    font-weight: 500;
}

.select2-container--bootstrap-5 .select2-selection {
    min-height: 42px;
    padding: 2px 16px;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: none;
    color: var(--txt-body);
    background-color: var(--tbr-background-01) !important;
    border: 2px solid var(--tbr-background-01);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, 
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    box-shadow: none;
    outline: none;
    border-radius: 8px !important;
    border: 2px solid var(--tbr-secondary) !important;
}

.select2-container--bootstrap-5 .select2-selection--single {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="6" viewBox="0 0 10 6"><defs><clipPath id="clip-path"><rect id="Rectangle_5295" data-name="Rectangle 5295" width="10" height="6" fill="%23fff"/></clipPath></defs><g id="Mask_Group_22" data-name="Mask Group 22" clip-path="url(%23clip-path)"><path id="Path_3569" data-name="Path 3569" d="M6.227,9.771a.385.385,0,0,0,.545,0l4.615-4.615a.385.385,0,0,0-.545-.545L6.5,8.955,2.157,4.612a.385.385,0,1,0-.545.545Z" transform="translate(-1.5 -3.884)" fill="%230583d2" fill-rule="evenodd"/></g></svg>');
    background-size: 10px;
    background-repeat: no-repeat;
}