/*
greenish: #b0d400
*/

@font-face {
    font-family: Open Sans;
    src: url("fonts/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Titillium Web;
    src: url("fonts/TitilliumWeb-Regular.ttf") format("truetype");
}

 
body {

    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    background: white;
    padding: 0;
    margin: 0;
    height: 100vh;
    xoverflow: hidden;
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    xtext-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;

    /*background-image: url(../images/bg/mainBG.jpg);*/
    background-size: cover;
    background-position: center;
    color: rgba(0,0,0,.7);

    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
}





h1, h2, h3 {
    font-family: 'Titillium Web', sans-serif;
    line-height: 1.3;
    font-weight: normal;
    color: #111;
    margin: 1.3em 0;
}

h1 { 
    xfont-family: 'Caveat', cursive;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    margin: 8px auto;
    color: rgba(0,0,0,.8);
}

h1 a {background: none;
      color: rgba(0,0,0,.5);
      display: inline;
      font-size: 70%;
      xborder: 1px solid rgba(0,0,0,.4);
      border-radius: 4px

}

h2 {font-weight: bold}


.listView h1 {   margin-top: 25px; }

.listView h2 {    font-size: 110%;}

.detail h2 {
    font-size: 150%;
    margin: 4px 0 10px 0
}

.detail img {max-width: 100%}



h3 {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    margin: 3vh 0 1vh 0;
    padding: 1vh 0;
    border-top: 1px solid rgba(0,0,0,.5);
    border-bottom: 1px solid rgba(0,0,0,.5);
}





h4.subtitle {
    padding: 2px 4px 2px 0px;
    margin: 0px 0px 6px 0px;
    color: rgba(0,0,0,.6);
    xbackground: white;
    xopacity: 0.7;
    font-size: 12.5px;
    font-weight: bold;
    text-transform: uppercase;
}

h5 {font-size: 1em; border-bottom: 1px dotted silver; margin-bottom: 6px}

a { 
    display: inline-block;
    color: steelblue;
    text-decoration: none;
    font-weight: bold;
    background: rgba(255,255,255,.8);
    padding: 4px 8px;
    margin: 4px 6px;
    cursor: pointer;
    border: 1px solid steelblue;
    border-radius: 3px
}

a.active {background: steelblue; color: white}

button {
    font-family: 'Open Sans', sans-serif;
    margin: 6px auto
}

button.block, button.center {margin: 20px auto}


#wrapperPoints {
    position: absolute;
    top: 7px;
    right: 13px;
    font-size: 18px;
    font-weight: bold;
    background: rgba(255,255,255,.9);
    padding: 1px 10px;
    border-radius: 30px;
    border: 2px solid white;
    z-index: 9;
}



section, #splash {
    height: calc(100vh - 41px);
    margin-top: 0;
    width: 100vw;
    overflow: hidden; /* scrolling only .slide or .inner*/
    position: relative;
}

#splash {
    position: absolute;
    z-index: 2;
}


/* section spcific */
#splash {background-color: white; 
         background-image: url(../images/logo_tuvia.png);
         background-repeat: no-repeat;
         background-size: 85%;
         background-position: center;
}

.logoCenter {
    width: 60%;
    display: block;
    margin: 10px auto;
}

#section_know, .colKnow{    background-color: khaki;}
#section_know .subtitle  {color: chocolate; padding: 3px 5px}

#section_instant, .colInstant  {background-color: yellowgreen;} 

#section_instant .subtitle  {color: #a5bb5b;}
#section_diary, .colDiary {background-color: #c9899c;}
#section_aware, .colAware {background-color: #5293b8;}
#section_control, .colControl {background-color: skyblue;}
#section_forum {background-color: papayawhip;}

#section_plain, .boxLogo {
    background-image: url(../images/bg/bgLogo.jpg);
    background-repeat: no-repeat;
    background-size: 75% auto;
    background-position: center 60% ;
}

.boxLogo {
    padding: 60px 0 9px 0;
    background-image: url(../images/logo_tuvia.png);
    background-position: center;

}

.listView {
    min-height: 80px;
    width: 100vw; /* to show list and detail view beneath*/
}

.listView .chosen {
    xborder: 4px solid yellowgreen!important    ;
    xwidth: calc(100%-8px);   
    background: yellowgreen;    
}

.listView .chosen h2 { color: white}


.lnkContent {cursor: pointer}



#formLogin, #formRegister {
    min-height: 500px; /* make sure we have room for the keyboard */
}


#footermenu {
    position: absolute;
    width: 100vw;
    bottom: 0px;
    display: flex;
    height: 53px;
    background: #eee;
    z-index: 10;
    box-shadow: 0px -1px 1px rgba(0,0,0,.2);
}

/*#footermenu button {
    flex: 1;
    background: #fff;
    font-size: 36px;
    border-radius: 0;
    border:none;
    xxxborder-right: 1px solid rgba(0,0,0,.2);
    margin-right: 1px;
    box-shadow: 1px 0 1px rgba(0,0,0,.4);

    padding-top: 4px;


}


#footermenu button:last-child {
    border-right: none;
    margin-right: none;
}*/




#footermenu>div {
    height: 48px;
    margin: 0;

    text-align: center;
    border: none;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid silver;
    border-bottom: 4px solid silver;
    flex: 18 1 0;
}

#footermenu>div:nth-child(2){border-right: none}
#footermenu>div:nth-child(3){border-right: none; border-left: none}
#footermenu>div:nth-child(4){border-left: none}

#footermenu div.active:nth-child(1) { border-bottom: 4px solid khaki}
#footermenu div.active:nth-child(2) { border-bottom: 4px solid yellowgreen}
#footermenu div.active:nth-child() { border-bottom: 4px solid yellowgreen}
#footermenu div.active:nth-child(4) { border-bottom: 4px solid #5293b8}
#footermenu div.active:nth-child(5) { border-bottom: 4px solid #dea9b8}

#footermenu img {
    height: 36px;
    margin: 8px auto 0 auto;
    opacity: 0.7;
    transform: scale(1);
}

img.pulse {
    animation: pulse 2s infinite;
    opacity: 1!important
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.5);
        margin-top: -12px
    }

    100% {
        transform: scale(1);
    }
}


sup {
   background: #a8113c;
   color: white;
   padding: 1px 6px;
   font-size: 50%
}


#footermenu div.active img {
    height: 55px;
    margin: -12px auto 0 auto;
    opacity: 1
}


#footermenu .control {
    flex: 24 1 0
}

img#btnControl{
    position: absolute;
    height: 65px;
    left: 50%;
    top: -20px;
    margin-left: -40px;
    opacity: 0.7

}

img#btnControl.active{
    opacity: 1
}



.boxContent {
    display: flex;
    width: 100%; 
    margin: 0; 
    background: rgba(255,255,255,.9); 
    border-bottom: 1px dotted silver
}

.boxContent>div {flex: 1 1 0}

    


.boxContent div.img {flex: 0 0 35%}
.boxContent img {width: 100%; height: 100%}

.boxContent h2 {
    width: 100%;
    margin: 0; /* browser reset */
    margin: auto;
    margin-left: 20px; margin-right: 20px}

.check {
    background: url('../images/bg/check.png');
    background-size: 10% auto;
    background-repeat: no-repeat;
    background-position:  98%;
}

.paidContentNote {
    padding-top: 8px;
    font-size: 85%;
    text-align: center;
    opacity: 0.7
}

.paidContentNote a {border: none; padding: 4px 10px}


/* DIARY -------------------------------------------------------------*/
.score {
    font-size: 90%;
    padding: 3px 5px;
    font-weight: bold;
    border-radius: 8px;
    background: #afd5f2;
}

.negative {
    background: #a8113c;
    color: white;
}


.donts .icon-spoon-knife {transform: rotate(180deg)}


#tblDiaryStats td {padding: 0 1px 0 0}

/* vertical bars for stats */
table.stats, #tblDiaryStats td {text-align: center;}
.vb {border-right: 1px solid rgba(160,160,160, .6);
     padding-right: 1px;
     width: 93%;
     margin: auto;
}



.trDos td, .trDonts td{height: 90px; padding: 1px; }
.trDos .vb, tbl {background: forestgreen}
.trDonts .vb {background: crimson}

.trDates td {
    padding: 5px 1px;
    font-size: 10px; color: #777;
    text-align: center
}

#tblDiaryStats i {margin: 0; padding: 0; font-size: 16px; opacity: 0.7}



.tblDiaryList td{    text-align: right;}

.tblDiaryList .trMonth td {
    text-align: left;
    background: #444;
    color: whitesmoke
}

.tblDiaryList .date{   
    font-size: 0.9em;
    color: #777;
    width: 20px;
    text-align: center;
}

/*.tblDiaryList tr:nth-child(odd) .date {background: whitesmoke}
.tblDiaryList tr:nth-child(even) .date {background: white}*/


.tblDiaryList i {margin: 0 2px; opacity: 0.7}

.tblDiaryList .dos i{color: forestgreen}
.tblDiaryList .donts i{color: #a8113c }
.tblDiaryList .donts i.icon-info{color: #777587 }

.icon-zap,  .tblDiaryList .icon-sun2 {opacity: 0.5!important}
.zapSize2 {opacity: 1!important}
.zapSize3 {
    opacity: 1!important;
    color: #a8113c!important
}

/*
#wissen {background-image: url(../images/icons/idea.svg)}
#leben {background-image: url(../images/icons/salad.svg)}
#training {background-image: url(../images/icons/superhero.svg)}
#connect {background-image: url(../images/icons/connection.svg)}*/



/* SLIDES -------------------------------------------------------------*/
.slider {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    height: calc(100vh - 41px - 51px);
    width: 200%;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;

    /*apply a transform to kick in the hardware acceleration.  Without this, the first
    time we add the transform you get odd rendering of the divs (half missing) */
    transform: translate(0, 0);
    z-index: 1
}

.slide {
    flex: 1 1 0;
    width: 100vw;
    padding-bottom: 40px;

    overflow-y: scroll;
    background-attachment: local; /* because slides have overflow:scroll we need that to make the bg scroll as well */
    background: white;

    /*apply a transform to kick in the hardware acceleration.  Without this, the first
    time we add the transform you get odd rendering of the divs (half missing) */
    transform: translate(0, 0);

    color: #555;
} 

#boxForum .slide, #boxForum {background: none}

.bgStatic {background-attachment: scroll} /* scroll makes it static here, because the scroll is in the slide already */


#section_know .slide, .bgKnow {background-image: url(../images/bg/gold3.jpg);}
#section_instant .slide, .bgInstant {background-image: url(../images/bg/pastel1.jpg); }
#section_diary .slide, .bgDiary {background-image: url(../images/bg/water1.jpg);}




/* profile / friends */

.boxFriends {background: #e5e5e5}


#boxProfile h4, .profileVisit h4 {margin: 20px 0 6px 0; padding: 0 15px}
#boxProfile h4.label, .profileVisit h4.label {font-size: 85%; font-weight: normal; color: #999; margin: 8px 0 3px 0; padding: 0}


.boxFriends img, .iconInline {    
    width: 50px;
    float: left;
    vertical-align: bottom;
    margin: 0 20px 0 0
}




/* CHAT */
#boxChat {
    background: url(../images/bg/chat.png);
    box-sizing: border-box;
    height: calc(100% - 53px)   ; /*  - footer */

}

#boxMessages {
    height: calc(100% - 80px - 60px)   ; /*  - footer - inputbox */
    overflow-y: scroll;
    
}

#chatMsg {height: 48px; font-size: 85%}

#boxMessages div {
    padding: 5px 10px;
    margin-bottom: 5px ;
    border-radius: 5px
}

.msgUser {
    text-align: right;
    margin-left: 30px;
    margin-right: 10px;
    background: #cceecc;
}

.msgOther {
    text-align: left;
    margin-right: 30px;
    margin-left: 10px;
    background: white;
    box-shadow: 0 1px rgba(0,0,0,.1);
}

.speech {
	position: relative;
}

.speech:after {
    content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 0.625em solid transparent;
      
	border-bottom: 0;
	margin-top: -0.312em;
}

.speechRight:after {
        border-right: 0;
	border-left-color: #cceecc;
	margin-right: -0.625em;
}


.speechLeft:after {
      border-left: 0;
	border-right-color: white;
	margin-left: -0.625em;
}

.numberIndicator {
    background: crimson;
    color: white;
    text-align: center;
    padding: 2px 6px;
    border-radius: 20px;
    font-size: 80%;
    font-weight: bold
}



#tblBoxFriends td:first-child {padding-left: 15px}
#tblBoxFriends a {font-size: 120%; background: none; font-weight: bold}



.detail {}
.intro {font-weight: bold}


.imgDetail {
    width: 100%;

}

.detail .boxImg {
    position: relative
}

.boxNewbie {
    margin-top: -10px;
}

.boxNewbie img {
    float: left;
    height: 24px;
    margin-right: 10px
}


.boxButtonsLike {
    margin: 0!important;
    text-align: center;
    color: #999;
    height: 53px
}

.boxButtonsLike div:nth-child(2){display: none; flex: 0} /* ajx message*/
.showMessage {display: block!important; flex: 1 1 0!important}



button, .btn {
    padding: 8px 16px;
    font-weight: normal;
    color: rgba(255,255,255,.9);
    background-color: #5293b8; 
    border: none;
    border-radius: 4px;
    outline: none;
    cursor: pointer
}

.btn2 {
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	cursor:pointer;
	color: rgba(50,45,0,.7);
	font-size:110%;
	font-weight:bold;
        margin:20px auto;
	padding:6px 24px;
	text-decoration:none;
        text-align: center;
	text-shadow:0px 1px 0px #ffee66;
        width: 80%;
        max-width: 320px;
        

}

.btn2 i {
    vertical-align: middle;
    font-size: 200%; color: #ffaa22; margin-right: 10px}

.btnPopup {background: none}

.btnSmall {
    padding: 5px 10px; font-size: 90%;
}


.btnChose {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 5px 12px;

    background: rgba(255,255,255,.9);
    border-radius: 6px; 
    color: #2975a6;
    border: 2px solid rgba(150,150,160, .6);
}

.btnChose.active {
    background: white;
    border-color: forestgreen;
    color: forestgreen
}

#btnRateNow {
    display: block;
    background: #6a9e03;
    color: rgba(255,255,255,.9);
}

.lblChosen {
    display: none;
    font-size: 85%;
    padding: 3px 6px;
    margin-top: 30px; /* why the hell does this work?? */
    position: absolute;
    left: 10px;
    background: rgba(255,255,255,.9);
    color: forestgreen;
    border-radius: 6px;
    border: 2px solid forestgreen;   
}

.chosen .lblChosen {display: block}

.slide ul {text-align: left;
           font-size: 90%
}





.closeable {
    padding: 15px;
    font-size: 14px;
    border-radius: 6px;
    text-align: justify;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3f0cf+0,d2e4d4+100 */
    background: #f3f0cf; /* Old browsers */
    xbackground: linear-gradient(to right, #f3f0cf 0%,#b9ddc9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}


.closeable .icon{
    margin: 0 12px 12px 0
}

a.icon-info {border:none!important;}

.closeable .icon-info, .closer {
    font-size: 36px; float: left
}

.closeable .icon-cross {float: right; margin: 0px 0px 30px 30px}

.closer {
    font-size: 16px;
    float: right; margin: -10px -10px 20px 20px
}




/*button.active, button:focus {
    background: white; 
    box-shadow: none;  
    border-right: 1px solid white;
    color: goldenrod;
}*/

table {
    text-align: left; width: 100%; border-collapse: collapse;
    font-size: 14px;
}

textarea {
    box-sizing: border-box;
    background: white;
    width: 100%;
    margin: 0;
}



table tr:nth-child(odd) td {background: rgba(235,240,245,.7)}
table tr:nth-child(even) td {background: rgba(255,255,255,.8)}


hr {border: none;
    height: 1px;
    background: silver
}


th {font-size: 85%; 
    font-weight: bold; 
    text-transform: uppercase;
    background: #eee; 
}

table.green th {background: #5293b8; }
table.red th {background: #a8113c}

table td {padding: 5px}
table th {padding: 5px 7px}

table.clickable { 
    width: 96%;
    margin: 10px auto;
    box-shadow: 0 3px 6px -1px rgba(0,0,0,.4);
    border: 6px solid rgba(255,255,255,.8);
    border-radius: 8px
}

table.clickable tr:last-child td {border-bottom: 1px solid silver; box-shadow: 0 3px 6px -4px rgba(0,0,0,.4);}
table.clickable  td {border-bottom: 1px solid silver;}

table.red tr.checked td {color: #a8113c; text-shadow:0 1px 0 rgba(0,0,0,.4), 0 -1px 0 rgba(255,255,255,.5); font-weight: bold; border-bottom: 1px solid rgba(0,0,0,.2)}
table.black tr.checked td {color: white; background: #111; font-weight: bold; border: 1px solid #111}
table.green tr.checked td, table tr.checked.green td {color: rgba(0,0,0,.8); background: #afd5f2; border-bottom: 1px solid rgba(255,255,255,.4)}

table.clickable td:nth-child(3) {
    color: #aaa!important
}


#boxInfo {
    box-sizing: border-box;
    position: fixed;
    left: 5px;
    width: 83vw;
    padding: 10px;
    background: cornsilk;
    border: 1px solid #999;
    border-radius: 6px;
    font-size: 90%;
    box-shadow: -2px 3px 6px -4px rgba(0,0,0,.4);
}



#section_diary .slide {
    /*background-image: url(../images/bg/paper.jpg);*/
    background-size: cover;
}

#section_diary table {font-size: 18px}

#section_diary h2 {padding: 20px}

table.heading {
    font-size: 3vh!important;
    font-weight: bold;
    text-align: left;
    color: #177fa1;
    margin: 0 0 10px 0;
    line-height: 1
}

.headingComments {
    font-weight: bold;
    border-top: 2px solid rgba(0,0,0,.4);
    border-bottom: none;
    margin-bottom: 0
}

.boxWriteComment {
    margin: 10px 0;
    border: 2px solid yellowgreen
}

.boxWriteComment button {
    background: rgba(0,0,0,.5)
}

.boxComment {
    box-sizing: border-box;
    background: white!important;
    line-height: 1.2em;
    margin-bottom: 8px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 1px -1px rgba(0,0,0,.2);
}

.boxWriteComment {
    background: yellowgreen!important;
}

.wrapperComments {
    font-family: "Tahoma", "Arial Narrow";
    font-size: 95%
}

.boxComment h4 {
    font-size: 110%;
    margin: 0 0 4px 0}

.boxSubComment {
    display: block;
    padding: 5px 0 0 0;
}

.subComment {
    display: block;
    font-size: 0.8em;
    color: #777;
    line-height: 1.25em;
    border-top: 1px solid silver;
    padding-top: 6px;
    margin-top: 6px;

}

.boxComment .btnAddSubComment {
    font-weight: normal;
    background: none;
    display: block;
    padding: 3px 0;
    margin: 0;
    border: none;
}


.boxHearts {
    max-width: 80px;
    float: right;
    text-align: center;
    margin: -8px -12px 10px 10px
}

#boxForumList .boxHearts {margin: 0}

.boxHearts>div {
    height: 40px;
    vertical-align:  middle;
    text-align: center;
    margin: 0!important;
}

.numHearts {
    font-family: "Arial";
    font-size: 16px;
    line-height: 23px;
    padding: 0 5px
}


.icon-heart2 {
    display: block;font-size: 22px;
    color: crimson
}


/* forum divs */
.formLine input {box-sizing: border-box; width: 100%}
label {display: block; font-size: 85%; color: #888; margin: 10px 0 4px 0}
.page {}

#naviForum {padding: 15px}

#naviForum a {margin: 0}

.boxForumSub {
    border-top: 1px dotted silver;
    padding: 4px 5px 0 5px;
    margin: 4px -2% -8px -2%;

}

.boxForumSub div {  color: #666; margin: 0!important;}

.boxPost {height: 2.4em; overflow: hidden}
#boxForumPost .boxPost {height: auto; overflow: auto}

a.plain, a.post, a.btnForumCat {border: none; padding: 0; margin: 0; background: none;}
 a.plain{font-weight: normal}
a.inline {display: inline!important}

a.btnForumCat{width: 30%; border-right: 1px dotted silver}
.boxForumName {padding-left: 8px; text-align: right}
.boxForumLevel {text-align: right}

#btnForumAnswer {text-align: center; margin: 20px}


/* common divs */

#popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.8);
    padding: 5%;
    z-index: 9
}



.inner {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 61px); /* - headerbox */
    padding-bottom: 30px;
    overflow: scroll;
    background-color: rgba(255,255,255,.6)
}




#popup, .popup {
    position: absolute;
    box-sizing: border-box;
    background: rgba(255,255,255,.1); 
    border-radius: 10px;
    padding: 8px;
    width: 90%;
    max-height: 84%;
    overflow-y: scroll;
    left: 5%;
    top: 3%;
    box-shadow: 0 2px 4px 2px rgba(0,0,0,.3);
    backdrop-filter: blur(10px);
    z-index: 9
}

#popup2 .inner {   
    min-height: 15vh; border-radius: 7px; border: 1px solid #f5f5f5;
    background: rgba(255,255,255,.95);
}


.popup {  font-size: 90%;}

.popup a, .popup button {
    display: block;
    width: 80%;
    margin: 10px auto;
    text-align: center
}

.popup button {font-size: 125%}

.btnClosePopup15 {background: none; font-size: 90%!important; color: steelblue}

.popup h2 {
    margin: 0;
    line-height: 38px;
} 

.popup h2 img {
    float: left; 
    margin-right: 10px;
    height: 32px;
}


#tutorial {
    position: absolute; 
    box-sizing: border-box;
    width: 100%;
    left: 0;
    text-align: center;
    /*    border: 5px solid transparent;
        border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
        border-image-slice: 1;*/
    z-index: 9;
}

#tutorial h3 {border: none; padding: 0; margin: 0 0 6px 0}


#tutorial .innerRb{
    padding: 20px;
    background: white;
    /*    border: 3px solid transparent;
        border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
        border-image-slice: 1;*/
    border: 8px solid transparent;
    border-image: linear-gradient(to bottom right, #d5bad9 0%,  #a2b9e2 25%, #96d9f8 50%, #b7e1c0 75%, #f4f1d1 100%);
    border-image-slice: 1;

    box-shadow: 1px 1px 3px rgba(0,0,0,.2),1px 10px 20px rgba(0,0,0,.7) ;
}

.brdrBlue {
    border: 3px solid #2d91fa;
}


#boxStars {
    display: block;
    clear: both;
    text-align: center;
    padding: 15px 0
}

#boxStars img {
    width: 15%;
    margin: 1%;

}


.boxLevel {
    display: inline-block;
    padding: 2px 6px; 
    font-size: 80%;
    background: gold;
    color: rgba(200,100,50, 0.8);
    margin: 0px auto;
    border-radius: 4px
}


/* main box in control center*/
.box1, .box2 {
    box-sizing: border-box;
    width: 95%;
    padding: 5%;
    margin: 12px auto;
    border-radius: 3px;
    background: rgba(220,220,220,.5);
    backdrop-filter: blur(10px);
}

.box1 h4, .box2 h4 {margin: 0 0 .5em 0}


.task {
    box-sizing: border-box;
    background: white;
    box-shadow: 0px 1px 0 rgba(0,0,0,.1);
    padding: 10px 25px 10px 0px;
    width: 90%;
    margin: 20px auto;
    border-radius: 6px;

}

.task div:first-child {
    flex: 0 0 30%;
    text-align: center
}

.tblTasks img {
    width: 48px;
    padding: 8px
}

.tblTasksDone {
    opacity: 0.7;
    zoom: 0.8
}

.tblTasksDone img {
    width: 36px;
    opacity: 0.7

}

.tblTasks .icon {
    font-size: 36px;
    padding-left: 8px
}

.tblTasks a {
    border: none; padding: 0; margin: 0;
    background: none;
}

.icon-checkmark {color: #6a9e03}

.box2 {
    width: auto;
    background: rgba(255,255,255,.7);
    border: none;
}

.bgDarker {margin: 0 20px 0 0!important; padding: 20px; background: rgba(0,0,0,.5);
           border-top-left-radius: 6px; border-bottom-left-radius: 6px
}


.border {  border: 3px solid rgba(112,122,122,.5);}
.borderOrange {border: 2px solid orange!important}


.icoForm label {
    color:  #005c75; 
    background-color: silver;
    border: 1px solid silver;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    float: left; 
    margin: 0;
    height: 28px;
    width: 28px;
    font-size: 25px;
    line-height: 30px;
    padding: 4px 4px 4px 7px;
    text-align: center;


}

.icoForm label:before {text-align: center}
.icoForm .icon-lock {padding: 4px 0px 4px 11px}

.icoForm input {
    font-size: 24px;
    padding: 2px 6px;
    height: 32px;
    max-width: calc(100% - 60px);
    margin-bottom: 15px;
    border: 1px solid silver;
    border-left: none;

}

.icoForm button {font-size: 18px }



#tools {
    width: 95%;
    margin: 12px auto ;
}

#tools>div {
    background: rgba(255,255,255,.9);
    padding: 10px;
    border-radius: 8px;
    margin:0 5px 0 0;
    text-align: center;
    font-size: 80%;
    color: rgba(0,0,0,.6);
    border: 3px solid rgba(112,122,122,.5);
}


#tools>div:last-child {margin-right:0}


.inpComment {
    height: 26px;
    transition: height 0.5s ease;
}

.inpComment:active, .inpComment:focus {
    height: 260px
}


/* common styles */
.flexRow {
    display: flex;
    flex-wrap: nowrap
}


#section_control .boxBorder {
    border-bottom: 1px solid rgba(0,0,0, .3);
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 -1px 2px rgba(0,0,0,.2)
}

#section_control h3 {
    font-size: 1.3em;
    border-top: 1px solid rgba(255,255,255, .8);
    border-bottom: 1px solid rgba(0,0,0, .3);
    background: #5293b8;
    color: white;
    margin: 0;

}


#section_control th {background: #226388; font-size: 12px  }


#tblPoints img {width: 25px}


#tblPoints td:nth-child(1) {text-align: center}
#tblPoints td:nth-child(3) {text-align: right; padding-right: 13px; font-size: 110%; font-weight: bold}

#tblLevel th:nth-child(2) {text-align: left}
#tblLevel td:nth-child(3) {text-align: right;  }
#tblLevel td:nth-child(4){text-align: center}

#tblLevel tr.active td {
    font-weight: bold;
    font-size: 120%;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    background: orange
}


.flex1 {flex: 1!important} /**/
.flexRow .flex4 {flex: 4!important}

.flexRow>div img {max-width: 100%}


.bar {
    width: 90%;
    height: 24px;
    margin: 10px auto 10px 0;
    border-radius: 6px;
    border: 3px solid rgba(160,120,80, .6);
}

.bar>div {
    width: 0;
    height: 24px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background:yellowgreen;
}

.barfill_grow {background: khaki}



.literature ul {list-style-type: none; margin: 10px 0; padding: 0}


.ctaLogin {text-align: center}

.rainbow {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;


    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}




audio {
    margin: 3px auto;
    height: 38px;

}

audio.guided {
    filter: sepia(50%) saturate(70%) grayscale(0.2) contrast(80%) invert(80%);
    width: 200px;
    height: 50px;
    width: 90%; max-width: 90%; margin: 20px 5%}


.error {border: 1px solid crimson; color: crimson}

.flexRow>div {
    flex: 1 1 0;
    margin: 12px auto;
}

.flexEven {flex: 1 1 0}
.flexEven img {max-width: 80%; margin: 5px auto; }

.listHooks {list-style-type: none; text-align: left}
.listHooks i{ font-size: 24px; color: #b0d400; font-weight: bold}
                  
.white {color: rgba(255,255,255,.9)}

.hidden {display: none!important}
.tiny {font-size: 60%}
.small {font-family: Tahoma, Arial Narrow, sans-serif ;font-size: 85%; margin: 2px 0;   color: rgba(0,0,0,.5);}
.disabled {color: rgba(0,0,0,.5)!important}
.big {font-size: 120%}
.huge {font-size: 160%}
.pad {padding: 15px}
.vcenter {display: flex; justify-content: center}
.right {text-align: right}
.center {text-align: center}
a.center {display: block; max-width: 75%; margin: auto}
.block {display: block}
.vertical {
    -webkit-transform: rotate(270deg);	
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

.noBorder {border: none!important}


.alert {
    color: crimson;
    font-weight: bold
}
.success {
    color: forestgreen;
    border: 1px solid forestgreen;
    border-radius: 6px
}



textarea, input, select {
    font-size: 16px;
    border: 1px solid #999
}

.arrow-up {
    width: 0; 
    height: 0; 
    border-bottom: 25px solid #333;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    margin: 0 0 0 45%

}

.arrow-down {
    width: 0; 
    height: 0; 
    border-top: 25px solid #333;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    margin: 0 0 0 45%
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue; 
}