@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
        @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

        :root {
            --verde: #7ba839;
            --gris: #5e5f59;
            --light0: #fcfcfc;
            --light1: #ececec;
            --dark: #202020;
            --alert: #9c0000;
            --info: #0d6efd;
            --warning: #ffc107;
            --font: "Open Sans", sans-serif;
            --lines:#e4e4e4;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .newbody {
            font-family: var(--font);
            font-size: 16px;
            color: var(--dark);
            font-weight: 400;
            background-color: var(--light);
        }


        .full-height {
            min-height: 100vh;
        }

        .text-align-center {
            text-align: center;
        }

        .text-align-left {
            text-align: left;
        }

        .text-align-right {
            text-align: right;
        }

        .center {
            margin: 0 auto;
        }

        .padd-default {
            padding: 2em 1em;
        }

        .mar-default {
            margin: 1em;
        }

        .mar-tb {
            margin: 2em 0;
        }

        .texture {
            background: radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, var(--lines) 68% 70%, #0000 72%) 32px 32px/calc(2*32px) calc(2*32px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, var(--lines) 68% 70%, #0000 72%) 32px 32px/calc(2*32px) calc(2*32px), radial-gradient(35.36% 35.36% at 100% 25%, #0000 66%, var(--lines) 68% 70%, #0000 72%) 0 0/calc(2*32px) calc(2*32px), radial-gradient(35.36% 35.36% at 0 75%, #0000 66%, var(--lines) 68% 70%, #0000 72%) 0 0/calc(2*32px) calc(2*32px), repeating-conic-gradient(#f7f7f7 0 25%, #0000 0 50%) 0 0/calc(2*32px) calc(2*32px), radial-gradient(#0000 66%, var(--lines) 68% 70%, #0000 72%) 0 calc(32px/2)/32px 32px #f7f7f7;

        }

        /*enlaces */
        .link_primary {
            color: var(--verde);
            text-decoration: none;
            cursor: pointer;
        }

        .link_primary:hover {
            color: gray;
            text-decoration: underline;
        }

        /*login form */
        .flex-jc-sb {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        .flex-center {
            display: flex;
            flex-direction: row;
            gap: 1em;
            justify-content: center;
        }


        .form-container {
            width: 350px;
            min-height: 300px;
            padding: 1em;
            display: flex;
            flex-direction: column;
            gap: 0.5em;
            justify-content: center;
            box-shadow: 0px 0px 9px #d1d1d1;
            border-radius: 8px;
            background: var(--light0);

        }

        .loginRow {
            padding: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        /* inicio forgot forgot_balloon */
        .forgot_balloon {
            position: relative;
            display: inline-block;
            cursor: pointer;
            color: var(--verde);
            margin: 1.5em 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .forgot_balloon .forgot_balloontext {
            visibility: hidden;
            width: 160px;
            background-color: var(--alert);
            color: var(--light0);
            text-align: center;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -80px;
        }

        .forgot_balloon .forgot_balloontext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--alert) transparent transparent transparent;
        }

        .forgot_balloon .show {
            visibility: visible;
            -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s;
        }

        @-webkit-keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /** fin forgot forgot_balloon */

        /*                 ** RESPONSIVE **                */
        @media only screen and (max-width: 600px) {}