body {
    font-family: Arial, "sans-serif", Gotham, Helvetica Neue, Helvetica;
    height: 100%;
}
.page-wrapper {
    width: 1483px;
    max-width: 100%;
    margin: 0 auto;
    min-height: 100%;
    padding: 0;
}
.page {
    width: 100%;
    border-radius: 0 0 0 0;
    box-shadow: 0 0 0 0;
    -webkit-box-shadow: 0 0 0 0;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: 0;
}
.page-inner {
    display: flex;
    align-items: stretch;
    font-family: "Assistant", Helvetica;
    flex-grow: 1;
}
.page-top {
    box-shadow: 0px 4px 4px 0px #0000001a;
    background-color: #ffffff;
}
.header-top-wrapper {
    background-color: transparent;    
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #212121;
    padding: 0 25px 0 12px;
}
.user-menu .personal-links a.personal-link {
     color: #212121 !important;
}

div.logo {
    width: auto;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
img.logo {
    height: 6em;
    width: auto;
}
div.logo>.go-to-site {
    text-decoration: none;
    color: rgb(33, 33, 33);
    font-weight: bold;
    font-size: 1.1rem;
}
.user-menu {
    font-size: 1.1rem;    
}
.user-icon::before {
    color: #12547F;
    cursor: pointer;    
}
.tech_help_links {
    display: flex;
    justify-content: space-between;
}
.menu-col {
    width: 283px;
    border-bottom: 40px #12547F solid;
    background: #ffffff;
    background: linear-gradient(0deg, rgba(194,231,237,1) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%);
    box-shadow: 0px 4px 7px 0px #0000001a;
}
.menu-wrapper {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;  
    background-color: #ffffff; 
}
.menu-link-wrapper {
    display: block;
    font-size: 1.8rem;
    padding: 0.5em 10px;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    text-align: right;
     
}
.menu-link-wrapper.menu-current {
    background-color: #a2d9ec99;
}
a.menu-link, a.menu-link:visited, a.menu-link:active, a.menu-link:hover {
    font-size: 1.8rem;
    color: black;
    text-decoration: none;
    display: block;
}
.menu-link-wrapper.menu-current a.menu-link {
    font-weight: bold;
    cursor: default;
}
.menu-link-wrapper:hover a.menu-link {
    font-weight: bold;
}
.menu-link-wrapper>a {
    background-position: center right;
    background-repeat: no-repeat;
    padding: 0 50px 0 0;
    box-sizing: border-box;
    width: 100%;
}
.menu-link-wrapper>.menu-calendar {
    background-image: url(./images/menu-calendar.png); 
}
.menu-link-wrapper>.menu-my_lessons {
    background-image: url(./images/menu-lessons.png); 
}
.menu-link-wrapper>.menu-notices {
    background-image: url(./images/menu-messages.png); 
}
.menu-link-wrapper>.menu-vod {
    background-image: url(./images/menu-vod.png); 
}
.menu-link-wrapper.submenu>div {
    padding: 0 25px 0 0;
}
.user-search {
    height: auto;
} 
.calendar {
    width: 1200px;
    max-width: 100%;
}
.calendar .events-page-title-wrapper {
    margin: 0 auto;
    background-color: #97e7f5f0;
    width: 98%;
    box-sizing: border-box;
    line-height: 2;
}
.calendar .events-page-title {
    font-size: 1.7rem;
    font-weight: bold;
}
.calendar .calendar-month-events {
    border: 0 none;
    margin-bottom: 0;
    min-height: 80%;
}
.calendar .calendar-head {
    background-color: #cbf3faa6;
    color: #000000;
    font-size: 1.6rem;
} 
.calendar .event-day-num {
    background-color: #cbf3faa6;
    color: #000000;
    padding: 5px;
    text-align: center;
}
.calendar .calendar-head>.current, .calendar .event-day-num.current {
    background-color: #C5E6F2;
}
.calendar .event-day {
    border: 1px #cbf3faa6 solid;
}
.calendar .btn-space {
    padding: 5px;
    margin: 0.3em auto;
    font-size: 1.1rem;
}
.link-btn-wrapper {
    text-align: center;
}
.link-btn {
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    padding: 0.5em;
    margin: 0.5em auto;
    font-weight: bold;
    font-size: 1.2rem;
    background-color: #12547f;  
    color: white !important;    
    text-decoration: none;
}
.link-btn:visited,.link-btn:hover,.link-btn:active {
    color: white;  
    text-decoration: none;
}
.calendar .btn-event {
    border-radius: 5px;
    padding: 5px;
    float: none;
    max-width: 70%;
    margin: 0.3em auto;
    font-weight: bold;
    font-size: 1.1rem;
}
.calendar .btn-enroll {
    background-image: none;
    background-color: #12547f;  
    color: white;  
    border: 2px #12547f solid;
}
.calendar .btn-enrolled, .btn-row .btn.btn-enrolled {
    background-image: none;
    background-color: white;
    color: #12547f; 
    border: 2px #12547f solid;  
}
.calendar .event-box {
    background-color: white;
    margin-bottom: 1em;
    cursor: pointer;
    padding-bottom: 0.2rem;
}
.calendar .event-box.current {
    background-color: #C5E6F2;
} 
.calendar .event-category, .calendar .btn-event-wrapper { 
    background-color: transparent !important;
}
.calendar .event-day-inner {
    min-height: 15em;
}
.events-page-title-wrapper a.prev.disabled {
    cursor: auto;
}
.events-page-title-wrapper a.prev.disabled::after {
    display: none;
}
.box-is-full {
    text-align: center;
    font-size: 1.1em;
}
 .btn-row .btn {
    background-color: #12547f;
    color: white; 
 }
.btn-row .btn-close {
    background-color: white;
    color: #12547f; 
    border: 2px #12547f solid;  
}
.task-view-dialog {
     max-width: 100%;
}
.task-view {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
}
.task-view .task-view-box-wrapper {
    width: 49%;
    padding: 2%;
    display: inline-block;
    box-sizing: border-box;
    height: 331px;
}
.task-view .task-view-box {
    width: 100%;
    height: 100%; 
    border-radius: 5px;
    border: solid transparenet 1px;
    overflow: hidden;
    box-sizing: border-box;
}
.task-view .btn-row {
    padding: 10px;
    text-align: right;
}
.task-pict .task-logo {
    width: auto;
    height: 100%;
} 
.task-view-box.task-details {
    background-color: #c8d7e1;
    background-position: top right;
    background-repeat: no-repeat;
    padding: 72px 10px 10px;
}
.task-view-box.task-details1 {
    background-image: url('./images/bg-details1.png');
}
.task-view-box.task-details2 {
    background-image: url('./images/bg-details2.png');
}
.menu-action-row {
     display: none;
     padding: 1em;
}
.menu-btn-action {
    cursor: pointer;
    font-size: 2em; 
    text-decoration: none;
}
.menu-btn-action:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.menu-btn-show:after {
    content: "\f0c9"
}
.menu-btn-close:after {
    content: "\f00d"
}
.menu-wrapper.m-hidden {
    display: block;
}
.menu-wrapper .menu-link-wrapper.menu>.open, 
.menu-wrapper .menu-link-wrapper.menu>.closed {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu-wrapper .menu-link-wrapper.menu>.open:after, 
.menu-wrapper .menu-link-wrapper.menu>.closed:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 0.8em;
}
.menu-wrapper .menu-link-wrapper.menu>.open:after {
    content: "\f077"
}
.menu-wrapper .menu-link-wrapper.menu>.closed:after {
    content: "\f053"
}
.menu-wrapper .menu-link-wrapper.submenu a.menu-link {
    font-size: 1.6rem;
}
.menu-wrapper .menu-link-wrapper.submenu.open {
    display: block;
}
.menu-wrapper .menu-link-wrapper.submenu.closed {
    display: none;
}
.calendar .event-title {
    height: 2.6rem;
    overflow: hidden;
}
.task-descr-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    font-size: 1rem;
}
.task-view .task-descr-inner .btn-row {
    padding: 0.5rem 0;
}
.task-view .task-descr-inner .btn-row .btn {
    margin: 0;
}
@media only screen and (max-width: 1482px) {
   .page {
      width: 1200px;  
      margin: 0 auto;
   } 
   .menu-col {
       width: 0; 
   }
   .menu-action-row {
       display: block;
   } 
   .menu-wrapper {
       width: auto;
       max-width: 100%;
       position: absolute;
       top: 0; 
       border: 2px #a2d9ec99 solid;
       z-index: 99;
   }
   .menu-wrapper.m-hidden {
       display: none;
   }
}
@media only screen and (min-width: 1200px) {
    .task-title {
        margin-top: 0;
    }
}
@media only screen and (max-width: 1199px) {
    .page-wrapper {
        width: 100%;
    }
    .calendar .btn-event  {
        width: 90%;
        max-width: 90%;
    } 
}
@media only screen and (max-width: 1023px) {
    .task-view {
        flex-direction: column;
    }
    .task-view .task-view-box-wrapper {
        width: 100%;
        display: block;
    } 
    .task-pict .task-logo {
        width: 100%;
        height: auto;
    } 
    .task-view .btn-row {
        padding: 10px;
        text-align: center;
    }
    .calendar .event-title {
        height: auto;
    }
    .calendar .btn-space {
        display: none;
    }
    .task-view .task-view-box-wrapper {
    height: auto;
    }
}
@media only screen and (max-width: 700px) {
    .menu-wrapper {
       width: 80%;
    }    
    .header-top {
        display: flex;
        flex-direction: column-reverse;
    }
    
    
}