/* General styles */

html,
body {
    height: 100%;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font: 15px/1.4 'Clear Sans', sans-serif;
    margin: 0;
    color: #424242;
    background: #eee;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

a {
    color: inherit;
}

input,
textarea,
select {
    font: inherit;
}

:focus {
    outline: 0;
}

::-moz-focus-inner {
    border: 0;
}

p,
ul,
ol,
li {
    margin: 0;
    padding: 0;
}

/* Default content title */

.default-title {
    font-size: 25px;
    line-height: 1;
    margin-bottom: 10px;
}

/* Default link color */

.default-link > a {
    font-weight: bold;
    text-decoration: none;
    color: #f44336;
}

/* Default video container */

.default-video {
    margin: 20px 0;
}

/* Default description style */

.default-description {
    overflow: auto;
}

.default-description p,
.default-description ul,
.default-description ol,
.default-description li {
    margin: 1em 0;
}

.default-description > div > :first-child {
    margin-top: 0;
}

.default-description > div > :last-child {
    margin-bottom: 0;
}

.default-description ul,
.default-description ol {
    margin-left: 3em;
}

.default-description a {
    color: #f44336;
    text-decoration: none;
}

.default-description a:hover {
    text-decoration: underline;
}

/* Default table style */

.default-table {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #9e9e9e;
    border-top: 2px solid #f44336;
}

.default-table tr:nth-child(even) td {
    background: #eee;
}

.default-table td,
.default-table th {
    padding: 10px 10px;
}

.default-table td:not(:last-child),
.default-table th:not(:last-child) {
    border-right: 1px solid #9e9e9e;
}

.default-table th {
    color: #f44336;
    border-bottom: 1px solid #9e9e9e;
}

.default-table p {
    margin: 0;
}

/* Pageable */

.pageable-content > :not(:first-child) {
    padding-top: 15px;
}

.pageable-content > :not(:last-child) {
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

/* Paging navigator */

.paging-navigator {
    font-size: 0;
    text-align: center;
}

.first-paging-navigator {
    margin-bottom: 20px;
}

.last-paging-navigator {
    margin-top: 20px;
}

.paging-navigator .first,
.paging-navigator .prev,
.paging-navigator .next,
.paging-navigator .last,
.paging-navigator .goto {
    display: inline-block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    vertical-align: top;
}

.paging-navigator a {
    display: inline-block;
    min-width: 40px;
    height: 40px;
    text-decoration: none;
    padding: 0 20px;
    color: #757575;
    border-radius: 2px;
    box-sizing: border-box;
}

.paging-navigator a[disabled='disabled'] {
    color: #757575;
    background: #e0e0e0;
}

.paging-navigator .goto {
    font-size: 15px;
}

.paging-navigator .first a,
.paging-navigator .prev a,
.paging-navigator .next a,
.paging-navigator .last a {
    width: 50px;
    background: center no-repeat;
}

.paging-navigator .first a {
    background-image: url('../images/navigation/first-ver-8CC387D621EDDF1A94B1145B8118E112.svg');
}

.paging-navigator .prev a {
    background-image: url('../images/navigation/previous-ver-50D827FD10568E9970331FB7EEEB632C.svg');
}

.paging-navigator .next a {
    background-image: url('../images/navigation/next-ver-06B41B5CEA590A4A1AB6D52D39D8BE0B.svg');
}

.paging-navigator .last a {
    background-image: url('../images/navigation/last-ver-42486279486F724DBB9A5DCEDC0CBF8C.svg');
}

.paging-navigator .first a[disabled='disabled'],
.paging-navigator .prev a[disabled='disabled'],
.paging-navigator .next a[disabled='disabled'],
.paging-navigator .last a[disabled='disabled'] {
    background-color: transparent;
    opacity: 0.4;
}

/* Form components */

.primary-button {
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    height: 40px;
    min-width: 120px;
    padding: 0 20px;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    vertical-align: middle;
    -webkit-appearance: none;
}

a.primary-button {
    line-height: 40px;
    text-align: center;
    text-decoration: none;
}

.primary-button {
    color: #fff;
    background: #f44336;
    transition: background-color 0.2s ease;
}

.primary-button:active {
    background: #c62828;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
select,
textarea {
    border: 1px solid #9e9e9e;
    padding: 0 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
select {
    height: 40px;
    line-height: 40px;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
textarea {
    border-radius: 0;
    -webkit-appearance: none;
}

textarea {
    height: 125px;
    padding: 10px;
    resize: none;
}

input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='password']:focus,
select:focus,
textarea:focus {
    border-color: #f44336;
    box-shadow: 0 0 0 3px rgba(243, 65, 53, 0.15);
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
}

::-webkit-input-placeholder {
    color: #9e9e9e;
    opacity: 1;
}

:-moz-placeholder {
    color: #9e9e9e;
    opacity: 1;
}

::-moz-placeholder {
    color: #9e9e9e;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #9e9e9e;
    opacity: 1;
}

/* Form component */

/* One line layout */

.form-component:not(:first-child) {
    margin-top: 20px;
}

.form-component > label {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.form-component > label > .form-component-title {
    display: table-cell;
    vertical-align: middle;
    width: 60px;
    padding-right: 10px;
    word-wrap: break-word;
}

.form-component > label > .form-component-editor {
    display: table-cell;
    vertical-align: middle;
}

.form-component > label > .form-component-reset {
    display: table-cell;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    background: url('../images/clear-ver-7E75412BFB800696F8C78B1F3F93C525.png') center no-repeat;
}

.form-component input[type='text'],
.form-component input[type='tel'],
.form-component input[type='email'],
.form-component input[type='password'],
.form-component textarea,
.form-component select {
    width: 100%;
    display: block;
}

/* Two lines layout */

.form-component--stack {
    display: block;
}

.form-component--stack > label > .form-component-title {
    display: block;
    width: auto;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: bold;
    color: #616161;
}

.form-component--stack > label > .form-component-editor {
    display: block;
}

.form-component--stack > label > .form-component-reset {
    display: block;
}

/* Visually disabled state */

.form-component-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Form components validation */

.form-component.invalid input[type='text'],
.form-component.invalid input[type='tel'],
.form-component.invalid input[type='email'],
.form-component.invalid input[type='password'],
.form-component.invalid textarea,
.form-component.invalid .attribute-editor-combobox ul.mz-ul {
    outline: 1px dotted #f44336;
    outline-offset: -4px;
}

.form-component.invalid input[type='checkbox'] + label {
    color: #f44336;
}

/* Buttons panel */

.buttons-panel {
    position: relative;
    margin-top: 20px;
    text-align: center;
}

.buttons-panel > div > * {
    display: inline-block;
    margin-left: 10px;
}

.buttons-panel > div > :first-child {
    margin-left: 0;
}

.buttons-panel .wicket-ajax-indicator {
    position: absolute;
    left: 0;
    top: 4px;
}

/* Checkbox form component */

.checkbox-view {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox-view > input {
    opacity: 0;
    width: 20px;
    height: 20px;
    position: absolute;
}

.checkbox-view > label > .checker {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #9e9e9e;
    border-radius: 2px;
    background: #fff;
    transition: 0.1s border, 0.1s background-color, 0.1s box-shadow;
}

.checkbox-view > label > span {
    vertical-align: top;
    line-height: 20px;
    margin-left: 5px;
}

.checkbox-view > input + label > .checker:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: url('../images/check-ver-9DF562239203B49A4E0BE35D478534E6.svg') 1px center no-repeat;
    background-size: 16px 16px;
    opacity: 0;
    transition: 0.1s opacity;
}

.checkbox-view > input:checked + label > .checker {
    border-color: #f44336;
    background: #f44336;
}

.checkbox-view > input:checked + label > .checker:before {
    opacity: 1;
}

.checkbox-view > input:disabled + label > .checker {
    background-color: #9e9e9e;
    opacity: 0.8;
}

/* Styled checkbox */

.styled-checkbox {
    display: block;
}

.styled-checkbox .styled-checkbox-check {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #9e9e9e;
    background: #fff;
    transition: 0.4s border, 0.4s box-shadow;
}

.styled-checkbox .styled-checkbox-label {
    display: inline;
    vertical-align: middle;
    margin-left: 5px;
}

.styled-checkbox > input {
    opacity: 0;
    width: 20px;
    height: 20px;
    position: absolute;
}

.styled-checkbox > input + .styled-checkbox-check:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: url('../images/check-ver-9DF562239203B49A4E0BE35D478534E6.svg') 1px center no-repeat;
    background-size: 16px 16px;
    opacity: 0;
    transition: 0.1s opacity;
}

.styled-checkbox > input:checked + .styled-checkbox-check:before {
    opacity: 1;
}

.styled-checkbox > input:disabled + .styled-checkbox-check {
    background-color: #9e9e9e;
    opacity: 0.8;
}

/*
 * Combobox form component
 */

/* Combobox panel */

.combobox .attribute-editor-combobox {
    position: relative;
    cursor: default;
}

/* Combobox field */

.combobox .mz-ul {
    list-style: none;
    min-height: 40px; /* Height of the component */
    margin: 0;
    padding-left: 6px;
    padding-right: 40px; /* Width of the arrow button */
    border: 1px solid #9e9e9e;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.combobox .attribute-editor-combobox.focused .mz-ul {
    border-color: #f44336;
    box-shadow: 0 0 0 3px rgba(243, 65, 53, 0.15);
}

.combobox .show-choices {
    font-size: inherit;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url('../images/arrow-ver-F90D29E0A6F4DF74698F66EFFDA12687.svg') center no-repeat;
}

.combobox .mz-choice {
    display: block;
    line-height: 38px;
    margin: 0;
    padding: 0;
    cursor: default;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Combobox field for multiple selection */

.combobox--multiselect .mz-ul {
    font-size: 0;
    padding-left: 1px;
    padding-bottom: 1px;
}

.combobox--multiselect .mz-ul > li {
    display: inline-block;
    font-size: 13px;
    min-height: 36px;
    line-height: 34px;
}

.combobox--multiselect .mz-choice {
    font-size: 11px;
    border: 1px solid #e0e0e0;
    margin: 1px 1px 0 0;
    padding: 0 18px 0 6px;
    background: #eee;
    white-space: normal;
}

.combobox--multiselect .remove-choice {
    position: absolute;
    display: block;
    top: 11px;
    right: 3px;
    width: 12px;
    height: 12px;
    background: url('../images/cross-small-ver-F8828730A785CBFFA7130F86BB1B4695.png') center no-repeat;
}

/* Combobox dropdown list */

.combobox .panelPopup {
    border: 1px solid #9e9e9e;
    border-top: 0;
    background: #fff;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.combobox .content-container {
    max-height: 320px;
    overflow: auto;
}

.combobox .panelPopup .content-container .item {
    padding: 3px 6px;
    background: transparent;
    cursor: pointer;
}

.combobox .panelPopup .content-container .item:hover {
    background: #eee;
}

/* Combobox dropdown list multiselect */

.combobox--multiselect .panelPopup .content-container .item {
    position: relative;
    padding: 4px 4px 4px 30px;
}

.combobox--multiselect .panelPopup .content-container .item:before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 14px;
    height: 14px;
    border: 1px solid #9e9e9e;
    border-radius: 2px;
    background: #fff;
}

.combobox--multiselect .panelPopup .content-container .item:after {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background-size: 16px 16px;
}

.combobox--multiselect .panelPopup .content-container .item.selected:after {
    border-color: #f44336;
    background-color: #f44336;
    background-image: url('../images/check-ver-9DF562239203B49A4E0BE35D478534E6.svg');
    background-size: 14px 14px;
}

/* Ajax indicator */

.combobox .wicket-ajax-indicator {
    position: absolute;
    left: 3px;
    top: 5px;
}

/* Container for login page */

.login-view {
    width: 380px;
    margin: 10px auto;
}

@media (max-width: 420px) {
    .login-view {
        width: 100%;
    }
}

/* Form feedback label */

.form-feedback-label {
    color: #f44336;
    font-size: 13px;
    margin: 10px 0;
}

/* Message box of error pages */

.error-view {
    width: 1140px;
    margin: 10px auto;
    text-align: center;
}

@media (max-width: 1240px) {
    .error-view {
        width: 100%;
    }
}

.error-view .collapsible-layout-header {
    cursor: pointer;
}

.error-description {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 20px;
}

.error-view .collapsible-layout-content {
    border-top: 1px solid #e0e0e0;
}

.stack-trace-view pre {
    word-wrap: break-word;
    margin: 20px;
    overflow: auto;
}

/* Qtip */

div.qtip-normdocs {
    color: #fff;
    border: 0 #f44336;
    background: #f44336;
    font-size: 13px;
    border-radius: 0;
    padding: 4px 8px;
    margin-top: -8px;
}

div.qtip-normdocs-search {
    color: #424242;
    border: 0 #eee;
    background: #eee;
    font-size: 13px;
    border-radius: 0;
    padding: 4px 8px;
    margin-top: -8px;
}

/* ReCaptcha badge */

.grecaptcha-badge {
    visibility: hidden;
}

.recaptcha-message {
    font-size: 13px;
    color: #9e9e9e;
    margin: 10px 0 20px;
}

.recaptcha-message > a {
    color: #e57373;
    text-decoration: none;
}

.recaptcha-message > a:hover {
    text-decoration: underline;
}

/* Animation keyframes */

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loader-rotation {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Fonts */

@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/bebasneue_bold-ver-52932BA3731290CFE78DD45846240276.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/ClearSans-Regular-ver-2EA640A7B9802752B71FA6564B2D22CA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/ClearSans-Italic-ver-4F8BF3F525B85DEBA6A581E3E2B88224.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/ClearSans-Bold-ver-4CF6F681B05DDC6375E51C804A496FE2.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/ClearSans-BoldItalic-ver-98701BFCBF89C926EEBAD6D18D766C6F.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}