:root {
    --dark-1: rgb(59, 2, 2);
    --dark-2: rgb(120, 68, 50);
    --light-1: rgb(255, 240, 215);
    --light-2: hsl(40, 69%, 87%);
    --light-3: rgb(252, 252, 225);
}

section {
    min-height: 100vh;
    padding: 35px 8px;
}

.login {
    border: 2px solid red;
}

.navbar-brand img {
    height: 75px;

}

.date h4 {
    color: var(--dark-1);
    margin: 0px;
    padding: 5px 15px;
    font-size: 18px;
}

.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1;
}

#navbarSupportedContent {
    position: sticky;
    top: 0;
    z-index: 1;
}

nav i {
    color: aliceblue;
    font-size: 35px;
}

nav ul li {
    text-transform: uppercase;
    margin: 0px 5px;
    /* border: 1px solid wheat;
    border-radius: 7px; */
}

nav ul li a {
    /* font-size: 15px; */
    color: aliceblue;
}

nav ul li a:hover {
    /* font-size: 15px; */
    color: var(--light-1);
}

nav ul li .active a {
    /* font-size: 15px; */
    /* color: var(--light-1); */
}

.nav-link.active {
    color: var(--dark-1);
    background: var(--light-1);
    font-weight: bold;
    border-radius: 5px;

}

.s-1 {
    min-height: calc(100vh - 194.6px);
}

.s-2 {
    /* min-height: calc(100vh - 56px); */
    min-height: 100vh;
}

.info-one {
    margin: 25px;
    padding: 20px;
    border: 3px solid tomato;
    border-radius: 0 0 15px 15px;
    text-align: center;
    /* text-transform: uppercase; */
    text-transform: capitalize;
}

.info-one h3 {
    font-family: monospace;
    font-weight: bold;
    word-spacing: -6px;
    background: rgb(120, 68, 50);
    /* background:  rgb(245, 230, 200); */
    color: rgb(245, 230, 200);
    padding: 10px 25px;
    margin: 0 0 20px 0;
}

.latest_masail {
    margin: 25px;
    text-align: center;
    text-transform: uppercase;
}

.latest_masail h5 {
    font-family: monospace;
    font-weight: bold;
    word-spacing: -6px;
    background: rgb(120, 68, 50);
    /* background:  rgb(245, 230, 200); */
    color: rgb(245, 230, 200);
    padding: 10px 25px;
    margin: 0 0 20px 0;
}

.dashboard {
    margin: 15px;
    text-align: center;
    text-transform: uppercase;
}

.info-one .sp-welcome-text {
    font-size: 18px;
}



.info-one h4 {
    font-weight: bold;
    font-size: 18px;
    color: brown;
}

.info-one p {
    font-size: 15px;
}

.welcome-text {
    font-family: monospace;
    color: yellow;
}

.info-two {
    margin: 25px;
    padding: 20px;
    border: 3px solid tomato;
    border-radius: 20px;
    /* text-align: center; */
    text-transform: uppercase;
}

/* ADMIN Dash board */

.logo-hade h4 a {
    color: var(--light-1);
}

.main-box {
    border: 2px solid red;
    border-radius: 8px;
}

.main-box-brown {
    border: 2px solid var(--dark-2);
    /* border-radius: 8px; */
}


/* Client Multi Level Dropdown */

.dropdown-menu {
    background: var(--light-3);
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu a,
.dropdown-menu li a {
    color: black;
    background: var(--light-3);
}

.dropdown-menu a:hover,
.dropdown-menu li a:hover {
    color: red;
    background: var(--light-3);
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
    display: block;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--dark-2);
}

.sidebar {
    border: 2px solid red;
    /* margin-left: 5px; */
    width: calc(100vw - 1rem);
    border-radius: 8px;
}

hr {
    border: 0.025rem solid sandybrown;
}

.note_bg {
    font-weight: bold;
    font-size: 18px;
    color: var(--light-1);
}


.footer p,
.footer p a {
    margin: 0;
    padding: 15px;
    color: var(--light-1);
}

.footer p a:hover {
    color: white;
}


.map {
    width: 100%;
    margin: 25px;
    padding: 10px;
    border: 3px solid tomato;
    border-radius: 25px;
    text-align: center;
    text-transform: uppercase;
}

.gmap_canvas iframe {
    overflow: hidden;
    background: none !important;
    height: 200px;
    width: 100%;
}

.contact-iocn {
    padding: 5px 0px;
}

.contact-info {
    margin: 15px 0px;
    padding: 15px;
    border: 3px solid tomato;
    border-radius: 0 0 25px 25px;
    text-align: center;
    /* text-transform: uppercase; */
    text-transform: capitalize;
}

.contact-info h4 {
    font-family: monospace;
    font-weight: bold;
    word-spacing: -6px;
    background: rgb(120, 68, 50);
    color: rgb(245, 230, 200);
    padding: 5px 15px;
}

.form input:focus,
.form textarea:focus {
    color: green;
}

.form input,
.form textarea {
    line-height: 35px;
    font-size: large;
    background: var(--light-3);
    color: var(--dark-1);
    outline: 1px solid var(--dark-1);
}

.form .form-row {
    margin: 5px 0px;
}

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

#visitor_counter ul {
    margin-bottom: 0px;
    margin: 0.5rem;
}

#visitor_counter li {
    list-style: none;
    float: left;
    background-color: var(--dark-1);
    padding: 0.3rem 0.5rem;
    border-radius: 0.3rem;
    margin-left: 0.3rem;
    color: #fff;
}

.bg-green {
    background: rgb(203, 243, 184);
}

.bg-light-pink {
    background: rgb(203, 228, 236);
}

.bg-yellow {
    background: rgb(250, 255, 198);
}

/* --light-1: rgb(255, 240, 215);
    --light-2: rgb(245, 230, 200);
    --light-3: rgb(252, 252, 225); */

.bg-zakat-in {
    background: rgb(251, 239, 196);
}

.info-one .zakat-text {
    font-size: 20px;
    padding: 7px;
    text-align: center;
    background-color: var(--dark-2);
    color: var(--light-1);
}

.zakat h4 {
    font-size: 20px;
    text-align: left;
}

.zakat-total h4 {
    font-size: 20px;
    /* text-align: left; */
}

.zakat-total input {
    font-size: 20px;
}

.zakat-total input:read-only {
    background: rgb(255, 218, 138);
    color: black;
}

.result_text {
    font-size: 20px !important;
    margin: 15px 0 0 0;
    line-height: 35px;
}

.a{
    margin: 0;
    font-size: 1rem;
}

.verti-center{
    display: grid;
    align-items: center;
    /* justify-content: center; */
}

.z_note{
    margin: 0;
    color: #570e8d;
    font-size: 0.9rem;
    /* line-height: initial; */
}

#result_amt h4{
    font-size: 1.5rem;
}

#notes{
    text-align: justify;
}