* {
  box-sizing: border-box;
}

body{
   margin: 0;
   font-family: Helvetica, "Times New Roman", Times, serif;
   font-size: 18px;
}
a{
    text-decoration: none;
    padding:1px;
}
a:hover{
    text-decoration: underline;
}

/*for kalender_manad*/

.dates li{
    position: relative;
}

.dates li span{
    position: absolute;
    font-size: 9px;
    color: #555;
    bottom: -28px;
    right: 9px;
}

.dates li span:after{
    content: "\02022";
    color:green;
    font-size:33px;
    vertical-align:-10%;
}

.dates li span.empty{
    color:transparent;
}
.dates li span.empty:after{
    content: "\02022";
    color:red;
    font-size:33px;
}

.redbull{
    color: red;
    font-size: 33px;
}
.passed{
    color: gray;
    font-size: 33px;
}
.center{
    text-align:center;
}

/*end*/

#calendar:before{
    content:"Väkommen att söka lediga pass (telefon)";
    display:block;
    font-size: 18px;
    font-weight:bold;
    padding:20px;
}
.logo_top{
   width: 85px;
}
.wrapper{
   padding: 0 10% 100px;
}
.content{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 900px;
    border: 1px solid #000;
    border-top: none;
}
.outofstock{
   color: #555;
}
.outofstock:after{
   content: " --- redan bokad";
}
.hidden{
    display: none;
}

.calendar div.box{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:40px;
    background-color:#787878;
}

.header{
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size:18px;
}

.calendar_day .header{
    padding:10px 11px 9px 11px;
}

.calendar a.prev, .calendar a.next{
    height: 17px;
    display:block;
    cursor:pointer;
    text-decoration:none;
    color:#FFF;
}
a.prev{
    float: left;
}
a.next{
    float: right;
}

.calendar ul{
   padding:0;
   margin-bottom:0;
}
.calendar li{
   list-style-type: none;
   border-bottom: 1px solid #000;
   padding: 10px 0;
}
.calendar li:last-child{
   border-bottom: none;
}
.menu{
    border-bottom: 1px solid #000;
    margin: 18px 0;
}
.menu ul{
    margin: 0;
}
.menu li{
    display: inline-block;
}
.menu li a{
    padding: 5px;
    display: block;
}

@media screen and (max-width: 750px){
    div#calendar{
        width:100%;
    }
    .wrapper{
        padding:0 0 100px 0;
        width:fit-content;
    }
    div#calendar div.header{
        width:94%;
    }
    div#calendar ul.dates li{
        width:13%;
        line-height:normal;
        margin-right:3px;
    }
    div#calendar ul.label{
        width:96%;
    }
    div#calendar ul.label li{
        width:13%;
        margin-right:3px;
        
    }
    .dates li span{
        bottom:22px;
        height:30px;
    }
    .dates li span:after{
        vertical-align:-20%;
    }
}