:root {
    --body-bg-color: #ffffff;
    --body-text-color: #3a3a3a;
    --body-desktop-font-size: 14px;
    --body-mobile-font-size: 12px;
    --body-a-text-color: #3a3a3a;
    --body-a-hover-text-color: #1a1a1a;
    --body-a-active-text-color: #1a1a1a;
    --table-caption-bg-color: #6096BA;
    --table-caption-text-color: #ffffff;
    --table-th-bg-color: #6096BA;
    --table-th-text-color: #ffffff;
    --color-one-bg-color: #274C77;
    --color-one-text-color: #ffffff;
    --color-one-a-text-color: #ffffff;
    --color-one-a-hover-text-color: #ffffff;
    --color-one-a-active-text-color: #ffffff;
    --color-two-bg-color: #6096BA;
    --color-two-text-color: #ffffff;
    --color-two-a-text-color: #ffffff;
    --color-two-a-hover-text-color: #ffffff;
    --color-two-a-active-text-color: #ffffff;
    --color-three-bg-color: #A3CEF1;
    --color-three-text-color: #ffffff;
    --color-three-a-text-color: #ffffff;
    --color-three-a-hover-text-color: #ffffff;
    --color-three-a-active-text-color: #ffffff;
    --color-four-bg-color: #588F5E;
    --color-four-text-color: #ffffff;
    --color-four-a-text-color: #ffffff;
    --color-four-a-hover-text-color: #ffffff;
    --color-four-a-active-text-color: #ffffff;
    --color-five-bg-color: #64A04C;
    --color-five-text-color: #ffffff;
    --color-five-a-text-color: #ffffff;
    --color-five-a-hover-text-color: #ffffff;
    --color-five-a-active-text-color: #ffffff;
}

body {
    background: var(--body-bg-color);
    color: var(--body-text-color);
    font-family: Serif, sans-serif;
    font-size: var(--body-mobile-font-size);
    font-weight: 400 !important;
}

a {
    color: var(--body-a-text-color);
}

a:not(.button):hover {
    color: var(--body-a-hover-text-color)
}

a:not(.button):active {
    color: var(--body-a-active-text-color)
}

hr {
    background: rgba(0, 0, 0, 0.1);
}

table {
    background: #fff;
    border: 1px solid #999;
}

table caption {
    background-color: var(--table-caption-bg-color);
    color: var(--table-caption-text-color);
    border-left: 1px solid #999;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
}

table th {
    background-color: var(--table-th-bg-color);
    color: var(--table-th-text-color);
}

table tr {
    border-bottom: 1px solid #999;
}

table tbody tr:last-child {
    border-bottom: none;
}

table th,
table td {
    border-right: 1px solid #999;
}

table th:last-child,
table td:last-child {
    border-right: none;
}

progress[value].error::-webkit-progress-value {
  background-color: #cc4141;
}

progress[value].warning::-webkit-progress-value {
  background-color: #f7941d;
}

progress[value].success::-webkit-progress-value {
  background-color: #8dc63f;
}

progress[value].info::-webkit-progress-value {
  background-color: #0097da;
}

meter::-webkit-meter-even-less-good-value {
  background-color: #cc4141;
}

meter::-webkit-meter-suboptimum-value {
  background-color: #f7941d;
}

meter::-webkit-meter-optimum-value {
  background-color: #8dc63f;
}

.img {
    background: transparent;
}

.bck.dark {
    background-color: #3a3a3a;
    color: #ffffff
}

.bck.dark a {
    color: #ffffff
}

.bck.dark a:not(.button):hover {
    color: #ffffff
}

.bck.dark a:not(.button):active {
    color: #ffffff
}

.bck.grey {
    background-color: #c4c4c4;
    color: #3a3a3a
}

.bck.grey a {
    color: #3a3a3a
}

.bck.grey a:not(.button):hover {
    color: #1a1a1a
}

.bck.grey a:not(.button):active {
    color: #1a1a1a
}

.bck.light {
    background-color: #ecf0f1;
}

.bck.light a {
    color: #3a3a3a
}

.bck.light a:not(.button):hover {
    color: #1a1a1a
}

.bck.light a:not(.button):active {
    color: #1a1a1a
}

.bck.white {
    background-color: #ffffff;
}

.bck.white a {
    color: #3a3a3a
}

.bck.white a:not(.button):hover {
    color: #1a1a1a
}

.bck.white a:not(.button):active {
    color: #1a1a1a
}

.bck.error {
    background-color: #cc4141;
    color: #ffffff
}

.bck.error a {
    color: #ffffff
}

.bck.error a:not(.button):hover {
    color: #ffffff
}

.bck.error a:not(.button):active {
    color: #ffffff
}

.bck.warning {
    background-color: #f7941d;
    color: #ffffff
}

.bck.warning a {
    color: #ffffff
}

.bck.warning a:not(.button):hover {
    color: #ffffff
}

.bck.warning a:not(.button):active {
    color: #ffffff
}

.bck.success {
    background-color: #8dc63f;
    color: #ffffff
}

.bck.success a {
    color: #ffffff
}

.bck.success a:not(.button):hover {
    color: #ffffff
}

.bck.success a:not(.button):active {
    color: #ffffff
}

.bck.info {
    background-color: #0097da;
    color: #ffffff
}

.bck.info a {
    color: #ffffff
}

.bck.info a:not(.button):hover {
    color: #ffffff
}

.bck.info a:not(.button):active {
    color: #ffffff
}

.text-color.white {
    color: #ffffff !important
}

.text-color.error {
    color: #CC4141 !important
}

.text-color.warning {
    color: #F7941D !important
}

.text-color.success {
    color: #8DC63F !important
}

.text-color.info {
    color: #0097DA !important
}

.shadow {
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
}

.shadow.inset {
    box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.3);
}

.text.shadow {
    text-shadow: 0 1px 1px rgba(0,0,0,0.5)
}

.button{
    font-weight: 600 !important;
    text-shadow: rgba(0,0,0,0.1) 0 1px 0;
}

.button:not(.transparent):not(:disabled) {
    color: #ffffff !important;
    background-color: #a7babe;
    border-radius: 4px;
    box-shadow: inset 0 .1em 0 rgba(255,255,255,0.1), inset 0 -.15em 0 rgba(0,0,0,0.2), 0 .15em 0 rgba(0, 0, 0, 0.075);
    -webkit-font-smoothing: antialiased;
}

.button:not(.transparent):not(:disabled):hover {
    box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.15), inset 0 -.15em 0 rgba(0, 0, 0, 0.2), 0 .15em 0 rgba(0, 0, 0, 0.075)
}

.button:not(.transparent):not(:disabled):active {
    box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.3), inset 0 .15em 0 rgba(0, 0, 0, 0.1)
}

.button:not(.transparent):not(:disabled).light {
    background-color: #ecf0f1;
    color: #3a3a3a !important;
}

.button:not(.transparent):not(:disabled).grey {
    background-color: #c4c4c4;
    color: #3a3a3a !important;
}

.button:not(.transparent):not(:disabled).success {
    background-color: #8dc63f;
}

.button:not(.transparent):not(:disabled).warning {
    background-color: #f7941d;
}

.button:not(.transparent):not(:disabled).error {
    background-color: #cc4141;
}

.button:not(.transparent):not(:disabled).info {
    background-color: #0097da;
}

.button:not(.transparent).disabled, .button[disabled=disabled], .button:disabled {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #999 !important;
    cursor: none
}

.button.transparent {
    background: none !important
}

form input[type="text"],
.form input[type="text"],
form input[type="password"],
.form input[type="password"],
form input[type="date"],
.form input[type="date"],
form input[type="datetime"],
.form input[type="datetime"],
form input[type="email"],
.form input[type="email"],
form input[type="number"],
.form input[type="number"],
form input[type="search"],
.form input[type="search"],
form input[type="tel"],
.form input[type="tel"],
form input[type="time"],
.form input[type="time"],
form input[type="url"],
.form input[type="url"],
form select,
.form select,
form textarea,
.form textarea {
    background-color: #ffffff;
    border: 1px solid #ccc;
    color: #555;
    border-radius: .2rem;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color 300ms;
}

form input[type="text"]:focus,
.form input[type="text"]:focus,
form input[type="password"]:focus,
.form input[type="password"]:focus,
form input[type="date"]:focus,
.form input[type="date"]:focus,
form input[type="datetime"]:focus,
.form input[type="datetime"]:focus,
form input[type="email"]:focus,
.form input[type="email"]:focus,
form input[type="number"]:focus,
.form input[type="number"]:focus,
form input[type="search"]:focus,
.form input[type="search"]:focus,
form input[type="tel"]:focus,
.form input[type="tel"]:focus,
form input[type="time"]:focus,
.form input[type="time"]:focus,
form input[type="url"]:focus,
.form input[type="url"]:focus,
form select:focus,
.form select:focus,
form textarea:focus,
.form textarea:focus {
    border-color: #aaa;
    color: #333;
}

form input[type="text"].error,
.form input[type="text"].error,
form input[type="password"].error,
.form input[type="password"].error,
form input[type="date"].error,
.form input[type="date"].error,
form input[type="datetime"].error,
.form input[type="datetime"].error,
form input[type="email"].error,
.form input[type="email"].error,
form input[type="number"].error,
.form input[type="number"].error,
form input[type="search"].error,
.form input[type="search"].error,
form input[type="tel"].error,
.form input[type="tel"].error,
form input[type="time"].error,
.form input[type="time"].error,
form input[type="url"].error,
.form input[type="url"].error,
form select.error,
.form select.error,
form textarea.error,
.form textarea.error{
    border-color: #ed796d !important;
    color: #e74c3c !important;
    background-color: #fdedeb !important;
}

form input[type="text"].error:focus,
.form input[type="text"].error:focus,
form input[type="password"].error:focus,
.form input[type="password"].error:focus,
form input[type="date"].error:focus,
.form input[type="date"].error:focus,
form input[type="datetime"].error:focus,
.form input[type="datetime"].error:focus,
form input[type="email"].error:focus,
.form input[type="email"].error:focus,
form input[type="number"].error:focus,
.form input[type="number"].error:focus,
form input[type="search"].error:focus,
.form input[type="search"].error:focus,
form input[type="tel"].error:focus,
.form input[type="tel"].error:focus,
form input[type="time"].error:focus,
.form input[type="time"].error:focus,
form input[type="url"].error:focus,
.form input[type="url"].error:focus,
form select.error:focus,
.form select.error:focus,
form textarea.error:focus,
.form textarea.error:focus {
    border-color: #e74c3c !important;
    background-color: #fef6f5 !important
}

/*form input[type="text"]:required,
.form input[type="text"]:required,
form input[type="password"]:required,
.form input[type="password"]:required,
form input[type="date"]:required,
.form input[type="date"]:required,
form input[type="datetime"]:required,
.form input[type="datetime"]:required,
form input[type="email"]:required,
.form input[type="email"]:required,
form input[type="number"]:required,
.form input[type="number"]:required,
form input[type="search"]:required,
.form input[type="search"]:required,
form input[type="tel"]:required,
.form input[type="tel"]:required,
form input[type="time"]:required,
.form input[type="time"]:required,
form input[type="url"]:required,
.form input[type="url"]:required,
form select:required,
.form select:required,
form textarea:required,
.form textarea:required {*/
    /*border-color: #c1dd9b !important;*/
    /*color: #8fc249 !important;*/
    /*background-color: #f7faf2 !important;*/
/*}*/

 /*form input[type="text"]:required:focus,
 .form input[type="text"]:required:focus,
 form input[type="password"]:required:focus,
 .form input[type="password"]:required:focus,
 form input[type="date"]:required:focus,
 .form input[type="date"]:required:focus,
 form input[type="datetime"]:required:focus,
 .form input[type="datetime"]:required:focus,
 form input[type="email"]:required:focus,
 .form input[type="email"]:required:focus,
 form input[type="number"]:required:focus,
 .form input[type="number"]:required:focus,
 form input[type="search"]:required:focus,
 .form input[type="search"]:required:focus,
 form input[type="tel"]:required:focus,
 .form input[type="tel"]:required:focus,
 form input[type="time"]:required:focus,
 .form input[type="time"]:required:focus,
 form input[type="url"]:required:focus,
 .form input[type="url"]:required:focus,
 form select:required:focus,
 .form select:required:focus,
 form textarea:required:focus,
 .form textarea:required:focus {*/
    /*border-color: #b2d582 !important;*/
/*}*/

form input[type="checkbox"],
.form input[type="checkbox"],
form input[type="radio"],
.form input[type="radio"] {
    background: #ffffff;
    border: .1em solid #bdc3c7;
}

form input[type="checkbox"]:checked,
.form input[type="checkbox"]:checked,
form input[type="radio"]:checked,
.form input[type="radio"]:checked {
    border-color: #a7babe;
}

form input[type="checkbox"]:checked:after,
.form input[type="checkbox"]:checked:after,
form input[type="radio"]:checked:after,
.form input[type="radio"]:checked:after {
    color: #a7babe;
}

form input[type="checkbox"].success:checked,
.form input[type="checkbox"].success:checked,
form input[type="radio"].success:checked,
.form input[type="radio"].success:checked {
    border-color: #8dc63f;
}

form input[type="checkbox"].success:checked:after,
.form input[type="checkbox"].success:checked:after,
form input[type="radio"].success:checked:after,
.form input[type="radio"].success:checked:after {
    color: #8dc63f;
}

form input[type="checkbox"].error:checked,
.form input[type="checkbox"].error:checked,
form input[type="radio"].error:checked,
.form input[type="radio"].error:checked {
    border-color: #cc4141;
}

form input[type="checkbox"].error:checked:after,
.form input[type="checkbox"].error:checked:after,
form input[type="radio"].error:checked:after,
.form input[type="radio"].error:checked:after {
    color: #cc4141;
}

form input[type="checkbox"].warning:checked,
.form input[type="checkbox"].warning:checked,
form input[type="radio"].warning:checked,
.form input[type="radio"].warning:checked {
    border-color: #f7941d;
}

form input[type="checkbox"].warning:checked:after,
.form input[type="checkbox"].warning:checked:after,
form input[type="radio"].warning:checked:after,
.form input[type="radio"].warning:checked:after {
    color: #f7941d;
}

form input[type="checkbox"].info:checked,
.form input[type="checkbox"].info:checked,
form input[type="radio"].info:checked,
.form input[type="radio"].info:checked {
    border-color: #0097da;
}

form input[type="checkbox"].info:checked:after,
.form input[type="checkbox"].info:checked:after,
form input[type="radio"].info:checked:after,
.form input[type="radio"].info:checked:after {
    color: #0097da;
}

form input[type="text"]:disabled,
.form input[type="text"]:disabled,
form input[type="password"]:disabled,
.form input[type="password"]:disabled,
form input[type="date"]:disabled,
.form input[type="date"]:disabled,
form input[type="datetime"]:disabled,
.form input[type="datetime"]:disabled,
form input[type="email"]:disabled,
.form input[type="email"]:disabled,
form input[type="number"]:disabled,
.form input[type="number"]:disabled,
form input[type="search"]:disabled,
.form input[type="search"]:disabled,
form input[type="tel"]:disabled,
.form input[type="tel"]:disabled,
form input[type="time"]:disabled,
.form input[type="time"]:disabled,
form input[type="url"]:disabled,
.form input[type="url"]:disabled,
form select:disabled,
.form select:disabled,
form textarea:disabled,
.form textarea:disabled,
form input[type="checkbox"]:disabled,
.form input[type="checkbox"]:disabled,
form input[type="radio"]:disabled,
.form input[type="radio"]:disabled {
    background-color: #eee !important;
    cursor: not-allowed;
}

form .helptext,
.form .helptext {
    font-size: .9em;
    background-color: #fcf8e3;
    padding: .5em;
}

form ul.errorlist li,
.form ul.errorlist li,
form ul.errorlist li,
.form ul.errorlist li {
    color: #ff0000;
}

[data-tuktuk="toggle-wrap"] {
    background: #a6a6a6;
    color: #d2d2d2;
    border-radius: 1em;
    transition: all 300ms ease;
}

[data-tuktuk="toggle-wrap"] label {
    border-radius: 1em;
    background: #6f6f6f;
    transition: all 300ms ease;
}

[data-tuktuk="toggle-wrap"].checked {
    background-color: #4bc613;
    color: #ffffff !important;
}

[data-tuktuk="toggle-wrap"].checked label {
    background-color: #38950e
}

[data-tuktuk="accordion-menu"] li {
    box-shadow: inset 0 -1px rgba(0 ,0 ,0 , 0.2);
}

[data-tuktuk="accordion-menu"] a:hover {
    box-shadow: inset 8px 0 #64A04C;
}

[data-tuktuk="accordion"] {
    border-bottom: 1px solid #ffffff;
}

[data-tuktuk="accordion"]:last-child {
    border-bottom: none;
}

[data-tuktuk="modal"] {
    background: #ffffff;
    transition: all 250ms;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .5)
}

[data-tuktuk="modal"] header {
    background: #1abc9c;
    color: #ffffff
}

[data-tuktuk="lock"] {
    opacity: 0;
    transition: all 250ms;
}

[data-tuktuk="lock"].active {
    opacity: 1;
}

[data-tuktuk="lock"].active:not([data-active=true]) {
    background-color: rgba(0, 0, 0, .5)
}

[data-tuktuk="lock"].active[data-loading=true] {
    background-color: rgba(255, 255, 255, 1);
}

[data-tuktuk="lock"] > .text {
    color: rgba(0, 0, 0, 0.8);
}

nav[data-tuktuk="menu"] > a {
    border-radius: .2rem;
}

nav[data-tuktuk="menu"] > a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #000000;
}

nav[data-tuktuk="menu"] > a.active {
    background-color: rgba(0, 0, 0, 0.1)
}

nav[data-tuktuk="menu"] > a:hover .icon,
nav[data-tuktuk="menu"] > a.active .icon {
    color: #4bc613
}

nav[data-tuktuk="menu"] > a:not(.active):not(:hover) > .icon,
nav[data-tuktuk="menu"] > a small {
    opacity: .75;
    font-weight: 400
}

[data-tuktuk="tip"]:before,
[data-tuktuk="tip"]:after {
    transition: all 300ms
}

[data-tuktuk="tip"]:before {
    background: transparent;
    border: .5em solid transparent
}

[data-tuktuk="tip"]:after {
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    text-shadow: 0 -.15em 0 #000;
    font-weight: bold;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.25)
}

[data-tuktuk="tip"]:not(.tip-top):not(.tip-right):not(.tip-left):before {
    border-bottom-color: rgba(0, 0, 0, 0.75)
}

[data-tuktuk="tip"].tip-top:before {
    border-top-color: rgba(0, 0, 0, 0.75)
}

[data-tuktuk="tip"].tip-left:before {
    border-left-color: rgba(0, 0, 0, 0.75)
}

[data-tuktuk="tip"].tip-right:before {
    border-right-color: rgba(0, 0, 0, 0.75)
}

[data-tuktuk=boxes] aside {
    background: #ffffff;
    color: #476481;
}

[data-tuktuk=boxes] aside header {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1)
}

[data-tuktuk=boxes] aside.absolute {
    transition: all 300ms
}

[data-tuktuk=boxes] aside [data-menu] > a:not(.button) {
    border-radius: .1rem;
}

[data-tuktuk=boxes] aside [data-menu] > a:not(.button).active {
    background: #1abc9c;
    color: #ffffff
}

@media only screen and (min-width: 768px) {
    body {
        font-size: var(--body-desktop-font-size)
    }
}

/*Personal theme colors*/

.bck.color-one {
    background-color: var(--color-one-bg-color);
    color: var(--color-one-text-color);
}

.bck.color-one a {
    color: var(--color-one-a-text-color);
}

.bck.color-one a:not(.button):hover {
    color: var(--color-one-a-hover-text-color);
}

.bck.color-one a:not(.button):active {
    color: var(--color-one-a-active-text-color);
}

.bck.color-two {
    background-color: var(--color-two-bg-color);
    color: var(--color-two-text-color);
}

.bck.color-two a {
    color: var(--color-two-a-text-color);
}

.bck.color-two a:not(.button):hover {
    color: var(--color-two-a-hover-text-color);
}

.bck.color-two a:not(.button):active {
    color: var(--color-two-a-active-text-color);
}

.bck.color-three {
    background-color: var(--color-three-bg-color);
    color: var(--color-three-text-color);
}

.bck.color-three a {
    color: var(--color-three-a-text-color);
}

.bck.color-three a:not(.button):hover {
    color: var(--color-three-a-hover-text-color);
}

.bck.color-three a:not(.button):active {
    color: var(--color-three-a-active-text-color);
}

.bck.color-four {
    background-color: var(--color-four-bg-color);
    color: var(--color-four-text-color);
}

.bck.color-four a {
    color: var(--color-four-a-text-color);
}

.bck.color-four a:not(.button):hover {
    color: var(--color-four-a-hover-text-color);
}

.bck.color-four a:not(.button):active {
    color: var(--color-four-a-active-text-color);
}

.bck.color-five {
    background-color: var(--color-five-bg-color);
    color: var(--color-five-text-color);
}

.bck.color-five a {
    color: var(--color-five-a-text-color);
}

.bck.color-five a:not(.button):hover {
    color: var(--color-five-a-hover-text-color);
}

.bck.color-five a:not(.button):active {
    color: var(--color-five-a-active-text-color);
}
