@charset "UTF-8";
/* ----------------------------------------------------------------
    HOME LAYOUT
-----------------------------------------------------------------*/
.stats-container-v2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stats-container-v2 a {
    text-decoration: none;
}

    .stats-container-v2 a:hover {
        color: black;
    }

.stats-container-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 54px;
    text-align: center;
    color: #222222;
    padding-top: 30px;
}

.stat-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    grid-gap: 20px;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
}

.stat-facts {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex: 1;
}

    .stat-facts h1 {
        font-weight: 500;
        font-size: 60px;
        line-height: 96px;
        margin: 0 !important;
        /*color: #333333;*/
        color: #640199 !important;
        letter-spacing: normal;
    }

    .stat-facts h2 {
        font-weight: 500;
        font-size: 27px;
        line-height: 35px;
        margin: 0 !important;
        /*color: #333333;*/
        color: #640199 !important;
        letter-spacing: normal;
    }

    .stat-facts h3 {
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
        color: #640199 !important;
    }

    .stat-facts h4 {
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
    }

    .stat-facts h5 {
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
    }

/*  START OF FLEX DESIGN  */


* {
    box-sizing: border-box;
}

/* Style the body */
/*body {
    font-family: Arial;
    margin: 0;
}*/

/* Header/logo Title */
.header {
    padding: 0px;
    text-align: center;
    /*background: #e7feff;*/
    /*background: #1abc9c;*/
    color: white;
}

/* Style the top navigation bar */
.navbar {
    display: flex;
    background-color: #333;
}

    /* Style the navigation bar links */
    .navbar a {
        color: white;
        padding: 14px 20px;
        text-decoration: none;
        text-align: center;
    }

        /* Change color on hover */
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

/* Column container */

/*@media (max-width: 800px) {
    .flex-container {
        flex-direction: column;
    }*/


.rowhome {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0px;
    margin-right: -20px
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
}

/* Main column */
.main {
    flex: 70%;
    background-color: white;
    padding: 10px;
    padding-top: 0px
}

/* Inside Main Flex Container*/

.cart-width {
    width: 30%;
    margin: 5px;
}

/*.main-card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0px;*/
/*text-align: center;*/
/*}*/


/*  STABDARD CARD DESIGN UPDATES  */

.card {
    /*border: solid !important;*/
    border-radius: 5px !important;
    /*border-color: lightgray !important;*/
    border: 1px solid rgba(0, 0, 0, .125);
}


.card-header h1 {
    /*font-size: 20px;*/
    /*color: red !important;*/
}

.card-header h2 {
    /*font-size: 20px;*/
    color: blue !important;
}

.card-header p {
    /*font-size: 20px;*/
    color: blue !important;
}

.card-title {
    /*font-size: 14px;*/
    color: blue !important;
}

.card-body ul {
    /*font-size: 14px;*/
    margin-left: 10px;
    /*color: blue !important;*/
}


.card-body p {
    font-size: 14px;
    color: black !important;
}

.card-body a {
/*    margin-block: 80px;*/
    margin-top: 5px;
    margin-bottom: 5px;
}


/*  END OF STABDARD CARD DESIGN UPDATES  */

.main-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    /*    border: 1px solid #ccc;
    border-radius: 5px;*/
    padding: 0px;
}

.main-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    /*display: flex;
    justify-content: space-around;*/ /* Distributes space around the cards */
    /*flex-wrap: wrap;*/ /* Allows cards to wrap to the next line on smaller screens */
}

.main-card-container-2C {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    /*display: flex;
    justify-content: space-around;*/ /* Distributes space around the cards */
    /*flex-wrap: wrap;*/ /* Allows cards to wrap to the next line on smaller screens */
}

.main-card-container-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    /*grid-template-columns: 1fr;*/
    /*grid-auto-columns: 150px;*/
    gap: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    /*display: flex;
    justify-content: space-around;*/ /* Distributes space around the cards */
    /*flex-wrap: wrap;*/ /* Allows cards to wrap to the next line on smaller screens */
}


.main-box1 {
    grid-column-start: 1;
    grid-column-end:2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.main-box2 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.main-box3 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
}


@media screen and (max-width: 767px) {
    .main-card-container-2C {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        
    }

    .card-body a {
        /*    margin-block: 80px;*/
        margin-top: 15px;
        margin-bottom: 80px;
    }

}
    .main-card-container-3C {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        /*display: flex;
    justify-content: space-around;*/ /* Distributes space around the cards */
        /*flex-wrap: wrap;*/ /* Allows cards to wrap to the next line on smaller screens */
    }

.cardbody {
    /*background-color:lightcyan;*/
    /*font-weight: 600;*/
    font-size: 14px;
    /*min-height: 90px;*/
    color: black !important;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    /*height: 200px;*/
    /*height: fit-content !important;*/
    /*contain-intrinsic-height: auto;*/
}

.cardbody p {
    /*background-color:aliceblue;*/
    font-weight: 600;
    font-size: 14px;
    color: black !important;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}


.main-card-body {
    /*background-color: blue;*/
    /*font-weight: 600;*/
    font-size: 14px;
    /*min-height: 90px;*/
    color: black !important;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    /*height: 200px;*/
    height: fit-content !important;
    /*contain-intrinsic-height: auto;*/
}


        .main-card-body p {
            /*background-color: blue;*/
            /*font-weight: 600;*/
            font-size: 14px;
            /*line-height: 40px;*/
            color: black !important;
            margin: 5px;
            padding-left: 10px;
            /*padding-right: 10px;*/
            text-align: left;
            /*height: 40px;*/
        }

        .main-card-body p.card-text {
            /*background-color: blue;*/
            /*font-weight: 600;
        font-size: larger;*/
            color: black;
            margin: 5px;
            padding: 3px;
            text-align: left;
            line-height: 20px;
        }

        .main-card-body p.card-text-s {
            color: black;
            margin: 5px;
            padding: 3px;
            text-align: left;
            line-height: 20px;
        }

    .main-card-body ul li {
        font-size: 14px;
        display: block;
        text-align: left;
        margin-left: 25px;
        color: blue !important;
    }

.main-card-body-top ul li {
    font-size: 14px;
    display: list-item;
    text-align: left;
    margin-left: 25px;
    color: blue !important;
}

.main-card-body-top p {
    /*background-color: blue;*/
    /*font-weight: 600;*/
    font-size: 14px;
    /*line-height: 60px;*/
    color: black !important;
    margin: 5px;
    padding-left: 15px;
    padding-right: 5px;
    text-align: left;
}

    .main-card-header-p h2 {
        background-color: rgba(0, 0, 0, .03);
        font-weight: 600;
        font-size: 30px;
        border-radius: 5px;
        line-height: 60px;
        color: black !important;
        margin: 5px;
        text-align: center;
    }

    .main-card-header-s p {
        /*background-color: rgba(0, 0, 0, .03);*/
        background-color: lightgray;
        font-weight: 600;
        font-size: 20px;
        border-radius: 5px;
        line-height: 60px;
        color: blue !important;
        margin: 5px;
        text-align: center;
    }

.main-card-header-s h1 {
    background-color: lightgray;
    font-weight: 600;
    /*font-size: 20px;*/
    border-radius: 5px;
    line-height: 60px;
    color: blue !important;
    margin: 5px;
    text-align: center;
}

    .main-card-header-s h2 {
        background-color: lightgray;
        font-weight: 600;
        font-size: 20px;
        border-radius: 5px;
        line-height: 60px;
        color: blue !important;
        margin: 5px;
        text-align: center;
    }


    .main-card-header-b h2 {
        background-color: blue;
        font-weight: 600;
        font-size: 30px;
        border-radius: 5px;
        line-height: 60px;
        color: white !important;
        margin: 5px;
        text-align: center;
    }

    .main-card-header-y h2 {
        background-color: yellow;
        font-weight: 600;
        font-size: 30px;
        border-radius: 5px;
        line-height: 60px;
        color: blue !important;
        margin: 5px;
        text-align: center;
    }

    .main-card-header-g h2 {
        background-color: lightgreen;
        font-weight: 600;
        font-size: 30px;
        border-radius: 5px;
        line-height: 60px;
        color: black !important;
        margin: 5px;
        text-align: center;
    }

.main-card-footer {
    position: static;
    bottom: 0;
    width: 100%;
}


    .center-button-w {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .center-button {
        display: flex;
        justify-content: center;
        align-items: center;
        /*height: 200px;*/
    }

    .card-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .inside-flex {
        display: flex;
        align-items: stretch;
        background-color: #f1f1f1;
    }

        .inside-flex > div {
            background-color: white;
            color: black;
            width: 33.33%;
            margin: 10px;
            text-align: center;
            /*line-height: 75px;
        font-size: 30px;*/
        }

        .inside-flex h5.card-header {
            background-color: blue;
            font-weight: 600;
            font-size: larger;
            color: white;
            margin: 5px;
            text-align: center;
        }

        .inside-flex .card-body {
            /*background-color: blue;*/
            /*font-weight: 600;
        font-size: larger;*/
            /*color: black;*/
            /*margin: 0px;*/
            padding: 0.15rem;
            /*text-align: left;*/
        }

        .inside-flex p.card-text {
            /*background-color: blue;*/
            /*font-weight: 600;
        font-size: larger;*/
            color: black;
            margin: 10px;
            text-align: left;
        }

    .inside-card > div {
        background-color: white;
        color: black;
        width: 33.33%;
        margin: 10px;
        text-align: center;
        /*line-height: 75px;
        font-size: 30px;*/
    }




    /* Fake image, just for this example */
    .fakeimg {
        background-color: #e7feff;
        width: 100%;
        padding: 0px;
    }

    /* Footer */
    .footer {
        padding: 20px;
        text-align: center;
        background: #ddd;
    }

    /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 700px) {
        .row, .navbar {
            flex-direction: column;
        }
    }


    /* END OF FLEX DESIGN  */


    /* IMAGE CENTER */

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    /* ---- */


/* ----------------------------------------------------------------
    HOME DASHBOARD LAYOUT
-----------------------------------------------------------------*/

.dash-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    /*    border: 1px solid #ccc;
    border-radius: 5px;*/
    padding: 0px;
}

/*.main-card-container-dash {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 5px;
    margin-bottom: 5px;*/
    /*display: flex;
    justify-content: space-around;*/ /* Distributes space around the cards */
    /*flex-wrap: wrap;*/ /* Allows cards to wrap to the next line on smaller screens */
/*}*/

.dash-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    gap: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    /*display: flex;
    justify-content: space-around;*/ /* Distributes space around the cards */
    /*flex-wrap: wrap;*/ /* Allows cards to wrap to the next line on smaller screens */
}

.dash-card-container-3C {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 5px;
    margin: 5px;
/*    margin-top: 5px;
    margin-bottom: 5px;*/
    padding-block: 1px;
    /*display: flex;*/
    /*justify-content: space-around;*/  /*Distributes space around the cards */
    /*flex-wrap: wrap;*/ /* Allows cards to wrap to the next line on smaller screens */
}

.dash-card-header h4 {
    background-color: lightgray;
    font-weight: 600;
    font-size: 20px;
    border-radius: 5px;
    line-height: 60px;
    color: blue !important;
    margin: 5px;
    text-align: center;
}


.dash-card-body {
    /*background-color: blue;*/
    /*font-weight: 600;*/
    font-size: 14px;
    /*min-height: 90px;*/
    color: black !important;
    margin: 5px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
    height:min-content;
    /*contain-intrinsic-height: auto;*/
}

.dash-btn {

    width: 70px;
    padding-left: 2px;
    padding-right: 2px;
    color: white;

}


/* END OF DASHBOARD LAYOUT */


/*  ---- START BACKGROUND COLOR ----*/

.background-card-ab {
    background-color: #F0F8FF !important;
}

.background-card-az {
    background-color: #F0FFFF !important;
}




/*  ---- END BACKGROUND COLOR ----*/
.dl-bigger {
    text-indent: 20px;
    font-size: 20px;
    line-height: 35px;
    color: #000000c9;
}

    .ul-bigger {
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 400 !important;
        font-size: 18px !important;
        line-height: 22px !important;
        color: black;
    }

    .stat-facts p {
        font-family: 'IBM Plex Sans', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 22px;
        margin: 0 !important;
        padding: 15px !important;
        color: black;
        /*color: #444444;*/
    }

    .home-design {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        grid-gap: 1px;
        text-align: left;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
        width: 100%;
        padding: 20px;
        flex: 1;
    }


        .home-design h1 {
            font-weight: 500;
            font-size: 40px;
            line-height: 96px;
            margin: 0 !important;
            /*color: #333333;*/
            color: #640199 !important;
            letter-spacing: normal;
        }

        .home-design h2 {
            font-weight: 500;
            font-size: 65px;
            line-height: 96px;
            margin: 0 !important;
            /*color: #333333;*/
            color: #640199 !important;
            letter-spacing: normal;
        }


        .home-design h3 {
            font-family: 'IBM Plex Sans', sans-serif;
            font-weight: 400;
            font-size: 18px;
            line-height: 20px;
            color: #444444;
        }

        .home-design h4 {
            font-family: 'IBM Plex Sans', sans-serif;
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
        }

        .home-design ul {
            font-family: 'IBM Plex Sans', sans-serif;
            font-weight: 200;
            font-size: 16px;
            line-height: 20px;
        }

    @media screen and (max-width: 767px) {
        .stats-container-title {
            font-size: 36px;
            line-height: 40px;
        }
    }

    @media screen and (max-width: 480px) {
        .stat-facts {
            width: 100%;
            height: auto;
        }
    }


    /* ----------------------------------------------------------------
    HOOVER 
-----------------------------------------------------------------*/


    /*<div class="HooverDiv" > Hover over me.</div >
<div class="HooverHide" > I am shown when someone hovers over the div above.</div >*/

    .HooverHide {
        display: none;
    }

    .HooverDiv:hover + .HooverHide {
        display: block;
        color: blue;
    }


    /* ----------------------------------------------------------------
    HIDE IMAGE 
-----------------------------------------------------------------*/

    @media (max-width:629px) {
        img#optionoff {
            display: none;
        }
    }