/* ________ Mettre reset  css ____*/



/* ______________________________________________________________

by Erreur32 for OGSpsy
______________________________________________________________ */


/* ______________________________________________________________

partie Legacy
______________________________________________________________ */



img {
    border: 0;
}

p table {
    border: 0;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
}

p td {
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
}


table table {
    /* fond global des zones descriptifs et temps recherche, construction  et de la barre des ressources en haut au milieu */
    border: 0;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
}

table table td {
    /* police de la zone donnant les ressources sur chaque planète en haut au milieu */
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #00ff0d;
}

body {
    /* allg font etc. */
    /* option du fond et générales */
    color: #e4e4e4;
    margin-top: 0;
    margin-left: 0;
    background: #000 url("fond_1.jpg") no-repeat fixed left top;
    background-size: cover;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 11px;
}

body.style {
    /* paramétrage barre de menu sur le côté */
    color: #e4e4e4;
    margin-top: 1px;
    margin-left: 1px;
    background: #000 url("img/pi2.png") no-repeat 14% 7%;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
    width: 172px;
}

body form table th table input {
    width: 60px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
}

td.a,
td.b,
td.c,
td.c_tech,
td.c_stats,
td.c_recherche,
td.c_user,
td.c_ogspy,
td.c_ogame,
td.c_batiments,
td.c_satellite,
td.c_defense,
td.c_classement_points,
td.c_classement_flotte,
td.c_classement_recherche,
td.f,
input,
select,
td.g,
td.h,
td.i,
td.j,
td.k,
td.l,
td.m,
td.n,
td.o,
td.q,
td.r,
td.v,
.style td,
textarea,
p td,
table.s th img {
    border: 1px #f0eced solid;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
}

th,
td.a,
td.c,
td.c_tech,
td.c_stats,
td.c_recherche,
td.c_user,
td.c_ogspy,
td.c_ogame,
td.c_batiments,
td.c_satellite,
td.c_defense,
td.c_classement_points,
td.c_classement_flotte,
td.c_classement_recherche,
td.f,
input,
select,
td.g,
td.h,
td.i,
td.j,
td.k,
td.m,
td.o,
td.q,
td.r,
td.v,
td.s,
.style td,
p td {
    background-color: transparent;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
}

td.b {
    /* modifie le fond message */
    background-color: #232e30;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding: 3px;
}

th {
    border: 1px solid #3f2158;
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    background: url("tableaux/th.png") repeat;
}

td.a {
    height: 37px;
    text-align: center;
}

td.c,
td.c_tech,
td.c_stats,
td.c_recherche,
td.c_user,
td.c_ogspy,
td.c_ogame,
td.c_batiments,
td.c_satellite,
td.c_defense,
td.c_classement_points,
td.c_classement_flotte,
td.c_classement_recherche {
    font-weight: bold;
    color: #fff;
    padding-left: 3px;
    height: 22px;
}

td.c {
    /* modifie la police des noms de catégorie dans le menu recherche et des titres de certaines pages barress.PNG */
    background: url("tableaux/td_c.png") repeat-y right;
}

td.c_tech {
    background: url("tableaux/td_tech.png") no-repeat right;
}

td.c_stats {
    background: url("tableaux/td_stats.png") no-repeat right;
}

td.c_recherche {
    background: url("tableaux/td_recherche.png") no-repeat right;
}

td.c_user {
    background: url("tableaux/td_utilisateur.png") no-repeat right;
}

td.c_ogspy {
    background: url("tableaux/td_ogspy.png") no-repeat right;
}

td.c_ogame {
    background: url("tableaux/td_ogame.png") no-repeat right;
}

td.c_batiments {
    background: url("tableaux/td_batiments.png") no-repeat right;
}

td.c_satellite {
    background: url("tableaux/td_satellite.png") no-repeat right;
}

td.c_defense {
    background: url("tableaux/td_defense.png") no-repeat right;
}

td.c_classement_points {
    background: url("tableaux/td_classement_points.png") no-repeat right;
}

td.c_classement_flotte {
    background: url("tableaux/td_classement_flotte.png") no-repeat right;
}

td.c_classement_recherche {
    background: url("tableaux/td_classement_recherche.png") no-repeat right;
}

td.f,
input,
select,
textarea {
    border: 1px solid #606060;
    color: #fff;
    background-color: #232425;
}

textarea {
    /* couleur du fond lorsque vous écrivez un message */
    width: 100%;
}

td.g {
    text-align: right;
    color: #b6c6e5;
}

td.h {
    text-align: center;
    color: #b6c6e5;
}

td.i {
    text-align: center;
    color: #000;
}

td.j {
    text-align: center;
    color: #b6c6e5;
}

td.k,
td.k input {
    /* berechne calculer? button  background-image: url("img/bl01.PNG"); */
    text-align: center;
    color: #fff;
    background: transparent url("img/barredroite.PNG") no-repeat;
}

td.l {
    /* police du texte de description des batiments, chantier spatial et recherche */
    color: #fff;
    vertical-align: top;
    padding: 0;
    background: #000 url("img/grandebarre.PNG") no-repeat;
}

td.m {
    text-align: right;
    width: 86px;
    color: #b6c6e5;
}

td.n {
    font-weight: bold;
    width: 88px;
    text-align: center;
    color: #b6c6e5;
}

td.o {
    text-align: center;
    color: #b6c6e5;
}

td.q {
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
    color: #b6c6e5;
}

td.r {
    text-align: right;
    color: #b6c6e5;
}

td.v {
    text-align: right;
    color: #b6c6e5;
    font-weight: bold;
}

td.s {
    color: #b6c6e5;
}

table.s th {
    border: 0;
}

table.s th img {
    width: 60px;
    height: 60px;
}

div.z {
    /* réglage du format auquel s'affiche le temps de recherche et construction des batiments */
    font-weight: bold;
    color: #ff6f3c;
}

a {
    /* paramétrage des liens 00C8FF */
    color: #5ccce8;
    text-decoration: none;
    font-weight: bold;
}

a.s {
    color: #fff;
}

a.t {
    color: #fff;
}

a:hover {
    /* Planet Title hover */
    font-weight: bold;
    color: #a8ff66;
    text-decoration: underline;
}

.style td {
    /* taille cases barres latérales */
    color: #8a4fff;
    border-top: 0;
    font-size: 11px;
    font-family: Tahoma, sans-serif;
}

.style td:hover {
    /* taille cases barres latérales */
    background-image: url("img/Mod01.jpg");
    border-top: 0;
    font-size: 11px;
    font-family: Tahoma, Ringbearer, sans-serif;
}

.style div a {
    height: 100%;
    width: 100%;
    font-size: 11px;
}

.style div a:link {
    /* police lien internes dans les menus, tous sauf aide et forum */
    height: 100%;
    width: 100%;
    color: #fff;
    font-size: 11px;
}

.style div a:visited {
    /* barre de menu lien forum et aide */
    height: 100%;
    width: 100%;
    color: #fff;
    font-size: 11px;
}

.style div a:hover {
    /* barre de menu quand on est sur le lien */
    background-color: transparent;
    height: 100%;
    width: 100%;
    text-decoration: none;
    font-size: 11px;
    color: #fff;
}

.style {
    /* navigation */
    margin-top: 5px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
}

h1 {
    /* titre (fenêtre batiments et recherche) */
    font-size: 12px;
    border-bottom: 0 #2c2c2c solid;
    width: 98%;
    text-align: right;
    font-weight: bold;
    color: #cc0;
}


/* menu legacy a supp*/
a.menu {
    background-image: url("menu/menu_title.png");
    background-repeat: no-repeat;
    margin-top: 7px;
    margin-bottom: 14px;
    display: block;
    text-align: center;
}

a.menu:hover {
    color: #26f33d;
}

a.menu_items,
p.menu_items {
    display: block;
    color: #fff;
    font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
    font-kerning: auto;
    font-style: normal;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.5em;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    word-spacing: 0;
}

a.menu_items:hover {
    color: lightseagreen;
}

a.menu1 {
    background-image: url("menu/profil0.png");
    display: block;
}

a.menu1:hover {
    background-image: url("menu/profil1.png");
    color: #26f33d;
}

ul.menu_mods {
    padding-left: 0;
}

a.menu_mods {
    color: #26f33d;
    text-decoration: none;
    text-align: left;
}

ul.a.menu_mods:hover {
    color: #56f39f;
    text-decoration: none;
}

center {
    color: #ecff00;
}

ul.menu {
    list-style-image: url('./menu/list.png');
    color: grey;
    text-align: left;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    display: block;
    padding-left: 20px;
}

ul.menu.a.hover {
    color: #56f39f;
    text-decoration: none;
}

/* Fin menu legacy a supp*/
#pwdchange {
    color: red;
    background-color: black;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

/* ______________________________________________________________

Resdesign
______________________________________________________________ */


/* _____ Centre les tables dans le content - Compatibilité ___________________ */
#content table {
    margin: auto;
}

#content {
    width: auto;
    padding-left: 20px;
    padding-right: 20px
}

/* _____ fin Centre les tables dans le content  ___________________ */



/* suppressio header + menu horizontal */

/* Variable */
:root {
    /* body */
    --color-body-background: Black;
    --img-body-background: url("img/pic2.png");
    --color-text: white;

    /* global */
    --color-button-color: #ffffff;
    --color-button-background: #000000;
    --color-button-border: grey;
    --color-button-hover: rgb(40, 40, 40);


    --color-warning: #d9480f;
    --color-warning-lighten: #ffe8cc;
    --color-success: #2b8a3e;
    --color-success-lighten: #d3f9d8;
    --color-danger: #ee0909;
    --color-danger-lighten: #ffe3e3;

    --color-highlight: #ecff00;
    --color-highlight-lighten: #feffeb;



    /* navbarmenu */
    --color-navbarmenu-backgroung: black;
    --color-navbarmenu-link: #26f33d;
    /*  https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991*/
    /*  https://codepen.io/sosuke/pen/Pjoqqp */
    --color-navbarmenu-link-iconfilter: invert(75%) sepia(66%) saturate(3369%) hue-rotate(75deg) brightness(109%) contrast(95%);
    --color-navbarmenu-link-hover: greenyellow;


    /* nav-pagemenu */
    --color-navpagemenu-link: #C7569D;
    --color-navpagemenu-background: rgba(0, 0, 0, 0.7);
    --color-navpagemenu-background-active: rgba(0, 0, 0, 0.9);
    --color-navpagemenu-background-hover: rgba(0, 0, 0, 0.8);

    /*table*/
    --color-table-color: --color-text;
    --color-table-color-tdstat: #3EBAFD;
    --color-table-color-tdname: #3EBAFD;
    --color-table-border: rgba(255, 255, 255, 0.1);
    --color-table-border-head: white;
    --color-table-background: #272727;
    --color-table-background-hover: #191919;
    --color-table-background-head: black;

    /*table galaxie*/
    --color-table-galaxie-hided: black;


    /* icon */
    /*  https://www.iconfinder.com */
    --icon-account: url("icon/icon_account.svg");
    --icon-space: url("icon/icon_space.svg");
    --icon-addon: url("icon/icon_addon.svg");
    --icon-link: url("icon/icon_link.svg");

    --icon-moon: url("icon/icon-moon.svg");
    --icon-phalanx: url("icon/icon-phalanx.svg");
    --icon-gate: url("icon/icon-gate.svg");
}

/* grille principale */

body {
    background-color: var(--color-body-background);
    background-image: var(--img-body-background);
    background-size: cover;
    background-repeat: repeat;

    width: 100vw;
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: grid;


    grid-template-rows: 80px 1fr 30px;
    grid-template-columns: 1fr;
    grid-template-areas: "navbar" "content" "footer";


    color: var(--color-text);
    margin-top: 0;
    margin-left: 0;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 11px;
}

#navbar {
    grid-area: navbar;
}

#content {
    grid-area: content;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 10px;
    margin-bottom: 2px;

}

#barre {
    grid-area: footer;
    /* design actuel dans partie legacy */
}

header {
    /* Non visible */
    display: none;
    /* si affichage  visible 
    a ajouter dans la grille principale
    */
    grid-area: header;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 2px;

    text-align: center;
}

/* fin grille*/



/* fin grille*/



nav#navbar {
    display: flex;
    flex-direction: row;
    /* background: linear-gradient(to bottom, rgba(0,0,0,8) 0%, rgba(0,0,0,0.7) 85%, rgba(0,0,0,0) 100%);*/
    background: var(--color-navbarmenu-backgroung);

    padding-left: 10px;
    padding-right: 10px;
}

nav#navbar #menu_offline {
    padding-bottom: 10px;
    padding-top: 10px;
    color: var(--color-warning);
    text-align: center;
    font-size: 16px;
    animation: blink 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;
}

/* permet clignotement*/
@keyframes blink {
    to {
        opacity: 0;
    }
}


nav#navbar #menu_timer {

    text-align: left;
    background-position: top left;
    background-size: 200px 50px;
    background-image: url("menu/menu_title.png");
    background-repeat: no-repeat;

    padding: 0px;
    padding-left: 20px;
    padding-top: 55px;

    font-size: 12px;
    width: 200px;
    height: 20px;
}

/* Menu*/
#menu_navigate_id {
    margin-top: 0;
    z-index: 1000;
    width: 100%;
    position: relative;
    left: -110px;

}

#menu_navigate_id ul {
    margin: 0px;
    padding: 10px;

    list-style: none;
    text-transform: uppercase;
    font-weight: bold;

    display: flex;
    flex-direction: row;
    justify-content: center;
}

#menu_navigate_id ul li {
    margin: 0px 10px;
    padding: 0px;
    list-style: none;
}

#menu_navigate_id ul.menu_navigate li a {
    display: block;
    color: var(--color-text);
    transition: background-color 0.5s;
    font-size: 18px;
    text-align: center;
    padding: 10px 8px;
}


#menu_navigate_id ul.menu_navigate li a:hover {
    color: var(--color-navbarmenu-link);
    text-decoration: none;
    /*background: rgba(0,0,0,0.7);*/
}

#menu_navigate_id ul.menu_navigate li a:hover {
    position: relative;
}

/*  icon*/

a span.menuitem-user-grp_icon {
    background-image: var(--icon-account);
}

a span.menuitem-ogspy-grp_icon {
    background-image: var(--icon-space);
}

a span.menuitem-mod_icon {
    background-image: var(--icon-addon);
}

a span.menuitem-about-grp_icon {
    background-image: var(--icon-link);
}

#menu_navigate_id ul.menu_navigate li a:hover span.icon-ogspy {
    filter: var(--color-navbarmenu-link-iconfilter);


}


#menu_navigate_id ul.menu_navigate li a span.icon-ogspy {
    padding-left: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    filter: invert(100%);
}

/* fin icon*/


/* sous menu */
#menu_navigate_id li:hover>.sub_menu_navigate {
    display: flex;
}

#menu_navigate_id ul li .sub_menu_navigate {
    text-decoration: none;
    text-transform: capitalize;
    list-style: none;
    display: none;
    flex-flow: column wrap;
    width: 200px;
    position: absolute;
    background: var(--color-navbarmenu-backgroung);
    padding-left: 10px;
}

#menu_navigate_id ul li .sub_menu_navigate li:first-child {
    margin-top: 0px;
    margin-left: 10px;
}

#menu_navigate_id ul li .sub_menu_navigate li:last-child {
    margin-bottom: 25px;
}

#menu_navigate_id ul.menu_navigate li .sub_menu_navigate li a {
    color: var(--color-navbarmenu-link);
    text-align: left;
    font-size: 12px;
}

#menu_navigate_id ul.menu_navigate li .sub_menu_navigate li a:hover {
    color: var(--color-navbarmenu-link-hover);
}

/* decallage pour su menu mod */
#menu_navigate_id ul li.menuitem-mod .sub_menu_navigate {
    position: absolute;

}

#menu_navigate_id ul li.menuitem-mod .sub_menu_navigate_admin {
    left: 220px;
    position: relative;
}

/* decallage pour su menu mod */
#menu_navigate_id ul li .sub_menu_navigate a {
    margin: 0px;
    padding: 5px 0px;
}

#menu_navigate_id ul li .sub_menu_navigate a:hover {
    width: 100%;
}


/* fin sous menu*/
/* fin  menu*/

/* menu dans la page */
.nav-page-menu {
    display: flex;
    background-color: var(--color-navpagemenu-background);
    perspective: 1000px;
    font-size: 14px;
    margin-bottom: 20px;
}

.nav-page-menu-item {
    position: relative;
    flex: 1;
}

.nav-page-menu-link {
    display: block;
    padding: 10px 0;
    text-align: center;
    color: var(--color-text);
    text-decoration: none;

}

.nav-page-menu-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;

    transition: color ease 0.3s;

}

.nav-page-menu-item:hover::before {
    height: 3px;
    background-color: var(--color-navpagemenu-link);

}

.nav-page-menu .active::before {
    background-color: var(--color-navpagemenu-link);
}


.nav-page-menu .active a {
    background-color: var(--color-navpagemenu-background-active);
    color: var(--color-navpagemenu-link);
}

.nav-page-menu-item:hover {
    background-color: var(--color-navpagemenu-background-hover);

}

.nav-page-menu-item:hover a {
    color: var(--color-navpagemenu-link);
    text-decoration: none;
}

.nav-page-menu-item-nolink a {
    cursor: not-allowed;
}

/*fin menu dans la page

/*pied de page  */
footer#barre {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    height: 30px;
    background: linear-gradient(rgba(0, 0, 0,0.0), rgba(0, 0, 0, 0.8));
    display: flex;
    

}

footer#barre .footerbarre-version {
flex-grow: 0;
text-align: left;
padding-left: 2em;
padding-top: 15px;
}
footer#barre .footerbarre-countuser {
    padding-top: 15px;
    flex-grow: 1;
    text-align: center;

}
footer#barre .footerbarre-bench {
    padding-top: 15px;
    flex-grow: 0;
    text-align: right;
    padding-right: 2em;
}




/* fin pied de page  */

/* TABLE */
/* petit reset */
table.og-table thead,
table.og-table th,
table.og-table td,
table.og-table tr {
    border: none;
    background: none;
    color: var(--color-table-color);
}

table.og-table {
    background-image: none;
    border: 1px solid var(--color-table-border);
    margin-bottom: 20px !important;
    border-spacing: 0;
}

table.og-medium-table {
    width: 900px;
}

table.og-little-table {
    width: 600px;
}

table.og-small-table {
    width: 400px;
}

table.og-mini-table {
    width: 200px;
}


table.og-full-table {
    width: 100%;
}

table.og-little-table td {
    height: 20px;
}

table.og-table thead {
    background-image: none;
    background-color: var(--color-table-background-head);
    font-size: 12px;
    border-collapse: separate;
}

table.og-table thead th {
    border: 1px solid var(--color-table-border-head);
    border-collapse: separate;
    height: 20px;
    text-align: left;
    padding-left: 16px;

}

table.og-table tbody {
    background-color: var(--color-table-background);
    font-size: 12px;

}

table.og-table tbody td {
    border-bottom: solid var(--color-table-border);
    border-bottom-width: 1px;
    border-spacing: 0;
    border-collapse: separate;

}

table.og-table tbody .tdstat {
    color: var(--color-table-color-tdstat);
    font-size: 12px;

}

table.og-table tbody .tdname {
    color: var(--color-table-color-tdstat);
    font-size: 12px;

}

table.og-table tbody .tdvalue {
    text-align: left;
    padding-left: 10px;
    font-size: 12px;
}

table.og-table tbody .tdcontent {
    font-size: 12px;
    color: var(--color-text);
}

table.og-table tbody td.og-highlight {
    color: var(--color-highlight);
    background-color: var(--color-table-background-hover);

}


table.og-table tbody tr .tdstat:hover,
table.og-table tbody tr .tdvalue:hover {
    background-color: var(--color-table-background-hover);
}

table.og-table tbody tr {
    height: 15px;
}

table.og-table tbody td {

    text-align: center;
}

table.og-table tbody td {

    text-align: center;
}

table.og-table thead tr th.og-legend,
table.og-table thead tr td.og-legend {
    text-align: center;
}








/*fin TABLE */


.og-alert {
    color: var(--color-danger);
}

.og-warning {
    color: var(--color-warning);
}

.og-success {
    color: var(--color-success);
}

.og-highlight {
    color: var(--color-highlight);
}



/*fin bouton */
.og-button {
    color: var(--color-button-color);
    background-color: var(--color-button-background);
    font-size: 14px;
    border: 1px solid var(--color-button-border);
    border-radius: 4px;
    padding: 5px 15px;
    cursor: pointer;
    margin: 10px 0px;

}

.og-button:hover {
    color: #f7f9fd;
    color: var(--color-button-border);
    background-color: var(--color-button-hover);
    border: 1px solid var(--color-button-color);
}

.og-button-image {
    width: 13px;
    height: 13px;
    padding: 3px 3px;
    margin: auto;
}

.og-button-image-large {
    width: 22px;
    height: 22px;
}


.og-button-warning {
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}

.og-button-warning:hover {
    color: var(--color-warning-lighten);
    border: 1px solid var(--color-warning-lighten);
}

.og-button-success {
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.og-button-success:hover {
    color: var(--color-success-lighten);
    border: 1px solid var(--color-success-lighten);
}

.og-button-danger {
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

.og-button-danger:hover {
    color: var(--color-danger-lighten);
    border: 1px solid var(--color-danger-lighten);
}

.og-button-little {
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 4px;
    cursor: pointer;
    margin: 2px 0px;

}

/*fin bouton */

/* messagebox */
.og-msg {
    border: 1px solid var(--color-button-border);
    border-left: 10px solid var(--color-button-border);
    background-color: var(--color-navpagemenu-background);
    width: 600px;
    padding: 16px;
    margin: 20px auto;
    max-width: 90%;
    border-radius: 8px;

}

.og-msg h3.og-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
}

.og-msg p.og-content {
    margin: 0;
    font-size: 14px;
}

.og-msg button.og-button {
    display: block;
    margin-right: 10px;
    margin-left: auto;
}

.og-msg-warning {
    background-color: var(--color-warning-lighten);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.og-msg-warning button.og-button {
    background-color: var(--color-warning-lighten);
}

.og-msg-warning button.og-button:hover {
    background-color: var(--color-warning);
}

.og-msg-danger {
    background-color: var(--color-danger-lighten);
    border-color: var(--color-danger);
    color: var(--color-danger);
}


.og-msg-danger button.og-button {
    background-color: var(--color-danger-lighten);
}

.og-msg-danger button.og-button:hover {
    background-color: var(--color-danger);
}

.og-msg-success {
    background-color: var(--color-success-lighten);
    border-color: var(--color-success);
    color: var(--color-success);
}

.og-msg-success button.og-button {
    background-color: var(--color-success-lighten);
}

.og-msg-success button.og-button:hover {
    background-color: var(--color-success);
}


/*login*/

.login_panel {
    background-color: rgba(0, 0, 0, 0.85);
    background-color: var(--color-navpagemenu-background);
    width: 500px;
    margin: 20px auto;
    text-align: center;
    border-radius: 4px;

}

.og-login-header h2 {
    text-transform: uppercase;
    margin-bottom: 30px;
    margin-top: 30px;

}

.og-login-group {
    font-size: 14px;
    padding-right: 50px;
    padding-left: 50px;
    margin-top: 30px;
}


.og-login-group label {

    text-align: left;
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;


}

.og-login-group input {
    display: inline-block;
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--color-text);
    border-radius: 0;
    box-shadow: none;
    height: 15px;
    margin-bottom: 15px;

}

.og-login-group p {
    text-align: left;

}

.login_panel hr {
    color: var(--color-text);
    margin-left: 30%;
    margin-right: 30%;

}

/* ranking */

table.og-table-ranking tr:hover td {
    background-color: var(--color-table-background-hover);
}

table.og-table-ranking tr td .ranking-subrank-number {
    display: inline-block;
    color: var(--color-highlight);
    padding-top: 4px;
    padding-bottom: 4px;
}

table.og-table-ranking tr th.active-rank {
    text-align: center;
    padding-left: 0px;
    font-size: 12px;
}

table.og-table-ranking tr th.active-rank img {
    padding-left: 2px;
    padding-right: 2px;
}

table.og-table-ranking tr td.active-rank {
    background-color: var(--color-table-background-hover);
}


/* ranking */
table.og-table-empire tbody tr:hover td {
    background-color: var(--color-table-background-hover);

}

/* page cartography */

.og-table-cartography {
    white-space: nowrap;
}

.og-table-cartography tbody tr td {
    border: solid var(--color-table-border);
    border-width: 1px;
    width: 20px;
}
.og-table-cartography tbody tr td.td3{
    border-right: solid  var(--color-table-background-hover);
}
.og-table-cartography tbody tr td:first-child{
    border-left: solid  var(--color-table-background-hover);
}

.og-table-cartography tbody tr:hover td{
    background-color: var(--color-table-background-hover);
}


/* fin page cartography */


/* page about */
h2.page_about_h2 {
    color: var(--color-navpagemenu-link);
    text-align: center;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: 10%;
    margin-right: 10%;
    justify-content: center;

    
  }
  .card { 
    background-color: rgba(0,0,0,0.4);
    flex: 0 0 200px;
    margin: 10px 20px;
    border: 2px solid #ccc;
    padding: 5px;
  } 
  .card img {
    width: 100%;

  }
  .card .text {
    padding: 0 20px 20px;
  }

/* fin page about */





/* page galaxie */



.page_galaxy select {
    margin-top: 3px;
    margin-bottom: 3px;
    height: 30px;
    margin-right: 40%;
}

.page_galaxy input {
    margin-top: 3px;
    margin-bottom: 3px;
    height: 25px;
}

.page_galaxy table tr {
    height: 30px;
}

.page_galaxy table tr.empty .tdcontent {
    color: rgba(0, 0, 0, 0.0);
}

.page_galaxy table .tdcontent {
    height: 25px;
}


table.og-table thead tr td {

    text-align: right;
}

.page_galaxy .og-button {
    margin: 3px 3px;
    ;
}

table.og-table-galaxy tbody .tr-isallied {
    /* si allie clignotement*/
    animation: blink 0.9s cubic-bezier(1, 0, 0, 1) infinite alternate;
}


table.og-table-galaxy tbody .tr-ishided .tdcontent,
table.og-table-galaxy tbody .tr-ishided .tdcontent a {
    /* si caché */
    color: var(--color-table-galaxie-hided) !important;
}

/* fin page rc */
.page_report_rc{
    text-align: center;
}


/* OGAME ELEMENT*/
.ogame-icon {
    align-content: center;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding-top: 4px;
}


.ogame-icon-gate {
    background-image: var(--icon-gate);
}

.ogame-icon-moon {
    background-image: var(--icon-moon);
}

.ogame-icon-phalanx {
    background-image: var(--icon-phalanx);
}



.ogame-status-I,
.ogame-status-i {
    /* i et I identique  */
    color: gray;
}

.ogame-status-v {
    color: #0044ff;
}

.ogame-status-a {
    color: red;
}

.ogame-status-d {
    color: #C7569D;
}

.ogame-status-o {
    color: #10e972;
}

.ogame-status-b {
    color: #d1d129
}

/* todo ogame-status-x */
/* Different status dans BDD*/
/* 
a
I
vI
v
o
vib
vb
vbo
Ib
vo
io
*/

/* PARTIE MOD */
.ogspy-mod-header{
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: center;
    background: linear-gradient(to right, rgba(0,0,0,0) 30%,var(--color-navpagemenu-background-active) 50%,rgba(0,0,0,0) 70%);
    margin-bottom: 5px;;
 /*   background-color: var(--color-navpagemenu-background-active) ;*/
}

.ogspy-mod-header h2 ,.ogame-mod-header h1   {
    color: var(--color-navpagemenu-link);
}
.ogspy-mod-footer     {
    position: fixed; 
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

}




/* test ecran plus petit */


@media(max-width: 950px) {
    #menu_navigate_id {
        position: relative;
        left: 0px;
    }



    #menu_navigate_id ul {
        justify-content: left;
    }

    #menu_navigate_id ul.menu_navigate li a {
        font-size: 13px;
        padding-left: 2px;
        padding-right: 2px;
        padding-top: 20px;
    }

    #menu_navigate_id ul.menu_navigate li .sub_menu_navigate li a {
        padding-top: 0px;
        font-size: 11px;
    }

    #menu_navigate_id ul li .sub_menu_navigate li:first-child {
        margin-top: 10px;

    }

    /* menu dans la page */
    .nav-page-menu {

        font-size: 12px;

    }

    /*pied de page  */
footer#barre .notviewlittle{
    display: none;
    
    }
    
    
    /* fin pied de page  */

    
/* page about */
.cards {
    margin-left: 10px;
    margin-right: 10px;
     }
  .card { 
    flex: 0 0 300px;
    margin: 10px 10px;
  } 

/* fin page about */






    /* table */
    table.og-medium-table {
        width: 600px;
    }

    /* ranking*/
    table.og-table-ranking tr td .ranking-subrank-number {
        display: none;
    }

    table.og-table-ranking tbody {
        font-size: 10px;
    }

    table.og-table-ranking thead {
        font-size: 11px;
    }

    table.og-table-ranking tr th.active-rank {
        font-size: 11px;
    }

    table.og-table-ranking tr th.active-rank img {
        padding-left: 1px;
        padding-right: 1px;
    }

    /* ranking */

    table.og-table-empire tbody tr td input {
        vertical-align: middle;
        display: inline-block;
        margin-left: 50%;
        margin-right: 50%;
    }


    /* vue galaxie */
    table.og-table-galaxy .og-galaxy-poster {
        display: none;
    }




}

@media(max-width: 700px) {
    body {
        grid-template-rows: 40px 1fr 30px;
    }

    #content {
        padding-left: 2px;
        padding-right: 2px
    }



    nav#navbar #menu_timer {
        display: none;
    }

    #menu_navigate_id ul.menu_navigate li a {
        font-size: 13px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
    }

    #menu_navigate_id ul li.menuitem-mod .sub_menu_navigate {
        position: absolute;
        left: 0px;
    }

    #menu_navigate_id ul li.menuitem-mod .sub_menu_navigate_admin {
        left: 220px;
        position: absolute;
    }

    .og-msg {
        width: 90%;

    }

    /* ranking*/
    table.og-table-ranking td,
    table.og-table-ranking thead th {
        padding: 0px;
    }



}