@import './../util/utils.scss';

.app-academic-control-container {
  .app-academic-control-title {
    @include apply-flexlayout(row, nowrap, space-between, center);
    background: color(accent, darker);

    h1 {
      margin-left: 10px;
      font-style: 'Rajdhani', Verdana;
      font-weight: normal;
      font-size: 1.5rem;
      text-align: center;
      color: color(text-icons);
    }

    button {
      color: color(text-icons);
    }
  }

  form {
    @include apply-flexlayout(column, nowrap, center, center);
    
    p {
      text-align: center;
      justify-content: center;
      background: color(accent, lighter);
      border: 1px;
      border-style: dashed;
      border-color: color(accent);
      font-style: 'Roboto', Verdana;
      margin-left: 5px;
      margin-right: 5px;
    }

    mat-form-field {
      display:block;
      width:290px;
    }

    button, mat-form-field {
      margin: 5px 0px 5px 0px;
    }

    button {
      &:hover {
        background: color(accent, darker);    
      }
    }

    .app-add-eval-sheetname {
      text-align: center;    
    }
  }
    
  input {
    height: 45px;
    width: 300px;
  
    border: 1.3px solid color(accent);
    margin: 0px 0px 5px 5px;
    padding: 0px 5px 0px 5px;
  
    color: color(primary-text);
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
  
    &:focus {
      outline:none;
    }
  
    &::placeholder {
      color: color(secondary-text);
    }
  }
}