/* ===================================
   HumanAIQ Platform - Design System
   =================================== */

:root {
  /* Color Palette - Academic & Formal */
  --primary-navy: #0a2540;
  --secondary-navy: #1e3a5f;
  --accent-gold: #d4af37;
  --accent-gold-light: #f4d03f;
  --bg-gradient-start: #0f2847;
  --bg-gradient-end: #1a4d7a;
  --bg-white: #ffffff;
  --bg-light-gray: #f8f9fa;
  --text-light: #ffffff;
  --text-muted: #b8c9db;
  --text-dark: #0a2540;
  --text-gray: #1e3a5f;
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: #0a2540;
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --success-green: #4ade80;
  --error-red: #f87171;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(244, 185, 66, 0.3);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ===================================
   Global Styles & Reset
   =================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  direction: rtl;
}

body {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  background: var(--bg-white);
  color: var(--primary-navy);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===================================
   Typography
   =================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--primary-navy);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--primary-navy);
  font-weight: 700;
}

h3 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--primary-navy);
  font-weight: 700;
}

p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--secondary-navy);
  margin-bottom: var(--spacing-sm);
}

/* ===================================
   Container & Layout
   =================================== */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
}

section {
  padding: var(--spacing-2xl) 0;
  position: relative;
}

/* ===================================
   Header & Hero Section
   =================================== */

.header {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-bottom: 3px solid var(--accent-gold);
  box-shadow: 0 4px 20px rgba(10, 37, 64, 0.08);
}

/* Language Switcher */
.language-switcher {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-lg);
  z-index: 100;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: white;
  border: 2px solid var(--primary-navy);
  border-radius: var(--radius-md);
  color: var(--primary-navy);
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(10, 37, 64, 0.1);
}

.lang-btn:hover {
  background: var(--primary-navy);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.2);
}

#langIcon {
  font-size: 1.2rem;
}

.header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

.logo-container {
  margin-bottom: var(--spacing-lg);
  animation: fadeInDown 0.8s ease;
}

.logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(212, 175, 55, 0.3));
  transition: transform var(--transition-normal);
  border: 4px solid var(--accent-gold);
  border-radius: 50%;
  padding: 15px;
  background: white;
}

.logo:hover {
  transform: scale(1.05) rotate(2deg);
}

.hero-title {
  margin-bottom: var(--spacing-md);
  animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-subtitle {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--accent-gold);
  margin-bottom: var(--spacing-xl);
  animation: fadeInUp 0.8s ease 0.4s both;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

.hero-subtitle::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.hero-description {
  max-width: 800px;
  margin: 0 auto var(--spacing-lg);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.8;
  animation: fadeInUp 0.8s ease 0.6s both;
}

/* ===================================
   Diploma Cards Section
   =================================== */

/* Level Options for Arabic */
.level-options {
  display: none;
  /* Hidden by default */
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: #f8fafc;
  border-radius: var(--radius-md);
  border: 1px solid #e2e8f0;
  animation: slideDown 0.3s ease;
}

.level-options.show {
  display: block;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.level-option {
  position: relative;
}

.level-option input[type="radio"] {
  display: none;
}

.level-option label {
  display: block;
  padding: var(--spacing-sm);
  text-align: center;
  background: white;
  border: 2px solid var(--primary-navy);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 600;
  color: var(--primary-navy);
}

.level-option input[type="radio"]:checked+label {
  background: var(--primary-navy);
  color: white !important;
  border-color: var(--primary-navy);
  box-shadow: 0 4px 10px rgba(10, 37, 64, 0.2);
}

.level-option label:hover {
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.diplomas-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  padding: var(--spacing-2xl) 0;
  position: relative;
}

.diplomas-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  position: relative;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--primary-navy);
  font-weight: 900;
  width: 100%;
}

.section-title::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--accent-gold);
  border-radius: 2px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.diplomas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  padding: 0 var(--spacing-md);
}

.diploma-card {
  background: white;
  border: 2px solid var(--primary-navy);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: all var(--transition-normal);
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 20px rgba(10, 37, 64, 0.1);
}

.diploma-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-normal);
  z-index: 0;
  pointer-events: none;
}

.diploma-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: 0;
  pointer-events: none;
}

.diploma-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 12px 40px rgba(10, 37, 64, 0.15);
  border-color: var(--accent-gold);
}

.diploma-card:hover::after {
  transform: scaleX(1);
}

.diploma-card:hover::before {
  opacity: 1;
}

.diploma-icon {
  font-size: 3.5rem;
  margin-bottom: var(--spacing-md);
  display: block;
  transition: transform var(--transition-normal);
  filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.2));
}

.diploma-card:hover .diploma-icon {
  transform: scale(1.1) rotate(5deg);
}

.diploma-title {
  font-size: 1.35rem;
  color: var(--primary-navy);
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.diploma-description {
  font-size: 0.95rem;
  color: var(--secondary-navy);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

/* Card Action Buttons */
.card-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.btn-details,
.btn-register {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Add icons before text */
.btn-details::before {
  content: '📖 ';
  margin-left: 5px;
}

.btn-register::before {
  content: '✍️ ';
  margin-left: 5px;
}

.btn-details {
  background: white;
  border: 2px solid var(--primary-navy);
  color: var(--primary-navy);
}

.btn-details:hover {
  background: var(--primary-navy);
  color: white;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 16px rgba(10, 37, 64, 0.25);
}

.btn-details:active {
  transform: translateY(-1px) scale(1.01);
}

.btn-register {
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-light) 100%);
  color: var(--primary-navy);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
  border: 2px solid transparent;
}

.btn-register:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, var(--accent-gold-light) 0%, var(--accent-gold) 100%);
  border-color: var(--accent-gold);
}

.btn-register:active {
  transform: translateY(-1px) scale(1.01);
}

/* Ripple effect on click */
.btn-details::after,
.btn-register::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-details:active::after,
.btn-register:active::after {
  width: 200px;
  height: 200px;
}

/* WhatsApp Button */
.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-sm);
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: white !important;
  border: 2px solid #25D366;
  border-radius: var(--radius-sm);
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.btn-whatsapp:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
  color: white !important;
  text-decoration: none !important;
}

.btn-whatsapp:active {
  transform: translateY(-1px) scale(1.01);
}

.btn-whatsapp:visited {
  color: white !important;
}

.whatsapp-icon {
  font-size: 1.2rem;
  pointer-events: none;
}

.btn-whatsapp span {
  pointer-events: none;
}

/* ===================================
   Program Details Section
   =================================== */

.program-details-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: var(--spacing-2xl) 0;
  position: relative;
}

.program-details-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.details-container {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border: 3px solid var(--primary-navy);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: 0 8px 32px rgba(10, 37, 64, 0.12);
}

.details-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--primary-navy);
  margin-bottom: var(--spacing-md);
  text-align: center;
  font-weight: 700;
}

.details-description {
  font-size: 1.125rem;
  color: var(--secondary-navy);
  line-height: 1.8;
  margin-bottom: var(--spacing-xl);
  text-align: justify;
  padding: var(--spacing-md);
  background: rgba(212, 175, 55, 0.05);
  border-radius: var(--radius-md);
  border-right: 4px solid var(--accent-gold);
}

/* Program Information Grid */
.program-info {
  margin-bottom: var(--spacing-xl);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.info-item {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: white;
  border: 2px solid var(--primary-navy);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.info-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(10, 37, 64, 0.15);
  border-color: var(--accent-gold);
}

.info-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
}

.info-content strong {
  display: block;
  color: var(--primary-navy);
  font-size: 1.05rem;
  margin-bottom: var(--spacing-xs);
}

.info-content p {
  color: var(--secondary-navy);
  margin: 0;
  line-height: 1.6;
}

.info-content ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-xs) 0 0 0;
}

.info-content ul li {
  color: var(--secondary-navy);
  padding: var(--spacing-xs) 0;
  padding-right: var(--spacing-md);
  position: relative;
}

.info-content ul li::before {
  content: '✓';
  position: absolute;
  right: 0;
  color: var(--accent-gold);
  font-weight: bold;
}

/* Program Modules */
.details-modules {
  margin-bottom: var(--spacing-xl);
}

.modules-title {
  font-size: 1.5rem;
  color: var(--primary-navy);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 3px solid var(--accent-gold);
}

.modules-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--spacing-sm);
}

.modules-list li {
  padding: var(--spacing-md);
  background: linear-gradient(135deg, rgba(10, 37, 64, 0.03) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-right: 4px solid var(--accent-gold);
  border-radius: var(--radius-sm);
  color: var(--secondary-navy);
  font-size: 1.05rem;
  transition: all var(--transition-fast);
  position: relative;
  padding-right: var(--spacing-xl);
}

.modules-list li::before {
  content: '📌';
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
}

.modules-list li:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.15) 100%);
  transform: translateX(-8px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.details-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-xl);
}

.btn-close-details,
.btn-enroll-now {
  padding: var(--spacing-md) var(--spacing-xl);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Cairo', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

/* Add icons */
.btn-close-details::before {
  content: '✖️ ';
  margin-left: 8px;
}

.btn-enroll-now::before {
  content: '📝 ';
  margin-left: 8px;
}

.btn-close-details {
  background: white;
  border: 2px solid var(--primary-navy);
  color: var(--primary-navy);
}

.btn-close-details:hover {
  background: var(--primary-navy);
  color: white;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(10, 37, 64, 0.25);
}

.btn-enroll-now {
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-light) 100%);
  color: var(--primary-navy);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
  border: 2px solid transparent;
}

.btn-enroll-now:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, var(--accent-gold-light) 0%, var(--accent-gold) 100%);
  border-color: var(--accent-gold);
}

/* ===================================
   Registration Form Section
   =================================== */

.registration-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: var(--spacing-2xl) 0;
  position: relative;
}

.registration-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.form-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border: 3px solid var(--primary-navy);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: 0 8px 32px rgba(10, 37, 64, 0.12);
  position: relative;
}

.form-container::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 6px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
  border-radius: 0 0 4px 4px;
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  color: var(--primary-navy);
  font-size: 1rem;
}

.form-label .required {
  color: var(--accent-gold);
  margin-right: 4px;
}

.form-input,
.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-white);
  border: 2px solid var(--primary-navy);
  border-radius: var(--radius-md);
  color: var(--primary-navy);
  font-size: 1rem;
  font-family: 'Cairo', sans-serif;
  transition: all var(--transition-fast);
  direction: rtl;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent-gold);
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-input::placeholder {
  color: var(--secondary-navy);
  opacity: 0.6;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f4b942' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  padding-left: 3rem;
}

.form-select option {
  background: var(--bg-white);
  color: var(--primary-navy);
  padding: var(--spacing-sm);
}

/* Phone Input Group */
.phone-group {
  display: flex;
  gap: var(--spacing-sm);
  direction: ltr;
}

.country-code {
  flex: 0 0 140px;
}

.phone-number {
  flex: 1;
  direction: ltr;
  text-align: left;
}

/* Arabic Level Options */
.level-options {
  display: none;
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(244, 185, 66, 0.05);
  border: 1px solid rgba(244, 185, 66, 0.2);
  border-radius: var(--radius-md);
  animation: slideDown 0.3s ease;
}

.level-options.show {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.level-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.level-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

.level-option label {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--primary-navy);
}

/* Submit Button */
.submit-btn {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-light) 100%);
  border: none;
  border-radius: var(--radius-md);
  color: var(--primary-navy);
  font-size: 1.125rem;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.submit-btn:hover::before {
  width: 300px;
  height: 300px;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.submit-btn:active {
  transform: translateY(0);
}

/* ===================================
   Footer
   =================================== */

.footer {
  text-align: center;
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
  border-top: 4px solid var(--accent-gold);
  color: white;
}

.footer-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

.footer-highlight {
  color: var(--accent-gold);
  font-weight: 700;
  letter-spacing: 1px;
}

/* ===================================
   Animations
   =================================== */

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 768px) {
  :root {
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
  }

  .logo {
    width: 140px;
    height: 140px;
  }

  .diplomas-grid {
    grid-template-columns: 1fr;
  }

  .form-container {
    padding: var(--spacing-lg);
  }

  .phone-group {
    flex-direction: column;
  }

  .country-code {
    flex: 1;
  }

  .level-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-sm);
  }

  .diploma-card {
    padding: var(--spacing-md);
  }

  .level-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   Utility Classes
   =================================== */

.text-center {
  text-align: center;
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.hidden {
  display: none !important;
}

.fade-in {
  animation: fadeInUp 0.6s ease;
}

/* ===================================
   STUDENT PORTAL STYLES
   =================================== */

/* Header Actions Container */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

.header-actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

/* Student Portal Button */
.student-portal-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-light) 100%);
  color: var(--primary-navy);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.student-portal-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, var(--accent-gold-light) 0%, var(--accent-gold) 100%);
  border-color: var(--accent-gold);
}

.portal-icon {
  font-size: 1.5rem;
}

.portal-text {
  white-space: nowrap;
}

/* Portal Modal */
.portal-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.portal-modal.hidden {
  display: none;
}

.portal-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
}

.portal-modal-content {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xxl);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideInUp 0.3s ease;
  border: 3px solid var(--accent-gold);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close Button */
.portal-close-btn {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--secondary-navy);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.portal-close-btn:hover {
  background: rgba(10, 37, 64, 0.1);
  transform: rotate(90deg);
}

/* Portal Header */
.portal-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.portal-icon-large {
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
}

.portal-title {
  font-size: 1.75rem;
  color: var(--primary-navy);
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.portal-subtitle {
  font-size: 1rem;
  color: var(--secondary-navy);
  margin: 0;
}

/* Portal Form */
.portal-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.portal-label {
  display: block;
  font-size: 1rem;
  color: var(--primary-navy);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.portal-input {
  width: 100%;
  padding: var(--spacing-md);
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-sm);
  font-family: 'Cairo', sans-serif;
  font-size: 1rem;
  transition: all var(--transition-fast);
  background: white;
}

.portal-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.portal-input::placeholder {
  color: #999;
}

/* Submit Button */
.portal-submit-btn {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Cairo', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.3);
}

.portal-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10, 37, 64, 0.4);
  background: linear-gradient(135deg, var(--secondary-navy) 0%, var(--primary-navy) 100%);
}

.portal-submit-btn:active {
  transform: translateY(0);
}

.portal-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Portal Footer */
.portal-footer {
  text-align: center;
  margin-top: var(--spacing-md);
}

.forgot-password-link,
.back-to-login-link {
  color: var(--accent-gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}

.forgot-password-link:hover,
.back-to-login-link:hover {
  color: var(--primary-navy);
  text-decoration: underline;
}

/* Portal Views */
.portal-view {
  animation: fadeIn 0.3s ease;
}

.portal-view.hidden {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .student-portal-btn {
    width: 100%;
    justify-content: center;
  }

  .portal-modal-content {
    padding: var(--spacing-lg);
    width: 95%;
  }

  .portal-title {
    font-size: 1.5rem;
  }

  .portal-icon-large {
    font-size: 3rem;
  }
}

/* ===================================
   LECTURE SYSTEM STYLES
   =================================== */

/* Lecture Button */
.btn-lecture {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: 2px solid #059669;
  border-radius: var(--radius-sm);
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-lecture:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-lecture:active {
  transform: translateY(-1px) scale(1.01);
}

/* Lecture Modal */
.lecture-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.lecture-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 37, 64, 0.8);
  backdrop-filter: blur(8px);
}

.lecture-modal-content {
  position: relative;
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 3px solid var(--accent-gold);
  animation: slideUp 0.4s ease;
}

.lecture-close-btn {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  width: 40px;
  height: 40px;
  border: none;
  background: var(--primary-navy);
  color: white;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.lecture-close-btn:hover {
  background: var(--accent-gold);
  color: var(--primary-navy);
  transform: rotate(90deg) scale(1.1);
}

/* Lecture Header */
.lecture-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.lecture-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
  animation: bounce 1s ease infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.lecture-header h2 {
  color: var(--primary-navy);
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.lecture-header p {
  color: var(--secondary-navy);
  font-size: 1.1rem;
}

.lecture-header .program-name {
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 1.3rem;
  margin-top: var(--spacing-sm);
}

/* Level Selection Grid */
.level-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.level-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2px solid var(--primary-navy);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
}

.level-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(10, 37, 64, 0.15);
  border-color: var(--accent-gold);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.level-badge {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary-navy);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-light) 100%);
  border-radius: var(--radius-md);
  display: inline-block;
  min-width: 80px;
}

.level-schedule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: rgba(10, 37, 64, 0.05);
  border-radius: var(--radius-sm);
}

.schedule-icon {
  font-size: 1.5rem;
}

.schedule-text {
  text-align: right;
}

.schedule-text strong {
  display: block;
  color: var(--primary-navy);
  font-size: 1rem;
  margin-bottom: 2px;
}

.schedule-text span {
  color: var(--secondary-navy);
  font-size: 0.9rem;
}

.level-join-btn {
  width: 100%;
  padding: var(--spacing-sm);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.level-join-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: scale(1.05);
}

/* Schedule Info */
.schedule-info {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 2px solid var(--accent-gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(10, 37, 64, 0.1);
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-label {
  font-weight: 600;
  color: var(--primary-navy);
  font-size: 1.05rem;
}

.schedule-value {
  color: var(--secondary-navy);
  font-weight: 700;
  font-size: 1.1rem;
}

/* Access Code Form */
.access-code-form {
  margin-bottom: var(--spacing-lg);
}

.access-label {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-navy);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.access-input {
  width: 100%;
  padding: var(--spacing-md);
  border: 3px solid var(--primary-navy);
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  font-family: 'Courier New', monospace;
  text-align: center;
  font-weight: 700;
  color: var(--primary-navy);
  background: white;
  transition: all var(--transition-fast);
  letter-spacing: 2px;
}

.access-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
  transform: scale(1.02);
}

.access-input.error {
  border-color: #ef4444;
  animation: shake 0.5s ease;
  background: #fee2e2;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-10px);
  }

  75% {
    transform: translateX(10px);
  }
}

.access-submit-btn {
  width: 100%;
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-family: 'Cairo', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.access-submit-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
}

.access-submit-btn:active {
  transform: translateY(-1px);
}

/* Lecture Note */
.lecture-note {
  background: rgba(10, 37, 64, 0.05);
  border-right: 4px solid var(--primary-navy);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  color: var(--secondary-navy);
  font-size: 0.95rem;
  line-height: 1.6;
}

.lecture-note strong {
  color: var(--primary-navy);
}

/* Success Message */
.lecture-success-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  animation: fadeIn 0.3s ease;
}

.success-content {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: 0 20px 60px rgba(16, 185, 129, 0.4);
  border: 3px solid white;
  min-width: 400px;
}

.success-icon {
  font-size: 5rem;
  margin-bottom: var(--spacing-md);
  animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.success-content h3 {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  color: white;
}

.success-content p {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-xs);
  color: white;
}

.success-content .program-name {
  font-weight: 700;
  font-size: 1.3rem;
  margin-top: var(--spacing-sm);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design for Lecture System */
@media (max-width: 768px) {
  .lecture-modal-content {
    width: 95%;
    padding: var(--spacing-lg);
  }

  .level-selection-grid {
    grid-template-columns: 1fr;
  }

  .success-content {
    min-width: 300px;
    padding: var(--spacing-lg);
  }

  .success-icon {
    font-size: 3.5rem;
  }

  .access-input {
    font-size: 1.2rem;
  }
}/ *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       H u m a n A I Q   P l a t f o r m   -   D e s i g n   S y s t e m  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 : r o o t   {  
     / *   C o l o r   P a l e t t e   -   A c a d e m i c   &   F o r m a l   * /  
     - - p r i m a r y - n a v y :   # 0 a 2 5 4 0 ;  
     - - s e c o n d a r y - n a v y :   # 1 e 3 a 5 f ;  
     - - a c c e n t - g o l d :   # d 4 a f 3 7 ;  
     - - a c c e n t - g o l d - l i g h t :   # f 4 d 0 3 f ;  
     - - b g - g r a d i e n t - s t a r t :   # 0 f 2 8 4 7 ;  
     - - b g - g r a d i e n t - e n d :   # 1 a 4 d 7 a ;  
     - - b g - w h i t e :   # f f f f f f ;  
     - - b g - l i g h t - g r a y :   # f 8 f 9 f a ;  
     - - t e x t - l i g h t :   # f f f f f f ;  
     - - t e x t - m u t e d :   # b 8 c 9 d b ;  
     - - t e x t - d a r k :   # 0 a 2 5 4 0 ;  
     - - t e x t - g r a y :   # 1 e 3 a 5 f ;  
     - - c a r d - b g :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 0 5 ) ;  
     - - c a r d - b o r d e r :   # 0 a 2 5 4 0 ;  
     - - g l a s s - b g :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 0 8 ) ;  
     - - g l a s s - b o r d e r :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 1 5 ) ;  
     - - s u c c e s s - g r e e n :   # 4 a d e 8 0 ;  
     - - e r r o r - r e d :   # f 8 7 1 7 1 ;  
  
     / *   S p a c i n g   * /  
     - - s p a c i n g - x s :   0 . 5 r e m ;  
     - - s p a c i n g - s m :   1 r e m ;  
     - - s p a c i n g - m d :   1 . 5 r e m ;  
     - - s p a c i n g - l g :   2 r e m ;  
     - - s p a c i n g - x l :   3 r e m ;  
     - - s p a c i n g - 2 x l :   4 r e m ;  
  
     / *   B o r d e r   R a d i u s   * /  
     - - r a d i u s - s m :   8 p x ;  
     - - r a d i u s - m d :   1 2 p x ;  
     - - r a d i u s - l g :   1 6 p x ;  
     - - r a d i u s - x l :   2 4 p x ;  
  
     / *   S h a d o w s   * /  
     - - s h a d o w - s m :   0   2 p x   8 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 1 ) ;  
     - - s h a d o w - m d :   0   4 p x   1 6 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 1 5 ) ;  
     - - s h a d o w - l g :   0   8 p x   3 2 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 2 ) ;  
     - - s h a d o w - g l o w :   0   0   2 0 p x   r g b a ( 2 4 4 ,   1 8 5 ,   6 6 ,   0 . 3 ) ;  
  
     / *   T r a n s i t i o n s   * /  
     - - t r a n s i t i o n - f a s t :   0 . 2 s   e a s e ;  
     - - t r a n s i t i o n - n o r m a l :   0 . 3 s   e a s e ;  
     - - t r a n s i t i o n - s l o w :   0 . 5 s   e a s e ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       G l o b a l   S t y l e s   &   R e s e t  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 *   {  
     m a r g i n :   0 ;  
     p a d d i n g :   0 ;  
     b o x - s i z i n g :   b o r d e r - b o x ;  
 }  
  
 h t m l   {  
     s c r o l l - b e h a v i o r :   s m o o t h ;  
     d i r e c t i o n :   r t l ;  
 }  
  
 b o d y   {  
     f o n t - f a m i l y :   ' C a i r o ' ,   ' T a j a w a l ' ,   s a n s - s e r i f ;  
     b a c k g r o u n d :   v a r ( - - b g - w h i t e ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     l i n e - h e i g h t :   1 . 6 ;  
     o v e r f l o w - x :   h i d d e n ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       T y p o g r a p h y  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 h 1 ,  
 h 2 ,  
 h 3 ,  
 h 4 ,  
 h 5 ,  
 h 6   {  
     f o n t - w e i g h t :   7 0 0 ;  
     l i n e - h e i g h t :   1 . 2 ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
 }  
  
 h 1   {  
     f o n t - s i z e :   c l a m p ( 2 . 5 r e m ,   5 v w ,   4 r e m ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - w e i g h t :   9 0 0 ;  
     l e t t e r - s p a c i n g :   2 p x ;  
     t e x t - t r a n s f o r m :   u p p e r c a s e ;  
 }  
  
 h 2   {  
     f o n t - s i z e :   c l a m p ( 1 . 7 5 r e m ,   4 v w ,   2 . 5 r e m ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - w e i g h t :   7 0 0 ;  
 }  
  
 h 3   {  
     f o n t - s i z e :   c l a m p ( 1 . 1 2 5 r e m ,   2 . 5 v w ,   1 . 5 r e m ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - w e i g h t :   7 0 0 ;  
 }  
  
 p   {  
     f o n t - s i z e :   c l a m p ( 1 r e m ,   2 v w ,   1 . 1 2 5 r e m ) ;  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       C o n t a i n e r   &   L a y o u t  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 . c o n t a i n e r   {  
     m a x - w i d t h :   1 4 0 0 p x ;  
     m a r g i n :   0   a u t o ;  
     p a d d i n g :   0   5 % ;  
 }  
  
 s e c t i o n   {  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l )   0 ;  
     p o s i t i o n :   r e l a t i v e ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       H e a d e r   &   H e r o   S e c t i o n  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 . h e a d e r   {  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l )   0 ;  
     t e x t - a l i g n :   c e n t e r ;  
     p o s i t i o n :   r e l a t i v e ;  
     o v e r f l o w :   h i d d e n ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f f f f f f   0 % ,   # f 8 f 9 f a   1 0 0 % ) ;  
     b o r d e r - b o t t o m :   3 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
     b o x - s h a d o w :   0   4 p x   2 0 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 0 8 ) ;  
 }  
  
 / *   L a n g u a g e   S w i t c h e r   * /  
 . l a n g u a g e - s w i t c h e r   {  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   v a r ( - - s p a c i n g - m d ) ;  
     l e f t :   v a r ( - - s p a c i n g - l g ) ;  
     z - i n d e x :   1 0 0 ;  
 }  
  
 . l a n g - b t n   {  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     g a p :   v a r ( - - s p a c i n g - x s ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m )   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   0 . 9 5 r e m ;  
     f o n t - w e i g h t :   6 0 0 ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     b o x - s h a d o w :   0   2 p x   8 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 ) ;  
 }  
  
 . l a n g - b t n : h o v e r   {  
     b a c k g r o u n d :   v a r ( - - p r i m a r y - n a v y ) ;  
     c o l o r :   w h i t e ;  
     t r a n s f o r m :   t r a n s l a t e Y ( - 2 p x ) ;  
     b o x - s h a d o w :   0   4 p x   1 2 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 2 ) ;  
 }  
  
 # l a n g I c o n   {  
     f o n t - s i z e :   1 . 2 r e m ;  
 }  
  
 . h e a d e r : : b e f o r e   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   - 5 0 % ;  
     r i g h t :   - 1 0 % ;  
     w i d t h :   5 0 0 p x ;  
     h e i g h t :   5 0 0 p x ;  
     b a c k g r o u n d :   r a d i a l - g r a d i e n t ( c i r c l e ,   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 0 5 )   0 % ,   t r a n s p a r e n t   7 0 % ) ;  
     b o r d e r - r a d i u s :   5 0 % ;  
     a n i m a t i o n :   f l o a t   6 s   e a s e - i n - o u t   i n f i n i t e ;  
 }  
  
 @ k e y f r a m e s   f l o a t   {  
  
     0 % ,  
     1 0 0 %   {  
         t r a n s f o r m :   t r a n s l a t e Y ( 0 p x ) ;  
     }  
  
     5 0 %   {  
         t r a n s f o r m :   t r a n s l a t e Y ( - 2 0 p x ) ;  
     }  
 }  
  
 . l o g o - c o n t a i n e r   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - l g ) ;  
     a n i m a t i o n :   f a d e I n D o w n   0 . 8 s   e a s e ;  
 }  
  
 . l o g o   {  
     w i d t h :   2 0 0 p x ;  
     h e i g h t :   2 0 0 p x ;  
     o b j e c t - f i t :   c o n t a i n ;  
     f i l t e r :   d r o p - s h a d o w ( 0   8 p x   2 4 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 3 ) ) ;  
     t r a n s i t i o n :   t r a n s f o r m   v a r ( - - t r a n s i t i o n - n o r m a l ) ;  
     b o r d e r :   4 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
     b o r d e r - r a d i u s :   5 0 % ;  
     p a d d i n g :   1 5 p x ;  
     b a c k g r o u n d :   w h i t e ;  
 }  
  
 . l o g o : h o v e r   {  
     t r a n s f o r m :   s c a l e ( 1 . 0 5 )   r o t a t e ( 2 d e g ) ;  
 }  
  
 . h e r o - t i t l e   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     a n i m a t i o n :   f a d e I n U p   0 . 8 s   e a s e   0 . 2 s   b o t h ;  
 }  
  
 . h e r o - s u b t i t l e   {  
     f o n t - s i z e :   c l a m p ( 1 . 2 5 r e m ,   2 . 5 v w ,   1 . 7 5 r e m ) ;  
     c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
     a n i m a t i o n :   f a d e I n U p   0 . 8 s   e a s e   0 . 4 s   b o t h ;  
     f o n t - w e i g h t :   7 0 0 ;  
     l e t t e r - s p a c i n g :   1 p x ;  
     p o s i t i o n :   r e l a t i v e ;  
     d i s p l a y :   i n l i n e - b l o c k ;  
 }  
  
 . h e r o - s u b t i t l e : : a f t e r   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     b o t t o m :   - 1 0 p x ;  
     l e f t :   5 0 % ;  
     t r a n s f o r m :   t r a n s l a t e X ( - 5 0 % ) ;  
     w i d t h :   6 0 % ;  
     h e i g h t :   3 p x ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   t r a n s p a r e n t ,   v a r ( - - a c c e n t - g o l d ) ,   t r a n s p a r e n t ) ;  
 }  
  
 . h e r o - d e s c r i p t i o n   {  
     m a x - w i d t h :   8 0 0 p x ;  
     m a r g i n :   0   a u t o   v a r ( - - s p a c i n g - l g ) ;  
     f o n t - s i z e :   c l a m p ( 1 r e m ,   2 v w ,   1 . 1 2 5 r e m ) ;  
     l i n e - h e i g h t :   1 . 8 ;  
     a n i m a t i o n :   f a d e I n U p   0 . 8 s   e a s e   0 . 6 s   b o t h ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       D i p l o m a   C a r d s   S e c t i o n  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 / *   L e v e l   O p t i o n s   f o r   A r a b i c   * /  
 . l e v e l - o p t i o n s   {  
     d i s p l a y :   n o n e ;  
     / *   H i d d e n   b y   d e f a u l t   * /  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - m d ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   # f 8 f a f c ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     b o r d e r :   1 p x   s o l i d   # e 2 e 8 f 0 ;  
     a n i m a t i o n :   s l i d e D o w n   0 . 3 s   e a s e ;  
 }  
  
 . l e v e l - o p t i o n s . s h o w   {  
     d i s p l a y :   b l o c k ;  
 }  
  
 . l e v e l - g r i d   {  
     d i s p l a y :   g r i d ;  
     g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( 3 ,   1 f r ) ;  
     g a p :   v a r ( - - s p a c i n g - s m ) ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 . l e v e l - o p t i o n   {  
     p o s i t i o n :   r e l a t i v e ;  
 }  
  
 . l e v e l - o p t i o n   i n p u t [ t y p e = " r a d i o " ]   {  
     d i s p l a y :   n o n e ;  
 }  
  
 . l e v e l - o p t i o n   l a b e l   {  
     d i s p l a y :   b l o c k ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m ) ;  
     t e x t - a l i g n :   c e n t e r ;  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     f o n t - w e i g h t :   6 0 0 ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
 }  
  
 . l e v e l - o p t i o n   i n p u t [ t y p e = " r a d i o " ] : c h e c k e d + l a b e l   {  
     b a c k g r o u n d :   v a r ( - - p r i m a r y - n a v y ) ;  
     c o l o r :   w h i t e   ! i m p o r t a n t ;  
     b o r d e r - c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     b o x - s h a d o w :   0   4 p x   1 0 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 2 ) ;  
 }  
  
 . l e v e l - o p t i o n   l a b e l : h o v e r   {  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     t r a n s f o r m :   t r a n s l a t e Y ( - 2 p x ) ;  
 }  
  
 @ k e y f r a m e s   s l i d e D o w n   {  
     f r o m   {  
         o p a c i t y :   0 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( - 1 0 p x ) ;  
     }  
  
     t o   {  
         o p a c i t y :   1 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
     }  
 }  
  
 . d i p l o m a s - s e c t i o n   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 8 0 d e g ,   # f f f f f f   0 % ,   # f 8 f 9 f a   1 0 0 % ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l )   0 ;  
     p o s i t i o n :   r e l a t i v e ;  
 }  
  
 . d i p l o m a s - s e c t i o n : : b e f o r e   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   0 ;  
     l e f t :   0 ;  
     r i g h t :   0 ;  
     h e i g h t :   4 p x ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   t r a n s p a r e n t ,   v a r ( - - a c c e n t - g o l d ) ,   t r a n s p a r e n t ) ;  
 }  
  
 . s e c t i o n - t i t l e   {  
     t e x t - a l i g n :   c e n t e r ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - 2 x l ) ;  
     p o s i t i o n :   r e l a t i v e ;  
     f o n t - s i z e :   c l a m p ( 2 r e m ,   4 v w ,   2 . 7 5 r e m ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - w e i g h t :   9 0 0 ;  
     w i d t h :   1 0 0 % ;  
 }  
  
 . s e c t i o n - t i t l e : : b e f o r e   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   - 1 5 p x ;  
     l e f t :   5 0 % ;  
     t r a n s f o r m :   t r a n s l a t e X ( - 5 0 % ) ;  
     w i d t h :   8 0 p x ;  
     h e i g h t :   4 p x ;  
     b a c k g r o u n d :   v a r ( - - a c c e n t - g o l d ) ;  
     b o r d e r - r a d i u s :   2 p x ;  
 }  
  
 . s e c t i o n - t i t l e : : a f t e r   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     b o t t o m :   - 1 0 p x ;  
     r i g h t :   0 ;  
     w i d t h :   1 0 0 % ;  
     h e i g h t :   3 p x ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   t r a n s p a r e n t ,   v a r ( - - a c c e n t - g o l d ) ,   t r a n s p a r e n t ) ;  
 }  
  
 . d i p l o m a s - g r i d   {  
     d i s p l a y :   g r i d ;  
     g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( a u t o - f i t ,   m i n m a x ( 3 2 0 p x ,   1 f r ) ) ;  
     g a p :   v a r ( - - s p a c i n g - x l ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
     p a d d i n g :   0   v a r ( - - s p a c i n g - m d ) ;  
 }  
  
 . d i p l o m a - c a r d   {  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - l g ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - x l ) ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - n o r m a l ) ;  
     p o s i t i o n :   r e l a t i v e ;  
     o v e r f l o w :   v i s i b l e ;  
     b o x - s h a d o w :   0   4 p x   2 0 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 ) ;  
 }  
  
 . d i p l o m a - c a r d : : a f t e r   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   0 ;  
     r i g h t :   0 ;  
     w i d t h :   1 0 0 % ;  
     h e i g h t :   4 p x ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   v a r ( - - a c c e n t - g o l d ) ,   v a r ( - - a c c e n t - g o l d - l i g h t ) ) ;  
     t r a n s f o r m :   s c a l e X ( 0 ) ;  
     t r a n s f o r m - o r i g i n :   r i g h t ;  
     t r a n s i t i o n :   t r a n s f o r m   v a r ( - - t r a n s i t i o n - n o r m a l ) ;  
     z - i n d e x :   0 ;  
     p o i n t e r - e v e n t s :   n o n e ;  
 }  
  
 . d i p l o m a - c a r d : : b e f o r e   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   0 ;  
     r i g h t :   0 ;  
     w i d t h :   1 0 0 % ;  
     h e i g h t :   1 0 0 % ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 0 5 )   0 % ,   t r a n s p a r e n t   5 0 % ) ;  
     o p a c i t y :   0 ;  
     t r a n s i t i o n :   o p a c i t y   v a r ( - - t r a n s i t i o n - n o r m a l ) ;  
     z - i n d e x :   0 ;  
     p o i n t e r - e v e n t s :   n o n e ;  
 }  
  
 . d i p l o m a - c a r d : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 1 2 p x ) ;  
     b o x - s h a d o w :   0   1 2 p x   4 0 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 5 ) ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
 }  
  
 . d i p l o m a - c a r d : h o v e r : : a f t e r   {  
     t r a n s f o r m :   s c a l e X ( 1 ) ;  
 }  
  
 . d i p l o m a - c a r d : h o v e r : : b e f o r e   {  
     o p a c i t y :   1 ;  
 }  
  
 . d i p l o m a - i c o n   {  
     f o n t - s i z e :   3 . 5 r e m ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     d i s p l a y :   b l o c k ;  
     t r a n s i t i o n :   t r a n s f o r m   v a r ( - - t r a n s i t i o n - n o r m a l ) ;  
     f i l t e r :   d r o p - s h a d o w ( 0   4 p x   8 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 2 ) ) ;  
 }  
  
 . d i p l o m a - c a r d : h o v e r   . d i p l o m a - i c o n   {  
     t r a n s f o r m :   s c a l e ( 1 . 1 )   r o t a t e ( 5 d e g ) ;  
 }  
  
 . d i p l o m a - t i t l e   {  
     f o n t - s i z e :   1 . 3 5 r e m ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - s m ) ;  
     f o n t - w e i g h t :   7 0 0 ;  
     l e t t e r - s p a c i n g :   0 . 5 p x ;  
 }  
  
 . d i p l o m a - d e s c r i p t i o n   {  
     f o n t - s i z e :   0 . 9 5 r e m ;  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     l i n e - h e i g h t :   1 . 6 ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
 }  
  
 / *   C a r d   A c t i o n   B u t t o n s   * /  
 . c a r d - a c t i o n s   {  
     d i s p l a y :   f l e x ;  
     g a p :   v a r ( - - s p a c i n g - s m ) ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - m d ) ;  
 }  
  
 . b t n - d e t a i l s ,  
 . b t n - r e g i s t e r   {  
     f l e x :   1 ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m )   v a r ( - - s p a c i n g - m d ) ;  
     b o r d e r :   n o n e ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   0 . 9 5 r e m ;  
     f o n t - w e i g h t :   6 0 0 ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     t e x t - a l i g n :   c e n t e r ;  
     p o s i t i o n :   r e l a t i v e ;  
     o v e r f l o w :   h i d d e n ;  
 }  
  
 / *   A d d   i c o n s   b e f o r e   t e x t   * /  
 . b t n - d e t a i l s : : b e f o r e   {  
     c o n t e n t :   '  x    ' ;  
     m a r g i n - l e f t :   5 p x ;  
 }  
  
 . b t n - r e g i s t e r : : b e f o r e   {  
     c o n t e n t :   '  S      ' ;  
     m a r g i n - l e f t :   5 p x ;  
 }  
  
 . b t n - d e t a i l s   {  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
 }  
  
 . b t n - d e t a i l s : h o v e r   {  
     b a c k g r o u n d :   v a r ( - - p r i m a r y - n a v y ) ;  
     c o l o r :   w h i t e ;  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x )   s c a l e ( 1 . 0 2 ) ;  
     b o x - s h a d o w :   0   6 p x   1 6 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 2 5 ) ;  
 }  
  
 . b t n - d e t a i l s : a c t i v e   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 1 p x )   s c a l e ( 1 . 0 1 ) ;  
 }  
  
 . b t n - r e g i s t e r   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - a c c e n t - g o l d )   0 % ,   v a r ( - - a c c e n t - g o l d - l i g h t )   1 0 0 % ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     b o x - s h a d o w :   0   2 p x   8 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 3 ) ;  
     b o r d e r :   2 p x   s o l i d   t r a n s p a r e n t ;  
 }  
  
 . b t n - r e g i s t e r : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x )   s c a l e ( 1 . 0 2 ) ;  
     b o x - s h a d o w :   0   6 p x   2 0 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 5 ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - a c c e n t - g o l d - l i g h t )   0 % ,   v a r ( - - a c c e n t - g o l d )   1 0 0 % ) ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
 }  
  
 . b t n - r e g i s t e r : a c t i v e   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 1 p x )   s c a l e ( 1 . 0 1 ) ;  
 }  
  
 / *   R i p p l e   e f f e c t   o n   c l i c k   * /  
 . b t n - d e t a i l s : : a f t e r ,  
 . b t n - r e g i s t e r : : a f t e r   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   5 0 % ;  
     l e f t :   5 0 % ;  
     w i d t h :   0 ;  
     h e i g h t :   0 ;  
     b o r d e r - r a d i u s :   5 0 % ;  
     b a c k g r o u n d :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 5 ) ;  
     t r a n s f o r m :   t r a n s l a t e ( - 5 0 % ,   - 5 0 % ) ;  
     t r a n s i t i o n :   w i d t h   0 . 6 s ,   h e i g h t   0 . 6 s ;  
 }  
  
 . b t n - d e t a i l s : a c t i v e : : a f t e r ,  
 . b t n - r e g i s t e r : a c t i v e : : a f t e r   {  
     w i d t h :   2 0 0 p x ;  
     h e i g h t :   2 0 0 p x ;  
 }  
  
 / *   W h a t s A p p   B u t t o n   * /  
 . b t n - w h a t s a p p   {  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     j u s t i f y - c o n t e n t :   c e n t e r ;  
     g a p :   v a r ( - - s p a c i n g - x s ) ;  
     w i d t h :   1 0 0 % ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m )   v a r ( - - s p a c i n g - m d ) ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - s m ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 2 5 D 3 6 6   0 % ,   # 1 2 8 C 7 E   1 0 0 % ) ;  
     c o l o r :   w h i t e   ! i m p o r t a n t ;  
     b o r d e r :   2 p x   s o l i d   # 2 5 D 3 6 6 ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   0 . 9 5 r e m ;  
     f o n t - w e i g h t :   6 0 0 ;  
     t e x t - d e c o r a t i o n :   n o n e   ! i m p o r t a n t ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     b o x - s h a d o w :   0   2 p x   8 p x   r g b a ( 3 7 ,   2 1 1 ,   1 0 2 ,   0 . 3 ) ;  
     p o s i t i o n :   r e l a t i v e ;  
     z - i n d e x :   1 0 ;  
     p o i n t e r - e v e n t s :   a u t o ;  
 }  
  
 . b t n - w h a t s a p p : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x )   s c a l e ( 1 . 0 2 ) ;  
     b o x - s h a d o w :   0   6 p x   2 0 p x   r g b a ( 3 7 ,   2 1 1 ,   1 0 2 ,   0 . 5 ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 1 2 8 C 7 E   0 % ,   # 0 7 5 E 5 4   1 0 0 % ) ;  
     c o l o r :   w h i t e   ! i m p o r t a n t ;  
     t e x t - d e c o r a t i o n :   n o n e   ! i m p o r t a n t ;  
 }  
  
 . b t n - w h a t s a p p : a c t i v e   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 1 p x )   s c a l e ( 1 . 0 1 ) ;  
 }  
  
 . b t n - w h a t s a p p : v i s i t e d   {  
     c o l o r :   w h i t e   ! i m p o r t a n t ;  
 }  
  
 . w h a t s a p p - i c o n   {  
     f o n t - s i z e :   1 . 2 r e m ;  
     p o i n t e r - e v e n t s :   n o n e ;  
 }  
  
 . b t n - w h a t s a p p   s p a n   {  
     p o i n t e r - e v e n t s :   n o n e ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       P r o g r a m   D e t a i l s   S e c t i o n  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 . p r o g r a m - d e t a i l s - s e c t i o n   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f 8 f 9 f a   0 % ,   # f f f f f f   1 0 0 % ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l )   0 ;  
     p o s i t i o n :   r e l a t i v e ;  
 }  
  
 . p r o g r a m - d e t a i l s - s e c t i o n : : b e f o r e   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   0 ;  
     l e f t :   0 ;  
     r i g h t :   0 ;  
     h e i g h t :   4 p x ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   t r a n s p a r e n t ,   v a r ( - - a c c e n t - g o l d ) ,   t r a n s p a r e n t ) ;  
 }  
  
 . d e t a i l s - c o n t a i n e r   {  
     m a x - w i d t h :   9 0 0 p x ;  
     m a r g i n :   0   a u t o ;  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r :   3 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - x l ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l ) ;  
     b o x - s h a d o w :   0   8 p x   3 2 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 2 ) ;  
 }  
  
 . d e t a i l s - t i t l e   {  
     f o n t - s i z e :   c l a m p ( 1 . 7 5 r e m ,   3 v w ,   2 . 2 5 r e m ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     t e x t - a l i g n :   c e n t e r ;  
     f o n t - w e i g h t :   7 0 0 ;  
 }  
  
 . d e t a i l s - d e s c r i p t i o n   {  
     f o n t - s i z e :   1 . 1 2 5 r e m ;  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     l i n e - h e i g h t :   1 . 8 ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
     t e x t - a l i g n :   j u s t i f y ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 0 5 ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     b o r d e r - r i g h t :   4 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
 }  
  
 / *   P r o g r a m   I n f o r m a t i o n   G r i d   * /  
 . p r o g r a m - i n f o   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . i n f o - g r i d   {  
     d i s p l a y :   g r i d ;  
     g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( a u t o - f i t ,   m i n m a x ( 3 0 0 p x ,   1 f r ) ) ;  
     g a p :   v a r ( - - s p a c i n g - m d ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - l g ) ;  
 }  
  
 . i n f o - i t e m   {  
     d i s p l a y :   f l e x ;  
     g a p :   v a r ( - - s p a c i n g - s m ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
 }  
  
 . i n f o - i t e m : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x ) ;  
     b o x - s h a d o w :   0   6 p x   1 6 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 5 ) ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
 }  
  
 . i n f o - i c o n   {  
     f o n t - s i z e :   2 r e m ;  
     f l e x - s h r i n k :   0 ;  
 }  
  
 . i n f o - c o n t e n t   {  
     f l e x :   1 ;  
 }  
  
 . i n f o - c o n t e n t   s t r o n g   {  
     d i s p l a y :   b l o c k ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - s i z e :   1 . 0 5 r e m ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x s ) ;  
 }  
  
 . i n f o - c o n t e n t   p   {  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     m a r g i n :   0 ;  
     l i n e - h e i g h t :   1 . 6 ;  
 }  
  
 . i n f o - c o n t e n t   u l   {  
     l i s t - s t y l e :   n o n e ;  
     p a d d i n g :   0 ;  
     m a r g i n :   v a r ( - - s p a c i n g - x s )   0   0   0 ;  
 }  
  
 . i n f o - c o n t e n t   u l   l i   {  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - x s )   0 ;  
     p a d d i n g - r i g h t :   v a r ( - - s p a c i n g - m d ) ;  
     p o s i t i o n :   r e l a t i v e ;  
 }  
  
 . i n f o - c o n t e n t   u l   l i : : b e f o r e   {  
     c o n t e n t :   '  S ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     r i g h t :   0 ;  
     c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     f o n t - w e i g h t :   b o l d ;  
 }  
  
 / *   P r o g r a m   M o d u l e s   * /  
 . d e t a i l s - m o d u l e s   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . m o d u l e s - t i t l e   {  
     f o n t - s i z e :   1 . 5 r e m ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     p a d d i n g - b o t t o m :   v a r ( - - s p a c i n g - s m ) ;  
     b o r d e r - b o t t o m :   3 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
 }  
  
 . m o d u l e s - l i s t   {  
     l i s t - s t y l e :   n o n e ;  
     p a d d i n g :   0 ;  
     d i s p l a y :   g r i d ;  
     g a p :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 . m o d u l e s - l i s t   l i   {  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 0 3 )   0 % ,   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 0 5 )   1 0 0 % ) ;  
     b o r d e r - r i g h t :   4 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     f o n t - s i z e :   1 . 0 5 r e m ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     p o s i t i o n :   r e l a t i v e ;  
     p a d d i n g - r i g h t :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . m o d u l e s - l i s t   l i : : b e f o r e   {  
     c o n t e n t :   '  x R' ;  
     p o s i t i o n :   a b s o l u t e ;  
     r i g h t :   v a r ( - - s p a c i n g - m d ) ;  
     t o p :   5 0 % ;  
     t r a n s f o r m :   t r a n s l a t e Y ( - 5 0 % ) ;  
 }  
  
 . m o d u l e s - l i s t   l i : h o v e r   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 1 )   0 % ,   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 1 5 )   1 0 0 % ) ;  
     t r a n s f o r m :   t r a n s l a t e X ( - 8 p x ) ;  
     b o x - s h a d o w :   0   4 p x   1 2 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 2 ) ;  
 }  
  
 . d e t a i l s - a c t i o n s   {  
     d i s p l a y :   f l e x ;  
     g a p :   v a r ( - - s p a c i n g - m d ) ;  
     j u s t i f y - c o n t e n t :   c e n t e r ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . b t n - c l o s e - d e t a i l s ,  
 . b t n - e n r o l l - n o w   {  
     p a d d i n g :   v a r ( - - s p a c i n g - m d )   v a r ( - - s p a c i n g - x l ) ;  
     b o r d e r :   n o n e ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   1 . 1 2 5 r e m ;  
     f o n t - w e i g h t :   7 0 0 ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     p o s i t i o n :   r e l a t i v e ;  
 }  
  
 / *   A d d   i c o n s   * /  
 . b t n - c l o s e - d e t a i l s : : b e f o r e   {  
     c o n t e n t :   '  S      ' ;  
     m a r g i n - l e f t :   8 p x ;  
 }  
  
 . b t n - e n r o l l - n o w : : b e f o r e   {  
     c o n t e n t :   '  x    ' ;  
     m a r g i n - l e f t :   8 p x ;  
 }  
  
 . b t n - c l o s e - d e t a i l s   {  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
 }  
  
 . b t n - c l o s e - d e t a i l s : h o v e r   {  
     b a c k g r o u n d :   v a r ( - - p r i m a r y - n a v y ) ;  
     c o l o r :   w h i t e ;  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x )   s c a l e ( 1 . 0 5 ) ;  
     b o x - s h a d o w :   0   6 p x   1 6 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 2 5 ) ;  
 }  
  
 . b t n - e n r o l l - n o w   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - a c c e n t - g o l d )   0 % ,   v a r ( - - a c c e n t - g o l d - l i g h t )   1 0 0 % ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     b o x - s h a d o w :   0   4 p x   1 6 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 3 ) ;  
     b o r d e r :   2 p x   s o l i d   t r a n s p a r e n t ;  
 }  
  
 . b t n - e n r o l l - n o w : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x )   s c a l e ( 1 . 0 5 ) ;  
     b o x - s h a d o w :   0   8 p x   2 4 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 5 ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - a c c e n t - g o l d - l i g h t )   0 % ,   v a r ( - - a c c e n t - g o l d )   1 0 0 % ) ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       R e g i s t r a t i o n   F o r m   S e c t i o n  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 . r e g i s t r a t i o n - s e c t i o n   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f 8 f 9 f a   0 % ,   # f f f f f f   1 0 0 % ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l )   0 ;  
     p o s i t i o n :   r e l a t i v e ;  
 }  
  
 . r e g i s t r a t i o n - s e c t i o n : : b e f o r e   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   0 ;  
     l e f t :   0 ;  
     r i g h t :   0 ;  
     h e i g h t :   4 p x ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   t r a n s p a r e n t ,   v a r ( - - a c c e n t - g o l d ) ,   t r a n s p a r e n t ) ;  
 }  
  
 . f o r m - c o n t a i n e r   {  
     m a x - w i d t h :   8 0 0 p x ;  
     m a r g i n :   0   a u t o ;  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r :   3 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - x l ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l ) ;  
     b o x - s h a d o w :   0   8 p x   3 2 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 2 ) ;  
     p o s i t i o n :   r e l a t i v e ;  
 }  
  
 . f o r m - c o n t a i n e r : : b e f o r e   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   - 3 p x ;  
     l e f t :   5 0 % ;  
     t r a n s f o r m :   t r a n s l a t e X ( - 5 0 % ) ;  
     w i d t h :   2 0 0 p x ;  
     h e i g h t :   6 p x ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 9 0 d e g ,   v a r ( - - a c c e n t - g o l d ) ,   v a r ( - - a c c e n t - g o l d - l i g h t ) ) ;  
     b o r d e r - r a d i u s :   0   0   4 p x   4 p x ;  
 }  
  
 . f o r m - g r o u p   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - l g ) ;  
 }  
  
 . f o r m - l a b e l   {  
     d i s p l a y :   b l o c k ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x s ) ;  
     f o n t - w e i g h t :   6 0 0 ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - s i z e :   1 r e m ;  
 }  
  
 . f o r m - l a b e l   . r e q u i r e d   {  
     c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     m a r g i n - r i g h t :   4 p x ;  
 }  
  
 . f o r m - i n p u t ,  
 . f o r m - s e l e c t   {  
     w i d t h :   1 0 0 % ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m )   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   v a r ( - - b g - w h i t e ) ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - s i z e :   1 r e m ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     d i r e c t i o n :   r t l ;  
 }  
  
 . f o r m - i n p u t : f o c u s ,  
 . f o r m - s e l e c t : f o c u s   {  
     o u t l i n e :   n o n e ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     b a c k g r o u n d :   v a r ( - - b g - w h i t e ) ;  
     b o x - s h a d o w :   0   0   0   3 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 1 ) ;  
 }  
  
 . f o r m - i n p u t : : p l a c e h o l d e r   {  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     o p a c i t y :   0 . 6 ;  
 }  
  
 . f o r m - s e l e c t   {  
     c u r s o r :   p o i n t e r ;  
     a p p e a r a n c e :   n o n e ;  
     b a c k g r o u n d - i m a g e :   u r l ( " d a t a : i m a g e / s v g + x m l , % 3 C s v g   x m l n s = ' h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g '   w i d t h = ' 1 2 '   h e i g h t = ' 1 2 '   v i e w B o x = ' 0   0   1 2   1 2 ' % 3 E % 3 C p a t h   f i l l = ' % 2 3 f 4 b 9 4 2 '   d = ' M 6   9 L 1   4 h 1 0 z ' / % 3 E % 3 C / s v g % 3 E " ) ;  
     b a c k g r o u n d - r e p e a t :   n o - r e p e a t ;  
     b a c k g r o u n d - p o s i t i o n :   l e f t   1 r e m   c e n t e r ;  
     p a d d i n g - l e f t :   3 r e m ;  
 }  
  
 . f o r m - s e l e c t   o p t i o n   {  
     b a c k g r o u n d :   v a r ( - - b g - w h i t e ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 / *   P h o n e   I n p u t   G r o u p   * /  
 . p h o n e - g r o u p   {  
     d i s p l a y :   f l e x ;  
     g a p :   v a r ( - - s p a c i n g - s m ) ;  
     d i r e c t i o n :   l t r ;  
 }  
  
 . c o u n t r y - c o d e   {  
     f l e x :   0   0   1 4 0 p x ;  
 }  
  
 . p h o n e - n u m b e r   {  
     f l e x :   1 ;  
     d i r e c t i o n :   l t r ;  
     t e x t - a l i g n :   l e f t ;  
 }  
  
 / *   A r a b i c   L e v e l   O p t i o n s   * /  
 . l e v e l - o p t i o n s   {  
     d i s p l a y :   n o n e ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - m d ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   r g b a ( 2 4 4 ,   1 8 5 ,   6 6 ,   0 . 0 5 ) ;  
     b o r d e r :   1 p x   s o l i d   r g b a ( 2 4 4 ,   1 8 5 ,   6 6 ,   0 . 2 ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     a n i m a t i o n :   s l i d e D o w n   0 . 3 s   e a s e ;  
 }  
  
 . l e v e l - o p t i o n s . s h o w   {  
     d i s p l a y :   b l o c k ;  
 }  
  
 @ k e y f r a m e s   s l i d e D o w n   {  
     f r o m   {  
         o p a c i t y :   0 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( - 1 0 p x ) ;  
     }  
  
     t o   {  
         o p a c i t y :   1 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
     }  
 }  
  
 . l e v e l - g r i d   {  
     d i s p l a y :   g r i d ;  
     g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( a u t o - f i t ,   m i n m a x ( 1 0 0 p x ,   1 f r ) ) ;  
     g a p :   v a r ( - - s p a c i n g - s m ) ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 . l e v e l - o p t i o n   {  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     g a p :   v a r ( - - s p a c i n g - x s ) ;  
 }  
  
 . l e v e l - o p t i o n   i n p u t [ t y p e = " r a d i o " ]   {  
     w i d t h :   1 8 p x ;  
     h e i g h t :   1 8 p x ;  
     a c c e n t - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     c u r s o r :   p o i n t e r ;  
 }  
  
 . l e v e l - o p t i o n   l a b e l   {  
     c u r s o r :   p o i n t e r ;  
     f o n t - s i z e :   0 . 9 5 r e m ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
 }  
  
 / *   S u b m i t   B u t t o n   * /  
 . s u b m i t - b t n   {  
     w i d t h :   1 0 0 % ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d )   v a r ( - - s p a c i n g - l g ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - a c c e n t - g o l d )   0 % ,   v a r ( - - a c c e n t - g o l d - l i g h t )   1 0 0 % ) ;  
     b o r d e r :   n o n e ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - s i z e :   1 . 1 2 5 r e m ;  
     f o n t - w e i g h t :   7 0 0 ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - n o r m a l ) ;  
     b o x - s h a d o w :   v a r ( - - s h a d o w - m d ) ;  
     p o s i t i o n :   r e l a t i v e ;  
     o v e r f l o w :   h i d d e n ;  
 }  
  
 . s u b m i t - b t n : : b e f o r e   {  
     c o n t e n t :   ' ' ;  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   5 0 % ;  
     r i g h t :   5 0 % ;  
     w i d t h :   0 ;  
     h e i g h t :   0 ;  
     b o r d e r - r a d i u s :   5 0 % ;  
     b a c k g r o u n d :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 3 ) ;  
     t r a n s f o r m :   t r a n s l a t e ( 5 0 % ,   - 5 0 % ) ;  
     t r a n s i t i o n :   w i d t h   0 . 6 s ,   h e i g h t   0 . 6 s ;  
 }  
  
 . s u b m i t - b t n : h o v e r : : b e f o r e   {  
     w i d t h :   3 0 0 p x ;  
     h e i g h t :   3 0 0 p x ;  
 }  
  
 . s u b m i t - b t n : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 2 p x ) ;  
     b o x - s h a d o w :   v a r ( - - s h a d o w - l g ) ,   v a r ( - - s h a d o w - g l o w ) ;  
 }  
  
 . s u b m i t - b t n : a c t i v e   {  
     t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       F o o t e r  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 . f o o t e r   {  
     t e x t - a l i g n :   c e n t e r ;  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l )   0 ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - p r i m a r y - n a v y )   0 % ,   v a r ( - - s e c o n d a r y - n a v y )   1 0 0 % ) ;  
     b o r d e r - t o p :   4 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
     c o l o r :   w h i t e ;  
 }  
  
 . f o o t e r - t e x t   {  
     c o l o r :   r g b a ( 2 5 5 ,   2 5 5 ,   2 5 5 ,   0 . 9 ) ;  
     f o n t - s i z e :   1 r e m ;  
 }  
  
 . f o o t e r - h i g h l i g h t   {  
     c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     f o n t - w e i g h t :   7 0 0 ;  
     l e t t e r - s p a c i n g :   1 p x ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       A n i m a t i o n s  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 @ k e y f r a m e s   f a d e I n D o w n   {  
     f r o m   {  
         o p a c i t y :   0 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( - 3 0 p x ) ;  
     }  
  
     t o   {  
         o p a c i t y :   1 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
     }  
 }  
  
 @ k e y f r a m e s   f a d e I n U p   {  
     f r o m   {  
         o p a c i t y :   0 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 3 0 p x ) ;  
     }  
  
     t o   {  
         o p a c i t y :   1 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
     }  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       R e s p o n s i v e   D e s i g n  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 @ m e d i a   ( m a x - w i d t h :   7 6 8 p x )   {  
     : r o o t   {  
         - - s p a c i n g - x l :   2 r e m ;  
         - - s p a c i n g - 2 x l :   3 r e m ;  
     }  
  
     . l o g o   {  
         w i d t h :   1 4 0 p x ;  
         h e i g h t :   1 4 0 p x ;  
     }  
  
     . d i p l o m a s - g r i d   {  
         g r i d - t e m p l a t e - c o l u m n s :   1 f r ;  
     }  
  
     . f o r m - c o n t a i n e r   {  
         p a d d i n g :   v a r ( - - s p a c i n g - l g ) ;  
     }  
  
     . p h o n e - g r o u p   {  
         f l e x - d i r e c t i o n :   c o l u m n ;  
     }  
  
     . c o u n t r y - c o d e   {  
         f l e x :   1 ;  
     }  
  
     . l e v e l - g r i d   {  
         g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( 2 ,   1 f r ) ;  
     }  
 }  
  
 @ m e d i a   ( m a x - w i d t h :   4 8 0 p x )   {  
     . c o n t a i n e r   {  
         p a d d i n g :   0   v a r ( - - s p a c i n g - s m ) ;  
     }  
  
     . d i p l o m a - c a r d   {  
         p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     }  
  
     . l e v e l - g r i d   {  
         g r i d - t e m p l a t e - c o l u m n s :   1 f r ;  
     }  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       U t i l i t y   C l a s s e s  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 . t e x t - c e n t e r   {  
     t e x t - a l i g n :   c e n t e r ;  
 }  
  
 . m b - s m   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 . m b - m d   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
 }  
  
 . m b - l g   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - l g ) ;  
 }  
  
 . h i d d e n   {  
     d i s p l a y :   n o n e   ! i m p o r t a n t ;  
 }  
  
 . f a d e - i n   {  
     a n i m a t i o n :   f a d e I n U p   0 . 6 s   e a s e ;  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       S T U D E N T   P O R T A L   S T Y L E S  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 / *   H e a d e r   A c t i o n s   C o n t a i n e r   * /  
 . h e a d e r - c o n t e n t   {  
     d i s p l a y :   f l e x ;  
     j u s t i f y - c o n t e n t :   s p a c e - b e t w e e n ;  
     a l i g n - i t e m s :   c e n t e r ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . h e a d e r - a c t i o n s   {  
     d i s p l a y :   f l e x ;  
     g a p :   v a r ( - - s p a c i n g - m d ) ;  
     a l i g n - i t e m s :   c e n t e r ;  
 }  
  
 / *   S t u d e n t   P o r t a l   B u t t o n   * /  
 . s t u d e n t - p o r t a l - b t n   {  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     g a p :   v a r ( - - s p a c i n g - s m ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m )   v a r ( - - s p a c i n g - l g ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - a c c e n t - g o l d )   0 % ,   v a r ( - - a c c e n t - g o l d - l i g h t )   1 0 0 % ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r :   2 p x   s o l i d   t r a n s p a r e n t ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   1 r e m ;  
     f o n t - w e i g h t :   7 0 0 ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     b o x - s h a d o w :   0   4 p x   1 2 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 3 ) ;  
 }  
  
 . s t u d e n t - p o r t a l - b t n : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x )   s c a l e ( 1 . 0 2 ) ;  
     b o x - s h a d o w :   0   8 p x   2 0 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 5 ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - a c c e n t - g o l d - l i g h t )   0 % ,   v a r ( - - a c c e n t - g o l d )   1 0 0 % ) ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
 }  
  
 . p o r t a l - i c o n   {  
     f o n t - s i z e :   1 . 5 r e m ;  
 }  
  
 . p o r t a l - t e x t   {  
     w h i t e - s p a c e :   n o w r a p ;  
 }  
  
 / *   P o r t a l   M o d a l   * /  
 . p o r t a l - m o d a l   {  
     p o s i t i o n :   f i x e d ;  
     t o p :   0 ;  
     l e f t :   0 ;  
     w i d t h :   1 0 0 % ;  
     h e i g h t :   1 0 0 % ;  
     z - i n d e x :   1 0 0 0 0 ;  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     j u s t i f y - c o n t e n t :   c e n t e r ;  
     a n i m a t i o n :   f a d e I n   0 . 3 s   e a s e ;  
 }  
  
 . p o r t a l - m o d a l . h i d d e n   {  
     d i s p l a y :   n o n e ;  
 }  
  
 . p o r t a l - m o d a l - o v e r l a y   {  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   0 ;  
     l e f t :   0 ;  
     w i d t h :   1 0 0 % ;  
     h e i g h t :   1 0 0 % ;  
     b a c k g r o u n d :   r g b a ( 0 ,   0 ,   0 ,   0 . 7 ) ;  
     b a c k d r o p - f i l t e r :   b l u r ( 5 p x ) ;  
 }  
  
 . p o r t a l - m o d a l - c o n t e n t   {  
     p o s i t i o n :   r e l a t i v e ;  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - l g ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - x x l ) ;  
     m a x - w i d t h :   5 0 0 p x ;  
     w i d t h :   9 0 % ;  
     m a x - h e i g h t :   9 0 v h ;  
     o v e r f l o w - y :   a u t o ;  
     b o x - s h a d o w :   0   2 0 p x   6 0 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 3 ) ;  
     a n i m a t i o n :   s l i d e I n U p   0 . 3 s   e a s e ;  
     b o r d e r :   3 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
 }  
  
 @ k e y f r a m e s   s l i d e I n U p   {  
     f r o m   {  
         o p a c i t y :   0 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 5 0 p x ) ;  
     }  
  
     t o   {  
         o p a c i t y :   1 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
     }  
 }  
  
 / *   C l o s e   B u t t o n   * /  
 . p o r t a l - c l o s e - b t n   {  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   v a r ( - - s p a c i n g - m d ) ;  
     l e f t :   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   t r a n s p a r e n t ;  
     b o r d e r :   n o n e ;  
     f o n t - s i z e :   1 . 5 r e m ;  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     c u r s o r :   p o i n t e r ;  
     w i d t h :   4 0 p x ;  
     h e i g h t :   4 0 p x ;  
     b o r d e r - r a d i u s :   5 0 % ;  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     j u s t i f y - c o n t e n t :   c e n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
 }  
  
 . p o r t a l - c l o s e - b t n : h o v e r   {  
     b a c k g r o u n d :   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 ) ;  
     t r a n s f o r m :   r o t a t e ( 9 0 d e g ) ;  
 }  
  
 / *   P o r t a l   H e a d e r   * /  
 . p o r t a l - h e a d e r   {  
     t e x t - a l i g n :   c e n t e r ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . p o r t a l - i c o n - l a r g e   {  
     f o n t - s i z e :   4 r e m ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
 }  
  
 . p o r t a l - t i t l e   {  
     f o n t - s i z e :   1 . 7 5 r e m ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - s m ) ;  
     f o n t - w e i g h t :   7 0 0 ;  
 }  
  
 . p o r t a l - s u b t i t l e   {  
     f o n t - s i z e :   1 r e m ;  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     m a r g i n :   0 ;  
 }  
  
 / *   P o r t a l   F o r m   * /  
 . p o r t a l - f o r m   {  
     d i s p l a y :   f l e x ;  
     f l e x - d i r e c t i o n :   c o l u m n ;  
     g a p :   v a r ( - - s p a c i n g - l g ) ;  
 }  
  
 . p o r t a l - l a b e l   {  
     d i s p l a y :   b l o c k ;  
     f o n t - s i z e :   1 r e m ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - w e i g h t :   6 0 0 ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x s ) ;  
 }  
  
 . p o r t a l - i n p u t   {  
     w i d t h :   1 0 0 % ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     b o r d e r :   2 p x   s o l i d   # e 0 e 0 e 0 ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   1 r e m ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     b a c k g r o u n d :   w h i t e ;  
 }  
  
 . p o r t a l - i n p u t : f o c u s   {  
     o u t l i n e :   n o n e ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     b o x - s h a d o w :   0   0   0   3 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 1 ) ;  
 }  
  
 . p o r t a l - i n p u t : : p l a c e h o l d e r   {  
     c o l o r :   # 9 9 9 ;  
 }  
  
 / *   S u b m i t   B u t t o n   * /  
 . p o r t a l - s u b m i t - b t n   {  
     w i d t h :   1 0 0 % ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d )   v a r ( - - s p a c i n g - l g ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - p r i m a r y - n a v y )   0 % ,   v a r ( - - s e c o n d a r y - n a v y )   1 0 0 % ) ;  
     c o l o r :   w h i t e ;  
     b o r d e r :   n o n e ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   1 . 1 2 5 r e m ;  
     f o n t - w e i g h t :   7 0 0 ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     b o x - s h a d o w :   0   4 p x   1 2 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 3 ) ;  
 }  
  
 . p o r t a l - s u b m i t - b t n : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 2 p x ) ;  
     b o x - s h a d o w :   0   6 p x   2 0 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 4 ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - s e c o n d a r y - n a v y )   0 % ,   v a r ( - - p r i m a r y - n a v y )   1 0 0 % ) ;  
 }  
  
 . p o r t a l - s u b m i t - b t n : a c t i v e   {  
     t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
 }  
  
 . p o r t a l - s u b m i t - b t n : d i s a b l e d   {  
     o p a c i t y :   0 . 6 ;  
     c u r s o r :   n o t - a l l o w e d ;  
     t r a n s f o r m :   n o n e ;  
 }  
  
 / *   P o r t a l   F o o t e r   * /  
 . p o r t a l - f o o t e r   {  
     t e x t - a l i g n :   c e n t e r ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - m d ) ;  
 }  
  
 . f o r g o t - p a s s w o r d - l i n k ,  
 . b a c k - t o - l o g i n - l i n k   {  
     c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     t e x t - d e c o r a t i o n :   n o n e ;  
     f o n t - w e i g h t :   6 0 0 ;  
     f o n t - s i z e :   0 . 9 5 r e m ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
 }  
  
 . f o r g o t - p a s s w o r d - l i n k : h o v e r ,  
 . b a c k - t o - l o g i n - l i n k : h o v e r   {  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     t e x t - d e c o r a t i o n :   u n d e r l i n e ;  
 }  
  
 / *   P o r t a l   V i e w s   * /  
 . p o r t a l - v i e w   {  
     a n i m a t i o n :   f a d e I n   0 . 3 s   e a s e ;  
 }  
  
 . p o r t a l - v i e w . h i d d e n   {  
     d i s p l a y :   n o n e ;  
 }  
  
 / *   R e s p o n s i v e   D e s i g n   * /  
 @ m e d i a   ( m a x - w i d t h :   7 6 8 p x )   {  
     . h e a d e r - a c t i o n s   {  
         f l e x - d i r e c t i o n :   c o l u m n ;  
         g a p :   v a r ( - - s p a c i n g - s m ) ;  
     }  
  
     . s t u d e n t - p o r t a l - b t n   {  
         w i d t h :   1 0 0 % ;  
         j u s t i f y - c o n t e n t :   c e n t e r ;  
     }  
  
     . p o r t a l - m o d a l - c o n t e n t   {  
         p a d d i n g :   v a r ( - - s p a c i n g - l g ) ;  
         w i d t h :   9 5 % ;  
     }  
  
     . p o r t a l - t i t l e   {  
         f o n t - s i z e :   1 . 5 r e m ;  
     }  
  
     . p o r t a l - i c o n - l a r g e   {  
         f o n t - s i z e :   3 r e m ;  
     }  
 }  
  
 / *   = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  
       L E C T U R E   S Y S T E M   S T Y L E S  
       = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   * /  
  
 / *   L e c t u r e   B u t t o n   * /  
 . b t n - l e c t u r e   {  
     f l e x :   1 ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m )   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 1 0 b 9 8 1   0 % ,   # 0 5 9 6 6 9   1 0 0 % ) ;  
     c o l o r :   w h i t e ;  
     b o r d e r :   2 p x   s o l i d   # 0 5 9 6 6 9 ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   0 . 9 5 r e m ;  
     f o n t - w e i g h t :   6 0 0 ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     t e x t - a l i g n :   c e n t e r ;  
     p o s i t i o n :   r e l a t i v e ;  
     o v e r f l o w :   h i d d e n ;  
     b o x - s h a d o w :   0   2 p x   8 p x   r g b a ( 1 6 ,   1 8 5 ,   1 2 9 ,   0 . 3 ) ;  
 }  
  
 . b t n - l e c t u r e : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x )   s c a l e ( 1 . 0 2 ) ;  
     b o x - s h a d o w :   0   6 p x   2 0 p x   r g b a ( 1 6 ,   1 8 5 ,   1 2 9 ,   0 . 5 ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 0 5 9 6 6 9   0 % ,   # 0 4 7 8 5 7   1 0 0 % ) ;  
 }  
  
 . b t n - l e c t u r e : a c t i v e   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 1 p x )   s c a l e ( 1 . 0 1 ) ;  
 }  
  
 / *   L e c t u r e   M o d a l   * /  
 . l e c t u r e - m o d a l   {  
     p o s i t i o n :   f i x e d ;  
     t o p :   0 ;  
     l e f t :   0 ;  
     w i d t h :   1 0 0 % ;  
     h e i g h t :   1 0 0 % ;  
     z - i n d e x :   1 0 0 0 0 ;  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     j u s t i f y - c o n t e n t :   c e n t e r ;  
     a n i m a t i o n :   f a d e I n   0 . 3 s   e a s e ;  
 }  
  
 . l e c t u r e - m o d a l - o v e r l a y   {  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   0 ;  
     l e f t :   0 ;  
     w i d t h :   1 0 0 % ;  
     h e i g h t :   1 0 0 % ;  
     b a c k g r o u n d :   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 8 ) ;  
     b a c k d r o p - f i l t e r :   b l u r ( 8 p x ) ;  
 }  
  
 . l e c t u r e - m o d a l - c o n t e n t   {  
     p o s i t i o n :   r e l a t i v e ;  
     b a c k g r o u n d :   w h i t e ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - x l ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l ) ;  
     m a x - w i d t h :   7 0 0 p x ;  
     w i d t h :   9 0 % ;  
     m a x - h e i g h t :   9 0 v h ;  
     o v e r f l o w - y :   a u t o ;  
     b o x - s h a d o w :   0   2 0 p x   6 0 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 3 ) ;  
     b o r d e r :   3 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
     a n i m a t i o n :   s l i d e U p   0 . 4 s   e a s e ;  
 }  
  
 . l e c t u r e - c l o s e - b t n   {  
     p o s i t i o n :   a b s o l u t e ;  
     t o p :   v a r ( - - s p a c i n g - m d ) ;  
     l e f t :   v a r ( - - s p a c i n g - m d ) ;  
     w i d t h :   4 0 p x ;  
     h e i g h t :   4 0 p x ;  
     b o r d e r :   n o n e ;  
     b a c k g r o u n d :   v a r ( - - p r i m a r y - n a v y ) ;  
     c o l o r :   w h i t e ;  
     b o r d e r - r a d i u s :   5 0 % ;  
     f o n t - s i z e :   1 . 2 r e m ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     j u s t i f y - c o n t e n t :   c e n t e r ;  
     z - i n d e x :   1 0 ;  
 }  
  
 . l e c t u r e - c l o s e - b t n : h o v e r   {  
     b a c k g r o u n d :   v a r ( - - a c c e n t - g o l d ) ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     t r a n s f o r m :   r o t a t e ( 9 0 d e g )   s c a l e ( 1 . 1 ) ;  
 }  
  
 / *   L e c t u r e   H e a d e r   * /  
 . l e c t u r e - h e a d e r   {  
     t e x t - a l i g n :   c e n t e r ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . l e c t u r e - i c o n   {  
     f o n t - s i z e :   4 r e m ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     a n i m a t i o n :   b o u n c e   1 s   e a s e   i n f i n i t e ;  
 }  
  
 @ k e y f r a m e s   b o u n c e   {  
  
     0 % ,  
     1 0 0 %   {  
         t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
     }  
  
     5 0 %   {  
         t r a n s f o r m :   t r a n s l a t e Y ( - 1 0 p x ) ;  
     }  
 }  
  
 . l e c t u r e - h e a d e r   h 2   {  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - s i z e :   2 r e m ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 . l e c t u r e - h e a d e r   p   {  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     f o n t - s i z e :   1 . 1 r e m ;  
 }  
  
 . l e c t u r e - h e a d e r   . p r o g r a m - n a m e   {  
     c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     f o n t - w e i g h t :   7 0 0 ;  
     f o n t - s i z e :   1 . 3 r e m ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 / *   L e v e l   S e l e c t i o n   G r i d   * /  
 . l e v e l - s e l e c t i o n - g r i d   {  
     d i s p l a y :   g r i d ;  
     g r i d - t e m p l a t e - c o l u m n s :   r e p e a t ( a u t o - f i t ,   m i n m a x ( 2 0 0 p x ,   1 f r ) ) ;  
     g a p :   v a r ( - - s p a c i n g - m d ) ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . l e v e l - c a r d   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f 8 f 9 f a   0 % ,   # f f f f f f   1 0 0 % ) ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - l g ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - l g ) ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - n o r m a l ) ;  
     t e x t - a l i g n :   c e n t e r ;  
 }  
  
 . l e v e l - c a r d : h o v e r   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 8 p x ) ;  
     b o x - s h a d o w :   0   1 2 p x   3 2 p x   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 5 ) ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # f f f f f f   0 % ,   # f 8 f 9 f a   1 0 0 % ) ;  
 }  
  
 . l e v e l - b a d g e   {  
     f o n t - s i z e :   2 r e m ;  
     f o n t - w e i g h t :   9 0 0 ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   v a r ( - - a c c e n t - g o l d )   0 % ,   v a r ( - - a c c e n t - g o l d - l i g h t )   1 0 0 % ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ;  
     d i s p l a y :   i n l i n e - b l o c k ;  
     m i n - w i d t h :   8 0 p x ;  
 }  
  
 . l e v e l - s c h e d u l e   {  
     d i s p l a y :   f l e x ;  
     a l i g n - i t e m s :   c e n t e r ;  
     j u s t i f y - c o n t e n t :   c e n t e r ;  
     g a p :   v a r ( - - s p a c i n g - s m ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m ) ;  
     b a c k g r o u n d :   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 0 5 ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
 }  
  
 . s c h e d u l e - i c o n   {  
     f o n t - s i z e :   1 . 5 r e m ;  
 }  
  
 . s c h e d u l e - t e x t   {  
     t e x t - a l i g n :   r i g h t ;  
 }  
  
 . s c h e d u l e - t e x t   s t r o n g   {  
     d i s p l a y :   b l o c k ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - s i z e :   1 r e m ;  
     m a r g i n - b o t t o m :   2 p x ;  
 }  
  
 . s c h e d u l e - t e x t   s p a n   {  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     f o n t - s i z e :   0 . 9 r e m ;  
 }  
  
 . l e v e l - j o i n - b t n   {  
     w i d t h :   1 0 0 % ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 1 0 b 9 8 1   0 % ,   # 0 5 9 6 6 9   1 0 0 % ) ;  
     c o l o r :   w h i t e ;  
     b o r d e r :   n o n e ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - w e i g h t :   6 0 0 ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
 }  
  
 . l e v e l - j o i n - b t n : h o v e r   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 0 5 9 6 6 9   0 % ,   # 0 4 7 8 5 7   1 0 0 % ) ;  
     t r a n s f o r m :   s c a l e ( 1 . 0 5 ) ;  
 }  
  
 / *   S c h e d u l e   I n f o   * /  
 . s c h e d u l e - i n f o   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 1 )   0 % ,   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 0 5 )   1 0 0 % ) ;  
     b o r d e r :   2 p x   s o l i d   v a r ( - - a c c e n t - g o l d ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - l g ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - l g ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x l ) ;  
 }  
  
 . s c h e d u l e - i t e m   {  
     d i s p l a y :   f l e x ;  
     j u s t i f y - c o n t e n t :   s p a c e - b e t w e e n ;  
     a l i g n - i t e m s :   c e n t e r ;  
     p a d d i n g :   v a r ( - - s p a c i n g - s m )   0 ;  
     b o r d e r - b o t t o m :   1 p x   s o l i d   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 1 ) ;  
 }  
  
 . s c h e d u l e - i t e m : l a s t - c h i l d   {  
     b o r d e r - b o t t o m :   n o n e ;  
 }  
  
 . s c h e d u l e - l a b e l   {  
     f o n t - w e i g h t :   6 0 0 ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     f o n t - s i z e :   1 . 0 5 r e m ;  
 }  
  
 . s c h e d u l e - v a l u e   {  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     f o n t - w e i g h t :   7 0 0 ;  
     f o n t - s i z e :   1 . 1 r e m ;  
 }  
  
 / *   A c c e s s   C o d e   F o r m   * /  
 . a c c e s s - c o d e - f o r m   {  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - l g ) ;  
 }  
  
 . a c c e s s - l a b e l   {  
     d i s p l a y :   b l o c k ;  
     f o n t - s i z e :   1 . 2 r e m ;  
     f o n t - w e i g h t :   7 0 0 ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     t e x t - a l i g n :   c e n t e r ;  
 }  
  
 . a c c e s s - i n p u t   {  
     w i d t h :   1 0 0 % ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     b o r d e r :   3 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - l g ) ;  
     f o n t - s i z e :   1 . 5 r e m ;  
     f o n t - f a m i l y :   ' C o u r i e r   N e w ' ,   m o n o s p a c e ;  
     t e x t - a l i g n :   c e n t e r ;  
     f o n t - w e i g h t :   7 0 0 ;  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
     b a c k g r o u n d :   w h i t e ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     l e t t e r - s p a c i n g :   2 p x ;  
 }  
  
 . a c c e s s - i n p u t : f o c u s   {  
     o u t l i n e :   n o n e ;  
     b o r d e r - c o l o r :   v a r ( - - a c c e n t - g o l d ) ;  
     b o x - s h a d o w :   0   0   0   4 p x   r g b a ( 2 1 2 ,   1 7 5 ,   5 5 ,   0 . 2 ) ;  
     t r a n s f o r m :   s c a l e ( 1 . 0 2 ) ;  
 }  
  
 . a c c e s s - i n p u t . e r r o r   {  
     b o r d e r - c o l o r :   # e f 4 4 4 4 ;  
     a n i m a t i o n :   s h a k e   0 . 5 s   e a s e ;  
     b a c k g r o u n d :   # f e e 2 e 2 ;  
 }  
  
 @ k e y f r a m e s   s h a k e   {  
  
     0 % ,  
     1 0 0 %   {  
         t r a n s f o r m :   t r a n s l a t e X ( 0 ) ;  
     }  
  
     2 5 %   {  
         t r a n s f o r m :   t r a n s l a t e X ( - 1 0 p x ) ;  
     }  
  
     7 5 %   {  
         t r a n s f o r m :   t r a n s l a t e X ( 1 0 p x ) ;  
     }  
 }  
  
 . a c c e s s - s u b m i t - b t n   {  
     w i d t h :   1 0 0 % ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - m d ) ;  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 1 0 b 9 8 1   0 % ,   # 0 5 9 6 6 9   1 0 0 % ) ;  
     c o l o r :   w h i t e ;  
     b o r d e r :   n o n e ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - l g ) ;  
     f o n t - f a m i l y :   ' C a i r o ' ,   s a n s - s e r i f ;  
     f o n t - s i z e :   1 . 2 r e m ;  
     f o n t - w e i g h t :   7 0 0 ;  
     c u r s o r :   p o i n t e r ;  
     t r a n s i t i o n :   a l l   v a r ( - - t r a n s i t i o n - f a s t ) ;  
     b o x - s h a d o w :   0   4 p x   1 6 p x   r g b a ( 1 6 ,   1 8 5 ,   1 2 9 ,   0 . 3 ) ;  
 }  
  
 . a c c e s s - s u b m i t - b t n : h o v e r   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 0 5 9 6 6 9   0 % ,   # 0 4 7 8 5 7   1 0 0 % ) ;  
     t r a n s f o r m :   t r a n s l a t e Y ( - 3 p x ) ;  
     b o x - s h a d o w :   0   8 p x   2 4 p x   r g b a ( 1 6 ,   1 8 5 ,   1 2 9 ,   0 . 5 ) ;  
 }  
  
 . a c c e s s - s u b m i t - b t n : a c t i v e   {  
     t r a n s f o r m :   t r a n s l a t e Y ( - 1 p x ) ;  
 }  
  
 / *   L e c t u r e   N o t e   * /  
 . l e c t u r e - n o t e   {  
     b a c k g r o u n d :   r g b a ( 1 0 ,   3 7 ,   6 4 ,   0 . 0 5 ) ;  
     b o r d e r - r i g h t :   4 p x   s o l i d   v a r ( - - p r i m a r y - n a v y ) ;  
     p a d d i n g :   v a r ( - - s p a c i n g - m d ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - s m ) ;  
     c o l o r :   v a r ( - - s e c o n d a r y - n a v y ) ;  
     f o n t - s i z e :   0 . 9 5 r e m ;  
     l i n e - h e i g h t :   1 . 6 ;  
 }  
  
 . l e c t u r e - n o t e   s t r o n g   {  
     c o l o r :   v a r ( - - p r i m a r y - n a v y ) ;  
 }  
  
 / *   S u c c e s s   M e s s a g e   * /  
 . l e c t u r e - s u c c e s s - m e s s a g e   {  
     p o s i t i o n :   f i x e d ;  
     t o p :   5 0 % ;  
     l e f t :   5 0 % ;  
     t r a n s f o r m :   t r a n s l a t e ( - 5 0 % ,   - 5 0 % ) ;  
     z - i n d e x :   1 0 0 0 1 ;  
     a n i m a t i o n :   f a d e I n   0 . 3 s   e a s e ;  
 }  
  
 . s u c c e s s - c o n t e n t   {  
     b a c k g r o u n d :   l i n e a r - g r a d i e n t ( 1 3 5 d e g ,   # 1 0 b 9 8 1   0 % ,   # 0 5 9 6 6 9   1 0 0 % ) ;  
     c o l o r :   w h i t e ;  
     p a d d i n g :   v a r ( - - s p a c i n g - 2 x l ) ;  
     b o r d e r - r a d i u s :   v a r ( - - r a d i u s - x l ) ;  
     t e x t - a l i g n :   c e n t e r ;  
     b o x - s h a d o w :   0   2 0 p x   6 0 p x   r g b a ( 1 6 ,   1 8 5 ,   1 2 9 ,   0 . 4 ) ;  
     b o r d e r :   3 p x   s o l i d   w h i t e ;  
     m i n - w i d t h :   4 0 0 p x ;  
 }  
  
 . s u c c e s s - i c o n   {  
     f o n t - s i z e :   5 r e m ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - m d ) ;  
     a n i m a t i o n :   s c a l e I n   0 . 5 s   e a s e ;  
 }  
  
 @ k e y f r a m e s   s c a l e I n   {  
     0 %   {  
         t r a n s f o r m :   s c a l e ( 0 ) ;  
     }  
  
     5 0 %   {  
         t r a n s f o r m :   s c a l e ( 1 . 2 ) ;  
     }  
  
     1 0 0 %   {  
         t r a n s f o r m :   s c a l e ( 1 ) ;  
     }  
 }  
  
 . s u c c e s s - c o n t e n t   h 3   {  
     f o n t - s i z e :   2 r e m ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - s m ) ;  
     c o l o r :   w h i t e ;  
 }  
  
 . s u c c e s s - c o n t e n t   p   {  
     f o n t - s i z e :   1 . 2 r e m ;  
     m a r g i n - b o t t o m :   v a r ( - - s p a c i n g - x s ) ;  
     c o l o r :   w h i t e ;  
 }  
  
 . s u c c e s s - c o n t e n t   . p r o g r a m - n a m e   {  
     f o n t - w e i g h t :   7 0 0 ;  
     f o n t - s i z e :   1 . 3 r e m ;  
     m a r g i n - t o p :   v a r ( - - s p a c i n g - s m ) ;  
 }  
  
 / *   A n i m a t i o n s   * /  
 @ k e y f r a m e s   f a d e I n   {  
     f r o m   {  
         o p a c i t y :   0 ;  
     }  
  
     t o   {  
         o p a c i t y :   1 ;  
     }  
 }  
  
 @ k e y f r a m e s   s l i d e U p   {  
     f r o m   {  
         o p a c i t y :   0 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 3 0 p x ) ;  
     }  
  
     t o   {  
         o p a c i t y :   1 ;  
         t r a n s f o r m :   t r a n s l a t e Y ( 0 ) ;  
     }  
 }  
  
 / *   R e s p o n s i v e   D e s i g n   f o r   L e c t u r e   S y s t e m   * /  
 @ m e d i a   ( m a x - w i d t h :   7 6 8 p x )   {  
     . l e c t u r e - m o d a l - c o n t e n t   {  
         w i d t h :   9 5 % ;  
         p a d d i n g :   v a r ( - - s p a c i n g - l g ) ;  
     }  
  
     . l e v e l - s e l e c t i o n - g r i d   {  
         g r i d - t e m p l a t e - c o l u m n s :   1 f r ;  
     }  
  
     . s u c c e s s - c o n t e n t   {  
         m i n - w i d t h :   3 0 0 p x ;  
         p a d d i n g :   v a r ( - - s p a c i n g - l g ) ;  
     }  
  
     . s u c c e s s - i c o n   {  
         f o n t - s i z e :   3 . 5 r e m ;  
     }  
  
     . a c c e s s - i n p u t   {  
         f o n t - s i z e :   1 . 2 r e m ;  
     }  
 }  
 
/* ===================================
   Electronic Card Generator Styles
   =================================== */

.card-generator-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--bg-gradient-end) 100%);
    border: 2px solid var(--accent-gold);
    border-radius: var(--radius-md);
    color: var(--accent-gold);
    font-family: "Cairo", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
}

.card-generator-btn:hover {
    background: var(--accent-gold);
    color: var(--primary-navy);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.card-preview-container {
    background: white;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
    margin: var(--spacing-md) 0;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: repeating-linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0), repeating-linear-gradient(45deg, #f0f0f0 25%, #ffffff 25%, #ffffff 75%, #f0f0f0 75%, #f0f0f0);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

#cardPreview {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 1px solid #ddd;
}

.preview-placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    border-top: 1px solid #eee;
    padding-top: var(--spacing-md);
}

.btn-secondary {
    background: #f1f5f9;
    color: var(--primary-navy);
    border: 1px solid #cbd5e1;
}

.btn-secondary:hover {
    background: #e2e8f0;
}


/* ===================================
   Student Portal Modal Styles (Card Generator)
   =================================== */

.student-portal-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.student-portal-modal.hidden {
  display: none !important;
}

.portal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 37, 64, 0.8);
  backdrop-filter: blur(8px);
}

.portal-content {
  position: relative;
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 3px solid var(--accent-gold);
  animation: slideUp 0.4s ease;
}

.portal-header {
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.portal-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-xs);
  display: block;
}

.close-portal-btn {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  width: 40px;
  height: 40px;
  border: none;
  background: #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--primary-navy);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.close-portal-btn:hover {
  background: var(--error-red);
  color: white;
  transform: rotate(90deg);
}

/* Form Styles if not global */
.form-group {
    margin-bottom: 1.5rem;
    text-align: right;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--primary-navy);
}

.form-input, .form-select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus, .form-select:focus {
    border-color: var(--secondary-navy);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.submit-btn {
    background: var(--primary-navy);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: var(--secondary-navy);
    transform: translateY(-2px);
}

.submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}


/* ===================================
   Professional Card Generator Badge (Override)
   =================================== */
.card-generator-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 20px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #d4af37 !important;
    border-radius: 50px !important; /* Pill shape */
    color: #0a2540 !important; /* Navy text for contrast */
    font-family: "Cairo", sans-serif;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2) !important;
    margin-top: 10px;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.card-generator-btn:hover {
    background: #d4af37 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

.card-generator-btn .btn-icon {
    font-size: 1.2em;
}

