/* Custom CSS */
.swr-color {
  color: #30a39a !important;
}

.bg-liquidblue {
  background-color: #f7fbfe !important;
}

.custom-btn-swr {
  background-color: #ffffff !important;
  border-color: #30a39a !important;
  color: #30a39a !important;
  transition: all 0.2s ease-in-out !important;
}

/* Force override for hover, active, and focus states */
.custom-btn-swr:hover,
.custom-btn-swr:active,
.custom-btn-swr:focus {
  background-color: #30a39a !important;
  border-color: #30a39a !important;
  color: #ffffff !important;
}

/* Ensures the inner text span inherits the color perfectly on hover */
.custom-btn-swr:hover span,
.custom-btn-swr:hover i {
  color: #ffffff !important;
}

/* Base State of the upload container */
.custom-upload-zone {
  background-color: #f8fafc !important;
  border-style: dashed !important;
  border-width: 1.5px !important;
  border-color: #cbd5e1 !important;
  transition: all 0.2s ease-in-out !important;
}

/* Base State of the inner icon container box */
.custom-container-zone {
  background-color: #f2faf9 !important;
  border-style: dashed !important;
  border-width: 1.5px !important;
  border-color: #30a39a !important;
  transition: all 0.2s ease-in-out !important;
}

/* ------------------------------------------------------------- */
/* HOVER STATES: Changes style when user hovers over container   */
/* ------------------------------------------------------------- */

/* Container effects on hover */
.custom-upload-zone:hover {
  background-color: #f2faf9 !important; /* Soft teal tint backdrop */
  border-color: #30a39a !important;    /* Teal dashed line border */
  cursor: pointer;
}

/* Utility layout rule for absolute file hidden layer overlay */
.cursor-pointer {
  cursor: pointer;
}

/***** APPLICATION-TRACK.PHP *****/
.progress-active {
  background-color: #f4fbfc !important; 
}

.progress-cricle {
  width: 40px; 
  height: 40px; 
  font-size: 1rem; 
  font-weight: 800;
}

.sub-progress-cricle {
  width: 30px; 
  height: 30px; 
 
}

.circle-color {
  background-color: #e8f7f6 !important; 
  color: #85ceca !important;
}

.circle-color-active {
  background-color: #30a39a !important; 
}

.sub-circle-color {
  background-color: #85ceca !important; 
}

.sub-circle-color-active {
  background-color: #30a39a !important; 
}

.img-container {
  background-color: #f8fafc !important; 
  border-color: #cbd5e1 !important;
}

/* Precise Text Field Typography Inner Visual Balancing Weights */
.custom-ref-input::placeholder {
  color: #94a3b8 !important;
  font-family: inherit;
}
.custom-ref-input:focus {
  border-color: #30a39a !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 122, 116, 0.15) !important;
}

/* Primary Search Control Element Styling Definitions Map */
.custom-search-submit-btn {
  background-color: #30a39a !important;
  border-color: #30a39a !important;
  transition: all 0.2s ease-in-out !important;
}
.custom-search-submit-btn:hover,
.custom-search-submit-btn:focus,
.custom-search-submit-btn:active {
  background-color: #4cb9b0 !important;
  border-color: #4cb9b0 !important;
  color: #ffffff !important;
}

/* Secondary Redirect Element Action Button Properties Map */
.custom-redirect-btn {
  background-color: #30a39a !important;
  border-color: #30a39a !important;
  transition: all 0.2s ease-in-out !important;
}
.custom-redirect-btn:hover,
.custom-redirect-btn:focus,
.custom-redirect-btn:active {
  background-color: #4cb9b0 !important;
  border-color: #4cb9b0 !important;
  color: #ffffff !important;
}

/* Dotted/Dashed Line Border Alignment Token Option for Card 2 Context */
.custom-info-redirect-card {
  border-style: dashed !important;
  border-width: 1px !important;
}

.footer-color {
    background-color: #f4f6f7 !important;
}

.custom-btn-help {
  background-color: #30a39a !important;
  border-color: #30a39a !important;
  color:  #ffffff !important;
  transition: all 0.2s ease-in-out !important;
}

.custom-btn-help:hover,
.custom-btn-help:focus,
.custom-btn-help:active {
  background-color: #4cb9b0 !important;
  border-color: #4cb9b0 !important;
  color: #ffffff !important;
}

/* Floating Action Button Standard and Active States Configuration */
.custom-floating-help-btn {
  background-color: #30a39a !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
}
.custom-floating-help-btn:hover {
  background-color: #4cb9b0 !important;
  transform: scale(1.05);
}

/* Bright WhatsApp Green Interaction Colors */
.custom-whatsapp-btn {
  background-color: #24cc63 !important;
  border-color: #24cc63 !important;
  transition: background-color 0.2s ease-in-out !important;
}
.custom-whatsapp-btn:hover {
  background-color: #1ebe54 !important;
}

/* Corporate Internal Theme Call Accent Action Colors */
.custom-call-btn {
  background-color: #30a39a !important;
  border-color: #30a39a !important;
  transition: background-color 0.2s ease-in-out !important;
}
.custom-call-btn:hover {
  background-color: #4cb9b0 !important;
}

/* Clean appearance transition animation layout context */
.animate-fade-in {
  animation: widgetFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes widgetFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Precise Rounded Curves Matching the Dashboard Theme Architecture */
.rounded-5 {
  border-radius: 1.5rem !important;
}

/* Custom Button 1: Theme Dark-Teal Action Button Properties */
.custom-btn-swrgreen {
  background-color: #30a39a !important;
  border-color: #30a39a !important;
  transition: all 0.2s ease-in-out !important;
}
.custom-btn-swrgreen:hover,
.custom-btn-swrgreen:active,
.custom-btn-swrgreen:focus {
  background-color: #4cb9b0 !important;
  border-color: #4cb9b0 !important;
  color: #ffffff !important;
}

/* Custom Button 2: Bright WhatsApp Green Base and Hover State Settings */
.custom-whatsapp-btn-action {
  background-color: #24cc63 !important;
  border-color: #24cc63 !important;
  transition: all 0.2s ease-in-out !important;
}
.custom-whatsapp-btn-action:hover,
.custom-whatsapp-btn-action:active,
.custom-whatsapp-btn-action:focus {
  background-color: #1ebe54 !important;
  border-color: #1ebe54 !important;
  color: #ffffff !important;
}

/* Typography adjustment rule for title bold weighting adjustments */
.fw-extrabold {
  font-weight: 800 !important;
}

/* Past Steps Vertical Line Connector Color Override */
.custom-timeline-line-completed {
  border-color: #e2e8f0 !important;
}

/* Gray Tint Style Configuration for Finished Step Badge Counters */
.custom-step-circle-completed {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #94a3b8 !important;
}

/* Primary Dark Teal Fill Specs for the Active Circle Trigger Core Node */
.custom-step-circle-active {
  background-color: #4cb9b0 !important;
  color: #ffffff !important;
}

/* Target Inner Status Container Row Properties Map */
.custom-active-task-row {
  background-color: #f2faf9 !important;
  border-color: #4cb9b0 !important;
}

/* Active Task Icon Circle Box Core Styles */
.custom-active-task-icon-box {
  background-color: #4cb9b0 !important;
}

/* Native Bootstrap Pill Tracking Badge Theme Accent Fill Override */
.custom-status-badge-accent {
  background-color: #4cb9b0 !important;
  color: #ffffff !important;
}

.custom-circleinfo {
  z-index: 20 !important;
}

/***** APPLICATION-TRACK.PHP(END) *****/

/***** RESULT.PHP *****/

/* Base Pill Layout Color Settings Matching Your Primary Accent Theme */
.custom-status-pill {
  background-color: #30a39a !important;
}

/* Light Grey Background Box Layer for the Inner Grid Component */
.custom-metrics-panel-bg {
  background-color: #30a39a0a !important;
  border: 1px solid #f1f5f9 !important;
}

/* ------------------------------------------------------------- */
/* ANIMATED CONCENTRIC RADAR BULLET ICON CODES                   */
/* ------------------------------------------------------------- */

/* Outer glowing translucent circle wrapper halo */
.custom-pulse-ring {
  width: 22px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  animation: radarPulse 2s ease-in-out infinite;
}

/* Central solid tracking node core element */
.custom-pulse-dot {
  width: 11px;
  height: 11px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

@keyframes radarPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Heading Typography Extra Weights Enhancement Rule */
.font-heading {
  font-weight: 800 !important;
}

/***** RESULT.PHP(END) *****/

.no-padding
{
    padding: 0 !important;
}

.padding-side
{
    padding-right: 3% !important;
    padding-left: 3% !important;
}

.padding-top-3
{
    padding-top: 3%;
}

.padding-bottom-3
{
    padding-bottom: 3%;
}

.padding-top-5
{
    padding-top: 5%;
}

.padding-bottom-5
{
    padding-bottom: 5%;
}

.padding-top-10
{
    padding-top: 10%;
}

.padding-bottom-10
{
    padding-bottom: 10%;
}

.no-margin
{
    margin: 0 !important;
}

.margin-auto
{
    margin: auto;
}

.margin-bottom-3
{
    margin-bottom: 3% !important; 
}

.margin-bottom-5
{
    margin-bottom: 5% !important; 
}
.margin-bottom-10
{
    margin-bottom: 10%; 
}
.margin-bottom-20
{
    margin-bottom: 20%; 
}
.margin-bottom-50
{
    margin-bottom: 50%; 
}

.margin-top-3
{
    margin-top: 3%; 
}

.margin-top-4
{
    margin-top: 4%; 
}

.margin-top-5
{
    margin-top: 5%; 
}
.margin-top-10
{
    margin-top: 10%; 
}
.margin-top-20
{
    margin-top: 20%; 
}
.margin-top-50
{
    margin-top: 50%; 
}

/* Alignment */
.align-justify
{
    text-align: justify !important;
}

.align-center
{
    text-align: center !important;
}

.align-left
{
    text-align: left;
}

.align-right
{
    text-align: right;
}

.line-height-2
{
    line-height: 2;
}
/* Alignment */

/* Font CSS */
.font-12
{
    font-size:12px;
}

.font-14
{
    font-size:14px;
}

.font-16
{
    font-size:16px;
}

.font-18
{
    font-size:18px;
}

.font-20
{
    font-size:20px;
}

.font-22
{
    font-size:22px;
}

.font-24
{
    font-size:24px;
}

.font-26
{
    font-size:26px;
}

.font-28
{
    font-size:28px;
}

.bold900
{
    font-weight: 900;
}

.bold700
{
    font-weight: 700;
}

.bold400
{
    font-weight: 400;
}

.bold300
{
    font-weight: 300;
}

.white
{
    color:#ffffff !important;
}

.black
{
    color:#000000 !important;
}

.maroon
{
    color: #2A0000;
}
/* Font CSS */

/*Read More*/
.more {
    overflow: hidden;
}
/*Read More*/


/*MOBILE VIEW*/
@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 900px) 
{ 
    .font-12
    {
        font-size:4px;
    }

    .font-14
    {
        font-size:6px;
    }

    .font-16
    {
        font-size:8px;
    }

    .font-18
    {
        font-size:10px;
    }

    .font-20
    {
        font-size:12px;
    }

    .font-22
    {
        font-size:14px;
    }

    .font-24
    {
        font-size:16px;
    }

    .font-26
    {
        font-size:18px;
    }

    .font-28
    {
        font-size:20px;
    }
}