﻿
/*********** Calendar container ***********/

.calendar {
    border-style: solid;
    border-width: 1px;
    border-color: var(--grey);
    background-color: #FFF;
    cursor: default;
    color: #000;
}

    .calendar table {
    }

    .calendar td {
    }

/*********** Calendar month ***********/

.cal_title {
    background: var(--light-grey);
}

    .cal_title td {
        font-weight: bold;
        white-space: nowrap;
    }

.nextprev {
    cursor: pointer;
    height: 25px;
    vertical-align: middle;
    padding: 0px 5px 0px 5px;
}

/*********** Calendar weekday header ***********/

.month tr {
    display: flex;
    align-items: center;
    background: #fff;
}

.dayheader {
    width: 16px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    letter-spacing: 1.5px;
    border-width: 1px;
    border-color: #FFFFFF;
    border-style: solid;
    font-weight: bold;
    background-color: #fff;
    border-bottom: 1px solid #FFFFFF;
    padding: 3px 0px !important;
    margin: 0 12px;
    font-family: monospace;
    overflow: hidden;
    white-space: nowrap;
}


/*********** Calendar days ***********/

.day {
    width: var(--width-popup-days);
    height: var(--height-popup-days);
    line-height: var(--height-popup-days);
    cursor: default;
    text-align: center;
    background: #D6E0E9;
    border: 1px solid #fff;
    border-radius: 2px;
}

.dayhover {
    width: var(--width-popup-days);
    height: var(--height-popup-days);
    line-height: var(--height-popup-days);
    cursor: pointer;
    text-align: center;
    color: #fff;
    background-color: #3276B1;
    border: 1px solid #fff;
}

.selectedday {
    width: var(--width-popup-days);
    height: var(--height-popup-days);
    line-height: var(--height-popup-days);
    background-color: #3276B1;
    color: #FFFFFF;
    border: 1px solid #fff;
    font-weight: bold;
}

.selecteddayhover {
    width: var(--width-popup-days);
    height: var(--height-popup-days);
    line-height: var(--height-popup-days);
    background-color: #fff;
    color: #000;
    border: 1px solid #fff;
    font-weight: bold;
}

.othermonthday {
    color: #999;
    background-color: #fff;
}

.othermonthdayhover {
    color: #999;
}

/*********** Calendar dayWithoutCursor (no selection possible, read-only) ***********/

.cal_title_2 {
    background-color: #F2F2F2;
}

    .cal_title_2 td {
        font-weight: bold;
        white-space: nowrap;
    }

.dayWithoutCursor {
    width: 40px;
    height: 30px;
    line-height: 30px;
    cursor: default;
    text-align: center;
    background: #D6E0E9;
    border: 1px solid #fff;
    border-radius: 2px;
}

.outofrangeday {
    visibility: hidden;
}


.month {
    background-color: #e6ebf0;
    margin: 0 10px 10px 10px;
}

.Today {
    background-color: var(--dark-blue);
    color: #fff;
    font-weight: bold;
}

.Today_hover {
    background-color: #FFFFFF;
    border-color: #003366;
    color: #000000;
    font-weight: bold;
    border-width: 1px;
}
/*{
	background-color:#F0F5FC;
	border:1px solid #F0F5FC;
}
.Weekend_hover
{
	background-color:#9EB6D8;
	border-width:1px;
	border-color:#666666;
	border-style:solid;
	font-weight:bold;
}*/

/************************** CTL Calendar (access calendar and special day calendar) ************************/

.ctlcalendar {
    border: none;
    margin: auto;
}

/************************** CTL Calendar header ************************/

.ctltitle {
    margin-top: 10px;
    letter-spacing: 2px;
    background-color: #ccc;
    border-bottom: 3px solid #e9e9e9;
}

    .ctltitle TD {
        color: #000;
        font-weight: bold;
        /* padding: 3px 0; */
    }

.ctlnextprev {
    cursor: pointer;
}

.ctlmonth {
    border-collapse: collapse;
    /* border: solid 1px black; */
}

.ctldayheader {
    background-color: #cccccc;
    color: #504C39;
    font-weight: bold;
    text-align: center;
    padding: 2px;
    height: 25px;
    border: none;
}

    .ctldayheader td {
        padding: 10px;
    }

/***************** CTL Calendar days *****************/

.ctlday {
    width: 150px;
    height: 70px;
    text-align: right;
    vertical-align: top;
    font-weight: bold;
    color: #333;
    padding: 3px 3px 0 0;
    background-color: #FFFFFF;
    border: solid 3px #e9e9e9;
}

.ctlothermonthday {
    empty-cells: hide;
    color: #666;
    font-weight: bold;
    background-color: #f2f2f2;
}

.ctlselectedday {
    background-color: #3276B1;
    /* border-color: #D6E0E9; */
    border-width: 2px;
    color: #fff;
}

.ctlToday {
    background-color: #D6E0E9;
    color: #4567B5;
}

.ctlday div[style*="#FFE0C0"] { /* Saturday */
    box-shadow: 3px -3px 0px 3px #FFE0C0;
}

.ctlday div[style*="#F5BC78"] { /* Sunday */
    box-shadow: 3px -3px 0px 3px #F5BC78;
}

.ctlWeekend {
    /*background-color:#EEF2E1;*/
}

/***************** assume pane width *****************/
.ctlmonth2 /* .ctlmonth ändern */ {
    border-collapse: collapse;
    border: solid 1px black;
    width: 100%;
    height: 100%;
}

.ctlcalendar2 /* .ctlcalendar ändern */ {
    border: none;
    width: 100%;
    height: 100%;
}

.ctlcontent /* in .skin-Datei zuweisen als ContentCssClass für ctl_Calendar */ {
    width: 100%;
    height: 100%;
}
/********************* MultiMonth Calendar ***************/
.mmday {
    width: 24px;
    height: 24px;
    text-align: center;
    /*border-width:1px;
	border-color:#D4E6FE;
	border-style:solid;*/
}
/*.mmday div //nicht mehr nötig, über Zeilenhöhe 24px für template gelöst
{
	width:100%;
	height:100%;
}*/
.mmothermonthday {
    visibility: hidden;
    border-style: none;
    border-width: 0px;
}

.mmmonthtitle {
    text-align: center;
    /*border-bottom:1px solid #9eb6d8;*/
    background-color: #d4e6fe;
}

.mmtitle {
    background-color: #5E7CBF;
    background-image: url(Images/Calendar/title_bg2.gif);
    border: 1px solid black;
    border-bottom-width: 0px;
}

    .mmtitle TD {
        color: #000000;
        font-weight: bold;
        padding-top: 1px;
        padding-bottom: 1px;
    }

.mmdayheader {
    background-color: #9eb6d8;
    background-image: url(Images/Calendar/header_bg2.gif);
    background-repeat: repeat-x;
    color: #504C39;
    font-weight: bold;
    text-align: center;
    border-bottom: solid 1px #9eb6d8;
    /*  border-right:solid 1px #9eb6d8;*/
    padding: 2px;
    height: 22px;
}

    .mmdayheader td {
        padding: 10px;
    }

.mmToday {
    background-color: #d4e6fe;
    color: #000000;
}
/****************** test wg. Access Calendar, Hoehe und Breite aufziehen ****************/
.FullSizeRed {
    width: 100%;
    height: 100%;
    border: solid 5px red;
    background-color: pink;
}

.FullSizeGreen {
    width: 100%;
    height: 100%;
    border: solid 5px green;
    background-color: lightgreen;
}
