:root {
    /* From /root/ folder, depending of the entity that is load */
    --use-main-color: rgb(var(--main-color));
    --use-main-color-2: rgb(var(--main-color-2));
    --use-light-main-color: rgb(var(--light-main-color, 197, 206, 64));

    --use-main-gray: rgb(var(--main-gray, 73, 80, 87));
    /* Use in styleApp.css */
    --neoleasy_old_green2: #179b8c;
    /* Only used in spinner */
    --neoleasy_gray: #495057;
    --white: white;
    --main_border_radius: 2vh;
    --navBar_width: 2.8vw;
    --navBar_height_mobile: 8vh;
    --placeholder_color: #707070;
    --sizeH_input: 30px;

    --monitoringPDF_height: 90vh;
    --monitoringPDF_angle: 10;


    --main-color: 61, 181, 128;
    --main-color-2: 25, 173, 149;
    --light-main-color: 197, 206, 64;
    --login-bg: 255, 255, 255;
    --secondary-alpha: 206, 214, 67, 1;


    --icon-size: 19px;
    --opacity: 70%;
    --button-hover: rgb(var(--main-color-2), var(--opacity));
    --even-row: #ddf0fa;
    --sizeH_input: 4vh;
}


html{
    height: 100vh;
    width:100vw;
    overflow: hidden;
    font-family: system-ui;
}
body {
    font-family: inherit;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body:first-child{
    flex: 0;
}
main{
    overflow: visible;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 0 !important; /*don't exactly know why, but it helps to make the scroll working on leftNavBar*/
    background: #d3edf0;
    color: #4369ad;
}
.content{
    overflow: scroll;
}

.headerLogo{
    display: flex;
    flex: 1;
}
#headerNav{
    white-space: nowrap;
    color: white;
    position: relative;
    overflow: visible;
}
nav a {
    color: white;
    font-size: 1.2em;
    margin-left: 10px;
    padding:15px;
    text-decoration: none;
}
#headerNav .headerLogo{
    position: absolute;
    left: 35px;
    top: 25px;
    z-index: 5;
    width: 250px;
}
#headerNav .headerLogo a:hover, nav a:hover{
    color: inherit;
    text-decoration: none;
}
.navLogo{
    max-height: 100%;
    height: 40px;
    width: auto;
}
.headerLogo .navLogo{
    max-height: 100%;
    height: auto;
    width: 100%;
    box-shadow: #bad0d3 1px 2px 4px 1px;
    border-radius: 50px;
}

#moreTokenContainer{
    padding: 5px 10px;
    border: 1px solid #6bc6f1;
    margin-right: 10px;
    border-radius: 10px;
    background: white;
    color: #4369ad;
}

#tokenContainer, #subContainer{
    padding: 7px 10px;
    border: 1px solid #6bc6f1;
    margin-right: 10px;
    border-radius: 10px;
    background: white;
    color: #4369ad;
    font-size: .8em;
}

a.connectionInput{
    width: 150px;
    text-align: center;
}

a:not(.noSpecialLink), a.activeLink:not(.noSpecialLink) {
  position: relative;
}
a:not(.noSpecialLink)::before, a.activeLink:not(.noSpecialLink)::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #f6f6f6;/*linear-gradient(90deg, white, transparent);*/
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }
a.noSpecialLink:hover{
    text-decoration: none;
}
a:not(.noSpecialLink):hover::before, a.activeLink:not(.noSpecialLink)::before {
  transform-origin: left;
  transform: scaleX(1);
}

.roundLink{
    background: white;
    color: #305aa5;
    border-radius: 50px;
    padding: 5px 15px;
    transition: background ease .3s, color ease .3s;
}
.roundLink:hover{
    color:white;
    background:#3695d6;
}

#leftNavBar a{
    color: #bac7e0;
    font-size: 1.2em;
    padding: 10px;
}
nav{
    display: flex;
}

header #headerNav{
    background: #305aa5; /*#2f3739; */
    display: flex;
    justify-content: flex-end;
    height: 100%;
    min-height: 75px;
}
header #profile{
    padding: 1em;
    color: lightseagreen;
    font-size: 1.2em;
}
.width25p{
    width: 25px;
}

table.maxSizedCol td{
    max-width: 300px;
    overflow: auto;
}

#profileMenu{
    position: absolute;
    top: 75px;
    right: 0;
    background: white;
    border-radius: 5px;
    border: 1px #d4d5d8 solid;
    z-index: 15;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#profileMenu > * {
    padding: 10px;
}
#profileMenu a:hover{
    text-decoration: none;

}

:root {
    /* From /root/ folder, depending of the entity that is load */
    --use-main-color: rgb(var(--main-color));
    --use-main-color-2: rgb(var(--main-color-2));
    --use-light-main-color: rgb(var(--light-main-color, 197, 206, 64));

    --use-main-gray: rgb(var(--main-gray, 73, 80, 87));
    /* Use in styleApp.css */
    --neoleasy_old_green2: #179b8c;
    /* Only used in spinner */
    --neoleasy_gray: #495057;
    --white: white;
    --main_border_radius: 2vh;
    --navBar_width: 2.8vw;
    --navBar_height_mobile: 8vh;
    --placeholder_color: #707070;
    --sizeH_input: 30px;

    --monitoringPDF_height: 90vh;
    --monitoringPDF_angle: 10;


    --main-color: 61, 181, 128;
    --main-color-2: 25, 173, 149;
    --light-main-color: 197, 206, 64;
    --login-bg: 255, 255, 255;
    --secondary-alpha: 206, 214, 67, 1;


    --icon-size: 19px;
    --opacity: 70%;
    --button-hover: rgb(var(--main-color-2), var(--opacity));
    --even-row: rgba(var(--main-color), .15);
    --sizeH_input: 4vh;
}



/*#region input*/
input::placeholder {
    font-family: inherit !important;
}

input:disabled {
    cursor: not-allowed;
}

input:read-only:not([type="button"]):not([type="submit"]):not([type="range"]) {
    background-color: white !important;
    cursor: pointer;
}

input[type="submit"]:disabled {
    background: #ccc;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    cursor: pointer;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Chrome */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Opéra*/
input::-o-inner-spin-button,
input::-o-outer-spin-button {
    -o-appearance: none;
    margin: 0;
}
/*endregion*/

label {
    cursor: pointer;
}

/*#region table & children*/

table.fixed {
    table-layout: fixed;
}

table.separateLastCell tr>*:nth-last-child(2) {
    border-right: 3px solid #737373 !important;
}

table.progress-bar-table,
table.progress-bar-table * {
    border: none;
}

table.progress-bar-table {
    position: relative;
}

table.progress-bar-table::after {
    content: ">";
    position: absolute;
    right: 0;
    transform: translateY(50%);
    bottom: 50%;
    font-size: 1.2em;
}

table.progress-bar-table .progress-bar-border>td {
    border-top: 2px solid lightgray;
}

table.progress-bar-table .progress-bar-border>td.completed {
    border-top: 2px solid green;
}

tr:not(.trColored) th {
    background: var(--white);
    text-align: center;
}

tr {
    border: black 1px groove;
}

thead.bordered th {
    border: 1px black solid;
}

td {
    border: black 1px groove;
    padding: 7px;
    text-align: center;
}

th {
    padding: 7px;
}

tr:not(.hidden):nth-of-type(odd) {
    background: var(--white);
}

table .oddRow {
    background: white !important;
}

tr.right-border-eSign>*:not(:last-child) {
    border-right: solid 1px #dadada;
}

tr.right-border-eSign>td:last-child {
    text-align: left;
    padding-left: 20px;
}

tbody>tr.right-border-eSign {
    background-color: var(--white) !important;
}

/*#endregion*/

/* ##########################################*/

/* region class input*/
.inputCorrect {
    /*background-color: rgba(100, 255, 100, 0.2) !important;*/
    border: #4084ff 2px groove !important;
}

.inputIncorrect {
    /*background-color: rgba(255, 100, 100, 0.2) !important;*/
    border: #ff4500 2px groove !important;
}

.input-group-text {
    width: 100%;
    background: none;
    border: none;
    padding: 0.375rem 0;
    font-weight: bold;
    white-space: unset;
    text-align: start;
}

.input-group-prepend {
    margin: 0;
}

.inputNeoRound {
    outline: none;
    border-radius: 10px;
    border-color: #cecece;
    border-style: solid;
    box-shadow: 1px 2px 5px 2px rgba(187, 195, 197, 0.6);
}

.inputRound:not(.dark) {
    border-radius: 10px;
    outline: none;
    border-color: #cecece;
    border-style: solid;
    box-shadow: 1px 2px 5px 2px rgba(187, 195, 197, 0.6);
    height: var(--sizeH_input);
    background: var(--white);
}

/*endregion*/

.width100{
    width:100%;
}
.width75{
    width:75%;
}
.width50{
    width:50%;
}
/*#region Margin/Padding*/
.margin0,
.m0 {
    margin: 0;
}

.margin10 {
    margin: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mr0 {
    margin-right: 0;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.mr30 {
    margin-right: 30px;
}

.mr40 {
    margin-right: 40px;
}

.ml0 {
    margin-left: 0;
}

.ml10 {
    margin-left: 10px;
}

.ml20 {
    margin-left: 20px;
}

.ml30 {
    margin-left: 30px;
}

.ml40 {
    margin-left: 40px;
}

.mh10 {
    margin-right: 10px;
    margin-left: 10px;
}

.mh20 {
    margin-right: 20px;
    margin-left: 20px;
}

.mh30 {
    margin-right: 30px;
    margin-left: 30px;
}

.mh40 {
    margin-right: 40px;
    margin-left: 40px;
}

.mv10 {
    margin-bottom: 10px;
    margin-top: 10px;
}

.mv20 {
    margin-bottom: 20px;
    margin-top: 20px;
}

.mv30 {
    margin-bottom: 30px;
    margin-top: 30px;
}

.mv40 {
    margin-bottom: 40px;
    margin-top: 40px;
}

.mCornerTR10 {
    margin-right: 10px;
    margin-top: 10px;
}

.mCornerTR20 {
    margin-right: 20px;
    margin-top: 20px;
}

.mCornerTR30 {
    margin-right: 30px;
    margin-top: 30px;
}

.mCornerTR40 {
    margin-right: 40px;
    margin-top: 40px;
}

.mCornerTL10 {
    margin-left: 10px;
    margin-top: 10px;
}

.mCornerTL20 {
    margin-left: 20px;
    margin-top: 20px;
}

.mCornerTL30 {
    margin-left: 30px;
    margin-top: 30px;
}

.mCornerTL40 {
    margin-left: 40px;
    margin-top: 40px;
}

.marginLR10 {
    margin: 0 10px;
}

.marginLR15 {
    margin: 0 15px;
}

.marginChild0>* {
    margin: 0;
}

.marginChildLR5>* {
    margin: 0 5px;
}

.marginChildLR15>* {
    margin: 0 15px;
}

.marginRimChild>*:last-child {
    margin-right: 0;
}

.marginRimChild>*:first-child {
    margin-left: 0;
}

.marginChildTB5>* {
    margin: 5px 0;
}

.marginChildTB15>* {
    margin: 15px 0;
}

.marginRimChildTB>*:last-child {
    margin-bottom: 0;
}

.marginRimChildTB>*:first-child {
    margin-top: 0;
}

.paddingChild5>* {
    padding: 5px;
}

.paddingRimChild>*:last-child {
    padding-right: 0;
}

.paddingRimChild>*:first-child {
    padding-left: 0;
}

.noPaddingChildren * {
    padding: 0;
}

.noPaddingVChildren * {
    padding-top: 0;
    padding-bottom: 0;
}

.noPaddingHChildren * {
    padding-left: 0;
    padding-right: 0;
}

.padding0 {
    padding: 0;
}

.padding10 {
    padding: 10px;
}

.paddR0 {
    padding-right: 0px;
}

.paddR10 {
    padding-right: 10px;
}

.paddL10 {
    padding-left: 10px;
}

/*#endregion*/

/*#region space child*/
.spaceChild,
.spaceChild5,
.spaceChild10,
.spaceChildNotFlex,
.spaceChild5NotFlex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.spaceChild>*:last-child,
.spaceChild5>*:last-child,
.spaceChild10>*:last-child,
.spaceChildNotFlex>*:last-child,
.spaceChild5NotFlex>*:last-child {
    margin-right: 0;
}

.spaceChild:not(.row-in-it)>*:first-child,
.spaceChild5:not(.row-in-it)>*:first-child,
.spaceChild10:not(.row-in-it)>*:first-child,
.spaceChildNotFlex:not(.row-in-it)>*:first-child,
.spaceChild5NotFlex:not(.row-in-it)>*:first-child {
    margin-left: 0;
}

.spaceChild>*,
.spaceChildNotFlex>* {
    margin: 0 15px;
}

.spaceChild10>* {
    margin: 0 10px;
}

.spaceChild5>*,
.spaceChild5NotFlex>* {
    margin: 0 5px;
}

.spaceChild>*,
.spaceChild5>*,
.spaceChild10>* {
    flex: 1 1;
}

/*#endregion space child*/


/*#region flex*/

.flexAlignEnd {
    display: flex;
    align-items: flex-end !important;
}

.flexAlignCenter {
    display: flex;
    align-items: center !important;
}

.flexAlignStart {
    display: flex;
    align-items: flex-start !important;
}
.flexAlignNormal {
    display: flex;
    align-items: normal !important;
}

.flexAlignBaseline {
    display: flex;
    align-items: baseline !important;
}

.flexAround {
    display: flex;
    justify-content: space-around !important;
    align-items: center;
}

.flexAroundS {
    display: flex;
    justify-content: space-around !important;
    align-items: flex-start !important;
}

.flexBetween {
    display: flex;
    justify-content: space-between !important;
    align-items: center;
}

.flexCenter {
    display: flex;
    justify-content: center !important;
    align-items: center;
}

.flexEvenly {
    display: flex;
    justify-content: space-evenly !important;
    align-items: center;
}

.flexChild>* {
    flex: 1 1;
}

.flexChild4>* {
    flex: 4 1 20% !important;
}

.flexColumn {
    display: flex;
    flex-direction: column !important;
}

.flexRow {
    display: flex;
    flex-direction: row !important;
}

.flexEnd {
    display: flex;
    justify-content: flex-end !important;
    align-items: center;
}

.flexEnds {
    display: flex;
    justify-content: flex-end !important;
    align-items: flex-end;
}

.flexJustifyEnd {
    display: flex;
    justify-content: flex-end !important;
}

.flexStart {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
}

.flexStartS {
    display: flex;
    justify-content: flex-start !important;
    align-items: flex-start;
}

.flexRowReverse {
    display: flex;
    flex-direction: row-reverse !important;
}

.flexWrap {
    display: flex;
    flex-wrap: wrap !important;
}

.flexNoWrap {
    display: flex;
    flex-wrap: nowrap !important;
}

.flexStretch {
    display: flex;
    align-items: stretch !important;
}

/*#endregion flex*/

/*#region Font size*/
.fontSize1vh {
    font-size: 1vh;
}

.fontSizeXL {
    font-size: 1.6em;
}

.fontSizeL {
    font-size: 1.2em;
}

.fontSizeNormal {
    font-size: 1em;
}

.fontSizeS {
    font-size: .8em;
}

/*#endregion*/



/*#region .Table*/
.neoTable {
    width: 100%;
    overflow: auto;
    text-align: center;
    border-radius: 10px;
    outline: none;
    border: 1px #cecece solid;

    box-shadow: 1px 2px 5px 2px rgba(187, 195, 197, 0.6);
    table-layout: auto;
}

.neoTable>table {
    width: 100% !important;
}

.neoTable tr:hover td {
    background-color: rgba(50, 50, 50, 0.1) !important;
}


.tableStickyHead thead {
    position: sticky;
    top: 0;
    padding-bottom: 5px;
    z-index: 3;
}

.table-bordered {
    border: solid #ccc 1px;
    /*
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    */
}

.table-noBorder {
    border: none;
    border-radius: 10px;
}

.table-noBorder tr,
.table-noBorder td {
    border: none;
}

.table-noBorder .bordered {
    border: 1px solid #dee2e6;
}

.table-bordered td,
.table-bordered th {
    width: 0%;
}

table:not(.tableWithColgroup):not(.noColoredRow) tr:nth-of-type(even) {
    background: #deecea;
}

table .evenRow,
.trColored {
    background: #deecea !important;
}

table.greenHeader>thead {
    color: var(--use-main-color-2);
}

table.tableWithColgroup tr:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.6);
}

table.tableWithColgroup tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.2);
}

table.aligningTable {
    border: 1px rgba(100, 100, 100, 0.5) solid;
}

table.aligningTable * {
    border: none;
    background-color: var(--white);
    text-align: left;
}

table.aligningTable td,
table.aligningTable th {
    border-left: 1px rgba(100, 100, 100, 0.1) solid;
    border-right: 1px rgba(100, 100, 100, 0.1) solid;
}

table.aligningTable td:last-child,
table.aligningTable th:last-child {
    border-right: 1px rgba(100, 100, 100, 0.5) solid;
}

table.aligningTable td:first-child,
table.aligningTable th:first-child {
    border-left: 1px rgba(100, 100, 100, 0.5) solid;
}

.newTableOverflowApp thead {
    position: sticky;
    top: -1px;
    z-index: 2;
}

.newTableOverflowApp tbody {
    overflow: auto;
    z-index: 2;
}

tr.lilRow>td {
    padding: 0px;
}

/*#endregion*/


.row:not(.auto) {
    width: 100%;
}

.actionLegend{
    height: 100%;
    overflow: scroll;
}

/*#region titre*/
.title {
    color: var(--white);
    font-weight: 300;
    margin-top: 30px;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 2px #2b5093;
}

.titreCRM {
    /*margin-bottom: 30px;*/
    color: var(--white);
    background: var(--neoleasy_old_green2);
    font-weight: bold;
}

.soustitre {
    font-size: 15px;
}

.txCenter {
    text-align: center !important;
}

.txRight {
    text-align: right !important;
}

.txLeft {
    text-align: left !important;
}

.txJus {
    text-align: justify !important;
}

/*#endregion*/


/*#region alert info styles*/
.alertContainer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
}

.warningAlertTop {
    min-height: 50px;
    min-width: 200px;
    z-index: 2000;
    animation: displayConfirm forwards 5s;
    -webkit-animation: displayConfirm 5s forwards;
    padding: 10px;
    pointer-events: none;
    border-left: none !important;
    border-right: none !important;
}

.warningAlertBorder {
    padding: 1em;
    margin-bottom: 2em;
    border-radius: 25px;
}

.confirmationAlert,
.refusAlert,
.warningAlert {
    position: fixed;
    margin: auto;
    border-radius: 20px;
    min-height: 50px;
    min-width: 200px;
    z-index: 2000;
    animation: displayConfirm forwards 5s;
    -webkit-animation: displayConfirm 5s forwards;
    padding: 10px;
    pointer-events: none;
}

.confirmationAlertNotif,
.refusAlertNotif,
.warningAlertNotif {
    position: absolute;
    bottom: 10px;
    right: 0;
    border-radius: 20px;
    min-height: 50px;
    min-width: 200px;
    z-index: 2000;
    animation: displayNotif forwards 5s;
    -webkit-animation: displayNotif 5s forwards;
    padding: 10px;
    pointer-events: none;
}

.confirmationAlert.extended,
.refusAlert.extended,
.warningAlert.extended {
    animation: displayConfirmExtended forwards 10s;
    -webkit-animation: displayConfirmExtended 10s forwards;
}

.confirmationAlertNotif.extended,
.refusAlertNotif.extended,
.warningAlertNotif.extended {
    animation: displayNotifExtended forwards 10s;
    -webkit-animation: displayNotifExtended 10s forwards;
}

.confirmationAlert,
.confirmationAlertNotif {
    background: #a5dbd4;
    border: none;
    color: var(--white);
}

.refusAlert,
.refusAlertNotif {
    background: indianred;
    border: red 3px ridge;
}

.warningAlert,
.warningAlertNotif,
.warningAlertTop,
.warningAlertBorder {
    background: orange;
    border: darkorange 3px ridge;
    animation: none;
    pointer-events: all;
}

/*#endregion*/


/*#########################*/

/*#region confirm/notif popup*/
@keyframes displayConfirmExtended {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    5% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    10% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    90% {
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

@keyframes displayNotifExtended {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    5% {
        -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    10% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    90% {
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

/*endregion*/

.noBreakWord {
    white-space: nowrap;
}

.pagination {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.padding0child>* {
    padding: 0;
}

.page-item {
    flex: 1 1;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 10px;
}

.page-link {
    border: none;
    display: flex;
    justify-content: center;
}

.page-link:hover {
    border-radius: 10px;
}

.positionStatic {
    position: static !important;
}

.round {
    border: none;
    border-radius: 50%;
}

.currentPagination,
.disabledPagination {
    border-radius: var(--main_border_radius);
}

.currentPagination {
    background: linear-gradient(360deg, #dddddd, var(--white));
}

.disabledPagination {
    background: rgba(220, 220, 220, 0.4);
    pointer-events: none;
    cursor: default;
}


.hidden {
    display: none !important;
}

.hiddenSecondary {
    display: none !important;
}

.visible {
    display: block !important;
}



/*region datalist*/
.datalistof{
    border-radius: 10px;
    border: #dcf4fd 1px solid;
    height: fit-content;
    max-height:400px;
    display: flex;
    flex-direction: column;
}
.datalistofHeader{
    display: flex;
    padding: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
    flex: 0;
}
.datalistofHeader .datalistofHeaderLabel{
    margin-right: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.datalistofHeader .datalistofHeaderLabel label{
    margin: 0;
}

[id*=datalistof]{
    display: flex;
}

[id*=datalistof] [tag="datalistElement"]{
    display: flex;
    flex-direction: column;
    border-bottom: 1px #bebebe solid;
}
[id*=datalistof] [tag="datalistElement"] label{
    margin-right: 2em;
}

[id*=datalistof] .datalistCheckbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.datalistofBody{
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}

.datalistCheckall{
    display:flex;
    justify-content: flex-start;
    flex-direction: column;
    height: fit-content;
    padding : 0 10px 0 10px;
    flex:0;
}
/*endregion datalist*/


/*#region clickable*/
.clickable,
.clickable-hover,
.clickableChild>* {
    cursor: pointer;
}

.clickable-hover:hover>*,
.clickableChild>*:hover {
    background-color: #0000000a !important;
}

.clickableText {
    cursor: pointer;
    color: #0d47a1;
    transition: color ease 0.3s;
}

.clickableText:hover {
    cursor: pointer;
    color: dodgerblue;
}

.hiddenCollapse {
    visibility: collapse !important;
}

/*#endregion*/

/*#region alert info styles*/
.alertContainer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
}

.warningAlertTop {
    min-height: 50px;
    min-width: 200px;
    z-index: 2000;
    animation: displayConfirm forwards 5s;
    -webkit-animation: displayConfirm 5s forwards;
    padding: 10px;
    pointer-events: none;
    border-left: none !important;
    border-right: none !important;
}

.warningAlertBorder {
    padding: 1em;
    margin-bottom: 2em;
    border-radius: 25px;
}

.confirmationAlert,
.refusAlert,
.warningAlert {
    position: fixed;
    margin: auto;
    border-radius: 20px;
    min-height: 50px;
    min-width: 200px;
    z-index: 2000;
    animation: displayConfirm forwards 5s;
    -webkit-animation: displayConfirm 5s forwards;
    padding: 10px;
    pointer-events: none;
}

.confirmationAlertNotif,
.refusAlertNotif,
.warningAlertNotif {
    position: absolute;
    bottom: 10px;
    right: 0;
    border-radius: 20px;
    min-height: 50px;
    min-width: 200px;
    z-index: 2000;
    animation: displayNotif forwards 5s;
    -webkit-animation: displayNotif 5s forwards;
    padding: 10px;
    pointer-events: none;
}

.confirmationAlert.extended,
.refusAlert.extended,
.warningAlert.extended {
    animation: displayConfirmExtended forwards 10s;
    -webkit-animation: displayConfirmExtended 10s forwards;
}

.confirmationAlertNotif.extended,
.refusAlertNotif.extended,
.warningAlertNotif.extended {
    animation: displayNotifExtended forwards 10s;
    -webkit-animation: displayNotifExtended 10s forwards;
}

.confirmationAlert,
.confirmationAlertNotif {
    background: #a5dbd4;
    border: none;
    color: var(--white);
}

.refusAlert,
.refusAlertNotif {
    background: indianred;
    border: red 3px ridge;
}

.warningAlert,
.warningAlertNotif,
.warningAlertTop,
.warningAlertBorder {
    background: orange;
    border: darkorange 3px ridge;
    animation: none;
    pointer-events: all;
}

/*#endregion*/

/*#region alert info styles*/
.confirmationAlert.extended,
.refusAlert.extended,
.warningAlert.extended {
    position: fixed;
    margin: auto;
    border-radius: 20px;
    min-height: 50px;
    min-width: 200px;
    z-index: 2000;
    padding: 10px;
    pointer-events: none;
}

.confirmationAlertNotif.extended,
.refusAlertNotif.extended,
.warningAlertNotif.extended {
    position: absolute;
    bottom: 10px;
    right: 0;
    border-radius: 20px;
    min-height: 50px;
    min-width: 200px;
    z-index: 2000;
    padding: 10px;
    pointer-events: none;
}

/*#endregion*/




.confirmationAlert,
.refusAlert,
.warningAlert {
    position: fixed;
    margin: auto;
    border-radius: 20px;
    min-height: 50px;
    min-width: 200px;
    z-index: 20;
    animation: displayConfirm forwards 5s;
    -webkit-animation: displayConfirm 5s forwards;
    padding: 10px;
    pointer-events: none;
}

.confirmationAlert {
    background: mediumseagreen;
    border: green 3px ridge;
}


.warningAlert {
    background: orange;
    border: darkorange 3px ridge;
    animation: none;
    pointer-events: all;
}


.refusAlert {
    background: indianred;
    border: red 3px ridge;
}





@keyframes displayConfirm {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    10% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    20% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    80% {
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

@keyframes displayNotif {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    10% {
        -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    20% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    80% {
        opacity: 1;
    }

    100% {
        display: none;
        opacity: 0;
    }
}


/*region leftNavBar*/
.mainContent{
    min-height: 100%;
    max-height: 100%;
    height: fit-content;
}

#leftNavBar{
    background: white;
    color: #bac7e0;
    height: 100%;
    min-height: fit-content;
    max-height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    overflow-x: visible;
    position: relative;

    border-radius: 0 50px 50px 0;
    border: 1px #e3e3e3 solid;
    padding: 60px 15px 20px 15px;
    box-shadow: #c6dee1 2px 2px 3px 0px;
    transition: width ease .3s;
    width: 350px;
}
#leftNavBar[isDisplay="0"]{
    min-width: 15px;
    width: 15px;
    padding-right: 0;
    padding-left: 0;
}
#leftNavBar > *:not(#leftNavBarButton){
    transition: opacity ease .2s;
}
#leftNavBar[isDisplay="0"] > *:not(#leftNavBarButton){
    opacity: 0;
}

#leftNavBarButton{
    position: absolute;
    right: -15px;
    top: 50%;
    background: white;
    z-index: 5;
    border: 1px #c4cddd solid;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: rotate ease .3s;
}

.leftNavBarGroup{
    margin: 10px 0;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.leftNavBarGroup > *{
    margin-top: 3px;
}

[navbarFilters]{
    border: 2px solid #dcf4ff;/*#6bc6f1;*/
    padding: 5px;
    border-radius: 15px;
}


[navbarFiltersTitle]{
    cursor: pointer;
    padding: 0 10px;
}

.navbarFilterCheckboxRow{
    display: flex;
    justify-content: start;
    align-items: start;
}
.navbarFilterCheckboxContainer{
    display: flex;
    justify-content: space-evenly;
    align-items: start;
    width: 100%;
}

.navbarFilterCheckboxTitle{
    width: 50%;
}
/*endregion*/

.datalistLabelValue{
    width: 100%;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.iconImg{
    width: 17px !important;
    height: 17px !important;
    margin: 0 2px;
}


.totalsContainer{
    max-width: 1000px;
    min-width: 500px;
    width: 75%;
    background: #bdd6e5;
    border-radius: 20px;
    color: #4369ad;
    border: 1px #e3e3e3 solid;
    box-shadow: #efefef 1px 1px 3px 0px;
    padding: 20px;

}
[totals]{
    border-radius: 50px;
    border: 1px #e3e3e3 solid;
    box-shadow: #efefef 1px 1px 4px 0px;
    background: white;
}

.targetCompaniesHeader{
    font-size: 1.4em;
}
#counterContainer{
    background: white;
    border-radius: 30px 0 0 30px;
    padding: 15px;
    border: 1px #e3e3e3 solid;
    box-shadow: #efefef 1px 1px 4px 0px;
    height: 100%;
    width: 150px;
    position: absolute;
    right: 0;
    transition: width ease .3s;
}
#counterContainer > *{
    height: 100%;
}
#counterContainer[isDisplay="0"]{
    width: 0;
    padding: 0;
}
#counterContainer[isDisplay="0"] > * {
    width: 0;
    position:relative;
    overflow-x:visible;
}
#counterContainer[isDisplay="0"] > * *:not(#decompteDisplayButton){
    visibility: collapse;
}
#decompteDisplayButton{
    position: absolute;
    left: -15px;
    background: white;
    z-index: 5;
    border: 1px #c4cddd solid;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: rotate ease .3s;
}
#criteriaList {
    overflow: auto;
    min-height:200px;
    background: white;
    border-radius: 20px;
    padding: 15px;
    box-shadow: #c6dee1 2px 2px 3px 0px;
    width: 60%;
}

.marginChildBT5>* {
    margin: 5px 0;
}

.marginChildBT15>* {
    margin: 15px 0;
}

.marginRimChildVertical>*:last-child {
    margin-bottom: 0;
}

.marginRimChildVertical>*:first-child {
    margin-top: 0;
}


/*region spinner datafinder*/
.loaderOverlay{
    position: relative;
}
.loaderOverlay:not(.loaderOverlayDisplay) > .loaderContainer{
    display: hidden !important;
    visibility: collapse !important;
}

.loaderOverlay > .loaderContainer{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff9e;

    width: 100%;
    height: 100%;
    z-index: 10;
}
.loaderOverlay > .loaderContainer img{
    position: relative;
    width: 35px;
}
.loaderOverlay > .loaderContainer .loader {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #2d5aa6;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loaderOverlay > .loaderContainer .loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border-bottom: 4px solid #68c5f0;
    border-left: 4px solid transparent;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*endregion*/

/* region subscription menu*/
.subcriptionContainer{
    padding: 1.5em;
    background: white;
    border: 1px solid #9dcff5;
    border-radius: 20px;
    box-shadow: 3px 2px 5px 1px grey;
    width: 200px;
}
.subcriptionContainer button.normal{
    background: #9dcff5  !important;
    border-radius: 5px !important;
    color: #305aa4 !important;
    border: none;
    box-shadow: 1px 1px 5px 2px grey;
    padding: 5px 20px;
    transition: color .3s ease, background .3s ease;
}
.subcriptionContainer:hover button.normal{
    background: #49a13d !important;
    color: white !important;
}
.subcriptionContainer [token="container"]{
    font-size: 1.4em;
    background: #d6edfd;
    color: #4384f7;
    padding: 5px 15px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: color .3s ease, background .3s ease;
}
.subcriptionContainer:hover [token="container"]{
    background: #49a13d;
    color: white;
}
.subcriptionContainer [token="token"]{
    font-size: 1.8em;
}
.subcriptionContainer [token="details"]{
    font-size: 1em;
}
.subcriptionContainer [price="container"]{
    margin: 10px;
    color: #305aa4;
    text-align: center;
    transition: color .3s ease;
}
.subcriptionContainer:hover [price="container"]{
    color: #49a13d;
}
.subcriptionContainer [price="title"]{
    font-size: 4em;
}
.subcriptionContainer [price="details"]{
    font-size: 1.2em;
}
.subcriptionContainer [formulaName]{
    font-size: 1.4em;
    background: #9dcff5;
    color: #305aa4;
    padding: 5px 15px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    transition: color .3s ease, background .3s ease;
}
.subcriptionContainer:hover [formulaName]{
    background: #49a13d;
    color: white;
}
.subcriptionContainer label{
    color: #4384f7;
    transition: color .3s ease;
}
.subcriptionContainer:hover label{
    color: #4aa23d;
}
.favorite{
    background: #d6edfd;
    color: ;
    padding: 5px 10px 10px 10px;
    border-radius: 20px;
    transition: background .3s ease;
}
.favorite:hover{
    background: #90d9ac;
}
.favoriteTitle{
    color: #305aa4;
    margin-bottom: 5px;
    text-align: center;
    font-size: 1.5em !important;
    text-transform: uppercase;
    transition: color .3s ease;
}
.favorite:hover .favoriteTitle{
    color: white;
}
.favorite .subcriptionContainer{
    padding-bottom: 11px;
}
/* endregion subscription menu*/


.periodicityInputContainer{
    border: 1px #305aa5 solid;
    border-radius: 50px;
    background: white;
    color: #305aa5;
}
/*
.periodicityInputContainer > *:first-child{
    border-right: 2px #8ce3ed solid;
}
.periodicityInputContainer > *:last-child{
    border-left: 2px #8ce3ed solid;
}*/
.periodicityInput{
    /*border: 1px #8ce3ed solid;*/
    border-radius: 50px;
    font-size: 1.6em !important;
    padding: 10px 25px;
    transition: background .3s ease;
    cursor: pointer;
}
.periodicityInput:hover{
    background: #bdd6e5;
}
.periodicityInput.selectedInput{
    background: #8ce2ec; /*#3698db;*/
}

/* region toggle button*/
.toggle {
  --width: 80px;
  --height: calc(var(--width) / 3);

  position: relative;
  display: inline-block;
  width: var(--width);
  height: var(--height);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: var(--height);
  cursor: pointer;
}

.toggle input {
  display: none;
}

.toggle .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--height);
  background-color: #ccc;
  transition: all 0.4s ease-in-out;
}

.toggle .slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--height));
  height: calc(var(--height));
  border-radius: calc(var(--height) / 2);
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-in-out;
}

.toggle input:checked+.slider {
  background-color: #2196F3;
}

.toggle input:checked+.slider::before {
  transform: translateX(calc(var(--width) - var(--height)));
}

.toggle .labels {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-family: sans-serif;
  transition: all 0.4s ease-in-out;
}

.toggle .labels::after {
  content: attr(data-off);
  position: absolute;
  right: 5px;
  color: #4d4d4d;
  opacity: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  transition: all 0.4s ease-in-out;
}

.toggle .labels::before {
  content: attr(data-on);
  position: absolute;
  left: 5px;
  color: #ffffff;
  opacity: 0;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
  transition: all 0.4s ease-in-out;
}

.toggle input:checked~.labels::after {
  opacity: 0;
}

.toggle input:checked~.labels::before {
  opacity: 1;
}
/* endregion toggle button*/


.disable{
    mix-blend-mode: luminosity;
}

.progress{
    background: #ccd2d9;
}


.titleElement{
    background: white;
    border-radius: 50px;
    color: #3697db;
    padding: 10px;
    box-shadow: #e2e2e2 0px 3px 3px 2px; /*#efefef 2px 2px 3px 0px;*/
    min-width: 120px;
    text-align: center;
}

.actionElement{
    background: white;
    border-radius: 10px;
    border: 1px #e3e3e3 solid;
    padding: 10px 20px;
    box-shadow: #efefef 1px 1px 3px 0px;
    text-align: center;
}

input[type="button"]{
    background-color: white !important;
}

#exportTable thead th{
    background: #8fbfd6;
    color: white;
}
#exportTable thead tr > th:first-child{
    border-radius: 10px 0 0 0;
}
#exportTable thead tr > th:last-child{
    border-radius: 0 10px 0 0;
}
#exportTable tr:last-child > td:first-child{
    border-radius: 0 0 0 10px;
}
#exportTable tr:last-child > td:last-child{
    border-radius: 0 0 10px 0;
}

.bgContainer{
    position:relative;
    z-index: 0;
}
.bgContainer .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bgContainer .bg img{
    width: 50%;
    padding: 50px;
}

.verticalMirror{
    transform: rotateY(180deg)
}
.horizontalMirror{
    transform: rotateX(180deg)
}

.popUpCenter>div{
    background: var(--white) !important;
    border-radius: 30px !important;
    color: #305aa5;
}
.buttonPop, button:not([data-toggle="dropdown"]):not(.close):not(.normal){
    background-color: #305aa5 !important;
    border-radius: 5px !important;
    color: white !important;
    border: 1px #285dbb solid !important;
    box-shadow: 1px 1px 5px 2px #2b5093;
    padding: 5px 20px;
}
.buttonPop, button:not([data-toggle="dropdown"]):not(.close):not(.normal):disabled{
    background-color: #676b72 !important;
}
.title button.close{
    border-radius: 50% !important;
    background: #496aa6 !important;
    padding: 6px;
}
.close{
    opacity: 1;
    width: 25px;
    height: 25px;
}
.close img{
    width: 100%;
    height: 100%;
}


.moreTokenPage{
    background: #305aa5;
    color: white;
}
.moreTokenTitle{
    font-size: 2em;
}

.boxShadow1{
    box-shadow: grey 2px 2px 0px 1px !important;
}