@import url('https://fonts.googleapis.com/css?family=Inter:400,600&display=swap');

#htmlForm {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    font-family: 'Inter', sans-serif;
}

    #htmlForm h1, #htmlForm h2 {
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    #htmlForm h1 {
        font-size: 2.5rem;
        color: black;
    }

    #htmlForm h2 {
        font-size: 2rem;
        color: black;
    }

    #htmlForm label {
        display: block;
        max-width: 100%;
        margin-right: 1rem;
        font-size: larger;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: black;
    }

    #htmlForm button, #htmlForm input[type="submit"], #htmlForm input[type="button"] {
        display: inline-block;
        font-weight: 400;
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
        padding: .5rem 1rem;
        font-size: 1rem;
        border-radius: .25rem;
        transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s ease-in-out;
    }

    #htmlForm div#field-branch {
        margin-bottom: 1rem;
        align-items: baseline;
    }

    #htmlForm div {
        margin-bottom: 1rem;
        align-items: baseline;
    }

    #htmlForm #buttongroup {
        display: block;
        width: max-content;
    }

    #htmlForm .space-between {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    #htmlForm input:not([type="button"]):not([type="submit"]):not([type="radio"]):not([type="checkbox"]), #htmlForm textarea, #htmlForm select {
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        border: 1px solid #ced4da;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }

    #htmlForm:focus-within input:not([type="button"]):not([type="submit"]):not([type="radio"]):focus, #htmlForm:focus-within textarea:focus, #htmlForm:focus-within select:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
        outline: 0;
    }

    #htmlForm input[type="submit"]:hover {
        color: #fff;
        background-color: #0b5ed7;
        border-color: #0a58ca;
    }

    #htmlForm input[type="submit"]:focus {
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253,.5);
    }

    #htmlForm div#ex {
        border: solid 1px black;
    }

    #htmlForm label[for][required]:after {
        content: "*";
        color: #dc3545;
        margin-left: 2px;
    }

    #htmlForm input.is-invalid, .was-validated input:invalid {
        border-color: #dc3545 !important;
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }

        #htmlForm input.is-invalid:focus, .was-validated input:invalid:focus {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25) !important;
        }

@media (min-width: 576px) {
    #htmlForm {
        max-width: 540px;
        padding: 10px;
    }

        #htmlForm div#field-branch {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }

        #htmlForm div label {
            margin-bottom: 5px;
        }
}

@media (min-width: 768px) {
    #htmlForm {
        max-width: 600px;
    }
}

@media (min-width: 992px) {
    #htmlForm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    #htmlForm {
        max-width: 1140px;
    }
}

#htmlForm h1 {
    font-family: Arial;
    font-size: 36px !important;
    color: #000;
    font-weight: normal;
    font-style: normal;
}

#htmlForm h2 {
    font-family: Arial;
    font-size: 28px;
    color: #757575;
    font-weight: normal;
    font-style: normal;
}

#htmlForm label {
    font-family: Arial;
    font-size: 20px;
    color: #333;
    font-weight: normal;
    font-style: normal;
}

#htmlForm input:not([type='button']):not([type='submit']):not([type='radio']):not([type='checkbox']),
#htmlForm textarea,
#htmlForm select {
    background-color: #FFFFFF;
    border-color: #CED4DA;
    border-style: solid;
    border-width: 1px;
}

#htmlForm #title-container {
    background-color: #EFEFEF;
}

.hightlight {
    border: none;
    border-bottom: 2px solid #ccc !important;
    transition: border-bottom-color 0.52s ease-in-out;
}

    .hightlight:focus {
        outline: none;
        border-bottom-color: #f6861f !important;
        outline: 0;
        box-shadow: 0 0 0 0.25rem #f6861f40 !important;
    }

#htmlForm input[type=date], #htmlForm input[type=time] {
    position: relative;
}

#htmlForm input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

#htmlForm input[type="time"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

#htmlForm select {
    height: auto;
    padding: 0.7rem;
}


#htmlForm input[type="submit"] {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    background-color: #f6861f;
    border-color: #f6861f;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s ease-in-out;
}

    #htmlForm input[type="submit"]:hover {
        color: #fff;
        background-color: #d7761c;
        border-color: #d7761c;
    }

    #htmlForm input[type="submit"]:focus {
        box-shadow: 0 0 0 0.25rem rgba(246, 134, 31,.5);
    }