/*
TERMS & CONDITIONS
This website is copyright protected and uses strict security protocols. Do not copy, drag or remove anything from this website or its source code.
https://virtualyard.com/terms-and-conditions for more information.
*/

/* Variables */
:root {
  --gray-offset: rgba(0, 0, 0, 0.03);
  --gray-border: rgba(0, 0, 0, 0.33);
  --gray-light: rgba(0, 0, 0, 0.4);
  --gray-mid: rgba(0, 0, 0, 0.7);
  --gray-dark: rgba(0, 0, 0, 0.9);
  --body-color: var(--gray-mid);
  --headline-color: var(--gray-dark);
  --accent-color: #0066f0;
  --error-color: red;
  --body-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 6px;
  --form-width: 343px;
  --color-main: #0a83e4;
  --color-main-border: #0a83e461;
  --color-input-bg: #f3f3f3;
  --color-black: #1d1d1f;
}

label,
input,
select,
textarea,
button {
    outline: none;
	 -moz-box-shadow: none !important;
	 -webkit-box-shadow: none !important;
	 box-shadow: none !important;
}

h1 {
	font-weight: 600;
}

a {
	color: var(--color-main);
}

.navbar-brand img {
	max-width: 220px;
	max-height: 30px;
}
.text-muted {
	font-weight: 400;
}

.alert-secondary {
	color: #6c757d;
	border-color: var(--color-input-bg);
    background-color: var(--color-input-bg);
}


.bottom-footer {
	display: block; height: 30vh;
}

.powered-by {
	height: 26px;
}

.optionTitle {
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.optionSubTitle {
	display: block;
    text-align: left;
    line-height: 0px;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 400;
    margin-top: -3px;
}


.modal {
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	opacity: 1;
}

.modal-body {
	padding-bottom: 60px;
	max-height: calc(70vh - 60px);
    overflow-y: scroll;
}

.modal-body .row>* {
	padding:0px;
}


.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0,50px);
}


.modal.show .modal-dialog {
    transform: none;
}

.modal-backdrop.show {
	opacity: 0.5;
	
}

#btnLogout {
	margin-left: 100px;
}

.btnLearnMore {
	display: block;
    text-align: left;
    line-height: 0px;
    margin-bottom: 10px;
}

.alert .btnNotice {
	display: block;
    text-align: left;
	line-height: normal;
    margin: 6px 0px 0px 0px;
	margin-bottom: 10px;
}



#main-nav {
	position: fixed;
	z-index: 999;
}

a {
	text-decoration: none;
	font-size: 14px;
    font-weight: 400;
	letter-spacing: -.016em;
}

.font-bold {
	font-weight: bold;
}

.font-smaller {
	font-size: 0.8em;
}

small.branding, small.branding a {
	font-size: 10px;
}

sup {
	font-size: 0.6em;
}

.hidden {
	display: none !important;	
}

.wizard {
	opacity: 0;
	height: 0px;
	overflow: hidden;
}

.wizard.active {
	
	transition: opacity 1.25s ease-in-out;
	-moz-transition: opacity 1.25s ease-in-out;
	-webkit-transition: opacity 1.25s ease-in-out;
	height: auto;
	opacity: 1;
}


.tab-group {
	opacity: 0;
	height: 0px;
	overflow: hidden;
}

.tab-group.active {
	
	transition: opacity 1.25s ease-in-out;
	-moz-transition: opacity 1.25s ease-in-out;
	-webkit-transition: opacity 1.25s ease-in-out;
	height: auto;
	opacity: 1;
	
}

.form-floating>label {
	padding-left: 20px;
}

.form-floating>.form-control, .form-select {
	padding-left: 19px;
}

.form-select-lg, .form-control:not(.no-style), .form-select {
	border-radius: 40px;
	background-color: var(--color-input-bg);
}

.form-control.no-style {
	border: none;
	margin: 2px;
}

.card-atm {
	border-radius: 40px;
    padding: 8px 0px 8px 0px;
	background-color: var(--color-input-bg);
}

.card-atm input {
	border-radius: 40px;
	background-color: var(--color-input-bg);
}

.card-atm input:focus {
	background-color: var(--color-input-bg);
}

.btn-primary {
	background-color: var(--color-main);
	border-color: var(--color-main);
	border-radius: 40px;
    line-height: 40px;
	font-weight: 400;
}

.card {
	border: none;
}

.card-padding {
	padding-left: 20px;
	padding-right: 20px;
}

.card-spacer {
	margin-top: 20vh;
}

.col-design {
	max-height: 86vh;
	overflow-y: scroll;
}

.btn-pill {
	width: 100%;
    border: 1px solid var(--gray-border);
    border-radius: 40px;
    line-height: 40px;
    margin-top: 20px;
    font-weight: bold;
    font-size: 0.9em;
	padding: 8px 16px;
}


.btn-check:active+.btn-pill, .btn-check:checked+.btn-pill, .btn-pill.active, .btn-pill:active, .show>.btn-pill.dropdown-toggle {
    border: 3px solid var(--color-main);
	padding: 6px 14px;
}

.btn-outline-primary {
	border-radius: 40px;
    line-height: 40px;
	border: 3px solid var(--color-black);
	color: var(--color-black);
	font-weight: 400;
}

.btn-block {
	width: 80px;
    height: 80px;
    line-height: 66px;
	border-color: #fff;
	background-color: #fff !important;
	padding: 0px;
	overflow: hidden;
	border-radius: 12px;
}

.btn-check:active+.btn-block, .btn-check:checked+.btn-block, .btn-block.active, .btn-block:active, .show>.btn-block.dropdown-toggle {
    border: 3px solid var(--color-main);
}

.btn-block:hover {
	background-color: var(--color-main);
	border-color: var(--color-main);
}

.btn-block img {
	width: 100%;
	border: 4px solid #fff;
	border-radius: 12px;
}

.btn-wheels {
	border-radius: 50%;
	background-color: #fff;
}

.white {
	
}

.blue {
	
}

.red {

}

.grey {
	
}

.btn-tab-frame {
	background-color: var(--color-input-bg);
	border-radius: 40px;
}

.btn-tabbed {
	width: 50%;
	border-radius: 40px;
	margin: 4px;
}

.btn-check:active+.btn-tabbed, .btn-check:checked+.btn-tabbed, .btn-tabbed.active, .btn-tabbed:active, .show>.btn-tabbed.dropdown-toggle {
    background-color: #fff;
    box-shadow: inset 0 0 0 0 transparent, 0 1px 8px 0 rgb(0 0 0 / 10%);
}

.list-group-item {
	border: none;
	padding-left: 20px;
}


.card .dynamic-option-image {
	display: none;
}


.card-title {
	margin-top: 20px;
}

.modal-header {
	border: none;
}

.btn-close {
	opacity: 1;
}

.form-control.locked {
	pointer-events: none;
}

@media only screen and (max-width: 992px) {
	
	#btnLogout {
		margin-left: 0px;
		width: 100%;
	}

	.modal-content {
		border: none;
	}


	.row>* {
		padding-left: 0px;
		padding-right: 0px;
	}



	.card .dynamic-option-image {
		max-height: 30vh;
		display: block;
		width: 100%;
		object-fit: cover;
	}

	.carousel-item {
		height: auto;
	}
  	.carousel-item, .carousel-item > img {
		position: inherit;
		top: auto;
		-ms-transform: none;
		transform: none;
		height: auto;
		width: 100vw;
		object-fit: contain;
	}
	
	.col-design {
		max-height: none;
	}
	
	.card-spacer {
		margin-top:4vh;
	}
	
	

	.carousel-control-next-icon, .carousel-control-prev-icon, .carousel-indicators [data-bs-target] {
		display: none;
	}


	#main-nav {
		position: relative;
	}
	
	
	.modal.fade .modal-dialog {
		transition: bottom .3s ease-out;
	}

	.modal-dialog-centered {
		bottom: -100vh;
		position: absolute;
		width: 100%;
		margin: 0;
		min-height: auto;
	}
	
	
	.modal.show .modal-dialog-centered {
		bottom: -2px;
		left: 50%;
    	transform: translate(-50%, 0);
	}
	
	.modal-content {
		border-radius: 25px 25px 0px 0px;
	}
}