*, *: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: #4e0d20; 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 0 50px 0; padding: 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; }

 .header .top {   background: linear-gradient(0deg, rgba(22, 28, 28, 1) 0%, rgba(71, 71, 73, 1) 100%); }
#r_country_promotion div.input-field { text-align: left; }

.main { margin: 30px; 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;     margin-top: 50px;}
.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; }

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; justify-content: center; }
.row.top { justify-content: center; padding: 0;}
.main .content-box { background: #0E1414; border: none; color: white; margin: 50px  auto 0; 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; }

table.table.dataTable>:not(caption)>*>* { background-color: unset; }
table#customer_ots_data_grid { background-color: unset; }
.table>:not(caption)>*>* { color: white; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color: unset; }

.header .logo { max-width: 150px; margin: 20px; display: flex; align-items: flex-end; }
.main .content-box .label-field.text-end,
.main .content-box label.text-end {     text-align: left !important; } 
p.links { margin-top: 30px; }

@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; }
}
@media (max-width: 800px) {
    .header .banner { display: block; padding: 0 15px; }
    .header:before { content: ''; display: block; height: 54px; 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;}
}