@import url("hdFonts.css");
/* Table of content
-----------------------------------------------
1. Header Navigations
    1.1 User Dropdown 
	1.2 Main Menu
	1.3 My Favorites
	1.4 Help
	1.5 Notification
	1.6 Feedback
    1.7 Rating
2. Footer
3. Responsive
4. Bootstrap foal-back
/*--------------------------------------------------------------
1. Header Navigations
--------------------------------------------------------------*/
.ds-hd-nav{ padding:0;letter-spacing:0.5px;font-family:'hcltech_roobertregular', Arial;background:transparent linear-gradient(90deg, #5F1EBE 0%, #2874F0 67%, #0F5FDC 100%) 0% 0% no-repeat;min-height: auto;margin-bottom: auto;border: 0;border-radius: 0;}
.ds-hd-nav a:hover{text-decoration: none;}
.ds-hd-nav .accordion-header{margin: 0;}
.ds-hd-nav .accordion-header .accordion-button{border: 0; background-color: transparent; width: 100%;    display: flex; align-items: center; justify-content: space-between;}
.ds-hd-nav::after, .ds-hd-nav::before, .ds-hd-nav .container-fluid::after, .ds-hd-nav .container-fluid::before{display: none;}
.ds-hd-nav .ds-hd-logo-sec{display: flex;align-items: center; vertical-align: middle; justify-content: center}
.ds-hd-logo{    padding: 9px 12px 11px 16px;
    margin-right: 4px;}
.ds-hd-nav > .container-fluid{padding:0 8px 0 4px;display: flex; align-items: center; justify-content: space-between; }
.ds-hd-app, .ds-hd-app:hover{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:24px;color:#fff;padding:3px 16px 4px;text-decoration:none;border-left:0.5px solid rgba(255, 255, 255, 0.6)}
.ds-hd-nav .navbar-collapse{justify-content:flex-end; padding-right: 0;}
.ds-hd-right{display:flex;padding:0;margin:0;list-style:none}
.ds-hd-right>li{position: inherit;}
.ds-hd-right>li:nth-child(5){margin-right: 8px;}
.ds-hd-right>li>.btn{color: #fff;background:none;border:0;font-size:21px;margin:4px 0;padding:0;min-width:48px;height:48px;border-radius:4px;position:relative}
.ds-hd-right>li:hover>.btn, .ds-hd-right>li>.btn.show{background-color:rgba(255, 255, 255, 0.15)}
.ds-hd-right>li>.btn.dropdown-toggle::after{content:none;border:0;margin:0}
.ds-hd-right>li.ds-hd-empsec{margin-right:0;padding-left:8px;position:relative}
.ds-hd-right>li.ds-hd-empsec::before, .ds-hd-appiosandrd::after{content:'';border-left:0.5px solid rgba(255, 255, 255, 0.6);position:absolute;top:0;left:0;height:70%;bottom:0;margin:auto}
.ds-hd-right>li.ds-hd-empsec>.btn{display:flex !important;align-items:center;border-radius:4px;padding:0 10px}
.ds-hd-sap{font-size:14px;letter-spacing:0.5px;line-height:18px;text-align:right;font-family:'hcltech_roobertmedium'}
.ds-hd-emp{display:block;font-size:12px;font-family:'hcltech_roobertregular'}
.ds-hd-name{width:38px;letter-spacing:0.5px;height:38px;background-color:rgba(255, 255, 255, 0.15);border-radius:50%;font-size:14px;margin-left:12px;display:inline-flex;justify-content:center;align-items:center;font-family:'hcltech_roobertmedium'}
.ds-hd-appiosandrd{position:relative}
.ds-hd-right>li.ds-hd-appiosandrd>.btn{margin-right:8px}
.ds-hd-appiosandrd>.btn>img{vertical-align:sub}
.ds-hd-appiosandrd::after{border-right:0.5px solid rgba(255, 255, 255, 0.6);left:inherit;right:0}
/*--------------------------------------------------------------
1.1 User Dropdown 
--------------------------------------------------------------*/
.ds-hd-empd{width:279px}
.ds-hd-nav .dropdown-menu{left: auto;max-height:calc(100vh - 100px);overflow:overlay;box-shadow:0px 3px 6px rgba(0, 0, 0, 0.16);border:0;padding:8px;border-radius:0 0 8px 8px;margin:0;right:0;min-width:200px}
.ds-hd-fullempname{background-color:#F5F8FD;padding:12px 10px;border-radius:4px}
.ds-hd-fullempname>h5{font-size:16px;color:#000;font-family:'hcltech_roobertmedium';margin:0 0 8px}
.ds-hd-fullempname>p{font-size:14px;color:#1D2123;font-family:'hcltech_roobertlight';margin:0}
.ds-hd-emprole{border-left:0.5px solid #A5AFBE;margin-left:8px;padding-left:8px}
.ds-hd-changerole{font-size:16px;color:#000;font-family:'hcltech_roobertsemibold';padding:16px 10px;border-bottom:1px solid #A5AFBE;display:flex;align-items:center;justify-content:space-between}
.ds-hd-changerole>i{font-size:18px}
.ds-hd-role {padding: 0 8px 8px;margin: 8px 0 8px;list-style: none;border-bottom: 1px solid #A5AFBE;}
.ds-hd-role.ds-hd-userole li a{padding: 8px 0;}
.ds-hd-role>li:last-child{margin-bottom:0}
.ds-hd-role>li>a{font-size:14px;position:relative;color:#000;text-decoration:none;display:flex;align-items:center; padding: 16px 0;}
.ds-hd-role>li>a:hover, .ds-hd-role>li.active a, .ds-hd-role>li>a:hover>i, .ds-hd-role>li.active a>i{color:#5F1EBE}
.ds-hd-logout{color:#000;letter-spacing:0.5px;font-size:16px;font-family:'hcltech_roobertmedium';padding:8px 10px;border:0;display:flex;align-items:center;width:100%;border-radius:4px;background:none;justify-content:space-between}
.ds-hd-logout>i{font-size:20px}
.ds-hd-logout:hover{background-color:#F5F8FD;color:#5F1EBE}
.ds-hd-logout:hover>i{font-weight:600}
/*--------------------------------------------------------------
1.2 Main Menu
--------------------------------------------------------------*/
.ds-hd-navmenu{width:370px}
.ds-hd-navmenu.dropdown-menu{padding:24px 24px 0px; width: 375px;}
.ds-hd-navmenu .accordion-item:first-of-type .accordion-button{padding-top:0}
.ds-hd-navmenu .ds-hd-role{padding:0;margin:0;border:0}
.ds-hd-navmenu .accordion-item{border:0;border-bottom:1px solid #A5AFBE;border-radius: 0;}
.ds-hd-navmenu .accordion-item:last-child{border-bottom:0}
.ds-hd-navmenu .accordion-button{font-size:18px;letter-spacing:0.5px;padding:14px 0;color:#000;font-family:'hcltech_roobertregular'}
.ds-hd-navmenu .accordion-button:not(.collapsed){background:none;box-shadow:none;color:#000;font-family:'hcltech_roobertsemibold'}
.ds-hd-navmenu .accordion-button::after{content:"\e901";font-family:'hdrFont';background:none;color:#6C7882}
.ds-hd-navmenu .accordion-button:not(.collapsed)::after{content:"\e900";background:none}
.ds-hd-navmenu .accordion-body{padding:0}
.ds-hd-navmenu .accordion-body>.ds-hd-role>li>a{padding:8px 0}
.ds-hd-navmenu .accordion-body>.ds-hd-role li:last-child a{padding:8px 0 16px}
.ds-hd-navmenu .accordion-item{margin: 0 !important; box-shadow: none !important;}
.ds-hd-navmenu.dropdown-menu .panel-group{margin-bottom: 0;}
.ds-hd-navmenu .accordion-item.panel-default>.panel-heading{ background: transparent;color: inherit;border-radius: 0; border: 0; padding: 0;}
.ds-hd-navmenu .accordion-item.panel-default>.panel-heading h4 a{display: flex;align-items: center;justify-content: space-between;}
.ds-hd-navmenu .accordion-item.panel-default>.panel-heading h4 a:focus{text-decoration: none;}
.ds-hd-navmenu .ds-hd-role>li a::after, 
.ds-hd-favorite .ds-hd-role>li a::after, 
.ds-hd-tophelp>li a::after{opacity:0;content:"\e92b";font-family:'hdrFont';color:#5F1EBE;font-size:11px;margin-left:4px;position:relative;top:1px;transition:all 0.2s ease-in-out}
.ds-hd-navmenu .ds-hd-role>li a:hover::after, 
.ds-hd-favorite .ds-hd-role>li a:hover::after, 
.ds-hd-tophelp>li a:hover::after{opacity:1}
/*--------------------------------------------------------------
1.3 My Favorites
--------------------------------------------------------------*/
.ds-hd-nav .ds-hd-favorite{width:375px;padding:24px 24px 0}
.ds-hd-heading{margin-top: 0; font-size:18px;color:#000;margin-bottom:12px;font-family:'hcltech_roobertsemibold';display:flex;align-items:center;justify-content:space-between}
.ds-hd-favrole{margin:0;padding:0;border:0}
.ds-hd-favrole>li{border-bottom:1px solid #A5AFBE;}
.ds-hd-favrole>li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.ds-hd-favrole>li>a>i{font-size:20px;color:#000;margin-right:12px}
.ds-hd-favbtn{color:#000;font-size:14px;background-color:#5F1EBE;color:#fff;border-radius:4px;padding:8px 16px;font-family:'hcltech_roobertmedium'}
.ds-hd-favbtn:hover{background-color:#0F5FDC;color:#fff}
.ds-hd-favbtn>i{margin-right:8px}
.ds-hd-addfav{text-align:center}
.ds-hd-addfav>p{font-size:16px;color:#000;margin-bottom:24px}
.ds-hd-favedit{color:#000;text-decoration:none;font-size:14px;width:24px;height:24px;margin-top: -4px; transition:all 0.0s ease-in-out;border-radius:4px;display:flex;align-items:center;justify-content:center}
.ds-hd-favedit:hover{color:#000;background:rgba(95, 30, 190, 0.10)}
/*--------------------------------------------------------------
1.4 Help
--------------------------------------------------------------*/
.ds-hd-tophelp{margin:0 -24px;padding:0;list-style:none;font-size:14px;background:#F9FAFD}
.ds-hd-tophelp>li{padding:0 24px}
.ds-hd-tophelp>li:last-child a{border-bottom:0}
.ds-hd-tophelp>li>a{margin:0;color:#000;border-bottom:1px solid #D9E0EA;padding:16px 0;text-decoration:none;display:flex;align-items:center;transition:all 0.0s ease-in-out}
.ds-hd-tophelp>li:hover>a, .ds-hd-tophelp>li:hover>a>i{color:#5F1EBE}
.ds-hd-tophelp>li>a>i{color:#000;font-size:20px;margin-right:12px}
.ds-hd-tophelp + .ds-hd-favrole{overflow:initial}
.ds-hd-tophelp>li a::after{content:"\e92a";top:0;margin-left:8px}
/*--------------------------------------------------------------
1.5 Notification
--------------------------------------------------------------*/
.ds-hd-notification{position:relative !important;}
.ds-hd-nav .ds-hd-notify{width:270px;padding:24px 24px 12px}
.ds-hd-nothead{font-size:14px;color:#000;font-family:'hcltech_roobertmedium';margin-bottom:12px}
.ds-hd-notify .ds-hd-role{border:0;margin:0 0 16px;padding:0}
.ds-hd-notify .ds-hd-role>li{font-size:14px;color:#000}
.ds-hd-notify .ds-hd-role>li>a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding: 4px 0;}
.ds-hd-notify .ds-hd-role:last-child, .ds-hd-notify .ds-hd-role>li:last-child{margin-bottom:0}
.ds-hd-count{width:10px;height:10px;position:absolute;top:10px;right:13px;background-color:#FF0000;border:1px solid #2571ed;border-radius:50%}
/*--------------------------------------------------------------
1.6 Feedback
--------------------------------------------------------------*/
#feedbackModal{font-family:'hcltech_roobertregular'}
#feedbackModal .modal-header{padding:16px;border:0;display: flex;flex-shrink: 0; align-items: center; justify-content: space-between;}
#feedbackModal .modal-header::after, #feedbackModal .modal-header::before{display: none;}
#feedbackModal .modal-content{border-radius:0.3rem}
#feedbackModal .btn{text-transform:uppercase;font-size:14px;border-color:#3399FF;border-radius:4px;min-width:100px;min-height:40px}
#feedbackModal button.btn-primary{background:#3399FF}
#feedbackModal .modal-title{color:#3399FF;font-size:16px}
#feedbackModal .modal-body{padding:0 24px 24px; }
#feedbackModal .modal-body .form-group{margin-bottom: 24px;}
#feedbackModal .largeModal{max-width:650px; margin-top:56px;width: auto;}
#feedbackModal .close{font-size:1.1rem}
/*--------------------------------------------------------------
1.7 Rating
--------------------------------------------------------------*/
.rating-stars{display:flex;justify-content:space-between;margin-bottom:16px}
.rating-stars ul{margin:0; padding:0}
.rating-stars ul > li.star{display:inline-block}
.rating-stars ul > li.star > i{font-size:22px;color:#ccc;cursor:pointer}
.rating-stars ul > li.star.hover > i{color:#FFCC36}
.rating-stars ul > li.star.selected > i{color:#FF912C}
.message{font-size:17px;padding-top:3px;color:#777}
textarea.feedRemark{ box-shadow: none;resize:none;border-bottom:1px solid #d9d9d9;background:transparent;font-size:16px;border-radius:0.25rem}
/*--------------------------------------------------------------
2. Footer
--------------------------------------------------------------*/
.ds-ft-footer{letter-spacing: 0.5px;display:flex;align-items:center;min-height:34px;background:transparent linear-gradient(90deg, #5F1EBE 0%, #2874F0 67%, #0F5FDC 100%) 0% 0% no-repeat;font-size:12px;color:#fff;padding:8px 20px; width: 100%;}
.ds-ft-footer>p{margin:0}
.ds-ft-webspecify{flex:1}
/*--------------------------------------------------------------
3. Responsive
--------------------------------------------------------------*/
@media(max-width:820px){
    .ds-hd-name{margin-left:0}
    .ds-ft-webspecify, .ds-hd-sap{display:none}
    .ds-ft-footer{justify-content:right}
}
@media(max-width:767px){
    .ds-hd-right{justify-content:right}
    .ds-hd-nav .ds-hd-logo-sec {
        width: 100%;
    }
    .ds-hd-notification {
        position: inherit !important;
    }
    .ds-hd-right>li.ds-hd-empsec>.btn{
        padding-right: 0;
    }
    .ds-hd-nav .container-fluid{
        flex-direction: column;
    }
    .ds-hd-nav .navbar-collapse{
        width: 100%;
    }
    .ds-hd-nav .dropdown-menu.ds-hd-notify{
        right: auto;
    }
    .ds-hd-right>li{
        margin-right: 0;
    }
    .navbar-toggle{
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .ds-hd-right>li.ds-hd-empsec::before, .ds-hd-appiosandrd::after{
        margin-left: 10px;
    }
    .ds-hd-right>li.ds-hd-empsec, .ds-hd-notification{
        position: inherit;
    }
    .ds-hd-nav .ds-hd-empsec .dropdown-menu{
        right: 10px;
    }
    .ds-hd-right>li.ds-hd-empsec::before, .ds-hd-appiosandrd::after{
        display: none;
    }
}

.navbar-toggle{
    display: none;
}
/*--------------------------------------------------------------
4. Bootstrap foal-back
--------------------------------------------------------------*/
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}
.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
.navbar-toggle .icon-bar {
    background: #fff;
}
.ds-hd-btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/16px auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: .5;
}
.ds-hd-nav .ds-hd-app:focus, .ds-hd-nav .ds-hd-app:hover{
    text-decoration: none;
    color: #fff;
}
.ds-hd-nav a:focus, .ds-hd-nav a:active, .ds-hd-nav .btn:focus, .ds-hd-nav .btn:active{box-shadow: none;}
.ds-hd-right>li.open .btn{
    background-color: rgba(255, 255, 255, 0.15);
}
.dropdown-toggle:focus{
    outline: 5px auto -webkit-focus-ring-color;
}



/* logoutmodal css starts here */
.logoutmodalcls {
    max-width: 500px;
}
.logoutmodalcls .modal-header{
    border-bottom: none !important;
}
.logoutmodalcls .ds-hd-btn-close{
    float: right;
}
.logoutmodalcls .ds-hd-closeM{
    color: #222;
    right: 19px;
    font-size: 16px;
    top: 17px;
  }
.logoutmodalcls button.secondary-button {
    background: #828282;
    border: #828282 solid 1px;
    padding: 10px 24px;
    border-radius: 4px;
    margin-right: 16px;
    color: #fff;
    font-size: 14px;
  }
.logoutmodalcls button.secondary-button:hover{
    background-color: #6d6b6b;
  }
  
.logoutmodalcls button.primary-button {
    background: #2196f3 !important;
    border: #2196f3 solid 1px !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    color: #fff !important;
  }
.logoutmodalcls button.primary-button:hover{
    background-color: #1472bc !important;
  }
.logoutmodalcls .text-center.glb-btn{
    margin-top: 15px !important;
  }
.logoutmodalcls p{
    text-align: center;
    font-size: 16px;
    color: #777;
}
.logoutmodalcls p.image{
    margin-bottom: 14px;
}
.logoutmodalcls p.image img{
    width: 90px;
}
.logoutmodalcls .p-txt{
    margin-bottom: 30px !important;
}
.logoutmodalcls .modal-body{
    padding: 0 24px 24px 24px;
}


/* addon css for content */


.btncenterClass {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.btn-primary {
    background-color: #5F1EBE;
    border-color: #5F1EBE;
    border-radius: 4px;
    margin-top: 16px;
    display: inline-block;
    padding: 7px 16px;
    margin-top: 0;
    font-family: 'hcltech_roobertregular', Arial;
    color: #fff;
}


  
  select {   
    width: 100%;
    font-size: 1.15rem;
    padding: 0.675em 6em 0.675em 1em;
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
  }
  .mm-select{
    margin-bottom: 2rem;
  }
  .ff-select{
    padding-left: 0;
  }
  #example_filter{
    float: left;
  }
  .main-select{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin:0 auto 2rem;
    max-width: 400px;
  }
  .main-select select{
    max-width: 200px;
    margin:0;
  }
    .main-select table tr td{padding:0 5px}
    /*=============
  Aesthetics 
  =========================*/
    * {
        box-sizing: border-box;
    }
  
  body {
    min-height: 100vh;
    display: grid;
    place-items: center;
  }

.common_table{ border-radius: 4px; margin-top: 100px;}

table.dataTable.glb_datable thead th{ color: #777; font-size: 14px; padding: 16px 18px 16px 14px; border-bottom: .5px solid #B9C3D0; 
    white-space: nowrap;
    background-color: #E7EBF4;
    color: #222 !important;}
table.dataTable.glb_datable tbody td{ color: #222;font-size: 14px; padding: 8px 16px;    line-height: 1.6; white-space: nowrap;}
table.dataTable.glb_datable tbody tr:nth-child(odd){ background: #FAFBFC}
table.dataTable.glb_datable tbody tr:hover{background: #EFF0F7;}

.common_table  .dataTables_info{ padding-top: 16px!important; color: #000!important; font-size: 12px}
.common_table .dataTables_paginate{ margin-top: 16px!important; color: #222!important; font-size: 14px; padding: 0!important; border-radius: 4px; overflow: hidden;}
.common_table .dataTables_wrapper .dataTables_paginate .paginate_button{    
    padding: 3.6px 14px !important;
    margin-left: 0;
    background: #fff;
    border: 1px solid #B9C3D0;
    border-left-color: transparent;
    border-radius: 0;
}


table.dataTable.glb_datable.cell-border thead th:first-child{ 
    border-left: 1px solid #ddd;
}
/* // table.dataTable.glb_datable.cell-border thead th{ 
//     border-right: 1px solid #ddd;
// } */
.common_table .dataTables_wrapper .dataTables_paginate .paginate_button.previous{
    border-radius: 5px 0 0 5px;
    border-left-color: #B9C3D0;
}
.common_table .dataTables_wrapper .dataTables_paginate .paginate_button.next{
    border-radius: 0 5px 5px 0;
}
    .common_table .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
        opacity: .5;
        border: 1px solid #ccc;
    }
    .common_table .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
        background: #fff !important;
        border-color:#B9C3D0 !important;
        opacity: .5;    
    }

    .common_table .dataTables_wrapper .dataTables_paginate .paginate_button:active{
        box-shadow: none;
    }

.common_table .dataTables_wrapper .dataTables_paginate .paginate_button.current, .common_table .dataTables_wrapper .dataTables_paginate .paginate_button:hover{   
    background: #E2D9FB !important;
    border-color: #5F1EBE;
    color: #222 !important;
}
.common_table .dataTables_wrapper .dataTables_length{float: right; margin-top:16px; margin-right: 11px; color: #222; font-size: 14px; position: relative}
.common_table .dataTables_wrapper .dataTables_length label{     margin: 0;
    position: relative;
    z-index: 1;
    background: #fff;}
.common_table .dataTables_wrapper .dataTables_length select{    padding: 4px 12px;
    margin: 0;
    /* appearance: none; */
    border: 1px solid #B9C3D0;
    border-radius: 4px;
    min-width: 60px;
    cursor: pointer;
    background: transparent;
    z-index: 1;
    position: relative;}  
/* .common_table .dataTables_length label:after{
    content: "\e90c";
    right: 8px;
    top: 11px;
    position: absolute;
    font-family: 'icomoon' !important;
    font-weight: 900;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 10px;
    z-index: -1;
} */