@font-face {
    font-family: 'Lato';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Light.woff') format('woff');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    }
    @font-face {
    font-family: 'Lato-Hairline';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-HairlineItalic.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-HairlineItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-Light';
    src:  url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-LightItalic.woff2') format('woff2');
    src:  url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-Heavy';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Heavy.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Lato-Hairline';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Hairline.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Hairline.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Lato-Black';
     src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Black.woff2') format('woff2');
     src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Lato-MediumItalic';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-MediumItalic.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-BoldItalic';
    src:  url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-BoldItalic.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-Regular';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Regular.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Lato-BlackItalic';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-BlackItalic.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-SemiboldItalic';
    src:  url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-SemiboldItalic.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-SemiboldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-Semibold';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Semibold.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Lato-Italic';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Italic.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-Medium';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Medium.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Lato-Bold';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Bold.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Lato-ThinItalic';
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-ThinItalic.woff2') format('woff2');
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-ThinItalic.woff') format('woff');
    
    font-weight: 100;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-HeavyItalic';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-HeavyItalic.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-HeavyItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    }
    
    @font-face {
    font-family: 'Lato-Thin';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Thin.woff2') format('woff2');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Lato-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Helvetica-Bold';
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica-Bold.eot');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica-Bold.eot?#iefix') format('embedded-opentype'),
    url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica-Bold.woff2') format('woff2'),
    url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica-Bold.woff') format('woff'),
    url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica-Bold.ttf') format('truetype'),
    url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica-Bold.svg#Helvetica-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    }
    
    @font-face {
    font-family: 'Helvetica';
    src: url('../fonts/fonts/Helvetica.eot');
    src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica.eot?#iefix') format('embedded-opentype'),
    url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica.woff2') format('woff2'),
    url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica.woff') format('woff'),
    url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica.ttf') format('truetype'),
    url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Helvetica.svg#Helvetica') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    
    @font-face {
       font-family: 'Montserrat-Regular';
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Regular.eot');
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Regular.woff2') format('woff2'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Regular.woff') format('woff'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Regular.ttf') format('truetype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
       font-weight: normal;
       font-style: normal;
    }
    @font-face {
       font-family: 'Montserrat-Bold';
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Bold.eot');
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Bold.woff2') format('woff2'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Bold.woff') format('woff'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Bold.ttf') format('truetype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
       font-weight: bold;
       font-style: normal;
    }
    
    @font-face {
       font-family: 'Raleway-Bold';
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Bold.eot');
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Bold.woff2') format('woff2'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Bold.woff') format('woff'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Bold.ttf') format('truetype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Bold.svg#Raleway-Bold') format('svg');
       font-weight: bold;
       font-style: normal;
    }
    
    @font-face {
       font-family: 'RalewayMedium';
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Medium.eot');
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Medium.eot?#iefix') format('embedded-opentype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Medium.woff2') format('woff2'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Medium.woff') format('woff'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Medium.ttf') format('truetype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Raleway-Medium.svg#Raleway-Medium') format('svg');
       font-weight: 500;
       font-style: normal;
    }
    @font-face {
       font-family: 'BarlowExtraBold';
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Barlow-ExtraBold.eot');
       src: url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Barlow-ExtraBold.eot?#iefix') format('embedded-opentype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Barlow-ExtraBold.woff2') format('woff2'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Barlow-ExtraBold.woff') format('woff'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Barlow-ExtraBold.ttf') format('truetype'),
           url('https://s3.amazonaws.com/peceportal.com/front-end-assets/assets/fonts/Barlow-ExtraBold.svg#Barlow-ExtraBold') format('svg');
       font-weight: 800;
       font-style: normal;
    }
    
   .vpheaderwrapper .menuwrapper .mat-list-item-content{padding:0 !important;} 

.liststyle mat-form-field{
margin: 5px 10px !important;
}

.liststyle tr.mat-header-row{background: #019be3;}
.liststyle tr.mat-header-row th{color: #ffffff;}
.liststyle tr.mat-header-row th span{display: flex; align-items: center;}
.liststyle tr.mat-header-row th span span{display: block;}
.liststyle .singleButton {
   background: #4fbaec !important;
   box-shadow: 0px 4px 4px rgba(0,0,0,0.3) !important;
   font-size: 18px;
   margin: 20px;
   text-transform: uppercase;
   margin-left: 0;
}

.liststyle .mat-card{padding:0;box-shadow: inherit !important;}
.newcontainer{width:1550px; margin:0 auto;}

.liststyle .mat-toolbar-row .mat-form-field-flex{border: 1px solid #ccc;box-shadow: 0px 0px 4px rgba(0,0,0,0.3); border-radius: 5px;    background: #fff;}
.liststyle .mat-toolbar-row .mat-form-field-underline{display: none;}
.liststyle .mat-toolbar-row .mat-form-field-label{transform: inherit !important; padding-left: 8px;}
.liststyle .mat-toolbar-row .mat-form-field-infix{border: 0;    padding: 0;}
.liststyle .mat-toolbar-row input.mat-input-element{height: 30px;padding-left: 8px;}
.liststyle .mat-toolbar-row .mat-select-trigger{height: 36px;}
.liststyle .mat-toolbar-row .mat-form-field-wrapper{
   padding-bottom: 0;
}
.liststyle .mat-toolbar-row .mat-icon-button.mat-button-base{height: 35px;}
.liststyle .mat-toolbar-row .mat-select-value{padding-top: 10px; padding-left: 8px;}
.liststyle .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
   display: none !important;
}
.liststyle .mat-toolbar-row .filterForTexticon{
   background-color: #2c2c2b;
   height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   border-radius: 5px 0px 0px 5px;
}
.liststyle .mat-toolbar-row .filterForTexticon i{margin-left:5px;}
.liststyle .mat-toolbar-row {
   justify-content: center; 
   flex-wrap: wrap;
   padding: 0;
   height: auto;
    padding: 20px 0;
    background: #e0e5eb;
}
.liststyle .mat-toolbar-row .add_button{background-color: #019be3 !important;}
.liststyle tbody tr:nth-child(even){background:#f4fbff;}
.liststyle tbody tr td:nth-last-child(1) .notebtncls {background:#2d2e2f !important; margin: 2px;}
.liststyle tbody tr td:nth-last-child(1) .custombutton0 button {background:#019be3  !important; margin: 2px;}
.liststyle tbody tr td:nth-last-child(1) .custombutton1 button {background:#2d2e2f !important; margin: 2px;}
.liststyle tbody tr td:nth-last-child(1) .custombutton2 button {background:#019be3  !important; margin: 2px;}
.liststyle .lib-pager-class{
   display: flex !important;
    justify-content: center;
    align-items: center;
    float: inherit !important;
}
.addeditstyle form .form-element button{
   border-radius: 0;
    margin-right: 5px;
    font-size: 18px;
    margin-top: 20px;
}
.liststyle .tablewrapper.ng-star-inserted {
   max-width: 100%;
   overflow-y: scroll;
}
.addeditstyle form .form-element button:nth-child(1){background-color: #14a1e2  !important;}
.addeditstyle form .form-element button:nth-child(2){background-color: #3a3a39  !important;}
.addeditstyle form .form-element button:nth-child(3){background-color: #ea4646  !important;}
.addeditstyle form {
   width: 800px;
   display: block;
   margin: 40px auto;
   background-color: #fff;
   padding: 20px;
   box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
   border-radius: 5px;
}

.mainloginmaincontainer .from h2{
   font-family: 'Montserrat-Regular';
   margin: 0;
   text-align: center;
   text-transform: uppercase;
   color: #fff;
   font-weight: normal;
   background: #5197ff !important;
   padding: 10px;
   font-size: 24px;
   border-radius: 10px 10px 0px 0px;
   box-shadow: 0px -3px 9px rgba(0,0,0,0.3);
}
.mainloginmaincontainer .from{padding: 0;width: 460px !important;box-shadow: none !important;
   border-radius: 10px;}
.mainloginmaincontainer .from form{
   padding: 20px;
   box-shadow: 0px 3px 9px rgba(0,0,0,0.3);
}
.mainloginmaincontainer .from form button{
   font-family: 'Montserrat-Bold';
   background: #5197ff !important;
   color: #fff;
   font-size: 18px;
   border: 0;
   padding: 7px;
   width: 100%;
   border-radius: 5px;
   text-transform: uppercase;
   line-height: 24px;
   cursor: pointer;
}

.mainloginmaincontainer .main-div{height: inherit !important;}

.mainloginmaincontainer{
   background: #dadada;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   align-items: center;
   flex-flow: column;
   height: 100%;
}
.logowrapper {
   width: 100%;
   text-align: center;
}
.logowrapper img{
   width: 273px;
   height: auto;
   margin-bottom: 10px;
}


.custom-modalbox .mat-dialog-content{width: 100%;}
.custom-modalbox .mat-dialog-content div.ng-star-inserted {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}


.custom-modalbox .mat-dialog-content div.ng-star-inserted .mat-card .mat-card-header-text {
   margin: 0;
}
.custom-modalbox .mat-dialog-content div.ng-star-inserted .mat-card .mat-card-header .mat-card-title {
   margin-bottom: 5px;
   font-size: 18px;
   line-height: 18px;
}
.custom-modalbox .mat-dialog-content div.ng-star-inserted .mat-card{
   padding: 5px;
    box-shadow: none;
    width: 31.9%;
    border: 1px solid #e0e1e2;
    border-radius: 0;
}

.custom-modalbox .mat-dialog-container{border: 7px solid #019be3;}
.custom-modalbox .mat-dialog-container .material-icons{
   position: absolute;
   right: -10px;
   top: -10px;
   height: 35px;
   width: 35px;
   background-color: #019be3;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
}
.custom-modalbox{    position: relative !important;}


.custom-modalbox.delete-single .mat-dialog-content p{
   margin: 0;
   text-align: center;
   font-size: 18px;
   width: 391px;
}
.custom-modalbox.delete-single .mat-dialog-title {
   margin: 0 0 20px;
   display: block;
   background: #019be3;
   text-align: center;
   color: #fff;
   padding: 10px;
   font-size: 26px;
}
.custom-modalbox.delete-single .mat-dialog-actions{display:inline-block; text-align: center;    width: 100%;}
.custom-modalbox.delete-single .mat-dialog-actions button:nth-child(1){
   background: #019be3;
   color: #fff;
   border-radius: 0;
   box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}
.custom-modalbox.delete-single .mat-dialog-actions button:nth-child(2){
   background: #2d2e2f ;
   color: #fff;
   border-radius: 0;
   box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}

@media only screen and (max-width: 1550px){
   .newcontainer{width:94%;}
}

@media only screen and (max-width: 991px){
   .custom-modalbox .mat-dialog-content div.ng-star-inserted .mat-card{
      width: 31%;
   }
   .addeditstyle form {
      width: 96%;
      padding: 3%;
   }
}


@media only screen and (max-width: 767px){
.custom-modalbox .mat-dialog-content div.ng-star-inserted .mat-card {
    width: 47.6%;
}

}