body {

      :root {
        --rose: #D3819A;
        --skyblue: #ACB2B8;
      }

      width: 100vw;
      height:100%;

      font-size:14px;
      font-family:"Roboto" !important;
    }

    html {

      width: 100vw;
      height:100%;

      font-size:14px;
      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;
        font-size: 11px;
        
      }
    }

    __@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;
        font-size: 11px;
        
      }
    }

    __@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: 11px;
        
      }
    }

    __@media (min-width: 1280px)  and (orientation: landscape) {

      body {
        font-size:inherit;
        background-image: url(/images/login_background_2560.png);
      }

      .table, .tabulator, .btn, .form-control, .input-group-text {

          font-size:inherit;

      }
    }
    __@media (min-width: 1280px)  and (orientation: portrait) {
      body {
        font-size:inherit;
        background-image: url(/images/login_background_5120.png);

      }
      .table, .tabulator, .btn, .form-control, .input-group-text {
          font-size:inherit;
      }
    }
    __@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:inherit;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {

        font-size:inherit;

      }
    }
    __@media (min-width: 2560px)  and (orientation: landscape) {
      body {
        background-image: url(/images/login_background_5120.png);
        __font-size:initial;
        font-size: 11px;
      }
      .table, .tabulator, .btn, .form-control, .input-group-text {

        
      }
    }




















@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;
}



    
    
    
    
    
    
    
    
    
    





      :root {
            --rose: #D3819A;
            --skyblue: #ACB2B8;
        }


        .container {
            
            min-height:100%;
            
        }


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


        .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 */
            color:white;
        }
        
        .mdi::before, .mdi-set {
            font-family: "Material Design Icons" !important;
            vertical-align:0px;
        }
        
        span.pagination-info {
            display:none;
        }

        .bootstrap-dialog.type-light .modal-header {

          padding:0.5rem;

        }
        
        .bootstrap-dialog.type-light .bootstrap-dialog-title {
            color:#495057 !important;

        }
        
        .bootstrap-dialog .btn-block {
            width:initial;
        }

        div.card-header {
            font-weight:bold;
        }

        .editable-input,
        .editable-container.editable-inline,
        .editableform .form-control {
            width:100%;
        }

        .form-inline .form-group {
              display:block;
              width:100%;
        }

        .input-group-text,
        .input-group .input-group-text {
            font-weight:bold;
            text-align:left;
        }
        
        .editable-empty {
            color:var(--dark);
            font-style:normal;          
        }
        
        a { color:var(--dark); }
        
        a.editable {
            color:var(--dark) !important;

        }

        .editable-click, a.editable-click, a.editable-click:hover {
          text-decoration: none;
          border-bottom: dashed 1px var(--dark);
        }
        
        table thead th {
            font-size:normal;
            font-weight:normal;
            color:#000000;
        }

        table thead th.smaller {

            font-size:small !important;

        }
        
        .bootstrap-table .fixed-table-container .fixed-table-header .table thead th,
        .bootstrap-table .fixed-table-container .table thead th {

            vertical-align:middle !important;

        }


        .bootstrap-table .fixed-table-container .table thead th .th-inner {

            padding-top: .25rem !important;
            padding-bottom: .25rem !important;
            vertical-align:middle !important;

        }

        .bootstrap-table .fixed-table-container .table {

            border:0px !important;
        }

        .bootstrap-table .fixed-table-container .table thead th:first-child,
        .bootstrap-table .fixed-table-container .fixed-table-header .table thead th:first-child {

            border-radius:.25rem 0 0 0  !important;
            border:solid #ececec 0px  !important;
            border-collapse:separate  !important;

        }

        .bootstrap-table .fixed-table-container .table thead th:last-child,
        .bootstrap-table .fixed-table-container .fixed-table-header .table thead th:last-child {

            border-radius:0 .25rem 0 0  !important;
            border:solid #ececec 0px  !important;
            border-collapse:separate  !important;

        }

        .bootstrap-table .fixed-table-container .table thead th,
        .bootstrap-table .fixed-table-container .fixed-table-header .table thead th  {

            background-color:#ececec !important;
            border:solid #ececec 0px  !important;

        }

        .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;
        }

        .modal .modal-header {

          padding:0.5rem;


        }

        .tabulator {

            font-size:14px !important;

        }

        .tabulator .tabulator-header {

            font-size:13px;

        }

        .tabulator-footer .tabulator-cell {
            height:40px !important;

        }