/* ========================================================
   GAT Sport — Merged styles.css
   Combines: deployed (production) + updated UI (colleague)
   Updated UI rules come *after* base/deployment pieces so they override.
   ======================================================== */
/* Styles for animation*/
  .preloader,.preloader__spinner {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0
  }

  .preloader {
      position: fixed;
      background: rgba(255,255,255,.9);
      overflow: hidden;
      z-index: 999998;
      -webkit-transition: opacity .5s;
      transition: opacity .5s;
      -webkit-transition-delay: 2s;
      transition-delay: 2s
  }

  .preloader__spinner {
      position: absolute;
      margin: auto;
      z-index: 999999;
      -webkit-transition: opacity .5s;
      transition: opacity .5s;
      -webkit-animation: spinnerAnimation 1s ease-in-out infinite;
      animation: spinnerAnimation 1s ease-in-out infinite
  }

  @-webkit-keyframes spinnerAnimation {
      from {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg)
      }

      to {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg)
      }
  }

  @keyframes spinnerAnimation {
      from {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg)
      }

      to {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg)
      }
  }

  .preloader::before,.preloader::after {
      content: '';
      display: block;
      position: absolute;
      width: 200%;
      height: 50%;
      left: -50%;
      background: #252525;
      -webkit-transition: all 1s ease-in;
      transition: all 1s ease-in;
      -webkit-transition-delay: 1s;
      transition-delay: 1s
  }

  .preloader:before {
      top: 0;
      -webkit-transform-origin: right top;
      transform-origin: right top
  }

  .preloader:after {
      bottom: 0;
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom
  }

  .preloader.active {
      opacity: 0
  }

  .preloader.active .preloader__spinner {
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
      opacity: 0
  }

  .preloader.active:before,.preloader.active:after {
      -webkit-transform: scaleY(0) rotate(25deg);
      transform: scaleY(0) rotate(25deg)
  }
/* =========================
   Reset & Base
   ========================= */
   * { margin: 0; padding: 0; box-sizing: border-box; }

   :root {
     --gat-blue: #114b9a;
     --text-light: #e8f0ff;
     --muted: rgba(232, 240, 255, 0.85);
     --underline-light: rgba(210, 230, 255, 0.9);
     --underline-dark: rgba(10, 30, 60, 0.85);
   }
   
   html, body { min-height: 100%; }
   
   body {
     font-family: "Montserrat", Arial, sans-serif;
     line-height: 1.6;
     color: #111;
     background: #fff;
     overflow-x: hidden;
     position: relative;
     min-height: 100vh;
   }
   
   /* Generic container (keep production width) */
   .container {
     max-width: 1100px;
     margin: 0 auto;
     padding: 20px;
     position: relative;
     z-index: 1;
   }
   
   /* =========================
      NAVBAR / HERO / BANNER
      (keeps the production look but uses updated UI sizing & overlay)
      ========================= */
   .navbar-inverse {
     background-color: #fff !important;
     border-color: rgba(0,0,0,0.06);
     box-shadow: 0 2px 6px rgba(0,0,0,0.06);
   }
   .navbar { position: sticky; top: 0; z-index: 5; }
   .navbar .container { display:flex; align-items:center; justify-content:flex-start; padding:0 24px; }
   .navbar-header, .navbar-brand { float:none; margin:0; display:inline-flex; align-items:center; }
   .navbar-brand img { height:46px; width:auto; margin:8px 0; }
   
   .section_banner {
     position: relative;
     min-height: 100vh;
     overflow: hidden;
   }
   .carousel-inner, .item {
     height: 100vh;
     display:flex;
     align-items:center;
     justify-content:center;
   }
   .banner__carousel__img, .backstretch { position:absolute; inset:0; }
   .backstretch img { width:100%; height:100%; object-fit:cover; object-position:center; }
   
   /* blue overlay for readability (updated UI) */
   .section_banner::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(
       180deg,
       rgba(46,114,197,0.28) 0%,
       rgba(32,98,170,0.28) 40%,
       rgba(10,26,42,0.42) 100%
     );
     pointer-events: none;
   }
   
   /* center hero content */
   .section_banner .container { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
   .section_banner .row, .section_banner .col-sm-12 { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
   
   /* =========================
      Headings & Copy
      ========================= */
   .page-header {
     color: #353535 !important;
     font-size: clamp(20px, 2.6vw, 36px);
     letter-spacing: 0.5px;
     text-transform: uppercase;
     font-weight: 400;
     font-family: 'Oswald', 'Montserrat', Arial, sans-serif;
     text-shadow: none;
     margin-bottom: 18px;
   }
   .page-subheader p {
     color: rgba(255,255,255,0.7) !important;
     font-weight: 400;
     font-size: 16px;
     font-family: 'Roboto', sans-serif;
     letter-spacing: 0.2px;
     display:inline-block;
   }
   
   /* =========================
      Code display / hero underline
      ========================= */
   .bigtext {
     color: #fff !important;
     font-family: 'Oswald', 'Montserrat', Arial, sans-serif;
     font-weight: 400;
     font-size: clamp(22px, 3.2vw, 42px);
     letter-spacing: 1.5px;
     margin: 26px auto 12px;
     max-width: 980px;
   }
   
   /* code underline — two places (full-width 100vw + inner narrower rule)
      Keep both implementations so markup variations work; updated rules override where needed */
   .section_banner > .code-underline {
     width: 100vw;
     height: 0;
     border-top: 1px solid var(--underline-light);
     border-bottom: 2px solid var(--underline-dark);
     box-shadow: 0 0.25px 0 rgba(0,0,0,0.15) inset;
     margin: 12px 0 18px;
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     pointer-events: none;
   }
   .section_banner .code-underline {
     width: 88vw;
     max-width: 1300px;
     margin: 12px 0 18px;
     left: 50%;
     transform: translateX(-50%);
     height: 0;
     border-top: 2px solid #000;
     box-shadow: none;
     pointer-events: none;
   }
   
   /* =========================
      Buttons
      ========================= */
   .btn { font-family:'Oswald','Montserrat',Arial,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:2px; color:#fff !important; text-decoration:none !important; cursor:pointer; }
   a.btn, a.btn-primary { text-decoration:none !important; }
   .btn-primary {
     background: #1f5aa6 !important;
     border: none;
     padding: 18px 38px;
     border-radius: 42px;
     box-shadow: none;
     font-size: 16px;
     transition: background 0.2s ease;
   }
   .btn-primary:hover { background:#2466b3 !important; }
   
   /* left-align CTA style (updated) */
   .left-align { text-align:left; }
   .left-align .btn-primary { border-radius:22px; padding:16px 28px; font-weight:800; letter-spacing:1.2px; }
   
   /* legacy verify button style (from deployed) — keep as utility if .verify-btn is used */
   .verify-btn {
     background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
     color: white;
     border: none;
     padding: 28px 55px;
     border-radius: 18px;
     font-size: 1.4rem;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.4s ease;
     text-transform: uppercase;
     letter-spacing: 3px;
     box-shadow: 0 12px 35px rgba(30, 60, 114, 0.5);
     position: relative;
     overflow: hidden;
     margin-top: 20px;
   }
   .verify-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
     transition: left 0.6s;
   }
   .verify-btn:hover::before { left: 100%; }
   .verify-btn:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(30,60,114,0.7); }
   
   /* =========================
      Auth response / Guilloche, Images, Modals
      ========================= */
   
   /* Inline verification spacing/layout */
   #authresponse .page-header { margin: 20px; font-size: 24pt; -webkit-text-size-adjust: 100%;}
   #authresponse hr {
     border: 0;
     height: 1px;
     background: rgba(0,0,0,0.12);
     margin: 24px 0 36px;
   }
   #authresponse p { margin: 10px 0 18px; color: #3f4a5a; }
   
   /* Guilloche image & pattern sizes (kept from deployed) */
   #authresponse #guillocheImage {
     width: 420px;
     height: 420px;
     border-radius: 50%;
     object-fit: cover;
     box-shadow: 0 0 0 6px #000 inset, 0 8px 24px rgba(0,0,0,0.08);
     margin: 20px auto 60px;
     display: block;
     max-width: 100%;
   }
   #authresponse #guillochePattern {
     width: 360px;
     height: 360px;
     box-shadow: 0 0 0 4px #e6e6e6 inset, 0 8px 24px rgba(0,0,0,0.08);
     margin: 20px auto 60px;
     max-width: 100%;
   }
   
   /* Fallback guilloche-pattern decorative defaults (keeps deployed vivid gradient look) */
   .guilloche-pattern {
     width: 280px;
     height: 280px;
     border-radius: 50%;
     position: relative;
     animation: rotate 15s linear infinite;
     box-shadow: 0 0 40px rgba(255,255,255,0.3);
   }
   .guilloche-pattern::before {
     content: '';
     position: absolute;
     top: 20px; left: 20px; right: 20px; bottom: 20px;
     border-radius: 50%;
     background: #0a1a2a;
   }
   .guilloche-pattern::after {
     /* inner secondary ring */
     content: '';
     position: absolute;
     top: 50px; left: 50px; right: 50px; bottom: 50px;
     border-radius: 50%;
     background: conic-gradient(from 180deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b);
   }
   
   /* rotate animation for guilloche */
   @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
   
   /* Modal styles — preserve the production modal visual treatment (deep gradient + rounded card) */
   .modal {
     position: fixed;
     top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0,0,0,0.95);
     display:flex; align-items:center; justify-content:center;
     z-index:1000; backdrop-filter: blur(8px);
   }
   .modal-content {
     background: linear-gradient(135deg, #0a1a2a 0%, #1a2a3a 100%);
     border-radius: 25px;
     padding: 60px;
     max-width: 750px;
     width: 90%;
     max-height: 90vh;
     overflow-y: auto;
     text-align: center;
     box-shadow: 0 30px 60px rgba(0,0,0,0.6);
     border: 1px solid rgba(255,255,255,0.15);
     position: relative;
   }
   .modal-content::before {
     content: ''; position:absolute; top:0; left:0; right:0; bottom:0;
     background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
     border-radius:25px; z-index:-1;
   }
   .success-icon { font-size:6rem; color:#28a745; margin-bottom:30px; text-shadow:0 0 25px rgba(40,167,69,0.6); }
   .success-title { color:#28a745; font-size:2.2rem; margin-bottom:25px; font-weight:bold; text-transform:uppercase; letter-spacing:3px; text-shadow:0 2px 4px rgba(0,0,0,0.5); }
   .success-message { color:#b8c5d6; font-size:1.3rem; margin-bottom:50px; line-height:1.7; font-weight:300; }
   
   /* Error variant */
   .modal-content.error { border-left:6px solid #dc3545; }
   .error-icon { font-size:6rem; color:#dc3545; margin-bottom:30px; text-shadow:0 0 25px rgba(220,53,69,0.6); }
   .error-title { color:#dc3545; font-size:2.2rem; margin-bottom:25px; font-weight:bold; text-transform:uppercase; letter-spacing:3px; text-shadow:0 2px 4px rgba(0,0,0,0.5); }
   .error-message { color:#b8c5d6; font-size:1.3rem; margin-bottom:40px; line-height:1.7; font-weight:300; }
   
   .close-btn {
     background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
     color: white; border: none; padding:18px 35px; border-radius:12px; cursor:pointer; font-size:1.1rem; margin-top:40px;
     transition: all 0.3s; text-transform:uppercase; letter-spacing:2px; font-weight:bold;
   }
   .close-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(30,60,114,0.5); }
   
   /* Comparison instructions box */
   .comparison-instructions {
     text-align:left; margin-top:40px;
     background: rgba(255,255,255,0.08); padding:30px; border-radius:20px; border:1px solid rgba(255,255,255,0.15);
   }
   .comparison-instructions h4 { color:white; margin-bottom:25px; font-size:1.3rem; text-transform:uppercase; letter-spacing:2px; }
   .comparison-instructions ol { padding-left:30px; }
   .comparison-instructions li { margin-bottom:15px; color:white; line-height:1.6; font-weight:300; }
   
   /* =========================
      Loading Overlay (updated UI)
      ========================= */
   .loading-overlay {
     position: fixed;
     left: 0; right: 0;
     display: none;
     justify-content: center;
     align-items: center;
     background-color: #333;
     z-index: 10000;
     flex-direction: column;
     text-align: center;
     color: white;
     font-family: Arial, sans-serif;
   }
   .loading-title { font-size:24px; letter-spacing:1px; font-weight:bold; margin-bottom:20px; }
   .loading-spinner {
     border: 4px solid rgba(255,255,255,0.2);
     border-top: 4px solid orange;
     border-radius: 50%;
     width: 50px; height: 50px; animation: spin 1s linear infinite;
   }
   @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
   
   /* =========================
      Footer (updated UI — fixed bottom white strip)
      ========================= */
   .section_footer {
     position: fixed;
     left: 0; right: 0; bottom: 0; padding: 10px 0; background: #fff;
     border-top: 1px solid rgba(0,0,0,0.06); z-index: 5;
   }
   .section_footer > div { width:100%; margin:0; padding:0 18px; }
   .section_footer .row { display:flex; align-items:center; justify-content:space-between; margin:0; }
   .footer__copyright, .footer__copyright a { color: var(--gat-blue); text-decoration:none; }
   .footer__social { list-style:none; margin:0; padding:0; display:flex; justify-content:flex-end; gap:15px; }
   .footer__social li { display:inline-flex; width:40px; height:40px; padding:0; margin:0; align-items:center; justify-content:center; }
   .footer__social a {
     display:inline-block; width:40px; height:40px; border-radius:50%; background:#e5e7eb; background-repeat:no-repeat; background-position:center;
     transition: background-color 0.2s ease;
   }
   .footer__social a:hover { background-color:#d1d5db !important; }
   
   /* social glyphs (ensure visible) */
   .footer__social .twitter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b4b96'%3E%3Cpath d='M23 3a10.9 10.9 0 01-3.14 1.53A4.48 4.48 0 0016.5 3c-2.5 0-4.5 2.24-3.95 4.64A12.94 12.94 0 013 4s-4 9 5 13a13.38 13.38 0 01-8 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z'/%3E%3C/svg%3E"); background-size:20px 20px; }
   .footer__social .facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b4b96' d='M14.5 3H13c-2.2 0-3.5 1.4-3.5 3.6V9H7v3h2.5v6h3v-6H15l.5-3h-3V6.1c0-.6.2-1.1 1.1-1.1H15V3z'/%3E%3C/svg%3E"); background-size:20px 20px; }
   .footer__social .youtube { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='7' width='15' height='10' rx='2.5' ry='2.5' fill='%231b4b96'/%3E%3Cpolygon points='11,9 11,15 16,12' fill='%23ffffff'/%3E%3C/svg%3E"); background-size:20px 20px; }
   .footer__social .instagram { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='3' fill='%231b4b96'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='17' cy='7' r='1.3' fill='%23ffffff'/%3E%3C/svg%3E"); background-size:18px 18px; }
   
   /* Make GAT Gear and About Us images responsive */
   .section_features .img-responsive { display:block; width:100%; height:auto; max-width:100%; }
   
   /* =========================
      Utility classes & small production helpers
      ========================= */
   .text-white { color: #fff !important; }
   .text-white-muted { color: var(--muted); }
   .text-center { text-align: center; }
   .authform { margin-bottom: 30px; }
   .field-validation-valid { display: none; }
   #authresponse { min-height: 0; padding: 0; }
   
   /* small override for preverify hide (updated UI uses .preverify-hidden) */
   .preverify-hidden { display: none; }
   
   /* small production-specific hero/card styling kept for auth area (from deployed) */
   .verify-main { display:flex; align-items:center; justify-content:center; min-height:100vh; text-align:center; padding:0 20px; }
   .auth-content {
     background: rgba(255,255,255,0.08);
     backdrop-filter: blur(15px);
     border-radius: 25px;
     padding: 70px 60px;
     max-width: 650px; width:100%;
     border:1px solid rgba(255,255,255,0.15);
     box-shadow: 0 25px 50px rgba(0,0,0,0.4);
     position: relative;
   }
   .auth-content::before {
     content: ''; position:absolute; top:0; left:0; right:0; bottom:0;
     background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
     border-radius:25px; z-index:-1;
   }
   
   /* =========================
      Responsive (combined & harmonized)
      ========================= */
   @media (max-width: 992px) {
     .left-align { text-align: center; }
     .left-align .btn-primary { display:inline-block; margin:0 auto; }
   }
   
   @media (max-width: 768px) {
     body { overflow-x: hidden; }
     .container { padding: 10px; max-width:100%; }
     .navbar .container { padding: 10px 15px; }
     .navbar-brand img { height: 35px; }
     .section_banner { min-height: 100vh; padding: 0; }
     .carousel-inner, .item { height: 100vh; padding: 20px 0; }
     .banner__carousel__img { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }
     .backstretch img { width:100%; height:100%; object-fit:cover; object-position:center; }
     .section_banner .container { z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:60px 20px 20px; }
     .page-header { line-height:1.2; margin-bottom:15px; padding:0 10px; }
     .page-subheader p { line-height:1.4; margin-bottom:30px; padding:0 10px; }
     .bigtext { font-size:28px !important; letter-spacing:1px; margin:20px auto 6px; padding:0 10px; }
     .btn-primary { padding:15px 30px; font-size:14px; letter-spacing:1px; margin:20px 0; }
     .modal-content { padding:30px 20px; margin:10px; border-radius:15px; max-height:95vh; overflow-y:auto; }
     .guilloche-pattern { width:200px; height:200px; }
     .success-icon, .error-icon { font-size:4rem; }
     .success-title, .error-title { font-size:1.6rem; line-height:1.2; }
     .success-message, .error-message { font-size:1.1rem; line-height:1.4; }
     .section_features { padding:40px 0; }
     .section_features img { width:100%; height:auto; object-fit:contain; }
     .feaure_utility .container { padding:0 20px; }
     .feaure_utility .page-header { font-size:22px !important; margin-bottom:20px; }
     .feaure_utility p { font-size:14px; line-height:1.5; margin-bottom:15px; padding:0 10px; }
     .section_footer .row { flex-direction:column; align-items:center; gap:10px; }
     .footer__copyright { width:100%; text-align:center; margin:0; }
     .footer__social { justify-content:center; gap:12px; }
     .footer__social a { width:36px; height:36px; }
   }
   
   @media (max-width: 480px) {
     .bigtext { letter-spacing:0.5px; }
     .btn-primary { padding:12px 25px; font-size:12px; }
     .modal-content { padding:20px 15px; margin:5px; }
     .guilloche-pattern { width:160px; height:160px; }
     .success-icon, .error-icon { font-size:3.5rem; }
     .section_features { padding:30px 0; }
     .feaure_utility .page-header { font-size:18px !important; }
     .feaure_utility p { font-size:12px; }
   }
   
   /* tiny screens */
   @media (max-width: 360px) {
     .bigtext { font-size:20px !important; }
     .btn-primary { padding:10px 20px; font-size:11px; }
     .guilloche-pattern { width:140px; height:140px; }
   }
   
   /* Keep pointer hand for interactive elements (both variants) */
   .btn, .btn-primary, .authbutton, .verify-btn { cursor: pointer; text-decoration: none !important; }
   
   /* Remove aggressive transforms on focus/hover (keep accessibility) */
   .btn:hover, .btn-primary:hover, .authbutton:hover, .verify-btn:hover,
   .btn:focus, .btn-primary:focus, .authbutton:focus, .verify-btn:focus,
   .btn:active, .btn-primary:active, .authbutton:active, .verify-btn:active {
     box-shadow: none !important;
     transform: none !important;
     outline: none !important;
     text-decoration: none !important;
   }
   
   /* Small helper for older markup that referenced .background-image */
   .background-image, .background-image::before { display: none; }
   
   /* Final minor production helper (keep root colors accessible) */
   :root { --primary: var(--gat-blue); }

/* ===== Fix: force-centered underline (override conflicting 100vw rules) ===== */
.section_banner .code-underline,
.section_banner > .code-underline {
  position: relative !important;
  width: min(88vw, 1300px) !important;
  max-width: 100% !important;
  margin: 12px auto 18px !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* optional: full-bleed underline when explicitly needed */
.section_banner .code-underline--full {
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 12px 0 !important;
}

/* HERO reveal animation — use .in class to trigger */
.section_banner .animate-down,
.section_banner .animate-xs-step-0,
.section_banner .animate-xs-step-1,
.section_banner .animate-xs-step-2 {
  opacity: 0;
  transform: translateY(-30px);
  will-change: transform, opacity;
}

.section_banner .animate-down.in,
.section_banner .animate-xs-step-0.in,
.section_banner .animate-xs-step-1.in,
.section_banner .animate-xs-step-2.in {
  animation: fadeInDown 900ms ease-out both;
}

.section_banner .animate-xs-step-1.in { animation-delay: 140ms; }
.section_banner .animate-xs-step-2.in { animation-delay: 280ms; }

/* Put near your existing animation rules in styles.css */
.animate-down {
  opacity: 0;
  transform: translateY(-24px);
  will-change: transform, opacity;
}

/* when JS toggles .in the animation runs */
.animate-down.in {
  animation: fadeInDown 700ms cubic-bezier(.2,.9,.3,1) both;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/*!
 * Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
 *
 * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 */
 .datepicker {
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  direction: ltr
}

.datepicker-inline {
  width: 220px
}

.datepicker-rtl {
  direction: rtl
}

.datepicker-rtl.dropdown-menu {
  left: auto
}

.datepicker-rtl table tr td span {
  float: right
}

.datepicker-dropdown {
  top: 0;
  left: 0
}

.datepicker-dropdown:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #999;
  border-top: 0;
  border-bottom-color: rgba(0,0,0,.2);
  position: absolute
}

.datepicker-dropdown:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-top: 0;
  position: absolute
}

.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px
}

.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px
}

.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px
}

.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px
}

.datepicker-dropdown.datepicker-orient-bottom:before {
  top: -7px
}

.datepicker-dropdown.datepicker-orient-bottom:after {
  top: -6px
}

.datepicker-dropdown.datepicker-orient-top:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #999
}

.datepicker-dropdown.datepicker-orient-top:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff
}

.datepicker table {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.datepicker td,.datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 0
}

.table-striped .datepicker table tr td,.table-striped .datepicker table tr th {
  background-color: transparent
}

.datepicker table tr td.day.focused,.datepicker table tr td.day:hover {
  background: #eee;
  cursor: pointer
}

.datepicker table tr td.new,.datepicker table tr td.old {
  color: #999
}

.datepicker table tr td.disabled,.datepicker table tr td.disabled:hover {
  background: 0 0;
  color: #999;
  cursor: default
}

.datepicker table tr td.highlighted {
  background: #d9edf7;
  border-radius: 0
}

.datepicker table tr td.today,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today:hover {
  background-color: #fde19a;
  background-image: -moz-linear-gradient(to bottom,#fdd49a,#fdf59a);
  background-image: -ms-linear-gradient(to bottom,#fdd49a,#fdf59a);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fdd49a),to(#fdf59a));
  background-image: -webkit-linear-gradient(to bottom,#fdd49a,#fdf59a);
  background-image: -o-linear-gradient(to bottom,#fdd49a,#fdf59a);
  background-image: linear-gradient(to bottom,#fdd49a,#fdf59a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a',endColorstr='#fdf59a',GradientType=0);
  border-color: #fdf59a #fdf59a #fbed50;
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #000
}

.datepicker table tr td.today.active,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled.active,.datepicker table tr td.today.disabled.disabled,.datepicker table tr td.today.disabled:active,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today.disabled:hover.active,.datepicker table tr td.today.disabled:hover.disabled,.datepicker table tr td.today.disabled:hover:active,.datepicker table tr td.today.disabled:hover:hover,.datepicker table tr td.today.disabled:hover[disabled],.datepicker table tr td.today.disabled[disabled],.datepicker table tr td.today:active,.datepicker table tr td.today:hover,.datepicker table tr td.today:hover.active,.datepicker table tr td.today:hover.disabled,.datepicker table tr td.today:hover:active,.datepicker table tr td.today:hover:hover,.datepicker table tr td.today:hover[disabled],.datepicker table tr td.today[disabled] {
  background-color: #fdf59a
}

.datepicker table tr td.today.active,.datepicker table tr td.today.disabled.active,.datepicker table tr td.today.disabled:active,.datepicker table tr td.today.disabled:hover.active,.datepicker table tr td.today.disabled:hover:active,.datepicker table tr td.today:active,.datepicker table tr td.today:hover.active,.datepicker table tr td.today:hover:active {
  background-color: #fbf069
}

.datepicker table tr td.today:hover:hover {
  color: #000
}

.datepicker table tr td.today.active:hover {
  color: #fff
}

.datepicker table tr td.range,.datepicker table tr td.range.disabled,.datepicker table tr td.range.disabled:hover,.datepicker table tr td.range:hover {
  background: #eee;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0
}

.datepicker table tr td.range.today,.datepicker table tr td.range.today.disabled,.datepicker table tr td.range.today.disabled:hover,.datepicker table tr td.range.today:hover {
  background-color: #f3d17a;
  background-image: -moz-linear-gradient(to bottom,#f3c17a,#f3e97a);
  background-image: -ms-linear-gradient(to bottom,#f3c17a,#f3e97a);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#f3c17a),to(#f3e97a));
  background-image: -webkit-linear-gradient(to bottom,#f3c17a,#f3e97a);
  background-image: -o-linear-gradient(to bottom,#f3c17a,#f3e97a);
  background-image: linear-gradient(to bottom,#f3c17a,#f3e97a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a',endColorstr='#f3e97a',GradientType=0);
  border-color: #f3e97a #f3e97a #edde34;
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0
}

.datepicker table tr td.range.today.active,.datepicker table tr td.range.today.disabled,.datepicker table tr td.range.today.disabled.active,.datepicker table tr td.range.today.disabled.disabled,.datepicker table tr td.range.today.disabled:active,.datepicker table tr td.range.today.disabled:hover,.datepicker table tr td.range.today.disabled:hover.active,.datepicker table tr td.range.today.disabled:hover.disabled,.datepicker table tr td.range.today.disabled:hover:active,.datepicker table tr td.range.today.disabled:hover:hover,.datepicker table tr td.range.today.disabled:hover[disabled],.datepicker table tr td.range.today.disabled[disabled],.datepicker table tr td.range.today:active,.datepicker table tr td.range.today:hover,.datepicker table tr td.range.today:hover.active,.datepicker table tr td.range.today:hover.disabled,.datepicker table tr td.range.today:hover:active,.datepicker table tr td.range.today:hover:hover,.datepicker table tr td.range.today:hover[disabled],.datepicker table tr td.range.today[disabled] {
  background-color: #f3e97a
}

.datepicker table tr td.range.today.active,.datepicker table tr td.range.today.disabled.active,.datepicker table tr td.range.today.disabled:active,.datepicker table tr td.range.today.disabled:hover.active,.datepicker table tr td.range.today.disabled:hover:active,.datepicker table tr td.range.today:active,.datepicker table tr td.range.today:hover.active,.datepicker table tr td.range.today:hover:active {
  background-color: #efe24b
}

.datepicker table tr td.selected,.datepicker table tr td.selected.disabled,.datepicker table tr td.selected.disabled:hover,.datepicker table tr td.selected:hover {
  background-color: #9e9e9e;
  background-image: -moz-linear-gradient(to bottom,#b3b3b3,grey);
  background-image: -ms-linear-gradient(to bottom,#b3b3b3,grey);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#b3b3b3),to(grey));
  background-image: -webkit-linear-gradient(to bottom,#b3b3b3,grey);
  background-image: -o-linear-gradient(to bottom,#b3b3b3,grey);
  background-image: linear-gradient(to bottom,#b3b3b3,grey);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3',endColorstr='#808080',GradientType=0);
  border-color: #808080 #808080 #595959;
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25)
}

.datepicker table tr td.selected.active,.datepicker table tr td.selected.disabled,.datepicker table tr td.selected.disabled.active,.datepicker table tr td.selected.disabled.disabled,.datepicker table tr td.selected.disabled:active,.datepicker table tr td.selected.disabled:hover,.datepicker table tr td.selected.disabled:hover.active,.datepicker table tr td.selected.disabled:hover.disabled,.datepicker table tr td.selected.disabled:hover:active,.datepicker table tr td.selected.disabled:hover:hover,.datepicker table tr td.selected.disabled:hover[disabled],.datepicker table tr td.selected.disabled[disabled],.datepicker table tr td.selected:active,.datepicker table tr td.selected:hover,.datepicker table tr td.selected:hover.active,.datepicker table tr td.selected:hover.disabled,.datepicker table tr td.selected:hover:active,.datepicker table tr td.selected:hover:hover,.datepicker table tr td.selected:hover[disabled],.datepicker table tr td.selected[disabled] {
  background-color: #808080
}

.datepicker table tr td.selected.active,.datepicker table tr td.selected.disabled.active,.datepicker table tr td.selected.disabled:active,.datepicker table tr td.selected.disabled:hover.active,.datepicker table tr td.selected.disabled:hover:active,.datepicker table tr td.selected:active,.datepicker table tr td.selected:hover.active,.datepicker table tr td.selected:hover:active {
  background-color: #666
}

.datepicker table tr td.active,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.active:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(to bottom,#08c,#04c);
  background-image: -ms-linear-gradient(to bottom,#08c,#04c);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
  background-image: -webkit-linear-gradient(to bottom,#08c,#04c);
  background-image: -o-linear-gradient(to bottom,#08c,#04c);
  background-image: linear-gradient(to bottom,#08c,#04c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c',endColorstr='#0044cc',GradientType=0);
  border-color: #04c #04c #002a80;
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25)
}

.datepicker table tr td.active.active,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled.active,.datepicker table tr td.active.disabled.disabled,.datepicker table tr td.active.disabled:active,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.active.disabled:hover.active,.datepicker table tr td.active.disabled:hover.disabled,.datepicker table tr td.active.disabled:hover:active,.datepicker table tr td.active.disabled:hover:hover,.datepicker table tr td.active.disabled:hover[disabled],.datepicker table tr td.active.disabled[disabled],.datepicker table tr td.active:active,.datepicker table tr td.active:hover,.datepicker table tr td.active:hover.active,.datepicker table tr td.active:hover.disabled,.datepicker table tr td.active:hover:active,.datepicker table tr td.active:hover:hover,.datepicker table tr td.active:hover[disabled],.datepicker table tr td.active[disabled] {
  background-color: #04c
}

.datepicker table tr td.active.active,.datepicker table tr td.active.disabled.active,.datepicker table tr td.active.disabled:active,.datepicker table tr td.active.disabled:hover.active,.datepicker table tr td.active.disabled:hover:active,.datepicker table tr td.active:active,.datepicker table tr td.active:hover.active,.datepicker table tr td.active:hover:active {
  background-color: #039
}

.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

.datepicker table tr td span.focused,.datepicker table tr td span:hover {
  background: #eee
}

.datepicker table tr td span.disabled,.datepicker table tr td span.disabled:hover {
  background: 0 0;
  color: #999;
  cursor: default
}

.datepicker table tr td span.active,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(to bottom,#08c,#04c);
  background-image: -ms-linear-gradient(to bottom,#08c,#04c);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
  background-image: -webkit-linear-gradient(to bottom,#08c,#04c);
  background-image: -o-linear-gradient(to bottom,#08c,#04c);
  background-image: linear-gradient(to bottom,#08c,#04c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c',endColorstr='#0044cc',GradientType=0);
  border-color: #04c #04c #002a80;
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25)
}

.datepicker table tr td span.active.active,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled.active,.datepicker table tr td span.active.disabled.disabled,.datepicker table tr td span.active.disabled:active,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active.disabled:hover.active,.datepicker table tr td span.active.disabled:hover.disabled,.datepicker table tr td span.active.disabled:hover:active,.datepicker table tr td span.active.disabled:hover:hover,.datepicker table tr td span.active.disabled:hover[disabled],.datepicker table tr td span.active.disabled[disabled],.datepicker table tr td span.active:active,.datepicker table tr td span.active:hover,.datepicker table tr td span.active:hover.active,.datepicker table tr td span.active:hover.disabled,.datepicker table tr td span.active:hover:active,.datepicker table tr td span.active:hover:hover,.datepicker table tr td span.active:hover[disabled],.datepicker table tr td span.active[disabled] {
  background-color: #04c
}

.datepicker table tr td span.active.active,.datepicker table tr td span.active.disabled.active,.datepicker table tr td span.active.disabled:active,.datepicker table tr td span.active.disabled:hover.active,.datepicker table tr td span.active.disabled:hover:active,.datepicker table tr td span.active:active,.datepicker table tr td span.active:hover.active,.datepicker table tr td span.active:hover:active {
  background-color: #039
}

.datepicker table tr td span.new,.datepicker table tr td span.old {
  color: #999
}

.datepicker .datepicker-switch {
  width: 145px
}

.datepicker .datepicker-switch,.datepicker .next,.datepicker .prev,.datepicker tfoot tr th {
  cursor: pointer
}

.datepicker .datepicker-switch:hover,.datepicker .next:hover,.datepicker .prev:hover,.datepicker tfoot tr th:hover {
  background: #eee
}

.datepicker .next.disabled,.datepicker .prev.disabled {
  visibility: hidden
}

.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle
}

.input-append.date .add-on,.input-prepend.date .add-on {
  cursor: pointer
}

.input-append.date .add-on i,.input-prepend.date .add-on i {
  margin-top: 3px
}

.input-daterange input {
  text-align: center
}

.input-daterange input:first-child {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px
}

.input-daterange input:last-child {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0
}

.input-daterange .add-on {
  display: inline-block;
  width: auto;
  min-width: 16px;
  height: 18px;
  padding: 4px 5px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  vertical-align: middle;
  background-color: #eee;
  border: 1px solid #ccc;
  margin-left: -5px;
  margin-right: -5px
}

/* Final safety: ensure datepicker sits above overlays and looks like OG */
.datepicker {
  position: absolute !important;
  z-index: 999999 !important;
  background: #fff;
  border: 1px solid #d7d7d7;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 4px;
}