.grd-lin-45-prim { background:linear-gradient(45deg, var(--clr-prim), var(--clr-prim-1)); }

.sortable-ghost {position:relative; overflow:hidden;}
.sortable-ghost:before {position:absolute; z-index:1; content:''; width:100%; height:100%; left:0; top:0; opacity:0.3; background:var(--clr-link)!important; }

.logo {width:100%; position:relative;}
.logo:before {
	content:'';
	position:absolute;
	display:block;
	vertical-align:middle;
	width: 100%;
	height:100%;
	background:linear-gradient(45deg, #aaa, #fff);
	-webkit-mask:url(../icons/ic_logo.svg) no-repeat 50% 50% / contain;
	mask:url(../icons/ic_logo.svg) no-repeat 50% 50% / contain;
}

.plate .caption {
    color: var(--clr-on-plate);
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#main-menu .user-profile { display:none; }

#language .ic {width:1.5rem; height:1.5rem; margin:0 5px;}
#language .ic:before {background:var(--clr-on-prim);}
#language .cap {font-size:12px; opacity:0.8;}
#language .list a {color:var(--clr-plate); margin:5px; padding:var(--dim-radius); border-radius:var(--dim-radius); display:inline-block;}
#language .list a.active {background:var(--clr-plate); color:var(--clr-on-plate);}

.user-profile {display:flex; align-items:center; height: 30px; padding:0 10px; color:var(--clr-on-prim); }
.user-profile .pic-box {height:30px; width:30px; flex-basis:30px;}
.user-profile .user-name { display:block; max-height:20px; font-size:16px; line-height:20px; overflow:hidden; }
.user-profile a {color:var(--clr-on-prim);}

.hint:before {background:var(--clr-link);}
.modal-window#hint img {display: block; max-height: 60vh; max-width: 100%; margin:0 auto;}

.icon-num {
	display:inline-block;
    width: var(--dim-num);
    height: var(--dim-num);
    text-align: center;
    font-style:normal;
    font-size: calc(var(--dim-num) * 0.6);
    line-height: var(--dim-num);;
    color: #fff;
    background: var(--clr-prim);
    border-radius: 50%;
}

.note { display:flex; gap:5px; align-items:center; background:var(--clr-bg); border-radius:var(--dim-radius); padding:5px 10px; }

.exercise-icon { --dim-picbox: 35px;}

.filter-list > * { border-bottom:1px solid var(--clr-border);}
.filter-list label {padding:10px 0;}
.filter-list span {font-size:0.9rem; line-height:1rem; height:1rem; overflow:hidden;}
.filter-list > *:hover {color:var(--clr-link);}

.set-items .items { display:grid; align-items:center; grid-template-columns: repeat(5,1fr); gap:calc(var(--dim-gap) * 2); }
.set-items .set-item {position: relative; font-size:0.9rem; text-align:center; border:1px solid var(--clr-border); border-radius:var(--dim-radius); padding:15px 0; --dim-num:15px; }
.set-items .set-item:hover {background:var(--clr-bg); cursor:pointer;}
.set-item .big {font-size:1.2rem; color:var(--clr-prim); }
.set-item .set-num {position:absolute; left:0; top:0; border-radius:var(--dim-radius) 0 var(--dim-radius) 0; color:var(--clr-on-bg); background: var(--clr-bg);}

/* STATISTICS */

#chart-legend ul {flex-wrap:wrap;}
#chart-legend ul li span { border-radius:50%; }
.end-date.off { color:var(--clr-off); cursor:default;}

/* BARBELL CALC */

.barbell-calc.has-lock .lock {display:block;}
.barbell-calc .lock {display:none;}

.barbell {width:100%; aspect-ratio:2; display:flex; align-items:center; gap:2px;}

.barbell.reverse {flex-direction:row-reverse;}
.barbell.reverse .disc span {transform:translate(-50%,-50%) rotate(90deg);}

.barbell > * {background:#EEE; border:1px solid var(--clr-border); height:10%; width:10px; border-radius:5px; transition:all 0.5s;}
.barbell .lock:hover,
.barbell-calc .disc:hover {opacity:0.7;}
.barbell .lock		{height:7%; width:unset; aspect-ratio:1; background:linear-gradient(#f7f7f7,#ddd);}
.barbell .lock.on	{height:10%; background:linear-gradient(#333,#111); color:#fff;}
.barbell .rod {width:unset; flex-grow:1; height:100%; background:linear-gradient(#f7f7f7,#ddd); background: url(../img/leg.svg) no-repeat 100% 50% / cover; border:none;}

.barbell-calc .disc {position:relative;}
.barbell-calc .disc.w-0-5	{height:20%; width:12px; background:linear-gradient(#ddd,#bbb);}
.barbell-calc .disc.w-1	{height:30%; width:14px; background:linear-gradient(#0F0,#0D0);}
.barbell-calc .disc.w-1-5	{height:40%; width:16px; background:linear-gradient(#FF0,#FD0);}
.barbell-calc .disc.w-2		{height:50%; width:17px; background:linear-gradient(#09F,#07D);}
.barbell-calc .disc.w-2-5	{height:60%; width:18px; background:linear-gradient(#F00,#D00);}
.barbell-calc .disc.w-5	{height:70%; width:20px; background:linear-gradient(#ddd,#bbb);}
.barbell-calc .disc.w-10	{height:80%; width:22px; background:linear-gradient(#0F0,#0D0);}
.barbell-calc .disc.w-15	{height:80%; width:24px; background:linear-gradient(#FF0,#FD0);}
.barbell-calc .disc.w-20	{height:80%; width:26px; background:linear-gradient(#09F,#07D);}
.barbell-calc .disc.w-25	{height:80%; width:30px; background:linear-gradient(#F00,#D00);}

.barbell .lock,
.barbell .disc {position:relative;}
.barbell .lock span,
.barbell-calc .disc span {font-weight:bold; text-shadow:0 0 1px #000; border-radius:3px; padding:0 3px; line-height:12px; font-size:12px; background:#0007; display:block; position:absolute; left:50%; top:50%; color:#fff; transform:translate(-50%,-50%) rotate(-90deg);}

.barbell .lock span { top:-35px; transform:translate(-50%, 0%) rotate(-90deg); font-weight: normal; padding:2px 5px 4px;}

.discs.controls {display:grid; align-items:center; grid-template-columns: repeat(5,1fr); gap:calc(var(--dim-gap) * 2);}
.discs.controls .disc-item span {border-radius:50%; background:var(--clr-plate); color:var(--clr-on-plate); transform:translate(-50%,-50%); height:15px; line-height:15px; width:15px; text-align:center; text-shadow:none; padding:3px;}
.barbell-calc .disc-item .disc {margin:auto; aspect-ratio:1;border-radius:50%; transition:all 0.5s;}

.disc-item .disc.w-0-5	{width:50%;}
.disc-item .disc.w-1	{width:55%;}
.disc-item .disc.w-1-5	{width:60%;}
.disc-item .disc.w-2	{width:65%;}
.disc-item .disc.w-2-5	{width:70%;}
.disc-item .disc.w-5	{width:80%;}
.disc-item .disc.w-10	{width:100%;}
.disc-item .disc.w-15	{width:100%;}
.disc-item .disc.w-20	{width:100%;}
.disc-item .disc.w-25	{width:100%;}