/*
 * XSForm  
 * v1.1.0.1
 */

/*
    Used colors
        Primary color dark: #00545b
        Primary color: #007885
        Primary color light: #7cc5cc (124, 197, 204)
        Anchor color: #009ead
        Disabled menus color on the primary color light background: #5d9599
        Background color of the collapsed menu: #eee
        Disabled menus color on the collapsed menu: #bbb
*/

[xsform] .card {
    border: 0;
}

[xsform] .col-form-label {
    padding: 0;
}

[xsform] a {
    cursor: pointer !important;
}

    [xsform] a span i {
        margin-right: 0.25rem;
    }

    [xsform] a:hover span,
    [xs-type=Property] a:hover {
        text-decoration: underline !important;
    }

[xsform] .col {
    padding-left: 0;
    padding-right: 0;
}

[xs-type=Property].row,
[xs-type=List] .row,
[xs-component=TypeHeader] .row {
    margin-right: 0;
    margin-left: 0;
    min-height: 1em;
}

[xs-type=Property][xs-value-type=XSFFileInput].row {
    margin-bottom: 0;
}

[xsform] select[readonly] {
    background: #e9ecef !important;
}

[xs-component=BinaryWrapper] {
    align-items: start !important;
}

[xs-component=ItemCount] {
    margin-bottom: 0.5em !important;
}

[xs-component=TypeHeader],
[xs-component=TypeHeader] .row * {
    padding: 0;
}

[xs-component=ListItemAddBtn] {
    display: block;
    margin-bottom: 0.5rem;
}

[xs-component=ListCaption] [xs-component=ListItemAddBtn] {
    margin-bottom: 0;
}

[xs-component=TypeCollapse],
[xs-component=ListItemDel] {
    margin-left: 1rem;
}

[xsform] div.bootstrap-select {
    width: 100% !important;
}

[xs-element=Element] [xs-component=Sequence] .card-body {
    padding: 0;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(0,0,0,.125);
}

/* header */
[xs-component=ListItem][xs-element=Element] [xs-component=TypeHeader],
[xs-component=Type][xs-element=Element] [xs-component=TypeHeader] {
    background: none;
    padding-left: 0;
    margin-bottom: 0;
    border: 0;
}

    [xs-component=ListItem][xs-element=Element] [xs-component=TypeHeader].collapsed,
    [xs-component=Type][xs-element=Element] [xs-component=TypeHeader].collapsed {
        /*margin-bottom: 1rem;*/
        min-height: 1em;
    }


/* list item */
[xs-component=ListItem] [xs-component=Sequence].show {
    margin-bottom: 1rem;
}

[xs-component=ListItem]:last-child [xs-component=Sequence].show {
    margin-bottom: 0 !important;
}

[xs-component=ListItem]:last-child {
    margin-bottom: 0 !important;
}
[xs-component=ListItem] {
    margin-bottom: 1rem;
}
[xs-component=ListItem] .card-body {
    padding: 0;
}

[xs-type=Sequence] > [xs-type]:last-child {
    margin-bottom: 0 !important;
}


/* PLUGINS OVERRIDES */

/* bootstrap-datepicker (https://github.com/uxsolutions/bootstrap-datepicker/) */
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
    background-color: #7cc5cc;
    background-image: none !important;
}

    .datepicker table tr td.active:active:hover,
    .datepicker table tr td.active.highlighted:active:hover, [xsform]
    .datepicker table tr td.active.active:hover,
    .datepicker table tr td.active.highlighted.active:hover,
    .datepicker table tr td.active:active:focus,
    .datepicker table tr td.active.highlighted:active:focus,
    .datepicker table tr td.active.active:focus,
    .datepicker table tr td.active.highlighted.active:focus,
    .datepicker table tr td.active:active.focus,
    .datepicker table tr td.active.highlighted:active.focus,
    .datepicker table tr td.active.active.focus,
    .datepicker table tr td.active.highlighted.active.focus {
        background-color: #00545b;
        background-image: none !important;
    }

.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
    background-color: #7cc5cc;
    background-image: none !important;
}

    .datepicker table tr td span.active:active:hover,
    .datepicker table tr td span.active:hover:active:hover, .datepicker table tr td span.active.disabled:active:hover, .datepicker table tr td span.active.disabled:hover:active:hover, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active:hover.active:hover, .datepicker table tr td span.active.disabled.active:hover, .datepicker table tr td span.active.disabled:hover.active:hover, .datepicker table tr td span.active:active:focus, .datepicker table tr td span.active:hover:active:focus, .datepicker table tr td span.active.disabled:active:focus, .datepicker table tr td span.active.disabled:hover:active:focus, .datepicker table tr td span.active.active:focus, .datepicker table tr td span.active:hover.active:focus, .datepicker table tr td span.active.disabled.active:focus, .datepicker table tr td span.active.disabled:hover.active:focus, .datepicker table tr td span.active:active.focus, .datepicker table tr td span.active:hover:active.focus, .datepicker table tr td span.active.disabled:active.focus, .datepicker table tr td span.active.disabled:hover:active.focus, .datepicker table tr td span.active.active.focus, .datepicker table tr td span.active:hover.active.focus, .datepicker table tr td span.active.disabled.active.focus, .datepicker table tr td span.active.disabled:hover.active.focus {
        background-color: #00545b;
        background-image: none !important;
    }

.datepicker table thead tr:nth-child(2) {
    color: white;
    background-color: #7cc5cc;
    background-image: none !important;
}

.datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover, .datepicker tfoot tr th:hover {
    background: none;
}

.datepicker .datepicker-switch, .datepicker .prev, .datepicker .next, .datepicker tfoot tr th {
    cursor: default;
}

.datepicker td,
.datepicker th {
    border-radius: 0 !important;
    width: 30px !important;
    height: 30px !important;
}