@import "https://unpkg.com/open-props";

dialog {
    position: fixed;
    display: block;
    inset: 0;
    z-index: var(--layer-important);
    max-inline-size: min(90vw, var(--size-content-3));
    max-block-size: min(80vh, 100%);
    overflow: initial;
    transition: opacity .5s;
    animation: var(--animation-scale-down) forwards;
    animation-timing-function: var(--ease-squish-3);
    border-radius: 0.5rem;
    padding: 0;
    border: solid 1px #ccc;
    box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
    width: 100%;
}
dialog:focus-visible {
    outline: none;
}
dialog[open] {
    animation: var(--animation-slide-in-up) forwards;
}

dialog:not([open]) {
    pointer-events: none;
    opacity: 0;
}

dialog::backdrop {
    backdrop-filter: blur(0.25rem);
}

dialog article {
    padding: 10px 2rem 20px 2rem;
    max-height: calc(100vh - 20em - 6px);
    overflow-x: hidden;
    overflow-y: scroll;
}

dialog header {
    margin: 0;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

dialog footer {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px;
}
dialog header button.close-dialog,
dialog footer button.close-dialog {
    -webkit-appearance: none;
    border: 0;
}
dialog footer button.close-dialog {
    width: 100%;
    padding: 1rem 2rem;
    letter-spacing: 8px;
    font-weight: 600;
}
dialog header button.close-dialog {
    background-color: transparent;
    color: #ffffff;
}

dialog header h3 {
    margin: 0;
}

/* Colors */
dialog {
    background-color: #d4d5d6;
}
dialog header,
dialog footer,
dialog header button.close-dialog,
dialog footer button.close-dialog {
    background-color: #010101;
    color: #ffffff;
}

dialog article h5.column_description.current {
    background-color: #919191;
    background-image: -moz-linear-gradient(right, #fff, #919191);
    background-image: -webkit-gradient(linear, 100% 0, 0 0, from(#fff), to(#919191));
    background-image: -webkit-linear-gradient(right, #fff, #919191);
    background-image: -o-linear-gradient(right, #fff, #919191);
    background-image: linear-gradient(to left, #fff, #919191);
}
dialog article h5.column_description.current:hover {
    background-color: #919191;
    background-image: -moz-linear-gradient(top, #fff, #919191);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#919191));
    background-image: -webkit-linear-gradient(top, #fff, #919191);
    background-image: -o-linear-gradient(top, #fff, #919191);
    background-image: linear-gradient(to bottom, #fff, #919191);
}
dialog article h5.column_description.current+.collapse {
    background-color: #919191;
    background-image: -moz-linear-gradient(right, #fff, #919191);
    background-image: -webkit-gradient(linear, 100% 0, 0 0, from(#fff), to(#919191));
    background-image: -webkit-linear-gradient(right, #fff, #919191);
    background-image: -o-linear-gradient(right, #fff, #919191);
    background-image: linear-gradient(to left, #fff, #919191);
}

dialog footer button.btn-default {
    background-color: #d0d0d0;
    border: 1px solid #9d9d9c;
    border-radius: 12px;
    padding: 4px 10px;
    color: #010101;
    margin-left: 10px;
    width: auto;
    letter-spacing: normal;
    font-weight: 500;
}
dialog footer button.btn-default:not([disabled]):hover {
    background-color: #9d9d9c;
}
dialog footer button.btn-default[disabled] {
    color: #9d9d9c;
}

dialog > form {
    border-radius: 14px;
}
dialog header {
    border-radius: 12px 12px 0 0;
}
dialog footer {
    border-radius: 0 0 12px 12px;
}

#helpContainer header i.fa-solid {
    font-size: 14px;
}
dialog#helpContainer .section_description a.btn.btn-info.btn-new-user {
    padding: 8px 12px;
    margin: 0 6px;
}

/** Article forms */
article .form-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
article .form-group input,
article .form-group select {
    width: 100%;
    padding: 8px 6px;
    border: 1px solid #010101;
    border-radius: 11px;
    margin: 6px 0;
}
article .form-group .phoneSharerControls .iti input[type=tel] {
    margin: 6px 0 !important;
}
article .form-group .phoneSharerControls button.verify_phone {
    width: 100%;
    border: 1px solid #010101;
    border-radius: 12px;
    padding: 6px 0;
    background-color: #f6f6f6;
}
article .form-group .phoneSharerControls button.verify_phone:hover {
    background-color: #d0d0d0;
}
article .form-group .phoneSharerControls .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
}
article .form-group .phoneSharerControls .iti__selected-flag {
    border: 1px solid #d0d0d0;
    border-width: 0 1px 0 0;
    max-height: 31px;
    margin-top: 6px;
}
article .alert {
    margin-top: 6px;
    width: calc(100% - 3rem);
    background-color: #f6f6f6;
}
article .alert.alert-error {
    background-color: #9d9d9c;
}
.shareOptions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
.form-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.form-column > * {
    margin-bottom: 10px;
}
.form-column .option {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.form-column .option > input {
    margin-right: 8px;
}
dialog#searchUser,
dialog#searchStudy {
    margin-top: 100px;
    max-inline-size: revert;
}
article p.no_margins {
    margin: 0;
}
article h4.centered {
    text-align: center;
    margin: 0;
    padding: 8px 0;
    font-size: 16px;
}
article .form-group.special_form input[type=tel] {
    width: 100%;
}
article .form-group.special_form input[type=button] {
    width: 100%;
    max-width: 110px;
}
dialog#sendSMSDialog article {
    padding: 20px 2rem 40px 2rem;
}
dialog#sendSMSDialog article fieldset {
    margin: 20px 0 10px 0;
}
dialog#sendWhatsappDialog article {
    padding: 10px 2rem 60px 2rem;
}
dialog#sendWhatsappDialog article .special_form {
    padding-bottom: 20px;
}
fieldset .well {
    padding: 6px 2px;
    font-style: italic;
}
.user-login-label {
    font-size: 18px;
    margin: 0;
    text-align: center;
}
article .special_form.form-group {
    justify-content: center;
}
.collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -moz-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease;
}
.collapse.in {
    height: auto;
}
#helpContainer i.fa-solid {
    font-size: 14px;
}
#helpContainer h6.button_title {
    padding: 12px 4px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: flex-end;
}
#helpContainer h6.button_title i.fa-solid {
    position: relative;
    bottom: 0;
    left: 0;
    margin-right: 8px;
}
#helpContainer h6.button_title > div.htmlViewerBtn {
    position: relative;
    top: 0;
    left: 0;
    height: auto;
}
#helpContainer h6.button_title [class^="imgcon-"] {
    background-image: url(../../../../img/osirix_icon_black.svg);
    position: relative;
    top: 0;
    left: 4px;
    margin-right: 10px;
}

/** Media query para únicamente móvil */
@media only screen and (max-width: 768px) {
    article .form-group label {
        width: 100%;
    }
    article .form-group .phoneSharerControls,
    article .form-group .phoneSharerControls .iti {
        width: 100%;
    }
    article .form-group .phoneSharerControls .iti__country-name {
        min-width: 150px;
    }
    article .form-group .phoneSharerControls .iti__country {
        padding: 10px 14px;
    }
    article .form-group .phoneSharerControls .iti__country-list {
        left: 10px;
        top: 38px;
        border-radius: 0 0 12px 12px;
    }
    dialog#searchUser article,
    dialog#searchStudy article {
        padding: 10px 1rem 20px 1rem;
    }
    article p.center_paragraph {
        text-align: center;
    }
    article .form-group.special_form input[type=button] {
        max-width: none;
    }
}

/* Media query para tablets */
@media only screen and (min-width: 768px) {
    /* Estilos específicos para tablets */
    article .form-group input:not(.verify),
    article .form-group select {
        width: 70%;
        max-width: 280px;
    }
    article .form-group .phoneSharerControls {
        width: 71%;
        max-width: 294px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    article .form-group .phoneSharerControls input[type=tel] {
        width: 98%;
    }
    article .form-group .phoneSharerControls button.verify_phone {
        width: 100px;
        padding: 8px 0;
    }
}

/* Media query para desktops pequeños */
@media only screen and (min-width: 992px) {
    /* Estilos específicos para desktops pequeños */
    dialog#searchUser {
        max-inline-size: 80%;
    }
    dialog#searchStudy {
        max-inline-size: 90%;
    }
}

/* Media query para desktops grandes */
@media only screen and (min-width: 1200px) {
    /* Estilos específicos para desktops grandes */
    dialog#searchUser {
        max-inline-size: 70%;
    }
    dialog#searchStudy {
        max-inline-size: 80%;
    }
}