/*================================================================================
	Item Name: Stack - Responsive Admin Theme
	Version: 1.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.  */

table::after {
    border-collapse: separate !important;
}

label {
    margin: 0px !important;
    padding: 0px 5px !important;
}

.lbl-page {
    border-radius: 8px;
    background-color: #0070E0;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    cursor: pointer !important;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
    cursor: pointer !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #404E67;
    border-radius: 10px;
    cursor: pointer !important;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #00A5A8;
        cursor: pointer !important;
    }


/* Régua vertical da timeline */
.timeline-mercattum {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

    /* Régua vertical da timeline */
    .timeline-mercattum::after {
        content: '';
        position: absolute;
        width: 6px;
        background-color: white;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }

/* Conteúdo ao redor do container */
.container-mercattum {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

    /* Os círculos da timeline */
    .container-mercattum::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        right: -17px;
        background-color: white;
        border: 4px solid #FF9F55;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
    }

/* Alinha o container à esquerda */
.timeline-left {
    left: 0;
}

/* Alinha o container à direita */
.timeline-right {
    left: 50%;
}

/* Adiciona as setas para o container da esquerda (apontando para a direita) */
.timeline-left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/* Adiciona as setas para o container da direita (apontando para a esquerda) */
.timeline-right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

/* Ajusta o circulo indicativo para os containers no lado direito */
.timeline-right::after {
    left: -16px;
}

/* Conteúdo */
.content-mercattum {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

/* Media queries - Timeline responsiva em telas com menos de 600px de largura */
@media screen and (max-width: 600px) {
    /* Alinha a timeline à esquerda */
    .timeline-mercattum::after {
        left: 31px;
    }

    /* Containers com tamanho máximo*/
    .container-mercattum {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

        /* Todas as setas apontando para esquerda */
        .container-mercattum::before {
            left: 60px;
            border: medium solid white;
            border-width: 10px 10px 10px 0;
            border-color: transparent white transparent transparent;
        }

    /* Todos os círculos alinhados à régua */
    .timeline-left::after, .timeline-right::after {
        left: 15px;
    }

    /* Todos containers à direita */
    .right {
        left: 0%;
    }
}