/* CSS styles for your website */
body {
    font-family: Arial, sans-serif;
}

#topBar {
    background-color: #666cce !important;
    text-align: center;
    border: 0px !important;
    margin: 0;
    width: 100%;
    float: right;
    padding: 15px;
    border-radius: 0px;
}

#topBar a {
    text-decoration: none;
    color: #fff;
    margin: 10px;
}

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #666cce !important;

    color: #fff;
    text-align: center;

    float: right;
}

#header {
    padding: 0 0;
}

.user,
.logout {
    color: white;
    font-weight: 700;
    text-align: center;
    margin: 15px 15px;
}

.navbar-right a:hover {
    background-color: #494949 !important;
}

.navbar-nav {
    flex-direction: row !important;
}

/* Rounded tabs */

@media (min-width: 576px) {
    .rounded-nav {
        border-radius: 50rem !important;
    }
}

@media (min-width: 576px) {
    .rounded-nav .nav-link {
        border-radius: 50rem !important;
    }
}

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
#upload {
    opacity: 0;
}

#upload-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.image-area {
    border: 2px dashed rgba(192, 222, 250, 0.7);
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: "Uploaded image result";
    color: #a6b2f8;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}

.donate {
    padding: 1% 7%;
}

.donate button {
    padding: 10px 35px;
}

.donate_image img {
    height: 50px;
    width: 60px;
}

.donate_image {
    padding-bottom: 50px;
}

/* Start Datatable Style */
.dtBottom div {
    width: 50%;
    float: left;
}

.dtTop div {
    width: 50%;
    float: left;
    padding: 10px 0px;
}
/* End Datatable Style */

/* Div header and middle devider Start */
.sectionHeader {
    border-top: 2px solid #131313;
}

.sectionMiddle {
    border-top: 1px solid #131313;
}

/* Div header and middle devider End */

/* #printAblePage {
    overflow: visible !important;
} */

#tableHead {
    width: 33%;
}

.heading_one {
    color: red;
    font-weight: bolder;
}

/* //////////////////////////////////////////////////
///////////////////////////////////////////////// */
.user_list,
.event_list {
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
        max-height: 400px !important;
    min-height: 100px !important;
    overflow: auto;
    /* padding: 2%; */
}

#avatar {
    height: 2rem;
    width: 2rem;
}

.user_table,
.event_table td {
    width: 25%;
}

#user_list::-webkit-scrollbar-track,
#event_list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
    border-radius: 10px;
}

#user_list::-webkit-scrollbar,
#event_list::-webkit-scrollbar {
    width: 10px;
    background-color: #f5f5f5;
}

#user_list::-webkit-scrollbar-thumb,
#event_list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.44, rgb(122, 153, 217)),
        color-stop(0.72, rgb(73, 125, 189)),
        color-stop(0.86, rgb(28, 58, 148))
    );
}

/* //////////////////Newsletter Thumbnail/////////////////////////////// */
#thumbnail_img {
    height: 220px;
    width: 180px;
}

/* Message page CSS */
.gradient-custom {
    /* fallback for old browsers */
    background: #fccb90;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to bottom right, rgb(74 76 245), rgb(185 132 255));
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to bottom right, rgb(74 76 245), rgb(185 132 255))
    }
    
    .mask-custom {
    background: rgba(24, 24, 16, .2) !important;
    border-radius: 2em;
    backdrop-filter: blur(15px) !important;
    border: 2px solid rgba(255, 255, 255, 0.05);
    background-clip: padding-box !important;
    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
    }

    .border-bottom
    {border-bottom:  solid rgba(255,255,255,.3) !important;}