.wrapper-class {
    width: 100%;
    padding: 60px 150px;
}
.main_bgImg {
    width: 100%;
    height: 100vh;
    background-image: url('../image/Group 53.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.main_title {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 44px;
    text-align: center;
    color: #021E3A;
    width: 100%;
    /* max-width:786px; */
}
.main_text {
    width: 100%;
    max-width: 1072px;
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #646464;
}
.button_box button {
    min-height: 60px;
    border-radius: 60px;
    border: none;
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.red-btn {
    background-color: #D32B2E;
}
.blue-btn {
    background-color: #005BB9;
}
/* first page */
.top-main_img {
    width: 100%;
    height: 360px;
}
.top-main_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.white-btn_box {
    width: 100%;
    max-width: 226px;
    height: 165px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.blue-btn_box {
    width: 100%;
    max-width: 226px;
    height: 155px;
    background: #005BB9;
    border-radius: 20px;
    position: relative;
}
.vocabulary-btn {
    width: 100%;
    height: 100%;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
}
.white-btn_box button.vocabulary-btn {
    color: #005BB9;
    background: #F1F4F6;
    border-radius: 50%;
    width: 165px;
    margin: auto;
}
.blue-btn_box button{
    color: #FFFFFF;
    background: #005BB9;
    border-radius: 20px;
}
.trash_btn {
    border: none;
    background: none;
    top: 10px;
    right: 3px;
}
/* modal */
.modalBody_main {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 10px;
}
.fist_pageModal.fade .vocab_modalDialog {
    max-width: 617px;
    height: 490px;
    top: 50%;
    transform: translateY(-50%);
    background: #FFFFFF;
    border: 1.05192px solid #D3D3D3;
    box-sizing: border-box;
    box-shadow: 0px 4.20769px 15.7788px rgba(96, 96, 96, 0.25);
    border-radius: 9px;
    width: 100%;
}
.vocab_modalHeader,
.vocab_modalBody,
.vocab_modalFooter {
    border: none;
}
.vocab_modalBtn {
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.vocab_modalBtn:focus {
    outline: none;
    box-shadow: none;
}
.vocab_modalContent {
    height: 100%;
}
.vocab_title {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
    color: #021E3A;
}
/* checkbox */

.vocab_label {
    position: relative;
    width:100%;
    /* max-width: 99px; */
    min-height: 35px;
    background: #F1F4F6;
    border: 1px solid #E5E7E9;
    box-sizing: border-box;
    border-radius: 5px;
    float: left;
}

.vocab_label div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    transition: .5s ease;
    font-family:'Montserrat',sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #021E3A;
    padding: 8px;
}

.vocab_label input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

input[type=checkbox]:checked ~ div {
    background-color: #005BB9;
    color: #fff;
    border-radius: 5px;
}
/* end */
.modalBody_footer {
    width: 100%;
    max-width: 71px;
    height: 71px;
    border-radius: 50%;
}
.modalBody_footer button {
    width: 100%;
    height: 100%;
    background: #FF5161;
    border: none;
    border-radius: 50%;
    box-shadow: 0px 3px #d32b2e;
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */

    letter-spacing: 0.04em;

    color: #FFFFFF;

}
.vocab_modalFooter button {
    border: none;
    background: none;
    color: #005BB9;
}
.btn-share {
    position: relative;
    line-height: 1;
    color: white;
    background: none;
    border: none;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    filter: drop-shadow(0 2px 8px rgba(254, 39, 39, 0.32));
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* end */

/* add list page */
.addlist-Img {
    width: 100%;
    height: 211px;
}
.addlist-Img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.addlist-bgImg {
    background-image: url('../image/Group 56.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    width: 100%;
    height: 100vh;
}
.addlins_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 60px 75px;
}
.vocab_list_container {
    max-width: 1450px;
}
.vocab-list_name {
    max-width: 550px;
}
.vocab-list_name_link {
    max-width: 150px;
}
.vocab-list_name_link a {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-decoration-line: underline;
    color: #FF5161;
}
.vocab-list_name .vocab-list_name_label {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #021E3A;
}
.vocab-list_name .filter  {
    width: 100%;
    max-width: 220px;
    height: 35px;
    background: #F1F4F6;
    box-shadow: 0px 4px 10px rgba(0, 17, 35, 0.08);
    border-radius: 5px;
    border: none;
}
.vocab-list_name .polygon_img {
    position: relative;
}
.vocab-list_name .polygon_select {
    position:absolute;
    right: 10px
}
.vocab-language_title {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #005BB9;
    text-align: center;
}
.input__box {
    position: relative;
}
.input__box  input {
    width: 100%;
    /* max-width: 240px; */
    height: 35px;
    background: #F1F4F6;
    border: 1px solid #E5E7E9;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 5px;
    margin-top: 15px;
}
.input__box button {
    border: none;
    background: none;
    position: absolute;
    right:0;
}
.vocab__box {
    width: 100%;
    max-width: 1300px;
}
.vocab_box-language {
    width: 100%;
    max-width: 240px;
}
.vocab_box-description {
    max-width: 750px;
}
.corol-btn {
    background:#FF5161;
}
.button_box button.border-btn {
    border: 1px solid #FF5161;
    color: #FF5161;
    background: #FFFFFF;;
}
.new-list_title {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #021E3A;
}
.list-search_box {
    width: 100%;
    height: 35px;
    border-radius: 5px;
    position: relative;
}
.list-search_box  input {
    width: 100%;
    max-width: 338px;
    height: 100%;
    background: #F1F4F6;
    border: none;
    border-radius: 5px;
    padding-left: 40px;
}
.list-search_box  img {
    position: absolute;
    top: 6px;
    left: 9px;
}
/*footer checkbox */

.word_label {
    position: relative;
    width:100%;
    max-width: 117px;
    height: 35px;
    box-sizing: border-box;
    border-radius: 5px;
    margin: 5px;
}

.word_label div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    transition: .5s ease;
    font-family:'Montserrat',sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #021E3A;
}

.word_label input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

input.word-input[type=checkbox]:checked ~ div {
    background-color: #F1F4F6;
    color: #005BB9;
    border-radius: 5px;
}
/* end */
/* pop up */
.vocab-mix_modal {
    width: 100%;
    max-width: 334px;
    height: 482px;
    background: #FFFFFF;
    border: 1px solid #D3D3D3;
    box-sizing: border-box;
    box-shadow: 0px 4px 15px rgba(96, 96, 96, 0.25);
    border-radius: 8px;
    left: 41%;
    top: 25%;
    overflow-y:hidden;
}
.vocab-mix_modalHeader,
.vocab-mix_modalContent,
.shareModal-content,
.shareModal-header {
    border: none;
}
.vocab-modal-input:checked {
    background-color: #FF5161;
    border-color: #FF5161;
}
.vocab-modal-input:focus {
    outline: none;
    box-shadow: none;
}
.scrollbar {
    float: left;
    height: 220px;
    width: 100%;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.force-overflow {
    min-height: 420px;
}

#wrapper {
    width: 100%;
    margin: auto;
}
#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #CDD7E1;
}
/* share modaal */
.shareModal {
    width: 100%;
    max-width: 334px;
    height: 263px;
    background: #FFFFFF;
    border: 1px solid #D3D3D3;
    box-sizing: border-box;
    box-shadow: 0px 4px 15px rgba(96, 96, 96, 0.25);
    border-radius: 8px;
    overflow-y: hidden;
    overflow-y: hidden;
    left: 50%;
    transform: translateX(-50%);
    top: 35%;
}
#myInputShare {
    width: 100%;
    max-width: 264px;
    height: 35px;
    background: #F1F4F6;
    border: 1px solid #E5E7E9;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    margin: auto;
    padding: 20px;
}
.success_popUp {
    width: 100%;
    max-width: 334px;
    min-height: 263px;
    background: #FFFFFF;
    border: 1px solid #D3D3D3;
    box-sizing: border-box;
    box-shadow: 0px 4px 15px rgba(96, 96, 96, 0.25);
    border-radius: 8px;
    padding: 15px;
}
.vocab_lis {
    width: 100%;
    max-width: 188px;
    height: 44px;
    background: #F1F4F6;
    border-radius: 15px;
    font-family:' Montserrat',sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #005BB9;

}
.success-text {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;
    color: #021E3A;
}
.error_popUp {
    width: 100%;
    max-width: 334px;
    min-height: 223px;
    background: #FFFFFF;
    border: 1px solid #D3D3D3;
    box-sizing: border-box;
    box-shadow: 0px 4px 15px rgba(96, 96, 96, 0.25);
    border-radius: 8px;
    padding: 15px;
}
/* user  selected*/
.user_selected_box_title {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-decoration-line: underline;
    color: #FF5161;
    text-align: left;
}

/* user scsrolbar */

.scrollbar_user {
    float: left;
    height: 300px;
    width: 100%;
    overflow-y: scroll;
    margin-bottom: 25px;
}

/* .force-overflow_user {
min-height: 450px;

} */
.user_checkbox {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 0.5fr;
}
#userWrapper {
    text-align: center;
    width:100%;
    margin: auto;
}
.user_form_check {
    width: 100%;
    text-align: left;
}
.user_form_check_input[type=checkbox] {
    width: 100%;
    max-width: 20px;
    height: 20px;
    border-radius: 0;
}
.user_form_check_input:focus {
    outline: none;
    box-shadow: none;
    border-color: #D32B2E;
}
.user_form_check_input:checked {
    background-color: #D32B2E;
    border-color: #D32B2E;
    box-shadow: none;

}
.user_form_check label {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #021E3A;
}
.user_img {
    width: 100%;
    max-width: 30px;
    height: 30px;
}
/*
*  STYLE 2
*/

#style-2::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

/* choose a game */
.main_container {
    padding: 0 200px;
}
.game_img {
    width: 100%;
    max-width: 546px;
    height: 334px;
}
.game_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.game_description {
    width: 100%;
    max-width: 650px;
}

/* checkbox */
.preference-box {
    border-bottom:1px solid #E5E7EE;
    padding: 51px 197px 10px;
    min-height: 120px;
}
.checkbox_container {
    position: relative;
    width: auto;
    min-height: 32px;
    margin:0 8px;
    float: left;
    background: #F1F4F6;
    border-radius: 4px;
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #73777A;
}
.checkbox_container input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    color: #000000;
}
.checkbox_container .checkbox_mainPreference {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    transition: .5s ease;
    border-radius: 27px;
    padding: 14px;
}
.checkbox_container input[type=checkbox]:checked ~ div{
    background: #F1F4F6;
    border: 1px solid #005BB9;
    color:#005BB9;
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}
/* record button */
.record_btn {
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #7B7E80;
    border: none;
    background: none;
    margin-top: 15px;
    padding: 7px 0;
    height: 35px;
}
.record_btn span.recorder_btn-img {
    width: 100%;
    max-width: 24px;
    height: 24px;
}
.record_btn span.recorder_btn-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.record_btn.active,
.record_btn:active {
    color: #005BB9;
}
.record_btn.active .recorder_btn-svg path,
.record_btn:active .recorder_btn-svg path {
    fill: #005BB9;
}

.record_btn.activeGreen {
    color: #30b408;
}
.record_btn.activeGreen .recorder_btn-svg path {
    fill: #30b408;
}

.non_play-btn {
    border: none;
    background: none;
    width: 100%;
    max-width: 30px;
    height: 30px;
}
.non_play-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*.non_play-btn.active .non_play-img,*/
/*.non_play-btn:active .non_play-img,*/
/*.non_play-btn:focus .non_play-img{*/
/*    display: none;*/
/*}*/
/*.non_play-btn.active,*/
/*.non_play-btn:active,*/
/*.non_play-btn:focus {*/
/*    background: url('../image/pause.png');*/
/*    background-repeat: none;*/
/*    background-position: center;*/
/*}*/
@media(max-width:1600px) {
    .main_container {
        padding: 0 100px;
    }
}
@media(max-width:1024px) {
    .wrapper-class {
        padding: 30px 30px;
    }
}