/* 
    Created on : 29.03.2022, 10:47:43
    Author     : Aleksei Patoka
*/


body{    
    /*height: 200px;  You must set a specified height */
    background: url(images/20150720_113204_colorize.jpg) no-repeat bottom  center fixed;      
    background-size: cover; /* Resize the background image to cover the entire container */  
                /*overflow-y: scroll !important;*/
}





/*            .my-flex-container {
                background-color: antiquewhite;
                display:flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: flex-end;
                flex-wrap: wrap;
                align-content: stretch;
                height: 500px;

            }
            .my-flex-block{
                padding:1em;
                margin:auto;
                border: 1px solid brown;                
            }*/


nav{
    /*z-index: 9998;*/
}

@font-face {
    font-family: Play;
    src: url('fonts/Play-Regular.ttf');
    /*src: url('fonts/Play-Regular.ttf');*/
    /*src: url('fonts/Nunito-VariableFont_wght.ttf');*/
    font-family: PlayBold;
    /*src: url('fonts/static/NotoSans-Regular.ttf');*/
    src: url('fonts/Play-Bold.ttf');
}

* {
    font-family: 'Play';
    font-weight: 500;
}



.logo {
    text-shadow: 3px 3px 3px #ababab;
    /*text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 30px #FCC036, 0 0 10px #FCC036, 0 0 10px #FCC036, 0 0 10px #FCC036, 0 0 10px #FCC036*/

}

h2, h3, .logo {
    /*font-family: 'RubikMarkerHatch', cursive;*/
    font-family: 'PlayBold';
}

.logo-icon{
    width: 25%;
    height: 25%;
    padding-right:1.5%;
    padding-bottom: 4%;
}


header{
    position: sticky;
    /*background: whitesmoke;*/
    top: 0;
    /*border-bottom: 1px dashed gray;*/
    margin-top: 1em;
    padding-top: 0.75em;
    z-index: 1;
    background: rgb(237,237,237);
    /*    background: linear-gradient(180deg, rgba(237,237,237,0.9640056706276261) 40%, rgba(249,249,248,0.8855742980786064) 99%);*/
    background: linear-gradient(180deg, rgba(237,237,237,0.99) 40%, rgba(249,249,249,0.98) 99%);
}

.roundedFlags{
    border-radius:50%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.9);
}

modalless{
    top:10%;
    left:50%;
    bottom:auto;
    right:auto;
    margin-left:-300px;
}

#helpModal{
    z-index: 9999;
}

figcaption{
    /*color:blue;*/
    /*font-style: oblique;*/
    font-size: 0.80em;
    /*font-style: italic;*/
    font-weight: 600;
}

#salarySection{
    /*background: #EDEDED;*/
}

.bold{
    font-weight: bold;
}
.ul-wrapper{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -0.5em;

}

li{
    display: inline-block;
    font-size: 1.25em;
    text-align: left;
}

#totalIncomeHeader{
    color:blue;
    font-size: 1.07em;
    font-weight: bolder;
    margin-right:1em;
}

#totalExpenseHeader{
    /*color:red;*/
    color:#A60000;
    font-size: 1.07em;
    font-weight: bolder;
    margin-right:1em;
}

#balanceHeader{
    color:green;
    font-size: 1.07em;
    font-weight: bolder;
}

.content{    
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.75);
}

input[type="checkbox"] { 
/*            border-color: black;*/
            box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
            border-radius: .25rem;
            width: 1.35em; 
            height:1.35em; 
        } 


.salary-input-margin{
    margin: 0.50em 0em 0.50em 0;
}



.question{
    padding-left: 0.25em;
    display:inline;
}

.help-list-item{
/*    background:#DCDCDC !important;    */    
    /*background:#F8F8FF !important;*/    
    /*background:#F5F5F5 !important;*/        
    background: #efefef !important;            
    border: 1px solid #dcdcdc !important;
    margin-bottom: 0.5em !important;
    border-radius: .25rem !important;
}

.tooltip-custom {
    --bs-tooltip-bg: #FCC925 !important;
    --bs-tooltip-color: black !important;
    --bs-tooltip-opacity: 0.98 !important;
    --bs-tooltip-font-size: 1em !important;
}

.close-icon{
    /*padding-right:1em;*/
    /*color:#696969;*/
    color:darkred;
    cursor:pointer;
}

.close-icon:hover{
    color:red;
}

.add-icon{
    color:green;
    cursor: pointer;
}

.add-icon:hover{
    color:darkgreen;
}

vertical-border{
    border-right:1px solid black;
}


#accordionOvertime{
    /*width:500px;*/
    margin-bottom: 1em;
}


#overTimeFields{
    display: none;
}
.income-expense-table{
    /*display:flex;*/
    /*grid-template-columns: 1fr 1fr;*/
    /*grid-template-rows: 1fr;*/
    /*flex-direction:column;*/
    /*align-items: flex-start;*/
    /*                margin-left: auto;
                    margin-right: auto;*/
    /*display:inline;*/
    /*margin:auto;*/
    /*width:50%;*/
}

.incomeExpenseTitleCell{
    min-width:170px;
}

.incomeExpenseAmountCell{
    min-width:100px;
}

h1{
    display: flex;
    flex-direction: column;
    /*background: gainsboro;*/
    padding-top: 0.10em;
    padding-bottom: 0.10em;
}

h3,h4{
    text-align: center;
}


.table-wrapper{
    display:inline-block;
    /*background: antiquewhite;*/
    /*text-align: justify;*/
    text-align: center;
    margin-bottom:1em;
}

#income-table{
    display:inline-block;
    vertical-align:top ;
    text-align: justify;
    padding:0.75em;

    /*float:left;*/
}

#expense-table{
    display: inline-block;
    vertical-align:top ;
    padding:0.75em;
    text-align: justify;
    /*float:right;*/
}

.summary{
    text-align: center;
    /*                    position:fixed;
                        bottom:0;*/
    padding:1em;
    background: ghostwhite;
    font-size: xx-large;
    font-weight: bold;
    /*border-top: 1px gray solid;*/
    margin: 5px;
    /*display:inline;*/

}

#bottom-menu{
    font-size: larger;
}

#balance{
    color:green;
}

.income-summary{
    font-size: 1.26em;
    font-weight: bold;
}

.expense-summary{
    font-size: 1.26em;
    font-weight: bold;
}

.autosave{
    font-size: 1.25em;
    font-weight: 700;
}