/*------------------------------------------------------------------
    File Name :  custom.css
    Added By  :Ashish
    PURPOSE   : Style For Webaccess and user password toggle
    Date      : 22-01-2026
-------------------------------------------------------------------*/

/** ADD YOUR AWESOME CODES HERE **/
.login {
   z-index: unset !important;
}

.footer {
   color: #FFFFFF !important;
}

.footer a {
   color: #69aaf0 !important;
   font-weight: 500;
}

.footer a:hover,
.footer a:focus {
   color: #ffc107 !important;
   text-decoration: none;
}

@media (max-width: 420px) {

   .register,
   .login {
      top: 10vh;
      height: 60% !important;
   }
}

.logo_login:after {
   background: none;
}

.disabled-field {
   opacity: 0.6;
   pointer-events: none;
   cursor: not-allowed;
   background-color: #e9ecef !important;
}

.lockout-overlay {
   position: relative;
   width: 100%;
   height: auto;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 12px 0 0 0;
}

.lockout-box {
   background: rgba(220, 53, 69, 0.08);
   border: 1px solid rgba(220, 53, 69, 0.35);
   border-radius: 20px;
   padding: 24px 20px;
   max-width: 100%;
   width: 100%;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
   height: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.lockout-box h6 {
   font-size: 1.15rem;
   font-weight: 700;
   color: #ff4a5a !important;
   margin-top: 0;
   margin-bottom: 12px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
}

.lockout-box p {
   color: rgba(255, 255, 255, 0.85);
   font-size: 0.88rem;
   line-height: 1.5;
   margin-bottom: 12px;
}

.lockout-icon {
   font-size: 2.8rem;
   color: #ff4a5a;
   margin-bottom: 12px;
   filter: drop-shadow(0 0 10px rgba(255, 74, 90, 0.5));
}

.countdown-timer {
   font-family: 'Outfit', monospace;
   font-size: 2.8rem;
   font-weight: 800;
   color: #ff4a5a;
   letter-spacing: 0.05em;
   margin: 8px 0;
   text-shadow: 0 0 15px rgba(255, 74, 90, 0.6);
}

.lockout-box .alert-info {
   background: rgba(26, 109, 255, 0.08) !important;
   border: 1px solid rgba(26, 109, 255, 0.2) !important;
   color: #8cc3ff !important;
   border-radius: 12px;
   padding: 12px;
   font-size: 0.8rem;
   width: 100%;
   margin-top: 10px;
   text-align: left;
}

.lockout-box .alert-info strong {
   color: #fff;
}

.attempt-counter {
   position: absolute;
   top: 10px;
   right: 10px;
   background: #ffc107;
   color: #333;
   padding: 5px 10px;
   border-radius: 20px;
   font-size: 0.8rem;
   font-weight: bold;
}

.session-timeout-warning {
   position: fixed;
   top: 20px;
   right: 20px;
   background: #ffc107;
   color: #856404;
   padding: 15px;
   border-radius: 5px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   z-index: 9999;
   display: none;
}

.captcha-box {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 5px;
   padding: 15px;
   margin-bottom: 15px;
}

/* .captcha-question {
    font-size: 1.3rem;
    font-weight: bold;
    color: #007bff;
    text-align: center;
     margin-bottom: 10px; 
    font-family: 'Courier New', monospace;
 } */

.captcha-input {
   text-align: center;
   font-size: 1.2rem;
   font-weight: bold;
}

.captcha-refresh-btn {
   margin-top: 10px;
   font-size: 0.9rem;
}

.hidden {
   display: none !important;
}

/*password toggle for user add*/
.input-wrapper-pass {
   position: relative;
}

.pass-toggle {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
   cursor: pointer;
   z-index: 1;
}

/*password toggle for user add*/
/* Vessel Status Control Panel */
.vessel-status-panel {
   position: absolute;
   top: 80px;
   left: 20px;
   background: rgba(15, 23, 42, 0.85);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   padding: 12px;
   z-index: 1000;
   color: #fff;
   width: 260px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.vessel-status-panel-header {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   padding-bottom: 5px;
}

.status-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
   font-size: 13px;
}

.status-item:last-child {
   margin-bottom: 0;
}

.status-checkbox-label {
   display: flex;
   align-items: center;
   cursor: pointer;
}

.status-checkbox-label input[type='checkbox'] {
   margin-right: 8px;
   accent-color: #14b8a6;
}

.status-count-badge {
   background: rgba(255, 255, 255, 0.1);
   padding: 2px 8px;
   border-radius: 12px;
   font-weight: bold;
   font-size: 12px;
}

/* Status Colors Indicator */
.status-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
   margin-right: 6px;
}

.status-dot.berthed {
   background-color: #d4537e;
}

.status-dot.sailed {
   background-color: #185fa5;
}

.status-dot.confirmed {
   background-color: #639922;
}

.status-dot.tentative {
   background-color: #7f77dd;
}