:root {
  --bg: #9e9e9e24;
  --edge_light: #e6e6e6;
  --edge_dark: #252D53;
  /* --fcol: #BBBFCA; */
  --fcol: #546c25;
  --bg_highlight:#c9ed81;
  --hightlight_fcolor:#000000;
  --link_color:#0c4775de;

  --link_intern:#626fb0;
  --link_extern:#5c00b6;
  --cp:#12299d;
  --fcolor_h3:#201C29;
  --bgcolor_h3:#DFD4C8;
  --bgcolor_info:#fffeeb;
  
  --bg_lila:#DCD4ED;
  --fc_lila:#000000;
  
  --bg_light_blue:#CAC7F5;
  --fc_light_blue:#000000;
  
  --bg_beige:#ffffe8;
  --fc_beige:#000000;
  
  --bg_green:#dbff92;
  --fc_green:#000000;
  
  --bg_dark:#fff4b3;
  --fc_dark:#3a3a3a;
  
  --bg_light:#ffe3b2;  

  --box_px:2px 4px 9px 3px;

}

html {
	font-size:14px;
}

body {
	background-color:var(--bg);
	color:var(--fcol);
	font-family: Arial, sans-serif;
	font-size:0.6rem;
	text-align:left;
	border:none;
	margin:0.2rem 0 0.2rem 0;
	padding:0.2rem 0 0.2rem 0;
}

@media (max-width: 800px) {
	body {
		font-size:1.2rem;
		}
}


div {
all:unset;
display:inline-block;margin:0.2rem 0 0.2rem 0;
border:none;
padding:0.2rem 0 0.2rem 0;
position:relative;
width:98%;
border-radius:0.4rem;
/* border:1px solid white; */
}

#wrapper {
margin:auto;
display:block;
}


#header {
display:block;
background-color: #7e74bd;
color: var(--fc_dark);
height: 7vh;
width:100%;
border-radius: 3rem;
}


#dashboard,#content 
{
	/* background-color:#FFFFFF; */
	margin-top: 1vh;
	width:100%;
}

#dashboard 
{
	display:block;
	z-index:1;
	height:42px;
}

#content 
{
	min-height:50vh;
	z-index:0;
	padding-bottom:15vh;
	padding-top:1vh;
}

#p_welcome,#p_students,#p_lend,#p_books,#p_admin {
/* background-color:#f0f0f0; */
/* border-radius:0 0 5px 5px; */
display:none;
margin-top:0.4rem;
width:100%;
z-index:3
}

h1,h2,h3,h4,h5,h6,p,label {
all:unset;
font-size:1.2rem;
font-weight:600;
width:98%;
text-align:center;
display:inline-block;
border:none;
line-height: 1.6;
color: #656565;
}


h1 {
color: #8947ca;
font-size: 1.1rem;
margin-top: 0.5rem;
background-color: #ffffff;
}

h2 {
color: #000000;
font-size: 1.1rem;
text-align:left;
}


h3 
{
	font-size:1.1rem;
	text-align:center;
	color: var(--fc_green);
	padding: 0.2rem;
}



h4 {
font-size:1.1rem;
font-weight:normal;
font-style:italic;
}

h5 {
	display: block;
	margin: 0 auto;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 1vh;
    /* border-top: 2px solid #a7a7a7; */
    /* border-bottom: 2px solid #3e3e3e; */
    background-color: #FFFFFF;
	color: var(--fc_dark);
    /* width: 100%; */
	box-shadow: inset -1px -2px 6px 0px #a2a2a2;
}

h6 {
	font-size:1.1rem;
	font-weight:normal;
	text-align: left;
	padding-left: 0;
}

p {
	border:none;
	box-shadow:none;
	font-size:1rem;
	display:block;
	text-align:center;
	font-weight:400;
	width:100%;
	margin-top:1vh;
}

a {
	text-decoration:none;
	margin-right:0.3rem;
	font-weight:bold;
}


a,a:visited,.button_link {
    all: unset;
    background-color: var(--bg_green);
	/* border:1px solid #000; */
	padding: 0.2rem;
	/* line-height:1.5; */
	border-radius:0.4rem;
	display:inline-block;
	box-shadow:var(--box_px) #bababa;
	color:var(--fcol);
	font-size:1.1rem;
	margin-right:1rem;
}

a:hover,.button_link:hover,#content a:hover,button:hover,input:hover,textarea:hover,select:hover,.subpanel a:hover  {
	box-shadow:var(--box_px) #525252;
	cursor:pointer;
	/* background-color:#ffe481; */
	/* text-decoration:underline; */
    position: relative;
	z-index: 11;
}

a.hometile {
	padding: 1rem;
	margin-bottom: 1rem;
	vertical-align:top;
	min-width:200px;
	max-width:100%;
	text-align:center;
	border-radius: 3rem;
	font-weight:bold;
}

.dashboard_container a
{
	width:100%;
}

.top_links
{
	width: 130px;
	margin: 0.5rem;
	
}

.div_books a {
color:#295eda;
font-size:110%;
}

.entries a {
display:block;
font-weight:400;
margin:0;
padding-left:5px;
text-align:left
}

.div_content_sus a {
	display:block;
	margin:0 auto;
	margin-bottom: 0.5vh;
	margin-top: 0.5vh;
    width: 97%;
	text-align:center;
	border-radius: 3px;
	font-weight:bold;
	padding: 2px 0 2px 0;
}


/* #content a:hover { */
	/* box-shadow:none; */
/* } */



.center {
	text-align:center;
}


.subpanel{
	text-align:left;
	margin: 1vh 0 2vh 0;
}

.subpanel a {
	font-weight: bold;
	border-radius: 10px;
	margin: 0;
	margin-right:1vh;
	padding: 0.5rem;
}

.pagination{
	color:#0b8e99;
	font-weight:bold;
	width: 2vw;
	margin-top: 2vh;
}

.dashboard_container {
box-shadow:var(--box_px) #bababa;
/* background-color: var(--bg_green); */
/* border: 2px outset #e3e3e3; */
display:inline-block;
text-align:center;
vertical-align:top;
width: 18vw;
margin-right: 1vw;
}

@media (max-width: 800px) 
{
.dashboard_container a 
	{
		position:relative;
		z-index:3;
		width:100%
	}

#dashboard
{
	height: 200px;
}

}

button {
background-color:#fffaef
}

/* ****************************************** FIELDSET INPUT LABEL************************************* */

fieldset {
background:transparent;

border:none;
padding:0;
width:99%;
}

input,textarea,label,select,button {

border:none;
border-radius:5px;
display:inline-block;
/* box-shadow:var(--box_px) #505050; */
color:var(--fcol);
float:left;
font-size:1.2rem;
margin:.2rem;
padding: .2rem;
text-align:left;
}

label{
box-shadow:none;
background:transparent;
}

input,textarea,select {
background-color:var(--bg_light);
border:1px solid #cacaca;
}


input[type="radio"]
{
	background-color: #fff;
	margin: 0;
	display:inline-block;
	color: currentColor;
	width: 1.15rem;
	height: 1.15rem;
	/* border: 0.15rem solid currentColor; */
	/* border-radius: 50%; */
	transform: translateY(-0.075rem);
}

input[type=submit]:hover,a:hover {
cursor:pointer;
}

input:focus, textarea:focus, select:focus
{
background-color:var(--bg_highlight);
color:var(--hightlight_fcolor);
border:none;
}

input::placeholder {
    pointer-events: none;
    user-select: none;
}
input:focus::placeholder {
    opacity: 0;
}


@media (max-width: 800px) 
{
	input,textarea,label,select,fieldset 
	{
		display:block;
		font-size:1.3rem
	}
}

.info {
background: #ffffff;
text-align: left;
width: 97%;
margin: 4px;
border: 1px solid #cbcbcb;
}


.div_books {
display:inline-block;
min-height:525px;
vertical-align:top;
width:23%
}



.letters {
display:none
}

#content .link_intern, #content .link_extern {
	display:block;
	width:69%;
	white-space:nowrap;
	margin-left:20px;
}

#content .link_extern {
	color:var(--link_extern);
	background:transparent;
	box-shadow:none;
}

#content .link_intern 
{
	color:var(--link_intern);
	background:transparent;
	box-shadow:none;
}


#content .cp {
color:var(--cp);
}


#content .db_headers
{
	color:#5d9e80;
	font-weight:bold;
	background:transparent;
	box-shadow:none;
}

.link_rot 
{
	color:#eb0000
}

.bubble_button{
	display:block;
	height:2.5vh;
	width:55%;
	margin: 0 auto;
}

.lend_extend{
	width: 3rem;
    float: left;
    margin-left: 16%;
}

img {
display:block;
margin:auto;
width:auto
}

.mini_button
{
	width:1rem;
	height:1rem;
	margin-top:2px;
	cursor:pointer;
}

/* ****************************************** TABLE ************************************* */
table,tr {
text-align:left;
width:98%;
}

table,tr,td,th {
/* border: 5px solid transparent; */
border-collapse: collapse;
font-size:1rem;
}

table {
margin-top:1%;
}

td {
	font-size: 1.05rem;
	margin: 0;
	text-align:left;
	background: transparent;
	box-shadow: none;
	border-right: 1px solid #gray;
	max-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	/* padding: 2px 2px 2px 3px; */
	white-space: unset;
	vertical-align: middle;
}

td a 
{
	display: block;
	background:transparent;
	box-shadow:none;
}

tr:nth-child(even) {background-color: #d7d7d7;}

.tr_hoover{
margin-top:1%;
}

tr {
/* height:30px */
}

/* *****************************************************************************************************************/
@media (max-width: 800px) 
{
	.div_books 
		{
		width:96%
		}
}
/* ##################################################################################################################### */

/* #content input, #content select, #content .inline { */
	/* text-align:left; */
	/* display:inline; */
	/* height:1.4rem; */
	/* border:none; */
	/* min-width: 2rem; */
    /* text-align: left; */
/* } */

#content select
{
	width:18rem;
	float:right;
}

#content label input[type="checkbox"] {
	margin-right: 8px;
}

#content input[type="checkbox"] {
    padding: 0;
    margin: 4px;
    min-width: unset;
	box-shadow:none;
}


.short_field{
	max-width: 6rem;
}

.medium_field{
	max-width: 24rem;
}

.large_field{
	max-width: 35rem;
}

#content #data_bb_book_snumber_x,#content #data_bb_book_year_x,#content #data_bb_book_antolin_x,#content #data_bb_book_price_x,#content #data_bb_user_level_x
{
	width: 5rem;
	text-align:right;
}

#content #new_publisher_bb_publisher_text_x,#content #new_publisher_bb_publisher_main_x
, #content #new_author_bb_author_text_x,#content #new_author_bb_author_main_x
, #content #new_series_bb_series_text_x,#content #new_series_bb_series_main_x
{
    /* margin-top: 3rem; */
    margin-left: 2rem;
}

#content .invisible
{
	border-radius: 12px;
	border: 1px outset #c4c4c4;
	width: 97%;
}


#content .invisible:focus-visible, #content .inline:focus-visible 
{
	background-color:#dbb0ff;
	border:none;
}

#scanfield
{
	color: transparent;
	display:block;
	width:30%;
	margin: 0 auto;
	margin-top: 1vh;
}

@media (max-width: 800px) 
{
	#content label 
	{ font-size:1.5rem; text-align:left }

	.search_bar
	{ top: 25%; }

	.tr_hoover
	{ margin-top:1%;}
}

#bb_book_series_id {
	max-width:32%
}

#bb_lend_extend {
	width:17%;
	margin-right: 3%;
	height: 25px
}

/* #table_submit_delete,#table_submit_edit { */
/* float:none */
/* } */

.bb_book_antolin,.bb_book_year,.bb_book_id {
width:65px
}

.bb_book_snumber {
width:40px
}

.bb_book_title,.bb_series_name,.bb_author,.bb_publisher_name {
width:19%
}

.bb_delete,.bb_edit,.bb_series_lookup {
width:30px
}

.div_content_sus {
background-color:var(--bg_beige);
color:var(--fc_beige);
border: 2px outset #ffffff;
display: inline-block;
vertical-align: top;
max-width: 18vw;
min-width: 245px;
}



/* Container needed for centering the custom checkbox */
.checkbox-container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: 18px; /* Controls the size of the checkbox */
}

/* Hide the default checkbox */
.checkbox-container input[type="checkbox"],.checkbox-container input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.custom-checkbox {
	position: relative;
	display: block;
	float: left;
	margin-right: 5px;
	width: 20px;
	height: 20px;
	background-color: var(--bg_light);
	border: 1px solid #bcbcbc;
}

/* Style the checkbox when checked */
.checkbox-container input:checked ~ .custom-checkbox {
	background-color: #75c62a; /* Background color when checked */
	border: 1px solid #FFFFFF;
}

/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .custom-checkbox:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .custom-checkbox:after {
	left: 6px;
	top: 2px;
	width: 6px;
	height: 12px;
	/* border: solid white; */
	/* border-width: 0 2px 2px 0; */
	transform: rotate(45deg);
} 


@media (max-width: 800px) 
{

	.dashboard_container,.div_content_sus {
	max-width:100%;
	width:100%
	}

	h1,h2,h3,h4,h5,h6 {
	font-size:1.3rem;
	font-weight:600
	}

	p {
	font-size:1.2rem;
	}

}