/**
 *  v1.15
 */
@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/
 */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0px;
    padding: 0px;
    background-color: #0e1e2f;
    color: white;
    overflow-y: auto;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px;
}

/**
 *  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: rgb(26 29 31) !important;
    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:#14be7e !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: #1d3349 !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}
.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-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-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;
}

th {
    text-align: left;
    font-weight: 600;
    vertical-align: middle;
}
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: #1d3349; }
.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: 9px 15px 9px 15px;
    margin-bottom: 6px;
    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%;
}

/**
 *  Icons
 */
.icon, .icon-small, .icon-medium, .icon-large, .icon-lowopacity, .icon-mediumopacity, .icon-nf, .icon-np {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    cursor: pointer;
}
.icon-small {
    width: 12px !important;
    height: 12px !important;
}
.icon-medium {
    width: 15px !important;
    height: 15px !important;
}
.icon-large {
    width: 25px !important;
    height: 25px !important;
}
.icon-lowopacity {
    opacity: 0.60;
}
.icon-mediumopacity {
    opacity: 0.55;
}
.icon-lowopacity:hover, .icon-mediumopacity:hover {
    opacity: 1;
}
/* icon with no pointer */
.icon-np {
    cursor: default;
}
.icon-copy {
    height: 13px;
}
.icon-copy-top-right {
    position: absolute;
    height: 18px;
    top: 8px;
    right: 8px;
}

/**
 *  Forms, button, input, textarea
 */
input {
    accent-color: #249b6e;
}

input[type=text], input[type=date], input[type=time], input[type=number], input[type=email], input[type=password], input[type=color], input[type=file], select {
    width: 100%;
    height: 35px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-left: 10px;
    border: none;
    border-radius: 20px;
    box-sizing: border-box;
    font-size: 14px;
    color: white;
    background-color:#22384F;
}
input[type=file] {
    background: none !important;
    height: fit-content;
}
input::file-selector-button {
    color: rgba(0, 0, 0, 0.667) !important;
}
input[type].input-small, .select-small { width: 100px; }
input[type].input-medium, .select-medium { width: 150px; }
input[type].input-large, .select-large { width: 250px; }
input:checked { opacity: 1; }
input::placeholder, select::placeholder, textarea::placeholder {
    color: #ffffff9e;
}
.select-xxlarge {
    width: 400px;
}

/* All color input */
input[type="color"] {
    padding: 0;
    width: 150%;
    height: 150%;
    margin: -25%;
    cursor: pointer;
}

.input-color-wrapper {
    overflow: hidden;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 3px 0px #000000;
}


/* All checkboxes unless onoff-switch-input */
input[type=checkbox]:not(.onoff-switch-input) {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    outline: none;
    cursor: pointer;
}

input[type=checkbox]:not(.onoff-switch-input):checked {
    background-color: #15bf7f;
    position: relative;
    filter: inherit !important;
    &:before {
        content: "";
        background: url('/assets/icons/check.svg');
        background-size: 20px 20px;
        width: 20px !important;
        height: 20px !important;
        display: block;
        color: white;
        font-size: 14px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* All buttons */
[class^="btn-"], [class*=" btn-"], input::file-selector-button {
    padding: 10px 5px 10px 5px;
    border: none;
    border-radius: 60px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: rgba(12, 18, 20, 0.504) 0px 0px 5px 1px;
}

/* All transparent buttons */
.btn-large-tr, .btn-medium-tr, .btn-small-tr, .btn-xsmall-tr, .btn-xxsmall-tr, .btn-fit-tr, .round-btn-tr,
.btn-large-tr-to-red, .btn-medium-tr-to-red, .btn-small-tr-to-red, .btn-xsmall-tr-to-red, .btn-xxsmall-tr-to-red, .btn-fit-tr-to-red, .round-btn-tr-to-red,
.btn-auto-tr {
    background-color: initial;
    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
    /* border: 1px solid #24405c; */
    border: 1px solid #ffffff30;
}

/* All blue buttons */
.btn-large-blue, .btn-medium-blue, .btn-small-blue, .btn-xsmall-blue, .btn-xxsmall-blue, .btn-fit-blue, .round-btn-blue, .btn-auto-blue {
    background-color: #1d3349;
}
/* All blue alt buttons */
.btn-large-blue-alt, .btn-medium-blue-alt, .btn-small-blue-alt, .btn-xsmall-blue-alt, .btn-xxsmall-blue-alt, .btn-fit-blue-alt, .round-btn-blue-alt, .btn-auto-blue-alt {
    background-color: #24405b;
}
/* All green buttons */
.btn-large-green, .btn-medium-green, .btn-small-green, .btn-xsmall-green, .btn-xxsmall-green, .btn-fit-green, .round-btn-green, .btn-auto-green {
    background-color: #15bf7f;
}
/* All red buttons */
.btn-large-red, .btn-medium-red, .btn-small-red, .btn-xsmall-red, .btn-xxsmall-red, .btn-fit-red, .round-btn-red, .btn-auto-red {
    background-color: #F32F63;
}
/* All yellow buttons */
.btn-large-yellow, .btn-medium-yellow, .btn-small-yellow, .btn-xsmall-yellow, .btn-xxsmall-yellow, .btn-fit-yellow, .round-btn-yellow, .btn-auto-yellow {
    background-color: #ffb536;
}
/* All auto buttons */
.btn-auto-blue, .btn-auto-blue-alt, .btn-auto-green, .btn-auto-red, .btn-auto-yellow {
    width: auto;
}

/* All large buttons */
.btn-large, .btn-large-blue, .btn-large-green, .btn-large-red, .btn-large-tr {
    width: 100%;
}
/* All medium buttons */
.btn-medium, .btn-medium-blue, .btn-medium-green, .btn-medium-red, .btn-medium-tr {
    width: 150px;
}
/* All small buttons */
.btn-small, .btn-small-blue, .btn-small-green, .btn-small-red, .btn-small-tr {
    width: 100px;
}
/* All very small buttons */
.btn-xsmall, .btn-xsmall-blue, .btn-xsmall-green, .btn-xsmall-red, .btn-xsmall-tr {
    width: 50px;
}
/* All very very small buttons */
.btn-xxsmall, .btn-xxsmall-blue, .btn-xxsmall-green, .btn-xxsmall-red, .btn-xxsmall-tr {
    margin: 2px;
    width: 34px;
    height: 34px;
}

/* All transparent buttons (hover) */
.btn-large-tr:hover, .btn-medium-tr:hover, .btn-small-tr:hover, .btn-xsmall-tr:hover, .btn-xxsmall-tr:hover, .btn-fit-tr:hover, .round-btn-tr:hover, .btn-auto-tr:hover {
    transition-duration: 0.2s;
    background-color: #1d3349;
    opacity: 1;
}

/* All transparent to red buttons (hover) */
.btn-large-tr-to-red:hover, .btn-medium-tr-to-red:hover, .btn-small-tr-to-red:hover, .btn-xsmall-tr-to-red:hover, .btn-xxsmall-tr-to-red:hover, .btn-fit-tr-to-red:hover, .round-btn-tr-to-red:hover, .btn-auto-tr-to-red:hover {
    transition-duration: 0.2s;
    background-color: #F32F63;
    border: 1px solid #F32F63;
    opacity: 1;
}

/* All blue buttons (hover) */
.btn-large-blue:hover, .btn-medium-blue:hover, .btn-small-blue:hover, .btn-xsmall-blue:hover, .btn-xxsmall-blue:hover, .btn-fit-blue:hover, .round-btn-blue:hover, .btn-auto-blue:hover {
    transition-duration: 0.2s;
    background-color: #1e3a54;
}
/* All green buttons (hover) */
.btn-large-green:hover, .btn-medium-green:hover, .btn-small-green:hover, .btn-xsmall-green:hover, .btn-xxsmall-green:hover, .btn-fit-green:hover, .round-btn-green:hover, .btn-auto-green:hover {
    transition-duration: 0.2s;
    background-color: #12a16a;
}
/* All red buttons (hover) */
.btn-large-red:hover, .btn-medium-red:hover, .btn-small-red:hover, .btn-xsmall-red:hover, .btn-xxsmall-red:hover, .btn-fit-red:hover, .round-btn-red:hover, .btn-auto-red:hover {
    transition-duration: 0.2s;
    background-color: #f10e4b;
}

/**
 *  Round btns
 */
[class^="round-btn"] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    width: 28px;
    height: 28px;
    padding: 2px;
    -webkit-transition: max-width 0.7s;
    transition: max-width 0.7s;
    margin: 0 3px 0 3px;
    color: white;
    border-radius: 60px;
    cursor: pointer;
}

[class^="round-btn"] img {
    width: 18px;
}

/**
 *  Slide btns
 */
[class^="slide-btn"] {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    text-decoration: none;
    width: auto;
    max-width: 28px;
    height: 28px;
    -webkit-transition: max-width 0.7s;
    transition: max-width 0.7s;
    margin: 0 3px 0 3px;
    color: white;
    background-color: #15bf7f;
    border-radius: 60px;
    cursor: pointer;
    box-shadow: rgba(12, 18, 20, 0.504) 0px 0px 10px 1px;
}
[class^="slide-btn"] img {
    width: 20px;
    padding-left: 4px;
    display: flex;
    align-items: center;
}
[class^="slide-btn"] span {
    white-space: nowrap;
    padding-right: 12px;
    padding-left: 8px;
}
.slide-btn-red {
    background-color: #F32F63;
}
.slide-btn-red:hover {
    background-color: #f10e4b;
}
.slide-btn-yellow {
    background-color: #ffb536;
}
.slide-btn-yellow:hover {
    background-color: #eb984e;
}
.slide-btn-tr, .slide-btn-medium-tr {
    background-color: initial;
    box-shadow: rgb(32 25 25 / 50%) 0px 0px 15px 1px;
    border: 1px solid #ffffff52;
}

/* override slide-btn */
[class^="slide-btn-medium"] {
    max-width: 34px;
    height: 34px;
}
[class^="slide-btn-medium"] img {
    width: 18px;
    padding-left: 8px;
}

[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;
}

textarea {
    width: 100%;
    text-indent: 0px;
    padding-top: 5px;
    padding-left: 5px;
    font-size: 14px;
    color: white;
    background-color:#22384F;
    border-radius: 16px;
    border: none;
}

.textarea-100 {
    min-height: 100px;
}

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

[class^="label"] {
    font-size: 13px;
    vertical-align: middle;
    display: inline-block;
    padding: 6px;
    min-width: 12px;
    min-height: 12px;
    line-height: 12px !important;
    text-align: center;
    border-radius: 60px;
    color: white;
    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
}

.label-icon-tr {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    justify-items: center;
    justify-content: space-between;
    column-gap: 10px;
    font-size: 12px;
    padding: 4px 10px;
    min-width: 50px;
    min-height: 12px;
    border-radius: 60px;
    border: 1px solid #24405c;
    color: white;
    text-align: left;
    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
}

.label-black {
    background-color: rgb(46, 54, 58);
    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
}
.label-white {
    background-color: white;
    color: #000000d9;
}
.label-green {
    background-color: #15bf7f;
}
.label-blue {
    background-color: #5473e8;
}
.label-red {
    background-color: #F32F63;
}
.label-yellow {
    background-color: #ffb536;
}
.label-tr {
    background-color: initial;
    border: 1px solid #24405c;
}

/**
 *  On/off slider switch
 */

/* The onoff-switch-label - the box around the slider */
.onoff-switch-label {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}
/* Hide default HTML checkbox */
.onoff-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}
/* The slider */
.onoff-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}
.onoff-switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
.onoff-switch-input:checked + .onoff-switch-slider {
    background-color: #5473e8;
}
.onoff-switch-input:focus + .onoff-switch-slider {
    box-shadow: 0 0 1px #5473e8;
}
.onoff-switch-input:checked + .onoff-switch-slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

/* boutons switch-field */
.switch-field,
.single-switch-field {
    display: flex;
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 2px;
}

.switch-field input,
.single-switch-field input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    margin-left: 0;
    margin-right: 0;
    border: 0;
    overflow: hidden;
}

.switch-field label,
.single-switch-field label {
    background-color: white;
    color: #3b3b3b;
    line-height: 1;
    text-align: center;
    padding: 6px 8px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.switch-field label:hover,
.single-switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label,
.single-switch-field input:checked + label {
    background-color: #5473e8;
    box-shadow: none;
    color: white;
}

.switch-field label:first-of-type {
    border-radius: 16px 0 0 16px;
}

.switch-field label:last-of-type {
    border-radius: 0 16px 16px 0;
}

.single-switch-field label {
    border-radius: 16px;
}

/**
 *  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;
}

/**
 *  Alert div
 */
.alert, .alert-success, .alert-error, .confirm-box {
    width: 95%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 10px;
    align-items: flex-start;
    visibility: hidden;
    min-height: 20px;
    padding: 20px 0px 20px 0px;
    font-size: 16px;
    position: fixed;
    bottom: 0;
    right: -1000px;
    bottom: 50px;
    z-index: 1000;
    background-color: #1d3349;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    color: white;
    border-radius: 20px 0 0 20px;
    border-left: 5px solid #15bf7f;
}
.alert-success {
    background-color: #47ebac;
    border-left: 5px solid #0f8a5b;
}
.alert-error {
    background-color: #F32F63;
    border-left: 5px solid #780725;
}
.alert-success p {
    color: #0f8a5b;
}
.alert-error p {
    color: #780725;
}
.alert-close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    filter: brightness(0) saturate(100%) invert(9%) sepia(54%) saturate(6819%) hue-rotate(335deg) brightness(98%) contrast(100%);
}
.alert-error pre.codeblock {
    max-height: 100px;
    overflow: auto;
}
.confirm-box {
    border-top: 1px solid #d1d1d11f;
    border-bottom: 1px solid #d1d1d11f;
}

#login-container {
    display: grid;
    grid-template-rows: 60% 40%;
    justify-content: center;
    justify-items: center;
    width: 90vw;
    height: 90vh;
    margin: auto;
}
#login {
    align-self: end;
    width: 250px;
    text-align: center;
}
#login img {
    max-width: 80px;
}
#login form input {
    display: block;
}
#login-error {
    width: 90vw;
    max-width: 90vw;
    text-align: center;
    overflow: auto;
}

/**
 *  Loading div
 */
#loading {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: flex;
    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;
}

.modal-window-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    margin: auto;
    background-color: #182b3e82;
}

.modal-window {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    max-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background-color: #182b3e;
}

.modal-window-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.modal-window-content {
    padding: 0px 20px;
    text-wrap: wrap;
    word-break: break-word;
    overflow-y: auto;
}

.modal-window-content pre {
    min-height: 200px;
    padding: 20px;
    margin-top: 20px;
    background-color: #0c141b;
    border-radius: 20px;
    line-height: 1.5;
    text-wrap: wrap;
    word-break: break-word;
    overflow-y: auto;
}

/**
 *  Generic div
 */
.div-generic-blue {
    position: relative;
    padding: 15px;
    margin-bottom: 30px;
    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;
}

.div-generic-blue h3 {
    border: none;
    margin-top: 0;
}

.details-div {
    padding: 10px;
    background-color: #182b3e;
    border-left: 1px solid #24405c;
    border-right: 1px solid #24405c;
    border-bottom: 1px solid #24405c;
    border-top: none;
    border-radius: 20px;
}

/* Desktop configuration */
@media (min-width:1025px) {
    /* All buttons */
    [class^="btn-"], [class*=" btn-"], input::file-selector-button {
        padding: 9px 5px 9px 5px;
    }

    /**
     *  Slide btns
     */
    [class^="slide-btn"]:hover {
        max-width: 300px;
    }

    .slide-panel {
        width: 30%;
    }

    .alert, .alert-success, .alert-error {
        width: 29%;
    }

    .confirm-box {
        width: 29%;
    }
}