body {
    user-select: none;
}

#container-start {
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translate(-50%);
    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba(236, 171, 220, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    padding: 5px;
    overflow-y: auto;
    background-color: ghostwhite;
    width: 95vw;
    /* height: 600px; */
}

#phone-landscape {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80vh;
    font-weight: bold;
}



#container-selectLessons {
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translate(-50%);
    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba(236, 171, 220, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    padding: 5px;
    overflow-y: auto;
    background-color: ghostwhite;
    width: 95vw;
    display: none;
    max-height: 75vh;
}

#start-selectLesson {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
}

#lesson-area {
    display: flex;
    margin-left: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cls_lessonChkBox,
.cls_lessonChkstorage {
    scale: 1.8;
    margin-right: 10px;
}

.cls-lesson-label {
    margin-right: 15px;
    font-size: 18px;
}

#lesson-nav,
#pos-nav {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    margin-top: 20px;
}

#container-pos {
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translate(-50%);
    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba(236, 171, 220, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    padding: 5px;
    overflow-y: auto;
    background-color: ghostwhite;
    width: 95vw;
    display: none;
}


#practice-area {
    display: none;
}

#start-container {
    display: flex;
    flex-direction: column;
    /* background-color: yellow; */
    width: 90%;
    margin: 0 auto;
}

#start-title {
    text-align: center;
    font-size: 23px;
    color: dodgerblue;
    font-weight: bold;
    margin-bottom: 20px;
}

#start-description {
    font-size: 18px;
    text-indent: 20px;
}

#start-selection {
    text-align: center;
}

#start-nav {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

/* ************************************* [ Nouns] ********************************** */
#container-noun {
    position: absolute;
    left: 50%;
    top: 125px;
    transform: translate(-50%);
    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba(236, 171, 220, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    padding: 5px;
    overflow-y: auto;
    background-color: #dcf8e5;
    max-height: 80vh;
    width: 95vw;
    max-height: 600px;
    display: none;
}

#noun-declension-area {
    display: none;
}

#noun-title {
    font-size: 22px;
    text-align: center;
    font-family: artifika;
    color: darkgreen;
    margin-bottom: 5px;
}


#noun-subtitle {
    font-size: 15px;
    text-align: center;
    color: darkgreen;
}

.clsRank {
    text-align: left;
    width: 50px;
    font-size: 20px;
    margin-left: 5px;
    margin-right: 17px;
    border-style: solid;
    /* outline-style: solid;
    outline-width: thin; */
}

#noun-rank-selection {
    display: flex;
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-around;
}

.bigCheckbox {
    transform: scale(1.5);
}

.tblGender {
    padding-top: 15px;
    background-color: red;
}

.foreign-word {
    font-weight: bold;
    font-size: 21px;
    /* color: darkgreen; */
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.foreign-word:hover {
    text-decoration: none;
    /* color: darkgreen; */
}

#animacy-area {
    display: flex;
    flex-direction: column;
    margin-top: 3px;
    ;
}

#animacy-selection {
    text-align: center;
    margin-bottom: 5px;
    ;
}

#myAnimates {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}

#myAnimates label {
    padding-left: 5px;
}

#noun-practice-type-selection {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#practice-area {
    display: none;
}

#case-selection {
    text-align: center;
}

.clsTd {
    font-weight: bold;
}

#listNav {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}


/* ***************************************** [ Adjectives] ******************************************** */

#container-adjective {
    position: absolute;
    left: 50%;
    top: 125px;
    transform: translate(-50%);
    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba(236, 171, 220, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    padding: 5px;
    overflow-y: auto;
    background-color: lightyellow;
    max-height: 80vh;
    width: 95vw;
    max-height: 600px;
    display: none;
}

#adjective-declension-area {
    display: none;
}

#adjective-title {
    font-size: 22px;
    text-align: center;
    font-family: artifika;
    color: SaddleBrown;
    margin-bottom: 5px;
}


#adjective-subtitle {
    font-size: 15px;
    text-align: center;
    color: SaddleBrown;
}

#adjective-rank-selection {
    display: flex;
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-around;
}

#adjective-practice-type-selection {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#adjective-gender-selection,
#adjective-case-selection {
    text-align: center;
    font-size: 18px;
    color: SaddleBrown;
    margin-bottom: 10px;
    font-weight: bold;
}

#adjective-genders {
    display: flex;
    justify-content: space-around;
}


/* ***************************************** [ Verbs ] ******************************************** */

#container-verb {
    position: absolute;
    left: 50%;
    top: 125px;
    transform: translate(-50%);
    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba(236, 171, 220, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    padding: 5px;
    overflow-y: auto;
    background-color: lavender;
    width: 95vw;
    display: none;
}

#verb-conjugation-area-1,
#verb-conjugation-area-2 {
    display: none;
}

#verb-title {
    font-size: 22px;
    text-align: center;
    font-family: artifika;
    color: indigo;
    margin-bottom: 5px;
}

#verb-subtitle {
    font-size: 15px;
    text-align: center;
    color: indigo;
}

#verb-rank-selection {
    display: flex;
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-around;
}

#verb-practice-type-selection {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#aspectSelection {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#tense-selection {
    color: indigo;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

#pronoun-selection,
#pastTense-selection,
#imperativeTense-selection {
    margin-left: 32px;
}

.color-style-verb {
    color: indigo;
}

/* ---------------------------- [ modal for viewing data list] ---------------------------------------- */
/* Modal for displaying inflections */
#list-modal {
    display: none;
}

#list-modal-content {
    display: flex;
    flex-direction: column;
    width: 360px;
    /* width: 300px;
    height: 300px; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 600px;
    /* width: 95vw; */
    /* max-width: 700px; */
    overflow-x: auto;
}

#list-modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: brown;
    color: white;
    border-radius: 15px 15px 0 0;
    height: 50px;
    padding-bottom: 10px;
}

#list-modal-title {
    font-family: artifika;
    padding: 20px;
    font-size: 20px;
}

#list-modal-close {
    padding-right: 10px;
}

#list-modal-close button {
    width: 35px;
    height: 35px;
    border-color: gray;
    background-image: -webkit-linear-gradient(top, WhiteSmoke, #b4b3b3);
    background-image: -moz-linear-gradient(top, WhiteSmoke, #b4b3b3);
    background-image: -ms-linear-gradient(top, WhiteSmoke, #b4b3b3);
    background-image: -o-linear-gradient(top, WhiteSmoke, #b4b3b3);
    background-image: linear-gradient(to bottom, WhiteSmoke, #b4b3b3);
    background-color: dodgerblue;
    border-radius: 10px;
    color: white;
    font-size: 20px;
}

#list-modal-close button:hover {
    /* background: brown; */
    text-decoration: none;
    color: dodgerblue;
}

#list-modal-close {
    font-size: 30px;
}

#list-modal-body {
    background-color: white;
    padding: 10px;
    max-height: 600px;
    overflow-y: auto;
}

#list-modal-footer {
    background-color: brown;
    color: white;
    border-radius: 0 0 15px 15px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

}

#list-modal-footer button {
    margin-right: 10px;
}


@media only screen and (min-device-width : 650px) and (max-device-width : 1024px) and (orientation : portrait) {
    #container-start {
        width: 450px;
    }

    #container-verb {
        width: 450px;
    }

    #container-adjective {
        width: 450px;
    }

    #container-noun {
        width: 450px;
    }
}

@media screen and (min-device-width: 760px) and (orientation:landscape) {
    #container-start {
        width: 450px;
    }

    #container-verb {
        width: 450px;
    }

    #container-adjective {
        width: 450px;
    }

    #container-noun {
        width: 450px;
    }
}

@media screen and (min-device-width: 1200px) {
    #container-start {
        width: 450px;
    }

    #container-verb {
        width: 450px;
    }

    #container-adjective {
        width: 450px;
    }

    #container-noun {
        width: 450px;
    }

    #container-selectLessons,
    #container-pos {
        width: 600px;
    }
}