/************************************
Table of Contents 
************************************/

/*
- General
- Passwords
- Checkbox
- Radios
- Text Inputs
- Multihandle Range Slider
- Single Handle Range Slider
- Quantity
- Number Selectors
- Toggle Switch
*/


/****** General ******/

label, 
select, 
input,
textarea,
button {
	font-family: var(--font-oxanium);
    font-weight: var(--font-fw-regular);
}
input,
textarea,
.form-control,
.form-select
 {
	border-color: var(--base-color-grey-400);
	border-radius: 0px;
}
.form-control,
.form-control:focus,
.form-select,
.form-select:focus {
	padding: 1em;
}

input:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus{
    border-color:var(--base-color-npblue-300);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--base-color-npblue-300);
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--base-color-npblue-300);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--base-color-npblue-300);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type=number] {
	-moz-appearance: textfield;
}
.input[type=radio],
.form-switch .form-check-input {
	cursor: pointer;
}


/****** Passwords ******/

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--base-color-grey-400);
    border-left: none 0px;
    color: var(--base-color-grey-400);
}
.input-group button:hover {
	color: var(--base-color-grey-400);
	background: transparent;
}
.input-group input {
	border-right: none;
}


/****** Checkbox ******/

.form-check-input,
.form-check-input:focus {
	border-color: var(--base-color-grey-400);
}
.form-check-input:checked {
    background-color: var(--base-color-black);
    border-color: var(--base-color-black);
}


/****** Radios ******/

.form-check-input:checked[type=radio] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
	background-size: 22px;
	background-color: var(--base-color-white);
}


/****** Text Inputs ******/

/*.form-control:placeholder {*/
/*	color: var(--base-color-grey-600);*/
/*	opacity: 1;*/
/*}*/


/****** Multihandle Range Slider ******/

/* Slide BG */

.ui-slider {
	position: relative;
}
.ui-slider-horizontal {
    height: 2px;
}
.ui-widget-content {
    background: var(--base-color-grey-300);
}
.ui-widget.ui-widget-content {
    border: 1px solid var(--base-color-grey-300);
}

/* Slide Range */

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
    border: solid 1px var(--base-color-npblue-900);
    background-color: var(--base-color-npblue-900);
    top: -1px;
    height: 100%;
}

/* Handles */

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer;
    -ms-touch-action: none;
    touch-action: none;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -0.3em;
    margin-left: -0.6em;
}
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default,
.ui-widget-header .ui-state-focus {
    border: solid 1px var(--base-color-npblue-900);
    background-color: var(--base-color-npblue-900);
    color: var(--base-color-npblue-900);
    font-weight: normal;
    outline: none;
}


/****** Single Handle Range Slider ******/

input[type=range].rangeslider {
	width: 100%;
	height: 1em;
	-webkit-appearance: none;
}

/* progress support */

input[type=range].rangeslider.rangeslider-progress {
	--range: calc(var(--max) - var(--min));
	--ratio: calc((var(--value) - var(--min)) / var(--range));
	--sx: calc(0.5 * 10px + var(--ratio) * (100% - 10px));
}
input[type=range].rangeslider:focus {
	outline: none;
}

/* webkit */

input[type=range].rangeslider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	border-radius: 1em;
	border: none;
	box-shadow: none;
	margin-top: calc(2px * 0.5 - 10px * 0.5);
}
input[type=range].rangeslider.black::-webkit-slider-thumb {
	background: var(--base-color-black);
}
input[type=range].rangeslider.white::-webkit-slider-thumb {
	background: var(--base-color-white);
}
input[type=range].rangeslider::-webkit-slider-runnable-track {
	height: 2px;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
input[type=range].rangeslider.black::-webkit-slider-runnable-track {
	background: var(--base-color-grey-300);
}
input[type=range].rangeslider.white::-webkit-slider-runnable-track {
	background: var(--base-color-grey-600);
}
input[type=range].rangeslider.rangeslider-progress.black::-webkit-slider-runnable-track {
	background: linear-gradient(var(--base-color-black),var(--base-color-black)) 0/var(--sx) 100% no-repeat, var(--base-color-grey-300);
}
input[type=range].rangeslider.rangeslider-progress.white::-webkit-slider-runnable-track {
	background: linear-gradient(var(--base-color-white),var(--base-color-white)) 0/var(--sx) 100% no-repeat, var(--base-color-grey-600);
}

/* mozilla */

input[type=range].rangeslider::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border-radius: 1em;
	border: none;
	box-shadow: none;
}
input[type=range].rangeslider.black::-moz-range-thumb {
	background: var(--base-color-black);
}
input[type=range].rangeslider.white::-moz-range-thumb {
	background: var(--base-color-white);
}
input[type=range].rangeslider::-moz-range-track {
	height: 2px;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
input[type=range].rangeslider.black::-moz-range-track {
	background: var(--base-color-grey-300);
}
input[type=range].rangeslider.white::-moz-range-track {
	background: var(--base-color-grey-600);
}
input[type=range].rangeslider.rangeslider-progress.black::-moz-range-track {
	background: linear-gradient(var(--base-color-black),var(--base-color-black)) 0/var(--sx) 100% no-repeat, var(--base-color-grey-300);
}
input[type=range].rangeslider.rangeslider-progress.white::-moz-range-track {
	background: linear-gradient(var(--base-color-white),var(--base-color-white)) 0/var(--sx) 100% no-repeat, var(--base-color-grey-600);
}

/* ms */

input[type=range].rangeslider::-ms-fill-upper {
	background: transparent;
	border-color: transparent;
}
input[type=range].rangeslider::-ms-fill-lower {
	background: transparent;
	border-color: transparent;
}
input[type=range].rangeslider::-ms-thumb {
	width: 10px;
	height: 10px;
	border-radius: 1em;
	border: none;
	box-shadow: none;
	margin-top: 0;
	box-sizing: border-box;
}
input[type=range].rangeslider.black::-ms-thumb {
	background: var(--base-color-black);
}
input[type=range].rangeslider.white::-ms-thumb {
	background: var(--base-color-white);
}
input[type=range].rangeslider::-ms-track {
	height: 2px;
	border-radius: 0;
	border: none;
	box-shadow: none;
	box-sizing: border-box;
}
input[type=range].rangeslider.black::-ms-track {
	background: var(--base-color-grey-300);
}
input[type=range].rangeslider.white::-ms-track {
	background: var(--base-color-grey-600);
}
input[type=range].rangeslider.rangerangeslider-progress::-ms-fill-lower {
	height: 2px;
	border-radius: 0px 0 0 0px;
	margin: -undefined 0 -undefined -undefined;
	border: none;
	border-right-width: 0;
}
input[type=range].rangeslider.rangerangeslider-progress.black::-ms-fill-lower {
	background: var(--base-color-black);
}
input[type=range].rangeslider.rangerangeslider-progress.white::-ms-fill-lower {
	background: var(--base-color-white);
}


/****** Calendar ******/

/* General */

.datepicker td, 
.datepicker th {
	padding: 6px 8px;
	color: var(--base-color-black);
    text-align: center;
}
.datepicker th.dow {
	color: var(--base-color-grey-400);
	font-size:  0.75rem;
	font-weight: var(--font-fw-regular);
}
.datepicker table tr td.disabled {
	color: var(--base-color-grey-400);
}

/* Day selector */

.datepicker table tr td.active,
.datepicker table tr td.active.active, 
.datepicker table tr td.active.disabled {
	background-image: none;
	background-color: var(--base-color-npblue-900);
	border-radius: 50%;
	text-shadow:  none;
}
@media (hover: hover) {
	.datepicker .datepicker-days table tr td.active.disabled:hover, 
	.datepicker .datepicker-days table tr td.active:hover,
	.datepicker .datepicker-days table tr td.active.active:hover {
		background-color: var(--base-color-npblue-900);
	}
	.datepicker .datepicker-days table tr td:hover,
	.datepicker .datepicker-days table tr td:hover,
	.datepicker .datepicker-days table tr td span.focused, 
	.datepicker .datepicker-days table tr td span:hover,
	.datepicker .datepicker-days table tr td.day.focused, 
	.datepicker .datepicker-days table tr td.day:hover {
		border-radius: 50%;
		background-color: var(--base-color-npblue-100);
	}
}

/* Month & Year selector */

.datepicker table tr td span.focused,
.datepicker table tr td span.active.active {
	background-image: none;
	background-color: var(--base-color-npblue-900);
	color: var(--base-color-white);
}
@media (hover: hover) { 
	.datepicker table tr td span:hover {
		background-color: var(--base-color-npblue-100);
		color: var(--base-color-black);
	}
	.datepicker table tr td span.focused:hover,
	.datepicker table tr td span.active.active:hover {
		background-color: var(--base-color-npblue-900);
		color: var(--base-color-white);
	}
}

/****** Quantity ******/

.count {
    color: var(--base-color-black);
    text-align: center;
    max-width: 2em;
    border-color: transparent;
}
input.count,
input.count:focus {
	padding: initial;
}
.qty-btn {
	color: var(--base-color-white);
	width: 24px;
	height: 24px;
	padding: 0px;
	border-radius: 50%;
	font-size: 1.5rem;
    line-height: 1.325rem;
}
.qty-btn.black-bg {
	border: solid 2px var(--base-color-black);
}
@media (hover: hover) {
    .qty-btn.black-bg:hover {
	    background-color: var(--base-color-npblue-900);
	    border-color: var(--base-color-npblue-900);
	}
}
.qty-btn.npblue-900-bg {
	border: solid 2px var(--base-color-npblue-900);
}
@media (hover: hover) {
    .qty-btn.npblue-900-bg:hover {
	    background-color: var(--base-color-black);
	    border-color: var(--base-color-black);
	}
}
.zero .disabled,
.zero .disabled:hover {
	background-color: transparent;
    border-color: var(--base-color-grey-400);
    color: var(--base-color-grey-400);
    cursor: initial;
}
@media (hover: hover) {
	.zero .disabled:hover {
		background-color: transparent;
	    border-color: var(--base-color-grey-400);
	    color: var(--base-color-grey-400);
	    cursor: initial;
	}
}


/****** Number Selectors ******/

.numberselector {
	border-radius: 50%;
	border: solid 1px var(--base-color-black);
	width:  46px;
	padding-left: 0px;
	padding-right: 0px;
	font-weight: var(--fw-medium);
}
.numberselector.active {
    background-color: var(--base-color-npblue-900);
    border-color: var(--base-color-npblue-900);
    color: var(--base-color-white);
}
@media (hover: hover) {
    .numberselector:hover {
	    background-color: var(--base-color-npblue-900);
	    border-color: var(--base-color-npblue-900);
	    color: var(--base-color-white);
	}
}

/****** Toggle Switch ******/

.form-switch .form-check-input {
	width: 2em;
	height: 1.25em;
    margin-left: -2.5em;
    border-color: var(--base-color-grey-400);
    background-color: var(--base-color-grey-400);
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
}
.form-switch .form-check-input,
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");	
}
.form-switch .form-check-input.npblue-900-bg:checked {
	background-color: var(--base-color-npblue-900);
	border-color: var(--base-color-npblue-900);
}
.form-switch .form-check-input.black-bg:checked {
	background-color: var(--base-color-black);
	border-color: var(--base-color-black);
}
.form-check-input:active {
    filter: brightness(100%);
}

input#datepicker-returndate.form-control:disabled{
    background-color: var(--base-color-grey-200);
    color:var(--base-color-grey-500);
}

form#find-flight input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}