/* datepicker */
.uib-datepicker ~ .dropdown-menu .btn-default { font-weight: normal; padding: 5px 10px; color: #333; background-color: #e6e6e6; border-color: #adadad; }
.uib-datepicker ~ .dropdown-menu .btn-default span { color: #333; }
.uib-datepicker ~ .dropdown-menu .btn-default.active span { font-weight: bold; }
.uib-datepicker button.btn-default { padding: 5px 10px 5px 10px; }
.uib-datepicker ~ .dropdown-menu table:focus { outline: none; }
.uib-datepicker ~ .dropdown-menu { padding: 10px; }
.uib-datepicker ~ .dropdown-menu li { padding-left: 0!important; padding-right: 0!important; }
.uib-datepicker[readonly] { background-color: white; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* components */
.group-label { font-weight: normal; display: inline-block; width: 25%; text-align: right; padding-right: 20px; vertical-align: middle; line-height: 1; }
.label-small { font-size: 75%; font-weight: normal; }
.field-inner, .field-group-inner { vertical-align: middle; }
.mobile-group-mainlabel { display: none; }
.mobile-group-label { display: none;  }

/* field group */
.field-group { display: block; margin-bottom: 8px; }
.field-group label { vertical-align: baseline; }
/*.field-group.inline { display: inline-block; margin-right: 10px; width: 100%; }*/
.field-group > .group-label ~ .field-group-inner { width: 75%; }
.field-group > .field-group-inner { display: inline-block; width: 100%; }
.field-group.inline > .field-group-inner { display: inline-flex; align-items: center; }
.field-group.multiline label { vertical-align: top; }

/* input field */
.input-field { display: block; margin-bottom: 8px; flex-shrink: 1; }
.input-field.inline { display: inline-block; margin-right: 10px; margin-bottom: 0; }
.input-field.inline:last-child { margin-right: 0; }
.input-field.inline .group-label { width: auto; margin-left: 40px; }
.input-field.inline:first-child .group-label { margin-left: 0; }
.input-field.inline .group-label ~ .field-inner { width: auto; }
.input-field .group-label ~ .field-inner { width: 75%; }
.input-field .field-inner { display: inline-flex; width: 100%; }
.input-field.input-field-textarea label { vertical-align: top; }
.input-field input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #c4c4c4; padding: 4px 8px 4px 8px; flex-grow: 1; max-width: 100%; min-width: 1px; box-shadow: none; border-radius: 0; margin: 0; }
.input-field.inline input { width: 100%; }
.input-field input:focus { outline: none; box-shadow: inset 0 0 1px 2px #d7eaf8; }
.input-field input:disabled { border-color: #d0d0d0; background-color: #f8f8f8; color: #111; }
.input-field textarea { border: 1px solid #c4c4c4; padding: 4px 8px 4px 8px; flex-grow: 1; max-width: 100%; min-width: 1px; min-height: 144px; border-radius: 0; }
.input-field.inline textarea { width: 100%; }
.input-field textarea:focus { outline: none; box-shadow: inset 0 0 1px 2px #d7eaf8; }
.input-field textarea:disabled { border-color: #d0d0d0; background-color: #f8f8f8; color: #111; }
.input-field .input-field-addon-left, .input-field .input-field-addon-right { border: 1px solid #c4c4c4; display: inline-block; padding: 4px 0px 4px 0px; background-color: #f4f4f4; min-width: 32px; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: black; }
.input-field .input-field-addon-left { border-right: none; }
.input-field .input-field-addon-right { border-left: none; }
.input-field .input-field-group-left.input-field-group-right .input-field-addon-left {}
.input-field .input-field-group-left.input-field-group-right .input-field-addon-right {}
.input-field .input-field-group-left.input-field-group-right input {}
.input-field.ng-invalid input, .input-field input.ng-invalid { border-color: #fd0100; }
.input-field.ng-invalid input.ng-untouched, .input-field input.ng-invalid.ng-untouched { border-color: #c4c4c4; }
.input-field-number input, .input-field input[type=number] { -moz-appearance: textfield; appearance: textfield; text-align: right; }
.input-field input[type=number]::-webkit-inner-spin-button, .input-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; }

/* date field */
.date-field { display: block; margin-bottom: 8px; flex-shrink: 1; }
.date-field.inline { display: inline-block; margin-right: 10px; margin-bottom: 0; }
.date-field.inline:last-child { margin-right: 0; }
.date-field.inline .group-label { width: auto; margin-left: 40px; }
.date-field.inline:first-child .group-label { margin-left: 0; }
.date-field.inline .group-label ~ .field-inner { width: 125px; }
.date-field .group-label ~ .field-inner { width: 75%;}
.date-field .field-inner { display: inline-flex; width: 100%; }
.date-field input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #c4c4c4; padding: 4px 8px 4px 8px; flex-grow: 1; max-width: 100%; min-width: 1px; border-radius: 0; box-shadow: none; border-radius: 0; margin: 0; }
.date-field.inline input { width: 100%; }
.date-field input:focus { outline: none; box-shadow: inset 0 0 1px 2px #d7eaf8; }
.date-field input:disabled { border-color: #d0d0d0; background-color: #f8f8f8; color: #111; }
.date-field .date-field-button { border: 1px solid #c4c4c4; display: inline-block; padding: 4px 8px 4px 8px; background-color: #f4f4f4; min-width: 32px; text-align: center; }
.date-field .date-field-button-left { border-right: none; }
.date-field .date-field-button-right { border-left: none; }
.date-field.ng-invalid input, .date-field input.ng-invalid { border-color: #fd0100; }
.date-field.ng-invalid input.ng-untouched, .date-field input.ng-invalid.ng-untouched { border-color: #c4c4c4; }
.date-field .date-field-time {}
.date-field .date-field-datetime { padding-left: 10px; }
.date-field .date-field-time span { padding-left: 5px; padding-right: 5px; }
.date-field .date-field-time input { text-align: right; width: 3.1em; }
.date-field .date-field-hour {}
.date-field .date-field-minute {}
.date-field .date-field-second {}

/* static field */
.static-field { display: block; margin-bottom: 8px; flex-shrink: 1; }
.static-field.inline { display: inline-block; margin-right: 10px; margin-bottom: 0; }
.static-field.inline:last-child { margin-right: 0; }
.static-field.inline .group-label { width: auto; margin-left: 40px; }
.static-field.inline:first-child .group-label { margin-left: 0; }
.static-field.inline .group-label ~ .field-inner { width: auto; }
.static-field .group-label ~ .field-inner { width: 75%; }
.static-field .field-inner { display: inline-flex; width: 100%; margin-bottom: 0; }
/*.static-field > span { display: inline-block; padding: 5px 9px 5px 9px; flex-grow: 1; max-width: 100%; min-width: 1px; font-size: 14px; font-weight: normal; color: black; }*/
.static-field > span { display: inline-block; padding: 5px 9px 5px 0; flex-grow: 1; max-width: 100%; min-width: 1px; font-size: 14px; font-weight: normal; color: black; }
.static-field span[disabled] { color: #888; }

/* select field */
.select-field { display: block; margin-bottom: 8px; flex-shrink: 1; cursor: pointer; }
.select-field.inline { display: inline-block; margin-right: 10px; margin-bottom: 0; }
.select-field.inline:last-child { margin-right: 0; }
.select-field .group-label ~ .field-inner { width: 75%; }
.select-field.inline .group-label { width: auto; margin-left: 40px; }
.select-field.inline:first-child .group-label { margin-left: 0; }
.select-field.inline .group-label ~ .field-inner { width: auto; flex-grow: 1; }
.select-field .field-inner { display: inline-flex; width: 100%; position: relative; }
.select-field input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #c4c4c4; padding: 4px 8px 4px 8px; flex-grow: 1; max-width: 100%; min-width: 1px; cursor: pointer; border-radius: 0; box-shadow: none; margin: 0; }
.select-field.inline input { width: 100%; }
.select-field input:focus { outline: none; box-shadow: inset 0 0 1px 2px #d7eaf8; }
.select-field input:disabled { border-color: #d0d0d0; background-color: #f8f8f8; color: #888; }
.select-field .select-field-caret { border: 1px solid #c4c4c4; display: block; padding: 4px 8px 4px 8px; background-color: #f4f4f4; min-width: 32px; text-align: center; flex-grow: 0; flex-shrink: 0; }
.select-field .select-field-caret { border-left: none; }
.select-field[disabled] .select-field-caret { color: #888; }
.select-field .select-option-list, .select-option-list-clone { border: 1px solid #c4c4c4; background-color: white; display: none; position: absolute; left: 0; top: 100%; width: 100%; overflow-y: auto; max-height: 70vh; z-index: 60000; box-shadow: 0 4px 10px -4px rgba(0,0,0,1); }
.select-field .select-option-list:focus, .select-option-list-clone:focus { outline: none; }
.select-field .select-option, .select-option-list-clone .select-option { display: block; cursor: pointer; padding: 4px 8px 4px 8px; }
.select-field .select-option-list:hover .selected, .select-option-list.select-option-list-clone:hover .selected { background-color: inherit; color: inherit; }
.select-field .select-option:hover, .select-field .select-option.selected:hover, .select-option-list-clone .select-option:hover, .select-option-list-clone .select-option.selected:hover { background-color: #00aeff; color: white; }
.select-field .select-option.selected, .select-option-list-clone .select-option.selected { background-color: #00aeff; color: white; }

.select-field-multi .select-tag-container { width: 100%; height: 100%; display: flex; flex-grow: 1; flex-shrink: 1;}
.select-field-multi .select-tag-list { display: block; min-width: 4px; border: 1px solid #c4c4c4; border-right: none; background-color: white; flex-shrink: 1; flex-grow: 5; width: 100%; }
.select-field.select-field-multi input { display: block; flex-shrink: 5; flex-grow: 1; }
.select-field-multi[disabled] .select-tag-list { border: 1px solid #d0d0d0; border-right: none; }
.select-field-multi .select-tag { display: inline-block; border: 1px solid #c4c4c4; border-radius: 4px; padding: 0px 4px 0px 4px; margin: 3px 0 3px 4px; }
.select-field-multi .select-tag-x { cursor: pointer; padding-left: 4px; color: #c4c4c4; }
.select-field-multi .select-tag-x:hover { color: black; }
.select-field-multi input { border-left: none; }
.select-field-multi .select-option.selected { display: none; }
.select-field-multi .select-option.selected, .select-option-list-multiselect-clone .select-option.selected { display: none; }

/* custom checkbox button */
.checkbox-field { display: block; }
.checkbox-field.inline { display: inline-block; margin-right: 15px; }
.checkbox-field.inline:last-child { margin-right: 0; }
.checkbox-field.inline .group-label { width: auto; }
.checkbox-field.inline .group-label ~ .field-inner { width: auto; }
.checkbox-field .group-label ~ .field-inner { width: 75%;}
.checkbox-field .field-inner { display: inline-block; }
.checkbox-field .field-inner label { font-weight: normal; display: inline-block; }
.checkbox-field input[type="checkbox"]:not(:checked), .checkbox-field input[type="checkbox"]:checked { position: absolute; left: -9999px; }
.checkbox-field input[type="checkbox"]:not(:checked) + label, .checkbox-field input[type="checkbox"]:checked + label { position: relative; padding-left: 25px; cursor: pointer; display: inline-block!important; min-height: 1em; }
.checkbox-field input[type="checkbox"]:not(:checked) + label:before, .checkbox-field input[type="checkbox"]:checked + label:before { content: ''; position: absolute; left:0; top: 2px; width: 16px; height: 16px; border: 2px solid #c4c4c4; }
.checkbox-field input[type="checkbox"]:not(:checked) + label:after, .checkbox-field input[type="checkbox"]:checked + label:after { content: ''; background-color: #00aeff; width: 8px; height: 8px; position: absolute; top: 6px; left: 4px; transition: all .15s; }
.checkbox-field input[type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); }
.checkbox-field input[type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); }
.checkbox-field input[type="checkbox"]:disabled:not(:checked) + label:before, .checkbox-field input[type="checkbox"]:disabled:checked + label:before { background-color: #ddd; }
.checkbox-field input[type="checkbox"]:disabled:checked + label:after { color: #999; }
.checkbox-field input[type="checkbox"]:disabled + label { color: #aaa; }

/* custom radio button */
.radio-field { display: block; }
.radio-field.inline { display: inline-block; }
.radio-field.inline .group-label { width: auto; }
.radio-field.inline .group-label ~ .field-inner { width: auto; }
.radio-field .group-label ~ .field-inner { width: 75%;}
.radio-field .radio-options, .radio-field .radio-option { display: inline-block; }
.radio-field .field-inner label { font-weight: normal; display: inline-block; }
.radio-field .radio-option { margin-right: 15px; }
.radio-field .radio-option:last-child { margin-right: 0; }
.radio-field input[type="radio"]:not(:checked), .radio-field input[type="radio"]:checked { position: absolute; left: -9999px; }
.radio-field input[type="radio"]:not(:checked) + label, .radio-field input[type="radio"]:checked + label { position: relative; padding-left: 25px; cursor: pointer; display: inline-block!important; }
.radio-field input[type="radio"]:not(:checked) + label:before, .radio-field input[type="radio"]:checked + label:before { content: ''; position: absolute; left:0; top: 2px; width: 16px; height: 16px; border: 2px solid #c4c4c4; border-radius: 8px; }
.radio-field input[type="radio"]:not(:checked) + label:after, .radio-field input[type="radio"]:checked + label:after { content: ''; background-color: #00aeff; width: 8px; height: 8px; border-radius: 8px; position: absolute; top: 6px; left: 4px; transition: all .15s; }
.radio-field input[type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0); }
.radio-field input[type="radio"]:checked + label:after { opacity: 1; transform: scale(1); }
.radio-field input[type="radio"]:disabled:not(:checked) + label:before, .radio-field input[type="radio"]:disabled:checked + label:before { background-color: #dddddd; }
.radio-field input[type="radio"]:disabled:checked + label:after { color: #999; }
.radio-field input[type="radio"]:disabled + label { color: #aaa; }

/* rating field */
.rating-field { display: block; margin-bottom: 8px; flex-shrink: 1; }
.rating-field.inline { display: inline-block; margin-right: 10px; margin-bottom: 0; }
.rating-field.inline:last-child { margin-right: 0; }
.rating-field.inline .group-label { width: auto; margin-left: 40px; }
.rating-field.inline:first-child .group-label { margin-left: 0; }
.rating-field.inline .group-label ~ .field-inner { width: auto; }
.rating-field .group-label ~ .field-inner { width: 75%; }
.rating-field .field-inner { display: inline-flex; width: 100%; }
.rating-field .rating-field-container { flex-grow: 1; max-width: 100%; min-width: 1px; }
.rating-field.inline .rating-field-container { width: 100%; }
.rating-field .rating-field-container span { display: inline-block; padding-left: 2px; cursor: pointer; }
.rating-field .rating-field-container[disabled] { color: #888; }
.rating-field .rating-field-container[disabled] span { cursor: inherit; }

/* table field */
.table-field { display: flex; position: relative; overflow: hidden; flex-direction: column; border: 1px solid black; padding-top: 37px; flex-grow: 1; }
.table-field-outer { overflow-y: auto; }
.table-field-inner { display: block; overflow-y: auto; flex-grow: 1; }
.table-field-table { display: table; table-layout: fixed; border-spacing: 0; border-collapse: collapse; width: 100%; }
.table-field.inline .table-field-table { display: inline-table; width: auto; }
.table-field.inline { display: inline-flex; }
.table-field-thead { display: table-header-group; }
.table-field-thead-tr, .table-field-tr { display: table-row; cursor: pointer; }
.table-field-th, .table-field-td { display: table-cell; }
.table-field-tbody { display: table-row-group; }
.table-field-td + .table-field-td { border-left: 1px solid #cfcfcf; }
.table-field-th + .table-field-th div { border-left: 1px solid #80ffff; }
.table-field-th, .table-field-td { border-bottom: 1px solid #cfcfcf; background: #f4f4f4; color: black; padding: 10px 25px 10px 25px; }
.table-field-tr:last-child .table-field-td { border-bottom: none; }
.table-field-th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; }
.table-field-th div { background-color: #00aeff; color: white; position: absolute; display: block; width: 100%; padding: 9px 25px 9px 25px; top: 0; margin-left: -25px; line-height: normal; }
.table-field-tr:nth-child(2n) .table-field-td { background-color: #e4e4e4; }
.table-field-tr:hover .table-field-td { background-color: #d4d4d4; }
.table-field .center { text-align: center; }
.table-field .right { text-align: right; }
.table-field-td { overflow: hidden; white-space: nowrap; }
.table-field-multiselect { display: none; }

/* buttons */
button.button { border: none; background-color: #aaa; color: white; padding: 5px 15px 5px 15px; font-size: 14px; line-height: normal; border-radius: 0; cursor: pointer; }
button.button:disabled, button.button:hover:disabled { background-color: #cfcfcf; color: #999; }
button.button:hover { background-color: #bbb; }
button.button:active { position: relative; top: 1px; }
button.button:disabled:active { position: relative; top: 0; }

button.button-primary { border: none; background-color: #00aeff; color: white; padding: 5px 15px 5px 15px; font-size: 14px; line-height: normal; border-radius: 0; cursor: pointer; }
button.button-primary:disabled, button.button-primary:hover:disabled { background-color: #cfcfcf; color: #999; }
button.button-primary:hover { background-color: #00beff; }
button.button-primary:active { position: relative; top: 1px; }

button.button-light { border: none; background-color: transparent; color: black; padding: 5px 15px 5px 15px; font-size: 14px; line-height: normal; border-radius: 0; cursor: pointer; }
button.button-light:disabled, button.button-light:hover:disabled { color: #888; }
button.button-light:hover, button.button-light:active { text-decoration: underline; }

button.button-icon { border: none; background-color: #aaa; color: white; padding: 5px 10px 5px 10px; font-size: 14px; line-height: normal; border-radius: 0; cursor: pointer; }
button.button-icon:disabled, button.button:hover:disabled { background-color: #cfcfcf; color: #999; }
button.button-icon:hover { background-color: #bbb; }
button.button-icon:active { position: relative; top: 1px; }

/* layout grid */
.grid-row { margin-left: -15px; margin-right: -15px; display: block; }
.grid-col-1, .grid-col-2, .grid-col-3, .grid-col-4, .grid-col-5, .grid-col-6, .grid-col-7, .grid-col-8, .grid-col-9, .grid-col-10, .grid-col-11, .grid-col-12
	{ padding-left: 15px; padding-right: 15px; float: left; min-height: 1px; }
.grid-row:before, .grid-row:after { content: " "; display: table; }
.grid-row:after { clear: both; }
.grid-row-wide { margin-left: -35px; margin-right: -35px; }
.grid-row-wide > .grid-col-1, .grid-row-wide > .grid-col-2, .grid-row-wide > .grid-col-3, .grid-row-wide > .grid-col-4, .grid-row-wide > .grid-col-5, .grid-row-wide > .grid-col-6, .grid-row-wide > .grid-col-7, .grid-row-wide > .grid-col-8, .grid-row-wide > .grid-col-9, .grid-row-wide > .grid-col-10, .grid-row-wide > .grid-col-11, .grid-row-wide > .grid-col-12
	{ padding-left: 35px; padding-right: 35px; float: left; min-height: 1px; }
.grid-row-wide:before, .grid-row-wide:after { content: " "; display: table; }
.grid-row-wide:after { clear: both; }
.grid-col-1 { width: 8.33333333% }
.grid-col-2 { width: 16.66666666%; }
.grid-col-3 { width: 25%; }
.grid-col-4 { width: 33.33333333%; }
.grid-col-5 { width: 41.66666666%; }
.grid-col-6 { width: 50%; }
.grid-col-7 { width: 58.33333333%; }
.grid-col-8 { width: 66.66666666%; }
.grid-col-9 { width: 75%; }
.grid-col-10 { width: 83.33333333%; }
.grid-col-11 { width: 91.66666666%; }
.grid-col-12 { width: 100%; }

/* flex-layout grid */
.flex-grid-row { margin-left: -15px; margin-right: -15px; display: flex; flex-direction: row; flex-wrap: wrap; }
.flex-grid-col-1, .flex-grid-col-2, .flex-grid-col-3, .flex-grid-col-4, .flex-grid-col-5, .flex-grid-col-6, .flex-grid-col-7, .flex-grid-col-8, .flex-grid-col-9, .flex-grid-col-10, .flex-grid-col-11, .flex-grid-col-12
	{ padding-left: 15px; padding-right: 15px; min-height: 1px; flex: 0 0 auto; }
.flex-grid-row-wide { margin-left: -35px; margin-right: -35px; display: flex; flex-direction: row; flex-wrap: wrap; }
.flex-grid-row-wide .flex-grid-col-1, .flex-grid-row-wide .flex-grid-col-2, .flex-grid-row-wide .flex-grid-col-3, .flex-grid-row-wide .flex-grid-col-4, .flex-grid-row-wide .flex-grid-col-5, .flex-grid-row-wide .flex-grid-col-6, .flex-grid-row-wide .flex-grid-col-7, .flex-grid-row-wide .flex-grid-col-8, .flex-grid-row-wide .flex-grid-col-9, .flex-grid-col-10, .flex-grid-row-wide .flex-grid-col-11, .flex-grid-row-wide .flex-grid-col-12
	{ padding-left: 35px; padding-right: 35px; min-height: 1px; flex: 0 0 auto; }
.flex-grid-col-1 { width: 8.33333333% }
.flex-grid-col-2 { width: 16.66666666%; }
.flex-grid-col-3 { width: 25%; }
.flex-grid-col-4 { width: 33.33333333%; }
.flex-grid-col-5 { width: 41.66666666%; }
.flex-grid-col-6 { width: 50%; }
.flex-grid-col-7 { width: 58.33333333%; }
.flex-grid-col-8 { width: 66.66666666%; }
.flex-grid-col-9 { width: 75%; }
.flex-grid-col-10 { width: 83.33333333%; }
.flex-grid-col-11 { width: 91.66666666%; }
.flex-grid-col-12 { width: 100%; }

/* section colspans */
.section-colspan-2-cols-6 { width: calc(200% - -15px); }
.section-colspan-2-cols-4 { width: calc(150% - -15px); }
.section-colspan-3-cols-4 { width: calc(300% - -15px); }
.section-colspan-4-cols-3 { width: calc(400% - -120px); }

.section-colspan-2-cols-3 { width: calc(200% - -15px); }

.grid-row-wide .section-colspan-2-cols-6 { width: calc(200% - -35px); }
.grid-row-wide .section-colspan-2-cols-4 { width: calc(150% - -35px); }
.grid-row-wide .section-colspan-3-cols-4 { width: calc(300% - -35px); }
.grid-row-wide .section-colspan-4-cols-3 { width: calc(400% - -280px); }

/* panels, container, helper */
.field-panel { padding: 15px 30px 15px 30px; display: block; }
.container-left { text-align: left; }
.container-right { text-align: right; }
.container-center { text-align: center; }
.to-right { float: right; }
.to-left { float: left; }
hr { margin-top: 20px; margin-bottom: 20px; border-top: 1px solid #ddd; }

/* messages */
.error-msg { color: #fd0100; }
.error-msg-hidden { color: #fd0100; display: none; }

/* expand */
.vexpand { flex-grow: 1; display: flex!important; flex-direction: column; min-height: 0; }
.vexpand-row { flex-grow: 1; display: flex!important; flex-direction: row; min-height: 0; }

/* modal window */
.modal-lowest-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.1); }
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: transparent; }
.modal-window-container, .modal-window { position: absolute; top: 3vh; max-height: calc(95vh); left: 0; right: 0; margin: 0 auto 0 auto;
										 border: 1px solid #c4c4c4; background-color: white; box-shadow: 0px 1px 12px 1px rgba(0,0,0,0.2); }
.modal-window-size-sm { width: 25vw; }
.modal-window-size-md { width: 40vw; }
.modal-window-size-lg { width: 75vw; }
.modal-window-size-xl { width: 90vw; }
.modal-window-header { padding: 20px 35px 20px 35px; border-bottom: 1px solid #e5e5e5; }
.modal-window-header h1 { font-size: 24px; margin: 0; padding: 0; }
.modal-window-body { background-color: #f1f1f1; padding: 20px 35px 20px 35px; position: relative; min-height: 1px; max-height: calc(95vh - 132px); overflow: auto; }
.modal-window-footer { padding: 20px 35px 20px 35px; text-align: right; border-top: 1px solid #e5e5e5; }

/* drag&drop */
*[draggable=true] { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-drag: element; -webkit-user-drag: element; -khtml-user-drag: element; user-drag: element; cursor: move; }
.item-drop-area { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.item-dragging { opacity: 0.7; }
.item-drag-over { opacity: 1; }
/*.ui-droppable-hover { outline: 2px solid #888; }*/

/* carousel */
.carousel { position: relative; overflow: hidden; display: block; }
.carousel-indicators { position: absolute; bottom: 10px; left: 50%; width: 60%; margin-left: -30%; padding-left: 0; text-align: center; list-style: none; z-index: 2; }
.carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px 4px 1px 4px; border-width: 2px; cursor: pointer; background-color: transparent; border: 2px solid white; border-radius: 10px }
.carousel-indicators li.active-slide { background-color: white; }
.carousel-control { position: absolute; top: 0; height: 100%; width: 15%; cursor: pointer; z-index: 2; }
.carousel-left { left: 0; }
.carousel-right { right: 0; }

.carousel-slide { position: relative; display: none; left: 0; width: 100%; }
.carousel-slide.active-slide { display: block; }
.carousel-slide.left-slide, .carousel-slide.right-slide { display: block; position: absolute; top: 0; left: 0; width: 100%; }

.carousel.left-right-animation .slide-animation { transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; }
.carousel.left-right-animation .active-slide { transform: translate3d(0, 0, 0); }
.carousel.left-right-animation .left-slide { transform: translate3d(-100%, 0, 0); }
.carousel.left-right-animation .right-slide { transform: translate3d(100%, 0, 0); }
.carousel.left-right-animation .active-slide.to-left { transform: translate3d(-100%, 0, 0); }
.carousel.left-right-animation .right-slide.to-left { transform: translate3d(0, 0, 0); }
.carousel.left-right-animation .active-slide.to-right { transform: translate3d(100%, 0, 0); }
.carousel.left-right-animation .left-slide.to-right { transform: translate3d(0, 0, 0); }

.carousel.fade-animation .slide-animation { transition: opacity .6s ease-in-out; }
.carousel.fade-animation .active-slide { opacity: 1; z-index: 0; }
.carousel.fade-animation .left-slide { opacity: 0; z-index: 1; }
.carousel.fade-animation .right-slide { opacity: 0; z-index: 1; }
.carousel.fade-animation .active-slide.to-left { }
.carousel.fade-animation .right-slide.to-left { opacity: 1; }
.carousel.fade-animation .active-slide.to-right { }
.carousel.fade-animation .left-slide.to-right { opacity: 1; }

/* widget */
.widget { position: absolute; }
.widget .widget-container { border-radius: 20px; overflow: hidden; position: absolute; top: 0; bottom: 0; width: 100%; }
.widget .widget-header { background-color: rgba(0,0,0,0.8); height: 50px; line-height: 50px; }
.widget .widget-header .widget-title { color: white; font-size: 20px; font-weight: bold; text-align: center; margin: 0; padding: 0; selec}
.widget .widget-content-container { position: absolute; top: 50px; bottom: 0; width: 100%; overflow: auto; }
.widget .widget-content { padding: 20px; background-color: #dbdbdb; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; position: relative; min-height: 100%; }
.widget .widget-content:after { content: ""; clear: both; display: block; }

.widget.movable .widget-header { cursor: move; }
.widget.resizeable {}
.widget-resize-edge, .widget-resize-corner { display: none; }
.widget.resizeable .widget-resize-edge, .widget.resizeable .widget-resize-corner, .widget.resizeable .ui-draggable-handle.widget-resize-edge, .widget.resizeable .ui-draggable-handle.widget.resizeable { display: block; }
.widget-resize-edge { display: none; border: 2px dashed #00aeff; z-index: 100; position: absolute; }
.widget-resize-top { left: 0; right: 0; top: -2px; height: 1px; cursor: ns-resize; }
.widget-resize-bottom { left: 0; right: 0; bottom: -2px; height: 1px; cursor: ns-resize; }
.widget-resize-left { top: 0; bottom: 0; left: -2px; width: 1px; cursor: ew-resize; }
.widget-resize-right { top: 0; bottom: 0; right: -2px; width: 1px; cursor: ew-resize; }

.widget-resize-corner { display: none; background-color: #00aeff; z-index: 101; position: absolute; width: 6px; height: 6px; }
.widget-resize-left-top { top: -3px; left: -3px; cursor: nwse-resize; }
.widget-resize-right-top { top: -3px; right: -3px; cursor: nesw-resize; }
.widget-resize-left-bottom { bottom: -3px; left: -3px; cursor: nesw-resize; }
.widget-resize-right-bottom { bottom: -3px; right: -3px; cursor: nwse-resize; }

/* colored headers */
.widget .widget-header.red { background-color: #b93e2c; }
.widget .widget-header.yellow { background-color: #d8ba34; }
.widget .widget-header.green { background-color: #57b032; }
.widget .widget-header.red .widget-title, .widget .widget-header.yellow .widget-title, .widget .widget-header.green .widget-title { color: white; }
/* dark widget background */
.widget.dark { background-color: transparent; }
.widget.dark .widget-content { background-color: rgba(0,0,0,0.8); }
/* gray widget background */
.widget.gray { background-color: transparent; }
.widget.gray .widget-content { background-color: #c1c1c1; }
/* widget row/col */
.widget-row {}
.widget-col { display: block; }

/* security code window */
.security-code .input-field { font-size: 30px!important; }
.security-code .input-field input { text-align: center!important; }
.security-code-window { width: 400px!important; max-width: 100vw!important; min-height: auto!important; }
.security-code-window .modal-window-body { min-height: auto!important; height: auto!important; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* layout frame layout */
/*.content { width: 100vw; height: 100vh; }*/
/*.content > div { width: 100%; height: 100%; }*/

.layout-frame { display: flex; flex-direction: column; flex-grow: 1; width: 100vw; height: 100vh; overflow: hidden; }
/*.layout-frame-top { display: flex; flex-direction: column; }*/
.layout-frame-middle { display: flex; flex-direction: row; flex-grow: 1; overflow: auto; }
/*.layout-frame-bottom { display: flex; flex-direction: column; }*/
.layout-frame-header { }
.layout-frame-footer { }
.layout-frame-left { min-height: 100%; display: flex; }
.layout-frame-left > * { display: flex; }
.layout-frame-body { flex-grow: 1; display: flex; flex-direction: column; }
.layout-frame-body > * { flex-grow: 1; display: flex; flex-direction: row;  }
.layout-frame-right { display: flex; flex-direction: row; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* layout app layout */
.layout-app { width: 100vw; height: 100vh; overflow: hidden; }
.layout-app .layout-header {}
.layout-app .layout-logo {}
.layout-app .layout-main-menu {}
.layout-app .layout-user-menu {}
.layout-app .layout-breadcrumb {}
.layout-app .layout-toolbar {}
.layout-app .layout-status-icons {}
.layout-app .layout-body {}
.layout-app .context-container {}
.layout-app .layout-context {}
.layout-app .context-footer {}
.layout-app .layout-main-container {}
.layout-app .layout-main {}
.layout-app .layout-main-footer {}

.layout-dialog { display: flex; flex-direction: column; }
.layout-dialog-row { display: flex; flex-direction: row; }
.layout-dialog-col { flex: 1 1 auto; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* phone and very small screen optimizations */

/* tablet optimizations */
@media only screen and (max-width: 1024px)
{
	.grid-col-1-tablet { width: 8.33333333% }
	.grid-col-2-tablet { width: 16.66666666%; }
	.grid-col-3-tablet { width: 25%; }
	.grid-col-4-tablet { width: 33.33333333%; }
	.grid-col-5-tablet { width: 41.66666666%; }
	.grid-col-6-tablet { width: 50%; }
	.grid-col-7-tablet { width: 58.33333333%; }
	.grid-col-8-tablet { width: 66.66666666%; }
	.grid-col-9-tablet { width: 75%; }
	.grid-col-10-tablet { width: 83.33333333%; }
	.grid-col-11-tablet { width: 91.66666666%; }
	.grid-col-12-tablet { width: 100%; }

	.modal-window-size-sm { width: 40vw; }

	.component-label-top-tablet .field-group .group-label ~ .field-inner { width: 100%; }
	.component-label-top-tablet .field-group .field-inner { display: flex; width: 100%; }
	.component-label-top-tablet .input-field .group-label ~ .field-inner { width: 100%; }
	.component-label-top-tablet .input-field .field-inner { display: flex; width: 100%; }
	.component-label-top-tablet .select-field .group-label ~ .field-inner { width: 100%; }
	.component-label-top-tablet .select-field .field-inner { display: flex; width: 100%; }
	.component-label-top-tablet .date-field .group-label ~ .field-inner { width: 100%; }
	.component-label-top-tablet .date-field .field-inner { display: flex; width: 100%; }
	.component-label-top-tablet .group-label { display: block; width: 100%; text-align: left; padding-right: 0; vertical-align: baseline; }
}

/* tablet optimizations */
@media only screen and (max-width: 768px)
{
}

/* phone optimizations */
@media only screen and (max-width: 600px)
{
	.grid-col-1-phone { width: 8.33333333% }
	.grid-col-2-phone { width: 16.66666666%; }
	.grid-col-3-phone { width: 25%; }
	.grid-col-4-phone { width: 33.33333333%; }
	.grid-col-5-phone { width: 41.66666666%; }
	.grid-col-6-phone { width: 50%; }
	.grid-col-7-phone { width: 58.33333333%; }
	.grid-col-8-phone { width: 66.66666666%; }
	.grid-col-9-phone { width: 75%; }
	.grid-col-10-phone { width: 83.33333333%; }
	.grid-col-11-phone { width: 91.66666666%; }
	.grid-col-12-phone { width: 100%; }

	.component-label-top-phone .field-group .group-label ~ .field-inner { width: 100%; }
	.component-label-top-phone .field-group .field-inner { display: flex; width: 100%; }
	.component-label-top-phone .input-field .group-label ~ .field-inner { width: 100%; }
	.component-label-top-phone .input-field .field-inner { display: flex; width: 100%; }
	.component-label-top-phone .select-field .group-label ~ .field-inner { width: 100%; }
	.component-label-top-phone .select-field .field-inner { display: flex; width: 100%; }
	.component-label-top-phone .date-field .group-label ~ .field-inner { width: 100%; }
	.component-label-top-phone .date-field .field-inner { display: flex; width: 100%; }
	.component-label-top-phone .group-label { display: block; width: 100%; text-align: left; padding-right: 0; vertical-align: baseline; }
}

/* iphone optimizations */
@media only screen and (max-width: 414px)
{
}

/* iphone optimizations */
@media only screen and (max-width: 400px)
{
}

/* iphone optimizations */
@media only screen and (max-width: 350px)
{
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* date picker */
.dropdown-menu
{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-menu .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}

.dropdown-menu .btn-default {
    color: #333;
    background-color: #fff;
}

.dropdown-menu .btn-group-sm > .btn, .dropdown-menu .btn-sm {
    line-height: 1.5;
}

.dropdown-menu .text-center {
    text-align: center;
}

.dropdown-menu .btn.active, .dropdown-menu .btn:active {
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.dropdown-menu .btn-info.active.focus, .dropdown-menu .btn-info.active:focus, .dropdown-menu .btn-info.active:hover, .dropdown-menu .btn-info:active.focus, .dropdown-menu .btn-info:active:focus,
.dropdown-menu .btn-info:active:hover, .dropdown-menu .open > .dropdown-toggle.btn-info.focus, .dropdown-menu .open > .dropdown-toggle.btn-info:focus,
.dropdown-menu .open > .dropdown-toggle.btn-info:hover {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85;
}

.dropdown-menu .text-muted {
    color: #777;
}

.dropdown-menu .pull-left {
    float: left !important;
}

.dropdown-menu .pull-right {
    float: right !important;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dropdown-menu .small, .dropdown-menu small {
    font-size: 85%;
}