/* Background options */
* {
  box-sizing: border-box;
}

.header {
  text-align: center;
  font: 1.5rem sans-serif;
}

.header2 {
  text-align: center;
  font: 0.5rem sans-serif;
}

body {
  background-color: #282828;
  color: #f0f0f0;
  font-family: Arial;
}

main {
  margin: 0 auto;
  padding: 4rem 0;
  width: 90%;
  max-width: 60rem;
}

.header { grid-area: header; }
.header2 { grid-area: header2; }
.logout { grid-area: logout; }
.texta { grid-area: texta; text-align: right; }
.inputa { grid-area: inputa; }
.middlea1 { grid-area: middlea1; }
.middlea2 { grid-area: middlea2; }
.middleb1 { grid-area: middleb1; }
.middlec1 { grid-area: middlec1; }
.middled1 { grid-area: middled1; }
.middled2 { grid-area: middled2; }
.middlee1 { grid-area: middlee1; }
.pic { grid-area: pic; }
.picture { grid-area: picture; }
.righta { grid-area: righta; }
.righte { grid-area: righte; }
.rightf { grid-area: rightf; }
.textb { grid-area: textb; }
.textc { grid-area: textc; }
.textd { grid-area: textd; }
.notes { grid-area: notes; }
.texte {  grid-area: texte;
          display:grid;
          grid-template-columns: max-content max-content;
          grid-row-gap:10px;
        }
.texte label       { text-align:right; }

.mahn1 {  grid-area: mahn1;}
.mahn2 {  grid-area: mahn2;}
.mahn3 {  grid-area: mahn3;}
.mahn4 {  grid-area: mahn4;}
.mahn5 {  grid-area: mahn5;}
.mahn6 {  grid-area: mahn6;}

.textf {  grid-area: textf;}

.empty { grid-area: empty; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header   header    header   header     header    logout'
    'texta    inputa    middlea1  middlea2  middlea2  righta'
    'textb    textb     middleb1  picture   picture   picture'
    'textd    middled1  middled2  picture   picture   picture'
    'texte    texte     notes     notes     righte    righte'
    'mahn1    mahn2     mahn3     mahn4     mahn5     mahn6'
    'textf    textf     textf     empty     rightf    rightf';
  gap: 10px;
  /*background-color: #2196F3;*/
  padding: 10px;
  border: 1px solid rgba(243, 0, 0, 0.8);
}

.grid-container > div {
  align-self: center;
  /*background-color: rgba(200, 0, 0, 0.8);*/
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.grid-reports {
  display: grid;
  grid-template-areas:
    'header   header    header    header    header    logout'
    'texte    texte     texte     texte     middlee1    middlee1'
    'textf    textf     textf     textf     textf    textf';
  gap: 10px;
  /*background-color: #2196F3;*/
  padding: 10px;
  border: 1px solid rgba(243, 0, 0, 0.8);
}

.grid-reports > div {
  align-self: center;
  /*background-color: rgba(200, 0, 0, 0.8);*/
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.grid-login {
  display: grid;
  grid-template-areas:
    'header   header    header    header    header      header'
    'texte    texte     texte     texte     texte       texte'
    'middlee1 middlee1  middlee1  middlee1  middlee1    middlee1';
  gap: 10px;
  /*background-color: #2196F3;*/
  padding: 10px;
  border: 1px solid rgba(243, 0, 0, 0.8);
}

.grid-login > div {
  align-self: center;
  /*background-color: rgba(200, 0, 0, 0.8);*/
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}


.grid-app {
  display: grid;
  grid-template-areas:
    'header2  header2   header2   header2   logout    logout'
    'texte    texte     texte     texte     texte     texte'
    'middlea1 middleb1  middleb1  middleb1  middleb1  middlec1'
    'pic      pic       pic       pic       pic       pic'
    'middlea2 middlea2  middlea2  middlea2  middlea2  middlea2'
    'textb    textb     textb     righta    righta    righta'
    'textc    textc     textc     textc     textc     textc';
  gap: 1px;
  /*background-color: #2196F3;*/
  padding: 1px;
  border: 1px solid rgba(243, 0, 0, 0.8);
}

.grid-app > div {
  align-self: center;
  /*background-color: rgba(200, 0, 0, 0.8);*/
  text-align: center;
  padding: 0px 0px;
  font-size: 5px;
}


input[type="text"], 
input[type="number"],
input[type="password"] {
  height: 1.75em;
  position: relative;
  bottom: 8px;
  text-align: center;
  width: 100%;
}

input.addr {
  text-align: left;
  width: auto;
  padding: 10px 5px;
  margin: 2px 5px;

}

input.dates {
  text-align: left;
  width: auto;
  padding: 10px 5px;
  margin: 2px 5px;
   
}

input[type="date"] {
  height: 1.75em;
  position: relative;
  bottom: 10px;
  left: 0%;
  text-align: center;
  width: 90%;
}

input[type="checkbox"] {
  height: 1.5em;
  width: 1.5em;
}

select,
textarea {
  font: 1rem / 1.5 sans-serif;
  display: flow-root;
  box-sizing: border-box;
  width: 100%;
  padding: 0.1rem 0.1rem;
}

.big-label {
  vertical-align: middle;
  font: bold 1.75rem sans-serif;
  text-align: right; 
  display: block;
}

.big-label2 {
  vertical-align: middle;
  font: bold 1.75rem sans-serif;
  text-align: left; 
  display: block;
}


.large-label {
  vertical-align: middle;
  font: bold 1rem sans-serif;
  margin-bottom: 0.6rem;
  text-align: right;
  display: block;
}

.large-label2 {
  vertical-align: middle;
  font: bold 1rem sans-serif;
  margin-bottom: 0.6rem;
  text-align: center;
  display: block;
}

.label-box {
  text-align: justify;
  font: bold 1rem sans-serif;
  margin-top: 0.6rem;
  text-align: right;
  display: block;
  line-height: 1.5;
  padding-left: 20px;
}

.label-box2 {
  font: bold 1rem sans-serif;
  text-align: right;
  display: block;
  padding-left: 40px;
}

.label-box3 {
  font: bold 1rem sans-serif;
  text-align: center;
  display: block;
  padding-left: 40px;
}

.large-label-center {
  vertical-align: middle;
  font: bold 1rem sans-serif;
  margin-bottom: 0.5rem;
  text-align: center;
  display: block;
}

.small-label {
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.25rem;
  margin-right: 1.5rem;
  font: 1.25rem sans-serif;
}

.text {
  padding: 10px;
  text-align: center;
}

.txleft {
  padding: 10px;
  text-align: left;
}

.txright {
  padding: 10px;
  text-align: right;
}



h1 {
  color: lightgray;
}


fault_h1 {
    font-size: 40px;
    font-weight: bold;
    color: red;
    text-align: center;
}

fault_h1a {
  font-size: 20px;
  font-weight: bold;
  color: red;
  text-align: center;
}

.btn {
  background-color: RoyalBlue; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px; /* 16px; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  margin: 0;

}
/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
  transition: transform .2s ease;
  transform: scale(1.2);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}
/* image buttons */
  /* save button */
  .save-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/save.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
  }
  .save-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }

  /* up Button */
  .up-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/up-arrow.png);
    background-position: center;
    background-size: contain;
    height: 50px;
    width: 50px;

  }
  .up-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }

  /* down Button */
  .down-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/down-arrow.png);
    background-position: center;
    background-size: contain;
    height: 50px;
    width: 50px;
  }
  .down-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }

  /* Close the Case Button */
  .closeCase-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/closecase.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
  }
  .closeCase-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }

  /* Cancel the Case Button */
  .cancelCase-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/cancelcase.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
  }
  .cancelCase-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }

  /* reopen the Case Button */
  .reopenCase-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/reopen.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
  }
  .reopenCase-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }
  
  /* logout Button */
  .logout-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/logout.png);
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 1%;
  }
  .logout-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }

  /* savepic Button */
  .savepic-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/closed.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
  }
  .savepic-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }

  /* delpic Button */
  .delpic-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/delete.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
  }
  .delpic-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }

  /* makepic Button */
  .makepic-button {
    background-color: transparent;
    font-size: 16px; /* Set a font size */
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/camera_w.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
  }
  .makepic-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }
  #picin::-webkit-file-upload-button {
    visibility: hidden;
  }

  /* download Button */
  .download-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url(/static/styles/icons/download.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
  }
  .download-button:hover {
    transition: transform .2s ease;
    transform: scale(1.2);
  }




img {
  max-width: 100%;
  height: auto;
}

.tumbnail {
  max-width: 250px;
  height: auto;
}

.tumbnail:hover{

-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
opacity: 1;
transform: scale(3.33);
-ms-transform: scale(3.33); /* IE 9 */
-webkit-transform: scale(3.33); /* Safari and Chrome */
}