﻿
/* /////////////////////////////////////////////////////////////////////////// */
/* ------------------| REGISTRO VÍDOES */

#progressbarRegistro {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
}

    #progressbarRegistro .active {
        color: #1b6ec2
    }

    #progressbarRegistro .checked {
        color: #7c9dbf
    }

    #progressbarRegistro li {
        text-align: center;
        list-style-type: none;
        font-size: 15px;
        width: 25%;
        float: left;
        position: relative;
        font-weight: 400
    }

    #progressbarRegistro #registrar div {
        font-family: FontAwesome;
        /*content: "<i class='far fa-file-video'></i>"*/
    }

    #progressbarRegistro #thumbs div {
        font-family: FontAwesome;
        content: "\f007"
    }

    #progressbarRegistro #payment div {
        font-family: FontAwesome;
        content: "\f030"
    }

    #progressbarRegistro #confirm div {
        font-family: FontAwesome;
        content: "\f00c"
    }

    #progressbarRegistro li div {
        width: 50px;
        height: 50px;
        line-height: 45px;
        display: block;
        font-size: 20px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px
    }

    #progressbarRegistro li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: lightgray;
        position: absolute;
        left: 0;
        top: 25px;
        z-index: -1
    }

    #progressbarRegistro li.active div,
    #progressbarRegistro li.active:after {
        background: #1b6ec2
    }

    #progressbarRegistro li.checked div,
    #progressbarRegistro li.checked:after {
        background: #7c9dbf
    }


/* /////////////////////////////////////////////////////////////////////////// */



/* /////////////////////////////////////////////////////////////////////////// */
/* ------------------| CUSTOM - SWITH */
/* pequeno- sm */

.custom-control-label {
    cursor: pointer;
}

.custom-switch.custom-switch-sm .custom-control-label {
    padding-left: 1rem;
    padding-bottom: 1rem;
}

    .custom-switch.custom-switch-sm .custom-control-label::before {
        height: 1rem;
        width: calc(1rem + 0.75rem);
        border-radius: 2rem;
    }

    .custom-switch.custom-switch-sm .custom-control-label::after {
        width: calc(1rem - 4px);
        height: calc(1rem - 4px);
        border-radius: calc(1rem - (1rem / 2));
    }

.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1rem - 0.25rem));
}

/* médio- md */
.custom-switch.custom-switch-md .custom-control-label {
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

    .custom-switch.custom-switch-md .custom-control-label::before {
        height: 1.5rem;
        width: calc(2rem + 0.75rem);
        border-radius: 3rem;
    }

    .custom-switch.custom-switch-md .custom-control-label::after {
        width: calc(1.5rem - 4px);
        height: calc(1.5rem - 4px);
        border-radius: calc(2rem - (1.5rem / 2));
    }

.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.5rem - 0.25rem));
}

/* grande- lg */
.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 3rem;
    padding-bottom: 2rem;
}

    .custom-switch.custom-switch-lg .custom-control-label::before {
        height: 2rem;
        width: calc(3rem + 0.75rem);
        border-radius: 4rem;
    }

    .custom-switch.custom-switch-lg .custom-control-label::after {
        width: calc(2rem - 4px);
        height: calc(2rem - 4px);
        border-radius: calc(3rem - (2rem / 2));
    }

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2rem - 0.25rem));
}

/* gigante- xl */
.custom-switch.custom-switch-xl .custom-control-label {
    padding-left: 4rem;
    padding-bottom: 2.5rem;
}

    .custom-switch.custom-switch-xl .custom-control-label::before {
        height: 2.5rem;
        width: calc(4rem + 0.75rem);
        border-radius: 5rem;
    }

    .custom-switch.custom-switch-xl .custom-control-label::after {
        width: calc(2.5rem - 4px);
        height: calc(2.5rem - 4px);
        border-radius: calc(4rem - (2.5rem / 2));
    }

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2.5rem - 0.25rem));
}


/* CUSTOM-SWITH COLORS*/
.custom-control.switch-primary .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.custom-control.switch-secondary .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.custom-control.switch-success .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.custom-control.switch-danger .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.custom-control.switch-warning .custom-control-input:checked ~ .custom-control-label::before {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.custom-control.switch-info .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.custom-control.switch-light .custom-control-input:checked ~ .custom-control-label::before {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.custom-control.switch-dark .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.custom-control.switch-light .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #212529;
}

/* CUSTOM-SWITH disabled COLORS*/
.custom-control.switch-primary .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #007bff80;
}

.custom-control.switch-secondary .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #e2e3e59e;
}

.custom-control.switch-success .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #d4edda96;
}

.custom-control.switch-danger .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #dc35457d;
}

.custom-control.switch-warning .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #fff3cd8f;
}

.custom-control.switch-info .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #d1ecf1a8;
}

.custom-control.switch-light .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #f8f9faa3;
}

.custom-control.switch-dark .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: #d6d8d996;
}
/* /////////////////////////////////////////////////////////////////////////// */

