.GenericTabs .GenericTabs__header {
    border-bottom: 1px solid #e6e6e6;
    padding: 0 10px;
}

.GenericTabs .GenericTabs__header li {
    cursor: pointer;
    -webkit-transition: -webkit-box-shadow .4s;
    transition: -webkit-box-shadow .4s;
    -o-transition: box-shadow .4s;
    transition: box-shadow .4s;
    transition: box-shadow .4s,-webkit-box-shadow .4s
}

.GenericTabs .GenericTabs__header .GenericTabs__header--selected,.GenericTabs .GenericTabs__header li:hover {
    -webkit-box-shadow: inset 0 -2px 0 0 #0699cd;
    box-shadow: inset 0 -2px 0 0 #0699cd;
}

.GenericTabs .GenericTabs__header .GenericTabs__header--selected {
    color: #0699cd;
    font-weight: bold 
}

.breadcrumb {
    margin-bottom: 0;
    padding-left: 0;
    font-size: 12.8px;
    letter-spacing: -.61px;
    font-weight: 700
}

.breadcrumb,.breadcrumb .active,.breadcrumb li+li:before {
    color: #4f5457
}

.AboutSection {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 40px;
    padding-top: 20px
}

.AboutContainer {
    max-width: 850px
}

.AboutMainHeader {
    text-align: center
}

.platformSection {
    background-color: #f8f8f8;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 40px;
    padding-top: 20px
}

.platformSection h1 {
    margin-top: 0
}

.platformMainHeader {
    text-align: center
}

.platformMainSubTitle {
    color: #a2a2a2
}

.teamSection {
    background-color: #fff;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 40px;
    padding-top: 20px
}

.teamMainHeader {
    text-align: center
}

.teamMainHeader h1 {
    margin-top: 0
}

.teamMainSubTitle {
    color: #a2a2a2
}

.teamList {
    overflow: hidden;
    margin: auto;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 30px;
    max-width: 650px;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.team__item {
    float: left;
    text-align: center;
    width: 33%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px
}

.team__item:hover .vi-thin-heart {
    color: #fd4444
}

.team__item:hover img {
    -webkit-box-shadow: 0 25px 15px 0 rgba(0,0,0,.2)!important;
    box-shadow: 0 25px 15px 0 rgba(0,0,0,.2)!important;
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media only screen and (max-width: 768px) {
    [class*=team__item] {
        width:50%
    }

    .pressPack {
        margin-top: 5px;
        width: 100%
    }

    .pressContactButton {
        width: 100%
    }
}

.SlideLeftButton {
    background: -webkit-linear-gradient(left,#f8f8f8,#000);
    background: -webkit-linear-gradient(left,#f8f8f8,transparent);
    background: -o-linear-gradient(right,#f8f8f8,transparent);
    background: -webkit-gradient(linear,left top,right top,from(#f8f8f8),to(transparent));
    background: -o-linear-gradient(left,#f8f8f8,transparent);
    background: linear-gradient(90deg,#f8f8f8,transparent)
}

.SlideLeftButton,.SlideRightButton {
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 70px;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    display: block
}

.SlideRightButton {
    right: 0;
    background: -webkit-linear-gradient(left,#000,#f8f8f8);
    background: -webkit-linear-gradient(left,transparent,#f8f8f8);
    background: -o-linear-gradient(right,transparent,#f8f8f8);
    background: -webkit-gradient(linear,left top,right top,from(transparent),to(#f8f8f8));
    background: -o-linear-gradient(left,transparent,#f8f8f8);
    background: linear-gradient(90deg,transparent,#f8f8f8)
}

.SlideLeftButton:hover,.SlideRightButton:hover {
    opacity: 1
}

.PostEditor .PostEditor__titleEditor {
    width: 100%;
    font-size: 30px;
    color: #4f5457;
    letter-spacing: -1.04px;
    line-height: 36px;
    background: none;
    border: none
}

.PostEditor .PostEditor__titleEditor:focus {
    border: none;
    outline: none
}

.PostEditor .PostEditor__imageEditor {
    height: 405px;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.2)
}

.PostEditor .PostEditor__imageEditor:hover {
    background-color: #fff;
    background-color: hsla(0,0%,100%,.8)
}

.PostEditor .PostEditor__imageEditor {
    cursor: pointer
}

.PostEditor .PostBase__image--hasImage .PostEditor__imageEditor {
    display: none
}

.PostEditor .PostBase__image--hasImage:hover .PostEditor__imageEditor {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.PostBase .PostBase__image {
    background-size: cover!important;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #d8d8d8;
    height: 405px
}

.PostBase .PostBase__country {
    margin-top: -50px;
    margin-right: -40px
}

.PostBase .PostBase__suggested .PostBase__suggested-cover {
    border-radius: 4px
}

.PostBase .PostBase__cover {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.PostBase .PostBase__content {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 15px
}

.PostBase .PostBase__content .PostBase__contentInner {
    max-width: 660px;
    margin: 0 auto
}

.PostBase .PostBase__br {
    margin-top: 2.5px;
    border-bottom: 1px solid #ccc;
    margin-right: 10px;
    margin-left: 10px;
    width: 25px
}

.PostBase .TeacherItem {
    border: 1px solid #efefef
}

.PostBase .side-panel {
    font-size: 14.25px;
    border-radius: 8px;
    background-color: #fff;
    padding: 22px;
    margin-bottom: 10px
}

.PostBase .tags {
    padding-bottom: 15px
}

.PostBase #article-header {
    width: 100%;
    height: 35vh;
    background-size: cover;
    background-position: 50%;
    overflow: hidden;
    margin-bottom: 30px
}

.PostBase .article-information {
    margin-bottom: 20px
}

.PostBase .card-article-tags {
    margin-bottom: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.PostBase .card-article-tag {
    margin-top: 3px;
    margin-right: 3px;
    padding: 4px 8px;
    color: #787b83;
    background-color: #f2f2f2;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-transition: background-color .31415s;
    -o-transition: background-color .31415s;
    transition: background-color .31415s;
    -webkit-transition: color .1415s;
    -o-transition: color .1415s;
    transition: color .1415s;
    cursor: pointer
}

.PostBase .PostBase__share {
    padding-top: 15px;
    border-top: 1px solid #efefef
}

.PostBase .card-article-tag:hover {
    color: #f8f8f8!important;
    background-color: #0699cd!important
}

.PostBase .article-author-picture {
    float: left;
    margin-right: 10px;
    position: relative;
    top: 2px
}

.PostBase .article-author-picture>img {
    width: 30px;
    height: 30px;
    border-radius: 15px
}

.PostBase .article-author-name {
    font-size: 12px;
    line-height: 16px
}

.PostBase .article-timestamp {
    font-size: 10px;
    color: #c2c2c2
}

.PostBase .article-details {
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 4px
}

.PostBase .article-featured {
    font-size: 16px;
    margin-top: 3px
}

.PostBase .article-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1.3px;
    text-align: left
}

.PostBase .article-squeeze {
    max-width: 660px;
    width: 90%
}

.PostBase .article-content {
    font-size: 16px;
    line-height: 1.58;
    letter-spacing: .6px
}

@media only screen and (max-width: 481px) {
    .PostBase .article-content {
        font-size:14.25px;
        line-height: 1.7
    }
}

.PostBase .article-footer {
    border-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.1);
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    padding: 15px;
    margin-top: 30px;
    margin-bottom: 20px
}

.PostBase .article-footer-teacher-picture {
    float: left;
    margin-right: 20px
}

.PostBase .article-footer-teacher-picture>img {
    width: 90px;
    height: 90px;
    border-radius: 45px
}

.PostBase .article-footer-teacher-name {
    display: inline;
    font-size: 18px
}

.PostBase .article-footer-teacher-rating {
    display: inline
}

.PostBase #introduction-articles {
    background-color: #e8175d
}

.PostBase .card-profile {
    border-radius: 8px;
    background-color: #fff
}

.PostBase .card-profile .profile-picture {
    width: 90px;
    height: 90px;
    margin-top: -45px;
    border: 4px solid #fff
}

.PostBase .card-profile-body {
    padding: 15px 15px 0;
    text-align: center
}

.PostBase .card-profile-footer {
    padding: 15px
}

.PostBase .card-profile-name {
    font-size: 21px;
    font-weight: 700;
    line-height: 21px;
    margin-bottom: 4px
}

.PostBase .card-profile-teach {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px
}

.PostBase .card-profile-location {
    color: #c2c2c2;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 12px
}

.PostBase .card-profile-localtime {
    color: #c2c2c2;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 6px
}

.PostBase .card-profile-membersince,.PostBase .card-profile-teachersince {
    font-size: 10px
}

.PostBase .card-profile-languages-language {
    padding: 0 2px 0 0;
    text-align: right;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase
}

.PostBase .card-profile-languages-proficiency {
    padding: 0 0 0 2px;
    text-align: left
}

.PostBase .card-profile-languages-proficiency>object {
    display: inline;
    position: relative;
    height: 12px;
    top: -2px
}

.PostBase .card-profile-languages-proficiency>img {
    display: inline;
    position: relative;
    top: -5px
}

.HeatmapCalendar .Calendar--table--row:hover .CalendarCell {
    background-color: #f8f8f8
}

.HeatmapCalendar .Calendar--header {
    -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.4);
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.4)
}

.HeatmapCalendar .CalendarCell {
    height: 25px
}

.HeatmapCalendar .CalendarCell.CalendarCell--available {
    background-color: #3bb85c!important
}

 

.HeatmapCalendar .CalendarCell.CalendarCell--selected {
    background-color: #0699cd!important
}

.HeatmapCalendar .CustomRadio {
    display: inline-block
}

.Wizard .active a {
    font-weight: 700
}

.orientation-base {
    margin-top: 20px
}

.orientation-base h3 {
    margin-bottom: 10px
}

.SpecialCharacters ul li {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    font-weight: 700;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px
}

.SpecialCharacters .shift-key--active {
    background-color: #0699cd!important;
    color: #fff!important
}

.SpecialCharacters ul li:hover {
    background-color: #daf0fe
}

.SpecialCharacters ul li:active {
    -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 0 2px 0 rgba(0,0,0,.1);
    background-color: #0699cd!important;
    color: #fff!important
}

.PhoneticsBase .PhoneticsBase__vowels {
    padding: 0;
    text-align: center;
    border-collapse: collapse
}

.PhoneticsBase .PhoneticsBase__vowels td {
    padding: 0
}

.PhoneticsBase .PhoneticsBase__vowels tr {
    background-color: transparent!important
}

.PhoneticsBase .PhoneticsBase__other {
    padding: 4px;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #888
}

.PhoneticsBase .PhoneticsBase__other td {
    padding: 4px
}

.PhoneticsBase .PhoneticsBase__other th {
    padding: 5px
}

.PhoneticsBase .PhoneticsBase__consonants {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
    border: 1px solid #888
}

.PhoneticsBase .PhoneticsBase__consonants td {
    padding: 2px;
    font-size: 14px
}

.PhoneticsBase .PhoneticsBase__consonants th {
    text-align: center
}

.PhoneticsBase .PhoneticsBase__consonants a,.PhoneticsBase .PhoneticsBase__consonants td a {
    font-size: 12px
}

.PhoneticsBase .PhoneticsBase__consonants tr {
    background-color: #fff!important
}

.ProgressiveShimmer {
    border-radius: 4px;
    background: #f8f8f8;
    background-image: -webkit-gradient(linear,left top,right top,from(#f8f8f8),color-stop(20%,#f2f2f2),color-stop(40%,#f8f8f8),to(#f8f8f8));
    background-image: -webkit-linear-gradient(left,#f8f8f8,#f2f2f2 20%,#f8f8f8 40%,#f8f8f8);
    background-image: -o-linear-gradient(left,#f8f8f8 0,#f2f2f2 20%,#f8f8f8 40%,#f8f8f8 100%);
    background-image: linear-gradient(90deg,#f8f8f8 0,#f2f2f2 20%,#f8f8f8 40%,#f8f8f8);
    background-repeat: no-repeat;
    background-size: 800px 1004px;
    display: inline-block;
    position: relative;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: shimmer;
    animation-name: shimmer;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

.ProgressiveShimmer__line {
    height: 20px;
    margin-bottom: 15px
}

.ProgressiveShimmer__medium-pic {
    height: 50px;
    width: 50px;
    border-radius: 50%
}

.ProgressiveShimmer__large-pic {
    height: 85px;
    width: 85px;
    border-radius: 50%
}

.NotificationList--big .Notification .Notification__content {
    font-size: 14.25px
}

.NotificationList--big .Notification .Notification__time {
    font-size: 12px
}

.Notification {
    padding: 20px 15px;
    border-bottom: 1px solid #e6e6e6
}

.Notification:last-child {
    border-bottom: 0
}

.Notification.Notification--clickable {
    cursor: pointer
}

.Notification.Notification--clickable:hover {
    background-color: #e3f3fe
}

.Notification .Notification__time {
    font-size: 10px;
    color: #838789
}

.notification__profile-pic {
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-right: 6px
}

.notification__content {
    margin-top: 5px
}

.huatutorTags {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.huatutorTags .huatutorTag {
    margin-bottom: 5px
}

.huatutorTag {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    background: #fff;
    color: #4f5457;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 6px 9px;
    font-size: 11.4px;
    font-weight: 700;
    margin-bottom: 4px
}

.huatutorTag.huatutorTag__red {
    background-color: #fed9d9;
    color: #fd4444;
    border: none
}

.huatutorTag.huatutorTag__blue {
    background-color: #b4e0f0;
    color: #0699cd;
    border: none
}

.huatutorTag.huatutorTag__green {
    background-color: #c3efc3;
    color: #36ca36;
    border: none
}

.huatutorTag .huatutorTag--Icon {
    margin-right: 10px
}

.huatutorTag.huatutorTag--removable {
    cursor: pointer
}

.huatutorTag.huatutorTag--removable .huatutorTag--Icon .fa-times-circle {
    display: none
}

.huatutorTag.huatutorTag--removable:hover {
    background-color: #ff5e5e;
    color: #fff
}

.huatutorTag.huatutorTag--removable:hover .fa-times-circle {
    display: inline-block
}

.huatutorTag.huatutorTag--removable:hover .fa-tag {
    display: none
}

.huatutorTag:not(:last-child) {
    margin-right: 4px
}

.TagsEditor {
    border-radius: 6px
}

.TagsEditor input {
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important
}

.TagsEditor .TagsEditor--overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    font-size: 14.25px
}

.TagsEditor .TagsEditor--tags {
    overflow: hidden;
    border: 1px solid #d8d8d8;
    border-top: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 10px
}

.TagsEditor .TagsEditor--tags .TagsEditor--no-tags {
    font-size: 14.25px;
    text-align: center;
    font-weight: 700
}

.NotificationsPreview {
    width: 800px;
    width: 50rem
}

.NotificationsPreview .vi {
    font-size: 18px
}

.NotificationsPreview .GenericTabs__header,.NotificationsPreview .NotificationsPreview__footer {
    background-color: #f8f8f8
}

.RichContent .emojione {
    width: 25px;
    height: 25px
}

.Prompt .modal-content {
    border-radius: 2px
}

.LessonInfo__LessonType,.LessonInfo__ParticipantNames {
    font-weight: 400
}

.StudentBookCalendar .Calendar--table {
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden
}

.StudentBookCalendar .Calendar--table--row {
    height: 25px
}

.StudentBookCalendar .Calendar--table--row:hover {
    background-color: #efefef
}

.StudentBookCalendar .Calendar--table--row:hover .CalendarCell--available {
    background-color: #aed89e
}

.StudentBookCalendar .Calendar--table--row.even .CalendarCell,.StudentBookCalendar .Calendar--table--row.odd .CalendarCell {
    border-bottom: 1px solid #ccc
}

.StudentBookCalendar .Calendar--table--row:last-child,.StudentBookCalendar .Calendar--table--row:last-child .CalendarCell {
    border-bottom: 0
}

.StudentBookCalendar .Calendar--table--legend {
    font-size: 11px
}

.StudentBookCalendar .Calendar--table--legend .Calendar--legend--faded {
    color: #ccc
}

.StudentBookCalendar .Calendar--table--legend .Calendar--legend--bold {
    font-weight: 700
}

.StudentBookCalendar .CalendarCell {
    border-left: 1px solid #ccc;
    color: #787b83
}

.StudentBookCalendar .CalendarCell.CalendarCell--full-availability {
    background-color: #e3f3fe
}

 .StudentBookCalendar .CalendarCell {
    -webkit-transition: all .3s ease-out .05s;
    -o-transition: all .3s ease-out .05s;
    transition: all .3s ease-out .05s;
    position: relative
}

.StudentBookCalendar .CalendarCell.CalendarCell--booked {
    background-color: #e7e7e7;
    background-image: -webkit-repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.8) 15px);
    background-image: -o-repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,100%,.8) 10px,hsla(0,0%,100%,.8) 15px);
    background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.8) 15px)
}


.StudentBookCalendar .CalendarCell .CalendarCell-cell-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2
}

.StudentBookCalendar .CalendarCell.CalendarCell--hover--top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.StudentBookCalendar .CalendarCell.CalendarCell--hover--bottom {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.StudentBookCalendar .CalendarCell.CalendarCell--hover--bottom.CalendarCell--hover--top {
    margin: 0
}

.StudentBookCalendar .CalendarCell.CalendarCell--available:not(.CalendarCell--full-availability) {
    background-color: #3bb85c;
    color: #fff
}

.StudentBookCalendar .CalendarCell.CalendarCell--available.CalendarCell--hover {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    border: 1px solid #0699cd;
    background-color: #0699cd;
    cursor: pointer;
    color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}
.StudentBookCalendar .CalendarCell.CalendarCell--booking {
    background-color: #A31118;
    color: #fff
}

.StudentBookCalendar .CalendarCell.CalendarCell--booking.CalendarCell--hover {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    border: 1px solid #A31118;
    background-color: #A31118;
    cursor: pointer;
    color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.BookLessonHoverCard .popover-content {
    padding: 0;
    width: 200px
}

.BookLessonHoverCard header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 5px;
    background-color: #ecf0f1
}

.BookLessonHoverCard strong {
    display: block;
    margin-right: 5px
}

.BookLessonHoverCard .verb-profile-pic {
    border: 2px solid #fff
}

.BookLessonHoverCard .btn {
    margin-top: 10px;
    margin-bottom: 10px
}

.BookLessonHoverCard .BookLessonHoverCard--body {
    padding: 10px
}

.Calendar {
    width: 100%
}

.Calendar .flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.Calendar .Calendar--control {
    width: 100%
}

.Calendar .Calendar--loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.7)
}

.Calendar .Calendar--loading .LoadingSpinner svg {
    height: 75px;
    width: 75px
}

.Calendar .Calendar--header {
    min-height: 25px
}

.Calendar .Calendar--header .Calendar--header--legend {
    font-size: 12px;
    width: 60px
}

.Calendar .Calendar--table {
    position: relative;
    width: 100%
}

.Calendar .Calendar--table .Calendar--table--legend {
    font-size: 11px;
    width: 60px
}

.Calendar .Calendar--table .Calendar--table--row--time {
    width: 60px;
    border-right: 1px solid #888
}

.DragSelect {
    position: relative
}

.DragSelect--Box {
    background: #00a2ff;
    background: rgba(0,162,255,.4);
    position: absolute;
    z-index: 99
}

.DisableTextSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.PresenceProfilePic .PresenceBall .positionBottom {
    bottom: 1px
}

.PresenceProfilePic .PresenceBall .positionTop {
    top: 1px
}

.SessionInfo {
    background-color: #484b4c;
    color: #c2c2c2
}

.SessionInfo label {
    color: #fff
}

.SessionInfo .SessionInfo--Scroll {
    -webkit-flex: auto;
    -ms-flex: auto;
    -webkit-box-flex: 1;
    flex: auto;
    overflow-y: auto;
    min-height: 0;
    overflow-x: hidden
}

.SessionInfo .SessionInfo__action--disabled {
    cursor: pointer;
    color: #8d8d8d
}

.LessonPlanOverview {
    border: 1px solid #eee;
    cursor: pointer;
    overflow: hidden
}

.LessonPlanOverview .panel-body {
    padding: 0;
    height: 100%
}

.LessonPlanOverview .lesson-description {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

@media (max-width: 767px) {
    .lesson {
        height:264px!important
    }

    .lesson .lesson-scheduling {
        height: 50%!important
    }
}

.lesson-slot {
    height: 132px;
    padding: 16px;
    text-align: center;
    margin-bottom: 2px
}

.lesson {
    width: 100%;
    margin-bottom: 1px;
    height: 132px
}

.lesson .btn-wire-blue {
    border-width: 1px
}

.lesson .not-scheduled .lesson-countdown,.lesson .not-scheduled .lesson-date,.lesson .not-scheduled .lesson-time {
    visibility: hidden
}

.lesson.mock .status-bar,.lesson.slot .status-bar {
    border-left: 10px solid #e5e5e5
}

.lesson.mock .lesson-scheduling>* {
    visibility: hidden
}

.lesson.slot .lesson-status {
    color: #fff
}

.lesson.groupLive .status-bar,.lesson.live .status-bar,.lesson.refunded .status-bar {
    border-left: 10px solid #7ed321
}

.lesson.groupLive .lesson-status,.lesson.live .lesson-status,.lesson.refunded .lesson-status {
    color: #7ed321
}

.lesson.reserved .status-bar,.lesson.upcoming .status-bar {
    border-left: 10px solid #0699cd
}

.lesson.reserved .lesson-status,.lesson.upcoming .lesson-status {
    color: #0699cd
}

.lesson.unassigned .status-bar {
    border-left: 10px solid #f1c40f
}

.lesson.unassigned .lesson-status {
    color: #f1c40f
}

.lesson.complete .status-bar,.lesson.past .status-bar {
    border-left: 10px solid #fff
}

.lesson.complete .lesson-status,.lesson.past .lesson-status {
    color: #1dcfac
}

.lesson.incomplete .status-bar {
    border-left: 10px solid #f5a623
}

.lesson.incomplete .lesson-status {
    color: #f5a623
}

.lesson.noshow .status-bar {
    border-left: 10px solid #f5a623
}

.lesson.noshow .lesson-status {
    color: #f5a623
}

.lesson.issueReported .status-bar {
    border-left: 10px solid #bd10e0
}

.lesson.issueReported .lesson-status {
    color: #bd10e0
}

.lesson.cancelled .status-bar,.lesson.groupCancelled .status-bar {
    border-left: 10px solid #d0021b
}

.lesson.cancelled .lesson-status,.lesson.groupCancelled .lesson-status {
    color: #d0021b
}

.lesson:hover {
    -webkit-animation: isotope-pulse .31415s ease-out;
    -webkit-animation-iteration-count: 1
}

.lesson.no-clicks:hover {
    -webkit-animation: none;
    cursor: auto
}

.row-lesson {
    height: 100%;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 1px
}

.lesson-scheduling {
    height: 100%;
    background: -webkit-gradient(linear,left top,left bottom,from(#574a4a),to(#574a4a));
    background: -webkit-linear-gradient(#574a4a,#574a4a);
    background: -o-linear-gradient(#574a4a,#574a4a);
    background: linear-gradient(#574a4a,#574a4a);
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(87,74,74,.65)),to(rgba(87,74,74,.65)));
    background: -webkit-linear-gradient(rgba(87,74,74,.65),rgba(87,74,74,.65));
    background: -o-linear-gradient(rgba(87,74,74,.65),rgba(87,74,74,.65));
    background: linear-gradient(rgba(87,74,74,.65),rgba(87,74,74,.65));
    background-size: cover!important;
    background-position: 50%!important;
    text-align: center;
    padding: 10px;
    padding-top: 18px
}

.lesson-cost {
    float: right
}


.normal-price {
    text-decoration: line-through
}

.lesson-price-bg {
    background-color: #f2f2f2;
    padding: 0 10px;
    border-radius: 8px;
    min-width: 140px;
    margin-top: 5px;
    text-align: center
}

.lesson-price {
    font-size: 24px;
    font-weight: 700;
    color: #3bb85c
}

.lesson-price-former {
    text-decoration: line-through
}

.lesson-background {
    background-size: cover
}

.lesson-overlay {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .6;
    z-index: 4
}

.lesson-status {
    font-size: 12px;
    letter-spacing: 4px;
    line-height: 17px;
    text-transform: uppercase
}

.lesson-time {
    color: #fff;
    font-size: 28px;
    letter-spacing: 2px;
    line-height: 49px
}

.lesson-date {
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 24px
}

.lesson-countdown {
    color: #fff;
    font-size: 8px;
    letter-spacing: .8px
}

.lesson-information {
    padding: 10px
}

.lesson-information .participant-images {
    white-space: nowrap;
    overflow-x: hidden
}

.lesson-participant-picture,.lesson-teacher-picture {
    width: 40px!important;
    height: 40px!important;
    display: inline;
    margin-right: 4px
}

.lesson-teacher-picture {
    border-radius: 25px;
    border: 4px solid #e5e5e5
}

.lesson-teacher-name {
    display: inline
}

.lesson-labels {
    max-height: 21px;
    overflow: hidden
}

.one-line-truncate {
    max-height: 16px;
    -webkit-line-clamp: 1
}

.one-line-truncate,.two-lines {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 16px;
    -webkit-box-orient: vertical
}

.two-lines {
    white-space: pre-wrap;
    max-height: 32px;
    -webkit-line-clamp: 2
}

.three-lines {
    max-height: 48px;
    -webkit-line-clamp: 3
}

.four-lines,.three-lines {
    white-space: pre-wrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 16px;
    -webkit-box-orient: vertical
}

.four-lines {
    max-height: 64px;
    -webkit-line-clamp: 4
}

.NewRating .NewRating__overlay {
    display: none
}

.NewRating .NewRating--hide {
    position: relative
}

.NewRating .NewRating--hide .NewRating__overlay {
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.6)
}

.StarPicker .StarPicker--Star {
    color: #ffbd44;
    margin-right: 5px;
    cursor: pointer
}

.StarPicker .StarPicker--Star:last-child {
    margin-right: 0
}

.VocabularyBase .VocabularyBase__img {
    border-radius: 8px
}
.VocabularyBase .VocabularyDeck__left {
    background-color: #f8f8f8;
    border-radius: 8px;
    min-height: 530px;
    border: 1px solid #ccc
}
.VocabularyBase .VocabularyBase__featured {
    border-radius: 3px;
    background-color: #b4e0f0;
    color: #0699cd;
    display: inline-block;
    padding: 6px
}
.VocabularyBase .VocabularyBase__graphs .VocabularyBase__graphWrapper {
    height: 150px;
    border-radius: 6px;
    background-color: #f2f2f2
}
.VocabularyBase .VocabularyBase__graphs .VocabularyBase__graph {
    border-radius: 6px;
    height: 30%;
    color: #fff;
    font-weight: 700
}
.VocabularyBase .VocabularyBase__graphs .VocabularyBase__graph--red {
    background-color: #fd4444
}
.VocabularyBase .VocabularyBase__graphs .VocabularyBase__graph--orange {
    background-color: #ffbd04
}
.VocabularyBase .VocabularyBase__graphs .VocabularyBase__graph--green {
    background-color: #36ca36
}
.VocabularyBase .FlashcardsBase__addButton {
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    -webkit-transition: visibility .5s ease, -webkit-transform .5s ease, -webkit-box-shadow .3s ease-in-out;
    transition: visibility .5s ease, -webkit-transform .5s ease, -webkit-box-shadow .3s ease-in-out;
    -o-transition: transform .5s ease, visibility .5s ease, box-shadow .3s ease-in-out;
    transition: transform .5s ease, visibility .5s ease, box-shadow .3s ease-in-out;
    transition: transform .5s ease, visibility .5s ease, box-shadow .3s ease-in-out, -webkit-transform .5s ease, -webkit-box-shadow .3s ease-in-out
}
.VocabularyBase .FlashcardsBase__addButton:hover {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01)
}
.VocabularyBase .FlashcardsBase__addButton {
    border: 1px solid #ccc
}
.VocabularyDeckPrint__wrapper {
    background: #ccc;
    border: 2px solid #f0f0f0;
    border: .125rem solid #f0f0f0;
    padding: 10px;
    overflow: auto
}
.VocabularyDeckPrint__wrapper .VocabularyDeckPrint__papers {
    width: 8.5in;
    position: relative
}
.VocabularyDeckPrint__wrapper .VocabularyDeckPrint__papers:after {
    content: "";
    display: block;
    position: absolute;
    right: -15px;
    width: 15px;
    height: 1px
}
.VocabularyDeckPrint__wrapper .VocabularyDeckPrint__papers .VocabularyDeckPrint__a4 {
    margin-top: 20px;
    min-height: 11.69in;
    background: #fff;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 12px hsla(0,87%,85%,.1), 1px 1px 4px rgba(0,0,0,.12);
    box-shadow: 2px 2px 12px hsla(0,87%,85%,.1), 1px 1px 4px rgba(0,0,0,.12);
    position: relative
}
.VocabularyDeckPrint__wrapper .VocabularyDeckPrint__papers .VocabularyDeckPrint__a6 {
    margin-top: 20px;
    background: #fff;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 12px rgba(0,0,0,.1), 1px 1px 4px rgba(0,0,0,.12);
    box-shadow: 2px 2px 12px rgba(0,0,0,.1), 1px 1px 4px rgba(0,0,0,.12);
    height: 3in;
    width: 5in;
    position: relative
}
.VocabularyDeckItem .VocabularyDeckItem__imgWrapper {
    position: relative
}
.VocabularyDeckItem .VocabularyDeckItem__imgWrapper .VocabularyDeckItem__imgFlag {
    position: absolute;
    right: 23px;
    bottom: -10px;
    height: 25px;
    width: 25px;
    border: 2px solid #fff;
    border-radius: 50%
}
.VocabularyDeckItem .VocabularyDeckItem__imgWrapper .VocabularyDeckItem__imgPic {
    position: absolute;
    right: -2px;
    bottom: -10px
}
.VocabularyDeckItem .VocabularyDeckItem__img {
    width: 100%;
    padding-bottom: 86%;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}
.VocabularyDeckItem .VocabularyDeckItem__img:hover {
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01)
}
.VocabularyDeckItem .VocabularyDeckItem__img {
    margin-bottom: 20px;
    position: relative;
    border-radius: 18px;
    background: #fff;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 6px 0 -1px #fff, 0 7px 6px rgba(0,0,0,.1), 0 11px 0 -1px #fff, 0 12px 6px rgba(0,0,0,.1);
    box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 6px 0 -1px #fff, 0 7px 6px rgba(0,0,0,.1), 0 11px 0 -1px #fff, 0 12px 6px rgba(0,0,0,.1);
    overflow: hidden
}
.VocabularyDeck__filter {
    min-width: 350px
}
.VocabularyDeckImage {
    position: relative;
    width: 100%;
    padding-bottom: 120%;
    height: 100%
}
.VocabularyDeckImage.VocabularyDeckImage--bordered .VocabularyDeckImage__top {
    border: 3px solid #fff;
    -webkit-box-shadow: none;
    box-shadow: none
}
.VocabularyDeckImage .VocabularyDeckImage__status {
    z-index: 2;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #fff;
    background: hsla(0,0%,100%,.9);
    padding: 0 3px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}
.VocabularyDeckImage .VocabularyDeckImage__study {
    position: absolute;
    bottom: -5px;
    right: -5px
}
.VocabularyDeckImage .VocabularyDeckImage__personal {
    border-radius: 8px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1ea3d2), to(#0699cd));
    background-image: -webkit-linear-gradient(top, #1ea3d2, #0699cd);
    background-image: -o-linear-gradient(top, #1ea3d2, #0699cd);
    background-image: linear-gradient(180deg, #1ea3d2, #0699cd);
    position: absolute;
    z-index: 1
}
.VocabularyDeckImage .VocabularyDeckImage__personal .ProfilePic {
    border: 5px solid #fff
}
.VocabularyDeckImage .VocabularyDeckImage__empty {
    position: absolute;
    z-index: 1
}
.VocabularyDeckImage .VocabularyDeckImage__overlay {
    display: none;
    z-index: 2
}
.VocabularyDeckImage.VocabularyDeckImage__editable {
    cursor: pointer
}
.VocabularyDeckImage.VocabularyDeckImage__editable .VocabularyDeckImage__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgba(0,0,0,.6)
}
.VocabularyDeckImage.VocabularyDeckImage__editable:hover .VocabularyDeckImage__overlay {
    display: block
}
.VocabularyDeckImage .VocabularyDeckImage__top {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    position: absolute;
    background-color: #f8f8f8;
    -webkit-box-shadow: 6px 6px 0 0 #efefef;
    box-shadow: 6px 6px 0 0 #efefef;
    border: 3px solid #ccc
}
.VocabularyDeckImage .VocabularyDeckImage__language {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    width: 27px;
    height: 27px
}
.VocabularyDeckImage .VocabularyDeckImage__pinned {
    position: absolute;
    top: 10px;
    right: 38px;
    z-index: 3;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}
.VocabularyDeckImage .VocabularyDeckImage__pinned .VocabularyDeckImage__pinnedLink {
    position: relative
}
.VocabularyDeckImage .VocabularyDeckImage__pinned .VocabularyDeckImage__pinned--notFull {
    position: absolute;
    top: 0;
    color: red!important
}
.VocabularyDeckImage .VocabularyDeckImage__pinned .VocabularyDeckImage__pinned--notFull:hover {
    color: #fd4444!important
}
.VocabularyDeckImage .VocabularyDeckImage__pinned .VocabularyDeckImage__pinned--full {
    color: #fd4444!important;
    position: absolute;
    top: 0
}
.VocabularyAddPanel {
    display: block;
    border: 3px dashed #ccc;
    height: 70px;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}
.VocabularyAddPanel:hover {
    border: 3px dashed #aaa
}


.VocabularyFeatureCarousel {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    height: 240px
}
.VocabularyFeatureCarousel .h1plus {
    line-height: 1
}
.VocabularyFeatureCarousel.VocabularyFeatureCarousel--hide {
    height: 0;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}
.VocabularyFeatureCarousel .slick-dots li button:before {
    font-size: 14px;
    color: #fff
}
.VocabularyFeatureCarousel .slick-dots {
    bottom: 3px
}
.VocabularyFeatureCarousel .slick-next, .VocabularyFeatureCarousel .slick-prev {
    width: 40px;
    height: 30px;
    z-index: 2
}
.VocabularyFeatureCarousel .slick-next:before, .VocabularyFeatureCarousel .slick-prev:before {
    font-size: 40px
}
.VocabularyFeatureCarousel .slick-prev {
    left: 10px
}
.VocabularyFeatureCarousel .slick-next {
    right: 10px
}
.VocabularyFeatureCarousel__item {
    margin: 0 5px;
    height: 240px;
    padding: 10px 70px;
    cursor: pointer
}

@media (max-width:1024px) {
.VocabularyFeatureCarousel__item .h1plus {
    font-size: 48px;
    font-size: 3rem
}
}
.VocabularyFeatureCarousel__item .VocabularyFeatureCarousel__itemImg {
    height: 180px;
    border-radius: 8px;
    border: 4px solid #fff
}
.VocabularyDeckList .VocabularyDeckItem {
    width: 200px
}

@media (max-width:1024px) {
.VocabularyDeckList .VocabularyDeckItem {
    width: 160px
}
}

@media (max-width:767px) {
.VocabularyDeckList .VocabularyDeckItem {
    width: 120px
}
}
.VocabularyDeckList .slick-track {
    margin-left: 0;
    margin-right: 0
}
.VocabularyDeckList .slick-next:before, .VocabularyDeckList .slick-prev:before {
    color: #ccc;
    font-size: 30px;
    z-index: 3
}
.VocabularyDeckList .slick-next {
    right: -25px
}
.VocabularyDeckList .slick-prev {
    left: -35px
}
.VocabularyDeckList .slick-list, .VocabularyDeckList .slick-slide {
    outline: none!important
}
.VocabularyDeckList .slick-slide:focus, .VocabularyDeckList .slick-slide a {
    outline: none
}
.VocabularyDeckList .slick-slide, .VocabularyDeckList .slick-slide * {
    outline: none!important
}
.VocabularyDecksOverview {
    margin-top: 16px!important
}
.VocabularyDecksOverview .VocabularyFeatureCarousel__img {
    width: 130px
}

@media (max-width:767px) {
.VocabularyDecksOverview {
    padding: 0!important
}
.VocabularyDecksOverview.container {
    margin-top: 16px!important;
    margin-bottom: 0!important
}
.VocabularyDecksOverview .panel {
    border-radius: 0!important;
    margin-bottom: 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}
.VocabularyDecksOverview .VocabularyFeatureCarousel {
    border-radius: 0
}
.VocabularyDecksOverview .VocabularyFeatureCarousel__item {
    margin: 0!important;
    padding: 10px 35px!important
}
.VocabularyDecksOverview .VocabularyFeatureCarousel__img {
    width: 100px
}
}
.VocabularyDeckListItem .VocabularyDeckListItem__img {
    width: 120px
}

@media (max-width:767px) {
.VocabularyDeckListItem .VocabularyDeckListItem__img {
    width: 100px
}
}
.VocabularyStatusLine {
    -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
    background-color: #ccc;
    border-radius: 6px;
    height: 8px;
    max-height: 8px;
    overflow: hidden
}
.VocabularyStatusLine .VocabularyStatusLine--red {
    background-color: #fd4444
}
.VocabularyStatusLine .VocabularyStatusLine--orange {
    background-color: #ffbd04
}
.VocabularyStatusLine .VocabularyStatusLine--green {
    background-color: #36ca36
}
.VocabularyDeckFindModal__list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #efefef;
    padding: 10px;
    border-radius: 8px
}
.VocabularyDeckFindModal__item {
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent
}
.VocabularyDeckFindModal__item.VocabularyDeckFindModal__item--selected, .VocabularyDeckFindModal__item:hover {
    background-color: #e3f3fe;
    border: 2px solid #0699cd
}
.VocabularyDeckLessons .VocabularyDeckLessons__bullet {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 2px solid #ccc
}
.VocabularyDeckLessons .VocabularyDeckLessons__lesson {
    position: relative;
    cursor: pointer;
    background-color: #fff;
    height: 200px;
    border-radius: 8px;
    font-size: 30px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)!important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)!important
}
.VocabularyDeckLessons .VocabularyDeckLessons__lesson:hover {
    background-color: #e3f3fe
}
.VocabularyDeckLessons .VocabularyDeckLessons__lesson .fa-check {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px
}
.VocabularyDeckLessons .VocabularyDeckLessons__lesson.VocabularyDeckLessons__lesson--completed {
    border: 3px solid #36ca36;
    color: #fff;
    background-color: #7d7
}
.VocabularyDeckLessons .VocabularyDeckLessons__lesson.VocabularyDeckLessons__lesson--completed .fa-check {
    display: block
}
.VocabularyDeckLessons .VocabularyDeckLessons__lesson.VocabularyDeckLessons__lesson--disabled {
    color: #ccc;
    background-color: #efefef;
    border: 3px dashed #ccc
}
.VocabularyDeckLessons .VocabularyDeckLessons__lesson.VocabularyDeckLessons__lesson--disabled .fa-lock {
    display: block
}
.VocabularyPanel {
    padding: 50px
}

@media (max-width:1024px) {
.VocabularyPanel {
    padding: 30px
}
}

@media (max-width: 767px) {
    .AutomaticSchedulerModal .AutomaticSchedulerModal--Inner {
        -webkit-box-orient:vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }



    .AutomaticSchedulerModal .AutomaticSchedulerModal--Left {
        height: 200px
    }
}

.AutomaticSchedulerModal .Calendar--header--legend {
    text-align: center
}

.AutomaticSchedulerModal .AutomaticSchedulerModal--Left {
    border-right: 1px solid #d8d8d8;
    background-color: #f2f2f2;
    position: relative;
    overflow: hidden
}

.AutomaticSchedulerModal .AutomaticSchedulerModal--LeftScroll {
    -webkit-flex: auto;
    -ms-flex: auto;
    -webkit-box-flex: 1;
    flex: auto;
    position: static!important;
    overflow-y: auto;
    min-height: 0;
    overflow-x: hidden
}

.AutomaticSchedulerModal .AutomaticSchedulerModal--Item {
    margin: 8px;
    margin: .5rem
}

.AutomaticSchedulerModal .AutomaticSchedulerModal--Item .panel-body {
    padding: 16px;
    padding: 1rem;
    line-height: 28.8px;
    line-height: 1.8rem
}

.AvailabilityCalendar .Calendar--table--row:hover .CalendarCell {
    background-color: #f8f8f8
}

.AvailabilityCalendar .Calendar--header {
    -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.4);
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.4)
}

.AvailabilityCalendar .CalendarCell {
    height: 25px;
    border-bottom: 1px dotted #ccc;
    border-right: 1px solid #efefef;
    cursor: pointer
}

.AvailabilityCalendar .CalendarCell.CalendarCell--available {
    background-color: #3bb85c!important
}
.AvailabilityCalendar .CalendarCell.CalendarCell--immediately {
    background-color: #008000!important
}
.AvailabilityCalendar .CalendarCell.CalendarCell--selected {
    background-color: #0699cd!important
}
.AvailabilityCalendar .CalendarCell.CalendarCell--booked {
    background-color: #e7e7e7!important;
    background-image: -webkit-repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.8) 15px);
    background-image: -o-repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,100%,.8) 10px,hsla(0,0%,100%,.8) 15px);
    background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.8) 15px);
}
}


.AvailabilityCalendar.AvailabilityCalendar--AddMode .DragSelectItem--selected {
    background-color: #3bb85c!important
}

.AvailabilityCalendar.AvailabilityCalendar--RemoveMode .DragSelectItem--selected.CalendarCell--available {
    background-color: #efefef!important
}

.AvailabilityCalendar .AvailabilityCalendar--Saved {
    opacity: 0;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

.AvailabilityCalendar .AvailabilityCalendar--Saved.AvailabilityCalendar--Saved--show {
    opacity: 1
}

.AvailabilityCalendar .CustomRadio {
    display: inline-block
}

.SessionItem {
    margin-bottom: 8px;
    cursor: pointer
}

.SessionItem__LessonPlan {
    margin: 10px 0
}

@media (max-width: 768px) {
    .SessionItem__TopRow {
        margin-bottom:10px
    }
}

@media (min-width: 768px) {
    .SessionItem__TopRow {
        -webkit-box-flex:1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

.SessionItem__StateBar {
    width: 12.8px;
    width: .8rem;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px
}

.SessionItem__ProfilePic {
    width: 90px;
    height: 90px;
    margin-right: 15px
}

.SessionItem__StartingHour {
    line-height: 51.2px;
    line-height: 3.2rem
}

.SessionItem__DayName {
    line-height: 15px
}

.ConfirmSessionCancel__Divider {
    border-left: 1px solid #d8d8d8
}

.ConfirmSessionCancel__ModalBody {
    padding: 0
}

.ConfirmSessionCancel__Section {
    margin: 30px 0;
    padding: 0 30px
}

.ConfirmSessionCancel__Icon {
    width: 96px;
    height: 96px;
    border-radius: 48px;
    color: #fff;
    display: table
}

.ConfirmSessionCancel__Icon i {
    font-size: 48px;
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

.ConfirmSessionCancel__Icon--red {
    background-color: #fd4444
}

.ConfirmSessionCancel__Icon--blue {
    background-color: #0699cd
}

.ConfirmSessionCancel__TextContainer {
    margin-top: 30px;
    font-size: 14.25px;
    letter-spacing: .5px
}

.ConfirmSessionCancel__RedButton {
    background-color: #fd4444
}

.ConfirmSessionCancel__RedButton:hover {
    background-color: #fd5757
}

[data-name=mojs-shape] {
    pointer-events: none
}

.RoomBase__manipulation {
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

.ColorPickerOverlay .sketch-picker {
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

.ColorPickerOverlay .popover-content {
    padding: 0
}

.ColorPickerOverlay .sketch-picker {
    -webkit-box-shadow: none;
    box-shadow: none
}

.RoomBase__sidebarScroll {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    position: relative;
    overflow-y: auto;
    min-height: 0;
    overflow-x: hidden;
    position: static!important
}

.text-theme-wb {
    color: #fff
}

.RoomBase__theme--dark.RoomBase {
    background-color: #1b1b1b
}

.RoomBase__theme--dark .RoomBase__TabGroupWrapper {
    background-color: #000
}

.RoomBase__theme--dark .RoomBase__Content {
    background-color: #1b1b1b;
    border-top: 1px solid #323232
}

.RoomBase__theme--dark .Room__Header {
    background-color: #000
}

.RoomBase__theme--dark .Room__Header a {
    color: #fff
}

.RoomBase__theme--dark .RoomBase__RoomUsers {
    border-top: 1px solid #323232;
    background-color: #1b1b1b
}

.RoomBase__theme--light .text-theme-wb {
    color: #4f5457
}

.RoomBase__theme--light.RoomBase,.RoomBase__theme--light .RoomBase__TabGroupWrapper {
    background-color: #f2f2f2
}

.RoomBase__theme--light .RoomBase__Content {
    background-color: #d8d8d8;
    border-top: 1px solid #c2c2c2
}

.RoomBase__theme--light .Room__Header {
    background-color: #f2f2f2
}

.RoomBase__theme--light .Room__Header a {
    color: #4f5457
}

.RoomBase__theme--light .RoomBase__HandRaise {
    border-color: #4f5457
}

.RoomBase__theme--light .RoomBase__Toolbar {
    background-color: #fff;
    border: 1px solid #f8f8f8
}

.RoomBase__theme--light .RoomBase__Divider {
    border-top: 1px solid #c2c2c2
}

.RoomBase__theme--light .RoomBase__ToolbarSide {
    background-color: #f8f8f8;
    border: 1px solid #f8f8f8
}

.RoomBase__theme--light .RoomBase__ToolbarSide .arrow:after {
    border-left-color: #f8f8f8!important
}

.RoomBase__theme--light .RoomBase__ToolbarButton.RoomBase__ToolbarButton--active {
    background-color: #0699cd!important
}

.RoomBase__theme--light .RoomBase__ToolbarButton:hover {
    background-color: #e3f3fe
}

.RoomBase__theme--light .RoomBase__RoomUsers {
    border-top: 1px solid #c2c2c2;
    background-color: #f2f2f2
}

.RoomBase__theme--light .ScaledContent__children {
    border-right: 1px solid #c2c2c2;
    border-bottom: 1px solid #c2c2c2
}

.RoomBase__theme--light .RoomBase__Sidebar .FlashcardsBase {
    background-color: #1b1b1b
}

.RoomBase__theme--light .RoomBase__Sidebar.RoomBase__Sidebar--opened {
    border-left: 1px solid #c2c2c2;
    background-color: #f2f2f2
}

.RoomBase__theme--light .RoomBase__Sidebar .RoomBase__Sidebar__body {
    background-color: #fff
}

.RoomBase__theme--light .RoomBase__Sidebar .RoomBase__Sidebar__header {
    border-bottom: 1px solid #c2c2c2
}

.RoomBase__theme--light .RoomBase__Sidebar .RoomBase__Sidebar__headerButton:first-child {
    border-left: none!important
}

.RoomBase__theme--light .RoomBase__Sidebar .RoomBase__Sidebar__headerButton:last-child {
    border-right: none!important
}

.RoomBase__theme--light .RoomBase__Sidebar .RoomBase__Sidebar__headerButton.RoomBase__Sidebar__headerButton--active,.RoomBase__theme--light .RoomBase__Sidebar .RoomBase__Sidebar__headerButton:hover {
    border-right: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-bottom: 1px solid #c2c2c2;
    background-color: #fff
}

.RoomBase__theme--light .RoomBase__Sidebar .RoomBase__Sidebar__headerButton .RoomBase__Sidebar__headerButton__badge {
    background-color: red;
    color: #fff
}

.RoomBase__theme--light .Room__Tab {
    color: #838789
}

.RoomBase__theme--light .Room__Tab .Room__Tab__Content {
    border-top: 1px solid #c2c2c2;
    border-bottom: 2px solid #c2c2c2;
    background-color: #fff
}

.RoomBase__theme--light .Room__Tab .Room__Tab__Corner {
    border-bottom: 1px solid #c2c2c2
}

.RoomBase__theme--light .Room__Tab--active {
    color: #333;
    font-weight: 700
}

.RoomBase__theme--light .Room__Tab--active .Room__Tab__Content {
    border-bottom: 2px solid #c2c2c2
}

.RoomBase__theme--light .Room__Tab--active .Room__Tab__Corner {
    border-bottom: 1px solid #c2c2c2
}

.RoomBase {
    width: 100%;
    height: 100vh;
    overflow: hidden
}

.RoomBase,.RoomBase__TabGroupWrapper {
    position: relative
}

.RoomBase__TabGroupWrapper:before {
    content: "";
    position: absolute;
    z-index: 9;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #323232;
    background: transparent
}

.RoomBase__Content {
    position: relative
}

.RoomBase__Overlay2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.RoomBase__HandRaise {
    position: absolute;
    bottom: 20px;
    right: 25px;
    height: 60px;
    width: 60px;
    border: 2px solid #ccc;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter')
}

.RoomBase__HandRaise img {
    -webkit-filter: grayscale(100%);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
    filter: grayscale(100%)
}

.RoomBase__HandRaise:hover {
    border: 2px solid #0699cd
}

.RoomBase__HandRaise:hover img {
    -webkit-filter: none;
    filter: none
}

.RoomBase__HandRaise.RoomBase__HandRaise--raised {
    border: 2px solid #fd4444
}

.RoomBase__HandRaise.RoomBase__HandRaise--raised img {
    -webkit-filter: none;
    filter: none
}

@-webkit-keyframes gatherpulse {
    0% {
        -webkit-box-shadow: 0 0 8px #ea4c89,inset 0 0 8px #ea4c89;
        box-shadow: 0 0 8px #ea4c89,inset 0 0 8px #ea4c89
    }

    50% {
        -webkit-box-shadow: 0 0 16px #ea4c89,inset 0 0 14px #ea4c89;
        box-shadow: 0 0 16px #ea4c89,inset 0 0 14px #ea4c89
    }

    to {
        -webkit-box-shadow: 0 0 8px #ea4c89,inset 0 0 8px #ea4c89;
        box-shadow: 0 0 8px #ea4c89,inset 0 0 8px #ea4c89
    }
}

.RoomBase__GatherParticipants {
    position: absolute;
    bottom: 20px;
    left: 25px;
    height: 60px;
    width: 60px;
    border: 2px solid #ccc;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0 0 8px #ea4c89,inset 0 0 8px #ea4c89;
    box-shadow: 0 0 8px #ea4c89,inset 0 0 8px #ea4c89;
    -webkit-animation: pulse 2s linear 1s infinite
}

.RoomBase__GatherParticipants .Badge__notification {
    background-color: red
}

.RoomBase__GatherParticipants:hover {
    border: 2px solid #0699cd
}

.RoomBase__GatherParticipants:hover img {
    -webkit-filter: none;
    filter: none
}

.RoomBase__GatherParticipants.RoomBase__RoomBase__GatherParticipants--active {
    border: 2px solid #fd4444
}

.RoomBase__GatherParticipants.RoomBase__RoomBase__GatherParticipants--active img {
    -webkit-filter: none;
    filter: none
}

.RoomTab__wrapper {
    position: relative
}

.RoomTab__toolbarWrapper {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0
}

.RoomBase__RoomTabWrapp {
    border: 1px dashed #efefef;
    position: absolute;
    border-radius: 2px;
    cursor: none
}

.RoomBase__RoomTab__cursor {
    position: absolute
}

.RoomBase__SpecialEffects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.MainToolbar--rotateButton img {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.WidgetGrid {
    position: relative
}

.keyboardKey {
    -webkit-box-shadow: 1px 2px 0 3px grey;
    box-shadow: 1px 2px 0 3px grey;
    border-radius: 5px;
    width: 25px;
    display: inline-block
}

.keyboardKey,.keyboardSpace {
    padding: 3px;
    margin-bottom: 5px;
    margin-right: 5px
}

.LobbyTab {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.LobbyTab,.LobbyTab .LobbyTab__user {
    position: absolute
}

.LobbyTab .LobbyTab__user.animations-enabled {
    -webkit-transition: left,top,width,height,font-size;
    -o-transition: left,top,width,height,font-size;
    transition: left,top,width,height,font-size;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in
}

.RoomBase__LobbyJoinMenu {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    flex-direction: column
}

.RoomBase__LobbyJoinMenu,.RoomBase__LobbyJoinMenu .LobbyJoinMenu__webrtcToggleContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column
}

.RoomBase__LobbyJoinMenu .LobbyJoinMenu__webrtcToggleContainer {
    flex-direction: column;
    color: #fff
}

.video-mirror {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg)
}

@-webkit-keyframes fadeinout {
    0%,to {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

@keyframes fadeinout {
    0%,to {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

.RoomBase__RoomUsers {
    height: 100px;
    padding: 4px
}

.RoomBase__UserStream {
    min-height: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    background-color: #000;
    position: relative;
    border-radius: 4px
}

.RoomBase__UserStream .RoomBase__UserStream_reaction {
    -webkit-animation: fadeinout 2s linear forwards;
    animation: fadeinout 2s linear forwards;
    position: absolute;
    width: 100%!important;
    height: 100%!important
}

.RoomBase__UserStream .RoomBase__UserStream_hand {
    position: absolute;
    width: 100%!important;
    height: 100%!important;
    -webkit-animation: bounce 2s linear infinite;
    animation: bounce 2s linear infinite
}

.RoomBase__UserStream .RoomBase__UserStream_hand img {
    width: 100%!important;
    height: 100%!important
}

.RoomBase__UserStream .RoomBase__UserStream_name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 11px;
    background-color: #000;
    background-color: rgba(0,0,0,.5)
}

.RoomBase__UserStream .RoomBase__UserStream_stream {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height: 100%
}

.RoomBase__UserStream .RoomBase__UserStream_info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    background-color: #000;
    background-color: rgba(0,0,0,.6);
    padding: 2px
}

.RoomBase__UserStream .RoomBase__UserStream_status_icons {
    position: absolute;
    left: 0;
    top: 2px;
    margin: 0 2px;
    cursor: pointer
}

.RoomBase__UserStream .RoomBase__UserStream_status_icon {
    margin: 0 3px
}

.RoomBase__UserStream .RoomBase__UserStream_status_recording_icon {
    margin: 0;
    margin-left: -2px;
    margin-top: -1px
}

.RoomBase__UserStream:hover .RoomBase__UserStream_controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.RoomBase__UserStream__reactions {
    padding: 5px
}

.RoomBase__UserStream__reactions img:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

.RoomBase__UserStream:not(:first-child) {
    margin-left: 15px
}

.RoomBase__UserStreamName {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    font-size: 25.6px;
    font-size: 1.6rem;
    line-height: 25.6px;
    line-height: 1.6rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

#statsPopover,#statsPopover .popover-body {
    padding: 0;
    border: 0
}

.NewPopover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: block;
    max-width: 276px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 14px;
    font-size: .875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    border-radius: 8px
}

.NewPopover.show {
    opacity: 1
}

.NewPopover .arrow {
    position: absolute;
    display: block;
    width: 16px;
    width: 1rem;
    height: 8px;
    height: .5rem;
    margin: 0 4.8px;
    margin: 0 .3rem;
    border-color: none;
    border-style: none;
    border: none
}

.NewPopover .arrow:after,.NewPopover .arrow:before {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid
}

.NewPopover.bs-popover-auto[x-placement^=top],.NewPopover.bs-popover-top {
    margin-bottom: 8px;
    margin-bottom: .5rem
}

.NewPopover.bs-popover-auto[x-placement^=top] .arrow,.NewPopover.bs-popover-top .arrow {
    bottom: calc(-.5rem + -1px)
}

.NewPopover.bs-popover-auto[x-placement^=top] .arrow:after,.NewPopover.bs-popover-auto[x-placement^=top] .arrow:before,.NewPopover.bs-popover-top .arrow:after,.NewPopover.bs-popover-top .arrow:before {
    border-width: 8px 8px 0;
    border-width: .5rem .5rem 0
}

.NewPopover.bs-popover-auto[x-placement^=top] .arrow:before,.NewPopover.bs-popover-top .arrow:before {
    bottom: 0;
    border-top-color: rgba(0,0,0,.25)
}

.NewPopover.bs-popover-auto[x-placement^=top] .arrow:after,.NewPopover.bs-popover-top .arrow:after {
    bottom: 1px;
    border-top-color: #fff
}

.NewPopover.bs-popover-auto[x-placement^=right],.NewPopover.bs-popover-right {
    margin-left: 8px;
    margin-left: .5rem
}

.NewPopover.bs-popover-auto[x-placement^=right] .arrow,.NewPopover.bs-popover-right .arrow {
    left: calc(-.5rem + -1px);
    width: 8px;
    width: .5rem;
    height: 16px;
    height: 1rem;
    margin: 4.8px 0;
    margin: .3rem 0
}

.NewPopover.bs-popover-auto[x-placement^=right] .arrow:after,.NewPopover.bs-popover-auto[x-placement^=right] .arrow:before,.NewPopover.bs-popover-right .arrow:after,.NewPopover.bs-popover-right .arrow:before {
    border-width: 8px 8px 8px 0;
    border-width: .5rem .5rem .5rem 0
}

.NewPopover.bs-popover-auto[x-placement^=right] .arrow:before,.NewPopover.bs-popover-right .arrow:before {
    left: 0;
    border-right-color: rgba(0,0,0,.25)
}

.NewPopover.bs-popover-auto[x-placement^=right] .arrow:after,.NewPopover.bs-popover-right .arrow:after {
    left: 1px;
    border-right-color: #fff
}

.NewPopover.bs-popover-auto[x-placement^=bottom],.NewPopover.bs-popover-bottom {
    margin-top: 8px;
    margin-top: .5rem
}

.NewPopover.bs-popover-auto[x-placement^=bottom] .arrow,.NewPopover.bs-popover-bottom .arrow {
    top: calc(-.5rem + -1px)
}

.NewPopover.bs-popover-auto[x-placement^=bottom] .arrow:after,.NewPopover.bs-popover-auto[x-placement^=bottom] .arrow:before,.NewPopover.bs-popover-bottom .arrow:after,.NewPopover.bs-popover-bottom .arrow:before {
    border-width: 0 8px 8px;
    border-width: 0 .5rem .5rem
}

.NewPopover.bs-popover-auto[x-placement^=bottom] .arrow:before,.NewPopover.bs-popover-bottom .arrow:before {
    top: 0;
    border-bottom-color: rgba(0,0,0,.25)
}

.NewPopover.bs-popover-auto[x-placement^=bottom] .arrow:after,.NewPopover.bs-popover-bottom .arrow:after {
    top: 1px;
    border-bottom-color: #fff
}

.NewPopover.bs-popover-auto[x-placement^=bottom] .popover-header:before,.NewPopover.bs-popover-bottom .popover-header:before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 16px;
    width: 1rem;
    margin-left: -8px;
    margin-left: -.5rem;
    content: "";
    border-bottom: 1px solid #f7f7f7
}

.NewPopover.bs-popover-auto[x-placement^=left],.NewPopover.bs-popover-left {
    margin-right: 8px;
    margin-right: .5rem
}

.NewPopover.bs-popover-auto[x-placement^=left] .arrow,.NewPopover.bs-popover-left .arrow {
    right: calc(-.5rem + -1px);
    width: 8px;
    width: .5rem;
    height: 16px;
    height: 1rem;
    margin: 4.8px 0;
    margin: .3rem 0
}

.NewPopover.bs-popover-auto[x-placement^=left] .arrow:after,.NewPopover.bs-popover-auto[x-placement^=left] .arrow:before,.NewPopover.bs-popover-left .arrow:after,.NewPopover.bs-popover-left .arrow:before {
    border-width: 8px 0 8px 8px;
    border-width: .5rem 0 .5rem .5rem
}

.NewPopover.bs-popover-auto[x-placement^=left] .arrow:before,.NewPopover.bs-popover-left .arrow:before {
    right: 0;
    border-left-color: rgba(0,0,0,.25)
}

.NewPopover.bs-popover-auto[x-placement^=left] .arrow:after,.NewPopover.bs-popover-left .arrow:after {
    right: 1px;
    border-left-color: #fff
}

.NewPopover .popover-header {
    padding: 8px 12px;
    padding: .5rem .75rem;
    margin-bottom: 0;
    font-size: 16px;
    font-size: 1rem;
    color: inherit;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px)
}

.NewPopover .popover-header:empty {
    display: none
}

.NewPopover .popover-body {
    padding: 8px 12px;
    padding: .5rem .75rem;
    color: #212529
}

.WebRTCStatsPanel {
    background-color: #170f42;
    color: #fff;
    font-size: 13px;
    line-height: 15px;
    padding: 5px 3px;
    width: 200px;
    border: 1px solid #444;
    border-radius: 5px
}

.WebRTCStatsPanel .WebRTCStatsPanel_stat_row .WebRTCStatsPanel_stat_label {
    -webkit-box-flex: 0.8;
    -webkit-flex: 0.8;
    -ms-flex: 0.8;
    flex: 0.8
}

.WebRTCStatsPanel .WebRTCStatsPanel_stat_row .WebRTCStatsPanel_stat_value {
    -webkit-box-flex: 0.2;
    -webkit-flex: 0.2;
    -ms-flex: 0.2;
    flex: 0.2
}

.WebRTCStatsPanel_bottom_caret {
    color: #fff;
    font-size: 20px;
    position: absolute;
    left: 50%;
    bottom: -18px
}

.WebRTCSignalIndicator {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 18px;
    height: 25px
}

.WebRTCSignalIndicator .WebRTCSignalIndicator_spinner_container {
    width: 15px;
    height: 15px
}

.WebRTCSignalIndicator .WebRTCSignalIndicator_bar {
    background-color: #0699dd;
    margin-right: 1px
}

.WebRTCSignalIndicator .WebRTCSignalIndicator_bar_off {
    background-color: #999
}

.StreamView {
    max-width: 100%;
    min-width: 100%;
    max-height: 100%
}

.StreamView,.StreamView .StreamView__video {
    width: 100%;
    height: 100%
}

.StreamView .StreamView__no_video {
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.StreamView .video-mirror {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg)
}

.StreamView .StreamView__audioLevel_container {
    position: absolute;
    left: 1.6px;
    left: .1rem;
    top: 0;
    width: 19.2px;
    width: 1.2rem;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.StreamGainIndicator__circle_container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.StreamGainIndicator__circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-bottom: 3px
}

.StreamGainIndicator__circle:first-of-type {
    margin-top: 3px
}

.StreamGainIndicator__circle_hide {
    -webkit-animation: fadeOut .5s linear forwards;
    animation: fadeOut .5s linear forwards
}

.StreamGainIndicator__circle_show {
    opacity: 1;
    background-color: #1cb9f1
}

.WidgetsPointer {
    width: 100%;
    height: 100%
}

.WidgetsPointer,.WidgetsPointer * {
    cursor: none!important
}

.Widgets__Dropzone {
    width: 100%;
    height: 100%
}

.RoomWidgets__minimized {
    position: absolute;
    left: 0;
    bottom: 0
}

.Drawings__cursor-resize-0 {
    cursor: n-resize
}

.Drawings__cursor-resize-45 {
    cursor: ne-resize
}

.Drawings__cursor-resize-90 {
    cursor: e-resize
}

.Drawings__cursor-resize-135 {
    cursor: se-resize
}

.Drawings__cursor-resize-180 {
    cursor: s-resize
}

.Drawings__cursor-resize-225 {
    cursor: sw-resize
}

.Drawings__cursor-resize-270 {
    cursor: w-resize
}

.Drawings__cursor-resize-315 {
    cursor: nw-resize
}

.Drawings__cursor-rotate-0,.Drawings__cursor-rotate-45,.Drawings__cursor-rotate-90,.Drawings__cursor-rotate-135,.Drawings__cursor-rotate-180,.Drawings__cursor-rotate-225,.Drawings__cursor-rotate-270,.Drawings__cursor-rotate-315 {
    cursor: crosshair
}

.RoomWidget {
    position: relative
}

.RoomWidget--static header {
    cursor: default!important
}

.RoomWidget--maximized {
    width: 100%!important;
    height: 100%!important;
    top: 0!important;
    left: 0!important;
    border-radius: 0!important
}

.RoomWidget__resize {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -5px;
    right: -5px;
    cursor: nwse-resize
}

.ReactTable {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    border: 1px solid #ddd;
    border-radius: 8px
}

.ReactTable--clickable .rt-tr {
    cursor: pointer
}

.ReactTable .rt-thead [role=columnheader] {
    outline: 0
}

.ReactTable * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.ReactTable .rt-table {
    border-radius: 8px;
    -ms-flex: auto 1;
    -webkit-flex: auto 1;
    flex: auto 1;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 100%;
    border-collapse: collapse;
    overflow: auto
}

.ReactTable .rt-table,.ReactTable .rt-thead {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.ReactTable .rt-thead {
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    border-bottom: 1px solid #ddd;
    color: #4f5457;
    font-weight: 700;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ReactTable .rt-thead.-headerGroups {
    background: #000;
    background: rgba(0,0,0,.03)
}

.ReactTable .rt-thead.-filters,.ReactTable .rt-thead.-headerGroups {
    border-bottom: 1px solid rgba(0,0,0,.05)
}

.ReactTable .rt-thead.-filters input,.ReactTable .rt-thead.-filters select {
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.1);
    background: #fff;
    padding: 5px 7px;
    font-size: inherit;
    border-radius: 3px;
    font-weight: 400;
    outline: none
}

.ReactTable .rt-thead.-filters .rt-th {
    background-color: #fff
}

.ReactTable .rt-thead.-header {
    background-color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.ReactTable .rt-thead .rt-tr {
    text-align: center
}

.ReactTable .rt-thead .rt-td,.ReactTable .rt-thead .rt-th {
    padding: 10px;
    line-height: normal;
    position: relative;
    border-right: 1px solid rgba(0,0,0,.05);
    -webkit-transition: -webkit-box-shadow .3s cubic-bezier(.175,.885,.32,1.275);
    transition: -webkit-box-shadow .3s cubic-bezier(.175,.885,.32,1.275);
    -o-transition: box-shadow .3s cubic-bezier(.175,.885,.32,1.275);
    transition: box-shadow .3s cubic-bezier(.175,.885,.32,1.275);
    transition: box-shadow .3s cubic-bezier(.175,.885,.32,1.275),-webkit-box-shadow .3s cubic-bezier(.175,.885,.32,1.275);
    -webkit-box-shadow: inset 0 0 0 0 transparent;
    box-shadow: inset 0 0 0 0 transparent
}

.ReactTable .rt-thead .rt-td.-sort-asc,.ReactTable .rt-thead .rt-th.-sort-asc {
    -webkit-box-shadow: inset 0 3px 0 0 #0699cd;
    box-shadow: inset 0 3px 0 0 #0699cd
}

.ReactTable .rt-thead .rt-td.-sort-desc,.ReactTable .rt-thead .rt-th.-sort-desc {
    -webkit-box-shadow: inset 0 -3px 0 0 #0699cd;
    box-shadow: inset 0 -3px 0 0 #0699cd
}

.ReactTable .rt-thead .rt-td.-cursor-pointer,.ReactTable .rt-thead .rt-th.-cursor-pointer {
    cursor: pointer
}

.ReactTable .rt-thead .rt-td:last-child,.ReactTable .rt-thead .rt-th:last-child {
    border-right: 0
}

.ReactTable .rt-thead .rt-resizable-header {
    overflow: visible
}

.ReactTable .rt-thead .rt-resizable-header:last-child {
    overflow: hidden
}

.ReactTable .rt-thead .rt-resizable-header-content {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.ReactTable .rt-thead .rt-header-pivot {
    border-right-color: #f7f7f7
}

.ReactTable .rt-thead .rt-header-pivot:after,.ReactTable .rt-thead .rt-header-pivot:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.ReactTable .rt-thead .rt-header-pivot:after {
    border-color: #fff;
    border-color: hsla(0,0%,100%,0);
    border-left-color: #fff;
    border-width: 8px;
    margin-top: -8px
}

.ReactTable .rt-thead .rt-header-pivot:before {
    border-color: #666;
    border-color: hsla(0,0%,40%,0);
    border-left-color: #f7f7f7;
    border-width: 10px;
    margin-top: -10px
}

.ReactTable .rt-tbody {
    -webkit-box-flex: 99999;
    -ms-flex: 99999 1 auto;
    -webkit-flex: 99999 1 auto;
    flex: 99999 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: auto;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1)
}

.ReactTable .rt-tbody .rt-tr-group {
    border-bottom: 1px solid rgba(0,0,0,.05)
}

.ReactTable .rt-tbody .rt-tr-group:last-child {
    border-bottom: 0
}

.ReactTable .rt-tbody .rt-td {
    border-right: 1px solid rgba(0,0,0,.02)
}

.ReactTable .rt-tbody .rt-td:last-child {
    border-right: 0
}

.ReactTable .rt-tbody .rt-expandable {
    cursor: pointer;
    -o-text-overflow: clip;
    text-overflow: clip
}

.ReactTable .rt-tr-group {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch
}

.ReactTable .rt-tr {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex
}

.ReactTable .rt-td,.ReactTable .rt-th {
    text-align: left;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding: 8px;
    overflow: hidden;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    -webkit-transition-property: width,min-width,padding,opacity;
    -o-transition-property: width,min-width,padding,opacity;
    transition-property: width,min-width,padding,opacity
}

.ReactTable .rt-td.-hidden,.ReactTable .rt-th.-hidden {
    width: 0!important;
    min-width: 0!important;
    padding: 0!important;
    border: 0!important;
    opacity: 0!important
}

.ReactTable .rt-expander {
    display: inline-block;
    position: relative;
    margin: 0;
    color: transparent;
    margin: 0 10px
}

.ReactTable .rt-expander:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(-90deg);
    -ms-transform: translate(-50%,-50%) rotate(-90deg);
    transform: translate(-50%,-50%) rotate(-90deg);
    border-left: 5.04px solid transparent;
    border-right: 5.04px solid transparent;
    border-top: 7px solid rgba(0,0,0,.8);
    -webkit-transition: all .3s cubic-bezier(.175,.885,.32,1.275);
    -o-transition: all .3s cubic-bezier(.175,.885,.32,1.275);
    transition: all .3s cubic-bezier(.175,.885,.32,1.275);
    cursor: pointer
}

.ReactTable .rt-expander.-open:after {
    -webkit-transform: translate(-50%,-50%) rotate(0);
    -ms-transform: translate(-50%,-50%) rotate(0);
    transform: translate(-50%,-50%) rotate(0)
}

.ReactTable .rt-resizer {
    display: inline-block;
    position: absolute;
    width: 36px;
    top: 0;
    bottom: 0;
    right: -18px;
    cursor: col-resize;
    z-index: 10
}

.ReactTable .rt-tfoot {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 15px 0 rgba(0,0,0,.15)
}

.ReactTable .rt-tfoot .rt-td {
    border-right: 1px solid rgba(0,0,0,.05)
}

.ReactTable .rt-tfoot .rt-td:last-child {
    border-right: 0
}

.ReactTable.-striped .rt-tr.-odd {
    background: #f8f8f8
}

.ReactTable.-striped .rt-tr.-even {
    background: #fff
}

.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
    background-color: #e3f3fe
}

.ReactTable .-pagination {
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 3px;
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
    box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
    border-top: 2px solid rgba(0,0,0,.1)
}

.ReactTable .-pagination input,.ReactTable .-pagination select {
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.1);
    background: #fff;
    padding: 5px 7px;
    font-size: inherit;
    border-radius: 3px;
    font-weight: 400;
    outline: none
}

.ReactTable .-pagination .-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 3px;
    padding: 6px;
    font-size: 1em;
    color: #000;
    color: rgba(0,0,0,.6);
    background: #000;
    background: rgba(0,0,0,.1);
    -webkit-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
    cursor: pointer;
    outline: none
}

.ReactTable .-pagination .-btn[disabled] {
    opacity: .5;
    cursor: default
}

.ReactTable .-pagination .-btn:not([disabled]):hover {
    background: #000;
    background: rgba(0,0,0,.3);
    color: #fff
}

.ReactTable .-pagination .-next,.ReactTable .-pagination .-previous {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: center
}

.ReactTable .-pagination .-center {
    -webkit-box-flex: 1.5;
    -ms-flex: 1.5;
    -webkit-flex: 1.5;
    flex: 1.5;
    text-align: center;
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around
}

.ReactTable .-pagination .-pageInfo {
    display: inline-block;
    margin: 3px 10px;
    white-space: nowrap
}

.ReactTable .-pagination .-pageJump {
    display: inline-block
}

.ReactTable .-pagination .-pageJump input {
    width: 70px;
    text-align: center
}

.ReactTable .-pagination .-pageSizeOptions {
    margin: 3px 10px
}

.ReactTable .rt-noData {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
    z-index: 1;
    padding: 15px;
    border: 1px solid #d8d8d8;
    border-radius: 4px
}

.ReactTable .-loading,.ReactTable .rt-noData {
    display: block;
    position: absolute;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    pointer-events: none
}

.ReactTable .-loading {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    background: hsla(0,0%,100%,.8);
    z-index: -1;
    opacity: 0
}

.ReactTable .-loading>div {
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    top: 50%;
    left: 0;
    font-size: 15px;
    color: #000;
    color: rgba(0,0,0,.6);
    -webkit-transform: translateY(-52%);
    -ms-transform: translateY(-52%);
    transform: translateY(-52%);
    -webkit-transition: all .3s cubic-bezier(.25,.46,.45,.94);
    -o-transition: all .3s cubic-bezier(.25,.46,.45,.94);
    transition: all .3s cubic-bezier(.25,.46,.45,.94)
}

.ReactTable .-loading.-active {
    opacity: 1;
    z-index: 2;
    pointer-events: all
}

.ReactTable .-loading.-active>div {
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%)
}

.ReactTable .rt-resizing .rt-td,.ReactTable .rt-resizing .rt-th {
    -webkit-transition: none!important;
    -o-transition: none!important;
    transition: none!important;
    cursor: col-resize;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.UserWidget .UserWidget_close_icon_container {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    display: none
}

.UserWidget .UserWidget_toggle_icon_container {
    position: absolute;
    right: 30px;
    top: 0;
    cursor: pointer;
    display: none
}

.UserWidget .UserWidget__user_offline_name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 11px;
    background-color: #000;
    background-color: rgba(0,0,0,.5)
}

.UserWidget .UserWidget_user_offline {
    background: #828c95;
    background: -webkit-linear-gradient(top,#828c95 4%,#28343b);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(4%,#828c95),to(#28343b));
    background: -o-linear-gradient(top,#828c95 4%,#28343b 100%);
    background: linear-gradient(180deg,#828c95 4%,#28343b);
    color: #fff
}

.UserWidget:hover .UserWidget_close_icon_container,.UserWidget:hover .UserWidget_toggle_icon_container {
    display: block
}

.Viewer {
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.Viewer .fa {
    color: #fff
}

.Viewer .Viewer__page--border {
    border-bottom: 1px solid #3f4047
}

.Viewer__pages img {
    min-width: 100%;
    margin: 0;
    padding: 0
}

.Viewer__footer {
    background-color: #3d3f45;
    height: 25px;
    color: #fff;
    padding: 0 10px;
    font-size: 15px
}

.Viewer__footer__separator {
    width: 1px;
    height: 25px;
    background-color: #7e828e;
    margin: 0 10px
}

.Viewer__main {
    z-index: 1
}

.Viewer__sidebar {
    z-index: 2;
    overflow: auto;
    position: absolute;
    top: 0;
    left: -200px;
    height: calc(100% - 25px);
    width: 200px;
    background-color: #3f4047;
    background-color: rgba(63,64,71,.5);
    -webkit-transition: left .25s;
    -o-transition: left .25s;
    transition: left .25s
}

.Viewer__sidebar--active {
    left: 0
}

.Viewer__preview {
    margin: 10px;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    color: #fff;
    font-weight: bolder
}

.Viewer__preview img {
    width: 140px;
    height: 100%;
    cursor: pointer
}

.Viewer__preview--active img {
    border: 10px solid #d0d0d0;
    border: 10px solid hsla(0,0%,82%,.7)
}

.Viewer__loading {
    background-image: -webkit-linear-gradient(45deg,#f8f8f8 25%,#efefef 0,#efefef 50%,#f8f8f8 0,#f8f8f8 75%,#efefef 0,#efefef);
    background-image: -o-linear-gradient(45deg,#f8f8f8 25%,#efefef 25%,#efefef 50%,#f8f8f8 50%,#f8f8f8 75%,#efefef 75%,#efefef 100%);
    background-image: linear-gradient(45deg,#f8f8f8 25%,#efefef 0,#efefef 50%,#f8f8f8 0,#f8f8f8 75%,#efefef 0,#efefef)
}

.Viewer__toolbar {
    position: absolute;
    top: 5px;
    right: 15px;
    z-index: 3
}

.RoomBase__Toolbar {
    z-index: 100;
    border-radius: 4px;
    background-color: #000;
    border: 1px solid #323232;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    position: relative;
    padding: 4px
}

.RoomBase__Divider {
    margin: 4px;
    border-top: 1px solid #323232
}

.RoomBase__ToolbarPopout {
    position: relative
}

.RoomBase__ToolbarSide {
    border-radius: 4px!important;
    background-color: #000!important;
    border: 1px solid #323232;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2)
}

.RoomBase__ToolbarSide .arrow:after {
    border-left-color: #323232!important
}

.RoomBase__ToolbarButton {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 4px
}

.RoomBase__ToolbarButton.RoomBase__ToolbarButton--active {
    background-color: #fff!important
}

.RoomBase__ToolbarButton:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    background-color: #262626
}

.RoomBase__ToolbarButton__badge {
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    min-width: 18px;
    min-height: 18px;
    top: 0;
    right: 0
}

.Dice__die {
    background-color: #fff;
    border: 5px solid #ccc;
    border-radius: 13px;
    width: 150px;
    height: 150px;
    position: relative
}

.Dice__die .Dice__dieDot {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    margin-top: -5px;
    margin-left: -5px;
    position: absolute;
    background-color: #ccc
}

.Dice__die.Dice__die--selectable {
    cursor: pointer
}

.Dice__die.Dice__die--selectable:hover {
    border-color: #888
}

.Dice__die.Dice__die--selectable:hover .Dice__dieDot {
    background-color: #888
}

.Dice__die.Dice__die--selected {
    border-color: #0699cd!important
}

.Dice__die.Dice__die--selected .Dice__dieDot {
    background-color: #0699cd!important
}

.Dice__die .Dice__dieDot--topLeft {
    top: 25%;
    left: 25%
}

.Dice__die .Dice__dieDot--topRight {
    top: 25%;
    left: 75%
}

.Dice__die .Dice__dieDot--middleLeft {
    top: 50%;
    left: 25%
}

.Dice__die .Dice__dieDot--middleRight {
    top: 50%;
    left: 75%
}

.Dice__die .Dice__dieDot--bottomLeft {
    top: 75%;
    left: 25%
}

.Dice__die .Dice__dieDot--bottomRight {
    left: 75%;
    top: 75%
}

.Dice__die .Dice__dieDot--middle {
    top: 50%;
    left: 50%
}

.UniversalVideoPlayer__mainwrapper {
    width: 100%
}

.huatutorPlayer__wrapper {
    position: relative
}

.huatutorPlayer__player {
    width: 100%;
    height: 100%
}

.huatutorPlayer--autoHeight .VerblngPlayer__wrapper {
    padding-top: 56.25%
}

.huatutorPlayer--autoHeight .huatutorPlayer__player {
    position: absolute;
    top: 0;
    left: 0
}

.huatutorPlayer--fullscreen .huatutorPlayer__wrapper {
    padding: 0;
    height: 100vh!important;
    width: 100%!important
}

.huatutorPlayer--fullscreen .huatutorPlayer__player {
    height: calc(100vh - 60px)!important;
    width: 100%!important
}

.huatutorPlayer--fullscreen .huatutorPlayer__controls {
    background-color: #f8f8f8
}

.huatutorPlayer__controls {
    height: 40px
}

.huatutorPlayer__controls .huatutorPlayer__controls_icon {
    cursor: pointer;
    font-size: 24px;
    font-size: 1.5rem;
    width: 24px;
    width: 1.5rem
}

.huatutorPlayer__controls .huatutorPlayer__controls_icon_large {
    cursor: pointer;
    font-size: 27.2px;
    font-size: 1.7rem;
    width: 27.2px;
    width: 1.7rem
}

.huatutorPlayer__controls .huatutorPlayer__controls_disabled {
    color: #aaa
}

.huatutorPlayer__controls .huatutorPlayer__controls_progress_bar {
    margin-top: 0
}

.huatutorPlayer__controls .huatutorPlayer__controls_progress_time {
    font-size: 19.2px;
    font-size: 1.2rem;
    white-space: nowrap
}

.huatutorPlayer__controls .huatutorPlayer__volume_icon {
    cursor: pointer;
    font-size: 32px;
    font-size: 2rem;
    width: 32px;
    width: 2rem
}

.huatutorPlayer__controls .huatutorPlayer__controls_slider {
    margin-top: 0;
    height: 8px
}

.huatutorPlayer__controls .huatutorPlayer__controls_playback_rate {
    font-size: 17.6px;
    font-size: 1.1rem;
    background-color: #fff
}

.huatutorPlayer__controls .ProgressBar {
    width: 100%;
    height: 8px;
    margin-top: 1px;
    position: relative;
    background: #d8d8d8;
    border-radius: 4px
}

.huatutorPlayer__controls .ProgressBar-elapsed,.huatutorPlayer__controls .ProgressBar-value {
    background: #999;
    border-radius: 4px
}

.huatutorPlayer__controls .ProgressBar-seek {
    position: absolute;
    cursor: pointer
}

.huatutorPlayer__controls .ProgressBar-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 100%;
    border: 2px solid #e6e6e6;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    -o-transition: transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s
}

.huatutorPlayer__controls .ProgressBar.isEnabled:hover .ProgressBar-handle,.huatutorPlayer__controls .ProgressBar.isSeekable:hover .ProgressBar-handle {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.huatutorPlayer__controls .ProgressBar.isEnabled:hover .ProgressBar-intent,.huatutorPlayer__controls .ProgressBar.isSeekable:hover .ProgressBar-intent {
    position: absolute;
    background: #000;
    background: rgba(0,0,0,.1)
}

.huatutorPlayer__controls .ProgressBar.isEnabled .ProgressBar-elapsed,.huatutorPlayer__controls .ProgressBar.isSeekable .ProgressBar-elapsed {
    background: -webkit-linear-gradient(358deg,#0699cd,#3bb85c);
    background: -o-linear-gradient(358deg,#0699cd,#3bb85c);
    background: linear-gradient(92deg,#0699cd,#3bb85c)
}

.huatutorPlayer__controls .ProgressBar-elapsed {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.huatutorPlayer__controls .ProgressBar-buffered {
    height: 100%;
    border-radius: 4px;
    background: #bfbfbf
}

.huatutorPlayer__controls .ProgressBar-seek {
    top: -6px;
    right: 0;
    bottom: -6px;
    left: 0
}

.huatutorPlayer__controls .ProgressBar-handle {
    top: 0;
    margin: -4px 0 0 -8px
}

.huatutorPlayer__controls .ProgressBar.isSeekable:hover .ProgressBar-handle {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.huatutorPlayer__controls .ProgressBar.isSeekable:hover .ProgressBar-intent {
    top: 0;
    left: 0;
    height: 100%
}

.huatutorPlayer__controls .ProgressBar.isLoading {
    opacity: .5;
    background: #ccc;
    -webkit-animation: barLoading 2s infinite;
    animation: barLoading 2s infinite
}

.huatutorPlayer__controls_fullscreen {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: 1.6px;
    margin-top: .1rem;
    width: 100%
}

.ImageWidget__img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

.ScaledContent__wrapper {
    position: relative;
    top: 0;
    left: 0
}

.ScaledContent__children {
    border-right: 1px solid #323232;
    border-bottom: 1px solid #323232;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    overflow: hidden
}

.RoomBase__Sidebar {
    width: 0
}

.RoomBase__Sidebar.animations_enabled {
    -webkit-transition: width .5s ease;
    -o-transition: width .5s ease;
    transition: width .5s ease
}

.RoomBase__Sidebar.RoomBase__Sidebar--opened {
    border-left: 1px solid #323232;
    width: 300px;
    background-color: #000
}

.RoomBase__Sidebar .RoomBase__Sidebar__header {
    border-bottom: 1px solid #323232;
    height: 60px;
    min-height: 60px
}

.RoomBase__Sidebar .RoomBase__Sidebar__headerButton {
    position: relative;
    height: 60px;
    min-width: 60px
}

.RoomBase__Sidebar .RoomBase__Sidebar__headerButton.RoomBase__Sidebar__headerButton--active,.RoomBase__Sidebar .RoomBase__Sidebar__headerButton:hover {
    background-color: #1b1b1b
}

.RoomBase__Sidebar .RoomBase__Sidebar__headerButton .RoomBase__Sidebar__headerButton__badge {
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    min-width: 18px;
    min-height: 18px;
    top: 8px;
    right: 8px
}

.RoomBase__Sidebar .RoomBase__Sidebar__body {
    height: 100%;
    overflow: hidden;
    position: relative
}

.RoomEventLog {
    font-size: 12px
}

.RoomEventLog .RoomEventLog__Event_Row {
    min-height: 40px;
    padding-top: 2px;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.RoomEventLog .RoomEventLog__Event_Row .RoomEventLog__Event_Icon {
    padding-left: 3px
}

.RoomEventLogDark {
    color: #fff
}

.RoomEventLogDark .RoomEventLog__Event_Row {
    border-bottom: 1px solid #222
}

.Material {
    margin: 1px;
    cursor: pointer
}

.Material:hover {
    background-color: #e3f3fe
}

.Material--Actions {
    //:200px}

.MaterialsFilter {
    padding: 15px
}

.Material--idle {
    //:-webkit-grab}

.Material__processing {
    font-style: italic;
    margin-left: 24px;
    margin-left: 1.5rem
}

.Material--dragged {
    border-radius: 8px;
    border: 1px dashed #000;
    opacity: .5;
    background: #f3f3f3;
    cursor: -webkit-grabbing
}

.Material--inactive {
    border: 1px dashed;
    opacity: .4;
    cursor: -webkit-grabbing
}

.MaterialGroup .panel-heading .panel-title,.MaterialGroup .panel-heading h4 {
    font-size: 12px;
    color: #4f5457
}

.MaterialGroup .vi {
    font-size: 20px
}

.MaterialGroup--isActive {
    background: #f4faff;
    border: 2px dashed #ccc!important
}

.MaterialGroup--canDrop,.MaterialGroup--isActive,.MaterialGroup--isOver {
    //border: 1px dashed;
    -webkit-box-shadow: inset 0 0 5px 4px rgba(0,0,0,.1);
    box-shadow: inset 0 0 5px 4px rgba(0,0,0,.1)
}

.MaterialGroup--noItems .panel-heading {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.MaterialsBase .DropZoneActive--show {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    display: none;
    border: 4px dashed #888;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.85);
    z-index: 10
}

.MaterialsBase .DropZoneActive .DropZoneActive--show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media (max-width: 768px) {
    .MaterialsBase .MaterialsBase--Toolbar-right {
        width:100%
    }

    .MaterialsBase .MaterialsBase--Toolbar {
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center
    }

    .MaterialsBase .MaterialsBase--Toolbar h1 {
        margin-bottom: 15px
    }

    .MaterialsBase .MaterialsBase--Search {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .MaterialsBase .MaterialsBase--Search .MaterialsBase--Search-filter {
        margin-right: 0;
        margin-bottom: 5px
    }
}

.MaterialsBase .MaterialsBase--Search .MaterialsBase--Search-filter {
    margin-right: 15px
}

.MaterialsBase .MaterialsBase--Toolbar {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.MaterialsBase .MaterialsBase--Toolbar h1 {
    margin-bottom: 0
}

.youtube-lite {
    background-color: #1b1b1b
}

.youtube-lite.stretch-preview {
    cursor: pointer;
    background-size: cover;
    background-position: 50%;
    text-align: center
}

.youtube-lite.stretch-preview i {
    font-size: 21px;
    color: #fff;
    cursor: pointer;
    padding: 12px 25px 12px 29px;
    background-color: #f33;
    opacity: .8;
    position: absolute;
    margin-left: -36px;
    margin-top: -20px;
    top: 50%;
    left: 50%;
    border-radius: 6px
}

.youtube-lite.stretch-preview:hover i {
    background-color: #e52d27;
    opacity: 1
}

.youtube-lite iframe {
    background-color: #000;
    width: 100%;
    height: 100%
}

.youtube-lite.no-thumbnail .preview {
    background-image: none!important
}

.RecordModal__video {
    background: #000;
    width: 100%;
    height: 350px
}

.RecordModal__video .huatutorPlayer__controls {
    background-color: #fff
}

.RecordModal__video .RecordModal__videoTop {
    height: 325px
}

.RecordModal__video video {
    max-height: 100%
}

.RecordToolbar {
    position: absolute;
    bottom: 96px;
    bottom: 6rem;
    background-color: #000;
    padding: 8px 19.2px;
    padding: .5rem 1.2rem;
    border-radius: .8rem;
    margin-left: 16px;
    margin-left: 1rem
}

.RecordModal__UploadingProgress {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 9.6px;
    padding: .6rem
}

.RecordModal__UploadingTextContainer {
    width: 50%
}

.RecordModal__UploadingText {
    font-weight: 500;
    font-size: 17.6px;
    font-size: 1.1rem
}

.RecordModal__UploadingPercent {
    width: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 9.6px;
    padding-right: .6rem;
    font-size: 17.6px;
    font-size: 1.1rem
}

.RecordModal__ProgressBarContainer {
    margin-top: -12.8px;
    margin-top: -.8rem
}

.RecordModal__browserWarningContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 48px;
    padding: 3rem
}

.ResourceToggle .ResourceToggle__toggle {
    color: #fff
}

.EditResourceModal .EditResourceModal--Image {
    background-color: #000;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    width: 250px;
    height: 150px;
    border-radius: 4px
}

.EditResourceModal .EditResourceModal--Image img {
    border-radius: 4px
}

.ResourceModal .ResourceModal--Selected {
    padding: 15px
}

.ResourceModal .ResourceModal__selected-name {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 250px
}

.ResourceModal .DropZoneActive--show {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    display: none;
    border: 4px dashed #888;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.85);
    z-index: 10
}

.ResourceModal .TableRow.TableRow--selected .ResourceToggle-cog {
    color: #fff
}

.ResourceModal .TableRow.TableRow--selected .ResourceIcon {
    color: #fff!important
}

.ResourceModal .DropZoneActive .DropZoneActive--show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.ResourceModal .nav-pills a {
    border-radius: 0
}

.ResourceModal .nav-pills li.active a {
    color: #fff;
    background-color: #0699cd
}

.ResourceModal .ResourceList {
    height: 310px
}

.ResourceModal .ResourceImages {
    cursor: pointer
}

.ResourceModal .ResourceImages .ResourceImages--Images-wrap {
    height: 310px
}

.ResourceModal .ResourceImages .ResourceImages--Filter-1 {
    margin-right: 5px
}

@media (max-width: 768px) {
    .ResourceModal .ResourceImages .ResourceImages--Filter {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .ResourceModal .ResourceImages .ResourceImages--Filter .ResourceImages--Filter-1 {
        margin-right: 0;
        margin-bottom: 5px
    }
}

.ResourceModal .ResourceImages .ResourceImages--Images {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-bottom: 15px;
    padding-top: 5px
}

.ResourceModal .ResourceImages .ImageResource {
    margin-right: 5px;
    margin-bottom: 15px;
    width: 200px;
    position: relative
}

.ResourceModal .ResourceImages .ImageResource .ImageResource--Image {
    overflow: hidden;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 100px
}

.ResourceModal .ResourceImages .ImageResource .ImageResource--text {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block
}

.ResourceModal .ResourceImages .ImageResource .ImageResource--name {
    padding: 5px 15px
}

.ResourceModal .ResourceImages .ImageResource .ImageResource--toggle {
    padding-left: 15px
}

.ResourceModal .ResourceImages .ImageResource.ImageResource--selected {
    border: 1px solid #0699cd!important
}

.ResourceModal .ResourceImages .ImageResource:hover {
    background-color: #e3f3fe;
    border: 1px solid #e3f3fe
}

.S3UploaderButton {
    z-index: 1;
    position: relative
}

.S3UploaderButton--real {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    cursor: pointer;
    -moz-opacity: 0;
    opacity: 0;
    width: 100%;
    height: 100%
}

.FileUploadProgress {
    border-radius: 8px;
    padding: 3px 10px;
    margin-bottom: 5px;
    position: relative;
    border: 1px solid #ccc;
    background-color: #ccc;
    color: #fff
}

.FileUploadProgress a {
    color: #fff
}

.FileUploadProgress .FileUploadProgress--inner {
    border-radius: 8px;
    left: 0;
    top: 0;
    height: 100%;
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c);
    position: absolute
}

.FileResource .TableRowItem {
    word-break: break-all
}

.FolderBase__deleteMenu:hover {
    background-color: #fee3e3!important
}

.FolderBase__deleteMenu {
    color: #fd4444
}

.FoldersPreview {
    border: 1px solid #ccc;
    border-left: none;
    margin-top: 30px
}

.FoldersPreview .FoldersPreview__img {
    border-radius: 2px
}

.FoldersBase .FoldersBase__sort {
    height: 30px
}

.FoldersBase .FoldersBase__odd {
    background-color: #efefef
}

.FoldersBase .FoldersBase--truncate {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.FoldersBase .FoldersBase__files-wrapper {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #efefef;
    overflow-x: hidden;
    overflow-y: auto
}

.FoldersBase .react-contextmenu-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.FoldersBase .FoldersBase__timestamp {
    width: 150px
}

.FoldersBase .FoldersBase__files-wrapper {
    border: 1px solid #ccc;
    border-top: 1px solid #ccc
}

.FoldersBase.FoldersBase--drop .FoldersBase__files-wrapper {
    border: 1px solid #0699cd
}

.FoldersBase .FoldersBase__directory-sub {
    display: none
}

.FoldersBase .FoldersBase__directory--selected .FoldersBase__directory-name-and-toggle--selected {
    color: #fff;
    font-weight: 700;
    background-color: #0699cd!important
}

.FoldersBase .FoldersBase__directory-name {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer
}

.FoldersBase .FolderBase__sort--reverse {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.FoldersBase .FoldersBase__directory-toggle {
    cursor: pointer;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.FoldersBase .FoldersBase__directory-toggle.FoldersBase__directory-toggle--opened {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.FoldersBase .FoldersBase__directory-toggle {
    -webkit-transition: -webkit-transform .1s ease-out;
    transition: -webkit-transform .1s ease-out;
    -o-transition: transform .1s ease-out;
    transition: transform .1s ease-out;
    transition: transform .1s ease-out,-webkit-transform .1s ease-out
}

.FoldersBase .FoldersBase__directory-sub--opened {
    display: block
}

.FoldersBase .FoldersBase__file--selected {
    color: #fff;
    font-weight: 700;
    background-color: #0699cd!important
}

.FoldersBase .FoldersBase__file {
    cursor: pointer;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 8px;
    height: 50px;
    padding: 5px 0
}

.FoldersBase .FoldersBase__file:hover {
    background-color: #e3f3fe
}

.FoldersBase .FoldersBase__directory-name-and-toggle {
    padding: 5px 0;
    height: 50px
}

.FoldersBase .FoldersBase__directory-name-and-toggle:hover {
    background-color: #e3f3fe
}

.FoldersBase .FoldersBase__directory input,.FoldersBase .FoldersBase__file input {
    width: 100%;
    border: 0;
    font-weight: 700;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    background: none;
    color: #fff;
    border: 1px solid #fff;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 5px;
    padding-left: 2px
}

.FoldersBase .FoldersBase__directory input::-moz-selection,.FoldersBase .FoldersBase__file input::-moz-selection {
    color: #0699cd;
    background: #fff;
    background: hsla(0,0%,100%,.99)
}

.FoldersBase .FoldersBase__directory input::selection,.FoldersBase .FoldersBase__file input::selection {
    color: #0699cd;
    background: #fff;
    background: hsla(0,0%,100%,.99)
}

.FoldersBase .FoldersBase__directory input:active,.FoldersBase .FoldersBase__directory input:focus,.FoldersBase .FoldersBase__file input:active,.FoldersBase .FoldersBase__file input:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    background: none
}

.react-contextmenu {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    min-width: 160px;
    outline: none;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    -webkit-transition: opacity .25s ease!important;
    -o-transition: opacity .25s ease!important;
    transition: opacity .25s ease!important;
    z-index: 9999;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175)
}

.react-contextmenu.react-contextmenu--visible {
    opacity: 1;
    pointer-events: auto;
    z-index: 9999
}

.react-contextmenu-item {
    background: 0 0;
    border: 0;
    cursor: pointer;
    font-weight: 400;
    line-height: 1.5;
    padding: 5px;
    text-align: inherit;
    white-space: nowrap
}

.react-contextmenu-item.react-contextmenu-item--active,.react-contextmenu-item.react-contextmenu-item--selected {
    background-color: #e3f3fe;
    border-color: #e3f3fe;
    text-decoration: none
}

.react-contextmenu-item.react-contextmenu-item--disabled,.react-contextmenu-item.react-contextmenu-item--disabled:hover {
    background-color: transparent;
    border-color: #000;
    border-color: rgba(0,0,0,.15);
    color: #878a8c
}

.react-contextmenu-item--divider {
    border-bottom: 1px solid rgba(0,0,0,.15);
    cursor: inherit;
    padding: 0
}

.react-contextmenu-item--divider:hover {
    background-color: transparent;
    border-color: #000;
    border-color: rgba(0,0,0,.15)
}

.react-contextmenu-item.react-contextmenu-submenu {
    padding: 0
}

.react-contextmenu-item.react-contextmenu-submenu>.react-contextmenu-item:after {
    content: "\25B6";
    display: inline-block;
    position: absolute;
    right: 7px
}

.example-multiple-targets:after {
    content: attr(data-count);
    display: block
}

.GooglePreview-unsupportedFileTypeIcon {
    text-align: center;
    font-size: 45px;
    font-weight: 500
}

.GooglePreview-unsupportedFileTypeText {
    text-align: center;
    font-size: 15px;
    font-weight: 500
}

.GooglePreview-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.GooglePreview-imagewrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    overflow-y: auto;
    min-height: 0;
    overflow-x: hidden
}

.GooglePreview-iframe {
    width: 100%;
    height: 100%
}

.GooglePreview__VideoAttachment__audioOnly {
    min-width: 80%;
    height: 60.8px;
    height: 3.8rem
}

.UploadPhotoArea {
    min-height: 400px
}

.UploadPhotoArea img {
    max-width: 500px
}

.UploadPhotoArea .DropZone {
    min-height: 400px;
    border: 4px dashed #888;
    background-color: #efefef;
    background: -webkit-repeating-linear-gradient(45deg,#fff,#fff 10px,#efefef 0,#efefef 20px);
    background: -o-repeating-linear-gradient(45deg,#fff,#fff 10px,#efefef 10px,#efefef 20px);
    background: repeating-linear-gradient(45deg,#fff,#fff 10px,#efefef 0,#efefef 20px)
}

.UploadPhotoArea .DropZone.DropZoneActive {
    border-color: #000
}

.ImageSearchResults__more_button {
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ImageSearchModal .modal-body {
    min-height: 300px
}

.ImageSearchModal img {
    cursor: pointer;
    height: 140px;
    margin: 5px
}

.ImageSearchModal .ImageSearchModal__results {
    max-height: 400px;
    overflow: auto
}

.ImageSearchModal .ImageSearchModal__img {
    border-radius: 3px
}

.ImageSearchModal .ImageSearchModal__img--active {
    border: 4px solid #0699cd;
    border-radius: 3px
}

.FlashcardBase .FlashcardBase__scroll {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    position: relative;
    overflow-y: auto;
    min-height: 0;
    overflow-x: hidden;
    position: static!important
}

.FlashcardsBase__addButton {
    height: 75px;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.3);
    cursor: pointer;
    border-radius: 6px
}

.FlashcardsBase__addButton:hover {
    background-color: #fff;
    background-color: hsla(0,0%,100%,.8)
}

.FlashcardPanel {
    position: relative;
    min-height: 80px
}

.FlashcardPanel.FlashcardPanel--editable {
    cursor: pointer
}

.FlashcardPanel.FlashcardPanel--editable:hover {
    background-color: #e3f3fe
}

.FlashcardPanel .FlashcardPanel__language {
    position: absolute;
    top: 2px;
    right: 5px
}

.FlashcardInput {
    border: 0!important;
    padding: 5px 0;
    border-bottom: 2px solid #ccc!important;
    border-radius: 0!important
}

.FlashcardInput:active,.FlashcardInput:focus {
    border-bottom: 3px solid #0699cd!important
}

.FlashcardInput__specialChars.FlashcardInput__specialChars--hidden {
    max-height: 0;
    border: none
}

.FlashcardInput__specialChars {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    width: 100%;
    position: absolute;
    top: 0;
    background-color: #fff;
    border: 1px solid #efefef;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    max-height: 45px;
    -webkit-transition: max-height .2s ease-in-out;
    -o-transition: max-height .2s ease-in-out;
    transition: max-height .2s ease-in-out
}

.FlashcardInput__specialChars ul {
    margin-bottom: 0;
    padding: 5px
}

.FlashcardInput__specialChars:hover {
    height: auto;
    max-height: 200px
}

.FlashcardInput__specialChars {
    overflow-y: hidden
}

.MessageRoom {
        width:100%;
        -webkit-box-flex:1;
        -ms-flex:auto;
        flex:auto;
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column
    }
    .MessageRoom.MessageRoom--Mini .MessageInput {
        border-radius:0!important
    }
    .MessageRoom .MessageBody--Translate {
        padding:5px;
        border:1px dashed #ccc
    }
    .MessageRoom .MessageList {
        -webkit-box-flex:1;
        -ms-flex:1 1 0%;
        flex:1 1 0%;
        min-height:0;
        position:relative;
        overflow:hidden;
        width:100%;
        height:100%;
        background-color:#fff
    }
    .MessageRoom .MessageList .MessageList-Scroll {
        -webkit-box-flex:1;
        -ms-flex:auto;
        flex:auto;
        position:static!important;
        overflow-y:auto;
        min-height:0;
        overflow-x:hidden
    }
    .MessageRoom .MessageList .loading {
        color:#ccc
    }
    .MessageRoom .MessageList .date-hr {
        width:50%;
        text-align:center;
        border-bottom:1px solid #eee;
        line-height:.1em;
        margin:20px 25%
    }
    .MessageRoom .MessageList .date-hr span {
        background:#fff;
        padding:0 10px
    }
    .MessageRoom .MessageList .load-more {
        border-bottom:1px solid #e2e2e2;
        background-color:#f5f5f5;
        text-align:center;
        padding:11px;
        cursor:pointer
    }
    .MessageRoom .MessageList .load-more.loading {
        color:#ccc
    }
    .MessageRoom .MessageList .load-more:hover {
        background-color:#f8f8f8
    }
    .MessageRoom .MessageList-NewMessages {
        position:absolute;
        padding:5px;
        width:100%;
        bottom:0;
        left:0;
        background-color:#27ae60;
        color:#fff;
        font-weight:700;
        text-align:center;
        cursor:pointer
    }
    .MessageRoom .Message {
        font-size:22.4px;
        font-size:1.4rem;
        padding:5px 10px;
        position:relative;
        margin-bottom: 20px;
    }
    .MessageRoom .Message .Message--Toolbar {
        position:absolute;
        right:15px;
        top:-10px;
        z-index:2
    }
    .MessageRoom .Message .Message--ProfilePic {
        min-width:35px
    }
    .MessageRoom .Message:hover {
        background-color:#f8f8f8
    }
    .MessageRoom .Message:hover .Message--Left--hover {
        display:block
    }
    .MessageRoom .Message.Message-NoHeader .MessageBody {
        margin-bottom:0
    }
    
    .MessageRoom .Message.Message-Private {
        border-top:1px solid #ccc;
        border-bottom:1px solid #ccc
    }
    .MessageRoom .Message .self {
        align-items: flex-end;

    }
    .MessageRoom .Message .Message--Left {
        width:45px;
        min-width:45px
    }
    .MessageRoom .Message .Message--Left--margin {
        width:20px;
        min-width:20px
    }
    .MessageRoom .Message .Message--Left--hover {
        display:none;
        font-size:12px
    }
    .MessageRoom .Message .emojione {
        width:25px;
        height:25px
    }
    .MessageRoom .Message .sender {
        font-weight:400;
        color:#4c4848
    }
    .MessageRoom .Message .userlable{
        width:89%;
    }
    .MessageRoom .Message .self .userlable{
        -webkit-justify-content:flex-end;
    }
    .MessageRoom .Message .self .userlable a{
        margin: 0 5px 0 20px;
    }
    .MessageRoom .Message .MessageBody {
        word-break:break-word;
        font-weight:400;
        width: fit-content;
        max-width: 95%;
        border: 1px solid #e8e8e8;
        padding: 8px;
        border-radius: 10px;
        
    }
    .MessageRoom .Message .self .MessageBody {
        background-color: #e3f3fe;
    }
    .MessageRoom .Message .Message--SeenBy {
        color:#838789
    }
    @media(max-width:992px) {
        .MessageRoom .MessageInput {
        border-bottom-left-radius:8px
    }
    }.MessageRoom .MessageInput {
        padding:15px;
        background-color:#f2f2f2;
        padding-bottom:5px;
        border-top:1px solid #e6e6e6;
        border-bottom-right-radius:8px;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex
    }
    .MessageRoom .MessageInput .MessageInput--btnActive {
        background-color:#e6e6e6
    }
    .MessageRoom .MessageInput .words-input-row .input-group-addon {
        padding:6px 6px 6px 0
    }
    .MessageRoom .MessageInput .TypingIndicator {
        position:absolute;
        top:-20px;
        left:0;
        width:100%
    }
    .MessageRoom .MessageInput .FileUploadButton {
        width:100%;
        color:inherit;
        font-size:inherit;
        text-align:left;
        padding-left:20px;
        border-radius:0;
        line-height:1.66666667;
        position:relative;
        padding-top:2px;
        padding-bottom:2px
    }
    .MessageRoom .MessageInput .FileUploadButton:hover {
        color:#787b83;
        background-color:#e3f3fe
    }
    .MessageRoom .MessageInput .FileUploadButton span {
        top:2px;
        position:absolute
    }
    .MessageRoom .MessageInput .FileUploadButton input {
        max-height:26px
    }
    .MessageRoom .MessageInput .DropZoneActive--show {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        text-align:center;
        font-size:20px;
        display:none;
        border:4px dashed #888;
        background-color:#fff;
        background-color:hsla(0,0%,100%,.85);
        z-index:10
    }
    .MessageRoom .MessageInput .DropZoneActive .DropZoneActive--show {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex
    }
    .MessageRoom .MessageInput .MessageInput--icons .MessageInput--toggle.open,.MessageRoom .MessageInput .MessageInput--icons .MessageInput--toggle:hover {
        color:#0699cd
    }
    .MessageRoom .MessageInput .alert-box {
        background-color:#2ecc71;
        color:#fff;
        font-size:15px
    }
    .MessageRoom .MessageInput textarea {
        border-radius:4px;
        border:2px solid #d2d9dd;
        margin-bottom:5px;
        padding:5px;
        padding-right:25px;
        width:100%
    }
    .MessageRoom .MessageInput textarea:focus {
        overflow:auto;
        outline:none;
        -webkit-box-shadow:none;
        box-shadow:none
    }
    .MessageRoom .MessageInput .attachment {
        display:inline-block;
        width:115px;
        -o-text-overflow:ellipsis;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap
    }
    .MessageRoom .MessageInput .attachment .fa-remove {
        cursor:pointer
    }
    @media only screen and (max-width:576px) {
        .MessageRoom .MessageInput .controls {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column
    }
    }
.CurrentlyTyping {
    height: 40px;
    height: 2.5rem
}

.PeerTypingIndicatorText {
    font-size: 25px;
    width: auto;
    border-radius: 50px;
    padding: 10px;
    display: table;
    position: relative
}

.PeerTypingIndicatorText span {
    height: 5px;
    width: 5px;
    float: left;
    margin: 0 1px;
    background-color: #9e9ea1;
    display: block;
    border-radius: 50%;
    opacity: .4
}

.PeerTypingIndicatorText span:first-of-type {
    -webkit-animation: 1s blink infinite .3333s;
    animation: 1s blink infinite .3333s
}

.PeerTypingIndicatorText span:nth-of-type(2) {
    -webkit-animation: 1s blink infinite .6666s;
    animation: 1s blink infinite .6666s
}

.PeerTypingIndicatorText span:nth-of-type(3) {
    -webkit-animation: 1s blink infinite .9999s;
    animation: 1s blink infinite .9999s
}

@keyframes ellipsis {
    to {
        width: 1.25em
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 1.25em
    }
}

.MessagesHeader {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
    z-index: 1;
    background-color: #fff;
    padding: 10px;
    text-align: center;
    -webkit-box-shadow: 0 3px 2px -2px rgba(0,0,0,.1);
    box-shadow: 0 3px 2px -2px rgba(0,0,0,.1)
}

.MessagesHeader .PresenceProfilePic {
    margin-right: 10px
}

.MessagesHeader .PresenceProfilePic .ProfilePic {
    width: 44px;
    height: 44px;
    display: inline;
    border-radius: 50%
}

.MessagesHeaderTabVersion {
    height: 44px;
    min-height: 44px;
    background-color: #484b4c;
    padding-left: 15px
}

.MessagesHeaderTabVersion .TabHeaderText {
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: 2px;
    color: #fff
}

.MessageAttachments .panel {
    border: 1px solid #e8e8e8!important
}

.MessageAttachments .StandardAttachment .panel-body {
    margin: 15px;
    padding: 0
}

.MessageAttachments .StandardAttachment .panel-body .SessionMiniInfo {
    padding: 0;
    padding-bottom: 5px
}

.MessageAttachments .StandardAttachment .panel-body .SessionMiniInfo .verb-profile-pic {
    min-width: 0
}

.MessageAttachments .StandardAttachment table tr {
    background-color: #f8f8f8!important;
    border-bottom: 0!important
}

.MessageAttachments .StandardAttachment .title {
    float: left;
    padding: 7px;
    color: #fff;
    border-right: 1px solid hsla(0,0%,46%,.14);
    border-radius-top-left: 2px;
    border-radius-bottom-left: 2px;
    width: 130px
}

.MessageAttachments .StandardAttachment .body {
    float: left;
    background: #f8f8f8;
    border: 1px solid #757575;
    border: 1px solid hsla(0,0%,46%,.14);
    border-radius-top-right: 2px;
    border-radius-bottom-right: 2px;
    padding: 6px
}

.MessageAttachments .StandardAttachment .body .key {
    padding-right: 5px;
    color: #3f3f3f
}

.MessageAttachments .ImageAttachment .panel-body {
    margin: 0
}

.MessageAttachments .ImageAttachment .panel-body img {
    cursor: -webkit-zoom-in;
    cursor: zoom-in
}

.MessageAttachments .ImageAttachment .panel-body .uploaded-image {
    max-height: 400px;
    margin-top: 0!important;
    border-radius: 8px 10px 0 0
}

.MessageAttachments .FileAttachment .panel-body {
    margin: 0;
    padding: 0;
    cursor: pointer
}

.Attachment--name {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    word-break: break-all
}

.hoverfix {
    overflow: visible
}

.VideoAttachment__browserWarningContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.VideoAttachment__warningIcon {
    font-size: 51.2px;
    font-size: 3.2rem;
    color: #f0ad4e
}

.VideoAttachment__browserWarning {
    margin-top: 16px;
    margin-top: 1rem;
    font-size: 19.2px;
    font-size: 1.2rem
}

.VideoAttachment__audioOnly {
    width: 100%;
    height: 76.8px;
    height: 4.8rem
}

.CorrectionModal .SentenceCorrection {
    border-bottom: 1px solid #efefef;
    margin-bottom: 16px;
    margin-bottom: 1rem;
    padding-bottom: 16px;
    padding-bottom: 1rem
}

.CorrectionModal .SentenceCorrection:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.SentenceCorrection .SentenceCorrection__word.SentenceCorrection__word--added {
    color: #34d058
}

.SentenceCorrection .SentenceCorrection__word.SentenceCorrection__word--removed {
    color: #fd4444;
    text-decoration: line-through
}

.NewLearningPlan__wrapper {
    overflow: hidden
}

.NewLearningPlan .NewLearningPlan--overlay {
    z-index: 2;
    opacity: .3;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff
}

.NewLearningPlan .NewLearningPlan__paperPlane--wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: visible
}

.NewLearningPlan .NewLearningPlan__paperPlane {
    position: absolute;
    height: 70px;
    width: 70px;
    margin-left: -35px
}

.NewLearningPlan .NewLearningPlan__paperPlane.NewLearningPlan__paperPlane--fly {
    top: -80px;
    right: -1000px;
    -webkit-animation: flyaway 1.3s linear;
    animation: flyaway 1.3s linear
}

.RescheduleSuggestionAttachment__Footer {
    background-color: #f8f8f8;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 10px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.LoadingPanelAttachment__Spinner {
    height: 120px
}

.RescheduleInfo__StateBar {
    width: 8px;
    background-color: blue
}

.RescheduleInfo__ProfilePic {
    width: 86px;
    height: 86px;
    margin-right: 15px
}

.RescheduleInfo__Arrow {
    margin: 20px
}

@media (max-width: 768px) {
    .RescheduleInfo__Arrow {
        margin:20px 0
    }
}

.RescheduleInfo__Arrow i {
    font-size: 23px;
    color: #36ca36
}

@media (max-width: 768px) {
    .RescheduleInfo__Arrow i {
        -webkit-transform:rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

.teacher-featured {
    width: 150px;
    color: #fff;
    border-top-left-radius: 4px;
    position: absolute;
    font-size: 10px;
    letter-spacing: 3px;
    z-index: 2
}

.label-teacher-featured,.teacher-featured {
    background-color: #0699cd;
    text-align: center;
    text-transform: uppercase
}

.label-teacher-featured {
    position: relative;
    font-size: 8px;
    letter-spacing: 1px;
    margin-left: 4px
}

.ProfileItemBase {
    padding: 15px
}

.ProfileItemBase .teacher-featured {
    border-radius: 4px 4px 0 0;
    left: 0
}

.ProfileItemBase .fa-heart:hover {
    color: #fd4444
}

.ProfileItemBase .PresenceProfilePic {
    min-width: 150px;
    min-height: 150px
}

.ProfileItemBase .PresenceProfilePic img {
    border-radius: 4px
}

.ProfileItemBase .ProfileItemBase--InnerBlock {
    padding: 16px;
    padding: 1rem;
    border-radius: .4rem;
    margin-right: 8px;
    margin-right: .5rem
}

@media (max-width: 768px) {
    .ProfileItemBase .ProfileItemBase--InnerBlock {
        margin-right:0;
        margin-bottom: 8px;
        margin-bottom: .5rem
    }
}

@media (max-width: 768px) {
    .ProfileItemBase .ProfileItemBase--InnerBlock .StarRatings {
        margin-top:19.2px;
        margin-top: 1.2rem
    }
}

.ProfileItemBase .ProfileItemBase--InnerBlock {
    background-color: #f8f8f8
}

.ProfileItemBase .ProfileItemBase--InnerBlock label {
    margin-bottom: 0
}

.ProfileItemBase .teacher-pricing {
    padding: 10px 0;
    font-size: 14.25px;
    line-height: 20px
}

.ProfileItemBase .teacher-pricing:hover {
    background-color: #e3f3fe
}

.ProfileItemBase .teacher-pricing>a {
    color: #787b83
}

.ProfileItemBase .teacher-pricing-emphasize {
    border: 2px dashed #0699cd
}

.ProfileItemBase .session-number {
    font-size: 16px;
    line-height: 40px
}

.ProfileItemBase .session-trial {
    font-size: 16px
}

.ProfileItemBase .session-rate {
    color: #7ed321;
    font-size: 20px;
    font-weight: 700
}

.ProfileItemBase .reviewer-name {
    font-size: 14.25px;
    font-weight: 700
}

.ProfileItemBase .reviewer-country {
    line-height: 14px
}

.ProfileItemBase .link-normalize>a {
    color: #787b83
}

.ProfileItemBase .profile-header {
    padding: 15px;
    background-color: #e5e5e5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

@media (min-width: 768px) {
    .ProfileItemBase .nav-right {
        position:fixed;
        top: 73px;
        right: 20px
    }
}

.ProfileItemBase .profile-teacher_picture {
    width: 120px;
    height: 120px;
    border-radius: 60px
}

@media (max-width: 992px) {
    .ProfileItemBase .profile-teacher_picture {
        width:90px;
        height: 90px;
        border-radius: 45px
    }
}

.ProfileItemBase .profile-name {
    font-size: 18px;
    display: inline
}

.ProfileItemBase .profile-rating {
    display: inline;
    position: relative;
    top: -2px
}

.ProfileItemBase .profile-rating-number {
    font-size: 12px;
    display: inline
}

@media (max-width: 768px) {
    .ProfileItemBase .profile-name {
        display:block;
        text-align: center
    }

    .ProfileItemBase .profile-rating {
        display: block;
        text-align: center;
        font-size: 14.25px
    }
}

.ProfileItemBase .profile-location {
    font-size: 14.25px
}

.ProfileItemBase .profile-followers {
    font-size: 10px;
    text-transform: uppercase
}

.ProfileItemBase .lesson-student-picture {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: inline
}

.ProfileItemBase .lesson-price {
    font-size: 24px;
    font-weight: 700;
    color: #3bb85c
}

.ProfileItemBase .lesson-price-former {
    text-decoration: line-through
}

.ProfileItemBase .col-schedule {
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 4px
}

@media (max-width: 768px) {
    .ProfileItemBase .col-schedule {
        padding-left:1px;
        padding-right: 1px;
        margin-bottom: 2px
    }
}

.ProfileItemBase .btn-scheduler {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
    height: 30px
}

.ProfileItemBase .btn-scheduler-scheduled {
    background-color: #0699cd
}

.ProfileItemBase .btn-scheduler-past:disabled {
    background-color: #c2c2c2
}

.ProfileItemBase .btn-scheduler-available,.ProfileItemBase .btn-scheduler-available:disabled {
    background-color: #3bb85c
}

.ProfileItemBase .img-outline {
    border: 8px solid #f2f2f2
}

.ProfileItemBase .container-full {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0
}

.ProfileItemBase .introduction-background {
    background-size: cover;
    background-position: 50%;
    padding: 40px
}

.ProfileItemBase .introduction-title {
    color: #fff;
    font-size: 36px
}

.ProfileItemBase .introduction-description {
    color: #fff;
    font-size: 18px
}

@media (min-width: 768px) {
    .ProfileItemBase .mobile-padding-left {
        padding-left:0
    }
}

.ProfileItemBase .mobile-padding-left {
    padding-left: 15px
}

@media (min-width: 992px) {
    .ProfileItemBase .tablet-padding-left {
        padding-left:0
    }
}

.ProfileItemBase {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: #787b83;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    overflow: hidden
}

.ProfileItemBase,.ProfileItemBase .lesson {
    margin-bottom: 20px
}

.ProfileItemBase .teacher-picture {
    min-height: 150px;
    min-width: 150px
}

.ProfileItemBase .teacher-picture>img {
    width: 150px;
    height: 150px
}

.ProfileItemBase .teacher-container {
    padding: 10px;
    width: 100%
}

.ProfileItemBase .teacher-information {
    margin-bottom: 2px
}

.ProfileItemBase .teacher-picture-tablet {
    display: inline;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px
}

.ProfileItemBase .teacher-name {
    margin-right: 5px;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 2px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 175px;
    font-size: 18px
}

.ProfileItemBase .teacher-name a {
    color: #787b83!important
}

.ProfileItemBase .btn-book {
    font-size: 12px
}

.ProfileItemBase .teacher-rating {
    font-size: 12px;
    position: relative;
    margin-left: 4px
}

.ProfileItemBase .teacher-rating-number {
    font-size: 11px;
    position: relative
}

.ProfileItemBase .teacher-details {
    font-size: 11px;
    margin-top: -3px;
    margin-bottom: 4px
}

.ProfileItemBase .teacher-label {
    font-size: 10px;
    margin-right: 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px
}

.ProfileItemBase .teacher-price {
    color: #3bb85c;
    font-weight: 700
}

.ProfileItemBase .teacher-biography {
    font-size: 11px;
    height: 40px;
    overflow: hidden
}

.TeacherListing .teacher-pricing {
    padding: 10px 0;
    font-size: 14.25px;
    line-height: 20px
}

.TeacherListing .teacher-pricing:hover {
    background-color: #e3f3fe
}

.TeacherListing .teacher-pricing>a {
    color: #787b83
}

.TeacherListing .teacher-pricing-emphasize {
    border: 2px dashed #0699cd
}

.TeacherListing .session-number {
    font-size: 16px;
    line-height: 40px
}

.TeacherListing .session-trial {
    font-size: 16px
}

.TeacherListing .session-rate {
    color: #7ed321;
    font-size: 20px;
    font-weight: 700
}

.TeacherListing .reviewer-name {
    font-size: 14.25px;
    font-weight: 700
}

.TeacherListing .reviewer-country {
    line-height: 14px
}

.TeacherListing .link-normalize>a {
    color: #787b83
}

.TeacherListing .profile-header {
    padding: 15px;
    background-color: #e5e5e5;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

@media (min-width: 768px) {
    .TeacherListing .nav-right {
        position:fixed;
        top: 73px;
        right: 20px
    }
}

.TeacherListing .profile-teacher_picture {
    width: 120px;
    height: 120px;
    border-radius: 60px
}

@media (max-width: 992px) {
    .TeacherListing .profile-teacher_picture {
        width:90px;
        height: 90px;
        border-radius: 45px
    }
}

.TeacherListing .profile-name {
    font-size: 18px;
    display: inline
}

.TeacherListing .profile-rating {
    display: inline;
    position: relative;
    top: -2px
}

.TeacherListing .profile-rating-number {
    font-size: 12px;
    display: inline
}

@media (max-width: 768px) {
    .TeacherListing .profile-name {
        display:block;
        text-align: center
    }

    .TeacherListing .profile-rating {
        display: block;
        text-align: center;
        font-size: 14.25px
    }
}

.TeacherListing .profile-location {
    font-size: 14.25px
}

.TeacherListing .profile-followers {
    font-size: 10px;
    text-transform: uppercase
}

.TeacherListing .lesson-student-picture {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: inline
}

.TeacherListing .lesson-price {
    font-size: 24px;
    font-weight: 700;
    color: #3bb85c
}

.TeacherListing .lesson-price-former {
    text-decoration: line-through
}

.TeacherListing .col-schedule {
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 4px
}

@media (max-width: 768px) {
    .TeacherListing .col-schedule {
        padding-left:1px;
        padding-right: 1px;
        margin-bottom: 2px
    }
}

.TeacherListing .btn-scheduler {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
    height: 30px
}

.TeacherListing .btn-scheduler-scheduled {
    background-color: #0699cd
}

.TeacherListing .btn-scheduler-past:disabled {
    background-color: #c2c2c2
}

.TeacherListing .btn-scheduler-available,.TeacherListing .btn-scheduler-available:disabled {
    background-color: #3bb85c
}

.TeacherListing .img-outline {
    border: 8px solid #f2f2f2
}

.TeacherListing .container-full {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0
}

.TeacherListing .introduction-background {
    background-size: cover;
    background-position: 50%;
    padding: 40px
}

.TeacherListing .introduction-title {
    color: #fff;
    font-size: 36px
}

.TeacherListing .introduction-description {
    color: #fff;
    font-size: 18px
}

@media (min-width: 768px) {
    .TeacherListing .mobile-padding-left {
        padding-left:0
    }
}

.TeacherListing .mobile-padding-left {
    padding-left: 15px
}

@media (min-width: 992px) {
    .TeacherListing .tablet-padding-left {
        padding-left:0
    }
}

.TeacherListing {
    @-webkit-keyframes pulseTeacher {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        50% {
            -webkit-transform: scale(1.02);
            transform: scale(1.02)
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }

    @keyframes pulseTeacher {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        50% {
            -webkit-transform: scale(1.02);
            transform: scale(1.02)
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }
}

.TeacherListing .teacher {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: #787b83;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    margin-bottom: 20px;
    overflow: hidden
}

.TeacherListing .lesson {
    margin-bottom: 20px
}

.TeacherListing .teacher-picture {
    min-height: 150px;
    min-width: 150px
}

.TeacherListing .teacher-picture>img {
    width: 150px;
    height: 150px
}

.TeacherListing .teacher-container {
    padding: 10px;
    width: 100%
}

.TeacherListing .teacher-information {
    margin-bottom: 2px
}

.TeacherListing .teacher-picture-tablet {
    display: inline;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px
}

.TeacherListing .teacher-name {
    margin-right: 5px;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 2px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 175px;
    font-size: 18px
}

.TeacherListing .teacher-name a {
    color: #787b83!important
}

.TeacherListing .btn-book {
    font-size: 12px
}

.TeacherListing .teacher-rating {
    font-size: 12px;
    position: relative;
    margin-left: 4px
}

.TeacherListing .teacher-rating-number {
    font-size: 11px;
    position: relative
}

.TeacherListing .teacher-details {
    font-size: 11px;
    margin-top: -3px;
    margin-bottom: 4px
}

.TeacherListing .teacher-label {
    font-size: 10px;
    margin-right: 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px
}

.TeacherListing .teacher-price {
    color: #3bb85c;
    font-weight: 700
}

.TeacherListing .teacher-biography {
    font-size: 11px;
    height: 40px;
    overflow: hidden
}

.StarRatings {
    font-size: 19.2px;
    font-size: 1.2rem
}

.StarRatings .fa {
    padding-right: 1px;
    font-size: 28px;
    font-size: 1.75rem
}

.StarRatings .fa.gold {
    color: #fdcc44
}

.StarRatings .fa.grey {
    color: #d8d8d8
}

.StarRatings .num-ratings {
    margin-left: 5px
}

.StarRatings .rating-compact {
    margin-left: 4px;
    font-size: 14.25px;
    color: #4f5457
}

.StarRatings .num-ratings-compact {
    margin-left: 4px;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.CorrectionAttachment .SentenceCorrection {
    border-bottom: 1px solid #efefef;
    padding-bottom: 16px;
    padding-bottom: 1rem;
    margin-bottom: 16px;
    margin-bottom: 1rem
}

.CorrectionAttachment .SentenceCorrection:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0
}

.MessageAttachments .ReportCard {
    border: 1px solid #efefef
}

.ReportCard .reportcard-label {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px
}

.ReportCard .reportcard-section {
    font-size: 14.25px;
    line-height: 20px;
    margin-bottom: 15px
}

.ReportCard .reportcard-section a {
    display: block
}

.ReportCard .reportcard-footer {
    background-color: #f8f8f8;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.AssignmentCheckmark {
    border-radius: 50%
}

.AssignmentCheckmark.AssignmentCheckmark--owner.AssignmentCheckmark--pending {
    cursor: pointer
}

.AssignmentCheckmark.AssignmentCheckmark--pending {
    color: #ccc
}

.AssignmentCheckmark.AssignmentCheckmark--pending:hover {
    color: #000
}

.AssignmentTemplate {
    overflow: hidden
}

.AssignmentTemplate.AssignmentTemplate--selectable {
    cursor: pointer
}

.AssignmentTemplate.AssignmentTemplate--selectable:hover {
    border: 1px solid #888!important
}

.AssignmentTemplate.AssignmentTemplate--selected,.AssignmentTemplate.AssignmentTemplate--selected:hover {
    border: 1px solid #0699cd!important
}

.AssignmentsBase,.MessageAttachments {
    width: 70%
}
@media (max-width: 767px) {
    .AssignmentsBase,.MessageAttachments {
        width: 100%
    }
}

.AssignmentsBase .assignment-panel,.MessageAttachments .assignment-panel {
    margin-bottom: 5px
}

@media (max-width: 767px) {
    .AssignmentsBase .AssignmentsFilter .filters,.MessageAttachments .AssignmentsFilter .filters {
        -webkit-flex-direction:column;
        -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .AssignmentsBase .AssignmentsFilter .filters div,.MessageAttachments .AssignmentsFilter .filters div {
        margin-right: 0!important;
        margin-bottom: 5px;
        width: 100%
    }
}

.AssignmentsBase .assignment,.MessageAttachments .assignment {
    border: 1px solid #eee;
    border-radius: 8px
}

.AssignmentsBase .assignment-panel,.MessageAttachments .assignment-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.AssignmentsBase .assignment-assigned,.MessageAttachments .assignment-assigned {
    background-color: #fff
}

.AssignmentsBase .assignment-header,.MessageAttachments .assignment-header {
    padding: 15px;
    background-color: #f8f8f8;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.AssignmentsBase .assignment-body,.MessageAttachments .assignment-body {
    background-color: #fff;
    padding: 15px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.AssignmentsBase .assignment-title,.MessageAttachments .assignment-title {
    font-size: 20px;
    line-height: 24px
}

.AssignmentsBase .assignment-status,.MessageAttachments .assignment-status {
    float: left;
    margin-right: 10px
}

.AssignmentsBase .assignment-check,.MessageAttachments .assignment-check {
    color: #0699cd;
    margin-top: 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #0699cd;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .15s;
    -o-transition: .15s;
    transition: .15s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.AssignmentsBase .assignment-check:hover,.MessageAttachments .assignment-check:hover {
    color: #fff;
    background-color: #0699cd;
    border: 1px solid #0699cd
}

.AssignmentsBase .assignment-check-teacher:hover,.MessageAttachments .assignment-check-teacher:hover {
    color: #0699cd;
    background-color: transparent;
    border: 1px solid #0699cd
}

.AssignmentsBase .assignment-check-complete,.MessageAttachments .assignment-check-complete {
    color: #fff;
    background-color: #0699cd;
    border: 1px solid #0699cd
}

.AssignmentsBase .assignment-label,.MessageAttachments .assignment-label {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px
}

.AssignmentsBase .attachment,.MessageAttachments .attachment {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 6px
}

.AssignmentsBase .attachment-file,.MessageAttachments .attachment-file {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    color: #d8d8d8;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    margin-top: 6px;
    margin-left: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .15s;
    -o-transition: .15s;
    transition: .15s
}

.AssignmentsBase .attachment-file:hover,.MessageAttachments .attachment-file:hover {
    color: #fff;
    background-color: #0699cd;
    border-color: #0699cd
}

.AssignmentsBase .attachment-filename,.MessageAttachments .attachment-filename {
    text-align: center;
    margin-top: 2px;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.AssignmentWrapper .DropZoneActive--show {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    display: none;
    border: 4px dashed #888;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.85);
    z-index: 10
}

.AssignmentWrapper .DropZoneActive .DropZoneActive--show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.react-giphy-select__src-components-GiphyList-styles__list___Tdg5X {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 15px;
    position: relative;
    width: 330px;
    height: 330px
}

.react-giphy-select__src-components-GiphyList-styles__listEmpty___1SDRT:before {
    content: "No results.";
    position: absolute;
    left: 50%;
    top: 50%;
    color: #aaa;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.react-giphy-select__src-components-GiphyList-styles__listScrollbar___1dS3n {
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 7px;
    width: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    opacity: .1;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s
}

.react-giphy-select__src-components-GiphyList-styles__list___Tdg5X:hover .react-giphy-select__src-components-GiphyList-styles__listScrollbar___1dS3n {
    opacity: .3
}

.react-giphy-select__src-components-GiphyList-styles__list___Tdg5X .react-giphy-select__src-components-GiphyList-styles__listScrollbar___1dS3n:active,.react-giphy-select__src-components-GiphyList-styles__list___Tdg5X .react-giphy-select__src-components-GiphyList-styles__listScrollbar___1dS3n:hover {
    opacity: .6
}

.react-giphy-select__src-components-GiphyList-styles__listScrollbarThumb___1L0ZG {
    background-color: #000;
    border-radius: 2px;
    cursor: pointer
}

.react-giphy-select__src-components-GiphyList-styles__listMasonry___3rIoZ {
    margin-left: 10px;
    width: 315px
}

.react-giphy-select__src-components-GiphyList-styles__listItem___2RULM {
    margin-right: 5px;
    margin-bottom: 5px;
    width: 100px;
    background-color: #ccc;
    background-position: 50%;
    background-repeat: no-repeat
}

.react-giphy-select__src-components-GiphyList-styles__listEntry___D_T4j {
    padding: 0;
    display: block;
    background: none;
    border: none;
    cursor: pointer
}

.react-giphy-select__src-components-GiphyList-styles__listEntryImage___1oyhk {
    display: block
}

.react-giphy-select__src-components-GiphySelect-styles__select___25GhN {
    padding: 15px 0;
    width: 340px;
    color: inherit;
    border: 1px solid #ccc
}

.react-giphy-select__src-components-GiphySelect-styles__selectInput___18Wcj {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: .5em .75em;
    width: calc(100% - 30px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1em
}

.react-giphy-select__src-components-GiphySelect-styles__attribution___1RUSw {
    margin-left: 15px;
    margin-right: 15px
}

.GiphySelector__container {
    padding: 15px 5px
}

.GiphySelector__btn {
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
    border-bottom-left-radius: 8px!important;
    border-bottom-right-radius: 8px!important
}

.UploadFileModal .UploadFileModal--Image {
    background-color: #000;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    width: 250px;
    height: 150px;
    border-radius: 4px
}

.UploadFileModal .UploadFileModal--Image img {
    border-radius: 4px
}

.flashcard-input {
    margin: 10px 0
}

.flashcard-input .accentable input {
    padding-top: 25px;
    height: 50px;
    border: none;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #e6e6e6
}

.flashcard-input .language-input-selector {
    position: absolute;
    left: 4px;
    top: 5px;
    font-size: 10px;
    text-align: right
}

.flashcard-input .flashcard-definition {
    border: none;
    border-radius: 0 0 4px 4px;
    borderbottom: solid 1px #e6e6e6
}

.SimpleAccents {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 100%
}

.SimpleAccents .character {
    width: 25px;
    text-align: center;
    background-color: #fff;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    padding: 2px;
    margin: 2px
}

.SimpleAccents .character:hover {
    background-color: #daf0fe
}

.MessageTemplateSelector .MessageTemplateSelector-Panel {
    overflow-y: auto
}

.AccentSelector .characters {
    //:6.4px;//:.4rem;//:4px}

.AccentSelector ul li {
    padding: 11.2px;
    padding: .7rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    margin: 2px;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    width: 23px;
    text-align: center
}

.shift-key--active {
    background-color: #0699cd!important;
    color: #fff!important
}

.AccentSelector ul li:hover {
    background-color: #daf0fe
}

.AccentSelector ul li:active {
    -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 0 2px 0 rgba(0,0,0,.1)
}

.emoji-mart {
    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;
    font-size: 16px;
    color: #222427;
    border: 1px solid #d9d9d9;
    border-radius: 5px
}

.emoji-mart-search input {
    padding: .2em .6em;
    border-radius: 25px;
    border: 1px solid #d9d9d9
}

.emoji-mart-category .emoji-mart-emoji span {
    cursor: default
}

.EmojiSelector {
    margin: auto;
    z-index: 100;
    position: absolute;
    border: 1px solid silver;
    border-radius: 8px;
    margin-top: 10px;
    -webkit-box-shadow: rgba(0,0,0,.2) 0 2px 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    background-color: #fff;
    margin-bottom: 5px
}

.emoji-mart,.emoji-mart * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.15
}

.emoji-mart {
    display: inline-block;
    background: #fff;
    border-radius: 8px
}

.emoji-mart .emoji-mart-emoji {
    padding: 6px
}

.emoji-mart-bar {
    border: 0 solid #d9d9d9
}

.emoji-mart-bar:first-child {
    border-bottom-width: 1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.emoji-mart-bar:last-child {
    border-top-width: 1px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.emoji-mart-anchors {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 6px;
    color: #858585;
    line-height: 0
}

.emoji-mart-anchor {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
    padding: 12px 4px;
    overflow: hidden;
    -webkit-transition: color .1s ease-out;
    -o-transition: color .1s ease-out;
    transition: color .1s ease-out;
    cursor: pointer
}

.emoji-mart-anchor svg {
    cursor: pointer
}

.emoji-mart-anchor-selected,.emoji-mart-anchor:hover {
    color: #464646
}

.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
    bottom: 0
}

.emoji-mart-anchor-bar {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #464646
}

.emoji-mart-anchors i {
    cursor: pointer;
    display: inline-block;
    width: 100%;
    max-width: 22px
}

.emoji-mart-anchors svg {
    fill: currentColor;
    max-height: 18px
}

.emoji-mart-scroll {
    overflow-y: scroll;
    height: 270px;
    padding: 0 6px 6px;
    will-change: transform
}

.emoji-mart-scroll .emoji-mart-emoji,.emoji-mart-scroll .emoji-mart-emoji span {
    cursor: pointer
}

.emoji-mart-search {
    margin-top: 6px;
    padding: 0 6px
}

.emoji-mart-search input {
    font-size: 16px;
    display: block;
    width: 100%;
    outline: 0;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    color: #4f5457;
    font-family: Open Sans;
    letter-spacing: .5px;
    letter-spacing: .8px;
    letter-spacing: .05rem;
    font-weight: 400;
    height: 37px;
    padding: 6px 12px;
    background-color: #fff;
    background-image: none;
    margin-bottom: 5px
}

.emoji-mart-category .emoji-mart-emoji span {
    z-index: 1;
    position: relative;
    text-align: center;
    cursor: pointer
}

.emoji-mart-category .emoji-mart-emoji:hover:before {
    z-index: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    border-radius: 100%
}

.emoji-mart-category-label {
    z-index: 2;
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.emoji-mart-category-label span {
    display: block;
    width: 100%;
    font-weight: 500;
    padding: 5px 6px;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.95)
}

.emoji-mart-emoji {
    position: relative;
    display: inline-block;
    font-size: 0
}

.emoji-mart-no-results {
    font-size: 14px;
    text-align: center;
    padding-top: 70px;
    color: #858585
}

.emoji-mart-no-results .emoji-mart-category-label {
    display: none
}

.emoji-mart-no-results .emoji-mart-no-results-label {
    margin-top: .2em
}

.emoji-mart-no-results .emoji-mart-emoji:hover:before {
    content: none
}

.emoji-mart-preview {
    position: relative;
    height: 70px
}

.emoji-mart-preview-data,.emoji-mart-preview-emoji,.emoji-mart-preview-skins {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.emoji-mart-preview-emoji {
    left: 12px
}

.emoji-mart-preview-data {
    left: 68px;
    right: 12px;
    word-break: break-all
}

.emoji-mart-preview-skins {
    right: 30px;
    text-align: right
}

.emoji-mart-preview-name {
    font-size: 14px
}

.emoji-mart-preview-shortname {
    font-size: 12px;
    color: #888
}

.emoji-mart-preview-emoticon+.emoji-mart-preview-emoticon,.emoji-mart-preview-shortname+.emoji-mart-preview-emoticon,.emoji-mart-preview-shortname+.emoji-mart-preview-shortname {
    margin-left: .5em
}

.emoji-mart-preview-emoticon {
    font-size: 11px;
    color: #bbb
}

.emoji-mart-title span {
    display: inline-block;
    vertical-align: middle
}

.emoji-mart-title .emoji-mart-emoji {
    padding: 0
}

.emoji-mart-title-label {
    color: #999a9c;
    display: none;
    font-size: 26px;
    font-weight: 300
}

.emoji-mart-skin-swatches {
    font-size: 0;
    padding: 2px 0;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    background-color: #fff
}

.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch {
    width: 16px;
    padding: 0 2px
}

.emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch-selected:after {
    opacity: .75
}

.emoji-mart-skin-swatch {
    display: inline-block;
    width: 0;
    vertical-align: middle;
    -webkit-transition-property: width,padding;
    -o-transition-property: width,padding;
    transition-property: width,padding;
    -webkit-transition-duration: .125s;
    -o-transition-duration: .125s;
    transition-duration: .125s;
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.emoji-mart-skin-swatch:first-child {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s
}

.emoji-mart-skin-swatch:nth-child(2) {
    -webkit-transition-delay: .03s;
    -o-transition-delay: .03s;
    transition-delay: .03s
}

.emoji-mart-skin-swatch:nth-child(3) {
    -webkit-transition-delay: .06s;
    -o-transition-delay: .06s;
    transition-delay: .06s
}

.emoji-mart-skin-swatch:nth-child(4) {
    -webkit-transition-delay: .09s;
    -o-transition-delay: .09s;
    transition-delay: .09s
}

.emoji-mart-skin-swatch:nth-child(5) {
    -webkit-transition-delay: .12s;
    -o-transition-delay: .12s;
    transition-delay: .12s
}

.emoji-mart-skin-swatch:nth-child(6) {
    -webkit-transition-delay: .15s;
    -o-transition-delay: .15s;
    transition-delay: .15s
}

.emoji-mart-skin-swatch-selected {
    position: relative;
    width: 16px;
    padding: 0 2px
}

.emoji-mart-skin-swatch-selected:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    background-color: #fff;
    border-radius: 100%;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out
}

.emoji-mart-skin {
    display: inline-block;
    width: 100%;
    padding-top: 100%;
    max-width: 12px;
    border-radius: 100%
}

.emoji-mart-skin-tone-1 {
    background-color: #ffc93a
}

.emoji-mart-skin-tone-2 {
    background-color: #fadcbc
}

.emoji-mart-skin-tone-3 {
    background-color: #e0bb95
}

.emoji-mart-skin-tone-4 {
    background-color: #bf8f68
}

.emoji-mart-skin-tone-5 {
    background-color: #9b643d
}

.emoji-mart-skin-tone-6 {
    background-color: #594539
}

.Room__TabGroup {
    overflow-x: auto;
    margin-bottom: -1px
}

.Room__TabGroup ul {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
    padding: 0
}

.Room__TabGroup .Room__TabGroup__NewTab {
    margin-left: -8px;
    cursor: pointer
}

.Room__Tab {
    padding: 0!important;
    margin: 0;
    font-weight: 700;
    min-width: 150px;
    font-size: 11.4px;
    color: #838789
}

.Room__Tab .Room__Tab__Content {
    background-color: #1b1b1b;
    border-top: 1px solid #323232;
    padding-left: 5px;
    cursor: pointer
}

.Room__Tab .Room__Tab__Content,.Room__Tab .Room__Tab__Corner {
    border-bottom: 1px solid #323232
}

.Room__Tab .Room__Tab__Right {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-left: 10px
}

.Room__Tab:not(:first-child) {
    margin-left: -10px
}

.Room__Tab * {
    z-index: 10
}

.Room__Tab--active {
    color: #fff
}

.Room__Tab--active .Room__Tab__Content,.Room__Tab--active .Room__Tab__Corner {
    border-bottom: 1px solid #1b1b1b
}

.Room__Tab--active * {
    z-index: 20
}

.Room__Tab__Thumbnail {
    width: 18px;
    height: 18px;
    margin: 0 2px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover
}

.Room__Tab__Thumbnail:first-child {
    margin-left: 10px
}

.Room__Tab__ThumbPagination {
    background-color: #0699cd;
    color: #fff;
    font-weight: 700;
    font-size: 10px
}

.Room__Header {
    z-index: 1;
    font-weight: bolder;
    padding: 10px;
    position: relative
}

.Room__Header ul {
    margin: 0!important
}

.Room__Header ul a {
    font-weight: bolder
}

.Room__Header__Network {
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.Room__Header__Network--online {
    background-color: #36ca36
}

.Room__Header__Network--offline {
    background-color: #fd4444
}

.RecordingControls__recording_button_container,.RecordingControls__recording_button_container .RecordingControls__recording_button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.RecordingControls__recording_button_container .RecordingControls__recording_button {
    background-color: #fff;
    width: 23px;
    height: 23px;
    border-radius: 23px;
    margin: auto;
    cursor: pointer;
    position: relative
}

.RecordingControls__recording_button_container .RecordingControls__recording_button .RecordingControls__recording_button--circle {
    background-color: #393939;
    width: 9px;
    height: 9px;
    border-radius: 9px
}

.RecordingControls__recording_button_container .RecordingControls__recording_button .RecordingControls__recording_button--square {
    background-color: #fff;
    width: 9px;
    height: 9px;
    border-radius: 0
}

.RecordingControls__recording_button_container .RecordingControls__recording_button .RecordingControls__new_badge {
    position: absolute;
    top: -20px;
    right: -4px;
    font-size: 9px
}

.RecordingControls__recording_status {
    -ms-flex-align: center;
    font-weight: 700;
    margin-right: 16px;
    margin-right: 1rem
}

.RecordingControls__recording_status,.StartRecordingModal__share_permissions_image_container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.StartRecordingModal__share_permissions_image_container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.StartRecordingModal__share_permissions_image_container .StartRecordingModal__share_permissions_image {
    max-height: 480px;
    max-height: 30rem
}

.StartRecordingModal__instructions {
    margin-left: 5px;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 0
}

.StartRecordingModal__instructions_item {
    list-style-type: none
}

.SettingsModal_General_Settings_Left_Column {
    padding-top: 1.5px
}

.SettingsModal_General_Settings_Middle_Column,.SettingsModal_General_Settings_Right_Column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.SettingsModal_General_Settings_Toolbar_Position {
    margin-right: 8px
}

.draftJsToolbar__separator__3U7qt {
    display: inline-block;
    border-right: 1px solid #ddd;
    height: 24px;
    margin: 0 .5em
}

.draftJsToolbar__toolbar__dNtBH {
    left: 50%;
    transform: translate(-50%) scale(0);
    position: absolute;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px 0 #dcdcdc;
    z-index: 2;
    box-sizing: border-box
}

.draftJsToolbar__toolbar__dNtBH:after,.draftJsToolbar__toolbar__dNtBH:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.draftJsToolbar__toolbar__dNtBH:after {
    border-color: hsla(0,0%,100%,0);
    border-top-color: #fff;
    border-width: 4px;
    margin-left: -4px
}

.draftJsToolbar__toolbar__dNtBH:before {
    border-color: hsla(0,0%,87%,0);
    border-top-color: #ddd;
    border-width: 6px;
    margin-left: -6px
}

.draftJsToolbar__blockType__27Jwn {
    box-sizing: border-box;
    border: 1px solid #ddd;
    background: #fff;
    padding: 5px;
    margin: 0;
    border-radius: 18px;
    cursor: pointer;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center
}

.draftJsToolbar__blockType__27Jwn svg {
    fill: #888
}

.draftJsToolbar__spacer__2Os2z {
    height: 8px
}

.draftJsToolbar__popup__GHzbY,.draftJsToolbar__spacer__2Os2z {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 74px
}

.draftJsToolbar__popup__GHzbY {
    background: #efefef;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px 0 #dcdcdc;
    z-index: 3;
    box-sizing: border-box;
    margin-top: 8px
}

.draftJsToolbar__popup__GHzbY:after,.draftJsToolbar__popup__GHzbY:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.draftJsToolbar__popup__GHzbY:after {
    border-color: hsla(0,0%,98%,0);
    border-bottom-color: #fbfbfb;
    border-width: 4px;
    margin-left: -4px
}

.draftJsToolbar__popup__GHzbY:before {
    border-color: hsla(0,0%,87%,0);
    border-bottom-color: #ddd;
    border-width: 6px;
    margin-left: -6px
}

.draftJsToolbar__buttonWrapper__1Dmqh {
    display: inline-block
}

.draftJsToolbar__button__qi1gf {
    background: #fbfbfb;
    color: #888;
    font-size: 18px;
    border: 0;
    padding-top: 5px;
    vertical-align: bottom;
    height: 34px;
    width: 36px
}

.draftJsToolbar__button__qi1gf svg {
    fill: #888
}

.draftJsToolbar__button__qi1gf:focus,.draftJsToolbar__button__qi1gf:hover {
    background: #f3f3f3;
    outline: 0
}

.draftJsToolbar__active__3qcpF {
    background: #efefef;
    color: #444
}

.draftJsToolbar__active__3qcpF svg {
    fill: #444
}

.draftJsToolbar__separator__3M3L7 {
    display: inline-block;
    border-right: 1px solid #ddd;
    height: 24px;
    margin: 0 .5em
}

.draftJsToolbar__wrapper__9NZgg {
    position: absolute
}

.draftJsEmojiPlugin__alignmentTool__2mkQr {
    left: 50%;
    transform: translate(-50%) scale(0);
    position: absolute;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px 0 #dcdcdc;
    z-index: 2;
    box-sizing: border-box
}

.draftJsEmojiPlugin__alignmentTool__2mkQr:after,.draftJsEmojiPlugin__alignmentTool__2mkQr:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.draftJsEmojiPlugin__alignmentTool__2mkQr:after {
    border-color: hsla(0,0%,100%,0);
    border-top-color: #fff;
    border-width: 4px;
    margin-left: -4px
}

.draftJsEmojiPlugin__alignmentTool__2mkQr:before {
    border-color: hsla(0,0%,87%,0);
    border-top-color: #ddd;
    border-width: 6px;
    margin-left: -6px
}

.draftJsEmojiPlugin__buttonWrapper__1Dmqh {
    display: inline-block
}

.draftJsEmojiPlugin__button__qi1gf {
    background: #fbfbfb;
    color: #888;
    font-size: 18px;
    border: 0;
    padding-top: 5px;
    vertical-align: bottom;
    height: 34px;
    width: 36px
}

.draftJsEmojiPlugin__button__qi1gf svg {
    fill: #888
}

.draftJsEmojiPlugin__button__qi1gf:focus,.draftJsEmojiPlugin__button__qi1gf:hover {
    background: #f3f3f3;
    outline: 0
}

.draftJsEmojiPlugin__active__3qcpF {
    background: #efefef;
    color: #444
}

.draftJsEmojiPlugin__active__3qcpF svg {
    fill: #444
}

.draftJsFocusPlugin__unfocused__1Wvrs:hover {
    cursor: default;
    border-radius: 2px;
    box-shadow: 0 0 0 3px #d2e3f7
}

.draftJsFocusPlugin__focused__3Mksn {
    cursor: default;
    border-radius: 2px;
    box-shadow: 0 0 0 3px #accef7
}

.draftJsMentionPlugin__iframeContainer__21EVZ {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%
}

.draftJsMentionPlugin__iframe__stjRT {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.draftJsMentionPlugin__invalidVideoSrc__3dIji {
    text-align: center;
    background-color: #eaeaea;
    padding: 1em
}

.draftJsEmojiPlugin__emojiSelect__34S1B {
    display: inline-block
}

.draftJsEmojiPlugin__emojiSelectButton__3sPol,.draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu {
    margin: 0;
    padding: 0;
    width: 2.5em;
    height: 1.5em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer
}

.draftJsEmojiPlugin__emojiSelectButton__3sPol:focus,.draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu:focus {
    outline: 0
}

.draftJsEmojiPlugin__emojiSelectButton__3sPol:hover,.draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu:hover {
    background: #f3f3f3
}

.draftJsEmojiPlugin__emojiSelectButton__3sPol:active,.draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu:active {
    background: #e6e6e6
}

.draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu {
    background: #ededed
}

.draftJsEmojiPlugin__emojiSelectPopover__1J1s0 {
    margin-top: 10px;
    padding: 0 .3em;
    position: absolute;
    z-index: 1000;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    background: #fff;
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: 0 4px 30px 0 #dcdcdc;
    box-shadow: 0 4px 30px 0 #dcdcdc
}

.draftJsEmojiPlugin__emojiSelectPopoverClosed__3Kxxq {
    display: none
}

.draftJsEmojiPlugin__emojiSelectPopoverTitle__3tpXz {
    margin: 0 0 .3em;
    padding-left: 1em;
    height: 2.5em;
    line-height: 2.5em;
    font-weight: 400;
    color: #9e9e9e
}

.draftJsEmojiPlugin__emojiSelectPopoverGroups__35t9m {
    margin: 0 0 .3em;
    position: relative;
    z-index: 0;
    width: 21em;
    height: 20em
}

.draftJsEmojiPlugin__emojiSelectPopoverGroup__3zwcE {
    padding: 0 .5em
}

.draftJsEmojiPlugin__emojiSelectPopoverGroup__3zwcE:first-child .draftJsEmojiPlugin__emojiSelectPopoverGroupTitle__2pC51 {
    display: none
}

.draftJsEmojiPlugin__emojiSelectPopoverGroupTitle__2pC51 {
    margin: 1em 0;
    padding-left: .5em;
    font-weight: 400;
    color: #9e9e9e
}

.draftJsEmojiPlugin__emojiSelectPopoverGroupList__HQ8_y {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.draftJsEmojiPlugin__emojiSelectPopoverGroupItem__2pFOS {
    width: 2.5em;
    height: 2.5em
}

.draftJsEmojiPlugin__emojiSelectPopoverToneSelect__28bny {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2
}

.draftJsEmojiPlugin__emojiSelectPopoverToneSelectList__haFSJ {
    margin: .3em;
    padding: .3em;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    border: 1px solid #e0e0e0;
    border-radius: .5em;
    background: #fff;
    -webkit-box-shadow: 0 0 .3em rgba(0,0,0,.1);
    box-shadow: 0 0 .3em rgba(0,0,0,.1)
}

.draftJsEmojiPlugin__emojiSelectPopoverToneSelectItem__2SgvL {
    width: 2.5em;
    height: 2.5em
}

.draftJsEmojiPlugin__emojiSelectPopoverToneSelectItem__2SgvL:first-child {
    border-right: 1px solid #e0e0e0
}

.draftJsEmojiPlugin__emojiSelectPopoverEntry__1ErDJ,.draftJsEmojiPlugin__emojiSelectPopoverEntryFocused__M28XS {
    padding: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    outline: none;
    -webkit-transition: background-color .4s cubic-bezier(.27,1.27,.48,.56);
    -o-transition: background-color .4s cubic-bezier(.27,1.27,.48,.56);
    transition: background-color .4s cubic-bezier(.27,1.27,.48,.56)
}

.draftJsEmojiPlugin__emojiSelectPopoverEntryFocused__M28XS {
    background-color: #efefef
}

.draftJsEmojiPlugin__emojiSelectPopoverEntryIcon__1yNaC {
    vertical-align: middle
}

.draftJsEmojiPlugin__emojiSelectPopoverNav__1Nzd7 {
    margin: 0;
    padding: 0 .5em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 20em;
    list-style: none
}

.draftJsEmojiPlugin__emojiSelectPopoverNavItem__qydCX {
    width: 2.5em;
    height: 2.5em
}

.draftJsEmojiPlugin__emojiSelectPopoverNavEntry__1OiGB,.draftJsEmojiPlugin__emojiSelectPopoverNavEntryActive__2j-Vk {
    padding: 0;
    width: 100%;
    height: 100%;
    color: #bdbdbd;
    background: none;
    border: none;
    outline: none
}

.draftJsEmojiPlugin__emojiSelectPopoverNavEntryActive__2j-Vk {
    color: #42a5f5
}

.draftJsEmojiPlugin__emojiSelectPopoverScrollbar__1Xjc6 {
    position: absolute;
    right: 0;
    top: .3em;
    bottom: .3em;
    width: .25em;
    background-color: #e0e0e0;
    border-radius: .125em;
    opacity: .1;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s
}

.draftJsEmojiPlugin__emojiSelectPopoverScrollbarThumb__jGYdG {
    background-color: #000;
    border-radius: .125em;
    cursor: pointer
}

.draftJsEmojiPlugin__emojiSelectPopoverGroups__35t9m:hover .draftJsEmojiPlugin__emojiSelectPopoverScrollbar__1Xjc6 {
    opacity: .3
}

.draftJsEmojiPlugin__emojiSelectPopoverGroups__35t9m .draftJsEmojiPlugin__emojiSelectPopoverScrollbar__1Xjc6:active,.draftJsEmojiPlugin__emojiSelectPopoverGroups__35t9m .draftJsEmojiPlugin__emojiSelectPopoverScrollbar__1Xjc6:hover {
    opacity: .6
}

.draftJsEmojiPlugin__emoji__2oqBk {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    max-width: 1.95ch;
    max-height: 1em;
    line-height: inherit;
    margin: -.2ex 0 .2ex;
    color: transparent
}

.draftJsEmojiPlugin__emojiSuggestionsEntry__2-2p_ {
    padding: 5px 10px 1px;
    transition: transform .24s cubic-bezier(.18,1.4,.4,1),opacity .12s ease-out,-webkit-transform .24s cubic-bezier(.18,1.4,.4,1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.draftJsEmojiPlugin__emojiSuggestionsEntry__2-2p_:active {
    background-color: #cce7ff
}

.draftJsEmojiPlugin__emojiSuggestionsEntryFocused__XDntY {
    background-color: #e6f3ff
}

.draftJsEmojiPlugin__emojiSuggestionsEntryText__2sPjk {
    display: inline-block;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 368px
}

.draftJsEmojiPlugin__emojiSuggestionsEntryIcon__1qC2V {
    width: 15px;
    height: 15px;
    margin-left: .25em;
    margin-right: .25em;
    display: inline-block
}

.draftJsEmojiPlugin__emojiSuggestions__2ffcV {
    border: 1px solid #eee;
    margin-top: 1.75em;
    position: absolute;
    min-width: 220px;
    max-width: 440px;
    background: #fff;
    border-radius: 8px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0)
}

.public-DraftEditorPlaceholder-root {
    position: absolute
}

.RichEditor {
    position: relative
}

.RichEditor .SideToolbar {
    z-index: 2
}

.RichEditor .InlineToolbar button {
    line-height: 21px
}

.RichEditor--edit.RichEditor--reset .DraftEditor-root {
    border: none!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

.RichEditor--edit.RichEditor--focus .DraftEditor-root {
    border: 1px solid #0699cd;
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

.RichEditor--edit.RichEditor--small .DraftEditor-root {
    min-height: 100px
}

.RichEditor--edit .DraftEditor-root {
    min-height: 400px;
    padding: 7px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    color: #4f5457;
    font-family: Open Sans;
    letter-spacing: .8px;
    letter-spacing: .05rem;
    font-weight: 400;
    cursor: text
}

.RecordingWrapper .RecordingsBase__loading_video {
    position: relative;
    padding-top: 56.25%
}

.RecordingWrapper .RecordingsBase__loading_video_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000
}

.RecordingWrapper .RecordingsBase__loading_video_inner_content {
    height: 100%;
    padding-top: 32px;
    padding-top: 2rem
}

.RecordingWrapper .RecordingsBase__loading_text {
    font-size: 32px;
    font-size: 2rem;
    color: #fff
}

.RecordingWrapper .RecordingsBase__video_player_wrapper {
    position: relative;
    padding-top: 56.25%
}

.RecordingWrapper .RecordingsBase__video_player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.RecordingListItem {
    cursor: pointer;
    max-width: 1600px;
    max-width: 100rem
}

.RecordingListItem .RecordingListItem__thumbnail {
    position: relative
}

.RecordingListItem .RecordingListItem__thumbnail .RecordingListItem__thumbnail_img {
    max-width: 272px;
    max-width: 17rem;
    min-width: 272px;
    min-width: 17rem;
    height: 160px;
    height: 10rem
}

.RecordingListItem .RecordingListItem__thumbnail .RecordingListItem__thumbnail_duration {
    background-color: #000;
    background-color: rgba(0,0,0,.7);
    color: #fff;
    position: absolute;
    right: 9.6px;
    right: .6rem;
    bottom: 6.4px;
    bottom: .4rem;
    font-size: 18.24px;
    font-size: 1.14rem;
    padding: 3.2px 16px;
    padding: .2rem 1rem
}

@media (max-width: 767px) {
    .RecordingListItem .RecordingListItem__thumbnail .RecordingListItem__thumbnail_duration {
        left:190.4px;
        left: 11.9rem;
        right: auto
    }
}

.RecordingListItem .RecordingListItem__thumbnail_not_ready {
    background-color: #000;
    max-width: 272px;
    max-width: 17rem;
    min-width: 272px;
    min-width: 17rem;
    height: 160px;
    height: 10rem
}

.RecordingListItem .RecordingListItem__thumbnail_error {
    font-size: 64px;
    font-size: 4rem;
    margin: auto;
    color: #aaa
}

.RecordingListItem .RecordingListItem__other_user_name {
    color: #0699cd;
    cursor: pointer;
    font-size: 22.88px;
    font-size: 1.43rem
}

.RecordingListItem .RecordingListItem__meta_info {
    font-size: 18.24px;
    font-size: 1.14rem
}

.RecordingListItem__not_ready {
    cursor: auto
}

.SubSiteFooter {
    width: 100%;
    background: #222;
    padding: 10px 2%;
    -webkit-box-shadow: inset #eee 0 1px 0;
    box-shadow: inset 0 1px 0 #eee;
    border-bottom: 4px solid #0699cd
}

.SubSiteFooter ul {
    margin-bottom: 0
}

.SubSiteFooter .links a {
    color: #fff;
    font-size: 14.25px;
    letter-spacing: .5px;
    padding: 5px;
    -webkit-transition: color .2s;
    -o-transition: color .2s;
    transition: color .2s;
    margin-right: 15px
}

.SubSiteFooter .links a:hover {
    color: #0699cd
}

.SubSiteFooter__secondary {
    margin-right: 30px
}

.SubSiteFooter__secondary .dropup {
    padding: 2px
}

.SubSiteFooter__secondary .dropdown-menu {
    background: #fff;
    width: 100%;
    max-height: 300px;
    overflow-y: auto
}

.SubSiteFooter__secondary .dropdown-menu .active a {
    background-color: #eaeaea;
    color: #787b83
}

.SubSiteFooter__secondary .dropdown-menu a {
    color: #787b83
}

.SubSiteFooter__secondary .footer-site-language {
    text-align: left;
    border-radius: 8px;
    width: 250px
}

.SubSiteFooter__secondary .footer-site-language .caret {
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: 5px 5px 2.5px;
    display: inline-block;
    height: 0;
    width: 0;
    position: absolute;
    right: 10px;
    top: 20px
}

.SubSiteFooter__secondary .footer-site-language:focus {
    background: #fff!important;
    background: hsla(0,0%,100%,.45)!important
}

.SubSiteFooter__secondary .footer-site-language:hover {
    background: #fff!important;
    background: hsla(0,0%,100%,.4)!important
}

.SubSiteFooter__secondary .footer-site-language {
    background: #fff!important;
    background: hsla(0,0%,100%,.2)!important;
    color: #fff!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    border: 0
}

@media (max-width: 1024px) {
    .SubSiteFooter {
        padding-top:25.888px;
        padding-top: 1.618rem;
        padding-bottom: 25.888px;
        padding-bottom: 1.618rem
    }

    .SubSiteFooter .SubSiteFooter__secondary {
        margin-bottom: 20px;
        width: 100%;
        margin-right: 0
    }

    .SubSiteFooter .SubSiteFooter__secondary .ClientSideOnly,.SubSiteFooter .SubSiteFooter__secondary .dropup,.SubSiteFooter .SubSiteFooter__secondary .footer-site-language {
        width: 100%
    }

    .SubSiteFooter .SubSiteFooter__main,.SubSiteFooter .SubSiteFooter__secondary {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.DiagonalGradientHero {
    background: transparent url(https://cdn.huatutor.com/static/img/441136dd6d1dc4ec56ef065894a1b7a1.hero-gradient-bg.svg) no-repeat 0 100%;
    background-size: 110% 110%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    min-height: 600px;
    background-size: cover;
    padding: 103.552px 10%;
    padding: 6.472rem 10%;
    color: #fff!important;
    text-shadow: rgba(0,0,0,.07) 0 2px 20px
}

@media only screen and (max-width: 768px) {
    .DiagonalGradientHero {
        height:100vh
    }
}

.DiagonalGradientHero h1,.DiagonalGradientHero h2,.DiagonalGradientHero h3 {
    color: #fff;
    text-shadow: 0 1px 1px #000
}

@media only screen and (min-width: 990px) {
    .GradientLaptopHero .LandingBase__hero-left {
        margin-right:0!important
    }
}

.HeroImage {
    background-size: cover!important
}

.HeroImage.HeroImage--darkest .HeroImage__overlay {
    background-color: #000;
    background-color: rgba(0,0,0,.8)
}

@media (max-width: 768px) {
    .HeroImage.HeroImage--not-full {
        height:180px!important
    }
}

.HeroImage.HeroImage--darker .HeroImage__overlay {
    background-color: #000;
    background-color: rgba(0,0,0,.5)
}

.HeroImage {
    padding: 0 5%;
    width: 100%;
    height: 90vh
}

.HeroImage .HeroImage__overlay {
    background-color: #000;
    background-color: rgba(0,0,0,.1);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

@media (max-width: 768px) {
    .HeroImage {
        height:100vh!important
    }
}

.HeroImage {
    background-size: cover;
    position: relative
}

.HeroImage h1,.HeroImage h2,.HeroImage h3,.HeroImage p {
    color: #fff!important;
    text-shadow: 0 2px 2px rgba(0,0,0,.2)
}

.TopHeroImage {
    text-align: center;
    padding: 0 5%;
    width: 100%;
    height: 90vh
}

@media (max-width: 768px) {
    .TopHeroImage {
        height:100vh!important
    }
}

.TopHeroImage {
    background-size: cover;
    position: relative
}

.TopHeroImage.TopHeroImage--parallax {
    background-attachment: fixed;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.WatchVideo .WatchVideo__play {
    border-radius: 50px;
    width: 90px;
    height: 90px;
    cursor: pointer;
    -webkit-transition: all .2s cubic-bezier(.4,0,.2,1);
    -o-transition: all .2s cubic-bezier(.4,0,.2,1);
    transition: all .2s cubic-bezier(.4,0,.2,1)
}

.WatchVideo .WatchVideo__play:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.WatchVideo .WatchVideo__play {
    background-color: #0699cd
}

.SatisfactionGuaranteed {
    min-height: 350px
}

@media (max-width: 768px) {
    .SatisfactionGuaranteed {
        margin:25px;
        text-align: center
    }
}

.SatisfactionGuaranteed img {
    width: 150px;
    height: 150px;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

@media (max-width: 768px) {
    .SatisfactionGuaranteed img {
        width:250px;
        height: 250px
    }
}

.SatisfactionGuaranteed img:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

.LandingPage__phone {
    min-height: 350px
}

@media (max-width: 768px) {
    .LandingPage__phone {
        margin:25px;
        text-align: center
    }
}

.LandingPage__Waves {
    background-color: #0699cd;
    position: relative;
    color: #fff;
    overflow: hidden
}

.LandingPage__Waves h1,.LandingPage__Waves h2,.LandingPage__Waves h3 {
    color: #fff!important
}

.LandingPage__Waves .LandingPage__Waves__content {
    padding: 3vh;
    min-height: 30%;
    z-index: 2
}

.LandingPage__Waves .LandingPage__Waves__top {
    top: 0;
    right: 0;
    left: -5%;
    width: 110%;
    position: absolute;
    z-index: 1
}

.LandingPage__Waves .LandingPage__Waves__top img {
    width: 110%
}

.LandingPage__Waves .LandingPage__Waves__bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: -5%;
    width: 110%;
    z-index: 1
}

.LandingPage__Waves .LandingPage__Waves__bottom img {
    width: 110%
}

.LandingPage__HowItWorks .LandingPage__HowItWorks__icon {
    min-width: 120px;
    min-height: 120px;
    width: 120px;
    height: 120px;
    border: 4px solid #fff;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.LandingPage__HowItWorks .LandingPage__HowItWorks__item {
    max-width: 550px
}

.LandingPage__HowItWorks2 {
    padding: 5vw
}

.LandingPage__HowItWorks2 .LandingPage__HowItWorks2__icon {
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
    font-size: 40px;
    background-color: #f2f2f2;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.LandingPage__HowItWorks2 .LandingPage__HowItWorks2__item {
    max-width: 550px;
    -webkit-transition: all .2s cubic-bezier(.4,0,.2,1);
    -o-transition: all .2s cubic-bezier(.4,0,.2,1);
    transition: all .2s cubic-bezier(.4,0,.2,1)
}

.LandingPage__HowItWorks2 .LandingPage__HowItWorks2__item:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

@media (max-width: 768px) {
    .LandingPage__HowItWorks2 .LandingPage__HowItWorks2__item {
        text-align:center
    }
}

@media only screen and (min-width: 790px) {
    .QuestionsGrid dl {
        -webkit-column-count:2;
        column-count: 2;
        -webkit-column-gap: 5em;
        column-gap: 5em;
        -webkit-column-break-inside: avoid;
        break-inside: avoid-column
    }
}

.QuestionsGrid dl {
    text-align: left
}

.QuestionsGrid dd {
    max-width: 3200px;
    max-width: 200rem
}

.PatternBackground {
    background-image: url(https://cdn.huatutor.com/static/img/e7bb0aa6c9a66696ef71593be8ca8091.bg-pattern.jpg);
    background-repeat: repeat
}

.Enterprise {
    color: #fff
}

.Enterprise .Enterprise__inner {
    max-width: 800px;
    border: 10px solid #fff;
    padding: 20px;
    border-radius: 50px
}

.Enterprise h1,.Enterprise h1 small,.Enterprise h2,.Enterprise h2 small,.Enterprise h3,.Enterprise h3 small {
    color: #fff!important
}

.BoxInImage {
    padding-bottom: 30px;
    background-color: #fff
}

.BoxInImage .BoxInImage__box {
    padding: 30px
}

@media only screen and (min-width: 960px) {
    .BoxInImage {
        margin-bottom:-8%
    }

    .BoxInImage .BoxInImage__box {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        max-width: 800px;
        background-color: #fff;
        top: -258.88px;
        top: -16.18rem;
        position: relative;
        width: 66.66667%;
        max-width: none;
        padding: 30px;
        margin: 0;
        z-index: 5
    }
}

.FeatureCarousel .FeatureCarousel__left {
    -webkit-box-flex: 7;
    -webkit-flex: 7;
    -ms-flex: 7;
    flex: 7
}

.FeatureCarousel .FeatureCarousel__left .FeatureCarousel__img {
    margin-left: -200px;
    margin-right: -200px;
    max-width: calc(100% + 200px)
}

.FeatureCarousel .FeatureCarousel__right {
    -webkit-box-flex: 5;
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5
}

.FeatureCarousel .FeatureCarousel__right .FeatureCarousel__titles {
    padding-left: 25px
}

.FeatureCarousel .FeatureCarousel__feature .FeatureCarousel__title {
    cursor: pointer
}

.FeatureCarousel .FeatureCarousel__feature .FeatureCarousel__title:hover {
    color: #0699cd!important
}

.FeatureCarousel .FeatureCarousel__feature .FeatureCarousel__ball {
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #0699cd;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0)
}

.FeatureCarousel .FeatureCarousel__feature .FeatureCarousel__description {
    padding-left: 25px;
    opacity: 0;
    overflow-y: hidden;
    max-height: 0;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0,1,.5,1);
    -o-transition-timing-function: cubic-bezier(0,1,.5,1);
    transition-timing-function: cubic-bezier(0,1,.5,1)
}

.FeatureCarousel .FeatureCarousel__feature.FeatureCarousel__feature--active .FeatureCarousel__description {
    max-height: 500px;
    opacity: 1
}

.FeatureCarousel .FeatureCarousel__feature.FeatureCarousel__feature--active .FeatureCarousel__ball {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.FeatureScreenshot {
    overflow: hidden
}

.FeatureScreenshot.FeatureScreenshot--reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.FeatureScreenshot.FeatureScreenshot--reverse .FeatureScreenshot__img {
    margin-left: 0;
    margin-right: -200px;
    max-width: calc(100% + 200px)
}

.FeatureScreenshot .FeatureScreenshot__left {
    -webkit-box-flex: 7;
    -webkit-flex: 7;
    -ms-flex: 7;
    flex: 7
}

.FeatureScreenshot .FeatureScreenshot__left .FeatureScreenshot__img {
    margin-left: -200px;
    margin-right: -200px;
    max-width: calc(100% + 200px)
}

.FeatureScreenshot .FeatureScreenshot__right {
    -webkit-box-flex: 5;
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5;
    padding-right: 10%;
    padding-left: 10%
}

.ItemYTranslator {
    overflow-y: hidden
}

.ItemYTranslator .ItemYTranslator__item {
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
    -webkit-transition-timing-function: cubic-bezier(0,1,.5,1);
    -o-transition-timing-function: cubic-bezier(0,1,.5,1);
    transition-timing-function: cubic-bezier(0,1,.5,1)
}

@media only screen and (min-width: 768px) {
    .LandingPage__apps .LandingPage__apps__phone {
        max-width:250px
    }
}

.LanguageSelector__Container .row {
    margin-left: -7.5px;
    margin-right: -7.5px
}

.LanguageSelector__Container .col-md-4,.LanguageSelector__Container .col-sm-12 {
    padding-left: 7.5px;
    padding-right: 7.5px
}

.LanguageCard__Container {
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    color: #838789;
    overflow: hidden
}

.LanguageCard__Container .Flag {
    margin-right: 10px
}

.LanguageCard__Container h4 {
    font-size: 20px;
    letter-spacing: -1px;
    color: #4f5457;
    margin: 0;
    line-height: 20px
}

.LanguageCard__Container h4,.LanguageCard__Container small {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-weight: 700;
    padding: 0
}

.LanguageCard__Container small {
    font-size: 14.3px;
    letter-spacing: -.7px;
    margin: 0 0 0 6px;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    color: #838789!important
}

.LanguageCard__Container p {
    margin: 0;
    font-size: 12px;
    letter-spacing: .3px
}

@media (min-width: 768px) {
    .LanguageCard__Container {
        -webkit-transition:all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        cursor: pointer
    }

    .LanguageCard__Container:hover {
        background-color: #e3f3fe;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05)
    }
}

.LanguageCard__Container--selected {
    background-color: #0699cd!important
}

.LanguageCard__Container--selected h4 {
    color: #fff
}

.LanguageCard__Container--selected small {
    color: #d8d8d8!important
}

.LanguageCard__Container--selected p {
    color: #d8d8d8
}

.FindTeachersBase .TeacherListing--transparent {
    opacity: .5
}

.FindTeachersBase .FindTeachers-description h4 {
    font-size: 22.4px;
    font-size: 1.4rem;
    letter-spacing: .8px;
    letter-spacing: .05rem;
    line-height: 1.36
}

.FindTeachersBase .FindTeachersPills {
    border-bottom: 1px solid #d8d8d8
}

.FindTeachersBase .TeacherItemSideSlider {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.FindTeachersBase .TeacherItemSideSlider,.FindTeachersBase .TeacherItemSideSlider .TeacherItemSideSlider__arrow {
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    -o-transition: transform .4s;
    transition: transform .4s;
    transition: transform .4s,-webkit-transform .4s;
    will-change: transform;
    -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
    animation-timing-function: cubic-bezier(.755,.05,.855,.06)
}

.FindTeachersBase .TeacherItemSideSlider .TeacherItemSideSlider__arrow {
    pointer-events: none;
    display: block;
    position: absolute;
    right: 100%;
    z-index: 1;
    top: 100px;
    margin-top: -16px;
    width: 16px;
    height: 32px;
    border-style: solid;
    border-width: 16px 8px;
    border-color: transparent #fff transparent transparent
}

.AvailabilityCal {
    font-size: 11px
}

.AvailabilityCal table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px
}

.AvailabilityCal table td {
    background-color: #f9f9fb
}

.AvailabilityCal table .day-td {
    text-align: left;
    background-color: #fff!important;
    overflow: hidden
}

.AvailabilityCal table .hour-td {
    color: #fff;
    border-color: #fff;
    margin: 1px;
    min-width: 37px
}

.AvailabilityCal table .hour-td.low {
    background-color: #d7f4d7
}

.AvailabilityCal table .hour-td.medium {
    background-color: #91e291
}

.AvailabilityCal table .hour-td.active,.AvailabilityCal table .hour-td.high {
    background-color: #4acf4a
}

@media (max-width: 767px) {
    .AvailabilityCal table {
        border-spacing:1px
    }

    .AvailabilityCal .table-responsive {
        border: 0
    }
}

.FilterBar li,.FilterBarOld li {
    border-right: 1px solid #d8d8d8
}

.FilterBar .FilterBar--right li {
    border-left: 1px solid #d8d8d8
}

.FilterBar .FilterDropdownTab--Chevron svg {
    fill: #0699cd
}

.FilterBar .FilterDropdownTab.FilterDropdownTab--active .FilterDropdownTab--Chevron,.FilterBar .FilterSearchableDropdownTab.FilterDropdownTab--active .FilterDropdownTab--Chevron {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.FindTeacherFilter {
    height: 70px
}

.FindTeacherFilter .FindTeacherFilter-container {
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    height: 56px
}

.FindTeacherFilter .FindTeacherFilter-container .FindTeacherFilter-teaches {
    padding: 8px
}

.FindTeacherFilter .FindTeacherFilter-container .FindTeacherFilter-availability {
    padding: 0 8px;
    border-left: 1px solid #e6e6e6
}

.FindTeacherFilter .FindTeacherFilter-container .FilterSearchableDropdownTab--Chevron {
    color: #787b83
}

.FindTeacherFilter button:focus {
    outline: 0
}

.RheostatPriceSlider--Histogram {
    margin: 15px 16px -26px;
    overflow: hidden
}

.PriceSliderPit {
    background: #767676;
    background: hsla(0,0%,46%,.5);
    display: inline-block;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px
}

.rheostat {
    overflow: visible;
    margin: 20px;
    margin-right: 27px
}

.rheostat-background {
    background-color: #fcfcfc;
    border: 1px solid #d8d8d8;
    position: relative;
    height: 6px;
    top: 0!important;
    border-radius: 4px
}

.rheostat-progress {
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c);
    position: absolute;
    height: 6px;
    top: 0!important
}

.rheostat-handle {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    z-index: 2;
    width: 32px;
    height: 32px;
    -webkit-box-shadow: 0 2px 2px rgba(72,72,72,.3)!important;
    box-shadow: 0 2px 2px rgba(72,72,72,.3)!important
}

.rheostat-horizontal {
    //height: 24px
}

.rheostat-horizontal .rheostat-background {
    top: 0;
    width: 100%
}

.rheostat-horizontal .rheostat-progress {
    height: 6px;
    top: 2px
}

.rheostat-horizontal .rheostat-handle {
    margin-left: -12px;
    top: -15px
}

.rheostat-horizontal .rheostat-handle:after,.rheostat-horizontal .rheostat-handle:before {
    top: 7px;
    height: 10px;
    width: 1px
}

.rheostat-horizontal .rheostat-handle:before {
    left: 10px
}

.rheostat-horizontal .rheostat-handle:after {
    left: 13px
}

.FilterDropdown {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    max-width: 300px;
    min-width: 240px;
    border: 1px solid #e8e8e8;
    position: absolute;
    overflow: hidden;
    z-index: 10001
}

.FilterDropdown .FilterDropdown-Search {
    border-bottom: 1px solid #d8d8d8
}

.FilterDropdown .FilterDropdown-Search .vi {
    color: #0699cd;
    margin-left: 16px;
    margin-left: 1rem
}

.FilterInput {
    width: 100%;
    border-radius: 0;
    border: 0!important;
    -webkit-box-shadow: none;
    box-shadow: none
}

.FilterInput:focus {
    border: 0
}

.Filters-PillbarWrapper {
    overflow: hidden;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fff
}

.Filters-Pillbar {
    padding: 5px 15px
}

.Filters-Pillbar .Filters-Pill {
    padding: 5px;
    margin-right: 5px;
    border-radius: 4px;
    background-color: #f8f8f8;
    cursor: pointer;
    border: 1px solid #efefef;
    color: #838789
}

.Filters-Pillbar .Filters-Pill .vi {
    color: #0699cd
}

.Filters-Pillbar .Filters-Pill:hover {
    color: #4f5457;
    border: 1px solid #ccc
}

.FilterList-Item {
    cursor: pointer;
    padding: 16px;
    padding: 1rem
}

.FilterList-Item .FilterList-ItemCheck,.FilterList-Item .FilterList-ItemNotSelectable .fa {
    color: #0699cd
}

.FilterList-Item label {
    width: 100%
}

.FilterList-Item:hover {
    background-color: #e3f3fe
}

.FilterList-GroupLabel {
    padding-left: 16px;
    padding-left: 1rem
}

.FilterDropdown--inner {
    max-width: 300px
}

.FindTeachersFeaturedPills .Filters-Pill {
    background-color: #fff;
    border: 1px dashed #ccc
}

.FilterBar {
    margin-bottom: 0;
    background-color: #f8f8f8;
    width: 100%;
    border-bottom: 1px solid #d8d8d8
}

.FilterBar li {
    border-right: 0
}

.FilterBar input {
    font-size: 22.4px;
    font-size: 1.4rem;
    border: 0
}

.FilterBar.FilterBar--alt {
    background-color: #fff
}

.FilterBar.FilterBar--alt .FilterSearchableDropdownTab {
    color: #0699cd
}

.FilterBar.FilterBar--alt .FilterSearchableDropdownTab .FilterDropdownTab--Chevron {
    display: block
}

.FilterBar.FilterBar--alt .FilterSearchableDropdownTab input::-webkit-input-placeholder {
    color: #0699cd
}

.FilterBar.FilterBar--alt .FilterSearchableDropdownTab input:-ms-input-placeholder,.FilterBar.FilterBar--alt .FilterSearchableDropdownTab input::-ms-input-placeholder {
    color: #0699cd
}

.FilterBar.FilterBar--alt .FilterSearchableDropdownTab input::placeholder {
    color: #0699cd
}

.FilterBar .FilterBar--right li {
    border-right: 0;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.FilterBar .FilterBar--right li,.FilterBar .FilterBar--right li input {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.FilterBar .FilterBar--right li input {
    height: auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch
}

.FilterBar .FilterDropdownTab--active .FilterDropdownTab--Underline {
    width: 100%;
    opacity: 1!important
}

.FilterBar .FilterDropdownTab--Underline {
    position: absolute!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    height: 2px!important;
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c);
    -webkit-transition: all .3s!important;
    -o-transition: all .3s!important;
    transition: all .3s!important;
    opacity: 0!important;
    z-index: 1!important;
    width: 0
}

.FilterBar .FilterDropdownTab--Chevron {
    margin-top: 4px;
    -webkit-transition-property: -webkit-transform,transform!important;
    transition-property: -ms-transform,-webkit-transform,transform!important;
    -webkit-transition-duration: .25s!important;
    -o-transition-duration: .25s!important;
    transition-duration: .25s!important;
    -webkit-transition-timing-function: ease-in-out!important;
    -o-transition-timing-function: ease-in-out!important;
    transition-timing-function: ease-in-out!important
}

.FilterBar .FilterSearchableDropdownTab {
    position: relative;
    cursor: pointer;
    background-color: #fff
}

.FilterBar .FilterSearchableDropdownTab .vi {
    color: #0699cd;
    margin-left: 16px;
    margin-left: 1rem
}

.FilterBar .FilterSearchableDropdownTab input {
    cursor: pointer
}

.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label {
    padding: 0 10px
}

.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label .FilterSearchableDropdownTab--Chevron {
    color: #838789
}

.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label label {
    margin-bottom: -4px
}

.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label input {
    padding: 0;
    height: 20px
}

.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label input::-webkit-input-placeholder {
    color: #838789;
    color: hsla(200,2%,53%,.5);
    opacity: 1
}

.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label input:-ms-input-placeholder,.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label input::-ms-input-placeholder {
    opacity: 1
}

.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label input::placeholder {
    color: #838789;
    color: hsla(200,2%,53%,.5);
    opacity: 1
}

.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label input:-ms-input-placeholder,.FilterBar .FilterSearchableDropdownTab .FilterSearchableDropdownTab--Label input::-ms-input-placeholder {
    color: #838789;
    color: hsla(200,2%,53%,.5)
}

.FilterBar .FilterSearchableDropdownTab .FilterDropdownTab--Chevron {
    display: none
}

.FilterBar .FilterSearchableDropdownTab.FilterDropdownTab--active {
    color: #4f5457
}

.FilterBar .FilterSearchableDropdownTab.FilterDropdownTab--active .caret {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.FilterBar .FilterDropdownTab {
    position: relative;
    padding: 16px;
    padding: 1rem;
    cursor: pointer;
    color: #838789;
    background: transparent;
    border: 0
}

.FilterBar .FilterDropdownTab.FilterDropdownTab--active {
    color: #4f5457
}

.FilterBar .FilterDropdownTab.FilterDropdownTab--active .caret {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.FilterBar .FilterDropdownTab:hover {
    color: #4f5457
}

@media (min-width: 1200px) {
    .MessagingWrapper {
        width:1170px
    }
}

@media (max-width: 992px) {
    .MessagingWrapper {
        width:95%
    }
}

.MessagingWrapper {
    border-radius: 8px;
    padding: 10px
}

.MessagingWrapper .MessagingWrapper--Inner {
    height: 100%;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #ccc
}

.MessagingWrapper .MessageRoomWrapper,.MessagingWrapper .RoomListWrapper {
    position: relative;
    padding: 0!important;
    height: 100%
}

.MessagingWrapper .RoomListWrapper {
    -webkit-flex: 1 0 33%;
    -ms-flex: 1 0 33%;
    flex: 1 0 33%
}

.MessagingWrapper .MessageRoomWrapper,.MessagingWrapper .RoomListWrapper {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.MessagingWrapper .MessageRoomWrapper {
    -webkit-flex: 1 0 67%;
    -ms-flex: 1 0 67%;
    flex: 1 0 67%
}

.MessagingWrapper .MessageRoomWrapper .MessageRoom {
    border-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.RoomList {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    width: 100%
}

.RoomList .chat-filterbox {
     
    padding: 10px 15px;
    border-top-left-radius: 8px;
    border-right: 1px solid hsla(0,0%,80%,.24);
    border-bottom: 1px solid hsla(0,0%,80%,.24)
}

.RoomList .ScrollableRoomList {
    position: relative;
    overflow-y: auto;
    border-top: #fff;
    border-bottom-left-radius: 8px;
    background-color: #eee;
    height: 100%
}

.RoomList .RoomListEntry {
    -webkit-box-shadow: transparent 1px 0 1px 0;
    box-shadow: 1px 0 1px 0 transparent;
    position: relative;
    cursor: pointer;
    min-width: 260px;
    overflow: hidden;
    background-color: #fff;
    padding: 10px;
    border: 2px solid #ccc;
    border: 2px solid hsla(0,0%,80%,.24);
    height: 70px;
    margin-top: 3px;
    border-radius: 10px;
}

.RoomList .RoomListEntry .MessagePreview {
    height: 20px;
    white-space: nowrap;
    width: 120px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color: #aaa
}

.RoomList .RoomListEntry .media-heading {
    font-weight: 400;
    color: #4c4848;
    white-space: nowrap;
    width: 160px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.RoomList .RoomListEntry .time {
    color: #ccc;
    position: absolute;
    bottom: 5px;
    right: 18px;
    margin-bottom: 0;
    font-size:80%
}

.RoomList .RoomListEntry.selected {
    -webkit-box-shadow: transparent 0 0 2px 0;
    box-shadow: 0 0 2px 0 transparent;
    background-color: #daf0fe
}

.RoomList .RoomListEntry.selected .time {
    color: #888;
    font-weight: 700
}

.RoomList .RoomListEntry.selected .MessagePreview {
    color: #888!important
}

.RoomList .RoomListEntry.unread {
    background-color: #ecf0f1
}

.RoomList .RoomListEntry.unread .time {
    color: #888
}

.RoomList .RoomListEntry .groupIcon {
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 50%;
    height: 50px;
    padding-top: 12px;
    width: 50px;
    text-align: center
}

.slick-slider {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list,.slick-slider {
    position: relative;
    display: block
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,.slick-slider .slick-track {
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:after,.slick-track:before {
    display: table;
    content: ""
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.TeacherCard {
    cursor: pointer
}

.TeacherCard__Container {
    background-color: #fff;
    color: #787b83;
    border-radius: 8px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    overflow: hidden;
    padding: 15px
}

.TeacherCard__Container .PresenceProfilePic img {
    border-radius: 4px
}

.TeacherCard__ProfilePicture {
    width: 150px;
    height: 150px;
    display: block
}

.TeacherCard__Status {
    height: 150px;
    margin-left: 9px
}

.TeacherCard__Status h2 {
    font-size: 18px;
    line-height: 18px;
    margin: 0 5px 0 0;
    padding: 0;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    letter-spacing: 0
}

.TeacherCard__CurrencyRange {
    font-size: 16px;
    line-height: 16px;
    margin-top: 9px;
    color: #42c88a;
    letter-spacing: 1.1px;
    text-align: center
}

.TeacherCard__CurrencyRange__Currency {
    font-size: 15px;
    line-height: 15px
}

.TeacherCard__Info {
    padding: 16px;
    padding: 21.6px;
    padding: 1.35rem;
    border-radius: .4rem;
    margin-right: 8px;
    margin-right: .5rem;
    margin-bottom: 8px;
    margin-bottom: .5rem;
    background-color: #f8f8f8
}

.TeacherCard__Info label {
    margin-bottom: 0
}

.TeacherCard__InfoWrapper {
    margin: 9px 0
}

.TeacherCard__Description {
    height: 68px;
    -webkit-line-clamp: 3;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden
}

.Carousel {
    margin-bottom: 30px
}

.Carousel .Carousel__dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #d8d8d8;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.Carousel .Carousel__dot.Carousel__dot--active {
    background-color: #0699cd;
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4)
}

.Carousel .Carousel__arrow {
    color: #0699cd;
    font-size: 25px
}

.Carousel .Carousel__arrow:hover {
    color: #d8d8d8
}

.Carousel__arrow {
    fill: #0699cd
}

.Carousel__arrow:hover {
    fill: #aaa
}

.slick-list {
    padding-top: 10px!important;
    padding-bottom: 10px!important
}

.slick-slider {
    padding-bottom: 20px
}

.slick-next,.slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    cursor: pointer;
    border: none
}

.slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover {
    color: transparent;
    outline: none;
    background: transparent
}

.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before {
    opacity: 1
}

.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before {
    opacity: .25
}

.slick-prev {
    left: -30px
}

[dir=rtl] .slick-prev {
    right: -30px;
    left: auto
}

.slick-prev:before {
    content: "\2190"
}

[dir=rtl] .slick-prev:before {
    content: "\2192"
}

.slick-next {
    right: -30px
}

[dir=rtl] .slick-next {
    right: auto;
    left: -30px
}

.slick-next:before {
    content: "\2192"
}

[dir=rtl] .slick-next:before {
    content: "\2190"
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0
}

.slick-dots li,.slick-dots li button {
    width: 20px;
    height: 20px;
    cursor: pointer
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 5px;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent
}

.slick-dots li button:focus,.slick-dots li button:hover {
    outline: none
}

.slick-dots li button:focus:before,.slick-dots li button:hover:before {
    opacity: 1
}

.slick-dots li button:before {
    font-family: slick;
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: "\2022";
    text-align: center;
    opacity: .25;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #000
}

.LandingBase {
    width: 100%
}

.LandingBase .LandingBaseFeatures {
    margin-top: -100px
}

@media (max-width: 720px) {
    .LandingBase .LandingBaseFeatures {
        margin-top:0
    }
}

.LandingBase .LanguageAutoSuggest input {
    font-size: 16px!important
}

@media (max-width: 960px) {
    .LandingBase .LandingBase__hero-left {
        margin-right:0!important
    }
}

@media (max-width: 720px) {
    .LandingBase .HeroImage .h1-hero {
        font-size:50px
    }
}

.LandingBase .LandingBase--Gutter {
    background-color: #fff;
    height: 25px
}

.LandingBase p {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: .5px
}

.LandingBase .fakeheader {
    font-size: 38px;
    font-weight: 700
}

.LandingBase .fakeheader2 {
    font-size: 24px;
    font-weight: 700
}

@media (max-width: 720px) {
    .LandingBase .LandingBase--mobile-center {
        text-align:center
    }
}

@media (max-width: 992px) {
    .MediaIcons img {
        width:70px
    }
}

.TopHeroVideo h1 {
    color: #fff;
    margin-bottom: 40px;
    font-size: 68px;
    font-weight: 700
}

@media (max-width: 767px) {
    .TopHeroVideo h1 {
        font-size:40px
    }
}

.TopHeroVideo {
    width: 100%;
    height: 90vh
}

.TopHeroVideo h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 100;
    color: #fff
}

@media (min-width: 768px) {
    .TopHeroVideo .TopHeroVideo__text {
        background-image:none!important
    }
}

@media (max-width: 768px) {
    .TopHeroVideo {
        height:100vh
    }

    .TopHeroVideo video {
        display: none
    }
}

.TopHeroVideo {
    overflow: hidden;
    position: relative
}

.TopHeroVideo .TopHeroVideo__overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.TopHeroVideo .TopHeroVideo__overlay .TopHeroVideo__text {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.TopHeroVideo video {
    z-index: 1;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.TopHeroVideo .trigger:hover {
    color: #0699cd
}

.TopHeroVideo .subtext {
    font-size: 22px
}

@-webkit-keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes scroll {
    0% {
        background-position: 0
    }

    to {
        background-position: 90000%
    }
}

@keyframes scroll {
    0% {
        background-position: 0
    }

    to {
        background-position: 90000%
    }
}

@-webkit-keyframes shakeRotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    25% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    75% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes shakeRotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    25% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    75% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-webkit-keyframes bounceGlobe {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bounceGlobe {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes infiniteScrollBg {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    to {
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%)
    }
}

@keyframes infiniteScrollBg {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    to {
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%)
    }
}

@-webkit-keyframes cloudFloat {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    25% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    75% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes cloudFloat {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    25% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    75% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.animated-scene {
    width: 100vw;
    height: 100vh;
    position: fixed;
    min-height: 900px
}

.animated-scene__frame {
    width: 100%;
    position: relative;
    opacity: .8;
    -webkit-animation: infiniteScrollBg 30s infinite linear;
    animation: infiniteScrollBg 30s infinite linear
}

.animated-scene__frame2 {
    width: 100%;
    position: relative;
    opacity: .5;
    -webkit-animation: infiniteScrollBg 15s infinite linear;
    animation: infiniteScrollBg 15s infinite linear
}

.animated-scene__frame2,.animated-scene__frame2:after {
    -webkit-transform: translateX(-275px);
    -ms-transform: translateX(-275px);
    transform: translateX(-275px)
}

.animated-scene__frame2:after,.animated-scene__frame:after {
    content: "";
    height: 500%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(https://cdn.huatutor.com/static/img/c9d43ed30b5efd9f7164a9d4dbe94629.stars-1.svg);
    background-size: 100% 20%
}

.animated-scene__frame__img {
    width: 100%
}

.GameBase .GameBase__mobileAnswers {
    display: none
}

@media (max-width: 768px) {
    .GameBase.GameBase--result .GameResult__h2 {
        margin-top:-30px!important;
        font-size: 20px
    }

    .GameBase.GameBase--result .GameGlobey {
        margin-top: -30px
    }

    .GameBase.GameBase--question .GameGlobey {
        margin-top: 70px
    }

    .GameBase.GameBase--question .GameBase--logo {
        display: none
    }

    .GameBase.GameBase--question h2 {
        margin-top: -30px!important;
        font-size: 18px
    }

    .GameBase.GameBase--question .GameAnswerButton {
        margin-top: -20px;
        -webkit-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }

    .GameBase .GameBase__answers {
        display: none
    }

    .GameBase .GameBase__playButton {
        -webkit-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7);
        margin-top: -50px
    }

    .GameBase .GameBase__mobileAnswers {
        display: block!important
    }
}

@media (max-width: 768px) {
    .GameBase .GameGlobey {
        -webkit-transform:scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

.GameBase .GameGlobey {
    width: 181px;
    height: 181px;
    position: relative
}

.GameBase .GameGlobey svg {
    -webkit-animation-name: bounceGlobe;
    animation-name: bounceGlobe;
    -webkit-animation: bounceGlobe 2s cubic-bezier(.4,0,.2,1) infinite;
    animation: bounceGlobe 2s cubic-bezier(.4,0,.2,1) infinite
}

.GameBase .GameGlobey .GameGlobey__cloud1 {
    position: absolute;
    z-index: 2;
    left: -50px;
    top: 75px;
    -webkit-animation-name: cloudFloat;
    animation-name: cloudFloat;
    -webkit-animation: cloudFloat 10s linear infinite;
    animation: cloudFloat 10s linear infinite
}

.GameBase .GameGlobey .GameGlobey__cloud2 {
    position: absolute;
    z-index: 2;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    right: -50px;
    top: 110px;
    -webkit-animation-name: cloudFloat;
    animation-name: cloudFloat;
    -webkit-animation: cloudFloat 6s linear infinite;
    animation: cloudFloat 6s linear infinite
}

.GameBase .GameGlobey .GameGlobey__cloud3 {
    position: absolute;
    z-index: 2;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    right: -70px;
    top: 40px;
    -webkit-animation-name: cloudFloat;
    animation-name: cloudFloat;
    -webkit-animation: cloudFloat 7s linear infinite;
    animation: cloudFloat 7s linear infinite
}

.GameBase .GameResult {
    padding-bottom: 96px;
    padding-bottom: 6rem
}

.GameBase .GameResult .no-bottom-margin {
    margin-bottom: 0
}

.GameBase .GameResult input {
    border-radius: 8px;
    font-size: 20px;
    padding: 15px;
    text-align: center;
    border: 4px solid #57c1e6;
    font-weight: 700
}

.GameBase .GameResult .GameResult__row {
    background-color: #d3e9f9;
    background-color: rgba(211,233,249,.5);
    border-radius: 8px;
    margin-bottom: 20px;
    color: #fff;
    padding: 10px;
    margin-right: 16px;
    margin-right: 1rem
}

.GameBase .GameResult .GameResult__row-correct {
    border: 2px solid #36ca36
}

.GameBase .GameResult .GameResult__row-not-correct {
    border: 2px solid #fd4444
}

.GameBase .GameResult .GameResult__cta-blurb,.GameBase .GameResult .GameResult__cta-link-div {
    text-align: center;
    margin-top: 32px;
    margin-top: 2rem
}

.GameBase .GameResult .GameResult__cta-link {
    text-decoration: underline;
    color: #fff
}

@media (min-width: 768px) {
    .GameBase .GameBase__playButton {
        position:absolute;
        z-index: 2;
        top: 30px;
        left: 297px
    }
}

.GameBase .GameBase__playButton {
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.4);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.4);
    border-radius: 50%
}

@media (min-width: 768px) {
    .GameBase .GameBase__playButton:hover {
        -webkit-transition:all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05)
    }
}

.GameBase .GameBase__icon-large {
    color: #fff;
    margin-left: 16px;
    margin-left: 1rem;
    margin-right: 16px;
    margin-right: 1rem;
    font-size: 80px;
    font-size: 5rem
}

.GameBase .GameAnswerButton .GameAnswerButton__mobile {
    border-radius: 10px;
    border: 4px solid #fff;
    width: 354px;
    height: 85px
}

.GameBase .GameAnswerButton:hover {
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    cursor: pointer
}

.GameBase .GameAnswerButton.GameAnswerButton--wrong {
    -webkit-animation-name: shakeRotate;
    animation-name: shakeRotate;
    -webkit-animation: shakeRotate .2s linear;
    animation: shakeRotate .2s linear
}

.GameBase .GameAnswerButton.GameAnswerButton--TopRight svg {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1)
}

.GameBase .GameAnswerButton.GameAnswerButton--BottomRight svg {
    -webkit-transform: scale(-1,-1);
    -ms-transform: scale(-1,-1);
    transform: scale(-1,-1)
}

.GameBase .GameAnswerButton.GameAnswerButton--BottomLeft svg {
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1)
}

.GameBase .GameBase__overlay {
    position: fixed;
    background-image: url(https://cdn.huatutor.com/static/img/c9d43ed30b5efd9f7164a9d4dbe94629.stars-1.svg);
    background-position: 50%;
    -webkit-animation: 600s scroll infinite linear;
    animation: 600s scroll infinite linear;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-repeat: repeat
}

.GameBase .GameBase__lives {
    position: absolute;
    right: 0
}

@media (max-width: 768px) {
    .GameBase .GameBase__lives {
        -webkit-transform:scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

.GameBase .GameBase__lives .Game__heart {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.GameBase .GameBase__lives .Game__heart,.GameBase .GameBase__lives .Game__heart--hidden {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1)!important;
    -o-transition: all .5s cubic-bezier(.4,0,.2,1)!important;
    transition: all .5s cubic-bezier(.4,0,.2,1)!important
}

.GameBase .GameBase__lives .Game__heart--hidden {
    -webkit-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
    opacity: 0;
    -webkit-animation: none!important;
    animation: none!important
}

.GameBase .GameBase__lives .GameBase__panel {
    min-width: 175px;
    height: 100px
}

.GameBase .GameBase__score {
    position: absolute;
    left: 0
}

@media (max-width: 768px) {
    .GameBase .GameBase__score {
        -webkit-transform:scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }
}

.GameBase .GameBase__score.GameScore__score--big .GameBase__panel {
    margin: 30px;
    height: 148px
}

.GameBase .GameBase__score.GameScore__score--big .GameBase__panel .GameBase__score_score {
    font-size: 40px
}

.GameBase .GameBase__score .GameBase__panel {
    min-width: 175px;
    height: 100px
}

.GameBase .GameBase__share-facebook {
    top: 115px
}

.GameBase .GameBase__share-twitter {
    position: absolute;
    right: 0;
    top: 115px
}

.GameBase .GameBase__container {
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.GameBase .GameBase--text-lg {
    font-size: 30px;
    line-height: 35px
}

.GameBase .GameBase__share-facebook {
    position: absolute;
    left: 0
}

.GameBase .GameBase__share-facebook .GameBase__panel {
    min-width: 120px;
    height: 88px
}

.GameBase .GameBase__settings_row {
    padding-left: 32px;
    padding-left: 2rem
}

.GameBase .btn-game {
    background-image: -webkit-linear-gradient(45deg,#0ec9e8,#0699cd);
    background-image: -o-linear-gradient(45deg,#0ec9e8,#0699cd);
    background-image: linear-gradient(45deg,#0ec9e8,#0699cd)
}

.GameBase .btn-game:active {
    color: #fff
}

.GameBase .btn-game:focus,.GameBase .btn-game:hover {
    color: #fff;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    background-image: -webkit-linear-gradient(45deg,#2194ce,#0665cd);
    background-image: -o-linear-gradient(45deg,#2194ce,#0665cd);
    background-image: linear-gradient(45deg,#2194ce,#0665cd)
}

.GameBase .btn-game {
    color: #fff
}

.GameBase .btn-game.btn {
    border-radius: 16px;
    border: 4px solid #fff
}

.GameBase .btn-game.btn-lg {
    border-radius: 16px;
    border: 6px solid #fff;
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: 30px
}

.GameBase .btn-share:active {
    color: #fff
}

.GameBase .btn-share:focus,.GameBase .btn-share:hover {
    color: #fff;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.GameBase .btn-share {
    color: #fff;
    border-radius: 10px;
    border: 4px solid #fff
}

.GameBase .btn-share.btn-lg {
    border-radius: 16px;
    border: 6px solid #fff;
    padding: 15px;
    font-size: 20px
}

.GameBase .btn-share.btn-facebook {
    background-color: #3b5ba0
}

.GameBase .btn-share.btn-facebook:hover {
    background-color: #4e6ba9
}

.GameBase .btn-share.btn-twitter {
    background-color: #1da1f2
}

.GameBase .btn-share.btn-twitter:hover {
    background-color: #34aaf3
}

.GameBase .heartbeat {
    -webkit-animation-name: heartbeat;
    animation-name: heartbeat;
    -webkit-animation: heartbeat 1.5s ease-out;
    animation: heartbeat 1.5s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.GameBase h1 {
    font-size: 42px
}

@media (max-width: 768px) {
    .GameBase h1 {
        font-size:35px
    }
}

.GameBase {
    font-weight: 700;
    font-size: 20px;
    background-color: #213159
}

.GameBase,.GameBase h1,.GameBase h2,.GameBase h3 {
    color: #fff!important
}

.GameBase .GameBase__panel {
    border-radius: 12px;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.4)
}

.GameBase .GameBase__panel.GameBase__panel--sm-padding {
    padding: 15px
}

.GameBase .GameBase__panel.GameBase__panel--xl-padding {
    padding: 30px
}

.GameBase .GameBase__panel.GameBase__panel--xxl-width-padding {
    padding: 30px 50px
}

.unsubscribed-from p {
    margin-bottom: 15px
}

.LanguageAutoSuggest {
    border: 2px solid #fff;
    border-radius: 6px
}

.LanguageAutoSuggest input {
    border: 1px solid #fff
}

.LanguageAutoSuggest .LanguageAutoSuggest__caret {
    position: absolute;
    top: 15px;
    left: -23px;
    color: #4f5457;
    z-index: 2
}

.LanguageAutoSuggest ::-webkit-input-placeholder {
    font-weight: 700;
    color: #4f5457
}

.LanguageAutoSuggest ::-moz-placeholder {
    font-weight: 700;
    color: #4f5457
}

.LanguageAutoSuggest :-ms-input-placeholder {
    font-weight: 700;
    color: #4f5457
}

.LanguageAutoSuggest :-moz-placeholder {
    font-weight: 700;
    color: #4f5457
}

.react-autosuggest__container {
    position: relative
}

.react-autosuggest__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.react-autosuggest__suggestions-list .react-autosuggest__suggestion {
    font-size: 20px;
    color: #4f5457;
    letter-spacing: -.96px;
    padding: 10px 15px;
    cursor: pointer
}

.react-autosuggest__suggestions-list .react-autosuggest__suggestion:first-child,.react-autosuggest__suggestions-list .react-autosuggest__suggestion:last-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.react-autosuggest__suggestions-list .react-autosuggest__suggestion--highlighted,.react-autosuggest__suggestions-list .react-autosuggest__suggestion:hover {
    background-color: #e3f3fe
}

.react-autosuggest__suggestions-container--open {
    background-color: #fff;
    margin-top: 55px;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 8px;
    overflow-y: auto;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    max-height: 300px
}

.KoreaBaseMain .KoreaBase--gift {
    background-color: #0699cd
}

.KoreaBaseMain .KoreaBase--blueBg {
    background-color: #0699cd;
    color: #fff;
    padding: 60px
}

.KoreaBaseMain .KoreaBase--blackboard {
    background-color: #009688;
    color: #fff;
    border: 10px solid #ffb90b;
    padding: 60px
}

.KoreaBaseMain .KoreaBase--alt {
    background-color: #fff;
    padding: 60px
}

.KoreaBaseMain .KoreaBase {
    padding: 60px
}

@-webkit-keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.Typist .Cursor {
    display: inline-block
}

.Typist .Cursor--blinking {
    -webkit-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite
}

.RectangleBox {
    width: 300px;
    height: 200px;
    margin: 10px;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    cursor: pointer
}

.RectangleBox:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.ProfileBase br {
    line-height: 5px;
    content: " ";
    display: block;
    margin: 5px 0
}

.ProfileBase .ProfileBase--BottomButton {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 15px
}

@media (max-width: 768px) {
    .ProfileBase .mobile-flex-direction-column {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .ProfileBase .mobile-flex-direction-row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .ProfileBase .mobile-flex-align-start {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .ProfileBase .mobile-flex-align-center {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }

    .ProfileBase .mobile-flex-align-end {
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end
    }

    .ProfileBase .mobile-flex-align-stretch {
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch
    }
}

.ProfileBase .cal {
    padding: 0;
    border: 0
}

@media (max-width: 979px) {
    .ProfileBase .affixed {
        position:relative
    }
}

@media (min-width: 979px) {
    .ProfileBase .affixed {
        min-width:292.5px
    }
}

.ProfileBase .link-normalize>a {
    color: #787b83
}

@media (max-width: 768px) {
    .ProfileBase .teacher-info .ProfileBase--InnerBlock {
        max-width:100%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .ProfileBase .main-profile-info {
        text-align: center
    }
}

.ProfileBase .teacher-pricing .session-rate {
    font-size: 28.8px;
    font-size: 1.8rem;
    letter-spacing: 2.4px;
    letter-spacing: .15rem;
    color: #42c88a
}

.ProfileBase .teacher-pricing:hover {
    background-color: #f8f8f8
}

.ProfileBase .teacher-pricing {
    padding: 16px;
    padding: 1rem
}

.ProfileBase .teacher-main-info {
    padding-left: 32px;
    padding-left: 2rem
}

.ProfileBase .ProfileBase--InnerBlock {
    padding: 16px;
    padding: 1rem;
    border-radius: .4rem;
    background-color: #f8f8f8;
    -webkit-flex-basis: 31%;
    -ms-flex-preferred-size: 31%;
    max-width: 31%;
    -webkit-flex-basis: 0%;
    -ms-flex-preferred-size: 0%;
    flex-basis: 0%;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.ProfileBase .ProfileBase--InnerBlock label {
    margin-bottom: 0
}

.ProfileBase .ProfileBase--truncate {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.CourseEnabler .CourseEnabler__item {
    border-bottom: 1px solid #d8d8d8
}

.CourseEnabler .CourseEnabler__item:last-child {
    border-bottom: 0
}

.Courses__icon {
    background-color: #0699cd;
    color: #fff;
    font-weight: 700;
    text-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.Courses__icon,.Courses__icon img {
    border-radius: 4px;
    width: 44px;
    height: 44px
}

.Courses__icon img {
    max-width: none
}

.ShareOverlay__Container {
    width: 490px;
    margin: auto;
    z-index: 100;
    position: absolute;
    padding: 10px;
    border: 1px solid silver;
    border-radius: 8px;
    margin-top: 10px;
    -webkit-box-shadow: rgba(0,0,0,.2) 0 2px 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    background-color: #fff
}

.Share__IconContainer {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.Share__Icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    height: 40px;
    font-size: 20px;
    border: none;
    outline: none;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

.Share__Icon:hover {
    color: #fff;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

.Share__Icon:visited {
    color: #fff
}

@media (max-width: 767px) {
    .Share__Icon {
        width:50%;
        height: 60px;
        font-size: 30px
    }
}

@media (min-width: 767px) {
    .Share__Icon {
        width:40px
    }
}

.Share__Button {
    height: 45px
}

.Share__Icon--twitter {
    background-color: #1da1f2
}

.Share__Icon--facebook {
    background-color: #3a5795
}

.Share__Icon--reddit {
    background-color: #ff3c04
}

.Share__Icon--google {
    background-color: #db503b
}

.Share__Icon--pinterest {
    background-color: #bd081c
}

.Share__Icon--linkedin {
    background-color: #0077b5
}

.Share__Icon--blogger {
    background-color: #fb8f3d
}

.Share__Icon--stumbleupon {
    background-color: #eb4924
}

.Share__Icon--vkontakte {
    background-color: #2b587a
}

.Share__Icon--odnoklassniki {
    background-color: #f2720c
}

.Share__Icon--email {
    background-color: #0699cd
}

.Discussion__list .DiscussionItem__wrapper {
    border-bottom: 1px solid #d8d8d8;
    padding: 15px 0;
    margin: 0 15px
}

.Discussion__list .DiscussionItem__wrapper:last-child {
    border-bottom: 0
}

.DiscussionItem {
    cursor: pointer
}

.DiscussionItem .DiscussionItem__title {
    color: #4f565a;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.96px;
    line-height: 27px
}

.DiscussionItem .required {
    font-size: 15px;
    color: #b1b1b1;
    margin-left: 5px
}

.DiscussionItem .DiscussionItem__main-image {
    overflow: hidden;
    width: 80px;
    height: 60px
}

.DiscussionItem .DiscussionItem__content-body {
    padding: 0 15px;
    min-width: 0
}

.DiscussionItem .DiscussionItem__content-body .DiscussionItem__title {
    font-size: 20px;
    width: 100%;
    display: block
}

.DiscussionItem .DiscussionItem__content-body .DiscussionItem__title a {
    color: #4f5457
}

.DiscussionItem .DiscussionItem__content-body .link {
    display: block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.DiscussionItem .shadow {
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    border-radius: 8px
}

.DiscussionListingBase .side-panel {
    font-size: 14.25px;
    border-radius: 8px;
    background-color: #fff;
    padding: 22px
}

.UpDownReactions.UpDownReactions--vertical {
    width: 25px;
    height: 55px
}

.UpDownReactions.UpDownReactions--vertical .UpDownReactions__popularity {
    font-size: 18px;
    letter-spacing: 1.5px;
    color: #4f5457;
    line-height: 18px;
    margin-bottom: -3px
}

.UpDownReactions.UpDownReactions--down .vi-downvote,.UpDownReactions.UpDownReactions--up .vi-upvote {
    color: #00aaf4
}

.UpDownReactions .vi {
    cursor: pointer;
    color: #d8d8d8
}

.UpDownReactions .vi:hover {
    color: #00aaf4
}

.shadow {
    border-radius: 8px
}

.padding-fix {
    padding-left: 0
}

.side-panel {
    font-size: 14.25px;
    padding: 22px
}

.card-article,.side-panel {
    border-radius: 8px;
    background-color: #fff
}

.card-article {
    margin-bottom: 20px;
    cursor: pointer
}

.card-article-header {
    position: relative;
    padding: 10px
}

.card-article-author-picture {
    float: left;
    margin-right: 10px;
    position: relative;
    top: 2px
}

.card-article-body-right {
    float: right
}

.card-article-author-picture>img {
    width: 30px;
    height: 30px;
    border-radius: 15px
}

.card-article-author-name {
    font-size: 12px;
    line-height: 16px
}

.card-article-timestamp {
    font-size: 10px;
    color: #c2c2c2
}

.card-article-header-right {
    float: right;
    text-align: right;
    position: relative
}

.card-article-featured {
    font-size: 16px;
    margin-top: 3px
}

.card-article-image {
    position: relative;
    padding: 20px;
    background-size: cover!important;
    background-position: 50%!important;
    -webkit-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    min-height: 180px
}

.card-article-image:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.PostListingItem__coverwrap {
    overflow: hidden;
    min-height: 180px
}

.PostListingItem__bar {
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c);
    width: 100%;
    height: 4px
}

.card-article-title {
    font-size: 18px;
    line-height: 21px;
    margin-top: 4px;
    margin-bottom: 4px
}

.card-article-body {
    padding: 15px
}

.card-article-description {
    overflow: hidden
}

.card-article-tags {
    margin-top: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.card-article-tag {
    margin-top: 3px;
    margin-right: 3px;
    padding: 4px 8px;
    color: #787b83;
    background-color: #f2f2f2;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-transition: background-color .31415s;
    -o-transition: background-color .31415s;
    transition: background-color .31415s;
    -webkit-transition: color .1415s;
    -o-transition: color .1415s;
    transition: color .1415s;
    cursor: pointer;
    font-weight: 700
}

.card-article-tag:hover {
    color: #f8f8f8!important;
    background-color: #0699cd!important
}

.card-article-footer {
    padding: 10px;
    background-color: #f8f8f8;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.card-article-statistics {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 8px
}

.card-article-statistic {
    margin-right: 12px
}

.card-article-likes {
    color: #e8175d
}

.card-article-comments {
    color: #0699cd
}

.card-article-cta {
    float: right;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    vertical-align: bottom
}

.StickyNavBar {
    background-color: #f8f8f8;
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.07);
    box-shadow: 0 4px 8px rgba(0,0,0,.07);
    -webkit-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;
    overflow: hidden;
    opacity: 0;
    height: 0
}

.StickyNavBar ul {
    margin: 0
}

.StickyNavBar .MainSubHeader {
    border-bottom: 0
}

.Ratings .Ratings__compliments {
    border-radius: 4px;
    background-color: #f8f8f8
}

.Ratings .RatingCommentItem {
    position: relative
}

.Ratings .RatingCommentItem .RatingCommentItem__flag {
    position: absolute;
    right: 0;
    top: 0
}

.modal .Package .package-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px
}

.Package {
    font-size: normal
}

.Package .package-header {
    width: 100%;
    color: #fff;
    padding: 30px;
    background: -webkit-gradient(linear,left top,left bottom,from(#000),to(#000));
    background: -webkit-linear-gradient(#000,#000);
    background: -o-linear-gradient(#000,#000);
    background: linear-gradient(#000,#000);
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.65)),to(rgba(0,0,0,.65)));
    background: -webkit-linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65));
    background: -o-linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65));
    background: linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65));
    background-size: cover!important;
    background-position: 50%!important;
    position: relative
}

.Package .package-header a {
    color: #fff
}

.Package .package-header .num-ratings {
    color: #fff!important
}

.Package .package-header h2 {
    width: 80%;
    color: #fff
}

.Package .package-header h4 {
    color: #fff
}

.Package .package-header small {
    display: inline
}

.Package .price-info {
    text-align: left
}

.Package .lesson-price {
    font-size: 24px;
    font-weight: 700;
    color: #3bb85c
}

@media (min-width: 992px) {
    .Package .price-info {
        text-align:right;
        position: absolute;
        right: 30px;
        bottom: 30px
    }
}

.Package .package-body {
    padding: 30px;
    background-color: #fff
}

.Package .package-body .description {
    font-size: 14.25px
}

.package-item {
    cursor: pointer;
    border: 0
}

.package-item .panel-package>a {
    text-decoration: none;
    color: #787b83
}

.package-item .panel-package-header {
    position: relative;
    width: 100%;
    height: 120px;
    color: #fff;
    padding: 10px;
    background: -webkit-gradient(linear,left top,left bottom,from(#574a4a),to(#574a4a));
    background: -webkit-linear-gradient(#574a4a,#574a4a);
    background: -o-linear-gradient(#574a4a,#574a4a);
    background: linear-gradient(#574a4a,#574a4a);
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(87,74,74,.65)),to(rgba(87,74,74,.65)));
    background: -webkit-linear-gradient(rgba(87,74,74,.65),rgba(87,74,74,.65));
    background: -o-linear-gradient(rgba(87,74,74,.65),rgba(87,74,74,.65));
    background: linear-gradient(rgba(87,74,74,.65),rgba(87,74,74,.65));
    background-size: cover!important;
    background-position: 50%!important;
    border-radius: 8px
}

.package-item.addon .panel-package-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.package-item .panel-package-price {
    float: right;
    text-align: right;
    line-height: 14px
}

.package-item .panel-package-price-original {
    font-size: 12px;
    text-decoration: line-through
}

.package-item .panel-package-price-discounted {
    font-size: 18px;
    color: #3bb85c
}

.package-item .panel-package-numberlessons {
    letter-spacing: 1px;
    font-size: 10px;
    font-weight: 700;
    text-align: right
}

.package-item .panel-package-informationcontainer {
    position: absolute;
    bottom: 10px
}

.package-item .panel-package-title {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 4px
}

.package-item .panel-package-title a {
    color: #fff
}

.package-item .panel-package-tags {
    color: #d8d8d8;
    letter-spacing: 1px;
    font-size: 8px
}

.package-item .panel-package-body {
    padding: 10px
}

.package-item .panel-package-teacherpicturecontainer {
    float: left
}

.package-item .panel-package-teacherpicture {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: 2px solid #fff
}

.package-item .panel-package-teacherinformationcontainer {
    float: left;
    padding-top: 2px;
    padding-left: 8px;
    line-height: 18px
}

.package-item .panel-package-teachername {
    font-size: 16px;
    margin-bottom: 2px
}

.package-item .panel-package-teacherlocation {
    letter-spacing: 1px;
    font-size: 9px
}

.package-item .panel-package-teacherrating {
    font: 6px
}

.UniversalPackageItem-TeacherAddon .panel-package-teacherinformationcontainer,.UniversalPackageItem-TeacherAddon .panel-package-teacherpicturecontainer img {
    height: 60px!important
}

.UniversalPackageItem-TeacherAddon .panel-package-teacherpicturecontainer img {
    width: 60px!important
}

.ProfileSampleVideos .youtube-lite {
    width: 100%
}

.ProfileSampleVideos .ProfileSampleVideos--top {
    margin-bottom: 5px
}

.ProfileSampleVideos .ProfileSampleVideos--bottom {
    background-color: #000;
    border-radius: 8px
}

.ProfileSampleVideos .ProfileSampleVideos--thumb {
    background-color: #000;
    cursor: pointer;
    background-size: cover;
    background-position: 50%;
    opacity: .7;
    max-width: 140px
}

.ProfileSampleVideos .ProfileSampleVideos--thumb:hover {
    opacity: .9
}

.ProfileSampleVideos .ProfileSampleVideos--thumb.active {
    opacity: 1
}

.ResumeItem br {
    line-height: 1px;
    content: " ";
    display: block;
    margin: 1px 0
}

.ThreadAttachment__Container {
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #0699cd;
    font-size: 12px;
    letter-spacing: .3px;
    height: 30px;
    color: #0699cd;
    padding: 7px;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 4px;
    margin-top: 4px;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    cursor: pointer
}

.ThreadAttachment__Container--deletable {
    max-width: 240px;
    -webkit-align-self: inherit;
    -ms-flex-item-align: inherit;
    align-self: inherit
}

.ThreadInput__ActionButton {
    color: #4f5457;
    color: rgba(79,84,87,.5);
    padding: 0 2.5px;
    font-size: 24px
}

.shadow {
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1)
}

@media (max-width: 767px) {
    .ThreadItem .ProfilePic {
        width:30px;
        height: 30px
    }
}

.ThreadItem__moreThreads {
    margin-left: 29px
}

@media (max-width: 767px) {
    .ThreadItem__moreThreads {
        margin-left:10px
    }
}

.ThreadItem__MediaAttachment {
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    padding: 14px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    font-size: 14.25px
}

@media (max-width: 767px) {
    .ThreadItem__footer {
        font-size:12px
    }
}

.ThreadItem__MediaAttachment__Icon {
    font-size: 23px;
    color: #0699cd;
    margin-right: 6px
}

.ThreadInput.ThreadInput__child {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px
}

.ThreadItem__Panel {
    border: 1px solid #e8e8e8;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    border-radius: 8px;
    padding: 15px
}

.ThreadItem__Bullet {
    margin-left: 5px;
    margin-right: 5px
}

.ThreadItem__Link {
    color: #00aaf4;
    margin-right: 5px;
    cursor: pointer
}

.ThreadItem__Link--alternative {
    color: #c6c6c6
}

.ThreadItem__Created {
    margin-left: 5px
}

.ThreadListing__top {
    border-bottom: 1px solid #d8d8d8
}

.Thread__spam-overlay {
    background: #fff;
    background: hsla(0,0%,100%,0);
    background: -webkit-gradient(left top,right top,color-stop(0,hsla(0,0%,100%,0)),color-stop(47%,rgba(0,0,0,.1)),color-stop(100%,hsla(0,0%,93%,0)));
    background: -webkit-linear-gradient(left,hsla(0,0%,100%,0),rgba(0,0,0,.1) 47%,hsla(0,0%,93%,0));
    background: -o-linear-gradient(left,hsla(0,0%,100%,0) 0,rgba(0,0,0,.1) 47%,hsla(0,0%,93%,0) 100%);
    background: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),color-stop(47%,rgba(0,0,0,.1)),to(hsla(0,0%,93%,0)));
    background: linear-gradient(90deg,hsla(0,0%,100%,0) 0,rgba(0,0,0,.1) 47%,hsla(0,0%,93%,0));
    padding-top: 25px;
    text-align: center;
    position: absolute;
    z-index: 1000;
    color: #000
}

.Thread {
    margin-top: 5px
}

.Thread.Thread__profile-pic-place {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 10px;
    padding-top: 5px
}

.Thread.Thread__body {
    padding-left: 3px
}

.Thread.Thread__spam {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter');
    filter: blur(4px)
}

.Thread--flat-top .Threads__comment-section {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 10px
}

.Threads__comment-section {
    padding: 30px;
    background-color: #f8f8f8;
    border-radius: 8px
}

.ThreadItem {
    margin-top: 15px
}

.ThreadItem:first-child {
    margin-top: 0
}

.ThreadItem .ThreadItem__line {
    width: 1px;
    border: 1px solid #efefef;
    margin-right: 30px
}

@media (max-width: 767px) {
    .ThreadItem .ThreadItem__line {
        margin-right:7px
    }
}

.TeachBase .TeachBase__video {
    background-color: #fff
}

.TeachBase .TeachBase__feature.TeachBase__feature--active,.TeachBase .TeachBase__feature:hover {
    -webkit-box-shadow: 0 25px 15px 0 rgba(0,0,0,.2)!important;
    box-shadow: 0 25px 15px 0 rgba(0,0,0,.2)!important;
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.TeachBase .TeachBase__TeachFeatures2 {
    z-index: 1;
    position: relative;
    background-color: #f2f2f2
}

.TeachBase .TeachBase__TeachFeatures2:before {
    top: 0;
    -webkit-transform: skewY(2deg);
    -ms-transform: skewY(2deg);
    transform: skewY(2deg);
    -webkit-transform-origin: 100% 0 0;
    -ms-transform-origin: 100% 0 0;
    transform-origin: 100% 0 0
}

.TeachBase .TeachBase__TeachFeatures2:after {
    bottom: 0;
    -webkit-transform: skewY(-2deg);
    -ms-transform: skewY(-2deg);
    transform: skewY(-2deg);
    -webkit-transform-origin: 100% center 0;
    -ms-transform-origin: 100% center 0;
    transform-origin: 100% center 0
}

.TeachBase .TeachBase__TeachFeatures2:after,.TeachBase .TeachBase__TeachFeatures2:before {
    pointer-events: none;
    content: "";
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    background: inherit
}

.TeachVideo {
    padding: 20px
}

.TeachVideo .text {
    display: inline-block;
    //:~"calc(100% - "@video-width~" - 30px)";vertical-align: top;
    margin-top: 19%;
    margin-left: 20px;
    line-height: 1.5;
    font-size: 16px
}

@media (max-width: 991px) {
    .TeachVideo .text {
        margin-top:10px
    }
}

@media (max-width: 660px) {
    .TeachVideo .text {
        margin-top:10px
    }
}

.TeachFAQ h2 {
    margin: 40px 0 20px
}

.TeachFAQ a {
    display: block
}

.TeachFAQ .answers a,.TeachFAQ .answers a:hover {
    display: inline-block
}

.FAQCollapsible {
    text-align: left;
    border-bottom: 1px solid #4f5457;
    position: relative;
    margin-top: -1px;
    padding: 20px
}

.FAQCollapsible:not(:first-child) {
    border-top: 0
}

.FAQCollapsible .FAQCollapsible--title {
    font-size: 20px
}

.FAQCollapsible .fa-chevron-up {
    -webkit-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out
}

.FAQCollapsible .FAQCollapsible--answer {
    max-height: 0;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px 0 0;
    -webkit-transition: all .2s ease-in-out,padding .2s ease-in-out;
    -o-transition: all .2s ease-in-out,padding .2s ease-in-out;
    transition: all .2s ease-in-out,padding .2s ease-in-out;
    font-size: 14.25px;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px)
}

.FAQCollapsible.FAQCollapsible--open {
    overflow: hidden;
    background-color: #fff!important;
    border-bottom: none!important;
    -webkit-box-shadow: 0 10px 26px rgba(0,0,0,.06);
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.FAQCollapsible.FAQCollapsible--open .fa-chevron-up {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.FAQCollapsible.FAQCollapsible--open .FAQCollapsible--answer {
    padding: 0 20px 20px 0;
    max-height: 200px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.SpeedTest__info_row {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.SpeedTest__info_column,.SpeedTest__info_row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal
}

.SpeedTest__info_column {
    -webkit-box-flex: 0.25;
    -webkit-flex: 0.25;
    -ms-flex: 0.25;
    flex: 0.25;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-left: 48px;
    padding-left: 3rem
}

.SpeedTest__poor_speed {
    color: #f71010
}

.SpeedTest__fair_speed {
    color: #05749b
}

.SpeedTest__excellent_speed {
    color: #36ca36
}

.ProfilePicEditable {
    position: relative;
    width: 150px;
    height: 150px
}

.ProfilePicEditable.ProfilePicEditable--round {
    border-radius: 50%;
    overflow: hidden
}

.ProfilePicEditable:hover .ProfilePicEditable--Overlay {
    opacity: 1
}

.ProfilePicEditable .ProfilePicEditable--Overlay {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #fff;
    background: #000;
    background: rgba(0,0,0,.5);
    cursor: pointer
}

.ProfilePicEditable .ProfilePicEditable--Overlay i {
    display: block
}

.ProfilePhotoUpload .DropZoneActive--show {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    display: none;
    border: 4px dashed #888;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.85);
    z-index: 10
}

.ProfilePhotoUpload .DropZoneActive .DropZoneActive--show {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.ProfilePhotoUpload .verb-profile-pic {
    width: 150px;
    height: 150px;
    -webkit-box-shadow: inset 0 0 5px #000;
    box-shadow: inset 0 0 5px #000
}

.ProfilePhotoUpload .ProfilePhotoUpload--top {
    border-bottom: 1px solid #efefef
}

.ProfilePhotoUpload .ProfilePhotoUpload--guidelines {
    padding: 10px
}

.ProfilePhotoUpload .ProfilePhotoUpload--guidelines i {
    vertical-align: middle;
    margin-right: 4px
}

.ProfilePhotoUpload .ProfilePhotoUpload--photo {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    background-color: #cacccd
}

.ProfilePhotoUpload .ProfilePhotoUpload--background {
    position: absolute;
    top: 0;
    left: auto;
    opacity: .3
}

.ProfilePhotoUpload .ProfilePhotoUpload--rounder {
    border-radius: 50%;
    border: 0 solid #fff
}

.ProfilePhotoUpload .ProfilePhotoUpload--wrapper {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px
}

.ProfilePhotoUpload .ProfilePhotoUpload--loader {
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: #000;
    background-color: rgba(0,0,0,.8)
}

.ProfilePhotoUpload .pic-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    background-color: #000;
    color: #fff;
    opacity: .4
}

.SuperadminDashboard .panel-body {
    font-size: 32px
}

.no-padding-cell .public_fixedDataTableCell_cellContent {
    padding: 0
}

.FixedDataTable_clickableRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.FixedDataTable_clickableRow .public_fixedDataTable_bodyRow {
    cursor: pointer
}

.FixedDataTable_clickableRow .public_fixedDataTable_bodyRow:hover,.FixedDataTable_clickableRow .public_fixedDataTable_bodyRow:hover .public_fixedDataTableCell_main {
    background-color: #e7f5fe!important
}

.ScrollbarLayout_mainVertical {
    z-index: 2!important
}

.public_Scrollbar_main.public_Scrollbar_mainActive,.public_Scrollbar_main:hover {
    background-color: #fff;
    background-color: hsla(0,0%,100%,.8)
}

.public_Scrollbar_mainOpaque,.public_Scrollbar_mainOpaque.public_Scrollbar_mainActive,.public_Scrollbar_mainOpaque:hover {
    background-color: #fff
}

.public_Scrollbar_face:after {
    background-color: #c2c2c2
}

.public_Scrollbar_faceActive:after,.public_Scrollbar_main:hover .public_Scrollbar_face:after,.public_Scrollbar_mainActive .public_Scrollbar_face:after {
    background-color: #7d7d7d
}

.public_fixedDataTable_main {
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    border-color: #eee;
    //:8px}

.public_fixedDataTable_hasBottomBorder,.public_fixedDataTable_header {
    border-color: #efefef
}

.public_fixedDataTable_header .public_fixedDataTableCell_main {
    font-weight: 700;
    color: #888
}

.public_fixedDataTable_header .public_fixedDataTableCell_main .public_fixedDataTableCell_cellContent {
    font-size: 12.8px;
    color: #4f5457;
    letter-spacing: -.44px;
    text-align: center
}

.fixedDataTableLayout_header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.public_fixedDataTable_header,.public_fixedDataTable_header .public_fixedDataTableCell_main {
    background-color: #fff
}

.public_fixedDataTable_footer .public_fixedDataTableCell_main {
    background-color: #f6f7f8;
    border-color: #efefef
}

.public_fixedDataTable_topShadow {
    //:0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAF0lEQVR4AWPUkNeSBhHCjJoK2twgFisAFagCCp3pJlAAAAAASUVORK5CYII=) repeat-x}

.public_fixedDataTable_bottomShadow {
    //: 0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAHElEQVQI12MwNjZmZdAT1+Nm0JDWEGZQk1GTBgAWkwIeAEp52AAAAABJRU5ErkJggg==) repeat-x;
    border-radius: 8px
}

.public_fixedDataTable_horizontalScrollbar .public_Scrollbar_mainHorizontal {
    background-color: #fff
}

.public_fixedDataTableCell_main {
    //:#fff;border-color: #efefef
}

.public_fixedDataTableCell_highlighted {
    background-color: #f4f4f4
}

.public_fixedDataTableCell_cellContent {
    padding: 0 8px
}

.public_fixedDataTableCell_columnResizerKnob {
    background-color: #0284ff
}

.public_fixedDataTableColumnResizerLine_main {
    border-color: #0284ff
}

.public_fixedDataTableRow_main {
    //:#fff}

.public_fixedDataTableRow_even {
    background-color: #f8f8f8
}

.public_fixedDataTableRow_odd {
    background-color: #fff
}

.public_fixedDataTableRow_highlighted,.public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main {
    //:#fff}

.public_fixedDataTableRow_fixedColumnsDivider {
    border-color: #d3d3d3
}

.public_fixedDataTableRow_columnsShadow {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==)
}

.ScrollbarLayout_main {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    overflow: hidden;
    position: absolute;
    -webkit-transition-duration: .25s;
    -o-transition-duration: .25s;
    transition-duration: .25s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ScrollbarLayout_mainVertical {
    bottom: 0;
    right: 0;
    top: 0;
    -webkit-transition-property: background-color width;
    -o-transition-property: background-color width;
    transition-property: background-color width;
    width: 15px
}

.ScrollbarLayout_mainVertical.public_Scrollbar_mainActive,.ScrollbarLayout_mainVertical:hover {
    width: 17px
}

.ScrollbarLayout_mainHorizontal {
    bottom: 0;
    height: 15px;
    left: 0;
    -webkit-transition-property: background-color height;
    -o-transition-property: background-color height;
    transition-property: background-color height
}

.ScrollbarLayout_mainHorizontal.public_Scrollbar_mainActive,.ScrollbarLayout_mainHorizontal:hover {
    height: 17px
}

.ScrollbarLayout_face {
    left: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1
}

.ScrollbarLayout_face:after {
    border-radius: 8px;
    content: "";
    display: block;
    position: absolute;
    -webkit-transition: background-color .25s ease;
    -o-transition: background-color .25s ease;
    transition: background-color .25s ease
}

.ScrollbarLayout_faceHorizontal {
    bottom: 0;
    left: 0;
    top: 0
}

.ScrollbarLayout_faceHorizontal:after {
    bottom: 4px;
    left: 0;
    top: 4px;
    width: 100%
}

.ScrollbarLayout_faceVertical {
    left: 0;
    right: 0;
    top: 0
}

.ScrollbarLayout_faceVertical:after {
    height: 100%;
    left: 4px;
    right: 4px;
    top: 0
}

.fixedDataTableCellGroupLayout_cellGroup {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    white-space: nowrap
}

.fixedDataTableCellGroupLayout_cellGroup>.public_fixedDataTableCell_main {
    display: inline-block;
    vertical-align: top;
    white-space: normal
}

.fixedDataTableCellGroupLayout_cellGroupWrapper {
    position: absolute;
    top: 0
}

.fixedDataTableCellLayout_main {
    border-right-style: solid;
    border-right-width: 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    position: absolute;
    white-space: normal
}

.fixedDataTableCellLayout_lastChild {
    border-width: 0 1px 1px 0
}

.fixedDataTableCellLayout_alignRight {
    text-align: right
}

.fixedDataTableCellLayout_alignCenter {
    text-align: center
}

.fixedDataTableCellLayout_wrap1 {
    display: table
}

.fixedDataTableCellLayout_wrap2 {
    display: table-row
}

.fixedDataTableCellLayout_wrap3 {
    display: table-cell;
    vertical-align: middle
}

.fixedDataTableCellLayout_columnResizerContainer {
    position: absolute;
    right: 0;
    width: 6px;
    z-index: 1
}

.fixedDataTableCellLayout_columnResizerContainer:hover {
    cursor: ew-resize
}

.fixedDataTableCellLayout_columnResizerContainer:hover .fixedDataTableCellLayout_columnResizerKnob {
    visibility: visible
}

.fixedDataTableCellLayout_columnResizerKnob {
    position: absolute;
    right: 0;
    visibility: hidden;
    width: 4px
}

.fixedDataTableColumnResizerLineLayout_mouseArea {
    cursor: ew-resize;
    position: absolute;
    right: -5px;
    width: 12px
}

.fixedDataTableColumnResizerLineLayout_main {
    border-right-style: solid;
    border-right-width: 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    z-index: 10
}

.fixedDataTableColumnResizerLineLayout_hiddenElem,body[dir=rtl] .fixedDataTableColumnResizerLineLayout_main {
    display: none!important
}

.fixedDataTableLayout_main {
    border-style: solid;
    border-width: 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border-radius: 8px
}

.fixedDataTableLayout_hasBottomBorder,.fixedDataTableLayout_header {
    border-bottom-style: solid;
    border-bottom-width: 1px
}

.fixedDataTableLayout_footer .public_fixedDataTableCell_main {
    border-top-style: solid;
    border-top-width: 1px
}

.fixedDataTableLayout_bottomShadow,.fixedDataTableLayout_topShadow {
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1
}

.fixedDataTableLayout_bottomShadow {
    margin-top: -4px
}

.fixedDataTableLayout_rowsContainer {
    overflow: hidden;
    position: relative
}

.fixedDataTableLayout_horizontalScrollbar {
    bottom: 0;
    position: absolute
}

.fixedDataTableRowLayout_main {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    top: 0
}

.fixedDataTableRowLayout_body {
    left: 0;
    position: absolute;
    top: 0
}

.fixedDataTableRowLayout_fixedColumnsDivider {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-left-style: solid;
    border-left-width: 1px;
    left: 0;
    position: absolute;
    top: 0;
    width: 0
}

.fixedDataTableRowLayout_columnsShadow {
    width: 4px
}

.fixedDataTableRowLayout_rowWrapper {
    position: absolute;
    top: 0
}

.SuperAdminTeachersBase {
    padding: 10px
}

.SuperAdminTeachersBase .SuperAdminTeachers {
    min-height: 80vh
}

.SuperAdminTeachersBase .SuperAdminTeachersFilter {
    margin: 5px 0
}

.notes-modal {
    height: 440px
}

.notes-modal .modal-body .Select-item {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 365px
}

.notes-modal .MultiSelect {
    height: 280px
}

.notes-modal .Select.is-multi .Select-control {
    max-height: 260px
}

.LessonPlansSuperadminBase {
    padding: 10px
}

.LessonPlansSuperadminBase .LessonPlansSuperadmin {
    min-height: 80vh
}

.LessonPlansSuperadminBase .LessonPlansSuperAdminFilter {
    margin: 5px 0
}

.LessonPlansSuperadminBase input {
    //:0}

.LessonPlan .LessonPlan--cover-photo {
    background-position: 50%!important;
    background-size: cover!important;
    width: 100%;
    height: 200px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.CouponsSuperadminBase,.LessonPlan .LessonPlan-content {
    padding: 10px
}

.CouponsSuperadminBase .CouponsSuperadmin {
    min-height: 80vh
}

.CouponsSuperadminBase .CouponsSuperadminFilter {
    margin: 5px 0
}

.RatingsSuperadminBase {
    padding: 10px
}

.RatingsSuperadminBase .RatingsSuperadmin {
    min-height: 80vh
}

.RatingsSuperadminBase .RatingsSuperadminFilter {
    margin: 5px 0
}

.RecordingsSuperAdminBase {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.RecordingsSuperAdmin__menu {
    background-color: #fff;
    padding: 16px;
    padding: 1rem;
    width: 1492px;
    margin: 16px 0;
    margin: 1rem 0;
    border-radius: 1rem
}

.RecordingsSuperAdmin__menu .RecordingsSuperAdmin__menu_item {
    margin-right: 24px;
    margin-right: 1.5rem
}

.RecordingsSuperAdmin__menu .RecordingsSuperAdmin__menu_item_selected {
    color: #0699cd
}

.RecordingsSuperAdminTable {
    width: 1492px;
    max-width: 95%;
    height: 1000px;
    fontsize: 20.8px;
    fontsize: 1.3rem
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__field {
    font-size: 20.8px;
    font-size: 1.3rem
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__field_center {
    font-size: 20.8px;
    font-size: 1.3rem;
    text-align: center
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__action {
    cursor: pointer
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__user_name {
    margin-left: 11.2px;
    margin-left: .7rem
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__contestExplanation,.RecordingsSuperAdminTable .RecordingsSuperAdminTable__contestReasons {
    margin-bottom: 32px;
    margin-bottom: 2rem
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__approveOrDeny {
    cursor: pointer;
    margin-right: 48px;
    margin-right: 3rem
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__missed {
    color: red;
    font-weight: 600
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__attended {
    color: #169816;
    font-weight: 600
}

.RecordingsSuperAdminTable .RecordingsSuperAdminTable__nav_icon {
    margin-right: 8px;
    margin-right: .5rem
}

.RecordingsSuperAdminTable .RecordingTableItem {
    cursor: pointer;
    max-width: 1600px;
    max-width: 100rem
}

.RecordingsSuperAdminTable .RecordingTableItem .RecordingTableItem__thumbnail {
    cursor: pointer;
    position: relative
}

.RecordingsSuperAdminTable .RecordingTableItem .RecordingTableItem__thumbnail .RecordingTableItem__thumbnail_img {
    max-width: 272px;
    max-width: 17rem;
    min-width: 272px;
    min-width: 17rem;
    height: 160px;
    height: 10rem
}

.RecordingsSuperAdminTable .RecordingTableItem .RecordingTableItem__thumbnail .RecordingTableItem__thumbnail_duration {
    background-color: #000;
    background-color: rgba(0,0,0,.7);
    color: #fff;
    position: absolute;
    right: 9.6px;
    right: .6rem;
    bottom: 6.4px;
    bottom: .4rem;
    font-size: 18.24px;
    font-size: 1.14rem;
    padding: 3.2px 16px;
    padding: .2rem 1rem
}

@media (max-width: 767px) {
    .RecordingsSuperAdminTable .RecordingTableItem .RecordingTableItem__thumbnail .RecordingTableItem__thumbnail_duration {
        left:190.4px;
        left: 11.9rem;
        right: auto
    }
}

.RecordingsSuperAdminTable .RecordingTableItem .RecordingTableItem__thumbnail_not_ready {
    background-color: #000;
    max-width: 272px;
    max-width: 17rem;
    min-width: 272px;
    min-width: 17rem;
    height: 160px;
    height: 10rem
}

.RecordingsSuperAdminTable .RecordingTableItem .RecordingTableItem__thumbnail_error {
    font-size: 64px;
    font-size: 4rem;
    margin: auto;
    color: #aaa
}

.RecordingsSuperAdminTable .RecordingTableItem .RecordingTableItem__other_user_name {
    color: #0699cd;
    cursor: pointer;
    font-size: 22.88px;
    font-size: 1.43rem
}

.RecordingsSuperAdminTable .RecordingTableItem .RecordingTableItem__meta_info {
    font-size: 18.24px;
    font-size: 1.14rem
}

.ReactVirtualized__Grid {
    outline: none
}

.AttendanceSuperAdminBase {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.AttendanceSuperAdmin__menu {
    background-color: #fff;
    padding: 16px;
    padding: 1rem;
    margin: 16px 0;
    margin: 1rem 0;
    border-radius: 1rem
}

.AttendanceSuperAdmin__menu .AttendanceSuperAdmin__menu_item {
    margin-right: 24px;
    margin-right: 1.5rem;
    cursor: pointer
}

.AttendanceSuperAdmin__menu .AttendanceSuperAdmin__menu_item_selected {
    color: #0699cd
}

.AttendanceSuperAdminTable {
    height: 1000px
}

.AttendanceSuperAdminTable .AttendanceSuperAdminTable__field_center {
    text-align: center
}

.AttendanceSuperAdminTable .AttendanceSuperAdminTable__user_name {
    margin-left: 11.2px;
    margin-left: .7rem
}

.AttendanceSuperAdminTable .AttendanceSuperAdminTable__contestExplanation,.AttendanceSuperAdminTable .AttendanceSuperAdminTable__contestReasons {
    margin-bottom: 32px;
    margin-bottom: 2rem
}

.AttendanceSuperAdminTable .AttendanceSuperAdminTable__approveOrDeny {
    cursor: pointer;
    margin-right: 48px;
    margin-right: 3rem
}

.AttendanceSuperAdminTable .AttendanceSuperAdminTable__missed {
    color: red;
    font-weight: 600
}

.AttendanceSuperAdminTable .AttendanceSuperAdminTable__attended {
    color: #169816;
    font-weight: 600
}

.AttendanceSuperAdminTable .AttendanceSuperAdminTable__nav_icon {
    margin-right: 8px;
    margin-right: .5rem
}

.BlogSuperadminBase {
    padding: 10px
}

.BlogSuperadminBase .BlogSuperadmin {
    min-height: 80vh
}

.BlogSuperadminBase .BlogSuperadminFilter {
    margin: 5px 0
}

.EmailsWorkspace {
    width: 800px
}

.WebRTCSuperAdminBase {
    padding: 10px;
    cursor: pointer
}

.WebRTCSuperAdminBase .WebRTCSuperAdmin {
    min-height: 80vh
}

.WebRTCSuperAdminBase .SessionsSuperadminFilter {
    margin: 5px 0
}

.WebRTCSuperAdminBase .AttendanceSuperAdminBase__column_centered {
    text-align: center
}

.WebRTCSuperAdmin__headerDiv {
    font-size: 12.8px;
    font-size: .8rem
}

.ConnectionList {
    height: 100%
}

.ConnectionList .Connection__list_field {
    font-size: 20.8px;
    font-size: 1.3rem
}

.ConnectionList .Connection__list_field_small {
    font-size: 17.6px;
    font-size: 1.1rem
}

.ConnectionList .Connection__list_field_frameRate {
    margin-right: 6.4px;
    margin-right: .4rem;
    font-size: 17.6px;
    font-size: 1.1rem
}

.WebRTCTransitions__container {
    padding-top: 16px;
    padding-top: 1rem;
    padding-bottom: 32px;
    padding-bottom: 2rem
}

.WebRTCTransitions__container .WebRTCTransition {
    margin: auto
}

.WebRTCTransitions__container .WebRTCTransition,.WebRTCTransitions__container .WebRTCTransition .WebRTCTransitionCell {
    width: 592px;
    width: 37rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.WebRTCTransitions__container .WebRTCTransition .WebRTCTransitionCell {
    background-color: #f9f9f9;
    border-radius: 1rem;
    border: .1rem solid #0699cd;
    border-width: 1.6px;
    padding: 8px;
    padding: .5rem
}

.WebRTCTransitions__container .WebRTCTransition .WebRTCTransitionCell__error {
    border-color: red;
    color: #000;
    background-color: #f5c5c5
}

.WebRTCTransitions__container .WebRTCTransition .WebRTCTransition__caret_down {
    font-size: 32px;
    font-size: 2rem;
    margin-top: 8px;
    margin-top: .5rem;
    margin-bottom: 8px;
    margin-bottom: .5rem;
    color: #999
}

.WebRTCTransitions__container .WebRTCTransition .WebRTCTransitionCell__data {
    font-size: 16px;
    font-size: 1rem
}

.WebRTCTransitions__container .WebRTCTransition .WebRTCTransitionCell__data>ul {
    background-color: transparent!important
}

.WebRTCSuperAdmin {
    padding: 48px;
    padding: 3rem
}

.WebRTCSuperAdmin .WebRTCHistory__info_room_header_col {
    background-color: #d8d8d8;
    width: 288px;
    width: 18rem;
    padding: 16px;
    padding: 1rem;
    font-weight: 700
}

.WebRTCSuperAdmin .WebRTCSuperAdmin__link {
    cursor: pointer;
    color: #0699cd;
    margin-right: 24px;
    margin-right: 1.5rem
}

.WebRTCSuperAdmin .WebRTCHistory__row {
    background-color: #fff;
    border: 1.6px solid #aaa;
    border: .1rem solid #aaa;
    border-top: none
}

.WebRTCSuperAdmin .WebRTCHistory__row .WebRTCHistory__caret_col {
    padding: 16px;
    padding: 1rem
}

.WebRTCSuperAdmin .WebRTCHistory__row .WebRTCHistory__caret_col .WebRTCHistory__caret {
    font-size: 40px;
    font-size: 2.5rem;
    color: #0699cd;
    cursor: pointer
}

.WebRTCSuperAdmin .WebRTCHistory__row .WebRTCHistory__info_col .WebRTCHistory__info_room_meta_col {
    cursor: pointer;
    padding: 16px;
    padding: 1rem;
    width: 288px;
    width: 18rem
}

.WebRTCSuperAdmin .WebRTCHistory__row .WebRTCHistory__info_col .WebRTCHistory__info_room_meta_header_row {
    background-color: "#00f"
}

.WebRTCSuperAdmin .WebRTCSuperAdmin__tab-selected {
    background-color: #ddd
}

.WebRTCSuperAdmin .WebRTCSuperAdmin__tab-unselected {
    background-color: #bbb
}

.WebRTCSuperAdmin .WebRTCHistory__row:first-child {
    border-top: 1px solid #aaa
}

.ReactVirtualized__Table__headerRow {
    font-weight: 700
}

.ReactVirtualized__Table__headerRow,.ReactVirtualized__Table__row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ReactVirtualized__Table__headerTruncatedText {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden
}

.ReactVirtualized__Table__headerColumn,.ReactVirtualized__Table__rowColumn {
    margin: 0;
    min-width: 0;
    padding-left: 5px;
    padding-right: 5px
}

.ReactVirtualized__Table__rowColumn {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ReactVirtualized__Table__headerColumn:first-of-type,.ReactVirtualized__Table__rowColumn:first-of-type {
    margin: 0
}

.ReactVirtualized__Table__sortableHeaderColumn {
    cursor: pointer
}

.ReactVirtualized__Table__sortableHeaderIconContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.ReactVirtualized__Table__sortableHeaderIcon {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 24px;
    -ms-flex: 0 0 24px;
    flex: 0 0 24px;
    height: 1em;
    width: 1em;
    fill: currentColor
}

.reflex-container {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: 100%;
    width: 100%
}

.reflex-container.horizontal {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.reflex-container.vertical {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.reflex-container>.reflex-element {
    position: relative;
    overflow: auto;
    height: 100%;
    width: 100%
}

.reflex-container.reflex-resizing>.reflex-element {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.reflex-container>.reflex-element>.reflex-size-aware {
    height: 100%;
    width: 100%
}

.reflex-container>.reflex-splitter {
    background-color: #eee;
    z-index: 100
}

.reflex-container>.reflex-splitter.active,.reflex-container>.reflex-splitter:hover {
    background-color: #c6c6c6;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease
}

.horizontal>.reflex-splitter {
    border-bottom: 1px solid #c6c6c6;
    border-top: 1px solid #c6c6c6;
    cursor: row-resize;
    width: 100%;
    height: 2px
}

.reflex-element.horizontal .reflex-handle {
    cursor: row-resize;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.reflex-container.horizontal>.reflex-splitter.active,.reflex-container.horizontal>.reflex-splitter:hover {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee
}

.reflex-container.vertical>.reflex-splitter {
    border-right: 1px solid #c6c6c6;
    border-left: 1px solid #c6c6c6;
    cursor: col-resize;
    height: 100%;
    width: 2px
}

.reflex-element.vertical .reflex-handle {
    cursor: col-resize;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.reflex-container.vertical>.reflex-splitter.active,.reflex-container.vertical>.reflex-splitter:hover {
    border-right: 1px solid #eee;
    border-left: 1px solid #eee
}

.reflex-container>.reflex-splitter.reflex-thin {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-clip: padding-box;
    opacity: .2;
    z-index: 100
}

.reflex-container>.reflex-splitter.reflex-thin.active .reflex-container>.reflex-splitter.reflex-thin:hover {
    -webkit-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    opacity: .5
}

.reflex-container.horizontal>.reflex-splitter.reflex-thin {
    border-bottom: 8px solid hsla(0,0%,100%,0);
    border-top: 8px solid hsla(0,0%,100%,0);
    height: 17px!important;
    cursor: row-resize;
    margin: -8px 0;
    width: 100%
}

.reflex-container.horizontal>.reflex-splitter.reflex-thin.active,.reflex-container.horizontal>.reflex-splitter.reflex-thin:hover {
    border-bottom: 8px solid #e4e4e4;
    border-top: 8px solid #e4e4e4
}

.reflex-container.vertical>.reflex-splitter.reflex-thin {
    border-right: 8px solid hsla(0,0%,100%,0);
    border-left: 8px solid hsla(0,0%,100%,0);
    width: 17px!important;
    cursor: col-resize;
    margin: 0 -8px;
    height: 100%
}

.reflex-container.vertical>.reflex-splitter.reflex-thin.active,.reflex-container.vertical>.reflex-splitter.reflex-thin:hover {
    border-right: 8px solid #e4e4e4;
    border-left: 8px solid #e4e4e4
}

.RoomSuperAdmin .quarterColumn {
    -webkit-box-flex: 0.25;
    -webkit-flex: 0.25;
    -ms-flex: 0.25;
    flex: 0.25
}

.RoomSuperAdmin .RoomSplitPane__panel .RoomTimeline .RoomTimeline_user_name_small {
    font-size: 11px
}

.RoomSuperAdmin .RoomSplitPane__panel .RoomTimeline .vertical-timeline.vertical-timeline--two-columns {
    margin-top: 0
}

.RoomSuperAdmin .RoomSplitPane__panel .RoomTimeline .vertical-timeline:before {
    background-color: #0699cd
}

.RoomSuperAdmin .RoomSplitPane__panel .RoomTimeline .vertical-timeline-element {
    margin: 0
}

.RoomSuperAdmin .RoomSplitPane__panel .RoomTimeline .vertical-timeline-element-content {
    padding-bottom: 16px;
    padding-bottom: 1rem
}

.RoomSuperAdmin .RoomSplitPane__panel .RoomTimeline .vertical-timeline-element-icon {
    width: 30px;
    height: 30px;
    margin-left: -15px
}

.RoomSuperAdmin .RoomSplitPane__panel .WebRTCConnection {
    background-color: #fff;
    cursor: pointer
}

.RoomSuperAdmin .RoomSplitPane__panel .WebRTCConnection:nth-child(2n) {
    background-color: #f5f5f5
}

.RoomSuperAdmin .RoomSplitPane__panel .RoomStats__Chart {
    margin-left: -40px
}

.RoomSuperAdmin .RoomSplitPane__panel .RoomStats_Y_Axis {
    color: red
}

.RoomSuperAdmin .RoomSplitPane__panel .recharts-label {
    font-size: 12px;
    fill: #4f5457
}

.ProfileHeader {
    color: #fff;
    background: -webkit-gradient(linear,left top,right top,from(#0699cd),color-stop(100%,#3bb85c),to(#dd9611));
    background: -webkit-linear-gradient(left,#0699cd,#3bb85c 100%,#dd9611);
    background: -o-linear-gradient(left,#0699cd,#3bb85c 100%,#dd9611);
    background: linear-gradient(90deg,#0699cd,#3bb85c 100%,#dd9611);
    background-size: cover;
    background-position: 50%;
    position: relative;
    cursor: pointer
}

.ProfileHeader .btn {
    border: 3px solid #fff
}

.ProfileHeader .container {
    position: relative;
    z-index: 2
}

.ProfileHeader h1 {
    color: #fff
}

.ProfileHeader__waves {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%
}

.ProfileHeader__headerInner {
    min-height: 150px
}

.ProfileHeader__pic {
    position: relative;
    border-radius: 6px;
    background-color: #fff;
    border: 3px solid #efefef;
    overflow: hidden
}

.DashboardNavigation .DashboardNavigation__profile {
    background-color: #f8f8f8;
    border-bottom: 1px solid #efefef
}

.DashboardNavigation .DashboardNavigation--profile {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    -webkit-box-shadow: inset 0 -5px 10px -10px #000;
    box-shadow: inset 0 -5px 10px -10px #000
}

.DashboardNavigation .DashboardNavigation--profile .verb-profile-pic {
    height: 89px;
    width: 89px
}

.DashboardNavigation .DashboardNavigation--profile .pic-image:hover .upload-overlay {
    display: block
}

.DashboardNavigation .DashboardNavigation--profile .upload-overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 40px;
    text-align: center;
    padding-top: 10px;
    -webkit-box-shadow: inset 0 0 120px rgba(0,0,0,.75);
    box-shadow: inset 0 0 120px rgba(0,0,0,.75)
}

.DashboardNavigation .DashboardNavigation--languages {
    padding: 24px;
    padding: 1.5rem
}

.DashboardNavigation .DashboardNavigation--stats {
    padding: 24px;
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid #eee
}

.DashboardNavigation .DashboardNavigation--stats small {
    display: block
}

.DashboardNavigation .panel-body {
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 0
}

.EditLanguages {
    text-align: center
}

.EditLanguages .EditedLanguage {
    background-color: #f8f8f8;
    border-radius: 8px
}

.EditLanguages .EditedLanguage .fat-label {
    text-align: left
}

.EditLanguages .EditedLanguage h4 {
    margin: 0
}

.EditLanguages .EditedLanguage .fa-close {
    color: #888;
    margin-right: 8px;
    margin-right: .5rem
}

.EditLanguages .EditedLanguage .fa-close:hover {
    color: #000
}

.EditLanguages .EditedLanguage .modal-body {
    padding: 0
}

.EditLanguages .EditedLanguage .LanguageSelect {
    margin-bottom: 10px
}

.EditLanguages .EditedLanguage .saved {
    color: #3cd27b;
    margin-top: 5px
}

@media (max-width: 768px) {
    .SessionListing .SessionListingFilter .SessionListingFilter__item {
        margin-bottom:5px;
        margin-right: 0!important
    }
}

.SessionListing .SessionListingFilter .full-width {
    width: 100%
}

@media (max-width: 991px) {
    .SessionListing .SessionListingFilter .session-filter-text {
        width:100%
    }
}

.DayDivider .DayDivider__header {
    border-bottom: 1px solid #d8d8d8
}

.LessonSpaceItem-DemoButton {
    height: 80px;
    height: 5rem;
    width: 144px;
    width: 9rem
}

.LoadingOverlay {
    position: relative
}

.LoadingOverlay .LoadingOverlay__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.7);
    z-index: 10000
}

.Invoice {
    margin-bottom: 10px
}

.Invoice tbody tr {
    border-bottom: 0!important
}

.Invoice .InvoiceItem--highlighted {
    border-bottom: 1px solid red!important
}

.MiniSidebar .panel-body {
    padding: 0
}

.MiniSidebar .Sidebar--Section {
    border-bottom: 1px solid #efefef
}

.MiniSidebar .Sidebar--Section:last-child {
    border-bottom: 0
}

.MiniSidebar .Sidebar--Header {
    cursor: pointer
}

.MiniSidebar ul li {
    cursor: pointer;
    padding: 3px 10px;
    border-left: 4px solid #fff
}

.MiniSidebar ul li i {
    width: 20px;
    color: #999;
    margin-right: 10px;
    font-size: 19px
}

.MiniSidebar ul li.selected,.MiniSidebar ul li:hover {
    border-left: 4px solid #0699cd;
    font-weight: 700
}

.CCInputBox .PaymentBadge {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.CCInputBox .PaymentBadge.PaymentBadge--active {
    height: 70px
}

.CCInputBox label {
    white-space: nowrap
}

.CCInputBox__Stripe {
    padding-left: 0!important
}

.CCInputBox--focus {
    border-color: #0699cd!important
}

.CCInputBox--focus i {
    color: #0699cd!important
}

.EbanxMoreInfoInputBox .PaymentBadge {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.EbanxMoreInfoInputBox .PaymentBadge.PaymentBadge--active {
    height: 70px;
}

.EbanxMoreInfoInputBox label {
    white-space: nowrap
}

.InvitationsBase .InvitationsBase__header {
    border-radius: 8px;
    padding: 30px;
    background-image: -webkit-linear-gradient(334deg,#129dfa,#57b7f7);
    background-image: -o-linear-gradient(334deg,#129dfa,#57b7f7);
    background-image: linear-gradient(116deg,#129dfa,#57b7f7);
    color: #fff!important
}

.InvitationsBase .InvitationsBase__header h1 {
    color: #fff!important;
    font-weight: 700
}

.InvitationsBase .InvitationsBase__header .vi {
    color: #fff
}

.InvitationsBase .InvitationsBase__icon-wrapper {
    padding: 15px;
    border-radius: 50%;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.8);
    height: 100px;
    width: 100px;
    margin-top: 15px;
    margin-bottom: 15px
}

.cloudsponge-copyright {
    display: none
}

#cloudsponge-address-book {
    font-family: Open Sans,sans-serif!important;
    background-color: #000!important;
    background-color: transparent!important;
    color: #4f5457!important
}

#cloudsponge-address-book .cloudsponge-topbar {
    background-color: #f8f8f8!important;
    border-radius: 8px 8px 0 0;
    height: 56px!important;
    border-bottom: 1px solid #d8d8d8!important
}

#cloudsponge-address-book .cloudsponge-close-button {
    color: #4f5457!important
}

#cloudsponge-address-book .cloudsponge-widget {
    border-radius: 8px!important;
    background-color: #fff!important
}

#cloudsponge-address-book .cloudsponge-h1 {
    color: #4f5457!important;
    font-size: 24px!important
}

.InlineTagEditor {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: text;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    min-height: 34px;
    border-radius: 6px;
    font-size: 14.25px
}

.InlineTagEditor--reset {
    padding: 0;
    background: none;
    border: none
}

.InlineTagEditor--reset input {
    background: none
}

.InlineTagEditor--large {
    padding: 5px 11px;
    min-height: 49px;
    border-radius: 6px;
    font-size: 18px
}

.InlineTagEditor--small {
    padding: 2px 7px;
    min-height: 30px;
    border-radius: 3px;
    font-size: 12px
}

.InlineTagEditor__input {
    border: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 10%;
    margin: 3px;
    padding: 0;
    line-height: 14px;
    border-radius: 0
}

.InlineTagEditor__input:focus {
    border: 0;
    outline: 0
}

.InlineTagEditor__input--large {
    line-height: 18px;
    margin: 5px
}

.InlineTagEditor__input--small {
    line-height: 12px;
    margin: 3px
}

.InlineTag {
    padding: 8px 6px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: -.55px;
    color: #838789;
    margin: 3px
}

.InlineTag--hover {
    cursor: pointer;
    background-color: #ff5e5e;
    color: #fff
}

.InlineTag--large {
    height: 24px;
    margin: 5px
}

.InlineTag--small {
    border-radius: 3px;
    height: 18px;
    margin: 3px
}

.InlineTag__text {
    margin: 0 0 0 3px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 11.4px;
    letter-spacing: .3px
}

.InlineTag__text--large {
    font-size: 14.25px
}

.InlineTag__text--small {
    font-size: 10px
}

.InlineTag__icon {
    font-size: 11px;
    height: 14px;
    width: 14px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.InlineTag__icon--large {
    width: 24px;
    height: 24px;
    font-size: 14.25px
}

.InlineTag__icon--small {
    width: 18px;
    height: 18px;
    font-size: 10px
}

object#plugin0 {
    position: absolute
}

.full-height-app2 #app {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1
}

.SessionWrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden
}

.SessionWrapper .SessionPanels--Inner {
    position: relative
}

.SessionWrapper .SessionPanels--tablet .SessionTabs {
    width: 320px
}

.SessionWrapper .SessionPanels--desktop .SessionLeftPanel {
    -webkit-box-flex: 1;
    -webkit-flex: 1 75%;
    -ms-flex: 1 75%;
    flex: 1 75%
}

.SessionWrapper .SessionPanels--desktop .SessionRightPanel {
    -webkit-box-flex: 1;
    -webkit-flex: 1 25%;
    -ms-flex: 1 25%;
    flex: 1 25%
}

.SessionWrapper .SessionPanels--desktop .SessionTabs {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto
}

.SessionWrapper .session-teacher-picture {
    display: center-block;
    border: 2px solid #fff
}

.SessionWrapper .session-webcam-controls {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px
}

.SessionWrapper .session-webcam-controls-preview,.SessionWrapper .session-webcam:hover>.session-webcam-controls {
    display: block
}

.SessionWrapper .session-webcam-microphone {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 4px;
    height: 45%;
    background-color: #0699cd;
    border-radius: 2px
}

.SessionWrapper .session-participants {
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px
}

.SessionWrapper .session-participants-participant {
    padding-left: 0;
    padding-right: 15px
}

.SessionWrapper .session-participants-participant-controls {
    padding: 5px;
    float: right
}

.SessionWrapper .session-details-time {
    font-size: 24px;
    letter-spacing: 1px;
    margin-top: -15px;
    margin-bottom: -6px
}

.SessionWrapper .session-panel {
    background-color: #fff;
    padding: 15px;
    height: 100%;
    width: 100%
}

.SessionWrapper .nav-session {
    background-color: #f8f8f8;
    border-bottom: none
}

.SessionWrapper .nav-session>li {
    border-radius: 0;
    float: left
}

.SessionWrapper .nav-session>li>a:hover {
    border-color: none
}

.SessionWrapper .nav-session>li.active>a,.SessionWrapper .nav-session>li.active>a:focus,.SessionWrapper .nav-session>li.active>a:hover {
    color: #787b83;
    background-color: #fff;
    cursor: default
}

.SessionWrapper .session-settings-preview {
    margin-bottom: 20px
}

@-webkit-keyframes scaleTooltip {
    0% {
        -webkit-transform: scale(.9,.9)
    }

    to {
        -webkit-transform: scale(1,1)
    }
}

.joyride-tooltip {
    z-index: 50;
    padding: 0;
    border-radius: 5px;
    color: #555;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="2" dy="3" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.3)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    -webkit-filter: drop-shadow(-1px -2px 3px rgba(0,0,0,.3)) drop-shadow(1px 2px 3px rgba(0,0,0,.3));
    filter: drop-shadow(-1px -2px 3px rgba(0,0,0,.3)) drop-shadow(1px 2px 3px rgba(0,0,0,.3))
}

.joyride-tooltip--animate {
    -moz-animation: scaleTooltip .31415s ease-in-out;
    -moz-animation-iteration-count: 1;
    -webkit-animation: scaleTooltip .31415s ease-in-out;
    -webkit-animation-iteration-count: 1
}

.joyride-tooltip__button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: inline-block;
    line-height: 1;
    padding: 0
}

.joyride-tooltip__button--primary {
    background-color: #f04;
    border-radius: 4px;
    color: #fff!important;
    padding: 6px 12px;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out
}

.joyride-tooltip__button--skip {
    color: #0699cd;
    float: left;
    margin-right: 10px
}

.joyride-tooltip__close {
    display: none!important
}

.joyride__tooltip_header {
    padding: 16px;
    padding: 1rem;
    background-color: #f8f8f8;
    border-top-left-radius: 12.8px;
    border-top-left-radius: .8rem;
    border-top-right-radius: 12.8px;
    border-top-right-radius: .8rem
}

.joyride__tooltip_header_title {
    font-size: 38.4px;
    font-size: 2.4rem;
    letter-spacing: 2.672px;
    letter-spacing: .167rem
}

.joyride__tooltip_header_subtitle {
    font-size: 22.4px;
    font-size: 1.4rem;
    color: #838789;
    letter-spacing: .8px;
    letter-spacing: .05rem
}

.joyride-tooltip__main {
    border-bottom-left-radius: 12.8px;
    border-bottom-left-radius: .8rem;
    border-bottom-right-radius: 12.8px;
    border-bottom-right-radius: .8rem
}

.joyride__generic_tooltip {
    background-color: "#fff"
}

.joyride__generic_tooltip_body {
    padding: 24px;
    padding: 1.5rem;
    letter-spacing: .8px;
    letter-spacing: .05rem
}

#sessionJoyride1 {
    position: absolute;
    left: 50%;
    top: calc(50% + 19rem)
}

#sessionJoyride2 {
    position: absolute;
    left: 50%;
    top: 144px;
    top: 9rem
}

#sessionJoyride3 {
    position: absolute;
    left: 50%;
    top: calc(50% + 6rem)
}

#sessionJoyride4,#sessionJoyride5,#sessionJoyride7,#sessionJoyride8 {
    margin-left: -128px;
    margin-left: -8rem
}

#sessionJoyride9,#sessionJoyride10,#sessionJoyride11,#sessionJoyride12 {
    position: absolute;
    right: 48px;
    right: 3rem;
    top: 256px;
    top: 16rem
}

#sessionJoyride14 {
    position: absolute;
    left: 50%;
    top: calc(50% + 15rem)
}

#sessionJoyride14student {
    position: absolute;
    left: 50%;
    top: calc(50% + 23rem)
}

.RecordingAnnouncementModal__share_permissions_image_container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.RecordingAnnouncementModal__share_permissions_image_container .RecordingAnnouncementModal__share_permissions_image {
    max-height: 480px;
    max-height: 30rem
}

.link-sm {
    font-size: 12px;
    letter-spacing: .33px;
    color: #0699cd
}

.joyrideNav {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    background-color: #f8f8f8;
    padding: 16px;
    padding: 1rem;
    border-bottom-left-radius: 12.8px;
    border-bottom-left-radius: .8rem;
    border-bottom-right-radius: 12.8px;
    border-bottom-right-radius: .8rem
}

.joyrideNav,.joyrideNav__left_buttons_container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal
}

.joyrideNav__left_buttons_container {
    -webkit-box-flex: 0.65;
    -webkit-flex: 0.65;
    -ms-flex: 0.65;
    flex: 0.65;
    text-align: left;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.joyrideNav__skip_tutorial_link {
    color: #0699cd;
    font-size: 20.8px;
    font-size: 1.3rem;
    line-height: 48px;
    line-height: 3rem;
    cursor: pointer;
    margin-top: 9.6px;
    margin-top: .6rem;
    margin-left: 16px;
    margin-left: 1rem
}

.joyrideNav__button--container {
    -webkit-box-flex: 0.35;
    -webkit-flex: 0.35;
    -ms-flex: 0.35;
    flex: 0.35;
    text-align: right
}

.joyrideNav__button {
    padding: 8px 12px
}

.SmallWidthMenu {
    background-color: #393939;
    z-index: 2;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%
}

.SmallWidthMenu .navbar-nav>li {
    float: none
}

.SmallWidthMenu .navbar-nav>li>a {
    height: 60px;
    font-size: 17px;
    padding-top: 16px
}

.SmallWidthMenu .navbar-nav>li>a:hover {
    color: #0699cd
}

.SmallWidthMenu .navbar-nav {
    float: none
}

.SmallWidthMenu .container-fluid {
    padding: 0
}

@-webkit-keyframes slideInMenu {
    to {
        left: 0
    }
}

@keyframes slideInMenu {
    to {
        left: 0
    }
}

@-webkit-keyframes slideOutMenu {
    0% {
        left: 0
    }

    to {
        left: -100%
    }
}

@keyframes slideOutMenu {
    0% {
        left: 0
    }

    to {
        left: -100%
    }
}

.SmallWidthMenu-SlideIn {
    -webkit-animation: slideInMenu .5s forwards;
    animation: slideInMenu .5s forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.SmallWidthMenu-SlideOut {
    -webkit-animation: slideOutMenu .5s forwards;
    animation: slideOutMenu .5s forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.SessionRightPanel {
    min-width: 300px;
    background-color: #393939
}

@-webkit-keyframes tabFlash {
    0% {
        background-color: #393939;
        color: #787c83
    }

    0% label {
        color: #787c83
    }

    to {
        background-color: #0699cd;
        color: #fff
    }

    to label {
        color: #fff
    }
}

@keyframes tabFlash {
    0% {
        background-color: #393939;
        color: #787c83
    }

    0% label {
        color: #787c83
    }

    to {
        background-color: #0699cd;
        color: #fff
    }

    to label {
        color: #fff
    }
}

.sessionTabFlash,.sessionTabFlash .fat-label,.sessionTabFlash label {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: tabFlash;
    animation-name: tabFlash;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}

.SessionTabs {
    -webkit-box-shadow: 0 -4 5 #000;
    box-shadow: 0 -4 5 #000
}

.SessionTabs .SessionTabRow {
    @-webkit-keyframes display-none-transition {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes display-none-transition {
        0% {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }
}

.SessionTabs .SessionTabRow i {
    font-size: 30.4px;
    font-size: 1.9rem
}

.SessionTabs .HoverCardWrapper {
    color: #787c83
}

.SessionTabs .sessionTab {
    text-align: center;
    cursor: pointer;
    padding: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.SessionTabs .sessionTab:hover,.SessionTabs .sessionTab:hover .fat-label,.SessionTabs .sessionTabActive,.SessionTabs .sessionTabActive .fat-label {
    color: #fff
}

.SessionTabs .inActiveTabContent {
    opacity: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: none
}

.SessionTabs .activeTabContent {
    opacity: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.SessionTabs .tab-content-hidden {
    display: none
}

.RecordingMustBeEnabledModal__share_permissions_image_container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.RecordingMustBeEnabledModal__share_permissions_image_container .RecordingMustBeEnabledModal__share_permissions_image {
    max-height: 480px;
    max-height: 30rem
}

.RecordingMustBeEnabledModal__instructions {
    margin-left: 5px;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 0
}

.RecordingMustBeEnabledModal__instructions_item {
    list-style-type: none
}

.AudioVideoSettingsModal video {
    border-radius: 8px
}

.AudioVideoSettings .audioVideoControlsContainer {
    margin-top: 5px
}

.AudioVideoSettings .change-inputs {
    position: absolute;
    top: 0;
    right: 0;
    //:#fff;font-size: 24px;
    margin: 10px;
    cursor: pointer
}

.AudioVideoSettings .media-stream-view {
    position: relative
}

.AudioVideoSettings .audioVideoSettingsButtonContainer {
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -53px
}

.AudioVideoSettings .audioVideoSettingsButton {
    margin-left: 20px;
    margin-right: 20px
}

.AudioVideoSettings .webrtcSettingsLabel {
    width: 100%;
    text-align: left;
    padding-left: 5px;
    margin-bottom: 3px
}

.AudioVideoSettings .audio-detector {
    margin-bottom: 10px
}

.AudioVideoSettings .volumeMeter {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1px;
    width: 200px;
    height: 20px;
    padding-left: 3px;
    padding-right: 3px
}

.AVPopover {
    max-width: 100%;
    padding: 0;
    overflow: hidden
}

.AVPopover .popover-content {
    padding: 0;
    border-radius: 4px;
    overflow: hidden
}

.AudioVideoSettingsModal-MediaStreamAndAudioDetected {
    text-align: center
}

.AudioVideoSettingsModal-AudioDetected {
    margin-top: 5px
}

.AudioVideoSettingsModal--ProfilePic {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    background-color: #0a1323;
    background-color: rgba(10,19,35,.8);
    margin: auto
}

.MediaStreamViewContainerThumbnail {
    max-height: 120px
}

.MediaStreamViewContainer object {
    max-height: calc(100vh - 60px)
}

.MediaStreamViewContainerHidden object {
    width: 0!important;
    height: 1px!important
}

.SessionLeftPanel {
    background-color: #000;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.SessionLeftPanel.SessionLeftPanel--light {
    background-color: #e6e6e6
}

.SessionLeftPanel .largeVideoIconDiv {
    position: absolute;
    bottom: 75px;
    left: 10px;
    background-color: #0699cd;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    cursor: pointer
}

.SessionLeftPanel .largeVideoIconDivActive {
    background-color: #fff;
    border: 1px solid #0699cd
}

.SessionLeftPanel .materialsIconDiv {
    position: absolute;
    bottom: 8px;
    left: 10px;
    background-color: #0699cd;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    cursor: pointer
}

.SessionLeftPanel .materialsIconDivActive {
    background-color: #fff;
    border: 1px solid #0699cd
}

.SessionLeftPanel .videoNavIcon {
    font-size: 26px;
    color: #fff;
    margin-left: 12px;
    margin-top: 12px
}

.SessionLeftPanel .videoNavIconActive {
    color: #0699cd
}

.SessionLeftPanel .materialsNavIcon {
    font-size: 26px;
    color: #fff;
    margin-left: 14px;
    margin-top: 12px
}

.SessionLeftPanel .materialsNavIconActive {
    color: #0699cd
}

.SessionLeftPanel .hoverControls {
    display: none
}

.SessionLeftPanel .SessionLeftPanel__joyrideOverlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: #000;
    background-color: rgba(0,0,0,.7)
}

.SessionLeftPanel .SessionLeftPanel__restartJoyrideButton {
    cursor: pointer;
    width: 102.4px;
    width: 6.4rem;
    height: 102.4px;
    height: 6.4rem;
    position: absolute;
    left: 48px;
    left: 3rem;
    bottom: 48px;
    bottom: 3rem;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #0699cd;
    color: #fff;
    font-size: 49.6px;
    font-size: 3.1rem
}

.SessionLeftPanel:hover .hoverControls {
    display: inherit
}

@-webkit-keyframes sessionLeftPanelSlideUpTabs {
    0% {
        -webkit-box-flex: 1;
        -webkit-flex: 1 90%;
        flex: 1 90%
    }

    to {
        -webkit-box-flex: 1;
        -webkit-flex: 1 50%;
        flex: 1 50%
    }
}

@keyframes sessionLeftPanelSlideUpTabs {
    0% {
        -webkit-box-flex: 1;
        -webkit-flex: 1 90%;
        -ms-flex: 1 90%;
        flex: 1 90%
    }

    to {
        -webkit-box-flex: 1;
        -webkit-flex: 1 50%;
        -ms-flex: 1 50%;
        flex: 1 50%
    }
}

@-webkit-keyframes sessionLeftPanelSlideDownTabs {
    0% {
        -webkit-box-flex: 1;
        -webkit-flex: 1 50%;
        flex: 1 50%
    }

    to {
        -webkit-box-flex: 1;
        -webkit-flex: 1 90%;
        flex: 1 90%
    }
}

@keyframes sessionLeftPanelSlideDownTabs {
    0% {
        -webkit-box-flex: 1;
        -webkit-flex: 1 50%;
        -ms-flex: 1 50%;
        flex: 1 50%
    }

    to {
        -webkit-box-flex: 1;
        -webkit-flex: 1 90%;
        -ms-flex: 1 90%;
        flex: 1 90%
    }
}

.SessionLeftPanel-SlideUpTabs {
    -webkit-animation: sessionLeftPanelSlideUpTabs .5s forwards;
    animation: sessionLeftPanelSlideUpTabs .5s forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.SessionLeftPanel-SlideDownTabs {
    -webkit-animation: sessionLeftPanelSlideDownTabs .5s forwards;
    animation: sessionLeftPanelSlideDownTabs .5s forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-box-flex: 9;
    -webkit-flex: 9;
    -ms-flex: 9;
    flex: 9
}

@-webkit-keyframes sessionRightPanelSlideUpTabs {
    0% {
        -webkit-box-flex: 1;
        -webkit-flex: 1 10%;
        flex: 1 10%
    }

    to {
        -webkit-box-flex: 1;
        -webkit-flex: 1 50%;
        flex: 1 50%
    }
}

@keyframes sessionRightPanelSlideUpTabs {
    0% {
        -webkit-box-flex: 1;
        -webkit-flex: 1 10%;
        -ms-flex: 1 10%;
        flex: 1 10%
    }

    to {
        -webkit-box-flex: 1;
        -webkit-flex: 1 50%;
        -ms-flex: 1 50%;
        flex: 1 50%
    }
}

@-webkit-keyframes sessionRightPanelSlideDownTabs {
    0% {
        -webkit-box-flex: 1;
        -webkit-flex: 1 50%;
        flex: 1 50%
    }

    to {
        -webkit-box-flex: 1;
        -webkit-flex: 1 10%;
        flex: 1 10%
    }
}

@keyframes sessionRightPanelSlideDownTabs {
    0% {
        -webkit-box-flex: 1;
        -webkit-flex: 1 50%;
        -ms-flex: 1 50%;
        flex: 1 50%
    }

    to {
        -webkit-box-flex: 1;
        -webkit-flex: 1 10%;
        -ms-flex: 1 10%;
        flex: 1 10%
    }
}

.SessionRightPanel-SlideUpTabs {
    -webkit-animation: sessionRightPanelSlideUpTabs .5s forwards;
    animation: sessionRightPanelSlideUpTabs .5s forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.SessionRightPanel-SlideDownTabs {
    -webkit-animation: sessionRightPanelSlideDownTabs .5s forwards;
    animation: sessionRightPanelSlideDownTabs .5s forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.Controls {
    z-index: 55;
    position: absolute;
    color: #fff;
    font-size: 14.25px;
    top: 0;
    right: 0;
    width: 100%;
    margin-top: 10px
}

.Controls__Not_Video_Tab {
    display: none!important
}

.ControlsPanel {
    border-radius: 8px;
    padding: 5px;
    background-color: #393939;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.ControlsPanel .controlIcon {
    font-size: 23px;
    color: #fff;
    cursor: pointer!important;
    margin-left: 10px;
    margin-right: 10px
}

.ControlsPanel .controlIconGray {
    color: #616161
}

.ControlsPanel .filename {
    margin-left: 5px;
    margin-right: 5px
}

.ControlsPanel .blueHover:hover {
    color: #0699cd
}

.ControlsPanel .redHover:hover {
    color: red
}

.WebRTCControls__select {
    text-align: center;
    color: #fff!important;
    background-color: #393939!important;
    padding-left: 5px!important;
    margin-top: -1.6px;
    margin-top: -.1rem;
    margin-right: 16px;
    margin-right: 1rem;
    font-size: 17.6px;
    font-size: 1.1rem;
    cursor: pointer;
    height: 40px;
    height: 2.5rem;
    padding: 1.6px;
    padding: .1rem
}

.WebRTCControls__select_disabled {
    color: #777;
    border-color: #555;
    cursor: pointer
}

.SessionThumbnailNewRTC {
    position: absolute;
    z-index: 3;
    cursor: pointer;
    width: 192px;
    width: 12rem;
    height: 144px;
    height: 9rem;
    right: 16px;
    right: 1rem;
    bottom: 16px;
    bottom: 1rem;
    border-radius: 1rem;
    font-weight: 700
}

.SessionThumbnailNewRTC .SessionThumbnailNewRTC__hovercard_container {
    display: none;
    font-size: 19.2px;
    font-size: 1.2rem;
    color: #b1b1b1
}

.SessionThumbnailNewRTC:hover .SessionThumbnailNewRTC__hovercard_container {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000;
    background-color: rgba(0,0,0,.45);
    border-radius: 1rem
}

.SessionThumbnailNewRTC:hover .SessionThumbnailNewRTC__hovercard_container,.SessionThumbnailNewRTC:hover .SessionThumbnailNewRTC__hovercard_container .SessionThumbnailNewRTC__hovercard {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.SessionThumbnailNewRTC:hover .SessionThumbnailNewRTC__hovercard_container .SessionThumbnailNewRTC__hovercard {
    position: relative
}

.SessionThumbnailNewRTC:hover .TrackSetView__trackset_control_icons {
    display: block
}

.StreamView__container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    min-width: 188.8px;
    min-width: 11.8rem;
    min-height: 140.8px;
    min-height: 8.8rem;
    border-radius: 1rem;
    justify-content: center
}

.StreamView__container,.StreamView__container .StreamView__peer_recording {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: #000;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.StreamView__container .StreamView__peer_recording {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    position: absolute;
    background-color: rgba(0,0,0,.5);
    padding: 0 5px;
    top: 12px;
    left: 2px
}

.StreamView__container .StreamView__peer_recording_circle {
    border: 1px solid #fff;
    background-color: red;
    width: 8px;
    height: 8px;
    border-radius: 9px;
    padding: 0;
    position: absolute;
    top: 6px
}

.StreamView__container .StreamView__peer_recording_text {
    font-size: 11px;
    color: #fff;
    margin-left: 10px;
    margin-top: 1px
}

.StreamView__container .StreamView__video-large {
    min-height: 100%;
    max-height: 100%;
    max-width: 100%
}

.StreamView__container .StreamView__video-thumb {
    width: 188.8px;
    width: 11.8rem;
    height: 100%;
    max-height: 140.8px;
    max-height: 8.8rem;
    border-radius: 1rem
}

.StreamView__container .video-mirror {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg)
}

.StreamView__container .StreamView__video_meta_icons {
    position: absolute;
    top: 8px;
    top: .5rem;
    right: 8px;
    right: .5rem;
    z-index: 999
}

.StreamView__container .StreamView__video_meta_icon_container {
    position: relative
}

.StreamView__container .StreamView__video_meta_icon {
    margin-left: 16px;
    margin-left: 1rem;
    background-color: #0699cd;
    color: #fff;
    font-size: 24px;
    font-size: 1.5rem;
    padding: 0 4.8px 0 8px;
    padding: 0 .3rem 0 .5rem
}

.StreamView__container .StreamView__video_meta_icon:after {
    content: "";
    position: absolute;
    left: 17.6px;
    left: 1.1rem;
    top: 2px;
    border-top: 1px solid #fff;
    width: 51.2px;
    width: 3.2rem;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0
}

.StreamView__container .StreamView__audioLevel_container {
    position: absolute;
    left: 1.6px;
    left: .1rem;
    top: 0;
    width: 19.2px;
    width: 1.2rem;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.StreamView__container .StreamView__no_video {
    width: 100%;
    height: 100%;
    min-width: 188.8px;
    min-width: 11.8rem;
    min-height: 140.8px;
    min-height: 8.8rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.StreamView__container .StreamView__trackset_control_icons {
    display: none;
    position: absolute;
    bottom: 8px;
    bottom: .5rem;
    right: 8px;
    right: .5rem;
    z-index: 999
}

.StreamView__container .StreamView__trackset_control_icons .StreamView__trackset_control_icon {
    position: relative;
    background-color: #0699cd;
    color: #fff;
    font-size: 24px;
    font-size: 1.5rem;
    margin-left: 16px;
    margin-left: 1rem;
    padding: 0 4.8px;
    padding: 0 .3rem;
    cursor: pointer
}

.StreamView__container .StreamView__trackset_control_icons .StreamView__trackset_control_icon_tooltip {
    margin-left: 16px;
    margin-left: 1rem
}

.StreamView__container .StreamView__trackset_control_icons .StreamView__trackset_control_icon_info {
    padding: 0 8px;
    padding: 0 .5rem
}

.StreamView__container .StreamView__trackset_control_icons .StreamView__trackset_control_icon_sound {
    padding: 0 1.6px 0 8px;
    padding: 0 .1rem 0 .5rem
}

.StreamView__container .StreamView__trackset_control_icons .StreamView__trackset_control_icon_off:after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    border-top: 1px solid #fff;
    width: 51.2px;
    width: 3.2rem;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0
}

.StreamView__container .StreamView__profile_pic {
    width: 50%;
    max-width: 100%;
    max-height: 100%
}

.StreamView__control_icon_tooltip {
    margin-left: 16px;
    margin-left: 1rem;
    -webkit-animation: none!important;
    animation: none!important
}

.SessionRoomViewWrapper.SessionRoomViewWrapper--fullscreen {
    background-color: #000;
    height: 100%
}

.SessionRoomViewWrapper.SessionRoomViewWrapper--fullscreen .ratio-locked-screen {
    max-height: 100%;
    height: 100%
}

.SessionRoomViewWrapper.SessionRoomViewWrapper--fullscreen .ratio-locked-screen .Peer {
    max-height: 100%
}

.SessionRoomViewWrapper .SessionRoomViewWrapper--right .MessageRoom {
    border-radius: 0
}

.Connection_difficulty {
    position: absolute;
    left: calc(50% - 28rem);
    top: calc(50% - 30rem);
    width: 896px;
    width: 56rem;
    height: 832px;
    height: 52rem;
    background-color: #fff;
    border-radius: 2rem;
    padding: 32px;
    padding: 2rem;
    z-index: 999999
}

.Connection_difficulty .Connection__difficulty_text {
    margin-top: 16px;
    margin-top: 1rem
}

.Connection_difficulty .Connection__difficulty_list {
    margin-top: 32px;
    margin-top: 2rem;
    padding-left: 32px;
    padding-left: 2rem
}

.Connection_difficulty .Connection__difficulty_list .Connection__difficulty_list_item {
    margin-bottom: 16px;
    margin-bottom: 1rem
}

.Connection_difficulty .Connection__difficulty_footer {
    margin-top: 32px;
    margin-top: 2rem
}

.WebRTCRoomView {
    background-color: #000;
    width: 100%;
    position: relative
}

.WebRTCRoomView .WebRTCRoomView__image_background {
    background-size: cover;
    background-position: 50% 50%;
    width: 100%
}

.WebRTCRoomView .RoomViewModal {
    z-index: 3
}

.WebRTCRoomView:hover .WebRTCControls {
    display: block
}

.WebRTCRoomView .WebRTCRoomView__children_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.RecordingDisplay {
    background-color: #393939;
    position: absolute;
    right: 16px;
    right: 1rem;
    top: 16px;
    top: 1rem;
    color: #fff;
    padding: 5px 10px!important
}

.RecordingDisplay .RecordingDisplay__peer_recording_circle {
    border: 1px solid #fff;
    background-color: red;
    width: 13px;
    height: 13px;
    border-radius: 9px;
    padding: 0;
    margin-top: 5px;
    margin-right: 5px
}

.RecordingDisplay .RecordingDisplay__peer_recording_text {
    padding-left: 20px
}

.SessionScreen {
    padding: 0;
    margin: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-size: cover;
    background-position: 50%
}

.SessionScreen,.SessionScreen h1,.SessionScreen h2,.SessionScreen h3,.SessionScreen h4 {
    color: #fff!important
}

.SessionScreen .SessionScreen--StartBox {
    border: 2px solid #c2c2c2;
    border-radius: 8px;
    color: #fff;
    padding: 15px
}

.session-left-panel-status {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #fff;
    font-size: 20px;
    margin: auto;
    letter-spacing: 3px;
    padding: 10px;
    z-index: 100
}

.SessionHeader .SessionHeader--ActionButton {
    padding: 4px 15px
}

.SessionHeader .SessionHeader--ActionButton:hover {
    background-color: transparent!important
}

@media (max-width: 600px) {
    .SessionHeader .SessionHeader--ActionButton {
        display:none
    }
}

.SessionHeader .SessionHeader-MaterialDropdown a {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.SessionHeader .SessionHeader-otherUserPresenceBorder {
    border-bottom: 4px solid #0699cd
}

.SessionHeader .SessionHeader-noOtherUserPresenceBorder {
    border-bottom: 4px solid #464b4e
}

.SessionHeader .SessionHeader-noOtherUserPresenceActiveBorder {
    border-bottom: 4px solid #767f84
}

.SessionHeader .SessionHeader-tinyProfilePic {
    width: 24px;
    height: 24px
}

.dropdown-toggle,.dropdown-toggle:focus,.dropdown-toggle:hover {
    color: #fff
}

.HelpIcon--TopTopRight {
    height: 0;
    right: 7px!important
}

.HelpIcon--TopTopRight .HelpIcon--svg {
    height: 0
}

&.MobileHeader .navbar-header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    margin-top: 7px;
    height: 60px
}

&.MobileHeader .navbar-header .logo-retina {
    display: inline-block
}

.MobileHeader .navbar-header {
    float: left;
    height: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.MobileHeader,.RegularHeader {
    -webkit-box-shadow: 0 4px 4px 0 rgba(0,0,0,.05);
    box-shadow: 0 4px 4px 0 rgba(0,0,0,.05)
}

.MobileHeader .navbar-header,.RegularHeader .navbar-header {
    height: 60px
}

.MobileHeader.Header--transparent,.RegularHeader.Header--transparent {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent
}

.MobileHeader .navbar-default .navbar-nav>li>a .vi,.MobileHeader .navbar-default .navbar-text .vi,.RegularHeader .navbar-default .navbar-nav>li>a .vi,.RegularHeader .navbar-default .navbar-text .vi {
    font-size: 33.6px;
    font-size: 2.1rem
}

.MobileHeader .ClockDropdown>ul,.MobileHeader .LanguageDropdown>ul,.MobileHeader .MoreDropdown>ul,.MobileHeader .ProfileDropdown>ul,.RegularHeader .ClockDropdown>ul,.RegularHeader .LanguageDropdown>ul,.RegularHeader .MoreDropdown>ul,.RegularHeader .ProfileDropdown>ul {
    min-width: 200px
}

.MobileHeader .dropdown:hover,.RegularHeader .dropdown:hover {
    color: #787b83
}

.MobileHeader .pull-right .dropdown-menu,.RegularHeader .pull-right .dropdown-menu {
    margin-right: -2px;
    margin-left: 0
}

.MobileHeader .dropdown-menu,.RegularHeader .dropdown-menu {
    padding: 0;
    border-top: 0;
    margin-left: -2px;
    letter-spacing: .5px;
    background-color: #fff;
    overflow: hidden
}

.MobileHeader .dropdown-menu .vi,.RegularHeader .dropdown-menu .vi {
    color: #0699cd
}

.MobileHeader .dropdown-menu .divider,.RegularHeader .dropdown-menu .divider {
    margin: 0
}

.MobileHeader .dropdown-menu>li>a,.RegularHeader .dropdown-menu>li>a {
    padding: 12px 20px;
    color: #0699cd;
    font-size: 16px
}

.MobileHeader .slide-items ul a,.RegularHeader .slide-items ul a {
    -webkit-transition: padding-left .2s ease;
    -o-transition: padding-left .2s ease;
    transition: padding-left .2s ease
}

.MobileHeader .slide-items ul a:hover,.RegularHeader .slide-items ul a:hover {
    padding-left: 25px
}

.MobileHeader .dropdown.open .dropdown-toggle,.MobileHeader .dropdown.open .dropdown-toggle:hover,.RegularHeader .dropdown.open .dropdown-toggle,.RegularHeader .dropdown.open .dropdown-toggle:hover {
    background-color: #0699cd!important;
    color: #fff!important
}

.MobileHeader .dropdown-menu>li>a,.RegularHeader .dropdown-menu>li>a {
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

.MobileHeader .dropdown-menu>li>a:focus,.MobileHeader .dropdown-menu>li>a:hover,.RegularHeader .dropdown-menu>li>a:focus,.RegularHeader .dropdown-menu>li>a:hover {
    background-color: #e7f5fe
}

.MobileHeader.navbar-default,.RegularHeader.navbar-default {
    border: none
}

.MobileHeader .nav>li>a:focus,.MobileHeader .nav>li>a:hover,.MobileHeader .navbar-default .navbar-nav>li>a:focus,.MobileHeader .navbar-default .navbar-nav>li>a:hover,.RegularHeader .nav>li>a:focus,.RegularHeader .nav>li>a:hover,.RegularHeader .navbar-default .navbar-nav>li>a:focus,.RegularHeader .navbar-default .navbar-nav>li>a:hover {
    background-color: #e7f5fe!important
}

.MobileHeader.navbar-default .navbar-nav>li>a,.RegularHeader.navbar-default .navbar-nav>li>a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #0699cd!important;
    letter-spacing: .5px;
    height: 60px;
    min-height: 60px;
    font-weight: 400;
    font-size: 16px
}

.MobileHeader.navbar-default .navbar-toggle:focus,.MobileHeader.navbar-default .navbar-toggle:hover,.RegularHeader.navbar-default .navbar-toggle:focus,.RegularHeader.navbar-default .navbar-toggle:hover {
    background-color: transparent
}

.MobileHeader.navbar-default .navbar-collapse,.MobileHeader.navbar-default .navbar-form,.RegularHeader.navbar-default .navbar-collapse,.RegularHeader.navbar-default .navbar-form {
    border: none
}

.MobileHeader.navbar-default .navbar-nav>.active>a,.RegularHeader.navbar-default .navbar-nav>.active>a {
    background-color: #e3f3fe!important
}

.MobileHeader .navbar-nav,.RegularHeader .navbar-nav {
    margin: 0;
    padding: 0
}

.MobileHeader .fa-32,.RegularHeader .fa-32 {
    width: 32px
}

.MobileHeader .fa-right,.RegularHeader .fa-right {
    margin-right: 5px
}

.MobileHeader .fa-left,.RegularHeader .fa-left {
    margin-left: 5px
}

.MobileHeader .img-navbar-profile,.RegularHeader .img-navbar-profile {
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    margin-right: 5px
}

.MobileHeader .nav-logo,.RegularHeader .nav-logo {
    margin-right: 15px;
    margin-lefpadding: 0;
    padding-top: 15px
}

.MobileHeader .nav-logo :hover,.RegularHeader .nav-logo :hover {
    -webkit-box-shadow: none;
    box-shadow: none
}

@media (max-width: 767px) {
    .MobileHeader .nav-logo,.RegularHeader .nav-logo {
        margin-left:15px
    }
}

@media (max-width: 767px) {
    .MobileHeader .navbar-collapse,.RegularHeader .navbar-collapse {
        padding-left:0;
        padding-right: 0
    }
}

.MobileHeader .mail-notification,.RegularHeader .mail-notification {
    position: absolute;
    top: 7px;
    left: 31px;
    width: 20px;
    height: 20px;
    background-color: #fd4444;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.MobileHeader #more-dropdown .vi,.MobileHeader nav>.btn.default .vi,.RegularHeader #more-dropdown .vi,.RegularHeader nav>.btn.default .vi {
    font-size: 28.8px;
    font-size: 1.8rem
}

.navbar-default .navbar-nav>li>a .vi,.navbar-default .navbar-text .vi {
    font-size: 36.8px;
    font-size: 2.3rem
}

.SessionHeader .dropdown-menu .vi {
    color: #fff
}

.SessionHeader .dropdown-menu>li>a .vi {
    color: #0699cd
}

.SessionHeader .dropdown.open .dropdown-toggle,.SessionHeader .dropdown.open .dropdown-toggle:hover {
    background-color: #767f84!important;
    color: #fff!important
}

.SessionHeader .dropdown-menu>li>a:focus,.SessionHeader .dropdown-menu>li>a:hover {
    background-color: #e7f5fe!important
}

.SessionHeader.navbar-default .navbar-nav>li>a {
    color: #fff!important
}

.SessionHeader.navbar-default .navbar-nav>.active>a {
    background-color: #767f84!important
}

.SessionHeader .navbar-default {
    background-color: #464b4e!important
}

.SessionHeader .dropdown-menu>li {
    display: block
}

.SessionHeader .dropdown-menu>li>a {
    color: #464b4e;
    padding: 10px 20px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 300px
}

.SessionHeader .nav>li>a:focus,.SessionHeader .nav>li>a:hover,.SessionHeader .navbar-default .navbar-nav>li>a:focus,.SessionHeader .navbar-default .navbar-nav>li>a:hover {
    background-color: #767f84!important
}

.ModalWrapper {
    position: relative;
    height: 100%;
    min-height: 700px;
    z-index: 1
}

.ModalWrapper .modal,.ModalWrapper .modal-container .modal-backdrop {
    position: absolute
}

.ModalWrapper .modal-content {
    -webkit-box-shadow: none;
    box-shadow: none
}

.OrganizationBase__logo,.OrganizationLogo {
    position: relative;
    border-radius: 6px;
    background-color: #fff;
    border: 3px solid #efefef
}

.OrganizationBase__logo {
    overflow: hidden;
    cursor: pointer
}

.OrganizationBase__logo:hover .OrganizationBase__logoOverlay {
    display: block
}

.OrganizationBase__logo .OrganizationBase__logoOverlay {
    display: none;
    text-align: center;
    padding-top: 25px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    background-color: rgba(0,0,0,.8)
}

.OrganizationBase__logo img {
    width: 90px;
    height: 90px
}

.OrganizationBase .OrganizationBase--links {
    height: 50px;
    text-align: center;
    padding: 0 30px;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.3);
    border-radius: 8px 8px 0 0
}

.OrganizationBase .OrganizationBase--links ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.OrganizationBase .OrganizationBase--links ul li a {
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    display: block;
    text-align: center;
    padding: 10px;
    text-decoration: none
}

.OrganizationBase .OrganizationBase--links ul li a:hover {
    background-color: #fff;
    background-color: hsla(0,0%,100%,.2)
}

.OrganizationBase .OrganizationBase--links ul .active {
    border-top: 3px solid #fff
}

.OrganizationBase .OrganizationBase__header {
    color: #fff;
    background: -webkit-gradient(linear,left top,right top,from(#0699cd),color-stop(100%,#3bb85c),to(#dd9611));
    background: -webkit-linear-gradient(left,#0699cd,#3bb85c 100%,#dd9611);
    background: -o-linear-gradient(left,#0699cd,#3bb85c 100%,#dd9611);
    background: linear-gradient(90deg,#0699cd,#3bb85c 100%,#dd9611);
    background-size: cover;
    background-position: 50%;
    position: relative;
    cursor: pointer
}

.OrganizationBase .OrganizationBase__header .OrganizationBase__headerUpload {
    position: absolute;
    bottom: 2px;
    right: 5px;
    padding: 2px 5px;
    border-radius: 6px
}

.OrganizationBase .OrganizationBase__header .OrganizationBase__headerUpload img {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.OrganizationBase .OrganizationBase__header .OrganizationBase__headerUpload .OrganizationBase__headerUploadText {
    opacity: 0
}

.OrganizationBase .OrganizationBase__header .OrganizationBase__headerUpload:hover {
    border: 2px solid #fff
}

.OrganizationBase .OrganizationBase__header .OrganizationBase__headerUpload:hover img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.OrganizationBase .OrganizationBase__header .OrganizationBase__headerUpload:hover .OrganizationBase__headerUploadText {
    opacity: 1
}

.OrganizationBase .OrganizationBase__header h1 {
    color: #fff
}

.OrganizationBase .OrganizationBase__header .OrganizationBase__headerInner {
    min-height: 150px
}

.OrganizationBase .OrganizationRecordings {
    padding-left: 29px
}

.OrganizationBase .OrganizationReportCreate {
    position: relative
}

.OrganizationBase .OrganizationReportCreate .OrganizationReportCreate--overlay {
    position: absolute;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.OrganizationFAQ h2 {
    margin: 40px 0 20px
}

.OrganizationFAQ a {
    display: block
}

.OrganizationFAQ .answers a,.OrganizationFAQ .answers a:hover {
    display: inline-block
}

.OrganizationHeader__waves {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%
}

.OrganizationBase__top {
    position: relative;
    z-index: 2
}

.LeaderboardBase table {
    overflow: hidden
}

.LeaderboardBase .LeaderboardBase__body {
    max-height: 500px;
    overflow-y: auto;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px
}

.YearOverview {
    width: 100%
}

.YearOverview__item {
    height: 15px;
    width: 15px;
    margin-right: 2px
}

.YearOverview__item.color-scale-1 {
    background-color: #b4e0f0
}

.YearOverview__item.color-scale-2 {
    background-color: #6ac2e1
}

.YearOverview__item.color-scale-3 {
    background-color: #38add7
}

.YearOverview__item.color-scale-4 {
    background-color: #0699cd
}

.react-calendar-heatmap text {
    font-size: 10px;
    letter-spacing: 2px;
    fill: #838789
}

.react-calendar-heatmap .react-calendar-heatmap-small-text {
    font-size: 5px
}

.react-calendar-heatmap rect:hover {
    stroke: #555;
    stroke-width: 1px
}

.react-calendar-heatmap .color-empty {
    fill: #d8d8d8
}

.react-calendar-heatmap .color-filled {
    fill: #8cc665
}

.react-calendar-heatmap .color-scale-0 {
    fill: #d8d8d8
}

.react-calendar-heatmap .color-scale-1 {
    fill: #b4e0f0
}

.react-calendar-heatmap .color-scale-2 {
    fill: #6ac2e1
}

.react-calendar-heatmap .color-scale-3 {
    fill: #38add7
}

.react-calendar-heatmap .color-scale-4 {
    fill: #0699cd
}

.react-calendar-heatmap .color-gitlab-0 {
    fill: #ededed
}

.react-calendar-heatmap .color-gitlab-1 {
    fill: #acd5f2
}

.react-calendar-heatmap .color-gitlab-2 {
    fill: #7fa8d1
}

.react-calendar-heatmap .color-gitlab-3 {
    fill: #49729b
}

.react-calendar-heatmap .color-gitlab-4 {
    fill: #254e77
}

.CreditToSingleModal .CreditToSingleModal--name {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 700
}

.CreditToSingleModal .ProfilePic {
    border: 4px solid #efefef
}

.CreditToSingleModal .badge {
    margin: 15px 0
}

.OrganizationAcceptInvite {
    margin-top: 100px
}

.OrganizationAcceptInvite .panel-body {
    padding: 0
}

.OrganizationAcceptInvite .OrganizationAcceptInvite--body {
    padding: 20px;
    font-size: 15px
}

.OrganizationAcceptInvite .OrganizationAcceptInvite--btn {
    margin-top: 10px;
    border-top: 1px solid #efefef;
    padding-top: 10px
}

.OrganizationAcceptInvite img {
    width: 150px;
    height: 150px;
    margin-top: -95px;
    border-radius: 50%;
    border: 4px solid #f8f8f8;
    background-color: #f8f8f8
}

.OrganizationAcceptInvite .OrganizationAcceptInvite--header {
    background-color: #0699cd;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.OrganizationAcceptInvite .OrganizationAcceptInvite--email {
    font-size: 20px;
    color: #fff
}

.OrganizationOnboarding .HuatutorLogo {
    margin-left: -22px
}

.SeatSelector .rc-slider-mark-text {
    font-weight: 700
}

@media (min-width: 767px) {
    .PlanOverview .PlanOverview__planB {
        -webkit-transform:scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
}

.PlanOverview .PlanOverview__panel {
    min-height: 700px;
    position: relative
}

.PlanOverview .PlanOverview__panel .ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right
}

.PlanOverview .PlanOverview__panel .ribbon span {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79a70a;
    background: -webkit-gradient(linear,left top,left bottom,from(#2989d8),to(#1e5799));
    background: -webkit-linear-gradient(#2989d8,#1e5799);
    background: -o-linear-gradient(#2989d8 0,#1e5799 100%);
    background: linear-gradient(#2989d8,#1e5799);
    -webkit-box-shadow: 0 3px 10px -5px #000;
    box-shadow: 0 3px 10px -5px #000;
    position: absolute;
    top: 19px;
    right: -21px
}

.PlanOverview .PlanOverview__panel .ribbon span:before {
    left: 0;
    border-left: 3px solid #1e5799;
    border-right: 3px solid transparent
}

.PlanOverview .PlanOverview__panel .ribbon span:after,.PlanOverview .PlanOverview__panel .ribbon span:before {
    content: "";
    position: absolute;
    top: 100%;
    z-index: -1;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #1e5799
}

.PlanOverview .PlanOverview__panel .ribbon span:after {
    right: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid #1e5799
}

.PlanOverview .PlanOverview__panel .panel-body {
    padding-bottom: 50px!important
}

.PlanOverview .PlanOverview__panel .PlanOverview__panelWaves {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    position: absolute;
    width: 100%;
    bottom: 0
}

.PresetDateRangePicker_panel {
    padding: 0 22px 11px
}

.PresetDateRangePicker_button {
    position: relative;
    height: 100%;
    text-align: center;
    background: 0 0;
    border: 2px solid #00a699;
    color: #00a699;
    padding: 4px 12px;
    margin-right: 8px;
    font: inherit;
    font-weight: 700;
    line-height: normal;
    overflow: visible;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer
}

.PresetDateRangePicker_button:active {
    outline: 0
}

.PresetDateRangePicker_button__selected {
    color: #fff;
    background: #00a699
}

.SingleDatePickerInput {
    display: inline-block;
    background-color: #fff
}

.SingleDatePickerInput__withBorder {
    border-radius: 2px;
    border: 1px solid #dbdbdb
}

.SingleDatePickerInput__rtl {
    direction: rtl
}

.SingleDatePickerInput__disabled {
    background-color: #f2f2f2
}

.SingleDatePickerInput__block {
    display: block
}

.SingleDatePickerInput__showClearDate {
    padding-right: 30px
}

.SingleDatePickerInput_clearDate {
    background: 0 0;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    cursor: pointer;
    padding: 10px;
    margin: 0 10px 0 5px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.SingleDatePickerInput_clearDate__default:focus,.SingleDatePickerInput_clearDate__default:hover {
    background: #dbdbdb;
    border-radius: 50%
}

.SingleDatePickerInput_clearDate__small {
    padding: 6px
}

.SingleDatePickerInput_clearDate__hide {
    visibility: hidden
}

.SingleDatePickerInput_clearDate_svg {
    fill: #82888a;
    height: 12px;
    width: 15px;
    vertical-align: middle
}

.SingleDatePickerInput_clearDate_svg__small {
    height: 9px
}

.SingleDatePickerInput_calendarIcon {
    background: 0 0;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    margin: 0 5px 0 10px
}

.SingleDatePickerInput_calendarIcon_svg {
    fill: #82888a;
    height: 15px;
    width: 14px;
    vertical-align: middle
}

.SingleDatePicker {
    position: relative;
    display: inline-block
}

.SingleDatePicker__block {
    display: block
}

.SingleDatePicker_picker {
    z-index: 1;
    background-color: #fff;
    position: absolute
}

.SingleDatePicker_picker__rtl {
    direction: rtl
}

.SingleDatePicker_picker__directionLeft {
    left: 0
}

.SingleDatePicker_picker__directionRight {
    right: 0
}

.SingleDatePicker_picker__portal {
    background-color: #000;
    background-color: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.SingleDatePicker_picker__fullScreenPortal {
    background-color: #fff
}

.SingleDatePicker_closeButton {
    background: 0 0;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    z-index: 2
}

.SingleDatePicker_closeButton:focus,.SingleDatePicker_closeButton:hover {
    color: darken(#cacccd,10%);
    text-decoration: none
}

.SingleDatePicker_closeButton_svg {
    height: 15px;
    width: 15px;
    fill: #cacccd
}

.DayPickerKeyboardShortcuts_buttonReset {
    background: 0 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    cursor: pointer;
    font-size: 14px
}

.DayPickerKeyboardShortcuts_buttonReset:active {
    outline: 0
}

.DayPickerKeyboardShortcuts_show {
    width: 22px;
    position: absolute;
    z-index: 2
}

.DayPickerKeyboardShortcuts_show__bottomRight {
    border-top: 26px solid transparent;
    border-right: 33px solid #00a699;
    bottom: 0;
    right: 0
}

.DayPickerKeyboardShortcuts_show__bottomRight:hover {
    border-right: 33px solid #008489
}

.DayPickerKeyboardShortcuts_show__topRight {
    border-bottom: 26px solid transparent;
    border-right: 33px solid #00a699;
    top: 0;
    right: 0
}

.DayPickerKeyboardShortcuts_show__topRight:hover {
    border-right: 33px solid #008489
}

.DayPickerKeyboardShortcuts_show__topLeft {
    border-bottom: 26px solid transparent;
    border-left: 33px solid #00a699;
    top: 0;
    left: 0
}

.DayPickerKeyboardShortcuts_show__topLeft:hover {
    border-left: 33px solid #008489
}

.DayPickerKeyboardShortcuts_showSpan {
    color: #fff;
    position: absolute
}

.DayPickerKeyboardShortcuts_showSpan__bottomRight {
    bottom: 0;
    right: -28px
}

.DayPickerKeyboardShortcuts_showSpan__topRight {
    top: 1px;
    right: -28px
}

.DayPickerKeyboardShortcuts_showSpan__topLeft {
    top: 1px;
    left: -28px
}

.DayPickerKeyboardShortcuts_panel {
    overflow: auto;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    padding: 22px;
    margin: 33px
}

.DayPickerKeyboardShortcuts_title {
    font-size: 16px;
    font-weight: 700;
    margin: 0
}

.DayPickerKeyboardShortcuts_list {
    list-style: none;
    padding: 0;
    font-size: 14px
}

.DayPickerKeyboardShortcuts_close {
    position: absolute;
    right: 22px;
    top: 22px;
    z-index: 2
}

.DayPickerKeyboardShortcuts_close:active {
    outline: 0
}

.DayPickerKeyboardShortcuts_closeSvg {
    height: 15px;
    width: 15px;
    fill: #cacccd
}

.DayPickerKeyboardShortcuts_closeSvg:focus,.DayPickerKeyboardShortcuts_closeSvg:hover {
    fill: #82888a
}

.CalendarDay {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    text-align: center
}

.CalendarDay:active {
    outline: 0
}

.CalendarDay__defaultCursor {
    cursor: default
}

.CalendarDay__default {
    border: 1px solid #e4e7e7;
    color: #484848;
    background: #fff
}

.CalendarDay__default:hover {
    background: #e4e7e7;
    border: 1px double #e4e7e7;
    color: inherit
}

.CalendarDay__hovered_offset {
    background: #f4f5f5;
    border: 1px double #e4e7e7;
    color: inherit
}

.CalendarDay__outside {
    border: 0;
    background: #fff;
    color: #484848
}

.CalendarDay__outside:hover {
    border: 0
}

.CalendarDay__blocked_minimum_nights {
    background: #fff;
    border: 1px solid #eceeee;
    color: #cacccd
}

.CalendarDay__blocked_minimum_nights:active,.CalendarDay__blocked_minimum_nights:hover {
    background: #fff;
    color: #cacccd
}

.CalendarDay__highlighted_calendar {
    background: #ffe8bc;
    color: #484848
}

.CalendarDay__highlighted_calendar:active,.CalendarDay__highlighted_calendar:hover {
    background: #ffce71;
    color: #484848
}

.CalendarDay__selected_span {
    background: #66e2da;
    border: 1px solid #33dacd;
    color: #fff
}

.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover {
    background: #33dacd;
    border: 1px solid #33dacd;
    color: #fff
}

.CalendarDay__last_in_range {
    border-right: #00a699
}

.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover {
    background: #00a699;
    border: 1px solid #00a699;
    color: #fff
}

.CalendarDay__hovered_span,.CalendarDay__hovered_span:hover {
    background: #b2f1ec;
    border: 1px solid #80e8e0;
    color: #007a87
}

.CalendarDay__hovered_span:active {
    background: #80e8e0;
    border: 1px solid #80e8e0;
    color: #007a87
}

.CalendarDay__blocked_calendar,.CalendarDay__blocked_calendar:active,.CalendarDay__blocked_calendar:hover {
    background: #cacccd;
    border: 1px solid #cacccd;
    color: #82888a
}

.CalendarDay__blocked_out_of_range,.CalendarDay__blocked_out_of_range:active,.CalendarDay__blocked_out_of_range:hover {
    background: #fff;
    border: 1px solid #e4e7e7;
    color: #cacccd
}

.CalendarMonth {
    background: #fff;
    text-align: center;
    vertical-align: top;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.CalendarMonth_table {
    border-collapse: collapse;
    border-spacing: 0
}

.CalendarMonth_verticalSpacing {
    border-collapse: separate
}

.CalendarMonth_caption {
    color: #484848;
    font-size: 18px;
    text-align: center;
    padding-top: 22px;
    padding-bottom: 37px;
    caption-side: top
}

.CalendarMonth_caption__verticalScrollable {
    padding-top: 12px;
    padding-bottom: 7px
}

.CalendarMonthGrid {
    background: #fff;
    text-align: left;
    z-index: 0
}

.CalendarMonthGrid__animating {
    z-index: 1
}

.CalendarMonthGrid__horizontal {
    position: absolute;
    left: 9px
}

.CalendarMonthGrid__vertical {
    margin: 0 auto
}

.CalendarMonthGrid__vertical_scrollable {
    margin: 0 auto;
    overflow-y: scroll
}

.CalendarMonthGrid_month__horizontal {
    display: inline-block;
    vertical-align: top;
    min-height: 100%
}

.CalendarMonthGrid_month__hideForAnimation {
    position: absolute;
    z-index: -1;
    opacity: 0;
    pointer-events: none
}

.CalendarMonthGrid_month__hidden {
    visibility: hidden
}

.DayPickerNavigation {
    position: relative;
    z-index: 2
}

.DayPickerNavigation__horizontal {
    height: 0
}

.DayPickerNavigation__verticalDefault {
    position: absolute;
    width: 100%;
    height: 52px;
    bottom: 0;
    left: 0
}

.DayPickerNavigation__verticalScrollableDefault {
    position: relative
}

.DayPickerNavigation_button {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 0;
    padding: 0;
    margin: 0
}

.DayPickerNavigation_button__default {
    border: 1px solid #e4e7e7;
    background-color: #fff;
    color: #757575
}

.DayPickerNavigation_button__default:focus,.DayPickerNavigation_button__default:hover {
    border: 1px solid #c4c4c4
}

.DayPickerNavigation_button__default:active {
    background: #f2f2f2
}

.DayPickerNavigation_button__horizontalDefault {
    position: absolute;
    top: 18px;
    line-height: .78;
    border-radius: 3px;
    padding: 6px 9px
}

.DayPickerNavigation_leftButton__horizontalDefault {
    left: 22px
}

.DayPickerNavigation_rightButton__horizontalDefault {
    right: 22px
}

.DayPickerNavigation_button__verticalDefault {
    padding: 5px;
    background: #fff;
    -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
    box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
    position: relative;
    display: inline-block;
    height: 100%;
    width: 50%
}

.DayPickerNavigation_nextButton__verticalDefault {
    border-left: 0
}

.DayPickerNavigation_nextButton__verticalScrollableDefault {
    width: 100%
}

.DayPickerNavigation_svg__horizontal {
    height: 19px;
    width: 19px;
    fill: #82888a;
    display: block
}

.DayPickerNavigation_svg__vertical {
    height: 42px;
    width: 42px;
    fill: #484848;
    display: block
}

.DayPicker {
    position: relative;
    text-align: left
}

.DayPicker,.DayPicker__horizontal {
    background: #fff
}

.DayPicker__verticalScrollable {
    height: 100%
}

.DayPicker__hidden {
    visibility: hidden
}

.DayPicker__withBorder {
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);
    box-shadow: 0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);
    border-radius: 3px
}

.DayPicker_portal__horizontal {
    -webkit-box-shadow: none;
    box-shadow: none;
    position: absolute;
    left: 50%;
    top: 50%
}

.DayPicker_portal__vertical {
    position: static
}

.DayPicker_focusRegion {
    outline: 0
}

.DayPicker_calendarInfo__horizontal,.DayPicker_wrapper__horizontal {
    display: inline-block;
    vertical-align: top
}

.DayPicker_weekHeaders {
    position: relative
}

.DayPicker_weekHeaders__horizontal {
    margin-left: 9px
}

.DayPicker_weekHeader {
    color: #757575;
    position: absolute;
    top: 62px;
    z-index: 2;
    text-align: left
}

.DayPicker_weekHeader__vertical {
    left: 50%
}

.DayPicker_weekHeader__verticalScrollable {
    top: 0;
    display: table-row;
    border-bottom: 1px solid #dbdbdb;
    background: #fff;
    margin-left: 0;
    left: 0;
    width: 100%;
    text-align: center
}

.DayPicker_weekHeader_ul {
    list-style: none;
    margin: 1px 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 14px
}

.DayPicker_weekHeader_li {
    display: inline-block;
    text-align: center
}

.DayPicker_transitionContainer {
    position: relative;
    overflow: hidden;
    border-radius: 3px
}

.DayPicker_transitionContainer__horizontal {
    -webkit-transition: height .2s ease-in-out;
    -o-transition: height .2s ease-in-out;
    transition: height .2s ease-in-out
}

.DayPicker_transitionContainer__vertical {
    width: 100%
}

.DayPicker_transitionContainer__verticalScrollable {
    padding-top: 20px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow-y: scroll
}

.DateInput {
    margin: 0;
    padding: 0;
    background: #fff;
    position: relative;
    display: inline-block;
    width: 130px;
    vertical-align: middle
}

.DateInput__small {
    width: 97px
}

.DateInput__block {
    width: 100%
}

.DateInput__disabled {
    background: #f2f2f2;
    color: #dbdbdb
}

.DateInput_input {
    font-weight: 200;
    font-size: 19px;
    line-height: 24px;
    color: #484848;
    background-color: #fff;
    width: 100%;
    padding: 11px 11px 9px;
    border: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 2px solid transparent;
    border-left: 0;
    border-radius: 0
}

.DateInput_input__small {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: .2px;
    padding: 7px 7px 5px
}

.DateInput_input__regular {
    font-weight: auto
}

.DateInput_input__readOnly {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.DateInput_input__focused {
    outline: 0;
    background: #fff;
    border: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 2px solid #008489;
    border-left: 0
}

.DateInput_input__disabled {
    background: #f2f2f2;
    font-style: italic
}

.DateInput_screenReaderMessage {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.DateInput_fang {
    position: absolute;
    width: 20px;
    height: 10px;
    left: 22px;
    z-index: 2
}

.DateInput_fangShape {
    fill: #fff
}

.DateInput_fangStroke {
    stroke: #dbdbdb;
    fill: transparent
}

.DateRangePickerInput {
    background-color: #fff;
    display: inline-block
}

.DateRangePickerInput__disabled {
    background: #f2f2f2
}

.DateRangePickerInput__withBorder {
    border-radius: 2px;
    border: 1px solid #dbdbdb
}

.DateRangePickerInput__rtl {
    direction: rtl
}

.DateRangePickerInput__block {
    display: block
}

.DateRangePickerInput__showClearDates {
    padding-right: 30px
}

.DateRangePickerInput_arrow {
    display: inline-block;
    vertical-align: middle;
    color: #484848
}

.DateRangePickerInput_arrow_svg {
    vertical-align: middle;
    fill: #484848;
    height: 24px;
    width: 24px
}

.DateRangePickerInput_clearDates {
    background: 0 0;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    cursor: pointer;
    padding: 10px;
    margin: 0 10px 0 5px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.DateRangePickerInput_clearDates__small {
    padding: 6px
}

.DateRangePickerInput_clearDates_default:focus,.DateRangePickerInput_clearDates_default:hover {
    background: #dbdbdb;
    border-radius: 50%
}

.DateRangePickerInput_clearDates__hide {
    visibility: hidden
}

.DateRangePickerInput_clearDates_svg {
    fill: #82888a;
    height: 12px;
    width: 15px;
    vertical-align: middle
}

.DateRangePickerInput_clearDates_svg__small {
    height: 9px
}

.DateRangePickerInput_calendarIcon {
    background: 0 0;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    margin: 0 5px 0 10px
}

.DateRangePickerInput_calendarIcon_svg {
    fill: #82888a;
    height: 15px;
    width: 14px;
    vertical-align: middle
}

.DateRangePicker {
    position: relative;
    display: inline-block
}

.DateRangePicker__block {
    display: block
}

.DateRangePicker_picker {
    z-index: 1;
    background-color: #fff;
    position: absolute
}

.DateRangePicker_picker__rtl {
    direction: rtl
}

.DateRangePicker_picker__directionLeft {
    left: 0
}

.DateRangePicker_picker__directionRight {
    right: 0
}

.DateRangePicker_picker__portal {
    background-color: #000;
    background-color: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.DateRangePicker_picker__fullScreenPortal {
    background-color: #fff
}

.DateRangePicker_closeButton {
    background: 0 0;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    z-index: 2
}

.DateRangePicker_closeButton:focus,.DateRangePicker_closeButton:hover {
    color: darken(#cacccd,10%);
    text-decoration: none
}

.DateRangePicker_closeButton_svg {
    height: 15px;
    width: 15px;
    fill: #cacccd
}

.DateRangePicker table td {
    padding: 0
}

.DateInput_input__focused {
    border-bottom: 1px solid #0699cd
}

.DateRangePicker_picker {
    z-index: 3
}

.DateRangePickerInput {
    border-radius: 4px;
    border: 0;
    overflow: hidden
}

.DateRangePickerInput__withBorder {
    border: 1px solid #e6e6e6
}

.DateInput_input {
    padding: 8px 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: inherit
}

.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover {
    background: #0699cd;
    border: 1px solid #0699cd
}

.CalendarDay__hovered_span,.CalendarDay__hovered_span:active,.CalendarDay__hovered_span:hover,.CalendarDay__selected_span,.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover {
    background-color: #e3f3fe;
    border: 1px solid #e3f3fe;
    color: #4f5457
}

.AvailabilityGridSelector .SelectPanel {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    cursor: pointer;
    margin-bottom: 10px;
    height: 80px
}

.AvailabilityGridSelector .SelectPanel:hover {
    background-color: #e3f3fe;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.AvailabilityGridSelector .SelectPanel.SelectPanel--selected {
    background-color: #0699cd;
    color: #fff!important
}

.AvailabilityGridSelector .AvailabilitySelector__label {
    padding-bottom: 10px;
    font-weight: 700;
    height: 30px
}

.AvailabilityGridSelector .AvailabilitySelector__section {
    margin-right: 10px;
    margin-bottom: 10px;
    height: 75px
}

.AvailabilityGridSelector .AvailabilitySelector__day {
    margin-right: 10px
}

.AvailabilityGridSelector .AvailabilitySelector__slot {
    width: 100px;
    height: 75px;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    cursor: pointer;
    margin-bottom: 10px
}

.AvailabilityGridSelector .AvailabilitySelector__slot:hover {
    background-color: #e3f3fe;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.AvailabilityGridSelector .AvailabilitySelector__slot.AvailabilitySelector__slot--selected {
    background-color: #0699cd
}

.OnboardingBase--background-fadein {
    position: fixed;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 5;
    background-color: #fff
}

.OnboardingBase--background {
    position: fixed;
    height: 100%;
    min-height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    -webkit-transition: background-image 1s ease-in-out;
    -o-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden
}

.OnboardingBase {
    position: relative;
    overflow-y: hidden;
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c)
}

.OnboardingBase .OnboardingBase--main {
    z-index: 3
}

.OnboardingBase .OnboardingBase__skip {
    text-align: center;
    z-index: 2
}

.OnboardingBase .OnboardingBase__skip section {
    margin-bottom: 10px
}

.OnboardingBase .OnboardingBase__skip a {
    color: #fff
}

.OnboardingBase .FreeTrial .FreeTrial--cover {
    width: 100%;
    height: 200px;
    background-color: #000;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-size: cover!important
}

.OnboardingBase .FreeTrial .FreeTrial--countdown {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 24px;
    min-width: 200px;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px 0 rgba(0,0,0,.18);
    box-shadow: inset 0 0 6px 0 rgba(0,0,0,.18)
}

.OnboardingBase .Motivation {
    min-height: 500px
}

.OnboardingBase .Motivation .Motivation--motivation {
    margin-bottom: 10px
}

.OnboardingBase .Motivation .Motivation--motivation .Motivation--motivation--inner {
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    min-height: 120px;
    padding-top: 30px;
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    border-radius: 5px
}

.OnboardingBase .Motivation .Motivation--motivation .Motivation--motivation--inner:hover {
    -webkit-box-shadow: 1px 1px 1px 2px rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 2px rgba(0,0,0,.1)
}

.OnboardingBase .Motivation .Motivation--motivation .Motivation--motivation--inner:active {
    -webkit-box-shadow: none;
    box-shadow: none
}

.OnboardingBase .Motivation .Motivation--motivation .Motivation--motivation--inner.active {
    background-color: #e3f3fe
}

.OnboardingBase .HuatutorLogo {
    width: 200px;
    margin-top: 32px;
    margin-top: 2rem;
    margin-bottom: 32px;
    margin-bottom: 2rem
}

@media (max-width: 767px) {
    .OnboardingBase .HuatutorLogo {
        display:hidden
    }
}

.OnboardingBase .OnboardingModal {
    border-radius: 8px;
    min-height: 40px;
    max-width: 600px;
    color: #787b83;
    margin-bottom: 20px;
    min-width: 50%
}

@media (max-width: 768px) {
    .OnboardingBase .OnboardingModal {
        width:90% !important
    }
}



.OnboardingBase .OnboardingModal.OnboardingModal--noMaxWidth {
    max-width: none
}

.OnboardingBase .OnboardingModal.no-header section,.OnboardingBase .OnboardingModal header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.OnboardingBase .OnboardingModal header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.OnboardingBase .OnboardingModal header h1,.OnboardingBase .OnboardingModal header h2,.OnboardingBase .OnboardingModal header h3 {
    margin: 0
}

.OnboardingBase .OnboardingModal section {
    padding: 30px
}

@media (max-width: 768px) {
    .OnboardingBase .OnboardingModal section {
        padding:15px
    }
}

.OnboardingBase .OnboardingModal footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 16px;
    padding: 1rem;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media (max-width: 767px) {
    .OnboardingBase .OnboardingModal footer {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .OnboardingBase .OnboardingModal footer .btn {
        width: 100%
    }

    .OnboardingBase .OnboardingModal footer .btn:first-child {
        margin-bottom: 10px
    }
}

.OnboardingBase .OnboardingModal footer,.OnboardingBase .OnboardingModal header {
    background-color: #fff;
    min-height: 50px
}

.OnboardingBase .OnboardingModal section {
    min-height: 100px;
    background-color: #f8f8f8
}

.slide-in-left-enter {
    opacity: .01;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px)
}

.slide-in-left-enter,.slide-in-left-enter.slide-in-left-enter-active {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.slide-in-left-enter.slide-in-left-enter-active {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.slide-in-left-appear {
    opacity: .01;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1);
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px)
}

.slide-in-left-appear.slide-in-left-appear-active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.slide-in-left-appear.slide-in-left-appear-active,.slide-in-left-leave {
    opacity: 1;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.slide-in-left-leave {
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px)
}

.slide-in-left-leave.slide-in-left-leave-active {
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px)
}

.slide-in-left-leave.slide-in-left-leave-active,.slide-in-right-enter {
    opacity: .01;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.slide-in-right-enter {
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(50px)
}

.slide-in-right-enter.slide-in-right-enter-active {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.slide-in-right-appear,.slide-in-right-enter.slide-in-right-enter-active {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.slide-in-right-appear {
    opacity: .01;
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(50px)
}

.slide-in-right-appear.slide-in-right-appear-active {
    opacity: 1;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.slide-in-right-leave {
    opacity: 1
}

.slide-in-right-leave,.slide-in-right-leave.slide-in-right-leave-active {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1);
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(50px)
}

.slide-in-right-leave.slide-in-right-leave-active {
    opacity: .01
}

.slow-fade-enter {
    opacity: .01
}

.slow-fade-enter,.slow-fade-enter.slow-fade-enter-active {
    -webkit-transition: all 2s cubic-bezier(.4,0,.2,1);
    -o-transition: all 2s cubic-bezier(.4,0,.2,1);
    transition: all 2s cubic-bezier(.4,0,.2,1)
}

.slow-fade-enter.slow-fade-enter-active {
    opacity: 1
}

.slow-fade-appear {
    opacity: .01;
    -webkit-transition: all 2s cubic-bezier(.4,0,.2,1);
    -o-transition: all 2s cubic-bezier(.4,0,.2,1);
    transition: all 2s cubic-bezier(.4,0,.2,1)
}

.slow-fade-appear.slow-fade-appear-active,.slow-fade-leave {
    opacity: 1
}

.slow-fade-appear.slow-fade-appear-active,.slow-fade-leave,.slow-fade-leave.slow-fade-leave-active {
    -webkit-transition: all 2s cubic-bezier(.4,0,.2,1);
    -o-transition: all 2s cubic-bezier(.4,0,.2,1);
    transition: all 2s cubic-bezier(.4,0,.2,1)
}

.slow-fade-leave.slow-fade-leave-active {
    opacity: .01
}

.flipper-slide-up-down-enter {
    -webkit-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%)
}

.flipper-slide-up-down-enter.flipper-slide-up-down-enter-active {
    -webkit-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.flipper-slide-up-down-appear {
    -webkit-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%)
}

.flipper-slide-up-down-appear.flipper-slide-up-down-appear-active,.flipper-slide-up-down-leave {
    -webkit-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.flipper-slide-up-down-leave.flipper-slide-up-down-leave-active {
    -webkit-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: translateY(150%);
    -ms-transform: translateY(150%);
    transform: translateY(150%)
}

.ProficiencySelectList__item {
    border-radius: 4px;
    border: 1px solid #efefef;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    color: #838789
}

.WizardBase {
    margin-bottom: 100px
}

.WizardBase h1 {
    font-size: 28px;
    font-weight: 700;
    color: #4f5457;
    letter-spacing: -1.3px
}

.WizardBase h1 small {
    color: #838789!important
}

.WizardBase h1 small,.WizardBase h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -1px
}

.WizardBase h3 {
    margin-top: 30px;
    color: #4f5457
}

.WizardBase .WizardBase__continue {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 0;
    width: 100%
}

.WizardBase .PriceSlider__range {
    font-size: 25px
}

@media (min-width: 768px) {
    .WizardBase .SelectPanel {
        -webkit-transition:all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out
    }

    .WizardBase .SelectPanel:hover {
        background-color: #e3f3fe;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
}

.WizardBase .SelectPanel {
    cursor: pointer;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    height: 80px;
    border-radius: 4px
}

.WizardBase .SelectPanel.SelectPanel--selected {
    background-color: #0699cd;
    color: #fff!important
}

.WizardBase .SelectPanel.SelectPanel--selected .text-light-gray {
    color: #fff!important
}

.LanguageSelector__Card {
    margin-bottom: 15px
}

.Sitemap {
    padding-top: 30px
}

.Sitemap .btn {
    margin-bottom: 20px;
    font-size: 18px
}

.Sitemap .btn i {
    font-size: 24px
}

.LinkGrid a {
    display: block
}

@media only screen and (min-width: 790px) {
    .LinkGrid {
        -webkit-column-count:3;
        column-count: 3;
        -webkit-column-gap: 5em;
        column-gap: 5em;
        -webkit-column-break-inside: avoid;
        break-inside: avoid-column
    }
}

.AppBase-Wrapper {
    width: 100%;
    min-height: 100%;
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c)
}

.AppBase {
    margin: 15%
}

.AppBase,.AppBase h1,.AppBase h2 {
    color: #fff
}

.AppBase .AppBase__devices {
    max-width: none
}

@media (min-width: 768px) {
    .AppBase .AppBase__sendLink {
        width:500px
    }
}

@media (max-width: 768px) {
    .AppBase .AppBase__devices {
        width:80%;
        height: 80%;
        margin-top: 20px
    }
}

.StudentGoalSetter .StudentGoalSetter__prof {
    border-radius: 8px;
    border: 1px solid #efefef
}

.StudentGoalSetter .StudentGoalSetter__exampleCertificate {
    width: 200px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.4);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.4)
}

.RequestsBase {
    .margin-top:20px}

.RequestsBase .StudentRequestItem {
    background-color: #fff;
    color: #787b83;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    margin-bottom: 20px;
    overflow: hidden;
    padding: 15px
}

.RequestsBase .StudentRequestsFilters {
    margin-bottom: 10px
}

@media only screen and (max-width: 768px) {
    .RelationshipBase .Relationship__banner-btns {
        margin-top:5px
    }
}

@media only screen and (min-width: 768px) {
    .RelationshipBase .RelationshipSubHeader__wrapper {
        padding:0 16px;
        padding: 0 1rem
    }
}

.SessionHoverCard {
    width: 220px;
    z-index: 100;
    position: absolute
}

.SessionHoverCard .SessionHoverCard__inner {
    border: 1px solid silver;
    border-radius: 8px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    border: 1px solid #d8d8d8;
    background-color: #fff;
    margin-bottom: 5px
}

.MonthlyCalendar .MonthlyCalendar__loadingOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-color: hsla(0,0%,100%,.7);
    z-index: 2;
    border-radius: 8px
}

.MonthlyCalendar .MonthlyCalendar__weeks {
    position: relative;
    border-radius: 8px;
    border: 1px solid #efefef;
    overflow: hidden
}

.MonthlyCalendar .MonthlyCalendar__week:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.MonthlyCalendar .MonthlyCalendar__week:first-child .MonthlyCalendar__day:first-child {
    border-top-left-radius: 8px
}

.MonthlyCalendar .MonthlyCalendar__week:first-child .MonthlyCalendar__day:last-child {
    border-top-right-radius: 8px
}

.MonthlyCalendar .MonthlyCalendar__week:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.MonthlyCalendar .MonthlyCalendar__week:last-child .MonthlyCalendar__day {
    border-bottom: none
}

.MonthlyCalendar .MonthlyCalendar__day--past {
    background-color: #f8f8f8
}

.MonthlyCalendar .MonthlyCalendar__day--inactive {
    background-color: #f2f2f2
}

.MonthlyCalendar .MonthlyCalendar__day--today {
    background-color: #e3f3fe
}
.MonthlyCalendar .MonthlyCalendar__day--selected {
    background-color: #BFE3FB
}
.MonthlyCalendar .MonthlyCalendar__day--today .MonthlyCalendar__num {
    color: #0699cd;
    font-weight: 700
}

.MonthlyCalendar .MonthlyCalendar__num {
    position: absolute;
    top: 4px;
    left: 4px
}

.MonthlyCalendar .MonthlyCalendar__day {
    position: relative;
    min-height: 70px;
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef
}

.MonthlyCalendar .MonthlyCalendar__day:last-child {
    border-right: none
}

.sync-cal-modal #event-description .row {
    margin-bottom: 20px
}

.sync-cal-modal .info-type {
    font-weight: 700
}

.sync-cal-modal #add-event-row {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #d3d3d3
}

.sync-cal-modal .subscribe-link {
    border: 1px solid #bbb;
    padding: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #eee;
    width: 100%
}

.sync-cal-modal #or {
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    text-align: center
}

.sync-cal-modal #help-link {
    margin-top: 10px
}

.perkSection {
    background-color: #fff;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 40px;
    padding-top: 20px
}

.perksMainSubTitle {
    color: #a2a2a2
}

.perkItem {
    border: 1px solid #efefef;
    min-height: 146px;
    background: #fff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    border-radius: 8px;
    margin: 10px
}

.perkItem,.perksListing {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.perksListing {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.perkIcon {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-radius: 8px 0 0 8px;
    width: 30%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.perkIcon svg {
    stroke: #fff;
    width: 100px;
    height: 100px
}

.perkInfo {
    padding: 30px;
    margin: auto 0
}

@media only screen and (max-width: 768px) {
    [class*=perkInfo] {
        padding:10px
    }
}

.perksMainHeader {
    text-align: center
}

.JobsListing {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.JobsSection {
    background-color: #f8f8f8;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 20px;
    min-height: 400px
}

.JobsMainHeader {
    text-align: center;
    padding-bottom: 20px
}

.JobsMainSubTitle {
    color: #a2a2a2
}

.JobItem {
    width: 320px;
    background: #fff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    border-radius: 8px;
    margin: 10px;
    background-color: #fff
}

.JobIcon {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-radius: 8px 0 0 8px;
    width: 8px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.JobInfo {
    padding: 30px
}

@-webkit-keyframes pulsateJobItem {
    0% {
        -webkit-transform: scale(1,1)
    }

    50% {
        -webkit-transform: scale(1.01,1.02)
    }

    to {
        -webkit-transform: scale(1,1)
    }
}

.JobItem:hover {
    -moz-animation: pulsateJobItem .31415s ease-out;
    -moz-animation-iteration-count: 1;
    -webkit-animation: pulsateJobItem .31415s ease-out;
    -webkit-animation-iteration-count: 1
}

@media only screen and (max-width: 768px) {
    [class*=JobInfo] {
        padding:10px;
        margin: auto 0
    }
}

.LandingPage__section {
    background-color: #f2f2f2;
    padding: 30px;
    min-height: 200px
}

.LandingPage__TopHero__Header {
    font-size: 56px;
    line-height: 75px;
    color: #fff
}

@media (max-width: 768px) {
    .LandingPage__TopHero__Header {
        font-size:50px;
        line-height: 50px
    }
}

.LandingPage__TopHero__Subtitle {
    font-size: 20px;
    line-height: 22px;
    font-weight: 400;
    color: #fff
}

.LandingPage__Feature {
    background-color: #fff
}

@media (min-width: 768px) {
    .LandingPage__Feature {
        padding-top:20px;
        padding-bottom: 20px
    }
}

.LandingPage__FindTeachers {
    font-size: 20px;
    color: #fff;
    line-height: 20px;
    padding: 15px 25px;
    background-color: #0699cd;
    margin-bottom: 4vh
}

.LandingPage__FindTeachers:hover {
    color: #fff
}

.LandingPage__Banner {
    background-color: #0699cd;
    text-align: center;
    padding: 8vh 5%
}

.LandingPage__Banner__Header {
    font-size: 48px;
    line-height: 70px;
    color: #fff
}

.LandingPage__Banner__Subtitle {
    font-size: 20px;
    line-height: 22px;
    color: #fff
}

.LandingPage__Teacher {
    max-width: 350px;
    min-width: 350px
}

@media (max-width: 768px) {
    .LandingPage__Teacher {
        margin-bottom:3vh
    }

    .LandingPage__Teacher:last-child {
        margin-bottom: 0
    }
}

.LandingPage__Teachers {
    margin: 4vh 0
}

.GiftsLandingPage .HeroImage {
    -webkit-clip-path: polygon(0 0,100% 0,100% 90%,0 100%);
    clip-path: polygon(0 0,100% 0,100% 90%,0 100%)
}

.GiftsLandingPage .LandingPage__HowItWorks2 {
    background-color: #fff
}

.GiftCard {
    width: 250px;
    background-color: #434242;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    padding: 5px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.GiftCard:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-box-shadow: 5px 10px 10px 0 rgba(0,0,0,.2);
    box-shadow: 5px 10px 10px 0 rgba(0,0,0,.2)
}

.GiftCard .GiftCard__inner {
    width: 240px;
    height: 151px;
    border-radius: 8px;
    background-image: -webkit-radial-gradient(50% 50%,circle,#d8d8d8,#c2c2c2);
    background-image: -o-radial-gradient(50% 50%,circle,#d8d8d8,#c2c2c2);
    background-image: radial-gradient(circle at 50% 50%,#d8d8d8,#c2c2c2)
}

.GiftCard .GiftCard__inner img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 0 auto
}

.GiftBase .GiftImage {
    border-radius: 12px;
    cursor: pointer;
    border: 4px solid #fff;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.GiftBase .GiftImage:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

.GiftBase .GiftImage--selected {
    border: 4px solid #000
}

.GiftBase .GiftBase__amounts {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -5px
}

.GiftBase .GiftBase__amounts .GiftBase__amounts--wrapper {
    padding: 0 5px;
    width: 33%
}

@media only screen and (max-width: 768px) {
    .GiftBase .GiftBase__amounts .GiftBase__amounts--wrapper {
        width:100%
    }
}

.GiftBase header {
    width: 100%;
    height: 230px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background: url(https://cdn.huatutor.com/2108138772139bd90300f7b5b0d3716d9c0152a5/img/gift-header-bg.jpg) 50% 50% no-repeat;
    background-size: cover;
    padding-top: 20px;
    color: #000
}

.GiftBase .body {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
    border: 1px solid #fff;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    border-collapse: separate
}

.GiftBase .selection {
    padding: 10px;
    font-size: 15px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ccc
}

.GiftBase .selection span {
    margin-right: 15px;
    display: inline-block
}

.GiftBase .amount-selection .btn {
    margin-bottom: 20px;
    padding: 20px
}

.GiftBase .gift-content {
    background-color: #fff
}

.ReviewBase .ReviewSetup {
    border-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    max-width: 500px;
    padding: 30px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease
}

.ReviewBase .ReviewSetup.ReviewSetup--show {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.ReviewBase .ReviewResults {
    border-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    max-width: 500px;
    padding: 30px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease
}

.ReviewBase .ReviewResults.ReviewResults--show {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.ReviewBase .ReviewResults .ReviewResults__correct {
    color: #36ca36
}

.ReviewBase .ReviewResults .ReviewResults__almost {
    color: #ffbd04
}

.ReviewBase .ReviewResults .ReviewResults__wrong {
    color: #fd4444
}

.ReviewBase .ReviewFlashcard {
    position: relative;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease
}

.ReviewBase .ReviewFlashcard__how {
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.ReviewBase .ReviewFlashcard--flipped .ReviewFlashcard__how {
    opacity: 1
}

.ReviewBase .ReviewFlashcard--flipped .ReviewFlashcard__btn-wrapper {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.ReviewBase .ReviewFlashcard__btn-wrapper {
    z-index: 1;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 1s ease,-webkit-transform .3s ease;
    transition: opacity 1s ease,-webkit-transform .3s ease;
    -o-transition: transform .3s ease,opacity 1s ease;
    transition: transform .3s ease,opacity 1s ease;
    transition: transform .3s ease,opacity 1s ease,-webkit-transform .3s ease;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0)
}

.ReviewBase .ReviewFlashcard__btn-wrapper .text-xs {
    margin-top: 8px;
    margin-top: .5rem
}

.ReviewBase .ReviewFlashcard__btn {
    z-index: 1;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: #fff;
    cursor: pointer;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)
}

.ReviewBase .ReviewFlashcard__btn .ReviewFlashcard__btn-text {
    position: absolute;
    bottom: -10px
}

.ReviewBase .ReviewFlashcard__btn:hover {
    -webkit-transform: scale(1.02)!important;
    -ms-transform: scale(1.02)!important;
    transform: scale(1.02)!important
}

.ReviewBase .ReviewFlashcard__no {
    left: -60px;
    top: calc(50% - 24px)
}

.ReviewBase .ReviewFlashcard__no .ReviewFlashcard__btn {
    background-color: #fd4444
}

.ReviewBase .ReviewFlashcard__meh {
    bottom: -80px;
    left: calc(50% - 24px)
}

.ReviewBase .ReviewFlashcard__meh .ReviewFlashcard__btn {
    background-color: #ffbd04
}

.ReviewBase .ReviewFlashcard__yes {
    right: -60px;
    top: calc(50% - 24px)
}

.ReviewBase .ReviewFlashcard__yes .ReviewFlashcard__btn {
    background-color: #36ca36
}

.ReviewBase .ReviewFlashcard--scored .ReviewFlashcard__btn-wrapper {
    opacity: 0
}

.ReviewBase .ReviewFlashcard--scored .ReviewFlashcard__btn-wrapper .vi {
    display: none
}

.ReviewBase .ReviewFlashcard--left {
    -webkit-transition: -webkit-transform 2s ease;
    transition: -webkit-transform 2s ease;
    -o-transition: transform 2s ease;
    transition: transform 2s ease;
    transition: transform 2s ease,-webkit-transform 2s ease;
    -webkit-transform: translateX(-2000px) scale(1) rotate(-90deg)!important;
    -ms-transform: translateX(-2000px) scale(1) rotate(-90deg)!important;
    transform: translateX(-2000px) scale(1) rotate(-90deg)!important
}

.ReviewBase .ReviewFlashcard--left .ReviewFlashcard__no {
    -webkit-transform: scale(200)!important;
    -ms-transform: scale(200)!important;
    transform: scale(200)!important
}

.ReviewBase .ReviewFlashcard--left .ReviewFlashcard__meh,.ReviewBase .ReviewFlashcard--left .ReviewFlashcard__yes {
    display: none
}

.ReviewBase .ReviewFlashcard--right {
    -webkit-transition: -webkit-transform 2s ease;
    transition: -webkit-transform 2s ease;
    -o-transition: transform 2s ease;
    transition: transform 2s ease;
    transition: transform 2s ease,-webkit-transform 2s ease;
    -webkit-transform: translateX(2000px) scale(1) rotate(90deg)!important;
    -ms-transform: translateX(2000px) scale(1) rotate(90deg)!important;
    transform: translateX(2000px) scale(1) rotate(90deg)!important
}

.ReviewBase .ReviewFlashcard--right .ReviewFlashcard__yes {
    -webkit-transform: scale(200)!important;
    -ms-transform: scale(200)!important;
    transform: scale(200)!important
}

.ReviewBase .ReviewFlashcard--right .ReviewFlashcard__meh,.ReviewBase .ReviewFlashcard--right .ReviewFlashcard__no {
    display: none
}

.ReviewBase .ReviewFlashcard--middle {
    -webkit-transition: -webkit-transform 2s ease;
    transition: -webkit-transform 2s ease;
    -o-transition: transform 2s ease;
    transition: transform 2s ease;
    transition: transform 2s ease,-webkit-transform 2s ease;
    -webkit-transform: translateY(2000px) scale(1)!important;
    -ms-transform: translateY(2000px) scale(1)!important;
    transform: translateY(2000px) scale(1)!important
}

.ReviewBase .ReviewFlashcard--middle .ReviewFlashcard__meh {
    -webkit-transform: scale(200)!important;
    -ms-transform: scale(200)!important;
    transform: scale(200)!important
}

.ReviewBase .ReviewFlashcard--middle .ReviewFlashcard__no,.ReviewBase .ReviewFlashcard--middle .ReviewFlashcard__yes {
    display: none
}

.ReviewBase .ReviewFlashcard--show {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.ReviewBase .ReviewFlashcard__front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
}

.ReviewBase .ReviewFlashcard__back {
    visibility: hidden;
    position: absolute;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.ReviewBase .ReviewFlashcard__back,.ReviewBase .ReviewFlashcard__front {
    top: 0;
    width: 240px;
    height: 240px;
    border-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    font-size: 18px;
    cursor: pointer;
    padding: 15px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: visibility .5s ease,-webkit-transform .5s ease,-webkit-box-shadow .3s ease-in-out;
    transition: visibility .5s ease,-webkit-transform .5s ease,-webkit-box-shadow .3s ease-in-out;
    -o-transition: transform .5s ease,visibility .5s ease,box-shadow .3s ease-in-out;
    transition: transform .5s ease,visibility .5s ease,box-shadow .3s ease-in-out;
    transition: transform .5s ease,visibility .5s ease,box-shadow .3s ease-in-out,-webkit-transform .5s ease,-webkit-box-shadow .3s ease-in-out
}

.ReviewBase .ReviewFlashcard__back:hover,.ReviewBase .ReviewFlashcard__front:hover {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.3)
}

.ReviewBase .ReviewFlashcard__back,.ReviewBase .ReviewFlashcard__front {
    word-break: break-all;
    white-space: normal
}

.ReviewBase .ReviewFlashcard--flipped .ReviewFlashcard__front {
    visibility: hidden;
    position: absolute;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg)
}

.ReviewBase .ReviewFlashcard--flipped .ReviewFlashcard__back {
    visibility: visible;
    position: static;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
}

.ReviewBase .ReviewFlashcard__overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background-color: #000;
    opacity: .3;
    border-radius: 8px
}

.ReviewBase .ReviewFlashcard__text {
    z-index: 2
}

.ReviewBase .ReviewFlashcard--hasImage,.ReviewBase .ReviewFlashcard--hasImage a {
    color: #fff
}

.ReviewBase .ReviewFlashcard--hasImage .ReviewFlashcard__overlay {
    display: block
}

.ReviewBase .ReviewFlashcard__sound {
    position: absolute;
    z-index: 2;
    left: 10px;
    bottom: 5px
}

.ReviewBase .ReviewFlashcard__language {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 7px
}

.EquipmentSetup .audio-video-settings {
    border-bottom: 1px solid #efefef
}

.EquipmentSetup .equipment-check-results {
    margin: 20px;
    border: 1px solid #efefef
}

.EquipmentSetup .media-left {
    width: 50px;
    text-align: center;
    display: inline-block;
    float: left
}

.EquipmentSetup .media-left .fa-circle {
    color: #c0392b
}

.EquipmentSetup .media-left.done .fa-circle {
    color: #8ec343
}

.EquipmentSetup .equipment-setup-check-result {
    margin-top: 10px;
    font-size: 15px
}

.EquipmentSetup .equipment-setup-check-result .equipment-setup-check-result-done {
    color: #8ec343
}

.EquipmentSetup .equipment-setup-check-result .equipment-setup-check-result-pending {
    color: #3498db
}

.EquipmentSetup h4 {
    margin-top: 0!important
}

.RoomViewModal {
    position: absolute;
    left: 20%;
    width: 60%;
    height: 80%;
    top: 15px
}

.RoomViewModal .RoomViewModal--Header {
    height: 36px;
    line-height: 36px;
    background-color: #0699cd;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #fff;
    font-size: 12px;
    text-align: center
}

.RoomViewModal .RoomViewModal--Body {
    min-height: 100px;
    width: 100%;
    color: #787c83;
    background-color: #fff;
    text-align: center;
    padding: 10px
}

.RoomViewModal .RoomViewModal--ButtonRow {
    height: 60px;
    width: 100%;
    line-height: 50px;
    background-color: #fff;
    text-align: center;
    vertical-align: middle
}

.RoomViewModal .buttonsContainer {
    display: inline-block
}

.RoomViewModal .RoomViewModal--Footer {
    height: 20px;
    line-height: 20px;
    color: #fff;
    background-color: #0699cd;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px
}

.EnterpriseBase * {
    min-height: 0;
    min-width: 0
}

.EnterpriseBase .Enterprise--icon-circle:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.EnterpriseBase .Enterprise--icon-circle {
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease;
    background-color: #0699cd;
    border-radius: 100%;
    width: 96px;
    height: 96px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    font-size: 48px
}

.EnterpriseBase .EnterpriseBase--section {
    width: 100%;
    background-color: #fff;
    padding-top: 40px;
    padding-bottom: 30px
}

.EnterpriseBase .EnterpriseBase--section h2 {
    font-size: 25px
}

.EnterpriseBase .EnterpriseBase--section-alt {
    width: 100%;
    background: #f2f2f2;
    padding-top: 40px;
    padding-bottom: 30px
}

@media (max-width: 767px) {
    .EnterpriseBase .EnterpriseBase--section-alt {
        padding-top:40px;
        padding-bottom: 40px
    }
}

.EnterpriseBase .EnterpriseBase--section-blue {
    width: 100%;
    background: #0699cd
}

@media (max-width: 767px) {
    .EnterpriseBase .EnterpriseBase--section-blue {
        padding-top:40px;
        padding-bottom: 40px
    }
}

.EnterpriseBase .EnterpriseHowItWorks .EnterpriseHowItWorks--left {
    height: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-right: 60px
}

.EnterpriseBase .EnterpriseHowItWorks .EnterpriseHowItWorks--left h3 {
    font-family: Noto Sans,Open Sans,sans-serif;
    font-weight: 700!important;
    font-size: 20px;
    line-height: 40px;
    margin-bottom: 0
}

.EnterpriseBase .EnterpriseHowItWorks .EnterpriseHowItWorks--left p {
    font-size: 15px;
    margin-bottom: 25px
}

.EnterpriseBase .EnterpriseHowItWorks .EnterpriseHowItWorks--right {
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden
}

.EnterpriseBase .EnterpriseHowItWorks .EnterpriseHowItWorks--full {
    background-size: cover;
    overflow: hidden;
    min-height: 60vw;
    //:100vw}

.EnterpriseBase .EnterpriseCarousel--links {
    margin-bottom: 15px
}

.EnterpriseBase .EnterpriseCarousel--links a {
    margin: 15px;
    font-size: 16px
}

.EnterpriseBase .EnterpriseCarousel--links a.active,.EnterpriseBase .EnterpriseCarousel--links a:hover {
    -webkit-box-shadow: inset 0 -2px 0 0 #0699cd;
    box-shadow: inset 0 -2px 0 0 #0699cd;
    color: #888
}

.EnterpriseBase .btn-xl {
    padding: 10px 20px;
    font-size: 20px
}

.EnterpriseBase .container-wrapper {
    width: 100%;
    background-color: #fff;
    padding-top: 40px;
    padding-bottom: 40px
}

.EnterpriseBase .steps-carousel {
    margin: 0 auto;
    padding: 40px;
    width: 80vw;
    color: #333;
    max-width: 80vw
}

.EnterpriseBase body {
    counter-reset: item
}

.EnterpriseBase ol {
    list-style: none
}

.EnterpriseBase li {
    counter-increment: item;
    margin-bottom: 5px
}

.EnterpriseBase .global-error {
    padding: 15px;
    background-color: #ecb8ba;
    color: #cc3f44;
    text-align: center
}

.EnterpriseBase .about-header {
    background-color: #000;
    position: relative;
    z-index: 1
}

.EnterpriseBase .header-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden
}

.EnterpriseBase .header-container {
    position: relative;
    z-index: 2
}

.EnterpriseBase .home-section-description {
    font-size: 14.25px;
    margin-bottom: 20px
}

.EnterpriseBase .home-section-cta {
    margin-bottom: 40px
}

.EnterpriseBase .link-header {
    top: 5px;
    margin-left: 20px
}

.EnterpriseBase .link-cta {
    font-size: 16px;
    margin-right: 20px
}

.EnterpriseBase .link-section {
    font-size: 14.25px;
    margin-right: 20px
}

.EnterpriseBase .link-underline {
    position: relative;
    color: #fff;
    text-decoration: none
}

.EnterpriseBase .link-underline:hover {
    color: #fff
}

.EnterpriseBase .link-underline:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

.EnterpriseBase .link-underline:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

.EnterpriseBase .link-underline:active,.EnterpriseBase .link-underline:focus {
    color: #fff
}

.EnterpriseBase .link-underline-brand {
    position: relative;
    color: #0699cd;
    text-decoration: none
}

.EnterpriseBase .link-underline-brand:hover {
    color: #0699cd
}

.EnterpriseBase .link-underline-brand:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: #0699cd;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

.EnterpriseBase .link-underline-brand:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

.EnterpriseBase .link-underline-brand:active,.EnterpriseBase .link-underline-brand:focus {
    color: #0699cd
}

.EnterpriseBase #section-header {
    background-color: #000;
    position: relative;
    z-index: 1
}

.EnterpriseBase .text-emphasis {
    font-weight: 700;
    color: #ffc319
}

.EnterpriseBase .background-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden
}

.EnterpriseBase .section-header-content {
    position: relative;
    z-index: 2
}

.EnterpriseBase .navigation {
    margin-top: 20px
}

.EnterpriseBase .navigation-right {
    float: right
}

.EnterpriseBase .header-content {
    position: relative;
    top: 35%;
    text-align: center
}

.EnterpriseBase .flex-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.EnterpriseBase .flex-justify {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.EnterpriseBase .flex-item {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto
}

.EnterpriseBase .flex-centered {
    margin: auto
}

.DashboardHeader {
    color: #fff;
    background: -webkit-gradient(linear,left top,right top,from(#129dfa),color-stop(100%,#3bb85c),to(#dd9611));
    background: -webkit-linear-gradient(left,#129dfa,#67c1fd 100%,#dd9611);
    background: -o-linear-gradient(left,#129dfa,#67c1fd 100%,#dd9611);
    background: linear-gradient(90deg,#129dfa,#67c1fd 100%,#dd9611);
    background-size: cover;
    background-position: 50%;
    position: relative;
    cursor: pointer
}

.DashboardHeader .container {
    position: relative;
    z-index: 2
}

.DashboardHeader .DashboardHeader__waves {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%
}

.DashboardHeader .DashboardHeader__headerUpload {
    position: absolute;
    bottom: 2px;
    right: 5px;
    padding: 2px 5px;
    border-radius: 6px
}

.DashboardHeader .DashboardHeader__headerUpload img {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.DashboardHeader .DashboardHeader__headerUpload .DashboardHeader__headerUploadText {
    opacity: 0
}

.DashboardHeader .DashboardHeader__headerUpload:hover {
    border: 2px solid #fff
}

.DashboardHeader .DashboardHeader__headerUpload:hover img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.DashboardHeader .DashboardHeader__headerUpload:hover .DashboardHeader__headerUploadText {
    opacity: 1
}

.DashboardHeader h1 {
    color: #fff
}

.DashboardHeader .DashboardHeader__headerInner {
    min-height: 150px
}

.DashboardHeader .DashboardHeader__pic {
    position: relative;
    border-radius: 6px;
    background-color: #fff;
    border: 3px solid #efefef;
    overflow: hidden;
    cursor: pointer
}

.DashboardHeader .DashboardHeader__pic:hover .DashboardHeader__picOverlay {
    display: block
}

.DashboardHeader .DashboardHeader__pic .DashboardHeader__picOverlay {
    display: none;
    text-align: center;
    padding-top: 35px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    background-color: rgba(0,0,0,.8)
}

.DashboardHeader .DashboardHeader__pic img {
    width: 90px;
    height: 90px
}

.LanguageWeeklyProgress {
    border-radius: 50%
}

.LanguageWeeklyProgress img {
    border-radius: 50%;
    -webkit-box-shadow: rgba(0,0,0,.1) 0 2px 2px 1px;
    box-shadow: 0 2px 2px 1px rgba(0,0,0,.1)
}

.CircularProgressbar--weekly .CircularProgressbar-path {
    stroke: #ccc!important
}

.CircularProgressbar--weeklyProgress .CircularProgressbar-trail {
    stroke: none!important
}

.CircularProgressbar--weeklyDone .CircularProgressbar-path {
    stroke: #34d058!important
}

.InfoIconBubble {
    cursor: help
}

.InfoIconBubble:hover {
    color: #0699cd
}

.CompleteList .panel-body {
    padding: 0
}

.CompleteList .CompleteList--children,.CompleteList ul {
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0
}

.CompleteList .CompleteList--header {
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 18px
}

.CompleteList .CompleteList--body {
    padding: 10px
}

.CompleteList .CompleteList--progress {
    height: 5px;
    margin-top: 5px
}

.CompleteList .CompleteList--progress .CompleteList--inner {
    width: 100%;
    height: 5px;
    border-radius: 6px;
    background-color: #efefef;
    position: relative;
    z-index: 1
}

.CompleteList .CompleteList--progress .CompleteList--inner div {
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c);
    border-radius: 6px;
    height: 5px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

@media (max-width: 767px) {
    .MyTeacherListingBase .MyTeacherListingFilter .filters {
        -webkit-flex-direction:column;
        -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .MyTeacherListingBase .MyTeacherListingFilter .filters div {
        margin-right: 0!important;
        margin-bottom: 5px;
        width: 100%
    }
}

.MyTeacherListingBase .MyTeacherListingItem {
    cursor: pointer
}

@media (max-width: 767px) {
    .MyTeacherListingBase .MyTeacherListingItem .MyTeacherListingItem__book {
        margin-top:5px
    }
}

.StudentListing {
    min-height: 80vh
}

.StudentListing .StudentListing--rate .fa {
    cursor: pointer
}

.StudentListing .StudentListing--rate .fa:hover {
    color: #95a5a6
}

.StudentListing .StudentListing--rate.saved .form-control {
    border: 1px solid #2ecc71
}

.StudentListing .StudentListing--rate.error .form-control {
    border: 1px solid #e74c3c
}

.StudentListing .StudentListing--rate .form-control {
    display: inline-block;
    width: 60px;
    padding: 4px;
    font-weight: 700;
    text-align: center
}

.CommunityBase .CommunityGroup .CommunityGroup--EmptySpot,.CommunityBase .CommunityGroup .CommunityGroup--Googler {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #efefef
}

.CommunityHub .fa-caret-down {
    font-size: 15px
}

.CommunityHub .CommunityHub__view {
    min-height: 750px
}

.CommunityHub .CommunityHub__selector {
    overflow-y: scroll!important;
    max-height: 350px;
    min-width: 250px
}

.CommunityHub .CommunityHub__selector h3 {
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px
}

.CommunityHub .CommunityHub__selector li {
    font-size: 18px
}

.CommunityHub .CommunityHub__selector li a {
    padding: 5px 10px
}

.CommunityHubs .LanguageCard__Container {
    margin-right: 15px;
    margin-bottom: 15px
}

.GameMetaImage {
    border-radius: 4px
}

.DiscussionBase .DiscussionBase__top {
    border-bottom: 1px solid #d8d8d8
}

.Discussion {
    margin-bottom: 40px
}

.Discussion .Discussion__title h1 {
    color: #4f5457;
    letter-spacing: 1.67px;
    font-size: 24px
}

.Discussion .Discussion__info .Discussion__author-picture {
    margin-right: 5px
}

.Discussion .Discussion__info .Discussion__author-info,.Discussion .Discussion__info .Discussion__author-picture {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.Discussion .Discussion__info .Discussion__author-info .Discussion__author-info-name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight: 700
}

.Discussion .Discussion__info .Discussion__author-info .Discussion--created {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #b5b5b5;
    margin-top: -5px;
    font-size: 10px
}

.Discussion .Discussion__link {
    word-break: break-all;
    font-size: 15px
}

.Discussion .Discussion__content {
    word-break: break-word;
    margin-top: 10px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.Discussion .Discussion__comment-section {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.CreateEditDiscussion .CreateEditDiscussion__Panel {
    margin: 10px
}

.CreateEditDiscussion .CreateEditDiscussion__Panel .CreateEditDiscussion__Link,.CreateEditDiscussion .CreateEditDiscussion__Panel .CreateEditDiscussion__Question {
    margin-bottom: 10px
}

.CreateEditDiscussion .CreateEditDiscussion__Panel .CreateEditDiscussion--Cancel {
    background-color: #fff
}

.CreateEditDiscussion .CreateEditDiscussion__Panel .CreateEditDiscussion--Cancel:hover {
    background-color: #0699cd
}

.card-profile {
    border-radius: 8px;
    background-color: #fff
}

.card-profile .profile-picture {
    width: 90px;
    height: 90px;
    margin-top: -45px;
    border: 4px solid #fff
}

.card-profile__body {
    padding: 15px 15px 0;
    text-align: center
}

.card-profile__footer {
    padding: 15px
}

.card-profile__name {
    font-size: 21px;
    font-weight: 700;
    line-height: 21px;
    margin-bottom: 4px
}

.card-profile__languages-language {
    padding: 0 2px 0 0;
    text-align: right;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase
}

.card-profile__languages-proficiency {
    padding: 0 0 0 2px;
    text-align: left
}

.card-profile__languages-proficiency>object {
    display: inline;
    position: relative;
    top: -2px
}

.card-profile__languages-proficiency>img {
    display: inline;
    position: relative;
    top: -5px
}

.City__trustpilot {
    margin-top: 60px
}

.DemoLessonCheckoutError {
    max-width: 1120px;
    max-width: 70rem;
    height: 384px;
    height: 24rem;
    margin-top: 80px;
    margin-top: 5rem
}

.DemoLessonCheckoutError .DemoLessonCheckoutError--Header {
    font-size: 48px;
    font-size: 3rem;
    color: #787b83;
    margin-top: 0
}

.DemoLessonCheckoutError .DemoLessonCheckoutError--ButtonRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.CheckoutBase .StepCheckmark {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.CheckoutBase .CheckoutSummary--Row {
    padding: 5px 0
}

.CheckoutBase .CheckoutSummary--RowGroup {
    border-top: 2px solid #e6e6e6
}

.CheckoutBase hr {
    margin-top: 20px;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #efefef
}

@media (min-width: 970px) {
    .CheckoutBase .CheckoutBase--NavRight {
        //:73px
    }
}

.CheckoutBase .panel {
    overflow: hidden
}

.CheckoutBase .CheckoutSummary {
    margin-top: 0
}

.CheckoutBase .CheckoutSummary .CheckoutSummary--Basic {
    padding: 15px;
    text-align: center
}

.CheckoutBase .CheckoutSummary .CheckoutSummary--Coupon {
    font-size: 12px
}

.CheckoutBase .GiftCheckoutSummary--Logo {
    border-radius: 50%;
    padding: 5px;
    width: 150px;
    height: 150px;
    border: 2px solid #0699cd
}

.CheckoutBase .GiftCheckoutSummary--Logo svg {
    width: 130px
}

.CheckoutBase .CheckoutBase--PanelList {
    margin-bottom: 0;
    overflow: hidden
}

.CheckoutBase .CheckoutBase--PanelList li {
    padding: 10px 15px;
    border-top: 1px solid #efefef
}

.CheckoutBase .CheckoutBase--PanelList li.active,.CheckoutBase .CheckoutBase--PanelList li:hover {
    background-color: #e3f3fe
}

.CheckoutBase .CheckoutBase--PanelList li label {
    margin: 0
}

.CheckoutBase .CheckoutBase--PanelList li .Radio--Label,.CheckoutBase .PaymentPanel .PaymentBadge+span {
    margin-left: 5px
}

.DisabledSessionItem {
    margin-bottom: 8px
}

.DisabledSessionItem .DisabledSessionItem--StateBar {
    width: 12.8px;
    width: .8rem;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px
}

@media (max-width: 768px) {
    .DisabledSessionItem .DisabledSessionItem-TopRow {
        margin-bottom:10px
    }
}

@media (min-width: 768px) {
    .DisabledSessionItem .DisabledSessionItem-TopRow {
        -webkit-box-flex:1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

.DisabledSessionItem .DisabledSessionItem-LessonPlan {
    margin: 10px 0
}

.Analytics__tooltip {
    background-color: #000;
    border-radius: 4px;
    padding: 10px;
    color: #fff
}

.Analytics__tooltip label {
    color: #fff
}

.Analytics__tooltip .Analytics__tooltip__divider {
    width: 100%;
    border-top: 1px solid #ccc
}

.Analytics__tooltip .Analytics__tooltip--legend {
    width: 5px;
    height: 30px;
    margin-right: 5px
}

.Analytics__chart .recharts-legend-item-text {
    font-size: 12px;
    font-weight: 700
}

.PerformanceItem {
    min-height: 175px
}

.MessageTemplatesBase .MessageTemplatesBase-NewButton {
    border-radius: 8px;
    border: 1px dashed #bbb
}

.MessageTemplatesBase .MessageTemplatesBase-NewButton:hover {
    border-color: #888
}

.MessageTemplatesBase .MessageTemplatesBase-NewButton {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 15px;
    cursor: pointer
}

.MessageTemplatesBase .MessageTemplate .panel-body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.MessageTemplatesBase .MessageTemplate .panel-body .MessageTemplate-right {
    position: relative;
    padding-left: 5px
}

.MessageTemplatesBase .MessageTemplate .panel-body .MessageTemplate-right .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    margin-top: 4px
}

.TeacherWeeklyCalendarWrapper .TeacherWeeklyCalendarWrapper--Inner {
    height: auto;
    overflow-y: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-width: 200px
}

.TeacherWeeklyCalendarWrapper .TeacherWeeklyCalendarWrapper--Left {
    border-right: 1px solid #e6e6e6;
    min-height: 95vh;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto
}

.TeacherWeeklyCalendarWrapper .Calendar--Legend {
    margin-right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 4px
}

.TeacherWeeklyCalendarWrapper .Calendar--Legends>div {
    margin-right: 5px
}

.TeacherWeeklyCalendarWrapper .Calendar--Available {
    background-color: #ddf4d9
}

.TeacherWeeklyCalendarWrapper .Calendar--Reserved {
    background-color: #0699cd!important
}

.TeacherWeeklyCalendarWrapper .Calendar--Unavailable {
    background-color: #fff;
    border: 1px solid #979797
}

.TeacherWeeklyCalendarWrapper .Calendar--UnavailableThisWeek {
    background-color: #e7e7e7;
    border: 1px solid #979797;
    background-image: -webkit-repeating-linear-gradient(45deg,transparent,transparent 5px,#fff 0,#fff 10px);
    background-image: -o-repeating-linear-gradient(45deg,transparent,transparent 5px,#fff 0,#fff 10px);
    background-image: repeating-linear-gradient(45deg,transparent,transparent 5px,#fff 0,#fff 10px)
}

.TeacherWeeklyCalendarWrapper .Calendar--ShortTerm {
    background-color: #fdcc44
}

.TeacherWeeklyCalendar .Calendar--table--row:hover .CalendarCell {
    background-color: #f8f8f8
}

.TeacherWeeklyCalendar .CalendarCell {
    height: 25px;
    border-bottom: 1px dotted #ccc;
    border-right: 1px solid #efefef;
    cursor: pointer
}

.TeacherWeeklyCalendar .CalendarCell.CalendarCell--available {
    background-color: #3bb85c!important
}

.TeacherWeeklyCalendar .CalendarCell.CalendarCell--shortTerm {
    background-color: #fdcc44!important
}

.TeacherWeeklyCalendar .CalendarCell.CalendarCell--booked,.TeacherWeeklyCalendar .CalendarCell.CalendarCell--selected {
    background-color: #0699cd!important
}

.TeacherWeeklyCalendar .CalendarCell.CalendarCell--unavailable {
    background-color: #e7e7e7!important;
    background-image: -webkit-repeating-linear-gradient(45deg,transparent,transparent 5px,#fff 0,#fff 10px);
    background-image: -o-repeating-linear-gradient(45deg,transparent,transparent 5px,#fff 0,#fff 10px);
    background-image: repeating-linear-gradient(45deg,transparent,transparent 5px,#fff 0,#fff 10px)
}

.TeacherWeeklyCalendar .CalendarCell.CalendarCell--past {
    background-color: #f8f8f8!important
}

.TeacherWeeklyCalendar.TeacherWeeklyCalendar--AddMode .DragSelectItem--selected {
    background-color: #3bb85c!important
}

.TeacherWeeklyCalendar.TeacherWeeklyCalendar--RemoveMode .DragSelectItem--selected.CalendarCell--available {
    background-color: #efefef!important
}

.TeacherWeeklyCalendar .TeacherWeeklyCalendar--Saved {
    opacity: 0;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

.TeacherWeeklyCalendar .TeacherWeeklyCalendar--Saved.TeacherWeeklyCalendar--Saved--show {
    opacity: 1
}

.TeacherWeeklyCalendar .CustomRadio {
    display: inline-block
}

.SessionMiniListing {
    min-height: 90vh;
    height: 100%;
    min-width: 200px;
    border-right: 1px solid #e6e6e6
}

.SessionMiniListing .SessionMiniInfo {
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
    min-height: 120px
}

.PackageEditor .PackageEditor--EmptyPackage {
    border: 3px dashed #efefef;
    height: 100px;
    border-radius: 8px;
    margin-bottom: 3px;
    cursor: pointer;
    font-size: 16px
}

.PackageEditor .PackageEditor--EmptyPackage:hover {
    border: 3px dashed #888
}

.PackageEditor .PackageEditor--EmptyPackage:active {
    background-color: #ccc;
    color: #888
}

.PackageEditor .PackageEditor--LessonPlanOverlay {
    top: 0;
    left: 0;
    position: absolute;
    background-color: #000;
    background-color: rgba(0,0,0,.8);
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 16px;
    z-index: 2;
    cursor: pointer;
    border-radius: 8px
}

.Attendance {
    height: 100%
}

.Attendance .Attendance__field {
    font-size: 22.4px;
    font-size: 1.4rem
}

.Attendance .Attendance__field_small_text {
    font-size: 19.2px;
    font-size: 1.2rem
}

.Attendance .Attendance__student_name {
    margin-left: 16px;
    margin-left: 1rem
}

.Attendance .Attendance__contest_action {
    color: #0699cd;
    cursor: pointer
}

.Attendance .Attendance__missed {
    color: red;
    font-weight: 600
}

.Attendance .Attendance__attended {
    color: #169816;
    font-weight: 600
}

.Attendance .Attendance__contestExplanation,.Attendance .Attendance__contestReasons {
    margin-bottom: 32px;
    margin-bottom: 2rem
}

.Attendance .Attendance__stat_box_row {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 32px;
    padding-top: 2rem;
    padding-bottom: 48px;
    padding-bottom: 3rem
}

.Attendance .Attendance__stat_box {
    border: 1px solid #808284;
    border-radius: 1rem;
    text-align: center;
    margin: 0 40px;
    margin: 0 2.5rem;
    padding: 24px 64px;
    padding: 1.5rem 4rem;
    font-size: 32px;
    font-size: 2rem;
    color: #808284
}

.Attendance .Attendance__no_records_found {
    padding-left: 6.4px;
    padding-left: .4rem
}

.Attendance .panel-body,.Attendance .panel-default {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.Attendance .VirtualTable {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 720px;
    min-height: 45rem
}

.ButtonToolbar.ButtonToolbar--horizontal .btn {
    margin-right: 8px;
    margin-right: .5rem
}

.ButtonToolbar.ButtonToolbar--vertical .btn {
    margin-bottom: 8px;
    margin-bottom: .5rem
}

@media only screen and (max-width: 768px) {
    .ButtonToolbar.ButtonToolbar--responsive-flip {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .ButtonToolbar.ButtonToolbar--responsive-flip .btn {
        margin-right: 0;
        margin-bottom: 8px;
        margin-bottom: .5rem;
        margin-top: 0
    }
}

.IconButton.IconButton--noBlock.IconButton--left i {
    margin-right: 4px
}

.IconButton.IconButton--noBlock.IconButton--right i {
    margin-left: 4px
}

.btn-bold {
    font-weight: 700
}

@media only screen and (max-width: 768px) {
    .btn-block-mobile {
        display:block;
        width: 100%
    }
}

.btm-sm {
    padding: 6px 9px!important
}

.btn-rounder {
    border-radius: 40px!important
}

.btn-rounder.btn-sm {
    border-radius: 20px!important
}

.btn-rounder.btn-large {
    border-radius: 60px!important
}

.btn {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1);
    font-size: 22.8px;
    font-size: 1.425rem;
    letter-spacing: -.448px;
    letter-spacing: -.028rem;
    font-weight: 700;
    border-radius: .4rem;
    padding: 12.8px 19.2px;
    padding: .8rem 1.2rem
}

.btn.btn-tall {
    padding: 19.2px;
    padding: 1.2rem
}

.btn-sm {
    font-size: 18.24px;
    font-size: 1.14rem;
    letter-spacing: -.352px;
    letter-spacing: -.022rem;
    font-weight: 700;
    border-radius: .3rem;
    padding: 9.6px 14.4px;
    padding: .6rem .9rem;
    min-width: 38.4px;
    min-width: 2.4rem
}

.btn-sm.btn-tall {
    padding: 14.4px;
    padding: .9rem
}

.btn-xs {
    font-size: 14.592px;
    font-size: .912rem;
    letter-spacing: -.288px;
    letter-spacing: -.018rem;
    font-weight: 700;
    border-radius: .2rem;
    padding: 6.4px 9.6px;
    padding: .4rem .6rem;
    min-width: 28.8px;
    min-width: 1.8rem
}

.btn-xs.btn-tall {
    padding: 9.6px;
    padding: .6rem
}

.btn-lg {
    font-size: 28.496px;
    font-size: 1.781rem;
    letter-spacing: -.56px;
    letter-spacing: -.035rem;
    font-weight: 700;
    border-radius: .6rem;
    padding: 19.2px 28.8px;
    padding: 1.2rem 1.8rem
}

.btn-lg.btn-tall {
    padding: 28.8px;
    padding: 1.8rem
}

.btn:focus {
    outline: none
}

.btn:hover:active {
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn:hover {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    -webkit-transition: -webkit-box-shadow .1s;
    transition: -webkit-box-shadow .1s;
    -o-transition: box-shadow .1s;
    transition: box-shadow .1s;
    transition: box-shadow .1s,-webkit-box-shadow .1s
}

.btn-white {
    background-color: #fff;
    border-color: #fff;
    color: #0699cd
}

.btn-white:hover {
    border: 1px solid #fff
}

.btn-white:active,.btn-white:hover {
    color: #fff;
    background-color: #0699cd
}

.btn-white-transparentold {
    background-color: #fff;
    border-color: #fff;
    color: #0699cd
}

.btn-white-transparentold:hover {
    border: 1px solid #fff
}

.btn-white-transparentold:active,.btn-white-transparentold:hover {
    color: #fff;
    background-color: transparent
}

.btn-white-transparent:active,.btn-white-transparent:hover {
    background-color: transparent!important;
    color: #fff!important;
    border-color: #fff!important
}

.btn-white-transparent,.btn-white-transparent:focus {
    background-color: #fff;
    color: #0699cd
}

.btn-gray-transparent:active,.btn-gray-transparent:hover {
    background-color: transparent!important;
    color: #fff!important;
    border-color: #4f5457!important
}

.btn-gray-transparent,.btn-gray-transparent:focus {
    background-color: #fff;
    color: #0699cd
}

.btn-gray-transparent {
    border: 1px solid #4f5457
}

.btn-gray-outline-focus {
    background-color: transparent
}

.btn-gray-outline-focus:active,.btn-gray-outline-focus:hover {
    background-color: #fff!important;
    color: #0699cd!important
}

.btn-gray-outline-focus:focus {
    background-color: transparent
}

.btn-gray-outline-focus,.btn-gray-outline-focus:focus {
    color: #4f5457;
    border-color: #4f5457
}

.btn-white-outline-focus {
    background-color: transparent
}

.btn-white-outline-focus:active,.btn-white-outline-focus:hover {
    background-color: #fff!important;
    color: #0699cd!important
}

.btn-white-outline-focus:focus {
    background-color: transparent;
    color: #fff;
    border-color: #fff
}

.btn-white-outline-focus {
    border-color: #fff;
    color: #fff
}

.btn-blue-outline-focus {
    background-color: transparent
}

.btn-blue-outline-focus:active,.btn-blue-outline-focus:focus,.btn-blue-outline-focus:hover {
    background-color: #fff!important;
    color: #0699cd!important
}

.btn-blue-outline-focus {
    border-color: #0699cd;
    color: #fff
}
.btn_huatutor--red{
    background-color:#ED1C24; /*红色 正在进行*/
}
.btn_huatutor--green{
    background-color:#009933; /*绿色 正在进行*/
}
.btn_huatutor--brown{
    background-color:#b76669; /*棕色 正在进行*/
}
.btn_huatutor--darkgreen{
    background-color:#3a7b5c; /*棕色 正在进行*/
}

.btn_huatutor--blue{
    background-color:#0699CD; /*正常蓝 预定 即将上课 */
}

.btn_huatutor--yellow{
    background-color:#FFC90E; /*黄色  取消，过期*/
}
.btn_huatutor--orange{
    background-color:#FF7F27; /*橘黄 待评论*/
}
.btn_huatutor--gray{
    background-color:#f7f7f7; /*灰色 完成*/
}
.btn_huatutor--dark{
    background-color:#9c9c9c; /*灰色 完成*/
}
.hua_text--dark{
    color:#9c9c9c; /*灰色 完成*/
}
.hua_text--gray{
    color:#f7f7f7; /*灰色 完成*/
}
.hua_text--red{
    color:#ED1C24; /*红色 正在进行*/
}
.hua_text--darkgreen{
    color:#3a7b5c; /*深绿色 正在进行*/
}
.hua_text--brown{
    color:#b76669; /*棕色 正在进行*/
}
.hua_text--blue{
    color:#0699CD; /*正常蓝 预定 即将上课 完成*/
}
.hua_text--green{
    color:#009933; /*绿色 预定 即将上课 完成*/
}
.hua_text--yellow{
    color:#FFC90E; /*黄色  取消，过期*/
}
.hua_text--orange{
    color:#FF7F27; /*橘黄 待评论*/
}
.btn-default.btn-outline {
    background-color: transparent;
    border-color: #0699cd;
    color: #0699cd
}
.btn-outline {
    border-width: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-right: 5px;
}
.btn-default.btn-outline:active,.btn-default.btn-outline:hover {
    color: #fff;
    background-color: #0699cd
}

.btn-success.btn-outline {
    background-color: transparent;
    border-color: #36ca36;
    color: #36ca36
}

.btn-success.btn-outline:active,.btn-success.btn-outline:hover {
    color: #fff;
    background-color: #36ca36
}

.btn-danger.btn-outline {
    background-color: transparent;
    border-color: #fd4444;
    color: #fd4444
}

.btn-danger.btn-outline:active,.btn-danger.btn-outline:hover {
    color: #fff;
    background-color: #fd4444
}

.btn-primary.btn-outline {
    background-color: transparent;
    border-color: #0699cd;
    color: #0699cd
}

.btn-primary.btn-outline:active,.btn-primary.btn-outline:hover {
    color: #fff;
    background-color: #0699cd
}

.btn-warning.btn-outline {
    background-color: transparent;
    border-color: #ffbd04;
    color: #ffbd04
}

.btn-warning.btn-outline:active,.btn-warning.btn-outline:hover {
    color: #fff;
    background-color: #ffbd04
}

.btn-shadow {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)
}

.btn-link:hover {
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-link--inline {
    font-weight: 400;
    padding: 0
}

.btn-huatutor-gradient {
    background-image: -webkit-linear-gradient(346deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(346deg,#0699cd,#3bb85c);
    background-image: linear-gradient(104deg,#0699cd,#3bb85c);
    color: #fff
}

.btn-huatutor-gradient:hover {
    -webkit-box-shadow: 0 2px 2px 0 hsla(0,0%,100%,.2);
    box-shadow: 0 2px 2px 0 hsla(0,0%,100%,.2)
}

.btn-social-fb {
    background-color: #3b5998
}

.btn-social-fb:hover {
    background-color: #4e69a2
}

.btn-social-fb:active,.btn-social-fb:focus {
    background-color: #355088
}

.btn-social-fb {
    color: #fff
}

.btn-white-outline {
    background-color: transparent
}

.btn-white-outline:hover {
    background-color: #fff;
    color: #0699cd
}

.btn-white-outline:active,.btn-white-outline:focus {
    background-color: red;
    color: #0699cd
}

.btn-white-outline {
    border-color: #fff;
    color: #fff
}

.btn-gray {
    background-color: #828585
}

.btn-gray:active {
    background-color: #e6e6e6;
    color: #fff
}

.btn-gray:focus,.btn-gray:hover {
    background-color: #828585;
    color: #fff
}

.btn-gray {
    color: #fff
}

.btn-light-gray {
    background-color: #fff;
    border: .75px solid #d8d8d8
}

.btn-light-gray:active,.btn-light-gray:focus,.btn-light-gray:hover {
    background-color: #e3f3fe;
    color: #4f5457
}

.btn-light-gray {
    color: #4f5457
}

.btn-social-google {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    color: #4f5457
}

.btn-social-google:active {
    background-color: #e6e6e6;
    color: #4f5457
}

.btn-social-google:focus,.btn-social-google:hover {
    background-color: #fff;
    color: #4f5457
}

.btn-landing-cta {
    background-color: #0699cd;
    color: #fff;
    border-radius: 4px
}

.btn-landing-cta:active,.btn-landing-cta:focus,.btn-landing-cta:hover {
    color: #0699cd;
    background-color: #fff!important
}

.btn-white-landing-cta {
    background-color: #fff;
    color: #0699cd;
    border-radius: 4px
}

.btn-white-landing-cta:active,.btn-white-landing-cta:focus,.btn-white-landing-cta:hover {
    color: #0699cd;
    background-color: #fff!important
}

.btn-landing-cta-outline {
    background-color: transparent;
    color: #0699cd;
    border-radius: 4px;
    border: 2px solid #0699cd
}

.btn-landing-cta-outline:active,.btn-landing-cta-outline:focus,.btn-landing-cta-outline:hover {
    color: #fff;
    background-color: #0699cd!important
}

.btn-landing-cta-outline-white {
    background-color: transparent;
    color: #fff;
    border-radius: 4px;
    border: 2px solid #fff
}

.btn-landing-cta-outline-white:active,.btn-landing-cta-outline-white:focus,.btn-landing-cta-outline-white:hover {
    color: #0699cd;
    background-color: #fff!important
}

.btn-transparent {
    background-color: #fff;
    background-color: hsla(0,0%,100%,.1);
    color: #fff
}

.btn-round {
    border-radius: 50%
}

.btn .disabled {
    opacity: .5
}

.btn-facebook {
    background-color: #3a5795!important;
    color: #fff
}

.btn-group-sm>.btn {
    padding: 14.4px 9.6px;
    padding: .9rem .6rem
}

.btn-word-wrap {
    white-space: normal!important;
    word-wrap: break-word
}
.ToggleButtonGroup .btn{padding-top:5px;padding-bottom:5px;border:2px solid #0699cd;background-color:#fff;color:#0699cd!important}
.ToggleButtonGroup .btn.active,
.ToggleButtonGroup .btn.focus{color:#fff!important;-webkit-box-shadow:none;box-shadow:none;background-color:#0699cd}
/*.ToggleButtonGroup .btn-sm{padding-top:5px;padding-bottom:5px;border:2px solid #0699cd}
*/
.ToggleButtonGroup .btn-sm {
    padding: 6px 9px!important;
    border: 2px solid #0699cd;
    background-color: #fff;
    color: #0699cd
}

.ToggleButtonGroup .btn-sm.active,.ToggleButtonGroup .btn-sm.focus {
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #0699cd
}

.CookieConsentBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0699cd;
    color: #fff;
    z-index: 2
}

.PanelAnnouncement {
    width: 300px
}

.AnnouncementCenter .Announcement {
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175)!important;
    box-shadow: 0 6px 12px rgba(0,0,0,.175)!important;
    border: 1px solid #c2c2c2
}

body.hide-header #header,body.no-header #header {
    display: none
}

body.overflow-hidden {
    overflow: hidden
}

body.hide-scroll {
    overflow: hidden;
    width: 100%;
    position: fixed;
    height: 100%
}

#header .text-emphasis {
    font-weight: 700;
    color: #ffc319
}

#header .text-emphasis.beta {
    color: #0699cd
}

#header .link-header {
    top: 5px;
    margin-left: 20px
}

#header .link-cta {
    font-size: 16px;
    margin-right: 20px
}

#header .link-section {
    font-size: 14.25px;
    margin-right: 20px
}

#header .link-underline {
    position: relative;
    color: #fff;
    text-decoration: none
}

#header .link-underline:hover {
    color: #fff
}

#header .link-underline:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

#header .link-underline:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

#header .link-underline:active,#header .link-underline:focus {
    color: #fff
}

#header .link-underline-brand {
    position: relative;
    color: #0699cd;
    text-decoration: none
}

#header .link-underline-brand:hover {
    color: #0699cd
}

#header .link-underline-brand:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: #0699cd;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

#header .link-underline-brand:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

#header .link-underline-brand:active,#header .link-underline-brand:focus {
    color: #0699cd
}

#header.homepage,#header.landing,#header.room {
    position: relative;
    width: 100%
}

#header {
    z-index: 10
}

#header .link-reset {
    color: inherit
}

#header .link-reset:active,#header .link-reset:hover {
    color: inherit;
    outline: none;
    text-decoration: none
}

#header .big-icon {
    font-size: 18px
}

#header .cog .caret {
    display: none
}

#header .caret {
    margin-left: 5px
}

#header .nav-item {
    float: left;
    margin-top: 8px;
    margin-right: 12px;
    margin-left: 12px
}

#header .brand-logo {
    padding: 0;
    margin-top: -3px;
    margin-right: 15px;
    width: 100px
}

#header .toggle-hamburger {
    position: absolute;
    left: 0;
    top: 8px
}

#header .medium-right-margin {
    margin-right: 20px
}

#header .large-right-margin {
    margin-right: 50px
}

#header .logo-retina {
    width: 67px;
    height: 27px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(https://cdn.huatutor.com/2108138772139bd90300f7b5b0d3716d9c0152a5/img/logos/logo.png)
}

@media only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:2dppx),only screen and (min-resolution:192dpi) {
    #header .logo-retina {
        background-image:url(https://cdn.huatutor.com/2108138772139bd90300f7b5b0d3716d9c0152a5/img/logos/logo@2x.png);
        background-size: 87px 37px
    }
}

#header .mobile-header img {
    margin-top: -3px
}

#header.homepage .mobile-header {
    background-color: transparent;
    border-bottom: 0
}

@media (min-width: 1440px) {
    .locale-direction-right #header.landing {
        right:calc(50% - 720px)
    }
}

#SiteLanguage {
    color: #fff;
    border: none
}

#SiteLanguage,.hamburger {
    background-color: transparent
}

.hamburger {
    padding: 15px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition-property: opacity,-webkit-filter;
    transition-property: opacity,-webkit-filter;
    -o-transition-property: opacity,filter;
    transition-property: opacity,filter;
    transition-property: opacity,filter,-webkit-filter;
    -webkit-transition-duration: .15s;
    -o-transition-duration: .15s;
    transition-duration: .15s;
    -webkit-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    border: 0;
    margin: 0;
    overflow: visible
}

.hamburger:hover {
    opacity: .7
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px
}

.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    -webkit-transition-duration: .15s;
    -o-transition-duration: .15s;
    transition-duration: .15s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease
}

.hamburger-inner:after,.hamburger-inner:before {
    content: "";
    display: block
}

.hamburger-inner:before {
    top: -10px
}

.hamburger-inner:after {
    bottom: -10px
}

.hamburger--squeeze .hamburger-inner {
    -webkit-transition-duration: 75ms;
    -o-transition-duration: 75ms;
    transition-duration: 75ms;
    -webkit-transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    -o-transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-timing-function: cubic-bezier(.55,.055,.675,.19)
}

.hamburger--squeeze .hamburger-inner:before {
    -webkit-transition: top 75ms ease .12s,opacity 75ms ease;
    -o-transition: top 75ms .12s ease,opacity 75ms ease;
    transition: top 75ms ease .12s,opacity 75ms ease
}

.hamburger--squeeze .hamburger-inner:after {
    -webkit-transition: bottom 75ms ease .12s,-webkit-transform 75ms cubic-bezier(.55,.055,.675,.19);
    transition: bottom 75ms ease .12s,-webkit-transform 75ms cubic-bezier(.55,.055,.675,.19);
    -o-transition: bottom 75ms .12s ease,transform 75ms cubic-bezier(.55,.055,.675,.19);
    transition: bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19);
    transition: bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19),-webkit-transform 75ms cubic-bezier(.55,.055,.675,.19)
}

.hamburger--squeeze.is-active .hamburger-inner {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition-delay: .12s;
    -o-transition-delay: .12s;
    transition-delay: .12s;
    -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
    -o-transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transition-timing-function: cubic-bezier(.215,.61,.355,1)
}

.hamburger--squeeze.is-active .hamburger-inner:before {
    top: 0;
    opacity: 0;
    -webkit-transition: top 75ms ease,opacity 75ms ease .12s;
    -o-transition: top 75ms ease,opacity 75ms .12s ease;
    transition: top 75ms ease,opacity 75ms ease .12s
}

.hamburger--squeeze.is-active .hamburger-inner:after {
    bottom: 0;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: bottom 75ms ease,-webkit-transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
    transition: bottom 75ms ease,-webkit-transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
    -o-transition: bottom 75ms ease,transform 75ms .12s cubic-bezier(.215,.61,.355,1);
    transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
    transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s,-webkit-transform 75ms cubic-bezier(.215,.61,.355,1) .12s
}

.container-wide {
    margin-left: auto;
    margin-right: auto
}

@media (min-width: 700px) {
    .container-wide {
        max-width:768px
    }
}

@media (min-width: 1000px) {
    .container-wide {
        max-width:1440px
    }
}

.LandingHeader__bar {
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c);
    width: 100%;
    height: 4px
}

.LandingHeader--lite .LandingHeader--hide-lite {
    display: none
}

.Header--push .LandingHeader--not-snapped {
    margin-top: 50px
}

.LandingHeader {
    position: relative;
    will-change: transform;
    width: 100%;
    z-index: 100;
    border-bottom: 1px solid #d8d8d8;
    background: #fff
}

.LandingHeader .LandingHeader__logo {
    -webkit-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

.LandingHeader .LandingHeader__logo:hover {
    opacity: .7;
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95)
}

.LandingHeader .LandingHeader-Hamburger:before {
    background-color: transparent
}

.LandingHeader.LandingHeader--inverted-colors .LandingHeader--Nav .LandingHeader__signup {
    width: 100%;
    background-color: #fff;
    margin-top: 30px;
    text-transform: uppercase
}

.LandingHeader.LandingHeader--inverted-colors .LandingHeader--Nav .LandingHeader__signup a {
    color: #f57b0b;
    font-size: 16px
}

.LandingHeader.LandingHeader--inverted-colors .hamburger-inner,.LandingHeader.LandingHeader--inverted-colors .hamburger-inner:after,.LandingHeader.LandingHeader--inverted-colors .hamburger-inner:before {
    background-color: #fff
}

.LandingHeader.LandingHeader--inverted-colors .LandingHeader--Nav>li>a,.LandingHeader.LandingHeader--inverted-colors .LandingHeader-HamburgerIcon {
    color: #fff
}

.LandingHeader.LandingHeader--inverted-colors .LandingHeader--Nav>li>a:before {
    background-color: #fff
}

.LandingHeader .LandingHeader-Hamburger a:before {
    visibility: hidden!important
}

.LandingHeader .LandingHeader-HamburgerIcon {
    background: transparent;
    border: 0
}

.LandingHeader .LandingHeader-HamburgerIcon:hover:before {
    visibility: hidden!important
}

.LandingHeader.LandingHeader--hamburger-open {
    position: fixed;
    background-image: url(/static/img/index/bg-waves.svg);
    background-size: cover;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: background .4s cubic-bezier(.25,.46,.45,.94);
    -o-transition: background .4s cubic-bezier(.25,.46,.45,.94);
    transition: background .4s cubic-bezier(.25,.46,.45,.94);
}

.LandingHeader.LandingHeader--hamburger-open .LandingHeader--content {
    transition: -webkit-transform .4s cubic-bezier(.785,.135,.15,.86);
    -webkit-transition: -webkit-transform .4s cubic-bezier(.785,.135,.15,.86);
    -o-transition: transform .4s cubic-bezier(.785,.135,.15,.86);
    transition: transform .4s cubic-bezier(.785,.135,.15,.86);
    transition: transform .4s cubic-bezier(.785,.135,.15,.86),-webkit-transform .4s cubic-bezier(.785,.135,.15,.86);
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px)
}

.LandingHeader.LandingHeader--hamburger-open .badge {
    background-color: transparent
}

.LandingHeader .LandingHeader--Nav {
    text-align: right;
    margin: 0;
    margin-right: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.LandingHeader .LandingHeader--Nav .ProfilePic {
    -webkit-transition: -webkit-box-shadow .2s ease;
    transition: -webkit-box-shadow .2s ease;
    -o-transition: box-shadow .2s ease;
    transition: box-shadow .2s ease;
    transition: box-shadow .2s ease,-webkit-box-shadow .2s ease
}

.LandingHeader .LandingHeader--Nav .ProfileDropdown:hover .ProfilePic {
    -webkit-box-shadow: 0 0 0 2px #fff,0 0 0 4px #0699cd!important;
    box-shadow: 0 0 0 2px #fff,0 0 0 4px #0699cd!important
}

.LandingHeader .LandingHeader--Nav.LandingHeader--Nav--loggedOut a {
    margin-right: 20px;
    margin-left: 20px
}

.LandingHeader .LandingHeader--Nav.LandingHeader--Nav--loggedOut .LanguageDropdown a {
    margin-right: 0;
    margin-left: 0
}

.LandingHeader .LandingHeader--Nav.LandingHeader--Nav--loggedOut .LanguageDropdown .dropdown-menu {
    max-height: 350px;
    /*overflow-y: auto*/
}

.LandingHeader .LandingHeader--Nav .btn {
    font-size: 12px
}

.LandingHeader .LandingHeader--Nav .btn-landing-cta {
    padding-left: 15px;
    padding-right: 15px
}

.LandingHeader .LandingHeader--Nav .dropdown-menu {
    margin-top: -1px
}

.LandingHeader .LandingHeader--Nav .dropdown .caret {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out
}

.LandingHeader .LandingHeader--Nav .dropdown.open .caret {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.LandingHeader .LandingHeader--Nav .dropdown.open a:before {
    visibility: hidden
}

.LandingHeader .LandingHeader--Nav .dropdown.open .dropdown-toggle {
    background-color: transparent
}

.LandingHeader .LandingHeader--Nav .dropdown-menu>li {
    display: block
}

.LandingHeader .LandingHeader--Nav .dropdown-menu>.active>a {
    color: #fff
}

.LandingHeader .LandingHeader--Nav .dropdown-menu>li>a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 20px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #0699cd
}

.LandingHeader .LandingHeader--Nav .dropdown-menu>li>a:focus:before,.LandingHeader .LandingHeader--Nav .dropdown-menu>li>a:hover:before {
    visibility: hidden
}

.LandingHeader .LandingHeader--Nav .dropdown-menu>li>a:hover {
    color: #0699cd
}

.LandingHeader .LandingHeader--Nav>li>a {
    position: relative;
    font-weight: 500;
    height: 60px;
    min-height: 60px;
    letter-spacing: -.68px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #0699cd;
    -webkit-transition: color .2s cubic-bezier(.25,.46,.45,.94);
    -o-transition: color cubic-bezier(.25,.46,.45,.94) .2s;
    transition: color .2s cubic-bezier(.25,.46,.45,.94)
}

.LandingHeader .LandingHeader--Nav>li>a:focus,.LandingHeader .LandingHeader--Nav>li>a:hover {
    background-color: transparent
}

.LandingHeader .LandingHeader--Nav>li>a:hover {
    -webkit-transform: translate(0,-1px);
    -ms-transform: translate(0,-1px);
    transform: translate(0,-1px)
}

.LandingHeader .LandingHeader--Nav>li>a {
    -webkit-transition: color .5s ease,-webkit-transform .2s ease;
    transition: color .5s ease,-webkit-transform .2s ease;
    -o-transition: color .5s ease,transform .2s ease;
    transition: color .5s ease,transform .2s ease;
    transition: color .5s ease,transform .2s ease,-webkit-transform .2s ease
}

.LandingHeader .LandingHeader--Nav .LandingHeader--no-underline a:before {
    visibility: hidden!important
}

.LandingHeader .LandingHeader--Nav a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -1px;
    left: 0;
    background-color: #0699cd;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

.LandingHeader .LandingHeader--Nav a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1)
}

.LandingHeader .LandingHeader--Nav .vi {
    font-size: 24px
}

.LandingHeader.LandingHeader--sticky {
    top: 0;
    -webkit-transition: padding-top .5s;
    -o-transition: padding-top .5s;
    transition: padding-top .5s;
    position: fixed
}

@media (min-width: 700px) {
    .LandingHeader.LandingHeader--sticky {
        padding-top:30px
    }
}

.LandingHeader.LandingHeader--sticky {
    -webkit-transition: background .2s cubic-bezier(.455,.03,.515,.955),color .2s cubic-bezier(.455,.03,.515,.955),padding .2s cubic-bezier(.455,.03,.515,.955);
    -o-transition: background .2s cubic-bezier(.455,.03,.515,.955),color .2s cubic-bezier(.455,.03,.515,.955),padding .2s cubic-bezier(.455,.03,.515,.955);
    transition: background .2s cubic-bezier(.455,.03,.515,.955),color .2s cubic-bezier(.455,.03,.515,.955),padding .2s cubic-bezier(.455,.03,.515,.955)
}

.LandingHeader.LandingHeader--sticky #curreny-dropdown {
    display: none
}

.LandingHeader.LandingHeader--not-snapped {
    border: 0;
    background-color: transparent;
    bottom: auto;
    -webkit-transition: background .2s cubic-bezier(.455,.03,.515,.955),color .2s cubic-bezier(.455,.03,.515,.955),padding .2s cubic-bezier(.455,.03,.515,.955);
    -o-transition: background .2s cubic-bezier(.455,.03,.515,.955),color .2s cubic-bezier(.455,.03,.515,.955),padding .2s cubic-bezier(.455,.03,.515,.955);
    transition: background .2s cubic-bezier(.455,.03,.515,.955),color .2s cubic-bezier(.455,.03,.515,.955),padding .2s cubic-bezier(.455,.03,.515,.955)
}

.LandingHeader.LandingHeader--not-snapped * {
    pointer-events: all
}

.LandingHeader.LandingHeader--not-snapped .badge {
    background-color: transparent
}

.LandingHeader.LandingHeader--snapped {
    padding: 0
}

.LandingHeader.LandingHeader-top .dropdown-menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.LandingHeader.LandingHeader-top .btn-landing-cta:hover {
    color: #0699cd;
    border: 1px solid #0699cd;
    background-color: #fff
}

.LandingHeader .LandingHeader--content {
    z-index: 3;
    position: relative
}

.LandingHeader .LandingHeader--background {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in
}

.LandingHeader .LandingHeader-Hamburger {
    position: relative;
    overflow-y: hidden;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    z-index: 2;
    width: 100%;
    margin-left: 15px
}

.LandingHeader .LandingHeader-Hamburger .LandingHeader--Nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.LandingHeader .LandingHeader-Hamburger a {
    font-size: 20px
}

@media (max-width: 1000px) {
    .LandingHeader .mobile-hide {
        display:none!important
    }
}

@media (max-width: 1000px) {
    .LandingHeader .mobile-show {
        display:block!important
    }
}

@media (min-width: 1000px) {
    .LandingHeader .desktop-hide {
        display:none!important
    }
}

@media (min-width: 1000px) {
    .LandingHeader .desktop-show {
        display:block!important
    }
}

.LandingHeader .container-wide {
    max-width: 100%!important
}

.LessonsDropdownListing {
    min-width: 300px
}

.LessonsDropdownListing a {
    font-size: 22.4px;
    font-size: 1.4rem
}

.LessonsDropdownListing .SelectableList-Item {
    padding: 0;
    border-bottom: 1px solid #efefef
}

.LessonsDropdownListing .SelectableList-Item:last-child {
    border-bottom: 0
}

.LessonsDropdownListing .SessionMiniInfo {
    padding-top: 5px;
    padding-bottom: 5px
}

.LessonsDropdownListing .LessonsDropdownListing__header {
    padding: 10px;
    border-bottom: 1px solid #efefef
}

.LessonsDropdownListing .LessonsDropdownListing__content {
    padding: px
}

.LessonsDropdownListing .LessonsDropdownListing__footer {
    padding: 5px;
    text-align: center;
    border-top: 1px solid #efefef
}

.NotificationIcon {
    position: relative;
    display: block
}

.NotificationIcon.NotificationIcon--active .NotificationIcon__badge {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.NotificationIcon .NotificationIcon__child {
    z-index: 1;
    display: block
}

.NotificationIcon .NotificationIcon__badge {
    z-index: 2;
    position: absolute;
    top: 0;
    right: -12px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    -o-transition: transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease,-webkit-transform .2s ease;
    border: 2px solid #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    display: inline-block;
    min-width: 10px;
    min-height: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    background-color: #0699cd;
    border-radius: 10px
}

.WidgetBase {
    position: fixed;
    height: 0;
    width: 100%;
    z-index: 1069
}

.WidgetBase .WidgetWrapper {
    position: absolute
}

.WidgetWrapper {
    -webkit-box-shadow: rgba(0,0,0,.176) 0 6px 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,.176);
    border: 1px solid #d8d8d8
}

.WidgetWrapper header {
    width: 100%;
    padding: 15px;
    height: 50px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    -webkit-box-shadow: inset 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff;
    background-color: #f8f8f8;
    border-bottom: 1px solid #d8d8d8;
    cursor: move
}

.WidgetWrapper header,.WidgetWrapper header .WidgetWrapper__title {
    overflow: hidden;
    min-width: 0;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.WidgetWrapper header .WidgetWrapper__title--editable h3 {
    cursor: text
}

.WidgetWrapper header h3 {
    overflow: hidden;
    min-width: 0;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0
}

.WidgetWrapper.WidgetWrapper--minimized,.WidgetWrapper.WidgetWrapper--minimized header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.WidgetWrapper.WidgetWrapper--minimized header h3 {
    width: 200px;
    -o-text-overflow: ellipse;
    text-overflow: ellipse;
    overflow: hidden
}

.WidgetWrapper.WidgetWrapper--noPadding .WidgetWrapper__body {
    padding: 0
}

.WidgetWrapper.WidgetWrapper--noBorder {
    border: none
}

.WidgetWrapper.WidgetWrapper--noHeaderBorderRadius {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.WidgetWrapper.WidgetWrapper--noBodyBorderRadius {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.WidgetWrapper {
    background-color: #fff;
    border-radius: 8px
}

.WidgetWrapper .WidgetWrapper--chromeless {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.WidgetWrapper .WidgetWrapper__body {
    min-height: 0;
    padding: 10px
}

.WidgetWrapper .WidgetWrapper__close {
    top: 10px;
    right: 10px;
    position: absolute
}

.WidgetWrapper .WidgetWrapper__toolbar-button {
    top: 10px
}

.Widgets--showCursor iframe,.WidgetsPointer iframe,.WidgetWrapper--dragging .NotepadWidget iframe,.WidgetWrapper--resizing .NotepadWidget iframe {
    pointer-events: none
}

.CountdownWidget__time,.StopwatchWidget__time {
    font-size: 80px
}

.CountdownWidget__setupTime input {
    width: 100%;
    border-radius: 0
}

.CountdownWidget__setupTime input:active,.CountdownWidget__setupTime input:focus {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 2px solid #000!important;
    outline: none
}

.CountdownWidget__setupTime input {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-align: center;
    font-size: 40px;
    background: transparent;
    border-bottom: 2px solid #000!important
}

.Translator {
    width: 100%
}

.Translator .fa-chevron-left,.Translator .fa-chevron-right {
    padding: 0 14.4px;
    padding: 0 .9rem
}

.Translator .translate-value {
    margin: 8px 0;
    margin: .5rem 0
}

.Translator .translated-text {
    font-style: italic;
    margin: 16px 0;
    margin: 1rem 0
}

.Translator .translate-from .language-input-selector {
    position: absolute;
    left: 4px;
    top: 5px;
    font-size: 10px;
    text-align: right
}

.Translator .translate {
    position: absolute;
    width: 100%
}

.Translator .translate-from {
    margin-top: 0
}

.Translator .translate-from,.Translator .translate-to {
    -webkit-transition: margin-top 1s;
    -o-transition: margin-top 1s;
    transition: margin-top 1s
}

.Translator .translate-to {
    margin-top: 50px
}

.Translator .translate-from-reversed {
    margin-top: 50px;
    border-radius: 0 0 4px 4px
}

.Translator .translate-from-reversed input[type=text] {
    border-radius: 0 0 4px 4px!important
}

.Translator .translate-to-reversed {
    margin-top: 0
}

.Translator .translate-to-reversed input[type=text] {
    border-radius: 4px 4px 0 0!important
}

.Translator .Translator-inputs {
    background-color: #fff;
    position: relative;
    height: 100px;
    margin: 10px 0;
    border-radius: 4px 4px
}

.Translator .translate-to .language-input-selector {
    position: absolute;
    left: 4px;
    top: 5px;
    font-size: 10px;
    text-align: right
}

.Translator .translated-text .success {
    font-size: 24px;
    font-size: 1.5rem
}

.Translator .LoadingSpinner {
    position: absolute;
    top: 75px;
    z-index: 10;
    right: 50%
}

.EditWordModal label {
    font-weight: 700
}

.Words--Scroll {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    position: relative;
    overflow-y: auto;
    min-height: 0;
    overflow-x: hidden;
    position: static!important
}

.WordMessageInput .language-select {
    text-align: center;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding-top: 7px;
    font-weight: 700;
    cursor: pointer;
    border-top: 1px solid #d8d8d8;
    background-color: #ddd;
    white-space: nowrap
}

.WordMessageInput .language-input-selector {
    position: absolute;
    right: 4px;
    top: 5px;
    font-size: 15px;
    text-align: right;
    font-weight: 700
}

.WordMessageInput div {
    width: 50%
}

.WordMessageInput input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0
}

.WordMessageInput input:focus {
    border-color: #d8d8d8
}

.WordMessageInput .word-input {
    border-top-right-radius: 0
}

.WordMessageInput .definition-input {
    border-top-left-radius: 0
}

.WordsBase .words-panel .panel-heading {
    padding-bottom: 0
}

.WordsBase .words-panel .panel-body {
    padding: 0
}

.WordsBase .words-panel .words-list-header {
    line-height: 30px;
    padding-right: 65px
}

.WordsBase .words-base-container {
    height: 600px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.WordsBase .words-base-container .words-input-row {
    padding-top: 10px
}

.WordsBase .language-input-selector {
    font-size: 15px;
    font-weight: 700
}

@media (max-width: 767px) {
    .WordsBase .WordsFilter .filters {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .WordsBase .WordsFilter .filters div {
        margin-right: 0!important;
        margin-bottom: 5px;
        width: 100%!important
    }
}

.WordsBase .words-input-row {
    background-color: #f8f8f8
}

.words-relationship {
    font-size: 12px;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto
}

.words-relationship input,.words-relationship textarea {
    font-size: 12px
}

.words-relationship .words-input-row {
    background-color: #484b4c
}

.words-relationship .word-rows {
    background-color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.WordsList {
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto
}

.WordsList .word-hidden-row {
    margin-top: 4px
}

.WordsList .word-list-line {
    height: 37px
}

.WordsList .word-rows {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.WordsList .words-col-1 {
    margin-right: 5px
}

.WordsList .word-buttons {
    width: 80px;
    padding: 0 5px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.WordsList .word-buttons .words-tool {
    height: 37px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.WordsList .words-editable div {
    min-height: 35px
}

.WordsList .words-editable div,.WordsList .words-textarea {
    cursor: pointer;
    white-space: pre-wrap;
    word-break: break-word
}

.WordsList .panel-body {
    padding: 0
}

.WordsList .verb-profile-pic {
    min-width: 25px;
    min-height: 25px
}

.WordsList .words-input-row {
    min-height: 50px;
    padding: 20px 10px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.WordsList .words-input-row .word-input .input-group-addon {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 6px
}

.WordsList .words-input-row .input-rows {
    min-height: 35px
}

.WordsList .words-list-row {
    border-top: 1px solid #eee;
    padding: 20px 10px
}

.WordsList .words-list-row:hover {
    background-color: #e7f5fe
}

.WordsList .words-input-row .def-expand-btn,.WordsList .words-list-row .def-expand-btn {
    display: none;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -20px
}

.WordsList .words-input-row .def-expand-btn button,.WordsList .words-list-row .def-expand-btn button {
    font-size: 9px;
    padding: 0;
    border-radius: 3px;
    line-height: 10px;
    width: 100%;
    height: 10px
}

.WordsList .words-input-row:hover .def-expand-btn,.WordsList .words-list-row:hover .def-expand-btn {
    display: block
}

.WordsList .words-empty-state {
    padding: 10px;
    text-align: center;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.WordsList .words-empty-state .words-empty-text {
    margin-top: 10px;
    letter-spacing: .33;
    color: #4f5457
}

.AwardedBadgeHeader {
    width: 100%;
    height: 260px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 50% 30%;
    border-bottom-right-radius: 50% 30%;
    text-shadow: 0 2px 4px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)
}

.BadgePanel--bounce {
    -webkit-animation: floatingx 3s infinite linear;
    animation: floatingx 3s infinite linear
}

.Badge {
    display: inline-block
}

@-webkit-keyframes anim-effect-boris {
    0% {
        -webkit-transform: scale3d(.3,.3,1);
        transform: scale3d(.3,.3,1)
    }

    25%,50% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(1.2,1.2,1);
        transform: scale3d(1.2,1.2,1)
    }
}

@keyframes anim-effect-boris {
    0% {
        -webkit-transform: scale3d(.3,.3,1);
        transform: scale3d(.3,.3,1)
    }

    25%,50% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(1.2,1.2,1);
        transform: scale3d(1.2,1.2,1)
    }
}

.Badge.Badge--clicked .Badge__notification {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.Badge.Badge--clicked .Badge__inner,.Badge.Badge--clicked .Badge__notification {
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

.Badge.Badge--clicked .Badge__inner {
    -webkit-transform: scale(1.4)!important;
    -ms-transform: scale(1.4)!important;
    transform: scale(1.4)!important
}

.Badge.Badge--clicked .Badge__inner:after {
    -webkit-animation: anim-effect-boris .3s forwards;
    animation: anim-effect-boris .3s forwards
}

.Badge .Badge__inner {
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    position: relative
}

.Badge .Badge__inner:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px 0 0 -35px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none
}

.Badge .Badge__notification {
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0
}

.Badge.Badge--addMode.Badge--addModeClickable {
    cursor: pointer
}

.Badge.Badge--addMode.Badge--addModeClickable:hover .Badge__inner {
    opacity: 1!important;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

.Badge.Badge--addMode.Badge--noCount .Badge__inner {
    opacity: .4
}

.Badge .Badge__name {
    font-weight: 700;
    margin-top: 5px
}

.Badge.Badge--small {
    width: 60px
}

.Badge.Badge--small .Badge__name {
    font-size: 10px
}

.Badge.Badge--small .Badge__notification {
    top: -4px;
    right: -4px;
    font-size: 10px;
    min-width: 18px;
    min-height: 18px
}

.Badge.Badge--small .Badge__inner {
    width: 44px;
    height: 44px
}

.Badge.Badge--medium {
    width: 80px
}

.Badge.Badge--medium .Badge__name {
    font-size: 12px
}

.Badge.Badge--medium .Badge__notification {
    top: -8px;
    right: -8px;
    font-size: 16px;
    min-width: 24px;
    min-height: 24px
}

.Badge.Badge--medium .Badge__inner {
    width: 60px;
    height: 60px
}

.Badge.Badge--medium .Badge__inner:after {
    margin: -60px 0 0 -60px;
    width: 120px;
    height: 120px
}

.Badge.Badge--yellow .Badge__notification {
    background-color: #ffb300
}

.Badge.Badge--yellow .Badge__inner {
    border-color: #ffb300;
    background-color: #fff7e6
}

.Badge.Badge--yellow .Badge__inner:after {
    background: #ffb300;
    background: rgba(255,179,0,.1)
}

.Badge.Badge--pink .Badge__notification {
    background-color: #e91e63
}

.Badge.Badge--pink .Badge__inner {
    border-color: #e91e63;
    background-color: #fce8ef
}

.Badge.Badge--pink .Badge__inner:after {
    background: #e91e63;
    background: rgba(233,30,99,.1)
}

.Badge.Badge--dark-green .Badge__notification {
    background-color: #388e3c
}

.Badge.Badge--dark-green .Badge__inner {
    border-color: #388e3c;
    background-color: #ebf3eb
}

.Badge.Badge--dark-green .Badge__inner:after {
    background: #388e3c;
    background: rgba(56,142,60,.1)
}

.Badge.Badge--orange .Badge__notification {
    background-color: #f9a825
}

.Badge.Badge--orange .Badge__inner {
    border-color: #f9a825;
    background-color: #fef6e9
}

.Badge.Badge--orange .Badge__inner:after {
    background: #f9a825;
    background: rgba(249,168,37,.1)
}

.Badge.Badge--blue .Badge__notification {
    background-color: #2196f3
}

.Badge.Badge--blue .Badge__inner {
    border-color: #2196f3;
    background-color: #e9f4fd
}

.Badge.Badge--blue .Badge__inner:after {
    background: #2196f3;
    background: rgba(33,150,243,.1)
}

.Badge.Badge--dark-blue .Badge__notification {
    background-color: #1565c0
}

.Badge.Badge--dark-blue .Badge__inner {
    border-color: #1565c0;
    background-color: #e8eff8
}

.Badge.Badge--dark-blue .Badge__inner:after {
    background: #1565c0;
    background: rgba(21,101,192,.1)
}

.Badge.Badge--light-red .Badge__notification {
    background-color: #ff3d00
}

.Badge.Badge--light-red .Badge__inner {
    border-color: #ff3d00;
    background-color: #ffebe6
}

.Badge.Badge--light-red .Badge__inner:after {
    background: #ff3d00;
    background: rgba(255,61,0,.1)
}

.Badge.Badge--purple .Badge__notification {
    background-color: #5c6bc0
}

.Badge.Badge--purple .Badge__inner {
    border-color: #5c6bc0;
    background-color: #eff0f8
}

.Badge.Badge--purple .Badge__inner:after {
    background: #5c6bc0;
    background: rgba(92,107,192,.1)
}

.Badge.Badge--brown .Badge__notification {
    background-color: #e65100
}

.Badge.Badge--brown .Badge__inner {
    border-color: #e65100;
    background-color: #fcede6
}

.Badge.Badge--brown .Badge__inner:after {
    background: #e65100;
    background: rgba(230,81,0,.1)
}

.Badge.Badge--light-green .Badge__notification {
    background-color: #4caf50
}

.Badge.Badge--light-green .Badge__inner {
    border-color: #4caf50;
    background-color: #edf7ed
}

.Badge.Badge--light-green .Badge__inner:after {
    background: #4caf50;
    background: rgba(76,175,80,.1)
}

.Badge.Badge--red .Badge__notification {
    background-color: #f44336
}

.Badge.Badge--red .Badge__inner {
    border-color: #f44336;
    background-color: #fdeceb
}

.Badge.Badge--red .Badge__inner:after {
    background: #f44336;
    background: rgba(244,67,54,.1)
}

.Badge.Badge--redblue .Badge__notification {
    background-color: #f44336;
    -webkit-box-shadow: 0 0 0 2px #fff;
    box-shadow: 0 0 0 2px #fff
}

.Badge.Badge--redblue .Badge__inner {
    border-color: transparent;
    background-color: #0699cd
}

.Badge.Badge--redblue .Badge__inner:hover {
    background-color: #20b3e7
}

.Badge.Badge--redblue .Badge__inner:disabled {
    background-color: #82cce6;
    opacity: 1%
}

.SessionMiniInfo {
    cursor: pointer
}

.SessionMiniInfo h1 {
    margin-bottom: 0
}

.SessionMiniInfo.SessionMiniInfo--hoverable:hover,.SessionMiniInfo.SessionMiniInfo--selected {
    background-color: #e3f3fe
}

.UserDetails .modal-header,.UserDetails .modal-header .google-map {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.google-map {
    height: 200px
}

.UploadProgressIndicator:not(:first-child) {
    margin-top: 20px
}

.UploadProgressIndicator img {
    height: 24px;
    width: auto
}

.UploadProgressIndicator p {
    margin: 0;
    padding: 0
}

.UploadProgressIndicator__circle {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    height: 24px;
    width: auto
}

.UploadProgressIndicator__value {
    stroke-linecap: round;
    -webkit-transition: stroke-dashoffset 1s;
    -o-transition: stroke-dashoffset 1s;
    transition: stroke-dashoffset 1s
}

.UploadProgressIndicator--busy {
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center
}

.AudioPlayerRoundGui {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: space-between;
    -webkit-align-items: space-between;
    -ms-flex-align: space-between;
    align-items: space-between;
    border-radius: 50%
}

.AudioPlayerRoundGui .CircularProgressbar .CircularProgressbar-path {
    stroke: #36ca36!important;
    stroke-linecap: round;
    -webkit-transition: stroke-dashoffset .5s ease 0s;
    -o-transition: stroke-dashoffset .5s ease 0s;
    transition: stroke-dashoffset .5s ease 0s
}

.AudioPlayerRoundGui .CircularProgressbar .CircularProgressbar-trail {
    stroke: #fff!important
}

.AudioPlayerRoundGui__circle-container {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%
}

.AudioPlayerRoundGui__circle-container.small {
    width: 19px;
    height: 35px
}

.AudioPlayerRoundGui__control-container {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%
}

.AudioPlayerRoundGui__control-container.small {
    width: 19px;
    height: 35px
}

.AudioPlayerRoundGui__control {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 102px;
    height: 102px;
    background-color: #0699cd;
    border-radius: 50%;
    cursor: pointer
}

.AudioPlayerRoundGui__control.small {
    width: 19px;
    height: 19px
}

.AudioPlayerRoundGui__icon--pause {
    width: 34px;
    height: 39px
}

.AudioPlayerRoundGui__icon--pause.small {
    width: 8px;
    height: 10px
}

.AudioPlayerRoundGui__icon--play {
    width: 34px;
    height: 39px;
    margin-left: 10px
}

.AudioPlayerRoundGui__icon--play.small {
    width: 8px;
    height: 10px;
    margin-left: 3px
}

.AudioPlayerRoundGui__icon--stop {
    width: 34px;
    height: 39px;
    margin-left: 5px
}

.AudioPlayerRoundGui__icon--stop.small {
    width: 8px;
    height: 10px
}

.CircularProgressbar {
    width: 100%
}

.CircularProgressbar .CircularProgressbar-path {
    stroke: #3e98c7;
    stroke-linecap: round;
    -webkit-transition: stroke-dashoffset .5s ease 0s;
    -o-transition: stroke-dashoffset .5s ease 0s;
    transition: stroke-dashoffset .5s ease 0s
}

.CircularProgressbar .CircularProgressbar-trail {
    stroke: #efefef
}

.CircularProgressbar .CircularProgressbar-text {
    fill: #3e98c7;
    font-size: 20px;
    dominant-baseline: middle;
    text-anchor: middle
}

.CircularProgressbar .CircularProgressbar-background {
    fill: #d6d6d6
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
    fill: #3e98c7
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
    fill: #fff
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
    stroke: #fff
}

.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
    stroke: #d8d8d8
}

.AudioPlayerGui {
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: space-between;
    -webkit-align-items: space-between;
    -ms-flex-align: space-between;
    align-items: space-between
}

.AudioPlayerGui,.AudioPlayerGui__control-container {
    height: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal
}

.AudioPlayerGui__control-container {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 24px;
    border-radius: 50%;
    background-color: #0699cd;
    cursor: pointer
}

.AudioPlayerGui__icon--pause {
    width: 6px;
    height: 9px
}

.AudioPlayerGui__icon--play {
    width: 8px;
    height: 11px;
    margin: 1px 0 0 2px
}

.AudioPlayerGui__icon--stop {
    width: 8px;
    height: 8px
}

.AudioPlayerGui__slider-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 12px
}

.AudioPlayerGui__slider-group {
    width: 170px;
    height: 4px;
    position: relative;
    display: block
}

.AudioPlayerGui__slider {
    background-color: #d8d8d8
}

.AudioPlayerGui__slider,.AudioPlayerGui__slider--play {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 2px
}

.AudioPlayerGui__slider--play {
    background-color: #0699cd
}

.AudioPlayerGui__slider--progress {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 2px;
    background-color: #838789
}

.AudioPlayerGui__download-btn,.AudioPlayerGui__time-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.AudioPlayerGui__download-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #0699cd;
    cursor: pointer;
    color: #fff!important;
    margin-right: 12px
}

.AudioSeeker {
    background-color: #0699cd;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: -6px
}

.fade-enter {
    opacity: .01;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px)
}

.fade-enter,.fade-enter.fade-enter-active {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.fade-enter.fade-enter-active {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.fade-appear {
    opacity: .01;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1);
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px)
}

.fade-appear.fade-appear-active,.fade-leave {
    opacity: 1;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.fade-leave.fade-leave-active {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.fade-fast-enter,.fade-leave.fade-leave-active {
    opacity: .01;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px)
}

.fade-fast-enter,.fade-fast-enter.fade-fast-enter-active {
    -webkit-transition: all .05s cubic-bezier(.4,0,.2,1);
    -o-transition: all .05s cubic-bezier(.4,0,.2,1);
    transition: all .05s cubic-bezier(.4,0,.2,1)
}

.fade-fast-enter.fade-fast-enter-active {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.fade-fast-appear {
    opacity: .01;
    -webkit-transition: all .05s cubic-bezier(.4,0,.2,1);
    -o-transition: all .05s cubic-bezier(.4,0,.2,1);
    transition: all .05s cubic-bezier(.4,0,.2,1);
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px)
}

.fade-fast-appear.fade-fast-appear-active,.fade-fast-leave {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.fade-fast-appear.fade-fast-appear-active,.fade-fast-leave,.fade-fast-leave.fade-fast-leave-active {
    -webkit-transition: all .05s cubic-bezier(.4,0,.2,1);
    -o-transition: all .05s cubic-bezier(.4,0,.2,1);
    transition: all .05s cubic-bezier(.4,0,.2,1)
}

.fade-fast-leave.fade-fast-leave-active {
    opacity: .01;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px)
}

.fadeOnly-enter {
    opacity: .01
}

.fadeOnly-enter,.fadeOnly-enter.fadeOnly-enter-active {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.fadeOnly-enter.fadeOnly-enter-active {
    opacity: 1
}

.fadeOnly-appear {
    opacity: .01;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.fadeOnly-appear.fadeOnly-appear-active,.fadeOnly-leave {
    opacity: 1
}

.fadeOnly-appear.fadeOnly-appear-active,.fadeOnly-leave,.fadeOnly-leave.fadeOnly-leave-active {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.fadeOnly-leave.fadeOnly-leave-active {
    opacity: .01
}

.slideDown-enter {
    opacity: .01;
    max-height: 0
}

.slideDown-enter,.slideDown-enter.slideDown-enter-active {
    -webkit-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    -o-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    transition: all 1.5s cubic-bezier(.4,0,.2,1)
}

.slideDown-enter.slideDown-enter-active {
    opacity: 1;
    max-height: 1000px
}

.slideDown-appear {
    opacity: .01;
    -webkit-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    -o-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    transition: all 1.5s cubic-bezier(.4,0,.2,1);
    max-height: 0
}

.slideDown-appear.slideDown-appear-active,.slideDown-leave {
    opacity: 1;
    max-height: 1000px
}

.slideDown-appear.slideDown-appear-active,.slideDown-leave,.slideDown-leave.slideDown-leave-active {
    -webkit-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    -o-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    transition: all 1.5s cubic-bezier(.4,0,.2,1)
}

.slideDown-leave.slideDown-leave-active {
    opacity: .01;
    max-height: 0
}

.fade-slide-left-enter {
    opacity: .01;
    -webkit-transform: translateX(300px);
    -ms-transform: translateX(300px);
    transform: translateX(300px)
}

.fade-slide-left-enter,.fade-slide-left-enter.fade-slide-left-enter-active {
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.fade-slide-left-enter.fade-slide-left-enter-active {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.fade-slide-left-appear {
    opacity: .01;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1);
    -webkit-transform: translateX(300px);
    -ms-transform: translateX(300px);
    transform: translateX(300px)
}

.fade-slide-left-appear.fade-slide-left-appear-active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.fade-slide-left-appear.fade-slide-left-appear-active,.fade-slide-left-leave {
    opacity: 1;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.fade-slide-left-leave,.fade-slide-left-leave.fade-slide-left-leave-active {
    -webkit-transform: translateX(300px);
    -ms-transform: translateX(300px);
    transform: translateX(300px)
}

.fade-slide-left-leave.fade-slide-left-leave-active {
    opacity: .01;
    -webkit-transition: all .5s cubic-bezier(.4,0,.2,1);
    -o-transition: all .5s cubic-bezier(.4,0,.2,1);
    transition: all .5s cubic-bezier(.4,0,.2,1)
}

.pop-enter {
    -webkit-transform: scale(.1);
    -ms-transform: scale(.1);
    transform: scale(.1)
}

.pop-enter,.pop-enter.pop-enter-active {
    -webkit-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    -o-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    transition: all 1.5s cubic-bezier(.4,0,.2,1)
}

.pop-enter.pop-enter-active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.pop-appear {
    -webkit-transform: scale(.1);
    -ms-transform: scale(.1);
    transform: scale(.1);
    -webkit-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    -o-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    transition: all 1.5s cubic-bezier(.4,0,.2,1)
}

.pop-appear.pop-appear-active,.pop-leave {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.pop-appear.pop-appear-active,.pop-leave,.pop-leave.pop-leave-active {
    -webkit-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    -o-transition: all 1.5s cubic-bezier(.4,0,.2,1);
    transition: all 1.5s cubic-bezier(.4,0,.2,1)
}

.pop-leave.pop-leave-active {
    -webkit-transform: scale(.1);
    -ms-transform: scale(.1);
    transform: scale(.1)
}

.UserCard .UserCard__pic {
    width: 90px;
    height: 90px;
    border-radius: 4px
}

.UserCardTrigger {
    display: none;
    width: 320px;
    padding: 10px;
    z-index: 100;
    position: absolute;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,.2) 0 2px 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    background-color: #fff
}

.UserCardTrigger.UserCardTrigger--show {
    display: block
}

.UserCardTrigger .UserCard__label {
    min-width: 50px
}

.UserCardTrigger .HoverCard--pic {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.UserCardTrigger .UserCardInfo {
    width: 100%;
    display: block;
    text-align: left;
    padding: 5px
}

.UserCardTrigger .UserCardInfo span {
    display: block
}

.HoverCardWrapper {
    position: relative;
    display: inline-block
}

@media (min-width: 767px) {
    .InitialMessageTeacherModal h4 {
        margin-top:0
    }
}

.InitialMessageTeacherModal .InitialMessageTeacherModal--guidelines {
    border-radius: 8px;
    border: 1px solid #efefef;
    padding: 10px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1)
}

@-webkit-keyframes checkmark {
    0% {
        stroke-dashoffset: 50px
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 50px
    }

    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 240px
    }

    to {
        stroke-dashoffset: 480px
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 240px
    }

    to {
        stroke-dashoffset: 480px
    }
}

.Checkmark path {
    -webkit-animation: checkmark .25s ease-in-out .7s backwards;
    animation: checkmark .25s ease-in-out .7s backwards
}

.Checkmark circle {
    -webkit-animation: checkmark-circle .6s ease-in-out backwards;
    animation: checkmark-circle .6s ease-in-out backwards
}

.Drawings {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.Drawings.Drawings--select {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADcUlEQVRYR+2WX0iTYRTGn7lVC7OmVlrUFMS8GoI4vHIE/gtZRvRNFLyQQVgLb2RDTRTFCIJ9CDZFXJIXiRCEVwbL5r9JSxAtRb8Q0aHfvJiWLi1zbhZHpthyOXTijQde9o2x7/ze5zznvK8AxxyCY86PE4DdCtCzcGVl5Q7Lsl3V1dVrANwAfh9lmXYDhAAQLy4uVopEIvXc3FyxTCZ7C+AXAM9RgewGEAIIM5vNd+VyuXF1ddXjcrlGrFbrw/z8/C8AXF6QoAriq4AkPT39hslk+hARESHQarUoKSnZ4HneWFZWVtPR0eH0ggStLL4euADg2sLCgkWpVEoGBwcRFxeH5ubm9aSkpJXZ2VltYmLim2CWxbcNzwG4ynHcq4aGBrnBYNiROycnB01NTa6QkJBPPT09D4JVFl+AswCi+vv7H09PT6sLCwvJFzshFotRXl4OnU63Pj8//7KysrK6vb19+TBl8QU4DeBiY2PjvYyMjGfx8fEE9E/ExsaipaWFyvKD53mdTCZ7fdCy+ALQjsMTEhISOI4bCA0NxdoajYO9Q6lUUlnWRSLR54GBgUcMw4wDWAewGWir+ALQ9/MArjscjm6VSnWpr6/P77uEQiFSU1PR1taGqKgo9/Lysp5hmJre3l6CCKhT9joLQsmIY2NjL1pbWxUsy/4FIJVKkZWVhezsbFdaWppQIBC47Hb7iN1ufzc1NWUuKioaAUCyBaTCXgBiMqLZbNYuLS3dZxjmzDaBRqNBXV3dps1mm5mcnBzu7OwcNhqN4x6Ph+bDIoCvAOj5UAqcIiPq9frbubm59VKpdAsgJiYGExMT7tLS0icGg2HYm2gVwE/vjrc/aXTTGRJQ7KUAnQnh0dHRcTzPf4yMjBQ4nU5YrVb3xsZGt0KheApgwQtAyWhEU0JadGYEJP02nb/7wJYReZ7vUqvVV2ga1tbWOpOTk/NsNtuUV27aMSWkdeDwB7BlRI7j6i0Wy62CggK3Xq+vqKqq6gQwD+D7YRPvpwAZ8bLJZCrOzMzUDg0NvZfL5RUAZgF888p+4F3v/qM/BciIESzL3tRoNM9TUlLyRkdHZwA4vKYLqMcDIfQHQEYMk0gk4UajUaFSqSwAaOYHTfr9SkC/U/tRKUgNcjr1Nq2gxv9uxaTC9qLWOpJr2cm1/ESBEwWOXYE/6apQMKWN0LUAAAAASUVORK5CYII=") 4 4,auto!important
}

.Drawings .Drawings__input {
    position: absolute;
    background: transparent;
    border: none;
    z-index: 3;
    padding: 0;
    margin: 0;
    outline: none!important;
    word-break: break-all;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text
}

.Drawings .AnnotationSelection__move {
    cursor: move
}

.Drawings.Drawings--pencil,.Drawings.Drawings--shape,.Drawings.Drawings--symbol {
    cursor: crosshair
}

.Drawings.Drawings--text {
    cursor: text
}

.Drawings .Drawings__handletopLeft {
    cursor: nw-resize
}

.Drawings .Drawings__handletopRight {
    cursor: ne-resize
}

.Drawings .Drawings__handlebottomLeft {
    cursor: sw-resize
}

.Drawings .Drawings__handlebottomRight {
    cursor: se-resize
}

.Drawings .Drawings__lineLeft {
    cursor: w-resize
}

.Drawings .Drawings__lineRight {
    cursor: e-resize
}

.Drawings .Drawings__lineBottom {
    cursor: s-resize
}

.Drawings .Drawings__lineTop {
    cursor: n-resize
}

.TextAnnotation__ForeignObject--active {
    cursor: text
}

.TextAnnotation__ForeignObject--active .TextAnnotation__EditableDiv {
    white-space: nowrap!important
}

.TextAnnotation__EditableDiv.TextAnnotation__EditableDiv--constrainted {
    white-space: -moz-pre-wrap;
    white-space: -hp-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -pre-wrap;
    white-space: pre-wrap;
    white-space: pre-line;
    word-wrap: break-word;
    word-break: break-all
}

.TextAnnotation__EditableDiv {
    cursor: default
}

.DrawingsToolbar__grayscale2 {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.PasswordStrength {
    text-align: left
}

.PasswordStrength.PasswordStrength--0 .PasswordStrength__text {
    color: #fd4444
}

.PasswordStrength.PasswordStrength--0 .PasswordStrength__bar .PasswordStrength__baritem0 {
    background-color: #fd4444
}

.PasswordStrength.PasswordStrength--1 .PasswordStrength__text {
    color: #fd4444
}

.PasswordStrength.PasswordStrength--1 .PasswordStrength__bar .PasswordStrength__baritem0,.PasswordStrength.PasswordStrength--1 .PasswordStrength__bar .PasswordStrength__baritem1 {
    background-color: #fd4444
}

.PasswordStrength.PasswordStrength--2 .PasswordStrength__text {
    color: #ffbd04
}

.PasswordStrength.PasswordStrength--2 .PasswordStrength__bar .PasswordStrength__baritem0,.PasswordStrength.PasswordStrength--2 .PasswordStrength__bar .PasswordStrength__baritem1,.PasswordStrength.PasswordStrength--2 .PasswordStrength__bar .PasswordStrength__baritem2 {
    background-color: #ffbd04
}

.PasswordStrength.PasswordStrength--3 .PasswordStrength__text {
    color: #34d058
}

.PasswordStrength.PasswordStrength--3 .PasswordStrength__bar .PasswordStrength__baritem0,.PasswordStrength.PasswordStrength--3 .PasswordStrength__bar .PasswordStrength__baritem1,.PasswordStrength.PasswordStrength--3 .PasswordStrength__bar .PasswordStrength__baritem2,.PasswordStrength.PasswordStrength--3 .PasswordStrength__bar .PasswordStrength__baritem3 {
    background-color: #34d058
}

.PasswordStrength.PasswordStrength--4 .PasswordStrength__text {
    color: #34d058
}

.PasswordStrength.PasswordStrength--4 .PasswordStrength__bar .PasswordStrength__baritem0,.PasswordStrength.PasswordStrength--4 .PasswordStrength__bar .PasswordStrength__baritem1,.PasswordStrength.PasswordStrength--4 .PasswordStrength__bar .PasswordStrength__baritem2,.PasswordStrength.PasswordStrength--4 .PasswordStrength__bar .PasswordStrength__baritem3,.PasswordStrength.PasswordStrength--4 .PasswordStrength__bar .PasswordStrength__baritem4 {
    background-color: #34d058
}

.PasswordStrength .PasswordStrength__bar {
    height: 10px
}

.PasswordStrength .PasswordStrength__bar .PasswordStrength__baritem:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px
}

.PasswordStrength .PasswordStrength__bar .PasswordStrength__baritem:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right: 0
}

.PasswordStrength .PasswordStrength__bar .PasswordStrength__baritem {
    background-color: #efefef;
    margin-right: 5px
}

.login-modal .no-margin-group,.signup-modal .no-margin-group {
    margin-bottom: 0
}

.login-modal .oauth-group,.signup-modal .oauth-group {
    display: block
}

.login-modal .error-msg,.signup-modal .error-msg {
    background-color: #fa1212
}

.login-modal .success-msg,.signup-modal .success-msg {
    background-color: #00c80a
}

.login-modal .error-msg,.login-modal .success-msg,.signup-modal .error-msg,.signup-modal .success-msg {
    width: 100%;
    text-align: center;
    padding: 20px;
    color: #fff
}

.login-modal .btn-fb,.login-modal .btn-gplus,.signup-modal .btn-fb,.signup-modal .btn-gplus {
    line-height: 18px
}

.signup-form .bump-down {
    margin-bottom: 15px
}

.signup-form .form-group .input-group {
    width: 100%
}

.signup-form .form-group .input-group .input-group-addon {
    width: 39px
}

.signup-form .social-login .google:hover {
    background-color: #f36456;
    text-decoration: none
}

.signup-form .social-login .facebook:hover {
    background-color: #4f6aad;
    text-decoration: none
}

.signup-form .social-login {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px
}

.signup-form .social-login .facebook,.signup-form .social-login .google {
    font-size: 14.25px;
    margin: 0 0 10px;
    padding-top: 12px
}

@media (max-width: 480px) {
    .signup-form .btn-lg {
        font-size:14.25px
    }

    .signup-form .form-group {
        margin-bottom: 3px
    }

    .signup-form .social-login a {
        margin-bottom: 3px!important
    }

    .signup-form .social-login a div {
        font-size: 10px
    }
}

.CloseButton {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 2;
    -webkit-transition: all .47s cubic-bezier(.3,1,.3,.95) 0s;
    -o-transition: all .47s cubic-bezier(.3,1,.3,.95) 0s;
    transition: all .47s cubic-bezier(.3,1,.3,.95) 0s
}

.CloseButton:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #ccc
}

.CloseButton:hover g {
    fill: #ccc!important
}

.CloseButton.CloseButton--white {
    color: #fff
}

.CloseButton.CloseButton--white g {
    fill: #fff!important
}

.MainSubHeader {
    border-bottom: 1px solid #d8d8d8;
    background-color: #f8f8f8;
    position: relative;
    overflow-y: auto
}

.MainSubHeader .container {
    padding-left: 0;
    padding-right: 0
}

@media (max-width: 767px) {
    .MainSubHeader .container {
        max-width:none
    }
}

.SubHeaderBase--center .SubHeaderBase__mobile {
    background-color: #fff;
    border-bottom: 2px solid #d8d8d8
}

.SubHeaderBase--center .SubHeaderBase__desktop {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: 2px solid #d8d8d8
}

.SubHeaderBase--center .SubHeaderBase__desktop a {
    font-weight: 700;
    letter-spacing: -1px;
    padding-bottom: 2px;
    padding-left: 0;
    padding-right: 0;
    margin-right: 30px;
    font-size: 14px;
    color: #4f5457
}

.SubHeaderBase--center .SubHeaderBase__desktop .SubHeaderBase--selected a {
    color: #0699cd
}

.SubHeader--white {
    border-bottom: 1px solid #d8d8d8;
    background-color: #fff
}

.SubHeader--fat .SubHeaderBase__desktop {
    border-bottom: 2px solid #d8d8d8
}

.SubHeader--fat .SubHeaderBase__desktop a {
    font-weight: 700;
    letter-spacing: -.96px;
    padding-bottom: 2px;
    padding-left: 0;
    padding-right: 0;
    margin-right: 30px;
    font-size: 20px;
    color: #4f5457
}

.SubHeader--fat .SubHeaderBase__desktop .SubHeaderBase--selected a {
    color: #0699cd;
    padding-bottom: 4px
}

.SubHeader--fat .SubHeaderBase__mobile {
    background-color: #fff;
    border-radius: 8px;
    margin-top: 10px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)!important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)!important;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    border-bottom: 0!important
}

.SubHeaderBase ul {
    margin-bottom: 0
}

.SubHeaderBase .btn {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 0;
    border-radius: 0;
    font-weight: 400
}

.SubHeaderBase .SubHeaderBase__desktop {
    position: relative
}

.SubHeaderBase .SubHeaderBase__desktop .SubHeaderBase--selected .btn {
    font-weight: 700;
    -webkit-box-shadow: inset 0 -2px 0 0 #0699cd;
    box-shadow: inset 0 -2px 0 0 #0699cd
}

.SubHeaderBase .SubHeaderBase__desktop li .btn {
    letter-spacing: -.68px;
    font-weight: 700
}

.SubHeaderBase .SubHeaderBase__desktop li .btn:hover {
    -webkit-box-shadow: inset 0 -2px 0 0 #0699cd;
    box-shadow: inset 0 -2px 0 0 #0699cd
}

.SubHeaderBase .SubHeaderBase__mobile li {
    cursor: pointer
}

.SubHeaderBase .SubHeaderBase__mobile.SubHeaderBase--open .SubHeaderBase__top {
    border-bottom: 1px solid #d8d8d8
}

.SubHeaderBase .SubHeaderBase__mobile.SubHeaderBase--open .fa {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.SubHeaderBase .SubHeaderBase__mobile .SubHeaderBase--unselected {
    border-left: 4px solid #f2f2f2
}

.SubHeaderBase .SubHeaderBase__mobile .SubHeaderBase--selected,.SubHeaderBase .SubHeaderBase__mobile .SubHeaderBase--unselected:hover {
    border-left: 4px solid #0699cd
}

.SubHeaderBase .SubHeaderBase__mobile .SubHeaderBase--selected .btn {
    font-weight: 700
}

.SubHeaderBase .SubHeaderBase__mobile .fa {
    color: #0699cd;
    transition: transform .1s ease-out,color .1s ease-out,-webkit-transform .1s ease-out;
    font-size: 32px;
    font-size: 2rem
}

.verb-profile-pic {
    display: block;
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c)
}

.verb-profile-pic.xlarge {
    height: 130px;
    width: 130px
}

.verb-profile-pic.large {
    height: 100px;
    width: 100px
}

.verb-profile-pic.standard {
    height: 60px;
    width: 60px
}

.verb-profile-pic.small {
    height: 50px;
    width: 50px
}

.verb-profile-pic.nano {
    height: 18px;
    width: 18px
}

.verb-profile-pic.medium {
    height: 35px;
    width: 35px
}

.verb-profile-pic.bordered-primary {
    border: 4px solid #0699cd
}

.verb-profile-pic.bordered {
    border: 4px solid #fff
}

.verb-profile-pic.bordered-small {
    border: 2px solid #fff
}

.verb-profile-pic.clickable {
    cursor: pointer
}

.verb-profile-pic.clickable:hover {
    /* background-image: url(https://cdn.huatutor.com/2108138772139bd90300f7b5b0d3716d9c0152a5/img/overlay-profile.png)!important */
}

.verb-profile-pic.tiny {
    height: 30px;
    width: 30px
}

.verb-profile-pic.tiny.bordered {
    border: 2px solid #fff
}

.verb-profile-pic.remove-responsive {
    max-width: inherit!important
}

.verb-profile-pic {
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    background-size: cover
}

.verb-profile-pic.round {
    border-radius: 50%
}

.verb-profile-pic.centered {
    margin-left: auto;
    margin-right: auto
}

.verb-profile-pic.inline {
    display: inline-block
}

.ScrollFix {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    position: relative;
    min-height: 0;
    position: static!important
}

.ScrollFix,.ScrollFix--wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1
}

.ScrollFix--wrapper {
    overflow: hidden;
    position: relative;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.FlexApp {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.FlexContent {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto
}

@-ms-viewport {
    width: device-width
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-overflow-style: scrollbar
}

*,:after,:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 576px) {
    .container {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:720px
    }
}

@media (min-width: 992px) {
    .container {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    .container {
        max-width:1140px
    }
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-auto,.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-auto,.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-auto,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.col {
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.col-auto {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none
}

.col-1,.col-auto {
    -webkit-box-flex: 0
}

.col-1 {
    -webkit-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%
}

.col-2 {
    -webkit-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%
}

.col-2,.col-3 {
    -webkit-box-flex: 0
}

.col-3 {
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%
}

.col-4,.col-5 {
    -webkit-box-flex: 0
}

.col-5 {
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%
}

.col-6 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-6,.col-7 {
    -webkit-box-flex: 0
}

.col-7 {
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%
}

.col-8 {
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%
}

.col-8,.col-9 {
    -webkit-box-flex: 0
}

.col-9 {
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%
}

.col-10,.col-11 {
    -webkit-box-flex: 0
}

.col-11 {
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%
}

.col-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

.order-first {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1
}

.order-last {
    -webkit-box-ordinal-group: 14;
    -webkit-order: 13;
    -ms-flex-order: 13;
    order: 13
}

.order-0 {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0
}

.order-1 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1
}

.order-2 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2
}

.order-3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3
}

.order-4 {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4
}

.order-5 {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5
}

.order-6 {
    -webkit-box-ordinal-group: 7;
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6
}

.order-7 {
    -webkit-box-ordinal-group: 8;
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7
}

.order-8 {
    -webkit-box-ordinal-group: 9;
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8
}

.order-9 {
    -webkit-box-ordinal-group: 10;
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9
}

.order-10 {
    -webkit-box-ordinal-group: 11;
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10
}

.order-11 {
    -webkit-box-ordinal-group: 12;
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11
}

.order-12 {
    -webkit-box-ordinal-group: 13;
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12
}

.offset-1 {
    margin-left: 8.33333%
}

.offset-2 {
    margin-left: 16.66667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.33333%
}

.offset-5 {
    margin-left: 41.66667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.33333%
}

.offset-8 {
    margin-left: 66.66667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.33333%
}

.offset-11 {
    margin-left: 91.66667%
}

@media (min-width: 576px) {
    .col-sm {
        -webkit-flex-basis:0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-sm-auto {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-sm-1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-sm-2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-sm-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-sm-4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-sm-5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-sm-6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-sm-8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-sm-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-sm-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-sm-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-sm-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-sm-first {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
        -ms-flex-order: -1;
        order: -1
    }

    .order-sm-last {
        -webkit-box-ordinal-group: 14;
        -webkit-order: 13;
        -ms-flex-order: 13;
        order: 13
    }

    .order-sm-0 {
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0
    }

    .order-sm-1 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }

    .order-sm-2 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }

    .order-sm-3 {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3
    }

    .order-sm-4 {
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4
    }

    .order-sm-5 {
        -webkit-box-ordinal-group: 6;
        -webkit-order: 5;
        -ms-flex-order: 5;
        order: 5
    }

    .order-sm-6 {
        -webkit-box-ordinal-group: 7;
        -webkit-order: 6;
        -ms-flex-order: 6;
        order: 6
    }

    .order-sm-7 {
        -webkit-box-ordinal-group: 8;
        -webkit-order: 7;
        -ms-flex-order: 7;
        order: 7
    }

    .order-sm-8 {
        -webkit-box-ordinal-group: 9;
        -webkit-order: 8;
        -ms-flex-order: 8;
        order: 8
    }

    .order-sm-9 {
        -webkit-box-ordinal-group: 10;
        -webkit-order: 9;
        -ms-flex-order: 9;
        order: 9
    }

    .order-sm-10 {
        -webkit-box-ordinal-group: 11;
        -webkit-order: 10;
        -ms-flex-order: 10;
        order: 10
    }

    .order-sm-11 {
        -webkit-box-ordinal-group: 12;
        -webkit-order: 11;
        -ms-flex-order: 11;
        order: 11
    }

    .order-sm-12 {
        -webkit-box-ordinal-group: 13;
        -webkit-order: 12;
        -ms-flex-order: 12;
        order: 12
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.33333%
    }

    .offset-sm-2 {
        margin-left: 16.66667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.33333%
    }

    .offset-sm-5 {
        margin-left: 41.66667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.33333%
    }

    .offset-sm-8 {
        margin-left: 66.66667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.33333%
    }

    .offset-sm-11 {
        margin-left: 91.66667%
    }
}

@media (min-width: 769px) {
    .col-md {
        -webkit-flex-basis:0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-md-auto {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-md-1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-md-2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-md-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-md-5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-md-6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-md-8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-md-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-md-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-md-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-md-first {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
        -ms-flex-order: -1;
        order: -1
    }

    .order-md-last {
        -webkit-box-ordinal-group: 14;
        -webkit-order: 13;
        -ms-flex-order: 13;
        order: 13
    }

    .order-md-0 {
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0
    }

    .order-md-1 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }

    .order-md-2 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }

    .order-md-3 {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3
    }

    .order-md-4 {
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4
    }

    .order-md-5 {
        -webkit-box-ordinal-group: 6;
        -webkit-order: 5;
        -ms-flex-order: 5;
        order: 5
    }

    .order-md-6 {
        -webkit-box-ordinal-group: 7;
        -webkit-order: 6;
        -ms-flex-order: 6;
        order: 6
    }

    .order-md-7 {
        -webkit-box-ordinal-group: 8;
        -webkit-order: 7;
        -ms-flex-order: 7;
        order: 7
    }

    .order-md-8 {
        -webkit-box-ordinal-group: 9;
        -webkit-order: 8;
        -ms-flex-order: 8;
        order: 8
    }

    .order-md-9 {
        -webkit-box-ordinal-group: 10;
        -webkit-order: 9;
        -ms-flex-order: 9;
        order: 9
    }

    .order-md-10 {
        -webkit-box-ordinal-group: 11;
        -webkit-order: 10;
        -ms-flex-order: 10;
        order: 10
    }

    .order-md-11 {
        -webkit-box-ordinal-group: 12;
        -webkit-order: 11;
        -ms-flex-order: 11;
        order: 11
    }

    .order-md-12 {
        -webkit-box-ordinal-group: 13;
        -webkit-order: 12;
        -ms-flex-order: 12;
        order: 12
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.33333%
    }

    .offset-md-2 {
        margin-left: 16.66667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.33333%
    }

    .offset-md-5 {
        margin-left: 41.66667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.33333%
    }

    .offset-md-8 {
        margin-left: 66.66667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.33333%
    }

    .offset-md-11 {
        margin-left: 91.66667%
    }
}

@media (min-width: 992px) {
    .col-lg {
        -webkit-flex-basis:0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-lg-auto {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-lg-1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-lg-2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-lg-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-lg-5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-lg-6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-lg-8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-lg-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-lg-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-lg-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-lg-first {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
        -ms-flex-order: -1;
        order: -1
    }

    .order-lg-last {
        -webkit-box-ordinal-group: 14;
        -webkit-order: 13;
        -ms-flex-order: 13;
        order: 13
    }

    .order-lg-0 {
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0
    }

    .order-lg-1 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }

    .order-lg-2 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }

    .order-lg-3 {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3
    }

    .order-lg-4 {
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4
    }

    .order-lg-5 {
        -webkit-box-ordinal-group: 6;
        -webkit-order: 5;
        -ms-flex-order: 5;
        order: 5
    }

    .order-lg-6 {
        -webkit-box-ordinal-group: 7;
        -webkit-order: 6;
        -ms-flex-order: 6;
        order: 6
    }

    .order-lg-7 {
        -webkit-box-ordinal-group: 8;
        -webkit-order: 7;
        -ms-flex-order: 7;
        order: 7
    }

    .order-lg-8 {
        -webkit-box-ordinal-group: 9;
        -webkit-order: 8;
        -ms-flex-order: 8;
        order: 8
    }

    .order-lg-9 {
        -webkit-box-ordinal-group: 10;
        -webkit-order: 9;
        -ms-flex-order: 9;
        order: 9
    }

    .order-lg-10 {
        -webkit-box-ordinal-group: 11;
        -webkit-order: 10;
        -ms-flex-order: 10;
        order: 10
    }

    .order-lg-11 {
        -webkit-box-ordinal-group: 12;
        -webkit-order: 11;
        -ms-flex-order: 11;
        order: 11
    }

    .order-lg-12 {
        -webkit-box-ordinal-group: 13;
        -webkit-order: 12;
        -ms-flex-order: 12;
        order: 12
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.33333%
    }

    .offset-lg-2 {
        margin-left: 16.66667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.33333%
    }

    .offset-lg-5 {
        margin-left: 41.66667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.33333%
    }

    .offset-lg-8 {
        margin-left: 66.66667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.33333%
    }

    .offset-lg-11 {
        margin-left: 91.66667%
    }
}

@media (min-width: 1200px) {
    .col-xl {
        -webkit-flex-basis:0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-xl-auto {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-xl-1 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-xl-2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-xl-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xl-4 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-xl-5 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-xl-6 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-7 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-xl-8 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-xl-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xl-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-xl-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-xl-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-xl-first {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
        -ms-flex-order: -1;
        order: -1
    }

    .order-xl-last {
        -webkit-box-ordinal-group: 14;
        -webkit-order: 13;
        -ms-flex-order: 13;
        order: 13
    }

    .order-xl-0 {
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0
    }

    .order-xl-1 {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1
    }

    .order-xl-2 {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }

    .order-xl-3 {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3
    }

    .order-xl-4 {
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4
    }

    .order-xl-5 {
        -webkit-box-ordinal-group: 6;
        -webkit-order: 5;
        -ms-flex-order: 5;
        order: 5
    }

    .order-xl-6 {
        -webkit-box-ordinal-group: 7;
        -webkit-order: 6;
        -ms-flex-order: 6;
        order: 6
    }

    .order-xl-7 {
        -webkit-box-ordinal-group: 8;
        -webkit-order: 7;
        -ms-flex-order: 7;
        order: 7
    }

    .order-xl-8 {
        -webkit-box-ordinal-group: 9;
        -webkit-order: 8;
        -ms-flex-order: 8;
        order: 8
    }

    .order-xl-9 {
        -webkit-box-ordinal-group: 10;
        -webkit-order: 9;
        -ms-flex-order: 9;
        order: 9
    }

    .order-xl-10 {
        -webkit-box-ordinal-group: 11;
        -webkit-order: 10;
        -ms-flex-order: 10;
        order: 10
    }

    .order-xl-11 {
        -webkit-box-ordinal-group: 12;
        -webkit-order: 11;
        -ms-flex-order: 11;
        order: 11
    }

    .order-xl-12 {
        -webkit-box-ordinal-group: 13;
        -webkit-order: 12;
        -ms-flex-order: 12;
        order: 12
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.33333%
    }

    .offset-xl-2 {
        margin-left: 16.66667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.33333%
    }

    .offset-xl-5 {
        margin-left: 41.66667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.33333%
    }

    .offset-xl-8 {
        margin-left: 66.66667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.33333%
    }

    .offset-xl-11 {
        margin-left: 91.66667%
    }
}

.small-gutters {
    margin-right: -15px;
    margin-left: -15px
}

.small-gutters>[class*=col-] {
    padding-right: 15px;
    padding-left: 15px
}

.medium-gutters {
    margin-right: -30px;
    margin-left: -30px
}

.medium-gutters>[class*=col-] {
    padding-right: 30px;
    padding-left: 30px
}

.large-gutters {
    margin-right: -45px;
    margin-left: -45px
}

.large-gutters>[class*=col-] {
    padding-right: 45px;
    padding-left: 45px
}

.d-none {
    display: none!important
}

.d-inline {
    display: inline!important
}

.d-inline-block {
    display: inline-block!important
}

.d-block {
    display: block!important
}

.d-table {
    display: table!important
}

.d-table-row {
    display: table-row!important
}

.d-table-cell {
    display: table-cell!important
}

.d-flex {
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: -ms-flexbox!important;
    display: flex!important
}

.d-inline-flex {
    display: -webkit-inline-box!important;
    display: -webkit-inline-flex!important;
    display: -ms-inline-flexbox!important;
    display: inline-flex!important
}

@media (min-width: 576px) {
    .d-sm-none {
        display:none!important
    }

    .d-sm-inline {
        display: inline!important
    }

    .d-sm-inline-block {
        display: inline-block!important
    }

    .d-sm-block {
        display: block!important
    }

    .d-sm-table {
        display: table!important
    }

    .d-sm-table-row {
        display: table-row!important
    }

    .d-sm-table-cell {
        display: table-cell!important
    }

    .d-sm-flex {
        display: -webkit-box!important;
        display: -webkit-flex!important;
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-sm-inline-flex {
        display: -webkit-inline-box!important;
        display: -webkit-inline-flex!important;
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

@media (min-width: 768px) {
    .d-md-none {
        display:none!important
    }

    .d-md-inline {
        display: inline!important
    }

    .d-md-inline-block {
        display: inline-block!important
    }

    .d-md-block {
        display: block!important
    }

    .d-md-table {
        display: table!important
    }

    .d-md-table-row {
        display: table-row!important
    }

    .d-md-table-cell {
        display: table-cell!important
    }

    .d-md-flex {
        display: -webkit-box!important;
        display: -webkit-flex!important;
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-md-inline-flex {
        display: -webkit-inline-box!important;
        display: -webkit-inline-flex!important;
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display:none!important
    }

    .d-lg-inline {
        display: inline!important
    }

    .d-lg-inline-block {
        display: inline-block!important
    }

    .d-lg-block {
        display: block!important
    }

    .d-lg-table {
        display: table!important
    }

    .d-lg-table-row {
        display: table-row!important
    }

    .d-lg-table-cell {
        display: table-cell!important
    }

    .d-lg-flex {
        display: -webkit-box!important;
        display: -webkit-flex!important;
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-lg-inline-flex {
        display: -webkit-inline-box!important;
        display: -webkit-inline-flex!important;
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

@media (min-width: 1200px) {
    .d-xl-none {
        display:none!important
    }

    .d-xl-inline {
        display: inline!important
    }

    .d-xl-inline-block {
        display: inline-block!important
    }

    .d-xl-block {
        display: block!important
    }

    .d-xl-table {
        display: table!important
    }

    .d-xl-table-row {
        display: table-row!important
    }

    .d-xl-table-cell {
        display: table-cell!important
    }

    .d-xl-flex {
        display: -webkit-box!important;
        display: -webkit-flex!important;
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-xl-inline-flex {
        display: -webkit-inline-box!important;
        display: -webkit-inline-flex!important;
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

@media print {
    .d-print-none {
        display: none!important
    }

    .d-print-inline {
        display: inline!important
    }

    .d-print-inline-block {
        display: inline-block!important
    }

    .d-print-block {
        display: block!important
    }

    .d-print-table {
        display: table!important
    }

    .d-print-table-row {
        display: table-row!important
    }

    .d-print-table-cell {
        display: table-cell!important
    }

    .d-print-flex {
        display: -webkit-box!important;
        display: -webkit-flex!important;
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-print-inline-flex {
        display: -webkit-inline-box!important;
        display: -webkit-inline-flex!important;
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

.flex-row {
    -webkit-box-orient: horizontal!important;
    -webkit-flex-direction: row!important;
    -ms-flex-direction: row!important;
    flex-direction: row!important
}

.flex-column,.flex-row {
    -webkit-box-direction: normal!important
}

.flex-column {
    -webkit-box-orient: vertical!important;
    -webkit-flex-direction: column!important;
    -ms-flex-direction: column!important;
    flex-direction: column!important
}

.flex-row-reverse {
    -webkit-box-orient: horizontal!important;
    -webkit-flex-direction: row-reverse!important;
    -ms-flex-direction: row-reverse!important;
    flex-direction: row-reverse!important
}

.flex-column-reverse,.flex-row-reverse {
    -webkit-box-direction: reverse!important
}

.flex-column-reverse {
    -webkit-box-orient: vertical!important;
    -webkit-flex-direction: column-reverse!important;
    -ms-flex-direction: column-reverse!important;
    flex-direction: column-reverse!important
}

.flex-wrap {
    -webkit-flex-wrap: wrap!important;
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important
}

.flex-nowrap {
    -webkit-flex-wrap: nowrap!important;
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important
}

.flex-wrap-reverse {
    -webkit-flex-wrap: wrap-reverse!important;
    -ms-flex-wrap: wrap-reverse!important;
    flex-wrap: wrap-reverse!important
}

.flex-fill {
    -webkit-box-flex: 1!important;
    -webkit-flex: 1 1 auto!important;
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important
}

.justify-content-start {
    -webkit-box-pack: start!important;
    -webkit-justify-content: flex-start!important;
    -ms-flex-pack: start!important;
    justify-content: flex-start!important
}

.justify-content-end {
    -webkit-box-pack: end!important;
    -webkit-justify-content: flex-end!important;
    -ms-flex-pack: end!important;
    justify-content: flex-end!important
}

.justify-content-center {
    -webkit-box-pack: center!important;
    -webkit-justify-content: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important
}

.justify-content-between {
    -webkit-box-pack: justify!important;
    -webkit-justify-content: space-between!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important
}

.justify-content-around {
    -webkit-justify-content: space-around!important;
    -ms-flex-pack: distribute!important;
    justify-content: space-around!important
}

.align-items-start {
    -webkit-box-align: start!important;
    -webkit-align-items: flex-start!important;
    -ms-flex-align: start!important;
    align-items: flex-start!important
}

.align-items-end {
    -webkit-box-align: end!important;
    -webkit-align-items: flex-end!important;
    -ms-flex-align: end!important;
    align-items: flex-end!important
}

.align-items-center {
    -webkit-box-align: center!important;
    -webkit-align-items: center!important;
    -ms-flex-align: center!important;
    align-items: center!important
}

.align-items-baseline {
    -webkit-box-align: baseline!important;
    -webkit-align-items: baseline!important;
    -ms-flex-align: baseline!important;
    align-items: baseline!important
}

.align-items-stretch {
    -webkit-box-align: stretch!important;
    -webkit-align-items: stretch!important;
    -ms-flex-align: stretch!important;
    align-items: stretch!important
}

.align-content-start {
    -webkit-align-content: flex-start!important;
    -ms-flex-line-pack: start!important;
    align-content: flex-start!important
}

.align-content-end {
    -webkit-align-content: flex-end!important;
    -ms-flex-line-pack: end!important;
    align-content: flex-end!important
}

.align-content-center {
    -webkit-align-content: center!important;
    -ms-flex-line-pack: center!important;
    align-content: center!important
}

.align-content-between {
    -webkit-align-content: space-between!important;
    -ms-flex-line-pack: justify!important;
    align-content: space-between!important
}

.align-content-around {
    -webkit-align-content: space-around!important;
    -ms-flex-line-pack: distribute!important;
    align-content: space-around!important
}

.align-content-stretch {
    -webkit-align-content: stretch!important;
    -ms-flex-line-pack: stretch!important;
    align-content: stretch!important
}

.align-self-auto {
    -webkit-align-self: auto!important;
    -ms-flex-item-align: auto!important;
    align-self: auto!important
}

.align-self-start {
    -webkit-align-self: flex-start!important;
    -ms-flex-item-align: start!important;
    align-self: flex-start!important
}

.align-self-end {
    -webkit-align-self: flex-end!important;
    -ms-flex-item-align: end!important;
    align-self: flex-end!important
}

.align-self-center {
    -webkit-align-self: center!important;
    -ms-flex-item-align: center!important;
    align-self: center!important
}

.align-self-baseline {
    -webkit-align-self: baseline!important;
    -ms-flex-item-align: baseline!important;
    align-self: baseline!important
}

.align-self-stretch {
    -webkit-align-self: stretch!important;
    -ms-flex-item-align: stretch!important;
    align-self: stretch!important
}

@media (min-width: 576px) {
    .flex-sm-row {
        -webkit-box-orient:horizontal!important;
        -webkit-flex-direction: row!important;
        -ms-flex-direction: row!important;
        flex-direction: row!important
    }

    .flex-sm-column,.flex-sm-row {
        -webkit-box-direction: normal!important
    }

    .flex-sm-column {
        -webkit-box-orient: vertical!important;
        -webkit-flex-direction: column!important;
        -ms-flex-direction: column!important;
        flex-direction: column!important
    }

    .flex-sm-row-reverse {
        -webkit-box-orient: horizontal!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: row-reverse!important;
        -ms-flex-direction: row-reverse!important;
        flex-direction: row-reverse!important
    }

    .flex-sm-column-reverse {
        -webkit-box-orient: vertical!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important
    }

    .flex-sm-wrap {
        -webkit-flex-wrap: wrap!important;
        -ms-flex-wrap: wrap!important;
        flex-wrap: wrap!important
    }

    .flex-sm-nowrap {
        -webkit-flex-wrap: nowrap!important;
        -ms-flex-wrap: nowrap!important;
        flex-wrap: nowrap!important
    }

    .flex-sm-wrap-reverse {
        -webkit-flex-wrap: wrap-reverse!important;
        -ms-flex-wrap: wrap-reverse!important;
        flex-wrap: wrap-reverse!important
    }

    .flex-sm-fill {
        -webkit-box-flex: 1!important;
        -webkit-flex: 1 1 auto!important;
        -ms-flex: 1 1 auto!important;
        flex: 1 1 auto!important
    }

    .justify-content-sm-start {
        -webkit-box-pack: start!important;
        -webkit-justify-content: flex-start!important;
        -ms-flex-pack: start!important;
        justify-content: flex-start!important
    }

    .justify-content-sm-end {
        -webkit-box-pack: end!important;
        -webkit-justify-content: flex-end!important;
        -ms-flex-pack: end!important;
        justify-content: flex-end!important
    }

    .justify-content-sm-center {
        -webkit-box-pack: center!important;
        -webkit-justify-content: center!important;
        -ms-flex-pack: center!important;
        justify-content: center!important
    }

    .justify-content-sm-between {
        -webkit-box-pack: justify!important;
        -webkit-justify-content: space-between!important;
        -ms-flex-pack: justify!important;
        justify-content: space-between!important
    }

    .justify-content-sm-around {
        -webkit-justify-content: space-around!important;
        -ms-flex-pack: distribute!important;
        justify-content: space-around!important
    }

    .align-items-sm-start {
        -webkit-box-align: start!important;
        -webkit-align-items: flex-start!important;
        -ms-flex-align: start!important;
        align-items: flex-start!important
    }

    .align-items-sm-end {
        -webkit-box-align: end!important;
        -webkit-align-items: flex-end!important;
        -ms-flex-align: end!important;
        align-items: flex-end!important
    }

    .align-items-sm-center {
        -webkit-box-align: center!important;
        -webkit-align-items: center!important;
        -ms-flex-align: center!important;
        align-items: center!important
    }

    .align-items-sm-baseline {
        -webkit-box-align: baseline!important;
        -webkit-align-items: baseline!important;
        -ms-flex-align: baseline!important;
        align-items: baseline!important
    }

    .align-items-sm-stretch {
        -webkit-box-align: stretch!important;
        -webkit-align-items: stretch!important;
        -ms-flex-align: stretch!important;
        align-items: stretch!important
    }

    .align-content-sm-start {
        -webkit-align-content: flex-start!important;
        -ms-flex-line-pack: start!important;
        align-content: flex-start!important
    }

    .align-content-sm-end {
        -webkit-align-content: flex-end!important;
        -ms-flex-line-pack: end!important;
        align-content: flex-end!important
    }

    .align-content-sm-center {
        -webkit-align-content: center!important;
        -ms-flex-line-pack: center!important;
        align-content: center!important
    }

    .align-content-sm-between {
        -webkit-align-content: space-between!important;
        -ms-flex-line-pack: justify!important;
        align-content: space-between!important
    }

    .align-content-sm-around {
        -webkit-align-content: space-around!important;
        -ms-flex-line-pack: distribute!important;
        align-content: space-around!important
    }

    .align-content-sm-stretch {
        -webkit-align-content: stretch!important;
        -ms-flex-line-pack: stretch!important;
        align-content: stretch!important
    }

    .align-self-sm-auto {
        -webkit-align-self: auto!important;
        -ms-flex-item-align: auto!important;
        align-self: auto!important
    }

    .align-self-sm-start {
        -webkit-align-self: flex-start!important;
        -ms-flex-item-align: start!important;
        align-self: flex-start!important
    }

    .align-self-sm-end {
        -webkit-align-self: flex-end!important;
        -ms-flex-item-align: end!important;
        align-self: flex-end!important
    }

    .align-self-sm-center {
        -webkit-align-self: center!important;
        -ms-flex-item-align: center!important;
        align-self: center!important
    }

    .align-self-sm-baseline {
        -webkit-align-self: baseline!important;
        -ms-flex-item-align: baseline!important;
        align-self: baseline!important
    }

    .align-self-sm-stretch {
        -webkit-align-self: stretch!important;
        -ms-flex-item-align: stretch!important;
        align-self: stretch!important
    }
}

@media (min-width: 768px) {
    .flex-md-row {
        -webkit-box-orient:horizontal!important;
        -webkit-flex-direction: row!important;
        -ms-flex-direction: row!important;
        flex-direction: row!important
    }

    .flex-md-column,.flex-md-row {
        -webkit-box-direction: normal!important
    }

    .flex-md-column {
        -webkit-box-orient: vertical!important;
        -webkit-flex-direction: column!important;
        -ms-flex-direction: column!important;
        flex-direction: column!important
    }

    .flex-md-row-reverse {
        -webkit-box-orient: horizontal!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: row-reverse!important;
        -ms-flex-direction: row-reverse!important;
        flex-direction: row-reverse!important
    }

    .flex-md-column-reverse {
        -webkit-box-orient: vertical!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important
    }

    .flex-md-wrap {
        -webkit-flex-wrap: wrap!important;
        -ms-flex-wrap: wrap!important;
        flex-wrap: wrap!important
    }

    .flex-md-nowrap {
        -webkit-flex-wrap: nowrap!important;
        -ms-flex-wrap: nowrap!important;
        flex-wrap: nowrap!important
    }

    .flex-md-wrap-reverse {
        -webkit-flex-wrap: wrap-reverse!important;
        -ms-flex-wrap: wrap-reverse!important;
        flex-wrap: wrap-reverse!important
    }

    .flex-md-fill {
        -webkit-box-flex: 1!important;
        -webkit-flex: 1 1 auto!important;
        -ms-flex: 1 1 auto!important;
        flex: 1 1 auto!important
    }

    .justify-content-md-start {
        -webkit-box-pack: start!important;
        -webkit-justify-content: flex-start!important;
        -ms-flex-pack: start!important;
        justify-content: flex-start!important
    }

    .justify-content-md-end {
        -webkit-box-pack: end!important;
        -webkit-justify-content: flex-end!important;
        -ms-flex-pack: end!important;
        justify-content: flex-end!important
    }

    .justify-content-md-center {
        -webkit-box-pack: center!important;
        -webkit-justify-content: center!important;
        -ms-flex-pack: center!important;
        justify-content: center!important
    }

    .justify-content-md-between {
        -webkit-box-pack: justify!important;
        -webkit-justify-content: space-between!important;
        -ms-flex-pack: justify!important;
        justify-content: space-between!important
    }

    .justify-content-md-around {
        -webkit-justify-content: space-around!important;
        -ms-flex-pack: distribute!important;
        justify-content: space-around!important
    }

    .align-items-md-start {
        -webkit-box-align: start!important;
        -webkit-align-items: flex-start!important;
        -ms-flex-align: start!important;
        align-items: flex-start!important
    }

    .align-items-md-end {
        -webkit-box-align: end!important;
        -webkit-align-items: flex-end!important;
        -ms-flex-align: end!important;
        align-items: flex-end!important
    }

    .align-items-md-center {
        -webkit-box-align: center!important;
        -webkit-align-items: center!important;
        -ms-flex-align: center!important;
        align-items: center!important
    }

    .align-items-md-baseline {
        -webkit-box-align: baseline!important;
        -webkit-align-items: baseline!important;
        -ms-flex-align: baseline!important;
        align-items: baseline!important
    }

    .align-items-md-stretch {
        -webkit-box-align: stretch!important;
        -webkit-align-items: stretch!important;
        -ms-flex-align: stretch!important;
        align-items: stretch!important
    }

    .align-content-md-start {
        -webkit-align-content: flex-start!important;
        -ms-flex-line-pack: start!important;
        align-content: flex-start!important
    }

    .align-content-md-end {
        -webkit-align-content: flex-end!important;
        -ms-flex-line-pack: end!important;
        align-content: flex-end!important
    }

    .align-content-md-center {
        -webkit-align-content: center!important;
        -ms-flex-line-pack: center!important;
        align-content: center!important
    }

    .align-content-md-between {
        -webkit-align-content: space-between!important;
        -ms-flex-line-pack: justify!important;
        align-content: space-between!important
    }

    .align-content-md-around {
        -webkit-align-content: space-around!important;
        -ms-flex-line-pack: distribute!important;
        align-content: space-around!important
    }

    .align-content-md-stretch {
        -webkit-align-content: stretch!important;
        -ms-flex-line-pack: stretch!important;
        align-content: stretch!important
    }

    .align-self-md-auto {
        -webkit-align-self: auto!important;
        -ms-flex-item-align: auto!important;
        align-self: auto!important
    }

    .align-self-md-start {
        -webkit-align-self: flex-start!important;
        -ms-flex-item-align: start!important;
        align-self: flex-start!important
    }

    .align-self-md-end {
        -webkit-align-self: flex-end!important;
        -ms-flex-item-align: end!important;
        align-self: flex-end!important
    }

    .align-self-md-center {
        -webkit-align-self: center!important;
        -ms-flex-item-align: center!important;
        align-self: center!important
    }

    .align-self-md-baseline {
        -webkit-align-self: baseline!important;
        -ms-flex-item-align: baseline!important;
        align-self: baseline!important
    }

    .align-self-md-stretch {
        -webkit-align-self: stretch!important;
        -ms-flex-item-align: stretch!important;
        align-self: stretch!important
    }
}

@media (min-width: 992px) {
    .flex-lg-row {
        -webkit-box-orient:horizontal!important;
        -webkit-flex-direction: row!important;
        -ms-flex-direction: row!important;
        flex-direction: row!important
    }

    .flex-lg-column,.flex-lg-row {
        -webkit-box-direction: normal!important
    }

    .flex-lg-column {
        -webkit-box-orient: vertical!important;
        -webkit-flex-direction: column!important;
        -ms-flex-direction: column!important;
        flex-direction: column!important
    }

    .flex-lg-row-reverse {
        -webkit-box-orient: horizontal!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: row-reverse!important;
        -ms-flex-direction: row-reverse!important;
        flex-direction: row-reverse!important
    }

    .flex-lg-column-reverse {
        -webkit-box-orient: vertical!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important
    }

    .flex-lg-wrap {
        -webkit-flex-wrap: wrap!important;
        -ms-flex-wrap: wrap!important;
        flex-wrap: wrap!important
    }

    .flex-lg-nowrap {
        -webkit-flex-wrap: nowrap!important;
        -ms-flex-wrap: nowrap!important;
        flex-wrap: nowrap!important
    }

    .flex-lg-wrap-reverse {
        -webkit-flex-wrap: wrap-reverse!important;
        -ms-flex-wrap: wrap-reverse!important;
        flex-wrap: wrap-reverse!important
    }

    .flex-lg-fill {
        -webkit-box-flex: 1!important;
        -webkit-flex: 1 1 auto!important;
        -ms-flex: 1 1 auto!important;
        flex: 1 1 auto!important
    }

    .justify-content-lg-start {
        -webkit-box-pack: start!important;
        -webkit-justify-content: flex-start!important;
        -ms-flex-pack: start!important;
        justify-content: flex-start!important
    }

    .justify-content-lg-end {
        -webkit-box-pack: end!important;
        -webkit-justify-content: flex-end!important;
        -ms-flex-pack: end!important;
        justify-content: flex-end!important
    }

    .justify-content-lg-center {
        -webkit-box-pack: center!important;
        -webkit-justify-content: center!important;
        -ms-flex-pack: center!important;
        justify-content: center!important
    }

    .justify-content-lg-between {
        -webkit-box-pack: justify!important;
        -webkit-justify-content: space-between!important;
        -ms-flex-pack: justify!important;
        justify-content: space-between!important
    }

    .justify-content-lg-around {
        -webkit-justify-content: space-around!important;
        -ms-flex-pack: distribute!important;
        justify-content: space-around!important
    }

    .align-items-lg-start {
        -webkit-box-align: start!important;
        -webkit-align-items: flex-start!important;
        -ms-flex-align: start!important;
        align-items: flex-start!important
    }

    .align-items-lg-end {
        -webkit-box-align: end!important;
        -webkit-align-items: flex-end!important;
        -ms-flex-align: end!important;
        align-items: flex-end!important
    }

    .align-items-lg-center {
        -webkit-box-align: center!important;
        -webkit-align-items: center!important;
        -ms-flex-align: center!important;
        align-items: center!important
    }

    .align-items-lg-baseline {
        -webkit-box-align: baseline!important;
        -webkit-align-items: baseline!important;
        -ms-flex-align: baseline!important;
        align-items: baseline!important
    }

    .align-items-lg-stretch {
        -webkit-box-align: stretch!important;
        -webkit-align-items: stretch!important;
        -ms-flex-align: stretch!important;
        align-items: stretch!important
    }

    .align-content-lg-start {
        -webkit-align-content: flex-start!important;
        -ms-flex-line-pack: start!important;
        align-content: flex-start!important
    }

    .align-content-lg-end {
        -webkit-align-content: flex-end!important;
        -ms-flex-line-pack: end!important;
        align-content: flex-end!important
    }

    .align-content-lg-center {
        -webkit-align-content: center!important;
        -ms-flex-line-pack: center!important;
        align-content: center!important
    }

    .align-content-lg-between {
        -webkit-align-content: space-between!important;
        -ms-flex-line-pack: justify!important;
        align-content: space-between!important
    }

    .align-content-lg-around {
        -webkit-align-content: space-around!important;
        -ms-flex-line-pack: distribute!important;
        align-content: space-around!important
    }

    .align-content-lg-stretch {
        -webkit-align-content: stretch!important;
        -ms-flex-line-pack: stretch!important;
        align-content: stretch!important
    }

    .align-self-lg-auto {
        -webkit-align-self: auto!important;
        -ms-flex-item-align: auto!important;
        align-self: auto!important
    }

    .align-self-lg-start {
        -webkit-align-self: flex-start!important;
        -ms-flex-item-align: start!important;
        align-self: flex-start!important
    }

    .align-self-lg-end {
        -webkit-align-self: flex-end!important;
        -ms-flex-item-align: end!important;
        align-self: flex-end!important
    }

    .align-self-lg-center {
        -webkit-align-self: center!important;
        -ms-flex-item-align: center!important;
        align-self: center!important
    }

    .align-self-lg-baseline {
        -webkit-align-self: baseline!important;
        -ms-flex-item-align: baseline!important;
        align-self: baseline!important
    }

    .align-self-lg-stretch {
        -webkit-align-self: stretch!important;
        -ms-flex-item-align: stretch!important;
        align-self: stretch!important
    }
}

@media (min-width: 1200px) {
    .flex-xl-row {
        -webkit-box-orient:horizontal!important;
        -webkit-flex-direction: row!important;
        -ms-flex-direction: row!important;
        flex-direction: row!important
    }

    .flex-xl-column,.flex-xl-row {
        -webkit-box-direction: normal!important
    }

    .flex-xl-column {
        -webkit-box-orient: vertical!important;
        -webkit-flex-direction: column!important;
        -ms-flex-direction: column!important;
        flex-direction: column!important
    }

    .flex-xl-row-reverse {
        -webkit-box-orient: horizontal!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: row-reverse!important;
        -ms-flex-direction: row-reverse!important;
        flex-direction: row-reverse!important
    }

    .flex-xl-column-reverse {
        -webkit-box-orient: vertical!important;
        -webkit-box-direction: reverse!important;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important
    }

    .flex-xl-wrap {
        -webkit-flex-wrap: wrap!important;
        -ms-flex-wrap: wrap!important;
        flex-wrap: wrap!important
    }

    .flex-xl-nowrap {
        -webkit-flex-wrap: nowrap!important;
        -ms-flex-wrap: nowrap!important;
        flex-wrap: nowrap!important
    }

    .flex-xl-wrap-reverse {
        -webkit-flex-wrap: wrap-reverse!important;
        -ms-flex-wrap: wrap-reverse!important;
        flex-wrap: wrap-reverse!important
    }

    .flex-xl-fill {
        -webkit-box-flex: 1!important;
        -webkit-flex: 1 1 auto!important;
        -ms-flex: 1 1 auto!important;
        flex: 1 1 auto!important
    }

    .justify-content-xl-start {
        -webkit-box-pack: start!important;
        -webkit-justify-content: flex-start!important;
        -ms-flex-pack: start!important;
        justify-content: flex-start!important
    }

    .justify-content-xl-end {
        -webkit-box-pack: end!important;
        -webkit-justify-content: flex-end!important;
        -ms-flex-pack: end!important;
        justify-content: flex-end!important
    }

    .justify-content-xl-center {
        -webkit-box-pack: center!important;
        -webkit-justify-content: center!important;
        -ms-flex-pack: center!important;
        justify-content: center!important
    }

    .justify-content-xl-between {
        -webkit-box-pack: justify!important;
        -webkit-justify-content: space-between!important;
        -ms-flex-pack: justify!important;
        justify-content: space-between!important
    }

    .justify-content-xl-around {
        -webkit-justify-content: space-around!important;
        -ms-flex-pack: distribute!important;
        justify-content: space-around!important
    }

    .align-items-xl-start {
        -webkit-box-align: start!important;
        -webkit-align-items: flex-start!important;
        -ms-flex-align: start!important;
        align-items: flex-start!important
    }

    .align-items-xl-end {
        -webkit-box-align: end!important;
        -webkit-align-items: flex-end!important;
        -ms-flex-align: end!important;
        align-items: flex-end!important
    }

    .align-items-xl-center {
        -webkit-box-align: center!important;
        -webkit-align-items: center!important;
        -ms-flex-align: center!important;
        align-items: center!important
    }

    .align-items-xl-baseline {
        -webkit-box-align: baseline!important;
        -webkit-align-items: baseline!important;
        -ms-flex-align: baseline!important;
        align-items: baseline!important
    }

    .align-items-xl-stretch {
        -webkit-box-align: stretch!important;
        -webkit-align-items: stretch!important;
        -ms-flex-align: stretch!important;
        align-items: stretch!important
    }

    .align-content-xl-start {
        -webkit-align-content: flex-start!important;
        -ms-flex-line-pack: start!important;
        align-content: flex-start!important
    }

    .align-content-xl-end {
        -webkit-align-content: flex-end!important;
        -ms-flex-line-pack: end!important;
        align-content: flex-end!important
    }

    .align-content-xl-center {
        -webkit-align-content: center!important;
        -ms-flex-line-pack: center!important;
        align-content: center!important
    }

    .align-content-xl-between {
        -webkit-align-content: space-between!important;
        -ms-flex-line-pack: justify!important;
        align-content: space-between!important
    }

    .align-content-xl-around {
        -webkit-align-content: space-around!important;
        -ms-flex-line-pack: distribute!important;
        align-content: space-around!important
    }

    .align-content-xl-stretch {
        -webkit-align-content: stretch!important;
        -ms-flex-line-pack: stretch!important;
        align-content: stretch!important
    }

    .align-self-xl-auto {
        -webkit-align-self: auto!important;
        -ms-flex-item-align: auto!important;
        align-self: auto!important
    }

    .align-self-xl-start {
        -webkit-align-self: flex-start!important;
        -ms-flex-item-align: start!important;
        align-self: flex-start!important
    }

    .align-self-xl-end {
        -webkit-align-self: flex-end!important;
        -ms-flex-item-align: end!important;
        align-self: flex-end!important
    }

    .align-self-xl-center {
        -webkit-align-self: center!important;
        -ms-flex-item-align: center!important;
        align-self: center!important
    }

    .align-self-xl-baseline {
        -webkit-align-self: baseline!important;
        -ms-flex-item-align: baseline!important;
        align-self: baseline!important
    }

    .align-self-xl-stretch {
        -webkit-align-self: stretch!important;
        -ms-flex-item-align: stretch!important;
        align-self: stretch!important
    }
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    font-display:swap;src: local("Open Sans Light"),local("OpenSans-Light"),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTQ7aC6SjiAOpAWOKfJDfVRY.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/cyrillic-ext-OpenSans-Light.woff) format("woff");
    unicode-range: u+0460-052f,u+20b4,u+2de0-2dff,u+a640-a69f
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    font-display:swap;src: local("Open Sans Light"),local("OpenSans-Light"),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRdwxCXfZpKo5kWAx_74bHs.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/cyrillic-OpenSans-Light.woff) format("woff");
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    font-display:swap;src: local("Open Sans Light"),local("OpenSans-Light"),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZ6vnaPZw6nYDxM4SVEMFKg.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/greek-ext-OpenSans-Light.woff) format("woff");
    unicode-range: u+1f??
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    font-display:swap;src: local("Open Sans Light"),local("OpenSans-Light"),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTfy1_HTwRwgtl1cPga3Fy3Y.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/greek-OpenSans-Light.woff) format("woff");
    unicode-range: u+0370-03ff
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    font-display:swap;src: local("Open Sans Light"),local("OpenSans-Light"),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTfgrLsWo7Jk1KvZser0olKY.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/vietnamese-OpenSans-Light.woff) format("woff");
    unicode-range: u+0102-0103,u+1ea0-1ef9,u+20ab
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    font-display:swap;src: local("Open Sans Light"),local("OpenSans-Light"),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTYjoYw3YTyktCCer_ilOlhE.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/latin-ext-OpenSans-Light.woff) format("woff");
    unicode-range: u+0100-024f,u+1e??,u+20a0-20ab,u+20ad-20cf,u+2c60-2c7f,u+a720-a7ff
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 300;
    font-display:swap;src: local("Open Sans Light"),local("OpenSans-Light"),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/latin-OpenSans-Light.woff) format("woff");
    unicode-range: u+00??,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215,u+e0ff,u+effd,u+f000
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    font-display:swap;src: local("Open Sans"),local("OpenSans"),url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01m4X0hVgzZQUfRDuZrPvH3D8.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/cyrillic-ext-OpenSans.woff) format("woff");
    unicode-range: u+0460-052f,u+20b4,u+2de0-2dff,u+a640-a69f
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    font-display:swap;src: local("Open Sans"),local("OpenSans"),url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5UYX0hVgzZQUfRDuZrPvH3D8.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/cyrillic-OpenSans.woff) format("woff");
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    font-display:swap;src: local("Open Sans"),local("OpenSans"),url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KYX0hVgzZQUfRDuZrPvH3D8.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/greek-ext-OpenSans.woff) format("woff");
    unicode-range: u+1f??
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    font-display:swap;src: local("Open Sans"),local("OpenSans"),url(https://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAoX0hVgzZQUfRDuZrPvH3D8.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/greek-OpenSans.woff) format("woff");
    unicode-range: u+0370-03ff
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    font-display:swap;src: local("Open Sans"),local("OpenSans"),url(https://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEEYX0hVgzZQUfRDuZrPvH3D8.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/vietnamese-OpenSans.woff) format("woff");
    unicode-range: u+0102-0103,u+1ea0-1ef9,u+20ab
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    font-display:swap;src: local("Open Sans"),local("OpenSans"),url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRYX0hVgzZQUfRDuZrPvH3D8.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/latin-ext-OpenSans.woff) format("woff");
    unicode-range: u+0100-024f,u+1e??,u+20a0-20ab,u+20ad-20cf,u+2c60-2c7f,u+a720-a7ff
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    font-display:swap;src: local("Open Sans"),local("OpenSans"),url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/latin-OpenSans.woff) format("woff");
    unicode-range: u+00??,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215,u+e0ff,u+effd,u+f000
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    font-display:swap;src: local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzA7aC6SjiAOpAWOKfJDfVRY.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/cyrillic-ext-OpenSansBold.woff) format("woff");
    unicode-range: u+0460-052f,u+20b4,u+2de0-2dff,u+a640-a69f
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    font-display:swap;src: local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBdwxCXfZpKo5kWAx_74bHs.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/cyrillic-OpenSansBold.woff) format("woff");
    unicode-range: u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    font-display:swap;src: local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzJ6vnaPZw6nYDxM4SVEMFKg.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/greek-ext-OpenSansBold.woff) format("woff");
    unicode-range: u+1f??
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    font-display:swap;src: local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzPy1_HTwRwgtl1cPga3Fy3Y.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/greek-OpenSansBold.woff) format("woff");
    unicode-range: u+0370-03ff
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    font-display:swap;src: local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzPgrLsWo7Jk1KvZser0olKY.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/vietnamese-OpenSansBold.woff) format("woff");
    unicode-range: u+0102-0103,u+1ea0-1ef9,u+20ab
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    font-display:swap;src: local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzIjoYw3YTyktCCer_ilOlhE.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/latin-ext-OpenSansBold.woff) format("woff");
    unicode-range: u+0100-024f,u+1e??,u+20a0-20ab,u+20ad-20cf,u+2c60-2c7f,u+a720-a7ff
}

@font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    font-display:swap;src: local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format("woff2"),url(https://cdn.huatutor.com/fonts/latin-OpenSansBold.woff) format("woff");
    unicode-range: u+00??,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215,u+e0ff,u+effd,u+f000
}

::selection {
    background-color: #00aaf4;
    color: #fff
}

::-moz-selection {
    background-color: #00aaf4;
    color: #fff
}

html {
    font-size: 62.5%;
    letter-spacing: -.28px;
    letter-spacing: -.028rem;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale
}

[lang=ja] body {
    font-family: \\30D2\30E9\30AE\30CE\89D2\30B4 Pro,Hiragino Kaku Gothic Pro,\\30E1\30A4\30EA\30AA,Meiryo,Osaka,"\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF",MS PGothic,MS Gothic,"\FF2D\FF33   \30B4\30B7\30C3\30AF",Helvetica Neue,Helvetica,Arial,sans-serif!important;
    word-break: keep-all
}

[lang=ko] body {
    font-family: "\B098\B214   \ACE0\B515",Nanum Gothic,"\B9D1\C740   \ACE0\B515",Malgun Gothic,Apple Gothic,\\B3CB\C6C0,Dotum,Helvetica Neue,Helvetica,Arial,sans-serif!important;
    word-break: keep-all
}

[lang^=zh] body {
    font-family: Hiragino Sans GB,\\534E\6587\7EC6\9ED1,STHeiti,\\5FAE\8F6F\96C5\9ED1,Microsoft YaHei,SimHei,Helvetica Neue,Helvetica,Arial,sans-serif!important;
    word-break: keep-all
}

var {
    font-style: normal
}

.h1-hero {
    font-weight: 700;
    font-size: 68px;
    font-size: 6.8rem;
    letter-spacing: -3.4px;
    margin-bottom: 20px;
    margin-bottom: 2rem
}

.h1plus {
    font-size: 42px;
    font-size: 4.2rem;
    letter-spacing: -2.02px;
    letter-spacing: -.202rem;
    margin-bottom: 15px;
    margin-bottom: 1.5rem
}

.h1,.h1plus,h1 {
    font-weight: 700
}

.h1,h1 {
    font-size: 30px;
    font-size: 3rem;
    letter-spacing: -1.44px;
    letter-spacing: -.144rem;
    margin-bottom: 10px;
    margin-bottom: 1rem
}

.h2,h2 {
    font-size: 20px;
    font-size: 2rem;
    letter-spacing: -.96px;
    letter-spacing: -.096rem;
    margin-bottom: 8px;
    margin-bottom: .8rem
}

.h2,.h3,h2,h3 {
    font-weight: 700
}

.h3,h3 {
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: -.77px;
    letter-spacing: -.077rem;
    margin-bottom: 4px;
    margin-bottom: .4rem
}

.h4,.h5,h4,h5 {
    font-weight: 700;
    font-size: 12.8px;
    font-size: 1.28rem;
    letter-spacing: -.61px;
    letter-spacing: -.061rem;
    margin-bottom: 2px;
    margin-bottom: .2rem
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    font-family: inherit;
    line-height: 1.35;
    color: #4f5457
}

.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small {
    font-size: 80%;
    letter-spacing: 80%;
    display: block;
    color: #4f5457!important
}

.h1 .small a,.h1 small a,.h2 .small a,.h2 small a,.h3 .small a,.h3 small a,.h4 .small a,.h4 small a,.h5 .small a,.h5 small a,.h6 .small a,.h6 small a,h1 .small a,h1 small a,h2 .small a,h2 small a,h3 .small a,h3 small a,h4 .small a,h4 small a,h5 .small a,h5 small a,h6 .small a,h6 small a {
    color: #0699cd!important
}

p {
    margin: 0 0 11.5px
}

.lead {
    margin-bottom: 23px;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.4
}

.small,small {
    font-size: 80%;
    letter-spacing: 80%
}

.mark,mark {
    background-color: #ffe399;
    padding: .2em
}

.text-justify {
    text-align: justify
}

.text-nowrap {
    white-space: nowrap
}

@media (max-width: 767px) {
    .mobile-text-left {
        text-align:left
    }

    .mobile-text-right {
        text-align: right
    }

    .mobile-text-center {
        text-align: center
    }

    .mobile-text-justify {
        text-align: justify
    }

    .mobile-text-nowrap {
        white-space: nowrap
    }
}

.text-lowercase {
    text-transform: lowercase
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.text-bold {
    font-weight: 700
}

.text-normal {
    font-weight: 400
}

.text-italic {
    font-style: italic
}

.text-muted {
    color: #ccc
}

.text-primary {
    color: #0699cd
}

.text-success {
    color: #34d058
}

.text-info {
    color: #0699cd
}

.text-warning {
    color: #ffbd04
}

.text-danger {
    color: #fd4444
}

.text-white {
    color: #fff!important
}

.bg-success {
    background-color: #34d058
}

.bg-info {
    background-color: #0699cd
}

.bg-warning {
    background-color: #ffbd04
}

.bg-danger {
    background-color: #fd4444
}

.text-disabled {
    color: #4f5457!important;
    color: rgba(79,84,87,.5)!important
}

.text-dark-primary {
    color: #4f5457
}

.text-xs,.text-xsmall {
    font-size: 9.12px;
    font-size: .912rem;
    letter-spacing: -.18px;
    letter-spacing: -.018rem;
    line-height: 12.31px;
    line-height: 1.231rem
}

.text-sm,.text-small {
    font-size: 11.399px;
    font-size: 1.14rem;
    letter-spacing: -.219px;
    letter-spacing: -.022rem;
    line-height: 15.389px;
    line-height: 1.539rem
}

.text-md,.text-medium {
    font-size: 14.25px;
    font-size: 1.425rem;
    letter-spacing: -.28px;
    letter-spacing: -.028rem;
    line-height: 19.24px;
    line-height: 1.924rem
}

.text-large,.text-lg {
    font-size: 17.81px;
    font-size: 1.781rem;
    line-height: 24.04px;
    line-height: 2.404rem
}

.text-large,.text-lg,.text-xl,.text-xlarge {
    letter-spacing: -.439px;
    letter-spacing: -.044rem
}

.text-xl,.text-xlarge {
    font-size: 22.27px;
    font-size: 2.227rem;
    line-height: 30.049px;
    line-height: 3.005rem
}

.text-xxl,.text-xxlarge {
    font-size: 27.83px;
    font-size: 2.783rem;
    letter-spacing: -.55px;
    letter-spacing: -.055rem;
    line-height: 37.559px;
    line-height: 3.756rem
}

.text-fine {
    font-size: 9.12px;
    font-size: .912rem;
    letter-spacing: -.18px;
    letter-spacing: -.018rem;
    line-height: 12.31px;
    line-height: 1.231rem;
    display: inline-block
}

.text-fine,.text-light-gray {
    color: #838789
}

.text-label {
    font-weight: 700;
    font-size: 12.8px;
    font-size: 1.28rem;
    letter-spacing: -.439px;
    letter-spacing: -.044rem;
    font-style: normal;
    font-stretch: normal
}

.bg-primary {
    color: #fff;
    background-color: #0699cd
}

.bg-success {
    background-color: #d3e9b5
}

.bg-info {
    background-color: #caecf9
}

.bg-warning {
    background-color: #ffe399
}

.bg-danger {
    background-color: #ecb8ba
}

.page-header {
    padding-bottom: 10.5px;
    margin: 46px 0 23px;
    border-bottom: 1px solid #fff
}

ol,ul {
    margin-top: 0;
    margin-bottom: 11.5px
}

ol ol,ol ul,ul ol,ul ul {
    margin-bottom: 0
}

.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -5px
}

.list-inline>li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px
}

dl {
    margin-top: 0;
    margin-bottom: 23px
}

dd,dt {
    line-height: 1.66667
}

dt {
    font-weight: 700
}

dd {
    margin-left: 0
}

abbr[data-original-title],abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #ccc
}

.initialism {
    font-size: 90%;
    text-transform: uppercase
}

blockquote {
    padding: 11.5px 23px;
    margin: 0 0 23px;
    font-size: 17.8125px;
    border-left: 5px solid #0699cd
}

blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child {
    margin-bottom: 0
}

blockquote .small,blockquote footer,blockquote small {
    display: block;
    font-size: 80%;
    line-height: 1.66667;
    color: #ccc
}

blockquote .small:before,blockquote footer:before,blockquote small:before {
    content: "\2014   \A0"
}

.blockquote-reverse,blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid #0699cd;
    border-left: 0;
    text-align: right
}

.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before {
    content: ""
}

.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after {
    content: "\A0   \2014"
}

address {
    margin-bottom: 23px;
    font-style: normal;
    line-height: 1.66667
}

.ellipsis-overflow {
    overflow: hidden
}

a {
    cursor: pointer
}

.btn-link:focus,.btn-link:hover,a,a:focus,a:hover {
    text-decoration: none
}

.hide {
    display: none!important
}

.affix {
    position: fixed
}

.three-lines-tall {
    width: 60px
}

.clearfix:after,.clearfix:before {
    display: table;
    content: " "
}

.clearfix:after {
    clear: both
}

.show {
    display: block!important
}

.hidden {
    display: none!important;
    visibility: hidden!important
}

.invisible {
    visibility: hidden
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-line-through {
    text-decoration: line-through
}

.pull-left {
    float: left!important
}

.pull-right {
    float: right!important
}

.list-unstyled {
    padding-left: 0;
    list-style: none
}

.uppercase {
    text-transform: uppercase
}

.full-width {
    width: 100%
}

.center-text {
    text-align: center
}

.left-align-text {
    text-align: left
}

.right-align-text {
    text-align: right
}

.display-inline {
    display: inline
}

.display-inline-block {
    display: inline-block
}

.display-block {
    display: block
}

.vertical-align-middle {
    vertical-align: middle
}

.link-reset {
    color: inherit
}

.link-reset:active,.link-reset:hover {
    color: inherit;
    outline: none;
    text-decoration: none
}

.ellipsis-overflow {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.white-box {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    -webkit-box-shadow: 0,2px,10px,0,rgba(0,0,0,.1);
    box-shadow: 0,2px,10px,0,rgba(0,0,0,.1)
}

.white-box.light-hover-shadow:hover {
    -webkit-box-shadow: 0,0,8px,0,rgba(0,0,0,.1);
    box-shadow: 0,0,8px,0,rgba(0,0,0,.1)
}

.overflow-hidden {
    overflow: hidden
}

.clickable {
    cursor: pointer
}

.form-control,input {
    padding: 8px 12px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    color: #4f5457;
    font-family: Open Sans;
    letter-spacing: -.28px;
    letter-spacing: -.028rem;
    font-weight: 400
}

.form-control,.form-control:focus,input,input:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

.form-control:focus,input:focus {
    border: 2px solid #0699cd
}

.form-controlfocus+li,inputfocus+li {
    color: #0699cd
}

label {
    margin-bottom: 2px;
    font-style: normal;
    font-stretch: normal
}

.fat-label,label {
    font-size: 12.8px;
    color: #838789;
    letter-spacing: -.61px
}

.fat-label {
    font-weight: 700
}

.reset-label.fat-label,.reset-label .fat-label,.reset-labellabel,.reset-label label {
    font-size: 14.25px;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
    font-weight: 400
}

textarea {
    overflow: auto;
    resize: none
}

.input-group input,input[type=email],input[type=text],textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.margin-sm {
    margin: 4px
}

.margin-md {
    margin: 8px
}

.margin-lg {
    margin: 12px
}

.margin-xl {
    margin: 15px
}

.margin-xxl {
    margin: 30px
}

.margin-top-sm {
    margin-top: 4px!important
}

.margin-top-md {
    margin-top: 8px!important
}

.margin-top-lg {
    margin-top: 12px!important
}

.margin-top-xl {
    margin-top: 16px!important
}

.margin-top-xxl {
    margin-top: 30px!important
}

.margin-bottom-sm {
    margin-bottom: 4px!important
}

.margin-bottom-md {
    margin-bottom: 8px!important
}

.margin-bottom-lg {
    margin-bottom: 12px!important
}

.margin-bottom-xl {
    margin-bottom: 16px!important
}

.margin-bottom-xxl {
    margin-bottom: 30px!important
}

.margin-right-sm {
    margin-right: 4px!important
}

.margin-right-md {
    margin-right: 8px!important
}

.margin-right-lg {
    margin-right: 12px!important
}

.margin-right-xl {
    margin-right: 16px!important
}

.margin-right-xxl {
    margin-right: 30px!important
}

.margin-left-sm {
    margin-left: 4px!important
}

.margin-left-md {
    margin-left: 8px!important
}

.margin-left-lg {
    margin-left: 12px!important
}

.margin-left-xl {
    margin-left: 16px!important
}

.margin-left-xxl {
    margin-left: 30px!important
}

@media (max-width: 768px) {
    .mobile-margin-sm {
        margin:4px
    }

    .mobile-margin-md {
        margin: 8px
    }

    .mobile-margin-lg {
        margin: 12px
    }

    .mobile-margin-xl {
        margin: 15px
    }

    .mobile-margin-top-sm {
        margin-top: 4px!important
    }

    .mobile-margin-top-md {
        margin-top: 8px!important
    }

    .mobile-margin-top-lg {
        margin-top: 12px!important
    }

    .mobile-margin-top-xl {
        margin-top: 16px!important
    }

    .mobile-margin-top-xxl {
        margin-top: 30px!important
    }

    .mobile-margin-bottom-sm {
        margin-bottom: 4px!important
    }

    .mobile-margin-bottom-md {
        margin-bottom: 8px!important
    }

    .mobile-margin-bottom-lg {
        margin-bottom: 12px!important
    }

    .mobile-margin-bottom-xl {
        margin-bottom: 16px!important
    }

    .mobile-margin-bottom-xxl {
        margin-bottom: 30px!important
    }

    .mobile-margin-right-sm {
        margin-right: 4px!important
    }

    .mobile-margin-right-md {
        margin-right: 8px!important
    }

    .mobile-margin-right-xl {
        margin-right: 16px!important
    }

    .mobile-margin-right-xxl {
        margin-right: 30px!important
    }

    .mobile-margin-left-sm {
        margin-left: 4px!important
    }

    .mobile-margin-left-md {
        margin-left: 8px!important
    }

    .mobile-margin-left-lg {
        margin-left: 12px!important
    }

    .mobile-margin-left-xl {
        margin-left: 16px!important
    }

    .mobile-margin-left-xxl {
        margin-left: 30px!important
    }

    .mobile-margin-bottom {
        margin-bottom: 20px
    }
}

@media (max-width: 768px) {
    .padding-margin-sm {
        margin:4px
    }

    .padding-margin-md {
        margin: 8px
    }

    .padding-margin-lg {
        margin: 12px
    }

    .padding-margin-xl {
        margin: 15px
    }

    .padding-margin-top-sm {
        margin-top: 4px!important
    }

    .padding-margin-top-md {
        margin-top: 8px!important
    }

    .padding-margin-top-lg {
        margin-top: 12px!important
    }

    .padding-margin-top-xl {
        margin-top: 16px!important
    }

    .padding-margin-top-xxl {
        margin-top: 30px!important
    }

    .padding-margin-bottom-sm {
        margin-bottom: 4px!important
    }

    .padding-margin-bottom-md {
        margin-bottom: 8px!important
    }

    .padding-margin-bottom-lg {
        margin-bottom: 12px!important
    }

    .padding-margin-bottom-xl {
        margin-bottom: 16px!important
    }

    .padding-margin-bottom-xxl {
        margin-bottom: 30px!important
    }

    .padding-margin-right-sm {
        margin-right: 4px!important
    }

    .padding-margin-right-md {
        margin-right: 8px!important
    }

    .padding-margin-right-xl {
        margin-right: 16px!important
    }

    .padding-margin-right-xxl {
        margin-right: 30px!important
    }

    .padding-margin-left-sm {
        margin-left: 4px!important
    }

    .padding-margin-left-md {
        margin-left: 8px!important
    }

    .padding-margin-left-lg {
        margin-left: 12px!important
    }

    .padding-margin-left-xl {
        margin-left: 16px!important
    }

    .padding-margin-left-xxl {
        margin-left: 30px!important
    }

    .padding-margin-bottom {
        margin-bottom: 20px
    }
}

@media (min-width: 768px) {
    .desktop-margin-sm {
        margin:4px
    }

    .desktop-margin-md {
        margin: 8px
    }

    .desktop-margin-lg {
        margin: 12px
    }

    .desktop-margin-xl {
        margin: 15px
    }

    .desktop-margin-top-sm {
        margin-top: 4px!important
    }

    .desktop-margin-top-md {
        margin-top: 8px!important
    }

    .desktop-margin-top-lg {
        margin-top: 12px!important
    }

    .desktop-margin-top-xl {
        margin-top: 16px!important
    }

    .desktop-margin-top-xxl {
        margin-top: 30px!important
    }

    .desktop-margin-bottom-sm {
        margin-bottom: 4px!important
    }

    .desktop-margin-bottom-md {
        margin-bottom: 8px!important
    }

    .desktop-margin-bottom-lg {
        margin-bottom: 12px!important
    }

    .desktop-margin-bottom-xl {
        margin-bottom: 16px!important
    }

    .desktop-margin-bottom-xxl {
        margin-bottom: 30px!important
    }

    .desktop-margin-right-sm {
        margin-right: 4px!important
    }

    .desktop-margin-right-md {
        margin-right: 8px!important
    }

    .desktop-margin-right-xl {
        margin-right: 16px!important
    }

    .desktop-margin-right-xxl {
        margin-right: 30px!important
    }

    .desktop-margin-left-sm {
        margin-left: 4px!important
    }

    .desktop-margin-left-md {
        margin-left: 8px!important
    }

    .desktop-margin-left-lg {
        margin-left: 12px!important
    }

    .desktop-margin-left-xl {
        margin-left: 16px!important
    }

    .desktop-margin-left-xxl {
        margin-left: 30px!important
    }

    .desktop-margin-bottom {
        margin-bottom: 20px
    }
}

.no-padding {
    padding: 0
}

.no-padding-left {
    padding-left: 0!important
}

.no-padding-right {
    padding-right: 0!important
}

.rounded-corners {
    border-radius: 8px
}

.rounded-corners-bottom {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px
}

.rounded-corners-top {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px
}

@media (max-width: 767px) {
    .mobile-hide {
        display:none!important
    }
}

@media (min-width: 768px) {
    .desktop-hide {
        display:none!important
    }
}

@media (max-width: 768px) {
    .mobile-show {
        display:block!important
    }
}

@media (max-width: 992px) {
    .tablet-hide {
        display:none
    }
}

.desktop-show {
    display: none
}

@media (min-width: 992) {
    .desktop-show {
        display:block
    }
}

.tablet-show {
    display: block
}

@media (min-width: 992px) {
    .tablet-show {
        display:none!important
    }
}

@media (max-width: 768px) {
    .mobile-show {
        display:block
    }
}

@media (min-width: 768px) {
    .mobile-no-margin-bottom {
        margin-bottom:0!important
    }

    .mobile-no-margin-top {
        margin-top: 0!important
    }

    .mobile-no-margin {
        margin-top: 0
    }
}

.no-margin-bottom {
    margin-bottom: 0!important
}

.no-margin-top {
    margin-top: 0!important
}

.no-margin {
    margin-top: 0
}

.clear-margin {
    margin: 0
}

.padding-sm {
    padding: 4px
}

.padding-md {
    padding: 8px
}

.padding-lg {
    padding: 12px
}

.padding-xl {
    padding: 15px
}

.padding-xxl {
    padding: 30px
}

.padding-top-sm {
    padding-top: 4px!important
}

.padding-top-md {
    padding-top: 8px!important
}

.padding-top-lg {
    padding-top: 12px!important
}

.padding-top-xl {
    padding-top: 16px!important
}

.padding-top-xxl {
    padding-top: 30px!important
}

.padding-bottom-sm {
    padding-bottom: 4px!important
}

.padding-bottom-md {
    padding-bottom: 8px!important
}

.padding-bottom-lg {
    padding-bottom: 12px!important
}

.padding-bottom-xl {
    padding-bottom: 16px!important
}

.padding-bottom-xxl {
    padding-bottom: 30px!important
}

.padding-right-sm {
    padding-right: 4px!important
}

.padding-right-md {
    padding-right: 8px!important
}

.padding-right-lg {
    padding-right: 12px!important
}

.padding-right-xl {
    padding-right: 16px!important
}

.padding-right-xxl {
    padding-right: 30px!important
}

.padding-left-sm {
    padding-left: 4px!important
}

.padding-left-md {
    padding-left: 8px!important
}

.padding-left-lg {
    padding-left: 12px!important
}

.padding-left-xl {
    padding-left: 16px!important
}

.padding-left-xxl {
    padding-left: 30px!important
}

.standard-padding {
    padding: 15px
}

.paddding-sm {
    padding: 4px
}

.paddding-md {
    padding: 8px
}

.paddding-lg {
    padding: 12px
}

.paddding-xl {
    padding: 16px
}

.paddding-xxl {
    padding: 30px
}

.paddding-top-sm {
    padding-top: 4px!important
}

.paddding-top-md {
    padding-top: 8px!important
}

.paddding-top-lg {
    padding-top: 12px!important
}

.paddding-top-xl {
    padding-top: 16px!important
}

.paddding-top-xxl {
    padding-top: 30px!important
}

.paddding-bottom-sm {
    padding-bottom: 4px!important
}

.paddding-bottom-md {
    padding-bottom: 8px!important
}

.paddding-bottom-lg {
    padding-bottom: 12px!important
}

.paddding-bottom-xl {
    padding-bottom: 16px!important
}

.paddding-bottom-xxl {
    padding-bottom: 30px!important
}

.paddding-right-sm {
    padding-right: 4px!important
}

.paddding-right-md {
    padding-right: 8px!important
}

.paddding-right-lg {
    padding-left: 12px!important
}

.paddding-right-xl {
    padding-left: 16px!important
}

.paddding-left-sm {
    padding-left: 4px!important
}

.paddding-left-md {
    padding-left: 8px!important
}

.paddding-left-lg {
    padding-left: 12px!important
}

.paddding-left-xl {
    padding-left: 16px!important
}

.paddding-left-xxl {
    padding-left: 30px!important
}

.no-padding-top {
    padding-top: 0!important
}

.no-padding-bottom {
    padding-bottom: 0!important
}

.no-padding {
    padding: 0!important
}

.flex-inline {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.flex-bounded {
    min-width: 0
}

@media (max-width: 768px) {
    .mobile-flex-direction-column {
        -webkit-box-orient:vertical!important;
        -webkit-box-direction: normal!important;
        -webkit-flex-direction: column!important;
        -ms-flex-direction: column!important;
        flex-direction: column!important
    }

    .mobile-flex-direction-row {
        -webkit-box-orient: horizontal!important;
        -webkit-box-direction: normal!important;
        -webkit-flex-direction: row!important;
        -ms-flex-direction: row!important;
        flex-direction: row!important
    }

    .mobile-flex-align-start {
        -webkit-box-align: start!important;
        -webkit-align-items: flex-start!important;
        -ms-flex-align: start!important;
        align-items: flex-start!important
    }

    .mobile-flex-align-center {
        -webkit-box-align: center!important;
        -webkit-align-items: center!important;
        -ms-flex-align: center!important;
        align-items: center!important
    }

    .mobile-flex-align-end {
        -webkit-box-align: end!important;
        -webkit-align-items: flex-end!important;
        -ms-flex-align: end!important;
        align-items: flex-end!important
    }

    .mobile-flex-align-stretch {
        -webkit-box-align: stretch!important;
        -webkit-align-items: stretch!important;
        -ms-flex-align: stretch!important;
        align-items: stretch!important
    }

    .mobile-flex-justify-content-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.flex-1-auto {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto
}

.flex-1-half {
    -webkit-box-flex: 1;
    -webkit-flex: 1 50%;
    -ms-flex: 1 50%;
    flex: 1 50%
}

.flex-2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.flex-2-auto {
    -webkit-box-flex: 2;
    -webkit-flex: 2 auto;
    -ms-flex: 2 auto;
    flex: 2 auto
}

.flex-3 {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3
}

.flex-3-auto {
    -webkit-box-flex: 3;
    -webkit-flex: 3 auto;
    -ms-flex: 3 auto;
    flex: 3 auto
}

.flex-4 {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4
}

.flex-4-auto {
    -webkit-box-flex: 4;
    -webkit-flex: 4 auto;
    -ms-flex: 4 auto;
    flex: 4 auto
}

.flex-5 {
    -webkit-box-flex: 5;
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5
}

.flex-5-auto {
    -webkit-box-flex: 5;
    -webkit-flex: 5 auto;
    -ms-flex: 5 auto;
    flex: 5 auto
}

.flex-6 {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    -ms-flex: 6;
    flex: 6
}

.flex-6-auto {
    -webkit-box-flex: 6;
    -webkit-flex: 6 auto;
    -ms-flex: 6 auto;
    flex: 6 auto
}

.flex-7 {
    -webkit-box-flex: 7;
    -webkit-flex: 7;
    -ms-flex: 7;
    flex: 7
}

.flex-7-auto {
    -webkit-box-flex: 7;
    -webkit-flex: 7 auto;
    -ms-flex: 7 auto;
    flex: 7 auto
}

.flex-direction-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.flex-direction-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.flex-align-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.flex-align-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.flex-justify-content-space-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.flex-justify-content-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.flex-justify-content-start {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.flex-justify-content-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.flex-align-self-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.flex-align-self-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start
}

.flex-align-self-stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flex-direction-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-direction-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.flex-align-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.flex-justify-content-space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.flex-justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.flex-self-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start
}

.flex-self-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-wrap-reverse {
    -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse
}

.round-top-corners {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.flat-corners,.no-border-radius,.unrounded-corners {
    border-radius: 0!important
}

.flat-top {
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important
}

.flat-bottom {
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important
}

html {
    -webkit-tap-highlight-color: transparent
}

.full-height-app #app {
    height: calc(100vh - 60px)
}

.hide-chat-widget .intercom-launcher-frame {
    display: none
}

.full-height-app2 {
    height: calc(100vh - 60px)
}

.full-height-app2 #MainApp {
    height: 100%
}

.full-height-app2 #MainApp #app {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    height: calc(100vh - 60px)
}

.no-subheader #sub-header {
    display: none
}

#MainApp,#root {
    min-height: 100vh
}

#MainApp {
    width: 100%;
    height: 100%
}

#MainApp #app {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

embed,img,object,video {
    max-width: 100%;
    _width: 100%
}

@media (min-width: 0) {
    .navbar-right {
        float:right!important;
        right: 25px;
        margin-right: -15px;
        position: absolute
    }
}

.aligned-ul li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em
}

.locale-direction-right {
    direction: rtl
}

.locale-direction-right .flip-float-right {
    float: right!important
}

.locale-direction-right .flip-float-left {
    float: left!important
}

.locale-direction-right .flip-direction-row {
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: reverse!important;
    -webkit-flex-direction: row-reverse!important;
    -ms-flex-direction: row-reverse!important;
    flex-direction: row-reverse!important
}

.locale-direction-right .flip-align-left {
    text-align: left
}

.locale-direction-right .margin-right-zero {
    margin-right: 0!important
}

.locale-direction-right .margin-right-3 {
    margin-right: 3px!important
}

.locale-direction-right .padding-right-zero {
    padding-right: 0!important
}

.locale-direction-right .padding-left-5 {
    padding-left: 5px!important
}

.locale-direction-right .direction-ltr {
    direction: ltr
}

.locale-direction-right .direction-rtl {
    direction: rtl
}

.masked-h2 {
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.69px;
    letter-spacing: -.069rem;
    font-size: 20px;
    font-size: 2rem
}

.background-white {
    background-color: #fff
}

.background-black {
    background-color: #000
}

.background-light-gray {
    background-color: #efefef
}

.background-light-blue {
    background-color: #ecf9fe
}

.picker-dialog-bg { 
    z-index: 50000!important
}

.picker-dialog {
    z-index: 50001!important
}

.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal .alert {
    margin-bottom: 0
}

.modal.fade {
    opacity: 0;
    -webkit-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    transition: opacity .1s linear
}

.modal.fade.in {
    opacity: 1
}

.modal.no-borders .modal-body,.modal.no-borders .modal-footer,.modal.no-borders .modal-header {
    border: none
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.2);
    box-shadow: 0 3px 9px rgba(0,0,0,.2);
    background-clip: padding-box;
    outline: 0
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #000;
    z-index: 1040
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.fade,.modal-backdrop.in {
    -webkit-transition: opacity .1s ease-in-out;
    -o-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out
}

.modal-backdrop.in {
    opacity: .85!important
}

.modal-header {
    padding: 15px;
    min-height: 16.66667px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    -webkit-box-shadow: inset 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff;
    background-color: #f8f8f8;
    border-bottom: 1px solid #d8d8d8
}

.modal-header h1,.modal-header h2,.modal-header h3,.modal-header h4,.modal-header h5,.modal-header h6 {
    color: #4f5457;
    margin-bottom: 0
}

.modal-header .close {
    margin-top: -8px;
    text-shadow: none;
    -webkit-transition: all .1s cubic-bezier(.3,1,.3,.95) 0s;
    -o-transition: all .1s cubic-bezier(.3,1,.3,.95) 0s;
    transition: all .1s cubic-bezier(.3,1,.3,.95) 0s
}

.modal-header .close:hover {
    -webkit-transform: rotate(90deg) scale(1.2);
    -ms-transform: rotate(90deg) scale(1.2);
    transform: rotate(90deg) scale(1.2)
}

.modal-title {
    margin: 0;
    line-height: 1.66667
}

.modal-body {
    position: relative;
    padding: 15px
}

.modal-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.modal-footer .btn+.btn {
    margin-left: 5px;
    margin-bottom: 0
}

.modal-footer .btn-group .btn+.btn {
    margin-left: -1px
}

.modal-footer .btn-block+.btn-block {
    margin-left: 0
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.modal-header.modal-header-image {
    padding: 0
}

.modal-rounded-corners,.modal-rounded-corners .modal-content {
    border-radius: 8px;
    overflow: hidden
}

@media (min-width: 768px) {
    .modal-dialog {
        width:600px;
        margin: 30px auto
    }

    .modal-huatutor .modal-dialog {
        width: 480px!important
    }

    .modal-320 .modal-dialog {
        width: 320px!important
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
        box-shadow: 0 5px 15px rgba(0,0,0,.5)
    }

    .modal-sm {
        width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width:900px
    }
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes bounce {
    0%,20%,53%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

.hover-pulse:hover {
    -webkit-animation: pulse .31415s ease-out;
    animation: pulse .31415s ease-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1)
    }

    40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1)
    }

    50% {
        -webkit-transform: scale3d(1.15,.85,1);
        transform: scale3d(1.15,.85,1)
    }

    65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1)
    }

    75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shake {
    0%,to {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0,0,1,15deg);
        transform: rotate3d(0,0,1,15deg)
    }

    40% {
        -webkit-transform: rotate3d(0,0,1,-10deg);
        transform: rotate3d(0,0,1,-10deg)
    }

    60% {
        -webkit-transform: rotate3d(0,0,1,5deg);
        transform: rotate3d(0,0,1,5deg)
    }

    80% {
        -webkit-transform: rotate3d(0,0,1,-5deg);
        transform: rotate3d(0,0,1,-5deg)
    }

    to {
        -webkit-transform: rotate3d(0,0,1,0deg);
        transform: rotate3d(0,0,1,0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
        transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none
    }

    15% {
        -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
        transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
        -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
        transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
        transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
        -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
        transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
        transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-3000px,0);
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,25px,0);
        transform: translate3d(0,25px,0)
    }

    75% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px,0,0);
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px,0,0);
        transform: translate3d(25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0)
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,3000px,0);
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    75% {
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    50%,55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    40%,45% {
        opacity: 1;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,2000px,0);
        transform: translate3d(0,2000px,0)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px,0,0);
        transform: translate3d(20px,0,0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px,0,0);
        transform: translate3d(-2000px,0,0)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px,0,0);
        transform: translate3d(-20px,0,0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px,0,0);
        transform: translate3d(2000px,0,0)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    40%,45% {
        opacity: 1;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,-2000px,0);
        transform: translate3d(0,-2000px,0)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-2000px,0);
        transform: translate3d(0,-2000px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px,0,0);
        transform: translate3d(-2000px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px,0,0);
        transform: translate3d(2000px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,2000px,0);
        transform: translate3d(0,2000px,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,2000px,0);
        transform: translate3d(0,2000px,0)
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px,0,0);
        transform: translate3d(-2000px,0,0)
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px,0,0);
        transform: translate3d(2000px,0,0)
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,-2000px,0);
        transform: translate3d(0,-2000px,0)
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-1turn);
        transform: perspective(400px) rotate3d(0,1,0,-1turn);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
        transform: perspective(400px) scale3d(.95,.95,.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
        transform: perspective(400px) rotate3d(1,0,0,10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
        transform: perspective(400px) rotate3d(1,0,0,-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
        transform: perspective(400px) rotate3d(0,1,0,-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
        transform: perspective(400px) rotate3d(0,1,0,10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
        transform: perspective(400px) rotate3d(0,1,0,-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg);
        transform: perspective(400px) rotate3d(0,1,0,-15deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%,0,0) skewX(-30deg);
        transform: translate3d(100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%,0,0) skewX(30deg);
        transform: translate3d(100%,0,0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateY {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0,0,1,-1turn);
        transform: rotate3d(0,0,1,-1turn)
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rotateY {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0,0,1,-1turn);
        transform: rotate3d(0,0,1,-1turn)
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0,0,1,-200deg);
        transform: rotate3d(0,0,1,-200deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0,0,1,-90deg);
        transform: rotate3d(0,0,1,-90deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0,0,1,200deg);
        transform: rotate3d(0,0,1,200deg);
        opacity: 0
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0,0,1,90deg);
        transform: rotate3d(0,0,1,90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,60% {
        -webkit-transform: rotate3d(0,0,1,80deg);
        transform: rotate3d(0,0,1,80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,80% {
        -webkit-transform: rotate3d(0,0,1,60deg);
        transform: rotate3d(0,0,1,60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,700px,0);
        transform: translate3d(0,700px,0);
        opacity: 0
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
        transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
        transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
        transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    to {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
        transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
        transform: scale3d(.475,.475,.475) translate3d(42px,0,0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px,0,0);
        transform: scale(.1) translate3d(-2000px,0,0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
        transform: scale3d(.475,.475,.475) translate3d(-42px,0,0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px,0,0);
        transform: scale(.1) translate3d(2000px,0,0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
        transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp
}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes shimmer {
    0% {
        background-position: -468px 0
    }

    to {
        background-position: 468px 0
    }
}

@keyframes shimmer {
    0% {
        background-position: -468px 0
    }

    to {
        background-position: 468px 0
    }
}

@-webkit-keyframes floatingx {
    0% {
        -webkit-transform: translate(0,0)
    }

    65% {
        -webkit-transform: translate(0,5px)
    }

    to {
        -webkit-transform: translate(0,0)
    }
}

@keyframes floatingx {
    0% {
        -webkit-transform: translate(0,0)
    }

    65% {
        -webkit-transform: translate(0,5px)
    }

    to {
        -webkit-transform: translate(0,0)
    }
}

@-webkit-keyframes flyaway {
    0% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: 13px;
        right: 25px;
        height: 70px
    }

    5% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: 13px;
        right: 0;
        height: 70px
    }

    20% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        top: 13px;
        right: -130px;
        height: 90px
    }

    40% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: -40px;
        right: -280px;
        opacity: 1
    }

    to {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        top: -200px;
        right: -1000px;
        height: 0;
        opacity: 0
    }
}

@keyframes flyaway {
    0% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: 13px;
        right: 25px;
        height: 70px
    }

    5% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: 13px;
        right: 0;
        height: 70px
    }

    20% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        top: 13px;
        right: -130px;
        height: 90px
    }

    40% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: -40px;
        right: -280px;
        opacity: 1
    }

    to {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        top: -200px;
        right: -1000px;
        height: 0;
        opacity: 0
    }
}

.animate-spin {
    -webkit-animation-name: spin;
    animation-name: spin
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.transition-fade-enter {
    opacity: .01;
    -webkit-transition: opacity .5s ease-in;
    -o-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in
}

.transition-fade-enter.transition-fade-enter-active {
    opacity: 1
}

.transition-fade-leave {
    opacity: 1;
    -webkit-transition: opacity .5s ease-in;
    -o-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in
}

.transition-fade-leave.transition-fade-leave-active {
    opacity: .01
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}

.fade.in,.fade.show {
    opacity: 1
}

.collapse {
    display: none
}

.collapse.in {
    display: block
}

tr .collapse.in {
    display: table-row
}

tbody .collapse.in {
    display: table-row-group
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height,visibility .35s ease;
    -o-transition: height,visibility .35s ease;
    transition: height,visibility .35s ease
}

.tooltip .tooltip-inner {
    padding: 8px!important;
    font-size: 14.25px;
    font-weight: 700
}

.alert {
    border-radius: 4px;
    margin-bottom: 15px;
    margin-bottom: 1.5rem;
    line-height: 19px;
    line-height: 1.9rem
}

.alert h1,.alert h2,.alert h3,.alert h4,.alert h5,.alert h6 {
    font-weight: 700!important;
    font-color: #fff
}

.alert a {
    text-decoration: underline
}

.alert a,.alert a:hover {
    color: #fff!important
}

.panel {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)!important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)!important;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    border-bottom: 0!important
}

.panel.panel--chromeless {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    border: 0!important;
    background: transparent!important
}

.panel.panel--chromeless .panel-body {
    padding: 0!important
}

.panel.panel-large-body-padding .panel-body {
    padding: 20px;
    padding: 2rem
}

.panel.panel-danger .panel-heading h1,.panel.panel-danger .panel-heading h2,.panel.panel-danger .panel-heading h3,.panel.panel-danger .panel-heading h4,.panel.panel-danger .panel-heading h5,.panel.panel-danger .panel-heading h6,.panel.panel-info .panel-heading h1,.panel.panel-info .panel-heading h2,.panel.panel-info .panel-heading h3,.panel.panel-info .panel-heading h4,.panel.panel-info .panel-heading h5,.panel.panel-info .panel-heading h6,.panel.panel-primary .panel-heading h1,.panel.panel-primary .panel-heading h2,.panel.panel-primary .panel-heading h3,.panel.panel-primary .panel-heading h4,.panel.panel-primary .panel-heading h5,.panel.panel-primary .panel-heading h6 {
    color: #fff
}

.panel.panel-danger .panel-heading h1 small,.panel.panel-danger .panel-heading h2 small,.panel.panel-danger .panel-heading h3 small,.panel.panel-danger .panel-heading h4 small,.panel.panel-danger .panel-heading h5 small,.panel.panel-danger .panel-heading h6 small,.panel.panel-info .panel-heading h1 small,.panel.panel-info .panel-heading h2 small,.panel.panel-info .panel-heading h3 small,.panel.panel-info .panel-heading h4 small,.panel.panel-info .panel-heading h5 small,.panel.panel-info .panel-heading h6 small,.panel.panel-primary .panel-heading h1 small,.panel.panel-primary .panel-heading h2 small,.panel.panel-primary .panel-heading h3 small,.panel.panel-primary .panel-heading h4 small,.panel.panel-primary .panel-heading h5 small,.panel.panel-primary .panel-heading h6 small {
    color: #fff!important
}

.panel .panel-heading {
    padding: 15px;
    padding: 1.5rem;
    border-bottom: 0
}

.panel .panel-heading h1,.panel .panel-heading h2,.panel .panel-heading h3,.panel .panel-heading h4,.panel .panel-heading h5,.panel .panel-heading h6 {
    color: #4f5457;
    margin-bottom: 0
}

.panel .panel-title {
    color: #4f5457
}

.panel .panel-title h1,.panel .panel-title h2,.panel .panel-title h3,.panel .panel-title h4,.panel .panel-title h5,.panel .panel-title h6 {
    color: #4f5457;
    margin-bottom: 0
}

.panel .panel-titleh1,.panel .panel-titleh2,.panel .panel-titleh3,.panel .panel-titleh4,.panel .panel-titleh5,.panel .panel-titleh6 {
    font-size: inherit
}

.panel-bordered {
    border: 1px solid #ccc!important
}

.panel-default>.panel-heading {
    color: #4f5457
}

.panel-footer {
    padding: 10px 15px
}

.panel-heading {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px
}

.panel-heading-warning .panel-heading {
    border-bottom: 2px solid #fd4444
}

.pagination {
    font-size: 16px;
    border: 1px solid #e6e6e6;
    margin: 15px 0
}

.pagination a {
    padding: 8px;
    border: 0!important
}

.pagination a.active {
    font-size: 16px
}

.table-responsive,table {
    border-radius: 8px
}

table thead {
    font-size: 10px;
    background-color: #fff;
    letter-spacing: 2px;
    font-weight: 700;
    border-bottom: 1px solid #e6e6e6;
    color: #4f5457
}

table td {
    padding: 10px 20px 10px 10px
}

table tbody tr:nth-child(2n) {
    background-color: #fff!important
}

table tbody tr:nth-child(odd) {
    background-color: #f8f8f8!important
}

table tbody tr:hover {
    background-color: #e3f3fe!important
}

.input-group-addon {
    color: #4f5457
}

.input-group-btn .btn {
    padding: 3.5px 12px
}

.input-group-btn .btn-large {
    padding: 8px 12px
}

.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn,.input-lg {
    height: 49px;
    font-size: 14.25px
}

#app,body,html {
    background-color: #f2f2f2
}

.modal {
    -webkit-overflow-scrolling: auto!important;
    overflow-y: auto!important
}

input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover,select:-webkit-autofill {
    color: #333;
    background-color: #fff;
    -webkit-box-shadow: 0 0 0 50px #fff inset;
    box-shadow: inset 0 0 0 50px #fff!important
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes bounce {
    0%,20%,53%,80%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        transform: translate3d(0,0,0)
    }

    40%,43% {
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        transform: translate3d(0,-30px,0)
    }

    70% {
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        transform: translate3d(0,-15px,0)
    }

    90% {
        transform: translate3d(0,-4px,0)
    }
}

@keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

@keyframes pulse {
    0% {
        transform: scale3d(1,1,1)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        transform: scale3d(1,1,1)
    }
}

@keyframes rubberBand {
    0% {
        transform: scale3d(1,1,1)
    }

    30% {
        transform: scale3d(1.25,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1)
    }

    to {
        transform: scale3d(1,1,1)
    }
}

@keyframes shake {
    0%,to {
        transform: translate3d(0,0,0)
    }

    10%,30%,50%,70%,90% {
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        transform: translate3d(10px,0,0)
    }
}

@keyframes swing {
    20% {
        transform: rotate3d(0,0,1,15deg)
    }

    40% {
        transform: rotate3d(0,0,1,-10deg)
    }

    60% {
        transform: rotate3d(0,0,1,5deg)
    }

    80% {
        transform: rotate3d(0,0,1,-5deg)
    }

    to {
        transform: rotate3d(0,0,1,0deg)
    }
}

@keyframes tada {
    0% {
        transform: scale3d(1,1,1)
    }

    10%,20% {
        transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }

    to {
        transform: scale3d(1,1,1)
    }
}

@keyframes wobble {
    0% {
        transform: none
    }

    15% {
        transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
        transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
        transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
        transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
        transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
    }

    to {
        transform: none
    }
}

@keyframes bounceIn {
    0%,20%,40%,60%,80%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    20% {
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        transform: scale3d(1,1,1)
    }
}

@keyframes bounceInDown {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,25px,0)
    }

    75% {
        transform: translate3d(0,-10px,0)
    }

    90% {
        transform: translate3d(0,5px,0)
    }

    to {
        transform: none
    }
}

@keyframes bounceInLeft {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px,0,0)
    }

    75% {
        transform: translate3d(-10px,0,0)
    }

    90% {
        transform: translate3d(5px,0,0)
    }

    to {
        transform: none
    }
}

@keyframes bounceInRight {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
        transform: none
    }
}

@keyframes bounceInUp {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,-20px,0)
    }

    75% {
        transform: translate3d(0,10px,0)
    }

    90% {
        transform: translate3d(0,-5px,0)
    }

    to {
        transform: translate3d(0,0,0)
    }
}

@keyframes bounceOut {
    20% {
        transform: scale3d(.9,.9,.9)
    }

    50%,55% {
        opacity: 1;
        transform: scale3d(1.1,1.1,1.1)
    }

    to {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }
}

@keyframes bounceOutDown {
    20% {
        transform: translate3d(0,10px,0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,-20px,0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px,0,0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,0,0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px,0,0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0,-10px,0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,20px,0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translate3d(-2000px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,0,0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }
}

@keyframes flip {
    0% {
        transform: perspective(400px) rotate3d(0,1,0,-1turn);
        animation-timing-function: ease-out
    }

    40% {
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        animation-timing-function: ease-out
    }

    50% {
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        animation-timing-function: ease-in
    }

    80% {
        transform: perspective(400px) scale3d(.95,.95,.95);
        animation-timing-function: ease-in
    }

    to {
        transform: perspective(400px);
        animation-timing-function: ease-in
    }
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(1,0,0,10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(1,0,0,-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(0,1,0,-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(0,1,0,10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(0,1,0,-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotate3d(0,1,0,-15deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        opacity: 0
    }
}

@keyframes lightSpeedIn {
    0% {
        transform: translate3d(100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        transform: skewX(-5deg);
        opacity: 1
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(100%,0,0) skewX(30deg);
        opacity: 0
    }
}

@keyframes rotateIn {
    0% {
        transform-origin: center;
        transform: rotate3d(0,0,1,-200deg);
        opacity: 0
    }

    to {
        transform-origin: center;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate3d(0,0,1,-45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    0% {
        transform-origin: right bottom;
        transform: rotate3d(0,0,1,45deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate3d(0,0,1,45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate3d(0,0,1,-90deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateOut {
    0% {
        transform-origin: center;
        opacity: 1
    }

    to {
        transform-origin: center;
        transform: rotate3d(0,0,1,200deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        transform-origin: left bottom;
        transform: rotate3d(0,0,1,45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    0% {
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        transform-origin: right bottom;
        transform: rotate3d(0,0,1,-45deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    0% {
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        transform-origin: left bottom;
        transform: rotate3d(0,0,1,-45deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    0% {
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        transform-origin: right bottom;
        transform: rotate3d(0,0,1,90deg);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    20%,60% {
        transform: rotate3d(0,0,1,80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    40%,80% {
        transform: rotate3d(0,0,1,60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        transform: translate3d(0,700px,0);
        opacity: 0
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    to {
        opacity: 0
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(42px,0,0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px,0,0);
        transform-origin: left center
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-42px,0,0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px,0,0);
        transform-origin: right center
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0,-100%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%,0,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

@keyframes slideInRight {
    0% {
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0,100%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

@keyframes slideOutDown {
    0% {
        transform: translate3d(0,0,0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,100%,0)
    }
}

@keyframes slideOutLeft {
    0% {
        transform: translate3d(0,0,0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%,0,0)
    }
}

@keyframes slideOutRight {
    0% {
        transform: translate3d(0,0,0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%,0,0)
    }
}

@keyframes slideOutUp {
    0% {
        transform: translate3d(0,0,0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0,-100%,0)
    }
}

.ErrorPlaceholder {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 4px solid #fd4444;
    padding: 4px
}

@media (min-width: 992px) {
    .SiteFooter-left {
        padding-right:24px
    }

    .SiteFooter .links a {
        display: block
    }
}

@media (max-width: 992px) {
    .SiteFooter {
        -webkit-box-orient:vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .SiteFooter-left,.SiteFooter-right-one {
        margin-top: 24px
    }
}

.SiteFooter {
    max-width: 100%;
    font-weight: 700;
    background-color: #f2f2f2;
    border-bottom: 8px solid #0699cd;
    border-top: 1px solid #d8d8d8;
    font-size: 14.25px
}

.SiteFooter.SiteFooter--inverted {
    background: #222;
    border-bottom: 8px solid #0699cd
}

.SiteFooter.SiteFooter--inverted .links a {
    color: #fff
}

.SiteFooter.SiteFooter--inverted .links a:hover {
    color: #0699cd
}

.SiteFooter .SiteFooter-left {
    color: #3e4245
}

.SiteFooter .SiteFooter-right h3 {
    font-size: 18px;
    font-weight: 700
}

@media (max-width: 992px) {
    .SiteFooter .links a {
        display:block
    }
}

.SiteFooter .links a {
    color: #4f5457;
    -webkit-transition: color .1s;
    -o-transition: color .1s;
    transition: color .1s
}

.SiteFooter .links a:hover {
    color: #0699cd
}

.SiteFooter .dropdown-menu {
    max-height: 300px;
    overflow-y: auto
}

.SiteFooter .footer-site-language {
    height: 50px;
    text-align: left;
    border-radius: 8px;
    border: 1px solid #4f5457;
    background-color: transparent;
    color: #4f5457!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    width: 150px
}

.SiteFooter .footer-site-language .dropdown-menu {
    width: 250px
}

.SiteFooter .footer-site-language .caret {
    border-color: #4f5457 transparent transparent;
    border-style: solid;
    border-width: 5px 5px 2.5px;
    display: inline-block;
    height: 0;
    width: 0;
    position: absolute;
    right: 10px;
    top: 20px
}

.SiteFooter.SiteFooter--inverted .dropdown-toggle {
    border: 1px solid #fff!important;
    color: #fff!important
}

.SiteFooter.SiteFooter--inverted .caret {
    border-color: #fff transparent transparent
}

.HuatutorAlert .panel-body {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px
}

.HuatutorAlert.HuatutorAlert--warning .panel-body {
    border-left: 4px solid #ffca28
}

.HuatutorAlert.HuatutorAlert--danger .panel-body {
    border-left: 4px solid #f44336
}

.HuatutorAlert.HuatutorAlert--default .panel-body,.HuatutorAlert.HuatutorAlert--primary .panel-body {
    border-left: 4px solid #2196f3
}

.HuatutorAlert.HuatutorAlert--success .panel-body {
    border-left: 4px solid #4caf50
}

.HuatutorAlert .HuatutorAlert__icon {
    margin-top: -8px
}

.Responsive {
    display: none
}

@media only screen and (max-width: 992px) {
    .Responsive.Responsive--isMax992 {
        display:inherit
    }
}

@media only screen and (min-width: 992px) {
    .Responsive.Responsive--isMin992 {
        display:inherit
    }
}

.Columns.Columns--1 {
    -webkit-column-count: 1;
    column-count: 1
}

.Columns.Columns--2 {
    -webkit-column-count: 2;
    column-count: 2
}

.Columns.Columns--3 {
    -webkit-column-count: 3;
    column-count: 3
}

.Columns.Columns--4 {
    -webkit-column-count: 4;
    column-count: 4
}

.Columns.Columns--5 {
    -webkit-column-count: 5;
    column-count: 5
}

.Columns.Columns--6 {
    -webkit-column-count: 6;
    column-count: 6
}

@media only screen and (max-width: 768px) {
    .Columns.Columns__mobile--1 {
        -webkit-column-count:1;
        column-count: 1
    }

    .Columns.Columns__mobile--2 {
        -webkit-column-count: 2;
        column-count: 2
    }

    .Columns.Columns__mobile--3 {
        -webkit-column-count: 3;
        column-count: 3
    }

    .Columns.Columns__mobile--4 {
        -webkit-column-count: 4;
        column-count: 4
    }

    .Columns.Columns__mobile--5 {
        -webkit-column-count: 5;
        column-count: 5
    }

    .Columns.Columns__mobile--6 {
        -webkit-column-count: 6;
        column-count: 6
    }
}

.TextareaWidgets__Container {
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    width: 100%;
    padding: 11px;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out
}

.TextareaWidgets__Input {
    width: 100%;
    border: 0!important;
    padding: 0;
    margin: 0;
    color: #4f5457;
    letter-spacing: .5px;
    letter-spacing: .8px;
    letter-spacing: .05rem;
    font-weight: 400;
    outline: none
}

.SelectableList.SelectableList-lined .SelectableList__item {
    border-bottom: 1px solid #efefef
}

.SelectableList .SelectableList__item {
    padding: 15px
}

.SelectableList .SelectableList__item--selected {
    background-color: #0699cd!important;
    color: #fff!important
}

.SelectableList .SelectableList__item--selected h1,.SelectableList .SelectableList__item--selected h1 small,.SelectableList .SelectableList__item--selected h2,.SelectableList .SelectableList__item--selected h2 small,.SelectableList .SelectableList__item--selected h3,.SelectableList .SelectableList__item--selected h3 small {
    color: #fff!important
}

.SelectableList .SelectableList__item:hover {
    background-color: #e3f3fe;
    cursor: pointer
}

.Accordion {
    text-align: left;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    position: relative
}

.Accordion:not(:first-child) {
    border-top: 0
}

.Accordion:last-child {
    border-bottom: 0
}

.Accordion .Accordion--title {
    margin: 20px 20px 20px 0;
    font-size: 16px
}

.Accordion .AdvancedAccordion--row {
    padding: 11px 11px 11px 0;
    font-size: 16px;
    height: 56px
}

.Accordion .fa-chevron-up {
    -webkit-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out
}

.Accordion .Accordion--answer {
    max-height: 0;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px 0 0;
    -webkit-transition: all .2s ease-in-out,padding .2s ease-in-out;
    -o-transition: all .2s ease-in-out,padding .2s ease-in-out;
    transition: all .2s ease-in-out,padding .2s ease-in-out;
    font-size: 14.25px;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px)
}

.Accordion.Accordion--open {
    overflow: hidden
}

.Accordion.Accordion--open .fa-chevron-up {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.Accordion.Accordion--open .Accordion--answer {
    padding: 0 20px 20px 0;
    max-height: 5000px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.btn-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch
}

.dropdown-menu .disabled a,.dropdown-menu .disabled a:focus,.dropdown-menu .disabled a:hover {
    color: #b1b1b1
}

.btn-flex .btn:first-child {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: left
}

.HorizontalSpacer>* {
    margin-right: 5px
}

.Table {
    border-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)!important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)!important;
    border: 1px solid #efefef
}

.Table .TableHeader .TableRowItem {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px
}

.Table .TableHeader:first-child {
    border-bottom: 1px solid #efefef
}

.Table .TableHeader:last-child {
    border-top: 1px solid #efefef
}

.Table .TableRowItem {
    padding: 10px
}

.Table .TableRow--only:nth-child(odd) {
    background-color: #f8f8f8
}

.Table .TableRow.TableRow--selected {
    background-color: #0699cd!important;
    color: #fff
}

.Table.Table--hoverable .TableRow--only {
    cursor: pointer
}

.Table.Table--hoverable .TableRow--only:hover {
    background-color: #e3f3fe
}

.CollapsiblePanel .panel-body {
    max-height: 0;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    //padding: 0 20px 0 0;
    padding: 0;
    -webkit-transition: all .2s ease-in-out,padding .2s ease-in-out;
    -o-transition: all .2s ease-in-out,padding .2s ease-in-out;
    transition: all .2s ease-in-out,padding .2s ease-in-out;
    font-size: 14.25px;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px)
}

.CollapsiblePanel.CollapsiblePanel--open {
    overflow: hidden
}

.CollapsiblePanel.CollapsiblePanel--open .panel-body {
    //:0 20px 20px 0;max-height: 200px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.CustomRadio input[type=radio] {
    display: none
}

.CustomRadio input[type=radio]+label {
    cursor: pointer
}

.CustomRadio input[type=radio]+label .Radio--Fake {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%
}

.CustomRadio input[type=radio]+label .Radio--Fake .Radio--FakeInner {
    background-color: #fff;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    margin-top: 8px;
    border-radius: 50%;
    cursor: pointer
}

.CustomRadio input[type=radio]+label .Radio--Fake {
    background-color: #ccc
}

.CustomRadio input[type=radio]:checked+label .Radio--Fake {
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c)
}

.CustomRadio input[type=radio]+label .Radio--Fake,.CustomRadio input[type=radio]:checked+label .Radio--Fake {
    -webkit-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
    transition: background-color .2s linear
}

.m-calendar {
    display: inline-block
}

.m-calendar table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed
}

.m-calendar td {
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
    color: #dfe0e4;
    border: 1px solid #dfe0e4
}

.m-calendar thead td {
    color: #0699cd;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px
}

.m-calendar tbody td {
    color: #666
}

.m-calendar tbody td.faded {
    color: #ccc;
    cursor: default
}

.m-calendar tbody td:hover.faded {
    color: #ccc;
    background-color: #fff;
    border: 1px solid #dfe0e4!important
}

.m-calendar tbody td:hover {
    background: #0699cd;
    border-color: #0699cd;
    color: #fff
}

.m-calendar .current-day {
    color: #0699cd;
    font-weight: 700
}

.m-calendar .next-month,.m-calendar .prev-month {
    color: #999
}

.m-calendar .fa-chevron-right {
    padding-left: 5px
}

.m-calendar .fa-chevron-right:hover {
    padding-left: 7px
}

.m-calendar .fa-chevron-left {
    padding-right: 5px
}

.m-calendar .fa-chevron-left:hover {
    padding-right: 7px
}

.m-calendar .toolbar {
    line-height: 30px;
    color: #0699cd;
    text-align: center;
    margin-bottom: 13px
}

.m-calendar .toolbar button {
    position: relative;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    border: 1px solid #0699cd;
    border-radius: 50%;
    background: #0699cd;
    font-size: 20px;
    padding: 0;
    text-align: center;
    outline: 0;
    z-index: 5;
    cursor: pointer
}

.m-calendar .toolbar .prev-month {
    float: left
}

.m-calendar .toolbar .next-month {
    float: right
}

.m-calendar .toolbar .current-date {
    color: #888;
    font-size: 14.25px
}

.m-time {
    color: #fff
}

.m-time .showtime {
    text-align: center
}

.m-time tbody tr {
    border-bottom: 0!important
}

.m-time .separater {
    display: inline-block;
    font-size: 32px;
    font-weight: 700;
    color: #0699cd;
    width: 32px;
    height: 65px;
    line-height: 65px;
    text-align: center
}

.m-time .time-text {
    position: relative;
    left: -10px;
    font-size: 15px;
    color: #0699cd;
    margin-top: 7px;
    margin-bottom: 10px
}

.m-time .sliders {
    padding: 0 10px
}

.m-time .time {
    width: 65px;
    height: 65px;
    font-size: 38px;
    line-height: 65px;
    background-color: #0699cd;
    text-align: center
}

.m-time .time,.u-slider-time {
    display: inline-block;
    border-radius: 3px
}

.u-slider-time {
    position: relative;
    background-color: #dfe0e4;
    height: 4px;
    width: 100%;
    cursor: pointer
}

.u-slider-time .value {
    position: absolute;
    background-color: #0699cd;
    border-radius: 3px;
    top: 0;
    height: 100%
}

.u-slider-time .handle {
    position: absolute;
    width: 4px;
    height: 4px
}

.u-slider-time .handle:after {
    position: relative;
    display: block;
    content: "";
    top: -20px/2;
    left: -(4px+20px)/2;
    width: 4px + 20px;
    height: 4px + 20px;
    background-color: #fff;
    border: 3px solid #0699cd;
    border-radius: 50%;
    cursor: pointer
}

.im-btn {
    display: inline-block;
    background-color: #fff;
    border: 0;
    outline: 0;
    cursor: pointer;
    line-height: 1
}

.im-btn:before {
    margin-right: 6px
}

.m-input-moment {
    display: inline-block;
    background-color: #fff;
    z-index: 100;
    width: 300px
}

.m-input-moment table tbody tr {
    background-color: #fff!important
}

.m-input-moment .options {
    width: 100%;
    display: inline-block;
    margin-bottom: 4px
}

.m-input-moment .options button {
    float: left;
    width: 50%;
    color: #0699cd;
    text-align: center;
    font-size: 16px;
    padding: 7px;
    border: 1px solid #0699cd;
    border-radius: 8px
}

.m-input-moment .options button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.m-input-moment .options button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.m-input-moment .options button.is-active {
    color: #fff;
    background-color: #0699cd
}

.m-input-moment .tab {
    display: none
}

.m-input-moment .tab.is-active {
    display: block
}

.m-input-moment .btn-save {
    display: block;
    margin-top: 10px;
    width: 100%;
    background-color: #0699cd;
    padding: 12px 0;
    text-align: center;
    color: #fff;
    font-size: 16px;
    border-radius: 3px
}

.timepicker-picker {
    list-style: none
}

.timepicker-picker .list-unstyled {
    margin: 0
}

.timepicker-picker a[data-action] {
    padding: 6px 0
}

.timepicker-picker a[data-action]:active {
    -webkit-box-shadow: none;
    box-shadow: none
}

.timepicker-picker .timepicker-hour,.timepicker-picker .timepicker-minute,.timepicker-picker .timepicker-second {
    width: 54px;
    font-weight: 700;
    font-size: 1.2em;
    margin: auto;
    color: gray
}

.timepicker-picker button[data-action] {
    padding: 6px
}

.timepicker-picker .btn[data-action=incrementHours]:after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    content: "Increment Hours"
}

.timepicker-picker .btn[data-action=incrementMinutes]:after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    content: "Increment Minutes"
}

.timepicker-picker .btn[data-action=decrementHours]:after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    content: "Decrement Hours"
}

.timepicker-picker .btn[data-action=decrementMinutes]:after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    content: "Decrement Minutes"
}

.timepicker-picker .btn[data-action=togglePeriod]:after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    content: "Toggle AM/PM"
}

.timepicker-picker .picker-switch td span {
    line-height: 2.5;
    height: 2.5em;
    width: 100%
}

.timepicker-picker table {
    width: 100%;
    margin: 0
}

.timepicker-picker table td,.timepicker-picker table th {
    text-align: center;
    border-radius: 4px
}

.timepicker-picker table th {
    height: 20px;
    line-height: 20px;
    width: 20px
}

.timepicker-picker table th.prev:after {
    content: "Previous Month"
}

.timepicker-picker table th.next:after,.timepicker-picker table th.prev:after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0
}

.timepicker-picker table th.next:after {
    content: "Next Month"
}

.timepicker-picker table thead tr:first-child th {
    cursor: pointer
}

.timepicker-picker table thead tr:first-child th:hover {
    background: #eee
}

.timepicker-picker table td {
    height: 54px;
    line-height: 54px;
    width: 54px
}

.timepicker-picker table td.cw {
    font-size: .8em;
    height: 20px;
    line-height: 20px;
    color: #777
}

.timepicker-picker table td.day {
    height: 20px;
    line-height: 20px;
    width: 20px
}

.timepicker-picker table td.day:hover,.timepicker-picker table td.hour:hover,.timepicker-picker table td.minute:hover,.timepicker-picker table td.second:hover {
    background: #eee;
    cursor: pointer
}

.timepicker-picker table td.new,.timepicker-picker table td.old {
    color: #777
}

.timepicker-picker table td.active,.timepicker-picker table td.active:hover {
    background-color: #337ab7;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25)
}

.timepicker-picker table td.active.today:before {
    border-bottom-color: #fff
}

.timepicker-picker table td.disabled,.timepicker-picker table td.disabled:hover {
    background: none;
    color: #777;
    cursor: not-allowed
}

.timepicker-picker table td span {
    display: inline-block;
    height: 54px;
    width: 54px;
    line-height: 54px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 4px
}

.timepicker-picker table td span:hover {
    background: #eee
}

.timepicker-picker table td span.active {
    background-color: #337ab7;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25)
}

.timepicker-picker table td span.old {
    color: #777
}

.timepicker-picker table td span.disabled,.timepicker-picker table td span.disabled:hover {
    background: none;
    color: #777;
    cursor: not-allowed
}

.timepicker-picker.usetwentyfour td.hour {
    height: 27px;
    line-height: 27px
}

.timepicker-picker.wider {
    width: 21em
}

.timepicker-picker .datepicker-decades .decade {
    line-height: 1.8em!important
}

.input-group.date .input-group-addon {
    cursor: pointer
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0
}

.tooltip {
    pointer-events: none;
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 14px;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0
}

.tooltip.show {
    opacity: .9
}

.tooltip .arrow {
    position: absolute;
    display: block;
    width: 12.8px;
    width: .8rem;
    height: 6.4px;
    height: .4rem
}

.tooltip .arrow:before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid
}

.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top {
    padding: 6.4px 0;
    padding: .4rem 0
}

.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow {
    bottom: 0
}

.bs-tooltip-auto[x-placement^=top] .arrow:before,.bs-tooltip-top .arrow:before {
    top: 0;
    border-width: 6.4px 6.4px 0;
    border-width: .4rem .4rem 0;
    border-top-color: #000
}

.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right {
    padding: 0 6.4px;
    padding: 0 .4rem
}

.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow {
    left: 0;
    width: 6.4px;
    width: .4rem;
    height: 12.8px;
    height: .8rem
}

.bs-tooltip-auto[x-placement^=right] .arrow:before,.bs-tooltip-right .arrow:before {
    right: 0;
    border-width: 6.4px 6.4px 6.4px 0;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #000
}

.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom {
    padding: 6.4px 0;
    padding: .4rem 0
}

.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow {
    top: 0
}

.bs-tooltip-auto[x-placement^=bottom] .arrow:before,.bs-tooltip-bottom .arrow:before {
    bottom: 0;
    border-width: 0 6.4px 6.4px;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #000
}

.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left {
    padding: 0 6.4px;
    padding: 0 .4rem
}

.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow {
    right: 0;
    width: 6.4px;
    width: .4rem;
    height: 12.8px;
    height: .8rem
}

.bs-tooltip-auto[x-placement^=left] .arrow:before,.bs-tooltip-left .arrow:before {
    left: 0;
    border-width: 6.4px 0 6.4px 6.4px;
    border-width: .4rem 0 .4rem .4rem;
    border-left-color: #000
}

.tooltip-inner {
    max-width: 200px;
    padding: 4px 8px;
    padding: .25rem .5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem
}

.TextareaAutosize {
    -webkit-transition: height .2s ease;
    -o-transition: height .2s ease;
    transition: height .2s ease
}

.react-toggle {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
    display: inline-block;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}

.react-toggle svg path {
    fill: #787b83
}

.react-toggle-screenreader-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.react-toggle--disabled {
    cursor: not-allowed;
    opacity: .5;
    -webkit-transition: opacity .25s;
    -o-transition: opacity .25s;
    transition: opacity .25s
}

.react-toggle-track {
    width: 50px;
    height: 28px;
    padding: 0;
    border-radius: 30px;
    background-color: #f8f8f8;
    border: 1px solid #e6e6e6;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: #ccc
}

.react-toggle--checked .react-toggle-track {
    background-image: -webkit-linear-gradient(329deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(329deg,#0699cd,#3bb85c);
    background-image: linear-gradient(121deg,#0699cd,#3bb85c)
}

.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: #128d15
}

.react-toggle-track-check {
    position: absolute;
    width: 14px;
    height: 10px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 0;
    left: 8px;
    opacity: 0;
    -webkit-transition: opacity .25s ease;
    -o-transition: opacity .25s ease;
    transition: opacity .25s ease
}

.react-toggle--checked .react-toggle-track-check,.react-toggle-track-x {
    opacity: 1;
    -webkit-transition: opacity .25s ease;
    -o-transition: opacity .25s ease;
    transition: opacity .25s ease
}

.react-toggle-track-x {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 0;
    right: 10px
}

.react-toggle--checked .react-toggle-track-x {
    opacity: 0
}

.react-toggle-thumb {
    -webkit-transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
    -o-transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
    transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    background-color: #e6e6e6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease
}

.react-toggle--checked .react-toggle-thumb {
    left: 24px;
    border-color: #19ab27;
    background-color: #fff
}

.react-toggle--focus .react-toggle-thumb {
    -webkit-box-shadow: 0 0 3px 2px #0099e0;
    box-shadow: 0 0 2px 3px #0099e0
}

.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
    -webkit-box-shadow: 0 0 5px 5px #0099e0;
    box-shadow: 0 0 5px 5px #0099e0
}

.react-toggle--checked svg path {
    fill: #fff
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

*,:after,:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.rc-slider {
    position: relative;
    width: 100%;
    background-color: #d8d8d8;
    margin-top: 12px;
    cursor: pointer
}

.rc-slider,.rc-slider-track {
    height: 9px;
    border-radius: 8px
}

.rc-slider-track {
    position: absolute;
    left: 0;
    background-image: -webkit-linear-gradient(358deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(358deg,#0699cd,#3bb85c);
    background-image: linear-gradient(92deg,#0699cd,#3bb85c);
    z-index: 1
}

.rc-slider-handle {
    z-index: 2;
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
    border: 2px solid #e6e6e6;
    border-radius: 50%;
    margin: -11px
}

.rc-slider-handle-active:active,.rc-slider-handle:hover {
    border-color: #ccc
}

.rc-slider-mark {
    position: absolute;
    top: 14px;
    left: 2px;
    width: 100%;
    font-size: 13px;
    z-index: 3
}

.rc-slider-mark-text-current {
    font-weight: 700
}

.rc-slider-mark-text {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    color: #999
}

.rc-slider-mark-text-active {
    color: #666
}

.rc-slider-step {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 1
}

.rc-slider-dot {
    position: absolute;
    top: -2px;
    width: 8px;
    display: none;
    height: 8px;
    border: 2px solid #e9e9e9;
    background-color: #fff;
    cursor: pointer;
    border-radius: 50%;
    vertical-align: middle
}

.rc-slider-dot,.rc-slider-dot:first-child,.rc-slider-dot:last-child {
    margin-left: -4px
}

.rc-slider-dot-active {
    border-color: tint(#2db7f5,50%)
}

.rc-slider-disabled {
    background-color: #e9e9e9
}

.rc-slider-disabled .rc-slider-track {
    background-color: #ccc
}

.rc-slider-disabled .rc-slider-handle {
    border-color: #ccc;
    background-color: #fff;
    cursor: not-allowed
}

.rc-slider-disabled .dot,.rc-slider-disabled .rc-slider-mark-text {
    cursor: not-allowed!important
}

// slider tooltip style .rc-slider-tooltip {
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 4;
    visibility: visible
}

// slider tooltip style .rc-slider-tooltip-hidden {
    display: none
}

// slider tooltip style .rc-slider-tooltip-placement-points-bc-tc {
    padding: 4px 0 4px+4
}

// slider tooltip style .rc-slider-tooltip-inner {
    padding: 6px 5px;
    height: 24px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: tint(#666,4%);
    border-radius: 8px;
    -webkit-box-shadow: 0 0 4px #d9d9d9;
    box-shadow: 0 0 4px #d9d9d9
}

// slider tooltip style .rc-slider-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

// slider tooltip style .rc-slider-tooltip-placement-points-bc-tc // slider tooltip style .rc-slider-tooltip-arrow {
    bottom: 4px+4 - 4px;
    left: 50%;
    margin-left: -4px;
    border-width: 4px 4px 0;
    border-top-color: tint(#666,4%)
}

.zoom-motion .zoom-down-appear,.zoom-motion .zoom-down-enter,.zoom-motion .zoom-down-leave {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: block!important;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.zoom-motion .zoom-down-appear.zoom-down-appear-active,.zoom-motion .zoom-down-enter.zoom-down-enter-active {
    -webkit-animation-name: ~"zoomDownIn";
    animation-name: ~"zoomDownIn";
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.zoom-motion .zoom-down-leave.zoom-down-leave-active {
    -webkit-animation-name: ~"zoomDownOut";
    animation-name: ~"zoomDownOut";
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.form-group-lg select.form-control {
    height: 49px;
    line-height: 1.33
}

.form-group-lg select.form-control:before {
    padding-top: 1.3em
}

select.input-lg {
    height: 49px;
    line-height: 49px
}

.Select--blank,.Select--blank:focus {
    border: 0
}

.CustomSelect {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    z-index: 1
}

.CustomSelect.CustomSelect--full-width {
    width: 100%
}

.CustomSelect.WithIcon:after {
    font-family: FontAwesome;
    font-size: 15px;
    color: #ccc;
    padding-top: 4px;
    position: absolute;
    left: -15px;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.CustomSelect.WithIcon.camera:after {
    content: "\F03D"
}

.CustomSelect.WithIcon.mic:after {
    content: "\F130"
}

.CustomSelect.WithIcon select {
    padding-left: 25px
}

.CustomSelect:before {
    content: "\25BC";
    position: absolute;
    pointer-events: none;
    font-family: Arial;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    color: #82888a;
    top: 0;
    bottom: 1px;
    padding-top: .7em;
    font-size: 16px;
    line-height: 1;
    right: 0;
    width: 2em;
    z-index: 4;
    text-align: center;
    transform: scale(.84,.42);
    -webkit-transform: scale(.84,.42);
    -moz-transform: scale(.84,.42);
    -ms-transform: scale(.84,.42);
    -o-transform: scale(.84,.42);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.84, M12=0, M21=0, M22=0.42, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.84,M12=0,M21=0,M22=0.42,SizingMethod="auto expand")
}

.CustomSelect.large select {
    line-height: 1.33
}

.CustomSelect.large:before {
    padding-top: 1em;
    font-size: 18px
}

.CustomSelect select::-ms-expand {
    display: none
}

.CustomSelect .input-sm {
    font-size: 18.24px;
    font-size: 1.14rem;
    line-height: 22.4px;
    line-height: 1.4rem
}

.CustomSelect select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    -o-text-overflow: "";
    text-overflow: "";
    padding-right: 2em
}

.ProgressBar {
    border-radius: 6px;
    height: 8px;
    margin-top: 5px
}

.ProgressBar .ProgressBar--inner {
    width: 100%;
    height: 8px;
    border-radius: 6px;
    position: relative;
    z-index: 1
}

.ProgressBar .ProgressBar--inner div {
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c);
    border-radius: 6px;
    height: 8px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    -webkit-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out
}

.no-panel-padding .panel-body {
    padding: 0
}

.extra-panel-padding .panel-body {
    padding: 20px
}

.panel.panel--reset {
    border: 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

.Panel--CloseButton {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all .47s cubic-bezier(.3,1,.3,.95) 0s;
    -o-transition: all .47s cubic-bezier(.3,1,.3,.95) 0s;
    transition: all .47s cubic-bezier(.3,1,.3,.95) 0s
}

.Panel--CloseButton:hover {
    color: #ccc;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.Panel--CloseButton:hover g {
    fill: #ccc!important
}

.SelectablePanel {
    padding: 15px;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
    color: #838789
}

.SelectablePanel:hover {
    background-color: #e3f3fe;
    cursor: pointer
}

.PanelSelect--PanelList {
    margin-bottom: 0;
    overflow: hidden
}

.PanelSelect--PanelList li {
    padding: 10px 15px;
    border-top: 1px solid #efefef
}

.PanelSelect--PanelList li.active,.PanelSelect--PanelList li:hover {
    background-color: #e3f3fe
}

.PanelSelect--PanelList li label {
    margin: 0
}

.PanelSelect--PanelList li .Radio--Label {
    margin-left: 5px
}

.PanelSelect--PanelList li:first-child {
    border-top: 0
}

.Select {
    position: relative
}

.Select,.Select div,.Select input,.Select span {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.Select.is-disabled>.Select-control {
    background-color: #f9f9f9
}

.Select.is-disabled>.Select-control:hover {
    -webkit-box-shadow: none;
    box-shadow: none
}

.Select.is-disabled .Select-arrow-zone {
    cursor: default;
    pointer-events: none
}

.Select-control {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    color: #333;
    cursor: default;
    display: table;
    height: 32px;
    outline: none;
    overflow: hidden;
    position: relative;
    width: 100%
}

.Select-control:hover {
    //:0 1px 0 rgba(0,0,0,.06)}

.is-searchable.is-open>.Select-control {
    cursor: text
}

.is-open>.Select-control {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: #fff;
    border-color: #0699cd
}

.is-open>.Select-control>.Select-arrow {
    border-color: transparent transparent #999;
    border-width: 0 5px 5px
}

.is-searchable.is-focused:not(.is-open)>.Select-control {
    cursor: text
}

.is-focused:not(.is-open)>.Select-control {
    border-color: #007eff;
    //:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}

.Select--single>.Select-control .Select-value,.Select-placeholder {
    bottom: 0;
    color: #aaa;
    left: 0;
    line-height: 32px;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    right: 0;
    top: 0;
    max-width: 100%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value .Select-value-label,.has-value.Select--single>.Select-control>.Select-value .Select-value-label {
    color: #333
}

.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label,.has-value.Select--single>.Select-control>.Select-value a.Select-value-label {
    cursor: pointer;
    text-decoration: none
}

.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label:hover,.has-value.Select--single>.Select-control>.Select-value a.Select-value-label:focus,.has-value.Select--single>.Select-control>.Select-value a.Select-value-label:hover {
    color: #007eff;
    outline: none;
    text-decoration: underline
}

.Select-input {
    height: 34px;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle
}

.Select-input>input {
    width: 100%;
    background: none transparent;
    border: 0 none;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: default;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    outline: none;
    line-height: 14px;
    padding: 8px 0 12px;
    -webkit-appearance: none
}

.is-focused .Select-input>input {
    cursor: text
}

.has-value.is-pseudo-focused .Select-input {
    opacity: 0
}

.Select-control:not(.is-searchable)>.Select-input {
    outline: none
}

.Select-loading-zone {
    cursor: pointer;
    display: table-cell;
    text-align: center
}

.Select-loading,.Select-loading-zone {
    position: relative;
    vertical-align: middle;
    width: 16px
}

.Select-loading {
    -webkit-animation: Select-animation-spin .4s infinite linear;
    animation: Select-animation-spin .4s infinite linear;
    height: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-right-color: #333;
    display: inline-block
}

.Select-clear-zone {
    -webkit-animation: Select-animation-fadeIn .2s;
    animation: Select-animation-fadeIn .2s;
    color: #999;
    cursor: pointer;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 17px
}

.Select-clear-zone:hover {
    color: #d0021b
}

.Select-clear {
    display: inline-block;
    font-size: 18px;
    line-height: 1
}

.Select--multi .Select-clear-zone {
    width: 17px
}

.Select-arrow-zone {
    cursor: pointer;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 25px;
    padding-right: 5px
}

.Select-arrow {
    border-color: #999 transparent transparent;
    border-style: solid;
    border-width: 5px 5px 2.5px;
    display: inline-block;
    height: 0;
    width: 0
}

.is-open .Select-arrow,.Select-arrow-zone:hover>.Select-arrow {
    border-top-color: #666
}

@-webkit-keyframes Select-animation-fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes Select-animation-fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.Select-menu-outer {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top-color: #e6e6e6;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.06);
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: -1px;
    max-height: 200px;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1;
    -webkit-overflow-scrolling: touch
}

.Select-menu {
    max-height: 198px;
    overflow-y: auto
}

.Select-option {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    color: #666;
    cursor: pointer;
    display: block;
    padding: 8px 10px
}

.Select-option:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}

.Select-option.is-selected {
    background-color: #f5faff;
    background-color: #007eff;
    background-color: rgba(0,126,255,.04);
    color: #333
}

.Select-option.is-focused {
    background-color: #ebf5ff;
    background-color: #007eff;
    background-color: rgba(0,126,255,.08);
    color: #333
}

.Select-option.is-disabled {
    color: #ccc;
    cursor: default
}

.Select-noresults {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #999;
    cursor: default;
    display: block;
    padding: 8px 10px
}

.Select--multi .Select-input {
    vertical-align: middle;
    margin-left: 10px;
    padding: 0
}

.Select--multi.has-value .Select-input {
    margin-left: 5px
}

.Select--multi .Select-value {
    background-color: #ebf5ff;
    background-color: #007eff;
    background-color: rgba(0,126,255,.08);
    border-radius: 2px;
    border: 1px solid #007eff;
    border: 1px solid rgba(0,126,255,.24);
    color: #007eff;
    display: inline-block;
    font-size: .9em;
    line-height: 1.4;
    margin-left: 5px;
    margin-top: 5px;
    vertical-align: top
}

.Select--multi .Select-value-icon,.Select--multi .Select-value-label {
    display: inline-block;
    vertical-align: middle
}

.Select--multi .Select-value-label {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    cursor: default;
    padding: 2px 5px
}

.Select--multi a.Select-value-label {
    color: #007eff;
    cursor: pointer;
    text-decoration: none
}

.Select--multi a.Select-value-label:hover {
    text-decoration: underline
}

.Select--multi .Select-value-icon {
    cursor: pointer;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    border-right: 1px solid #c2e0ff;
    border-right: 1px solid rgba(0,126,255,.24);
    padding: 1px 5px 3px
}

.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover {
    background-color: #d8eafd;
    background-color: #0071e6;
    background-color: rgba(0,113,230,.08);
    color: #0071e6
}

.Select--multi .Select-value-icon:active {
    background-color: #c2e0ff;
    background-color: #007eff;
    background-color: rgba(0,126,255,.24)
}

.Select--multi.is-disabled .Select-value {
    background-color: #fcfcfc;
    border: 1px solid #e3e3e3;
    color: #333
}

.Select--multi.is-disabled .Select-value-icon {
    cursor: not-allowed;
    border-right: 1px solid #e3e3e3
}

.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover {
    background-color: #fcfcfc
}

@keyframes Select-animation-spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes Select-animation-spin {
    to {
        -webkit-transform: rotate(1turn)
    }
}

@media (max-width: 970px) {
    .Modal--MobileFullScreen .modal-dialog {
        width:100%;
        height: 100%;
        margin: 0;
        padding: 0
    }

    .Modal--MobileFullScreen .modal-content {
        height: auto;
        min-height: 100%;
        border-radius: 0
    }
}

.modal-header .close {
    font-size: 32px
}

.input-group-flat .form-control,.input-group-flat .input-group-addon {
    border-radius: 0!important
}

.input-group .input-group-addon {
    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out
}

.input-group.input-group--focuser .input-group-addon:first-child+input {
    padding-left: 0
}

.input-group.input-group--focuser .input-group-addon:first-child+.CustomSelect>select {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-right: 1px solid #e6e6e6;
    padding-left: 0
}

.input-group.input-group--focuser .input-group-addon:last-child+input {
    padding-right: 0
}

.input-group.input-group--focused .fat-label,.input-group.input-group--focused label {
    color: #0699cd
}

.input-group.input-group--focused .input-group-addon {
    border: 2px solid #0699cd;
    color: #0699cd
}

.input-group.input-group--focused .input-group-addon:first-child {
    border-right: 0
}

.input-group.input-group--focused .input-group-addon:last-child {
    border-left: 0
}

.input-group.input-group--focused .input-group-addon:first-child+.CustomSelect>select {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-right: 1px solid #0699cd;
    padding-left: 0
}

.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group .form-control:first-child {
    border-right-radius: 0;
    border-right: 0
}

.input-group-addon:first-child {
    border-right: 0
}

.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group .form-control:last-child {
    border-left-radius: 0;
    border-left: 0
}

.input-group-addon:last-child {
    border-left: 0
}

.vi {
    line-height: inherit!important;
    vertical-align: middle;
    display: inline-block
}

.vi,.vi-center {
    font-size: inherit
}

.vi-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.vi-inline {
    display: -webkit-inline-box!important;
    display: -webkit-inline-flex!important;
    display: -ms-inline-flexbox!important;
    display: inline-flex!important;
    padding-right: 8px;
    padding-right: .5rem;
    line-height: inherit!important
}

@-webkit-keyframes vi-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes vi-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.vi-spin {
    -webkit-animation: vi-spin 1s infinite linear;
    animation: vi-spin 1s infinite linear
}

.Icon svg {
    stroke-width: .1px
}

.form-group.form-group--focused .fat-label,.form-group.form-group--focused label {
    color: #0699cd
}

.form-group.has-danger .fat-label,.form-group.has-danger label {
    color: #fd4444!important
}

.form-group.has-danger .input-group-addon {
    border-color: #fd4444!important;
    background-color: #fff
}

.form-group.has-danger .input-group-addon i {
    color: #fd4444!important
}

.form-group.has-danger .CustomSelect>select,.form-group.has-danger .form-control,.form-group.has-danger input {
    border-color: #fd4444!important
}

.form-group.has-danger .form-control i,.form-group.has-danger input i {
    color: #fd4444!important
}

.form-group.has-success .fat-label,.form-group.has-success label {
    color: #42c88a!important
}

.form-group.has-success .input-group-addon {
    border-color: #42c88a!important;
    background-color: #fff
}

.form-group.has-success .input-group-addon i {
    color: #42c88a!important
}

.form-group.has-success .CustomSelect>select,.form-group.has-success .form-control,.form-group.has-success input {
    border-color: #42c88a!important
}

.form-group.has-success .form-control i,.form-group.has-success input i {
    color: #fd4444!important
}

.Dropdown--float {
    border: 1px solid #e8e8e8;
    position: absolute;
    overflow: hidden;
    z-index: 10001;
    background-color: #fff;
    padding: 24px;
    padding: 1.5rem;
    list-style: none;
    border-radius: 4px
}

.dropdown .dropdown-menu.open .dropdown-menu,.dropdown.open .dropdown-menu {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.dropdown .dropdown-menu.open .caret,.dropdown.open .caret {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.dropdown-menu.open,.open>.dropdown-menu {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.dropdown-menu.open .caret {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.divider {
    margin: 0!important
}

.dropdown-header {
    font-size: 12.8px;
    color: #838789;
    letter-spacing: -.61px;
    margin-bottom: 2px;
    font-style: normal;
    font-stretch: normal;
    font-weight: 700
}

.menu-item a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.66667;
    color: #787b83;
    white-space: nowrap;
    padding: 10px 20px
}

.menu-item a:hover {
    text-decoration: none;
    color: #787b83;
    background-color: #e3f3fe
}

.dropdown-menu {
    display: block;
    -webkit-transition: opacity 50ms ease-out,-webkit-transform 50ms cubic-bezier(.18,1.4,.4,1);
    transition: opacity 50ms ease-out,-webkit-transform 50ms cubic-bezier(.18,1.4,.4,1);
    -o-transition: transform 50ms cubic-bezier(.18,1.4,.4,1),opacity 50ms ease-out;
    transition: transform 50ms cubic-bezier(.18,1.4,.4,1),opacity 50ms ease-out;
    transition: transform 50ms cubic-bezier(.18,1.4,.4,1),opacity 50ms ease-out,-webkit-transform 50ms cubic-bezier(.18,1.4,.4,1);
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    padding: 0;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.12)
}

.dropdown-menu .active>a {
    color: #fff!important;
    text-decoration: none!important;
    outline: 0!important;
    background-color: #0699cd!important
}

.dropdown-menu>li>a {
    padding: 10px 20px
}

.dropdown-menu2.open {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.dropdown-menu2.open .caret {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.dropdown-menu2 {
    display: block;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.12);
    position: absolute;
    border-radius: 4px;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14.25px;
    text-align: left;
    background-color: #fff;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box
}

.dropdown-menu2 .active>a {
    color: #fff!important;
    text-decoration: none!important;
    outline: 0!important;
    background-color: #0699cd!important
}

.dropdown-menu2 .dropdown-menu>li>a:focus,.dropdown-menu2>li>a:hover {
    text-decoration: none;
    color: #787b83;
    background-color: #e3f3fe
}

.dropdown-menu2>li>a {
    display: block;
    padding: 10px 20px
}

.dropdown-menu2,.dropdown-menu2>li>a {
    clear: both;
    font-weight: 400;
    line-height: 1.66667;
    white-space: nowrap;
    color: #787b83
}

.dropdown-menu2 {
    z-index: 20000
}

.CustomCheckbox {
    cursor: pointer
}

.CustomCheckbox.CustomCheckbox--disabled {
    cursor: not-allowed!important
}

.CustomCheckbox.CustomCheckbox--disabled .CustomCheckbox-Check {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    border-color: #bbb!important;
    background-color: #ddd!important;
    background-image: none!important;
    cursor: not-allowed
}

.CustomCheckbox.CustomCheckbox--disabled label {
    cursor: not-allowed!important
}

.CustomCheckbox.CustomCheckbox--checked .CustomCheckbox-Check {
    font-size: 19.2px;
    font-size: 1.2rem;
    background-image: -webkit-linear-gradient(334deg,#0699cd,#42cae9);
    background-image: -o-linear-gradient(334deg,#0699cd,#42cae9);
    background-image: linear-gradient(116deg,#0699cd,#42cae9)
}

.CustomCheckbox.CustomCheckbox--empty .CustomCheckbox-Check {
    margin-right: 0
}

.CustomCheckbox:hover .CustomCheckbox-Check {
    border: 1px solid #4778d9
}

.CustomCheckbox .CustomCheckbox-Check {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    font-size: 0;
    color: #fff;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    margin-right: 16px;
    margin-right: 1rem;
    height: 32px;
    height: 2rem;
    width: 32px;
    width: 2rem;
    min-width: 32px;
    min-width: 2rem;
    min-height: 32px;
    min-height: 2rem
}

.CustomCheckbox .CustomCheckbox-Label {
    padding-left: 0;
    cursor: pointer
}

.CustomCheckbox label {
    margin-bottom: 0
}

.LoadingSpinner,.LoadingSpinner:after {
    border-radius: 50%;
    width: 40px;
    height: 40px
}

.LoadingSpinner {
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 3px solid rgba(18,157,250,.7);
    border-right: 3px solid rgba(18,157,250,.7);
    border-bottom: 3px solid rgba(18,157,250,.7);
    border-left: 3px solid hsla(0,0%,100%,.5);
    -webkit-animation: load8 .6s infinite linear;
    animation: load8 .6s infinite linear
}

.LoadingSpinner.LoadingSpinner--small {
    width: 20px;
    height: 20px;
    border-top: 2px solid rgba(18,157,250,.7);
    border-right: 2px solid rgba(18,157,250,.7);
    border-bottom: 2px solid rgba(18,157,250,.7);
    border-left: 2px solid hsla(0,0%,100%,.5)
}

.LoadingSpinner.large,.LoadingSpinner.large:after {
    width: 50px;
    height: 50px
}

.LoadingSpinner.x-large,.LoadingSpinner.x-large:after {
    width: 70px;
    height: 70px
}

.LoadingSpinner.LoadingSpinner--white {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-left: 2px solid hsla(0,0%,100%,.5)
}

.ErrorBoundary {
    height: 100vh;
    background-image: -webkit-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: -o-linear-gradient(334deg,#0699cd,#3bb85c);
    background-image: linear-gradient(116deg,#0699cd,#3bb85c)
}

.ErrorBoundary h1 {
    color: #fff
}

.ErrorBoundary h1 small {
    color: #fff!important
}

.ErrorBoundary a {
    color: #fff
}