/*
Theme Name: Derma Oberursel
Theme URI: https://derma-oberursel.de
Author: Derma Oberursel Team
Author URI: https://derma-oberursel.de
Description: Custom WordPress theme for Dermatologische Praxis in Oberursel. Based on _s (Underscores) starter theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: derma
Tags: one-column, custom-logo, custom-menu, translation-ready
*/

/* =========================================
   bxSlider overrides
   ========================================= */
.bx-wrapper {
    border: 2px solid #ffffff !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176) !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto { display: none !important; }

/* =========================================
   Base styles
   ========================================= */
body {
    background-color: #d7d4d1 !important;
    font-family: Verdana, sans-serif !important;
    font-size: 14px !important;
    color: #7a7064 !important;
}
a, a:hover { color: #6A0000 !important; text-decoration: underline !important; }
p { line-height: 1.6 !important; }

/* =========================================
   Header & Navigation
   ========================================= */
#site-header {
    background-color: #ffffff !important;
    padding-top: 5px;
}
.language-switch {
    text-align: left;
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.language-switch a { color: #97928e !important; text-decoration: none !important; }
.language-switch a:hover { color: #97928e !important; }

/* Override ALL Bootstrap navbar styles */
.navbar-derma {
    background-color: #d7d4d1 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.navbar-derma .navbar-header {
    width: 100% !important;
}

.navbar-derma .container {
    background-color: #ffffff !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navbar-brand {
    background-color: #ffffff !important;
    padding: 0 !important;
}

.navbar-toggle {
    border: 1px solid #a0a0a0 !important;
}

.navbar-toggle .icon-bar {
    background-color: #555 !important;
}

/* Navigation bar - yellow */
.navbar-nav-derma {
    width: 100% !important;
    background-color: #ffd765 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    margin-left: 0 !important;
}

.navbar-nav-derma > li {
    position: relative !important;
    display: block !important;
    float: none !important;
}

.navbar-nav-derma > li > a {
    height: 52px !important;
    padding: 0 10px !important;
    background-color: #ffd765 !important;
    color: #000000 !important;
    font-family: Verdana, sans-serif !important;
    font-size: 14px !important;
    line-height: 52px !important;
    border: none !important;
    display: block !important;
    text-decoration: none !important;
}

.navbar-nav-derma > li > a:hover,
.navbar-nav-derma > li > a:focus {
    background-color: #e6c15c !important;
    color: #000000 !important;
}

/* Dropdowns */
.dropdown-menu-derma {
    background-color: #a0a0a0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-width: 250px !important;
}

.dropdown-menu-derma > li > a {
    color: #ffffff !important;
    padding: 8px 20px !important;
    font-family: Verdana, sans-serif !important;
    font-size: 14px !important;
    display: block !important;
    text-decoration: none !important;
    border: none !important;
}

.dropdown-menu-derma > li > a:hover,
.dropdown-menu-derma > li > a:focus {
    background-color: #8c847a !important;
    color: #ffffff !important;
}

.dropdown-menu-derma .dropdown-headline {
    padding: 3px 20px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background-color: #a0a0a0 !important;
}

.dropdown-menu-derma .divider {
    background-color: #8c847a !important;
    height: 1px !important;
    margin: 0 !important;
    border: none !important;
}

/* =========================================
   Content area
   ========================================= */
.container-content {
    background-color: #ffffff !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: 20px !important;
}

#image-slider {
    border: 2px solid #ffffff !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176) !important;
    margin-bottom: 0 !important;
}

/* =========================================
   Typography
   ========================================= */
h1, .entry-title {
    font-size: 22px !important;
    color: #8c847a !important;
    margin-bottom: 30px !important;
    font-family: Verdana, sans-serif !important;
    font-weight: bold !important;
}
h2 {
    font-size: 18px !important;
    color: #8c847a !important;
    margin-bottom: 20px !important;
    font-family: Verdana, sans-serif !important;
    font-weight: bold !important;
}
h3 {
    font-size: 16px !important;
    color: #8c847a !important;
    margin-bottom: 15px !important;
    font-family: Verdana, sans-serif !important;
    font-weight: bold !important;
}

/* =========================================
   Tables
   ========================================= */
.table > thead > tr > th {
    background-color: #ffd765 !important;
    border-color: #ffd765 !important;
    color: #000000 !important;
}
.table > tbody > tr > td,
.table > thead > tr > th {
    border-color: #ddd !important;
    font-family: Verdana, sans-serif !important;
    font-size: 14px !important;
}
.table { font-size: 14px !important; }

/* =========================================
   Sidebar
   ========================================= */
.sidebar-section {
    width: 90% !important;
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 12px !important;
    margin-bottom: 20px !important;
}
.sidebar-cert-header {
    width: 100% !important;
    float: left !important;
    background-color: #efeeed !important;
    padding: 10px 20px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-align: center !important;
}

/* =========================================
   Footer
   ========================================= */
.footer {
    background-color: #ffffff !important;
    padding-top: 20px !important;
    padding-bottom: 30px !important;
    margin-top: 20px !important;
}
.footer .footer-content {
    text-align: center !important;
    font-size: 11px !important;
    color: #7a7064 !important;
}
.footer a { color: #7a7064 !important; }

/* =========================================
   Buttons
   ========================================= */
.btn-termin {
    background-image: linear-gradient(to bottom, #fff 0, #ffd765 100%) !important;
    border: 1px solid #d4b84e !important;
    color: #000 !important;
    font-family: Verdana, sans-serif !important;
}

/* =========================================
   Doctolib Button
   ========================================= */
.doctolib-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #107ACA !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: Roboto, sans-serif !important;
    text-decoration: none !important;
    border-radius: 4px 4px 0 0 !important;
    height: 48px !important;
    padding: 0 24px !important;
    z-index: 1000 !important;
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
}
.doctolib-button:hover {
    background-color: #0d6aab !important;
}

/* =========================================
   Responsive
   ========================================= */
@media (min-width: 768px) {
    .language-switch { text-align: right !important; }
    .navbar-nav-derma { padding-left: 40px !important; }
    .container-content { padding-top: 40px !important; padding-bottom: 40px !important; }
}
@media (min-width: 992px) {
    .container { max-width: 940px !important; }
    .navbar-nav-derma { padding-left: 40px !important; }
}
@media (min-width: 1200px) {
    .container { max-width: 990px !important; }
    .navbar-nav-derma { padding-left: 40px !important; }
}