body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            background: #fff !important;
        }
        .user_card {
            height: auto;
            width: 350px;
            margin: 0 auto;
            background: #1E5CA0;
            position: relative;
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
        .brand_logo_container {
            text-align: center;
        }
        .brand_logo {
            width: 9em;
            height: auto;
            border-radius: 20%;
            border: 2px;
        }
        .form_container {
            margin-top: 30px;
        }
        .login_btn {
            width: 100%;
            background: #187ef3 !important;
            color: white !important;
            border: none;
        }
        .login_btn:hover {
            background: #0d59b1 !important;
        }
        .input-group-text {
            background: #3c7aec !important;
            color: white !important;
            border: 0 !important;
            border-radius: 0.25rem 0 0 0.25rem !important;
        }
        .input_user,
        .input_pass {
            background-color: #f2f2f2;
            border: none;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .input-group {
            margin-bottom: 20px;
        }
        .form-check-label {
            color: white;
        }

        .btn3d {
            position:relative;
            top: -6px;
            border:0;
             transition: all 40ms linear;
             margin-top:10px;
             margin-bottom:10px;
             margin-left:2px;
             margin-right:2px;
        }
        .btn3d:active:focus,
        .btn3d:focus:hover,
        .btn3d:focus {

                 outline:medium none;
        }
        .btn3d:active, .btn3d.active {
            top:2px;
        }
        .btn3d.btn-white {
            color: #666666;
            box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.10) inset, 0 8px 0 0 #f5f5f5, 0 8px 8px 1px rgba(0,0,0,.2);
            background-color:#fff;
        }
        .btn3d.btn-white:active, .btn3d.btn-white.active {
            color: #666666;
            box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,.1);
            background-color:#fff;
        }
        .btn3d.btn-default {
            color: #666666;
            box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0,0,0,.2);
            background-color:#f9f9f9;
        }
        .btn3d.btn-default:active, .btn3d.btn-default.active {
            color: #666666;
            box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,.1);
            background-color:#f9f9f9;
        }
        .btn3d.btn-primary {
            box-shadow:0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0,0,0,0.5);
            background-color:#4274D7;
        }
        .btn3d.btn-primary:active, .btn3d.btn-primary.active {
            box-shadow:0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
            background-color:#4274D7;
        }
        .btn3d.btn-success {
            box-shadow:0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #5eb924, 0 8px 8px 1px rgba(0,0,0,0.5);
            background-color:#78d739;
        }
        .btn3d.btn-success:active, .btn3d.btn-success.active {
            box-shadow:0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
            background-color: #78d739;
        }
        .btn3d.btn-info {
            box-shadow:0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0,0,0,0.5);
            background-color:#39B3D7;
        }
        .btn3d.btn-info:active, .btn3d.btn-info.active {
            box-shadow:0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
            background-color: #39B3D7;
        }
        .btn3d.btn-warning {
            box-shadow:0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #D79A34, 0 8px 8px 1px rgba(0,0,0,0.5);
            background-color:#FEAF20;
        }
        .btn3d.btn-warning:active, .btn3d.btn-warning.active {
            box-shadow:0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
            background-color: #FEAF20;
        }
        .btn3d.btn-danger {
            box-shadow:0 0 0 1px #b93802 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #AA0000, 0 8px 8px 1px rgba(0,0,0,0.5);
            background-color:#D73814;
        }
        .btn3d.btn-danger:active, .btn3d.btn-danger.active {
            box-shadow:0 0 0 1px #b93802 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
            background-color: #D73814;
        }
        .btn3d.btn-magick {
            color: #fff;
            box-shadow:0 0 0 1px #9a00cd inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #9823d5, 0 8px 8px 1px rgba(0,0,0,0.5);
            background-color:#bb39d7;
        }
        .btn3d.btn-magick:active, .btn3d.btn-magick.active {
            box-shadow:0 0 0 1px #9a00cd inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
            background-color: #bb39d7;
        }

        .valign-wrapper {
            height: 100vh;
        }
        .card {
            padding: 20px;
        }
        
        /* Opcional: Ajustar el tamaño del logo */
        .brand-logo {
            max-width: 10em;
            height: auto;
        }