@import url('https://fonts.googleapis.com/css?family=Raleway');

:root {
  --bg-button-color-green: #7eb531;
  --bg-button-color-orange: #f7b02c;
  --bg-button-color-gray-gradient: linear-gradient(to bottom, #f3f3f3 0%,#e1e1e1 100%);
  --bg-button-color-gray: #e1e1e1;
}

body.home.path-frontpage{
    font-family: 'Raleway', sans-serif;
}

audio {
    background-color: lightgray;
    padding: 3px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -moz-box-shadow: 2px 2px 4px 0px #555;
    -webkit-box-shadow: 2px 2px 4px 0px #555;
    box-shadow: 1px 1px 4px 0px #555;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
}

.audio-formatter-field-mobile {
    display: none;
    background: lightgray;
    width: 60px;
    height: 60px;
    -moz-box-shadow: 2px 2px 4px 0px #555;
    -webkit-box-shadow: 2px 2px 4px 0px #555;
    box-shadow: 1px 1px 4px 0px #555;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
}
.audio-formatter-mobile-inner {
    background: #F1F3F4;
    width: 53px;
    height: 53px;
    border-radius: 22px;
    margin: 3px;
    padding: 0;
}

.audio-formatter-mobile-inner .audio-control {
    background: url(../../images/play.svg) no-repeat 22px center;
    width: 53px;
    height: 53px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.audio-formatter-field-mobile:active,
.audio-formatter-field-mobile:visited {
    box-shadow: 2px 2px 3px #666;
    transform: translateY(2px);
}

.audio-formatter-field-mobile.playing .audio-control{
    background: url(../../images/pause.svg) no-repeat 22px center;
}

.view table td.views-field-field-basic-media-field audio,
.quiz-results-table td.field-basic-media-field audio,
table td .audio-formatter-field-wrapper audio{
    display: none;
}

.view table td.views-field-field-basic-media-field .audio-formatter-field-mobile,
.quiz-results-table td.field-basic-media-field .audio-formatter-field-mobile,
table td .audio-formatter-field-wrapper .audio-formatter-field-mobile{
    display: inline-block;
}

/* Batch process background color */
.path-batch #header{
    background-color: #e0e0d8;
    background-image: unset;
}

/* Published without published date view */
.views-field-status a, .views-field-status .tablesaw-cell-content, .views-field-edit-node .tablesaw-cell-content {
    display: table;
    margin: 0 auto;
}

th#view-edit-node-table-column {
    text-align: center;
}

.views-field-status .tablesaw-cell-content{
    text-transform: lowercase;
}

table td .audio-formatter-field-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding: 10px;
}

.region.region-secondary-menu {
    float: right;
}

tr.correct_yes, td.correct_1 {
    background-color: #bae8c4;
}

tr.correct_no, td.correct_0 {
    background-color: #edadad;
}

#block-lingopolomasteryhighscores .ajax-progress-throbber{
    background-image: url(../../images/throbber.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50px;
}

/* REMOVE LEARN MORE BUTTON ON QUIZ PAGE */
.quiz-page .learn-button-container.remove-learn-more.learn-on-quiz-answer{
    display: none;
}

/*COURSES VIEW AND SUB COURSES*/
.view-courses  .view-content,
.courses-grid-wrapper{
    font-size: 0;
}

/* RECORDING HEADING CENTER*/
.recording-center{
    text-align: center !important;
}

.view-courses  .view-content .views-row,
.courses-grid-wrapper li{
    border: solid 5px #CCC;
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 3px 3px 2px #e6e6e6;
    display: inline-block;
    margin-right: 8px;
}

.courses-grid-wrapper ul{
    margin: 0;
    padding: 0;
}

.courses-grid-wrapper ul li{
    padding: 0;
}

.view-courses  .view-content .views-row:hover,
.courses-grid-wrapper li.eligible:hover{
    border: solid 5px #244274;
}

.view-courses  .view-content .views-row:hover .views-field.views-field-name a,
.courses-grid-wrapper li.eligible:hover .course-description {
    color: #ffffff;
}

.view-courses  .view-content .views-row:hover .views-field.views-field-name,
.courses-grid-wrapper li.eligible:hover .course-description{
    background-color: rgba(36, 66, 116, 0.7);
}

.view-courses  .view-content .views-row:hover img,
.courses-grid-wrapper li:hover img{
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.view-courses  img,
.courses-grid-wrapper img{
    width: 100%;
    /*max-width: 260px;*/
    display: block;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.view-courses  img.dummy-lesson-image,
.courses-grid-wrapper img.dummy-lesson-image{
    opacity: 0.5;
}

.view-courses  .views-field.views-field-name,
.courses-grid-wrapper .course-description{
    position: absolute;
    min-height: 40px;
    width: 100%;
    bottom: 0;
    text-align: center;
    font-weight: bold;
    background-color: rgba(204, 204, 204, 0.7);
    padding-top: 4%;
}

.view-courses  .views-field.views-field-name a,
.courses-grid-wrapper li .course-description {
    color: #244274;
}

.view-courses ul.pager {
    text-align: center;
    padding: 0;
}

.view-courses ul.pager a {
    padding: 7px 10px;
}

.courses-grid-wrapper .course-single.not-eligible .course-description{
    /*background-image: url(../../images/clock-64.png);*/
    min-height: 100%;
    background-position: center 25%;
    background-repeat: no-repeat;
    background-color: transparent;
}

.courses-grid-wrapper .course-single.not-eligible .course-description-text{
    background-color: rgba(204, 204, 204, 0.7);
}

.courses-grid-wrapper .course-single.not-eligible .course-description-timer-wrapper{
    margin-top: 15%;
}

.courses-grid-wrapper .course-single.not-eligible .course-description-timer{
    background-color: rgba(204, 204, 204, 0.7);
    display: inline-block;
    padding: 10px 10px 10px 45px;
    background-image: url(../../images/clock-64.png);
    background-repeat: no-repeat;
    background-size: 35px;
    background-position: 5px;
    border-radius: 5px;
}

.courses-grid-wrapper .course-single.locked .course-description{
    background-image: url('../../images/padlock-256.png');
    min-height: 100%;
    background-position: center 25%;
    background-repeat: no-repeat;
    background-size: 50px;
}


.courses-grid-wrapper .course-single.not-eligible .course-description-text,
.courses-grid-wrapper .course-single.locked .course-description-text{
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 40px;
    padding-top: 4%;
}



.course-page .col {
    margin: 0 0 20px 0;
    border: solid 1px #ccc;
    /*max-width: 455px;*/
    position: relative;
    /*display: inline-block;*/
    width: 50%;
}

.course-page .col.first {
    margin-right: 10px;
    vertical-align: top;
}

.course-page .col.last {
    vertical-align: top;
}

.course-page .locked-overlay,
.lesson-page .locked-overlay{
    background-color: rgba(204, 204, 204, 0.7);
    background-image: url(../../images/padlock-256.png);
    min-height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 99;
    left: 0;
    top: 0;
    background-size: 100px;
}

.lesson-box {
    border: solid 1px #ccc;
    position: relative;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.lesson-box:hover .lesson-info{
    /*top: 0px;
    bottom: 0;*/
}

.lesson-box .lesson-info{
    /*position: absolute;
    min-height: 40px;
    width: 100%;
    top: 235px;
    text-align: center;
    font-weight: bold;
    background-color: rgba(204, 204, 204, 0.7);
    z-index: 999;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-out;
    bottom: 0;*/
}

.page-node-type-entry .lesson-box {
    width: 100%;
}

.lesson-box .lesson-photos,
.lesson-box .lesson-content{
    margin-bottom: 15px;
    position: relative;
}

.lesson-box .lesson-title{
    padding: 0px 0 25px 0;
    min-height: 58px;
}

.lesson-box .lesson-title .left{
    float: left;
}

.lesson-box .lesson-title .right{
    float: right;
}

.lesson-box .lesson-title .right.clock-exists{
    /*min-width: 135px;*/
}

.lesson-box .lesson-title .right.clock-exists .learn-button-wrapper{
    text-align: right;
}


.lesson-box .lesson-title .clear{
    clear: both;
}

.lesson-box .lesson-title a.lesson-link{
    font-size: 130%;
    font-weight: bold;
}

.lesson-box .lesson-title .learn-button-wrapper{
    padding-top: 5px;
}

.lesson-box .lesson-title .learn-button{
    /*position: absolute;
    top: 15px;
    right: 6px;*/
}

.lesson-box .lesson-title .right.clock-exists .learn-button,
.learn-button-container.clock-exists .learn-button,
.view-courses ul.pager a {
    background: #7eb531;
    border: 1px solid #e4e4e4;
    border-bottom: 1px solid #b4b4b4;
    border-left-color: #d2d2d2;
    border-right-color: #d2d2d2;
    color: #3a3a3a;
    -khtml-border-radius: 15px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    white-space: normal;
    box-shadow: 3px 3px 4px #93BDD6;
    background: #f3f3f3;
    background: -moz-linear-gradient(top, #f3f3f3 0%, #e1e1e1 100%);
    background: -webkit-linear-gradient(top, #f3f3f3 0%,#e1e1e1 100%);
    background: linear-gradient(to bottom, #f3f3f3 0%,#e1e1e1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#e1e1e1',GradientType=0 );

}

table .learn-button-container.clock-exists .learn-button,
.views-field .learn-button-container.clock-exists .learn-button{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90px;
    white-space: nowrap;
}

.lesson-box .lesson-title .lesson-title-text{
    margin-bottom: 10px;
}

.lesson-box .lesson-title .lesson-sub-title{
    color: #000;
    font-weight: bold;
    float: left;
}

.lesson-box .lesson-info .lesson-content-title{
    font-size: 120%;
    font-weight: bold;
}

.lesson-page{
    position: relative;
    padding: 15px;
}

.course-page .course-pagination{
    padding: 30px 20px 0 20px;
    text-align: center;
}

.course-page .course-pagination .control{
    /*max-width: 225px;*/
    margin: 0;
}

.course-page .course-pagination .control .control-title{
    text-align: center;
}

.course-page .course-pagination .control .control-title a{
    font-size: 130%;
    font-weight: bold;
}

.course-page .course-pagination .control li{
    width: 225px;
}

/*COURSES VIEW*/



/*HOME PAGE*/
.center-wrapper.flex{
    display: flex;
    justify-content: space-between;
}

.center-wrapper.flex .home-block-rounded{
    border: solid 1px #DDDDDD;
    padding: 0;
    border-radius: 10px;
}

.center-wrapper.flex .home-block-rounded .content{
    margin: 20px;
}

.center-wrapper.flex.page-2cols .col{
    width: 48%;
}

.center-wrapper {
    clear: both;
    margin: 0 0 1em 0;
}

.text-centered {
    text-align: center;
}

.two-columns.column-first {
    float: left;
    width: 50%;
}

.two-columns.column-last {
    float: left;
    width: 49.9%;
}

.two-columns.column-first .inside {
    margin: 0 .5em 1em 0;
}

.two-columns.column-last .inside {
    margin: 0 0 1em .5em;
}

.page-2cols .col-first,
.page-2cols .col-last{
    float: left;
    width: 50%;
}

.page-2cols .col-first .inside {
    margin: 0 .5em .5em 0;
}

.page-2cols .col-last .inside {
    margin: 0 0 .5em .5em;
}

.page-3cols .col-first,
.page-3cols .col,
.page-3cols .col-last{
    float: left;
    width: 33%;
}

.details-wrapper .page-3cols .col {
  width: 30%;
}

.page-3cols .col {
    margin: 0 2px;
}

.page-3cols .col-first .inside {
    margin: 0 .5em 1em 0;
}

.page-3cols .col .inside {
    margin: 0 .5em 1em .5em;
}

.page-3cols .col-last .inside {
    margin: 0 0 1em .5em;
}


.home-block-rounded {
    border: solid 1px #DDDDDD;
    padding: 15px;
    border-radius: 10px;
}

.home-block-rounded .user-login-form .form-text{
    width: 100%;
}

.home-block-rounded .user-login-form .form-actions{
    display: inline-block;
    float: left;
    margin-right: 50px;
}

.home-block-rounded.user-login-wrapper .item-list{
    float: right;
    margin-top: 25px;
}

.learn-compact {
    text-align: center;
}

.center-wrapper.flex .home-block-rounded.flag-wrapper .content{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 20px;
  height: 100%;
}

.user-logged-in .center-wrapper.flex .home-block-rounded.flag-wrapper {
    width: 100%;
}

.learn-x-with-quizzes {
    width: 50%;
    font-size: 200%;
    margin: 20px 0;
}

.language-flag {
    width: 50%;
    margin: 15px;
}

.flag-image {
    max-height: 100px;
    box-shadow: 0px 0px 10px black;
}

.words-known,
.phrases-known,
.average-level,
.average-level {
    font-size: 250%;
    margin: 0px;
    display: inline;
}

.words-mastered,
.phrases-mastered {
    font-size: 500%;
    margin: 0px;
    display: inline;
}

.home-block-rounded h2 {
    font-weight: bold;
}

/*HOME PAGE*/

/*LESSON ITEMS*/
.view-lesson-items-summary .views-row{
    display: inline-block;
}
/*LESSON ITEMS*/

/*LESSON PAGE*/
.path-flipcard .lesson-photos,
.page-node-type-entry .lesson-photos,
.lesson-page.lesson-favourites-page .lesson-photos{
    float: right;
    width: 50%;
    padding-left: 20px;
}

.path-flipcard .lesson-info{
    width: 47%;
}

.see-also .see-also-title {
    margin-bottom: 10px;
}

.see-also {
    margin-top: 10px;
}
/*LESSON PAGE*/

/*ENTRY PAGE*/

.field--name-field-thai,
.field--name-title-field,
.form-item.form-item-answer-title,
.form-item.form-item-question-title {
    font-size: 300%;
    margin-bottom: 10px;
    margin-top: 0;
}

.field--name-field-thai p{
    margin: 0;
}

.path-node .views-field-field-thai p{
    margin: 0;
}

.summary_th {
    font-size: 200%;
}

.entry-image-and-recording,
.lesson-photos img {
    border: solid 5px #CCC;
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 3px 3px 2px #e6e6e6;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.remove-image-border {
    border: 0px;
    box-shadow: unset;
}

.field--name-field-video {
    border: solid 5px #CCC;
    margin-bottom: 15px;
    box-shadow: 3px 3px 2px #e6e6e6;
    max-width: 480px;
}

.entry-image-and-recording .entry-recording {
    position: absolute;
    min-height: 40px;
    width: 100%;
    bottom: 0;
    font-weight: bold;
    background-color: rgba(204, 204, 204, 0.7);
    padding: 3% 0 2% 0;
}

.entry-image-and-recording .field--type-image,
.entry-image-and-recording .field--type-image img{
    margin: 0;
    display: block;
}

.entry-image-and-recording .audio-formatter-field-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.entry-image-and-recording audio{
    width: 60%;
}


.entry-image-and-recording .play-audio-slowly,
.entry-image-and-recording .play-all-breakdown{
    position: initial;
}


/*ENTRY PAGE*/

/*LEARN BUTTON*/

.learn-button-container {
    text-align: center;
    display: inline-block;
}

.learn-button-container.lesson-mastery {
    text-align: left;
    display: block;
    margin-bottom: 10px;
}

table .learn-button-container {
    display: block;
}

th.views-field-flipcard-learn-button,
th.learn-title,
.tablesaw-stack th.views-field-flipcard-learn-button,
.tablesaw-stack th.learn-title,
th.views-field-field-basic-media-field,
.tablesaw-stack th.views-field-field-basic-media-field,
th.recording-title,
th.views-field-flipcard-entry-status,
.tablesaw-stack th.views-field-flipcard-entry-status {
    text-align: center;
}

.learn-on-node {
    /*float: right;*/
}

#flipcard-quiz-selection-form #edit-learn,
#flipcard-quiz-selection-node #edit-learn,
input.learn-button,
a.button.learn-button,
.view-courses ul.pager a {
    background: #7eb531;
    color: white;
    padding: 5px 10px;
    box-shadow: 3px 3px 4px #93BDD6;
    margin: 0 0 5px 0;
    display: inline-block;
    min-width: 64px;
    height: 20px;
    font-size: 14px;
}

#flipcard-quiz-selection-form #edit-learn:hover,
#flipcard-quiz-selection-node #edit-learn:hover,
input.learn-button:hover,
a.button.learn-button:hover,
.view-courses ul.pager a:hover {
    background: #8ec541;
    text-decoration: none;
    color: white;
}

a.learn-button.learn-on-quiz-answer,
.learn-button-container.learn-on-quiz-answer {
    position: absolute;
    top: -5px;
    right: 0;
}

#flipcard-quiz-selection-form #edit-learn.revise,
#flipcard-quiz-selection-node #edit-learn.revise,
input.learn-button.revise,
a.learn-button.revise {
    background: #f7b02c;
}

#flipcard-quiz-selection-form #edit-learn.revise:hover,
#flipcard-quiz-selection-node #edit-learn.revise:hover,
input.learn-button.revise:hover,
a.learn-button.revise:hover {
    background: #f7c872;
}

#flipcard-quiz-selection-form #edit-learn.learn-submit {
    display: none;
}

#flipcard-quiz-selection-form .learn-button-container.clock-exists {
    float: left;
}

/*LEARN BUTTON*/

/*QUIZ*/
.new-word {
    font-size: 150%;
    background-color: rgb(195, 208, 230);
    border: solid;
    border-width: 1px;
    padding: 10px;
    margin-bottom: 10px;
}

.new-word #edit-new-word-marker {
    margin: 0;
}

input.exit-quiz-button.form-submit,
input.exit-quiz-button.form-submit:hover,
input.exit-quiz-button.form-submit:active,
input.exit-quiz-button.form-submit:focus{
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    text-decoration: underline;
    padding: 0;
    margin: 0;
    color: #68696b;
    font-size: 14px;
}

a.button,
input.form-submit,
button.form-submit,
button.button,
.comment-form input.button{
    outline: none;
    border: 1px solid #e4e4e4;
    border-bottom: 1px solid #b4b4b4;
    border-left-color: #d2d2d2;
    border-right-color: #d2d2d2;
    color: #3a3a3a;
    cursor: pointer;
    font-size: 0.929em;
    font-weight: normal;
    text-align: center;
    margin-bottom: 1em;
    margin-right: 0.6em;
    margin-left: 0;
    padding: 10px 30px;
    border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 15px;
    white-space: normal;
    box-shadow: 3px 3px 4px #93BDD6;
    background: #f3f3f3;
    background: -moz-linear-gradient(top, #f3f3f3 0%, #e1e1e1 100%);
    background: -webkit-linear-gradient(top, #f3f3f3 0%,#e1e1e1 100%);
    background: linear-gradient(to bottom, #f3f3f3 0%,#e1e1e1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#e1e1e1',GradientType=0 );
    -webkit-appearance: none;
}

button.form-submit:hover,
input.form-submit:hover,
button.button:hover{
  background: #dedede;
}

input.form-submit:active,
input.form-submit:visited,
input.form-submit.submitted,
button.form-submit:active,
button.form-submit:visited,
button.form-submit.submitted,
a.button:active,
a.button:visited,
a.button.submitted {
    box-shadow: 2px 2px 3px #666;
    transform: translateY(2px);
}

#flipcard-quiz-question-form,
#flipcard-quiz-answer-form{
    position: relative;
}

#flipcard-quiz-question-form input.form-submit,
#flipcard-quiz-answer-form input#edit-ok,
#flipcard-quiz-question-form button.form-submit{
    margin-top: 25px;
}

#flipcard-quiz-question-form input.exit-quiz-button,
#flipcard-quiz-answer-form input.exit-quiz-button{
    margin-top: 0px;
}

#flipcard-quiz-end-form #edit-ok {
    display: inline;
    margin-right: 20px;
    padding: 5px 30px;
    width: 84px;
    margin-top: 0px;
    float: left;
}

.exit-lesson-container {
    display: inline-block;
    margin-left: 20px;
}

input#edit-exit-lesson {
    padding: 5px 20px;
}

input.exit-quiz-button.form-submit:hover {
    background: transparent;
}

/* HOME WEBSITE - Language selection page */
.lang-select-prompt {
    text-align: center;
    font-size: 25px;
    padding-bottom: 50px;
}

.lang-list {
    flex-direction: row;
    justify-content: space-around;
    display: flex;
    padding-bottom: 50px;
}

.lang-single {
    text-align: center;
}

.lang-learning {
    text-align: center;
    font-size: 25px;
}

.lang-flag {
    padding: 10px;
    margin: auto;
    width: 150px;
}

.lang-flag img{
    box-shadow: 0px 0px 10px black;
    max-height: 100px;
}

/* Testimonials */
.view-testimonials .views-row {
    background: url(../../images/quote-32.png) no-repeat left top;
    padding-left: 60px;
    margin: 30px 0 30px 0;
}

.view-testimonials .views-row .row-content{
    background: #efefef;
    padding: 20px;
    border-radius: 20px;
}

.view-testimonials .views-row .testimony-name{
    font-weight: bold;
}

.view-testimonials .views-row .testimony-location{
    font-style: italic;
}

.view-testimonials .view-footer{
    margin-top: 55px;
    text-align: right;
}

.view-testimonials .view-header{
    text-align: right;
}

#lp-home-testimonials-add-form #edit-story,
#lp-home-testimonials-add-form #edit-display-name,
#lp-home-testimonials-add-form #edit-display-location{
    width: 75%;
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/*Page Top Panel*/
#page-top-panel {
    background-color: #244274;
    position: relative;
}

.region-page-top-panel{
    padding: 0 15px;
    line-height: 1;
}

.region-page-top-panel .view{
    line-height: 1.5;
}

.region-page-top-panel .block-system-branding-block{
    display: none;
    float: left;
    width: 115px;
    text-align: center;
    margin-right: 10px;
}

.region-page-top-panel .block-system-branding-block .site-branding__logo{
    display: block;
    margin-right: 0;
    margin-bottom: 0;
    line-height: 1;
    text-decoration: none;
}

.region-page-top-panel .block-system-branding-block .site-branding__logo img{
    height: 50px;
}

.region-page-top-panel .block-system-branding-block .site-branding__text{
    padding: 0;
    margin: 0;
    font-size: 0.7em;
}

.region-page-top-panel .block-system-branding-block .site-branding__slogan{
    padding: 0;
    margin: 0;
    color: #fff;
}

.region-page-top-panel #block-lingopolomasteryhighscores {
    color: white;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

.region-page-top-panel #block-lingopolomasteryhighscores.block .content {
    margin-top: 0;
}

.region-page-top-panel #block-lingopolomasteryhighscores h2 {
    float: left;
    margin: 3px 20px 0 0;
    padding: 0;
}

.region-page-top-panel #block-lingopolomasteryhighscores ul {
    padding: 0;
    margin: 0;
}

.region-page-top-panel #block-lingopolomasteryhighscores ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0 20px 0 0;
    padding: 0;
}

.region-page-top-panel #block-lingopolomasteryhighscores ul li span {
    color: yellow;
    font-size: 16px;
}

.region-page-top-panel #block-lingopolomasteryhighscores .star-yellow{
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
}

.region-page-top-panel #block-lingopolomasteryhighscores .star-yellow.down {
    background: url('../../images/white-arrow-down.png');
}

.region-page-top-panel #block-lingopolomasteryhighscores .star-yellow.up {
    background: url('../../images/white-arrow-up.png');
}

.region-page-top-panel #block-lingopolomasteryhighscores #high-scores-list-container{
    display: none;
    position: absolute;
    color: #244274;
    right: 0;
    background-color: white;
    border: 5px solid #244274;
    border-radius: 10px;
    padding: 10px;
    z-index: 100;
    bottom: inherit;
    margin-top: 10px;
    width: 97%;
    min-height: 100px;
}

#high-scores-list-container a:hover{
    text-decoration: none;
    border-bottom-style: none;
}

#high-scores-list-container .high-scores-list-close{
    background: url('../../images/cross.png');
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    margin: 10px;
}

#high-scores-list-container h3{
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
}

#high-scores-list-container table tr{
    font-family: Georgia, "Times New Roman", Times, serif;
}

#high-scores-list-container span{
    /*color: #244274;
    font-size: 20px;*/
}

.search-block-form input.form-submit,
#search-form input.form-submit {
    margin-left: 0;
    margin-right: 0;
    height: 25px;
    width: 34px;
    padding: 0;
    cursor: pointer;
    text-indent: -9999px;
    border-color: #e4e4e4 #d2d2d2 #b4b4b4;
    background: url(../../images/search-button.png) no-repeat center top;
    overflow: hidden;
    box-shadow: none;
}

.search-block-form input.form-submit:hover,
#search-form input.form-submit:hover {
  background: url(../../images/search-button.png) no-repeat center top;
}


.search-block-form input#edit-keys,
#search-form input#edit-keys {
    float: left;
    font-size: 1em;
    height: 1.143em;
    margin-right: 5px;
    width: 154px;
}

.view-lingopolo-photo-montage .views_slideshow_slide{
    background-color: transparent !important;
}

.a-to-z a:link {
    font-size: 250%;
}

.a-to-z a.is-active{
    font-size: 350%;
    color: #7eb531;
}

.lesson-row td {
    position: relative;
}

.quiz-link,
.learn-cell,
.words-link {
    width: 15%;
}

.words-title,
.words-link {
    text-align: right;
}

.learn-title,
.learn-link,
.quiz-title,
.quiz-link,
.learn-cell {
    text-align: center;
}

.editor-dashboard-summary {
    border: solid 1px #DDDDDD;
    padding: 15px;
    border-radius: 10px;
    width: 45%;
    display: inline-block;
    text-align: center;
    margin: 10px 10px 0 0;
    min-height: 540px;
    vertical-align: top;
}

.editor-dashboard-summary a {
    font-size: 250%;
    margin: 0px;
    line-height: 1.1;
}

.editor-dashboard-summary a.button {
    font-size: 150%;
    margin: 20px 0 0 0;
    display: inline-block;
    width: 200px;
}

.lesson-next-to-eligible {
    background: url(../../images/clock-16.png) no-repeat 0 center;
    padding: 2px 2px 2px 20px;
    margin: 0 auto;
    display: inline-block;
}

.view-glossary-of-words .views-field-field-literal ul{
    list-style-type: disc;
    list-style-position: inside;
}

/* FLAGS */
.comment-form .entry-flag-container .form-type-checkbox{
    margin-left: 0;
    margin-top: 10px;
}

.flag-link{
    text-align: right;
}

.flag-lingopolo{
    padding: 10px 0 10px 50px;
    margin-top: 10px;
    font-size: 18px;
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: left center;
}

.flag-needing-attention{
    background-image: url(../../images/attention-48.png);
}

.flag-error-form input[type=text] {
    width: 75%;
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.flag-error-form textarea {
    width: 76.3%;
    -khtml-border-top-left-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.flag-error-form .resizable-textarea .grippie {
    width: 76%;
    -khtml-border-bottom-left-radius: 4px;
    -khtml-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.toolbar-icon-lingopolo-admin-dashboard:before {
    background-image: url(../../images/dashboard.png);
}

.toolbar-icon-lp-home-admin:before{
    background-image: url(../../images/lingopolo_logo_gray_20.png);
}

.view table td.views-field-field-basic-media-field,
.quiz-results-table td.field-basic-media-field{
    width: 15%;
    text-align: center;
}

.view table td.views-field-field-basic-media-field audio,
.quiz-results-table td.field-basic-media-field audio{
    width: 90%;
}

.congratulations-wrapper {
    text-align: center;
}

.article-image {
	box-shadow: 0px 0px 10px black;
}

.play-all-breakdown{
    background-image: url(../../images/playlist-play.svg);
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.play-all-breakdown.no-main-audio{
  position: initial !important;
}

.play-audio-slowly{
    background-image: url(../../images/tortoise-play.svg);
    width: 45px;
    height: 45px;
    cursor: pointer;
}

.play-audio-slowly.enabled{
    background-image: url(../../images/tortoise-play-green.svg);
}

.audio-formatter-field-wrapper{
    position: relative;
    max-width: 500px;
}

.unpublished-breakdown{
    padding: 10px 0 10px 20px;
    margin-left: 10px;
    background: #fdf8ed url(/core/misc/icons/e29700/warning.svg) no-repeat center left;
    color: #734c00;
    box-shadow: -5px 0 0 #e09600;
}

/*td.thai-lesson-word,*/
.tablesaw-stack th.q-title,
.tablesaw-stack td.q-number {
    text-align: center;
}

td.breakdown_th {
    word-break: break-word;
}

img.drop-shadow {
    box-shadow: 0 0 10px black;
    padding: 10px;
}

.view tr.unpublished a {
    color: #e09600;
}

a.favourites-link {
    padding: 3px 0 3px 30px;
    cursor: pointer;
}

a.favourites-link.add-to-favourites {
    background: url(../../images/icon-green-star.svg) no-repeat center left;
}

a.favourites-link.add-to-favourites:hover {
    background: url(../../images/icon-green-star-fill.svg) no-repeat center left;
}

a.favourites-link.in-favourites {
    background: url(../../images/icon-green-star-fill.svg) no-repeat center left;
}

a.favourites-link.in-favourites:hover {
    background: url(../../images/icon-green-star.svg) no-repeat center left;
}

.entry-buttons {
    float: right;
    text-align: right;
}

.entry-buttons > div {
    margin-bottom: 10px;
}

.entry-buttons .entry-level-value{
    text-align: left;
    padding-left: 30px;
    background-size: contain;
    background-repeat: no-repeat;
}

.entry-buttons .entry-level-value{
    background-image: url(../../images/shield-black.svg);
}
/*.entry-buttons .entry-level-value:hover{
    background-image: url(../../images/shield-black-fill.png);
}*/

.lesson-reset-level {
  display: inline-block;
}

.entry-buttons .entry-reset-level{
    text-align: left;
}

.entry-buttons .entry-reset-level a,
.lesson-reset-level a{
    display: flex;
}

.entry-buttons .entry-reset-link-text,
.lesson-reset-link-text{
    text-align: left;
    padding-left: 5px;
}

.entry-buttons .entry-reset-level-icon,
.lesson-reset-level-icon{
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../../images/refresh.svg);
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    transition: transform 1s;
    width: 25px;
    height: 25px;
}

.entry-buttons .entry-reset-level-icon.hovered,
.lesson-reset-level-icon.hovered{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

.entry-main-info {
    display: flex;
    justify-content: space-between;
}

.compound-breakdown-selector .letters .letter{
    font-size: 25px;
    display: inline-block;
    text-align: left;
    border-right: solid 1px transparent;
}

.compound-breakdown-selector .letters .breakdown:first-child{
}

.compound-breakdown-selector .letters .breakdown{
    margin: 0px 0 0 10px;
    display: block;
    width: 20px;
    border: 1px solid;
    height: 20px;
    border-radius: 11px;
    cursor: pointer;
}

.compound-breakdown-selector .letters .breakdown.selected{
    background-color: red;
}

.compound-breakdown-selector .letters .letter.selected{
    border-right: solid 1px red;
}

.form-item-compound-breakdown-count{
    display: none;
}



.page-node-type-entry .entry-acknowledgements .field p{
  margin: 0;
}


/*Mobile search bar*/
#page-top-panel #block-searchformmobile {
  display: none;
  position: absolute;
  top: 10px;
  right: 5px;
}

#page-top-panel #block-searchformmobile input[type=submit] {
  display: none;
}

#page-top-panel #block-searchformmobile input[type=search] {

}

#page-top-panel #block-searchformmobile input[type=search]::-webkit-search-decoration,
#page-top-panel #block-searchformmobile input[type=search]::-webkit-search-cancel-button {
  display: none;
}


#page-top-panel #block-searchformmobile input[type=search] {
  outline: none;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-family: inherit;
  font-size: 100%;

  background: #ededed url(../../images/search-icon.png) no-repeat 7px center;

  border: solid 1px #ccc;
  padding: 7px 9px 7px 9px;

  width: 13px;
  color: transparent;
  cursor: pointer;

  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;

  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#page-top-panel #block-searchformmobile input[type=search]:hover {
  background-color: #fff;
}

#page-top-panel #block-searchformmobile input[type=search]:focus {
  width: 100px;
  background-color: #fff;
  border-color: yellow;

  padding-left: 32px;
  color: #000;
  cursor: auto;

  -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
  -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
  box-shadow: 0 0 5px rgba(109,207,246,.5);
}


#page-top-panel #block-searchformmobile input[type=search]:-moz-placeholder {
  color: transparent;
}
#page-top-panel #block-searchformmobile input[type=search]::-webkit-input-placeholder {
  color: transparent;
}

.clarifier {
  font-style: italic;
}


.user-menu-avatar {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  border-color: #ccc;
  border-width: 2px;
  border-style: solid;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  background-repeat: no-repeat;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: cover;
  background-position: center;
}


.profile{
  position: relative;
}

.profile .user-main-info{
  display: flex;
}

.profile .field--name-user-picture{
  margin-right: 20px;
}

.profile .field--name-user-picture img{
  background-color: white;
  border-radius: 50%;
  border-color: #ccc;
  border-width: 5px;
  border-style: solid;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 100px;
}

.profile .user-name h2{
  margin: 0;
}
.profile .user-name .js-form-item{
  margin: 10px 0;
}

.profile .user-settings{
  display: flex;
}

.profile .user-settings .field{
  margin-right: 30px;
}

.profile .user-edit-profile{
  position: absolute;
  right: 0;
  top: 10px;
}

/*.profile .user-edit-profile a{
  padding: 10px 20px;
  -webkit-transition: all .15s;
  transition: all .15s;
  -webkit-box-shadow: 0 1px 6px rgba(57,73,76,0.35);
  box-shadow: 0 1px 6px rgba(57,73,76,0.35);
  border-radius: 2px;
}

.profile .user-edit-profile a:hover{
  color:#015b91;
  -webkit-transition: all .3s;
  transition: all .3s;
  outline: none;
  -webkit-box-shadow: 0 2px 10px 1px rgba(57,73,76,0.4), 0 1px 2px rgba(57,73,76,0.25);
  box-shadow: 0 2px 10px 1px rgba(57,73,76,0.4), 0 1px 2px rgba(57,73,76,0.25);
}*/

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

/*USER FORM*/

.user-form .field--name-user-picture .image-widget .file,
.user-form .field--name-user-picture .image-widget .file-size,
.user-form .field--name-user-picture .image-widget summary,
.user-form .field--name-user-picture .image-widget .vertical-tabs__menu,
.user-form .field--name-user-picture .image-widget .crop-preview-wrapper__crop-reset.button{
  display: none;
}

.user-form .field--name-user-picture .image-widget details,
.user-form .field--name-user-picture .image-widget .details-wrapper,
.user-form .field--name-user-picture .image-widget  .vertical-tabs{
  border: none;
  margin: 0;
  padding: 0;
}

.user-form .field--name-user-picture .image-widget .details-wrapper {
  max-width: 400px;
}

/*USER FORM*/


.view-lingopolo-voice-artists td.views-field-field-audio-author {
  padding: 10px;
}

.flipcard-auto-breakdown-form .fieldset-legend .promt {
  font-weight: normal;
}

.flipcard-auto-breakdown-form .highlight {
  font-weight: bold;
  font-size: 14px;
}

.flipcard-auto-breakdown-form .red-highlight{
  color: red;
}

.flipcard-auto-breakdown-form fieldset.error{
  border-color: red;
}

.messages del{
  color: red;
  background: #fdd;
  text-decoration: none;
}

.messages ins{
  color: green;
  background: #dfd;
  text-decoration: none;
}

.site-footer .block-devel-switch-user .content ul {
  display: block;
  flex-flow: column;
  padding: 0;
}

.site-footer .block-devel-switch-user .contextual ul.contextual-links {
  display: none;
}

.site-footer .block-devel-switch-user .contextual.open ul.contextual-links {
  display: block;
}

.revise-status {
  padding: 0;
  color: white;
  text-align: center;
  border-radius: 30px;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border: 1px solid black;
}

.revise-status.status-learn{
  background: var(--bg-button-color-green);
}

.revise-status.status-revise {
  background: var(--bg-button-color-orange);
}

.revise-status.status-revise-later {
  background: var(--bg-button-color-gray);
  color: #3b3b3b;
}

ul.lesson-progress-by-status {
  list-style: none; /* Remove default bullets */
  padding-left: 0;
}
ul.lesson-progress-by-status li {
  display: flex;
  flex-direction: row;
  align-items: center;
}
ul.lesson-progress-by-status li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  font-weight: bold; /* If you want it to be bold */
  font-size: 30px;
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 25px; /* Also needed for space (tweak if needed) */
  line-height: 1;
}
ul.lesson-progress-by-status li.status-learn::before {
  color: var(--bg-button-color-green); /* Change the color */
}
ul.lesson-progress-by-status li.status-revise::before {
  color: var(--bg-button-color-orange); /* Change the color */
}
ul.lesson-progress-by-status li.status-revise-later::before {
  color: var(--bg-button-color-gray); /* Change the color */
}

div.lesson-progress-by-status {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 20px;
}
div.lesson-progress-by-status div.progress-bar{
  height: 30px;
  cursor: help;
}
div.lesson-progress-by-status div.status-learn {
  background-color: var(--bg-button-color-green); /* Change the color */
}
div.lesson-progress-by-status div.status-revise {
  background-color: var(--bg-button-color-orange); /* Change the color */
}
div.lesson-progress-by-status div.status-revise-later {
  background-color: var(--bg-button-color-gray); /* Change the color */
}

.view-recent-blog-post img {
  max-width: 95%;
}

.quiz-page .messages__wrapper {
  padding: 0 0 0 8px;
  margin: 50px 0 -20px 0;
}

@media (max-width: 760px) {
  .quiz-page .messages__wrapper {
    padding: 0 0 0 8px;
    margin: 40px 0 0px 0;
  }
}

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active),
.horizontal-tabs-panes .horizontal-tab-hidden {
  display: block !important;
  height: 0;
  overflow-y: hidden;
  margin: 0;
}
/* bootstrap hack end */