:root{
    --color-blue-dark: #3B5998;
    --color-blue-deep: #1CB0F6;
    --color-blue: #1CB0F6;
    --color-blue-light: #BCE9FF;
    --color-blue-transparent: #EBFBFF;
    --color-text-darker: #201F1F;
    --color-text-dark: #4C4C4C;
    --color-text: #777777;
    --color-text-light: #AFAFAF;
    --color-gray-dark: #CFCFCF;
    --color-gray: #DDDDDD;
    --color-gray-light: #F0F0F0;
    --color-white: #FFFFFF;
    --color-green-dark: #58A700;
    --color-green: #58CC02;
    --color-green-light: #9DF10B;
    --color-green-lighter: #BFF199;
    --color-green-transparent: #F2FFE8;
    --color-purple-transparent: #FBF2FF;
    --color-orange: #ffc432;
    --color-red: #D33113;
    --color-red-light: #FF9797;
    --color-yellow: #FFF200;
    --color-yellow-light: #FFF277;
    --color-border-blue: #01357A;
    --color-border-orange: #DF9000;
    --color-border-green: #58A700;
    --color-border-black: #4C4C4C;
    --color-border-gray: #777777;
    --color-border-gray-light: #ddd;
    --color-vocabulary: #00C5F9;
    --color-vocabulary-light: #00E5FF;
    --color-vocabulary-lighter: #EBFBFF;
    --color-grammar: #2BC788;
    --color-grammar-light: #00D786;
    --color-grammar-lighter: #D2FFEE;
	--color-sentence: #FF014E;
    --color-sentence-light: #F991B4;
    --color-sentence-lighter: #D2FFEE;
    --color-pronunciation: #FFB020;
    --color-pronunciation-light: #FFC432;
    --color-pronunciation-lighter: #FFFEEF;
    --color-natural: #58CC02;
    --color-natural-light: #9DF10B;
    --color-natural-lighter: #F2FFE8;
    --color-music: #8A29B2;
    --color-music-light: #A73AD4;
    --color-music-lighter: #FBF2FF;
    --color-writing: #608DEB;
    --color-writing-light: #709EFF;
    --color-writing-lighter: #F3F9FF;
}
@font-face{
    font-family:uvnvan;
    src:url(../fonts/uvnvan.ttf);
    font-weight:600
}
@font-face{
    font-family:promt;
    src:url(../fonts/BalooTamma-Regular.ttf);
}
@font-face{
    font-family:promtsemibold;
    src:url(../fonts/BalooTamma-SemiBold.ttf);
}
@font-face{
    font-family:promtmedium;
    src:url(../fonts/BalooTamma-Medium.ttf);
}
@font-face{
    font-family:promtmediumitalic;
    src:url(../fonts/BalooTamma-Medium.ttf);
}
@font-face{
    font-family:promtbold;
    src:url(../fonts/BalooTamma-Bold.ttf);
}
@font-face{
    font-family:promtextrabold;
    src:url(../fonts/BalooTamma-ExtraBold.ttf);
}
@font-face{
    font-family:promtlight;
    src:url(../fonts/Prompt-Light.ttf);
}
@font-face{
    font-family:promtitalic;
    src:url(../fonts/BalooTamma-Regular.ttf);
}
@font-face{
    font-family:firasans;
    src:url(../fonts/firasans.ttf);
}
@font-face{
    font-family:firasanssemibold;
    src:url(../fonts/firasanssemibold.ttf);
}
@font-face{
    font-family:balootammabold;
    src:url(../fonts/BalooTamma-Bold.ttf);
}
@font-face{
    font-family:balootammaextrabold;
    src:url(../fonts/BalooTamma-ExtraBold.ttf);
}
@font-face{
    font-family:balootammamedium;
    src:url(../fonts/BalooTamma-Medium.ttf);
}
@font-face{
    font-family:balootamma;
    src:url(../fonts/BalooTamma-Regular.ttf);
}
@font-face{
    font-family:balootammasemibold;
    src:url(../fonts/BalooTamma-SemiBold.ttf);
}



body{
    color: var(--color-text-dark);
    padding-top: 70px;
    font-family: balootamma;
	overflow: auto;
}
.ui-button{
    width: 125px;
    height: 43px;
    display: inline-block;
    line-height: 43px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    border-bottom: 2px solid;
}
.ui-button-long{
    width: 228px;
    height: 53px;
    display: inline-block;
    line-height: 53px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    border-bottom: 2px solid;
}
.ui-button-longer{
    width: 100%;
    max-width: 323px;
    height: 53px;
    display: inline-block;
    line-height: 53px;
    font-size: 15px;
    font-family: balootammasemibold;
    border-radius: 10px;
    border: 1px solid;
    text-align: center;
    border-bottom: 3px solid;
}
.ui-button-flat{
    width: 105px;
    height: 37px;
    display: inline-block;
    line-height: 37px;
    font-size: 15px;
    font-weight: 500;
}
.ui-button-long{
    width: 184px;
    height: 37px;
    display: inline-block;
    line-height: 37px;
    font-size: 15px;
    font-weight: 500;
}
.ui-button:hover,
.ui-button-long:hover,
.ui-button-longer:hover,
.ui-button:focus,
.ui-button-long:focus,
.ui-button-longer:focus{
    text-decoration: none;
}

.ui-heading {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}
.ui-input{
    display: inline-block;
}


.close-modal{
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../images/voca-bg.svg) 0px -1250px;
    border-radius: 50%;
    text-decoration: none;
    outline: 0px;
    padding: 0px;
    position: absolute;
    right: -9px;
    top: -9px;
    z-index: 1;
}
.modal-button-close {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../img/learning-icon-bg.svg) 0px -1495px;
    border-radius: 50%;
    text-decoration: none;
    outline: 0px;
    padding: 0px;
    position: absolute;
    right: -9px;
    top: -9px;
}
.close-modal:hover,
.modal-button-close:hover{
    cursor: pointer;
}


.toast-msg{
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    background: #000;
    min-width: 245px;
    min-height: 48px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    line-height: 18px;
    position: fixed;
    z-index: 1002;
    left: 50%;
    bottom: 100px;
    transform: translate(-50%, 0%);
    border-radius: 30px;
    display: none;
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 576px){
	.modal-dialog {
		max-width: unset;
	}
	iframe{
		max-width: 100%;
	}
}