/* some of this might be nice for the btn class: (border-radius, box-shadow, bgcolor)
  .ElementsModal--pay-button {
    cursor: pointer;
    border: 0;
    width: 100%;
    text-align: center;
    height: 40px;
    box-shadow: inset 0 0 0 1px rgba(50, 50, 93, 0.1),
      0 2px 5px 0 rgba(50, 50, 93, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07);
    border-radius: 6px 6px 6px 6px;
    font-size: 16px;
    font-weight: 600;
  
    background-color: rgb(0, 116, 212);
    color: rgb(255, 255, 255);
  }
   */
/* 
.iphone {
	max-width: 150px;
	padding-left: 10px;
}

/* sm */
@media screen and (min-width: 576px) {
	.iphone {
		max-width: 190px;
		padding-left: 10px;
		margin-bottom: 10px;
	}
}

/* md */
@media screen and (min-width: 768px) {
	.iphone {
		max-width: 205px;
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
		margin-right: 50px;
	}
}

/*lg*/
@media screen and (min-width: 992px) {
	.iphone {
		max-width: 250px;
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
		/* padding-right: 20px; */
		margin-right: 100px;
	}
} */

.overflow-hidden { overflow: hidden; }

.iphone {
	position: absolute;
	right: 150px;
	bottom: -30%;
	width: 300px;
	max-width: 300px;
	height: 540px;
	opacity: .85;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}
.rounded-corners {
	border-radius: 25px;
}

.box-shadow { box-shadow: .25rem .25rem .75rem rgba(0, 0, 0, .05); }

.flex-equal > * {
	-ms-flex: 1;
	-webkit-box-flex: 1;
	flex: 1;
}

@media screen and (min-width: 768px) {
	.flex-md-equal > * {
		-ms-flex: 1;
		-webkit-box-flex: 1;
		flex: 1;
	}
}

.nowrap {
	white-space: nowrap;
}

.step {
	width: 100%;
	height: 100%;

}


a {
  color: #0351d8;
}

.nav-link{
   color: #0351d8 !important;
  /* color: #32b5d8 !important; */
}

a.nav-link:hover{
  text-decoration: underline;
}


/*
* Custom translucent site header
*/

li.active {
  color: #c2c2c2 !important;
  font-weight: bold;
  /*border-bottom: solid 1px #c2c2c2; */
}

.site-header {
	background-color: #fff;
}

.navbar-toggler {
	outline: none !important;
}

/* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
  .jumbotron {
	border-bottom: 0;
	padding: 2rem 2rem;
  }
}

/* START this is to remove the "spinner" from number fields (tag id)*/

/* Chrome, Safari, Edge, Opera */
.nospinner::-webkit-outer-spin-button,
.nospinner::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.nospinner[type=number] {
  -moz-appearance: textfield;
}

/* END spinner removal*/

/*
@media (min-width: 768px) {
	.card {
	  max-width: 400px;
	}
  }
*/

.alert {
  border-radius: .50rem;
}

.card, .jumbotron {
  border-radius: 1.00rem;
}

.product-description {
	min-height: 100px;
}

.card-img-top, .card-header:first-child  {
  border-radius: calc(1.00rem - 1px) calc(1.00rem - 1px) 0 0;
}

.faqs .card-header:first-child  {
  border-radius: calc(1.00rem - 1px) calc(1.00rem - 1px) calc(1.00rem - 1px) calc(1.00rem - 1px);
}

/* 
.card-img-top, .card-header:first-child  {
  border-radius: calc(1.00rem - 1px) calc(1.00rem - 1px) 0 0;
} */


.footer {
  padding: 10px;
  color: #c2c2c2;
  border-top: 1px solid #e5e5e5;
}

.faqs button {
	text-align: left;
}

.plans > .card {
	min-width: 230px;
}

.plans .card-body {
	margin: auto;
}

.report.card, .login.card {
  max-width: 400px;
  margin: auto;
}

.contact.card, .report.card, .register.card, .password-reset-email, .password-reset-password {
  max-width: 600px;
  margin: auto;
}

/*the check marks on plan items*/
.plans li svg {
  width: 18px;
  margin-right: 5px;
  color: #0e667c;
}

.plans li {
  min-height: 26px;
}

/* modals were causing the logo to adjust over...it's adding padding to all containers/body elements */
.site-header {
  padding-right: 15px !important;
  margin-right: auto !important;
}

.tooltip-inner {
  text-align: left;
}


.carousel-indicators,
.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: invert(1);
}

/*this fixes issues where the header and other items w/ margin-left/right auto would adjust slightly due to scroll bars showing */
html {
	width: 100vw;
	overflow-x: hidden;
  }