/** -------------------------------------------------------------------------------------

        GLOBAL STYLES FOR OBJECTS DEFINED ON GRIEL.MASTER 
                
        screen sizes:
            x-small: up to 576 px
            small:   577 - 768 px
            medium:  769 - 992 px
            large:  993 - 1200 px
            x-large: larger than 1200 px
                        
----------------------------------------------------------------------------------------- */


/**
    Global variables
*/

:root {
    /* screen limits */
    --screen-x-small: 576px;
    --screen-small: 768px;
    --screen-medium: 992px;
    --screen-large: 1200px;
    /* colors */
    --main-bg-color: transparant !important;
    /* font */
    --main-font-family: Verdana, sans-serif;
    /* sizes */
    --basic-font-size: 14pt;
    --basic-line-height: 1.4;
}



body {
    padding: 0px;
    background-color: var(--main-bg-color);
    font-family: var(--main-font-family);
    font-size: var(--basic-font-size);
    line-height: var(--basic-line-height);
}

/* MasterPage = body of Griel.Master! */
.MasterPage {
    margin: 0;
}

@media (min-width: var(--screen-medium)) {
    .MasterPage {
        margin: 15px;
    }
}

.MasterPage form {
    /*height: 97%;*/
}

.PageBody {
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-bottom: 0;
}

#MainContent {
    /*min-height: 725px;*/
    margin-left: 10px;
    padding: 20px 15px 10px 5px;
    overflow-x: hidden;
}

#PageFooter {
    color: #333;
    background-color: #f5f5f5;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    padding: 15px;
}

#Loader {
    height: 120px;
    width: 250px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none;
}

    #Loader .body {
        height: auto;
    }

/*@media(min-width: 576px) {
    #Loader {
        height: 120px;
        width: 250px;
        left: 40%;
        top: 20%;
        position: absolute;
        text-align: center;
        display: none;
    }
}*/

#Loader2 {
    height: 140px;
    width: 250px;
    left: 40%;
    top: 20%;
    position: absolute;
    text-align: center;
    display: none;
}

@media(min-width: 576px) {
    #Loader2 {
        height: 140px;
        width: 250px;
        left: 20%;
        top: 20%;
        position: absolute;
        text-align: center;
        display: none;
    }
}

/*   Make sure the text of next and prev icons in datepicker are not visible    */
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    color: transparent;
}