@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* Loading Google fonts - Ubuntu for H# tags and Istok Web for regular content text, tables, etc. */
@import url('https://fonts.googleapis.com/css?family=Istok+Web:400,700|Ubuntu:400,700&display=swap');

.AppStatus {
    font-size: 16px;
    position: absolute;
    top: 1px;
    left: 4px;
    z-index: 9999;
}

.ribbonButton {
    margin-right: 10px;
}

a:hover {
    color: var(--primary) !important;  /* don't change the color of links when user hovers over them */
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #dc3545;
}

.validation-message {
    color: #dc3545;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}


/* TASK PANEL styles ------------------------------ */

/* Common Tasks Panels ---------------------------- */
.tasks-panel-1 {background: var(--primary); color: #fff; padding: 1em; margin-bottom: 1em; min-height:138px;}
.tasks-panel-1 a:link {color: #fff; }
.tasks-panel-1 a:visited {color: #fff; }
.tile .tasks-panel-1:hover { background: #0047f0;}
.tasks-panel-2 {background: #0e68d2; color: #fff; padding: 1em; margin-bottom: 1em; min-height:138px;}
.tasks-panel-2 a:link {color: #fff; }
.tasks-panel-2 a:visited {color: #fff; }
.tile .tasks-panel-2:hover { background: #147af7;}
.tasks-panel-3 {background: #1b9657; color: #fff; padding: 1em; margin-bottom: 1em; min-height:138px;}
.tasks-panel-3 a:link {color: #fff; }
.tasks-panel-3 a:visited {color: #fff; }
.tile .tasks-panel-3:hover { background: #00B250;}
.tasks-panel-4 {background: #666666; color: #fff; padding: 1em; margin-bottom: 1em; min-height:138px;}
.tasks-panel-4 a:link {color: #fff; }
.tasks-panel-4 a:visited {color: #fff; }
.tile .tasks-panel-4:hover { background: #858585;}

.tile a { text-decoration: none }

.tasks-panel-disabled {background: #a4a4a4; color: #e7e7e7; padding: 1em; margin-bottom: 1em; min-height:138px;}
.tasks-panel-disabled .glyphicon {color: #f7f7f7;}
.tasks-panel-disabled a:link {color: #fff; }
.tasks-panel-disabled a:visited {color: #fff; }

/* /Common tasks panels ---------------------------- */

.panel { margin-bottom: 1.5em;  }
.panel-heading {background: #efefef; color: #fff; font-size: 16px;padding: .8em 1.1em;} 
.panel-body {}

.panel-body, .panel-body-2, .panel-body-3 {padding: 1.5em; }


/* Tabs */

.nav-tabs
{
    margin-bottom:20px;
}

.nav-tabs .nav-item {
	min-width: 135px;
	margin-left: 5px;
}

.nav-link {
	padding: 10px 10px;
}

.nav-tabs .nav-link:hover.active {
    cursor: default !important;
    color: #495057 !important;
}


/* styles used by SyncFusion components */

.e-control {
    font-size: 16px !important;
    font-family: 'Roboto', sans-serif !important;
}

.e-btn, .e-css.e-btn {
    background-color: #fff !important;
    border-color: #ccc !important;
    color: #000 !important;
    font-family: 'univia-pro', sans-serif !important;
    font-family: var(--ff-ss) !important;
    border: 1px solid #aaa !important;
    padding: 6px 15px !important;
    line-height: 1.2 !important;
    transition: all .15s ease-in-out !important;
    font-size: 15px !important;
    border-radius: 0px !important;
    height: 40px;
}

.e-btn.inline-btn {
    height: 31px !important;
}

.e-btn.inline-linkbtn {
    height: 24px !important;
    padding-top: 0px !important;
    padding-bottom: 4px !important;
}

.e-dialog .e-dlg-header-content {
    height: 54px !important;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn
{
    border: none !important;
    margin-right: 5px !important;
}

.e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
    font-size: 20px !important;
}

.e-dialog .e-btn.e-dlg-closeicon-btn:hover, .e-dialog .e-btn.e-dlg-closeicon-btn:focus, .e-dialog .e-btn.e-dlg-closeicon-btn:active {
    background-color: white !important;
}

.e-dialog .e-dlg-header {
    font-size: 18px !important;
    font-weight: 600 !important;
}


.e-btn:hover, .e-css.e-btn:hover {
    background-color: #e1e1e1 !important;
    border-color: #b9b9b9 !important;
    color: #000 !important;
}

.e-progress-btn.e-progress-active {
    background-color: #e1e1e1 !important;
    border-color: #b9b9b9 !important;
    color: #000 !important;
}

.e-progress-btn .e-spinner-pane .e-spinner-inner svg {
    border: 2px solid #333 !important;
    border-top-color: transparent !important;
}

.e-btn.e-primary, .e-css.e-btn.e-primary {
    color: var(--primary) !important;
    background-color: #fff !important;
    border-color: var(--primary) !important;
}

.e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover {
    color: #fff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.e-btn.e-primary:disabled, .e-css.e-btn.e-primary:disabled {
    background-color: #fff !important;
    border-color: #ccc !important;
    color: #ccc !important;
    cursor: not-allowed;
}

.e-btn.e-primary:disabled:hover, .e-css.e-btn.e-primary:disabled:hover {
    background-color: #fff !important;
    border-color: #ccc !important;
    color: #ccc !important;
    cursor: not-allowed;
}

.e-progress-btn.e-primary.e-progress-active {
    color: #fff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg {
    border: 2px solid #fff !important;
    border-top-color: transparent !important;
}

.e-btn.e-success, .e-css.e-btn.e-success {
    color: #00b250 !important;
    background-color: #fff !important;
    border-color: #00b250 !important;
}

.e-btn.e-success:hover, .e-css.e-btn.e-success:hover {
    color: #fff !important;
    background-color: #00b250 !important;
    border-color: #00b250 !important;
}

.e-progress-btn.e-success.e-progress-active {
    color: #fff !important;
    background-color: #00b250 !important;
    border-color: #00b250 !important;
}

.e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg {
    border: 2px solid #fff !important;
    border-top-color: transparent !important;
}

.e-btn.e-danger, .e-css.e-btn.e-danger {
    color: #ec1c24 !important;
    background-color: #fff !important;
    border-color: #ec1c24 !important;
}

.e-btn.e-danger:hover, .e-css.e-btn.e-danger:hover {
    color: #fff !important;
    background-color: #ec1c24 !important;
    border-color: #ec1c24 !important;
}

.e-progress-btn.e-danger.e-progress-active {
    color: #fff !important;
    background-color: #ec1c24 !important;
    border-color: #ec1c24 !important;
}

.e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg {
    border: 2px solid #fff !important;
    border-top-color: transparent !important;
}

.e-btn.e-link {
    color: var(--primary) !important;
    border: none !important;
    background-color: transparent !important;
    font-size: 16px;
}

.e-btn.e-link:hover {
    cursor: pointer;
    text-decoration: underline !important;
    color: var(--primary) !important;
    background-color: transparent !important;    
}

.e-tbar-btn {
    background-color: transparent !important;
}

.e-delete-icon::before {  
    content: '\e773' !important; 
    color: var(--primary) !important;
    font-size: 18px !important;
}

.e-upload-icon::before { 
    content: '\e769' !important; 
    color: var(--primary) !important; 
    font-size: 18px !important; 
}

.e-edit-icon::before {  
    content: '\e78f' !important; 
    color: var(--primary) !important;
    font-size: 18px !important;
}

.e-btn.e-link:disabled, .e-css.e-btn.e-link:disabled
{
    color: #ccc !important;
    text-decoration: none !important;
    cursor: not-allowed;
}

.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on, .e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    background-color: var(--primary) !important;
    color: #fff;
}

.e-switch-wrapper .e-switch-on, .e-css.e-switch-wrapper .e-switch-on {
    background-color: var(--primary) !important;
    color: #fff;
}

.e-radio:checked+label::before {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    background: var(--primary) !important;
    cursor: default !important;
}

.e-pager .e-numericitem {
    color: var(--primary) !important;
    font-weight: bolder !important;
}

.e-pager div.e-icons {
    color: var(--primary) !important;
}

.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.e-grid {
    border-left-width: 0px !important;
    border-right-width: 0px !important;
}

.e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 {
    stroke: var(--primary) !important;
}

.e-grid .e-filtered::before {
    color: var(--primary) !important;
}

 /* Customized the Excel Export toolbar button  */
.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 2px;
}
.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
    padding: 5px !important;
    border: none !important;
}
.e-toolbar .e-tbar-btn .e-tbar-btn-text {
    font-size: 15px !important;
    padding-left: 0px !important;
    color: var(--primary) !important;
}
.e-toolbar .e-tbar-btn.e-btn .e-icons {
    color: var(--primary) !important;
}

/* End SyncFusion component styles */ 


/* Bootstrap styles */

    .text-primary {
    color: #0039c1 !important;
}


    .text-decoration-underline {
        text-decoration: underline;
    }


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.scrollup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 100000;
    /*width: 10px; height: 10px;*/
}



/*  Google Material Icons */

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.e-grid .e-gridcontent, .e-grid .e-gridheader {
    border-left: 1px #dee2e6 solid;
    border-right: 1px #dee2e6 solid;
}
/*.e-pager.sf-pager .e-numericcontainer a{
    color:#ffffff !important;
}*/