/*
 전체 페이지의 z-index 구조

popup : blockly scroll 때문에 20이상 되어야함
popup : blockly menu 때문에 70이상 되어야함

    로그인 및 회원가입시 출력 divPopup 100
    로그인 및 회원가입시 출력 백그라운드 99
    DarkPopup_add 100  
    DarkPopup_add close 100  

blockAI.php 페이지 hearder 90
*/

* {
  font-family: "Spoqa Han Sans Neo", "sans-serif";
}

.nonStyle {
  padding: 0;
  margin: 0;
  border: 0;
}

.nonStyleTable,
.nonStyleTable tr,
.nonStyleTable tr td {
  padding: 0;
  margin: 0;
  border: 0;
}

.fillInput {
  height: 100%;
  width: 100%;
}

.white {
  color: #c8ffc8;
}

/* join or popup button */
.button_orange_small {
  width: 80px;
  background-color: rgba(47, 138, 21, 0.1);
  border: 2px solid #333;
  color: #fff;
  padding: 0 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px;
  line-height: 30px;
  cursor: pointer;
  border-radius: 10px;
}

.button_orange_big {
  width: 100px;
  background-color: rgba(47, 138, 21, 0.1);
  border: 2px solid #333;
  color: #fff;
  padding: 0 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 4px;
  line-height: 50px;
  cursor: pointer;
  border-radius: 10px;
}
.button_orange_big:hover,
.button_orange_small:hover {
  background-color: rgba(47, 138, 21, 0.1);
  border-color: #ff8000;
  color: #ff8000;
  letter-spacing: 5px;
}

.button_mint_small {
  width: 80px;
  background-color: #cfffe5;
  border: 2px solid #3eb489;
  color: #3eb489;
  padding: 0 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px;
  line-height: 30px;
  cursor: pointer;
  border-radius: 10px;
}

.button_mint_small:hover {
  /* background-color: rgba(47, 138, 21, 0.1); */
  background-color: #cfffe5;
  border-color: #3eb489;
  color: #3eb489;
  letter-spacing: 5px;
}

/* intent add button */
.plus-button--small {
  font-size: 12px;
}

.plus-button {
  border: 2px solid lightgrey;
  background-color: #fff;
  font-size: 16px;
  height: 1.5em;
  width: 1.5em;
  border-radius: 999px;
  position: relative;
  cursor: hand;
}

.plus-button:before {
  height: 1em;
  width: 0.2em;
}

.plus-button:after {
  height: 0.2em;
  width: 1em;
}

.plus-button:after,
.plus-button:before {
  content: "";
  display: block;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* table */
.jb-content {
  /* width: 234px; */
  /* padding : 20p; */
  margin: 10px 5px;

  float: left;
  border: 3px solid #3eb489;
  font-size: 14px;
  cursor: hand;
  border-radius: 10px;
}

.jb-content-inner {
  padding: 5px;
  /* background-color: red; */
}

.jb-content:hover {
  background-color: #37c3c3;
}

.jb-content-head {
  font-weight: 700;
  font-size: 16px;
  /* margin:0px 10px 10px 10px;
    padding: 0; */
  word-break: break-all;
}

.jb-content-desc {
  font-size: 12px;
  /* margin:0px 10px 10px 10px;
    padding: 0; */
  word-break: break-all;
}

.jb-content-foot {
  font-size: 10px;
}

.jb-contents_wrapper {
  width: 1000px;
  margin-bottom: 40px;
  overflow-y: auto;
  /* overflow-x: hidden; */
}

.jb_table {
  /* font-family : ""; */
  border-collapse: collapse;
  width: 1000px;
  border: 1px solid #bcbcbc;
  margin: auto;
  padding-bottom: 30px;
}

.jb_table tr:nth-child(even) {
  background-color: #f2f2f2;
}
.jb_table tr:hover {
  background-color: #ddd;
}
.jb_table tr {
  padding: 15px;
  text-align: left;
  background-color: #4caf50;
  color: white;
}
.jb_table td {
  padding: 8px;
  text-align: left;
}
.dropbtn {
  background-color: #4caf50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

/*
----------------------------- divpopup.css ---------------------------------------
*/

/* join Popup */
.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 99;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.white_content {
  display: none;
  position: absolute;
  /* top: 25%;
    left: 25%;
    width: 50%;
    height: 50%; */
  padding: 5px;
  border: 5px solid #3eb489;
  background-color: white;
  z-index: 100;
  overflow: auto;
  border-radius: 10px;
}

.white_content a,
.white_content div {
  color: #000000;
}

.white_content table,
.white_content table iframe {
  width: 100%;
  height: 100%;
}

.white_content table {
  width: 100%;
  height: 100%;
}

.white_content table tfoot {
  width: 100%;
  height: 50px;
  text-align: center;
}

/* dom popup close button  */
/* https://freefrontend.com/css-close-buttons/
https://codepen.io/rsbear/pen/ZpXJVp */

.close-container {
  position: relative;
  margin: auto;
  width: 20px;
  height: 20px;
  /* margin-top: 100px; */
  cursor: pointer;
}

.leftright {
  height: 4px;
  width: 20px;
  position: absolute;
  margin-top: 8px;
  background-color: #f4a259;
  border-radius: 2px;
  transform: rotate(45deg);
  transition: all 0.3s ease-in;
}

.rightleft {
  height: 4px;
  width: 20px;
  position: absolute;
  margin-top: 8px;
  background-color: #f4a259;
  border-radius: 2px;
  transform: rotate(-45deg);
  transition: all 0.3s ease-in;
}

.close {
  /* margin: 10px 0 0 5px;
    margin-right: 20px; */
  font-size: 0.8em;
  color: black;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease-in;
  position: absolute;
}

.close:hover {
  border-color: #3eb489;
  color: #3eb489;
  letter-spacing: 5px;
}

.close-container:hover .leftright {
  transform: rotate(-45deg);
  background-color: #f25c66;
}
.close-container:hover .rightleft {
  transform: rotate(45deg);
  background-color: #f25c66;
}
.close-container:hover label {
  opacity: 1;
}