/* COLORS -----------
blue: #0a1e39
soft blue: #657182
green: #26D1A8
background: #E6ECF4 */


/* ----------------------
	GLOBAL
---------------------- */

body.is-reveal-open { overflow: hidden; }
.reveal input[type="submit"] { background-color: #1C8FA4; display: block; text-transform: none; padding: 10px 30px; color: white }
body, html { background: #E6ECF4; -webkit-tap-highlight-color: transparent }
h1, h2, h3, h4, h5, h6, p, ul, ol, li, body, label, a, * { font-family: 'Poppins', sans-serif; font-weight: 400; color: #0a1e39; outline: none }
h1 { font-size: 2rem; line-height: 1 }
a { text-decoration: underline }
b, strong { font-weight: 600 }
h3 { font-size: 1.5rem }
h4 { font-weight: 500; font-size: 1.2rem }
h5 { color: #0a1e39; margin-bottom: 2px }
p.bigger, .card p.bigger { font-size: 1.2rem; line-height: 1.2 }
.soft { color: #657182 }
.button, .button:focus { background: #26D1A8; color: #0a1e39; margin: 15px 0; padding: 0.75em 1.6em; border-radius: 30px; font-size: .95rem; text-decoration: none }
.button:hover, .button:active { background: #0a1e39; color: #FFF }
.button span { transition: color .25s ease-out }
.button:hover span { color: #FFF }
.spacer { display: block; height: 60px }
#main { padding-top: 100px; padding-bottom: 100px }
#main .row { max-width: 50rem }
.sticky { position: sticky; top: 15px }
p.legal { font-size: .75rem; opacity: .6 }


/* NAV/MENU */
nav, .nav { background: #0a1e39; padding-top: 15px }
ul.menu { display: block }
ul.menu li.logo a { padding-left: 10px }
ul.menu li.logo a img { width: 50px; margin-bottom: 20px }
ul.menu li a { font-size: .9rem }
ul.menu li a span, ul.menu li a i { color: rgba(255,255,255,.4) }
ul.menu li a:hover span, ul.menu li a:hover i { color: rgba(255,255,255,1) }
ul.menu li a i { margin-right: 7px; width: 24px; font-size: 1.8rem }
ul.menu .active > a, ul.menu .active > a i { background: transparent; color: #26D1A8 }

#mobile-nav { position: fixed; height: 86px; left: 0; right: 0; bottom: 0 }
#mobile-nav nav { width: 100%; padding-top: 12px }
#mobile-nav ul.menu { display: flex }
#mobile-nav ul.menu li a span { display: none }
#mobile-header { background: #26D1A8; padding: 8px 0; position: fixed; width: 100%; z-index: 997 }
#mobile-header img { width: 50px }

#action a.button { min-width: 240px; padding: 16px; font-size: 1.2rem; font-weight: 600; color: #FFF; border: 2px solid #0a1e39 }
#action a.button:hover { border: 2px solid #26D1A8 }
#action.row { background: #0a1e39; position: fixed; bottom: 0; left: 0; right: 0; height: 320px; padding-top: 40px; display: none }
#action.row.open { display: block }
li.update a span.pill { background: #D9D9D9; display: block !important; text-align: center; border-radius: 30px; padding: 9px 15px; margin-top: -8px; min-width: 65px }
li.update a i { color: #0a1e39 !important; margin-right: 0 !important }


/* --- MENU BTN --- */
a#menuBtn { position: absolute; z-index: 999; display: block; right: 20px; top: 22px }
.doubledouble .line { transition: all .3s }
.doubledouble { background: transparent; width: 30px; text-indent: -9999px }
.doubledouble .line { height: 2px; background-color: #0a1e39; display: block; margin-bottom: 7px; position: relative }
.doubledouble .line.three { margin-bottom: 0 }

body.drawer a#menuBtn .doubledouble .line.one { -ms-transform: translate(0,7px) rotate(-45deg); -webkit-transform: translate(0,7px) rotate(-45deg); transform: translate(0,7px) rotate(-45deg) }
body.drawer a#menuBtn .doubledouble .line.three { -ms-transform: translate(0,-11px) rotate(45deg); -webkit-transform: translate(0,-11px) rotate(45deg); transform: translate(0,-11px) rotate(45deg) }
body.drawer a#menuBtn .doubledouble .line.two { width: 0; opacity: 0 }

/* --- DRAWER --- */
span.me { color: #26D1A8; padding: 25px; display: block; border-bottom: 1px solid #26D1A850; font-weight: 500 }
span.me i { color: #26D1A8; margin-right: 10px;
	font-size: 1.5rem;
	position: relative;
	bottom: -4px; }
body.drawer { overflow: hidden }
body.drawer #drawerNav { opacity: 1; visibility: visible }
#drawerNav { position: fixed; top: 0px; left: 0; right: 0; bottom: 0; z-index: 990; opacity: 0; visibility: hidden; background: rgba(10,30,57,.95); padding-top: 70px; }
#drawerNav ul { text-align: left; padding-bottom: 10px; list-style: none; margin-left: 0 }
#drawerNav ul li { position: relative; opacity: 0; top: -10px; transition: all .4s }
#drawerNav ul li a { color: #FFF; line-height: 4em; display: block; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.10); padding: 0 25px; text-decoration: none }
#drawerNav ul li a:hover { background: rgba(255,255,255,.1); text-decoration: none }
#drawerNav ul li ul { border-bottom: 1px solid rgba(255,255,255,.10); padding: 10px 0; background: rgba(25,25,25,.04) }
#drawerNav ul li ul li a { line-height: 2.5em; border-bottom: 0; text-transform: none; padding-left: 40px }
#drawerNav ul li ul li a:hover { background: transparent; opacity: 1 }
ul.subMenu { display: none }
.showSub { float: right; border-bottom: 0 !important }

body.drawer #drawerNav ul li { opacity: 1; top: 0 }
#drawerNav ul li:first-of-type { transition-delay: .2s }
#drawerNav ul li:nth-of-type(2) { transition-delay: .3s }
#drawerNav ul li:nth-of-type(3) { transition-delay: .4s }
#drawerNav ul li:nth-of-type(4) { transition-delay: .5s }
#drawerNav ul li:nth-of-type(5) { transition-delay: .6s }
#drawerNav ul li:nth-of-type(6) { transition-delay: .7s }
#drawerNav ul li:nth-of-type(7) { transition-delay: .8s }
#drawerNav ul li:nth-of-type(8) { transition-delay: .9s }
#drawerNav ul li:nth-of-type(9) { transition-delay: 1s }
#drawerNav ul li:nth-of-type(10) { transition-delay: 1.1s }


/* MODALS */
.reveal-overlay { background-color: rgba(10,30,58,.7) }
.reveal { border-radius: 16px }
.reveal h5 { font-size: .9rem; line-height: 1.2; color: #657182; font-weight: 500; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.reveal p { color: #657182; font-size: .85rem; font-weight: 500 }
.reveal { padding: 20px 5px 26px }


@media screen and (max-width: 39.99875em) {
	.reveal { height: auto; min-height: auto; width: 90%; margin: auto }
}
@media screen and (min-width: 40.063em) {
	.reveal h5 { margin-bottom: 8px }
	ul.menu li a i { font-size: 1.3rem; top: 2px; position: relative }
	ul.menu li.update a i { top: 0 }

	a.update span.pill { background: white; display: block !important; text-align: center; border-radius: 50%; margin-top: 13px; opacity: .6; width: 45px; height: 45px }
	a.update span.pill:hover { opacity: 1 }
	a.update i { color: #26D1A8 !important; margin-right: 0 !important; font-size: 1.2rem; line-height: 45px }

	body.drawer #drawerNav { right: 0 }
	#drawerNav { width: 35%; left: auto; right: -600px; transition: all .5s }
	#action.row { top: 20%; left: 30%; right: 20%; bottom: auto; padding: 40px; display: none; height: auto; border-radius: 12px	}
	.reveal.large { width: 80%; max-width: 75rem }
}



/* ----------------------
	DASHBOARD
---------------------- */

#login.card { margin-top: 100px }
#me { margin-bottom: 30px }
#me .score p { color: #657182; font-weight: 500; font-size: .8rem }
#me .score span.num { font-size: 2.7rem; line-height: 1.2; font-weight: 300; color: #657182 }
.bar { width: 100%; height: 10px; background: #26D1A8; border-radius: 3px; margin: 10px 0 }
.bar.simple { background: #d1d7e0; margin: 30px 0 15px }
.bar.positive { background: #838fa4; /*background: url(/assets/wellbeing/img/bg-diag-blue.jpg) repeat-x; background-size: 18px*/ }
.bar.clickable.positive { background: #838fa4 }
.bar-score { background: #838fa4; display: block; height: 100%; border-bottom-left-radius: 3px; border-top-left-radius: 3px }
.bar.positive .bar-score, .bar.simple .bar-score { background: #26D1A8 }
.bar.tall { height: 23px; background-size: contain }
.bar.medium { height: 14px }
span.num { color: #26D1A8; font-weight: 700; font-size: 1.1rem; display: block; min-width: 20px }
.big-num { font-weight: 600; font-size: 3rem; line-height: 1.1; color: #26D1A8; letter-spacing: -.15rem; }

.card { border: 0; padding: 25px 20px 20px; border-radius: 14px; position: relative; margin: 0 15px 10px; }
.card .fa-circle-question { font-size: 1.5rem; opacity: .6 }
a.card { text-decoration: none }
a.card:hover h5 i { right: -8px }
.card h4 { font-size: 1.1rem; line-height: 1.2; font-weight: 500 }
.card h5 i { transition: all .2s ease-in-out; position: relative; right: 0 }
.card p, h4 span { margin-bottom: 0; color: #657182; font-weight: 500; font-size: .9rem; line-height: 1.4 }
.card.vaca span { display: block; color: #26D1A8; font-size: 3rem; line-height: 1; font-weight: 600 }
.more { position: absolute; bottom: 0; right: 0; background: #657182; padding: 12px 14px 8px; border-top-left-radius: 16px; opacity: .45 }
.more:hover { opacity: 1 }
.more i { color: white; opacity: 1; font-size: 1.2rem }
h2.card-header { border-bottom: 1px solid #26D1A8; padding-bottom: 4px; font-size: 1.2rem; font-weight: 500; margin-left: 10px; margin-bottom: 16px }
h2.card-header i, .card h5 i { color: #26D1A8 }
.slide-thing .card { display: flex; flex-direction: row; flex-basis: auto; }

/* #STAT CIRCLES */
.circle-chart__circle { animation: circle-chart-fill .8s reverse; transform: rotate(-90deg); transform-origin: center }
.circle-chart__info { opacity: .6 }
@keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } }
.circle-chart__percent { font-weight: 500 }

.slick-dots { bottom: -32px }
.slick-dots li button:before { font-size: 46px; color: #0a1e39; opacity: .4 }
.slick-dots li.slick-active button:before, .slick-dots li.slick-active button:active { color: #0a1e39 !important; opacity: 1 }
.slick-dots li { width: 16px; margin-top: 10px }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; color: #26D1A8 }

@media screen and (max-width: 39.99875em) {
	.bar:not(.tall) { margin: 5px 0 20px }
}
@media only screen and (min-width: 48.0625em) {
	.big-num { font-size: 4rem }
}

/* ----------------------
	HISTORY
---------------------- */
.tabs { border-bottom: 0 }
.tabs-title>a { font-size: .9rem; text-decoration: none; color: #0a1e39 }
.tabs-title>a:focus, .tabs-title>a[aria-selected=true] { background: #26D1A8; color: #0a1e39 }
.tabs-title.is-active>a:hover { background: #26D1A8 }
.tabs-title { border-right: 1px solid #DDD; border-bottom: 1px solid #DDD }
.tabs-title>a:hover { background: #EEE; color: #0a1e39 }


/* ----------------------
	SURVEY
---------------------- */

.test-row { width: 100% }
.test-row .column { padding: 0 }
.row.test-row { max-width: 600px !important; margin-bottom: 20px; }
#bo-form h1, #pql-form h1, #bnb-form h1 { width: 100%; text-align: center; border-bottom: 1px solid #94a0b2; padding-bottom: 10px; text-transform: uppercase; font-weight: 300; font-size: 2rem }
.radio-input .column, .yn-input .column { background: #afbccd; color: #0a1e39; border-radius: 0; border-left: 1px solid white; font-size: .8rem; padding: 10px 14px; font-weight: 500 }
.radio-input .column:first-of-type, .yn-input .column:first-of-type { border-top-left-radius: 30px; border-bottom-left-radius: 30px }
.radio-input .column:last-of-type, .yn-input .column:last-of-type { border-top-right-radius: 30px; border-bottom-right-radius: 30px }
.test-row .column p { margin: 15px 5px; line-height: 1.2; font-weight: 500 }
.radio-input .column.active, .yn-input .column.active { background: #26D1A8; color: #0a1e39 }
.button.submit, .button.back { display: block; margin-top: 40px; margin-bottom: 20px; font-weight: 600 }
.test-form .button { margin-top: 160px; }


/* ----------------------
	ADMIN AREA
---------------------- */

h3.teamHeader { position: relative; border-bottom: 1px solid #26D1A8; padding-bottom: 10px; margin-bottom: 30px }
input.filter { display: inline; margin: 0 }
span.addNew { display: inline; float: right }
span.addNew button { margin: 8px 0 }
.border-left { border-left: 1px solid #26D1A8 }
input { padding: 10px 15px; border: 1px solid #CCC; width: 100%; margin: 6px 0 }
.teamListy { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1 }
.teamListy li { line-height: 1.1; margin-bottom: 8px }
.teamListy li a { border-bottom: 1px solid transparent; text-decoration: none }
.teamListy li a:hover { border-bottom: 1px solid #26D1A8; color: inherit }
a.back { text-decoration: none }
a.back i { color: #26D1A8; margin-right: 5px }
a.back:hover i { color: #0a1e39 }
img.profile { border-radius: 50% }
div.inits { background: #A0AABE; height: 60px; width: 60px; border-radius: 50%; line-height: 60px; text-align: center; font-size: 1.6em; font-weight: 700; color: white }
.has-tip { border-bottom: 0; cursor: pointer }
ul.team li { margin: 0 8px 8px 0; float: left }
div.add { background: transparent; border: 2px solid #26D1A8; height: 60px; width: 60px; border-radius: 50%; line-height: 53px; text-align: center; font-size: 1.6em }
div.add:hover { background: #26D1A8 }
div.add:hover .fa-plus { color: white }
div.add .fa-plus { color: #26D1A8; float: none }
div.add .fa-plus { font-size: 1em; margin-top: 15px; margin-left: 2px }

.qrCode { margin-bottom: 30px }

@media only screen and (min-width: 48.0625em) {
	.teamListy { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2 }
	.qrCode { max-width: 200px }
	.slide-thing { display: flex !important; flex-direction: row; }
}

/* PWA native app style */
@media screen and (display-mode: standalone) {
		#main { padding-top: 132px }
		#drawerNav { padding-top: 102px }
		#mobile-header { padding: 40px 0 8px }
		#login.card { margin-top: 132px }
		a#menuBtn { top: 57px }
}