:root{
    --oanl-form-indent: 15rem;
    --oanl-input-width-wide: 18em;
    --oanl-input-width-medium: 12em;
    --oanl-input-width-short: 7em;
}

.obligatory{
    color: #ee0000;
}

input.disabled, input:disabled {
	border: #aaa 1px solid;
	color: #aaa;
}

select.disabled, select:disabled  {
	color: #aaa;
}

.rc{
    --oanl-form-indent: calc(15rem - 0.5em - 1px);
}
legend {
    font-weight: bold;
}
.rc>legend{
    padding-inline-end:0.5rem;
}

fieldset {
  border: none;
  padding: 0;
}

input, select, textarea, button {
  padding: var(--oanl-input-padding, 0.4em 0.3em 0.5em);
  border: 1px solid var(--oanl-input-border-color,#bbb);
  margin :0;
  box-sizing: border-box;
  border-radius: var(--oanl-input-border-radius, 0.1rem);
}

input[type=button],input[type=reset], input[type=submit], button{
    padding: 0.4em 0.7em;
    cursor: pointer;
}

/* Input fields and select boxes with special sizes
tiny   : 1-3 characters
short  : 3-10 characters
medium : 10-25 characters
wide   : >25 characters
*/
input.wide, textarea.wide {
    width: var(--oanl-input-width-wide);
}

input.tiny {
    width: 3em;
}
input.tiny[type=number] {
    width: 3.6em;
}
select.tiny, #booking-container select.tiny {
    min-width: 2em;
    width:auto;
}
input.short {
    width: var(--oanl-input-width-short);
}
select.short, #booking-container select.short {
    min-width: var(--oanl-input-width-short);
    width:auto;
}
input[type=date].short{
    width: 8.25em;
}

input.medium {
    width: var(--oanl-input-width-medium);
}
select.medium, #booking-container select.medium {
    min-width: var(--oanl-input-width-medium);
    width:auto;
}
textarea.wide-2x,
input.wide-2x{
    width: calc( 1.6667 * var(--oanl-input-width-wide));
}
input.full-width, textarea.full-width, select.full-width {
    width: 100%;
    box-sizing: border-box;
}

select.wide, #booking-container select.wide {
    min-width: var(--oanl-input-width-wide);
}
select.wide-2x{
    min-width: calc( 1.6667 * var(--oanl-input-width-wide))
}

.form-row input[type=checkbox],
.form-row input[type=radio]{
    width: auto;
    vertical-align: middle;
}
.form-row input[type=checkbox]+label,
.form-row input[type=radio]+label{
    vertical-align: middle;
}

input.iColorPicker{
    border:1px solid #C8C8C8;
    border-radius:3px;
}

.form-row {
  margin: 0.5em 0;
  overflow:hidden;
  padding-bottom: 0.05px;
  min-height:1.5em;
}

.form-label {
    padding-block: var(--oanl-input-padding-block, 0.3em);
    width: 180px;
    max-width: calc(var(--oanl-form-indent) - 10px);
    float: left;
    margin-right: 10px;
}
.form-row-indent-s{
    margin-inline-start: 1.25em;
    --oanl-form-indent: 13.75em;
}
.form-row-indent,
.form-row-indent-l{
    margin-inline-start: var(--oanl-form-indent);
}

label {
  cursor: pointer;
}

label.oa-label-disabled, label.disabled {
  color: var(--oanl-color-text-muted, #b8b8b8);
  cursor: default;
}

.hint {
  margin: 0;
}
.hint,
.form-input-hint,
.required-fields{
    color: var(--oanl-color-text-muted, #a0a0a0);
}
.form-input-hint {
    margin-block: 1rem;
}

.form-row>.hint {
    padding-left: var(--oanl-form-indent);
    margin-top: 3px;
}

.errorSummary {
  background: #ffcdcd;
  border: #c00 1px solid;
  border-radius: 5px;
  padding: 8px;
  overflow:hidden;
}

.errorSummary ul {
    padding: 0 0 0 10px;
    margin: 5px 0;
}

.errorSummary ul li {
  background: url("images/icons/exclamation.png") no-repeat scroll 0 3px transparent;
  padding: 3px 0 3px 30px;
  list-style: none;
}

.alert.filter-hidden .filter-hide{
    float:right;
    margin-left:10px;
}

.error {
  background: #ffcdcd;
}
input.error, select.error, textarea.error {
    border: 1px solid #cc0000;
}
input[type=checkbox].error {
    border: none;
    box-shadow:0 0 5px #FF0000
}

fieldset.error {
    background: transparent;
    border-color: #cc0000;
}
fieldset.error>legend{
    color: #cc0000;
}


.success {
    background-color: #e4fedb;
    border-color: #4EAA46;
}
select.success {
    outline: 2px solid #4EAA46;
}

textarea.auto-size-v {
    field-sizing: content;
    resize: vertical;
    min-height: 2.4em;
}

.input input,
.input select,
.input textarea {
  background: #fff !important;
}

.inputLabel{
  position:absolute;
  color:#888;
  margin: 0 !important;
  overflow: hidden;
}
.widgetConfig-generate,
#widget-save,
#widget-refresh {
    font-size:16px;
    margin: 6px 0;
    height: 42px;
    cursor: pointer;
}
#widget-save, 
#widget-refresh {
  padding-right: 10px;
}
.widgetConfig-generate img,
#widget-save img,
#widget-refresh img{
    vertical-align: middle; 
    margin:  3px 12px 3px 12px;
}
.widgetConfig-generate img:first-child{
    margin-left: 0;
}
.widgetConfig-generate img:last-child{
    margin-right: 0;
}

#oaColorPicker{
    position: absolute;
    z-index: 9999;
    background-color: #333333;
    border: 1px solid #CCCCCC;
    padding:4px;
    min-width: 18em;
}
.oaColorPicker-table{
    border-collapse: collapse;
}
.oaColorPicker-table tbody td{
    border: 1px solid #000000;
    cursor: pointer;
}

.oaColorPicker-icon{
    display: inline-block;
    width :16px;
    height: 16px;
    background-image: url(/images/color.png);
    vertical-align : text-top;
    cursor: pointer;
    margin-left : 3px;
}

.oaColorPicker-empty{
    color: white;
    padding: 6px;
}
.oaColorPicker-transparent{
    padding: 6px;
    background: url("jquery-ui/flat/images/ui-bg_diagonals-thick_90_eeeeee_40x40.png") repeat scroll 50% 50% #EEEEEE;
}

.oaColorPicker-preview{
}
.oaColorPicker-preview span{
    width: 4.5em;
    padding: 4px;
    font-size: 90%;
    text-align: center;
    vertical-align: middle;
    border:1px solid black;
    background-color: white;
    display: block;
    margin: 15px auto;
}

/* Styling for widget config */
#limit-apptypes-container,
#limit-resources-container,
#limit-products-container,
#limit-memberships-container,
#override-account-settings-container{
    display: none;
    margin-left:var(--oanl-form-indent);
}

.objectgroup-container,
#limit-products-container .productgroup-container,
#limit-apptypes-container .facility-container,
#crossselling-products-container .productgroup-container,
#crossselling-products-required-container .productgroup-container {
    float:left;
    width:15em; 
    margin-right:0.5em;
    overflow:hidden;
}
.objectgroup-container h4,
#limit-products-container .productgroup-container h4,
#limit-apptypes-container .facility-container h4,
#crossselling-products-container .productgroup-container h4,
#crossselling-products-required-container .productgroup-container h4 {
    margin-bottom: 1px;
    padding-bottom: 1px;
    border-bottom: 1px dotted #808080;
    margin-right:10px;
}

.tableaction-controls{
    float:left;
    white-space: nowrap;
}

.tableaction-controls input[type=submit]{
    min-width: 24px;
}
/* Styling for fields in the consumer form (fe the booking widget) */
.frm-consumer-multi-column{
    min-width: 10em;
    padding-right: 0.5em;
}
.frm-consumer-multi-row{
    clear: both;
}

.rc.highlight{
   border-color:green; 
   background-color: #EBFAE8;
}
/*
 *  styling for filters in the limited space that is available
 *
 *  .filter-box-400 is a 'column' of about 400px wide. It is used in layouts with
 *     2 filter columns and a box with extra commands (fe the apps list).
 */
 .filter-box-400 {
     float : left;
     margin-right: 1em;
     width: 410px;
 }
 .filter-box-400 .form-label{
     width: 160px;
     padding-right: 5px;
 }
 .filter-box-400 select.wide {
     min-width: 220px;
 }
 .filter-box-400 select {
     max-width: 230px;
 }
 .filter-box-400 input.wide {
     width: 220px;
 }

/**
 * This has the same purpose, but it should be a bit more flexible
 */
 .oanl-filter-box{
     width: 30em;
     --oanl-input-width-wide: 16em;
     .form-label{
         width: 12em;
     }
 }

 ul.list-multicolumn{
     list-style-type: none;
     overflow: hidden;
     padding-left: 0;
 }
 ul.list-multicolumn>li{
     float:left;
     width: 200px;
     min-height: 100px;
     margin-bottom: 10px;
 }
 ul.list-multicolumn>li>h4{
    border-bottom: 1px dotted #808080;
    margin-right: 10px;
    padding-bottom: 1px;
    margin-bottom: 4px;
 }

 h4.expand{
     background: url(images/expand.gif) no-repeat top right;
    cursor:pointer;
 }
h4.collapse{
    background: url(images/collapse.gif) no-repeat top right;
    cursor:pointer;
}
.category-footer{
    font-style: italic;
    margin-top: 2px;
}

.invoice-section-default{
    margin-top: 3px;
}

.invoice-item-price, .invoice-item-total {
    text-align: right;
}

.oa-form-error {
  background: #ffcdcd;
}
input.oa-form-error {
    border: 1px solid #cc0000;
}
input[type=checkbox].oa-form-error {
    border: none;
    box-shadow: 0 0 5px 0 #FF1605;
    background-color: #ffcdcd;
}

label.form-required:after,
label.oa-form-required:after{
    content: " *";
}

.oa-btn-back:before{
    font-family: FontAwesome;
    font-weight: 900;
    content: '\f053';
    margin-right: 5px;
}

.oa-table-zebra{

}
.oa-table-zebra>tbody>tr:nth-child(odd) {
	background: #E6F2FF;
}

.oa-table-zebra>tbody>tr:nth-child(odd):hover {
    background-color: #FFF6BF;
}

.oa-table-fullwidth{
    width :100%;
    margin-left: 0;
    margin-right:0;
    box-sizing: border-box;
}
.oa-table-cell-radio, .oa-table-cell-checkbox{
    width: 20px;
    text-align: center;
}

.oa-table-cell-contentwidth{
    width: 1%;
    white-space:nowrap;
}

.oa-table-row-template{
    display:none;
}

.oa-table-row-selected{
    background-color: #FFF6BF !important;
}

.oa-membership-package{
    display: block;
    margin : 0 auto;
    width: 20px;
    height: 20px;
    color: white;
    background-color: #3D43F4;
    border-radius: 3px;
    text-align: center;
    line-height: 19px;
    font-weight: bold;
}
.oa-membership-package-2{
    background-color: #2B2DAD;
}
.oa-membership-package-3{
    background-color: #1e1f79;
}

.oa-currency{
    text-align: right;
}
.oa-option-disabled{
    color: #666;
}

.consumer-photo-container{
    width: 140px; 
    height: 180px; 
    margin: 1em 1em 1em 0;    
    position: relative;
}

.consumer-photo{
    width: 140px; 
    height: 180px; 
    border-radius: 0.2em;
    cursor: pointer;
}
.consumer-photo-overlay{
    opacity: 0.8;
    position: absolute;
    top: 30%;
    left: 1em;
    right: 1em;
    padding: 0.4em;
    background-color: white;
    border: 1px solid #ccc;
    -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.inline-edit {
  /*background: #fff;*/
}
/**
 * Tags, displayed as white text on a colored background
 * Note: background-color is usually set explicitly as that is user defined.
 **/
.oa-tag{
    display: inline-block;
    padding: .3em .6em;
    margin-bottom: .1em;
    font-size: 90%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    min-width: 1.5em;
}

.form-input-container{
    margin-inline-start: var(--oanl-form-indent);
}
.form-input-container-multifield{
    display: inline-flex;
}
.form-input-container-multifield .form-input-multifield{
    flex: 1 1 auto;
}
.form-input-container-multifield .form-input-multifield-fixed{
    flex-grow: 0;
}
.form-input-container-multifield.wide{
    width: var(--oanl-input-width-wide);
}
.form-input-container-multifield.medium {
    width: var(--oanl-input-width-medium);
}

.form-input-group{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;

    &.wide{
        width: var(--oanl-input-width-wide);
    }
    &.wide-2x{
        width: calc( 1.6667 * var(--oanl-input-width-wide));
    }

    .input-icon{
        padding: var(--oanl-input-padding);
        border: 1px solid var(--oanl-input-border-color, #bbb);
        border-radius: var(--oanl-input-border-radius, 0.1rem);
        text-align: center;
        box-sizing: border-box;
        min-width: 3em;
        background-color: #ddd;
        &.fixed-width{
            flex-grow: 0;
            flex-shrink: 0;
        }
    }
    & input, & select, & textarea{
        flex: 1 1 auto;
        width: 0;
        min-height: 2.4em;
    }
    .input-fixed{
        flex-grow: 0;
    }

    :not(:last-child){
        border-right-width: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    :not(:first-child){
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
}


.form-row-checkbox-float > input[type="checkbox"], .form-row-checkbox-float > input[type="radio"] {
    float: left;
    margin-right: 0.5em;
    margin-top: 0.15em;
}
.form-label-container {
    overflow: hidden;
}
.form-label-container .form-input-container {
    margin-left: 13.5em;
}
.form-label-container>h4:first-child{
    margin-top : 0;
}

.form-input-spinner{
    input{
        width: 0;
        text-align: center;
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        appearance: textfield;
        -moz-appearance: textfield;
        border-inline: none;
    }
    button{
        width: 2.2em;
        border-right-width: 1px !important;
    }
}

/**
 *   Namespaced form styling
 **/

.oanl-form-error {
    color        : #a94442;
    background   : #f2dede;
    border-color : #a94442;
}
label.oanl-form-error{
    background: inherit;
}
input[type=checkbox].oanl-form-error{
    border: none;
    box-shadow:0 0 5px #FF0000
}

.mce-container.oanl-form-error{
    border-color : #a94442;
    -webkit-box-shadow: 0 1px 2px rgba(169, 68, 66, 0.5);
    -moz-box-shadow: 0 1px 2px rgba(169, 68, 66, 0.5);
    box-shadow: 0 1px 2px rgba(169, 68, 66, 0.5);    
}
/**
 *  Define a max-width for form sections
 **/
form>section,
section.oanl-maxwidth,
div.oanl-maxwidth{
    max-width: 60em;
    box-sizing: border-box;
}

form>section.oanl-fullwidth{
    max-width: none;
}

/**
 Form section that is rendered with a background so that it stands out
**/
.frm-section-em{
    background-color: #eee;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.first-time-wizard input:focus,
.first-time-wizard select:focus,
.first-time-wizard textarea:focus{
    outline: none;
}

.oanl-selection-box{
    margin: 1em 0;
    padding: 0;
    border: 1px solid #ccc;
    max-width: 60em;
    display:block;
    overflow: hidden;
    border-radius: var(--oanl-border-radius);    
}
.oanl-selection-box[hidden]{
    display: none;
}
label.oanl-selection-box{
    cursor: pointer;
}
img.oanl-selection-image{
    float:right;
    padding: 1em;
    max-height: 10em;
    max-width: 10em;
}
.oanl-selection-title{
    margin: 0;
    padding: 0.8em 0.5em;
    font-size: 1.2em;
    font-weight: normal;
}
.oanl-selection-title>i{
    margin-right: 0.5em;
}
.oanl-selection-box.oanl-selection-box-compact .oanl-selection-title{
    padding: 0.5em;    
}

.oanl-selection-box.oanl-selection-box-compact .oanl-selection-label,
.oanl-selection-box.oanl-selection-box-compact .oanl-selection-input{
    padding: 0 0.5em 0.5em;
}

.oanl-selection-content{
    display:flex;
}
.oanl-selection-label{
    flex-grow: 1;
    padding: 1em;
    
}
.oanl-selection-input{
    padding: 1em;
}

.oanl-selection-box:has(.oanl-selection-input input:checked),
.oanl-selection-box:has(input.oanl-selection-box-toggle:checked),
.oanl-selection-selected{
    border-color: var(--oanl-color-primary, #1C9BCE);
}
.oanl-selection-box:has(.oanl-selection-input input:checked) .oanl-selection-title,
.oanl-selection-box:has(input.oanl-selection-box-toggle:checked) .oanl-selection-title,
.oanl-selection-selected .oanl-selection-title{
    background-color: #E6F2FF;
}

/**
 Very specific styling for the profile select box on widget configuration
**/
#profile option.from-parent {
    color: #bbb;
}
@supports(field-sizing:content) {
    input[type=email]{
        width: auto;
        min-width: var(--oanl-input-width-wide);
        max-width: 30em;
        field-sizing: content;
    }
}