.k-ace-switch.ace-switch.small + span.lbl::before {
    font-size: 9px !important;
    width: 38px !important;
    height: 14px !important;
    line-height: 15px !important;
    text-indent: 26px !important;
    background: #bdbdbd !important;
    content: "" !important;
}

.k-ace-switch.ace-switch.small + span.lbl::after {
    width: 10px !important;
    height: 10px !important;
    background: #ececec !important;
    border: 10px solid #ececec !important;
    top: -3px !important;
    left: -2px !important;
}

.k-ace-switch.ace-switch.small:checked + span.lbl::before {
    background: #bdbdbd !important;
    content: "" !important;
}
.k-ace-switch.ace-switch.small:checked + span.lbl::after {
    left: 18px !important;
    background: #fa007e !important;
    border: 10px solid #fa007e !important;
}

.k-activity {
    background: white;
    display: flex;
    align-items: center;
    font-family: var(--krFontFamilyMain);
}

.logged-version .k-activity {
    background: #f9fafc !important;
}

.k-activity-advertising {
    position: relative;
    width: 370px;
    height: 100vh;
    background-image: url(/k-img/bg-left.png);
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.k-activity-advertising img.floating-unicorn {
    position: absolute;
    width: 25%;
}
.k-activity-advertising .advertising-text{
    margin: 0;
    text-align: center;
    color: white;
    box-sizing: border-box;
    padding: 20px;
}

.k-activity-advertising .advertising-text h1 {

    font-family: var(--krFontFamilyMain);
    font-size: 24px;
    line-height: 30px;
}

.k-activity-advertising .btn-outline-white {
    margin-top: 20px;
}

.k-activity-advertising .advertising-buttons{
    bottom: 125px;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 9;
}

.k-activity-advertising h1 {
    font-size: 18px;
}

.k-activity-content.has-advertising{
    width: calc(100% - 370px);
}

.k-activity-content {
    display: flex;
    align-items: center;
    overflow-y: auto;
    height: 100vh;
    position: relative;
}

@media screen and (max-width:767px) {
    .k-activity {
        display: block;
    }

    .k-activity-advertising {
        position: fixed;
        top:0;
        left: 0;
        z-index: 2;
        height: 107px;
        width: 100%;
        background-image: url(/k-img/bg-top.png);
        background-position: center bottom;
    }

    .k-activity-content.has-advertising{
        width: 100%;
        display: block;
        height: auto;
        padding-top: 107px;
    }

    .k-activity-advertising img.floating-unicorn:not(:nth-child(2)) {
        display: none;
    }

    .k-activity-advertising img.floating-unicorn:nth-child(2){
        top: 0 !important;
        right: 0 !important;
    }

    .k-activity-advertising .advertising-text h1 {
        display: none;
    }

    .k-activity-advertising .advertising-buttons {
        display: none;
    }

    .k-activity-advertising .btn-outline-white {
        display: none;
    }
}

.alert.alert-danger {
    color: white;
    background: var(--krRed);
    border-radius: 10px;
    font-family: var(--krFontFamilyMain);
}

.alert.alert-danger a{
    color: white;
    text-decoration: underline;
}
.main-container {

}
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
 background: inherit;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #cacaca;
border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
 background: rgba(#7636FF, 0.6);
}

/* BTNS */
.btn-important {
    border: 0;
    border-radius: 50px;
    background: var(--primary-gradient);
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    /* box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15); */
    font-family: var(--krFontFamilyMain);
    font-weight: 500;
    font-size: 16px;
    padding: 10px 20px;
    display: inline-block;
    text-align: center;
    text-shadow: none;
}

.btn-important.medium {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--krFontFamilyMain);
    padding: 10px 15px;
}

.btn-important.small {
    font-size: 12px;
    font-weight: 400;
    font-family: var(--krFontFamilyMain);
    padding: 0px 10px;
}

.btn-important.small img {
    height: 12px;
    vertical-align: text-top;
}

a.btn-important {
    color: white;
    text-decoration: none;
}

.btn-important i {
    margin-right: 5px;
}

a.btn-important-round {
    display: inline-block;
    color: white;
    background: #003FFF;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    text-align: center;
    line-height: 44px;
    font-size: 32px;
    font-weight: 400;
    font-family: var(--krFontFamilyMain);
    text-decoration: none;
}
.btn-important img {
    margin-left: 5px;
}

.btn-important-white {
    border: 0;
    border-radius: 50px;
    background: white;
    color: #003FFF;
    font-weight: bold;
    padding: 10px 20px;
}

a.btn-outline {
    color: black;
    text-decoration: none;
}

.btn-outline {
    border: 1px solid black;
    border-radius: 50px;
    background: none;
    padding-left: 20px;
    padding-right: 20px;
    color: black;
    font-size: 16px;
    padding: 10px 20px;
    font-weight: 400;
}

a.btn-outline-white {
    color: white;
    text-decoration: none;
}
.btn-outline-white {
    display: inline-block;
    border: 1px solid white;
    border-radius: 50px;
    background: none;
    padding: 10px 20px;
    color: white;
    box-shadow: none;
    font-weight: 400;
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
}
.btn-outline-blue {
    border: 1px solid #003FFF;
    border-radius: 50px;
    background: none;
    padding: 10px 20px;
    color: #003FFF;
    box-shadow: none;
    font-weight: 400;
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
    white-space: nowrap;
}

a.btn-outline-blue {
    color: #003FFF;
    text-decoration: none;
}
.btn-outline-blue:hover {
    text-decoration: none;
    color: #003FFF;
}
.btn-transparent {
    border: 0;
    background: none;
    display: inline-block;
    font-family: var(--krFontFamilyMain);
    color: black;
    text-decoration: none;
}

.btn-transparent i {
    margin-right: 5px;
}

.btn-download {
    height: 44px;
    border: 0;
    outline: 0;
    cursor: pointer;
    background: none;
    padding: 0;
    display: inline-block;
}

.btn-download img {
    height: 100%;
}




.btn-signup-avatar {
    position: relative;
    box-shadow: 0 1px 15px 0 rgba(46, 59, 80, 0.15);
    background: white;
    border: 0;
    width: 150px;
    height: 150px;
    font-family: var(--krFontFamilyMain);
    vertical-align: top;
    outline: 0;
    display: inline-block;
    padding-top: 20px;
    cursor: pointer;
}

.btn-signup-avatar-separator {
    display:inline-block;height: 150px;line-height:150px;
    padding: 0px 20px;font-family: var(--krFontFamilyMain); font-size: 14px;
}

.btn-signup-avatar input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.btn-signup-avatar#final-avatar img{
    border-radius: 30px;
    height: 60px;
    width: 60px;
}

.btn-signup-avatar p {
    padding-top: 20px;
    font-size: 16px;
}

.btn-signup-avatar strong {
    color: #8f63de;
}

.btn-back {
    color: #003FFF;
}

.btn-cover {
    background: white;
    border-radius: 5px;
    overflow: hidden;
    width: calc(100% - 20px);
    box-shadow: 0 1px 15px 0 rgba(46, 59, 80, 0.2);
    display: inline-block;
    position: relative;
    max-width: 350px;
}

a.btn-cover {
    text-decoration: none;
}

.btn-cover .btn-cover-header {
    position: relative;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.btn-cover-header h1 {
    display: inline-block;
    color: #003FFF;
    background: white;
    padding: 5px 15px;
    margin: 0;
    border-radius: 1000px;
}

.btn-cover-header h2 {
    color: white;
    font-family: var(--krFontFamilyMain);
    font-size: 16px;
    margin: 0;
    margin-top: 10px;
    text-decoration: none;
}

.btn-cover-header span {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: -15px;
    left: calc(50% - 15px);
    display: inline-block;
}

.btn-cover-header span img{
    width: 100%;
}

.btn-cover .btn-cover-content {
    padding: 20px;
    box-sizing: border-box;
}

.btn-cover .btn-cover-content p{
    opacity: 0.6;
    font-family: var(--krFontFamilyMain);
    font-size: 13px;
    font-weight: 500;
    color: #2e3b50;
}

.btn-dash {
    display: inline-block;
    border: 2px dashed #e6e3e5;
    font-family: var(--krFontFamilyMain);
    color: black;
    font-size: 16px;
    padding: 10px 20px;
    padding-right: 40px;
    text-decoration: none;
    position: relative;
}

a.btn-dash {
    text-decoration: none;
}

.btn-dash i {
    color: #adb2c0;
    margin: 10px;
}

.btn-dash span {
    color: #007dfb;
    position: absolute;
    right: 11px;
    top: -6px;
    font-size: 35px;
    font-family: var(--krFontFamilyMain);
}

.btn-dangerous {
    display: inline-block;
    text-decoration: none;
    background: #ff5746;
    color: white;
    padding: 5px 20px;
    font-family: var(--krFontFamilyMain);
    border: 0;
    border-radius: 5px;
    text-align: center;
    width: 100%;
}

.btn-picture {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    outline: 0;
    line-height: 100px;
    text-align: center;
    border: 0;
    background: none;
    padding: 0;
}



.btn-picture img{
    height: 100%;
    width: 100%;
    border-radius: 50px;
}

.btn-picture img.btn-icon {
    position: absolute;bottom: 0;    right: 0;   width: 30px;height: 30px;
}

.btn-picture ul li {
    line-height: 45px;
}

.k-modal .btn-group.btn-overlap {

}

.k-modal .btn-group.btn-overlap .btn {
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
    border: 0;
    background: #ebebf1 !important;
    border-bottom: 2px solid #ebebf1;
    color: #a2b0bb !important;
    border-radius: 0;
    box-shadow: none !important;
}

.k-modal .btn-group.btn-overlap .btn.active {
    color: #003FFF !important;
    border-bottom: 2px solid #003FFF;
    background: #ebebf1 !important;
}
.k-modal .btn-group.btn-overlap .btn.active::after {
    border: 0;
}

.btn-circle-cancel {
    background: #ff5644;
    border: 0;
    border-radius: 1000px;
    color: white;
    padding: 0;
    width: 25px;
    height: 25px;
    margin: auto;
}

.btn-circle-accept {
    background: #003FFF;
    border: 0;
    border-radius: 1000px;
    color: white;
    padding: 0;
    width: 25px;
    height: 25px;
    margin: auto;
}

@media screen and (min-width: 768px){
    .btn-back .btn-back-white-icon{
        display: none;
    }
}

@media screen and (max-width: 767px){
    .btn-important:not(.no-expand) {
        width: 100%;
    }

    a.btn-important-round {
        display: none;
    }

    .btn-signup-avatar-separator {
        display:block;
        width: 100%;
        height: 40px;
        line-height: 40px;
    }

    .btn-back {
        position: fixed;
        top: 23px;
        left: 5px;
        z-index: 4;
        color: white;
        height: 20px;
    }


    .btn-back .btn-back-black-icon{
        display: none;
    }
    .btn-dash {
        width: 100%;
    }

    .btn-dangerous {
        width: 100%;
    }
}

.btn-klassbook {
    font: 14px/1 var(--krFontFamilyMain);
    letter-spacing: -0.6px;
    border-radius: 20px;
    box-shadow: 0 2px 10px 0 rgba(31, 154, 255, 0.3);
    background: #1c7dce;
}

.btn-klassbook .icon {
    margin-right: 8px;
}

.btn-klassbook.medium {
    padding: 13px 16px;
}

.k-card-container {
    position: relative;
}

.k-card {
    text-align: center;
    width: calc(100% - 40px);
    max-width: 400px;
    margin: auto;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    /*box-shadow: 0 1px 15px 0 rgba(46, 59, 80, 0.1);*/
    border-radius: 10px;
}

.k-card img {
    margin-top: -75px;
    position: relative;
    height: 100px;
}

.k-card#card-oops {
    margin-top: 100px;
}

.k-card#card-oops img{
    height: 75px;

}



.k-card-title {
    font-family: var(--krFontFamilyMain);
    font-size: 20px;
};

.k-card-title strong{
    color: #885ee4;
    font-weight: normal;
}

.k-card-subtitle {
    font-family: var(--krFontFamilyMain);
    opacity: 0.5;
    font-size: 12px;
}

/* CARD-NOTIFICATION */

.k-card#card-notification {
    margin-top:100px;
    background: white;
    width: 500px;
    max-width: 500px;
    position: relative;
    z-index: 1;
    padding: 80px;
}

.k-card#card-notification img{
    height: 200px;
    margin-top: -100px;
}

.k-card-container .deco{
    position: absolute;
}

.k-card-container .deco-chat{
    width: 100px;
    height: 100px;
    top: -50px;
    left: calc(50% - 50px);
    z-index: 2;
}

.k-card-container .deco-circle{
    width: 280px;
    height: 280px;
    top: -140px;
    left: calc(50% - 140px);
    z-index: 1;
}

.k-card-container .deco-book{
    height: 84px;
    top: -84px;
    left: calc(50% - 230px);
}

.k-card-container .deco-earth{
    height: 112px;
    top: -112px;
    left: calc(50% + 120px);
}

.k-card-container .deco-unicorn-1{
    height: 175px;
    top: 0;
    left: calc(50% - 350px);
    z-index: 1;
}

.k-card-container .deco-unicorn-2{
    height: 175px;
    top: 71px;
    left: calc(50% + 210px);
    z-index: 1;
}

@media screen and (max-width: 767px){
    .k-card#card-notification {
        width: 100%;
        padding: 60px;
    }
    .k-card-container .deco-unicorn-1{
        z-index: 2;
        right: -75px;
        left: auto;
    }

    .k-card-container .deco-unicorn-2{
        z-index: 2;
        left: -75px;
    }
}

.k-chat-session {

    margin-top: -40px !important;
    margin-left: 300px !important;
    max-width: 100% !important;
    border: 0 !important;
    background: white;
}

.k-chat-session #chatsession_header {
    height: 100px;
    background: white;
    box-shadow: 0 1px 20px 0 rgba(46, 59, 80, 0.1);
    border: 0;
    z-index: 9;
    line-height: 110px;
    position: fixed;
    width: 100%;
}

.k-chat-session #chatsession_header a {
    display: block;
}

.k-chat-session #chatsession_header #chatsession_avatar {
    width:50px;
    height:50px;
    border-radius:1000px;
    overflow:hidden;
    position:relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
}

.k-chat-session #chatsession_header #chatsession_cover_title{
    color: #2e3b50;
    display: inline-block;
    font-family: var(--krFontFamilyMain);
    margin-left: 10px;
}

.k-chat-session #timeline_content {
    background: white;

    padding: 150px 50px 8px 50px !important;
    padding-bottom: 100px !important;
}

.k-chat-session .k-message>.pull-left{
    width: calc(100% - 50px);
}

.k-chat-session .k-message .message_left,
.k-chat-session .k-message .message_right {
    box-shadow: none;
    border-radius: 5px;
}

.k-chat-session .k-message .message_right {
    background: #003FFF;
    padding-top: 10px;
}

.k-chat-session .k-message .message_left {
    background: #f0f0f0;
}

.k-message .widget-main {
    padding: 6px 10px;
}

.k-message .timeline_post_name {
    color: #003FFF;
    font-family: var(--krFontFamilyMain);
}

.k-message .timeline_post_body_text {
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-message .timeline_post_time {
    font-size: 11px;
    color: rgba(0,0,0,0.3);
    padding: 6px 10px;
    padding-top: 0;
    font-weight: bold;
    font-family: var(--krFontFamilyMain);
}

.k-message .message_right .timeline_post_time{
    color: white;
}


.k-chat-input {
    bottom:0;
    position: fixed;
    width: calc(100% - 300px);
    margin:0;
    border: 0;
}

.k-chat-input ul.dropdown-menu {
    padding: 0;
    box-shadow: none;
    width: 100%;
}

.k-chat-input ul.dropdown-menu li span {
    margin: 5px;
    display: inline-block;
    width: 30px;
    text-align: center;
}

.k-chat-input ul.dropdown-menu li label {
    padding: 5px;
    padding-left: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    width: calc(100% - 40px);
    display: inline-block;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
    font-size: 12px;
    margin: 0;
    cursor: pointer;
}

.k-chat-input .attachment-button {
    padding: 0;
    background: none;
    outline: 0;
    border: 0;
    width: 44px;
    height: 44px;
    vertical-align: top;
}

.k-chat-input .attachment-button img {
    height: 100%;
}
.k-chat-input>.widget-body {
    padding-left: 10px;
    padding-right: 10px;
}

.k-chat-input textarea {
    width: 100%;
    border: 1px solid #d5d8dc;
    padding: 10px;
    padding-left: 15px;
    padding-right: 250px;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
    resize: none;
    /*box-sizing: border-box;*/
    min-height: 44px;
    max-height: 100px;
}

.k-chat-input .widget-toolbox {
    padding: 0;
    border: 0;
    background: white;
}

.k-chat-input button#chat-input-button {
    display: inline-block;
    width: 30px;
    height: 23px;
    position: absolute;
    bottom: 18px;
    right: 23px;
    background-image: url(/k-img/icons/send-msg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: 0;
    outline: 0;
    background-color: transparent;
}


.k-chat-input a#updatebutton, .k-chat-input button#cancelbutton {
    display: inline-block;
    height: 23px;
    position: absolute;
    bottom: 18px;
    right: 23px;
    border: 0;
    outline: 0;
    background-color: transparent;
}


.k-chat-input textarea::placeholder {
    color: #9e9e9e;
}

.k-chat-input .attachment-group {
    position: absolute;
    bottom: 13px;
    right: 60px;
    width: 202px;
}

.k-message .timeline_post_seen{
    font-size: 10px;
    color: rgba(0,0,0,0.5);
    font-family: var(--krFontFamilyMain);
}

.k-message .timeline_post_seen img{
    height: 10px;
    margin-left: 5px;
}

@media screen and (max-width: 767px) {
    .k-chat-session {
        margin-left: 0 !important;
    }

    .k-chat-input {
        bottom:0;
        position:fixed;
        width:100%;
    }

    .k-chat-session #timeline_content {
        height: calc(100% - 55px);
        padding: 8px 8px !important;
        padding-bottom: 60px !important;
        padding-top: 60px !important;
    }

    .k-chat-input textarea {
        width: calc( 100% - 50px);
        padding-right: 50px;
    }

}

#timeline-old-code {
    display: none !important;
}
.k-class-container {
    text-align: center;
}

.k-class {
    position: relative;
    display: inline-block;
    width: 352px;
    border: none;
    
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    min-height: 349px;
    margin: 20px;
    vertical-align: top;
    text-align: center;
}

.k-class .color-bar {
    position: absolute;
    content: "";
    display: block;
    background: #ffb53a;
    height: 10px;
    width: 100%;
    top: -10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    left: 0;
}

.k-class .media-left {
    position: relative;
    width: 100%;
    text-align: center;
    display: block;
}



.k-class .media-left .background-cover {
    width: 100px;
    display: inline-block;
    height: 100px;
    border-radius: 50px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.k-class .media-left .background-cover.background-cover-overlay {
    width:100px;
    height:100px;
    opacity:0.5;
    background:black;
    position:absolute;
    top: 0;
    left: calc(50% - 55px);
}

.k-class .media-left .background-cover-flag {
    width:50px;
    position:absolute;
    top: 41px;
    left: calc(50% - 30px);
}

.k-class .media-left .background-cover.circle-left-half {
    width: 50px;
    border-radius: 0;
    border-top-left-radius: 1000px;
    border-bottom-left-radius: 1000px;
}

.k-class .media-left .background-cover.circle-right-half {
    width: 50px;
    border-radius: 0;
    border-top-right-radius: 1000px;
    border-bottom-right-radius: 1000px;
}

.k-class .media-left .background-cover.circle-top-quarter {
    width: 50px;
    height: 50px;
    border-radius: 0;
    border-top-right-radius: 1000px;
}

.k-class .media-left .background-cover.circle-bottom-quarter {
    width: 50px;
    height: 50px;
    border-radius: 0;
    border-bottom-right-radius: 1000px;
}

.k-class .media-body {
    display: block;
    text-align: center;
}

.k-class h5 {
    font-family: var(--krFontFamilyMain);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.13;
    color: #2e3b50;
    margin-bottom: 0;
}

.k-class h5 a{
    color: #2e3b50;
}

.k-class h6 {
    font-size: 11px;
    line-height: 1.64;
    color: rgba(46, 59, 80, 0.3);
    margin-top: 0;
    font-family: var(--krFontFamilyMain);
    font-weight: 500;
}

.k-class p {
    font-family: var(--krFontFamilyMain);
    font-weight: 500;
    font-size: 13px;
    color: #003FFF;
}

.k-class button {
    width: 100%;
    font-family: var(--krFontFamilyMain);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: #2e3b50;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 0;
    border-top: 1px solid rgba(46, 59, 80, 0.06);
    background: white;
    padding-top: 20px;
    padding-bottom: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.k-class button:hover {
    color: white;
    background:#003FFF;
}

.k-class .pull-right {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* SMALL VERSION */

.k-class.small {
    width: 100%;
    margin: 0;
    text-align: left;
    min-height: 0;
    margin-bottom: 20px;
    max-width: 400px;
    border: 0 !important;
    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

.k-class.small .color-bar {
    height: 100%;
    width: 10px;
    top: 0px;
    border-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    left: -10px;
}

.k-class.small .media {
    margin-top: 0;
}

.k-class.small .media-left {
    width: 60px;
    display: inline-block;
}

.k-class.small .media-body {
    display: inline-block;
    text-align: left;
    margin-left: 10px;
    max-width: calc(100% - 80px);
}

.k-class.small button {
    display: none;
}

.k-class.small .media-left .background-cover {
    width: 50px !important;
    height: 50px !important;
    margin: 0;
}

/* Class-list-header */

.class-list-header {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    .k-class-container {
        box-sizing: border-box;
        padding: 10px;
        padding-left: 15px;
    }

    .k-class {
        width: 100%;
        margin: 0;
        text-align: left;
        min-height: 0;
        margin-bottom: 20px;
        max-width: 400px;
        border: 0 !important;
        border-bottom-right-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }

    .k-class .color-bar {
        height: 100%;
        width: 10px;
        top: 0px;
        border-radius: 0;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        left: -10px;
    }

    .k-class .media {
        margin-top: 0;
    }

    .k-class .media-left {
        width: 60px;
        display: inline-block;
    }

    .k-class .media-body {
        display: inline-block;
        text-align: left;
        margin-left: 10px;
        max-width: calc(100% - 80px);
    }

    .k-class button {
        display: none;
    }

    .k-class .media-left .background-cover {
        width: 50px !important;
        height: 50px !important;
        margin: 0;
    }

    .k-class .media-left .background-cover.background-cover-overlay {
        width:50px;
        height:50px;
        left: 0 !important;
    }

    .k-class .media-left .background-cover-flag {
        top: 0 !important;
    }

    .k-class .media-left .background-cover.circle-left-half {
        width: 25px !important;
        border-radius: 0;
        border-top-left-radius: 1000px;
        border-bottom-left-radius: 1000px;
    }

    .k-class .media-left .background-cover.circle-right-half {
        width: 25px !important;
        border-radius: 0;
        border-top-right-radius: 1000px;
        border-bottom-right-radius: 1000px;
    }

    .k-class .media-left .background-cover.circle-top-quarter {
        width: 25px !important;
        height: 25px !important;
        border-radius: 0;
        border-top-right-radius: 1000px;
    }

    .k-class .media-left .background-cover.circle-bottom-quarter {
        width: 25px !important;
        height: 25px !important;
        border-radius: 0;
        border-bottom-right-radius: 1000px;
    }

    .k-class .media-body h6{
        margin-bottom: 0;
    }

    .k-class .media-body h5{
        margin-bottom: 0;
    }

    .k-class .media-body p{
        margin-bottom: 0;
    }

    .k-class .pull-right {
        top:0;
        right:0;
    }
}

/* Ambassador */
#ambassador-button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0 8px;
    margin-top: 8px;
    margin-bottom: 20px;
    /* margin: 20px 0; */
    position: relative;
}
.ambassador-button {
    display: flex;
    flex-direction: row;
    max-width: 500px;
    height: 80px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: #003FFF;
    border-radius: 6px;
    position: relative;
    left: -3px;
}
.ambassador-button__icon-left {

}
.ambassador-button__messages {
  padding: 0 10px;

}
.ambassador-button__messages-h1 {
    font-family: var(--krFontFamilyMain);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    /* line-height: normal; */
    letter-spacing: -0.5px;
    color: #fff;
}
.ambassador-button__messages-h2 {
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    /* line-height: normal; */
    letter-spacing: -0.5px;
    color: #fff;
    opacity: 0.6;
}
.ambassador-button__icon-right {

}
.ambassador-button__icon-right img {
    position: relative;
    top: -5px;
    right: 1px;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.ambassador-button__separator {
    position: absolute;
    bottom: -15px;
}

.k-comments-list {

}

#comment_input {
    border: 0;
}

#list-comments {
    position: relative;
}

.k-comment {
    border-bottom: 0;
    padding:8px;
    background:#e9ecf1;
    margin-top: 3px;
    margin-bottom: 2px;
    text-align: left;
}
.k-comment-avatar img{
    border-radius: 100%;
    border: 0;
    width: 40px;
    margin: 0 5px;
}

.k-comment-author {
    font-family: var(--krFontFamilyMain);
    color: #1f91ff;
}

.k-comment-text {
    border: none;
    border-radius: 5px;
    padding: 10px 5px;
    display: inline-block;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
    color: #393939;
    background: white;
    max-width: 460px;
    word-break: break-word;
}

.k-comment-date {
    font-size: 10px;
    font-family: var(--krFontFamilyMain);
}

.k-comment-cta {
    width: 50px;
}

.k-comment-cta a.close{
    color: white;
    width: 20px;
    opacity: 1;
    height: 20px;
    border-radius: 1000px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.k-comment-input {
    position: fixed;
    bottom: 0;
    width: calc(100% - 7px);
}

.k-comment-disabled-comments-notification {
    text-align: center;
    font-family: var(--krFontFamilyMain);
    font-size: 15px;
    color: #F15B5B;
    position: absolute;
    width: 100%;
    border-top: 1px solid rgb(46, 59, 80, 0.06);
    padding-top: 15px;
    bottom: 12px;
}

@media (max-width: 767px) {
    .k-comment-disabled-comments-notification {
        padding-top: 6px;
        bottom: 0px;
    }
}

.k-comment-input #widcommentinput {
    background: white;
    border: 0;
    padding: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.k-comment-input #widcommentinput .input-group{
    padding: 5px
}

.k-comment-input #widcommentinput .input-btn-group{
    vertical-align: top;
}
.k-comment-input #widcommentinput .input-btn-group img{
    height: 45px;
    width: 45px;
    border: 0;
}

/*.k-comment-input textarea {
    width: 100%;
    border: 1px solid #d5d8dc;
    padding: 10px;
    padding-left: 15px;
    padding-right: 20px;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
    resize: none;
    max-height: 100px;

} */
.k-comment-input textarea::-webkit-scrollbar {
    background: transparent;
}

.k-comment-input textarea::-webkit-scrollbar-track {
    background: transparent;
}
.k-comment-input textarea::-webkit-scrollbar-thumb {
    background: transparent;
}
.k-comment-input textarea::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

.k-comment-input #widcommentinput .input-group button {
    background: none;
    padding: 0;
    border: 0;
    position: absolute;
    right: 10px;
    bottom: 16px;
}

.k-user-profile {
    padding: 20px;
    width: 100%;
    max-width: 500px;
    margin: auto;
    margin-bottom: 65px;
}

.k-user-profile .profile-info-row {
    display: block;
    position: relative;
}

.k-user-profile .profile-info-row .profile-info-name{
    text-align: left;
    width: 100%;
    border: 0;
    font-family: var(--krFontFamilyMain);
    color: black;
    font-weight: normal;
    font-size: 14px;
    font-family: var(--krFontFamilyMain);
    padding-left: 10px;
}
.k-user-profile .profile-info-row .profile-info-value{
    border: 0;
    display: block;
}

.k-user-profile h2 {
    font-size: 25px;
    color: #2e3b50;
    font-family: var(--krFontFamilyMain);
    margin: 5px;
    text-align: center;
}

.k-user-profile h2 strong{
    color: #8f63de;
    font-weight: normal;
}
.k-user-profile h3 {
    color: #2e3b50;
    font-size: 14px;
    opacity: 0.6;
    line-height: 20px;
    font-family: var(--krFontFamilyMain);
    text-align: center;
}

.k-user-profile .btn-transparent {
    margin-right: 20px;
}

.user-profile-footer {
    margin-top: 40px;
}

.k-user-profile .profile-picture{
    position: relative;
    padding: 0;
    border: 0;
    width: 100%;
    box-shadow: none;
}
.k-user-profile .profile-picture .img-responsive{
    width: 100%;
    max-width: 100%;
}

.school-result-item {
    border: 0;
    border-bottom: 1px solid lightgrey;
    background: none;
    outline: 0;
    width: 100%;
    padding: 10px;
    display: flex;
}

.school-result-item.selected {
    background: #003FFF;
    border-radius: 5px;
}

.school-result-item .school-icon {
    width: 50px;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    height: 40px;
}

.school-result-item .school-icon img {
    height: 100%;
}

.school-result-item .school-info {
    width: calc(100% - 50px);
    position: relative;
    text-align: left;
}

.school-result-item .school-info p{
    margin: 0;
    font-family: var(--krFontFamilyMain);
    color: black;
    font-size: 16px;
    padding-right:  50px;
}

.school-result-item#school-resulit-item-add .school-info p{
    color: #003FFF !important;
}

.school-result-item.selected .school-info p{
    color: white !important;
}

.school-result-item .school-info p:nth-child(2){
    font-size: 12px;
    color: rgba(0,0,0,0.5);
}

.school-result-item .school-info img{
    position: absolute;
    width: 30px;
    height: 30px;
    right: 10px;
    top: 10px;
}

@media screen and (max-width: 767px){
    .create-step {
        padding-bottom: 60px;
    }
}

.k-document-thumbnail {
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;
    border: 0;
    box-shadow: 0px 3px 8px 2px rgba(0,0,0,0.2);
    border-radius: 5px;
    background: white;
    margin-top: 10px;
    padding: 10px;
}

.k-document-thumbnail h6 {
    font-family: var(--krFontFamilyMain);
    color: black;
    margin: 0;
}

.k-document-thumbnail div {
    color: rgba(0,0,0,0.5);
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-event-card {
    text-align: center;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 20px;
    position: relative;
    margin-top: 170px;
    background: white;
}

.k-event-card .event-card-header span {
    display: inline-block;
    background: var(--krRed);
    color: white;
    border-radius: 5px;
    font-size: 14px;
    width: 50px;
    position: absolute;
    top: -25px;
    left: calc(50% - 25px);
}

.k-event-card .event-card-content {
    text-align: left;
    margin-top: 30px;
}

.k-event-card .event-card-header h1 {
    font-size: 20px;
    margin-bottom: 5px;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-event-card .event-card-header h2 {
    font-size: 12px;
    color: #003FFF;
    margin-top: 0;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-event-card .homework-date {
    color: darkgray;
    font-family: var(--krFontFamilyMain);
}

.k-event-card .homework-assignement {
    color: grey;
    font-family: var(--krFontFamilyMain);
}
.k-event-thumbnail {
    margin:16px;
    cursor: pointer;
    border: 0;
    box-shadow: 0px 3px 8px 2px rgba(0,0,0,0.2);
    background: white;
    overflow: hidden;
    border-radius: 5px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.k-event-thumbnail .timeline_post_url_photo img {
    width: 100%;
    height: 340px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.k-event-thumbnail .timeline_post_url_content {
    padding: 10px;
}

.k-event-thumbnail table {
    width: 100%;
}

.k-event-thumbnail tr td.event-left {
    width:70px;
    text-align:center;
}

.k-event-thumbnail tr td.event-left span {
    background: var(--krRed);
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    color: white;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-event-thumbnail tr td.event-center .event-date {
    font-family: var(--krFontFamilyMain);
    font-size: 10px;
    font-weight: bold;
    color: #003FFF;
}

.k-event-thumbnail tr td.event-center .event-title {
    color: black;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-event-thumbnail tr td.event-center .event-location {
    font-family: var(--krFontFamilyMain);
    font-size: 10px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
}

.k-event-thumbnail tr td.event-right {
    width: 35px;
    text-align:center;
}

.k-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 50px;
    display: flex;
}
.k-footer .k-footer-lang {
    width: 370px;
    padding-left: 20px;
}

.k-footer .k-footer-legal {
    width: calc(100% - 390px);
    margin-right: 20px;
    font-family: var(--krFontFamilyMain);
    color: #2e3b50;
    font-size: 13px;
    padding-top: 5px;
    background: white;
}

.k-footer .k-footer-legal a {
    color: rgba(0,0,0,0.5);
}
.k-footer .k-footer-lang {
    background: none;
    border: 0;
    color: white;
    font-family: var(--krFontFamilyMain);
    font-size: 16px;
}

.k-footer .k-footer-lang img {
    width: 30px;
    vertical-align: middle;
    margin-right: 5px;
}

.k-footer .k-footer-lang span {
    opacity: 0.5;
}

.k-footer .k-footer-lang a {
    text-decoration: none;
    color: white;
}

.k-footer .k-footer-lang span.active {
    font-weight: bold;
    opacity: 1;
}

@media screen and (max-width:767px) {
    .k-footer {
        position: relative;
        text-align: center;
        height: 200px;
    	flex-direction: column;
    	justify-content: space-evenly;
    }

    .k-footer .k-footer-lang {
        padding: 0;
        width: auto;
    }

    .k-footer .k-footer-lang a {
        color: black;
    }

    .k-footer .k-footer-legal {
        width: 100%
    }
}

.k-form h1 {
    font-size: 14px;
    color: #2e3b50;
    opacity: 0.3;
    font-family: var(--krFontFamilyMain);
    margin: 5px;
}
.k-form h2 {
    font-size: 25px;
    color: #2e3b50;
    font-family: var(--krFontFamilyMain);
    margin: 5px;
}
.k-form h3 {
    color: #2e3b50;
    font-size: 14px;
    opacity: 0.6;
    line-height: 28px;
    font-family: var(--krFontFamilyMain);
}

.k-form form {
    margin-top: 20px;
}

.k-form .settings-tab {
    border-radius: 5px;
    background: white;
    box-shadow: 0 1px 15px 0 rgba(46, 59, 80, 0.1);
    padding: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.k-form .settings-tab h2 {
    text-align: left;
    color: #00b7ce;
    margin-bottom: 40px;
}

.settings-sidebar {
    margin-bottom: 20px;
    padding-top:28px;
    position: fixed;
    left: 20px;
    top: 65px;
    width: 20%;
    text-align: center;
    overflow-y: auto;
    max-height: calc(100vh - 88px);
}

.settings-sidebar .profile-picture {
    border-radius: 1000px;
    background: none;
    width: 150px !important;
    height: 150px !important;
    vertical-align:top;
    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.1) !important;
    border: solid 5px #ffffff !important;
}
.settings-sidebar .profile-picture img{
    border-radius: 1000px;
    height: 140px !important;
    width: 140px !important;
}

.settings-sidebar-buttons button {
    border: 0;
    background: none;
    color: #2e3b50;
    border-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left:64px;
    padding-right:64px;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
    text-align:left;
    font-size: 16px;
    width: 100%;
    outline: 0;
}

.settings-sidebar-buttons button.red {
    color:var(--krRed);
}

.settings-sidebar-buttons button.active {
    background: rgba(31, 154, 255, 0.1);
    color: #003FFF;
}

.settings-sidebar-buttons button:hover {
    background: rgba(0, 0, 0, 0.1);

}

@media screen and (max-width: 767px) {
    .k-form .settings-tab {
        padding: 10px;
        margin-bottom: 60px;
    }

    .settings-sidebar {
        width: 100%;
        top: unset;
        left: unset;
        position: relative;
        margin-top: -45px;
        padding-top: 45px;
        overflow-y: none;
        max-height: unset;
    }

    .settings-sidebar-buttons {
        padding-bottom: 40px;
    }

    .settings-sidebar-buttons button {
        text-align: center;
    }
}

.k-homework-card {
    text-align: center;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 20px;
    position: relative;
    margin-top: 40px;
}

.k-homework-card .homework-card-header span {
    display: inline-block;
    background: var(--krRed);
    color: white;
    border-radius: 5px;
    font-size: 14px;
    width: 50px;
    position: absolute;
    top: -25px;
    left: calc(50% - 25px);
}

.k-homework-card .homework-card-content {
    text-align: left;
    margin-top: 30px;
}

.k-homework-card .homework-card-header h1 {
    font-size: 20px;
    margin-bottom: 5px;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-homework-card .homework-card-header h2 {
    font-size: 12px;
    color: #003FFF;
    margin-top: 0;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-homework-card .homework-date {
    color: darkgray;
    font-family: var(--krFontFamilyMain);
}

.k-homework-card .homework-assignement {
    color: grey;
    font-family: var(--krFontFamilyMain);
    white-space: pre-wrap;
}
.k-homework-thumbnail {
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;
    border: 0;
    box-shadow: 0px 3px 8px 2px rgba(0,0,0,0.2);
    border-radius: 5px;
    background: white;
    margin-top: 10px;
    padding: 10px;
}

.k-homework-thumbnail h6 {
    font-family: var(--krFontFamilyMain);
    color: black;
    margin: 0;
}

.k-homework-thumbnail div {
    color: rgba(0,0,0,0.5);
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}


input.date-picker.form-control[readonly], input.hasdatepicker.form-control[readonly] {
    background-color: #fff !important;
    opacity: 1;
    cursor: pointer;
}

.form-group select {
    position: relative;
    height: 44px;
    border-radius: 22px !important;
    color: black;
    /*-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;*/
}
/*
.form-group select.form-control::after{
    content: "";
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    background: red;
    top: 5px;
    right: 5px;
}
*/
form fieldset .form-group p{
    margin-bottom: 0;
    padding-left: 5px;
    font-family: var(--krFontFamilyMain);
}

form fieldset .form-group label {
}

form fieldset .form-group a.input-link {
    float: right;
}

.hidden-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.k-select {
    position: relative;
}
.k-select select {
    background: #fff;
    color: black;
    -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
    -moz-appearance: none;
    -webkit-box-shadow: none !important;
    -webkit-border-radius: 22px !important;
    -moz-border-radius: 22px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(46, 59, 80, 0.2);
    padding: 5px 4px 6px;
    padding-left: 15px;
    font-size: 14px;
    font-family: inherit;
    outline:none; /* remove focus ring from Webkit */
    box-shadow: none !important;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    height: 44px;
    cursor: pointer;
    width: 100%;
}

.k-select select::-ms-expand {
    display: none;
}

/* Since we removed the default focus styles, we have to add our own */
.k-select select:focus {

}

/* Select arrow styling */
.k-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 90%;
    line-height: 44px;
    color: #555;
    pointer-events:none;
    padding:2px 25px;
}
.k-invite-thumbnail {
    display: flex;
    padding: 10px;
    border-radius: 10px;
    background: white;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

.k-invite-thumbnail .invite-thumbnail-text {
    width: calc(100% - 34px);
    padding: 10px;
    text-align: left;
    color: #003FFF;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-invite-thumbnail .invite-thumbnail-text small:not(.msg-time) {
    color: rgba(0,0,0,0.7);
    font-style: italic;
}

.k-invite-thumbnail .invite-thumbnail-text small.msg-time {
    color: rgba(0,0,0,0.5);
    float: right;
}

.k-invite-thumbnail .invite-thumbnail-cta {
    width: 30px;
    display: flex;
}
#join-form {
  display: none !important;
}
#block-join-type {
    text-align: center;
}

#block-join-type .btn-important {
    min-width: 250px;
}

.block-join h1 {
    font-family: var(--krFontFamilyMain);
    margin-bottom: 5px;
}

.block-join h1 strong{
    font-weight: 400;
    color: #8f63de;
}

.block-join {
    max-width: 500px;
    margin: auto;
    padding: 20px;
}

.block-join .btn-transparent {
    margin-right: 20px;
}

.block-join-form {
    margin-top: 40px;
}

.block-join-form h2 {
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
    margin-bottom: 20px;
    color: rgba(0,0,0,0.4);
}

.block-join-form .field-form-join:nth-child(1) {
    margin-top: 0px;
}

.field-form-join {
    margin-top: 20px;
    position: relative;
}

.field-form-join input[type="checkbox"].ace {
    top: 10px;
    width: 23px;
    height: 23px;
}

.field-form-join input[type=checkbox].ace + .lbl::before, input[type=radio].ace + .lbl::before {
    height: 25px;
    width: 25px;
    border-radius: 13px;
    line-height: 25px;
    border: 2px solid #a5a6aa;
    background: none;
}

.field-form-join input[type=checkbox].ace:checked + .lbl::before, input[type=radio].ace:checked + .lbl::before {
    display: inline-block;
    content: '\f00c';
    color: white;
    background-color: #007dfb;
    border: 2px solid #007dfb;
    border-color: #adb8c0;
    border: 0;

}

.footer-join {
    margin-top: 20px;
}

.list-student-item {
    position: relative;
    width: 100%;
    margin-bottom: 5px;
}

.list-student-item span {
    width: 100%;
}

.list-student-item a {
    position: absolute;
    top: 14px;
    right: 5px;
    font-family: var(--krFontFamilyMain);
}

.list-student-item img{
    height: 50px;
    width: 50px;
    border-radius: 50px;
    margin-left: 5px;
    margin-right: 5px;
}
.k-login-form {
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 40px;
}

.k-form h2 strong{
    color: #8f63de;
    font-weight: normal;
}

@media (min-width:1200px)  {
    .k-login-form {
      width: 100%;
      max-width: 600px;
    }
}

@media (min-width: 992px) and (max-width:1199px)  {
    .k-login-form {
      width: 100%;
      max-width: 500px;
    }
}

@media screen and (max-width:991px) {
    .k-login-form {
	    width: 100%;
	    max-width: 400px;
	    margin: auto;
	    padding-top: 10px;
	    padding-bottom: 0;
	}

}

body, html {
    background: white !important;
}

body::-webkit-scrollbar {
  width: 7px;
  height: 4px;
}

.logged-version {
    background: #f9fafc !important;
}

#main-container {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin-top: 0 !important;
    min-height: 100%;
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;
}


#main-container .main-content {
    width: 100%;
    padding-top: 60px;
    box-sizing: border-box;
}

#containerapp {
   /*padding-bottom: 80px;*/
   padding-bottom: 0;
}

.page-content {
    height: 100%;
    background: #f9fafc !important;
    padding: 0 !important;
}

.avatarPrime {
	border: 4px solid #FF9804;
}

.krBlue {
	color: #7636FF !important;
}
.krBlue.noLink {
	cursor: default !important;
}
.krYellow {
	color: #FFA800 !important;
}
.krTurquoise {
	color: #00b7ce !important;
}
.krPurple {
	color: #8f63de !important;
}
.krRed {
	color: #E8283C !important;
}
.krOrange {
	color: #ff9200 !important;
}
.krBrown {
	color: #8b572a !important;
}
.krIndigo {
	color: #3740c7 !important;
}
.krSubtitle {
	color: #828996 !important;
}
.krText {
	color: #000000 !important;
  opacity: 0.85;
}
.krNeonGreen {
	color: #46e297 !important;
}

.krNeonGreen-bg {
	background: #46e297 !important;
	color: white;
}

.krGreen {
	color: #18E16A !important;
}

.krGreen-bg {
	background: #18E16A !important;
	color: white;
}

.krPrimaryGradient-bg {
    background: var(--primary-gradient) !important;
    color: white;
}

.krPrimary-bg {
    /* background: var(--primary-color) !important; */
    background: var(--primary-gradient) !important;
    color: white;
}

.krBlue-bg {
	/* background: #003FFF !important; */
    background: var(--primary-gradient) !important;
    color: white;
}
.krYellow-bg {
	background: #FFA800 !important;
	color: white;
}
.krTurquoise-bg {
	background: #00b7ce !important;
	color: white;
}
.krPurple-bg {
	background: #8f63de !important;
	color: white;
}
.krRed-bg {
	background: #E8283C !important;
	color: white;
}
.krOrange-bg {
	background: #ff9200 !important;
	color: white;
}
.krBrown-bg {
	background: #8b572a !important;
	color: white;
}
.krIndigo-bg {
	background: #3740c7 !important;
	color: white;
}
.krSubtitle-bg {
	background: #828996 !important;
	color: white;
}
.krTransparentRed-bg {
  background: transparent !important;
  color: #E8283C;
}
.krTransparentRed {
  background: transparent !important;
}
.krWhite-bg {
  background: #fff !important;
  color: var(--primary-color,#7636FF) !important;
}
.krGray-bg {
    background: #463AF3 !important;
    color: #000000 !important;
}
.krIndigo-bg {
    background: #463AF3 !important;
    color: white;
}
.krSweetIndigo-bg {
    background: #E3E1FD !important;
    color: #463AF3 !important;
}
/* subject colors */
.krLightRed {
    color: #ff6661 !important;
    background: #fff;
}
.krLightRed-bg {
    background: #ff6661 !important;
    color: #fff;
}
.krMediumRed {
    color: #fa3c3a !important;
    background: #fff;
}
.krMediumRed-bg {
    color: #fff;
    background: #fa3c3a !important;
}
.krDarkRed {
    color: #710b15 !important;
    background: #fff;
}
.krDarkRed-bg {
    color: #fff;
    background: #710b15 !important;
}
.krLightPeach {
    color: #ff8f56 !important;
    background: #fff;
}
.krLightPeach-bg {
    color: #fff;
    background: #ff8f56 !important;
}
.krMediumPeach {
    color: #fd6d23 !important;
    background: #fff;
}
.krMediumPeach-bg {
    color: #fff;
    background: #fd6d23 !important;
}
.krDarkPeach {
    color: #9d2200 !important;
    background: #fff;
}
.krDarkPeach-bg {
    color: #fff;
    background: #9d2200 !important;
}
.krLightOrange {
    color: #ffb750 !important;
    background: #fff;
}
.krLightOrange-bg {
    color: #fff;
    background: #ffb750 !important;
}
.krMediumOrange {
    color: #fd9e19 !important;
    background: #fff;
}
.krMediumOrange-bg {
    color: #fff;
    background: #fd9e19 !important;
}
.krDarkOrange {
    color: #a84501 !important;
    background: #fff;
}
.krDarkOrange-bg {
    color: #fff;
    background: #a84501 !important;
}
.krLightYellow {
    color: #ffce4d !important;
    background: #fff;
}
.krLightYellow-bg {
    color: #fff;
    background: #ffce4d !important;
}
.krMediumYellow {
    color: #fcba16 !important;
    background: #fff;
}
.krMediumYellow-bg {
    color: #fff;
    background: #fcba16 !important;
}
.krDarkYellow {
    color: #bc6900 !important;
    background: #fff;
}
.krDarkYellow-bg {
    color: #fff;
    background: #bc6900 !important;
}
.krLightYellowgreen {
    color: #c5e746 !important;
    background: #fff;
}
.krLightYellowgreen-bg {
    color: #fff;
    background: #c5e746 !important;
}
.krMediumYellowgreen {
    color: #8dbd00 !important;
    background: #fff;
}
.krMediumYellowgreen-bg {
    color: #fff;
    background: #8dbd00 !important;
}
.krDarkYellowgreen {
    color: #4b7100 !important;
    background: #fff;
}
.krDarkYellowgreen-bg {
    color: #fff;
    background: #4b7100 !important;
}
.krLightGreen {
    color: #83d64d !important;
    background: #fff;
}
.krLightGreen-bg {
    color: #fff;
    background: #83d64d !important;
}
.krMediumGreen {
    color: #43aa0d !important;
    background: #fff;
}
.krMediumGreen-bg {
    color: #fff;
    background: #43aa0d !important;
}
.krDarkGreen {
    color: #053700 !important;
    background: #fff;
}
.krDarkGreen-bg {
    color: #fff;
    background: #053700 !important;
}
.krLightTurquoise {
    color: #3cd6d3 !important;
    background: #fff;
}
.krLightTurquoise-bg {
    color: #fff;
    background: #3cd6d3 !important;
}
.krMediumTurquoise {
    color: #00a6ac !important;
    background: #fff;
}
.krMediumTurquoise-bg {
    color: #fff;
    background: #00a6ac !important;
}
.krDarkTurquoise {
    color: #002e36 !important;
    background: #fff;
}
.krDarkTurquoise-bg {
    color: #fff;
    background: #002e36 !important;
}
.krLightBlue {
    color: #4db9ff !important;
    background: #fff;
}
.krLightBlue-bg {
    color: #fff;
    background: #4db9ff !important;
}
.krMediumBlue {
    color: #0084e1 !important;
    background: #fff;
}
.krMediumBlue-bg {
    color: #fff;
    background: #0084e1 !important;
}
.krDarkBlue {
    color: #003779 !important;
    background: #fff;
}
.krDarkBlue-bg {
    color: #fff;
    background: #003779 !important;
}
.krLightNavy {
    color: #6b95f9 !important;
    background: #fff;
}
.krLightNavy-bg {
    color: #fff;
    background: #6b95f9 !important;
}
.krMediumNavy {
    color: #2652cf !important;
    background: #fff;
}
.krMediumNavy-bg {
    color: #fff;
    background: #2652cf !important;
}
.krDarkNavy {
    color: #031265 !important;
    background: #fff;
}
.krDarkNavy-bg {
    color: #fff;
    background: #031265 !important;
}
.krLightPurple {
    color: #a470e5 !important;
    background: #fff;
}
.krLightPurple-bg {
    color: #fff;
    background: #a470e5 !important;
}
.krMediumPurple {
    color: #6736ba !important;
    background: #fff;
}
.krMediumPurple-bg {
    color: #fff;
    background: #6736ba !important;
}
.krDarkPurple {
    color: #170a48 !important;
    background: #fff;
}
.krDarkPurple-bg {
    color: #fff;
    background: #170a48 !important;
}
.krLightLilac {
    color: #fb75b9 !important;
    background: #fff;
}
.krLightLilac-bg {
    color: #fff;
    background: #fb75b9 !important;
}
.krMediumLilac {
    color: #d13991 !important;
    background: #fff;
}
.krMediumLilac-bg {
    color: #fff;
    background: #d13991 !important;
}
.krDarkLilac {
    color: #661049 !important;
    background: #fff;
}
.krDarkLilac-bg {
    color: #fff;
    background: #661049 !important;
}



.krBackground {
  color:var(--krBackground, #F0F2F6)!important;
}

.krBackground-bg {
	background: var(--krBackground, #F0F2F6)!important;
  position: relative;
}


/* NOT FOUND */
#not-found-activity {
    display: flex;
    align-items: center;
    width: 100%;

}
#not-found-activity .not-found-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
#not-found-activity .not-found-background img {
    position: absolute;
}
#not-found-activity .not-found-page {
    position: relative;
    margin: auto;
    text-align: center;
    box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    padding: 50px;
    background: white;
}
#not-found-activity .not-found-page h1 {
    color: var(--primary-color,#7636FF);
    font-family: var(--krFontFamilyMain);
    font-size: 75px;
    margin: 5px;
}
#not-found-activity .not-found-page h2 {
    color: #00b7ce;
    font-family: var(--krFontFamilyMain);
    font-size: 30px;
    margin: 5px;
}
#not-found-activity .not-found-page p {
    color: #2e3b50;
    font-family: var(--krFontFamilyMain);
    font-size: 20px;
    margin: 5px;
}
#not-found-activity .not-found-page strong {
    color: var(--primary-color,#7636FF);
    font-family: var(--krFontFamilyMain);
    font-size: 20px;
    margin: 5px;
    font-weight: normal;
}
#not-found-activity .not-found-page .btn-important {
    padding: 10px 20px;
    text-decoration: none;
    font-weight: normal;
    font-family: var(--krFontFamilyMain);
    margin-top: 20px;
    display: inline-block;
}

span.icon {
  display: inline-block !important;
  padding: 0 5px;
  vertical-align: middle;
}

.floating {
    position: absolute;
}
.floating.f-bottom-right {
    height: 300px;
    bottom: -230px;
    right: -90px;
}
.floating.f-bottom-left {
    height: 200px;
    bottom: -80px;
    left: -140px;
}
.floating.f-top-right {
    height: 100px;
    top: -50px;
    right: -50px;
}
.floating.f-top-middle {
    height: 100px;
    top: -83px;
    left: calc(50% - 50px);
}
.floating.f-left {
    height: 20px;
    bottom: 100px;
    left: -10px;
}
.floating.f-right {
    height: 20px;
    bottom: 150px;
    right: -10px;
}
.floating.f-bottom {
    height: 20px;
    bottom: -10px;
    right: 100px;
}
.floating.f-middle {
    height: 10px;
    top: 100px;
    left: 50px;
}

.icon_app{
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    text-align: center;
    word-break: break-word;

    width: 100%;
    height: 40px;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
    color: black;
    font-size: 16px;
    text-align: left;
    margin: 10px;
}
.icon_app .icon{
    margin-right: 10px;
    font-size: 30px;
}

.icon_app img {
    height: 40px;
    margin-right: 10px;
}
.dropdown-menu {
    z-index: 991 !important;
}
#modal_loader {
    height: 40px;
}
#listmembers {
    min-height: 75px;
}
#listmembers .no-students {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    min-height: 75px;
    padding-bottom: 0;
    margin-bottom: 0;
    align-items: center;
    justify-content: center;
}
.go-back-arrow-link-album,
.go-back-arrow-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    color: #2d3a53;
}
.go-back-arrow-link-album b,
.go-back-arrow-link b{
    color: var(--primary-color,#7636FF);
    margin-left: 5px;
}
.left-menu-block__icon {
    font-size: 30px;
    color: #c0c4ca;
    display: inline-flex;
    margin-right: 5px;
}
.attachments-mobile-menu {
    z-index: 1000 !important;
}
@media screen and (min-width: 768px){
    .hide-desktop {
        display: none !important;
    }
}
@media screen and (max-width: 767px){
    .hide-mobile {
        display: none !important;
    }
}

.k-navbar-visitor {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 64px;
    display: flex;
    font-family: var(--krFontFamilyMain);
}

.k-navbar-visitor .navbar-brand {

    height: 110px;

    box-sizing: border-box;
    padding: 10px;
}

.k-navbar-visitor .navbar-brand img {
    height: 100%;
    display: inline-block;
}

.k-navbar-visitor .navbar-content{
    width: 100%;
    background: transparent;
    margin-right: 20px;
    height: 100%;
    text-align: right;
    box-sizing: border-box;
    padding: 20px;
    color: rgba(46, 59, 80, 0.6);
    font-weight: 600;
    padding-left: 0;
    padding-right: 0;
}

.k-navbar-visitor .navbar-content a {
    margin-left: 20px;
}

@media screen and (max-width:767px) {

    .k-navbar-visitor {
        position: fixed;
        z-index: 3;
    }
    .k-navbar-visitor .navbar-brand {
        width: 100%;
        text-align: center;
        height: 80px;
    }

    .k-navbar-visitor .navbar-content{
        display: none !important;
    }
}

.k-page-tabs {
    text-align: center;
    font-family: var(--krFontFamilyMain);
}

.k-page-tab {
    background: none;
    border: 0;
    color: grey;
    outline: 0;
}
.k-page-tab.active {
    border-bottom: 2px solid #885ee4;
    color: #885ee4;
}
.k-photo-gallery {
    text-align: center;
}

.k-photo-gallery img,
.k-photo-gallery video{
    width: 75px;
    height: 75px;
    margin: 10px;
    background: rgba(0,0,0,0.1);
}
@media (max-width: 767px) {

}

.user-join-create-choice-popup {
    box-sizing: border-box;
    padding: 40px;
    text-align: center;
}
@media (max-width: 400px) {
    .user-join-create-choice-popup {
        padding: 0;
        padding-top: 46px;
    }
  }

.k-modal a[action="close"] {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 16px;
    color: rgba(0,0,0,0.3);
}

.popup-float-cover {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0px;
    z-index: 0;
    height: 211px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*style old modal headers (Jira KW-67)*/

.k-modal .modal-header {
    height: 64px;
    display: flex;
    align-items: center;
}

#filterModal .modal-header,
#appointmentsModal .modal-header,
#commentsModal .modal-header,
#eventsModal .modal-header,
#membersModal .modal-header{
    flex-direction: column;
    height: auto;
}
#filterModal .close,
#appointmentsModal .close,
#commentsModal .close,
#eventsModal .close,
#membersModal .close{
    top: 15px;
    left: 15px;
}


.k-modal .modal-header .close {
    margin-top: 0 !important;
    color: #000000;
    position: absolute;
    opacity: 1;
    z-index: 1;
    font-size: 20px;
    font-weight: 400;
}

.k-modal .modal-header h5 {
    color: #000000;

    width: 95%;
    text-align: center;
    font-size: 16px;
    font-family: var(--krFontFamilyMain);
}

.k-modal .modal-header:before {
    content: "";
    display: none;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: var(--primary-color,#003FFF);
}

@media screen and (max-width: 767px) {

    .user-join-success-popup {
        padding-top:50px !important;
    }

    .popup-float-cover {
        top: -35px;
    }
}

.k-post-input {
}

.k-post-input>.widget-body {
    border-radius: 5px;
}


.k-postinput {

}

.k-post-input .post-option {
    white-space: nowrap;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid #606b7b;
    color: #606b7b;
    padding:7px 3px;
    margin-right: 1px;
}

.k-post-input .post-option.small {
    padding: 3px;
}

.k-post-input textarea {
    width: 100%;
    border: none;
    padding: 10px;
    min-height: 150px;
    resize: none;
    color: black;
    font-family: var(--krFontFamilyMain);
    font-weight: 800;
    font-size: 16px;
    border-radius: 0 !important;
}

.k-post-input textarea::placeholder {
    color: rgba(0,0,0,0.3);
}

#postBar {
    margin: 0px 0 0 0;
    height:2px;
    overflow: hidden;
}



.post_input:not(.k-post-input) span.attachment_option {
    width: calc(20% - 4px);
    display: inline-block;
    text-align: center;
}

.post_input.k-post-input span.attachment_option {
    width: calc(10% - 10px);
    display: inline-block;
    text-align: center;
}

.post-input-toolbar.mobile-fixed span.attachment_option {
    width: calc(33% - 4px);
    display: inline-block;
    text-align: center;
}

.post_input.k-post-input span.attachment_option ul {
    padding: 0;
    box-shadow: none;
}

.post_input.k-post-input span.attachment_option ul li span {
    margin: 5px;
    display: inline-block;
    width: 30px;
    text-align: center;
}

.post_input.k-post-input span.attachment_option ul li label {
    padding: 5px;
    padding-left: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    width: calc(100% - 40px);
    display: inline-block;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
    font-size: 12px;
    margin: 0;
    cursor: pointer;
}

@media screen and (min-width: 768px){

    .post_input.k-post-input {
        border-radius: 5px;
        padding-top: 10px;
    }

    .post_input.k-post-input span.attachment_option ul.dropdown-menu{
        top: 100%;
        bottom: auto;
        margin-top: 1px;
        min-width: 200px;
    }

    .k-post-input .post-input-menu {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .background-cover#previewimage {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
}

@media screen and (max-width: 767px){
    .k-post-input {
        height: calc(100vh - 90px);
    }

    .post-input-toolbar {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
    }

    .post-input-toolbar.mobile-fixed {
        position: fixed;

    }

    .k-post-input textarea {
        height: calc(100vh - 200px);
    }

    .post_input.k-post-input span.attachment_option {
        width: calc(16.6% - 4px);
    }

    .post_input.k-post-input span.attachment_option ul{
        width: 100%;
    }

    .background-cover#previewimage {
        margin-top: -32px;
    }

}

.k-post {
    position: relative;
}

.k-post .post_separator{
      position: absolute;
      top: -17px;
      left: calc(50% - 7px);

}

.k-post.widget-box {
    margin: 21.5px -13px 3px;
    box-shadow: none ;
    background: white ;
    border-radius: 0px ;
    font-family: var(--krFontFamilyMain);
    border: 0 ;
}

.k-post .timeline_post_header {
    margin-bottom: 0px;
    padding: 20px 16px 12px;
}

.k-post .well {
    border: 1px solid #e9e9ef;
    outline: 0;
    box-shadow: none;
    border-radius: 10px;
    position: relative;
}

.k-post .well h6 {
    font-family: var(--krFontFamilyMain);
    color: black;
    margin-bottom: 0;
}

.k-post .color-bar {
    position: absolute;
    content: "";
    display: block;
    background: none ;
    height: 5px;
    width: 100%;
    top: -5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    left: 0;
    text-align: center;
}

.k-post .color-bar.message,
.k-post .color-bar.message > span {
    background: #8f63de;
}

.k-post .color-bar.list,
.k-post .color-bar.list > span {
    background: #ffb53a;
}

.k-post .color-bar.poll,
.k-post .color-bar.poll > span {
    background: var(--krRed);
}

.k-post .color-bar.media,
.k-post .color-bar.media > span {
    background: #ffb53a;
}

.k-post .color-bar.document,
.k-post .color-bar.document > span {
    background: #00b7ce;
}

.k-post .color-bar.event,
.k-post .color-bar.event > span {
    background: var(--krRed);
}

.k-post .color-bar.location,
.k-post .color-bar.location > span {
    background: #3740c7;
}

.k-post .color-bar.homework,
.k-post .color-bar.homework > span {
    background: #1f9aff;
}

/* Need to fill these ones */

.k-post .color-bar.absence,
.k-post .color-bar.absence span {
    background: var(--krRed);
}

.k-post .color-bar.lateness,
.k-post .color-bar.lateness span {
    background: #1f9aff;
}

.k-post .color-bar.care,
.k-post .color-bar.care span {
    background: #FFA800;
}

.k-post .color-bar.appointment,
.k-post .color-bar.appointment span {
    background: #3740c7;
}

.k-post .color-bar.question,
.k-post .color-bar.question span {
    background: #00b7ce;
}

.k-post .color-bar > span {
    height: 22px;
    background: #ffb53a;
    display: inline-block;
    font-family: var(--krFontFamilyMain);
    font-size: 12px;
    color: white;
    padding-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    border-radius: 5px;
    top: -6px;
    padding-bottom: 2.5px;
    left: calc(50% - 45px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: -0.6px;
    text-align: center;
    text-transform: uppercase;
}

.k-post .timeline_post_avatar img {

}

.k-post .timeline_reaction_details .icon-comments {
    color: #ffb53a;
    font-size: 16px;
    position: relative;
    top: 2px;
}

.k-post .timeline_reaction_details .timeline_reaction_details_text {
    color:#c0c4ca;
}

.k-post .timeline_post_info {
    max-width: calc(100% - 75px);
}

.k-post .timeline_post_info h5 {
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: -0.9px;
    color: #4a4a4a;
}

.timeline_post_footer_inside > .pull-right {
    position: relative;
    top: 11px;
}

.timeline_post_footer_inside > .pull-right img {
    position: relative;
    top: 1px;
}

.k-post .post-views-count {
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.38;

    font-family: var(--krFontFamilyMain);
    position: relative;

}

.k-post .timeline_post_time {
    font-family: var(--krFontFamilyMain);
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.17;
    letter-spacing: -0.4px;
    opacity: 0.5;
    color: #2e3b50;
}

.k-post .timeline_post_body {
    padding: 0 16px 10px;
}

.k-post .widget-main > .timeline_post_body_photo.clearfix {
    padding: 0 16px;
}

.k-post .timeline_post_body_text {
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.34;
    letter-spacing: -0.6px;
    color: #4a4a4a;
    word-break: break-word;
}

.k-post .timeline_post_body_text span {
    font-weight: normal;
}
.k-post .timeline_post_body_text b span{
  font-weight: 700!important;
}

.k-post .timeline_post_options {
    padding: 0;
    text-align: right;
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
}
.k-post .timeline_post_options .icon-pinned-message::before {
  justify-content: flex-end;
  margin-right: 27px;
  margin-bottom: -27px;
}

.k-post .timeline_post_options img, .k-post .timeline_post_options i{
    width: 21px;
    position: relative;
    bottom: 4px;
    right: 11px;
    float:right;
    display: inline-block;
}

.k-post .timeline_post_options  .popup-menu {
  float:right;
  display: inline-block;
}

.k-post .timeline_post_options a.dropdown-toggle {
    color: #b8b8b8;
    font-size: 20px;
}

.k-post .timeline_post_body_checklist {

    padding: 16px;
    box-sizing: border-box;

    color: #b8b8b8;
    font-weight: 400;
    font-family: var(--krFontFamilyMain);
    font-size: 13px;
}

.k-post .timeline_post_body_checklist p {
    font: 14px var(--krFontFamilyMain);
    border-bottom: 1px solid #b8b8b8;
    font-weight: bold;
    font-size: 16px;
    color:black;
}

.k-post .timeline_post_body_checklist ul {
    list-style-type: none;
    margin: 0;
}

.k-post .timeline_post_body_checklist ul li{
    margin-bottom: 10px;
}

.k-post .timeline_post_body_checklist ul li span{
    display: inline-block;
    background: #1f9aff;
    color: white;
    border-radius: 1000px;
    width: 22px;
    height: 22px;
    text-align: center;
    font-family: var(--krFontFamilyMain);
    margin-right: 6px;
    padding-top: 3px;
}

.k-post .timeline_post_body_poll {

    padding: 16px;
    box-sizing: border-box;
    color: #b8b8b8;
    font-weight: 400;
    font-family: var(--krFontFamilyMain);
    font-size: 13px;
}

.k-post .timeline_post_body_poll button {
    margin-bottom: 10px;
    padding: 5px;
    margin-bottom: 10px;
    padding: 8px;
    width: 100%;
    font-size: 12px;
}

.k-post .timeline_post_body_poll .body_poll_question {
    border-bottom: 1px solid #b8b8b8;
    font-weight: bold;
    font-size: 16px;
    color:black;
}

.k-post .timeline_post_body_poll .body_poll_date {
    text-align: center;
    font-size: 12px;
    margin: 0;
}

.k-post .timeline_post_body_poll .body_poll_anonymous {
    text-align: center;
    font-size: 12px;
    color: var(--krRed);
}
.k-post .timeline_post_body_poll .body_poll_result p{
    margin: 0;
}

.k-post .timeline_post_body_poll .body_poll_result .progress-bar{
    margin-top: 5px;
    margin-bottom: 10px;
}

.timeline_post_footer_inside a {
    color: #b8b8b8;
    font-family: var(--krFontFamilyMain);
    /* font-size: 11.3px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.38;
    letter-spacing: -0.33px; */
}

.k-progress-bar {
    width: 100%;
    height: 5px;
}

.k-inner-bar{
    height: 100%;
    min-width: 5px;
    border-radius: 1000px;
    background: #1f9aff;
}
/* Customize the label (the container) */
.k-radio {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 20px;
    margin-top: 5px;
    margin-right: 15px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: var(--krFontFamilyMain);
    line-height: 16px;
  }

  /* Hide the browser's default radio button */
  .k-radio input {
    position: absolute;
    opacity: 0;
  }

  .k-radio span {
    color: #2e3b50;
    opacity: 0.6;
  }

  /* Create a custom radio button */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
  }

  /* On mouse-over, add a grey background color */
  .k-radio:hover input ~ .checkmark {
    background-color: #ccc;
  }

  /* When the radio button is checked, add a blue background */
  .k-radio input:checked ~ .checkmark {
    background-color: white;
  }

.k-radio input:checked ~ span {
    display: inline-block;
    color: #2196F3;
    opacity: 1;
}

  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the indicator (dot/circle) when checked */
  .k-radio input:checked ~ .checkmark:after {
    display: block;
  }

  /* Style the indicator (dot/circle) */
  .k-radio .checkmark:after {
    top: 6px;
    left: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #2196F3;
  }
.k-reply-ticket {
    margin-top: 5px ;
}

.k-reply-ticket textarea{
    border-radius: 5px !important;
    width: 100% !important;
    resize: none !important;
}
.k-request-card {
    display: flex;
    padding: 10px;
    border-radius: 5px;
    background: white;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

.k-request-card .request-card-picture {
    width: 30px;
    display: flex;
}

.k-request-card .request-card-picture img {
    width: 30px;
    height: 30px;
    border-radius: 1000px;
    margin: auto;
}

.k-request-card .request-card-text {
    width: calc(100% - 63px);
    padding: 10px;
    text-align: left;
    color: #1f9aff;
    font-family: var(--krFontFamilyMain);
    font-weight: bold;
}

.k-request-card .request-card-text small:not(.msg-time) {
    color: rgba(0,0,0,0.7);
    font-style: italic;
}

.k-request-card .request-card-text small.msg-time {
    color: rgba(0,0,0,0.5);
}

.k-request-card .request-card-cta {
    width: 60px;
    display: flex;
}
.k-request-post {

}

.k-request-post .k-event-thumbnail{
  margin: 0;
  box-shadow: none;

}

.k-request-post .k-event-thumbnail .timeline_post_url_content{
  padding:0;
}

.k-post .timeline_post_info h5 {
    font: 14px var(--krFontFamilyMain);
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: -0.9px;
    color: #4a4a4a;
}

.k-request-post .timeline_post_url {
    padding: 10px;
    margin-top: 10px;
    background: white;
    /*box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.25);*/
    border-radius: 10px;
    border: 1px solid #e9e9ef;
    margin-bottom: 10px;
}
.k-request-post .timeline_post_url .media-right{
    padding-left: 10px;
    font-size: 10px;
    padding-top: 13px;
}
.k-request-post .timeline_post_url .media-right a,
.k-request-post .timeline_post_url .media-right a i{
    color: rgba(0,0,0,0.5);
}
.k-request-post .timeline_post_url .media-body small{
    font-size:  9px;
}

.k-request-post .timeline_post_url .media-body div:nth-child(1) {
    color: #1f9aff;
}
.k-request-post .timeline_post_url .media-body div:nth-child(2) {
    color: rgba(0,0,0,0.5);
}
.k-request-post .timeline_post_url .media-body div:nth-child(3) {
    color: black;
}

.k-requests-list {
    width: 100%;
    position: relative;
    max-width: 500px;
    margin:auto;
    padding: 10px;
}

#requests-container {
    margin-top: 20px;
    text-align: center;
}
#settings-tabs {
    width: 100%;
    max-width: 500px; 
    margin: auto;
}
@media (max-width: 1000px) and (min-width: 768px) {
    /* Rules for larger desktop screens only */
       .user-profile {
        position: relative;
      /*  left: 106px; */
        max-width: 500px;
       }
       .settings-sidebar {
            width: 200px;
       }
       #settings-tab-notifications {
           width: 600px;
           position: relative;
           left: -70px;
       }
}
@media (min-width: 1001px) {
    /* Rules for larger desktop screens only */
       .user-profile,
       #settings-tabs {
           max-width: 700px;
       }
       .user-profile {
        position: relative;
      /*  left: 156px;*/
       }
       .settings-sidebar {
            width: 300px;
       }
}

.k-settings-list{
width: 100%;
max-width: 500px;
margin: auto;
}

.k-settings-list ul{
    list-style-type: none;
    margin-left: 0;
    margin-bottom: 20px;
}

.k-settings-list li{
    border-top: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    border-left: 1px solid lightgrey;
    background: white;
    font-family: var(--krFontFamilyMain);
}
.k-settings-list ul li:last-child{
    border-bottom: 1px solid lightgrey;
}

.k-settings-list li a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px;
    color: black;
    text-decoration: none;
}
.k-settings-list li a img{
    height: 30px;
    border-radius: 3px;
    margin-left: 10px;
    margin-right: 10px;
}

.k-settings-list li a div{
    width: 75px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    color: lightgrey;
    text-align: right;
    line-height: 37px;
    padding-right: 10px;
}

.k-settings-list li a div i{
    font-size: 18px;
}

.k-settings-list header li a img {
    border-radius: 1000px;
    height: 50px;
}

.k-settings-list header li a {
    font-size: 18px;
}

.k-settings-list footer li a {
    padding: 5px;
    text-align: center;
    color: var(--krRed);
}
.k-splashscreen#loading-zone {
    position: fixed;
    width: 100vw;
    height: 100vh;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 501;
    background: white;
}
.k-tabnav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    color: #a9a9a9;
    border-top: 1px solid #dadadc;
    background: white;
    visibility: hidden;
    z-index: 501;
}

.k-tabnav ul {
    display: flex;
    list-style-type: none;
    margin-left: 0px;
}
.k-tabnav ul li{
    margin-top: 10px;
    width: 33%;
    text-align: center;
    position: relative;
}

.k-tabnav ul li .pill {
    position: absolute;
    /* width: 18px; */
    height: 18px;
    border-radius: 8.5px;
    background-color: var(--krRed);
    color: white;
    font-family: var(--krFontFamilyMain);
    top: -6px;
    left: calc(50% + 4px);
    line-height: 18px;
    text-align: center;
    font-size: 12px;
}


.k-tabnav ul li .badge {
    position: absolute;
    padding: 0 5px;
    height: 18px;
    border-radius: 8.5px;
    background-color: var(--krRed);
    color: white;
    font-family: var(--krFontFamilyMain);
    top: -6px;
    left: calc(50% + 4px);
    line-height: 18px;
    text-align: center;
    font-size: 12px;
}

.k-tabnav ul li a {
    color: #a9a9a9;
    text-decoration: none;
}

.k-tabnav ul li a.active {
    color: #1f9aff;
}
.k-tabnav ul li img{
    height: 20px;
    display: none;
}

.k-tabnav ul li a:not(.active) img.icon-grey{
    display: inline-block;
}

.k-tabnav ul li a.active img.icon-blue{
    display: inline-block;
}

.k-tabnav ul li p{
    font-size: 8px;
    margin: 0;
}

.k-tabnav .icon-klassbook {
    font-size: 24px;
    height: 23px;
    margin-top: -2px;
}

@media screen and (max-width: 767px){
    .k-tabnav {
        visibility: visible;
    }
    .k-tabnav .icon-klassbook {
        margin: -2px auto 0;
    }
    .k-tabnav .icon-klassbook::before {
        justify-content: center;
    }
}

.k-timeline-members-list {

  display: flex;
  z-index: 10;

  flex-direction: column;

}

.call-header-open .k-timeline-members-list {
  top: 130px;
}



.k-timeline-members-list header {
    background-color: #ffffff;
    width: 100%;
    height: 70px;
    z-index: 2;

    padding: 25px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.k-timeline-members-list header .dropdown-menu {

}

.k-timeline-members-list header .dropdown-menu li:hover {
    background: #1f9aff;
    cursor: pointer;
    color: white !important;
}

.k-timeline-members-list header .dropdown-menu button {
    width: 95%;
    text-align: start;
}

.k-timeline-members-list header .dropdown-menu button:hover {
    color: white !important;
}

.k-timeline-members-list header > span {
    font-family: var(--krFontFamilyMain);
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.k-timeline-members-list header > div {
    display: flex;
    align-items: center;
}

.k-timeline-members-list header .title {
    font-family: var(--krFontFamilyMain);
    margin-right: 10px;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    letter-spacing: -0.89px;
    color: #2e3b51;
}

.k-timeline-members-list header .members-count {
    font-family: var(--krFontFamilyMain);
    border-radius: 16px;
    padding: 3px 12px 1px;
    color: #1f9aff;
    background-color: #D2EBFF;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.14px;
}

.k-timeline-members-list .icon-customize {
    color: #0a95ff;
    font-size: 20px;
    height: 18px;
    text-align: end;
    flex: 1;
    margin-right: 17px;
}

.k-timeline-members-list header button {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
}

.k-timeline-members-list header button.active {
    color: #1f9aff;
}

.k-timeline-members-list .members-list {

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    margin-left: 0px;
}

.k-timeline-members-list .members-list li {
    border: none;
    padding: 3px 10px;
}

.k-timeline-members-list .members-list li .clearfix {
    display: flex;
    align-items: center;
}

.k-timeline-members-list .members-list li .media-body{
    min-height: 44px;
}

.k-timeline-members-list .members-list li > hr {
    margin: 6px 0 0;
    width: 105%;
    margin-left: 5px;
    border-radius: 0.5px;
    background-color: #4a4a4a;
}

.k-timeline-members-list .media-body > div {
    font-size: 14px;
    font-family: var(--krFontFamilyMain);
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: -0.42px;
    color: rgba(45, 58, 82, 0.6);
    font: 14px var(--krFontFamilyMain);
}

.k-timeline-members-list .members-list li .media-heading {
    cursor: pointer;
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: -0.45px;
    color: rgba(45, 58, 82, 0.6);
    font: 14px var(--krFontFamilyMain);
    margin-top: 0;
    margin-bottom: 0;
}

.k-timeline-members-list .members-list li .media-heading  b {
    color: #2d3a52;
    font-weight: 600;
}

.k-timeline-members-list ul li .timeline_post_avatar img {
    width: 36px;
}

/*

.k-timeline-members-list ul li {
    display: flex;
    position: relative;
}

.k-timeline-members-list ul li .member-avatar {
    width: 40px;
}

.k-timeline-members-list ul li .member-avatar img {
    margin-top: 10px;
}

.k-timeline-members-list ul li .member-infos {
    width: calc(100% - 40px);
    border-bottom: 1px solid lightgrey;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
}

.k-timeline-members-list ul li img {
    height: 40px;
    width: 40px;
    background: lightgrey;
    border-radius: 20px;
}

.k-timeline-members-list ul li p {
    margin: 0;

}
.k-timeline-members-list ul li p:nth-child(1) {
    color: #2e3b50;
    font-size: 16px;
    font-family: var(--krFontFamilyMain);
}
.k-timeline-members-list ul li p:nth-child(2) {
    color: rgba(46, 59, 80, 0.5);
    font-size: 13px;
    font-family: var(--krFontFamilyMain);
}

.k-timeline-members-list ul li button {
    position: absolute;
    right: 0;
    top: 10px;
    background: none;
    border: 0;
    visibility: hidden;
    cursor: pointer;
}

.k-timeline-members-list ul li:hover button {
    visibility: visible;
}

*/

.k-timeline-members-list footer {
    background-color: #ffffff;
    box-shadow: 0 1px 20px 0 rgba(46, 59, 80, 0.15);
    width: 100%;
    height: 70px;
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
}

.k-timeline-members-list footer input {
    background: none;
    border: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    font-family: var(--krFontFamilyMain);
    font-size: 16px;
    color: rgba(46, 59, 80, 0.3);
    padding-left: 20px;
}

@media screen and (max-width: 1200px) {
    .timeline_right_menu {
        display: none;
    }
}

.k-timeline-sidebar-overlay {
    position: fixed;
    top:0;
    left: 0;

    height: 100vh;
}

.k-timeline-sidebar {
    position: fixed;
    top: 0;
    left: 10px;
    width: 320px;
    height: 100vh;
    display: flex;
    z-index: 501;

}

.k-timeline-sidebar .attpill{
  background-color: var(--krRed);
  display:inline-block;position:unset;border-radius:100px;margin: 0 5px;height:6px;width:6px;vertical-align: middle;padding:0;
}

.k-timeline-sidebar .sidebar-class-list {
    z-index: 2;
    width: 70px;
    height: 100%;
    padding-top: 90px;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
}

.call-header-open .k-timeline-sidebar .sidebar-class-list {
  padding-top: 130px;
}


.k-timeline-sidebar .sidebar-class-list ul {
    list-style-type: none;
    margin: 0;
}

.k-timeline-sidebar .sidebar-class-list li {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
}

.k-timeline-sidebar .sidebar-class-list li a {
  display: inline-block;
  position: relative;
}
.k-timeline-sidebar .sidebar-class-list li.current {
    margin-top: 8px;
}


.k-timeline-sidebar .sidebar-timeline-menuitem  .react-klassicon-attendance__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.6px;
    color: #2e3b50;
    font: 14px var(--krFontFamilyMain);
    border: 1px solid var(--krGray300);
    background-color: #fff;
}

.react-klassicon-attendance__container .icon-chevron-right {
    font-size: 20px;
    color: #C2C6CB;
    position: absolute;
    right: 0;
    top: 15px;
}

.react-klassicon-attendance__container > img:nth-child(2) {
    position: absolute;
    left: 200px;
}

.react-klassicon-attendance__container .krSubtitle {
    font-size: 12px;
    font-weight: 500;
}

.react-klassicon-attendance__container i {
    position: relative;
    left: 43px;
}

.react-klassicon-attendance {
    display: inline-block;
    font-size: 24px;
    color: #C0C4CA;
    margin-right: 24px;
    position: relative;
    bottom: 6px;
}
.react-klassicon-attendance:before {
    display: flex;
}




.call-header-open .k-timeline-sidebar .sidebar-timeline-features {
  margin-top: 130px;
}


.k-timeline-sidebar .sidebar-timeline-features {
  margin-top: 90px;
  box-sizing: border-box;
  text-align: center;
  margin-left: 10px;
  font-family: var(--krFontFamilyMain);
  overflow-y: hidden;
  width: calc(100% - 20px);
  /*background: white;*/
  /* margin: auto 0 auto 20px;
  height: calc(100% - 110px); */
  height: calc(100% - 90px);
  /* box-shadow: 0 2px 15px 0 rgba(46, 59, 80, 0.1); */
  border-radius: 10px;
}



.k-timeline-sidebar .sidebar-timeline-features .sidebar-timeline-menuitem {
  text-align: center;
  font-family: var(--krFontFamilyMain);
  overflow-y: auto;
  height: calc(100%);
  padding: 0 10px;
  border-radius: 10px;
  overflow-y: auto;
}



.k-timeline-sidebar .sidebar-timeline-menuitem header h1 {
    margin: 15px 0 5px;
    font-family: var(--krFontFamilyMain);
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.6px;
    text-align: center;
    color: #2e3b50;
}

.k-timeline-sidebar .sidebar-timeline-menuitem header h2 {
    font-family: var(--krFontFamilyMain);
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.45px;
    text-align: center;
    color: #939AA5;
    margin: 5px 0 10px;
}

.k-timeline-sidebar .sidebar-timeline-menuitem header > button {
    font-family: var(--krFontFamilyMain);
    font-size: 13px;
    padding: 9px 0 8px;
    width: 100%;
}


.k-timeline-sidebar .sidebar-timeline-menuitem li:not(.subscription-plan-item) {
    display: flex;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item {
    padding: 16px 10px 16px 44px;
    position: relative;
    font: 14px/1.29 var(--krFontFamilyMain);
    cursor: pointer;
    border-radius: 5px;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item .icon-star {
    position: absolute;
    left: 12px;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li > .icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
    color: #C0C4CA;
}

.k-timeline-sidebar .subscription-plan-item img {
    position: absolute;
    top: 11px;
    right: 7px;
}

.k-timeline-sidebar .subscription-plan-item .note {
    font-size: 12px;
}

.k-timeline-sidebar .subscription-plan-item .note b {
    color: var(--primary-color);
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item, #timeline_subs  li.subscription-plan-item {
    padding-top: 10px;
    padding-bottom: 10px;
}

 #timeline_subs {
   margin: 10px 0;
 }
 #timeline_subs ul{    list-style: none;    margin: 0;}
.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item .icon, #timeline_subs  li.subscription-plan-item .icon{
    display: flex;
    text-align: center;
    justify-content: center;
    min-width: 26px;
    min-height: 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-color);
    background-clip: padding-box;
    border: 2px solid var(--primary-color-light);
    font-size: 12px;
    line-height: 25px;
    color: #fff;
    align-items: center;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item .text,#timeline_subs  li.subscription-plan-item .text {
    text-transform: uppercase;
    color: var(--primary-color);
    margin-right: 5px;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item .second-text,  #timeline_subs li.subscription-plan-item .second-text {
    display: inline-block;
    padding: 3px;
    position: static;
    text-transform: uppercase;
    line-height: 1;
    color: var(--primary-color);
    background: var(--primary-color-light);
    border-radius: 3px;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item .note,#timeline_subs  li.subscription-plan-item .note {
    color: #828996;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item_prime .text,#timeline_subs  li.subscription-plan-item_prime .text {
    color: #ff9200;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.subscription-plan-item_prime .icon, #timeline_subs li.subscription-plan-item_prime .icon {
    background-color: #ff9200;
    border-color: rgba(255, 146, 0, 0.2);
}

.k-timeline-sidebar .sidebar-timeline-menuitem li > .icon-attendance_filled {
    font-size: 22px;
    position: absolute;
    left: 13px;
    bottom: 13px;

}

.k-timeline-sidebar .sidebar-timeline-menuitem > h1 {
    font-family: var(--krFontFamilyMain);
    font-weight: 600;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.6px;
    text-align: center;
    color: #2e3b50;
    margin: 10px 0 5px;
}

.k-timeline-sidebar .sidebar-timeline-menuitem > h2 {
    font-family: var(--krFontFamilyMain);
    font-weight: 500;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.45px;
    text-align: center;
    color: #939AA5;
    margin: 5px 0 10px;
}

/*.k-timeline-sidebar .sidebar-timeline-menuitem > button {
    font-family: var(--krFontFamilyMain);
    font-size: 13px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: -0.54px;
    text-align: center;
    color: white;
    padding: 12px 38px 9px;
}

.k-timeline-sidebar .sidebar-timeline-menuitem > button > span {
    position: relative;
    bottom: 2px;
}*/

.k-timeline-sidebar .sidebar-timeline-menuitem ul {
    margin: 0;
    margin-top: 15px;
    list-style-type: none;
    text-align: left;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li:not(.subscription-plan-item){
    padding-bottom: 9px;
    padding-top: 9px;
    padding-left: 43px;
    padding-right: 15px;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.6px;
    color: #2e3b50;
    font: 14px var(--krFontFamilyMain);
}

.k-timeline-sidebar .sidebar-timeline-menuitem li:not(.subscription-plan-item) img {
    margin-right: 6px;
    height: 22px;
    position: absolute;
    bottom: 2px;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li.current{
    background: rgba(31, 154, 255, 0.5);
}

.k-timeline-sidebar .sidebar-timeline-menuitem li:hover{
    background: #e3e3e8;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li .pill {
    padding: 2px 10px 20px;
    position: absolute;
    height: 18px;
    border-radius: 8.5px;
    color: var(--krRed);
    background-color: #FDDFDF;
    font-family: var(--krFontFamilyMain);
    top: 8px;
    right: 10px;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
}

@media screen and (max-width: 767px)  {
    .k-timeline-sidebar {
        background-color: var(--krBackground);
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem {
        padding: 90px 0 0 0;
        background: none;
        box-shadow: none;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem header {
        padding: 30px 30px 0;
        background-color: white;
        bottom: 27px;
        position: relative;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem header > button {
        position: relative;
        top: 15px;
        width: calc(100% - 36px);
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem section ul {
        background-color: white;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem ul {
        margin: 0;
        margin-top: 10px;
        list-style-type: none;
        text-align: left;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem  .react-klassicon-attendance__container {
        padding-left: 43px;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem li {
        padding: 16px 10px 16px 44px;
        position: relative;
        font: 14px/1.29 var(--krFontFamilyMain);
        cursor: pointer;
        background: #fff;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem li > .icon-attendance_filled {
        font-size: 25px;
        top: 19px;
        left: 10px;
        position: absolute;
    }
    .react-klassicon-attendance__container .icon-chevron-right {
        top: 19px;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem li:before,
    .k-timeline-sidebar .sidebar-timeline-menuitem li:last-child:after {
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        top: 0;
        left: 36px;
        right: 0;
        background-color: #e0e2e5;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem li.topmenu:before,
.k-timeline-sidebar .sidebar-timeline-menuitem li.bottommenu:last-child:after {
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0px;
    right: 0;
    background-color: #e0e2e5;
}

.k-timeline-sidebar .sidebar-timeline-menuitem li:last-child:after, .k-timeline-sidebar .sidebar-timeline-menuitem li.bottommenu:last-child:after {
    top: auto;
    bottom: 0;
}


    .k-timeline-sidebar .sidebar-timeline-menuitem li .pill {
        min-width: 50px;
        padding: 6px 3px 5px;
        position: absolute;
        right: 10px;
        border-radius: 12px;
        background-color: var(--krRed);
        color: white;
        font: 13px/1.4 var(--krFontFamilyMain);
        text-align: center;
        height: 26px;
        top: 12px;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem li:last-child:after {
        top: auto;
        bottom: 0;
    }

    .k-timeline-sidebar-overlay {
        width: 100%;
    }
    .k-timeline-sidebar-overlay:not(.is-open) {
        pointer-events: none;
    }

    .k-timeline-sidebar-overlay.is-open {
        pointer-events: all;
        background: rgba(0,0,0,0.5);
        z-index: 500;
        display: block;
    }

    .k-timeline-sidebar {
        display: none;
        animation-name: sliding-menu;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }

    @keyframes sliding-menu {
        0% { right: -300px; opacity: 0;}
        100% {right:0px; opacity: 1;}
    }

    .k-timeline-sidebar-overlay.is-open .k-timeline-sidebar {
        display:block;
        box-shadow: 0 1px 20px 0 rgba(46, 59, 80, 0.15);
        overflow-y: auto;
        left: auto;
        right:0;
        animation-name: sliding-menu;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }

    .k-timeline-sidebar .sidebar-timeline-menuitem li:not(.subscription-plan-item){
        padding-bottom: 13px;
        padding-top: 16px;
        padding-left: 43px;
        padding-right: 15px;
        border-radius: 5px;
        position: relative;
        cursor: pointer;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: -0.6px;
        color: #2e3b50;
        font: 14px var(--krFontFamilyMain);
    }

    .sidebar-timeline-features li .icon-menuitem {
        bottom: 3px;
    }

}

/* Icon Colors */
.k-timeline-sidebar .icon-homeworks {
    color: #536DD2 !important;
}

.k-timeline-sidebar .icon-documents {
    color: #00B7CE !important;
}

.k-timeline-sidebar .medias {
    color: #FCD087 !important;
}

.k-timeline-sidebar .icon-calendar {
    color: #F27576 !important;
}

.k-timeline-sidebar .icon-appointments {
    color: #8F63DE !important;
}

.k-timeline-container {
    position: relative;
    width: 100%;
    padding-top: 30px
}

.k-timeline #timeline_cover_wrapper {
    text-align: center;
}

.k-timeline #timeline_cover {
    box-shadow: 0 1px 10px 0 rgba(46, 59, 80, 0.1);
    background: white;
    border-radius: 5px;
    font-family: var(--krFontFamilyMain);
    overflow: hidden;
    border: 0;
    margin: 0;
    position: relative;
}

#timeline_pin.widget-box, #timeline_unprcomment.widget-box, #timeline_unproc.widget-box , #timeline_app.widget-box, #timeline_subs.widget-box {
    box-shadow: 0 1px 10px 0 rgba(46, 59, 80, 0.1) !important;
    background: white;
    border-radius: 5px !important;
    font-family: var(--krFontFamilyMain);
    overflow: hidden;
    border: 0 !important;
    position: relative;
}
.k-timeline #timeline_cover_img {
    border-bottom-left-radius: 280px 30px;
    border-bottom-right-radius: 280px 30px;
    position: relative;
}

.unreadchat_notif {
    position: absolute;
    height: 18px;
    border-radius: 8.5px;
    background-color: var(--krRed);
    color: white;
    font-family: var(--krFontFamilyMain);
    top: 5px;
    right: 5px;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

.k-timeline #timeline_cover_title {

}

.k-timeline #timeline_cover_subtitle {
    color: #1f9aff;
}

.k-timeline #timeline_member, .k-timeline #cover_curve {
    position: absolute;
    width: 100%;
    background: no-repeat;
    border: 0;
    box-shadow: none;
    bottom: -12px;
    text-align: center;
    cursor: pointer;
}




.round-label {

	border-radius: 1000px;
	padding: 2px 10px;
	margin: 8px 0;


}

.k-timeline #timeline_member .small_avatar {
    border-radius: 100%;
    border: 2px solid white;
    width: 40px;
    box-sizing: border-box;
    margin-left: -20px;
   	height: 40px;
   	overflow: hidden;
   	display: inline-block;
   	position: relative;
}


.k-timeline #timeline_member .small_avatar .badge-member{
     opacity: 0.5;
     width: 40px;
     height: 40px;
     position: absolute;
     left: 0;
     top: 0;
}

.k-timeline #timeline_member .small_avatar .badge-member-number{
    color: white;
    width: 36px;
    text-align: center;
    position: absolute;
    font-size: 16px;
    top: 0;
    line-height: 36px;
    height: 40px;
    left: 0;
}


.k-timeline #timeline_member .small_avatar img{
   width: 100%;
}

.k-timeline #timeline_member .small_avatar:first-child {
    margin: 0;
}

.k-timeline #timeline_member a {
    display: none;
}

.k-timeline{
    padding: 0px;
}

.k-timeline #timeline_posts {
    padding: 20px;
    padding-top: 0;
}

.timeline-homeworks {


	box-shadow: 0 1px 10px 0 rgba(46, 59, 80, 0.1) !important;
    background: white !important;
    border-radius: 5px !important;
    font-family: var(--krFontFamilyMain);
    border: 0 !important;
    margin-top: 22px !important;
    height: 140px;
    padding: 10px;


}


.timeline-homeworks .homework-cell{

	box-shadow: 0 1px 10px 0 #8d8d8d !important;
    background: white !important;
    border-radius: 5px !important;
    font-family: var(--krFontFamilyMain);
    border: 0 !important;
    height: 70px;
    width: 120px;
    display: inline-block;
    margin-right:10px;
    padding: 5px;
    cursor: pointer;

}


.k-timeline #post_input-react .widget-toolbox,
.k-timeline #post_input .widget-toolbox{
    background: white;
    border: 0;
}

.timeline_post_avatar img {
    border: 0;
}

.k-timeline #timeline_type_menu {
    text-align: center;
    margin-top: 20px;
}


#timeline_request_menu img{
	margin-right: 8px;
}


#timeline_request_menu.selected{
	background: #8f63de !important;
}

#timeline_post_menu img{
	margin-right: 8px;
}


#timeline_post_menu.selected {
	background: #1f91ff !important;
}

.k-timeline #timeline_type_menu button {
    border: 0;
    background: white;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
    font-family: var(--krFontFamilyMain);
    font-size: 10px;
    color: black;
    padding: 12px 22px;
    outline: 0;
    margin-left: 5px;
    margin-right: 5px;
    font-weight: bold;
}

.k-timeline #timeline_type_menu button i{
    color: #1f91ff;
    margin-right: 10px;
}




.k-timeline #timeline_type_menu button.selected {
    color: white;
}

@media screen and (min-width: 768px) and (max-width: 1200px){
    .k-timeline-container {
        width: calc(100% - 300px);
        margin-left: 300px;
        padding: 30px 10px 0;
    }
}

@media screen and (max-width: 767px){
    .k-timeline-container {
        padding: 20px 10px 0;
    }
}