/* variables */
:root {
    /* colors */
    --color-highlight-bg: rgba(0,20,0,1.0);    /* active box background color, etc */
    --color-carousel-indicator: rgba(150,150,150,0.5);
    --color-box-bg: rgba(35,35,35,1.0);
    --color-body-bg: rgba(0,0,0,1.0);
    --color-default: rgba(255,255,255,1.0); /* default front color */
    --color-header: rgba(194,194,193,1.0);          /* headline color */
    --color-odds-up: rgba(0,128,0,1.0);
    --color-odds-down: rgba(128,0,0,1.0);
    --color-contrast: rgba(0,0,0,1.0);      /* usually for those with white background */
    --color-highlight-menu: var(--color-header); /*rgba(77,255,77,1.0);*/
    --color-btn-bg: rgba(41,41,41,1.0);
    --color-btn-bg-hover: rgba(15,15,15,1.0);
    --color-logo: rgba(0,128,0,1.0);
    --color-link: rgba(0,204,0,1.0);
    --color-link-visited: rgba(0,128,0,1.0);
    --color-disabled-font: rgba(255,255,255,0.7);
    --color-warning: rgba(169,68,66,1.0);

    /* font sizes */
    --fs-h6: 12px;  /* follow bootstrap */
    --fs-h5: 14px;
    --fs-h4: 18px;
    --fs-h3: 24px;
    --fs-h2: 30px;
    --fs-h1: 36px;
    --fs-regular: 12px;

    /* font family */
    --ff-default: 'Montserrat Alternates', 'Noto Sans SC Sliced', sans-serif;
    --ff-digit: 'Allerta Stencil', sans-serif;
}

body {
      font-family: var(--ff-default);
      background-color: var(--color-body-bg);
      color: var(--color-default);
      padding-top: 50px;
      font-size: var(--fs-regular);
}

.container {
    background-color: var(--color-body-bg);  /* Fallback color */
}

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

footer {
   margin-top: 24pt;
   background-color: var(--color-box-bg);
   color: var(--color-header);
   padding: 24pt;
   font-size: var(--fs-regular);
}
footer a {
   color: var(--color-header);
}
footer a:hover {
    color: var(--color-default);
    text-decoration: none;
}
.logo-footer {
    height: 20px;
    margin: 0 4pt 0 16pt;
    vertical-align: middle;
}

.footer-contact-logo {
    height: 20px;
    margin: 0 0.5em 0 0.5em;
    vertical-align: middle;
}

.footer-contact-box {
    display: inline-block;
    vertical-align: middle;
    margin: 1em 1em 1em 1em;
}

.navbar {
    font-family: var(--ff-default);
    margin-bottom: 0;
    background-color: var(--color-box-bg);
    border: 0;
    font-size: var(--fs-h5) !important;
    font-weight: bold !important;
    letter-spacing: 4px;
    opacity: 0.9;
}
.navbar li a: focus {
    color: var(--color-default) !important;
}

.navbar li a, .navbar .navbar-brand {
    color: var(--color-header) !important;
}

.navbar-brand {
    padding-left: 25px;
    padding-right: 5px;
}

.ico-brand {
    display: inline-block !important;
    margin-right: 6pt;
    height: 24px;
}

.navbar-nav li a:hover {
    color: var(--color-default) !important;
}
/*.navbar-nav li.active a {
    color: var(--color-default) !important;
    background-color: #29292c !important;
}*/
.navbar-default .navbar-toggle {
    border-color: transparent;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: var(--color-highlight-bg);
}

.open .dropdown-toggle {
    color: var(--color-default);
    background-color: var(--color-box-bg) !important;
}
.dropdown-menu {
    background-color: var(--color-box-bg) !important;
}
.dropdown-menu li a {
    color: var(--color-default) !important;
    background-color: var(--color-box-bg) !important;
}
.dropdown-menu li a:hover {
    background-color: var(--color-highlight-bg) !important;
}

.menu-hover-outline:hover {
    border-bottom: var(--color-link) solid 1px;
    margin-left: 0px;
    margin-right: 0px;
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
}

.lang-selector {
    vertical-align: middle;
    background-color: var(--color-box-bg);
    border-radius: 5px;
    font-size: var(--fs-h6);
    padding: 2pt;
    font-weight: normal;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;
}

.lang-selector:focus, .lang-selector:active {
    outline: none !important;
    border-color: var(--color-default);
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.menu-hover-outline:focus {
    background-color: var(--color-highlight-bg) !important;
}

.ico-menu {
    position:absolute;
    height:20px;
    margin-left: 2px;
    padding-top: 8px;
    z-index: 1;
}

.cat-icon {
    width:20px;
}

.ico-menu-item {
    position:absolute;
    width: 22px;
    height: 25px;
    margin-left: 5px;
    padding-top: 3px;
}

.tooltip-inner {
    font-family: var(--ff-default);
    white-space:nowrap;
    max-width:none;
}

.tooltip-box {
    border-bottom: 1px dotted var(--color-header);
    cursor: pointer;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu, .dropdown-submenu.hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: var(--color-default);
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: var(--color-default);
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

@media (max-width: 767px) {
   .navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>a {
        padding-left: 37px !important;
   }
   .navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>li>a {
        padding-left: 30px !important;
   }
   .navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>span>img {
        padding-left: 5px !important;
   }
   .navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>span>img {
        padding-left: 13px !important;
        width: 35px;
   }
}

.page-title {
    color: var(--color-header);
}
.page-title-divider {
    border-top-color: var(--color-box-bg);
}
.page-title + .page-title-divider {
    margin-bottom: 3em;
}

a:hover, a:link, a:active {
    color: var(--color-link);
}
a:visited {
    color: var(--color-link-visited);
}

.text-center {
    text-align: center;
}

.disabled-font-color {
    color: var(--color-disabled-font);
}

.warning-color {
    color: var(--color-warning);
}


@media (min-width: 1200px) {
    .custom-container {
        width: 850px;
    }
}

.custom-container {
    background-color: var(--color-body-bg);
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.nineteenplus {
    font-family: var(--ff-digit);
    font-weight: bold;
    font-style: italic;
}

.link-color {
    color: var(--color-link);
}

.more-top-margin {
    margin-top: 3em;
}

.input-box {
    vertical-align: middle;
    background-color: var(--color-box-bg);
    color: var(--color-default);
    font-family: var(--ff-digit);
    font-size: var(--fs-regular);
    border-radius: 5px;
    padding: 2pt;
    font-weight: normal;
}

.input-box:focus {
    border: 1px solid var(--color-link);
    box-shadow: 0 0 1px 1px var(--color-link);
}

.input-box:read-only {
    vertical-align: middle;
    background-color: var(--color-box-bg);
    color: var(--color-default);
    font-family: var(--ff-digit);
    font-size: var(--fs-regular);
    border-radius: 5px;
    padding: 2pt;
    font-weight: normal;
}

.input-box:disabled {
    vertical-align: middle;
    background-color: var(--color-body-bg) !important;
    color: var(--color-default);
    font-family: var(--ff-digit);
    font-size: var(--fs-regular);
    border-radius: 5px;
    padding: 2pt;
    font-weight: normal;
}