@font-face {
  font-family: 'Din';
  
  src: url('/resources/font/din_light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/resources/font/din_light-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('/resources/font/din_light-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('/resources/font/din_light-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/resources/font/din_light-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}

html {
 font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
 /*overflow-y: scroll;*/ /* Keeps page centered in all browsers regardless of content height */
 -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
 -ms-text-size-adjust:     100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
 box-sizing: border-box; /* Apply a natural box layout model to the document; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}

body {
    margin:0;
    font-family:Din;
}
a{
    text-decoration:none;
}
.right{
    float:right;
}
.left{
    float:left;
}

.wrapper {
	max-width:1280px;
	width:95%;
	height: 100%; /* TO BE CHECKED */
	margin:0 auto;
	position:relative;
}

/*registrazione*/
.box, .box2{
    width:50%;
    float:left;
    height:auto;
    display:table;
    margin-bottom:10px;
}

.box .fieldsBlu{
    font-family:Din;
    color:#ffffff;
    font-size:1.5em;
    width:80%;
    background-color:#63c2d7;
    border:solid 1px #63c2d7;
    outline:none;
    padding:3px;
    float:left;
}

.box span{
    /*line-height:25px;*/
    color:#63c2d7;
    width:35%;
    font-size:1.5em;
    font-family:Din;
    display:table-cell;
}
.box div{
    display:table-cell; 
    width:100%; 
    vertical-align:middle;
}

.titleRegistrazione {
    font-size: 4em;
    color: #63c2d7;
    text-align: center;
    margin: 100px auto 0;
}

.box2 input{
    background-color:#63c2d7;
    border:none;
    color:#fff;
    font-family:Din;
    font-size:16px;
    padding:5px;
}

.errorText{
    color:#c00 !important;
    float:left;
}

.errorTextValidator{
    color:#c00 !important;
    float:left;
    width:5% !important;
    margin-left:5px;
    font-family:Din;
    font-size:12px;
    margin-top:5px;
    line-height:none !important;
}

.errorTextSummary{
    color:#c00 !important;
    float:left;
    width:100% !important;
    margin-left:5px;
    font-family:Din;
    font-size:12px;
    line-height:17px;
}

/*Master page*/

.title{
    font-size:20px;
    color:#63c2d7;
    margin-top:20px;
    float:left;
}

.logIn{
    float:right;
    margin-top:20px;
    color:#63c2d7;
    font-size:20px;
}

.labelLogInMain{
    color:#63c2d7;
}

.labelLogOutMain{
    color:#63c2d7;
}

.containerMenu{
    display:inline-block;
    width:100%;
}

/*DEFAULT*/

.scheda{
    width:70%;
    float:left;
    display:inline-block;
}

.titleScheda{
    color:#63c2d7;
    margin-top:20px;
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
    margin-top:10px;
}

.cellaScheda{
    width:50%;
    float:left;
}

.labelScheda{
    width:30%;
    float:left;
    color:#63c2d7;
    font-size:15px;
    line-height:30px;
}

.valoreScheda{
    width:65%;
    margin-right:5%;
    float:left;
    background-color:#63c2d7;
    color:#fff;
    font-size:15px;
    line-height:23px;
    font-family:Din;
}

.valoreScheda input{
    float:left;
    width:90%;
    background-color:#63c2d7;
    color:#fff;
    font-size:15px;
    line-height:23px;
    font-family:Din;
    outline:none;
    border:none;
    padding-left:2px;
}


.schedaMedicoCurante{
    width:30%;
    float:left;
    display:inline-block;
}

.medico{
    width:100% !important;
    text-align:center !important;
}

HR{
    border:none; 
    background-color:#63c2d7; 
    height:1px; 
    width:100%; 
    margin-top:20px; 
    display:inline-block;
}

.extButton{
    width:27%;
    float:left; 
    margin-left:3%;
    margin-right:3%;
    margin-bottom:20px;
}

.extButtonPediatra{
    width:23%;
    float:left; 
    margin-left:1%;
    margin-right:1%;
    margin-bottom:20px;
}


.containerButton{
    width:80%; 
    display:table;
    margin-left:10%;
    margin-right:10%;
}

.btnRichiesta{
    margin:auto;
    display:table-cell;
    vertical-align:middle;
    height:100px;
    font-size:16px;
    line-height:20px;
    color:#fff;
    text-align:center;
}

.borderError{
    border:solid 1px #c00 !important;
}

/*TOOLBAR*/

.extButtonControls{
    width:23%;
    float:left; 
    margin-left:1%;
    margin-right:1%;
    margin-bottom:20px;
}

.containerButtonControls{
    width:100%; 
    display:table;
    margin-right:10%;
}

.btnRichiestaControls{
    margin:auto;
    display:table-cell;
    vertical-align:middle;
    height:70px;
    font-size:12px;
    line-height:17px;
    color:#fff;
    text-align:center;
}

.hendler{
    display:none;
}

/*GENERICI*/
.containerAmbulatorio {
    width: 50%;
    display: inline-block;
}

.comboBox{
    width:80%;
    margin-right:5%;
    float:left;
    background-color:#63c2d7;
    color:#fff;
    font-size:15px;
    line-height:23px;
    font-family:Din;
    border:none;
}

#prescrizione {
    Width: 49%;
    border: solid 1px #63c2d7;
}

.button{
    width:100px;
    color:#fff;
    background-color:#63c2d7;
    line-height:20px;
    border:none;
    font-size:15px;
}

.ambulatorio{
    background-color:#63b2d1 !important;
}

.prescrizione{
    background-color:#64a2ca !important;
}

.appuntamenti{
    background-color:#8ab4d5 !important;
}

.bilancio{
    background-color:#e3d7e3 !important;
}

/*PRESCRIZIONI*/

.etichettaMese{
    background-color:#63c2d7;
    color:#fff;
    font-size:18px;
    font-family:Din;
    width:50%; 
    text-align:center; 
    margin:auto;
    text-transform:capitalize;
    display:table;
    padding-top:3px;
    padding-bottom:3px;
}

.etichettaOrari{
    color:#63c2d7;
    font-size:15px;
    line-height:30px;
    width:50%; 
    display:table;
    padding-top:3px;
    padding-bottom:3px;
    margin:auto;
}

.notePrescrizioni{
    background-color:#fff; 
    width:80%; 
    color:#63c2d7; 
    border:solid 1px #63c2d7; 
    font-size:15px; 
    outline:none; 
    resize:none; 
    float:left;
}
.orari{
    float:left;
    min-height:325px;
}


/*Appuntamenti*/
.pageContainer{
    display:inline-block;
    width:100%;
    overflow:hidden;
}

.pageLeftContainer{
    width:50%;
    float:left;
}

.pageRightContainer{
    width:50%;
    float:left;
}

.pageSubTitle{
    margin:5px;
    padding:10px; 
    font-family:Din; 
    color:#63c2d7; 
    font-size:14px;
}

.itemCalendarEmpty{
    background-color:#63c2d7;
}
.itemCalendarToDay{
    background-color:#00a651;
}
.itemCalendarBusy{
    background-color:#f9414b;
}
.itemCalendarSostituto{
    background-color:#faaf40;
}
.containerFields{
    width:35%;
    float:left;
    height:33px;
    display:table-cell;
}

.containerFields input, textarea{
    font-family:Din;
    color:#ffffff;
    font-size:1.9em;
    width:50%;
    float:left;
    background-color:#63c2d7;
    border:solid 1px #63c2d7;
    outline:none;
    padding:3px;
    overflow:hidden;
    resize:none;
}

.containerFields select {
    width:50%;
    font-family:Din;
    text-indent: 0.01px;
    text-overflow:"";
    -moz-appearance: none !important;
    -webkit-appearance: menulist;
    background-color:#63c2d7;
    color:#ffffff;
    border:solid 1px #63c2d7;
    font-size:1.9em;
    outline:none;
    float:left;
}

.headerCalendar{
    width:45px; 
    margin:3px; 
    color:#63c2d7;
    float:left; 
    font-size:13px; 
    text-align:center;
}

.btnCalendario {
    border: none;
    font-family: Din;
    font-size: 15px;
    color: #fff;
    display: table;
    width:45px;
    height:45px;
    margin:3px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:bold;
}
.btnCalendario span {
    vertical-align: middle;
    display: table-cell;
}

.calendarContainer {
	width:100%;
	max-width: 360px; 
	height:auto;
	margin: 20px auto;
	overflow-y: auto;
    overflow-x: hidden;
}

.dayLarge{
    width:185px; 
    height:40px;
    float:left;
    text-align:center;
    line-height:40px; 
    text-transform:capitalize; 
    font-size:30px;
    color:#63c2d7;
}
.titleBlu{
    background-color:#63c2d7;
    color:#fff; 
    margin:auto;
    line-height:21px; 
    font-size:16px; 
    text-align:center; 
    text-transform:capitalize;
    white-space:nowrap;
}

.panelSostituto{
    background-color:#faaf40; 
    width:100%;
    background-color: #faaf40;
    font-family: Din;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 23px;
    padding: 5px;
    margin-bottom:10px;
}

/*Dati Utente*/

.absolutePanel {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    background-color: white;
}

.innerPanel{
    width:50%;
    border:solid 1px #63c2d7; 
    margin:auto; 
    margin-top:30px; 
    padding:5px 5px 15px 5px; 
    display:table;
}

.labelPanel{
    width:30%;
    float:left;
    font-family:Din;
    color:#63c2d7;
    font-size:15px;
}

.valorePanel{
    width:70%;
    float:left;
}

/*Storico*/

.rowStorico{
    border-bottom:solid 1px #63c2d7; 
    width:80%; 
    padding-top:10px; 
    padding-bottom:10px; 
    display:inline-block;
}

.headerStorico{
    margin-left:0; 
    padding:0 0 10px 0; 
    font-size:20px;
    border-bottom:solid 1px #63c2d7; 
    width:80%; 
    display:inline-block;
}

@media only screen and (min-width: 300px) and (max-width: 480px) {

    /*REGISTRAZIONE*/

    .titleRegistrazione {
        margin: 50px auto 0;
        font-size: 1.8em;
    }
    .box{
        width:100%;
        float:inherit;
    }

    /*MASTER PAGE*/

    .title{
        width:100%;
        font-size:18px;
    }
    .logIn {
        width:100%;
        font-size:15px;
        margin-top:10px;
    }
    .labelLogOutMain {
        float:right;
    }

    .containerMenu {
        position:fixed;
        display: inline-block;
        width: 100%;
        background-color:white;
        height:75px;
        border-bottom:solid 1px #63c2d7;
        top:0;
        left:0;
        z-index:1;
    }
    /*DEFAULT*/

    .scheda {
        width: 100%;
        float:none;
        color:#63c2d7;
        margin-top:77px;
    }

    .cellaScheda{
        width:100%;
        float:left;
    }
    .schedaMedicoCurante{
        width:100%;
        float:left;
        margin-top:10px;
    }
    .medico{
        width:100% !important;
        text-align:left !important;
    }

    .extButton{
        width:100%;
        float:none;
    }

    .extButtonPediatra {
        width:100%;
        float:none;
    }

    /*APPUNTAMENTI*/

    .pageLeftContainer {
        width: 100%;
        float: none;
    }

    .pageRightContainer {
        width: 100%;
        float: none;
    }

    .headerCalendar {
        width: 12%;
        margin: 1%;
        color: #63c2d7;
        float: left;
        font-size: 13px;
        text-align: center;
    }

    .btnCalendario {
        border: none;
        font-family: Din;
        font-size: 15px;
        color: #fff;
        width: 12%;
        height: 45px;
        margin-left: 0 0 0 2%;
        text-align: center;
        float: left;
        text-decoration: none;
        font-weight: bold;
    }

    /*TOOLBAR*/

    .extButtonControls{
        width:46%;
        padding:0;
        margin:10px 0 0 3%;
    }

    .contentExt {
        position:fixed;
        width: 100%;
        top: 75px;
        left: 0;
        border-top:solid 1px #63c2d7;
        padding-top:10px 0 0 0;
        margin:0;
    }
    .contentExtButton{
        width:100%;
        padding:0;
        margin:0;
        height: 170px;
        border-bottom:solid 1px #63c2d7;
        background-color: #fff;
    }
    .hendler {
        display: block;
        height: 25px;
        width: 40px;
        float: right;
        cursor: pointer;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-right: 3%;
        border-right: solid 1px #63c2d7;
        border-left: solid 1px #63c2d7;
        border-bottom: solid 1px #63c2d7;
        background-color: #fff;
        margin-top: -1px;
    }
    hr{
        display:none;
    }
    /*.hendler.opened {
	    
    }*/

    /*GENERICI*/
    .containerAmbulatorio {
        width: 100%;
        display: inline-block;
    }
    .comboBox {
        width: 100%;
    }

    #prescrizione{
         Width:100%;
         border:solid 1px #63c2d7;
    }
    /*PRESCRIZIONI*/

    .etichettaMese{
        width:100%; 
        margin:auto;
    }

    .etichettaOrari{
        width:100%; 
    }

    .notePrescrizioni {
        width: 100%;
    }
    .orari{
        min-height:1px;
    }

    /*Dati utente*/

    .absolutePanel {
        position: fixed;
        top: 77px;
        left: 0;
        width: 100%;
        background-color: white;
    }

    .innerPanel {
        width: 100%;
        border: none;
        margin: auto;
        margin-top: 30px;
        padding: 5px 5px 15px 5px;
        display: table;
    }

    .labelPanel {
        width: 100%;
    }

    .valorePanel {
        width: 100%;        
    }

    .mainContainer{
        margin-top:85px;
        background-color:#fff;
    }

    /*STORICO*/

    .rowStorico {
        width:100%;
    }

    .headerStorico {
        width: 100%;
    }

}

@media only screen and (min-width: 481px) and (max-width: 768px) {

    /*REGISTRAZIONE*/

    .titleRegistrazione {
        margin: 50px auto 0;
        font-size: 2.5em;
    }

    /*MASTER PAGE*/

}