@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,900);

:root {
     --header: #000;
     --highlight: hsl(184, 100%, 64%);
     --body: #122d48;
     --white: #ffffff;
     --black: #000000;
     --primary: #94618e;
     --dark-o: darkorange;
     --card: #043254;
     --pemex: #018041;
     --lime: #2f4f4f;
}
.ocultar {
     display: none;
}
.txt-highlight{
     color: var(--highlight) ;
}

.bg-header {
     background-color: var(--header);
     color: var(--highlight);
}

.bg-body {
     background-color: var(--body) !important;
}

* {
     padding: 0;
     margin: 0;
}

input {
     outline: none;
}

.fs-64 {
     font-size: 64px !important;
}
.pad-l {
     padding-left: 10px ;
}
.pad-r{
     padding-right: 10px ;
}

html,
body {
     display: flex;
     justify-content: center; /* Centers horizontally */
     font-family: "Roboto", sans-serif;
     overflow: hidden ;
     background-color: var(--body) !important ;
}
.panel {
     margin-top: 100px;
     height: 340px;
     width: 300px;
     background-color :#206996 ;
     text-align: center;
     border-radius: 25px;
}
.panel-header { 
     margin: 15px auto;
     height: 85px ;
     width: 93% ;
     border-radius: 15px;
     background-color: #000 /* var(--body)  */;
     text-align: center;
     color:#fff;
     .header-image {
          margin-top: 5px;
          font-size: 48px;
          text-align: center;
     }
}
.panel-body {
     margin: 0px 15px;     
     height: 150px ;
     width: 90% ;
     border-radius: 15px;
     background-color: #000 /* var(--body) */ ;
     text-align: center;
     color:#fff;
}

.panel-footer { 
     margin: 15px auto;
     height: 45px ;
     width: 93% ;
     border-radius: 15px;
     /* background-color: var(--body) ; */
     text-align: center;
     color:#fff;
     .header-image {
          margin-top: 5px;
          font-size: 48px;
          text-align: center;
     }
}

.panel input[type="text"],
input[type="password"] {
     background-color: #206996 /* #22232a */;
     color: #fff;
     -webkit-border-radius: 45px;
     -moz-border-radius: 45px;
     border-radius: 45px;
     font-size: 15px;
     height: 45px;
     border: none;
     padding-left: 15px;
     width: -webkit-calc(100% - 15px);
     width: -moz-calc(100% - 15px);
     width: calc(100% - 15px);
}
input[type="text"]::placeholder ,
input[type="password"]::placeholder{
     color: #000;
     opacity: 100;
}

input[type="text"][placeholder],
input[type="password"][placeholder] {
     color: #fff !important;
     font-size: 15px;
     font-weight: 500;
}
.user-icon {
     position: relative ;
     left:100px;
     bottom: 35px;
}
.field-icon {
     position: relative ;
     bottom: 45px ;
     left:100px ;
     z-index: 2;
     color: #fff;
     font-size: 30px;
} 
.text-1 {
     background-color: #206996 !important;
     color: #fff !important;;
     -webkit-border-radius: 45px !important;;
     -moz-border-radius: 45px !important;;
     border-radius: 45px !important;;
     font-size: 15px !important;;
     height: 45px !important;;
     border: none !important;;
     margin-left: 43px !important; 
     padding-left: 25px !important;
     width: -webkit-calc(100% - 100px) !important;
     width: -moz-calc(100% - 100px) !important;
     width: calc(100% - 100px) !important;
}
.user-icon-1 {
     position: relative !important;     
     right:  25px !important;;
     top: 3px !important;
}