/**
 *  v1.19
 */
@font-face{font-family: 'Roboto'; src: url('/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');}

/**
 *  Color picker
 *  https://www.w3schools.com/colors/colors_picker.asp?colorhex=182b3e
 *
 *
 *  Contrast colors
 *  https://app.contrast-finder.org/
 *  http://colorsafe.co/
 */

/**
 *  Text
 */
a {
    text-decoration: none;
}

a:hover {
    font-weight: bold;
}

p, label, a, i, span {
    font-size: 15px;
    color: white;
}

a {
    color: inherit;
}

span {
    line-height: initial !important;
}

b, strong {
    font-weight: bolder;
}

p, h1, h2, h3, h4, h5 {
    line-height: 1.5em;
}

h1, h2, h3, h4 {
    color: white;
    margin-top: 20px;
    margin-bottom: 30px;
}

h3 {
    width: max-content;
    font-size: 18px;
    margin: 50px 0 40px 0;
    border-bottom: 1px solid #15bf7f;
}

h4 {
    font-size: 16px;
    margin-bottom: 15px;
}

h5 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Generally used for input forms */
h6 {
    line-height: 1.5em;
    font-size: 13px;
    font-weight: bold;
    color: rgb(255 255 255 / 85%);
    margin-top: 20px;
    margin-bottom: 1px;
}

.note {
    font-size: 13.5px;
    font-style: italic;
    color: #8A99AA;
    margin-bottom: 2px;
    word-break: break-all;
}

.required::after {
    content: ' *';
    font-size: 12px;
    color: #F32F63;
}

hr {
    border-color: #8a99aa57;
}

pre {
    font-family: monospace, monospace;
    font-size: 13px;
}

pre.codeblock {
    position: relative;
    background-color: #0c141b;
    color: white;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    text-wrap: auto;
    word-break: break-all;
    padding: 20px;
}

/**
 *  Generic class
 */
.inline { display: inline; }
.block { display: block; }
.inline-block {display: inline-block !important;}
.float-left { float: left; }
.float-right { float: right; }
.align-top { vertical-align: top; }
.margin-auto { margin: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.relative { position: relative; }
.pointer { cursor: pointer; }
.bold { font-weight: bold; }
.greentext{color:#15bf7f !important}
.redtext{color:#F32F63 !important}
.yellowtext{color:#FCCA46 !important}
.graytext { color : gray; }
.bkg-green { background-color: #15bf7f !important; color: white !important; }
.bkg-yellow { background-color: #ffb536 !important; color: white !important; }
.bkg-red { background-color: #F32F63 !important; color: white !important; }
.bkg-gray { background-color: #cdcdcd8f !important; color: white !important; }
.bck-blue { background-color: #182b3e !important}
.bck-blue-alt {background-color: #22384F !important}
.no-bkg {background: none !important}
.center { text-align: center; }
.baseline { vertical-align: baseline; }
.vertical-align-text-top{vertical-align: text-top !important}
.font-size-8{font-size:8px !important}.font-size-9{font-size:9px !important}.font-size-10{font-size:10px !important}.font-size-11{font-size: 11px !important}.font-size-12{font-size: 12px !important}.font-size-13{font-size: 13px !important}.font-size-14{font-size: 14px !important}.font-size-15{font-size: 15px !important}.font-size-16{font-size: 16px !important}.font-size-17{font-size: 17px !important}.font-size-18{font-size: 18px !important}.font-size-20{font-size: 20px !important}.font-size-22{font-size: 22px !important}
.mediumopacity,.mediumopacity-cst{
    color: #97a5b4;
    filter: brightness(0) saturate(100%) invert(72%) sepia(2%) saturate(2168%) hue-rotate(169deg) brightness(95%) contrast(95%);
}
.lowopacity,.lowopacity-cst{
    color: #8A99AA;
    filter: brightness(0) saturate(100%) invert(65%) sepia(17%) saturate(341%) hue-rotate(171deg) brightness(90%) contrast(88%);
}
.opacity-60,.opacity-60-cst{opacity: 0.60}
.opacity-80,.opacity-80-cst{opacity: 0.80}
.lowopacity:hover,.mediumopacity:hover{
    color: #ffffff;
    filter: initial;
}
.text-wrap{text-wrap:wrap}
.wordbreakall {word-break: break-all}
.flex {display:flex!important;}
.flex-div-15 { flex: 0 0 14%; }.flex-div-20 { flex: 0 0 19%; }.flex-div-25 { flex: 0 0 24%; }.flex-div-30 { flex: 0 0 29%; }
.flex-div-33 { flex: 0 0 32%; }.flex-div-40 { flex: 0 0 39%; }.flex-div-50 { flex: 0 0 47%; }.flex-div-60 { flex: 0 0 59%; }
.flex-div-65 { flex: 0 0 64%; }.flex-div-68 { flex: 0 0 67%; }.flex-div-80 { flex: 0 0 79%; }.flex-div-90 { flex: 0 0 90%; }.flex-div-100 { flex: 0 0 98%; }
.flex-grow { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-direction-column {flex-direction: column}
.grid {display: grid}
.grid-2 {grid-template-columns: 1fr 1fr !important}
.grid-2-1 {grid-template-columns: 2fr 1fr !important}
.grid-3-1 {grid-template-columns: 3fr 1fr !important}
.grid-3 {grid-template-columns: repeat(3, 1fr) !important}
.grid-4 {grid-template-columns: repeat(4, 1fr) !important}
.grid-5 {grid-template-columns: repeat(5, 1fr) !important}
.grid-fr-1-2 {grid-template-columns: 1fr 2fr !important}
.grid-fr-2-1 {grid-template-columns: 2fr 1fr !important}
.grid-fr-4-1 {grid-template-columns: 4fr 1fr !important}
.grid-fr-auto-1-2 {grid-template-columns: auto 1fr 2fr !important}
.grid-fr-auto-1-3 {grid-template-columns: auto 1fr 3fr !important}
.grid-fr-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important}
.grid-fr-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important}
.grid-40p-45p-10p{grid-template-columns: 40% 45% 10% !important}
/* For responsive */
.grid-rfr-1-2{grid-template-columns: 1fr !important}
.justify-center {justify-content: center}
.justify-space-between {justify-content: space-between}
.justify-space-around{justify-content: space-around}
.justify-end {justify-content: flex-end}
.justify-items-center{justify-items: center}
.justify-items-end{justify-items: flex-end}
.justify-self-center{justify-self:center}
.align-content-center {align-content: center}
.align-content-right {align-content: flex-end}
.align-item-start {align-items: start !important}
.align-flex-start {align-items: flex-start !important}
.align-item-center {align-items: center}
.align-item-right, .align-flex-end {align-items: flex-end}
.align-self-center{align-self: center}
.align-self-end{align-self: flex-end}
.column-gap-1{column-gap:1px!important}.column-gap-2{column-gap:2px!important}.column-gap-4{column-gap:4px!important}.column-gap-5{column-gap:5px!important}.column-gap-6{column-gap:6px!important}.column-gap-7{column-gap:7px!important}.column-gap-8{column-gap:8px!important}.column-gap-9{column-gap:9px!important}.column-gap-10{column-gap:10px!important}.column-gap-15{column-gap:15px!important}
.column-gap-20{column-gap:20px!important}.column-gap-30{column-gap:30px!important}.column-gap-40{column-gap:40px!important}.column-gap-45{column-gap:45px!important}.column-gap-50{column-gap:50px!important}.column-gap-60{column-gap:60px!important}.column-gap-70{column-gap:70px!important}.column-gap-80{column-gap:80px!important}.column-gap-90{column-gap:90px!important}.column-gap-100{column-gap:100px!important}
.row-gap-1 {row-gap: 1px}.row-gap-2 {row-gap: 2px}.row-gap-4 {row-gap: 4px}.row-gap-5 {row-gap: 5px}.row-gap-6 {row-gap: 6px}.row-gap-7 {row-gap: 7px}.row-gap-8 {row-gap: 8px}.row-gap-9{row-gap: 9px}.row-gap-10{row-gap: 10px}.row-gap-15{row-gap: 15px}.row-gap-20{row-gap: 20px}
.padding-10{padding:10px !important}.padding-15{padding:15px !important}.padding-20{padding:20px !important}.padding-30{padding:30px !important}.padding-40{padding:40px !important}
.padding-top-10{padding-top:10px !important}.padding-top-15{padding-top:15px !important}.padding-top-20{padding-top:20px !important}.padding-top-30{padding-top:30px !important}.padding-top-40{padding-top:40px !important}
.padding-bottom-10{padding-bottom:10px !important}.padding-bottom-15{padding-bottom:15px !important}.padding-bottom-20{padding-bottom:20px !important}.padding-bottom-30{padding-bottom:30px !important}.padding-bottom-40{padding-bottom:40px !important}
.padding-left-10{padding-left:10px !important}.padding-left-15{padding-left:15px !important}.padding-left-20{padding-left:20px !important}.padding-left-30{padding-left:30px !important}.padding-left-40{padding-left:40px !important}
.padding-right-10{padding-right:10px !important}.padding-right-15{padding-right:15px !important}.padding-right-20{padding-right:20px !important}.padding-right-30{padding-right:30px !important}.padding-right-40{padding-right:40px !important}
.margin-0{margin:0 !important}.margin-10{margin:10px !important}.margin-15{margin:15px !important}
.margin-left-0 {margin-left: 0px !important}.margin-left-5 {margin-left: 5px !important}.margin-left-8{margin-left:8px!important}.margin-left-10 {margin-left: 10px !important}.margin-left-15 {margin-left: 15px !important}.margin-left-20 {margin-left: 20px !important}.margin-left-30 {margin-left: 30px !important}.margin-left-40 {margin-left: 40px !important}
.margin-right-0 {margin-right: 0px !important}.margin-right-5 {margin-right: 5px !important}.margin-right-8{margin-right:8px!important}.margin-right-10 {margin-right: 10px !important}.margin-right-15 {margin-right: 15px !important}.margin-right-20 {margin-right: 20px !important}.margin-right-30 {margin-right: 30px !important}.margin-right-40 {margin-right: 40px !important}
.margin-top-0 {margin-top: 0px !important}.margin-top-5 {margin-top: 5px !important}.margin-top-8{margin-top:8px!important}.margin-top-10 {margin-top: 10px !important}.margin-top-15 {margin-top: 15px !important}.margin-top-20 {margin-top: 20px !important}.margin-top-30 {margin-top: 30px !important}.margin-top-40 {margin-top: 40px !important}.margin-top-50{margin-top:50px !important}
.margin-bottom-0 {margin-bottom: 0px !important}.margin-bottom-5 {margin-bottom: 5px !important}.margin-bottom-8{margin-bottom:8px!important}.margin-bottom-10 {margin-bottom: 10px !important}.margin-bottom-15 {margin-bottom: 15px !important}.margin-bottom-20 {margin-bottom: 20px !important}.margin-bottom-30 {margin-bottom: 30px !important}.margin-bottom-40 {margin-bottom: 40px !important}
.min-height-100 {min-height: 100px}.min-height-200 {min-height: 200px}.min-height-300 {min-height: 300px}.min-height-400 {min-height: 400px}.min-height-500 {min-height: 500px}.min-height-600 {min-height: 600px}.min-height-700 {min-height: 700px}.min-height-800 {min-height: 800px}.min-height-900 {min-height: 900px}.min-height-1000 {min-height: 1000px}
.min-width-100 {min-width: 100px}.min-width-200 {min-width: 200px}.min-width-300 {min-width: 300px}.min-width-400 {min-width: 400px}.min-width-500 {min-width: 500px}.min-width-600 {min-width: 600px}.min-width-700 {min-width: 700px}.min-width-800 {min-width: 800px}.min-width-900 {min-width: 900px}.min-width-1000 {min-width: 1000px}
.width-100{width:100%}
.height-100{height:100%}
.max-width-fit{max-width:fit-content}
.resize-disabled{resize:none;}

code {
    font-family: monospace, monospace;
    font-size: 12px;
    color: white;
    background-color: #8A99AA;
    padding: .2em .4em;
    border-radius: 50px;
}

/**
 *   Tables
 */
table {
    width: 100%;
    font-size: 14px;
    table-layout: auto !important;
}

td {
    height: 36px;
    vertical-align: middle;
    color: white;
}

.td-50, .td-100 {
    width: 0px;
    margin: 0px;
    white-space: nowrap;
}
.td-50 { padding-right: 50px !important; }
.td-100 { padding-right: 100px !important; }

/**
 *  Generic tables
 */

/* Concerne toutes les classes commencant par table-generic- */
[class^="table-generic"] {
    border-collapse: separate !important;
    border-spacing: 0 4px;
    table-layout: auto !important;
    word-break: break-word;
}
[class^="table-generic"] tr td {
    padding-left: 8px;
    padding-right: 8px;
}
[class^="table-generic"] tr td:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
[class^="table-generic"] tr td:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
[class^="table-generic"] thead tr {
    background: none !important;
    font-weight: bold;
}
.table-generic-blue tr { background-color: #22384F; }
.table-generic-red tr  { background-color: #F32F63; }

/**
 *  Generic table with pagination
 */
[class^="table-container"] {
    display: grid;
    grid-template-columns: 5% fit-content(200px) auto 10%;
    align-items: center;
    column-gap: 15px;
    padding: 15px;
    margin-bottom: 8px;
    border-radius: 20px;
    background-color: #182b3e;
    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
}

[class^="table-container"]:hover {
    background-color: #1e3a54 !important;
}

.table-container-3 {
    grid-template-columns: 5% auto 10%;
}

[class*=' pagination-btn'],[class^='pagination-btn'] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 30px;
    border: none;
    border-radius: 60px;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    background-color: #15bf7f;
    border-radius: 0;
}

[class*=' pagination-btn']:hover,[class^='pagination-btn']:hover {
    background-color: #12a16a;
}

.pagination-btn-current {
    background-color: #12a16a;
    border: 1px solid #10885a;
}

.pagination-btn-first {
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
}

.pagination-btn-last {
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
}

.pagination-btn-previous, .pagination-btn-next {
    width: 40px;
}

.round-item {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 60px;
}

/**
 *  Slider div
 */
.slide-panel-container {
    width: 100vw;
    height: 100%;
    background-color: #0000001f;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    visibility: hidden;
}

.slide-panel {
    box-sizing: border-box;
    position: absolute;
    right: -1000px;
    height: 100%;
    width: 100%;
    padding: 20px;
    background-color: #182b3e;
    border-left: 1px solid rgb(60 70 75 / 34%);
    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
    overflow: auto;
}

.slide-panel h5 {
    margin-top: 40px;
    margin-bottom: 20px;
}

.slide-panel-close-btn, .confirm-box-cancel-btn, .close-btn {
    width: 26px !important;
    height: 26px !important;
    max-height: initial !important;
    cursor: pointer;
}

/**
 *  Loading div
 */
#loading {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: none;
    align-items: center;
    column-gap: 8px ;
    z-index: 1002;
}

#loading img {
    height: 18px;
}

/**
 *  Loading veil
 */
.loading-veil {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #182b3e82;
    border-radius: 20px;
    z-index: 998;
}

/* Desktop configuration */
@media (min-width:1025px) {
    .grid-rfr-1-2{grid-template-columns: 1fr 1fr !important}

    .slide-panel {
        width: 30%;
    }

    #loading {
        display: flex;
    }
}