@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,800;0,900;1,400;1,600;1,800&display=swap');

* {font-family: Nunito, sans-serif;}


body {
    padding-top:.5rem;
    background-color: #999999;
  }
  
  .main_container {
    background-color:white;
    border-radius:.4rem;
    min-height:90vh;
  }
  
  .footer_container {
    margin-top: .5rem;
    padding-bottom: .5rem;
  }

  .navi_row {
    background-color: #282561;
  }
  
  .navi {
    padding:.3rem;
    padding-left:.7rem;
    border-radius:.4rem;
    font-size: 1.1rem;
    font-weight:bold;
    background-color: #282561;
  }

  a {
    text-decoration:none;
  }

  a:hover {
    text-decoration: underline;
  }

  .navi, .navi *, .navi a:hover {
    color: rgb(235, 248, 253);
  }

  .admin_dashboard_icon, .admin_dashboard_icon h4 {
    text-align: center;
    cursor: pointer;
  }

  input[type="text"]:not(.form-control), input[type="password"]:not(.form-control) {
    width: 10rem !important;
  }

  input[type="text"].wide {
    width: 15rem !important;
  }

  input[type="text"].narrow {
    width: 5rem !important;
  }

  input.w-100, textarea.w-100 {
    width: 100% !important;
  }

h1, h2, h3, h4, h5 {
  font-weight: 800;
}

.notify_buttons_container {
  text-align: right;
}

td {
  padding: .2rem;
}

.tag-cloud input, .tag-cloud button {
  margin: .2rem;
}

.hide_me  {
  display: none !important;
}

.fa-window-close, .fa-square, .fa-check-square {
  cursor: pointer;
}

.to_update {
  background-color: yellow !important;
}

.logged_in_container p {
  margin: 0;
  text-align: right;
}

/* why? */
.XXmodal-open {
  overflow-y: scroll !important;
}

.btn {
  margin: .2rem;
}

.editable {
  cursor: pointer;
}

.editable.editing {
  cursor: default;
}

.small_thumb {
  height:120px;
}

.tiny_thumb {
  max-height:80px;
  max-width:120px;
}

.new_item_box, .root_tool_box {
  border: 2px solid #666;
  border-radius: .5rem;
  padding: .8rem;
  margin-top: .6rem;
  margin-bottom: .6rem;
  background-color: #CFE0F9 !important;
}

.white_box {
  background-color: white !important;
}

.root_tool_box {
  display: none !important;
  border-color: #6798E2 !important;
  background-color: #CFE0F9 !important;
}

.tag_button.btn-primary {
  background-color:navy !important;
}

.admin_replace_graphic_form, .admin_replace_graphic_form input {
  width:13rem !important;
}

.admin_replace_graphic_form {
  border:1px solid #333;
  border-radius:.4rem;
  padding:.3rem;
  background-color:white;
  margin:.4rem;
}

.little_tag_row {
  background-color:#e6e6e6;
  border-radius:.3rem;
  font-size:.8rem;
  padding:.2rem;
  margin:.1rem;
  margin-left:.3rem;
  border: .2rem dotted lightblue;

}

.clear_me {
  font-size:1px;
  margin:0;
  padding:0;
  border:0;
  clear: both;
}

.btn-primary:focus, .btn-secondary:focus {
  box-shadow: none !important;
}


.panel_chooser {
  padding:.1rem;
  padding-left:.3rem;
  padding-right:.3rem;
  border-left:1px solid black;
  border-right:1px solid black;
  border-top:1px solid black;
  border-radius:.3rem .3rem 0 0;
}

.panel_chooser_sep {
  border-bottom:1px solid black;
  width:.5rem !important;
  display: inline-block !important;
}

a.panel_chooser {
  color: #333;
  text-decoration: none !important;
  font-weight:normal;
  font-size:1rem;
  background-color:#dedede;
  cursor:pointer;
}

a.panel_chooser.sel {
  font-weight:bold;
  background-color:white;
}

.panel {
  padding-top:2rem;
}

.template_input_row {
  border: 1px solid #ccc;
  border-radius: .4rem;
  margin:.2rem;
}

.template_input_row p {
  font-weight:bold;
}

.button_graphic_option {
  margin:.1rem;
}

li.ui-menu-item, .ui-menu-item-wrapper {
  background-color:aliceblue !important;
  border-radius:.4rem !important;
}

.ui-widget-content, .ui-widget-content * {
  background-color:aliceblue !important;
}

.auto_secondary {
  cursor:pointer;
  background-color: aliceblue !important;
  border-radius: .4rem !important;
}

.auto_secondary:hover {
  background-color: lightblue !important;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: lightblue !important;
  border-radius:.4rem !important;
}

.ui-menu-item-wrapper:hover {
  background-color:lightblue !important;
}

.ui-autocomplete {
  z-index: 1060 !important;
}

.tag-cloud {
  border: .2rem dotted lightblue;
  padding:1rem;
  margin:1.2rem;
  border-radius: .4rem;
}

.template_colors_table td {
  vertical-align:bottom;
}

.template_colors_table th {
  text-align:center;
  padding-bottom:0;
  margin-bottom:0;
}

.button_graphic_option.sel {
  background-color:black;
}

.omit {
  opacity: 0.7; /* Default to opacity */
}

@supports (filter: brightness(50%)) {
  .omit {
      opacity: 1; /* Reset to full opacity */
      filter: brightness(50%);
  }
}

.graphic_chooser_row .col {
  cursor: pointer;
}

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */
.input_form, .input_toolbar {overflow: auto;}
.input_form {
  height: 20vh;
  background-color: #666;
  padding:1rem .3rem 1rem .3rem;
}
.input_preview {
  height: 50vh;
  background-color: white;
  padding:.5rem;
}

.input_toolbar {
  height: 15vh;
  background-color: white;
}

.input_form, .input_preview {
  border-radius:.3rem;
  border:.3rem solid #666;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* Add your custom CSS here for small devices */

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Add your custom CSS here for medium devices */
  /* was 64vh */
  .input_form, .input_preview {
    height: 60vh;
  }
  .input_form.bigger, .input_preview.bigger {
    height: 63vh;
  }
  .input_toolbar {
    height: 13vh;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Add your custom CSS here for large devices */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Add your custom CSS here for extra large devices */
}

/* Extra extra large devices (if you're using Bootstrap 5 and larger screens, 1400px and up) */
@media (min-width: 1400px) {
  /* Add your custom CSS here for extra extra large devices */
}

.field {
  min-height: 2rem;
  padding:.2rem;
  border-radius:.2rem;
  background-color:#e6e6e6;
  margin: .2rem 0 .2rem 0;
}

.prompt {
  font-weight:bold;
  color: navy;
  margin: 0;
}

.prompt_details {
  font-weight:normal;
  color: #333;
  margin: 0;
}

.image-container {
  position: relative;
  display: inline-block;  /* So the container fits the image size */
}

.remove-image-btn {
  font-size:1.2rem;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);  /* Semi-transparent white */
  border: none;
  cursor: pointer;
  padding: 5px 8px; /* Adjust as needed */
  border-radius: 0 0 0 5px;  /* Rounded bottom left corner */
}

.remove-image-btn:hover {
  background-color: rgba(255, 255, 255, 0.8);  /* Slightly less transparent on hover for better visibility */
}

.remove-image-btn i {
  color: #333;  /* Font color */
}

/*
.custom-loader {
  opacity: .8;
} */

.ui-autocomplete .ui-menu-item {
  color: blue;
}

.store_chooser_button.sel {
  background-color: navy;
}

.button_loading {
  background-color: #ccc !important;
}

.input_preview img, img.popup_preview {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.55);
}

select.form-control {
  border:3px dotted #666 !important;
  border-radius: .2rem;
}

.graphic_chooser_thumb p {
  text-align:center;
}

#crop_container {
overflow: hidden;
position: relative; /* so the child image will use this as a reference for positioning */
}

.collection_item_tile {
  border-radius: .4rem;
}

.collection_item_tile img {
  cursor:pointer;
}

.collection_item_tile p {
  margin:0;
  font-weight: 600 !important;
}

.collection_item_tile.sel {
  border: 3px solid #333 !important;
  background-color: white !important;
}

.collection_thumb_container {
  text-align:center;
}

.collection_thumb_container img {
  width:60%;
  margin:auto;
}

/*
#crop_image {
max-width: 100% !important;
max-height: 100% !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
*/

.collection_item_tile p {
  min-height: 4rem;
}

.collection_item_tile.collection_item_new_tile p {
  min-height: 0;
}

a button {
  text-decoration: none !important;
}

.collection_item_tile p {
  cursor:pointer;
}

p.store_list_by_name {
  margin:0;
  padding:0;
  font-size:.8rem;
}

.admin_tools {
  padding-left:2rem;
  padding-right:2rem;
  background-color: #dedede;
}

.category_tags, .brand_tags {
  margin:.2rem;
  padding:.5rem;
}

.unsuggested {
  opacity:.7;
}
.suggested {
  border: 3px dashed black;
}

.library_product .well {
  background-color:#dedede;
  border-radius:.4rem;
  padding-top:.4rem;
  cursor:pointer;
  height:100%;
}

.library_product p {
  text-align:center;
  font-size:.9rem;
}

.search_result_button.btn-secondary i {
  display:none !important;
}

.well {
  height: 100%;
}

.search_results .col {
  padding:.5rem;
}

.search_results .col .well {
  padding-top: .5rem;
}

.big_template_thumb {
  border: 1px solid #333;
  /* light shadow */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.55);
}

.page_asset_container .well p {
  margin:0;
  padding:.2rem .4rem .2rem .4rem;
}

.well {
  position:relative;
}

.admin_tools_button {
  position:absolute;
  font-size:1.4rem;
  background-color:white;
  color:lightskyblue;
  border: 1px solid lightskyblue;
  opacity:.6;
  cursor:pointer;
  top:.2rem;
  right:.2rem;
  border-radius:.3rem;
  padding:.1rem;
}