@font-face {
  font-family: DIGITAL;
  src: url(../font/digital-7.ttf);
}
/* 
body{
	background: #000000;
	background-image: none;
	background-image: linear-gradient(to right, #000000, #000000, #000000, #000000, #202020);
}
 */
.hidden{
    display:none !important;
}
.alkomat-container{
    width:100%;
    position:relative;
    clear:both;

}
@media only screen and (max-width: 768px) {
    .alkomat-container {
        width:100%;
        margin:0;
        padding:0;
    }
}

/** LOGOS */
.track, .thumb{
  touch-action: none;
}
.alkomat-container .logo-container {
    position:relative;
    width:100%;
    text-align:left;
}
.alkomat-container .logo-container img {
    display:block;
    max-width:400px;
}
.alkomat-container .logo-container img:first-child{
    margin-left:25%;
}
.alkomat-container .logo-container img:last-child{
    margin-left:35%;
    width:40%;
}
@media only screen and (max-width: 768px) {
    .alkomat-container .logo-container img {
        display:block;
        width:80% !important;
        margin:auto auto !important;
    }
}
/* END LOGOS*/


/* STEPS */
.alkomat-container .steps-container{
    position:relative;
    text-align:center;
    margin-top:0px;
}
.alkomat-container .next-button .step,
.alkomat-container .steps-container .step{
    position:relative;
    display:inline-block;
    MARGIN:20PX;
    border:1px solid #e31e24;
    color:#e31e24;
    padding:8px;
    border-radius:10px;
    min-width:150px;
    font-family: 'Hind Siliguri', sans-serif;
    text-transform:uppercase;
    letter-spacing:1.5px;
    cursor:pointer;
    font-weight:bold;

}
.alkomat-container .steps-container .step.active{
    background:#e31e24;
    color:white;
}
.alkomat-container .steps-container .step::before{
    display:block;
    position:absolute;
    content:'';
    height:14px;
    width:18px;
    background:url(../images/arrows.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    margin-left:152px;
    margin-top:5px;
}
.alkomat-container .steps-container .step:last-child::before{
    display:none;
}
@media only screen and (max-width: 768px) {
    .alkomat-container .steps-container{
        width:100%;
    }
    .alkomat-container .steps-container .step{
        display:block;
        margin:auto;
        margin-top:30px;
    }
    .alkomat-container .steps-container .step::before{
        margin:0;
        margin-top:40px;
        margin-left:45% !important;
        transform:translate(0, -50%);
        transform:rotate(90deg);
    }
}
.step-container{
    margin-top:20px;
    clear:both;
    position:relative;
}
.step-container .top-options {
    position:relative;
    display:block;
    clear:both;
}
.clear{
    height:10px;
    width:100%;
    clear:both;
    float:noone;
    display:block;
}
.step-container .top-options div {
    display:inline-block;
    border:2px solid #e31e24;
    margin:10px;
    text-align:center;
    border-radius:20px;
    position:relative;
    height:120px;
    float:left;
}
.top-options div.sex {
    width:25%;
}
.top-options div.sex button{
    width:80px;
    height:80px;
    margin:20px;
    border-radius:20px;
    border:1px solid #e31e24;
    display:inline-block;
    background:white;
    color:#e31e24;
}
.top-options div.sex button:first-child{
    margin-right:10px;
}
.top-options div.sex button:last-child{
    margin-left:10px;
}
.top-options div.sex button.active{
    color:white;
    background:#e31e24 !important;
}
.top-options div.sex button i{
    font-size:200%;
}
.top-options .title{
    position:absolute;
    margin-top:-30px;
    color:#e31e24;
    margin-left:50%;
    transform:translate(-50%);
    left:0;
    font-family: 'Hind Siliguri', sans-serif;
    letter-spacing: 1.5px;
    text-transform:uppercase;
    overflow:visible;
    width:100%;
    font-weight:bold;
}
.track{
    display:block;
    height:8px;
    background:rgba(0,0,0,.5);
    width:90%;
    margin:auto;
    margin-top:50px;
    position:relative;
    border-radius:5px;
}
.hours .track{
    display:block;
    height:8px;
    background:rgba(0,0,0,.5);
    width:90%;
    margin:auto;
    margin-top:33px;
    position:relative;
}
.track .thumb{
    display:block;
    background:rgba(0,0,0,.5);
    position:absolute;
    top:-10px;
    background:#e31e24;
    padding:3px 7px;
    color:white;
    border-radius:3px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.top-options div.weight {
    width:350px;
}
.top-options div.hours {
    width:380px;
}
.top-options div.track-container {
    width:380px;
    max-width:100%;
    padding:0;
    height:auto;
    border:none!important;
    margin:0;
    margin-top:20px;
    padding-right:10px;
    HEIGHT:auto !IMPORTANT;
    text-align:right;
}
.top-options div.track-container span.track-title,
.top-options div.track-container span.track
{
    display:inline-block !IMPORTANT;
    padding:0;
    height:auto;
    vertical-align:middle;

}

.top-options div.track-container span.track{
    width:290px !important;
    top:0!important;
    margin:0!important;
    height:7px;
    MAX-WIDTH:78%;
}
.top-options div.track-container span.track-title{
    color:#e31e24;
    font-family: 'Hind Siliguri', sans-serif;
    FONT-WEIGHT:BOLD;
}
@media only screen and (max-width: 768px) {

    .top-options div.track-container span.track-title,
    .top-options div.track-container span.track
    {
        display:block !IMPORTANT;
        position:relative;
        padding:0;
        height:auto;
        vertical-align:middle;
        width:90%;

    }
    .top-options div.track-container span.track-title {
        display:none !important;
    }
    .top-options div.track-container span.track{
        width:380px !important;
        top:0!important;
        margin:0 auto!important;
        height:7px !important;
        MAX-WIDTH:90%;
    }
}
.track .thumb#drag-hours-from{
    left: 42%;
}
.track .thumb#drag-hours-to{
    left: 42%;
}
.track .thumb#drag-weight{
    left: 45%;
}
.alkomat-container .panel-blue{
    position:relative;
    background:#e31e24;
    color:white;
    margin-top:20px;
    border-radius:20px;
    padding:30px;
}
.alkomat-container .panel-blue input{
    margin-left:5px;
}
.alkomat-container .panel-blue .radio{
    margin-left:25px;
}

@media only screen and (max-width: 1200px) {
    .step-container .top-options div {
        display:inline-block;
        border:2px solid #e31e24;
        margin:5px;
        margin-top:20px;
    }
    .step-container .top-options div.weight {
        width:270px;
    }
    .step-container .top-options div.hours {
    }
    .top-options div.sex {
        width:200px;
    }
    .top-options div.sex button{
        width:70px;
        height:70px;
        margin:5px;
        margin-top:22px !important;
        border-radius:10px;
    }
}
@media only screen and (max-width: 1000px) {
    .alko-container{
        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }
    .step-container .top-options div {
        display:inline-block;
        border:2px solid #e31e24;
        margin:5px;
        margin-top:20px;
    }
    .top-options div.sex {
        width:300px;
        max-width:25%;
    }
    .step-container .top-options div.weight {
        width:300px;
        max-width:30%;

    }
    .step-container .top-options div.hours {
        width:400px;
        max-width:40%;
    }

    .top-options div.sex button{
        width:65px;
        height:65px;
        margin:5px;
        margin-top:27px !important;
        border-radius:10px;
    }
}
@media only screen and (max-width: 768px) {
    .top-options div.sex button{
        width:100px;
        height:100px;
        margin:10px !important;
        border-radius:10px;

    }
    .step-container .top-options div{
        width:100% !important;
        text-align:center;
        height:120px;
        max-width:100% !important;
        margin-top:30px;
    }
    .alkomat-container .steps-container .step{
        display:block;
        margin:auto;
        margin-top:30px;
    }
    .alkomat-container .steps-container .step::before{
        margin:0;
        margin-top:40px;
        margin-left:60px;
        transform:rotate(90deg);
    }
    .alkohol-quantity{
        min-width:120px;
    }
    .score-title{
        width: 100%!important;
        max-width: 100%!important;
        text-align:center;
    }
}
/* END STEPS */

/** BOTTOM PART */
.next-button{
    text-align:right !important;
    right:0;
    clear:both;
    margin-top:50px;
}
.next-button .step{
    text-align:center !important;
    right:0;
    clear:both;
    background:#e31e24;
    color:white !important;

}
/** BOTTOM PART END */



input[type=radio]{
    width:0.01px;
    height:0.01px;
    background:white;
}
input[type=radio]::after{
    width:15px;
    height:15px;
    background:white;
    border:1px solid white;
    display:block;
    content:'';
    margin-top:-15px;
    margin-left:-25px;
    border-radius:25px;
    float:left;
    transition:.5s all;
}
input[type=radio]:checked::after{
    width:15px;
    height:15px;
    background:#1E313D;
    border:4px solid white;
    display:block;
    content:'';
    margin-top:-15px;
    margin-left:-25px;
    border-radius:25px;
    float:left;
}
.step-container{
    display:none;
}
.step-container.active{
    display:block;
}



/** STEP 2 */
table.alkohol{
    width:100%;
}
table.alkohol td,
table.alkohol th{
    text-align:center;
    color:#e31e24 !important;
}
table.alkohol th{
    font-weight:bold;
    padding:20px 0;

}
table.alkohol tbody tr td{
}
table.alkohol td.hour{
    font-size:150%;
    font-weight:bold;
}
table.alkohol td div{

    vertical-align:middle;
}

.alkohol-select {
    text-align:left;
}
.alkohol-select select{
    width:100%;
    background:white;
    color:#e31e24 !important;
    border: 1px solid #e31e24;
    border-radius:5px;
    margin:5px;
    padding:10px;
}
.alkohol-icon {
    text-align:right;
}
.alkohol-icon i{
    color:black !important;
    max-width:10%;
}
.alkohol-quantity{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.alkohol-quantity .input{
    display:inline;
    padding:5px 13px 5px 13px;
    width:40px;
    text-align:center;
    background:#e31e24;
    color:white;
    border-radius:5px;
}
.alkohol-quantity .up::before,
.alkohol-quantity .down::before
{
    content: "\2038";
    color:white;
    cursor:pointer;
    font-weight:bold;
    font-size:24px;
    display:inline-block;
    position:absolute;
    margin-left:-18px;
    margin-top:18px;

}
.off{
    opacity:.6;
}
.alkohol-quantity .up::before{
    margin-top:-20px;
}
.alkohol-quantity .down::before{
    transform:rotate(180deg);
}
/** STEP 2 END*/


/** STEP 3 */
.score-title{
    color: #e31e24;
    font-size:30px;
    margin:50px;
    margin-left:0;
    width:800px;
    text-align:center;
    max-width:70%;
}
.alkomat-wynik-wykres{
    display:inline-block;
    height:400px;
    width:900px;
    max-width:100%;
    max-height:450px;
    max-width:70%;
    position:relative;
    white-space:nowrap;
    overflow-x:hidden;
    overflow-y:visible;
    background-color: transparent;
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .1) 25%, rgba(0, 0, 0, .1) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .1) 25%, rgba(0, 0, 0, .1) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1) 76%, transparent 77%, transparent);
    background-size:50px 50px;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

}
/* width */
.alkomat-wynik-wykres::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.alkomat-wynik-wykres::-webkit-scrollbar-thumb ::before {
content:'';
display:block;
  width: 40px;
  height: 40px;
  background:blue;
}

/* Track */
.alkomat-wynik-wykres::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
.alkomat-wynik-wykres::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.alkomat-wynik-wykres::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.alkomat-wynik-alkomat{
    display:inline-block;
    width:200px;
    height:400px;
    vertical-align:top;
    max-width:20%;
    background:url(../images/alkomat.png);
    background-position:right;
    background-repeat: no-repeat;
    background-size: auto 400px;
    FLOAT:RIGHT;
    MIN-WIDTH:160PX;
}

.alkomat-screen{
    font-family: DIGITAL;
    FONT-SIZE: 45PX;
    PADDING-TOP:75PX;
    PADDING-right:35PX;
    text-align:right;
    COLOR:RGBA(0,0,0,.6);
}

.alkomat-screen SPAN{
    FONT-SIZE:16PX;
    FONT-FAMILY:TAHOMA;
    display:block;
    margin:0;
    padding:0;
    margin-top:-15px;
}
.alkomat-screen SPAN.screen-top-text{
    margin:0;
    position:absolute;
    text-transform:uppercase;
    font-size:10.8px;
    right:28px;
        font-family: 'Hind Siliguri', sans-serif;

}
.alkomat-bottom-logo{
    max-width:30%;
    float:left;
}
@media only screen and (max-width: 768px) {
    table.alkohol td.hour{
        font-size:130%;
        font-weight:bold;
    }
    .step-container{
        width:100% !important;
    }
    .alkomat-wynik-wykres {
        position:relative;
        width:100% !important;
        min-width:100% !important;
        display:block;
        margin:0 !important;
        clear:both;
        overflow-x:auto;
    }
    .alkomat-wynik-wykres canvas{
        width:100% !important;
        max-width:100% !important;
    }
    .alkomat-wynik-alkomat{
        display:none !important;
    }
    .alkomat-bottom-logo{
        display:none !important;
    }
    .score-title{
        width:100% !important;
        margin:10px!important;
        font-size:22px;
        white-space: pre;
    }
    .next-button .step{
        display:inline-block;
        width: 30% !important;
        max-width: 30% !important;
        min-width: 130px !important;
        margin:0 !important;

    }
    .next-button .previous{
        float:left !important;
        padding:5px;
    }
    .selected-options{
        width:100%;
        margin:auto auto;
    }
    .selected-options .sex{
        margin-top:30px !important;

    }

    .selected-options .sex{
        width:90%;
        text-align:center;
    }
    .selected-options .sex:first-child,
    .selected-options .sex:nth-child(2)
    {
        width:40%;
    }
}

/** STEP 3 END */
    .selected-options .sex li{
        font-family: 'Open Sans' !important;
    }

/** SELECTED OPTIONS */
.selected-options {
    margin-top:20px;
    width:100%;
    min-height:100px;
    text-align:center;
}
.selected-options div {
    margin-top:30px;
    padding:10px;
    border: 1px solid #e31e24;
    display:inline-block;
    border-radius:15px;
    position:relative;
    vertical-align:top;
}
.selected-options div.sex {
    display:inline-block;
    margin:5px;
    position:relative;
}
.selected-options div.btn {
    min-width:80px;
    height:80px;
    border:none;
    border-radius:15px;
    color:#e31e24;
    margin:0 !important;
    text-align:center;
    padding:0;
    position:relative;
}
.drank-alko ul li{
    display:inline-block;
    color:#e31e24;
}
.selected-options div.btn.active {
    background:#e31e24;
    color:white;
    padding-top:0;
    font-size:200%;

}
.selected-options div.btn.active i {
display:block;
    position:absolute;
    margin:50%;
    transform:translate(-50%, -50%);
}
.selected-options div.btn.hours {
    min-width:220px;
    display:block;
    height:40px !important;
    margin:0px 0px;
    clear:both;
    vertical-align:top;
    margin-top:5px;
    padding-top:7px;
}
.selected-options div.btn.others {
    position:relative;
    display:block;
    min-width:200px;
    margin:0px 0px;
    clear:both;
    vertical-align:top;
    margin-top:5px;
    padding-top:7px;
    text-align:left;
}
.selected-options div.btn.others ul{
    padding-left:20px;
    list-style-type: square;
}
.selected-options div.btn.others ul{
    padding-left:20px;
    list-style-type: square;
}
.selected-options div.btn.others table{
    width:100%;
    color:#e31e24;
}
.selected-options div.btn.hours .track-holder{
    width:70%;
    min-width:100px;
    border:none;
    margin:0 0 !important;
    padding:6px;
    margin-right:15px !important;
        display:inline;
        float:left;
        width:60%;

}
.selected-options div.btn.hours .track-title{
    width:30%;
    border:none;
    margin:-0 !important;
    padding:0;
    vertical-align:top;
    display:inline;
    float:left;
}
.selected-options div.btn.hours .track:first-child{
    margin:5px;
    transform:translate(0, -50%);
}
.selected-options div .title {
    position:absolute;
    margin-top:-35px;
    width:100%;
    font-family: 'Hind Siliguri', sans-serif;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#e31e24;
    left:0;
    font-weight:bold;
}
.selected-options div.btn .track {
    padding:0;
    margin-top:50%;
    transform:translate(0, -50%);
}
.selected-options div.btn .track .thumb {
    margin-left:50%;
    transform:translate(-50%, 0);
}
.selected-options table{
    width:90%;
    height:100%;
}
.selected-options table td{
    padding:3px;

}
.selected-options .stats-piwo,
.selected-options .stats-wino,
.selected-options .stats-wodka,
.selected-options .stats-inne {
    font-weight:bold;
    text-align:right;
}



/** CHART */
.alkomat-chart-bar{
    WIDTH:65PX !important;
    position:relative;
    vertical-align:bottom;
    display:inline-block;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:20px;
    padding-bottom:20px;
}
.alkomat-chart-bar::before{
    background: rgb(228,245,252); /* Old browsers */
    background: -moz-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,255,255,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(tight, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    width:100%;
    height:100%;
    position:absolute;
    content:'';
    opacity:.2;
}
.alkomat-chart-bar::after{
    background:white;
    height:30px;
    width:100%;
    position:absolute;
    content:'';
    opacity:.3;
}
.alkomat-chart-bar.base{
    width:0.01px !important;
    height:90%;
}
.alkomat-chart-bar span{
    position:absolute;
}
.alkomat-chart-label{
    position:absolute;
    top:-20px;
    left:0px;
    width:100%;
    text-align:center;
    font-weight:bold;
}
.alkomat-chart-hour{
    position:absolute;
    top:100%;
    left:0px;
    width:100%;
    text-align:center;
    font-weight:bold;
}
/** CHART END */



@media only screen and (max-width: 1200px) {
    .selected-options .sex {
        margin-top:30px !important;
    }
}
.alkohol-quantity button{
    border-radius:5px;
    border:none;
    background:none;
    color:#e31e24;
    display:inline;
    max-width:30%;
    width:30%;

}
.alkohol-quantity span
{
    max-width:30%;
    width:30%;

}
.alkomat-wynik-no-data,
.alkomat-wynik-error
{
    width:100%;
    display:block;
    margin: 40px;
    margin-left:0;
    font-size:25px;
    text-align:center;
    font-family: 'Hind Siliguri', sans-serif;
    letter-spacing: 1.5px;
    text-transform:uppercase;
}
.alkomat-chart-next,
.alkomat-chart-previous
{
    display:inline-block;
    width:30px;
    height:30px;
    vertical-align:middle;
    position:absolute;
    margin-top:-100px;
    background-size:200% 100%;
    background-repeat:no-repeat;
    background-position:center right;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #e31e24;
    content: '';
    height: 25px;
    width: 25px;
    transform: rotate(45deg);
    opacity:.6;
}

.alkomat-chart-next::before {
    transform: rotate(-135deg);
}

.alkomat-chart-previous {
    transform:rotate(-135deg);
}
.alkomat-chart-next {
    right:0;
}

.alkomat-chart-buttons {
    width:800px;
    max-width:70%;
    position:relative;
}
@media only screen and (max-width: 768px) {
    .alkomat-chart-buttons {
        width:100%;
        max-width:100%;
    }
}
@media only screen and (min-width: 768px) {
    .alkomat-chart-buttons {
        display:none!important;
    }
    .alkomat-wynik-wykres{
        overflow:auto !important;
    }

}



/*** Ikonki */
span.alkohol-icon {
    content:'';
    display:block;
    width:30px;
    height:30px;
    background:url(../images/alkohole.svg);
    background-size: auto 30px;
    margin:auto auto;
    vertical-align:middle;
}
span.alkohol-icon.wine2 {
    background-position: -90px 0;
}
span.alkohol-icon.wine {
    background-position: -30px 0;
}
span.alkohol-icon.vodka {
    background-position: -60px 0;
}
span.alkohol-icon.beer-small {
    background-position: -120px 0;
}
span.alkohol-icon.spiritus {
    background-position: -150px 0;
}
td.alkohol-icon{
    min-width:40px;
}
button{
    outline:none!important;
}