*, *: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: #f4f4f4; color: #000000; 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; }
h5 p { margin: 30px 0 0 0;}
h5 p a {     color: black;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.5;
    text-decoration: none;
    text-transform: none; margin: 0 10px 0 0 ;
}

h5 p a:hover {  text-decoration: underline; color: #000;}

.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(to right, #edeae7 0%, #edeae7 50%, #edeae7 100%); }
#r_country_promotion div.input-field { text-align: left; }

.main { margin: 30px; max-width: 1920px; color: black;}
.main h1 { font-family: 'Metric-Light', Arial, sans-serif; font-weight: 100; color: rgb(0, 0, 0); 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; color: black; }
.page.inner .main.form-box .container .content-box .intro p, .main.form-box .container .content-box .intro p { color: rgb(0, 0, 0); font-size: 14px; text-align: left; text-transform: none; }

table.dataTable td{color: black;}
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 {  border: 1px solid black; color:black; 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: rgb(0, 0, 0); }
.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: #414141;   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: #d2d2d2; }

#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: #cf132f; }

.form-container input[type="text"], .form-container input[type="password"], .form-container textarea  {  color: rgb(0, 0, 0); }
.main .content-box .form-field, .field-row { font-size: 17px; }
.main .table th { background: #414141 !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;}
}