@import url("fonts.css");

html{
        font-family         : Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        font-size           : 17px;
        background-color    : #f3f2f2;
        color               : #3e3f3f;
}

body{
        padding             : 0px;
        margin              : 0px;
}

div{
        box-sizing          : border-box;
}

.main_body{
        width               : calc(100% - 40px); 
        min-height          : calc(100% - 40px); 
        overflow            : visible;
        margin              : 20px auto 20px auto;
        padding             : 0px;
}

.main_header{
        width               : 100%; 
        min-height          : 120px;
        margin              : 0px;
        padding             : 5px 5px 5px 230px;
        background-image    : url("../img/logo.png");
        background-size     : 170px;
        background-position : 20px 10px;
        background-repeat   : no-repeat;
        background-color    : #0d47a1;
        color               : #ffffff;
}

.main_header h1{
        margin              : 35px auto auto 0px;
        font-weight         : normal;
}

.main_header h2{
        /* Let it take default h2 settings */
}

.main_header h3{
        /* Let it take default h3 settings */
}

.main_content{
        width               : 100%; 
        margin              : 20px 0px 20px 0px;
        padding             : 10px;
        background-color    : #ffffff;
        box-shadow          : 0px 1px 1px #888888;
}

.main_content h2{
        color               : #0d47a1;
        font-weight         : normal;
}

.main_content h3{
        font-size           : 23px;
        font-weight         : normal;
}


.main_footer{
        width               : 100%; 
        height              : 10px;
}

@media(max-width: 900px){

        .main_body{
                width               : calc(100% - 20px); 
                min-height          : calc(100% - 20px); 
                margin              : 10px auto 20px auto;        
        }
        
        .main_header {
                min-height          : 80px;
                padding             : 5px 5px 5px 90px;
                background-size     : 60px;
                background-position : 10px;
                background-repeat   : no-repeat;
        }
        
        .main_header h1{
                margin              : 25px auto auto 0px;
                font-size           : 20px;
        } 

        .main_header h2{
                margin              : 20px auto auto 0px;
                font-size           : 17px;
        }        
        
        .main_header h3{
                margin              : 15px auto auto 0px;
                font-size           : 14px;
        }                
        
        .main_content{
                margin              : 10px 0px 10px 0px;
        }        
}

/* xxxxxxxxxxxxxxxxxxxxx GENERAL CLASSES xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

table td{
    
        padding             : 10px;
}

/* xxxxxxxxxxxxxxxxxxxxx MISCELLANEOUS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.clear-both{
    clear           : both;        
    float           : left;
}

.clear-both-right{
    clear           : both;        
    float           : right;
}

.spinner{
    width           : 27px;
    height          : 27px;
    padding-left    : 5px;
}

.highlight{
    background-color: yellow;
}

.hide{    
    display         : none;
}

.show{    
    display         : block;
}

@media print {
    .no_page_break {
        page-break-inside: avoid;
    }

    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }    
}

.blinking_slow{
	animation:blinkingText 0.8s infinite;
}

.blinking_fast{
	animation:blinkingText 0.4s infinite;
}

@keyframes blinkingText{
	0%  {	color:  #fff;           }
        30%  {	color:  #fff;           }
	50% {	color:  transparent;	}
	70% {	color:  #fff;	}
	100%{	color:  #fff;           }
}

.ui-datepicker{
    font-size: 15px;
}

#grey_filter_screen{
        display             : none;
        position            : fixed;
        top                 : 0px;
        left                : 0px;
        width               : 100vw;
        height              : 100vh;
        background-color    : rgba(0, 0, 0, 0.6);
        z-index             : 0;            /*This is it's default z-index. At the time of displaying this grey filter, I will set its z-index to just below the element that I wish to display */
}