@media screen and (min-width: 871px) {
  .logoFull {
    margin-left:15%;
  }
  .headerTitle{
    margin-right:15%;
  }
}
@media screen and (max-width: 870px) {
  .logoFull {
    margin-left:5%;
  }
  .headerTitle{
    margin-right:5%;
  }

}

@media screen and (min-width: 601px) {
  body{
    margin:8px
  }
  .mobile{
    display:none
  }
  .notMobile{
    display:flex;
  }
  .dayText{
    font-size:2.2em;
    margin-top:120px
  }
  .actionBtns{
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-top:100px
  }
  .actionIcon {
    width:30px;
    cursor:pointer;
  }
  .actionIconLarge {
    width:35px;
    cursor:pointer;
  }

  .typeIcon {
    width:50px;
    cursor:pointer;
    margin-bottom:10px;
  }
  .inOutText {
      font-size:1.6em;
  }
  .errorMessage{
    margin-top:0px;
    margin-bottom:0px
  }
  .loadingGif{
    left:45%
  }
  .editIcon{
    margin-left:35px
  }
  .closeIcon{
    margin-left:25px
  }
  .outTypes{
    margin-left:35px
  }
  .timeItem {
    margin: auto;
    margin-top:20px;
    width: 95%;
    height:60px;
    padding-left:20px;
    padding-right:20px;
    padding-top:5px;
    padding-bottom:5px;
    border-bottom: 1px solid #555;
  }
  .checkIcon{
    margin-left:25px
  }
  .totals{
    width:95%
  }
  .buttonIcon{
    cursor:pointer;
    border-radius:15px;
    font-size:1.2em;
    padding-left:30px;
    padding-right:30px;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
  }

  .popout {
    border-radius:15px;
    padding-left:20px;
    padding-right:20px;
    padding-top:45px;
    padding-bottom:50px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  }

}
@media screen and (max-width: 600px) {

  .popout {
    border-radius:15px;
    padding-left:20px;
    padding-right:20px;
    padding-top:45px;
    padding-bottom:50px;
  }
  .buttonIcon{
    cursor:pointer;
    border-radius:15px;
    font-size:1.2em;
    padding-left:30px;
    padding-right:30px;
    padding-top:7px;
    padding-bottom:8px;
    text-align:center;
  }
  .totals{
    width:90%
  }
  .notMobileBlock{
    display:none;
  }
  body{
    margin:0px
  }
  .timeItem {
    margin: auto;
    margin-top:20px;
    width:90%;
    height:60px;
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
    padding-bottom:5px;
    border-bottom: 1px solid #555;
  }
  .outTypes{
    margin-left:20px
  }
  .closeIcon{
    margin-left:20px
  }
  .checkIcon{
    margin-left:15px
  }
  .editIcon{
    margin-left:15px
  }
  .loadingGif{
    left:40%
  }
  .dayText{
    font-size:2em;
    margin-top:100px
  }
  .mobile{
    display:flex;
  }
  .notMobile{
    display:none;
  }
  .actionBtns{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top:0px;
    width:100%;
  }
  .actionIcon {
    width:25px;
    cursor:pointer;
  }
  .actionIconLarge {
    width:30px;
    cursor:pointer;
  }

  .typeIcon {
    width:40px;
    cursor:pointer;
    margin-bottom:10px;
  }
  .inOutText {
      font-size:1.2em;
      padding-left:5px;
  }
  .errorMessage{
    margin-top:20px;
    margin-bottom:0px
  }
}


p, input, a{
  font-family: 'Varela Round', sans-serif;
}

.lightGreen {
  color:#5fb377;
}

.green {
  color:#4caf50;
}

.darkGreen {
  color:#004504;
}

.white {
  color:white;
}


.left15 {
  margin-left:15%
}

.right15{
  margin-right:15%
}


.red {
  color:red;
}

.lightGreenBG {
  background-color:#5fb377;
}

.greenBG {
  background-color:#4caf50;
}

.darkGreenBG {
  background-color:#004504;
}

.whiteBG {
  background-color:white;
}

.grayBG{
  background-color:#eee;
}

.lightGreenBorder {
  border: 1.5px solid #5fb377;
}

.greenBorder {
  border: 1.5px solid #4caf50;
}

.redBorder {
  border: 1.5px solid red;
}

.darkGreenBorder {
  border: 1.5px solid #004504;
}

.grayBorder {
  border: 1.5px solid #888;
}

.center {
  margin: auto;
}

.textCenter {
  text-align: center;
}

.inputLabel {
  font-size:1.6em;
}

.title {
  font-size:2.2em;
}



input {
  width: 300px;
  height: 30px;
  border-radius:15px;
  padding-left:15px;
  padding-right:15px;
  padding-top:5px;
  padding-bottom:5px;
  font-size:1em;
}

input:focus {
    outline: none !important;
    border: 1.5px solid #004504;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  }

.button {
  cursor:pointer;
  border-radius:15px;
  font-size:1.2em;
  padding-left:30px;
  padding-right:30px;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
}


.startColumn{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.centerColumn{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.endColumn{
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.aroundColumn{
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.betweenColumn{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


.startRow{
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.centerRow{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.endRow{
  display:flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.aroundRow{
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.betweenRow{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.fullWidth{
  width:100%;
}

.content {
  width:100%;
  max-width:700px;
  overflow-x:hidden;
  overflow: hidden;
}

.timeInputHour{
  text-align:center;
  width:40px;
  font-size:25px;
}

.timeInputMinute{
  text-align:center;
  width:60px;
  font-size:25px;
}