/* =====================================================
   IDBI THEME VARIABLES (NO DESIGN CHANGE)
===================================================== */
:root {
	--idbi-green: #00836c;
	--idbi-orange: #f37021;
	--idbi-dark: #0a4f3d;
	--idbi-dark-hover: #083f31;

	--idbi-danger: #d32f2f;
	--idbi-danger-hover: #b71c1c;

	--idbi-success: #27ae60;
	--idbi-warning: #e67e22;
	--idbi-info: #2980b9;

	--idbi-bg: #ffffff;
	--idbi-page-bg: #f4f6f8;

	--idbi-border: rgb(38, 149, 55);
	--idbi-muted: #999;
}




/* Sad Face Emoji */
/* <div class="oops-emoji-sad"> */
/*     <div class="oops-mouth-sad"></div> */
/* </div> */
.oops-emoji-sad {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    border: 4px solid var(--idbi-orange);
    border-radius: 50%;
    position: relative;
    background: #fff5f5;
}

/* Eyes */
.oops-emoji-sad::before,
.oops-emoji-sad::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--idbi-orange);
    border-radius: 50%;
    position: absolute;
    top: 28px;
}

.oops-emoji-sad::before {
    left: 22px;
}

.oops-emoji-sad::after {
    right: 22px;
}

/* Sad Oops Mouth */
.oops-mouth-sad {
    width: 40px;
    height: 20px;
    border-top: 4px solid var(--idbi-orange);
    border-radius: 40px 40px 0 0;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}




/* Happy Face Emoji */
/* <div class="oops-emoji-happy">
       <div class="oops-mouth-happy"></div>
   </div> */

.oops-emoji-happy {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    border: 4px solid var(--idbi-green);
    border-radius: 50%;
    position: relative;
    background: #e8f8f2;;
}

/* Eyes */
.oops-emoji-happy::before,
.oops-emoji-happy::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--idbi-green);
    border-radius: 50%;
    position: absolute;
    top: 28px;
}

.oops-emoji-happy::before {
    left: 22px;
}

.oops-emoji-happy::after {
    right: 22px;
}

/* Happy Smile */
.oops-mouth-happy {
    width: 40px;
    height: 20px;
    border-bottom: 4px solid var(--idbi-green);
    border-radius: 0 0 40px 40px;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}


/* Danger Face Emoji */
/* <div class="oops-emoji-danger">
       <div class="oops-mouth-danger"></div>
   </div> */

.oops-emoji-danger {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    border: 4px solid var(--idbi-danger);
    border-radius: 50%;
    position: relative;
    background: #fdecec; /* Light Danger Background */
}

/* Eyes */
.oops-emoji-danger::before,
.oops-emoji-danger::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--idbi-danger);
    border-radius: 50%;
    position: absolute;
    top: 28px;
}

.oops-emoji-danger::before {
    left: 22px;
}

.oops-emoji-danger::after {
    right: 22px;
}

/* Angry / Danger Mouth */
.oops-mouth-danger {
    width: 40px;
    height: 20px;
    border-top: 4px solid var(--idbi-danger);
    border-radius: 40px 40px 0 0;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}


/* Neutral Face Emoji */
/* <div class="oops-emoji-neutral">
       <div class="oops-mouth-neutral"></div>
   </div> */

.oops-emoji-neutral {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    border: 4px solid var(--idbi-warning);
    border-radius: 50%;
    position: relative;
    background: #fff8e8; /* Light Neutral Background */
}

/* Eyes */
.oops-emoji-neutral::before,
.oops-emoji-neutral::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--idbi-warning);
    border-radius: 50%;
    position: absolute;
    top: 28px;
}

.oops-emoji-neutral::before {
    left: 22px;
}

.oops-emoji-neutral::after {
    right: 22px;
}

/* Neutral Mouth */
.oops-mouth-neutral {
    width: 35px;
    border-top: 4px solid var(--idbi-warning);
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
}

/* Terrific / Alert Danger Face */
/* <div class="oops-emoji-alert">
       <div class="oops-mouth-alert"></div>
   </div> */

.oops-emoji-alert {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    border: 4px solid var(--idbi-danger);
    border-radius: 50%;
    position: relative;
    background: #ffe6e6; /* strong light red alert background */
}

/* Shocked Eyes */
.oops-emoji-alert::before,
.oops-emoji-alert::after {
    content: '';
    width: 10px;
    height: 14px;
    background: var(--idbi-danger);
    border-radius: 50%;
    position: absolute;
    top: 26px;
}

.oops-emoji-alert::before {
    left: 22px;
}

.oops-emoji-alert::after {
    right: 22px;
}

/* Alert Mouth (open / shocked) */
.oops-mouth-alert {
    width: 18px;
    height: 18px;
    border: 3px solid var(--idbi-danger);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    background: #fff;
}