form
{
    margin : 10px;
}

.form-widget {
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid black;
    margin-top: 1rem;
    position: relative;
    border-radius: var(--form-border-raidus);
}

.form-widget > h1 {
    margin: 0;
    border: 1px solid black;
    border-radius: var(--form-border-raidus) var(--form-border-raidus) 0px 0px;
    top: -2px;
    position: relative;
    height: var(--form-h1-height);
    width: calc(100% + 2px);
    left: -1px;
    vertical-align: middle;
    display: inline-block;
    background-color: var(--form-h1-bgcolor);
    color: var(--form-h1-color);
    line-height: var(--form-h1-height);
    font-size: var(--form-h1-fontsize);
}

div.form-row
{
    padding: 5px;
    margin: 5px;
    flex-grow:1;
}

div.form-submit
{
    padding: 5px;
    margin: 5px;
    margin-top : 10px;
    display:flex;
    justify-content: end;
}

div.form-row > label
{
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
}

div.form-row > legend
{
    margin-bottom: .5rem;
}

.form-item
{
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

div.form-row > .form-item
{
    width: 100%;
}

.form-flex
{
    display:flex;
    flex-wrap: wrap;
}

.form-flex > .form-group-addon
{
    flex-grow : 0;
}

.form-flex > .form-item
{
    flex-grow : 1;
}



.form-select
{
    display: block;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

div.form-row > .form-select
{
    width: 100%;
}


.form-flex > .form-select
{
    flex-grow : 1;
}


form.form-inline
{
    display: inline;
}
.form-row.form-collection > div > div.form-row
{
    display:flex;
    align-items: baseline;
}

.form-row.form-collection > div > div.form-row > div
{
    display:flex;
    flex-grow:1;
    flex-wrap: wrap;
    max-width: 100%;
}

.form-help
{
    font-size: 0.8em;
    color: #198754;
}

.form-error
{
    font-size: 0.8em;
    color: #dc3545;
}

form .btn ~ .btn
{
    margin-left:10px;
}
/*
form input[type="checkbox"] ~ label::before
{
    background: #fff;
    border: 2px solid #99BFE6;
    margin-top: -3px;
    margin-right: 15px;
    display: inline-block;
    vertical-align: middle;
    content: '';
    line-height: 15px;
    height:30px;
    width:30px;
}

form input[type="checkbox"]:checked ~ label::before
{
    background: blue;
    background-size: contain;
    background-repeat: no-repeat;
    background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4wYECgQu6QvsZgAAARVJREFUWMPtmFsSwiAMRZs77n8VLs194BdOiyB5g475cyrJaaDJJVRKKcfGhmNz2x7w5uWIiOj82+vokNZRCzQzdRzpQimYFRSZcBofrAx6gGmziVVwXN9YBceN8b2FOiN7nFjIhht9GKOYqVtc4SS1EKtKSg+yFxuZmdtSzUjPXCqgFe4N8NNC6TZp4drnUH999wdFZu7irNrs+et/E7juGiXTRc303lCSDa/Mnf1AU5u4dc1DebPO4AzS9cxpyww3k94dKUTye7ZLSOudtI5Za6eqk4wgIoQGtF2jhYm6jsLS2ipU5F3ZLBairwaI0nFeWhFWB9FCVjSb8dpO050kOpviYdXPjd+4wMsHmMtHH39Apj0B6ukTDeFy0MUAAAAASUVORK5CYII=');
}*/