.main-form {}

.main-form--box {padding: 16px; border: solid 1px #DDD; border-radius: 8px}

.main-error {margin: 0 0 10px 0; padding: 10px; background: #faded0; color: #111; border: 1px solid #ff1111; }

.main-form--normal .main-form-table {width: calc(100% + 12px); max-width: calc(100% + 12px); border-spacing: 0; border-collapse: collapse; margin: -6px}
.main-form--normal .main-form-table td, .main-form-table th {box-sizing:content-box; vertical-align:middle; padding:6px 6px;}
.main-form--normal .main-form-table td.main-form-title-col {vertical-align:top; padding-top:10px; padding-right:20px}
.main-form--normal .main-form-table .main-form-title-col-inner {min-width: 200px}
.main-form--normal .main-form-table .main-form-main-col {width:100%}
.main-form--normal .main-form-table .main-form-main-col-inner {}

body .main-form input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]), .main-form textarea, .main-form select {
	width: 100%; padding: 4px 8px; background: #FFF; color: #000; font-size: inherit; border: solid 1px #CCC; 
}
.main-form input[type=radio], .main-form input[type=checkbox] {
	margin-right: 4px;
}

.main-form input:not([type=radio][type=checkbox][type=button][type=submit]):focus, .main-form textarea:focus, .main-form select:focus {
	box-shadow: 0 0px 2px 0px rgba(0, 66, 164, 0.7);
}

.main-form--normal .main-required-mark {color: #FF0000}

.main-range-field {}
.main-range-field-flex {display: flex; align-items: center; justify-content: center; margin: -4px}
.main-range-field-flex > * {margin: 4px;}
.main-range-field-input {width: 80px; padding: 4px 8px; border: solid 1px #DDD; flex-grow: 1}
.main-range-field .main-measure:empty {display: none}

.main-button--normal {display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 8px 16px; background: #CCC; color: #000; border: none; border-radius: 8px}
.main-button--normal:hover {background-color: #DDD}

.main-checkbox--normal {}
.main-checkbox--normal input[type=checkbox] {display: none}
.main-checkbox--normal input[type=checkbox] + .main-picture {display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 22px; height: 22px; margin-right: 4px; border: solid 1px #DDD;}
.main-checkbox--normal input[type=checkbox]:checked + .main-picture:before {width: 6px; height: 10px; margin: -1px -1px 0 0; content: ''; border-bottom: solid 2px #333; border-right: solid 2px #333; transform: rotate(45deg)}
.main-checkbox--normal input[type=checkbox]:disabled + .main-picture, .main-checkbox input[type=checkbox]:disabled + .main-picture:before {border-color: #777}
.main-checkbox--normal .main-text {vertical-align: middle;}

.main-radio--normal {}
.main-radio--normal input[type=radio] {display: none}
.main-radio--normal input[type=radio] + .main-picture {display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 16px; height: 16px; margin-right: 4px; border: solid 1px #DDD; border-radius: 16px}
.main-radio--normal input[type=radio]:checked + .main-picture:before {display: inline-flex; align-items: center; justify-content: center; width: 6px; height: 6px; content:''; background: #666; border-radius: 16px}
.main-radio--normal input[type=radio]:disabled + .main-picture, .main-checkbox input[type=checkbox]:disabled + .main-picture:before {border-color: #777; background-color: #777}
.main-radio--normal .main-text {vertical-align: middle;}

.main-checkbox--box .main-option-inner, .main-radio--box .main-option-inner {display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 9px; border: solid 1px #DDD; background-color: #EEE; border-radius: 4px}
.main-checkbox--box input[type=checkbox], .main-radio--box input[type=radio] {display: none}
.main-checkbox--box input[type=checkbox]:checked + .main-option-inner, .main-radio--box input[type=radio]:checked + .main-option-inner {background-color: #AAA; border-color: #999}