@import "./variables.css";

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.btn {
    color: var(--soft-white) !important;
    border-color: transparent !important;
}

.btn2 {
    padding: 7px;
    color: var(--soft-white) !important;
    border: none;
    box-shadow: none;
    border-radius: 4px;
}

    .btn:hover, .btn2:hover {
        font-weight: bold !important;
        text-decoration: none;
    }

.btn.choose-file {
    color: var(--ink) !important;
}

    .btn.choose-file:hover {
        font-weight: normal !important;
    }

.btn.btn-Marine, .btn2.btn-Marine {
    background-color: var(--marine);
}

.btn-Marine:active, .btn-Marine:focus, .btn-Marine:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(0,56,97,.5);
}

.btn.btn-Seastone, .btn2.btn-Seastone {
    background-color: var(--seastone);
}

.btn-Seastone:active, .btn-Seastone:focus, .btn-Seastone:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(5,94,117,.5);
}

.btn.btn-Ink, .btn2.btn-Ink {
    background-color: var(--ink);
}

.btn-Ink:active, .btn-Ink:focus, .btn-Ink:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(0,31,64,.5);
}

.btn.btn-Citrine, .btn2.btn-Citrine {
    color: var(--ink) !important;
    background-color: var(--citrine) !important;
}

.btn-Citrine:active, .btn-Citrine:focus, .btn-Citrine:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(214,232,101,.5);
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--soft-white);
    background: var(--marine);
    border: 0;
    border-radius: .375rem;
    opacity: .5;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
}

    .btn-close:hover {
        color: var(--soft-white);
        text-decoration: none;
        opacity: .75;
    }