/*
    Custom styles

    Author : Xanders Samoth | https://www.linkedin.com/in/xanders-samoth-b2770737/
*/

/* typography */
pre {
    font-family: inherit !important;
    font-size: inherit !important;
    white-space: pre-wrap;
    /* css-3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

a {
    color: var(--bs-primary);
}

textarea {
    resize: none;
}

/********** Custom colors **********/
/* background */
.dktv-bg-pink {
    background-color: #e3106f !important;
}

.dktv-bg-pink-transparent {
    background-color: rgba(227, 16, 111, 0.5) !important;
}

.dktv-bg-blue {
    background-color: #0f9cd8 !important;
}

.dktv-bg-blue-transparent {
    background-color: rgba(15, 156, 116, 0.5) !important;
}

a.dktv-bg-blue-transparent:hover {
    transition: .3s;
    background-color: rgba(15, 156, 116, 0.7) !important;
}

.dktv-bg-yellow {
    background-color: #f7b233 !important;
}

.dktv-bg-yellow-transparent {
    background-color: rgba(247, 178, 51, 0.5) !important;
}

.dktv-bg-green {
    background-color: #96bd1f !important;
}

.dktv-bg-green-transparent {
    background-color: rgba(150, 189, 31, 0.5) !important;
}

.dktv-bg-gray {
    background-color: #878787 !important;
}

.dktv-bg-gray-transparent {
    background-color: rgba(135, 135, 135, 0.5) !important;
}

/* button */
.dktv-btn-pink {
    background-color: #e3106f !important;
    color: #fff !important;
    border-color: #da0e6a !important;
}

.dktv-btn-pink:hover {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

.dktv-btn-blue {
    background-color: #0f9cd8 !important;
    color: #fff !important;
    border-color: #0d94ce !important;
}

.dktv-btn-blue:hover {
    background-color: #878787 !important;
    border-color: #878787 !important;
}

.dktv-btn-yellow {
    background-color: #f7b233 !important;
    color: #000 !important;
    border-color: #f7b233 !important;
}

.dktv-btn-yellow:hover {
    background-color: #878787 !important;
    color: #fff !important;
    border-color: #878787 !important;
}

.dktv-btn-green {
    background-color: #96bd1f !important;
    color: #000 !important;
    border-color: #96bd1f !important;
}

.dktv-btn-green:hover {
    background-color: #878787 !important;
    color: #fff !important;
    border-color: #878787 !important;
}

.dktv-btn-gray {
    background-color: #cfcfcf !important;
    color: #000 !important;
    border-color: #cfcfcf !important;
}

.dktv-btn-gray:hover {
    background-color: #878787 !important;
    border-color: #878787 !important;
}

/* text */
.dktv-text-pink {
    color: #e3106f !important;
}
a:hover.dktv-text-pink {
    color: #d30f67 !important;
}

.dktv-text-blue {
    color: #0f9cd8 !important;
}

a:hover.dktv-text-blue {
    color: #108bc0 !important;
}

.dktv-text-yellow {
    color: #f7b233 !important;
}

a:hover.dktv-text-yellow {
    color: #dd9819 !important;
}

.dktv-text-green {
    color: #96bd1f !important;
}

a:hover.dktv-text-green {
    color: #7fa314 !important;
}

.dktv-text-gray {
    color: #757575 !important;
}

a:hover.dktv-text-gray {
    color: #636363 !important;
}

/* paragraph */
.dktv-line-height-1 {
    line-height: 1;
}

.dktv-line-height-1_4 {
    line-height: 1.4;
}

.dktv-line-height-1_45 {
    line-height: 1.45;
}

.dktv-line-height-1_5 {
    line-height: 1.5;
}

/********** Custom bootstrap components **********/
/* button */
.btn {
    font-size: 11pt;
}

/* stretched link */
.card-body+.stretched-link::after {
    background-color: rgba(70, 100, 150, 0.2) !important;
    opacity: 0;
    transition: .3s;
}

.card-body+.stretched-link.changed::after {
    opacity: 1;
}


/* A modal over another modal */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}

.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

/********** Miscellaneous **********/
/* From streamo template */
.logo a img {
    width: 200px;
}

@media screen and (max-width: 375px) {
    .logo a img {
        width: 140px;
    }

    .login-button {
        min-width: 75px;
    }
}

/* Ajax loading bar */
.loader {
    margin: 0 auto;
    border-radius: 10px;
    border: 4px solid transparent;
    position: relative;
    padding: 1px;
}

.loader:before {
    content: '';
    border: 1px solid #0d6efd;
    border-radius: 10px;
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
}

.loader .loaderBar {
    position: absolute;
    border-radius: 10px;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    background: #0d6efd;
    width: 0;
    animation: borealisBar 2s linear infinite;
}

@keyframes borealisBar {
    0% {
        left: 0%;
        right: 100%;
        width: 0%;
    }

    10% {
        left: 0%;
        right: 75%;
        width: 25%;
    }

    90% {
        right: 0%;
        left: 75%;
        width: 25%;
    }

    100% {
        left: 100%;
        right: 0%;
        width: 0%;
    }
}