.posi_user_icon {
  height: 25px;
  margin-top: 12px;
}

.posi_user_validation {
  color: "#ff4d4f";
}

.chartTitle {
  display: flex;
  justify-content: space-between;
}

.posi_user_captcha_refresh {
  color: "#004F9F" !important;
  font-weight: 600;
  font-size: 25px;
  position: absolute;
  right: 1.4rem;
  cursor: pointer;
}

.date_display_mobile {
  display: none;
}

/* .posi_bmid_search_container {
  display: flex !important;
  align-items: center !important;
} */

/* .posi_bmid_search_width {
  width: 100%;
} */

.graph_label_head {
  display: flex !important;
}

.graph_label_mobile_head {
  display: none !important;
}

/* Styles for mobiles */
@media (max-width: 320.99px) {

  body {
    line-height: 1;
  }

  .login-div {
    width: 20rem !important;
  }

  .p-4 {
    padding: 1rem !important;
  }

  .posi_user_icon {
    margin-top: 14px;
  }

  .posi_user_padding {
    padding-left: 12px !important;
  }

  .posi_user_validation {
    margin-top: 5px !important;
  }

  .captcha-main {
    flex-wrap: wrap !important;
  }

  .captcha-input {
    margin-left: 30px !important;
    width: 200px !important;
    margin-top: 10px !important;
  }

  .posi_user_update {
    width: 80%;
  }

  .date_hide_mobile {
    display: none;
  }

  .date_display_mobile {
    display: inline-block;
  }

  .user-avatar-mobile {
    position: relative;
    left: 8.5rem;
    display: block;
  }

  /* .posi_margin_top_mobile {
    margin-top: 130px !important;
  } */

  .posi_mobile_header {
    height: 60px !important;
    margin-top: 10px !important;
  }

  .alignChargeLogHeader {
    flex-wrap: wrap !important;
    row-gap: 0rem !important;
    justify-content: flex-start;
    column-gap: 1rem !important;
    margin-left: 20px;
    margin-bottom: 10px;
  }

  .posi_mobile_header>div {
    width: 130px !important;
  }


  .posi_mobile_tasksummary_card {
    height: 70px !important;
    padding: 7px !important;
  }

  .posi_mobile_tasksummary_card_desc {
    margin-top: 3px !important;
  }

  .chartTitle,
  .operation-status-title {
    padding: 6px !important;
  }

  .chartTitle {
    display: flex;
    justify-content: space-between;
  }

  .chartTitle > .name {
    position: relative;
    top: 7px;
  }

  .operation-status {
    height: 206px !important;
  }

  .unit-div {
    top: 18px !important;
  }

  .unit-lable {
    margin-top: 0px !important;
  }

  .dropdown-item {
    padding: 0.75rem 0.75rem !important;
  }

  .sidebar #sidebar_menu>li a {
    padding: 10px 20px 10px 30px !important;
  }

  .sub-menu li {
    padding: 0px 0 0 0 !important;
  }

  .img-operation-site {
    width: 60px;
    height: 60px;
    padding: 0px;
  }

  .system-countL {
    font: normal normal bold 30px/30px Inter;
  }

  .system-nameL {
    font: normal normal 13px/15px Inter;
    margin-top: 6px;
  }

  .add-device-main {
    height: 20rem;
  }

  .header_button {
    width: 22px !important;
    height: 22px !important;
  }

  .count-p2 {
    top: 61.5% !important;
  }

  .posi_device_report_content {
    position: relative;
    top: 18px;
    left: 30px;
  }

  .device-card-left {
    margin-top: 4rem !important;
  }

  .firmhis_report {
    height: 16rem !important;
  }

  .selector-body-height {
    height: 14rem !important;
  }

  .selector {
    top: 14px !important;
  }

  .column-title {
    font: normal normal bold 14px/30px Inter !important;
  }

  .slector-body {
    font-size: 14px !important;
    margin: 6px 0 !important;
  }


  .justify-end {
    position: relative !important;
    left: 12.5rem !important;
    top: 0.5rem !important;
  }

  .main-panel {
    height: 27rem !important;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .export {
    right: 2px !important;
    top: 28px !important;
  }

  .paddingT {
    padding: 0.25rem !important;
  }

  .img_container_flex {
    gap: 15px;
  }

  .serail_position {
    position: absolute;
    top: 56px;
    z-index: 1;
    left: 90px;
  }

  .export1 {
    right: 2px !important;
    top: 28px !important;
  }

  .graph_label_head {
    display: none !important;
  }

  .graph_label_mobile_head {
    display: block !important;
  }
}

@media (min-width: 321px) and (max-width: 376px) {
  .img_container_flex {
    gap: 15px;
  }

  body {
    line-height: 1;
  }

  .login-div {
    width: 24rem !important;
  }

  .p-4 {
    padding: 1rem !important;
  }

  .posi_user_icon {
    margin-top: 14px;
  }

  .posi_user_padding {
    padding-left: 12px !important;
  }

  .posi_user_validation {
    margin-top: 5px !important;
  }

  .captcha-main {
    flex-wrap: wrap !important;
  }

  .captcha-input {
    margin-left: 30px !important;
    width: 200px !important;
    margin-top: 10px !important;
  }

  .posi_user_captcha_refresh {
    right: 2.5rem !important;
  }

  .captcha-input {
    width: 237px !important;
  }

  .posi_user_update {
    width: 80%;
  }

  .date_hide_mobile {
    display: none;
  }

  .date_display_mobile {
    display: inline-block;
  }

  .user-avatar-mobile {
    position: relative;
    left: 11.5rem;
    display: block;

  }

  .posi_mobile_header {
    height: 60px !important;
    margin-top: 10px !important;
  }

  .alignChargeLogHeader {
    flex-wrap: wrap !important;
    row-gap: 0rem !important;
    justify-content: flex-start;
    column-gap: 1rem !important;
    margin: 10px 4px 10px 4px;
  }

  .posi_mobile_header>div {
    width: 130px !important;
  }

  .posi_mobile_tasksummary_card_desc {
    margin-top: 18px !important;
  }

  .chartTitle,
  .operation-status-title {
    padding: 6px !important;
  }

  .chartTitle {
    display: flex;
    justify-content: space-between;
  }

  .chartTitle > .name {
    position: relative;
    top: 7px;
  }

  .operation-status {
    height: 200px !important;
  }

  .unit-div {
    top: 18px !important;
  }

  .unit-lable {
    margin-top: 5px !important;
  }

  .dropdown-item {
    padding: 0.75rem 0.75rem !important;
  }

  .sidebar #sidebar_menu>li a {
    padding: 10px 20px 10px 30px !important;
  }

  .sub-menu li {
    padding: 0px 0 0 0 !important;
  }

  .img-operation-site {
    width: 60px;
    height: 60px;
    padding: 0px;
  }

  .system-countL {
    font: normal normal bold 30px/30px Inter;
  }

  .system-nameL {
    font: normal normal 13px/15px Inter;
    margin-top: 6px;
  }

  .add-device-main {
    height: 20rem;
  }

  .header_button {
    width: 22px !important;
    height: 22px !important;
  }

  .count-p2 {
    top: 61.5% !important;
  }

  .posi_device_report_content {
    position: relative;
    top: 10px;
    left: 30px;
  }

  .device-card-left {
    margin-top: 4rem !important;
  }

  .firmhis_report {
    height: 23rem !important;
  }

  .selector-body-height {
    height: 20rem !important;
  }

  .selector {
    top: 14px !important;
  }

  .column-title {
    font: normal normal bold 14px/30px Inter !important;
  }

  .slector-body {
    font-size: 14px !important;
    margin: 6px 0 !important;
  }

  /* .posi_bmid_search_container {
    display: block !important;
  } */

  .justify-end {
    position: relative !important;
    left: 16.5rem !important;
    top: 0.5rem !important;
  }

  .dow-icon {
    width: 25px !important;
    height: 25px !important;
    margin-right: 0.9rem !important;
  }

  .position2 {
    bottom: 38px !important;
  }

  .marginT {
    margin-top: 188px !important;
  }

  .paddingT {
    padding: 0.25rem !important;
  }

  .serail_position {
    position: absolute;
    top: 56px;
    z-index: 1;
    left: 144px;
  }

  .export1 {
    right: 2px !important;
    top: 28px !important;
  }

  .graph_label_head {
    display: none !important;
  }

  .graph_label_mobile_head {
    display: block !important;
  }
}

@media (min-width: 377px) and (max-width: 389px) {
  .img_container_flex {
    gap: 15px;
  }
  
  body {
    line-height: 1;
  }

  .login-div {
    width: 26rem !important;
  }

  .p-4 {
    padding: 1rem !important;
  }

  .posi_user_icon {
    margin-top: 14px;
  }

  .posi_user_padding {
    padding-left: 12px !important;
  }

  .posi_user_validation {
    margin-top: 5px !important;
  }

  .captcha-main {
    flex-wrap: wrap !important;
  }

  .captcha-input {
    margin-left: 30px !important;
    width: 200px !important;
    margin-top: 10px !important;
  }

  .posi_user_captcha_refresh {
    right: 2.5rem !important;
  }

  .captcha-input {
    width: 237px !important;
  }

  .posi_user_update {
    width: 80%;
  }

  .date_hide_mobile {
    display: none;
  }

  .date_display_mobile {
    display: inline-block;
  }

  .user-avatar-mobile {
    position: relative;
    left: 14.5rem;
    display: block;
  }

  .posi_mobile_header {
    height: 60px !important;
    margin-top: 10px !important;
  }

  .alignChargeLogHeader {
    flex-wrap: wrap !important;
    row-gap: 0rem !important;
    justify-content: flex-start;
    column-gap: 1rem !important;
    margin-left: 20px;
    margin-bottom: 10px;
  }

  .posi_mobile_header>div {
    width: 130px !important;
  }

  .posi_mobile_tasksummary_card_desc {
    margin-top: 18px !important;
  }

  .chartTitle,
  .operation-status-title {
    padding: 6px !important;
  }

  .chartTitle {
    display: flex;
    justify-content: space-between;
  }

  .chartTitle > .name {
    position: relative;
    top: 7px;
  }

  .operation-status {
    height: 200px !important;
  }

  .unit-div {
    top: 18px !important;
  }

  .unit-lable {
    margin-top: 5px !important;
  }

  .dropdown-item {
    padding: 0.75rem 0.75rem !important;
  }

  .sidebar #sidebar_menu>li a {
    padding: 10px 20px 10px 30px !important;
  }

  .sub-menu li {
    padding: 0px 0 0 0 !important;
  }

  .img-operation-site {
    width: 60px;
    height: 60px;
    padding: 0px;
  }

  .system-countL {
    font: normal normal bold 30px/30px Inter;
  }

  .system-nameL {
    font: normal normal 13px/15px Inter !important;
    margin-top: 6px !important;
  }

  .add-device-main {
    height: 20rem !important;
  }

  .header_button {
    width: 22px !important;
    height: 22px !important;
  }

  .count-p2 {
    top: 61.5% !important;
  }

  .posi_device_report_content {
    position: relative;
    top: 10px;
    left: 30px;
  }

  .device-card-left {
    margin-top: 4rem !important;
  }

  .firmhis_report {
    height: 28rem !important;
  }

  .selector-body-height {
    height: 24.5rem !important;
  }

  .selector {
    top: 14px !important;
  }

  .column-title {
    font: normal normal bold 18px/30px Inter !important;
  }

  .slector-body {
    font-size: 18px !important;
    margin: 6px 0 !important;
  }

  .justify-end {
    position: relative !important;
    left: 19rem !important;
    top: 0.5rem !important;
  }

  .serail_position {
    position: absolute;
    top: 56px;
    z-index: 1;
    left: 184px;
  }

  .export1 {
    right: 2px !important;
    top: 28px !important;
  }

  .graph_label_head {
    display: none !important;
  }

  .graph_label_mobile_head {
    display: block !important;
  }
}

@media (min-width: 390px) and (max-width: 429px) {
  .img_container_flex {
    gap: 15px;
  }
  
  body {
    line-height: 1;
  }

  .login-div {
    width: 26rem !important;
  }

  .p-4 {
    padding: 1rem !important;
  }

  .posi_user_icon {
    margin-top: 14px;
  }

  .posi_user_padding {
    padding-left: 12px !important;
  }

  .posi_user_validation {
    margin-top: 5px !important;
  }

  .captcha-main {
    flex-wrap: wrap !important;
  }

  .captcha-input {
    margin-left: 30px !important;
    width: 200px !important;
    margin-top: 10px !important;
  }

  .posi_user_captcha_refresh {
    right: 2.5rem !important;
  }

  .captcha-input {
    width: 237px !important;
  }

  .posi_user_update {
    width: 80%;
  }

  .date_hide_mobile {
    display: none;
  }

  .date_display_mobile {
    display: inline-block;
  }

  .user-avatar-mobile {
    position: relative;
    left: 14.5rem;
    display: block;
  }

  .posi_mobile_header {
    height: 60px !important;
    margin-top: 10px !important;
  }

  .alignChargeLogHeader {
    flex-wrap: wrap !important;
    row-gap: 0rem !important;
    justify-content: flex-start;
    column-gap: 1rem !important;
    margin: 10px 4px 10px 4px;
  }

  .posi_mobile_header>div {
    width: 130px !important;
  }

  .posi_mobile_tasksummary_card_desc {
    margin-top: 18px !important;
  }

  .chartTitle,
  .operation-status-title {
    padding: 6px !important;
  }

  .chartTitle {
    display: flex;
    justify-content: space-between;
  }

  .chartTitle > .name {
    position: relative;
    top: 7px;
  }

  .operation-status {
    height: 200px !important;
  }

  .unit-div {
    top: 18px !important;
  }

  .unit-lable {
    margin-top: 5px !important;
  }

  .dropdown-item {
    padding: 0.75rem 0.75rem !important;
  }

  .sidebar #sidebar_menu>li a {
    padding: 10px 20px 10px 30px !important;
  }

  .sub-menu li {
    padding: 0px 0 0 0 !important;
  }

  .img-operation-site {
    width: 60px;
    height: 60px;
    padding: 0px;
  }

  .system-countL {
    font: normal normal bold 30px/30px Inter;
  }

  .system-nameL {
    font: normal normal 13px/15px Inter !important;
    margin-top: 6px !important;
  }

  .add-device-main {
    height: 20rem !important;
  }

  .header_button {
    width: 22px !important;
    height: 22px !important;
  }

  .count-p2 {
    top: 61.5% !important;
  }

  .posi_device_report_content {
    position: relative;
    top: 10px;
    left: 30px;
  }

  .device-card-left {
    margin-top: 4rem !important;
  }

  .firmhis_report {
    height: 28rem !important;
  }

  .selector-body-height {
    height: 24.5rem !important;
  }

  .selector {
    top: 14px !important;
  }

  .column-title {
    font: normal normal bold 18px/30px Inter !important;
  }

  .slector-body {
    font-size: 18px !important;
    margin: 6px 0 !important;
  }

  /* .posi_bmid_search_container {
    display: block !important;
  } */

  .justify-end {
    position: relative !important;
    left: 19rem !important;
    top: 0.5rem !important;
  }

  /* .posi_bmid_search_width {
    width: 110%;
  } */

  
  .serail_position {
    position: absolute;
    top: 56px;
    z-index: 1;
    left: 160px;
  }

  .export1 {
    right: 2px !important;
    top: 28px !important;
  }

  .graph_label_head {
    display: none !important;
  }

  .graph_label_mobile_head {
    display: block !important;
  }
}

@media (min-width: 430px) and (max-width: 450px) {
  .img_container_flex {
    gap: 15px;
  }
  
  body {
    line-height: 1;
  }

  .login-div {
    width: 26rem !important;
  }

  .p-4 {
    padding: 1rem !important;
  }

  .posi_user_icon {
    margin-top: 14px;
  }

  .posi_user_padding {
    padding-left: 12px !important;
  }

  .posi_user_validation {
    margin-top: 5px !important;
  }

  .captcha-main {
    flex-wrap: wrap !important;
  }

  .captcha-input {
    margin-left: 30px !important;
    width: 200px !important;
    margin-top: 10px !important;
  }

  .posi_user_captcha_refresh {
    right: 2.5rem !important;
  }

  .captcha-input {
    width: 237px !important;
  }

  .posi_user_update {
    width: 80%;
  }

  .date_hide_mobile {
    display: none;
  }

  .date_display_mobile {
    display: inline-block;
  }

  .user-avatar-mobile {
    position: relative;
    left: 14.5rem;
    display: block;
  }

  .posi_mobile_header {
    height: 60px !important;
    margin-top: 10px !important;
  }

  .alignChargeLogHeader {
    flex-wrap: wrap !important;
    row-gap: 0rem !important;
    justify-content: flex-start;
    column-gap: 1rem !important;
    margin: 10px 8px 10px 8px;
  }

  .posi_mobile_header>div {
    width: 130px !important;
  }

  .posi_mobile_tasksummary_card_desc {
    margin-top: 18px !important;
  }

  .chartTitle,
  .operation-status-title {
    padding: 6px !important;
  }

  .chartTitle {
    display: flex;
    justify-content: space-between;
  }

  .chartTitle > .name {
    position: relative;
    top: 7px;
  }

  .operation-status {
    height: 200px !important;
  }

  .unit-div {
    top: 18px !important;
  }

  .unit-lable {
    margin-top: 5px !important;
  }

  .dropdown-item {
    padding: 0.75rem 0.75rem !important;
  }

  .sidebar #sidebar_menu>li a {
    padding: 10px 20px 10px 30px !important;
  }

  .sub-menu li {
    padding: 0px 0 0 0 !important;
  }

  .img-operation-site {
    width: 60px;
    height: 60px;
    padding: 0px;
  }

  .system-countL {
    font: normal normal bold 30px/30px Inter;
  }

  .system-nameL {
    font: normal normal 13px/15px Inter !important;
    margin-top: 6px !important;
  }

  .add-device-main {
    height: 20rem !important;
  }

  .header_button {
    width: 22px !important;
    height: 22px !important;
  }

  .count-p2 {
    top: 61.5% !important;
  }

  .posi_device_report_content {
    position: relative;
    top: 10px;
    left: 30px;
  }

  .device-card-left {
    margin-top: 4rem !important;
  }

  .firmhis_report {
    height: 28rem !important;
  }

  .selector-body-height {
    height: 24.5rem !important;
  }

  .selector {
    top: 14px !important;
  }

  .column-title {
    font: normal normal bold 18px/30px Inter !important;
  }

  .slector-body {
    font-size: 18px !important;
    margin: 6px 0 !important;
  }

  /* .posi_bmid_search_container {
    display: block !important;
  } */

  .justify-end {
    position: relative !important;
    left: 19rem !important;
    top: 0.5rem !important;
  }

  /* .posi_bmid_search_width {
    width: 110%;
  } */

  
  .serail_position {
    position: absolute;
    top: 56px;
    z-index: 1;
    left: 198px;
  }

  .export1 {
    right: 2px !important;
    top: 28px !important;
  }

  .graph_label_head {
    display: none !important;
  }

  .graph_label_mobile_head {
    display: block !important;
  }
}

/* Styles for tablets */
@media (min-width: 500px) and (max-width: 821px) {
  .login-div {
    width: 30rem !important;
  }

  .alignChargeLogHeader {
    gap: 0.8rem !important;
  }

  .width71px {
    width: 71px;
  }

  .width100px {
    width: 100px;
  }

  .marginLeft150px {
    margin-left: 150px !important;
  }
}

@media (min-width: 822px) and (max-width: 1025px) {
  .login-div {
    width: 32rem !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* Styles for small laptops and desktops */
  .marginLeft250px {
    margin-left: 250px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  /* Styles for standard laptops and desktops */
}

@media (min-width: 1200px) and (max-width: 1899px) {
  /* Styles for standard laptops and desktops */
}

@media (min-width: 1900px) {
  /* Styles for large desktops and high-resolution screens */
}

@media (min-width: 2200px) {
  /* Styles for large desktops and high-resolution screens */
}

:where(.css-dev-only-do-not-override-21lcos).ant-select-dropdown {
  z-index: 9;
}