/* ********************************* */
/*      TAG FORMAT STARTS HERE       */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

html {
    font-size: 16px;
}

body {
    font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, .87);
    background-color: #fff
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    width: 1.5rem;
    height: 1.5rem;
}

p {
    font-size: 50px;
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*       TAG FORMAT ENDS HERE        */
/* ********************************* */


/* ********************************* */
/*   LOADING ANIMATION STARTS HERE   */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */
.loading-page {
    background: #d8e698;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003;
}

#pre-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    ;
}

#pre-loader .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    z-index: 1002;
    background: #2d5434;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    ;
}

#pre-loader .loader-section.section-left {
    left: 0;
}

#pre-loader .loader-section.section-right {
    right: 0;
}

#loader-logo {
    display: block;
    position: fixed;
    inset: 0px;
    width: 12rem;
    height: 5rem;
    max-width: 100vw;
    max-height: 100dvh;
    margin: auto;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("./sakura.svg");
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    z-index: 1004;
    ;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loaded #pre-loader .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #pre-loader .loader-section.section-right {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    ;
}

.loaded #loader-logo {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    ;
}

.loaded #pre-loader {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 0.3s 1s ease-out;
    transition: all 0.3s 1s ease-out;
    ;
}

.no-js #pre-loader {
    display: none;
    ;
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*    LOADING ANIMATION ENDS HERE    */
/* ********************************* */


/* ********************************* */
/*   BODY LEVEL CLASSES START HERE   */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

.nav-with-toolbar {
    padding-top: 56px
}

@media (min-width:600px) {
    .nav-with-toolbar {
        padding-top: 64px
    }
}

@media (orientation:landscape) and (max-width:959px) {
    .nav-with-toolbar {
        padding-top: 48px
    }
}
.nav-with-toolbar.mdui-appbar-with-tab {
    padding-top: 104px
}

@media (min-width:600px) {
    .nav-with-toolbar.mdui-appbar-with-tab {
        padding-top: 112px
    }
}

@media (orientation:landscape) and (max-width:959px) {
    .nav-with-toolbar.mdui-appbar-with-tab {
        padding-top: 96px
    }
}

.nav-with-toolbar.mdui-appbar-with-tab-larger {
    padding-top: 128px
}

@media (min-width:600px) {
    .nav-with-toolbar.mdui-appbar-with-tab-larger {
        padding-top: 136px
    }
}

@media (orientation:landscape) and (max-width:959px) {
    .nav-with-toolbar.mdui-appbar-with-tab-larger {
        padding-top: 120px
    }
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*    BODY LEVEL CLASSES END HERE    */
/* ********************************* */


/* ********************************* */
/* NAVIGATION BAR FORMAT STARTS HERE */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */
nav {
    display: block;
}

.nav-bar {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(117, 150, 250, 0.7);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 5px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.nav-bar>* {
    margin: 0 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-bar>a {
    color: #fff;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-width:600px) {
    .nav-bar {
        height: 70px;
        line-height: 70px;
    }
}

@media (max-width:959px) {
    .nav-bar {
        width: 100%;
        height: 50px;
        line-height: 50px;
    }
}

/* Text in the navigation bar */
.nav-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Menu button to the side menu in the navigation bar */
.nav-icon,
.nav-icon:before {
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    vertical-align: middle;
}

.nav-icon {
    display: inline-block;
    text-align: center;
}

.nav-icon:before {
    display: block !important;
    width: 24px;
    height: 24px;
}

.nav-icon svg{
    fill: #fff;
    opacity: 1;
}

/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*  NAVIGATION BAR FORMAT ENDS HERE  */
/* ********************************* */


/* ********************************* */
/*    TOOLBAR FORMAT STARTS HERE     */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

.toolbar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: calc(100% - 50px);
    max-width: 300px;
    box-sizing: border-box;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    will-change: transform;
    transition: all .3s cubic-bezier(0, 0, .2, 1);
}

@media (max-width:1023px) {
    .toolbar {
        top: 50px;
    }
    .toolbar:not(.toolbar-open) {
        box-shadow: none !important;
    }
}

@media (min-width:600px) {
    .toolbar {
        width: calc(100% - 70px);
        max-width: 320px;
    }
}

@media (min-width:1024px) {
    .toolbar {
        width: 240px;
        max-width: none;
    }

    .toolbar.toolbar-close {
        box-shadow: none !important;
    }
}

.toolbar-right {
    right: 0;
    left: auto;
}

@media (max-width:1023px) {
    .toolbar {
        background-color: #fff;
        box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
        transform: translateX(-330px);
    }

    .toolbar-right {
        transform: translateX(330px);
    }
}

/* Adjust the transformation of side toolbar upon open/close */
@media (max-width:599px) {
    .toolbar {
        transform: translateX(-300px);
    }

    .toolbar-right {
        transform: translateX(300px);
    }
}

/* Adjust the transformation of side toolbar upon open/close */
.toolbar-close {
    transform: translateX(-300px);
}

.toolbar-close.toolbar-right {
    transform: translateX(300px);
}

/* Adjust the transformation of side toolbar upon open/close */
@media (min-width:600px) {
    .toolbar-close {
        transform: translateX(-330px);
    }

    .toolbar-close.toolbar-right {
        transform: translateX(330px);
    }
}

/* Adjust the transformation of side toolbar upon open/close */
@media (min-width:1024px) {
    .toolbar-close {
        transform: translateX(-250px);
    }

    .toolbar-close.toolbar-right {
        transform: translateX(250px);
    }
}

.toolbar-open {
    transform: translateX(0) !important;
}

@media (min-width:1024px) {
    .toolbar-body-left {
        padding-left: 240px;
    }

    .toolbar-body-right {
        padding-right: 240px;
    }

    .nav-with-toolbar .toolbar {
        top: 64px;
    }
}

.toolbar-collapse-item-header.toolbar-collapse-item-arrow,
.toolbar-collapse-item-header .toolbar-collapse-item-arrow {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    transform: rotate(0);
    will-change: transform;
}

.toolbar-collapse-item-body {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    will-change: height;
}

.toolbar-collapse-item-body .mdui-list-item {
    padding-left: 72px;
}

.toolbar-collapse-item-open>.toolbar-collapse-item-header.toolbar-collapse-item-arrow,
.toolbar-collapse-item-open>.toolbar-collapse-item-header .toolbar-collapse-item-arrow {
    transform: rotate(180deg);
}

.toolbar-collapse-item-open>.toolbar-collapse-item-body {
    height: auto;
}

.toolbar-list {
    padding: 8px 0;
    margin: 0;
    list-style: none;
    background-color: transparent;
}

.toolbar-list .toolbar-list {
    padding: 0;
}

.toolbar-list a {
    color: inherit;
    text-decoration: none;
}

.toolbar-list span {
    color: inherit;
    text-decoration: none;
}

.toolbar-list .mdui-subheader,
.toolbar-list .mdui-subheader-inset {
    margin-top: 8px;
}

.toolbar-list .mdui-subheader-inset:before,
.toolbar-list .mdui-subheader:before {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    height: 1px;
    content: " ";
    background-color: rgba(0, 0, 0, .12);
}

.toolbar-list .mdui-subheader-inset:first-child,
.toolbar-list .mdui-subheader:first-child {
    margin-top: -8px;
}

.toolbar-list .mdui-subheader-inset:first-child:before,
.toolbar-list .mdui-subheader:first-child:before {
    background-color: transparent;
}

.toolbar-list .mdui-subheader-inset:before {
    left: 72px;
}

.toolbar-list-item {
    display: -ms-flexbox;
    display: flex;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
    -ms-flex-align: center;
    align-items: center;
}

.toolbar-list-item:hover {
    background-color: rgba(0, 0, 0, .08);
}

.toolbar-list-item:after {
    height: 48px;
    visibility: hidden;
    content: " ";
}

/* side toolbar icon format starts */
.toolbar-list-item-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
}

.toolbar-list-item-icon svg {
    opacity: 0.5;
}
/* side toolbar icon format ends */

.toolbar-list-item-avatar {
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 40px;
    text-align: center;

    border-radius: 50%;
}

.toolbar-list-item-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.toolbar-list-item-content {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.toolbar-list-item-text {
    font-size: 14px;
    color: rgba(0, 0, 0, .54);
}

.toolbar-list-item-active {
    font-weight: 700;
    background-color: rgba(0, 0, 0, .08);
}

.toolbar-list-item-active .toolbar-list-item-content {
    font-weight: 700;
}

.toolbar-list-item-active .toolbar-list-item-text {
    font-weight: 400;
}

.mdui-list-item-one-line {
    height: 20px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdui-list-item-two-line {
    height: 40px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdui-list-item-three-line {
    height: 60px;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-list-item-icon~.toolbar-list-item-content {
    margin-left: 32px;
}

.mdui-checkbox~.toolbar-list-item-content,
.mdui-radio~.toolbar-list-item-content,
.mdui-switch~.toolbar-list-item-content {
    margin-left: 20px;
}

.toolbar-icon {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

.toolbar-icon:before {
    display: block !important;
    width: 24px;
    height: 24px
}

.toolbar-spacer {
    margin: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*     TOOLBAR FORMAT ENDS HERE      */
/* ********************************* */


/* ********************************* */
/*   STATISTICS WINDOW STARTS HERE   */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

/* Style for dialog overlay (hidden by default) */
.dialog-overlay {
    display: none; /* Hidden initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Transparent black background */
    justify-content: center;
    align-items: center;
}
  
  /* Dialog content box */
.dialog-content {
    background: white;
    border-radius: 8px;
    width: 50vh;
    height: auto;
    text-align: center;
    position: relative;
    padding: 20vh 0;
    padding: calc(20vh - 50px) 0;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dialog-content .stats {
    font-size: 22px;
}
@media (max-width:600px) {
    .dialog-content {
        width: 50vw;
        height: auto;
        text-align: center;
        position: relative;
        padding: calc(20vh - 50px) 0;
        -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
        transform: translateY(40px);
    }
    .dialog-content .stats {
        font-size: 20px;
    }
}

/* Close button style */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*    STATISTICS WINDOW ENDS HERE    */
/* ********************************* */


/* ********************************* */
/* BUTTON CLICKING EFFECT STARTS HERE */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

.button-click {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.button-click-wave {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 0;
    margin: 0;
    font-size: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 50%;
    transition-duration: 1.4s;
    transform: translateZ(0) scale(0)
}

/* .button-click-white should not have been used anywhere */
.button-click .button-click-wave,
.button-click-white .button-click-wave,
.button-click-black .button-click-wave {
    background-color: rgba(0, 0, 0, .1);
}

.button-click-wave-fill {
    opacity: .35;
    transition-duration: .3s
}

.button-click-wave-out {
    opacity: 0;
    transition-duration: .6s
}

.mdui-theme-layout-dark .button-click-wave {
    background-color: hsla(0, 0%, 100%, .3)
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/* BUTTON CLICKING EFFECT ENDS HERE  */
/* ********************************* */


/* ********************************* */
/*     BUTTON FORMAT STARTS HERE     */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

button {
    position: relative;
    display: inline-block;
    min-width: 88px;
    height: 36px;
    box-sizing: border-box;
    box-shadow: 0 0 10px -1px rgba(0, 0, 0, .2), 0 0 10px -0.5px rgba(0, 0, 0, .14), 0 0 5px 0px rgba(0, 0, 0, .12);
    padding: 0 16px;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    color: inherit;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    zoom: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: 0 0;
    border: none;
    border-radius: 2px;
    outline: 0;
    transition: all .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, 1, 1);
    will-change: box-shadow;
    -webkit-user-drag: none;
}

button:hover {
    color: #fff;
    filter: brightness(90%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2), 0 0 2px 0 rgba(0, 0, 0, .14), 0 0 5px 0 rgba(0, 0, 0, .12);
    transition: all .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, 1, 1);
}

.button-raised {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.button-raised:hover {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
}

.button-raised:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*      BUTTON FORMAT ENDS HERE      */
/* ********************************* */


/* ****************************************************************** */
/*                        FOR QUIZ INDEX ONLY                         */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

/* ********************************* */
/*        FOR QUIZ INDEX ONLY        */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

#test-page>.title {
    text-align: center;
    margin: 2.5rem 0;
}

.selection-container,
.selection-container-fluid {
    width: 96%;
    max-width: 1280px;
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
    margin-right: auto;
    margin-left: auto;
}

.selection-container-fluid:after,
.selection-container:after {
    display: table;
    clear: both;
    content: ""
}

.selection-container {
    width: 96%;
    max-width: 1280px
}

@media (min-width:600px) {
    .selection-container {
        width: 94%
    }
}

@media (min-width:1024px) {
    .selection-container {
        width: 92%
    }
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*        FOR QUIZ INDEX ONLY        */
/* ********************************* */


/* ********************************* */
/*      HEADER TEXT STARTS HERE      */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */
.selection-title {
    font-size: 24px;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
}

.selection-title-opacity {
    font-size: 24px;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    opacity: .87;
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*       HEADER TEXT ENDS HERE       */
/* ********************************* */


.selection-panel {
    width: 100%;
    box-sizing: border-box;
}

.selection-panel-item {
    color: rgba(0, 0, 0, .87);
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    transition: margin .3s cubic-bezier(.4, 0, .2, 1);
    will-change: margin;
}

.selection-panel-item:last-child {
    border-bottom: none;
}

.selection-panel-item-header {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 24px;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    -ms-flex-align: center;
    align-items: center;
    will-change: height, background-color;
}

.selection-panel-item-header:active {
    background-color: #eee
}

.selection-panel-item-title {
    width: 36%;
    min-width: 36%;
    font-weight: 500;
}

.selection-panel-item-summary,
.selection-panel-item-title {
    box-sizing: border-box;
    padding-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection-panel-item-summary {
    color: rgba(0, 0, 0, .54);
    -ms-flex-positive: 1;
    flex-grow: 1;
}

@media (max-width:599px) {
    .selection-panel-item-summary {
        display: none !important
    }
}

.selection-panel-item-arrow {
    position: absolute;
    top: 12px;
    right: 24px;
    color: rgba(0, 0, 0, .54);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    transform: rotate(0);
    will-change: transform, top;
}

.selection-panel-item-arrow svg {
    opacity: 0.5;
}

.selection-panel-item-summary+.selection-panel-item-arrow {
    position: relative;
    top: 0 !important;
    right: 0;
}

.selection-panel-item-body {
    height: 0;
    padding: 0 24px;
    overflow: hidden;
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
    will-change: height;
}

.selection-panel-item-body:after,
.selection-panel-item-body:before {
    display: table;
    content: " ";
}

.selection-panel-item-body:after {
    clear: both;
    height: 16px;
}

.selection-panel-item-actions {
    display: block;
    width: 100%;
    padding: 16px 24px 0;
    margin: 16px -24px 0;
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.selection-panel-item-actions .mdui-btn {
    margin-left: 8px;
}

.selection-panel-item-actions .mdui-btn:first-child {
    margin-left: 0;
}

.selection-panel-gapless {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.selection-panel-gapless .selection-panel-item {
    box-shadow: none;
}

.selection-panel-gapless .selection-panel-item-open {
    margin-top: 0;
    margin-bottom: 0;
}

.selection-panel-popout .selection-panel-item-open {
    margin-right: -16px;
    margin-left: -16px;
}

.selection-panel-item-open {
    height: auto;
    margin-top: 16px;
    margin-bottom: 16px;
}

.selection-panel-item-open>.selection-panel-item-header {
    height: 64px;
}

.selection-panel-item-open>.selection-panel-item-header .selection-panel-item-arrow {
    top: 20px;
    transform: rotate(180deg);
}

.selection-panel-item-open>.selection-panel-item-body {
    height: auto;
}

.selection-panel-spacer {
    margin: 0;
    -ms-flex-positive: 1;
    flex-grow: 1
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*                        FOR QUIZ INDEX ONLY                         */
/* ****************************************************************** */


/* ****************************************************************** */
/*                       FOR INORDER QUIZ ONLY                        */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

/* ********************************* */
/*       FOR INORDER QUIZ ONLY       */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

#inOrderHira-page,
#inOrderKata-page {
    padding-top: 2rem;
    padding-bottom: 1.875rem;
}

.test-container {
    width: 96%;
    max-width: 1280px;
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
    margin-right: auto;
    margin-left: auto;
}

.test-container:after {
    display: table;
    clear: both;
    content: "";
}

@media (min-width:600px) {
    .test-container {
        width: 94%;
    }
}

@media (min-width:1024px) {
    .test-container {
        width: 92%;
    }
}

#inOrderHira-page .row,
#inOrderKata-page .row {
    margin: 0 auto;
}

#inOrderHira-page .card-col,
#inOrderKata-page .card-col {
    padding: .625rem .3125rem;
    margin: 0 auto;
}

#inOrderHira-page>.title,
#inOrderKata-page>.title {
    margin-bottom: 1.25rem;
}

#inOrderHira-page .ttbox,
#inOrderKata-page .ttbox {
    width: 100%;
}

#inOrderHira-page .card,
#inOrderKata-page .card {
    box-sizing: border-box;
    box-shadow: 0 0 10px -1px rgba(0, 0, 0, .2), 0 0 10px -0.5px rgba(0, 0, 0, .14), 0 0 5px 0px rgba(0, 0, 0, .12);
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 10px;
    transition: all .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, 1, 1);
}

#inOrderHira-page .card:hover,
#inOrderKata-page .card:hover {
    filter: brightness(80%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2), 0 0 2px 0 rgba(0, 0, 0, .14), 0 0 5px 0 rgba(0, 0, 0, .12);
}

#inOrderHira-page .card.color-white,
#inOrderKata-page .card.color-white {
    background-color: #ffffff;
}

#inOrderHira-page .card.color-green,
#inOrderKata-page .card.color-green {
    /* Color name: nae */
    background-color: #A3D08B;
}

#inOrderHira-page .card.color-amber,
#inOrderKata-page .card.color-amber {
    /* Color name: yamabuki */
    background-color: #FFC65C;
}

#inOrderHira-page .card.color-red,
#inOrderKata-page .card.color-red {
    /* Color name: jinzamomi */
    background-color: #fe928a;
}

#inOrderHira-page .card.no-drop,
#inOrderKata-page .card.no-drop {
    pointer-events: none;
}

#inOrderHira-page .card span,
#inOrderKata-page .card span {
    line-height: 5rem;
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*       FOR INORDER QUIZ ONLY       */
/* ********************************* */


/* ********************************* */
/* CHARACTER CARD FORMAT STARTS HERE */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */
.card-display,
.card-display-opacity {
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 0;
}

.card-display-opacity {
    opacity: .54;
}

.card-display-valign {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.card-display-clearfix:after,
.card-display-clearfix:before {
    display: table;
    content: " ";
}

.card-display-clearfix:after {
    clear: both;
}
/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*  CHARACTER CARD FORMAT ENDS HERE  */
/* ********************************* */

/* ********************************* */
/* FUNCTIONAL CARD FORMAT STARTS HERE */
/* ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ */

/* card-row starts here */
.card-row,
[class*=card-row-] {
    margin-right: -8px;
    margin-left: -8px;
}

.card-row:after,
[class*=card-row-]:after {
    display: table;
    clear: both;
    content: "";
}

.card-row-xs .card-col {
    float: left;
    width: 25%;
}
@media (min-width:600px) {
    .card-row-sm .card-col {
        float: left;
        width: 25%;
    }
}
@media (min-width:1024px) {
    .card-row-md .card-col {
        float: left;
        width: 20%;
    }
}
@media (min-width:1440px) {
    .card-row-lg .card-col {
        float: left;
        width: 20%;
    }
}
/* card-row ends here */

/* card-col starts here */
.card-col,
[class*=card-col-xs-] {
    position: relative;
    min-height: 1px;
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
}
.card-col-xs {
    float: left;
    width: 100%;
}
/* card-col ends here */

/* card-grid-list starts here */
.card-grid-list {
    margin: 0 -2px;
}

.card-grid-list .mdui-col,
.card-grid-list [class*=card-col-xs-] {
    padding-right: 2px;
    padding-left: 2px;
}
/* card-grid-list ends here */

/* card-text starts here */
.card-text {
    display: block !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 26px;
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
}

/* card-text ends here */

/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/* FUNCTIONAL CARD FORMAT ENDS HERE*/
/* ********************************* */

/* ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆ */
/*                       FOR INORDER QUIZ ONLY                        */
/* ****************************************************************** */


.close-dialog {
    position: absolute;
    top: .25rem;
    left: .25rem;
}

#search-dialog {
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    max-width: none;
}

#search-dialog .mdui-textfield {
    position: absolute;
    left: 0;
    right: 0;
    top: 25%;
    width: 60%;
}

#drawer-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

#drawer-footer .mdui-typo {
    margin: 0 auto;
    padding: 0 0 1.25rem 1.875rem;
}

/* OLD MAIN TAG */
#home-page,
#mark-page {
    padding: .9375rem 0;
}

/* OLD MAIN TAG */
#home-page #showWord,
#mark-page #showWord {
    overflow: auto;
    padding: 2.1875rem;
}

/* OLD MAIN TAG */
#home-page #showWord>.card-row .card-row,
#mark-page #showWord>.card-row .card-row {
    display: flex;
    align-items: center;
}

/* OLD MAIN TAG */
#home-page #showWord .card-row,
#mark-page #showWord .card-row {
    font-size: 1rem;
}

/* OLD MAIN TAG */
#home-page #showWord .card-row .card-col-xs,
#mark-page #showWord .card-row .card-col-xs {
    box-sizing: border-box;
}

/* OLD MAIN TAG */
#home-page #showWord .card-row .card-col-xs .s:first-child,
#mark-page #showWord .card-row .card-col-xs .s:first-child {
    margin-bottom: .625rem;
}

/* OLD MAIN TAG */
#home-page #showWord .card-row .card-col-xs .s:first-child>div:nth-child(1),
#mark-page #showWord .card-row .card-col-xs .s:first-child>div:nth-child(1) {
    padding-right: .625rem;
}

/* OLD MAIN TAG */
#home-page #showWord .card-row .card-col-xs .s:first-child>div:nth-child(2),
#mark-page #showWord .card-row .card-col-xs .s:first-child>div:nth-child(2) {
    padding-left: .625rem;
}

/* OLD MAIN TAG */
#home-page #showWord .card-row .card-col-xs .s:nth-child(2),
#mark-page #showWord .card-row .card-col-xs .s:nth-child(2) {
    margin-top: .625rem;
}

/* OLD MAIN TAG */
#home-page #showWord .stroke-order img,
#mark-page #showWord .stroke-order img {
    margin-top: .3125rem;
    max-width: 100%;
    border: .0625rem solid rgba(0, 0, 0, .3);
    box-sizing: border-box;
    max-height: 5.625rem;
}

/* OLD MAIN TAG */
#home-page #showWord .other,
#home-page #showWord .skill,
#home-page #showWord .stroke-order,
#mark-page #showWord .other,
#mark-page #showWord .skill,
#mark-page #showWord .stroke-order {
    margin-bottom: .625rem;
}

/* OLD MAIN TAG */
#home-page #showWord .other button,
#home-page #showWord .skill button,
#home-page #showWord .stroke-order button,
#mark-page #showWord .other button,
#mark-page #showWord .skill button,
#mark-page #showWord .stroke-order button {
    margin-right: .3125rem;
}

/* OLD MAIN TAG */
#home-page #showWord .other span,
#home-page #showWord .skill span,
#home-page #showWord .stroke-order span,
#mark-page #showWord .other span,
#mark-page #showWord .skill span,
#mark-page #showWord .stroke-order span {
    display: block;
}

@media (max-width:760px) and (min-width:600px) {

    /* OLD MAIN TAG */
    #home-page #showWord .other button,
    /* OLD MAIN TAG */
    #mark-page #showWord .other button {
        display: block;
        margin-bottom: .3125rem;
    }
}

/* OLD MAIN TAG */
#home-page #showWord .text,
#mark-page #showWord .text {
    z-index: 1;
    font-family: Noto Sans Japanese;
    border: .125rem dashed #888;
    display: flex;
}

/* OLD MAIN TAG */
#home-page #showWord .text canvas#pad,
#home-page #showWord .text canvas#pad2,
#mark-page #showWord .text canvas#pad,
#mark-page #showWord .text canvas#pad2 {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - .75rem);
    height: 100%;
}

/* OLD MAIN TAG */
#home-page #showWord .text:after,
#mark-page #showWord .text:after {
    content: "";
    position: absolute;
    top: 50%;
    left: .125rem;
    width: calc(100% - .75rem);
    border-bottom: .125rem dashed #888;
}

/* OLD MAIN TAG */
#home-page #showWord .text:before,
#mark-page #showWord .text:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    border-right: .125rem dashed #888;
}

/* OLD MAIN TAG */
#home-page #showWord .text svg,
#mark-page #showWord .text svg {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* OLD MAIN TAG */
#home-page .word-card,
#mark-page .word-card {
    padding: .9375rem;
    font-size: 0;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-menu,
#mark-page .word-card .mdui-card-menu {
    z-index: 2;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-media,
#mark-page .word-card .mdui-card-media {
    display: flex;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-media .text,
#mark-page .word-card .mdui-card-media .text {
    z-index: 1;
    font-family: Noto Sans Japanese;
    border: .125rem dashed #888;
    display: flex;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-media .text:after,
#mark-page .word-card .mdui-card-media .text:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-bottom: .125rem dashed #888;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-media .text:before,
#mark-page .word-card .mdui-card-media .text:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    border-right: .125rem dashed #888;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-media .text svg,
#mark-page .word-card .mdui-card-media .text svg {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-actions.border,
#mark-page .word-card .mdui-card-actions.border {
    border-bottom: .125rem solid #03a9f4;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-actions.border2,
#mark-page .word-card .mdui-card-actions.border2 {
    border-bottom: .125rem solid #e040fb;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-actions .ac-l,
#mark-page .word-card .mdui-card-actions .ac-l {
    font-size: .875rem;
    text-align: center;
    box-sizing: border-box;
    padding: .4375rem 0;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-actions .r,
#mark-page .word-card .mdui-card-actions .r {
    position: absolute;
    display: flex;
    align-items: center;
    height: 3.75rem;
    right: 0;
}

/* OLD MAIN TAG */
#home-page .word-card .mdui-card-actions .r button,
#mark-page .word-card .mdui-card-actions .r button {
    margin: 0 auto;
}

/* OLD MAIN TAG */
#about-page {
    padding-top: 5rem;
    padding-bottom: 1.875rem;
}

/* OLD MAIN TAG */
#about-page .title {
    margin-bottom: 1.25rem;
}

/* OLD MAIN TAG */
#about-page img {
    border: .0625rem solid #e8e8e8;
}

/* OLD MAIN TAG */
#mark-page {
    padding-bottom: 1.875rem;
}

/* OLD MAIN TAG */
#mark-page .title {
    margin: 1.25rem 0;
}

/* OLD MAIN TAG */
#mark-page .word-card {
    padding: 0;
}

/* OLD MAIN TAG */
#pronunciation-page,
#syllabaryPronunciation-page {
    padding-top: 5rem;
    padding-bottom: 1.875rem;
}

/* OLD MAIN TAG */
#pronunciation-page>.title,
#syllabaryPronunciation-page>.title {
    margin-bottom: 1.25rem;
}

/* OLD MAIN TAG */
#pronunciation-page .ttbox,
#syllabaryPronunciation-page .ttbox {
    width: 100%;
}

/* OLD MAIN TAG */
#pronunciation-page .cr,
#syllabaryPronunciation-page .cr {
    border-radius: 50%;
    width: 12.5rem;
    height: 12.5rem;
    margin: 0 auto;
    margin-top: 3.125rem;
}

/* OLD MAIN TAG */
#pronunciation-page .cr svg,
#syllabaryPronunciation-page .cr svg {
    width: 80%;
    height: 80%;
}

/* OLD MAIN TAG */
#pronunciation-page .word .card,
#syllabaryPronunciation-page .word .card {
    line-height: 3.125rem;
    margin: .625rem;
}

/* OLD MAIN TAG */
#pronunciation-page .word .card.no-drop,
#syllabaryPronunciation-page .word .card.no-drop {
    pointer-events: none;
}

@media (max-width:350px) {

    /* OLD MAIN TAG */
    #home-page .word-card .mdui-card-actions .r button:nth-child(2) i,
    #mark-page .word-card .mdui-card-actions .r button:nth-child(2) i {
        font-size: .9375rem;
    }

    /* OLD MAIN TAG */
    #inOrderHira-page .title,
    #inOrderKata-page .title,
    #pronunciation-page .title,
    #syllabaryPronunciation-page .title {
        font-size: 1.125rem !important;
    }

    /* OLD MAIN TAG */
    #pronunciation-page .cr,
    #syllabaryPronunciation-page .cr {
        width: 9.375rem;
        height: 9.375rem;
    }

    /* OLD MAIN TAG */
    #pronunciation-page .word .tt,
    #syllabaryPronunciation-page .word .tt {
        margin-top: 0 !important;
    }
}

@media (max-width:599px) {
    .mdui-hidden-xs-invisible {
        visibility: hidden;
    }

    #login-dialog {
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none;
        max-width: none;
    }

    #search-dialog .mdui-textfield {
        width: 90%;
    }

    /* OLD MAIN TAG */
    #home-page #showWord,
    #mark-page #showWord {
        position: fixed !important;
        left: 0 !important;
        top: 0;
        width: 100% !important;
        height: 100%;
        max-height: none !important;
        padding-top: 3.4375rem !important;
    }

    /* OLD MAIN TAG */
    #home-page #showWord .t:first-child,
    #mark-page #showWord .t:first-child {
        padding-bottom: 1.875rem !important;
        margin-bottom: 2.5rem;
        border-bottom: .0625rem solid #919191;
    }

    /* OLD MAIN TAG */
    #home-page #showWord>.card-row .card-row,
    #mark-page #showWord>.card-row .card-row {
        display: block !important;
    }

    /* OLD MAIN TAG */
    #home-page #showWord div,
    #mark-page #showWord div {
        padding: 0 !important;
    }

    /* OLD MAIN TAG */
    #home-page #showWord .card-row .card-row::nth-child(1),
    #mark-page #showWord .card-row .mcard-row::nth-child(1) {
        border-bottom: .0625rem solid #888;
    }

    /* OLD MAIN TAG */
    #home-page>div>.card-col,
    #mark-page>div>.card-col {
        margin-bottom: .625rem;
    }

    /* OLD MAIN TAG */
    #home-page .word-card,
    #mark-page .word-card {
        padding: 0;
        border: .0625rem solid #b3b3b3;
    }

    /* OLD MAIN TAG */
    #home-page .word-card [mdui-dialog],
    #mark-page .word-card [mdui-dialog] {
        border-bottom: .0625rem solid #b3b3b3;
    }

    /* OLD MAIN TAG */
    #home-page .word-card [mdui-dialog] .text,
    #mark-page .word-card [mdui-dialog] .text {
        border: none !important;
    }

    /* OLD MAIN TAG */
    #home-page .word-card [mdui-dialog] .text:after,
    #home-page .word-card [mdui-dialog] .text:before,
    #mark-page .word-card [mdui-dialog] .text:after,
    #mark-page .word-card [mdui-dialog] .text:before {
        display: none;
    }

    /* OLD MAIN TAG */
    #home-page .word-card .mdui-card-actions,
    #mark-page .word-card .mdui-card-actions {
        border-bottom: none !important;
    }

    /* OLD MAIN TAG */
    #home-page .word-card .mdui-card-actions .ac-l,
    #mark-page .word-card .mdui-card-actions .ac-l {
        width: 50%;
        display: inline-block;
    }

    /* OLD MAIN TAG */
    #home-page .word-card .mdui-card-actions .r,
    #mark-page .word-card .mdui-card-actions .r {
        position: relative;
        display: block;
        height: auto;
    }

    /* OLD MAIN TAG */
    #home-page .word-card .mdui-card-actions .r button:nth-child(2),
    #mark-page .word-card .mdui-card-actions .r button:nth-child(2) {
        width: 100%;
        min-width: auto;
    }

    /* OLD MAIN TAG */
    #inOrderHira-page .title,
    #inOrderKata-page .title,
    #pronunciation-page .title,
    #syllabaryPronunciation-page .title {
        font-size: 1.5625rem;
    }

    /* OLD MAIN TAG */
    #pronunciation-page .word .tt,
    #syllabaryPronunciation-page .word .tt {
        width: 100%;
    }

    /* OLD MAIN TAG */
    #test-page .selection-panel-item-title {
        width: auto;
    }
}