body {
      width: 100vw;
      height:100%;
      
      font-family:"Roboto" !important;
      
      /* picture for a device-width between 0 and 640px in landscape-mode */
      background-image: url(/images/login_background_640.png);
      background-repeat:  no-repeat;
      background-position: center center;
      background-size: cover;
      background-color:white;
      /* change  */
      background-attachment: fixed;
      /* to  */
      /* position: fixed; */
      /* if your style is not added to body */
    }
    
   
    @media (min-width: 1px) and (max-width:550px) and (orientation: landscape) {
      .container {
        background-image: none;
        font-size:smaller;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:x-small;
        
      }
    }
    @media (min-width: 1px) and (max-width:550px) and (orientation: portrait) {
      .container {
        background-image: none;
        font-size:smaller;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:x-small;
        
      }

        
    }
    @media (orientation: portrait),
           (-webkit-min-device-pixel-ratio: 1.5),
           (min-resolution: 144dpi) {
      
      body {
        background-image: url(/images/login_background_1280.png);
      }
    }
    @media (min-width: 550px) and (orientation: landscape) {
      body {
        background-image: url(/images/login_background_1280.png);
        font-size:smaller;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:inherit;
        
      }
    }
    @media (min-width: 550px) and (orientation: portrait) {
      body {
        background-image: url(/images/login_background_2560.png);
        font-size:inherit;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:inherit;
        
      }
    }
    @media (min-width: 550px) and (-webkit-min-device-pixel-ratio: 1.5),
           (min-width: 550px) and (min-resolution: 144dpi) {
      
      body {
        background-image: url(/images/login_background_2560.png);
        font-size:inherit;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:inherit;
        
      }
    }
    @media (min-width: 1280px)  and (orientation: landscape) {
      body {
        background-image: url(/images/login_background_2560.png);
        font-size:initial;
      }
     .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:initial;
        
      }
    }
    @media (min-width: 1280px)  and (orientation: portrait) {
      body {
        background-image: url(/images/login_background_5120.png);
        font-size:initial;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:initial;
        
      }
    }
    @media (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5),
           (min-width: 1280px) and (min-resolution: 144dpi) {
      
      body {
        background-image: url(/images/login_background_5120.png);
        font-size:initial;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:initial;
        
      }
    }
    @media (min-width: 2560px)  and (orientation: landscape) {
      body {
        background-image: url(/images/login_background_5120.png);
        font-size:initial;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
        
        font-size:initial;
        
      }
    }




















@font-face {
    font-family: 'Roboto';
    src:  local('Roboto'), url('/fonts/Roboto-Regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url('/fonts//Roboto-Italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url('/fonts//Roboto-Bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url('/fonts//Roboto-BoldItalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed'), url('/fonts//Roboto-Condensed-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed'), url('/fonts//Roboto-CondensedItalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed'), url('/fonts//Roboto-BoldCondensed-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed'), url('/fonts//Roboto-BoldCondensedItalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Thin';
    src: local('Roboto Thin'), url('/fonts//Roboto-Thin-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Thin';
    src: local('Roboto Thin'), url('/fonts//Roboto-ThinItalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;

}

@font-face {
    font-family: 'Roboto Light';
    src: local('Roboto Light'), url('/fonts//Roboto-Light-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'Roboto Light';
    src: local('Roboto Light'), url('/fonts//Roboto-LightItalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;

}

@font-face {
    font-family: 'Roboto Medium';
    src: local('Roboto Medium'), url('/fonts//Roboto-Medium-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'Roboto Medium';
    src: local('Roboto Medium'), url('/fonts//Roboto-MediumItalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;

}

@font-face {
    font-family: 'Roboto Black';
    src: local('Roboto Black'), url('/fonts//Roboto-Black-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Black';
    src: local('Roboto Black'), url('/fonts//Roboto-BlackItalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}



    
    
    
    
    
    
    
    
    
    
    







        .container {
            
            min-height:100%;
            
        }


        .spinner {
            display: block;
            position: fixed;
            z-index: 9999; /* High z-index so it is on top of the page */
            top: 50%;
            right: 50%; /* or: left: 50%; */
            margin-top: -10px; /* half of the elements height */
            margin-right: -10px; /* half of the elements width */
        }
        
        .mdi::before, .mdi-set {
            font-family: "Material Design Icons" !important;
            vertical-align:0px;
        }
        
        span.pagination-info {
            display:none;
        }
        
        .bootstrap-dialog.type-light .bootstrap-dialog-title {
            color:#495057 !important; 
        }
        
        .bootstrap-dialog .btn-block {
            width:initial;
        }

        div.card-header {
            font-weight:bold;
        }
        
        .input-group .input-group-text {
            font-weight:bold;
        }
        
        .editable-empty {
            color:var(--black);
            font-style:normal;          
        }
        
        a { color:black; }
        
        a.editable { color:var(--black) !important; }
        
        table thead th {
            background-color:var(--light);
            font-weight:normal;
        }
        
        table tbody td a {
        } 

        .modal.modal-fullscreen .modal-dialog {
            width: 98vw;
            height: 98vh;
            margin: 0;
            padding: 0;
            max-width: none; }

        .modal.modal-fullscreen .modal-content {
            width: 98vw;
            height: 98vh;
            border-radius: 0;
            border: none; 
        }

        .modal.modal-fullscreen .modal-body {
            overflow-y: auto; 
        }
        
        .modal.modal-fullscreen .close {
            margin-right:5px;
        }

        .modal.modal-fullscreen .modal-body {
            overflow-y: auto; 
        }
        
                        
        body.modal-open {
            overflow: hidden !important;
        }