/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/montserrat-v26-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/montserrat-v26-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root{
	--bg: #fed036;
	--bg-lighter: #b30a40;
	--bg-neutral: #df2762;
	--text-negative: red;
	--green-bg:#125188;
	--danger: #ff8e8e;
	--danger-bg: #400606;
}

html, body {
	height: 100%;
	width: 100%;
}
body{
	font-family: 'Montserrat';
	line-height: 1.6;
	background: var(--bg);
background: linear-gradient(90deg,rgba(254, 208, 54, 1) 0%, rgba(255, 220, 105, 1) 50%, rgba(232, 191, 56, 1) 100%);
	color: white;
}

.fullscreen{

	height: 100vh;
	width: 100vw;
	
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.container{
	background-color: var(--bg-neutral);
	border-radius: 15px;

	box-shadow: 0px 10px 15px rgba(253,47,114,0.2);
	padding: 15px;	
	text-align: center;
	max-width: 400px;
	width: 100%;
	margin: 0px 15px;
}

.container.error{
	background-color: var(--danger-bg);
	border-color: var(--danger);
	color: var(--danger);
}
.container.success{
	background-color: #0a5834;
	color: #ceffe6;
	border-color: #ceffe6;
}
h1{
	font-size: 24px;
	font-weight: bold;
}
h3{
	font-size: 20px;
	margin-bottom: 5px;
}
p b{
	font-weight: bold;
}
h3 b{
	font-weight: bold;
}
.pill span{
	
	padding: 5px 15px;
	border-radius: 10px;
	display: inline-block;
	border: 2px solid #008ec7;
	background-color: #008ec7;
	font-weight: bold;
	color: #ffffff;
font-size: 30px;
line-height: 1;
box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.3);
}

.pill{
	margin-bottom: 5px;
}

form{		

	border-radius: 15px;
	padding: 15px;
}

form label{
	display: block;
	margin-bottom: 5px;
}

form .input-group:not(:last-of-type){
	margin-bottom: 15px;
}
input[type=submit] {
	background-color: #2dabde;
	border: none;
	color: white;
	padding: 10px 30px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 50px;
	font-size: 16px;
	border: 2px solid transparent;
	transition: all 150ms ease;
	font-weight: bold;
}

input[type=submit]:hover,
input[type=submit]:focus{
	border-color: #6ac3e8;

}

input[type=submit]:active{
	border-color: #6ac3e8;
	background-color: #6ac3e8;
}


input[type=tel],
input[type=text]{

	background-color: var(--bg-lighter);
	color: white;
	border: none;
	box-shadow: none;
	font-size: 20px;
	line-height: 1;
	padding: 10px 15px;
	border-radius: 10px;
	text-align: center;
	letter-spacing: 2px;

}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color:    #fff;
	font-size: 16px;
	letter-spacing: initial;
	opacity: 0.8;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color:    #fff;
	opacity: 0.8;
	font-size: 16px;
	letter-spacing: initial;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color:    #fff;
	opacity: 0.8;
	font-size: 16px;
	letter-spacing: initial;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:    #fff;
	font-size: 16px;
	letter-spacing: initial;
	opacity: 0.8;
}
::-ms-input-placeholder { /* Microsoft Edge */
	color:    #fff;
	font-size: 16px;
	letter-spacing: initial;
	opacity: 0.8;
}

::placeholder { /* Most modern browsers support this now. */
	color:    #fff;
	font-size: 16px;
	letter-spacing: initial;
	opacity: 0.8;
}

.buttons{
	display: flex;
	flex-wrap: wrap;
	margin-top: 15px;

}

.buttons a{
	text-align: center;
	color: white;
	text-decoration: none;
	flex: 1;
}

.buttons a:hover{
	text-decoration: underline;
}

.alert{
	border: 1px solid transparent;
	background-color: rgba(0,0,0,0.1);
	border-radius: 15px;
	padding: 10px 15px;
	text-align: center;
}

.alert.alert-danger{
	background-color: #540e0e;
	border-color: #ffbebe;
	color: #ffbebe;
}

.alert.alert-success{
	background-color: #0c521e;
	border-color: #e6ffe1;
	color: #e6ffe1;
}

.mb-0{
	margin-bottom: 0px;
}

.mb-1{
	margin-bottom: 10px;
}

.mb-2{
	margin-bottom: 15px;
}

.mb-3{
	margin-bottom: 20px;
}

.mb-4{
	margin-bottom: 30px;
}

.logo-holder{

}

.logo-holder a{
	display: block;
	text-align: center;
}

.logo-holder a img{
height: 80px;
width: auto;
}

.btns{
	margin-top: 30px;
}

.nice-btn{
	background-color: white;
	display: inline-block;
	border-radius: 10px;
	color: var(--bg-neutral);
	padding: 5px 20px;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.1);
	transition: all 300ms ease;	
}

.nice-btn:hover{
box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.6);
}

.check-input{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;

}


.check-input input{
display: inline;
vertical-align:  text-top;
}

.check-input label{
display: inline;
}


[type=checkbox] {
  width: 18px;
  height: 18px;
  color: dodgerblue; /* This sets 'currentcolor' for checked state */
  vertical-align: middle; /* Good, but needs context of parent display */
  -webkit-appearance: none; /* This is the key: removes native styling */
  background: none;
  border: 0;
  outline: 0;
  flex-grow: 0; /* Relevant if parent is flex, but checkbox itself isn't flex item by default */
  border-radius: 50%; /* Makes it round */
  background-color: #FFFFFF;
  transition: background 300ms;
  cursor: pointer;
  margin-top: 5px;
  
}

/* Pseudo element for check styling */
[type=checkbox]::before {
  content: "";
  color: transparent;
  display: block; /* This is a potential culprit! See below. */
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}

/* Checked */

[type=checkbox]:checked {
  background-color: currentcolor;
}

[type=checkbox]:checked::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}
[type=checkbox]:disabled {
  background-color: #CCD3D8;
  opacity: 0.84;
  cursor: not-allowed;
}


/* IE */

[type=checkbox]::-ms-check {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}

[type=checkbox]:checked::-ms-check {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}

label a{
	color: #f9d268;
	text-decoration: none;
}

label a:hover{
color: #d7b455;
text-decoration: underline;
}

