/* Copyright Etradex d.o.o. (R) - www.etradex.hr */
#orderitems {
max-width : 1024px;
}
#orderitems h1 {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : justify;
white-space : normal;
}
#orderitems_confirm {
padding-top: 85px;
max-width : 1024px;
min-height : 50%;
}
#orderitems_confirm h1 {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
}
.perorderline p {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
}
#clientdata {
max-width : 1024px;
min-height : 50%;
}
#clientdata h1 {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : justify;
white-space : normal;
}
#clientdata p {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
}
#clientdatalist {
width : 100%;
position : relative;
}
#clientdata label {
margin : 0;
padding-top : .5%;
padding-left : 3%;
width : 34%;
text-align : left;
font : bold normal normal .9em "Roboto", sans-serif;
color : #000000;
position : relative;
float : left;
clear : left;
}
#clientdata .clientdatainput, .select_clientdatainput {
padding-left : .5%;
margin-top : .5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
width : 60%;
text-align : left;
border : .05em solid #807e79;
position : relative;
float : left;
clear : right;
}
.clientdatainput_cntr {
background-color : #fff;
font : normal normal normal 1.1em "Roboto", sans-serif;
color : #000000;
margin-left : auto;
margin-right : auto;
padding : 0;
width : 95%;
border : .05em solid #807e79;
}
#clientdata .check_clientdatainput {
font : normal normal normal 1em "Roboto", sans-serif;
color : #000000;
width : 5%;
min-width : 17px;
min-height : 17px;
text-align : left;
border : .1em solid #dcdcdc;
border-radius : .5em .5em .5em .5em;
position : relative;
margin-top : .4em;
float : left;
clear : right;
}
.clientdata_img {
margin-right : auto;
margin-left : auto;
width : 50%;
border : none;
clear : both;
}
#clientdata a:link {
margin-top : 3%;
font : bold normal normal 1em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
text-decoration : underline;
}
#clientdata a:hover {
margin-top : 3%;
font : bold normal normal 1em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
text-decoration : none;
}
#clientdata a:active {
margin-top : 3%;
font : bold normal normal 1em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
text-decoration : underline;
}
#clientdata a:visited {
margin-top : 3%;
font : bold normal normal 1em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
text-decoration : underline;
}
#clientdata .orderitem_price_label {
margin : 0;
padding-top : .5%;
padding-left : 3%;
width : 40%;
text-align : left;
font : bold normal normal .9em "Roboto", sans-serif;
color : #000000;
position : relative;
float : left;
clear : left;
}
#clientdata .orderitem_price {
padding-left : .5%;
margin-top : .5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
width : 40%;
text-align : left;
border : .05em solid #807e79;
position : relative;
float : left;
}
#clientdata .orderitem_price_span {
padding-left : .5%;
margin-top : .5%;
font : bold normal normal .9em "Roboto", sans-serif;
color : #000000;
width : 20%;
text-align : right;
border : .05em solid #ffffff;
position : relative;
float : left;
clear : right;
}
#clientdata .orderitem_dlvr_price {
    padding-left : .5%;
    margin-top : .5%;
    font : normal normal normal .9em "Roboto", sans-serif;
    color : #000000;
    width : 40%;
    text-align : left;
    border : .05em solid #807e79;
    position : relative;
    float : left;
    }
    #clientdata .orderitem_dlvr_price_span {
    padding-left : .5%;
    margin-top : .5%;
    font : bold normal normal .9em "Roboto", sans-serif;
    color : #000000;
    width : 20%;
    text-align : right;
    border : .05em solid #ffffff;
    position : relative;
    float : left;
    clear : right;
    }
#clientdata .orderitem_pprice_label {
margin : 0;
padding-top : .5%;
padding-left : 3%;
width : 40%;
text-align : left;
font : bold normal normal .9em "Roboto", sans-serif;
color : #000000;
position : relative;
float : left;
clear : left;
}
#clientdata .orderitem_pprice {
padding-left : .5%;
margin-top : .5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
width : 40%;
text-align : left;
border : .05em solid #807e79;
position : relative;
float : left;
}
#clientdata .orderitem_pprice_span {
padding-left : .5%;
margin-top : .5%;
font : bold normal normal .9em "Roboto", sans-serif;
color : #000000;
width : 20%;
text-align : right;
border : .05em solid #ffffff;
position : relative;
float : left;
clear : right;
}
.pwdshowbox {
position : absolute;  
margin-top : .8%;
right : 5%;
height : auto;
min-height : 13px;
width : auto;
min-width : 23px;
cursor : pointer;
background-image : url(../images/eye_open.png);
background-position : center center;
background-repeat : no-repeat;
background-size : contain;
background-color : transparent;
z-index : 109;
}
.pwdhidebox {
position : absolute;  
margin-top : .8%;
right : 5%;
height : auto;
min-height : 13px;
width : auto;
min-width : 23px;
cursor : pointer;
background-image : url(../images/eye_closed.png);
background-position : center center;
background-repeat : no-repeat;
background-size : contain;
background-color : transparent;
z-index : 109;
}
.confirmpwdshowbox {
position : absolute;  
margin-top : 1.4%;
right : 5%;
height : auto;
min-height : 13px;
width : auto;
min-width : 23px;
cursor : pointer;
background-image : url(../images/eye_open.png);
background-position : center center;
background-repeat : no-repeat;
background-size : contain;
background-color : transparent;
z-index : 109;
}
.confirmpwdhidebox {
position : absolute;  
margin-top : 1.4%;
right : 5%;
height : auto;
min-height : 13px;
width : auto;
min-width : 23px;
cursor : pointer;
background-image : url(../images/eye_closed.png);
background-position : center center;
background-repeat : no-repeat;
background-size : contain;
background-color : transparent;
z-index : 109;
}
#clientagree {
position : relative;
display : block;
margin-top : 0;
padding : 0;
width : 100%;
min-width : 100%;
vertical-align : middle;
clear : both;
}
#clientagree .check_clientdatainput {
font : normal normal normal 1em "Roboto", sans-serif;
color : #000000;
width : 5%;
min-width : 25px;
min-height : 25px;
text-align : left;
border : .1em solid #dcdcdc;
border-radius : .5em .5em .5em .5em;
position : relative;
margin-right : .4em;
margin-left : .4em;
float : left;
clear : left;
}
#clientagree .span_txt {
margin : 0;
padding : 0;
width : 90%;
max-width : 90%;
text-align : left;
font : bold normal normal .9em "Roboto", sans-serif;
color : #000000;
min-height : 50px;
vertical-align : center;
float : left;
clear : right;
white-space : normal; 
}
#clientagree a:link {
background-color : transparent;
margin : 0;
padding : 0;
font : bold normal normal 1em "Roboto", sans-serif;
color : #000000;
text-decoration : underline;
}
#clientagree a:hover {
background-color : transparent;
margin : 0;
padding : 0;
font : bold normal normal 1em "Roboto", sans-serif;
color : #000000;
text-decoration : underline;
}
#clientagree a:active {
background-color : transparent;
margin : 0;
padding : 0;
font : bold normal normal 1em "Roboto", sans-serif;
color : #000000;
text-decoration : underline;
}
#clientagree a:visited {
background-color : transparent;
margin : 0;
padding : 0;
font : bold normal normal 1em "Roboto", sans-serif;
color : #000000;
text-decoration : underline;
}
#clientdatalist .error {
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
}
#orderdata {
padding-top: 85px;
max-width : 1024px;
min-height : 50%;
}
.perorder {
border-top : .1em solid #c0c0c0;
}
#orderdata h1, h2, h3, h4 {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
}
#orderdata p {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
}
#orderdata .order_green {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #0ac92b;
text-align : center;
white-space : normal;
}
#orderdata .order_orange {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #ffa824;
text-align : center;
white-space : normal;
}
#resultscontainer {
padding-top: 85px;
max-width : 1024px;
min-height : 50%;
}
#resultscontainer h1, h2, h3, h4 {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
}
#resultscontainer p {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
}
#confirmcancel h1 {
width : 95%;
margin-left : auto;
margin-right : auto;
padding-bottom : 1.5%;
font : bold normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
white-space : normal;
}
#orderaddress {
margin-left : auto;
margin-right : auto;
width : 95%;
max-width : 1024px;
padding-top: 1%;
text-align : center;
}
#itemlist {
width : 95%;
max-width : 1024px;
margin-left : auto;
margin-right : auto;
display : grid;
grid-gap : 5px;
grid-template-columns : repeat(auto-fit, minmax(230px, 1fr));
grid-auto-rows : auto;
justify-items : center;
align-items : center;             
margin-bottom : 10px;
margin-top : 10px;
}
.peritem {
display : grid;
margin-left : 1%;
margin-right : 1%;
margin-bottom : 2%;
padding-top : 1%;
padding-bottom : 1%;
height : auto;
width : 230px;
min-width : 230px;
max-width : 230px;
}
.orderitem {
font : normal normal normal 1em "Roboto", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 230px;
min-width : 230px;
max-width : 230px;
margin : 0;
padding-top: 10px;
padding-bottom: 15px;
overflow : visible;
background-color : transparent;
border : .1em solid #ffffff;
border-radius : .3em .3em .3em .3em;
}
.blue {
font : normal normal normal 1em "Roboto", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 230px;
min-width : 230px;
max-width : 230px;
margin : 1px;
padding-top: 10px;
padding-bottom: 15px;
overflow : visible;
background-color : #102a9c;
}
.black {
font : normal normal normal 1em "Roboto", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 230px;
min-width : 230px;
max-width : 230px;
margin : 1px;
padding-top: 10px;
padding-bottom: 15px;
overflow : visible;
background-color : #000000;
}
.red {
font : normal normal normal 1em "Roboto", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 230px;
min-width : 230px;
max-width : 230px;
margin : 1px;
padding-top: 10px;
padding-bottom: 15px;
overflow : visible;
background-color : #af1010;
}
.green {
font : normal normal normal 1em "Roboto", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 230px;
min-width : 230px;
max-width : 230px;
margin : 1px;
padding-top: 10px;
padding-bottom: 15px;
overflow : visible;
background-color : #16ad3b;
}
input.fuel:focus {
outline-width : 0;
outline : none;
}
fieldset {
border : .05em solid #807e79;
border-radius : .5em .5em .5em .5em;
width : 95%;
margin-top : 2%;
margin-left : auto;
margin-right : auto;
padding : 1%;
}
legend {
font : normal normal normal .9em "Roboto", sans-serif;
color : #000000;
text-align : center;
padding-left : 1%;
padding-right : 1%;
}
#orderaddress label {
margin : 0;
padding-top : .5%;
width : 29%;
text-align : left;
font : bold normal normal .8em "Roboto", sans-serif;
color : #000000;
position : relative;
float : left;
clear : left;
}
#orderaddress .clientdatainput, .select_clientdatainput {
padding-left : .5%;
margin-top : .5%;
font : normal normal normal .8em "Roboto", sans-serif;
color : #000000;
width : 70%;
text-align : left;
border : .05em solid #807e79;
position : relative;
float : right;
clear : right;
}
.nextbox {
font : normal normal normal 1.2em "Nunito", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 210px;
min-width : 210px;
max-width : 210px;
cursor : pointer;
margin-top : 25px;
margin-bottom : 25px;
padding-top: 3px;
overflow : visible;
background-color : #21202e;
border : .1em solid #21202e;
border-radius : .3em .3em .3em .3em;
box-shadow : 2px 2px 3px 1px #c2cac4;
}
.choicebox {
font : normal normal normal 1em "Nunito", sans-serif;
color : #ffffff;
border : none;
min-height : 20px;
width : 160px;
min-width : 160px;
max-width : 160px;
cursor : pointer;
margin : 20px 5px 0px 5px;
padding-top: 3px;
overflow : visible;
background-color : #807e79;
border : .1em solid #807e79;
border-radius : .3em .3em .3em .3em;
box-shadow : 2px 2px 3px 1px #c2cac4;
}
.confirmbox {
font : normal normal normal 1.2em "Nunito", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 210px;
min-width : 210px;
max-width : 210px;
cursor : pointer;
margin-top : 25px;
margin-bottom : 25px;
padding-top: 3px;
overflow : visible;
background-color : #5feb04;
border : .1em solid #5feb04;
border-radius : .3em .3em .3em .3em;
box-shadow : 2px 2px 3px 1px #c2cac4;
}
.loginbox {
font : normal normal normal 1.2em "Nunito", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 210px;
min-width : 210px;
max-width : 210px;
cursor : pointer;
margin-top : 25px;
margin-bottom : 25px;
padding-top: 3px;
overflow : visible;
background-color : #5feb04;
border : .1em solid #5feb04;
border-radius : .3em .3em .3em .3em;
box-shadow : 1px 1px 2px 1px #c2cac4;
}
.cancelbox {
font : normal normal normal 1.2em "Nunito", sans-serif;
color : #ffffff;
border : none;
min-height : 30px;
width : 210px;
min-width : 210px;
max-width : 210px;
cursor : pointer;
margin-top : 25px;
margin-bottom : 25px;
padding-top: 3px;
overflow : visible;
background-color : #e32636;
border : .1em solid #e32636;
border-radius : .3em .3em .3em .3em;
box-shadow : 2px 2px 3px 1px #c2cac4;
}
.omv_white {
background-image : url(../images/omv_white.png);
background-position : center bottom;
background-repeat : no-repeat;
padding-top : 36px;
}
.rh_white {
background-image : url(../images/rh_white.png);
background-position : center bottom;
background-repeat : no-repeat;
padding-top : 36px;
}
.etr_white {
background-image : url(../images/etr_white.png);
background-position : center bottom;
background-repeat : no-repeat;
padding-top : 36px;
}
@media screen and (min-width: 120px) and (max-width: 639px) and (orientation: portrait) {
.clientdatainput_cntr {
font : normal normal normal .9em "Roboto", sans-serif;
}
}
@media screen and (min-width: 120px) and (max-width: 1024px) and (max-height: 639px) and (orientation: landscape) {
.clientdatainput_cntr {
font : normal normal normal .8em "Roboto", sans-serif;
}
}