@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
@import url('https://fonts.cdnfonts.com/css/tt-travels-trl');

:root {
    --pp-purple: #7B62DE;
    --pp-black: #000000;
    --pp-yellow: #FFD232;
    --pp-white: #FFFFFF;
    --pp-dkgrey: #737373;
    --pp-mdgrey: #C4C4C4;
    --pp-ltgrey: #F2F1F5;
    --pp-grey: #F5F5F5;
    --pp-red: #EB4E3D;
    --pp-green: #198754;
    --pp-berry: #B54B65;
    --pp-ltberry: rgba(181, 75, 101, 0.1);
    --pp-blue: #2B2CCE;
    --pp-black-btn-active: #3C3C3C;
    --pp-yellow-orange: #FFBB0B;
    --pp-orange-gradient: linear-gradient(270deg, #FFD232 0%, #FFBB0B 50%);
    --pp-green-gradient: linear-gradient(90deg, #ABD731 0%, #B9E441 100%);
    --pp-main-text-color: var(--pp-black);

    --pp-bc-violet: #7572FF;
    --pp-bc-blue: #26B7FD;
    --pp-bc-light-blue: #17E1EE;
    --pp-bc-green: #00CAA5;
    --pp-bc-deep-green: #53C157;
    --pp-bc-light-green: #B9E441;
    --pp-bc-yellow: #FFD232;
    --pp-bc-orange: #FF9900;
    --pp-bc-deep-orange: #FF810D;
    --pp-bc-pink: #FB439B;
    --pp-bc-purple: #D437FD;
    --pp-bc-red: #FF3434;

    --pp-font-size-focused: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Fira Sans, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body {
    font-size: 16px;
    color: var(--pp-main-text-color);
}

a {
    color: var(--pp-main-text-color);
}

a:active, a:focus,
.btn:active, .btn:focus,
button:active, button:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-radius: var(--bs-border-radius);
}

a.disabled:not(.btn), a[disabled]:not(.btn) {
    pointer-events: none;
    cursor: default;
    color: var(--pp-mdgrey) !important;
}

a.disabled:not(.btn) *, a[disabled]:not(.btn) * {
    color: var(--pp-mdgrey) !important;
}

@media only screen and (hover: none) and (pointer: coarse) {

    input:focus,
    select:focus,
    textarea:focus,
    input[class]:focus,
    select[class]:focus,
    textarea[class]:focus {
        font-size: var(--pp-font-size-focused) !important;
    }
}

.min-h-100 {
    min-height: 100%;
}

.h-2 {
    height: 0.125rem;
}

.td-none {
    text-decoration: none;
}

.hidden {
    display: none !important;
}

.form-control {
    --bs-border-width: .0625rem;
    padding-top: .6875rem;
    padding-bottom: .6875rem;
}

.form-control:disabled {
    color: var(--pp-dkgrey);
    background-color: var(--pp-ltgrey);
}

.form-check-input:checked {
    background-color: var(--pp-purple);
    border-color: var(--pp-purple);
}

.btn-ls-sm {
    letter-spacing: clamp(0rem, .56vw - .125rem, .075rem) !important;
}

.btn-check+.pp-color-picker.btn {
    --bs-btn-border-width: .1875rem;
    --bs-border-radius: 100%;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 1.875rem;
    height: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-check+.pp-color-picker.btn>div {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--accent-color);
    border-radius: 100%;
}

.btn-check:checked+.pp-color-picker.btn {
    --bs-btn-active-border-color: var(--accent-color);
    --bs-btn-active-bg: var(--pp-white);
}

.btn-check:checked+.pp-color-picker.btn>div {
    width: 1.125rem;
    height: 1.125rem;
}

.page-link {
    --bs-pagination-color: var(--pp-black);
    --bs-pagination-bg: var(--pp-white);
    --bs-pagination-hover-color: var(--pp-white);
    --bs-pagination-hover-bg: var(--pp-purple);
    --bs-pagination-active-color: var(--pp-white);
    --bs-pagination-active-bg: var(--pp-purple);
    --bs-pagination-focus-color: var(--pp-white);
    --bs-pagination-focus-bg: var(--pp-purple);
    --bs-pagination-border-radius: .25rem;
    --bs-pagination-border-width: 0;
    border-radius: .25rem;
    margin-left: .5rem;
    margin-right: .5rem;
    font-family: Fira Sans, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-black);
}

.pp-color-circle {
    width: 2rem;
    height: 2rem;
    background-color: var(--accent-color);
    border-radius: 50%;
}

.pp-color-01 {
    --accent-color: var(--pp-bc-violet);
}

.pp-color-02 {
    --accent-color: var(--pp-bc-blue);
}

.pp-color-03 {
    --accent-color: var(--pp-bc-light-blue);
}

.pp-color-04 {
    --accent-color: var(--pp-bc-green);
}

.pp-color-05 {
    --accent-color: var(--pp-bc-deep-green);
}

.pp-color-06 {
    --accent-color: var(--pp-bc-light-green);
}

.pp-color-07 {
    --accent-color: var(--pp-bc-yellow);
}

.pp-color-08 {
    --accent-color: var(--pp-bc-orange);
}

.pp-color-09 {
    --accent-color: var(--pp-bc-deep-orange);
}

.pp-color-10 {
    --accent-color: var(--pp-bc-pink);
}

.pp-color-11 {
    --accent-color: var(--pp-bc-purple);
}

.pp-color-12 {
    --accent-color: var(--pp-bc-red);
}

.progress {
    height: 1.75rem;
    background-color: var(--pp-ltgrey);
}

.progress-bar {
    background-image: var(--pp-green-gradient);
}

.badge {
    --bs-badge-padding-y: 0.4375rem;
    font-family: Fira Sans, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rounded-pill {
    padding: .125rem .5rem;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

input[type='range'] {
    appearance: auto;
    accent-color: var(--pp-yellow);
}

/* .btn[class^='pp-btn-'], .btn[class*=' pp-btn-'] {} */

.pp-btn-black,
.pp-btn-yellow,
.pp-btn-white {
    --bs-btn-padding-y: .84375rem;
    --bs-btn-border-width: 0;
    /* --bs-btn-disabled-color: var(--pp-mdgrey); */
    --bs-btn-disabled-color: var(--pp-black);
    /* --bs-btn-disabled-bg: var(--pp-ltgrey); */
    --bs-btn-disabled-bg: var(--pp-mdgrey);
    --bs-btn-disabled-opacity: 1;
    font-family: 'TT Travels Trl', sans-serif;
    font-size: .875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .075rem;
}

.pp-btn-sm-1 {
    --bs-btn-padding-y: .71875rem;
}

.pp-btn-sm-2 {
    --bs-btn-padding-y: .5625rem;
    font-size: .75rem;
}

.pp-btn-black {
    --bs-btn-color: var(--pp-white);
    --bs-btn-bg: var(--pp-black);
    --bs-btn-hover-color: var(--pp-white);
    --bs-btn-hover-bg: var(--pp-dkgrey);
    --bs-btn-active-color: var(--pp-white);
    --bs-btn-active-bg: var(--pp-black-btn-active);
}

.pp-btn-yellow {
    --bs-btn-color: var(--pp-black);
    --bs-btn-bg: var(--pp-yellow);
    --bs-btn-hover-color: var(--pp-black);
    --bs-btn-hover-bg: var(--pp-yellow);
    --bs-btn-active-color: var(--pp-dkgrey);
    --bs-btn-active-bg: var(--pp-yellow);
}

.pp-btn-yellow:hover, .pp-btn-yellow:active, .pp-btn-yellow:focus {
    background-image: var(--pp-orange-gradient);
}

.pp-btn-white {
    --bs-btn-color: var(--pp-black);
    --bs-btn-bg: var(--pp-white);
    --bs-btn-hover-color: var(--pp-black);
    --bs-btn-hover-bg: var(--pp-ltgrey);
    --bs-btn-active-color: var(--pp-dkgrey);
    --bs-btn-active-bg: var(--pp-ltgrey);
}

.pp-badge-dkgrey {
    background-color: var(--pp-dkgrey);
    color: var(--pp-white);
}

.pp-badge-yellow {
    background-color: var(--pp-yellow);
    color: var(--pp-black);
}

.pp-badge-green-gradient {
    background-image: var(--pp-green-gradient);
    color: var(--pp-black);
}

.pp-badge-orange-gradient {
    background-image: var(--pp-orange-gradient);
    color: var(--pp-black);
}

.pp-badge-purple {
    background-color: var(--pp-purple);
    color: var(--pp-white);
}

.pp-badge-green {
    background-color: var(--pp-green);
    color: var(--pp-white);
}

.pp-badge-ltgrey {
    background-color: var(--pp-ltgrey);
    color: var(--pp-black);
}

.pp-badge-berry {
    background-color: var(--pp-berry);
    color: var(--pp-white);
}

.pp-badge-ltberry {
    background-color: var(--pp-ltberry);
    color: var(--pp-berry);
}

.pp-badge-blue {
    background-color: var(--pp-blue);
    color: var(--pp-white);
}

.pp-badge-alert {
    background-color: var(--pp-ltgrey);
    color: var(--pp-red);
}

.pp-badge-black {
    background-color: var(--pp-black);
    color: var(--pp-white);
}

.pp-badge-small {
    --bs-badge-padding-y: 0.35rem;
    font-size: .75rem;
}

.pp-badge-void {
    --bs-badge-padding-y: 0.5625rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--pp-dkgrey);
    border: 0.0625rem solid var(--pp-dkgrey);
}

.pp-bg-yellow {
    background-color: var(--pp-yellow) !important;
}

.pp-bg-purple {
    background-color: var(--pp-purple) !important;
}

.pp-bg-white {
    background-color: var(--pp-white) !important;
}

.pp-bg-grey {
    background-color: var(--pp-grey) !important;
}

.pp-bg-dkgrey {
    background-color: var(--pp-dkgrey) !important;
}

.pp-bg-ltgrey {
    background-color: var(--pp-ltgrey) !important;
}

.pp-color-white {
    color: var(--pp-white) !important;
}

.pp-color-dkgrey {
    color: var(--pp-dkgrey) !important;
}

.pp-color-mdgrey {
    color: var(--pp-mdgrey) !important;
}

.pp-color-green {
    color: var(--pp-green) !important;
}

.pp-color-purple {
    color: var(--pp-purple) !important;
}

.pp-color-yellow-orange {
    color: var(--pp-yellow-orange) !important;
}

.pp-color-red {
    color: var(--pp-red) !important;
}

.pp-border-yellow {
    border-color: var(--pp-yellow) !important;
}

.pp-border-purple {
    border-color: var(--pp-purple) !important;
}

.pp-border-red {
    border-color: var(--pp-red) !important;
}

.pp-text-heading {
    font-family: 'TT Travels Trl', sans-serif;
    font-weight: 800;
    color: var(--pp-black);
}

.pp-text-h1 {
    font-family: 'TT Travels Trl', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--pp-black);
}

.pp-text-h3 {
    font-family: 'TT Travels Trl', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--pp-black);
}

.pp-text-hs {
    font-family: 'TT Travels Trl', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--pp-black);
}

.pp-text-h7tags {
    font-family: Fira Sans, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    color: var(--pp-black);
}

.pp-text-lead {
    font-family: Fira Sans, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--pp-black);
}

.pp-text-main {
    font-family: Fira Sans, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--pp-black);
}

.pp-text-main-bold {
    font-family: Fira Sans, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pp-black);
}

.pp-text-main-active,
.pp-text-main.pp-nav-active {
    font-family: Fira Sans, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pp-purple);
}

.pp-text-small {
    font-family: Fira Sans, sans-serif;
    font-size: .875rem;
    font-weight: 400;
    color: var(--pp-black);
}

.pp-text-small-dkgrey {
    font-family: Fira Sans, sans-serif;
    font-size: .875rem;
    font-weight: 400;
    color: var(--pp-dkgrey);
}

.pp-text-small-bold {
    font-family: Fira Sans, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-black);
}

.pp-text-title {
    font-family: Fira Sans, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-dkgrey);
    text-transform: uppercase;
}

.pp-text-title-bold {
    font-family: Fira Sans, sans-serif;
    font-size: .9375rem;
    font-weight: 800;
    color: var(--pp-black);
}

.pp-code-cell,
.pp-code-cell:focus {
    max-width: 3.625rem;
    height: 3.625rem;
    padding: .25rem;
    font-family: 'TT Travels Trl', sans-serif;
    font-size: 2rem;
    --pp-font-size-focused: 2rem;
    font-weight: 800;
    color: var(--pp-main-text-color);
    background-color: transparent;
    border-color: var(--pp-mdgrey);
}

.pp-code-cell:valid {
    border-width: .25rem;
    border-color: var(--pp-purple);
}

.pp-input-file-icon {
    width: 5.75rem;
    height: 5.75rem;
    border-radius: .5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.pp-image-icon {
    width: 4rem;
    height: 4rem;
    border-radius: .625rem;
    overflow: hidden;
    flex-shrink: 0;
}

.pp-li-bbn>*:last-child {
    border-bottom: none !important;
}