@media (min-width: 768px) {
    .app-header .navbar-header {
        width: 420px;
    }
}
/*.......... For Color admin app-header ............*/
.header-red {
    background-color: var(--bs-red);
}

.header-pink {
    background-color: var(--bs-pink);
}

.header-orange {
    background-color: var(--bs-orange);
}

.header-yellow {
    background-color: var(--bs-yellow);
}

.header-lime {
    background-color: var(--bs-lime);
}

.header-green {
    background-color: var(--bs-green);
}

.header-teal {
    background-color: var(--bs-teal);
}

.header-cyan {
    background-color: var(--bs-cyan);
}

.header-blue {
    background-color: var(--bs-blue);
}

.header-purple {
    background-color: var(--bs-purple);
}

.header-indigo {
    background-color: var(--bs-indigo);
}

.header-black {
    background-color: var(--bs-black);
}

.header-gray {
    background-color: var(--bs-gray);
}
/*.......................................*/
div.list-item {
    padding: 8px;
    border-bottom: 1px solid #d3d3d3;
}

    div.list-item:hover {
        background-color: #f3f3f3;
    }

div.list-item2 {
    padding: 8px;
    border-bottom: 1px solid #d3d3d3;
    background-color: var(--bs-white);
    margin-bottom: 6px;
    border-radius: 6px;
    word-wrap:anywhere;
}

/*a {
    text-decoration: none;
}*/

a.title {
    /*color: var(--app-component-color);*/
    text-decoration: none;
    margin: 0 0 .234375rem;
    font-size: 1.125rem;
    line-height: 1.2;
}

.nav-link {
    color: #4285f4;
}

legend {
    background-color: #f2f2f2;
    font-size: 1rem;
    color: #626262;
    padding: 4px;
    margin-top: 5px;
    border-bottom: 1px solid #dbdbdb;
}

.selectable {
    cursor: pointer;
}

.badge-new {
    color: #403737;
    background-color: #fecf4a;
}

.color-member {
    color: #059797;
}

.news-title {
    margin: 0 0 12px;
    line-height: 1.5;
    font-weight: bold;
    /*color: var(--app-component-color);*/
}

/*-------------- input Validation ----------*/
.field-validation-error {
    color: var(--bs-danger);
    font-size: small;
}

.validation-summary-errors {
    background-color: var(--bs-warning);
    font-size: small;
    padding: 6px;
    margin-bottom: 4px;
    /*border-radius: 6px;*/
}

    .validation-summary-errors ul {
        margin-bottom: 0px;
    }

.required::after {
    content: " *";
    /*font-weight: bold;*/
}

/*-------------- no-script message ----------*/
.noscriptMessage {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    right: 50%;
    width: 300px;
    margin-left: -150px;
    margin-top: -100px;
    z-index: 2001;
}

#wraplayer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0,0,0,0.6);
    z-index: 2000;
}

/*------------------------------------*/
.liked-color {
    color: red !important;
}

.pointer {
    cursor: pointer;
}

/* ------------------ books */
.publisher {
    color: #108897; /*var(--bs-cyan);*/
}

.author {
    color: #70AA2C; /* var(--bs-green);*/
}

.translator {
    color: #9d6485;
}

.category {
    color: #53449f;
}

.producer {
    color: #b68a22;
}

.book {
    color: var(--bs-blue);
}
.book-light {
    color: var(--bs-blue-bg-subtle);
}
.book-category {
    color: var(--bs-gray);
}
.book-category2 {
    color: var(--bs-teal);
}

.book-agegroup {
    color: #ef62ac
}

.book-language {
    color: #36b660
}
.book-code {
    color: var(--bs-gray);
}
.lendbook {
    color: var(--bs-indigo);
}

.illustrator {
    color: #d85454
}

a.unstyled {
    text-decoration: none;
}

.level-color {
    color: #6A73B4;
}

.lesson-color {
    color: #9d6485;
}

#loadingdiv {
    background-color: #eaeaead4;
}

.quiz {
    color: #35b15b
}

.question {
    color: #66acc1
}

.quizcategory {
    color: #df915a
}

.purpose {
    color: #f982ae
}

.quiz-language {
    color: #eb6161
}

.quiz-lesson {
    background-color: #9d6485
}

.quiz-class {
    background-color: #6A73B4
}

/* for member educational activities */
.memedu-activity {
    color: #108897;
}
.memedu-educator {
    color: #fecf4a;
}
.memedu-category {
    color: #6A73B4;
}
.memedu-timetable {
    color: #a42c2c;
}