@charset "utf-8";
/*
* Name : px-strap.css
* Version : 1.1
* Author : onepixel studio
* Date : 2023-04-07
* Table of contents
* ------------------------------------------------------
* 01) Layout
* 02) Buttons
* 03) Heading text
* 04) Body text
* 05) Inputs
* 06) Tables
* 07) Backgrounds
* 08) Modals
* 10) Tooltips
* 11) Helpers
* 12) Alerts
* 13) Animations
* 14) 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: var(--primary)}
.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}
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: var(--primary); 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: var(--primary); transform: translateX(8px); transition: transform .3s ease-in-out; z-index: -1}
a.button-more-arrow:hover .icon::before {transform: translateX(0)}
button.close {padding: 0;background-color: transparent;border: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;opacity: 0.5;}
button.close i {font-size: 24px;}
/* *********************************************
* Heading text
******************************************** */
/* *********************************************
* Body text
******************************************** */
/* *********************************************
* Inputs
******************************************** */
.form-group {margin-bottom: 1rem;}
.form-input {display: block; width: 100%; height: 54px; font-size: 15px; 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: var(--primary); box-shadow: 0 0 0 2px var(--primary)}
.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-100); 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
******************************************** */
/* *********************************************
* Backgrounds
******************************************** */
.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}
/* *********************************************
* Modals
******************************************** */
.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}
/*
.modal-backdrop {background-color: #999}
.modal-backdrop.show {opacity: .4}
.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}
/* *********************************************
* 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}
/* *********************************************
* Alerts
******************************************** */
/* *********************************************
* 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) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1280px;padding:0}
}
@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}
}
@media (max-width: 575px) {
}