/* perso */

#masque
{
position:fixed;
background:rgba(0,0,0,0.8);
z-index:10000;
}

.masque
{
width:100vw;
height:100vh;
position:relative;
text-align:center;
}

.masque img
{
width:150px;
margin-top:40vh;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform:rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform:rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#mess_logo
{
padding:0;
margin:0;
top:0;
left:0;
position:fixed;
z-index:100;
overflow:auto;
width:100vw;
box-sizing:border-box
}

#content_log
{
width:100vw;
height:100vh;
background-image:url('log.jpg');
background-size:cover;
background-position:center
}

#log_box
{
transform:translate(-50%,-50%);
top:50vh;
left:50vw;
position:absolute;
}

#menu
{
position:fixed;
z-index:99;
top:0;
left:0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
background-color:#dedede;
width:100%;
}

#menu li
{
list-style-type:none
}

#c_menu
{
background-color:#404040;
vertical-align:top;
box-sizing:border-box;
}

#content
{
position:relative;
width:100vw;
z-index:90;
box-sizing:border-box;
overflow:auto;
height:100vh;
}

.file-upload {
position: relative;
overflow: hidden;
background-color:#00aeef;
border:0;
padding:0.5vh 0.25vw 0.5vh 0.25vw;
font-size:2vw;
color:white;
}

.file-upload input.file-input {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size:2vw;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}

#image_preview img
{
max-width:200px;
max-height:200px;
}

.image_preview img
{
max-width:200px;
max-height:200px;
}

.retour_bt
{
color:white;
background-color:#006db7
}

table
{
border-spacing : 0;
border-collapse : collapse;	
}

.round
{
border:1px solid #e2e2e2;
border-radius:10px;
padding:10px;
margin:0 auto 10px auto;
position:relative;
background-color:#fefefe;
}

.file-upload
{
width:10vw;	
}

h1:first-letter
{
color:#00aeef;
}

h1
{
color:#404040
}

#content div
{
background-color:#fefefe	
}

#content .tab
{
padding:0;
margin:0 25px 25px 0;
position:relative;
background-color:#fefefe;
border-radius:10px;
}

#content .bd
{
background-color:#00aeef;
border-top-right-radius:10px;
border-top-left-radius:10px;
border:1px solid #00aeef;
height:15px;
padding:0;
margin:0;
position:relative;
}

#content .ico-bd
{
position:absolute;	
height:17px;
width:20px;
top:-1px;
right:-1px;
border-top-right-radius:10px;
background-color:#3bc9ff;
cursor:pointer;
}

#content .ico-bd:hover
{
background-color:#9fe5ff;
}

#content .content_tab
{
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
padding:10px;
border:1px solid #cecece;
}

/* formulaires */
input, textarea, button, select
{
padding:5px;
font-size:12pt;
margin:15px 15px 15px 0;
max-width:80%;
}

#creer, .creer
{
background-color:#00aeef;
color:white;
}

.gris
{
background-color:#a5a5a5;
color:white;
}

.gris:hover
{
background-color:#d5d5d5;
color:white;
}

#creer:hover, .file-upload:hover, .creer:hover
{
background-color:#67d6ff;
}

.sup
{
background-color:#ff0000;
color:white;	
}

.sup:hover
{
background-color:#ff5a5a;
}

/* caisse */ 

#mess_logo_2
{
padding:0;
margin:0;
top:0;
left:0;
position:fixed;
z-index:100;
overflow:auto;
width:100%;
background-color:#404040
}

.bt_menu_c
{
max-width:initial;
margin:0 0 0 0;
}

.menu_c
{
display:none	
}

.menu_c_2
{
position:absolute;
top:0;
left:100%;
background-color:#f1f1f1;
display:block;
padding:10px;
}

#content_2
{
position:relative;
width:100vw;
z-index:90;
box-sizing:border-box;
overflow:auto;
height:100vh;
}

#content_2 .caisse_a
{
width:55%;
height:55%;
z-index:1;
box-sizing:border-box;
background-color:#00aeef;
}


.caisse_b
{
width:40%;
height:100%;
z-index:2;
box-sizing:border-box
}

#content_2 #total_a
{
position:absolute;
bottom:0;
left:0;
width:100%;
box-sizing:border-box;
padding:20px;
background-color:#404040;
width:100%;
color:white;
}

.action_b
{
max-width:0;
max-height:0;
overflow:hidden;
position:absolute;
border-radius:5px;
border:1px solid #d5d5d5;
}

.action_t
{
border:1px solid black;
border-radius:5px;
margin:10px;
padding:10px;
}

/* body/Cadre */

body {
font-size:10pt;
overflow:hidden;
}

/* box */

.x1 {
  width: 100%;
  box-sizing:border-box
}

.x75
{
  width: 75%;  
   box-sizing:border-box
}

.x2 {
  width: 50%;
    box-sizing:border-box
}

.x3 {
  width: 33.33%;
    box-sizing:border-box
}

.x4 {
  width: 25%;
    box-sizing:border-box
}

.x5 {
  width: 20%;
    box-sizing:border-box
}

.x6 {
  width: 16.665%;
    box-sizing:border-box
}

.x7 {
  width: 14.285%;
    box-sizing:border-box
}

.x8 {
  width: 12.5%;
    box-sizing:border-box
}

.x9 {
  width: 11.11%;
    box-sizing:border-box
}

.x10 {
  width: 10%;
    box-sizing:border-box
}

.x11 {
  width: 9.09%;
    box-sizing:border-box
}

.x12 {
  width: 8.33%;
    box-sizing:border-box
}

/* image */

.img100 {
  width: 100%;
  height: auto
}

.img80 {
  width: 80%;
  height: auto
}

.img50 {
  width: 50%;
  height: auto
}

.img25 {
  width: 25%;
  height: auto
}

.img33 {
  width: 33%;
  height: auto
}

.img125 {
  width: 12.5%;
  height: auto
}

.img10 {
  width: 10%;
  height: auto
}

/* width */

.w100 {
  width: 100%;
}

.w80 {
  width: 80%;
}

.w60 {
  width: 60%;
}

.w50 {
  width: 50%;
}

.w40 {
  width: 40%;
}

.w25 {
  width: 25%;
}

.w33 {
  width: 33%;
}

.w125 {
  width: 12.5%;
}

.w10 {
  width: 10%;
}

/* height */

.h100 {
  height: 100%;
}

.h80 {
  height: 80%;
}

.h50 {
  height: 50%;
}

.h25 {
  height: 25%;
}

.h33 {
  height: 33%;
}

.h125 {
  height: 12.5%;
}

.h10 {
  height: 10%;
}

/* padding */

.pad-h-100
{
padding-right:100px;
padding-left:100px;
}

.pad-h-80
{
padding-right:80px;
padding-left:80px;
}

.pad-h-50
{
padding-right:50px;
padding-left:50px;
}

.pad-h-20
{
padding-right:20px;
padding-left:20px;
}

.pad-h-15
{
padding-right:15px;
padding-left:15px;
}

.pad-h-10
{
padding-right:10px;
padding-left:10px;
}

.pad-h-5
{
padding-right:5px;
padding-left:5px;
}

.pad-v-100
{
padding-top:100px;
padding-bottom:100px;
}

.pad-v-80
{
padding-top:80px;
padding-bottom:80px;
}

.pad-v-50
{
padding-top:50px;
padding-bottom:50px;
}

.pad-v-20
{
padding-top:20px;
padding-bottom:20px;
}

.pad-v-15
{
padding-top:15px;
padding-bottom:15px;
}

.pad-v-10
{
padding-top:10px;
padding-bottom:10px;
}

.pad-v-5
{
padding-top:5px;
padding-bottom:5px;
}

.pad-100
{
padding:100px;
}

.pad-80
{
padding:80px;
}

.pad-50
{
padding:50px;
}

.pad-20
{
padding:20px;
}

.pad-15
{
padding:10px;
}

.pad-10
{
padding:10px;
}

.pad-5
{
padding:5px;
}

/* margin */

.marg-h-100
{
margin-right:100px;
margin-left:100px;
}

.marg-h-80
{
margin-right:80px;
margin-left:80px;
}

.marg-h-50
{
margin-right:50px;
margin-left:50px;
}

.marg-h-20
{
margin-right:20px;
margin-left:20px;
}

.marg-h-15
{
margin-right:15px;
margin-left:15px;
}

.marg-h-10
{
margin-right:10px;
margin-left:10px;
}

.marg-h-5
{
margin-right:5px;
margin-left:5px;
}


.marg-v-100
{
margin-top:100px;
margin-bottom:100px;
}

.marg-v-80
{
margin-top:80px;
margin-bottom:80px;
}

.marg-v-50
{
margin-top:50px;
margin-bottom:50px;
}

.marg-v-20
{
margin-top:20px;
margin-bottom:20px;
}

.marg-v-15
{
margin-top:15px;
margin-bottom:15px;
}

.marg-v-10
{
margin-top:10px;
margin-bottom:10px;
}

.marg-v-5
{
margin-top:5px;
margin-bottom:5px;
}

.marg-100
{
margin:100px;
}

.marg-80
{
margin:80px;
}

.marg-50
{
margin:50px;
}

.marg-20
{
margin:20px;
}

.marg-15
{
margin:15px;
}

.marg-10
{
margin:10px;
}

.marg-5
{
margin:5px;
}


/* icones */

.ico-5{
width:5px;
height:auto;
   display:block;
}

.ico-10{
width:10px;
height:auto;
 display:block;
}

.ico-20{
width:20px;
height:auto;
 display:block;
}

.ico-30{
width:30px;
height:auto;
   display:block;
}

.ico-40{
width:40px;
height:auto;
 display:block;
}

.ico-50{
width:50px;
height:auto;
   display:block;
}

.ico-75{
width:75px;
height:auto;
   display:block;
}

.ico-100{
width:100px;
height:auto;
   display:block;
}