@media only screen and (min-width: 420px) {
    .collapse {
        display: block;
    }

    .navbar-header {
        float: left;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-nav.navbar-left {
       float: left;
       margin: 0;
    }

    .navbar-nav.navbar-right {
       float: right;
       margin: 0;
    }
    .navbar-nav>li {
        float: left;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
  }
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .rowDotControls
  {
    position: fixed;
    bottom:0;
    width: 100%;
  }

  .switch input {display:none;}


  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;

  }


@media only screen and (max-width: 420px) {
     .collapse {
        display: none;
     }

     .navbar-header {
        display: block;
     }
}
@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
  }
}


.col{
	inline-display:block;
	float:left;
}

.button {
    color: green;
}

body#myApp .navbar-default .navbar-text,
body#myApp nav.navbar a
{
    color: white;
}
body {
  padding-top: 3em;
}
.alert button{
	margin-left:10px;
}

nav.navbar{
	background-image: none;
	background-color: #51c4ea;
}

body#myApp a h3{
    color: white;
}
.selected{
	font-weight:bolder;
	font-size:larger;
}
td{
	margin-top:none;
}
div.imageBlock {
	vertical-align: top;
	display:inline-block;
	border:1px solid lightgray;
	// ratio = 8/24.8 = 0.322
	// height = 90*0.322
	height:29.03vw;
	width:30vw;
	white-space: nowrap; /* this is required unless you put the helper span closely near the img */
	text-align: center;
//	max-width:800px;
//	max-height:800px;
	padding:2px;
}
div.controlBlock {
	display:inline-block;
	text-align: left;
}

g.gText text{
	pointer-events: none;
	text-anchor: start;
	dominant-baseline: text-before-edge;
}

g.gCircle text{
	pointer-events: none;
	text-anchor: middle;
	dominant-baseline: middle;
}


div.imageBlock input{
	position:absolute;
	bottom:10px;
	left:10px;

}
.loadImage{
	visibility:hidden;
}
svg image{
	max-width:100px;
	max-height:100px;
	margin:auto;
    vertical-align: middle;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.form-inline .form-group{
	margin-bottom:15px;
}


//flashing buttons
.flash-button{
	background:blue;
	padding:5px 10px;
	color:#fff;
	border:none;
	border-radius:5px;

	animation-name: flash;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	//Firefox 1+
	-webkit-animation-name: flash;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	//Safari 3-4
	-moz-animation-name: flash;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
}

@keyframes flash {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

//Firefox 1+
@-webkit-keyframes flash {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

//Safari 3-4
@-moz-keyframes flash {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}