html{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
/* Rounded sliders */
/*-------------------------------------------------------------------*/
/* === Email === */
/* Mail Sidebar */

html {
 scroll-behavior: smooth;
}


@media (max-width: 769px) {
 .email-wrapper .mail-sidebar {
   position: relative;
 }
}

@media (min-width: 992px){
   .col-lg-7 {
       width: 49.9%;
       min-height: 100%;
       max-width: 41% !important;
   }
   .col-md-2 {
       width: 14%;
       min-height: 100%;
   }
   .col-md-3 {
       width: 35%;
       min-height: 100% !important;
   }
}

@media (max-width: 767.98px) {
 .email-wrapper .mail-sidebar {
   position: fixed;
   z-index: 99;
   background: #ffffff;
   width: 45%;
   min-width: 300px;
   left: -100%;
   display: block;
   transition: 0.4s ease;
   -webkit-transition: 0.4s ease;
   -moz-transition: 0.4s ease;
 }
}
.mail-sidebar {
   height: 100%;
 overflow: auto;
}


.email-wrapper .mail-sidebar .menu-bar {
 width: 100%;
 float: right;
 height: 100%;
 min-height: 100%;
}

@media (max-width: 767.98px) {
 .email-wrapper .mail-sidebar .menu-bar {
   min-height: 100vh;
   max-height: 100%;
   height: auto;
   overflow-y: auto;
   overflow-x: hidden;
 }
}

.email-wrapper .mail-sidebar .menu-bar .menu-items {
 padding: 0;
 margin-bottom: 0;
 height: auto;
 list-style-type: none;
}

.email-wrapper .mail-sidebar .menu-bar .menu-items li {
 padding: 10px 15px;
 transition: 0.4s;
 position: relative;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: space-between;
 justify-content: space-between;
}

.email-wrapper .mail-sidebar .menu-bar .menu-items li:hover {
 border-radius: 6px;
 background: rgb(238 239 241 / 66%);
}

.email-wrapper .mail-sidebar .menu-bar .menu-items li a {
 color: #303a40;
 font-size: 16px;
 text-decoration: none;
 border-bottom: unset;
}

.active a{
 font-weight: 600 !important;
}

.email-wrapper .mail-sidebar .menu-bar .menu-items li a i {
 margin-right: 8px;
 line-height: 1.5;
}

.email-wrapper .mail-sidebar .menu-bar .menu-items li.active {
 /* background: -webkit-gradient(linear, left top, left bottom, from(#ced6df), to(#b6c6d7)); */
 background-color: #dbdbdb63;
 border-radius: 6px;
}

.email-wrapper .mail-sidebar .menu-bar .menu-items li.active a {
 color: #007bff;
}

.email-wrapper .mail-sidebar .menu-bar .menu-items li.compose:hover {
 background: transparent;
}

.email-wrapper .mail-sidebar .menu-bar .online-status {
 margin-top: 1rem;
}

.email-wrapper .mail-sidebar .menu-bar .online-status .chat {
 font-size: 0.75rem;
 color: #464dee;
 margin-bottom: 0;
 font-weight: 600;
}

.email-wrapper .mail-sidebar .menu-bar .online-status .status {
 height: 10px;
 width: 10px;
 border-radius: 100%;
 display: inline-flex;
 justify-content: flex-start;
 transform: translateX(-43px) translateY(2px);
}

.email-wrapper .mail-sidebar .menu-bar .online-status .status:after {
 font-size: 12px;
 color: #2e383e;
 margin: -5px 0 0 18px;
}

.email-wrapper .mail-sidebar .menu-bar .online-status .status.offline {
 background: #ef5958;
}

.email-wrapper .mail-sidebar .menu-bar .online-status .status.offline:after {
 content: "Offline";
}

.email-wrapper .mail-sidebar .menu-bar .online-status .status.online {
 background: #0ddbb9;
}

.email-wrapper .mail-sidebar .menu-bar .online-status .status.online:after {
 content: "Online";
}

.email-wrapper .mail-sidebar .menu-bar .profile-list {
 padding: 10px 0;
}

.email-wrapper .mail-sidebar .menu-bar .profile-list-item {
 border-bottom: 1px solid #e9e9e9;
 padding: 6px 0;
 display: block;
}

.email-wrapper .mail-sidebar .menu-bar .profile-list-item:last-child {
 border-bottom: 0;
}

.email-wrapper .mail-sidebar .menu-bar .profile-list-item a {
 text-decoration: none;
}

.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .pro-pic {
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 padding: 0;
 width: 20%;
 max-width: 40px;
}

.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .pro-pic img {
 max-width: 100%;
 width: 100%;
 border-radius: 100%;
}

.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user {
 width: 100%;
 padding: 5px 10px 0 15px;
}

.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-name {
 font-weight: 400;
 font-size: 0.75rem;
 line-height: 1;
 color: #000000;
}

.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-designation {
 font-size: calc(0.75rem - 0.1rem);
 margin-bottom: 0;
}

.email-wrapper .sidebar.open {
 left: 0;
}

/* Mail List Container */
.email-wrapper .mail-list-container {
 height: 100%;
 overflow: auto;
 padding-left: 0;
 padding-right: 0;
 overflow-x: hidden;
}
#showPopupButton{
 cursor: pointer;
}
.email-wrapper .mail-list-container a {
 text-decoration: none;
}

.email-wrapper .mail-list-container .mail-list {
  
 display: flex;
 flex-direction: row; 
 width: 100%; 
}

.email-wrapper .mail-list-container .mail-list .new_mail :hover {
 background-color: #515150 !important;
}

.email-wrapper .mail-list-container .mail-list.new_mail{
 
 background: #007bff !important;
 color: #fff;
 box-sizing: border-box; 
}

.email-wrapper .mail-list-container .mail-list:last-child {
 /* border-bottom: none; */
}

.email-wrapper .mail-list-container .mail-list .form-check {
 margin-top: 0px;
 width: 11%;
 min-width: 20px;
}

.email-wrapper .mail-list-container .mail-list .content {
 width: 100%;
 padding-left: 0;
 padding-right: 0;
}

.email-wrapper .mail-list-container .mail-list .content .sender-name {
 font-size: 0.75rem;
 font-weight: 400;
 max-width: 100%;
 font-size: 0.99rem;
}

.email-wrapper .mail-list-container .mail-list .content .sender-name .date_mail {
 float: right;
}
.email-wrapper .mail-list-container .mail-list .content .sender-name .bg-blue-customer {
   margin-bottom: 0;
   border-radius: 50px;
   font-weight: normal;
   background-color: #60bafd !important;
   color: #fff;
   font-size: 0.98rem;
}
.email-wrapper .mail-list-container .mail-list .content .sender-name .bg-blue-admin {
   margin-bottom: 0;
   border-radius: 50px;
   font-weight: normal;
   background-color: #FFC107 !important;
   color: #fff;
   font-size: 0.98rem;
}
.email-wrapper .mail-list-container .mail-list .content .sender-name .bg-blue-luna {
   margin-bottom: 0;
   border-radius: 50px;
   font-weight: normal;
   background-color: #ff758e !important;
   color: #fff;
   font-size: 0.98rem;
}

.email-wrapper .mail-list-container .mail-list .content .message_text {
 margin: 0;
 max-width: 93%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 18px;
}

.email-wrapper .mail-list-container .mail-list .details {
 width: 5.5%;
}

.email-wrapper .mail-list-container .mail-list .details .date {
 text-align: right;
 margin: auto 15px auto 0;
 white-space: nowrap;
}

.email-wrapper .mail-list-container .mail-list .details i {
 margin: auto 0;
 color: #ddd;
}

.email-wrapper .mail-list-container .mail-list .details i.favorite {
 color: #fcd539;
}

.email-wrapper .mail-list-container .mail-list.new_mail {
 /* background: -webkit-gradient(linear, left top, left bottom, from(#ced6df), to(#b6c6d7)) !important; */
 background: #fff;
}
.email-wrapper .mail-list-container .mail-list.oddrow {
 /* background: #fff; */
}

.email-wrapper .mail-list-container .mail-list.new_mail .details .date {
 color: #000000;
}

/* Message Content */
.email-wrapper .message-body .sender-details {
 padding: 20px 15px 0;
 border-bottom: 1px solid #e9e9e9;
 display: -webkit-flex;
 display: flex;
 position: relative;
 justify-content: space-between;
}

.email-wrapper .message-body .sender-details .details {
 padding-bottom: 0;
}

.email-wrapper .message-body .sender-details .details .msg-subject {
 font-weight: 600;
 font-size: 20px;
}

.email-wrapper .message-body .sender-details .details .sender-email {
 margin-bottom: 20px;
 font-weight: 400;
 font-size: 17px;
}

.email-wrapper .message-body .sender-details .details .sender-email i {
 font-size: 1rem;
 font-weight: 600;
 margin: 0 1px 0 7px;
}

.email-wrapper .message-body .message-content {
 padding: 50px 15px;
 font-size: 17px;
 max-height: 72vh;
 overflow: auto;
}

.email-wrapper .message-body .attachments-sections ul {
 list-style: none;
 border-top: 1px solid #e9e9e9;
 padding: 30px 15px 20px;
}

.email-wrapper .message-body .attachments-sections ul li {
 padding: 10px;
 margin-right: 20px;
 border: 1px solid #e9e9e9;
 border-radius: 5px;
}

.email-wrapper .message-body .attachments-sections ul li .thumb {
 display: inline-block;
 margin-right: 10px;
}

.email-wrapper .message-body .attachments-sections ul li .thumb i {
 font-size: 30px;
 margin: 0;
 color: #2e383e;
}

.email-wrapper .message-body .attachments-sections ul li .details p.file-name {
 display: block;
 margin-bottom: 0;
 color: #2e383e;
}

.email-wrapper .message-body .attachments-sections ul li .details .buttons .file-size {
 margin-right: 10px;
 margin-bottom: 0;
 font-size: 13px;
}

.email-wrapper .message-body .attachments-sections ul li .details .buttons a {
 font-size: 13px;
 margin-right: 10px;
}

.email-wrapper .message-body .attachments-sections ul li .details .buttons a:last-child {
 margin-right: 0;
}

.bg-white {
   background-color: #fff!important;
}
.align-items-stretch {
   -ms-flex-align: stretch!important;
   align-items: stretch!important;
   height: 88.8vh !important;
}
.row {
   display: -ms-flexbox;
   display: flex;
   flex-wrap: wrap;
}

.btn:hover {
   color: #212529;
   text-decoration: none;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
   cursor: pointer;
}
.btn-block {
   display: block;
   width: 100%;
}
.btn {
   display: inline-block;
   /* font-weight: 400; */
   color: #212529;
   text-align: center;
   vertical-align: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
   padding: 0.375rem 0.75rem;
   font-size: 18px;
   line-height: 1.5;
   border-radius: 0.25rem;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
   color: #fff;
   padding: 6px 12px;
   width: 70px;
   font-weight: bold !important;
   background-color: #0069d9 !important;
   border-radius: unset !important;
   border: 2px solid #0069d9 !important;
   margin: auto;
   /* margin-top: 12px; */
   box-shadow: rgb(0 60 191) 0px 16px 15px -13px;
}

.btn-primary:hover {
 background-color: #fff !important;
 color: #0069d9 !important;
 border: 2px solid #0069d9;
}
.email-wrapper .col-md-2 .menu-bar .menu-items li {
   padding: 10px 15px;
   transition: 0.4s;
   position: relative;
   font-size: 18px;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: space-between;
   justify-content: space-between;
}
.email-wrapper .mail-sidebar .menu-bar .menu-items {
   padding: 0;
   margin-bottom: 0;
   height: auto;
   list-style-type: none;
}
.menu-items {
   padding-inline-start: 0px;
}
.mdi-email-outline:before {
   content: "\F1F0";
}
.mdi:before, .mdi-set {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
   text-rendering: auto;
   line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
.container {
   max-width: none !important;
}
.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
   font-size: 18px;
}
.btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) {
   font-size: 18px;
}
.action-btn {
   font-size: 18px !important;
}
.allmail {
   width: 100%;
}
.mr-3 {
   margin: 0 1rem 0 0;
   border-radius: 50%;
   width: 5rem;
   height: 5rem;
   object-fit: cover;
   background: #f4f4f4;
}

.dropdown {
 position: absolute;
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: absolute;
 background-color: #f1f1f1;
 min-width: 270px;
 z-index: 1;
 transition: opacity 0.5s ease-in-out;
}

.dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none !important;
 display: block;
 border-bottom: none !important;
}

.dropdown-content a:hover {background-color: #ddd}

a:hover{
 color: #007bff !important;
}

.dropdown:hover .dropdown-content {
 display: block;
 opacity: 1;
}

.btn:hover, .dropdown:hover .btn {
 background-color: #6c757d;
 color: #fff;
}
.action-drop {
 padding-top: 8px !important;
 padding-bottom: 8px !important;
}
#Mail-rearch {
   width: 80% !important;
   float: left;
}
.searchMail {
   display: block;
   height: calc(1.5em + 0.75rem + 2px);
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #495057;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
label {
   display: unset !important;
}

.login-email {
   justify-content: center !important;
   margin-top: 4%;
}

.user-list {
   padding: 10px 0px !important;
}

.user-list-3 {
   width: 1rem;
   height: 1rem;
}
.user-list-logo-3 {
   margin-left: 1rem!important;
   margin-right: 4px !important;
}
.border-right {
   border-right: 2px solid #dee2e6!important;
}
/* .row .groupbutton {
   padding-bottom: 1.1rem!important;
   border-bottom: 1px solid #e9e9e9;
} */

.rn-head{
 display: flex;
 align-items: center;
 justify-content: space-between;
 background-color: #001529;
 padding: 12px 24px;
}

.rn-head img{
 /* width: 280px; */
}

.rn-head a{
 border-bottom: none;
}

.rn-head .user-list a{
 color: #fff !important;
 font-size: 18px;
}

.row div:nth-child(2) .btn{
 border:2px solid #007bff;
}

.row{

}

.pad-12{
 padding: 10px 25px;
}

.container{
 padding: unset !important;
 background: #fff;
 height: 88.53% !important;
}


.wid-690{
 min-width: 690px;
}

.row{
 margin: unset !important;
}

.flex-col{
 display: flex;
 flex-direction: column; 
 color: #000;
}


.form-check{
 display: none !important;
}

.mail-list{
 /* background-color: #fff !important; */
}

.compose-btn span{
 font-weight: bold;
 font-size: 32px;
 height: 14px;
 position: absolute;
 left: 38px;
 top: -9px;
}

.compose-btn{
 border-radius: 20px !important;
 display: flex !important;
 align-items: center;
 justify-content: center;
 column-gap: 6px;
 position: relative;
}



.badge-success{
 background-color: #007bff!important;
}

span.date_mail {
 font-size: 12px !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active{
 background-color: #007bff !important;
 border-color: #007bff !important;
}

.btn-outline-secondary:hover .text-primary{
 color: #fff !important;
}

.new_mail p:first-child{
 font-weight:600 !important;
}

.new_mail span{
 font-weight:normal !important;
}

@-moz-document url-prefix() {
 .compose-btn span {
   top: -6px !important;
 }
}

.mail-view .row{
 justify-content: start;
}




@media (min-width: 1200px){
 .container {
     /* max-width: 1400px !important; */
 }
}

body {
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE and Edge */
}


body::-webkit-scrollbar {
 width: 0em;
}

body:-webkit-scrollbar-track {
 background-color: transparent;
}

body::-webkit-scrollbar-thumb {
 background-color: transparent;
}

body::-webkit-scrollbar-thumb:hover {
 background-color: transparent;
}

div::-webkit-scrollbar {
 width: 0em;
}

div:-webkit-scrollbar-track {
 background-color: transparent;
}

div::-webkit-scrollbar-thumb {
 background-color: transparent;
}

div::-webkit-scrollbar-thumb:hover {
 background-color: transparent;
}

div {
 scrollbar-width: none; /* Firefox */
 scrollbar-color: transparent transparent; /* Firefox */
}

div:hover {
 scrollbar-color: transparent transparent; /* Firefox */
}

.user-list a{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 215px;
}

.pad-ls-2{
 padding: 18px 12px !important;
}




.ind-menu{
 width: 200px;
 height: 100%;
 background-color: #001628;
 color: white;
}

form{
 height: 100%;
}

.ind-content{
 padding: 8px;
 text-align: center;
 font-size: 16px;
 font-weight: bold;
}

.ind-settings{
 position: absolute;
 left: 32px;
 top: 15px;
}

.ind-rela{
 position: relative;
}

.ind-rela a{
 color: #fff !important;
 border-bottom: 0 !important;

}

.center{
 /* text-align: center; */
 padding-left: 52px !important;
}

.flx-spec{
 flex: 0 0 88%;
 column-gap: 32px;
}

.flex{
 display: flex;
}

.height-90{
 height: 90.7%;
}

.action{
 height: 150px;
 flex: 1;
 border: 1px solid #8080805c;
 display: flex;
 flex-direction: column;
 border-radius: 8px;
 font-size: 20px;
 column-gap: 6px;
 padding: 6px;
 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 font-family: sans-serif;
 background: #f7ede224;
 justify-content: space-evenly;
 color: #fff;
 padding: 8px;
}

.action.ac-cnt1:hover {
 cursor: pointer !important;
}
.action.ac-cnt2:hover {
 cursor: pointer !important;
}
.action.ac-cnt3:hover {
 cursor: pointer !important;
}
.action.ac-cnt4:hover {
 cursor: pointer !important;
}

.rn-head img:hover{
 cursor: pointer !important;
}

.details{
 font-size: 12px;
}

.index-cnt-box2{
 overflow: auto;
 height: 100% !important;
 width: 88%;
 padding: 12px 24px;
}

.ac-cnt1{
 background-image: linear-gradient(-60deg, #556ace 0%, #6e39a5 100%);
}
.ac-cnt3{
 /* background-image: linear-gradient(to left, #dfb903 0%, #e12325 100%); */
 background-image: linear-gradient(-45deg, #783099 0%, #a92c22 100%);
}
.ac-cnt4{
 background-image: linear-gradient(-52deg, #7ebfa2 0%, #0c8bb3 100%);
}
.ac-cnt2{
 background: linear-gradient(to left, #00aacf, #3a7bd5);
}

.mail-cnt{
 font-size: 16px !important;
 font-weight: 400 !important;
 margin-left: 6px;
}

.f-cnt{
 font-size: 48px;
 font-weight: 400;
}
.flex-gap{
 column-gap: 12px;
}

.inputtext{
 flex: 0 0 40%;
}

.ind-input{
 width: 100%;
 border: 1px;
 padding: 0px 12px;
 border-radius: 6px;
 height: 38px;
 background-color: rgb(255 255 255 / 30%);
}

.ind-input:focus::placeholder {
 color: #000;
}
.ind-input::placeholder {
 color: #fff;
}

input:focus {
 outline: none;
 background-color: #fdfdfd;
}

input:-webkit-autofill {
 /* Set the background color to your desired color */
 -webkit-box-shadow: 0 0 0 30px white inset; /* For example, this will set the background color to white */
}

.content-bar{
 margin: 12px 0px;
 padding: 4px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 /* width: 610px; */
 width: 48.5%;
 display: inline-block;
 background: #fff;
 height: 350px;
 border-radius: 12px;
}

.line-chart{
 margin-left: 24px;
}


.highcharts-figure,
.highcharts-data-table table {
   min-width: 320px;
   max-width: 660px;
   margin: 1em auto;
}

.highcharts-data-table table {
   font-family: Verdana, sans-serif;
   border-collapse: collapse;
   border: 1px solid #ebebeb;
   margin: 10px auto;
   text-align: center;
   width: 100%;
   max-width: 500px;
}

.highcharts-data-table caption {
   padding: 1em 0;
   font-size: 1.2em;
   color: #555;
}

.highcharts-data-table th {
   font-weight: 600;
   padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
   padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
   background: #f8f8f8;
}

.highcharts-data-table tr:hover {
   background: #f1f7ff;
}

.content-bar3{
 margin: 12px 0px;
 padding: 4px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 width: 48.5%;
 display: inline-block;
 background: #fff;
 border-radius: 12px;
 position: relative;
 height: 490px;
}

.content-bar3 select{
   position: absolute;
   left: 12px;
   top: 8px;
   padding: 6px;
}

#level2{
 margin-left: 24px;
}

.content-bar3{
 text-align: center;

 >span{
   font-size: 18px;
   font-weight: bold;
 }
}

.btn-group{
 column-gap: 12px;
}

.mail-list-container .btn{
 border-radius: 12px !important;
 padding: 2px 8px !important;
}

.mail-view .img-btn{
 border: unset;
 background: unset;
 padding: unset !important;


}

.mail-view .img-btn img{
 height: 32px;
}

.mail-view .img-btn:hover{
 background-color: #fff !important;
 border-color: #fff !important;
}

.action-btn{
 padding: 2px 12px !important;
 border-radius: 50px !important;
 border: 1px solid #888888 !important;
}

.linebar{
 margin: 24px 0px;
 padding: 10px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 background: #fff;
 border-radius: 12px;
 position: relative;
 /* width: 1245px; */
}

.odometer {
 font-size: 42px;
}

.odo{
 background: unset !important;
 border-radius: unset !important;
 padding: unset !important;
 color: #fff !important;
}

.odometer-value{
 color:#fff !important;
}

.odo span{
 background: unset !important;
 box-shadow: unset !important;
}

.odometer-digit{
 padding: unset !important;
 vertical-align: unset !important;
}

.odometer-digit-inner{
 left:unset !important;
}

.container {
 height: 100vh;
} 
.align-items-stretch {
 height: 100vh;
} 
#mainselect{
   position: relative;
 margin-top: 12px;
}
#chartdiv {
   background: white;
   width: 100%;
   height: 59vh;
   padding: 10px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   border-radius: 12px;
}
#interval {
   position: absolute;
 top: 12px;
 right: 12px;
   height: 2rem;
   width: 10rem;
   border-radius: 4px;
}
#interval:focus-visible {
   outline:none;
}
#lableinterval {
   position: absolute;
   top: 6%;
   right: 21%;
}
html {
   scroll-behavior: smooth;
}

td{
   padding: 6px;
   /* border-right: 1px solid #8080802b; */
}
/* #autono2{
   position: relative;
   left: -9rem;
   top: 4px;
}
#autono2:focus-visible{
   outline:none;
} */
#datasetSelect {
   position: absolute;
 left: 491px;
 padding: 6px;
}


 
#chartdiv_ {
 width: 36%;
 height: 370px;
margin-top: 4rem;
}

.chart-container{
margin-top:4rem;
}
.circ_head{
color:#6771dc;
margin:0 0 0 12px;
}
.circ_head1{
color:#6794dd;
margin:0 0 0 12px;
}
.effi_table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 64%;
height: 80%;
margin-top: 4rem;
}
.effi_table td, .effi_table th {
padding: 8px;
text-align:center;
}
.effi_table tr:nth-child(even){background-color: #f2f2f2;}
.effi_table tr:hover {background-color: #ddd;}

.effi_table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #6771dc;
color: white;
}
.effi_table td {
white-space:pre
}

.staff-head .action{
 flex: 1 0 250px;
}

.staff-head {
 overflow: auto;
 border-radius: 12px;
 margin-bottom: 12px;
 flex-wrap: wrap;
 row-gap: 12px;
}

div::-webkit-scrollbar {
 height: 0em;
}

/* Define the animation keyframes */
@keyframes slide-up {
 from {
   opacity: 0;
   transform: translateY(20px); /* Initial position, adjust as needed */
 }
 to {
   opacity: 1;
   transform: translateY(0);
 }
}

/* Apply the animation to .action elements */
.staff-head .action {
 opacity: 0; /* Initially hidden */
 animation: slide-up 0.5s ease-in-out forwards; /* Apply the animation */
}

/* Delay each .action element to create a stagger effect */
.staff-head .action:nth-child(2) {
 animation-delay: 0.3s; /* Adjust the delay for each element */
}
.staff-head .action:nth-child(3) {
 animation-delay: 0.5s;
}
.staff-head .action:nth-child(4) {
 animation-delay: 0.7s;
}
.staff-head .action:nth-child(5) {
 animation-delay: 0.9s; /* Adjust the delay for each element */
}
.staff-head .action:nth-child(6) {
 animation-delay: 0.3s; /* Adjust the delay for each element */
}
.staff-head .action:nth-child(7) {
 animation-delay: 0.5s;
}
.staff-head .action:nth-child(8) {
 animation-delay: 0.7s;
}
.staff-head .action:nth-child(9) {
 animation-delay: 0.9s; /* Adjust the delay for each element */
}

.staff-cont{
 height: 390px !important;
}


.staff-head .action{
 font-size: 16px !important;
}

.cmp{
 width: 70% !important;
 height: 42px;
 margin-top: 18px;
 font-size: 18px !important;
 border-radius: 40px !important;
}

.ac-cnt11{background: #2a6f97;}
.ac-cnt21{background: #2a6f97;}
.ac-cnt31{background: #2a6f97;}
.ac-cnt41{background: #2a6f97;}
.ac-cnt51{background: #2a6f97;}
.ac-cnt61{background: #2a6f97;}
.ac-cnt71{background: #2a6f97;}
.ac-cnt81{background: #2a6f97;}

.pointer:hover{
 cursor: pointer;
}


.bell-img{
 width: 24px !important;
}

.notification {
 position: relative;
 align-items: center;
}

.bell-icon {
 cursor: pointer;
}

.dropdown-content1 {
 display: none;
 position: absolute;
 background-color: #fff;
 border: 1px solid #ccc;
 padding: 10px;
 /* max-width: max-content; */
 width: max-content;
 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
 z-index: 1;
 right: 118px;
 top: 34px
}

.dropdown-content2 {
 display: none;
 position: absolute;
 background-color: #fff;
 border: 1px solid #ccc;
 padding: 10px;
 max-width: 400px;
 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
 z-index: 1;
 right: 0;
 top: 70px;
}

.relative{
 position: relative;
}

.bell{
 margin-right: 20px;
}

.center-align{
 align-items: center;
}

.dropdown-open {
 display: block;
 animation: slideDown 0.3s ease-in-out;
}

.dropdown-open1 {
 display: block;
 animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
 0% {
     transform: translateY(-10px);
     opacity: 0;
 }
 100% {
     transform: translateY(0);
     opacity: 1;
 }
}




.ind-stafcontent:hover {
 cursor: pointer;
 font-weight: bold;
 color: #007bff;
}
.ind-stafcontent{
 padding: 6px 1px 6px 16%;
 font-size: 16px;
 /* font-weight: bold; */
}

.act{
 background: #ffffff;
 color: #037bff;
}

.content-bar1{
 margin: 12px 0px;
 padding: 4px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 /* width: 610px; */
 width: 48.5%;
 display: inline-block;
 background: #fff;
 /* height: 350px; */
 border-radius: 12px;
}

.action:hover{
 cursor: pointer;
}

.todo_container {
 background: white;
 /* width: 40%; */
 height: 22rem;
 padding: 10px;
 /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
 border-radius: 12px;
/* background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */

/* background:#066acd; */
}

#newtask {
 position: relative;
padding: 12px 0px;

}

#newtask #myInput {
 width: 55%;
 height: 40px;
 font-family: 'Poppins', sans-serif;
 font-size: 15px;
 border: 2px solid #d1d3d4;
 padding: 7px;
 color: #111111;
 font-weight: 500;
 position: relative;
 border-radius: 5px;
}
#timers_set {
width: 20%;
 height: 40px;
 font-family: 'Poppins', sans-serif;
 font-size: 15px;
 border: 2px solid #d1d3d4;
 padding: 8px;
 color: #111111;
 font-weight: 500;
 position: relative;
 border-radius: 5px;

}
#timers_set:focus-visible{
outline: none;
}
#newtask #myInput:focus-visible {
 outline: none;
}
#newtask #myInput:focus {
 outline: none;
 border-color: #0d75ec;
}

#newtask button {
 position: relative;
 float: right;
 width: 20%;
 height: 40px;
 border-radius: 5px;
 font-family: 'Poppins', sans-serif;
 font-weight: 500;
 font-size: 16px;
 /* background-color: #0d75ec; */
background: #007bff;
border:1px solid #007bff;
 border: none;
 color: #ffffff;
 cursor: pointer;
 outline: none;
}

#newtask button:hover {
background: #fff;
color:#007bff;
border:1px solid #007bff;
}

#tasks {
 /* background-color: #f2f2f2; */
 padding: 30px 20px;
 margin-top: 10px;
 border-radius: 10px;
 width: 100%;
 position: relative;
 overflow: auto;
 height: 15rem;
box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 1px;
}

#tasks::-webkit-scrollbar {
 display: none;
}

.task {
background: rgb(246, 248, 253); /* background-color: #c5e1e6; */
 height: 50px;
 margin-bottom: 8px;
 padding: 5px 10px;
 display: flex;
 border-radius: 5px;
 align-items: center;
 justify-content: space-between;
 border: 1px solid #939697;
 cursor: pointer;

}

.task span {
 font-family: 'Poppins', sans-serif;
 font-size: 15px;
 font-weight: 400;
}

.task button {
 background-color: #0a2ea4;
 color: #ffffff;
 height: 100%;
 width: 40px;
 border-radius: 5px;
 border: none;
 cursor: pointer;
 outline: none;
}

.completed {
 text-decoration: line-through;
}
.res_bin {
position: relative;
top: 4rem;
left: 4rem;
font-size: 1.5rem;
color: #afadad;
}

.fa-trash-alt:before {
 content: "\f2ed";
}

.containergd {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
 width: 100%;
}

.bell:hover, .bell-pro:hover{
 cursor: pointer;
}

.gap{
 column-gap: 12px;
}

.actiondropdown-content {
 position: absolute;
 background-color: #f1f1f1;
 min-width: 270px;
 z-index: 1;
 transition: opacity 0.5s ease-in-out;
}

.actiondropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none !important;
 display: block;
 border-bottom: none !important;
}

.actiondropdown-content a:hover {background-color: #ddd};

.dropdown:hover .actiondropdown-content {
 display: block;
 opacity: 1;
}


.staffeffi_table {
 font-family: Arial, Helvetica, sans-serif;
 border-collapse: collapse;
 width: 100%;
 height: 100%;
}

.staffeffi_table td, .staffeffi_table th {
 padding: 8px;
 text-align:center;
}
.staffeffi_table tr:nth-child(even){background-color: #f2f2f2;}
.staffeffi_table tr:hover {background-color: #ddd;}

.staffeffi_table th {
 padding-top: 12px;
 padding-bottom: 12px;
 text-align: center;
 background-color: #6771dc;
 color: white;
}
.staffeffi_table td {
 white-space:pre;
}

.headflex{
 display: flex;
 flex-direction: column;
 align-items: center;
 font-size: 22px;
 color: #ffffff;
 letter-spacing: 1px;
 font-weight: 800;
 font-family: 'Nunito Sans', sans-serif;
 column-gap: 12px;
}

.rn-head{
 display: flex;
 align-items: center;
 justify-content: space-between;
 background-color: #001529;
 padding: 8px 30px;
 /* padding: 10px 30px 0px 32px; */
}

.aispan{
 color: red;    
 margin-top: 4px;
 font-size: 8px;
 letter-spacing: 0px;
 line-height: 8px;
 margin-left: auto;
}

.mleft{
 margin-left: auto;
 margin-right: 18px;
}

.popup {
 /* display: none; */
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
 width: 100%;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: #8f8f8f87;
 padding: 20px;
}

.popup-content {
 text-align: center;
 width: 350px;
 height: 191px;
 background: #ffffff;
 border: 1px solid lightgray;
 border-radius: 4px;
 position: relative;
 padding: 6px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;

 #okButton1{
   position: absolute;
   right: 4px;
   bottom: 4px;
   background: #f2f2f2;
   border: 0.5px solid lightgray;
   padding: 6px 12px;
   font-weight: 500;
 }

 #okButton1:hover{
   background: #007bff;
   color: #fff;
 }
}

.popin2 select{
 padding: 4px 8px;
}

.popin1{
 font-weight: bold;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(206, 214, 223)), to(rgb(182, 198, 215)));
 border: 1px solid;
 border-radius: 4px;
 width: 100%;
 justify-content: space-between;
 padding: 2px;


 .close-icon{
   background: transparent;
   font-size: 16px;
   border: none;
 }
}

.bell-proo{
 width: 28px;
}


.hub-stafcontent {
 padding: 8px 0px 8px 15%;
 font-size: 14px;
}

/*  .dropdown-content11 {
 display: none;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 width: 100%;
 z-index: 1;
 animation-name: fadeIn;
 animation-duration: 1s;
}

@keyframes fadeIn {
 from {
     opacity: 0;
 }
 to {
     opacity: 1;
 }
}*/

.ind-stafcontent{
 position: relative;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.hub-stafcontent:hover{
 cursor: pointer;
}

.dropdown-content .ind-stafcontent {
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}

.dropdown:hover .dropdown-content {
 display: block;
}

.arrow, .arrow1, .parrow1 {
 font-size: 12px;
 transition: transform 0.4s;
 position: absolute;
 left: 14px;
 top: 10px;
 transform: rotate(270deg);
}

.dropdown11{
 position: relative;
}

.pad-l15{
 padding-left: 15% !important;
}

.start_star {
 color: #ff9000;
position: absolute;
top: 16px;
}



.startooltip {
 position: relative;
 display: inline-block;
width: 0px;
}

.startooltip .tooltiptext {
 visibility: hidden;
 width: max-content;
 background-color: #333;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px;
 position: absolute;
 z-index: 1;
bottom: 73%;
 left: 50%;
 transform: translateX(-50%);
 /* opacity: 0; */
 transition: opacity 0.3s;
}

.startooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
}

/* 14sep23 */

.arrow-up {
 font-size: 28px;
 line-height: 1.2;
 color: #42bf42;
 font-weight: lighter;
}

.base-align{
 align-items: baseline;
 column-gap: 2px;
}

#hr-funcontainer {
 height: 380px;
}

.highcharts-figure,
.highcharts-data-table table {
 min-width: 360px;
 max-width: 600px;
 margin: 1em auto;
}

.highcharts-data-table table {
 font-family: Verdana, sans-serif;
 border-collapse: collapse;
 border: 1px solid #ebebeb;
 margin: 10px auto;
 text-align: center;
 width: 100%;
 max-width: 500px;
}

.highcharts-data-table caption {
 padding: 1em 0;
 font-size: 1.2em;
 color: #555;
}

.highcharts-data-table th {
 font-weight: 600;
 padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
 padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
 background: #f8f8f8;
}

.highcharts-data-table tr:hover {
 background: #f1f7ff;
}

#chartdivone {
 height: 400px;
}

.icContentpro {
 display: none;
 position: absolute;
 background-color: #fff;
 border: 1px solid #ccc;
 padding: 10px;
 /* max-width: 400px; */
 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
 z-index: 1;
 right: 234px;
 border-radius: 5px;
 top: 169px;
}

.ic-open1 {
 display: block;
 animation: slideDown 0.3s ease-in-out;
}

.bell_notifif span {
 position: relative;
 left: 5px;
 top: -3px;
 font-size: 14px;
}
.bell_notifif div{
 /* background: #ff0000;
 color: white;
 border-radius: 50%;
 position: absolute;
 top: 27px;
 width: 18px;
 right: 40px;
 height: 18px; */

 background: #ff0000;
 color: white;
 border-radius: 50%;
 top: -28px;
 width: 18px;
 right: -8px;
 height: 18px;
}
#dropdownContent .mail1  {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.mailsub{
 font-size: 18px;
 font-weight: 400;
 margin-top: 12px;
}

.mailid{
 line-height: 24px;
   height: 24px;
   font-size: 13px;
}

.mailtime{
 font-size: 10px;
 font-weight: 600;
}

#chartdiv1{
 background: white;
 width: 100%;
 height: 59vh;
 padding: 10px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 border-radius: 12px;
 position: relative;
}

#chartdiv{
 margin-bottom: 12px;
}

.act {
 background: #454547;
 color: #fff;
 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
 border-radius: 10px;
}
.ind-stafcontent{
 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
