/* Dark mode styles */

:root {
    /* Should make it easier to change colors in the future */
    --text: #e4e4e4;
    --background: #1b1b1b;

    --button-color: #353535;
    --button-hover: var(--background);
    --button-selected: #232e51;
    --fieldset-color: #2a2a2a;

    --column-1: #2a2a2a;
}

html, body {
    color: var(--text);
    background-color: var(--background);
    color-scheme: dark;
}
a {
    color:#63aed1;
}
a:visited {
    color:#b17bc3;
}

.btn {
	background: #2b2c31;
	background: linear-gradient(to bottom, #4e525a, #2b2c31);
	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45), inset 0.5px 1px 1px rgba(255, 255, 255, 0.5);
	border-color: #34373b;
	text-shadow: none;
	color: #F9F9F9;
}
.visually-hidden:focus + .btn,
.btn:hover {
	background: #3e4149;
	background: linear-gradient(to bottom, #646877, #3e4149);
	border-color: #50555b;
	color: #F9F9F9;
}
.visually-hidden:checked + .btn,
.visually-hidden:checked + .btn:hover {
	background: #000000;
	border-color: #34373b;
	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45);
	color: #F9F9F9;
}
.visually-hidden:checked + .btn:hover {
    border-color: #646c76;
}
.btn:active,
.visually-hidden[type=checkbox]:checked + .btn:active {
	background: #2b2c31;
	background: linear-gradient(to bottom, #2b2c31, #4e525a);
	border-color: #34373b;
	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45);
	color: #F9F9F9;
}
.visually-hidden[type=radio]:checked + .btn,
.visually-hidden[type=radio]:checked + .btn:hover {
    z-index: auto;
	border-color: #34373b;
	cursor: default;
}

.visually-hidden:disabled + .btn {
    color: var(--button-hover);
}

fieldset {
    background-color: var(--fieldset-color);
}

select {
    background-color: var(--background);
    color: var(--text);
}

a.links-lighten {
    color: #7A9CFF;
}

a.links-lighten:hover {
    color: #C2D0FF;
}

a.links-lighten:visited {
    color: #BC8BEA;
}

a.links-lighten:visited:hover {
    color: #DACAF7;
}

input, textarea {
    background-color: var(--background);
    color: var(--text);
    border: 1px solid #777;
    padding: 1px 2px;
    border-radius: 4px;
}

a.collapsible-link {
    color: var(--text);
}

.bs-btn {
    background-color: var(--background);
    color: var(--text);
}

.bs-btn:hover {
    z-index: 10;
    background: var(--button-hover);
    color: var(--text);
}

.dataTables_info {
    color: var(--text) !important; /* I know, don't use !important, but w/e */
}

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

tr.odd, tr.even {
    background-color: var(--background) !important;
}


td.sorting_1 {
    background-color: var(--column-1) !important;
}


label:not(.btn) {
    color: var(--text);
}

/* Select2 Dropdown stylings */

select, .select2-container .select2-choice {
	text-shadow: none;
	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45), inset 0.5px 1px 1px rgba(255, 255, 255, 0.5);
	border-color: #34373b;
    background: var(--background);
    background-image: linear-gradient(#333, 70%, #1b1b1b);
    /* Not fully satisfied w/ this gradient, but it's w/e */
    color: var(--text);
}
select:hover, .select2-container .select2-choice:hover,
select:focus, .select2-container .select2-choice:focus {
    background: var(--button-hover);
    border-color: #50555b;
    color: var(--text);
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choice:hover {
    border-color: #5897fb;
}

.select2-container .select2-choice .select2-arrow {
    background: none;
    border-left: none;
}

.select2-dropdown-open .select2-choice {
    -webkit-box-shadow: 0 1px 0 var(--background) inset;
    box-shadow: 0 1px 0 var(--background) inset;
    background-image: none;
}

.select2-drop {
    background-color: var(--background);
    color: var(--text);
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
    background-image: none;
}

.select2-no-results {
    background-color: var(--background) !important;
}

input.select2-input {
    color: var(--text);
    /* 
    * I have to use this URL because this CSS file is in the dist/css folder,
    * whereas the Select2 CSS file is right next to the select2.png file
    */
    background: url('../js/vendor/select2/select2.png') no-repeat 100% -22px, var(--background);
}

.locked-move:checked + .btn,
.locked-move:checked + .btn:hover {
    background: #00867b;
}

.locked-weather:checked + .btn,
.locked-weather:checked + .btn:hover {
    background: #00867b;
}