/* CSS Document */

.page {
	padding:20px 0;
	height:100%;
}
.btn{
	font-size:1rem;
	line-height: 1rem;
}
/* PAGE */
.logo-landing{
	margin: 0 auto;
    text-align: center;
	height: 100vh;
    position: fixed;
    width: 100%;
	z-index: 11;
}
.logo-landing img {
	height:400px;
}
.landing-page-outer,.dashboard-page-outer{
	
    padding: 30px;
    max-width: 800px;
    margin: 95px auto 0 auto;
    border-radius: 10px;
}
#version {
	
    
    width: 100%;
    text-align: center;
	color:white;
	font-size: 10px;
    margin-top: 10px;
	
}
.dashboard-page-outer{
	max-width:95%;
}
.header nav{
	flex: 0 0 52%;
    max-width: 52%;
}
@media only screen and (max-width: 1008px){
	.landing-page-outer,.dashboard-page-outer{
		margin-top:35px;
	}

    .header nav {
        margin-top:10px;
		width:100%;
		flex:none;
		max-width: 100%;
    }

}
.header .toggle span {
    background: #ffffff;
}

.landing-page-inner, .dashboard-page-inner{
	margin-top: 10px
}
.logo-outer{
	display: flex;
	justify-content: center;
	align-content: center;
	background:white; 
	align-items: center;
	margin:0 auto;
	border-radius: 10px;
	height:100%;
}
#button-feedback-container{
	float:right;
	z-index: 15;
	display: flex;
    justify-content: center;
    align-items: center;
}

#button-feedback{
	
	z-index: 15;
	display: flex;
    justify-content: center;
    align-items: center;
}
#button-feedback:hover{
	background-color:#bb6a14;
}
#button-feedback-label{
	color:white;
	z-index: 15;
	font-size:14px;
}
.page-card{
	position:relative;
	margin:0 auto 20px auto;
	max-width: 1075px;
	border-radius: 3px;
    background: white;
	padding:10px;
	font-size:1rem;
	-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
}
.intro-overlay-page{
	position: fixed;
	background-image: url("../img/background.png");
    background-repeat: no-repeat;
    background-size: cover;
	background-position: right;
	top:0;
	z-index: 10;
	width: 100vw;
    height: 100vh;
	
}
.intro-page-inner{
	background:white;
	margin: 0px auto;
    max-width: 475px;
	-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
	border-radius: 5px;
}


.intro-page-bubble{
	background-image: url("../img/backround3_1.png");
    background-repeat: no-repeat;
    background-size: cover;
	background-position: center center;
	text-align: left;
	padding: 20px;
	height: 100%;
 	
}

.table-callout {

    padding: 20px;
    border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
    color: #0f132e;
    font-family: 'Roboto';
    font-weight: 600;
    font-size: 14px;
	margin-bottom: 20px;
	margin-top:-8px;
	border-top: 1px dashed grey;
	background: #e7e7e7;
}
.small-text{
	font-size: 14px;
    color: #fe8400;
    font-family: 'Roboto';
    font-weight: 600;
}
.icon-message{
	background-image: url(../img/message-alt.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 35px;
    width: 120px;
	
}
#exit-message {
	display: none;
	border: 1px solid #edf3f7;
    padding: 20px;
    border-radius: 10px;
   
    font-weight: 600;
    font-size: 14px;
    margin: 20px 10px;
	background: #034c98;
	color:white;
}
.exit-title {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size:18px;
	margin-bottom: 5px;

	background: #f78002;
    padding: 2px 5px;
    border-radius: 5px;
    display: inline-block;
}
.header-container{
	margin:30px auto;
	display: flex;
    align-items: center;
}
.subheader{
	background: #bfc1cb;
    padding: 5px;
	height: 38px;
}
.subheader-alt{
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.intro-section, .quiz-section{
	background:#fe7b15a8;
	/*align-content: center;*/
	justify-content: center;
	height: 100vh;
	overflow: scroll;
}
.button-exit{
	background-color: red !important;
}
.intro-page{
	text-align: center;
	display: none;
	padding: 0 20px;
}
.regular-page{
	
	height: 100%;
	min-height: 100vh;
	position: fixed;
	width:100%;
	overflow-x: scroll;
}
.regular-page-outer{
	padding: 120px 20px;
    
    
   
}
.regular-page-inner{
	margin: 200px auto 0 auto;
	padding:10px;
	max-width: 1200px;
	-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
}


@media only screen and (max-width: 1008px){
	.regular-page-outer{
		
		padding: 72px 10px 150px 10px;
	}
	

}
@media only screen and (max-width: 1008px){
	.regular-page-inner{
		
		
	}
	.header-underline{
		width:100%;
	}
}
.intro-page.active, .regular-page.active{
	display: block;
}
.new-white-bubble{
	background-image: url("../img/backround2.png");
    background-repeat: no-repeat;
    background-size: cover;
	background-position: center center;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
 
}
.header-inner{
	height: 94px;
}
.new-format{
	color: #6b98bc;
    background: white;
    border-radius: 5px;
    padding: 2px 5px;
	margin-right:5px;
}
@media only screen and (max-width: 992px){
	.header-inner{
			height: 35px;
		}

	
}
.header nav ul li {
	padding:0;
}
#tandc-footer{
	position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 20;
    background: #0f132e;
    text-align: center;
    color: white;
    font-size: 14px;
    padding: 5px 20px;
}
@media only screen and (max-width: 992px){
	#tandc-footer a{
		font-size:12px;
	}
}
.button-link{
	padding: 0 10px;
}
.button-link:hover{
	background: #fd6e0a;
	cursor:pointer;
}
.about-page {
	background:#0f132e !important;
	
}
.about-page p{
	text-align: left;
    color: white !important;
    margin-bottom: 20px;
}
.about-page li{
	 color: white !important;
	text-align: left;
}
.about-page ol{
	margin: 0;
}
.about-page ol>li{
	font-size:1.2rem;
	margin-bottom: 10px;
}
.regular-list li{
	font-size: 1rem !important;
}
.shortcut {
	background: #ffffffdb;
    padding: 4px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    text-align: center;
}
 .about-page ul {
	 margin: 0px 0px 20px 0px;
	 padding: 0 50px;
}
.about-page table{
	border: 1px solid white;
	margin: 20px auto;
    width: 75%;
}
.about-page td{
	border: 1px solid white;
}
.about-page .about-header{
	width:100%; 
	font-family:'Quicksand'; 
	text-align:center;
	color:white;
	margin:0;
}
.about-page h3{
	font-size:1.2rem;
	color:white;
	    text-align: center;
    background: #406981;
    padding: 10px;
    width: 100%;
	border-radius: 5px;
	margin-top:30px;
}
.about-page h4{
	text-align: left;
	font-size:1.0rem;
	color:white;
	margin:0px 0 20px 0;
}
.about-page .highlight{
	background: #406981;
    padding: 0px 5px;
	border-radius: 5px;
}
.about-page input{
	color: white;
}
.progress-body{
	width:100%;
	text-align: center;
	
}
.progress-dot{
	border:1px solid #2e4985;
	height: 8px;
	width: 8px;
	margin:0 5px 0 5px;
	display: inline-block;
	border-radius: 4px;
}
.active-dot{
	background: #2e4985;
}
/* COLORS 
LIGHT BLUE #abdcff
REALLY LIGHT BLUE #eaf8f8
LIGHT ORANGE #ffdaae
LIGHT TEAL #ace2e4
PRIMARY BLUE #6B98BC
DARK GREY #545b62

*/
body {
	height: 100vh;
	touch-action: pan-y;

}

.hero-section{
	padding: 0;
	background: none;
}

.hero-section .hero-text {
	flex: 0 0 100%;
	max-width: 100%;
}


.other-section .hero-text {
	flex: 0 0 100%;
	max-width: 100%;
}
.hero-section .hero-text h3{
	margin-top:0px;
	color: #2e4985;
	font-size:1.5rem;
	font-family: "Roboto";
}

.support-section .support-items {
    position: relative;
    max-width: 100%;
    margin: 0 auto 0px auto;
  	padding: 0;
    border-radius: 20px;
    -webkit-box-shadow: none;
    box-shadow: none;
	
}
.page-container{
	padding:100px 0px 0 0px;
}

.sub-container{
	touch-action:pan-y;
	position: relative;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	background: #dae7f3d1;
    max-width: 1200px;
    margin: 0 auto;
}
#form-container{
	
	padding:20px;
}
.header .toggle{
	position: absolute;
	right:10px;
}
.header .brand-name a{
	display: flex;
	align-items: center;
}
.flex-container{
	display: flex;
	align-items: flex-start;
}
.flex-center{
	align-items: center;
}
.flex-container-left{
	margin-right:20px;
}
.flex-container-right{
	    line-height: 1.2rem;
}
.flex-container-button{
	justify-content: center;
    align-items: center;
	align-content: center;
    text-align: center;
	border-radius: 10px;
	margin-bottom: 20px;
}

.summary-item{
	align-items: flex-start;
    background: white;
    
    border-radius: 10px;
    
}
.summary-item .flex-container-left{
	color:#ff8400;
	padding: 7px 0 0 0;
	margin:0;
}
.summary-item .flex-container-right{
	
	padding: 10px;
}
.summary-table{
	padding: 20px;
    background: white;
    border: 1px solid grey;
}
.summary-table tr{

	border-bottom:1px solid grey;
}
.summary-table th, .summary-table td {
	padding:5px;
	border-radius: 0px;
}
.list-container{
	margin:20px 0 0 0;
	padding:20px;
	font-family: 'Roboto';
	font-weight: 600;
}

.textfield {
	background-color: white;
    border: 1px solid #9e9e9e;
	width:50%;
	padding: 5px;
}
.tiny-print{
	    color: grey;
    font-weight: normal;
    font-size: 0.8rem;
}
.header .brand-name img{
	height: 70px;
	width: 70px;
}
.header-container img{
	    height: 120px;
    width: 120px;

}
 .header .brand-name .brand-text{   
	font-size:24px;
	 margin-left:10px;
	color:white;
	 font-weight: 600;
	 font-family: 'Quicksand';
	 line-height: 21px;
	border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
	 padding: 3px 0px;
}
.sub-brand {
	font-family: 'Roboto';
    display: block;
    font-size: 14px;
    text-align: center;
    color: #ff8400;
	margin-left: 5px;
	font-weight: 600;
}

.btn-large i {
    font-size: 1rem;
	
}
.brand-name-new {
	align-items: center;
    display: flex;
    justify-content: center;
	margin-bottom: 20px;
}
.brand-name-new .brand-text{
	font-size:1.5rem;
	 color: #f77503;
	margin-top: 10px;
    margin-left: 10px;
}
.header nav ul li a {
	font-size:1rem;
	color: #034c98;
	
}
.header nav ul li.current a, .btn {
    color: #ffffff;
	font-weight: 600;
	background: #034c98;
    border-radius: 50px;
    padding: 10px 15px;
}
.btn:hover {
	color: #ffffff;
    background: #fd6e0a;
	cursor: pointer;
}
.header.fixed .nav ul li a:hover {
    color: #ffffff;
    background: #fd6e0a;
	cursor: pointer;
	padding:5px;
	border-radius:10px;
}
.header nav ul li.current a:hover{
	 border-radius: 50px !important;
    padding: 10px 15px !important;
}
.btn:focus{
	background-color: #fd6e0a;
}
.header.fixed {
	background: #0f132e; /*#cee0b9;*/
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	z-index: 12;
}
.header nav ul{
	display: flex;
    justify-content: center;
}
@media only screen and (max-width: 992px){
	.page-container{
		padding:60px 0px 0 0px;
	}
	.header {
		height: 50px;
	}
	.header.active{
		height:135px;
	}
	.header .row{
		margin-top:8px;
	}
	.header .brand-name img{
		height: 30px;
		width: 30px;
	}
}
@media only screen and (max-width: 991.97px) {
    .header nav ul li {
        
        padding: 5px 0;
        display: block;
        max-width: 200px;
        text-align: center;
    }
}
/* TABS */
.tab-container{
	display: flex;
    justify-content: center;
    align-items: start;
}
.tabs {
	margin:0;
	width:inherit;
}
.tabs .tab{
	text-transform: none;
	border-radius: 50px;
}

.tabs .tab a{
	color:white;
	font-size:0.8rem;
}
.tabs .tab a:hover, .tabs .tab a.active{
	color: white;
	text-decoration: underline;
}


/* TABLE */
tr {
	border-bottom: none;

}
.support-section .support-items {
	background:none;
}
.row {
	margin-bottom: 0px;
}
.headers {
	    border-bottom: 1px solid black;
}
.headers div{
	font-weight: bold;
}
.data {
	border-bottom: 1px solid #f5f1f1;
    padding: 10px 0px;
	position: relative;
}
.data-cover {
	position: absolute;
	top:0;
	left:0;
	z-index:1;
	background:white;
	width:100%;
	height: 100%;
}
.col1 {
	margin-right:10px;
	font-weight: 600;
}
.col2 {
	margin-left:10px;
    font-size: 18px;
	font-weight: normal;
}
.coldata{
	font-size: 1rem;
}
.coldata-regular{
	font-size:0.8rem;
	white-space: nowrap;
}
.brand{
	font-size:0.6rem;
	color:grey;
	font-weight: normal;
}
.brand-name{
	margin-left: 20px;
	
}

.icon{
	width:32px;
	height: 32px;
	margin:0 auto;
}


@media only screen and (max-width: 992px){
	#lesson-numbers .bubble{
		margin-right:2px;
	}
	
}

@media only screen and (max-width: 600px){
	
	.bubble-outer-container{
	
	  margin-top:20px;

	}
}
.bubble-container{
	margin: auto 5%;
	display: flex;
    align-items: center;
    justify-content: center;
	
}

.intro-bubble-text{
	background: #f3a004;
	color:black;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
	margin-bottom: 5px;
}
.tb-summary{
	
}

.tb-summary-container-alt{
	display: flex;
	align-items: flex-start;
}
.tb-summary-container-alt button{
	margin-right:10px;
}
.tb-summary-container{
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
}
.tb-summary-left{
	margin-right:20px;
	display: flex;
}
.tb-summary-right{
	
}
.contact-summary-container{
	display: flex;
  align-items: center;
    margin-bottom: 10px;
}
.contact-summary-left{
	width:160px;
	display: flex;
	font-size: 1rem;
    font-weight: 600;
}
.contact-summary-right a:hover{
	color:#039be5;
	text-decoration: underline;
}
.button-back{
	
	margin-right:5px;
}
.task-list-header{
	padding:10px;
}
.bubble {
	min-width: 30px;
    height: 30px;
	line-height: 30px;
	color:white;
    border-radius: 15px;
    margin: auto;
	text-align: center;
	
}
.bubble-week{
	cursor: pointer;
	
}
.bubble-lesson-color{
	background:blue;
}
.bubble-tb {
	margin: auto;
	color: #f3a004;
}
.bubble-lesson {
	min-width: 30px;
    height: 30px;
	line-height: 30px;
	color:white;
    border-radius: 15px;
	text-align: center;
}
.bubble-lesson i{
	
}
@media only screen and (max-width: 992px){
	#lesson-numbers .bubble{
		margin-right:2px;
	}
}
.bubble-connector-container {
	
}
.bubble-connector {
	width: 4px;
	height: 100%;
    border-radius: 0;

	margin:0 auto;
}

.bubble-notdue{background: #cccccc;}
.bubble-notdone{background: red;}
.bubble-done{background: green;}
.bubble-inprogress{background: orange;}

.lesson-completed{
	background: url(../img/celebration.jpg) no-repeat center left;
}
.week-schedule {
	display: none;
	background-color: #edf3f7;
    padding: 5px 20px 20px 20px;
    border-radius: 10px;
	margin: 15px 0px 20px 0px;
	
}
.week-schedule-container{
	display: flex;
	margin-bottom: 20px;
}
.new-week{
	margin-bottom: 5px;
	align-items: center;
}
.week-schedule-left{
	margin-right:20px;
}
.bottom-tab{
	padding: 0 10px;
    text-align: center;
    border-radius: 20px;
    margin: 5px auto 0px auto;
	/*background:#ebeef6;*/
	cursor: pointer;
	font-size:0.8rem;
}
.bottom-tab:hover{
	background:#6B98BC;
	color:white;
}
.header-intro-alt{
	display:flex;
	align-items: flex-start;
	border: 1px solid #ebebeb;
    padding: 10px;
    border-radius: 10px;
	background:#edf3f7;
}
.lesson-not-complete{
	background: url(../img/lesson2.gif) no-repeat center center;
    background-size: cover;
}
.header-intro{
	display:flex;
	align-items: center;
}
.header-bubble-outer{
	min-width:70px;
	height: 70px;
	display: flex;
    align-items: center;
	justify-content: center;
	background:#519b50;
	border-radius: 50px;
	margin-left: 10px;
}
.header-bubble-inner{
	width:40px;
	height: 40px;
	border-radius:40px;

	display: flex;
    align-items: center;
    justify-content: center;
}
.menu-bubble-outer{
	min-width:50px;
	height: 50px;
	display: flex;
    align-items: center;
	border:1px solid #edf3f7;
	border-radius: 10px;
	margin-bottom: 5px;
	cursor: pointer;
}
.menu-bubble-outer:hover{
	background:#edf3f7; /*#ffd565;*/
}
.quiz-bubble-outer{
	min-width:50px;
	height: 50px;
	display: flex;
    align-items: center;
	
	
}
.menu-bubble-inner{
	width:30px;
	height: 30px;
	border-radius:40px;
	margin:0 10px 0 10px;
	position: relative;
	background: white; 	
	border:1px solid #edf3f7;
}
.task-header{
	display:flex;
	justify-content: left;
	height:35px;
	margin-bottom: 15px;
}
.task-color{
	 width: 3px; 
	height:55%;
	margin-right:10px;
}
.task-color-2{
	 width: 3px; 
	height:100%;
	margin-right:10px;
}
.task-complete, .task-not-complete {
	font-size:16px;
}
.header-bubble-inner i{
	font-size: 1.7rem;
	color:white;
}
.header-bubble-text{
	 padding: 1em;
}
.header-bubble-text-alt{
	 padding: 0 0 0 5px;
}
.header-bubble-text-0{
	font-size: 1.8rem;
    font-weight: 600;
    color: #2e4985;
	line-height: 1.2rem;
	font-family: 'Quicksand';
	margin:0;
}
.header-margin{
	
}
.header-underline {
	    display: inline-block;
    background: #0f132e;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
}

.header-bubble-text-1, .hero-section .hero-text span, .header-bubble-text-4, .header-bubble-text-6{
	font-size: 1.2rem;
    font-weight: 600;
    color: #0f132e; /*color: #ff8400;*/
	line-height: 1.4rem;
	 /*font-family: 'Roboto';*/
	font-family: 'Quicksand';
	    margin-bottom: 20px;
}
.header-bubble-text-5{
	font-size: 1.4rem;
    font-weight: 600;
    color: #0f132e; 
	line-height: 1.2rem;
	 
	font-family: 'Quicksand';
	    margin: 0px;
}
.header-bubble-text-4{
	font-family: 'Roboto';
	color: #0f132e;
	font-size: 1.6rem;
	margin-bottom:10px;
}
.header-bubble-text-2{
	font-size: 0.9rem;
font-family: 'Roboto';
	    font-weight: 600;
    color:#f86f02;
}
.header-bubble-text-6 {
	font-size:1.2rem;
	margin-bottom: 10px;
   
}
.header-bubble-text-3{
	font-size: 1rem;
    
    color: black;
}
.page-header{
	    background: #0f132e;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding: 10px;
    color: white;
	margin-bottom: 0px;
}
.subheader-intro{
	display: flex;
    align-items: center;
}
.subheader-left{
	width:120px;
}
.subheader-right{
	
}

.icon-list{
	display: flex;
    align-items: center;
	margin: 10px;
}
.icon-list-icon{
	margin-right:20px;
	width:32px;
	height: 32px;

}
.icon-list-name{
	
}
ol, ul{
	margin:0px 10px 0px 20px;
}

.new-btn {
    padding: 10px 30px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-transform: none;
    border-radius: 50px;
	font-weight: 600;
	background-color:#034c98;
}

.btn-orange {
	 background-color: #fd6e0a;
}
.btn-orange:hover{
	background-color:#b7530d;
}
.small-btn {
	padding: 5px 10px 5px 10px;
	text-transform: none;
}
.button-previous, .button-plan-previous, .button-tb-previous{
	margin-right:10px;
}
.button-plan-edit, .button-plan-view{
	
}
.button-intro-next{
	-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
}
.button-icon{
	display: flex;
	align-items: center;
}
.button-icon i{
	font-size: 1rem;
    margin-left: 5px;
	margin-right: 5px;
}
.primary-btn {
    background-color: #fd6e0a;
    border: 2px solid transparent;
    color: #ffffff;
}

.button-preview{
	position: absolute;
    top: 8px;
    right: 5px;
    background: #fd6e0a; /*#17a917;*/
    margin-right: 5px;
    padding: 5px 10px;
}
.button-copy{
	position: absolute;
    top: 8px;
    right: 150px;
    background: #fd6e0a;
    margin-right: 5px;
    padding: 5px 10px;
}
/* LESSONS */

.task {
	display: none;
}
.task.active {
	display: block;
}
.task-complete, .task-not-complete {
	color:white;
	position: absolute;
    top: 7px;
    left: 7px;
	
}
.button-task-active, .button-plan-task-active{
	background:#edf3f7;
	font-weight: 600;
}
.button-container{
	margin: 20px 0 0 10px;
    text-align: left;
}
/*CONTENT */

@keyframes fadeOut {
  0% {
    opacity: 1; /* Start fully visible */
  }
  100% {
    opacity: 0; /* End fully transparent */
	display: none;
  }
}

.box {
  animation-name: fadeOut;
  animation-duration: 2s; /* The animation lasts for 2 seconds */
  animation-fill-mode: forwards; /* Ensures the element stays hidden after the animation */
}
.home-row{
	    margin-bottom: 20px;
    border-radius: 10px;
    background: #ffffffdb;
}
p {
	color: rgba(0, 0, 0, 0.87);
	font-size:1rem;
	
	line-height: 1.3rem;
}
h4{
	margin:10px;
	font-size:1.2rem;
}
.table-format{
	background: white;
     margin: 10px auto;
}
.table-format table td{
	border:1px solid grey;
}
/* QUESTIONS */
.question-block{
	 
    border:1px solid #edf3f7;
	border-radius: 10px;
    padding: 20px;
    background: white;
	margin:10px;
}
.inline-feedback.active{
	padding: 20px;
    border: 2px solid #fe8400;
    margin: 20px;
    border-radius: 10px;
    background: #fe84002e;
}
.question-label-block-only, .feedback{
	background:#d6ebfb;
}
.question-label-block-only .question-label{
	font-weight: normal;
	margin: 0;
}
.radio.question-block, .dropdown.question-block, .checkbox.question-block {
	padding:0px;
}
.radio .question-label, .dropdown .question-label, .checkbox .question-label{
	background: #0f132e;
    color: white;
    padding: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.question-label-sub{
	background: none;
    color: #0f132e;
}
.sub-label{
	padding:0px 10px 0px 10px;
	font-weight: 600;
}
.hide-label{
	margin-top:10px;
	margin-left: 30px;
}
.radio .question-response, .dropdown .question-response, .checkbox .question-response{
	padding: 10px;
}
.radio .question-input{
	background:grey;
	margin-bottom:5px;
}
.radio .question-input  {
    background: #ededed;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 10px;
}
.radio .question-input:hover{
	background:#c7c6c6;
}
.question-sequence{
	font-size:1.2rem;
	font-weight: 600;
	color:#2e4985;
	font-family: 'Quicksand';
}
.question-container {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
}
.question-label{
	font-weight: 600;
	margin-bottom: 10px;
}
.question-subblock {
	display: none;	
}
.required {
	background: #ff6464;
    border-radius: 5px;
    padding: 5px;
    color: white;
	margin: 5px;
}

.correct-response {
	/*background:  #edf3f7;*/
    border-radius: 5px;
   
    color: #000000;
    border: 1px solid #e87d1d; /*#4abb4a*/; /*#e87d1d;*/
    
}
.correct-response-inner{
	margin: 10px 0px 10px 35px;
	color: #e87d1d;
	display: flex;
	align-items: flex-start;
}
.bubble-correct {
	background:#e87d1d;
    padding: 5px 8px;
    border-radius: 30px;
	font-weight: normal;
    margin-right: 5px;
}
.bubble-correct:hover{
	background:#e87d1d;
	box-shadow: none;
}
label {
	font-size: 1rem;
	color:rgba(0, 0, 0, 0.87);
}
.question-label label{
	
}
.question-response{
       margin: 0px;
}
[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:before, [type="radio"].with-gap:checked + span:after{
	background-color:#0f132e;
	border: 2px solid #0f132e;
}
.list-callout{
	background:#edf3f7;
	padding:5px 20px;
	border-radius: 10px;
	margin: 10px 0px;
}
ul.browser-default{
	list-style:disc;
}
@media only screen and (max-width: 600px){
	.list-callout{
		margin: 10px;
	}
}


/* PLAN */
input, textarea {
	color: #0f132e;
}
textarea {
    border-radius: 10px;
    height: 10rem;
    padding: 10px;
}


[type="checkbox"].filled-in:checked + span:not(.lever):after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #0f132e;
    background-color: #0f132e;
	
}


.font-size-outer{
	position: fixed;
    top: 0px;
	right:20px;
	z-index: 50;
	border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
	-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 30%);
	height: 45px !important;
    padding: 12px 10px;
	display: flex;
	cursor: pointer;
	background: #2e4985;
	color:white;
}
@media only screen and (max-width: 991.97px) {
	.font-size-outer{
		right:60px;
	}
	
}
@media only screen and (min-width: 991.97px) {
	.font-size-outer:hover{
		background:#fd6e0a;
	
	}
	
}

.font-size{
	
	line-height: 8px !important;
    text-align: center;
}
.font-size-dot {
	border:1px solid white;
	height: 8px;
	width: 8px;
	margin:3px 2px 0 2px;
	border-radius: 4px;
}
.font-active .font-size-dot{
	background: white; /*#fd6e0a;*/
	border:1px solid white;
}

.toast {
	background: #4abb4a;
}

.button-citations{
	padding: 1px 9px 3px 9px;
    margin-left: 3px;
    margin-top: -5px;
}
.citation-links a{
	color:#034c98;
	text-decoration: underline;
}

/* CARDS */
.card {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.blue-grey.darken-1{
	background-color: #f1f1f1 !important;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating){
	text-transform: none;
}
.card {
	margin: 0;
}
.card .card-content {
	background: white;
    border: 1px solid #f1f1f1;
}
.card .card-image img {
	max-height: 140px;
}

.card-cover{
	position: absolute;
	width:100%;
	height:100%;
	background: #00000042;
	display:none;
	z-index: 5;
}
.card-action{
	z-index: 6;
}

.card-action a{
	border: 1px solid #cbbfbf;
    text-align: center;
    margin: 0 0 5px 0 !important;
	color: #31bb5c !important;
	background: white;
}
.card-action a:hover{
	background:#fd6e0a;
	color:white !important;
}
.halfway-fab {
	
	display:none;
} 
.modal-content-inner{
	display:none;
}
.modal-content-inner.active{
	display:block;
}
.modal {
	overflow-x: hidden;
	max-height: 85%;
	width:75%;
}
.modal-close {
	position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
}

.card-modal{
	    position: relative;
	width:100%;
	height:100px;
	background-image: url("../img/diet.webp");
    background-repeat: no-repeat;
    background-size: cover;
	background-position: center center;
}
.card-diet {background-image: url("../img/diet.webp");}
.question-block span{
	/*line-height: 20px !important;*/
}


#button-allow-next {
	display: none;
}










.styled-table {
    
}

.styled-table thead tr, .styled-table-alt th, .styled-table-alt2 th {
    background-color: #0f132e;
	border-right: 1px solid #0f132e;

    color: #ffffff;
    text-align: center;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
	text-align: center;
	border-radius: 0px;
}
.styled-table-alt2 {
	border:1px solid #b2b2b2;
}
.styled-table-alt2 td, .styled-table-alt2 th{
	text-align: left !important;
}
.styled-table tbody tr {
    border-bottom: 1px solid grey;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}


.styled-table-alt th, .styled-table-alt td{
	text-align: left;
}
#form-feedback{
	margin-bottom: 20px;
}
#qa {
	position: absolute;
    left: 5px;
    width: 200px;
    z-index: 20;
    top: 100px;
	
}
#qa table td, #qa table th{

	
	font-size:12px;
	vertical-align: top;
    padding: 2px;
}
.border-top{
	border-top:1px solid grey;
}
.qa-rule-name{
	color:blue;
}
.toast-success {
	background:green;
	border-radius: 20px;
}
.toast-warning{
	background:#ff6464;
	border-radius: 20px;
}

.meta-strategies {
	display: none;
	text-decoration: underline;
	color:blue;
	cursor:pointer;
}



/* ADMIN */
.header-bubble-count{
	background: #32a651;color:white;
    margin-right: 10px;
    border: 1px solid #32a651;
    padding: 2px 10px;
	display:inline-block;
	text-align:center;
    border-radius: 20px;
}
.input-field{
	/*margin-top:40px;*/
}
select.dt-input{
	display: block;
	height: 2rem;
	background-color: white !important;
}
.dt-search{
	padding-right: 15px;
}
div.dt-container .dt-search input {
	height: 1.5rem;
	background: white;
}
.dt-layout-full {
	background: white;
}
div.dt-container .dt-paging .dt-paging-button.current{
	padding: 5px 30px;
    cursor: pointer;
	color:white !important;
	font-weight: 600;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-transform: none;
    border-radius: 50px;
	background:#034c98;
	border:none;
}
div.dt-container .dt-paging .dt-paging-button.current:hover{
	color: #ffffff !important;
    background: #fd6e0a;
	cursor: pointer;
	border:none;
}

table.dataTable>tbody>tr, div.dt-container div.dt-layout-table>div {
    border-bottom: 1px solid #b2b2b2;
}
div.dt-container div.dt-layout-row div.dt-layout-full{
	 border: 1px solid #b2b2b2;
}
.dataTable thead{
	    background: #efefef;
}
.dataTable th {
	border-radius: 0px;
}
.short-cell{
  cursor: pointer;
  width: 350px;           /* Or any specific width/max-width */
  white-space: nowrap;    /* Prevents the text from wrapping to a new line */
  overflow: hidden;       /* Hides the text that overflows the container */
  text-overflow: ellipsis;/* Adds the three dots (...) */
	transition: all 0.3s ease;
	color:blue;
}
.short-cell:hover{
	 
  white-space: normal;      /* Allow text to wrap */
  overflow: visible;       /* Show the hidden text */
  width: auto;             /* Or a larger fixed width */
 transition: all 0.3s ease;
}

table.dataTable thead>tr>th div.dt-column-header .dt-column-title{
	flex-grow:0;
	
}
table.dataTable th.dt-type-numeric div.dt-column-header{
	flex-direction: row;
}

.data-row:hover{
	background:#eeeeee;
	cursor: pointer;
}
.participant-info{
	padding: 20px !important;
}
.admin-row-container{
	position: relative;
    border: 1px solid #eeeeee;
 
    background: white;
    border-radius: 5px;
    padding: 0px !important;
	
}
.data-preview-offscreen {
	position: absolute;
    left: -9999px;
    top: 0;
}
#all-data .data-preview-offscreen{
	position: relative;
	left:0;
}