@import url("countrypicker.css");

nav {
	width: 100%;
}

b.sidebtn>label>a {
	font-size: 20px;
}

.scroll-container {
  width: 100%;
  height: 100%;
  /*min-height: 450px;*/
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: white;
  text-shadow: 0 0 3px var(--black);
  font-family: "Merriweather", serif;
}

.scroll-container>div {
	padding: 10px;
	text-align: center;
	width: 100%;
	height: 100%;
	/*background-color: red;*/
}

.scroll-container .img {
	background: url("../img/phonepc.gif") no-repeat left fixed;
	background-size: contain;
}

.scroll-container .reset {
	background: url("../img/padlock.html") no-repeat left fixed;
	background-color: var(--mbg3);
	background-size: contain;
}

.scroll-container .img img {
	opacity: 0.5;
}

.scroll-container .img h1 {
  font-size: 4vw;
  font-weight: bolder;
  color: var(--mbg2);
  opacity: 0.7;
  margin-top: -30px;
}

.scroll-container .noimg h1 {
  margin-top: 75%;
}

.scroll-container #form {
	background-image: linear-gradient(to bottom right, var(--mbg), var(--mbg3), var(--mbg));
	padding-top: 100px;
	text-align: center;
}

.scroll-container #form>div {
	padding: 10px;
	border-top: 1px solid var(--mbg);
	border-radius: 10px;
}

.scroll-container #form>div>h1 {
	background: var(--mbg2);
	max-width: 300px;
	padding: 10px;
	border-bottom: 1px solid var(--mbg);
	border-radius: 10px;
	margin: -30px auto 20px auto;
	color: var(--mbg3);
	font-size: 30px;
	font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
}

.scroll-container #form div[l] {
	margin-top: 15%;
}

.scroll-container #form div[s] {
	margin-top: 2%;
}

.scroll-container #form div[r] {
	margin-top: 20%;
}

.scroll-container #form span[btn] {
	display: block;
	margin-top: 10px;
}

.scroll-container #form span[btn] p {
	display: inline-block;
	font-size: 13px;
	margin-right: 10px;
}

.scroll-container #form span[btn] p a {
	text-decoration: underline;
	color: var(--mbg2);
}

input, select, textarea {
	width: 98%;
}

div.countrypicker, div.iti--allow-dropdown, .scroll-container #form [fld] {
  width: 49%;
  display: inline-block;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 49%;
}

.scroll-container #form div[s]>span {
	display: block;
	margin-top: 15px;
	margin-bottom: 10px;
	font-size: 12px;
}


@media only screen and (max-device-width: 950px), only screen and (max-width: 950px) {
	.scroll-container {
	  height: auto;
	  min-height: 100%;
	}

	.scroll-container>div {
		padding: 10px;
		height: auto;
	  	min-height: 100vh;
	}

	.scroll-container .img {
		display: none;
	}
}

@media only screen and (max-device-width: 460px), only screen and (max-width: 460px) {
	.scroll-container>div {
		padding: 5px;
	}

	input, select, textarea {
		width: 99%;
	}

	div.countrypicker, div.iti--allow-dropdown, .scroll-container #form [fld] {
	  width: 99%;
	  display: block;
	}

	.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
	  width: 99%;
	}
}