:root {
  --mainwidth: 240;
}

@font-face {
    font-family: 'akrobatbold';
    src: url('/ex/fonts/akrobat-bold-webfont.woff2') format('woff2'),
         url('/ex/fonts/akrobat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'akrobatregular';
    src: url('/ex/fonts/akrobat-regular-webfont.woff2') format('woff2'),
         url('/ex/fonts/akrobat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#indacoin *{
  margin: 0;
  padding: 0;
  line-height: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#indacoin{
  width: 340px;
  width: calc(var(--mainwidth)*1px);
  /*height: 350px;*/
  background: #253137;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: "akrobatregular";
}
h1,h2{
  font-family: "akrobatbold";
}
#indacoin .header {
  padding: 12px 0 12px 16px;
}
#indacoin .header h2{
  font-size: 30px;
  text-transform: uppercase;
}
#indacoin .header h3{
  font-size: 22px;
  color: rgba(255,255,255, 0.8);
  margin-top: 4px;
  display: inline-block;
  vertical-align: top;
}
#indacoin .header img{
  display: inline-block;
  margin: 6px 0px 0 6px;
  width: 70px;
}
#indacoin .header ul{
  margin: 6px 16px 0px;
  font-weight: 700;
}

#indacoin .main{
  flex-grow: 2;
}

#indacoin .footer{
  margin: 12px;
}
#indacoin .button{
  background: #fabf2c;
  border-radius: 2px;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  color: #303030;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
#indacoin .button:hover{
  background: #ffc334;
}
#indacoin .values{
  font-size: 24px;
  font-weight: 700;
  white-space: pre;
  display: inline-block;
  vertical-align: top;
}
#indacoin .values div{
  display: inline-block;
  margin: 0 15.5px;
}
#indacoin .spinner{
  padding: 6px;
  height: 40px;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
#indacoin .spinner .space{
  width: 165px;
  width: calc(calc(var(--mainwidth)*0.5)*1px);
  height: 30px;
  display: inline-block;
  vertical-align: top;
}
#indacoin .currency{
  font-size: 18px;
  font-weight: 700;
  padding: 0 0 8px 145px;
  padding: 0 0 8px calc(calc(var(--mainwidth)*0.43)*1px);
  transition: padding .2s;
}
#indacoin .currency div{
  font-family: "akrobatbold";
  display: inline-block;
  margin: 0 12px;
  cursor: pointer;
}
#indacoin .triangle_container{
  position: relative;
}
#indacoin .triangle_container .tri{
  display: block;
  content: "";
  position: absolute;
  top: -4px;
  left: 165px;
  left: calc(calc(var(--mainwidth)*0.5)*1px);

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #fff transparent;
  transition: left .2s;
}
#indacoin .result{
  text-align: center;
  padding: 16px 16px 0;
  font-size: 32px;
  font-weight: 700;
  color: #fabf2c;
}
#indacoin .result div{
  margin-bottom: 8px;
  font-size: 20px;
  color: #fff;
}

#indacoin .left, .right{
  position: relative;
  width: 0px;
  height: 0px;
}
#indacoin .left div{
  background: url("/ex/img/widget/left.png") no-repeat center, rgba(255,255,255,1);
  background-size: 80%;
  cursor: pointer;
  position: absolute;
  top: -40px;
  left: 0px;
  width: 20px;
  height: 40px;
}
#indacoin .right div{
  background: url("/ex/img/widget/right.png") no-repeat center, rgba(255,255,255,1);
  background-size: 80%;
  cursor: pointer;
  position: absolute;
  top: -40px;
  left: 320px;
  left: calc(calc(var(--mainwidth) * 1px) - 20px );
  width: 20px;
  height: 40px;
}