body {
    margin: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-image: url('/static/cat-svgrepo-com.svg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: contain;
  }

  .container {
    margin: 1rem;
    padding: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
  }

  .container_sm {
    margin: 0.8rem;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
  }

  .container h2 {
    margin-block-start: 0.2em;
    margin-block-end:  0.2em;    
  }

  .container h3 {
    margin-block-start: 0.2em;
    margin-block-end:  0.2em;    
  }

  .containermenu {
    margin: 1rem;
    padding: 0 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
  }
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto ;

  padding: 10px;
}
.grid-item {
  background-color: #00B0B9;
  border: none;
  padding: 10px;
  text-align: center;
}

  .tab {
    display: flex;
    flex-direction: column;
  }

  .tab-content {
    display: none;
  }

  .tab-content:target {
    display: block;
      background-image: url('/static/aleana_logo.svg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: contain;
  }

  .tab-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1rem;
    order: -1;
  }
  .tab-nav-bot {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #dee2e6;
    margin-top: 1rem;
    order: 10;
  }
  .tab-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    background: 0 0;
    border: 1px solid transparent;
    margin-bottom: -1px;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    font-size: 1.5em;
    -webkit-appearance: button;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
  }
  .tab-link-bot {
    display: block;
    padding: 0.5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    background: 0 0;
    border: 1px solid transparent;
    margin-top: -1px;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    font-size: 1.5em;
    -webkit-appearance: button;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
  }

  #gp:target~.tab-nav>[href="#gp"],
  #dp:target~.tab-nav>[href="#dp"],
  #p1:target~.tab-nav>[href="#p1"],
  #p2:target~.tab-nav>[href="#p2"]   {
    color: #000;
    /*background-color: #fff;*/
    border-color: #dee2e6 #dee2e6 #fff;
    cursor: default;
  }
  #gp:target~.tab-nav-bot>[href="#gp"],
  #dp:target~.tab-nav-bot>[href="#dp"],
  #p1:target~.tab-nav-bot>[href="#p1"],
  #p2:target~.tab-nav-bot>[href="#p2"]   {
    color: #000;
    /*background-color: #fff;*/
    border-color: #fff #dee2e6 #dee2e6 ;
    cursor: default;
  }

  .table {
	width: 100%;
	border: none;
	margin-bottom: 20px;
	background: white;
}
.table thead th {
	font-weight: bold;
	text-align: left;
	border: none;
	padding: 10px 15px;
	background: #d8d8d8;
	font-size: 14px;
}
.table thead tr th:first-child {
	border-radius: 8px 0 0 8px;
}
.table thead tr th:last-child {
	border-radius: 0 8px 8px 0;
}
.table tbody td {
	text-align: left;
	border: none;
	padding: 10px 15px;
	font-size: 14px;
	vertical-align: top;
}
.table tbody tr:nth-child(even){
	background: #f3f3f3;
}
.table tbody tr td:first-child {
	border-radius: 8px 0 0 8px;
}
.table tbody tr td:last-child {
	border-radius: 0 8px 8px 0;
}

div {
}
.divTable .divTableCell, .divTable .divTableHead {
}
.divTable .divTableHeading {
  }
.divTable .divTableHeading .divTableHead {
}
/* HTMLtable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableHead { display: table-cell; text-align: center; padding: 0px 20px;}
.divTableCell { display: table-cell; padding: 0px 20px;}

.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

.flashes{
    font-size: 20px;
    color:red;
}

/***** MODAL DIALOG ****/
#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:10vh;

	/* Sizing for visible dialog */
	width:80%;
	max-width:800px;
  height: fit-content;
	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:white;
	padding:20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}


/***** MODAL DIALOG long ****/
#modal_l {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal_l > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal_l > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:2vh;

	/* Sizing for visible dialog */
	width:80%;
	max-width:1600px;
  height: fit-content;
	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:white;
	padding:20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal_l.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal_l.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
}

nav {
	margin: 5px 0;
	margin-right: 70px;
	background-color: #f68d2e;
	display:inline-block;
}

nav ul {
	padding: 0;
  margin: 0;
	list-style: none;
	position: relative;
	}

nav ul li {
	display:inline-block;
	background-color: #f68d2e;
	}

nav a {
	display:block;
	padding:0 10px;
	color:#FFF;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover {
	background-color: #00B0B9;
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute;
	top: 60px; /* the height of the main nav */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
	width:200px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	left:200px;
}


/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' ⇩'; }
li > a:only-child:after { content: ''; }

#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 40px;
  z-index: 99;
  font-size: 30px;
  border: none;
  outline: none;
  background-color: #f68d2e;
  color: white;
  cursor: pointer;
  /*padding: 15px;*/
  border-radius: 4px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip .tooltiptext500  {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s;
}


.tooltip .tooltiptext900  {
  visibility: hidden;
  width: 900px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 0.7;
}

.tooltip:hover .tooltiptext500 {
  visibility: visible;
  opacity: 0.7;
}


.tooltip:hover .tooltiptext900 {
  visibility: visible;
  opacity: 0.7;
}

.modalbtn {
    display: inline-block;
    width: 100%;
    height: 50px;
    font-size: large;
}

.print_tasks_chbox {
    width:20px;
    height:20px;
    border-radius:5px;

}