/* UPOTUS ASETUKSET */
viihdekalenteri-embed-container{
    display: block;
    min-height: 630px;
}
viihdekalenteri-embed-container viihdekalenteri .sitelogo,
viihdekalenteri-embed-container viihdekalenteri-close {
    display: none;
}
viihdekalenteri-embed-container viihdekalenteri-bg {
    padding-top: 25px;
}
viihdekalenteri-embed-container viihdekalenteri {
    padding-bottom: 45px;
    min-height: 550px;
}

/* KOKOSIVUN VIIHDEKALENTERI */
body.template-viihdekalenteri {
    min-width: 320px;
}
.template-viihdekalenteri footer {
    margin-top: 0px;
}

/* TAUSTA */
viihdekalenteri-bg{
    display: block;
    position: relative;
    background-image: url('/templates/matkapojat2018/img/viihdekalenteri/viihdekalenteri-bg.png');
    background-color: rgb(60, 143, 183);
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 12px;
}

/* PERUSRAKENNE */
viihdekalenteri{
    display: block;
    position: relative;
    width: 1140px;
    min-height: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 60px;
}
viihdekalenteri-top-bar{
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    margin-top: 12px;
}
viihdekalenteri side-control-area{
    display: block;
    width: 320px;
    max-width: 290px;
    padding: 25px; 
} 
viihdekalenteri main-area {
    margin: 0px 0px 0px 15px;
    padding-bottom: 12px;
    width: 100%;
}
viihdekalenteri viihdekalenteri-main-areas{
    display: flex;
    flex-direction: row;
    background: white;
    padding-top: 13px;
    padding-right: 15px;
    border-radius: 0px 18px 18px 18px;
    z-index: 3;
    position: relative;
}
viihdekalenteri top-control-area{
    display: flex;
    flex-direction: row;
    background: rgb(60, 143, 183); 
    color: white;
    border-radius: 0px 18px 0px 0px;
}
viihdekalenteri top-control-area.desktop-only {
    display: flex;
}
viihdekalenteri bar-element{
    display: inline-block;
    padding: 15px;
}
viihdekalenteri events-area{
    width: 100%; 
}

/* YLÄOSA */
viihdekalenteri .sitelogo {
    height: 13px;
    width: auto;
}
viihdekalenteri h2 {
    display: block;
    margin-top: 0px !important;
    border: 1px solid #ffffff;
    width: 262px;
    padding-top: 8px;
    text-align: center;
    color: #ffffff !important;
    border-radius: 18px 18px 0px 0px;
    border-bottom: none !important;
    margin-bottom: 0px !important;
}
viihdekalenteri:last-child bar-element.haku {
    position: relative;
}
viihdekalenteri bar-element.haku click-box {
    display: block;
    width: 24px;
    height: 24px;
    top: 15px;
    right: 15px;
    position: absolute;
    cursor: pointer;
    background-color: transparent;
}

/* SIVUPALKKI */
viihdekalenteri side-control-area h3 {
    font-weight: 600;
    font-size: 17px;
    color: #3c8fb7;
    border-bottom: 1px solid #3c8fb7;
    padding-bottom: 7px;
    margin-bottom: 20px !important;
}
.template-varaamo viihdekalenteri .select2-container,
viihdekalenteri .select2-container {
    width: 212px !important;
}
viihdekalenteri .select2-container .select2-selection--single .select2-selection__rendered {
    border: 1px solid #3ebfed;
    height: 28px;
    line-height: 28px;
}
viihdekalenteri .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 1px;
}
viihdekalenteri side-control-area h3.tapahtumatyylit {
    margin-top: 36px;
}
viihdekalenteri side-control-area p {
    font-size: 12px;
}

/* Napit */
.viihdekalenteri-event-type-viihde{
    background-color: rgb(238, 91, 191);
}
.viihdekalenteri-event-type-perhe{
    background-color: rgb(76, 235, 233);
}
.viihdekalenteri-event-type-kulttuuri{
    background-color: rgb(26, 188, 156);  
}
.viihdekalenteri-event-type-teemat{
    background-color: rgb(179, 130, 205); 
}
viihdekalenteri select-type-button{
    display: block;
    border-radius: 20px;
    margin: 16px 0px;
    text-align: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 4px 0px;
    cursor: pointer;
}
.template-varaamo viihdekalenteri select-type-button {
    width: 100%;
}
viihdekalenteri select-type-button:hover {
    opacity: 0.7;
}
viihdekalenteri select-type-button.selected {
    -webkit-box-shadow: inset 0px 5px 5px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0px 5px 5px 2px rgba(0,0,0,0.4);
    box-shadow: inset 0px 5px 5px 2px rgba(0,0,0,0.4);
}
.viihdekalenteri-event-type {
    display: block;
    margin-top: 0px;
    margin-right: 4px;
    width: 12px;
    min-width: 12px;
    height: 12px;
    border-radius: 3px;
}
events-bottom-nav {
    position: relative;
    padding: 50px 50px 30px !important;
}
events-bottom-nav go-back:hover, events-bottom-nav go-back:active,
events-bottom-nav go-forward:hover, events-bottom-nav go-forward:active {
    -webkit-box-shadow: inset 3px 3px 5px -2px rgba(0,0,0,0.6);
    -moz-box-shadow: inset 3px 3px 5px -2px rgba(0,0,0,0.6);
    box-shadow: inset 3px 3px 5px -2px rgba(0,0,0,0.6);
    opacity: 0.7;
    color: #ffffff !important;
}
events-bottom-nav go-back,
events-bottom-nav go-forward {
    letter-spacing: 1px;
    display: block;
    position: absolute;
    bottom: 20px;
    text-decoration: none;
    margin: 0;
    font-weight: bold;
    font-size: 13px;
    color: #ffffff;
    cursor: pointer;
    border-radius: 16px;
    width: auto;
    height: auto;
}
events-bottom-nav go-back {
    background: #3ebfed url('../img/hakanen_white_left.png') no-repeat left 13px center;
    padding: 4px 20px 4px 30px;
    left: 0px;
}
events-bottom-nav go-forward {
    background: #3ebfed url('../img/hakanen.png') no-repeat right center;
    padding: 4px 30px 4px 20px;
    right: 0px;
}

/* MAIN AREAS */

/* Sulje nappi */
viihdekalenteri-close {
    margin-top: 11px;
    margin-right: 4px;
    margin-bottom: -12px !important;
}
viihdekalenteri-close a {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 130px;
    background-color: #022860;
    border-radius: 14px 14px 0px 0px;
    color: #ffffff !important;
    text-align: center;
    text-decoration: none;
    padding: 6px 0px;
    font-size: 13px;
    height: 35px;
}
viihdekalenteri-close bottom-line,
viihdekalenteri-close fake-white {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 130px;
    background-color: #022860;
    height: 12px;
    margin-top: -1px;
}
viihdekalenteri-close fake-white {
    background-color: #ffffff;
    border-radius: 0px 18px 0px 0px;
    width: 132px;
    height: 13px;
}
viihdekalenteri-close ruksi {
    padding-left: 7px;
}
viihdekalenteri-close a:hover {
    opacity: 0.7;
}
viihdekalenteri-close .desktop-only {
    display: inline-block;
}

/* Yläpalkin hallinta-alue */
viihdekalenteri top-control-area {
    font-size: 13px;
    font-weight: 600;
    height: 52px;
}
viihdekalenteri bar-element {
    border-right: 1px solid #5398b8;
    border-left: 2px solid #3d85a7;
    background-repeat: no-repeat;
    background-position: center left 16px;
}
viihdekalenteri:last-child bar-element.haku {
    border-right: none;
}
viihdekalenteri bar-element.tab-selector {
    cursor: pointer;
    padding-left: 50px;
}
viihdekalenteri .navi-nuoli {
    background: transparent url('../img/navi-auki-nuoli.png') no-repeat center bottom;
    margin-top: 16px;
    margin-bottom: -24px;
    margin-left: -17px;
    width: 100%;
    height: 9px;
    display: none;
}
viihdekalenteri bar-element.tab-selector.selected,
viihdekalenteri bar-element.tab-selector:hover {
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 51px;
    margin-top: -3px;
    margin-bottom: -3px;
    background-color: #3ebfed;
    border-right: 1px solid rgba(2, 40, 96,0.1);
    border-left: 1px solid rgba(255,255,255,0.1);
}
viihdekalenteri bar-element.tab-selector.selected .navi-nuoli,
viihdekalenteri bar-element.tab-selector:hover .navi-nuoli {
    display: block;
}
viihdekalenteri bar-element.kuukausi {
    background-image: url('/templates/matkapojat2018/img/viihdekalenteri/kuukausi.png');
}
viihdekalenteri bar-element.lista {
    background-image: url('/templates/matkapojat2018/img/viihdekalenteri/lista.png');
}
viihdekalenteri bar-element.viikko {
    background-image: url('/templates/matkapojat2018/img/viihdekalenteri/viikko.png');
}
viihdekalenteri bar-element:last-child {
    /* width: 100%; */
    flex-grow: 1;
}
viihdekalenteri  bar-element input.viihdekalenteri-search {
    float: right;
    background: #ffffff url('/templates/matkapojat2018/img/viihdekalenteri/search.png') no-repeat center right;
    padding: 0px 32px 0px 5px;
    border: 0px;
    height: 24px;
}

/* KUUKAUSI-NÄKYMÄ */
.infosivu-popup viihdekalenteri tbody {
    display: table-row-group;
}
viihdekalenteri events-bottom-nav.bottombar-state-kuukausi {
    display: none !important;
} 
events-top-nav{
    display: flex;
    flex-direction: row;
    background: white; 
    color: rgb(62, 191, 237);
    justify-content: space-between;
}
events-container{
    display:none;
}
events-container.selected{
    display: block; 
}

/* Kuukauden vaihto */
events-top-nav {
    border: 1px solid #3ebfed;
}
events-time-header {
    font-size: 24px;
    line-height: 56px;
}
go-back, go-forward {
    background-repeat: no-repeat;
    background-position: center center;
    width: 60px;
    height: 56px;
    cursor: pointer;
}
go-back {
    background-image: url('/templates/matkapojat2018/img/viihdekalenteri/edellinen.png');
}
go-forward {
    background-image: url('/templates/matkapojat2018/img/viihdekalenteri/seuraava.png');
}

/* Kalenteri taulu */
.template-varaamo viihdekalenteri .ui-datepicker {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
viihdekalenteri .ui-datepicker table {
    margin-bottom: 0px;
}
viihdekalenteri .ui-widget.ui-widget-content {
    border: 0px;
}
viihdekalenteri .ui-datepicker-header{
    display: none;
} 
viihdekalenteri .ui-datepicker-inline{
    width: 100%; 
}
viihdekalenteri events-container.state-kuukausi.state-week-override .ui-datepicker-calendar tbody tr{
    display: none; 
} 
viihdekalenteri events-container.state-kuukausi.state-week-override .ui-datepicker-calendar td>div{
    min-height: 440px; 
}
viihdekalenteri events-container .ui-datepicker-calendar tbody tr.selected-week{
    display: table-row !important;  
}
viihdekalenteri events-container .ui-datepicker-calendar h4{
    margin-top: 0px;
    margin-bottom: 0px;
    background: rgb(232, 232, 232); 
}
viihdekalenteri events-container .ui-datepicker-calendar td{
    min-height: 90px;
    vertical-align: top;
    width: 14.28%;
    padding: 0px;
    border: 1px solid rgb(62, 191, 237); 
}
viihdekalenteri events-container .ui-datepicker-calendar td>div{
    min-height: 90px;
    max-height: 90px;
    overflow: hidden;
}
viihdekalenteri .ui-datepicker td.ui-datepicker-current-day, 
viihdekalenteri .ui-datepicker td:not(.ui-datepicker-unselectable):hover {
    background: transparent !important;
}
viihdekalenteri events-container .ui-datepicker-calendar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
viihdekalenteri events-container .ui-datepicker-calendar ul li {
    list-style-type: none;
    font-size: 11px; 
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    width: 115px;
}
viihdekalenteri events-container .ui-datepicker-calendar .viihdekalenteri-calendar-item-row {
    display: flex;
    flex-direction: row;
    padding: 4px 4px 4px 6px; 
    line-height: 120%;
    cursor: pointer;
    width: 90%;
}
viihdekalenteri events-container .ui-datepicker-calendar .viihdekalenteri-calendar-item-row:hover {
    opacity: 0.7;
}
viihdekalenteri .ui-datepicker th {
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    background-color: #3ebfed;
    font-size: .8em;
    font-weight: normal;
    color: #ffffff;
    padding: 0px;
}
viihdekalenteri .ui-datepicker th:first-child {
    border-left: 1px solid #3ebfed !important;
}
viihdekalenteri .ui-datepicker th:last-child {
    border-right: 1px solid #3ebfed !important;
}
viihdekalenteri .ui-datepicker {
    padding: 0;
}
viihdekalenteri .ui-datepicker h4 {
    font-size: 10px;
    font-weight: normal;
    text-align: center;
}
viihdekalenteri x.weekday, viihdekalenteri x.month {
    display: none;
}

/* LISTA-NÄKYMÄ */
viihdekalenteri day-header-bar{ 
    display: block;
    text-align: center; 
    background: rgb(62, 191, 237);
    margin-top: 0px;
    margin-bottom: 0px;
    color: #ffffff;
    font-weight: bold;
}
viihdekalenteri-list-item{
    display: block;
    position: relative;
    border-left: 1px solid rgb(62, 191, 237); 
    border-right: 1px solid rgb(62, 191, 237); 
}
viihdekalenteri-list-item:last-child {
    border-bottom: 1px solid rgb(62, 191, 237);
}
viihdekalenteri  viihdekalenteri-list-item .time {
    display: none;
}
viihdekalenteri-list-item responsive-container-helper{
    display: block;
    position: relative; 
    min-height: 137px; 
    padding: 25px 15px 50px 310px; 
} 
viihdekalenteri-list-item img{
    max-width: 235px;
    position: absolute;
    left: 25px;
    top: 25px; 
}
viihdekalenteri type-color-element{
    display: block;
    margin-top: 0px;
    margin-right: 4px;
    width: 12px;
    height: 12px;
    border-radius: 3px; 
}
viihdekalenteri .state-lista type-color-element {
    margin-bottom: -12px;
    margin-left: -18px;
}
viihdekalenteri .state-lista h3 {
    font-size: 12px;
    margin: 0px 0px 2px;
    font-weight: 600;
}
viihdekalenteri .state-lista responsive-container-helper,
viihdekalenteri .state-lista responsive-container-helper p {
    font-size: 12px;
    line-height: 140%;
}
viihdekalenteri .state-lista responsive-container-helper p {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
}
viihdekalenteri laiva-lahto, viihdekalenteri laiva-paluu,
viihdekalenteri laiva-nimi, viihdekalenteri laiva-reitti {
   display: inline-block;
   width: 35%;
   max-width: 45%;
   margin-right: 5%;
}
viihdekalenteri laiva-nimi, viihdekalenteri laiva-reitti {
   margin-bottom: 13px;
}
viihdekalenteri .state-lista .varaa {
    position: absolute;
    right: 20px;
    bottom: 20px;
}
viihdekalenteri .state-lista bottom-line {
    height: 1px;
    background-color: #3ebfed;
    display: block;
    margin: 0px 20px -1px 25px;
    width: auto;
}

/* VIIKKO NÄKYMÄ */
viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .viihdekalenteri-calendar-item-row {
    height: 38px;
    width: 120px;
    border-bottom: 1px solid #dcf3fc;
    display: table-cell; 
    vertical-align: middle; 
    overflow: hidden;
}
viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .viihdekalenteri-calendar-item-row .viihdekalenteri-event-type {
    display: none;
}
viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .viihdekalenteri-calendar-item-row div {
    padding: 0px 0px 0px 19px;
}
viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .type-perhe .viihdekalenteri-calendar-item-row div {
    background: url('/templates/matkapojat2018/img/viihdekalenteri/perhe.png') no-repeat left top 1px;
}
viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .type-viihde .viihdekalenteri-calendar-item-row div {
    background: url('/templates/matkapojat2018/img/viihdekalenteri/viihde.png') no-repeat left top 1px;
}
viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .type-kulttuuri .viihdekalenteri-calendar-item-row div {
    background: url('/templates/matkapojat2018/img/viihdekalenteri/kulttuuri.png') no-repeat left top 1px;
}
viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .type-teemat .viihdekalenteri-calendar-item-row div {
    background: url('/templates/matkapojat2018/img/viihdekalenteri/teemat.png') no-repeat left top 1px;
}

/* POP UP */
.template-infosivu .mfp-bg.mp-viihdekalenteri-popup {
    opacity: 0.7;
}
viihdekalenteri-popup{
    display: block;
    position: relative; 
    width: 560px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    background: white;
    border-radius: 25px; 
}
.mp-viihdekalenteri-popup .mfp-close {
    background: url('/templates/matkapojat2018/img/viihdekalenteri/viihdekal-close.png') no-repeat center center;
    width: 24px;
    height: 24px;
    color: transparent;
    margin: -8px -8px 0px 0px;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
    border-radius: 4px;
    opacity: 1 !important;
}
.mp-viihdekalenteri-popup .mfp-close:hover {
    opacity: 0.7 !important;
}
.mp-viihdekalenteri-popup h3 {
    border-radius: 25px 25px 0px 0px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    padding: 10px;
    margin-bottom: 18px;
}
.mp-viihdekalenteri-popup h3.type-color-kulttuuri {
    background-color: #1abc9c;
}
.mp-viihdekalenteri-popup h3.type-color-viihde {
    background-color: #ee5bbf;
}
.mp-viihdekalenteri-popup h3.type-color-perhe {
    background-color: #4cebe9;
}
.mp-viihdekalenteri-popup h3.type-color-teemat {
    background-color: #b382cd;
}
viihdekalenteri-popup text-area {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 18px 0px 25px;
    display: block;
    max-height: 320px;
    overflow: hidden;
}
viihdekalenteri-popup img {
    float: right;
    max-width: 245px; 
    margin: 0px 0px 13px 18px;
}
viihdekalenteri-popup laiva-lahto, viihdekalenteri-popup laiva-paluu, 
viihdekalenteri-popup laiva-nimi, viihdekalenteri-popup laiva-reitti, 
viihdekalenteri-popup p, viihdekalenteri-popup a {
    display: block;
}
viihdekalenteri-popup laiva-lahto, viihdekalenteri-popup laiva-paluu, 
viihdekalenteri-popup laiva-nimi, viihdekalenteri-popup laiva-reitti {
    color: #3c8fb7;
    font-weight: 600;
    width: 260px;
}
viihdekalenteri-popup laiva-reitti {
    margin-bottom: 22px;
}
viihdekalenteri-popup a.varaa {
    background: rgba(0, 176, 123, 1) url('../img/hakanen.png') no-repeat right center;
    padding: 4px 30px 4px 20px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff !important;
    display: inline-block;
    position: absolute;
    bottom: 25px;
    right: 25px;
}
viihdekalenteri-popup .label {
    width: 66px;
    display: inline-block;
}
viihdekalenteri-popup .time {
    display: none;
}


infosivu-override-popup{
    display: block;
    z-index: 2000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);	
    -webkit-transform: translate(-50%, -50%);
}
infosivu-override-popup-close{
    position: absolute;
    z-index: 2001; 
    right: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    background: red; 
}
infosivu-override-popup viihdekalenteri-popup{
    border: 4px solid rgb(62, 191, 237); 
}
alareuna-text {
    position: absolute;
    left: 24px;
    bottom: 6px;
    font-size: 12px;
}

/* TABLETTIKOOT */
@media all and (max-width: 1200px) {

    /* RAKENNE */
    viihdekalenteri {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;  
        box-sizing: border-box;
        padding-left: 35px;
        padding-right: 35px;
    	width: 100%;
    }
    viihdekalenteri side-control-area {
    	width: 25%;
    	padding: 0px 10px 22px;
    }
    .template-varaamo viihdekalenteri .select2-container,
    viihdekalenteri .select2-container {
    	width: 100% !important;
    }
    viihdekalenteri main-area {
    	margin: 0px 0px 0px 5px;
    }
    viihdekalenteri-close a {
    	height: 33px;
    }
    viihdekalenteri select-type-button {
    	font-size: 13px;
    }
    viihdekalenteri events-container .ui-datepicker-calendar ul li {
    	width: 100px;
    }

    /* LISTA NÄKYMÄ */
    viihdekalenteri-list-item img {
    	max-width: 185px;
    	left: 20px;
    	top: 20px;
    }
    viihdekalenteri-list-item responsive-container-helper {
    	padding: 20px 15px 50px 240px;
    }

}
@media all and (max-width: 1000px) {

    /* RAKENNE */
    viihdekalenteri bar-element {
    	padding: 15px 12px;
    }
    viihdekalenteri side-control-area h3 {
    	font-size: 14px;
    }
    
    /* HAKU-KENTTÄ */
    viihdekalenteri bar-element input.viihdekalenteri-search {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	width: 90%;
    }

    /* KUUKAUSI NÄKYMÄ */
    viihdekalenteri events-container .ui-datepicker-calendar ul li {
    	width: 80px;
    }

    /* VIIKKO NÄKYMÄ */

    /* Taulukon solujen sisältö */
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .viihdekalenteri-calendar-item-row div {
    	background-image: none !important;
    }
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .viihdekalenteri-calendar-item-row div {
    	padding: 0px 0px 0px 0px;
    }
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .viihdekalenteri-calendar-item-row .viihdekalenteri-event-type {
    	display: block;
	width: 44px;
	height: 6px;
    }

    /* Väri tyypit */
    .state-week-override .viihdekalenteri-event-type-viihde{
    	background-color: rgb(238, 91, 191) !important;
    }
    .state-week-override .viihdekalenteri-event-type-perhe{
    	background-color: rgb(76, 235, 233) !important;
    }
    .state-week-override .viihdekalenteri-event-type-kulttuuri{
    	background-color: rgb(26, 188, 156) !important;  
    }
    .state-week-override .viihdekalenteri-event-type-teemat{
    	background-color: rgb(179, 130, 205) !important; 
    }

}
@media all and (max-width: 900px) {

    /* RAKENNE */
    viihdekalenteri side-control-area h3 {
    	font-size: 13px;
    }
    viihdekalenteri select-type-button {
    	font-size: 11px;
    }

    /* HAKU-KENTTÄ */
    viihdekalenteri bar-element input.viihdekalenteri-search {
    	width: 100%;
    }

}

/* VAIN MOBIILI */
@media all and (max-width: 799px) {
    
    /* TAUSTA JA KEHYS */
    viihdekalenteri {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;  
        box-sizing: border-box;
        padding-left: 23px;
        padding-right: 23px;
    	width: 100%;
    }
    viihdekalenteri-bg {
        padding-top: 9px;
    }
 
    /* YLÄ OSA */
    viihdekalenteri .sitelogo {
    	height: 11px;
    }
    viihdekalenteri-top-bar {
    	margin-top: 7px;
	height: 32px;
    }
    viihdekalenteri h2 {
	padding: 3px;
        font-weight: 400 !important;
	height: 25px;
	border-radius: 8px 8px 0px 0px;
	width: 70%;
	max-width: 200px;
    }

    /* SULJE RUKSI */
    viihdekalenteri-close {
   	margin-right: 2px;
    }
    viihdekalenteri-close a {
    	height: 22px;
   	padding: 0px;
	border-radius: 8px 8px 0px 0px;
    }
    viihdekalenteri-close ruksi {
    	padding-left: 0px;
    }
    viihdekalenteri-close .desktop-only {
    	display: none;
    }
    viihdekalenteri-close a,
    viihdekalenteri-close bottom-line, viihdekalenteri-close fake-white {
	width: 60px;
    }
    viihdekalenteri-close fake-white {
    	border-radius: 0px 8px 0px 0px;
	width: 62px;
    }

    /* VALKOINEN POHJA */
    viihdekalenteri viihdekalenteri-main-areas {
	padding: 13px 8px 30px;
    	display: block;
	border-radius: 0px 8px 8px 8px;
    }
    viihdekalenteri side-control-area,
    viihdekalenteri main-area {
    	width: 100%;
        max-width: 100%;
    	padding: 0px;
    }
   
    /* SIVUPALKKI-ALUE */
    viihdekalenteri side-control-area {
	padding-top: 8px;
    }

    /* Pudotusvalikko */
    viihdekalenteri .select2-container .select2-selection--single .select2-selection__rendered {
    	font-size: 15px;
 	color: #3c8fb7;
    	height: 30px !important;
	line-height: 30px;
    }
    viihdekalenteri .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 32px !important;
    }
    .template-varaamo viihdekalenteri .select2-container,
    viihdekalenteri .select2-container {
    	width: 198px !important;
	margin-bottom: 20px;
    }
    .template-varaamo viihdekalenteri select-type-button,
    viihdekalenteri select-type-button {
	width: 48% !important;
    }

    /* Teksti- ja otsikko osa */
    viihdekalenteri side-control-area h3 {
	display: none;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 0px !important;
    }
    viihdekalenteri side-control-area h3.mobile-only {
	display: block;
	border-bottom: 0px;
	margin: 3px 0px 0px;
    }

    /* Nappi */
    viihdekalenteri select-type-button {
    	margin: 6px 0px;
    	padding: 4px 0px;
	font-weight: 600;
	font-size: 12px;
        letter-spacing: 0px;
    }
    viihdekalenteri select-type-button:nth-child(even) {
	float: right;
    }
    viihdekalenteri select-type-button:nth-child(odd) {
	float: left;
    }

    /* MAIN AREA */
    viihdekalenteri side-control-area {
	margin-bottom: 18px;
    }
    viihdekalenteri main-area {
    	margin: 0px; 
	padding: 0px;
    }
    
    /* Kalenteri header */
    viihdekalenteri events-top-nav {
	height: 32px;
	border-bottom: 0px;
    }
    events-time-header {
    	font-size: 18px;
    	line-height: 40px;
    	font-weight: 700;
    }
    go-back, go-forward {
    	height: 34px;
	background-size: auto 12px;
	background-position: center top 15px;
    }
  
    /* Hallinta-alue */
    viihdekalenteri top-control-area.desktop-only {
    	display: none;
    }
    viihdekalenteri top-control-area.mobile-only {
    	display: flex;
    }
    viihdekalenteri top-control-area {
    	font-size: 13px;
    	font-weight: 400;
    	height: 28px;
	background: #ffffff;
	color: rgb(62, 191, 237);
	text-align: center;
	border-right: 1px solid #3ebfed;
	border-left: 1px solid #3ebfed;
	border-bottom: 1px solid #3ebfed;
	border-radius: 0px;
    }
    viihdekalenteri link-frame {
    	display: block;
	width: 100%;
    }
    viihdekalenteri bar-element {
    	border-right: 0px;
    	border-left: 0px;
	line-height: 27px;
    }
    viihdekalenteri bar-element:last-child {
    	width: auto;
    }
    viihdekalenteri bar-element.kuukausi, viihdekalenteri bar-element.lista, viihdekalenteri bar-element.viikko {
    	background-image: none;
    }
    viihdekalenteri bar-element.tab-selector {
    	padding: 0px 12px;
    }
    viihdekalenteri bar-element.selected {
    	font-weight: 700;
    }
    viihdekalenteri bar-element.tab-selector.selected, viihdekalenteri bar-element.tab-selector:hover {
    	padding: 0px 12px;
	margin: 0px;
    	background-color: transparent;
    	border-right: 0px;
    	border-left: 0px;
    	opacity: 0.7;
    }
    viihdekalenteri events-container .ui-datepicker-calendar .viihdekalenteri-calendar-item-row {
    	display: block;
    }

    /* Taulukko */
    viihdekalenteri events-container {
    	overflow: hidden;
    }
    viihdekalenteri events-container .ui-datepicker-calendar .viihdekalenteri-calendar-item-row {
    	padding: 4px 6px 0px 6px; 
    }
    .viihdekalenteri-event-type {
    	display: block;
    	width: 100%;
	height: 6px;
    }
    viihdekalenteri .ui-datepicker th,
    viihdekalenteri .ui-datepicker td {
    	max-width: 14.3% !important;
    }
    viihdekalenteri events-container .ui-datepicker-calendar td {
	overflow: hidden;
    }
    viihdekalenteri events-container .ui-datepicker-calendar ul li {
    	white-space: nowrap;
	width: 90px;
    }

    /* LISTA NAKYMÄ */

    /* Rakennus */
    viihdekalenteri-list-item responsive-container-helper {
    	padding: 13px 6px 40px 6px;
    }
    viihdekalenteri .state-lista bottom-line {
    	margin: 0px;
    	display: none;
	height: auto;
    }
    viihdekalenteri-list-item + viihdekalenteri-list-item {
    	margin-top: -12px !important;
    }

    /* Väripalkki */
    viihdekalenteri .state-lista type-color-element {
    	margin-bottom: 4px;
    	margin-left: 0px;
    }
    viihdekalenteri .state-lista type-color-element {
        margin-right: 4px;
        width: 100%;
        height: 6px;
    }

    /* Kuva */
    .state-lista viihdekalenteri-list-item img {
    	max-width: 155px;
    	position: relative;
    	left: 0px;
    	top: 0px;
    	float: right;
    	margin-top: 12px !important;
    	margin-left: 10px;
    	margin-bottom: 10px;
    }

    /* Nimikkeet */
    viihdekalenteri laiva-lahto, viihdekalenteri laiva-paluu, 
    viihdekalenteri laiva-nimi, viihdekalenteri laiva-reitti {
    	width: 65%;
    	max-width: 65%;
    	margin-right: 0px;
    }
    viihdekalenteri laiva-nimi {
    	margin-bottom: 0px;
    }
    viihdekalenteri laiva-reitti {
    	margin-bottom: 20px;
    }
    viihdekalenteri  viihdekalenteri-list-item .time {
    	display: none;
    }

    /* Teksti */
    viihdekalenteri .state-lista responsive-container-helper p {
    	max-height: 280px;
    	margin-bottom: 8px;
	height: auto;
    }

    /* Nappi */
    events-bottom-nav {
    	padding: 52px 0px 8px !important;
    }
    viihdekalenteri .state-lista .varaa {
    	right: 6px;
    }
    events-bottom-nav go-back, events-bottom-nav go-forward {
    	margin: 24px auto 0px;
    	position: relative;
	width: 164px;
    }

    /* VIIKKO NÄKYMÄ */

    /* Taulukon kääntö */
    .state-week-override tr { display: block; } /* Rivi pystysuuntaan */
    .state-week-override th { display: none; } /* Header rivin piiloitus */
    .state-week-override td { display: block; float: left; } /* Muut rivit */

    /* Solujen venytys */
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar td,
    viihdekalenteri .state-week-override .ui-datepicker th, viihdekalenteri .ui-datepicker td {
    	width: 100%;
    	max-width: 100% !important;
    }
    viihdekalenteri .state-week-override .ui-datepicker table {
	border-right: 1px solid #3ebfed;
    }
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar ul li {
	max-width: 100%;
   	width: 100%;
    }

    /* Taulukon solujen sisältö */
    viihdekalenteri events-container.state-kuukausi.state-week-override .ui-datepicker-calendar td > div {
    	max-height: auto !important;
    	overflow: visible;
	min-height: 0px;
    }
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar td > div {
    	max-height: 900px;
    	padding-bottom: 10px;
    }

    /* Solu otsake */
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar h4 {
    	background: #3ebfed;
    	font-size: 11px;
    	color: #ffffff;
	padding: 3px;
    }
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .viihdekalenteri-calendar-item-row {
    	width: 100% !important;
    	display: block;
    	border-bottom: 0px;
	padding: 10px 4px 0px 4px;
	height: 28px;
    }
    viihdekalenteri events-container.state-week-override .ui-datepicker-calendar .viihdekalenteri-calendar-item-row .viihdekalenteri-event-type {
    	margin-bottom: 3px;
    }

    /* POP UP */
    viihdekalenteri-popup {
    	width: auto;
    	margin-left: 12%;
    	margin-right: 12%;
    	border-radius: 10px;
	height: 295px;
    }
    .mp-viihdekalenteri-popup .mfp-close {
    	background: url('/templates/matkapojat2018/img/viihdekalenteri/viihdekal-mobile-close.png') no-repeat center center;
	background-size: 25px;
    }
    viihdekalenteri-popup text-area {
    	padding: 0px 10px 0px 15px;
	max-height: 194px;
    }
    viihdekalenteri-popup img {
    	max-width: 155px;
    	margin: 0px 0px 8px 10px;
    }
    .mp-viihdekalenteri-popup h3 {
    	border-radius: 10px 10px 0px 0px;
    	font-size: 18px;
    	padding: 3px 10px;
    	margin-bottom: 8px;
    }
    .mp-viihdekalenteri-popup p {
    	font-size: 13px;
    }
    viihdekalenteri-popup a.varaa {
    	bottom: 15px;
    	right: 15px;
    }
    alareuna-text {
    	left: 9px;
    }

}
@media all and (max-width: 700px) {

    viihdekalenteri events-container .ui-datepicker-calendar ul li {
	width: 75px;
    }

}
@media all and (max-width: 600px) {

    .state-lista viihdekalenteri-list-item img {
    	max-width: 95px;
    }
    viihdekalenteri events-container .ui-datepicker-calendar ul li {
    	width: 60px;
    }

    /* POP UP */
    viihdekalenteri-popup {
    	margin-left: 30px;
    	margin-right: 30px;
    }
    viihdekalenteri-popup img {
    	max-width: 78px;
    	margin: 0px 0px 8px 10px;
    }

}
@media all and (max-width: 500px) {

    viihdekalenteri events-container .ui-datepicker-calendar ul li {
	width: 50px;
    }
}
@media all and (max-width: 450px) {

    viihdekalenteri events-container .ui-datepicker-calendar ul li {
	width: 40px;
    }
}
@media all and (max-width: 400px) {

    /* YLÄ OSA */
    viihdekalenteri h2,
    .infosivu-popup viihdekalenteri h2 {
    	font-size: 17px;
    	width: 150px;
    	line-height: 24px;
    }

    /* MAIN AREA */

    /* Kalenteri header */
    events-time-header {
    	font-size: 14px;
    }

    /* Napit */
    viihdekalenteri select-type-button {
    	font-size: 11px;
    }

    /* LISTA NAKYMÄ */
    .viihdekalenteri-event-type {
    	margin-bottom: 1px;
    }

    /* Nimikkeet */
    viihdekalenteri laiva-lahto, viihdekalenteri laiva-paluu, 
    viihdekalenteri laiva-nimi, viihdekalenteri laiva-reitti {
    	width: 50%;
    	max-width: 50%;
    	margin-right: 0px;
    }
    viihdekalenteri events-container .ui-datepicker-calendar ul li {
	width: 35px;
    }

    /* VIIKKO-NÄKYMÄ */
    go-back, go-forward {
    	width: 40px;
    }

    /* POP UP */
    viihdekalenteri-popup .label {
    	width: auto;
    }
    viihdekalenteri-popup laiva-lahto, viihdekalenteri-popup laiva-paluu, viihdekalenteri-popup laiva-nimi, viihdekalenteri-popup laiva-reitti {
    	font-size: 12px;
    }

}
@media all and (max-width: 300px) {

    viihdekalenteri events-container .ui-datepicker-calendar ul li {
	max-width: 38px;
    }
    .template-varaamo viihdekalenteri .select2-container,
    viihdekalenteri .select2-container {
    	width: 100% !important;
    }

}