/*@import url("https://fonts.googleapis.com/css?family=Varela Round:300,400,600,700");*/
/*@import url("https://fonts.googleapis.com/css?family=Titillium Web:300,400,600,700");*/

@import url(variables.css);
@import url("https://fonts.googleapis.com/css?family=Noto Sans:300,400,600,700");

* {
    /*font-family: 'Varela Round' !important;*/
    font-family: 'Noto Sans';    
}

.clstrm_outer, #clstr_a, .clstrm_inner {
    width: 100px;
    height: 100px;
    margin-left:auto; 
    margin-right:auto;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scrollable-books {
        scrollbar-color: var(--section-separator) var(--books-background-color);
        scrollbar-width: auto;
    }

    .scrollable-books-transparent {
        scrollbar-color: var(--section-separator) transparent;
        scrollbar-width: auto;
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scrollable-books::-webkit-scrollbar-thumb {
        background: var(--section-separator);
    }
    .scrollable-books::-webkit-scrollbar-track {
        background: var(--books-background-color);
    }
    .scrollable-books::-webkit-scrollbar {
        max-width: 10px;
        max-height: 10px;
    }

    .scrollable-books-transparent::-webkit-scrollbar-thumb {
        background: auto;
    }
    .scrollable-books-transparent::-webkit-scrollbar-track {
        background: transparent;
    }
    .scrollable-books-transparent::-webkit-scrollbar {
        max-width: 10px;
        max-height: 10px;
    }
}

.img-help-audio-capture1 {
    content:url("/img/help/audio/capture1.png");
}
.img-help-audio-capture2 {
    content:url("/img/help/audio/capture2.png");
}
.img-help-audio-capture3 {
    content:url("/img/help/audio/capture3.png");
}
.img-help-audio-capture4 {
    content:url("/img/help/audio/capture4.png");
}
.img-help-audio-capture5 {
    content:url("/img/help/audio/capture5.png");    
}
.img-help-audio-capture6-1-chinese {
    content:url("/img/help/audio/capture6-1-chinese.png");
}
.img-help-audio-capture6-2-chinese {
    content:url("/img/help/audio/capture6-2-chinese.png");
}
.img-help-audio-capture6-1-japanese {
    content:url("/img/help/audio/capture6-1-japanese.png");
}
.img-help-audio-capture6-2-japanese {
    content:url("/img/help/audio/capture6-2-japanese.png");
}
.img-help-audio-capture6-1-cantonese {
    content:url("/img/help/audio/capture6-1-cantonese.png");
}
.img-help-audio-capture6-2-cantonese {
    content:url("/img/help/audio/capture6-2-cantonese.png");
}
.img-help-audio-capture6-1-vietnamese {
    content:url("/img/help/audio/capture6-1-vietnamese.png");
}
.img-help-audio-capture6-2-vietnamese {
    content:url("/img/help/audio/capture6-2-vietnamese.png");
}
.img-help-audio-capture6-1-korean {
    content:url("/img/help/audio/capture6-1-korean.png");
}
.img-help-audio-capture6-2-korean {
    content:url("/img/help/audio/capture6-2-korean.png");
}


.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
}

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

.border-top-tags {
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 1px !important;
    border-bottom-width: 0px;
    border-style: solid;
}

.app-tags {
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-style: solid;
    border-radius: 0px 0px var(--radius) var(--radius) !important;
}

.app-tags-ar {
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-style: solid;
    border-radius: 0px 0px var(--radius) var(--radius) !important;
}

.counter-background {
    background-color: var(--basic-5-background-color);	
}

.writing-color {
    color: #9370DB;
}

.translation-color {
    color: #c54b8c;
}

.tone-color {
    color: #FF7F50;
}

.pronunciation-color {
    color: #F05D68;
}

.sessions {
    padding-top: 6.875rem;
    padding-bottom: 6.375rem;
}

.white-color {
    color: white;
}

.popup-contents {
    margin-left: 0px;
    width:100%;
    text-align:center;
}

.progress {
    border-radius: 5px;
    color:#007AFF;
    margin-left: auto;
    margin-right: auto;
}
progress::-moz-progress-bar { background: #007AFF; }
progress::-webkit-progress-value { background: #007AFF; }

.card-item {
    margin-left:auto;
    margin-right:auto;
    padding: 0px;
    border-radius: var(--radius);
}

.card-item-nav {
    margin-left:auto;
    margin-right:auto;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: var(--radius);
}

.border-right {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    border-right-width: 0px;
}

.card-item-small {
    margin-top: 5px;
    border-radius: var(--radius);
}

.card-item-small2 {
    border-radius: var(--radius);
    padding: 0px 10px;
}

.card-item-small3 {
    width: auto;
    border-radius: var(--radius-small);
    padding: 10px 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.card-item-small-category, .card-item-small-category-blue, .card-item-small-category-green, .card-item-small-category-orange, .card-item-small-category-purple, .card-item-small-category-collection, .card-item-small-category-collection-ar, .card-item-small-category-collection2, .card-item-small-category-soon {
    width: auto;
    display: inline-block;
    margin: 0px auto;
    border-radius: var(--radius-small);
    padding: 0 15px;
    opacity: 0.9;
    line-height: 28px;
}

.card-item-small-category-soon, .card-item-small-category-soon-ar {
    width: auto;
    display: inline-block;
    margin: 0px auto;
    border-radius: var(--radius);
    padding: 0 15px;
    opacity: 0.9;
    line-height: 28px;
}

.title-link {    
    text-decoration:none;
    font-weight: bold;
}

.os-icon {
    font-size:1.2rem;
}
.os-icon-smaller {
    font-size:1.1rem;
}

.xamisoft-pronunciation {
    display: inline-block;
    float:left;
    margin-top:5px;
    margin-bottom:auto;
    vertical-align: middle;
}

html[dir="rtl"] .xamisoft-pronunciation {
    float:right;
}

.xamisoft-footer-logo {
    display: inline;
    float: left;
    margin: auto;
    vertical-align: middle;
}

html[dir="rtl"] .xamisoft-footer-logo {
    float: right;
}

.language-link {
    font-size: small;
    position: absolute;
    top: 18px;
    right: 16px;
    display: inline;
    margin-inline-start: auto;
    margin-inline-end: 10px;
}

.language-link-ar {
    font-size: small;
    position: absolute;
    top: 18px;
    left: 16px;
    display: inline;
    margin-inline-start: auto;
    margin-inline-end: 10px;    
}

.navbar-custom .navbar-brand.logo-image {
    width: 108px;
    height: 34px;
}

.features {
    line-height:1.8rem;
    text-align:start;
    text-indent: 0%;
    text-justify: auto
}

.dropdown span {
    margin-inline-start: 20px;
}

.column-align {
    text-align:start;
}

.capture1 {
    margin-top:0px;
    margin-inline-start:10px;
    position:absolute;
    top:10px;
    left:10px;
}
html[dir="rtl"] .capture1 {
    left:0px;
    right:10px;
}


.capture2 {
    margin-top:0px;
    margin-inline-start:0px;
    margin-inline-end:10px;
    position:absolute;
    top:45px;
    right:10px;
}
html[dir="rtl"]  .capture2 {
    left:0px;
    right:unset;
}

.language-select {
    display: block;
}

.hide-mobile {
    display: none;
}

.hide-label-mobile {
    display: none;
}

.show-small {
    display: inline;
}

.show-capture-background {
    display: block;
}

.capture-transform-positive {
    transform: rotate(0deg);
}
.capture-transform-negative {
    transform: rotate(0deg);
}

.language-li {
    display: none;
}

.language-li-inline {
    display: none;
}

.sticky-menu {
    display: none;
}

.mobile-center {
    margin-left:auto;
    margin-right:auto;
}

.mobile-center2 {
    margin-left:auto;
    margin-right:auto;
}

.mobile-center3 {
    margin-left:auto;
    margin-right:auto;
}

.capture-position {
    position:relative;
    background-color: transparent;
    vertical-align:middle;
    margin-top:40px;
    margin-bottom:auto;
}

@media (min-width: 768px) {

    .show-small {
        display: inline;
    }

    .sticky-menu {
        display: none;
    }

    .hide-mobile {
        display: none;
    }

    .hide-label-mobile {
        display: none;
    }

    .start-center {
        text-align: center;
    }
    
    .mobile-center2 {
        margin-left:auto;
        margin-right:auto;
    }
    .mobile-center3 {
        margin-left:auto;
        margin-right:auto;
    }

    .border-top-tags {
		border-left-width: 0px;
		border-right-width: 0px;
		border-top-width: 1px !important;
		border-bottom-width: 0px;
		border-style: solid;
	}

    .app-tags {
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
    }
    
    .app-tags-ar {
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
    }

    .features {
        line-height:1.8rem;
        text-align:center;
    }

    .capture1 {
        position:relative;
        margin-inline-start:0px;
        margin-top:-60px;
        top:0px;
        left:0px;
    }
    html[dir="rtl"] .capture1 {
        left:unset;
        right:0px;
    }

    .capture2 {
        position:relative;
        margin-inline-start:-80px;
        margin-inline-end:0px;
        margin-top: 20px;
        top:0px;
        right:0px;
    }
    html[dir="rtl"] .capture2 {
        right:unset;
        left:0px;
    }

    .language-select {
        display: none;
    }

    .shox-capture-background {
        display: block
    }
    
    .language-li {
        display: block;
    }

    .language-li-inline {
        display: block;
    }

    .capture-position {
        position:relative;
        background-color: transparent;
        vertical-align:middle;
        margin-top:40px;
        margin-bottom:auto;
    }

    .popup-contents {
        margin-left: 10px;
        margin-top: 6px;
        width:auto;
        text-align:start;
    }
}

@media (min-width: 992px) {

    .show-capture-background {
        display: none;
    }
    
    .show-small {
        display: inline;
    }

    .sticky-menu {
        display: none;
    }

    .hide-mobile {
        display: none;
    }

    .hide-label-mobile {
        display: none;
    }

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

    .mobile-center {
        margin-left:auto;
        margin-right:auto;
    }
    .mobile-center2 {
        margin-left:auto;
        margin-right:auto;
    }
    .mobile-center3 {
        margin-left:auto;
        margin-right:auto;
    }

    .border-top-tags {
		border-left-width: 0px;
		border-right-width: 0px;
		border-top-width: 0px !important;
		border-bottom-width: 0px;
		border-style: solid;        
	}

    .app-tags {
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-radius: 0px var(--radius) var(--radius) 0px !important;
    }
    
    .app-tags-ar {
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-radius: var(--radius) 0px 0px var(--radius) !important;
    }    

    .column-align {
        text-align:end;
    }
}

@media (min-width: 1000px) {

    .sticky-menu {
        display: none;
    }
        
    .hide-mobile {
        display: inline;
    }

    .hide-label-mobile {
        display: none;
    }

    .show-small {
        display: inline;
    }
}


@media (min-width: 1200px) {

    .capture-transform-positive {
        transform: rotate(5deg);
    }
    .capture-transform-negative {
        transform: rotate(-5deg);
    }

    .hide-label-mobile {
        display: inline;
    }

    .sticky-menu {
        display: none;
    }

    .hide-mobile {
        display: inline;
    }

    .show-small {
        display: none;
    }

    .start-center {
        text-align: start;
    }
    .start-center-ar {
        text-align: start;
    }

    .mobile-center {
        margin-left:13px;
        margin-right:13px;
    }
    .mobile-center2 {
        margin-left:8px;
        margin-right:8px;
    }
    .mobile-center3 {
        margin-left:0px;
        margin-right:0px;
    }

    .border-top-tags {
		border-left-width: 0px;
		border-right-width: 0px;
		border-top-width: 0px !important;
		border-bottom-width: 0px;
		border-style: solid;
	}

    .app-tags {
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-radius: 0px var(--radius) var(--radius) 0px !important;
    }
    
    .app-tags-ar {
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-radius: var(--radius) 0px 0px var(--radius) !important;
    }
    
}

@media (min-width: 1700px) {
    
    .sticky-menu {
        display: block;
        position: fixed; 
        top:180px;
        right:50px;
        margin: 0;
        width:300px;
        z-index:10;
    }

    .show-small {
        display: none;
    }
}