html {
    margin: 0;
    padding: 0;
}

body * {
    --font-family: 'Raleway', sans-serif;
    font-family: 'Roboto', sans-serif;
    --font-family: 'Open Sans', sans-serif;
    --font-family: 'Poppins', sans-serif;
}

header {
    width: 100%;
    position: fixed;
    z-index: 5000;
}

header+div:first-of-type {
    position: relative;
    padding-top: 100px;
}

.vcenter {
    margin-top: 0px;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.hideparams {
    display: none;
    height: 0px
}

.displaynone {
    display: none;
}

.displaycontents {
    display: contents;
}

.textalignleft {
    text-align: left;
}

.width100prc {
    width: 100%
}

.max-width334px {
    max-width: 334px
}

header h1 {
    padding-top: 10px;
}

#headerCloseButton {
    position: absolute;
    margin-top: 40px;
    right: 0;
    margin-right: -5px;
}

a.navbar-brand {
    --margin-left: 40px;
}

.caelistaHeader {
    flex-wrap: nowrap !important;
    padding-right: 0px;
}

.caelistaHeaderButtons {
    position: absolute;
    cursor: pointer;
    right: 0;
    padding-right: 10px;
}

.caelistaHeaderButtons a.closeIsolated {
    display: none;
    color:white;
    font-size: 80%;
    margin-top: -40px;
}

body.isolated .caelistaHeaderButtons a.closeIsolated {
    display: initial;
}

body.isolated div.caelistaMenu * {
    display: none !important;
}

body.isolated #headerCloseButton {
    display: none !important;
}

body.isolated div.caelistaHeaderButtons button {
    display: none !important;
}

#navbarHeader>div>div.row {
    justify-content: flex-end;
    text-align: right;
}

.caelistaMenu {
    margin-left: auto;
    margin-right: 0px;
    --position: absolute;
    right: 0px;

    color: white;
    height: 76px;
    flex: none;
    margin-right: 40px;
}

.caelistaMenu ul {
    margin-top: -10px;
    margin-bottom: auto;
}

.caelistaMenu .nav-tabs {
    border-bottom: none;
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

.caelistaMenu .nav-link {
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
    --background-color: #333;
    margin-left: 0px;
    color: white;
    min-height: 94px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    min-width: 99px;
    text-align: center;
    font-size: 90%;

}

.caelistaMenu .nav-tabs .nav-link:focus, .caelistaMenu .nav-tabs .nav-link:hover {
    --border-color: inherit;
    isolation: isolate;
    text-shadow: 0px 0px 1px white;
    --background-color: #555;
    opacity: 90%;
}

.caelistaMenu .nav-tabs a.active {
    text-shadow: 0px 0px 1px white;
    background-color: inherit;
}

.caelistaMenu .nav-tabs a.active:hover {
    background-color: inherit;
}

.caelistaMenu .nav-tabs a:not(.active) {
    opacity: 70%;
}

.caelistaMenu .nav-tabs a:not(.active):hover {
    border-bottom-color: #888;
    border-top-color: black;
    border-left-color: black;
    border-right-color: black;
}

.caelistaMenu .nav-tabs a.active .pictotext {
    display: inherit
}

.caelistaMenu .pictotext {}

.caelistaMenu .picto {
    height: 27px;
    display: block;
    margin: auto;
    margin-top: 13px;
    margin-bottom: 16px;
}

.caelistaMenu .nav-tabs a.active .picto {
    --filter: invert()
}

.caelistaMenu .nav-tabs a.active .pictotext {
    color: white;
}



input[type='checkbox'].custom-control-input {
    width: 19px !important;
    height: 19px !important;
    margin: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    /* outline: 1px solid gray; */
    box-shadow: none;
    font-size: 0.92em;
    text-align: center;
    line-height: 1em;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 2px;
}

input[type='checkbox'].custom-control-input:checked:after {
    content: '✔';
    color: var(--naelisblue);
}

input[type='checkbox'].custom-control-input:not(checked):after {
    content: ' \A0';
    color: var(--naelisblue);
}

input[type='checkbox'].custom-control-input:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 2px solid #ced4da;
    outline: none !important;
}

body>header>div.navbar.navbar-dark.shadow-sm.naelisbackground>div>div.navbar-brand.d-flex.flex-shrink-1.flex-grow-1.align-items-center.cursosdefault.overflow-auto {
    padding-top: 0px;
    padding-bottom: 0px;

}

.navbar-dark .navbar-toggler {
    color: #AAA;
    /*border-color: white;*/
    padding-left: 0px;
    padding-right: 0px;
    border: none;
    vertical-align: middle;
    transition: all 0.5s ease;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.1rem darkgray;

}

.navbar-toggler:hover {
    color: black;
    transform: scale(1.2, 1.2);
}

.margintop-50 {
    margin-top: -50px;
}

.naelisbackground {
    background: url('/img/naelis-bg-op80.png');
}

.mainbackground {
    background: var(--mainbackground);
}

.pictoingrid {
    opacity: 70%;
    font-size: 16px;
    color: var(--naelisblue);
}

.pictoingrid:hover {
    opacity: 100%;
    font-size: 16px;
}

.pictoingrid.disabled {
    color: black !important;
}

.cursordefault {
    cursor: default;
}

.cursorpointer {
    cursor: pointer;
}

.cursorpointer.disabled {
    cursor: default;
    opacity: 20% !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none;
}

.dataTables_wrapper div.dt-buttons {
    display: inherit;
}

.dataTables_wrapper div.dt-buttons button {
    padding: 0.25rem 0.8rem;
    border-radius: 0.2rem !important;
}

.dataTables_scroll {
    padding-top: 20px;
}

table.dataTable.main {
    color: var(--textcolor);
}

table.dataTable.main.hover[id ^=grid] {
    border-collapse: separate;
    border-spacing: 0px 8px;
}

table.dataTable.main thead tr {
    --background-color: var(--datatable-headerbackground);
    --color: white;
    background-color: #EEE;
    color: #555;
}

table.dataTable.main thead th {
    border-bottom: none;
}

table.dataTable.main thead th.cellspec {
    border-bottom: none;
    height: 44px;
}

table.dataTable.main tbody tr {
    height: 65px;
    background-color: var(--datatable-rowbackground);
    cursor: pointer;
}

table.dataTable.main.hover tbody tr:hover {
    background-color: var(--datatable-rowbackground-hover);
}

table.dataTable.main tbody tr.selected td.cellspec {
    --border-top: 1px solid var(--datatable-rowborder);
    --border-bottom: 1px solid var(--datatable-rowborder);
    color: black;
}

table.dataTable.main tbody tr td.cellspecleft {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

table.dataTable.main tbody tr.selected td.cellspecleft {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    --border-left: 1px solid var(--datatable-rowborder);
}

table.dataTable.main tbody tr td.cellspecright {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

table.dataTable.main tbody tr.selected td.cellspecright {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    --border-right: 1px solid var(--datatable-rowborder);
}

table.dataTable.main tbody td.link:hover {
    font-weight: bold;
}

.dataTables_filter {
    color: var(--textcolor) !important;
}

.dataTables_wrapper .dataTables_filter input {
    background-color: var(--input-background);
}

table.dataTable.main tbody>tr.selected {
    background-color: var(--datatable-rowselected);
}

table.dataTable.main.hover tbody>tr.selected:hover, table.dataTable.main.hover tbody>tr>.selected:hover, table.dataTable.main.display tbody>tr.selected:hover, table.dataTable.main.display tbody>tr>.selected:hover {
    background-color: var(--datatable-rowselected-hover);
}

table.dataTable.main tr.selected td.select-checkbox:after, table.dataTable.main tr.selected th.select-checkbox:after {
    text-shadow: none;
    color: var(--textcolor);
    margin-top: -7px;
}

table.dataTable.main tbody td {
    padding: 8px 10px;
}

table.dataTable.order-column tbody>tr.selected>.sorting_1, table.dataTable.order-column tbody>tr.selected>.sorting_2, table.dataTable.order-column tbody>tr.selected>.sorting_3, table.dataTable.order-column tbody>tr>.selected, table.dataTable.display tbody>tr.selected>.sorting_1, table.dataTable.display tbody>tr.selected>.sorting_2, table.dataTable.display tbody>tr.selected>.sorting_3, table.dataTable.display tbody>tr>.selected {
    background-color: var(--datatable-rowselected);
}

table.dataTable.display tbody>tr.selected:hover>.sorting_1, table.dataTable.order-column.hover tbody>tr.selected:hover>.sorting_1,
table.dataTable.display tbody>tr.selected:hover>.sorting_2, table.dataTable.order-column.hover tbody>tr.selected:hover>.sorting_2,
table.dataTable.display tbody>tr.selected:hover>.sorting_3, table.dataTable.order-column.hover tbody>tr.selected:hover>.sorting_3 {
    background-color: var(--datatable-rowselected-hover);
}


table.dataTable.main tbody td.select-checkbox:before, table.dataTable.main tbody th.select-checkbox:before {
    border: 1px solid var(--datatable-checkbox-border);
}

table.dataTable.main tbody td.select-checkbox:before, table.dataTable.main tbody td.select-checkbox:after, table.dataTable.main tbody th.select-checkbox:before, table.dataTable.main tbody th.select-checkbox:after {
    top: 45%;
    width: 16px;
    height: 16px;
}

table.dataTable.main tbody>tr td.selected-checkbox, table.dataTable.main tbody>tr td.unselected-checkbox {
    color: var(--datatable-rowbackground);
}

table.dataTable.main.hover tbody>tr:hover td.selected-checkbox, table.dataTable.main.hover tbody>tr:hover td.unselected-checkbox {
    color: var(--datatable-rowbackground-hover);
}

table.dataTable.main tbody>tr.selected td.selected-checkbox, table.dataTable.main tbody>tr.selected td.unselected-checkbox {
    color: var(--datatable-rowselected);
}

table.dataTable.main.hover tbody>tr.selected:hover td.selected-checkbox, table.dataTable.main.hover tbody>tr.selected:hover td.unselected-checkbox {
    color: var(--datatable-rowselected-hover);
}

table.dataTable.main tbody>tr td.selected-checkbox:after {
    content: '\2714';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    color: green;
    font-size: 16px;
    border: solid 1px lightgray;
    padding: 0px 3px;
    border-radius: 6px;
    background: white;
}

table.dataTable.main tbody>tr td.unselected-checkbox:after {
    content: '\02716';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    color: red;
    font-size: 16px;
    border: solid 1px lightgray;
    padding: 0px 3px;
    border-radius: 6px;
    background: white;
}

table.dataTable.main tbody>tr td.readonly.selected-checkbox:after {
    border: none;
    background: none;
}

table.dataTable.main tbody>tr td.readonly.unselected-checkbox:after {
    border: none;
    background: none;
}

table.dataTable.main tbody>tr td.right-checkbox {
    font-size: 0px;
    text-align: center;
}

table.dataTable.main thead th.right-checkbox {
    text-align: center;
}

table.dataTable.main td.expander {
    --background: url('/img/details_open.png') no-repeat center center;
    --filter: hue-rotate(-210deg);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--naelisblue) !important;
    cursor: pointer;
}

table.dataTable.main td.expander:before {
    content: "\f139";
}

table.dataTable.main tr.shown td.expander {
    --background: url('/img/details_close.png') no-repeat center center;
    --filter: hue-rotate(-77deg);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--naelisblue) !important;
}

table.dataTable.main tr.shown td.expander:before {
    content: "\f13a";
}

table.dataTable td.expander:hover {
    transform: scale(1.1, 1.1);
    transition: all 0.20s ease;
}

/* table.dataTable.main td.expander:hover {
    transform: rotate(-180deg);
    transition: 0.2s;
} */

table.dataTable.main td.child {
    background: linear-gradient(0deg, rgba(249, 249, 249, 1) 0%, rgba(255, 255, 255, 1) 20px, rgba(255, 255, 255, 1) 100%);
    border-top: solid 1px #ddd;
}

table.dataTable.main tr.child {
    transform: translateY(-15px);
    --pointer-events: none;
}


.btn-primary {
    background-color: var(--naelisblue);
    border-color: var(--naelisblue);
    box-shadow: none !important;
}

.btn-primary:hover {
    background-color: var(--naelisblueDD);
    border-color: var(--naelisblueDD);
    --border: none !important;
    box-shadow: none !important;
}

.btn-primary:focus {
    background-color: var(--naelisblue);
    border-color: var(--naelisblue);
    --border: none !important;
    box-shadow: none !important;
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--naelisblue);
    border-color: var(--naelisblue);
    opacity: 50%;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: var(--naelisblueDD);
    border-color: var(--naelisblueDD);
    border: none;
}

.btn-outline-primary {
    color: var(--naelisblue);
    border-color: var(--naelisblue);
}

.btn-outline-primary:hover {
    color: #fff;
    border-color: var(--naelisblue);
    background-color: var(--naelisblue);
    --font-weight: bold;
}

.btn-check:checked+.btn-outline-primary,
.btn-outline-primary:active {
    color: #fff;
    border-color: var(--naelisblue);
    background-color: var(--naelisblue);
    --font-weight: bold;
}

.btn-outline-primary.disabled {
    color: var(--naelisblue);
    opacity: 10%
}

.btnValid {
    text-align: center;
    margin-top: 10px;
}

.accordion-body {
    padding-top: 0.8rem;
    padding-right: 1.25rem;
    padding-bottom: 0.8rem;
    padding-left: 1.25rem;
}

.accordion-button:not(.collapsed) {
    --color: #000;
    --background-color: #DDD;
    color: #FFF;
    --background-color: var(--naelisblue);
    background: linear-gradient(300deg, rgba(46, 166, 189, 1) 0%, rgba(0, 147, 175, 1) 50%, rgba(46, 166, 189, 1) 100%)
}

.accordion-button:focus {
    border-color: #CCC;
    box-shadow: none;
}

.accordion-button::after {
    filter: grayscale();
}

h2.accordion-header button {
    font-weight: bold;
}

.accordion-item {
    padding-bottom: 6px;
}

.accordion-body {
    --background: #F5F5F5;
}

.accordion-item {
    background-color: white;
    box-shadow: 0 0 10px darkgray;
    margin-bottom: 20px;
}

.accordion-item.edit {
    background-color: white;
    box-shadow: 0 0 20px black;
}

.input-groupold {
    width: inherit;
}

.form-control, .selectize-input {
    border-color: #eee;
}

.selectize-control .selectize-input.disabled {
    opacity: 1;
    background-color: #e9ecef;
}

.selectize-control.multi .selectize-input>div {
    background-color: transparent;
}

.selectize-control.multi .selectize-input.disabled>div, .selectize-control.multi .selectize-input.disabled>div.active {
    background-color: transparent;

}

.form-check-input:checked {
    background-color: var(--naelisblue);
    border-color: var(--naelisblue);
}

.height100prc {
    height: 100%
}

.width100prc {
    width: 100%
}

.minWidth500px {
    min-width: 500px
}