/* General */

*
{
    font-family: "Ubuntu", sans-serif;
}

:root 
{
    --mainColor:#295cd2;
    --mainColorTransparent:#295cd231;
}

* 
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* General */

/* Login */

.loginPageOuter
{
    width:100%;
    min-height:100vh;
    float:left;
    background-size:cover;
    background-position:center;
    position:relative;
}

.loginPageInner
{
    width:100%;
    min-height:100vh;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:5;
    padding:50px 0px;
}

.loginPageBox
{
    width:70%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:stretch;
    justify-content:center;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.35);
}

.loginPageFormOuter
{
    flex:1;
    min-height:50px;
    background-color:#fff;
    float:left;
    padding:30px;
}

.loginPageImageOuter
{
    flex:1;
    min-height:50px;
    background-size:cover;
    background-position:center;
    padding:30px;
}

.loginPageFormLogoOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-bottom:30px;
}

.loginPageFormLogoOuter img
{
    width:55px;
}

.loginPageFormOuter h1
{
    width:100%;
    font-size:22px;
    font-weight:500;
    margin:0px;
    margin-bottom:8px;
}

.loginPageFormOuter h3
{
    width:100%;
    font-size:19px;
    font-weight:300;
    margin:0px;
    margin-bottom:30px;
}

.loginPageFormOuter h4
{
    width:100%;
    font-size:17px;
    font-weight:300;
    margin:0px;
    margin-bottom:30px;
    line-height:27px;
}

.loginPageFormInputOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-bottom:15px;
}

.loginPageFormInputOuter p
{
    width:100%;
    margin:0px;
    font-size:14px;
    font-weight:500;
    color:#333;
    margin-bottom:5px;
}

.loginPageFormInputOuter p span
{
    color:#ff0000;
}

.loginPageFormInputBox
{
    width:100%;
    min-height:10px;
    float:left;
    border-radius:4px;
    border:1px solid #dadada;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.loginPageFormInputOuter .loginPageFormInputBox input
{
    width:100%;
    height:45px;
    float:left;
    padding:0px;
    padding-bottom:1px;
    outline:0px!important;
    border:0px!important;
    outline:0px!important;
    font-size:13px;
}

.loginPageFormInputOuter .loginPageFormInputBox select
{
    width:100%;
    height:45px;
    float:left;
    padding:0px;
    padding-bottom:1px;
    outline:0px!important;
    border:0px!important;
    outline:0px!important;
    font-size:13px;
    margin-left:-5px;
    margin-right:5px;
}

.loginPageFormInputBoxIcon
{
    width:55px;
    height:45px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    padding-top:1px;
}

.loginPageLinkOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:flex-end;
    justify-content: flex-end;
    margin-top:-5px;
}

.loginPageLinkOuter a
{
    font-size:13px;
    font-weight: 500;
    color:var(--mainColor);
    text-decoration: none!important;
}

.loginButtonOuter
{
    width:100%;
    height:45px;
    background-color:var(--mainColor);
    border:0px!important;
    outline:0px!important;
    margin-top:30px;
    float:left;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:14px;
    padding-bottom:3px;
    letter-spacing: 1px;
}

.loginCenterTitleOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin-top:20px;
}

.loginCenterTitleOuter:before
{
    content:'';
    flex:1;
    height:1px;
    background-color:#dadada;
    float:left;
}

.loginCenterTitleOuter:after
{
    content:'';
    flex:1;
    height:1px;
    background-color:#dadada;
    float:left;
}

.loginCenterTitleOuter span
{
    font-size:13px;
    font-weight:300;
    color:#333;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.registerButtonOuter
{
    width:100%;
    height:45px;
    float:left;
    border:1px solid var(--mainColor);
    margin-top:20px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mainColor);
    font-size:14px;
    padding-bottom:3px;
    letter-spacing: 1px;
    cursor:pointer;
    text-decoration: none!important;
}

.loginBgVideo 
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    z-index: 1;
    float: left;
}

@media only screen and (max-width: 950px) 
{
    .loginPageImageOuter 
    {
        display:none;
    }

    .loginPageBox
    {
        width:100%;
    }
}

/* Login */

/* Homepage */

.customScroll::-webkit-scrollbar 
{
    width: 5px;
}

.customScroll::-webkit-scrollbar-track 
{
    background: #f1f1f1; 
}

.customScroll::-webkit-scrollbar-thumb 
{
    background: #888; 
}

.customScroll::-webkit-scrollbar-thumb:hover 
{
    background: #555; 
}

.dashboardOuter
{
    width:100%;
    min-height:100vh;
    background-color:#fff;
    float:left;
}

.dashboardInner
{
    width:100%;
    min-height:100vh;
    float:left;
    padding:30px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:30px;
}

.dashboardLeftSidebar
{
    width:230px;
    background-color:var(--mainColor);
    border-radius:15px;
    padding:20px;
    overflow:auto;
    height:calc(100vh - 60px);
}

.sidebarLogoOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:5px 0px;
    margin-bottom:25px;
}

.sidebarLogoOuter img
{
    width:50px;
}

.sidebarLogoOuter h3
{
    flex:1;
    font-size:16px;
    font-weight:400;
    color:#fff;
    margin:0px;
    line-height:22px;
    letter-spacing: 0.5px;
}

.sidebarGroupTitleOuter
{
    width:100%;
    font-size:13px;
    font-weight:400;
    color:#fff;
    letter-spacing: 0.5px;
    opacity: 0.7;
    float:left;
}

.sidebarMenuOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:rgba(255,255,255,0.1);
    margin-top:10px;
    padding:8px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    cursor:pointer;
    text-decoration: none!important;
}

.sidebarMenuIcon
{
    width:27px;
    height:27px;
    background-color:#fff;
    border-radius:3px;
    display:flex;
    align-items:center;
    justify-content:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mainColor);
}

.sidebarMenuOuter p
{
    flex:1;
    margin:0px;
    font-size:12px;
    font-weight:500;
    color:#fff;
    letter-spacing: 1px;
    margin-top:-1px;
}

.sidebarMenuSelect
{
    background-color:#fff;
}

.sidebarMenuSelect .sidebarMenuIcon
{
    background-color:var(--mainColor);
    color:#fff;
}

.sidebarMenuSelect p
{
    color:var(--mainColor);
}

.dashboardContents
{
    width:100%;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap:20px;
    height:calc(100vh - 60px);
    float:left;
}

.pageTopLineOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.pageTopLineBtn
{
    width:37px;
    height:37px;
    float:left;
    background-color:#f5f5f5;
    border-radius:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:var(--mainColor);
    position:relative;
    cursor:pointer;
}

.pageTopLineBtnBadge
{
    width:16px;
    height:16px;
    background-color:var(--mainColor);
    position:absolute;
    top:-3px;
    right:-3px;
    border-radius:15px;
    color:#fff;
    font-size:11px;
    text-align:center;
    font-weight:500;
    padding-left:1px;
    padding-top:1px;
}

.pageTopLinecontentsOuter
{
    flex:1;
    min-height:10px;
}

.pageTopLinecontentsOuter h3
{
    width:100%;
    margin:0px;
    float:left;
    font-weight:400;
    font-size:13px;
}

.pageTopLinecontentsOuter h4
{
    width:100%;
    margin:0px;
    float:left;
    font-weight:600;
    font-size:25px;
    letter-spacing: 1px;
    margin-top:5px;
}

.dashboadContentsCenter
{
    width:100%;
    flex:1;
    overflow:auto;
    float:left;
}

.pageBottomLineOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:#f5f5f5;
    padding:15px;
    border-radius:4px;
    font-size:12px;
    font-weight:400;
    color:#33333379;
}

.pageBottomLineOuter span
{
    float:right;
}

.dashboardRightContentsOuter
{
    width:50%;
    float:left;
    min-height:10px;
}

.dashboardLinesBoxOuter
{
    width:100%;
    min-height:10px;
    background-color:#f5f5f5;
    float:left;
    padding:15px;
    border-radius:5px;
    margin-bottom:30px;
}

.dashboardLinesTitleOuter
{
    width:100%;
    min-height:10px;
    display:flex;
    align-items:center;
    justify-content: center;
    gap:10px;
    margin-bottom:5px;
}

.dashboardLinesTitleIcon
{
    width:30px;
    height:30px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.dashboardLinesTitleIcon img
{
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
}

.dashboardLinesTitleOuter p
{
    flex:1;
    font-size:15px;
    font-weight:500;
    margin:0px;
    margin-top:-1px;
    color:var(--mainColor);
}

.dashboardLineBox
{
    width:100%;
    min-height:10px;
    background-color:#fff;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    border-radius:4px;
    gap:7px;
    position:relative;
    overflow: hidden;
    margin-top:10px;
}

.dashboardLineBox p
{
    flex:1;
    margin:0px;
    font-size:13px;
    color:var(--mainColor);
    position:relative;
    z-index:2;
} 

.dashboardLineBox span
{
    margin:0px;
    font-size:13px;
    color:#333;
    opacity: 0.7;
    position:relative;
    z-index:2;
} 

.dashboardLineBoxBg
{
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    background-color:rgb(0, 214, 0);
    opacity: 0.12;
}

.dashboadLineBoxBtn
{
    width:100%;
    height:35px;
    float:left;
    background-color:var(--mainColor);
    margin-top:15px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff!important;
    text-decoration: none!important;
    font-size:14px;
    font-weight:400;
    padding-bottom:3px;
    cursor:pointer;
}

.pageTopContentsOuter
{
    width:100%;
    min-height:10px;
    background-color:var(--mainColor);
    display:none;
    align-items:center;
    justify-content:center;
    padding:10px;
    gap:10px;
}

.pageTopContentsBtn
{
    width:34px;
    height:34px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:#fff;
    cursor:pointer;
}

.pageTopContentsOuter p
{
    flex:1;
    text-align:center;
    font-size:18px;
    font-weight:500;
    color:#fff;
    margin:0px;
    letter-spacing: 1px;
}

.bottomMenuOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:#fff;
    display:none;
    align-items:center;
    justify-content:center;
    padding:15px;
    gap:15px;
    border-top:1px solid #dadada;
}

.bottomMenuBtnOuter
{
    flex:1;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.bottomMenuBtn
{
    width:40px;
    height:40px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:var(--mainColor);
}

.bottomMenuBtnSelect
{
    background-color:var(--mainColor);
    color:#fff;
}

.homepageContentsOuter
{
    width:100%;
    height:calc(100vh - 155px);
    display:none;
    align-items:center;
    justify-content:center;
}

.homepageContentsBox
{
    width:100%;
    aspect-ratio: 1;
    position:relative;
}

.homepageContentsBox img
{
    width:100%;
    position:relative;
    z-index:1;
}

.homepageContentsBox a:nth-child(1)
{
    width:60%;
    aspect-ratio: 7/5;
    position:absolute;
    z-index:2;
    left:20%;
}

.homepageContentsBox a:nth-child(2)
{
    width:40%;
    aspect-ratio: 7/7;
    position:absolute;
    z-index:2;
    left:0%;
    bottom:5%;
}

.homepageContentsBox a:nth-child(3)
{
    width:40%;
    aspect-ratio: 7/7;
    position:absolute;
    z-index:2;
    right:0%;
    bottom:5%;
}

@media only screen and (max-width: 950px) 
{
    .bottomMenuOuter
    {
        display:flex;
    }

    .pageTopContentsOuter
    {
        display:flex;
    }

    .homepageContentsOuter
    {
        display:flex;
    }

    .dashboardLeftSidebar
    {
        display:none;
    }

    .dashboardInner
    {
        padding:0px;
    }

    .dashboardContents
    {
        padding:0px;
        gap:0px;
        height:100vh;
    }

    .container
    {
        padding:0px;
    }

    .pageTopLineOuter
    {
        display:none;
    }

    .dashboadContentsCenter
    {
        padding:15px;
    }

    .pageBottomLineOuter
    {
        display:none;
    }

    .dashboardRightContentsOuter
    {
        display:none;
    }
}

/* Homepage */

/* Culture */

.pageNotificationOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:var(--mainColorTransparent);
    padding:14px;
    border-radius:4px;
}

.pageNotificationOuter h1
{
    width:100%;
    font-size:18px;
    font-weight:500;
    color:var(--mainColor);
    margin:0px;
    margin-bottom:5px;
}

.pageNotificationOuter p
{
    width:100%;
    font-size:14px;
    font-weight:400;
    color:#333;
    margin:0px;
}

.dropdownListTitleOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:var(--mainColor);
    margin-top:15px;
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding-bottom:16px;
    border-radius:10px 10px 0px 0px;
    cursor:pointer;
}

.dropdownListTitleOuter p
{
    flex:1;
    font-size:15px;
    color:#fff;
    margin:0px;
}

.dropdownListTitleOuter span
{
    min-width:10px;
    height:21px;
    background-color:#fff;
    font-size:13px;
    font-weight:500;
    color:var(--mainColor);
    margin:0px;
    padding:0px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.dropdownListTitleIcon
{
    width:21px;
    height:21px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:17px;
}

.dropdownListTitleStatusBar
{
    width:100%;
    height:6px;
    background-color:#dadada;
    float:left;
}

.dropdownListTitleStatusBarInner
{
    width:0%;
    height:6px;
    background-color:rgb(0, 212, 0);
    transition: 0.4s ease all;
}

.dropdownListContentsOuter
{
    width:100%;
    min-height:10px;
    float:left;
    border-radius:0px 0px 10px 10px;
    padding:14px;
    border:1px solid var(--mainColorTransparent);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap:10px;
    border-top:0px;
}

.dropdownListContentsOuter h1
{
    width:100%;
    font-size:17px;
    margin:0px;
    margin-bottom:5px;
    color:#333;
}

.dropdownListContentsLine
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:10px;
}

.dropdownListContentsLineCheck
{
    width:20px;
    height:20px;
    float:left;
    border:1px solid var(--mainColorTransparent);
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    padding-left:1px;
    padding-top:2px;
    cursor:pointer;
    position:relative;
}

.dropdownListContentsLineCheck input
{
    display:none;
}

.dropdownListContentsLineCheck i
{
    display:none;
    position:relative;
    z-index:3;
    color:#fff;
}

.dropdownListContentsLineCheckBg
{
    width:calc(100% + 2px);
    height:calc(100% + 2px);
    position:absolute;
    z-index:1;
    background-color:rgb(0, 212, 0);
    top:-1px;
    left:-1px;
    display:none;
    border-radius:4px;
}

.dropdownListContentsLineCheck input:checked ~ i
{
    display: block;
}

.dropdownListContentsLineCheck input:checked ~ i ~ .dropdownListContentsLineCheckBg
{
    display: block;
}

.dropdownListContentsLineText
{
    flex:1;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap:10px;
}

.dropdownListContentsLineText p
{
    width:100%;
    float:left;
    margin:0px;
    font-size:15px;
    font-weight:500;
    color:#333;
}

.dropdownListContentsLineText span
{
    width:100%;
    float:left;
    margin:0px;
    font-size:13px;
    font-weight:400;
    color:#333333d5;
    text-decoration: underline;
    cursor:pointer;
}

.dropdownListContentsLineTextInput
{
    width:100%;
    min-height:10px;
    float:left;
}

.dropdownListContentsLineTextInput textarea
{
    width:100%;
    height:80px;
    float:left;
    resize: none;
    border-radius:4px;
    font-size:13px;
    padding:7px 10px;
    color:#333;
}

.takeNoteBtn
{
    width: 100%;
    min-height: 10px;
    float: left;
    background-color: var(--mainColor);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 7px;
    border-radius: 4px;
    margin-top: 7px;
    cursor:pointer;
}

.dropdownListContentsLineText img
{
    width:30px;
    height:30px;
    height:30px;
    float:right;
    margin:-4px 0px;
    object-fit: cover;
    object-position: center;
    border-radius:5px;
}

/* Culture */

/* Error Page */

.errorPageOuter
{
    width:100%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    border:1px solid var(--mainColorTransparent);
    padding:30px;
    gap:30px;
}

.errorPageOuter img
{
    width:40%;
    margin-top:60px;
    margin-bottom:-30px;
}

.errorPageContentsOuter
{
    flex:1;
    min-height:10px;
    float:left;
}

.errorPageContentsOuter h1
{
    font-size:35px;
    font-weight:600;
    color:var(--mainColor);
    margin-bottom:20px;
}

.errorPageContentsOuter p
{
    font-size:15px;
    font-weight:400;
    color:#333;
    margin-bottom:40px;
}

.errorPageContentsBtn
{
    min-width:10px;
    float:left;
    padding:10px 15px;
    background-color:var(--mainColor);
    font-size:15px;
    font-weight:500;
    color:#fff;
    border-radius:4px;
    cursor:pointer;
}

@media only screen and (max-width: 950px) 
{
    .errorPageOuter
    {
        flex-direction: column;
    }

    .errorPageOuter img
    {
        width:75%;
        margin-top:0px;
    }

    .errorPageContentsOuter h1
    {
        text-align:center;
    }

    .errorPageContentsOuter p
    {
        text-align:center;
    }

    .errorPageContentsOuter .errorPageContentsBtn
    {
        width:100%;
        text-align:center;
    }
}

/* Error Page */

/* Preloader */

.preloaderOuter
{
    width:100%;
    height:100vh;
    background-color:rgba(0,0,0,0.5);
    position:fixed;
    left:0px;
    top:0px;
    z-index:9;
    display:flex;
    align-items:center;
    justify-content:center;
}

.spinner 
{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(#0000 10%,var(--mainColor));
    --webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
    animation: spinner 1s infinite linear;
}

@keyframes spinner 
{
    to 
    {
        transform: rotate(1turn);
    }
}

/* Preloader */

/* Language */

.customTableOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:orange;
    margin-top:20px;
}    

.customTableTitleOuter
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:var(--mainColor);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px;
}

.customTableTitleOuter i
{
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:17px;
    float:left;
}

.customTableTitleOuter p
{
    flex:1;
    font-size:15px;
    color:#fff;
    float:left;
    margin:0px;
    margin-top:-1px;
}

.customTableContentsOuter
{
    width:100%;
    min-height:10px;
    padding:0px 15px;
    float:left;
    background-color:#f5f5f5;
    border:1px solid #dadada;
    border-top:0px;
}

.customTableContentsLine
{
    width:100%;
    min-height:10px;
    float:left;
    border-bottom:1px solid #dadada;
    padding:15px 0px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.customTableContentsLine:last-child
{
    border:0px;
}

.customTableContentsLine i
{
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#333;
    font-size:17px;
    float:left;
}

.customTableContentsLine p
{
    flex:1;
    font-size:15px;
    color:#333;
    float:left;
    margin:0px;
    margin-top:-1px;
}

/* Language */

/* Word List */

.wordListSliderOuter
{
    width: 100%;
    overflow: hidden;
    float:left;
}

.wordListBarOuter
{
    width:100%;
    height:7px;
    float:left;
    background-color:#f5f5f5;
    border-radius:2px;
}    

.wordListBarInner
{
    height:7px;
    background-color:#08b967;
    float:left;
    border-radius:2px;
}

.wordListBarBottomText
{
    width:100%;
    min-height:10px;
    float:left;
    text-align:right;
    color:#a8a8a8;
    font-size:12px;
    font-weight:400;
    margin-top:5px;
    margin-bottom:-15px;
}

.wordListContentsOuter
{
    width:100%;
    min-height:10px;
    float:left;
    margin-bottom:15px;
    padding:65px 25px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    border:1px solid #dadada;
}

.wordListArrowLeft
{
    width:25px;
    height:30px;
    float:left;
    position:absolute;
    left:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    padding-top:1px;
    color:#333;
    cursor:pointer;
}

.wordListArrowRight
{
    width:25px;
    height:30px;
    float:left;
    position:absolute;
    right:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    padding-top:1px;
    color:#333;
    cursor:pointer;
}

.wordListBottomCheckOuter
{
    min-width:10px;
    height:20px;
    position:absolute;
    right:15px;
    bottom:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    color:#333;
    gap:10px;
    cursor:pointer;
}

.wordListBottomCheckOuter input
{
    display:none;
}

.wordListBottomCheckOuter input[type=checkbox]:checked ~ .wordListBottomCheckSquare
{
    background-color:#08b967;
}

.wordListBottomCheckSquare
{
    width:20px;
    height:20px;
    border:1px solid #dadada;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.wordListCenterCardOuter
{
    width:60%;
    min-height:10px;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
}

.wordListCenterCardImageOuter
{
    width:35%;
    aspect-ratio:1;
    background-color:#f5f5f5;
    float:left;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.wordListCenterCardImageOuter img
{
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    object-fit:contain;
    object-position:center;
    float:left;
}

.wordListCenterCardOuter h4
{
    width:100%;
    float:left;
    font-size:15px;
    font-weight:400;
    color:#33333385;
    text-align:center;
    margin:0px;
}

.wordListCenterCardOuter h3
{
    width:100%;
    float:left;
    font-size:19px;
    font-weight:500;
    color:#333;
    text-align:center;
    margin:0px;
}

.customTableBadge
{
    min-width:10px;
    padding:5px 10px;
    float:left;
    background-color:#f5f5f5;
    border-radius:4px;
    color:#333;
    padding-top:3px;
}

.badgeGreen
{
    background-color:#08b967;
    color:#fff;
}

.badgeRed
{
    background-color:#ff0000;
    color:#fff;
}

.badgeOrange
{
    background-color:#ff9100;
    color:#fff;
}

.customUserListOuter
{
    width:100%;
    min-height:10px;
    float:left;
    padding:15px;
    border-radius:4px;
    border:1px solid #dadada;
}

.customTableImageLabel
{
    width:50px;
    height:50px;
    cursor:pointer;
    position:relative;
}

.customTableImageLabel img
{
    width:50px;
    height:50px;
    object-fit: cover;
    object-position: center;
}

.customTableImageLabel input
{
    display:none;
}

@media only screen and (max-width: 950px) 
{
    .wordListContentsOuter
    {
        height: calc(100vh - 360px);
    }

    .wordListCenterCardImageOuter 
    {
        width:70%;
    }

    .customUserListOuter
    {
        overflow:auto;
    }

    .customUserListOuter table
    {
        width:1000px;
        max-width:1000px;
    }
}

/* Word List */

/* Teacher Mobile Buttons */

.customTeacherMobileBtn
{
    width:100%;
    min-height:10px;
    float:left;
    background-color:var(--mainColor);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:500;
    text-align:center;
    border-radius:4px;
    margin-bottom:15px;
    padding:10px;
    color:#fff!important;
    text-decoration:none;
    display:none;
}

@media only screen and (max-width: 950px) 
{
    .customTeacherMobileBtn
    {
        display:flex;
    }
}

/* Teacher Mobile Buttons */