.red {background-color:red;}
.green {background-color:green;}
.orange {background-color:orange;}
.blue {background-color:blue;}
.gray {background-color:gray;}
.yellow {background-color:yellow;}

/*  KONIEC WYŁĄCZEŃ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	
	margin:0;
	border:0;
	/* border: 1px solid black; */
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	
}


body {
	line-height:1.2;
	background-color: #e6e8eb !important;
	margin: auto;
	display: flex;
	flex-direction:column;
	min-height: 100vh; 
	min-width:305px;
	margin:0;
	/*font-family: Monospace;*/
	font-family: sans-serif;
}


a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	color: #000 !important; 
	background:transparent;
}

a:link { text-decoration: none !important; }
a:visited { text-decoration: none !important; }
a:hover { text-decoration: none !important; }
a:active { text-decoration: none !important; }

ul, ol { 
	padding-inline-start: 15px;
}

p {
	margin:0 auto !important;
}

table {
	border-collapse:collapse;
	border-spacing:0;
	margin-left:auto; 
	margin-right:auto;
}

input, select {
	vertical-align:middle;
}

input:focus {
    outline: none;
}


/*
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}
*/
/* main container */


.main-wrapper {
	
	flex:1;
	padding-bottom: 1em;
	min-height: calc(100vh - 220px);
	background-color: 	rgb(255, 255, 255);

}



/* HEADER */ 

header {
	background-color: #000000; /*#00707A; kolor paska nawigacyjnego u góry strony  */
	/*margin: 0 auto;*/
	height: 60px;
}

item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 4rem;
    width: 4rem;
}



/* NAV */


nav {
	display: flex!important;
	justify-content: space-between;
	/*width: 100%;*/
	height: 60px;
}

nav > div {
	margin: 2px;	
}
/* -- SITE TITLE --*/

.site-title {
	/*background-color: blue;*/
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	text-align: center;	
	/*font-family: Tahoma;*/
	/*font-family: 'Brush Script MT', cursive;*/
	/*font-family: bradley hand, cursive;*/
	/*font-family: gill sans, sans-serif;*/
	/*font-family: luminari, fantasy; */
	/*font-family:Impact, sans-serif;*/
	/*font-family: Comic Sans MS, cursive; */
	/*font-weight: 100; */
	font-style: italic;
	font-size: 26x !important;
	width: 60%;
	
}
 

.site-title a{
	color: #fff !important;
	font-weight: 600;
	font-size: 2rem;	
}
/* koniec SITE TITLE */


.nav-search {
	/*background-color: orange;*/
	display:none;
	font-size: 14px;
	color: #000 !important;
	padding: 0px 5px 0px 5px;
	/*flex-grow: 1;*/
	
}

.nav-search input[type=text] {
	
	height: 28px; 
	width: 100%;
	font-size: 12; 
	border-radius: 10px;
	padding: 0px 10px 0px 10px;

	
}
/*
.nav-search input[type=image] {
	
	padding:0px 0.8%;
	outline:none;

	
}
*/
.nav-icon {
	height: 60px; 
	padding-left: 10px;
	font-size:24px!important; 
	color:#fff !important;
	/*size:24px !important;*/
}


.nav-search form{
	height:100%;
	width:100%;
	
}

.nav-menu {
	/*background-color: green;*/
	display:none;
	width: 40%; 
}

.nav-dropdown {
	position: relative;
	display: none;
}

/*  DROPDOWN */

.nav-dropdown-content {
    display: none;
	position: absolute;
	/*font-family: Monospace;*/
    /*position: absolute;
	background-color: #f1f1f1;*/
	background-color: rgb(240, 240, 240);
    min-width: 130px;
	top:60px;
	font-size: 14px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	z-index: 5;
}

.nav-dropdown-content a {
    background-color: rgb(240, 240, 240);
	color: black;
    padding: 10px 12px;
    text-decoration: none;
    display: block;
    height:1em;
    line-height: 8px;
	box-sizing: content-box !important;
	-webkit-box-sizing: content-box !important;
}

.nav-dropdown-content a:hover {background-color: #fff;} 

.nav-dropdown:hover .nav-dropdown-content {display: flex; flex-direction: column; right:4.5%;}

.dropdown-content a:hover {background-color: #f0f0f0;} 

.dropdown-mobile-menu:hover .nav-dropdown-content {display: block;} 

.dropdown-mobile-menu {
	position: absolute;
	margin-left:10px;
	display: inline-block;
	width:55px;
	height:60px;
	text-align: left !important;
	font-size: 3vw;
}

.hr-mobile-menu {
    border: 0;
    border-top: 0.3px solid #AEB6BF ;
	margin-top: 0px;
    margin-bottom:0px;
} 

/* MOBILE MENU */ 

.mobile-menu {
	  /*background-color: purple;	*/
	  display: inline-flex;
	  justify-content: center;
	  align-items: center;
	  width:10%;
 }


.mobile-search {
	/*background-color: red;*/
	  display: inline-flex;
	  justify-content: center;
	  align-items: center;
	  width:10%;
	  /*position: absolute;*/
	  /*display: flex;*/
	  /*width: 80px;*/
	  /*height: 60px;
		float:right;*/
	  /*top: 29px;*/
	  /*left: 90%;
	  transform: translate(-50%, -50%);*/
   
}

.mobile-search-content {
  display: none;
  position:absolute;
  top:50px;
  background-color: black;
  width: 100%;
  overflow: auto;
  /*border: 1px solid #fff ;*/
  font-size: 12px;
  z-index: 1;
  text-align:center;
  height: 45px;
  margin: 5px 0px 5px 0px;
}

.mobile-search-content a {
  color: black;
  padding: 8px 6px;
  text-decoration: none;
  display: block;
}


#searchInput {
  box-sizing: border-box;
  width: 80%;
  padding: 8px 6px 8px 6px;
  border: none;
  border-radius: 10px;
}

#searchInput:focus {outline: 3px solid #ddd;}


.pokaz {display: block;}  


/* koniec MOBILE MENU */
/* koniec NAV */

.podsumowanie {
	
	font-size: 0.8em;
	margin-left: 3em; 
	margin-top: 8px;
}


.nextprev {
	font-size:0.6em;
	text-align:center;
	padding: 6px 0px 6px 0px;
}


.error-message {
	margin: auto;
	font-size: 16px;
	color: #ff0000;
	text-align: center;
	font-weight: bold;
	padding: 10px 5px 0px 5px;

	
}


.page-name {
	padding-top:15px; 
	text-align:center; 
	font-size:18px;
	
}

.section-label {
	margin: 0 auto;
	width:90%;
	font-weight: bold;
	padding-top: 10px; 
}

.section-line {
	width:90%; 
	text-align:right;
	margin: 8px auto;

}

.details-box{
	width: 90%; 
	margin: 10px auto;
	/*background-color: orange;*/
			
}

.two-columns {
	columns: 2 200px; 
}

/*SINGUP-FORM*/

.signup-form {
	margin: 0 auto;
	padding-top: 80px;
}

.signup-form input:not([type="checkbox"]) {
	width: 75%;
	height: 40px;
	padding: 0px 5%;
	margin-bottom: 4px;
	border: none;
	/*background-color: #fff;*/
	background-color: rgb(221, 223, 238); 
	/*font-family: arial;*/
	font-size: 14px;
	color: #111;
	line-height: 40px;

}

.signup-form button {
	display: inline-block;
	border-radius: 10px;
	margin: 5px auto;
	width: 48%;
	height: 40px;
	border: none;
	background-color: #00695F;
	/*font-family: arial;*/
	font-size: 14px;
	color: #fff;
	cursor: pointer;


}

.signup-form button:hover {
	background-color: #666;
}


.signup-form label {
	padding:5px;
	/*font-family: arial;*/
    font-size: 14px;
    color: #111;
    line-height: 40px;
}

.signup-form img {
	
	border: 3px solid #e6e8eb;
    height: auto;
    width: 90%;
    
}

/*koniec SINGUP-FORM*/



/* FOOTER */

footer {
	
	bottom: 0px;
	height: 2em; 
	width:100%;
	text-align: center;
	background-color: #000000; 
	vertical-align: baseline;
	color: #fff;
	margin: 0 auto;
	display:inline-block;
}

footer p {
	padding-top: 10px;
	font-size: 14px;
}


/* ALBUM lista */

.artist-name {
	padding-top:15px; 
	padding-bottom:20px;
	text-align:center; 
	font-size:24px;
}

.albums-list {
	margin-top: 10px;
	padding-left: 15px;
	font-size: 0.8em;
	
}

.albums-list a {
	padding-top: 0px;
	/*font-size: 14px;*/
	/*font-family: Monospace;*/
}


.albums-list ul ol {
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding-bottom: 5px;
	line-height:1.5;
	text-indent: -1.1em;
	
}

.albums-list p {
	padding-bottom: 5px;
}


/* koniec Album lista*/


/* SHOW RECORD*/

.album {
	
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 10px;
	margin: 0 20px;
	
}

.album-head {
	display:block;
	text-align: center; 
	width: 100%;
	margin: 0px 10px;
}

.album-head select {
	margin-top: 3px;
	width: 78%;
	
}

.album-box{
  min-width:100px;
  display:block;
  /*max-width:300px;*/
  max-height:90%;
  flex-grow:1;
  margin: 0 10px;
  /*background-color: orange;*/
	
}

.album-box-head {
	margin-top:5px;
	margin-bottom: 10px;
	font-weight: bold;
	width:100%;
	background-color: #d9d9d9;
	text-align: center !important;
	line-height: 25px;
	font-size: 16px !important;
}

.album table {
	line-height: 20px;
	margin-left:auto;
	margin-right:auto;
    /*background-color: silver;*/
	width: 100%;
}

.album-box td {
	width:65% !important;
}

.album-box th {
	width:35% !important; 
}



.artist-select {
	margin-top: 3px;
	margin-bottom: 5px;
	/*font-size:calc(.6em + 1vw);*/
	font-size: calc(.7 * (1.5vh + 1.1vw));
	font-weight: bold;
}


.artist-label {
	margin-top: 15px;
	text-align:center; 
	font-size:calc(.6em + 1vw);
	font-weight: bold;
}

.album-title {
	grid-column: 1/7;
	grid-row: 2;
	text-align:center; 
	font-size:20px;
	font-weight: bold;
	padding-bottom:15px;
	
}


.album-details {
	padding:5px;	
	display:block;
	
}

.album-image {
	/*display:none;*/
	/*width: 300px;
	height: 250px;*/
	text-align: center;
	margin-left:auto;
	margin-right: auto;
	padding: 5px 5px 5px 5px;
	
}

.album-purchase {
	padding:5px;
}


.album p {
	padding: 5px 0px 0px 3px;
}


.album header {
/* do wyrzucenia*/
	background-color: #eee;
	padding: 5px 0px 5px 3px;	
}


.th-head {
/* do wyrzucenia*/
	background-color: #eee;
	text-align: center !important;
	line-height: 25px;
	font-size: 16px !important;
}

.album th {

/* do wyrzucenia*/
	/*background-color: #eee;*/
	/*font-family: arial;*/
	text-align: left;
    /*font-size: 14px;*/
    /*padding-right: 1rem;*/
	width: 60%;
	white-space: nowrap;
	/*padding: 0px 1rem 0px 3px;	*/
}


.album td {
/* do wyrzucenia*/
	padding: 1px 0.5rem 1px 3px;
	/*font-family: arial;*/
	/*font-size: 14px;*/
}



.album label{
	
	display:block;
	font-size: 14px;
	font-weight: bold;
    color: #111;
	padding-top: 5px;   
}

.album section {
	padding: 5px 0px 0px 0px;	
}

.album nav {
	display: flex;
    width: 100%;
    justify-content: center;
	padding-top: 10px;
}



/* edit-form  edycja albumów */

.edit-form {

	/*font-size: 14px;*/
	font-weight: 100;
	width: 90%;
	margin: 0 auto;
	padding-top: 10px;
}


.edit-form input {

	/*height: 25px;*/
	padding: 0px 1%;
	margin-bottom: 3px;
	border: none;
	background-color: rgb(240,240,240);
	font-size: 14px;
	color: #111;
	/*line-height: 40px;*/

}

.edit-form button {
	display: inline-block;
	border-radius: 10px;
	margin: 5px auto;
	color: #fff;
	cursor: pointer;
}

.edit-form button:hover {
	background-color: #666;
}


.edit-form label {
	padding:5px;
	display: inline;
    color: #111;
    
}

.edit-form select {
	border:none;
	width:98%;
	padding: 1%;
	margin-bottom: 3px;
	background-color: rgb(240,240,240);
}



.edit-form textarea {
	resize:none;
	border:none;
	width:98%;
	padding: 1%;
	margin-bottom: 3px;
	background-color: rgb(240,240,240);
}

.edit-form img{
	padding-left: 10px;
	border:0;
	outline:0;
	vertical-align:bottom;

}
/* Koniec SHOW RECORD */

/*  NEWRELEASE */

.new-album{ 
	margin-left:auto;
	margin-right:auto;
	/*background-color: orange;*/
}

.new-album select, option {
    width: 120px;
	
}

.new-album option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.new-album input {
	width:120px;
}

.new-album textarea{
	width:120px;
}


/* Koniec NEW RELEASE */





/* BUTTONS */

.navbtn {
	background-color: #000000 !important;
	outline: none !important;
	color: #fff; 
	border: none; 
	cursor: pointer;
}

.black-button {
	vertical-align: bottom;
	margin: 5px;
	border-radius: 10px;
	min-width: 15%; 
	height: auto; 
	border: none; 
	background-color: #000000 !important; 
	font-size: 1rem;
	color: #fff; 
	cursor: pointer;
	padding: 8px;
    	
}

.white-button {
	vertical-align: bottom;
	margin: 5px;
	border-radius: 10px;
	/*min-width: 15%;*/
	height: auto;
	border: none;
	background-color: #FFF !important;
	font-size: 1.5rem;
	color: #000;
	cursor: pointer;
	padding: 8px;

}

.white-button:focus {
	outline: none;
}


.black-button:hover {
	background-color: #666;
}

.buttons-wrap {
    margin: 20px 0px 10px 0px;
	width:100%;
    text-align: center;
	vertical-align: bottom;
	/*background-color: orange;*/
	
}

.buttons-wrap .inline {
	 display: inline-block;
}

/* koniec BUTTONS*/

.lineheight30 {
	line-height: 30px;
}
	

.center-vertical {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;

}

.left {
    display: flex;
	float: left;
    justify-content: left;
    align-items: center;
   
}

.right {
    display: flex;
    justify-content: right;
	align-items: center;
	float: right;
   
}

/* Checkbox */

.chkbox { 
	position: relative; 
	/*margin: 3px 3px 3px 4px;*/
	cursor: pointer; 
	font-size: 20px; 
}

.chkbox input {
	
	opacity: 0;
	
}
.geekmark { 
	position: absolute; 
	/*margin: 5px 5px 5px 5px;*/
	/*top: 15px; */
	left: 0; 
	height: 20px; 
	width: 20px; 
	background-color: #f0f0f0; 
}

/* Specify the background color to be  shown when hovering over checkbox */ 
.chkbox:hover input ~ .geekmark { 
	background-color: #f0f0f0; 
}

/* Specify the background color to be  shown when checkbox is active */ 
.chkbox input:active ~ .geekmark { 
	background-color: #f0f0f0; 
}

/* Specify the background color to be shown when checkbox is checked */ 
.chkbox input:checked ~ .geekmark { 
	background-color: #000000; 
}

/* Checkmark to be shown in checkbox */ 
/* It is not be shown when not checked */ 
.geekmark:after { 
	content: ""; 
	position: absolute; 
	display: none; 
}

/* Display checkmark when checked */
.chkbox input:checked ~ .geekmark:after { 
	display: block; 
}

/* Styling the checkmark using webkit */ 

/* Rotated the rectangle by 45 degree and  showing only two border to make it look like a tickmark */ 
.chkbox .geekmark:after { 
	left: 6px; 
	bottom: 5px; 
	width: 6px; 
	height: 12px; 
	border: solid white; 
	border-width: 0 2px 2px 0; 
	-webkit-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	transform: rotate(45deg); 
}
/* koniec Checkbox */

/* SHELF */

.alphabet-links {
	display: flex;
	flex-wrap: wrap; /* Pozwala na zawijanie elementów */
	justify-content: center;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	gap: 10px;
	font-size: 18px;
	
}

.alphabet-links button {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 2px solid #000; */
    background-color: #000;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
	

.scroll-box {
	width: 93%;
	height: 645px;
	overflow-y: auto;
	border: 1px solid #ccc;
	padding: 10px;
	background-color: #f9f9f9;
	margin: 20px auto;
	/*font-size:14px;*/
}




/* SHELF SELECT*/

.shelf-select {
	display:flex;
	flex-wrap: nowrap;
	padding: 10px 20px;
	color:#fff;
	background-color: black;
	justify-content: space-between;
}

.shelf-select select {
	color: black;
}

/*FORMAT SELECT*/

.format-select {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.format-select input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #3A3B3C; /*#eee;*/
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.format-select:hover input ~ .checkmark {
  background-color: #ccc; /* #ccc*/
}

/* When the radio button is checked, add a blue background */
.format-select input:checked ~ .checkmark {
  background-color: white; /*  #fff;*/
}

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

/* Show the indicator (dot/circle) when checked */
.format-select input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.format-select .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: black; /*white*/
}

/* koniec FORMAT SELECT*/

/* SWITCH TOGGLER */
/* Container for the toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

/* Hide default checkbox */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The track */
.slider {
    position: absolute;
    cursor: pointer;
    background-color: #fff;
    border-radius: 24px;
    width: 100%;
    height: 100%;
    transition: background-color 0.3s;
}

/* The circular slider */
.slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 2px;
    background-color: black;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* Toggled state */
.toggle-switch input:checked+.slider {
    background-color: #fff;
}

.toggle-switch input:checked+.slider::before {
    transform: translateX(26px);
}



.icon-collection {
	width: 24px;
	height: 27px;
	fill: currentColor; /* Kolor ikony zależny od koloru tekstu */
}


/* koniec SHELF SELECT*/


/* @media */

/*(min-width: 600px) and*/

@media only screen and  (max-width: 769px) {
	 /* For tablets  and smartfons*/
	
	body{ height:100%; margin:0;}
	
	/*footer {width: 100%;}*/
		
}

@media only screen and (min-width: 796px) and (max-width: 1280px) {
	 /* For desktop: */
	 
	body{ 
		height:100%; 
		margin:0 20% 0 20% !important;			
	} 
 
	nav {
		justify-content: start;
	}
 	/*footer {width: 55%;}*/
	
	.site-title {
		justify-content: left;
		/*margin-left: 15px;*/
		padding-left: 10px;
		width:25%;
	}
	
	.site-title a{
		font-size: 36px !important;
		font-weight: 100;
	}

	.albums-list {font-size: 1rem;}
	.nextprev {font-size:0.8rem;}
	
	.mobile-search {display:none;}
	#searchDropdown {display:none!important;}
	.mobile-menu {display:none;}


	.nav-search {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 40%;
	}
	.nav-menu {
		display:inline-flex;
		justify-content: right;
		align-items: center;
		/*float: right;*/
		width: 45%;
		/*margin-right: 10px;*/
	}
	.nav-dropdown {display: inline-block;}
	.nav-dropdown-content {position: absolute;}
	
}

@media only screen and (min-width: 1280px) {
	 /* For desktop: */
	 
	body{ 
		height:100%; 
		margin:0 20% 0 20% !important;			
	} 
 
 	/*footer {width: 55%;}*/
	
	.site-title {
		justify-content: left;
		/*margin-left: 15px;*/
		padding-left: 10px;
		width:25%;
	}
	
	.site-title a{
		font-size: 36px !important;
		font-weight: 100;
	}

	.albums-list {font-size: 1rem;}
	.nextprev {font-size:0.8rem;}
	
	.mobile-search {display:none;}
	#searchDropdown {display:none!important;}
	.mobile-menu {display:none;}


	.nav-search {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 45%;
	}
	.nav-menu {
		display:inline-flex;
		justify-content: right;
		align-items: center;
		/*float: right;*/
		width: 30%;
		/*margin-right: 10px;*/
	}
	.nav-dropdown {display: inline-block;}
	.nav-dropdown-content {position: absolute;}
	
	/*.album-image {display: inline-block;}*/
}

/* koniec @ media*/