@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

body{
	background-color: #ffffff;	
	background-attachment: fixed;
	background-size:1396px 978px;
}

.navbar, .bg-wlu, .btn-wlu{
	background-color: #38438b !important;
	color:#FFFFFF !important;
}


.jumbotron, body.loginPage{

	/*background-image: url(https://www.weloveukulele.com/wp-content/uploads/2020/04/bg.gif),linear-gradient(180deg,#845EC2 100%,#ff0037 0%)!important;
	background-image: url(https://www.weloveukulele.com/wp-content/uploads/2020/04/bg.jpg), linear-gradient(to right top, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);
-chrome-background-image: url(https://www.weloveukulele.com/wp-content/uploads/2020/04/bg.gif),linear-gradient(180deg,#ffbb74 100%,#ff0037 0%)!important;*/
	background-image: url(https://www.weloveukulele.com/wp-content/uploads/2020/04/bg.jpg), linear-gradient(to right top, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	/*background-color: #38438b !important;*/
	background-blend-mode: multiply;
	background-color:none !important;
	padding:80px;
	text-align: center;
}
.jumbotron h1{
	font-family: 'Kalam', cursive;
    font-weight: 700;
    font-size:120px;
    text-shadow: 10px 10px 15px rgba(0,0,0,.6)!important
}
.jumbotron h3, .jumbotron .lead, .jumbotron h4, .jumbotron h1, .jumbotron #songsInDb{
	color:#ffffff !important;
}  
.jumbotron .lead{
	width:70%;
	text-align: center;
}

.jumbotron .form-control{
	box-shadow: 0 1rem 3rem rgba(0,0,0,.6)!important;
}
.jumbotron .form-control:focus{
	border-color:white !important;
}
.jumbotron .nav-tabs{
	border:0px !important;
	margin-top:110px !important;
}
.jumbotron .nav-tabs a.nav-link{
	color:#ffffff !important;
	border:0px !important;
	font-size:30px;
	font-weight: bold;

}
.jumbotron .nav-tabs a.nav-link.active{
	color:#38438b !important;
}

.card-header {
    color: #FFFFFF;
    font-weight: bolder;
    font-size:44px;
    text-align: center;
    border-radius: 50% !important;
    width:80px !important;
    height:80px !important;
    background-color: #d75a88 !important;
    text-align: center;
    /* margin:auto; */
    margin-bottom: 0px !important;
    margin-left: 0;
    margin-top: 50px !important;
    box-shadow: 20px -20px 0px #845EC2;
    color: #38438b #ff0037 #944b94 #d75a88 #ff7e71 #ffb22f #ffeb77;
    position: relative;
    left: -17px;
    /* z-index: 40000000000 !important; */
    font-family: 'Kalam', cursive;
    letter-spacing: -0.02em;
}

.card{
	border:none !important;
	background-color: transparent !important;
}
.card.by .SongListSong{
	font-weight:bold;
}
.card small{
	display:block;
}
.card h5{
	    margin-bottom: 6px !important;
	    background-color: rgb(132, 94, 194,0.1);
	    color: rgb(132, 94, 194,1);
	    font-weight: 900;
	    text-transform:  uppercase;
	    font-size: 0.9em;
	    letter-spacing: -0.02em;
	    border-radius: 6px;
	    padding: 5px 8px;
	    display: inline-block;
	    box-shadow: 3px 3px 0px rgb(132, 94, 194,0.5);
}
.card h6{
	margin-bottom:0px; 
}
.card .list-group{
	padding-left: 18px;
	/* text-align:  center; */
}
.list-group{
	display:block !important;
}
.list-group-item::before {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: rgba(0,0,0,0.2);
    content: " ";
    margin-right: 6px;
    margin-bottom: 3px;
    border-radius: 10px;
}

.card .list-group-item{
	/* background-color: transparent !important; */
	border: none !important;
	padding: 1px 0px;
	border-bottom:2px solid rgba(239,55,53,0);
	/* list-style-type: disc; */
	display: inline;
	margin-left: 6px;
}


/*.card .list-group-item :before{
	content:"â–¸";
	display:inline-block;
	width:5px;
	height:5px;
	margin-right:10px;
    color: #38438b;

}*/



.card .list-group-item :hover {
		border-bottom:2px solid rgba(239,55,53,1) !important;
		color: rgba(239,55,53,1);
}

.dropdown-item.active, .dropdown-item:active{
	background-color:rgba(239,55,53,1) !important;	
}

.by-category .card-header{
	display:inline-block;
	width:auto !important;
	height:auto !important;
	border-radius: 20px !important;
	line-height: 1em !important;
	margin-bottom: 30px !important;
	text-align: left !important;
	padding: .75rem 0.75rem !important;
}
.by-title .card-header {
	margin-bottom: 30px !important;
}
.by-title .list-group-item h6, .by-category .list-group-item h6{	
		border-bottom:2px solid rgba(239,55,53,0) !important;
}
.by-title .list-group-item small, .by-category .list-group-item small{
	border: none !important;
	display: block !important;

}
.by-title h6, .by-category h6{
	margin-bottom:5px;
}
.by-title .list-group-item small:hover, .by-category .list-group-item small:hover{
	border: none !important;
}
.by-title small:before,.by-category small:before{

	display: none !important;
}

.by-category .list-group-item small:before{ 
	display:none !important;
}
.by-title .list-group-item, .by-category .list-group-item{	
	
	margin-left:0px !important;

}



.by-category .list-group-item::before, .by-title .list-group-item::before{
	display: block;
    width: 5px;
    height: 5px;
    background-color: rgba(0,0,0,0.2);
    content: " ";
   
    border-radius: 10px;
  
    left: -11px;
    top: 11px;
    position: relative;

}



.typeahead a:hover{
	text-decoration: none;
}
.typeahead .active a{
	color:#ffffff !important;
}
.typeahead .menu-item:hover{
	color:#ffffff !important;
	background-color:#aaaaaa;

}
.typeahead a{
	color:#888888 !important;
	text-decoration: none;
}
footer .text-muted a{
	color:#6c757d !important;

}


[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: none;
}





h1#songTitle{
    color: rgb(132, 94, 194,1);
    font-weight: bold;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

h2.songArtist{
	color:#495057;
	font-weight: 100;
}

.pageWidth_screen .scalablePrintArea{
	padding:0px;
}

.ugs-songInfo{
	display:flex;
	justify-content: space-between;
}


#ukeSongContainer,  .ugs-songInfo h2{
	padding:0px 20px;
}

.ugs-songInfo{
	background-color: rgb(132, 94, 194,0.1);
    padding: 10px 20px;
    margin-bottom: 20px;
    box-shadow: 0px 3px 0px rgb(132, 94, 194,0.5);
}

h1.songTitle{
	margin-bottom:0px !important;

}
#ukeChordsCanvasWrapper{
	float:right !important;
}

.ugs-source-wrap pre{
	/*padding-top:1.4em;*/
}

.ugs-song-wrap .ugsChords{

}
.ugsPlain{
	line-height:1.6em !important;
}
.ugs-song-wrap pre + .ugsChorus{
	margin-top:1em !important;
}
.ugs-song-wrap .ugsChorus{
	margin-bottom:0.5em !important;
}

.ugs-source-wrap pre + h6{
	margin-top:1.5em;
	padding-top:0.2em;
}

.ie .ugsChorus h6, .ugsChorus > h6{
	font-size: .9em;
}


@media only screen and (max-device-width: 768px){
	.chordsAlwaysOnTop{
		position: relative !important;
	    top: 0 !important;
	    right:0 !important;
	    box-shadow: none !important;
	}

		

	
}
@media (max-width: 576px){

.jumbotron h1{font-size:72px !important;}
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px){
	.card-columns { column-count: 1 !important; }
		
	.jumbotron h1{font-size:100px !important;}

}
/*  Medium devices (tablets, 768px and up)*/
@media (min-width: 768px){
	.card-columns { column-count: 2 !important; }
	.jumbotron h1{font-size:110px !important;}
}
/*  Large devices (desktops, 992px and up)*/
@media (min-width: 992px){
	.card-columns { column-count: 3 !important; }	
	.jumbotron h1{font-size:120px !important;}
}
/*  Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px){
	.card-columns { column-count: 4 !important; }
}


/*Imprimer sur 2 colonnes*/
@media print {
  
	#ukeSongContainer{
		
    display: flex;
    

	}
  #ukeSongText{
    column-count: 2;
    column-gap: 30px;
    column-rule: 2px solid #DDD; /* ligne séparatrice optionnelle */
    flex-grow: 1;
    width: 100%; 
  }
  
  /* Éviter les coupures au milieu des sections */
  #ukeSongText .ugsChords{
    break-inside: avoid;
    page-break-inside: avoid;
    padding-right: 40px;
  }

   #ukeChordsCanvasWrapper{
    width:40px !important;
    order: 2;
    flex-shrink: 0;
  }

  .notifyjs-corner{
  	display:none !important;
  	opacity:0 !important;
  }

  
  .ugs-source-wrap pre{
  	margin-right: 0;
  }

}

@media print {
  @page {
    margin: 1cm; /* Réduit les marges (défaut souvent 2cm) */
  }
}