/*@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(100vw - 40px); 
        min-height          : calc(100vh - 40px); 
        margin              : 20px auto 20px auto;
        padding             : 0px;
}

.main_content{
        position            : relative;
        width               : 100%; 
        margin              : 0px;
        padding             : 20px;
        background-color    : #ffffff;
        box-shadow          : 0px 1px 1px #888888;
        /*min-height          : calc(100vh - 243px);*/
}

@media(max-width: 1100px){
    
        .main_body{
                width               : 100vw; 
                min-height          : 100vh; 
                margin              : 0px;
                padding             : 0px;
        }      
}

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

/* 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 */
}

div#marquee{
        position    : fixed;
        top         : 50%;
        left        : 50%;
        transform   : translate(-50%,-50%);
        width       : 600px;
        max-width   : 80%;
        max-height  : 80%;
        text-overflow   : scroll;
        padding     : 10px;
        border-radius   : 5px;
        background-color    : #ffffff;
        display : none;
        border  : 1px solid #000000;
}

div.read_easy,
tr.read_easy td,
td.read_easy{
        background-color    : #eee;
}