@charset "UTF-8";

:root {
	--bg-dark: #1d1d1d;
	--bg: #242526;
	--bg-light: #333;
	--line: #777;
	--btn: #c50505;
	--btn-active: #ff0000;
	--link: #49a1ee;
	--link-active: #6ebbff;
	--link-gray: #666;
	--red: #c50505;
	--msg-error-dark: #420808;
	--msg-error-light: #f76663;
	--msg-success-dark: #0a4208;
	--msg-success-light: #5fbe52;
	--msg-warning-dark: #423e08;
	--msg-warning-light: #f2f06d;
	--msg-info-dark: #083042;
	--msg-info-light: #529fbe;
	--font: #ddd;
	--font-bright: #fff;
	--font-dark: #333;
  }
  
@media (prefers-color-scheme: dark) {

	a,
	.btn-link {
		color: var(--link);
	}
	a:hover,
	.btn-link:hover {
		color: var(--link-active);
	}
	a.grayed_out {
		color: var(--link-gray);
	}
	pre {
		color: var(--font);
		background-color: var(--bg-light);
		border-color: var(--line);
	}
	hr {
		border-top-color: var(--line);
	}

	/* layout */
	html > body {
		background-color: var(--bg-dark);
		color: var(--font);
	}
	.overlayButton {
		background-color: var(--bg-dark);
	}

	/* header */
	.navbar-nav>li>.dropdown-menu,
	nav.navbar {
		background-color: var(--bg) !important;
	}
	.dropdown-menu>li>a,
	.navbar-default .navbar-nav>li>a,
	.navbar-light .navbar-toggler,
	nav.navbar-light .navbar-nav .nav-link {
		color: var(--font);
	}
	.navbar-light .navbar-nav .active>.nav-link,
	.navbar-light .navbar-nav .nav-link.active,
	.navbar-light .navbar-nav .nav-link.show,
	.navbar-light .navbar-nav .show>.nav-link {
		color: var(--font-bright);
	}
	.navbar-default .navbar-nav>li>a:hover,
	.navbar-default .navbar-nav>li>a:focus,
	.navbar-light .navbar-nav .nav-link.registerDomainbot4:hover,
	.navbar-light .navbar-nav .nav-link:focus,
	.navbar-light .navbar-nav .nav-link:hover {
		color: var(--font-dark);
		background-color: var(--font);
	}
	li.registerDomain > a,
	.navbar-light .navbar-nav .nav-link.registerDomainbot4,
	#whois_search_button {
		background-color: var(--red);
	}
	.navbar-default .navbar-nav>li.registerDomain > a {
		background-color: var(--red);
		color: var(--font);
	}
	.navbar-default .navbar-nav>li.registerDomain > a:hover,
	#whois_search_button:hover {
		background-color: var(--btn-active);
		color: var(--font-bright);
	}
	.navbar-default .navbar-toggle {
		border-color: var(--line);
	}
	.navbar-default .navbar-collapse,
	.navbar-default .navbar-form {
		border: none;
	}

	.navbar-brand > svg > g > path:nth-child(1) {
		fill: var(--font);
	}
	/* dropdown menu*/
	ul.dropdown-menu,
	div.dropdown-menu {
		background-color: var(--bg);
		color: var(--font);
	}
	a.dropdown-item {
		color: var(--font);
	}

	/* footer */
	.footer {
		background-color: var(--bg);
	}

	/* forms */
	div.error input, div.error textarea,
	div.error select, input.error,
	textarea.error, select.error,
	div.input-group span.error,
	.has-error .input-group-append > .input-group-text {
		background: var(--msg-error-dark);
	}
	.msg_error {
		background: var(--msg-error-light);
		color: var(--msg-error-dark);
		border: none;
	}
	div.form .errorSummary {
		background: var(--msg-error-light);
		color: var(--msg-error-dark);
	}

	.warningSummary {
		background: var(--msg-warning-light);
		color: var(--msg-warning-dark);
	}
	.msg_warning {
		background: var(--msg-warning-light);
		color: var(--msg-warning-dark);
		border: none;
	}

	.infoSummary {
		background: var(--msg-info-light);
		color: var(--msg-info-dark);
	}
	.msg_info {
		background: var(--msg-info-light);
		color: var(--msg-info-dark);
		border: none;
	}
	.msg_info a,
	.msg_success a,
	.msg_error a {
		color: var(--font-bright);
	}
	div.form .infoSummary,
	div.form .errorSummary,
	div.form .warningSummary {
		border: none;
		padding: 8px;
	}

	.msg_success {
		background: var(--msg-success-light);
		color: var(--msg-success-dark);
		border: none;
	}
	
	.has-success .input-group-append > .input-group-text {
		background: var(--msg-success-dark);
	}
	.input-group-addon,
	.input-group-text {
		border-color: var(--line);
		background-color: var(--bg-light);
		color: var(--font-bright);
	}
	div.error label,
	label.error, span.error,
	.has-error .input-group-append > .input-group-text,
	.has-error label {
		color: var(--msg-error-light);
	}
	.has-success .input-group-append > .input-group-text,
	.has-success label {
		color: var(--msg-success-light);
	}

	/* inputs */
	.navbar-light .navbar-toggler {
		border-color: var(--line);
		color: var(--font);
	}
	.form-control,
	.form-control:focus,
	textarea,
	select,
	input[type="text"],
	input[type="password"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input[type="number"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input[type="color"],
	.uneditable-input {
		background-color: var(--bg-dark);
		color: var(--font);
		border-color: var(--line);
	}
	input[type="text"][disabled] {
		background-color: var(--bg-light);
		color: var(--font);
		border-color: var(--line);
	}
	.form-control:disabled,
	.form-control[readonly] {
		background-color: var(--bg-light);
		color: var(--font);
		border-color: var(--line);
	}

	/* buttons */
	input[type="submit"],
	.btn-primary {
		background-color: var(--btn);
		background-image: unset;
	}
	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active,
	.btn-primary.active {
		color: var(--font-bright);
		background-color: var(--btn-active);
		background-image: unset;
		border-color: transparent;
	}
	.btn-primary.disabled,
	.btn-primary[disabled] {
		color: var(--font);
		background-color: var(--bg-dark);
		background-image: unset;
		border-color: transparent;
	}

	.btn-primary:not(:disabled):not(.disabled).active,
	.btn-primary:not(:disabled):not(.disabled):active,
	.show>.btn-primary.dropdown-toggle {
		color: var(--font-bright);
		background-color: var(--btn-active);
		background-image: unset;
		border-color: transparent;
	}

	.btn-default:hover,
	.btn-default.active, .btn-default:active,
	.open>.dropdown-toggle.btn-default,
	.btn:not(.btn-link) {
		color: var(--font);
		border-color: transparent;
	}
	.btn:hover {
		color: var(--font-bright);
	}

	/* switch type checkboxes */
	.material-switch-inv > label::after {
		background-color: white;
	}
	.material-switch-inv > label::before {
		background-color: white;
	}
	.material-switch > input[type="checkbox"]:checked + label::after {
		background-color: white;
	}
	.material-switch > label::before {
		background-color: white;
	}

	/* panels */
	.panel-default>.panel-heading {
		color: var(--font);
		background-color: var(--bg-light);
		border-color: var(--bg-light);
	}
	.panel {
		background-color: var(--bg-light);
	}
	.panel-default {
		border-color: transparent;
	}

	div.card {
		background-color: var(--bg-light);
	}
	.list-group-item,
	div.card-header {
		background-color: var(--bg-light);
	}
	div.card-header {
		border: none;
	}
	.card.bg-white,
	.card-body.bg-white {
		background-color: var(--bg-light) !important;
	}
	blockquote {
		border-left: 5px solid var(--line);
	}

	/* table */
	.table {
		color: unset;
	}
	.table>thead>tr>th,
	.table td,
	.table th {
		border-color: var(--line);
	}
	.table.bg-white {
		background-color: var(--bg-light) !important;
	}
	.table-striped tbody tr:nth-of-type(odd) {
		background-color: var(--bg-light);
	}
	.table-striped tbody tr:nth-of-type(even) {
		background-color: var(--bg-dark);
	}
	.grid-view tr.even {
		background-color: var(--bg-dark);
	}
	.grid-view tr.odd {
		background-color: var(--bg-light);
	}
	.table-danger tbody+tbody,
	.table-danger td,
	.table-danger th,
	.table-danger thead th {
		background-color: var(--msg-error-dark);
	}
	.table-success tbody+tbody,
	.table-success td,
	.table-success th,
	.table-success thead th {
		background-color: var(--msg-success-dark);
	}

	/* front page */
	.bootstrapFront {
		background-color: var(--bg-dark);
		color: var(--font);
	}
	.bootstrapFront input.form-control {
		background-color: var(--bg-dark);
	}

	/* site/login */
	div.vseptext > div {
		background-color: var(--bg-light);
		color: var(--font);
	}
	div.vsep {
		border-color: var(--line);
	}

	/* contact/my */
	#domain_overview .box .action {
		color: var(--btn);
	}
	#domain_overview .box .action:hover {
		color: var(--btn-active);
	}

	/* contact/change */
	.intl-tel-input ul.country-list {
		background-color: var(--bg-dark);
		border-color: var(--line);
	}
	/* domain/overview */
	#domain_overview .box span.contact_is_me {
		color: var(--link);
	}
	#domain_overview .box span.contact_is_me:hover {
		color: var(--link-active);
	}
	/* domain/test */
	div.loading {
		border-color: transparent;
		background-color: var(--bg-dark);
	}
	div.loading:after{
		color: var(--font);
	}

	/* /tolur */
	body.bare {
		background-color: var(--bg-dark);
	}
	body.bare img {
		filter: brightness(0.888) invert(1) hue-rotate(180deg);
	}

	/* /basket */
	.tab-pane label.card-body {
		background-color: var(--bg);
	}
	.tab-pane label.card-body:hover {
		background-color: var(--bg-dark);
	}
	.border {
		border-color: var(--line);
	}

	/* doc/payment_receipt */
	.bg-light.card {
		background-color: var(--bg) !important;
	}

	/* whois/search */
	div.miniWhois {
		background-color: var(--bg-dark);
	}

	/* contact/web_forwarding */
	.loading-indicator-modal {
		background-color: rgba(50,50,50,0.9);
	}

	/* fakeSvarbox */
	form.svarbox__loginForm {
		background-color: var(--bg-light);
	}
	textarea.svarbox__offlineMessageBox,
	input.svarbox__loginFormInput {
		box-shadow: unset !important;
	}
	textarea.svarbox__offlineMessageBox {
		background-color: var(--bg-dark);
		color: var(--font);
		-webkit-text-fill-color: var(--font);
	}
	div.svarbox__messageSent {
		background-color: var(--bg-dark);
	}

	/* admin */
	fieldset {
		background-color: unset;
	}
	fieldset > table {
		color: var(--font-dark);
		background-color: var(--line);
	}

	/* admin/news */
	table.table button {
		background-color: unset;
		border: none;
		color: var(--link);
	}
	table.table button:hover {
		color: var(--link-active);
	}
	::-webkit-calendar-picker-indicator {
		filter: invert(1);
	}
	/* admin/queue */
	.grid-view tr.green {
		background-color: var(--msg-success-dark);
	}
	.grid-view tr.red {
		background-color: var(--msg-error-dark);
	}
	div.contactForm {
		background-color: var(--bg-light);
	}
	/* admin/bpm */
	div.dynForm {
		background-color: var(--bg-light);
	}
	/* admin/contact */
	div.contactFormLeft {
		background-color: var(--bg);
	}
	/* admin/host */
	table.domainForm {
		background-color: var(--bg-light);
	} 

	/* epp */
	.main,
	.toc {
		background-color: var(--bg);
	}
	.content {
		background-color: var(--bg);
	}
}