@charset "utf-8";
/*
 * Name     : px-strap.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-03-10
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. Root
---------------------------------------------------
*/

/* ------------------------------
 * Root
------------------------------ */
:root {
    /* --primary: #f5df4d; */
    --primary: #e7b03c;
    --secondary: #ebc727;
    --link: #eaba15;
    --grey-900: #0f1825;
    --grey-800: #192638;
    --grey-700: #374253;
    --grey-600: #596579;
    --grey-500: #7b8698;
    --grey-400: #a7afbc;
    --grey-300: #d0d7e2;
    --grey-200: #e6eaf0;
    --grey-100: #f7f9fc;
    --grey-50: #fafbfc;
    --black: #000000;
    --white: #ffffff;
    --danger-900: #b21b26;
    --danger-800: #c22731;
    --danger-700: #d0282f;
    --danger-600: #e1373e;
    --danger-500: #f04040;
    --danger-400: #eb5258;
    --danger-300: #e07278;
    --danger-200: #eb999e;
    --danger-100: #fccdd4;
    --danger-50: #feebef;
    --warning-900: #c03616;
    --warning-800: #da431e;
    --warning-700: #e84922;
    --warning-600: #f65027;
    --warning-500: #ff562b;
    --warning-400: #ff7049;
    --warning-300: #ff8a6a;
    --warning-200: #ffab94;
    --warning-100: #ffccbe;
    --warning-50: #fbe9e8;
    --success-900: #087f5b;
    --success-800: #099268;
    --success-700: #0ca678;
    --success-600: #12b886;
    --success-500: #20c997;
    --success-400: #38d9a9;
    --success-300: #63e6be;
    --success-200: #96f2d7;
    --success-100: #c3fae8;
    --success-50: #e6fcf5;
}

/* ------------------------------
 * Container
------------------------------ */
.container-wide {max-width: 1360px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px}
.container-fluid, .container-lg, .container-md, .container-sm, .container-xl {padding-left: 20px; padding-right: 20px}


/* ------------------------------
 * Heading
------------------------------ */
.px-heading-01 {font-size: 60px; font-weight: 500; color: var(--black); line-height: 1.05; letter-spacing: -0.02em}
.px-heading-02 {font-size: 56px; font-weight: 500; color: var(--black); line-height: 1.125; letter-spacing: -0.02em}
.px-heading-03 {font-size: 52px; font-weight: 500; color: var(--grey-900); line-height: 1.175; letter-spacing: -0.02em}
.px-heading-04 {font-size: 48px; font-weight: 500; color: var(--grey-900); line-height: 1.225; letter-spacing: -0.03em}
.px-heading-05 {font-size: 42px; font-weight: 500; color: var(--grey-900); line-height: 1.275; letter-spacing: -0.03em}
.px-heading-06 {font-size: 36px; font-weight: 600; color: var(--grey-800); line-height: 1.325; letter-spacing: -0.03em}
.px-heading-07 {font-size: 30px; font-weight: 600; color: var(--grey-800); line-height: 1.375; letter-spacing: -0.03em}
.px-heading-08 {font-size: 24px; font-weight: 600; color: var(--grey-800); line-height: 1.4; letter-spacing: -0.03em}
.px-heading-09 {font-size: 20px; font-weight: 600; color: var(--grey-800); line-height: 1.5; letter-spacing: -0.03em}
.px-heading-10 {font-size: 18px; font-weight: 600; color: var(--grey-800); line-height: 1.6; letter-spacing: -0.03em}

/* ------------------------------
 * Text
------------------------------ */
.px-text-01 {font-size: 32px; color: var(--grey-800); letter-spacing: -0.01em; line-height: 1.2}
.px-text-02 {font-size: 28px; color: var(--grey-800); letter-spacing: -0.01em; line-height: 1.2}
.px-text-03 {font-size: 24px; color: var(--grey-700); letter-spacing: -0.01em; line-height: 1.25}
.px-text-04 {font-size: 20px; color: var(--grey-700); letter-spacing: -0.01em; line-height: 1.25}
.px-text-05 {font-size: 19px; color: var(--grey-600); letter-spacing: -0.01em; line-height: 1.35}
.px-text-06 {font-size: 18px; color: var(--grey-600); letter-spacing: -0.02em; line-height: 1.35}
.px-text-07 {font-size: 17px; color: var(--grey-600); letter-spacing: -0.02em; line-height: 1.4}
.px-text-08 {font-size: 16px; color: var(--grey-600); letter-spacing: -0.02em; line-height: 1.4}
.px-text-09 {font-size: 15px; color: var(--grey-500); letter-spacing: -0.02em; line-height: 1.5}
.px-text-10 {font-size: 14px; color: var(--grey-500); letter-spacing: -0.02em; line-height: 1.5}
.font-weight-thin {font-weight: 200 !important}
.font-weight-light {font-weight: 300 !important}
.font-weight-medium {font-weight: 500 !important}
.font-weight-semibold {font-weight: 600 !important}
.font-weight-bold {font-weight: 700 !important}
.font-weight-black {font-weight: 800 !important}
.px-info-text {position: relative; padding-left: 1.375em}
.px-info-text::before {content: '\F333'; font-family: 'bootstrap-icons'; font-size: 0.95em; position: absolute; top: 1px; left: 0}
.text-primary {color: var(--link) !important}
.text-black {color: #000 !important}

/* ------------------------------
 * Buttons
------------------------------ */
.button {position: relative; display: inline-flex; font-size: 15px; font-weight: 600; color: #666; text-align: center; white-space: nowrap; padding: 0 1rem; height: 48px; border: 1px solid transparent; border-radius: 0.5rem; background-color: #e9e9e9; align-items: center; justify-content: center; outline: 0 !important; overflow: hidden; vertical-align: middle; transition: .1s}
.button.button-primary {color: var(--grey-800); background-color: #e7b03c}
.button.button-primary:hover {background-color: #d39e29}
.button.button-primary:active {background-color: #b88518}
.button.button-secondary {color: var(--grey-800); background-color: #fff3bf}
.button.button-secondary:hover {background-color: #ffec99}
.button.button-secondary:active {background-color: #ffe066}
.button.button-success {color: #fff; background-color: #51cf66}
.button.button-success:hover {background-color: #37b24d}
.button.button-danger {color: #fff; background-color: #fa5252}
.button.button-danger:hover {background-color: #e03131}
.button.button-warning {color: #fff; background-color: #fab005}
.button.button-warning:hover {background-color: #f08c00}
.button.button-info {color: #fff; background-color: #adb5bd}
.button.button-info:hover {background-color: #868e96}
.button.button-light {color: #343a40; background-color: #f1f3f5}
.button.button-light:hover {background-color: #e9ecef}
.button.button-dark {color: #fff; background-color: #343a40}
.button.button-dark:hover {background-color: #212529}
.button.button-default {color: #343a40; border-color: #ced4da; background-color: #fff}
.button.button-default:hover {background-color: #f1f3f5}
.button.button-default:active {background-color: #e9e9e9}

.button.button-solid {color: var(--grey-800); background-color: #e7b03c}
.button.button-solid:hover {background-color: #d39e29}
.button.button-solid:active {background-color: #b88518}

.button.darken::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.24); opacity: 0; transition: opacity .3s}
.button.darken:hover::before {opacity: 1}
.button.button-sm {font-size: 0.875rem; padding: 0 0.75rem; height: 42px}
.button.button-lg {font-size: 1rem; padding: 0 1.375rem; height: 54px}
.button.button-xl {font-size: 1.0625rem; padding: 0 1.75rem; height: 60px}
.button.disabled, .button:disabled {color: var(--grey-400) !important; background-color: var(--grey-200) !important; cursor: not-allowed}
.button.size-1 {min-width: 60px}
.button.size-2 {min-width: 72px}
.button.size-3 {min-width: 84px}
.button.size-4 {min-width: 100px}
.button.size-5 {min-width: 112px}
.button.size-6 {min-width: 124px}
.button.size-7 {min-width: 140px}
.button.size-8 {min-width: 160px}
.button.size-9 {min-width: 180px}
.button.size-10 {min-width: 200px}
.dropdown-menu {padding: 0.5rem; border-radius: 10px; border-color: var(--grey-200); box-shadow: 0 2px 8px rgb(0 0 0 / 14%)}
.dropdown-menu > button {display: block; width: 100%; padding: 10px 16px; font-size: 0.9375rem; color: #666; text-align: left; border: 0; border-radius: 8px; background-color: var(--white); outline: 0}
.dropdown-menu > button:hover {color: var(--black); background-color: #f7f7f7}
.dropdown-item {padding: 10px 16px; font-size: 0.9375rem; color: #666; text-align: left; border: 0; border-radius: 8px; background-color: var(--white)}
.dropdown-item:focus, .dropdown-item:hover {color: var(--black); background-color: #f7f7f7}
.dropdown-item.active, .dropdown-item:active {color: var(--black); background-color: #f7f7f7}

/* ------------------------------
 * Forms
------------------------------ */
.form-sm {max-width: 420px; margin-left: auto; margin-right: auto}
.form-md {max-width: 760px; margin-left: auto; margin-right: auto}
.form-lg {max-width: 880px; margin-left: auto; margin-right: auto}
.label-heading {display: block; width: 100%; font-size: 15px; font-weight: 700; color: var(--grey-800); margin-bottom: 0.5rem}
.form-input {display: block; width: 100%; height: 48px; font-size: 15px; color: #666; letter-spacing: -0.02em; line-height: 1.5; padding: 0.375rem 1rem; border: 1px solid #ced4da; border-radius: 0.5rem; background-color: #fff; outline: 0; transition: .3s}
.form-input:focus {border-color: var(--secondary); box-shadow: 0 0 0 2px var(--primary)}
.form-input::placeholder {color: var(--grey-400)}
.form-input:disabled, .form-input.disabled {color: var(--grey-400) !important; border-color: var(--grey-300) !important; background-color: var(--grey-50)}
.required {background-image: url(../images/common/required_bullet.svg) !important; background-size: 6px 6px !important; background-position: right 6px top 6px !important; background-repeat: no-repeat}
select.form-input {padding-right: 3rem; appearance: none; -webkit-appearance: none; background-image: url(../images/sub/select_dropdown_arrow.svg) !important; background-position: right 1rem center !important; background-size: 1rem 1rem !important; background-repeat: no-repeat}
select.form-input::-ms-expand {display: none}
.form-line {position: relative; display: -ms-flexbox; display: flex; height: 3rem; margin-bottom: 0; align-items: center; border-bottom: 2px solid #dee2e6}
.form-line::after {content: ''; position: absolute; display: block; bottom: -2px; left: 0; width: 0; height: 2px; background-color: #343a40; z-index: 2; transition: width .3s}
.form-line .form-input-line {display: block; width: 100%; font-size: 0.9375rem; color: #666; letter-spacing: -0.02em; padding: 0.375rem 0; border: 0; border-radius: 0; outline: 0; transition: color .3s}
.form-line.--focused::after {width: 100%}
.form-line.--focused .form-input-line {color: #343a40}
.form-input.input-sm {font-size: 0.875rem; padding: 0.25rem 0.5rem; height: 2.625rem}
.form-input.input-lg {font-size: 1rem; padding: 0.375rem 1.25rem; height: 3.375rem}
.form-input.input-xl {font-size: 1.0625rem; padding: 0.5rem 1.75rem; height: 3.75rem}
.form-line.input-sm {height: 2.625rem}
.form-line.input-sm .form-input-line {font-size: 0.875rem}
.form-line.input-lg {height: 3.375rem}
.form-line.input-lg .form-input-line {font-size: 1.0625rem; height: 3rem}
.form-line.input-xl {height: 3.75rem}
.form-line.input-xl .form-input-line {font-size: 1.125rem; height: 3.125rem}
textarea.form-input {height: auto !important; padding: 1rem 1rem}
textarea.form-input.input-sm {padding: 0.5rem 0.5rem}
textarea.form-input.input-lg {padding: 1.25rem 1.25rem}
textarea.form-input.input-xl {padding: 1.75rem 1.75rem}
.form-floating {position: relative}
.form-floating > .form-input {padding: 1rem 1rem; height: calc(3.5rem + 2px); line-height: 1.25}
.form-floating > label {position: absolute; top: 0; left: 0; height: 100%; margin-bottom: 0; padding: 1rem 1rem; border: 1px solid transparent; pointer-events: none; transform-origin: 0 0; transition: opacity .1s ease-in-out,transform .1s ease-in-out}
.form-floating > .form-input:focus, .form-floating > .form-input:not(:placeholder-shown) {padding-top: 1.625rem; padding-bottom: 0.625rem}
.form-floating > .form-input:focus ~ label, .form-floating > .form-input:not(:placeholder-shown) ~ label {opacity: .65; transform: scale(.85) translateY(-0.5rem) translateX(0.15rem)}
.form-floating > .form-input::placeholder {color: transparent}
.input-group > .form-input, .input-group > .form-input-plaintext, .input-group > .custom-select, .input-group > .custom-file {position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0}
.px-form-check {position: relative; display: -ms-flexbox; display: flex; align-items: center}
.px-form-check > label {display: inline-block; max-width: 100%; min-height: 1.5rem; color: #495057; line-height: 1.6; margin-bottom: 0; padding-left: 1.5rem; cursor: pointer}
.px-form-check > label .custom-check {position: absolute; top: 1px; margin: 0 0 0 -1.5rem; border: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none}
.px-form-check > label .custom-check::before {content: ''; position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; border: 2px solid #dee2e6; border-radius: 0.375rem; background-color: #fff; transition: border-color .1s ease-in-out, background-color .1s ease-in-out; cursor: pointer}
.px-form-check > label .custom-check[type='radio']::before {border-radius: 50%}
.px-form-check > label .custom-check::after {content: ''; position: absolute; top: 0.375rem; left: 0.375rem; width: 0.75rem; height: 0.5rem; border: 2px solid #fff; border-top: none; border-right: none; border-radius: 1px; opacity: 0; transform: rotate(-45deg); transition: opacity .1s ease-in-out}
.px-form-check > label span {display: inline-block; font-size: 14px; font-weight: 500; padding-left: 0.5rem}
.px-form-check > label span a {font-weight: 600; color: var(--link); text-decoration: underline !important}
.px-form-check > label .custom-check:not(:disabled):hover::before, .px-form-check > label .custom-check:not(:disabled):focus::before {border-color: var(--secondary); background-color: #fff9db}
.px-form-check > label .custom-check:disabled::before {border-color: #e9ecef; background-color: #f8f9fa}
.px-form-check > label .custom-check:disabled ~ span {color: #868e96}
.px-form-check > label .custom-check:checked::before {border-color: var(--secondary) !important; background-color: var(--secondary) !important}
.px-form-check > label .custom-check:checked::after {opacity: 1}
.px-switch-check {position: relative; display: inline-flex; width: 56px; height: 30px; margin-bottom: 0}
.px-switch-check > .custom-check {position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0)}
.px-switch-check > .check-helper {position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 20px; background-color: #ccc; box-shadow: inset 1px 5px 1px rgba(0,0,0,.12); cursor: pointer; transition: .25s}
.px-switch-check > .check-helper::before {content: ''; position: absolute; width: 22px; height: 22px; bottom: 4px; left: 4px; border-radius: 50%; background-color: #fff; transition: .25s}
.px-switch-check > input:checked + .check-helper {background-color: #f5df4d}
.px-switch-check > input:checked + .check-helper::before {transform: translateX(26px)}
.px-custom-file {position: relative; display: block; width: 100%}
.px-custom-file input[type='file'] {position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; opacity: 0; visibility: hidden}
.px-custom-file input[type='text'] {width: calc(100% - 9.375rem) !important}
.px-custom-file input[type='file'] ~ label {position: absolute; top: 0; right: 0; display: inline-block; font-size: 0.9375rem; font-weight: 500; color: var(--white); letter-spacing: -0.04em; line-height: 48px; text-align: center; width: 8.75rem; height: 48px; margin-bottom: 0; border-radius: 0.5rem; background-color: var(--grey-700); cursor: pointer; transition: color .25s, background-color .25s, box-shadow .25s}
.px-custom-file input[type='file']:not(:disabled) ~ label:hover {background-color: var(--grey-900)}
.px-custom-file input[type='file']:disabled ~ label {opacity: .5; pointer-events: none}
.px-custom-file input[type='file'] ~ label svg {margin-right: 0.5rem}
.inline-group > .px-custom-file {display: inline-block; width: auto; vertical-align: middle}
.px-custom-file .error ~ input[type='text'] {color: var(--danger-600) !important; border-color: var(--danger-600) !important}
.px-custom-file .error ~ input[type='text']::placeholder {color: var(--danger-600) !important}
.px-custom-file .error ~ input[type='text']:focus {border-color: var(--danger-600) !important; box-shadow: 0 0 0 1px var(--danger-700) !important}

/* ------------------------------
 * Tables
------------------------------ */
.table-solid thead th {border-bottom-width: 1px}
.table-solid td, .table-solid th {font-size: 15px; padding: 0.875rem 0.75rem; vertical-align: middle}
.table-solid td {color: var(--grey-600)}
.table-solid th {font-weight: 500; color: var(--grey-900)}

/* ------------------------------
 * Backgrounds
------------------------------ */
.bg-cover {background-position: center; background-size: cover; background-repeat: no-repeat}

/* ------------------------------
 * Modals
------------------------------ */
.modal-backdrop {background-color: #999}
.modal-backdrop.show {opacity: .4}
.modal-content {border: 0; border-radius: 1.875rem}
.modal-header {padding: 2.5rem 3rem 1.75rem; border-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0}
.modal-title {font-size: 1.75rem; font-weight: 700; color: #212529; letter-spacing: -0.06em}
.modal-header .close {width: 3.75rem; height: 3.75rem; font-size: 24px; color: #fff; margin: -0.625rem 0 auto; padding: 0; border-radius: 50%; background-color: #000; opacity: 1 !important; outline: 0}
.modal-body {padding: 1.75rem 3rem}
.modal-body p {line-height: 1.6}
.modal-footer .footer-button {display: block; width: 100%; font-size: 1rem; font-weight: 700; color: #333; line-height: 1.44; text-align: center; margin: 0 !important; padding: 1.5rem 0.625rem; border: 0; background-color: transparent}
.modal-footer .footer-button:active {background-color: #f8f9fa}
.modal-sm .modal-header {padding: 1.5rem 1.75rem}
.modal-sm .modal-title {font-size: 1.375rem}
.modal-sm .modal-header .close {width: 2.5rem; height: 2.5rem; font-size: 1.125rem; margin: -0.25rem 0 auto}
.modal-body .notify-container h5 {font-size: 1.375rem; font-weight: 700; color: #212529; letter-spacing: -0.04em; margin-bottom: 16px}
.modal-body .notify-container p {font-size: 1.0625rem; letter-spacing: -0.04em; line-height: 1.8}
.modal-body .notify-container ul li {position: relative; color: #495057; letter-spacing: -0.04em; line-height: 1.67; padding-left: 0.9375rem}
.modal-body .notify-container ul li::before {content: ''; position: absolute; top: 0.6875rem; left: 0; width: 0.25rem; height: 0.25rem; border-radius: 50%; background-color: #ccc}
.modal-body .notify-container ul li + li {margin-top: 0.375rem}
.modal-body .notify-container ol {counter-reset: notifyCounter}
.modal-body .notify-container ol li {position: relative; color: #495057; letter-spacing: -0.04em; line-height: 1.67; padding-left: 1.125rem; counter-increment: notifyCounter}
.modal-body .notify-container ol li::before {content: counter(notifyCounter) '.'; position: absolute; top: 0; left: 0}
.modal-body .notify-container ol li + li {margin-top: 0.375rem}

.swal2-container {overflow-x: visible !important; overflow-y: auto !important}
.swal2-popup {padding: 0 !important; border-radius: 1rem !important; box-shadow: 0 2.5rem 5rem -1rem rgba(0,0,0,.16)}
.swal2-header {padding: 2.25rem 1.25rem 1rem}
.swal2-close {outline: 0 !important}
.swal2-close:hover {color: #5b5bcc !important}
.swal2-title {font-size: 1.3125rem !important; font-weight: 700; color: #2b2b2b !important; margin: 0 !important}
.swal2-content {font-size: 1rem !important; letter-spacing: -0.7px; line-height: 1.6; padding: 0 1.25rem !important}
.swal2-content .modal-textarea {display: block; width: 100%; height: auto; margin: 2.25rem 0; padding: 1.75rem; font-size: 14px; color: #868e96; line-height: 1.85; border: 1px solid #ced4da; border-radius: 3px; outline: 0}
.swal2-actions {margin: 2.125rem auto 0 !important; padding: 1.375rem 15px 1.5rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; background-color: #f8f9fa}
.swal2-styled.swal2-confirm {font-size: 0.9375rem !important; font-weight: normal; color: #fff; padding: 0.875rem 2.5rem; border-radius: 0.5rem !important; background-color: #212529 !important; box-shadow: 0 0.25rem 0.625rem 0 rgba(33,33,33,.4) !important}
.swal2-close {font-family: sans-serif !important; font-weight: 100}

/* ------------------------------
 * Selectric
------------------------------ */
.selectric {text-align: left !important; border: 1px solid #ced4da !important; border-radius: 10px; background-color: #fff !important}
.selectric:hover {border-color: var(--grey-400) !important}
.selectric .label {font-size: 1rem; font-weight: 500; color: #333; line-height: 46px; height: 46px; margin: 0 2.375rem 0 1rem}
.selectric .button {height: 46px; color: #333 !important; line-height: 2.875rem; background-color: transparent}
.selectric .button:after {content: '\e942'; font-family: 'xeicon'; font-size: 1.25rem; width: auto; height: auto; border: 0; transition: transform .3s}
.selectric-open .selectric {border-color: #333 !important}
.selectric-open .selectric .button:after {transform: rotate(180deg)}
.selectric-items {margin-top: 6px; border-color: var(--grey-200); border-radius: 10px; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.14)}
.selectric-above .selectric-items {margin-top: auto; margin-bottom: 6px}
.selectric-items ul {text-align: left !important; padding: 0.5rem}
.selectric-items ul, .selectric-items li {font-size: 0.9375rem}
.selectric-items li {padding: 8px 16px; color: #666; border-radius: 8px; background-color: #fff !important}
.selectric-items li + li {margin-top: 6px}
.selectric-items li.highlighted, .selectric-items li.selected, .selectric-items li:hover {color: #000 !important; background-color: #f7f7f7 !important}
.selectric-items li.selected {font-weight: 700}
.selectric-open .selectric {border-color: var(--secondary) !important; box-shadow: 0 0 0 2px var(--primary)}

/* ------------------------------
 * Tooltips
------------------------------ */
.tooltip {font-family: inherit}
.tooltip.show {opacity: 1}
.tooltip-inner {font-size: 13px; color: #333; text-align: left; padding: 16px; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background-color: #fff; box-shadow: 0 5px 10px 0 rgba(0,0,0,.1)}
.tooltip-inner .process-tooltip-header {font-size: 15px; font-weight: 700; color: #343a40; letter-spacing: -0.03em; margin-bottom: 8px}
.tooltip .arrow::after {content: ''; position: absolute; border-color: transparent; border-style: solid}
.bs-tooltip-auto[x-placement^=top] .arrow, .bs-tooltip-top .arrow {bottom: 1px}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {border-top-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {border-width: 8px 8px 0 8px}
.bs-tooltip-auto[x-placement^=top] .arrow::after, .bs-tooltip-auto[x-placement^=top] .arrow::after, .bs-tooltip-top .arrow::after {border-width: 8px 8px 0 8px; border-top-color: #fff}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {border-bottom-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {border-width: 0 8px 8px 8px}
.bs-tooltip-auto[x-placement^=bottom] .arrow::after, .bs-tooltip-auto[x-placement^=bottom] .arrow::after, .bs-tooltip-bottom .arrow::after {border-width: 0 8px 8px 8px; border-bottom-color: #fff}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {border-width: 8px 8px 8px 0}
.bs-tooltip-auto[x-placement^=right] .arrow::after, .bs-tooltip-auto[x-placement^=right] .arrow::after, .bs-tooltip-right .arrow::after {border-width: 8px 8px 8px 0; border-right-color: #fff}

.bs-tooltip-right .arrow::before {border-right-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {border-left-color: rgba(0,0,0,.1)}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {border-width: 8px 0 8px 8px}
.bs-tooltip-auto[x-placement^=left] .arrow::after, .bs-tooltip-auto[x-placement^=left] .arrow::after, .bs-tooltip-left .arrow::after {border-width: 8px 0 8px 8px; border-left-color: #fff}

/* ------------------------------
 * Helpers
------------------------------ */
.img-block {display:block; width:100%}
.h-100-vh {min-height: 100vh}

/* ------------------------------
 * Alerts
------------------------------ */
.alert {padding: 1rem 1.5rem; line-height: 1.7; letter-spacing: -0.04em; border-radius: 0.625rem}
.alert-primary {color: #e67700; border-color: var(--primary); background-color: #fff9db}
.alert-secondary {color: var(--grey-700); border-color: var(--grey-200); background-color: var(--grey-50)}

/* ------------------------------
 * Animations
------------------------------ */
[data-aos=fade-up-medium] {transform:translate3d(0, 60px ,0)}
[data-aos=fade-down-medium] {transform:translate3d(0, -60px ,0)}
[data-aos=fade-left-medium] {transform:translate3d(60px, 0 ,0)}
[data-aos=fade-right-medium] {transform:translate3d(-60px, 0 ,0)}
[data-aos=fade-up-short] {transform:translate3d(0, 30px ,0)}
[data-aos=fade-down-short] {transform:translate3d(0, -30px ,0)}
[data-aos=fade-left-short] {transform:translate3d(30px, 0 ,0)}
[data-aos=fade-right-short] {transform:translate3d(-30px, 0 ,0)}

@keyframes fadeInUpShort {
    from {opacity: 0; transform: translate3d(0, 30px, 0)}
    to {opacity: 1; transform: translate3d(0, 0, 0)}
}

.fadeInUpShort {animation-name: fadeInUpShort}

@keyframes fadeInDownShort {
    from {opacity: 0; transform: translate3d(0, -30px, 0)}
    to {opacity: 1; transform: translate3d(0, 0, 0)}
}

.fadeInDownShort {animation-name: fadeInDownShort}

@keyframes fadeOutUpShort {
    from {opacity: 1; transform: translate3d(0, 0, 0)}
    to {opacity: 0; transform: translate3d(0, -30px, 0)}
}

.fadeOutUpShort {animation-name: fadeOutUpShort}

@keyframes fadeOutDownShort {
    from {opacity: 1; transform: translate3d(0, 0, 0)}
    to {opacity: 0; transform: translate3d(0, 30px, 0)}
}

.fadeOutDownShort {animation-name: fadeOutDownShort}

/* ------------------------------
 * Media queries
------------------------------ */
@media (min-width: 576px) {
    .form-inline .form-input {display: inline-block; width: auto; vertical-align: middle}
}

@media (min-width: 1200px) {
    .container-fluid {padding-left: 72px; padding-right: 72px}
}

@media (max-width: 991px) {
    .px-heading-01 {font-size: 56px}
    .px-heading-02 {font-size: 52px}
    .px-heading-03 {font-size: 48px}
    .px-heading-04 {font-size: 42px}
    .px-heading-05 {font-size: 36px}
    .px-heading-06 {font-size: 30px}
    .px-heading-07 {font-size: 24px}
    .px-heading-08 {font-size: 20px}
    .px-heading-09 {font-size: 18px}

    .px-text-01 {font-size: 28px}
    .px-text-02 {font-size: 24px}
    .px-text-03 {font-size: 20px}
    .px-text-04 {font-size: 19px}
    .px-text-05 {font-size: 18px}
    .px-text-06 {font-size: 17px}
    .px-text-07 {font-size: 16px}
    .px-text-08 {font-size: 15px}
    .px-text-09 {font-size: 14px}
}

@media (max-width: 767px) {
    .px-heading-01 {font-size: 46px}
    .px-heading-02 {font-size: 42px}
    .px-heading-03 {font-size: 38px}
	.type.t001 .px-heading-03 {font-size:24px}
    .px-heading-04 {font-size: 36px}
    .px-heading-05 {font-size: 32px}
    .px-heading-06 {font-size: 27px}
    .px-heading-07 {font-size: 22px}
    .px-heading-08 {font-size: 18px}
    .px-heading-09 {font-size: 16px}
    .px-heading-10 {font-size: 15px}

    .px-text-01 {font-size: 28px}
    .px-text-02 {font-size: 24px}
    .px-text-03 {font-size: 22px}
    .px-text-04 {font-size: 19px}
    .px-text-05 {font-size: 18px}
    .px-text-06 {font-size: 17px}
    .px-text-07 {font-size: 16px}
    .px-text-08 {font-size: 15px}
    .px-text-09 {font-size: 14px}
    .px-text-10 {font-size: 13px}
}

@media (max-width: 575px) {
    .modal-header {padding: 1.75rem}
    .modal-header .close {width: 3rem; height: 3rem; margin: -0.5rem 0 auto}
    .modal-title {font-size: 1.5rem}
    .modal-body {padding: 1.75rem}
    .modal-body .notify-container h5 {font-size: 1.1875rem}
}