a {
    text-decoration: none;
    color: inherit;
}

a:link,
a:visited,
a:active,
a:hover {
    color: var(--accent);
}

p {
    margin: 0;
}


.text0 {
    font-size: 50px;
    line-height: 55px;
    font-weight: bold;
}

.text1 {
    text-wrap: wrap;
    font-size: 32px;
    line-height: 39px;
    font-weight: 500;
}

.text2 {
    font-size: 24px;
    line-height: 29px;
    font-weight: 300;
}

.text3 {
    font-size: 20px;
    line-height: 29px;
    font-weight: 300;
}

.text4 {
    font-size: 16px;
    font-weight: 300;
}

.text5 {
    font-size: 12px;
    font-weight: 300;
}

@media (max-width: 660px) {
    .text1 {
        font-size: 24px;
        line-height: 29px;
    }

    .text2 {
        font-size: 18px;
        line-height: 22px;
    }

    .text3 {
        font-size: 16px;
        line-height: 20px;
    }

    .text4 {
        font-size: 14px;
        line-height: 18px;
    }

    .text5 {
        font-size: 11px;
        line-height: 14px;
    }
}



::-webkit-scrollbar {
    width: 8px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--gray300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--gray400);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 24px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray500);
    cursor: grabbing;
}

::-webkit-scrollbar-thumb:active {
    background: var(--gray500);
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-corner {
    display: none;
}


button, .button, .button2 {
    color: var(--white);
    background-color: var(--accent);
    min-height: 40px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 0 16px;
    margin: 0;
    border: none;
    border-radius: 4px;
    white-space: nowrap;
    user-select: none;
    gap: 8px;
    cursor: pointer;
}

button{
    background-color: var(--green);
}

@media (max-width: 660px) {
    button:not(.desktop), .button:not(.desktop), .button2:not(.desktop){
        font-size: 0;
        gap:0;
    }
}

button:active:not([disabled]),
.button:active:not([disabled]),
.button2:active:not([disabled]) {
    color: var(--gray400);
    background: var(--gray200);
}

.button2 {
    background: none;
    outline: 2px solid var(--accent);
}

.button2:hover:not([disabled]) {
    background: var(--accent);
}

button[disabled],
.button[disabled],
.button2[disabled],
form[disabled] button,
form[disabled] .button,
form[disabled] .button2{
    color: var(--gray400);
    background: var(--gray200);
    cursor: default;
    pointer-events: none;
    outline: none;
}


input:not([type="checkbox"]),
textarea,
md-select,
md-autocomplete{
    color: var(--white);
    outline: 2px solid var(--gray300);
    background: var(--gray100);
    border-radius: 4px;
    border: none;
    line-height: 40px;
    width: 100%;
    height: 40px;
}

input:not([type="checkbox"]),
textarea,
md-select,
md-autocomplete input{
    padding: 0 15px;
}
input:not([type="checkbox"]):focus,
textarea:focus,
md-select:focus,
md-autocomplete input:focus{
    outline: 2px solid var(--gray500);
}

input:not([type="checkbox"])::placeholder,
textarea::placeholder,
md-select .md-select-value.md-select-placeholder{
    color: var(--gray300);
}


[ng-click],
[ui-sref] {
    cursor: pointer;
    user-select: none;
}

input[disabled],
md-select[disabled] {
    background-color: var(--disabled) !important;
}


input[type="checkbox"] {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: var(--gray100);
    border-radius: 4px;
    accent-color: var(--accent);
    appearance: none;
    -webkit-appearance: none;
    outline: 2px solid var(--gray300);
}

input[type="checkbox"]:checked {
    appearance: auto;
    -webkit-appearance: auto;
}



button.pay,
.button.pay,
button.black,
.button.black,
button.green,
.button.green,
button.blue,
.button.blue,
button.red,
.button.red {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: 25px;
    transition: background-position 0.3s ease, transform 0.2s ease;
}

button.pay,
.button.pay {
    background: linear-gradient(90deg, var(--accent) 0%, var(--pay) 50%, var(--pay) 100%) left top / 200% auto;
}

button.black,
.button.black {
    background: linear-gradient(90deg, var(--gray100) 0%, var(--black) 50%, var(--black) 100%) left top / 200% auto;
}

button.green,
.button.green {
    background: linear-gradient(90deg, var(--gray100) 0%, var(--green) 50%, var(--green) 100%) left top / 200% auto;
}

button.blue,
.button.blue {
    background: linear-gradient(90deg, var(--gray100) 0%, var(--accent) 50%, var(--accent) 100%) left top / 200% auto;
}

button.red,
.button.red {
    background: linear-gradient(90deg, var(--gray100) 0%, var(--red) 50%, var(--red) 100%) left top / 200% auto;
}

button.pay:hover,
.button.pay:hover,
button.black:hover,
.button.black:hover,
button.green:hover,
.button.green:hover,
button.blue:hover,
.button.blue:hover,
button.red:hover,
.button.red:hover {
    background-position: right center;
}