* { 
    margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
  }


  .container-login {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
      }
  
      .img-box {
      
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 100%;
        padding: 20px;
  
      }
  
      .img-box img {
        width: 100%;
        height: 100%;
      }

      .img-box3 {
        display: none;
      }
  
      .content-box {
       
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 100%;
        background: linear-gradient(to top, rgb(9, 32, 63) 0%, rgb(83, 120, 149) 100%);
      }
  
      .content-box .form-box {
        width: 50%;
      }
  
      form h2 {
        color: #020202;
        font-weight: 600;
        font-size: 2em;
        text-transform: uppercase;
        margin-bottom: 50px;
        text-align: center;
      }
  
      .content-box .form-box .input-box{
        margin-bottom: 20px;
      }
  
      .content-box .form-box .input-box2 input[type=submit] {
        background: #c22e09;
        color: #fff;
        outline: none;
        border: none;
        font-weight: 500;
        cursor: pointer;
        font-size: 20px;
        transition: 0.3s;
      }

      .content-box .form-box .input-box2 input {
        width: 100%;
        padding: 10px;
        outline: none;
        font-weight: 400;
        border: none;
        font-size: 17px;
        color: #32324f;
        background-color: #ffffff;
        border-radius: 5px;
      }

      .content-box .form-box .input-box2 input[type=submit]:hover {
        background: #501605;
      }


      .content-box .form-box .input-box input {
        width: 100%;
        padding: 10px;
        outline: none;
        font-weight: 400;
        border: none;
        font-size: 17px;
        color: #32324f;
        background-color: #ffffff;
        border-radius: 5px;
      }
  
      .content-box .form-box .input-box span {
        font-size: 16px;
        margin-bottom: 5px;
        display: inline-block;
        color: #e7e7e7;
        font-weight: 400;
      }
  
      .content-box .form-box .input-box input::placeholder{
        color: #a9adb6;
      }
  
      .content-box .form-box .input-box input[type=submit] {
        background: #4aa4ee;
        color: #fff;
        outline: none;
        border: none;
        font-weight: 500;
        cursor: pointer;
        font-size: 20px;
        transition: 0.3s;
      }
  
      .content-box .form-box .input-box input[type=submit]:hover {
        background: #3286ca;
      }
  
      .content-box .form-box .remember {
        margin-bottom: 20px;
        color: #4aa4ee;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
      }
  
      .content-box .form-box .remember a {
        text-decoration: none;
        color: #4aa4ee;
      }
  
      .content-box .form-box .remember a:hover {
        color: #3286ca;
        
      }

      .input-cadastro {
        text-align: center;
        color: rgb(0, 0, 0);
        font-size: 1.2rem;
        padding-top: 20px;
      }

      .input-cadastro a{
        color: #3286ca;
        text-decoration: none;
      }

      .input-cadastro a:hover {
        color: #075fa7;
      }

      .alert_erro {
        background: rgba(199, 0, 0, 0.644);
        color: rgb(255, 255, 255);
        padding: 10px;
        margin-bottom: 50px;
        font-size: .9rem;
        border-radius: 4px;
        border: none;
        letter-spacing: 1px;
      }

      .alert_sucesso {
        background: rgba(56, 199, 0, 0.473);
        color: rgb(255, 255, 255);
        padding: 10px;
        margin-bottom: 50px;
        font-size: .9rem;
        border-radius: 4px;
        border: none;
        letter-spacing: 1px;
      }

      .tamanho {
        width: 48%;
        
      }

      .select-cliente {
        width: 100%;
      }

      .select-cliente select {
        background: none;
        width: 100%;
        border-color: rgb(192, 188, 188);
        border-radius: 4px;
        padding: 13px;
        margin-bottom: 30px;
      }

      .cor_option_padrao {
        color: #524f4e;
      }

     .logo_login {
      width: 500px;
     }

      @media (max-width:868px) {

        .logo_login {
          width: 200px;
         }
       
        .container-login {
          
          background-image: url("../img/logo_music_control.png");
          background-repeat: no-repeat;
          background-size: contain;
          
        }
        .container-login .img-box {
          display: none;
        }


        .img-box3 {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          
          
    
        }
    
        .img-box3 img {
          width: 100%;
         
        }

        
        .container-login .content-box {
          width: 100%;
        }
        .container-login .content-box .form-box {
          background-image: url("../img/logo_music_control.png");
          width: 100%;
          padding: 20px;
          background: none;
          margin: 5px;
        }
  
        .container-login .content-box .form-box .remember {
          flex-wrap: wrap;
        }
  
        
      }