/* CSS FÜR DEN STANDART-KALENDER - alles !important */



body {
    background-color:       #E7FA8E !important;
    font-family:           "Main_Light"   !important;
}



button, button:hover {
    opacity: 1 !important;
}

.main_frame {
        box-sizing:         border-box;
        position:           relative;
        height:             auto;
        margin-left:        auto;          /* Box-Ausrichtung auf der Seite  */
        margin-right:       auto;
        background:         transparent     !important;
        padding:            10px;
        justify-content:    center          !important;       /* horizontal zentrieren */
        align-items:        center          !important;       /* vertikal zentrieren */
}

    .calendar {
        background-color:   #FFFFFF   !important;
        width:              600px;
        height:             auto;
        margin-left:        auto;          /* Box-Ausrichtung auf der Seite  */
        margin-right:       auto;
    }

    .order {
        justify-content:    space-between;
        width:              700px;
        height:             auto;
        margin-left:        auto;          /* Box-Ausrichtung auf der Seite  */
        margin-right:       auto;
        background-color:   hsl(47, 30%, 91%) !important;
    }


    .control {
        justify-content:    space-between;
        width:              700px;
        height:             auto;
        margin-left:        auto;          /* Box-Ausrichtung auf der Seite  */
        margin-right:       auto;

    }


.week_row {
    box-sizing:         border-box;
    width:              100%;
    margin:             0;         /* Gegebenenfalls NUR über die Buttons regeln  */
    padding:            0;
    display:            flex;
    justify-content:    left;                    /*    Hier wird der Calender entweder links ider mittig ausgerichtet  */

/*  justify-content: flex-start !important;       Hier: Links anneinander reihen via flex  */
/*  justify-content: space-between;              Hier: Gleichmäßig verteilen via flex  */
    }

    .monat_name {
        pointer-events:     none                    !important;
        font-family:        "Main_Regular"                  !important;
        font-weight:        700                     !important;
        font-size:          16pt                    !important;
        line-height:        1                       !important;
        padding:            35px 5px 5px 5px    !important;
        color:              #FF8205             !important;

    }



/* BUTTON KALENDERTAG ################################################################  */

.daybutton {
    box-sizing:         content-box         !important;
    position:           relative            !important;
    display:            flex                !important;       /* aktiviert Flexbox */
    justify-content:    center              !important;       /* horizontal zentrieren */
    align-items:        center              !important;       /* vertikal zentrieren */
    text-align:         center              !important;

    width:              70px                !important;
    height:             70px                !important;
    margin:             5px                 !important;      /* Abstand der Buttons durch Margin */

    font-family:        "Main_Medium"       !important;


    border-radius:      40px                !important;
}

    .normal {
        color:              #FFFFFF         !important;
        background-color:   #098CD7   	    !important;


    }

    .daybutton.normal:hover {
        left: 1px !important;
        top: 1px !important;
        box-shadow:         inset 2px 2px 4px 0px #000000 !important;
        font-family:        "Main_Medium"       !important;
        text-shadow:        2px 2px 2px #828282        !important;

    }

/*
.daybutton:hover {

        position:relative;
        cursor:pointer;
        margin:0 auto;
        overflow:hidden;
        transform:translateZ(0)

        }

.daybutton:hover:before {
    border-radius:50%;
    content:"";
    position:absolute;
    top:0; left:0;
    width:inherit;
    height:inherit;
    box-shadow:
            inset 16px 0 0 hsla(0, 0%, 100%, 0.8),
            inset 0 16px 0 hsla(240,50%,40%,0.8),
            inset -16px 0 0 hsla(300,50%,40%,0.5),
            inset 0 -16px 0 hsla(60,50%,40%,0.5);
    transition:box-shadow 2s
}
*/




    .wtag {
        pointer-events:     none            !important;
        font-family:        "Main_Light"    !important;
        font-weight:        200             !important;
        font-size:          16pt            !important;
        letter-spacing:     1px             !important;
        color:              #286695         !important;
        border-color:       transparent     !important;
    }


    .past {
        pointer-events:     none            !important;
        color:              #CCCCCC         !important;
        border-color:       #FFFFFF         !important;
        }

    .close {
        pointer-events:     none            !important;
        color:              #ADADAD         !important;
        border-color:       transparent     !important;
        background-color:   #E6E6E6   	    !important;
        }

    .feiertag {
        pointer-events:     none            !important;
        color:              #ADADAD         !important;
        border-color:       transparent     !important;
        background-color:   #E6E6E6   	    !important;
        }

    .betriebsferien {
        pointer-events:     none            !important;
        color:              #CCCCCC         !important;
        border-color:       #ADADAD         !important;
        background-color:   #FFFFFF   	    !important;
        }

    .too_late, .too_late:hover {
        pointer-events:                     !important;
        color:              #FFFFFF         !important;
        border-color:       transparent     !important;
        background-color:   #B1DAF1         !important;
        }

    .heute {
        pointer-events:     none            !important;
        color:              #FFFFFF         !important;
        border-color:       transparent     !important;
        background-color:   #90E65B   	    !important;
        }


    .special {
        color:              #C20081         !important;
        border-color:       #C20081         !important;
        background-color:   #FFFFFF   	    !important;
    }

    .leer {
        pointer-events:     none            !important;
        border-color:       transparent     !important;
        background-color:   transparent     !important;
    }



.tag_nr {
    line-height:        1                       !important;
    font-size:          16pt                    !important;
    border:             1px solid transparent   !important;
    font-weight:        200                     !important;
}




.why_txt {

    position:           absolute        !important;
    bottom:             -3px            !important;

    box-sizing:         border-box          !important;
    display:            flex                !important;       /* aktiviert Flexbox */
    justify-content:    center              !important;       /* horizontal zentrieren */
    align-items:        center              !important;       /* vertikal zentrieren */
    text-align:         center              !important;

    font-family:        "Condensed"     !important;
    font-size:          7pt             !important;
    font-weight:        300             !important;
    text-transform:     none            !important;
    color:              #C20081         !important;
    background-color:   #FFFFFF         !important;
    padding:            0px 5px 0px 5px !important;
    border:             1px solid #DE4FAE !important;
    border-radius:      10px            !important;

}

.special {
    color:              #C20081         !important;
    background-color:   #FFFFFF         !important;
    }

.heute_txt {
    position:           absolute        !important;
    bottom:             0.5em             !important;
    font-size:          10pt             !important;
    font-weight:        200             !important;
    line-height:        1               !important;
    text-transform:     none            !important;
    color:              #FFFFFF         !important;
}



/* EXTRA PINS ##################################################################################### */


.pin_uhr {
    position:           absolute        !important;
    left:               0px             !important;
    top:                -5px            !important;
    width:              28px            !important;
    height:             28px            !important;
    background-repeat:  no-repeat       !important;
    background-size:    cover           !important;
    background-image:   url(../../images/pin_clockA.png)     !important;
}


.pin_dhl {
    position: absolute      !important
    left: 0px               !important;
    top: 0px                !important;
    width: 25px             !important;
    height: 25px            !important;
    background-image: url(../../images/pin_versand.png)     !important;
    background-repeat: no-repeat                            !important;
    background-size: cover                                  !important;

}


/* TOOLTIPS POSITION & FARBE    ##################################################################################### */

.tip_area {                   /* Tooltip text */
    position:   absolute    !important;
    top:        0           !important;
    left:       0           !important;
    width:      60px        !important;
    height:     60px        !important;
    opacity:    1           !important;
    z-index:    1           !important;

    display:            flex                !important;       /* aktiviert Flexbox */
    justify-content:    center              !important;       /* horizontal zentrieren */
    align-items:        center              !important;       /* vertikal zentrieren */
    text-align:         center              !important;
    }

.tooltip .tooltiptext {
    box-sizing:         border-box  !important;
    display:            flex        !important;       /* aktiviert Flexbox */
    justify-content:    center      !important;       /* horizontal zentrieren */
    align-items:        center      !important;       /* vertikal zentrieren */
    text-align:         center      !important;

    position:           absolute    !important;
    top:                50px        !important;

    width:              6em         !important;
    padding:            5px         !important;

    font-family:        "Condensed" !important;
    font-size:          10pt        !important;
    line-height:        1.2         !important;
    border-radius:      6px         !important;
    opacity:            1           !important;

    visibility:         hidden      !important;
    }

    .tooltiptext {
        color:              #ffffff     !important;
        background-color:   #D60024     !important;
        text-transform:     none        !important;

    }

    .tooltiptext.dhl {
        color:              #000000     !important;
        background-color:   #FF7F16     !important;
    }


/* Tooltip arrow */
.tooltip .tooltiptext::after {
    position:               absolute        !important;
    top:                    -25px           !important;
    left:                   calc(50% - 20px) !important;
    content:                " "             !important;

    border-width:           16px            !important;
    border-style:           solid           !important;
    border-color:           transparent     !important;
    border-bottom-color:    #D60024         !important;

}

/* The tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible             !important;

}







@media (max-width: 643px) {

    .main_frame {
        width:          100%    !important;
        }

    .calendar,
    .order,
    .control    {
        width:          100%    !important;
        margin:         0       !important;
        }

    .wtag       {

        }



    .daybutton,
    .leer       {
        box-sizing:     border-box  !important;
        width:          12vw        !important;
        height:         12vw        !important;
        margin:         0px 0px 3px 3px     !important;      /* Abstand der Buttons durch Margin */
        }

    .tag_nr     {

        }

    .why_txt    {
           font-size:    6pt    !important;
        }

    .heute_txt  {
         font-size:          7pt             !important;
        }

    .pin_uhr    {
        top:             -10px  !important;
        left:           -10px  !important;
        width:           25px   !important;
        height:          25px   !important;
        }


}