ldc-mesbr-app/resources/sass/partials/form.scss

input {
    min-width:50%;
    padding:5px 10px;
    border:1px solid $darkgrey;
    background-color: $lightgrey;
    color: $darkgrey;
    box-sizing: border-box;
    &.small {
        width:100px;
        text-align: right;
        margin-right:10px;
    }
    &.input-file {
        min-width: 10%;
    }
}

textarea {
    padding:5px 10px;
    border:1px solid $darkgrey;
    background-color: $lightgrey;
    color: $darkgrey;
    box-sizing: border-box;
}

select {
    min-width:50%;
    padding:5px 10px;
    border:1px solid $darkgrey;
    background-color: $lightgrey;
    color: $darkgrey;
}


.form-wrapper {
    width: 100%;
    font-family: 'Nunito-Regular', sans-serif;
    color:$lightgrey;
    figure {
        margin-bottom:20px;
        text-align: center; 
    }
    .form-split{
        display:flex;
        justify-content: space-between;
        align-items:center;
        flex-wrap: wrap;
        &.align-start {
            align-items:flex-start;
        }
        @media screen and (max-width:768px){
            flex-direction:column
        }
    }
    .form-field {
        width: 48%;
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 0.66%;
        @media screen and (max-width:768px){
            width:100%;
        }
        span {
            width: 40%;
            text-align: right;
        }
        .title {
            width:45%;
            display:flex;
            flex-direction:column;
            align-items: flex-start;
            span {
                margin-top:5px;
                width:100%;
                font-size:0.8em;
                text-align:left;
                font-style: italic;
            }
        }
        
        &.submit {
            width:100%;
            margin-top:20px;
            flex-direction:column;
            align-items: flex-end;
            span {
                font-style:italic;
                font-size:0.8em;
                margin-right:20px;
            }
            input {
                min-width:26%;
            }
        }
        &.limitPrinting, &.enablelimitperiod, &.enablelimitquantity, &.gs1code {
            opacity:0;
            transition: opacity 0.5s ease-in;
        }
        .figure-desktop {
            margin:10px auto;
            img {
                width:70%;
                height:auto;
            }
        }
        .figure-mobile {
            margin-top:10px;
            img {
                width:40%;
                height:auto;
            }
        }
    }
    .form-field-calendar {
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom:10px;
        input {
            min-width: auto;
            width:30%;
            @media screen and (max-width:768px){
                width:45%;
            }
            &:first-child {
                margin-right:10px;
            }
        }
    }
    .form-field-textarea {
        width:48%;
        flex-direction:column;
        margin-top:10px;
        @media screen and (max-width:768px){
            width:100%;
        }
        textarea {
            width:100%;
            margin-top:5px;
        }
    }
}

input:read-only{
    color:$lightgrey;
    background-color:transparent;
    border:0;
}


button, input[type=submit] {
    padding:5px 10px;
    background-color: $orange; 
    color: $darkgrey;
    border:0;
    cursor:pointer;
    margin:5px 0;
    border:1px solid $orange;
    &:hover {
        background-color: $grey2; 
        color: $orange;
        border:1px solid $orange;
    }
}

.login {
    input[type=email], input[type=password]{
        width:100%;
        box-sizing: border-box;
        padding:10px;
        border:1px solid $darkgrey;
    }
}

// Create mixin for transition property
@mixin transition($time, $type, $property) {
    transition: $time $type $property;
    -moz-transition: $time $type $property;
    -webkit-transition: $time $type $property;
}
form {
    input[type='checkbox'] {
        opacity: 0;
        z-index: -1;
        display:none;
    }

    input[type='checkbox']+label {
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        //margin: auto;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        text-indent: -999px;
        overflow: hidden;
        border: 1px solid $orange;
        cursor: pointer;
    }


    input[type='checkbox']+label {
        border: 1px solid $orange;
        background: transparent;
    }

    input[type='checkbox']+label:before {
        content: '';
        width: 10px;
        height: 10px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        margin: auto;
        background-color: $orange;
        opacity: 0;
        z-index: -1;
        @include transition(0.4s, ease-in-out, all);
    }

    input[type='checkbox']:checked+label:before {
        opacity: 1;
        z-index: 10;
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

.delete-icon {
    color:#d70000;
}
.delete-coupon {
    color:#d70000;
    cursor:pointer;
}
.addcalendar, .add-mouvement-btn {
    margin-right:10px;
    font-size:1.1em;
    color:$orange;
    cursor:pointer;
}

.removecalendar {
    color:$orange;
    margin-left:10px;
    font-size:1.5em;
    cursor:pointer;
}

.no-result {
    text-align:center;
    color:$lightgrey;
    font-family: 'Nunito-Regular', sans-serif;
    margin:10px;
}

.sitesChoice {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top:20px;
    .inputGroup {
        width:30%;
        display:flex;
        align-items:center;
        margin-bottom:10px;
        label {
            margin-right:10px;
        }
    }
}