/* Basic styling for the table */
@import url('reset.css');

:root {
  --primary-1-dark: #392A58;
  --primary-1: #614E89;
  --default: #333;
  --invert: #ffffff;
  --primary-1-light: #E5DBFB;
  --primary-1-vlight: #EDE6FC;
}




@font-face {
    font-family: 'Sora';
    src: url('../resources/Sora.ttf') format('truetype');
}

body {
    font-family: 'Sora', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 0;
  }

header{
  background: var(--primary-1-dark);
  height:100px;
}

header #logo{
  display:inline-block;
  width:320px;
}
  #doseDataTable_wrapper {
    width: 80%;
    margin: 20px auto;
  }

  header h1 {
    display: inline-block;
    color: var(--primary-1-vlight);
    height: 100px;
    position: relative;
    top: 0;
    font-size: 33px;
    left: -25px;
    top: -38px;
    font-weight: 200;
  }

  #msg-banner{
    width: 80%;
  margin: 20px auto;
  text-align: center;
  background-color:var(--primary-1-light);
  padding: 10px;
  font-weight: 600;
  border-radius: 4px;
  }

  #msg-banner.alert{
    background: #ffb1b1;
  }

  /* Table styling */

  #doseDataTable_filter{
    width: 100%;
  background: var(--primary-1-light);
  font-size: 120%;
  font-weight: 500;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  }

  #doseDataTable_filter input{
    background: var(--invert);
    width: 300px;
  margin-left: 30px;
  }

  #doseDataTable_info{
    font-size: 80%;
  font-weight: 600;
  }

  .hidden{
    display: none;
  }