@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
:root 

{
    --gris : #808080;

}
    /* body{
        background-color: black;
        color: whitesmoke;
 
    } */
 
@media screen and (max-width: 1000px) 
{
    /* body{
        font-size:4vw;
 
    } */
    nav {
        font-size:4vw !important;;
    }
    .dropdown-item
    {
        font-size: 3vw !important;
    }
    .jtinitsection 
    {
        position:absolute;
        top:400px;
        width: 100%;
        visibility:hidden;
    }
    
    .jtinitsectionvisible 
    {
        position:absolute;
        top:400px;
        width: 100%;
        visibility:visible;
    }
    .jtinitsectionscrolled 
    {
        position:relative;
        top:800px;
        width: 100%;
        visibility:hidden;
    }
}
@media screen and (min-width: 1001px) 
{
    .jtinitsection 
    {
        position:absolute;
        top:80px;
        width: 100%;
        visibility:hidden;
    }
    .jtinitsectionvisible 
    {
        position:absolute;
        top:80px;
        width: 100%;
        visibility:visible;
    }
    .jtinitsectionscrolled 
    {
        position:relative;
        top:400px;
        width: 100%;
        visibility:hidden;
    }
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    
    opacity: 1;
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }



.titlesection
{
    font-family:  'Open Sans', sans-serif !important; 
    margin-left: auto;
    margin-right: auto;
    font-size: 3em;
    color:grey;
    text-align: center;
    height:2em;
    
} 
.titlesectionspanned
{
    font-family:  'Open Sans', sans-serif !important; 
    margin-left: auto;
    margin-right: auto;
    color:grey;
    text-align: center;
    height:2em;
    
} 

.infotext {
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: 400; 
    font-size: 14px;  
    padding: 10px;
    color:grey; 
}
table 
{
     /* font-family:  'Open Sans', sans-serif !important; 
    font-style: 'regular' !important;
    font-weight: 400 !important;
    font-size: 16px !important; */
    color:grey ;
    /* border-bottom : 1px solid grey; */

}

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}
tbody 
{
overflow:scroll;
}


th 
{
    text-align: left;
    padding: 8px;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: 400; 
    font-size: 14px;  
    background-color:grey ;
    color:white;  
    border : 1px solid grey ;
}
td,td.state-default 
{
    text-align: left;
    padding: 8px;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: 400; 
    font-size: 14px;  
    color:grey;  
    border : 1px solid grey;
    background-color: white !important
}
td.smallfont
{
    font-size: 0.8em; 
}
.smallfont
{
    font-size: 0.8em; 
}
td.state-highlight 
{
    text-align: left;
    padding: 8px;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: 400; 
    font-size: 14px;  
    color:grey;  
    border : 1px solid grey;
    background-color: gainsboro !important
}
td.state-dayon 
{
    text-align: left;
    padding: 8px;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: 400; 
    font-size: 14px;  
    color:grey;  
    border : 1px solid grey;
    background-color: white !important
}

.rouge 
{
    color:red;
}

.vert 
{
    color:green;
}


td.state-dayoff
{
    text-align: left;
    padding: 8px;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: 400; 
    font-size: 14px;  
    color:red !important;
    border : 1px solid grey;
    background-color: white !important
}

footer {
    position: fixed;
    height: 60px;
    bottom: 0;
    width: 100%;
    color:#f8f9fa;
    background-color: #f8f9fa;
}

td.state-todelete 
{
    text-align: left;
    padding: 8px;
    font-family:  'Open Sans', sans-serif;;  
    font-style: italic; 
    font-weight: 400; 
    font-size: 14px;  
    color:grey;  
    border : 1px solid grey;
    background-color: gainsboro !important
}


tbody, thead tr 
{
  display: table;
  width: 100%;
  table-layout: fixed;
}

.mobiletitle{
    text-align: center;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: 400; 
    font-size: 3.0em;  

}

.texttitlebold{
    text-align: center;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: normal; 
    color:black;
    font-size: 2.2em;  

}

td.texttitleboldred{
    text-align: left;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: normal; 
    color:red;
    font-size: 2.2em;  

}
td.texttitleboldgreen{
    text-align: left;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: normal; 
    color:rgb(3, 163, 3);
    font-size: 2.2em;  

}
.texttitle{
    text-align: center;
    font-family:  'Open Sans', sans-serif;;  
    font-style: normal; 
    font-weight: normal; 
    color:black;
    font-size: 2.2em;  

}

td.noborder 
{
    border-bottom: none;

    border : none;
}

.event-title:hover
{
    color:black;
}
.event-info:hover
{
    color:black;
}

.s24percent{
    width: 100%;
}

#qrcode {
    width:160px;
    height:160px;
    margin-top:15px;
  }
  
  @page { 
    /* size: 10cm 10cm;
    margin: 0;   */
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

}
  
@media print {
    body * {visibility:hidden;}
    .print-qrcode, .print-qrcode, #articleqrbody, #qrtobeprintedplease * {visibility: visible;}
    header,footer { 
        display: none; 
      }


    .print-qrcode {
        /* width: 8cm;
        height: 8cm; */
        padding: 1cm;
        left:0px;
        top:0px;
        /* margin: 0 auto;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        display: block; */
        
    }

    .page {
        width: 21cm;
        min-height: 29.7cm;
        padding: 1cm;
        margin: 0 auto;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        display: block;
        visibility: visible;
 		
    }
    .subpage {
        width: 18cm;
        min-height: 25cm;
        padding: 1cm;
        margin: 0 auto;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        display: block;
        visibility: visible;
    }

    .noborder {
        border :none;
    }
    .font14em
    {
        font-size: 1.4em;
    }

}
/* state-default 
{ 
    background-color: white !important;
}

state-highlight 
{
    background-color: grey !important;
} */
.btn-secondary 
		{
			background-color: grey;
        }
        
.mobiletextmodalnormal        
{
    font-size:1.5em;
}

.mobiletextmodalbold        
{
    font-size:1.5em;
    font-weight: 400;
}

.mobiletextmodalboldnoborder        
{
    font-size:2.5em;
    font-weight: 600;
    border:none;
}

.largecenteredtext        
{
    font-size:2.0em !important;
    font-weight: 400 !important;
}
.scale2x
{
    transform: scale(3);
    /* margin-top: 50% !important; */
}
.scalex
{
    transform: scale(1.5);
    /* padding-top: 50%; */
    /* left: 35% !important; */
    /* float: left; */

}

.csssignature {
    height:200px;
    width:100%;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}


.imgcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    height: 40%;

  }

  .modal { overflow: auto !important; }

  .buttonposition 
  {
    bottom: 2% !important;
    height: 100%; 
  }