/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 .nickname-generator button {
 	border-color: #c62641;
 	color: #c62641;
 	background-color: #fff;
 	border-radius: 3px;
 }

 .nickname-generator button:hover {
 	border-color: #c62641;
 	background-color: #c62641;
 	color: #fff;
 }

 .nickname-generator button:active {
 	border-color: #c62641;
 	background-color: #c62641;
 	color: #fff;
 }
 .nickname-generator select {
 	width: 100%;
 }
 .nickname-generator .select2-container{
 	width: 100%;
 }

 .nickname-generator.mini .nicknames-list .nickname-wrapper {
  width: 100%!important;
 }
.nickname-generator.mini #nicknames-title {
  padding: 10px 0;
  text-align: center;
}

.nickname-generator.mini #nicknames-sorting .button-wrapper {
  margin-bottom: 10px;
}

.nickname-generator.mini #nicknames-sorting .button-wrapper {
  margin-bottom: 10px;
}
.nickname-generator.mini #load-more-section {
  padding: 10px 0;
}

.nickname-generator.mini #load-more-section #load-more-nicknames {
  width: 100%;
  } 

.nickname-generator.mini .selected-button button {
  width: 100%;
}

.nickname-generator.mini .nicknames-title {
  padding: 10px 0;
  text-align: center;
}
 .nickname-generator button:focus {
 	border-color: #c62641;
 	background-color: #c62641;
 	color: #fff;
 }

 .nickname-wrapper {
  margin-bottom: 15px;
 }

 #nicknames-title {
 	display: none;
 }

 .mini #nicknames-list {
  overflow-y: auto;
  max-height: 600px;
 }

 /* width */
 .mini #nicknames-list::-webkit-scrollbar {
  width: 7px;
}

/* Track */
 .mini #nicknames-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
 .mini #nicknames-list::-webkit-scrollbar-thumb {
  background: #c62641;
}

/* Handle on hover */
 .mini #nicknames-list::-webkit-scrollbar-thumb:hover {
  background: #991c31;
}

 #nicknames-sorting {
 	display: none;
 }

  #load-more-section {
    display: none;
    text-align: center;
  }

  #load-more-section p {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 300;
  }

 #load-more-nicknames {
 	display: block;
  width: 280px;
  margin: auto;
  border-color: #2649c9;
  background-color: #fff;
  color: #2649c9;
 }
 #load-more-nicknames:hover {
  border-color: #2649c9;
  background-color: #2649c9;
  color: #fff;
 }
 .nickname {
 	border-radius: 3px;
 	border: 1px solid #ddd;
 	position: relative;
  height: 180px;
  padding: 10px;
 }
 /*.nickname .nickname-title {
  padding: 10px;
 }
 .nickname .nickname-excerpt {
  padding: 10px;
 }*/
 .nickname .nickname-open {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
 }
 .nickname .nickname-open a {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: #c62641;
  border-top: 1px solid #c62641;
  padding: 3px 0;
  text-transform: uppercase;
 }

 .nickname-excerpt p {
  display: block;
  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
 }

 .nickname .nickname-open a:hover {
  background-color: #fff;
  color: #c62641;
  border-top: 1px solid #c62641;
 }


 .nickname h2 {
 	margin-top: 0;
 	font-size: 20px;
 }

 .nickname-generator-run {
 	border-color: #c62641;
 	color: #c62641;
 }

 .nickname-generator-run:hover {
 	border-color: #c62641;
 	background-color: #c62641;
 	color: #fff;
 }

 .nickname .addtobasket {
 	position: absolute;
 	right: 10px;
 	top: 10px;
 	color: #1a936f;
 	line-height: 20px;
 	padding: 2px;
 	height: 24px;
 	width: 24px;
 	text-align: center;
 	border-radius: 50%;
 	border: 1px solid #1a936f;
 	cursor: pointer;
 }

 .nickname .addtobasket:hover {
 	color: #aaa;
 	border: 1px solid #aaa;
 }

 .addtobasket.active .fa-times {
  top: -1px;
  position: relative;
 }

  .nickname .addtobasket .far,
  .nickname .addtobasket .fas {
  	height: 18px;
  	margin: auto;
    line-height: 22px;
  }

  .nickname .addtobasket.active .fas {
  	display: block;
    line-height: 22px;
  }

  .nickname .addtobasket.active .far {
  	display: none;
    line-height: 22px;
  }

  .nickname .addtobasket .fas {
	 	display: none;
    line-height: 22px;
   }

  .nickname .addtobasket.active {
  	color: #ff1654;
  	border: 1px solid #ff1654;
  }

 .sortingbutton.active {
 	background: #c62641;
 	color: #fff;
 }

 .sortingbutton.active:hover {
 	background: #fff;
 	color: #c62641;
 }

 #nicknames-sorting button {
 	width: 100%;
 }

 .nickname-generator #nicknames-sorting,
 .nickname-generator .title,
 .nickname-generator .nicknames-list {
 	margin-bottom: 20px;
 }

 .nickname-generator .title h2 {
 	margin: 0;
 }

 .generate-button button {
  	width: 100%;
  	font-size: 18px;
  	font-weight: bold;
  	margin-top: 10px;
 	margin-bottom: 10px;
 }

 .select2-selection {
 	min-height: 52px!important;
 }
 .select2-selection--multiple {
  min-height: 52px!important;
 }

 .select2-selection__rendered {
 	line-height: 50px!important;
 }
 .select2-selection--multiple .select2-selection__rendered {
  line-height: 40px!important;
 }
 
 .select2-selection__arrow {
 	height: 50px!important;
 }

 .filters label {
 	font-size: 20px;
 	font-weight: 600;
 	margin-bottom: 10px;
 }

 .filters .filter {
 	margin-bottom: 10px;
 }

 .nickname-generator button {
 	color: #c62641;
 	border-color: #c62641;
 }

 .selected-names {
 	display: none;
 }

 #basket-modal .modal-footer input,
 #basket-modal .modal-footer button {
 	width: 100%;
 }

 #basket-modal button.close {
 	font-size: 18px;
    padding: 5px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: inline-block;
    text-align: center;
    line-height: 1;
    border-color: #c62641;
 	background-color: #fff;
 	color: #c62641;
 }
 #basket-modal button.close:hover {
 	background: #fff;
 	color: #c62641;
 }
 #basket-modal button.close:hover {
 	border-color: #c62641;
 	background-color: #c62641;
 	color: #fff;
 }

 #basket-modal button.close:active {
 	border-color: #c62641;
 	background-color: #c62641;
 	color: #fff;
 }

 #basket-modal button.close:focus {
 	border-color: #c62641;
 	background-color: #c62641;
 	color: #fff;
 }

 #basket-modal .modal-dialog {
 	margin-top: 100px;
  max-width: 800px;
 }

 #basket-modal .modal-title {
  width: 100%;
  margin-top: 0;
 }
 
 #basket-modal .btn-info {
    color: #fff;
    font-weight: bold;
    border-color: #0dcaf0;
    background-color: #0dcaf0;
 }

 #basket-modal .btn-info:hover {
    color: #0dcaf0;
    font-weight: bold;
    background-color: #fff;
 }


 #nicknames-list-modal .addtobasket {
 	color: #ff1654;
 	line-height: 20px;
 	padding: 2px;
 	height: 24px;
 	display: inline-block;
 	width: 24px;
 	text-align: center;
 	border-radius: 50%;
 	border: 1px solid #ff1654;
 	cursor: pointer;
 	margin-right: 10px;
 }

 #nicknames-list-modal .addtobasket:hover {
 	color: #aaa;
 	border: 1px solid #aaa;
 }

 #nicknames-list-modal .addtobasket .svg-inline--fa {
  	height: 18px;
  	margin: auto;
 }

 #basket-icon {
 	color: #c62641;
 	font-size: 20px;
 	cursor: pointer;
 }

 #basket-icon .count {
 	vertical-align: super;
    font-size: 70%;
    font-weight: bold;
 }

 .selected-button {
 	display: none;
 }

 .selected-button button {
 	width: 100%;
 }
.select2-dropdown--below {
    top: 25px; 
}

.top-nicknames .title h2 {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 2px solid #c62641;
}

.top-nicknames .topnickname h3 {
  color: #000;
  font-size: 18px;
  font-weight: 500;
}

.top-nicknames .topnickname h3 a {
  color: #c62641;
  font-size: 18px;
  font-weight: 500;
}

@media screen and (max-width: 576px) {
  .select2-dropdown--below {
    top: 40px; 
}
}