/**
 * Franic template
 *
 * @author    Nhu-Hoai Robert VO <nhuhoai.vo@franicflow.ch>
 * @copyright 2019 Franic Technologies SA
 * @license   http://www.franic.eu/ Proprietary
 * @version   2.0.0
 * @link      http://www.franic.eu/
 * @since     0.1.0
 */

html, body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 9pt;
  height: 100vh;
  margin: 0;
  padding: 0;
  width: calc(100vw - (100vw - 100%));
}

.header {
  background-color: #333;
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  transition: height 0.7s;
  width: 100%;
}

.header.showMenu {
  height: 100vh;
}

.headerLeft {
  background: linear-gradient(-65deg,transparent 0%,transparent 30%,#026 30%,#026 100%);
  color: #FFF;
  height: 80px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}

.headerLeftLogo {
  height: 60px;
  left: 10px;
  line-height: 60px;
  position: absolute;
  top: 10px;
  width: 120px;
}

.headerLeftLogo img {
  max-height: 55px;
  max-width: 120px;
}

.headerTop {
  background-color: #39D;
  height: 60px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.headerTopTitle {
  font-size: 11pt;
  height: 60px;
  left: 180px;
  line-height: 60px;
  position: absolute;
  width: calc(100% - 200px);
}

.headerTopLogo {
  height: 50px;
  line-height: 50px;
  position: absolute;
  right: 5px;
  text-align: right;
  top: 5px;
  width: 150px;
}

.headerTopLogo img {
  max-height: 50px;
  max-width: 135px;
}

.headerTopTitle {
  display: none;
  visibility: hidden;
}

.headerBottom {
  color: #FFF;
  height: 40px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 60px;
  transition: height 0.7s;
  width: calc(100%);
}

.headerBottom.showMenu {
  height: calc(100% - 60px)
}

.headerBottomTitle {
  font-size: 9pt;
  font-weight: bold;
  left: 0;
  line-height: 40px;
  padding-left: 150px;
  position: aboslute;
  top: 0;
}

.headerBottomToggler {
  cursor: pointer;
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
  visibility: visible;
}

.headerBottomMenu {

}

.headerBottomMenu a, .headerBottomMenu a:visited {
  display: block;
  border-bottom: solid 1px rgba(255, 255, 255, 0);
  color: #FFF;
  font-size: 9pt;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  transition: border 0.7s;
}

.body {
  height: calc(100vh - 100px);
  left: 0;
  min-height: calc(100vh - 100px);
  position: absolute;
  top: 100px;
  width: 100%;
}

.contents {
  box-sizing: content-box;
  min-height: calc(100% - 40px - 20px);
  padding: 10px;
  position: relative;
  width: calc(100% - 20px);
}

.footer {
  background-color: #333;
  box-sizing: content-box;
  color: #FFF;
  height: 40px;
  position: relative;
  width: 100%;
}

.copyright {
  font-size: 8pt;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
  width: 100%;
}

.copyright a {
  color: #FFF;
  text-decoration: none;
}

.contents a, .contents a:visited, .link {
  color: dodgerblue;
  cursor: pointer;
}

.fblue {
  color: blue;
}

.fgold {
  color: gold;
}

.fgreen {
  color: green;
}

.forange {
  color: orange;
}

.fred {
  color: red;
}

@media screen and (min-width: 768px) {
  .header {
    height: 150px;
  }

  .headerLeft {
    height: 130px;
    width: 300px;
  }

  .headerLeftLogo {
    height: 80px;
    line-height: 80px;
    top: 25px;
    width: 180px;
  }

  .headerLeftLogo img {
    max-height: 80px;
    max-width: 180px;
  }

  .headerTop {
    height: 100px;
  }

  .headerTopTitle {
    display: block;
    font-size: 15pt;
    font-weight: bold;
    height: 100px;
    left: 300px;
    line-height: 100px;
    position: absolute;
    visibility: visible;
    width: calc(100% - 500px);
  }

  .headerTopTitle small {
    font-size: 10pt;
    font-style: italic;
    font-weight: normal;
  }

  .headerTopLogo {
    height: 70px;
    line-height: 70px;
    right: 15px;
    top: 15px;
    width: 200px;
  }

  .headerTopLogo img {
    max-height: 70px;
    max-width: 165px;
  }

  .headerBottom {
    height: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    top: 100px;
    width: calc(100%);
  }

  .headerBottomTitle {
    display: none;
    visibility: hidden;
  }

  .headerBottomMenu {
    line-height: 50px;
    overflow-x: auto;
    margin-left: 230px;
    padding-top: 0;
    white-space: nowrap
  }

  .headerBottomMenu a, .headerBottomMenu a:visited {
    display: inline;
    font-size: 11pt;
    font-weight: bold;
    padding: 0 10px;
  }

  .headerBottomMenu a:hover {
    border-bottom: solid 1px rgba(255, 255, 255, 1);
  }

  .headerBottomToggler {
    display: none;
    visibility: hidden;
  }

  .body {
    height: calc(100vh - 150px);
    min-height: calc(100vh - 150px);
    top: 150px;
  }

  .contents {
    min-height: calc(100% - 50px - 20px);
  }

  .footer {
    height: 50px;
  }

  .copyright {
    height: 50px;
    line-height: 50px;
  }
}