.modal-backdrop.show, .modal-backdrop.in {
    opacity: 0.5 !important;
}
.modal.fade.show, .modal.fade.in {
    opacity: 1 !important;
}
.gclModal {
    z-index: 9999;
    &.modal.show, &.modal.in {
        .modal-dialog {
            transform: translate(-50%, -50%) !important;
            max-width: 800*@u;
            width: auto;
            border: none;
            transition: none;
            box-shadow: none;
            left: 50%;
            top: 50%;
            margin: 0;
            @media (min-width: 768px) {
                width: 600*@u;
            }
            @media (min-width: 992px) {
                width: auto;
            }
        }  
        &.warning-banner {
            .modal-dialog {
                max-width: 960*@u;
            }
        }
        @media (max-width: 767px) {
            padding: 15*@u;
        }
    }
    .modal-content {
        box-shadow: none;
        border: none;
        border-radius: 0;
    }
    .modal-header {
        padding: 0;
        border: none;
        min-height: auto;
        background: @navy;
        border-radius: 0;
        align-items: center;
        .close {
            margin: 0;           
            font-size: 20*@u;           
            color: @white;           
            opacity: 1;
            margin-right: 24*@u;
            padding: 5*@u;
            border: none;
            background: none;
            border-bottom: 2px solid transparent;
            &:hover, &:focus {
                opacity: 1;
                border-bottom-color: @white;
            }
            @media (min-width: 992px) {
                font-size: 32*@u;
            }
        }
    }
    .modal-footer {
        margin: 0;
        padding: 20*@u 30*@u 30*@u;
        border: none;
        text-align: center;
        .btn {
            .font(@source-sans-pro, 16*@u, @white, @font-weight-semi-bold, inherit, 0.64px);
            min-width: 120*@u;
            padding: 9*@u 20*@u;
            text-shadow: none;           
            border-radius: 5*@u;           
        }
        .btn-primary {           
            background: @dark-orange;
            border-color: @dark-orange;
            &:hover, &:focus {               
                color: @white;
                background-color: @orange;
                border-color: @orange;
            }
        }
        .btn-secondary {           
            background: @white;
            color: @navy;
            border-color: @navy;
            margin-right: 20*@u;
            &:hover, &:focus {
                background: @navy;
                color: @white;
            }
        }
        @media (max-width: 767px) {
            flex-direction: column-reverse;
            .btn, .btn+.btn {               
                width: 100%;
                margin: 0 0 15*@u 0;
            }
        }
    }
    .modal-body {
        font-size: 16*@u;
        padding: 16*@u 30*@u;
        h2 {
            margin-bottom: .5rem;
            font-weight: @font-weight-normal;
            line-height: 1.2;
        }
        textarea {
            resize: none;
            min-height: 120*@u;
        }
    }
}
.gclModal .modal-header{
    margin: 0;
    border-bottom: 0;
}