:root {
    --blue: #144e82;
    --yellow: #F8CE42;
    --red: #dc3545;
    --green: #b1dd93;
    --green-dark: #5cb85c;
    --gray: #c9c9c9;
    --yellow-slot: #F8CE42;
    --blue-slot: #D2EAFF;
    --border-slot: #5395CF;
    --slot-selected: #F8CE42;
    --slot-highlighted: #8FC8FB;
    --bs-btn-hover-bg: #8FC8FB;
}

html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    min-height: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "Arial", Helvetica, sans-serif !important;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="text"],
select,
textarea {
    font-size: inherit !important;
}

#ETMI_confirmdialog_bkg {
    opacity: 0.9 !important;
}

.loader {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 65px;
    display: none;
}

.sticky {
    width: 100%;
    background-color: var(--blue);
    display: flex;
    align-items: center;
    padding: 20px;
    letter-spacing: 1px;
    z-index: 1;
    height: 70px;
}

.sticky h1 span[data-role="timer-echo"] {
    display: none;
    float: right;
    color: var(--yellow);
}


.sticky h1 {
    width: 100%;
    margin: 0;
    text-transform: uppercase;
    color: #F1F1F1;
    font-size: 20px;
    display: inline-block;
    padding-left: 20px;
}

.sticky .give_up {
    text-transform: none !important;
    color: var(--yellow);
}

.sticky span[data-role="language-switch"] {
    display: flex;
}

.sticky span[data-role="language-switch"] a {
    display: inline-block;
    font-size: 0.6em;
    color: #fff;
    margin-right: 25px;
    text-align: center;
}

.sticky span[data-role="language-switch"] a img {
    width: 35px;
    margin: 0;
    display: block;
}

a[data-role="get-language-switch"] img {
    width: 35px;
    margin-right: 30px;
}

div[data-role="language-switch"] {
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 100px;
    min-width: 100%;
    min-height: 100%;
    text-align: center;
    font-weight: bold;
    display: none;
}

div[data-role="language-switch"] a img {
    width: 70px;
    margin: 25px auto 5px auto;
    display: block;
}

#content-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

#content {
    display: flex;
    flex-direction: column;
    width: 440px;
    height: 66%;
    position: relative;
    transition: opacity 0.5s ease-out;
}

#content[data-part="search"] .search, #content[data-part="cancel"] .cancel {
    justify-content: flex-start;
}

#content[data-part="patient"], #content[data-part="finalize"], #content[data-part="slot-selection"] {
    height: 85%;
}

.content-children {
    display: flex;
    gap: 10px;
    flex-direction: column;
    flex: 1;
}

#content[data-part="slot-selection"] {
    display: flex;
    flex-direction: column;
    width: 70%;
}

#content[data-part="patient"] {
    width: 35%;
}

#content[data-part="patient"] .actions-btns .confirm-mobile,
#content[data-part="slot-selection"] .actions-btns .confirm-mobile{
    display: none;
}

#content[data-part="patient"] .actions-btns > div {
    gap: 10px;
    display: inline-flex;
}

.content-top {
    position: relative;
    height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.content-top:before {
    content: '';
    background: url('../img/bar.png') no-repeat top left;
    background-size: auto auto;
    width: 100%;
    height: 25px;
}

.content-top .content-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #114472;
    justify-content: center;
    height: 60px;
}

.content-top [data-role="first-disponibility"] {
    display: none;
}

#content[data-part="slot-selection"] [data-role="first-disponibility"] {
    padding-right: 10px;
    width: 300px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

#content[data-part="slot-selection"] button[data-role="first-disponibility-button"] {
    opacity: 0;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

#content[data-part="slot-selection"] button[data-role="first-disponibility-button"].visible {
    opacity: 1;
}

.content-top .content-text h2 {
    font-size: 18px;
    color: white;
    text-transform: uppercase;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    width: 100%;
    min-width: 100%;
    margin: 0;
}

#content[data-part="slot-selection"] .content-text h2 {
    width: calc(100% - 300px);
    min-width: calc(100% - 300px);
}

.content-top .content-text h2 p {
    margin: 0 !important;
    max-width: 100%;
    width: 100%;
}

.content-top .content-text h2 span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 10px;
}

.content-top .content-text h2 .rounded {
    font-family: 'Calibri', serif;
    font-weight: bold;
    font-size: 32px !important;
    background-color: white;
    color: var(--blue);
    width: 50px;
    height: 50px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    margin-right: 10px;
}

.rounded span {
    font-size: 32px !important;
}

.content-top .content-text h2 .top-title {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#content[data-part="finalize"] .content-top .content-text h2 .top-title,
#content[data-part="cancel"] .content-top .content-text h2 .top-title {
    width: calc(100% - 60px);
    max-width: calc(100% - 60px);
}

.content-body {
    display: flex;
    overflow: hidden;
    flex: 1;
    padding: 10px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1), -3px -3px 3px rgba(0, 0, 0, 0.1);
}

.content-body label {
    display: block;
    color: var(--blue);
    font-weight: bold;
    font-size: 18px;
}

.content-body label.required::after {
    content: '*';
    color: var(--red);
    float: right;
}

.content-body h2 {
    font-size: 18px;
    font-weight: bold;
    color: var(--blue);
    border-bottom: 1px solid var(--blue);
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.form-control {
    border: 1px solid var(--blue) !important;
}

.input-group {
    width: 100%;
    position: relative;
}

.input-group-text {
    width: 60px;
    background-color: white;
    border: 1px solid var(--blue);
    color: var(--blue);
    font-size: 18px;
    justify-content: center;
}

.input-group-text span:before {
    color: var(--blue) !important;
}

.btn-primary {
    background-color: var(--blue);
}

.bfh-countries a {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.message {
    font-weight: bold;
}

.danger {
    color: var(--red);
}

/**
 * =======================================================================================================================
 * 													SEARCH
 * =======================================================================================================================
 */

.search, .slot-selection, .patient, .finalize {
    overflow: auto;
}

.search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.search .input-group {
    margin: 25px auto;
}

button[data-role="search"] {
    margin-top: 10px;
    float: right;
}

div[data-role="echo-instructions"] {
    display: block;
    width: 100%;
    background-color: var(--gray);
    padding: 5px;
    height: 75px;
    overflow: auto;
    border-radius: 5px;
    border: 2px solid var(--red);
    color: var(--red);
    font-weight: bold;
}

div[data-role="echo-site"] {
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--blue);
    border-radius: 5px;
    padding: 10px;
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid var(--blue);
    margin-top: 20px;
}

#information_pdf {
    position: fixed;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}

#information_pdf .background {
    background-color: #00000075;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#information_pdf .splashscreen {
    margin-top: 5%;
    margin-left: 5%;
    width: 80%;
    height: 80%;
    position: relative;
}

#information_pdf .splashscreen object {
    z-index: 2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#information_pdf .splashscreen object p {
    color: white;
    word-break: break-word;
    text-align: center;
}

#information_pdf .splashscreen object p a {
    font-weight: bold;
}

#information_pdf .splashscreen span.close-btn {
    position: absolute;
    cursor: pointer;
    font-size: 3em;
    color: red;
    z-index: 3;
    top: 0;
    right: 15px;
}


/**
 * =======================================================================================================================
 * 													SLOT SELECTION
 * =======================================================================================================================
 */

.label-physician-highlightor {
    font-size: inherit !important;
    color: inherit !important;
}

.slot-selection {
    display: flex;
    align-items: self-start;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
    height: 70%;
    padding: 0 20px;
}

.btn-slot {
    background-color: var(--blue-slot);
    border: 1px solid var(--border-slot);
    padding: 2px 20px;
}

.btn-slot.physician-slot-filtered {
    border: 1px dashed var(--border-slot);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 5px);
    background-color: var(--blue-slot);
}

.btn-slot.physician-slot-highlighted {
    background-color: var(--slot-highlighted);
}

.btn-slot.selected {
    border: 1px solid var(--slot-selected);
    background-color: var(--slot-selected);
}

.arrows {
    position: absolute;
    top: 103px;
    left: 0;
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.slot-selection .current-week {
    width: calc(100% - 100px);
    text-align: center;
}

div[data-role="slot-filter"] {
    display: flex;
    flex-direction: row;
}

div[data-role="calendar"] table th, div[data-role="calendar"] table td {
    text-align: center;
    padding: 5px;
    width: calc(100% / 7);
    max-width: calc(100% / 7);
}

div[data-role="calendar"] table td {
    border: none !important;
}

div[data-role="calendar"] table[data-role="slots-head"] {
    width: calc(100% - 18px);
    height: 50px;
    margin: 0 !important;
    border: 0 none;
}

div[data-role="calendar"] table[data-role="slots-head"] > thead {
    border: 0 none;
}

div[data-role="calendar"] table[data-role="slots-head"] em {
    font-size: 12px;
}

div[data-role="calendar"] div[data-role="slots-body"] {
    height: calc(100% - 50px);
    max-height: calc(100% - 50px);
    overflow: auto;
    border-top: 1px solid var(--blue);
}

div[data-role="calendar"] div[data-role="slots-body"] table {
    min-height: 100%;
    margin-bottom: 0 !important;
}

div[data-role="calendar"] div[data-role="slots-body"] table td {
    min-height: 100%;
    vertical-align: middle;
}

div[data-role="calendar"] div[data-role="slots-body"]:focus {
    outline: none;
}

.arrow-calendar {
    padding: 5px;
    width: 50px;
    color: var(--blue);
    font-size: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.content-calendar {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 0;
    border-bottom: 1px solid var(--blue);
}

.slot-confirmation {
    gap: 20px;
    margin-right: 20px;
    overflow: hidden;
    align-items: center;
    flex-direction: row;
    justify-content: end;
    display: inline-flex;
    flex-wrap: wrap;
    height: 30%;
}

.slot-confirmation .part {
    display: inline-flex;
    flex-direction: column;
    align-items: self-start;
    margin: 0 !important;
    visibility: hidden;
    opacity: 0;
}

.slot-confirmation .part.block-size {
    display: flex;
}

.slot-confirmation .part.block-size .title {
    width: 100%;
    text-align: left;
}

.slot-confirmation .part:nth-child(2n) {
    flex-basis: 40%;
}

.slot-confirmation .part:nth-child(2n) select {
    flex: 1;
    display: inline-block;
}

.slot-confirmation .part:nth-child(2n) label {
    display: inline-block;
    width:auto;
    top: -10px;
    position: relative;
}

.slot-confirmation .part .title {
    display: block;
    color: var(--blue);
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 22px;
    white-space: nowrap;
}

.slot-confirmation .part .form-group {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    width: 100%;
    margin-bottom: 0 !important;
}

.slot-confirmation .part.site {
    flex: 1;
}

.slot-confirmation .echo-slot-selected {
    background-color: var(--yellow);
    border-radius: 5px;
    padding: 10px;
    min-height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.slot-confirmation .echo-slot-selected p {
    margin: 0;
}

/**
 * =======================================================================================================================
 * 													PATIENT
 * =======================================================================================================================
 */

.patient {
    flex: 1;
}

[data-role="echo-slot-patient-selected"],
[data-role="echo-slot-selected"] {
    background-color: var(--yellow);
    border-radius: 5px;
    padding: 10px;
    min-height: 50px;
    color: var(--blue);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

[data-role="echo-slot-patient-selected"] .icon,
[data-role="echo-slot-selected"] .icon {
    font-size: 2em;
    margin-right: 10px;
}

.bfh-selectbox-options {
    left: auto !important;
    right: 0 !important;
}

/**
 * =======================================================================================================================
 * 													FINALIZE
 * =======================================================================================================================
 */

.finalize {
    margin-top: 10px;
}

[data-role="echo-slot-finalize-selected"] {
    background-color: var(--yellow);
    border-radius: 5px;
    padding: 10px;
    min-height: 50px;
    color: var(--blue);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

[data-role="echo-slot-finalize-selected"] .icon {
    font-size: 2em;
    margin-right: 10px;
}

.finalize [data-role="verify-code"] {
    border-color: var(--green-dark) !important;
    background-color: white;
}

.finalize [data-role="alert"] {
    color: var(--green-dark);
    padding: 10px;
    font-size: 16px;
    font-style: italic;
}

div[data-role="remember"] {
    margin-top: 18px;
}

div[data-role="remember"] td {
    padding: 4px !important;
}

span[data-role="edit-phone"], span[data-role="edit-mail"] {
    margin-right: 5px;
}

div[data-role="show-edit-phone"] .edit-actions, div[data-role="show-edit-mail"] .edit-actions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    align-items: center;
    justify-content: flex-end;
}

div[data-role="show-edit-phone"] .edit-actions .btn-danger, div[data-role="show-edit-mail"] .edit-actions .btn-danger {
    margin-right: 5px;
}

div[data-role="show-edit-phone"]:hover .edit-actions, div[data-role="show-edit-mail"]:hover .edit-actions {
    width: calc(100% - 60px);
    display: inline-flex;
    background-color: white;
    z-index: 10;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 2px;
}

.finalize button[data-role="confirm"], .finalize button[data-role="resend"] {
    font-size: 14px;
    margin: 0 5px;
}

.finalize table {
    margin: 0 !important;
}

.finalize table td {
    border: 0 !important;
}

.finalize [data-role="instructions"] {
    background-color: var(--gray);
    padding: 5px;
    height: 75px;
    overflow: auto;
    border-radius: 5px;
    border: 2px solid var(--red);
    color: var(--red);
    font-weight: bold;
}

.finalize button[data-role="cancel"] {
    margin-top: 10px;
}

/**
 * =======================================================================================================================
 * 													CANCEL
 * =======================================================================================================================
 */

.cancel {
    padding-top: 30px;
}

.cancel .alert {
    display: none;
}

.cancel table td {
    padding: 15px 10px !important;
}

.cancel div[data-role="echo-site"] {
    margin-top: 0;
}