.menu-container{
     position: absolute;
    width: 100%;
    height: 100%; 
    display: block;
}
.menu-container .menu-activity-panel .ost-panel{
    position: relative;
    width: 432px;
    top: 300px;
    color: #fff;
}

.menu-container .menu-activity-panel .dynamic-panel{
    position: absolute;
    left: 490px;
    top: 42px;
    width: 1266px;
    text-align: center;

}
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block{position: relative; margin: 10px 0px;}
.menu-container .menu-activity-panel .dynamic-panel .btn{
    position: relative;
    width: 578px;
    min-height: 140px;
    padding:0px;
    overflow: hidden;
    font-size: 25px;
    background-color: #1455B4;
    color: #fff;
    border-radius: 20px;
}
.menu-container .menu-activity-panel .dynamic-panel .btn .bg-img{
    position: relative;
    width: 202px;
    height: 100%;
    transition: all 200ms ease-out;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.menu-container .menu-activity-panel .dynamic-panel .btn .block-div{
    position: relative;
    width: 450px;
    transition: all 200ms ease-out;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 10px 20px 20px;
}

.menu-container .menu-activity-panel .dynamic-panel .btn .block-div .title-cell {text-align: left; padding:0px 20px;}
.menu-container .menu-activity-panel .dynamic-panel .btn .time-cell *{padding: 0px 5px;}
.menu-container .menu-activity-panel .dynamic-panel .btn .arrow-cell {font-size: 2.2em;}

.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.locked .btn{cursor: default;}
.menu-container .status-notification-div{
    position: absolute;
    bottom: 1em;
    left: auto;
    right: 4em;
    margin: 0 auto;
    width: 55%;
    color: #fff;
}
.menu-container .status-notification-div .display-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 15px;
}
.menu-container .status-notification-div .display-cell span{

}
.menu-container .side-footer .status-notification-div{
    position: relative;
    color: #000;
    width: 100%;
    background-color: #E3F7FD;
    padding: 1em;
}
.menu-container .status-notification-div .display-cell span{
    display: inline-block;
    vertical-align: middle;
} 
.menu-container .status-notification-div .display-cell .txt{
    padding: 10px 20px;
}
.menu-container .status-notification-div .css-icon.circle{
    position: relative;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    border: 0.1em solid #0460A9;
}
.menu-container .status-notification-div .css-icon.circle-border{
    background-color: #fff; 
}
.menu-container .status-notification-div .svg-icon.circle-half{width: 1.2em;}
.menu-container .status-notification-div .css-icon.circle-fill{
    background-color: #0460A9;        
}
.menu-container .status-notification-div .svg-icon.optional-icon{width: 1.2em;height: 1.2em;}
/* for selectable menu*/
.menu-container.selectable .module-pop .btn.mandatory{cursor: default; color: #000;}
/* for static menu */
.menu-container.static .time-div .dyn-hour,
.menu-container.static .time-div .dyn-minute
{color: #000;}
.menu-container.static .side-header .instr-txt{margin-top: 0em;}
.menu-container.static .module-pop .btn:not(.optional) .indicator .status-icon,
.menu-container.static .status-notification-div .status-icon:not(.optional-icon){
    background-color: transparent;
    border-radius: 50%;
    color: #0460A9;
}
.menu-container.static .status-notification-div .status-icon:not(.optional-icon){
    background-color: #fff;
}
.menu-container.static .module-pop .btn:not(.optional) .indicator .status-icon.icon-lock{background-color: transparent;}
.menu-container.static .module-pop .btn.locked{cursor: default;}
.menu-container.static .certificate-btn-block {margin:0.5em 0em; text-transform: uppercase;}

.menu-container .bg-circle{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #00AA91;
    color: #fff;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    border: 1px solid #fff;
    font-size: 34px;
}
.menu-container .bg-box{  
    position: absolute;
    width: 1266px;
    left: 490px;
    top: 150px;
}
.menu-container .line{
    position: relative;
    width: 1px;
    height: 100px;
    background-color: #fff;
    margin: 0 auto;
}
.menu-container .boder-box{
    position: relative;
    width: 100%;
    height: 516px;
    background-color: rgba(83, 140, 219, 0.36);
    border-radius: 10px;
    border: 2px solid #fff;
}
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-intro,
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-certificate {margin: 0px;}
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-intro .btn{
    width: 260px;
    background-color: #418CE1;
    height: 110px;
    min-height: auto;
}
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-certificate .btn{
    width: 260px;
    background-color: #418CE1;
    height: 110px;
    min-height: auto;
}
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-intro .btn .block-div,
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-certificate .btn .block-div{justify-content: flex-start;}

.menu-container .menu-activity-panel .dynamic-panel .mod-1 .module-btn{border: 2px solid #fff;}

.menu-container .menu-activity-panel .dynamic-panel .mod-2{position: absolute; top: 224px; left: 40px;}
.menu-container .menu-activity-panel .dynamic-panel .mod-3{position: absolute; top: 224px; left: 650px;}
.menu-container .menu-activity-panel .dynamic-panel .mod-4{position: absolute; top: 384px; left: 40px;}
.menu-container .menu-activity-panel .dynamic-panel .mod-5{position: absolute; top: 384px; left: 650px;}
.menu-container .menu-activity-panel .dynamic-panel .mod-6{position: absolute; top: 546px; left: 342px;}
.menu-container .menu-activity-panel .dynamic-panel .mod-7{position: absolute; top: 820px; left: 502px;}

.menu-container .menu-activity-panel .dynamic-panel .mod-7 .module-btn{border: 2px solid #fff;}

.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-intro .btn.hover,
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-certificate .btn.hover,
.menu-container .menu-activity-panel .dynamic-panel .btn.hover {background-color: #00AA91;}

.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-intro .extra-txt{display: none; margin: 0px;}
.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block.mod-intro.complete .extra-txt{display: block;}

.menu-container .menu-activity-panel .dynamic-panel .mod-btn-block .extra-txt-scenario{font-size:22px; margin-top:-10px;}



/* --mediaQuery Start-- */
@media screen and (max-width: 834px) {
    
}
@media screen and (max-width: 360px) {
    
}