* {
    box-sizing: border-box;
}
*::after, *::before {
    box-sizing: border-box;
}

html, body {
    font-family: "Titillium Web",sans-serif;
    font-size: 16px;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    max-width: 750px;
    min-height: 200px;
}

a {
    color: #7f0011;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
p {
    line-height: 1.5;
    margin: 0 0 24px;
}
input {
    line-height: normal;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    max-width: 100%;
}
select {
    border: 1px solid #68798d;
    height: 38px;
    outline: medium none;
    padding: 5px 17px;
    width: 100%;
    display: block;
}

.PageSection {
    display: none;
    position: relative;
    margin: 32px 32px 32px 50px;
    padding-left: 28px;
    border-left: 1px solid #d8d8d8;
}

.PageSectionHdr {
    position: absolute;
    left: -14px;
    top: 18px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: #444;
    color: #eee;
    font-size: 18px;  
    font-weight: bold;
    text-align: center;
    line-height: 28px;
}

.PageSectionCont {
    padding: 18px;
    background-color: #fff;
    border: 1px solid #e2e2e2;  
    text-align: left;
}

h2 {
    text-transform: uppercase;
    font-size: 22px;
    color: #800;
    font-weight: normal;
    margin: 0 0 1em 0;
    line-height: 1.1em;
    position: relative;
}
h2 span {
    text-transform: none;
    font-size: 12px;    
    margin-left: 2em;
}
.PageSectionCont .DvoredniTabovi {display:block; display:flex; width:100%;}
.PageSectionCont .DvoredniTabovi label {white-space:nowrap; height:inherit; overflow:hidden;}
.PageSectionCont .DvoredniTabovi label:before {content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-0.25em;}
.PageSectionCont .DvoredniTabovi label span {
    display: inline-block;
    vertical-align: middle;    
    white-space: normal;
    line-height: 1.2em;
}
.ui-controlgroup > .ui-controlgroup-item {
    padding:0.4em 1em;
    max-width: 10em;
    height: 3.5em;
}
.ui-checkboxradio-icon {display:none !important;}

.SectionIcon {
    min-height: 60px;    
    padding-right: 80px;
}
#UploadSection1 .SectionIcon {}
#UploadSection2 .SectionIcon {background: rgba(0,0,0,0) url("../img/korak1.png") right top no-repeat !important;}
#UploadSection3 .SectionIcon {background: rgba(0,0,0,0) url("../img/korak2.png") right top no-repeat !important;}
#UploadSection4 .SectionIcon {background: rgba(0,0,0,0) url("../img/korak2.png") right top no-repeat !important;}
/*#UploadSection2 .PageSectionCont, #UploadSection4 .PageSectionCont{padding-left:3em;}*/
#UploadSectionButton .PageSectionHdr, #OrderSectionButton .PageSectionHdr {background-color:#0b0;}

#dTipUsluge label {
    padding: 0.4em 0.1em;
    width: 20%;
}
@media (max-width: 800px) {
    #dTipUsluge label {width: inherit;}
}
#dStruka {display:block; margin:1em 0 1em 0;}
#dStruka label {    
    width: 12em; 
    height: 52px;
    margin:0.2em 0 0.2em 0.2em; 
    padding-left: 52px !important;
    padding-right: 0 !important;
    line-height:18px;
    position: relative;
    font-size: 90%;
    text-align: left;
}

.Struka1:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat 0 0;}
.Struka2:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat -44px 0;}
.Struka3:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat -88px 0;}
.Struka4:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat 0 -44px;}
.Struka5:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat -44px -44px;}
.Struka6:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat -88px -44px;}
.Struka7:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat 0 -88px;}
.Struka8:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat -44px -88px;}
.Struka9:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat -88px -88px;}
.Struka10:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat 0 -132px;}
.Struka11:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat -44px -132px;}
.Struka12:after {background: rgba(0,0,0,0) url("../img/struke.60.png") no-repeat -88px -132px;}
#dStruka label:after {content:" "; width:42px; height:42px; left:3px; top:3px; position:absolute;
    background-size: 140px;}

#UploadSectionButton .PageSectionCont div {text-align: center;}
#UploadSectionButton button, #OrderSectionButton button, #PaySectionButton button {
    background-color: #801; color:#eee; font-weight:bold; padding:0.5em 2em; text-transform:uppercase;
}

#OrderSectionDoc .PageSectionCont {line-height: 2em;}

.wpcf7-form-control-wrap {
    position: relative;
}
.hp-file-container {
    position: relative;
}
span.wpcf7-not-valid-tip {
    color: #f00;
    display: block;
    font-size: 1em;
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 0 6px 42px;
    background: transparent url("../img/exclamation.png") no-repeat 0 0;
}
input[type="text"], input[type="email"], input[type="password"] {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #68798d;
    border-radius: 0;
    height: 38px;
    padding: 8px;
    display: block;
}
input[type="file"] {
    height: 38px;
    opacity: 0;
    outline: medium none;
    position: relative;
    text-align: right;
    width: 100%;
    max-width: 20em;
    z-index: 2;
    display: block;
}
select[name="Country"] {
    padding-left:5px;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
.hp-file-container input[type="file"] {cursor:pointer}
.hp-file {
    background: #fff url("../img/upload.png") no-repeat scroll 93% 48% !important;
    border: 1px solid #68798d;
    height: 38px;
    left: 0;
    line-height: 100%;
    margin: 0;
    padding: 11px 17px;
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 25em;
    z-index: 1;
    cursor:pointer;
}
.hp-file::before {
    color: #68798d;
}
.hp-file-foot {
    color: gray;
    margin-top: -1em;
    font-size: 90%;
}
.hp-custprice {
    margin:2em 0.5em; font-size:90%; background-color:#eee; border:1px solid #ddd; padding:0.5em 1em;
}

.hp-name {
    background: #fff url("../img/name-icon.png") no-repeat scroll 93% 48% !important;
}
.hp-firm {
    background: #fff url("../img/firm-icon.png") no-repeat scroll 93% 48% !important;
}
.hp-pib {
    background: #fff url("../img/pib-icon.gif") no-repeat scroll 93% 48% !important;
}
.hp-addr {
    background: #fff url("../img/addr-icon.png") no-repeat scroll 93% 48% !important;
}
.hp-mail {
    background: #fff url("../img/email-icon.png") no-repeat scroll 93% 48% !important;
}
.hp-tel {
    background: #fff url("../img/phone-icon.png") no-repeat scroll 93% 48% !important;
}
.hp-custt-p, .hp-custt-f {
    padding: 10px;
    font-size: 90%;
    border: 1px #ccc solid;
}
.hp-pib-w {
    margin-left: 5em;
    margin-right: 1em;
    position: relative;
}
.hp-pib-w-a {
    display: inline-block;
    left: -5em;
    position: absolute;
    top: 0;
    width: 4em;
}
.hp-pib-w-b {
}

.hp-country {
    background: #fff url("../img/country-icon.png") no-repeat scroll 93% 48% !important;
}
.fw {
    display: block;
    width: 100%;
}
.btn-primary, .btn-primary:visited {
    background: #7f0011 none repeat scroll 0 0;
    border: 1px solid #7f0011;
    color: #fff;
}

.btn-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
}
.btn-group-lg > .btn, .btn-lg {
    border-radius: 6px;
    font-size: 18px;
    line-height: 1.33333;
    padding: 10px 16px;
}
.btn {
    -moz-user-select: none;
    background-image: none;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    line-height: 1;
    margin: 0;
    text-shadow: none;
    text-transform: none;
}
.btn-lg {
    font-size: 18px;
    font-weight: 400;
    padding: 15px 21.45px;
}
.btn-primary, .btn-primary:visited {
    background: #7f0011 none repeat scroll 0 0;
    border: 1px solid #7f0011;
    color: #fff;
}
.btn-secondary, .btn-secondary:visited {
    background: #222533 none repeat scroll 0 0;
    border: 1px solid #222533;
    color: #fff;
}

.note {    
    font-size: 90%;
    line-height: 1.2em;
}
.popup-hint {
    display: inline-block;
    width: 16px;
    margin-left: 4px;
    background: #fff url("../img/info-icon.png") no-repeat scroll 93% 48% !important;
}

#TotalPrice {}
#TotalPriceDT {padding:1em 2em; margin:2em 1em 0.8em; background-color:#eee; border:1px solid #ddd;}
#TotalPrice table {margin:0 auto;}
#TotalPrice th {text-align:left; font-weight:normal; min-width:5em; padding:2px 1em;}
#TotalPrice td {text-align:right; min-width:4em; padding:2px 1em;}
#TotalPrice .Total th, #TotalPrice .Total td {border-top:1px solid #aaa;}
#TotalPrice p {margin:0.5em 1em 0 1em;}

#PayProcessor {padding-top: 2em;}
#PayProcessor span.btn {padding: 4px 0.5em;}
#PayProcessor input {margin-left:2em;}
#PayProcessor label {display:inline-block; vertical-align:middle; border:1px #ccc solid; padding:10px;}
@media (max-width: 420px) {
    #PayProcessor input {margin-left:1em;}
}

#FormAgreeTOS {margin-top: 2em;}

.dPossible247-0,.dPossible247-1 {
    color: #888;
    position: relative;
    text-align: center;
    float: right;
    line-height: 18px;
    width: 140px;
}
.dPossible247-0 div,.dPossible247-1 div {
    position: absolute;
    right: 10px;
    bottom: 42px;
    height: 120px;
    width: 120px;
    background: transparent url("../img/PSD-24-7-T-120x120.png");
    opacity: 0.3;
}
.dPossible247-0 {
    color: #888;
}
.dPossible247-1 {color: #800;}
.dPossible247-1 div {opacity:1;}
@media (max-width: 620px) {
   .dPossible247-0,.dPossible247-1 {display:none;}
}

.AlreadyUploadedDoc {
    color:#800; font-weight:bold; margin:0em 0 1em 0em; border: 1px solid #888; padding:0.5em 1em; 
    width:100%; max-width:25em;
}

#Header {
    background:#7f0011 none;
    margin:20px 0 2em 0;
    padding:6px 2%;
}

.col {
    width: 33.3%;
    float: left;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
@media (max-width: 800px) {
  .col {width:100%}
}

.col50 {
    width: 49%;
    float: left;
    min-height: 1px;
    min-width: 20em;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: left;
    line-height: 1.8em;
}

#OfferForm {
    text-align:center;
    margin:3em;
}
.OfferSeparator {
    clear: both;
    height: 2em;
    border-bottom: 1px solid silver;
}
.OfferPrice {
    width: 12em;
    padding: 0.8em 0;
    margin: 1em auto 1em auto;
    text-align: center;
    font-size: 140%;
    color: #fff;
    background-color: #800011;
}
#OrderSectionDoc b {
    margin-left:0.5em;
}
.OfferPrice b {
    color: #fff;
}
.OrderBtnRow {
    position: relative;
    padding-top: 2em;
}

.FormCtrlCheckboxWrapper {
    position: relative;
    padding-left: 1.5em;
    display: block;
}
.FormCtrlCheckboxWrapper input {
    position: absolute;
    left: 0;
    top: 0.4em;
}
.FormCtrlCheckboxWrapper label {
    font-size: 90%;
}

.ErrorNotification {
    background: #fbb url(../img/exclamation.png) no-repeat 28px 10px;
    border: 2px solid #d88;
    border-radius: 8px;
    color: #a00;
    margin: 3em 5em;
    padding: 1em 2em 1em 88px;
}

.ConfirmationNotification {
    background: #efe none;
    border: 2px solid #bdb;
    border-radius: 8px;
    color: #696;
    margin: 3em 5em;
    padding: 1em 2em;
}
#dNoT247 {
    display: none;
    color: gray;
    padding: 1em;
    text-align: center;
    font-style: italic;
    font-size: 90%;
}
/*.FwBtnDisabledP {
    background-color: #eee;
}
.FwBtnDisabledP input {
    background-color: #ddd;
    border: 1px solid #ccc;
    cursor: not-allowed !important;
    transition: all 0.6s linear 0s;
}*/

#FormGroup-CT {padding-bottom: 1em;}
#FormGroup-CT span.btn {padding: 15px 0.5em;}

#Note_24-7T {position:relative; font-size:90%; min-height:3em;}
#Note_24-7T span {position:absolute; display:block; transition: all 0.4s linear 0s;}
#Note_24-7T b {font-size:120%; padding-right:0.3em;}
#Note_24-7T_On {color:#444;}
#Note_24-7T_On b {color:green;}
#Note_24-7T_Off {color:#aaa;}
#Note_24-7T_Off b {color:#888;}

.Img24-7 {position:absolute; top:1.8em; margin-left:10px; width:60px}

.btn-secondary:hover {text-decoration: none;}

.ControlRow {position:relative; display:block;}

.Mandatory {position:absolute; right:-8px; top:0; color:#f00; cursor:help;}
.Mandatory::after {content:"*";}


@media (max-width: 800px) {
    h2 span {display:block; margin:-4px 0 0 0;}
    #OfferForm {margin:3em 0;}
    #OrderSectionOffer .PageSectionCont div {text-align:center}
    .ErrorNotification {margin:3em 1em; padding:3em 2em 1em 2em;}
    
    .PageSectionCont .DvoredniTabovi {display:block; width:100%;}
    .PageSectionCont .DvoredniTabovi label {display:block; float:none; margin:0.2em auto; padding:0.4em 0.4em !important; border-radius:8px;}
    .PageSectionCont .DvoredniTabovi br {display:none;}
}

@media (max-width: 420px) {
    .PageSection {border-left:none; margin:32px 16px 32px 16px; padding:0; top:0;}
    .Img24-7 {top:0; margin-left:-18px;}
    .ConfirmationNotification {margin:1em; padding:1em;}
}

.ui-controlgroup > .ui-controlgroup-item {max-width: 12em;}

body .ui-widget {font-family: "Titillium Web",sans-serif;}