/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  width: 100%;
  height: auto;
  min-height: 50vh;
  box-sizing: border-box;
  background-color: #F8F8F8;
  float: left;
  line-height: 1.4;
  font-size: 2.5vh;
  font-family: "Urbanist", sans-serif;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

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

h1, h2, h3, h4, h5 {
  font-family: "Urbanist", sans-serif;
}

button {
  border-width: 0px;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  font-family: "Urbanist", sans-serif;
}

input {
  border-style: solid;
  border-width: 0px;
  background-color: #F8F8F8;
  font-family: "Urbanist", sans-serif;
}

li {
  color: #2e2e2e;
}

main {
  height: auto;
  width: 82%;
  box-sizing: border-box;
  padding: 10vh 0px 10vh 0px;
  margin-left: 18%;
  float: left;
}
@media (max-width: 1099px) {
  main {
    width: 90%;
    margin-left: 5%;
  }
}

.defaultTitle {
  font-size: 4vh;
  color: #004E8B;
  margin-bottom: 3vh;
  margin-left: 5%;
}

.addition {
  height: 4vh;
  width: 4vh;
  box-sizing: border-box;
  display: inline-block;
  border-style: solid;
  border-width: 2px;
  border-color: #FF3306;
  border-radius: 100%;
  line-height: 1;
  font-weight: 600;
  color: #FF3306;
  text-align: center;
}

.addition2 {
  height: 4vh;
  width: 4vh;
  box-sizing: border-box;
  display: inline-block;
  border-style: solid;
  border-width: 2px;
  border-color: #FF3306;
  border-radius: 100%;
  line-height: 1;
  font-weight: 600;
  color: #FF3306;
  text-align: center;
  height: 4vh;
  width: 4vh;
  border-color: #004E8B;
  float: right;
  color: #004E8B;
}

.fa-close {
  height: 4vh;
  width: 4vh;
  box-sizing: border-box;
  display: inline-block;
  border-style: solid;
  border-width: 2px;
  border-color: #FF3306;
  border-radius: 100%;
  line-height: 1;
  font-weight: 600;
  color: #FF3306;
  text-align: center;
  line-height: 0;
  padding-top: 0.2vh;
}

textarea {
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  resize: none; /*remove the resize handle on the bottom right*/
  font-family: "Urbanist", sans-serif;
  font-size: 3vh;
  padding-top: 2vh;
  padding-left: 3%;
  padding-right: 3%;
}

textarea:focus, input:focus {
  outline: none;
}

.fa-pencil {
  color: #004E8B;
  float: right;
  cursor: pointer;
}

.diaOff {
  display: none;
}

.diaOn {
  display: inline-block;
}

.notificationBackgroundOff {
  display: none;
}

.notificationBackground {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: block;
}

.notificationOff {
  display: none;
}

.notification {
  height: auto;
  width: 30vw;
  box-sizing: border-box;
  padding: 5vh;
  background-color: #FFF;
  border-radius: 5px;
  display: grid;
  align-items: center;
  position: fixed;
  left: 35vw;
  top: 35vh;
  text-align: center;
}
.notification .fa-close {
  background-color: red;
  position: absolute;
  top: -2vh;
  right: -2vh;
  color: #FFF;
  cursor: pointer;
}
.notification input {
  width: 30%;
  padding: 1vh;
  border-style: solid;
  border-width: 0 0 1px 0;
  margin: 1vh 0 0 0;
  font-size: 3vh;
  text-align: center;
}
.notification .save {
  width: 30%;
  padding: 1vh;
  background-color: #004E8B;
  border-radius: 5px;
  margin: 1vh 0 0 0;
  color: #FFF;
  font-size: 3vh;
}

#exit {
  display: block;
  position: absolute;
  bottom: 2vh;
  width: 18vw;
  left: 0;
}
#exit p {
  width: 100%;
  text-align: center;
  font-size: 2vh;
  margin-left: 0;
}

#exit2 {
  display: none;
}

@media (max-width: 1099px) {
  #exit {
    display: none;
  }
  #exit2 {
    height: auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
    color: #004E8B;
    font-size: 3vh;
    cursor: pointer;
    display: block;
  }
}
.sideBar {
  height: 100vh;
  width: 18%;
  box-sizing: border-box;
  background-color: #FFF;
  -webkit-box-shadow: 44px 7px 36px -57px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 44px 7px 36px -57px rgba(0, 0, 0, 0.75);
  box-shadow: 44px 7px 36px -57px rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 30vh 15vh auto;
}
@media (min-width: 1100px) {
  .sideBar {
    overflow-x: auto;
  }
}
.sideBar h3 {
  height: 100%;
  width: 100%;
  text-align: center;
  color: #2e2e2e;
  font-family: "Urbanist", sans-serif;
  font-size: 3.5vh;
  font-weight: 400;
  display: grid;
  grid-row-start: 2;
  grid-row-end: 2;
  align-items: center;
}
.sideBar .menuButton {
  display: none;
}
@media (max-width: 1099px) {
  .sideBar {
    height: 12vh;
    width: 100%;
    grid-template: none;
    -webkit-box-shadow: 0px 40px 81px -63px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 40px 81px -63px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 40px 81px -63px rgba(0, 0, 0, 0.75);
  }
  .sideBar .logoViewer {
    height: 11vh;
    width: 11vh;
    box-sizing: border-box;
    padding: 3%;
    position: absolute;
    left: 5vw;
    z-index: 100;
  }
  .sideBar h3 {
    display: none;
  }
  .sideBar p a {
    display: block !important;
  }
  .sideBar .navigableMenu {
    background-color: #FFF;
    -webkit-box-shadow: 0px 40px 81px -63px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 40px 81px -63px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 40px 81px -63px rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 11vh;
    z-index: 100;
    display: none;
  }
  .sideBar .navigableMenu p {
    height: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 2vh 0 2vh 0;
    margin: 0;
    text-align: center;
  }
  .sideBar .navigableMenuActive {
    display: block;
  }
  .sideBar .menuButton {
    height: 5vh;
    width: 5vh;
    box-sizing: border-box;
    position: absolute;
    right: 5vw;
    top: 3vh;
    display: block;
  }
  .sideBar .lineOne {
    height: 0.5vh;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #FF3306;
    float: left;
    margin: 0;
  }
  .sideBar .lineOneActive {
    height: 0.5vh;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #FF3306;
    transform: rotate(-45deg);
    animation-name: lineOne;
    animation-duration: 2s;
    float: left;
    margin-top: 2.8vh;
  }
  @keyframes lineOne {
    from {
      transform: rotate(0deg);
      margin: 0 0 0 0;
    }
    to {
      transform: rotate(-45deg);
      margin: 2.8vh 0 0 0;
    }
  }
  .sideBar .lineTwo {
    height: 0.5vh;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #FF3306;
    float: left;
    margin: 1.6vh 0 0 0;
    display: block;
  }
  .sideBar .lineTwoActive {
    display: none;
  }
  .sideBar .lineThree {
    height: 0.5vh;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #FF3306;
    float: left;
    margin: 1.6vh 0 0 0;
  }
  .sideBar .lineThreeActive {
    height: 0.5vh;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #FF3306;
    float: left;
    margin: -0.5vh 0 0 0;
    transform: rotate(45deg);
    animation-name: lineThree;
    animation-duration: 2s;
  }
  @keyframes lineThree {
    from {
      transform: rotate(0deg);
      margin: 1.6vh 0 0 0;
    }
    to {
      transform: rotate(45deg);
      margin: -0.5vh 0 0 0;
    }
  }
}

.logoViewer {
  height: 13vw;
  width: 13vw;
  box-sizing: border-box;
  padding: 8%;
  background-color: #004E8B;
  background-origin: content-box;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/main-icons/logo-completo.png");
  border-radius: 100%;
  justify-self: center;
  align-self: center;
}

.navigableMenu {
  height: auto;
  width: 100%;
  box-sizing: border-box;
  grid-row-start: 3;
  grid-row-end: 3;
}
.navigableMenu p {
  height: auto;
  width: 60%;
  box-sizing: border-box;
  color: #004E8B;
  text-align: left;
  font-size: 3vh;
  margin-left: 20%;
  margin-top: 3vh;
  cursor: pointer;
}
.navigableMenu .fa-angle-right {
  font-size: 3vh;
  font-weight: 600;
  color: #FF3306;
}
.navigableMenu ul {
  width: 70%;
  box-sizing: border-box;
  text-align: center;
  margin-left: 21%;
  margin-top: 2vh;
}
.navigableMenu li {
  margin-bottom: 1vh;
  font-size: 2.4vh;
  text-align: left;
}
.navigableMenu .fa-user {
  color: #FF3306;
}

.unitsRight {
  height: 0px;
  overflow-x: auto;
  animation-name: fecha;
  animation-duration: 1s;
}

/* The element to apply the animation to */
.unitsDown {
  height: 20vh;
  padding-bottom: 3vh;
  overflow: auto;
  display: block;
  animation-name: abre;
  animation-duration: 1s;
}

@keyframes abre {
  0% {
    height: 0px;
    display: block;
    overflow: hidden;
  }
  100% {
    height: 20vh;
  }
}
.arrowOneRight {
  height: 4vh;
  width: 4vh;
  box-sizing: border-box;
  border-radius: 100%;
  float: right;
  display: grid;
  align-items: center;
  text-align: center;
}

.arrowOneDown {
  height: 4vh;
  width: 4vh;
  box-sizing: border-box;
  border-radius: 100%;
  float: right;
  display: grid;
  transform: rotate(90deg);
  animation-name: arrowRotate;
  animation-duration: 1s;
  text-align: center;
}

@keyframes arrowRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
body {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  background-size: cover, contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/login/fundo.jpg");
  float: left;
}

.loginOpacity {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  display: grid;
}

.setLogin {
  height: 55vh;
  width: 25vw;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 22vh 33vh;
  justify-self: center;
  align-self: center;
}
@media (max-width: 1099px) {
  .setLogin {
    width: 90vw;
  }
}

.logo {
  height: 85%;
  width: 100%;
  box-sizing: border-box;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/main-icons/logo-completo.png");
}

.loginBox {
  height: 33vh;
  width: 25vw;
  box-sizing: border-box;
  background-color: #FFF;
  border-radius: 3%;
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-rows: 20% 25% 25% 25%;
  grid-row-start: 2;
}
@media (max-width: 1099px) {
  .loginBox {
    width: 90vw;
    margin: 0;
  }
}

.email, .password {
  width: 90%;
  height: 70%;
  box-sizing: border-box;
  padding-left: 15px;
  border-radius: 3px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
  display: grid;
  align-self: center;
  justify-self: center;
  font-size: 2.4vh;
}

.email {
  grid-row-start: 2;
}

.password {
  grid-row-start: 3;
}

.login {
  height: 65%;
  width: 60%;
  box-sizing: border-box;
  background-color: #FF3306;
  border-radius: 3px;
  grid-row-start: 4;
  align-self: center;
  justify-self: center;
  font-family: "Urbanist", sans-serif;
  font-size: 2.4vh;
  color: #FFF;
  cursor: pointer;
}

/*# sourceMappingURL=login.css.map */