/** Add css rules here for your application. */


.fullscreen-bg {
  background-image: url("images/backgrounds/wm3.png");
  /*background-size: 100% 100%;*/
  background-repeat: repeat;
  background-position: center center;
}

.mobileSplash {
  /* optional customization */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  background-color: white;
  /* or leave empty if you don’t need special styling */
}

.robotoExtraBold {
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  color: #F86700;
}
.robotoBold {
  font-family: 'Roboto', sans-serif;
  font-weight: 200;
}

.whiteText {
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 2px black;
}

.toastRounded {
  border-radius: 12px;
}

.dismissableLabel {
  background-color: black;
  border-radius: 12px;
  border: 1px solid gray;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  color: #F86700;
}

.floatingButtons {
  border-radius: 6px;
  padding: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  background-color: white;
}

/*
*  myTextItem is a class used with fill-in-the-blanks item type.
*  It is a textbox that looks like underline.
*/
.myTextItem, 
.myTextItemFocused {
	outline: none;
	border: 0px solid #b8b8b8; 
	border-bottom: 2px solid #b8b8b8;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	background-color: white !important; 
/*	-moz-border-radius: 2px; */
/*	-webkit-border-radius: 2px; */
/*	border-radius: 2px; */
/*	font-weight: bold; */
	font-size: 16px;
}

.myTextItemOver {
	-moz-box-shadow: 0 0 5px 0 #157fcc;
	-webkit-box-shadow: 0 0 5px 0 #157fcc;
	box-shadow: 0 0 5px 0 #157fcc;
	border: 0px solid #157fcc;
	background-color: white !important;
	color: black;
	/*color: #333333;*/
	/*font-weight: bold;*/
}

.myTextItemFocusedOver{
	outline: none;
	-moz-box-shadow: 0 0 5px 0 #157fcc, inset 0 0 5px 0 #157fcc;
	-webkit-box-shadow: 0 0 5px 0 #157fcc, inset 0 0 5px 0 #157fcc;
	box-shadow: 0 0 5px 0 #157fcc, inset 0 0 5px 0 #157fcc;
	border: 0px;
	color: #d0d0d0;
	/*font-weight: bold;*/
}

.myTextItem::-webkit-input-placeholder {
	color: #e0e0e0; /* Light gray for the placeholder */
}

.myTextItem::-moz-placeholder {
	color: #e0e0e0;
}

.myTextItem:-ms-input-placeholder {
	color: #e0e0e0;
}

.myTextItem::-ms-input-placeholder {
	color: #e0e0e0;
}

.myTextItem::placeholder {
	color: #e0e0e0;
}
/*
input.myTextItem:-webkit-autofill,
input.myTextItem:-webkit-autofill:focus,
input.myTextItem:-webkit-autofill:hover,
input.myTextItem:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  box-shadow: 0 0 0px 1000px white inset !important;
  background-color: white !important;
  color: black !important;
}
*/
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  transition: background-color 9999s ease-in-out 0s !important;
  -webkit-text-fill-color: black !important;
  background-color: white !important;
}

.bigFieldTitle {
  font-size: 14px;
/*  font-weight: bold;
  color: #333; */
}
.bigFieldTitleFocused {
  font-size: 14px;
/*  font-weight: bold;
  color: #333; */
}
	

.roundedDialog {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden; /* Important for content rounding */
}        

.dialogueBorder
{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border: 2px solid #f86700;
	padding: 10px;
	background-color: white;
}
.dialogueBorder2
{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid #f86700;
	padding: 5px;
	background-color: white;
}

.flashing-border-red {
  border: 2px solid red;
  border-radius: 50%;
  animation: flash-border-red 0.5s infinite alternate;
}
@keyframes flash-border-red {
  0% { box-shadow: 0 0 0 0 red; }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.flashing-border-green {
  border: 2px solid green;
  border-radius: 50%;
  animation: flash-border-green 0.5s infinite alternate;
}
@keyframes flash-border-green {
  0% { box-shadow: 0 0 0 0 green; }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* different style */
@keyframes flash-border2 {
  from {
    border-color: red;
  }
  to {
    border-color: transparent;
  }
}

.flashing-text {
  animation: flash-text 1s infinite alternate;
}

@keyframes flash-text {
  from {
    color: red;
  }
  to {
    color: transparent;
  }
}