:root {
   --background-primary: #fff;
   --background-secondary: #f6f6f6;
   --color-text-primary: #555;
   --theme-color-primary: #356ae6;
   --color-highlight: #2196F3;
   --input-bg: #fff;
   --input-readonly-bg: #ddd;
   --input-readonly-text: #666;
   --input-border: #bbbbbb;
   --btn-bg: #b0afaf;
   --btn-bg-primary: #2196F3;
   --slider-color: #2196F3;
   --btn-text-color: #fff;
   --link-text-color: #40434d;
   --label-text-color: #555;
   --shadow-color: #666666;
   --line-on-secondary-bg: #ccc;
}

html[data-theme='dark'], html[data-theme='darkblue'], html[data-theme='darkgreen'] {
   --color-text-primary: #eee;
   --input-bg: #353535;
   --input-readonly-bg: #252525;
   --input-readonly-text: #888;
   --input-border: #111;
   --btn-bg: #4d4d4d;
   --btn-bg-primary: #2196F3;
   --btn-text-color: #fff;
   --link-text-color: #fff;
   --label-text-color: #fff;
   --shadow-color: #000;
   --line-on-secondary-bg: #888;
}

html[data-theme='dark'] {
   --background-primary: #161a1e;
   --background-secondary: #40434d;
   --theme-color-primary: #206aac;
}

html[data-theme='darkblue'] {
   --background-primary: #182c40;
   --background-secondary: #40434d;
   --theme-color-primary: #2c5d88;
}

html[data-theme='darkgreen'] {
   --background-primary: #161a1e;
   --background-secondary: #40434d;
   --theme-color-primary: #499128;
}

body {
  /* transition: color 300ms, background-color 300ms; */
	background-color: var(--background-primary);
	margin: 0px;
   height: 100%;
}

body, table {
	font-size: 16px;
	font-family: Arial,Helvetica,Verdana,sans-serif;
   color: var(--color-text-primary);
}

h1 {
   background-color: var(--theme-color-primary);
   color: #fff;
   margin: 0px;
   padding: 25px 0px 25px 0px;
   font-size: 50px;
}

h2 {
   color: var(--theme-color-primary);
   margin: 2px;
   padding: 0px;
   font-size: 48px;
}

h3 {
   font-weight: bold;
   font-size: 32px;
   color: var(--theme-color-primary);
   margin: 10px;
   padding: 0px;
}

img {
   border: 0px;
}
fieldset {
	border: 0px;
	margin: 0px;
	padding: 0px;
}

a:link, a:visited {
   color: var(--theme-color-primary);
   text-decoration: none;
}

hr.cddivider  {
   border: 0;
   height: 0;
   /* Firefox... */
   box-shadow: 0 0 1px 1px var(--theme-color-primary);
   max-width: 50%;
}
hr.cddivider:after {
   /* Not really supposed to work, but does */
   content: "\00a0"; /* Prevent margin collapse */
}
.cf {
   content: "";
   display: table;
}
.cf:after {
   clear: both;
}
.cf-this {
   clear: both;
}

div#container {
   font-size: 400px;
   overflow: hidden;
   font-family: "Times New Roman", Times, serif;
}

div#timercontent {
   width: 100%;
	padding: 0px;
   text-align: center;
}

div.contentcontainer {
   width: 100%;
	margin: 0;
	padding: 0;
   text-align: center;
   word-wrap: break-word;
}

.paddedcontent {
   padding: 15px;
}

.fullwidth {
   width: 100%;
}
/* Remove border+padding from text area width */
textarea.fullwidth {
   width: calc(100% - 14px);
}

div.centered-area {
	width: 100%;
	text-align: center;
}

label {
   display: block;
   margin-top: 5px;
}

input[readonly]
{
    background-color: var(--input-readonly-bg);
    color: var(--input-readonly-text);
}
input, textarea, select {
   border-color: var(--input-border);
   background-color: var(--input-bg);
   color: var(--text-color-primary);
   padding: 5px;
}
/* buttons */
button {
   border-radius: 2px;
   padding: 5px 8px 5px 8px;
   background-color: var(--btn-bg);
   border: 0px;
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   color: var(--btn-text-color);
   font-size: 14px;
   margin-bottom: 5px;
}
button:hover {
   cursor: pointer;
   filter: contrast(125%) brightness(105%);
}
button:active {
   box-shadow: inset 0 0 12px #777;
}
button.primary {
   background-color: var(--btn-bg-primary);
}

hr {
   height: 1px;
   border: none;
   background-color: var(--line-on-secondary-bg);
   margin-top: 25px;
   margin-bottom: 25px;
}

span.dulltext {
   color: #888888;
}

/*
   Countdown stuff
*/
.countdown-display {
   font-size: 35px;
   font-family: "Courier New", Courier, monospace;
   font-weight: bold;
   color: var(--color-text-primary);
   padding-right: 20px;
   padding-left: 20px;
}
a.countdown-display:link, a.countdown-display:visited {
   color: var(--color-text-primary);
}


div.info {
   color: #aaa;
   font-weight: bold;
}

div#pivaluearea {
   font-size: 20px;
}

.actioniconsmenu {
   float: right;
   margin-bottom: 5px;
   position: relative;
}

.theme-selector {
   float: right;
   margin-top: 5px;
}
.themetoggle-switch {
   position: relative;
   display: inline-block;
   width: 48px;
   height: 25px;
   line-height: 25px;
   vertical-align: middle;
   margin: 5px 5px 8px 0px;
   overflow: hidden;
}
.themetoggle-switch input {
   display:none;
}
.themetoggle-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #484848;
   background-position-x: 26px;
   background-position-y: center;
   background-repeat: no-repeat;
   background-size: 18px;
   background-image: url("../img/dark_mode.svg");
   -webkit-transition: .4s;
   transition: .4s;
}
.themetoggle-slider:before {
   position: absolute;
   content: "";
   height: 21px;
   width: 21px;
   left: 2px;
   bottom: 2px;
   background-color: #f0f0f0;
   -webkit-transition: .4s;
   transition: .4s;
}
input:checked + .themetoggle-slider {
   background-color: #aaa;
   background-position-x: 4px;
   background-image: url("../img/light_mode.svg");
}
input:focus + .themetoggle-slider {
   box-shadow: 0 0 1px var(--color-highlight);
}
input:checked + .themetoggle-slider:before {
   -webkit-transform: translateX(22px);
   -ms-transform: translateX(22px);
   transform: translateX(22px);
}
.themetoggle-slider.round {
   border-radius: 34px;
}
.themetoggle-slider.round:before {
   border-radius: 50%;
}

/* generic slider */
.toggleswitch {
   position: absolute;
   display: inline-block;
   width: 49px;
   height: 25px;
   line-height: 25px;
   vertical-align: middle;
   margin: 0px 8px 0px 0px;
   overflow: hidden;
}
.toggleswitch input {
    display:none;
}
.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   -webkit-transition: .4s;
   transition: .4s;
}
.slider:before {
   position: absolute;
   content: "";
   height: 21px;
   width: 21px;
   left: 2px;
   bottom: 2px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
}
input:checked + .slider {
   background-color: var(--slider-color);
}
input:focus + .slider {
   box-shadow: 0 0 1px var(--color-highlight);
}
input:checked + .slider:before {
   -webkit-transform: translateX(23px);
   -ms-transform: translateX(23px);
   transform: translateX(23px);
}
.slider.round {
   border-radius: 34px;
}
.slider.round:before {
   border-radius: 50%;
}
 
button.notifications {
   display: none;
   margin: 6px 6px 5px 0px;
   width: 32px;
   height: 32px;
   float: right;
   background-position-x: center;
   background-position-y: center;
   background-repeat: no-repeat;
   background-size: 24px;
   border-radius: 16px;
}
button.notifications.off {
   background-image: url("../img/notifications.svg");
}
button.notifications.on {
   background-image: url("../img/notifications_on.svg");
}
.notif-frame {
   position: absolute;
   top: 42px;
   right: 10px;
   display: none;
   width: calc(80vw - 30px);
   min-width: 200px;
   max-width: 350px;
   background-color: var(--background-secondary);
   text-align: left;
   padding: 8px;
   box-shadow: 0px 1px 4px var(--shadow-color);
}
.notif-frame > h2 {
   display: block;
   color: var(--color-text-primary);
   font-size: 16px;
}
.notif-frame h2.notif-title-loading {
   display: none;
}
.notif-frame.loading > h2.notif-title {
   display: none;
}
.notif-frame.loading > h2.notif-title-loading {
   display: block;
}
.notif-frame.loading > h2.notif-title-loading {
   display: block;
}
.notif-frame.loading .notif-item {
   display: none;
}
.notif-frame.loading button {
   display: none;
}
.notif-frame button {
   margin: 0px;
}
.notif-frame.on {
   display: block;
}
.notif-list {
   margin: 12px 0px 12px 0px;
}
.notif-lbl {
   position: relative;
   left: 55px;
   width: calc(100% - 55px);
   margin: 0px;
   font-size: 14px;
   line-height: 25px;
}
.notif-item {
   padding-top: 3px;
   padding-bottom: 3px;
   min-height: 25px; /* give room for slider */
}
.notif-list hr {
   margin: 15px 0px 15px 0px;
}
#thiscountdown {
   display: none;
}
#thiscountdown.on {
   display: block;
}
/* Mobile rules */
@media screen and (max-width: 600px) {
   h1 {
      padding: 10px 0px 10px 0px;
      font-size: 20px;
   }
   .actioniconsmenu {
      width: 100%;
   }
   .mobilehide {
      display: none;
   }
   .navicon > a > span {
      display: none;
   }
}