/* ===================================
   MODERN DARK THEME FOR BULMA
   Based on bulmaswatch dark theme
   =================================== */

/* Import Lato font */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;700&display=swap");

/* ===================================
   COLOR VARIABLES
   =================================== */
:root {
	/* Background colors */
	--dark-bg-primary: #1f2424;
	--dark-bg-secondary: #282f2f;
	--dark-bg-tertiary: #343c3d;

	/* Text colors */
	--dark-text-primary: #ffffff;
	--dark-text-secondary: #f2f2f2;
	--dark-text-muted: #8c9b9d;
	--dark-text-light: #dbdee0;

	/* Border colors */
	--dark-border: #5e6d6f;
	--dark-border-light: #8c9b9d;

	/* Accent colors */
	--dark-primary: #375a7f;
	--dark-link: #1abc9c;
	--dark-link-hover: #1dd2af;
	--dark-info: #3298dc;
	--dark-success: #2ecc71;
	--dark-warning: #f1b70e;
	--dark-danger: #e74c3c;
}

/* ===================================
   BASE STYLES
   =================================== */
html {
	background-color: var(--dark-bg-primary);
	/* font-size: 15px; */
}

body {
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
	color: var(--dark-text-primary);
	background-color: var(--dark-bg-primary);
}

/* ===================================
   TYPOGRAPHY
   =================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.subtitle {
	color: var(--dark-text-secondary);
}

h6 {
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

strong {
	color: var(--dark-text-secondary);
}

a {
	color: var(--dark-link);
	transition: all 200ms ease;
}

a:hover {
	color: var(--dark-link-hover);
}

code {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-danger);
	/* padding: 0.25em 0.5em; */
}

pre {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
}

hr {
	background-color: var(--dark-bg-tertiary);
}

/* ===================================
   BUTTONS
   =================================== */
.button {
	/* transition: all 200ms ease;
	border-width: 2px;
	color: var(--dark-text-primary);
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border); */
}

.button:hover {
	/* border-color: var(--dark-border-light);
	color: var(--dark-text-secondary); */
}

.button:focus,
.button.is-focused,
.button:active,
.button.is-active {
	/* box-shadow: 0 0 0 2px rgba(140, 155, 157, 0.5);
	border-color: var(--dark-border-light); */
}

/* Colored buttons */
.button.is-primary {
	background-color: var(--dark-primary);
	border-color: transparent;
	color: var(--dark-text-primary);
}

.button.is-primary:hover {
	background-color: #436d9a;
}

.button.is-primary[disabled] {
	background-color: #3e5b7a;
}

.button.is-link {
	background-color: var(--dark-link);
	border-color: transparent;
	color: var(--dark-text-primary);
}

.button.is-link:hover {
	background-color: #1fdeb8;
}

.button.is-info {
	background-color: var(--dark-info);
	border-color: transparent;
}

.button.is-success {
	background-color: var(--dark-success);
	border-color: transparent;
}

.button.is-warning {
	background-color: var(--dark-warning);
	border-color: transparent;
	color: rgba(0, 0, 0, 0.7);
}

.button.is-danger {
	/* background-color: var(--dark-danger); */
	/* border-color: transparent; */
}

/* ===================================
   FORMS
   =================================== */
.input,
.textarea,
.select select {
	/* transition: all 200ms ease; */
	background-color: #fff;
	border-color: var(--dark-border);
	/* border-width: 2px; */
	color: var(--dark-bg-secondary);
}

.input:hover,
.textarea:hover,
.select select:hover {
	border-color: var(--dark-border-light);
}

.input:focus,
.input.is-focused,
.textarea:focus,
.textarea.is-focused,
.select select:focus {
	border-color: var(--dark-link);
	box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
}

.label {
	color: var(--dark-text-light);
}

.select:not(.is-multiple):not(.is-loading)::after {
	border-color: var(--dark-link);
}

.checkbox {
	accent-color: hsl(141, 71%, 48%);
	margin-right: 8px;
	min-width: 20px;
	min-height: 20px;
}

.input.is-success {
	background: #defff0;
	color: #035530;
	border: 2px solid #2ba76f;
}

.input.is-warning {
	background: #fff3d8;
	color: #674905;
	border: 2px solid #ffb70f;
}

.input.is-danger {
	background: #ffd5de;
	color: #4d0212;
	border: 2px solid #ff6685;
}

/* ===================================
   CARDS AND BOXES
   =================================== */
.box {
	background-color: var(--dark-bg-tertiary);
	box-shadow: none;
	color: var(--dark-text-primary);
	border-radius: 8px;
}

.card {
	background-color: var(--dark-bg-secondary);
	border: 2px solid var(--dark-bg-tertiary);
	box-shadow: none;
	border-radius: 0.4em;
}

.card-header {
	background-color: rgba(18, 18, 18, 0.2);
	box-shadow: none;
	border-radius: 0.4em 0.4em 0 0;
}

.card-footer,
.card-footer-item {
	background-color: rgba(18, 18, 18, 0.2);
	border-width: 2px;
	border-color: var(--dark-bg-tertiary);
}

.card-header-title {
	color: var(--dark-text-secondary);
}

/* ===================================
   NOTIFICATIONS
   =================================== */
.notification {
	background-color: var(--dark-bg-tertiary);
	border-radius: 0.4em;
}

.notification.is-primary {
	background-color: var(--dark-primary);
	color: var(--dark-text-primary);
}

.notification.is-link {
	background-color: var(--dark-link);
	color: var(--dark-text-primary);
}

.notification.is-info {
	background-color: var(--dark-info);
	color: var(--dark-text-primary);
}

.notification.is-success {
	background-color: var(--dark-success);
	color: var(--dark-text-primary);
}

.notification.is-warning {
	background-color: var(--dark-warning);
	color: rgba(0, 0, 0, 0.7);
}

.notification.is-danger {
	background-color: var(--dark-danger);
	color: var(--dark-text-primary);
}

/* ===================================
   TABLES
   =================================== */
.table {
	background-color: var(--dark-bg-tertiary);
	color: var(--dark-text-primary);
}

.table td,
.table th {
	border: 1px solid var(--dark-border);
	border-width: 0 0 1px;
}

.table th {
	color: var(--dark-text-secondary);
}

.table thead td,
.table thead th {
	border-width: 0 0 2px;
	color: var(--dark-text-secondary);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
	background-color: var(--dark-bg-secondary);
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
	background-color: var(--dark-bg-secondary);
}

/* ===================================
   NAVIGATION
   =================================== */
.navbar {
	background-color: var(--dark-primary);
	border-radius: 0.4em;
}

.navbar-item,
.navbar-link {
	color: var(--dark-text-primary);
}

.navbar-item:hover,
.navbar-item.is-active,
.navbar-link:hover {
	background-color: transparent;
	color: var(--dark-link);
}

.navbar-burger {
	color: var(--dark-text-primary);
}

@media screen and (max-width: 1023px) {
	.navbar-menu {
		background-color: var(--dark-primary);
		border-radius: 0 0 0.4em 0.4em;
	}
}

.navbar-dropdown {
	background-color: var(--dark-primary);
	border: 1px solid rgba(0, 0, 0, 0.2);
}

/* ===================================
   TABS
   =================================== */
.tabs a {
	color: var(--dark-text-primary);
	border-bottom-width: 2px;
	margin-bottom: -2px;
}

.tabs a:hover {
	border-bottom-color: var(--dark-text-secondary);
	color: var(--dark-text-secondary);
}

.tabs li.is-active a {
	border-bottom-color: var(--dark-link);
	color: var(--dark-link);
}

.tabs.is-boxed a {
	border-width: 2px;
}

.tabs.is-boxed li.is-active a {
	background-color: var(--dark-bg-primary);
	border-color: var(--dark-border);
	border-bottom-color: transparent !important;
}

.tabs.is-toggle a {
	border-color: var(--dark-border);
	border-width: 2px;
}

.tabs.is-toggle li.is-active a {
	background-color: var(--dark-link);
	border-color: var(--dark-link);
	color: var(--dark-text-primary);
}

/* ===================================
   MESSAGES
   =================================== */
.message {
	/* background-color: var(--dark-bg-secondary);
	border-radius: 0.4em; */
}

.message-header {
	/* background-color: var(--dark-bg-tertiary);
	color: var(--dark-text-primary);
	font-weight: 700; */
}

.message-body {
	/* border-width: 2px;
	border-color: var(--dark-bg-tertiary);
	color: var(--dark-text-primary); */
}

/* ===================================
   MODAL
   =================================== */
.modal-background {
	background-color: rgba(10, 10, 10, 0.86);
}

.modal-card-head,
.modal-card-foot {
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-bg-tertiary);
}

.modal-card-body {
	background-color: var(--dark-bg-secondary);
}

.modal-card-title {
	color: var(--dark-text-secondary);
}

/* ===================================
   MENU
   =================================== */
.menu-list a {
	color: var(--dark-text-primary);
	transition: all 300ms ease;
	border-radius: 3px;
}

.menu-list a:hover {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-secondary);
}

.menu-list a.is-active {
	background-color: var(--dark-link);
	color: var(--dark-text-primary);
}

.menu-label {
	color: var(--dark-text-primary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ===================================
   PANEL
   =================================== */
.panel {
	border-radius: 8px;
	box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
}

.panel-heading {
	background-color: var(--dark-bg-tertiary);
	color: var(--dark-text-secondary);
	border-radius: 8px 8px 0 0;
	font-weight: 700;
}

.panel-tabs {
	border-width: 2px;
}

.panel-tabs a {
	border-width: 2px;
	border-bottom: 1px solid var(--dark-border);
}

.panel-tabs a.is-active {
	color: var(--dark-link-hover);
	border-bottom-color: var(--dark-link-hover);
}

.panel-block {
	border-width: 2px;
	color: var(--dark-text-secondary);
}

.panel-block:hover {
	color: var(--dark-link-hover);
}

.panel-block.is-active {
	border-left-color: var(--dark-link);
	color: var(--dark-link-hover);
}

.panel-icon {
	color: var(--dark-text-primary);
}

/* ===================================
   TAGS
   =================================== */
.tag:not(body) {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
	border-radius: 0.4em;
}

.tag.is-primary {
	background-color: var(--dark-primary);
}

.tag.is-link {
	background-color: var(--dark-link);
}

.tag.is-info {
	background-color: var(--dark-info);
}

.tag.is-success {
	background-color: var(--dark-success);
}

.tag.is-warning {
	background-color: var(--dark-warning);
	color: rgba(0, 0, 0, 0.7);
}

.tag.is-danger {
	background-color: var(--dark-danger);
}

/* ===================================
   HERO
   =================================== */
.hero {
	background-color: var(--dark-bg-tertiary);
}

.hero.is-primary {
	background-color: var(--dark-primary);
}

.hero.is-link {
	background-color: var(--dark-link);
}

.hero.is-info {
	background-color: var(--dark-info);
}

.hero.is-success {
	background-color: var(--dark-success);
}

.hero.is-warning {
	background-color: var(--dark-warning);
}

.hero.is-danger {
	background-color: var(--dark-danger);
}

/* ===================================
   PROGRESS BAR
   =================================== */
.progress {
	border-radius: 290486px;
}

.progress::-webkit-progress-bar {
	background-color: var(--dark-bg-tertiary);
}

.progress::-webkit-progress-value {
	background-color: var(--dark-text-light);
}

.progress::-moz-progress-bar {
	background-color: var(--dark-text-light);
}

/* ===================================
   PAGINATION
   =================================== */
.pagination-previous,
.pagination-next,
.pagination-link {
	border-color: var(--dark-border);
	border-width: 2px;
	color: var(--dark-link);
}

.pagination-previous:hover,
.pagination-next:hover,
.pagination-link:hover {
	border-color: var(--dark-border-light);
	color: var(--dark-link-hover);
}

.pagination-link.is-current {
	background-color: var(--dark-link);
	border-color: var(--dark-link);
	color: var(--dark-text-primary);
}

/* ===================================
   FOOTER
   =================================== */
.footer {
	background-color: var(--dark-bg-secondary);
	padding: 3rem 1.5rem 6rem;
}

/* ===================================
   DROPDOWN
   =================================== */
.dropdown-content {
	background-color: var(--dark-bg-secondary);
	border-radius: 0.4em;
}

.dropdown-item {
	color: var(--dark-text-primary);
}

.dropdown-item:hover,
button.dropdown-item:hover {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-light);
}

.dropdown-item.is-active,
button.dropdown-item.is-active {
	background-color: var(--dark-link);
	color: var(--dark-text-primary);
}

.dropdown-divider {
	background-color: var(--dark-border);
}

/* ===================================
   BREADCRUMB
   =================================== */
.breadcrumb a {
	color: var(--dark-link);
}

.breadcrumb a:hover {
	color: var(--dark-link-hover);
}

.breadcrumb li.is-active a {
	color: var(--dark-text-secondary);
}

.breadcrumb li + li::before {
	color: var(--dark-text-muted);
}