@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{-webkit-box-sizing:border-box;box-sizing:border-box;}
body{
    position: relative;
    background-color:#ffffff;
    font-family: 'Roboto', sans-serif;
    margin:0;
}
a,span,i{display:inline-block;}
h1,h2,h3,p{margin:0;}

/* Header */
.main-header {
    padding: 14px 25px;
    background-color: #005eb8;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 99;
}

.main-header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.form-select-col label > p {
    min-height: 150px;
    display: flex;
    /*align-items: flex-start;*/
    align-items: center;
}
.main-header a {
    color: #000000;
    text-decoration: none;
}

.main-header ul li + li {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 2px solid;
}

label {
    display: block;
    cursor: pointer;
}

.logo-section {
    text-align: center;
    padding: 15px;
    font-family: arial;
}

form h3:not(:first-child) {
    margin-top: 50px;
}
.form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.container {
    max-width: 660px;
    margin: 0 auto;
    padding:0 15px;
}
label,h3,.form-content p {
    font-size: 15px;
    line-height: 1.4;
    color: #000000;
    font-weight: bold;
}
label{
    font-weight:normal;
}
.form-content p { line-height: 1.6;font-weight:normal;}
h3{margin-bottom: 25px;color:#791a2b;}
input,select#salutation { border: 1px solid #c4996c; padding: 8px 15px;width:100%;}
select#salutation{padding:7px 15px;margin-right: 5px;}

select:focus,input:focus{outline:0;}
.form-group { display: flex; align-items: center;flex-wrap: wrap;padding: 0 15px;}
.form-group > label { width:100%; max-width: 100%; }
.form-group + .form-group { margin-top: 10px; }
.form-group.personalization-wrap > label {
    width: 100%;
    margin-bottom: 16px;
}
.terms-wrap {
    margin-top: 20px;
    margin-bottom: 60px;
}

button.btn-1 {
    font-size: 15px;
    line-height: 1;
    padding: 5px 30px;
    background-color: #c4996c;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 600;
    width: 170px;
    cursor: pointer;
    border:1px solid #c4996c;
}
button.btn-2 {
    font-size: 15px;
    line-height: 1;
    padding: 5px 30px;
    background-color: #000000;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 600;
    width: 170px;
    cursor: pointer;
    border: 1px solid #c4996c;
    margin-left: 10px;
}
.output { margin-top: 30px; }
.output-1 { margin-top: 50px; }
.form-group.full-width-group input {
    width: 100%;
    max-width:100%;
}

.phone-number { position: relative; }
h3.stepContent { margin-bottom: 2px; }
.paraText {
    font-size: 12px;
    line-height: 1.6;
    font-style: italic;
    color: #000000;
}
.phone-number > span { position: absolute; top: 48px; left: 10px; }
.phone-number input { padding-left: 45px; }
.terms-wrap label:before {content: '';position: absolute;width: 21px;border: 2px solid #c4996c;height: 20px;top:4px;left:0;}
.terms-wrap label:after{
    content:'';
    position:absolute;
    left: 0;
    top: 5px;
    width: 5px;
    height: 10px;border: solid #c4996c;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    left: 8px;
    opacity:0;
}

.terms-wrap label { position: relative;padding-left: 30px;margin-bottom: 16px;}
.terms-wrap input[type="checkbox"]{
    width:0;
    height:0;
    padding:0;
    bottom:0;
    margin:0;
}
/*.terms-wrap label span {
    background-color: white;
    width: 16px;
    position: absolute;
    left: 4px;
    top:2px;
}*/
a { color:#0000ff;}
.terms-wrap input[type="checkbox"]:checked + label:after {
    opacity: 1;
}
.d-none {
    display: none;
}
.errorMessage {
    color: #c00;
    padding-top: 5px;
    display: block;
    width: 100%;
    font-size:12px;
    line-height:1;
}
.errorSummary {
    color: #c00;
    padding-top: 5px;
}
/* Footer */
footer {
    background-color: #ebebeb;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    padding: 15px 15px;
}
.footer-section
{
    background-color: #000000;
    font-size: 14px;
    line-height: 1;
    color: white;
    font-weight: 700;
    position: sticky;
}
.blank-box {
    background-color: #f5f5f5;
    height: 85px;
    width: 100%;
    display: block;
    margin-top: 50px;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px
}

.alert h4 {
    margin-top: 0;
    color: inherit
}

.alert .alert-link {
    font-weight: bold
}

.alert>p,
.alert>ul {
    margin-bottom: 0
}

.alert>p+p {
    margin-top: 5px
}

.alert-dismissable,
.alert-dismissible {
    padding-right: 35px
}

.alert-dismissable .close,
.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit
}

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d
}

.alert-success hr {
    border-top-color: #c9e2b3
}

.alert-success .alert-link {
    color: #2b542c
}

.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f
}

.alert-info hr {
    border-top-color: #a6e1ec
}

.alert-info .alert-link {
    color: #245269
}

.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b
}

.alert-warning hr {
    border-top-color: #f7e1b5
}

.alert-warning .alert-link {
    color: #66512c
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442
}

.alert-danger hr {
    border-top-color: #e4b9c0
}

.alert-danger .alert-link {
    color: #843534
}
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20)
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
    filter: alpha(opacity=50)
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.text-nowrap {
    white-space: nowrap
}

.text-lowercase {
    text-transform: lowercase
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.text-muted {
    color: #777
}

.text-primary {
    color: #337ab7
}

a.text-primary:hover,
a.text-primary:focus {
    color: #286090
}

.text-success {
    color: #3c763d
}

.tb-1 { margin: 10px 0; width: 100% !important; }
.tb-1 th { background: #004677; border-left: #fff solid 1px; color: #fff; line-height: 1.2; padding: 10px; text-align: center; text-transform: capitalize; }
.tb-1 td { border: #f1f1f1 solid 1px; padding: 10px; text-align: center; }
.tb-1 tr:nth-child(even) td { background: #f8f9fa; }
.tb-1 p { margin: 0; }
.tb-1 .action { text-align: center; white-space: nowrap; }
.tb-1 .action a { color: #e89f23; display: inline-block; font-size: 11px; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.tb-1 .action a:hover { text-decoration: none; }
.tb-1 .typelink { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-1 .tooltip-wrap span { left: auto; margin-left: 0; top: -100%; right: 20px; }
.tb-1 .tooltip-wrap span:before { border-color: transparent transparent transparent #e3e3e3; border-width: 6px 0 6px 7px; left: auto; right: -6px; }

.title-1, .title-2, .title-3, .title-4, .title-6 { color: #333; font-size: 30px; font-weight: 600; letter-spacing: 2px;  margin: 0 0 20px 0; text-transform: capitalize; }
.title-2 { color: #004677; }
.title-3 { border-bottom: #efefef solid 1px; color: #333 !important; display: block; font-size: 20px; letter-spacing: 2px; padding: 10px 30px 10px 0; position: relative; }
.title-3:before { content: "\f068"; font-family: FontAwesome; font-size: 18px; font-weight: normal; position: absolute; right: 0; top: 12px; }
.title-3.collapsed:before { content: "\f067"; }
.title-4 { border-bottom: #efefef solid 1px; color: #333; font-size: 25px; font-weight: 400; padding-bottom: 10px; }
.title-5 { color: #333; font-size: 20px; letter-spacing: 2px; margin: 30px 0 20px; text-transform: uppercase; }
.title-6 { color: #004677; font-size: 20px; margin: 30px 0 10px; }
.title-7, .btn-control { background: #3b3049; color: #fff !important; display: block; font-size: 14px; padding: 10px 20px; text-transform: capitalize; }
.mt-20{margin-top: 20px;}
.mboil-view-wrap { display: none; }
.text-danger {
    color: #dc3545!important;
}

#uob-form fieldset .form-card { padding: 20px 40px 30px 40px; box-sizing: border-box; width: 94%; margin: 0 3% 20px 3%; /*stacking fieldsets above each other*/ position: relative; }
#uob-form fieldset { width: 100%; margin: 0; padding-bottom: 20px; border: none; /*stacking fieldsets above each other*/ position: relative; }
/*Hide all except first fieldset*/
#uob-form fieldset:not(:first-of-type) { display: none; }
#uob-form fieldset .form-card { text-align: left; color: #9E9E9E; }

.w-100 {width: 100% !important;}
.title-red-bold {color: #dc3545 !important; font-weight:bold; margin-block-start:1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px;font-size: 14px;}

.input-group { width: 100%; }
.input-group  .form-control{
    border: 1px solid #c4996c;
    padding: 8px 15px;
    
}

@media screen and (max-width:1366px) {
    label, h3, .form-content p,.paraText{font-size:14px;}
    .form-group > label { width: 100%; }
    .terms-wrap label:after { top: 3px; }
    .form-group.personalization-wrap > label { margin-bottom: 8px; }
}
@media screen and (max-width:480px) {
    .form-group select + input { width: calc(100% - 85px);margin-top: 0;}
    .form-group input,.form-group.full-width-group input { width: 100%;margin-top:2px;}
    .confirm_product_image img{width: 100% !important;}
    .form-img.confirm_product_image { width: 100%; }
    .form-col.form-content .product_name { display: none; }
}

@media screen and (max-width:414px) {
    .terms-wrap {
        margin-top: 0;
        margin-bottom: 0;
    }
    button.btn-1 {
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
    }
    button.btn-2 {
        margin-left: 0px;
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
    }
    .output {
        margin-bottom: 30px;
    }
    .terms-wrap label {
        margin-bottom: 0;
        line-height: 26px;
    }
    .g-recaptcha {background: red;}
    .g-recaptcha iframe {width: 100%;}
    .g-recaptcha iframe .rc-anchor-normal {width: auto;}
    .g-recaptcha iframe .rc-anchor-normal .rc-anchor-content {width: 50%;}
    .g-recaptcha iframe .rc-anchor-normal-footer {width: 50%;}
    .g-recaptcha ifram .rc-anchor-error-message {font-size: 9px; line-height: 12px; padding: 0 6px;}
    .g-recaptcha ifram .rc-anchor-logo-portrait {margin: 10px 0 0 26px;}
    .g-recaptcha ifram .rc-anchor-normal .rc-anchor-pt {margin: 3px; padding-right: 2px; position: initial; text-align: center; width: auto;}
}

.text-right{text-align:right;}