.su-training{

    display:flex;
    gap:15px;
    align-items:flex-start;

}

.su-training-left{

    width:65%;

}

#exercise-title{
    font-weight:600;
    font-family:"Oswald",sans-serif;
    font-size:32px;
    text-transform:uppercase;
    color:#000;
}

.su-training-header h2{
    font-weight:600;
    font-family:"Oswald",sans-serif;
    font-size:40px;
    text-transform:uppercase;
    color:#000;
}

.su-training-right{

    width:35%;
    background:#fff;
    border-radius:24px;
    padding:18px;

}

.su-training-right h2{

    margin:0;
    font-weight:600;
    font-family:"Oswald",sans-serif;
    font-size:24px;
    text-transform:uppercase;
    color:#000;

}

.su-training-video video{

    width:100%;
    border-radius:24px;
    overflow:hidden;
    background:#000;

}

.su-training-video{

    background:#fff;
    border-radius:20px;

}

.su-training-video iframe{

    width:100%;
    height:410px;

    border:none;
    border-radius:12px;

}

.su-training-list{

    padding-top:10px;
    max-height:700px;
    overflow-y:auto;
    padding-right:8px;

}

.su-training-list::-webkit-scrollbar{

    width:6px;

}

.su-training-list::-webkit-scrollbar-thumb{

    background:#dcdcdc;
    border-radius:20px;

}

.su-exercise{

    padding:0px;
    border:1px solid #b7b9c3;
    border-radius:12px;
    margin-bottom:12px;
    cursor:pointer;
    transition:.25s;

}

.su-exercise:hover{

    transform:translateY(-2px);
    border-color:#000;

}

.su-exercise.active{

    background:#fafafa;
    border:1px solid #b7b9c3;

}

.su-exercise h3{

    font-family:"Manrope",sans-serif;
    color:#000;
    font-weight:700;
    margin:0 0 3px;
    font-size:16px;
    line-height:1.3;

}

.su-exercise p{

    font-family:"Manrope",sans-serif;
    color:#585c6b;
    font-weight:500;
    font-size:14px;
    margin:0;

}

.su-exercise-info{

    background:#fff;
    border-radius:20px;
    padding:20px;
    margin-top:15px;

}

.su-exercise-tags{

    display:flex;
    flex-wrap:wrap;
    gap:6px;

}

.su-exercise-description{

    margin-top:25px;
    font-family:"Manrope", sans-serif;
    font-size:15px;
    line-height:1.6;
    color:#5A5A5A;

}

.su-exercise-description p{

    margin:0 0 14px;

}

.su-exercise-description p:last-child{

    margin-bottom:0;

}

.su-exercise-description strong{

    color:#000;

}

.su-exercise-description h1,
.su-exercise-description h2,
.su-exercise-description h3,
.su-exercise-description h4{

    font-family:"Oswald", sans-serif !important;
    text-transform:uppercase !important;
    font-weight:500 !important;
    line-height:1.2em !important;
    font-size:24px !important;
    color:#000 !important;
    margin-top:20px !important;
    margin-bottom:10px !important;

}

.su-exercise-description h1:first-child,
.su-exercise-description h2:first-child,
.su-exercise-description h3:first-child,
.su-exercise-description h4:first-child{

    margin-top:0 !important;

}

.su-tag {
	background: #f7f8fb;
	border-radius: 100px;
	padding: 3px 10px;
	font-family: "Manrope", Sans-Serif;
	font-size: 14px;
	font-weight: 500;
	color: #585C6B;
}

.su-finish-training svg{

    width:20px;
    margin-top:1px;

}

.su-training-finish{

    margin-top:0px;
    text-align:center;

}

.su-finish-training{

    font-family:"Oswald",sans-serif;
    text-transform:uppercase;
    width:100%;
    justify-content:center;
    padding:12px 45px;
    border:1px solid #22c55e;
    border-radius:12px;
    background:#fff;
    color:#22c55e;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
    display:flex;
    gap:3px;

}

.su-finish-training:hover{

    background:#22c55e;
    color:#fff;

}

.su-finish-training.completed{

    background:#22c55e;
    color:#fff;
    cursor:default;

}

/* =======================================================
   Exercise
======================================================= */

.su-exercise-header{
	padding: 12px;
    cursor:pointer;

}

.su-exercise-body{

    display:none;
	border-top: 1px solid #eeeef0;

}

/* =======================================================
   Header + Rows
======================================================= */

.su-sets-header,
.su-set-row{

    display:grid;
    grid-template-columns:14% 43% 43%;
    align-items:center;
    text-align:center;

}

.su-sets-header{

    padding: 8px 12px;
    border-bottom:1px solid #eeeef0;

    color:#585c6b;
    font-size:12px;
    font-weight:600;
    font-family:"Manrope",sans-serif;

}

.su-set-row{
	
    padding:8px 12px;

}

.su-set-row:not(:last-child){

    border-bottom:1px solid #f2f2f2;

}

/* =======================================================
   Cells
======================================================= */

.su-set-weight-wrap{

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

    font-family:"Manrope",sans-serif;
    font-size:15px;
    font-weight:600;

}

.su-set-reps{

    font-family:"Manrope",sans-serif;
    font-size:14px;
    font-weight:400;
    color:#000;

}

.su-set-weight{

    -webkit-appearance:none;
    appearance:none;

    width:50px;
    padding:0!important;

    background:transparent!important;
    border:none!important;
    outline:none!important;
    box-shadow:none!important;

    font-size:14px;
    font-weight:400;
    text-align:center;
    color:#000;

}

.su-set-weight:focus{

    background:transparent!important;
    border:none!important;
    outline:none!important;
    box-shadow:none!important;

}



.su-set-weight::-webkit-inner-spin-button,
.su-set-weight::-webkit-outer-spin-button{

    -webkit-appearance:none;
    margin:0;

}

.su-set-weight:focus{

    border-color:#000;

}

.su-set-weight::-webkit-inner-spin-button,
.su-set-weight::-webkit-outer-spin-button{

    -webkit-appearance:none;
    margin:0;

}

.su-set-check{

    width:15px;
    height:15px;
    cursor:pointer;

}

/* ==========================================
   Mobil
========================================== */

@media (max-width:768px){

    .su-training{

        flex-direction:column;

    }

    .su-training-left,
    .su-training-right{

        width:100%;
        box-sizing:border-box;

    }

    .su-training-header h2{

        font-size:24px;

    }

    #exercise-title{

        font-size:24px;

    }

    .su-training-video iframe{

        height:220px;

    }

    .su-exercise-info{

        padding:16px;

    }

    .su-training-list{

        max-height:none;

    }

}