@media screen and (max-width: 767px) {
  .main-header .navbar-custom-menu {
      float: none !important;
      display: block !important;
  }
  .main-header .navbar-custom-menu .dropdown-menu {
      left: auto !important;
  }
  .skin-blue-light .main-header .navbar .dropdown-menu li a {
      color: #777;
  }
  .main-header .navbar {
    height: auto;
  }
  .pos_product_div{
    min-height: 55vh;
    overflow-y: auto;
  }
  #product_list_body{
    max-height: 50vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  /*.form-group {
    margin-bottom: 5px !important;
  }*/
  .table {
    margin-bottom: 5px !important;
  }
  .pos-form-actions{
    position: relative;
    padding-bottom: 3px;
  }
  .min-width-xs-75 {
    min-width: 75px !important;
  }
  .min-width-xs-100 {
    min-width: 100px !important;
  }
  .min-width-xs-150 {
    min-width: 150px !important;
  }
}

@media screen and (max-width: 767px) and (orientation:portrait) {
  .pos-form-actions{
    padding-bottom: 3px;
  }
}
@media screen and (max-width: 767px) and (orientation:landscape) {
  .pos-form-actions{
    padding-bottom: 3px;
  }
}

@media screen and (min-width: 767px) and (max-width: 1200px){
  .pos_product_div{
    min-height: 55vh;
    max-height: 55vh;
    overflow-y: auto;
  }
  #product_list_body{
    max-height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .form-group {
    margin-bottom: 5px !important;
  }
  .table {
    margin-bottom: 5px !important;
  }
  .pos-form-actions{
    position: absolute;
    bottom: 0px;
    padding-right: 15px;
    z-index: 3;
    background-color: #D1D5DC;
  }
}

@media screen and (min-width: 767px) and (max-width: 1200px) and (orientation:portrait) {
  .pos_product_div{
    min-height: 55vh;
    max-height: 55vh;
    overflow-y: auto;
  }

  .pos-form-actions{
    padding-bottom: 3px;
  }
}
@media screen and (min-width: 767px) and (max-width: 950px) and (orientation:landscape) {
  .pos-form-actions{
    padding-bottom: 3px;
  }
  .pos_product_div {
    min-height: 150vh;
    max-height: 150vh;
    overflow-y: auto;
  }
}

@media screen and (min-width: 950px) and (max-width: 1200px) and (orientation:landscape) {
  .pos-form-actions{
    padding-bottom: 3px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px){
  .pos_product_div{
    min-height: 58vh;
    max-height: 58vh;
    overflow-y: auto;
  }
  #product_list_body{
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .form-group {
    margin-bottom: 5px !important;
  }
  .table {
    margin-bottom: 5px !important;
  }
  .pos-form-actions{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 3;
    background-color: #D1D5DC;
  }
  .min-width-lg-75 {
    display: inline-block;
    min-width: 75px !important;
  }
  .min-width-lg-100 {
    display: inline-block;
    min-width: 100px !important;
  }
  .min-width-lg-150 {
    display: inline-block;
    min-width: 150px !important;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1920px){
  .pos_product_div{
    min-height: 58vh;
    max-height: 58vh;
    overflow-y: auto;
  }
  #product_list_body{
    max-height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .form-group {
    margin-bottom: 15px !important;
  }
  .table {
    margin-bottom: 5px !important;
  }
  .pos-form-actions{
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #D1D5DC;
    z-index: 3;
    padding-right: 15px;
  }
  .min-width-xl-100 {
    display: inline-block;
    min-width: 75px !important;
  }
  .min-width-xl-150 {
    display: inline-block;
    min-width: 100px !important;
  }
  .min-width-xl-200 {
    display: inline-block;
    min-width: 150px !important;
  }
}

.div-overlay.pos-processing {
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  color: #3c8dbc;
}

.btn-big {
  padding: 10px 30px;
  font-size: 18px;
  line-height: 1.3333333;
}

.of-visible {
  overflow: visible;
}

#online_indicator {
  font-size: 8px;
  vertical-align: middle;
}

.pt-0 {
  padding-top: 0px !important;
}
.pt-5 {
  padding-top: 5px !important;
}
.pt-10 {
  padding-top: 10px !important;
}
.pt-20 {
  padding-top: 20px !important;
}
.p-5 {
  padding: 5px !important;
}
.p-4{
  padding: 4px;
}
.p-10{
  padding: 10px !important;
}
.pl-5 {
  padding-left: 5px !important;
}
.pr-0 {
  padding-right: 0px !important;
}
.pr-10 {
  padding-right: 10px !important;
}
.pl-0 {
  padding-left: 0px !important;
}
.pl-10 {
  padding-left: 10px !important;
}
.pl-30 {
  padding-left: 30vw !important;
}
.pr-5 {
  padding-right: 5px !important;
}
.pr-12{
  padding-right: 12px !important;
}
.pb-0 {
  padding-bottom: 0px !important;
}
.pb-5 {
  padding-bottom: 5px !important;
}
.pb-10 {
  padding-bottom: 10px !important;
}
/*p {
  margin: 0 0 0px !important;
}*/
.p-0 {
  padding: 0px !important;
}
.f-right {
  float: right;
}
.mb-0{
  margin-bottom: 0 !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.mb-12 {
  margin-bottom: 12px !important;
}
.mt-5 {
  margin-top: 5px !important;
}
.p-5-5 {
  padding: 5px 5px !important;
}
.p-lr-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.m-4 {
  margin: 4px !important;
}
.mt-0{
  margin-top: 0 !important;
}
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.margin-left-10 {
  margin-left: 10px !important;
}
.margin-bottom-12{
  margin-bottom: 12px !important;
}
.m-8 {
  margin: 8px !important;
}
.mt-10{
  margin-top: 10px !important;
}
.mt-15{
  margin-top: 15px !important;
}
.mt-20{
  margin-top: 20px !important;
}
.m-0 {
  margin: 0px !important;
}
.m-5 {
  margin: 5px !important;
}
.mr-4 {
  margin-right: 4px !important;
}
.mr-5 {
  margin-right: 5px !important;
}
.mr-8 {
  margin-right: 8px !important;
}
.mt-56{
  margin-top: 56px !important;
}
.m-2{
  margin: 2px !important;
}
.width-0 {
  width: 0 !important;
}
.width-50 {
  width: 50% !important;
}
.width-40 {
  width: 40% !important;
}
.width-60 {
  width: 60% !important;
}
.width-100 {
  width: 100% !important;
}
.width-auto {
  width: auto !important;
}

.font-30 {
  font-size: 30px !important;
}
.font-20 {
  font-size: 20px !important;
}
.font-23 {
  font-size: 23px !important;
}
.fs-10 {
  font-size: 10px;
}
.padding-5{
  padding: 5px !important;
}
.padding-10{
  padding: 10px !important;
}
/*.padding-side-15{
  padding-left: 15px !important;
  padding-right: 15px !important;
}*/

.discount-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 18px;
  padding: 7px;
}

.discount-badge-small {
  position: absolute;
  top: -2px;
  left: 10px;
  font-size: 12px;
  padding: 6px;
}
.product-info-table td, .product-info-table th {
  font-size: 12px;
}
.catalogue {
  max-height: 127px;
  margin: auto;
  margin-bottom: 18px;
}
.catalogue-title {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  line-height: 1;
  margin-bottom: 10px;
}
.bg-light-gray {
  background-color: #f8f8f8 !important;
}

.skin-black .main-header, .skin-black-light .main-header {
  color: #525f7f !important;
}
.skin-black .main-header .navbar .nav .open>a {
  color: #999 !important;
}
.skin-black .main-header .navbar .nav>li>a:hover{
  color: #999 !important;
}
.skin-black .main-header .navbar > .sidebar-toggle:hover {
  color: #999 !important;
}

.table-pdf thead tr{
  background-color: #357ca5 !important;
  color: #fff;
}
.table-pdf thead tr th {
  color: #fff !important;
}
.blue-heading {
  background-color: #357ca5;
  color: #fff;
}

.table-pdf .odd {
  background-color: #DCE6F1;
}

.jquery-top-scrollbar{
  height: 6px !important;
}
.jquery-top-scrollbar div {
  height: 6px !important;
}
.scroll-top-bottom {
  width: 100%; 
  overflow: scroll;
}
.scroll-top-bottom::-webkit-scrollbar {
  height: 6px;
}

.scrolltop {
  display:none;
  width:100%;
  margin:0 auto;
  position:fixed;
  bottom:20px;
  right:10px; 
}
.scroll {
  position:absolute;
  right:20px;
  bottom:20px;
  background:#b2b2b2;
  background:rgba(178,178,178,0.7);
  padding:7px;
  text-align: center;
  margin: 0 0 0 0;
  cursor:pointer;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s; 
  border-radius: 6px;   
}
.scroll:hover {
  background:rgba(178,178,178,1.0);
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;    
}
.scroll:hover .fas {
  padding-top:-10px;
}
.scroll .fas {
  font-size:25px;
  margin-top:-5px;
  margin-left:1px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;  
}

.f-left {
  float: left;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}

.table-pdf {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 8px 10px;
}
.td-border td, .td-border th{
  border-bottom: 1px solid lightgrey;
  padding: 8px 5px;
}

.ws-nowrap {
  white-space:nowrap;
}

.btn-app>.fas, .btn-app>.fab{
  font-size: 20px;
  display: block;
}
.dropdown-menu>li>a>.fas{
  margin-right: 6px;
}

.main-header .sidebar-toggle:before {
  content: "" !important;
}
.ui-autocomplete {
  max-height: 300px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
} 

.text-white {
  color: #fff;
}
.wizard > .steps > ul > li {
  width: 33.33% !important;
}
.wizard > .content {
  background: #445867 !important;
}
legend {
  color: #fff;
  margin-bottom: 6px;
  border-bottom: none;
}
.left-col {
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.76),rgba(51, 51, 51, 0.32)),url(../img/home-bg.jpg); 
  text-align: center;
  background-size: cover;
  background-position: center;
}
.left-col-content {
  color: #1A7BF9;
  width: 100%;
}
.login-header {
  font-size: 27px;
  font-weight: 600;
}
.login-header a {
  color: #fff;
}
.form-header {
  font-size: 18px;
  margin: 16px 0;
}
.btn-login {
  padding: 6px 52px !important;
}
.right-col {
  background-color: #243949;
  height: 100%;
  min-height: 100vh;
}

.right-col label {
  color: #fff;
}

.right-col a, .text-white a {
  color: #fff;
  font-weight: 600;
  font-size: 15px
}
.right-col a:hover, .text-white a:hover {
  color: #ccc;
}
.right-col-content {
  padding: 10% 16%;
  padding-bottom: 3%;
}
.right-col-content-register {
  padding: 2% 8%;
}

.input_inline {
  width: 100%;
  display: inline-flex;
}
.input_inline input, .input_inline span {
  width: 50%;
}
.bg-manufacturing {
  background-color: #ff851b;
}
.img-thumbnail {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  transition: border .2s ease-in-out;
  padding: 4px;
  margin: 3px;
  text-align: center;
}
.img-thumbnail>.badge{
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 9px;
  font-weight: 400;
  cursor: pointer;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
  max-height: 350px;
}
.bg-aqua-lite {
  background-color: #7FFFD4;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
  white-space: normal;
}
.spacer {
  margin-top: 20px;
}
/*#product_list_body {
  max-height: 485px;
  overflow-y: scroll;
  overflow-x: hidden;
}*/
.div-overlay {
  cursor: not-allowed;
  background: #e9e9e9; 
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
}

.d-inline-table {
  display: inline-table;
}

.label-round{
  font-size: 8px;
  border-radius: 44%;
}
.table>tbody+tbody{
  border-top: 0;
}
.table-pl-12 td, .table-pl-12 th{
  padding-left: 12px !important;
}
table tbody td.pl-20-td{
  padding-left: 20px !important;
}
table.table-border-center > tbody > tr > td:first-child, 
table.table-border-center > thead > tr > th:first-child,
table.table-border-center > tfoot > tr > td:first-child
{
  border-right: 1px solid darkgray;
}
table.table-border-center-col > tbody > tr > td:nth-child(2), 
table.table-border-center-col > thead > tr > th:nth-child(2),
table.table-border-center-col > tfoot > tr > td:nth-child(2)
{
  border-right: 1px solid darkgray;
  border-left: 1px solid darkgray;
}
.bg-transparent{
  background-color: transparent !important;
}
.nav-tabs>li>a{
  font-size: 18px;
  font-weight: 600;
}
.table-transparent, .table-transparent th {
  background-color: transparent !important;
  color: #000 !important;
}
.td-full-width {
  white-space:nowrap;
}
.font-17{
  font-size: 17px !important;
}
table.dataTable tbody>tr.selected{
  background-color: #B0BED9;
}
tr.footer-total > td {
  vertical-align: middle !important;
}
.error{
  color: red !important;
}
/*  pos tab */
div.pos-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
    margin-bottom: 28px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}
div.pos-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.pos-tab-menu div.list-group{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a .glyphicon,
div.pos-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.pos-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.pos-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa{
  background-color: #3c8dbc;
  color: #ffffff;
    border-color: #3c8dbc;
}
div.pos-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #3c8dbc;
}

div.pos-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 20px;
}

div.pos-tab div.pos-tab-content:not(.active){
  display: none;
}

.add-product-price-table th{
  background-color: #5cb85c;
    color: white;
}
.blue-header th {
  background-color: #3c8dbc;
    color: white;
}
.table-th-green th{
  background-color: #5cb85c;
    color: white;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0; 
}
.active-cell {
  border: 2px dotted #3c8dbc !important;
}
.cursor-pointer{
  cursor: pointer !important;
}
/*.pos_product_div{
  min-height: 45vh;
  max-height: 57vh;
  overflow-y: auto;
  margin-bottom: 20px;
}*/
.bg-lightgray{
  background-color: #F0EDED !important;
}
.balance_due_box >li{
  padding: 11px 5px 0px 5px;
}
.option-div {
  padding: 15px;
  background-color: #d2d6de;
  color: #333;
  border:1px solid #d2d6de;
  cursor: pointer;
}
.option-div input[type="radio"]{
  display: none;
}
.option-div-group .icon {
  color: #d33724;
  display: none;
}
.option-div-group .option-div:hover{
  border:1px solid gray;
}
.option-div-group .active .icon{
  display: block;
}
.bg-info{
  background-color: #00c0ef !important;
}
.bg-info > a{
  color: #FFFFFF !important;
}
.bg-info>a:hover{
  background-color: #337ab7 !important;
}
ul.dt-button-collection{
  background-color: #00c0ef;
}
td.details-control {
  background: url('/img/details_open.png') no-repeat center center;
  cursor: pointer;
}
tr.details td.details-control {
  background: url('/img/details_close.png') no-repeat center center;
}
.icheckbox_square-blue, .iradio_square-blue{
  margin-right: 10px;
}
.header-right-div{
  right: 10px;
  float: right;
  position: absolute;
  top: 15px;
}
.header-left-div{
  margin-top: 15px;
  display: inline-flex;
}
.icon-link{
  text-align:center;
  display:block;
  margin-bottom: 18px;
}
.icon-link > a {
  display:grid;
}
.icon-link > .badge{
  position: absolute;
  top: 20px;
  right: 67px;
}
.link-des {
  display: inline-block;
  text-align: left;
}

.user-header-img {
  border: none;
  height: auto;
  width: 100%;
  max-height: 120px;
}

/* Modern User Profile Dropdown Menu Styles */

/* Dropdown positioning */
.modern-user-menu {
    min-width: 240px;
    padding: 0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 5px;
    background: #fff;
}

/* User Header - AdminLTE Standard */
.modern-user-header {
    /* Standard AdminLTE user-header background */
    background: #3c8dbc;
    padding: 15px;
    margin: 0;
    border: none;
}

/* Alternative AdminLTE theme options - uncomment to use */
/* 
.modern-user-header {
    background: #3c8dbc; 
}
.modern-user-header {
    background: #00a65a; 
}
.modern-user-header {
    background: #f39c12; 
}
.modern-user-header {
    background: #dd4b39; 
}
.modern-user-header {
    background: #605ca8; 
}
*/

.modern-user-header .user-info {
    display: flex;
    align-items: center;
    color: white;
}

.modern-user-header .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin-right: 12px;
    object-fit: cover;
}

.modern-user-header .user-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.modern-user-header .user-avatar-placeholder i {
    font-size: 20px;
    color: white;
}

.modern-user-header .user-details h4 {
    margin: 0 0 3px 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.modern-user-header .user-email {
    margin: 0 0 3px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.modern-user-header .business-name {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 500;
}

.modern-user-header .user-role {
    margin-top: 2px;
}

.modern-user-header .role-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 400;
    font-style: italic;
}

/* Menu Items */
.modern-menu-item {
    margin: 0;
    border: none;
}

.modern-menu-item:hover {
    background-color: #f8f9fa;
}

.modern-user-menu .menu-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
}

.modern-user-menu .menu-link:hover {
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
}

.modern-user-menu .menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    color: #6c757d;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-user-menu .menu-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.modern-user-menu .menu-arrow {
    color: #adb5bd;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.modern-user-menu .menu-link:hover .menu-arrow {
    transform: translateX(3px);
}

.modern-user-menu .menu-link:hover .menu-icon {
    color: #495057;
}

/* Sign Out Item */
.modern-user-menu .sign-out-item {
    border-top: 1px solid #e9ecef;
}

.modern-user-menu .sign-out-link {
    color: #dc3545;
}

.modern-user-menu .sign-out-link:hover {
    background-color: #f8d7da;
    color: #dc3545;
}

.modern-user-menu .sign-out-link .menu-icon {
    color: #dc3545;
}

.modern-user-menu .sign-out-link:hover .menu-icon {
    color: #dc3545;
}

/* Dropdown Dividers */
.dropdown-divider {
    margin: 0;
    border-top: 1px solid #e9ecef;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-user-menu {
        min-width: 250px;
        margin-top: 5px;
    }
    
    .modern-user-header {
        padding: 15px;
    }
    
    .modern-user-header .user-avatar,
    .modern-user-header .user-avatar-placeholder {
        width: 40px;
        height: 40px;
    }
    
    .modern-user-header .user-details h4 {
        font-size: 14px;
    }
    
    .modern-user-header .user-email {
        font-size: 12px;
    }
    
    .modern-user-header .role-text {
        font-size: 9px;
    }
    
    .modern-user-menu .menu-link {
        padding: 10px 15px;
    }
    
    .modern-user-menu .menu-text {
        font-size: 13px;
    }
}

/* Animation for dropdown */
.modern-user-menu {
    animation: slideDown 0.3s ease;
}

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

/* Hover effects */
.modern-menu-item {
    transition: background-color 0.2s ease;
}

.modern-menu-item:hover {
    background-color: #f8f9fa;
}

/* Icon specific colors */
.modern-user-menu .menu-link[href*="profile"] .menu-icon {
    color: #007bff;
}

.modern-user-menu .menu-link[href*="settings"] .menu-icon {
    color: #6c757d;
}

.modern-user-menu .menu-link[href*="modules"] .menu-icon {
    color: #ffc107;
}

.modern-user-menu .menu-link[href*="activity"] .menu-icon {
    color: #17a2b8;
}

.modern-user-menu .menu-link[href*="logout"] .menu-icon {
    color: #dc3545;
}

.bg-light-green{
  background-color: #98D973 !important;
  color: #fff !important
}
.hover-q {
  font-size: 16px;
  margin-left: 3px;
  cursor: help;
}
.input-group-addon .hover-q{
  margin-left: 0px;
}
.text-bold{
  font-weight: bold;
}
.tour .popover-content{
  padding: 18px 14px;
}
.table-slim>tbody>tr>td, .table-slim>tbody>tr>th, .table-slim>tfoot>tr>td, .table-slim>tfoot>tr>th, .table-slim>thead>tr>td, .table-slim>thead>tr>th{
  padding: 1px;
}

/* Custom scroll bar start*/

/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* Custom scroll bar end*/

.product_cell{
  height: 100px;
  padding: 1%;
}
.product_cell_div{
  height: 100% !important;
  width: 100% !important;
  text-align: center;
  vertical-align: middle;
  padding-top: 5px;
  cursor: pointer;
  overflow: hidden;
}

/*CSS to print receipts*/
.print_section{
  display: none;
}
@media print{
  .print_section{
      display: inline !important;
  }
  .modal-xl{
      width: 100% !important;
  }
  ::-webkit-scrollbar{
      display: none !important;
  }
  #toast-container {
    display: none;
  }
}

.input-number .btn-default{
  background-color: white;
  padding: 6px 9px;
}

.text-muted-imp{
  color: #A3A3A3 !important;
}

.table-no-top-cell-border td{
  border-top: 0px !important;
  border-bottom: 0px !important;
}
.table-no-top-cell-border th{
  border-top: 0px !important;
  border-bottom: 0px !important;
}

.table-no-side-cell-border td{
  border-left: 0px !important;
  border-right: 0px !important;
}
.table-no-side-cell-border th{
  border-left: 0px !important;
  border-right: 0px !important;
}

.color-555 {
  color: #555555 !important;
}
.color-555 *{
  color: #555555 !important;
}
.color-white {
  color: white !important;
}
.col-no-padding{
  padding-left: 0px;
  padding-right: 0px;
}
.col-2px-padding{
  padding: 2px;
}

.pos-express-btn{
  font-size: 23px !important;
  overflow: hidden !important;
  height: 73px !important;
  white-space: normal;
}
.word-wrap{
  word-wrap: break-word !important;
}

.modal-xl{
  width: 90%; /* respsonsive width */
  margin-left: auto !important;
  margin-right: auto !important;
}
table.ajax_view tbody tr{
  cursor: pointer;
}
.bg-white{
  background-color: #fff;
}

.product-thumbnail-small{
  height: 50px;
  width: 50px;
}

table.table-text-center td, table.table-text-center th{
  vertical-align: middle !important;
}
.product_list{
  padding-left: 8px;
  padding-right: 8px;
}
.product_box{
width: 100%;
margin-bottom: 10px;
text-align: center;
cursor: pointer;
font-weight: 600;
background-color: #fff;
border-radius: 2px;
padding-top: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24) !important;
}
.product_box .image-container{
height: 55px;
margin: auto;

}
.product_box .image-container img{
  height: 45px;
}
.eq-height-row{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:flex;
  flex-wrap: wrap;
}
.eq-height-col{
  display: flex;
}

.product_box .text_div{
  margin-top: 3px;
}
.product_box .text{
  width: 100%;
  overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1; /* number of lines to show */
 line-height: 14px;        /* fallback */
 max-height: 14px;       /* fallback */
}
.small-box.bg-gray:hover{
  color: #000;
  text-decoration: none;
}

#calendar table tbody td {
  cursor: pointer;
}

.min-height-90hv{
  min-height: 90vh !important;
}

/* Grow Shadow */
.hvr-grow-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

.text-link{
  cursor: pointer;
}

.text-link:hover{
  text-decoration: underline;
}

/* Stock error styling for POS */
tr.product_row.stock-error-row {
  background-color: #fff3cd !important;
  border-left: 4px solid #ffc107 !important;
  animation: stock-error-pulse 2s ease-in-out infinite;
}

tr.product_row.stock-error-row td {
  border-color: #ffc107 !important;
}

.stock-error-message {
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
  padding: 3px 5px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 3px;
}

.stock-error-message.hide {
  display: none;
}

@keyframes stock-error-pulse {
  0%, 100% {
    background-color: #fff3cd;
  }
  50% {
    background-color: #ffeaa7;
  }
}

.v-center{
  vertical-align: middle !important;
}

.bg-woocommerce{
  background-color: #9E458B !important;
}

.user_avatar {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 1px;
}


.timeline-lode-more-btn {
  margin-left: 50px;
  margin-top: 25px;
  padding-right: 12px;
  padding-left: 12px;
}

.treeview-menu i{
  display: none !important;
}
.treeview-menu a{
  padding-left: 25px !important;
  font-size: 95% !important;
}

.skin-black .no-subscription, .skin-blue .no-subscription, .skin-black-light .no-subscription, .skin-blue-light .no-subscription, .skin-red .no-subscription, .skin-red-light .no-subscription, .skin-purple .no-subscription, .skin-purple-light .no-subscription, .skin-green .no-subscription, .skin-green-light .no-subscription, .skin-yellow .no-subscription {
  color: #f39c12 !important;
  padding: 15px;}

.no-subscription a {
  color: inherit;
  text-decoration: none;
}

html, body {
  overscroll-behavior-x: none;
  /*height: 100vh;*/
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.checkbox-lg {
  transform: scale(1.5);
}

.wrapper {
  min-height: 100vh !important;
}

.pos_form_totals{
  padding-bottom: 10px;
}
.pos_footer_totals{
  padding-top: 3px;
}

.pos-total {
  display: inline-block;
  padding: 5px 10px;
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 5px;
}


.border-round-8 {
  border-radius: 8px; /* Adjust the value as needed */
}

/* ===== MODERN AUTH LAYOUT STYLES ===== */

/* Modern Auth Body */
.modern-auth-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Modern Split Container */
.modern-split-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Modern Left Panel */
.modern-left-panel {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

/* Animated background elements */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.floating-shape:nth-child(1) {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-shape:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.floating-shape:nth-child(3) {
  width: 60px;
  height: 60px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.floating-shape:nth-child(4) {
  width: 100px;
  height: 100px;
  top: 10%;
  right: 30%;
  animation-delay: 1s;
}

.floating-shape:nth-child(5) {
  width: 90px;
  height: 90px;
  bottom: 40%;
  right: 10%;
  animation-delay: 3s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

/* Mouse follower effect */
.mouse-follower {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
}

/* Gradient orbs that follow mouse */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(102, 126, 234, 0.3));
  top: 0;
  left: 0;
}

.orb-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, rgba(118, 75, 162, 0.3), rgba(255, 255, 255, 0.1));
  bottom: 0;
  right: 0;
}

.orb-3 {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.15), rgba(102, 126, 234, 0.2));
  top: 50%;
  left: 50%;
}

/* Modern Left Content */
.modern-left-content {
  color: white;
  text-align: center;
  z-index: 2;
  max-width: 500px;
  position: relative;
}

.brand-logo {
  margin-bottom: 30px;
}

.logo-link {
  text-decoration: none;
  color: inherit;
}

.brand-image {
  max-width: 350px;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.logo-placeholder {
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.brand-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.brand-subtitle {
  font-size: 18px;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 20px;
}

.brand-tagline {
  font-size: 14px;
  opacity: 0.8;
  font-style: italic;
}

/* Brand Features List */
.brand-features {
  margin: 25px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-features .features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.brand-features .features-list li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: 0.9;
  line-height: 1.4;
}

.brand-features .features-list li::before {
  content: '✓';
  margin-right: 12px;
  font-size: 18px;
  font-weight: bold;
  color: #4ade80;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Modern Right Panel */
.modern-right-panel {
  flex: 1;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Modern Header Controls */
.modern-header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.header-left-section {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-right-section {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}

.language-selector {
  min-width: 150px;
}

/* Current Date and Time Display */
.current-datetime {
  display: flex;
  align-items: center;
}

.date-time-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.current-date {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  line-height: 1.2;
}

.current-time {
  font-size: 16px;
  font-weight: 700;
  color: #667eea;
  line-height: 1.2;
  font-family: 'Courier New', monospace;
}

.modern-select {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  background: white;
  transition: border-color 0.3s ease;
  height: 44px;
  min-height: 44px;
  line-height: 1.4;
}

.modern-select:focus {
  border-color: #667eea;
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.auth-links {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-modern-register {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
}

.btn-modern-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  color: white;
  text-decoration: none;
}

.btn-modern-pricing {
  background: #28a745;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-modern-pricing:hover {
  background: #218838;
  color: white;
  text-decoration: none;
}

.auth-text {
  color: #6c757d;
  font-size: 14px;
}

.auth-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.auth-link:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* Modern Content Area */
.modern-content-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

/* Modern Form Styles */
.modern-form {
  max-width: 400px;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modern-form-header {
  margin-bottom: 40px;
  text-align: center;
}

.modern-form-header h2 {
  font-size: 32px;
  color: #1a202c;
  margin-bottom: 10px;
  font-weight: 700;
}

.modern-form-header p {
  color: #718096;
  font-size: 16px;
}

.modern-form-group {
  margin-bottom: 24px;
}

.modern-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #4a5568;
  font-weight: 600;
  font-size: 14px;
}

.modern-input-wrapper {
  position: relative;
}

.modern-input-wrapper i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0aec0;
}

.modern-input {
  width: 100%;
  padding: 14px 16px 14px 45px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  color: #2d3748;
  transition: all 0.3s ease;
  outline: none;
  background: #f7fafc;
}

.modern-input:focus {
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modern-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.modern-checkbox-label {
  display: flex;
  align-items: center;
  color: #4a5568;
  font-size: 14px;
  cursor: pointer;
  font-weight: normal;
}

.modern-checkbox-label input {
  margin-right: 8px;
  cursor: pointer;
}

.modern-forgot-link {
  color: #667eea;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.modern-forgot-link:hover {
  color: #764ba2;
}

.modern-btn-login {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modern-btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.modern-btn-login:active {
  transform: translateY(0);
}

.modern-register-link {
  text-align: center;
  margin-top: 24px;
  color: #718096;
  font-size: 14px;
}

.modern-register-link a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.modern-register-link a:hover {
  color: #764ba2;
}

/* Modern Turnstile Styles */
.modern-turnstile {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* Ensure modern form is properly displayed */
.modern-content-area .modern-form {
  margin: 0 auto;
  position: relative;
  z-index: 10;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force modern form visibility */
.modern-form {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 400px !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  padding: 40px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Reset form specific styling */
.modern-form {
  animation: fadeInUp 0.6s ease-out;
  position: relative;
  z-index: 100;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modern-turnstile .cf-turnstile {
  transform: scale(0.95);
  filter: brightness(1.1) contrast(1.1) saturate(1.2);
  border-radius: 8px;
  overflow: hidden;
}

.modern-btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(118, 75, 162, 0.3);
  transform: none;
}

.modern-btn-login:disabled:hover {
  transform: none;
  box-shadow: none;
  background: rgba(118, 75, 162, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-split-container {
    flex-direction: column;
  }
  
  .modern-left-panel {
    display: none;
  }
  
  .modern-right-panel {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .modern-header-controls {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
    padding: 15px 20px;
  }
  
  .header-left-section .current-datetime {
    display: none;
  }
  
  .header-right-section {
    width: 100%;
    justify-content: center;
  }
  
  .language-selector {
    width: 100%;
    max-width: 200px;
  }
  
  .auth-links {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .modern-content-area {
    padding: 20px;
  }
  
  /* Mobile modern Turnstile styles */
  .modern-turnstile {
    margin: 15px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
  }
  
  .modern-turnstile .cf-turnstile {
    transform: scale(0.9);
  }
  
  /* Tablet and mobile brand logo styles */
  .modern-form .brand-logo {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 15px;
  }
  
  .modern-form .brand-image {
    max-width: 250px;
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  
  .modern-form .logo-placeholder {
    font-size: 56px;
    display: inline-block;
    margin: 0 auto;
  }
  
  .modern-form .logo-link {
    display: inline-block;
    max-width: 180px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .modern-left-panel {
    display: none;
  }
  
  .modern-right-panel {
    min-height: 100vh;
  }
  
  .modern-header-controls {
    padding: 10px 15px;
  }
  
  .modern-content-area {
    padding: 15px;
  }
  
  /* Small mobile modern Turnstile styles */
  .modern-turnstile {
    margin: 12px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
  }
  
  .modern-turnstile .cf-turnstile {
    transform: scale(0.85);
  }
  
  /* Mobile brand logo styles */
  .modern-form .brand-logo {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 10px;
  }
  
  .modern-form .brand-image {
    max-width: 220px;
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  
  .modern-form .logo-placeholder {
    font-size: 48px;
    display: inline-block;
    margin: 0 auto;
  }
  
  .modern-form .logo-link {
    display: inline-block;
    max-width: 150px;
    width: 100%;
  }
}

/* ===== DARK GLASSMORPHISM AUTH LAYOUT STYLES ===== */

/* Dark Glass Body */
.dark-glass-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  margin: 0;
  box-sizing: border-box;
}

/* Dark Glass Animated Background */
.dark-glass-body .animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.dark-glass-body .floating-shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
  filter: blur(1px);
}

.dark-glass-body .floating-shape:nth-child(1) {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.dark-glass-body .floating-shape:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 60%;
  left: 80%;
  animation-delay: 2s;
}

.dark-glass-body .floating-shape:nth-child(3) {
  width: 60px;
  height: 60px;
  top: 80%;
  left: 20%;
  animation-delay: 4s;
}

.dark-glass-body .floating-shape:nth-child(4) {
  width: 100px;
  height: 100px;
  top: 30%;
  left: 70%;
  animation-delay: 1s;
}

.dark-glass-body .floating-shape:nth-child(5) {
  width: 90px;
  height: 90px;
  top: 70%;
  left: 50%;
  animation-delay: 3s;
}

.dark-glass-body .gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: float 8s ease-in-out infinite;
}

.dark-glass-body .orb-1 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(126, 34, 206, 0.3) 0%, transparent 70%);
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.dark-glass-body .orb-2 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(42, 82, 152, 0.3) 0%, transparent 70%);
  top: 60%;
  right: 10%;
  animation-delay: 3s;
}

.dark-glass-body .orb-3 {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(30, 60, 114, 0.3) 0%, transparent 70%);
  bottom: 20%;
  left: 30%;
  animation-delay: 6s;
}

.dark-glass-body .mouse-follower {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.1s ease;
  z-index: 1;
}

.dark-glass-body::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(126, 34, 206, 0.3);
  border-radius: 50%;
  top: -250px;
  right: -250px;
  filter: blur(100px);
}

.dark-glass-body::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(42, 82, 152, 0.3);
  border-radius: 50%;
  bottom: -200px;
  left: -200px;
  filter: blur(100px);
}

/* Dark Glass Top Bar */
.dark-glass-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.dark-glass-top-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.dark-glass-top-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dark-glass-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  color: white;
  font-size: 14px;
  min-width: 150px;
  height: 44px;
  min-height: 44px;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.dark-glass-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

.dark-glass-select option {
  background: #1e3c72;
  color: white;
}

/* Dark Glass Date/Time Display */
.dark-glass-top-bar .current-datetime {
  display: flex;
  align-items: center;
}

.dark-glass-top-bar .date-time-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.dark-glass-top-bar .current-date {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2;
}

.dark-glass-top-bar .current-time {
  font-size: 14px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  font-family: 'Courier New', monospace;
}

/* Dark Glass Container */
.dark-glass-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  padding: 50px 40px;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.6s ease-out;
  margin: 0 auto;
  box-sizing: border-box;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Dark Glass Content */
.dark-glass-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  width: 100%;
  padding: 40px 20px 20px 20px;
  box-sizing: border-box;
  margin-top: 20px;
}

/* Dark Glass Logo */
.dark-glass-logo {
  text-align: center;
  margin-bottom: 40px;
}

.dark-glass-logo h1 {
  color: white;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.dark-glass-logo p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

/* Dark Glass Form Styles */
.dark-glass-form-group {
  margin-bottom: 24px;
}

.dark-glass-form-group label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 14px;
}

.dark-glass-input-wrapper {
  position: relative;
}

.dark-glass-input-wrapper i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}

.dark-glass-input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 15px;
  color: white;
  transition: all 0.3s ease;
  outline: none;
}

.dark-glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.dark-glass-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.dark-glass-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
  flex-wrap: wrap;
}

.dark-glass-checkbox-label {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  cursor: pointer;
}

.dark-glass-checkbox-label input {
  margin-right: 8px;
  cursor: pointer;
}

.dark-glass-forgot-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.dark-glass-forgot-link:hover {
  color: white;
}

.dark-glass-btn-login {
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: #1e3c72;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dark-glass-btn-login:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

.dark-glass-btn-login:active {
  transform: translateY(0);
}

.dark-glass-register-link {
  text-align: center;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.dark-glass-register-link a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.3s ease;
}

.dark-glass-register-link a:hover {
  border-bottom-color: white;
}

/* Dark Glass Turnstile Styles */
.dark-glass-turnstile {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-glass-turnstile .cf-turnstile {
  transform: scale(0.9);
  filter: brightness(1.1) contrast(1.1);
}

.dark-glass-btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.3);
}

.dark-glass-btn-login:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Dark Glass Form Sections */
.dark-glass-section {
  margin-bottom: 30px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.dark-glass-section-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}

.dark-glass-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.dark-glass-form-row .dark-glass-form-group {
  flex: 1;
  margin-bottom: 0;
}

/* Responsive form rows */
@media (max-width: 768px) {
  .dark-glass-form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .dark-glass-section {
    padding: 20px 15px;
    margin-bottom: 20px;
  }
  
  .dark-glass-section-title {
    font-size: 16px;
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .dark-glass-section {
    padding: 15px 10px;
    margin-bottom: 15px;
  }
  
  .dark-glass-section-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

/* Responsive Design for Dark Glass */
@media (max-width: 768px) {
  .dark-glass-body {
    padding: 10px;
    min-height: 100vh;
    justify-content: flex-start;
    align-items: center;
  }
  
  .dark-glass-container {
    padding: 30px 20px;
    margin: 20px auto;
    max-width: 100%;
    width: calc(100% - 40px);
    position: relative;
    top: 0;
    transform: none;
  }
  
  .dark-glass-logo h1 {
    font-size: 28px;
  }
  
  .dark-glass-checkbox-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .dark-glass-forgot-link {
    align-self: flex-end;
  }
  
  .dark-glass-top-bar {
    padding: 10px 15px;
    position: relative;
  }
  
  .dark-glass-top-bar .current-datetime {
    display: none;
  }
  
  .dark-glass-top-bar .language-selector {
    width: 100%;
    text-align: center;
  }
  
  .dark-glass-top-bar .dark-glass-select {
    width: 100%;
    max-width: 200px;
  }
  
  .dark-glass-content {
    padding: 30px 15px 15px 15px;
    margin-top: 15px;
  }
  
  /* Hide animations on mobile for better performance */
  .dark-glass-body .animated-bg {
    display: none;
  }
  
  /* Tablet and mobile dark-glass-logo styles */
  .dark-glass-logo {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 15px;
  }
  
  .dark-glass-logo .brand-image {
    max-width: 250px;
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  
  .dark-glass-logo .logo-placeholder {
    font-size: 56px;
    display: inline-block;
    margin: 0 auto;
  }
  
  .dark-glass-logo .logo-link {
    display: inline-block;
    max-width: 180px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .dark-glass-body {
    padding: 5px;
  }
  
  .dark-glass-container {
    padding: 25px 15px;
    margin: 10px auto;
    width: calc(100% - 20px);
  }
  
  .dark-glass-content {
    padding: 25px 10px 10px 10px;
    margin-top: 10px;
  }
  
  .dark-glass-logo h1 {
    font-size: 24px;
  }
  
  .dark-glass-logo p {
    font-size: 12px;
  }
  
  /* Mobile dark-glass-logo styles */
  .dark-glass-logo {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 10px;
  }
  
  .dark-glass-logo .brand-image {
    max-width: 220px;
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  
  .dark-glass-logo .logo-placeholder {
    font-size: 48px;
    display: inline-block;
    margin: 0 auto;
  }
  
  .dark-glass-logo .logo-link {
    display: inline-block;
    max-width: 150px;
    width: 100%;
  }
}

/* ===== LOGIN FORM SPECIFIC STYLES ===== */

/* Modern Turnstile Styling - Ultra compact for no scroll */
.modern-turnstile-wrapper {
    margin: 2px 0;
    display: flex;
    justify-content: center;
}

.modern-turnstile {
    background: #ffffff !important;
    border: 1px solid #e1e5e9 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    padding: 2px !important;
    max-width: 280px;
    width: 100%;
    transform: scale(0.95);
}

.modern-turnstile:hover {
    border-color: #007bff !important;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15) !important;
    transform: translateY(-2px) !important;
}

.modern-turnstile iframe {
    border-radius: 8px !important;
    background: #ffffff !important;
}

/* Override Turnstile's default dark styling */
.cf-turnstile {
    background: #ffffff !important;
    border: none !important;
}

/* Force light theme styling */
.cf-turnstile * {
    background: #ffffff !important;
    color: #333333 !important;
}

/* Style the Turnstile checkbox specifically */
.cf-turnstile input[type="checkbox"] {
    background: #ffffff !important;
    border: 2px solid #e1e5e9 !important;
}

/* Ensure the widget text is dark on light background */
.cf-turnstile .cf-turnstile-text {
    color: #333333 !important;
}

/* Ensure the widget container matches modern theme */
.modern-form-group .modern-turnstile-wrapper {
    background: transparent;
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

/* Reduce spacing for Turnstile form group */
.modern-form-group:has(.modern-turnstile-wrapper) {
    margin-bottom: 8px;
}

/* Additional spacing reduction for Turnstile */
.modern-turnstile-wrapper {
    margin: 3px 0 !important;
}

.modern-turnstile {
    margin: 0 !important;
}

/* Compact form styling to prevent scrolling */
.modern-form {
    max-height: 85vh;
    overflow-y: auto;
    padding: 10px 0;
}

.modern-form-group {
    margin-bottom: 8px;
}

.modern-form-group:last-child {
    margin-bottom: 5px;
}

/* Reduce checkbox wrapper spacing */
.modern-checkbox-wrapper {
    margin: 8px 0;
}

/* Compact button styling */
.modern-btn-login {
    margin-top: 8px;
    padding: 10px 20px;
}

/* Style the label with original font size */
.modern-form-group label {
    color: #495057;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    font-size: 16px; /* Restored original size */
}

/* Compact form header with original font sizes */
.modern-form-header {
    margin-bottom: 15px;
}

.modern-form-header h2 {
    margin-bottom: 8px;
}

.modern-form-header p {
    margin-bottom: 5px;
}

/* Responsive adjustments for smaller screens */
@media (max-height: 800px) {
    .modern-form-group {
        margin-bottom: 6px;
    }
    
    .modern-turnstile-wrapper {
        margin: 1px 0 !important;
    }
    
    .modern-form {
        max-height: 80vh;
    }
    
    .modern-form-header {
        margin-bottom: 10px;
    }
}

@media (max-height: 700px) {
    .modern-form-group {
        margin-bottom: 5px;
    }
    
    .modern-form {
        max-height: 75vh;
    }
    
    .modern-form-header {
        margin-bottom: 8px;
    }
}

@media (max-height: 600px) {
    .modern-form-group {
        margin-bottom: 4px;
    }
    
    .modern-form {
        max-height: 70vh;
    }
    
    .modern-form-header {
        margin-bottom: 5px;
    }
    
    .modern-form-group label {
        font-size: 14px;
    }
}

/* Dark Glass Turnstile Styling */
.dark-glass-turnstile-wrapper {
    margin: 2px 0;
    display: flex;
    justify-content: center;
}

.dark-glass-turnstile {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    padding: 2px !important;
    backdrop-filter: blur(10px) !important;
    max-width: 280px;
    width: 100%;
    transform: scale(0.95);
}

.dark-glass-turnstile:hover {
    border-color: #4fc3f7 !important;
    box-shadow: 0 6px 20px rgba(79, 195, 247, 0.3) !important;
    transform: translateY(-2px) !important;
}

.dark-glass-turnstile iframe {
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Dark Glass Turnstile overrides */
.dark-glass-form-group .cf-turnstile {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
}

.dark-glass-form-group .cf-turnstile * {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.dark-glass-form-group .cf-turnstile input[type="checkbox"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.dark-glass-form-group .cf-turnstile .cf-turnstile-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Dark Glass form group styling */
.dark-glass-form-group:has(.dark-glass-turnstile-wrapper) {
    margin-bottom: 8px;
}

.dark-glass-turnstile-wrapper {
    margin: 3px 0 !important;
}

.dark-glass-turnstile {
    margin: 0 !important;
}

/* Dark Glass compact form styling */
.dark-glass-container {
    max-height: 85vh;
    overflow-y: auto;
    padding: 10px 0;
}

.dark-glass-form-group {
    margin-bottom: 8px;
}

.dark-glass-form-group:last-child {
    margin-bottom: 5px;
}

.dark-glass-checkbox-wrapper {
    margin: 8px 0;
}

.dark-glass-btn-login {
    margin-top: 8px;
    padding: 10px 20px;
}

/* Dark Glass label styling */
.dark-glass-form-group label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    font-size: 16px;
}

/* Dark Glass form header */
.dark-glass-logo {
    margin-bottom: 15px;
}

/* Dark Glass responsive adjustments */
@media (max-height: 800px) {
    .dark-glass-form-group {
        margin-bottom: 6px;
    }
    
    .dark-glass-turnstile-wrapper {
        margin: 1px 0 !important;
    }
    
    .dark-glass-container {
        max-height: 80vh;
    }
    
    .dark-glass-logo {
        margin-bottom: 10px;
    }
}

@media (max-height: 700px) {
    .dark-glass-form-group {
        margin-bottom: 5px;
    }
    
    .dark-glass-container {
        max-height: 75vh;
    }
    
    .dark-glass-logo {
        margin-bottom: 8px;
    }
}

@media (max-height: 600px) {
    .dark-glass-form-group {
        margin-bottom: 4px;
    }
    
    .dark-glass-container {
        max-height: 70vh;
    }
    
    .dark-glass-logo {
        margin-bottom: 5px;
    }
    
    .dark-glass-form-group label {
        font-size: 14px;
    }
}

/* ===== LAYOUT SPECIFIC STYLES ===== */

/* Modern Auth2 Layout Styles */
.modern-content-area {
    max-height: 100vh;
    overflow-y: auto;
    padding: 10px 0;
}

.modern-right-panel {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.modern-content-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* Compact header controls with proper spacing */
.modern-header-controls {
    flex-shrink: 0;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left-section {
    padding-left: 10px;
}

.header-right-section {
    padding-right: 10px;
}

/* Ensure form doesn't exceed viewport */
.modern-form {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Responsive header spacing */
@media (max-width: 768px) {
    .modern-header-controls {
        padding: 10px 15px;
    }
    
    .header-left-section,
    .header-right-section {
        padding: 0 5px;
    }
}

@media (max-width: 480px) {
    .modern-header-controls {
        padding: 8px 10px;
    }
}

/* Dark Glass Layout Styles */
.dark-glass-content {
    max-height: 100vh;
    overflow-y: auto;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-glass-container {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    width: 100%;
}

/* Compact top bar with proper spacing */
.dark-glass-top-bar {
    flex-shrink: 0;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dark-glass-top-left {
    padding-left: 10px;
}

.dark-glass-top-right {
    padding-right: 10px;
}

/* Ensure form doesn't exceed viewport */
.dark-glass-form {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* Responsive header spacing for dark glass */
@media (max-width: 768px) {
    .dark-glass-top-bar {
        padding: 10px 15px;
    }
    
    .dark-glass-top-left,
    .dark-glass-top-right {
        padding: 0 5px;
    }
}

@media (max-width: 480px) {
    .dark-glass-top-bar {
        padding: 8px 10px;
    }
}

/* Dark Glass Body Background */
.dark-glass-body {
    background-color: #243949;
}

.dark-glass-body h1 {
    color: #fff;
}

/* ===== REGISTER FORM STYLES ===== */

/* Register form layout fixes */
body.register-page {
    overflow-y: auto !important;
    min-height: 100vh !important;
    height: auto !important;
}

.dark-glass-content.register-content {
    min-height: 100vh !important;
    overflow: visible !important;
    padding: 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Hide language dropdown for register form */
.dark-glass-top-bar.register-hidden {
    display: none !important;
}

/* Override dark glass layout for register form */
body.register-page .dark-glass-container {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.register-page .dark-glass-content {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Register form container */
.modern-form.register-form {
    color: #1a202c !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    max-width: 1200px !important;
    width: 95% !important;
    margin: 20px auto !important;
    padding: 50px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

/* Register form typography */
.modern-form.register-form h2,
.modern-form.register-form h3,
.modern-form.register-form p,
.modern-form.register-form label {
    color: #1a202c !important;
}

.modern-form.register-form h2 {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
}

.modern-form.register-form p {
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    color: #4a5568 !important;
}

.modern-section-title {
    color: #2d3748 !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    font-size: 20px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 10px !important;
}

.modern-form-group label {
    color: #4a5568 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Register form inputs */
.modern-input.register-input {
    color: #1a202c !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px 12px 45px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

.modern-input.register-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

.modern-input.register-input::placeholder {
    color: #a0aec0 !important;
}

/* Register form button */
.modern-btn-login.register-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

.modern-btn-login.register-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
}

/* Register form sections */
.modern-section {
    margin-bottom: 35px !important;
    padding: 25px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.modern-form-row {
    display: flex !important;
    gap: 25px !important;
    margin-bottom: 25px !important;
}

.modern-form-row .modern-form-group {
    flex: 1 !important;
}

/* Form validation styles */
.required {
    color: #e53e3e !important;
    font-weight: bold !important;
    margin-left: 3px !important;
}

.field-error {
    color: #e53e3e !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    display: block !important;
    min-height: 16px !important;
}

.modern-input.error {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1) !important;
}

.modern-input[readonly] {
    background-color: #f7fafc !important;
    color: #4a5568 !important;
    cursor: not-allowed !important;
    border-color: #e2e8f0 !important;
}

/* Select2 styling for register form */
.country-select2,
.currency-select2,
.title-select2 {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

.country-select2:focus,
.currency-select2:focus,
.title-select2:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

/* Remove generic select2 styles that affect all select2 elements */
/* These styles should only apply to specific contexts, not globally */

/* Input wrapper with icons */
.modern-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.modern-input-wrapper i {
    position: absolute !important;
    left: 15px !important;
    color: #a0aec0 !important;
    font-size: 16px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.modern-input-wrapper .select2-container {
    width: 100% !important;
}

.modern-input-wrapper .select2-container .select2-selection--single {
    height: 48px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding-left: 45px !important;
}

.modern-input-wrapper .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important;
    padding-left: 0 !important;
    color: #1a202c !important;
}

.modern-input-wrapper .select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 10px !important;
}

.modern-input-wrapper .select2-container.select2-container--focus .select2-selection--single {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Register form responsive design */
@media (max-width: 1400px) {
    .modern-form.register-form {
        max-width: 1100px !important;
        width: 90% !important;
        margin: 25px auto !important;
        padding: 45px !important;
    }
}

@media (max-width: 1200px) {
    .modern-form.register-form {
        max-width: 1000px !important;
        width: 90% !important;
        margin: 20px auto !important;
        padding: 40px !important;
    }
}

@media (max-width: 992px) {
    .modern-form.register-form {
        max-width: 95% !important;
        width: 95% !important;
        margin: 15px auto !important;
        padding: 35px !important;
    }
}

@media (max-width: 768px) {
    .modern-form.register-form {
        max-width: 95% !important;
        width: 95% !important;
        margin: 10px auto !important;
        padding: 30px !important;
    }
    
    .modern-form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .modern-form-row .modern-form-group {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
}

@media (max-width: 480px) {
    .modern-form.register-form {
        max-width: 100% !important;
        width: 100% !important;
        margin: 5px !important;
        padding: 25px !important;
    }
    
    .modern-section-title {
        font-size: 18px !important;
    }
}

/* ===== PASSWORD RESET FORMS STYLES ===== */

/* Password reset email form */
.modern-form.password-reset-email {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Password reset form */
.modern-form.password-reset {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Password reset form headers */
.modern-form-header.password-reset-header {
    margin-bottom: 40px !important;
    text-align: center !important;
}

.modern-form-header.password-reset-header h2 {
    font-size: 32px !important;
    color: #1a202c !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}

.modern-form-header.password-reset-header p {
    color: #718096 !important;
    font-size: 16px !important;
}

/* Password reset form groups */
.modern-form-group.password-reset-group {
    margin-bottom: 24px !important;
}

.modern-form-group.password-reset-group label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #4a5568 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.modern-input-wrapper.password-reset-wrapper {
    position: relative !important;
}

.modern-input-wrapper.password-reset-wrapper i {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    color: #a0aec0 !important;
}

.modern-input.password-reset-input {
    width: 100% !important;
    padding: 16px 20px 16px 50px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    color: #1a202c !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

.modern-input.password-reset-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.modern-input.password-reset-input::placeholder {
    color: #a0aec0 !important;
}

/* Password reset form buttons */
.modern-btn-login.password-reset-btn {
    width: 100% !important;
    padding: 16px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.modern-btn-login.password-reset-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
}

/* Password reset form links */
.modern-register-link.password-reset-link {
    text-align: center !important;
    margin-top: 28px !important;
    color: #718096 !important;
    font-size: 14px !important;
}

.modern-register-link.password-reset-link a {
    color: #667eea !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.5) !important;
    transition: border-color 0.3s ease !important;
}

.modern-register-link.password-reset-link a:hover {
    border-color: #667eea !important;
}

/* Password reset form error alerts */
.alert.password-reset-alert {
    background: #fed7d7 !important;
    border: 1px solid #feb2b2 !important;
    color: #c53030 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
}

.alert.password-reset-alert ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

.help-block.password-reset-help {
    color: #e53e3e !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    display: block !important;
}

/* Turnstile widget for password reset forms */
.modern-turnstile-wrapper.password-reset-turnstile {
    margin: 20px 0 !important;
    text-align: center !important;
}

.modern-turnstile.password-reset-turnstile {
    display: inline-block !important;
    margin: 0 auto !important;
}

/* Responsive design for password reset forms */
@media (max-width: 768px) {
    .modern-form.password-reset-email,
    .modern-form.password-reset {
        max-width: 95% !important;
        padding: 30px !important;
    }
    
    .modern-form-header.password-reset-header h2 {
        font-size: 28px !important;
    }
}

@media (max-width: 480px) {
    .modern-form.password-reset-email,
    .modern-form.password-reset {
        max-width: 100% !important;
        padding: 25px !important;
        margin: 10px !important;
    }
    
    .modern-form-header.password-reset-header h2 {
        font-size: 24px !important;
    }
}

/* ===== POS CUSTOMER FIELD STYLES ===== */
/* Scoped to POS pages only to avoid conflicts with other forms */

/* Make customer field column expand to fill available space */
#add_pos_sell_form .pos_customer_search .col-md-4,
#edit_pos_sell_form .row:first-child .col-md-4 {
    flex: 1 1 auto !important;
    max-width: none !important;
}

/* Keep search product column at fixed width */
#add_pos_sell_form .pos_customer_search .col-md-8,
#edit_pos_sell_form .row:first-child .col-md-8 {
    flex: 0 0 auto !important;
}

/* Fix customer_id Select2 overflow in POS create/edit pages */
#add_pos_sell_form #customer_id + .select2-container,
#edit_pos_sell_form #customer_id + .select2-container {
    max-width: 100% !important;
    width: 100% !important;
}

#add_pos_sell_form #customer_id + .select2-container .select2-selection__rendered,
#edit_pos_sell_form #customer_id + .select2-container .select2-selection__rendered {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Flexbox layout for customer search input group */
#add_pos_sell_form .pos_customer_search .input-group,
#edit_pos_sell_form .row:first-child .input-group {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Select2 container sizing within input group - allow it to grow */
#add_pos_sell_form .pos_customer_search .input-group #customer_id + .select2-container,
#edit_pos_sell_form .row:first-child .input-group #customer_id + .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

/* Input group addon and button sizing */
#add_pos_sell_form .pos_customer_search .input-group-addon,
#edit_pos_sell_form .row:first-child .input-group-addon {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 40px !important;
}

#add_pos_sell_form .pos_customer_search .input-group-btn,
#edit_pos_sell_form .row:first-child .input-group-btn {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* ===== PAYMENT MODAL STYLES ===== */
/* Scoped to payment modal only to avoid conflicts */

/* Fix account dropdown Select2 overflow in payment modal */
#modal_payment .account-dropdown + .select2-container {
    max-width: 100% !important;
    width: 100% !important;
}

#modal_payment .account-dropdown + .select2-container .select2-selection__rendered {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Flexbox layout for payment modal input groups */
#modal_payment .form-group .input-group {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Select2 container sizing within payment modal input group */
#modal_payment .form-group .input-group .account-dropdown + .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 40px) !important;
    width: auto !important;
}

/* Input group addon sizing in payment modal */
#modal_payment .form-group .input-group-addon {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 40px !important;
}