﻿/* Special form classes */
.mpFormField textarea, .mpFormField input { font-family:Arial, Helvetica, "Helvetica Neue", sans-serif; font-size:14px; color:#495057;}
.formResultLabel { color:#495057; font-family:Arial, Helvetica, "Helvetica Neue", sans-serif; font-size:14px; padding-right:5px;}
.formResultValue { color:#495057; font-family:Arial, Helvetica, "Helvetica Neue", sans-serif; font-size:14px; padding-left:5px;}
.mpFormField select, .mpFormField option { font-family:Arial, Helvetica, "Helvetica Neue", sans-serif; color:#495057; font-size:14px;}
.mpFormTable td, .mpFormTable th, .mpErrorSummary { font-family:Arial, Helvetica, "Helvetica Neue", sans-serif; color:#495057; font-size:14px;}

/* Form CSS MailPlus (only for the webtemplate) */
table.pollTable { width:100%}
td.pollQuestion { font-weight:bold; padding:0 0 15px; width:100%}
td.pollItem { padding-bottom:6px; vertical-align:top; display:none !important }
td.pollAnswerHighLight { font-weight:normal !important; padding:0 10px 0 0; vertical-align:top}
td.pollAnswer { padding:0 10px 0 0; vertical-align:top}
td.pollVisual { padding-bottom:6px; padding-top:6px; vertical-align:top; width:250px; height:5px;}
td.pollPercentage { padding-bottom:6px; padding-left:20px; text-align:right; vertical-align:top}
tr.pollAnswerHighLight, td.pollCellLeft, td.pollCell100Pct { background-color:#22b24c}
.pollTable, .mpFormResultLabel { font-weight:bold}
.mpFormResultLabel { padding-right:10px;}
.pollVisualTable { border-collapse:collapse; width:100%}
td.pollCell0Pct { background-color:#FFFFFF; border:1px solid black; height:5px;}
td.pollCell100Pct { border:1px solid black; height:5px;}
td.pollCellLeft { border-bottom:1px solid black; border-left:1px solid black; border-top:1px solid black; height:5px;}
td.pollCellRight { background-color:#FFFFFF; border-bottom:1px solid black; border-right:1px solid black; border-top:1px solid black; height:5px;}
.mpFormField textarea { vertical-align:top; width:60%}
.mpFormField .sublabel { font-size:10px; font-style:italic}
.mpFormField ul { height:auto; list-style-type:none; padding-left:0px; margin:0px;}
.mpFormField li { clear:both; height:auto; overflow:hidden; width:100%; margin-bottom:5px;}
.mpFormField textarea, .mpFormField input { margin:0 10px 0 0; width:95%}
.mpFormText { cursor:text; font-weight:normal !important; vertical-align:top}
.mpSpacerCell { cursor:text; font-weight:bold; vertical-align:top; width:50%}
.submitCell { width:60%}
.submitCellSpacer { width:40%}
.mpDateField { width:34px !important;}
.mpFormField ul li input, .mpFormField input.submitButton { width:auto}
.mpradioButtonTable { width:100%}
.mpradioButtonTable .mpFormAnswer { text-align:center}
.mandatorySign { color:#ED3032}
.mpFormDescription { font-size:8px; margin:0 3px 0 0; text-align:center; font-weight:normal}
.mpFormLabel { width:40%; font-weight:bold; padding-right:5px; padding-left:5px;}
.descriptionLabel { font-weight:normal !important}
.mpFormTable th { font-size:9px; vertical-align:bottom}
.mpQuestionTable, .mpFormTable, .mpFormResult { width:100%; border-collapse:collapse}
.mpQuestionTable.error.inlineValidated .mpFormField, .mpQuestionTable.error.inlineValidated .mpMatrix { background:transparent url(https://static.mailplus.nl/icons/delete.png) no-repeat scroll 100% 10%; padding-right:10px;}
.mpQuestionTable.inlineValidated .mpFormField, .mpQuestionTable.inlineValidated .mpMatrix { background:transparent url(https://static.mailplus.nl/icons/check.png) no-repeat scroll 100% 10%; padding-right:10px;}
.mpFormResultChildLabel { text-indent:20px;}
.mpQuestionTable td, .mpFormTable td { border:0 none; vertical-align:top; padding-bottom:5px; padding-top:5px;}
.mpQuestionTable { margin-bottom:3px;}
.mpErrorSummary { color:#ED3032; font-weight:bold; text-align:left; padding-top:20px;}
.mpErrorSummary ul { margin-bottom:12px; margin-top:12px;}
.mpErrorRow td { color:#ED3032; font-size:12px;}
table.error { background-color:#FFDEDF; border:1px solid #ED3032}
.mpTwoColumnLayout .mpErrorRow td { padding-left:5px;}
.mpOneColumnLayout .mpFormField, .mpOneColumnLayout .mpErrorRow td { padding-left:5px;}
.mpMatrixTable { width:100%; border-collapse:collapse}
.mpMatrixTable .mpFormLabel { padding-left:10px;}
.mpMatrixTable td { padding-bottom:3px;}
.mpMatrixHeader .mpFormDescription4 { width:15%}
.mpMatrixHeader .mpFormDescription5 { width:12%}
.mpMatrixHeader .mpFormDescription10 { width:auto}
.mpTwoColumnLayout .mpMatrixTable .mpErrorRow td { padding-left:5px;}
.mpMatrixTable .mpFormAnswer { text-align:center}
.mpMatrixLabel { font-weight:bold}
.formHelpText { background-image:url("https://static.mailplus.nl/icons/icon_about.png"); border:medium none; display:inline-block; height:16px; width:16px;}
.ui-datepicker-trigger { background:url("https://static.mailplus.nl/icons/calendar.png") repeat scroll left top transparent; display:inline-block; height:16px; width:16px;font-size:0px; line-height:0px;vertical-align:top}
.mpHighlight { background-color:#f3f3f3 !important;}
td.submitCell input, td.submitCellSpacer input { border:none; font-family:Arial, Helvetica, "Helvetica Neue", sans-serif; font-weight:bold; font-size:16px; color:#ffffff; cursor:pointer; background-color:#22B24C; -webkit-appearance:none; padding:0 20px; height:41px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width:600px) {

/* Formfeedback CSS (Email- and webtemplate) */
.mpFormResultLabel, .mpFormResultValue, .formResultLabel, .formResultValue { width:100% !important; float:left !important;} 

/* Form CSS MailPlus (only for the webtemplate) */
.pollItem {display:none !important;}
.pollAnswer, .pollAnswerHighLight {font-weight:normal !important; width:100% !important; float:left !important;}
.pollVisual {width:200px !important; float:left !important; padding-bottom:20px !important; text-align:left !important;}
.pollVisualTable {height:15px !important;}
.pollPercentage {padding-top:20px !important;}
.mpFormField, .mpFormLabel {width:100% !important; float:left !important;}
.mpFormField input {padding-left:5px !important;}
.descriptionLabel, .formResultLabel, .mpFormResultLabel, .pollAnswer, .pollItem, .pollPercentage, .pollQuestion {font-size:16px !important;}
.mpFormField textarea, .mpFormField input {font-size:16px !important;}
.mpFormField input[type=text] {height:30px !important;}
.mpFormField input[type=radio], .mpFormField input[type=checkbox] {vertical-align:top !important; width:22px !important; height:22px !important;}
.mpFormField li {margin-bottom:25px !important;}
select, option { width:100%; display:block}
td.submitCell input, td.submitCellSpacer input {width:100% !important; height:40px !important;}
.submitCellSpacer, .submitCell {width:auto !important;}