/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Apr 10, 2024, 10:24:04 AM
    Author     : Salvation Repair
*/
:root{
    --bs-btn-disabled-bg:7f7f7f;
    --bs-btn-disabled-border-color:7f7f7f;
}
body{
    overflow-x:hidden;
    background-color: white !important;
    
}
#page-content {
    width: 100%;
}
.full-address{
    cursor: pointer;
    color:var(--secondary);
}
.repair-damage {
	overflow-y: scroll;
	height: calc(100vh - 256px);
}
.gif-spinner{
    justify-self: center !important;
}
.device-list .border:hover {
	border: 1px solid black !important;
	transition: border-color .5s ease-in-out;
	cursor: pointer;
}
.form-floating>.form-control:active~label, .form-floating>.form-control:focus~label {
    transform: scale(.85) translateY(-2.5rem) translateX(0.15rem) !important;
    transform-origin: -2.5rem 0.15rem !important;
    transition: transform .1s ease-in-out;
}
.device-list img {
	max-height: 5.5rem;
	justify-self: center;
}

.text-center,
.device-list-label {
	text-align: center;
}

@media (min-width: 768px) {
	.device-list figure {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 768px) {
	.device-list figure {
		display: flex;
		align-items: center;
	}

	.device-list figcaption {
		font-size: 120%;
		margin-left: 1rem;
		font-weight: 500;
	}

	.device-list .d-grid {
		display: flex !important;
	}

	.device-list-label {
		text-align: left;
		width: auto;
	}
}

/*****************************
  dropdown
  *****************************/
#page-content select {
	min-width: 350px;
	width: 100%;
}

select {
	position: relative;
}

select {
	appearance: none;
	-webkit-appearance: none;
	font-size: 1.15rem;
	padding: 0.675em 6em 0.675em 1em;
	background-color: rgba(255, 255, 255, .5);
	border-radius: 0.25rem;
	cursor: pointer;
	color: rgb(110, 118, 125);
	border: 1px solid rgb(110, 118, 125);
	height: 3.5rem;
	outline: none;
	cursor: pointer;
	appearance: none;
	transition: border-color 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s;
	z-index: 1;
}

select::before,
select::after {
	--size: 0.3rem;
	content: "";
	position: absolute;
	right: 1rem;
	pointer-events: none;
}

select::before {
	border-left: var(--size) solid transparent;
	border-right: var(--size) solid transparent;
	border-bottom: var(--size) solid black;
	top: 40%;
}

select::after {
	border-left: var(--size) solid transparent;
	border-right: var(--size) solid transparent;
	border-top: var(--size) solid black;
	top: 55%;
}

.select-chevron {
	position: absolute;
	cursor: pointer;
	justify-self: right;
	align-self: center;
	right: 50px;
	z-index: 0;
}

.select-chevron.down {
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.state-chevron.down {
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.state-chevron {
	position: relative;
	cursor: pointer;
	justify-self: right;
	align-self: center;
	left: 92%;
	z-index: 0;
	top: -50%;
}

/**********************************
textarea
**********************************/

.form-control:hover,
.form-control:focus,
.form-control:active {
	border-color: rgba(255, 255, 255, .5) !important;
	box-shadow: rgb(110, 118, 125) 0px 0px 0px 1px inset
}

#infoFloatingInput {
	height: 12.5rem;
	line-height: 1.2rem;
}

.detail-container {
	display: flex;
	flex-direction: row;
	-webkit-box-pack: justify;
	justify-content: space-between;
}

.left-container {
	display: flex;
	flex-direction: row;
	gap: 12px;
	width: 100%;
}

.left-container img {
	width: 80px;
	object-fit: contain;
}

.summary-section {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	-webkit-box-pack: center;
	justify-content: center;
	gap: 2px;
	align-content: center;
	flex-wrap: wrap;
	justify-content: left;
}

.summary-right {
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
	color: rgb(0, 0, 0);
	font-size: 1rem;
	text-decoration: underline;
	cursor: pointer;
}

.summary-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.summary-list-item {
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	list-style: none;
}

.summary_detail {
	display: flex;
	flex-direction: row;
	-webkit-box-align: center;
	align-items: center;
	gap: 16px;
}

.summary-span {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: fit-content;
	height: 1.5rem;
	color: rgb(110, 118, 125) !important;
}

.summary-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.summary-text.active {
	color: black;
}

#administrative_area_level_1 {
	background-color: transparent;
}

#selectDeviceDetail {
	display: none;
	transition: display .2s ease-in-out
}

#selectDeviceColor {
	transition: display .2s ease-in-out
}

#spinner {
	margin: auto auto;
}

#page-content {
	justify-content: center;
	display: flex;
	position: relative;
	align-self: start;
}

#left-container {
	background: transparent;
	align-content: center;
	display: flex;
	flex-wrap: wrap;
}

.container-repair .list-group-item {
	color: black !important;
}

.container-repair .btn-primary,
.container-repair .btn-primary:active,
.container-repair .btn-primary:focus,
.container-repair .btn-primary:focus-visible {
	background-color: var(--secondary);
	border-color: var(--secondary);
	transition: all .5s ease-in-out;
}

.text-blue {
	color: var(--bs-btn-active-bg) !important;
}

#bottom-nav {
	position: inherit;
	background-color: white;
	align-self: end;
}

@media (min-width: 768px) {
	#page-content {
		overflow-y: auto;
	}

	#content_start {
		max-height: 100% !important;
	}
}

@media (min-width: 768px) {
	.h-100vh {
		flex-direction: row;
		height: calc(80vh);
	}
}

/* checkbox styles */
.container_checkbox {
	display: inline-flex;
	align-items: flex-start;
	box-sizing: border-box;
	text-align: left;
	line-height: 1.3;
	transition: box-shadow 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s, border-color 0.2s ease-in-out 0s;
	padding: 1rem;
	color: rgb(110, 118, 125);
	background-color: rgb(255, 255, 255);
	border-radius: 8px;
	border-color: rgb(110, 118, 125);
	box-shadow: rgb(165, 170, 175) 0px 0px 0px 1px inset;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	width: 100%;
}

.container_checkbox:hover,
.container_checkbox:active,
.container_checkbox:focus {
	border-color: rgb(255, 255, 255);
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	box-shadow: rgb(110, 118, 125) 0px 0px 0px 2px inset;
}

.checkbox {
	display: inline-block;
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkbox input:checked~.checkmark,
.container_checkbox:hover~.checkmark {
	background-color: #fff;
	border-color: black;
	color: black;
}

.checkbox input:checked~.checkmark:after {
	opacity: 1;
}

.checkbox:hover input~.checkmark {
	background-color: #eee;
}

.checkbox:hover input:checked~.checkmark {
	background-color: #fff;
}

.checkbox .checkmark {
	position: absolute;
	top: 4px;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: #fff;
	border: 1px solid #333;
	transition: background-color 0.25s ease;
	border-radius: 3px;
}

.checkbox .checkmark:after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #333;
	border-width: 0 1px 1px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.checkbox .checkbox_font {
	color: #333;
	line-height: 1.4;
	font-size: 16px;
}

/** end checkbox **/
.container-repair {
	flex: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 1440px;
}

.mt-50 {
	margin-top: 90% !important;
}

.bottom-repair {
	width: 100%;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
	z-index: 1;
	background: rgb(255, 255, 255);
}

@media (max-width: 768px) {
	#bottom-nav {
		position: fixed !important;
		bottom: 0px;
		z-index: 1;
	}

	#page-content {
		height: 100%;
		align-content: center;
		justify-content: left;
		display: grid;
		position: relative;
	}
}

@media (min-width: 768px) {
	.bottom-repair {
		height: 112px;
		border-top: 1px solid rgb(230, 230, 235);
		background-color: white;
		position: fixed !important;
		bottom: 0px;
		right: 0;
		left: 0;
		margin: auto;
	}
}

.bottom-repair {
	height: 80px;
	padding: 16px;
	border-top: none;
}

@media (max-width: 415px) {

	.h1,
	h1 {
            font-size: calc(1.375rem);
            text-align: left;
	}

	.h5,
	h5 {
		font-size: calc(1rem - .8vw);
		text-align: left;
	}

	#left-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

#page-content {
	padding: 0px !important;
}

@media (min-width: 992px) {
	.device-list .device {
		width: 20% !important;
	}

	.w-md-100 {
		width: 100vw;
	}
}

.nav-pills .nav-link,
.nav-pills .show>.nav-link {
	color: black;
	background-color: white;
	border-color: rgba(0, 0, 0, .1);
	border: 1px solid rgba(0, 0, 0, .5);
}

.summary-text.disabled {
	display: none;
}

.bg-shaded {
	background: rgb(240, 240, 245);
	border-radius: 8px;
	padding: 8px;
}

li.summary-list-item.active i,
li.summary-list-item.active svg {
	font-weight: bold !important;
	color: black !important;
}

li.summary-list-item.active .summary-text {
	font-weight: bold !important;
	color: black !important;
}

#shipping-location-address {
	display: none !important;
	transition: display .5s ease-in-out;
}

#shipping-location-address.active {
	display: flex !important;
	transition: display .5s ease-in-out;
}

#customer-info {
	display: none !important;
	transition: display .5s ease-in-out;
}

#customer-info.active {
	display: flex !important;
	transition: display .5s ease-in-out;
}

#details-pricing.active {
	display: flex !important;
	transition: display .5s ease-in-out;
}

#details-pricing {
	display: none !important;
	transition: display .5s ease-in-out;
}

li.summary-list-item.active #device-location {
	font-weight: bold !important;
	color: black !important;
}

.error {
	border-color: red !important;
}

/** Start map **/
#map {
	height: 100%;
	width: 100%;
	display: grid;
	z-index: 1;
}

@media (min-width: 768px) {
	.map {
		margin-left: auto;
		margin-right: auto;
	}
}

.map {
	height: 200px;
	margin: 16px -16px 0px;
}

/** start #datetimepicker **/
#datetimepicker {
	display: none;
}

.xdsoft_datetimepicker {
	z-index: 1 !important;
	justify-self: baseline !important;
	align-self: baseline !important;
}

#contact .btn,
#repair-scheduled .btn {
	padding: 0.75rem 1.2rem;
	font-size: 1rem;
	font-family: "Zilla Slab", serif;
	outline: 0;
}

#repair-scheduled .btn {
	text-align: center;
	vertical-align: middle;
	user-select: none;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: all .5s ease-in-out;
}

@media (min-width: 991px) {
	#repair-scheduled button {
		flex: 1 1 0%;
	}
}

.border-blue {
	border-color: var(--blue) !important;
}

.bg-blue {
	background: var(--blue) !important;
}

.btn-repair {
	width: 100%;
}

.btn-repair .active {
	width: 250px;
	background: var(--blue) !important;
	border-color: var(--blue) !important;
}

.btn-repair .active::before,
.btn-repair .active::after {
	border-color: var(--blue) !important;
}

.btn-outline-dark {
	border-color: rgb(26, 28, 30) !important;
	transition: all .5s ease-in-out;
}

.btn-outline-dark:hover {
	background-color: transparent !important;
	border-color: transparent !important;
	transition: all .5s ease-in-out;
}

.btn-outline-dark::before {
	border-bottom: 1px solid rgb(26, 28, 30) !important;
	border-left: 1px solid rgb(26, 28, 30) !important;
}

.btn-outline-dark::after {
	border-top: 1px solid rgb(26, 28, 30) !important;
	border-right: 1px solid rgb(26, 28, 30) !important;
}

.atcb-button:not(.atcb-no-text, .atcb-modal-style, .atcb-dropoverlay, .atcb-single) {
	min-width: 0 !important;
}

.atcb-button {
	align-items: center;
	background-color: var(--blue) !important;
	border: 1px solid var(--blue);
	border-radius: 10rem !important;
	box-shadow: none !important;
	box-sizing: initial !important;
	color: white !important;
	cursor: pointer;
	display: flex;
	font-family: var(--font);
	font-size: 1em;
	font-weight: var(--btn-font-weight);
	justify-content: center;
	line-height: 1.5em;
	margin: .13em;
	max-width: 300px;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	position: relative;
	text-align: center;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	width: auto;
	z-index: 2 !important;
}

.addToCalOptions {
	/* Animation related styles */
	overflow-y: hidden;
	max-height: 0px;
	-webkit-transition: max-height .7s cubic-bezier(0, 1, 0.5, 1);
	-moz-transition: max-height .7s cubic-bezier(0, 1, 0.5, 1);
	-ms-transition: max-height .7s cubic-bezier(0, 1, 0.5, 1);
	transition: max-height .7s cubic-bezier(0, 1, 0.5, 1);


	background-color: #fff;
	width: 100%;
	border: none;
	box-sizing: border-box;

	a {
		color: #000;
		padding: 12px 20px;
		text-decoration: none;
		display: block;

		&:hover {
			background-color: #dde6e3;
		}
	}
}

.addToCal.open+.addToCalOptions {
	max-height: 210px;
	border: 1px solid #dde6e3;
}

.needsDateTime {
	color: var(--bs-btn-disabled-color);
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.4) !important;
	border-color: rgba(0, 0, 0, 0.4) !important;
	opacity: var(--bs-btn-disabled-opacity);
	cursor: not-allowed;
	pointer-events: none;
}

#app-time {
	display: none !important;
	transition: display .5s ease-in-out;
}

#app-time.active {
	display: flex !important;
	transition: display .5s ease-in-out;
}

#btn-label {
	width: 250px;
}

ul .bullets {
	list-style-type: circle !important;
	list-style: circle
}

.summary-list-item.active,
.summary-list-item.active .summary-section small {
	font-weight: bold !important;
	color: black !important;
}

.active {
	color: black !important;
}

.font-sm {
	font-size: 14px !important;
}

.align-content-between {
	align-content: space-between !important;
}

#extended-fee {
	display: flex;
}

#btn-calendar {
	color: white !important;
	transition: .5s color ease-in-out;
}

#btn-calendar:hover {
	color: rgb(5, 82, 169);
}