.drapeau {
    height: 27px;
}

.icon {
    width: 75px;
}

.w-fit {
    width: fit-content;
}

md-select.form-control:not([disabled]):focus md-select-value {
    color: var(--black);
}

md-select.form-control[required]:not([disabled]):focus md-select-value {
    color: var(--black);
}

md-select.form-control[required] .md-select-placeholder {
    color: #ffffff61;
}

#logo {
    display: inline-block;
    text-align-last: end;
}

    #logo h1 {
        font-size: 6em;
        display: inline;
    }

    #logo img {
        height: 30px;
    }



#langue {
    width: 200px;
    border: var(--contraste) 2px solid;
    border-radius: 11px;
    margin-bottom: -40px;
}

    #langue md-select {
        margin: 0;
    }

        #langue md-select:focus md-select-value {
            color: var(--contraste);
        }

        #langue md-select md-select-value {
            padding: 0;
            border: none;
        }

    #langue .md-text {
        display: flex;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
    }

    #langue .drapeau {
        border-radius: 0 9px 9px 0;
    }

    #langue .md-select-icon {
        display: none;
    }

@media (min-width: 768px) {
    #langue {
        margin-bottom: 0;
    }
}

#error {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

button:disabled {
    opacity: .2;
}

md-option .md-text {
    display: flex;
    width: 100%;
}

#total {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

    #total * {
        font-weight: bold;
    }

    #total strong {
        font-size: 1.25rem;
    }

#ticket-numbre {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.25em;
    letter-spacing: .1em;
    border: none;
    width: 100%;
}

    #ticket-numbre:focus {
        border: none;
        outline: none;
    }


@media (min-width: 992px) {
    #ticket-numbre {
        letter-spacing: .25em;
    }
}

#list-tickets {
    /*margin: 0 -15px;*/
}

#list-tickets-head {
    padding-right: 15px;
}

#list-tickets-body {
    max-height: 100px;
    overflow-y: scroll;
}

#renseignements md-select md-select-value {
    border: none;
}

#renseignements .form-control {
    border: 1px var(--contraste) solid;
    -moz-border-radius: var(--field-radius);
    -webkit-border-radius: var(--field-radius);
    border-radius: var(--field-radius);
    background-color: var(--white);
    background-image: -moz-linear-gradient(right, var(--back) 15px, var(--white) 15px); /* Not Wokking*/
    background-image: -o-linear-gradient(right, var(--back) 15px, var(--white) 15px); /* Not Wokking*/
    background-image: -webkit-gradient(linear, right,left, from(var(--back)) 15px, to(var(--white)) 15px); /* Not Wokking*/
    background-image: -webkit-linear-gradient(right, var(--back) 15px, var(--white) 15px);
    background-image: linear-gradient(to left, var(--back) 15px, var(--white) 15px);
    color: var(--back);
    font-weight: bold;
    text-align: right;
    padding-right: 25px;
}

    #renseignements .form-control[required] {
        border: 1px var(--green) solid;
        background-color: var(--white);
        background-image: -moz-linear-gradient(right, var(--green) 15px, var(--white) 15px); /* Not Wokking*/
        background-image: -o-linear-gradient(right, var(--green) 15px, var(--white) 15px); /* Not Wokking*/
        background-image: -webkit-gradient(linear, right,left, from(var(--green)) 15px, to(var(--white)) 15px); /* Not Wokking*/
        background-image: -webkit-linear-gradient(right, var(--green) 15px, var(--white) 15px);
        background-image: linear-gradient(to left, var(--green) 15px, var(--white) 15px);
        color: var(--black);
    }

    #renseignements .form-control.ng-invalid[required] {
        border: 1px var(--yellow) solid;
        background-color: var(--white);
        background-image: -moz-linear-gradient(right, var(--yellow) 15px, var(--white) 15px); /* Not Wokking*/
        background-image: -o-linear-gradient(right, var(--yellow) 15px, var(--white) 15px); /* Not Wokking*/
        background-image: -webkit-gradient(linear, right,left, from(var(--yellow)) 15px, to(var(--white)) 15px); /* Not Wokking*/
        background-image: -webkit-linear-gradient(right, var(--yellow) 15px, var(--white) 15px);
        background-image: linear-gradient(to left, var(--yellow) 15px, var(--white) 15px);
        color: var(--black);
    }

    #renseignements .form-control.error {
        border: 1px var(--red) solid;
        background-color: var(--white);
        background-image: -moz-linear-gradient(right, var(--red) 15px, var(--white) 15px); /* Not Wokking*/
        background-image: -o-linear-gradient(right, var(--red) 15px, var(--white) 15px); /* Not Wokking*/
        background-image: -webkit-gradient(linear, right,left, from(var(--red)) 15px, to(var(--white)) 15px); /* Not Wokking*/
        background-image: -webkit-linear-gradient(right, var(--red) 15px, var(--white) 15px);
        background-image: linear-gradient(to left, var(--red) 15px, var(--white) 15px);
        color: var(--black);
    }

    #renseignements .form-control[disabled] {
        border: 1px var(--contraste) solid !important;
        -moz-border-radius: var(--field-radius);
        -webkit-border-radius: var(--field-radius);
        border-radius: var(--field-radius);
        background-color: var(--contraste) !important;
        background-image: -moz-linear-gradient(right, var(--contraste) 15px, var(--back) 15px) !important; /* Not Wokking*/
        background-image: -o-linear-gradient(right, var(--contraste) 15px, var(--back) 15px) !important; /* Not Wokking*/
        background-image: -webkit-gradient(linear, right,left, from(var(--contraste)) 15px, to(var(--back)) 15px) !important; /* Not Wokking*/
        background-image: -webkit-linear-gradient(right, var(--contraste) 15px, var(--back) 15px) !important;
        background-image: linear-gradient(to left, var(--contraste) 15px, var(--back) 15px) !important;
        color: var(--contraste) !important;
        font-weight: bold !important;
        text-align: right !important;
        padding-right: 25px !important;
    }

#renseignements md-select.form-control[disabled] .md-select-value {
    color: var(--contraste) !important;
}

#renseignements .select-day {
    padding: 0 3px 0 0;
}

    #renseignements .select-day md-select.form-control {
        background-image: none;
        border-radius: var(--field-radius) 0 0 var(--field-radius);
    }

#renseignements .select-month {
    padding: 0 3px;
}

    #renseignements .select-month md-select.form-control {
        background-image: none;
        -moz-background-clip: border-box;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        border-radius: 0;
    }

        #renseignements .select-month md-select.form-control[disabled],
        #renseignements .select-day md-select.form-control[disabled] {
            background-color: var(--black);
        }

#renseignements .select-year {
    padding: 0 0 0 3px;
}

    #renseignements .select-year md-select.form-control {
        border-radius: 0 var(--field-radius) var(--field-radius) 0;
    }

#interactive.viewport {
    position: relative;
}

    #interactive.viewport > canvas,
    #interactive.viewport > video {
        max-width: 100%;
        width: 100%;
    }

        #interactive.viewport > canvas.drawing,
        #interactive.viewport > canvas.drawingBuffer {
            position: absolute;
            height: 100%;
            left: 0;
            top: 0;
        }


.custom-control-input:checked ~ .custom-control-label::before {
    color: var(--primary);
    border-color: var(--primary);
    background-color: var(--primary);
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none;
}

.border-bottom-back {
    border-bottom: 1px solid var(--back);
}

input[type=number].not-arrow::-webkit-inner-spin-button,
input[type=number].not-arrow::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].not-arrow {
    -moz-appearance: textfield;
}

.low-opacity {
    opacity: .2;
}

.fill-contraste {
    fill: var(--contraste);
}

.fill-success {
    fill: var(--success);
}

#PassportType > md-select-value > span:nth-child(1) {
    font-size: .6em;
    text-transform: uppercase;
}

#loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--back);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}