@import url('abfuhrkalender-in-typo3-2024.css');

/*
rot: #e2001a
*/

.pdf-download-box {
    top: 150px;
}

.einspaltig .container_inhalt {
    width: 100%;
}

#startseite .step {
    font-size: 15px;
    color: #cd171a;
    font-weight: normal;
    padding: 5px 10px;
    border-radius: 15px;
    float: left;
    background: #ebebeb;
    border: 2px solid #cd171a;
    font-weight: bold;
    display: none;
}

#startseite .spalte {
    /* border-bottom:2px solid #9d9d9c;
    padding:20px 0; */
}

#startseite .address_form {
    padding-left: 0px;
}

#startseite .address_form input.ip_text {
    border-style: solid;
    border: 1px solid #bbb;
    padding: 10px 10px;
    font-size: 120%;
}

#startseite .address_form input.ip_text[name="session[number]"] {
    text-align: center;
}

#startseite .address_form>strong {
    position: relative;
    top: 8px;
    left: 0px;
    font-size: 14px;
    display: block;
}

#startseite .address_form br+br {
    display: none;
}

#startseite #start_go .address_form {
    font-size: 90%;
    font-style: italic;
    display: none;
}

#startseite #start_go .address_form strong {
    font-size: 16px;
}

#startseite #go_button.continue {
    text-align: left;
}

#startseite #go_button.continue input,
.feedback a {
    padding-left: 40px;
    background: #cd171a;
    margin: 10px 0 0 0px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    color: #fff;
    padding: 5px 20px;
}

.feedback a {
    position: absolute;
    bottom: 10px;
    right: 0px;
}

#startseite #go_button.continue input[type=submit][disabled=disabled] {
    background: #bbb;
    cursor: default;
}

#startseite .ui-menu .ui-menu-item {
    background: none;
    padding: 1px 1em 1px .4em
}

#startseite .ui-menu .ui-menu-item:hover {
    background: #cd171a;
    color: #fff;
    border-color: #bbb;
}

#startseite .footer .copyright {
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 400px;
}

#startseite h1 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #cd1719;
}

/* Abfuhrkalender CSS */

/* Rails Standard-Styles (Fehlerausgabe etc) */

#offline {
    text-align: center;
    margin: 8em 4em;
    color: #a3a5a9;
}

#startseite .fieldWithErrors {
    display: inline;
    border: 1px solid red;
}

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2;
}

.calendar-preview {
    position: absolute;
    /* keinen Rand erzeugen */
    width: 600px;
    height: 170px;
    background: url(http://kalender.beg-logistics.de/images/calendar-preview.png);
    margin: 8px 2px;
    border: 1px solid black;
    font-weight: bold;
}

.calendar-preview-spacer {
    height: 170px;
    margin: 8px 2px;
}

#calendar-preview-title {
    font-size: 15px;
    position: relative;
    color: white;
    left: 47px;
    top: 41px;
}

#calendar-preview-name {
    font-size: 11px;
    position: relative;
    left: 47px;
    top: 60px;
}

#loading div {
    background: url(/images/ajax-loader.gif) no-repeat center center;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 50px;
    margin-left: -100px;
    margin-top: -25px;
    text-align: center;
    z-index: 3;
    overflow: auto;
    font-size: 14px;
    font-weight: bold;
    color: black;
}

/* ##### CSS-Styles für den Abfuhrkalender #####
   ##    generelle Formatierungen             ##*/

#noscript-info,
#admin-info {
    background: #ff9;
    font-size: 10pt;
    padding: 6px;
    text-align: center;
    border-bottom: 2px solid black;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100000;
}

#noscript-info {
    font-weight: bold;
}

#MB_window p {
    font-size: 10pt;
}

.moved {
    font-size: 20px;
    font-weight: bold;
    color: red;
    line-height: 23px;
    float: left;
}

.warning {
    font-weight: bold;
    margin: 0.5em 0;
    color: red;
}

a:active,
a:focus {
    border: none;
    outline: 0;
}

.container_inhalt {
    width: 620px;
}

td {
    font-size: 13px;
}

.inhalt {
    margin-bottom: 10px;
}

.inhalt h1 {
    font-size: 26px;
    line-height: 100%;
    margin-bottom: 5px !important;
}

.container_main-navi {
    height: auto;
    left: -640px;
}

.content-box {
    margin-top: 20px;
}

.clearer {
    clear: both;
}

.copyright {
    font-size: 11px;
    color: #a2a5a9;
    margin-left: 140px;
    margin-bottom: 30px;
    clear: left;
}

.copyright a {
    color: #fe6600;
    text-decoration: none;
}

.btn_feedback {
    position: fixed;
    left: 0px;
    bottom: 23px;
    border: 1px solid #bbb;
    text-align: center;
    background: #a2a5a9;
    width: 115px;
}

.btn_feedback a {
    display: block;
    padding: 5px;
    font-size: 11px;
    text-decoration: none;
}

.box_feedback span {
    font-size: 10pt;
}

.box_feedback span.kleiner {
    font-size: 11px;
}

#MB_caption {
    font-size: 13px;
}

.box_feedback input.senden {
    border: 1px solid #bbb;
    text-align: center;
    background: #a2a5a9;
    margin-top: 10px;
    padding: 3px;
    cursor: pointer;
}

.clickable {
    cursor: pointer;
}

/* ## Abfuhrkalender-Navi ## */

.ak_navi {
    width: 100%;
    border-bottom: 1px solid #bbb;
    padding-top: 10px;
    height: 15px;
    margin-bottom: 30px;
}

.ak_navi ul,
.ak_navi li {
    margin: 0;
    padding: 0;
}

.ak_navi li {
    display: block;
    float: left;
    margin-right: 20px;
    text-transform: uppercase;
    font-size: 11px;
    color: #f00;
}

.ak_navi li a {
    color: #000;
    text-decoration: none;
}

.ak_navi li a:hover {
    color: #f00;
    text-decoration: none;
}

/* ## Adresseingabe (Startseite) ## */

#startseite .container_inhalt {
    width: 980px;
    height: 97%;
}

#startseite .container_inhalt.bg_step1 {
    background: url(/images/bg_start_1-akt.gif) no-repeat 0 103px;
}

#startseite .container_inhalt.bg_step2 {
    background: url(/images/bg_start_1-2-akt.gif) no-repeat 0 103px;
}

#startseite .container_inhalt.bg_step3 {
    background: url(/images/bg_start_1-2-3-akt.gif) no-repeat 0 103px;
}

.big {
    font-size: 20px;
    font-weight: bold;
    width: 400px;
    display: block;
}

.continue input {
    color: black;
    background: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font-weight: bold;
    font-size: 13px;
}

.disabled {
    opacity: 0.3;
    -moz-opacity: 0.3;
    /* Mozilla Firefox */
    -khtml-opacity: 0.3;
    /* KHTML / Safari */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    /* IE8 */
    filter: alpha(opacity=30);
    /* IE5-7 */
}

.spalte {
    position: relative;
}

#start_address,
#start_selector {
    margin-right: 10px;
}

.step {
    color: #f1f1f2;
    font-size: 120px;
    line-height: 100%;
    font-weight: bold;
    float: right;
    margin-top: -16px;
}

#session_street {
    width: 250px;
}

#session_number {
    width: 30px;
}

#session_submit {
    cursor: pointer;
}

.arrows {
    color: #f1f1f2;
    font-size: 80px;
    line-height: 55%;
    font-weight: bold;
}

.arrows_red {
    color: #f00;
    margin-right: 20px;
    font-size: 17px;
}

.errorExplanation {
    border: 3px solid red;
    background: #ebebeb;
    padding: 10px;
    clear: both;
    position: absolute;
    top: 397px;
    left: 350px;
    z-index: 999;
}

.errorExplanation h2 {
    color: #ff0000;
    font-size: 17px;
    margin-top: 0px;
}

.error_subheader {
    color: #ff0000;
    font-weight: bold;
}

/* ## Containerstellplätze, Sackausgabestellen ## */

.box_datenausgabe {
    background: #fff;
    border-right: none;
}

.box_datenausgabe .drucken {
    display: none;
}

.box_datenausgabe .ueberschrift_datenausgabe {
    font-size: 1.2rem;
    line-height: 120%;
    font-weight: 700;
    padding-bottom: 1rem;
}

.box_bg_dunkelgrau {
    background: url(http://kalender.beg-logistics.de/images/bg_box_dunkelgrau.gif) repeat-y right;
    width: 800px;
    padding-bottom: 100px;
    float: right;
    position: relative;
    top: 0px;
    left: 1px;
    z-index: 1;
}

.daten {
    width: 365px;
    margin-left: 10px;
    margin-top: 30px;
    padding-top: 10px;
    float: left;
}

#map {
    float: right;
    margin-right: 20px;
    margin-top: 42px;
    border: 1px solid #bbb;
}

.box_hinweis {
    position: absolute;
    right: 21px;
    top: 385px;
    width: 380px;
    z-index: 4;
    border: 1px solid #bbb;
    padding: 10px;
    background: #fff;
    display: none;
    /* Hinweis-Box hier aktivieren!*/
}

.tabs {}

.tabs a,
img.schatten {
    float: left;
}

.btn_logout img.schatten,
.btn_logout a {
    float: left;
}

.tabs img.schatten {
    margin-right: 4px;
}

.tabs a,
#abfuhrtermine .btn_logout a {
    border: 1px solid #bbb;
    background: #fff;
    height: 30px;
    width: 30px;
    display: block;
    text-decoration: none;
}

.tabs a.aktiv,
.tabs a:hover,
#abfuhrtermine .btn_logout a:hover {
    background: #a2a5a9;
    color: #000;
}

.tabs_abfallarten {
    position: absolute;
    left: 281px;
    width: 275px;
}

.tabs_abfallarten a img {
    padding-left: 1px;
}

#tab_standort {}

#tab_standort img {
    margin-left: 5px;
    display: none;
}

#standort {
    border: none;
    width: auto;
    padding: 1px;
    width: fit-content;
}

#standort br {
    display: none;
}

#tab_alle {
    padding-top: 5px;
    height: 25px;
    text-align: center;
    margin-left: 5px;
}

.daten span.nr {
    color: #f00;
    font-weight: bold;
    margin-top: -20px;
}

.daten .nadel {
    float: left;
    width: 45px;
}

.daten .daten_adresse {
    float: left;
    margin-left: 5px;
    padding-right: 15px;
    padding-top: 10px;
    color: #818284;
    width: 211px;
}

.daten .daten_adresse strong {
    color: #000;
}

.daten .symbole {
    float: left;
    padding-top: 10px;
}

.daten .symbole img {
    margin-left: 12px;
}

.daten_schleife {
    clear: left;
}

#sackausgabestellen #tab_gs {
    margin-left: 44px;
}

a.details {
    color: #000;
    text-decoration: none;
}

a.details span.arrows {
    font-size: 12px;
    font-weight: bold;
    color: #f00;
}

#jalousie {
    clear: left;
}

#jalousie_toggle {
    position: relative;
    top: 15px;
    left: -14px;
}

#jalousie_toggle a {
    border: 1px solid #bbb;
    text-align: center;
    background: #efeff0;
    padding: 3px;
}

.zusatzinfos {
    /* SOMETHING TO DO SIRE! */
}

/* ## Schadstoffsammlung ## */

#schadstoffsammlung #tab_ss {
    margin-left: 44px;
}

#schadstoffsammlung .daten_adresse {
    width: 244px;
}

#schadstoffsammlung .daten .symbole {
    margin-left: 10px;
}

/* ## Abfuhrtermine ## */

.box_dateneingabe {
    margin-bottom: 20px;
}

#abfuhrtermine .box_bg_hellgrau {
    background: url(http://kalender.beg-logistics.de/images/bg_box_hellgrau_breit.gif) repeat-y;
    width: auto;
}

.box_kalender {
    float: left;
}

.box_eingabe_zeitraum {
    width: 115px;
    height: 150px;
    float: left;
    padding-left: 10px;
}

.box_eingabe_zeitraum input {
    margin-top: 4px;
}

.box_pdf_export {
    padding: 0 0 10px 0;
}

#pdf_download_radiobutton {
    position: absolute;
    left: 261px;
    top: 183px;
    display: none;
}

#calendar_sheet_compact {
    margin-top: 20px;
}

.box_pdf_export a {
    background: url(http://kalender.beg-logistics.de/images/calendar-download.png);
    display: block;
    width: 300px;
    height: 140px;
}

.box_pdf_export a span {
    display: none;
}

#abfuhrtermine .box_datenausgabe {
    margin-top: 20px;
    position: relative;
    padding: 20px;
}

#abfuhrtermine .ueberschrift_datenausgabe {
    font-weight: bold;
}

#abfuhrtermine .box_datenausgabe .terminausgabe .kompaktansicht {
    margin: 0 20px 20px 20px;
    background: url(/images/bg_abfuhrtermine_kompakt.gif) repeat-y;
}

#abfuhrtermine .box_datenausgabe .terminausgabe .header_line {
    font-weight: bold;
    text-align: center;
}

#abfuhrtermine .box_datenausgabe .terminausgabe .spalte1,
#abfuhrtermine .box_datenausgabe .terminausgabe .spalte2,
#abfuhrtermine .box_datenausgabe .terminausgabe .spalte3 {
    float: left;
    width: 200px;
    margin-right: 10px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.box_bg_dunkelgrau .drucken,
#abfuhrtermine .box_datenausgabe .drucken {
    position: absolute;
    right: 3px;
    top: 3px;
}

.btn_logout {
    float: right;
    box-shadow: 2px 2px 2px black;
}

.btn_logout a img {
    margin-top: 2px;
    margin-left: 1px;
}

#abfuhrtermine .btn_logout {
    position: absolute;
    right: 10px;
    top: -11px;
}

#abfuhrtermine .titel_dateneingabe {
    margin-bottom: 10px;
}

#terminausgabe h3 {
    color: #000;
    font-weight: bold;
    font-size: 1rem;
    padding-bottom: .5rem;
}

#terminausgabe .month {
    text-align: left;
}

#terminausgabe .week,
#terminausgabe .weekdays {
    float: left;
    width: 103px;
}

#terminausgabe .weekdays,
#terminausgabe .calendar_week {
    font-weight: bold;
}

#terminausgabe .weekdays span,
#terminausgabe .calendar_week span {
    display: block;
    padding-left: 10px;
}

#terminausgabe .weekday span {
    display: block;
    padding-left: 10px;
}

#terminausgabe .weekdays,
#terminausgabe .week {
    background: #efeff0;
    margin-right: 10px;
}

#terminausgabe .calendar_week {
    height: 25px;
    border-bottom: 1px solid #bbb;
}

#terminausgabe .weekdays div.headerday,
#terminausgabe .weekday {
    height: 25px;
    border-bottom: 1px solid #bbb;
    min-width: 23px;
}

#terminausgabe .weekday>div {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
}

#terminausgabe .day {}

#terminausgabe .weekday img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

#jahresansicht {
    display: flex;
    /*font-size: .95rem;*/
    gap: 5px;
}

#jahresansicht .month {
    float: left;
    width: auto;
}

#terminausgabe .monthday.current-date {
    background: #bbb !important;
}

#terminausgabe .monthday .long {
    display: none;
}

#terminausgabe .monthday .icon img {
    display: none;
}

#terminausgabe .monthday .icon.icon_gelbersack {
    display: block;
    width: 20px;
    height: 100%;
    background-image: url(/typo3conf/ext/beg_template/Resources/Public/Icons/muellarten/gelber-sack.png);
    background-size: cover;
}

#terminausgabe .monthday .icon.icon_gelbetonne {
    display: block;
    width: 20px;
    height: 100%;
    background-image: url(/typo3conf/ext/beg_template/Resources/Public/Icons/muellarten/gelbe-tonne.png);
    background-size: cover;
}

#terminausgabe .monthday .icon.icon_restmuell {
    display: block;
    width: 20px;
    height: 100%;
    background-image: url(/typo3conf/ext/beg_template/Resources/Public/Icons/muellarten/schwarze-tonne.png);
    background-size: cover;
}

#terminausgabe .monthday .icon.icon_blauetonne {
    display: block;
    width: 20px;
    height: 100%;
    background-image: url(/typo3conf/ext/beg_template/Resources/Public/Icons/muellarten/blaue-tonne.png);
    background-size: cover;
}

#terminausgabe .monthday .icon.icon_tannenbaum {
    display: block;
    width: 20px;
    height: 100%;
    background-image: url(/typo3conf/ext/beg_template/Resources/Public/Icons/muellarten/tannenbaeume.png);
    background-size: cover;
}

#terminausgabe .monthday .icon.icon_moved {
    font-weight: bold;
    color: #e2001a;
    font-size: 1.5rem;
    line-height: 1;
}

#terminausgabe #jahresansicht .monthday {
    display: flex;
    border-bottom: 1px solid #bbb !important;
    position: static;
    background: #efeff0;
    height: 25px;
    gap: 8px;
    padding: 2px 7px;
}

#jahresansicht .day {
    font-weight: bold;
    min-width: 20px;
}

#jahresansicht .weekday {
    border-bottom: none;
}

#jahresansicht .monthday img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

#jahresansicht .print-seitenumbruch {
    display: none;
}

div.autocomplete {
    position: absolute;
    width: 188px;
    padding: 5px;
    background-color: white;
    border: 1px solid #bbb;
    border-top: none;
    margin: 0;
    padding: 0;
}

div.autocomplete ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

div.autocomplete ul li.selected {
    background-color: #efeff0;
}

div.autocomplete ul li {
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 2px;
    cursor: pointer;
}

.field_with_errors {
    display: inline;
}

#unterseite {
    max-width: 1300px;
    margin: 0 auto;
}

.seite-abfuhrkalender .bild-slider {
    position: static;
}

.seite-abfuhrkalender .step {
    display: none;
}

.seite-abfuhrkalender #unterseite {
    padding: 30px 0;
}

.seite-abfuhrkalender #start_address input[type=text] {
    font-size: .9rem;
    display: block;
    width: 300px;
    box-sizing: border-box;
    padding: 5px 1em;
    border: 1px solid #616269;
    box-sizing: border-box;
    float: left;
    margin-bottom: 10px;
}

.seite-abfuhrkalender #start_address input#session_number {
    width: 70px;
    margin-left: 10px;
    font-size: .9rem;
}

.seite-abfuhrkalender #start_address .address_form {
    display: block;
}

.seite-abfuhrkalender #start_address br {
    clear: both;
}

.seite-abfuhrkalender #go_button input {
    cursor: pointer;
    background-color: #e2001a;
    color: #fff;
    padding: 15px 30px;
    border: 0;
    border-radius: 4px;
}

.seite-abfuhrkalender #search_result {
    margin-bottom: 30px;
}

.abfuhrkalender-footer,
.seite-abfuhrkalender .address_form {
    display: none;
}

.abfuhrkalender-navigation {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
    border-top: 1px solid #616269;
    border-bottom: 1px solid #616269;
    padding: 5px 0;
}

.abfuhrkalender-navigation>div {
    color: #e2001a;
    font-weight: bold;
}

.abfuhrkalender-navigation a {
    color: #393941;
    font-size: 1rem;
    letter-spacing: 0.015rem;
    font-weight: normal;
    text-decoration: none;
}

@media only screen and (max-width: 1350px) {
    #container_main {
        width: 1200px;
        margin: 0 auto;
    }

    #jahresansicht {
        flex-wrap: wrap;
        row-gap: 30px;
    }

    #jahresansicht .month {
        width: calc(100% / 6 - 5px);
    }
}

@media only screen and (max-width: 1200px) {
    #container_main {
        width: 964px;
        max-width: 92%;
    }
}

@media only screen and (max-width: 1023px) {
    #container_main {
        width: 100%;
        max-width: 92%;
    }

    .abfuhrkalender-navigation {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 767px) {
    #jahresansicht .month {
        width: calc(100% / 3 - 5px);
    }
}

@media only screen and (max-width: 479px) {
    #jahresansicht .month {
        width: 100%;
    }

    #terminausgabe #jahresansicht .monthday.no-collection {
        display: none;
    }

    #terminausgabe #jahresansicht .monthday .long {
        display: block;
    }

    #terminausgabe #jahresansicht .monthday .short {
        display: none;
    }

    #terminausgabe #jahresansicht .monthday .icon {
        order: 1;
    }

    #terminausgabe #jahresansicht .monthday .icon:first-child {
        width: 50px;
    }

    #terminausgabe #jahresansicht .monthday .weekday {
        order: 2;
    }

    #terminausgabe #jahresansicht .monthday .day {
        order: 3;
    }

    #terminausgabe .monthday .icon {
        background-size: 25px auto ! important;
        background-repeat: no-repeat;
    }
}