/*	Token Sale box with counter progress and button
* 	----------------------------------------------------------------------------------------------*/
.token-details {
    padding : 1.2rem;
    border-radius : 1rem;
    /* Flip Clock */
    /* Progress bar */
    padding: 3em 2em 3em 2em;
  }
  .token-details .clock-counter .flip-clock-wrapper ul.flip {
    margin : 3px;
    -webkit-box-shadow : none !important;
            box-shadow : none !important;
  }
  .token-details .clock-counter .flip-clock-divider {
    width : 12px;
  }
  .token-details .clock-counter .flip-clock-divider .flip-clock-dot {
    width : 6px;
    height : 6px;
    left : 3px;
  }
  .token-details .progress {
    background : #FFFFFF;
    border : 4px solid #FFFFFF;
    border-radius : 1rem;
    height : 1.5rem;
    overflow : initial;
  }
  .token-details .progress-bar-custom {
    background : #FFFFFF;
    border-radius : 1rem;
    height : 1rem;
    background : -webkit-gradient(linear, left top, right top, from(grey), to(black));
    background : -webkit-linear-gradient(left, grey, black);
    background :    -moz-linear-gradient(left, grey, black);
    background :      -o-linear-gradient(left, grey, black);
    background :         linear-gradient(to right, grey, black);
    -webkit-box-shadow : 2px 0 7px 0 rgba(0, 0, 0, 0.35);
            box-shadow : 2px 0 7px 0 rgba(0, 0, 0, 0.35);
  }
  .token-details .progress-top {
    position : absolute;
    top : -1.8rem;
    display : -webkit-box;
    display : -webkit-flex;
    display :    -moz-box;
    display : -ms-flexbox;
    display :         flex;
    -webkit-box-align : stretch;
    -webkit-align-items : stretch;
       -moz-box-align : stretch;
    -ms-flex-align : stretch;
            align-items : stretch;
    /* Default */
    -webkit-box-pack : justify;
    -webkit-justify-content : space-between;
       -moz-box-pack : justify;
    -ms-flex-pack : justify;
            justify-content : space-between;
    width : 100%;
    color : #FFFFFF;
    padding : 0 1rem;
  }
  .token-details .progress-top li {
    display : block;
    -webkit-box-flex : 0;
    -webkit-flex : 0 1 auto;
       -moz-box-flex : 0;
        -ms-flex : 0 1 auto;
            flex : 0 1 auto;
    /* Default */
    font-size : 0.75rem;
  }
  .token-details .progress-top li.pre-sale {
    position : relative;
    left : 0.75rem;
  }
  .token-details .progress-top li.bonus {
    position : relative;
    right : 1rem;
  }
  .token-details .progress-bars {
    position : absolute;
    top : -1.1rem;
    display : -webkit-box;
    display : -webkit-flex;
    display :    -moz-box;
    display : -ms-flexbox;
    display :         flex;
    -webkit-box-align : stretch;
    -webkit-align-items : stretch;
       -moz-box-align : stretch;
    -ms-flex-align : stretch;
            align-items : stretch;
    /* Default */
    -webkit-box-pack : justify;
    -webkit-justify-content : space-between;
       -moz-box-pack : justify;
    -ms-flex-pack : justify;
            justify-content : space-between;
    width : 100%;
    color : #FFFFFF;
    padding : 0 1rem;
  }
  .token-details .progress-bars li {
    display : block;
    -webkit-box-flex : 0;
    -webkit-flex : 0 1 auto;
       -moz-box-flex : 0;
        -ms-flex : 0 1 auto;
            flex : 0 1 auto;
    /* Default */
  }
  .token-details .progress-bottom {
    position : absolute;
    bottom : 1.5rem;
    display : -webkit-box;
    display : -webkit-flex;
    display :    -moz-box;
    display : -ms-flexbox;
    display :         flex;
    color : #FFFFFF;
    -webkit-box-align : stretch;
    -webkit-align-items : stretch;
       -moz-box-align : stretch;
    -ms-flex-align : stretch;
            align-items : stretch;
    /* Default */
    -webkit-box-pack : justify;
    -webkit-justify-content : space-between;
       -moz-box-pack : justify;
    -ms-flex-pack : justify;
            justify-content : space-between;
    width : 100%;
    padding : 0 1rem;
  }
  .token-details .progress-bottom .progress-info {
    display : block;
    -webkit-box-flex : 0;
    -webkit-flex : 0 1 auto;
       -moz-box-flex : 0;
        -ms-flex : 0 1 auto;
            flex : 0 1 auto;
    font-size : 0.75rem;
  }



  /*	Modification of flipclock CSS
* 	----------------------------------------------------------------------------------------------*/
.clock-counter .flip-clock-divider {
    width : 16px;
  }
  .clock-counter .flip-clock-divider:first-child {
    width : 0;
  }
  .clock-counter .flip-clock-divider .flip-clock-label {
    font-family : 'Comfortaa', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size : 0.875rem;
    right : -70px;
  }
  .clock-counter .flip-clock-divider.minutes .flip-clock-label, .clock-counter .flip-clock-divider.seconds .flip-clock-label {
    right : -80px;
  }
  
  .clock-counter .flip .inn {
    font-family : 'Comfortaa', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size : 2rem;
    font-weight : 600;
  }
  
  .clock-counter .flip-clock-wrapper ul {
    width : 43px;
    height : 65px;
    background : #FFFFFF !important;
  }
  .clock-counter .flip-clock-wrapper ul li {
    line-height : 4.5rem;
  }
  .clock-counter .flip-clock-wrapper ul li a {
    color : #3F3F3F !important;
  }
  .clock-counter .flip-clock-wrapper ul li a div.up {
    height : 52%;
    top : -2px;
  }
  .clock-counter .flip-clock-wrapper ul li a div.up:after {
    top : 32px;
    height : 1px;
    background-color : #000000 !important;
    background-color : rgba(0, 0, 0, 0.4) !important;
  }
  .clock-counter .flip-clock-wrapper ul li a div.up div.inn {
    text-shadow : 0 1px 2px #FFFFFF !important;
    background-color : #FFFFFF !important;
    color : #3F3F3F !important;
  }
  .clock-counter .flip-clock-wrapper ul li a div.down {
    height : 51%;
  }
  .clock-counter .flip-clock-wrapper ul li a div.down div.inn {
    text-shadow : 0 1px 2px #FFFFFF !important;
    background-color : #FFFFFF !important;
    color : #3F3F3F !important;
  }
  .clock-counter .flip-clock-wrapper ul.play li.flip-clock-before .up .shadow, .clock-counter .flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
    background : transparent !important;
    -webkit-animation : none !important;
       -moz-animation : none !important;
         -o-animation : none !important;
            animation : none !important;
  }
  .clock-counter .flip-clock-wrapper ul.play li.flip-clock-before .down .shadow, .clock-counter .flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
    background : transparent !important;
    -webkit-animation : none !important;
       -moz-animation : none !important;
         -o-animation : none !important;
            animation : none !important;
  }
  
  .clock-counter .flip-clock-wrapper .flip-clock-dot {
    width : 7px;
    height : 7px;
  }
  
  .clock-counter .flip-clock-wrapper .flip, .clock-counter .flip-clock-wrapper .flip-clock-dot {
    background : #FFFFFF;
    -webkit-box-shadow : 2px 1px 11px rgba(0, 0, 0, 0.37) !important;
            box-shadow : 2px 1px 11px rgba(0, 0, 0, 0.37) !important;
  }
  .clock-counter .flip-clock-wrapper .flip.top, .clock-counter .flip-clock-wrapper .flip-clock-dot.top {
    top : 24px;
  }
  .clock-counter .flip-clock-wrapper .flip.bottom, .clock-counter .flip-clock-wrapper .flip-clock-dot.bottom {
    bottom : 48px;
  }
  
  .clock-counter .flip-clock-wrapper .flip-clock-meridium a {
    color : #FFFFFF !important;
  }
  
  .clock-counter .flip-clock-wrapper .flip-clock-divider .flip-clock-label {
    color : #FFFFFF !important;
  }

  .token-details .clock-counter .flip-clock-wrapper .flip {
    margin : 2px;
    height : 24px;
    padding : 23px 1px;
  }
  .token-details .clock-counter .flip-clock-wrapper .flip li {
    top : 6px;
  }
  .token-details .clock-counter .flip-clock-wrapper .flip li a .up .inn {
    font-size : 1.5rem;
    top : -16px;
  }
  .token-details .clock-counter .flip-clock-wrapper .flip li a .down .inn {
    font-size : 1.5rem;
    bottom : 16px;
  }
  .token-details .clock-counter .flip-clock-wrapper .flip-clock-dot {
    width : 4px;
    height : 4px;
    left : 2px;
  }
  .token-details .clock-counter .flip-clock-wrapper .flip-clock-dot.top {
    top : 16px;
  }
  .token-details .clock-counter .flip-clock-wrapper .flip-clock-dot.bottom {
    bottom : 64px;
  }
  .token-details .clock-counter .flip-clock-divider.days .flip-clock-label {
    left : -20px;
  }
  .token-details .clock-counter .flip-clock-divider.hours .flip-clock-label {
    left : -8px;
  }
  .token-details .clock-counter .flip-clock-divider.minutes .flip-clock-label {
    left : -7px;
  }
  .token-details .clock-counter .flip-clock-divider.seconds .flip-clock-label {
    left : 0;
  }
  .token-details .progress-bottom {
    top : 2rem;
  }

  /** ESTILOS PROPIOS **/