.fields {
    position: relative;
}

.field-container {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5px 0;
}
.field-container + .field-container {
    margin-top: 10px;
}
.field-container .field-name {
    flex:  1 1 100px;
    color: #999fa7;
    font-size: 14px;
    text-align: end;
}
.field-container.edit .field-name {
    line-height: 20pt;
}
.field-container.view .field-name {
    line-height: 11pt;
}
.field-container .field-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex:  2 1 200px;
    margin-left: 25px;
    min-height: 28px;
}
.field-container .field-select > * {
    flex: 1 0 90%;
}
.field-container .field-select .field-buttons {
    text-align: right;
    margin-left: 5px;
}
.field-container .field-select .webform-small-button {
    margin-right: 0;
}
.field-container .field-select .field-after-comment {
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 11px;
    font-style: italic;
}

.alert-container {
    margin-bottom: 24px;
}

.data-container {
    margin-bottom: 20px;
}

.error-block {
    text-align: center;
    padding: 15px 0;
    color: #F50606;
}

.hidden {
    display: none;
}

.required-field {
    color: #F50606;
}

/* Input */
.field-select input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not(.main-ui-square-search-item),
.field-select textarea {
    display: block;
    box-sizing: border-box;
    padding: 10px 9px;
    min-height: 39px;
    max-width: 100%;
    width: 100%;
    outline: none;
    border: 1px solid #c4c7cc;
    border-radius: 1px;
    background-color: #fff;
    color: #424956;
    font: 15px/17px "Helvetica Neue", Helvetica, Arial, sans-serif;
    transition: 220ms all ease;
}
/* Multiple Input */
.field-select .field-wrap:not(.fields) .field-item:not(.fields) {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    margin-bottom: 5px;
    -webkit-box-align: center;
    align-items: center;
}
.field-select .field-wrap:not(.fields) input[type=button] {
    display: inline;
    margin-bottom: 5px;
    padding: 0;
    width: auto;
    border: 0;
    border-bottom: 1px dotted #cbced2;
    background: 0;
    color: #80868e;
    font: 13px/15px "Helvetica Neue",Helvetica,Arial,sans-serif;
    cursor: pointer;
    transition: all 220ms ease;
}

/* Select */
.field-select select {
    border-radius: 1px;
    background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2211%22%20height%3D%227%22%20viewBox%3D%220%200%2011%207%22%3E%20%20%3Cpath%20fill%3D%22%23979797%22%20fill-rule%3D%22evenodd%22%20d%3D%22M349.545942%2C95.4246212%20L349.545942%2C89.6066017%20L347.606602%2C89.6066017%20L347.606602%2C96.3942911%20L347.606602%2C97.363961%20L355.363961%2C97.363961%20L355.363961%2C95.4246212%20L349.545942%2C95.4246212%20Z%22%20transform%3D%22rotate%28-45%2067.431%20465.144%29%22/%3E%3C/svg%3E) no-repeat calc(100% - 6px) center;
    vertical-align: bottom;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    padding: 10px 9px;
    min-height: 39px;
    max-width: 100%;
    width: 100%;
    outline: none;
    border: 1px solid #c4c7cc;
    color: #424956;
    font: 15px/17px "Helvetica Neue", Helvetica, Arial, sans-serif;
    transition: 220ms all ease;
}
.field-select select:focus {
    border-color: #64a6f3;
}
.field-select select:disabled {
    background-color: #eee;
}
.field-select .main-ui-control.main-ui-select,
.field-select .main-ui-control.main-ui-multi-select {
    border-color: #c4c7cc;
}

/* Datetime */
.field-select .fields.field-item.date,
.field-select .fields.field-item.datetime {
    width: 250px;
}
.field-select .fields.field-item.date.field-item,
.field-select .fields.field-item.datetime.field-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    margin-bottom: 10px;
    -webkit-box-align: center;
    align-items: center;
}
.field-select .fields.date input:not([type="button"]),
.field-select .fields.datetime input:not([type="button"]) {
    background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217%22%20height%3D%2215%22%20viewBox%3D%220%200%2017%2015%22%3E%20%20%3Cpath%20fill%3D%22%23A1A1A1%22%20d%3D%22M19.2203068%2C227.579302%20C19.4159762%2C227.579302%2019.6036161%2C227.503694%2019.7418756%2C227.369138%20C19.8801351%2C227.234582%2019.9576669%2C227.052123%2019.957385%2C226.861969%20L19.957385%2C225.786486%20C19.957385%2C225.390884%2019.6273838%2C225.070185%2019.2203068%2C225.070185%20C18.8132298%2C225.070185%2018.4832287%2C225.390884%2018.4832287%2C225.786486%20L18.4832287%2C226.861969%20C18.4829467%2C227.052123%2018.5604785%2C227.234582%2018.698738%2C227.369138%20C18.8369975%2C227.503694%2019.0246374%2C227.579302%2019.2203068%2C227.579302%20L19.2203068%2C227.579302%20Z%20M11.7858009%2C227.652584%20C12.2169272%2C227.652584%2012.566424%2C227.312939%2012.566424%2C226.893965%20L12.566424%2C225.758618%20C12.566424%2C225.339645%2012.2169272%2C225%2011.7858009%2C225%20C11.3546747%2C225%2011.0051778%2C225.339645%2011.0051778%2C225.758618%20L11.0051778%2C226.893965%20C11.0051778%2C227.095164%2011.0874218%2C227.288121%2011.233817%2C227.43039%20C11.3802123%2C227.572658%2011.5787668%2C227.652584%2011.7858009%2C227.652584%20L11.7858009%2C227.652584%20Z%20M22.0369225%2C226.582261%20L20.8134152%2C226.582261%20L20.8134152%2C227.098328%20C20.8134152%2C227.953376%2020.1001563%2C228.646529%2019.2203068%2C228.646529%20C18.3404574%2C228.646529%2017.6271984%2C227.953376%2017.6271984%2C227.098328%20L17.6271984%2C226.582261%20L13.3789093%2C226.582261%20L13.3789093%2C227.098328%20C13.3789093%2C227.953376%2012.6656504%2C228.646529%2011.7858009%2C228.646529%20C10.9059515%2C228.646529%2010.1926925%2C227.953376%2010.1926925%2C227.098328%20L10.1926925%2C226.582261%20L8.96918531%2C226.582261%20C8.41963391%2C226.58108%207.89468921%2C226.803615%207.52173741%2C227.195865%20C7.14878561%2C227.588115%206.96191611%2C228.114226%207.00647571%2C228.646529%20L7.00647571%2C238.967866%20C7.00647571%2C239.537898%207.48198171%2C240%208.06854801%2C240%20L22.9375597%2C240%20C23.524126%2C240%2023.999632%2C239.537898%2023.999632%2C238.967866%20L23.999632%2C228.646529%20C24.020459%2C227.558434%2023.1547325%2C226.647912%2022.0369225%2C226.582261%20Z%20M22%2C238%20L9.00000001%2C238%20L9.00000001%2C231%20L22%2C231%20L22%2C238%20Z%20M12.6705071%2C234.641161%20C12.2449609%2C234.998271%2011.8674281%2C235.406081%2011.5468347%2C235.854951%20C11.3616803%2C236.149457%2011.2456369%2C236.48002%2011.2069715%2C236.823092%20L14.7064997%2C236.823092%20L14.7064997%2C235.922039%20L12.7236107%2C235.922039%20C12.7820647%2C235.825793%2012.850385%2C235.735538%2012.9275286%2C235.652653%20C13.0110783%2C235.560449%2013.2107479%2C235.373976%2013.5265374%2C235.093236%20C13.7608069%2C234.894272%2013.9791618%2C234.678277%2014.1797118%2C234.44712%20C14.344479%2C234.251596%2014.479337%2C234.03398%2014.5801131%2C233.801005%20C14.6639123%2C233.59354%2014.7067873%2C233.372603%2014.7064997%2C233.149728%20C14.7148934%2C232.768765%2014.5538791%2C232.402777%2014.2646776%2C232.145462%20C13.9312208%2C231.861749%2013.4963595%2C231.716804%2013.0539152%2C231.741898%20C12.6354439%2C231.727784%2012.2241582%2C231.850236%2011.8856357%2C232.089727%20C11.5433086%2C232.380948%2011.3412673%2C232.797575%2011.3280478%2C233.239524%20L12.3168371%2C233.336544%20C12.3118734%2C233.115932%2012.3870846%2C232.900679%2012.5292515%2C232.728618%20C12.8124615%2C232.488233%2013.2338215%2C232.484726%2013.521227%2C232.720361%20C13.6488467%2C232.855654%2013.7140671%2C233.035733%2013.7017793%2C233.218881%20C13.6937327%2C233.432916%2013.6197322%2C233.63967%2013.4893648%2C233.812358%20C13.2408452%2C234.112072%2012.9669355%2C234.391035%2012.6705071%2C234.646322%20L12.6705071%2C234.641161%20Z%20M17.6696813%2C236.823092%20L18.635105%2C236.823092%20L18.635105%2C235.804376%20L19.2829691%2C235.804376%20L19.2829691%2C234.955962%20L18.635105%2C234.955962%20L18.635105%2C231.746026%20L17.79713%2C231.746026%20L15.5381023%2C234.960091%20L15.5381023%2C235.808505%20L17.6696813%2C235.808505%20L17.6696813%2C236.827221%20L17.6696813%2C236.823092%20Z%20M16.4727258%2C234.951834%20L17.6696813%2C233.221978%20L17.6696813%2C234.955962%20L16.4727258%2C234.955962%20L16.4727258%2C234.951834%20Z%22%20transform%3D%22translate%28-7%20-225%29%22/%3E%3C/svg%3E) no-repeat 95% center;
}
.field-select .fields.date input[type="button"],
.field-select .fields.datetime input[type="button"] {
    display: inline;
    padding: 0;
    width: auto;
    border: none;
    border-bottom: 1px dotted #cbced2;
    background: none;
    color: #80868e;
    font: 13px/15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: all 220ms ease;
}
.field-select .field-item.date i.fields.date.icon,
.field-select .field-item.datetime i.fields.datetime.icon {
    position: absolute;
    top: 50%;
    right: 5px;
    margin-right: 6px;
    cursor: pointer;
    opacity: 0;
    background-position-x: right;
    transition: 220ms all ease;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.field-select .fields.date.icon:hover,
.field-select .fields.datetime.icon:hover {
    border: 0;
    background-color: transparent;
    margin: 0 2px;
}

/* Checkboxes */

.container-cbx {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.container-cbx input {
    height: 0;
    width: 0;
    opacity: 0;
}
.container-cbx .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    width: 26px;
    background-color: #fff;
    border: solid 1px #c4c7cc;
}
.container-cbx:hover input ~ .checkmark {
    background-color: #ccc;
}
.container-cbx input:checked ~ .checkmark {
    background-color: #2196F3;
}
.container-cbx .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.container-cbx input:checked ~ .checkmark:after {
    display: block;
}
.container-cbx .checkmark:after {
    left: 10px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.container-cbx .cbx-label {
    line-height: 32px;
}

/* Radio */

.container-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.container-radio .radio-label {
    line-height: 30px;
}
.container-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    left: 0;
    z-index: 20;
    min-height: 100%;
    margin: 0;
    top: 0;
    height: 100%;
}
.container-radio .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    width: 26px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #c4c7cc;
}
.container-radio:hover input ~ .checkmark {
    background-color: #ccc;
}
.container-radio input:checked ~ .checkmark {
    background-color: #2196F3;
}
.container-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.container-radio input:checked ~ .checkmark:after {
    display: block;
}
.container-radio .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/* Confirm dialog */
.confirm-question {
    padding: 24px 10px 0;
    font-weight: bold;
    color: #F50606;
}

.field-description {
    text-align: right;
    font-size: 10px;
}