* {
  font-family: 'Roboto', sans-serif;
  color:grey;
}


#custom-handle {
  width: 5em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
  font-size:12px;
}
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}


@media all and (max-width: 400px) { /* screen size until 500px */
  .superSmall{
    font-size: 9px !important;
  }
  .smallTableFont{
    font-size: 11px !important;
  }
  .smallTableHeader{
    font-size: 11px !important;
  }
  .smallMaxWidthForRows{
    max-width:40px;
  }
  .biggerHeightMobileAlert{
    height:200px;;
  }
}

.panel-custom-grey-border {
    border-color: #d9d9d9 !important;
}

/*STICKY FOOTER*/
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
/*Stick Footer End*/


.myFooter {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

#img.source-image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.image-wrapper {
    position: relative;
    width: 250px;
}
.image-wrapper p {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
    border: 1px solid #FFF;
    width: 218px;
    color: #FFF;
    margin: 5px;
}
.manageDropDown {
  left: 58%;
  right: auto;
  text-align: left;
  transform: translate(-50%, 0);
}

#indexTopImage {
    background-image: url('https://coinflashapp.com/assets/images/coffee.jpg');
    background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: 0% 0%;
     background-size: contain;
     height:500px;
}

.containerBox {
    position: relative;
    /*display: inline-block;*/
}
.text-box {
    position: absolute;
    /*height: 70%;*/
    /*text-align: center;*/
    width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 70%;
   /*vertical-align: middle;*/
}


.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
	font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
	padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

#customBtn {
      display: inline-block;
      background: white;
      color: #444;
      width: 190px;
      border-radius: 5px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap;
    }
    #customBtn:hover {
      cursor: pointer;
    }
    span.label {
      font-family: serif;
      font-weight: normal;
    }
    span.icon {
      background: url('https://developers.google.com/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 42px;
      height: 42px;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left: 42px;
      padding-right: 42px;
      font-size: 14px;
      font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto', sans-serif;
    }


    #rcorners {
        border-radius: 25px;
        background: url(paper.gif);
        background-position: left top;
        background-repeat: repeat;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

div.panel {
  background-color: #fefefe;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
}


#square3 {
  background-color:#F8F8F8;
  border:1px solid white;
  height:280px;
  width:100%;
  border-radius:2%;
  -moz-border-radius:2%;
  -webkit-border-radius:2%;
  text-align: center;
  display: table;
}


.circle {
    background-color:#fff;
    border:1px solid grey;
    height:300px;
    width:300px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    text-align: center;
    display: table;
}
#circle2 {
    background-color:#fff;
    border:1px solid green;
    height:310px;
    width:310px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    text-align: center;
    display: table;
}

.square1 {
    background-color:#fff;
    border:1px solid green;
    height:310px;
    width:310px;
    border-radius: 25px;

    text-align: center;
    display: table;
}

@-webkit-keyframes pulseBorder {
  from {
    border:solid 1px;
  }
  to {
    border:solid 10px;
  }
}
.borderPulsateDiv {
  -webkit-animation-name: pulseBorder;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 0.5s;
}
/*
$background: #fefefe;
$text: #4b507a;

$cyan: #60daaa;
$yellow: #fbca67;
$orange: #ff8a30;
$red: #f45e61;
$purple: #6477b9;
$blue: #0eb7da;

.buttons {
  isolation: isolate;
}
button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;

  box-shadow: inset 0 0 0 2px $red;
  color: $red;
  font-size: inherit;
  font-weight: 700;

  position: relative;
  vertical-align: middle;

  &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
.spin {
  width: 5em;
  height: 5em;
  padding: 0;

  &:hover {
    color: $blue;
  }

  &::before,
  &::after {
    top: 0;
    left: 0;
  }

  &::before {
    border: 2px solid transparent; // We're animating border-color again
  }

  &:hover::before {
    border-top-color: $blue; // Show borders
    border-right-color: $blue;
    border-bottom-color: $blue;

    transition:
      border-top-color 0.15s linear, // Stagger border appearances
      border-right-color 0.15s linear 0.10s,
      border-bottom-color 0.15s linear 0.20s;
  }

  &::after {
    border: 0 solid transparent; // Makes border thinner at the edges? I forgot what I was doing
  }

  &:hover::after {
    border-top: 2px solid $blue; // Shows border
    border-left-width: 2px; // Solid edges, invisible borders
    border-right-width: 2px; // Solid edges, invisible borders
    transform: rotate(270deg); // Rotate around circle
    transition:
      transform 0.4s linear 0s,
      border-left-width 0s linear 0.35s; // Solid edge post-rotation
  }
}

.circleSpin {
  border-radius: 100%;
  box-shadow: none;

  &::before,
  &::after {
    border-radius: 100%;
  }
}

.draw {
    transition: color 0.25s;

  &::before,
  &::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  &::before {
    top: 0;
    left: 0;
  }

  &::after {
    bottom: 0;
    right: 0;
  }

  &:hover {
    color: $cyan;
  }

  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color: $cyan; // Make borders visible
    border-right-color: $cyan;
    transition:
      width 0.25s ease-out, // Width expands first
      height 0.25s ease-out 0.25s; // And then height
  }

  &:hover::after {
    border-bottom-color: $cyan; // Make borders visible
    border-left-color: $cyan;
    transition:
      border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border
      width 0.25s ease-out 0.5s, // And then exanding width
      height 0.25s ease-out 0.75s; // And finally height
  }
}
*/


#circle22 {
  /*-webkit-box-shadow: 2px 0px 16px 0px rgba(74, 50, 50, 0.58);
  -moz-box-shadow:    2px 0px 16px 0px rgba(74, 50, 50, 0.58);
  box-shadow:         2px 0px 16px 0px rgba(74, 50, 50, 0.58);*/
  /*animation: animateCircle 5s infinite;*/
    background-color:#fff;
    border:1px solid green;
    height:320px;
    width:320px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    text-align: center;
    display: table;
}

/* Safari 4.0 - 8.0 */
/*
@-webkit-keyframes animateCircle{
  from {box-shadow:         2px 0px 16px 0px rgba(200, 50, 50, 0.58);}
  to {box-shadow:         2px 0px 16px 0px rgba(200, 50, 50, 0.58);}
}

@keyframes animateCircle {
    from {box-shadow:0px 0px 1px 0px green;}
    to {box-shadow: 0px 0px 100px 0px green;}
}
*/

.circle3 {
    background-color:#fff;
    border:1px solid green;
    height:360px;
    width:360px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    text-align: center;
    display: table;
}

.circleFrontPage {
    background-color:#fff;
    border:1px solid green;
    height:250px;
    width:250px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    text-align: center;
    display: table;
}

.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
padding: .2em;
}


#canvas-holder {
				width: 100%;
				margin-top: 50px;
				text-align: center;
		}
		#chartjs-tooltip {
			opacity: 1;
			position: absolute;
			background: rgba(0, 0, 0, .7);
			color: white;
			border-radius: 3px;
			-webkit-transition: all .1s ease;
			transition: all .1s ease;
			pointer-events: none;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
		}

		.chartjs-tooltip-key {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin-right: 10px;
		}

div.centre
{
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.centerInCircleOne {
  display: table-cell;
   vertical-align: middle;
   padding: 0 0px;
}
.centerInCircleTwo {
  display: table-cell;
   vertical-align: middle;
   padding: 0 0px;
}

#centerMe{
  width: 50%;
  margin: 0 auto;
}
#centerMe2{
  width: 80%;
  margin: 0 auto;
}


.panel-body {
    padding: 0;
}

.centerHAndV {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.centerH {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}