:root {
  --primary: #FFC824;
  --primary-dark:#FDB415;
  --primary-darker: #AA8329;
  --primary-light : #FFE8A3;
  --secondary: #80608D;
  --secondary-dark: #503566;
  --bg-color-1: #4D0054;
  --bg-color-2: #001242;
  --black: #000000;
  --white: #ffffff;
  --grey: #E5E5E5;
  --grey-dark: #D0D0D0;
  --success-color: #00C52E;
  --accent-color-1: #82DCE0;
  --accent-color-2 : #9AE98A;
  --text-shadow : rgba(0,0,0,0.8);
}

/* CUSTOM SINHALA FONTS IMPORTING */
@font-face {
    font-family: 'UN-Emanee';
    src: url('../fonts/UN-Emanee.woff2') format('woff2'),
        url('../fonts/UN-Emanee.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0D80-0DFF, U+111E0-111FF, U+200C-200D;
}

@font-face {
    font-family: 'Sinhala Sangam MN';
    src: url('../fonts/SinhalaSangamMN-Bold.woff2') format('woff2'),
        url('../fonts/SinhalaSangamMN-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0D80-0DFF, U+111E0-111FF, U+200C-200D;
}

@font-face {
    font-family: 'Sinhala Sangam MN';
    src: url('../fonts/SinhalaSangamMN.woff2') format('woff2'),
        url('../fonts/SinhalaSangamMN.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0D80-0DFF, U+111E0-111FF, U+200C-200D;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-v47-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Belanosima';
  src: url('../fonts/belanosima-v3-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========== */

.df-theme > #page{
    background: var(--bg-color-2);
    background: linear-gradient(320deg, var(--bg-color-2) 0%, var(--bg-color-1) 100%);  
    z-index: 0;
}

.dft-bg{
    background: var(--bg-color-2);
    background: linear-gradient(320deg, var(--bg-color-2) 0%, var(--bg-color-1) 100%);  
}

/* Font Styles */
.df-text-normal {
    font-family: 'Sinhala Sangam MN', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: var(--grey-dark);
    font-size: 15px;
    line-height: 22px;
    text-shadow: 0 2px 0 var(--text-shadow);
    -webkit-font-smoothing: antialiased;
}

.df-text-simple {
    font-family: 'Sinhala Sangam MN', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: var(--grey-dark);
    font-size: 15px;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
}

.df-text-big {
    font-family: 'Sinhala Sangam MN', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: var(--grey-dark);
    font-size: 18px;
    line-height: 22px;
    text-shadow: 0 2px 0 var(--text-shadow);
    -webkit-font-smoothing: antialiased;
}

.df-text-xs {
    font-family: 'Sinhala Sangam MN', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: var(--grey-dark);
    font-size: 13px;
    line-height: 22px;
    text-shadow: 0 2px 0 var(--text-shadow);
    -webkit-font-smoothing: antialiased;
}

.df-text-bold{
    font-family: 'Sinhala Sangam MN', 'Open Sans', sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 15px;
    line-height: 22px;
    color: var(--grey-dark);
    text-shadow: 0 2px 0 var(--text-shadow);
    -webkit-font-smoothing: antialiased;
}
.df-text-bold > .text-sm{
    font-size: 15px;
}
.df-text-title{
    font-family: 'UN-Emanee', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 17px;
    line-height: 22px;
    color: var(--grey-dark);
    text-shadow: 0 2px 0 var(--text-shadow);
    -webkit-font-smoothing: antialiased;
}

.df-text-title-big{
    font-family: 'UN-Emanee', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: 0 2px 0 var(--text-shadow);
    font-size: 17px;
    line-height: 22px;
    color: var(--grey);
    -webkit-font-smoothing: antialiased;
}

.df-text-message-bold {
    font-size: clamp(11px, 2vw, 14px) !important;
}

.df-hilighted-title{
    font-family: 'UN-Emanee', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: 0 2px 0 var(--text-shadow);
    font-size: 17px;
    line-height: 22px;
    color: var(--primary-light);
    -webkit-font-smoothing: antialiased;
}

.df-notif-title {
    font-family: 'UN-Emanee', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: 0 2px 0 var(--text-shadow);
    font-size: 27px;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
}

.df-btn-text {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
}

.df-btn-text-white {
    color: var(--grey-dark);
}

.df-btn-text-black {
    color: var(--black);
}

.df-top-list-item {
    background: rgba(0, 0, 0, 0.31);
}

.df-top-list-item-border {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.df-bg-none {
    background-color: transparent
}

.df-bela-title {
    font-family: 'Belanosima', 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    color: var(--grey-dark);
    font-size: 24px;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
}

.color-primary{
    color: var(--primary);
}
.color-grey{
    color: var(--grey);
}
.color-grey-dark{
    color: var(--grey-dark);
}

.nt-enr{
    position: absolute;
    left: 0;
    bottom: 0;
    width: auto;
    display: inline-block;
    right: initial;
    border-radius: 0 15px 0 0;
    padding: 5px 22px;
    font-size: 13px;
    color: #D0D0D0;
    background-color: #000;
}

.enr{
    position: absolute;
    left: 0;
    bottom: 0;
    width: auto;
    display: inline-block;
    right: initial;
    border-radius: 0 15px 0 0;
    padding: 5px 22px;
    font-size: 13px;
    color: #ffffff;
    background-color: #00C52E;
}

/*Quest Button Default */

.quest-btn.bg-zinc-700{
    background-color: #80608D;
}
.quest-btn.after\:bg-zinc-800:after{
    background-color: #503566;
}
.quest-btn i.text-zinc-600{
    color: rgba(255,255,255,0.26);
}



/*Quest Button Incomplete */

.quest-btn.bg-green-500{
    background-color: #30BC79;
}
.quest-btn.after\:bg-green-700:after{
    background-color: #00802B;
}



/*Quest Button Completed */

.quest-btn.bg-\[\#fdbc15\]{
    background-color: #FFC824;
}
.quest-btn.after\:bg-\[\#b38e2e\]:after{
    background-color: #AA8329;
}


.checkbtn{
    height: 43px;
    border-radius: 25px;
}

/* DASHED LINE STYLES */
.quest-mission {
    --border-design: 1px dashed #483E96
}

.quest-item {
    border-bottom: 1px dashed #483E96;
}

.quest-item:before {
    border-bottom: 1px dashed #483E96;
}

.quest-item:after {
    border-top: 1px dashed #483E96
}

.quest-item:nth-child(2n):after {
    border-right: 1px dashed #483E96;
}

.quest-item:nth-child(odd):before {
    border-left: 1px dashed #483E96;
}


/* TAB BAR STYLES */
.tab-bar{
    gap: 30px;
}


.btn-prm.df-text-bold{
    color: var(--black);
    text-shadow: none;
}

.top-tabs .tt-inner,
.top-bar-bg{
    background-color: rgba(0,0,0,0.4);
    border-bottom-color: rgba(253,180,21,0.25);
}

.top-tabs .tt-btn{
    background-color: #000;
}

.und-layer{
    background-color: rgba(32,7,34,0.9);
}
.prg-bar{
    background: rgba(255,255,255,0.21);
}
.prg-bar > div{
    background-color: #FFC824;
}

.voiceBtn {
    background: rgba(0,0,0,0.8);
    border: 1px solid #3d2a0d;
}
.dash-bordered-card{
    background-color: rgba(217, 217, 217, 0.10);
    border: 1px dashed rgba(255, 255, 255, 0.24);
    border-radius: 6px;
}
.dark-card{
    background-color: rgba(0, 0, 0, 0.32);    
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.sentence-display{
    background: rgba(0,0,0,0.31);
    border: 1px solid rgba(255,255,255,0.2);
    color: #dabf6d;
    font-size: 16px;
    font-family: 'Sinhala Sangam MN', 'Open Sans', sans-serif;
    font-weight: 500;
    text-shadow: 1px 1px 0 #000;
}
.wordpool{
    /*background-color: rgba(0, 0, 0, 0.32);    */
    /*border-radius: 6px;*/
    /*border: 1px solid rgba(255, 255, 255, 0.10);*/
    background-color: rgb(130 72 186 / 18%);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.dropzone{
    /*background-color: rgba(217, 217, 217, 0.10);*/
    /*border: 1px dashed rgba(255, 255, 255, 0.24);*/
    /*border-radius: 6px;*/
    /*justify-content:flex-start;*/
    
    background-color: rgb(0 0 0 / 21%);
    border: 1px dashed rgb(0 0 0 / 56%);
    border-radius: 6px;
    justify-content: flex-start;
    box-shadow: inset 0 2px 6px rgb(0 0 0 / 35%);
}
.wordpool > div,
.dropzone > div{
    background-color: var(--accent-color-1);
    color: #003E41;
    border-color: var(--accent-color-1);
}
.wordpool > div > div,
.dropzone > div > div{
    color: #003E41;
    font-weight: 500;
}


#journey{
    /*background: #000;*/
    background: linear-gradient(320deg, var(--bg-color-2) 0%, var(--bg-color-1) 100%);  
}

.journey-content h3{
    font-family: 'UN-Emanee', 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: 0 2px 0 var(--text-shadow);
    font-size: 17px;
    line-height: 22px;
    color: var(--grey);
    -webkit-font-smoothing: antialiased;
}



.journey-content p{
    font-family: 'Sinhala Sangam MN', 'Open Sans', sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 15px;
    line-height: 22px;
    color: var(--grey-dark);
    text-shadow: 0 2px 0 var(--text-shadow);
    -webkit-font-smoothing: antialiased;
}

.drawer > div{
    background: #13001e;
}

.info-link{
    color: #7c7ab3;
}
.notif-title{
    font-weight: 700;
    font-size: 24px;
    text-shadow: 1px 1px 0px #00000
}
.ans-invalid .notif-title{
    color: #ff3b3b;
}
.ans-valid .notif-title{
    color: #5bc27b;
}

.ans-invalid .your-ans,
.ans-invalid .correct-ans{
    background: rgba(80,80,80,0.4);
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.48);
    margin: 30px 0;
}
.ans-invalid .your-ans > div:first-of-type,
.ans-invalid .correct-ans > div:first-of-type{
    padding: 12px;
    background-color: #000;
    font-size: 17px;
    font-weight: 500;
}

.ans-invalid .your-ans > div:first-of-type{
    color: red;
}
.ans-invalid .correct-ans > div:first-of-type{
    color:#2ebb2e;
}

.ans-invalid .your-ans > div + div,
.ans-invalid .correct-ans > div + div,
.ans-invalid .correct-ans > div + div .text-sm{
    color: #bfbfbf;
    background: transparent;
}

.tt-inner #next{
    height: 48px;
}

.btn-view-lb {
    background: #84E58F;
    height: 48px;
}

.df-btn-yellow {
    background: #FFC824;
    height: 48px;
}

.df-transparent-bg {
    background-color: rgba(0,0,0,0.4);
    border-bottom-color: rgba(253,180,21,0.25);
}

.df-pure-transparent-bg {
    background-color: rgba(0,0,0,0.4);
}

.df-home-full-height {
    bottom: 0px;
}

.df-home-full-height::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.df-bottom-nav-bar {
    margin-bottom: 15px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: #275e6da6 0px 0px 10px 0.5px;
}

.df-z-index {
    z-index: 10;
}

.df-ans-incorrect {
    font-size: 20px;
    color: rgb(239 68 68/var(--tw-text-opacity));
}

.df-ans-correct {
    font-size: 20px;
    color: rgb(34 197 94/var(--tw-text-opacity));
}

.df-btn-rounded-yellow {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    background: #FFC824;
    padding: 12px 36px;
    border-radius: 28px;
    font-weight: 700;
    color: #232222;
    font-size: 15px;
}