/* ========================================================================== ⚡ SUMON NEXT-GEN DESIGN SYSTEM - COMPLETE OBSIDIAN & CEMENT SUITE ========================================================================== */ :root { /* Ultra-Dark Obsidian Palette */ --paper: #060911; --surface: #0B101D; --surface-raised: #12192B; --surface-card: #0E1424; --surface-card-hover: #131B30; --navbar-bg: rgba(6, 9, 17, 0.92); --input-bg: #0D1322; /* Cement Line & Structural Borders */ --line: #222C40; --line-light: #323F59; --line-subtle: rgba(148, 163, 184, 0.18); --line-glow: rgba(59, 130, 246, 0.55); /* Pure White & High-Contrast Typography */ --ink: #FFFFFF; --ink-pure: #FFFFFF; --ink-soft: #CBD5E1; --ink-muted: #94A3B8; --ink-dark: #64748B; /* Electric Sapphire & Brand Accents */ --accent: #3B82F6; --accent-bright: #60A5FA; --accent-glow: #93C5FD; --accent-secondary: #2563EB; --accent-dark: #1D4ED8; /* Status Colors */ --success: #10B981; --success-glow: rgba(16, 185, 129, 0.35); --warning: #F59E0B; --warning-glow: rgba(245, 158, 11, 0.35); --danger: #EF4444; --danger-glow: rgba(239, 68, 68, 0.35); --purple: #8B5CF6; /* Gradients */ --njbots-gradient: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #3B82F6 100%); --njbots-gradient-hover: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%); --hero-gradient: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.2) 0%, transparent 60%), radial-gradient(circle at 10% 80%, rgba(96, 165, 250, 0.08) 0%, transparent 50%), #0B101D; --card-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%); /* Shadows & Glows */ --shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.85); --shadow-hover: 0 24px 48px -12px rgba(0, 0, 0, 0.95); --card-glow: 0 0 25px rgba(59, 130, 246, 0.16); --card-glow-strong: 0 0 35px rgba(59, 130, 246, 0.3); } /* Document & Base Typography */ html, body, #content { background-color: var(--paper) !important; color: var(--ink-soft) !important; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.65; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, strong, b, .font-weight-bold, .cardnjbotsName, .list-title, .navbar-brand, .brand-name, th, dt, .modal-title, .dropdown-header { color: #FFFFFF !important; font-weight: 700; } p, span, li, label, td, dd { color: var(--ink-soft); } .text-muted, small.text-muted, .small.text-muted { color: var(--ink-muted) !important; } /* Pure High-Contrast White & Glowing Icons */ i, svg, .fas, .far, .fab, .fad { color: #FFFFFF; vertical-align: middle; } .text-primary i, i.text-primary, .fas.text-primary, .fab.text-primary, .fad.text-primary { color: var(--accent-bright) !important; } .text-success i, i.text-success, .fas.text-success, .fad.text-success { color: var(--success) !important; } .text-warning i, i.text-warning, .fas.text-warning, .fad.text-warning { color: var(--warning) !important; } .text-danger i, i.text-danger, .fas.text-danger, .fad.text-danger { color: var(--danger) !important; } .fad { --fa-primary-color: var(--accent-bright); --fa-secondary-color: #FFFFFF; --fa-secondary-opacity: 0.9; } /* Links */ a { color: var(--accent-bright); text-decoration: none; transition: all 0.2s ease; } a:hover { color: #FFFFFF; text-decoration: none; } /* Navbar */ .navbar.bg-njbots { background: var(--navbar-bg) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line) !important; padding: 14px 0; position: sticky; top: 0; z-index: 1030; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); } .brand-name { color: #FFFFFF !important; font-size: 16px; font-weight: 800; letter-spacing: .15em; } .brand-name span { color: var(--accent-bright) !important; } .navbar .nav-link { color: var(--ink-soft) !important; font-size: 13px; font-weight: 600; letter-spacing: .03em; padding: 8px 16px !important; border-radius: 8px; transition: all 0.2s ease; } .navbar .nav-link:hover, .navbar .nav-link.active { color: #FFFFFF !important; background: rgba(59, 130, 246, 0.16); } .brand-logo, .navbar-logo, .footer-logo, .page-brand-logo { filter: drop-shadow(0 4px 14px rgba(59, 130, 246, .5)); transition: all .25s ease; } .brand-logo:hover, .navbar-logo:hover { transform: scale(1.08) rotate(-2deg); } /* Hero Section */ .premium-hero { position: relative; overflow: hidden; min-height: 480px; background: var(--hero-gradient); border-bottom: 1px solid var(--line); color: #FFFFFF; } .premium-hero:before { content: ""; position: absolute; width: 700px; height: 700px; right: -180px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .22), transparent 70%); } .hero-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, black 0%, transparent 85%); } .premium-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .75fr); gap: 40px; align-items: center; min-height: 480px; padding: 48px 24px 64px; } .hero-copy h1 { max-width: 650px; margin: 16px 0 14px; color: #FFFFFF !important; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; } .hero-copy h1 em { color: var(--accent-bright); font-style: normal; } .hero-lede { max-width: 520px; color: var(--ink-soft); font-size: 15px; line-height: 1.75; } .hero-search { display: flex; align-items: center; max-width: 560px; height: 58px; margin-top: 24px; padding: 0 8px 0 20px; background: rgba(13, 19, 34, 0.85); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: all .25s ease; } .hero-search:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35), var(--shadow); transform: translateY(-2px); } .hero-search > i { color: var(--accent-bright); font-size: 17px; } .hero-search input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: 0; color: #FFFFFF !important; background: transparent; font: inherit; font-size: 14px; } .hero-search input::placeholder { color: var(--ink-muted); } .hero-search button { width: 44px; height: 44px; border: 0; border-radius: 9px; color: #FFFFFF; background: var(--njbots-gradient); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease; } .hero-search button:hover { background: var(--njbots-gradient-hover); transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(37, 99, 235, .6); } .home-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .home-tags .btn-tag, .btn-tag { display: inline-flex; align-items: center; padding: 8px 16px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; color: var(--ink-soft) !important; background: var(--surface) !important; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; } .home-tags .btn-tag:hover, .btn-tag:hover { color: #FFFFFF !important; border-color: var(--accent-bright) !important; background: rgba(59, 130, 246, 0.16) !important; transform: translateY(-2px); } .home-tags .btn-tag.is-active, .btn-tag.is-active { color: #FFFFFF !important; border-color: var(--accent) !important; background: var(--njbots-gradient) !important; box-shadow: 0 4px 16px rgba(37, 99, 235, .45); } /* Cards & Containers */ .cardnjbotsCard, .box, .card, .panel, .widget, .widget-content, .modal-content, .dropdown-menu { background: var(--surface-card) !important; background-color: var(--surface-card) !important; color: var(--ink-soft) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: var(--shadow) !important; position: relative; overflow: hidden; transition: transform .28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .28s ease, border-color .28s ease !important; } .cardnjbotsCard:before, .box:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--card-shine); pointer-events: none; } .cardnjbotsCard:hover, .box:hover, .card:hover { transform: translateY(-6px) scale(1.008); border-color: var(--accent-bright) !important; box-shadow: var(--shadow-hover), var(--card-glow-strong) !important; } .cardnjbotsName { color: #FFFFFF !important; font-size: 17px; font-weight: 700; } .cardnjbotsDesc { color: var(--ink-soft) !important; font-size: 13px; line-height: 1.6; } /* Buttons */ .btn { border-radius: 10px; font-weight: 600; font-size: 13px; letter-spacing: .02em; padding: 9px 20px; transition: all .22s cubic-bezier(0.2, 0.8, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .btn-primary { background: var(--njbots-gradient) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 4px 16px rgba(37, 99, 235, .4); } .btn-primary:hover { background: var(--njbots-gradient-hover) !important; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(37, 99, 235, .6); } .btn-card, .btn-outline-primary { color: #FFFFFF !important; background: rgba(18, 25, 43, 0.75) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; } .btn-card:hover, .btn-outline-primary:hover { color: #FFFFFF !important; background: var(--njbots-gradient) !important; border-color: transparent !important; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(37, 99, 235, .45); } .btn-success { background: linear-gradient(135deg, #059669, #10B981) !important; color: #FFFFFF !important; border: 0 !important; box-shadow: 0 4px 16px rgba(16, 185, 129, .35); } .btn-success:hover { background: linear-gradient(135deg, #10B981, #34D399) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 185, 129, .5); } .btn-danger { background: linear-gradient(135deg, #DC2626, #EF4444) !important; color: #FFFFFF !important; border: 0 !important; box-shadow: 0 4px 16px rgba(239, 68, 68, .35); } .btn-danger:hover { background: linear-gradient(135deg, #EF4444, #F87171) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(239, 68, 68, .5); } /* Badges & Tags */ .tag.is-dark, .badge-secondary, .tag { background-color: var(--surface-raised) !important; border: 1px solid var(--line) !important; color: #FFFFFF !important; border-radius: 7px; font-weight: 600; font-size: 12px; padding: 5px 12px; } .badge-primary, .tag.is-primary { background: rgba(37, 99, 235, 0.25) !important; border: 1px solid var(--accent) !important; color: #FFFFFF !important; } .badge-success, .tag.is-success { background: rgba(16, 185, 129, 0.22) !important; border: 1px solid var(--success) !important; color: #FFFFFF !important; } .badge-warning, .tag.is-warning { background: rgba(245, 158, 11, 0.22) !important; border: 1px solid var(--warning) !important; color: #FFFFFF !important; } /* Forms & Inputs */ .form-control, input.form-control, textarea.form-control, select.form-control, .input, .textarea, .select select, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="search"] { background-color: var(--input-bg) !important; border: 1px solid var(--line) !important; color: #FFFFFF !important; border-radius: 10px !important; font-size: 14px; padding: 11px 16px; transition: all .2s ease; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-muted) !important; } .form-control:focus, input:focus, textarea:focus, select:focus, .input:focus, .textarea:focus, .select select:focus { background-color: var(--input-bg) !important; border-color: var(--accent-bright) !important; color: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important; outline: 0; } /* Collection Filter Bar */ .collection-filter-wrap { position: relative; z-index: 2; margin-top: -24px; } .collection-filter { display: inline-flex; align-items: center; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .collection-filter-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; transition: all .2s ease; } .collection-filter-button i { color: var(--accent-bright); } .collection-filter-button:hover { color: #FFFFFF; background: rgba(59, 130, 246, 0.16); } .collection-filter-button.is-active { color: #FFFFFF !important; background: var(--njbots-gradient) !important; box-shadow: 0 4px 16px rgba(37, 99, 235, .4); } .collection-filter-button.is-active i { color: #FFFFFF !important; } .list-section { margin-top: 20px; padding: 14px 0 18px; scroll-margin-top: 70px; } .section-kicker { margin-bottom: 4px; color: var(--accent-bright); font-size: 11px; font-weight: 800; letter-spacing: .2em; } .list-title { margin: 0; color: #FFFFFF !important; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; } .list-subtitle { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; } /* Tables & CodeMirror */ table, .table { color: #FFFFFF !important; border-color: var(--line) !important; background: transparent !important; } table thead th, .table thead th { background-color: var(--surface-raised) !important; border-color: var(--line) !important; color: #FFFFFF !important; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } table td, .table td { border-color: var(--line) !important; color: var(--ink-soft) !important; vertical-align: middle; } table tr:hover, .table tbody tr:hover { background-color: rgba(59, 130, 246, 0.1) !important; } pre, code, .CodeMirror { background-color: var(--surface-raised) !important; border: 1px solid var(--line) !important; color: #FFFFFF !important; border-radius: 10px; } pre.bot { width: 100%; height: 100%; display: block; margin: 0; font-size: 87.5%; color: #FFFFFF !important; background: transparent !important; overflow: hidden; padding: 1.25rem 1.5rem; white-space: pre-wrap; font-family: 'Poppins', monospace; } pre td { color: #FFFFFF !important; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--paper); } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Admin Suite */ body.dashboard-analytics, .dashboard-analytics .main-container, .dashboard-analytics .main-content, .dashboard-analytics #container { color: #FFFFFF !important; background: var(--paper) !important; background-color: var(--paper) !important; } .header-container .header.navbar { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, .4); } .admin-wordmark a { color: #FFFFFF !important; font-size: 16px; font-weight: 800; letter-spacing: .14em; } .admin-wordmark a span { color: var(--accent-bright) !important; } .sidebar-wrapper, #compactSidebar, .submenu-sidebar { background: var(--surface) !important; border-color: var(--line) !important; } .sidebar-wrapper .theme-brand { border-color: var(--line) !important; } .sidebar-wrapper .menu-categories .menu-toggle, .sidebar-wrapper .submenu-list li a { color: var(--ink-soft) !important; transition: all .2s ease; font-weight: 600; } .sidebar-wrapper .menu-categories .menu-toggle:hover, .sidebar-wrapper .submenu-list li a:hover, .sidebar-wrapper .submenu-list li.active a { color: #FFFFFF !important; background: rgba(59, 130, 246, .2) !important; border-radius: 6px; } .sidebar-wrapper .base-icons i { color: #FFFFFF !important; } .widget, .widget-content, .widget-content-area, .widget-chart-three, .widget-card-four, .widget-card-two, .widget-table-two { color: #FFFFFF !important; background: var(--surface-card) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: var(--shadow) !important; } .w-info .value { font-size: 28px; font-weight: 800; color: #FFFFFF !important; } .w-info p { color: var(--ink-soft) !important; font-size: 13px; font-weight: 600; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { color: #FFFFFF !important; background: var(--surface-raised) !important; border: 1px solid var(--line) !important; border-radius: 8px; padding: 6px 12px; } .dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter { color: var(--ink-soft) !important; } .page-link { color: var(--accent-bright) !important; background: var(--surface-raised) !important; border-color: var(--line) !important; } /* ========================================================================== FRAMEWORK & EXTENSION CLASSES (BULMA + ADMIN + PLUGINS) ========================================================================== */ /*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */ @-webkit-keyframes spinAround{ from{ transform:rotate(0) } to{ transform:rotate(359deg) } } @keyframes spinAround{ from{ transform:rotate(0) } to{ transform:rotate(359deg) } } .breadcrumb,.button,.delete,.file,.is-unselectable,.modal-close,.pagination-ellipsis,.pagination-link,.pagination-next,.pagination-previous,.tabs{ -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } .navbar-link:not(.is-arrowless)::after,.select:not(.is-multiple):not(.is-loading)::after{ border:3px solid transparent; border-radius:2px; border-right:0; border-top:0; content:" "; display:block; height:.625em; margin-top:-.4375em; pointer-events:none; position:absolute; top:50%; transform:rotate(-45deg); transform-origin:center; width:.625em } .block:not(:last-child),.box:not(:last-child),.breadcrumb:not(:last-child),.content:not(:last-child),.highlight:not(:last-child),.level:not(:last-child),.message:not(:last-child),.notification:not(:last-child),.pagination:not(:last-child),.progress:not(:last-child),.subtitle:not(:last-child),.table-container:not(:last-child),.table:not(:last-child),.tabs:not(:last-child),.title:not(:last-child){ margin-bottom:1.5rem } .delete,.modal-close{ -moz-appearance:none; -webkit-appearance:none; background-color:rgba(10,10,10,.2); border:none; border-radius:290486px; cursor:pointer; pointer-events:auto; display:inline-block; flex-grow:0; flex-shrink:0; font-size:0; height:20px; max-height:20px; max-width:20px; min-height:20px; min-width:20px; outline:0; position:relative; vertical-align:top; width:20px } .delete::after,.delete::before,.modal-close::after,.modal-close::before{ background-color:#fff; content:""; display:block; left:50%; position:absolute; top:50%; transform:translateX(-50%) translateY(-50%) rotate(45deg); transform-origin:center center } .delete::before,.modal-close::before{ height:2px; width:50% } .delete::after,.modal-close::after{ height:50%; width:2px } .delete:focus,.delete:hover,.modal-close:focus,.modal-close:hover{ background-color:rgba(10,10,10,.3) } .delete:active,.modal-close:active{ background-color:rgba(10,10,10,.4) } .is-small.delete,.is-small.modal-close{ height:16px; max-height:16px; max-width:16px; min-height:16px; min-width:16px; width:16px } .is-medium.delete,.is-medium.modal-close{ height:24px; max-height:24px; max-width:24px; min-height:24px; min-width:24px; width:24px } .is-large.delete,.is-large.modal-close{ height:32px; max-height:32px; max-width:32px; min-height:32px; min-width:32px; width:32px } .button.is-loading::after,.control.is-loading::after,.loader,.select.is-loading::after{ -webkit-animation:spinAround .5s infinite linear; animation:spinAround .5s infinite linear; border:2px solid #dbdbdb; border-radius:290486px; border-right-color:transparent; border-top-color:transparent; content:""; display:block; height:1em; position:relative; width:1em } .hero-video,.image.is-16by9 .has-ratio,.image.is-16by9 img,.image.is-1by1 .has-ratio,.image.is-1by1 img,.image.is-1by2 .has-ratio,.image.is-1by2 img,.image.is-1by3 .has-ratio,.image.is-1by3 img,.image.is-2by1 .has-ratio,.image.is-2by1 img,.image.is-2by3 .has-ratio,.image.is-2by3 img,.image.is-3by1 .has-ratio,.image.is-3by1 img,.image.is-3by2 .has-ratio,.image.is-3by2 img,.image.is-3by4 .has-ratio,.image.is-3by4 img,.image.is-3by5 .has-ratio,.image.is-3by5 img,.image.is-4by3 .has-ratio,.image.is-4by3 img,.image.is-4by5 .has-ratio,.image.is-4by5 img,.image.is-5by3 .has-ratio,.image.is-5by3 img,.image.is-5by4 .has-ratio,.image.is-5by4 img,.image.is-9by16 .has-ratio,.image.is-9by16 img,.image.is-square .has-ratio,.image.is-square img,.is-overlay,.modal,.modal-background{ bottom:0; left:0; position:absolute; right:0; top:0 } .button,.file-cta,.file-name,.input,.pagination-ellipsis,.pagination-link,.pagination-next,.pagination-previous,.select select,.textarea{ -moz-appearance:none; -webkit-appearance:none; align-items:center; border:1px solid transparent; border-radius:4px; box-shadow:none; display:inline-flex; font-size:1rem; height:2.5em; justify-content:flex-start; line-height:1.5; padding-bottom:calc(.5em - 1px); padding-left:calc(.75em - 1px); padding-right:calc(.75em - 1px); padding-top:calc(.5em - 1px); position:relative; vertical-align:top } .button:active,.button:focus,.file-cta:active,.file-cta:focus,.file-name:active,.file-name:focus,.input:active,.input:focus,.is-active.button,.is-active.file-cta,.is-active.file-name,.is-active.input,.is-active.pagination-ellipsis,.is-active.pagination-link,.is-active.pagination-next,.is-active.pagination-previous,.is-active.textarea,.is-focused.button,.is-focused.file-cta,.is-focused.file-name,.is-focused.input,.is-focused.pagination-ellipsis,.is-focused.pagination-link,.is-focused.pagination-next,.is-focused.pagination-previous,.is-focused.textarea,.pagination-ellipsis:active,.pagination-ellipsis:focus,.pagination-link:active,.pagination-link:focus,.pagination-next:active,.pagination-next:focus,.pagination-previous:active,.pagination-previous:focus,.select select.is-active,.select select.is-focused,.select select:active,.select select:focus,.textarea:active,.textarea:focus{ outline:0 } .button[disabled],.file-cta[disabled],.file-name[disabled],.input[disabled],.pagination-ellipsis[disabled],.pagination-link[disabled],.pagination-next[disabled],.pagination-previous[disabled],.select fieldset[disabled] select,.select select[disabled],.textarea[disabled],fieldset[disabled] .button,fieldset[disabled] .file-cta,fieldset[disabled] .file-name,fieldset[disabled] .input,fieldset[disabled] .pagination-ellipsis,fieldset[disabled] .pagination-link,fieldset[disabled] .pagination-next,fieldset[disabled] .pagination-previous,fieldset[disabled] .select select,fieldset[disabled] .textarea{ cursor:not-allowed } /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{ margin:0; padding:0 } h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:400 } ul{ list-style:none } button,input,select,textarea{ margin:0 } html{ box-sizing:border-box } *,::after,::before{ box-sizing:inherit } img,video{ height:auto; max-width:100% } iframe{ border:0 } table{ border-collapse:collapse; border-spacing:0 } td,th{ padding:0 } td:not([align]),th:not([align]){ text-align:inherit } html{ background-color:#fff; font-size:16px; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; min-width:300px; overflow-x:hidden; overflow-y:scroll; text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100% } article,aside,figure,footer,header,hgroup,section{ display:block } body,button,input,optgroup,select,textarea{ font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif } code,pre{ -moz-osx-font-smoothing:auto; -webkit-font-smoothing:auto; font-family:monospace } hr{ background-color:#f5f5f5; border:none; display:block; height:2px; margin:1.5rem 0 } img{ height:auto; max-width:100% } input[type=checkbox],input[type=radio]{ vertical-align:baseline } small{ font-size:.875em } span{ font-style:inherit; font-weight:inherit } strong{ color:#363636; font-weight:700 } fieldset{ border:none } pre{ -webkit-overflow-scrolling:touch; background-color:#f5f5f5; color:#4a4a4a; font-size:.875em; overflow-x:auto; padding:1.25rem 1.5rem; white-space:pre; word-wrap:normal } pre code{ background-color:transparent; color:currentColor; font-size:1em; padding:0 } table td,table th{ vertical-align:top } table td:not([align]),table th:not([align]){ text-align:inherit } table th{ color:#363636 } .box{ background-color:#fff; border-radius:6px; box-shadow:0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02); color:#4a4a4a; display:block; padding:1.25rem } a.box:focus,a.box:hover{ box-shadow:0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px #3273dc } a.box:active{ box-shadow:inset 0 1px 2px rgba(10,10,10,.2),0 0 0 1px #3273dc } .button{ background-color:#fff; border-color:#dbdbdb; border-width:1px; color:#363636; cursor:pointer; justify-content:center; padding-bottom:calc(.5em - 1px); padding-left:1em; padding-right:1em; padding-top:calc(.5em - 1px); text-align:center; white-space:nowrap } .button strong{ color:inherit } .button .icon,.button .icon.is-large,.button .icon.is-medium,.button .icon.is-small{ height:1.5em; width:1.5em } .button .icon:first-child:not(:last-child){ margin-left:calc(-.5em - 1px); margin-right:.25em } .button .icon:last-child:not(:first-child){ margin-left:.25em; margin-right:calc(-.5em - 1px) } .button .icon:first-child:last-child{ margin-left:calc(-.5em - 1px); margin-right:calc(-.5em - 1px) } .button.is-hovered,.button:hover{ border-color:#b5b5b5; color:#363636 } .button.is-focused,.button:focus{ border-color:#3273dc; color:#363636 } .button.is-focused:not(:active),.button:focus:not(:active){ box-shadow:0 0 0 .125em rgba(50,115,220,.25) } .button.is-active,.button:active{ border-color:#4a4a4a; color:#363636 } .button.is-text{ background-color:transparent; border-color:transparent; color:#4a4a4a; text-decoration:underline } .button.is-text.is-focused,.button.is-text.is-hovered,.button.is-text:focus,.button.is-text:hover{ background-color:#f5f5f5; color:#363636 } .button.is-text.is-active,.button.is-text:active{ background-color:#e8e8e8; color:#363636 } .button.is-text[disabled],fieldset[disabled] .button.is-text{ background-color:transparent; border-color:transparent; box-shadow:none } .button.is-white{ background-color:#fff; border-color:transparent; color:#0a0a0a } .button.is-white.is-hovered,.button.is-white:hover{ background-color:#f9f9f9; border-color:transparent; color:#0a0a0a } .button.is-white.is-focused,.button.is-white:focus{ border-color:transparent; color:#0a0a0a } .button.is-white.is-focused:not(:active),.button.is-white:focus:not(:active){ box-shadow:0 0 0 .125em rgba(255,255,255,.25) } .button.is-white.is-active,.button.is-white:active{ background-color:#f2f2f2; border-color:transparent; color:#0a0a0a } .button.is-white[disabled],fieldset[disabled] .button.is-white{ background-color:#fff; border-color:transparent; box-shadow:none } .button.is-white.is-inverted{ background-color:#0a0a0a; color:#fff } .button.is-white.is-inverted.is-hovered,.button.is-white.is-inverted:hover{ background-color:#000 } .button.is-white.is-inverted[disabled],fieldset[disabled] .button.is-white.is-inverted{ background-color:#0a0a0a; border-color:transparent; box-shadow:none; color:#fff } .button.is-white.is-loading::after{ border-color:transparent transparent #0a0a0a #0a0a0a!important } .button.is-white.is-outlined{ background-color:transparent; border-color:#fff; color:#fff } .button.is-white.is-outlined.is-focused,.button.is-white.is-outlined.is-hovered,.button.is-white.is-outlined:focus,.button.is-white.is-outlined:hover{ background-color:#fff; border-color:#fff; color:#0a0a0a } .button.is-white.is-outlined.is-loading::after{ border-color:transparent transparent #fff #fff!important } .button.is-white.is-outlined.is-loading.is-focused::after,.button.is-white.is-outlined.is-loading.is-hovered::after,.button.is-white.is-outlined.is-loading:focus::after,.button.is-white.is-outlined.is-loading:hover::after{ border-color:transparent transparent #0a0a0a #0a0a0a!important } .button.is-white.is-outlined[disabled],fieldset[disabled] .button.is-white.is-outlined{ background-color:transparent; border-color:#fff; box-shadow:none; color:#fff } .button.is-white.is-inverted.is-outlined{ background-color:transparent; border-color:#0a0a0a; color:#0a0a0a } .button.is-white.is-inverted.is-outlined.is-focused,.button.is-white.is-inverted.is-outlined.is-hovered,.button.is-white.is-inverted.is-outlined:focus,.button.is-white.is-inverted.is-outlined:hover{ background-color:#0a0a0a; color:#fff } .button.is-white.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-white.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-white.is-inverted.is-outlined.is-loading:focus::after,.button.is-white.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #fff #fff!important } .button.is-white.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-white.is-inverted.is-outlined{ background-color:transparent; border-color:#0a0a0a; box-shadow:none; color:#0a0a0a } .button.is-black{ background-color:#0a0a0a; border-color:transparent; color:#fff } .button.is-black.is-hovered,.button.is-black:hover{ background-color:#040404; border-color:transparent; color:#fff } .button.is-black.is-focused,.button.is-black:focus{ border-color:transparent; color:#fff } .button.is-black.is-focused:not(:active),.button.is-black:focus:not(:active){ box-shadow:0 0 0 .125em rgba(10,10,10,.25) } .button.is-black.is-active,.button.is-black:active{ background-color:#000; border-color:transparent; color:#fff } .button.is-black[disabled],fieldset[disabled] .button.is-black{ background-color:#0a0a0a; border-color:transparent; box-shadow:none } .button.is-black.is-inverted{ background-color:#fff; color:#0a0a0a } .button.is-black.is-inverted.is-hovered,.button.is-black.is-inverted:hover{ background-color:#f2f2f2 } .button.is-black.is-inverted[disabled],fieldset[disabled] .button.is-black.is-inverted{ background-color:#fff; border-color:transparent; box-shadow:none; color:#0a0a0a } .button.is-black.is-loading::after{ border-color:transparent transparent #fff #fff!important } .button.is-black.is-outlined{ background-color:transparent; border-color:#0a0a0a; color:#0a0a0a } .button.is-black.is-outlined.is-focused,.button.is-black.is-outlined.is-hovered,.button.is-black.is-outlined:focus,.button.is-black.is-outlined:hover{ background-color:#0a0a0a; border-color:#0a0a0a; color:#fff } .button.is-black.is-outlined.is-loading::after{ border-color:transparent transparent #0a0a0a #0a0a0a!important } .button.is-black.is-outlined.is-loading.is-focused::after,.button.is-black.is-outlined.is-loading.is-hovered::after,.button.is-black.is-outlined.is-loading:focus::after,.button.is-black.is-outlined.is-loading:hover::after{ border-color:transparent transparent #fff #fff!important } .button.is-black.is-outlined[disabled],fieldset[disabled] .button.is-black.is-outlined{ background-color:transparent; border-color:#0a0a0a; box-shadow:none; color:#0a0a0a } .button.is-black.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; color:#fff } .button.is-black.is-inverted.is-outlined.is-focused,.button.is-black.is-inverted.is-outlined.is-hovered,.button.is-black.is-inverted.is-outlined:focus,.button.is-black.is-inverted.is-outlined:hover{ background-color:#fff; color:#0a0a0a } .button.is-black.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-black.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-black.is-inverted.is-outlined.is-loading:focus::after,.button.is-black.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #0a0a0a #0a0a0a!important } .button.is-black.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-black.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; box-shadow:none; color:#fff } .button.is-light{ background-color:#f5f5f5; border-color:transparent; color:rgba(0,0,0,.7) } .button.is-light.is-hovered,.button.is-light:hover{ background-color:#eee; border-color:transparent; color:rgba(0,0,0,.7) } .button.is-light.is-focused,.button.is-light:focus{ border-color:transparent; color:rgba(0,0,0,.7) } .button.is-light.is-focused:not(:active),.button.is-light:focus:not(:active){ box-shadow:0 0 0 .125em rgba(245,245,245,.25) } .button.is-light.is-active,.button.is-light:active{ background-color:#e8e8e8; border-color:transparent; color:rgba(0,0,0,.7) } .button.is-light[disabled],fieldset[disabled] .button.is-light{ background-color:#f5f5f5; border-color:transparent; box-shadow:none } .button.is-light.is-inverted{ background-color:rgba(0,0,0,.7); color:#f5f5f5 } .button.is-light.is-inverted.is-hovered,.button.is-light.is-inverted:hover{ background-color:rgba(0,0,0,.7) } .button.is-light.is-inverted[disabled],fieldset[disabled] .button.is-light.is-inverted{ background-color:rgba(0,0,0,.7); border-color:transparent; box-shadow:none; color:#f5f5f5 } .button.is-light.is-loading::after{ border-color:transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important } .button.is-light.is-outlined{ background-color:transparent; border-color:#f5f5f5; color:#f5f5f5 } .button.is-light.is-outlined.is-focused,.button.is-light.is-outlined.is-hovered,.button.is-light.is-outlined:focus,.button.is-light.is-outlined:hover{ background-color:#f5f5f5; border-color:#f5f5f5; color:rgba(0,0,0,.7) } .button.is-light.is-outlined.is-loading::after{ border-color:transparent transparent #f5f5f5 #f5f5f5!important } .button.is-light.is-outlined.is-loading.is-focused::after,.button.is-light.is-outlined.is-loading.is-hovered::after,.button.is-light.is-outlined.is-loading:focus::after,.button.is-light.is-outlined.is-loading:hover::after{ border-color:transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important } .button.is-light.is-outlined[disabled],fieldset[disabled] .button.is-light.is-outlined{ background-color:transparent; border-color:#f5f5f5; box-shadow:none; color:#f5f5f5 } .button.is-light.is-inverted.is-outlined{ background-color:transparent; border-color:rgba(0,0,0,.7); color:rgba(0,0,0,.7) } .button.is-light.is-inverted.is-outlined.is-focused,.button.is-light.is-inverted.is-outlined.is-hovered,.button.is-light.is-inverted.is-outlined:focus,.button.is-light.is-inverted.is-outlined:hover{ background-color:rgba(0,0,0,.7); color:#f5f5f5 } .button.is-light.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-light.is-inverted.is-outlined.is-loading:focus::after,.button.is-light.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #f5f5f5 #f5f5f5!important } .button.is-light.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-light.is-inverted.is-outlined{ background-color:transparent; border-color:rgba(0,0,0,.7); box-shadow:none; color:rgba(0,0,0,.7) } .button.is-dark{ background-color:#363636; border-color:transparent; color:#fff } .button.is-dark.is-hovered,.button.is-dark:hover{ background-color:#2f2f2f; border-color:transparent; color:#fff } .button.is-dark.is-focused,.button.is-dark:focus{ border-color:transparent; color:#fff } .button.is-dark.is-focused:not(:active),.button.is-dark:focus:not(:active){ box-shadow:0 0 0 .125em rgba(54,54,54,.25) } .button.is-dark.is-active,.button.is-dark:active{ background-color:#292929; border-color:transparent; color:#fff } .button.is-dark[disabled],fieldset[disabled] .button.is-dark{ background-color:#363636; border-color:transparent; box-shadow:none } .button.is-dark.is-inverted{ background-color:#fff; color:#363636 } .button.is-dark.is-inverted.is-hovered,.button.is-dark.is-inverted:hover{ background-color:#f2f2f2 } .button.is-dark.is-inverted[disabled],fieldset[disabled] .button.is-dark.is-inverted{ background-color:#fff; border-color:transparent; box-shadow:none; color:#363636 } .button.is-dark.is-loading::after{ border-color:transparent transparent #fff #fff!important } .button.is-dark.is-outlined{ background-color:transparent; border-color:#363636; color:#363636 } .button.is-dark.is-outlined.is-focused,.button.is-dark.is-outlined.is-hovered,.button.is-dark.is-outlined:focus,.button.is-dark.is-outlined:hover{ background-color:#363636; border-color:#363636; color:#fff } .button.is-dark.is-outlined.is-loading::after{ border-color:transparent transparent #363636 #363636!important } .button.is-dark.is-outlined.is-loading.is-focused::after,.button.is-dark.is-outlined.is-loading.is-hovered::after,.button.is-dark.is-outlined.is-loading:focus::after,.button.is-dark.is-outlined.is-loading:hover::after{ border-color:transparent transparent #fff #fff!important } .button.is-dark.is-outlined[disabled],fieldset[disabled] .button.is-dark.is-outlined{ background-color:transparent; border-color:#363636; box-shadow:none; color:#363636 } .button.is-dark.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; color:#fff } .button.is-dark.is-inverted.is-outlined.is-focused,.button.is-dark.is-inverted.is-outlined.is-hovered,.button.is-dark.is-inverted.is-outlined:focus,.button.is-dark.is-inverted.is-outlined:hover{ background-color:#fff; color:#363636 } .button.is-dark.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-dark.is-inverted.is-outlined.is-loading:focus::after,.button.is-dark.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #363636 #363636!important } .button.is-dark.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-dark.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; box-shadow:none; color:#fff } .button.is-primary{ background-color:#00d1b2; border-color:transparent; color:#fff } .button.is-primary.is-hovered,.button.is-primary:hover{ background-color:#00c4a7; border-color:transparent; color:#fff } .button.is-primary.is-focused,.button.is-primary:focus{ border-color:transparent; color:#fff } .button.is-primary.is-focused:not(:active),.button.is-primary:focus:not(:active){ box-shadow:0 0 0 .125em rgba(0,209,178,.25) } .button.is-primary.is-active,.button.is-primary:active{ background-color:#00b89c; border-color:transparent; color:#fff } .button.is-primary[disabled],fieldset[disabled] .button.is-primary{ background-color:#00d1b2; border-color:transparent; box-shadow:none } .button.is-primary.is-inverted{ background-color:#fff; color:#00d1b2 } .button.is-primary.is-inverted.is-hovered,.button.is-primary.is-inverted:hover{ background-color:#f2f2f2 } .button.is-primary.is-inverted[disabled],fieldset[disabled] .button.is-primary.is-inverted{ background-color:#fff; border-color:transparent; box-shadow:none; color:#00d1b2 } .button.is-primary.is-loading::after{ border-color:transparent transparent #fff #fff!important } .button.is-primary.is-outlined{ background-color:transparent; border-color:#00d1b2; color:#00d1b2 } .button.is-primary.is-outlined.is-focused,.button.is-primary.is-outlined.is-hovered,.button.is-primary.is-outlined:focus,.button.is-primary.is-outlined:hover{ background-color:#00d1b2; border-color:#00d1b2; color:#fff } .button.is-primary.is-outlined.is-loading::after{ border-color:transparent transparent #00d1b2 #00d1b2!important } .button.is-primary.is-outlined.is-loading.is-focused::after,.button.is-primary.is-outlined.is-loading.is-hovered::after,.button.is-primary.is-outlined.is-loading:focus::after,.button.is-primary.is-outlined.is-loading:hover::after{ border-color:transparent transparent #fff #fff!important } .button.is-primary.is-outlined[disabled],fieldset[disabled] .button.is-primary.is-outlined{ background-color:transparent; border-color:#00d1b2; box-shadow:none; color:#00d1b2 } .button.is-primary.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; color:#fff } .button.is-primary.is-inverted.is-outlined.is-focused,.button.is-primary.is-inverted.is-outlined.is-hovered,.button.is-primary.is-inverted.is-outlined:focus,.button.is-primary.is-inverted.is-outlined:hover{ background-color:#fff; color:#00d1b2 } .button.is-primary.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-primary.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-primary.is-inverted.is-outlined.is-loading:focus::after,.button.is-primary.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #00d1b2 #00d1b2!important } .button.is-primary.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-primary.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; box-shadow:none; color:#fff } .button.is-primary.is-light{ background-color:#ebfffc; color:#00947e } .button.is-primary.is-light.is-hovered,.button.is-primary.is-light:hover{ background-color:#defffa; border-color:transparent; color:#00947e } .button.is-primary.is-light.is-active,.button.is-primary.is-light:active{ background-color:#d1fff8; border-color:transparent; color:#00947e } .button.is-link{ background-color:#3273dc; border-color:transparent; color:#fff } .button.is-link.is-hovered,.button.is-link:hover{ background-color:#276cda; border-color:transparent; color:#fff } .button.is-link.is-focused,.button.is-link:focus{ border-color:transparent; color:#fff } .button.is-link.is-focused:not(:active),.button.is-link:focus:not(:active){ box-shadow:0 0 0 .125em rgba(50,115,220,.25) } .button.is-link.is-active,.button.is-link:active{ background-color:#2366d1; border-color:transparent; color:#fff } .button.is-link[disabled],fieldset[disabled] .button.is-link{ background-color:#3273dc; border-color:transparent; box-shadow:none } .button.is-link.is-inverted{ background-color:#fff; color:#3273dc } .button.is-link.is-inverted.is-hovered,.button.is-link.is-inverted:hover{ background-color:#f2f2f2 } .button.is-link.is-inverted[disabled],fieldset[disabled] .button.is-link.is-inverted{ background-color:#fff; border-color:transparent; box-shadow:none; color:#3273dc } .button.is-link.is-loading::after{ border-color:transparent transparent #fff #fff!important } .button.is-link.is-outlined{ background-color:transparent; border-color:#3273dc; color:#3273dc } .button.is-link.is-outlined.is-focused,.button.is-link.is-outlined.is-hovered,.button.is-link.is-outlined:focus,.button.is-link.is-outlined:hover{ background-color:#3273dc; border-color:#3273dc; color:#fff } .button.is-link.is-outlined.is-loading::after{ border-color:transparent transparent #3273dc #3273dc!important } .button.is-link.is-outlined.is-loading.is-focused::after,.button.is-link.is-outlined.is-loading.is-hovered::after,.button.is-link.is-outlined.is-loading:focus::after,.button.is-link.is-outlined.is-loading:hover::after{ border-color:transparent transparent #fff #fff!important } .button.is-link.is-outlined[disabled],fieldset[disabled] .button.is-link.is-outlined{ background-color:transparent; border-color:#3273dc; box-shadow:none; color:#3273dc } .button.is-link.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; color:#fff } .button.is-link.is-inverted.is-outlined.is-focused,.button.is-link.is-inverted.is-outlined.is-hovered,.button.is-link.is-inverted.is-outlined:focus,.button.is-link.is-inverted.is-outlined:hover{ background-color:#fff; color:#3273dc } .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-link.is-inverted.is-outlined.is-loading:focus::after,.button.is-link.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #3273dc #3273dc!important } .button.is-link.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-link.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; box-shadow:none; color:#fff } .button.is-link.is-light{ background-color:#eef3fc; color:#2160c4 } .button.is-link.is-light.is-hovered,.button.is-link.is-light:hover{ background-color:#e3ecfa; border-color:transparent; color:#2160c4 } .button.is-link.is-light.is-active,.button.is-link.is-light:active{ background-color:#d8e4f8; border-color:transparent; color:#2160c4 } .button.is-info{ background-color:#3298dc; border-color:transparent; color:#fff } .button.is-info.is-hovered,.button.is-info:hover{ background-color:#2793da; border-color:transparent; color:#fff } .button.is-info.is-focused,.button.is-info:focus{ border-color:transparent; color:#fff } .button.is-info.is-focused:not(:active),.button.is-info:focus:not(:active){ box-shadow:0 0 0 .125em rgba(50,152,220,.25) } .button.is-info.is-active,.button.is-info:active{ background-color:#238cd1; border-color:transparent; color:#fff } .button.is-info[disabled],fieldset[disabled] .button.is-info{ background-color:#3298dc; border-color:transparent; box-shadow:none } .button.is-info.is-inverted{ background-color:#fff; color:#3298dc } .button.is-info.is-inverted.is-hovered,.button.is-info.is-inverted:hover{ background-color:#f2f2f2 } .button.is-info.is-inverted[disabled],fieldset[disabled] .button.is-info.is-inverted{ background-color:#fff; border-color:transparent; box-shadow:none; color:#3298dc } .button.is-info.is-loading::after{ border-color:transparent transparent #fff #fff!important } .button.is-info.is-outlined{ background-color:transparent; border-color:#3298dc; color:#3298dc } .button.is-info.is-outlined.is-focused,.button.is-info.is-outlined.is-hovered,.button.is-info.is-outlined:focus,.button.is-info.is-outlined:hover{ background-color:#3298dc; border-color:#3298dc; color:#fff } .button.is-info.is-outlined.is-loading::after{ border-color:transparent transparent #3298dc #3298dc!important } .button.is-info.is-outlined.is-loading.is-focused::after,.button.is-info.is-outlined.is-loading.is-hovered::after,.button.is-info.is-outlined.is-loading:focus::after,.button.is-info.is-outlined.is-loading:hover::after{ border-color:transparent transparent #fff #fff!important } .button.is-info.is-outlined[disabled],fieldset[disabled] .button.is-info.is-outlined{ background-color:transparent; border-color:#3298dc; box-shadow:none; color:#3298dc } .button.is-info.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; color:#fff } .button.is-info.is-inverted.is-outlined.is-focused,.button.is-info.is-inverted.is-outlined.is-hovered,.button.is-info.is-inverted.is-outlined:focus,.button.is-info.is-inverted.is-outlined:hover{ background-color:#fff; color:#3298dc } .button.is-info.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-info.is-inverted.is-outlined.is-loading:focus::after,.button.is-info.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #3298dc #3298dc!important } .button.is-info.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-info.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; box-shadow:none; color:#fff } .button.is-info.is-light{ background-color:#eef6fc; color:#1d72aa } .button.is-info.is-light.is-hovered,.button.is-info.is-light:hover{ background-color:#e3f1fa; border-color:transparent; color:#1d72aa } .button.is-info.is-light.is-active,.button.is-info.is-light:active{ background-color:#d8ebf8; border-color:transparent; color:#1d72aa } .button.is-success{ background-color:#48c774; border-color:transparent; color:#fff } .button.is-success.is-hovered,.button.is-success:hover{ background-color:#3ec46d; border-color:transparent; color:#fff } .button.is-success.is-focused,.button.is-success:focus{ border-color:transparent; color:#fff } .button.is-success.is-focused:not(:active),.button.is-success:focus:not(:active){ box-shadow:0 0 0 .125em rgba(72,199,116,.25) } .button.is-success.is-active,.button.is-success:active{ background-color:#3abb67; border-color:transparent; color:#fff } .button.is-success[disabled],fieldset[disabled] .button.is-success{ background-color:#48c774; border-color:transparent; box-shadow:none } .button.is-success.is-inverted{ background-color:#fff; color:#48c774 } .button.is-success.is-inverted.is-hovered,.button.is-success.is-inverted:hover{ background-color:#f2f2f2 } .button.is-success.is-inverted[disabled],fieldset[disabled] .button.is-success.is-inverted{ background-color:#fff; border-color:transparent; box-shadow:none; color:#48c774 } .button.is-success.is-loading::after{ border-color:transparent transparent #fff #fff!important } .button.is-success.is-outlined{ background-color:transparent; border-color:#48c774; color:#48c774 } .button.is-success.is-outlined.is-focused,.button.is-success.is-outlined.is-hovered,.button.is-success.is-outlined:focus,.button.is-success.is-outlined:hover{ background-color:#48c774; border-color:#48c774; color:#fff } .button.is-success.is-outlined.is-loading::after{ border-color:transparent transparent #48c774 #48c774!important } .button.is-success.is-outlined.is-loading.is-focused::after,.button.is-success.is-outlined.is-loading.is-hovered::after,.button.is-success.is-outlined.is-loading:focus::after,.button.is-success.is-outlined.is-loading:hover::after{ border-color:transparent transparent #fff #fff!important } .button.is-success.is-outlined[disabled],fieldset[disabled] .button.is-success.is-outlined{ background-color:transparent; border-color:#48c774; box-shadow:none; color:#48c774 } .button.is-success.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; color:#fff } .button.is-success.is-inverted.is-outlined.is-focused,.button.is-success.is-inverted.is-outlined.is-hovered,.button.is-success.is-inverted.is-outlined:focus,.button.is-success.is-inverted.is-outlined:hover{ background-color:#fff; color:#48c774 } .button.is-success.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-success.is-inverted.is-outlined.is-loading:focus::after,.button.is-success.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #48c774 #48c774!important } .button.is-success.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-success.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; box-shadow:none; color:#fff } .button.is-success.is-light{ background-color:#effaf3; color:#257942 } .button.is-success.is-light.is-hovered,.button.is-success.is-light:hover{ background-color:#e6f7ec; border-color:transparent; color:#257942 } .button.is-success.is-light.is-active,.button.is-success.is-light:active{ background-color:#dcf4e4; border-color:transparent; color:#257942 } .button.is-warning{ background-color:#ffdd57; border-color:transparent; color:rgba(0,0,0,.7) } .button.is-warning.is-hovered,.button.is-warning:hover{ background-color:#ffdb4a; border-color:transparent; color:rgba(0,0,0,.7) } .button.is-warning.is-focused,.button.is-warning:focus{ border-color:transparent; color:rgba(0,0,0,.7) } .button.is-warning.is-focused:not(:active),.button.is-warning:focus:not(:active){ box-shadow:0 0 0 .125em rgba(255,221,87,.25) } .button.is-warning.is-active,.button.is-warning:active{ background-color:#ffd83d; border-color:transparent; color:rgba(0,0,0,.7) } .button.is-warning[disabled],fieldset[disabled] .button.is-warning{ background-color:#ffdd57; border-color:transparent; box-shadow:none } .button.is-warning.is-inverted{ background-color:rgba(0,0,0,.7); color:#ffdd57 } .button.is-warning.is-inverted.is-hovered,.button.is-warning.is-inverted:hover{ background-color:rgba(0,0,0,.7) } .button.is-warning.is-inverted[disabled],fieldset[disabled] .button.is-warning.is-inverted{ background-color:rgba(0,0,0,.7); border-color:transparent; box-shadow:none; color:#ffdd57 } .button.is-warning.is-loading::after{ border-color:transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important } .button.is-warning.is-outlined{ background-color:transparent; border-color:#ffdd57; color:#ffdd57 } .button.is-warning.is-outlined.is-focused,.button.is-warning.is-outlined.is-hovered,.button.is-warning.is-outlined:focus,.button.is-warning.is-outlined:hover{ background-color:#ffdd57; border-color:#ffdd57; color:rgba(0,0,0,.7) } .button.is-warning.is-outlined.is-loading::after{ border-color:transparent transparent #ffdd57 #ffdd57!important } .button.is-warning.is-outlined.is-loading.is-focused::after,.button.is-warning.is-outlined.is-loading.is-hovered::after,.button.is-warning.is-outlined.is-loading:focus::after,.button.is-warning.is-outlined.is-loading:hover::after{ border-color:transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important } .button.is-warning.is-outlined[disabled],fieldset[disabled] .button.is-warning.is-outlined{ background-color:transparent; border-color:#ffdd57; box-shadow:none; color:#ffdd57 } .button.is-warning.is-inverted.is-outlined{ background-color:transparent; border-color:rgba(0,0,0,.7); color:rgba(0,0,0,.7) } .button.is-warning.is-inverted.is-outlined.is-focused,.button.is-warning.is-inverted.is-outlined.is-hovered,.button.is-warning.is-inverted.is-outlined:focus,.button.is-warning.is-inverted.is-outlined:hover{ background-color:rgba(0,0,0,.7); color:#ffdd57 } .button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-warning.is-inverted.is-outlined.is-loading:focus::after,.button.is-warning.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #ffdd57 #ffdd57!important } .button.is-warning.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-warning.is-inverted.is-outlined{ background-color:transparent; border-color:rgba(0,0,0,.7); box-shadow:none; color:rgba(0,0,0,.7) } .button.is-warning.is-light{ background-color:#fffbeb; color:#947600 } .button.is-warning.is-light.is-hovered,.button.is-warning.is-light:hover{ background-color:#fff8de; border-color:transparent; color:#947600 } .button.is-warning.is-light.is-active,.button.is-warning.is-light:active{ background-color:#fff6d1; border-color:transparent; color:#947600 } .button.is-danger{ background-color:#f14668; border-color:transparent; color:#fff } .button.is-danger.is-hovered,.button.is-danger:hover{ background-color:#f03a5f; border-color:transparent; color:#fff } .button.is-danger.is-focused,.button.is-danger:focus{ border-color:transparent; color:#fff } .button.is-danger.is-focused:not(:active),.button.is-danger:focus:not(:active){ box-shadow:0 0 0 .125em rgba(241,70,104,.25) } .button.is-danger.is-active,.button.is-danger:active{ background-color:#ef2e55; border-color:transparent; color:#fff } .button.is-danger[disabled],fieldset[disabled] .button.is-danger{ background-color:#f14668; border-color:transparent; box-shadow:none } .button.is-danger.is-inverted{ background-color:#fff; color:#f14668 } .button.is-danger.is-inverted.is-hovered,.button.is-danger.is-inverted:hover{ background-color:#f2f2f2 } .button.is-danger.is-inverted[disabled],fieldset[disabled] .button.is-danger.is-inverted{ background-color:#fff; border-color:transparent; box-shadow:none; color:#f14668 } .button.is-danger.is-loading::after{ border-color:transparent transparent #fff #fff!important } .button.is-danger.is-outlined{ background-color:transparent; border-color:#f14668; color:#f14668 } .button.is-danger.is-outlined.is-focused,.button.is-danger.is-outlined.is-hovered,.button.is-danger.is-outlined:focus,.button.is-danger.is-outlined:hover{ background-color:#f14668; border-color:#f14668; color:#fff } .button.is-danger.is-outlined.is-loading::after{ border-color:transparent transparent #f14668 #f14668!important } .button.is-danger.is-outlined.is-loading.is-focused::after,.button.is-danger.is-outlined.is-loading.is-hovered::after,.button.is-danger.is-outlined.is-loading:focus::after,.button.is-danger.is-outlined.is-loading:hover::after{ border-color:transparent transparent #fff #fff!important } .button.is-danger.is-outlined[disabled],fieldset[disabled] .button.is-danger.is-outlined{ background-color:transparent; border-color:#f14668; box-shadow:none; color:#f14668 } .button.is-danger.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; color:#fff } .button.is-danger.is-inverted.is-outlined.is-focused,.button.is-danger.is-inverted.is-outlined.is-hovered,.button.is-danger.is-inverted.is-outlined:focus,.button.is-danger.is-inverted.is-outlined:hover{ background-color:#fff; color:#f14668 } .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-danger.is-inverted.is-outlined.is-loading:focus::after,.button.is-danger.is-inverted.is-outlined.is-loading:hover::after{ border-color:transparent transparent #f14668 #f14668!important } .button.is-danger.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-danger.is-inverted.is-outlined{ background-color:transparent; border-color:#fff; box-shadow:none; color:#fff } .button.is-danger.is-light{ background-color:#feecf0; color:#cc0f35 } .button.is-danger.is-light.is-hovered,.button.is-danger.is-light:hover{ background-color:#fde0e6; border-color:transparent; color:#cc0f35 } .button.is-danger.is-light.is-active,.button.is-danger.is-light:active{ background-color:#fcd4dc; border-color:transparent; color:#cc0f35 } .button.is-small{ border-radius:2px; font-size:.75rem } .button.is-normal{ font-size:1rem } .button.is-medium{ font-size:1.25rem } .button.is-large{ font-size:1.5rem } .button[disabled],fieldset[disabled] .button{ background-color:#fff; border-color:#dbdbdb; box-shadow:none; opacity:.5 } .button.is-fullwidth{ display:flex; width:100% } .button.is-loading{ color:transparent!important; pointer-events:none } .button.is-loading::after{ position:absolute; left:calc(50% - (1em / 2)); top:calc(50% - (1em / 2)); position:absolute!important } .button.is-static{ background-color:#f5f5f5; border-color:#dbdbdb; color:#7a7a7a; box-shadow:none; pointer-events:none } .button.is-rounded{ border-radius:290486px; padding-left:calc(1em + .25em); padding-right:calc(1em + .25em) } .buttons{ align-items:center; display:flex; flex-wrap:wrap; justify-content:flex-start } .buttons .button{ margin-bottom:.5rem } .buttons .button:not(:last-child):not(.is-fullwidth){ margin-right:.5rem } .buttons:last-child{ margin-bottom:-.5rem } .buttons:not(:last-child){ margin-bottom:1rem } .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large){ border-radius:2px; font-size:.75rem } .buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large){ font-size:1.25rem } .buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium){ font-size:1.5rem } .buttons.has-addons .button:not(:first-child){ border-bottom-left-radius:0; border-top-left-radius:0 } .buttons.has-addons .button:not(:last-child){ border-bottom-right-radius:0; border-top-right-radius:0; margin-right:-1px } .buttons.has-addons .button:last-child{ margin-right:0 } .buttons.has-addons .button.is-hovered,.buttons.has-addons .button:hover{ z-index:2 } .buttons.has-addons .button.is-active,.buttons.has-addons .button.is-focused,.buttons.has-addons .button.is-selected,.buttons.has-addons .button:active,.buttons.has-addons .button:focus{ z-index:3 } .buttons.has-addons .button.is-active:hover,.buttons.has-addons .button.is-focused:hover,.buttons.has-addons .button.is-selected:hover,.buttons.has-addons .button:active:hover,.buttons.has-addons .button:focus:hover{ z-index:4 } .buttons.has-addons .button.is-expanded{ flex-grow:1; flex-shrink:1 } .buttons.is-centered{ justify-content:center } .buttons.is-centered:not(.has-addons) .button:not(.is-fullwidth){ margin-left:.25rem; margin-right:.25rem } .buttons.is-right{ justify-content:flex-end } .buttons.is-right:not(.has-addons) .button:not(.is-fullwidth){ margin-left:.25rem; margin-right:.25rem } .container{ flex-grow:1; margin:0 auto; position:relative; width:auto } .container.is-fluid{ max-width:none!important; padding-left:32px; padding-right:32px; width:100% } @media screen and (min-width:1024px){ .container{ max-width:960px } } @media screen and (max-width:1215px){ .container.is-widescreen:not(.is-max-desktop){ max-width:1152px } } @media screen and (max-width:1407px){ .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen){ max-width:1344px } } @media screen and (min-width:1216px){ .container:not(.is-max-desktop){ max-width:1152px } } @media screen and (min-width:1408px){ .container:not(.is-max-desktop):not(.is-max-widescreen){ max-width:1344px } } .content li+li{ margin-top:.25em } .content blockquote:not(:last-child),.content dl:not(:last-child),.content ol:not(:last-child),.content p:not(:last-child),.content pre:not(:last-child),.content table:not(:last-child),.content ul:not(:last-child){ margin-bottom:1em } .content h1,.content h2,.content h3,.content h4,.content h5,.content h6{ color:#363636; font-weight:600; line-height:1.125 } .content h1{ font-size:2em; margin-bottom:.5em } .content h1:not(:first-child){ margin-top:1em } .content h2{ font-size:1.75em; margin-bottom:.5714em } .content h2:not(:first-child){ margin-top:1.1428em } .content h3{ font-size:1.5em; margin-bottom:.6666em } .content h3:not(:first-child){ margin-top:1.3333em } .content h4{ font-size:1.25em; margin-bottom:.8em } .content h5{ font-size:1.125em; margin-bottom:.8888em } .content h6{ font-size:1em; margin-bottom:1em } .content blockquote{ background-color:#f5f5f5; border-left:5px solid #dbdbdb; padding:1.25em 1.5em } .content ol{ list-style-position:outside; margin-left:2em; margin-top:1em } .content ol:not([type]){ list-style-type:decimal } .content ol:not([type]).is-lower-alpha{ list-style-type:lower-alpha } .content ol:not([type]).is-lower-roman{ list-style-type:lower-roman } .content ol:not([type]).is-upper-alpha{ list-style-type:upper-alpha } .content ol:not([type]).is-upper-roman{ list-style-type:upper-roman } .content ul{ list-style:disc outside; margin-left:2em; margin-top:1em } .content ul ul{ list-style-type:circle; margin-top:.5em } .content ul ul ul{ list-style-type:square } .content dd{ margin-left:2em } .content figure{ margin-left:2em; margin-right:2em; text-align:center } .content figure:not(:first-child){ margin-top:2em } .content figure:not(:last-child){ margin-bottom:2em } .content figure img{ display:inline-block } .content figure figcaption{ font-style:italic } .content pre{ -webkit-overflow-scrolling:touch; overflow-x:auto; padding:1.25em 1.5em; white-space:pre; word-wrap:normal } .content sub,.content sup{ font-size:75% } .content table{ width:100% } .content table td,.content table th{ border:1px solid #dbdbdb; border-width:0 0 1px; padding:.5em .75em; vertical-align:top } .content table th{ color:#363636 } .content table th:not([align]){ text-align:inherit } .content table thead td,.content table thead th{ border-width:0 0 2px; color:#363636 } .content table tfoot td,.content table tfoot th{ border-width:2px 0 0; color:#363636 } .content table tbody tr:last-child td,.content table tbody tr:last-child th{ border-bottom-width:0 } .content .tabs li+li{ margin-top:0 } .content.is-small{ font-size:.75rem } .content.is-medium{ font-size:1.25rem } .content.is-large{ font-size:1.5rem } .icon{ align-items:center; display:inline-flex; justify-content:center; height:1.5rem; width:1.5rem } .icon.is-small{ height:1rem; width:1rem } .icon.is-medium{ height:2rem; width:2rem } .icon.is-large{ height:3rem; width:3rem } .image{ display:block; position:relative } .image img{ display:block; height:auto; width:100% } .image img.is-rounded{ border-radius:290486px } .image.is-fullwidth{ width:100% } .image.is-16by9 .has-ratio,.image.is-16by9 img,.image.is-1by1 .has-ratio,.image.is-1by1 img,.image.is-1by2 .has-ratio,.image.is-1by2 img,.image.is-1by3 .has-ratio,.image.is-1by3 img,.image.is-2by1 .has-ratio,.image.is-2by1 img,.image.is-2by3 .has-ratio,.image.is-2by3 img,.image.is-3by1 .has-ratio,.image.is-3by1 img,.image.is-3by2 .has-ratio,.image.is-3by2 img,.image.is-3by4 .has-ratio,.image.is-3by4 img,.image.is-3by5 .has-ratio,.image.is-3by5 img,.image.is-4by3 .has-ratio,.image.is-4by3 img,.image.is-4by5 .has-ratio,.image.is-4by5 img,.image.is-5by3 .has-ratio,.image.is-5by3 img,.image.is-5by4 .has-ratio,.image.is-5by4 img,.image.is-9by16 .has-ratio,.image.is-9by16 img,.image.is-square .has-ratio,.image.is-square img{ height:100%; width:100% } .image.is-1by1,.image.is-square{ padding-top:100% } .image.is-5by4{ padding-top:80% } .image.is-4by3{ padding-top:75% } .image.is-3by2{ padding-top:66.6666% } .image.is-5by3{ padding-top:60% } .image.is-16by9{ padding-top:56.25% } .image.is-2by1{ padding-top:50% } .image.is-3by1{ padding-top:33.3333% } .image.is-4by5{ padding-top:125% } .image.is-3by4{ padding-top:133.3333% } .image.is-2by3{ padding-top:150% } .image.is-3by5{ padding-top:166.6666% } .image.is-9by16{ padding-top:177.7777% } .image.is-1by2{ padding-top:200% } .image.is-1by3{ padding-top:300% } .image.is-16x16{ height:16px; width:16px } .image.is-24x24{ height:24px; width:24px } .image.is-32x32{ height:32px; width:32px } .image.is-48x48{ height:48px; width:48px } .image.is-64x64{ height:64px; width:64px } .image.is-96x96{ height:96px; width:96px } .image.is-128x128{ height:128px; width:128px } .notification{ background-color:#f5f5f5; border-radius:4px; position:relative; padding:1.25rem 2.5rem 1.25rem 1.5rem } .notification a:not(.button):not(.dropdown-item){ color:currentColor; text-decoration:underline } .notification strong{ color:currentColor } .notification code,.notification pre{ background:#fff } .notification pre code{ background:0 0 } .notification>.delete{ right:.5rem; position:absolute; top:.5rem } .notification .content,.notification .subtitle,.notification .title{ color:currentColor } .notification.is-white{ background-color:#fff; color:#0a0a0a } .notification.is-black{ background-color:#0a0a0a; color:#fff } .notification.is-light{ background-color:#f5f5f5; color:rgba(0,0,0,.7) } .notification.is-dark{ background-color:#363636; color:#fff } .notification.is-primary{ background-color:#00d1b2; color:#fff } .notification.is-primary.is-light{ background-color:#ebfffc; color:#00947e } .notification.is-link{ background-color:#3273dc; color:#fff } .notification.is-link.is-light{ background-color:#eef3fc; color:#2160c4 } .notification.is-info{ background-color:#3298dc; color:#fff } .notification.is-info.is-light{ background-color:#eef6fc; color:#1d72aa } .notification.is-success{ background-color:#48c774; color:#fff } .notification.is-success.is-light{ background-color:#effaf3; color:#257942 } .notification.is-warning{ background-color:#ffdd57; color:rgba(0,0,0,.7) } .notification.is-warning.is-light{ background-color:#fffbeb; color:#947600 } .notification.is-danger{ background-color:#f14668; color:#fff } .notification.is-danger.is-light{ background-color:#feecf0; color:#cc0f35 } .progress{ -moz-appearance:none; -webkit-appearance:none; border:none; border-radius:290486px; display:block; height:1rem; overflow:hidden; padding:0; width:100% } .progress::-webkit-progress-bar{ background-color:#ededed } .progress::-webkit-progress-value{ background-color:#4a4a4a } .progress::-moz-progress-bar{ background-color:#4a4a4a } .progress::-ms-fill{ background-color:#4a4a4a; border:none } .progress.is-white::-webkit-progress-value{ background-color:#fff } .progress.is-white::-moz-progress-bar{ background-color:#fff } .progress.is-white::-ms-fill{ background-color:#fff } .progress.is-white:indeterminate{ background-image:linear-gradient(to right,#fff 30%,#ededed 30%) } .progress.is-black::-webkit-progress-value{ background-color:#0a0a0a } .progress.is-black::-moz-progress-bar{ background-color:#0a0a0a } .progress.is-black::-ms-fill{ background-color:#0a0a0a } .progress.is-black:indeterminate{ background-image:linear-gradient(to right,#0a0a0a 30%,#ededed 30%) } .progress.is-light::-webkit-progress-value{ background-color:#f5f5f5 } .progress.is-light::-moz-progress-bar{ background-color:#f5f5f5 } .progress.is-light::-ms-fill{ background-color:#f5f5f5 } .progress.is-light:indeterminate{ background-image:linear-gradient(to right,#f5f5f5 30%,#ededed 30%) } .progress.is-dark::-webkit-progress-value{ background-color:#363636 } .progress.is-dark::-moz-progress-bar{ background-color:#363636 } .progress.is-dark::-ms-fill{ background-color:#363636 } .progress.is-dark:indeterminate{ background-image:linear-gradient(to right,#363636 30%,#ededed 30%) } .progress.is-primary::-webkit-progress-value{ background-color:#00d1b2 } .progress.is-primary::-moz-progress-bar{ background-color:#00d1b2 } .progress.is-primary::-ms-fill{ background-color:#00d1b2 } .progress.is-primary:indeterminate{ background-image:linear-gradient(to right,#00d1b2 30%,#ededed 30%) } .progress.is-link::-webkit-progress-value{ background-color:#3273dc } .progress.is-link::-moz-progress-bar{ background-color:#3273dc } .progress.is-link::-ms-fill{ background-color:#3273dc } .progress.is-link:indeterminate{ background-image:linear-gradient(to right,#3273dc 30%,#ededed 30%) } .progress.is-info::-webkit-progress-value{ background-color:#3298dc } .progress.is-info::-moz-progress-bar{ background-color:#3298dc } .progress.is-info::-ms-fill{ background-color:#3298dc } .progress.is-info:indeterminate{ background-image:linear-gradient(to right,#3298dc 30%,#ededed 30%) } .progress.is-success::-webkit-progress-value{ background-color:#48c774 } .progress.is-success::-moz-progress-bar{ background-color:#48c774 } .progress.is-success::-ms-fill{ background-color:#48c774 } .progress.is-success:indeterminate{ background-image:linear-gradient(to right,#48c774 30%,#ededed 30%) } .progress.is-warning::-webkit-progress-value{ background-color:#ffdd57 } .progress.is-warning::-moz-progress-bar{ background-color:#ffdd57 } .progress.is-warning::-ms-fill{ background-color:#ffdd57 } .progress.is-warning:indeterminate{ background-image:linear-gradient(to right,#ffdd57 30%,#ededed 30%) } .progress.is-danger::-webkit-progress-value{ background-color:#f14668 } .progress.is-danger::-moz-progress-bar{ background-color:#f14668 } .progress.is-danger::-ms-fill{ background-color:#f14668 } .progress.is-danger:indeterminate{ background-image:linear-gradient(to right,#f14668 30%,#ededed 30%) } .progress:indeterminate{ -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-name:moveIndeterminate; animation-name:moveIndeterminate; -webkit-animation-timing-function:linear; animation-timing-function:linear; background-color:#ededed; background-image:linear-gradient(to right,#4a4a4a 30%,#ededed 30%); background-position:top left; background-repeat:no-repeat; background-size:150% 150% } .progress:indeterminate::-webkit-progress-bar{ background-color:transparent } .progress:indeterminate::-moz-progress-bar{ background-color:transparent } .progress:indeterminate::-ms-fill{ animation-name:none } .progress.is-small{ height:.75rem } .progress.is-medium{ height:1.25rem } .progress.is-large{ height:1.5rem } @-webkit-keyframes moveIndeterminate{ from{ background-position:200% 0 } to{ background-position:-200% 0 } } @keyframes moveIndeterminate{ from{ background-position:200% 0 } to{ background-position:-200% 0 } } .table{ background-color:#fff; color:#363636 } .table td,.table th{ border:1px solid #dbdbdb; border-width:0 0 1px; padding:.5em .75em; vertical-align:top } .table td.is-white,.table th.is-white{ background-color:#fff; border-color:#fff; color:#0a0a0a } .table td.is-black,.table th.is-black{ background-color:#0a0a0a; border-color:#0a0a0a; color:#fff } .table td.is-light,.table th.is-light{ background-color:#f5f5f5; border-color:#f5f5f5; color:rgba(0,0,0,.7) } .table td.is-dark,.table th.is-dark{ background-color:#363636; border-color:#363636; color:#fff } .table td.is-primary,.table th.is-primary{ background-color:#00d1b2; border-color:#00d1b2; color:#fff } .table td.is-link,.table th.is-link{ background-color:#3273dc; border-color:#3273dc; color:#fff } .table td.is-info,.table th.is-info{ background-color:#3298dc; border-color:#3298dc; color:#fff } .table td.is-success,.table th.is-success{ background-color:#48c774; border-color:#48c774; color:#fff } .table td.is-warning,.table th.is-warning{ background-color:#ffdd57; border-color:#ffdd57; color:rgba(0,0,0,.7) } .table td.is-danger,.table th.is-danger{ background-color:#f14668; border-color:#f14668; color:#fff } .table td.is-narrow,.table th.is-narrow{ white-space:nowrap; width:1% } .table td.is-selected,.table th.is-selected{ background-color:#00d1b2; color:#fff } .table td.is-selected a,.table td.is-selected strong,.table th.is-selected a,.table th.is-selected strong{ color:currentColor } .table td.is-vcentered,.table th.is-vcentered{ vertical-align:middle } .table th{ color:#363636 } .table th:not([align]){ text-align:inherit } .table tr.is-selected{ background-color:#00d1b2; color:#fff } .table tr.is-selected a,.table tr.is-selected strong{ color:currentColor } .table tr.is-selected td,.table tr.is-selected th{ border-color:#fff; color:currentColor } .table thead{ background-color:transparent } .table thead td,.table thead th{ border-width:0 0 2px; color:#363636 } .table tfoot{ background-color:transparent } .table tfoot td,.table tfoot th{ border-width:2px 0 0; color:#363636 } .table tbody{ background-color:transparent } .table tbody tr:last-child td,.table tbody tr:last-child th{ border-bottom-width:0 } .table.is-bordered td,.table.is-bordered th{ border-width:1px } .table.is-bordered tr:last-child td,.table.is-bordered tr:last-child th{ border-bottom-width:1px } .table.is-fullwidth{ width:100% } .table.is-hoverable tbody tr:not(.is-selected):hover{ background-color:#fafafa } .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover{ background-color:#fafafa } .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even){ background-color:#f5f5f5 } .table.is-narrow td,.table.is-narrow th{ padding:.25em .5em } .table.is-striped tbody tr:not(.is-selected):nth-child(even){ background-color:#fafafa } .table-container{ -webkit-overflow-scrolling:touch; overflow:auto; overflow-y:hidden; max-width:100% } .tags{ align-items:center; display:flex; flex-wrap:wrap; justify-content:flex-start } .tags .tag{ margin-bottom:.5rem } .tags .tag:not(:last-child){ margin-right:.5rem } .tags:last-child{ margin-bottom:-.5rem } .tags:not(:last-child){ margin-bottom:1rem } .tags.are-medium .tag:not(.is-normal):not(.is-large){ font-size:1rem } .tags.are-large .tag:not(.is-normal):not(.is-medium){ font-size:1.25rem } .tags.is-centered{ justify-content:center } .tags.is-centered .tag{ margin-right:.25rem; margin-left:.25rem } .tags.is-right{ justify-content:flex-end } .tags.is-right .tag:not(:first-child){ margin-left:.5rem } .tags.is-right .tag:not(:last-child){ margin-right:0 } .tags.has-addons .tag{ margin-right:0 } .tags.has-addons .tag:not(:first-child){ margin-left:0; border-top-left-radius:0; border-bottom-left-radius:0 } .tags.has-addons .tag:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0 } .tag:not(body){ align-items:center; background-color:#f5f5f5; border-radius:4px; color:#4a4a4a; display:inline-flex; font-size:.75rem; height:2em; justify-content:center; line-height:1.5; padding-left:.75em; padding-right:.75em; white-space:nowrap } .tag:not(body) .delete{ margin-left:.25rem; margin-right:-.375rem } .tag:not(body).is-white{ background-color:#fff; color:#0a0a0a } .tag:not(body).is-black{ background-color:#0a0a0a; color:#fff } .tag:not(body).is-light{ background-color:#f5f5f5; color:rgba(0,0,0,.7) } .tag:not(body).is-dark{ background-color:#363636; color:#fff } .tag:not(body).is-primary{ background-color:#00d1b2; color:#fff } .tag:not(body).is-primary.is-light{ background-color:#ebfffc; color:#00947e } .tag:not(body).is-link{ background-color:#3273dc; color:#fff } .tag:not(body).is-link.is-light{ background-color:#eef3fc; color:#2160c4 } .tag:not(body).is-info{ background-color:#3298dc; color:#fff } .tag:not(body).is-info.is-light{ background-color:#eef6fc; color:#1d72aa } .tag:not(body).is-success{ background-color:#48c774; color:#fff } .tag:not(body).is-success.is-light{ background-color:#effaf3; color:#257942 } .tag:not(body).is-warning{ background-color:#ffdd57; color:rgba(0,0,0,.7) } .tag:not(body).is-warning.is-light{ background-color:#fffbeb; color:#947600 } .tag:not(body).is-danger{ background-color:#f14668; color:#fff } .tag:not(body).is-danger.is-light{ background-color:#feecf0; color:#cc0f35 } .tag:not(body).is-normal{ font-size:.75rem } .tag:not(body).is-medium{ font-size:1rem } .tag:not(body).is-large{ font-size:1.25rem } .tag:not(body) .icon:first-child:not(:last-child){ margin-left:-.375em; margin-right:.1875em } .tag:not(body) .icon:last-child:not(:first-child){ margin-left:.1875em; margin-right:-.375em } .tag:not(body) .icon:first-child:last-child{ margin-left:-.375em; margin-right:-.375em } .tag:not(body).is-delete{ margin-left:1px; padding:0; position:relative; width:2em } .tag:not(body).is-delete::after,.tag:not(body).is-delete::before{ background-color:currentColor; content:""; display:block; left:50%; position:absolute; top:50%; transform:translateX(-50%) translateY(-50%) rotate(45deg); transform-origin:center center } .tag:not(body).is-delete::before{ height:1px; width:50% } .tag:not(body).is-delete::after{ height:50%; width:1px } .tag:not(body).is-delete:focus,.tag:not(body).is-delete:hover{ background-color:#e8e8e8 } .tag:not(body).is-delete:active{ background-color:#dbdbdb } .tag:not(body).is-rounded{ border-radius:290486px } a.tag:hover{ text-decoration:underline } .subtitle,.title{ word-break:break-word } .subtitle em,.subtitle span,.title em,.title span{ font-weight:inherit } .subtitle sub,.title sub{ font-size:.75em } .subtitle sup,.title sup{ font-size:.75em } .subtitle .tag,.title .tag{ vertical-align:middle } .title{ color:#363636; font-size:2rem; font-weight:600; line-height:1.125 } .title strong{ color:inherit; font-weight:inherit } .title+.highlight{ margin-top:-.75rem } .title:not(.is-spaced)+.subtitle{ margin-top:-1.25rem } .title.is-1{ font-size:3rem } .title.is-2{ font-size:2.5rem } .title.is-3{ font-size:2rem } .title.is-4{ font-size:1.5rem } .title.is-5{ font-size:1.25rem } .title.is-6{ font-size:1rem } .title.is-7{ font-size:.75rem } .subtitle{ color:#4a4a4a; font-size:1.25rem; font-weight:400; line-height:1.25 } .subtitle strong{ color:#363636; font-weight:600 } .subtitle:not(.is-spaced)+.title{ margin-top:-1.25rem } .subtitle.is-1{ font-size:3rem } .subtitle.is-2{ font-size:2.5rem } .subtitle.is-3{ font-size:2rem } .subtitle.is-4{ font-size:1.5rem } .subtitle.is-5{ font-size:1.25rem } .subtitle.is-6{ font-size:1rem } .subtitle.is-7{ font-size:.75rem } .heading{ display:block; font-size:11px; letter-spacing:1px; margin-bottom:5px; text-transform:uppercase } .highlight{ font-weight:400; max-width:100%; overflow:hidden; padding:0 } .highlight pre{ overflow:auto; max-width:100% } .number{ align-items:center; background-color:#f5f5f5; border-radius:290486px; display:inline-flex; font-size:1.25rem; height:2em; justify-content:center; margin-right:1.5rem; min-width:2.5em; padding:.25rem .5rem; text-align:center; vertical-align:top } .input,.select select,.textarea{ background-color:#fff; border-color:#dbdbdb; border-radius:4px; color:#363636 } .input::-moz-placeholder,.select select::-moz-placeholder,.textarea::-moz-placeholder{ color:rgba(54,54,54,.3) } .input::-webkit-input-placeholder,.select select::-webkit-input-placeholder,.textarea::-webkit-input-placeholder{ color:rgba(54,54,54,.3) } .input:-moz-placeholder,.select select:-moz-placeholder,.textarea:-moz-placeholder{ color:rgba(54,54,54,.3) } .input:-ms-input-placeholder,.select select:-ms-input-placeholder,.textarea:-ms-input-placeholder{ color:rgba(54,54,54,.3) } .input:hover,.is-hovered.input,.is-hovered.textarea,.select select.is-hovered,.select select:hover,.textarea:hover{ border-color:#b5b5b5 } .input:active,.input:focus,.is-active.input,.is-active.textarea,.is-focused.input,.is-focused.textarea,.select select.is-active,.select select.is-focused,.select select:active,.select select:focus,.textarea:active,.textarea:focus{ border-color:#3273dc; box-shadow:0 0 0 .125em rgba(50,115,220,.25) } .input[disabled],.select fieldset[disabled] select,.select select[disabled],.textarea[disabled],fieldset[disabled] .input,fieldset[disabled] .select select,fieldset[disabled] .textarea{ background-color:#f5f5f5; border-color:#f5f5f5; box-shadow:none; color:#7a7a7a } .input[disabled]::-moz-placeholder,.select fieldset[disabled] select::-moz-placeholder,.select select[disabled]::-moz-placeholder,.textarea[disabled]::-moz-placeholder,fieldset[disabled] .input::-moz-placeholder,fieldset[disabled] .select select::-moz-placeholder,fieldset[disabled] .textarea::-moz-placeholder{ color:rgba(122,122,122,.3) } .input[disabled]::-webkit-input-placeholder,.select fieldset[disabled] select::-webkit-input-placeholder,.select select[disabled]::-webkit-input-placeholder,.textarea[disabled]::-webkit-input-placeholder,fieldset[disabled] .input::-webkit-input-placeholder,fieldset[disabled] .select select::-webkit-input-placeholder,fieldset[disabled] .textarea::-webkit-input-placeholder{ color:rgba(122,122,122,.3) } .input[disabled]:-moz-placeholder,.select fieldset[disabled] select:-moz-placeholder,.select select[disabled]:-moz-placeholder,.textarea[disabled]:-moz-placeholder,fieldset[disabled] .input:-moz-placeholder,fieldset[disabled] .select select:-moz-placeholder,fieldset[disabled] .textarea:-moz-placeholder{ color:rgba(122,122,122,.3) } .input[disabled]:-ms-input-placeholder,.select fieldset[disabled] select:-ms-input-placeholder,.select select[disabled]:-ms-input-placeholder,.textarea[disabled]:-ms-input-placeholder,fieldset[disabled] .input:-ms-input-placeholder,fieldset[disabled] .select select:-ms-input-placeholder,fieldset[disabled] .textarea:-ms-input-placeholder{ color:rgba(122,122,122,.3) } .input,.textarea{ box-shadow:inset 0 .0625em .125em rgba(10,10,10,.05); max-width:100%; width:100% } .input[readonly],.textarea[readonly]{ box-shadow:none } .is-white.input,.is-white.textarea{ border-color:#fff } .is-white.input:active,.is-white.input:focus,.is-white.is-active.input,.is-white.is-active.textarea,.is-white.is-focused.input,.is-white.is-focused.textarea,.is-white.textarea:active,.is-white.textarea:focus{ box-shadow:0 0 0 .125em rgba(255,255,255,.25) } .is-black.input,.is-black.textarea{ border-color:#0a0a0a } .is-black.input:active,.is-black.input:focus,.is-black.is-active.input,.is-black.is-active.textarea,.is-black.is-focused.input,.is-black.is-focused.textarea,.is-black.textarea:active,.is-black.textarea:focus{ box-shadow:0 0 0 .125em rgba(10,10,10,.25) } .is-light.input,.is-light.textarea{ border-color:#f5f5f5 } .is-light.input:active,.is-light.input:focus,.is-light.is-active.input,.is-light.is-active.textarea,.is-light.is-focused.input,.is-light.is-focused.textarea,.is-light.textarea:active,.is-light.textarea:focus{ box-shadow:0 0 0 .125em rgba(245,245,245,.25) } .is-dark.input,.is-dark.textarea{ border-color:#363636 } .is-dark.input:active,.is-dark.input:focus,.is-dark.is-active.input,.is-dark.is-active.textarea,.is-dark.is-focused.input,.is-dark.is-focused.textarea,.is-dark.textarea:active,.is-dark.textarea:focus{ box-shadow:0 0 0 .125em rgba(54,54,54,.25) } .is-primary.input,.is-primary.textarea{ border-color:#00d1b2 } .is-primary.input:active,.is-primary.input:focus,.is-primary.is-active.input,.is-primary.is-active.textarea,.is-primary.is-focused.input,.is-primary.is-focused.textarea,.is-primary.textarea:active,.is-primary.textarea:focus{ box-shadow:0 0 0 .125em rgba(0,209,178,.25) } .is-link.input,.is-link.textarea{ border-color:#3273dc } .is-link.input:active,.is-link.input:focus,.is-link.is-active.input,.is-link.is-active.textarea,.is-link.is-focused.input,.is-link.is-focused.textarea,.is-link.textarea:active,.is-link.textarea:focus{ box-shadow:0 0 0 .125em rgba(50,115,220,.25) } .is-info.input,.is-info.textarea{ border-color:#3298dc } .is-info.input:active,.is-info.input:focus,.is-info.is-active.input,.is-info.is-active.textarea,.is-info.is-focused.input,.is-info.is-focused.textarea,.is-info.textarea:active,.is-info.textarea:focus{ box-shadow:0 0 0 .125em rgba(50,152,220,.25) } .is-success.input,.is-success.textarea{ border-color:#48c774 } .is-success.input:active,.is-success.input:focus,.is-success.is-active.input,.is-success.is-active.textarea,.is-success.is-focused.input,.is-success.is-focused.textarea,.is-success.textarea:active,.is-success.textarea:focus{ box-shadow:0 0 0 .125em rgba(72,199,116,.25) } .is-warning.input,.is-warning.textarea{ border-color:#ffdd57 } .is-warning.input:active,.is-warning.input:focus,.is-warning.is-active.input,.is-warning.is-active.textarea,.is-warning.is-focused.input,.is-warning.is-focused.textarea,.is-warning.textarea:active,.is-warning.textarea:focus{ box-shadow:0 0 0 .125em rgba(255,221,87,.25) } .is-danger.input,.is-danger.textarea{ border-color:#f14668 } .is-danger.input:active,.is-danger.input:focus,.is-danger.is-active.input,.is-danger.is-active.textarea,.is-danger.is-focused.input,.is-danger.is-focused.textarea,.is-danger.textarea:active,.is-danger.textarea:focus{ box-shadow:0 0 0 .125em rgba(241,70,104,.25) } .is-small.input,.is-small.textarea{ border-radius:2px; font-size:.75rem } .is-medium.input,.is-medium.textarea{ font-size:1.25rem } .is-large.input,.is-large.textarea{ font-size:1.5rem } .is-fullwidth.input,.is-fullwidth.textarea{ display:block; width:100% } .is-inline.input,.is-inline.textarea{ display:inline; width:auto } .input.is-rounded{ border-radius:290486px; padding-left:calc(calc(.75em - 1px) + .375em); padding-right:calc(calc(.75em - 1px) + .375em) } .input.is-static{ background-color:transparent; border-color:transparent; box-shadow:none; padding-left:0; padding-right:0 } .textarea{ display:block; max-width:100%; min-width:100%; padding:calc(.75em - 1px); resize:vertical } .textarea:not([rows]){ max-height:40em; min-height:8em } .textarea[rows]{ height:initial } .textarea.has-fixed-size{ resize:none } .checkbox,.radio{ cursor:pointer; display:inline-block; line-height:1.25; position:relative } .checkbox input,.radio input{ cursor:pointer } .checkbox:hover,.radio:hover{ color:#363636 } .checkbox input[disabled],.checkbox[disabled],.radio input[disabled],.radio[disabled],fieldset[disabled] .checkbox,fieldset[disabled] .radio{ color:#7a7a7a; cursor:not-allowed } .radio+.radio{ margin-left:.5em } .select{ display:inline-block; max-width:100%; position:relative; vertical-align:top } .select:not(.is-multiple){ height:2.5em } .select:not(.is-multiple):not(.is-loading)::after{ border-color:#3273dc; right:1.125em; z-index:4 } .select.is-rounded select{ border-radius:290486px; padding-left:1em } .select select{ cursor:pointer; display:block; font-size:1em; max-width:100%; outline:0 } .select select::-ms-expand{ display:none } .select select[disabled]:hover,fieldset[disabled] .select select:hover{ border-color:#f5f5f5 } .select select:not([multiple]){ padding-right:2.5em } .select select[multiple]{ height:auto; padding:0 } .select select[multiple] option{ padding:.5em 1em } .select:not(.is-multiple):not(.is-loading):hover::after{ border-color:#363636 } .select.is-white:not(:hover)::after{ border-color:#fff } .select.is-white select{ border-color:#fff } .select.is-white select.is-hovered,.select.is-white select:hover{ border-color:#f2f2f2 } .select.is-white select.is-active,.select.is-white select.is-focused,.select.is-white select:active,.select.is-white select:focus{ box-shadow:0 0 0 .125em rgba(255,255,255,.25) } .select.is-black:not(:hover)::after{ border-color:#0a0a0a } .select.is-black select{ border-color:#0a0a0a } .select.is-black select.is-hovered,.select.is-black select:hover{ border-color:#000 } .select.is-black select.is-active,.select.is-black select.is-focused,.select.is-black select:active,.select.is-black select:focus{ box-shadow:0 0 0 .125em rgba(10,10,10,.25) } .select.is-light:not(:hover)::after{ border-color:#f5f5f5 } .select.is-light select{ border-color:#f5f5f5 } .select.is-light select.is-hovered,.select.is-light select:hover{ border-color:#e8e8e8 } .select.is-light select.is-active,.select.is-light select.is-focused,.select.is-light select:active,.select.is-light select:focus{ box-shadow:0 0 0 .125em rgba(245,245,245,.25) } .select.is-dark:not(:hover)::after{ border-color:#363636 } .select.is-dark select{ border-color:#363636 } .select.is-dark select.is-hovered,.select.is-dark select:hover{ border-color:#292929 } .select.is-dark select.is-active,.select.is-dark select.is-focused,.select.is-dark select:active,.select.is-dark select:focus{ box-shadow:0 0 0 .125em rgba(54,54,54,.25) } .select.is-primary:not(:hover)::after{ border-color:#00d1b2 } .select.is-primary select{ border-color:#00d1b2 } .select.is-primary select.is-hovered,.select.is-primary select:hover{ border-color:#00b89c } .select.is-primary select.is-active,.select.is-primary select.is-focused,.select.is-primary select:active,.select.is-primary select:focus{ box-shadow:0 0 0 .125em rgba(0,209,178,.25) } .select.is-link:not(:hover)::after{ border-color:#3273dc } .select.is-link select{ border-color:#3273dc } .select.is-link select.is-hovered,.select.is-link select:hover{ border-color:#2366d1 } .select.is-link select.is-active,.select.is-link select.is-focused,.select.is-link select:active,.select.is-link select:focus{ box-shadow:0 0 0 .125em rgba(50,115,220,.25) } .select.is-info:not(:hover)::after{ border-color:#3298dc } .select.is-info select{ border-color:#3298dc } .select.is-info select.is-hovered,.select.is-info select:hover{ border-color:#238cd1 } .select.is-info select.is-active,.select.is-info select.is-focused,.select.is-info select:active,.select.is-info select:focus{ box-shadow:0 0 0 .125em rgba(50,152,220,.25) } .select.is-success:not(:hover)::after{ border-color:#48c774 } .select.is-success select{ border-color:#48c774 } .select.is-success select.is-hovered,.select.is-success select:hover{ border-color:#3abb67 } .select.is-success select.is-active,.select.is-success select.is-focused,.select.is-success select:active,.select.is-success select:focus{ box-shadow:0 0 0 .125em rgba(72,199,116,.25) } .select.is-warning:not(:hover)::after{ border-color:#ffdd57 } .select.is-warning select{ border-color:#ffdd57 } .select.is-warning select.is-hovered,.select.is-warning select:hover{ border-color:#ffd83d } .select.is-warning select.is-active,.select.is-warning select.is-focused,.select.is-warning select:active,.select.is-warning select:focus{ box-shadow:0 0 0 .125em rgba(255,221,87,.25) } .select.is-danger:not(:hover)::after{ border-color:#f14668 } .select.is-danger select{ border-color:#f14668 } .select.is-danger select.is-hovered,.select.is-danger select:hover{ border-color:#ef2e55 } .select.is-danger select.is-active,.select.is-danger select.is-focused,.select.is-danger select:active,.select.is-danger select:focus{ box-shadow:0 0 0 .125em rgba(241,70,104,.25) } .select.is-small{ border-radius:2px; font-size:.75rem } .select.is-medium{ font-size:1.25rem } .select.is-large{ font-size:1.5rem } .select.is-disabled::after{ border-color:#7a7a7a } .select.is-fullwidth{ width:100% } .select.is-fullwidth select{ width:100% } .select.is-loading::after{ margin-top:0; position:absolute; right:.625em; top:.625em; transform:none } .select.is-loading.is-small:after{ font-size:.75rem } .select.is-loading.is-medium:after{ font-size:1.25rem } .select.is-loading.is-large:after{ font-size:1.5rem } .file{ align-items:stretch; display:flex; justify-content:flex-start; position:relative } .file.is-white .file-cta{ background-color:#fff; border-color:transparent; color:#0a0a0a } .file.is-white.is-hovered .file-cta,.file.is-white:hover .file-cta{ background-color:#f9f9f9; border-color:transparent; color:#0a0a0a } .file.is-white.is-focused .file-cta,.file.is-white:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(255,255,255,.25); color:#0a0a0a } .file.is-white.is-active .file-cta,.file.is-white:active .file-cta{ background-color:#f2f2f2; border-color:transparent; color:#0a0a0a } .file.is-black .file-cta{ background-color:#0a0a0a; border-color:transparent; color:#fff } .file.is-black.is-hovered .file-cta,.file.is-black:hover .file-cta{ background-color:#040404; border-color:transparent; color:#fff } .file.is-black.is-focused .file-cta,.file.is-black:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(10,10,10,.25); color:#fff } .file.is-black.is-active .file-cta,.file.is-black:active .file-cta{ background-color:#000; border-color:transparent; color:#fff } .file.is-light .file-cta{ background-color:#f5f5f5; border-color:transparent; color:rgba(0,0,0,.7) } .file.is-light.is-hovered .file-cta,.file.is-light:hover .file-cta{ background-color:#eee; border-color:transparent; color:rgba(0,0,0,.7) } .file.is-light.is-focused .file-cta,.file.is-light:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(245,245,245,.25); color:rgba(0,0,0,.7) } .file.is-light.is-active .file-cta,.file.is-light:active .file-cta{ background-color:#e8e8e8; border-color:transparent; color:rgba(0,0,0,.7) } .file.is-dark .file-cta{ background-color:#363636; border-color:transparent; color:#fff } .file.is-dark.is-hovered .file-cta,.file.is-dark:hover .file-cta{ background-color:#2f2f2f; border-color:transparent; color:#fff } .file.is-dark.is-focused .file-cta,.file.is-dark:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(54,54,54,.25); color:#fff } .file.is-dark.is-active .file-cta,.file.is-dark:active .file-cta{ background-color:#292929; border-color:transparent; color:#fff } .file.is-primary .file-cta{ background-color:#00d1b2; border-color:transparent; color:#fff } .file.is-primary.is-hovered .file-cta,.file.is-primary:hover .file-cta{ background-color:#00c4a7; border-color:transparent; color:#fff } .file.is-primary.is-focused .file-cta,.file.is-primary:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(0,209,178,.25); color:#fff } .file.is-primary.is-active .file-cta,.file.is-primary:active .file-cta{ background-color:#00b89c; border-color:transparent; color:#fff } .file.is-link .file-cta{ background-color:#3273dc; border-color:transparent; color:#fff } .file.is-link.is-hovered .file-cta,.file.is-link:hover .file-cta{ background-color:#276cda; border-color:transparent; color:#fff } .file.is-link.is-focused .file-cta,.file.is-link:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(50,115,220,.25); color:#fff } .file.is-link.is-active .file-cta,.file.is-link:active .file-cta{ background-color:#2366d1; border-color:transparent; color:#fff } .file.is-info .file-cta{ background-color:#3298dc; border-color:transparent; color:#fff } .file.is-info.is-hovered .file-cta,.file.is-info:hover .file-cta{ background-color:#2793da; border-color:transparent; color:#fff } .file.is-info.is-focused .file-cta,.file.is-info:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(50,152,220,.25); color:#fff } .file.is-info.is-active .file-cta,.file.is-info:active .file-cta{ background-color:#238cd1; border-color:transparent; color:#fff } .file.is-success .file-cta{ background-color:#48c774; border-color:transparent; color:#fff } .file.is-success.is-hovered .file-cta,.file.is-success:hover .file-cta{ background-color:#3ec46d; border-color:transparent; color:#fff } .file.is-success.is-focused .file-cta,.file.is-success:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(72,199,116,.25); color:#fff } .file.is-success.is-active .file-cta,.file.is-success:active .file-cta{ background-color:#3abb67; border-color:transparent; color:#fff } .file.is-warning .file-cta{ background-color:#ffdd57; border-color:transparent; color:rgba(0,0,0,.7) } .file.is-warning.is-hovered .file-cta,.file.is-warning:hover .file-cta{ background-color:#ffdb4a; border-color:transparent; color:rgba(0,0,0,.7) } .file.is-warning.is-focused .file-cta,.file.is-warning:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(255,221,87,.25); color:rgba(0,0,0,.7) } .file.is-warning.is-active .file-cta,.file.is-warning:active .file-cta{ background-color:#ffd83d; border-color:transparent; color:rgba(0,0,0,.7) } .file.is-danger .file-cta{ background-color:#f14668; border-color:transparent; color:#fff } .file.is-danger.is-hovered .file-cta,.file.is-danger:hover .file-cta{ background-color:#f03a5f; border-color:transparent; color:#fff } .file.is-danger.is-focused .file-cta,.file.is-danger:focus .file-cta{ border-color:transparent; box-shadow:0 0 .5em rgba(241,70,104,.25); color:#fff } .file.is-danger.is-active .file-cta,.file.is-danger:active .file-cta{ background-color:#ef2e55; border-color:transparent; color:#fff } .file.is-small{ font-size:.75rem } .file.is-medium{ font-size:1.25rem } .file.is-medium .file-icon .fa{ font-size:21px } .file.is-large{ font-size:1.5rem } .file.is-large .file-icon .fa{ font-size:28px } .file.has-name .file-cta{ border-bottom-right-radius:0; border-top-right-radius:0 } .file.has-name .file-name{ border-bottom-left-radius:0; border-top-left-radius:0 } .file.has-name.is-empty .file-cta{ border-radius:4px } .file.has-name.is-empty .file-name{ display:none } .file.is-boxed .file-label{ flex-direction:column } .file.is-boxed .file-cta{ flex-direction:column; height:auto; padding:1em 3em } .file.is-boxed .file-name{ border-width:0 1px 1px } .file.is-boxed .file-icon{ height:1.5em; width:1.5em } .file.is-boxed .file-icon .fa{ font-size:21px } .file.is-boxed.is-small .file-icon .fa{ font-size:14px } .file.is-boxed.is-medium .file-icon .fa{ font-size:28px } .file.is-boxed.is-large .file-icon .fa{ font-size:35px } .file.is-boxed.has-name .file-cta{ border-radius:4px 4px 0 0 } .file.is-boxed.has-name .file-name{ border-radius:0 0 4px 4px; border-width:0 1px 1px } .file.is-centered{ justify-content:center } .file.is-fullwidth .file-label{ width:100% } .file.is-fullwidth .file-name{ flex-grow:1; max-width:none } .file.is-right{ justify-content:flex-end } .file.is-right .file-cta{ border-radius:0 4px 4px 0 } .file.is-right .file-name{ border-radius:4px 0 0 4px; border-width:1px 0 1px 1px; order:-1 } .file-label{ align-items:stretch; display:flex; cursor:pointer; justify-content:flex-start; overflow:hidden; position:relative } .file-label:hover .file-cta{ background-color:#eee; color:#363636 } .file-label:hover .file-name{ border-color:#d5d5d5 } .file-label:active .file-cta{ background-color:#e8e8e8; color:#363636 } .file-label:active .file-name{ border-color:#cfcfcf } .file-input{ height:100%; left:0; opacity:0; outline:0; position:absolute; top:0; width:100% } .file-cta,.file-name{ border-color:#dbdbdb; border-radius:4px; font-size:1em; padding-left:1em; padding-right:1em; white-space:nowrap } .file-cta{ background-color:#f5f5f5; color:#4a4a4a } .file-name{ border-color:#dbdbdb; border-style:solid; border-width:1px 1px 1px 0; display:block; max-width:16em; overflow:hidden; text-align:inherit; text-overflow:ellipsis } .file-icon{ align-items:center; display:flex; height:1em; justify-content:center; margin-right:.5em; width:1em } .file-icon .fa{ font-size:14px } .label{ color:#363636; display:block; font-size:1rem; font-weight:700 } .label:not(:last-child){ margin-bottom:.5em } .label.is-small{ font-size:.75rem } .label.is-medium{ font-size:1.25rem } .label.is-large{ font-size:1.5rem } .help{ display:block; font-size:.75rem; margin-top:.25rem } .help.is-white{ color:#fff } .help.is-black{ color:#0a0a0a } .help.is-light{ color:#f5f5f5 } .help.is-dark{ color:#363636 } .help.is-primary{ color:#00d1b2 } .help.is-link{ color:#3273dc } .help.is-info{ color:#3298dc } .help.is-success{ color:#48c774 } .help.is-warning{ color:#ffdd57 } .help.is-danger{ color:#f14668 } .field:not(:last-child){ margin-bottom:.75rem } .field.has-addons{ display:flex; justify-content:flex-start } .field.has-addons .control:not(:last-child){ margin-right:-1px } .field.has-addons .control:not(:first-child):not(:last-child) .button,.field.has-addons .control:not(:first-child):not(:last-child) .input,.field.has-addons .control:not(:first-child):not(:last-child) .select select{ border-radius:0 } .field.has-addons .control:first-child:not(:only-child) .button,.field.has-addons .control:first-child:not(:only-child) .input,.field.has-addons .control:first-child:not(:only-child) .select select{ border-bottom-right-radius:0; border-top-right-radius:0 } .field.has-addons .control:last-child:not(:only-child) .button,.field.has-addons .control:last-child:not(:only-child) .input,.field.has-addons .control:last-child:not(:only-child) .select select{ border-bottom-left-radius:0; border-top-left-radius:0 } .field.has-addons .control .button:not([disabled]).is-hovered,.field.has-addons .control .button:not([disabled]):hover,.field.has-addons .control .input:not([disabled]).is-hovered,.field.has-addons .control .input:not([disabled]):hover,.field.has-addons .control .select select:not([disabled]).is-hovered,.field.has-addons .control .select select:not([disabled]):hover{ z-index:2 } .field.has-addons .control .button:not([disabled]).is-active,.field.has-addons .control .button:not([disabled]).is-focused,.field.has-addons .control .button:not([disabled]):active,.field.has-addons .control .button:not([disabled]):focus,.field.has-addons .control .input:not([disabled]).is-active,.field.has-addons .control .input:not([disabled]).is-focused,.field.has-addons .control .input:not([disabled]):active,.field.has-addons .control .input:not([disabled]):focus,.field.has-addons .control .select select:not([disabled]).is-active,.field.has-addons .control .select select:not([disabled]).is-focused,.field.has-addons .control .select select:not([disabled]):active,.field.has-addons .control .select select:not([disabled]):focus{ z-index:3 } .field.has-addons .control .button:not([disabled]).is-active:hover,.field.has-addons .control .button:not([disabled]).is-focused:hover,.field.has-addons .control .button:not([disabled]):active:hover,.field.has-addons .control .button:not([disabled]):focus:hover,.field.has-addons .control .input:not([disabled]).is-active:hover,.field.has-addons .control .input:not([disabled]).is-focused:hover,.field.has-addons .control .input:not([disabled]):active:hover,.field.has-addons .control .input:not([disabled]):focus:hover,.field.has-addons .control .select select:not([disabled]).is-active:hover,.field.has-addons .control .select select:not([disabled]).is-focused:hover,.field.has-addons .control .select select:not([disabled]):active:hover,.field.has-addons .control .select select:not([disabled]):focus:hover{ z-index:4 } .field.has-addons .control.is-expanded{ flex-grow:1; flex-shrink:1 } .field.has-addons.has-addons-centered{ justify-content:center } .field.has-addons.has-addons-right{ justify-content:flex-end } .field.has-addons.has-addons-fullwidth .control{ flex-grow:1; flex-shrink:0 } .field.is-grouped{ display:flex; justify-content:flex-start } .field.is-grouped>.control{ flex-shrink:0 } .field.is-grouped>.control:not(:last-child){ margin-bottom:0; margin-right:.75rem } .field.is-grouped>.control.is-expanded{ flex-grow:1; flex-shrink:1 } .field.is-grouped.is-grouped-centered{ justify-content:center } .field.is-grouped.is-grouped-right{ justify-content:flex-end } .field.is-grouped.is-grouped-multiline{ flex-wrap:wrap } .field.is-grouped.is-grouped-multiline>.control:last-child,.field.is-grouped.is-grouped-multiline>.control:not(:last-child){ margin-bottom:.75rem } .field.is-grouped.is-grouped-multiline:last-child{ margin-bottom:-.75rem } .field.is-grouped.is-grouped-multiline:not(:last-child){ margin-bottom:0 } @media screen and (min-width:769px),print{ .field.is-horizontal{ display:flex } } .field-label .label{ font-size:inherit } @media screen and (max-width:768px){ .field-label{ margin-bottom:.5rem } } @media screen and (min-width:769px),print{ .field-label{ flex-basis:0; flex-grow:1; flex-shrink:0; margin-right:1.5rem; text-align:right } .field-label.is-small{ font-size:.75rem; padding-top:.375em } .field-label.is-normal{ padding-top:.375em } .field-label.is-medium{ font-size:1.25rem; padding-top:.375em } .field-label.is-large{ font-size:1.5rem; padding-top:.375em } } .field-body .field .field{ margin-bottom:0 } @media screen and (min-width:769px),print{ .field-body{ display:flex; flex-basis:0; flex-grow:5; flex-shrink:1 } .field-body .field{ margin-bottom:0 } .field-body>.field{ flex-shrink:1 } .field-body>.field:not(.is-narrow){ flex-grow:1 } .field-body>.field:not(:last-child){ margin-right:.75rem } } .control{ box-sizing:border-box; clear:both; font-size:1rem; position:relative; text-align:inherit } .control.has-icons-left .input:focus~.icon,.control.has-icons-left .select:focus~.icon,.control.has-icons-right .input:focus~.icon,.control.has-icons-right .select:focus~.icon{ color:#4a4a4a } .control.has-icons-left .input.is-small~.icon,.control.has-icons-left .select.is-small~.icon,.control.has-icons-right .input.is-small~.icon,.control.has-icons-right .select.is-small~.icon{ font-size:.75rem } .control.has-icons-left .input.is-medium~.icon,.control.has-icons-left .select.is-medium~.icon,.control.has-icons-right .input.is-medium~.icon,.control.has-icons-right .select.is-medium~.icon{ font-size:1.25rem } .control.has-icons-left .input.is-large~.icon,.control.has-icons-left .select.is-large~.icon,.control.has-icons-right .input.is-large~.icon,.control.has-icons-right .select.is-large~.icon{ font-size:1.5rem } .control.has-icons-left .icon,.control.has-icons-right .icon{ color:#dbdbdb; height:2.5em; pointer-events:none; position:absolute; top:0; width:2.5em; z-index:4 } .control.has-icons-left .input,.control.has-icons-left .select select{ padding-left:2.5em } .control.has-icons-left .icon.is-left{ left:0 } .control.has-icons-right .input,.control.has-icons-right .select select{ padding-right:2.5em } .control.has-icons-right .icon.is-right{ right:0 } .control.is-loading::after{ position:absolute!important; right:.625em; top:.625em; z-index:4 } .control.is-loading.is-small:after{ font-size:.75rem } .control.is-loading.is-medium:after{ font-size:1.25rem } .control.is-loading.is-large:after{ font-size:1.5rem } .breadcrumb{ font-size:1rem; white-space:nowrap } .breadcrumb a{ align-items:center; color:#3273dc; display:flex; justify-content:center; padding:0 .75em } .breadcrumb a:hover{ color:#363636 } .breadcrumb li{ align-items:center; display:flex } .breadcrumb li:first-child a{ padding-left:0 } .breadcrumb li.is-active a{ color:#363636; cursor:default; pointer-events:none } .breadcrumb li+li::before{ color:#b5b5b5; content:"\0002f" } .breadcrumb ol,.breadcrumb ul{ align-items:flex-start; display:flex; flex-wrap:wrap; justify-content:flex-start } .breadcrumb .icon:first-child{ margin-right:.5em } .breadcrumb .icon:last-child{ margin-left:.5em } .breadcrumb.is-centered ol,.breadcrumb.is-centered ul{ justify-content:center } .breadcrumb.is-right ol,.breadcrumb.is-right ul{ justify-content:flex-end } .breadcrumb.is-small{ font-size:.75rem } .breadcrumb.is-medium{ font-size:1.25rem } .breadcrumb.is-large{ font-size:1.5rem } .breadcrumb.has-arrow-separator li+li::before{ content:"\02192" } .breadcrumb.has-bullet-separator li+li::before{ content:"\02022" } .breadcrumb.has-dot-separator li+li::before{ content:"\000b7" } .breadcrumb.has-succeeds-separator li+li::before{ content:"\0227B" } .column{ display:block; flex-basis:0; flex-grow:1; flex-shrink:1; padding:.75rem } .columns.is-mobile>.column.is-narrow{ flex:none } .columns.is-mobile>.column.is-full{ flex:none; width:100% } .columns.is-mobile>.column.is-three-quarters{ flex:none; width:75% } .columns.is-mobile>.column.is-two-thirds{ flex:none; width:66.6666% } .columns.is-mobile>.column.is-half{ flex:none; width:50% } .columns.is-mobile>.column.is-one-third{ flex:none; width:33.3333% } .columns.is-mobile>.column.is-one-quarter{ flex:none; width:25% } .columns.is-mobile>.column.is-one-fifth{ flex:none; width:20% } .columns.is-mobile>.column.is-two-fifths{ flex:none; width:40% } .columns.is-mobile>.column.is-three-fifths{ flex:none; width:60% } .columns.is-mobile>.column.is-four-fifths{ flex:none; width:80% } .columns.is-mobile>.column.is-offset-three-quarters{ margin-left:75% } .columns.is-mobile>.column.is-offset-two-thirds{ margin-left:66.6666% } .columns.is-mobile>.column.is-offset-half{ margin-left:50% } .columns.is-mobile>.column.is-offset-one-third{ margin-left:33.3333% } .columns.is-mobile>.column.is-offset-one-quarter{ margin-left:25% } .columns.is-mobile>.column.is-offset-one-fifth{ margin-left:20% } .columns.is-mobile>.column.is-offset-two-fifths{ margin-left:40% } .columns.is-mobile>.column.is-offset-three-fifths{ margin-left:60% } .columns.is-mobile>.column.is-offset-four-fifths{ margin-left:80% } .columns.is-mobile>.column.is-0{ flex:none; width:0% } .columns.is-mobile>.column.is-offset-0{ margin-left:0 } .columns.is-mobile>.column.is-1{ flex:none; width:8.33333% } .columns.is-mobile>.column.is-offset-1{ margin-left:8.33333% } .columns.is-mobile>.column.is-2{ flex:none; width:16.66667% } .columns.is-mobile>.column.is-offset-2{ margin-left:16.66667% } .columns.is-mobile>.column.is-3{ flex:none; width:25% } .columns.is-mobile>.column.is-offset-3{ margin-left:25% } .columns.is-mobile>.column.is-4{ flex:none; width:25.33333% } .columns.is-mobile>.column.is-offset-4{ margin-left:33.33333% } .columns.is-mobile>.column.is-5{ flex:none; width:41.66667% } .columns.is-mobile>.column.is-offset-5{ margin-left:41.66667% } .columns.is-mobile>.column.is-6{ flex:none; width:50% } .columns.is-mobile>.column.is-offset-6{ margin-left:50% } .columns.is-mobile>.column.is-7{ flex:none; width:58.33333% } .columns.is-mobile>.column.is-offset-7{ margin-left:58.33333% } .columns.is-mobile>.column.is-8{ flex:none; width:66.66667% } .columns.is-mobile>.column.is-offset-8{ margin-left:66.66667% } .columns.is-mobile>.column.is-9{ flex:none; width:75% } .columns.is-mobile>.column.is-offset-9{ margin-left:75% } .columns.is-mobile>.column.is-10{ flex:none; width:83.33333% } .columns.is-mobile>.column.is-offset-10{ margin-left:83.33333% } .columns.is-mobile>.column.is-11{ flex:none; width:91.66667% } .columns.is-mobile>.column.is-offset-11{ margin-left:91.66667% } .columns.is-mobile>.column.is-12{ flex:none; width:100% } .columns.is-mobile>.column.is-offset-12{ margin-left:100% } @media screen and (max-width:768px){ .column.is-narrow-mobile{ flex:none } .column.is-full-mobile{ flex:none; width:100% } .column.is-three-quarters-mobile{ flex:none; width:75% } .column.is-two-thirds-mobile{ flex:none; width:66.6666% } .column.is-half-mobile{ flex:none; width:50% } .column.is-one-third-mobile{ flex:none; width:33.3333% } .column.is-one-quarter-mobile{ flex:none; width:25% } .column.is-one-fifth-mobile{ flex:none; width:20% } .column.is-two-fifths-mobile{ flex:none; width:40% } .column.is-three-fifths-mobile{ flex:none; width:60% } .column.is-four-fifths-mobile{ flex:none; width:80% } .column.is-offset-three-quarters-mobile{ margin-left:75% } .column.is-offset-two-thirds-mobile{ margin-left:66.6666% } .column.is-offset-half-mobile{ margin-left:50% } .column.is-offset-one-third-mobile{ margin-left:33.3333% } .column.is-offset-one-quarter-mobile{ margin-left:25% } .column.is-offset-one-fifth-mobile{ margin-left:20% } .column.is-offset-two-fifths-mobile{ margin-left:40% } .column.is-offset-three-fifths-mobile{ margin-left:60% } .column.is-offset-four-fifths-mobile{ margin-left:80% } .column.is-0-mobile{ flex:none; width:0% } .column.is-offset-0-mobile{ margin-left:0 } .column.is-1-mobile{ flex:none; width:8.33333% } .column.is-offset-1-mobile{ margin-left:8.33333% } .column.is-2-mobile{ flex:none; width:16.66667% } .column.is-offset-2-mobile{ margin-left:16.66667% } .column.is-3-mobile{ flex:none; width:30% } .column.is-offset-3-mobile{ margin-left:25% } .column.is-4-mobile{ flex:none; width:33.33333% } .column.is-offset-4-mobile{ margin-left:33.33333% } .column.is-5-mobile{ flex:none; width:41.66667% } .column.is-offset-5-mobile{ margin-left:41.66667% } .column.is-6-mobile{ flex:none; width:50% } .column.is-offset-6-mobile{ margin-left:50% } .column.is-7-mobile{ flex:none; width:58.33333% } .column.is-offset-7-mobile{ margin-left:58.33333% } .column.is-8-mobile{ flex:none; width:66.66667% } .column.is-offset-8-mobile{ margin-left:66.66667% } .column.is-9-mobile{ flex:none; width:75% } .column.is-offset-9-mobile{ margin-left:75% } .column.is-10-mobile{ flex:none; width:83.33333% } .column.is-offset-10-mobile{ margin-left:83.33333% } .column.is-11-mobile{ flex:none; width:91.66667% } .column.is-offset-11-mobile{ margin-left:91.66667% } .column.is-12-mobile{ flex:none; width:100% } .column.is-offset-12-mobile{ margin-left:100% } } @media screen and (min-width:769px),print{ .column.is-narrow,.column.is-narrow-tablet{ flex:none } .column.is-full,.column.is-full-tablet{ flex:none; width:100% } .column.is-three-quarters,.column.is-three-quarters-tablet{ flex:none; width:75% } .column.is-two-thirds,.column.is-two-thirds-tablet{ flex:none; width:66.6666% } .column.is-half,.column.is-half-tablet{ flex:none; width:50% } .column.is-one-third,.column.is-one-third-tablet{ flex:none; width:33.3333% } .column.is-one-quarter,.column.is-one-quarter-tablet{ flex:none; width:25% } .column.is-one-fifth,.column.is-one-fifth-tablet{ flex:none; width:20% } .column.is-two-fifths,.column.is-two-fifths-tablet{ flex:none; width:40% } .column.is-three-fifths,.column.is-three-fifths-tablet{ flex:none; width:60% } .column.is-four-fifths,.column.is-four-fifths-tablet{ flex:none; width:80% } .column.is-offset-three-quarters,.column.is-offset-three-quarters-tablet{ margin-left:75% } .column.is-offset-two-thirds,.column.is-offset-two-thirds-tablet{ margin-left:66.6666% } .column.is-offset-half,.column.is-offset-half-tablet{ margin-left:50% } .column.is-offset-one-third,.column.is-offset-one-third-tablet{ margin-left:33.3333% } .column.is-offset-one-quarter,.column.is-offset-one-quarter-tablet{ margin-left:25% } .column.is-offset-one-fifth,.column.is-offset-one-fifth-tablet{ margin-left:20% } .column.is-offset-two-fifths,.column.is-offset-two-fifths-tablet{ margin-left:40% } .column.is-offset-three-fifths,.column.is-offset-three-fifths-tablet{ margin-left:60% } .column.is-offset-four-fifths,.column.is-offset-four-fifths-tablet{ margin-left:80% } .column.is-0,.column.is-0-tablet{ flex:none; width:0% } .column.is-offset-0,.column.is-offset-0-tablet{ margin-left:0 } .column.is-1,.column.is-1-tablet{ flex:none; width:8.33333% } .column.is-offset-1,.column.is-offset-1-tablet{ margin-left:8.33333% } .column.is-2,.column.is-2-tablet{ flex:none; width:16.66667% } .column.is-offset-2,.column.is-offset-2-tablet{ margin-left:16.66667% } .column.is-offset-3,.column.is-offset-3-tablet{ margin-left:25% } .column.is-4,.column.is-4-tablet{ flex:none; width:25.33333% } .column.is-offset-4,.column.is-offset-4-tablet{ margin-left:33.33333% } .column.is-5,.column.is-5-tablet{ flex:none; width:41.66667% } .column.is-offset-5,.column.is-offset-5-tablet{ margin-left:41.66667% } .column.is-6,.column.is-6-tablet{ flex:none; width:50% } .column.is-offset-6,.column.is-offset-6-tablet{ margin-left:50% } .column.is-7,.column.is-7-tablet{ flex:none; width:58.33333% } .column.is-offset-7,.column.is-offset-7-tablet{ margin-left:58.33333% } .column.is-8,.column.is-8-tablet{ flex:none; width:66.66667% } .column.is-offset-8,.column.is-offset-8-tablet{ margin-left:66.66667% } .column.is-9,.column.is-9-tablet{ flex:none; width:75% } .column.is-offset-9,.column.is-offset-9-tablet{ margin-left:75% } .column.is-10,.column.is-10-tablet{ flex:none; width:83.33333% } .column.is-offset-10,.column.is-offset-10-tablet{ margin-left:83.33333% } .column.is-11,.column.is-11-tablet{ flex:none; width:91.66667% } .column.is-offset-11,.column.is-offset-11-tablet{ margin-left:91.66667% } .column.is-12,.column.is-12-tablet{ flex:none; width:100% } .column.is-offset-12,.column.is-offset-12-tablet{ margin-left:100% } } @media screen and (min-width:1023px){ .column.is-3,.column.is-3-tablet{ flex:none; width:25% } } @media screen and (max-width:1023px){ .column.is-narrow-touch{ flex:none } .column.is-full-touch{ flex:none; width:100% } .column.is-three-quarters-touch{ flex:none; width:75% } .column.is-two-thirds-touch{ flex:none; width:66.6666% } .column.is-half-touch{ flex:none; width:50% } .column.is-one-third-touch{ flex:none; width:33.3333% } .column.is-one-quarter-touch{ flex:none; width:25% } .column.is-one-fifth-touch{ flex:none; width:20% } .column.is-two-fifths-touch{ flex:none; width:40% } .column.is-three-fifths-touch{ flex:none; width:60% } .column.is-four-fifths-touch{ flex:none; width:80% } .column.is-offset-three-quarters-touch{ margin-left:75% } .column.is-offset-two-thirds-touch{ margin-left:66.6666% } .column.is-offset-half-touch{ margin-left:50% } .column.is-offset-one-third-touch{ margin-left:33.3333% } .column.is-offset-one-quarter-touch{ margin-left:25% } .column.is-offset-one-fifth-touch{ margin-left:20% } .column.is-offset-two-fifths-touch{ margin-left:40% } .column.is-offset-three-fifths-touch{ margin-left:60% } .column.is-offset-four-fifths-touch{ margin-left:80% } .column.is-0-touch{ flex:none; width:0% } .column.is-offset-0-touch{ margin-left:0 } .column.is-1-touch{ flex:none; width:8.33333% } .column.is-offset-1-touch{ margin-left:8.33333% } .column.is-2-touch{ flex:none; width:16.66667% } .column.is-offset-2-touch{ margin-left:16.66667% } .column.is-3-touch{ flex:none; width:25% } .column.is-offset-3-touch{ margin-left:25% } .column.is-4-touch{ flex:none; width:33.33333% } .column.is-offset-4-touch{ margin-left:33.33333% } .column.is-5-touch{ flex:none; width:41.66667% } .column.is-offset-5-touch{ margin-left:41.66667% } .column.is-6-touch{ flex:none; width:50% } .column.is-offset-6-touch{ margin-left:50% } .column.is-7-touch{ flex:none; width:58.33333% } .column.is-offset-7-touch{ margin-left:58.33333% } .column.is-8-touch{ flex:none; width:66.66667% } .column.is-offset-8-touch{ margin-left:66.66667% } .column.is-9-touch{ flex:none; width:75% } .column.is-offset-9-touch{ margin-left:75% } .column.is-10-touch{ flex:none; width:83.33333% } .column.is-offset-10-touch{ margin-left:83.33333% } .column.is-11-touch{ flex:none; width:91.66667% } .column.is-offset-11-touch{ margin-left:91.66667% } .column.is-12-touch{ flex:none; width:100% } .column.is-offset-12-touch{ margin-left:100% } } @media screen and (min-width:1024px){ .column.is-narrow-desktop{ flex:none } .column.is-full-desktop{ flex:none; width:100% } .column.is-three-quarters-desktop{ flex:none; width:75% } .column.is-two-thirds-desktop{ flex:none; width:66.6666% } .column.is-half-desktop{ flex:none; width:50% } .column.is-one-third-desktop{ flex:none; width:33.3333% } .column.is-one-quarter-desktop{ flex:none; width:25% } .column.is-one-fifth-desktop{ flex:none; width:20% } .column.is-two-fifths-desktop{ flex:none; width:40% } .column.is-three-fifths-desktop{ flex:none; width:60% } .column.is-four-fifths-desktop{ flex:none; width:80% } .column.is-offset-three-quarters-desktop{ margin-left:75% } .column.is-offset-two-thirds-desktop{ margin-left:66.6666% } .column.is-offset-half-desktop{ margin-left:50% } .column.is-offset-one-third-desktop{ margin-left:33.3333% } .column.is-offset-one-quarter-desktop{ margin-left:25% } .column.is-offset-one-fifth-desktop{ margin-left:20% } .column.is-offset-two-fifths-desktop{ margin-left:40% } .column.is-offset-three-fifths-desktop{ margin-left:60% } .column.is-offset-four-fifths-desktop{ margin-left:80% } .column.is-0-desktop{ flex:none; width:0% } .column.is-offset-0-desktop{ margin-left:0 } .column.is-1-desktop{ flex:none; width:8.33333% } .column.is-offset-1-desktop{ margin-left:8.33333% } .column.is-2-desktop{ flex:none; width:16.66667% } .column.is-offset-2-desktop{ margin-left:16.66667% } .column.is-3-desktop{ flex:none; width:25% } .column.is-offset-3-desktop{ margin-left:25% } .column.is-4-desktop{ flex:none; width:33.33333% } .column.is-offset-4-desktop{ margin-left:33.33333% } .column.is-5-desktop{ flex:none; width:41.66667% } .column.is-offset-5-desktop{ margin-left:41.66667% } .column.is-6-desktop{ flex:none; width:50% } .column.is-offset-6-desktop{ margin-left:50% } .column.is-7-desktop{ flex:none; width:58.33333% } .column.is-offset-7-desktop{ margin-left:58.33333% } .column.is-8-desktop{ flex:none; width:66.66667% } .column.is-offset-8-desktop{ margin-left:66.66667% } .column.is-9-desktop{ flex:none; width:75% } .column.is-offset-9-desktop{ margin-left:75% } .column.is-10-desktop{ flex:none; width:83.33333% } .column.is-offset-10-desktop{ margin-left:83.33333% } .column.is-11-desktop{ flex:none; width:91.66667% } .column.is-offset-11-desktop{ margin-left:91.66667% } .column.is-12-desktop{ flex:none; width:100% } .column.is-offset-12-desktop{ margin-left:100% } } @media screen and (min-width:1216px){ .column.is-narrow-widescreen{ flex:none } .column.is-full-widescreen{ flex:none; width:100% } .column.is-three-quarters-widescreen{ flex:none; width:75% } .column.is-two-thirds-widescreen{ flex:none; width:66.6666% } .column.is-half-widescreen{ flex:none; width:50% } .column.is-one-third-widescreen{ flex:none; width:33.3333% } .column.is-one-quarter-widescreen{ flex:none; width:25% } .column.is-one-fifth-widescreen{ flex:none; width:20% } .column.is-two-fifths-widescreen{ flex:none; width:40% } .column.is-three-fifths-widescreen{ flex:none; width:60% } .column.is-four-fifths-widescreen{ flex:none; width:80% } .column.is-offset-three-quarters-widescreen{ margin-left:75% } .column.is-offset-two-thirds-widescreen{ margin-left:66.6666% } .column.is-offset-half-widescreen{ margin-left:50% } .column.is-offset-one-third-widescreen{ margin-left:33.3333% } .column.is-offset-one-quarter-widescreen{ margin-left:25% } .column.is-offset-one-fifth-widescreen{ margin-left:20% } .column.is-offset-two-fifths-widescreen{ margin-left:40% } .column.is-offset-three-fifths-widescreen{ margin-left:60% } .column.is-offset-four-fifths-widescreen{ margin-left:80% } .column.is-0-widescreen{ flex:none; width:0% } .column.is-offset-0-widescreen{ margin-left:0 } .column.is-1-widescreen{ flex:none; width:8.33333% } .column.is-offset-1-widescreen{ margin-left:8.33333% } .column.is-2-widescreen{ flex:none; width:16.66667% } .column.is-offset-2-widescreen{ margin-left:16.66667% } .column.is-3-widescreen{ flex:none; width:25% } .column.is-offset-3-widescreen{ margin-left:25% } .column.is-4-widescreen{ flex:none; width:33.33333% } .column.is-offset-4-widescreen{ margin-left:33.33333% } .column.is-5-widescreen{ flex:none; width:41.66667% } .column.is-offset-5-widescreen{ margin-left:41.66667% } .column.is-6-widescreen{ flex:none; width:50% } .column.is-offset-6-widescreen{ margin-left:50% } .column.is-7-widescreen{ flex:none; width:58.33333% } .column.is-offset-7-widescreen{ margin-left:58.33333% } .column.is-8-widescreen{ flex:none; width:66.66667% } .column.is-offset-8-widescreen{ margin-left:66.66667% } .column.is-9-widescreen{ flex:none; width:75% } .column.is-offset-9-widescreen{ margin-left:75% } .column.is-10-widescreen{ flex:none; width:83.33333% } .column.is-offset-10-widescreen{ margin-left:83.33333% } .column.is-11-widescreen{ flex:none; width:91.66667% } .column.is-offset-11-widescreen{ margin-left:91.66667% } .column.is-12-widescreen{ flex:none; width:100% } .column.is-offset-12-widescreen{ margin-left:100% } } @media screen and (min-width:1408px){ .column.is-narrow-fullhd{ flex:none } .column.is-full-fullhd{ flex:none; width:100% } .column.is-three-quarters-fullhd{ flex:none; width:75% } .column.is-two-thirds-fullhd{ flex:none; width:66.6666% } .column.is-half-fullhd{ flex:none; width:50% } .column.is-one-third-fullhd{ flex:none; width:33.3333% } .column.is-one-quarter-fullhd{ flex:none; width:25% } .column.is-one-fifth-fullhd{ flex:none; width:20% } .column.is-two-fifths-fullhd{ flex:none; width:40% } .column.is-three-fifths-fullhd{ flex:none; width:60% } .column.is-four-fifths-fullhd{ flex:none; width:80% } .column.is-offset-three-quarters-fullhd{ margin-left:75% } .column.is-offset-two-thirds-fullhd{ margin-left:66.6666% } .column.is-offset-half-fullhd{ margin-left:50% } .column.is-offset-one-third-fullhd{ margin-left:33.3333% } .column.is-offset-one-quarter-fullhd{ margin-left:25% } .column.is-offset-one-fifth-fullhd{ margin-left:20% } .column.is-offset-two-fifths-fullhd{ margin-left:40% } .column.is-offset-three-fifths-fullhd{ margin-left:60% } .column.is-offset-four-fifths-fullhd{ margin-left:80% } .column.is-0-fullhd{ flex:none; width:0% } .column.is-offset-0-fullhd{ margin-left:0 } .column.is-1-fullhd{ flex:none; width:8.33333% } .column.is-offset-1-fullhd{ margin-left:8.33333% } .column.is-2-fullhd{ flex:none; width:16.66667% } .column.is-offset-2-fullhd{ margin-left:16.66667% } .column.is-3-fullhd{ flex:none; width:25% } .column.is-offset-3-fullhd{ margin-left:25% } .column.is-4-fullhd{ flex:none; width:33.33333% } .column.is-offset-4-fullhd{ margin-left:33.33333% } .column.is-5-fullhd{ flex:none; width:41.66667% } .column.is-offset-5-fullhd{ margin-left:41.66667% } .column.is-6-fullhd{ flex:none; width:50% } .column.is-offset-6-fullhd{ margin-left:50% } .column.is-7-fullhd{ flex:none; width:58.33333% } .column.is-offset-7-fullhd{ margin-left:58.33333% } .column.is-8-fullhd{ flex:none; width:66.66667% } .column.is-offset-8-fullhd{ margin-left:66.66667% } .column.is-9-fullhd{ flex:none; width:75% } .column.is-offset-9-fullhd{ margin-left:75% } .column.is-10-fullhd{ flex:none; width:83.33333% } .column.is-offset-10-fullhd{ margin-left:83.33333% } .column.is-11-fullhd{ flex:none; width:91.66667% } .column.is-offset-11-fullhd{ margin-left:91.66667% } .column.is-12-fullhd{ flex:none; width:100% } .column.is-offset-12-fullhd{ margin-left:100% } } .columns{ margin-left:-.75rem; margin-right:-.75rem; margin-top:-.75rem } .columns:last-child{ margin-bottom:-.75rem } .columns:not(:last-child){ margin-bottom:calc(1.5rem - .75rem) } .columns.is-centered{ justify-content:center } .columns.is-gapless{ margin-left:0; margin-right:0; margin-top:0 } .columns.is-gapless>.column{ margin:0; padding:0!important } .columns.is-gapless:not(:last-child){ margin-bottom:1.5rem } .columns.is-gapless:last-child{ margin-bottom:0 } .columns.is-mobile{ display:flex } .columns.is-multiline{ flex-wrap:wrap } .columns.is-vcentered{ align-items:center } @media screen and (min-width:769px),print{ .columns:not(.is-desktop){ display:flex } } @media screen and (min-width:1024px){ .columns.is-desktop{ display:flex } } .columns.is-variable{ --columnGap:0.75rem; margin-left:calc(-1 * var(--columnGap)); margin-right:calc(-1 * var(--columnGap)) } .columns.is-variable .column{ padding-left:var(--columnGap); padding-right:var(--columnGap) } .columns.is-variable.is-0{ --columnGap:0rem } @media screen and (max-width:768px){ .columns.is-variable.is-0-mobile{ --columnGap:0rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-0-tablet{ --columnGap:0rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-0-tablet-only{ --columnGap:0rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-0-touch{ --columnGap:0rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-0-desktop{ --columnGap:0rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-0-desktop-only{ --columnGap:0rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-0-widescreen{ --columnGap:0rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-0-widescreen-only{ --columnGap:0rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-0-fullhd{ --columnGap:0rem } } .columns.is-variable.is-1{ --columnGap:0.25rem } @media screen and (max-width:768px){ .columns.is-variable.is-1-mobile{ --columnGap:0.25rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-1-tablet{ --columnGap:0.25rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-1-tablet-only{ --columnGap:0.25rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-1-touch{ --columnGap:0.25rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-1-desktop{ --columnGap:0.25rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-1-desktop-only{ --columnGap:0.25rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-1-widescreen{ --columnGap:0.25rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-1-widescreen-only{ --columnGap:0.25rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-1-fullhd{ --columnGap:0.25rem } } .columns.is-variable.is-2{ --columnGap:0.5rem } @media screen and (max-width:768px){ .columns.is-variable.is-2-mobile{ --columnGap:0.5rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-2-tablet{ --columnGap:0.5rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-2-tablet-only{ --columnGap:0.5rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-2-touch{ --columnGap:0.5rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-2-desktop{ --columnGap:0.5rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-2-desktop-only{ --columnGap:0.5rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-2-widescreen{ --columnGap:0.5rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-2-widescreen-only{ --columnGap:0.5rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-2-fullhd{ --columnGap:0.5rem } } .columns.is-variable.is-3{ --columnGap:0.75rem } @media screen and (max-width:768px){ .columns.is-variable.is-3-mobile{ --columnGap:0.75rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-3-tablet{ --columnGap:0.75rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-3-tablet-only{ --columnGap:0.75rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-3-touch{ --columnGap:0.75rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-3-desktop{ --columnGap:0.75rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-3-desktop-only{ --columnGap:0.75rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-3-widescreen{ --columnGap:0.75rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-3-widescreen-only{ --columnGap:0.75rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-3-fullhd{ --columnGap:0.75rem } } .columns.is-variable.is-4{ --columnGap:1rem } @media screen and (max-width:768px){ .columns.is-variable.is-4-mobile{ --columnGap:1rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-4-tablet{ --columnGap:1rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-4-tablet-only{ --columnGap:1rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-4-touch{ --columnGap:1rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-4-desktop{ --columnGap:1rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-4-desktop-only{ --columnGap:1rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-4-widescreen{ --columnGap:1rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-4-widescreen-only{ --columnGap:1rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-4-fullhd{ --columnGap:1rem } } .columns.is-variable.is-5{ --columnGap:1.25rem } @media screen and (max-width:768px){ .columns.is-variable.is-5-mobile{ --columnGap:1.25rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-5-tablet{ --columnGap:1.25rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-5-tablet-only{ --columnGap:1.25rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-5-touch{ --columnGap:1.25rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-5-desktop{ --columnGap:1.25rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-5-desktop-only{ --columnGap:1.25rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-5-widescreen{ --columnGap:1.25rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-5-widescreen-only{ --columnGap:1.25rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-5-fullhd{ --columnGap:1.25rem } } .columns.is-variable.is-6{ --columnGap:1.5rem } @media screen and (max-width:768px){ .columns.is-variable.is-6-mobile{ --columnGap:1.5rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-6-tablet{ --columnGap:1.5rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-6-tablet-only{ --columnGap:1.5rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-6-touch{ --columnGap:1.5rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-6-desktop{ --columnGap:1.5rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-6-desktop-only{ --columnGap:1.5rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-6-widescreen{ --columnGap:1.5rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-6-widescreen-only{ --columnGap:1.5rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-6-fullhd{ --columnGap:1.5rem } } .columns.is-variable.is-7{ --columnGap:1.75rem } @media screen and (max-width:768px){ .columns.is-variable.is-7-mobile{ --columnGap:1.75rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-7-tablet{ --columnGap:1.75rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-7-tablet-only{ --columnGap:1.75rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-7-touch{ --columnGap:1.75rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-7-desktop{ --columnGap:1.75rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-7-desktop-only{ --columnGap:1.75rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-7-widescreen{ --columnGap:1.75rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-7-widescreen-only{ --columnGap:1.75rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-7-fullhd{ --columnGap:1.75rem } } .columns.is-variable.is-8{ --columnGap:2rem } @media screen and (max-width:768px){ .columns.is-variable.is-8-mobile{ --columnGap:2rem } } @media screen and (min-width:769px),print{ .columns.is-variable.is-8-tablet{ --columnGap:2rem } } @media screen and (min-width:769px) and (max-width:1023px){ .columns.is-variable.is-8-tablet-only{ --columnGap:2rem } } @media screen and (max-width:1023px){ .columns.is-variable.is-8-touch{ --columnGap:2rem } } @media screen and (min-width:1024px){ .columns.is-variable.is-8-desktop{ --columnGap:2rem } } @media screen and (min-width:1024px) and (max-width:1215px){ .columns.is-variable.is-8-desktop-only{ --columnGap:2rem } } @media screen and (min-width:1216px){ .columns.is-variable.is-8-widescreen{ --columnGap:2rem } } @media screen and (min-width:1216px) and (max-width:1407px){ .columns.is-variable.is-8-widescreen-only{ --columnGap:2rem } } @media screen and (min-width:1408px){ .columns.is-variable.is-8-fullhd{ --columnGap:2rem } } .tile{ align-items:stretch; display:block; flex-basis:0; flex-grow:1; flex-shrink:1; min-height:-webkit-min-content; min-height:-moz-min-content; min-height:min-content } .tile.is-ancestor{ margin-left:-.75rem; margin-right:-.75rem; margin-top:-.75rem } .tile.is-ancestor:last-child{ margin-bottom:-.75rem } .tile.is-ancestor:not(:last-child){ margin-bottom:.75rem } .tile.is-child{ margin:0!important } .tile.is-parent{ padding:.75rem } .tile.is-vertical{ flex-direction:column } .tile.is-vertical>.tile.is-child:not(:last-child){ margin-bottom:1.5rem!important } @media screen and (min-width:769px),print{ .tile:not(.is-child){ display:flex } .tile.is-1{ flex:none; width:8.33333% } .tile.is-2{ flex:none; width:16.66667% } .tile.is-3{ flex:none; width:25% } .tile.is-4{ flex:none; width:33.33333% } .tile.is-5{ flex:none; width:41.66667% } .tile.is-6{ flex:none; width:50% } .tile.is-7{ flex:none; width:58.33333% } .tile.is-8{ flex:none; width:66.66667% } .tile.is-9{ flex:none; width:75% } .tile.is-10{ flex:none; width:83.33333% } .tile.is-11{ flex:none; width:91.66667% } .tile.is-12{ flex:none; width:100% } } .has-text-white{ color:#fff!important } a.has-text-white:focus,a.has-text-white:hover{ color:#e6e6e6!important } .has-background-white{ background-color:#fff!important } .has-text-black{ color:#0a0a0a!important } a.has-text-black:focus,a.has-text-black:hover{ color:#000!important } .has-background-black{ background-color:#0a0a0a!important } .has-text-light{ color:#f5f5f5!important } a.has-text-light:focus,a.has-text-light:hover{ color:#dbdbdb!important } .has-background-light{ background-color:#f5f5f5!important } .has-text-dark{ color:#363636!important } a.has-text-dark:focus,a.has-text-dark:hover{ color:#1c1c1c!important } .has-background-dark{ background-color:#363636!important } .has-text-primary{ color:#00d1b2!important } a.has-text-primary:focus,a.has-text-primary:hover{ color:#009e86!important } .has-background-primary{ background-color:#00d1b2!important } .has-text-primary-light{ color:#ebfffc!important } a.has-text-primary-light:focus,a.has-text-primary-light:hover{ color:#b8fff4!important } .has-background-primary-light{ background-color:#ebfffc!important } .has-text-primary-dark{ color:#00947e!important } a.has-text-primary-dark:focus,a.has-text-primary-dark:hover{ color:#00c7a9!important } .has-background-primary-dark{ background-color:#00947e!important } .has-text-link{ color:#3273dc!important } a.has-text-link:focus,a.has-text-link:hover{ color:#205bbc!important } .has-background-link{ background-color:#3273dc!important } .has-text-link-light{ color:#eef3fc!important } a.has-text-link-light:focus,a.has-text-link-light:hover{ color:#c2d5f5!important } .has-background-link-light{ background-color:#eef3fc!important } .has-text-link-dark{ color:#2160c4!important } a.has-text-link-dark:focus,a.has-text-link-dark:hover{ color:#3b79de!important } .has-background-link-dark{ background-color:#2160c4!important } .has-text-info{ color:#3298dc!important } a.has-text-info:focus,a.has-text-info:hover{ color:#207dbc!important } .has-background-info{ background-color:#3298dc!important } .has-text-info-light{ color:#eef6fc!important } a.has-text-info-light:focus,a.has-text-info-light:hover{ color:#c2e0f5!important } .has-background-info-light{ background-color:#eef6fc!important } .has-text-info-dark{ color:#1d72aa!important } a.has-text-info-dark:focus,a.has-text-info-dark:hover{ color:#248fd6!important } .has-background-info-dark{ background-color:#1d72aa!important } .has-text-success{ color:#48c774!important } a.has-text-success:focus,a.has-text-success:hover{ color:#34a85c!important } .has-background-success{ background-color:#48c774!important } .has-text-success-light{ color:#effaf3!important } a.has-text-success-light:focus,a.has-text-success-light:hover{ color:#c8eed6!important } .has-background-success-light{ background-color:#effaf3!important } .has-text-success-dark{ color:#257942!important } a.has-text-success-dark:focus,a.has-text-success-dark:hover{ color:#31a058!important } .has-background-success-dark{ background-color:#257942!important } .has-text-warning{ color:#ffdd57!important } a.has-text-warning:focus,a.has-text-warning:hover{ color:#ffd324!important } .has-background-warning{ background-color:#ffdd57!important } .has-text-warning-light{ color:#fffbeb!important } a.has-text-warning-light:focus,a.has-text-warning-light:hover{ color:#fff1b8!important } .has-background-warning-light{ background-color:#fffbeb!important } .has-text-warning-dark{ color:#947600!important } a.has-text-warning-dark:focus,a.has-text-warning-dark:hover{ color:#c79f00!important } .has-background-warning-dark{ background-color:#947600!important } .has-text-danger{ color:#f14668!important } a.has-text-danger:focus,a.has-text-danger:hover{ color:#ee1742!important } .has-background-danger{ background-color:#f14668!important } .has-text-danger-light{ color:#feecf0!important } a.has-text-danger-light:focus,a.has-text-danger-light:hover{ color:#fabdc9!important } .has-background-danger-light{ background-color:#feecf0!important } .has-text-danger-dark{ color:#cc0f35!important } a.has-text-danger-dark:focus,a.has-text-danger-dark:hover{ color:#ee2049!important } .has-background-danger-dark{ background-color:#cc0f35!important } .has-text-black-bis{ color:#121212!important } .has-background-black-bis{ background-color:#121212!important } .has-text-black-ter{ color:#242424!important } .has-background-black-ter{ background-color:#242424!important } .has-text-grey-darker{ color:#363636!important } .has-background-grey-darker{ background-color:#363636!important } .has-text-grey-dark{ color:#4a4a4a!important } .has-background-grey-dark{ background-color:#4a4a4a!important } .has-text-grey{ color:#7a7a7a!important } .has-background-grey{ background-color:#7a7a7a!important } .has-text-grey-light{ color:#b5b5b5!important } .has-background-grey-light{ background-color:#b5b5b5!important } .has-text-grey-lighter{ color:#dbdbdb!important } .has-background-grey-lighter{ background-color:#dbdbdb!important } .has-text-white-ter{ color:#f5f5f5!important } .has-background-white-ter{ background-color:#f5f5f5!important } .has-text-white-bis{ color:#fafafa!important } .has-background-white-bis{ background-color:#fafafa!important } .is-flex-direction-row{ flex-direction:row!important } .is-flex-direction-row-reverse{ flex-direction:row-reverse!important } .is-flex-direction-column{ flex-direction:column!important } .is-flex-direction-column-reverse{ flex-direction:column-reverse!important } .is-flex-wrap-nowrap{ flex-wrap:nowrap!important } .is-flex-wrap-wrap{ flex-wrap:wrap!important } .is-flex-wrap-wrap-reverse{ flex-wrap:wrap-reverse!important } .is-justify-content-flex-start{ justify-content:flex-start!important } .is-justify-content-flex-end{ justify-content:flex-end!important } .is-justify-content-center{ justify-content:center!important } .is-justify-content-space-between{ justify-content:space-between!important } .is-justify-content-space-around{ justify-content:space-around!important } .is-justify-content-space-evenly{ justify-content:space-evenly!important } .is-justify-content-start{ justify-content:start!important } .is-justify-content-end{ justify-content:end!important } .is-justify-content-left{ justify-content:left!important } .is-justify-content-right{ justify-content:right!important } .is-align-content-flex-start{ align-content:flex-start!important } .is-align-content-flex-end{ align-content:flex-end!important } .is-align-content-center{ align-content:center!important } .is-align-content-space-between{ align-content:space-between!important } .is-align-content-space-around{ align-content:space-around!important } .is-align-content-space-evenly{ align-content:space-evenly!important } .is-align-content-stretch{ align-content:stretch!important } .is-align-content-start{ align-content:start!important } .is-align-content-end{ align-content:end!important } .is-align-content-baseline{ align-content:baseline!important } .is-align-items-stretch{ align-items:stretch!important } .is-align-items-flex-start{ align-items:flex-start!important } .is-align-items-flex-end{ align-items:flex-end!important } .is-align-items-center{ align-items:center!important } .is-align-items-baseline{ align-items:baseline!important } .is-align-items-start{ align-items:start!important } .is-align-items-end{ align-items:end!important } .is-align-items-self-start{ align-items:self-start!important } .is-align-items-self-end{ align-items:self-end!important } .is-align-self-auto{ align-self:auto!important } .is-align-self-flex-start{ align-self:flex-start!important } .is-align-self-flex-end{ align-self:flex-end!important } .is-align-self-center{ align-self:center!important } .is-align-self-baseline{ align-self:baseline!important } .is-align-self-stretch{ align-self:stretch!important } .is-flex-grow-0{ flex-grow:0!important } .is-flex-grow-1{ flex-grow:1!important } .is-flex-grow-2{ flex-grow:2!important } .is-flex-grow-3{ flex-grow:3!important } .is-flex-grow-4{ flex-grow:4!important } .is-flex-grow-5{ flex-grow:5!important } .is-flex-shrink-0{ flex-shrink:0!important } .is-flex-shrink-1{ flex-shrink:1!important } .is-flex-shrink-2{ flex-shrink:2!important } .is-flex-shrink-3{ flex-shrink:3!important } .is-flex-shrink-4{ flex-shrink:4!important } .is-flex-shrink-5{ flex-shrink:5!important } .is-clearfix::after{ clear:both; content:" "; display:table } .is-pulled-left{ float:left!important } .is-pulled-right{ float:right!important } .is-radiusless{ border-radius:0!important } .is-shadowless{ box-shadow:none!important } .is-clickable{ cursor:pointer!important } .is-clipped{ overflow:hidden!important } .is-relative{ position:relative!important } .is-marginless{ margin:0!important } .is-paddingless{ padding:0!important } .m-0{ margin:0!important } .mt-0{ margin-top:0!important } .mr-0{ margin-right:0!important } .mb-0{ margin-bottom:0!important } .ml-0{ margin-left:0!important } .mx-0{ margin-left:0!important; margin-right:0!important } .my-0{ margin-top:0!important; margin-bottom:0!important } .m-1{ margin:.25rem!important } .mt-1{ margin-top:.25rem!important } .mr-1{ margin-right:.25rem!important } .mb-1{ margin-bottom:.25rem!important } .ml-1{ margin-left:.25rem!important } .mx-1{ margin-left:.25rem!important; margin-right:.25rem!important } .my-1{ margin-top:.25rem!important; margin-bottom:.25rem!important } .m-2{ margin:.5rem!important } .mt-2{ margin-top:.5rem!important } .mr-2{ margin-right:.5rem!important } .mb-2{ margin-bottom:.5rem!important } .ml-2{ margin-left:.5rem!important } .mx-2{ margin-left:.5rem!important; margin-right:.5rem!important } .my-2{ margin-top:.5rem!important; margin-bottom:.5rem!important } .m-3{ margin:.75rem!important } .mt-3{ margin-top:.75rem!important } .mr-3{ margin-right:.75rem!important } .mb-3{ margin-bottom:.75rem!important } .ml-3{ margin-left:.75rem!important } .mx-3{ margin-left:.75rem!important; margin-right:.75rem!important } .my-3{ margin-top:.75rem!important; margin-bottom:.75rem!important } .m-4{ margin:1rem!important } .mt-4{ margin-top:1rem!important } .mr-4{ margin-right:1rem!important } .mb-4{ margin-bottom:1rem!important } .ml-4{ margin-left:1rem!important } .mx-4{ margin-left:1rem!important; margin-right:1rem!important } .my-4{ margin-top:1rem!important; margin-bottom:1rem!important } .m-5{ margin:1.5rem!important } .mt-5{ margin-top:1.5rem!important } .mr-5{ margin-right:1.5rem!important } .mb-5{ margin-bottom:1.5rem!important } .ml-5{ margin-left:1.5rem!important } .mx-5{ margin-left:1.5rem!important; margin-right:1.5rem!important } .my-5{ margin-top:1.5rem!important; margin-bottom:1.5rem!important } .m-6{ margin:3rem!important } .mt-6{ margin-top:3rem!important } .mr-6{ margin-right:3rem!important } .mb-6{ margin-bottom:3rem!important } .ml-6{ margin-left:3rem!important } .mx-6{ margin-left:3rem!important; margin-right:3rem!important } .my-6{ margin-top:3rem!important; margin-bottom:3rem!important } .p-0{ padding:0!important } .pt-0{ padding-top:0!important } .pr-0{ padding-right:0!important } .pb-0{ padding-bottom:0!important } .pl-0{ padding-left:0!important } .px-0{ padding-left:0!important; padding-right:0!important } .py-0{ padding-top:0!important; padding-bottom:0!important } .p-1{ padding:.25rem!important } .pt-1{ padding-top:.25rem!important } .pr-1{ padding-right:.25rem!important } .pb-1{ padding-bottom:.25rem!important } .pl-1{ padding-left:.25rem!important } .px-1{ padding-left:.25rem!important; padding-right:.25rem!important } .py-1{ padding-top:.25rem!important; padding-bottom:.25rem!important } .p-2{ padding:.5rem!important } .pt-2{ padding-top:.5rem!important } .pr-2{ padding-right:.5rem!important } .pb-2{ padding-bottom:.5rem!important } .pl-2{ padding-left:.5rem!important } .px-2{ padding-left:.5rem!important; padding-right:.5rem!important } .py-2{ padding-top:.5rem!important; padding-bottom:.5rem!important } .p-3{ padding:.75rem!important } .pt-3{ padding-top:.75rem!important } .pr-3{ padding-right:.75rem!important } .pb-3{ padding-bottom:.75rem!important } .pl-3{ padding-left:.75rem!important } .px-3{ padding-left:.75rem!important; padding-right:.75rem!important } .py-3{ padding-top:.75rem!important; padding-bottom:.75rem!important } .p-4{ padding:1rem!important } .pt-4{ padding-top:1rem!important } .pr-4{ padding-right:1rem!important } .pb-4{ padding-bottom:1rem!important } .pl-4{ padding-left:1rem!important } .px-4{ padding-left:1rem!important; padding-right:1rem!important } .py-4{ padding-top:1rem!important; padding-bottom:1rem!important } .p-5{ padding:1.5rem!important } .pt-5{ padding-top:1.5rem!important } .pr-5{ padding-right:1.5rem!important } .pb-5{ padding-bottom:1.5rem!important } .pl-5{ padding-left:1.5rem!important } .px-5{ padding-left:1.5rem!important; padding-right:1.5rem!important } .py-5{ padding-top:1.5rem!important; padding-bottom:1.5rem!important } .p-6{ padding:3rem!important } .pt-6{ padding-top:3rem!important } .pr-6{ padding-right:3rem!important } .pb-6{ padding-bottom:3rem!important } .pl-6{ padding-left:3rem!important } .px-6{ padding-left:3rem!important; padding-right:3rem!important } .py-6{ padding-top:3rem!important; padding-bottom:3rem!important } .is-size-1{ font-size:3rem!important } .is-size-2{ font-size:2.5rem!important } .is-size-3{ font-size:2rem!important } .is-size-4{ font-size:1.5rem!important } .is-size-5{ font-size:1.25rem!important } .is-size-6{ font-size:1rem!important } .is-size-7{ font-size:.75rem!important } @media screen and (max-width:768px){ .is-size-1-mobile{ font-size:3rem!important } .is-size-2-mobile{ font-size:2.5rem!important } .is-size-3-mobile{ font-size:2rem!important } .is-size-4-mobile{ font-size:1.5rem!important } .is-size-5-mobile{ font-size:1.25rem!important } .is-size-6-mobile{ font-size:1rem!important } .is-size-7-mobile{ font-size:.75rem!important } } @media screen and (min-width:769px),print{ .is-size-1-tablet{ font-size:3rem!important } .is-size-2-tablet{ font-size:2.5rem!important } .is-size-3-tablet{ font-size:2rem!important } .is-size-4-tablet{ font-size:1.5rem!important } .is-size-5-tablet{ font-size:1.25rem!important } .is-size-6-tablet{ font-size:1rem!important } .is-size-7-tablet{ font-size:.75rem!important } } @media screen and (max-width:1023px){ .is-size-1-touch{ font-size:3rem!important } .is-size-2-touch{ font-size:2.5rem!important } .is-size-3-touch{ font-size:2rem!important } .is-size-4-touch{ font-size:1.5rem!important } .is-size-5-touch{ font-size:1.25rem!important } .is-size-6-touch{ font-size:1rem!important } .is-size-7-touch{ font-size:.75rem!important } } @media screen and (min-width:1024px){ .is-size-1-desktop{ font-size:3rem!important } .is-size-2-desktop{ font-size:2.5rem!important } .is-size-3-desktop{ font-size:2rem!important } .is-size-4-desktop{ font-size:1.5rem!important } .is-size-5-desktop{ font-size:1.25rem!important } .is-size-6-desktop{ font-size:1rem!important } .is-size-7-desktop{ font-size:.75rem!important } } @media screen and (min-width:1216px){ .is-size-1-widescreen{ font-size:3rem!important } .is-size-2-widescreen{ font-size:2.5rem!important } .is-size-3-widescreen{ font-size:2rem!important } .is-size-4-widescreen{ font-size:1.5rem!important } .is-size-5-widescreen{ font-size:1.25rem!important } .is-size-6-widescreen{ font-size:1rem!important } .is-size-7-widescreen{ font-size:.75rem!important } } @media screen and (min-width:1408px){ .is-size-1-fullhd{ font-size:3rem!important } .is-size-2-fullhd{ font-size:2.5rem!important } .is-size-3-fullhd{ font-size:2rem!important } .is-size-4-fullhd{ font-size:1.5rem!important } .is-size-5-fullhd{ font-size:1.25rem!important } .is-size-6-fullhd{ font-size:1rem!important } .is-size-7-fullhd{ font-size:.75rem!important } } .has-text-centered{ text-align:center!important } .has-text-justified{ text-align:justify!important } .has-text-left{ text-align:left!important } .has-text-right{ text-align:right!important } @media screen and (max-width:768px){ .has-text-centered-mobile{ text-align:center!important } } @media screen and (min-width:769px),print{ .has-text-centered-tablet{ text-align:center!important } } @media screen and (min-width:769px) and (max-width:1023px){ .has-text-centered-tablet-only{ text-align:center!important } } @media screen and (max-width:1023px){ .has-text-centered-touch{ text-align:center!important } } @media screen and (min-width:1024px){ .has-text-centered-desktop{ text-align:center!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .has-text-centered-desktop-only{ text-align:center!important } } @media screen and (min-width:1216px){ .has-text-centered-widescreen{ text-align:center!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .has-text-centered-widescreen-only{ text-align:center!important } } @media screen and (min-width:1408px){ .has-text-centered-fullhd{ text-align:center!important } } @media screen and (max-width:768px){ .has-text-justified-mobile{ text-align:justify!important } } @media screen and (min-width:769px),print{ .has-text-justified-tablet{ text-align:justify!important } } @media screen and (min-width:769px) and (max-width:1023px){ .has-text-justified-tablet-only{ text-align:justify!important } } @media screen and (max-width:1023px){ .has-text-justified-touch{ text-align:justify!important } } @media screen and (min-width:1024px){ .has-text-justified-desktop{ text-align:justify!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .has-text-justified-desktop-only{ text-align:justify!important } } @media screen and (min-width:1216px){ .has-text-justified-widescreen{ text-align:justify!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .has-text-justified-widescreen-only{ text-align:justify!important } } @media screen and (min-width:1408px){ .has-text-justified-fullhd{ text-align:justify!important } } @media screen and (max-width:768px){ .has-text-left-mobile{ text-align:left!important } } @media screen and (min-width:769px),print{ .has-text-left-tablet{ text-align:left!important } } @media screen and (min-width:769px) and (max-width:1023px){ .has-text-left-tablet-only{ text-align:left!important } } @media screen and (max-width:1023px){ .has-text-left-touch{ text-align:left!important } } @media screen and (min-width:1024px){ .has-text-left-desktop{ text-align:left!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .has-text-left-desktop-only{ text-align:left!important } } @media screen and (min-width:1216px){ .has-text-left-widescreen{ text-align:left!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .has-text-left-widescreen-only{ text-align:left!important } } @media screen and (min-width:1408px){ .has-text-left-fullhd{ text-align:left!important } } @media screen and (max-width:768px){ .has-text-right-mobile{ text-align:right!important } } @media screen and (min-width:769px),print{ .has-text-right-tablet{ text-align:right!important } } @media screen and (min-width:769px) and (max-width:1023px){ .has-text-right-tablet-only{ text-align:right!important } } @media screen and (max-width:1023px){ .has-text-right-touch{ text-align:right!important } } @media screen and (min-width:1024px){ .has-text-right-desktop{ text-align:right!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .has-text-right-desktop-only{ text-align:right!important } } @media screen and (min-width:1216px){ .has-text-right-widescreen{ text-align:right!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .has-text-right-widescreen-only{ text-align:right!important } } @media screen and (min-width:1408px){ .has-text-right-fullhd{ text-align:right!important } } .is-capitalized{ text-transform:capitalize!important } .is-lowercase{ text-transform:lowercase!important } .is-uppercase{ text-transform:uppercase!important } .is-italic{ font-style:italic!important } .has-text-weight-light{ font-weight:300!important } .has-text-weight-normal{ font-weight:400!important } .has-text-weight-medium{ font-weight:500!important } .has-text-weight-semibold{ font-weight:600!important } .has-text-weight-bold{ font-weight:700!important } .is-family-primary{ font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif!important } .is-family-secondary{ font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif!important } .is-family-sans-serif{ font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif!important } .is-family-monospace{ font-family:monospace!important } .is-family-code{ font-family:monospace!important } .is-block{ display:block!important } @media screen and (max-width:768px){ .is-block-mobile{ display:block!important } } @media screen and (min-width:769px),print{ .is-block-tablet{ display:block!important } } @media screen and (min-width:769px) and (max-width:1023px){ .is-block-tablet-only{ display:block!important } } @media screen and (max-width:1023px){ .is-block-touch{ display:block!important } } @media screen and (min-width:1024px){ .is-block-desktop{ display:block!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .is-block-desktop-only{ display:block!important } } @media screen and (min-width:1216px){ .is-block-widescreen{ display:block!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .is-block-widescreen-only{ display:block!important } } @media screen and (min-width:1408px){ .is-block-fullhd{ display:block!important } } .is-flex{ display:flex!important } @media screen and (max-width:768px){ .is-flex-mobile{ display:flex!important } } @media screen and (min-width:769px),print{ .is-flex-tablet{ display:flex!important } } @media screen and (min-width:769px) and (max-width:1023px){ .is-flex-tablet-only{ display:flex!important } } @media screen and (max-width:1023px){ .is-flex-touch{ display:flex!important } } @media screen and (min-width:1024px){ .is-flex-desktop{ display:flex!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .is-flex-desktop-only{ display:flex!important } } @media screen and (min-width:1216px){ .is-flex-widescreen{ display:flex!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .is-flex-widescreen-only{ display:flex!important } } @media screen and (min-width:1408px){ .is-flex-fullhd{ display:flex!important } } .is-inline{ display:inline!important } @media screen and (max-width:768px){ .is-inline-mobile{ display:inline!important } } @media screen and (min-width:769px),print{ .is-inline-tablet{ display:inline!important } } @media screen and (min-width:769px) and (max-width:1023px){ .is-inline-tablet-only{ display:inline!important } } @media screen and (max-width:1023px){ .is-inline-touch{ display:inline!important } } @media screen and (min-width:1024px){ .is-inline-desktop{ display:inline!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .is-inline-desktop-only{ display:inline!important } } @media screen and (min-width:1216px){ .is-inline-widescreen{ display:inline!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .is-inline-widescreen-only{ display:inline!important } } @media screen and (min-width:1408px){ .is-inline-fullhd{ display:inline!important } } .is-inline-block{ display:inline-block!important } @media screen and (max-width:768px){ .is-inline-block-mobile{ display:inline-block!important } } @media screen and (min-width:769px),print{ .is-inline-block-tablet{ display:inline-block!important } } @media screen and (min-width:769px) and (max-width:1023px){ .is-inline-block-tablet-only{ display:inline-block!important } } @media screen and (max-width:1023px){ .is-inline-block-touch{ display:inline-block!important } } @media screen and (min-width:1024px){ .is-inline-block-desktop{ display:inline-block!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .is-inline-block-desktop-only{ display:inline-block!important } } @media screen and (min-width:1216px){ .is-inline-block-widescreen{ display:inline-block!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .is-inline-block-widescreen-only{ display:inline-block!important } } @media screen and (min-width:1408px){ .is-inline-block-fullhd{ display:inline-block!important } } .is-inline-flex{ display:inline-flex!important } @media screen and (max-width:768px){ .is-inline-flex-mobile{ display:inline-flex!important } } @media screen and (min-width:769px),print{ .is-inline-flex-tablet{ display:inline-flex!important } } @media screen and (min-width:769px) and (max-width:1023px){ .is-inline-flex-tablet-only{ display:inline-flex!important } } @media screen and (max-width:1023px){ .is-inline-flex-touch{ display:inline-flex!important } } @media screen and (min-width:1024px){ .is-inline-flex-desktop{ display:inline-flex!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .is-inline-flex-desktop-only{ display:inline-flex!important } } @media screen and (min-width:1216px){ .is-inline-flex-widescreen{ display:inline-flex!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .is-inline-flex-widescreen-only{ display:inline-flex!important } } @media screen and (min-width:1408px){ .is-inline-flex-fullhd{ display:inline-flex!important } } .is-hidden{ display:none!important } .is-sr-only{ border:none!important; clip:rect(0,0,0,0)!important; height:.01em!important; overflow:hidden!important; padding:0!important; position:absolute!important; white-space:nowrap!important; width:.01em!important } @media screen and (max-width:768px){ .is-hidden-mobile{ display:none!important } } @media screen and (min-width:769px),print{ .is-hidden-tablet{ display:none!important } } @media screen and (min-width:769px) and (max-width:1023px){ .is-hidden-tablet-only{ display:none!important } } @media screen and (max-width:1023px){ .is-hidden-touch{ display:none!important } } @media screen and (min-width:1024px){ .is-hidden-desktop{ display:none!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .is-hidden-desktop-only{ display:none!important } } @media screen and (min-width:1216px){ .is-hidden-widescreen{ display:none!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .is-hidden-widescreen-only{ display:none!important } } @media screen and (min-width:1408px){ .is-hidden-fullhd{ display:none!important } } .is-invisible{ visibility:hidden!important } @media screen and (max-width:768px){ .is-invisible-mobile{ visibility:hidden!important } } @media screen and (min-width:769px),print{ .is-invisible-tablet{ visibility:hidden!important } } @media screen and (min-width:769px) and (max-width:1023px){ .is-invisible-tablet-only{ visibility:hidden!important } } @media screen and (max-width:1023px){ .is-invisible-touch{ visibility:hidden!important } } @media screen and (min-width:1024px){ .is-invisible-desktop{ visibility:hidden!important } } @media screen and (min-width:1024px) and (max-width:1215px){ .is-invisible-desktop-only{ visibility:hidden!important } } @media screen and (min-width:1216px){ .is-invisible-widescreen{ visibility:hidden!important } } @media screen and (min-width:1216px) and (max-width:1407px){ .is-invisible-widescreen-only{ visibility:hidden!important } } @media screen and (min-width:1408px){ .is-invisible-fullhd{ visibility:hidden!important } } .hero{ align-items:stretch; display:flex; flex-direction:column; justify-content:space-between } .hero .navbar{ background:0 0 } .hero .tabs ul{ border-bottom:none } .hero.is-white{ background-color:#fff; color:#0a0a0a } .hero.is-white a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-white strong{ color:inherit } .hero.is-white .title{ color:#0a0a0a } .hero.is-white .subtitle{ color:rgba(10,10,10,.9) } .hero.is-white .subtitle a:not(.button),.hero.is-white .subtitle strong{ color:#0a0a0a } @media screen and (max-width:1023px){ .hero.is-white .navbar-menu{ background-color:#fff } } .hero.is-white .navbar-item,.hero.is-white .navbar-link{ color:rgba(10,10,10,.7) } .hero.is-white .navbar-link.is-active,.hero.is-white .navbar-link:hover,.hero.is-white a.navbar-item.is-active,.hero.is-white a.navbar-item:hover{ background-color:#f2f2f2; color:#0a0a0a } .hero.is-white .tabs a{ color:#0a0a0a; opacity:.9 } .hero.is-white .tabs a:hover{ opacity:1 } .hero.is-white .tabs li.is-active a{ opacity:1 } .hero.is-white .tabs.is-boxed a,.hero.is-white .tabs.is-toggle a{ color:#0a0a0a } .hero.is-white .tabs.is-boxed a:hover,.hero.is-white .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-white .tabs.is-boxed li.is-active a,.hero.is-white .tabs.is-boxed li.is-active a:hover,.hero.is-white .tabs.is-toggle li.is-active a,.hero.is-white .tabs.is-toggle li.is-active a:hover{ background-color:#0a0a0a; border-color:#0a0a0a; color:#fff } .hero.is-white.is-bold{ background-image:linear-gradient(141deg,#e6e6e6 0,#fff 71%,#fff 100%) } @media screen and (max-width:768px){ .hero.is-white.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#e6e6e6 0,#fff 71%,#fff 100%) } } .hero.is-black{ background-color:#0a0a0a; color:#fff } .hero.is-black a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-black strong{ color:inherit } .hero.is-black .title{ color:#fff } .hero.is-black .subtitle{ color:rgba(255,255,255,.9) } .hero.is-black .subtitle a:not(.button),.hero.is-black .subtitle strong{ color:#fff } @media screen and (max-width:1023px){ .hero.is-black .navbar-menu{ background-color:#0a0a0a } } .hero.is-black .navbar-item,.hero.is-black .navbar-link{ color:rgba(255,255,255,.7) } .hero.is-black .navbar-link.is-active,.hero.is-black .navbar-link:hover,.hero.is-black a.navbar-item.is-active,.hero.is-black a.navbar-item:hover{ background-color:#000; color:#fff } .hero.is-black .tabs a{ color:#fff; opacity:.9 } .hero.is-black .tabs a:hover{ opacity:1 } .hero.is-black .tabs li.is-active a{ opacity:1 } .hero.is-black .tabs.is-boxed a,.hero.is-black .tabs.is-toggle a{ color:#fff } .hero.is-black .tabs.is-boxed a:hover,.hero.is-black .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-black .tabs.is-boxed li.is-active a,.hero.is-black .tabs.is-boxed li.is-active a:hover,.hero.is-black .tabs.is-toggle li.is-active a,.hero.is-black .tabs.is-toggle li.is-active a:hover{ background-color:#fff; border-color:#fff; color:#0a0a0a } .hero.is-black.is-bold{ background-image:linear-gradient(141deg,#000 0,#0a0a0a 71%,#181616 100%) } @media screen and (max-width:768px){ .hero.is-black.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#000 0,#0a0a0a 71%,#181616 100%) } } .hero.is-light{ background-color:#f5f5f5; color:rgba(0,0,0,.7) } .hero.is-light a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-light strong{ color:inherit } .hero.is-light .title{ color:rgba(0,0,0,.7) } .hero.is-light .subtitle{ color:rgba(0,0,0,.9) } .hero.is-light .subtitle a:not(.button),.hero.is-light .subtitle strong{ color:rgba(0,0,0,.7) } @media screen and (max-width:1023px){ .hero.is-light .navbar-menu{ background-color:#f5f5f5 } } .hero.is-light .navbar-item,.hero.is-light .navbar-link{ color:rgba(0,0,0,.7) } .hero.is-light .navbar-link.is-active,.hero.is-light .navbar-link:hover,.hero.is-light a.navbar-item.is-active,.hero.is-light a.navbar-item:hover{ background-color:#e8e8e8; color:rgba(0,0,0,.7) } .hero.is-light .tabs a{ color:rgba(0,0,0,.7); opacity:.9 } .hero.is-light .tabs a:hover{ opacity:1 } .hero.is-light .tabs li.is-active a{ opacity:1 } .hero.is-light .tabs.is-boxed a,.hero.is-light .tabs.is-toggle a{ color:rgba(0,0,0,.7) } .hero.is-light .tabs.is-boxed a:hover,.hero.is-light .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-light .tabs.is-boxed li.is-active a,.hero.is-light .tabs.is-boxed li.is-active a:hover,.hero.is-light .tabs.is-toggle li.is-active a,.hero.is-light .tabs.is-toggle li.is-active a:hover{ background-color:rgba(0,0,0,.7); border-color:rgba(0,0,0,.7); color:#f5f5f5 } .hero.is-light.is-bold{ background-image:linear-gradient(141deg,#dfd8d9 0,#f5f5f5 71%,#fff 100%) } @media screen and (max-width:768px){ .hero.is-light.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#dfd8d9 0,#f5f5f5 71%,#fff 100%) } } .hero.is-dark{ background-color:#363636; color:#fff } .hero.is-dark a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-dark strong{ color:inherit } .hero.is-dark .title{ color:#fff } .hero.is-dark .subtitle{ color:rgba(255,255,255,.9) } .hero.is-dark .subtitle a:not(.button),.hero.is-dark .subtitle strong{ color:#fff } @media screen and (max-width:1023px){ .hero.is-dark .navbar-menu{ background-color:#363636 } } .hero.is-dark .navbar-item,.hero.is-dark .navbar-link{ color:rgba(255,255,255,.7) } .hero.is-dark .navbar-link.is-active,.hero.is-dark .navbar-link:hover,.hero.is-dark a.navbar-item.is-active,.hero.is-dark a.navbar-item:hover{ background-color:#292929; color:#fff } .hero.is-dark .tabs a{ color:#fff; opacity:.9 } .hero.is-dark .tabs a:hover{ opacity:1 } .hero.is-dark .tabs li.is-active a{ opacity:1 } .hero.is-dark .tabs.is-boxed a,.hero.is-dark .tabs.is-toggle a{ color:#fff } .hero.is-dark .tabs.is-boxed a:hover,.hero.is-dark .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-dark .tabs.is-boxed li.is-active a,.hero.is-dark .tabs.is-boxed li.is-active a:hover,.hero.is-dark .tabs.is-toggle li.is-active a,.hero.is-dark .tabs.is-toggle li.is-active a:hover{ background-color:#fff; border-color:#fff; color:#363636 } .hero.is-dark.is-bold{ background-image:linear-gradient(141deg,#1f191a 0,#363636 71%,#46403f 100%) } @media screen and (max-width:768px){ .hero.is-dark.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#1f191a 0,#363636 71%,#46403f 100%) } } .hero.is-primary{ background-color:#00d1b2; color:#fff } .hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-primary strong{ color:inherit } .hero.is-primary .title{ color:#fff } .hero.is-primary .subtitle{ color:rgba(255,255,255,.9) } .hero.is-primary .subtitle a:not(.button),.hero.is-primary .subtitle strong{ color:#fff } @media screen and (max-width:1023px){ .hero.is-primary .navbar-menu{ background-color:#00d1b2 } } .hero.is-primary .navbar-item,.hero.is-primary .navbar-link{ color:rgba(255,255,255,.7) } .hero.is-primary .navbar-link.is-active,.hero.is-primary .navbar-link:hover,.hero.is-primary a.navbar-item.is-active,.hero.is-primary a.navbar-item:hover{ background-color:#00b89c; color:#fff } .hero.is-primary .tabs a{ color:#fff; opacity:.9 } .hero.is-primary .tabs a:hover{ opacity:1 } .hero.is-primary .tabs li.is-active a{ opacity:1 } .hero.is-primary .tabs.is-boxed a,.hero.is-primary .tabs.is-toggle a{ color:#fff } .hero.is-primary .tabs.is-boxed a:hover,.hero.is-primary .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-primary .tabs.is-boxed li.is-active a,.hero.is-primary .tabs.is-boxed li.is-active a:hover,.hero.is-primary .tabs.is-toggle li.is-active a,.hero.is-primary .tabs.is-toggle li.is-active a:hover{ background-color:#fff; border-color:#fff; color:#00d1b2 } .hero.is-primary.is-bold{ background-image:linear-gradient(141deg,#009e6c 0,#00d1b2 71%,#00e7eb 100%) } @media screen and (max-width:768px){ .hero.is-primary.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#009e6c 0,#00d1b2 71%,#00e7eb 100%) } } .hero.is-link{ background-color:#3273dc; color:#fff } .hero.is-link a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-link strong{ color:inherit } .hero.is-link .title{ color:#fff } .hero.is-link .subtitle{ color:rgba(255,255,255,.9) } .hero.is-link .subtitle a:not(.button),.hero.is-link .subtitle strong{ color:#fff } @media screen and (max-width:1023px){ .hero.is-link .navbar-menu{ background-color:#3273dc } } .hero.is-link .navbar-item,.hero.is-link .navbar-link{ color:rgba(255,255,255,.7) } .hero.is-link .navbar-link.is-active,.hero.is-link .navbar-link:hover,.hero.is-link a.navbar-item.is-active,.hero.is-link a.navbar-item:hover{ background-color:#2366d1; color:#fff } .hero.is-link .tabs a{ color:#fff; opacity:.9 } .hero.is-link .tabs a:hover{ opacity:1 } .hero.is-link .tabs li.is-active a{ opacity:1 } .hero.is-link .tabs.is-boxed a,.hero.is-link .tabs.is-toggle a{ color:#fff } .hero.is-link .tabs.is-boxed a:hover,.hero.is-link .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-link .tabs.is-boxed li.is-active a,.hero.is-link .tabs.is-boxed li.is-active a:hover,.hero.is-link .tabs.is-toggle li.is-active a,.hero.is-link .tabs.is-toggle li.is-active a:hover{ background-color:#fff; border-color:#fff; color:#3273dc } .hero.is-link.is-bold{ background-image:linear-gradient(141deg,#1577c6 0,#3273dc 71%,#4366e5 100%) } @media screen and (max-width:768px){ .hero.is-link.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#1577c6 0,#3273dc 71%,#4366e5 100%) } } .hero.is-info{ background-color:#3298dc; color:#fff } .hero.is-info a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-info strong{ color:inherit } .hero.is-info .title{ color:#fff } .hero.is-info .subtitle{ color:rgba(255,255,255,.9) } .hero.is-info .subtitle a:not(.button),.hero.is-info .subtitle strong{ color:#fff } @media screen and (max-width:1023px){ .hero.is-info .navbar-menu{ background-color:#3298dc } } .hero.is-info .navbar-item,.hero.is-info .navbar-link{ color:rgba(255,255,255,.7) } .hero.is-info .navbar-link.is-active,.hero.is-info .navbar-link:hover,.hero.is-info a.navbar-item.is-active,.hero.is-info a.navbar-item:hover{ background-color:#238cd1; color:#fff } .hero.is-info .tabs a{ color:#fff; opacity:.9 } .hero.is-info .tabs a:hover{ opacity:1 } .hero.is-info .tabs li.is-active a{ opacity:1 } .hero.is-info .tabs.is-boxed a,.hero.is-info .tabs.is-toggle a{ color:#fff } .hero.is-info .tabs.is-boxed a:hover,.hero.is-info .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-info .tabs.is-boxed li.is-active a,.hero.is-info .tabs.is-boxed li.is-active a:hover,.hero.is-info .tabs.is-toggle li.is-active a,.hero.is-info .tabs.is-toggle li.is-active a:hover{ background-color:#fff; border-color:#fff; color:#3298dc } .hero.is-info.is-bold{ background-image:linear-gradient(141deg,#159dc6 0,#3298dc 71%,#4389e5 100%) } @media screen and (max-width:768px){ .hero.is-info.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#159dc6 0,#3298dc 71%,#4389e5 100%) } } .hero.is-success{ background-color:#48c774; color:#fff } .hero.is-success a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-success strong{ color:inherit } .hero.is-success .title{ color:#fff } .hero.is-success .subtitle{ color:rgba(255,255,255,.9) } .hero.is-success .subtitle a:not(.button),.hero.is-success .subtitle strong{ color:#fff } @media screen and (max-width:1023px){ .hero.is-success .navbar-menu{ background-color:#48c774 } } .hero.is-success .navbar-item,.hero.is-success .navbar-link{ color:rgba(255,255,255,.7) } .hero.is-success .navbar-link.is-active,.hero.is-success .navbar-link:hover,.hero.is-success a.navbar-item.is-active,.hero.is-success a.navbar-item:hover{ background-color:#3abb67; color:#fff } .hero.is-success .tabs a{ color:#fff; opacity:.9 } .hero.is-success .tabs a:hover{ opacity:1 } .hero.is-success .tabs li.is-active a{ opacity:1 } .hero.is-success .tabs.is-boxed a,.hero.is-success .tabs.is-toggle a{ color:#fff } .hero.is-success .tabs.is-boxed a:hover,.hero.is-success .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-success .tabs.is-boxed li.is-active a,.hero.is-success .tabs.is-boxed li.is-active a:hover,.hero.is-success .tabs.is-toggle li.is-active a,.hero.is-success .tabs.is-toggle li.is-active a:hover{ background-color:#fff; border-color:#fff; color:#48c774 } .hero.is-success.is-bold{ background-image:linear-gradient(141deg,#29b342 0,#48c774 71%,#56d296 100%) } @media screen and (max-width:768px){ .hero.is-success.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#29b342 0,#48c774 71%,#56d296 100%) } } .hero.is-warning{ background-color:#ffdd57; color:rgba(0,0,0,.7) } .hero.is-warning a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-warning strong{ color:inherit } .hero.is-warning .title{ color:rgba(0,0,0,.7) } .hero.is-warning .subtitle{ color:rgba(0,0,0,.9) } .hero.is-warning .subtitle a:not(.button),.hero.is-warning .subtitle strong{ color:rgba(0,0,0,.7) } @media screen and (max-width:1023px){ .hero.is-warning .navbar-menu{ background-color:#ffdd57 } } .hero.is-warning .navbar-item,.hero.is-warning .navbar-link{ color:rgba(0,0,0,.7) } .hero.is-warning .navbar-link.is-active,.hero.is-warning .navbar-link:hover,.hero.is-warning a.navbar-item.is-active,.hero.is-warning a.navbar-item:hover{ background-color:#ffd83d; color:rgba(0,0,0,.7) } .hero.is-warning .tabs a{ color:rgba(0,0,0,.7); opacity:.9 } .hero.is-warning .tabs a:hover{ opacity:1 } .hero.is-warning .tabs li.is-active a{ opacity:1 } .hero.is-warning .tabs.is-boxed a,.hero.is-warning .tabs.is-toggle a{ color:rgba(0,0,0,.7) } .hero.is-warning .tabs.is-boxed a:hover,.hero.is-warning .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-warning .tabs.is-boxed li.is-active a,.hero.is-warning .tabs.is-boxed li.is-active a:hover,.hero.is-warning .tabs.is-toggle li.is-active a,.hero.is-warning .tabs.is-toggle li.is-active a:hover{ background-color:rgba(0,0,0,.7); border-color:rgba(0,0,0,.7); color:#ffdd57 } .hero.is-warning.is-bold{ background-image:linear-gradient(141deg,#ffaf24 0,#ffdd57 71%,#fffa70 100%) } @media screen and (max-width:768px){ .hero.is-warning.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#ffaf24 0,#ffdd57 71%,#fffa70 100%) } } .hero.is-danger{ background-color:#f14668; color:#fff } .hero.is-danger a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),.hero.is-danger strong{ color:inherit } .hero.is-danger .title{ color:#fff } .hero.is-danger .subtitle{ color:rgba(255,255,255,.9) } .hero.is-danger .subtitle a:not(.button),.hero.is-danger .subtitle strong{ color:#fff } @media screen and (max-width:1023px){ .hero.is-danger .navbar-menu{ background-color:#f14668 } } .hero.is-danger .navbar-item,.hero.is-danger .navbar-link{ color:rgba(255,255,255,.7) } .hero.is-danger .navbar-link.is-active,.hero.is-danger .navbar-link:hover,.hero.is-danger a.navbar-item.is-active,.hero.is-danger a.navbar-item:hover{ background-color:#ef2e55; color:#fff } .hero.is-danger .tabs a{ color:#fff; opacity:.9 } .hero.is-danger .tabs a:hover{ opacity:1 } .hero.is-danger .tabs li.is-active a{ opacity:1 } .hero.is-danger .tabs.is-boxed a,.hero.is-danger .tabs.is-toggle a{ color:#fff } .hero.is-danger .tabs.is-boxed a:hover,.hero.is-danger .tabs.is-toggle a:hover{ background-color:rgba(10,10,10,.1) } .hero.is-danger .tabs.is-boxed li.is-active a,.hero.is-danger .tabs.is-boxed li.is-active a:hover,.hero.is-danger .tabs.is-toggle li.is-active a,.hero.is-danger .tabs.is-toggle li.is-active a:hover{ background-color:#fff; border-color:#fff; color:#f14668 } .hero.is-danger.is-bold{ background-image:linear-gradient(141deg,#fa0a62 0,#f14668 71%,#f7595f 100%) } @media screen and (max-width:768px){ .hero.is-danger.is-bold .navbar-menu{ background-image:linear-gradient(141deg,#fa0a62 0,#f14668 71%,#f7595f 100%) } } .hero.is-small .hero-body{ padding:1.5rem } @media screen and (min-width:769px),print{ .hero.is-medium .hero-body{ padding:9rem 1.5rem } } @media screen and (min-width:769px),print{ .hero.is-large .hero-body{ padding:18rem 1.5rem } } .hero.is-fullheight .hero-body,.hero.is-fullheight-with-navbar .hero-body,.hero.is-halfheight .hero-body{ align-items:center; display:flex } .hero.is-fullheight .hero-body>.container,.hero.is-fullheight-with-navbar .hero-body>.container,.hero.is-halfheight .hero-body>.container{ flex-grow:1; flex-shrink:1 } .hero.is-halfheight{ min-height:50vh } .hero.is-fullheight{ min-height:100vh } .hero-video{ overflow:hidden } .hero-video video{ left:50%; min-height:100%; min-width:100%; position:absolute; top:50%; transform:translate3d(-50%,-50%,0) } .hero-video.is-transparent{ opacity:.3 } @media screen and (max-width:768px){ .hero-video{ display:none } } .hero-buttons{ margin-top:1.5rem } @media screen and (max-width:768px){ .hero-buttons .button{ display:flex } .hero-buttons .button:not(:last-child){ margin-bottom:.75rem } } @media screen and (min-width:769px),print{ .hero-buttons{ display:flex; justify-content:center } .hero-buttons .button:not(:last-child){ margin-right:1.5rem } } .hero-foot,.hero-head{ flex-grow:0; flex-shrink:0 } .hero-body{ flex-grow:1; flex-shrink:0; padding:3rem 1.5rem } .section{ padding:3rem 1.5rem } @media screen and (min-width:1024px){ .section.is-medium{ padding:9rem 1.5rem } .section.is-large{ padding:18rem 1.5rem } } .footer{ background-color:#fafafa; padding:3rem 1.5rem 6rem } .menuItem{ color:#fff!important; transition-duration:.2s } .bg-dark{ background-color:#080b0f!important } .menuItem:focus,.menuItem:hover{ border-radius:2px; background-color:#10151b!important; transition-duration:.2s } .mainInput{ width: 100%; color:#fff; background: transparent; } .z{ z-index:100000000!important } .mainTag{ background-color:transparent; border:1px #1b1b1b solid; color:#fff; font-weight:600; z-index:9999999999999!important; padding-top:10px; padding-bottom:10px; padding-left:15px; padding-right:15px; border-radius:4px } .mainTag:hover{ background:#1b1b1b60; color:#fff } .px-10{ padding-right:70px; padding-left:70px } .cardvcodesbotName{ font-weight:600; font-size:18px; } .cardvcodesbotCard{ height:333px; max-height:333px; background:url(https://img.devsforum.net/tr/img/w4J3F10.png); background-size: 100% 100%; transform:scale(1); background-repeat: no-repeat; transition: all 0.3s; } .cardvcodesbotCard:hover{ transform:translateY(-5px) } .cardvcodesbotDesc{ margin-bottom:0; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; -webkit-box-orient:vertical; display:-webkit-box; -webkit-line-clamp:4; color:#fff; opacity:.5 } .w-100{ width:100% } .status{ font-size:14px } .status2{ font-size:20px } .cardvcodesbotIMG{ width:120px; height:120px; border-radius:15px; margin-top:-40px; margin-right:-35px; } .cardvcodesbotButtons{ position:absolute; bottom:0; width:100%; margin-left:-1.25rem; margin-right:-1.25rem } /* CUSTOM JAVASCRIPT FILE */ /* BASICS */ .CodeMirror { /* Set height, width, borders, and global font properties here */ font-family: monospace; height: 300px; color: white; direction: ltr; } /* PADDING */ .CodeMirror-lines { padding: 4px 0; /* Vertical padding around content */ } .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { padding: 0 4px; /* Horizontal padding of content */ } .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; /* The little square between H and V scrollbars */ } /* GUTTER */ .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #f7f7f7; white-space: nowrap; } .CodeMirror-linenumbers {} .CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; text-align: right; color: #999; white-space: nowrap; } .CodeMirror-guttermarker { color: black; } .CodeMirror-guttermarker-subtle { color: #999; } /* CURSOR */ .CodeMirror-cursor { border-left: 1px solid black; border-right: none; width: 0; } /* Shown when moving in bi-directional text */ .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; } .cm-fat-cursor .CodeMirror-cursor { width: auto; border: 0 !important; background: #7e7; } .cm-fat-cursor div.CodeMirror-cursors { z-index: 1; } .cm-fat-cursor-mark { background-color: rgba(20, 255, 20, 0.5); -webkit-animation: blink 1.06s steps(1) infinite; -moz-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; } .cm-animate-fat-cursor { width: auto; border: 0; -webkit-animation: blink 1.06s steps(1) infinite; -moz-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; background-color: #7e7; } @-moz-keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} } @-webkit-keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} } @keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} } /* Can style cursor different in overwrite (non-insert) mode */ .CodeMirror-overwrite .CodeMirror-cursor {} .cm-tab { display: inline-block; text-decoration: inherit; } .CodeMirror-rulers { position: absolute; left: 0; right: 0; top: -50px; bottom: 0; overflow: hidden; } .CodeMirror-ruler { border-left: 1px solid #ccc; top: 0; bottom: 0; position: absolute; } /* DEFAULT THEME */ .cm-s-default .cm-header {color: blue;} .cm-s-default .cm-quote {color: #090;} .cm-negative {color: #d44;} .cm-positive {color: #292;} .cm-header, .cm-strong {font-weight: bold;} .cm-em {font-style: italic;} .cm-link {text-decoration: underline;} .cm-strikethrough {text-decoration: line-through;} .cm-s-default .cm-keyword {color: #708;} .cm-s-default .cm-atom {color: #219;} .cm-s-default .cm-number {color: #164;} .cm-s-default .cm-def {color: #00f;} .cm-s-default .cm-variable, .cm-s-default .cm-punctuation, .cm-s-default .cm-property, .cm-s-default .cm-operator {} .cm-s-default .cm-variable-2 {color: #05a;} .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;} .cm-s-default .cm-comment {color: #a50;} .cm-s-default .cm-string {color: #a11;} .cm-s-default .cm-string-2 {color: #f50;} .cm-s-default .cm-meta {color: #555;} .cm-s-default .cm-qualifier {color: #555;} .cm-s-default .cm-builtin {color: #30a;} .cm-s-default .cm-bracket {color: #997;} .cm-s-default .cm-tag {color: #170;} .cm-s-default .cm-attribute {color: #00c;} .cm-s-default .cm-hr {color: #999;} .cm-s-default .cm-link {color: #00c;} .cm-s-default .cm-error {color: #f00;} .cm-invalidchar {color: #f00;} .CodeMirror-composing { border-bottom: 2px solid; } /* Default styles for common addons */ div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;} div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;} .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } .CodeMirror-activeline-background {background: #e8f2ff;} /* STOP */ /* The rest of this file contains styles related to the mechanics of the editor. You probably shouldn't touch them. */ .CodeMirror { position: relative; overflow: hidden; background: white; } .CodeMirror-scroll { overflow: scroll !important; /* Things will break if this is overridden */ /* 50px is the magic margin used to hide the element's real scrollbars */ /* See overflow: hidden in .CodeMirror */ margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; outline: none; /* Prevent dragging from highlighting the element */ position: relative; } .CodeMirror-sizer { position: relative; border-right: 50px solid transparent; } /* The fake, visible scrollbars. Used to force redraw during scrolling before actual scrolling happens, thus preventing shaking and flickering artifacts. */ .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; outline: none; } .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; } .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll; } .CodeMirror-scrollbar-filler { right: 0; bottom: 0; } .CodeMirror-gutter-filler { left: 0; bottom: 0; } .CodeMirror-gutters { position: absolute; left: 0; top: 0; min-height: 100%; z-index: 3; } .CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; margin-bottom: -50px; } .CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; } .CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4; } .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; } .CodeMirror-gutter-wrapper ::selection { background-color: transparent } .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } .CodeMirror-lines { cursor: text; min-height: 1px; /* prevents collapsing before first draw */ } .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { /* Reset some styles that the rest of the page might have set */ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-width: 0; background: transparent; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; word-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; -webkit-font-variant-ligatures: contextual; font-variant-ligatures: contextual; } .CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like { word-wrap: break-word; white-space: pre-wrap; word-break: normal; } .CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; /* Force widget margins to stay inside of the container */ } .CodeMirror-widget {} .CodeMirror-rtl pre { direction: rtl; } .CodeMirror-code { outline: none; } /* Force content-box sizing for the elements where we expect it */ .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { -moz-box-sizing: content-box; box-sizing: content-box; } .CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; } .CodeMirror-cursor { position: absolute; pointer-events: none; } .CodeMirror-measure pre { position: static; } div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; } div.CodeMirror-dragcursors { visibility: visible; } .CodeMirror-focused div.CodeMirror-cursors { visibility: visible; } .CodeMirror-selected { background: #d9d9d9; } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } .CodeMirror-crosshair { cursor: crosshair; } .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } .cm-searching { background-color: #ffa; background-color: rgba(255, 255, 0, .4); } /* Used to force a border model for a node */ .cm-force-border { padding-right: .1px; } @media print { /* Hide the cursor when printing */ .CodeMirror div.CodeMirror-cursors { visibility: hidden; } } /* See issue #2901 */ .cm-tab-wrap-hack:after { content: ''; } /* Help users use markselection to safely style text background */ span.CodeMirror-selectedtext { background: none; } .CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; background-color: #23272a; margin-bottom: -50px; } .CodeMirror-scroll { overflow: scroll !important; margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; background-color: #2c2f33; outline: none; position: relative; } .CodeMirror { border: 2px solid #23272a; } .CodeMirror textarea { pointer-events: none; } .cm-s-default .cm-def { color: #00e7ff; } .cm-s-default .cm-keyword {color: #ff00d4;} .cm-s-default .cm-atom {color: #07afff;}.cm-s-default .cm-string {color: #dc3545;} .CodeMirror-scroll { overflow: scroll !important; margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; background-color: #2c2f33; outline: none; position: relative; } @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); .brand-mark, .hero-mark { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, #7289da, #5865f2); box-shadow: 0 10px 24px rgba(88, 101, 242, .28); } .brand-mark { width: 48px; height: 48px; border-radius: 14px; font-size: 24px; } .hero-mark { width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 28px; font-size: 48px; } /* Custom Selection */ ::-moz-selection { /* Code for Firefox */ color: #7289da; background: #2c2f33; border-radius: 10px; transition: all 0.3s; } ::selection { color: #7289da; border-radius: 10px; background: #2c2f33; transition: all 0.3s; } /* PULSE AVATAR */ .pulse-avatar-dnd { background-color: red; border-radius: 50%; animation: pulse-dnd 2s infinite; } .pulse-avatar-online { background-color: green; border-radius: 50%; animation: pulse-online 2s infinite; } .pulse-avatar-idle { background-color: yellow; border-radius: 50%; animation: pulse-idle 2s infinite; } .pulse-avatar-offline { background-color: grey; border-radius: 50%; animation: pulse-offline 2s infinite; } @keyframes pulse-dnd { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); } } @keyframes pulse-idle { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(250, 166, 26, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(250, 166, 26, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(250, 166, 26, 0); } } @keyframes pulse-online { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(67, 181, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(67, 181, 129, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(67, 181, 129, 0); } } @keyframes pulse-offline { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(116, 127, 141, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(116, 127, 141, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(116, 127, 141, 0); } } /* STATUS */ .status-circle { font-size: 16px; margin-bottom: 5px; } .status-online { color: #46f154; } .status-dnd { color: #f14668; } .status-idle { color: yellow; } .status-offline { color: #727272; } .status-invisible { color: #727272; } .has-text-white { color: #fff!important; } .activityBox { padding: 10px!important; width: 102%!important; height: 120px!important; margin-left: -10px; } .activityBox img{ width: 100px!important; height: 100px!important; } .bg-dark { background-color: #2c2f33!important; } .status-text { text-transform: uppercase; font-size: 14px; } .status-text-online { color: #46f154!important; } .status-text-dnd { color: #f14668!important; } .status-text-idle { color: yellow!important; } .status-text-offline { color: #727272!important; } .status-text-invisible { color: #727272!important; } /* CUSTOM */ .alert-vcodes { background-color: #23272a; border-left: 5px solid #f14668; color: #fff; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .card>.list-group:first-child .list-group-item:first-child { border-top-left-radius: .25rem; border-top-right-radius: .25rem; background-color: #23272a; } .list-group-flush .list-group-item { border-right: 0; border-left: 0; border-radius: 0; background-color: #23272a; } * { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: #2c2f33; } .bg-vcodes { background-color: #23272a; color: #fff; } .copy-link { text-decoration: none; color: #6c757d; transition: all 0.3s; } .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem; background-color: #23272a; border: 0; } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #23272a; color: #fff; background-clip: border-box; border: 1px solid #23272a; border-radius: .25rem; } .copy-link:hover { color: #7289da; text-decoration: none; } @media (min-width: 992px) { .animate { animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-fill-mode: both; -webkit-animation-fill-mode: both; } } @keyframes slideIn { 0% { transform: translateY(1rem); opacity: 0; } 100% { transform:translateY(0rem); opacity: 1; } 0% { transform: translateY(1rem); opacity: 0; } } @-webkit-keyframes slideIn { 0% { -webkit-transform: transform; -webkit-opacity: 0; } 100% { -webkit-transform: translateY(0); -webkit-opacity: 1; } 0% { -webkit-transform: translateY(1rem); -webkit-opacity: 0; } } .slideIn { -webkit-animation-name: slideIn; animation-name: slideIn; } /* Other styles for the page not related to the animated dropdown */ .btn-outline-vcodes { background-color: transparent; border: 2px solid #7289da; color: #fff; font-weight: 500; transition: all 0.3s; } .btn-outline-vcodes:hover { background-color: #7289da; border: 2px solid #7289da; color: #2c2f33; } .discordcard { background-color: #2c2f33; border-radius: 10px; transition: all 0.5s; } .discordcard:hover { transform: translateY(-5px); box-shadow: 0px 3px 3px #000; } .btn-discord { background-color: #7289da; color:#fff; } .btn-discord:hover { background-color: #23272a; color:#fff; } .btn-discord-edit { background-color: #7289da; color:#fff; padding: 5px 15px; transition: all 0.2s; } .btn-discord-edit:hover { background-color: #2c2f33; color:#fff; } .card-custom { overflow: hidden; min-height: 450px; box-shadow: 0 0 15px rgba(10, 10, 10, 0.3); } .card-custom-img { height: 150px; min-height: 150px; margin-bottom: 37px; background-repeat: no-repeat; background-size: cover; background-position: center; border-color: inherit; } /* First border-left-width setting is a fallback */ .card-custom-avatar img { border-radius: 50%; box-shadow: 0 0 15px rgba(10, 10, 10, 0.3); position: absolute; top: 100px; left: 1.25rem; width: 100px; height: 100px; } .navbar-brand-img { width: 75; } /* CUSTOM SCROLLBAR */ ::-webkit-scrollbar { width: 8px; height: 15px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #7289da; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #7289da; } /* CUSTOM FORM */ .form-discorddark { color: #fff; } .form-discorddark input { background-color: #23272a; border: 1px solid #000; color: #fff; } .form-discorddark textarea { background: #23272a; border: 1px solid #000; color: #fff; } .form-discorddark input:focus { background-color: #23272a; border: 1px solid #000; } .form-discorddark .input-group-text { background-color: #23272a!important; border: 1px solid #000; color: rgb(104, 104, 104); } .form-discorddark textarea:focus { background: #23272a; border: 1px solid #000; } .form-discorddark input:disabled { background: #23272a; border: 1px solid #000; color: grey; cursor: not-allowed; } .form-discorddark select { background-color: #2c2f33; border: 0px solid #000; padding: 15px 25px; border-radius: 10px; color: #fff; } .form-discorddark select:focus { background-color: #2c2f33; border: 0; color: #fff; } #searchbar { width: 100%; } @media (min-width: 992px){ .dropdown-menu .dropdown-toggle:after{ border-top: .3em solid transparent; border-right: 0; border-bottom: .3em solid transparent; border-left: .3em solid; } .dropdown-menu .dropdown-menu{ margin-left:0; margin-right: 0; } .dropdown-menu li{ position: relative; } .nav-item .submenu{ display: none; position: absolute; left:100%; top:-7px; } .nav-item .submenu-left{ right:100%; left:auto; } .dropdown-menu > li:hover{ background-color: #f1f1f1 } .dropdown-menu > li:hover > .submenu{ display: block; } } /* CUSTOM JAVASCRIPT FILE */ /* BASICS */ .CodeMirror { /* Set height, width, borders, and global font properties here */ font-family: monospace; height: 300px; color: white; direction: ltr; } /* PADDING */ .CodeMirror-lines { padding: 4px 0; /* Vertical padding around content */ } .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { padding: 0 4px; /* Horizontal padding of content */ } .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; /* The little square between H and V scrollbars */ } /* GUTTER */ .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #f7f7f7; white-space: nowrap; } .CodeMirror-linenumbers {} .CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; text-align: right; color: #999; white-space: nowrap; } .CodeMirror-guttermarker { color: black; } .CodeMirror-guttermarker-subtle { color: #999; } /* CURSOR */ .CodeMirror-cursor { border-left: 1px solid black; border-right: none; width: 0; } /* Shown when moving in bi-directional text */ .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; } .cm-fat-cursor .CodeMirror-cursor { width: auto; border: 0 !important; background: #7e7; } .cm-fat-cursor div.CodeMirror-cursors { z-index: 1; } .cm-fat-cursor-mark { background-color: rgba(20, 255, 20, 0.5); -webkit-animation: blink 1.06s steps(1) infinite; -moz-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; } .cm-animate-fat-cursor { width: auto; border: 0; -webkit-animation: blink 1.06s steps(1) infinite; -moz-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; background-color: #7e7; } @-moz-keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} } @-webkit-keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} } @keyframes blink { 0% {} 50% { background-color: transparent; } 100% {} } /* Can style cursor different in overwrite (non-insert) mode */ .CodeMirror-overwrite .CodeMirror-cursor {} .cm-tab { display: inline-block; text-decoration: inherit; } .CodeMirror-rulers { position: absolute; left: 0; right: 0; top: -50px; bottom: 0; overflow: hidden; } .CodeMirror-ruler { border-left: 1px solid #ccc; top: 0; bottom: 0; position: absolute; } /* DEFAULT THEME */ .cm-s-default .cm-header {color: blue;} .cm-s-default .cm-quote {color: #090;} .cm-negative {color: #d44;} .cm-positive {color: #292;} .cm-header, .cm-strong {font-weight: bold;} .cm-em {font-style: italic;} .cm-link {text-decoration: underline;} .cm-strikethrough {text-decoration: line-through;} .cm-s-default .cm-keyword {color: #708;} .cm-s-default .cm-atom {color: #219;} .cm-s-default .cm-number {color: #164;} .cm-s-default .cm-def {color: #00f;} .cm-s-default .cm-variable, .cm-s-default .cm-punctuation, .cm-s-default .cm-property, .cm-s-default .cm-operator {} .cm-s-default .cm-variable-2 {color: #05a;} .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;} .cm-s-default .cm-comment {color: #a50;} .cm-s-default .cm-string {color: #a11;} .cm-s-default .cm-string-2 {color: #f50;} .cm-s-default .cm-meta {color: #555;} .cm-s-default .cm-qualifier {color: #555;} .cm-s-default .cm-builtin {color: #30a;} .cm-s-default .cm-bracket {color: #997;} .cm-s-default .cm-tag {color: #170;} .cm-s-default .cm-attribute {color: #00c;} .cm-s-default .cm-hr {color: #999;} .cm-s-default .cm-link {color: #00c;} .cm-s-default .cm-error {color: #f00;} .cm-invalidchar {color: #f00;} .CodeMirror-composing { border-bottom: 2px solid; } /* Default styles for common addons */ div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;} div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;} .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } .CodeMirror-activeline-background {background: #e8f2ff;} /* STOP */ /* The rest of this file contains styles related to the mechanics of the editor. You probably shouldn't touch them. */ .CodeMirror { position: relative; overflow: hidden; background: white; } .CodeMirror-scroll { overflow: scroll !important; /* Things will break if this is overridden */ /* 50px is the magic margin used to hide the element's real scrollbars */ /* See overflow: hidden in .CodeMirror */ margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; outline: none; /* Prevent dragging from highlighting the element */ position: relative; } .CodeMirror-sizer { position: relative; border-right: 50px solid transparent; } /* The fake, visible scrollbars. Used to force redraw during scrolling before actual scrolling happens, thus preventing shaking and flickering artifacts. */ .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; outline: none; } .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; } .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll; } .CodeMirror-scrollbar-filler { right: 0; bottom: 0; } .CodeMirror-gutter-filler { left: 0; bottom: 0; } .CodeMirror-gutters { position: absolute; left: 0; top: 0; min-height: 100%; z-index: 3; } .CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; margin-bottom: -50px; } .CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; } .CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4; } .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; } .CodeMirror-gutter-wrapper ::selection { background-color: transparent } .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } .CodeMirror-lines { cursor: text; min-height: 1px; /* prevents collapsing before first draw */ } .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { /* Reset some styles that the rest of the page might have set */ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-width: 0; background: transparent; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; word-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; -webkit-font-variant-ligatures: contextual; font-variant-ligatures: contextual; } .CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like { word-wrap: break-word; white-space: pre-wrap; word-break: normal; } .CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; /* Force widget margins to stay inside of the container */ } .CodeMirror-widget {} .CodeMirror-rtl pre { direction: rtl; } .CodeMirror-code { outline: none; } /* Force content-box sizing for the elements where we expect it */ .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { -moz-box-sizing: content-box; box-sizing: content-box; } .CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; } .CodeMirror-cursor { position: absolute; pointer-events: none; } .CodeMirror-measure pre { position: static; } div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; } div.CodeMirror-dragcursors { visibility: visible; } .CodeMirror-focused div.CodeMirror-cursors { visibility: visible; } .CodeMirror-selected { background: #d9d9d9; } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } .CodeMirror-crosshair { cursor: crosshair; } .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } .cm-searching { background-color: #ffa; background-color: rgba(255, 255, 0, .4); } /* Used to force a border model for a node */ .cm-force-border { padding-right: .1px; } @media print { /* Hide the cursor when printing */ .CodeMirror div.CodeMirror-cursors { visibility: hidden; } } /* See issue #2901 */ .cm-tab-wrap-hack:after { content: ''; } /* Help users use markselection to safely style text background */ span.CodeMirror-selectedtext { background: none; } .CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; background-color: #23272a; margin-bottom: -50px; } .CodeMirror-scroll { overflow: scroll !important; margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; background-color: #2c2f33; outline: none; position: relative; } .CodeMirror { border: 2px solid #23272a; } .CodeMirror textarea { pointer-events: none; } .cm-s-default .cm-def { color: #00e7ff; } .cm-s-default .cm-keyword {color: #ff00d4;} .cm-s-default .cm-atom {color: #07afff;}.cm-s-default .cm-string {color: #dc3545;} .CodeMirror-scroll { overflow: scroll !important; margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; background-color: #2c2f33; outline: none; position: relative; } div.dataTables_wrapper div.dataTables_filter label { font-weight: normal; white-space: nowrap; text-align: left; color: #fff; } div.dataTables_wrapper div.dataTables_length label { color: #fff; font-weight: normal; text-align: left; white-space: nowrap; } div.dataTables_wrapper div.dataTables_length select { width: 75px; display: inline-block; color: #fff; background-color: #23272a; border: 0; } table.dataTable tbody tr { background-color: #2c2e2f; } .table-dark.table-striped tbody tr:nth-of-type(odd) { background-color: #23272a; } table.dataTable thead .sorting:after { opacity: 0; content: ""; } table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after { position: absolute; bottom: 8px; right: 8px; display: block; font-family: "Glyphicons Halflings"; opacity: 0; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: #fff; } .btn-outline-discord-pagination { border-radius: 8px; margin: 4px; color: #fff!important; border: 2px solid #7289da; transition: all 0.3s; } .btn-outline-discord-pagination a { color: #fff!important; } .btn-outline-discord-pagination li { color: #fff!important; } .btn-outline-discord-pagination:hover { background-color: #7289da; color: #fff; } .btn-outline-discord-pagination:focus { background-color: #474F6B; color: #fff; } /* Custom Card Horizantal */ .vcodes_column { display: flex; flex-wrap: wrap; justify-content: center } .vcodes_teamcard { margin: 10px 3px; position: relative; width: 300px; height: 100px; border-radius: 6px; padding: 20px; background: rgb(41 45 51); display: flex; justify-content: space-between; align-items: center; transition: all .15s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .vcodes_teamcard { background: #23272a; box-shadow: transparent 0 2px 52px 0; transition: all 0.3s; border-left: 3px solid; } .vcodes_teamcard:hover { transform: translateY(-6px); z-index: 6; } .vcodes_teamcard .user h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; color: rgb(255 255 255); -webkit-box-orient: vertical; font-weight: 600; margin: 0 0 0 5px } .vcodes_teamcard .user h2 { width: 98%; font-size: 14px; color: rgb(255 255 255/70%); font-weight: 700; display: inline-block; margin: 0 0 0 5px } .vcodes_teamcard .avatar img { height: 60px; border-radius: 50%; margin-right: 5px } .vcodes_teamcard .avatar span { z-index: 1; position: absolute; bottom: 28px; right: 25px; display: block; width: 14px; height: 14px; border: 2px solid rgb(44 47 51); border-radius: 100% } @media only screen and (max-width: 929px) { .dataTables_wrapper { position: relative; clear: both; overflow-x: auto; } } .hr_home { display: inline-block!important; width: 25%!important; border-color: #fff!important; border: 3px solid; margin-bottom: 7px!important; margin-left: 12px!important; } br, hr { -wevkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0,0,0,.1); } hr { box-sizing: content-box; height: 0; overflow: visible; } .divider_home { overflow: hidden!important; white-space: nowrap!important; color: #fff!important; margin-bottom: 17px!important; } .animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s } @-webkit-keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0px; opacity:1 } } @keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 } } #myDiv { display: none; } .youtube { color: #fff; transition: all 0.2s; } .youtube:hover { color: #d61212; transform: scale(1.5) translateY(-4px); } .twitter { color: #fff; transition: all 0.2s; } .twitter:hover { color: #019ffa; transform: scale(1.5) translateY(-4px); } .github { color: #fff; transition: all 0.2s; } .github:hover { color: #000; transform: scale(1.5) translateY(-4px); } .discord { color: #fff; transition: all 0.2s; } .discord:hover { color: #7289da; transform: scale(1.5) translateY(-4px); } .instagram { color: #fff; transition: all 0.2s; } .instagram:hover { background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform: scale(1.5) translateY(-4px); } .patreon { color: #fff; transition: all 0.2s; } .patreon:hover { color: #f96854; transform: scale(1.5) translateY(-4px); } .title_divider_text { background-color: #fff; color:#2c2f33; font-weight: 600; padding: 5px; border-radius: 5px; font-size: 17px; } footer a:hover { text-decoration: underline; } .divider_home { font-size: 25px; margin-bottom: -10px; } .contact-form{ background: #23272a; margin-top: 10%; margin-bottom: 5%; width: 70%; } .contact-form input { background-color: #2c2f33; color: #fff; border: none; } .contact-form textarea { background-color: #2c2f33; color: #fff; border: none; } .contact-form textarea:focus { background-color: #2c2f33; color: #fff; border: none; } .contact-form input:focus { background-color: #2c2f33; color: #fff; border: none; } .contact-form input:disabled { background-color: #2c2f33; color: rgb(73, 73, 73); border: none; } .contact-form .form-control{ border-radius:1rem; } .contact-image{ text-align: center; } .contact-image i{ border-radius: 6rem; width: 11%; margin-top: -7%; } .contact-form form{ padding: 14%; } .contact-form form .row{ margin-bottom: -7%; } .contact-form h3{ margin-bottom: 8%; margin-top: -10%; text-align: center; color: #0062cc; } .contact-form .btnContact { width: 50%; border: none; border-radius: 1rem; padding: 1.5%; background: #dc3545; font-weight: 600; color: #fff; cursor: pointer; } .btnContactSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; color: #fff; background-color: #0062cc; border: none; cursor: pointer; } .contact-form label { color: #fff; } .bootstrap-select .bs-ok-default::after { width: 0.3em; height: 0.6em; border-width: 0 0.1em 0.1em 0; transform: rotate(45deg) translateY(0.5rem); } .btn.dropdown-toggle:focus { outline: none !important; } .contact-form { background: #23272a; margin-top: 10%; margin-bottom: 5%; width: 90%; } .selectMultiple { width: 100%; position: relative; border-radius: 1rem; } .selectMultiple select { display: none; } .selectMultiple > div { position: relative; z-index: 2; padding: 8px 12px 2px 12px; border-radius: 15px; background: #2c2f33; font-size: 14px; min-height: 44px; transition: box-shadow 0.3s ease; } .selectMultiple > div:hover { box-shadow: 0 4px 24px -1px rgba(22, 42, 90, 0.16); } .selectMultiple > div .arrow { right: 1px; top: 0; bottom: 0; cursor: pointer; width: 28px; position: absolute; } .selectMultiple > div .arrow:before, .selectMultiple > div .arrow:after { content: ""; position: absolute; display: block; width: 2px; height: 8px; border-bottom: 8px solid #99A3BA; top: 43%; transition: all 0.3s ease; } .selectMultiple > div .arrow:before { right: 12px; transform: rotate(-130deg); } .selectMultiple > div .arrow:after { left: 9px; transform: rotate(130deg); } .selectMultiple > div span { color: #99A3BA; display: block; position: absolute; left: 12px; cursor: pointer; top: 8px; line-height: 28px; transition: all 0.3s ease; } .selectMultiple > div span.hide { opacity: 0; visibility: hidden; transform: translate(-4px, 0); } .selectMultiple > div a { position: relative; padding: 0 24px 6px 8px; line-height: 28px; color: #1E2330; display: inline-block; vertical-align: top; margin: 0 6px 0 0; } .selectMultiple > div a em { font-style: normal; display: block; white-space: nowrap; } .selectMultiple > div a:before { content: ""; left: 0; top: 0; bottom: 6px; width: 100%; position: absolute; display: block; background: #23272a; z-index: -1; border-radius: 4px; } .selectMultiple > div a i { cursor: pointer; position: absolute; top: 0; right: 0; width: 24px; height: 28px; display: block; } .selectMultiple > div a i:before, .selectMultiple > div a i:after { content: ""; display: block; width: 2px; height: 10px; position: absolute; left: 50%; top: 50%; background: #7289da; border-radius: 1px; } .selectMultiple > div a i:before { transform: translate(-50%, -50%) rotate(45deg); } .selectMultiple > div a i:after { transform: translate(-50%, -50%) rotate(-45deg); } .selectMultiple > div a.notShown { opacity: 0; transition: opacity 0.3s ease; } .selectMultiple > div a.notShown:before { width: 28px; transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s; } .selectMultiple > div a.notShown i { opacity: 0; transition: all 0.3s ease 0.3s; } .selectMultiple > div a.notShown em { opacity: 0; transform: translate(-6px, 0); transition: all 0.4s ease 0.3s; } .selectMultiple > div a.notShown.shown { opacity: 1; } .selectMultiple > div a.notShown.shown:before { width: 100%; } .selectMultiple > div a.notShown.shown i { opacity: 1; } .selectMultiple > div a.notShown.shown em { opacity: 1; transform: translate(0, 0); } .selectMultiple > div a.remove:before { width: 28px; transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s; } .selectMultiple > div a.remove i { opacity: 0; transition: all 0.3s ease 0s; } .selectMultiple > div a.remove em { opacity: 0; transform: translate(-12px, 0); transition: all 0.4s ease 0s; } .selectMultiple > div a.remove.disappear { opacity: 0; transition: opacity 0.5s ease 0s; } .selectMultiple > ul { margin: 0; padding: 0; list-style: none; font-size: 16px; z-index: 1; position: absolute; top: 100%; left: 0; right: 0; visibility: hidden; height: 350px; overflow: auto; opacity: 0; transform: translate(0, 20px) scale(0.8); transform-origin: 0 0; filter: drop-shadow(0 12px 20px rgba(22, 42, 90, 0.08)); transition: all 0.4s ease, transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s; } .selectMultiple > ul li { color: #fff; background: #2c2f33; padding: 12px 16px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease 0.3s, opacity 0.5s ease 0.3s, border-radius 0.3s ease 0.3s; } .selectMultiple > ul li:first-child { border-radius: 8px 8px 0 0; } .selectMultiple > ul li:first-child:last-child { border-radius: 8px; } .selectMultiple > ul li:last-child { border-radius: 0 0 8px 8px; } .selectMultiple > ul li:last-child:first-child { border-radius: 8px; } .selectMultiple > ul li:hover { background: #7289da; color: #fff; } .selectMultiple > ul li:after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: rgba(0, 0, 0, 0.4); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%, -50%); transform-origin: 50% 50%; } .selectMultiple > ul li.beforeRemove { border-radius: 0 0 8px 8px; } .selectMultiple > ul li.beforeRemove:first-child { border-radius: 8px; } .selectMultiple > ul li.afterRemove { border-radius: 8px 8px 0 0; } .selectMultiple > ul li.afterRemove:last-child { border-radius: 8px; } .selectMultiple > ul li.remove { transform: scale(0); opacity: 0; } .selectMultiple > ul li.remove:after { -webkit-animation: ripple 0.4s ease-out; animation: ripple 0.4s ease-out; } .selectMultiple > ul li.notShown { display: none; transform: scale(0); opacity: 0; transition: transform 0.35s ease, opacity 0.4s ease; } .selectMultiple > ul li.notShown.show { transform: scale(1); opacity: 1; } .selectMultiple.open > div { box-shadow: 0 4px 20px -1px rgba(22, 42, 90, 0.12); } .selectMultiple.open > div .arrow:before { transform: rotate(-50deg); } .selectMultiple.open > div .arrow:after { transform: rotate(50deg); } .selectMultiple.open > ul { transform: translate(0, 12px) scale(1); opacity: 1; visibility: visible; filter: drop-shadow(0 16px 24px rgba(22, 42, 90, 0.16)); } @-webkit-keyframes ripple { 0% { transform: scale(0, 0); opacity: 1; } 100% { opacity: 0; transform: scale(50, 50); } } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 1; } 100% { opacity: 0; transform: scale(50, 50); } } body .dribbble { position: fixed; display: block; right: 20px; bottom: 20px; opacity: 0.5; transition: all 0.4s ease; } body .dribbble:hover { opacity: 1; } body .dribbble img { display: block; height: 36px; } .selectMultiple > div { position: relative; width: 100%; padding: .375rem .75rem; font-size: 1rem; color: #fff; background-color: #2c2f33; background-clip: padding-box; border: 1px solid #2c2f33; border-radius: 1rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } /* BOT PAGE */ .btn { font-size: 1rem; font-weight: 600; line-height: 1.5; display: inline-block; padding: .625rem 1.25rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 0.6s; text-align: center; vertical-align: middle; white-space: nowrap; border-radius: .375rem; } @media only screen and (max-width: 1000px) { .avatar { font-size: 1rem; display: inline-flex; width: 48px; height: 48px; color: #fff; border-radius: 50%; background-color: transparent; align-items: center; justify-content: center; } } .avatar-sm { font-size: .875rem; width: 36px; height: 36px; } .avatar-lg { font-size: .875rem; width: 128px; height: 128px; } .card-profile-image img { box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15) !important; } .card-profile-image { position: relative; } .card-profile-image img { position: absolute; left: 50%; max-width: 180px; transition: all 0.3s; transform: translate(-50%, -30%); border-radius: .375rem; } .card-profile-image img:hover { transform: translate(-50%, -36%); } .card-profile-stats>div .heading { font-size: 1.1rem; font-weight: bold; display: block; } .heading { font-size: .95rem; font-weight: 600; letter-spacing: .025em; } .heading-small { font-size: .75rem; padding-top: .25rem; padding-bottom: .25rem; letter-spacing: .04em; text-transform: uppercase; } .description { font-size: .875rem; } .btn-primary { color: #fff; background-color: #5e72e4; box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); } .btn-primary:hover { color: #fff; background-color: #5361ac; } .btn-primary:focus { box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(94, 114, 228, .5); } .btn-primary:disabled { color: #fff; background-color: #5e72e4; } .btn-primary:not(:disabled):not(.disabled):active { color: #fff; background-color: #324cdd; } .btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: none, 0 0 0 0 rgba(94, 114, 228, .5); } @media (min-width: 768px) { .main-content .container-fluid { padding-right: 39px !important; padding-left: 39px !important; } } @media (max-width: 767.98px) { .navbar-expand-md>.container, .navbar-expand-md>.container-fluid { padding-right: 0; padding-left: 0; } } .btn-sm { font-size: .875rem; line-height: 1.5; padding: .25rem .5rem; border-radius: .375rem; } hr { overflow: visible; box-sizing: content-box; height: 0; } hr { margin-top: 2rem; margin-bottom: 2rem; border: 0; border-top: 1px solid rgba(0, 0, 0, .1); } .card>hr { margin-right: 0; margin-left: 0; } .box-2 { background-color: #2c2f33; padding: 10px!important; color: #fff; font-weight: 500; border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 100%; } .box-2-p { background-color: #27282b; padding: 10px; color: #fff; border-top-left-radius: 5px; border-bottom-left-radius: 5px; font-size: 13px; width: 40px; height: 44px; text-align: center; } .ownerIMG { border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: 45px; } .is-flex { display: flex!important; } .mt-4 { margin-top: 1rem!important; } .mt-1 { margin-top: .25rem!important; } .is-size-6 { font-size: 1rem!important; } .btn-tag { margin-right: 3px; color: #ffffff; padding: 0 7px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; background-color: #7289da; color:#fff; transition: all 0.3s; } .btn-tag:hover { color: #fff; background-color: #4e5e97; } .card-custom { overflow: hidden; min-height: 450px; box-shadow: 0 0 15px rgba(10, 10, 10, 0.3); } .card-custom-img { height: 200px; min-height: 200px; background-repeat: no-repeat; background-size: cover; background-position: center; border-color: inherit; } /* First border-left-width setting is a fallback */ .card-custom-img::after { position: absolute; content: ''; top: 161px; left: 0; width: 0; height: 0; border-style: solid; border-top-width: 40px; border-right-width: 0; border-bottom-width: 0; border-left-width: 545px; border-left-width: calc(575px - 5vw); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: inherit; } .card-custom-avatar img { border-radius: 50%; box-shadow: 0 0 15px rgba(10, 10, 10, 0.3); position: absolute; top: 100px; left: 1.25rem; width: 100px; height: 100px; } @import url(https://fonts.googleapis.com/css?family=Open+Sans); body { justify-content: space-around; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vcodes_tippy { position: relative; transition: all 0.5s ease; text-transform: uppercase; text-decoration: none; } .vcodes_tippy:before { content: ""; position: absolute; opacity: 0; pointer-events: none; left: 50%; transform: translate3d(-50%, 0%, 0); transition: all 0.5s ease; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #282828 transparent transparent transparent; } .vcodes_tippy:after { text-transform: none; content: attr(data-tooltip); font-size: 14px; position: absolute; color: #fff; background: #282828; padding: 8px 12px; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 200px; opacity: 0; pointer-events: none; left: 50%; top: 0; border-radius: 4px; transform: translate3d(-50%, 0%, 0); transition: all 0.5s ease; } .vcodes_tippy:hover:before, .vcodes_tippy:hover:after { opacity: 1; } .vcodes_tippy:hover:before { transform: translate3d(-50%, calc(-100% - 18px), 0); } .vcodes_tippy:hover:after { transform: translate3d(-50%, calc(-100% - 16px), 0); } abbr[data-title] { position: relative; text-decoration: underline dotted; } abbr[data-title]:hover::after, abbr[data-title]:focus::after { content: attr(data-title); position: absolute; left: 50%; top: -30px; transform: translateX(-50%); width: auto; white-space: nowrap; background: #ff0060; color: #fff; border-radius: 2px; box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4); font-size: 14px; padding: 3px 5px; } .cardBtn1{ background: #23272a; border-bottom-left-radius:5px; width:50%!important; padding:15px; color:#fff; text-align:center; transition: all 0.2s; text-decoration: none; } .cardBtn1:hover{ background-color: #1e2020; color:#fff!important; text-decoration: none; } .cardBtn2{ background: #23272a; border-bottom-right-radius:5px; width:50%!important; padding:15px; color:#fff; text-align:center; transition: all 0.2s; text-decoration: none; } .cardBtn2:hover{ background-color: #222425; color:#fff!important; text-decoration: none; } /* PROFILE */ .profile-nav, .profile-info{ margin-top:30px; } .profile-nav .user-heading { background: #fbc02d; color: #fff; border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; padding: 30px; text-align: center; } .profile-nav .user-heading.round a { border-radius: 50%; -webkit-border-radius: 50%; border: 10px solid rgba(255,255,255,0.3); display: inline-block; } .profile-nav .user-heading a img { width: 112px; height: 112px; border-radius: 50%; -webkit-border-radius: 50%; } .profile-nav .user-heading h1 { font-size: 22px; font-weight: 300; margin-bottom: 5px; } .profile-nav .user-heading p { font-size: 12px; } .profile-nav ul { margin-top: 1px; } .profile-nav ul > li { border-bottom: 1px solid #ebeae6; margin-top: 0; line-height: 30px; } .profile-nav ul > li:last-child { border-bottom: none; } .profile-nav ul > li > a { border-radius: 0; -webkit-border-radius: 0; color: #89817f; border-left: 5px solid #fff; } .profile-nav ul > li > a:hover, .profile-nav ul > li > a:focus, .profile-nav ul li.active a { background: #f8f7f5 !important; border-left: 5px solid #fbc02d; color: #89817f !important; } .profile-nav ul > li:last-child > a:last-child { border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; } .profile-nav ul > li > a > i{ font-size: 16px; padding-right: 10px; color: #bcb3aa; } .r-activity { margin: 6px 0 0; font-size: 12px; } .p-text-area, .p-text-area:focus { border: none; font-weight: 300; box-shadow: none; color: #c3c3c3; font-size: 16px; } .profile-info .panel-footer { background-color:#f8f7f5 ; border-top: 1px solid #e7ebee; } .profile-info .panel-footer ul li a { color: #7a7a7a; } .bio-graph-heading { background: #fbc02d; color: #fff; text-align: center; font-style: italic; padding: 40px 110px; border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; font-size: 16px; font-weight: 300; } .bio-graph-info { color: #89817e; } .bio-graph-info h1 { font-size: 22px; font-weight: 300; margin: 0 0 20px; } .bio-row { width: 50%; float: left; margin-bottom: 10px; padding:0 15px; } .bio-row p span { width: 100px; display: inline-block; } .bio-chart, .bio-desk { float: left; } .bio-chart { width: 40%; } .bio-desk { width: 60%; } .bio-desk h4 { font-size: 15px; font-weight:400; } .bio-desk h4.terques { color: #4CC5CD; } .bio-desk h4.red { color: #e26b7f; } .bio-desk h4.green { color: #97be4b; } .bio-desk h4.purple { color: #caa3da; } .file-pos { margin: 6px 0 10px 0; } .profile-activity h5 { font-weight: 300; margin-top: 0; color: #c3c3c3; } .summary-head { background: #ee7272; color: #fff; text-align: center; border-bottom: 1px solid #ee7272; } .summary-head h4 { font-weight: 300; text-transform: uppercase; margin-bottom: 5px; } .summary-head p { color: rgba(255,255,255,0.6); } ul.summary-list { display: inline-block; padding-left:0 ; width: 100%; margin-bottom: 0; } ul.summary-list > li { display: inline-block; width: 19.5%; text-align: center; } ul.summary-list > li > a > i { display:block; font-size: 18px; padding-bottom: 5px; } ul.summary-list > li > a { padding: 10px 0; display: inline-block; color: #818181; } ul.summary-list > li { border-right: 1px solid #eaeaea; } ul.summary-list > li:last-child { border-right: none; } .activity { width: 100%; float: left; margin-bottom: 10px; } .activity.alt { width: 100%; float: right; margin-bottom: 10px; } .activity span { float: left; } .activity.alt span { float: right; } .activity span, .activity.alt span { width: 45px; height: 45px; line-height: 45px; border-radius: 50%; -webkit-border-radius: 50%; background: #eee; text-align: center; color: #fff; font-size: 16px; } .activity.terques span { background: #8dd7d6; } .activity.terques h4 { color: #8dd7d6; } .activity.purple span { background: #b984dc; } .activity.purple h4 { color: #b984dc; } .activity.blue span { background: #90b4e6; } .activity.blue h4 { color: #90b4e6; } .activity.green span { background: #aec785; } .activity.green h4 { color: #aec785; } .activity h4 { margin-top:0 ; font-size: 16px; } .activity p { margin-bottom: 0; font-size: 13px; } .activity .activity-desk i, .activity.alt .activity-desk i { float: left; font-size: 18px; margin-right: 10px; color: #bebebe; } .activity .activity-desk { margin-left: 70px; position: relative; } .activity.alt .activity-desk { margin-right: 70px; position: relative; } .activity.alt .activity-desk .panel { float: right; position: relative; } .activity-desk .panel { background: #F4F4F4 ; display: inline-block; } .activity .activity-desk .arrow { border-right: 8px solid #F4F4F4 !important; } .activity .activity-desk .arrow { border-bottom: 8px solid transparent; border-top: 8px solid transparent; display: block; height: 0; left: -7px; position: absolute; top: 13px; width: 0; } .activity-desk .arrow-alt { border-left: 8px solid #F4F4F4 !important; } .activity-desk .arrow-alt { border-bottom: 8px solid transparent; border-top: 8px solid transparent; display: block; height: 0; right: -7px; position: absolute; top: 13px; width: 0; } .activity-desk .album { display: inline-block; margin-top: 10px; } .activity-desk .album a{ margin-right: 10px; } .activity-desk .album a:last-child{ margin-right: 0px; } a:hover{ text-decoration: none; } .vcodes_divider { width: 25%; border: 3px solid #fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .btn-card { background-color: #7289da; color:#fff; padding: 10px 20px; } .btn-card:hover { background-color: #23272a; color:#fff; } /* You want a simple and fancy tooltip? Just copy all [data-tooltip] blocks: */ [data-tooltip] { position: relative; z-index: 10; } /* Positioning and visibility settings of the tooltip */ [data-tooltip]:before, [data-tooltip]:after { position: absolute; visibility: hidden; opacity: 0; left: 50%; bottom: calc(100% + 5px); /* 5px is the size of the arrow */ pointer-events: none; transition: 0.2s; will-change: transform; } /* The actual tooltip with a dynamic width */ [data-tooltip]:before { content: attr(data-tooltip); padding: 10px 18px; min-width: 50px; max-width: 300px; width: max-content; width: -moz-max-content; border-radius: 6px; font-size: 14px; background-color: rgba(59, 72, 80, 0.9); background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44)); box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2); color: #fff; text-align: center; white-space: pre-wrap; transform: translate(-50%, -5px) scale(0.5); } /* Tooltip arrow */ [data-tooltip]:after { content: ''; border-style: solid; border-width: 5px 5px 0px 5px; /* CSS triangle */ border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent; transition-duration: 0s; /* If the mouse leaves the element, the transition effects for the tooltip arrow are "turned off" */ transform-origin: top; /* Orientation setting for the slide-down effect */ transform: translateX(-50%) scaleY(0); } /* Tooltip becomes visible at hover */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; opacity: 1; } /* Scales from 0.5 to 1 -> grow effect */ [data-tooltip]:hover:before { transition-delay: 0.3s; transform: translate(-50%, -5px) scale(1); } /* Arrow slide down effect only on mouseenter (NOT on mouseleave) */ [data-tooltip]:hover:after { transition-delay: 0.5s; /* Starting after the grow effect */ transition-duration: 0.2s; transform: translateX(-50%) scaleY(1); } /* That's it. */ /* If you want some adjustability here are some orientation settings you can use: */ /* LEFT */ /* Tooltip + arrow */ [data-tooltip-location="left"]:before, [data-tooltip-location="left"]:after { left: auto; right: calc(100% + 5px); bottom: 50%; } /* Tooltip */ [data-tooltip-location="left"]:before { transform: translate(-5px, 50%) scale(0.5); } [data-tooltip-location="left"]:hover:before { transform: translate(-5px, 50%) scale(1); } /* Arrow */ [data-tooltip-location="left"]:after { border-width: 5px 0px 5px 5px; border-color: transparent transparent transparent rgba(55, 64, 70, 0.9); transform-origin: left; transform: translateY(50%) scaleX(0); } [data-tooltip-location="left"]:hover:after { transform: translateY(50%) scaleX(1); } /* RIGHT */ [data-tooltip-location="right"]:before, [data-tooltip-location="right"]:after { left: calc(100% + 5px); bottom: 50%; } [data-tooltip-location="right"]:before { transform: translate(5px, 50%) scale(0.5); } [data-tooltip-location="right"]:hover:before { transform: translate(5px, 50%) scale(1); } [data-tooltip-location="right"]:after { border-width: 5px 5px 5px 0px; border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent; transform-origin: right; transform: translateY(50%) scaleX(0); } [data-tooltip-location="right"]:hover:after { transform: translateY(50%) scaleX(1); } /* BOTTOM */ [data-tooltip-location="bottom"]:before, [data-tooltip-location="bottom"]:after { top: calc(100% + 5px); bottom: auto; } [data-tooltip-location="bottom"]:before { transform: translate(-50%, 5px) scale(0.5); } [data-tooltip-location="bottom"]:hover:before { transform: translate(-50%, 5px) scale(1); } [data-tooltip-location="bottom"]:after { border-width: 0px 5px 5px 5px; border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent; transform-origin: bottom; } .btn-back { padding: 20px 50px; align-content: center; text-align: center; -moz-box-align: center; align-items: center; align-self: center; background-color:#23272a; color: #fff; transition: all 0s; } .btn-back:hover { background-color:#222425; } .btn-vote { padding: 15px 20px; align-content: center; text-align: center; -moz-box-align: center; align-items: center; align-self: center; background-color:#7289da; color: #fff; transition: all 0s; } .btn-vote:hover { background-color:#5668ac; } .bg-vote-vcodes { height: auto; width: 100%; padding-left: 20px!important; background: url(https://img.devsforum.net/tr/img/w4J3F10.png); background-size: 30%; background-color: #23272a; border-radius: 5px; padding: 13px; } /* NAVBAR */ .navbar { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; padding: inherit; } .vcodes-logo-nav { width: 100px; } .nav-item { font-size: 14px; padding: 0; background: transparent !important; border: none !important; } .nav-item:hover { background: transparent !important; } .dropdown-menu{ margin-top: 0; } .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } th { color: #fff!important; } .card-body iframe { width: 100%; height: 650px; } .btn-card { background-color:#7289da; color: #fff; transition: all 0s; } .btn-card:hover { background-color:#5668ac; } .preloader { align-items: center; align-content: center; margin-top: 20%; margin-bottom: 20%; overflow: hidden; overflow-x: hidden; overflow-y: hidden; align-tracks: center; } .loader { position: relative; width: 60px; height: 60px; border-radius: 50%; display: inline-block; vertical-align: center; align-items: center; } /*LOADER-1*/ .loader-1 .loader-outter { position: absolute; border: 4px solid #7289da; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; } .loader-1 .loader-inner { position: absolute; border: 4px solid #7289da; border-radius: 50%; width: 40px; height: 40px; left: calc(50% - 20px); top: calc(50% - 20px); border-right: 0; border-top-color: transparent; -webkit-animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite; } /* ---------------- KEYFRAMES ----------------- */ @-webkit-keyframes loader-1-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-1-outter { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-1-inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes loader-1-inner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* PRELOADER */ #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { z-index: 1001; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #222; z-index: 1000; } #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } /* Loaded styles */ .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-100%); /* IE 9 */ transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(100%); /* IE 9 */ transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-100%); /* IE 9 */ transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.3s 1s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s 1s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } #content { margin: 0 auto; } h1 { color: #fff!important; } pre { color: #fff; background: transparent; } pre.bot{ width: 100%; height: 100%; display: block; margin: 0; font-size: 87.5%; color: #fff; padding: 2; background: transparent; overflow: hidden; padding:1.25rem 1.5rem; white-space: pre-wrap; font-family: 'Poppins'; } pre td { color: #fff!important; } /* ========================================================================== ⚡ SUMON NEXT-GEN DESIGN SYSTEM - COMPLETE OBSIDIAN & CEMENT SUITE ========================================================================== */ :root { /* Ultra-Dark Obsidian Palette */ --paper: #060911; --surface: #0B101D; --surface-raised: #12192B; --surface-card: #0E1424; --surface-card-hover: #131B30; --navbar-bg: rgba(6, 9, 17, 0.92); --input-bg: #0D1322; /* Cement Line & Structural Borders */ --line: #222C40; --line-light: #323F59; --line-subtle: rgba(148, 163, 184, 0.18); --line-glow: rgba(59, 130, 246, 0.55); /* Pure White & High-Contrast Typography */ --ink: #FFFFFF; --ink-pure: #FFFFFF; --ink-soft: #CBD5E1; --ink-muted: #94A3B8; --ink-dark: #64748B; /* Electric Sapphire & Brand Accents */ --accent: #3B82F6; --accent-bright: #60A5FA; --accent-glow: #93C5FD; --accent-secondary: #2563EB; --accent-dark: #1D4ED8; /* Status Colors */ --success: #10B981; --success-glow: rgba(16, 185, 129, 0.35); --warning: #F59E0B; --warning-glow: rgba(245, 158, 11, 0.35); --danger: #EF4444; --danger-glow: rgba(239, 68, 68, 0.35); --purple: #8B5CF6; /* Gradients */ --njbots-gradient: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #3B82F6 100%); --njbots-gradient-hover: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%); --hero-gradient: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.2) 0%, transparent 60%), radial-gradient(circle at 10% 80%, rgba(96, 165, 250, 0.08) 0%, transparent 50%), #0B101D; --card-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%); /* Shadows & Glows */ --shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.85); --shadow-hover: 0 24px 48px -12px rgba(0, 0, 0, 0.95); --card-glow: 0 0 25px rgba(59, 130, 246, 0.16); --card-glow-strong: 0 0 35px rgba(59, 130, 246, 0.3); } /* Document & Base Typography */ html, body, #content { background-color: var(--paper) !important; color: var(--ink-soft) !important; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.65; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, strong, b, .font-weight-bold, .cardnjbotsName, .list-title, .navbar-brand, .brand-name, th, dt, .modal-title, .dropdown-header { color: #FFFFFF !important; font-weight: 700; } p, span, li, label, td, dd { color: var(--ink-soft); } .text-muted, small.text-muted, .small.text-muted { color: var(--ink-muted) !important; } /* Pure High-Contrast White & Glowing Icons */ i, svg, .fas, .far, .fab, .fad { color: #FFFFFF; vertical-align: middle; } .text-primary i, i.text-primary, .fas.text-primary, .fab.text-primary, .fad.text-primary { color: var(--accent-bright) !important; } .text-success i, i.text-success, .fas.text-success, .fad.text-success { color: var(--success) !important; } .text-warning i, i.text-warning, .fas.text-warning, .fad.text-warning { color: var(--warning) !important; } .text-danger i, i.text-danger, .fas.text-danger, .fad.text-danger { color: var(--danger) !important; } .fad { --fa-primary-color: var(--accent-bright); --fa-secondary-color: #FFFFFF; --fa-secondary-opacity: 0.9; } /* Links */ a { color: var(--accent-bright); text-decoration: none; transition: all 0.2s ease; } a:hover { color: #FFFFFF; text-decoration: none; } /* Navbar */ .navbar.bg-njbots { background: var(--navbar-bg) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line) !important; padding: 14px 0; position: sticky; top: 0; z-index: 1030; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); } .brand-name { color: #FFFFFF !important; font-size: 16px; font-weight: 800; letter-spacing: .15em; } .brand-name span { color: var(--accent-bright) !important; } .navbar .nav-link { color: var(--ink-soft) !important; font-size: 13px; font-weight: 600; letter-spacing: .03em; padding: 8px 16px !important; border-radius: 8px; border: 1px solid transparent !important; outline: none !important; transition: all 0.2s ease; } .navbar .nav-link:hover, .navbar .nav-link.active { color: #FFFFFF !important; background: rgba(59, 130, 246, 0.16) !important; border-color: rgba(59, 130, 246, 0.25) !important; } .navbar .nav-link:focus, .navbar .dropdown-toggle:focus, .navbar .btn:focus { outline: none !important; box-shadow: none !important; } /* Header Action Buttons (No Dark Borders) */ .navbar.bg-njbots .btn-outline-primary, .header-container .btn-outline-primary { background: rgba(59, 130, 246, 0.14) !important; border: 1px solid rgba(59, 130, 246, 0.35) !important; color: #FFFFFF !important; border-radius: 8px !important; outline: none !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important; transition: all .2s ease !important; } .navbar.bg-njbots .btn-outline-primary:hover, .header-container .btn-outline-primary:hover { background: var(--njbots-gradient) !important; border-color: transparent !important; color: #FFFFFF !important; box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45) !important; transform: translateY(-1px); } .navbar.bg-njbots .btn-primary, .header-container .btn-primary { border: 1px solid transparent !important; outline: none !important; } .brand-logo, .navbar-logo, .footer-logo, .page-brand-logo { filter: drop-shadow(0 4px 14px rgba(59, 130, 246, .5)); transition: all .25s ease; } .brand-logo:hover, .navbar-logo:hover { transform: scale(1.08) rotate(-2deg); } /* Hero Section */ .premium-hero { position: relative; overflow: hidden; min-height: 480px; background: #060911 url('/assets/images/hero-bg.svg') no-repeat center center / cover !important; border-bottom: 1px solid var(--line) !important; color: #FFFFFF; } .hero-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, black 0%, transparent 85%); pointer-events: none; } .premium-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .75fr); gap: 40px; align-items: center; min-height: 480px; padding: 48px 24px 64px; } /* Centered Hero for Bots & Servers Directory Pages */ .premium-hero-inner-centered { position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: 420px; padding: 56px 20px 64px !important; max-width: 900px !important; margin: 0 auto !important; grid-template-columns: none !important; } .premium-hero-inner-centered .hero-copy { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; max-width: 820px !important; margin: 0 auto !important; } .premium-hero-inner-centered .hero-copy h1 { margin: 14px auto 12px auto !important; text-align: center !important; max-width: 100% !important; } .premium-hero-inner-centered .hero-lede { margin: 0 auto 24px auto !important; text-align: center !important; max-width: 650px !important; } .premium-hero-inner-centered .hero-search-modern { max-width: 780px !important; margin: 0 auto !important; width: 100% !important; } .premium-hero-inner-centered .home-tags { justify-content: center !important; margin: 0 auto !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .hero-copy h1 { max-width: 650px; margin: 16px 0 14px; color: #FFFFFF !important; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; } .hero-copy h1 em { color: var(--accent-bright); font-style: normal; } .hero-lede { max-width: 520px; color: var(--ink-soft); font-size: 15px; line-height: 1.75; } /* Modern Unified Pill Capsule Hero Search Bar - Enlarge */ .hero-search-modern { max-width: 750px; margin-top: 26px; width: 100%; } .search-input-wrapper { display: flex !important; align-items: center !important; background: rgba(14, 20, 36, 0.96) !important; border: 2px solid #2B374E !important; border-radius: 60px !important; padding: 8px 10px 8px 24px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important; transition: all 0.25s ease !important; min-height: 64px !important; } .search-input-wrapper:focus-within { border-color: var(--accent-bright) !important; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4), 0 20px 50px rgba(37, 99, 235, 0.35) !important; transform: translateY(-2px); } .search-input-wrapper .search-icon { color: var(--accent-bright) !important; font-size: 20px !important; margin-right: 14px !important; flex-shrink: 0; } .search-input-wrapper .search-field, .search-input-wrapper input#searchbar { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; height: 50px !important; background: transparent !important; background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; color: #FFFFFF !important; font-size: 16.5px !important; font-weight: 500 !important; padding: 0 !important; margin: 0 !important; } .search-input-wrapper .search-field::placeholder, .search-input-wrapper input#searchbar::placeholder { color: var(--ink-muted) !important; font-size: 16px !important; } .search-submit-btn { width: 50px !important; height: 50px !important; min-width: 50px !important; border-radius: 50% !important; background: var(--njbots-gradient) !important; border: none !important; outline: none !important; color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45) !important; transition: all 0.2s ease !important; font-size: 18px !important; flex-shrink: 0; } .search-submit-btn:hover { transform: scale(1.08) !important; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.65) !important; } /* Hero Showcase Card with Background */ .hero-aside { display: flex; align-items: center; justify-content: center; } .hero-panel-card { width: 100%; max-width: 440px; min-height: 300px; border-radius: 20px; background-size: cover; background-position: center; border: 1px solid var(--line); box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.8), 0 0 35px rgba(59, 130, 246, 0.2); position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .hero-panel-card:hover { transform: translateY(-6px); border-color: var(--accent-bright); box-shadow: 0 26px 56px -8px rgba(0, 0, 0, 0.9), 0 0 45px rgba(59, 130, 246, 0.35); } .panel-card-overlay { padding: 32px 28px; height: 100%; display: flex; flex-column: column; justify-content: space-between; background: linear-gradient(135deg, rgba(14, 20, 36, 0.65) 0%, rgba(6, 9, 17, 0.85) 100%); border-radius: 20px; } .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .panel-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.15em; color: var(--accent-bright); text-transform: uppercase; } .panel-title { color: #FFFFFF !important; font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.02em; } .panel-subtitle { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin-bottom: 24px; } .panel-float-badge { display: inline-flex; align-items: center; padding: 10px 16px; background: rgba(14, 20, 36, 0.85); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .home-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .home-tags .btn-tag, .btn-tag { display: inline-flex; align-items: center; padding: 8px 16px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; color: var(--ink-soft) !important; background: var(--surface) !important; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; } .home-tags .btn-tag:hover, .btn-tag:hover { color: #FFFFFF !important; border-color: var(--accent-bright) !important; background: rgba(59, 130, 246, 0.16) !important; transform: translateY(-2px); } .home-tags .btn-tag.is-active, .btn-tag.is-active { color: #FFFFFF !important; border-color: var(--accent) !important; background: var(--njbots-gradient) !important; box-shadow: 0 4px 16px rgba(37, 99, 235, .45); } /* Cards & Containers */ .cardnjbotsCard, .box, .card, .panel, .widget, .widget-content, .modal-content, .dropdown-menu { background: var(--surface-card) !important; background-color: var(--surface-card) !important; color: var(--ink-soft) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: var(--shadow) !important; position: relative; overflow: hidden; transition: transform .28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .28s ease, border-color .28s ease !important; } .cardnjbotsCard:before, .box:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--card-shine); pointer-events: none; } .cardnjbotsCard:hover, .box:hover, .card:hover { transform: translateY(-6px) scale(1.008); border-color: var(--accent-bright) !important; box-shadow: var(--shadow-hover), var(--card-glow-strong) !important; } .cardnjbotsName { color: #FFFFFF !important; font-size: 17px; font-weight: 700; } .cardnjbotsDesc { color: var(--ink-soft) !important; font-size: 13px; line-height: 1.6; } /* Buttons */ .btn { border-radius: 10px; font-weight: 600; font-size: 13px; letter-spacing: .02em; padding: 9px 20px; transition: all .22s cubic-bezier(0.2, 0.8, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .btn-primary { background: var(--njbots-gradient) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 4px 16px rgba(37, 99, 235, .4); } .btn-primary:hover { background: var(--njbots-gradient-hover) !important; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(37, 99, 235, .6); } .btn-card, .btn-outline-primary { color: #FFFFFF !important; background: rgba(18, 25, 43, 0.75) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; } .btn-card:hover, .btn-outline-primary:hover { color: #FFFFFF !important; background: var(--njbots-gradient) !important; border-color: transparent !important; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(37, 99, 235, .45); } .btn-success { background: linear-gradient(135deg, #059669, #10B981) !important; color: #FFFFFF !important; border: 0 !important; box-shadow: 0 4px 16px rgba(16, 185, 129, .35); } .btn-success:hover { background: linear-gradient(135deg, #10B981, #34D399) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 185, 129, .5); } .btn-danger { background: linear-gradient(135deg, #DC2626, #EF4444) !important; color: #FFFFFF !important; border: 0 !important; box-shadow: 0 4px 16px rgba(239, 68, 68, .35); } .btn-danger:hover { background: linear-gradient(135deg, #EF4444, #F87171) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(239, 68, 68, .5); } /* Badges & Tags */ .tag.is-dark, .badge-secondary, .tag { background-color: var(--surface-raised) !important; border: 1px solid var(--line) !important; color: #FFFFFF !important; border-radius: 7px; font-weight: 600; font-size: 12px; padding: 5px 12px; } .badge-primary, .tag.is-primary { background: rgba(37, 99, 235, 0.25) !important; border: 1px solid var(--accent) !important; color: #FFFFFF !important; } .badge-success, .tag.is-success { background: rgba(16, 185, 129, 0.22) !important; border: 1px solid var(--success) !important; color: #FFFFFF !important; } .badge-warning, .tag.is-warning { background: rgba(245, 158, 11, 0.22) !important; border: 1px solid var(--warning) !important; color: #FFFFFF !important; } /* Forms & Inputs */ .form-control, input.form-control, textarea.form-control, select.form-control, .input, .textarea, .select select, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="search"] { background-color: var(--input-bg) !important; border: 1px solid var(--line) !important; color: #FFFFFF !important; border-radius: 10px !important; font-size: 14px; padding: 11px 16px; transition: all .2s ease; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-muted) !important; } .form-control:focus, input:focus, textarea:focus, select:focus, .input:focus, .textarea:focus, .select select:focus { background-color: var(--input-bg) !important; border-color: var(--accent-bright) !important; color: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important; outline: 0; } /* Collection Filter Bar */ .collection-filter-wrap { position: relative; z-index: 2; margin-top: -24px; } .collection-filter { display: inline-flex; align-items: center; gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .collection-filter-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; transition: all .2s ease; } .collection-filter-button i { color: var(--accent-bright); } .collection-filter-button:hover { color: #FFFFFF; background: rgba(59, 130, 246, 0.16); } .collection-filter-button.is-active { color: #FFFFFF !important; background: var(--njbots-gradient) !important; box-shadow: 0 4px 16px rgba(37, 99, 235, .4); } .collection-filter-button.is-active i { color: #FFFFFF !important; } .list-section { margin-top: 20px; padding: 14px 0 18px; scroll-margin-top: 70px; } .section-kicker { margin-bottom: 4px; color: var(--accent-bright); font-size: 11px; font-weight: 800; letter-spacing: .2em; } .list-title { margin: 0; color: #FFFFFF !important; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; } .list-subtitle { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; } /* Tables & CodeMirror */ table, .table { color: #FFFFFF !important; border-color: var(--line) !important; background: transparent !important; } table thead th, .table thead th { background-color: var(--surface-raised) !important; border-color: var(--line) !important; color: #FFFFFF !important; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } table td, .table td { border-color: var(--line) !important; color: var(--ink-soft) !important; vertical-align: middle; } table tr:hover, .table tbody tr:hover { background-color: rgba(59, 130, 246, 0.1) !important; } pre, code, .CodeMirror { background-color: var(--surface-raised) !important; border: 1px solid var(--line) !important; color: #FFFFFF !important; border-radius: 10px; } pre.bot { width: 100%; height: 100%; display: block; margin: 0; font-size: 87.5%; color: #FFFFFF !important; background: transparent !important; overflow: hidden; padding: 1.25rem 1.5rem; white-space: pre-wrap; font-family: 'Poppins', monospace; } pre td { color: #FFFFFF !important; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--paper); } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ========================================================================== ADMIN PANEL SUITE (COMPREHENSIVE MODERN STYLING) ========================================================================== */ body.dashboard-analytics { color: #FFFFFF !important; background: var(--paper) !important; background-color: var(--paper) !important; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } body.dashboard-analytics .main-container { color: #FFFFFF !important; background: var(--paper) !important; background-color: var(--paper) !important; min-height: 100vh; padding-top: 64px !important; margin-left: 0 !important; width: 100% !important; } body.dashboard-analytics .main-content { color: #FFFFFF !important; background: var(--paper) !important; background-color: var(--paper) !important; padding: 28px 24px 60px !important; margin-left: 0 !important; width: 100% !important; max-width: 100% !important; } /* Admin Top Navbar */ .header-container { z-index: 1040 !important; } .header-container .header.navbar { background: var(--surface) !important; background-color: #080D1A !important; border-bottom: 1px solid var(--line) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .6) !important; padding: 10px 24px !important; min-height: 64px; } .header-container .navbar-nav .nav-link { color: var(--ink-soft) !important; font-size: 13.5px !important; padding: 8px 12px !important; border-radius: 8px !important; transition: all .2s ease !important; } .header-container .navbar-nav .nav-link:hover, .header-container .navbar-nav .nav-link.active { color: #FFFFFF !important; background: rgba(59, 130, 246, 0.16) !important; } .header-container .navbar-nav .dropdown-menu { background: var(--surface-card) !important; background-color: #0E1424 !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.9), 0 0 20px rgba(59, 130, 246, 0.15) !important; padding: 8px !important; margin-top: 6px !important; } .header-container .navbar-nav .dropdown-item { color: var(--ink-soft) !important; border-radius: 8px !important; padding: 8px 14px !important; font-size: 13px !important; font-weight: 500 !important; transition: all .2s ease !important; } .header-container .navbar-nav .dropdown-item:hover { color: #FFFFFF !important; background: rgba(59, 130, 246, 0.2) !important; transform: translateX(3px); } .sidebar-wrapper, #compactSidebar, .submenu-sidebar, #compact_submenuSidebar { display: none !important; } .submenu-sidebar .submenu-list li a { color: var(--ink-soft) !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 13px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; transition: all .2s ease !important; } .submenu-sidebar .submenu-list li a:hover, .submenu-sidebar .submenu-list li.active a { color: #FFFFFF !important; background: var(--njbots-gradient) !important; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important; transform: translateX(3px); } /* Admin Widgets & Analytics Cards */ .widget, .widget-content, .widget-content-area, .widget-chart-three, .widget-card-four, .widget-card-two, .widget-table-two { color: #FFFFFF !important; background: var(--surface-card) !important; background-color: #0E1424 !important; border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: var(--shadow) !important; padding: 20px !important; position: relative !important; overflow: hidden !important; } .w-info .value { font-size: 28px !important; font-weight: 800 !important; color: #FFFFFF !important; letter-spacing: -0.02em; } .w-info p { color: var(--ink-soft) !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 0 !important; } /* Admin DataTables & Tables */ .dashboard-analytics table, .dashboard-analytics .table { color: #FFFFFF !important; background: transparent !important; border-collapse: separate !important; border-spacing: 0 !important; } .dashboard-analytics table thead th, .dashboard-analytics .table thead th { background-color: var(--surface-raised) !important; border-color: var(--line) !important; color: #FFFFFF !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; padding: 12px 14px !important; } .dashboard-analytics table tbody td, .dashboard-analytics .table tbody td { border-color: var(--line) !important; color: #FFFFFF !important; vertical-align: middle !important; padding: 12px 14px !important; } .dashboard-analytics table tbody tr:hover, .dashboard-analytics .table tbody tr:hover { background-color: rgba(59, 130, 246, 0.12) !important; } /* DataTables Filter & Pagination */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { color: #FFFFFF !important; background: var(--surface-raised) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 6px 12px !important; } .dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter { color: var(--ink-soft) !important; } .page-link { color: var(--accent-bright) !important; background: var(--surface-raised) !important; border-color: var(--line) !important; } /* Admin Nav Tabs & Pills */ .nav-pills .nav-link { color: var(--ink-soft) !important; background: var(--surface-raised) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; margin-right: 8px !important; margin-bottom: 6px !important; font-weight: 600 !important; font-size: 13px !important; padding: 8px 16px !important; transition: all .2s ease !important; } .nav-pills .nav-link:hover { color: #FFFFFF !important; border-color: var(--accent-bright) !important; } .nav-pills .nav-link.active { color: #FFFFFF !important; background: var(--njbots-gradient) !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(37, 99, 235, .4) !important; } /* Form inputs */ .dashboard-analytics .form-control { background-color: var(--surface-raised) !important; border: 1px solid var(--line) !important; color: #FFFFFF !important; border-radius: 8px !important; } .dashboard-analytics .form-control:focus { border-color: var(--accent-bright) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important; } /* Header & Dropdown Utilities */ .navbar.bg-njbots .nav-item .dropdown-menu { background: var(--surface-card) !important; background-color: var(--surface-card) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.9), 0 0 20px rgba(59, 130, 246, 0.15) !important; padding: 8px !important; margin-top: 8px !important; } .navbar.bg-njbots .dropdown-item { color: var(--ink-soft) !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 13px !important; transition: all 0.2s ease !important; } .navbar.bg-njbots .dropdown-item:hover, .navbar.bg-njbots .dropdown-item:focus { color: #FFFFFF !important; background: rgba(59, 130, 246, 0.18) !important; transform: translateX(3px); } .navbar.bg-njbots .dropdown-header { color: var(--accent-bright) !important; padding: 6px 12px 4px !important; } .navbar.bg-njbots .dropdown-divider { border-top: 1px solid var(--line) !important; margin: 6px 0 !important; } /* ========================================================================== HEADER HOVER TRANSPARENCY FIX (REMOVE CEMENT GRAY BACKDROP) ========================================================================== */ .navbar .nav-item, .navbar-nav .nav-item, .navbar .nav-item:hover, .navbar-nav .nav-item:hover, .navbar-nav > li, .navbar-nav > li:hover, .header-container .nav-item, .header-container .nav-item:hover, .header-container .navbar-nav .nav-item, .header-container .navbar-nav .nav-item:hover { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } .navbar .nav-link, .header-container .navbar-nav .nav-link { background: transparent !important; background-color: transparent !important; border: 1px solid transparent !important; } .navbar .nav-link:hover, .navbar .nav-link.active, .header-container .navbar-nav .nav-link:hover, .header-container .navbar-nav .nav-link.active { color: #FFFFFF !important; background: rgba(59, 130, 246, 0.16) !important; background-color: rgba(59, 130, 246, 0.16) !important; border-color: rgba(59, 130, 246, 0.25) !important; } .navbar .btn-outline-primary, .header-container .btn-outline-primary { background: rgba(59, 130, 246, 0.14) !important; background-color: rgba(59, 130, 246, 0.14) !important; border: 1px solid rgba(59, 130, 246, 0.35) !important; } .navbar .btn-outline-primary:hover, .header-container .btn-outline-primary:hover { background: var(--njbots-gradient) !important; border-color: transparent !important; box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45) !important; } /* ========================================================================== 📱 COMPREHENSIVE RESPONSIVE & MOBILE-FIRST SUITE Fully responsive across mobile (320px - 480px), tablet (768px - 991px), laptop (1024px - 1440px), and ultra-wide desktops. Guarantees zero horizontal scroll, clean spacing, and modern UI. ========================================================================== */ /* Universal Containment & Box Sizing */ html, body, #content { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; box-sizing: border-box !important; position: relative !important; } *, *::before, *::after { box-sizing: border-box !important; } /* Media Elements Safety */ img, video, iframe, svg, canvas { max-width: 100%; height: auto; } /* Code & Pre Formatting Safety */ pre, code, pre.bot, .CodeMirror { max-width: 100% !important; overflow-x: auto !important; white-space: pre-wrap !important; word-break: break-word !important; } /* Tables & DataTables Responsiveness */ .table-responsive { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin-bottom: 1rem; } table, .table { width: 100% !important; } /* Modernized Contact Form */ .contact-form { background: var(--surface-card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; width: 100% !important; max-width: 860px !important; margin: 24px auto 40px auto !important; padding: 28px 24px !important; box-shadow: var(--shadow) !important; } .contact-form form { padding: 0 !important; } .contact-form form .row { margin-bottom: 0 !important; } .contact-form .form-control { width: 100% !important; } /* Scrollable Horizontal Tabs Helper */ .touch-tabs, .nav-tabs.touch-tabs, .category-nav-bar, .plugin-tab-bar, .leaderboard-nav-pills { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .touch-tabs::-webkit-scrollbar, .nav-tabs.touch-tabs::-webkit-scrollbar, .category-nav-bar::-webkit-scrollbar, .plugin-tab-bar::-webkit-scrollbar, .leaderboard-nav-pills::-webkit-scrollbar { display: none !important; } /* Public Navbar Mobile Enhancements */ @media (max-width: 991.98px) { .navbar.bg-njbots { padding: 10px 0 !important; } .navbar-collapse { background: rgba(11, 16, 29, 0.98) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 16px 14px !important; margin-top: 12px !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } .navbar .nav-link { padding: 10px 14px !important; font-size: 14px !important; display: flex !important; align-items: center !important; margin-bottom: 2px !important; } .navbar .dropdown-menu { background: rgba(18, 25, 43, 0.9) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; margin: 4px 0 10px 12px !important; padding: 8px !important; } } /* Hero Section Breakpoints */ @media (max-width: 991.98px) { .premium-hero { min-height: auto !important; } .premium-hero-inner { grid-template-columns: 1fr !important; gap: 28px !important; padding: 36px 16px 44px !important; min-height: auto !important; text-align: center !important; } .hero-copy { display: flex !important; flex-direction: column !important; align-items: center !important; } .hero-copy h1, .hero-stylish-title { font-size: clamp(28px, 6.5vw, 48px) !important; margin: 12px 0 14px !important; } .hero-stylish-eyebrow { font-size: 10.5px !important; padding: 5px 12px !important; max-width: 100% !important; white-space: normal !important; } .hero-lede, .hero-stylish-lede { font-size: 14.5px !important; max-width: 540px !important; margin: 0 auto 18px auto !important; } .hero-search, .hero-search-modern { width: 100% !important; max-width: 100% !important; height: 52px !important; margin: 16px auto 0 !important; } .home-tags { justify-content: center !important; gap: 6px !important; margin-top: 14px !important; } .home-tags .btn-tag, .btn-tag { padding: 6px 12px !important; font-size: 11.5px !important; } .hero-aside { width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } } /* Tablet & Mobile Card Grid Normalization */ @media (min-width: 768px) and (max-width: 1023.98px) { .columns.is-desktop { display: flex !important; flex-wrap: wrap !important; margin-left: -6px !important; margin-right: -6px !important; } .columns.is-desktop > .column.is-3, .columns.is-desktop > .column.is-4 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 6px !important; } .columns.is-desktop > .column.is-6 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 6px !important; } } /* Mobile 2-Column Sleek Cards (Eliminates tall/stretched cards on mobile) */ @media (max-width: 767.98px) { .columns.is-desktop { display: flex !important; flex-wrap: wrap !important; margin-left: -4px !important; margin-right: -4px !important; } .columns.is-desktop > .column.is-3, .columns.is-desktop > .column.is-4 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 4px !important; margin-bottom: 8px !important; } .columns.is-desktop > .column.is-6, .columns.is-desktop > .column.is-12 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 4px !important; margin-bottom: 8px !important; } .cardnjbotsCard, .box { padding: 12px 10px !important; border-radius: 12px !important; min-height: auto !important; } .cardnjbotsCard img.rounded-circle { width: 38px !important; height: 38px !important; } .cardnjbotsName { font-size: 13.5px !important; margin-bottom: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .cardnjbotsDesc { font-size: 11px !important; line-height: 1.35 !important; max-height: 30px !important; -webkit-line-clamp: 2 !important; margin-bottom: 8px !important; } .tag.is-dark, .cardnjbotsCard .badge { font-size: 9.5px !important; padding: 2px 6px !important; } .cardnjbotsCard .btn, .cardnjbotsCard .btn-card, .cardnjbotsCard .btn-primary { padding: 5px 6px !important; font-size: 11px !important; border-radius: 6px !important; gap: 3px !important; } } /* Small Mobile (<= 480px) */ @media (max-width: 480px) { .container { padding-left: 10px !important; padding-right: 10px !important; } .list-title { font-size: 18px !important; } .section-kicker { font-size: 10px !important; } .stat-glow-card { padding: 12px 14px !important; gap: 10px !important; } .stat-glow-icon { width: 38px !important; height: 38px !important; font-size: 16px !important; } .stat-glow-num { font-size: 1.15rem !important; } .btn { padding: 7px 12px !important; font-size: 12px !important; } .btn-lg { padding: 10px 14px !important; font-size: 13.5px !important; } } /* Landing Page Hero Responsive Refinements */ @media (max-width: 991.98px) { .premium-hero { padding: 20px 0 10px 0 !important; } .premium-hero-inner { padding: 24px 12px 28px !important; gap: 18px !important; } .hero-stylish-eyebrow { font-size: 10px !important; padding: 4px 10px !important; margin-bottom: 10px !important; } .hero-copy h1, .hero-stylish-title { font-size: clamp(22px, 5.5vw, 36px) !important; line-height: 1.25 !important; margin: 6px 0 10px !important; } .hero-highlight-word { display: inline-block !important; } .hero-lede, .hero-stylish-lede { font-size: 13px !important; line-height: 1.45 !important; max-width: 460px !important; margin: 0 auto 14px auto !important; color: #94a3b8 !important; } .hero-search-modern { max-width: 100% !important; margin: 0 auto !important; } .hero-search-modern .search-input-wrapper { height: 46px !important; border-radius: 12px !important; } .hero-search-modern .search-field { font-size: 12.5px !important; padding-left: 40px !important; padding-right: 44px !important; } .hero-search-modern .search-icon { left: 14px !important; font-size: 13px !important; } .hero-search-modern .search-submit-btn { right: 6px !important; width: 34px !important; height: 34px !important; font-size: 12px !important; } .home-tags { margin-top: 10px !important; gap: 5px !important; } .home-tags .btn-tag { padding: 4px 9px !important; font-size: 11px !important; border-radius: 8px !important; } .hero-aside { max-width: 100% !important; margin-top: 10px !important; width: 100% !important; } .hero-aside .btn { padding: 10px 14px !important; font-size: 13px !important; border-radius: 10px !important; flex: 1 1 auto !important; } } /* Fullscreen Homepage Hero Banner */ .homepage-fullscreen-hero { min-height: calc(100vh - 70px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; background: #060911 url('/assets/images/hero-bg.svg') no-repeat center center / cover !important; border-bottom: 1px solid var(--line) !important; padding: 28px 20px 30px 20px !important; position: relative !important; } .premium-hero-inner-split { position: relative; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; width: 100% !important; max-width: 1240px !important; padding: 10px 12px 10px 12px !important; margin: 0 auto !important; } @media (max-width: 991.98px) { .homepage-fullscreen-hero { min-height: auto !important; padding: 20px 12px 24px 12px !important; } } @keyframes bounceSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .animate-bounce { animation: bounceSlow 1.8s infinite ease-in-out; } /* Animated Flowing Wave Divider */ @keyframes waveMotion1 { 0% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(-40px) scaleY(1.15); } 100% { transform: translateX(0) scaleY(1); } } @keyframes waveMotion2 { 0% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(50px) scaleY(0.9); } 100% { transform: translateX(0) scaleY(1); } } @keyframes waveMotion3 { 0% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(-60px) scaleY(1.2); } 100% { transform: translateX(0) scaleY(1); } } @keyframes waveMotion4 { 0% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(30px) scaleY(0.95); } 100% { transform: translateX(0) scaleY(1); } } .wave-animated { overflow: hidden !important; display: block !important; width: 100% !important; pointer-events: none !important; } .wave-animated .wave-layer-1 { animation: waveMotion1 7s ease-in-out infinite alternate; transform-origin: 50% 100%; } .wave-animated .wave-layer-2 { animation: waveMotion2 10s ease-in-out infinite alternate; transform-origin: 50% 100%; } .wave-animated .wave-layer-3 { animation: waveMotion3 13s ease-in-out infinite alternate; transform-origin: 50% 100%; } .wave-animated .wave-layer-4 { animation: waveMotion4 8.5s ease-in-out infinite alternate; transform-origin: 50% 100%; } /* Sailing Ship Riding On Top of Wave */ .wave-wrapper { position: relative; overflow: hidden; width: 100%; margin-bottom: -9px; pointer-events: none; min-height: 50px; } .sailing-ship { position: absolute; bottom: 12px; left: -80px; z-index: 5; pointer-events: none; animation: sailAcross 22s linear infinite; } .sailing-ship svg { animation: shipBobbing 2s ease-in-out infinite alternate; transform-origin: center bottom; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); } @keyframes sailAcross { 0% { left: -80px; transform: scaleX(1); } 48% { left: calc(100% + 40px); transform: scaleX(1); } 50% { left: calc(100% + 40px); transform: scaleX(-1); } 98% { left: -80px; transform: scaleX(-1); } 100% { left: -80px; transform: scaleX(1); } } @keyframes shipBobbing { 0% { transform: translateY(0px) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(2deg); } 100% { transform: translateY(3px) rotate(7deg); } } /* NJBS Bot Dashboard Universal Collapse (Desktop & Mobile) */ .dash-sidebar { transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease !important; } .dash-main { transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s ease !important; } @media (min-width: 992px) { .dash-sidebar.desktop-collapsed { width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } .dash-main.desktop-expanded { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding: 24px 28px !important; } } @media (max-width: 991.98px) { .dashboard-wrapper { display: block !important; position: relative !important; width: 100% !important; max-width: 100vw !important; } .dash-sidebar { position: fixed !important; top: 0 !important; left: -320px !important; width: 290px !important; max-width: 86vw !important; height: 100vh !important; z-index: 1050 !important; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 0 50px rgba(0, 0, 0, 0.85) !important; } .dash-sidebar.sidebar-open { left: 0 !important; } .dash-sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1045; display: none; } .dash-sidebar-overlay.active { display: block !important; } .dash-main { width: 100% !important; max-width: 100% !important; padding: 16px 12px 60px !important; } .plugin-tab-bar { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 6px !important; padding-bottom: 8px !important; } .plugin-tab-bar::-webkit-scrollbar { display: none !important; } .plugins-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .setting-card { padding: 16px !important; border-radius: 12px !important; } .setting-header { flex-wrap: wrap !important; gap: 8px !important; } .detail-header { flex-wrap: wrap !important; gap: 12px !important; } .detail-title-group h2 { font-size: 20px !important; } } @media (min-width: 576px) and (max-width: 991.98px) { .plugins-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Admin Dashboard Mobile Suite */ @media (max-width: 991.98px) { .dashboard-analytics .layout-px-spacing, .layout-px-spacing { padding: 0 10px !important; margin: 0 !important; } .header-container.fixed-top { height: auto !important; min-height: 56px !important; } .header-container .header.navbar { padding: 8px 14px !important; min-height: 56px !important; } .dashboard-analytics .page-header { margin-top: 60px !important; margin-bottom: 12px !important; padding: 8px 0 !important; } .dashboard-analytics .main-content { padding: 14px 10px 60px !important; width: 100% !important; } .dashboard-analytics .nav-tabs, .nav-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding-bottom: 4px !important; border-bottom: 1px solid var(--line) !important; } .dashboard-analytics .nav-tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none !important; } .dashboard-analytics .nav-tabs .nav-link, .nav-tabs .nav-link { white-space: nowrap !important; padding: 8px 12px !important; font-size: 12px !important; } .dashboard-analytics .statbox { padding: 10px 12px !important; } .dashboard-analytics .statbox h4 { font-size: 17px !important; } .w-info .value { font-size: 20px !important; } .dashboard-analytics .widget { padding: 14px !important; border-radius: 12px !important; margin-bottom: 14px !important; } .dashboard-analytics .widget-table-two { padding: 14px !important; } .dashboard-analytics .table { font-size: 12px !important; } .dashboard-analytics .table th, .dashboard-analytics .table td { padding: 8px 6px !important; white-space: nowrap !important; } #adminNavbarContent { max-height: calc(85vh - 60px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } } /* Leaderboard Podium Mobile Vertical Ordering */ @media (max-width: 767.98px) { .podium-container { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; margin: 20px auto 35px auto !important; } .podium-first { order: 1 !important; padding: 24px 18px !important; } .podium-second { order: 2 !important; padding: 20px 18px !important; } .podium-third { order: 3 !important; padding: 20px 18px !important; } .rank-row { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 14px !important; } .rank-row > div:last-child { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } } /* Bot & Server Detail Header Mobile */ @media (max-width: 767.98px) { .bot-hero-card, .server-hero-card { padding: 20px 16px !important; border-radius: 16px !important; } .bot-avatar-large, .server-avatar-large { width: 76px !important; height: 76px !important; border-radius: 18px !important; margin-right: 0 !important; margin-bottom: 12px !important; } } /* Wave Divider & Team Grid Mobile Safety */ .animated-wave { width: 100% !important; max-width: 100vw !important; overflow: hidden !important; display: block; } @media (max-width: 576px) { .team-grid { grid-template-columns: 1fr !important; } .searchArea { width: 100% !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; } } /* ========================================================================== FEATURED / SPOTLIGHT CARD STYLES (BOT & SERVER OF THE WEEK) ========================================================================== */ .spotlight-card { position: relative; background: radial-gradient(circle at 95% 15%, rgba(245, 158, 11, 0.16) 0%, transparent 55%), radial-gradient(circle at 5% 85%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(10, 15, 29, 0.98) 100%); border: 1.5px solid rgba(245, 158, 11, 0.35); border-radius: 20px; padding: 24px 28px; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.12); backdrop-filter: blur(16px); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 35px; } .spotlight-card.server-spotlight { background: radial-gradient(circle at 95% 15%, rgba(139, 92, 246, 0.2) 0%, transparent 55%), radial-gradient(circle at 5% 85%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(10, 15, 29, 0.98) 100%); border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(139, 92, 246, 0.15); } .spotlight-card:hover { transform: translateY(-2px); box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.7), 0 0 35px rgba(245, 158, 11, 0.2); } .spotlight-card.server-spotlight:hover { box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.7), 0 0 35px rgba(139, 92, 246, 0.22); } .spotlight-corner-glow { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%); filter: blur(20px); pointer-events: none; } .spotlight-card.server-spotlight .spotlight-corner-glow { background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%); } .spotlight-avatar-wrapper { position: relative; flex-shrink: 0; } .spotlight-avatar { width: 80px; height: 80px; border-radius: 20px; object-fit: cover; border: 3px solid rgba(245, 158, 11, 0.7); box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); background: #0f172a; } .spotlight-card.server-spotlight .spotlight-avatar { border-color: rgba(139, 92, 246, 0.7); box-shadow: 0 0 20px rgba(139, 92, 246, 0.35); } .spotlight-rank-crown { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); border: 2px solid #0f172a; } .spotlight-card.server-spotlight .spotlight-rank-crown { background: linear-gradient(135deg, #8b5cf6, #6366f1); } .spotlight-badge-gold { display: inline-flex; align-items: center; background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15)); border: 1px solid rgba(245, 158, 11, 0.5); color: #fbbf24; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; } .spotlight-badge-purple { display: inline-flex; align-items: center; background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.15)); border: 1px solid rgba(139, 92, 246, 0.5); color: #c084fc; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; } .spotlight-chip { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .spotlight-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 4px; line-height: 1.2; } .spotlight-desc { color: #cbd5e1; font-size: 13.5px; line-height: 1.5; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .btn-spotlight-vote { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff !important; font-weight: 700; padding: 8px 18px; border-radius: 10px; border: none; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35); transition: all 0.2s ease; display: inline-flex; align-items: center; font-size: 13px; } .btn-spotlight-vote:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5); color: #fff !important; } .btn-spotlight-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff !important; font-weight: 700; padding: 8px 18px; border-radius: 10px; border: none; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35); transition: all 0.2s ease; display: inline-flex; align-items: center; font-size: 13px; } .btn-spotlight-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); color: #fff !important; } .btn-spotlight-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff !important; font-weight: 700; padding: 8px 18px; border-radius: 10px; border: none; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35); transition: all 0.2s ease; display: inline-flex; align-items: center; font-size: 13px; } .btn-spotlight-purple:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5); color: #fff !important; } .btn-spotlight-outline { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); color: #f1f5f9 !important; font-weight: 600; padding: 8px 16px; border-radius: 10px; transition: all 0.2s ease; display: inline-flex; align-items: center; font-size: 13px; } .btn-spotlight-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #fff !important; transform: translateY(-1px); } @media (max-width: 991px) { .spotlight-card { padding: 20px; } .spotlight-actions { margin-top: 16px; width: 100%; } .spotlight-actions .btn { flex: 1 1 auto; justify-content: center; } } /* ========================================================================== HERO SPOTLIGHT AVATAR (LEFT-EDGE BLUE THEMED WITH PILL BADGE) ========================================================================== */ @keyframes heroAvatarFloatBlue { 0%, 100% { transform: translateY(0px) rotate(0deg); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.45), 0 0 25px rgba(59, 130, 246, 0.3); } 50% { transform: translateY(-8px) rotate(2deg); box-shadow: 0 18px 40px rgba(59, 130, 246, 0.7), 0 0 35px rgba(59, 130, 246, 0.5); } } @keyframes heroAvatarFloatPurple { 0%, 100% { transform: translateY(0px) rotate(0deg); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.45), 0 0 25px rgba(139, 92, 246, 0.3); } 50% { transform: translateY(-8px) rotate(2deg); box-shadow: 0 18px 40px rgba(139, 92, 246, 0.7), 0 0 35px rgba(139, 92, 246, 0.5); } } .hero-spotlight-side-anchor { position: absolute; left: clamp(24px, 5vw, 72px); top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; align-items: center; } .hero-spotlight-frame { position: relative; background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 75%), linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 14, 30, 0.95) 100%); border: 1.5px solid rgba(59, 130, 246, 0.5); border-radius: 34px; padding: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px); display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .hero-spotlight-frame.server-frame { background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 75%), linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 14, 30, 0.95) 100%); border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .hero-spotlight-frame:hover { transform: translateY(-3px) scale(1.03); border-color: rgba(59, 130, 246, 0.85); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 40px rgba(59, 130, 246, 0.45); } .hero-spotlight-frame.server-frame:hover { border-color: rgba(59, 130, 246, 0.85); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 40px rgba(59, 130, 246, 0.45); } .hero-spotlight-avatar-link { display: inline-block; text-decoration: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; text-align: center; } .hero-spotlight-avatar-link:hover { transform: scale(1.06) translateY(-2px); } .hero-spotlight-avatar-box { position: relative; width: 92px; height: 92px; border-radius: 28px; animation: heroAvatarFloatBlue 3.5s ease-in-out infinite; border: 3px solid rgba(59, 130, 246, 0.9); background: #080e1e; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0 auto; } .hero-spotlight-avatar-box.server-box { animation: heroAvatarFloatBlue 3.5s ease-in-out infinite; border-color: rgba(59, 130, 246, 0.9); } .hero-spotlight-img { width: 100%; height: 100%; border-radius: 24px; object-fit: cover; } .hero-spotlight-crown { position: absolute; top: -10px; right: -8px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fbbf24; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 2px solid #080e1e; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(59, 130, 246, 0.5); } .hero-spotlight-avatar-box.server-box .hero-spotlight-crown { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fbbf24; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(59, 130, 246, 0.5); } .hero-spotlight-pill { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #ffffff; font-size: 9px; font-weight: 800; padding: 2px 9px; border-radius: 12px; white-space: nowrap; letter-spacing: 0.6px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(59, 130, 246, 0.4); border: 1.5px solid #080e1e; text-transform: uppercase; } .hero-spotlight-avatar-box.server-box .hero-spotlight-pill { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(59, 130, 246, 0.4); } @media (max-width: 1024px) { .hero-spotlight-side-anchor { position: static; transform: none; margin: 0 auto 20px auto; } } /* ========================================================================== USER PROFILE DISCORD & PLATFORM BADGES ========================================================================== */ .profile-badges-container { display: inline-flex; align-items: center; gap: 8px; background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255, 255, 255, 0.1); padding: 6px 14px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); flex-wrap: wrap; } .profile-discord-badge { width: 24px; height: 24px; object-fit: contain; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)); display: inline-block; vertical-align: middle; } .profile-discord-badge:hover { transform: scale(1.3) translateY(-2px); } .profile-role-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; display: inline-flex; align-items: center; letter-spacing: 0.3px; }