/*@font-face {*/
/*    font-family: 'Corporate S';*/
/*    src: url('/fonts/corporates-regular-webfont.eot?') format('eot'),*/
/*    url('/fonts/corporates-regular-webfont.woff') format('woff');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/


:root {
    --font-corporate: "Corporate S", sans-serif;

    --transitiontime: 0.15s;

    --background: #F0F0F0;
    --fontColor: #4C4C4C;
    --signalColor: #8438FF;
    --neutrals-0: #FFFFFF;
    --neutrals-10: #FCFCFC;
    --neutrals-50: #F3F2F8;
    --neutrals-100: #D8D8D8;
    --neutrals-200: #BEBEBE;
    --neutrals-300: #A4A4A4;
    --neutrals-500: #737373;
    --neutrals-600: #5B5B5B;
    --neutrals-700: #454545;
    --neutrals-800: #2F2F2F;
    --neutrals-900: #1C1C1C;

    --accent-700: #732CE7;
    --accent-900: #471894;
    --redorange: #FF4800;
    --accent-redorange: #FF4800;
    --accent-bordeaux: #8B0700;
    --accent-redorange-dark: #BF3600;

    --error: #FF2E00;
    --success: #39DC00;

    --border-radius: 18px;


    --small-font-size: 12px;
    --normal-font-size: 24px;
    --medium-font-size: 48px;
    --large-font-size: 64px;

    --bg1: #000;
    --bg2: #5B5B5B;
    --sticker-size: 120px;
    --dis-top: 2em;
    --tab-color: var(--neutrals-600);


    --z-overlay: 100;
    --z-form: 80;
    --z-sticker: 70;

    --padding-add-button: 50px;
}

html {
    height: 100%;
}

input, textarea {
    font-family: "Alatsi", sans-serif;
    font-weight: 400;
    font-style: normal;
}

p {
    color: var(--neutrals-0);
    font-family: "Alatsi", sans-serif;
    font-weight: 400;
    font-style: normal;
}

button {
    color: var(--neutrals-0);
    font-family: "Alatsi", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    position: relative;
    min-height: 100%;
    font-family: "Alatsi", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: var(--neutrals-50);
    background-color: var(--neutrals-50);
    color: var(--fontColor);
    margin: 0;
    user-select: none;
}

#app {
    height: 100%;
    /* grid container settings */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'main'
}

#bg-image {
    height: 100%;
    width: 100%;
    position: relative;
    background-image: url("/assets/sticker/Backgrounds/Background-Neutral.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: clip;
}


#add-sticker-btn {
    position: absolute;
    bottom: var(--padding-add-button);
    right: var(--padding-add-button);
    cursor: pointer;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 1));
}

sticker-grid[data-state="closed"] {
    /*display: none;*/
    pointer-events: none;
}

sticker-grid[data-state="half-open"] {
    /* Show left panel only */
    pointer-events: none;
}

sticker-grid[data-state="open"] {
    /* Show both panels */
}