@charset "utf-8";
/*
 * Name     : px-strap.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-07-27
 * Table of contents
 * ------------------------------------------------------
 * 01) Layout
 * 02) Buttons
 * 03) Inputs
 * 04) Background
 * 05) Modal
 * 06) Tooltips
 * 07) Helpers
 * 08) Media queries
 */

/* *********************************************
 * Layout
 ******************************************** */
.container-wide {padding-left: 20px; padding-right: 20px}
.container, .container-lg, .container-md, .container-sm, .container-xl {padding-left: 20px; padding-right: 20px}

/* *********************************************
 * Buttons
 ******************************************** */
.button {position: relative; display: inline-flex; font-size: 16px; font-weight: 600; color: #666; text-align: center; white-space: nowrap; padding: 0 16px; height: 56px; border: 1px solid transparent; border-radius: 0; background-color: #e9e9e9; align-items: center; justify-content: center; outline: 0 !important; overflow: hidden; transition: .1s}
.button.button--default {color: #495057; border-color: #ced4da; background-color: #fff}
.button.button--dark {color: #fff; background-color: #212529}
.button.button--primary {color: #fff; background-color: #3e78ff}
.button.button--primary.shadow {box-shadow: 0 2px 10px rgba(54,79,199,.24) !important}
.button.button--grey {color: #fff; background-color: #adb5bd}
.button.button--xs {font-size: 13px; padding: 0 8px; height: 42px}
.button.button--sm {font-size: 14px; padding: 0 12px; height: 48px}
.button.button--lg {font-size: 17px; padding: 0 16px; height: 60px}
.button.button--xl {font-size: 18px; padding: 0 24px; height: 64px}
.button--link {display: inline-flex; color: #333 !important; text-decoration: underline !important}
.button--link:hover {text-decoration: underline !important}
a.button-more-plus {display: inline-flex; font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -0.02em; align-items: center}
a.button-more-plus .icon {display: inline-flex; width: 24px; height: 24px; font-size: 18px; margin-left: 10px; border-radius: 50%; background-color: #3e78ff; align-items: center; justify-content: center; transition: transform .3s ease-in-out}
a.button-more-plus:hover .icon {transform: rotate(180deg)}
a.button-more-arrow {display: inline-flex; font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -0.02em; align-items: center}
a.button-more-arrow .icon {position: relative; display: inline-flex; width: 24px; height: 24px; font-size: 18px; margin-left: 10px; align-items: center; justify-content: center; transition: transform .3s ease-in-out; z-index: 5}
a.button-more-arrow .icon::before {content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; background-color: #3e78ff; transform: translateX(8px); transition: transform .3s ease-in-out; z-index: -1}
a.button-more-arrow:hover .icon::before {transform: translateX(0)}

/* *********************************************
 * Inputs
 ******************************************** */
.form-input {display: block; width: 100%; height: 54px; font-size: 1rem; color: #666; letter-spacing: -0.02em; line-height: 1.5; padding: 6px 16px; border: 1px solid #dee2e6; border-radius: 0; outline: 0; transition: .3s}
.form-input:focus {border-color: #3e78ff; box-shadow: 0 0 0 2px #3e78ff}
.form-input::placeholder {color: #868e96}
.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/common/select_dropdown_arrow.svg); background-position: right 1rem center; background-size: 1rem 1rem; background-repeat: no-repeat}
select.form-input::-ms-expand {display: none}
.form-input.input-sm {font-size: 14px; padding: 4px 8px; height: 42px}
.form-input.input-lg {font-size: 16px; padding: 8px 20px; height: 60px}
.form-input.input-xl {font-size: 18px; padding: 10px 28px; height: 68px}
textarea.form-input {height: auto !important; padding: 20px 20px; resize: none !important}
textarea.form-input.input-sm {padding: 8px 8px}
textarea.form-input.input-lg {padding: 24px 24px}
textarea.form-input.input-xl {padding: 32px 32px}
textarea.form-input:read-only {color: #666; border-color: transparent; background-color: #f7f7f7}
.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: 24px; color: #495057; line-height: 1.55; margin-bottom: 0; padding-left: 24px; cursor: pointer}
.px-form-check > label .custom-check {position: absolute; top: 1px; margin: 0 0 0 -24px; 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: 24px; height: 24px; border: 1px solid #dee2e6; 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: 6px; left: 6px; width: 12px; height: 8px; border: 2px solid #333; 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: 16px; font-weight: normal; letter-spacing: -0.02em; padding-left: 8px}
.px-form-check > label span a {font-weight: 600; color: #212529; 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: #666; background-color: #f8f9fa}
.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: #333 !important; background-color: #f8f9fa !important}
.px-form-check > label .custom-check:checked::after {opacity: 1}
.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}

/* *********************************************
 * Background
 ******************************************** */
.bg-cover {background-position: center; background-size: cover; background-repeat: no-repeat}
.bg-grey-light {background-color: #f7f7f7}
.bg-grey-medium {background-color: #f4f4f4}
.bg-grey-dark {background-color: #aaa}

/* *********************************************
 * Modal
 ******************************************** */
.modal-content {border: 0; border-radius: 0}
.modal-header {padding: 24px}
.modal-title {font-size: 24px; font-weight: 600; color: #000; letter-spacing: -0.02em}
.modal-body {padding: 24px}

/* *********************************************
 * 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
 ******************************************** */
.youtube-wrapper {position: relative; padding-bottom: 56.25%; overflow: hidden}
.youtube-wrapper > iframe, .youtube-wrapper > embed, .youtube-wrapper > object {position: absolute; display: block; top: 0; left: 0; width: 100% !important; height: 100% !important}

/* *********************************************
 * Media queries
 ******************************************** */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1340px}
}

@media (min-width: 1680px) {
    .container-wide {padding-left: 80px; padding-right: 80px}
}

@media (max-width: 767px) {
    .form-input {font-size: 14px}
    .px-form-check > label .custom-check::before {width: 22px; height: 22px}
    .px-form-check > label .custom-check::after {top: 7px; width: 10px; height: 6px}
    .px-form-check > label .custom-check {margin: 0 0 0 -22px}
    .px-form-check > label span {font-size: 14px}   
}