@charset "UTF-8";

/* PLugin Author */
.plugin-made-by {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0px;
  background: #000;
  border-radius: 10px;
  padding: 5px 0px;
  border: solid 1px #ffe;
}

.plugin-made-by .with {
  font-size: 10px;
  color: #8a8a8a;
}

.plugin-author {
  padding: 5px 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.plugin-author img {
  width: 65px;
  height: 33px;
  border-radius: 2px;
}


#gam-ajax-loader {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff98;
  backdrop-filter: blur(1.3px);
  -webkit-backdrop-filter: blur(1.3px);
}

/* --- Accessible helper (screen readers only) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Loader container --- */
.ripple-loader {
  --size: 64px;
  /* overall size */
  --ring: 3px;
  /* ring thickness */
  --color: #1e90ff;
  /* wave color */
  --duration: 1.6s;
  /* animation speed */

  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 24px auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .15));
}

/* Two ripples, staggered */
.ripple-loader::before,
.ripple-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--ring) solid var(--color);
  border-radius: 50%;
  opacity: 0;
  animation: ripple var(--duration) ease-out infinite;
}

.ripple-loader::after {
  animation-delay: calc(var(--duration) / 2);
}

/* The “drop” at the center (optional, comment out if not wanted) */
.ripple-loader>i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ring) * 2.2);
  height: calc(var(--ring) * 2.2);
  background: var(--color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(30, 144, 255, .15);
}

@keyframes ripple {
  0% {
    transform: scale(.2);
    opacity: .9;
  }

  70% {
    opacity: .25;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .ripple-loader::before,
  .ripple-loader::after {
    animation: none;
    opacity: 1;
  }
}

/* Loader End */
.gamadsmbai-wrapper {
  display: flex;
  min-height: 92vh;
  font-family: Arial, sans-serif;
}

.gam-left-menu {
  width: 15%;
  background: #23282d;
  color: #fff;
  padding: 20px 0;
  box-sizing: border-box;
  /* min-height: 100vh; */
  border-radius: 10px;
  position: relative;
}

.gam-left-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gam-left-menu ul li.gam-menu-item {
  /* padding: 12px 25px; */
  cursor: pointer;
  font-weight: 500;
  border-left: 4px solid transparent;
  margin-bottom: 2px;
  transition: background 0.3s ease, border-color 0.3s ease;
  color: #ffffff;
  border-bottom: solid 1px #424242;
}

.gam-left-menu ul li.gam-menu-item:hover,
.gam-left-menu ul li.gam-menu-item.active {
  background: #0074aa5b;
  border-left-color: #00a0d2;
  color: #a9d2e5;
}

.gam-left-menu ul li.gam-menu-item a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 8px 7px;
  color: inherit;
  text-decoration: none;

  &:hover {
    color: inherit;
  }
}

.gam-left-menu ul li.gam-menu-item a svg {
  width: 20px;
  height: 20px;
}

.gam-right-content {
  position: relative;
  width: 84%;
  padding: 22px;
  box-sizing: border-box;
  background: #fff;
  overflow-y: auto;
  border-radius: 0px 10px 10px 0px;
}

/* Dashboard tabs */
.gam-dashboard-tabs {
  margin-bottom: 15px;
}

.gam-dashboard-tabs button.gam-tab-button {
  background: #f7f7f7;
  border: 1px solid #ccc;
  padding: 8px 14px;
  margin-right: 5px;
  cursor: pointer;
  font-weight: 600;
  border-radius: 3px;
}

.gam-dashboard-tabs button.gam-tab-button.active {
  background: #46adea;
  color: #fff;
  border-color: #46adea;
}

.gam-dashboard-content {
  background: #f9f9f9;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Ad types list */
.gam-ad-types-list ul {
  list-style: none;
  padding: 0;
}

.gam-ad-types-list ul li.gam-ad-type-item {
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid #ddd;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  background: #f5f5f5;
}

.gam-ad-types-list ul li.gam-ad-type-item.active {
  border-color: #0073aa;
  background: #e3f2fd;
}

.gam-ad-type-status {
  margin-left: 10px;
}

.gam-ads-table {
  width: 100%;
  border-collapse: collapse;
  /* table-layout: fixed; */
  word-wrap: break-word;
}

.gam-ads-table tr:nth-child(even) {
  background-color: #f5fafd;
}

.gam-ads-table th,
.gam-ads-table td {
  border: 1px solid #e4e4e4;
  padding: 4px 5px;
  text-align: left;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: wrap;
  overflow: hidden;
  max-width: 120px;
}

.gam-ads-table th {
  background: #f0f0f0;
}

.gam-ads-table th:nth-child(1) {
  max-width: 50px;
}

.gam-ads-table th:nth-child(3),
.gam-ads-table th:nth-child(4) {
  max-width: 250px;
  /* Wider for longer content */
}

.gam-pagination {
  margin-top: 15px;
}

.gam-pagination button {
  margin-right: 5px;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #fff;
}

.gam-pagination button:disabled {
  background: #0073aa;
  color: #fff;
  border-color: #0073aa;
  cursor: default;
}

.manage_action_buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
}

button.gam-edit-ad,
button.gam-delete-ad,
button.gam-toggle-status {
  /* margin-right: 5px; */
  min-height: 24px;
  min-width: 26px;
  padding: 4px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* On/Off Slider START */
.gam-toggle-onoff-btn {
  position: relative;
  width: 50px;
  height: 26px;
  border: solid 1px #d8d8d8;
  border-radius: 50px;
  background: linear-gradient(2deg, #dddddd, transparent);
  cursor: pointer;
  overflow: hidden;
  font-family: sans-serif;
  font-weight: 600;
  transition: background 0.3s ease;
}

/* Sliding Circle */
.gam-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background:#7c7979c4;
  border: solid 1px #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  z-index: 2;
}

/* Labels */
.gam-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 300;
  z-index: 1;
  pointer-events: none;
}

.gam-on {
  left: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gam-off {
  right: 6px;
  color: #a7a5a5;
  transition: opacity 0.3s ease;
}

/* Active State */
.gam-toggle-onoff-btn.active {
  background: linear-gradient(2deg, #00fe26 25%, transparent);
  border: solid 1px #42e35a;
  color: #212121;
}

.gam-toggle-onoff-btn.active .gam-toggle-slider {
  transform: translateX(24px);
}

.gam-toggle-onoff-btn.active .gam-on {
  opacity: 1;
}

.gam-toggle-onoff-btn.active .gam-off {
  opacity: 0;
}

/* On/Off Slider END */

button.gam-delete-ad {
  background: linear-gradient(2deg, #fb8a64 40%, transparent);
  color: #fff;
  border: solid 1px #ff9c7a;
}

button.gam-delete-ad:hover {
  background: linear-gradient(2deg, #ef6c40 40%, transparent);
}

button.gam-edit-ad {
  background: linear-gradient(2deg, #47c4ff 40%, transparent);
  color: #fff;
  border: solid 1px #54beef;
}

button.gam-edit-ad:hover {
  background: linear-gradient(2deg, #14a5e9 40%, transparent);
}

button.gam-edit-ad svg,
button.gam-delete-ad svg {
  width: 14px;
  height: 14px;
}

/* .gam-toggle-status {
  padding: 4px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
} */

.gam-toggle-status[data-status="1"] {
  background: linear-gradient(2deg, #00fe26 25%, transparent);
  border: solid 1px #42e35a;
  color: #212121;
}

.gam-toggle-status[data-status="1"]:hover {
  background: linear-gradient(2deg, #3ee156 25%, transparent);
  margin-bottom: 3px;
}

.gam-toggle-status[data-status="0"] {
  background: linear-gradient(2deg, #dddddd, transparent);
  color: #a7a5a5;
  border: solid 1px #d8d8d8;
}

.gam-toggle-status[data-status="0"]:hover {
  background: linear-gradient(2deg, #cbcbcb, transparent);
  color: #2f2f2f;
  margin-bottom: 3px;
}

.gam-add-ad-wrapper {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  height: 100%;
}

.gam-ad-types {
  width: 20%;
  background: #f9f9f9;
  border-right: 1px solid #ccc;
  padding: 15px;
  box-sizing: border-box;
}

.gam-ad-type-item {
  padding: 10px 8px;
  margin-bottom: 8px;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ddd;
  transition: all 0.2s ease-in-out;
  overflow-wrap: break-word;
}

.gam-ad-type-item:hover {
  background: #eef9ff;
  border-color: #0073aa;
}

.gam-ad-type-item.active {
  border: 1px solid #0073aa;
  background-color: #e6f7ff;
}

.gam-ad-type-item.pro {
  border: 1px solid #f6dc70;
  background-color: #fefff7;
}

.gam-ad-type-item.pro_plus {
  border: 1px solid #ef34ff;
  background-color: #fcf5ff;
}

.gam-type-name {
  position: relative;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.gam-type-status {
  font-size: 12px;
  color: #666;
}

.status-circle {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.status-circle.active {
  background: green;
}

.status-circle.inactive {
  background: red;
}

.gam-ad-form-area {
  position: relative;
  width: 80%;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
}

#gam-ad-form {
  /* border: solid 1px #e9e9e9; */
}

.gam-ad-form-group {
  margin-bottom: 15px;
}

.gam-ad-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
}

.gam-ad-form-group input[type="text"],
.gam-ad-form-group select {
  width: auto;
  min-width: 215px;
  padding: 2px 8px;
  margin: 0%;
  border-radius: 4px;
  border-color: #dbdbdb;
  box-sizing: border-box;
}

.flex_position_div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.rev-row {
  flex-direction: row-reverse;
}

.enable_ad_btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.enable_ad_class {
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.enable_ad_class label {
  margin-bottom: 0%;
}

.active_devices {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.active_devices .device {
  width: 20px;
  padding: 3px;
  border: solid 2px #eaeaea;
  color: #919191;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.active_devices .device svg {
  width: 16px;
}

.active_devices .device.active {
  border-color: #77d159;
  color: #5fbe5f;
  background-image: linear-gradient(359deg, #e3fee3, #fbffd0);
}

.gam-ad-form-actions {
  margin-left: 0px;
}

.required {
  color: #f30000;
  margin-left: 2px;
}

.manual_mode_adunit_filter_block {
  width: 100%;
  box-sizing: border-box;
  margin: 0px 0px 10px 0px;
  padding: 0;
}

.manual_mode_adunit_wrapper .cm-s-darcula.CodeMirror {
  height: 200px !important;
  min-height: 200px !important;
  border: solid 2px #ededed !important;
  box-shadow: 1px 1px 3px #f1f1f1 !important;
  border-radius: 4px;
}

.filteradunit_process_indicator {
  width: auto;
  min-height: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.filter-steps {
  font-size: 12px;
  line-height: 1.6;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.filter-step {
  display: block;
  color: #666;
}

.filter-step.success {
  color: #49a806;
}

.filter-step.loading {
  color: #a0a0a0;
}

.filter-step.error {
  color: #b77d08;
}

.filter-step .check {
  margin-left: 6px;
  font-weight: bold;
}

#filteradunit_process_indicatorsvg {
  display: none;
  shape-rendering: auto;
  background: rgb(255, 255, 255);
}

#filteradunit_process_indicatorsvg.show {
  display: inline-block !important;
}

.open_filter_script_block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.open_filter_script_block #open_filter_code_editor {
  display: block;
  border-radius: 4px;
  background-image: linear-gradient(128deg, #eaeeff 0%, #ffffff 100%);
  border: solid 1px #3117e9;
  color: #3117e9;
  padding: 5px 8px;
  cursor: pointer;
}

.open_filter_script_block #open_filter_code_editor:hover {
  background-image: linear-gradient(204deg, #eaeeff 0%, #ffffff 100%);
}

#gam-ad-unit-wrapper {
  position: relative;
  width: 100%;
}

.gam-ad-unit-slot-x-size {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 25px;
  padding: 14px 0px;
}

.gam-ad-unit-x-slot,
.gam-ad-unit-x-size {
  width: 100%;
}

.gam-ad-unit-x-slot {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
}

.gam-ad-unit-x-slot .gam-ad-unit-main {
  width: 100%;
}

#gam_ad_unit {
  width: 100% !important;
}

.gam-ad-unit-x-size span {
  font-size: 12px;
  font-weight: 300;
  color: #7b7b7b;
}

.gam-selected-sizes {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  overflow: auto;
  margin-bottom: 4px;

}

.gam-tag {
  background: #007cba;
  color: white;
  padding: 0px 6px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-size: 13px;
}

.gam-tag .remove-tag {
  margin-left: 6px;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
}

.gam-sizes-select {
  position: relative;
  width: 100%;
}

#gam-size-search,
.gam-size-search {
  width: 100% !important;
  padding: 4px 8px;
  border: 1px solid #ddd;
}

.gam-sizes-dropdown {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  display: none;
  z-index: 100;
}

.gam-size-option {
  padding: 6px 10px;
  cursor: pointer;
}

.gam-size-option:hover {
  background: #007cba;
  color: white;
}

.gam-device-tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

.gam-device-tabs li {
  padding: 2px 10px;
  cursor: pointer;
  background: #f1f1f1;
  border: solid 1px #dbdbdb;
  border-radius: 3px;
}

.gam-device-tabs li:hover {
  background: #dedede;
}

.gam-device-tabs li.active {
  background: #f4fcff;
  border: solid 1px #3874d5;
}

.gam-size-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 6px 2px 0;
  padding: 2px 8px;
  border-radius: 12px;
  background: #eef3ff;
  font-size: 12px;
}

.gam-size-chip .remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}


#select-adunits {
  border: 1px solid #ccc;
  background: #fff;
  max-height: 250px;
  position: absolute;
  top: 74px;
  width: 47%;
  z-index: 999;
}

#adunit_options {
  overflow-y: auto;
  height: 23vh;
}

.gam-adunit-option {
  padding: 6px 10px;
  cursor: pointer;
}

.gam-adunit-option:hover,
.gam-adunit-option.selected {
  background: #0083c0;
  color: #fff;
}

#blocks {
  /* width: 100%; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0px;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 5px 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.blockid {
  width: 100%;
  min-height: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #898989;
  font-size: 12px;
  border: solid 2px #ffffff;
  border-bottom: solid 2px #dfdfdf;
  cursor: default;
  border-radius: 8px 8px 0px 0px;
  background: linear-gradient(#ffffff, #f5f5f5);
}

.blockid:hover {
  background: linear-gradient(#ffffff, #e3efff);
  color: #3c3c3c;
  border: solid 2px #e6edff;
  border-bottom: solid 1px #dfdfdf;
}

.blockid.selected {
  color: #1e1be1;
  border: solid 2px #265bf8 !important;
  border-bottom: solid 0px #ffffff !important;
  background: linear-gradient(#fff, #ced6ff);
}

.blockid.activeads {
  border-top-color: #81d558;
  border-left-color: #81d558;
  border-right-color: #81d558;
  color: #0a951f !important;
  background: linear-gradient(#fff, #d3ffb2);
}

.blockid.activeads:hover {
  color: #00510c !important;
}

.blockid.warnactiveads {
  border-top-color: #e8e8e8;
  border-left-color: #e8e8e8;
  border-right-color: #e8e8e8;
  background: linear-gradient(transparent, #e7e7e7);
}

.blockid.warnactiveads:hover {
  color: #000000 !important;
}

#ad-form-inputs {
  padding: 10px;
  margin-bottom: 15px;
}

.activeinactivebutton {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  background: linear-gradient(#f18989, #fffcf6);
  border: solid 1px #e7ad31;
  border-radius: 100px;
  cursor: pointer;
  margin: 0px 10px;
}

.activeinactivebutton.active {
  background: linear-gradient(#3fbd00, #dbffc8);
  border: solid 1px #3fbd00;
}

span.activeinactivebutton::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0px;
  padding: 11px 11px;
  border: solid 1px #eaeaea;
  border-radius: 4px;
  margin: -100%;
}

.visible_type_pages {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border: solid 1px #eaeaea;
  padding: 15px 0;
}

.visible_type_pages label {
  width: 30%;
  font-size: 12px;
  font-weight: 300;
  color: #7b7b7b;
}

#custom_position_field label,
#paragraph_position_field label {
  font-size: 12px;
  font-weight: 300;
  color: #7b7b7b;
}

.gam-refreshad-toggle {
  width: 100%;
}

#refreshad_intervel {
  width: 100%;
  min-width: 100px;
  height: 34px;
}

#gam-responsive-sizes,
#gam-normal-sizes {
  padding: 12px;
  border: 1px solid #ebebeb;
  background-color: #fdfdfd;
}

._eql_pad {
  padding: 0px;
}

.premium {
  width: 20px;
  height: 15px;
  position: absolute;
  bottom: -21px;
  right: 6px;
  font-size: 8px;
  padding: 1px;
  color: #ffab2d;
  border-radius: 2px;
}

.premium svg {
  width: 100%;
  height: 100%;
}

.premium_content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fefff71a;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.premium_content .gamadsmbai_pro_wrapper {
  width: 50%;
  min-height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border: 2px solid #f6dc70;
  background: #fefff7;
  border-radius: 10px;
}

.premium_content .gamadsmbai_pro_wrapper .pro_t {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.premium_content .gamadsmbai_pro_wrapper .pro_sb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.premium_content .gamadsmbai_pro_wrapper .pro_sb small {
  font-size: 11px;
  color: #c5a14c;
}

.premium_content .gamadsmbai_pro_wrapper .pro_sb button {
  padding: 15px 50px;
  background-color: #ed9f20;
  border: 1px solid #f6dc70;
  border-radius: 2px;
  color: #fff;
}

.premium_content .gamadsmbai_pro_wrapper .pro_sb button:hover {
  background-color: #e6940f20;
  color: #131313;
}

.premium_content .pro_plus {
  border: 1px solid #ef34ff;
  background-color: #fcf5ff;
}

.premium_content .pro_plus .pro_sb small {
  color: #ae34b9;
}

.premium_content .pro_plus .pro_sb button {
  background-color: #dd21ee;
  border: 1px solid #ea67f6;
}

.premium_content .pro_plus .pro_sb button:hover {
  background-color: #dd12ef32;
  color: #131313;
}

.floating_tooltip_on {
  cursor: help;
}

.floating_tooltip_box {
  max-width: 230px;
  position: fixed;
  pointer-events: none;
  background: #ffffff;
  color: #5e5e5e;
  padding: 8px 14px;
  border-radius: 3px;
  font-size: 12px;
  display: none;
  z-index: 9999;
  white-space: wrap;
  border: solid 1px #d9cdcd;
  /* box-shadow: 1px 1px 4px #dddddd; */
}

.premium_feature {
  color: #bebebe;
}

.settings_page {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  height: 100%;
}

.settings_tabs {
  width: 25%;
  height: 100%;
  background: #f8f8f8;
  border: 1px solid #ebebeb;
  /* padding: 0.5rem 0; */
  border-radius: 2px;
}

.settings_content {
  width: 100%;
}

.settings_content a {
  color: #777777;
}

.settings_tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* makes it wrap on small screens */
}

.settings_tabs li {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e9e9e9;
}

.settings_tabs button {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px 16px;
  margin: 0px;
  font-size: 12px;
  color: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
  text-align: justify;
}

.settings_tabs button:hover {
  background: #eee;
}

.settings_tabs button.active {
  background: #46adea;
  color: #fffefe;
}

.tab_content {
  padding: 0px 20px;
  background: #fff;
  /* border: 1px solid #ddd; */
  /* border-top: none; */
}

.tab_content h3 {
  margin: 0px 0px 16px 0px;
}

/* NOTICE BOX */
.components-notice {
  background-color: #ffffff !important;
  border: solid 1px #bdbdbd;
  border-left-width: 4px;
  margin-bottom: 10px;
}

.components-notice-list .components-notice__content {
  margin: 0%;
}

.components-notice__dismiss {
  margin: auto;
}


/* INLINE CSS UPDATED */
/* Settings.php */
#cnct_dv_hdng {
  padding: 10px;
  background-image: linear-gradient(1deg, #cff1b7, transparent);
  border: 1px solid #c3e6cb;
  color: #0a511b;
  margin-bottom: 15px;
}

#gam-disconnect {
  background: #f8f1d7;
  border: 1px solid #f2da91;
  color: #b08400;
  border-radius: 15px;
}

#warning_box,
.warning_box {
  padding: 10px;
  background-image: linear-gradient(1deg, #ffe5b4, transparent);
  border: 1px solid #daac1c;
  color: #382a02;
  margin-bottom: 15px;
}

.gamadsai_manual_mode_isactive {
  padding: 10px;
  background-image: linear-gradient(1deg, #e8e8ff, transparent);
  border: 1px solid #1c3fda;
  color: #1c3fda;
  margin-bottom: 15px;
  border-radius: 6px;
}

.authorizationboxcontent {
  border: dashed 1px #dadada;
  padding: 20px 15px;
  box-sizing: border-box;
  border-radius: 10px;
}

.authorizationboxcontent h3,
.authorizationboxcontent h2 {
  font-weight: 100;
}

#gam-auth-code {
  width: 400px;
}

#banner_labeling_content {
  display: none;
}

.banner_label_manage form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

/* manage-ads.php */
#gam-search-ads {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}

/* Modal/Popup */
.gam-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 999;
  padding: 20px;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  overflow: auto;
}

.gam-modal a {
  color: #777777;
}

.gam-modal-inner {
  background: #fff;
  padding: 20px;
  max-width: 760px;
  min-height: 100%;
  width: 100%;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); */
  border-radius: 6px;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
}

.gam-modal-title {
  margin: 5px 0px;
}

.gam-modal-inner form {
  padding: 4px 0px;
  transition: .6s cubic-bezier(0.39, 0.58, 0.57, 1);
}

#codepaste,
#NetworkSelect {
  opacity: 0;
  transition: .6s cubic-bezier(0.39, 0.58, 0.57, 1);
}

.settings_content #codepaste,
.settings_content #NetworkSelect {
  opacity: 1;
}

.gam-modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 0;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

.checkDefaultCofigsBox {
  padding: 8px 20px;
  border: solid 1px #bababa;
  background: #e8e7e7;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  /* box-shadow: 1px 1px 5px #eaeaea; */
}

.checkinputdefaultconfigs {
  width: 30px;
  height: 27px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.CheckDefaultBoxContent {
  width: 100%;
}

.CheckDefaultBoxContent p {
  margin: 2px 0;
}

.CheckDefaultBoxContent small {
  color: #727272
}

.recommended {
  padding: 3px 6px;
  background-color: #e8fff2;
  color: #169401;
  border-radius: 10px;
  font-size: 12px;
  border: solid 1px #89ca7e;
}

.SelftConfigsBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.SelftConfigsBox .gam-input-wrap {
  flex: 0 0 50%;
  box-sizing: border-box;
}

@media (max-width: 636px) {
  .SelftConfigsBox .gam-input-wrap {
    flex: 0 0 100%;
  }
}

#configinfoshare,
#allinfoshare {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 9999;
  min-width: 100px;
  min-height: 20px;
  padding: 10px;
  background: #ffffff;
  font-size: 12px;
  color: #727171;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  box-shadow: 1px 1px 3px #969696;
}

#configinfoshare::after,
#allinfoshare::after {
  content: '';
  width: 20px;
  height: 10px;
  background: #ffffff;
  transform: rotate(45deg);
  position: absolute;
  top: -2px;
  left: 2px;
  border: solid 1px #dbdbdb;
  border-width: 1px 0px 0px 1px;
}

/* .SelftConfigsBox .gam-input-wrap:last-child {
  flex: 0 0 100%;
} */

/* Eye and inputs */
.gam-input-wrap {
  padding: 8px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

.gam-input-wrap label {
  display: block;
}

.gam-input-wrap input {
  width: 100%;
  min-width: 250px;
  padding: 0px 8px;
  border: 1px solid #cececc;
}

.gam-eye-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  height: 34px;
  width: 36px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

#gam-setup-form h2 {
  font-size: 17px;
  font-weight: 400;
}

.gam-setup-form .submit {
  text-align: left;
  max-width: 100%;
  margin: 10px;
  padding: 10px;
}

/* Red-dot indicator: uses admin_body_class gam-needs-setup set earlier (if set) */
/* adjust selector to match your dashboard menu markup; common admin top-level selector example: */
body.gam-needs-setup #toplevel_page_gam-ads-ad-manager-and-ad-exchange-settings>a .wp-menu-name:after,
body.gam-needs-setup #toplevel_page_gam-ads-ad-manager-and-ad-exchange-settings>a .wp-menu-image:after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #d63638;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* spacing */
#gam-setup-status,
#gam-sync-status {
  margin-left: 12px;
}

.gam-config-alert-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #dc3545;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
}

.gam-config-fields label {
  display: block;
  margin-top: 10px;
  font-weight: 500;
}

.gam-password-wrapper {
  position: relative;
}

.gam-toggle-visibility {
  position: absolute;
  right: 8px;
  top: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.configheadingbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.configheadingbox h3 {
  font-weight: 400;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.gam-config-actions {
  min-width: 260px;
  padding: 10px 0px 10px 10px;
  text-align: end;
}

.gam-config-actions button {
  margin: 0 5px;
}


/* Premium Page */

/* === Premium Wrapper === */
.premium-wrap {
  width: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f6fa;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* === Center Card Container === */
.prmm-container {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 0px;
  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
  border: 1px solid #e3e6ef;
  animation: fadeUp 0.3s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Upload Form === */
.lic-key-frm small {
  display: block;
  font-size: 15px;
  color: #555;
  margin-bottom: 10px;
  font-weight: 500;
}

.lic-key-frm .lic-key-inp-box {
  display: block;
  width: 100%;
  padding: 12px;
  border: 2px dashed #b8c2cc;
  border-radius: 0px;
  background: #fafbff;
  cursor: pointer;
  transition: 0.2s;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.lic-key-frm .lic-key-inp-box input {
  width: 100%;
  padding: 0px;
  border: solid 1px #e1e1e1;
  border-radius: 0px;
}

.lic-key-frm .lic-key-inp-box:hover {
  border-color: #46adea;
  background: #f3f2ff;
}

.lic-key-frm button {
  width: 100%;
  padding: 12px;
  background: #46adea;
  border: none;
  color: white;
  border-radius: 0px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.25s ease;
}

.lic-key-frm button:hover {
  background: #38abed;
}

/* === Buy Premium Section === */
.new-lic-key-buy {
  margin-top: 30px;
  background: #f7f8ff;
  padding: 18px 15px;
  border-radius: 10px;
  border: 1px solid #e1e4fb;
  box-sizing: border-box;
}

.new-lic-key-buy p {
  margin: 0;
  font-size: 14px;
  color: #444;
  font-weight: 500;
}

.new-lic-key-buy a {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  background: #ff9f43;
  color: #fff;
  border-radius: 0px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: 0.2s;
}

.new-lic-key-buy a:hover {
  background: #e98828;
}

.premium-notice {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 6px;
  font-size: 14px;
}

.premium-error {
  background: #ffe5e5;
  border-left: 4px solid #cc0000;
}

.premium-warning {
  background: #fff4d6;
  border-left: 4px solid #f3a100;
}

.lic-status-box {
  background: #f9fafc;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #2271b1;
}

.status-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
}

.status-badge.active {
  background: #28a745;
}

.status-badge.expiring {
  background: #f3a100;
}

.status-badge.expired {
  background: #cc0000;
}

.masked-key {
  background: #eee;
  padding: 3px 6px;
  border-radius: 4px;
}

.lic-status-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.lic-status-table th,
.lic-status-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: 12px;
}

.lic-status-table th {
  width: 180px;
  font-weight: 600;
  color: #333;
}

.lic-status-table tr:last-child th,
.lic-status-table tr:last-child td {
  border-bottom: none;
}

.lic-action-row {
  display: flex;
  gap: 12px;
  margin-top: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.renew-btn,
.remove-lic-btn,
.refresh-lic-btn {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.renew-btn {
  background: #1276e1;
  color: #fff;
}

.renew-btn:hover {
  background: #1880ee;
  color: #cfd0ff;
}

.renew-btn.disabled {
  background: #74b7ff;
  color: #dedede;
  cursor: not-allowed;
}

.remove-lic-btn {
  background: #fff7d9;
  color: #c96f00;
}

.remove-lic-btn:hover {
  background: #ffeca9;
}

.refresh-lic-btn {
  background: #ebebeb;
  color: #3e3e3e;
}

.refresh-lic-btn:hover {
  background: #cbcbcb;
}

.msgbox {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 4px 0px;
}

#valdtnmsgbx small {
  margin: 0%;
  margin-bottom: 0%;
}

.msgbox svg {
  width: 40px;
  height: 40px;
}

.cm-s-darcula.CodeMirror {
  min-height: 500px !important;
  border: solid 2px #ededed !important;
  box-shadow: 1px 1px 3px #f1f1f1 !important;
}

.cm-s-darcula span.cm-tag {
  font-style: normal !important;
}


/* Popup Model Steps Animation */
.gam-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 0px 30px 0px;
  gap: 10px;
  font-family: sans-serif;
}

.form-setup-box {
  padding: 8px;
  border: 1px dashed #d9d9d9;
  padding: 10px 10px 10px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  max-height: 53px;
  transition: max-height 0.4s ease-in-out;
  box-sizing: border-box;
}

.onpen-config-box {
  max-height: 800px;
  border-color: #70da68;
}

.optionchoosebox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.optionchooseboxheadingspan {
  font-weight: 200;
}

.openConfigBoxButton {
  position: relative;
  right: 0%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border-radius: 50px;
  transform: rotate(0deg);
  transition: .5s ease;
}

.openConfigBoxButton:hover {
  background-color: #f6f6f6;
}

.openbtn {
  transform: rotate(90deg);
}

.defaultChecked::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0%;
  display: block;
  background-color: #fcfcfca3;
  z-index: +1;
  border-radius: 10px;
}

.gam-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.gam-step.active,
.gam-step.completed {
  opacity: 1;
}

.gam-step .circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcdcdc;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.4s ease;
}

.gam-step.completed .circle {
  background: #2ecc71;
  color: #fff;
}

.gam-step.completed .circle::before {
  content: "✓";
  font-size: 18px;
}

.gam-step.completed .circle {
  font-size: 0;
}

.gam-step.active .circle {
  background: #3498db;
  color: #fff;
}

.gam-step .label {
  margin-top: 6px;
  font-size: 12px;
}

.line {
  width: 80px;
  height: 2px;
  background: #ddd;
  position: relative;
  overflow: hidden;
}

.line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #2ecc71;
  transition: width 0.6s ease;
}

.line.filled::after {
  width: 100%;
}

.gam-button-danger {
  background: #ffefe9 !important;
  /* WP red */
  border-color: #d63638 !important;
  color: #d63638 !important;
}

.gam-button-danger:hover {
  background: #ffe1d6 !important;
  border-color: #ad0606 !important;
}

/* Label Help Box */
.label_help_box {
  text-align: center;
  padding: 20px 0;
  border-top: solid 1px #ededed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 30px 0px;
}

.label_inner_box {
  position: relative;
  margin: 10px;
}

.advrt_box_hovered_active {
  position: fixed;
  max-width: 300px;
  top: 30px;
  right: 15px;
  background: #ffffff;
  border: solid 1px #ebebeb;
  padding: 10px;
  border-radius: 8px;
}

.advrt_box_hovered_active::after {
  content: '';
  width: 20px;
  height: 10px;
  background: #ffffff;
  transform: rotate(45deg);
  position: absolute;
  top: -2.2px;
  left: 10px;
  border: solid 1px #dbdbdb;
  border-width: 1px 0px 0px 1px;
}

.label_help_title {
  display: block;
  color: #6d6d6d;
  font-style: italic;
  margin-bottom: 12px;
}

.label_inner_box img {
  width: 15rem;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.setting_form_box {
  position: relative;
  padding: 10px;
  border: dashed 1px #cecece;
  border-radius: 10px;
}

#gam-auth-code-popup-model {
  min-width: 80%;
  border: solid 1px #a1c2ff;
}

#gam-save-code-popup-model {
  background: #effcff;
  border: solid 1px #a1c2ff;
}

.need_help_box {
  border: dashed 1px #c3c3c3;
  padding: 10px;
  margin: 35px 0 0;
}

.skipnowbox {
  display: block;
}

#skipfornow {
  background: #f9fdff;
  border: solid 1px #ffffff;
  margin-inline-start: 85%;
  text-decoration: underline;
}

.help_wrap {
  width: auto;
}

.help_wrap a {
  text-decoration: none;
}

.help_page_title {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  margin: 10px auto;
}

.help_page_title h3 {
  font-weight: 400;
  font-size: 20px;
}

.help_page_context {
  width: 100%;
  display: flex;
  justify-self: flex-start;
  align-items: flex-start;
  gap: 16px;
}

._hlp_cntxt_main {
  width: 75%;
}

._hlp_support_bx_main {
  width: 20%;
  height: 100%;
  margin: 15px;
  padding: 10px;
  border: solid 1px #f1f1f1;
  border-radius: 10px;
}

._hlp_cntxt_clms {
  /* width: 100%; */
  border: solid 1px #f1f1f1;
  border-radius: 10px;
  padding: 15px;
  margin: 16px auto;
}

._hlp_cntxt_clms h4 {
  margin: 0px 0px 15px 0px;
  border: solid 1px #f1f1f1;
  border-width: 0px 0px 1px 0px;
  padding-bottom: 5px;
}

._help_card_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 15px;
}

._help_card {
  width: 100%;
  padding: 10px;
  border-right: solid 1px #eeeeec;
  box-sizing: border-box;
}

._help_card a {
  margin: 5px auto;
}

._hlpquickguidebox {
  border: solid 1px #efefef;
  border-radius: 10px;
}

._help_icon_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}

._help_icon_box ._hicon {
  width: 40px;
  height: 40px;
  background-color: #f3f9ff;
  border-radius: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

._help_icon_box ._hicon svg {
  width: 25px;
  height: 25px;
  margin: auto;
}

._help_card_cntxt {
  margin: 0;
}

._help_card_cntxt p {
  margin: 0;
}

/* Preview Model */
.previewOfAdModel {
  border: dashed 1px #ffe4bb;
  padding: 10px 0px;
}

.previewOfAdModel .show_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.previewOfAdModel .show_box .eyeicon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: solid 1px #ffe6d6;
  border-radius: 7px;
  background-color: #fff4e3;
  cursor: alias;
  padding: 5px 10px;
}

.previewOfAdModel .show_box .eyeicon:hover {
  background-color: #ffe5c5;
  border-color: #ffb774;
}

.previewOfAdModel .hide_box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: +99999;
  background: #ffffff9c;
  backdrop-filter: blur(1px);
  /* padding: 10px; */
  box-sizing: border-box;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s ease;
  /* transition: transform 0.35s cubic-bezier(.4,0,.2,1); */
}

.previewOfAdModel .hide_box.active {
  transform: scaleY(1);
}

.previewOfAdModel .hide_box .preview_box {
  width: 100%;
  height: 100%;
  background: #fff;
  border: dashed 1px #ffcaa0;
  /* padding: 10px; */
  box-sizing: border-box;
}

.previewOfAdModel .hide_box .preview_box .preview_title_of_the_ad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: dashed 1px #ffcaa0;
  padding: 5px 10px;
  background: #ffffff;
}

.previewOfAdModel .hide_box .preview_box .preview_title_of_the_ad h4 {
  margin: 8px 0px;
  font-weight: 400;
}

#closepreviewmodebutton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

#closepreviewmodebutton:hover {
  background: #f6f9ff;
}

#closepreviewmodebutton svg {
  width: 100%;
  height: 100%;
}

.previewOfAdModel .hide_box .preview_box .preview_box_options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  /* margin: 12px auto; */
}

.display_overlay_demo_ad {
  width: 100%;
  height: auto;
  overflow-y: auto;
  margin-bottom: 8px;
}

.display_overlay_demo_ad iframe {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
  border: 0;
}

/* Adtype About Tooltip box */
.ad_type_represent_help {
  cursor: help;
}

.represnt_adtype_help {
  display: none;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  position: fixed;
  max-width: 300px;
  top: 30px;
  right: 15px;
  background: #ffffff;
  border: solid 1px #ebebeb;
  border-radius: 8px;
  z-index: 99;
  box-shadow: 1px 2px 5px 2px #dce9ff;
}

.showhelp {
  display: flex;
}

.showhelpuppointer {
  box-shadow: 1px 0px 5px 2px #dce9ff;
}

.showhelpuppointer::after {
  top: auto !important;
  bottom: -2.2px !important;
  transform: rotate(135deg) scaleX(-1) !important;
}

.represnt_adtype_help::after {
  content: '';
  width: 20px;
  height: 10px;
  background: #ffffff;
  transform: rotate(45deg);
  position: absolute;
  top: -2.2px;
  left: 10px;
  border: solid 1px #dbdbdb;
  border-width: 1px 0px 0px 1px;
}

.adtype_layout_help_box {
  position: relative;
  margin: 10px auto;
  width: 100%;
  max-height: 44vh;
  overflow-y: auto;
  border-radius: 10px;
  z-index: +1;
}

.adtype_layout_help_box span {
  display: block;
  margin: 4px 0;
}

.adtype_layout_help_box img {
  width: 100%;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.label_help_title {
  display: block;
  color: #6d6d6d;
  font-style: italic;
  margin-bottom: 12px;
}

/* Playground Mimic Body */
.playground {
  background: #f5f6f7;
  padding-bottom: 5px;
  font-family: Arial, sans-serif;
}

.playground-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: 10px 0px; */
  background: #ffffff;
  padding: 8px 10px;
  box-shadow: 0px 0px 4px 3px #e4e4e4;
}

.playgroundchangedivece {
  display: flex;
  gap: 10px;
}

.playgroundchangedivece button {
  padding: 8px 14px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

.playgroundchangedivece button.active {
  background: #2271b1;
  color: #fff;
}

.canvas-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #ccc;
  background: #ddd;
  padding: 20px;
  max-height: calc(var(--vhmimicadplaygrndDiviseBox) * 68);
  margin: 15px;
}

/* Canvas sizes */
.site-canvas {
  background: #fff;
  margin: auto;
  /* min-height: 800px; */
}

/* Device widths */
.site-canvas.desktop {
  width: 1200px;
}

.site-canvas.tablet {
  width: 768px;
}

.site-canvas.mobile {
  width: 375px;
}

/* Layout */
.site-header,
.site-footer {
  background: #111;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.site-main {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.site-canvas.mobile .site-main {
  flex-direction: column;
}

.content {
  flex: 3;
}

.sidebar {
  flex: 1;
}

/* Ad slots */
.ad-slot {
  border: 1px dashed #999;
  margin: 15px 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background: #fafafa;
}

.ad-top {
  min-height: 90px;
}

.ad-sidebar {
  min-height: 250px;
}

.ad-anchor {
  position: sticky;
  bottom: 0;
  background: #fffbe6;
}

/* Welcome Box */
.welcome_box {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: +1;
  box-sizing: border-box;
  text-align: center;
  transition: .8s cubic-bezier(0.6, -0.28, 0.74, 0.05);
}

.welcome_block {
  /* background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%); */
  background: linear-gradient(135deg, #f8ecec 0%, #d6e6ff 100%);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 50px 40px;
  text-align: center;
  max-width: 650px;
  margin: 60px auto;
  /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05); */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.welcome_block:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08);
}

.welcome_brand img {
  width: 90px;
  height: auto;
  /* margin-bottom: 20px; */
  padding: 0px;
  background: #fff;
  border-radius: 6px;
}

.welcome_block h1 {
  font-size: 28px;
  font-weight: 200;
  margin-bottom: 12px;
  color: #1f2937;
}

.welcome_subtext {
  font-size: 14px;
  color: #4d6cd4;
  margin-bottom: 30px;
  line-height: 1.6;
}

.welcome_actions .button-primary {
  padding: 6px 22px;
  font-size: 14px;
  border-radius: 6px;
  background-color: #3117e9;
  transition: background 0.2s ease, transform 0.2s ease;
  margin: 2px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.welcome_actions .button-primary:hover {
  transform: translateY(-2px);
  background-color: #4a34eb
}

#gamadsai_manual_mode {
  /* background-image: linear-gradient(128deg, #f9fdff 0%, #ffffff 100%);
  cursor: pointer;
  text-decoration: underline;
  border: solid 1px #ffffff;
  color: #3117e9;
  border-radius: 15px; */
  padding: 6.7px 10px;
  border: none;
}

/* #gamadsai_manual_mode:hover {
  color: #000;
  background-image: linear-gradient(204deg, #eaeeff 0%, #ffffff 100%);
} */

.welcome_badge {
  display: inline-block;
  background: #eef2ff;
  color: #4f46e5;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
}


#NetworkSelect .button,
#gam-save-code,
#gam-select-network-form .button,
#refetchNetworks,
#banner_label_mng_frm .button,
#gam-revoke-default,
#gam-save-code-popup-model,
#gam-select-network-form-popup-model .button {
  background-image: linear-gradient(128deg, #eaeeff 0%, #ffffff 100%);
  border: solid 1px #3117e9;
  color: #3117e9;
  border-radius: 15px;
  transition: 0s ease-in-out !important;
}

#NetworkSelect .button:hover,
#gam-save-code:hover,
#gam-select-network-form .button:hover,
#refetchNetworks:hover,
#banner_label_mng_frm .button:hover,
#gam-revoke-default:hover,
#gam-save-code-popup-model:hover,
#gam-select-network-form-popup-model .button:hover {
  background-image: linear-gradient(204deg, #eaeeff 0%, #ffffff 100%);
}

.button-primary,
#gam-save-config,
#gam-save-credentials,
#gam-save-credentials2,
a#gam-redirect-link,
#gamadsai_manual_mode {
  background-image: linear-gradient(128deg, #3117e9 0%, #6455d9 100%);
  color: #ffffff;
  border-radius: 15px;
  transition: 1s ease-in-out;
}

.button-primary:hover,
#gam-save-config:hover,
#gam-save-credentials:hover,
#gam-save-credentials2:hover,
a#gam-redirect-link:hover,
#gamadsai_manual_mode:hover {
  background-image: linear-gradient(204deg, #3117e9 0%, #5a46f2 100%);
  color: #ececec;
}

/* Inline Devider */
.inline-devider {
  display: inline-block;
  min-width: 60px;
  text-align: center;
}