.side-panel.side-panel-open .side-panel-wrapper { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); }

.side-panel .side-panel-wrapper { position: fixed; top: 0; right: 0; bottom: 0; background-color: #ffffff; width: 300px; border-left: 1px solid #e6ecf5; margin: 0px; overflow: hidden; z-index: 1030; transform: translateX(300px); -webkit-transform: translateX(300px); -moz-transform: translateX(300px); -o-transform: translateX(300px); -ms-transform: translateX(300px); transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; }

@media only screen and (max-width: 767px) { .side-panel .side-panel-wrapper { width: 270px; } }

.side-panel .side-panel-wrapper > div { height: 100%; }

.side-panel .side-panel-wrapper .nav-tabs { border-bottom: 1px solid #e6ecf5; }

.side-panel .side-panel-wrapper .nav-tabs > li.active > a { color: #515365; background-color: transparent; border: 0px; border-bottom-color: transparent; }

.side-panel .side-panel-wrapper .nav-tabs > li.active > a:hover, .side-panel .side-panel-wrapper .nav-tabs > li.active > a:focus { color: #515365; background-color: transparent; border: 0px; border-bottom-color: transparent; }

.side-panel .side-panel-wrapper .nav-tabs > li.active .nav-link { border-bottom: 0px; }

.side-panel .side-panel-wrapper .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 0px; border-radius: 4px 4px 0 0; color: #888da8; padding: 0px 20px; line-height: 65px; min-height: 65px; font-weight: bold; }

@media only screen and (max-width: 767px) { .side-panel .side-panel-wrapper .nav-tabs > li > a { padding: 0px 15px; } }

.side-panel .side-panel-wrapper .nav-tabs > li > a:hover, .side-panel .side-panel-wrapper .nav-tabs > li > a:focus { background-color: transparent; color: #515365; }

.side-panel .side-panel-wrapper .nav-tabs .panel-close { position: absolute; right: 0; top: 0px; line-height: 65px; border-left: 1px solid #e6ecf5; }

.side-panel .side-panel-wrapper .nav-tabs .panel-close > a { color: #888da8; padding: 0px 20px; display: block; }

.side-panel .side-panel-wrapper .nav-tabs .panel-close > a:hover, .side-panel .side-panel-wrapper .nav-tabs .panel-close > a:focus { color: #515365; }

.side-panel .side-panel-wrapper .tab-content { height: 100%; }

.side-panel .side-panel-wrapper .tab-content .tab-pane { height: 100%; }

.side-panel .profile { height: calc(100vh - 65px); position: relative; }

#mission { height: 100%; }

.mission { padding: 15px 0px; position: relative; height: calc(100vh - 65px); }

.mission .mission-item-list { transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; position: relative; left: 0; height: calc(100vh - 65px); }

.mission .mission-item-list .mission-section { margin-bottom: 50px; }

.mission .mission-item-list .mission-section .mission-title { padding: 0px 20px 10px 20px; }

.mission .mission-item-list .mission-item { padding: 5px 20px; display: block; position: relative; }

.mission .mission-item-list .mission-item .thumb-img { height: 40px; width: 40px; border-radius: 50px; float: left; }

.mission .mission-item-list .mission-item .mission-info { height: 40px; }

.mission .mission-item-list .mission-item .mission-info .mission-title { display: block; color: #515365; }

.mission .mission-item-list .mission-item .mission-info .mission-title.pdd-top-5 { padding-top: 7px !important; }

.mission .mission-item-list .mission-item .mission-info .prev-mission { display: block; font-size: 12px; color: #b4b7c8; }

.mission .mission-item-list .mission-item:hover, .mission .mission-item-list .mission-item:focus { text-decoration: none; background-color: #f6f7fb; }

.mission .mission-item-list .mission-item .status { position: absolute; width: 10px; height: 10px; right: 20px; left: auto; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); background-color: #ffffff; border-radius: 50px; border: 3px solid; border-color: #e6ecf5; }

.mission .mission-item-list .mission-item .status.online { border-color: #37c936; }

.mission .mission-item-list .mission-item .status.no-disturb { border-color: #ff3c7e; }

.mission .mission-item-list .mission-item .status.away { border-color: #ffcc00; }

.techcourse-logo {
    width: 190px;
    height: 65px;
    background: no-repeat;
    background-size: 100% auto;
}

#base.header {
    min-width: 320px !important;
}