/* html, body {
 		position:absolute;
        min-height:100vh;
        min-height: -webkit-fill-available;
        width: 100%;
        padding: 0px; 
        margin: 0px;    
        overflow: hidden;    
        font-family:Jost;
		touch-action: manipulation;
        }

html{
	height: -webkit-fill-available;
}*/


	html,body, #wrapper{
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  padding: 0px; 
      margin: 0px;    
		  
		  touch-action: none;
      overflow:hidden;
  		-webkit-overflow-scrolling: touch;
  		font-family:Jost;
	}



	#menu{
		width:100vw;
		height:10vh;
		background-color:rgba(255,255,255,0.7);
		z-index: 100;

		display:flex;
		justify-content:space-around;	
		align-items:center;
	}

	#menu .menu-item{
		display:flex;
		flex-direction:column;
		gap:0.3rem;
		align-items:center;

		padding-inline:2rem;		
		padding-block:0.1rem;
		border-radius:1rem;
	}

	#menu .menu-item:hover{
		background-color:rgba(0, 99, 132, 0.3);
				
	}

	#menu .menu-item.active{
		background-color:rgba(0, 99, 132, 0.3);
    pointer-events : none;
	}



	#container{
		display:block;
        height:90vh;
        z-index: 100;
        overflow: hidden;
        }


 	#pages{
 		display: flex;
		width: 200vw;
		height:100%;
		box-sizing: border-box;
 	}

 	#pages > *{
 		width:100vw;
 	}

/******* MOOD LIST VIEW *******/
        #moodsListView{
          height:100%;
          position:relative;
          background: linear-gradient(to bottom, #a8e6cf, #dcedc1, #ffd3b6, #ffaaa5, #ff8b94);
        }

        .results{
          background: linear-gradient(to bottom, #a8e6cf, #dcedc1, #ffd3b6, #ffaaa5, #ff8b94);
        }   

        .mood{  
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          display: flex;
          flex-direction:column;  
          align-items:center;
          gap:0.5rem;
        }

        .mood.confirmed{
          mix-blend-mode:overlay;
        }

        .mood_pointer{
          height: 18px;
          width: 18px;
          background-color: #000;
          border-radius: 50%;
          display: inline-block;
        }

        .mood_name{          
          font-size:24px;
          font-weight:400;
        }

        .mood.confirmed .mood_pointer{
          visibility:none;
          transition: opacity 0.3s ease-out;
          opacity: 0;
        }

        .mood.confirmed .mood_name{          
          transition: transform 0.3s ease-out;
          transform: translate(0,1rem)
        }

        .confirm_prompt{          
          display:flex;
          
          border-radius:50px; 
          background: rgba(255, 255, 255, 0.6);
          backdrop-filter: blur(2px);
          gap:0.2rem;
          justify-content: space-around;

          padding-inline:0.5rem;
          padding-block:0.2rem;

          /*margin-top:1rem;        */

          transition: opacity 0.3s ease-out, transform 0.3s ease-out;
          opacity:0;
          transform: translate(50px);
          
        }

        .confirm_prompt.active{                             
          transition: opacity 0.3s ease-out, transform 0.3s ease-out;
          opacity:100;
          transform: translate(0px);
        }

        .confirm_separator{
          height:1rem;
          border: 0.4px solid rgba(255, 255, 255, 0.5);        
        }

        .confirm_negative, .confirm_positive {
          display:flex;
          justify-content:center;          
          width:2rem;
        }

        .confirm_negative, .confirm_positive > * {
          font-size:larger;
        }


        .mood_scale_information{
          height:100%;
          width:100%;
          display:flex;
               
          justify-content:space-between;                              
        }
        
        .mood_scale_information > *{
          display:flex;
          flex-direction:column;
          justify-content:space-between;          
          width:33%;
        }

        .mood_scale_information .left{
          align-self:center;
          align-items:left;
        }


        .mood_scale_information .middle{
          align-items:center;
        }

        .mood_scale_information .middle *{
          white-space:nowrap;
        }

        .mood_scale_information .right{
          align-self:center;
          align-items:right;
        }

        .mood_scale_information .right *{
          text-align:right;
        }

        .scale_info{
          padding:1rem;
          font-size:24px;          
          mix-blend-mode:overlay;
        }

/******* RESULTS VIEW *******/



.results{	
    display: flex;    
    flex-direction: column;
    height:100%;
    overflow:scroll;
    align-items:center;
}

.plot{  
  max-height:50%!important;   
}

.overallRating{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.overallRating .scale{
	display:flex;
}

.scale .radioWithLabel{
	display:flex;
	flex-direction:column;
	align-items:center;
}


.scale .radioWithLabel input[type="radio"] {
  width: 1.3rem;
  height: 1rem;
  mix-blend-mode: color-burn;
}

.results .context{
	display:flex;
	flex-direction:column;	
	gap:1rem;
  align-items:center;
}

@media screen and (min-width: 1150px) {
    .results .context{
        max-width: 40vw;
    }
}

.tag{
  display:flex;
  gap:0.4rem;
	border-radius:1rem; 
	background-color:rgba(255,255,255 ,0.4);
	padding-inline:0.5rem;
	margin-inline:0.1rem;
}

.tag.active{
  background-color:rgba(255,255,255 ,0.9);
}

#tagContext{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-inline:1rem;
}

.tagList{
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem;  
}


#paragraph{
    align-self:stretch;
    height: 20vh;
    background: rgba(255,255,255,0.4);
    margin-inline:1rem;
    border-radius: 1rem;
    padding:0.6rem;
    outline: 0px solid transparent;
    overflow:scroll;
}

#paragraph::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/***********************************************/

#monitor{
	width:100vw;
	height:100%;

  background-color:papayawhip;
  display: flex;    
  flex-direction: column;  
  overflow-y:scroll;
  overflow-x:hidden;
  align-items:center;
  gap:0.5rem;
  
}

.page_menu{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;    
  justify-content: center;
}

.page_menu .active{
  text-decoration:underline;
  font-weight:bold;
}

#overallRatingChart{  
  max-height:50%!important;     
}


@media screen and (min-width: 1150px) {
    #overallRatingChart{
      max-width:50%!important;
    }
}

.tagResult{
  display:grid;
  grid-template-columns : 1fr 1fr;   
  justify-items: center;
  margin-bottom:0.2rem;  
}

.tagResult.two-col{
  grid-template-columns : 1fr 1fr 1fr;   
}

.tagResult .score{
  margin-inline:0.2rem;
  color : rgba(0, 99, 132, 1)
}

.tagResult .computed{
  margin-inline:0.2rem;
  color : rgba(255, 99, 132, 1);
}

/***********************************************/
#profileBTN{
  position:absolute;
  top:1rem;
  right:1rem;
  width:3rem;
  aspect-ratio:1;
  border-radius:3rem;
  background-color:blue;
}

.user-sign-in #profileBTN{
  background-color:teal;
}

#profilePopUpOverlay{
  height:100vh;
  width:100vw;
  background-color:rgba(0,0,0,0.7);
  position:absolute;
  top:0;
  left:0;

  display:flex;
  align-items:center;
  justify-content:center;
}

#profilePopUp{
  display:flex;
  flex-direction:column;
  background-color:rgba(250,250,250,0.7);
  border-radius:20px;
  padding:4rem;
}

#profilePopUp > .closeBTN{
    position: relative;
    top: -3rem;
    left: -3rem;
}

/***********************************************/
  #year{
    display:flex;
    flex-direction:column;
    align-items:center;

    background-color:papayawhip;
    height:100%;

    padding-top:1rem;
  }

  .yearGrid {
    display: grid;
    max-height: 372px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(31, 1fr);
    
  }

  .monthContainer{
    display: grid;
    grid-template-columns: repeat(12, 1fr);    
    text-align:center;
  }

  .monthContainer div{
    width:14px;
    height:22px;    
  }


  .yearGridCell {
      
      text-align: center;
      width: 14px;
      height: 14px;
      box-shadow:inset 0px 0px 0px 1px lightgrey;   
  }

  .yearGridCell.today{
    box-shadow:inset 0px 0px 0px 2px lightblue;    
  }

  .yearGridCell.before_today{
    background-color: WhiteSmoke;      
  }

  .yearGridCell.month{
    display:flex;
    justify-content:center;
    align-items:center;
  }


  .yearGridCell[data-average="9"]{
    background-color: #57bb8a ;
  }
  .yearGridCell[data-average~="8"]{
background-color:#73b87e ;
  }
  .yearGridCell[data-average~="7"]{
background-color:#94bd77 ;
  }
  .yearGridCell[data-average~="6"]{
background-color:#b0be6e ;
  }
  .yearGridCell[data-average~="5"]{
background-color:#d4c86a ;
  }
  .yearGridCell[data-average~="4"]{
background-color:#f5ce62 ;
  }
  .yearGridCell[data-average~="3"]{
background-color:#e9b861 ;
  }
  .yearGridCell[data-average~="2"]{
background-color:#ecac67 ;
  }
  .yearGridCell[data-average~="1"]{
background-color: #e79a69; 
  }
  .yearGridCell[data-average~="0"]{
background-color:#e2886c;
}






  .yearGrid div .tooltiptext{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;

    display:flex;
    justify-content:center;
    align-items:center;
  }

  .yearGrid div:hover .tooltiptext {
    visibility: visible;
  }

/***********************************************/
.mainCTA{
	border-radius:2rem;        
    padding-inline: 1rem;
    margin-block: 0.3rem;
    background-color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    align-self:center;
}


.not_loaded{
  visibility:hidden;
}

.ui_not_selectable{
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

/***********************************************/

/* Define the animation in CSS */
@keyframes slide-in-right {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Apply the animation to the element using the animation property */
.slide-in-right {
  animation: slide-in-right 0.5s ease-in-out;
}



/* Define the animation in CSS */
@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Apply the animation to the element using the animation property */
.slide-in-left {
  animation: slide-in-left 0.5s ease-in-out;
}