* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {
    --purple-500: #803efa;
    --purple-800: #4C19AA;
    --gray-100: #F1F1F1;
    --gray-300: #cccccc;
    --gray-500: #ADADAD;
    --white: #fff;
    --dark: #3A3A3A;
    --green-600: #197a33;
    font-size: 14px;
    line-height: 1;
}

body {
    color: var(--dark);
}

a, a:focus, a:hover, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}

p {
    margin: 0;
    color: var(--dark);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
}

.text-purple-1 {
    color: var(--purple-500);
}

.btn-almee {
    border-radius: 60rem;
    padding: 0.30rem 1.1rem;
    font-weight: 500;
    border: none;
    transition: 0.3s;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
}

.btn-almee-white {
    background-color: var(--white);
    color: var(--purple-500) !important;
}

    .btn-almee-white:hover, .btn-almee-white:active {
        background-color: var(--gray-300);
        color: var(--purple-500) !important;
    }

.btn-almee-purple {
    background-color: var(--purple-500);
    color: var(--white) !important;
}

    .btn-almee-purple:hover, .btn-almee-purple:active {
        background-color: var(--purple-800);
        color: var(--white) !important;
    }

.btn-almee-light-purple {
    background-color: #9f6cfb;
    color: white !important;
}

.btn-almee-xl {
    font-size: 0.9rem;
    padding: 0.6rem 1.1rem;
}

@media (max-width: 1440px) {
    html {
        font-size: 94%;
    }
}

@media (max-width: 1200px) {
    html {
        font-size: 90%;
    }
}

@media (max-width: 1080px) {
    html {
        font-size: 87%;
    }
}

@media (max-width: 720px) {
    html {
        font-size: 84%;
    }
}

@media (max-width: 1199px) {
    .container {
        width: 100%;
        max-width: none;
    }
}

/*---------loading---------*/
.spinner {
    width: 40px;
    height: 40px;
    display: block;
    position: fixed;
    top: calc( 50% - ( 40px / 2) );
    right: calc( 50% - ( 40px / 2) );
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--purple-500);
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%, 100% {
        -webkit-transform: scale(0.0)
    }

    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/*----------Menu----------*/
.navbar-brand img {
    width: 10rem;
    margin: 0.3rem 0;
}

.navbar .nav-item {
    font-size: 1.2rem;
}

/*-------- RichTextEdit --------*/

.custom-richtext .ql-toolbar {
    background: #cecece;
}

/*-------- Custom Scroll Bar --------*/
.custom-scroll {
    overflow-y: auto;
}

    .custom-scroll::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
    }


    .custom-scroll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .custom-scroll::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }

    .custom-scroll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #7f3cfa;
    }

/*-------- Text Truncate --------*/
.text-multline-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------- Timeline ------------ */

.timeline .tm-items > li {
    min-height: auto;
}

    .timeline .tm-items > li .tm-datetime .tm-datetime-time {
        color: #3A3A3A;
        margin-top: 1rem !important;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .timeline .tm-items > li .tm-icon {
        background-color: #7f3cfa;
        border: 3px solid #7f3cfa;
        color: #fff;
    }

.timeline .tm-body:after {
    background: linear-gradient(to bottom,rgba(80,80,80,0) 0%,#7f3cfa 8%,#7f3cfa 92%,rgba(80,80,80,0) 100%);
}

.timeline .tm-items > li .tm-box {
    border: 1px solid #7f3cfa;
    box-shadow: 3px 3px 3px rgb(0 0 0 / 20%);
    min-height: auto;
    background: #f6f6f6;
}

    .timeline .tm-items > li .tm-box:after {
        border-right-color: #7f3cfa;
    }

/* --------- FontAwesome Icon List ------------ */
.fa-ul {
    list-style-type: none;
    margin-left: 1.3em;
    margin-bottom: 0;
    padding-left: 0;
}

    .fa-ul li {
        margin-bottom: .5rem;
    }

        .fa-ul li:last-child {
            margin-bottom: 0;
        }

/* --------- Validation ------------ */
.validation-message {
    color: #dc3545 !important;
}

/* --------- Profile Card ------------ */
.thumb-info .thumb-info-inner {
    white-space: normal;
}

/* --------- Pagination ------------ */
.page-item.active .page-link {
    background-color: #803efa;
    border-color: #803efa;
}

/* --------- Dashboard Cards ------------ */

.summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

@media (min-width: 1200px) {
    .card-body {
        padding: 0.8rem;
    }
}

.meus-jobs-card {
    border-left: 3px solid var(--purple-500) !important;
}

    .meus-jobs-card .summary-icon {
        background-color: var(--purple-500) !important;
    }

.jobs-concluidos-card {
    border-left: 3px solid #42a842 !important;
}

    .jobs-concluidos-card .summary-icon {
        background-color: #42a842 !important;
    }

.jobs-emprogresso-card {
    border-left: 3px solid #F27400 !important;
}

    .jobs-emprogresso-card .summary-icon {
        background-color: #F27400 !important;
    }

.jobs-disponiveis-card {
    border-left: 3px solid #2196f3 !important;
}

    .jobs-disponiveis-card .summary-icon {
        background-color: #2196f3 !important;
    }


.total-jobs-card {
    border-left: 3px solid var(--purple-500) !important;
}

    .total-jobs-card .summary-icon {
        background-color: var(--purple-500) !important;
    }

.jobs-abertos-card {
    border-left: 3px solid #42a842 !important;
}

    .jobs-abertos-card .summary-icon {
        background-color: #42a842 !important;
    }

.total-freelas-card {
    border-left: 3px solid #2196f3 !important;
}

    .total-freelas-card .summary-icon {
        background-color: #2196f3 !important;
    }

/* --------- Bootstrap Aux ------------ */

.table tr:first-child td, .table tr:first-child th {
    border-top: none;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }

    .w-sm-auto {
        width: auto !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }

    .w-md-auto {
        width: auto !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }

    .w-lg-auto {
        width: auto !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }

    .w-xl-auto {
        width: auto !important;
    }
}

/* --------- Categorias Checkbox ------------ */
.categoria-checkbox {
    text-align: center;
}

    .categoria-checkbox input[type=checkbox] {
        opacity: 0;
        position: absolute;
    }

        .categoria-checkbox input[type=checkbox] ~ label {
            display: block;
            cursor: pointer;
            margin: 0;
            padding: 1rem;
            border-radius: 5px;
            border: 1px var(--purple-500) solid;
            height: 100%;
            transition: all 0.2s;
        }

            .categoria-checkbox input[type=checkbox] ~ label img {
                display: inline-block;
                max-width: 70px;
                margin-bottom: 0.75rem !important;
            }

            .categoria-checkbox input[type=checkbox] ~ label span {
                display: block;
                color: var(--purple-500);
                font-size: 1rem;
                line-height: 1.2;
            }

        .categoria-checkbox input[type=checkbox]:checked ~ label {
            background: var(--purple-500);
            transition: all 0.2s;
        }

            .categoria-checkbox input[type=checkbox]:checked ~ label span {
                color: #fff;
            }

.icon-styles {
    color: var(--purple-500) !important;
}

.icon-styles:hover, .icon-styles:active {
    color: var(--purple-800) !important;
}