.container {
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
    color: white;
  }
  
  .container .label {
    font-size: 15px;
    padding-left: 10px;
    position: absolute;
    top: 13px;
    transition: 0.3s;
    pointer-events: none;
  }
  
  .form-contol {
    height: 45px;
    border: none;
    outline: none;
    padding: 0px 7px;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    background-color: transparent;
    box-shadow: 3px 3px 10px rgba(0,0,0,1),
    -1px -1px 6px rgba(255, 255, 255, 0.4);
  }
  
  .form-contol:focus {
    border: 2px solid transparent;
    color: #fff;
    box-shadow: 3px 3px 10px rgba(0,0,0,1),
    -1px -1px 6px rgba(255, 255, 255, 0.4),
    inset 3px 3px 10px rgba(0,0,0,1),
    inset -1px -1px 6px rgba(255, 255, 255, 0.4);
  }
  
  .container .form-contol:valid ~ .label,
  .container .form-contol:focus ~ .label {
    transition: 0.3s;
    padding-left: 2px;
    transform: translateY(-35px);
  }
  
  .container .form-contol:valid,
  .container .form-contol:focus {
    box-shadow: 3px 3px 10px rgba(0,0,0,1),
    -1px -1px 6px rgba(255, 255, 255, 0.4),
    inset 3px 3px 10px rgba(0,0,0,1),
    inset -1px -1px 6px rgba(255, 255, 255, 0.4);
  }

  .misc-wrapper {

    width: 100%;
  
    height: 100%;
  
    display: table;
  
    position: relative;
  
    padding: 20px 0; }
  
  
  
    .misc-content {
  
      display: table-cell;
  
      vertical-align: middle;
  
      width: 100%;
  
      position: relative; }
  
  
  
      .misc-box {
  
        background-color: #191c24;
  
        padding: 10px; }
  
        .misc-box .img-circle {
  
          border: 2px solid rgba(0, 0, 0, 0.1); }
  
          .misc-box .checkbox {
  
            margin: 0px;
  
            padding-top: 0px; }
  
            .misc-box h4 {
  
              line-height: 26px; }
  
  
  
              .misc-footer {
  
                padding: 20px 15px; }
  
  
  
                .misc-header {
  
                  padding: 11px; }