﻿/*************************************************************************************************************************************************/
/********| FRAME                    								|*************************************************************************************/
.frm_table																	{ width: 100%; }
.frm_table > tbody > tr > td											{ line-height: 1px; padding: 6px 18px 6px 0; }
.frm_table > tbody > tr > td:last-of-type							{ width: 100%; padding: 6px 0; }

.frm_table > tbody > tr > td.frm_subtitle > div					{ line-height: 24px; padding: 6px 0; font-size: 22px; }
.frm_table > tbody > tr > td.frm_label > label					{ min-width: 128px; line-height: 24px; padding: 6px 0; font-weight: bold; text-align: right; }
.frm_table > tbody > tr > td.frm_input > label					{ position: relative; display: block; min-width: 256px; }
.frm_table > tbody > tr > td.frm_comment > div					{ line-height: 24px; padding: 6px 0; color: #646464; font-style: italic; }
.frm_table > tbody > tr > td.frm_spacer > div					{ height: 4px; margin: 16px 0; background: rgba( 0,0,0,0.15 ); }

/********| INPUT                                            |*************************************************************************************/
main input, main textarea, main select								{ width: 100%; line-height: 24px; border: 2px solid rgba( 0,0,0,0.15 ); border-radius: 0; background: rgba( 255,255,255,0.5 ); }
main input																	{ height: 36px; padding: 4px 8px; }
main textarea																{ height: 132px; padding: 4px 8px; }
main select																	{ height: 36px; padding: 4px 36px 4px 8px; }
main input:disabled, main textarea:disabled, main select:disabled	{ background: #f5f5f5; color: #646464; }

main label.date input,
main label.time input													{ position: relative; padding: 4px 8px 4px 40px; }
main label.date:after,
main label.time:after													{ display: block;position: absolute; z-index: 10; left: 2px; top: 2px; width: 32px; height: 32px; line-height: 32px; text-align: center; font-family: "FontAwesome"; font-size: 14px; color: #464646; background: rgba( 0,0,0,0.15 ); }
main label.date:after													{ content: "\f073"; }
main label.time:after													{ content: "\f017"; }
main label.select															{ position: relative; }
main label.select:after													{ display: block; content: "\f078"; position: absolute; z-index: 10; right: 2px; top: 2px; width: 32px; height: 32px; line-height: 32px; text-align: center; font-family: "FontAwesome"; font-size: 14px; color: #464646; background: #ffffff; }

/********| Checkbox & Radio-Button									|*************************************************************************************/
main input[type="checkbox"]											{ display: none; }	
main input[type="checkbox"] + label									{ display: block; position: relative; padding: 6px 0 6px 36px; line-height: 24px; cursor: pointer; }	
main input[type="checkbox"] + label:before						{ display: block; content: ""; position: absolute; left: 0; top: 6px; border: 2px solid rgba( 0,0,0,0.15 ); padding: 10px; background: rgba( 255,255,255,0.5 ); }	
main input[type="checkbox"] + label:after							{ display: none; content: "\f00c"; position: absolute; left: 0; top: 6px; width: 24px; height: 24px; line-height: 24px; text-align: center; font-family: "FontAwesome"; font-size: 18px; }	
main input[type="checkbox"] + label:hover:after					{ display: block; color: #cccccc; }	
main input[type="checkbox"]:checked + label:after				{ display: block; color: #87B87F; }	

main .frm_input input[type="checkbox"]								{ display: block; position: absolute; left: 8px; bottom: 8px; right: 8px; height: 1px; }	
main .frm_input input[type="checkbox"] + label						{ background: #ffffff; }	

main input[type="radio"]												{ display: none; }	
main input[type="radio"] + label										{ display: block; position: relative; padding: 6px 0 6px 36px; line-height: 24px; cursor: pointer; }	
main input[type="radio"] + label:before							{ display: block; content: ""; position: absolute; left: 0; top: 6px; border: 2px solid rgba( 0,0,0,0.15 ); padding: 10px; border-radius: 50%; background: rgba( 255,255,255,0.5 ); }	
main input[type="radio"] + label:after								{ display: block; content: ""; position: absolute; left: 5px; top: 11px; width: 14px; height: 14px; border-radius: 50%; }	
main input[type="radio"] + label:hover:after						{ display: block; background: #cccccc; }	
main input[type="radio"]:checked + label:after					{ display: block; background: #87B87F; }

/********| DROPZONE                                                                                                                       |*******/
.frm_dz_lst																	{ width: 100%; padding: 4px 8px; line-height: 24px; border: 2px solid rgba( 0,0,0,0.15 ); border-radius: 0; background: #f5f5f5; color: #464646; }
.frm_dz_lst ul																{ padding: 0; margin: 0; }
.frm_dz_lst ul li															{ position: relative; padding: 0 24px 0 0; border-bottom: 2px solid rgba( 0,0,0,0.15 ); list-style: none; }
.frm_dz_lst ul li:last-of-type										{ border-bottom: none; }
.frm_dz_lst ul li div													{ position: absolute; right: 0; top: 0; width: 24px; height: 24px; text-align: right; cursor: pointer; }
.frm_dz_lst ul li div:hover											{ color: #E91D1D; }

.frm_dz_container															{ position: relative; height: 128px; }	
.frm_dz_container .frm_dz_txt											{ position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; border: 2px solid rgba( 123,183,229,0.3 ); background: rgba( 123,183,229,0.1 ); color: #646464; }	
.frm_dz_container .frm_dz_txt span									{ display: block; text-align: center; font-size: 14px; line-height: 18px; }	
.frm_dz_container .frm_dz_txt i										{ display: block; text-align: center; font-size: 20px; line-height: 24px; }	
.frm_dz_container .dropzone											{ position: absolute; z-index: 10; left: 0; top: 0; right: 0; bottom: 0; }	
.frm_dz_container .dropzone *											{ display: none; }	
.frm_dz_container.frm_dz_hover .frm_dz_txt						{ border: 2px solid rgba( 58,199,58,0.3 ); background: rgba( 58,199,58,0.1 ); }	

/********| BUTTON                                                                                                                         |*******/
main input[type="button"], main button, main .button			{ width: 100%; line-height: 24px; border: 2px solid rgba( 58,199,58,0.3 ); border-radius: 0; background: rgba( 58,199,58,0.1 ); cursor: pointer; text-align: center; text-decoration: none; }
main input[type="button"]:hover, main button:hover, main .button:hover				{ border: 2px solid rgba( 58,199,58,0.8 ); border-radius: 0; background: rgba( 58,199,58,0.7 ); }
main input[type="button"]:disabled, main button:disabled, main .button:disabled	{ border: 2px solid rgba( 0,0,0,0.15 ); background: #f5f5f5; color: #646464; cursor: default; }

/********| SENT                                                                                                                           |*******/
.frm_sent_table															{ width: 100%; }
.frm_sent_table > tbody > tr > td									{ padding: 6px 0; line-height: 24px; }
.frm_sent_table > tbody > tr > td.frm_sent_label				{ padding: 6px 16px 6px 0; font-weight: bold; }
.frm_sent_table > tbody > tr > td.frm_subtitle					{ font-size: 22px; }
.frm_sent_table > tbody > tr > td.frm_spacer						{ line-height: 1px; }
.frm_sent_table > tbody > tr > td.frm_spacer > div				{ height: 4px; margin: 16px 0; background: rgba( 0,0,0,0.15 ); }

/********| MOBILE                                                                                                                         |*******/
.frm_mobile .frm_table,
.frm_mobile .frm_table > tbody,
.frm_mobile .frm_table > tbody > tr,
.frm_mobile .frm_table > tbody > tr > td							{ display: block; padding-right: 0; }
.frm_mobile .frm_table > tbody > tr > td.frm_label				{ padding-bottom: 0; }
.frm_mobile .frm_table > tbody > tr > td.frm_label > label	{ text-align: left; padding-bottom: 0; }
.frm_mobile .frm_table > tbody > tr > td.frm_comment,
.frm_mobile .frm_table > tbody > tr > td.frm_comment > div	{ padding-top: 0; }

.frm_mobile .frm_sent_table,
.frm_mobile .frm_sent_table > tbody,
.frm_mobile .frm_sent_table > tbody > tr,
.frm_mobile .frm_sent_table > tbody > tr > td					{ display: block; padding-right: 0; }
.frm_mobile .frm_sent_table > tbody > tr > td.frm_sent_label{ padding: 12px 0 0 0; }

/********| ERROR                                                                                                                          |*******/
main label.error															{ display: block; line-height: 36px; margin-bottom: 4px; }
main label.error:before													{ line-height: 36px; }

/********| CAPTCHA                                                                                                                        |*******/
td.frm_input_captcha														{ text-align: center; }
td.frm_input_captcha > div												{ display: inline-block; }

/********| WITH VARIABLE COLUMN WIDTH                                                                                                     |*******/
.ff .ff_container															{ margin: -8px; }
.ff label																	{ position: relative; display: block; width: 100%; min-height: 24px; line-height: 24px; font-weight: bold; }
.ff .flex_box_12															{ position: relative; padding: 8px; }
.ff .flex_box_12.flex_box_label_radiocheck						{ margin: 0 0 -8px 0; padding: 8px 8px 0 8px; }

.ff button { width: 100%; }
.flex_box_12.flex_box_auto { width: auto; }


