*{
    font-family: 'Varela Round', sans-serif;
    }
    h1{
    text-align: center;
    color: #fff;
    margin-top:25px;
    }
    body{
    background-image : url(image/t.jpg);
    background-size: 1600px 2000px;
    }
    .btn{
    background-color: #2c3e50;
    width : 100%;
    }
    .btn:hover{
    background-color: #34495e;
    }
    .container{
    padding: 20px;
    background-color:#B7BED8;
    margin-top: 30px;
    margin-bottom: 30px;
    }
    .mb-0{
    margin-bottom: 0;
    }
    .mt-25{
    margin-top: 25px;
    }
    button, input,{
    border-bottom-color: #fff !important;
    }
    .input-field>label,span{
    color: #ddd !important;
    }
    
    /* mengganti warna default dari materialize.css input fields*/
    input:not([type]), input[type=text]:not(.browser-default), 
    input[type=password]:not(.browser-default), 
    input[type=email]:not(.browser-default), 
    input[type=url]:not(.browser-default), 
    input[type=time]:not(.browser-default), 
    input[type=date]:not(.browser-default), 
    input[type=datetime]:not(.browser-default), 
    input[type=datetime-local]:not(.browser-default), 
    input[type=tel]:not(.browser-default), 
    input[type=number]:not(.browser-default), 
    input[type=search]:not(.browser-default), 
    textarea.materialize-textarea,
    input:not([type]):focus:not([readonly]), 
    input[type=text]:not(.browser-default):focus:not([readonly]), 
    input[type=password]:not(.browser-default):focus:not([readonly]), 
    input[type=email]:not(.browser-default):focus:not([readonly]), 
    input[type=url]:not(.browser-default):focus:not([readonly]), 
    input[type=time]:not(.browser-default):focus:not([readonly]), 
    input[type=date]:not(.browser-default):focus:not([readonly]), 
    input[type=datetime]:not(.browser-default):focus:not([readonly]), 
    input[type=datetime-local]:not(.browser-default):focus:not([readonly]), 
    input[type=tel]:not(.browser-default):focus:not([readonly]), 
    input[type=number]:not(.browser-default):focus:not([readonly]), 
    input[type=search]:not(.browser-default):focus:not([readonly]), 
    textarea.materialize-textarea:focus:not([readonly]){
    box-shadow: none !important;
    border-bottom:2px solid #000080 !important; 
    }
    textarea.materialize-textarea{height: 6rem;}
    form{
    padding: 25px;
    }
    [type="checkbox"]:checked+span:not(.lever):before{
    border-right-color: #2c3e50;
    border-bottom-color: #6A79A6;
    }

    /* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
  }
  
  .valid:before {
    position: relative;
    left: -35px;
    content: "✔";
  }
  
  /* Add a red text color and an "x" when the requirements are wrong */
  .invalid {
    color: red;
  }
  
  .invalid:before {
    position: relative;
    left: -35px;
    content: "✖";
  }

  #message {
      text-align: center;
  }

  .iti__flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/img/flags.png");}

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/img/flags@2x.png");}
  }