/* @import url(../fontawesome-free-6.5.2-web/webfonts/fa-solid-900.ttf); */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@font-face {
    font-family: 'Outfit';
    src: url(../font/Outfit/Outfit-VariableFont_wght.ttf);
}

:root {
    --background: #EDEDED;
    --text: #000000;
    --text-secondary: #23396Cff;
    --text-secondary-light: #eaeffaff;
    --accent: #48cff4;
    --bg-color-secondary: #fdf6eaff;
    --bg-color: #fcf8f1ff;
    --negative: #C72F2Fff;
    --navbar-bg-color: #ffffff;
    --button-color: #101010;
    --button-hover-color: #101010;
    --bordor-color: #38b000;
    --button-text-color: #fff;
    --color: #fff;
    --category-icon-color: #1B4242;
    --category-bg-color: #f0f0f0;
    /* CSS HSL */
    --oxford-blue: hsla(245, 100%, 8%, 1);
    --oxford-blue-2: hsla(222, 51%, 28%, 1);
    /* --text-secondary-opaque: hsla(222, 51%, 28%, 0.1); */
    --text-secondary-opaque: #E8E8EEff;
    --text-secondary-border: hsla(222, 51%, 28%, 0.25);
    --orange-web: hsla(37, 98%, 53%, 1);
    --accent-shadow: hsla(37, 98%, 53%, 0.2);
    /* --platinum: hsla(0, 0%, 90%, 1); */
    --bg-secondary-opaque: hsla(38, 83%, 95%, 0.2);
    --persian-red: hsla(0, 62%, 48%, 1);
}


/* ---------------------------------Common----------------------------------------- */

html,
body,
*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    color: var(--text);
    font-family: 'Outfit', Arial, Helvetica, sans-serif;
}

body {
    background-color: var(--background);
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
    opacity: 0.8;
}

::-webkit-scrollbar-thumb:hover {
    opacity: 1;
}

.material-symbols-outlined {
    font-size: 1.2em;
    font-weight: inherit;
    vertical-align: sub;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    position: relative;
}

img {
    position: relative;
    width: 100%;
}

input:focus-visible {
    outline: none;
}

input[type=file] {
    display: none;
}

.file-input-label {
    background: var(--accent);
    padding: 0.5em 1em;
    margin: 0 1em;
    border-radius: 2em;
    /* margin-top: 1em; */
    cursor: pointer;
}

button {
    background: transparent;
    border: none;
}

.qr-btn {
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 2em;
    transition: all 0.2s linear;
    padding: 0.5em 1em;
    min-width: 5em;
    cursor: pointer;
}

.qr-btn:hover {
    background: var(--accent);
}

.btn {
    position: relative;
    margin: auto;
    padding: 0.5rem;
    transition: all 0.2s ease;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    background: transparent;
}

.btn:before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    display: block;
    border-radius: 20em;
    background: var(--accent);
    width: 1.5em;
    height: 1.5em;
    transition: all 0.3s ease;
}

.btn span {
    position: relative;
    font-size: 1rem;
    /* line-height: 1em; */
    font-weight: 600;
    /* text-transform: uppercase; */
    vertical-align: middle;
    padding: 0.5em;
}

.btn:hover:before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--accent);
}

.btn:active {
    transform: scale(0.96);
}

.btn.small-btn {
    font-size: 0.8em;
}