/* body {
  background: url("/static/pics/BG.jpg") no-repeat center center fixed;
  background-size: cover; 
  height: 100%;
  min-height: 100%;
  min-width: 320px; 
} */

.modal-content{
  /* background: url("/static/pics/BG.jpg") no-repeat center center fixed;
  background-size: cover; */
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.modal-fullscreen .modal-content {
    border-radius: 0;
    margin: 0;
    width: 100vw;
    max-width: 1320px;
    min-height: 100vh;
    height: 100vh;
    box-shadow: none;
    border: none;
    padding: 0;
    overflow: hidden;
}



.modal-dialog {
    max-width: 1480px;
    width: 95%;
    margin: 20 0 0 20;
    padding: 0;
}

#modalCardCutin:not(:empty){
  background-color: rgb(45, 123, 240);
  padding: 10px 3px 10px 10px;
  color:#fff;
  border-radius: 10px;
}
#modalCardDisguise:not(:empty){
  background-color: rgb(173, 78, 118);
  padding: 10px 3px 10px 10px;
  color:#fff;
  border-radius: 10px;
}
#modalCardHirameki:not(:empty){
  background-color: rgb(194, 41, 41);
  padding: 10px 3px 10px 10px;
  color:#ffffff;
  border-radius: 10px;
}

@media (max-width: 576px) {
  .cc_img_list {
    width: 100% !important;
    max-width: 100px !important;
    height: auto !important;
  }
}

.cc_img_list {
  width: 100%;
  max-width: 176px;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s;
}

.div_cc_img {
  display: inline-block;
  margin: 1px;  /*Adjust space between items*/
  /* border: 1px solid #ddd; */
  overflow: hidden;
  vertical-align: top;
  cursor: pointer;
  transition: transform 0.2s;
}

.div_cc_img:hover {
  transform: scale(1.25); /* Slight zoom effect */
}