@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
    --text-color: rgb(0, 0, 0);
    --header-text: rgb(255, 255, 255);
    --header-background: rgb(31, 31, 39);
    --box-shadow: rgb(245, 245, 245);
    --text-white-color:rgb(255, 255, 255);
    --grey: rgb(128, 128, 128);
    --gainsboro: rgb(220, 220, 220);
    --purple: rgb(177, 23, 177);
    --black-snackbar : rgb(51, 51, 51);
    --success-snackbar:  rgb(6, 134, 6);
    --kahrido-bg: rgb(40, 116, 240);
    --header-whitecol: rgb(255, 255, 255);
    --light-blue: rgb(0, 123, 255);
    --logout-color: rgb(51, 122, 183);
    --grid-bg: rgb(51, 51, 51);
    --white:rgb(255, 255, 255);
    --white-text-color: rgb(255, 255, 255);
    --dark-blue: rgb(0, 42, 70);
    --primary-alert: rgb(110, 110, 250);
    --warning-alert: rgb(248, 175, 65);
    --success-alert: rgb(89, 194, 89);
    --danger-alert: rgb(233, 67, 67);
}

* {
    box-sizing: border-box;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

/* This is header I am going to use everywhere */

.header-icon {
    font-size: 2rem;
    padding-right: 0.5rem;
    color: var(--header-text);
}

.header {
    display: flex;
    padding: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 1px 1px 2px 1px rgb(65, 65, 65);
    position: fixed;
    width: 100%;
    z-index: 4;
    background-color: var(--header-background);

}

.header-link {
    text-decoration: none;
    padding: 0.1rem 0.5rem;
    color: var(--header-text);
}

.header-text {
    margin-right: auto;
    font-weight: 400;
    color: var(--header-text);
}

/* Header ends here  */

/* This is navigation I am going to use every where  */

.navigation {
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
    width: 11rem;
    box-shadow: 1px 2px 2px 3px var(--box-shadow);
    border-bottom-right-radius: 0.5rem;
    position: fixed;
    top: 4rem;
    overflow-y: scroll;
    height: calc(100vh - 4rem);
}

.navigation::-webkit-scrollbar{
    width: 6px;
}

.navigation::-webkit-scrollbar-thumb{
    background: rgb(78, 78, 78);
    border-radius: 2px;
}

.nav-link {
    list-style: none;
    padding: 0.87rem 0rem;
}

.active {
    font-weight: 600;
    border-bottom: 3px solid;
}

.nav-anchor {
    text-decoration: none;
    color: var(--text-color);
}

.nav-anchor:hover {
    background-color: rgb(235, 235, 235);
    border-radius: 0.25rem;
    padding: 0.23rem 0.4rem;
    padding-left: 0;
}


/* Nav ends here */

/* This is main container I will be using everywhere */
.main-container {
    width: 78%;
    position: absolute;
    top: 6rem;
    left: 14rem;
    height: max-content;
    box-shadow: 1px 2px 2px 1px var(--box-shadow);
    border: 0.1rem solid var(--box-shadow);
}

.main-heading {
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1.6rem;
}

.sub-heading {
    padding: 1rem 3rem;
    font-weight: 500;
    font-size: 1.2rem;
}

.des-para {
    padding: 0 3rem;
    font-weight: 400;
}

.separator {
    height: 0.15rem;
    background-color: var(--box-shadow);
}

.iframe {
    padding: 0rem 3rem;
    padding-bottom: 2rem;
    width: 100%;
}

.bottom-anchor {
    display: none;
}

/* Main container ends here */


/* Avatars extra css starts from here */

.avatar-container {
    display: flex;
    padding: 1.5rem 3rem;
    align-items: center;
}


.avatar-space {
    margin: 0rem 0.7rem;
}

/*  Avatars extra css ends  */


/* Badge extra css */

.badge-space {
    padding: 0rem 0.7rem;
}

.badge-container {
    display: flex;
    padding: 1.5rem 3rem;
}

.badge-icon-container {
    padding-left: 4rem;
    padding-top: 0.5rem;
}

/* badge extra css ends */


.alert-iframe-top {
    margin-top: 0.3rem;
}

/* alert extra ends */

/* button extra starts here */


.button-container {
    padding: 1rem 3rem;
}

/* button extra ends here */


/* img extra css starts*/

.res-img-container {
    margin: 1rem 3rem;
}

/* img extra ends */


/* Input extra css */

.input-space {
    margin-bottom: 1rem;
}

.iframe-input {
    padding: 0rem 3rem;
    width: 100%;
}

.input-container {
    margin: 1rem 0rem 1rem 3rem;
}

/* input extra ends here */


/* cards extra css */

.card-outerbox{
    margin: 1rem 3rem 2.6rem 3rem;
    display: flex;
    justify-content: space-around;
}

/* card extra ends */
.some-space{
    margin-top: 2rem;
}

/* Navigation starts */

.header-outerbox {
    margin: 1rem 0rem 2rem 3rem;
}

/* Navigation ends */

/* Text-Utility starts */


.text-container {
    margin: 2rem 3rem;
    box-shadow: 1px 1px 2px 1px gainsboro;
    background-color: rgb(255, 255, 255);
    padding: 1rem;
}

.texts-space {
    padding-bottom: 1rem;
}

.text-para {
    font-weight: 500;
}

/* Text-Utility ends */

/* List starts */

.stacked-outerbox{
margin: 2rem 3.3rem;
}

.list-container{
    margin: 2rem 3rem;
    box-shadow: 1px 1px 2px 1px gainsboro;
    background-color: rgb(255, 255, 255);
    padding: 1rem;
}

/* List ends */

/* modal extra css */

.modal-outerbox{
    margin: 2rem 3rem;
}

/* modal extra css ends */

/* media queries */

@media (max-width:468px) {
    .navigation {
        display: none;
    }

    .main-container {
        left: 0rem;
        top: 4rem;
        width: auto;
    }

    .bottom-anchor {
        color: var(--text-color);
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .last-anchor {
        font-size: 1.2rem;
        margin-left: 2rem;
        margin-right: 2rem;
        font-weight: 500;
        color: rgb(49, 49, 49);
        text-decoration: none;
    }

    .iframe {
        width: auto;
    }

    .CL-button {
        margin: 0.2rem;
    }

    .iframe-input {
        width: auto;
    }

    .card-outerbox{
        margin: 1rem 0rem 2.6rem 3rem;
        display: flex;
        justify-content: flex-start;
    }

    .main-heading {
        padding: 1rem 3rem;
        font-weight: 600;
        font-size: 1.6rem;
    }
}

/* media queries ends here */