html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

.card {
    border-radius: .6rem !important;
    width: 35rem !important;
}

.card-right {
    position: relative;
    left: 20px;
    background-color: #ffedd7 !important;
}

.login-card {
    width: 30rem !important;
    height: 23rem !important;
}

.signup-card {
    width: 40rem !important;
    height: 34rem !important;
}

.password-reset-card {
    width: 30rem !important;
    height: 16rem !important;
}

.password-reset-done-card {
    width: 30rem !important;
    height: 11rem !important;
}

.password-reset-invalid-card {
    width: 30rem !important;
    height: 5rem !important;
}

.password-reset-complete-card {
    width: 31rem !important;
    height: 4rem !important;
}

.bg-login {
    background-color: #2C2C4B;
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.label {
    color: #93B2C9;
    font-size: 12px;
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
}

button {
    background-color: #2C2C4B !important;
    color: white !important;
    border-radius: 1.7rem !important;
    padding: 8px 25px 8px 25px !important;
    font-family: Avenir Heavy !important;
    font-weight: Bold !important;
    font-size: 17px !important;
    transition-duration: 0.2s;
    cursor: pointer;
    border: none !important;
    white-space: nowrap;
}

button:hover {
    background-color: #698DA5 !important;
}

.hovered {
    background-color: #698DA5 !important;
}

.active-menu {
    color: #35A7F5 !important;
    border-bottom: solid #35A7F5 2px;

}

.nav-item > a {
    font-size: 16px;
    color: #92B2CA;
}

.nav-link:focus, .nav-link:hover {
    font-size: 16px;
    color: #2C2B4C !important;
    border-bottom: solid #2C2B4C 2px !important;
}

a:hover {
    font-size: 16px;
    color: #2C2B4C !important;
    border-bottom: solid #35A7F5 2px !important;
}

.a-hovered {
    color: #2C2B4C !important;
}

.box {
    display: inline-block !important;
    align-items: center !important;
    display: flex !important;
    align-items: center !important;
}

.card-icons {
    width: 50% !important;
}

.pre-heading {
    font-size: 18px;
    font-family: 'Nunito', sans-serif;
}

.pre-logo {
    margin-left: 10px;
    margin-top: -25px;
}

.suggest-articles {
    color: #93B2C9 !important;
}

.article {
    border-radius: .5rem;
    padding: 10px;
    margin: 10px 0px;
}

.article-text {
    margin-top: .2rem !important;
    margin-bottom: .2rem !important;
    line-height: 1.4rem !important;
    padding: 5px 20px 5px 15px;
}

.arrow-right {
    height: auto;
    width: 10px;
    left: 380px;
    position: relative;
    bottom: 77px
}

.bottom-logo {
    color: #6A8DA4;
}

.top-bottom {
    margin: 5rem 0 !important
}

.bg-main {
    color: #F7F7FB;
}

.search-para {
    color: #698DA5 !important;
}

.input-group-text, .search {
    background-color: transparent !important;
    border: 0px !important;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    outline: 0;
    box-shadow: none !important;
}

.input-group {
    border: none !important;
    border-radius: 2.25rem;
    width: 50% !important;
    margin: 0 auto !important;
    float: none !important;
    box-shadow: 0px 0px 2.9px rgba(0, 0, 0, 0.01),
    0px 0.1px 6.7px rgba(0, 0, 0, 0.015),
    0px 0.1px 12px rgba(0, 0, 0, 0.018),
    0px 0.2px 19.9px rgba(0, 0, 0, 0.022),
    0px 0.3px 32.8px rgba(0, 0, 0, 0.025),
    0px 0.5px 57.3px rgba(0, 0, 0, 0.03),
    0px 1px 124px rgba(0, 0, 0, 0.04);

}

.box-shadow {
    box-shadow: 0px 0px 2.9px rgba(0, 0, 0, 0.01),
    0px 0.1px 6.7px rgba(0, 0, 0, 0.015),
    0px 0.1px 12px rgba(0, 0, 0, 0.018),
    0px 0.2px 19.9px rgba(0, 0, 0, 0.022),
    0px 0.3px 32.8px rgba(0, 0, 0, 0.025),
    0px 0.5px 57.3px rgba(0, 0, 0, 0.03),
    0px 1px 124px rgba(0, 0, 0, 0.04);
}

.bi-search {
    margin-left: 10px !important;
}

.search {
    padding: 10px 10px !important;
}

.no-gutter {
    bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.font-sm {
    font-size: .9rem !important;
}

.btn-top {
    background-color: #A1B7C8 !important;
    border: none !important;
}

.btn-journal {
    font-weight: normal !important;
    font-size: 14px !important;
    padding: 13px 25px !important;
}

.vertical-middle {
    vertical-align: middle !important;
    margin-bottom: 2px;
}

.heading-gray {
    color: #698DA5;
    font-weight: normal !important;
}

.bg-grayMain {
    background-color: #F7F7FB !important;
}

.header-bg {
    background-color: #FFFFFF !important;
}

.journal-para-unread {
    font-weight: normal;
    font-size: 13px;
    transition: 0.3s;
}

.journal-para-read {
    color: #b3b3be;
    font-weight: normal;
    font-size: 13px;
    transition: 0.3s;
}

.item .journal-para:hover {
    color: #35A7F5 !important;
    font-weight: Bold;
}

.no-hover {
    font-weight: normal !important;
}

.gray-footer {
    background-color: #698DA5 !important;
}

.bottom-footer {
    position: fixed;
    height: 90px;
    bottom: 0;
    width: 100%;
}

.journal-para:hover {
    color: maroon !important;
    font-weight: Bold;
}

.item {
    transition: 0.3s;
}

.item:hover {
    transform: translate(25px, 0px);
    box-shadow: -1px 2px 23px -3px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: -1px 2px 23px -3px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: -1px 2px 23px -3px rgba(0, 0, 0, 0.16);

}

.btn-footer {
    background-color: white !important;
    color: #5C707F !important;
}

.btn-footer:hover {
    background-color: #2C2C4B !important;
    color: white !important;
}

.w75 {
    width: 70% !important;
}

h6 {
    color: #92B2CA;
}

.blue {
    color: #2C2B4C !important;
}

.gray-color {
    background-color: #A5BBC9 !important;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

.icon-normal {
    transition: 0.3s;
    color: #92B2CA;
    padding: 0px 20px !important;
}

.icon-hover {
    color: #2C2B4C;
    padding: 0px 20px !important;
}

.icon-normal:hover {
    color: #2C2B4C;
    /* padding: 0px 20px!important; */
}

.text-justify {
    text-align: left;
    word-wrap: break-word;
}

.like-active {
    color: #72BFF7;
    padding: 0px 20px !important;

}

.dislike-active {
    color: #F53968;
    padding: 0px 20px !important;

}

.footer-fixed {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

.btn-journal:hover {
    background-color: #35A7F5 !important;
}

.btn-journal-blue {
    background-color: #35A7F5 !important;
}

.bottom-border-sm {
    border-bottom: solid #C7E2F5 1px;
    margin-top: 15px !important;
}

.bottom-border-container {
    border-bottom: solid #C7E2F5 2px;
}

.bottom-border {
    border-top: solid #C7E2F5 1px;
}

h1, h2, h3, h4, h5, p {
    font-family: 'Nunito', sans-serif;
}

p {
    line-height: 1.6rem;
}

.pgn {
    padding-left: 145px !important;
}

.form-check-input:checked {
    background-color: #2C2B4C !important;
    border-color: #2C2B4C !important;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.mt-neg {
    margin-top: -33px !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    color: white;
}

.box-res {
    width: 50% !important;
}

/* (425px and up) */
@media (min-width: 425px) {
    #lblsearch {
        font-size: 15px;
    }

    #btnSearch {
        font-weight: normal !important;
        font-size: 12px !important;
    }

    .box-res {
        width: 90% !important;
    }

    .offset-res {
        margin-left: 0%;
    }

    .marginTop {
        margin-top: 20px !important;
    }

    .text-res {
        text-align: center;
    }

    .icn {
        margin-left: 75px !important;
    }

    .btnres {
        font-weight: normal !important;
        font-size: 15px !important;
        margin-top: 20px;
        margin-left: 52px !important;
    }

}

/*  Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .icn {
        margin-left: 90px !important;
    }

    .btnres {
        font-weight: normal !important;
        font-size: 15px !important;
        margin-left: 72px !important;
        margin-top: 20px;
        float: none !important;
    }

    #lblsearch {
        font-size: 16px;
    }

    #btnSearch {
        font-weight: normal !important;
        font-size: 14px !important;
    }

    #lblsearch {
        font-size: 16px;
    }

    .box-res {
        width: 90% !important;
    }

    .icon-res {
        display: block;
    }

    .offset-res {
        margin-left: 0%;
    }

    .marginTop {
        margin-top: 20px !important;
    }

    .text-res {
        text-align: center;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .icn {
        margin-left: 158px !important;
    }

    .btnres {
        font-weight: normal !important;
        font-size: 15px !important;
        margin-left: 136px !important;
        margin-top: 20px;
        float: none !important;
    }

    #btnSearch {
        font-weight: bold !important;
        font-size: 17px !important;
    }

    .box-res {
        width: 80% !important;
    }

    .icon-res {
        display: flex;
    }

    #lblsearch {
        font-size: 18px;
    }

    .offset-res {
        margin-left: 11%;
    }

    .marginTop {
        margin-top: 20px !important;
    }

    .text-res {
        text-align: justify;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .icn {
        margin-left: 0px !important;
    }

    .btnres {
        font-weight: normal !important;
        font-size: 15px !important;
        align-items: flex-end;
        margin-left: 175px !important;
        margin-top: 20px;
        float: none !important;
    }

    #btnSearch {
        font-weight: bold !important;
        font-size: 17px !important;
    }

    .box-res {
        width: 70% !important;
    }

    .icon-res {
        display: flex;
    }

    #lblsearch {
        font-size: 19px;
    }

    .offset-res {
        margin-left: 25%;
    }

    .marginTop {
        margin-top: 0px !important;
    }

    .text-res {
        text-align: justify;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .icn {
        margin-left: 0px !important;
    }

    .btnres {
        font-weight: normal !important;
        font-size: 15px !important;
        align-items: flex-end;
        margin-left: 280px !important;
        margin-top: 20px;
        float: none !important;
    }

    .box-res {
        width: 50% !important;
    }

    .icon-res {
        display: flex;
    }

    #lblsearch {
        font-size: 19px;
    }

    .offset-res {
        margin-left: 25%;
    }

    .marginTop {
        margin-top: 0px !important;
    }

    .text-res {
        text-align: justify;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

    .icn {
        margin-left: 15px !important;
    }

    .btnres {
        font-weight: normal !important;
        font-size: 15px !important;
        margin-left: 365px !important;
        margin-top: 20px;
        float: none !important;
    }

    .box-res {
        width: 50% !important;
    }

    .icon-res {
        display: flex;
    }

    #lblsearch {
        font-size: 19px;
    }

    .offset-res {
        margin-left: 25%;
    }

    .marginTop {
        margin-top: 0px !important;
    }

    .text-res {
        text-align: justify;
    }
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.hidden,
[hidden] {
    display: none !important;
}

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sr-only.focusable:active,
.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

@media print {
    *,
    *::before,
    *::after {
        background: #fff !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.fas, .fal {
    cursor: pointer;
}

.article {
    display: none;
}

.journal-para {
    cursor: pointer;
}

#loading {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
}

#loading-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
}

.close-gray-footer {
    position: absolute;
    top: .4rem;
    right: .4rem;
}

.search-input-group {
    min-width: 70%;
}

@media screen and (max-width: 600px) {
    #lblsearch {
        display: none;
    }
}