*, *:before, *:after { box-sizing: border-box; }
img { max-width: 100%; }



@font-face {
    font-family: "Metric-Black";
    src: url("../../assets/fonts/Metric/v1/Metric-Black.woff2") format("woff2"),
    url("../../assets/fonts/Metric/v1/Metric-Black.woff") format("woff"),
    url("../../assets/fonts/Metric/v1/Metric-Black.otf") format("otf");
    font-weight: normal;
}

@font-face {
    font-family: "Metric-Bold";
    src: url("../../assets/fonts/Metric/v1/Metric-Bold.woff2") format("woff2"),
    url("../../assets/fonts/Metric/v1/Metric-Bold.woff") format("woff"),
    url("../../assets/fonts/Metric/v1/Metric-Bold.otf") format("otf");
    font-weight: normal;
}


@font-face {
    font-family: "Metric-Light";
    src: url("../../assets/fonts/Metric/v1/Metric-Light.woff2") format("woff2"),
    url("../../assets/fonts/Metric/v1/Metric-Light.woff") format("woff"),
    url("../../assets/fonts/Metric/v1/Metric-Light.otf") format("otf");
    font-weight: normal;
}

@font-face {
    font-family: "Metric-Medium";
    src: url("../../assets/fonts/Metric/v1/Metric-Medium.woff2") format("woff2"),
    url("../../assets/fonts/Metric/v1/Metric-Medium.woff") format("woff"),
    url("../../assets/fonts/Metric/v1/Metric-Medium.otf") format("otf");
    font-weight: normal;
}

@font-face {
    font-family: "Metric-Regular";
    src: url("../../assets/fonts/Metric/v1/Metric-Regular.woff2") format("woff2"),
    url("../../assets/fonts/Metric/v1/Metric-Regular.woff") format("woff"),
    url("../../assets/fonts/Metric/v1/Metric-Regular.otf") format("otf");
    font-weight: normal;
}

:root {
    --primary-green: #CF132F;
    --primary-purple: #7E858B;
}

body { background: #0E1414; color: white; font-family: 'Metric-Light', Arial, sans-serif; font-size: 16px; font-weight: 400; }
a { color: #CF132F; text-decoration: none; transition: background-color 0.3s, color 0.3s; font-size: 16px; }
a:hover { text-decoration: none; color: #CF132F; }

.container { margin: 0 auto; padding: 0; width: 100%; }

.header { margin: 0 auto; max-width: 1920px; padding-top: 40px; }
.header .top { position: relative; }
.page.home .header .top,
.page.inner .header .top { display: flex; flex-direction: row; padding-top: 30px; }
.header .logo { flex: 0 0 100%; max-width: 100%; text-align: center; }
.page.home .header .logo,
.page.inner .header .logo { flex: 0 0 25%; max-width: 25%; text-align: left; }
.header .links { margin-top: 0; }
.header .nav a { color: black; }
.header .buttons li ul { top: 110%; }
.header .buttons a { background: white; }
.header .buttons a span:before { background: var(--primary-green); color: white; }
.header .buttons a:hover { background: white!important; }

#r_country_promotion div.input-field { text-align: left; }

.main { margin: 0 auto; max-width: 1920px; }
.main h1 { font-family: 'Metric-Light', Arial, sans-serif; font-weight: 100; color: white; margin: 0 auto 0 auto; max-width: 640px; text-align: center; font-size: 46px;}

.page .main h1 { max-width: 100%; }
.page .main h1 { text-align: center; }
.main h2 { margin: 0; }
.page.inner .main.form-box .container .content-box .intro p, .main.form-box .container .content-box .intro p { color: white; font-size: 14px; text-align: left; text-transform: none; }
.page.home { padding-top: 0px; }
table.dataTable thead th, table.dataTable thead td, table.dataTable tbody th, table.dataTable tbody td { font-size: 16px; font-weight: 600; }
.page.inner .header .top { padding-bottom: 0px; }


.main .content-box { background: #0E1414; border: none; color: white; margin: 0 auto; max-width: 500px; padding: 30px; }
.main .content-box .intro { border-bottom: 0; margin-bottom: 0; }
.main .content-box .label-field, .field-row .table-cell.coll1_field_sub_group_btm,
.main .content-box .input-field, .field-row .table-cell { width: 100%; }
.form-container label { color: white; }
.form-container input[type="text"], .form-container input[type="password"], .form-container textarea { border-radius: 0; }
.main.form-box .content-box .buttons { padding-left: 0; text-align: center; }
#button_subscribe {
        font-family: "Metric-Regular", Arial, sans-serif;
        background: #CF132F;
        border-radius: 0;
        color: white;
        display: inline-block;
        max-width: 50%;
        padding: 10px;
        text-align: center;
        width: 100%;
        transition: background-color 0.3s;
        text-decoration: none;
        text-transform: none;
    }
    #button_subscribe:hover { background-color: #97021E; }

#r_password > div.label-field > label { margin-bottom: 0; padding-bottom: 0px; }
#r_password > div.label-field { padding-bottom: 5px; }
#customer_report_details, #logout { color: white; }

.form-container input[type="text"], .form-container input[type="password"], .form-container textarea  { background-color: #0E1414; color: white; }
.main .content-box .form-field, .field-row { font-size: 17px; }
.main .table th { background: var(--primary-green)!important; }
.dt-scroll-body { overflow-x: hidden!important; }
.faq-box .panel-title > a { color: white; }


@media (max-width: 1200px) {
    .header { text-align: left; }
    .header .top { padding-bottom: 0; }
    .header .logo img { max-width: 140px; }
    .header .nav .buttons li li { margin: 0; }
    .page.home .header .top,
    .page.inner .header .top { padding-top: 60px; }
}
@media (max-width: 800px) {
    .header .banner { display: block; padding: 0 15px; }
    .header:before { content: ''; display: block; height: 254px; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
    .main .content-box .label-field, .field-row .table-cell.coll1_field_sub_group_btm, .main .content-box .input-field, .field-row .table-cell { padding-left: 15px; padding-right: 15px; width: 100%; }
    .page.inner .main.form-box .container .content-box .intro p, .main.form-box .container .content-box .intro p { padding-left: 15px; padding-right: 15px; text-align: center; text-transform: uppercase; }
    .main .content-box label { margin: 0; padding: 10px 0; }
    .main .content-box label + a { margin: 0 0 10px 0; }
    .main h1 { font-size: 28px; line-height: 1.25; text-align: center; text-transform: uppercase; }
    .main.form-box .content-box .buttons { padding-left: 0; text-align: center; }
    body .main.form-box .container {padding: 0 25px;}
}