.elementor-4630 .elementor-element.elementor-element-814f46e{--display:flex;--margin-top:20px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-4630:not(.elementor-motion-effects-element-type-background), body.elementor-page-4630 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E9EFFA;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for html, class: .elementor-element-bcb7024 *//* GradeMaster Pro Styles - Complete CSS */
        .grade-master-pro-app {
            --primary: #0066cc;
            --primary-dark: #0052a3;
            --success: #28a745;
            --danger: #dc3545;
            --light-gray: #f8f9fa;
            --gray: #6c757d;
            --dark-gray: #495057;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
        }
        
        .grade-master-pro-app .app-header {
            text-align: center;
            padding: 30px 0 20px;
            margin-bottom: 30px;
            animation: zoomIn 0.8s ease-out; /* Added zoom animation */
        }
        
        .grade-master-pro-app .app-header h1 {
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
            font-size: 2.5rem;
        }
        
        .grade-master-pro-app .app-header p {
            color: var(--dark-gray);
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .grade-master-pro-app .calculator-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            padding: 35px;
            border: 1px solid #e0e0e0;
            animation: zoomIn 0.6s ease-out 0.2s both; /* Added zoom animation with delay */
        }
        
        .grade-master-pro-app .main-content {
            padding: 30px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        @media (max-width: 992px) {
            .grade-master-pro-app .main-content {
                grid-template-columns: 1fr;
            }
        }
        
        .grade-master-pro-app .calculator-card,
        .grade-master-pro-app .result-card {
            background: var(--light-gray);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border: 2px solid #e9ecef;
        }
        
        .grade-master-pro-app .result-card {
            background: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 300px;
        }
        
        .grade-master-pro-app .form-group {
            margin-bottom: 25px;
        }
        
        .grade-master-pro-app .form-label {
            font-weight: 600;
            color: var(--dark-gray);
            margin-bottom: 10px;
            display: block;
            font-size: 1.1rem;
        }
        
        /* FIXED: Form control styles with !important to ensure spinners show */
        .grade-master-pro-app .form-control {
            padding: 
            5px !important;
            border-radius: px !important;
            color:#000000;
            border: 1px solid #d1d1d1 !important;
            font-size: 1.1rem !important;
            width: 100% !important;
            transition: all 0.3s !important;
            -moz-appearance: textfield !important; /* Firefox */
        }
        
        /* Show spinners in Webkit browsers */
        .grade-master-pro-app .form-control::-webkit-outer-spin-button,
        .grade-master-pro-app .form-control::-webkit-inner-spin-button {
            -webkit-appearance: auto !important;
            margin: 0;
            opacity: 1;
            height: 30px;
        }
        
        /* Show spinners in Firefox */
        .grade-master-pro-app .form-control[type="number"] {
            -moz-appearance: textfield !important;
        }
        
        .grade-master-pro-app .form-control[type="number"]:hover,
        .grade-master-pro-app .form-control[type="number"]:focus {
            -moz-appearance: number-input !important;
        }
        
        .grade-master-pro-app .form-control:focus {
            border-color: var(--primary) !important;
            outline: none !important;
              color:#000000;
            box-shadow: 0 0 0 0.25rem rgba(0, 102, 204, 0.25) !important;
        }
        
        .grade-master-pro-app .btn-calculate,
        .grade-master-pro-app .btn-clear {
            background: linear-gradient(to right, #0066cc, #0088ff);
            border: none;
            color: white;
            font-weight: 600;
            padding: 15px 32px;
            border-radius: 0;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            font-size: 1.1rem;
            width: 100%;
            margin-top: 10px;
        }
        
        .grade-master-pro-app .btn-calculate:hover {
            background: linear-gradient(to right, #0052a3, #0066cc);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,102,204,0.2);
        }
        
        .grade-master-pro-app .btn-clear {
            background: linear-gradient(to right, #dc3545, #e74c3c);
        }
        
        .grade-master-pro-app .btn-clear:hover {
            background: linear-gradient(to right, #bd2130, #c82333);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(220,53,69,0.2);
        }
        
        .grade-master-pro-app .btn-customize {
            background: linear-gradient(to right, #28a745, #2ecc71);
            color: white;
            border: none;
            border-radius: 0;
            padding: 10px 20px;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .grade-master-pro-app .btn-customize:hover {
            background: linear-gradient(to right, #218838, #239d56);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(40,167,69,0.3);
        }
        
        .grade-master-pro-app .button-group {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        
        .grade-master-pro-app .button-group .btn {
            flex: 1;
        }
        
        .grade-master-pro-app .result-placeholder {
            text-align: center;
            color: #aaa;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .grade-master-pro-app .result-placeholder i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #d0d0d0;
        }
        
        .grade-master-pro-app .percentage-display {
            font-size: 3.5rem;
            font-weight: 700;
            margin: 15px 0;
            text-align: center;
            color: var(--primary);
        }
        
        .grade-master-pro-app .grade-display {
            font-size: 2.8rem;
            font-weight: 700;
            margin: 10px 0;
            text-align: center;
            padding: 10px 30px;
            border-radius: 12px;
        }
        
        .grade-master-pro-app .grade-A-star { background: linear-gradient(to right, #00cc00, #008000); color: white; }
        .grade-master-pro-app .grade-A { background: linear-gradient(to right, #00b09b, #96c93d); color: white; }
        .grade-master-pro-app .grade-B { background: linear-gradient(to right, #a8ff78, #78ffd6); color: #333; }
        .grade-master-pro-app .grade-C { background: linear-gradient(to right, #f7971e, #ffd200); color: white; }
        .grade-master-pro-app .grade-D { background: linear-gradient(to right, #ff5858, #f09819); color: white; }
        .grade-master-pro-app .grade-F { background: linear-gradient(to right, #ff416c, #ff4b2b); color: white; }
        
        .grade-master-pro-app .performance-message {
            font-size: 1.2rem;
            text-align: center;
            margin-top: 15px;
            padding: 15px 25px;
            border-radius: 10px;
            background: #f8f9ff;
            max-width: 600px;
            font-weight: 500;
        }
        
        .grade-master-pro-app .grading-scale {
            grid-column: 1 / -1;
            background: #f0f4ff;
            border-radius: 15px;
            padding: 25px;
            border: 1px solid #e0e0e0;
            margin-top: 10px;
        }
        
        .grade-master-pro-app .grading-scale-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .grade-master-pro-app .grading-scale h3 {
            color: var(--primary);
            font-weight: 700;
            margin: 0;
        }
        
        /* Make grading table horizontally scrollable on small screens */
        .grade-master-pro-app .scale-table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        /* Table container for horizontal scroll */
        .grade-master-pro-app .grading-scale {
            overflow-x: auto;
        }
        
        .grade-master-pro-app .scale-table th {
            background: #4776E6;
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: 600;
            white-space: nowrap;
        }
        
        .grade-master-pro-app .scale-table td {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #e0e0e0;
            white-space: nowrap;
        }
        
        .grade-master-pro-app .scale-table tr:nth-child(even) {
            background: rgba(71, 118, 230, 0.05);
        }
        
        .grade-master-pro-app .scale-table tr:hover {
            background-color: rgba(0, 102, 204, 0.1);
        }
        
        .grade-master-pro-app .grade-A-star-row td:first-child { color: #008000; font-weight: 700; }
        .grade-master-pro-app .grade-A-row td:first-child { color: #00b09b; font-weight: 600; }
        .grade-master-pro-app .grade-B-row td:first-child { color: #a8c93d; font-weight: 600; }
        .grade-master-pro-app .grade-C-row td:first-child { color: #f7971e; font-weight: 600; }
        .grade-master-pro-app .grade-D-row td:first-child { color: #ff5858; font-weight: 600; }
        .grade-master-pro-app .grade-F-row td:first-child { color: #ff416c; font-weight: 600; }
        
        .grade-master-pro-app .stats-container {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Changed from 3 to 2 columns */
            gap: 20px;
            margin-top: 10px;
        }
        
        @media (max-width: 768px) {
            .grade-master-pro-app .stats-container {
                grid-template-columns: 1fr;
            }
        }
        
        .grade-master-pro-app .stat-item {
            background: white;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border: 2px solid #e9ecef;
            transition: transform 0.3s ease;
        }
        
        .grade-master-pro-app .stat-item:hover {
            transform: translateY(-5px);
        }
        
        .grade-master-pro-app .stat-value {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.8rem;
            margin-bottom: 5px;
        }
        
        .grade-master-pro-app .stat-label {
            font-size: 0.9rem;
            color: var(--gray);
            font-weight: 500;
        }
        
        .grade-master-pro-app .watermark {
            position: absolute;
            bottom: 15px;
            right: 20px;
            color: rgba(0,0,0,0.1);
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .grade-master-pro-app .modal-content {
            border-radius: 18px;
            overflow: hidden;
            border: none;
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }
        
        .grade-master-pro-app .modal-header {
            background: linear-gradient(to right, #f0f8ff, #e6f2ff);
            border-bottom: 1px solid #e0e0e0;
            padding: 20px;
        }
        
        .grade-master-pro-app .modal-title {
            color: var(--primary);
            font-weight: 700;
        }
        
        .grade-master-pro-app .modal-body {
            padding: 25px;
        }
        
        .grade-master-pro-app .grade-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            align-items: center;
        }
        
        /* FIXED: Modal form controls with spinners */
        .grade-master-pro-app .grade-row input {
            flex: 1;
            padding: 12px 15px !important;
            border-radius: 10px !important;
            border: 1px solid #d1d1d1 !important;
            font-size: 1rem !important;
            -moz-appearance: textfield !important;
        }
        
        .grade-master-pro-app .grade-row input::-webkit-outer-spin-button,
        .grade-master-pro-app .grade-row input::-webkit-inner-spin-button {
            -webkit-appearance: auto !important;
            margin: 0;
            opacity: 1;
            height: 25px;
        }
        
        .grade-master-pro-app .grade-row input[type="number"] {
            -moz-appearance: textfield !important;
        }
        
        .grade-master-pro-app .grade-row input[type="number"]:hover,
        .grade-master-pro-app .grade-row input[type="number"]:focus {
            -moz-appearance: number-input !important;
        }
        
        .grade-master-pro-app .btn-add {
            background: linear-gradient(to right, #0066cc, #0088ff);
            color: white;
            border: none;
            border-radius: 0;
            padding: 10px 20px;
            font-weight: 600;
            margin-top: 10px;
            width: 100%;
        }
        
        .grade-master-pro-app .btn-add:hover {
            background: linear-gradient(to right, #0052a3, #0066cc);
            transform: translateY(-2px);
        }
        
        .grade-master-pro-app .btn-remove {
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .grade-master-pro-app .btn-remove:hover {
            background: #bd2130;
        }
        
        .grade-master-pro-app .modal-footer {
            border-top: 1px solid #e9ecef;
            padding: 20px;
        }
        
        .grade-master-pro-app .modal-footer .btn-secondary {
            background: linear-gradient(to right, #6c757d, #868e96);
            color: white;
            border: none;
            border-radius: 0;
            padding: 10px 20px;
            font-weight: 600;
        }
        
        .grade-master-pro-app .modal-footer .btn-primary {
            background: linear-gradient(to right, #28a745, #2ecc71);
            color: white;
            border: none;
            border-radius: 0;
            padding: 10px 20px;
            font-weight: 600;
        }
        
        /* Zoom Animation for header and container */
        @keyframes zoomIn {
            0% {
                opacity: 0;
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* Zoom Animation for results */
        @keyframes resultZoomIn {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            70% {
                opacity: 1;
                transform: scale(1.05);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        .grade-master-pro-app .result-zoom {
            animation: resultZoomIn 0.6s ease-out;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .grade-master-pro-app .calculator-container,
            .grade-master-pro-app .calculator-card,
            .grade-master-pro-app .result-card {
                padding: 20px;
            }
            
            .grade-master-pro-app .app-header h1 {
                font-size: 2rem;
            }
            
            .grade-master-pro-app .percentage-display {
                font-size: 2.8rem;
            }
            
            .grade-master-pro-app .grade-display {
                font-size: 2.2rem;
            }
            
            .grade-master-pro-app .grade-row {
                flex-direction: column;
            }
            
            .grade-master-pro-app .button-group {
                flex-direction: column;
            }
        }
        
        @media (max-width: 576px) {
            .grade-master-pro-app .calculator-container {
                padding: 15px;
            }
            
            .grade-master-pro-app .app-header h1 {
                font-size: 1.8rem;
            }
            
            .grade-master-pro-app .percentage-display {
                font-size: 2.2rem;
            }
            
            .grade-master-pro-app .grade-display {
                font-size: 1.8rem;
            }
            
            /* Additional mobile tweaks */
            .grade-master-pro-app .main-content {
                padding: 15px;
                gap: 20px;
            }
            
            .grade-master-pro-app .grading-scale {
                padding: 15px;
            }
            
            .grade-master-pro-app .grading-scale-header {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }
            
            .grade-master-pro-app .btn-customize {
                width: 100%;
            }
            
            .grade-master-pro-app .stat-item {
                padding: 15px;
            }
            
            .grade-master-pro-app .stat-value {
                font-size: 1.5rem;
            }
            
            /* Adjust watermark for small screens */
            .grade-master-pro-app .watermark {
                bottom: 5px;
                right: 10px;
                font-size: 0.7rem;
                opacity: 0.5;
            }
        }
        
        /* Extra small devices */
        @media (max-width: 400px) {
            .grade-master-pro-app .app-header h1 {
                font-size: 1.5rem;
            }
            
            .grade-master-pro-app .app-header p {
                font-size: 1rem;
            }
            
            .grade-master-pro-app .percentage-display {
                font-size: 1.8rem;
            }
            
            .grade-master-pro-app .grade-display {
                font-size: 1.5rem;
                padding: 8px 15px;
            }
            
            .grade-master-pro-app .performance-message {
                font-size: 1rem;
                padding: 10px;
            }
            
            .grade-master-pro-app .modal-body {
                padding: 15px;
            }
            
            .grade-master-pro-app .grade-row input {
                font-size: 0.9rem !important;
                padding: 10px !important;
            }
        }/* End custom CSS */