@charset "UTF-8";
/* CSS Document */

#container{
    max-width:1200px;
    width:100%;
    margin: 0;
    background-color:white;
    position: relative;
}

#spokes-links {
    position: absolute;
    top:-25px;
    right: 0;
}

#intro{
    width:97%;
    margin: 0rem auto;
}
#spoke-calculator{
    width:97%;
    margin: 0rem auto;
}
#container h1{
    font-size:24px;
    font-weight:bold;
}
#container h2{
    font-weight:bold;
    font-size:18px;
    clear: right;
    padding-top: 22px;
}

#container p{
    font-size:12px;
}
.inputfield{
    margin-right: 5px;
    width: 47px;
    height: 24px;
}
.circle{
    color: #FFED00;
    background: #272B35;
    width: 20px;
    height: 20px;
    -moz-border-radius: 100px 100px 100px 100px;
    border-radius: 100px 100px 100px 100px;
    text-align: center;
    font-size: 18px;
    float: left;
    margin-right: 10px;
}
#container label{
    font-size:12px;
    float:left;
    font-weight: bold;
}

.box{
    border: 1px solid #cccccc;
}
/*STEP 1*/
.label-form1{
    font-size:12px;
    font-weight:normal;
    width: 50%;
    float: left;
}

#radiobuttongroup{
    width:33%;
}
#radiobuttongroup label{
    padding: 5px 0px;
}
#read-more{
    margin-top: 60px;
}

/*STEP 2*/
#box1{
    width: 63.5%;
    height: 300px;
    float:left;
    margin-bottom: 20px;
}
#box1-form1{
    font-size: 12px;
    padding-top: 10px;
    display: block;
    width: 30%;
    min-width: 15rem;
    text-align: center;
    margin: 0rem auto;
    height: 35px;
}
#box1-form1 label{
    padding-top: 10px;
}
#box1-form2{
    margin-left: 1rem;
    padding-top: 227px;
    float: left;
    font-size: 12px;
}
#box1-form2 label {
    max-width: 150px;
}

#box1-form3{
    float: right;
    padding-top: 227px;
    font-size: 12px;
    padding-right: 5px;
    width: 40%;
}

#box1-form3 label {
    max-width: 150px;
    width: 50%;
    padding-right: 10px;
}

#box1-form3 input{
}
#box1-form3 span{
}

#label-internal-diameter {
    max-width: 160px;
}
.frontwheel-disc #gear-side-label{
    margin-right: 3px;
    width: 130px;
}
#non-gear-side{
    margin-top: -9px;
    margin-left: 17px;
}
#gear-side{
    margin-top: -9px;
}
#total-length-hub{
    margin-left:9px;
}

#box2{
    float:right;
    width: 33.5%;
    height: 300px;
    margin-bottom: 20px;
    font-size:12px;
}
#hub-diameter-non-gear, #hub-diameter-gear{
    margin-bottom: 12px;
}
#box2-form1{
    padding-top: 220px;
    margin: 0rem auto;
    width: 70%;
    min-width: 17rem;
    text-align: center;
}
.labelform4{
    padding-top: 10px;
    width:160px;
}
#box3{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/img3.png);
    background-repeat:no-repeat;
    background-position: center 20px;
    float:left;
    width: 33.5%;
    height:300px;
    font-size:12px;
}
#box3-form1{
    padding-top: 265px;
    margin: 0rem auto;
    width: 70%;
    min-width: 17rem;
    text-align: center;
}
#internal-diameter{
    margin-left: 20px;
    margin-top: -9px;
}

#box4{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/img4.png);
    background-repeat:no-repeat;
    background-position: 10px 20px;
    width:63.5%;
    height:150px;
    float:right;
    margin-bottom: 20px;
}
#box4-form1{
    position: absolute;
    right: 1rem;
    padding-top: 115px;
    padding-right: 1rem;
}
#rim-thickness{
    margin-left: 15px;
    margin-top: -9px;
}
#box5{
    width:63.5%;
    height:130px;
    float:right;
}

#box5-form1
{
    padding-top: 15px;
    margin-left: 20px;
}

#button-calculate{
    color:#FFED00;
    background-color:#626D7F;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    width:176px;
    height:40px;
    margin-top:20px;
    font-size:22px;
    border:none;
    float: left;
}

#validation-text{
    color:#FF0000;
    font-family:Myriad Pro;
    font-weight:bold;
    display:none;
    float: left;
    margin-top: 28px;
    margin-left: 20px;
}

.link{
    color:#0099CC;
    font-size:12px;
    text-decoration:none;
}
#img4{
    margin-left: 20px;
    margin-top: 20px;
}
#number-of-spokes,#number-of-crossings,#number-of-crossings-non-gear{
    margin-bottom: 6px;
    justify-self: center;
}

#box5-form1{
    width: 90%;
    height: 100%;
    padding-top: 1rem;
    display: grid;
    grid-template-columns: 3fr 1fr 3fr 1fr;
    grid-template-rows: 1fr 1fr;
}

@supports (display: grid) {
    #box5-form1{
        display: grid;
        grid-template-columns: 3fr 1fr 3fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

#box5-form1 label{
    text-align: right;
    padding-top: 10px;
    padding-right: 1rem;
}

#box5-form1 .label-box5:nth-of-type(2){
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

#number-of-crossings{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

#box5-form1 .label-box5:nth-of-type(3){
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

#number-of-crossings-non-gear{
    grid-column: 4/5;
    grid-row: 1 / 2;
}

/* greek page */
.spoke-calculator-gr #box1{
    height: 320px;
}
.spoke-calculator-gr #box1 #box1-form2{
    padding-top: 247px;
}
.spoke-calculator-gr #box1 #box1-form3{
    padding-top: 247px;
}
.spoke-calculator-gr #box1 label{
    margin-top: -15px;
}
.spoke-calculator-gr #box2{
    height: 320px;
}
.spoke-calculator-gr #box2 label{
    margin-top: -15px;
}
.spoke-calculator-gr #box2 label:last-of-type{
    margin-top: -5px;
}
.spoke-calculator-gr #box2 #hub-diameter-gear{
    margin-top: 10px;
}

.spoke-calculator-gr #box5 #box5-form1 .label-box5{
    padding-top: 5px;
}

/* CLASSES FOR IMAGES*/
.frontwheel #box1{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/frontwheel-without-disc-1.png);
    background-repeat:no-repeat;
    background-position: center;
}
.frontwheel-disc #box1{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/frontwheel-with-disc-1.png);
    background-repeat:no-repeat;
    background-position: center;
}
.rearwheel #box1{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/rearwheel-without-disc-1.png);
    background-repeat:no-repeat;
    background-position: center;
}
.rearwheel-disc #box1{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/rearwheel-with-disc-1.png);
    background-repeat:no-repeat;
    background-position: center;
}
.frontwheel #box2{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/frontwheel-without-disc-2.png);
    background-repeat:no-repeat;
    background-position: center 20px;
}
.frontwheel-disc #box2{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/frontwheel-with-disc-2.png);
    background-repeat:no-repeat;
    background-position: center 20px;
}
.rearwheel #box2{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/rearwheel-without-disc-2.png);
    background-repeat:no-repeat;
    background-position: center 20px;
}
.rearwheel-disc #box2{
    background-image:url(/themes/custom/sapim/images/spoke-calculator/rearwheel-with-disc-2.png);
    background-repeat:no-repeat;
    background-position: center 20px;
}

/*STEP 3*/
#step3{
    margin-top: 44rem;
    width: 100%;
}
#resultbox{
    width: 438px;
    max-width: 50%;
    height: 118px;
    background-color:#DFDFE1;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    padding:5px;
    overflow: auto;

}
#disclaimer{
    width: 405px;
    max-width: 35%;
    height: 59px;
    position: relative;
    bottom: 120px;
    left: 470px;
    font-family: Myriad Pro;
}
.step3-label{
    font-size:18px;
    font-weight:bold;
    width: 250px;
    max-width: 55%;
    padding-top: 21px;
    padding-left: 5px;
    color:#262B34;
}
#result1, #result2{
    width: 149px;
    max-width: 40%;
    height: 42px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    border: none;
    margin-top: 10px;
    margin-left: 5px;
    color:#262B34;
    font-size:30px;
    font-weight:bold;
    text-align: center;
}

#step3 p:last-of-type{
    display: block;
    position: absolute;
    bottom: 25px;
}

.error{
    background-color:#ed9595;
}
/*---TOOLTIPS----*/
/*.tooltip {
	/*background-image:url(images/tooltip.png);
	background-repeat:no-repeat;
	position: absolute;
	display:none;
	width:173px;
	height:47px;

}
.tooltip-text{
	color:white;
	font-weight:bold;
	font-size:12px;
	position: absolute;
	left: 10px;
	top: 5px;
}
#tooltip1{
	margin-left: 85px;
}
#tooltip2{
	margin-left: 45px;
}
#tooltip3{
	margin-left: 20px;
	}
#tooltip4{}
#tooltip5{
	margin-top: -14px;
	margin-left: 110px;
}
#tooltip6{
	margin-top: -2px;
	margin-left: 120px;
}
#tooltip7{
	margin-left: 30px;
}*/

/* bug fixes for IE */
_:-ms-fullscreen, :root #box3{
    background-size: 70%;
}
_:-ms-fullscreen, :root .spoke-calculator-gr #box1-form2{
    width: 48%;
}
_:-ms-fullscreen, :root .spoke-calculator-gr #box5-form1 label{
    max-width: 75%;
}

@media only screen and (max-width: 850px) {

    #radiobuttongroup{
        width: 100%;
    }

    #box1{
        height: 340px;
    }

    .frontwheel #box1{
        background-position: center 40%;
    }
    .frontwheel-disc #box1{
        background-position: center 40%;
    }
    .rearwheel #box1{
        background-position: center 40%;
    }
    .rearwheel-disc #box1{
        background-position: center 40%;
    }

    #box1 #box1-form1{
        border-bottom: 1px solid #cccccc;
        padding-bottom: 10px;
        width: 100%;
        height: auto;
    }
    #box1 #box1-form1 label{
        text-align: center;
        width: 60%;
    }

    #box1 #box1-form1 span{
        text-align: center;
        margin-right: 20px;
    }

    #box1 #box1-form2{
        height: 32px;
        margin: 0;
        padding: 0;
        padding-top: 10px;
        position: relative;
        top: 200px;
        border-top: 1px solid #cccccc;
        width: 100%;
        text-align: center;
    }

    #box1 #box1-form2 .inputfield{
        margin: 0;
        margin-right: 5px;
    }

    #box1 #box1-form2 label{
        text-align: center;
        width: 60%;
        max-width: 100%;
        position: relative;
        top: 5px;
    }

    #box1 #box1-form2 span{
        text-align: center;
        margin-right: 20px;
    }

    #box1 #box1-form3{
        height: 32px;
        margin: 0;
        padding: 0;
        padding-top: 10px;
        position: relative;
        top: 200px;
        width: 100%;
        text-align: center;
    }

    #box1 #box1-form3 .inputfield{
        margin: 0;
        margin-right: 5px;
    }

    #box1 #box1-form3 label{
        padding-right: 0;
        text-align: center;
        width: 60%;
        max-width: 100%;
        position: relative;
        top: 5px;
    }

    #box1 #box1-form3 span{
        text-align: center;
        margin-right: 20px;
    }

    #box2{
        height: 340px;
    }

    #box2-form1{
        width: 100%;
        min-width: 100%;
        padding-top: 10px;
        position: relative;
        top: 251.2px;
        border-top: 1px solid #cccccc;
    }

    .labelform4{
        width: 55%;
        margin-top: -0.5rem;
        padding-top: 0px;
    }

    #box2 .inputfield{
        margin-left: 1rem;
        width: 15%;
    }

    #box3-form1{
        width: 100%;
        min-width: 100%;
    }

    #box3-form1 label{
        width: 40%;
        margin-top: -1rem;
    }

    .frontwheel #box1{
        background-size: 80%;
    }
    .frontwheel-disc #box1{
        background-size: 80%;
    }
    .rearwheel #box1{
        background-size: 80%;
    }
    .rearwheel-disc #box1{
        background-size: 80%;
    }

    .frontwheel #box2{
        background-size: 90%;
        background-position: center 30%;
    }
    .frontwheel-disc #box2{
        background-size: 90%;
        background-position: center 30%;
    }
    .rearwheel #box2{
        background-size: 90%;
        background-position: center 30%;
    }
    .rearwheel-disc #box2{
        background-size: 90%;
        background-position: center 30%;
    }

    #box3{
        background-size: 90%;
        background-position: center 30%;
    }

    .label-box5{
        text-align: center;
        margin-top:-1em;
    }

    #step3{
        margin-top: 46rem;
    }

    .step3-label{
        width: 50%;
        text-align: center;
        padding-top: 5%;
    }

    #resultbox input{
        font-size: 1.5rem;
    }

    #disclaimer{
        left: 55%;
    }

    #step3 p:last-of-type{
        bottom: 5px;
    }

    /* greek page */
    .spoke-calculator-gr #box1{
        height: 360px;
    }
    .spoke-calculator-gr #box1 #box1-form2{
        padding-top: 15px;
        position: relative;
        top: 200px;
    }
    .spoke-calculator-gr #box1 #box1-form3{
        padding-top: 15px;
        position: relative;
        top: 200px;
    }
    .spoke-calculator-gr #box1 label{
        margin-top: 0;
    }
    .spoke-calculator-gr #box2{
        height: 360px;
    }

    .spoke-calculator-gr #box2 #box2-form1 label:first-of-type{
        margin-top: -10px;
    }

    .spoke-calculator-gr #box2 #box2-form1 label:last-of-type{
        margin-top: 0px;
    }
    .spoke-calculator-gr #step3{
        margin-top: 48rem;
    }
}

@media only screen and (max-width: 680px) {

    #box1{
        float: none;
        width: 100%;
    }
    #box2{
        float: left;
        width: 47.5%;
        height: 350px;
    }
    #box2 .labelform4{
        padding-top: 10px;
    }
    #box3{
        float: right;
        width: 47.5%;
        height: 350px;
    }
    #box3 #box3-form1{
        padding-top: 10px;
        position: relative;
        top: 251.2px;
        border-top: 1px solid #cccccc;
    }

    #box3 label{
        width: 60%;
        margin-top: 0;
        text-align: center;
        max-width: 100%;
        position: relative;
        top: 5px;
    }

    #box3 .inputfield{
        margin: 0;
        margin-right: 5px;
    }
    #box4{
        float: none;
        overflow: auto;
        width: 100%;
    }
    #box5{
        float: none;
        width: 100%;
    }

    #box5 #box5-form1{
        display: block;
    }

    #box5 #box5-form1 label{
        padding-right: 0;
        text-align: center;
        width: 70%;
        max-width: 100%;
        position: relative;
        top: 5px;
    }

    #box5 .inputfield{
        margin-left: 10%;
    }

    .frontwheel #box1{
        background-size: 60%;
    }
    .frontwheel-disc #box1{
        background-size: 60%;
    }
    .rearwheel #box1{
        background-size: 60%;
    }
    .rearwheel-disc #box1{
        background-size: 60%;
    }

    #button-calculate{
        width: 100%;
        float: none;
    }

    #validation-text{
        width: 100%;
        text-align: center;

    }

    #radiobuttongroup label{
        padding-left: 10px;
        width: 40%;
    }

    #step3{
        margin-top: 0rem;
        float: left;
    }

    #step3 p:last-of-type{
        position: relative;
        bottom: 70px;
    }

    /* greek page */
    .spoke-calculator-gr #box2{
        height: 380px;
    }
    .spoke-calculator-gr #box2 #box2-form1 input:last-of-type{
        margin-top: 30px;
    }
    .spoke-calculator-gr #box3{
        height: 380px;
    }
    .spoke-calculator-gr #box3 #box3-form1{
        padding-top: 20%;
    }
    .spoke-calculator-gr #step3{
        float: left;
        margin-top: 0rem;
    }
}

@media only screen and (max-width: 650px) {
    /* greek page */
    .spoke-calculator-gr #validation-text{
        margin: 0 auto;
    }

    .spoke-calculator-gr #resultbox{
        width: 100%;
        max-width: 100%;
    }

    .spoke-calculator-gr #disclaimer{
        position: static;
        width: 90%;
        margin: 0 auto;
        max-width: 100%;
        padding: 0.5rem;
    }

    .spoke-calculator-gr #step3 p:last-of-type{
        bottom: 0px;
        width: 90%;
        margin: 0 auto;
        margin-top: 1rem;
        text-align: center;
    }
}

@media only screen and (max-width: 480px) {
    #radiobuttongroup .label-form1{
        width: 100%;
    }

    #box1{
        height: 340px;
    }

    .frontwheel #box1{
        background-position: center 60px;
    }
    .frontwheel-disc #box1{
        background-position: center 60px;
    }
    .rearwheel #box1{
        background-position: center 60px;
    }
    .rearwheel-disc #box1{
        background-position: center 60px;
    }

    #box1 #box1-form1{
        border-bottom: 1px solid #cccccc;
        padding-bottom: 10px;
        width: 100%;
    }
    #box1 #box1-form1 label{
        text-align: center;
        width: 60%;
    }

    #box1 #box1-form1 span{
        text-align: center;
        margin-right: 20px;
    }

    #box1 #box1-form2{
        height: 32px;
        margin: 0;
        padding: 0;
        padding-top: 10px;
        position: relative;
        top: 200px;
        border-top: 1px solid #cccccc;
        width: 100%;
        text-align: center;
    }

    #box1 #box1-form2 .inputfield{
        margin: 0;
        margin-right: 5px;
    }

    #box1 #box1-form2 label{
        text-align: center;
        width: 60%;
        max-width: 100%;
        position: relative;
        top: 5px;
    }

    #box1 #box1-form2 span{
        text-align: center;
        margin-right: 20px;
    }

    #box1 #box1-form3{
        height: 32px;
        margin: 0;
        padding: 0;
        padding-top: 10px;
        position: relative;
        top: 200px;
        width: 100%;
        text-align: center;
    }

    #box1 #box1-form3 .inputfield{
        margin: 0;
        margin-right: 5px;
    }

    #box1 #box1-form3 label{
        padding-right: 0;
        text-align: center;
        width: 60%;
        max-width: 100%;
        position: relative;
        top: 5px;
    }

    #box1 #box1-form3 span{
        text-align: center;
        margin-right: 20px;
    }

    #box2{
        float: none;
        width: 100%;
        background-size: 50%;
        height: 300px;
    }

    .frontwheel #box2{
        background-size: 225px;
    }
    .frontwheel-disc #box2{
        background-size: 225px;
    }
    .rearwheel #box2{
        background-size: 225px;
    }
    .rearwheel-disc #box2{
        background-size: 225px;
    }

    #box2 #box2-form1{
        padding-top: 10px;
        position: relative;
        top: 210px;
        border-top: 1px solid #cccccc;
    }

    #box2 .labelform4{
        width: 60%;
        position: relative;
        top: 5px;
    }

    #box3{
        float: none;
        width: 100%;
        background-size: 50%;
        height: 250px;
    }

    #box3 #box3-form1{
        padding-top: 10px;
        position: relative;
        top: 200px;
        border-top: 1px solid #cccccc;
    }

    #box3 label{
        width: 60%;
        margin-top: 0;
        text-align: center;
        max-width: 100%;
        position: relative;
        top: 5px;
    }

    #box3 .inputfield{
        margin: 0;
        margin-right: 5px;
    }

    #box4{
        margin-top: 1.3rem;
    }

    #button-calculate{
        margin-bottom: 1.3rem;
    }

    #validation-text{
        margin: 0 auto;
    }

    #resultbox{
        width: 100%;
        max-width: 100%;
    }

    #disclaimer{
        position: static;
        width: 90%;
        margin: 0 auto;
        max-width: 100%;
        padding: 0.5rem;
    }

    #step3 p:last-of-type{
        bottom: 0px;
        width: 90%;
        margin: 0 auto;
        margin-top: 1rem;
        text-align: center;
    }

    /* greek page */
    .spoke-calculator-gr #box2{
        height: 340px;
        background-position: center 10%;
    }
    .spoke-calculator-gr #box2 #box2-form1 input:last-of-type{
        margin-top: 10px;
    }
    .spoke-calculator-gr #box3{
        float: none;
        width: 100%;
        background-size: 50%;
        height: 250px;
    }
    .spoke-calculator-gr #box3 #box3-form1{
        padding-top: 10px;
    }

}

/* Bug fixes for IE */
@media (max-width: 850px) and (min-width: 480px) {

    _:-ms-fullscreen, :root .box {
        overflow: hidden;
    }

}

@media (max-width: 680px) and (min-width: 480px) {

    _:-ms-fullscreen, :root #box3 #box3-form1 label {
        width: 50%;
    }

}