[data-theme = "light"] {
    --title-page-bc: rgb(52, 52, 52);
    --title-page-color: rgb(255, 255, 255);

    --creation-form-container-border-color: rgb(52, 52, 52);
    --creation-form-container-bc: rgba(255, 255, 255, 0.95);
    --creation-form-row-border-color: rgb(62, 62, 62);
    --creation-form-row-bc: rgb(255, 255, 255);
    --creation-form-col-bc: rgba(196, 196, 196, 0.4);
    --creation-form-col-h2-bc: rgb(52, 52, 52);
    --creation-form-col-h2-color: rgb(255, 255, 255);

    --varChar-creation-col-b: url('icons_images/fountain_pen_00_transparent.png') no-repeat center, url('icons_images/cat_yoga_transparent_background_left.png') no-repeat left bottom;
    --varChar-creation-col-bs: contain, 2.75rem;
    --varChar-creation-col-bc: transparent;
    --varchar-number-list-label-bc: rgba(255, 255, 255, 0.9);

    --number-creation-col-b: url('icons_images/natural_number.png') no-repeat center, url('icons_images/cat_yoga_transparent_background_grey_light_stand_up.png') no-repeat center bottom;
    --number-creation-col-bs: contain, 2.75rem;

    --list-col-b: url('icons_images/list_00_transparent.png') no-repeat center, url('icons_images/cat_yoga_transparent_background_inverse_lighter.png') no-repeat right bottom;
    --list-col-bs: contain, 10%;

    --image-file-col-img-border-color: rgb(135, 135, 135);
    --image-file-col-img-back-color: rgb(241, 241, 241);
    --image-file-col-a-color: rgb(32, 32, 32);
    --image-file-col-a-bc: transparent;
    --image-file-col-a-hover-bc: rgb(52, 52, 52);
    --image-file-col-a-hover-color: rgb(255, 255, 255);

    --credit-border-color: rgb(240, 240, 240);
    
    --list-label-box-bc: rgba(255, 255, 255, 0.95);
    --list-label-box-color: rgb(32 32, 32);

    --input-bc: rgb(255, 255, 255);
    --input-border-color: rgba(32, 32, 32, 0.2);
    --input-color: rgba(32, 32, 32, 0.8);
    --input-focus-color: rgb(244, 244, 244);
    --input-focus-border-color: rgba(253, 104, 94, 0.97);
    --input-hover-back-color: rgb(255, 255, 255);

    --image-file-box-back-color: rgb(241, 241, 241);
    --image-file-box-color: rgba(32, 32, 32, 0.8);
    --imageFile-bc: rgb(32, 32, 32);
    --image-file-box-hover-bc: rgba(253, 104, 94, 0.5);
    --image-file-col-url: url('icons_images/image_file_transparent.png') no-repeat center;

    --line-through-elt-color: rgb(207, 207, 207);
    --line-through-elt-box-border-color: rgb(255, 255, 255);
    --line-through-elt-box-span-bc: rgba(42, 42, 42, 0.9);
    --line-through-elt-checked-color: rgb(247, 247, 247);
    --line-through-elt-box-span-hover-bc: rgba(253, 104, 94, 0.8);
    --line-through-elt-box-span-hover-color: rgb(255, 255, 255);
    --line-through-elt-box-checked-bc: rgba(253, 104, 94, 0.95);
    --line-through-elt-box-checked-hover-bc: rgba(253, 104, 94, 0.95);
    --line-through-elt-box-checked-hover-color: rgb(255, 255, 255);

    --submit-box-input-hover-bc: rgb(255, 92, 80);
    --submit-box-input-hover-color: rgb(255, 255, 255);

    --back-to-last-page-color: rgb(26, 26, 26);
    --back-to-last-page-bc: rgb(255, 255, 255);
    --back-to-last-page-border-width: 2px;
    --back-to-last-page-hover-border-color: rgb(255, 92, 80);
    --back-to-last-page-hover-border-width: 2px;
    --back-to-last-page-hover-color: rgb(255, 92, 80);

    --no-integration-color: rgb(32, 32, 32);

    --textarea-bc: rgb(255, 255, 255);
    --textarea-color: rgb(32, 32, 32);
    --textarea-border-color: rgba(32, 32, 32, 0.3);
    --textarea-focus-back-color: rgba(255, 255, 255, 0.97);
    --textarea-focus-color: rgb(22, 22, 22);
    --textarea-focus-border-color: rgb(253, 104, 94);
    --description-label-bc: rgba(218, 218, 218, 0.8);
    --textarea-hover-back-color : rgba(255, 255, 255, 0.97);

    --feature-button-bc: rgb(52, 52, 52);
    --feature-button-border-color: rgb(255, 255, 255);
    --feature-button-color: rgb(255, 255, 255);
    --feature-button-hover-shadow-color: rgb(253, 104, 94);
    --feature-button-hover-color: rgb(255, 255, 255);
    --feature-button-hover-border-color: rgb(255, 255, 255);

    --here-a-cat-right-pen-b: url('icons_images/fountain_pen_00_transparent.png') no-repeat center, url('icons_images/cat_yoga_transparent_background_inverse_lighter.png') no-repeat bottom right;
    --here-a-cat-right-pen-bs: contain, 10%;
    --here-a-cat-right-image-b: url('icons_images/image_file_transparent.png') no-repeat center, url('icons_images/cat_yoga_transparent_background_inverse_lighter.png') no-repeat bottom right;
    --here-a-cat-right-image-bs: contain, 10%;
}

[data-theme = "dark"] {
    --title-page-bc: rgb(28, 28, 28);
    --title-page-color: rgb(209, 209, 209);

    --creation-form-container-border-color: rgb(28, 28, 28);
    --creation-form-container-bc: rgba(30, 30, 30, 0.95);
    --creation-form-row-border-color: rgb(10, 10, 10);
    --creation-form-row-bc: rgb(30, 30, 30, 0.95);
    --creation-form-col-bc: rgb(125, 125, 125, 0.8);
    --creation-form-col-h2-bc: rgb(36, 36, 36);
    --creation-form-col-h2-color: rgb(180, 180, 180);

    --image-file-box-back-color: rgb(132, 132, 132);
    --image-file-box-color: rgb(32, 32, 32);
    --image-file-col-img-border-color: rgb(163, 163, 163);
    --image-file-col-img-back-color: rgb(241, 241, 241);

    --varChar-creation-col-b: url('icons_images/fountain_pen_00_transparent.png') no-repeat center;
    --varChar-creation-col-bs: contain;
    --number-creation-col-b: url('icons_images/natural_number.png') no-repeat center;
    --number-creation-col-bs: contain;

    --list-col-b: url('icons_images/list_00_transparent.png') no-repeat center;
    --list-col-bs: contain;
    --varchar-number-list-label-bc: rgba(134, 134, 134, 0.92);
    --list-label-box-bc: rgba(55, 55, 55, 0.95);
    --list-label-box-color: rgb(167, 166, 166);

    --image-file-col-a-color: rgb(255, 232, 216);
    --image-file-col-a-bc: rgb(52, 52, 52);
    --image-file-col-a-hover-bc: rgb(47, 255, 141);
    --image-file-col-a-hover-color: rgb(32, 32, 32);
    --imageFile-bc: rgb(42, 42, 42);
    --image-file-box-hover-bc: rgba(0, 255, 195, 0.3);
    --image-file-col-url: url('icons_images/image_file_transparent.png') no-repeat center;

    --credit-border-color: rgb(99, 99, 99);

    --input-bc: rgb(130, 130, 130);
    --input-border-color: rgb(45, 45, 45);
    --input-color: rgb(25, 25, 25);
    --input-focus-color: rgb(29, 29, 29);
    --input-focus-border-color: rgb(200, 200, 200);
    --input-hover-back-color: rgb(200, 200, 200);

    --line-through-elt-color: rgb(240, 240, 240);
    --line-through-elt-box-border-color: rgb(100, 100, 100);
    --line-through-elt-box-span-bc: rgba(42, 42, 42, 0.7);
    --line-through-elt-box-span-hover-bc: rgb(47, 255, 141);
    --line-through-elt-box-span-hover-color: rgb(32, 32, 32);
    --line-through-elt-box-checked-bc: rgba(47, 255, 141, 0.9);
    --line-through-elt-box-checked-hover-bc: rgb(47, 255, 141);
    --line-through-elt-box-checked-hover-color: rgb(32, 32, 32);
    --line-through-elt-checked-color: rgb(32, 32, 32);

    --submit-box-input-hover-bc: rgb(47, 255, 141);
    --submit-box-input-hover-color: rgb(32, 32, 32);

    --back-to-last-page-color: rgb(240, 240, 240);
    --back-to-last-page-bc: rgb(32, 32, 32);
    --back-to-last-page-border-width: 2px;
    --back-to-last-page-hover-color: rgb(47, 255, 141);
    --back-to-last-page-hover-border-color: rgb(47, 255, 141);
    --back-to-last-page-hover-border-width: 2px;

    --no-integration-color: rgb(252, 232, 216);

    --textarea-bc: rgb(130, 130, 130);
    --textarea-color: rgb(17, 17, 17);
    --textarea-border-color: rgb(43, 43, 43);
    --textarea-focus-color: rgb(14, 14, 14);
    --textarea-focus-border-color: rgb(200, 200, 200);
    --textarea-focus-back-color: rgb(200, 200, 200);
    --description-label-bc: rgba(125, 125, 125, 0.8);
    --textarea-hover-back-color : rgb(200, 200, 200);

    --feature-button-bc: rgb(42, 42, 42);
    --feature-button-border-color: rgb(180, 180, 180);
    --feature-button-color: rgb(180, 180, 180);
    --feature-button-hover-shadow-color: rgb(47, 255, 141);
    --feature-button-hover-color: rgb(252, 232, 216);
    --feature-button-hover-border-color: rgb(47, 255, 141);

    --here-a-cat-right-pen-b: url('icons_images/fountain_pen_00_transparent.png') no-repeat center;
    --here-a-cat-right-pen-bs: contain;
    --here-a-cat-right-image-b: url('icons_images/image_file_transparent.png') no-repeat center;
    --here-a-cat-right-image-bs: contain;
}

#title-page
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 0.3rem;
    background-color: var(--title-page-bc);
    width: 30%;
    min-width: 230px;
    color: var(--title-page-color);
    border-radius: 3px 3px 0 0;
}

#title-page h1
{
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    text-align: center;
}

#title-page-middot
{
    margin-left: 1.7rem;
    margin-right: 1.7rem;
}

#creation-form
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#creation-form-container
{
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    width: 100%;
    min-width: 280px;
    border: 3px solid var(--creation-form-container-border-color);
    border-radius: 3px;
    margin-bottom: 0.5rem;
    background-color: var(--creation-form-container-bc);
    padding: 0.5rem;
}

.creation-form-container-bind-elts
{
    flex-direction: column;
}

#creation-form-container #bind-themes-no-remove
{
    margin: 0.3rem auto 0 auto;
    font-style: italic;
    color: rgb(52,52,52);
    font-size: 0.9rem;
}

.creation-form-row
{
    display: flex;
    justify-content: center;
    flex: 1;
    border: 1px solid var(--creation-form-row-border-color);
    padding: 0.5rem;
    background-color: var(--creation-form-row-bc);
    margin: 0.3rem;
}

.varChar-creation-col
{
    background: var(--varChar-creation-col-b);
    background-size: var(--varChar-creation-col-bs);
}

.image-file-col
{
    position: relative;
    background: var(--image-file-col-url);
    background-size: contain;
}

.image-file-col #credit
{
    position: absolute;
    right: 0.5rem;
    bottom: 2.3rem;
    background-color: rgb(52, 52, 52);
    border: 2px solid var(--credit-border-color);
    color: rgb(240, 240, 240);
    min-width: 230px;
    width: 50%;
    border-radius: 3px;
    outline: none;
    padding: 0.2rem;
    font-size: 0.8rem;
    text-align: center;
    font-style: italic;
    transition: 0.3s ease-in-out;
}

.image-file-col img[alt]
{
    font-size: 0.3rem;
}

.number-creation-col
{
    background: var(--number-creation-col-b);
    background-size: var(--number-creation-col-bs);
}

.list-col
{
    background: var(--list-col-b);
    background-size: var(--list-col-bs)
}

.here-a-cat-right-image
{
    background: var(--here-a-cat-right-image-b);
    background-size: var(--here-a-cat-right-image-bs);
}

.here-a-cat-right-pen
{
    background: var(--here-a-cat-right-pen-b);
    background-size: var(--here-a-cat-right-pen-bs);
}

.list-col h2 span
{
    font-size: 0.85rem;
    font-weight: normal;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.creation-form-col
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 18rem;
    flex: 1;
    min-width: 320px;
    background-color: var(--creation-form-col-bc);
    border-radius: 3px;
}

.creation-form-col h2
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-top: 0.2rem;
    padding: 0.5rem;
    width: 70%;
    min-width: 250px;
    background-color: var(--creation-form-col-h2-bc);
    border-radius: 3px 3px 0 0;
    font-size: 1.1rem;
    text-align: center;
    color: var(--creation-form-col-h2-color);
}

.creation-form-col h2 span
{
    font-size: 0.75rem;
    font-weight: normal;
    font-style: italic;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.image-file-col img
{
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    width: 14%;
    background-color: var(--image-file-col-img-back-color);
    border-radius: 3px;
    border: 3px solid var(--image-file-col-img-border-color);
    padding: 0.3rem;
}

.image-file-col a
{
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--image-file-col-a-color);
    background-color: var(--image-file-col-a-bc);
    padding: 0.3rem;
    border-radius: 3px;
    font-weight: 700;
}

.image-file-col a:hover
{
    background-color: var(--image-file-col-a-hover-bc);
    color: var(--image-file-col-a-hover-color);
}

.list-col h2
{
    background-color: rgb(36, 36, 36);
    padding-bottom: 0.3rem;
}

.varChar-label-box, .number-label-box, .list-label-box
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 70%;
    min-width: 250px;
    background-color: var(--varchar-number-list-label-bc);
    border-radius: 0 0 3px 3px;
}

.list-label-box
{
    background-color: var(--list-label-box-bc);
    color: var(--list-label-box-color);
    
    border: none;
}

.list-sections-box
{
    text-align: center;
    font-size: 1rem;
}

.list-sections-box:hover
{
    cursor: pointer;
}

.varChar-label-box input, .number-label-box #inputNumber
{
    display: flex;
    background-color: var(--input-bc);
    border: 2px solid var(--input-border-color);
    font-size: 1.2rem;
    outline: none;
    transition: 0.3s;
    min-width: 230px;
    width: 70%;
    border-radius: 3px;
    padding: 0.2rem;
    font-size: 0.9rem;
    text-align: center;
    font-weight: bold;
    color: var(--input-color);
}

.varChar-label-box input:hover {
    background-color: var(--input-hover-back-color);
}

.varChar-label-box input:focus, .number-label-box #inputNumber:focus, #credit:focus
{
    border: 4px solid var(--input-focus-border-color);
    background-color: var(--input-focus-border-color);
    font-weight: bold;
    color: var(--input-focus-color);
}

.image-label-box input:focus
{
    border: 1px solid blue;
}

.image-file-box
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: transparent;
    width: 100%;
    height: 100%;
}

.image-file-box h2
{
    width: fit-content;
    border-radius: 3px;
    background-color: var(--image-file-box-back-color);
    color: var(--image-file-box-color);
    padding: 0.5rem;
}

#hide-overflow
{
    display: flex;
    overflow-x: hidden;
    width: 240px;
}

#imageFile
{
    color: rgb(240, 240, 240);
    background-color: var(--imageFile-bc);
    width: 100%;
}

.image-file-box:hover
{
    cursor: pointer;
    background-color: var(--image-file-box-hover-bc);
}

#theme-options-box
{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

#theme-options-box .line-through-elt-box, #theme-options-box .line-through-elt-box span
{
    border-radius: 3px;
}

#sections-choice-label
{
    margin-right: 0.2rem;
}

.line-through-elt-container
{
    display: flex;
    flex: 1;
    width: 100%;
    text-decoration: none;
}

.line-through-elt-box
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
    font-size: 1.2rem;
    border: 2px solid var(--line-through-elt-box-border-color);
    color: var(--line-through-elt-color);
    border-radius: 3px;
}

.line-through-elt-box input
{
    display: none;
    width: 0;
    height: 0;
}

.line-through-elt-box span
{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: line-through;
    letter-spacing: 0.3rem;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0.5rem 2rem;
    background-color: var(--line-through-elt-box-span-bc);
}

.line-through-elt-box span:hover
{
    font-weight: 700;
    background-color: var(--line-through-elt-box-span-hover-bc);
    color: var(--line-through-elt-box-span-hover-color);
}

.line-through-elt-box input:checked ~ span
{
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.3rem;
    word-spacing: 0.3rem;
    color: var(--line-through-elt-checked-color);
    background-color: var(--line-through-elt-box-checked-bc);
    border-radius: 3px;
}

.line-through-elt-box input:checked ~ span:hover
{
    font-weight: 700;
    background-color: var(--line-through-elt-box-checked-hover-bc);
    color: var(--line-through-elt-box-checked-hover-color);
}

.line-through-elt-box input:checked ~ span::after
{
    display: flex;
    content: "\2713";
    margin-left: 1rem;
    font-weight: 700;
    font-size: 1rem;
}

.line-through-elt-box span:hover
{
    cursor: pointer;
}

#submit-box, #submit-box-margin-top
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

#submit-box input
{
    display: flex;
    background-color: rgba(32, 32, 32, 0.9);
    border: none;
    border: 3px solid rgb(32, 32, 32);
    border-radius: 3px;
    font-size: 1rem;
    color: rgb(240, 240, 240);
    padding: 0.4rem;
    padding-bottom: 0.5rem;
    width: fit-content;
    transition: 0.3s ease-out;
}

#submit-box input:hover
{
    cursor: pointer;
    border-radius: 20px;
    background-color: var(--submit-box-input-hover-bc);
    color: var(--submit-box-input-hover-color);
}

input::file-selector-button
{
    background-color: transparent;
    border: none;
    color: rgb(32,32,32);
    width: 0;
}

/*
Create_section
*/

.back-to-last-page
{
    display: flex;
    align-self: end;
    width: fit-content;
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
    font-size: 0.9rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    color: var(--back-to-last-page-color);
    background-color: var(--back-to-last-page-bc);
    border: var(--back-to-last-page-border-width) solid rgb(32, 32, 32);
    text-decoration: none;
}

.back-to-last-page:hover
{
    border: var(--back-to-last-page-hover-border-width) solid var(--back-to-last-page-hover-border-color);
    color: var(--back-to-last-page-hover-color);
}

.no-integration
{
    font-style: italic;
    color: var(--no-integration-color);
}

.subSectionStyle
{
    font-weight: normal;
    font-size: 0.85rem;
}

.varChar-label-box-unique
{
    height: 120px;
}

.varChar-label-box-unique input
{
    height: 30%;
}

/*
Create entity
*/

textarea
{
    background-color: var(--textarea-bc);
    border-radius: 3px;
    border: none;
    width: 95%;
    min-width: 250px;
    font-size: 0.9rem;
    border: 2px solid var(--textarea-border-color);
    color: var(--textarea-color);
    padding: 0.3rem;
}

textarea:focus
{
    border: 4px solid var(--textarea-focus-border-color);
    outline: none;
    color: var(--textarea-focus-color);
    background-color: var(--textarea-focus-back-color);
}

textarea:hover {
    background-color: var(--textarea-hover-back-color);
}

.description-label
{
    height: 14rem;
    background-color: var(--description-label-bc);
    width: 80%;
    max-width: 500px;
}

.description-row
{
    flex: 2;
}

/* themes group editing (button "Ajouter des thèmes") 
*/

#features-buttons-container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 1rem;
}

#features-buttons-row
{
    display: flex;
    flex: 1;
    padding: 0;
}

#features-buttons-col
{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}


.feature-button-box
{
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 0.3rem;
    margin-bottom: 0.4rem;
}

.feature-button
{
    text-decoration: none;
    color: var(--feature-button-color);
    background-color: var(--feature-button-bc);
    border: 2px solid var(--feature-button-border-color);
    border-radius: 3px;
    padding: 0.5rem;
    text-align: center;
}

.feature-button span
{
    font-size: 0.8rem;
    font-style: italic;
}

.feature-button:hover
{
    box-shadow: 3px 5px var(--feature-button-hover-shadow-color);
    border: 2px solid var(--feature-button-hover-border-color);
    color: var(--feature-button-hover-color);
}

/*//////////////////////// SHOW NOTION URLS \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*//////////////////////// SHOW NOTION URLS \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*//////////////////////// SHOW NOTION URLS \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

.url-notion {
    word-break: break-all;
}

[data-theme = light] {
    --opt-btn-back-color: rgb(229, 229, 229);
    --opt-btn-color: rgb(32, 32, 32);
    --opt-btn-border-color-hover: rgb(255, 92, 80);
    --opt-btn-border-width: 2px;
    --opt-btn-border-width-hover: 2px;
    --opt-btn-hover-back-color: rgb(255, 92, 80);
    --opt-btn-hover-color: rgb(244, 244, 244);
}

[data-theme = dark] {
    --page-global-color: rgb(199, 191, 191);
    --opt-btn-back-color: rgb(172, 172, 172);
    --opt-btn-color: rgb(32, 32, 32);
    --opt-btn-border-color-hover: rgb(47, 255, 141);
    --opt-btn-border-width: 2px;
    --opt-btn-border-width-hover: 2px;
    --opt-btn-hover-back-color: rgb(47, 255, 141);
    --opt-btn-hover-color: rgb(26, 26, 26);
}

.option-btn {
    width: fit-content;
    border-radius: 3px;
    text-decoration: none;
    padding: 0.3rem 0.3rem;
    height: 2rem;
    background-color: var(--opt-btn-back-color);
    border: var(--opt-btn-border-width) solid rgb(32, 32, 32);
    color: var(--opt-btn-color);
}

.option-btn:hover {
    border: var(--opt-btn-border-width-hover) solid var(--opt-btn-border-color-hover);
    color: var(--opt-btn-hover-color);
    background-color: var(--opt-btn-hover-back-color);
}

@media screen and (max-width: 500px) {
    .creation-form-col
    {
      min-width: 260px;
    }
}