/*
file creation 5/28/2016 - Laura Beatham 
this uses pure.css base, and adds on to the sidebar layout provided on the pure site.
added css items that build on tablesorter js and bootstrap for checkboxes
questrial
  rokkit
  lora
  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
  
  current colors: 
	 grey #373F51
     blueish grey #C6D8FF					  
	 purple: #2F3061
	 green: #59C9A5
	 blue: #71A9F7
     complementary to darker blue: 1C6E8C
     good color : 5ADBF5 pastel pink DFAEB4


  Last updated 11/4/2025 - Alexis Boucouvalas
  This is the most up-to-date sidenavbar.css at 54,420 size

  */

[data-theme="light"]{
    --page-color: #ffffff;
    --sub-header-color: #D95A3C;
    --header-color: #2F3061;
    --menu-toggle-color: rgba(27, 28, 61, 0.75);
    --menu-toggle-hover-color: #2F3061;
    --menu-arrow-color: #ddd;
    --function-box-border-color: #ddd;
    --content-subhead-color: #888;
    --overview-ul-color: #373F51;
    --button-color: #ffffff;
    --button-text-color: #2F3061;
    --button-font-weight: bold;
    --button-hover-color: #2F3061;
    --button-hover-text-color: #C6D8FF;
    --button-hover-border-color: #2F3061;
    --input-color: #ffffff;
    --input-text-color: #000000;
    --piechart-background-color: #ffffff;
    --piechart-text-color: #000000;
    --error-text-color: #B30024;
    /* --error-text-color: #FF0000; */

    /* Tables */
    --storage-management-collapse-box-color: #ffffff;
    --storage-management-collapse-box-text-color: #000000;
    --function-table-thead-color: #e0e0e0;
    --function-table-tbody-color: #ffffff;
    --function-table-odd-tbody-color: #ffffff;
	--function-table-even-tbody-color: #edf2fc;
    --funciton-table-thead-text-color: #000000;
    --funciton-table-tbody-text-color: #555;
    --function-table-list-color: #f9f9f9;
    --function-box-four-text-color: #000000;
    --function-box-five-tiny-p-color: #ffffff;
    --function-box-five-tiny-p-text-color: #000000;
    --accordion-header-default-color: #f6f6f6;
    --accordion-header-text-color: #000000;
    --accordion-header-active-color: #007fff;
    --accordion-content-color: #ffffff;

    /* Function Boxes */
    --function-box-one-color: #59C9A5;
    --function-box-two-color: #9085bf;
    --function-box-three-color: #C6D8FF;
    --function-box-special-four-color: #f9f9f9;
    --function-box-four-color: #71A9F7;
    --function-box-five-color: #a9bcd0;
    --function-box-text-color: #000000;
}


[data-theme="dark"]{
    /* --page-color: #2B2A4A; */
    --page-color: #1c1e41;
    --sub-header-color: #FF9871;
    --header-color: #ffffff;
    --menu-toggle-color: rgba(27, 28, 61, 0.75);
    --menu-toggle-hover-color: #2F3061;
    --menu-arrow-color: #ddd;
    --function-box-border-color: #1c1e41;
    --content-subhead-color: #ffffff;
    --overview-ul-color: #c9c9c9;
    --button-color: #333354;
    --button-text-color: #ffffff;
    --button-hover-color: #b7b5c7;
    --button-hover-text-color: #ffffff;
    --button-hover-border-color: #ffffff;
    --button-font-weight: normal;
    --input-color: #9492a6;
    --input-text-color: #000000;
    --piechart-background-color: #333354;
    --piechart-text-color: #ffffff;
    --error-text-color: #a30603;

    /* Tables */
    --storage-management-collapse-box-color: #4a4968;
    --storage-management-collapse-box-text-color: #ffffff;
    --function-table-thead-color: #333354;
    --function-table-tbody-color: #9492a6;
    --function-table-odd-tbody-color: #9492a6;
	--function-table-even-tbody-color: #b7b5c7;
    --funciton-table-thead-text-color: #ffffff;
    --funciton-table-tbody-text-color: #000000;
    --function-table-list-color: #9492a6;
    --function-box-four-text-color: #ffffff;
    --function-box-five-tiny-p-color: #333333;
    --function-box-five-tiny-p-text-color: #ffffff;
    --accordion-header-default-color: #333354;
    --accordion-header-text-color: #ffffff;
    --accordion-header-active-color: #333354;
    --accordion-content-color: #4a4968;

    /* Function Boxes */
    --function-box-one-color: #547d6e;
    --function-box-two-color: #534e7d;
    --function-box-three-color: #7c82a6;
    --function-box-special-four-color: #4a4968;
    --function-box-four-color: #5b6fa2;
    --function-box-five-color: #707792;
    --function-box-text-color: #ffffff;
}

/* Logo on the home page */
[data-theme="light"] #white-logo {
    visibility: hidden;
    height: 0;
}

[data-theme="light"] #regular-logo {
    visibility: visible;
    height: 100%;
}

[data-theme="dark"] #white-logo {
    visibility: visible;
    height: 100%;
}

[data-theme="dark"] #regular-logo {
    visibility: hidden;
    height: 0;
}



body{
    font-family: Questrial, Georgia;
    background-color: var(--page-color);
}

h1,
.page_header{
    font-size: 48px;
}
.page_header a{
    color: var(--header-color);
}
h2,
.page_subheader{
    font-size: 24px;
}
a {
    color: #2F3061;
}

h3,
h4,
h5, h6,
label {
	/* color: #000; */
    color: var(--button-text-color);
}
input{
    background-color: var(--input-color);
    color: var(--input-text-color);
}
select{
    background-color: var(--input-color) !important;
    color: var(--input-text-color);
}
textarea{
    background-color: var(--input-color);
    color: var(--input-text-color);
}

.pure-g [class*="pure-u"] {
    font-family: Questrial, Georgia;
}


.errortext {
    color: var(--error-text-color);
    font-weight: bold;
}


.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

.pure-menu-heading {
    display: flex;
    justify-content: center; /* Vertically centers the image within the container */
}
.pure-menu-heading .big-logo {
    height: 62px;
    width: 165px;
    padding: 0;
}

.user{
    white-space: normal; /* Ensures that the text wraps normally */
    text-align: center;
}

.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#condensed-menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: relative;
    padding-left: 0;
}

#layout.active #menu {
    left: 180px;
    width: 180px;
}

#layout.active .menu-link {
    left: 180px;
}
    
/* padding around  boxes*/

.l-box {
    padding: 0.5em 2em;
}    

#main{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: var(--page-color); */
}

/* HOME PAGE */
#operations-section{
    text-align: left;
    width: 100%;
    max-width: 1080px;
}
#overview-section{
    text-align: left;
    max-width: 1080px;
}
#overview-section ul{
    color: var(--overview-ul-color);
}
.piechart{
    display: flex;
    justify-content: center;
    max-width: 480px;
}
#columnchart_year_piechart{
    display: flex;
    justify-content: flex-start;
    max-width: 480px;
    position: relative;
    left: 8%;
}
#columnchart_end_piechart{
    display: flex;
    justify-content: flex-end;
    max-width: 480px;
}
#columnchart_center_piechart{
    display: flex;
    justify-content: center;
    max-width: 480px;
}
#columnchart_circtypemon_piechart{
    position: relative;
    left: 28%;
}
#pie-charts{
    background-color: var(--piechart-background-color);
    padding: 10px 15px;
    border-radius: 15px;
}
#pie-charts svg > rect:first-of-type{
    fill: transparent;
}
#pie-charts svg text{
    fill: var(--piechart-text-color)
}
#pie-charts svg > g:last-of-type text:last-of-type{
    fill: #000000;
}
#columnchart_circtypemon svg rect:first-of-type{
    fill: transparent;
}


/* REPORTING CHARTS & GRAPHS */
#pie-charts{
    background-color: var(--piechart-background-color);
}
#pie-charts .pure-u-md-1-2 svg > rect:first-of-type{
    fill: transparent;
}
#pie-charts .pure-u-md-1-1 svg > rect:first-of-type{
    fill: transparent;
}
#pie-charts svg text{
    fill: var(--piechart-text-color)
}
#pie-charts svg > g:last-of-type text:last-of-type{
    fill: #000000;
}


/* ADMIN SYSTEM & MODULE SETTINGS */
.ui-state-default{
    background-color: var(--accordion-header-default-color) !important;
    color: var(--accordion-header-text-color) !important;
}
.ui-state-active{
    background-color: var(--accordion-header-active-color) !important;
    border: none !important;
}
.ui-widget-content{
    background-color: var(--accordion-content-color);
    color: var(--input-text-color) !important;
    border: none;
}
.ui-widget-content .button-one{
    background-color: var(--button-color);
    color: var(--button-text-color) !important;
}
.ui-widget-content .button-one:hover{
    background-color: var(--button-hover-color);
    color: var(--button-hover-text-color);
}

/* STORAGE MANAGEMENT */
.storage-mngmt-thead th{
    position: sticky;
    top: 0;
}

/* USER TOOLS */
#caia-stacks-user-tools{
    background-color: #f9f9f9;
    color: #000000;
}


/* UNION HOLDINGS FORM */
.union_form_label{
    text-align: right;
}
.union_form_input{
    text-align: left;
    text-indent: 1em;
}

/* ALMA API PAGE */
.alma_form_label{
    text-align: right;
}
.alma_form_input{
    text-align: left;
    text-indent: 1em;
}
.alma_form_links{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#amla_url_key{
    text-align: center;
}


/*
 * -- FUNCTION TABLE WRAPPER --
 * This element wraps up all the function table elements
 */
 .function-tables,
 .information {
    max-width: 1080px;
    margin: 0 auto;
 }
.function-tables {
    margin-bottom: 3.125em;
    text-align: center;
	color: #373F51;
    
}

/*
 * -- FUNCTION TABLE  --
 * Every function table has the .function-table class
 */
.function-table {
    border: 1px solid;
    border-color: var(--function-box-border-color);
    margin: 0 0.5em 2em;
    padding: 0 0 1em;
}
.function-table thead tr{
    background-color: var(--function-table-thead-color);
    color: var(--funciton-table-thead-text-color);
}
.function-table thead th{
    background-color: var(--function-table-thead-color);
    color: var(--funciton-table-thead-text-color);
}
.function-table tbody tr{
    background-color: var(--function-table-tbody-color);
    color: var(--funciton-table-tbody-text-color) !important;
}
.function-table tbody tr:hover{
    background-color: #b8b7c4;
}
.function-table tbody td{
    /* background-color: var(--function-table-tbody-color); */
    color: var(--funciton-table-tbody-text-color) !important;
}

/* Apply color to the first row */
.everyOtherTable tbody tr:nth-child(odd){
    background-color: var(--function-table-odd-tbody-color) !important;
}
/* Apply a different color to the next row */
.everyOtherTable tbody tr:nth-child(even){
    background-color: var(--function-table-even-tbody-color) !important;
}

/*
 * -- FUNCTION BOX HEADER COLORS --
 * Choose a different color based on the type of box.
 */
.function-box-one  {
    background: var(--function-box-one-color);
	min-height: 250px;
	color:  var(--function-box-text-color);
    border-radius: 15px;
}
.function-box-one h3, label{
    color:  var(--function-box-text-color);
}

.function-box-two  {
    background: var(--function-box-two-color);
	min-height: 250px;
	color:  var(--function-box-text-color);
    border-radius: 15px;
}
.function-box-two h3, label{
    color:  var(--function-box-text-color);
}

.function-box-three  {
    background: var(--function-box-three-color);
	min-height: 250px;
	color:  var(--function-box-text-color);;
    border-radius: 15px;
}
.function-box-three h3, label{
    color:  var(--function-box-text-color);
}
.function-box-three .pure-u-md-1-2 b label{
    color:  var(--function-box-text-color);
}
  
.function-box-four  {
    background: var(--function-box-special-four-color);
	color: var(--function-box-four-text-color);
    border-radius: 15px;
}	
.function-box-four label{
    color: var(--function-box-four-text-color);
}
.function-box-four h3, .function-box-four h4{
    color: var(--function-box-four-text-color);
}
.function-box-four .pure-u-md-3-4 p b{
    font-weight: var(--button-font-weight) !important;
}

.function-box-five  {
    background: var(--function-box-five-color);
	color:  #000000;
    border-radius: 15px;
}
.function-box-five h3, label{
    color:  #000000;
}

/**legacy series**/
.function-box-six  {
    background: #F2E29F;
	color: black;
    border-radius: 15px;
}

.function-box-seven  {
    background: #FC814A;
	color: black;
    border-radius: 15px;
}

.function-box-eight  {
    background: #75B9BE;
	color: black;
    border-radius: 15px;
}
  
.function-box-nine  {
    background: #8DA9C4;
	color: black;
    border-radius: 15px;
}	

.function-box-errors  {
    background: #FF3030;
	color: black;
	font-weight: bold;
}

.function-box-execute  {
    background: #71A9F7;
	color: black;
	font-weight: bold;
}	

.function-box-alert  {
    background: #FDE64B;
	color: black;
	font-weight: bold;
}	

.function-box-one-short  {
    background: var(--function-box-one-color);
	min-height: 150px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-one-short h3, label{
    color:  #000000;
}

.function-box-two-short  {
    background: var(--function-box-two-color);
	min-height: 150px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-two-short h3, label{
    color:  #000000;
}

.function-box-three-short  {
    background: var(--function-box-three-color);
	min-height: 150px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-three-short h3, label{
    color:  #000000;
}


.function-box-four-short  {
    background: var(--function-box-four-color);
	min-height: 150px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-four-short h3, label{
    color:  #000000;
}

.function-box-five-short  {
    background: var(--function-box-five-color);
	min-height: 150px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-five-short h3, label{
    color:  #000000;
}

.function-box-six-short  {
    background: #F2E29F;
	min-height: 150px;
	color: black;
    border-radius: 15px;
}

.function-box-seven-short  {
    background: #FC814A;
	min-height: 150px;
	color: black;
    border-radius: 15px;
}

.function-box-one-tall  {
    background: var(--function-box-one-color);
	min-height: 350px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-one-tall h3, label{
    color:  #000000;
}

.function-box-two-tall {
    background: var(--function-box-two-color);
	min-height: 350px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-two-tall h3, label{
    color:  #000000;
}

.function-box-three-tall  {
    background: var(--function-box-three-color);
	min-height: 350px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-three-tall h3, label{
    color:  #000000;
}

.function-box-four-tall  {
    background: var(--function-box-four-color);
	min-height: 350px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-four-tall h3, label{
    color:  #000000;
}

.function-box-five-tall  {
    background: var(--function-box-five-color);
	min-height: 350px;
	color:  #000000;
}

.function-box-six-tall  {
    background: #F2E29F;
	min-height: 350px;
	color: black;
    border-radius: 15px;
}

.function-box-seven-tall  {
    background: #FC814A;
	min-height: 350px;
	color: black;
    border-radius: 15px;
}

.function-box-one-tiny  {
    background: var(--function-box-one-color);
	min-height: 10px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-one-tiny h3, label{
    color:  #000000;
}

.function-box-two-tiny  {
    background: var(--function-box-two-color);
	min-height: 10px;
	color:  #000000;
	vertical-align: center;
    border-radius: 15px;
}
.function-box-two-tiny h3, label{
    color:  #000000;
}

.function-box-three-tiny  {
    background: var(--function-box-three-color);
	min-height: 10px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-three-tiny h3, label{
    color:  #000000;
}


.function-box-four-tiny  {
    background: var(--function-box-four-color);
	min-height: 10px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-four-tiny h3, label{
    color:  #000000;
}

.function-box-five-tiny  {
    background: var(--function-box-five-color);
	min-height: 10px;
	color:  #000000;
    border-radius: 15px;
}
.function-box-five-tiny h3, label{
    color:  #000000;
}
/* .fu
.function-box-one h3, label{
    color:  #000000;
}nction-box-five-tiny p{
    background-color: var(--function-box-five-tiny-p-color) !important;
    color: var(--function-box-five-tiny-p-text-color) !important;
}
.function-box-five-tiny p label{
    color: var(--function-box-five-tiny-p-text-color) !important;
} */


.function-box-six-tiny  {
    background: #F2E29F;
	min-height: 10px;
	color: black;
    border-radius: 15px;
}

.function-box-seven-tiny  {
    background: #FC814A;
	min-height: 10px;
	color: black;
    border-radius: 15px;
}

.function-box-fourwhite-tiny  {
    background: #ffffff;
	min-height: 40px;
	color: black;
    border-radius: 15px;
}

.function-box-caiapurple  {
    background: #2F3061;
	min-height: 40px;
    color: #C6D8FF;
    border-radius: 15px;
}


/*
 * -- FUNCTION TABLE LIST --
 * Each table has a <ul> which is denoted by the .function-table-list class
 */
.function-table-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}


/*
 * -- FUCNTION TABLE LIST ELEMENTS --
 * Styles for the individual list elements within each function table
 */
.function-table-list li {
    padding: 0.15em 0;
    background-color: var(--function-table-list-color);
    border-bottom: 1px solid #e7e7e7;
}
.function-table-list a{
    color: #000000 !important;
}


/*
The content `<div>` is where all your content goes.
*/
.content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 1100px;
    line-height: 1.6em;
    margin-bottom: 50px;
    width: 100%;
    box-sizing: border-box;
}

.headerindex {
    margin: 0;
    color: var(--header-color);
    text-align: center;
    padding: 2.5em 2em 0;
    border-bottom: 1px solid #eee;
}

.headerindex  h2 {
    font-weight: 400;
    color: var(--sub-header-color);

    padding: 0;
    margin-top: 0;
}

.header {
     margin: 0;
     color: var(--header-color);
     text-align: center;
	 padding: .5em .5em 0;
     border-bottom: 1px solid #eee;
     margin-bottom: 20px;
 }
.header h1 {
    margin: 0.2em 0;
    font-size: 3em;
    font-weight: 300;
}
.header h2 {
    font-weight: 400;
    color: var(--sub-header-color);

    padding: 0;
    margin-top: 0;
}

.content-subhead {
    margin: 20px 0 20px 0;
    font-weight: 300;
    color: var(--content-subhead-color);
}

/** primary button **/
a.pure-button-primary
.pure-button-primary {
    background: #2F3061;
    color: white;
    border-radius: 5px;
    font-size: 120%;
}

/*
 * -- Button with rounded edges --
 * This inherits from Pure Button.
 */
.button-choose {
    border: 1px solid #ccc;
    background-color: var(--button-color);
    color: var(--button-text-color);
    border-radius: 2em;
	font-size: 80%;
    font-weight: var(--button-font-weight);
    position: relative;
}

.button-main {
    border: 1px solid #ccc;
    background-color: var(--button-color);
    color: var(--button-text-color);
    border-radius: 2em;
	font-size: 80%;
    font-weight: var(--button-font-weight);
    position: relative;
	width: 150px;
}

.button-med {
    border: 1px solid #ccc;
    background-color: var(--button-color);
    color: var(--button-text-color);
    border-radius: 2em;
	font-size: 80%;
    font-weight: var(--button-font-weight);
    position: relative;
	width: 180px;
}

.button-long {
    border: 1px solid #ccc;
    background-color: var(--button-color);
    color: var(--button-text-color);
    border-radius: 2em;
	font-size: 80%;
    font-weight: var(--button-font-weight);
    position: relative;
	width: 225px;
}

.button-long-grey {
    border: 1px solid #ccc;
    background: #cdcdcd;
    color: #2F3061;
    border-radius: 2em;
	font-size: 80%;
    font-weight: var(--button-font-weight);
    position: relative;
	width: 225px;
}

.button-one {
    border: 1px solid #ccc;
    background-color: var(--button-color);
    color: var(--button-text-color) !important;
    border-radius: 2em;
	font-size: 80%;
    font-weight: var(--button-font-weight);
    position: relative;
}
.button-one:hover{
    background-color: var(--button-hover-color);
    color: var(--button-hover-text-color) !important;
}

/*used in tables that have an overall font size shrink*/
.button-small {
    border: 1px solid #ccc;
    background: #cdcdcd;
    color: #000;
    border-radius: 2em;
	font-size: 85%;
    font-weight: var(--button-font-weight);
    position: relative;
    bottom: -.5em;
}

button:focus,
button:hover {
    /*
    border: 1px solid #C6D8FF;
    background: #C6D8FF;
    color: #2F3061;
    */
    border: 1px solid var(--button-hover-border-color);
    background: var(--button-hover-color);
    color: var(--button-hover-text-color);
}

/* the +/- button in storage management */
.toggle-btn{
    background: transparent;
    border: none;
}
.toggle-btn:hover, .toggle-btn:focus{
    border: none; /* Reset the border */
    background: transparent; /* Reset the background */
    color: inherit; /* Reset the color to the inherited value */
    outline: none; /* Remove the focus outline */
}
.container-title{
    text-align: right;
}
#collapse-box{
    background-color: var(--storage-management-collapse-box-color);
    color: var(--storage-management-collapse-box-text-color);
    border: none !important;
}
#collapse-box b{
    font-weight: var(--button-font-weight);
}
#collapse-box .btn-default{
    background-color: transparent;
    color: transparent !important;
    border: none;
}

.toggle-label{
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: -25px !important;
    margin-left: 10px !important;
    background-color: #dddddd;
    color: #000000 !important;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}
/* Animated layer */
.toggle-label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2F3061;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
    z-index: -1;
}
/* When checked, scale background in from left */
.toggle-input:checked + .toggle-label::after {
    transform: scaleX(1);
}
/* Change text color when checked */
.toggle-input:checked + .toggle-label {
    color: #ffffff !important;
}
/*************************************TABLES OVERRIDE********************************/
.pure-table-basic td, .pure-table-basic th {
    padding: .25em .25em;
	font-size: 80%;
}

.pure-table-horizontal {

	font-size: 90%;

}

.pure-table-horizontal tbody {

	background-color: #ffffff;
    padding: .25em .25em;

}
.pure-table-horizontal thead {

	text-align: center;

}

.pure-table-horizontal .pure-hcenter {

	text-align: center;

}

.pure-table-horizontal .pure-hright {

	text-align: right;

}

.pure-table-hzwide {

	font-size: 85%;

}

.pure-table-hzwide tbody {

	background-color: #ffffff;
    padding: .15em .15em;

}
.pure-table-hzwide thead {

	text-align: center;

}

.pure-table-hzwide .pure-hcenter {

	text-align: center;

}

.pure-calendar tbody {

	background-color: #ffffff;
	border: 1px solid;
	padding: 0em;
}

.pure-calendar thead {

	background-color: #dddddd;
	border: 1px solid;
}

.pure-calendar td, tr, table {

	border: 1px solid;
	font-size: 95%;
}

.pure-clean-lines {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 0px solid #cbcbcb;
}

.pure-clean-lines td, .pure-clean-lines th {
    padding: .25em .25em;
	border: 0px;
}

.pure-clean-lines td.clean-label {

	text-align:right;
}

/**************************************FORMS OVERRIDE ********************************/
.pure-form input[type="text"]:focus, .pure-form input[type="password"]:focus, .pure-form input[type="email"]:focus, .pure-form input[type="url"]:focus, .pure-form input[type="date"]:focus, .pure-form input[type="month"]:focus, .pure-form input[type="time"]:focus, .pure-form input[type="datetime"]:focus, .pure-form input[type="datetime-local"]:focus, .pure-form input[type="week"]:focus, .pure-form input[type="number"]:focus, .pure-form input[type="search"]:focus, .pure-form input[type="tel"]:focus, .pure-form input[type="color"]:focus, .pure-form select:focus, .pure-form textarea:focus {
    outline: 0;
    border-color: #2F3061;
}

.pure-form input[type="text"], .pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form select, .pure-form textarea {
    padding: .15em .15em;
	
}

.pure-form select {
    height: 1.75em;
    border: 1px solid #ccc;
    background-color: #fff;
}

.function-tables .pure-form-aligned .pure-control-group label {
    display: inline;
}

.toggle.btn {
    min-width: 68px;
    min-height: 34px;
}

.toggle-on.btn {
    padding-right: 1px;
	background: #2F3061;
	border: 1px solid #ccc;
	color: #fff !important;

}

.toggle-off.btn {
    padding-left: 1px;
	border: 1px solid #ccc;
	background: #dddddd;

}


/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

#menu {
    display: flex;
    flex-direction: column;
    margin-left: -180px; /* "#menu" width */
    width: 180px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #191818;
    background: #2F3061;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu .pure-menu-link {
    color: #C6D8FF;
    border: none;
    padding: 0.6em 0 0.6em 0.6em;
    text-align: left;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
    #menu .pure-menu,
    #menu .pure-menu ul {
    border: none;
    background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu .pure-menu-list,
#menu .pure-menu .menu-item-divided {
    border-top: 1px solid #C6D8FF;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu .pure-menu-item .pure-menu-link:hover,
#menu .pure-menu .pure-menu-item .pure-menu-link:focus {
    background: #C6D8FF;
    color: #2F3061;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
    background: #2F3061;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
    color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
    font-size: 110%;
    color: #C6D8FF;
    margin: 0;
}
#menu .caiacollab_btn{
    width: 100%;
    background-color: transparent;
    color: #C6D8FF;
    border: none;
    outline: none;
    padding: 8px 0;
    font-size: 18px;
}
#menu .caiacollab_btn:hover{
    background-color: #C6D8FF;
    color: #2F3061;
}
#menu .pure-copyright {
    position: fixed;
    color: #C6D8FF;
    font-size: 10.5px;
    bottom: 2px;
    width: 180px;
    text-align: center;
}
@media (max-height: 770px) {
    #menu .pure-copyright{
        position: relative;
    }
}
center{
    width: 100%;
}


/* MOBILE MENU */

/* Just the flame from CAIA logo */
.mobile-logo{
    width: 140px;
}
#mobile-menu .pure-menu-heading{
    padding: 10px 0px !important;
}
#mobile-menu {
    display: none; /* mobile menu is hidden by default */
}
#mobile-menu .pure-menu-list{
    padding-left: 15px;
    padding-top: 10px;
}
#mobile-menu .pure-menu-item:hover #dropdown-menu{
    margin-left: 40px;
    margin-top: -28.2px;
    min-height: 27px;
    width: 175px;
}
#mobile-menu .pure-menu-item:hover #long-dropdown-menu{
    margin-left: 40px;
    margin-top: -28.2px;
}
#mobile-reporting-long-dropdown-menu{
    margin-left: 40px;
    margin-top: -245px;
}
#mobile-circ-long-dropdown-menu{
    margin-top: -28.2px;
    margin-left: 40px;
}
.mobile_caiacollab_btn{
    width: 100%;
    background-color: transparent;
    color: #C6D8FF;
    border: none;
    outline: none;
    padding: 5px 0;
    font-size: 15px;
}
.mobile_caiacollab_btn:hover{
    background-color: #C6D8FF;
    color: #2F3061;
    border: none;
    outline: none;
}
.mobile_caiacollab_btn .caiacollab_btn_text{
    display: none;
}
.mobile_caiacollab_btn:hover .caiacollab_btn_text{
    display: flex !important;
    align-items: center;
    position: fixed;
    margin-top: -21px;
    margin-left: 39px;
    padding: 6px 5px 5px 5px;
    font-size: 15px;
    background-color: #C6D8FF;
    color: #2F3061;
}
#mobile-menu .pure-copyright {
    color: #C6D8FF;
    bottom: 2px;
    width: 200px;
    text-align: center;
    font-size: 12px;
}
/* @media (max-height: 535px) {
    #mobile-menu .pure-copyright{
        position: relative;
    }
} */
/*
All anchors inside the menu should be styled like this.
*/
#mobile-menu .pure-menu-link {
    font-size: 14px;
    width: 185px;
    padding: 6px 0px;
    color: #C6D8FF;
    border: none;
}
/*
Remove all background/borders, since we are applying them to #mobile-menu.
*/
#mobile-menu .pure-menu,
#mobile-menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#mobile-menu .pure-menu .pure-menu-list,
#mobile-menu .pure-menu .menu-item-divided {
    border-top: 1px solid #C6D8FF;
}
/*
Change color of the anchor links on hover/focus.
*/
#mobile-menu .pure-menu .pure-menu-item .pure-menu-link:hover,
#mobile-menu .pure-menu .pure-menu-item .pure-menu-link:focus {
    background: #C6D8FF;
    color: #2F3061;
}
/*
This styles the selected menu item `<li>`.
*/
#mobile-menu .pure-menu-selected,
#mobile-menu .pure-menu-heading {
    background: #2F3061;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#mobile-menu .pure-menu-selected a {
    color: #fff;
}
/*
This styles the menu heading.
*/
#mobile-menu .pure-menu-heading {
    font-size: 110%;
    color: #C6D8FF;
    margin: 0;
    padding: 10px;
}




/* CONDENSED MENU */

/* Just the flame from CAIA logo */
.small-logo{
    width: 45px;
    height: 45px;
}

#condensed-menu {
    display: none; /* Condensed menu is hidden by default */
}
#condensed-menu .pure-menu-item:hover #dropdown-menu{
    margin-left: 75px;
    margin-top: -41.2px;
    min-height: 41px;
}
#condensed-menu .pure-menu-item:hover #long-dropdown-menu{
    margin-left: 75px;
    margin-top: -41.2px;
}
#condensed-reporting-long-dropdown-menu{
    margin-left: 75px;
    margin-top: -371px;
}
#condensed-circ-long-dropdown-menu{
    margin-top: -41.2px;
    margin-left: 75px;

}
.condensed_caiacollab_btn{
    width: 100%;
    background-color: transparent;
    color: #C6D8FF;
    border: none;
    outline: none;
    padding: 8px 0;
    font-size: 18px;
}
.condensed_caiacollab_btn:hover{
    background-color: #C6D8FF;
    color: #2F3061;
    border: none;
    outline: none;
}
.condensed_caiacollab_btn .caiacollab_btn_text{
    display: none;
}
.condensed_caiacollab_btn:hover .caiacollab_btn_text{
    display: flex !important;
    align-items: center;
    position: fixed;
    margin-top: -27px;
    margin-left: 72px;
    padding: 8px;
    font-size: 18px;
    background-color: #C6D8FF;
    color: #2F3061;
}
#condensed-menu .pure-copyright {
    position: fixed;
    color: #C6D8FF;
    bottom: 2px;
    width: 75px;
    text-align: center;
    font-size: 10.5px;
}
@media (max-height: 770px) {
    #condensed-menu .pure-copyright{
        position: relative;
    }
}
/*
All anchors inside the menu should be styled like this.
*/
#condensed-menu .pure-menu-link {
    font-size: 20px;
    width: 75px;
    padding: 10px 0px;
    text-align: center;
    color: #C6D8FF;
    border: none;
}

/*
Remove all background/borders, since we are applying them to #condensed-menu.
*/
#condensed-menu .pure-menu,
#condensed-menu .pure-menu ul {
border: none;
background: transparent;
}

/*
Add that light border to separate items into groups.
*/
#condensed-menu .pure-menu .pure-menu-list,
#condensed-menu .pure-menu .menu-item-divided {
    border-top: 1px solid #C6D8FF;
}
/*
Change color of the anchor links on hover/focus.
*/
#condensed-menu .pure-menu .pure-menu-item .pure-menu-link:hover,
#condensed-menu .pure-menu .pure-menu-item .pure-menu-link:focus {
    background: #C6D8FF;
    color: #2F3061;
}

/*
This styles the selected menu item `<li>`.
*/
#condensed-menu .pure-menu-selected,
#condensed-menu .pure-menu-heading {
    background: #2F3061;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#condensed-menu .pure-menu-selected a {
    color: #fff;
}

/*
This styles the menu heading.
*/
#condensed-menu .pure-menu-heading {
    font-size: 110%;
    color: #C6D8FF;
    margin: 0;
    /* padding: 10px; */
}



/* REGULAR DROPDOWN MENU */
.pure-menu-item{
    list-style: none; /* Gets rid of the bullet points */
}
.pure-menu-item #dropdown-menu{
    display: none; /* Hidden by default */
}
.pure-menu-item #dropdown-menu-contents{
    padding: 0;
    border: none;
}
.pure-menu-item:hover #dropdown-menu{
    display: flex;
    flex-direction: column;
    width: 360px;
    position: fixed;
    z-index: 1000;
    margin-left: 180px;
    margin-top: -37.2px; /* The top of the dropdown lines up with the top of the .pure-menu-item */
    background-color: #C6D8FF;
    border-top: 1px solid #2F3061;
    border-bottom: 1px solid #2F3061;
    border-right: 1px solid #2F3061;
}
#dropdown-menu-item{
    list-style: none;  /* Gets rid of the bullet points */  
}
#dropdown-menu-link{
    display: flex;
    text-decoration: none;
    color: #2F3061;
    text-align: left;
    font-size: 14px;
    white-space: normal;
    padding: 5px 0px 5px 5px;
    width: 355px;
}
#dropdown-menu-link:hover{
    color: #C6D8FF;
    background-color: #2F3061;
}
#needs-space{
    margin-left: 5px;
}
#mobile-menu #dropdown-menu-link{
    padding: 2px 0px 2px 2px;
    width: 173px;
}


/* LONG DROPDOWN MENU */
.pure-menu-item .long-dropdown-menu{
    display: none;
}
.pure-menu-item #long-dropdown-menu-contents{
    padding: 0;
    border: none;
}
.pure-menu-item:hover .long-dropdown-menu{
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: fixed;
    z-index: 1000;
    margin-left: 180px;
    margin-top: -37.2px;
    background-color: #C6D8FF;
    border-top: 1px solid #2F3061;
    border-bottom: 1px solid #2F3061;
    border-right: 1px solid #2F3061;
}
#long-dropdown-menu-item{
    list-style: none;    
}
#long-dropdown-menu-link{
    display: flex;
    text-decoration: none;
    color: #2F3061;
    text-align: left;
    font-size: 14px;
    white-space: normal;
    padding: 5px;
}
#long-dropdown-menu-link:hover{
    color: #C6D8FF;
    background-color: #2F3061;
}
#mobile-menu #long-dropdown-menu-link{
    padding: 2px;
}
.topic{
    margin: 0;
    color: #2F3061;
    font-weight: bold;
    padding: 5px;
}
#mobile-menu .topic{
    padding: 2px;
}
.groups{
    display: flex;
}
.group{
    padding-right: 15px;
}
#mobile-menu .group{
    padding-right: 5px;
}
/* This one is extremely long so the top of this lines up with the top of the menu */
.pure-menu-item:hover #reporting-long-dropdown-menu{
    margin-top: -381px;
}
/* ADMIN DROPDOWN */
#mobile-menu .pure-menu-item:hover #admin-long-dropdown-menu{
    margin-top: -138px;
    margin-left: 40px;
}
#condensed-menu .pure-menu-item:hover #admin-long-dropdown-menu{
    margin-top: -196px;
    margin-left: 75px;
}
#menu .pure-menu-item:hover #admin-long-dropdown-menu{
    margin-top: -227px;
    margin-left: 180px;
}
/* ACCESSION DROPDOWN */
#mobile-menu .pure-menu-item:hover #accession-long-dropdown-menu{
    margin-top: -56px;
    margin-left: 40px;
}
#condensed-menu .pure-menu-item:hover #accession-long-dropdown-menu{
    margin-top: -42px;
    margin-left: 75px;
}
#menu .pure-menu-item:hover #accession-long-dropdown-menu{
    margin-top: -128px;
    margin-left: 180px;
}
/* INVENTORY DROPDOWN */
#mobile-menu .pure-menu-item:hover #inv-long-dropdown-menu{
    margin-top: -136px;
    margin-left: 40px;
}
#condensed-menu .pure-menu-item:hover #inv-long-dropdown-menu{
    margin-top: -207px;
    margin-left: 75px;
}
#menu .pure-menu-item:hover #inv-long-dropdown-menu{
    margin-top: -236px;
    margin-left: 180px;
}

/* Get the menu item link to still be highlighted when the dropdown is being hovered over */
.pure-menu-item:hover > .pure-menu-link,
.pure-menu-item:hover .dropdown-menu:hover > .pure-menu-link,
.pure-menu-item:hover .dropdown-menu:hover > .pure-menu-link {
    background-color: #C6D8FF;
    color: #2F3061;
}
.pure-menu-item:hover .pure-menu-link,
.pure-menu-item .dropdown-menu:hover .pure-menu-link {
    background-color: #C6D8FF;
    color: #2F3061;
}
.pure-menu-item:hover .pure-menu-link {
    background-color: #C6D8FF !important;
    color: #2F3061 !important;
}
.pure-menu-item .dropdown-menu:hover .pure-menu-link {
    background-color: #C6D8FF !important;
    color: #2F3061 !important;
}


/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    background: rgba(27, 28, 61, 0.75);
    border: none;
    font-size: .750em;
    z-index: 10;
    width: 40px;
    height: 40px;
    text-decoration: none;
}
#right-arrow-icon{
    color: var(--menu-arrow-color);
}
#left-arrow-icon{
    color: var(--menu-arrow-color);
}
#toggle-condensed-menu,
#toggle-large-menu {
    background: var(--menu-toggle-color) !important;
}
#toggle-condensed-menu:hover,
#toggle-large-menu:hover {
    background: var(--menu-toggle-hover-color) !important;
}
.menu-icon{
    color: #ddd;
    font-size: 25px;
}

.mobile-menu-link {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    background: rgba(27, 28, 61, 0.75);
    border: none;
    font-size: .750em;
    z-index: 10;
    width: 30px;
    height: 30px;
    text-decoration: none;
}
#toggle-mobile-menu,
#toggle-no-menu {
    background: var(--menu-toggle-color) !important;
}
#toggle-mobile-menu:hover,
#toggle-no-menu:hover {
    background: var(--menu-toggle-hover-color) !important;
}
.mobile-menu-icon{
    color: #ddd;
    font-size: 24px;
}


/**tablesorter**/

.ui-datepicker {

	background: #f9f9f9;
}

.ui-datepicker-calendar {

	text-align:center;
}

.ui-datepicker-month, 
.ui-datepicker-year {

	color: #000;
}

.ui-datepicker table {

	border-color:black;
}

.ui-widget-header {

	background-color: #2F3061;
	color:#C6D8FF;
	font-family: Questrial, Georgia;
}

.ui-widget-content {

font-family: Questrial, Georgia; 
}

/**time out**/
/* Timeout Dialog Styles */
.timeout-dialog {
  padding: 15px;
  position: absolute;
  background: #eeeeee url("../imgs/timeout-icon.png") no-repeat 15px 25px;
  border: 1px solid #ffffff;
  -webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.timeout-dialog .ui-dialog-title {
  font-size: 16px;
  font-weight: bold;
  display: block;
  padding: 0 0 15px 0;
  margin-left: 80px;
}
.timeout-dialog .ui-dialog-titlebar-close {
  display: none;
}
.timeout-dialog .ui-dialog-buttonpane {
  margin-top: 15px;
}
.timeout-dialog  ~ .ui-widget-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  filter: alpha(opacity=40);
  -khtml-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
}
.timeout-dialog p {
  margin: 0 0 5px 80px;
}
#timeout-keep-signin-btn {
  color: #FFF;
  background-color: #0f5895;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#377bb2), to(#0f5895));
  background-image: -moz-linear-gradient(top, #377bb2, #0f5895);
  background-image: -ms-linear-gradient(top, #377bb2, #0f5895);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #377bb2), color-stop(100%, #0f5895));
  background-image: -webkit-linear-gradient(top, #377bb2, #0f5895);
  background-image: -o-linear-gradient(top, #377bb2, #0f5895);
  background-image: linear-gradient(top, #377bb2, #0f5895);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#377bb2', endColorstr='#0f5895', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #ffffff;
  text-shadow: none;
  margin: 5px 10px 5px 0;
}
#timeout-sign-out-button {
  color: #FFF;
  background-color: #e6e6e6;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #000000;
  text-shadow: none;
  margin: 5px 0;
}
#timeout-countdown {
  font-weight: bold;
}
#sessionTimeoutWarning{
    background-color: white;
}


/* STYLES FOR THE DELETE POPUP */
.delete-text-popup{
    height: fit-content !important;
}
.delete-text-popup p{
    margin: 0 !important;
}
.bottom-delete-text{
    margin-top: 10px !important;
}
.ui-dialog-buttonpane{
    background-color: #ffffff;
}
.ui-dialog-buttonpane .ui-button{
    background-color: #2F3061 !important;
    color: #C6D8FF !important;
}
.ui-dialog-buttonpane .ui-button:hover{
    background-color: #252440 !important;
}
.ui-dialog-titlebar .ui-dialog-titlebar-close{
    display: none;
}
.trash-delete-button{
    font-size: 16px;
    color: #252440;
    cursor: pointer;
}


/* View Address Page -> Address Table  */
.view-address-address-table thead td{
    background-color: #CDCDCD !important;
    border: none !important;
}
.view-address-address-table thead tr{
    border: none !important;
}
.view-address-address-table thead{
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}
.view-address-address-table{
    border: none !important;
}


/* CALENDER */
.ui-datepicker-month{
    background-color: white !important;
}
.ui-datepicker-year{
    background-color: white !important;
}
td .ui-state-default{
    background-color: white !important;
    color: black !important;
}



/* JOBS */
#collapsed-left-content{
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 50px;
}
#collapsed-left-content .button-main{
    width: 75px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#collapsed-content{
    display: flex;
    justify-content: center;
}
#collapsed-right-content{
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 50px;
}
#collapsed-right-content .button-main{
    width: 75px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#collapsed-right-content b{
    display: flex;
}
#expanded-right-content #collapse{
    margin-top: 25px;
}
.job-btn-stack{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.job-btn-stack:hover .tooltip{
    display: block;
}
.tooltip{
    display: none;
    position: absolute;
    background-color: #000;
    color: white;
    border-radius: 15px;
    font-size: 12px;
    text-align: center;
    width: 100px;
    transform: translateY(45px);
    padding: 10px;
    z-index: 1000;
    line-height: 14px;
}


/* -- Responsive Styles (Media Queries) ------------------------------------- */
@media (max-width: 78em) {
    .view-item-three-boxes{
        width: 50%;
    }
}

@media (max-width: 72em) {
    .view-container-two-boxes{
        width: 100%;
    }
}

@media (max-width: 70em) {
    .page_header{
        font-size: 36px;
    }
    .page_subheader{
        font-size: 18px;
    }

    /* MENUS */
    #condensed-menu {
        display: flex; /* Only shows up when the screen is smaller */
        flex-direction: column;
        width: 75px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000; /* so the menu or its navicon stays above all content */
        background: #191818;
        background: #2F3061;
        overflow-y: auto;
    }
    #menu{
        display: none; /* Only shows up when the screen is larger */
    }

    /* TABLES */
    .pure-table-hzwide {
        border: 0;
        width: 90%;
    }
    .pure-table-hzwide thead {
        display: none;
    }
    .pure-table-hzwide tr {
        margin-bottom: 10px;
        display: block;
        border-bottom: 2px solid #ddd;
    }
    .pure-table-hzwide td {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;    
    }
    .pure-table-hzwide .pure-hcenter {
        text-align: right;
    }
    .pure-table-hzwide td:last-child {
        border-bottom: 2;
    }
    .pure-table-hzwide td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
}

@media (max-width: 68em) {
    .view-item-search-boxes {
        width: 100%;
    }
}

@media (max-width: 65em) {
    .view-item-three-boxes{
        width: 100%;
    }
    .view-address-two-boxes{
        width: 100%;
    }
    #myTableItems thead{
        display: none;
    }
    #myTable thead{
        display: none;
    }
    .view-address-address-table tbody td[data-label]:before {
        color: #469;
        font-size: .9em;
        content: attr(data-label);
        width: 50%;
        white-space: pre-wrap;
        text-align: bottom;
        display: inline-block;
    }
}

@media (max-width: 55em) {
    .view-container-two-boxes .pure-table .pure-table-horizontal{
        font-size: 75%;
    }
}

@media (max-width: 48em) {
    .page_header{
        font-size: 24px;
    }
    .page_subheader{
        font-size: 14px;
    }

    /* UNION HOLDINGS */
    .form_heading{
        font-size: 18px;
    }
    .union_form_content{
        display: flex;
    }
    #union_holdings_form{
        display: inline-grid;
    }
    .union_form_checkbox{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .union_form_label{
        margin-right: 10px;
        width: fit-content;
        white-space: nowrap;
        text-align: justify;
    }
    .union_form_input{
        text-align: end;
    }

    /* ALMA API */
    .alma_url_key_input{
        width: 60%;
        font-size: 8px;
    }
    .accession_workflow{
        margin-bottom: 20px;
    }
    .accession_workflow_img{
        margin-top: 20px;
    }
    .alma_form_content{
        display: flex;
        width: 90%;
        font-size: 12px;
    }
    .edit_config{
        margin-top: 20px;
        font-size: 12px;
    }
    .alma_form_links{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        font-size: 12px;
    }
    .alma_form_link{
        display: flex;
        justify-content: center;
    }
    #alma_api_form{
        display: inline-grid;
        justify-items: center;
    }
    .alma_form_label{
        width: fit-content;
        white-space: nowrap;
    }
    .alma_form_input{
        text-align: end;
    }
    #alma_stream{
        font-size: 12px;
    }
}

@media (max-width: 41em) {
    /* ALMA API */
    .alma_form_content{
        font-size: 8px;
    }
    #alma_stream{
        font-size: 8px;
    }

    /* UNION HOLDINGS */
    #union_holdings_form{
        font-size: 12px;
    }

    /* DROPDOWNS */
    #long-dropdown-menu-link{
        font-size: 10px;
    }
    #dropdown-menu-link{
        font-size: 10px;
    }
    .topic{
        font-size: 12px;
    }
    
}


@media (max-width: 33em){
    /* UNION HOLDINGS */
    #union_holdings_form{
        font-size: 10px;
    }

    /* DROPDOWNS */
    #long-dropdown-menu-link{
        font-size: 8px;
    }
    #dropdown-menu-link{
        font-size: 8px;
    }
    .topic{
        font-size: 10px;
    }
}


@media (max-width: 480px) {
    .page_header{
        font-size: 18px;
    }
    .page_subheader{
        font-size: 10px;
    }
    .form_heading{
        font-size: 10px;
    }

    /* MENUS */
    #mobile-menu {
        display: flex; /* Only shows up when the screen is mobile sized */
        flex-direction: column;
        justify-content: space-between;
        width: 200px;
        max-height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000; /* so the menu or its navicon stays above all content */
        background: #191818;
        background: #2F3061;
        overflow-y: auto;
    }
    #menu, #condensed-menu{
        display: none; /* Only shows up when the screen is larger */
    }
    #toggle-no-menu{
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        background: rgba(27, 28, 61, 0.75);
        border: none;
        z-Index: 1001;
        width: 50px;
        height: 50px;
        margin-left: 200px;
        text-decoration: none;
    }

    /* UNION HOLDINGS */
    #union_holdings_form{
        font-size: 8px;
    }
    .form_input_box{
        width: 25%;
    }
    .form_input_bubble{
        width: 8px;
        height: 8px;
        margin-right: 4px;
    }
    .form_input_checkbox{
        width: 8px;
        height: 8px;
        margin: 0px 4px;
    }
    .form_input_select{
        width: 50%;
    }

    /* ALMA API */
    .alma_url_key_input{
        width: 60%;
        font-size: 8px;
    }

    /* TABLES */
    .pure-table-horizontal {
        border: 0;
        width: 90%;
    }
    .pure-table-horizontal thead {
        display: none;
    }
    .pure-table-horizontal tr {
        margin-bottom: 10px;
        display: block;
        border-bottom: 2px solid #ddd;
    }
    .pure-table-horizontal td {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;
    }
    .pure-table-horizontal .pure-hcenter {
        text-align: right;
    }
    .pure-table-horizontal .pure-hleft {
        text-align: left;
    }
    .pure-table-horizontal td:last-child {
        border-bottom: 2;
    }
    .pure-table-horizontal td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
}