img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.show {
    display: block !important;
}

.audio {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 20px;
    top: 65%;
    left: 0px;
    cursor: pointer;
    z-index: 100;
    height: 20px;
}

/* vocab-dictionary */
#vocab-dictionary {
    margin: 2rem 3rem;
}

#vocab-dictionary .vocab-dictionary-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

#vocab-dictionary .vocab-dictionary-container .col-container .top-header {
    margin-bottom: 5rem;
    text-align: center;
}

#vocab-dictionary .vocab-dictionary-container .col-container .hover-card {
    position: relative;
    margin: .5rem 0;
}

#vocab-dictionary .vocab-dictionary-container .col-container .hover-card .hover-word {
    display: none;
    position: absolute;
    /* top: -100%; */
    right: 0;
    width: 50%;
    top: 0;
}

#vocab-dictionary .vocab-dictionary-container .col-container .hover-card .hover-word.show {
    display: block;
    z-index: 2;
}

#vocab-dictionary .vocab-dictionary-container .col-container .hover-card .main-word {
    background-color: #ebebeb;
    /* margin-left: 15px; */
    padding-left: 30px !important;
}

#vocab-dictionary .vocab-dictionary-container .col-container .hover-card .main-word, 
#vocab-dictionary .vocab-dictionary-container .col-container .hover-card .hover-word {
    cursor: pointer;
    padding: 1.25rem .75rem;
    /* width: 100%; */
    font-size: 1.2rem;
}

#vocab-dictionary .vocab-dictionary-container .col-container .hover-card .hover-word {
    background: aliceblue;
}

/* Checkbox */
.checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;

    position: absolute;
    top: 19px;
}

/* .hover-card {
    z-index: -1;
}

#checkDiv {
    z-index: 1000;
} */

.checkbox__input {
    display: none;
    z-index: 100;
    margin-right: 2rem !important;
    margin-top: -2rem;
}

.checkbox__box {
    margin-left: 2px;
    width: 1.25em;
    height: 1.25em;
    border: 2px solid #cccccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    color: transparent;
}

.checkbox__box::after {
    content: '\2714';
    /* color: #fff; */
    /*color: #ebebeb !important;*/
    
    color: transparent;
    /*-webkit-text-fill-color: transparent !important;*/
}

/* When checkbox input is checked, it's going to select checkbox__box element */
.checkbox__input:checked + .checkbox__box { /* + is adjacent sibling combinator */
    background: #2277d6;
    border-color: #2266dc;
}

.checkbox__input:checked + .checkbox__box::after {
    color: #fff !important;
    /*color: -internal-light-dark(black, white);*/
}

/* for smaller screens */
@media screen and (max-width: 1100px) {
    #vocab-dictionary .vocab-dictionary-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 830px) {
    #vocab-dictionary .vocab-dictionary-container {
        grid-template-columns: 1fr;
    }
}