/* ----------- Saumya Chakraborty --------- */
 /* Liblisting List in FAQ category and FAQ listing */

.fm-container lib-listing .module_imgblock{background-color: transparent!important; width: 20px;}
.fm-container lib-listing mattooltip {background: #252728 !important;}
.fm-container .mat-form-field-appearance-legacy .mat-form-field-wrapper { padding-bottom: 0.25em;}
.fm-container lib-listing .mat-checkbox-frame {border-color: white !important;}
.fm-container lib-listing .actionbuttonwrapper { display: flex !important;}
.fm-container lib-listing .mat-checkbox-inner-container {margin-left: 5px !important;}
.fm-container lib-listing .mat-select-arrow-wrapper{ top: -3px!important; position: relative!important;}
.fm-container lib-listing .mat-select-arrow {color: white !important;}
.fm-container lib-listing .mat-select-value {color: rgba(255, 255, 255, 0.87) !important;}
.fm-container lib-listing .mat-raised-button {  background-color: #ffa800 !important; padding: 10px !important; color: white !important; margin: 5px  !important;}
.fm-container lib-listing .mat-toolbar-row, .mat-toolbar-single-row { justify-content: center !important; padding: 10px !important;}
.fm-container lib-listing .searchbar { display: flex !important; background: #181717 !important; height: auto !important; border-radius: 5px !important; flex-wrap: wrap; border: solid 1px rgb(61 62 62) !important;   }
.fm-container lib-listing .searchbar .searchbtncls { width: auto !important; display: flex !important; top: 4px; left: 0px; position: relative; justify-content: center !important;}
.fm-container lib-listing .mat-input-element { margin-left: 15px !important}
.fm-container lib-listing .searchbar .searchbtncls .cursor { background: #ff7e00; padding: 5px; border-radius: 20px; margin: 5px; top: 8px; position: relative;}
.fm-container lib-listing .searchbar .mat-form-field-underline{display: none;}
/* .fm-container lib-listing .lib-pager-class {display: flex !important; justify-content: center !important; align-items: center !important; float: none !important; clear: none !important;} */
.fm-container lib-listing .mat-table{ box-shadow: none !important; border: solid 2px rgb(61 62 62) !important;}
.fm-container lib-listing { width: 95% !important; margin: 10px auto !important; padding: 0 !important;} 
.fm-container lib-listing .tablewrapper{ border: 0 !important; background: none !important; padding: 0 !important; margin: 0!important;}
.fm-container lib-listing .mat-form-field{ padding: 4px; width:400px; flex: 1 15%;}
.fm-container lib-listing .mat-form-field-appearance-legacy .mat-form-field-label{ top: 14px !important; color: white !important;}
.fm-container lib-listing  .mat-form-field-should-float .mat-form-field-label  {top:20px !important; color: #ffffff !important; display: none !important;} 
.fm-container lib-listing .mat-datepicker-toggle-default-icon { color: white !important; top: -3px!important; position: relative!important;}
.fm-container lib-listing .searchbar .mat-form-field-flex{ left: -9px !important; padding: 4px !important; border: 2px solid  #ff7e00 !important; color: white !important; background: rgb(0, 0, 0)!important; }
.fm-container lib-listing .pageformfield .mat-form-field-flex { border: 1px solid rgb(199, 199, 199) !important; padding: 2px; color: white !important; text-align: left !important;}
.fm-container lib-listing .container .mat-card{box-shadow: none !important; background: #252728!important; border-radius: 0; color: white;}
.fm-container lib-listing .lib-pager-class {margin: 15px 0 !important; color: white !important;}
.fm-container lib-listing .lib-pager-class .mat-form-field { width: 60px !important; margin: 5px !important; text-align: center !important;}
.fm-container lib-listing  tr.mat-footer-row, tr.mat-row { height: auto !important;}
.fm-container lib-listing .multipledeleteandupdatebuttan { top: 61px !important; position: relative; left: 12px !important;}
.fm-container lib-listing .tablewrapper .mat-header-row { background: #ff7e00 !important; color: white !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px;}
.fm-container lib-listing .tablewrapper .mat-header-row .mat-header-cell .ng-star-inserted{ font-size: 18px !important; color: white !important;}
.fm-container lib-listing .tablewrapper .mat-header-row .mat-header-cell .mat-checkbox-inner-container .mat-checkbox-frame{ border: 1px solid white;}
 .custom-modalbox .maindialognew {padding: 25px !important; border:0px !important; position: relative;     background: #1e1c1c!important; color: white!important;}
 .mat-dialog-actions .mat-button-base { margin-left: 8px;padding: 15px; background: linear-gradient(#ffa800, #ff7e00) !important; color: white !important;}
.fm-container lib-listing .noFoundText { margin: 150px 0 120px 0 !important; text-align: center;}
.fm-container lib-listing .pageformfield .mat-form-field-label-wrapper .mat-form-field-label { display:none !important; }
.fm-container lib-listing .navideo{     background: url(../images/not-found.png) center !important; font-size: 0px; background-size: 64% !important; background-repeat: no-repeat !important; padding: 16px !important; display: block !important; width: 110px; }

/* ------------ Thumbnail ------------------- */
.fm-container lib-listing .module_videoblock .videothumbnailcls {background: transparent; position: absolute; width: 50px !important; top: 14px; left: 26px;}
.fm-container lib-listing .videovicls{cursor: pointer !important;}
.fm-container lib-listing .module_videoblock {cursor: pointer !important;}
 videoplayer .closemodal{ cursor: pointer; padding: 15px; background: #ff7e00; color: white !important; font-size: 15px !important; border-bottom-left-radius: 30px !important; position: absolute; top: 0px; border: 0px; z-index: 1; right: 0;}

.faqfaqmanagelist .mat-dialog-container{ overflow: hidden !important; position: relative !important;}    
/* ----------------------------------------- */

 /* ----- Custom buttons in listing --------- */
.fm-container lib-listing .answer button { background: url(../images/listingviewicon.png) no-repeat center center!important; min-width:inherit !important; background-size: 85% !important; box-shadow: none !important; height: 25px !important; top:1px !important; width:28px !important;} 
.fm-container lib-listing .answer button .mat-button-wrapper {display: none !important;}
.fm-container lib-listing .answer {display: inline-block !important; height: 25px !important; width:35px !important;}
/* .fm-container lib-listing .youtube button { background: url(../images/youtube.png) no-repeat center center!important; min-width:inherit !important; background-size: 85% !important; box-shadow: none !important; height: 25px !important; top:1px !important; width:25px !important;} 
.fm-container lib-listing .youtube button .mat-button-wrapper {display: none !important;}
.fm-container lib-listing .youtube {display: inline-block !important; height: 25px !important; width:35px !important;} */
    /* ---------- End here --------- */

.fm-container lib-listing .button_div_custom_cls {display: flex !important;}
.fm-container lib-listing .cursor{ top: 3px !important;  position: relative !important; margin-left: 5px !important;}
.fm-container lib-listing .searchbar .searchbtncls .cursor {color: white !important;}
.fm-container lib-listing .float-right{float: none !important;}
.fm-container lib-listing .add_button{ box-shadow: none !important; background: url(../images/srch.png), #ff7e00 !important; font-size: 0 !important; background-size: 50%, cover !important; top: -9px !important; width: 35px !important; background-repeat: no-repeat !important; background-position: center center !important; padding: 0px !important; border-radius: 100px !important; height: 35px !important;  min-width: inherit; }
.fm-container lib-listing table tr:nth-of-type(even){ color: #ffffff !important; background-color: #1e1c1c; border: 1px solid #d0d0d0!important;}
.fm-container lib-listing table tr:nth-of-type(odd){ border: 1px solid #d0d0d0!important; background-color: #3a3e3f !important;}
.fm-container lib-listing table .mat-cell{ color: white !important; font-size:17px !important;}
 .mat-bottom-sheet-container .mat-list-base{ display: flex !important; justify-content: center !important; padding: 10px!important; justify-items: center !important; }
 .mat-bottom-sheet-container .mat-list-base .mat-list-item-content{background: linear-gradient(#ffa800, #ff7e00) !important; border-radius: 4px !important; color: white !important; padding: 15px !important; width: 90% !important;}
 .mat-bottom-sheet-container .mat-list-base .mat-list-item {width: 100px !important;}
 .fm-container lib-listing .CustomButtonListen_div {display: none !important;}
 .fm-container lib-listing .buttonSearchDatacls_div {display: none !important;}
 .fm-container lib-listing .mat-checkbox-checked.mat-accent .mat-checkbox-background{background: #ff7e00 !important;}
 .fm-container lib-listing .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { background: #000000 !important;}

 /* ############### pagination in lib listing list ############ */
.lib-pager-class .pageformfield .mat-form-field-wrapper {padding-bottom: 0px !important;}
.lib-pager-class .mat-form-field-infix {border-top: 0 !important;}
.lib-pager-class .mat-form-field-underline{display: none !important;}
/* ############################################################ */

/* ###################### Video Popup Modal ################ */

.fm-container lib-listing .mat-dialog-container lib-youtubeplayer .closemodal{position: relative !important; top: 0 !important;}

 /* ############### FAQ Modal ############## */

 faqmodal .mat-dialog-title{ display: block !important; background: linear-gradient(#ffa800, #ff7e00) !important; color: white !important; padding: 8px !important; font-size: 31px !important; text-align: center !important;}
 faqmodal .mat-dialog-content::-webkit-scrollbar{width: 5px !important;}
 faqmodal .mat-dialog-content::-webkit-scrollbar-thumb { background: #ff7e00;  border-radius: 10px;}
 faqmodal .mat-dialog-actions {display: flex !important;  justify-content: center !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important;}
 faqmodal .mat-button{ color: white !important; background: linear-gradient(#272727, #070706) !important; padding: 10px 15px !important; font-size: 18px !important; align-items: center !important; }
 faqmodal  mat-card { box-shadow: none !important;}
 faqmodal .mat-dialog-content { padding: 24px !important; }

 .mat-dialog-title{ display: none !important;}
 .mat-dialog-content { padding: 24px !important; }

 /* ############## Delete Confirmation Modal ########### */
.mat-dialog-container { border: 5px solid #ff7e00; min-width: 570px; padding: 0px; background: #1e1c1c!important; color: white !important; font-size: 22px; text-align: center;}
.custom-modalbox .maindialognew .close-btn-modal{ float: right; cursor: pointer; padding: 10px; background: #ff7e00; color: white; border-bottom-left-radius: 25px; top:0px; right: 0px; position: absolute;}
.mat-dialog-content{margin: 0 !important; }
.mat-dialog-container mat-card{ background-color: transparent !important; color: white !important; padding: 0 !important;}
.mat-dialog-actions .mat-button-base{ min-width: 102px  !important;}
.mat-dialog-actions { justify-content: center !important; align-items: center !important; margin-bottom: 0 !important;}
.mat-dialog-container{ padding: 0 !important;}
dialogbox{padding: 26px; display: block;}


 /* #########################  Liblisting form  ##################### */
 .fform .filesid{color: white; display: flex; flex-direction: column; justify-content: center; text-align: center; justify-items: center; margin: 10px 0 0 0;}
 .fform .filesid h1{margin: 0;}
 .fform .fileuploadcompleteicon{color:#ffa800;}
 .fform .actionbtndiv{ margin: 2px 0 0 0;}
 .fform .actionbtndiv .fileuploadbutton{background-color: #ffa800; margin:5px;}
 .fform .actionbtndiv .deletesinglefilecls{background-color: #ffa800; margin: 5px 0 0 0;}

 .fform{ width: 100%; padding: 20px !important; margin: 20px auto !important; background-color: #3a3e3f !important; display: block;}
 .fform .mat-raised-button{ padding: 16px; margin: 3px; font-size: 18px !important; background: linear-gradient(#ffa800, #ff7e00) !important;}
 .fform .mat-form-field-wrapper .mat-error{
    position: absolute;
    top: 40px !important;
    color: #ff7e00 !important;
}
 .fform .mat-form-field-flex{ border: 1px solid rgb(42, 42, 42); margin: 13px 0 0 0; padding: 5px 15px; background-color: #292c2c !important;} 
 .fform .mat-form-field-underline{display: none;}
 .fform .form_field_status { padding: 10px !important; color: white !important;} 
 .fform .grp2 { display: flex !important; align-items: stretch !important; flex-direction: row !important;}
 .fform .grp2 .form_field_wrapper{ margin: 5px !important; flex: 1 0 auto !important;  }
 .fform .grp3 { display: flex !important; align-items: stretch !important; flex-direction: row !important;}
 .fform .grp3 .form_field_wrapper{ margin: 5px !important; flex: 1 0 auto !important;  }
 .fform .grp3 .form_field_status {   margin: 10px !important; background: #292c2c !important; border: 1px solid #969696; padding: 15px !important;}
 .fform .tablewrapper .mat-header-row .mat-header-cell .ng-star-inserted{ font-size: 18px !important; color: white !important;}
 .fform .mat-checkbox-frame {border-color: white !important;}
 .fform mat-label { color: white !important;}
 .fform .mat-form-field-prefix { color: white !important; top: -3px!important;}
 .fform .mat-select-value-text { color: white !important;}
 .fform .mat-select-arrow { color: white !important;}
 .fform .mat-input-element{ color: white !important;}
 .fform .mat-form-field-appearance-legacy .mat-form-field-label{ top: 14px !important; color: #ffffff !important;}
 .fform .mat-form-field-should-float .mat-form-field-label  {top:20px !important; color: #ffffff !important;} 
 .fform .mat-form-field-infix{ width: auto;}
 .fform .form_field_status { margin: 20px 0 0 0 !important;} 
 .fform .form_field_screenshots{ margin: 30px 0 0 0 !important;}
 .fform .drop{     height: 150px !important; width: 150px !important; background-color: #ff9d00 !important; font-size: 14px !important; text-align: center !important; padding: 15px !important;}
 /* ############## CK Editor ############ */
 .fform  .cke_top{     border-bottom: none!important;  background: #adadad; }
 .fform .cke_toolbar_separator{background-color: #ffa800;}
 .fform  .cke_chrome{ border: none!important;}
 .fform  .cke_combo:after { border-right: 1px solid #292c2c; }
 .fform .cke_bottom{background: #292c2c!important;}
 .fform .cke_bottom *{color: #fff!important;}
 .fform .cke_wysiwyg_frame, .fform .cke_wysiwyg_div {background-color: #292c2c; }
  
 

.fm-container {min-height: 800px !important; padding: 25px !important; background: #252728 !important; margin: 0 auto !important;box-shadow: none !important;border-radius: 0px !important;border-top: 1px solid #646363 !important;}
.mat-bottom-sheet-container{ border: 6px solid  #ff7e00 !important; text-align: center !important; background: #1e1c1c !important;}

.mat-bottom-sheet-container .bottom-sheet-header-toggle{
    padding: 10px !important;
    background: #ff7e00 !important;
    color: white !important;
    margin: none !important;
    width: 100% !important;
    font-size: 1.4em !important;
}

.custom-modalbox .maindialognew .mat-button-base{
    padding: 17px !important;
    background: linear-gradient(#ffa800, #ff7e00) !important;
    color: white !important;
}

.bottom-sheet-header-toggle .navlist {
  display: flex !important;
  flex-direction: column !important;
}


.bottom-sheet-header-toggle .navlist .mat-list-item{
    width: 180px !important;
    background: red !important;
    margin: 5px !important;
}



.mat-bottom-sheet-container{
    padding: 3px !important;
}

.scroll-to-top{
    position: fixed;
    bottom: 42px;
    right: 42px;
    padding: 10px 10px 0 !important;
    background: #ffa800!important;
    border-radius: 5px!important;
    box-shadow: 4px 3px 5px #372a19;
}

.actionbuttonwrapperspan .material-icons{ color: #ff7e00 !important;}


/* ######################### Navbar - backend-header.component.html ########################### */
  .menuwrapper .mat-list-item-content{  padding: 0!important;}
  .menuwrapper mat-list-item{ background: none!important;}
  .mat-menu-panel{ cursor: pointer !important; display: block !important; min-width: auto !important; max-width: 100% !important; overflow: hidden !important; border-radius: 5px !important; padding: 0px!important; outline: 0 !important; min-height: auto !important; background: linear-gradient(#ffa800, #ff7e00) !important;}
  .mat-menu-panel .mat-list-item {font-size: 16px!important; border-bottom: solid 1px #fff!important; text-align: center; padding: 10px; display: block!important;}
  .mat-menu-panel .mat-list-item:last-of-type{border: none!important;} 
  .mat-menu-content:not(:empty) { padding-top: 0px!important; padding-bottom:0px!important;}
  .mat-menu-panel .mat-list-item:hover{border-radius: 0; background: linear-gradient(rgb(255, 255, 255), rgb(209, 209, 209)) !important; color: rgb(243, 138, 0) !important; text-align: center !important;}
  .mat-menu-panel .mat-list-item:hover a{  color: rgb(243, 138, 0) !important;}   
  .menuwrapper .mat-list-item-content{     width: 100%;   padding: 0px 0!important;}

  .account .mat-list-item-content{display: flex!important; align-items: center!important;}
  /* ############################################################################################# */


  /* ############################### headings in every modules ############################ */
  .heading-container{ background: var(--blue-gradient)!important; padding: 15px 0 !important;   
     display: flex !important; flex-wrap: wrap!important;   justify-content: space-between !important;  align-items: center!important; 
      margin: 10px auto !important; box-shadow: none !important; overflow: inherit!important; }

    .heading-container h1{
        color: white !important;
        background:transparent!important;
        font-size: 25px !important; 
        box-shadow: none !important; 
        padding:0!important;   margin: 0 0 0 20px!important;
    }

    .heading-container:before {
        content: "";
        width: 16px;
        height: 65%;
        display: block;
        position: absolute;
        top: 50%;
        left: -7px;
        transform: translateY(-50%);
        background-color: var(--yellow);
        box-shadow: -6px -1px 14px 0px rgb(0 0 0 / 73%);
        -webkit-box-shadow: -6px -1px 14px 0px rgb(0 0 0 / 73%);
        -moz-box-shadow: -6px -1px 14px 0px rgba(0,0,0,0.73);
    }

    .heading-container:after {
        content: "";
        width: 16px;
        height: 65%;
        display: block;
        position: absolute;
        top: 50%;
        right: -7px;
        transform: translateY(-50%);
        background-color: var(--yellow);
        box-shadow: 3px -1px 14px 0px rgb(0 0 0 / 73%);
        -webkit-box-shadow: 3px -1px 14px 0px rgb(0 0 0 / 73%);
        -moz-box-shadow: 3px -1px 14px 0px rgba(0,0,0,0.73);
    }

 

.heading-container button{
    color: white !important;
    background: linear-gradient(#272727, #070706) !important;
    padding: 10px 15px !important;
    font-size: 24px !important;
    
    margin:0 20px 0 0!important;
  
}
 

.menuwrapper .submenu  .mat-list-item-content{  padding: 10px 0!important; display: block!important;}
.mat-nav-list .mat-list-item:hover{ background: none!important;}



/* ############## FAQ View ############### */
 
.searchbar .mat-form-field-appearance-legacy .mat-form-field-underline { display: none;}
.searchbar .mat-form-field-appearance-legacy .mat-form-field-label {margin-left: 9px !important; top: 0.98125em !important;}
.searchbar input .mat-focus {margin-top: -0.2625em; }
.searchbar .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.00025em) scale(.75) perspective(100px) translateZ(0.001px) !important;   display:none !important;
}
.searchbar input.mat-input-element {margin-left: 20px; width: 98% !important; }

.fm-container .mat-expansion-panel-body {
    padding: 20px 24px 16px !important;
    font-size: 19px !important;
}


.faq-box .none:nth-child(even) {
    background: url('https://all-frontend-assets.s3.amazonaws.com/pagan/imgpsh_fullsize_anim.png'),#ff7e00  !important;
  
    background-position: auto, 100% !important;
    background-repeat: no-repeat !important;
    background-size: cover, auto !important;
    font-size: 20px !important;


}

.faq-box .none:nth-child(odd) {
    background: url('https://all-frontend-assets.s3.amazonaws.com/pagan/imgpsh_fullsize_anim+(1).png'),  rgb(39, 41, 41)!important;
    background-position: auto, 100% !important;
    background-repeat: no-repeat  !important;
    background-size: cover !important;
    border: 2px solid #141414 !important;
    font-size: 20px !important;
    color: #ffff;
  
}





/* ############## End FAQ View ############### */



/* ################################# Responsive ########################################### */
/* screen sixe 1568 */
@media (max-width:1491px){
    .fm-container lib-listing .actionbuttonwrapperspan{
        display: flex !important;
    }
}

@media (max-width:1280px){
    .fm-container lib-listing .mat-form-field{
        width: 50% !important;
    }


   
}


@media (max-width:1199px) {

    .fform .mat-form-field-flex{width: 98%; display: block;}
    /* .fm-container lib-listing .tablewrapper  tr td { padding: 10px !important; display: flex; width: 100%; flex-direction: column;} */
    .fform .grp2 { display: flex !important; flex-direction: column !important;}
    .fform .grp3 { display: flex !important; flex-direction: column !important;}
    .fm-container .mat-table tbody{ background: transparent !important; border: 0!important;}
    .fm-container td.mat-cell, td.mat-footer-cell, th.mat-header-cell { border-color: rgb(199, 199, 199) !important;}
    .fm-container lib-listing .mat-table { box-shadow: none !important; border: none !important;background: none !important;}
     .tablewrapper td-cell-center{ font-size: 20px !important;}
    .fm-container lib-listing .tablewrapper  tr { margin: 40px 0 0 0 !important;}

    .fm-container lib-listing .multipledeleteandupdatebuttan {top: 643px !important; position: absolute !important; left: 117px !important;}

    .fm-container lib-listing .mat-form-field {
        flex: 1 50%;
    }


    .fm-container lib-listing tr:nth-child(1){
        margin: 0 !important;
    }

    .fm-container lib-listing .tablewrapper tr td{
        display: block !important;
        position: relative !important;
        padding-left: 50% !important; 
        padding: 50px;
        height: auto !important; 
        min-height:30px;
    }

    .fm-container lib-listing .mat-card{
        padding: 0 !important;
    }

    .fm-container lib-listing .tablewrapper tr td .mat-checkbox { margin-left: -8px!important;}


    .fm-container lib-listing td:before{
       
            content: attr(title);
            float: none;
            display: block;
            text-transform: capitalize;
            width:70%;
            font-weight: 700;
            padding: 0 10px;
            color: #ff7e00 !important;
            position: absolute;
            z-index: 9;
            left: 0;
      
    }

    .fm-container lib-listing td:after{
       
        content: attr(data-label);
        float: none;
        display: block;
        text-transform: capitalize;
        font-weight: 700;
        padding: 0 10px;
        width: 50%;
        color: #ff7e00 !important;
        position: absolute;
        z-index: 9;
        top: 5px;
        left: 0 !important;
  
}
}




@media (max-width:750px){
    .fm-container lib-listing .mat-form-field{width: 100% !important;}
    .fform .grp2 { display: flex !important; flex-direction: column !important; margin: 0 -5px;}
    .fform .grp2 .form_field_wrapper{ width: 100% !important;}
    .fform .grp3 { display: flex !important; flex-direction: column !important; margin: 0 -5px;}
    .fform .grp3 .form_field_wrapper{  width: 100% !important;}
    .fm-container lib-listing .mat-form-field {flex: 1 100%;}

}


@media (max-width:668px) {
    .mat-dialog-container { min-width: 80% !important; line-height: 25px !important;}
        
    }


@media (max-width:640px) {
    .heading-container{ display: block!important; text-align: center!important; padding: 10px 0 !important;}
    .heading-container h1{ text-align: center!important;   padding:0 10px 10px 10px!important;   margin:0 20px!important; }
    .heading-container button{ margin: 0 auto!important;}
    
}



@media (max-width:411px){
    /* .lib-pager-class mat-label{
       width: 100% !important;
       display: block !important;
       text-align: center !important;
    }
    .lib-pager-class .pageformfield{
        width: 100% !important;
       display: block !important;
       text-align: center !important;
    } */
    .lib-pager-class{
        flex-direction: column !important;
    }
}

@media (max-width:375px) {
    .fm-container lib-listing .tablewrapper tr td {
         padding-left: 10px !important;
    }

    .fm-container lib-listing td:before{
        padding-left: 0 !important;
        position: relative;
        left: 0;
  
    }

    .fm-container lib-listing td:after{
        padding-left: 0 !important;
        position: relative;
        left: 0;
        top: -27px !important;
    }

    .fm-container lib-listing .actionbuttonwrapper {
        top: 17px;
        position: relative;
    }

    .fm-container lib-listing .tablewrapper tr td .mat-checkbox {
        margin-left: -5px!important;
        position: relative;
        top: 12px;
    }
}

@media (max-width:390px){
    .fform .mat-raised-button{
        display: block !important;
        width: 100% !important;
        margin: 4px auto !important;
    }
}



/* ######################## Login Page ################################ */

   .loginwrapper .main-div{
       height: auto !important;
       margin: 16px !important;
   }

   .loginwrapper{
       height: auto !important;
   }


 /* ----------------- Saumya End Here ------------------ */


 /* ----------------- Saumya End Here ------------------ */


 /* -------------Rajarshi starts here----------- */

 .fm-container lib-listing .addusersbtn {background-color: red!important;}

 /* for change password */
 
 .chpwd {
    width: 100%;
    padding: 20px !important;
    margin: 20px auto !important;
    background-color: #3a3e3f !important;
    display: block;
}

 /* arnab start */
.toogle_griid {
    display: block!important;
    text-align: right;
    margin: 0!important
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #f57e05!important
}

.mat-slide-toggle-thumb {
    background-color: #f57e05!important
}
.mat-slide-toggle-bar {
    background-color: rgb(255 255 255 / 38%);
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: rgb(225 204 211 / 54%);
}
.mat-slide-toggle-content{
    padding-right: 10px !important;
}
 
 
 
.fm-container lib-listing .view_button button { background: url(../images/listingviewicon.png) no-repeat center center!important; min-width:inherit !important; background-size: 85% !important; box-shadow: none !important; height: 25px !important; top:1px !important; width:25px !important;} 
.fm-container lib-listing .view_button button .mat-button-wrapper {display: none !important;}
.fm-container lib-listing .view_button {display: inline-block !important; height: 25px !important; width:35px !important;}
/* arnab end */

/* anindya */

/* for relationship add/edit from use date of birth */

  .mat-datepicker-toggle  {color: #fff !important;}

/* for user address */

.address .form_field_wrapperaddress{
width: 99%;
 }

 .address .grp3{
     flex-wrap: wrap;
     width: 99%;
     }

 .fform .description .grp4 { 
     display: flex !important; 
     align-items: stretch !important; 
     flex-direction: row !important;}
 .fform .grp2 .form_field_wrapper{
      margin: 5px !important; 
      flex: 1 0 auto !important;  }

 .fform .grp3 { 
     display: flex !important; 
     align-items: stretch !important; 
     flex-direction: row !important;}
 .fform .grp3 .form_field_wrapper{ 
     margin: 5px !important; 
     flex: 1 0 auto !important;  }
 .fform .grp3 .form_field_status {   
     margin: 13px !important; 
     background: #292c2c !important; 
     border: 0px solid #969696; 
     padding: 15px !important;}

 /* for relationship & product,package management from */
     .fform .grp4 { 
        display: flex !important; 
        align-items: stretch !important; 
        flex-direction: row !important;}
    .fform .grp4 .form_field_wrapper{ 
        margin: 5px !important; 
        flex: 1 0 auto !important;  }
    .fform .grp4 .form_field_status {   
        margin: 13px !important; 
        background: #292c2c !important; 
        border: 0px solid #969696; 
        padding: 15px !important;}


           /* for admin from */

        .fform .grp1 { 
            display: flex !important; 
            align-items: stretch !important; 
            flex-direction: row !important;}
        .fform .grp1 .form_field_wrapper{ 
            margin: 5px !important; 
            flex: 1 0 auto !important;  }
        .fform .grp1 .form_field_status {   
            margin: 13px !important; 
            background: #292c2c !important; 
            border: 0px solid #969696; 
            padding: 15px !important;}

            /* for coustomer from */

            .fform .grp5 { 
                display: flex !important; 
                align-items: stretch !important; 
                flex-direction: row !important;}
            .fform .grp5 .form_field_wrapper{ 
                margin: 5px !important; 
                flex: 1 0 auto !important;  }
            .fform .grp5 .form_field_status {   
                margin: 13px !important; 
                background: #292c2c !important; 
                border: 0px solid #969696; 
                padding: 15px !important;}