// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$wkklilaps-primary: mat-palette($mat-indigo);
$wkklilaps-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$wkklilaps-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$wkklilaps-theme: mat-light-theme($wkklilaps-primary, $wkklilaps-accent, $wkklilaps-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($wkklilaps-theme);
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$wkklilaps-primary: mat-palette($mat-indigo);
$wkklilaps-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$wkklilaps-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$wkklilaps-theme: mat-light-theme($wkklilaps-primary, $wkklilaps-accent, $wkklilaps-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($wkklilaps-theme);
.mat-horizontal-stepper-header {
display: block;
height: auto !important;
overflow: hidden;
align-items: center;
padding: 0 15px;
}
.mat-step-header.cdk-keyboard-focused, .mat-step-header.cdk-program-focused, .mat-step-header:hover,
.mat-step-header:focus,   .mat-step-header.cdk-mouse-focused
{
background: none !important;
}
.mat-step-header .mat-step-header-ripple {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
pointer-events: none;
display: none;
}
.mat-horizontal-stepper-header .mat-step-icon {
flex: none;
display: block;
text-align: center;
}
.mat-horizontal-stepper-header {
display: block;
}
.content-header>.breadcrumb {
float: right;
background: transparent;
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
padding: 7px 5px;
position: absolute;
top: 15px;
right: 10px;
border-radius: 2px;
}
.modal-body  .table td {
border-top-width: 0;
}
#graphDiv {
margin: 0 auto;
width: 100%;
display: block;
}
.breadcrumb>li+li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
.text-right{
text-align: right;
}
.form-horizontal .form-group {
margin-right: 0;
margin-left: 0;
display:flex;
}
.progress {
border-radius: 0;
margin-bottom: 15px;
}
.form-control {
height: 32px;
}
.row {
    display: flex !important;
}
:host ::ng-deep bs-datepicker-container, .bs-daterangepicker-container {
z-index: 99999 !important;
position: absolute;
margin-right: 150px !important;
}
bs-datepicker-container, bs-daterangepicker-container {
z-index: 99999 !important;
margin-right: 150px !important;
}
.page-sidebar .primary-nav::-webkit-scrollbar-track-piece {
background-color: #efefef; }
.page-sidebar .primary-nav::-webkit-scrollbar-thumb:vertical {
background-color: #666; }
.page-sidebar .primary-nav::-webkit-scrollbar {
height: 4px;
width: 4px; }
::-webkit-scrollbar-track-piece {
background-color: #efefef; }
::-webkit-scrollbar-thumb:vertical {
background-color: #666; }
::-webkit-scrollbar {
height: 4px;
width: 4px; }
.modal-dialog {
max-width: 600px;
}
@media (min-width: 992px){
.modal-lg, .modal-xl {
max-width: 800px;
}
}
table.jambo_table {
border: 1px solid rgba(221, 221, 221, 0.78);
}
table{
margin-top:10px;
}
.modal-dialog-centered {
display: block;
}
.dual-list .filter{
    margin-bottom: -1px !important;
}
.dual-list div.record-picker{
    border-radius: 0 !important;
}
.table th, .table td {
padding: 0.25rem;
white-space: nowrap;
}
.table > thead 
{
background: #2b4c81;
color: #ffffff;
vertical-align: middle;
}
.table > thead > tr > th {
vertical-align: middle;
}
.check
{
width: 48px;
height: 48px;
border-radius: 50%;
margin-left: -1px;
margin-top: -1px;
}
.box {
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
background-color: #fff;
-webkit-box-shadow: 0px 0px 13px 0px rgba(62, 44, 90, 0.08);
box-shadow: 0px 0px 13px 0px rgba(62, 44, 90, 0.08);
margin-bottom: 1.5rem;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.09);
border-bottom: 1px solid #e0e0e0;
border-radius: 4px;
-webkit-transition: border 500ms ease-out;
transition: border 500ms ease-out;
margin-top: 10px;
}

.box-header.with-border {
border-bottom: 1px solid #f4f4f4;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
}
.box-header>.fa, .box-header>.glyphicon, .box-header>.ion, .box-header .box-title {
display: inline-block;
font-size: 18px;
margin: 0;
line-height: 1;
}
.box-header>.box-tools {
position: absolute;
right: 10px;
top: 10px;
}
.mat-horizontal-content-container {
/*   overflow: auto !important;
padding: 15px 15px 15px 15px;  */
}
.mat-horizontal-stepper-header-container {
white-space: nowrap;
display: flex;
align-items: center;
padding: 15px 0;
}
.mat-step-label-selected {
font-size: 14px;
font-weight: 600;
}
.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
background-color: #1c285a;
color: white;
}
.progress-bar-custom {
background-color: #1c285a;
}
.btn-info {
color: #fff;
background-color: #1c285a !important;
border-color: #1c285a !important;
}
.custombar1 .ui-scrollpanel-wrapper {
border-right: 9px solid #f4f4f4;
}
.custombar1 .ui-scrollpanel-bar {
background-color: #1976d2;
opacity: 1;
transition: background-color .3s;
}
.custombar1 .ui-scrollpanel-bar:hover {
background-color: #1976d2;
}
.panel-custom > .panel-heading {
color: #000;
background-color: #fff;
border-color: #666;
padding: 5px 10px;
font-weight: 600;
height: 30px;
}
.panel-custom .panel-body {
padding: 10px;
}
.n-p-r{
padding-right: 0 !important;
}
#graphDiv .node .label {
text-align: center;
line-height: 19px;
}
.custom-modal-header
{
background: #414862;
border-radius: 3px;
margin-top: -20px!important;
margin: 0 15px;
position: relative;
color: #fff;
box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -6px #414658;   
border-width: 0;   
padding: 12px 15px;
}
.btn-info {
color: #fff;
background-color: #1c285a !important;
border-color: #1c285a !important;
}
.breadcrumb {
padding: 4px 15px !important;
}
.custom-modal-header h4
{
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin: 0;
}
.custom_body{
padding: 15px;
}
/* The Close Button */
.custom-modal-header .close {
color: #ffffff;
position: absolute;
font-size: 18;
font-weight: bold;
opacity: 1;
right: 10px;
top: 5px;
font-weight: 400;
}
.custom-modal-header .modal-title {
margin: 0;
line-height: normal;
color: #fff;
font-size: 17px;
font-weight: 300;
}
.radio-inline, .checkbox-inline {
font-size:12px;
padding-left: 0 !important;
}
.m-t-10{
margin-top:10px;
} 
.pull-right{
float: right;
}
.text-right{
text-align: right;
}
.modal-dialog{
margin: 7.75rem auto !important;
}
.m-r-10{
margin-right:10px !important;
}
.required{
color:#ff0000;
}
.workflow_container ul{
display: table;
width: 100%;
border-bottom: 1px solid #ddd;
margin-bottom: 0;
font-size: 12px;
padding-left:0;
}
.workflow_container ul li{
padding: 5px 4px;
list-style: none;
}
.workflow_container ul:hover {
background: #ddedf7;
color: #000;
cursor: pointer;
}
.stages_container ul li{
list-style: none;
font-size: 12px;
display: block;
vertical-align: middle;
}
.panel-body .list-group{
border-radius: 0;
}
.box-header .box-title {
padding-right: 10px;
}
.form-control {
font-size: 12px;
}
.btn-mini{
padding: 0 3px;
color: #fff;
background: #000;
margin-bottom: 0;
width: 16px;
height: 16px;
line-height: 11px;
display: inline-block;
}
.btn-mini span{
font-size:10px;
}
.headerc2 h5{
font-weight: 500;
}
.stages_container ul li .stage{
display: inline-block;
vertical-align: top;
width: 85%;
}
.stages_container ul li:hover{
background: #ddedf7;
color: #000;
cursor: pointer;
}
.form-group .control-label {
font-size: 12px;
}
.btn_link{
cursor:pointer;
}
.padding-15{
padding:15px;
}
.mat-button.mat-primary[disabled], .mat-button.mat-accent[disabled], .mat-button.mat-warn[disabled], .mat-button[disabled][disabled], .mat-icon-button.mat-primary[disabled], .mat-icon-button.mat-accent[disabled], .mat-icon-button.mat-warn[disabled], .mat-icon-button[disabled][disabled], .mat-stroked-button.mat-primary[disabled], .mat-stroked-button.mat-accent[disabled], .mat-stroked-button.mat-warn[disabled], .mat-stroked-button[disabled][disabled] {
color: rgba(255, 255, 255, 0.26);
}
.ng5-slider .ng5-slider-pointer {
cursor: pointer;
width: 20px !important;
height: 20px !important;
top: -6px !important;
background-color: #0db9f0;
z-index: 3;
border-radius: 16px;
}
.ng5-slider .ng5-slider-pointer:after {
content: '';
width: 8px !important;
height: 8px !important;
position: absolute;
top: 6px !important;
left: 6px !important;
border-radius: 4px;
background: #fff;
}
.modal-header .modal-title .fa, .modal-header .modal-title .fas{

}
.modal-header {

}

ul.ngx-pagination {
    margin: 2px 0;
    white-space: nowrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.ngx-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 4px;
}
.modal-lg-full{
    max-width:90%;
    width:90%;
}
.dropdown-icon{
    font-size: 14px;
    font-weight: 500;
    margin-right: 5px;
}
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu li ul {
overflow-y: auto;
max-height: 65vh;
}
.settings-panel h5 {
font-size: 14px;
}
.settings-panel h6 {
    font-size: 13px;
}
.cdk-overlay-pane{
    width: 95vw !important;
    max-width: 95vw !important;
      }


/*
.content-header {
position: relative;
padding: 15px 15px 6px 15px;
}
.content {
min-height: 250px;
margin-right: auto;
margin-left: auto;
padding: 0 15px;
}
.btn-primary{
background-color: #1c285a !important;
border-color: #1c285a !important;
}
*/