/* app css stylesheet */

/* Site-wide Style Defaults
-------------------------------------------------- */

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

/* Angular Bootstrap UI "href fix" */
.nav, .pagination, .carousel, .panel-title, .dropdown-toggle a { cursor: pointer; }

/* Fix that silly blue border around accordion headers */
.accordion-toggle:focus{outline: none;}

/*change breadcrumb separator to raquo symbol*/
.breadcrumb > li + li:before {
     content: "\2215\00A0";
     color: #aaa;
}

.btn {
  border-radius:5px;
}

@media (min-width: 768px) {
  #cardRow {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  #cardRow [class^="col-"] {
    display: table-cell;
    float: none;
  }
}

.card {
  border-radius:2px !important;
}

.thumbnail {
  top:0;
  position:relative;
  padding-top:0;
  border: 1px solid gray;
  border-radius:6px;
  width:100%;
  padding-bottom:1px;
  -webkit-box-shadow: 3px 6px 12px -5px rgba(0,0,0,0.5);
  -moz-box-shadow: 3px 6px 12px -5px rgba(0,0,0,0.5);
  box-shadow: 3px 6px 12px -5px rgba(0,0,0,0.5);
}

.terminal {
  float: left;
  border: #000 solid 5px;
  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 14px;
  color: #f0f0f0;
  background: #000;
}

.terminal-cursor {
  color: #000;
  background: #f0f0f0;
}

.popover {
  max-width:200px;
}

.popover-content {
  width:200px;
}

/* Useful helpers
-------------------------------------------------- */

.badge {
  margin-left:4px;  
}

.border-nds-thin {
  border: 1px solid #ccc !important;
  border-radius: 16px !important;
  margin:20px;
  padding:10px;
}

.border-nds {
  border: 3px solid #ccc !important;
  border-radius: 16px !important;
  margin: 15px 0 15px 0;
  padding:10px;
  width:auto !important;
  height:100% !important;
  border-bottom:none;
}

.cursor-pointer {
  cursor: pointer;
}

.fill-height {
  height:100% !important;
  min-height: 100% !important;
}

.fill-width {
  width:100% !important;
}

.flush-border {
  border-radius:0px;
  margin:0;
  padding:0;
}

.text-center {
  text-align:center !important;
  vertical-align: middle !important; 
}

.helper-text {
  border:dashed;
  text-align:center;
  padding-top:100px;
  padding-bottom:100px;
  vertical-align:middle;
  height:100%;
}

tags-input .host {
  margin:0px;
  padding:0px;
}

html,body {
    height:100%;
}

.legend-fix { 
   border: none;
   width:auto !important;
}

.margin-left-right-120 {
  display: block;
  margin-left: 120px;
  margin-right: 120px;
}

.support-link {
  margin: 15px;
}

.top-margin {
  margin-top:15px;
}

.undecorate-link {
  text-decoration:none !important;
  color:inherit !important;
}

/* Browse Happy styles
-------------------------------------------------- */
.browsehappy {
	display:block;
	width:100%;
	height:100px;
	background-color:#f2dede;
	margin: 0 0 10px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 22px;
	line-height: 1.4;
	color: #333;
	vertical-align:middle;
}
.browsehappy span{
	vertical-align:middle;
	margin: 0 20px 0 20px;
	background:url("https://cdn.rawgit.com/alrra/browser-logos/master/internet-explorer/internet-explorer_64x64.png") no-repeat;
	height:64px;
	width:64px;
	display:inline-block;
}

/* Specific id styles
-------------------------------------------------- */

#appContent {
  margin-bottom:70px;
}

#dashHeader {
  margin-left:-15px;
  margin-right:-15px;
  padding-top:5px;
  padding-left:15px;
  padding-bottom:5px;
}

#footer {
 position:fixed;
 left:0px;
 bottom:0px;
 height:70px;
 width:100%;
 background:#a8a8a1;
}

#logBody {
  height: 400px;
}

#loginPanel {
  margin: 10% auto;
  max-width:400px;
  -webkit-box-shadow: 7px 10px 29px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 7px 10px 29px -5px rgba(0,0,0,0.75);
  box-shadow: 7px 10px 29px -5px rgba(0,0,0,0.75);
}

#navbar {
  margin: 50px;
}

#navBrandLogo {
  margin-top:-5px;
}

#cardButtonBar {
  margin:0;
  padding:0;
  border-top:1px dotted lightgray;
}

#typeField {
  border-radius: 4px 0 0 4px;
  -webkit-appearance: none;
}

#checkboxAddon {
   margin: 0;
}

#supportLinks {
   margin:50px 125px 50px 125px;
}


.showbox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5%;
}

.loader {
  position: relative;
  margin: 0 auto;
  width: 100px;
}
.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}