.habit-container{
    box-shadow: 20px 20px 50px #BDBDBD;
    padding-top:10px;
    border-radius: 3px;
    padding-bottom: 5px;
    width:100%;
    height: auto;
    margin-top: 10px;
}

.heading-habit{
    width:100%;
    margin-bottom: 15px;
    height: auto;
}
.image-habit{
    float:left;
    width:30px;
    height: 30px;
    padding:5px;
}

.image-habit img{
    width: 25px;
    height: 25px;
    margin-left:5px;
    vertical-align: top;
}

.image-habit-mobile{
    float:left;
    width:30px;
    height: 30px;
    padding:2px;
    padding-top: 7px;
}

.image-habit-mobile img{
    width: 26px;
    height: 27px;
    vertical-align: center;
}

.title-text{
    width:56%;
    float:left;
    text-align: left;
    font-size: medium;
    margin-left: 10px;
    margin-top: 7px;
    vertical-align: bottom;
    height: 30px;
    font-weight: bold;
}

.score{
    width:40%;
    float:right;
    text-align: right;
    font-size: medium;
    padding:2px;
}
.score img{
    width: 30px;
    height: 25px;
    padding:2px;
}

.score-mobile{
    width:29%;
    float:right;
    text-align: right;
    font-size: medium;
    padding-top: 5px;

}
.result{
    display: inline-block;
    width:49%;
    vertical-align: top;
    padding:5px;
    padding-left: 0px;
    font-size: medium;

}

.habit-description{
    width: 100%;
    padding-left:5px;
    margin-top:10px;
    margin-bottom: 10px;
}
.habit-description-mobile{
    width: 100%;
    height:100%;
    position:relative;
    padding-left:5px;
    padding-top:20px;
    margin-bottom: 10px;
}


.result-mobile p{
    display:block;
    padding-left:2px;
    padding-right:2px;
    text-align: left;
}

.progress-questionnaire{
    display: inline-block;
    text-align: right;
    float:right;
    padding-right: 0px;
    font-size: medium;
}

.video-habit iframe{
    padding:10px;

}
.bottom{
    position: fixed;
    bottom:20px;
}

.question-title{
    font-size: x-large;
}
/*body{
    padding-top: 70px;
    padding-bottom: 40px;
    color: #595959;
    background-color: #f6f5f3;
    }*/
/* ----------------------- */
/*     Francisco design    */
/* ----------------------- */


/* ----------------------- */
/*     GENERAL SETTINGS    */
/* ----------------------- */
/* ----------------------- */
/*     GENERAL SETTINGS    */
/* ----------------------- */

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f5f5fa;
}

body, a, p, h1, h2, h3, input {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    color: #2d2d32;
    text-decoration: none;
    font-size: 14px;
}

a {
    color: #3c5a96;
}

a:hover {
    cursor: pointer;
}

/* ----------------------- */
/*   CENTERED CONTAINER    */
/* ----------------------- */

div.CenteredContainer {
    width: 740px;
    min-height:1371px;
    margin: 0 auto 0 auto;
    
}

.FloatRight {
    float: right;
}

div.mobileCenteredContainer {
    width: auto;
    margin: 0 auto 0 auto;
}
div.container-fluid{
    padding-left:0px;
}
@media (min-width: 1025px) and (max-width: 1100px) {
    div.container{
        width: 520px;
    }
}
@media (min-width: 1101px) and (max-width: 1200px) {
    div.container{
        width: 610px;
    }
}
@media (min-width: 1201px) and (max-width: 1300px) {
    div.container{
        width: 700px;
    }
}
@media (min-width: 1301px) and (max-width: 1400px) {
    div.container{
        width: 810px;
    }
}
@media (min-width: 1401px) and (max-width: 1500px) {
    div.container{
        width: 910px;
    }
}
@media (min-width: 1501px) and (max-width: 1700px) {
    div.container{
        width: 1010px;
    }
}

/* ----------------------- */
/*        MENU BAR         */
/* ----------------------- */

#MenuBar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 34px;
    padding: 20px 0 0px 0;
    background-color: white;

}

#MenuBar div#Logo {
    margin: -4px 0 0 40px;
    font-size: 19px;
    font-family: Helvetica;
    float: left;
}

#MenuBar div#Logo span {
    padding-right: 4px;
    float: left;
}

#MenuBar div#Logo span#Logo-EPFL {
    color: #bd3432;
    font-weight: 900;
}

#MenuBar div#Logo span#Logo-COMPANION {
    color: #666666;
    font-weight: 400;
}

#navbarCollapse ul {
    margin: 0 auto 0 auto;
    display: block;
    list-style: none;
    list-style-type: none;
    line-height: 1;
    float: left;
}

#MenuBar.nav .navbar ul li {
    display: inline-block;
    margin-right: 18px;
    height: 32px;
	padding-top:0px;
	margin-top:-4px;

}


#MenuBar ul li, #MenuBar span a {
    color: #606065;
	padding:0px 15px 25px 0px;
	font-size: 14px;

}
#MenuBar ul li a {
	color: #606065;
	font-size: 14px;
}
#MenuBar.nav .navbar-nav a{
	padding-top:20px;


}
.navbar-inverse .navbar-nav > li{
	height:45px;
	min-width:67.04px;
	max-width:95.42px;
}
.navbar-inverse .navbar-nav a.selected {
	padding:0px 0px 14px 0px;
    margin:0px;
    border-bottom: 1px solid #bd3432;
	color: #333;
    font-weight: 600;
	font-size: 14px;
}

div.CenteredContainerMenu {
    width: 740px;
    margin: 0px auto 0 auto;    
    
}
#myNavbar > div > ul.nav.navbar-nav.navbar-right::before{
    margin-top:-5px;
}
#myNavbar[aria-expanded="false"] div.CenteredContainerMenu{
    background-color: white;
    position: fixed;
    top: 57px;
    right:15px;
    width:120px;
    border: 1px solid #e6e6eb;

}
#myNavbar[aria-expanded="true"] div.CenteredContainerMenu{
    background-color: white;
    position: fixed;
    top: 57px;
    right:15px;
    width:120px;
    border: 1px solid #e6e6eb;

}
#myNavbar[aria-expanded="true"] div.CenteredContainerMenu li{
    width:120px;
    padding-left:25px;
    height:25px;
    
}

#myNavbar[aria-expanded="true"] div.CenteredContainerMenu ul li a.selected{
    width:120px;
    height:25px;
    padding:0px;
    border-bottom:0px;
}
#myNavbar[aria-expanded="false"] div.CenteredContainerMenu li{
    width:120px;
    padding-left:25px;
    height:25px;
}

#myNavbar[aria-expanded="false"] div.CenteredContainerMenu ul li a.selected{
    width:120px;
    height:25px;
    padding:0px;
    border-bottom:0px;
}
#myNavbar[aria-expanded="true"] li{
    padding-bottom: 5px;
    
}
#myNavbar[aria-expanded="false"] li{
    padding-bottom: 5px;
}


#MenuBar ul li a:hover {
    color: #333;
}
.navbar-inverse{
	border-top:none;
	height: 34px;
    padding: 20px 0 0px 0;
    background-color: white;
	color:red;
    border-color:white;
}
.navbar-inverse span a{
	float:left;
}

.navbar-inverse .navbar-collapse {
	border-color:#f5f5fa;
}

.nav li a {
	padding:0px;
	margin:0px 0px 0px 0px;

}
.nav .navbar-nav li a.selected {
	padding:5px 0px 0px 0px;
	margin-left:25px;
    border-bottom: 1px solid #bd3432;
	color: #333;
    font-weight: 600;
	font-size: 14px;

}



/* ----------------------- */
/*     NAVIGATION PATH     */
/* ----------------------- */

div#NavigationPath {
    border-bottom: 1px solid #e6e6eb;
    padding-bottom: 8px;
    margin: 92px 0 24px 0;
}

div#NavigationPath a {
    color: #3c5a96;
}

div#NavigationPath a:hover {
    cursor: pointer;
}

div#NavigationPathmobile {
    padding-bottom: 8px;
    margin: 72px 0 24px 0;
}

.navbar-inverse .navbar-nav ul > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover{color:#595959;}
.navbar-inverse .navbar-nav ul > li > a:focus, .navbar-inverse .navbar-nav > li > a {color:#595959; font-size: medium; }
.navbar-inverse .navbar-toggle .icon-bar {background-color: #595959; border:2px solid #595959;}



/* ----------------------- */
/*       HEADER TYPES      */
/* ----------------------- */

h1 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.333;
    letter-spacing: -0.02rem;
    margin-bottom: 12px;
}

h2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

/* ----------------------- */
/*         BUTTONS         */
/* ----------------------- */

a.btncreate, button.btncreate, input.btncreate {
    display: inline-block;
    color: #ffffff;
    background-color: #00b300;
    border: none;
    border-radius: 2px;
    padding: 8px 14px 8px 14px;
    font-size: 14px;
}

a.btn, button.btn, input.btn{
    display: inline-block;
    color: #ffffff;
    background-color: #3c5a96;
    border: none;
    border-radius: 2px;
    padding: 8px 14px 8px 14px;
    font-size: 14px;
}
input.btn:hover{
    background-color: #2e4471;
    color: #ffffff;
}
a.btn:hover {
    background-color: #2e4471;
    color: #ffffff;
}

a.buttonDeleteActive {
    background-color: #cf5541;
}

a.buttonDeleteActive:hover {
    background-color: #af392a;
    color: #ffffff;
}

a.ButtonInactive {
    background-color: #ddd;
}
a.ButtonInactive:hover {
    background-color: #ddd;
    cursor: not-allowed;;
    pointer-events: none;
}


.btn a:hover{
    color:white;
    background-color: #2e4471;
}
button:hover{
    color:white;
    background-color: #2e4471;
}
/* --------------------------- */
/*       SHADOWED BOXES        */
/* --------------------------- */

div.ShadowedContentBox {
    background-color: white;
    border-radius: 4px;
    -webkit-box-shadow: 0px 8px 24px rgba(13,13,18,0.04);
    box-shadow: 0px 8px 24px rgba(13,13,18,0.04);
}

div.ShadowedContentBox .Banner {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

div.ShadowedContentBox div.Content {
    padding: 2px 22px 14px 22px;
}
div.ShadowedContentBox div.mobileContent {
    padding: 0 15px 24px 15px;
}

div.ShadowedContentBox h2 {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

div.ShadowedContentBox p.Description {
    margin: 0 0 32px 0;
    color: rgb(128,128,128);
}

div.ShadowedContentBox hr.ContentSeparator {
    border: none;
    border-bottom: 1px solid #e6e6eb;
}

hr.mobileContentSeparator {
    border: none;
    border-bottom: 1px solid #d9d9d9;
}
/* CONTENT ROWS START HERE */

div.ShadowedContentBox div.ContentRow {
    border: 0 dashed red; /* BORDER */
    margin: 24px 0 24px 0;
    vertical-align: top;

}


div.ShadowedContentBox div.ContentRow img.ContentIcon {
    vertical-align: top;
    display: inline-block;
    border: 0 dashed green; /* BORDER */
    width: 42px;
    opacity: 0.66;
}

div.ShadowedContentBox div.ContentRow div.ContentLeft {
    vertical-align: top;
    display: inline-block;
    border: 0 dashed green; /* BORDER */
    width: 312px;
    margin-left: 24px;
}

div.ShadowedContentBox div.ContentRow div.ContentLeftmobile {
    vertical-align: top;
    display: inline-block;
    border: 0 dashed green; /* BORDER */
    width: 60%;
    margin-left: 24px;
}


div.ShadowedContentBox div.ContentRow div.ContentRight {
    vertical-align: top;
    display: inline-block;
    border: 0px dashed blue; /* BORDER */
    width: auto;
    float: right;
}

div.ShadowedContentBox h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

div.ShadowedContentBox div.ContentRow div.BasicDetails {
    margin-bottom: 8px;
}

div.ShadowedContentBox div.ContentRow div.BasicDetails p strong,
div.ShadowedContentBox div.ContentRow div.MoreDetails  p strong {
    color: #303030;
    font-weight: 600;
}

div.ShadowedContentBox div.ContentRow p {
    color: #505050;
    margin-bottom: 2px;
}

div.ShadowedContentBox div.ContentRow a.ShowMore {
    display: inline-block;
    color: #3c5a96;
}

div.ShadowedContentBox div.ContentRow div.MoreDetails {
    margin-top: 8px;
    margin-left: 8px
}

div.ShadowedContentBox a {
    text-decoration: none
}

.mobileContainer {
    padding: 10px 10px 10px 10px;
    margin: auto;
}
.mobileContent{
    margin:auto 15px auto 15px;
}

/* --------------------------- */
/* UPCOMING SESSIONS CONTAINER */
/* --------------------------- */

div#UpcomingSessions {
    border: 0px dashed red; /* BORDER */
    margin: 42px 0 92px 0;
}


/* --------------------------- */
/*    INPUT AREA AND FIELDS    */
/* --------------------------- */


div#SessionDetails {
    border: 0px dashed green;
    margin-top: 16px;
    margin-bottom: 0px;
}



#ListExercise {
    border: 0px dashed green;
    margin-bottom:20px;
    margin-top:20px;
}

ul#ListExercise {
    list-style: none;
}
/* ---------------- */

div.InputArea {
    border: 0px dashed green;
    width: auto;
    margin-bottom: 8px;
    display: block;
    vertical-align: middle;
}

div.InputArea div.InputField {
    border: 0px dashed blue;
    width: auto;
    margin-bottom: 4px;
}

div.InputArea div.InputField p,
div.InputArea div.InputField input {
    display: inline-block;
}

div.InputArea div.CourseCode {
    margin-bottom: 8px;
}

div.InputArea div.InputField p {
    width: 64px;
}

div.InputArea div.InputField input {
    width: 148px;
    height: 24px;
    padding: 0 4px 0 4px;
}

div.InputArea div.SessionTitle input {
    width: 232px;
}


/* List of exercises */

div.InputExercises {
    border: 0 dashed green;
}



div.InputExercises div.InputField {
    display: inline-block;
    vertical-align: middle;
}

div.InputExercises select {
    height: 28px;
    border: 1px solid silver;
    margin-top: 1px;
    margin-left: 4px;
}

select.selectClass{
    width: 128px;
    height: 28px;

}
div.InputExercises select.mobileselectClass{
    width: 128px;
    height: 28px;
    margin-left:54px;
    margin-top:8px;

}
div.InputExercises p.titlemobile{
    margin:0;
    display: inline-block;
    vertical-align: top;
    padding-right:8px;
    width:49px;
    margin-right:4px;
}


select.format_question {
    width: 78px;
    height: 28px;

}


div.InputExercises select.NewType {
    width: 64px;
}

div.InputExercises div.ContentButtons {
    float: right;
    margin-top: -2px;
}

div.InputExercises div.mobileContentButtons {
    margin:8px auto 2px 54px;

}

div.InputExercises div.mobileFile {
    margin:8px auto 2px 54px;

}


div.ListExercise div.divFile {
    margin-top: 4px;
    margin-left: 64px;
}

div.InputExercises div.divFile input {
    border: 0 solid green;
    padding: 0;
}

div.InputExercises div.divFile a.effacer {
    color: #bd3432;
}

div.ReturnButtons {
    margin-top: 42px;
}


/* --------------------------- */
/*         WARNING BOX         */
/* --------------------------- */

div#WarningBox {
    margin: 24px 0 0 0;
    background-color: white;
}

div#WarningBox .Banner {
    background-color: #cf5541;
    padding: 20px 32px 20px 32px;
}

div#WarningBox span.Title {
    color: white;
    font-size: 16px;
}

div#WarningBox div.RowMobile {
    height: auto;
    display:inline-block;
    width:50%;

}

div#WarningBox div.RowMobile:not(:first-child) {
    margin-top:2px;
}

div#WarningBox div.RowMobile p {
    float: left;
    margin-top: 7px;
}
div#WarningBox div.RowMobile:not(:first-child) p {
    float: left;
    margin-top: 4px;
}


div#WarningBox div.RowMobileButton{
    display:inline-block;
    width:40%;
    float:right;
}


div#WarningBox div.RowMobileButton a.btn {
    float: right;

}
div#WarningBox div.RowMobileButton:not(:first-child) {
    margin-top:4px;
}

div#WarningBox div.Row {
    height: 37px;

}

div#WarningBox div.Row:not(:first-child) {
    margin-top: 0;
}

div#WarningBox div.Row p {
    float: left;
    margin-top: 7px;
    padding-left:0px;
    width:500px;
}

div#WarningBox div.Row a.btn {
    float: right;
    margin-left:auto;
    margin-right:0;
}
div#WarningBox div.Row:not(:first-child) a.btn {
    float: right;
    margin-left:auto;
    margin-right:0;
}


/* ---------------------------- */
/*     PARAMETER AREA           */
/* ---------------------------- */


.courMobile {
    height: auto;
    display:inline-block;
    width:50%;

}

.courMobile:not(:first-child) {
    margin-top:2px;
}

.courMobile p {
    float: left;
    margin-top: 7px;
}
.courMobile:not(:first-child) p {
    float: left;
    margin-top: 4px;
}


.courMobileButton{
    display:inline-block;
    width:40%;
    float:right;
}


.courMobileButton a.btn {
    float: right;

}
.courMobileButton:not(:first-child) {
    margin-top:4px;
}

.cour {
    height: 60px;
    width:450px;
    padding-left:0px;
}

.cour:not(:first-child) {
    margin-top: 0;
}

.cour p {
    float: left;
    margin-top: 7px;
    padding-left:0px;
    width:70%;
}

.cour a.btn {
    float: right;
    margin-left:auto;
    margin-right:0;
}
.cour:not(:first-child) a.btn {
    float: right;
    margin-left:auto;
    margin-right:0;
}

#selectCours {
	height: 29px;
	overflow: hidden;
	width: 320px;
}

/* --------------------------- */
/*         CHARTS AREA         */
/* --------------------------- */


div#ChartsBox {
    margin: 32px 0 0 0;
}

div#ChartsBox div.ChartsArea {
    height: 312px;
    border: 0 solid silver;
    margin: 32px 0 16px 0;
}

div#ChartsBox div.ChartsArea img {
    width: 674px;
    border: 0 solid silver;;
}

/* --------------------------- */
/*       PAGE SELECTORS        */
/* --------------------------- */

div.PageSelector {
    border: 0 dashed green;
    width: auto;
    margin: 0 auto 0 auto;
    text-align: center;
}

div.PageSelector a.PageArrow {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 6px;
}

div.PageSelector a.PageNumber {
    background-color: white;
    color: #2d2d32;
}

div.PageSelector a.Selected {
    background-color: #333;
    color: white;
    border-radius: 6px;
}


/* --------------------------- */
/*     QUESTIONNAIRES LIST     */
/* --------------------------- */

div.QuestionnaireList {
    margin: 32px 0 0 0;
}

div.QuestionnaireList:last-child {
    margin-bottom: 64px;
}

div.QuestionnaireList div.ContentRow h2 {
    display: inline-block;
    width: 50%;
    border: 0 dashed red; /* BORDER */
}

div.QuestionnaireList div.ContentRow a.ShowHide {
    display: inline-block;
    border: 0 dashed red; /* BORDER */
    float: right;
    color: #3c5a96;
}

/* CONTENT ROWS START HERE */

div.QuestionnaireList div.ContentRow {
    border: 0 dashed red;
    margin: 12px 0 12px 0;
    height: 33px;
}

div.QuestionnaireList div.ContentRow div.ContentLeft {
    display: inline-block;
    border: 0 dashed green;
    width: 312px;
    margin-top: 8px;
}

.mobileContentLeft{
    display: inline-block;
    border: 0 dashed green;
    vertical-align: top;
}
.mobileContentLeftbutton{
    display: inline-block;
    border: 0 dashed green;
    margin-left: 0;
    vertical-align: top;
}

div.QuestionnaireList div.ContentRow div.ContentRight {
    display: inline-block;
    border: 0 dashed blue;
    width: auto;
    float: right;
}
div.Content button:hover{
    color:white;
    background-color: #2e4471;
}
/* --------------------------- */
/*         NO DATA YET         */
/* --------------------------- */

div#NoDataBox {
    margin: 24px 0 0 0;
}

div#NoDataBox * {
    text-align: center;
}

div#NoDataBox h3 {
    font-size: 32px;
    color: silver;
    font-weight: 500;
    /*text-shadow: 1px 1px 1px gray;*/
    margin: 12px 0 32px 0;
}

div#NoDataBox p {
    /*font-size: 14px;*/
    color: #505050;
    /*font-weight: 500;*/
    /*text-shadow: 1px 1px 1px gray;*/
    margin: 2px 0 2px 0;
    line-height: 1.5em;
}

div#NoDataBox p.Spaced {
    margin: 16px 0 12px 0;
}


/* --------------------------- */
/*       QUESTIONNAIRES        */
/* --------------------------- */
div#banner_habits_div {
    background-image: url("/static/habit/background_habits@2x.jpg");
    background-size: 100%;
    display: none;

}

div#text-banner {
    color: white !important;
    width: 55%;
    display: inline-block;
    padding: 0 40px;
}
div#text-banner h1{
    color: white;

}
div#text-banner h3{
    color: white;

}
div#text-banner p{
    color: white;

}
div#img-banner {
    width: 44%;
    display: inline-block;
    vertical-align: top;
    padding: 40px 30px 40px 30px;
}
div#img-banner img {
    width: 100%;
}

div#HabitsList {
    margin: 32px 0 64px 0;
}

div#HabitsList div {
    border: 0 dashed silver;
}

div#HabitsList div.ContentRow:last-child {
    margin-bottom: 0;
}

div#HabitsList div.ContentLeft {
    width: 400px;
    margin-left: 32px;
}

div#HabitsList div.BasicDetails {
    margin-bottom: 16px;
}

img.Battery {
    float: right;
    width: 46px;
    opacity: 0.9;
}

img.BatteryDouble {
    width: 46px;
    opacity: 0.9;
}

img.BatteryInactive {
    opacity: 0.1;
}

div#HabitsList img.ContentIcon {
    opacity: 0.66;
    width: 32px;
}

div.DoubleColumnContainer {
    border: 0 dashed silver;
    margin: 0 42px 0 67px;
}

div.mobileDoubleColumnContainer {
    border: 0 dashed silver;
    margin: 0;
}

div.DoubleColumnContainer div.DoubleColumnLeft,
div.DoubleColumnContainer div.DoubleColumnRight {
    vertical-align: top;
    display: inline-block;
    width: 256px;
}

div.mobileDoubleColumnContainer div.mobileDoubleColumnLeft,
div.mobileDoubleColumnContainer div.mobileDoubleColumnRight {
    vertical-align: top;
    display: inline-block;


}

div.DoubleColumnContainer div.DoubleColumnRight {
    margin-left: 28px;
}

div.DoubleColumnContainer a {
    display: block;
    margin-top: 16px;
}

div.ChartDoubleColumnContainer {
    border: 0 dashed silver;
    marging:20px auto 20px auto;
}

div.ChartDoubleColumnContainer div.ChartDoubleColumnLeft,
div.ChartDoubleColumnContainer div.ChartDoubleColumnRight {
    vertical-align: top;
    display: inline-block;
    width: 300px;
}

div.ChartDoubleColumnContainer div.ChartDoubleColumnRight {
    margin-left: 28px;
}

div.ChartDoubleColumnContainer a {
    display: block;
    margin-top: 16px;
}


/* --------------------------- */
/*       HABITS DETAILS        */
/* --------------------------- */


div#HabitDetailsList {
    margin: 32px 0 64px 0;
}

div#HabitDetailsList h2 {
    font-weight: 300;
    margin-bottom: 24px;
}

div#HabitDetailsList h2 strong {
    font-weight: 600;
}

div#HabitDetailsList img.Portrait {
    vertical-align: top;
    display: inline-block;
    width: 128px;
}

div#HabitDetailsList p.Description {
    display: inline-block;
    width: 512px;
    border: 0 solid green;
    margin-left: 24px;
}

div#HabitDetailsList div.ContentLeft {
    margin-left: 0;

}

div#HabitDetailsList div.DoubleColumnContainer {
    margin: 12px 0 0 0;
    border: 0 solid red;
}

div#HabitDetailsList div.DoubleColumnLeft,
div#HabitDetailsList div.DoubleColumnRight {
    width: 292px;
}

div#HabitDetailsList iframe {
    margin: 12px 0 12px 0;
    border: none;
}

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* --------------------------- */
/*          LOGIN BOX          */
/* --------------------------- */

div#LoginBox {
    margin: 32px 0 64px 0;
}

div#LoginBox h3 {
    margin-bottom: 32px;
}

div#LoginBox div.LoginArea {

}

div#LoginBox div.LoginArea div.LoginOption {
    display: block;
    border: 0 solid green;
    height: 33px;
    margin-top: 24px;
}

div#LoginBox div.LoginArea div.LoginOption p {
    display: inline-block;
    width: 312px;
}

div#LoginBox div.LoginArea div.mobileLoginOption p {
    display: inline-block;
    width: auto;
    margin-top: 24px;
}

div#LoginBox div.LoginArea div.LoginOption a {
    display: inline-block;
    float: right;
    margin-right: 212px;
}

.AppBox {
    vertical-align: top;
    display: inline-block;
    width: 300px;
    height: auto;
    text-align: center;
    cursor: pointer;

      -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.AppBox:hover,
.AppBox:hover img {
    filter: brightness(98%);
}


.AppBox img {
    width: 92px;
    margin-top: -70px

}

.AppBox h3 {
    margin-top: 20px;
    text-align: left;
}

.AppBox p {
    text-align: left;
    color: rgb(128,128,128);
}


.agreement{
        display:inline-block;
        padding-right:15px;
        padding-left:0;
    }
/* old button

.btn-default.buttonInactive{
     background-color: #E0E0E0;
     color:#989898;
     border:1px solid #BDBDBD;
     padding:4px;
     font-size: 16px;
     pointer-events: none;
 }
 .btn-default.buttonInactive:hover{
     background-color: #E0E0E0;
     color:#989898;
     border:1px solid #BDBDBD;
     padding:4px;
     font-size: medium;
    pointer-events: none;
 }

 .btn-default.buttonResultActive{
     background-color: #34a853;
     color:white;
     padding:4px;
     border:1px solid black;
     font-size: medium;
 }
  .btn-default.buttonResultActive:hover{
     background-color: #34a853;
     color:white;
     padding:4px;
     border:1px solid black;
     font-size: medium;

 }

 .btn-default.buttonModifyActive{
    background-color: #4285f4;
    color:white;
    border:1px solid black;
    padding:4px;
    font-size: medium;
    text-align: center;
    text-decoration: none;
    display: inline-block;

}
 .btn-default.buttonModifyActive:hover{

    background-color: #4285f4;
    color:white;
    border:1px solid black;
    padding:4px;
    font-size: medium;
    text-align: center;
    text-decoration: none;
    display: inline-block;

 }

.btn-default.buttonDeleteActive {
    background-color: #ea4335;
    color: white;
    border: 1px solid black;
    padding: 4px;
    font-size: medium;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.btn-default.buttonDeleteActive:hover{
    background-color: #ea4335;
    color: white;
    border: 1px solid black;
    padding: 4px;
    font-size: medium;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
*/
.buttonPageActive{
    background-color: #555555;
    color: #ffffff;
    display: inline-block;
    border: none;
    border-radius: 2px;
    padding: 7px 14px 9px 14px;
    font-size: 14px;
    text-align: center;
}


.buttonPageActive:hover {
    background-color: #555555;
    color: #ffffff;
    display: inline-block;
    border: none;
    border-radius: 2px;
    padding: 7px 14px 9px 14px;
    font-size: 14px;
    text-align: center;
}

.pagesnumber {
    display:inline-block;
    vertical-align: top;
}

.btn-language{
  border:none;
  outline:none;
  background:none;
  cursor:pointer;
  color:#2d2d32;
  padding:0;
  text-decoration:none;
  font-family:inherit;
  font-size:inherit;
  z-index:10;
  position:relative;
}

.btn-language:hover {
    background-color:transparent;
    color: #2d2d32;

}


.rating {
  width: 108px;
  height: 20px;
  margin: 0 auto;
  padding: 40px 50px;
  border: 1px solid #ccc;
  display: contents;
}
.rating label {
  float: right;
  position: relative;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}
.rating label:not(:first-of-type) {
  padding-right: 2px;
}
.rating label:before {
  content: "\2605";
  font-size: 22px;
  color: #ccc;
  line-height: 1;
}
.rating input {
  display: none;
}
.rating input:checked ~ label:before, .rating:not(:checked) > label:hover:before, .rating:not(:checked) > label:hover ~ label:before {
  color: #f9df4a;
}

.rating-mobile {
  width: 108px;
  height: 20px;
  margin: 0 0 auto auto;
  border: 1px solid #ccc;
}
.rating-mobile label {
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float:right;
  margin-bottom: 10px;
}
.rating-mobile label:not(:first-of-type) {
  padding-right: 2px;
}
.rating-mobile label:before {
  content: "\2605";
  font-size: 22px;
  color: #ccc;
  line-height: 1;
}
.rating-mobile input {
  display: none;
}
.rating-mobile input:checked ~ label:before, .rating-mobile:not(:checked) > label:hover:before, .rating-mobile:not(:checked) > label:hover ~ label:before {
  color: #f9df4a;
}

.breadcrumb{
    border-bottom: 1px solid #e6e6eb;
    padding-bottom: 8px;
    margin: 92px 0 24px 0;
    background: none;
    display: none;
}
@media screen and (min-width: 768px) {
  .breadcrumb  { display: block; }
  #banner_habits_div { display: block!important;}
}


.panel-image > img {

    width: 70px;

}

.detailed-privacy{
    display: none;
}

.button-show-privacy {
    background-color: Transparent !important;
    color: #2e4471;
    border: none;
}

div#icon_homepage_background {
    background-image: url('/static/home/hp_background@1x.jpg');
    background-size: 100%;
    height: 36%;

}
div#icon_home_page_img{
    display: inline-block;
    vertical-align: bottom;
}

div#icon_home_page_img img{
margin-top: auto;
}

div#homepage_banner{
    background-image: linear-gradient(232deg, #ABD19A 0%, #45817C 69%, #2E7176 100%)
}
div#hp_start{
    text-align: center;
    margin-left: -20px;
}

.AppBoxMobile {
    vertical-align: top;
    display: block;
    text-align: center;
    margin: auto;
    cursor: pointer;
    max-width: 530px;


      -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.AppBoxMobile:hover,
.AppBoxMobile:hover img {
    filter: brightness(98%);
}


.AppBoxMobile img {
    width: 92px;
    margin-top: -70px

}

.AppBox h3 {
    margin-top: 20px;
    text-align: left;
}

.AppBoxMobile p {
    text-align: left;
    color: rgb(128,128,128);
}