.fixedtable {
	border-collapse: collapse;
	table-layout: fixed;
	width: 775px;
}

.custombutton {
  border: none;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.custombuttongreen {border-radius: 8px; background-color: #04AA6D; font-size: 25; color: white;}
.custombuttonred2 {border-radius: 8px; background-color: #fa4d41; font-size: 25; color: white;}
.custombuttonbluehalf {border-radius: 8px; height:100px; width: 100px; background-color: #09357d; font-size: 18px; color: white;}
.custombuttongrey {border-radius: 8px; height:100px; width: 200px; background-color: #d9d9d9; font-size: 18px; color: black;}
.custombuttonyellow  {border-radius: 8px; background-color: #f3ff33; color: black;}

.custombuttonMBAM{
				background-color:transparent; border-radius: 8px; height:100px; width: 200px;
                background: url('https://tech.bcsoh.org/images/mbam.jpg') no-repeat;
				background-size: 100%;
            }
			



.custombutton:hover {
  transform: scale(1.2);
}

.custombuttonhalf {width: 50px;}
.custombuttonSmall {width: 70px;}
.custombuttonMedium {width: 150px;}
.custombuttonBig {width: 350px;}

.button-startover {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-radius: .375em;
  box-shadow: none;
  box-sizing: border-box;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  font-family: Quicksand,sans-serif;
  font-size: 12px;
  font-weight: 700;
  height: 2.5em;
  justify-content: center;
  line-height: 1.5;
  padding: calc(.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

/* Semester Selection Button */
.button-gradingperiod {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-radius: .375em;
  box-shadow: none;
  box-sizing: border-box;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  font-family: Quicksand,sans-serif;
  font-size: 12px;
  font-weight: 700;
  height: 2.5em;
  justify-content: center;
  line-height: 1.5;
  padding: calc(.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.button-gradingperiod:active {
  border-color: #4a4a4a;
  outline: 0;
}

.button-gradingperiod:focus {
  border-color: #485fc7;
  outline: 0;
}

.button-gradingperiod:hover {
  border-color: #b5b5b5;
}

.button-gradingperiod:focus:not(:active) {
  box-shadow: rgba(72, 95, 199, .25) 0 0 0 .125em;
}
 
.button-gradingperiod-selected {
  background-color: #2f80ed;
  color: #fff;
}

.button-gradingperiod-disabled {
  background-color: #b6b8ba;
  color: #fff;
  cursor: not-allowed;
}

.button-gradingperiod-close {
  background-color: #f5aea6;
  color: #363636;
}

/* Security Header Buttons */
.button-securitytoggle {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-radius: .375em;
  box-shadow: none;
  box-sizing: border-box;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  font-family: Quicksand,sans-serif;
  font-size: 12px;
  font-weight: 700;
  height: 2.5em;
  justify-content: center;
  line-height: 1.5;
  padding: calc(.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.button-securitytoggle:active {
  border-color: #4a4a4a;
  outline: 0;
}

.button-securitytoggle:focus {
  border-color: #485fc7;
  outline: 0;
}

.button-securitytoggle:hover {
  border-color: #b5b5b5;
}

.button-securitytoggle:focus:not(:active) {
  box-shadow: rgba(72, 95, 199, .25) 0 0 0 .125em;
}
 
.button-securitytoggle-selected {
  background-color: #2f80ed;
  color: #fff;
}

.button-securitytoggle-green {
  background-color: #32a852;
  color: #fff;
}

.button-securitytoggle-red {
  background-color: #f5717c;
  color: #fff;
}

/* Security Header Buttons */
.button-securityaction {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-radius: .375em;
  box-shadow: none;
  box-sizing: border-box;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  font-family: Quicksand,sans-serif;
  font-size: 10px;
  font-weight: 700;
  height: 2.0em;
  justify-content: center;
  line-height: 1.5;
  padding: calc(.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.button-securityaction:active {
  border-color: #4a4a4a;
  outline: 0;
}

.button-securityaction:focus {
  border-color: #485fc7;
  outline: 0;
}

.button-securityaction:hover {
  border-color: #b5b5b5;
}

.button-securityaction:focus:not(:active) {
  box-shadow: rgba(72, 95, 199, .25) 0 0 0 .125em;
}


.button-securityaction-green {
  background-color: #32a852;
  color: #fff;
}

.button-securityaction-blue {
  background-color: #205cf5;
  color: #fff;
}

.button-securityaction-red {
  background-color: #f5717c;
  color: #fff;
}

.button-securityaction-proceed {
  align-items: center;
  appearance: none;
  background-color: #07f543;
  border: 1px solid #dbdbdb;
  border-radius: .375em;
  box-shadow: none;
  box-sizing: border-box;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  font-family: Quicksand,sans-serif;
  font-size: 15px;
  font-weight: 800;
  height: 3.0em;
  justify-content: center;
  line-height: 1.5;
  padding: calc(.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.button-securityaction-cancel {
  align-items: center;
  appearance: none;
  background-color: #f78472;
  border: 1px solid #dbdbdb;
  border-radius: .375em;
  box-shadow: none;
  box-sizing: border-box;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  font-family: Quicksand,sans-serif;
  font-size: 15px;
  font-weight: 800;
  height: 3.0em;
  justify-content: center;
  line-height: 1.5;
  padding: calc(.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.button-textonly {
  background: none!important;
  border: none;
  padding: 0!important;
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

.button-color-submitted {
  background-color: #f9fc92 !important;
  color: #0a0a0a !important;
}

.button-color-approved {
  background-color: #32a852 !important;
  color: #f5f7f7 !important;
}

.studentbutton4 {
  border: none;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 3px;
  color: black;
  height: 60px;
  width: 165px;
  box-shadow: 0 2px 4px darkslategray;
}

.studentbutton4HalfHeight {
  height: 22px;
}

.studentbutton4:hover { background-color: #b3b1b1; color: blue; transform: scale(1.0);}
.studentbutton4HalfHeight:hover { background-color: #b3b1b1; color: blue; transform: scale(1.0);}

.studentstatement { background-color: #f53918; color: white;}
.incidentreport { background-color: #08c735; color: white;}
.counselorrequest { background-color: #036ffc; color: white; height: 90px; width: 200px;}

.studentstatement:hover { background-color: #fa765f; color: white;}
.incidentreport:hover { background-color: #05f53d; color: white;}
.counselorrequest:hover { background-color: #038cfc; color: white;}


.formbuttonCancel {
  align-items: center;
  appearance: none;
  background-color: #f21707;
  border: 1px solid #dbdbdb;
  border-radius: .375em;
  box-shadow: none;
  box-sizing: border-box;
  color: #fafafa;
  cursor: pointer;
  display: inline-flex;
  font-family: Quicksand,sans-serif;
  font-size: 10px;
  font-weight: 700;
  height: 40px;
  width: 125px;
  justify-content: center;
  line-height: 1.5;
  padding: calc(.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

/* Semester Selection Button */
.formbuttonClose {
  align-items: center;
  appearance: none;
  background-color: #f2bdbd;
  border: 1px solid #dbdbdb;
  border-radius: .375em;
  box-shadow: none;
  box-sizing: border-box;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  font-family: Quicksand,sans-serif;
  font-size: 16px;
  font-weight: 700;
  height: 50px;
  width: 165px;
  justify-content: center;
  line-height: 1.5;
  padding: calc(.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.acknowledgebutton4 {
  border: none;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 3px;
  color: black;
  height: 60px;
  width: 165px;
  background-color: #f54c4c !important;
}
/* Form Fields */

.required-blank-yellow {
  background-color: #eef5a9 !important;
  color: #0a0a0a !important;
}

.required-blank-white {
  background-color: #faf9f7 !important;
  color: #0a0a0a !important;
}

.form-field-text-input{
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: groove;
    background-color: #eee;
    text-align: center;
	font-size:18px;
	height:20px;
	width: 75%;
	padding: 12px 20px;
	margin: 4px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	outline: none;
}

.form-field-barcode-input{
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: groove;
    background-color: #eee;
    text-align: center;
	font-size:18px;
	height:20px;
	width: 150px;
	padding: 12px 20px;
	margin: 4px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	outline: none;
}

.form-field-dropdown {
  /* Reset */
  appearance: none;
  border: 0;
  outline: 0;
  /* Personalize */
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: groove;
    background-color: white;
    text-align: center;
	font-size:18px;
	height:25px;
	width: 75%;
	border-radius: 0.25em;
	cursor: pointer;
  /* <option> colors */
  option {
    color: inherit;
    background-color: #eee;
  }
  /* Remove focus outline */
  &:focus {
    outline: none;
  }