html {
    font-size: 62.5%;
    background-color: #EE7D11;
    box-shadow: #F9F9F9;
   
}

hr {
    bottom: 200px;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end:auto;
}



p {
    color: #F9F9F9;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}


h1 {
    text-decoration: underline;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 70px;
    color: #F9F9F9;
    font-family: 'Open Sans', sans-serif;
   font-weight: 800; 
   margin-bottom: 20px;
}

#action_bis {
    min-height: 30px;
    text-align: center;
    clear: both;
}

#action {
    background: #EE7D11;
}

div#action button, div#action_bis button {
    height: 70px;
    width: 97%;
    color: #cf6118;
    cursor: pointer;
    border-width: 8px;
    border-radius: 30px;
    border-style: outset;
    border-color: #e0e0e0;
    margin: 0 auto;
    color: rgb(93, 154, 224);
    font-weight: bold;
    background: #f1a5bc;
}

#message {
    width: 97%;
    margin: 0 auto 10px auto;
    color: #F9F9F9;

}

#message .content {
    width: 100%;
    height: 200px;
}


div#action_bis span {
    text-align: center;
    padding-top: 5px;
    font-style: italic;
    color: #666666;
}

h2 {
    text-align: center;
    font-size: 32px;
    font-size: 3.2rem;
    color: #F9F9F9;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800; 
    margin: 0;
    padding: 0; 
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

ul#list_room li {
    border: 1px solid black;
    padding: 5px;
    margin: 5px 0;
}

ul li a {
    display: block;
    font-size: 32px;
    font-size: 3.2rem;
}

ul#list_user {
    margin: 0 auto;
    width: 97%;
    border-top: 1px solid black;
}

ul#list_user li {
    color: black;
    border-color: black;
    border-style: solid;
    background-repeat: no-repeat;
    background-position-y: center;
    position: relative;
    background-color: #00000010;
    color: #666666;
    font-style: italic;
}

ul#list_user li.selected {
    color: #338c18;
    font-style: normal;
    background-color: #FFFFFF;
}

ul#list_user li.me {
}

ul#list_user li.desabled {
    color: #CCCCCC;
    font-style: italic;
    border-color: #888888;
    background: #EEEEEE;
    background-repeat: no-repeat;
    background-position-y: center;
}


ul#list_user li span.percent_say {
    display: block;
    position: absolute;
    bottom: 0px;
    right: 3px;
    background: #f17096;
}


ul#list_user li span.nb_say {
    display: block;
    width: 100%;
    position: absolute;
    text-align: right;
}


a#next, a#take {
    font-size: 32px;
    font-size: 3.2rem;
    text-transform: uppercase;
    border: 1px solid black;
    display: block;
    width: 97%;
    margin: 20px auto 50px auto;
    padding: 50px 0;
}

div.next {
    font-size: 32px;
    font-size: 3.2rem;
    padding: 0 0 0px 0;
    margin: 0;
}

div.pseudo {
    font-size: 32px;
    font-size: 3.2rem;
    border: 1px solid black;
    display: block;
    width: 97%;
    margin: 20px auto 50px auto;
    padding: 50px 0;
    text-align: center;
}

div.pseudo input {
    width: 80%;
    border: 1px solid black;
    height: 60px;
    text-align: center;
    margin: 30px 0 0 0;
}

table.wait,
table.say,
table.disactivated {
    width: 97%;
    margin: 0 auto;
    font-size: 32px;
    font-size: 3.2rem;
    text-align: center;
}


table.say {
    background: #338C1820;
    color: #338C18;
}

table.wait {
    background: #83838320;
    color: #666666;
}

table.wait span,
table.disactivated span {
    display: block;
    width: 100%;
}

div.add_room {
    text-align: center;
    font-size: 32px;
    font-size: 3.2rem;
    display: block;
    margin: 0 auto 50px auto;
    padding: 0;
}

div.add_room input {
    width: 80%;
    border: 1px solid black;
    height: 60px;
    text-align: center;
    margin: 0 0 0 0;
}

#admin {
    clear: both;
    font-size: 30px;
    font-size: 3.0rem;
    width: 97%;
    margin: 20px auto 0 auto;
}

#admin h1, h2 {
    margin: 0;
    padding: 0;
}

#admin #admin_list_content, #admin #admin_add_content {
    margin-top: 30px;
}

#admin_list_content div img {
    vertical-align: middle;
    cursor: pointer;
}

#admin_list_content .active_0 {
    color: #838383;
}

div#admin textarea {
    width: 100%;
    border: 1px solid black;
    height: 120px;
    text-align: center;
    font-size: 32px;
    font-size: 3.2rem;
    margin: 0;
}

.content {
    clear: both;
}

#show_stat,
#show_forecast {
    display: inline;
    cursor: pointer;
    padding-left: 36px;
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;
    color: blue;
    text-decoration: none;
}

#show_stat:hover,
#show_forecast:hover {
    text-decoration: underline;
}

#show_stat.yes,
#show_forecast.yes {
    background-image: url("../_img/32_eye_visible.png");
}

#show_stat.no,
#show_forecast.no {
    background-image: url("../_img/32_eye_hide.png");
}

div#stat {
    text-align: center;
}

div#stat table.stat {
    width: 97%;
    margin: 0 auto;
    border: 1px solid black;
}

div#stat table.stat th,
div#stat table.stat td {
    border: 1px solid black;
}

div#forecast p {
    margin: 0;
    padding: 0;
}

@media (min-width: 1081px)  {
    h1 {font-size: 56px; font-size: 5.6rem;}
    h2 {font-size: 48px; font-size: 4.8rem;}
    p, li, input, div {font-size: 24px; font-size: 2.4rem;}
    ul#list_room li {font-size: 16px; font-size: 1.6rem;}
    div.add_room input {font-size: 32px; font-size: 3.2rem;}

    ul#list_user li {
        font-size: 34px;
        font-size: 3.4rem;
        text-align: left;
        padding: 6px 0;
        border-color: grey;
        margin: 3px -1px;
        background-image: url("../_img/48_micro_close.png");
        background-position-x: 8px;
        width: 50%;
        border-width: 0 0 1px 0;
    }

    ul#list_user li.selected {background-image: url("../_img/48_micro_open.png");}
    ul#list_user li.desabled {background-image: url("../_img/48_micro_close.png");}

    ul#list_user li span.nb_say {letter-spacing: -7px; height: 90%; font-size: 60px ;font-size: 6.0rem;
        right: 40px;
        bottom: 14px;
    }

    ul#list_user li span.pseudo {padding-left: 50px;}
    ul#list_user li.left {float: left;}
    ul#list_user li.right {float: right;}
    ul#list_user li span.percent_say {width: 25px;}

    table.wait, table.say, table.disactivated { height: 180px; }
    table.disactivated { background: #EEEEEE; color: #AAAAAA; font-style: italic; }
    table.wait span, table.say span, table.disactivated span {font-size: 36px; font-size: 3.6rem; }

    #message .content {font-size: 24px; font-size: 2.4rem;}
    #nb_person {font-size: 20px; font-size: 2.0rem;}
    div#action button, div#action_bis button {font-size: 32px; font-size: 3.2rem;}
    div.pseudo input {font-size: 32px; font-size: 3.2rem;}
}

@media (min-width: 861px) and (max-width: 1080px) {
    h1 {font-size: 48px; font-size: 4.8rem;}
    h2 {font-size: 40px; font-size: 4.0rem;}
    p, li, input, div {font-size: 22px; font-size: 2.2rem;}
    ul#list_room li {font-size: 15px; font-size: 1.5rem;}
    div.add_room input {font-size: 30px; font-size: 3.0rem;}


    ul#list_user li {
        font-size: 28px;
        font-size: 2.8rem;
        text-align: left;
        padding: 3px 0;
        border-width: 0 0 1px 0;
        border-color: grey;
        margin: 3px 0;
        background-image: url("../_img/32_micro_close.png");
        background-position-x: 4px;
        width: 50%;
    }

    ul#list_user li.selected {background-image: url("../_img/32_micro_open.png");}
    ul#list_user li.desabled {background-image: url("../_img/32_micro_close.png");}

    ul#list_user li span.nb_say {letter-spacing: -7px; height: 90%; font-size: 48px ;font-size: 4.8rem;
        right: 40px;
        bottom: 14px;
    }

    ul#list_user li span.pseudo { padding-left: 50px;}
    ul#list_user li.left {float: left;}
    ul#list_user li.right {float: right;}
    ul#list_user li span.percent_say {width: 25px;}

    table.wait, table.say, table.disactivated { height: 180px; }
    table.disactivated { background: #EEEEEE; color: #AAAAAA; font-style: italic; }
    table.wait span, table.say span, table.disactivated span {font-size: 36px; font-size: 3.6rem; }

    #message .content {font-size: 20px; font-size: 2.0rem;}
    #nb_person {font-size: 18px; font-size: 1.8rem;}
    div#action button, div#action_bis button {font-size: 32px; font-size: 3.2rem;}
    div.pseudo input {font-size: 32px; font-size: 3.2rem;}
}

@media (min-width: 661px) and (max-width: 860px) {
    h1 {font-size: 40px; font-size: 4.0rem;}
    h2 {font-size: 32px; font-size: 3.2rem;}
    p, li, input, div {font-size: 20px; font-size: 2.0rem;}
    ul#list_room li {font-size: 14px; font-size: 1.4rem;}
    div.add_room input {font-size: 28px; font-size: 2.8rem;}


    ul#list_user li {
        font-size: 24px;
        font-size: 2.4rem;
        text-align: left;
        padding: 3px 0 3px 32px;
        border-width: 0 0 1px 0;
        border-color: grey;
        margin: 3px 0;
        background-image: url("../_img/32_micro_close.png");
        background-position-x: 4px;
    }

    ul#list_user li.selected {background-image: url("../_img/32_micro_open.png");}
    ul#list_user li.desabled {background-image: url("../_img/32_micro_close.png");}

    ul#list_user li span.nb_say {letter-spacing: -7px; height: 90%; font-size: 48px ;font-size: 4.8rem;
        right: 40px;
        bottom: 14px;
    }

    ul#list_user li span.percent_say {width: 25px;}

    table.wait, table.say, table.disactivated { height: 94px; }
    table.disactivated { background: #EEEEEE; color: #AAAAAA; font-style: italic; }
    table.wait span, table.say span, table.disactivated span {font-size: 16px; font-size: 1.6rem; }

    #message .content {font-size: 18px; font-size: 1.8rem;}
    #nb_person {font-size: 17px; font-size: 1.7rem;}
    div#action button, div#action_bis button {font-size: 32px; font-size: 3.2rem;}
    div.pseudo input {font-size: 30px; font-size: 3.0rem;}
}

@media (min-width: 461px) and (max-width: 660px) {
    h1 {font-size: 32px; font-size: 3.2rem;}
    h2 {font-size: 24px; font-size: 2.4rem;}
    p, li, input, div {font-size: 18px; font-size: 1.8rem;}
    ul#list_room li {font-size: 13px; font-size: 1.3rem;}
    div.add_room input {font-size: 26px; font-size: 2.6rem;}


    ul#list_user li {
        font-size: 20px;
        font-size: 2.0rem;
        text-align: left;
        padding: 3px 0 3px 16px;
        border-width: 0 0 1px 0;
        border-color: grey;
        margin: 3px 0;
        background-image: url("../_img/16_micro_close.png");
        background-position-x: 0px;
    }

    ul#list_user li.selected {background-image: url("../_img/16_micro_open.png");}
    ul#list_user li.desabled {background-image: url("../_img/16_micro_close.png");}

    ul#list_user li span.nb_say {letter-spacing: -5px; height: 90%; font-size: 36px ;font-size: 3.6rem; right: 32px; bottom: 11px;}

    ul#list_user li span.percent_say {width: 20px;}

    table.wait, table.say, table.disactivated { height: 94px; }
    table.disactivated { background: #EEEEEE; color: #AAAAAA; font-style: italic; }
    table.wait span, table.say span, table.disactivated span {font-size: 16px; font-size: 1.6rem; }

    #message .content {font-size: 16px; font-size: 1.6rem;}
    #nb_person {font-size: 16px; font-size: 1.6rem;}
    div#action button, div#action_bis button {font-size: 24px; font-size: 2.4rem;}
    div.pseudo input {font-size: 26px; font-size: 2.6rem;}
}

@media (min-width: 330px) and (max-width: 460px) {
    h1 {font-size: 28px; font-size: 2.8rem;}
    h2 {font-size: 22px; font-size: 2.2rem;}
    p, li, input, div {font-size: 16px; font-size: 1.6rem;}
    ul#list_room li {font-size: 12px; font-size: 1.2rem;}
    div.add_room input {font-size: 24px; font-size: 2.4rem;}


    ul#list_user li {
        font-size: 18px;
        font-size: 1.8rem;
        text-align: left;
        padding: 3px 0 3px 16px;
        border-width: 0 0 1px 0;
        border-color: grey;
        margin: 3px 0;
        background-image: url("../_img/16_micro_close.png");
        background-position-x: 0px;
    }

    ul#list_user li.selected {background-image: url("../_img/16_micro_open.png");}
    ul#list_user li.desabled {background-image: url("../_img/16_micro_close.png");}

    ul#list_user li span.nb_say {letter-spacing: -5px; height: 90%; font-size: 36px ;font-size: 3.6rem; right: 24px; bottom: 11px;}

    ul#list_user li span.percent_say {width: 10px;}

    table.wait, table.say, table.disactivated { height: 94px; }
    table.disactivated { background: #EEEEEE; color: #AAAAAA; font-style: italic; }
    table.wait span, table.say span, table.disactivated span {font-size: 16px; font-size: 1.6rem; }

    #message .content {font-size: 14px; font-size: 1.4rem;}
    #nb_person {font-size: 15px; font-size: 1.5rem;}
    div#action button, div#action_bis button {font-size: 22px; font-size: 2.2rem;}
    div.pseudo input {font-size: 24px; font-size: 2.4rem;}
}

@media (min-width: 0px) and (max-width: 329px) {
    h1 {font-size: 26px; font-size: 2.6rem;}
    h2 {font-size: 20px; font-size: 2.0rem;}
    p, li, input, div {font-size: 14px; font-size: 1.4rem;}
    ul#list_room li {font-size: 12px; font-size: 1.2rem;}
    div.add_room input {font-size: 22px; font-size: 2.2rem;}


    ul#list_user li {
        font-size: 16px;
        font-size: 1.6rem;
        text-align: left;
        padding: 3px 0 3px 16px;
        border-width: 0 0 1px 0;
        border-color: grey;
        margin: 3px 0;
        background-image: url("../_img/16_micro_close.png");
        background-position-x: 0px;
    }

    ul#list_user li.selected {background-image: url("../_img/16_micro_open.png");}
    ul#list_user li.desabled {background-image: url("../_img/16_micro_close.png");}

    ul#list_user li span.nb_say {letter-spacing: -5px; height: 90%; font-size: 36px ;font-size: 3.6rem; right: 24px; bottom: 11px;}

    ul#list_user li span.percent_say {width: 10px;}

    table.wait, table.say, table.disactivated { height: 94px; }
    table.disactivated { background: #EEEEEE; color: #AAAAAA; font-style: italic; }
    table.wait span, table.say span, table.disactivated span {font-size: 16px; font-size: 1.6rem; }

    #message .content {font-size: 13px; font-size: 1.3rem;}
    #nb_person {font-size: 14px; font-size: 1.4rem;}
    div#action button, div#action_bis button {font-size: 20px; font-size: 2.0rem;}
    div.pseudo input {font-size: 22px; font-size: 2.2rem;}
}