/********** Template CSS **********/


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

    #spinner.show {
        transition: opacity .5s ease-out, visibility 0s linear 0s;
        visibility: visible;
        opacity: 1;
    }


/*** Button ***/
.btn {
    transition: .5s;
}

    .btn.btn-primary,
    .btn.btn-outline-primary:hover,
    .btn.btn-secondary,
    .btn.btn-outline-secondary:hover {
        color: #FFFFFF;
    }

        .btn.btn-primary:hover {
            background: var(--secondary);
            border-color: var(--secondary);
        }

        .btn.btn-secondary:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}