@charset "utf-8";
/* CSS Document */

.abc-form .alert {
    
    margin: var(--general-padding) 0 0 0;
    
}

.form-section .optional {
    
    display:none;
    
}

.form-section {
    
    width:100%;
    border: 1px solid;
    padding: var(--general-padding-small) var(--general-padding) var(--general-padding-small) var(--general-padding);
    background-color: #fafafa;
    font-size: var(--text-size-normal);
    line-height: var(--text-lh-normal); 
    margin-bottom: var(--general-padding-small);
    
}


.abc-form .alert.form-errors ul,
.abc-form ul.errors,
.form-section ul.errors {
    
    color:#ff0000;
    list-style: none;
    margin:0;
    padding:0;
    font-size: var(--text-size-small);
    line-height: var(--text-lh-small);  
    
}

.abc-form .alert.alert-danger {
    
    color:#ff0000;   
    
}

.abc-form ul.errors li,
.form-section ul.errors li {
    
    padding:4px 0;
    
}

.abc-form  a {
    
    text-decoration: underline;  
    
}

.abc-form  a:hover {
    
    text-decoration: none;  
    
}

.abc-form .alert-success {
    
    font-weight: 700; 
    font-size: 16px;

}


.form-section .form-section-header h2 {
    
    font-size: var(--h-small);
    line-height: var(--h-small-lh);
    margin: 0 0 2px 0;
    
}

.form-section .form-section-header {
    
    cursor: pointer;
    
}

.form-section .form-section-header .butt {
    
    margin: 0 0 2px 0;
    
}

.form-section .form-section-header .butt > svg {
    
    height:32px;
    width:auto;
    
}

.form-section .form-section-header .up {
    
    display: none;
    
}

.form-section .form-section-header.open .down {
    
    display: none;
    
}

.form-section .form-section-header.open .up {
    
    display: block;
    
}

.form-section .form-content {
    
    border-top: 1px dotted;
    padding: var(--general-padding) 0 var(--general-padding-small) 0;
    
}

.form-section .form-content.closed {
    
    display:none; 
    
}

.form-section .form-content .form-row {
    
    margin-bottom: var(--general-padding-medium);
    
}

.form-section label.required::after {
    
    content: "* ";
    
}

.form-section .form-row .label,
.form-section .form-row .input {
    
    display:inline-block;
    vertical-align: middle;
    
}

.form-section .form-row.split .form-row.select .label,
.form-section .form-row.split .label {
    
    width:40%;
    
}


.form-section .form-row.email .label,
.form-section .form-row.text .label,
.form-section .form-row.select .label,
.form-section .form-row.date .label,
.form-section .form-row.radios .label {
    
    width:20%;
    
}

.form-section .form-row.email .input,
.form-section .form-row.text .input {
    
    width:30%;
    
}

.form-section .form-row.radios .input {
    
    width:80%;
    
}

.form-section .form-row.date .input {
    
    width:20%;    
    
}


.form-section .form-row.radios .form-check {
    
    display: inline-block;
    
}

.form-section .form-row.split .input.text {
    
    width:60%;
    
}

.form-section select,
.form-section input.text{
    
    width:95%;
    border: 1px solid;
    padding: 3px 6px;
    background-color: #ffffff;
    font-size: var(--text-size-normal);
    line-height: var(--text-lh-normal); 
    
}

.form-section select {
 
    padding: 5px 6px;
    width:100%;
    
}

.form-section .small {
    
    font-size: var(--text-size-small);
    line-height: var(--text-lh-small);  
    
}

.form-row.agree {
    
    margin-bottom: var(--general-padding);    
    
}

.form-row.agree input,
.form-row.agree p {
    
    display:inline;
    
}


.form-row.agree input {
    
    margin-right: 12px;    

}

.form-button {
    
    margin: var(--general-padding) 0; 
    
}

.form-button button {
    
    font-size: var(--text-size-normal);
    line-height: var(--text-lh-normal); 
    padding: 8px 8px 8px 12px;
    border: 1px solid transparent;
    
}

@media screen and (max-width: 1220px) {
    


}

@media screen and (max-width: 1000px) {


}

@media screen and (max-width: 768px) {
    
    .form-section .form-row.split .form-row.select .label,
    .form-section .form-row.split .label {

        width:100%;

    }


    .form-section .form-row.email .label,
    .form-section .form-row.text .label,
    .form-section .form-row.select .label,
    .form-section .form-row.date .label,
    .form-section .form-row.radios .label {

        width:100%;

    }

    .form-section .form-row.email .input,
    .form-section .form-row.text .input {

        width:100%;

    }

    .form-section .form-row.radios .input {

        width:100%;

    }

    .form-section .form-row.date .input {

        width:100%;    

    }    
    
    .form-section .form-row.split .input.text {

        width:100%;

    }
    
    .form-section input.text {
        
        width:100%;

    }
    
    .form-row.split,
    .form-row.split tbody,
    .form-row.split tr,
    .form-row.split td,
    .form-row.split .label,
    .form-row.split .input {
        
        display:block;
        width:100%;
        
    }

    .form-row .label {
        
        margin-bottom: 4px;    
        
    }
    
}