/* * {
    all: unset ;
} */

.vocab-grid {
    /* all: unset; */
}

.two_col_div .parent_div {
    all: unset !important;
}

.chckbx-group {
    all: unset !important;
}

.vocab-new-each-item {
    all: unset !important;
}

.two_col_div .parent_div #category-1 {
    all: unset !important;
}

.two_col_div .parent_div #category-1 .vocab-new-each-item {
    margin: 3rem 0;
}

.two_col_div .parent_div #category-1 .vocab-new-each-item {
    all: unset !important;
    position: relative !important;
}

.two_col_div .parent_div #category-1 .vocab-new-each-item .tooltip-text {
    position: absolute !important;
    /* top: -100px !important; */
}

#saved-items .saved-items-container .parent_div #vocab-new-each-item .main-text {
    max-width: 100% !important;
    font-size: 1.25rem !important;
    max-width: 100%;
    min-width: 100%;
    user-select: none;
    /*font-family: var(--my-favorite-font) !important;*/
}

/* for hover word */
#hover-w {
    position: absolute !important;
    /*top: -75px !important;*/
    top: -105px !important;
    max-width: 400px !important;
    line-height: 1.45 !important;
    font-size: 1.25rem !important;
    top: -150px !important;
    /*font-family: var(--my-favorite-font) !important;*/
    color: navy;
    left: 15px;
}

.parent-d {
    position: relative !important;
}

.audio-group .audio-cntrls {
    position: relative;
}

.chckbx-group a.main-text {
    /*font-size: 1.25rem !important;*/
    user-select: none;
}

/*  */

/* .vocab-grid {
    all: unset;
}

.grid-column-3 {
    max-width: 100% !important;
}

#vocab-new-grid {
    all: unset !important;
} */


/* for two columns */

/* Main issue restricting certain width */
.vocab-grid > div {
    all: unset;
}

.two_col_div {
    all: unset !important;
    font-size: 1rem !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 1.25rem !important;
}

.audio-group .audio-cntrls img {
    position: absolute;
    left: -10px;
    top: -15px;
    width: 32px;
    height: 32px;
    
    /*left: -30%;*/
    /*width: 32px;*/
    /*height: 32px;*/
    /*top: -50px;*/
}

.two_col_div .parent_div > #category-1  {
    all: unset !important;
    max-width: 100% !important;
    display: block !important;
    /*margin: 5rem 1rem !important;*/
    margin: 9rem 1rem !important;
}

.two_col_div .tooltip-text {
    font-size: 1rem !important;
}

/* for background */
.two_col_div .parent_div #category-1 {
    /*background: rgba(245, 214, 214, 0.899) !important;*/
    background: white;
    padding: 1.25rem .25rem !important;
    border-radius: 5px !important;
    color: #fff !important;
    border: 1px solid cornflowerblue !important;
    /*height: 60px !important;*/
    height: 90px !important;
    /*background: orange !important;*/
}

.two_col_div .parent_div #category-1  #vocab-new-each-item {
    display: grid !important;
    font-size: 1.1rem !important;
    grid-template-columns: 1fr 9fr !important;
}

/* reduce the top for less-top thing */
#hover-w.less-top {
    top: -108px !important;
    
        top: -110px !important;
    left: -10px;
}

@media (max-width: 1210px) {
    .two_col_div {
        all: unset;
    }
}

@media(max-width: 750px) {
    #saved-items .saved-items-container .parent_div #vocab-new-each-item .main-text,
    #saved-items .saved-items-container .parent_div #vocab-new-each-item .tooltip-text.hover-el {
        font-size: 1rem !important;
    }

    .two_col_div {
        max-width: 500px !important;
    }
}

@media(max-width: 550px) {
    .two_col_div {
        max-width: 320px !important;
    }
}

@media(max-width: 350px) {
    .two_col_div {
        max-width: 320px !important;
    }
}

/* for 900px (where it breaks) */
@media screen and (max-width: 900px) {
    .two_col_div {
        padding: 0 !important;
        grid-template-columns: 1fr !important;
        grid-gap: 0 !important;
    }
}

@media screen and (max-width: 550px) {
    #hover-w {
        max-width: 240px !important;
        top: -9.9rem !important;
        
        max-width: 290px !important;
        margin-left: -20px;
    }

    .two_col_div .parent_div > #category-1 {
        max-width: 280px !important;
    }

    .two_col_div .main-text.hover-el {
        margin-left: 0 !important;
    }

    .two_col_div .main-text {
        width: 250px;
    }
}

@media screen and (max-width: 670px) {
    .two_col_div .main-text.hover-el {
        max-width: 230px;
    }
    
    .two_col_div .parent_div #category-1 {
        height: 110px !important;
    }

    .two_col_div .main-text {

    }
}

/* for screen sizes of than 500px */
@media screen and (max-width: 550px) {

    #hover-w.more-top {
        top: -110px !important;
    }
}