/**
* GLOBAL
**/
body {
    background-color: #fff;
    color: #222;
}

.body--lightgray {
    background-color: #F2F4F6;
}

.container-fluid {
    max-width: 72.5rem;
}

.main__title {
    font-size: 2rem;
    margin-bottom: 2em;
    text-transform: uppercase;
}

.main__title:last-child {
    margin-bottom: 0;
}

.main__title::after {
    content: "";
    display: block;
    background: #4a2a2d;
    width: 108px;
    height: 5px;
    border-left: 36px solid #00b0eb;
    border-right: 36px solid #e30427;
    margin-top: 1rem;
}

.main__title--center::after {
    margin-left: auto;
    margin-right: auto;
}

a {
    color: #057EB6;
}

a:hover,
a:focus,
a:active {
    color: #057EB6;
    text-decoration: none;
}

h1,
.h1-like {
    font-size: 2rem;
    font-weight: normal;
    color: #2D3748;   
}

h2,
.h2-like {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: #2D3748;
}

h3,
.h3-like {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 600;
    color: #2D3748;
    margin: 1.5rem 0 .5rem;
}

.section {
    padding: 5rem 0;
}

.section--lightgray {
    background-color: #F2F4F6;
}


/**
* HEADER
**/
.header {
    padding: 1.5rem 0 0 0;
    position: relative;
    height: 6.25rem;
    background-color: #F2F4F6;
}

.header .container-fluid {
    position: relative;
}

.header::before {
    content: '';
    position: absolute;
    background: url('../img/header-bg.png') center bottom no-repeat;
    background-size: cover;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
}

.disconnect__btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background-color: #057EB6;
    border-radius: 2rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 1rem;
    margin-left: 1rem;
}

.header__btn {
    border: 0;
    display: inline-block;
    text-decoration: none;
    color: #057EB6;
    background-color: #F2F4F6;
    border-radius: 2rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 1rem;
}

.header__btn:focus,
.header__btn:hover {
    text-decoration: underline;
    background-color: rgba(5, 126, 182, 0.15);
}

/* Languages */
.lang-choices {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    align-items: center;
    margin-right: 1rem;
    font-size: .825rem;
}

.lang-choices__item {
    display: inline-block;
    padding: 0 .5rem;
}

.lang-choices__item + .lang-choices__item {
    border-left: 1px solid #BDBCBC;
}

.lang-choices abbr {
    text-decoration: none;
}

.lang-choices__link {
    display: block;
}


/* From tablet */
@media screen and (min-width: 35em){
    .header {
        height: 8.75rem;
    }
}

/* From tablet */
@media screen and (min-width: 48em){
    .header {
        height: 11.25rem;
    }
}

/* Until tablet */
@media screen and (max-width: 47.9375em){
    .header__logo img {
        width: 5rem;
    }
}



/**
* BUTTONS
**/
.btn {
    display: inline-block;
    background: transparent;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    border-radius: .25rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: .625rem 1rem;
    border: 0;
    transition: border-color 100ms ease-in,
                background-color 100ms ease-in,
                color 100ms ease-in;
}

.btn-primary {
    color: #fff;
    background-color: #057EB6;
    border: 1px solid transparent;
}

.btn-primary:not([disabled]):hover,
.btn-primary:not([disabled]):focus,
.btn-primary:not([disabled]):active {
    text-decoration: underline;
    background-color: rgba(5, 126, 182, 0.15);
    color: #057EB6;
    border-color: currentColor;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-link {
    padding: 0;
    color: #057EB6;
    text-decoration: underline;
    font-weight: normal;
}

.btn-link:not([disabled]):hover,
.btn-link:not([disabled]):focus,
.btn-link:not([disabled]):active {
    text-decoration: none;
}

.btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
    user-select: none;
}

.btn-sm {
    font-size: .875rem;
    padding: .25rem .5rem;
}


/**
* FORM.
**/
.fieldset + .fieldset {
    margin-top: 1rem;
    padding-top: 2.5rem;
    border-top: 1px solid #ddd;
}

.fieldset__header {
    margin-bottom: 1.5rem;
}

.fieldset__title {
    margin-bottom: 1rem;
}

.fiedset__description {
    font-size: .875rem;
    color: #626262;
}

.form-field {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-actions {
    margin-top: 2rem;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 1rem);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #222222;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #BDBCBC;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    outline: 0;
    border-color: #00B1EB;
    box-shadow: 0 0 0 0.125rem rgba(5, 126, 182, 0.15);
}

.form-control[disabled] {
    background-color: #eee;
    color: #626262;
    cursor: not-allowed;
}

label,
.label {
    color: #3E494D;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: .25rem;
    display: block;
}

.form-info {
    margin-top: .25rem;
    font-size: .75rem;
    color: #626262;
    line-height: 1.33;
}

.form-optional {
    font-size: .75rem;
    color: #626262;
}


/* Select */
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI2cHgiIHZpZXdCb3g9IjAgMCAxMCA2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPlRyaWFuZ2xlPC90aXRsZT4KICAgIDxnIGlkPSJtb2JpbGUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJEZXNrdG9wLUhEIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjIyLjAwMDAwMCwgLTU1Ni4wMDAwMDApIiBmaWxsPSIjQkRCQ0JDIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU2MC4wMDAwMDAsIDIyOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJmb3JtLS8taW5wdXQtLy1kZWZhdWx0LWNvcHktMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDI4My4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iVHJpYW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3LjAwMDAwMCwgNDguMDAwMDAwKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtNjcuMDAwMDAwLCAtNDguMDAwMDAwKSAiIHBvaW50cz0iNjcgNDUgNzIgNTEgNjIgNTEiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+
    );
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    padding-right: 3.5rem;
}

select::-ms-expand {
    display: none;
}

/* Checkbox */
.form-check {
    position: relative;
}

.form-check label {
    padding-left: 1.75rem;
    line-height: 1.25;
}

.form-check label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #BDBCBC;
    border-radius: 0.25rem;
}

.form-check [type="checkbox"] {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0;
}

.form-check [type="checkbox"]:checked + label::before {
    background-color: #057EB6;
    border-color: #057EB6;
}

.form-check [type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    background: url('../img/check.svg') center no-repeat;
}

/* Input Group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
  
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-file {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
  margin-left: -1px;
}

.input-group > .form-control:first-child,
.input-group > .custom-select:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Country code */
.form-country-code {
    padding-right: 1.5rem;
    max-width: 4rem;
}

/* Form Validation */
.field-validity {
    width: 1em;
    padding-left: .5rem;
    opacity: 0;
}

.form-control.is-error {
    border: 1px solid #E40427;
    outline: none;
    box-shadow: none;
}

.form-control.is-error + .field-validity {
    color: #E40427;
    opacity: 1;
}

.form-control:required:invalid + .field-validity::after {
    content: "\00d7";
}

/*input:required:valid + .field-validity {
    color: #38A169;
    opacity: 1;
}

input:required:valid + .field-validity::after {
    content: "\2713";
}*/



/* One Time Password */
.otp {
    background-color: #fff;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 2rem 1.5rem 3rem 1.5rem;
    text-align: center;

    /* Position */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    opacity: 0;
    transform: translateY(120%);
    transition: transform 250ms ease-in;
}

.form-otp {
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 10px;
    background-color: #f5f5f5;
    font-family: monospace;
}

.has-otp {
    overflow: hidden;
}

.has-otp::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.7);
    z-index: 5;
}

.has-otp .otp {
    transform: translateY(0);
    opacity: 1;
}


/* From tablet */
@media screen and (min-width: 48em){
    .otp {
        border-radius: 1rem;
        padding: 1.5rem;
        max-width: 25rem;
        width: 100%;
    }

    .has-otp .otp {
        bottom: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, 50%);
        transition: opacity 150ms ease-in;
    }
}

/* Test Center */
.test-center {
    position: relative;
}

.test-center__address {
    font-size: .875rem;
    color: #626262;
}

.test-center [type="radio"] {
    position: absolute;
    left: 1rem;
    top: 50%;
    height: 1.25rem;
    width: 1.25rem;
    margin-top: -.625rem;
    opacity: 0;
    z-index: 1;
}

.test-center label {
    padding: .5rem 1rem;    
    border-radius: .25rem;
    background-color: #fff;
    border: .125rem solid transparent;
    /* If multiple center
    padding-left: 2.75rem;*/
}

/* If multiple center 
.test-center label::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    margin-top: -.625rem;
    background-color: #ccc;
}

.test-center [type="radio"]:checked + label {
    border-color: #057EB6;
}

.test-center [type="radio"]:checked + label::before {
    background: #057EB6
}

.test-center [type="radio"]:checked + label::after {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -.625rem;
    background: url('../img/check.svg') center no-repeat;
}*/







/**
* ALERT
*/
.alert {
    margin: 1rem 0;
    padding: 1rem;
    border: .0625rem solid transparent;
    border-radius: .25rem;
}

.alert__title {
    font-size: 1.125rem;
    margin-bottom: .5rem;
    color: currentColor;
}

.alert__icon {
    display: inline-block;
    vertical-align: baseline;
    margin-right: .25rem;
    fill: currentColor;
    width: 1.25rem;
    height: 1.25rem;
}

.alert--success {
    background-color: #F0FFF4;
    border-color: #38A169;
    color: #22543D;
}

.alert--error {
    background-color: #FCE6E9;
    border-color: #E40427;
    color: #720214;
}

.alert--info {
    background-color: #EBF8FF;
    border-color: #3182CE;
    color: #2A4365;
}




/**
* TABLE
**/
.table {
    width: 100%;
    margin: 1rem 0;
    color: #222;
    border-collapse: collapse;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    background-color: #F2F4F6;
    border-top: 0;
}

.table th,
.table td {
    padding: .75rem;
    vertical-align: middle;
    border-top: 1px solid #ddd;
}

.table-inactive {
    opacity: .6;
}

.table-current td {
    background-color: rgba(5, 126, 182, 0.15);
}

.table-current td:first-child {
    border-left: .25rem solid #057EB6;
}

/* Responsive table, as block */
@media screen and (max-width: 767px){
    .table-responsive thead tr {
        position: absolute;
        top: -999px;
        left: -999px;
    }

    .table-responsive th,
    .table-responsive tr,
    .table-responsive tbody,
    .table-responsive thead {
        display: block;
    }

    .table-responsive tr {
        border: 1px solid #ddd;
    }

    .table-responsive tr:nth-of-type(even) { 
        background: #F2F4F6;
        margin-top: 1em;
      }

    .table-responsive td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-color: #ddd;
    }

    .table-responsive td:first-child {
        border-top: none;
    }

    .table-responsive td::before {
        content: attr(aria-label);
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: bold;
        color: #626262;
    }
}




/**
* OVERVIEW
*/

.overview dt {
    display: block;
    margin-top: .75rem;
    color: #626262;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .25px;
}

.overview__footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #BDBCBC;
}






/**
* LOGIN FORM
*/
.page-login {
    padding: 1rem 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F2F4F6;
}

.login-form {
    background-color: #fff;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 25rem;
    width: calc(100% - 2rem);
    margin: 0 auto;
}

.login-form__header {
    margin-bottom: 1.5rem;
}

.login-form__title {
    font-size: 1.5rem;
    margin-top: 2.5rem;
}





/**
* DIGITAL REPORT
*/
.index-page {
    background: url('../img/bg-blurry.jpg') center no-repeat #F2F4F6;
    background-size: cover;
    padding: 1rem 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}





/**
* FOOTER
*/
.footer .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: .825rem;
    margin: 4rem auto 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #F2F4F6;
}

.footer a {
    color: #626262;
}

.footer a + a {
    margin-left: 1em;
}




/**
* HELPERS
*/
.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
			clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}