html, body {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: transparent;
}

body {
    background: #333 url(../img/bg_mobile.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #333;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(0,0,0,0.6);
}

.float-right{
    float: right;
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.3s opacity ease;
  background: #222;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
  background: #222;
}

.slide-enter-active,
.slide-leave-active {
  transition: 0.3s opacity ease, 0.3s transform ease;
  transform: translateY(0);
}

.slide-enter,
.slide-leave-active {
  opacity: 0;
  transform: translateY(-2em);
}


.slide-enter-active li,
.slide-leave-active li{
  transition: 0.2s opacity ease, 0.2s transform ease;
  transform: translateY(0);
}

.slide-enter li, .slide-leave-active li {
  opacity: 0;
  transform: translateX(-1em);
}

.slide-enter li i img, .slide-leave-active li i img{
  transform: scale(0);
}

.slide-enter-active li i img,
.slide-leave-active li i img{
  transition: 0.2s transform ease;
  transform: scale(1);
}

.slide-enter-active li:nth-child(1),.slide-leave-active li:nth-child(1){ transition-delay: 0s; }
.slide-enter-active li:nth-child(2),.slide-leave-active li:nth-child(2){ transition-delay: 0.05s; }
.slide-enter-active li:nth-child(3),.slide-leave-active li:nth-child(3){ transition-delay: 0.1s; }
.slide-enter-active li:nth-child(4),.slide-leave-active li:nth-child(4){ transition-delay: 0.15s; }
.slide-enter-active li:nth-child(5),.slide-leave-active li:nth-child(5){ transition-delay: 0.2s; }
.slide-enter-active li:nth-child(6),.slide-leave-active li:nth-child(6){ transition-delay: 0.25s; }
.slide-enter-active li:nth-child(7),.slide-leave-active li:nth-child(7){ transition-delay: 0.3s; }
.slide-enter-active li:nth-child(8),.slide-leave-active li:nth-child(8){ transition-delay: 0.35s; }

.slide-enter-active li:nth-child(1) i img,.slide-leave-active li:nth-child(1) i img{ transition-delay: 0.05s; }
.slide-enter-active li:nth-child(2) i img,.slide-leave-active li:nth-child(2) i img{ transition-delay: 0.1s; }
.slide-enter-active li:nth-child(3) i img,.slide-leave-active li:nth-child(3) i img{ transition-delay: 0.15s; }
.slide-enter-active li:nth-child(4) i img,.slide-leave-active li:nth-child(4) i img{ transition-delay: 0.20s; }
.slide-enter-active li:nth-child(5) i img,.slide-leave-active li:nth-child(5) i img{ transition-delay: 0.25s; }
.slide-enter-active li:nth-child(5) i img,.slide-leave-active li:nth-child(6) i img{ transition-delay: 0.3s; }
.slide-enter-active li:nth-child(5) i img,.slide-leave-active li:nth-child(7) i img{ transition-delay: 0.35s; }
.slide-enter-active li:nth-child(5) i img,.slide-leave-active li:nth-child(9) i img{ transition-delay: 0.4s; }


.btn.loading {
    background-image: url(../img/loader_circle.svg)!important;
    color: transparent !important;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
    pointer-events: none!important;
}

.loading .card{
  background: #222;
}

.loading .card *{
    opacity: 0.4;
    pointer-events: none!important;
}

.loading .card:before, .weatherLoader:before, .loading .buttons:before{
  content: "";
  position: absolute;
  display: block;
    background: rgba(0,0,0,0.2);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/loader_circle.svg)!important;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
    pointer-events: none!important;
}

.weatherLoader:before{
  background-color: transparent;
}

.weatherLoader *{
    opacity: 0.2;
}

.loading .loader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  z-index: 99999;
}

.loading .buttons, .loading .signUpEmail .loginForm{
  position: relative;
}

.loading .buttons *, .loading .signUpEmail .loginForm *{
  opacity: 0.4;
  pointer-events: none;
}

.loading .buttons:before, .loading .signUpEmail .loginForm:before{
  content: "";
  position: absolute;
  display: block;
    background: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/loader_circle.svg)!important;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
    pointer-events: none!important;
}





/* ================================================================================ TYPOGRAPHY ========================================================================*/
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?70616983');
  src: url('../font/fontello.eot?70616983#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?70616983') format('woff2'),
       url('../font/fontello.woff?70616983') format('woff'),
       url('../font/fontello.ttf?70616983') format('truetype'),
       url('../font/fontello.svg?70616983#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?70616983#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-cog:before { content: '\e800'; } /* '' */
.icon-alert:before { content: '\e801'; } /* '' */
.icon-down-open:before { content: '\e802'; } /* '' */
.icon-left-open:before { content: '\e803'; } /* '' */
.icon-right-open:before { content: '\e804'; } /* '' */
.icon-up-open:before { content: '\e805'; } /* '' */
.icon-down-open-mini:before { content: '\e806'; } /* '' */
.icon-left-open-mini:before { content: '\e807'; } /* '' */
.icon-right-open-mini:before { content: '\e808'; } /* '' */
.icon-up-open-mini:before { content: '\e809'; } /* '' */
.icon-down-open-big:before { content: '\e80a'; } /* '' */
.icon-left-open-big:before { content: '\e80b'; } /* '' */
.icon-right-open-big:before { content: '\e80c'; } /* '' */
.icon-up-open-big:before { content: '\e80d'; } /* '' */
.icon-location:before { content: '\e80e'; } /* '' */
.icon-report:before { content: '\e80f'; } /* '' */
.icon-mail:before { content: '\e810'; } /* '' */
.icon-pencil:before { content: '\e811'; } /* '' */
.icon-search:before { content: '\e812'; } /* '' */
.icon-camera:before { content: '\e813'; } /* '' */
.icon-home:before { content: '\e814'; } /* '' */
.icon-user:before { content: '\f061'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-bell:before { content: '\f0f3'; } /* '' */
.icon-flickr:before { content: '\f16e'; } /* '' */
.icon-google:before { content: '\f1a0'; } /* '' */
.icon-bell-off:before { content: '\f1f6'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-whatsapp:before { content: '\f232'; } /* '' */

h1{
    margin: 1em 0;
}

a{
    color: #333;
    text-decoration: underline;
}

h1, h2, h3, h4, p, a, button, label, img{
	user-select:none;
}

input[type='text'], input[type='email'], input[type='search'],
input[type='password'], textarea
{
  user-select: text!important;
  -webkit-user-select: text!important; 
}

#signUpEmail input::-webkit-input-placeholder,
#reset input::-webkit-input-placeholder{ /* Chrome/Opera/Safari */
  color: #CCC;
}
#signUpEmail input::-moz-placeholder,
#reset input::-moz-placeholder { /* Firefox 19+ */
  color: #CCC;
}
#signUpEmail input:-ms-input-placeholder,
#reset input:-ms-input-placeholder { /* IE 10+ */
  color: #CCC;
}
#signUpEmail input:-moz-placeholder,
#reset input:-moz-placeholder  { /* Firefox 18- */
  color: #CCC;
}

#register input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #CCC;
}
#register input::-moz-placeholder { /* Firefox 19+ */
  color: #CCC;
}
#register input:-ms-input-placeholder { /* IE 10+ */
  color: #CCC;
}
#register input:-moz-placeholder { /* Firefox 18- */
  color: #CCC;
}

.btn{
    font-size: 1em;
    padding: 0.5em 2em;
    border-radius: 0em;
    outline: none !important;
    box-shadow: none !important;
}

.btn .processingIcon {
    display: none;
    margin: -10px 0;
}

.processing .btn .processingIcon {
    display: inline-block;
}

.processing .btn {
    opacity: 0.7;
    pointer-events: none;
}

.btn-icon {
    padding: 0.5em 0.6em;
}

.btn-document {
    border-radius: 0.2em;
    width: 10.5em;
    text-align: center;
    padding: 6em 1.2em;
    white-space: normal;
    line-height: 1em;
    font-size: 0.9em;
    min-height: 15em;
    margin-right: 1em;
    color: #666;
    background-color: #f1f1f1;
    border: 2px dashed #ddd;
    background-size: cover;
    background-position: center;
    display: inline-block;
}

.btn-mini-icon {
    padding: 11px 10px;
    line-height: 10px;
    font-size: 1.5em;
}

.btn-document strong {
    color: #c00;
}

.btn-sm {
    font-size: 0.8em;
    padding: 0.3em 2em;
}

.btn-primary{
    color: #fff;
    background-color: #d71920 !important;
    border-color: #d71920 !important;
}

#stepButton{
    margin-left: 1em;
}

.processing #stepButton {
    pointer-events: none;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.9em;
    padding: 0.5em 2em 0.5em 0.5em;
}

/* ================================================================================ FORMS ========================================================================*/

.form-group{
    margin-bottom: 1.5em;
}

.processing .form-group {
    opacity: 0.5;
    pointer-events: none;
}

.form-group label {
    color: #666;
    margin: 0;
}

.form-group label small {
    color: #ccc;
}

.form-group label strong {
    color: #c00;
}

.form-control{
    font-size: 1.5em;
    padding: 0.2em 0.4em 0;
    color: #333;
    font-weight: bold;
    border: none;
    border-bottom: 3px solid #f1f1f1;
    height: auto;
    background: #f1f1f1;
    line-height: 1.5em;
}

.input-group>.form-control {
    padding-left: 0.2em;
}

.form-control:focus,.form-control:active {
    border-bottom-color: #333;
    box-shadow: none;
    background-color: #f1f1f1;
    color: #333;
}

.form-control::placeholder{
    color:#ccc;
    font-weight:100;
}

select.form-control{
    background: #f1f1f1 url(../img/select.svg) no-repeat calc(100% - 15px) center;
    background-size: 20px;
    height: 1.8em !important;
    -webkit-appearance: none;
}

select.form-control::-ms-expand {
    display: none;
}

.input-group-text{
	border: none;
	background: #f1f1f1;
	color: #333;
	padding: 0.1em 0 0em 0.4em;
	font-size: 1.6em;: 1.5em
	font-weight: unset;
}

.input-group{
  margin-top: 0.8em;
}

/* ================================================================================ RESPONSE GATE ========================================================================*/

.responseGate{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333 url(../img/bg_mobile.jpg) no-repeat;
    padding: 10%;
    text-align: center;
    z-index: 999999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.responseGate::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.responseGate img {
    max-width: 55%;
    z-index: 100;
}

.responseGate p {
    line-height: 1.2;
    font-size: 0.9em;
    margin:1em 0;
    color: #fff;
    font-weight: normal;
    z-index: 100;
}


@media all and (orientation: landscape) {
  .mobile.landscape .responseGate{
      display: flex;
  }
}

@media all and (orientation: landscape) {
  .mobile .login-mainScreen footer, .mobile .signup footer {
    display: none;
  }
  .mobile #signUpEmail.signUpEmail, .mobile #reset {
    margin-top: 20vh;
  }
  .mobile #signUpSocial .guest{
    margin-bottom: 4em;
  }
}

/* ================================================================================ NAV, FOOTER & APP ========================================================================*/

#app{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* background: #222; */
}

.main{
    height: calc(100% - 50px);
    width: 100%;
    position: relative;
    top: 50px;
    z-index: 90;
}

.scrollTop{
    transform: translateY(100%);
    background: #424242!important;
    border: 0!important;
    color: #FFF!important;
    text-transform: uppercase;
    font-size: 0.8em;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}

.scrolled .scrollTop{
    transform: translateY(0%);
}

.profileScreen .main {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.reportScreen .main, .mapScreen .main, .mapsubScreen .main {
    height: calc(100% - 0px);
    top: 0px;
}

.linkScreen .main {
    position: absolute;
    top: 0!important;
    left: 0;
    height: 100%!important;
    margin: 0;
    background: #FFF;
}

.linkScreen .cardHeader {
    background: #222;
    display: flex;
    color: #FFF;
    height: 50px;
    justify-content: center;
    align-items: center;
}

.linkScreen .link {
    height: 100%;
}

.linkScreen iframe {
    width: 100%;
    height: calc(100% - 50px);
    border: 0;
}

.linkScreen .cardHeader .backBtn {
    background: transparent;
    color: #FFF;
    font-size: 2em;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}



/* ================================================================================ ALERTS ========================================================================*/

.alertify{}

.alertify .ajs-dimmer {
    opacity: 0.9;
    z-index: 10200;
}

.alertify .ajs-modal {
    z-index: 10300;
}

.ajs-button {
    background: #f1f1f1;
    border: none;
    font-size: 0.9em;
}

.ajs-button.ajs-ok {
    background: #c00;
    color: #fff;
}

.ajs-header, .ajs-commands {
    display: none;
}

.alertify .ajs-body .ajs-content {
    padding: 0px;
}

.alertify-notifier .ajs-message{
  margin: 0 !important;
  width: 100% !important;
  padding: 0.5em 1em !important;
  border-radius: 0em;
  font-size: 0.8em;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  border: none !important;
  text-shadow: none !important;
}

.alertify-notifier .ajs-message.ajs-error {
    background: #d7191f;
    color: #fff;
}

.alertify-notifier.ajs-left {
    left: 0;
}

.alertify-notifier.ajs-top{
    top: 0 !important;
    left: 0 !important;
    width: 100%;
}

/* ================================================================================ LOADING ========================================================================*/
.loader {
  display: block;
  position: fixed;
  z-index: 100;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  color: #ccc;
}

.loader img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader::after {
  content: "LOADING";
  display: none;
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
}

.loadingStatus{
  display: flex;
  position: fixed;
  z-index: 999;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  top: 0;
  align-items: center;
  justify-content: center;
  color: #aaa;
  flex-direction: column;
  opacity: 0.95;
}

.loadingStatus img {margin-bottom: 2em;}

/* ================================================================================ APP.VUE ========================================================================*/

header{
  display: flex;
  height: 50px;
  background: rgba(34, 34, 34, 0);
  color: #FFF;
  align-items: center;
  position: fixed;
  width: 100%;
}

.profileScreen header {
    background: rgba(0, 0, 0, 0.4);
}

.scrolled header, .scrolled .weather {
    background: rgba(0, 0, 0, 0.2);
}

header .btn{
  padding: 0 0.5em;
  font-size: 1.2em;
}

header .btn i{
  color: #FFF;
  opacity: 1;
}

header .btn:active i, header .btn:focus i{
  opacity: 1;
}

header .logo{
  flex-grow: 1;
  text-align: left;
  justify-content: flex-start;
  max-width: 45%;
  margin-right: auto;
}

header .logo img.ethekwiniDome {
  width: 20%;
  max-width: 50px;
  margin-right: .25em;
}

header .logo img.mainLogo{
  width: 54%;
  max-width: 150px;
}

footer{
  height: auto;
  font-size: 0.7em;
  padding: 0 1em;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  bottom: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  padding-top: 4em;
}

footer p {
    margin: 0;
}

.profile footer, .login footer, .signup footer {
    height: auto;
    font-size: 1em;
    padding: 1em;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.2);
    margin-top: 1em;
}

.login-mainScreen footer, .signup footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.5em;
    background: rgba(0,0,0,0.2);
}

.login-mainScreen footer p, .signup footer p {
    font-size: 0.7em;
}

footer small {
    display: block;
}

footer i {
    color: #FFF;
}

input{
    transition: all .2s;
}

input:focus{
    outline: none;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.2);
    border-bottom: 2px solid #2196F3;
}

.iconContainer{
    display:block;
    text-align:center;
    /* transform: scale(8); */
    /* margin: 5rem 0; */
    color: rgba(255, 255, 255, .3);
}
/* ================================================================================ Home.VUE ========================================================================*/
.home{
	height: 100%;
	/* -webkit-mask-image: linear-gradient(
    to top,
        hsla(0, 0%, 0%, 0) 0%,
        hsla(0, 0%, 0%, 0.013) 0.81%,
        hsla(0, 0%, 0%, 0.049) 1.55%,
        hsla(0, 0%, 0%, 0.104) 2.25%,
        hsla(0, 0%, 0%, 0.175) 2.9%,
        hsla(0, 0%, 0%, 0.259) 3.53%,
        hsla(0, 0%, 0%, 0.352) 4.12%,
        hsla(0, 0%, 0%, 0.45) 4.71%,
        hsla(0, 0%, 0%, 0.55) 5.29%,
        hsla(0, 0%, 0%, 0.648) 5.88%,
        hsla(0, 0%, 0%, 0.741) 6.47%,
        hsla(0, 0%, 0%, 0.825) 7.1%,
        hsla(0, 0%, 0%, 0.896) 7.75%,
        hsla(0, 0%, 0%, 0.951) 8.45%,
        hsla(0, 0%, 0%, 0.987) 9.19%,
        hsl(0, 0%, 0%) 10%
    ); */
	display: flex;
	flex-direction: column;
}
.cards{
	width: 100%;
	flex-grow: 1;
	overflow-y: scroll;
	/* -webkit-mask-image: linear-gradient(
    to top,
        hsla(0, 0%, 0%, 0) 0%,
        hsla(0, 0%, 0%, 0.013) 0.81%,
        hsla(0, 0%, 0%, 0.049) 1.55%,
        hsla(0, 0%, 0%, 0.104) 2.25%,
        hsla(0, 0%, 0%, 0.175) 2.9%,
        hsla(0, 0%, 0%, 0.259) 3.53%,
        hsla(0, 0%, 0%, 0.352) 4.12%,
        hsla(0, 0%, 0%, 0.45) 4.71%,
        hsla(0, 0%, 0%, 0.55) 5.29%,
        hsla(0, 0%, 0%, 0.648) 5.88%,
        hsla(0, 0%, 0%, 0.741) 6.47%,
        hsla(0, 0%, 0%, 0.825) 7.1%,
        hsla(0, 0%, 0%, 0.896) 7.75%,
        hsla(0, 0%, 0%, 0.951) 8.45%,
        hsla(0, 0%, 0%, 0.987) 9.19%,
        hsl(0, 0%, 0%) 10%
    ); */
	 /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
}

.safetyTips{
  width: 100%;
}

.grid > div.interestsCard {
    width: 100%;
    flex: 0 0 100%;
    margin: 0 0 0.8em;
    padding: 1em 0;
    background: #FFF;
}

#app.darkmode .grid > div.interestsCard {
    background: #222;
    color: #FFF;
}

.scrolled .cards{
	-webkit-mask-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0) 1%,hsl(0, 0%, 0%) 8% );
}
.home .cards > div{
	/* transition: transform 0.3s ease; */
}
.home.forecastShown .cards{
}

.cardLoader{
  display: flex;
  padding: 0.2em 0;
  background: rgba(0,0,0,0.2);
  border-radius: 2px;
  justify-content: center;
  align-items: center;
}

/* ================================================================================ HomeCardList.VUE ========================================================================*/

.cardsContain{
    padding: 0 0.5em 0em;
}
.scrollable{
    height: 100%;
    overflow-y: scroll;
}
.card {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: 400;
    overflow: hidden;
    width: 100%;
    left: 0%;
    z-index: 1;
    position: relative;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    margin-bottom: 0.8em;
    border: none;
    min-height: 100%;
}

.card .imgWrap .backgroundBlur {
    display: none;
}

.alertCard {
    background: #C00 !important;
    color: #fff;
}

.cardHeader{
  padding: 0.5em;
  display: flex;
  justify-content: center;
}

.cardActions {
    font-size: 0.8em;
    line-height: normal;
    width: 100%;
    background-color: transparent;
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
}

.card.twitter .cardActions {
    flex: 0 0 100%;
    display: block;
}

.cardActions.cardBorder {
    border-top: 1px solid rgba(0,0,0,.1);
}

.card h2{
  font-size: 1.2em;
  padding: 0.5em;
  margin: 0;
}

.card small{
  font-size: 0.7em;
  display: block;
  opacity: 0.4;
}

.card p{
  font-size: 0.7em;
  padding: 0em 0.7em;
  line-height: 1.4;
  margin-bottom: 0.5em;
  color: #969696;
}

.card h3 {
    font-size: 1.1em;
}

.cardContent{
  padding: 0.5em 1em;
}

.card .cardHeader img{
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 100%;
  margin-right: 0.5em;
  align-self: flex-start;
  flex: 0 0 40px;
}

.card .cardHeader h3{
  flex: 1;
  margin: 0.1em 0 0 0;
}

.card .cardHeader h3 small{
  display: block;
  font-size: 0.6em;
  margin-top: 0.3em;
}

.card .photo{
  height: 16em;
  width: 100%;
  background-size: cover;
  background-position: center;
}

.cardBody{
    background-color: #fff;
    width:100%;
    padding: 1rem;
}

.button {
    padding: .8rem 1.5rem;
    font-weight: bold;
    border-radius: 50px;
    color: #fff;
    font-size: .7rem;
    transition: all .2s;
}
.btn{
    transition: all .2s;
}


.reportScreen .btn.backBtn, .profileScreen .btn.backBtn {
    position: absolute;
    left: 0;
    top: 0.7em;
    font-size: 1.6em;
    padding: 0;
    background: transparent;
    z-index: 999;
    color: #aaa;
}

.emergencyNumbers{
width: 100%;
max-width: 100%;
font-size: 0.8em;
margin: 1em 0;
}

.emergencyNumbers tr td:last-child{
  
width: 30%;
  
text-align: right;
}

.emergencyNumbers tr td {
    padding: 5px;
    vertical-align: top;
    border: 1px solid #eee;
}

.emergencyNumbers h3 {
    margin: 0;
    color: #303090;
}

#app.darkmode .emergencyNumbers h3 {
    color: #FFF;
}

.emergencyNumbers p {
    margin: 0.2em 0;
    padding: 0;
}

.emergencyNumbers ul li {
    color: #969696;
    font-size: 0.8em;
}

.emergencyNumbers ul {
    padding-left: 1.2em;
}

.button:active,
.btn:active,
a:active, .button:hover,
.btn:hover,
a:hover{
    transform: scale(.99);
    filter: brightness(50%);
}

.btn.logo{
    transform: none;
    filter: none;
}

.btn.logo:hover{
    transform: none;
    filter: none;
}

.select{
    padding: 0.5rem 1rem;
    border: 1px solid #DDDEE0;
    background-color: #fff;
    border-radius: 1px;
    color: #aaa;
    outline: none !important;
}

.label{
    font-weight: 200;
    font-size: .9rem;
    color: #aaa;
}

.moreOfThis{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .4rem;
    display: none;
}
.moreOfThis p{
     margin: 0;
}
.moreOfThis a {
    text-decoration: none;
    color: #333;
    padding: .1rem 1.2rem;
    border: 1px solid;
    border-radius: 2rem;
    text-transform: uppercase;
    font-size: .8rem;
    margin-left: .2rem;
}

.infinite-status-prompt{
    color: #FFF;
    /* background: rgba(0,0,0,0.2); */
    /* margin:  0 auto; */
    /* max-width: 80%; */
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 0.2em;
}

/* ================================================================================ HomeForecast.VUE ========================================================================*/

.forecast ul{
    display: flex;
    list-style-type: none;
    margin: 0.5em -0.8em 0;
    padding: 0.1em;
    text-align: center;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    background: rgba(0,0,0,0.4);
  }

.forecast ul i {
    height: 4em;
    display: flex;
    width: 100%;
}

.forecast ul small {
    font-size: 0.7em;
    white-space: nowrap;
}
.forecast li{
    padding: 0.4em;
    flex: 0 0 19%;
  }

/* ================================================================================ HomeWeather.VUE ========================================================================*/

  .scrolled .weather{}
  .summary h1,
  .summary h3,
  .summary h4,
  .summary h5{
      font-weight: 200;
  }
  .weather{
    color: #FFF;
    width: 100%;
    z-index: 999;
    margin-bottom: 0.6em;
  }
  .weather .summary{
    display: flex;
    color: #FFF;
    padding: 0em 1em 0;
    /* transition: all 0.3s; */
    position: relative;
    justify-content: flex-start;
    align-items: center;
  }

  .weather .summary h1{
    /* transition: all 0.3s cubic-bezier(0, 0, 0.04, 0.99); */
  }

.weather .summary h1 small {
    display: block;
    font-size: 0.2em;
    letter-spacing: 0.1em;
    margin-top: 0.4em;
    border-bottom: 1px solid rgba(255,255,255, 0.2);
    padding-bottom: 0.4em;
}

.scrolled .weather .summary h1 small {
    border-bottom: 1px solid rgba(255,255,255,0);
}


.weather .summary .weatherText {
    position: relative;
    padding-left: 1em;
  }

.weather .summary .weatherText .fullDescriptionWrapper{
    /* transition: all 0.1s cubic-bezier(0, 0, 0.04, 0.99); */
    font-size: 0.7em;
    line-height: 1.2;
    max-height: 50px;
    margin-right: -100px;
}

.scrolled .weather .summary .weatherText .fullDescriptionWrapper{opacity: 0;max-height: 0;}

.scrolledDescriptionWrapper{
        position: absolute;
        visibility: hidden;
        opacity: 0;
        /* transition: all 0.3s ease-in-out 0.3s; */
        font-size: 12px;
        line-height: 1.2;
        left: 130%;
        letter-spacing: -0.5px;
        width: 220%;
        top: -0.1em;
  }

.scrolled .weather .summary .scrolledDescriptionWrapper{
  visibility: visible;
  opacity: 1;
  left: 100%;
  top: 7%;
  } 

  header .btn.viewMap{
      display: none;
    }


  .weather .btn{
    font-size: 0.8em;
    padding: 0.2rem 1rem;
  }
  .weather .viewMap{
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    background: #0096fa;
    border-radius: 20px;
  }
  .weather .btnForecast{
    color: #FFF;
    text-transform: uppercase;
    background: #0096fa;
    border-radius: 20px;
  }

.forecastShown .weather .btnForecast {
    background: #424242;
}
  .weather .forecast{
    /* transition: all 0.3s; */
    margin: 1em 0 0.5em;
    padding: 0 0.5em;
    min-height: 0;
  }
  .scrolled .weather .forecast{
  margin: 0.5em 0;
  }
  .weather sup {
    top: -.5em;
    font-size: 0.6em;
  }
  .weather i{
  }

.weather i.weatherIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: weatherIcon 2s infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    width: 35%;
    /* transition: all 0.3s cubic-bezier(0, 0, 0.04, 0.99); */
    /* margin-top: 0.5em; */
    margin-bottom: -0.5em;
}

.forecastShown .weather .icon-down-open:before {
    transform: rotate(180deg);
}

.weather .icon-down-open:before {
    transition: transform 0.2s;
}
  .weather img{
    width: 100%;
  }
  .weather h3{
    font-size: 1em;
    text-transform: uppercase;
    margin: 0;
    transform: translateY(0px);
    max-height: 20px;
    /* transition: all 0.1s cubic-bezier(0, 0, 0.04, 0.99); */
  }
  .weather h1{
    font-size: 6em;
    margin: 0 0 0.05em 0;
    letter-spacing: -3px;
    position: relative;
    line-height: 0.8;
  }
  .weather h4{
    font-size: 0.85em;
    margin: 0 0 0.1em 0;
    opacity: 1;
    transition: transform 0.4s;
  }
  .weather h5{
    font-size: 0.8em;
    margin: 0 0 0.1em 0;
    opacity: 1;
    transition: transform 0.4s;
  }
  .scrolled .weather h1{
  font-size: 3em;
  }
  .scrolled .weather h3{
  opacity: 0;
  transform: translateY(-20px);
  max-height: 0;
  }
  .scrolled .weather i.weatherIcon {
  width: 20%;
  }
  .scrolled .weather h4, .scrolled .weather h5 {
    /* transform: translate(6rem,-6rem); */
  }
  


/* ================================================================================ map.VUE ========================================================================*/
  #map.map{
    height: 100%;
    position: relative;
  }

  #map.map .leaflet-container{
    height: 100%;
  }

  #map .mapFilters{
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: absolute;
    padding: 0.9rem 0.5em;
    top: 0px;
    left: 0%;
    z-index: 10001;
    background-image: linear-gradient(#222, transparent);
  }

  #map .mapFilters .btn{
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
    padding: 0.3rem 1.4em;
    border-radius: 0px;
    font-size: 0.7rem;
    margin: 0em 0em;
    width: 51%;
    border-left: none;
    border-right: none;
  }

#map .mapFilters .btn:nth-child(2) {
    border-radius: 20px 0 0 20px;
    border-left: 1px solid;
}

#map .mapFilters .btn:last-child {
    border-radius: 0 20px 20px 0;
    border-right: 1px solid;
}

#map .mapFilters .btn.backBtn {
    padding: 0;
    border: none;
    font-size: 1.5em;
    width: auto;
}
  #map .mapFilters .btn.active{
      background-color: #2196F3;
      border: #2196F3;
  }

  #map .meter:not(.windMeter),
  #map .windMeter > div{
    position:absolute;
    width:95%;
    height: 2.5em;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    display: flex;
    font-size: .7rem;
    justify-content: center;
    background-color: #aaa;
  }

#map .meter :nth-child(1), #map .meter > div :nth-child(1){
    background-color: #555;
    line-height: 1em;
    text-transform: uppercase;
    font-size: 0.8em;
}
#map .meter :nth-child(2), #map .meter > div :nth-child(2){
    background-color: #001160;
}
#map .meter :nth-child(3), #map .meter > div :nth-child(3){
    background-color: #001160;
}
#map .meter :nth-child(4), #map .meter > div :nth-child(4){
    background-image: linear-gradient(90deg, #001160,#0035E3,#03FAF3);
}
#map .meter :nth-child(5), #map .meter > div :nth-child(5){
    background-image: linear-gradient(90deg,#03FAF3,#0AEB3C,#F6E93D);
}
#map .meter :nth-child(6), #map .meter > div :nth-child(6){
    background-image: linear-gradient(90deg,#F6E93D,#EE8F25,#F00509);
}
#map .meter :nth-child(7), #map .meter > div :nth-child(7){
    background-image: linear-gradient(90deg,#F00509,#7F0005,#660C5C);
}
#map .meter :nth-child(8), #map .meter > div :nth-child(8){
    background-image: linear-gradient(90deg, #660C5C,#921589,#EF63EA);
}


#map .meter span {
  color: #fff;
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
  border: 0;
  margin: 0;
  height: 100%;
  align-items: center;
}



 #map .rangeScrubber{
    position: absolute;
    z-index: 10002;
    bottom: 1em;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 0.5rem;
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
  }

#map .rangeScrubber .dateRange {
    width: 23%;
    font-size: 0.7em;
    color: #FFF;
    background: #00000087;
    border-radius: 2px;
    margin-right: 1%;
    padding: 0.2em;
    text-align: center;
    text-transform: uppercase;
}



#map  .rangeScrubber a{
    box-sizing: border-box;
    height: 2rem;
    width: 2rem;
    background-color: #2196F3;
    border-radius: 50%;
    color: #fff;
    margin-left: auto;
    position: relative;
    text-align: center;
    line-height: 2rem;
  }



#map  .rangeScrubber a i{
    margin-left: 3px;
    -webkit-text-stroke: 2px #fff;
  }

  .pauseIcon{
    font-style: normal;
    margin-left: 0 !important;
    font-size: .8rem;
    line-height: 1;
    display: inline-block;
    position: absolute;
    left: 51%;
    top: 45%;
    transform: translate(-50%, -50%);
}

#map .rangeScrubber p{
    display: block;
    color: #fff;
}

#map .rangeScrubber input[type=range]
{
    -webkit-appearance: none !important;
    background: #fff;
    margin-bottom: .5rem;
    height: 5px;
    flex-grow: 1;
    /* width: 84%; */
    border-radius: 10px;
    -webkit-transform: translate3d(0px, 0px, 0px);
    margin-top: 10px;
    cursor: pointer;
    margin-right: 1%;
}

#map .rangeScrubber input[type=range]::-webkit-slider-thumb
{
    -webkit-appearance: none !important;
    background: #2196F3;
    border: 3px solid #fff;
    height: 25px;
    width: 25px;
    cursor: pointer;
    -moz-border-radius: 25px;
    border-radius: 25px;
    position: relative;
}





#map .rangeScrubber input[type=range]::-webkit-slider-runnable-track {

}


 #map  .leaflet-top {
      display: none;
  }
 #map  .leaflet-control-attribution{
      display: none;
  }

  @keyframes loadingAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

  @keyframes loadingAnimationReverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* ================================================================================ HomeFilterButtons.VUE ========================================================================*/
.filterButtons{
    display: flex;
    padding: 0rem 0.5em 0rem 0.5em;
    justify-content: space-between;
    margin: 1.5em 0 0 0;
    /* transition: all 0.3s; */
  }

.forecastShown .filterButtons {
    top: 370px;
}

.scrolled .filterButtons {
    margin-bottom: -0.5em;
    margin-top: 0.5em;
}

.scrolled .forecastShown .filterButtons {
    top: 270px;
}

.filterButtons .btn{
    border: none;
    background-color: #424242;
    color: #ffffff;
    padding: .3rem 1rem;
    border-radius: 0px;
    font-size: 0.7rem;
    font-weight: 200;
    text-transform: uppercase;
    flex: 1;
    text-align: center;
  }

#app.darkmode .filterButtons .btn {
    background: #333;
}

#app.darkmode .filterButtons .btn.active {
    background-color: #111;
}

.filterButtons .btn:last-child {
    border-radius: 0 20px 20px 0;
}
.filterButtons .btn.home{
    padding: 0.3rem 0.8rem;
    border-radius: 20px 0 0 20px;
    flex: 0;
    display: flex;
    justify-content: center;
} 

.filterButtons .btn.active{
      background-color: #696767;
      color: #fff;
}

/* ================================================================================ CamsView.VUE ========================================================================*/

#cams .camsView{
      z-index: 1000;
      width: 90%;
      box-shadow: 0 0 120px 170px rgba(0,0,0,0.6);
      background-image: url(../img/loader_circle.svg)!important;
      background-repeat: no-repeat!important;
      background-position: 50% 50%!important;
      pointer-events: none!important;
      background-color: #222;
    }

#cams .camsView img{
        width: 100%;
    }

#cams .rainFallChart{
        margin: .4rem;
        background-color: #eee;
    }

#cams .camsViewGallery{
        position: absolute;
        overflow-x: scroll;
        width: 100vw;
        height: 120px;
        padding-bottom: 1em;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: flex;
        background-color: #fff;
         /* has to be scroll, not auto */
        -webkit-overflow-scrolling: touch;
    }

#cams .camsViewGallery > div{display: flex;flex-direction: column;flex: 0 0 20%;font-size: 0.6em;text-align: center;}

#cams .camsViewGallery img{
        max-width: 100px;
        padding: .2rem;
    }

#cams .camWrap{
  position: absolute;
  width: 100%;
  top: 0%;
  height: 100%;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}  

/* ================================================================================ Camera.VUE ========================================================================*/

#cameraCard .cardActions{
        padding: 8px 0 0 0;
        
}


/* ================================================================================ Login.VUE ========================================================================*/

#signUpSocial.signUpSocial{
    color: #fff;
    text-align: center;
    padding: 1.2rem;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-items: center;
    margin-top: 10%;
}

#signUpSocial .buttons{
    
    flex-grow: 1;
}
#signUpSocial .buttons .btn{
    position: relative;
}

#signUpSocial .buttons .btn.backBtn {
    width: 90%;
    margin: auto;
    background-color: transparent;
    border: 1px solid #fff;
}

#signUpSocial .buttons i {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
}

#signUpSocial .guestContainer{
    flex-grow: 1;
}

#signUpSocial.signUpSocial h1{
    margin-bottom: .6rem;
    text-transform: uppercase;
    font-size: 1.8rem;
}

#signUpSocial.signUpSocial h1 span {
    font-weight: 100;
}

#signUpSocial.signUpSocial p{
    font-weight: 200;
    line-height: 1.2;
    font-size: .9rem;
    padding: 0 1rem;
}

#signUpSocial.signUpSocial footer p {
    font-size: 0.7em;
    margin: 0;
}

#signUpSocial.signUpSocial hr{
    border: .04rem solid rgba(255, 255, 255, 0.34);
    margin: 1.5rem 2.5rem;
}

#signUpSocial .btn{
    border-radius: 100px;
    display: block;
    width: 100%;
    padding: .9rem;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #fff;
}

#signUpSocial .google{
    background-color: #2196F3;
    margin-top: 2rem;
}

#signUpSocial .facebook{
   background-color: #2C5D95;
   margin-top: 1rem;
}

#signUpSocial .emailBtn{
    background-color: transparent;
    border: 1px solid #fff;
    margin-top: 1rem;
}

#signUpSocial .guest{
    text-transform: uppercase;
    color: #fff !important;
    font-size: .8rem;
    text-decoration: underline !important;
    margin: 2em 0 0em;
    display: inline-block;
}
/* ================================================================================ EmailLogin.VUE ========================================================================*/

#signUpEmail.signUpEmail,
#reset {
    color: #fff;
    text-align: center;
    padding: 1.2rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
#signUpEmail.signUpEmail h1,
#reset h1{
    margin-bottom: .6rem;
    text-transform: uppercase;
    font-size: 1.8rem;
}
#signUpEmail.signUpEmail h1 span,
#reset h1 span{
  font-weight: 100;
}
#signUpEmail.signUpEmail p,
#reset p{
    font-weight: 200;
    line-height: 1.2;
    font-size: .9rem;
    padding: 0 1rem;
}
#signUpEmail .backToSocial,
#reset .backToSocial{ 
    background-color: transparent;
    border: 1px solid #fff;
}

#signUpEmail .loginForm,
#reset .loginForm{
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #fff;
  border-radius: 20px;
}

#signUpEmail .loginFormText,
#reset .loginFormText{
  text-transform: uppercase;
  font-size: .9rem;
  margin-bottom: 1rem;
}

#signUpEmail input,
#reset input{
  background-color: transparent;
  padding: 1rem;
  color: #fff;
  font-weight: 200;
  display: block;
  width: 100%;
  border: 1px solid #fff;
  margin-bottom: .6rem;
}

#signUpEmail input:focus,
#reset input:focus{
  outline: none;
}

#signUpEmail input.password{
}
#signUpEmail .btn,
#reset .btn{
    border-radius: 100px;
    display: block;
    width: 100%;
    padding: .9rem;
    text-transform: uppercase;
    font-size: .9rem;
    color: #fff;
}
#signUpEmail .submitBtn,
#reset .submitBtn{
  background-color: #2196F3;
}

#signUpEmail.signUpEmail,
#reset{
    color: #fff;
    text-align: center;
    padding: 1.2rem;
    height: 80vh;
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
    justify-content: center;
}
#signUpEmail.signUpEmail h1,
#reset h1{
    margin-bottom: .6rem;
    text-transform: uppercase;
    font-size: 1.8rem;
}
#signUpEmail.signUpEmail h1 span,
#reset{
  font-weight: 100;
}
#signUpEmail.signUpEmail p,
#reset p{
    font-weight: 200;
    line-height: 1.2;
    font-size: .9rem;
    padding: 0 1rem;
}
#signUpEmail .backToSocial,
#reset .backToSocial
{
    background-color: transparent;
    border: none;
}

#signUpEmail .backBtn,
#reset .backBtn{
    background: transparent;
    margin-top: 1em;
}

#signUpEmail .loginForm,
#reset .loginForm{
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #fff;
  border-radius: 10px;
}

#signUpEmail .loginFormText,
#reset .loginFormText{
  text-transform: uppercase;
  font-size: .9rem;
  margin-bottom: 1rem;
}

#signUpEmail input,
#reset input{
  background-color: transparent;
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: 200;
  display: block;
  width: 100%;
  border: 1px solid #fff;
  margin-bottom: .6rem;
  background-color: rgba(255, 255, 255, 0.23921568627450981);
  text-align: center;
  border-radius: 20px;
}

#signUpEmail input:focus,
#reset input:focus{
  outline: none;
}

#signUpEmail input.password,
#reset input.password{
  /* letter-spacing: 5px; */
  background-color: rgba(255, 255, 255, 0.23921568627450981);
  padding-left: 1rem;
}
#signUpEmail .btn,
#reset .btn{
    border-radius: 100px;
    display: block;
    width: 100%;
    padding: .9rem;
    text-transform: uppercase;
    font-size: .9rem;
    color: #fff;
}
#signUpEmail .submitBtn,
#reset .submitBtn{
  background-color: #2196F3;
}

#reset input{
    background: rgba(255, 255, 255);
    color: #333;
}

#reset.loading{
    pointer-events: none;
}


/* ================================================================================ Register.VUE ========================================================================*/

#register {}

#register .signUpEmail{
    color: #fff;
    text-align: center;
    padding: 1.2rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
#register .signUpEmail h1{
    margin-bottom: .6rem;
    text-transform: uppercase;
    font-size: 1.8rem;
}
#register .signUpEmail h1 span{
  font-weight: 100;
}
#register .signUpEmail p{
    font-weight: 200;
    line-height: 1.2;
    font-size: .9rem;
    padding: 0 1rem;
}
#register .backToSocial{
    background-color: transparent;
    border: 1px solid #fff;
}

#register .loginForm{
  margin: 1rem 1rem;
  padding: 1.5rem;
  border: 1px solid #fff;
  border-radius: 20px;
}

#register .btn.backBtn {
    width: 50%;
    margin: auto;
    background: transparent;
}

#register .loginForm h1 {
    color: #fff;
    text-align: center;
    margin: 0 0 0.5em;
    font-size: 1.6em;
}

#register .header {
    color: #fff;
    padding: 2em 1em 0;
    text-align: center;
}

#register .loginFormText{
  text-transform: uppercase;
  font-size: .9rem;
  margin-bottom: 1rem;
}

#register input{
  background-color: rgba(255, 255, 255, 0.15);
  padding: 0.5rem 1.5rem;
  color: #fff;
  font-weight: 200;
  display: block;
  width: 100%;
  border: 1px solid #fff;
  margin-bottom: .6rem;
  border-radius: 30px;
}

#register input:focus{
  outline: none;
}

#register input.password{
  /* letter-spacing: 5px; */
  /* font-size: 2rem; */
  /* padding: .2rem 0; */
  /* padding-left: 1rem; */
}
#register .btn{
    border-radius: 100px;
    display: block;
    width: 100%;
    padding: .9rem;
    text-transform: uppercase;
    font-size: .9rem;
    color: #fff;
}
#register .submitBtn{
  background-color: #2196F3;
}
/* ================================================================================ Profile.VUE ========================================================================*/

#profile .iconContainer{
    transform: scale(1);
    margin: 1rem 0;
    display: none;
}
#profile.profileContainer .iconContainer .icon-user{
    display:inline-block;
    color: rgba(255, 255, 255, .5);
    font-size: 1em;
    text-align: center;
    border: 3px solid rgba(255, 255, 255, .5);
    padding: 1rem;
    margin: 0rem auto;
    border-radius: 50%;
    line-height: 1rem;
}
#profile.profileContainer .icon-user::before{
    margin: 0;
}

#profile .card{
    width: 100%;
    border-radius: 0px;
    left: 0%;
    margin: 0;
}

.profileScreen .profile{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

#profile .cardHeader{
    background-color: #DDDEE0;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem 1rem;
}

#profile .cardHeader_details{
    line-height: 1.2;
    flex: 0 0 70%;
    font-size: .9rem;
    margin: auto auto;
    padding: 0 0 0 1em;
}

#profile .cardHeader_name{
    display:block;
    font-weight: bold;
}

#profile .cardHeader_email{
    display:block;
}

#profile .cardHeader_button{
    flex: 0 0 20%;
    background-color: #4191DC;
    margin: auto auto;
    border: none;
}

#profile .cardHeader.thin{
    padding: .8rem 1rem;
}

#profile .cardHeader h3{
    font-size: .8rem;
    font-weight: 600;
    color: #737373;
    line-height: 1;
    margin: auto 0.5rem;
}

#profile .region_select-option{
    display:block;
    width: 50%;
    float: right;
    background-color: #f5f5f5;
    color: #333;
    margin-top: -8px;
    border-radius: 20px;
    outline: none !important;
    text-align: right;
    -webkit-appearance: none;
}

#profile .region_select-label {
    width: 100%;
    padding-left: 0.4em;
}

#profile .select_container{
    display: flex;
    justify-content: space-between;
    font-weight: 200;
    font-size: .9rem;
    padding-top: 0.8rem;
    padding-bottom: 0.6rem;
}

#profile .select_container-label{
    margin: auto 0;
}

#profile .select_container .switch{
    margin: auto 0;
}

#profile .notificationIcon{
    color: #737373;
    margin-right: .5rem;
}

#profile .btnGroup{
    font-weight: 200;
}

#profile .buttonGroupLeft {
    color: #737373;
    background-color: #DDDEE0;
    border: 0;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    padding: .5rem 1em;
    margin: 0;
    outline: none;
    display:inline-block;
    float:left;
}

#profile .buttonGroupRight {
    color: #737373;
    background-color: #DDDEE0;
    border: 0;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    padding: .5rem 1rem;
    margin: 0;
    outline: none;
    display:inline-block;
}

#profile .buttonGroupLeft.active,
#profile .buttonGroupRight.active {
    color: #fff  !important;
    background-color: #4191DC !important;
}

#profile #tempButtons .buttonGroupLeft{
    padding-left: 1rem;
    padding-right: 1rem;
}

#profile .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

#profile .switch input {display:none;}

#profile .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

#profile .slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: 0.2s cubic-bezier(0, 0, 0.03, 1.01);
  box-shadow: 0 2px 2px rgba(0,0,0,0.4);
}

#profile input:checked + .slider {
  background-color: #4191DC !important;
}

#app.darkmode #profile input:checked + .slider {}

#profile input:checked + .slider:before {}

#profile input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

#profile input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

#profile .slider.round {
  border-radius: 34px;
}

#profile .slider.round:before {
  border-radius: 50%;
}

#profile .select_container-interests{
    padding: 1rem 1rem;
    overflow-x: scroll;
    cursor: pointer;
    display: flex;
    margin-top: 0.8em;
}

#profile .select_container-interests h2 {
    display: none;
}

#profile .select_container-interests-item {
    width: 6rem;
    height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 0 .5rem;
}


#profile .select_container-interests-item-icon{
    width: 4rem;
    height: 4rem;
    border: 1px solid #DDDEE0;
    border-radius: 50%;
}

#profile .select_container-interests-item-icon img {
    width: 70%!important;
}


#profile .select_container-interests-item-text{
    justify-self: center;
    align-self: center;
    margin: 0;
    color: rgb(143, 143, 143);
    font-weight: 200;
}

#profile .select_container-interests-item-icon svg{
    width: 2.5rem;
    height: 2.5rem;

}

#profile .select_container-interests-item.active .select_container-interests-item-icon img{
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}

#profile .select_container-interests-item.active .select_container-interests-item-text{
    color: #2196F3;
}

#profile .select_container-interests-item-text{
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 700;
}

/* ================================================================================ Report.VUE ========================================================================*/

#report.report{
    height: 100%;
    overflow-y: scroll;
}

#report .card{
    border-radius: 0;
    margin-bottom: 0em;
}
#report .cardHeader{
    background-color: #222222;
    padding: 0.7rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    color: #FFF;
}

#report .cardHeader .mainHeader{
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
}

#report .cardHeader .secondHeader{
    display: block;
    font-size: 0.8rem;
    font-weight: 200;
    line-height: 1.2;
}

#report .cardBody{
    padding: 0 1rem;
}

#report .upload{
    margin-top: 0.9rem;
}

#report .select{
    padding: 0.4rem 1rem;
    border: tr;
    background-color: #f5f5f5;
    border-radius: 22px;
    color: black;
    display:block;
    width: 100%;
    -webkit-appearance: none;
}

#report .label{
    font-weight: 200;
    font-size: .9rem;
    color: #aaa;
    margin-bottom: 0rem;
}

.imgWrap{
      margin: 0 auto;
    width: 100%;
    display: block;
    text-align: center;
}


#report .upload:hover{
cursor: pointer;
}

#report .upload .imageUpload{
    width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

#report .imageUpload + label {
    font-size: .9rem;
    /* font-weight: 200; */
    display: block;
    margin-right: 0px;
    margin-bottom: 0;
    cursor: pointer;
    padding: 0.4rem 1rem;
    border: 1px solid #DDDEE0;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    background-color: #f5f5f5;
    border-radius: 50px;
    width: 80%;
    margin-left: 10%;
}

#report .upload:focus + label{
    background-color: #2196F3;
    color: #fff;
    
}

#report .submitButton{
    margin-top: 1.2rem;
    padding: 0.9rem 1rem;
    text-align: center;
    display: block;
    width: 100%;
    color: #fff;
    background-color: #4191DC;
    border: none;
    border-radius: 100px;
    font-size: .9rem;
    outline: none !important;
}

#report .icon-camera{
    margin-left: 0px;
    color: rgb(143, 143, 143);
    font-size: 1.2rem;
}

/* ================================================================================ Interests.VUE ========================================================================*/

#interestsCard.interestsCard h2{
    margin: 0 0 0.2em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.2em;
}

.grid > div#interestsCard.interestsCard h2 {
    margin-bottom: 0.5em;
}

.profile #interestsCard.interestsCard h2 {
    display: none;
}
#interestsCard .select_container-interests{
    padding: .2rem .2rem;
    overflow-x: scroll;
    cursor: pointer;
    display: flex;
}

.grid > div#interestsCard .select_container-interests {
    /* justify-content: center; */
}
#interestsCard i.icon-right-open-big{
    position: absolute;
    color: #aaa;
    right: -9px;
    top: 35%;
    font-size: 1.5rem;
    transform: (-50%, -50%);
}

#interestsCard .select_container-interests-item {
    width: 6rem;
    height: 7.5rem;
    display: flex;
    flex: 0 0 5em;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 0 .5rem;
}

.grid > div#interestsCard .select_container-interests-item .select_container-interests-item-icon {
    width: 80px;
    flex: 0 0 80px;
    height: 80px;
    max-height: 80px;
    padding: 17px;
}

.grid > div#interestsCard .select_container-interests-item .select_container-interests-item-icon img {
}

.grid > div#interestsCard .select_container-interests-item {
    flex: 0 0 90px;
}


#interestsCard .select_container-interests-item-icon{
    padding: 0;
    border: none;
    border-radius: 100%;
    display: flex;
    color: #888;
    font-size: 1.8rem;
    background-color: #ececec;
    justify-content: center;
    align-items: center;
}

#interestsCard .select_container-interests-item-icon.active {
    background-color: #2196f3;
    border: 1px solid #0f76c7;
}

#interestsCard .select_container-interests-item-icon.active img {
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}

#interestsCard .select_container-interests-item-icon img {
    width: 100%;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    opacity: 0.5;
}

#interestsCard .select_container-interests-item-icon.active img {
    -webkit-filter: none;
    filter: none;
}


#interestsCard .select_container-interests-item-text{
    justify-self: center;
    align-self: center;
    margin: 0;
    color: rgb(143, 143, 143);
    font-weight: 200;
    text-transform: uppercase;
    font-size: .9rem;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#interestsCard .select_container-interests-item-text p {
    margin: 0;
    font-size: 0.8em;
}


#interestsCard .select_container-interests-item.active .select_container-interests-item-icon{
    background: #4191DC;
    color: #fff;
    font-size: 1.8rem;
    border-color: #1a85da;
}

#interestsCard .select_container-interests-item.active .select_container-interests-item-text{
    color: #2196F3;
}


#interestsCard .btn{
    color: #2196F3;
    background: transparent;
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 600;
    padding: 0;

}

/* ================================================================================ Customs.VUE ========================================================================*/

#customCard .cardActions{
    padding: 8px 0;
}

#customCard   .btn{
        text-transform: uppercase;
    }

/* ================================================================================ Article.VUE ========================================================================*/
#articleCard    .articleCard p{
        display: block;
        text-overflow: ellipsis;
    }

 #articleCard .cardActions, .card.twitter .cardActions{
        padding: 0;
    }

 #articleCard .btn, .card.twitter .btn{
        text-transform: uppercase;
        background: #f1f1f1;
        font-size: 0.8em;
        opacity: 0.4;
    }

.card.twitter .btn {}

/* ================================================================================ Alert.VUE ========================================================================*/

#alertCard .notices{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  border-top: 1px solid rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.1);
  /* margin-top: 0.5em; */
  /* padding: 0.5em; */
  /* margin: 1em -1em -.5em; */
  font-size: 0.9em;
  /* position: absolute; */
  /* top: 10%; */
  margin-left: 1em;
  width: 100%;
  text-align: left;
  padding: 1em;
  background: transparent;
  border: none;
  margin-bottom: 1em;
  font-size: .9em;
  height: 100%;
}

#alertCard .tooltipIcon{
    position: absolute;
    top: 3px;
    right: 3px;
    top: 0.4em;
    right: 0.5em;

    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    border: 2px solid;
    border-radius: 50%;
    cursor: pointer;
}

#alertCard .tooltipIcon:active, #alertCard .tooltipIcon:hover, #alertCard .tooltipIcon:focus {
  color: #FFF;
  filter: brightness(100%);
}

#alertCard .tooltipAlert{
    background: #f5f5f5;
    position: absolute;
    right: .7em;
    color: #333;
    font-size: .7em;
    top: 35px;
    padding: 1em;
    width: 95%;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transform-origin: top right;
    transition: all .2s ease;
    border-radius: 5px;
    box-shadow: 0 .5em .8em rgba(0, 0, 0, 0.2);
}

#alertCard .tooltipAlert::after{
    content: "";
    position: absolute;
    top: -7px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #f5f5f5 transparent;

}

/* #alertCard .tooltipIcon:hover + .tooltipAlert, */
#alertCard .tooltipOpen + .tooltipAlert{
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
}

#alertCard .tooltipIcon i{
    font-style: initial;
}


#alertCard .notices h3{
  margin: 0;
  margin-bottom: .5em;
  font-weight: bold;
}

#alertCard .notices .btn{
  margin-right: 1em;
  font-size: 1em;
  display: block;
}

#alertCard .btn:active, #alertCard .btn:focus, #alertCard .btn:hover{
  color: #FFF!important;
  filter: brightness(100%);
}

#alertCard .notices .btn:last-child{
  margin-right: 0em;
}

#alertCard .notices .btn i{
  margin-right: 0;
}

#alertCard .card {
        position: relative;
        padding-top: .4rem;
    }
 #alertCard .cardContent{
        padding: 0.5em 1em;
        width: 65%;
    }
  #alertCard .alertIcon{
        position: absolute;
        z-index: -1;
        right: 0;
        top: -0.3em;
        transform: translate(4%, 0);
        color: #ec6712;
        opacity: .5;

        border-radius: 50%;
        font-size: 3.7rem;
        padding: .5rem;

        width: 60%;
        fill: #ec6712;
    }
 #alertCard .btn{
        color: #fff;
        background: transparent;
        text-transform: uppercase;
        font-size: 0.8rem;
        font-weight: 400;
        padding: 0;
    }
   #alertCard .btn i{
        color: #D8D9D9
    }
  #alertCard .cardContent{
        padding-bottom: 0;
        width: 100%;
    }
 #alertCard .cardContent h3 {
        text-transform: uppercase;
        line-height: 1;
        margin-bottom: 0rem;
        font-weight: bold;
        font-size: 1rem;
    }
 #alertCard .cardContent small{
        display: block;
        font-size: .8rem;
    }
  #alertCard .cardActions{
        text-align: left;
        padding: .5em 1em;
        padding-top: .2em;
    }

  #alertCard .cardActions :nth-child(1){
        margin-right: .5em;
    }


/* ================================================================================ ALERTS MODAL ========================================================================*/
body.alertModalOpen{
    overflow: hidden;
}

/* body.alertModalOpen #app{
    position: relative;
    z-index: -1;
} */

#modalAlertTips{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    overflow: hidden;
    overflow-y: scroll;
    overscroll-behavior: none;
    opacity: 0;
    transition: all .5s ease;
}

#modalAlertTips .wrapper{
    height: 90%;
    width: 90%;
    display: flex;
    height: 90%;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}

#modalAlertTips a{
    color: #fff;
    font-size: 2em;
    border: 2px solid;
    line-height: 0;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: block;
    position: relative;
    float: right;
    margin: 1em;
    margin-right: 1em;
    cursor: pointer;
    z-index: 2;
}

#modalAlertTips a:hover{
    color: #0096fa;
}

#modalAlertTips a span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}


#modalAlertTips .wrapper img{
    padding: 1%;
    width: 30%;
}

body.alertModalOpen #modalAlertTips{
    opacity: 1;
}

@media(max-width: 1400px){
    #modalAlertTips .wrapper img{
        width: 48%;
    }
}
@media(max-width: 950px){
    #modalAlertTips .wrapper img{
        width: 98%;
    }

    #modalAlertTips a{
        margin-right: .5em;
    }
}
/* ================================================================================ DARLK STYLES ========================================================================*/


#app.darkmode *{}

#app.darkmode .loadingStatus {
    background-color: #111;
    color: #ccc;
}

#app.darkmode .btn.backBtn {
    color: #aaa;
}

#app.darkmode #cams .camsViewGallery {
    background: #222;
    color: #aaa;
}

#app.darkmode footer {
    color: #aaa;
}

#app.darkmode #articleCard .btn, #app.darkmode .card.twitter .btn {
    background: #000;
    color: #aaa;
}

#app.darkmode .card p,
#app.darkmode .card small,
#app.darkmode .card a{
    color: #aaa;
}

#app.darkmode .card .cardHeader h3 {
    color: #eee;
}

#app.darkmode #report .imageUpload + label {
    background: #333;
    border: none;
}

#app.darkmode #report .select {
    background: #333;
    color: #fff;
    border: none;
}

#app.darkmode #report .cardHeader {
    background-color: #333;
    color: #aaa;
}

#app.darkmode .card {
    background: #222;
}

#app.darkmode #profile .buttonGroupRight, #app.darkmode #profile .buttonGroupLeft {
    background: #111;
}

#app.darkmode #profile .slider {
    background-color: #111;
}

#app.darkmode #profile .region_select-option {
    background: #333;
    color: #ddd;
    border: 1px solid #333;
}

#app.darkmode .cardBody {
    background: #222;
    color: #999;
}

#app.darkmode #profile .cardHeader{
    background-color: #333;
    color: #aaa;
}


#app.darkmode #profile .slider:before{
    background-color: #333;
}

#app.darkmode .alertCard h3,
#app.darkmode .alertCard small{
    color: #fff;
}

/* ================================================================================ Add to HomeScreen ========================================================================*/


#addHomScreen{
    width: 100%;
    display: block;
    background: #fff;
    z-index: 99998;
    position: absolute;
    bottom: 0px;
    margin-left: 0%;
    border-radius: 0;
    padding: 10px 15px 15px;
    font-size: 0.9em;
    text-align: left;
    box-shadow: 0px -20px 100px #000;
    line-height: 1.8em;
}

.desktop #addHomScreen {
    display: none!important;
}

.android #addHomScreen {
    display: none!important;
}

#addHomScreen .iosInfo, #addHomScreen .androidInfo {
    display: none!important;
}

.ios #addHomScreen .iosInfo, .android #addHomScreen .androidInfo {
    display: inline!important;
}

#addHomScreen ul {}

#addHomScreen .iosInfo, #addHomScreen .androidInfo {
    /* display: none; */
}

.ios #addHomScreen .iosInfo,.android #addHomScreen .androidInfo {
    display: block;
}

#addHomScreen .closeBtn {
    position: absolute;
    top: 0;
    background: #fff;
    padding: 4px;
    right: 0;
    font-size: 1.6em;
    width: 1.5em;
    line-height: 1;
    color: #CCC;
}

#addHomScreen:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
}

#addHomScreen .shareIcon {
    height: 1.4em;
    margin-top: -0.5em;
}

#addHomScreen .homescreenIcon {
    height: 1.2em;
    margin-top: -0.2em;
    margin-right: 0.3em;
}

#addHomScreen .appIcon {
    height: 4.8em;
    float: left;
    margin-right: 1em;
    margin-top: 0.5em;
}

/* ================================================================================ Animations ========================================================================*/


@keyframes loadingAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loadingAnimationReverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}


@keyframes weatherIcon {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-5px);
  }
}


/* ================================================================================ Media Queries ========================================================================*/

@media screen and (min-width: 1199px){

  #alertCard .tooltipIcon .tooltipAlert{
      width: 24em;
    }

  .button:hover,
  .btn:hover,
  a:hover{
      transform: scale(1);
      filter: brightness(100%);
  }

  .btn.logo{
      transform: none;
      filter: none;
  }

  .btn.logo:hover{
      transform: none;
      filter: none;
  }

  #profile .cardHeader, #profile .cardBody, #profile #interestsCard{
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  #profile .cardHeader:first-child{
    max-width: none;
    width: 100%;
  }

  .grid > div#interestsCard .select_container-interests {
    justify-content: center;
}

.profile footer, .login footer, .signup footer{
  text-align: center;
}

.profile footer p, .login footer p, .signup footer p{
  margin: 0 auto;
  font-size: 0.8em;
}

  .scrollTop{
    
z-index: 100;
    
width: 20em;
    
left: 50%;
    
transform: translate(-50%, 100%)!important;
    
border-radius: 2px 2px 0 0;
  }

.scrolled .scrollTop {
    transform: translate(-50%, 0%)!important;
}
    .responseGate{
        display: none;
    }
    header .btn.viewMap{
      display: block;
    }
    #app{
        max-width: 1200px;
        margin: 0 auto;
    }
    .main{
        height: 100%;
        margin-top: 1em;
    }

    .viewMap{
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-size: .9em !important;
    }

    .forecast a,
    .forecast button{
        display: none;
    }

    .scrolled .main{
        margin-top: 0em;
    }

    header{
        max-width: 1200px;
    }

.scrolled header, .scrolled .weather {
    background: transparent;
}
    .cards{
        height: calc(100% - 310px);
    }
    .weather{
        flex-wrap: wrap;
        display: flex;
        justify-content: space-between;
        /* height: 32%; */
        /* min-height: 220px; */
    }

.home {
    display: block;
}

    .scrolled .weather{
        /* height: 20%; */
        font-size: 0.8em;
    }

    .weather .summary{
        flex: 0 0 35%;
    }

.scrolled .weather .summary {
    flex: 0 0 31%;
}

    .weather .forecast {
        /* flex: 1; */
        /* width: 100%; */
        flex: 0 0 80%;
        max-width: 60%;
    }

    .forecast li {
        padding: 0.4em;
        flex: 0 0 10%;
        margin-left: auto;
    }

    .scrolled .forecast{
        flex: 0 0 10%;
    }

    .scrolled .forecast li{
        flex: 0 0 5%;
    }

    /* .scrolled .forecast{
        display: none;
    } */

    .weather .filterButtons{
        flex: 0 0 100%;
        height: 2em;
        margin: 0;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .scrolled .weather .filterButtons{
        margin-top: 0;
    }

    .weatherIcon{
        width: 10%;
    }

    .forecast ul{
        display: flex !important;
        background: transparent;
        width: 100%;
        padding-bottom: 1em;
    }

    .cards{
        /* margin-top: 3em; */
    }
    .scrolled .cards{
        /* margin-top: 1em; */
        height: calc(100% - 200px);
    }
    .articleCard,
    #alertCard{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

.card p {
    font-size: 0.7em;
}

#alertCard {
    /* font-size: 2em; */
    min-height: 16em;
}

#alertCard .btn {
    font-size: 1.2em;
}

#alertCard .cardContent h3 {
    font-size: 1.2em;
}

    #alertCard .alertIcon{
        font-size: 10.7em;
        right: 50%;
        top: 40%;
        transform: translate(50%, -50%);
    }

    #alertCard .cardActions{
        text-align: right;
        /* font-size: 1.2em; */
    }



    .grid {
    /* column-count: 4; */
    /* column-gap: 1em; */
    display: flex;
    flex-wrap: wrap;
    /* flex-flow: column wrap; */
    }

.grid > div {
    flex-direction: column;
    flex: 0 0 24%;
}

    .grid > div {
      /* display: inline-block; */
      margin: 0 0.5% 1%;
      width: 100%;
      /* flex: 1 0 auto; */
      /* width: 24%; */
      /* float: left; */
      display: block;
    }

.grid > div > div {
    display: block;
}

.grid .card.twitter .noImage {
    font-size: 1.2em;
    margin: auto;
    /* height: 100%; */
    display: block;
    flex-direction: column;
    height: 100%;
}

.grid .card.twitter .noImage .cardHeader {
    flex-direction: column;
    text-align: center;
    flex-grow: 1;
    height: calc(100% - 33px);
}

.grid .card.twitter .noImage .cardHeader img {
    width: 100px;
    height: 100px;
    min-height: 100px;
    margin: 1em auto 0.5em;
}

    .tweetCard .cardHeader{
        margin: auto;
    }

.tweetCard .cardHeader {
    margin: 0;
}

.card img {
    /* max-height: 10em; */
    width: 100%;
    height: auto;
    max-width: none;
}

.card .cardImage {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 12em;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 20;
}

.card .imgWrap {
    display: block;
    position: relative;
    overflow: hidden;
}

.card .imgWrap .backgroundBlur {
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(8px);
    display: block;
}

    .scrolledDescriptionWrapper{
        transition: all 0.3s ease-in-out;
    }

    #app.mapScreen{
        max-width: 100%;
        margin: 0;
        height: 100%;
    }

    #app.mapScreen .main, #app.mapsubScreen .main{
        margin: 0 !important;
        height: calc(100% - 0px);
        top: 0px;
        position: absolute;
        left: 0;
        width: 100%;
    }

    .mapFilters{
        width: 50% !important;
        background-image: none !important;
    }

    #map .meter:not(.windMeter), #map .windMeter > div{
        width: 48%;
        left: 75%;
        top: 3.2%;
    }
    #map .rangeScrubber {
        bottom: 2%;
    }

    #cams .camsViewGallery > div{
        flex: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer;
    }

    .profileScreen #profile .select_container{
        padding: .4em !important;
    }
    .profileContainer{
        margin-bottom: 0;
        height: 100%;
    }
    #cams .camsViewGallery{
      
height: 100%;
      
width: 20%;
      
display: block;
      
overflow: hidden;
      
overflow-y: scroll;
      
left: auto;
      
right: 0;
    }

#cams .camsViewGallery img {
    width: 100%;
    max-width: 100%;
}

#cams .camsViewGallery {
    font-size: 1.4em;
}

#cams .camsView {
    width: 75%;
    height: 85vh;
    /* margin-left: 2%; */
    background: #FFF;
}

#cams .camsView img {
    width: auto;
    height: 100%;
    /* max-height: 85vh; */
    max-height: 100%;
    max-width: 100%;
    display: flex;
    margin: auto;
}

#cams .camWrap {
    /* justify-content: flex-start; */
    width: 80%;
    height: 80%;
    top: 10%;
}
#report.report{
  
/* max-width: 800px; */
  
width: 100%;
  
margin: 0 auto;
  
height: 100%;
}

.reportScreen .main {
    position: absolute;
    top: 0!important;
    left: 0;
    height: 100%!important;
}

#report.report .cardBody{
    display: flex;
}

#report.report .emergencyNumbers {
    font-size: 1em;
    margin: .5em;
    width: calc(50% - 1em);
}

.reportScreen .main{
  
display: flex;
  
justify-content: center;
  
align-items: center;
  
top: 80px;
  
height: calc(100vh - 80px);
  
margin: 0;
}

.reportScreen .btn.backBtn, .profileScreen .btn.backBtn {
    top: 0.2em;
}

.profileScreen .btn.backBtn {
    top: 0.7em;
}
#report .card{
  
padding-bottom: 2em;
}
.login{
  
max-width: 600px;
  
margin: 0 auto 0;
}
#signUpSocial.signUpSocial{
  
display: flex;
  
flex-direction: column;
  
justify-content: center;
  
align-items: center;
}

#signUpSocial.signUpSocial .buttons {
    width: 100%;
    flex-grow: unset;
}
.login-registerScreen .login{
  display: flex;
  justify-content: center;
  align-items: center;
}
.scrolled .weather i.weatherIcon{
width: 35%;
}
.scrolled .weather h3{
opacity: 1;
transform: translateY(0);
max-height: 20px;
}
.scrolled .weather h1 {
    font-size: 6em;
}
.scrolled .weather .summary .weatherText .fullDescriptionWrapper {
    /* opacity: 1; */
    max-height: 0px;
}
.scrolled .weather .forecast {
    margin: 0.5em 0;
}
/*.scrolled .forecast {
    flex: 1;
}*/
.scrolled .forecast li {
    flex: 0 0 10%;
}
.scrolled .weather .summary .scrolledDescriptionWrapper{
  display: none;
}
.scrolled .cards {
    -webkit-mask-image: none;
}
header .logo img {
    margin-top: 1em;
    max-width: 250px;
}
}

@media screen and (min-width: 650px) and (max-width: 1199px){
    .weather i.weatherIcon{
        max-width: 17%;
    }
    #alertCard .tooltipIcon .tooltipAlert{
      width: 24em;
    }
}

@media screen and (max-height: 568px){
  #signUpSocial.signUpSocial{
    margin: 0;
  }
  #signUpSocial .google{
    margin-top: 1em;
  }
  .emergencyNumbers{
    font-size: 0.7em;
  }
  #report .cardBody {
    padding: 0 0.5em;
  }
}

@media only screen and (min-width: 768px) {

#articleCard .cardActions, .card.twitter .cardActions{
    position: absolute;
    bottom: 0;
}

.grid > div{
    padding-bottom: 30px;
}

}