.base {
  padding: 10px 30px;
  composes: flex from "../../commoncss/flex.module.css";
  composes: column from "../../commoncss/flex.module.css";
}

.header {
  composes: flex from "../../commoncss/flex.module.css";
  composes: column from "../../commoncss/flex.module.css";
  width: 100%;
}

.header__title {
  composes: flex from "../../commoncss/flex.module.css";
  composes: row from "../../commoncss/flex.module.css";
  composes: align_center_vertical from "../../commoncss/flex.module.css";
  composes: justify_between from "../../commoncss/flex.module.css";
}

.header__title_label {
  composes: flex from "../../commoncss/flex.module.css";
  font-size: 1.5625rem;
  font-weight: normal;
}

.header__img_label {
  composes: flex from "../../commoncss/flex.module.css";
}
.header__img {
  border-radius: 18px;
}

.header__description {
  composes: flex from "../../commoncss/flex.module.css";
  font-size: 1.125rem;
  padding: 2px;
  margin: 0;
}

.tabs_viewer_controller {
  composes: flex from "../../commoncss/flex.module.css";
  width: 100%;
}

.tabs_viewer {
  composes: flex from "../../commoncss/flex.module.css";
  composes: column from "../../commoncss/flex.module.css";
  width: 100%;
}

.tabs_list_container {
  composes: flex from "../../commoncss/flex.module.css";
  composes: justify_between from "../../commoncss/flex.module.css";
  padding: 3px 0px;
  width: 100%;

  position: sticky;
  top: 0px;
  z-index: 2;
  background-color: #ffffff;
}

.tabs_list {
  composes: flex from "../../commoncss/flex.module.css";
  width: 100%;
  composes: align_center_vertical from "../../commoncss/flex.module.css";
  composes: justify_start from "../../commoncss/flex.module.css";
  padding: 8px 15px;
  background-color: #f0f1f3;
  border-radius: 5px;
  box-shadow: 1px 1px rgb(0 0 0 / 20%);

  composes: wrap from "../../commoncss/flex.module.css";
  gap: 10px;
  list-style: none;
}

.tabs_item_box {
  flex-basis: 15%;
}

.tab__item {
  composes: flex from "../../commoncss/flex.module.css";
  padding: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  composes: justify_center from "../../commoncss/flex.module.css";
  border-radius: 5px;
  white-space: nowrap;
}

.tab__item:hover {
  background-color: #e7e7e7;
}

.tabs_contents {
  composes: flex from "../../commoncss/flex.module.css";
  composes: column from "../../commoncss/flex.module.css";
  width: 100%;
}

.tabs_content__item {
  composes: flex from "../../commoncss/flex.module.css";
  composes: column from "../../commoncss/flex.module.css";
  padding: 15px;
}

.tabs_content__item__header {
  composes: flex from "../../commoncss/flex.module.css";
  composes: align_center_vertical from "../../commoncss/flex.module.css";
  font-size: 1.875rem;
  padding: 8px;
  column-gap: 10px;
}

.iconOption {
  cursor: pointer;
}
.icon_source_keyboard{

}

/*.tabs_content__item__header:focus{*/
/*    background-color: yellow;*/
/*}*/

.tabs_content__item__description {
  composes: flex from "../../commoncss/flex.module.css";
  font-size: 1rem;
  padding: 0px 5px 5px 17px;
  color: rgb(66 66 66 / 72%);
}

.tabs_components_list_view {
  composes: flex from "../../commoncss/flex.module.css";
  composes: column from "../../commoncss/flex.module.css";
  composes: align_center_vertical from "../../commoncss/flex.module.css";
  padding: 10px;
  position: relative;
}

.tabs_components_list {
  composes: flex from "../../commoncss/flex.module.css";
  composes: row from "../../commoncss/flex.module.css";
  composes: wrap from "../../commoncss/flex.module.css";
  row-gap: 25px;
  column-gap: 19px;
  align-items: start;
  composes: justify_center from "../../commoncss/flex.module.css";
  width: 100%;
  border: 1px solid #b1b1b1;
  border-radius: 5px;
  padding: 10px 0px;
}

.tabs_component__item {
  composes: flex from "../../commoncss/flex.module.css";
  padding: 10px;
  box-sizing: border-box;
  /* padding: 10px 50px 10px 0px; */
}

.program_focus_option{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    outline: none;
    border: none;
    opacity: 0;
    position: absolute;
    left: 20px;
    top: 20px;
    background-color: royalblue;
    transition: all 0.2s;

}
.program_focus_option:focus{
    width: 15px;
    height: 15px;
    opacity: 1;
    box-shadow: 0 0 0 3px #a7b8ed;
}

/* red theme */

.red .tab__item:hover {
  color: #d32f2f;
}
.red .tab__item.active,
.dark.red .tab__item.active {
  background-color: #d50000;
  color: #fff;
}

/* blue theme */

.blue .tab__item:hover {
  background-color: rgba(25, 77, 128, 0.12);
  color: #03649c;
}
.blue .tab__item.active,
.dark.blue .tab__item.active {
  background-color: #2962ff;
  color: #fff;
}

/* green theme */

.green .tab__item:hover {
  color: #33691e;
}
.green .tab__item.active,
.dark.green .tab__item.active {
  background-color: #009a5a; /* #00c853; */
  color: #fff;
}

/* yellow theme */

.yellow .tab__item:hover {
  color: #f9a825;
}
.yellow .tab__item.active,
.dark.yellow .tab__item.active {
  background-color: #fbc02d;
  color: #000;
}

/* orange theme */

.orange .tab__item:hover {
  color: #e65100;
}
.orange .tab__item.active,
.dark.orange .tab__item.active {
  background-color: #ff6d00;
  color: #fff;
}

/* whiteness theme */

.whiteness .tab__item.active {
  color: #03649c;
}
.whiteness .tab__item:hover {
  color: #03649c;
}

/* Dark mode */

.dark.base {
  background-color: #2e2d29;
  color: #ffffff;
}
.dark .tabs_list {
  background-color: #111;
  color: #d5d5d5;
}
.dark .tab__item.active,
.dark .tab__item:hover {
  background-color: #2c2c2c;
  color: #d5d5d5;
}
.dark .tabs_list_container {
  padding: 0;
  margin: 3px 0px;
  background-color: #2e2d29;
}
.dark .tabs_content__item__description {
  color: #e3e3e3;
}

/* decoration options.module.css */
.dec_flex {
  display: flex;
}
.dec_last_item_fullwidth:last-child {
  flex-basis: 100%;
}

.dec_item_fullwidth {
  width: 100%;
}

.dec_item_halfwidth {
  width: 50%;
}

.dec_item_quarterwidth {
  width: 25%;
}
.dec_column {
  flex-direction: column;
}
.dec_justify_start {
  justify-content: start;
}

/*code editor*/
.code_player {
  border: 1px solid;
  background-color: #2e2c2c;
  composes: flex from "../../commoncss/flex.module.css";
  composes: column from "../../commoncss/flex.module.css";
  width: 100%;
  margin-top: 25px;
  border-radius: 5px;
  font-size: 0.8125rem;
}
.sp_layout {
  font-size: 0.875rem;
}
.sp_layout > .sp_stack:last-child {
  display: none !important;
}

.sp_layout :global(.cm-lineWrapping) {
  tab-size: 0 !important;
  padding: 22px;
}

.sp_layout :global(.cm-editor) {
  border-radius: 5px;
}



@media only screen and (max-width: 600px) {
    .code_player{
      display: none;
    }

    .icon_source{
      display: none;
    }

  
}
