/**************** Navigation link styling *************/
button.open-translation-modal {
    color: var(--gray-500) !important;
    display: inline-flex;       
    font-family: ff-real-headline-pro,sans-serif;
    font-weight: 400;
}

button:focus.open-translation-modal, button:hover.open-translation-modal {
    color: var(--gray-600) !important;    
}

button.open-translation-modal:hover {
    text-decoration: unset;
}

button.open-translation-modal svg {
    margin: auto;
    color: #D3E2F0; 
    font-size: 28px;
}

button:focus.open-translation-modal svg, a:hover.open-translation-modal svg {
    color: #8BA7B3; 
}

button.open-translation-modal span {
    font-size: 12px;
    line-height: 1.33;
    letter-spacing: 0.015em;
    align-items: center;
}

button.open-translation-modal svg {
    width: 20px;
    height: 20px;
    /* lexicon-icon adds margin-top: -3px for some reason */
    margin-top: 0;
}



/*************** Modal styling ***********************/
.translation-modal .modal-dialog {
    position: relative !important;
}

.translation-widget select.form-control {
    margin: 8px;
}

.translation-widget textarea.form-control {
    height: 250px;
    margin: 8px;
}

.translation-widget .translation-widget-help-link {
    margin: 8px;
}

@media (max-width: 767.80px) {
    .translation-modal .modal-body {
        padding-bottom: 16px;
        padding-top: 16px;
    }
    .translation-modal .modal-header {
        height: 3.5rem;
    }
    .translation-widget textarea.form-control {
        height: 150px;
    }
}

@media (max-height: 725px) {
    .translation-modal .modal-body {
        max-height: 85vh;
    }
}