*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}
:root{
    --border-color:#e6e6e6;
    --border-color-dark: #2b2d30;
    --main-background: var(--main-bg);
    --background-color-op: rgb(255 255 255 / 30%);
    --card-background: var(--main-bg);
    /* --button-background: #219b74; */
    --input-bg:var(--disabled-background-1);
    --button-background: var(--main-color);
    --button-outline: var(--main-color-op);
    --disabled-background-1: #c6c6c624;
    --disabled-background-1-hold: #F7F7F7;
    --card-background-2: var(--disabled-background-1);
    --card-specific:#07080a;
    --card-background-2-li: #f7f7f7;
    --disabled-background-2: #fff;
    --text-color-priority-1: #000;
    --inv-text-color-priority-1: #fff;
    --text-color-priority-2: #7a7a7a;
    --text-color-title-1: #0e395d;
    --nav-bar:rgb(255 255 255 / 80%);
    --nav-bar-fixed:rgb(255 255 255 / 80%);
    /* Tabs color for website */
    /* TAB1 */
    --tabs-1-bg: #0094ff;
    --tabs-1-bg-lighter: #a8d3ff;
    --tabs-1-bg-darker: #10416e;
    --tabs-1-TC-dark: #001D3E;
    --tabs-1-TC-light: #D5E1EE;
    --tabs-1-bg-op: #0094ff69;
    /* TAB2 */
    --tabs-2-bg: #8e7ae6;
    --tabs-2-bg-lighter: #d0c9f5;
    --tabs-2-bg-darker: #3e3764;
    --tabs-2-TC-dark: #1A1636;
    --tabs-2-TC-light: #E0DEEB;
    --tabs-2-bg-op: #8e7ae669;
    /* TAB3 */
    --tabs-3-bg: #ff7a8a;
    --tabs-3-bg-lighter: #ffc9cf;
    --tabs-3-bg-darker: #6d363e;
    --tabs-3-TC-dark: #3A1119;
    --tabs-3-TC-light: #EEDDE0;
    --tabs-3-bg-op: #ff7a8a69;
    /* TAB4 */
    --tabs-4-bg: #4CAF50;
    --tabs-4-bg-lighter: #A5D6A7;
    --tabs-4-bg-darker: #244C28;
    --tabs-4-TC-dark: #042208;
    --tabs-4-TC-light: #D9E3D9;
    --tabs-4-bg-op: #4CAF5069;
    /* Based on tabs selection */
    --main-color: var(--tabs-1-bg);
    --main-color-li: var(--tabs-1-bg-lighter);
    --main-color-op: var(--tabs-1-bg-op);
    /* COLOR SKILLS */
    --skill-1:#466C9C;
    --skill-1-op:#466C9C69;
    --skill-2:#00aa44;
    --skill-2-op:#00aa4469;
    --skill-3:#ff4400;
    --skill-3-op:#ff440069;
    /* Error & Success */
    --error: #ff4400;
    --error-2: #F5D6D7;
    --error-border: #cc3700;
    --success: #D6F5D7;
    --success-border: #a3d9a5;
    --success-label-background: #1e5c6a1f;
    --success-label-color: #1e5c6a;
    /* Categories */
    --scaled-bg:#FEF4AF;
    --scaled-color:#733619;
    --rx-bg: #E0EEFE;
    --rx-color: #3352A9;
    --inter-bg: #DCF6EB;
    --inter-color: #1F6B53;
    --elite-bg: #FFE5E5;
    --elite-color: #A63636;
    --teens-bg: #FFE8CC;
    --teens-color: #B25C00;
    --master-bg: #F1E7FF;
    --master-color: #5A3EAA;
    /* Tag */
    --beta-label-background: #ff92001f;
    --beta-label-color: #ff9200;
    --challenge-label-background: #1e5c6a1f;
    --challenge-label-color: #1e5c6a;
    --default-label-background: #435a5f1f;
    --default-label-color: #435a5f;
    --partner-label-background: #b07cec1f;
    --partner-label-color: #b07cec;
    --ambassador-label-background: #ffeb3b1f;
    --ambassador-label-color: #ffeb3b;
    --article-label-background: #ff009020;
    --article-label-color: #ff0090;
    --new-label-color: #008C4A;
    --new-label-background: #008C4A20;
    /* ---- */
    --grad1: var(--main-color-li);
    --grad2: var(--main-color);
    --grad3: #b07cec;
    --grad-text: var(--main-color);
}
::selection {background: var(--main-color-op)}
.toggle_dark_mode{
    --main-bg:#060709;
    --main-color: #fff;
    --text-color-priority-1: #fff;
    --inv-text-color-priority-1: #000;
    --text-color-title-1: #b5f2ff;
    --border-color: #2b2d30;
    --card-background-2-li: #212224;
    --input-bg:#101214;
    --disabled-background-1: #4a4a4a24;
    --disabled-background-1-hold: #0F1012;
    --disabled-background-2: #000;
    --nav-bar:rgb(0 0 0 / 80%);
    --nav-bar-fixed:rgb(0 0 0 / 50%);
    /* Tag */
    --new-label-color: #47FF91;
    --new-label-background: #47FF9120;
    --default-label-background: #b5f2ff1f;
    --default-label-color: #b5f2ff;
    --challenge-label-background: #48ddff1f;
    --challenge-label-color: #48ddff;
    /* ---- */
    --grad-text: var(--main-color-li);
}

.wrapper-card::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.card-creation::-webkit-scrollbar{
    width: 1.3em;
    height: 0;
}
/* .title-card::-webkit-scrollbar{
    height: .4em;
} */

.wrapper-card::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
/* .title-card::-webkit-scrollbar-thumb, */
.card-creation::-webkit-scrollbar-thumb{
    height: 1em;
    border: 0.5em solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
}
/* 
.title-card::-webkit-scrollbar-track {
    background: transparent;
    padding: 1em;
} */

.wrapper-card::-webkit-scrollbar-button,
textarea::-webkit-scrollbar-button,
.title-card::-webkit-scrollbar-button,
.card-creation::-webkit-scrollbar-button{
    width: 0;
    height: 0;
    display: none;
}
.wrapper-card::-webkit-scrollbar-corner,
textarea::-webkit-scrollbar-corner,
.title-card::-webkit-scrollbar-corner,
.card-creation::-webkit-scrollbar-corner {
    background-color: transparent;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--height-header) + var(--margin-from-header));
    background: var(--main-bg);
}

body{
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    width: 100%;
    font-size: 1.1em;
}