/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
input[type="text"]:read-only {
    background-color: white;
    cursor: not-allowed;
}
textarea:read-only {
    background: white;
    cursor: not-allowed;
}

hr {
    border-color: #8b70f0;
    border-width: 1px;
}

@media only screen and (max-width: 500px) {
    img.img-fluid {
        width: 20%;
    }
}

/*span {
    font-size: 14px;
    font-weight: bolder;
}*/

.brand-text-gradient {
    font-weight: bold;
    background: linear-gradient(
        to left,
        #ff0000 20%,
        #ff0 40%,
        #ff6600 60%,
        rgb(180, 178, 178) 80%,
        #ff0000 100%
    );
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    /* text-fill-color: transparent; */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shine 3.5s linear infinite;
}
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.file + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    background-color: aqua;
    /* 10px 20px */
}

.spasing {
    margin-top: -30px;
    margin-bottom: -20px;
}

#data-role {
    width: 103%;
}

.bg-gray {
    background-color: #f3f2f7;
}

#loading {
    display: flex;
    position: fixed;
    z-index: 1060;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.625em;
    overflow-x: hidden;
    /* opacity: 0.7; */
    background: #3a3a3a center no-repeat;
}
#loading .red,
#loading .orange,
#loading .yellow {
    position: absolute;
    border-radius: 100%;
}
#loading .red {
    top: 0;
    left: 0;
    border-left: 10px solid red;
    width: 96px;
    height: 96px;
    animation: spin 1.12s linear infinite;
    margin-top: 20%;
    margin-left: 45%;
}
#loading .orange {
    top: 8px;
    left: 8px;
    border-left: 10px solid orange;
    width: 80px;
    height: 80px;
    transform: rotate(-30deg);
    animation: spin2 0.96s linear infinite;
    margin-top: 20%;
    margin-left: 45%;
}
#loading .yellow {
    top: 16px;
    left: 16px;
    border-left: 10px solid yellow;
    width: 64px;
    height: 64px;
    transform: rotate(30deg);
    animation: spin 0.8s linear infinite;
    margin-top: 20%;
    margin-left: 45%;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes spin2 {
    100% {
        transform: rotate(-360deg);
    }
}

.box-scrolling {
    overflow-y: auto;
    height: 334px;
    padding-right: 15px;
}
.blink-effect {
    animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}