@import url(//fonts.googleapis.com/css?family=Raleway);

* {
    margin: 0;
    padding: 0;
}

body{
    font: 20px 'Raleway',sans-serif;
}

h1{
    text-align: center;
    margin:.5em;
    font-size: 1.5em;
}

.backlink{
    text-align: center;
    font-size: .8em;
}

.backlink a{
    color: #79AB0A;
    text-decoration: none;
}

.backlink a:hover{
    color: #414141
}

.wrapper{
    margin-bottom:2em;
}

/* Calendar */
.calendar-container{
    position: relative;
    width:100%;
    max-width: 900px;
    text-align: center;
    margin:0 auto;
    font-size:1em;
}

.column-day{
    position: relative;
    display: inline-block;
    width:13%;
    color:white;
}

/*.column-day:nth-child(3){
    background-image: url('img/picto_sms.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}

.column-day:nth-child(3) .hour-day{
    opacity: .05;
}*/

.item-day{
    padding:1px;
    background:#414141;
    margin:4px;
}

.item-day.hour-day{
    cursor:pointer;
    background:#79AB0A;
}

.item-day.hour-day:hover{
    background:#414141;
}

.item-day.hour-day.busy{
    background:#dbdbdb;
    cursor: default;
    color:#6a6a6a;
}

.item-day.hour-day.midi{
    height:0;
    opacity: 0;
    margin:1px;
}

.item-day.header-day{
    text-transform: uppercase;
}

.header-day .header-date{
    display: block;
    font-size:.8em;
}

/* Dialog Form */
.dialog,
.dialog-overlay {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    font-size:.8em;
}

.dialog {
	position: fixed;
    display: none;
}

.dialog-overlay {
	position: absolute;
	z-index: 1;
	background: rgba(55, 58, 71, 0.9);
	transition: opacity 0.3s;
}

.dialog-content {
	position: relative;
    margin:auto;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	width: 50%;
	max-width: 560px;
	min-width: 290px;
	background: #F3F1F1;
	padding: 2em;
	text-align: center;
	z-index: 5;
}

.dialog h2 {
	margin: 0;
	font-weight: 400;
	font-size: 2em;
	padding: 0 0 1em;
	margin: 0;
}

.dialog h2 span{
    display:block;
    font-size:1rem;
}

.dialog-content form{  
}

.dialog-content input{
    display:block;
    border:none;
    background:white;
    padding: 1em 2em;
    margin:1em auto;
    width:100%;
}

.control-bar{
    position: relative;
    font-size: 1em;
}

.control-container{
    display: inline-block;
    margin-left: 4em;
}

.control-week{
    display: inline-block;
    margin: 0 1em;
}

.control-left{
    display: inline-block;
    cursor:pointer;
}

.control-right{
    display: inline-block;
    cursor:pointer;
}

.dialog-content input[type=text], 
.dialog-content input[type=email], 
.dialog-content input[type=submit], 
.dialog-content input[type=tel] {
    font-size: 1em;
    font-weight: 400;
    color:#414141;
}

.dialog-content input[type=submit]{
    width:160px;
    height:55px;
    outline: medium none;
    font-weight: 600;
    cursor: pointer;
    color:rgba(255, 255, 255, 0.9);
    background:#79AB0A;
    margin-top: 3em;
}

.legend{
    display: inline-block;
    list-style: none;
}

.legend li{
    display: inline-block;
    margin: .5em;
}

.color{
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height:1em;
}

.color-busy{
    background: #DBDBDB;   
}

.color-free{
    background: #79AB0A;   
}

.txt-color{
    display: inline-block;
    vertical-align: middle;
    margin-left: .2em;
}



@media (max-width: 900px) {
    .calendar-container{
        font-size:.7em;
    }
}

@media (max-width: 600px) {
    .calendar-container{
        font-size:.5em;
    }
}

@media (max-width: 480px),
@media all and (orientation: portrait){
    .calendar-container{
        font-size:1em;
    }
    .column-day{
        width:80%;
    }
    
    .column-day:nth-child(3){
        background: none;   
    }
    
    .item-day{
        padding: 12px;
    }
    
    .item-day.busy{
        display:none;
    }
    
    .item-day.header-day {
        margin-bottom: 1em;
        margin-top: 2em;
    }
    
    .control-container{
        margin:auto;   
    }
    
    .dialog-content {
        width:70%; 
        min-width: 0px;
    }
}