@charset "utf-8";

/* CSS Document */

/*  settings */


/*
  CSS Vars  
  to access the value later use var( --<varname> )
*/
:root{
  --ua-blue: #001c48;
  --ua-light-blue: #2435cc;
  --ua-red: #ab0520;
  --off-white: #f8f8f8;
  --code-background: #e5fbef;
  --motd-background: #ccf2fb;
  --footer-container-height: 20%;
  --accordion-margin: 40px;
  --small-margin: 20px;
  --mid-margin: 30px;
  --large-margin: 40px;
}

html {
	margin: 0;
  position: relative;
	min-height: 100%;
  box-sizing: content-box;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

section .logout {
  padding: 0;
  margin-left: 0;
}

section .login{
  padding: 0;
  margin-left: 0;
}

#mcbc {
  overflow: hidden auto;
  margin-bottom: var(--small-margin);
}

.short-tab {
  margin-left: var(--small-margin);
}

.mid-tab {
  margin-left: var(--large-margin);
}       

.long-tab {
  margin-left:calc(var(--small-margin)*3);
}

.inline-radio,
.inline-checkbox {
  display: flex;
  min-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.inline-radio label,
.inline-checkbox label {
  padding-left: 40px;
  margin-bottom: 0;
  cursor: pointer;
  font-weight: normal;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.tabcontent {
  display: inline-block;
  width: 100%;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.engr-header-no-menu.support {
  background: var(--off-white);
  height: 30px;
  top: 0;
  position: sticky;
  z-index: 1;
}

#region-header-engr {
  height: 30px;
  display: flex;
  position: sticky;
}

#region-header-engr img {
  width: auto;
  height: 30px;
  display: block;
  margin-left: 10%;
  margin-right: auto;
}

#support-menu {
  background: var(--ua-light-blue);
  position: fixed; 
  z-index: 1; 
  display: block;
  width: 100%;
}

#support-menu-button {
  background-color: var( --ua-light-blue );
  border: none;
  color: white;
  padding: 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  left: 2px;
  height: 26px;
  width: 26px;
}

#support-menu ul {
  list-style-type: none;
  margin: 0 8px 8px;
}

img.support {
  margin: 0%;
}

a.support-menu-a {
  color: var(--off-white);
}

.support-menu-h4 {
  color: white;
}

/* Only stick if you can fit */
@media (height >= 300px) {
  #support-menu {
    position: sticky;
    top: 0;
  }
}

#footer-container{
  width: 100%;
  height: var(--footer-container-height);
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: inline-block;
  position: absolute;
  bottom: -60px; /* subtract out the header and footer heights?? */
}

.footer-content {
  width: 100%;
  background: #f4ede5;
  color: #49595e;
  margin-left: 0%;
  margin-right: 0%;
  padding-top: 15px;
}

#footer-copyright-container {
  width: 100%;
  height: 30px;
  background-color: var(--ua-blue);
  bottom: 0;
  margin-left: 0%;
  left: 0%;
  padding: 0%;
  position: sticky;
}

#footer-copyright {
  bottom: 0;
  width: 100%;
  color: white;
}

#engrit-logo img {
  height: auto;
  max-width: 100%;
}

@media only screen and (width <= 900px) {
  /* For mobile phones/small screen */
  #college-contact {
    width: 100%;
    margin-top: 10px;
  }
}

@media only screen and (width <= 1500px) {
  /* For mobile phones: */
  #college-contact {
    position: relative;
    margin-top: -100px;
  }
}

#college-contact {
  position: relative;
  margin-top: 10px;
}

.ack-text {
  width: 100%;
  padding: 10px;
  overflow-y: auto;
  display: inline-block;
  margin: var(--small-margin);
}

/* 
.links {
  display: flex;
  width: 100px;
  height: 30px;
  background-color: transparent;
  position: fixed;
}
 */
.messages{
  background-color: var(--motd-background);
  margin: calc(var(--large-margin)*2);
}

.card .card-header, .panel .card-header, .thumbnail .card-header, .well .card-header, .card .engr-card-header {
  background-color: var(--off-white);
}

.engr-accordion {
  margin-left: var(--accordion-margin);
  margin-right: calc(var(--accordion-margin)*2);
}

.engr-section {
  margin: var(--small-margin);
}

.mb-0.accordian-header {
  margin-top: 0px;
}