*,
 ::before,
 ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

:root {
    --w: #fff;
    --b: #2a2e35;
    --scrollbar: #5f5f61;
    --border1: 5px;
    --border2: 15px;
    --marg1: 15%;
    --marg2: 5%;
    --gap1: 15px;
    --inseta: 10px;
    --insetb: -10px;

    --main-color: #817DE0;
    --span : #75c745;
    --span-font : #4ea41c;
    --main-color-gradient: rgba(68, 58, 255, 0.67);
    --main-color-in-use: #59689D;
    --main-color-bright: #9F7DE0;
    --secondary-color: #7DDAE0;
    --secondary-color-op: #7ddae021;
    --secondary-color-dark: #57989D;

    --disable: #fe5b5b;

    --admin-background : #97decf;
    --admin-color : #3369ba;

    --grey-container:#ededed;
    --grey-border:#e2e2e2;
    --grey-font:#828282;

    --border-radius-admin : 6px;
    --width_600px-admin:100%;

    --width:45%;
    --width_600px:90%;
    --height_600px:90%;
    --width_summary:30%;
    --gap_summary : 2em;
    --width_header_summary: calc(var(--width) + var(--width_summary) + var(--gap_summary));

    --bg_note_yellow : rgb(252, 255, 166);
    --bg_note_pink : rgb(240, 217, 255);
    --bg_note_blue : rgb(181, 222, 255);
    --bg_note_green : rgb(193, 255, 215);

    --title_layer:#410a78;
}

.dark_mode{
    --w: #2a2e35;
    --b: #fff;

    --title_layer: #a964ee;

    --grey-container: #20252c;
    --grey-border: #596b8c;
    --grey-font: #828282;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 1em;
    background: var(--w);
    transition: all .8s;
}
.table_content_add::-webkit-scrollbar {
    width: 1em;
    background: var(--w);
    transition: all .8s;
}
.container_last_search_element::-webkit-scrollbar {
    width: .6em;
    height: .8em;
    background: var(--grey-container);
    transition: all .8s;
}
textarea::-webkit-scrollbar {
    max-width: 15px;
    background: var(--w);
    transition: all .8s;
}

::-webkit-scrollbar-thumb {
    --scrollbar : #c4c4c4;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: var(--border2);
    border-radius: var(--border2);
    background-color: grey;
    -webkit-box-shadow: inset var(--insetb) var(--insetb) 0 var(--scrollbar), inset var(--inseta) var(--inseta) 0 var(--scrollbar);
    box-shadow: inset var(--insetb) var(--insetb) 0 var(--scrollbar), inset var(--inseta) var(--inseta) 0 var(--scrollbar);
    height: 20px;
    cursor: pointer;
    transition: all .8s;
}

.body-overflow{
    overflow: hidden!important
}