:root{
    --text-btn-primary-color: #FFFFFF;
    --text-weight-regular: 400;
    --text-weight-medium: 500;
    --text-weight-semi: 600;
    --text-weight-bold: 700;
    --bck-btn-primary: #2893E9;
}

.day {
    --text-color: #292F34;
    --text-color-always: #292F34;
    --text-disabled-color: rgba(41, 47, 52, 0.5);
    --text-link-color: #2893E9;
    --text-danger: #DF423B;
    --bck-head-footer: #FFFFFF;
    --bck-el: #FFFFFF;
    --bck-gen-push: #FFFFFF;
    --bck-push-label: #DBDBDB;
    --bck-content: #F2F4F6;
    --bck-label-info: #E4F1FF;
    --bck-label-white: #FFFFFF;
    --bck-label-history: #FFFFFF;
    --bck-install: #DDE1E6;
    --border-label: #DBDBDB;
    --border-active: #2893E9;
    --fill-circle: #292F34;
    --bck-svg-info: #2893E9;
    --bck-svg-action: #E4F1FF;
    --bck-vm-hover: hsl(0deg, 0%, 98%);
    --bck-menu-active: #E4F1FF;
    --pos-slider-mode: 20px;
    --border-color: #DDDDDD;
    --border-nav-color: #DDDDDD;
    --border-span-alert: 2px solid #FFFFFF;
    --bck-input: #F2F4F6;
    --bck-dropdown-bloc: #f3f9fd;/*rgba(40, 147, 233, 0.05)*/
    --border-dropdown-bloc: rgba(40, 147, 233, 0.2);
    --bck-tooltip: #1B2E4B;
    --text-tooltip-color: #FFFFFF;
    --bck-tooltip-black: #333;
    --text-graph-label: fill: rgba(0,0,0,.4);
    --grid-graph-color: rgba(0,0,0,.2);
    --bck-odd-even-table: #F8F8F8;
    --bck-success-flash: #f1f8f4;
    --border-success-flash: #cfe8d3;
    --bck-error-flash: #fbefeb;
    --border-error-flash: #efd0c7;
    --box-success-flash: rgba(88, 217, 109, 0.1);
    --box-error-flash: rgba(255, 0, 0, 1);
    --bck-field-select: #FFFFFF;
    --bck-field-hover: rgba(41, 47, 52, 0.1);
    --text-field-select: #292F34;
    --bck-top-table: #EAEDEF;
    --bck-content-table: #FFFFFF;
    --border-table-color: #DBDBDB;
    --bck-scrollbar-thumb: #969696;
    --bck-scrollbar-track: #EAEDEF;
    --bck-btn-filter: #DBDBDB;
    --opacity-icon: brightness(1);
    --history-svg: #D5D9DB;
    --history-text-color: #B5B8BC;
    --bck-disabled: #eee;
}

.night {
    --text-color: #FFFFFF;
    --text-color-always: #292F34;
    --text-disabled-color: rgba(255,255,255,0.5);;
    --text-link-color: #FFFFFF;
    --text-danger: #DF423B;
    --bck-head-footer: #22262A;
    --bck-el: #292F34;
    --bck-gen-push: #EEEEEE;
    --bck-push-label: #22262A;
    --bck-content: #000000;
    --bck-label-info: #000000;
    --bck-label-white: #FFFFFF;
    --bck-label-history: #111316;
    --bck-install: #3B4B47;
    --border-label: #5F5F5F;
    --border-active: #2893E9;
    --fill-circle: #FFFFFF;
    --bck-svg-info: #FFFFFF;
    --bck-svg-action: hsl(237deg, 10%, 28%);
    --bck-vm-hover: hsl(200deg, 10%, 20%);
    --bck-menu-active: #111316;
    --pos-slider-mode: 65px;
    --border-color: #111316;
    --border-nav-color: #555555;
    --border-span-alert: 2px solid #22262A;
    --bck-input: #000000;
    --bck-dropdown-bloc: #22262A;
    --border-dropdown-bloc: rgba(34, 38, 42, 0.2);
    --bck-tooltip: #FFFFFF;
    --text-tooltip-color: #1B2E4B;
    --bck-tooltip-black: #555;
    --text-graph-label: fill: rgba(255,255,255,.4);
    --grid-graph-color: rgba(255,255,255,.2);
    --bck-odd-even-table: #424242;
    /*--bck-success-flash: #1B1E21;
    --border-success-flash: #3f4147;*/
    --bck-success-flash: #427d5c;
    --border-success-flash: #cfe8d3;
    --bck-error-flash: #e84646;
    --border-error-flash: #efd0c7;
    --box-success-flash: rgba(88, 217, 109, 0.5);
    --box-error-flash: rgba(255, 0, 0, 1);
    --bck-field-select: #000000;
    --bck-field-hover: rgba(0, 0, 0, 0.3);
    --text-field-select: #FFFFFF;
    --bck-top-table: #303030;
    --bck-content-table: #262626;
    --border-table-color: #3D3D3D;
    --bck-scrollbar-thumb: #DBDBDB;
    --bck-scrollbar-track: #A8A8A8;
    --bck-btn-filter: #111316;
    --opacity-icon: brightness(1.5);
    --history-svg: #464D53;
    --history-text-color: #696D71;
    --bck-disabled: rgba(41, 47, 52, 0.1);
}

* { transition: color 0.1s ease-out, background-color 0.5s ease-out, border 0.5s ease-out; }

html {
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: var(--text-weight-regular);
}

body { background: var(--bck-el); position: relative; }
a { color: var(--text-link-color); }
a img.icon-btn { width: 15px; height: auto; margin-right: 8px; position: relative; top: -1px; }
.pb0 { padding-bottom: 0 !important; }
div.container { max-width: 1170px; }
.hide { display: none; }
.floatr { float: right; }
.disabled-link { pointer-events: none; cursor: not-allowed; }
span.label {
    font-size: 12px;
    line-height: 20px;
    padding: 5px 10px;
    background: #dbdbdb;
    color: var(--text-color);
}
span.label.label_warning {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    font-weight: 500;
}
span.label.label_danger {
    background: #f8d7da;
    color: #58151c;
    border: 1px solid #f1aeb5;
    font-weight: 500;
}
span.label.label_linux {
    background: #222;
    color: #FFF;
}
span.label.label_windows {
    background: #3AAAF5;
    color: #FFF;
}
span.label.label_app {
    background: #D51721;
    color: #FFF;
}
span.label.label_history {
    background: var(--bck-label-history);
    border: 2px solid var(--border-label);
    color: var(--text-color);
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
}
span.label.label_history.active {
    border: 2px solid var(--border-active);
}
span.label.label_filter {
    background: var(--bck-btn-filter);
    border-radius: 10px;
    cursor: pointer;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
span.label.label_filter.clear {
    right: 45px;
}
span.label.label_filter:hover {
    opacity : 0.8;
}
span.label.label_filter svg {
    width: 15px;
    height: 15px;
}
span.label.label_filter svg path,
span.label.label_filter svg rect {
    fill: var(--text-color);
}

[class^="btn-"] {
    /*padding: 0.688rem 1.25rem 0.563rem;*/
    padding: 0.531rem 1.25rem 0.406rem;
    text-decoration: none;
    border-radius: 21px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    transition: opacity 0.5s;
    position: relative;
}

[class^="btn-"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    opacity: 0.8;
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background-color: #2893E9;
}

.btn-dark {
    color: #fff;
    background-color: #292F34;
}

.btn-success {
    color: #fff;
    background-color: #008A56;
}

.btn-danger {
    color: #fff;
    background-color: #DB3D3D;
}

.btn-secondary,
[class^="btn-"]:disabled {
    color: #fff;
    background-color: #a8a8a8;
    opacity: 0.8;
}

.btn-secondary:hover,
[class^="btn-"]:disabled:hover {
    cursor: not-allowed;
}

.btn-secondary:hover:after,
[class^="btn-"]:disabled:hover:after {
    content: attr(data-error);
    position: absolute;
    left: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    color: #f00;
    font-size: 12px;
    background: #fff;
    text-transform: none;
    border: 1px solid #f00;
    border-radius: 10px;
    padding: 5px 10px;
}

.d-flex-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 20px;
}

.d-flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.d-iflex-row {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center; 
}

div.content-wrapper {
    padding: 2.5rem;
    background-color: var(--bck-content);
    color: var(--text-color);
    margin-left: 335px;
    min-height: calc(100vh - 200px);
}

.title-content {
    font-size: 1.875rem;
    line-height: 2.5rem;
    font-weight: var(--text-weight-bold);
    margin-bottom: 1.875rem;
    justify-content: space-between;
}

.title-content a {
    font-size: 0.938rem;
    line-height: 1.625rem;
    font-weight: var(--text-weight-semi);
    text-transform: uppercase;
}

.header_flex_vm {
    display: grid;
    padding: 1.25rem 1.875rem;
    grid-gap: 1.25rem;
    background: transparent;
    /*grid-template-columns: [status] 20px [name] 1.5fr [ip] 1fr [location] 1fr [created] 1fr [actions] 28px;*/
    grid-template-columns: [status] 20px [name] 1.8fr [ip] 1.5fr [location] 1fr [created] 0.8fr [actions] 40px;
    max-width: 1170px;
    /*margin-left: 1.875rem;*/
    font-size: 0.938rem;
    font-weight: var(--text-weight-bold);
    line-height: 1.5rem;
}

.body_flex_vm {
    display: grid;
    padding: 1.563rem 1.875rem;
    grid-gap: 1.25rem;
    box-shadow: 0px 0px 15px #0013460D;
    /*min-height: 100px;*/
    background-color: var(--bck-el);
    border-radius: 10px;
    /*grid-template-columns: [status] 20px [name] 1.5fr [ip] 1fr [location] 1fr [created] 1fr [actions] 28px;*/
    grid-template-columns: [status] 20px [name] 1.8fr [ip] 1.5fr [location] 1fr [created] 0.8fr [actions] 40px;
    align-items: center;
    max-width: 1170px;
    /*margin-left: 1.875rem;*/
    margin-bottom: 1.875rem;
    font-size: 0.938rem;
    line-height: 1.563rem;
}

.body_flex_vm.disabled {
    cursor: not-allowed !important;
    border: 1px solid #f00;
    opacity: 0.6;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.body_flex_vm.disabled::after {
    content: "DÉSACTIVÉ";          /* texte du macaron */
    position: absolute;
    top: 30px;                     /* ajuste la position verticale */
    right: -60px;                  /* décale vers la droite pour traverser l’angle */
    width: 200px;                  /* longueur du ruban */
    padding: 4px 0;
    text-align: center;
    font: 700 12px/1 "Arial", sans-serif;
    text-transform: uppercase;
    color: #fff;
    background: #d9534f;           /* rouge Bootstrap-ish ; change à volonté */
    transform: rotate(45deg);      /* l’inclinaison */
    box-shadow: 0 0 4px rgba(0,0,0,.3);
    pointer-events: none;          /* on ne veut pas intercepter les clics */
}

:lang(fr) .body_flex_vm.disabled::after { content: "DÉSACTIVÉ"; }
:lang(en) .body_flex_vm.disabled::after { content: "DISABLED"; }
:lang(de) .body_flex_vm.disabled::after { content: "DEAKTIVIERT"; }
:lang(es) .body_flex_vm.disabled::after { content: "DESACTIVADO"; }
:lang(it) .body_flex_vm.disabled::after { content: "DISATTIVATO"; }
:lang(pt) .body_flex_vm.disabled::after { content: "DESATIVADO"; }


.body_flex_vm.current_install {
    grid-template-columns: [status] 20px [name] 1.4fr [progress] 3fr;
    background: var(--bck-install);
    cursor: not-allowed !important;
    pointer-events: none;
}

.body_flex_vm.current_install .flex_vm_elem:first-of-type {
    height: 20px;
}

.body_flex_vm:hover {
    transition: box-shadow .15s;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .1);
    background: var(--bck-vm-hover);
    cursor: pointer;
}

.body_flex_vm:last-child {
    margin-bottom: 0;
}

.body_flex_vm .flex_vm_elem {
    position: relative;
}

.body_flex_vm .flex_vm_elem p:not(:last-of-type) {
    margin-bottom: 0.125rem;
}

.body_flex_vm .flex_vm_elem span.name_vm {
    font-size: 1.125rem;
    line-height: 1.563rem;
    font-weight: var(--text-weight-bold);
}

.body_flex_vm .flex_vm_elem img.distrib {
    width: 20px;
    height: auto;
    margin-left: 0.625rem;
}

span.label {
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: var(--text-weight-regular);
    padding: 0.125rem 0.75rem;
    border-radius: 12px;
    margin-left: 0.5rem;
    text-transform: capitalize;
}

span.label.label-info {
    background-color: var(--bck-label-info);
}

span.label.label-white {
    background-color: var(--bck-label-white);
    color: #292F34;
}

span.label.label-white img {
    width: 17px;
    height: auto;
    margin-right: 8px;
}

.body_flex_vm .flex_vm_elem.ip_adress p {
    font-size: 0.875rem;
    line-height: 1.5rem;
}

.body_flex_vm .flex_vm_elem.ip_adress span.title {
    font-size: 0.938rem;
    font-weight: var(--text-weight-medium);
}

.body_flex_vm .flex_vm_elem.ip_adress a {
    font-size: 0.938rem;
}

.body_flex_vm .flex_vm_elem img.icon_flag {
    width: 25px;
    height: auto;
    margin-right: 0.75rem;
}


/* BTN Action */
.body_flex_vm .flex_vm_elem a.action,
.body_flex_vm .flex_vm_elem a.action svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 40px;
    height: 40px;
}

.body_flex_vm .flex_vm_elem a.action:after {
    transition: opacity .15s;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    z-index: 0;
    transform: translate3d(-50%,-50%,0);
    border-radius: 50%;
    opacity: 0;
    background-color: var(--bck-svg-action);
}

.body_flex_vm .flex_vm_elem a.action:hover:after,
.body_flex_vm .flex_vm_elem a.action.active:after {
    opacity: 1;
}

.body_flex_vm .flex_vm_elem a.action svg circle {
    fill: var(--fill-circle);
    opacity: 0.5;
}

.body_flex_vm .flex_vm_elem a.action:hover svg circle,
.body_flex_vm .flex_vm_elem a.action.active svg circle {
    fill: var(--text-link-color);
    opacity: 0.5;
}


/*** ASIDE ***/
aside.kvm_aside {
    display: block;
    bottom: 0;
    float: none;
    left: 0;
    position: fixed;
    top: 0;
    height: calc(100vh - 60px);
    /*overflow-y: hidden;*/
    z-index: 1038;
    width: 275px;
    border-right: 1px solid var(--border-color);
    padding: 1.875rem;
    background: var(--bck-el);
}

aside.kvm_aside div.brand_logo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 1.375rem;
    line-height: 2rem;
    color: var(--text-color);
    font-weight: var(--text-weight-bold);
    position: relative;
}

aside.kvm_aside div.brand_logo img {
    width: 50px;
    height: auto;
    margin-right: 0.938rem;
}

aside.kvm_aside div.brand_logo span.beta {
    position: absolute;
    content: '';
    right: 5px;
    top: -5px;
    color: var(--text-color);
    font-size: 0.875rem;
    line-height: 1.563rem;
    font-weight: var(var(--text-weight-medium));
    text-transform: uppercase;
    opacity: 0.5;
}

aside.kvm_aside div.menu_kvm {
    position: relative;
    margin-top: 1.625rem;
    height: calc(100vh - 106px);
}

aside.kvm_aside div.menu_kvm > div {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

aside.kvm_aside div.menu_kvm a {
    font-size: 1rem;
    line-height: 1.563rem;
    font-weight: var(--text-weight-medium);
    color: var(--text-color);
    opacity: 0.5;
    text-decoration: none;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    transition: color 0s;
}

aside.kvm_aside div.menu_kvm a svg {
    width: 20px;
    height: auto;
    margin-right: 0.938rem;
}

aside.kvm_aside div.menu_kvm a svg .st0 {
    fill: var(--text-color);
    opacity: 0.5;
}

aside.kvm_aside div.menu_kvm a.active,
aside.kvm_aside div.menu_kvm div.menu_up a:hover {
    background-color: var(--bck-menu-active);
    color: var(--text-link-color);
    opacity: 1;
}

aside.kvm_aside div.menu_kvm a.active {
    font-weight: var(--text-weight-semi);
}

aside.kvm_aside div.menu_kvm div.menu_up a:not(.active):hover {
    background-color: transparent;
}

aside.kvm_aside div.menu_kvm a.active svg .st0,
aside.kvm_aside div.menu_kvm div.menu_up a:hover svg .st0 {
    fill: var(--text-link-color);
    opacity: 1;
}

aside.kvm_aside div.menu_kvm div.menu_bottom {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    margin-top: 0;
    padding: 1.875rem 0;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

aside.kvm_aside div.menu_kvm div.menu_bottom a {
    padding: 0 1.25rem;
    border-radius: 0;
}

aside.kvm_aside div.menu_kvm div.menu_bottom a:hover {
    color: var(--text-link-color);
    opacity: 1;
}

aside.kvm_aside div.menu_kvm div.menu_bottom a:hover svg .st0 {
    fill: var(--text-link-color);
    opacity: 1;
}

aside.kvm_aside div.menu_kvm ul.sub_menu {
    position: relative;
    margin: 0.313rem 0 0.625rem 3.125rem;
    list-style-type: none;
}

aside.kvm_aside div.menu_kvm .menu_vm_responsive,
aside.kvm_aside div.menu_bottom .menu_switch_responsive {
    display: none;
}

aside.kvm_aside div.menu_kvm ul.sub_menu:before {
    position: absolute;
    content: '';
    width: 1px;
    height: 98%;
    left: -25px;
    top: 3px;
    background: #DDDDDD;
}

aside.kvm_aside div.menu_kvm ul.sub_menu div#selector {
    position: absolute;
    content: '';
    width: 4px;
    height: 20px;
    left: -26px;
    top: 3px;
    background: #2893E9;
    transition: top .5s ease 0s;
}

aside.kvm_aside div.menu_kvm ul.sub_menu li {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 0.938rem;
    line-height: 1.563rem;
    color: var(--text-color);
    width: max-content;
    max-width: 100%;
}

aside.kvm_aside div.menu_kvm ul.sub_menu li:hover {
    cursor: pointer;
}

aside.kvm_aside div.menu_kvm ul.sub_menu li:not(:last-of-type) {
    padding-bottom: 0.375rem;
}

aside.kvm_aside div.menu_kvm ul.sub_menu li.active {
    font-weight: var(--text-weight-semi);
}

aside.kvm_aside div.menu_kvm ul.sub_menu li.disabled {
    color: var(--text-disabled-color);
}

aside.kvm_aside div.menu_kvm ul.sub_menu li.disabled svg {
    height: 15px;
    width: auto;
    margin-left: 6px;
}

aside.kvm_aside div.menu_kvm ul.sub_menu li.disabled svg .st0 {
    fill: var(--text-disabled-color);
}

/*** Si la hauteur de fenêtre est plus basse que la totalité du contenu ***/
@media screen and (max-height: 921px) {
    aside.kvm_aside { position: absolute; height: 100%; border-right: none; }
    aside.kvm_aside div.menu_kvm div.menu_bottom { position: relative; }
    nav.nav_kvm,
    div.content-wrapper,
    footer { border-left: 1px solid var(--border-color); }
}


/*****************/
/* Switch Button */
/*****************/
.switch_mode {
    position: relative;
    display: inline-block;
    width: 167px;
    height: 50px;
    margin-left: 1.25rem;
}

.switch_mode.switch_power {
    width: 80px;
    height: 41px;
}

.switch_mode input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #EAEDEF;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    left: 5px;
    bottom: 5px;
    background-color: white;
    background-image: url(/webroot/img/mode_clair.svg);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: 7.5px 7.5px;
    -webkit-transition: .4s;
    transition: .4s;
    -webkit-transform: translateX(117px);
    -ms-transform: translateX(117px);
    transform: translateX(117px);
}

.slider:after {
    content: 'Mode jour';
    color: var(--text-color);
    font-size: 0.938rem;
    line-height: 1.563rem;
    font-weight: var(--text-weight-medium);
    text-transform: uppercase;
    left: var(--pos-slider-mode);
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

/* libellés par langue ─ on ne change que content */
:lang(fr)  .slider::after { content: 'Mode jour'; }
:lang(en)  .slider::after { content: 'Day mode'; }
:lang(de)  .slider::after { content: 'Tag-Modus'; }
:lang(es)  .slider::after { content: 'Modo diurno'; max-width: 100px; }
:lang(it)  .slider::after { content: 'Modalità giorno'; max-width: 100px; }
:lang(pt)  .slider::after { content: 'Modo dia'; }

input:checked + .slider {
    background-color: #000000;
}

input:checked + .slider:after {
    content: 'Mode nuit';
}

/* Libellés par langue lorsqu’on est en mode nuit */
:lang(fr) input:checked + .slider::after { content: 'Mode nuit'; }
:lang(en) input:checked + .slider::after { content: 'Night mode'; }
:lang(de) input:checked + .slider::after { content: 'Nacht-Modus'; }
:lang(es) input:checked + .slider::after { content: 'Modo nocturno'; }
:lang(it) input:checked + .slider::after { content: 'Modalità notte'; }
:lang(pt) input:checked + .slider::after { content: 'Modo noite'; }

/*input:focus + .slider {
    box-shadow: 0 0 1px #000000;
}*/

input:checked + .slider:before {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    background-color: #292F34;
    background-image: url(/webroot/img/mode_sombre_blanc.svg);
}

.slider.round {
    border-radius: 25px;
}

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

/**** Switch Power Off ****/
.switch_mode.switch_power .slider {
    background-color: #008A56;    
}

.switch_mode.switch_power input:checked + .slider {
    background-color: #F84B4B;
}

.switch_mode.switch_power .slider:before {
    height: 32px;
    width: 32px;
    left: 4px;
    bottom: 4px;
    background-image: none;
    -webkit-transform: translateX(39px);
    -ms-transform: translateX(39px);
    transform: translateX(39px);
}

.switch_mode.switch_power .slider.wait:hover {
    cursor: not-allowed;
}

.switch_mode.switch_power .slider.wait:before {
    background-image: url(../img/loader/loader-blue.svg);
    background-position: 6px 6px;
    background-size: 20px;
}

.switch_mode.switch_power input:checked + .slider:before {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    background-color: #FFFFFF;
}

.switch_mode.switch_power .slider:after {
    content: 'On';
    left: 12px;
    font-size: 0.938rem;
    line-height: 1.625rem;
    font-weight: var(--text-weight-semi);
    color: #FFF;
}

.switch_mode.switch_power input:checked + .slider:after {
    content: 'Off';
    left: unset;
    right: 10px;
}


/***********************/
/*** Navigation Bloc ***/
/***********************/
nav.nav_kvm {
    padding: 0.75rem 2.5rem;
    margin-left: 335px;
    background-color: var(--bck-head-footer);
    position: relative;
    z-index: 8;
}

nav.nav_kvm input[type="text"] {
    border-radius: 10px 0 0 10px;
    border: 0;
    background: var(--bck-input);
    width: 345px;
    padding: 0 1.25rem;
    font-size: 0.938rem;
    line-height: 2.813rem;
    max-height: 45px;
}

nav.nav_kvm input[type="text"]:focus {
    outline: none !important;
}

nav.nav_kvm span#search_btn {
    display: inline-block;
    position: relative;
    font-size: 0.938rem;
    line-height: 1.563rem;
    border-radius: 0 10px 10px 0;
    background: var(--bck-input);
    margin-left: -4px;
    min-height: 45px;
    width: 55px;
}

nav.nav_kvm span#search_btn:hover {
    cursor: pointer;
}

nav.nav_kvm span#search_btn svg {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: zoom 0.5s ease-out;
}

nav.nav_kvm span#search_btn svg .st0 {
    fill: var(--text-color);
}

nav.nav_kvm span#search_btn:hover svg {
    zoom: 1.1;
}

nav.nav_kvm .nav_right {
    float: right;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0 20px;
    align-items: center;
}

nav.nav_kvm .nav_right div.action:hover,
nav.nav_kvm .nav_right div.notif:hover {
    cursor: pointer;
}

nav.nav_kvm .nav_right > div  {
    font-size: 0.875rem;
    line-height: 1.125rem;
    gap: 0 0.75rem;
    color: var(--text-color);
}

nav.nav_kvm .nav_right div.user div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

nav.nav_kvm .nav_right > div {
    min-height: 45px;
}

nav.nav_kvm .nav_right > div:not(:last-of-type) {
    border-right: 1px solid var(--border-nav-color);
    position: relative;
    padding-right: 24px;
    display: flex;
    align-items: center;
}

nav.nav_kvm .nav_right svg {
    height: 25px;
    width: auto;
}

nav.nav_kvm .nav_right svg .st0 {
    fill: var(--text-color);
}

nav.nav_kvm .nav_right img.nav_icon {
    width: 35px;
    height: auto;
}

span.alert {
    position: absolute;
    left: 15px;
    top: 5px;
    display: block;
    width: 15px;
    height: 15px;
    border: var(--border-span-alert);
    border-radius: 50%;
    background-color: #FF6600;
    font-size: 0.625rem;
    line-height: 1rem;
    font-weight: var(--text-weight-medium);
    color: #FFF;
    text-align: center;
}


/**************/
/*** FOOTER ***/
/**************/
footer {
    font-size: 0.875rem;
    line-height: 1.438rem;
    color: var(--text-color);
    padding: 0.875rem 1.875rem;
    margin-left: 335px;
    background-color: var(--bck-head-footer);
}

footer a.btn-feedback {
    align-items: center;
    background: #008A56;;
    border: none;
    border-radius: 50px;
    bottom: 20px;
    box-shadow: 0 4px 12px #00000026;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 12px 20px;
    position: fixed;
    right: 20px;
    transition: .3s;
    z-index: 999;
}


/****************/
/*** Dropdown ***/
/****************/
div.dropdown-menu {
    display: flex;
    flex-direction: column;
    width: 330px;
    background-color: #FFFFFF;
    border: 1px solid #DFDFDF;
    border-radius: 10px;
    box-shadow: 5px 5px 20px #1C469D33;
    position: absolute;
    content: '';
    z-index: 2;
}

div.dropdown-menu.dm-navigation {
    top: 40px;
    right: 20px;
    width: max-content;
    max-width: 300px;
}

div.dropdown-menu a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0 0.625rem;
    padding: 0.625rem 0.938rem;
    color: #292F34;
    text-decoration: none;
    cursor: pointer;
    width: max-content;
}

div.dropdown-menu a.txt-danger {
    color: var(--text-danger);
}

div.dropdown-menu a:first-of-type {
    border-radius: 10px 10px 0 0;
}

div.dropdown-menu a:last-of-type {
    border-radius: 0 0 10px 10px;
}

div.dropdown-menu a:hover {
    background-color: #E4F1FF;
}

div.dropdown-menu a img.menu_icon {
    width: 15px;
    height: auto;
}

div.dropdown-menu a.in_progress {
    pointer-events: none;
    cursor: default;
    background:rgba(255, 128, 0, .1);
}

div.dropdown-menu img.loader {
    width: 20px;
    height: auto;
}

div.dropdown-menu div.action_log,
div.dropdown-menu div.notif_log,
div.dropdown-menu div.more {
    padding: 0.625rem 0.938rem
}

div.dropdown-menu div.more {
    text-align: center;
    border-top: 1px solid #DFDFDF;
    background: #ededed;
    border-radius: 0 0 10px 10px;
}

div.dropdown-menu div.action_log div.action_title {
    font-size: 0.938rem;
    line-height: 1.563rem;
    justify-content: flex-end;
}

div.dropdown-menu div.action_log div.action_title img,
div.dropdown-menu div.notif_log img {
    width: auto;
    height: 15px;
    margin-right: 10px;
}

div.dropdown-menu div.action_log div.actions {
    font-size: 0.875rem;
    line-height: 1.5rem;
    opacity: 0.5;
    text-align: right;
}

.night div.dropdown-menu div.action_log div.action_title,
.night div.dropdown-menu div.action_log div.actions,
.night div.dropdown-menu div.notif_log,
.night div.dropdown-menu div.more {
    color: var(--bck-el);
}


/*** Info WM Bloc ***/
div.info_vm {
    border-radius: 10px;
    background-color: var(--bck-el);
    color: var(--text-color);
    padding: 1.563rem 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0px 0px 15px #0013460D;
}

div.info_vm div.grid_elem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 0.625rem;
}

div.info_vm div.grid_elem:not(:last-of-type) {
    border-right: 1px solid #DDDDDD;
}

div.info_vm div.grid_elem div.logo {
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

div.info_vm div.grid_elem img {
    width: 40px;
    height: auto;
}

div.info_vm div.grid_elem p.quota {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: var(--text-weight-bold);
    text-align: center;
}

div.info_vm div.grid_elem p.tiny_txt {
    font-size: 0.938rem;
    line-height: 1.563rem;
    text-align: center;
}


/*** Label VPS ***/
div.label_vps {
    background: var(--bck-label-history);
    font-size: 0.75rem;
    line-height: 0.75rem;
    text-align: center;
    padding: 5px 10px;
    width: max-content;
    max-width: 300px;
    margin-top: 5px;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    color: var(--color-button-dashed-content);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div.label_vps img {
    width: 15px;
    height: auto;
    transition: filter 0.3s ease ease-in-out;
}

.night div.label_vps img {
    filter: brightness(3);
}


/*** Cols Infos Bloc ***/
div.blocs_info {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}

div.col_left, div.col_right {
    width: 50%;
}

div.col_full {
    width: 100%;
}

div.bloc_content {
    position: relative;
    padding: 1.875rem;
    background-color: var(--bck-el);
    border-radius: 10px;
    box-shadow: 0px 0px 15px #0013460D;
}

div.bloc_content.dfsb {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

div.bloc_content.hide_bottom {
    border-radius: 10px 10px 0 0;
}

div.bloc_content:not(:first-of-type) {
    margin-top: 30px;
}

div.bloc_content div#show_ip {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

div.bloc_content + div.scroll-down {
    font-size: 0.938rem;
    line-height: 1.625rem;
    padding: 0.938rem 1.875rem;
    background-color: var(--bck-dropdown-bloc);
    text-align: center;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid var(--border-dropdown-bloc);
    box-shadow: 0px 0px 15px #0013460D;
}

div.bloc_content + div.scroll-down > div {
    justify-content: center;
}

div.bloc_content + div.scroll-down svg {
    width: 14px;
    height: auto;
    margin-left: 10px;
    transition: transform 0.5s ease-in-out;
}

div.bloc_content + div.scroll-down svg .st0 {
    fill: var(--text-link-color);
}

div.bloc_content div.title {
    margin-bottom: 22px;
}

div.bloc_content div.title.primary {
    margin-bottom: 0;
}

div.title.primary div.bloc_resp {
    display: none;
}

div.bloc_content div.title h4 {
    font-size: 1.125rem;
    line-height: 1.563rem;
    font-weight: var(--text-weight-bold);
}

div.bloc_content div.title.primary h4 {
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: var(--text-weight-bold);
}

div.bloc_content div.title svg {
    height: 20px;
    width: auto;
    margin-right: 10px;
    fill: var(--fill-circle);
}

div.bloc_content div.title.primary svg,
div.bloc_content div.title.primary img {
    height: 27px;
    width: auto;
    margin-right: 20px;
}

div.bloc_content div.title.primary + div.content {
    margin-top: 30px;
}

div.bloc_content div.title.primary + div.content p {
    font-size: 0.983rem;
    line-height: 1.5rem;
}

div.bloc_content div.title.primary + div.content p:not(:last-of-type) {
    margin-bottom: 10px;
}

div.bloc_content div.title a[class^="btn-"] {
    margin-left: auto;
    font-size: 0.938rem;
    line-height: 1.625rem;
    font-weight: var(--text-weight-semi);
    text-transform: uppercase;
}

div.bloc_content div.title a[class^="btn-"].disabled {
    opacity: 0.5;
}

div.bloc_content div.title a[class^="btn-"].disabled:hover {
    cursor: not-allowed;
}

div.bloc_content div.title div.select {
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    margin-left: auto;
    width: 120px;
    height: 21px;
    border-radius: 10px;
    background: #fff;
    color: var(--text-color-always);
    padding: 0.625rem 0.938rem;
    border: 1px solid #292F34;
    background-image: url(/webroot/img/chevron_s.svg);
    background-repeat: no-repeat;
    background-size: 12px auto;
    background-position: right 15px top 50%;
    position: relative;
}

div.bloc_content div.title div.select.active {
    border-radius: 10px 10px 0 0; 
}

div.bloc_content div.title div.select div.value {
    font-size: 0.938rem;
    line-height: 1.313rem;
    font-weight: var(--text-weight-regular);
}

div.bloc_content div.title div.select div.sub_select {
    display: none;
    position: absolute;
    content: '';
    left: 0;
    top: 41px;
    width: 150px;
    background: #fff;
    border: 1px solid #DFDFDF;
    box-shadow: 5px 5px 20px #1C469D33;
    border-radius: 0 0 10px 10px;
}

div.bloc_content div.title div.select.active div.sub_select {
    display: block;
    z-index: 99;
}

div.bloc_content div.title div.select div.sub_select > div {
    padding: 9px 15px;
    font-size: 0.938rem;
    line-height: 1.25rem;
    font-weight: var(--text-weight-regular);
}

div.bloc_content div.title div.select,
div.bloc_content div.title div.select div.sub_select > div {
    cursor: pointer;
}

div.bloc_content div.title div.select div.sub_select > div:hover {
    background: #E4F1FF;
}

div.bloc_content div.activity_list div.history_message svg#history_icon {
    width: 200px;
    height: auto;
    margin-bottom: 30px;
    fill: var(--history-svg);
}

div.bloc_content div.activity_list div.history_message > div {
    color: var(--history-text-color);
}

div.bloc_content div.activity_list div.list-element {
    gap: 0 10px;
    font-size: 0.938rem;
    line-height: 1.5rem;
    color: var(--text-color);
    align-items: flex-start;
}

div.bloc_content div.activity_list div.list-element img {
    width: 15px;
    height: auto;
    position: relative;
    top: 6px;
}

div.bloc_content div.activity_list div.list-element div.time {
    margin-left: auto;
    font-size: 0.875rem;
    opacity: 0.5;
    width: 120px;
    text-align: right;
}

div.bloc_content div.simple_list {
    font-size: 0.938rem;
    line-height: 1.5rem;
    color: var(--text-color);
    gap: 6px;
}

div.bloc_content div.simple_list h5 {
    font-weight: var(--text-weight-medium);
}

div.bloc_content div.simple_list div.ip img {
    width: 20px;
    height: auto;
    margin-right: 8px;
}

div.bloc_content div.simple_list div.ip img.icon_copy {
    width: 14px;
    height: auto;
    margin-left: 4px;
    top: 1px;
    position: relative;
    cursor: pointer;
}

div.bloc_content div.simple_list div.ip svg.icon_copy {
    width: 14px;
    height: auto;
    margin-left: 4px;
    top: 1px;
    position: relative;
    cursor: pointer;
}

div.bloc_content div.simple_list div.ip svg .st0 {
    fill:#2F353A;
}

body.night div.bloc_content div.simple_list div.ip svg .st0 {
    fill: #fff;
}

div.bloc_content div.simple_list div.ip span.copy-status {
    margin-left: 5px;
    background: #008A56;
    color: #fff;
    padding: 5px 10px;
    font-size: 10px;
    line-height: 12px;
    font-weight: 500;
    border-radius: 10px;
    position: relative;
    top: -2px;
    visibility: hidden;
}

div.bloc_content div.simple_list div:nth-child(3) {
    width: 15px;
    height: 15px;
    position: relative;
}

div.bloc_content div.simple_list img.primary_ip {
    width: 100%;
    height: auto;
    position: relative;
    top: -2px;
}

div.bloc_content div.simple_list div:nth-child(3):hover {
    cursor: pointer;
}

div.bloc_content div.simple_list div:nth-child(3):hover:after {
    position: absolute;
    content: attr(data-alt);
    left: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    background: #fff;
    color: #000;
    width: max-content;
    font-size: 12px;
    line-height: 18px;
    border-radius: 5px;
    border: 1px solid #ececec;
}

div.bloc_content div.action_btn a[class^="btn-"] {
    display: inline-flex;
    width: max-content;
    margin: 0;
    padding: 10px 20px;
    font-size: 0.983rem;
    line-height: 1.25rem;
    font-weight: var(--text-weight-semi);
    border: 0;
    text-transform: uppercase;
}

div.bloc_content div.action_btn a[class^="btn-"].disabled {
    opacity: 0.5;
    pointer-events: none;
}

div.bloc_content div.action_btn a[class^="btn-"].disabled:hover {
    cursor: not-allowed;
}

div.bloc_graph {
    position: relative;
    padding: 1.875rem 1.875rem 0;
    background-color: var(--bck-el);
    border-radius: 10px;
    box-shadow: 0px 0px 15px #0013460D;
    margin-top: 30px;
}

div.bloc_graph h5 {
    font-size: 0.875;
    line-height: 1.313rem;
    font-weight: var(--text-weight-semi);
    text-align: center;
}

div.bloc_graph div.ct-chart {
    margin-top: 30px;
}

div.bloc_graph .ct-label {
    color: var(--text-graph-label);
    fill: var(--text-graph-label);
}

div.bloc_graph .ct-grid {
    stroke: var(--grid-graph-color);
}

div.bloc_form {
    position: relative;
    padding: 1.875rem;
    background-color: var(--bck-el);
    border-radius: 10px;
    box-shadow: 0px 0px 15px #0013460D;
    margin-top: 30px;
}

div.bloc_form h5 {
    font-size: 1.125rem;
    line-height: 1.563rem;
    font-weight: var(--text-weight-bold);
    text-align: center;
}

div.bloc_form form {
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 540px;
}

div.bloc_form form.success_send {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation-name: fadeInLeft;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-fill-mode: both;
    transition: all ease-in-out;
}

@keyframes fadeInLeft {
    0% {
      opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-150%);
        display: none;
    }
}

div.bloc_form form div.field {
    width: 100%;
}

div.bloc_form form div.field.nomargin {
    margin-top: 0 !important;
}

div.bloc_form form div.field:not(:first-child) {
    margin-top: 20px;
}

div.bloc_form form div.field label {
    display: block;
    font-size: 0.983rem;
    line-height: 1.5rem;
    font-weight: var(--text-weight-bold);
}

div.bloc_form form div.field input,
div.bloc_form form div.field textarea {
    width: calc(100% - 30px);
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #292F34;
    font-size: 0.983rem;
    line-height: 1.5rem;
    font-weight: var(--text-weight-regular);
    resize: none;
    font-family: inherit;
}

div.bloc_form form div.field select {
    width: 100%;
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #292F34;
    font-size: 0.983rem;
    line-height: 1.5rem;
    font-weight: var(--text-weight-regular);
    resize: none;
    font-family: inherit;
    background: #fff;
}

div.bloc_form form div.field input[type="submit"] {
    display: block;
    width: auto;
    margin: 0 auto;
    padding: 10px 20px;
    font-size: 0.983rem;
    line-height: 1.25rem;
    font-weight: var(--text-weight-semi);
    color: var(--text-btn-primary-color);
    border-radius: 21px;
    background-color: #008A56;
    border: 0; 
    text-transform: uppercase;
}

.modal_kvm > div.content_modal div.content div.bloc_form.label-data form label { display: block; text-align: left; font-weight: var(--text-weight-semi); margin-top: 5px; }

div.bloc_form form div.field input.is-invalid,
div.bloc_form form div.field textarea.is-invalid { border-color: #842029; background: #f8d7da; color: #842029; }
div.bloc_form form div.field input.is-invalid::placeholder,
div.bloc_form form div.field textarea.is-invalid::placeholder { border-color: #842029; background: #f8d7da; color: #842029; }
div.bloc_form form div.field input.is-invalid:focus-visible { display: block; outline-color: #842029; }
span.invalid-feedback { display: block; margin-top: 5px; color: #842029; }

div.bloc_form form + div.waiting {
    display: none;
    height: 380px;
}

div.bloc_form form.success_send + div.waiting {
    display: flex;
    animation-name: fadeInRight;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: both;
    transition: all ease-in-out;
}

@keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }
    100% {
        opacity: 1;
    }
}

div.bloc_form form.success_send + div.waiting.end_wait {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    animation-name: fadeInLeft2;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-fill-mode: both;
    transition: all ease-in-out;
}

@keyframes fadeInLeft2 {
    0% {
      opacity: 1;
      transform: translateX(-50%);
    }
    100% {
        opacity: 0;
        transform: translateX(-150%);
    }
}

div.bloc_form div.result { position: relative; display: none; height: 380px; padding: 0 30px; justify-content: center; }
div.bloc_form div.result div.success,
div.bloc_form div.result div.warning,
div.bloc_form div.result div.error { display: none; flex-direction: column; gap: 40px; align-items: center; justify-content: center; }

div.bloc_form form.success_send + div.waiting.end_wait + div.result {
    display: flex;
    animation-name: fadeInRight;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-fill-mode: both;
    transition: all ease-in-out;
}

div.bloc_form form.success_send + div.waiting.end_wait + div.result[data-result="success"] div.success,
div.bloc_form form.success_send + div.waiting.end_wait + div.result[data-result="warning"] div.warning,
div.bloc_form form.success_send + div.waiting.end_wait + div.result[data-result="error"] div.error { display: flex; }

.is-invalid {
    border-color: #dc3545;
    background-color: #ffecec;
}

.error-message {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 4px;
}

div.bloc_table {
    position: relative;
    padding: 1.875rem;
    background-color: var(--bck-el);
    border-radius: 10px;
    box-shadow: 0px 0px 15px #0013460D;
    margin-top: 30px;
}

div.bloc_table h5 {
    font-size: 1.125rem;
    line-height: 1.563rem;
    font-weight: var(--text-weight-bold);
    text-align: center;
}

div.bloc_table table {
    margin: 40px auto 0;
    width: 100%;
}

div.bloc_table table thead tr th {
    text-align: left;
    font-size: 0.938rem;
    line-height: 1.625rem;
    font-weight: var(--text-weight-semi);
}

div.bloc_table table thead tr th,
div.bloc_table table tbody tr td { 
    padding: 10px;
    vertical-align: middle;
    word-break: break-word;
}

div.bloc_table table thead tr th:nth-child(3),
div.bloc_table table tbody tr td:nth-child(3) {
    max-width: 277px;
}

div.bloc_table table tbody tr:nth-child(2n+1) td {
    background: var(--bck-odd-even-table);
}

div.bloc_table table tbody tr td a[class^="btn-"] {
    display: inline-flex;
    width: max-content;
    margin: 0;
    padding: 10px 20px;
    font-size: 0.983rem;
    line-height: 1.25rem;
    font-weight: var(--text-weight-semi);
    border: 0; 
    text-transform: uppercase;
}

div.bloc_table table tbody tr td a[class^="btn-"]:first-of-type {
    margin-right: 6px;
}

div.bloc_table table tbody tr td a[class^="btn-"] img {
    width: 20px;
    height: auto;
}

div.bloc_table table tbody tr td a[class^="btn-"].disabled,
div.bloc_content_page a[class^="btn-"].disabled {
    opacity: 0.5;
}

div.bloc_table table tbody tr td a[class^="btn-"].disabled:hover,
div.bloc_content_page a[class^="btn-"].disabled:hover {
    cursor: not-allowed;
}

/** Custom Table SSH key **/
#listing_sshkey tbody tr td:first-of-type { width: 150px; }
#listing_sshkey tbody tr td:nth-child(2) { width: 400px; }
#listing_sshkey tbody tr td:nth-child(3) { width: 200px; }
#listing_sshkey tbody tr td:nth-child(4) { width: 90px; }


div.bloc_content_page {
    position: relative;
    padding: 1.875rem;
    background-color: var(--bck-el);
    border-radius: 10px;
    box-shadow: 0px 0px 15px #0013460D;
    margin-top: 30px;
}

div.bloc_content_page:first-of-type,
div.bloc_table:first-of-type {
    margin-top: 0;
}

.title-content + .blocs_info .bloc_content_page:first-of-type { margin-top: 0; }

div.bloc_content_page h5 {
    font-size: 1.125rem;
    line-height: 1.563rem;
    font-weight: var(--text-weight-semi);
    text-align: left;
    text-transform: uppercase;
}

div.bloc_content_page div.content {
    margin: 20px auto 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

div.bloc_content_page div.content p {
    font-size: 0.983rem;
    line-height: 1.5rem;
}

div.bloc_content_page div.content p strong {
    font-weight: 600;
}

div.bloc_content_page div.content p:not(:last-of-type) {
    margin-bottom: 10px;
}

div.bloc_content_page div.content div.select_box {
    margin: 30px auto 0;
    width: 565px;
}

div.bloc_content_page div.content div.select_box select {
    display: none;
}

div.bloc_content_page div.content div.select_box div.field div.choice {
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #292F34;
    font-size: 0.983rem;
    line-height: 1.875rem;
    font-weight: var(--text-weight-regular);
    background-color: var(--bck-field-select);
    color: var(--text-field-select);
    cursor: pointer;
    background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center / 1.4em, linear-gradient(to left, rgba(34, 38, 42, 0.7) 3em, rgba(255, 255, 255, 0.2) 3em);
}

div.bloc_content_page div.content div.select_box div.field div.choice.open {
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
}

ul.dropd_select {
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-top: 0;
    border: 1px solid #292F34;
    border-radius: 0 0 0 10px;
    display: none;
}

div.bloc_content_page div.content div.select_box div.field div.choice.open + ul.dropd_select {
    display: block;
}

ul.dropd_select li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background: #FFF;
    border-bottom: 1px solid #292F34;
    padding: 10px 15px;
    text-transform: capitalize;
    background-color: var(--bck-field-select);
    color: var(--text-field-select);
    cursor: pointer;
}

ul.dropd_select li:last-of-type {
    border-bottom: 0;
}

ul.dropd_select li div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

ul.dropd_select li img {
    width: 30px;
    height: auto;
}

ul.dropd_select li.disabled {
    cursor: not-allowed;
    background: var(--bck-disabled);
}

ul.dropd_select li.disabled img,
ul.dropd_select li.disabled div {
    opacity: 0.5;
}

ul.dropd_select li > div > div.show_app {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
}

ul.dropd_select li > div > div.show_app > p.tiny_app {
    margin-bottom: 0;
    font-size: 11px;
    line-height: 11px;
}

div.bloc_content_page div.content div.select_box div.field ul.dropd_select li:hover {
    background: var(--bck-field-hover);
}

div.bloc_content_page div.content div.select_box div.field ul.dropd_select li.disabled:hover {
    background: var(--bck-field-hover);
}

/*div.bloc_content_page div.content select {
    width: 540px;
    margin: 30px auto 0;
    background: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #292F34;
    font-size: 0.983rem;
    line-height: 1.5rem;
    font-weight: var(--text-weight-regular);
    resize: none;
    font-family: inherit;
    text-transform: capitalize;

    appearance: none;
    outline: 0;
    background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center / 1.4em, linear-gradient(to left, rgba(0, 0, 0, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
    border-radius: 0.25em;
}

div.bloc_content_page div.content select:hover {
    cursor: pointer;
}

div.bloc_content_page div.content select:focus-visible {
    outline: none;
}*/

div.bloc_content_page div.content div.action_btn {
    margin-top: 30px;
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px;
}

div.bloc_content_page div.content div.action_btn.center {
    justify-content: center;
}

/*div.bloc_content_page div.content div.action_btn a[class^="btn-"]:first-of-type {
    margin-right: 6px;
}*/

div.bloc_content_page div.content div.action_btn a[class^="btn-"] {
    display: inline-flex;
    width: max-content;
    margin: 0;
    padding: 10px 20px;
    font-size: 0.983rem;
    line-height: 1.25rem;
    font-weight: var(--text-weight-semi);
    border: 0;
    text-transform: uppercase;
}

div.bloc_content_page div.content div.action_btn div.wait_alim {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
}

div.bloc_content_page div.content div.action_btn div.wait_alim img {
    max-height: 30px;
    width: auto;
}

div.bloc_content_page div.content div#new_pwd {
    padding: 15px 30px;
    border: 2px solid #1C469D;
    border-left-width: 10px;
    border-radius: 5px;
    margin-bottom: 30px;
    display: none;
}

div.bloc_content_page div.content div#new_pwd.show {
    display: block;
}

div.bloc_content_page div.content div#new_pwd p.title {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}

div.bloc_content_page div.content div#new_pwd p strong {
    font-weight: 600;
}

.map_locate {
    position: absolute;
    top: 88px;
    right: 30px;
    width: 150px;
    height: auto;
    float: right;
}


/*** Modal ***/
.modal_kvm {
    visibility: hidden;
    opacity: 0;
    position: fixed; /*absolute*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1039;
    transition: opacity 0.5s ease-in-out;
}

.modal_kvm.fade {
    background: rgba(0,0,0,0.8);
    opacity: 1;
}

#modal_novnc.modal_kvm > div.content_modal {
    width: 60vw;
    height: 70vh;
    margin: auto;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 0;
    border: 3px solid #cccccc;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.modal_kvm > div.content_modal {
    width: 600px;
    max-width: calc(100% - 60px);
    height: max-content;
    max-height: 60vw;
    margin: auto;
    background: #FFF;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 0;
    border: unset;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.modal_kvm > div.content_modal div.content {
    padding: 2rem; /*20px*/
    /*width: calc(100% - 40px);*/
}

.modal_kvm > div.content_modal div.content p {
    font-size: 16px;
    line-height: 26px;
    text-align: left;
}

.modal_kvm > div.content_modal div.content p.title {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    margin-bottom: 20px;
}

.modal_kvm > div.content_modal div.content form {
    margin-top: 0;
}

.modal_kvm > div.content_modal div.content form .input.text label {
    display: none;
}

.modal_kvm > div.content_modal div.footer_modal {
    width: calc(100% - 40px);
    background: #F2F4F6;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.modal_kvm > div.content_modal div.footer_modal a[class^="btn-"] {
    display: inline-flex;
    width: max-content;
    margin: 0;
    padding: 10px 20px;
    font-size: 0.983rem;
    line-height: 1.25rem;
    font-weight: var(--text-weight-semi);
    border: 0;
    text-transform: uppercase;
}

.modal_kvm > div.content_modal div.footer_modal a[class^="btn-"].disabled {
    opacity: 0.5;
    pointer-events: none;
}

.modal_kvm > div.content_modal div.footer_modal a[class^="btn-"].disabled:hover {
    cursor: not-allowed;
}

.modal_kvm > div > iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.modal_kvm .bloc_form {
    padding: 0;
    background-color: #fff;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
}

.modal_kvm .content.bloc_form {
    border-radius: 10px;
}



/* Tooltip container */
.tooltip {
    position: relative;
}
  
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 330px;
    background-color: var(--bck-tooltip);
    color: var(--text-tooltip-color);;
    text-align: left;
    padding: 20px;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.5rem;

    /* Position the tooltip text */
    position: absolute;
    top: 50%;
    left: calc(100% + 20px);/*unset*/
    /*right: -280px;*/
    transform: translateY(-50%);

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}
  
/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-left: -10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--bck-tooltip) transparent transparent;
    transform: translateY(-50%);
}
  
/* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/*** Chartist JS ***/
.ct-label.ct-horizontal.ct-end {
    left: -25px;
    top: 5px;
    position: relative;
}

.ct-label.ct-vertical.ct-start {
    position: relative;
    top: 5px;
}

.ct-series-a .ct-line {
    stroke: #F84B4B !important;
}

.ct-series-a .ct-area {
    fill: #F84B4B !important;
}

.ct-series-b .ct-line {
    stroke: #2893E9 !important;
}

.ct-series-b .ct-area {
    fill: #2893E9 !important;
}

/** Chartist Legend **/
.ct-chart .ct-legend {      
    position: absolute;
    z-index: 10;
    list-style: none;
    text-align: center;
    right: 30px;
    top: 30px;
}

.ct-chart .ct-legend li {
    position: relative;
    padding-left: 23px;
    margin-right: 10px;
    margin-bottom: 3px;
    cursor: pointer;
    display: inline-block;
    float: right;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

.ct-chart .ct-legend li:last-of-type {
    margin-right: 30px;
}

.ct-chart .ct-legend li:before {
    width: 20px;
    height: 1px;
    position: absolute;
    left: -5px;
    top: 50%;
    content: '';
    border: 1px solid transparent;
    border-radius: 0px;
    transform: translateY(-50%);
}

.ct-chart .ct-legend li.inactive:before {
    background: transparent;
}

.ct-chart .ct-legend li:nth-child(1)::before{
    background-color: #F84B4B;
}
        
.ct-chart .ct-legend li:nth-child(2)::before{
    background-color: #2893E9;
}
       
/*.ct-chart .ct-legend li:nth-child(3)::before{
    background-color: #f4c63d;
}
        
.ct-chart .ct-legend li:nth-child(1n+4)::before{
    background-color: #F06292;
}*/

.ct-chart .ct-legend .ct-legend-inside {
    position: absolute;
    top: 0;
    right: 0;
}

.ct-chart g:not(.ct-grids):not(.ct-labels) g:nth-child(1) .ct-point,.ct-line {
    stroke: #F84B4B;        
}

.ct-chart g:not(.ct-grids):not(.ct-labels) g:nth-child(2) .ct-point,.ct-line {
    stroke: #2893E9;      
}

/*.ct-chart g:not(.ct-grids):not(.ct-labels) g:nth-child(3) .ct-point,.ct-line {
    stroke: #f4c63d;       
}
.ct-chart g:not(.ct-grids):not(.ct-labels) g:nth-child(1n+4) .ct-point,.ct-line {
    stroke: #F06292;       
}*/



/** Bloc Waiting **/
div.waiting { padding: 0 30px; display: flex; flex-direction: column; gap: 15px; align-items: center; justify-content: center; }
div.waiting img.loader { width: 120px; max-width: 100%; height: auto; }


/** Animation Success, Warning, Error SVG **/
.checkmark { width: 100px; height: 100px; border-radius: 50%; display: block; stroke-width: 2; stroke: #4bb71b; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #4bb71b; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; position:relative; top: 5px; right: 5px; margin: 0 auto !important; }
.checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #4bb71b; fill: #fff; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}
@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #4bb71b;
    }
}

.yellow-stroke { stroke: #FFC107; }
.alert-sign { stroke-width:6.25; stroke-linecap: round; position: absolute; top: 40px; left: 68px; width: 15px; height: 70px; animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-delay: 0.15s; }
.alert-sign .dot { stroke:none; fill: #FFC107; }
@keyframes alert-sign-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.circular circle.path { stroke-dasharray: 330; stroke-dashoffset: 0; stroke-linecap: round; opacity: 0.4; animation: 0.7s draw-circle ease-out; }
.red-stroke { stroke: #FF6245; }
.cross { stroke-width:6.25; stroke-linecap: round; position: absolute; top: 54px; left: 54px; width: 40px; height: 40px; }
.cross .first-line { animation: 0.7s draw-first-line ease-out; animation-delay: -0.25s; }
.cross .second-line { animation: 0.7s draw-second-line ease-out; }
.red-stroke { stroke: #FF6245; }
@keyframes draw-first-line {
    0% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 56,330;
        stroke-dashoffset: 0;
    }
}

@keyframes draw-second-line {
    0% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    50% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    100% {
        stroke-dasharray: 55,0;
        stroke-dashoffset: 70;
    }
}


/** Flash Message **/
div.flash_message { 
    position: fixed;
    top: 40px;
    right: 30px;
    width: max-content;
    max-width: 450px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99;
}
div.flash_message div.message {
    position: relative;
    right: -480px;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: center;
    transition: right 1s ease-in-out;
}
div.flash_message div.message.open {
    right: 0;
}
div.flash_message div.message[data-result="success"] {
    border: 2px solid var(--border-success-flash);
    background: var(--bck-success-flash);
}
div.flash_message div.message[data-result="error"] {
    border: 2px solid var(--border-error-flash);
    background: var(--bck-error-flash);
}
div.flash_message div.message img {
    width: 50px;
    height: auto;
}
div.flash_message div.message[data-result="error"] img {
    border: 1px solid #fbefeb;
    border-radius: 50%;
}
div.flash_message div.message div.text p.title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-color);
}
div.flash_message div.message div.text p.content {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--text-color);
    margin-top: 5px;
}
div.flash_message div.message div.exit {
    background: transparent;
    width: 30px;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.flash_message div.message div.exit:hover {
    cursor: pointer;
    background: #fff;
}
div.flash_message div.message svg {
    width: 15px;
    height: 15px;
}


/* A ranger */
#listing_h { 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
}

.flex_table {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 450px;
    overflow-y: auto;
    margin-top: 30px;
    border-radius: 6px;
    border: 1px solid var(--border-table-color);
}

.flex_table.table_ip {
    margin-top: 0;
    overflow-y: unset;
    max-height: unset;
}

.flex_table .top_table,
.flex_table .content_table .line_table {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.flex_table .top_table {
    background: var(--bck-top-table);
    border-bottom: 1px solid var(--border-table-color);
}

.flex_table .top_table > div {
    text-transform: uppercase;
    padding: 15px 0;
    font-weight: 500;
}

.flex_table .content_table .line_table {
    border-bottom: 1px solid var(--border-table-color);
    background: var(--bck-content-table);
}

.flex_table .content_table .line_table:last-of-type {
    border-bottom: 0;
}

.flex_table .content_table .line_table > div {
    padding: 10px 0;
    font-size: 14px;
    line-height: 22px;
    word-break: break-word;
}

.flex_table .content_table .line_table div.check img {
    width: 20px;
    height: auto;
}

.flex_table .top_table > div:nth-child(1),
.flex_table .content_table .line_table > div:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    padding: 0 10px;
}

.flex_table.table_ip .top_table > div:nth-child(1),
.flex_table.table_ip .content_table .line_table > div:nth-child(1) {
    width: 300px;
    justify-content: left;
}

.flex_table .top_table > div:nth-child(2),
.flex_table .content_table .line_table > div:nth-child(2) {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 200px;
}

.flex_table.table_ip .top_table > div:nth-child(2),
.flex_table.table_ip .content_table .line_table > div:nth-child(2) {
    justify-content: left;
    width: 200px;
}

.flex_table.table_ip .content_table .line_table > div:nth-child(2) span.label {
    margin-left: 0;
}

.flex_table .top_table > div:nth-child(3),
.flex_table .content_table .line_table > div:nth-child(3) {
    display: flex;
    justify-content: left;
    align-items: center;
    width: calc(100% - 645px);
}

.flex_table.table_ip .top_table > div:nth-child(3),
.flex_table.table_ip .content_table .line_table > div:nth-child(3) {
    width: calc(100% - 610px);
    justify-content: left;
    min-width: 185px;
}

.flex_table .top_table > div:nth-child(4),
.flex_table .content_table .line_table > div:nth-child(4) {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 125px;
}

.flex_table.table_ip .top_table > div:nth-child(4),
.flex_table.table_ip .content_table .line_table > div:nth-child(4) {
    width: 110px;
    min-width: 100px;
    justify-content: center;
}

.flex_table.table_ip .content_table .line_table > div:nth-child(4) .flex_vm_elem a.action,
.flex_table.table_ip .content_table .line_table > div:nth-child(4) .flex_vm_elem a.action svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 40px;
    height: 40px;
}

.flex_table.table_ip .content_table .line_table > div:nth-child(4) .flex_vm_elem a.action:after {
    transition: opacity .15s;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    z-index: 0;
    transform: translate3d(-50%,-50%,0);
    border-radius: 50%;
    opacity: 0;
    background-color: var(--bck-svg-action);
}

.flex_table.table_ip .content_table .line_table > div:nth-child(4) .flex_vm_elem a.action:hover:after,
.flex_table.table_ip .content_table .line_table > div:nth-child(4) .flex_vm_elem a.action.active:after {
    opacity: 1;
}

.flex_table.table_ip .content_table .line_table > div:nth-child(4) .flex_vm_elem a.action svg circle {
    fill: var(--fill-circle);
    opacity: 0.5;
}

.flex_table.table_ip .content_table .line_table > div:nth-child(4) .flex_vm_elem a.action:hover svg circle,
.flex_table.table_ip .content_table .line_table > div:nth-child(4) .flex_vm_elem a.action.active svg circle {
    fill: var(--text-link-color);
    opacity: 0.5;
}


.flex_table .top_table > div:nth-child(5),
.flex_table .content_table .line_table > div:nth-child(5) {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 145px;
}

.flex_table .top_table > div:nth-child(6),
.flex_table .content_table .line_table > div:nth-child(6) {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 145px;
    padding-right: 10px;
}

.flex_table#table-snap {
    max-height: unset;
    overflow-y: visible;
}
.flex_table#table-snap .top_table > div {
    font-size: 13px;
    font-weight: var(--text-weight-semi);
}
.flex_table#table-snap .content_table .line_table > div {
    font-size: 16px;
}
.flex_table#table-snap .top_table > div:nth-child(1),
.flex_table#table-snap .content_table .line_table > div:nth-child(1) {
    width: 200px;
    padding: 0 0 0 20px;
    justify-content: left;
}

.flex_table#table-snap .content_table .line_table > div:nth-child(1) {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.flex_table#table-snap .top_table > div:nth-child(2),
.flex_table#table-snap .content_table .line_table > div:nth-child(2) {
    width: 450px;
}

.flex_table#table-snap .top_table > div:nth-child(3),
.flex_table#table-snap .content_table .line_table > div:nth-child(3) {
    width: 200px;
}

.flex_table#table-snap .top_table > div:last-child,
.flex_table#table-snap .content_table .line_table > div:last-child {
    width: calc(100% - 850px);
    justify-content: right;
    padding-right: 20px;
}

.flex_table#table-snap .flex_vm_elem p:not(:last-of-type) {
    margin-bottom: 0.125rem;
}

.flex_table#table-snap .flex_vm_elem span.name_vm {
    font-size: 1.125rem;
    line-height: 1.563rem;
    font-weight: var(--text-weight-bold);
}

.flex_table#table-snap .flex_vm_elem img.distrib {
    width: 20px;
    height: auto;
    margin-left: 0.625rem;
}

.flex_table#table-snap .flex_vm_elem a.action,
.flex_table#table-snap .flex_vm_elem a.action svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 40px;
    height: 40px;
}

.flex_table#table-snap .flex_vm_elem a.action:after {
    transition: opacity .15s;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    z-index: 0;
    transform: translate3d(-50%,-50%,0);
    border-radius: 50%;
    opacity: 0;
    background-color: var(--bck-svg-action);
}

.flex_table#table-snap .flex_vm_elem a.action:hover:after,
.flex_table#table-snap .flex_vm_elem a.action.active:after {
    opacity: 1;
}

.flex_table#table-snap .flex_vm_elem a.action svg circle {
    fill: var(--fill-circle);
    opacity: 0.5;
}

.flex_table#table-snap .flex_vm_elem a.action:hover svg circle,
.flex_table#table-snap .flex_vm_elem a.action.active svg circle {
    fill: var(--text-link-color);
    opacity: 0.5;
}

.flex_table.table_ip div.dropdown-menu {
    width: max-content;
}

.flex_table span.label {
    background: var(--bck-label-info);
}

/*** Filter table ***/
div.filter {
    position: absolute;
    right: 0;
    top: 40px;
    background: var(--bck-el);
    border: 1px solid #CACACA;
    border-radius: 10px;
    padding: 15px;
    max-width: 300px;
}

div.filter form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

div.filter div.elem {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

div.filter div.elem label {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: var(--text-color);
}

div.filter div.elem select {
    padding: 10px;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    line-height: 14px;
    cursor: pointer;
}

div.filter div.elem button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bck-btn-filter);
    border-radius: 10px;
    cursor: pointer;
    padding: 10px;
    border: 0;
    font-size: 14px;
    line-height: 14px;
    margin-top: 10px;
    color: var(--text-color);
}

div.filter div.elem button:hover {
    opacity: 0.8;
}

div.filter div.elem button svg {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

div.filter div.elem button svg path,
div.filter div.elem button svg polygon,
div.filter div.elem button svg rect {
    fill: var(--text-color);
}


/********************/
/*** Push Message ***/
/********************/

.general_push {
    background: #FDE5CC;
    border: 2px solid #F60;
    border-left: 0;
    border-right: 0;
    padding: 20px 30px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 335px;
    cursor: pointer;
    z-index: 5;
}

.general_push .information {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.general_push .information .title {
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
}

.general_push .information .listing {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items : center;
    justify-content: left;
}

.general_push .information .listing .item strong {
    font-weight: 500;
}

.general_push .time {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.general_push .time svg {
    width: 15px;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.general_push .time svg.open {
    transform: rotate(180deg);
}

.general_message {
    position: absolute;
    width: calc(100% - 395px);
    left: 335px;
    top: -1000px;/*178*/
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    padding: 30px;
    transition: top 0.5s ease-in-out;
}

.general_message .push_message {
    position: relative;
    gap: 30px;
    left: 0;
    transition: left 0.5s ease;
    cursor: pointer;
    background: var(--bck-gen-push);
}

.general_message .push_message .text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: left;
    width: 100%;
}

.general_message .push_message .text .title {
    font-size: 16px;
    font-weight: 500;
}

.general_message .push_message .text .date {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
}

.general_message .push_message .label {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s ease-in-out;
    background: var(--bck-push-label);
}

.general_message .push_message:hover .label {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.general_message .push_message.close {
    left: -2000px;
}

.push_message {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: left;
    align-items: center;
    border-radius: 6px;
    border-left: 5px solid #DBDBDB;
    background: var(--bck-el);
    padding: 15px 30px 15px 20px;
    margin-bottom: 30px;
}

.push_message.flex_sb {
    justify-content: space-between;
}

.push_message.flex_sb .left {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: left;
    align-items: center;
}

.push_message.flex_sb .right a.btn-danger {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.938rem;
    line-height: 1.625rem;
}

.push_message p.title {
    font-weight: 600;
}

.push_message img.icon-info {
    width: 25px;
    height: 25px;
}

.push_message img.icon-close {
    width: 12px;
    height: 12px;
    opacity: 0.8;
    cursor: pointer;
}

.push_message div.text {
    font-size: 14px;
    line-height: 22px;
    text-align: justify;
}

.push_message.push_info {
    border-left: 5px solid #2893E9;
}

.push_message.push_warning {
    border-left: 5px solid #FF6600;
}

.push_message.push_danger {
    border-left: 5px solid #FF0000;
}


/*******************/
/*** Card Backup ***/
/*******************/

.backup-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin-top: 30px;
}

.backup-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 300px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.backup-header {
    font-size: 16px;
    margin-bottom: 10px;
}

.backup-body {
    font-size: 14px;
    margin-bottom: 15px;
}

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

.backup-actions a[class^=btn] {
    display: inline-flex;
    width: max-content;
    margin: 0;
    padding: 10px 20px;
    font-size: 0.983rem;
    line-height: 1.25rem;
    font-weight: var(--text-weight-semi);
    border: 0;
    text-transform: uppercase;
}
    
.btn-restore {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.btn-restore i {
    margin-right: 5px;
}

.btn-restore:hover {
    background-color: #218838;
}

@media screen and (min-width: 768px) {
    .backup-card {
        flex: 1 1 calc(50% - 20px);
    }
}

@media screen and (min-width: 1024px) {
    .backup-card {
        flex: 1 1 calc(33.333% - 20px);
    }
}



/* Style de l'élément avec tooltip */
.tooltip {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

/* Style de la bulle */
.tooltip .tooltip-text {
    visibility: hidden;
    width: 160px;
    background-color: var(--bck-tooltip-black);
    font-size: 13px;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    
    /* Positionnement de la bulle */
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    
    /* Petite flèche de la bulle */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--bck-tooltip-black) transparent transparent transparent;
}

/* Affichage de la bulle au survol */
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}



/*****************************/
/*** Animated Progress bar ***/
/*****************************/


/** {
  box-sizing: border-box;
  animation-timing-function: ease;
}*/

.wrapper_apb {
  position: relative;
  width: 350px;
  /*animation: out 0.3s forwards ease;*/
  animation-delay: 5s;
  transform: scale(1);
  opacity: 1;
  transform-origin: center -80%;
}
@keyframes out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.wrapper_apb .loading-bar {
  width: 100%;
  height: 15px;
  background: #E4F1FF; /*#dfe6e9*/
  border-radius: 5px;
}
.wrapper_apb .loading-bar .progress-bar {
  width: 6%;
  height: 100%;
  background: #2893E9; /*#a29bfe*/
  border-radius: 5px;
  border: 0 solid #0abde3;
}

.wrapper_apb.success .loading-bar {
    background: #E6F4EA;
}

.wrapper_apb.success .loading-bar .progress-bar {
    background: #4CAF50;
}

.wrapper_apb[class*=error_] .loading-bar {
    background: #FDE4E4;
}

.wrapper_apb[class*=error_] .loading-bar .progress-bar {
    background: #E92828;
}

/* 3 états à gérer selon la prograssion de l'action */
.wrapper_apb.process .loading-bar .progress-bar {
    animation: process 20s forwards;
}

.wrapper_apb.progress .loading-bar .progress-bar {
    animation: progress 50s forwards;
}

.wrapper_apb.ok .loading-bar .progress-bar {
    animation: finish 2s forwards;
}

@keyframes process {
    0% {
      width: 0%;
    }
    100% {
      width: 20%;
    }
  }

@keyframes progress {
  0% {
    width: 20%;
  }
  100% {
    width: 90%;
  }
}

@keyframes finish {
    0% {
      width: 90%;
    }
    100% {
      width: 100%;
    }
  }

.wrapper_apb .status {
  margin-top: 10px;
}
.wrapper_apb .status .state {
  float: left;
  font-size: 0.9em;
  letter-spacing: 1pt;
  text-transform: uppercase;
  width: 300px;
  height: 15px;
  position: relative;
}
.wrapper_apb .status .state:before {
  content: "Chargement de la backup";
  position: absolute;
  left: 0;
  top: 0;
}
.wrapper_apb.progress .status .state:before {
    content: "Chargement de la backup";
}
.wrapper_apb.ok .status .state:before {
    content: "Restauration en cours";
}
.wrapper_apb.progress .status .state:before,
.wrapper_apb.ok .status .state:before,
.wrapper_apb[class*=error_] .status .state:before {
    animation: fadeLeft 0.5s forwards ease;
    animation-delay: 0.5s;
    animation-name: fadeLeft;
}
.wrapper_apb.progress .status .state:before {
    animation: fadeLeft 0.5s forwards ease;
    animation-delay: 1s;
    animation-name: fadeLeft2;
}

@keyframes fadeLeft {
  0% {
    text-indent: 0;
    opacity: 1;
  }
  100% {
    text-indent: -100px;
    opacity: 0;
  }
}
@keyframes fadeLeft2 {
    0% {
      text-indent: 0;
      opacity: 1;
    }
    100% {
      text-indent: -100px;
      opacity: 0;
    }
  }
.wrapper_apb .status .state:after {
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 100px;
    opacity: 0;
}
.wrapper_apb.progress .status .state:after {
    content: "Restauration en cours";
  }
.wrapper_apb.ok .status .state:after {
    content: "Backup restaurée";
}
.wrapper_apb[class*=error_] .status .state:after {
    content: "Erreur";
}
.wrapper_apb.progress .status .state:after,
.wrapper_apb[class*=error_] .status .state:after {
    animation: fadeLeft2 0.5s forwards ease;
    animation-delay: 1s;
    animation-name: fadeLeft3;
}
.wrapper_apb.ok .status .state:after {
    animation: fadeLeft2 0.5s forwards ease;
    animation-delay: 1s;
    animation-name: fadeLeft4;
}
@keyframes fadeLeft3 {
  0% {
    text-indent: 100px;
    opacity: 0;
  }
  100% {
    text-indent: 0;
    opacity: 1;
  }
}
@keyframes fadeLeft4 {
    0% {
      text-indent: 100px;
      opacity: 0;
    }
    100% {
      text-indent: 0;
      opacity: 1;
    }
}
.wrapper_apb .status .percentage {
  float: right;
}
.wrapper_apb .status .percentage:before {
  content: "0%";
  font-size: 0.9em;
  letter-spacing: 1pt;
}
.wrapper_apb.process .status .percentage:before {
    animation: percentage-process 20s forwards ease;
    animation-delay: 0s, 20s;
}
.wrapper_apb.progress .status .percentage:before {
    animation: percentage-progress 40s forwards;
    animation-delay: 0s, 40s;
}
.wrapper_apb.ok .status .percentage:before {
    animation: percentage-ok 2s forwards;
    animation-delay: 0s, 2s;
}
.wrapper_apb[class*=error_] .status .percentage:before {
    animation: percentage-slow 3s forwards, percentage-fast 0.4s forwards;
    animation-delay: 0s, 3s;
}
@keyframes percentage-process {
  0% {
    content: "0%";
  }
  5% {
    content: "1%";
  }
  10% {
    content: "2%";
  }
  15% {
    content: "3%";
  }
  20% {
    content: "4%";
  }
  25% {
    content: "5%";
  }
  30% {
    content: "6%";
  }
  35% {
    content: "7%";
  }
  40% {
    content: "8%";
  }
  45% {
    content: "9%";
  }
  50% {
    content: "10%";
  }
  55% {
    content: "11%";
  }
  60% {
    content: "12%";
  }
  65% {
    content: "13%";
  }
  70% {
    content: "14%";
  }
  75% {
    content: "15%";
  }
  80% {
    content: "16%";
  }
  85% {
    content: "17%";
  }
  90% {
    content: "18%";
  }
  95% {
    content: "19%";
  }
  100% {
    content: "20%";
  }
}
@keyframes percentage-progress {
    0% {
      content: "20%";
    }
    1% {
      content: "21%";
    }
    2% {
      content: "22%";
    }
    3% {
      content: "23%";
    }
    4% {
      content: "24%";
    }
    5% {
      content: "25%";
    }
    6% {
      content: "26%";
    }
    7% {
      content: "27%";
    }
    8% {
      content: "28%";
    }
    9% {
      content: "29%";
    }
    10% {
      content: "30%";
    }
    11% {
      content: "31%";
    }
    12% {
      content: "32%";
    }
    13% {
      content: "33%";
    }
    14% {
      content: "34%";
    }
    15% {
      content: "35%";
    }
    16% {
      content: "36%";
    }
    17% {
      content: "37%";
    }
    18% {
      content: "38%";
    }
    19% {
      content: "39%";
    }
    20% {
      content: "40%";
    }
    21% {
      content: "41%";
    }
    22% {
      content: "42%";
    }
    23% {
      content: "43%";
    }
    24% {
      content: "44%";
    }
    25% {
      content: "45%";
    }
    26% {
      content: "46%";
    }
    27% {
      content: "47%";
    }
    28% {
      content: "48%";
    }
    29% {
      content: "49%";
    }
    30% {
      content: "50%";
    }
    31.5% {
      content: "51%";
    }
    33% {
      content: "52%";
    }
    34.5% {
      content: "53%";
    }
    36% {
      content: "54%";
    }
    37.5% {
      content: "55%";
    }
    39% {
      content: "56%";
    }
    40.5% {
      content: "57%";
    }
    42% {
      content: "58%";
    }
    43.5% {
      content: "59%";
    }
    45% {
      content: "60%";
    }
    46.5% {
      content: "61%";
    }
    48% {
      content: "62%";
    }
    49.5% {
      content: "63%";
    }
    51% {
      content: "64%";
    }
    52.5% {
      content: "65%";
    }
    54% {
      content: "66%";
    }
    55.5% {
      content: "67%";
    }
    57% {
      content: "68%";
    }
    58.5% {
      content: "69%";
    }
    60% {
      content: "70%";
    }
    61.5% {
      content: "71%";
    }
    63% {
      content: "72%";
    }
    64.5% {
      content: "73%";
    }
    66% {
      content: "74%";
    }
    67.5% {
      content: "75%";
    }
    69% {
      content: "76%";
    }
    71% {
      content: "77%";
    }
    73% {
      content: "78%";
    }
    75% {
      content: "79%";
    }
    77% {
      content: "80%";
    }
    79% {
      content: "81%";
    }
    81% {
      content: "82%";
    }
    83% {
      content: "83%";
    }
    85% {
      content: "84%";
    }
    87% {
      content: "85%";
    }
    89% {
      content: "86%";
    }
    91% {
      content: "87%";
    }
    93% {
      content: "88%";
    }
    95% {
      content: "89%";
    }
    100% {
      content: "90%";
    }
}
@keyframes percentage-ok {
  0% {
    content: "90%";
  }
  10% {
    content: "91%";
  }
  20% {
    content: "92%";
  }
  30% {
    content: "93%";
  }
  40% {
    content: "94%";
  }
  50% {
    content: "95%";
  }
  60% {
    content: "96%";
  }
  70% {
    content: "97%";
  }
  80% {
    content: "98%";
  }
  90% {
    content: "99%";
  }
  100% {
    content: "100%";
  }
}


/******************/
/*** Scroll Bar ***/
/******************/

::-webkit-scrollbar {
    width: 10px;
  }

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--bck-scrollbar-thumb);
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background: var(--bck-scrollbar-track);
}



/*******************/
/*** SSH Listing ***/
/*******************/

.ssh-section {
    margin-top: 30px;
}
  
.ssh-section h3 {
    margin-bottom: 10px;
    font-size: 18px;
}
  
.ssh-section p {
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--text-color);
}
  
.ssh-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.ssh-key {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 12px 16px;
    width: calc(50% - 10px);
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s;
}

.ssh-key.active {
    background-color: #e8f6ef;
    border-color: #b0e2cc;
}

.ssh-key input[type="checkbox"] {
    margin-top: 5px;
}

.ssh-info {
    font-size: 14px;
    color: #333;
}

.ssh-info strong {
    display: block;
    margin-bottom: 5px;
}

.ssh-type {
    color: #2c8a76;
    font-weight: bold;
}

.ssh-fingerprint {
    font-size: 12px;
    color: #777;
}