/*
###############################################################################################################################################################
© 2017 Franck Durand
All Rights Reserved
THIS WORK CONTAINS TRADE SECRET AND PROPRIETARY INFORMATION WHICH ARE THE PROPERTY OF FRANCK DURAND OR ITS LICENSORS AND IS SUBJECT TO LICENSE TERMS.
###############################################################################################################################################################

CSS Selectors
	* HTML element selector: element name. Ex: p {text-align: center; color: red;}
	* HTML id selector: "#" + id. Ex: #map
	* HTML class selector: "." + class name. Ex: .Sidebar
CSS naming rules
	* Base rules:
		- class name: lowercase_names_with_underscore
		- variable name: UPPERCASE_NAMES. "-" is unsupported!
	* BEM rules: block__element--modifier (https://openclassrooms.com/fr/courses/6106181-simplifiez-vous-le-css-avec-sass/6595809-creez-des-selecteurs-html-avec-la-methodologie-bem)

*/		  

/* Make visible the focus (for debugging)
/* input:focus {background-color: yellow;}  */

/* Variable declaration */
/* WARNING: "-" in the name is unsupported! */
/* WARNING: As used in Javascript no space after ":" is allowed */


/*
###############################################################################################################################################################
Date range picker
*/
.apply-btn {
    background-image: linear-gradient(to right,var(--COLOR_ACTION_40), var(--COLOR_ACTION_60))!important;
    border: none!important;
}

.date-picker-wrapper {
    z-index: 1050!important;
    background-color: rgba(255, 255, 255, 0)!important;
    color: var(--COLOR_ACTION_50)!important;
    border: 1px solid transparent!important;
    border-radius: var(--BUTTON_BORDER_RADIUS);
    box-sizing: border-box;
    box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.6),
    inset -4px -4px 8px rgba(255, 255, 255, 0.2),
    3px 3px 6px rgba(0, 0, 0, 0.3),
    -3px -3px 6px rgba(255, 255, 255, 0.2);
    box-shadow: var(--NEUMORPHISM_BOX_SHADOW);
    display: block!important;
}

/* Dates + Duration title */
.date-picker-wrapper {
    font-size: unset!important; /* Franck : modifié. font-size: 12px; */
}

.date-picker-wrapper .drp_top-bar {
    display: none;
}

/* Duration tooltip */
.date-picker-wrapper .date-range-length-tip {
    font-size: unset!important; /* Franck : modifié. font-size: 12px; */
}

/* Months */
.date-picker-wrapper table .caption {
    height: 60px!important;   /* Franck : modifié. height: 40px; */
}

/* Weekdays and months */
.date-picker-wrapper th {
    font-size: calc(0.88rem * var(--DATE_PICKER_FONT_COEF));    /* Franck : modifié. font-size: 0.88rem; */
}

.date-picker-wrapper .month-wrapper table th {
    line-height: 18px!important;
}


.date-picker-wrapper b {
    color: var(--COLOR_ACTION_50)!important;
    font-size: var(--FONT-FAMILY)!important;
    font-weight: bold!important;
}

.date-picker-wrapper .month-wrapper {
    border: 1px solid transparent!important;
    background-color: rgba(255, 255, 255, 0)!important; /* Franck : modifié. background-color: var(--COLOR_SURFACE_10)!important; */
    color: var(--COLOR_SURFACE_80)!important;
}

/* Days */
.date-picker-wrapper .month-wrapper table .day.toMonth {
    font-size: calc(12px * var(--DATE_PICKER_FONT_COEF));    /* Franck : ajouté. font-size: 12px; */
    padding: 12px 10px;
    color: var(--WHITE)!important;
}

/*
Date range selection range
*/
.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
	background-color: var(--LIGHTER_BLUE)!important;
	}
/*
Date range tooltips
*/	
.date-picker-wrapper .date-range-length-tip{
	background-color: var(--COLOR_SURFACE_30)!important;
	color: var(--COLOR_ACTION_50)!important;
}
.date-picker-wrapper .date-range-length-tip:after {
	border-top: 4px solid var(--COLOR_SURFACE_30)!important;
}

.date-picker-wrapper .day.real-today{
    background-color: var(--COLOR_SURFACE_10)!important;
    border: 1px solid var(--COLOR_ACTION_50)!important;
    border-radius: 0.25rem;
}
.date-picker-wrapper .first-date-selected{
    background-color: var(--COLOR_ACTION_50)!important;
    color: var(--WHITE)!important;
}
 .date-picker-wrapper .last-date-selected {
    background-color: var(--COLOR_ACTION_50)!important;
    color: var(--WHITE)!important;
 }
 .date-picker-wrapper .month-wrapper table .day.checked{
    background-color: var(--COLOR_ACTION_50)!important;
    color: var(--WHITE)!important;
 }

.month-wrapper table .day.real-today.checked, .date-picker-wrapper .month-wrapper table .day.real-today.hovering {
	background-color: var(--COLOR_ACTION_50)!important;
    color: var(--WHITE)!important;
    border-radius: 0.25rem;
}

.month-element {
  display: inline;  /* Month name on 1 line instead of 2 */
}
/* .month-name{
    font-size: 12px;
    color:var(--COLOR_SURFACE_70)!important;
} */

/*.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
	background-color: var(--GREY)!important;
}*/

.dur-box {
    cursor:pointer;
    color: var(--COLOR_ACTION_60);
    width: 100%;
}

.dur-box-manual, .time-box-manual {
	color: deepskyblue!important;
    cursor:pointer;
}

.io-box {
    font-size: 0.8rem;
    top: -2px;
    right: -3px;
    position: relative;
    white-space: nowrap;
    display: inline-block;
    font-weight: bold;
    color: var(--COLOR_ACTION_60);
}

/* .io-box-manual:checked {
	background-color: deepskyblue!important;
    border: 0.12rem solid deepskyblue!important;
}

.io-box-manual {
	background-color: black!important;
    border: 0.12rem solid deepskyblue!important;
} */

/* The icon of the typ="time" inputs */
#right-bar__body input[type="time"]::-webkit-calendar-picker-indicator {
    position: relative;
    right: 5px; /* Move to the left */
    /* display: none; */    /* hide the default icon */
    background: transparent;
}

#right-bar__body input[type="time"] {
    width: 80px;
    border: 0;
    /* background-color:#00000000; */
    color: var(--COLOR_ACTION_60);
    /* text-align: right; */
}
#right-bar__body input[type="time"][value="00:00"] {
    text-decoration: line-through;
}

/* Android : remove arrow */
#right-bar__body input[type="time"] {
  -webkit-appearance: none; 
}
/* Android : remove margin previsouly used by the arrow */
#right-bar__body input[type="time"]::-webkit-date-and-time-value {
  margin: 0; 
}

/* Remove the default up-down arrows (spinners) */
/* Pour les navigateurs basés sur WebKit comme Chrome, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {	
	-webkit-appearance: none;
    margin: 0;
}
/* Pour Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}
/* Pour IE */
input[type="number"]::-ms-clear,
input[type="number"]::-ms-reveal {
    display: none;
}

input[type="number"] {
    border: 0;
    background-color:#00000000;
    color: var(--COLOR_ACTION_60);
    text-align: right;
    /* padding: 0 5px 0 0; */
    width: 1.7rem;
    cursor: pointer;
}

input[type="number"]::placeholder {
   color: var(--COLOR_ACTION_50);
}

input[type="number"] ul {
    color: var(--COLOR_ACTION_50)!important;
    text-align: right;
    width: 1.2rem;	/* Size reduced especially for the empty case: "--:--" */
    -moz-appearance: textfield;
}


/*
###############################################################################################################################################################
Dropdown list for number inputs
*/

.input_dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .input_dropbtn {
    border: none;
    background: none;
  }
  
  .input_dropdown-content {
    z-index: 5;
    position: absolute;
    left: -30px;
    top: 41px;
    width: 50px;
    height: auto !important;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
    overflow: hidden;
    width:auto;
  }
  
  .input_dropdown-content a {
    color: black;
    padding: 7px 10px;
    text-decoration: none;
    display: block;
    text-align: center; 
  }
  
  .input-number {
    width: 100%;
    text-align: right;
  }
  
  .input_dropdown-content a.selected {
    background-color: #007bff;
    color: white;
  }

/*
###############################################################################################################################################################
RESPONSIVE
###############################################################################################################################################################
*/

@media screen and (max-width: 896px) {
  .date-picker-wrapper .month-wrapper table .day.toMonth {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .date-picker-wrapper {
    width: 100%;
    padding: 0px !important;
  }

  .date-picker-wrapper .month-wrapper table, .date-picker-wrapper .month-wrapper table.month2 {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}