.radio-group:focus-within {
     border-color: #009efb;
     box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
 }

 #icon_btn {
     color: #fff;
     float: left;
     font-size: 20px;
     line-height: 50px;
     padding: 0 10px;
 }

 @media only screen and (max-width: 991.98px) {
     #icon_btn {
         margin-left: 45px;
     }

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

 .alert {
     padding: 10px;
     margin-bottom: 10px;
     border-radius: 5px;
     font-size: 16px;
     margin-top: 10px;
     margin-left: 15px;
     position: relative;
     font-family: Arial, sans-serif;
 }

 .alert-success {
     background-color: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
 }

 .alert-danger {
     background-color: #f8d7da;
     color: #721c24;
     border: 1px solid #f5c6cb;
 }

 .alert-info {
     background-color: #d1ecf1;
     color: #0c5460;
     border: 1px solid #bee5eb;
 }

 .alert-warning {
     background-color: #fff3cd;
     color: #856404;
     border: 1px solid #ffeeba;
 }

 .alert .close {
     position: absolute;
     top: 0px;
     right: 0px;
     padding: 0 0 0 20px;
     background: none;
     border: none;
     font-size: 22px;
     color: black;
 }

 @media (max-width: 768px) {
     .alert {
         margin-top: 3rem;
         margin-bottom: 0;
     }
 }


 /* change password model css */

 .field-icon {
     position: absolute;
     top: 38px;
     right: 15px;
     cursor: pointer;
     color: #999;
 }


 /* loader model css */
 .page-loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: linear-gradient(135deg, #e0e7ef 0%, #f6f8fa 100%);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     opacity: 1;
     pointer-events: all;
     transition: opacity 0.7s cubic-bezier(.77, 0, .18, 1);
 }

 .page-loader.hide {
     opacity: 0;
     pointer-events: none;
 }

 .loader-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     position: relative;
 }

 .loader-3d {
     width: 90px;
     height: 90px;
     position: relative;
     margin-bottom: 26px;
     display: flex;
     align-items: center;
     justify-content: center;
     perspective: 600px;
 }

 .loader-spinner {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background: conic-gradient(#3b82f6 0% 25%, #a78bfa 25% 50%, #f472b6 50% 75%, #34d399 75% 100%);
     box-shadow: 0 0 35px 10px #60a5fa33, 0 6px 32px #6366f133;
     animation: spin3d 1.1s cubic-bezier(.77, 0, .18, 1) infinite;
     position: relative;
     z-index: 2;
 }

 .loader-spinner::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 48px;
     height: 48px;
     background: #fff;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 0 0 28px 8px #a5d6fa33;
     z-index: 1;
 }

 .loader-orbit {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100px;
     height: 100px;
     transform: translate(-50%, -50%);
     pointer-events: none;
     z-index: 1;
 }

 .loader-dot {
     position: absolute;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: linear-gradient(135deg, #f472b6 40%, #3b82f6 100%);
     box-shadow: 0 0 18px 4px #f472b655;
     animation: orbit 1.7s linear infinite;
 }

 .loader-dot:nth-child(1) {
     top: 0;
     left: 43px;
     animation-delay: 0s;
 }

 .loader-dot:nth-child(2) {
     top: 43px;
     left: 86px;
     animation-delay: .3s;
 }

 .loader-dot:nth-child(3) {
     top: 86px;
     left: 43px;
     animation-delay: .6s;
 }

 .loader-dot:nth-child(4) {
     top: 43px;
     left: 0;
     animation-delay: .9s;
 }

 @keyframes orbit {
     0% {
         filter: brightness(1.1);
     }

     50% {
         filter: brightness(1.7) drop-shadow(0 0 8px #a78bfa);
     }

     100% {
         filter: brightness(1.1);
     }
 }

 @keyframes spin3d {
     0% {
         transform: rotateY(0deg) rotateZ(0deg);
     }

     100% {
         transform: rotateY(360deg) rotateZ(360deg);
     }
 }

 .loader-progress {
     width: 120px;
     height: 7px;
     border-radius: 6px;
     background: #e5e7eb;
     margin-top: 10px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 2px 8px #3b82f622;
 }

 .loader-bar {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, #3b82f6, #a78bfa, #f472b6, #34d399);
     animation: progressBar 1.8s cubic-bezier(.77, 0, .18, 1) infinite;
 }

 @keyframes progressBar {
     0% {
         width: 0%;
     }

     50% {
         width: 100%;
     }

     100% {
         width: 0%;
     }
 }

 .loader-text {
     margin-top: 30px;
     font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 20px;
     font-weight: 700;
     color: #3b3b3b;
     letter-spacing: 1px;
     min-height: 28px;
     /* for typewriter effect */
     position: relative;
     display: inline-block;
 }

 .typewriter {
     display: inline-block;
     overflow: hidden;
     border-right: 2px solid #3b82f6;
     white-space: nowrap;
     animation: typing 2.4s steps(30, end) infinite, blink-caret .7s step-end infinite;
     font-family: inherit;
     font-size: inherit;
     color: inherit;
 }

 @keyframes typing {
     0% {
         width: 0;
     }

     60% {
         width: 100%;
     }

     100% {
         width: 100%;
     }
 }

 @keyframes blink-caret {

     0%,
     100% {
         border-color: #3b82f6;
     }

     50% {
         border-color: transparent;
     }
 }




 /* icon Model css */


 .icon-item {
     display: inline-flex;
     align-items: center;
     margin: 8px;
     font-size: 22px;
     border: 1px solid #ccc;
     padding: 6px 10px;
     border-radius: 8px;
     background: #f9f9f9;
 }

 .icon-item button {
     background: none;
     border: none;
     cursor: pointer;
     color: #007bff;
     margin-left: 6px;
     font-size: 18px;
 }

 .icon-item button:hover {
     color: #0056b3;
 }

 .modal-body .alert {
     animation: fadeIn 0.3s ease-in-out;
 }

 .modal {
     z-index: 9999;
 }

 .modal-backdrop {
     z-index: 9998;
 }


 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }