/* Style */

html {max-width: 100%; overflow-x: hidden;}
body {max-width: 100%; overflow-x: hidden; padding:8px; padding-top:0px; background-color:white; font-family:verdana;}
h1 {color:#4687F4; font-family:verdana; font-size:x-large; margin-top:8px;}
p {color:#000000; font-family:verdana;}

/* td.text-red {text-align: center; vertical-align: middle; padding: 10px; background-color: rgba(219, 76, 60, .90); border-radius: 5px;} */
td.text-red {text-align: center; vertical-align: middle; padding: 10px; background-color: #FFFFFF; border-radius: 5px; border-color: #DC493C; border-style: solid; border-width: 2px;}
/* td.text-green {text-align: center; vertical-align: middle; padding: 10px; background-color: rgba(17, 159, 91, .90); border-radius: 5px;} */
td.text-green {text-align: center; vertical-align: middle; padding: 10px; background-color: #FFFFFF; border-radius: 5px; border-color: #119F5B; border-style: solid; border-width: 2px;}
td.text-white-green {text-align: center; vertical-align: middle; padding: 10px; background-color: #FFFFFF; border-radius: 5px; border-color: #119F5B; border-style: solid; border-width: 2px;}
td.text-blue {text-align: center; vertical-align: middle; padding: 10px; background-color: rgba(70, 134, 226, .90); border-radius: 5px; border-width: 2px;}
td.text-white-blue {text-align: center; vertical-align: middle; padding: 10px; background-color: #FFFFFF; border-radius: 5px; border-color: #4687F4; border-style: solid; border-width: 2px;}
td.text-white-grey {text-align: center; vertical-align: middle; padding: 10px; background-color: #FFFFFF; border-radius: 5px; border-color: #CCCCCC; border-style: solid; border-width: 2px;}
td.text-grey {text-align: center; vertical-align: middle; padding: 10px; background-color: #FFFFFF; border-radius: 5px; border-color: #888888; border-style: solid; border-width: 2px;}
td.text-yellow {text-align: center; vertical-align: middle; padding: 10px; background-color: rgba(252, 210, 9, .90); border-radius: 5px;  border-width: 2px;}
td.text-light-green {text-align: center; vertical-align: middle; padding: 10px; background-color: #B8E3B6; border-style: solid; border-color: rgba(17, 159, 91, .90); border-radius: 5px; border-width: 2px;}
td.text-light-red {text-align: center; vertical-align: middle; padding: 10px; background-color: #F4C8C4; border-style: solid; border-color: rgba(220, 73, 60, .90); border-radius: 5px; border-width: 2px;}

div.text-light-green-white {text-align: center; vertical-align: middle; padding: 10px; background-color: #FFFFFF; border-radius: 5px; border-color: #B8E3B6; border-style: solid; border-width: 2px;}

td.back {text-align: center; vertical-align: middle; background-image: url(back.png); background-repeat: no-repeat; background-position: center left; border-radius: 5px;}
td.line {text-align: center; vertical-align: middle; background-image: url(line.png); background-repeat: no-repeat; background-position: center left;}
td.arrow {width:40px; text-align: center; vertical-align: middle; background-image: url(arrow.png); background-repeat: no-repeat; background-position: center left;}
td.next {text-align: center; vertical-align: middle; background-image: url(next.png); background-repeat: no-repeat; background-position: center bottom;}
td.none {text-align: center; vertical-align: middle; background-position: center bottom;}

td.text-task {padding:5px; text-align:left;}
td.text-task-light-yellow{background-color:#FEED9D;}

.position-relative {position:relative;}

div {color:#000000; font-family:verdana;}

div.header {color:#000000; font-family:verdana; font-size:large; margin-top:5px;}

div.link {display: block;}

div.text-small {font-size:small; text-align: left;}

div.text-information {color: #888888; font-family: verdana; font-weight: bold; text-align: left;}

div.text-splash {color: #4687F4; font-family: verdana; font-size:large; font-weight: bold; text-align: center;}


div.text-box-blue {font-size:small; text-align: center; position:relative; vertical-align: middle; padding: 2px; background-color: #FFFFFF; border-radius: 5px; border-color: #4687F4; border-style: solid; border-width: 1px; margin-bottom: -20px;}
div.text-box-light-green {font-size:small; text-align: center; position:relative; vertical-align: middle; padding: 2px; background-color: #B8E3B6; border-radius: 5px; border-color: #4687F4; border-style: solid; border-width: 1px; margin-bottom: -20px;}
div.text-box-light-gray {font-size:small; text-align: center; position:relative; vertical-align: middle; padding: 2px; background-color: #CCCCCC; border-radius: 5px; border-color: #4687F4; border-style: solid; border-width: 1px; margin-bottom: -20px;}
div.text-box-small {font-size:small; text-align: center; padding: 4px;}

div.deadline-holder {font-size:small; text-align: center; position:absolute; vertical-align: middle; padding: 2px; background-color: #FFFFFF; border-radius: 5px; border-color: #4687F4; border-style: solid; border-width: 1px; width:120px; right: 10px; bottom: -10px;}
div.task-deadline-holder {font-size:small; text-align: center; position:absolute; vertical-align: middle; padding: 2px; background-color: #FFFFFF; border-radius: 5px; border-color: #4687F4; border-style: solid; border-width: 1px; width:120px; right: 10px; top: 20px;}

input.deadline-holder {font-size:small; text-align: center; position:absolute; z-index:10; vertical-align: middle; padding: 2px; background-color: #FFFFFF; border-radius: 5px; border-color: #4687F4; border-style: solid; border-width: 1px; width:182px; right: 12px; bottom: -10px;}
input.task-deadline-holder {font-size:small; text-align: center; position:absolute; vertical-align: middle; padding: 2px; background-color: #FFFFFF; border-radius: 5px; border-color: #4687F4; border-style: solid; border-width: 1px; width:120px; right: 10px; top: 20px;}


#task-title {
	width:calc(100% - 120px - 10px); /* Full width minus the width of the task-deadline-holder */
}

.button-plain {color:rgba(0, 0, 0, .55); font-size:large; text-align:center; vertical-align: middle; background-color: rgba(255, 255, 255, 255); border: solid rgba(80, 80, 80, .80) 1px; border-radius: 5px; background-position:center center; background-repeat:no-repeat;}
.button-blue {color:rgba(0, 0, 0, .55); font-size:large; text-align:center; vertical-align: middle; padding: 10px; background-color: rgba(70, 134, 226, .90); border: solid rgba(80, 80, 80, .80) 1px; border-radius: 5px; min-height:60px; min-width:70px; background-position:center center; background-repeat:no-repeat;}
.button-green {color:rgba(0, 0, 0, .55); font-size:large; text-align:center; vertical-align: middle; padding: 10px; background-color: rgba(17, 159, 91, .90); border: solid rgba(80, 80, 80, .80) 1px; border-radius: 5px; min-height:60px; min-width:70px; background-position:center center; background-repeat:no-repeat;}
.button-grey {color:rgba(0, 0, 0, .55); font-size:large; text-align:center; vertical-align: middle; padding: 10px; background-color: rgb(204, 204, 204), .90; border: solid rgba(80, 80, 80, .80) 1px; border-radius: 5px; min-height:60px; min-width:70px; background-position:center center; background-repeat:no-repeat;}
.button-make-red {background-color: rgba(219, 76, 60, .90);}
.button-make-green {background-color: rgba(17, 159, 91, .90);}
.button-make-white {background-color: rgba(255, 255, 255, .90);}
.button-make-green-border {border: solid rgba(17, 159, 91, .90) 2px;}
.button-make-blue-border {border: solid rgba(70, 134, 226, .90) 2px;}
.button-make-full {width:100%;}

button:focus {
  outline: none;
}

.button-margin { margin-left: 0px; margin-right: 4px;}

.action-button-holder { position:fixed; float:right; width:60px; right:10px; bottom:10px; padding:7px; z-index:10;}
.button-action {font-family: verdana; font-size:large; color:rgba(0, 0, 0, .55); background-color: rgba(70, 134, 226, .0); padding:0px; height: 56px; width: 56px; border-radius: 56px; border-width:0px; border-color:#FFFFFF; outline:none; -webkit-filter: drop-shadow(2px 5px 2px rgba(0,0,0,0.5));}


a.hide-link:link {text-decoration: none; color: #000000;}
a.hide-link:visited {text-decoration: none; color: #000000;}
a.hide-link:hover {text-decoration: bold; color: #000000;}
a.hide-link:active {text-decoration: bold; color: #000000;}

div.link-text {color:blue; text-decoration:underline;}

#streak-holder {
  position:relative;
  top:-26px;
  float:right; right:125px; /* 98px; */
  text-align:center;
  z-index: 20;
}

#streak-text {
  position:absolute;
  text-align: center;
  width:122px; /* 95px; */
  background-color: #B8E3B6; /* light green, #FCD209; yellow for warning*/
  border-color: #B5CFFB;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  padding: 0px;
  font-size:small;
}

#goal-current-task {
  padding:2px;
  padding-top:8px;
  padding-bottom:8px;
  margin-bottom:0px;
}

.blur {
  filter: blur(4px);
  -webkit-filter: blur(4px);
}

.spacer { background: transparent;}

.done-image-holder {
  display: inline-block;
  position:absolute;
  background-color: rgba(255, 255, 255, .0); /* #FFFFFF; */
  background-image:url(yes-small.png);
  text-align:center;
  border-color: rgba(255, 255, 255, .0); /* #FFFFFF; */
  border-style: solid;
  /* border-width: 2px; */
  padding:0px;
  margin-bottom: 0px; /* 10px; */
  margin-top: 0px;
  /* left: 50%;
  transform: translate(-50%, 0); */
  width: 40px;
  height:40px;
  top: -50px;
  right: 2px;
}

.goal-image-holder {
  display: inline-block;
  position:relative;
  background-color: rgba(255, 255, 255, .0); /* #FFFFFF; */
  float:center;
  text-align:center;
  border-color: #FFFFFF; /* #B8E3B6; */
  border-style: solid;
  /* border-width: 2px; */
  border-radius: 5px;
  padding:2px;
  margin-bottom: 0px; /* 10px; */
  margin-top: 0px;
  /* left: 50%;
  transform: translate(-50%, 0); */
  width: 80%;
}

.goal-image {
  max-width:100%;
  max-height:280px;
  vertical-align:middle;
  border-style: solid;
  border-color: #FFFFFF;
  border-radius: 5px;
}

.info-button-holder {
  background-color: rgba(255, 255, 255, .0); /* #FFFFFF; */
  position:relative;
  bottom:0px;
  right: 0px;
  float:right;
  text-align:center;
  border-color: rgba(255, 255, 255, .0); /* #FFFFFF; */
  border-style: solid;
  /* border-width: 2px; */
  border-radius: 5px;
  padding:2px;
  margin-bottom: 1px; /* 10px; */
  margin-left: 8px;
  margin-right: -7px;
  z-index: 1;
}

.full-description {
  position:relative;
  float: bottom;
  margin-bottom: 10px;
  padding-top: 10px;
  text-align: left;
  margin-top: 60px;
  border-top: solid rgba(70, 134, 226, .90) 1px;
}

.full-description-predefined {
  position:relative;
  margin-bottom: 0px;
  padding-top: 0px;
  text-align: left;
  margin-top: 0px;
  border-top: solid rgba(70, 134, 226, .90) 1px;
}

#drag-image-holder {
	float:right;
	position:absolute;
	top:-4px;
	right:4px;
}

#progress-bar-timer {
  background-color: rgba(77, 184, 73, .80);
  border-radius: 2px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progress-bar-timer > div {
   background-color: rgba(219, 76, 60, .80);
   width: 40%; /* Adjust with Java Script */
   height: 20px;
   border-radius: 2px;
   text-align: center;
}

#progress-bar-status {
  background-color: #FFFFFF;
  border-color: #B5CFFB;
  border-style: solid;
  border-width: 1px;
  border-radius: 2px; /* (height of inner div) / 2 + padding */
  padding: 1px;
}

#progress-bar-status > div {
   background-color: #B5CFFB;
   width: 40%; /* Adjust with Java Script */
   height: 13px; /* 10px */
   border-radius: 2px;
   text-align: center;
}

#progress-text {
  text-align: center;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  font-size: small; /* x-small */
  color: #000000;
  
  /* background-color: rgba(255, 255, 255, .5); */

  /*
  text-shadow:
    -.5px -.5px 0 #FFFFFF,
    .5px -.5px 0 #FFFFFF,
    -.5px .5px 0 #FFFFFF,
    .5px .5px 0 #FFFFFF;
	*/
}

#progress-status {
  text-align: center;
  padding: 0px;
  margin-right: 1px; /* 122px 94px; */
}

#progress-text-holder  {
  position: absolute;
  display: inline-block;

  /* center */
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;

  padding-top: 2px;
  
}

.max-size {
	max-width:100%;
	max-height:100%;
}

/* Fade in */

.fade-in {

    -webkit-animation: 4s show;
    -moz-animation: 4s show;
    -ms-animation: 4s show;
    animation: 4s show;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

}

.fade-in-fast {

    -webkit-animation: 1s show;
    -moz-animation: 1s show;
    -ms-animation: 1s show;
    animation: 1s show;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

}

@-webkit-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-moz-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-ms-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}

.fade {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1000ms, visibility 1000ms;
  transition: opacity 1000ms, visibility 1000ms;
}

/* For Speech Bubbles
<div class="bubble speech">Hello world.</div>
*/

.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #4687F4;
    box-shadow: 0 0 6px #4687F4;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}

.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform: rotate( 29deg ) skew( -35deg );
    width: 20px;
}

.speech {
    /* float: left; */
	margin: 5px 5px 5px 20px;
}

.speech::before {
    box-shadow: -2px 2px 2px 0 rgba(70, 135, 244, 0.4);
	border-style: solid;
	border-width: 0 0 1px 1px;
	border-color: #4687F4;
    left: -11px;
}

div.right {
	text-align: right;
}

.quote-image {
	background-color: #FFFFFF;
	/* background-image: url(road.jpg); */
	background-repeat: no-repeat;
	background-size: cover; /* 100% 100%; */
	background-position: center center;
	background-color: rgba(0, 0, 0, .4); /* Tint color */
	background-blend-mode: multiply; /* soft-light; */
	color: #FFFFFF;
    border-style: solid;
	border-width: 1px;
	border-color: #888888; /* #4687F4; */
    display: inline-block;
    padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
    position: relative;
    vertical-align: center;
	text-align: left;
}

.quote {
	width: auto;
	background-color: rgba(255, 255, 255, .0);
    border-style: none;
	border-width: 1px;
	border-color: #888888; /* #4687F4; */
    padding: 0px;
	margin-top: 14px;
	margin-bottom: 4px;
    vertical-align: center;
	text-align: center;
}

div.right-quote {
	font-size: small;
	text-align: center;
	padding-top: 5px;
	padding-right: 4px;
}

img.milestone-image {
  max-width:92%;
  max-height:280px;

}

#splashscreen {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    background-color:white;
	z-index: 20;
	text-align:center;
}

.starRating:not(old){
  display        : inline-block;
  width          : 13.5em;
  height         : 2.5em;
  overflow       : hidden;
  vertical-align : bottom;
}

.starRating:not(old) > input{
  margin-right : -100%;
  opacity      : 0;
}

.starRating:not(old) > label{
  display         : block;
  float           : right;
  position        : relative;
  background      : url('star-off.svg');
  background-size : contain;
}

.starRating:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 2.5em;
  height          : 2.5em;
  background      : url('star-on.svg');
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
  opacity : 1;
}