* {
    box-sizing: border-box;
}


.container {
    background-color: green;
    padding: 2rem;
    border-radius: 1rem;
    border: 2px solid black;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: column;
    height: auto;
    width: auto;
    right: 6%;
    margin-bottom: 25px;
    color: white
}

.form {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 1rem;
    column-gap: 3rem;
    justify-content: center;
    align-items: center;
}

.title {
    margin: 0;
    text-align: center;
}

label { font-weight: bold; }

.numberofcharacterscontainer {
    display: flex;
    align-items: center;
}

.number-input {
    width: 3rem
}

.generadodeclave { margin: 0; }

.campos {
    background-color: white;
    color: black;
    padding: 1rem;
    border: 1px solid #333;
    height: 2rem;
    width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
    border-radius: .5rem;
}

.button {
    grid-column: span 2;
    background-color: transparent;
    border: 2px solid white;
    color: white;
    padding: .5rem 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 1rem;
}

header {
    padding: 15px 2px 2px 2px;
    margin: 0 0 20px 0;
    background-color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
}

header .top-right {
    width: 15%;
    height: 5%;
    right: 4%;
    top: 2%;
    position: fixed;
}

.top-left img {
    width: 15vw;
    float: left;
}

header .top-left {
    width: 15%;
    height: 5%;
    left: 4%;
    top: 4%;
    position: fixed;

}

.edgroup {
    align-items: center;
    color: green;
}

.navigation {
    /* width: 300px; */
    list-style-type: none;
    margin-top: 20px;
}

.navigation a,
.btn {
    margin-bottom: 0px;
    background-color: green;
    color: white;
     width: 450px;
    font-size: 20px;
    opacity: 1;
}

.btn:hover {
    color: white;
    opacity: 0.7;
}

.btn-link:hover {
    background-color:green;
    text-decoration:none;
    opacity:0.7;
}

.links {
    margin-left: 60px;
    cursor: pointer;
    color: blue;
}

.d-none { display: none; }
.d-block { display: block !important; }
.d-flex { display: flex; }
.d-inline { display: inline-block !important; width: auto !important; }

#containerholder {
    margin-top: 200px;
    margin-bottom: 50px;
}

input { color: black; }

#currentDay {
    color: navy;
    font-size: 30px;
    margin-bottom: 10px;
}

.content,
.section {
    visibility: hidden;
    height: 0;
    margin-top: -30px;
}

.section-title {
    font-size: 20px;
    width: 450px;
    margin-bottom: 10px;
    margin-top: 20px;
}


#backbutton { background-color: blue; }

/* each with links and sections needs last link to have this class*/

.navigation li .lastlink { margin-bottom: -10px; }

.navigation li { margin-bottom: 10px; }

#resend { visibility: hidden; }


/* bootstrap 5.3.0 to use margin top, left, right, bottom */
.mt-0 { margin-top: 0rem !important; }
.mt-1 { margin-top: 1rem !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-3 { margin-top: 3rem !important; }
.mt-4 { margin-top: 4rem !important; }
.mt-5 { margin-top: 5rem !important; }

.mb-0 { margin-bottom: 0rem !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 2rem !important; }
.mb-3 { margin-bottom: 3rem !important; }
.mb-4 { margin-bottom: 4rem !important; }
.mb-5 { margin-bottom: 5rem !important; }

.ms-0 { margin-left: 0rem !important; }
.ms-1 { margin-left: 1rem !important; }
.ms-2 { margin-left: 2rem !important; }
.ms-3 { margin-left: 3rem !important; }
.ms-4 { margin-left: 4rem !important; }
.ms-5 { margin-left: 5rem !important; }

.me-0 { margin-right: 0rem !important; }
.me-1 { margin-right: 1rem !important; }
.me-2 { margin-right: 2rem !important; }
.me-3 { margin-right: 3rem !important; }
.me-4 { margin-right: 4rem !important; }
.me-5 { margin-right: 5rem !important; }
.m-0 { margin: 0px !important; }

.ps-0 { padding-left: 0rem !important; }
.ps-1 { padding-left: 1rem !important; }
.ps-2 { padding-left: 2rem !important; }
.ps-3 { padding-left: 3rem !important; }
.ps-4 { padding-left: 4rem !important; }
.ps-5 { padding-left: 5rem !important; }

.pe-0 { padding-right: 0rem !important; }
.pe-1 { padding-right: 1rem !important; }
.pe-2 { padding-right: 2rem !important; }
.pe-3 { padding-right: 3rem !important; }
.pe-4 { padding-right: 4rem !important; }
.pe-5 { padding-right: 5rem !important; }

.pt-0 { padding-top: 0rem !important; }
.pt-1 { padding-top: 1rem !important; }
.pt-2 { padding-top: 2rem !important; }
.pt-3 { padding-top: 3rem !important; }
.pt-4 { padding-top: 4rem !important; }
.pt-5 { padding-top: 5rem !important; }

.pb-0 { padding-bottom: 0rem !important; }
.pb-1 { padding-bottom: 1rem !important; }
.pb-2 { padding-bottom: 2rem !important; }
.pb-3 { padding-bottom: 3rem !important; }
.pb-4 { padding-bottom: 4rem !important; }
.pb-5 { padding-bottom: 5rem !important; }
.p-0 { padding: 0rem !important; }

.border {
    border-color: #757575;
    border-width: 1px;
    border-style: solid;
}

/* Fixing some bootstrap (5.3) classes */
/* PRIMARY */
.btn-primary {    background-color: #0D6EFD !important; color:white;}
.btn-primary:hover {    background-color: #0B5ED7 !important; color:white;}
/* SECONDARY */
.btn-secondary {    background-color: #6C757D !important; color:white !important;}
.btn-secondary:hover {    background-color: #5C636A !important; color:white !important;}
/* SUCCESS */
.btn-success-5 {    background-color: #198754 !important; color:white;}
.btn-success-5:hover {    background-color: #157347 !important; color:white;}
/* DANGER */
.btn-danger {    background-color: #DC3545 !important; color:white;}
.btn-danger:hover {    background-color: #BB2D3B !important; color:white;}
/* WARNING */
.btn-warning {    background-color: #FFC107 !important; color:white !important;}
.btn-warning:hover {    background-color: #FFCA2C !important; color:white !important;}
/* INFO */
.btn-info {    background-color: #0DCAF0 !important; color:black !important;}
.btn-info:hover {    background-color: #31D2F2 !important; color:black !important;}
/* LIGHT */
.btn-light {    background-color: #F8F9FA !important; color:black !important;}
.btn-light:hover{    background-color: #D3D4D5 !important; color:black !important;}
/* DARK */
.btn-dark {    background-color: #212529 !important; color:white;}
.btn-dark:hover{    background-color: #424649 !important; color:white;}

.text-primary-5 { color:#0D6EFD !important; }
.text-danger-5 { color:#DC3545 !important; }
.text-warining-5 { color:#FFC107 !important; }

.text-primary-3 { color: #00f !important; }

.fs-5 {
    font-size: 1.50rem !important;
}

.form-label {
    display: inline-block;
    font-size: 12pt;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

.form-control {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 12pt;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.btn-primary-edgroupchb { background-color: #0000FF !important; }
.btn-primary-edgroupchb:hover { background-color: #4C4CFF !important; }
.h-bold { font-weight: bold; }
.border { border: 1px solid #DEE2E6; }
.border-dark { border-color: #343340; }
.btn-2 { width: 300px; }
.btn-2:focus { color: white !important; }
.text-warning { color: #FFC107 !important; }
.text-success { color: #198754 !important; }

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }

.area-folder {
    white-space: normal;
    word-wrap: break-word;
}

.alert-2 {
    /* padding-top: 4px;
    padding-bottom: 4px; */
    border-radius: 3px;
    width: fit-content;
    /* padding-left: 10px;
    padding-right: 10px; */
    font-size: inherit;
}

.alert-info-2 {
    border: #BCE8F1;
    background-color: #D9EDF7;
    color: #31708F !important;
}


/* Hide the download video option */

/* video::-webkit-media-controls-enclosure {
    overflow: hidden;
}
video::-webkit-media-controls-panel {
    display: none;
} */

/* .container-video {
    width: 800px;
    height: 450px;
} */

.size-16-9-sm {
    width: 560px;
    height: 315px;
}