:root {
    --color--light-blue-wb: #0066cc10;
    --color--white: #FFFFFF;
    --color--black: #000000;
    --color--vivid-red: #FF0000;
}

.ThemeForm {
    border: 1px solid gray;
    background-color: #FAFAFA;
    padding: 10px;
    margin: 10px;
    width: 95%;
    font-family: "trebuchet ms", sans-serif;
    float: left;
    clear: both;


    & fieldset {
        width: 99%;
        float: left;
        padding: 5px;
        margin-bottom: 5px;
        border: 1px solid gray;
    }

    & legend {
        color: darkgrey;
        font-weight: bold;
        text-transform: uppercase;
    }

    & h2 {
        color: white;
        font-weight: bold;
        text-transform: uppercase;
        background-color: gray;
        padding: 5px;
    }

    & label {
        margin-top: 20px;
        display: block;
        font-size: 90%;
    }

    & label.inline {
        display: inline
    }

    & input[type=submit] {
        clear: both;
    }

    & input[type=radio] {
        padding-right: 50px;
        background-color: transparent;
        border: none;
    }

    & textarea {
        border: 1px solid black;
        background-color: #f7f8a4;
        font-family: "trebuchet ms", sans-serif;
        width: 99%;
        font-size: 12px;
    }
    & table {
        font-size: 10px;
    }

    & td {
        width: 200px;
    }
}

.libelle {
font-weight: bold;
color: gray;
padding-right: 10px;
width: 240px;
}


.select {
    position: relative;
    height: 45px;

    @media only screen and (max-device-width:46.875rem){
        height:2rem;
    }

    .select-selected {
        background-color: #fff;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        /* Style the arrow inside the select element: */
        &::after{
            position: absolute;
            content: "";
            top: calc(50% - 2px);
            right: 0px;
            width: 0;
            height: 0;
            border: 6px solid;
            border-color: #bbb transparent transparent transparent;
        }

        /* Point the arrow upwards when the select box is open (active): */
        .select-arrow-active {
            &::after {
                border-color: transparent transparent #fff transparent;
                top: 50%;
            }
        }
    }

    .select-selected{
        border: 1px solid #ccc;
        border-right: 0 solid transparent;
        width: 100%;
    }

    /* style the items (options), including the selected item: */
    .select-items div,.select-selected {
        color: #bbb;
        cursor: pointer;
        padding: 8px 16px 8px 40px;
        height:100%;
        position: relative;
    }

    /* Style items (options): */
    .select-items {
        position: absolute;
        background-color: #fff;
        color: #BBB;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        max-height: 50vh;
        overflow: auto;
        border: 1px solid #bbbbbb;
        border-top: 0;
        min-width: 25vw;
        @media only screen and (max-device-width:46.875rem) {
            min-width: 75vw;
        }
    }

    .select-items img, .select-selected img { width: 22px;height: 22px;position: absolute;left: 10px;}
    @media only screen and (max-device-width:46.875rem) {
        .select-items div, .select-selected { padding-left: 30px;}
        .select-items img, .select-selected img { width: 15px;height: 15px;}
    }

    /* Hide the items when the select box is closed: */
    .select-hide {
        display: none;
    }
    .same-as-selected{
        border : 1px solid #0066cc;
    }

    .select-items>div:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .select-items>div:hover, .same-as-selected {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

.tpl-loader__loader {
    display: flex;
    justify-content: center;
    align-items: center;

    & .tpl-loader__loader__dot {
        background-color: #00000060;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        margin: 0 5px;

        /* Animation */
        animation: jump 0.6s infinite;

        /* Delay the animation for every dot */

        &:nth-child(2) {
            animation-delay: 0.2s;
        }

        &:nth-child(3) {
            animation-delay: 0.4s;
        }
    }
}

@keyframes jump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}