/* CSS Document */


/* $$$$$$$$$$$$$$$$$$$  */
/* $$$  SQUELETTE  $$$  */
/* $$$$$$$$$$$$$$$$$$$  */


body {
    font-family: arial;
    font-size: 100%;
    margin:0;
    padding: 0;
    background-color: #eeeeee;
    color:black;
}

body * {
    margin:0;
    padding: 0;
}


div.app {
    display: grid;

    /* height: 100vmax; */
}

div.intro,
div.app, 
div#header_div, 
div#main_wrapper, 
div#footer, 
div#windowPopup   {
    max-width: 120vmin;
}


div#header_div {
    padding: 2vmin 3vmin;
    display: grid;
    grid: auto / 20vmin auto;
}

div#header_right {
    display: grid;
    grid: auto auto / auto;
}

div#header_right_up {
    display: grid;
    grid: auto / auto auto;
    justify-content: space-between;
}


div#ui_instructions {
    font-weight: bold;
    color: black;
    padding: 1vmin 3vmin;
    font-size:2.6vmin;
}


div#main_wrapper {
    display: grid;
    grid-template-rows: 16.5vmin auto auto auto auto auto auto;
    grid-template-columns: auto;
    grid-row-gap:4vh;
    padding: 4vh 3vmin 1vh 3vmin;
}

div#footer {
    height: 100%;
}



div#windowPopup {
  width: 100%; 
  height: 100%; 
}


div#popupContent p.exemples {
  font-weight: bold;

}

div#popupContent {
  width: 80%;

}

/* $$$$$$$$$$$$$$$$$$$  */
/* $$$$$  INTRO   $$$$  */
/* $$$$$$$$$$$$$$$$$$$  */

div.intro {
    text-align: center;
    display: grid;
  justify-content: center;
  align-items: center;
  height:   100vh;
}


div.intro * {
    margin: 2vh 0;
}


div.intro img#intro_logo {
    width: 39vmin;
    /* margin-top: 8vh; */
}

div.intro h1  {
    font-size: 9vmin;
    /* margin-top: 1vh; */
}


div.intro h2  {
font-size: 5vmin;
   /* margin-top: 2vh; */
}

div.intro img#intro_loading {
      width: 11vmin;    
      margin-top: 7vh; 
}



/* $$$$$$$$$$$$$$$$$$$  */
/* $$$$  HEADER   $$$$  */
/* $$$$$$$$$$$$$$$$$$$  */



img#logo {
    width:18vmin;
}
 

h1 {
    color: black;
    margin: 0;
    font-size: 10vmin;
}


h2 {
    margin: 0 0 1vmin 0;
    font-size: 3.8vmin;
    color: white;
}

h3, h4 {
    display:none;
}




h5 {
    font-size: 3.5vmin;
    font-weight: bold;
    margin: 3vmin 0 2vmin 0;
    border-bottom: 0.5vmin solid deeppink;
    color: deeppink;
}


h5#menu_parameters, h5#menu_informations {
    margin: 3vmin 0 4vmin 0;
}




#appmenu {
    font-size: 9vmin;
    font-weight: bold;
    color: white;
    text-align: right;
    line-height: 7vmin;
}


h2#menu-title {
    color: black;
    font-size: 6vmin;
    margin-bottom: 7vmin;
    padding: 1vmin;
    border-radius: 1vmin;
    border-width: 0.5vmin;
    border-style: solid;
}













/* $$$$$$$$$$$$$$$$$$$  */
/* $$$  FORMULAIRE $$$  */
/* $$$$$$$$$$$$$$$$$$$  */

div#main-wrapper {
    padding: 0 3vmin;
    display: grid;
    grid: auto auto auto auto auto auto/ auto;
    margin-top: 4vmin;
    grid-row-gap: 4vmin;
}

div.conteneur  {
    border-radius: 0 1vmin 1vmin 1vmin;
    border-width: 0.7vmin;
    border-style: solid;
    padding: 1.6vmin 1vmin 2vmin 1vmin;
    
}

div.conteneur, .fields  
{
    z-index: 8;
    position: relative;
}


div#clef {
    display: grid;
    justify-content: left;
    /*
    grid: 6vmin / auto auto;
    justify-content: center;
    padding-top: 2vmin;*/
    padding: 2vmin 2vmin 2vmin 3.5vmin;

}

span.asterix {
    color: red;
    font-weight: bold;
    font-size: 3.5vmin;
}


div#form_row_1 {
    display: grid;
    grid: auto / auto auto auto;
    grid-column-gap:4vmin;
    justify-content: normal;
}

div#cryptage, div#expiration_wrapper {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    justify-content: space-between;
    padding: 2vmin 1vmin 0vmin 2vmin;
    grid-row-gap: 1.0vmin;
}

div#cryptage div, div#expiration_wrapper div {
    display: grid;
    grid-template-columns: 4vmin auto;
    justify-content: left;
}

div#cryptage div * {
    text-wrap: nowrap;
    justify-self: baseline;
}




div#form_row_3 {
    display: grid;
    grid: auto / auto auto;
    grid-column-gap: 5vmin;
}






#inputLength, #outputLength, #server_time {
    font-size:3vmin;
}

#server_time {
    padding-left:3vmin;
}




#inputText, #outputText 
{
     width:100%;
     box-sizing: border-box;
     font-size: 3vmin;
     padding: 1vmin;
}




#inputText, 
#outputText, 
span.subtitles, 
div.conteneur, 
.buttons, 
#donate,
#popupContent

{
     box-shadow: 0.5vmin 0.5vmin 1.3vmin #555;
}

#outputText 
{
     margin-bottom: 0vh;
}


.fields {
      margin: 0 ;
      border-style: solid;
      border-radius: 0 1vmin 1vmin 1vmin;
      border-width: 0.7vmin;
      font-size: 3vmin;
      
} 


.buttons {
      border-radius: 1vmin;
      color: black;
      padding: 0vmin 2vmin 0vmin 2vmin;
      background-color: white;
      margin: 0 0.3vmin 1.3vmin 0;
      line-height: 6vmin;
      font-size: 4vmin;
}




span.subtitles {
    color: white;
    padding: 0.8vmin 1.5vmin 0.4vmin 1.5vmin;
    margin-bottom: 0;
    display: inline-block;
    border-radius: 1vmin 1vmin 0 0;
    font-size: 3vmin;
    font-weight: bold;
    font-variant: small-caps;
    /*line-height: 5vmin;*/
    border: none;
    z-index: 4;
    position: relative;
}



span.subtitles, 
h2, 
#appmenu
{
    text-shadow: 0.5vmin 0.5vmin 1vmin #222;

}



#appcrypt, #appdecrypt {
    font-size: 8vmin;
  line-height: 6vmin;
  padding: 0 1vmin;

  vertical-align: bottom;
}


.buttons, .subtitles {

    
}

.actions_icons {

  
}



.options, .radio {
    width:3.5vmin;
    height:3.5vmin;
}

div#option1  {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
    grid-template-rows: auto auto;
    justify-items: center;
}


div#option1 label {
    font-size:3.5vmin;
}

div#option2, div#option3 {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto ;
    grid-template-rows: auto auto;
    justify-items: center;
}


div#option1 label, div#option2 label, div#option3 label {
    line-height:4.5vmin;   
}




label {
    color: black;
    padding: 0 1vmin 0.5vmin 1vmin;
    margin: 0;
    border: none;
    font-size: 3vmin;
    text-shadow: 0.1vmin 0.1vmin 0.05vmin #555;
    line-height: 3.5vmin;
}


label#appexpiry {
    /*
    padding: 0 2vmin 0 1vmin;
    vertical-align: middle;
    */
}

input#expiration {
    vertical-align: middle;
}


div#info_input {
    display: grid;
    grid: auto / auto auto;
    justify-content: space-between;
    align-items: end;
}

div#info_output {
    display: grid;
    grid: auto / auto auto;
    justify-content: space-between;
    align-items: end;
}



input#keyString {
    border-radius:1vmin;
    /*margin-left: 1vmin;*/
    padding: 0.5vmin 1vmin;
  text-align: left;
  font-size: 3vmin;   
  width: 25vmin; 
}

div#option1 label, div#option2 label, div#option3 label {
    text-align: center;
    display: block;
    text-transform: uppercase;
}










/* $$$$$$$$$$$$$$$$$$$  */
/* $$$ MENU POPUP  $$$  */
/* $$$$$$$$$$$$$$$$$$$  */


div#menu_parameters_wrapper {

    display:  grid;
    grid: auto auto auto auto / auto auto;
    grid-gap: 5vmin;
    /* padding-bottom: 5vmin; */
     /* height:70vmin; */
     margin-bottom: 5vh;
}


div#menu_informations_wrapper {

    display:  grid;
    grid: auto auto auto/  auto;
    grid-gap: 5vmin;
    /* padding-bottom: 5vmin; */
    /* height:70vmin; */
}



div#windowPopup {

  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  padding-top: 20vmin; /* Location of the box */
  left: 0;
  top: 0;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}


div#popupContent {
    margin: 0 auto 30vmin auto;
    padding: 2vmin 4vmin 4vmin 4vmin;
    border-width:1vmin;
    border-style: solid;
    /*overflow: auto;*/
    word-break: break-word;
    border-radius: 3vmin;
    font-size: 3vmin;
    background-color: white;
    color:black;
  
}




div#popupContent select {

  height:6vmin;
  font-size: 3vmin;
  
}


div#popupContent p {

    margin: 0 0 3vmin 0;
  
}

div#popupContent ul {
    padding: 0 0 0 4vmin;
     list-style-position: outside;
     margin-bottom: 4vmin;
}

div#popupContent ul li {
    margin-bottom: 2vmin;
}


div#popupContent ul li::marker {
  
}



div.warning {
    text-align:center;
    margin: 4vmin 0;
}


div.warning p {
    color: red;
    display: inline;
    padding: 1vmin;
    font-weight:bold;
}


div#menu_links_wrapper{
    display: grid;
    grid: auto auto auto / auto;
    justify-content: left;
    grid-gap: 5vmin;
    margin-bottom: 3vmin;
}
 
div.menu_links {
}

div.menu_links:hover {
     /*text-decoration: underline; */
    /*color: black !important;*/
}



#menu-css, 
#menu-lang, 
div#menu-tuto-label, 
div#menu-terms-label,
div#menu-about-label,
#appmenu,
input, 
label, 
button
 {
    cursor: pointer;
}


span.subtitles
 {
    cursor: context-menu;
}


#menu-keytype, #menu-dark {
    height: 3.5vmin;
    width: 3.5vmin;
}



/* $$$$$$$$$$$$$$$$$$$  */
/* $$$$  FOOTER   $$$$  */
/* $$$$$$$$$$$$$$$$$$$  */


#footer {
    font-weight: bold;

    display: grid;
    grid: auto / auto;
    justify-content: space-around;
}




#appdonation {
    font-size:3.5vmin;
    vertical-align: middle;
}


#donate {
    text-decoration: none;
    padding: 3vmin;
    border-width:1px;
    border-style: solid;
    border-radius: 10vmin;
}

#donate:hover {

}

#donate:hover span{
  opacity:0.5;
}

span.dudes {
    font-size: 5vmin;
  vertical-align: middle;
}

#copyright {
     font-size: 2vmin;
  text-align: center;
  margin-top: 0vh;
}