* {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
  overflow: hidden;
  background-color:#7f8c8d;
  /* background-color:#16a085; */
  background-image: url("../images/login/loginBGIcon.png");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
}

a{
  text-decoration: none;
  color: #000;
}

p{
  word-break: break-all;
}

form input[type=text], form input[type=number], form input[type=password], form input[type=date], form select, form textarea, .selectBreakdown {
  text-align: center;
  height: 24px;
  width: 60%;
  border: unset;
  background-color: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .5);
  font-weight: bold;
}

.selectBreakdown option{
  padding:5px 0;
}

.loading {
  width: 60px;
  height: 50px;
  border-radius: 100px;
  border: 10px solid #d35400;
      border-left-color: rgb(211, 84, 0);
      border-left-style: solid;
      border-left-width: 10px;
  border-left: 0;
  -webkit-animation-name: loading;
  animation-name: loading;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  margin: 10px auto;
}

form textarea{
  width: 100%;
  height: auto;
  resize: none;
  font-family: sans-serif;
}

form input[type=submit] {
  background-color: #2c3e50;
  color: #FFF;
  text-transform: uppercase;
  border: unset;
  padding: 10px 60px;
  border-radius: 2px;
  font-weight: bold;
  cursor: pointer;
}

.formHelpAlert{
  text-align:center;
}

.formHelpAlert .submitEmergency{
  height: auto !important;
  background-color: #2c3e50 !important;
  font-size: 16px !important;
  margin: 20px 0;
}

.alert span{
  text-transform: uppercase;
  color: grey;
}

.flipCardButton{
  width: 200px;
  background-color: red;
  color: #FFF;
  text-transform: uppercase;
  border: unset;
  padding: 10px 0;
  border-radius: 2px;
  font-weight: bold;
  -ms-flex-item-align: center;
      align-self: center;
  margin-bottom: 0;
  margin-top: 20px;
  font-size:14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.flipCardButton img{
  width: 20px;
}

.mainBoxContainer{
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box{
  width:30%;
  height: 25vh;
  margin: 1.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(255,255,255,.25);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(127,140,141,0.19)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(127,140,141,0.19) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(127,140,141,0.19) 100%);
background: -webkit-linear-gradient(315deg, rgba(255,255,255,1) 0%, rgba(127,140,141,0.19) 100%);
background: -o-linear-gradient(315deg, rgba(255,255,255,1) 0%, rgba(127,140,141,0.19) 100%);
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(127,140,141,0.19) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#7f8c8d', GradientType=1 );


/*  OLD BACKGROUND
* background: rgba(2,236,201,0.5);
background: -moz-linear-gradient(-45deg, rgba(2,236,201,0.5) 0%, rgba(46,204,113,0.5) 3%, rgba(2,236,201,0.5) 60%, rgba(2,236,201,0.5) 76%, rgba(5,255,213,0.5) 91%, rgba(8,255,214,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(2,236,201,0.5)), color-stop(3%, rgba(46,204,113,0.5)), color-stop(60%, rgba(2,236,201,0.5)), color-stop(76%, rgba(2,236,201,0.5)), color-stop(91%, rgba(5,255,213,0.5)), color-stop(100%, rgba(8,255,214,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(2,236,201,0.5) 0%, rgba(46,204,113,0.5) 3%, rgba(2,236,201,0.5) 60%, rgba(2,236,201,0.5) 76%, rgba(5,255,213,0.5) 91%, rgba(8,255,214,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(2,236,201,0.5) 0%, rgba(46,204,113,0.5) 3%, rgba(2,236,201,0.5) 60%, rgba(2,236,201,0.5) 76%, rgba(5,255,213,0.5) 91%, rgba(8,255,214,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(2,236,201,0.5) 0%, rgba(46,204,113,0.5) 3%, rgba(2,236,201,0.5) 60%, rgba(2,236,201,0.5) 76%, rgba(5,255,213,0.5) 91%, rgba(8,255,214,0.5) 100%);
background: linear-gradient(135deg, rgba(2,236,201,0.5) 0%, rgba(46,204,113,0.5) 3%, rgba(2,236,201,0.5) 60%, rgba(2,236,201,0.5) 76%, rgba(5,255,213,0.5) 91%, rgba(8,255,214,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02ecc9', endColorstr='#08ffd6', GradientType=1 ); */

  border-radius: 5px;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
          box-shadow: 0 0 10px rgba(0,0,0,.5);
  color:#FFF;
  text-transform: uppercase;
  text-shadow: 2px 2px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.box div{
  position: absolute;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box div img{
  opacity: .5;
  width:80%;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.box h1{
  text-align:center;
}

.box a{
  z-index: 1;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box:hover img{
  width: 100%;
  opacity: 1;
  -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
          transform: rotate(15deg);
}

.box:first-child{
  margin-left:0;
}

.box:last-child{
  margin-right:0;
}

.menuIcon, .menuBlocker, .optionsContainer{
  position: fixed;
  z-index: 999;
}

.menuIcon{
  cursor: pointer;
}


.menuIcon img{
  width: 75px;
  margin: 20px;
  opacity: .5;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.menuIcon:hover img{
  opacity: 1;
}

.menuBlocker{
  background-color: rgba(0,0,0,.75);
  z-index: 998;
}

.optionsContainer{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100vh;
  z-index: 999;
}

.optionsContainer .box{
  width: 45vh;
  height: 35vh;
  margin-left: 40px;
  margin-bottom:40px;
}

form #submitLogOut{
  color: #FFF;
  text-transform: uppercase;
  text-shadow: 2px 2px rgba(0,0,0,.5);
  cursor: pointer;
  background-color: transparent;
  width:auto;
  font-size:2em;
}

.optionsContainer form, .optionsContainer form #submitLogOut{
  width: 100%;
  height: 100%;
}

.logPopup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  width: 400px;
  height: 200px;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF;
  z-index: 1;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .75);
          box-shadow: 0px 0px 10px rgba(0, 0, 0, .75);
  border-radius: 1px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.logPopup h1 {
  text-align: center;
  font-size: 16px;
  text-shadow: 2px 2px rgba(0, 0, 0, .1);
  color: #FFF;
}

.imgLogPopupContainer {
  width: 100%;
  height: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.titleLogPopupContainer {
  width: 100%;
  height: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #16a085;
}

.imagesInput {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.imagesInput + label {
  margin-bottom: 20px;
  font-weight: 700;
  color: white;
  background-color: #2c3e50;
  display: inline-block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.imagesInput:focus + label,
.imagesInput + label:hover {
    background-color: red;
}

.imagesInput + label {
	cursor: pointer; /* "hand" cursor */
}

.imagesInput:focus + label {
	outline: 2px dashed #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.scrollAble{
  overflow: auto;
}

.selectBreakContainer{
  width: 30%;
  height: 100%;
  position: absolute;
  right:0;
  top: 0;
  background-color: #FFF;
  -webkit-box-shadow:-5px 0 5px rgba(0,0,0,.25);
          box-shadow:-5px 0 5px rgba(0,0,0,.25);
  z-index: 900;
}

.selectBreak{
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
}

.breakElement{
  min-height: 15%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.idNumber{
  padding: 30px;
  background-color: #16a085;
}

.alert{
  display: flex;
  justify-content: space-evenly;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 10px;
}

.alert img{
  height:auto;
  padding: 0 10px;
  padding-right:15px;
  width: 45px;
}

@-webkit-keyframes alertMove {
  0%{top:20px;}
  66%{top:30px;}
  100%{top:20px;}
}

@keyframes alertMove {
  0%{top:20px;}
  66%{top:30px;}
  100%{top:20px;}
}

.alertShower{
  position:absolute;
  right:20px;
  top:20px;
  -webkit-animation-name: alertMove;
          animation-name: alertMove;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  cursor:pointer;
  z-index: 99;
}

.alertShower img{
  width:50px;
  z-index:999;
}