path {
  transition: transform 1s;
}

#regions a:hover,
#librarys a:hover {
  color: black;
}
#regions a.regionText {
  color: black;
}
#regions a.active {
  background-color: #7db9e8;
}
.selected {
  background-color: #bfd5e6;
}

#regions a.regionTextSum:hover,
#regions a.regionText:hover,
#librarys a.library:hover {
  background-color: #7db9e8;
}
path.region {
  fill: #fff;
  stroke-width: 1 !important;
  transition: fill .6s ease;
}
path.region.selected {
  fill: #bfd5e6;
}
path.region.active {
  fill: #7db9e8 !important;
  stroke-width: 4 !important;
}
.numOfReg {
  float: right;
}

svg a path {
  fill: #fff;
  pointer-events: none;
}

svg a:hover path {
  fill: #7db9e8 !important;
  animation: mymove 0.7s 1;
}
/* TEST */
svg a path text {
  pointer-events: auto;
}

svg a path text:hover {
  fill: #7db9e8 !important;
  animation: mymove 0.7s 1;
}
/* TEST */

svg g.regionGroup {
	filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));
}

@keyframes mymove {
  from {
    fill: #fff;
  }
  to {
    fill: #7db9e8;
  }
}

@media screen and (min-width: 200px) {
  #librarys {
    column-count: 1;
  }
  .library {
    width: 100%;
    text-align: left;
  }
}

@media screen and (min-width: 1200px) {
  #librarys {
    column-count: 1;
  }
}

@media screen and (min-width: 1500px) {
  #librarys {
    column-count: 2;
  }
}
/*
@media screen and (min-width: 2200px) {
  #librarys {
    column-count: 3;
  }
}
*/

@media screen and (max-height: 699px) and (min-height:500px) {
	.btn{
		padding: .1rem .1rem;
		font-size: .8rem;
	}
}
@media screen and (max-height: 820px) and (min-height:700px) {
	.btn{
		padding: .3rem .1rem;
		font-size: .9rem;
	}
}

/*
@media (min-width: 576px){
  .container {
    max-width: none !important;
  }
}
@media (min-width: 768px){
  .container {
    max-width: none !important;
  }
}
@media (min-width: 992px){
  .container {
      max-width: 992px !important;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
*/