@import url('custom_checkbox.css?v10482');
@import url('select2_theme.css?v10482');
@import url('mwsc_list.css?v10482');
@import url('mwsc_styles.css?v10482');
@import url('data_filter.css?v10482');
@import url('tooltip_template.css?v10482');
html, body {margin: 0; padding: 0; width: 100%; height: 100%}

body {
    background-size: cover;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    font-family: 'Klavika', sans-serif;
}

input:disabled {
    opacity: 0.7;
}

[hidden] {
    display: none;
}

textarea {
    resize: none;
}

.border-box {
    padding: 10px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.template-dialog
{
    position: absolute;
    font-family: 'Klavika', sans-serif;
    width: 60%;
    height: 50%;
    left: 20%;
    top: 25%;
    z-index: 1100;
}

.template-header
{
    position : absolute;
    top: 20px;
    color: white;
    height: 40px;
    width: calc(100% + 8px);
    display: flex;
    align-items: center;
}

.template-header p {
    margin: 0!important;
    padding: 6px 80px!important;
}

.template-icon
{
    position: absolute;
    top: 17px;
    z-index: 99;
    left: 20px;
}

.template-icon:has(i) {
    background-color: white;
    padding: 2px;
    border-radius: 100%;
    height: 48px;
    width: 48px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-icon i {
    font-size: 32px;
    transform: translateY(-50%);
}

.template-content
{
    position: relative;
    float: left;
    font-family: 'Klavika', sans-serif;
    background: rgba(0, 0, 0,0.65);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    z-index: 1;
    height: 100%;
    width: calc(100% - 62px);
}

.template-body
{
    font-family: 'Klavika', sans-serif;
    color: white;
    position: relative;
    overflow-y: hidden;
    overflow-x: hidden;
    width: calc(100% - 60px);
    height: calc(100% - 100px);
    margin: 70px 30px 30px 30px;
    box-sizing: border-box;
}

.template-body.template-body-flex {

}

.template-body.template-body-flex > div {
    flex: 1;
    display: flex;
    width: 100%;
    min-height: 30px;
    align-items: center;
}
.template-body.template-body-flex label {
    height: fit-content;
}


.template-body.template-body-flex .typeahead__container {
    flex: 1;
    position: relative!important;
}

.template-body.template-body-flex .typeahead__container input {
    width: 100%!important;
    height: 100%!important;
}

.template-body.template-body-flex .typeahead__container .typeahead__cancel-button {
    height: 100%!important;
    line-height: normal!important;
    font-size: 1em!important;
}

.template-body.template-body-flex .typeahead__container:hover .typeahead__cancel-button {
    visibility: visible;
}

.template-body > div
{
    display: inline-block;
    width: 100%;
}

/*.template-body > div > div > div > label*/
/*{*/
/*color: white;*/
/*display: block;*/
/*width: 200px;*/
/*font-family: 'Klavika', sans-serif;*/
/*}*/

.template-body > div > div > label,
.template-body > div > div > div > label,
.template-body fieldset > div > label,
.template-body > div > label,
.template-body > div > p
{
    color: white;
    display: block;
    width: 230px;
    float: left;
    font-family: 'Klavika', sans-serif;
}

.template-body.full-width > div > div > label,
.template-body.full-width > div > div > div > label,
.template-body.full-width fieldset > div > label,
.template-body.full-width > div > label,
.template-body.full-width > div > p,
.template-body.full-width > div > div > div > textarea,
.template-body.full-width > div > div > textarea,
.template-body.full-width > div > textarea,
.template-body.full-width > div > div > div > input,
.template-body.full-width > div > div > input,
.template-body.full-width > div > input,
.template-body.full-width fieldset > div > input,
.template-body.full-width input.template-input,
.template-body.full-width > div > div > div > select,
.template-body.full-width > div > div > select,
.template-body.full-width > div > select,
.template-body.full-width select.template-select
{
    width: 100%;
}

.template-body > div > div > div > input,
.template-body > div > div > input,
.template-body > div > input,
.template-body fieldset > div > input,
.template-body input.template-input,
.template-input
{
    outline: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.65);
    width: 40%;
    height: 20px;
    color: white;
    padding: 0 0 0 5px;
    vertical-align: middle;
    display: inline-block;
    font-family: 'Klavika', sans-serif;
    box-sizing: border-box;
}

.template-body > div > div > div > textarea,
.template-body > div > div > textarea,
.template-body > div > textarea
{
    width: 90%;
    color: white;
    outline: 0;
    background: rgba(0, 0, 0, 0.65);
    border: 0;
    padding: 5px 0 0 5px;
    font-family: 'Klavika', sans-serif;
    resize: none;
    box-sizing: border-box;
}

.template-body > div > div > div > select,
.template-body > div > div > select,
.template-body > div > select,
.template-body select.template-select
{
    height: 20px;
    width: 40%;
    color: white;
    background: rgba(0, 0, 0, 0.65);
    padding: 0 5px 0 5px;
    font-family: 'Klavika', sans-serif;
    outline: 0;
    border: 0;
}

.template-content > div > div > select,
.template-content > div > select
{
    height: 20px;
    width: 40%;
    color: white;
    background: rgba(0, 0, 0, 0.65);
    padding: 0 5px 0 5px;
    font-family: 'Klavika', sans-serif;
    outline: 0;
    border: 0;
}

.template-body > div > ul
{
    display: inline-block;
    padding-left: 20px;
    width: 100%;
    overflow-y: auto;
    height: 100px;
}

.template-actions
{
    position: relative;
    top: 20px;
    float: left;
    padding: 10px;
    z-index: 0;
    overflow: hidden;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}
.template-actions div {
    width: 42px;
    height: 42px;
    text-align: center;
}

.template-actions div:has(.circle-icon) {
    margin-inline: 1px;
    width: 38px;
    height: 40px;
}

.template-actions .circle-icon {
    width: 36px;
    height: 36px;
    margin-inline: 2px;
}

.template-actions .fa {
    font-size: 1.5em;
}

.template-actions img:hover {
    cursor: pointer;
    transform: scale(1.05)!important;
}

.template-actions-icons {margin-top: 5px;}

.template-input-data {
    background: rgba(0, 0, 0, 0.0)!important;
    border: 0!important;
    border-bottom: 1px solid #979797!important;
    color: white!important;
    min-width: 140px!important;
    font-family: 'Klavika', sans-serif!important;
    font-size: 14px!important;
}

.template-input-data > option {
    color: black;
}

.template-input-data.js-typeahead {
    min-height: calc(.25rem * 2 + .25rem + 2px);
    padding: .25rem .25rem .25rem .25rem;
    line-height: 1;
    width: calc(100% - 42px);
}

.template-input-data::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(200, 200, 200, 1);
    font-family: Klavika, sans-serif;
    font-size: 14px;
}


.template-input-data::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(200, 200, 200, 1);
    font-family: Klavika, sans-serif;
    font-size: 14px;
}

.template-button-colored {
    box-sizing: border-box;
    width: auto;
    padding: 4px 14px 4px 14px;
    color: white;
    font-family: 'Klavika', sans-serif;
    font-size: 16px;
    border: 0;
    box-shadow: 2px 2px 8px black;
    cursor: pointer;
}

.template-button,
.template-button-light {
    width:  auto !important;
    display: inline-flex !important;
    border-radius: 3px;
    box-shadow: 1px 2px 4px black;
    min-width: 130px;
    align-items: center;
    justify-content: center;
    align-content: center;
    padding: 8px 6px;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 10px;
}

.template-button-light {
    color: white;
}

.template-button > i,
.template-button-light > i {
    margin-right: 6px;
}

.template-2-container {
    display: flex;
    height: 100%;
    flex-direction: column;
    position: relative;
}

.template-2-container .template-head,
.template-2-container .template-main {
    padding-top: 1em;
    padding-bottom: 1em;
    flex: 0;
    border-radius: 10px 0px 10px 10px;
}

.template-2-container .template-main {
    padding-top: 1em;
    padding-bottom: 1em;
    flex: 1;
    border-radius: 10px 0px 10px 10px;
}

.template-2-container .template-head .interface-mode-badge {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    padding-inline: 2em;
    font-weight: unset;
    height: 1em;
    border-radius: 10px 0px 10px;
    box-shadow: 2px 1px 2px 1px rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}
.interface-mode-badge span {
    margin-right: 2ch;
    font-size: 1em;
}
.interface-mode-badge .icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 0.7em;
    margin-right: 1ch;
    margin-right: 1ch;
}
.interface-mode-badge i {
    display: none;
}
.interface-mode-badge.consultation .fa-book {
    display: block;
}
.interface-mode-badge.search .fa-search  {
    display: block;
}
.interface-mode-badge.create .fa-plus-circle {
    display: block;
}
.interface-mode-badge.update .fa-edit {
    display: block;
}
/*.interface-mode-badge.consultation {*/
/*    color: whitesmoke;*/
/*}*/
/*.interface-mode-badge.create {*/
/*    color: #0FA83A;*/
/*}*/
/*.interface-mode-badge.search {*/
/*    color: #0EA2E2;*/
/*}*/
/*.interface-mode-badge.update {*/
/*    color: #c82333;*/
/*}*/
/*.template-2-container .template-head .interface-mode-badge*/

.template-2-container .template-foot {
    flex: 1;
    margin-top: 10px;
    width: calc(100% - 60px);
    min-height: 100px;
}

.template-2-container .template-foot .template-content {
    position: static;
    width: 100%;
    margin-top: 1.1em;
    height: calc(100% - 20px);
    overflow-y: auto;
    border-radius: 0px 10px 10px 10px;
}

.template-2-container .wrapper {
    padding-inline: 2em;
    width: calc(100%  - 4em);
}

.template-2-container .template-foot .wrapper {
    padding-top: 1em;
    padding-bottom: 1em;
}

.template-2-container .template-actions {
    position: absolute;
    float: right;
    right: 0px;
    top: 0px;
    border-radius: 0px 10px 10px 0px;
}


.template-tab-choice-container {
    position: absolute;
    display: flex;
    height: 1.1em;
}

.template-tab-choice {
    width: 10em;
    position: relative;
    /*margin-left:5px;*/
    border-right: solid 1px #555555;
    padding-inline: 1em;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: #888888;
    user-select: none;
    cursor: pointer;
}

/*.template-tab-choice::before {*/
/*    background-color: #888888;*/
/*    width: 100px;*/
/*    height: 100%;*/
/*    content: "";*/
/*    transform: skew(-50deg, 0deg);*/
/*    position: absolute;*/
/*    left: -14px;*/
/*    z-index: -1;*/
/*    cursor: pointer;*/
/*}*/

.template-tab-choice.active {
    background-color: rgba(0, 0, 0,0.65);
}

.template-tab-choice.active::before {
    background-color: #555555;
}

.template-tab-container {
    height: 100%;
}

.typeahead__list {
    min-width: 300px!important;
}

.typeahead__list > li > a {
    padding: .25rem .25rem;
    font-size: 14px;
}

.typeahead__list>li.typeahead__item.typeahead__group-item:has([deleted=true]) {
    background-color: rgba(255, 0, 0, 0.70);
    color: white!important;
    border-top: none;
}
.typeahead__list>li>a:has([deleted=true]) {
    color: white!important;
}

.typeahead__list>li.typeahead__item.typeahead__group-item:has([deleted=true]) a:hover {
    background-color: rgba(255, 0, 0, 0.50) !important;
    border-top: none;
}

.vertical-menu-container {
    position: relative;
    display: inline-block;
    float: left;
    height: 100%;
    left: 0;
    transition: left 0.8s !important;
}

.whiteScrollbar::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.45);
}

.whiteScrollbar::-webkit-scrollbar
{
    background-color: rgba(255, 255, 255, 0.0);
    width: 8px;
    height: 8px;
}

.whiteScrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, .3);
    background-color: rgba(255, 255, 255, 0.95);
}

.blackScrollbar::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.45);
}

.blackScrollbar::-webkit-scrollbar
{
    background-color: rgba(0, 0, 0, 0.0);
    width: 8px;
    height: 8px;
}

.blackScrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, .3);
    background-color: rgba(0, 0, 0, 0.95);
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, 0.5);
    font-family: Klavika, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, 0.7);
    font-family: Klavika, sans-serif;
    font-size: 16px;
    font-weight: bold;
}
/*::-ms-input-placeholder { !* Internet Explorer 10-11 *!*/
/*color: rgba(255, 255, 255, 0.7);*/
/*font-family: Klavika, sans-serif;*/
/*font-size: 16px;*/
/*font-weight: bold;*/
/*}*/

.whiteScrollbar::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.45);
}

.whiteScrollbar::-webkit-scrollbar
{
    background-color: rgba(255, 255, 255, 0.0);
    width: 8px;
    height: 8px;
}

.whiteScrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, .3);
    background-color: rgba(255, 255, 255, 0.95);
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, 0.5);
    font-family: Klavika, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, 0.7);
    font-family: Klavika, sans-serif;
    font-size: 16px;
    font-weight: bold;
}
/*::-ms-input-placeholder { !* Internet Explorer 10-11 *!*/
/*color: rgba(255, 255, 255, 0.7);*/
/*font-family: Klavika, sans-serif;*/
/*font-size: 16px;*/
/*font-weight: bold;*/
/*}*/

.blackScrollbar::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.15);
}

.blackScrollbar::-webkit-scrollbar
{
    background-color: rgba(0, 0, 0, 0.0);
    width: 8px;
    height: 8px;
}

.blackScrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px var(--c-white);
    background-color: rgba(0, 0, 0, 0.3);
}

.smallblackScrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--c-white);
    border-radius: 10px;
    background-color: var(--c-white);
}

.smallblackScrollbar::-webkit-scrollbar {
    background-color: white;
    width: 1px;
    height: 2px;
}

.smallblackScrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px var(--c-white);
    background-color: rgba(0, 0, 0, 0.3);
}

.mediumblackScrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--c-white);
    background-color: var(--c-white);
}

.mediumblackScrollbar::-webkit-scrollbar {
    background-color: white;
    width: 5px;
    height: 2px;
    transition: all 0.3s ease-in-out;
}

.mediumblackScrollbar::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px var(--c-white);
    background-color: rgba(0, 0, 0, 0.6);
}

ul.tab-pages,
ul.subtab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

ul.tab-pages li, ul.subtab li { float: left; cursor: pointer;}

ul.tab-pages li a, ul.subtab li a {
    display: inline-block;
    text-align: center;
    padding: 11px 16px;
    text-decoration: none;
    font-family: Klavika, sans-serif;
    color: white;
}

ul.tab-pages li a, ul.subtab.full-width li a {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
}

ul.tab-pages > li a:hover {background: rgba(255, 255, 255, 0.1);}

ul.tab-pages > li a:focus, .active {background: rgba(255, 255, 255, 0.1);}

.div-subtab ul.subtab {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 0 0;
}

ul.subtab > li a:hover {
    background: rgba(0, 0, 0, 0.4)
}

ul.subtab > li a:focus, .subtab-active,
ul.subtab > li a.subtab-active:hover {
    background: rgba(0, 0, 0, 0.2)
}

.div-subtab ul.subtab {
    display: block;
    padding: 0;
    height: auto;
}

.div-subtab ul.subtab.full-width {
    display: flex;
    flex-direction: row;
}

.div-subtab ul.subtab > li {
    user-select: none;
    /* supported by Chrome and Opera */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.disable-select {
    user-select: none;
    /* supported by Chrome and Opera */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.div-subtab ul.subtab.full-width > li {
    flex: 1;
}

.div-subtab div.subtabcontent {
    display: block;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    height: 400px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0 0 5px 5px;
}

#div-account-infos {
    height: unset;
}

.div-informations {
    width: 220px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    max-height: 907px;
    overflow: auto;
    font-family: Klavika, sans-serif;
    color: #ffffff;
}

.div-informations .title-block > p {
    font-size: 16px;
    text-align: center;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

.div-informations .body-block {
    background: rgba(0, 0, 0, 0.75);
    padding: 10px;
    overflow: hidden;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.div-informations .body-block > div {
    display: inline-block;
}

.div-informations .body-block > label {
    display: block;
    width: auto;
}

.div-informations .body-block > div > label,
.div-informations .body-block > div > p
{
    color: white;
    display: block;
    width: 170px;
    float: left;
    font-family: 'Klavika', sans-serif;
}

.div-informations .body-block > div > select
{
    width: 40%;
    color: white;
    background: rgba(0, 0, 0, 0.65);
    padding: 0 5px 0 5px;
    font-family: 'Klavika', sans-serif;
    outline: 0;
    border: 0;
}

#loading-div {
    height: 128px;
    width: 128px;
    position: absolute;
    top:0;
    z-index: 99999;
    bottom: 0;
    left:0;
    right: 0;
    margin: auto;
    display: flex;
    display: none;
    justify-content: center;
    align-items: center;
}

.full-width-infos,
.infos-left,
.infos-right {
    position: relative;
}

.infos-left,
.infos-right {
    width: 50%;
    height: inherit;
    text-align: center;
    display: inline-block;
}

.infos-left {
    float: left;
}

.infos-right {
    float: right;
}

.infos-right > label,
.infos-left > label {
    width: 100%;
    display: inline-block;
}

.full-width-infos {
    width: 100%;
    text-align: center;
    clear: both;
    display: inline-block;
}

.full-width-infos > label {
    width: 100%;
    display: block;
}

.infos-left p,
.infos-right p,
.full-width-infos p {
    margin-top: 10px;
    width: 100%;
    font-size: 18px;
}

.full-width-infos input {
    outline: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 40%;
    color: white;
    padding: 0 0 0 5px;
    vertical-align: middle;
    display: inline-block;
    font-family: 'Klavika', sans-serif;
    box-sizing: border-box;
}

.infos-left label + img,
.infos-right label + img {
    margin-top: 10px;
    position: relative;
    top: auto;
    left: auto;
    transform: translateY(0);
}

.infos-left img,
.infos-right img,
.full-width-infos img {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
}

.full-height-infos {
    width: calc(100% / 8);
    height: 100%;
    float: left;
    display: inline-block;
    text-align: center;
}

.full-height-infos .center-label {
    width: 100%;
    height: 50%;
    display: table;
}

.full-height-infos div label {
    width: calc(100% - 10px);
    height: 100%;
    padding: 0 5px 0 5px;
    font-size: 16px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.full-height-infos p {
    width: 100% !important;
    height: 50%;
    padding: 0 5px 0 5px;
    display: inline;
    text-align: center;
    font-size: 16px;
}

.full-height-infos img {
    vertical-align: middle;
    display: none;
}

.vertical-separator {
    position: absolute;
    height: calc(100% - (10% * 2));
    top: 10%;
    border-left: 1px solid white;
}

.horizontal-separator {
    border-bottom: 1px solid white;
    width: 100%;
    clear: both;
}

.picker-submit-button {
    position: relative;
    height: 100%;
    max-height: 85px;
    float: right;
    width: 25px;
    border: 0;
    box-shadow: 2px 2px 8px black;
    cursor: pointer;
}

.picker-date {
    margin: 5px 15% 0 10%;
    width: calc(90% - 30%);
    height: 100%;
    float: left;
}

.picker-date input {
    background: rgba(0, 0, 0, 0.0);
    border: 0;
    border-bottom: 1px solid #979797;
    color: white;
    width: 100%;
}

.auto-click-div {
    margin-top: 14px;
    cursor: pointer;
}

.auto-click-div #auto-click-checkbox {
    float: left;
    width: auto;
    cursor: pointer;
}

.auto-click-div label {
    margin-left: 18px;
    font-size: 14px;
    display: block;
    user-select: none;
    cursor: pointer;
}

.searchDiv {
    position: relative;
    width: 220px;
    z-index: 99;
}

.searchDiv span {
    position: absolute;
    top: 7px;
    left: 17px;
    color: white;
}

.searchDiv span:hover {
    cursor: text
}

.searchDiv input {
    width: 5px;
    height: 30px;
    background: rgba(0, 0, 0, 0.65);
    border: none;
    font-size: 10pt;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    color: #dddddd;
    padding-left: 45px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: 0.5s all ease;
    border-radius: 5px;
}

.searchDiv input:focus {
    width: 220px;
    border: 0;
    outline: 0
}

.div-switch-mat {
    outline: 0;
    border: 0;
    color: white;
    padding: 0 0 0 5px;
    vertical-align: middle;
    display: inline-block;
    font-family: 'Klavika', sans-serif;
    box-sizing: border-box;
    margin: 0 !important;
    width: auto !important;
}

.div-switch-mat label {
}

.div-switch-mat input {
}

.export-popup {
    width: 700px;
    height: 250px;
    left: 50%;
    top: 50%;
    position: absolute;
    z-index: 1100;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.dialog {
    width: 750px;
    height: 450px;
    left: 50%;
    top: 50%;
    position: absolute;
    z-index: 1100;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.template-dialog {
    width: 750px;
    height: 450px;
    left: 50%;
    top: 50%;
    position: absolute;
    z-index: 1100;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.mg-top-5 {
    margin-top: 5px;
}
.mg-top-10 {
    margin-top: 10px;
}
.mg-top-10-imp {
    margin-top: 10px!important;
}
.mg-top-15 {
    margin-top: 15px;
}
.mg-top-15-imp {
    margin-top: 15px!important;
}
.mg-top-50 {
    margin-top: 50px;
}
.mg-top-100 {
    margin-top: 100px;
}

.mg-left-5 {
    margin-left: 5px;
}
.mg-left-10 {
    margin-left: 10px;
}
.mg-left-15 {
    margin-left: 15px;
}

.mg-right-5 {
    margin-right: 5px;
}
.mg-right-10 {
    margin-right: 10px;
}
.mg-right-15 {
    margin-right: 15px;
}

.mg-bottom-5 {
    margin-bottom: 5px;
}
.mg-bottom-10 {
    margin-bottom: 10px;
}
.mg-bottom-15 {
    margin-bottom: 15px;
}

.arrow {
    background: transparent;
    display: block;
    height: 24px;
    width: 24px;
    position: absolute;
    cursor: pointer;
}

.arrow b {
    height: 0;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
    top: 50%;
    width: 0;
    position: absolute;
    border-style: solid;
}

.highlight_popup .leaflet-popup-content-wrapper {
    background: rgb(255, 196, 0) !important;
    color: rgb(0, 0, 0) !important;
    font-weight: bold;
    margin-bottom: 2px !important;
}

.device-popup .leaflet-popup-close-button,
.vehicle-popup .leaflet-popup-close-button,
.device-popup .leaflet-popup-tip-container,
.vehicle-popup .leaflet-popup-tip-container {
    margin: 0 !important;
    display: none;
}


.device-popup .leaflet-popup-content-wrapper,
.vehicle-popup .leaflet-popup-content-wrapper {
    font-size: 11px !important;
    line-height: 0 !important;
}

.vehicle-popup.dark .leaflet-popup-content-wrapper {
    background: rgba(0,0,0,0.8) !important;
    color: #fff;
}

.vehicle-popup.light .leaflet-popup-content-wrapper {
    background: rgba(255,255,255,0.9) !important;
    color: #000;
}

.device-popup .leaflet-popup-content,
.vehicle-popup .leaflet-popup-content {
    padding: 0 4px !important;
}

.device-popup .leaflet-popup-content p:first-child,
.vehicle-popup .leaflet-popup-content p:first-child {
    margin-top: 2px!important;
}

.device-popup .leaflet-popup-content p,
.vehicle-popup .leaflet-popup-content p {
    margin-bottom: 2px!important;
    font-size: 14px;
    text-align: center;
    line-height: 16px;
}

.custom-popup .leaflet-popup-content-wrapper
{
    font-family: Klavika, sans-serif;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 14px;
    line-height: 24px;
}
.custom-popup .leaflet-popup-content-wrapper a
{
    color: rgba(255,255,255,0.5);
}
.custom-popup .leaflet-popup-tip-container
{
    width: 30px;
    height: 15px;
}
.custom-popup .leaflet-popup-tip
{
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid rgba(0,0,0,0.65);
}

.arrow.left b {
    border-color: transparent white transparent  transparent;
    border-width: 6px 12px 6px 0px;
}

.arrow.right b {
    border-color: transparent transparent  transparent white;
    border-width: 6px 0px 6px 12px;
}

.material-button {
    border-radius: .25rem;
    border: none;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, .25);
    line-height: 1.2rem;
    font-weight: 900;
    padding: 8px 14px 9px;
    display: inline-block;
    text-align: center;
    user-select: none;
}

.material-button:active {
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, .25);
}

.c-black    { color: #000000!important; }
.c-white    { color: #ffffff!important; }
.c-red      { color: #e53935!important; }
.c-blue     { color: #1e88e5!important; }
.c-green    { color: #7cb342!important; }
.c-yellow   { color: #fdd835!important; }
.c-orange   { color: #fb8c00!important; }
.c-purple   { color: #8e24aa!important; }
.c-brown    { color: #6d4c41!important; }
.c-grey     { color: #757575!important; }

.bg-black       { background-color: #000000!important; }
.bg-white       { background-color: #ffffff!important; }
.bg-red         { background-color: #e53935!important; }
.bg-blue        { background-color: #1e88e5!important; }
.bg-green       { background-color: #7cb342!important; }
.bg-yellow      { background-color: #fdd835!important; }
.bg-orange      { background-color: #fb8c00!important; }
.bg-purple      { background-color: #8e24aa!important; }
.bg-brown       { background-color: #6d4c41!important; }
.bg-grey        { background-color: #757575!important; }
.bg-light-grey  { background-color: #aaaaaa !important; }

.material-button.red {
    background: #e53935;
}

.material-button.green {
    background: #7cb342;
}

.material-button.disabled {
    box-shadow: none!important;
    background: #e0e0e0!important;
    cursor: default!important;
    /*color: #bdbdbd;*/
}

@media screen and (max-width: 500px) {
    .border-box {
        padding: 10px 10px 10px 10px;
    }
}

.hover-scale:hover {
    cursor: pointer;
    -webkit-transform: scale( 1.05 );
    -moz-transform: scale( 1.05 );
    -ms-transform: scale( 1.05 );
    -o-transform: scale( 1.05 );
    transform: scale( 1.05 );
}

.viewport {
    position: absolute;
    /*height: 800px;*/
    top: 60px;
    left: 260px;
    right: 250px;
    bottom: 70px;
}

.toggle-button[toggle="false"] {
    filter: opacity(50%);
    transform: scale(0.9);
}

span.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 85%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    min-height: 0!important;
}

span.label.label-warning {
    background-color: #f0ad4e;
}
span.label.label-error {
    background-color: #d9534f;
}
span.label.label-error-untreated {
    background-color: #e67e22;
}
span.label.label-success {
    background-color: #5cb85c;
}

span.label.label-temporary {
    background-color: #d9d9d9;
    color : black;
    white-space: unset;
}

.xdsoft_datetimepicker td.disabled{opacity:100!important;background: rgba(213, 164, 0, 0.31) !important;}
.xdsoft_datetimepicker td.disabled:hover{opacity:100!important;background: rgba(213, 164, 0, 0.31) !important;}

.center:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.circle-loader {
    border: 3px solid #555;
    border-top: 3px solid #f3f3f3;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    display: inline-block;
    box-sizing: border-box;
}

.circle-loader:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.medium-circle {
    border: 4px solid #555!important;
    border-top: 4px solid #f3f3f3!important;
    width: 40px!important;
    height: 40px!important;
}

.big-circle {
    border: 8px solid #555!important;
    border-top: 8px solid #f3f3f3!important;
    width: 110px!important;
    height: 110px!important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-auto {
    float:left;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 1px;
    margin-bottom: 0!important;
    box-sizing: border-box;
    text-align: center;
}

.col-md-12 {
    width: 100%
}

.col-md-11 {
    width: 91.66666667%
}

.col-md-10 {
    width: 83.33333333%
}

.col-md-9 {
    width: 75%
}

.col-md-8 {
    width: 66.66666667%
}

.col-md-7 {
    width: 58.33333333%
}

.col-md-6 {
    width: 50%
}

.col-md-5 {
    width: 41.66666667%
}

.col-md-4 {
    width: 33.33333333%
}

.col-md-3 {
    width: 25%
}

.col-md-2 {
    width: 16.66666667%
}

.col-md-1 {
    width: 8.33333333%
}
.col-auto {
    width: auto;
}

.background-white {
    background-color: rgba(255, 255, 255, 1)!important;
}

.font-white {
    color: white!important;
}

.elevated-item {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    font-size: 14px;
    display: flex;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    margin-bottom: 10px;
    height: 35px;
    line-height: 35px;
    min-width: 70px;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

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

.hover-scale:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.row {
    box-sizing: border-box;
    /* overflow: hidden; */
    position: relative;
}

.chip {
    box-sizing: border-box;
    display: flex;
    text-decoration: none;
    margin: 4px auto;
    padding: 0;
    outline: 0;
    position: relative;
    background-color: rgb(224, 224, 224);
    border-radius: 16px;
    white-space: nowrap;
    width: fit-content;
}

.chip span {
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px;
    line-height: 32px;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
}

.chip .chip-icon-container {
    background-color: rgb(188, 188, 188);
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    margin-right: -4px;
}

.chip .chip-icon-container .chip-icon {
    position: relative;
    /*font-size: 20px;*/
    display: inline-block;
    user-select: none;
    /*width: 20px;*/
    /*height: 20px;*/
    margin: 6px;
    color: rgb(68, 68, 68);
}

.chip.chip-error span,
.chip.chip-error .chip-icon {
    color: #E74C3C;
}

.tab-space {
    white-space: pre!important;
}

.caret-dropdown {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    vertical-align: middle;
    border-top: 5px solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.caret-dropup {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 5px solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.filter-table {
    color: white;
    font-size: 14px!important;
    margin-left: 4px;
}

.filter-table.active {
    color: lawngreen;
}

.circle-icon {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    display: flex;
    text-decoration: none;
    padding: 0;
    outline: 0;
    position: relative;
    background-color: rgb(240, 240, 240);
    border-radius: 50%;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
    align-content: center;
}

.circle-icon > i {
    box-sizing: inherit;
    color: #1D1D1B;
}

.circle-icon.small-icon {
    width: 16px;
    height: 16px;
    font-size: 12px;
}



.background-test {
    height: 100%;
    width: 100%;
}

.redTheme {
    --c-main: #bf3b53;
    --c-grey: #e9ecef;
    --c-white: #f5f5f5;
}

.greenTheme {
    --c-main: #8bc34a;
    --c-grey: #e9ecef;
    --c-white: #f5f5f5;
}

.q-check label span {
    display: inline-block;
    position: relative;
    background-color: transparent;
    width: 20px;
    height: 20px;
    transform-origin: center;
    border: 2px solid var(--c-main);
    border-radius: 0%;
    vertical-align: -6px;
    margin-right: 10px;
    transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}

.q-check label {
    font-family: 'Klavika', sans-serif;
    color: var(--c-white);
}

.q-check label span:before {
    content: "";
    width: 0px;
    height: 2px;
    border-radius: 0px;
    background: var(--c-main);
    position: absolute;
    transform: rotate(45deg);
    top: 8px;
    left: 5px;
    transition: width 50ms ease 50ms;
    transform-origin: 0% 0%;
}

.q-check label span:after {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 0px;
    background: var(--c-main);
    position: absolute;
    transform: rotate(305deg);
    top: 12px;
    left: 6px;
    transition: width 50ms ease;
    transform-origin: 0% 0%;
}

.q-check input[type="checkbox"]:not(:disabled) + label:hover span:before {
    width: 5px;
    transition: width 100ms ease;
}

.q-check input[type="checkbox"]:not(:disabled) + label:hover span:after {
    width: 10px;
    transition: width 150ms ease 100ms;
}

.q-check input[type="checkbox"] {
    display: none;
}

.q-check input[type="checkbox"]:disabled + label span, .q-check input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
    opacity: .5;
}

.q-check input[type="checkbox"]:checked + label span {
    background-color: var(--c-main);
    border: 2px solid transparent;
}

.q-check input[type="checkbox"]:checked + label span:after {
    width: 10px;
    background: var(--c-grey);
    transition: width 150ms ease 100ms;
}

.q-check input[type="checkbox"]:checked + label span:before {
    width: 5px;
    background: var(--c-grey);
    transition: width 150ms ease 100ms;
}

.q-check input[type="checkbox"]:checked + label:hover span {
    background-color: var(--c-main);
    transform: scale(1.2);
    transition: transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}

@media (max-width: 940px) {
    body {
        height: auto;
    }
    body.login-body {
        height: 100%;
    }
    .border-box.responsive-box,
    .border-box.responsive-box .tabcontent {
        /* Change flex into contents to remove margin */
        display: contents;
        flex-direction: column;
        overflow: auto;
    }
    .border-box.responsive-box.with-inner-tab,
    .border-box.responsive-box.with-inner-tab .tabcontent {
        overflow: auto;
    }
    .border-box.responsive-box .tabcontent {
        flex: 1;
        height: auto !important;
    }

    .border-box.responsive-box .template-body > div > div > input,
    .border-box.responsive-box .template-body > div > div > select,
    .border-box.responsive-box .template-body > div > input,
    .border-box.responsive-box .template-body > div > select {
        width: 100%;
    }

    .border-box.responsive-box #vertical-menu-container {
        height: auto;
        width: 100%;
    }
    .border-box.responsive-box #vertical-menu-equipments,
    .border-box.responsive-box #vertical-menu-accounts {
        width: 100%;
    }

    .border-box.responsive-box .template-header p {
        margin: 0;
        padding: 6px 0 6px 80px;
    }
}

/*@media (max-device-aspect-ratio: 3/4) {*/
/*body {*/
/*height: calc(100vh * 1.333 - 9%);*/
/*}*/
/*}*/
/*@media (max-device-aspect-ratio: 2/3) {*/
/*body {*/
/*height: calc(100vh * 1.5 - 9%);*/
/*}*/
/*}*/
/*@media (max-device-aspect-ratio: 10/16) {*/
/*body {*/
/*height: calc(100vh * 1.6 - 9%);*/
/*}*/
/*}*/
/*@media (max-device-aspect-ratio: 9/16) {*/
/*body {*/
/*height: calc(100vh * 1.778 - 9%);*/
/*}*/
/*}*/

.label-info {
    text-align: left;
    padding-left: 25px;
}

.label-title {
    color: #203f53;
    font-size: 24px !important;
    font-weight: bold;
    text-align: left;
}

.p-2-3 {
    padding: 0.7rem !important;
}

.width-container {
    position: absolute;
    width: calc(100% - 35px) !important;
    top: 10px;
    right: 10px;
    transition: width 0.8s;
}

.button-add {
    background: #222222;
}

.button-add:hover {
    background: rgb(0, 0, 0);
    background: radial-gradient(circle, rgb(79, 79, 79) 25%, rgb(41, 41, 41) 80%);
    cursor: pointer;
}

.height-80 {
    height: 80%;
}

.height-60 {
    height: 60%;
}

.height-50 {
    height: 50%;
}

.height-30 {
    height: 30%;
}

.height-20 {
    height: 20%;
}

.height-20px {
     height: 20px;
 }

.item-list label
{
    display: list-item !important;
    width: 50% !important;
    /*width: 230px;*/
}

.disable-part {
    pointer-events: none;
    cursor: default !important;
    text-decoration: none;
    color: black;
}

.disable-part path{
    fill: #6e6e6e !important;
}

.disable-part use{
    opacity: 0;
}

.search-comptant {
    display: inline-block;
    margin-bottom: 5px;
}

.search-comptant input[type=checkbox]
{
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    float: right;
    position: relative;
    top: 1em;
    margin-right: 3%;
}

.search-comptant h4 {
    width: 70%;
    float: left;
}

.select2-left-square-border {
    border-radius: 4px 0 0 4px!important;
}

.background-color-1 {
    background: #3DBE9B;
}

.background-color-2 {
    background: #67D888;
}

.background-color-3 {
    background: #4498DF;
}

.background-color-4 {
    background: #9856BA;
}

.background-color-5 {
    background: #37495F;
}

.background-color-6 {
    background: #ECC400;
}

.background-color-7 {
    background: #DF7D0A;
}

.background-color-8 {
    background: #DF4A38;
}

.background-color-9 {
    background: #ECF0F1;
}

.background-color-10 {
    background: #97A5A5;
}

/*used to avoid overflow hiding of the filter's result*/
.typeahead__container {
    position: inherit!important;
}

.typeahead__container button,
.typeahead__container input,
.typeahead__container optgroup,
.typeahead__container select,
.typeahead__container textarea {
    font-family: 'Klavika', sans-serif!important;
    font-family: 'Klavika', sans-serif!important;
}

.search-account-type {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}

.search-account-type input[type=checkbox]
{
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    float: right;
    position: relative;
    margin-right: 3%;
}

.search-account-type a {
    width: 70%;
    float: left;
}

.img-gray {
    filter: brightness(0.6) grayscale(1);
}

.template-associated-list {
    margin-right: 10px;
}

.template-associated-list .template-associated-list-label {
    color: white;
    width: 125px !important;
    display: block;
    float: none;
}

.template-associated-list > div {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 0;
    padding: 5px 5px 5px 5px;
    background: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.template-associated-list .template-associated-list-container {
    display: flex;
    flex-direction: column;
}

.template-associated-list .template-associated-list-item {
    min-height: 50px;
    color: black;
    display: block;
    position: relative;
    flex: 1;
    padding: 6px;
    background: white;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    margin-bottom: 10px;
}

.template-associated-list .template-associated-list-item > p {
    color: black;
}

.template-associated-list .template-associated-list-item-delete {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 32px;
    color: #E53935;
    cursor: pointer;
}

.template-associated-list .template-associated-list-item-delete > i {
    margin: 8px auto;
}

.template-associated-list .template-associated-list-item-delete > i:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.template-associated-list .template-associated-list-item-new {
    cursor: pointer;
}
.template-associated-list .template-associated-list-item-new > p {
    font-size: 0.9em;
}

.template-associated-list .template-associated-list-item-new > p:hover {
    font-size: 1em;
}

.template-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1ch;
    border-width: 2px;
    padding: 2px 5px 2px 5px;
    border-style: solid;
    box-sizing: border-box;
}

.template-badge.blue {
    background-color: #0077C5;
    color: #FFFFFF;
    border-color: #0077C5;
}

.template-badge.red {
    background-color: #D52B1E;
    color: #FFFFFF;
    border-color: #D52B1E;
}

.template-badge.grey {
    background-color: #6B6C72;
    color: #FFFFFF;
    border-color: #6B6C72;
}

.template-badge.yellow {
    background-color: #FFBB00;
    color: #000000;
    border-color: #FFBB00;
}

.template-badge.green {
    background-color: #108000;
    color: #FFFFFF;
    border-color: #108000;
}

.template-badge.purple {
    background-color: #C9007A;
    color: #FFFFFF;
    border-color: #C9007A;
}

.template-badge.bluegreen {
    background-color: #008481;
    color: #FFFFFF;
    border-color: #008481;
}

.container-dis {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 100%;
}

.progress-bar-container-dis {
    width: 90%;
    height: 1rem;
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
    will-change: transform;
    box-shadow: 0 0 5px #e76f51;
}

.raw-page-simulation {
    position: absolute;
    top: 0;
    opacity: 0;
}

.progress-bar-dis {
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    top:0;
    bottom: 0;
    left: -100%;
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items:center;
    color: white;
    font-family: sans-serif;
}

.progress-bar-text-dis {
    position: absolute;
    z-index: 1;
    right: 0;
    top: -2px;
    text-shadow: 0 0 5px #404040;
}

.loading-content-overflow {
    overflow: hidden!important;
    justify-content: flex-start!important;
    align-items: stretch!important;
}

.loading-panel {
    min-width: 100% !important;
    min-height: 100% !important;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.loading-panel .loading-circle  {
    display: inline-block;
    content: " ";
    margin: 0 !important;
    border-radius: 50%;
    border: 3px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: loading-circle 1.2s linear infinite;
    aspect-ratio: 1/1;
    height: 50% !important;
    width: unset !important;
}

.disabled {
    opacity: 75%;
    filter: grayscale(100%);
}

.password-info {
    position:absolute;
    z-index: 111111;
    top:75px;
    right:25%;
    width:50%;
    padding:15px;
    background: #292929;
    font-size:.875em;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
}

.password-info ul li {
    margin:10px 20px;
    list-style-type: none;
}
.password-info {
    display:none;
    text-align: left;
}

.password-info h4 {
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
    color:#ddd;
}

.password-info::before {
    content: "\25B2";
    position:absolute;
    top:-12px;
    left:45%;
    font-size:14px;
    line-height:14px;
    color:#ddd;
    text-shadow:none;
    display:block;
}

.password-info .invalid {
    padding-left:22px;
    line-height:24px;
    color: #ff7a7b;
}

.password-info .valid {
    padding-left: 22px;
    line-height: 24px;
    color: #9cff92;
}

.white-circle {
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #FFF;
}

.cmd-img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
    -moz-filter: brightness(120%);
    -o-filter: brightness(120%);
    cursor: pointer;
}

.cmd-img:active {
    opacity: 0.5;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.circle-icon.cmd-img:hover i {
    filter: brightness(80%);
}

.validation-switch {
    position: relative;
    display: inline-block;
    width: 40px!important;
    flex: 0 40px!important;
    height: 22px;
}

.validation-switch input {
    opacity: 0;
    width: 100%;
    height: 100%;
}

/* The slider */
.validation-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: red;
    -webkit-transition: .4s;
    transition: .4s;
}

.validation-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:disabled + .validation-slider {
    background-color: #ddd;
}

input:checked + .validation-slider {
    background-color: #21f367;
}

input:focus + .validation-slider {
    box-shadow: 0 0 1px #21f367;
}

input:checked + .validation-slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}
.validation-slider.round {
    border-radius: 15px;
}

.validation-slider.round:before {
    border-radius: 50%;
}

.flex_01 {
    flex: 1;
}

.flex_02 {
    flex: 2;
}

.flex_03 {
    flex: 3;
}

.flex_04 {
    flex: 4;
}

.flex_05 {
    flex: 5;
}

.flex_06 {
    flex: 6;
}

.flex_07 {
    flex: 7;
}

.flex_08 {
    flex: 8;
}

.flex_09 {
    flex: 9;
}

.container {
    display: flex;
}

.row {
    flex-direction: row;
}

.column {
    flex-direction: column;
}

.space-around {
    justify-content: space-around;
}

.flex-start {
    justify-content: flex-start
}

.button {
    cursor: pointer;
}

.button:hover {
    filter: invert(15%);
}

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

.flex_01 {
    flex: 1!important;
}

.flex_02 {
    flex: 2!important;
}

.flex_03 {
    flex: 3!important;
}

.flex_04 {
    flex: 4!important;
}

.flex_05 {
    flex: 5!important;
}

.flex_06 {
    flex: 6!important;
}

.import-excel
{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1100;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 520px;
    height: 90%;
    max-height: 870px;
    min-height: 500px;
}

.rounded-panel {
    border-radius: 8px
}

.span-customer {
    color: white;
}

.action-button:hover {
    cursor: pointer;
    transform: scale(1.05)!important;
}

.template-icon.white-circle i {
    display: flex;
    transform: unset;
}

.table-list .badge-bubble,
.table-list-v2-body .badge-bubble {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-width: 11ch;
    height: 1.5em;
    border-radius: 1ch;
    border-width: 2px;
    border-style: solid;
}

.stylish-button {
    display: flex;
    padding-inline: 1em;
    border-width: 2px;
    border-style:  solid;
    border-radius: 5px !important;
    background-color: rgba(0, 0, 0, 0.55)!important;
    color: #EEEEEE;
    display: inline-block;
    font-family: 'Klavika', sans-serif;
    box-sizing: border-box;
    font-size: 1em;
    resize: none;
    cursor: pointer;
}

.stylish-button:has(i.fa.prefix-icon) {
    padding-left: 0.5em;
    padding-right: 0.8em;
}

.stylish-button:hover {
    background-color: rgba(0, 0, 0, 0.6)!important;
    color: #FFFFFF;
}

.stylish-button i.fa.prefix-icon {
    margin-right: 5px;
    font-size: .8em;
}


.interface-actions-container {
    border-radius: 10px;
    background: #505050;
    position: absolute;
    top: 20px;
    left: 0%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 4px;
    border: solid white 2px;
    z-index: 1002;
}

.interface-actions-container.right {
    /*right: 0%;*/
    transform: translateX(-50%);
    left: 100%;
}

.interface-actions-container>img {
    margin-top: 5px;
    margin-bottom: 5px;
}

.collapse-bar.horizontal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.collapse-bar .collapse-bar-shadow {
    height: 3px;
    position: absolute;
    top: -1px;
    bottom: 0;
    left: 0;
    background: blue;
    opacity: 0.5;
    pointer-events: none;
    transition-duration: 0.22s;
    transition-property: top,opacity,height;
    transition-timing-function: cubic-bezier(0.2,0,0,1);
}