*{
	/*border:0.25px dashed #ccc;*/
	box-sizing: border-box;
	body, html{
		border:none;
		margin: 0;
		padding: 0px;

		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-style: lighter;

	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items:flex-start;
	}
}
h3{
	display:flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	width: 100%;
	height: fit-content;
	padding: 5px 10px;
	margin-bottom:-10px;
	/*text-transform: uppercase;*/
	color:#333;
	font-size: 1rem;
	font-family: "Momo Trust Display", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.goals_h3{
    display:block;
    text-align:left;
}
h3 span{
	display:flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
}
h3 span .notice{
	display: block;
	position: absolute;
	top: -2px;
	left: calc(100% + 10px);
	background: #ccc;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: lighter;
}
.app_wrapper{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width:100%;
    max-width: 500px;
	height: 100vh;
	border-radius: 20px;
	margin:0 auto;
	overflow: hidden;
	gap: 30px;
	padding: 0px 0px;
	position: relative;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
}
.date_line{
    display: grid;
    grid-template-columns: repeat(7, auto);
    padding: 0px 10px;
    width: 100%;
}
.card_wrapper{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    flex-shrink: 0;
    column-gap: 10px;
    padding: 0px 20px 5px 20px;
    margin: 0 auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.form_section{
	display:flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 5px 10px;
	margin: auto;
	flex-wrap: wrap;
	span, fieldset{
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		flex-wrap: wrap;
	}
}
.profile_pic{
    display: flex;
    pointer-events: none;
    aspect-ratio: 1 / 1;
    max-height: 40px;
    max-width: 40px;
    border: none;
    border-radius: 50%;
    margin: 0 auto;
}
#p_word {
	position: relative;
}

#p_word::after {
	content: "Show";
	display: block;
	color: #666;
	position: absolute;
	right: 10px;
	height: 100%;
	width: 20px;
	background: #6c8b15;
	z-index: 5;
}

#p_word:hover::after {
	display: block;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #6c8b15;
}

label {
	padding-left: 5px;
	font-size: 0.85rem;
	font-weight: bold;
}
select{
/*	width: fit-content;
	height: 20px;
*/	padding: 5px 10px;
	background: transparent;
	border-radius: 5px;
}
input[type="text"], input[type="password"]{
	padding: 10px 20px;
	background: transparent;
	border-radius: 5px;
	border: 0.25px solid #999;
}
input[type="number"]{
	width: 60px;
	height: 30px;
	padding: 5px 0px 5px 10px;
	background: transparent;
	border-radius: 5px;
	border: 0.25px solid #999;
}
input:required ::after{
    content:"*";
    color: #f00;
}
input:invalid{
	background: #f00;
	color: #fff;
}
input[type="checkbox"]{
	width: 20px;
	height: 20px;
	background: transparent;
	border-radius: 5px;
}
input[type="radio"] {
	width: 16px;
	height: 16px;
	border: 0.5px solid #999;
	background: transparent;
	border-radius: 50%;
}
.err{
    display:flex;
    left:50%;
    transform:translateX(-50%);
    top:-100px;
    position: absolute;
    z-index: 1000;
    padding: 10px 20px;
    border-radius:10px;
    color: #900;
    background: #fdd;
    margin: 10px auto;
    border: 0.25px #900 solid;
    animation: err_msg;
    animation-duration:  5s;
    animation-fill-mode: forwards;
    white-space: nowrap;
    width:fit-content;
}
.err:hover{
    animation-play-state: paused;
}

@keyframes err_msg {
    /* Start position: right side, off-screen */
    0% {
        opacity: 100%;
        left: 50%;
        top: -100px;
        transform: translateX(-50%);
        display: flex;;
        /* Assuming container width is 500px */
    }

    10% {
        opacity: 1;
        top: 30px;
    } 

    /* Pause in the middle: Keep the same position from 40% to 60% */
    /* This range (20% of the total duration) is the pause */
    90% {
        opacity: 1;
        top: 30px;
    }

    /* Continue sweeping left and off-screen: finish at 100% */
    100% {
        opacity: 0;
        top:-100px;
        display: none;;
        /* Move completely off the left side */
    }
}

.btn, input[type="radio"] label{
	/*border: none;
	position: relative;
	padding: 5px 20px;
	cursor: pointer;
	border-radius: 5px;
	color: #fff;
	background: linear-gradient(150deg, #888, #000);*/

	padding: 10px 30px;
    flex:1;
	white-space: nowrap;
	width:100%;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	color: #fff;
	border-radius: 10px;
	cursor: pointer;
	position: relative; /* Needed for pseudo-elements */
	overflow: hidden; /* To contain the gradient */

	/*background: rgba(0, 0, 0, 1);*/
    background: #333;
	backdrop-filter: blur(5px);
    border:none;
	/*border: 0.5px solid rgba(255, 255, 255, 0.3); */
	box-shadow: 2px 2px 6px #666;
}

/*.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
	border-radius: inherit;
	z-index: 1;
}*/
.btn:hover ::before{
	bottom: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
}
/*
.btn:hover {
	color:#6c8b15;
}*/

/*.update{
	background: #4681f4;
}
.save{
	background: #6c8b15;
}*/
.delete{
	background: #d00;
}

@media only screen and (max-width:500px){
	.app_wrapper{
		width: 100%;
	}
}
.notify_icon{
	font-size: 1.5rem;
	margin: auto;
}
.card_icon{
	font-size: 1rem;
}

.cat_img{
	background: url('gfx/target.jpg');
	background-position: center;
	background-size: cover;
}
.cat{
	border-radius: 0.25rem;
	padding: 2px 4px;
	font-size: 0.85rem;
    line-height:0.85rem;
	width: fit-content;
	white-space: nowrap;
	color: #fff;
    
}
.cat_A{
	background: #9ACD32;
}
.cat_B{
	background: #c00;
}
.cat_C {
    background: #c60;
}
.date_item{
	span:nth-of-type(1){
		color: #666;
		font-size: 1rem;
	}
	span:nth-of-type(2){
		display:flex;
		justify-content: center;
		align-items: center;
		height: 45px;
		width: 45px;
		border-radius: 50%;
		text-align: center;
		font-weight: bold;
		font-size: 1.5rem;
	}
}

.date_item:not(.active) {
	span:nth-of-type(2) {
		/*background: linear-gradient(120deg, #efe, #999);*/
            cursor: pointer;
                position: relative;
                overflow: hidden;
                background: rgba(250, 250, 250, 0.2);
                backdrop-filter: blur(5px);
                border: 0.5px solid rgba(255, 255, 255, 0.3);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	}
}
/*.date_item.Sat {
	span:nth-of-type(2) {
		background: linear-gradient(120deg, #fff655, #ff9f55);
    }
}
.date_item.Sun {
    span:nth-of-type(2) {
        background: linear-gradient(120deg, #ffdf44, #ff4444);
    }
}*/
.date_item.active {
	span:nth-of-type(2){
		/*background: #8a9d37;  Dark Yellowgreen  */
		background: linear-gradient(120deg, #9ACD32, #233702);
		color: #fff;
        span{
            color: #fff;
        }
	}
}
.activity_menu{
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 20px;
	position: absolute;
	height: 100%;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(10px);
	padding: 0px 5px;
	left:100%;
	transition: 0.35s;
	button{
		background: transparent;
		border: none;
		padding: 0px;
		font-size: 1.5rem;
	}
}
.activity_type{
    display: flex;
	width: 100%;
	padding:5px;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: flex-start;

    input[type="radio"]{
        display:none;
	}
    span{
		display:flex;
		width:100%;
		margin: auto;
		background: rgba(250, 250, 250, 0.2); /* Semi-transparent background */
		backdrop-filter: blur(5px); /* Frosted glass effect */
	

	}
	label{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 30px;
        font-size: 1.2rem;
        border-radius: 10px;
        text-align: left;
        margin: 0;
        white-space: nowrap;
        text-shadow:1px 1px 2px #000;
		color:#fff;
		background: linear-gradient(120deg, #444, #000);
	}

    input[type="radio"]:checked ~ label {
        color:#000;
        background: linear-gradient(120deg, yellowgreen, green);
    }
}
.activity{
	display:grid;
	grid-template-columns: auto 1fr auto;
	width:100%;
	padding: 10px 0px;
	gap: 10px;
	flex-wrap: nowrap;
	margin: auto;
	scroll-snap-align: start;
	scroll-behavior: smooth;
	scroll-snap-stop: normal;
	border-bottom: 0.25px solid #ddd;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}
.activity_row{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    overflow: auto;
    gap: 0px;
    padding: 0px 5px;
    margin-top: -20px;
    /*max-height: 300px;*/
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    flex-shrink: 0;
}
.activity:last-of-type{
	border:none;
}
.activity:hover .activity_menu{
	transform: translateX(-100%);
}
.scores_2020:last-child{
	background: #6c8b15;
	grid-column: 1 / 3;
}
.spacer{
    display: block;
    height: 100%;
}
.main_menu{
    box-shadow: 0px 0px 10px #999;
    display: flex;
    position: sticky;
    z-index: 1000;
    bottom: 0px;
    left:0;
    justify-content: space-evenly;
    align-items: flex-start;
    padding:20px 10px;
    gap: 10px;
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter:blur(10px);
    color:#444;
    font-size: 0.85rem;
}
@media print{
    @page{
        size:A4 portrait;
        margin: 0.5cm;
    }
    .dont_print{
        display: none;
    }
    .do_print{
        -webkit-print-color-adjust: exact !important;
        print-color-adjust:exact !important;
    }
    .app_wrapper{
        gap:10px;
    }
    .activity{
        padding: 5px 0px;
    }
    .activity_row{
        margin-top: 0px;
    }
    input[type="text"], input[type="number"]{
        padding:0px;
    }
}