/**
* Style du site
*
* CSS3
*
* @category CSS
* @package  Style
* @author   AMIOT Romain
* @license  http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/* Color Palette

Primary:        #d44865 (Bordeau)
Secondary:      #1abc9c (Turquoise)

Button:         #f1c40f (Jaune)
Button:         #8e44ad (Violet)

Primary light:  #e7748c (Bordeau clair)
Secondary dark: #16a085 (Turquoise foncé)

*/

* {
    margin:             0;
    padding:            0;
    border:             0;
    outline:            0;
    vertical-align:     baseline;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

body{
    color:              #000000;
    font:               normal 14px 'Ubuntu', Arial, Helvetica, sans-serif;
    min-width:          1200px;
    background:         #f1f1f1;
    margin:             0;
    display:            flex;
    flex-direction:     column;
    min-height:         100vh;
}

:focus {
    outline:            0;
}

/* Global Structure ----------------------------------------------------------------------------*/
#header{
    width:              100%;
    height:             164px;
    background:         #d44865;
    margin-bottom:      30px;
    border-bottom:      40px solid #e7748c;
    z-index:            2;
}

#section{
    z-index:            1;
    width:              1200px;
    flex:               1;
    position:           relative;
    margin:             auto;
    padding:            20px 10px 20px 10px;
    background:         #fff;
}

#footer{
    width:              100%;
    height:             120px;
    border-top:         1px #dddfdf solid;
    margin-top:         30px;
    background:         #DDDDDD;
}

/* Balises ----------------------------------------------------------------------------*/
h1{
    width:              100%;
    height:             50px;
    font-size:          34pt;
    margin-bottom:      50px;
    color:              #d44865;
}

h2{
    font-size:          26pt;
    margin:             50px 0px 20px 0px;
    font-weight:        lighter;
    color:              #d44865;
}

h3{
    font-size:          14pt;
    margin-top:         5px;
    margin-bottom:      5px;
    font-weight:        lighter;
}

a{
    text-decoration:    none;
}

label{
    display:            inline-block;
    width:              160px;
    margin:             10px 0px 15px 0px;
    font-weight:        bold;
}

form p label:nth-child(n+2){
    margin-right:        20px;
}

form p input:nth-child(2){
    margin-right:       40px;
}

input, textarea, select{
    background:         #f1f1f1;
    border-radius:      3px;
    border:             1px solid #f7f7f7;
    font:               normal 14px 'Ubuntu', Arial, Helvetica, sans-serif;
}

input{
    width:              200px;
    height:             30px;
    padding:            5px;
}

input[type='tel']{
    width:              120px;
}

input[type='date']{
    width:              90px;
}

input[type='mail']{
    width:              380px;
}

input[type='file']{
    width:              363px;
    height:             auto;
    border-radius:      5px;
}

input[type='radio']{
    width:             8px;
    height:            8px;
}

input[type='submit']{
    display:            inline-block;
    background:         #1abc9c;
    border-radius:      3px;
    text-align:         center;
    font-size:          13pt;
    padding:            3px;
    color:              #fff;
    border:             none;
    width:              250px;
    height:             50px;
}

input[type='submit']:hover, input[type='submit']:active{
    background:         #dd3322;
    cursor:             pointer;
}

form > p > input:hover, form > p > input:focus, form > p > input:active{
    background:         #16a085;
    color:              #ffffff;
}

form > p > textarea{
    resize:             none;
    height:             120px;
    padding:            5px;
    margin-bottom:      10px;
}

form p{
    position:           relative;
}

form > p > span{
    display:            none;
}

form > p:hover > span{
    display:            block;
    position:           absolute;
    background:         #5d5650;
    max-width:          700px;
    min-height:         30px;
    padding:            5px;
    z-index:            999;
    margin-left:        10px;
    margin-top:         5px;
    color:              #fff;
    border-radius:      5px;
    text-align:         justify;
}

form > p:hover > span:after{
    content:            '';
    position:           absolute;
    left:               30px;
    top:                -8px;
    width:              0;
    height:             0;
    border-left:        5px solid transparent;
    border-right:       5px solid transparent;
    border-bottom:      8px solid #5d5650;
}

fieldset{
    display:            inline-block;
    width:              100%;
    height:             auto;
    vertical-align:     middle;
    border:             2px solid #F1F1F1;
    border-radius:      5px;
    padding:            10px;
    margin-bottom:      20px;
}

legend{
    font-size:          16pt;
    color:              #666666;
}

.fieldset-wrapper{
    width:              48%;
    display:            inline-block;
    vertical-align:     top;
    margin:             0% 1% 0% 0%;
}

.text{
    display:            inline-block;
    color:              #666666;
    text-align:         justify;
}

.button, .button-danger, .button-warning, .button-success{
    width:              220px;
    height:             60px;
    border-radius:      3px;
    display:            inline-block;
    background:         #1abc9c;
    padding:            10px;
    color:              #fff;
    vertical-align:     top;
    margin:             10px 10px 10px 0px;
    font-size:          12pt;
    opacity:            0.7;
    text-align:         center;
}

.button-danger{background: #C9302C;}
.button-warning{background: #EC971F;}
.button-sucess{background: #449D44;}

.button-file{
    width:              303px;
    height:             60px;
    border-radius:      5px;
    display:            inline-block;
    padding:            10px 10px 10px 55px;
    margin:             10px 20px 0px 0px;
    vertical-align:     top;
    font-size:          12pt;
    opacity:            0.7;
    color:              #000;
    background-color:   #fff;
    background-repeat:  no-repeat;
    background-position:left center;
    -moz-box-shadow:    1px 1px 5px 0px #778383;
    -webkit-box-shadow: 1px 1px 5px 0px #778383;
    -o-box-shadow:      1px 1px 5px 0px #778383;
    box-shadow:         1px 1px 5px 0px #778383;
}

.button:last-child{
    margin:             10px 0px 10px 0px;
}

.button:hover, .button-file:hover, .button-warning:hover, .button-danger:hover, .button-success:hover{
    cursor:             pointer;
    opacity:            1;
}


/* Header -----------------------------------------------------------------------------*/
#nav{
    width:              1200px;
    margin:             auto;
    padding:            10px 20px 20px 20px;
    height:             100%;
    color:              #fff;
    position:           relative;
}

#nav #title{
    display:            inline-block;
}

#nav #menu{
    display:            inline-block;
    position:           absolute;
    top:                30px;
    left:               350px;
}

#nav > #title > p:nth-child(1){
    font-size:          46pt;
}

#nav > #title > p:nth-child(2){
    font-size:          12pt;
}

#nav > #title > p:nth-child(1):hover{
    cursor:             pointer;
}

#menu div{
    background-repeat:  no-repeat;
    width:              64px;
    height:             64px;
    display:            inline-block;
    margin-right:       20px;
    border-radius:      50%;
    -moz-box-shadow:    0 0 4px 2px rgba(0,0,0,.35);
    -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.35);
    -o-box-shadow:      0 0 4px 2px rgba(0,0,0,.35);
    box-shadow:         0 0 4px 2px rgba(0,0,0,.35);
    -moz-transition:    all 0.1s ease-in-out 0s;
    -webkit-transition: all 0.1s ease-in-out 0s;
    -o-transition:      all 0.1s ease-in-out 0s;
    -ms-transition:     all 0.1s ease-in-out 0s;
    transition:         all 0.1s ease-in-out 0s;
    position:           relative;
    cursor:             pointer;
}

#menu-agenda{background-image: url(../objets/ico/Sprite64.png); background-position: -320px 0px;}
#menu-compte{background-image: url(../objets/ico/Sprite64.png);}
#menu-factures{background-image: url(../objets/ico/Sprite64.png); background-position: -128px 0px;}
#menu-patient{background-image: url(../objets/ico/Sprite64.png); background-position: -192px 0px;}
#menu-archives{background-image: url(../objets/ico/Sprite64.png); background-position: -256px 0px;}
#menu-deconnexion{background-image: url(../objets/ico/Sprite64.png); background-position: -384px 0px;}

#menu div:hover{
    text-decoration:    none;
    -ms-transform:      scale(1.1);
    -o-transform:       scale(1.1);
    -moz-transform:     scale(1.1);
    -webkit-transform:  scale(1.1);
    transform:          scale(1.1);
    -moz-box-shadow:    0 0 7px 3px rgba(0,0,0,.35);
    -webkit-box-shadow: 0 0 7px 3px rgba(0,0,0,.35);
    -o-box-shadow:      0 0 7px 3px rgba(0,0,0,.35);
    box-shadow:         0 0 7px 3px rgba(0,0,0,.35);
}

#menu div span{
    width:              100px;
    height:             25px;
    position:           absolute;
    background-color:   #ecf0f1;
    z-index:            2;
    color:              #000;
    display:            none;
    left:               -18px;
    bottom:             -35px;
    text-align:         center;
    padding:            3px;
    -moz-box-shadow:    0 0 7px 3px rgba(0,0,0,.35);
    -webkit-box-shadow: 0 0 7px 3px rgba(0,0,0,.35);
    -o-box-shadow:      0 0 7px 3px rgba(0,0,0,.35);
    box-shadow:         0 0 7px 3px rgba(0,0,0,.35);
}

#menu > div:hover > span:after{
    content:            '';
    position:           absolute;
    left:               45px;
    top:                -7px;
    width:              0;
    height:             0;
    border-left:        6px solid transparent;
    border-right:       6px solid transparent;
    border-bottom:      8px solid #ecf0f1;
}

#menu div:hover span{
    display:            block;
}

#btn-home{
    display:            block;
    position:           absolute;
    width:              64px;
    height:             64px;
    right:              30px;
    bottom:             -25px;
    cursor:             pointer;
    background:         #1abc9c;
    border-radius:      50%;
    border:             none;
    -moz-box-shadow:    0 0 5px 2px rgba(0,0,0,.35);
    -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
    -o-box-shadow:      0 0 5px 2px rgba(0,0,0,.35);
    box-shadow:         0 0 5px 2px rgba(0,0,0,.35);
    z-index:            10;
    background:         url(../objets/ico/Sprite64.png) -64px 0px no-repeat;
}

#btn-home:active{
    -moz-box-shadow:    0 0 1px 1px rgba(0,0,0,.35);
    -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.35);
    -o-box-shadow:      0 0 1px 1px rgba(0,0,0,.35);
    box-shadow:         0 0 1px 1px rgba(0,0,0,.35);
}

/* Homepage ----------------------------------------------------------------------------*/
.homepage-events{
    display:            inline-block;
    width:              220px;
    height:             auto;
    padding:            10px;
    margin:             10px 20px 10px 0px;
    text-align:         center;
    vertical-align:     top;
    background:         #dddddd;
    color:              #000;
    -moz-transition:    all 0.1s ease-in-out 0s;
    -webkit-transition: all 0.1s ease-in-out 0s;
    -o-transition:      all 0.1s ease-in-out 0s;
    -ms-transition:     all 0.1s ease-in-out 0s;
    transition:         all 0.1s ease-in-out 0s;
    border-bottom:      5px solid #8e44ad;
}

.homepage-events:hover{
    -moz-box-shadow:    1px 1px 5px 0px #656565;
    -webkit-box-shadow: 1px 1px 5px 0px #656565;
    -o-box-shadow:      1px 1px 5px 0px #656565;
    box-shadow:         1px 1px 5px 0px #656565;
    transform:          scale(1.1);
    z-index:            10;
}

.homepage-events:last-child{
    margin-right:       0px;
}

.homepage-events p:nth-child(1){
    font-size:          12pt;
    font-weight:        bold;
    margin-bottom:      5px;
}

.homepage-events p:nth-child(2){
    font-size:          11pt;
}

.homepage-events p:nth-child(3){
    font-style:         italic;
    font-size:          9pt;
    margin-bottom:      9px;
}

.homepage-events p:nth-child(4){
    font-size:          11pt;
}

#login-box{
    width:              410px;
    height:             330px;
    margin:             auto;
    padding:            20px;
    margin-top:         10px;
    border-radius:      3px;
    border:             1px solid #DDDDDD;
}

#login-box h1{
    text-align:         center;
}

#login-box input{
    margin-right:       0px;
}

/* Page index de la gestion des patients ----------------------------------------------------------------------------*/
.backoffice-index{
    text-align:         center;
}

.fieldset{
    padding:            10px;
    margin:             auto;
    margin-top:         30px;
    margin-bottom:      10px;
    width:              600px;
    height:             auto;
    border-radius:      3px;
    border:             1px solid #DDDDDD;
    text-align:         left;
}

.fieldset div{
    text-align:         center;
    margin-top:         10px;
}

.fieldset div input{
    background-image:   url(../objets/ico/valid32.png);
    background-repeat:  no-repeat;
    background-position:center center;
}

.fieldset div input:hover{
    background-image:   url(../objets/ico/valid32.png);
    background-repeat:  no-repeat;
    background-position:center center;
}

.fieldset h2{
    margin:             0px 0px 10px 0px;
    text-align:         center;
}

.styled-select select{
    background:         transparent;
    width:              560px;
    padding:            5px;
    font-size:          16px;
    line-height:        1;
    border:             0;
    height:             44px;
    -webkit-appearance: none;
    color:              #000;
}

.styled-select{
    width:              540px;
    height:             44px;
    overflow:           hidden;
    background-repeat:  no-repeat;
    background-position:right;
    background-color:   #808080;
    margin:             auto;
    margin-top:         50px;
    margin-bottom:      40px;
    opacity:            0.7;
    border-radius:      3px;
}

.styled-select:hover{
    opacity:            1;
}

#user-password-verif{
    display:            none;
}

fieldset p{
    margin-bottom:      10px;
}

fieldset span{
    display:            inline-block;
    width:              170px;
    margin-bottom:      5px;
    font-weight:        bold;
    color:              #666666;
}

#submit{
    display:            none;
}

/* Content ----------------------------------------------------------------------------*/


/* Footer ----------------------------------------------------------------------------*/
#footer > div{
    width:              1200px;
    margin:             auto;
    color:              #fff;
    height:             100%;
}

#footer > div > div{
    display:            inline-block;
    width:              377px;
    height:             100px;
    border-right:       1px #fff solid;
    padding:            10px;
    margin:             10px;
    vertical-align:     top;
}

#footer > div > div:last-child{
    border:             none;
}

#footer > div > div > p{
    margin-bottom:      5px;
}

#footer > div > div > a{
    color:              #fff;
}

/* Messages ----------------------------------------------------------------------------*/
.ERROR, .SUCCESS, .WARNING, .LINK{
    width:              100%;
    padding:            5px;
    border-radius:      3px;
    margin-top:         5px;
}

.ERROR{
    background:         #dd3322 url('../objets/ico/wrong.png') no-repeat center right;
}

.SUCCESS{
    background:         #aee90f url('../objets/ico/good.png') no-repeat center right;
}

.WARNING{
    background:         #f88f06 url('../objets/ico/warning.png') no-repeat center right;
}

.LINK{
    background:         #3dc2f9 url('../objets/ico/mouse.png') no-repeat center right;
}

/* Icones ----------------------------------------------------------------------------*/
.ico{
    background-repeat:  no-repeat;
    width:              64px;
    height:             64px;
    display:            inline-block;
    margin-right:       10px;
    border-radius:      50%;
}

#ico-compte{background-image:   url(../objets/ico/Sprite64.png);}
#ico-home{background-image:     url(../objets/ico/Sprite64.png); background-position: -64px 0px;}
#ico-facture{background-image:     url(../objets/ico/Sprite64.png); background-position: -128px 0px;}
#ico-patient{background-image:     url(../objets/ico/Sprite64.png); background-position: -192px 0px;}
#ico-archive{background-image:     url(../objets/ico/Sprite64.png); background-position: -256px 0px;}
#ico-event{background-image:     url(../objets/ico/Sprite64.png); background-position: -320px 0px;}

/* Factures archivées *****************************************************************/
.factures_archivees{
    width:              100%;
}

.factures_archivees th{
    text-align:         left;
    padding:            5px;
}

.factures_archivees td{
    padding:            5px;
}

.factures_archivees tr{
    height:             30px;
}

.factures_archivees tr:nth-child(odd){
    background-color:   #999999;
}

.factures_archivees tr:first-child{
    background-color:   #444444;
    color:              #fff;
}

.factures_archivees a{
    font-weight:        bold;
    color:              #444444;
}