* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family:  'Poppins', sans-serif;
    font-size: 0.87rem;
}

body {
    background: rgb(235, 234, 234);
}

:root {
    --primary: #00005C;
    --black: #000;
    --white: #fff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --green: #06b92d;
    --red: #ca0606;
    --hover: rgb(231, 229, 229);
}

.box {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid rgb(216, 215, 215);
    margin-top: 10px;
    min-height: 68vh;
}

.namelink { 
    color: var(--black); 
    text-decoration: none; 
}
.namelink:hover { 
    text-decoration: underline; 
    color: var(--black); 
}

.tablelink { 
    color: var(--pink); 
    cursor: pointer;
    padding: 0px 3px;
}
.tablelink:hover { 
    color: gray 
}

.table thead {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}

.index-link {
    text-decoration: none;
    color: var(--black);
}

.dashboard-box {
    padding: 30px 20px;
    border-radius: 5px;
    transition: 0.5s ease-out;
    display: flex;
    align-items: center;
    color: var(--white);
}

.dashboard-box:hover {
    background: var(--white);
    color: var(--black);
}

.dashboard-box i {
    font-size: 2rem;
    margin-right: 20px;
}

.dashboard-box h5 {
    margin: 0px;
    padding: 0px;
}

.align-right {text-align: right;}
.pink {background: #d63384;} 
.blue {background: #00005C;} 
.indigo {background: #6610f2;}
.green {background: #06b92d;}
.red {background: rgb(255, 0, 0);}
.primary {background: #0524d4;}
.info {background: #016f83;}
.warning {background: #faac03;}

a {
    text-decoration: none;
}

.nav-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.myNav {
    background: var(--primary);
    color: #fff;
}

.form-group {
    margin-top: 10px;
}

.breadcrumb-box {
    background: var(--white);
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 5px;
    border: 1px solid rgb(216, 215, 215);
}

.breadcrumb-box i {
    margin: 0px 10px;
}

.breadcrumb-box a {
    color: var(--black);
    text-decoration: none;
}

.breadcrumb-box a:hover {
    text-decoration: underline;
}

.breadcrumb-box a#activePage {
    color: var(--pink);
    font-weight: 600;
}

.user-info {
    font-weight: 500;
}

.flex-box {
    display: flex;
    align-items: center;
}
.flex-box small, .flex-box h6 {
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    user-select: none;
}
.button {
    color: var(--white);
    border: none;
    outline: none;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: 500;
}
.button:hover {
    background: rgb(231, 229, 229);
    color: var(--black);
}

.desktop-hide {
    display: none;
}

@media (max-width: 668px) {
    .mobile-hide {
        display: none;
    }

    .desktop-hide {
        display: initial;
    }
}

/* login page */
.input-side {
    background: #fff;
    padding: 5rem 3rem;
    height: 100vh;
}

.input-img {
    text-align: center;
    margin-bottom: 3rem;
}

.login-logo {
    width: 5rem;
}

.create_acct {
    color: #000;
}

.create_acct:hover {
    text-decoration: underline;
    color: #000;
}

.right-side {
    /* height: 100vh; */
    padding: 5rem 3rem;
}

.img-bg {
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

.login-heading {
    /* margin-top: 10rem; */
    text-align: center;
}