@font-face {
     font-family: metropolis;
     src: url(/metropolis.medium.otf);
 }

 .body-wrap {
     box-sizing: border-box;
     font-family: metropolis;
     margin-top: 5rem;
 }

 a.md-opjjpmhoiojifppkkcdabiobhakljdgm_doc {
     text-decoration: none;
 }

 .a-forgot {
     position: relative;
     left: 8.3rem;
     color: #0069d9;
 }

 #a-register {
     color: dodgerblue;
     position: relative;
     left: 0.2rem;
 }

 @media screen and (max-width: 767.98px) {

     .container {
         margin-bottom: 45px;
         padding: 1.5rem;
         margin: 0;
         text-align: center;
         width: 79%;
         left: 20px;
     }
 }

 @media screen and (max-width:480px) {
     input {
         width: 35%;
     }
 }

 #heading-login {
     font-size: 25px;
     padding: 10px;
 }

 .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

 }

 #confirm {
     color: #0069d9;
     margin-bottom: 4.5rem;
     font-size: 1rem;
     letter-spacing: -1px;
     font-weight: bold;
 }

 .form-control {
     width: 365px;
     height: 28px;
     padding-left: 1.2rem;
     margin-left: 10px;
     margin-bottom: 1.5rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #495057;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #9B9B9B;
     border-radius: 4px;
     transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
 }

 .tombol-primary {

     color: #fff;
     width: 401px;
     background-color: #0069d9;
     border-color: #1360b8;
     display: inline-block;
     padding: 6px 12px;
     margin-top: 12px;
     margin-bottom: 14px;
     font-size: 14px;
     line-height: 1.4rem;
     height: 48px;

     text-align: center;
     /*penempatan teks ditengah button*/

     white-space: nowrap;

     vertical-align: middle;
     /*pengaturan text posisi tengah dari sisi vertikal*/

     -ms-touch-action: manipulation;

     touch-action: manipulation;
     /*ketika button tersentuh*/

     cursor: pointer;
     /*pointer kursor*/


     border: 1px solid transparent;

     border-radius: 25px;


 }

 .toggle-switch {
     font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
     padding: 60px;
     overflow: hidden;
     margin-top: -25px;
 }

 .switch-title {
     margin-bottom: 6px;
 }

 .toggle-switch input {
     position: absolute !important;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     width: 1px;
     border: 0;
     overflow: hidden;
 }

 .toggle-switch label {
     float: none;
     margin-left: -10px;
 }

 .toggle-switch label {
     display: inline-block;
     width: 95px;
     background-color: #fff;
     color: rgba(80, 78, 78, 0.8);
     font-size: 14px;
     font-weight: normal;
     text-align: center;
     text-shadow: none;
     padding: 6px 14px;
     border: 1px solid rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
     -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
     -ms-transition: all 0.1s ease-in-out;
     -o-transition: all 0.1s ease-in-out;
     transition: all 0.1s ease-in-out;
 }

 .toggle-switch label:hover {
     cursor: pointer;
 }

 .toggle-switch input:checked+label {
     background-color: #0069d9 !important;
     color: #fff;
     -webkit-box-shadow: none;
     box-shadow: none;
     color: #FFF;
     box-shadow: 0 0 10px rgba(102, 179, 251, 0.5);
     border-color: #4B9DEA;
 }

 .toggle-switch label:first-of-type {
     border-radius: 4px 0 0 4px;
 }

 .toggle-switch label:last-of-type {
     border-radius: 0 4px 4px 0;
 }