:root {
  --charcoal: #393737;
  --orange: #D55334;
  --lightOrange: #F8DDD7;
  --black: #000000;
  --lightGrey: #EDEBEB;
  --white: #ffffff;
  --darkGrey: #A29E9E;
  --grey: grey;
  --goldYellow: #EBA63F;
  --lightBlue: lightblue;
  --green: #438945;
  --red: #E40C2B;
}

* {
  padding: 0;
  border: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--white);
  overscroll-behavior: contain;
}

/*GLOBAL MOBILE CLASSES BEGIN HIER*/
.mFrm{
  display: flex;
}
.gFrm{
  display: none;
}
.gFrmBlocker{
    position: absolute;
    background-color: transparent;
    z-index: 1;
    height: calc(100% - 100px);
    width: 100%;
    top: 100px;
}


#toolTip {
  padding: 5px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--white);
  display: none;
  z-index: 10;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

#infoBox {
  width: 250px;
  color: var(--white);
  background-color: #2b3b6e;
  border-radius: 15px;
  z-index: 4;
  display: none;
  position: absolute;
  margin: 0;
  padding: 15px;
  text-align: center;
  font-family: montserrat-light;
}
#infoBox header {
  margin-top: 15px;
  font-family: montserrat;
  font-weight: bold;
  font-size: 24px;
}
#infoBox img {
  margin-bottom: 3px;
  height: 50px;
  width: 50px;
}
#infoBox p {
  font-family: montserrat;
  font-weight: bold;
  font-size: 24px;
}
#infoBox .btnBox {
  margin-top: 10px;
  width: 100%;
  clear: both;
}
#infoBox .btnBox div {
  margin-bottom: 10px;
  color: var(--white);
  height: 40px;
  line-height: 37px;
  border-radius: 5px;
  font-size: 24px;
  cursor: pointer;
}

#dataListCon {
  position: absolute;
  display: none;
  background-color: var(--white);
  border: 1px solid var(--orange);
  z-index: 4;
  max-height: 300px;
}
#dataListCon .googleLogo{
    width: 144px;
    height: 18px;
    float: right;
}
#dataList {
  width: 100%;
  height: 100%;
  text-align: left;
  overflow-y: auto;
}
#dataList tr {
  position: relative;
  height: 40px;
}
#dataList td {
  text-align: left;
  border-bottom: 1px solid var(--darkGrey);
  height: 25px;
  cursor: pointer;
  width: 100%;
  padding-left: 5px;
  vertical-align: middle;
}
#dataList td:hover {
    background-color: var(--orange);
    color: white;
}
#dataList img {
  height: 20px;
  width: 20px;
  display: inline-block;
}

/*SALES PAGE BEGIN HIER*/
#salesPage{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 30px 8vw 100px 8vw;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}
#salesPage video{
  width: 100%;

}
#salesPage h1{
  text-align: center;
  margin-bottom: 8vw;
}
#salesPage h2{
  text-align: center;
  margin-bottom: 8vw;
}
#salesPage h3{
  text-align: center;
  margin-bottom: 8px;
}
#salesPage h4{
  text-align: center;
  margin-bottom: 8vw;
}
#salesPage p{
  text-align: center;
}
#salesPage li{
  box-sizing: border-box;
  margin: 8vw;
}
#salesPage a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 8px 0 8vw 0;
  font-size: 80%;
}
#salesPage .refCon{
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 8vw;
}
#salesPage .refCon img{
  width: 80px;
}
#salesPage .salesPayBtnCon{
  background-color: var(--orange);
  color: var(--white);
  padding: 4vw;
  border-radius: 5px;
  margin: 8vw 0 0 0;
}
#salesPage .salesPayBtnCon p{
  font-size: 80%;
}
#salesPage .salesPayBtnCon h3{
  font-size: 100%;
}

/*MFULLVIEW BEGIN HIER*/
#fullView{
  flex-flow: column nowrap;

  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
}
#fullView .mFullBodyCon{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--lightGrey);
  overflow-y: auto;
  bottom: 0;
}

#fullView .header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fullView .header img{
  width: 150px;
  height: auto;
}
#fullView p{
  width: 75%;
  color: var(--charcoal);
  font-size: 16px;
  text-align: center;
  margin: 8px 0;
}
#fullView .mFullViewLabel{
  display: flex;
  flex-flow: column nowrap;
  width: 70%;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--orange);
}
#fullView .mFullViewLabel input{
  box-sizing: border-box;
  height: 35px;
  width: 100%;
  border-radius: 7px;
  padding-left: 5px;
  margin-top: 3px;
  font-size: 16px;
}
#fullView .mBtnOrange{
  height: 35px;
  border-radius: 7px;
  background-color: var(--orange);
  color: var(--white);
  box-sizing: border-box;
  padding: 8px 15px;
  font-size: 14px;
  margin: 15px 0 8px 0;
}
#fullView .btnLoginAlt{
  font-size: 14px;
  color: var(--grey);
}

/*MAPPVIEW BEGIN HIER*/
#appView{
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}
#appView .btnProfileMenu{
    position: fixed;
    height: 30px;
    width: 30px;
    top: 15px;
    right: 15px;
    background-color: transparent;
    z-index: 1;
}
#appView .mAppBodyCon{
  width: 100%;
  height: calc(100% - 80px);
  background: linear-gradient(var(--lightGrey), var(--white));
  overflow-x: scroll;
  position: relative;
}
#appView .mAppFooterCon{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  height: 80px;
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: 1px solid var(--grey);
  background-color: var(--lightGrey);
}
#appView .appFootItemCon{
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 8px;
}
#appView .appFootItemCon img{
  height: 35px;
  width: 35px;
}
#appView .appFootItemCon span{
  font-size: 12px;
  text-align: center;
  color: var(--orange);
}

/*TODAY FORM BEGIN HIER*/
#frmToday{
  width: 100%;
  position: relative;
  margin-bottom: 100px;
}
#frmToday header{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 90%;
  margin-top: 50px;
}
#frmToday header span{
  width: 100%;
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmToday header input{
  border-radius: 4px;
  box-sizing: border-box;
  padding: 15px 0  15px 10px;
  width: 100%;
  font-size: 18px;
  margin: 5px 0 15px 0;
  font-family: sans-serif;
}

#frmToday header .mindBtnCon{
    display: flex;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex-flow: row nowrap;
    justify-content: space-around;
    width: 100%;
    max-height: 0px;
    transition: max-height 1s;

}
#frmToday .mindBtnCon div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    padding: 12px;
    background-color: var(--orange);
    color: var(--white);
    border-radius: 10px;
}

#frmToday .mFrmTodaySec{
  margin-top: 20px;
  width: 90%;
}
#frmToday .mFrmTodaySec h2{
  color: var(--orange);
  margin-left: 34px;
}
#frmToday .mFrmTodayItemCon{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin: 15px 0;
}
#frmToday .itemCheck{
  width: 20px;
  height: 20px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  border-radius: 50%;
  border: 2px solid var(--green);
  margin-right: 10px;
  overflow: hidden;
}
#frmToday .itemCheck .progressBar{
    background-color: var(--green);
    height: 0px;
    width: 100%;
}
#frmToday .mFrmTodayItem{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 30px);
  min-height: 100px;
  background-color: var(--white);
  border-radius: 10px;
  border: 1px solid var(--grey);
  box-sizing: border-box;
  padding: 15px;
}
#frmToday .mFrmTodayIteminfo{
  display: flex;
  flex-flow: column nowrap;
}
#frmToday .mFrmTodayIteminfo h3{
  text-align: left;
  color: var(--charcoal);
}
#frmToday .mFrmTodayItemDetail{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding-top: 4px;
}
#frmToday .mFrmTodayItemDetail img{
  width: 15px;
  margin-right: 5px;
}
#frmToday .mFrmTodayItemDetail span{

  font-size: 80%;
}
#frmToday .mFrmTodayItem img{
  border-radius: 10px;
}
#frmToday .mFrmTodayItemImg{
  width: 120px;
}


/*PROFILE MENU FORM BEGIN HIER*/
#frmProfileMenu{
  position: relative;
  margin-bottom: 100px;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmProfileMenu header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmProfileMenu header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmProfileMenu .btnCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 20px;
}
#frmProfileMenu .frmPMenuBtn{
    text-align: center;
    border-radius: 7px;
    border: 1px var(--orange) solid;
    color: var(--orange);
    width: 80%;
    padding: 10px 0 10px 0;
    margin-bottom: 15px;
}

/*BILLING FORM BEGIN HIER*/
#frmBilling{
  position: relative;
  margin-bottom: 100px;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmBilling .billingCardCon{
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmBilling .billingCard{
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  background-image: linear-gradient(to right, var(--grey), Var(--white));
  border-radius: 7px;
  border: 1px var(--charcoal) solid;
  margin: 10px 5px 0 5px;
  box-sizing: border-box;
  padding: 8px 10px;
}
#frmBilling .cardHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#frmBilling .cardHead span{
  font-size: 80%;
  cursor: pointer;
}
#frmBilling .cardHead span:hover{
  color: var(--red);
}
#frmBilling .cardNumber{
  margin-top: 20px;
  color: var(--black);
  font-size: 110%;
}
#frmBilling .cardEx{
  display: flex;
  flex-flow: row nowrap;
  margin-top: 8px;
}
#frmBilling .cardEx span{
  margin: 0 3px 0 0;
  color: var(--white);
}
#frmBilling .nameOnCard{
  margin-top: 5px;
}
#frmBilling .setAsDefault{
  width: 100%;
  text-align: right;
  cursor: pointer;
}
#frmBilling .asDefault{
  width: 100%;
  text-align: right;
  cursor: pointer;
  color: var(--green);
  font-weight: bold;
}
#frmBilling .setAsDefault:hover{
  color: var(--green);
}
#frmBilling .addCardBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  border-radius: 7px;
  background-color: var(--orange);
  color: var(--white);
  padding: 5px 8px;
  margin: 10px 0 0 5px;



}
#frmBilling .addCardBtn:hover{
  background-color: var(--lightOrange);
}

/*PROFILE FORM BEGIN HIER*/
#frmProfile{
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  width: 100%;
}
#frmProfile .frmProfileMHead{
  margin: 60px 0 20px 0;
  width: 85%;
}
#frmProfile .photoFile{
    display: none;
}

#frmProfile .photoCon{
    position: relative;

}
#frmProfile .photoCon .photo{
    width: auto;
    max-width: 300px;
    max-height: 300px;
    user-select: none;
    user-drag: none;
    margin-bottom: 10px;
    user-select: none;
    -webkit-user-select: none;
}
#frmProfile .photoCon .cropBox{
    position: absolute;
    display: none;
    z-index: 2;
    background-color: transparent;
    border: 2px solid white;
    box-shadow: 2px 2px 5px black, -2px -2px 5px black;
    cursor: grab;
    resize: both;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;

}
#frmProfile .cropBox .flexBox{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
}
#frmProfile .photoCon .cropBox .cropMove{
    user-select: none;
    width: 50%;
    height: 50%;
    margin-top: 10%;
    background-color: rgba(255,255,255,0.3);
    position: relative;

}
#frmProfile .frmProfileBody{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  width: 100%;
}
#frmProfile .frmProfileImg{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  width: 85%;
}
#frmProfile label{
  width: 85%;
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
}
#frmProfile input{
  width: 100%;
  border-radius: 5px;
  padding: 10px 4vw;
  box-sizing: border-box;
  margin: 5px 0 10px 0;
  border: solid var(--orange) 1px;
  font-size: 110%;
}
#frmProfile textarea{
  width: 100%;
  border-radius: 5px;
  padding: 10px 4vw;
  box-sizing: border-box;
  margin: 5px 0 10px 0;
  border: solid var(--orange) 1px;
  font-size: 110%;
  font-family: sans-serif;
}
#frmProfile .addressCity{
  width: 70%;
}
#frmProfile .addressCode{
  width: 40%;
}
#frmProfile .checkLabel{
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  border-radius: 5px;
  padding: 10px 4vw;
  margin: 5px 0 10px 0;
  border: solid var(--orange) 1px;
  background-color: var(--white);
}
#frmProfile .gCheckbox{
  width: 30px;
  height: 30px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#frmProfile .btnBox{
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#frmProfile .btnSave{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--orange);
  border-radius: 7px;
  color: var(--white);
  margin: 20px;
  padding: 10px 0;
  width: 45%;
  border: 1px solid var(--orange);
}
#frmProfile .btnClose{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 7px;
  color: var(--orange);
  margin: 0 0 20px 0;
  padding: 10px 0;
  width: 45%;
  border: 1px solid var(--orange);
}

/*PROFILE FORM BEGIN HIER*/
#frmYourBus{
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  width: 100%;
}
#frmYourBus .frmProfileMHead{
  margin: 60px 0 20px 0;
  width: 85%;
}
#frmYourBus .photoFile{
    display: none;
}

#frmYourBus .photoCon{
    position: relative;

}
#frmYourBus .photoCon .photo{
    width: auto;
    max-width: 300px;
    max-height: 300px;
    user-select: none;
    user-drag: none;
    margin-bottom: 10px;
}
#frmYourBus .photoCon .cropBox{
    position: absolute;
    display: none;
    z-index: 2;
    background-color: transparent;
    border: 2px solid white;
    box-shadow: 2px 2px 5px black, -2px -2px 5px black;
    cursor: grab;
    overflow: hidden;
}
#frmYourBus .cropBox .flexBox{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
}
#frmYourBus .photoCon .cropBox .cropMove{
    user-select: none;
    width: 50%;
    height: 50%;
    margin-top: 10%;
    background-color: rgba(255,255,255,0.3);
    position: relative;

}
#frmYourBus .frmYBBody{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  width: 100%;
}
#frmYourBus .frmProfileImg{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  width: 85%;
}
#frmYourBus label{
  width: 85%;
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
}
#frmYourBus input{
  width: 100%;
  border-radius: 5px;
  padding: 10px 4vw;
  box-sizing: border-box;
  margin: 5px 0 10px 0;
  border: solid var(--orange) 1px;
  font-size: 110%;
}
#frmYourBus select{
  width: 100%;
  border-radius: 5px;
  padding: 10px 4vw;
  box-sizing: border-box;
  margin: 5px 0 10px 0;
  border: solid var(--orange) 1px;
  font-size: 110%;
}

#frmYourBus textarea{
  width: 100%;
  border-radius: 5px;
  padding: 10px 4vw;
  box-sizing: border-box;
  margin: 5px 0 10px 0;
  border: solid var(--orange) 1px;
  font-size: 110%;
  font-family: sans-serif;
}
#frmYourBus .addressCity{
  width: 70%;
}
#frmYourBus .addressCode{
  width: 40%;
}
#frmYourBus .checkLabel{
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  border-radius: 5px;
  padding: 10px 4vw;
  margin: 5px 0 10px 0;
  border: solid var(--orange) 1px;
  background-color: var(--white);
}
#frmYourBus .gCheckbox{
  width: 30px;
  height: 30px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#frmYourBus .btnBox{
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#frmYourBus .btnSave{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--orange);
  border-radius: 7px;
  color: var(--white);
  margin: 20px;
  padding: 10px 10px;
  width: 45%;
  border: 1px solid var(--orange);
}
#frmYourBus .btnDel{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 7px;
  color: var(--grey);
  margin: 0 0 20px 0;
  padding: 10px 0;
  width: 45%;
  border: 1px solid var(--grey);
}
#frmYourBus .btnClose{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 7px;
  color: var(--orange);
  margin: 0 0 20px 0;
  padding: 10px 0;
  width: 45%;
  border: 1px solid var(--orange);
}

/*MORNING JOUTNAL FORM BEGIN HIER*/
#frmMorJour{
  position: relative;
  margin-bottom: 100px;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmMorJour header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmMorJour header img{
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
#frmMorJour header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmMorJour label{
  width: 85%;
  color: var(--orange);
  font-size: 18px;
  margin: 15px 0;
}
#frmMorJour textarea{
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: sans-serif;
  margin-top: 8px;
  border: 1px solid var(--grey);
}
#frmMorJourBtnSave{
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  background-color: var(--orange);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 10px;
}

/*EVENING JOUTNAL FORM BEGIN HIER*/
#frmEveJour{
  margin-bottom: 100px;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmEveJour header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmEveJour header img{
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
#frmEveJour header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmEveJour label{
  width: 85%;
  color: var(--orange);
  font-size: 18px;
  margin: 15px 0;
}
#frmEveJour textarea{
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: sans-serif;
  margin-top: 8px;
  border: 1px solid var(--grey);
}
#frmEveJour .eveJourTask{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin: 8px 0;
}
#frmEveJour .eveJourTaskH{
  color: var(--charcoal);
  flex-grow: 1
}
#frmEveJour .eveJourTaskN{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 20%;
  border-radius: 5px;
  border: 1px solid var(--red);
  color: var(--red);
}
#frmEveJour .eveJourTaskN.selected{
    background-color: var(--red);
    color: var(--white);
}
#frmEveJour .eveJourTaskY{
  margin-left: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 20%;
  border-radius: 5px;
  border: 1px solid var(--green);
  color: var(--green);
}
#frmEveJour .eveJourTaskY.selected{
    background-color: var(--green);
    color: var(--white);
}

#frmEveJourBtnSave{
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  background-color: var(--orange);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 10px;
}

/*HABITS FORM BEGIN HIER*/
#frmHabits{
  margin-bottom: 100px;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmHabits header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmHabits header img{
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
#frmHabits header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmHabits label{
  width: 85%;
  color: var(--orange);
  font-size: 18px;
  margin: 15px 0;
}
#frmHabits textarea{
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: sans-serif;
  margin-top: 8px;
  border: 1px solid var(--grey);
}
#frmHabits .task{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin: 8px 0;
}
#frmHabits .taskH{
  color: var(--charcoal);
  flex-grow: 1
}
#frmHabits .taskN{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 20%;
  border-radius: 5px;
  border: 1px solid var(--red);
  color: var(--red);
}
#frmHabits .taskN.selected{
    background-color: var(--red);
    color: var(--white);
}
#frmHabits .taskY{
  margin-left: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 20%;
  border-radius: 5px;
  border: 1px solid var(--green);
  color: var(--green);
}
#frmHabits .taskY.selected{
    background-color: var(--green);
    color: var(--white);
}

#frmHabitsBtnSave{
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  background-color: var(--orange);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 10px;
}



/*POTCAST PLAYER BEGIN HIER*/
#frmPodPlay{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmPodPlay h2{
  text-align: center;
  width: 85%;
  color: var(--orange);
  margin: 20px 0 10px 0;
}
#frmPodPlay p{
  text-align: justify;
  width: 85%;
  color: var(--grey);
  margin: 0 0 20px 0;
}
#frmPodPlay audio{
  width: calc(100% - 60px);
  padding: 60px 30px 30px 30px;
  background-color: var(--orange);
}
#frmPodPlay .potLinkBtnCon{
  width: 85%;
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
#frmPodPlay .potLinkBtn{
  width: 100%;
  padding: 10px;
  background-color: var(--green);
  border-radius: 10px;
  color: var(--white);
  margin-top: 15px;
  text-align: center;
}
#frmPodPlay img{
  width: 35px;
  height: 35px;
  margin-top: 30px;
}
#frmPodPlay span{
  font-size: 12px;
  color: var(--grey);
}

/*MORNING MOOD FORM BEGIN HIER*/
#frmMorMood{
  flex-flow: column nowrap;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 100px;
}
#frmMorMood header{
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmMorMood header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmMorMood header img{
  width: 25px;
  height: 25px;
  margin-right: 20px;
  margin-bottom: 10px;
}

#frmMorMood .moodCon{
  width: 85%;
  display: flex;
  position: relative;
  flex-flow: column nowrap;
  box-sizing: border-box;
  padding: 8px 0;
}
#frmMorMood .moodTypeHead{
  width: 100%;
  font-size: 120%;
  color: var(--charcoal);
  text-align: left;
  box-sizing: border-box;
  margin-bottom: 8px;
}
#frmMorMood .moodOptCon{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#frmMorMood .moodBad{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  border-radius: 5px;
  border: 1px solid var(--red);
  color: var(--red);
}
#frmMorMood .moodOkay{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  border-radius: 5px;
  border: 1px solid var(--goldYellow);
  color: var(--goldYellow);
}
#frmMorMood .moodGood{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  border-radius: 5px;
  border: 1px solid var(--green);
  color: var(--green);
}
#frmMorMood .moodDoneBtn{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  margin: 15px 0 20px 0;
  border-radius: 5px;
  background-color: var(--orange);
  color: var(--white);
}

/*AFTERNOON MOOD FORM BEGIN HIER*/
#frmEveMood{
  flex-flow: column nowrap;
  position: relative;
  overflow-y: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 100px;
}
#frmEveMood header{
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmEveMood header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmEveMood header img{
  width: 25px;
  height: 25px;
  margin-right: 20px;
  margin-bottom: 10px;
}

#frmEveMood .moodCon{
  width: 85%;
  display: flex;
  position: relative;
  flex-flow: column nowrap;
  box-sizing: border-box;
  padding: 8px 0;
}
#frmEveMood .moodTypeHead{
  width: 100%;
  font-size: 120%;
  color: var(--charcoal);
  text-align: left;
  box-sizing: border-box;
  margin-bottom: 8px;
}
#frmEveMood .moodOptCon{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#frmEveMood .moodBad{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  border-radius: 5px;
  border: 1px solid var(--red);
  color: var(--red);
}
#frmEveMood .moodOkay{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  border-radius: 5px;
  border: 1px solid var(--goldYellow);
  color: var(--goldYellow);
}
#frmEveMood .moodGood{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  border-radius: 5px;
  border: 1px solid var(--green);
  color: var(--green);
}
#frmEveMood .moodDoneBtn{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  margin: 15px 0 20px 0;
  border-radius: 5px;
  background-color: var(--orange);
  color: var(--white);
}

/*TASKS FORM BEGIN HIER*/
#frmTasks{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 100px;
}
#frmTasks header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmTasks header .mFrmBackBtnCon{
  flex-grow: 1;
}
#frmTasks header .mFrmBackBtn{
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
#frmTasks header .mFrmAddBtn{
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
#frmTasks header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}

#frmTasks .newTaskCon{
    display: flex;
    width: 85%;
    margin-bottom: 10px;
    flex-flow: row nowrap;
    align-items: center;
    overflow: hidden;
    position: relative;
    max-height: 0px;
    transition: max-height 1s;
}
#frmTasks .newTaskCon input{
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    width: 75%;
    height: 35px;
    padding-left: 10px;
    border-radius: 10px 0 0 10px;
}
#frmTasks .newTaskCon div{
    width: 25%;
    height: 35px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    background-color: var(--orange);
    color: var(--white);
    border-radius: 0 10px 10px 0;
}


#frmTasks .mFrmTaskSumCon{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 10px 0;
  width: 85%;
  align-items: center;
}
#frmTasks .mFrmTaskSumItem{
  display: flex;
  box-sizing: border-box;
  flex-flow: column nowrap;
  justify-content: space-between;
  width: 46%;
  height: 80px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;

}
#frmTasks .taskSumItemHead{
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#frmTasks .taskSumItemHead img{
  width: 25px;
  height: 25px;
}
#frmTasks .taskSumItemHead span{
  color: var(--charcoal);
  font-size: 25px;
  font-weight: bold;
}
#frmTasks .taskSumItemFoot{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}
#frmTasks .taskSumItemFoot span{
  color: var(--grey);
  font-size: 16px;
}

#frmTasks .goalsCon{
  position: relative;
  width: 85%;
  border-radius: 10px;
  background-color: var(--white);
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}
#frmTasks .mFrmGoalHead{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 85%;
  margin-top: 20px;
  margin-bottom: 10px;
}
#frmTasks .mFrmGoalHead .mFrmAddGoalBtn{
  width: 25px;
  height: 25px;
  margin-left: 10px;
}

#frmTasks .goalItem{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
#frmTasks .goalItem img{
  width: 25px;
  height: 25px;
  margin: 10px;
}
#frmTasks .mFrmTGoalInfo{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: calc(100% - 25px);
  border-bottom: 0.5px solid var(--lightGrey);
}
#frmTasks .mFrmTGoalInfo span{
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  margin-left: 8px;
}
#frmTasks .mFrmTGoalInfo h4{
  color: var(--charcoal);
  flex-grow: 1;
}

#frmTasks .projsCon{
    max-height: 0px;
    overflow: hidden;
    transition: max-height 1s;
}
#frmTasks .projsCon .projItem{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  min-height: 46px;
}

#frmTasks .projsCon .projItem img{
  width: 25px;
  height: 25px;
  margin: 10px 10px 10px 10px;
}

#frmTasks .taskCon{
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1s;
}
#frmTasks .taskCon .taskItem{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 46px;
}
#frmTasks .taskCon .taskItem .checkbox{
  position: relative;
  width: 20px;
  height: 20px;
  margin: 10px 10px 10px 40px;
  border: 1px solid var(--black);
  border-radius: 50%;
  background-color: white;

}
#frmTasks .taskCon .taskItem.selected .checkbox{
    background-color: var(--orange);
}
#frmTasks .taskCon .taskItem.selected h4{
    text-decoration: line-through;
}

#frmTasks .mFrmTProjectInfo{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: calc(100% - 45px);
  border-bottom: 0.5px solid var(--lightGrey);
}
#frmTasks .mFrmTProjectInfo span{
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  margin-left: 8px;
}
#frmTasks .mFrmTProjectInfo h4{
  color: var(--charcoal);
  flex-grow: 1;
}
#frmTasks .mFrmTProjectInfo img{
  margin-left: 10px;
}

#frmTasks .dropDownBtn{
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -ms-transition: -ms-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
}
#frmTasks .dropDownBtn.open{
    transform:rotate(450deg);
    -ms-transform:rotate(450deg);
    -webkit-transform:rotate(450deg);
}


#frmTasks .addBtnCon{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
#frmTasks .addBtnCon .addProjBtn{
  width: 25px;
  height: 25px;
  margin: 10px 10px 10px 30px;
}
#frmTasks .addBtnCon .addTaskBtn{
    width: 25px;
    height: 25px;
    margin: 10px 10px 10px 40px;
}
#frmTasks .addBtnCon input{
  display: flex;
  box-sizing: border-box;
  align-items: center;
  height: 35px;
  width: 80%;
  padding-left: 10px;
  border-bottom: 1px var(--lightGrey) solid;
}
#frmTasks .mFrmAddProjectSpace{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: calc(100% - 45px);
  border-bottom: 0.5px solid var(--lightGrey);
}
#frmTasks .mFrmAddProjectSpace h4{
  color: var(--lightGrey);
  flex-grow: 1;
  display: flex;
  flex-flow: row;
  align-items: center;
  height: 45px;
}

#frmTasks .jsSaving{
    background-color: lightpink;
}


/*TASKS FORM BEGIN HIER*/
#frmTaskLists{
  margin-bottom: 100px;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmTaskLists header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmTaskLists header .mFrmBackBtnCon{
  flex-grow: 1;
}
#frmTaskLists header .mFrmBackBtn{
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
#frmTaskLists header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}

#frmTaskLists .tasksCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#frmTaskLists .taskCon{
  width: 85%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#frmTaskLists .taskCon h3{
  width: 100%;
  text-align: left;
  margin-top: 20px;
  color: var(--orange);
}
#frmTaskLists .taskItemCon{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
#frmTaskLists .taskCheckbox{
  box-sizing: border-box;
  height: 17px;
  width: 17px;
  margin: 0 15px 0 0;
  border-radius: 50px;
  border: solid var(--grey) 1px;
}
#frmTaskLists .taskListItemInfo{
  display: flex;
  flex-flow: row;
  align-items: center;
  width: calc(100% - 32px);
  color: var(--charcoal);
  border-bottom: 0.5px solid var(--grey);
  padding: 10px 0;
}
#frmTaskLists .taskItemCon.selected .taskCheckbox{
    background-color: var(--orange);
}
#frmTaskLists .taskItemCon.selected .taskListItemInfo{
    text-decoration: line-through;
}
#frmTaskLists .taskLAddTask{
  display: flex;
  flex-flow: row;
  color: var(--grey);
  border-bottom: 0.5px solid var(--grey);
  flex-grow: 1;
  height: 42px;
  align-items: center;
}
#frmTaskLists .taskLItemAddBtn{
  width: 25px;
  height: 25px;
  margin: 10px 10px 10px 30px;
}
#frmTaskLists .tasksTicked{
  background-color: var(--green);
  border: var(--green);
}

/*WHAT's ON YOUR MIND FORM BEGIN HIER*/
#frmWOYM{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmWOYM header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#frmWOYM header img{
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
#frmWOYM header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmWOYM .wOYMinput{
  width: 85%;
  min-height: 80px;
  background-color: var(--white);
  border-radius: 5px;
  margin: 8px 0;
  padding: 8px;
  border: solid var(--orange) 1px;
}
#frmWOYM .wOYMBtnCon{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 85%;
  margin-bottom: 20px;
}
#frmWOYM .wOYMBtn{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 30%;
  border-radius: 5px;
  background-color: var(--orange);
  color: var(--white);
}

/*BUSINESS FORM BEGIN HIER*/
#frmBus{
  width: 100%;
  position: relative;
  margin-bottom: 100px;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}
#frmBus header{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 85%;
  margin: 50px 0 20px 0;
}
#frmBus header span{
  width: 100%;
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmBus header input{
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px 0  10px 5px;
  width: 100%;
  font-size: 16px;
  margin: 5px 0 5px 0;
}
#frmBus .itemsCon{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;

}
#frmBus .frmBusCon{
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 85%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: var(--white);
}
#frmBus .frmBusLogo{
  border-radius: 50px;
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border: 1px var(--grey) solid;
}
#frmBus .frmBusInfo{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  flex-grow: 1;
}
#frmBus h3{
  margin-bottom: 5px;
}
#frmBus .frmBusInd{
  color: var(--orange);
  margin-bottom: 3px;
}

/*YOUR BUSINESS SEARCH BEGIN HIER*/
#srcYourBus{
  width: 100%;
  position: relative;
  margin-bottom: 100px;
  flex-flow: column nowrap;
  align-items: center;
}
#srcYourBus header{
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 85%;
  margin: 50px 0 20px 0;
}
#srcYourBus header span{
  width: 100%;
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#srcYourBus header input{
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px 0  10px 5px;
  width: 100%;
  font-size: 16px;
  margin: 5px 0 5px 0;
}
#srcYourBus .itemsCon{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;

}
#srcYourBus .frmBusCon{
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 85%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: var(--white);
}
#srcYourBus .frmBusLogo{
  border-radius: 50px;
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border: 1px var(--grey) solid;
}
#srcYourBus .frmBusInfo{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  flex-grow: 1;
}
#srcYourBus h3{
  margin-bottom: 5px;
}
#srcYourBus .frmBusInd{
  color: var(--orange);
  margin-bottom: 3px;
}
#srcYourBus .btnBox{
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#srcYourBus .btnSave{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--orange);
  border-radius: 7px;
  color: var(--white);
  margin: 20px;
  padding: 10px 0;
  width: 45%;
  border: 1px solid var(--orange);
}
#srcYourBus .btnClose{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 7px;
  color: var(--orange);
  margin: 0 0 20px 0;
  padding: 10px 0;
  width: 45%;
  border: 1px solid var(--orange);
}

/*PEACH ADD CARD FORM GEGIN HIER*/
#frmPeachAddCard{
    height: 100%;
}
#frmPeachAddCard .gFrmCon{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
}
#frmPeachAddCard header{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 85%;
  margin: 50px 0 20px 0;
}
#frmPeachAddCard header span{
  width: 100%;
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#frmPeachAddCard .amountDetail{
  flex-flow: column nowrap;
  align-items: center;
}
#frmPeachAddCard .amountDetailHead{
  font-size: 120%;
  color: var(--charcoal);
}
#frmPeachACAmount{
  color: var(--orange);
  font-size: 200%;
  font-weight: bold;
}
#frmPeachAddCard .iFrameCon{
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-rows: auto 50px;
  width: 100%;
  height: 100%;
  padding: 20px 8vw 10px 8vw;

}
#frmPeachAddCard .securePayCon{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
  overflow: hidden;
  height: 230px;
  transition: height 1s;
}
#frmPeachAddCard .securePayCon img{
  height: 100px;
}
#frmPeachAddCard .securePayCon span{
  margin: 20px;
}

#frmPeachAddCard iframe{
    height: 100%;
    width: 100%;
}
#frmPeachAddCard .btnBox{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 7px;
  margin: 0 0 20px 0;
  padding: 10px 0;
  width: 45%;
  border: 1px solid var(--orange);
}
#frmPeachAddCard .btnBox span{
  color: var(--orange);
}

/*BUSINESS VIEW FORM BEGIN HIER*/
#viewBusView{
  margin-bottom: 100px;
}
#viewBus header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 85%;
  margin-top: 50px;
  margin-bottom: 10px;
}
#viewBus header .backBtnCon{
  flex-grow: 1;
}
#viewBus header .backBtn{
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
#viewBus header span{
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}
#viewBus .viewLogo{
  width: 120px;
  height: 120px;
  border-radius: 70px;
  border: var(--grey) solid 1px;
  margin: 30px 0 10px 0;
}
#viewBus h1{
  width: 85%;
  text-align: center;
}
#viewBus h3{
  width: 85%;
  text-align: center;
  color: var(--charcoal);
  margin-bottom: 10px;
}
#viewBus h4{
  width: 85%;
  text-align: center;
  color: var(--orange);
}
#viewBus p{
  width: 85%;
  text-align: justify;
  color: var(--grey);
  margin: 10px 0;
}

#viewBus .linksCon{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content:  center;
  border-radius: 10px;
  background-color: var(--green);
  width: 85%;
  height: 50px;
  margin-bottom: 10px;
}
#viewBus .linksCon img{
  height: 25px;
  width: 25px;
  margin-right: 10px;
}
#viewBus .linksCon span{
  color: var(--white);
}

/*MOBILE FORM DISPLAY CSS*/

#frmToday{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmPodPlay{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#viewBus{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#frmSignUp{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#frmLogin{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#frmResetCode{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#frmNewPass{
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}