﻿
/*************************************************************************************************************************************************/
/********| 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 ); }


.searchbox																	{ position: relative; padding: 0 40px 0 0; }
.searchbox.searchbox_50													{ padding: 0 50px 0 0; }
.searchbox.searchbox_60													{ padding: 0 60px 0 0; }
.searchbox input															{ border-radius: 4px 0 0 4px; border-right: none; }
.searchbox button															{ position: absolute; right: 0; top: 0; width: 60px; border-radius: 0 4px 4px 0; }

.easyform > div															{ margin-bottom: 10px; }
.easyform > div:last-of-type											{ margin-bottom: 0; }
.easyform > div.easyform_box											{ margin: 0 0 10px 0; padding: 10px; border-radius: 4px; background: #d4eaf6; }
.easyform > div table td												{ padding: 0 5px; line-height: 40px; }
.easyform > div table td:first-of-type								{ padding-left: 0; }
.easyform > div table td:last-of-type								{ padding-right: 0; }

/********| INPUT                                            |*************************************************************************************/
main input, main textarea, main select								{ width: 100%; line-height: 30px; border: 1px solid #efefef; border-radius: 4px; background: rgba( 255,255,255,0.5 ); }
main input																	{ height: 40px; padding: 5px 10px; }
main input.input_50														{ height: 50px; padding: 10px 10px; }
main input.input_60														{ height: 60px; padding: 15px 10px; }
main textarea																{ height: 140px; padding: 5px 10px; }
main select																	{ height: 40px; padding: 5px 50px 5px 10px; }
main select.select_50													{ height: 50px; padding: 10px 60px 10px 10px; }
main select.select_60													{ height: 60px; padding: 15px 70px 15px 10px; }
.select_box																	{ position: relative; }
.select_box select														{ position: relative; z-index: 2; background: none; outline: none; -moz-appearance: none; -webkit-appearance: none; }
.select_box label															{ position: absolute; z-index: 1; right: 1px; top: 1px; width: 38px; height: 38px; line-height: 38px; text-align: center; background: #7a7e82; color: #ffffff; border-radius: 0 3px 3px 0; }
.select_box select.select_lightblue + label						{ background: #d4eaf6; color: #0083C7; }
.select_box select.select_50 + label								{ width: 48px; height: 48px; line-height: 48px; }
.select_box select.select_60 + label								{ width: 58px; height: 58px; line-height: 58px; }

.select_box select::-ms-expand {
    display: none;
}

main input:disabled, main textarea:disabled, main select:disabled	{ background: #f5f5f5; color: #646464; }
main input:invalid, main textarea:invalid, main select:invalid	{ border-color: #f00000; }

main label.date input,
main label.time input													{ position: relative; padding: 4px 8px 4px 40px; }
main label.date,
main label.time															{ display: block; position: relative; }
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.date_40:after,
main label.time.time_40:after											{ height: 36px; line-height: 36px; border-radius: 2px 0 0 2px; }
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: 50%; border: 2px solid rgba( 0,0,0,0.15 ); margin-top: -12px; padding: 10px; background: rgba( 255,255,255,0.5 ); }	
main input[type="checkbox"] + label:after							{ display: none; content: "\f00c"; position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px;  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 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: 50%; border: 2px solid rgba( 0,0,0,0.15 ); margin-top: -12px; 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: 50%; width: 14px; height: 14px; margin-top: -7px; 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, #cmsShadowFoot button			{ display: inline-block; height: 40px; line-height: 30px; border: none; padding: 4px 20px; border-radius: 4px; background: #0083C7; color: #ffffff; border: 1px solid trasparent; cursor: pointer; outline: none; }
main input[type="button"].button_50, main button.button_50, main .button.button_50			{ height: 50px; padding: 9px 20px; }
main input[type="button"].button_60, main button.button_60, main .button.button_60			{ height: 60px; padding: 14px 20px; }
main input[type="button"].button_lightblue, main button.button_lightblue, main .button.button_lightblue			{ background: #d4eaf6; color: #0083C7; }
main input[type="button"].button_white, main button.button_white, main .button.button_white							{ padding: 12px 18px; background: #ffffff; color: #0083C7; border: 2px solid #0083C7; font-size: 24px; }
main input[type="button"].button_lightgray, main button.button_lightgray, main .button.button_lightgray			{ background: #E8E7E8; color: #000000; }
main input[type="button"].button_gray, main button.button_gray, main .button.button_gray								{ background: #7A7E82; color: #ffffff; }
main input[type="button"].border, main button.border, main .button.border						{ border-color: #efefef; }
main input[type="button"].icon i, main button.icon i, main .button.icon i						{ font-size: 20px; line-height: inherit; }


main input[type="button"]:hover, main button:hover, main .button:hover, #cmsShadowFoot button:hover				{ border-color: rgba(122, 126, 130, 0.8); background: rgba(122, 126, 130, 0.7); /*border-color: rgba( 58,199,58,0.8 ); background: rgba( 58,199,58,0.7 );*/ }
main input[type="button"].button_lightblue:hover, main button.button_lightblue:hover, main .button.button_lightblue:hover	{ background: #0083C7; color: #ffffff; }
main input[type="button"].button_white:hover, main button.button_white:hover, main .button.button_white:hover					{ background: #0083C7; color: #ffffff; border-color: #0083C7 }
main input[type="button"].button_lightgray:hover, main button.button_lightgray:hover, main .button.button_lightgray:hover	{ background: #0083C7; color: #ffffff; }
main input[type="button"].button_gray:hover, main button.button_gray:hover, main .button.button_gray:hover						{ background: #0083C7; color: #ffffff; }
main input[type="button"]:disabled, main button:disabled, main .button:disabled	{ border-color: 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																	{ 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; }



