﻿body {
    /*background-color: #00acee !important;*/
    background-color: #F2F2F2 !important;
}
.bg-black {
    background-color: #000000 !important;
}
.bg-b4c-red {
    background-color: #E40613 !important;
}
.bg-gi-blue {
    background-color: #005AA1 !important;
}
.bg-gi-blue-dark {
    background-color: #01356E !important;
}
.bg-gi-green {
    background-color: #489C9C !important;
}
.bg-gi-purple {
    background-color: #C7B3D6 !important;
}

.bg-grupoeuro {
    background-color: #005687 !important;
}

.bg-grupoeuro-blue-295 {
    background-color: #002855 !important;
}

.bg-grupoeuro-blue-281 {
    background-color: #00205B !important;
}

.bg-grupoeuro-blue-7694 {
    background-color: #01426A !important;
}

.bg-grupoeuro-blue-7690 {
    background-color: #0076A8 !important;
}

.bg-grupoeuro-deg {
    background-color: #005687 !important;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.text-grupoeuro {
    color: #0F1D64 !important;
}

.bg-grupoeuro-gris {
    background-color: #bbb8b7 !important;
}

.opacity-70 {
    opacity: 0.7 !important;
    filter: alpha(opacity=70) !important;
}

:root {
    --input-padding-x: 1.5rem;
    --input-padding-y: 0.75rem;
}

.login,
.image {
    min-height: 100vh;
}

.bg-image {
    background-image: url('../../Assets/imagenes/Grupo-Euro.jpg');
    background-size: cover;
    background-position: center;
}

.bg-image-user {
    background-image: url('../../Assets/imagenes/gasomax-slp.jpg');
    background-size: cover;
    background-position: center;
    min-height: 115px;
}

.login-heading {
    font-weight: 300;
}

.btn-login {
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    padding: 0.75rem 1rem;
    border-radius: 2rem;
}

.form {
    border-top:2px solid #2e8ac7 !important;
}

.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

    .form-label-group > input,
    .form-label-group > label {
        padding: var(--input-padding-y) var(--input-padding-x);
        height: auto;
        border-radius: .5rem;
    }

    .form-label-group > label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0;
        /* Override default `<label>` margin */
        line-height: 1.5;
        color: #495057;
        cursor: text;
        /* Match the input under the label */
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;
    }

/* Fallback for Edge
-------------------------------------------------- */

@supports (-ms-ime-align: auto) {
    .form-label-group > label {
        display: none;
    }

    .form-label-group input::-ms-input-placeholder {
        color: #777;
    }
}

/* Fallback for IE
-------------------------------------------------- */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .form-label-group > label {
        display: none;
    }

    .form-label-group input:-ms-input-placeholder {
        color: #777;
    }
}

.image-login {
    background-color: #0076A8;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
/*--------------------------------------------*/

.font-small {
    font-size: .75em !important;
}

.font-large {
    font-size: 1.5em !important;
}

.font-double {
    font-size: 2em !important;
}

.ruBrowse {
    height: auto !important;
}

.ruFakeInput {
    height: auto !important;
}

.RadUpload .ruFileLI .ruFileWrap {
    max-width: 50%;
}

/*------------ Begin Toast------------*/
#toastAlert {
    visibility: hidden;
    position: fixed;
    z-index: 1;
    right: 2.5%;
    top: 50%;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .25rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.1);
    max-width: 310px;
    width: 310px;
    background-color: #ffffff;
    opacity: 1;
}

    #toastAlert.mostrar {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 4.6s;
        animation: fadein 0.5s, fadeout 0.5s 4.6s;
    }

@-webkit-keyframes fadein {
    from {
        right: 0;
        opacity: 0;
    }

    to {
        right: 2.5%;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        right: 0;
        opacity: 0;
    }

    to {
        right: 2.5%;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        right: 2.5%;
        opacity: 1;
    }

    to {
        right: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        right: 2.5%;
        opacity: 1;
    }

    to {
        right: 0;
        opacity: 0;
    }
}

#toastAlert.cerrar {
    /* visibility: visible; */
    -webkit-animation: fadeout 0.5s 4.8s;
    animation: fadeout 0.5s 4.8s;
}

@-webkit-keyframes fadeout {
    from {
        right: 2.5%;
        opacity: 1;
    }

    to {
        right: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        right: 2.5%;
        opacity: 1;
    }

    to {
        right: 0;
        opacity: 0;
    }
}
/*---------End toast ----------*/

/*---------Inicio stepper------*/

.md-stepper-horizontal {
    display: table;
    width: 100%;
    margin: 0 auto;
    /*background-color: #FFFFFF;*/
    /*box-shadow: 0 3px 8px -6px rgba(0,0,0,.50);*/
}

    .md-stepper-horizontal .md-step {
        display: table-cell;
        position: relative;
        padding: 12px;
    }

        .md-stepper-horizontal .md-step:hover,
        .md-stepper-horizontal .md-step:active {
            /*background-color: rgba(0,0,0,0.04);*/
            background-color: #005687 !important;
            opacity: 0.7;
            filter: alpha(opacity=70);
        }

        .md-stepper-horizontal .md-step:active {
            border-radius: 15% / 75%;
        }

        .md-stepper-horizontal .md-step:first-child:active {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .md-stepper-horizontal .md-step:last-child:active {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .md-stepper-horizontal .md-step:hover .md-step-circle {
            background-color: #757575;
        }

        .md-stepper-horizontal .md-step:first-child .md-step-bar-left,
        .md-stepper-horizontal .md-step:last-child .md-step-bar-right {
            display: none;
        }

        .md-stepper-horizontal .md-step .md-step-circle {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            background-color: #999999;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            font-weight: 600;
            color: #FFFFFF;
        }

    .md-stepper-horizontal.green .md-step.active .md-step-circle {
        background-color: #F96302;
    }
    .md-stepper-horizontal.green .md-step.ok .md-step-circle {
        background-color: #00AE4D;
    }
    .md-stepper-horizontal.green .md-step.notok .md-step-circle {
        background-color: #B40404;
    }
    .md-stepper-horizontal.orange .md-step.active .md-step-circle {
        background-color: #F96302;
    }

    .md-stepper-horizontal .md-step.active .md-step-circle {
        background-color: rgb(33,150,243);
    }

    .md-stepper-horizontal .md-step.done .md-step-circle *,
    .md-stepper-horizontal .md-step.editable .md-step-circle *,
    .md-stepper-horizontal .md-step.nueva .md-step-circle *,
    .md-stepper-horizontal .md-step.aceptada .md-step-circle *,
    .md-stepper-horizontal .md-step.procesada .md-step-circle *,
    .md-stepper-horizontal .md-step.aprobada .md-step-circle *,
    .md-stepper-horizontal .md-step.pagada .md-step-circle *,
    .md-stepper-horizontal .md-step.rechazada .md-step-circle * {
        display: none;
    }

    .md-stepper-horizontal .md-step.editable .md-step-circle {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

        .md-stepper-horizontal .md-step.editable .md-step-circle:before {
            font-family: 'FontAwesome';
            font-weight: 100;
            content: "\f040";
        }

    .md-stepper-horizontal .md-step.done .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f00c";
    }
    .md-stepper-horizontal .md-step.nueva .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f15c";
    }

    .md-stepper-horizontal .md-step.aceptada .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f046";
    }
    .md-stepper-horizontal .md-step.procesada .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f021";
    }
    .md-stepper-horizontal .md-step.aprobada .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f087";
    }
    .md-stepper-horizontal .md-step.pagada .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f0d6";
    }
    .md-stepper-horizontal .md-step.rechazada .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f057";
    }
    .md-stepper-horizontal .md-step .md-step-title {
        margin-top: 8px;
        font-size: 16px;
        font-weight: 600;
    }
   
    .md-stepper-horizontal .md-step .md-step-title,
    .md-stepper-horizontal .md-step .md-step-optional {
        text-align: center;
        color: rgba(0,0,0,.26);
    }

    .md-stepper-horizontal .md-step.active .md-step-title {
        font-weight: 600;
        color: rgba(0,0,0,.87);
    }
    .md-stepper-horizontal .md-step.notok .md-step-title {
        font-weight: 600;
        color: rgba(0,0,0,.87);
    }
    .md-stepper-horizontal .md-step.active.done .md-step-title,
    .md-stepper-horizontal .md-step.active.editable .md-step-title,
    .md-stepper-horizontal .md-step.active.aceptada .md-step-title,
    .md-stepper-horizontal .md-step.active.nueva .md-step-title,
    .md-stepper-horizontal .md-step.active.procesada .md-step-title,
    .md-stepper-horizontal .md-step.active.aprobada .md-step-title,
    .md-stepper-horizontal .md-step.active.pagada .md-step-title,
    .md-stepper-horizontal .md-step.active.rechazada .md-step-title {
        font-weight: 600;
    }

    .md-stepper-horizontal .md-step .md-step-optional {
        font-size: 12px;
    }

    .md-stepper-horizontal .md-step.active .md-step-optional {
        color: rgba(0,0,0,.54);
    }

    .md-stepper-horizontal .md-step .md-step-bar-left,
    .md-stepper-horizontal .md-step .md-step-bar-right {
        position: absolute;
        top: 26px;
        height: 1px;
        border-top: 1px solid #DDDDDD;
    }

    .md-stepper-horizontal .md-step .md-step-bar-right {
        right: 0;
        left: 50%;
        margin-left: 20px;
    }

    .md-stepper-horizontal .md-step .md-step-bar-left {
        left: 0;
        right: 50%;
        margin-right: 20px;
    }
/*---------Fin stepper---------*/
