/* control pannel */
.pannel {
  display: block;
  background-color: #272727;
  padding: 15px;
  font-size: 14px;
}

/* Style the tab */
.tab button {
  font-family: Sukumvit Set, Arial, Helvetica, Sans-serif, Geneva;
}

.tab {
  color: #eee;
  font-family: Sukumvit Set, Arial, Helvetica, Sans-serif, Geneva;
  font-size: 14px;
  font-weight: 100;
  overflow: hidden;
  border-radius: 8px;
  background-color: #3d3d3d;
  border: 2px solid #161616b7;
}

.tabSettings {
  overflow: hidden;
  border-radius: 8px;
  background-color: #3d3d3d;
  border: 1px solid #161616b7;
  -webkit-transition-property: width;
  /* Safari */
  -webkit-transition-duration: 1s;
  /* Safari */
  transition-property: width;
  transition-duration: 1s;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tabSettings button {
  background-color: #3d3d3d;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 8px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
  color: #3d3d3d;
}

.tabSettings button:hover {
  background-color: #ddd;
  color: #3d3d3d;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #e8f5fd;
  color: #1c9cf1;
}

.tabSettings button.active {
  background-color: #e8f5fd;
  color: #1c9cf1;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.paneltab {
  display: none;
  padding: 6px 12px;
  border: 0px solid #ccc;
  border-top: none;
}

.paneltab input {
  background-color: #eee;
}

.modalDialog {
  position: fixed;
  /**	font-family: Arial, Helvetica, sans-serif; **/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>div {
  width: 60%;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #ffffff23;
  background: -moz-linear-gradient(#ffffff3b 3b, #99999950 50);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.modalDialog label {
  font-weight: normal;
  font-size: smaller;
}

.modalDialog .btn {
  padding: 2px;
}

.close-panel {
  background: #ff0000;
  /* เปลี่ยนสีพื้นหลังเป็นสีเทาเข้ม */
  color: #FFFFFF;
  /* สีตัวอักษรเป็นสีขาว */
  width: 30px;
  /* ตั้งค่า width */
  height: 30px;
  /* ตั้งค่า height ให้เท่ากับ width */
  line-height: 1;
  /* ตั้งค่า line-height ให้เท่ากับ height */
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  -webkit-border-radius: 50%;
  /* ตั้งค่า border-radius เป็น 50% เพื่อให้เป็นวงกลม */
  -moz-border-radius: 50%;
  /* ตั้งค่า border-radius เป็น 50% เพื่อให้เป็นวงกลม */
  border-radius: 50%;
  /* ตั้งค่า border-radius เป็น 50% เพื่อให้เป็นวงกลม */
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close-panel:hover {
  background: #cc6d00;
  /* เปลี่ยนสีพื้นหลังเมื่อ hover เป็นสีฟ้าเข้ม */
}

summary::-webkit-details-marker {
  color: blue;
}

summary:focus {
  outline-style: none;
}

details[open] {
  outline: 1px solid red;
}

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

.edit-able {
  cursor: context-menu;
}

#outputTXT {
  width: 90%;
  height: 500px;
}

blockquote {
  width: 40%;
  border-color: #606061;
  border-width: 1px;
  border-style: dashed;
  color: #333;
}

#Options .form-inline {
  font-size: 14px;
  margin: 40px 0px;
  color: #333;
}

#Options p {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

#settingsPanel {
  padding: 15px;
  margin-bottom: 5px;
  color: #eee;
  width: 96%;
  background-color: #272727;
  z-index: 99;
  position: fixed;
  border: 4px groove #e89e9e;
  box-shadow: 5px 5px 5px #a2a2a3;
  right: 2%;
  left: 2%;
  bottom: 0;
  visibility: hidden;
  -webkit-transition-property: width;
  /* Safari */
  -webkit-transition-duration: 1s;
  /* Safari */
  transition-property: width;
  transition-duration: 1s;
  font-size: 14px;
}

#closeSettingsPanel {
  color: #ffffff;
}

.spaceX {
  height: 300px;
}

div[id^='option_'] {
  padding: 10px 5px;
}

.style1 {
  margin-bottom: 10px;
}

.style2 {
  padding-left: 0px;
}

.style3 {
  margin-top: 20px;
}

/**
  div[id^='setting_']{
   visibility: hidden;
  }
  **/