﻿/*Rojo*/
/*Escritorio*/
@media (min-width: 1199.98px) {
    /*.ticopay-btn-ok {
        background: #ff0000;
    }*/
    /*seccion de los botones*/
    .card-header .tools-header {
        display: inline-flex;
        width: 100%;
        align-items: center
    }

        .card-header .tools-header li:nth-child(even) {
            text-align: right
        }

    .dr-breakout-btn {
        display: none;
    }

    .dr-breakout {
        display: inline;
        background: transparent;
        box-shadow: none;
        border: none;
        position: relative;
        margin: 0;
    }

        .dr-breakout li {
            display: inline;
        }

            .dr-breakout li a {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border-radius: 4px;
                color: #fff;
                background-color: #507281;
            }
    .page-head .breadcrumb > li {
        font-size:1vw;
    }

    #img-welcome{
        width:25%
    }
}
/*Fin Escritorio*/
/*Azul*/
/*Tablet*/
/*Portrait*/
@media (min-width: 576px) and (max-width: 991.98px) and (orientation:portrait) {
    /*.ticopay-btn-ok {
        background: #0026ff;
    }*/

    .card-header .tools-header {
        display: inline-flex;
        width: 100%;
    }

        .card-header .tools-header .col-md-4 {
            flex: 0 0 40%;
            max-width: 40%;
            text-align: left;
        }

        .card-header .tools-header .col-md-8 {
            flex: 0 0 60%;
            max-width: 60%;
            text-align: right;
        }
            /*.card-header .tools-header .col-md-8 {
            max-width: 100% !important;
            text-align: center;
        }*/
            .card-header .tools-header .col-md-8 .btn-group {
                width: 60%;
            }

                .card-header .tools-header .col-md-8 .btn-group button {
                    width: 100%;
                }

    .dropdown-menu.show {
        width: 100%;
    }

    .card-header .tools-header .tools {
        display: inline-grid;
        text-align: center;
    }

    .modal-footer .btn .btn-label,
    .card-body .ticopay-btn-info .btn-label {
        position: absolute;
    }

    .btn-label {
        padding: 10px 8px
    }

    .btn {
        padding-left: 35px;
    }

    .tools-btn {
        width: 60%;
        display: inline-grid;
    }

    .ticopay-title {
        font-size: 2vw;
        align-items:center
    }

    .page-head {
        padding: 12px 5px 10px !important;
    }

        .page-head .row .col-md-7 {
            flex: 0 0 48.333333%;
            max-width: 48.333333%;
        }

        .page-head .row .col-md-5 {
            flex: 0 0 51.666667%;
            max-width: 51.666667%;
        }

        .page-head .breadcrumb > li {
            font-size: 0.85rem;
            align-items: center
        }

    .container-title {
        height: 35%;
    }

    .title-loader {
        font-size: 6vw;
    }


    #img-welcome {
        width: 50%
    }
}
/*amarillo*/
/*landscape*/
@media (min-width: 991.98px) and (max-width: 1199.98px) and (orientation:landscape) {
    /*.ticopay-btn-ok {
        background: #ffd800;
    }*/

    .card-header .tools-header .col-md-4,
    .card-header .tools-header .col-md-8 {
        max-width: 100% !important;
        text-align: center;
    }

    /*.modal-footer .btn .btn-label,
    .card-body .ticopay-btn-info .btn-label {
        position: initial;
    }*/

    .ticopay-title {
        font-size: 1.8vw;
    }

    .page-head .breadcrumb > li {
        font-size: 0.95rem;
    }

    .dr-breakout-btn {
        display: none;
    }

    .dr-breakout {
        display: inline;
        background: transparent;
        box-shadow: none;
        border: none;
        position: relative;
        margin: 0;
    }

        .dr-breakout li {
            display: inline;
        }

            .dr-breakout li a {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border-radius: 4px;
                color: #fff;
                background-color: #507281;
            }


    #img-welcome {
        width: 30%
    }
}
/*fin tablet*/

/*movil*/
/*Portrait*/
/*Default*/
/*fusia*/
@media (max-width: 575.98px) and (orientation:portrait) {
    /*.ticopay-btn-ok {
        background: #ff00dc;
    }*/

    /*Comportamiento para los botones*/
    .card-header .tools-header .tools {
        display: inline-grid;
        text-align: center;
    }

    .card-header .tools-header {
        display: inline-grid;
        text-align: center;
        padding: 0;
    }

        .card-header .tools-header .col-md-8 .btn-group {
            width: 100%;
        }

            .card-header .tools-header .col-md-8 .btn-group button {
                width: 100%;
            }

    .dropdown-menu.show {
        width: 100%;
    }

    .card-header .tools-header .tools {
        display: inline-grid;
        text-align: center;
    }

    .btn-label {
        padding: 10px 8px
    }

    .btn {
        padding-left: 35px;
    }

    .modal-footer .btn .btn-label,
    .card-body .ticopay-btn-info .btn-label {
        position: absolute;
    }

    .tools-btn {
        width: 60%;
        display: inline-grid;
    }

    ul .tools-header{
        padding:0;
    }

    .title-loader {
        font-size: 8vw;
    }

    .card-header {
        text-align: center;
    }
    /*Comportamiento de los label*/
    .input-group .row label {
        text-align: left;
    }
    .container-title {
        height: 60%;
    }
    
    #img-welcome {
        width: 75%
    }
}
/*Gris*/
/*landscape*/
@media (min-width: 851.98px) and (max-width: 991.98px) and (orientation:landscape) {
    /*.ticopay-btn-ok {
        background: #808080;
    }*/

    .ticopay-title {
        font-size: 1.9vw;
        line-height: 50px;
    }

    .card-header .tools-header .col-md-4,
    .card-header .tools-header .col-md-8 {
        max-width: 100% !important;
        text-align: center;
    }

    /*.modal-footer .btn .btn-label,
    .card-body .ticopay-btn-info .btn-label {
        position: initial;
    }*/

    .dr-breakout-btn {
        display: none;
    }

    .dr-breakout {
        display: inline;
        background: transparent;
        box-shadow: none;
        border: none;
        position: relative;
        margin: 0;
    }

        .dr-breakout li {
            display: inline;
        }

            .dr-breakout li a {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border-radius: 4px;
                color: #fff;
                background-color: #507281;
            }

    .page-head .breadcrumb > li {
        font-size: 0.85rem;
    }

    #img-welcome {
        width: 35%
    }
}
/*rojo*/
@media (min-width:576px) and (max-width: 690px) and (orientation:landscape) {
    /*.ticopay-btn-ok {
        background: #000000;
    }*/

    .card-header .tools-header {
        display: inline-flex;
        width: 100%;
    }

        .card-header .tools-header .col-md-4 {
            flex: 0 0 50%;
            max-width: 50%;
            text-align: left;
        }

        .card-header .tools-header .col-md-8 {
            flex: 0 0 50%;
            max-width: 50%;
            text-align: right;
        }
            /*.card-header .tools-header .col-md-8 {
            max-width: 100% !important;
            text-align: center;
        }*/
            .card-header .tools-header .col-md-8 .btn-group {
                width: 50%;
            }

                .card-header .tools-header .col-md-8 .btn-group button {
                    width: 100%;
                }

    .dropdown-menu.show {
        width: 100%;
    }

    .card-header .tools-header .tools {
        display: inline-grid;
        text-align: center;
    }

    /*.modal-footer .btn .btn-label,
    .card-body .ticopay-btn-info .btn-label {
        position: initial;
    }*/

    .btn-label {
        padding: 10px 8px
    }

    .btn {
        padding-left: 35px;
    }
    .tools-btn {
        width: 60%;
        display: inline-grid;
    }

    #img-welcome {
        width: 40%
    }
}
/*negro*/
@media (min-width: 690px) and (max-width: 851.98px) and (orientation:landscape) {
    /*.ticopay-btn-ok {
        background: #000000;
    }*/

    .card-header .tools-header .col-md-4,
    .card-header .tools-header .col-md-8 {
        max-width: 100% !important;
        text-align: center;
    }

    .ticopay-title {
        font-size: 2vw;
    }

    .page-head .breadcrumb > li {
        font-size: 0.85rem;
    }


    .dr-breakout-btn {
        display: none;
    }

    .dr-breakout {
        display: inline;
        background: transparent;
        box-shadow: none;
        border: none;
        position: relative;
        margin: 0;
    }

        .dr-breakout li {
            display: inline;
        }

            .dr-breakout li a {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border-radius: 4px;
                color: #fff;
                background-color: #507281;
            }

    /*.modal-footer .btn .btn-label,
    .card-body .ticopay-btn-info .btn-label {
        position: initial;
    }*/

    #img-welcome {
        width: 35%
    }
}
/*naranja*/
@media (min-width: 360px) and (max-width: 575.99px) and (orientation:landscape) {
    /*.ticopay-btn-ok {
        background: #ff6a00;
    }*/

    .ticopay-title {
        font-size: 2vw;
    }

    .page-head .breadcrumb > li {
        font-size: 0.85rem;
    }

    /*.modal-footer .btn .btn-label,
    .card-body .ticopay-btn-info .btn-label {
        position: initial;
    }*/

    #img-welcome {
        width: 50%
    }

}

@media (min-width: 320px) and (max-width: 359.99px) {


    .btn-label {
        padding: 10px 8px
    }
    .btn {
        padding-left: 35px;
    }
}
/*fin movil*/
