/**
 * Demo forms
 */

.demo-form {
    border:  1px dotted grey;
    background-color:  #ffffffaa;
    padding:  1rem;
    border-radius:  1rem;
    box-shadow: 0 0 1rem #44444444;
}

.demo-form h2 {
    font-size:  18pt;
    /* margin-bottom:  0; */
}

.demo-form h3 {
    font-size:  16pt;
    margin-bottom:  0;
}

.demo-form p.small {
    font-size:  10pt;
}


.demo-form p,
.demo-form h2 {
    text-align: left;
}

.demo-form p.text-center {
    text-align: center;
}

.demo-form .ml-3,
.demo-form .mr-3 {
    display:  inline-block;
}

.demo-form .ml-3 {
    margin-left:  0.5em;
}

.demo-form .mr-3 {
    margin-right:  0.5em;
}

.demo-form .form-field input[type="email"],
.demo-form .form-field input[type="text"] {
    width:  100%;
    border:  1px solid #44444444;
}

.custom-user-reg-fields {
    padding:  0.5em 0;
    display:  flex;
    flex-direction: row;
    gap:  0.5em;
    margin-bottom:  1em;
    flex-wrap: wrap;
    font-size:  10pt;
}


.custom-user-reg-fields input[type="radio"] {
    display:  none;
}

.custom-user-reg-fields input[type="radio"] + label {
    padding:  0.5em 0;
    background-color:  #e0e0e0;
    border:  2px solid #44444422;
    border-radius:  0.25em;
    cursor:  pointer;
    transition: 0.3s;
    flex-grow: 1;
    text-align: center;
}

.custom-user-reg-fields input[type="radio"]:not( :checked ) + label:hover {
    filter: brightness(105%);
}

.custom-user-reg-fields input[type="radio"]:checked + label {
    background-color:  #1d2bbe;
    color:  white;
}

.demo-form button.fake-submit {
    font-weight:  bold;
    display:  block;
    width:  100%;
    padding:  1em 0;
}

.demo-form button.fake-submit:hover {
/*     color:  white; */
}