@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

@font-face {
  font-family: 'codropsicons';
  src: url('https://adop.tools/fonts/codropsicons/codropsicons.eot');
  src: url('https://adop.tools/fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
       url('https://adop.tools/fonts/codropsicons/codropsicons.woff') format('woff'),
       url('https://adop.tools/fonts/codropsicons/codropsicons.ttf') format('truetype'),
       url('https://adop.tools/fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Global */
html, body {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 100%;
  color: #000;
}

/* Headers */
h1 {
  color: grey;
  font-size: 2em;
}

/* Panels & Cards */
#right-panel {
  background-color: #529090;
}

.card {
  opacity: 0.9;
}

.card-body {
  opacity: 1;
  min-height: 400px;
}

/* Form Elements */
.form-group input {
  color: black;
  font-weight: bold;
}

.form-row {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 30px; /* increases spacing between all elements */
  }
  
  .form-row .form-group {
	flex: 1;
  }
  
  .or-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .or-text {
	font-weight: bold;
	color: #333;
	font-size: 1rem;
  }
/* Inputs */
.utm-input {
  width: 45%;
  margin: 0 2% 2%;
  display: inline-block;
}

.percent-input,
.percent-output {
  display: inline-block;
  width: 20%;
}

.percent-output {
  float: right;
}

.input-suffix {
  padding-right: 2%;
  text-align: right;
}

/* Misc */
#UserAgent {
  font-size: 0.8em;
  height: 80px;
  word-wrap: break-word;
}

.feedback {
  float: right;
  display: inline-block;
  text-align: center;
}

.badge-success {
  font-size: 33%;
}

#menutoggle {
  text-align: center;
}

/* Hide Bootstrap's default radio appearance */
.form-check-input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	width: 70px;
	height: 36px;
	border: 1px solid #529090;
	border-radius: 4px;
	background-color: #fff;
	color: #529090;
	font-weight: 500;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-right: 6px;
  }
  
  /* Label text centered inside button */
  .form-check-label {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 34px;
	text-align: center;
	pointer-events: none;
  }
  
  /* Active state */
  .form-check-input[type="radio"]:checked {
	background-color: #529090;
	color: #fff;
	border-color: #529090;
  }
  
  /* Optional hover */
  .form-check-input[type="radio"]:hover {
	background-color: #e8f5f5;
  }
  

@media (max-width: 768px) {
	.form-row {
	  flex-direction: column;
	  align-items: stretch;
	}
	.or-wrapper {
	  width: auto;
	  margin: 10px 0;
	}
  }