/* Piilottaa datepicker-ikkunan aluksi */
.wizard-datepicker {
    max-width: 20em;
    /*border: 1px solid #777;*/
}

.wizard-datepicker-window {
    position: absolute;
    padding: 1.5em;
    font-family: 'Bartina', sans-serif;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 6px 20px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    background: #fff;
    z-index: 1000;
}

@font-face {
    font-family: "Bartina";
    src: url('fonts/BartinaRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.datepicker-window {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    z-index: 9999;
}

.datepicker-window .datepicker-header {
    display: flex;
    flex-direction: column;
}

.icon-link {
    display: inline-block;
    width: 24px; /* Or whatever size you desire */
    height: 24px;
}


.icon-link img {
    width: 100%;
    height: 100%;
    display: block;
}

.arrow-left {
    background: url('images/left_arrow.svg') no-repeat center center;
    background-size: contain;
    color: red;
}

.arrow-right {
    background: url('images/right_arrow.svg') no-repeat center center;
    background-size: contain;
}

.datepicker-header {
    display: flex;
    flex-direction: column;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.datepicker-header > div.control-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.datepicker-header > div.control-container div.flex-1 {
    flex: 1;
}

.datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Luo seitsemän saman levyistä saraketta */
    gap: 0px; /* Väli rivien ja sarakkeiden välillä */
}

.datepicker-grid span {
    display: inline-block; /* Ensures width and height are applied */
    width: 30px; /* Width of each day */
    height: 30px; /* Height of each day */
    line-height: 30px; /* Vertically center the text */
    text-align: center; /* Horizontally center the text */
    border-radius: 50%; /* Makes it circular */
    line-height: 2em;
    transition: background-color 0.3s ease; /* Smooth transition effect */
}

/* Korosta viikonloput eri värillä */
/*
.datepicker-grid > span:nth-child(7n+6),
.datepicker-grid > span:nth-child(7n+7) {
    background-color: #f0f0f0;
}*/


/* Style for the selected date */
.datepicker-grid span.selected-date {
    background-color: orange;
    color: white; /* Change text color to white for better visibility */
    outline: none;
}

/* Hover style for each day in the calendar grid */
.datepicker-grid span:hover {
    background-color: rgba(255, 165, 0, 0.7); /* Oranssi väri 70% läpinäkyvyydellä */
    color: white; /* Tekstin väri valkoiseksi paremman näkyvyyden varmistamiseksi */
}

.datepicker-grid span.no-highlight:hover {
    background-color: transparent !important;
    color: black !important;
}

/* Style for the selected date remains the same */
.datepicker-grid span.selected-date {
    background-color: orange;
    color: white;
}

.text-bold {
    font-weight: bold;
}

.value-month {
    text-transform: uppercase;
}

.text-uppercase {
    text-transform: uppercase;
}