:root {
    --top-menu-background: #eee;
    --top-menu-border: #FFE121;
    --top-menu-font: #000;
    --top-menu-active: #eee;
    --highlight-background: #f2f7f0;
    --highlight-border: #ccc;
    --highlight-font: #000;
    --body-font-color: #020047;
    --font-red: #ff4545;
    /* --btn-background: #CEF0B9; */
    --btn-background: #004F9A;
    --page-bg: #ffffff;
    --body-bg: #fff;
    /* --new-pri:#246BFD; */
    --new-pri: #006dff;
    --btn-hover-new-pri: #7ba5fa;
    --new-pri-shade: #d9e5ff;
    --new-pri-shade-1: #f6f9ff;
    --li-title-color: #041330;
    --top-header-back: #1b52c3;
    --list-card-back: #ffdeb2;
    --list-li-bottom-border: #e2e2e2;
    --menu-back: #004F9A;
    --menu-li-hover: #041f38;
    --modal-header-color:#bdd5f5;
    --new-primary-dark-shade:#042d7e;
    
}

    
.navbar-top-links>li>a:hover {
  background: rgba(0, 0, 0, 0.1);
}

.navbar-top-links>li>a:focus {
  background: rgba(0, 0, 0, 0);
} 


.navbar-top-links>li>a {
    line-height: 30px;
    min-height: 30px
}



.navbar-default .navbar-header {
   
    background-color: #03205b !important;
    height: 50px;
    border-bottom: 1px solid #a2b2d1;
}


.navbar-header.top-menu {
  
    background: var(--menu-back);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 8px 0px;

}





.top-nav-right-menu {
    display: flex !important;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    margin-left: 6px;

}

.top-nav-right-menu i {
    /* color: white !important; */
    color: var(--new-primary-dark-shade) !important;

}




.top-nav-right-menu:hover {

    background-color: var(--new-pri) !important;
}
.top-nav-right-menu:hover i {

    color: #ffffff !important;

}

li.show .top-nav-right-menu {
    background-color: var(--new-pri) !important;
  }




  li.show i{
    color: white !important;
  }

 
  
.navbar-top-links-1 {
    margin-right: 0;
  }
  
  .navbar-top-links-1 .badge {
    position: absolute;
    right: 6px;
    top: 15px;
  }
  
  .navbar-top-links-1>li {
    float: left;
  }
  
  .navbar-top-links-1>li>a {
    color: #ffffff;
    padding: 0 12px;
    line-height: 60px;
    min-height: 60px;
  }
  
  
  
  .nav .open>a,
  .nav .open>a:focus,
  .nav .open>a:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .navbar-top-links-1 .dropdown-menu li {
    display: block;
  }
  
  .navbar-top-links-1 .dropdown-menu li:last-child {
    margin-right: 0;
  }
  
  .navbar-top-links-1 .dropdown-menu li a div {
    white-space: normal;
  }
  
  .navbar-top-links-1 .dropdown-messages,
  .navbar-top-links-1 .dropdown-tasks,
  .navbar-top-links-1 .dropdown-alerts {
    width: 310px;
    min-width: 0;
  }
  
  .navbar-top-links-1 .dropdown-messages {
    margin-left: 5px;
  }
  
  .navbar-top-links-1 .dropdown-tasks {
    margin-left: -59px;
  }
  
  .navbar-top-links-1 .dropdown-alerts {
    margin-left: -123px;
  }
  
  .navbar-top-links-1 .dropdown-user {
    right: 0;
    left: auto;
  }
  
  .navbar-top-links-1>li>a {
    line-height: 30px;
    min-height: 30px
}
  
.footer-links{
    font-weight: 500;
    cursor: pointer;
    display: inline;
    color: var(--new-pri) !important;
}

.footer-links:hover{
    text-decoration: underline !important;
}



.dashboard-tabs-container{
    
    border-radius: 6px;
    display: flex;
    justify-content: start;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 8px;
    
    align-items: center;
    cursor: pointer;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}




.crm-profile-photo{
    width: 52px;
    height: 52px;
    background-color:gray;
    border-radius: 50%;
}

.profile-shift-info-card{
    border: 1px solid var(--new-pri);

    box-shadow: rgba(17, 17, 26, 0.2) 0px 0px 16px !important;
    background: rgb(8,92,191);
    background: linear-gradient(180deg, rgba(8,92,191,1) 0%, rgb(9, 78, 161) 49%, rgba(17, 110, 223, 0.438) 100%);
}

.profile-shift-info-card-crm{
  
    background: rgb(8,92,191);
    background: linear-gradient(180deg, rgba(8,92,191,1) 0%, rgba(17,111,223,1) 100%, rgba(17, 110, 223, 0.438) 100%);
}


.btn-continue{
    background-color: green !important;

}
.btn-continue:hover{
    background-color: rgb(3, 70, 3) !important;

}

.btn-logout{
    background-color: rgb(129, 4, 4) !important;

}
.btn-logout:hover{
    background-color: rgb(78, 4, 4) !important;

}


.clock-out-confirm-no{
  background-color: white !important;
  border: 1px solid #000 !important;
  color: black !important;
}

.MuiChartsLegend-label{
  font-size: 16px !important;
}

.MuiChartsAxis-tickLabel{
  font-size: 12px !important;
}




































.btn-nrf{
    background-color: white !important;
    color: gray !important;
    border-color: rgb(255, 255, 255) !important;

}

.btn-nrf:hover{
    background-color: white !important;
    color: gray !important;
    border-color: gray;

}



.modal-header .btn-close {
    background-color: var(--modal-header-color);
    float: right;
    margin-top: -26px;
    cursor: pointer;
    opacity: 0.8;
    border: none;
    font-size: 31px;
    /* font-weight: 400; */
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;
    color: black;
  }
  
  .modal-header .btn-close:before {
    content: "×";
  }

  


.dashboard-tabs{
   
    transition: background-color 0.3s ease;
    font-size: 16px;
    cursor: pointer;
   border: 1px solid var(--btn-background);
   
    border-radius: 3px;

    height: 38px;
    background-color: white;
    gap:4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0px 8px;
}

.dashboard-tabs:hover{
   
    color:white !important;
    border: 1px solid var(--new-pri);
   

    background-color: var(--new-pri) !important;
    
}
  
  
  
#page-wrapper{
    margin-bottom: 50px;
}







































/* btn css start */




.btn-icon {
    background-color:var(--menu-back) !important;

}
.btn-icon:hover {
    background-color:  var(--new-pri)  !important;

}

.btn-icon .fa {

    color: white !important;

}

.btn-primary {
    background-color: var(--menu-back) !important;
    color: white;
}

.btn-outline-secondary {
    background-color: var(--menu-back) !important;
    color: white;
}
.btn-outline-secondary:hover{
    background-color: var(--new-pri) !important;
    color: white;
}


.btn-outline-secondary i {

    color: #ebf2ff !important;
}

.btn-secondary i {
    color: #e5ecfd !important;
}


.btn-primary,
.btn-primary.disabled {
    background: var(--btn-background);
    border: 1px solid var(--highlight-border);
    color: var(--highlight-font);
    ;
}

.btn-info,
.btn-info.disabled {
    background: #3eade000;
    border: 1px solid #4da6cf4a;
    color: #000;
}

.btn-danger,
.btn-danger.disabled {
    background: #fb967800;
    border: 1px solid #fb967830;
}

.btn-outline i {
    color: #000000;
    font-size: 16px;
}

.btn-primary.btn-outline {
    color: var(--btn-background) !important;
    border: 1px solid var(--btn-background) !important;
    background-color: white !important;
}


.btn-primary.btn-outline i{
    color: var(--btn-background);
}
.btn-primary.btn-outline:hover i{
    color: white;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-1b.btn-primary:after,

.btn-info:focus,
.btn-info.focus,
.btn-1b.btn-info:after {
    background: var(--new-pri) !important;
    color: #ffffff !important;
   
}


.btn-primary:hover .ti-search{
    color: white !important;
}





.btn-primary,
.btn-info {
    background: var(--btn-background) !important;
    color: #ffffff !important;
}

.btn-1b.btn-primary:after,
.btn-1c.btn-primary:after,
.btn-1d.btn-primary:after,
.btn-1e.btn-primary:after,
.btn-1f.btn-primary:after {
    background: var(--btn-hover-new-pri);
}


.btn-delete,
.btn-danger .btn-delete i {
    color: var(--font-red) !important;
}

.btn.btn-delete,
.btn-danger {
    background-color: #f50000 !important;
    color: white !important;
}

.btn-danger i {
    color: white !important;
}



.btn-custom,
.btn-custom.disabled {
  background: #ff6849;
  border: 1px solid #ff6849;
  color: #ffffff;
}

.btn-custom:hover,
.btn-custom.disabled:hover,
.btn-custom:focus,
.btn-custom.disabled:focus,
.btn-custom.focus,
.btn-custom.disabled.focus {
  background: #ff6849;
  opacity: 0.8;
  color: #ffffff;
  border: 1px solid #ff6849;
}



.btn-success,
.btn-success.disabled {
  background: #1d8f1d;
  border: 1px solid #1d8f1d;
}

.btn-success:hover,
.btn-success.disabled:hover,
.btn-success:focus,
.btn-success.disabled:focus,
.btn-success.focus,
.btn-success.disabled.focus {
  background: #00c292;
  opacity: 0.8;
  border: 1px solid #00c292;
}



.btn-warning,
.btn-warning.disabled {
  background: #fec107;
  border: 1px solid #fec107;
}

.btn-warning:hover,
.btn-warning.disabled:hover,
.btn-warning:focus,
.btn-warning.disabled:focus,
.btn-warning.focus,
.btn-warning.disabled.focus {
  background: #fec107;
  opacity: 0.8;
  border: 1px solid #fec107;
}

.btn-danger,
.btn-danger.disabled {
  background: #fb9678;
  border: 1px solid #fb9678;
}

.btn-danger:hover,
.btn-danger.disabled:hover,
.btn-danger:focus,
.btn-danger.disabled:focus,
.btn-danger.focus,
.btn-danger.disabled.focus {
  background: #fb9678;
  opacity: 0.8;
  border: 1px solid #fb9678;
}

.btn-default,
.btn-default.disabled {
  background: #e4e7ea;
  border: 1px solid #e4e7ea;
}

.btn-default:hover,
.btn-default.disabled:hover,
.btn-default:focus,
.btn-default.disabled:focus,
.btn-default.focus,
.btn-default.disabled.focus {
  opacity: 0.8;
  border: 1px solid #e4e7ea;
  background: #e4e7ea;
}

.btn-default.btn-outline {
  background-color: #ffffff;
}

.btn-default.btn-outline:hover,
.btn-default.btn-outline:focus,
.btn-default.btn-outline.focus {
  background: #e4e7ea;
}




.btn-success.btn-outline {
  color: #00c292;
  background-color: transparent;
}

.btn-success.btn-outline:hover,
.btn-success.btn-outline:focus,
.btn-success.btn-outline.focus {
  background: #00c292;
  color: #ffffff;
}

.btn-warning.btn-outline {
  color: #fec107;
  background-color: transparent;
}

.btn-warning.btn-outline:hover,
.btn-warning.btn-outline:focus,
.btn-warning.btn-outline.focus {
  background: #fec107;
  color: #ffffff;
}

.btn-danger.btn-outline {
  color: #fb9678;
  background-color: transparent;
}

.btn-danger.btn-outline:hover,
.btn-danger.btn-outline:focus,
.btn-danger.btn-outline.focus {
  background: #fb9678;
  color: #ffffff;
}

.button-box .btn {
  margin: 0 8px 8px 0px;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
  color: white;
}

.btn-label {
  background: rgba(0, 0, 0, 0.05);
  display: inline-block;
  margin: -6px 12px -6px -14px;
  padding: 7px 15px;
}

.btn-facebook {
  color: #ffffff !important;
  background-color: #3b5998 !important;
}

.btn-twitter {
  color: #ffffff !important;
  background-color: #55acee !important;
}

.btn-linkedin {
  color: #ffffff !important;
  background-color: #007bb6 !important;
}

.btn-dribbble {
  color: #ffffff !important;
  background-color: #ea4c89 !important;
}

.btn-googleplus {
  color: #ffffff !important;
  background-color: #dd4b39 !important;
}

.btn-instagram {
  color: #ffffff !important;
  background-color: #3f729b !important;
}

.btn-pinterest {
  color: #ffffff !important;
  background-color: #cb2027 !important;
}

.btn-dropbox {
  color: #ffffff !important;
  background-color: #007ee5 !important;
}

.btn-flickr {
  color: #ffffff !important;
  background-color: #ff0084 !important;
}

.btn-tumblr {
  color: #ffffff !important;
  background-color: #32506d !important;
}

.btn-skype {
  color: #ffffff !important;
  background-color: #00aff0 !important;
}

.btn-youtube {
  color: #ffffff !important;
  background-color: #bb0000 !important;
}

.btn-github {
  color: #ffffff !important;
  background-color: #171515 !important;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary.focus:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus {
  background-color: var(--new-pri);
  /* border: 1px solid var(--new-pri); */
}

.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success.focus:active,
.btn-success:active:focus,
.btn-success:active:hover,
.open>.dropdown-toggle.btn-success.focus,
.open>.dropdown-toggle.btn-success:focus,
.open>.dropdown-toggle.btn-success:hover,
.btn-success.focus,
.btn-success:focus {
  background-color: #00c292;
  border: 1px solid #00c292;
}

.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info.focus:active,
.btn-info:active:focus,
.btn-info:active:hover,
.open>.dropdown-toggle.btn-info.focus,
.open>.dropdown-toggle.btn-info:focus,
.open>.dropdown-toggle.btn-info:hover,
.btn-info.focus,
.btn-info:focus {
  background-color: var(--new-pri);
  border: 1px solid var(--new-pri);
}

.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning.focus:active,
.btn-warning:active:focus,
.btn-warning:active:hover,
.open>.dropdown-toggle.btn-warning.focus,
.open>.dropdown-toggle.btn-warning:focus,
.open>.dropdown-toggle.btn-warning:hover,
.btn-warning.focus,
.btn-warning:focus {
  background-color: #fec107;
  border: 1px solid #fec107;
}

.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger.focus:active,
.btn-danger:active:focus,
.btn-danger:active:hover,
.open>.dropdown-toggle.btn-danger.focus,
.open>.dropdown-toggle.btn-danger:focus,
.open>.dropdown-toggle.btn-danger:hover,
.btn-danger.focus,
.btn-danger:focus {
  background-color: red;
  border: 1px solid red;
}

.btn-inverse,
.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.focus,
.btn-inverse:active,
.btn-inverse:focus,
.btn-inverse:hover,
.open>.dropdown-toggle.btn-inverse {
  background-color: #4c5667;
  border: 1px solid #4c5667;
  color: #ffffff;
}

/* Button 1b */
.btn-1b:after {
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
}

.btn-1b:hover,
.btn-1b:active {
  color: #fff;
}

.btn-1b:hover:after,
.btn-1b:active:after {
  height: 100%;
}



.btn-1b.btn-warning:after,
.btn-1c.btn-warning:after,
.btn-1d.btn-warning:after,
.btn-1e.btn-warning:after,
.btn-1f.btn-warning:after {
  background: #fec107;
}

.btn-1b.btn-danger:after,
.btn-1c.btn-danger:after,
.btn-1d.btn-danger:after,
.btn-1e.btn-danger:after,
.btn-1f.btn-danger:after {
  background: #fb9678;
}

.btn-1b.btn-primary:after,
.btn-1c.btn-primary:after,
.btn-1d.btn-primary:after,
.btn-1e.btn-primary:after,
.btn-1f.btn-primary:after {
  background: var(--new-pri);
}

.btn-1b.btn-success:after,
.btn-1c.btn-success:after,
.btn-1d.btn-success:after,
.btn-1e.btn-success:after,
.btn-1f.btn-success:after {
  background: green;
}

.btn-1b.btn-inverse:after,
.btn-1c.btn-inverse:after,
.btn-1d.btn-inverse:after,
.btn-1e.btn-inverse:after,
.btn-1f.btn-inverse:after {
  background: #4c5667;
}

/* Button 1c */
.btn-1c:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
}

.btn-1c:hover,
.btn-1c:active {
  color: #000;
}

.btn-1c:hover:after,
.btn-1c:active:after {
  width: 100%;
}

/* Button 1d */
.btn-1d {
  overflow: hidden;
}

.btn-1d:after {
  width: 0;
  height: 103%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-1d:hover:after {
  width: 100%;
  opacity: 1;
}

/* Button 1e */
.btn-1e {
  overflow: hidden;
}

.btn-1e:after {
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background: #fff;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-1e:hover:after {
  height: 260%;
  opacity: 1;
}

.btn-1e:active:after {
  height: 400%;
  opacity: 1;
}

/* Button 1f */
.btn-1f {
  overflow: hidden;
}

.btn-1f:after {
  width: 101%;
  height: 0;
  top: 50%;
  left: 50%;
  background: #fff;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.btn-1f:hover:after {
  height: 100%;
  opacity: 1;
}

.btn-1f:active:after {
  height: 130%;
  opacity: 1;
}