/* HEADER */

body {
    background: rgb(18, 18, 22);
    height: 100%;
}

.contact-header {  
    background: rgb(32 31 37);
    height: 33px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact-header nav {
    display: flex;
    align-items: center;
}

.contact-header nav img {
    height: 30px;
    margin-left: 15px;
    margin-right: 20px;
    padding-right: 20px;
}

.contact-header nav a {
    font-weight: bold;
    color: #7159c1;
}

.contact-header nav aside {
    display: flex;
    align-items: center;
}

.profile-header {
    display: flex;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #eee;
}

.profile-header div {
        text-align: right;
        margin-right: 10px;
}

.profile-header div strong {
    display: inline-block;
    color: orange;
}

.profile-header div a {
    display: inline-block;
    margin: 0px 10px;
    font-size: 12px;
    color: #fff;
}
    
.profile-header div img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}


/*--------------------------------------*/

.icons-medias {
    display: flex;
    max-height: 95px;
    width: 95%;
    max-width: 468px;
    opacity: 0.4;
    background: #111;
    padding-top: 13px;
}

.icons-medias img {
    height: 75px;
}

.grow1 {
	flex-grow: 1;
}

.icon-header {
    margin-left: 8px;
    margin-right: 9px;
    padding-right: 9px;
    height: 54px;
}

.calendar {
    width: 100%;
    max-width: 380px;
    background-color: #111116;
    padding: 1px;
    margin: auto;
}

.menu-calendar {
    background: #29292e;
    color: #ddd;
    height: 31px;
    padding: 4px 0px;
    display: flex;
}

.menu-calendar div {
    flex: 1;
    text-align: center;
}

.weekDay {
    background: #111116;
    text-align: center;
}
.weekDay div {
    background: #111116;
    color: #ffb150;
    width: 11%;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    margin: 5px;
    padding: 7px;
    border-radius: 7px;
    cursor: pointer;
}

.day {
    background: #29292e;
    color: #ddd;
    width: 11%;
    height: 35px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    margin: 5px;
    padding: 7px;
    border-radius: 7px;
    cursor: pointer;
}

.appointment {
    background: #111116;
    color: #ddd;
    height: 32px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    margin: 5px;
    padding: 7px;
    border-radius: 7px;
    cursor: pointer;
}

.provider {
    background: #111116;
    color: #ddd;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    margin: 5px;
    padding: 7px;
    border-radius: 7px;
    cursor: pointer;
}

.tag-job {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    background: #4e4e4e;
    text-align: center;
}
.tag-job span {
    color: orange;
    vertical-align: middle;
    margin: 10px 5px;
    font-size: 22px;
} 

.is-today{
   border: 2px solid #ffb150;
}

.is-selected {
    
    background: #ffb150;
    color: #333;
    font-weight: 600;
}

.lock-day {
    background-color: #111116;
    color: #29292e;
    cursor: default;
}

/* container flex */

.container-flex {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.item-flex {
    flex-grow: 4;
}