/*
@font-face {
    font-family: 'DroidSans';
    src: url('font/DroidSans-webfont.eot?') format('eot'), url('font/DroidSans-webfont.woff') format('woff'), url('font/DroidSans-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'raleway_thin';
    src: url('font/raleway_thin-webfont.eot?') format('eot'), url('font/raleway_thin-webfont.woff') format('woff'), url('font/raleway_thin-webfont.ttf') format('truetype');
}
*/

@keyframes urgency {
    0%   {border-color: #000;}
    100%  {border-color: red;}
}
@keyframes waiting {
    0%   {border-color: #000;}
    100%  {border-color: orange;}
}
@keyframes free {
    0%   {border-color: #000;}
    100%  {border-color: yellow;}
}


.agenda-panel input[type=text], .agenda-panel input[type=password], .agenda-panel input[type=email], .agenda-panel textarea { 
    user-select: text;
    padding: 4px;
    font-size: 16px;
/*    font-family : 'DroidSans', arial; */
    font-family : arial;
    border: solid 1px #aaa;
    width:260px;
}

.agenda-panel input[type=checkbox] {
    width:40px; height:40px;
} 

.agenda-panel button {
    margin-left:10px;
    font-size: 14px;
    height:40px;
    width:120px;
    background-color: #0AF;
    color:#fff;
    border: solid 1px #0AF
}

.agenda-panel p { margin:4px; padding:0; }
/*
.____subpage {

    position : absolute;
    top:10px; left:10px; bottom:10px; right:10px;
}
*/

/*****************************
        LOGIN et RDV
*****************************/

.agendaRDV {
    display: flex; 
    justify-content : flex-start;  
    overflow-y: scroll; 
    position:relative;
    width: 100%;
}


.agendaRDV.agenda-filter {
    line-height: 20px;
    height: 20px;
    text-align: center;
    overflow: visible;
    border: solid 1px lightslategray;
    border-bottom: none;
}

.agenda-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;    
}

.agenda-header {
    flex :0;
    border: solid 1px #444;
    height:40px;
    min-height:40px;
}
.agenda-tab {
    flex: 1;
    border: solid 1px #444;
    border-top: none;
    border-bottom: none;
    background-color: #fff; /* #e4e4e4; #f3efff;*/
}
.agenda-orphean {
    height: 0;
    overflow : unset;
}
.agenda-footer {
    border: solid 1px #444;
    background-color: #f3efff; 
    transition: height 0.3s;
    height: 80px;
    min-height: 80px;
}
.agenda-footer.expanded {
    transition: height 0.3s;
    height: 50%;
}


.columnleft {width:40px; border-right: solid 1px #000;}
.columnhours>div {margin:0; padding:0; line-height:12px; margin-left:5px; font-size: 10px }
.columnhours>.minute {font-size: 8px}
.columnday {flex:1; min-width: 0; position : relative; border-left: solid 1px #aaa;}
.holiday>.holiday-label {width:100%; position: absolute; text-align: center; opacity :0.4}
.columnday>textarea {width:calc(100% - 8px); border: none; resize:none;  height: calc(100% - 8px) }
.columnday.memo { background-color: #fff;  padding: 0 0 4px 4px;}
.day-label>span {
    position: absolute;
    left: 0;
    background-color: rgba(156,155,155);
    width: 20px;
    display: inline-block;
    text-align: center;
    color: white;
}


.current-time {position : absolute; width:100%; height:2px; background-color :red; }

.columnorphean {height: 0;}
.orpheantab {
    position: absolute;
    width: calc(100% - 10px);
    bottom: 0;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border-top-right-radius: 10px;
    padding-left: 10px;
    color: #882727;
    border: solid 1px #aaa;
    border-bottom: none;
}


.orpheantab.empty {display: none}
.orpheancontent {
    position : absolute;
    background-color: rgba(255,255,255, 0.8);
    height : 0px;
    width: calc( 100% - 10px);
    border-radius: 4px;
    border: solid 1px #aaa;
    bottom: -10px;
    margin: 5px;
    transition: bottom 0.3s, height 0.3s;
    overflow-y : scroll;
    overflow-x : hidden;
}
.orpheancontent.visible {
    height:300px;
    bottom: 25px;
}


.usersPhoneList {
    position : absolute;
    background-color: rgba(255,255,255, 0.8);
    height : 0px;
    width: calc( 100% - 10px);
    border-radius: 4px;
    border: solid 1px #aaa;
    bottom: -10px;
    margin: 5px;
    transition: bottom 0.3s, height 0.3s;
    overflow-y : scroll;
    overflow-x : hidden;
}
.usersPhoneList.visible {
    height:300px;
    bottom: 25px;
}


.agenda-tab>.columnhours { width:40px; background-color: #eceff3 /*#dde0fe*/ ;}
.saturday {background-color: #fffce2;}
.sunday {background-color: #fbe8d3; flex:0.5}
.holiday {background-color: #efd8ff; flex:0.5;}
.agendaRDV header {text-align: center; white-space: nowrap; overflow: hidden; line-height: 18px;}
.containerday {display :flex; height: inherit; } 
.columnconsultant {flex:1; font-size:12px; min-width: 0; overflow: hidden; text-align:center; height: inherit; border-top: solid 1px #CCC; border-left: solid 1px #CCC;}
.columnconsultant:first-child {border-left: none}
.containerconsultant { position: relative; width:calc(100%); height: inherit;}
.user-activity { 
   /* overflow : hidden; */ 
    width: 100%; 
    position : absolute;
    box-sizing: border-box; 
    border-right: solid 20px #fff;
}

.user-activity span {
    position: absolute;
    top: 50%;
    height: 2px; 
    margin-top: -1px; 
    line-height: 0px; 
    text-align: center;
    left: calc(100% + 11px);
    transform: translateX(-50%) rotate(270deg);
    white-space: nowrap;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-size: 11px;
}

.user-activity .RDVtemplate {
    position : absolute;
    border-top : solid 1px #666;
    border-bottom : solid 1px #666;
    width:calc(100% + 20px);
    line-height: 16px;
    text-align: left;
    color : rgb(120, 129, 158);
    font-size: 10px;
    white-space: nowrap;
}

/*
.user-activity:hover {
    z-index: 10;
}
*/
.consultant-label {
    display: inline-block;
    color : #515d80;
    width: 100%;
}
.activity-filter { flex : 1; z-index:1; opacity: 0.7; transition: height 0.3s; color: black; height: 20px; overflow: hidden;}
.activity-filter.pth-selected { opacity: 1; font-weight: bolder;}
.activity-filter:hover:not(:first-child) {height : 150px; opacity: 1;}

.RDV, .user-RDV {
    position : absolute;
}

.RDV, .user-RDV, .orpheanRDV {
    width: 100% ;
    font-size:12px;
    line-height: 12px;
    text-align: left;
    overflow: hidden;
    border: solid 1px #CCC;
    box-shadow:  0px 2px 14px #888;
    cursor: pointer;
}

.RDV>.title, .orpheanRDV>.title {
    background-color: #555;
    border-left:solid 14px #555;
    color: #fff;
    white-space: nowrap;
    padding: 2px;
    margin: 0;
}
/*
.RDV[data-status=OUT], .RDV[data-status=TRT], .RDV[data-status=ANN], .RDV[data-status=ABS] {
    opacity : 0.6;
}
*/

.RDV[data-status=ATT]>.title { animation: waiting 0.5s infinite alternate; }
.RDV[data-status=URG]>.title { animation: urgency 0.5s infinite alternate; }
.RDV[data-status=FREE]>.title { animation: free 0.5s infinite alternate;  }

.RDV[data-status=NDF]>.title { border-left:solid 14px grey;}
.RDV[data-status=RDV]>.title { border-left:solid 14px #555;}

.RDV[data-status=OUT]>.title { border-left:solid 14px rgb(2, 182, 2);}
.RDV[data-status=CLT]>.title { border-left:solid 14px #00aeff;}
.RDV[data-status=EXA]>.title { border-left:solid 14px #C30ED4;}
.RDV[data-status=INV]>.title { border-left:solid 14px rgb(4, 162, 109);}
.RDV[data-status=HSP]>.title { border-left:solid 14px rgb(113, 82, 253);}

.RDV[data-status=TRT]>.title { border-left:solid 14px #A0F1EB;}
.RDV[data-status=COM]>.title { border-left:solid 14px #6c9806;}
.RDV[data-status=ABS]>.title { border-left:solid 14px rgb(89, 143, 143);}
.RDV[data-status=ANN]>.title { border-left:solid 14px rgb(233, 69, 5);}
.RDV[data-status=END]>.title { border-left:solid 14px rgb(49, 1, 37);}

.tag-color { width:40px; display: inline-block; border-radius: 5px 0 0 0 ; }

.tag-color[data-value=ATT] { background-color : orange }
.tag-color[data-value=URG] { background-color :red }
.tag-color[data-value=FREE] { background-color : yellow  }

.tag-color[data-value=NDF] { background-color : grey;}
.tag-color[data-value=RDV] { background-color : #555;}

.tag-color[data-value=OUT] { background-color : rgb(2, 182, 2);}
.tag-color[data-value=CLT] { background-color : #00aeff;}
.tag-color[data-value=EXA] { background-color : #C30ED4;}
.tag-color[data-value=INV] { background-color : rgb(4, 162, 109);}
.tag-color[data-value=HSP] { background-color : rgb(113, 82, 253);}
.tag-color[data-value=TRT] { background-color : #A0F1EB;}
.tag-color[data-value=COM] { background-color : #6c9806;}
.tag-color[data-value=ABS] { background-color : rgb(89, 143, 143);}
.tag-color[data-value=ANN] { background-color : rgb(233, 69, 5);}
.tag-color[data-value=END] { background-color : rgb(49, 1, 37);}


.RDV>.comment {
    padding:2px;
}
.RDV>.resize-handler {
    position : absolute;
    bottom:0;
    height:6px;
    width:100%;
    cursor : s-resize;
}

.RDV>.status {
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,#f43e30 65%,#f20909 100%); 
    position: absolute;
    height: 4px;
    width: 100%;
    bottom:0;
}
.dragged { opacity : 0.6; }

.user-RDV { background-color: #f7aee7; }

[class^="icon"] {
    background-position: center;
    background-repeat: no-repeat;
    width:40px;
    height:40px;
    border: none;
    margin: 0;
    
}
.icon-settings { background-image:url(img/settings.png);}
.icon-programs { background-image:url(img/programs.png); }
.icon-calendar { background-image: url(img/calendar.png); }

.icon-calendar-selector {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/calendar_fl.png);
}

.small-label {
    color: #86b4f8;
    font-size: 14px;
    line-height: inherit;
}

.editable {
    padding-left: 5px;
    font-size: 16px;
    display: inline-block;
    color:#fff;
    line-height: 36px;
    cursor: pointer;
}

#appointment-memo, #appointment-patient {
/*    font-family : 'DroidSans', arial; */
    font-family : arial; 
    font-size: 16px;
    height :90px;
    padding: 4px;
    resize:none;
    flex :1;
}
.history-appointment {
    border-bottom: solid 1px #768cca;
    background-color: #fbfaff;
}
.history-appointment>span { color : #543e74;  padding-left: 10px}
.history-appointment>span:first-child { color : #01579b}
.history-appointment>span:last-child {color : #161E34;}
.history-appointment:nth-child(2n) {background-color: #ebf0ff;}
/***********************************************************
        CSS touch input
************************************************************/
@keyframes zoomHide{ 0% {transform: scale(1); opacity :1} 25% {transform: scale(1.1);} 90% {transform: scale(0.9);opacity :0.5} 100%{transform: scale(1);opacity :0} }
@keyframes zoomShow{ 0% {transform: scale(1); opacity :0} 25% {transform: scale(1.1);} 90% {transform: scale(0.9);opacity :0.5} 100%{transform: scale(1);opacity :1} }
.input-time-hide { transform-origin: 140px 140px; animation: zoomHide 250ms ease-out;}
.input-time-show { transform-origin: 140px 140px; animation: zoomShow 250ms ease-out;}
.touch-input-time { text-align: center; border: solid 1px #666; box-shadow:0 0 8px #333;     background-color :#fff;
}
.input-time-select, .input-time-value { background-color: #6AC; }
.input-time-minute>div, .input-time-hour>div { position: absolute; top:108px; left:108px; width : 45px; height : 45px;border-radius: 50%; }
.input-time-minute label, .input-time-hour label { display: inline-block; width : 45px; height : 45px; line-height : 45px; font-size: 22px; color: #333;}
.touch-input-time .PM { font-size: 16px; }
.input-time-value { line-height:50px; height:50px; font-size:40px; background-color: #6AC; color : #FFF; }
.input-time-cmd {
   position:absolute;
    bottom:0;
    width:100%;
    height:50px;
    line-height:50px;
    text-align: center;
    color: #0AF;
    background-color:transparent;
}
.input-time-cmd>label { display: inline-block; width : 45%;}

.touch-input-date {width:280px; height:380px; border : solid 1px #666; box-shadow : 0 0 12px #333; background: transparent;     background-color :#fff;
} 
.touch-input-date>label {display : inline-block; vertical-align:top;   color : #000; width:40px; height:30px; line-height:30px; text-align : center; }
.touch-input-date>.input-date-day {background-color: #ccc; /*font-size: 22px;*/ color : #FFF; height:40px; line-height:40px}
.touch-input-date>label[data-move] {font-size:22px; color:#0AF; width:20%; height:50px; line-height:50px}
.touch-input-date>.input-date-month {width:20%; color : #000;height:50px; line-height:50px; font-size:30px}
.touch-input-date>.input-date-year {width:40%; color : #000;height:50px; line-height:50px; font-size:30px}
.touch-input-date>.input-date-today, .touch-input-date>.input-date-cancel {
    color:#0AF;
    width:50%;
    height:50px;
    line-height:50px;
    border :none
}
.input-listbox {
    position:relative;
    border: solid 1px #888;
    overflow-y: scroll;
    overflow-x: none;
    line-height:35px;
    top:40px;height: 250px;
    background-color: #fff;
}
.input-listbox-selected, .touch-button .selected, .touch-list .selected  {background-color:#333; color: #FFF;}


/**   TOUCH  ***/

.touch-button, .touch-list, .touch-form {
    max-width: 310px;
    max-height : 450px;
    box-shadow : 0 0 12px rgba(0, 0, 0, 0.35);
    border : solid 1px #888;
    border-radius: 5px;
    background-color: #fff;
}

.touch-list>header, .touch-form>header {
    padding :0;  
    margin:0;
    background-color: #41417e;
    color: #fff;
    text-align: center;
    font-size : 16px;
    line-height: 24px;
} 

.touch-button>.scroller, .touch-list>.scroller, .touch-form>.scroller{
    overflow-y: auto;
    border-radius : 4px;
    padding: 5px;
    height: calc(100% - 90px);
}

.touch-form .list-input {
    background-image : url(images/arrow-down.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 16px;
}
.touch-button button, .touch-list button, .touch-form button{
    height: 40px;
    margin : 5px;
}

.scroller p, .scroller p{
    cursor: pointer;
    line-height: 40px;
    margin:0;
    padding: 0 12px;
}
.touch-list label, .touch-form label{
    padding-left:4px;
    min-width : 140px;
    display: inline-block;
}
/*
.touch-mark {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width:20px;
    border-radius: 10px;
    background-color: red;
    text-align: center;
    color: white;
    font-size: 10px;
    font-weight: bold;    
}
*/
.touch-list p:hover {
    background-color : #589acd;
    color : #fff;
}
.touch-button p{
    width : 85px; 
    height : 32px;
    line-height : 32px;
    font-size: 12px;
    cursor: pointer;
    border : solid 1px #CCC;
    border-radius: 4px;
    margin: 2px;
    text-align:center; 
}

.touch-button span {
    line-height:12px;display:inline-block; vertical-align:middle; 
}

/****************  DATE RANGE ******************/
.pth-date-range { display: inline-block; line-height:30px;} 
.pth-date-range label { width: 20px; }
.pth-date-range label[data-field] { width: 80px; border : none; color: inherit}
/*.pth-date-range select ,  .pth-date-range button  {height:30px; min-width: 30px; margin-top:10px}*/





/*---------------------------------
        TRICKS
-----------------------------------*/
.rotate90 {
    position : absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

/*********************************************
        LOADER CSS
**********************************************/

.spinner {
  height: 100px;
  width: 100px;
  margin:  auto ;
  position: absolute;
  left:0; top:0; right:0;bottom:0;
}
.spinner > div {
  width: 30px;
  height: 30px;
/*  background-color: #e9ffff; */
  background-color: #464791;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}