:root {
     --training-menu-width:316px;
     --training-border:1px solid var(--primary-border);
     --training-info-back:var(--menu-back);
     --training-info-color:var(--menu-color);

     --training-info-back: #195aba;
     --training-info-color: var(--color-light);

     --training-section-back: var(--color-level1-back);
     --training-section-color: var(--color-level1-color);

     --training-topic-back: #195aba;
     --training-topic-color: var(--color-light);

     --training-lesson-back: #f8f9fa;
     --training-lesson-offset: #e7e7e7;
     --training-lesson-color: var(--color-dark);

     --training-border:1px solid rgba(255, 255, 255, 0.25);

}

/* Training */
#training-frame {
     border:var(--primary-border);
     background-color:var(--menu-back);
     color:var(--menu-color);
     border-radius:var(--radius);
     height:100%;width:100%;
}

#training-wrapper {
     width:100%;
     height:100%;
     display:flex;
     flex-direction:row;
     justify-content:start;
     align-items:start;
     overflow:hidden;
     background:transparent;
}

#training-menu {
     width: 0;
     min-width: 0;
     max-width: 0;
     left:0;top:0; 
     display: inline-flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: start;
     /* overflow:visible; */
     position:relative;
     z-index: 8;
     height:100%;
     flex:0;
     background-color:var(--menu-back);
     border:var(--menu-border);
     color:var(--menu-color);
     transition:var(--transition);
}
#training-menu.expanded {
     width: var(--training-menu-width);
     min-width: var(--training-menu-width);
     max-width: var(--training-menu-width);
     flex:0 0 auto;  
}
 
#training-menu-toggle {
     display:inline-flex;
     flex-direction:column;
     align-items:center;
     justify-content: space-around;
     position:relative;
     width:30px;
     height:30px;
     padding:4px;
     z-index:1;
     margin-left:4px;
     cursor:pointer;
     color:var(--header-color);
}
#training-menu-toggle div, #training-menu-toggle::after, #training-menu-toggle::before {
     width:100%;
     height:2px;
     transition:var(--transition);
     content:"";
     display:block;
     border-radius:var(--radius);
     background-color:var(--header-color);
}
#training-wrapper:not(.expanded)    #training-menu-toggle::after, 
#training-wrapper:not(.expanded)  #training-menu-toggle::before {
     width:calc(100% - 2px);
     transform:translateX(-2px);
}
#training-wrapper.expanded #training-menu-toggle::after, #training-wrapper.expanded #training-menu-toggle::before {
     width:calc(100% - 2px);
     transform:translateX(2px);
}
#training-external {
     width:30px;
     min-width:30px;max-width:30px;
     min-height:30px;
     height:30px;
     max-height:30px;
     flex:0;
     margin-right:8px;
     background-image:url(../core/images/external-white.png);
     /* background-size:80%; */
     /* background-position:center; */
}
#training-lesson-exit {
     width:30px;
     min-width:30px;max-width:30px;
     min-height:30px;
     height:30px;
     max-height:30px;
     flex:0;
     margin-right:8px;
     background-image:url(../core/images/grid-delete-white.png);
     /* background-size:90%; */
     /* background-position:center; */

}

.training-section-wrapper {
     width: 100%;
     height: 40px;
     min-height: 40px;
     transition: var(--transition);
     border:1px solid transparent;
     border-radius:var(--radius);
     flex: 0 0 auto;
     gap:4px;
     border-top: var(--training-border);
}

.training-section-wrapper:hover {
     background-color:var(--menu-group-active);
     border:1px solid var(--menu-border-color);
}

.training-section-wrapper.active {
     background-color: var(--menu-group-active);
     border:1px solid var(--menu-border-color);
     flex:0 0 auto;
     margin-bottom:8px;
}

.training-section-title, .training-lesson-title {
     transition: var(--transition);
     font-size:var(--font-size-16);
     width: 100%;
     line-height: 40px;
     min-height: 40px;
     cursor: pointer;
     display: flex;
     flex-direction: row;
     padding:0 8px;
     align-items: center;
     justify-content: flex-start;
     border-bottom: 1px solid transparent;
     gap:8px;
}
.training-lesson-title {
     font-size:var(--font-size-14);
}
.training-section-text, .training-lesson-text {
     flex:1;
     cursor:pointer;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
}
.training-section-icon, .training-lesson-icon {
     width:20px;
     height:20px;
     min-width:20px;
     max-width:20px;
     max-height:20px;
     flex:0;
} 
.training-section-toggle {
     width:20px;
     height:20px;
     min-width:20px;
     min-height:20px;
     flex-grow:0;
     display:flex;
     justify-content:center;
     align-items:center;
     background-image: url(../core/images/expand.png);
     flex:0;
}
.training-section-wrapper.active .training-section-toggle {
     background-image: url(../core/images/collapse.png);
}
.training-section-wrapper.active .training-section-title {
     border-bottom:1px solid var(--menu-border-color);
}
.training-section-wrapper .training-lesson-title {
     padding-left: 16px;
}

.training-topic {
     font-size:var(--font-size-14);
     display:flex;
     width: auto;
     line-height: 30px;
     min-height: 30px;
     flex-direction:row;
     justify-content:center;
     align-items:center;
     padding:8px 8px 4px 8px;
     margin:0 8px;
     border-top:1px solid var(--primary-border);
}
.training-divider {
     border-top:var(--training-border);
}

#training-info {
     display:flex;
     width:var(--training-menu-width);
     min-width:var(--training-menu-width);
     max-width:var(--training-menu-width);
     flex-direction:column;
     justify-content:start;   
     background-color:var(--training-info-back);
     color:var(--training-info-color);  
     border-bottom:var(--primary-border);
}

#training-course-header {
     width:100%;
     display:flex;
     flex-direction:row;
     justify-content:start;
     align-items:center;
     height: 40px;
     min-height:40px;
     max-height:40px;
     line-height: 40px;
     padding: 0 8px;
     font-weight: bold;
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: var(--font-size-18);
     background-color:var(--header-back);
     color:var(--header-color);
     border-bottom: var(--primary-border);
}

#training-course-status {
     display:inline-flex;
     flex-direction:row;
     justify-content:center;
     align-items:center;
     width:auto;
     gap:8px;
     margin:4px;
     font-size:var(--font-size-18);
     font-weight:normal;
     padding:4px 8px;
     border-radius:var(--radius);
     /* background-color:white; */
     /* color:var(--color-dark); */
     color:var(--color-light);
}

#training-lessons {
     display: block;
     width:var(--training-menu-width);
     min-width:var(--training-menu-width);
     max-width:var(--training-menu-width);
     flex:1;
     overflow-y: auto;
     overflow-x: hidden;
     padding:8px;
     gap:8px;
}

#training-lesson-wrapper {
     display: inline-flex;
     flex:1;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     height:100%;
     width: 100%;
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     background-color:var(---body-back);
     color:var(--body-color);
}
#training-lesson-header {
     width: 100%;
     height: 40px;
     min-height: 40px;
     line-height: 40px;
     font-weight: bold;
     text-align: left;
     display:flex;
     flex-direction:row;
     justify-content:start;
     align-items:center;
     font-size: var(--font-size-18);
     background-color:var(--header-back);
     color:var(--header-color);
     border-bottom: var(--primary-border);
}
#training-title {
     margin-left:8px;
     flex:1;
}

.training-lesson-title.training-locked {
     opacity: 0.5;
}
.training-lesson-title.lesson-active {
     font-weight:bold;
}

.training-icon, .training-icon-large {
     --percolor:white;
     --per:0;
     height:20px;
     width:20px;
     flex:0 0 auto;
     display:flex;
     justify-content:center;
     align-items:center;
     border-radius:50%;
     position:relative;
     box-sizing:border-box;
     border:2px solid #3ee8ff;

}
.training-icon-large {
     height:30px;
     width:30px;
     border:3px solid #3ee8ff;
}
.training-icon::before, .training-icon-large::before {
     content:"";
     position:absolute;
     inset: 2px;
     border-radius:50%;
     background:conic-gradient(var(--percolor), calc(var(--per) * 1%), transparent 0); 
     transform:rotate(0deg);
}
.training-icon-large::before {
     inset: 3px;
}
.training-icon.training-locked, .training-icon-large.training-locked {
     background-image: url(../core/images/locked.png);
     border:0;border-radius:0;
     background-size:contain;
}
.training-icon.training-locked::before, .training-icon-large.training-locked::before {
     content:none;
}
/* Training Icons
.training-locked {
     background-image: url(../core/images/training-locked.png);
}
.training-started {
     background-image: url(../core/images/training-started.png);
}
.training-notstarted {
     background-image: url(../core/images/training-notstarted.png);
}
.training-completed {
     background-image: url(../core/images/training-completed.png);
}
.training-25 {
     background-image: url(../core/images/training-25.png);
}
.training-50 {
     background-image: url(../core/images/training-50.png);
}
.training-75 {
     background-image: url(../core/images/training-75.png);
} */