html, body {
                /* background-image: url('../images/wallpaperbetter.jpg');
                background-repeat: no-repeat;
                width:100%;
                height:100%;
                margin:0;
                border:0;
                padding:0; */
       
     background-color: #295361; 
      min-height: 100vh;
     vertical-align: middle;
 /*     display: flex ; */
 }
 
 .card {
    background-color: rgba(245, 245, 245, 0.979);
     margin: auto;
     width: 600px;
     padding: 3rem 3.5rem;
     box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19)
 }
 
 .mt-50 {
     margin-top: 5px
 }
 
 .mb-50 {
     margin-bottom: 5px
 }
 
 @media(max-width:767px) {
     .card {
         width: 90%;
         padding: 1.5rem
     }
 }
 
 @media(height:1366px) {
     .card {
         width: 90%;
         padding: 8vh
     }
 }
 
 .card-title {
     font-weight: 700;
     font-size: 2.0em
 }
 
 .nav {
     display: flex
 }
 
 .nav ul {
     list-style-type: none;
     display: flex;
     padding-inline-start: unset;
     margin-bottom: 6vh
 }
 
 .nav li {
     padding: 1rem
 }
 
 .nav li a {
     color: black;
     text-decoration: none
 }
 
 .active {
     border-bottom: 2px solid black;
     font-weight: bold
 }
 
 input {
     border: none;
     outline: none;
     font-size: 1rem;
     font-weight: 600;
     color: #000;
     width: 100%;
     min-width: unset;
     background-color: transparent;
     border-color: transparent;
     margin: 0
 }
 
 tag a {
     color: grey;
     text-decoration: none;
     font-size: 0.87rem;
     font-weight: bold
 }
 
 tag a:hover {
     color: grey;
     text-decoration: none
 }
 
 tag .row {
     margin: 0;
     overflow: hidden
 }
 
 tag .row-1 {
     border: 1px solid rgba(0, 0, 0, 0.137);
     padding: 0.5rem;
     outline: none;
     width: 100%;
     min-width: unset;
     border-radius: 5px;
     background-color: rgba(221, 228, 236, 0.301);
     border-color: rgba(221, 228, 236, 0.459);
     margin: 2vh 0;
     overflow: hidden
 }
 
 tag .row-2 {
     border: none;
     outline: none;
     background-color: transparent;
     margin: 0;
     padding: 0 0.8rem
 }
 
 tag .row .row-2 {
     border: none;
     outline: none;
     background-color: transparent;
     margin: 0;
     padding: 0 0.8rem
 }
 
 tag .row .col-2,
 .col-7,
 .col-3 {
     display: flex;
     align-items: center;
     text-align: center;
     padding: 0 1vh
 }
 
 tag .row .col-2 {
     padding-right: 0
 }
 
 #card-header {
     font-weight: bold;
     font-size: 0.9rem
 }
 
 #card-inner {
     font-size: 0.7rem;
     color: gray
 }
 
 .three .col-7 {
     padding-left: 0
 }
 
 .three {
     overflow: hidden;
     justify-content: space-between
 }
 
 .three .col-2 {
     border: 1px solid rgba(0, 0, 0, 0.137);
     padding: 0.5rem;
     outline: none;
     width: 100%;
     min-width: unset;
     border-radius: 5px;
     background-color: rgba(221, 228, 236, 0.301);
     border-color: rgba(221, 228, 236, 0.459);
     margin: 2vh 0;
     width: fit-content;
     overflow: hidden
 }
 
 .three .col-2 input {
     font-size: 0.7rem;
     margin-left: 1vh
 }
 
 .btn {
     width: 100%;
     background-color: rgb(65, 202, 127);
     border-color: rgb(65, 202, 127);
     color: white;
     justify-content: center;
     padding: 2vh 0;
     margin-top: 3vh
 }
 
 .btn:focus {
     box-shadow: none;
     outline: none;
     box-shadow: none;
     color: white;
     -webkit-box-shadow: none;
     -webkit-user-select: none;
     transition: none
 }
 
 .btn:hover {
     color: white
 }
 
 input:focus::-webkit-input-placeholder {
     color: transparent
 }
 
 input:focus:-moz-placeholder {
     color: transparent
 }
 
 input:focus::-moz-placeholder {
     color: transparent
 }
 
 input:focus:-ms-input-placeholder {
     color: transparent
 }