:root{
    --color-1:purple;

}
body
{
    color:var(--color-1);
    
   

    /*background: round fixed url("images/calendar-100-pen-green-1.jpg") ; */
    /*background: round fixed  url("images/calendar-payday-pen-blue.jpg") ; /* calendar-payday-pen.jpg*/
    font-family: 'Abhaya Libre', serif;
    font-size: 14px;

}

div
{
    padding:5px;
}

.div-central {
    background-color: beige;
}
.block
{
    background: ghostwhite;
    margin: 10px 5px;
}
.block h6, .block h6>a
{
    background: Brown;
    color:bisque;
    padding: 10px 5px ;

}
.block h6 a
{
    text-decoration-line:none ;
} 

#days-pay-info{
    padding:10px;
    margin:5px auto;
}


/* Top Menu*/

#above_menu {
    height:50px;

}

.top-menu {
    background: rgba(215, 147, 70, 0.5);
    box-shadow: 1px 3px 5px black;
    margin-top:32px;
}

#account_menu button
{
    width:max-content;
   
} 

.nav-item{
    animation: all 0.5s;
}
.nav-item:hover{
    background: goldenrod;
    animation: 0.5s all;
}
.nav-item a:hover
{
    color:darkblue;
}


/* Center column*/

#central-div {
    margin: 11px 8px 0 auto;
    background: round fixed url("images/calendar-payday-pen-wide-yellow.jpg") ; 
}

.center-column
{
    box-shadow: 1px 1px 5px Grey;
    border:1px solid Gold;
}

#index-div {
    background:rgba(249, 220, 131, 0.95);
    
}

/* Slider*/
.slide{

    background-color: ghostwhite;
    height: 250px;
   /* padding: 6px 10px ;  causing to stick ourt on bottom */
}
div.carousel-inner{ padding:0;}

.carousel .center {

     padding: 30px 20px; */
}

.carousel-control-prev  .carousel-control-next
        {
            width:5%;
        }

div#slideshow-home{padding:0;}


/*  Payment Table*/

#payments_all tr.current {
    border: 4px solid darkorange;
    
}
#payments_all tr.current.unpaid td
{
	color:white;
}

#payments_all thead {

    background-color: greenyellow;
}

#payments_all tbody{
    background: lavender;
}

#payments_all tr.unpaid {

    background: purple;
    color: ghostwhite;
font-weight: 600;

}


/* Forms common styling */

.form{
    border: 5px dashed yellow;
    background: greenyellow;
    box-shadow: 0px 0px 7px 5px Grey;
}

input:valid{
    border:1px solid black;
}

input:invalid{
    border: 3px solid Red;
    background-color: aqua;
}

.form-floating {
    width:100% !important;
}
/* Signup page */
/* Form*/
#signup {

    padding: 10;
    background-color: rgb(145, 233, 145);
    border-radius: 7px;

}

#signup label{
    font-weight: 500;
}

/* Account styles*/

#account-top {
    background: aquamarine;
}

#form-account{

    border-bottom: 3px solid green;
    margin-bottom: 5px;
}


/* Calendar */

table.calendar .month-row {
    font-size: 28px;
    color:blue;
}
table.calendar tbody td{
    padding: 5px;
    margin: 3px;
    font-size: 18px;
    border:1px solid grey;
    width:55px;

}

table.calendar td.today{
    background-color: aquamarine;
    color:fuchsia;
    font-weight: 700;

}
.regular{

    color:blueviolet;
    

}
.next_payday{
    background-color: greenyellow;
}


/* for small viewport;
 */


@media  (max-width: 640px)
 {
	#left_col {
        display:none;
    }
 
 }

 /* For small  screens  with size less 640px width*/
@media screen and (max-width:640px)
{


        .carousel .center{
            padding: 2px 5px;

        }

        .carousel-control-prev  .carousel-control-next
        {
            width:15px;
        }
}