@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;
  }

  .main_input_container {
    overflow: auto;
    overflow-x: hidden;
  }
  
  .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[type="text"].very_narrow {
    width: 3rem !important;
    text-align:center;
  }

  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;
}

.graphic_chooser_row p {
  font-size:.8rem;
}

/* 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:.3rem;
  padding-right:.3rem;
  background-color: #dedede;
}

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

.unsuggested {
  opacity:.5;
}
.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;
}

.mandatory_error {
  border: 2px solid red !important;
  background-color:white !important;
}

.mandatory_error .prompt, .mandatory_error .prompt_details {
  color:red !important;
}

.mandatory_error .user_in {
  border:2px solid red !important;
}



@keyframes slideGradient {
  0%, 100% {
      background-color: #0d6efd; /* Solid color at the start and end for the pause */
  }
  10% {
      /* background-image: linear-gradient(45deg, #0d6efd 0%, #6e9afe 10%, #0d6efd 20%); */
      /*background-image: linear-gradient(45deg, #0d6efd, #0d6efd);
      background-size: 300% 100%;*/
  }
  50% {
      /* Full visibility of gradient at the middle */
      /* background-image: linear-gradient(45deg, #0d6efd 40%, #6e9afe 50%, #0d6efd 60%); */
      /* background-size: 300% 100%; */
      background-position: 100% center;
  }
  90% {
    /* background-image: linear-gradient(45deg, #0d6efd 80%, #6e9afe 90%, #0d6efd 100%); */
    /* background-size: 300% 100%; */
    background-position: 300% center;
  }
}

.Xbtn-primary.animate_button {
  color: #fff;
  background-color: #0d6efd; /* Fallback for older browsers */
  background-image: linear-gradient(45deg, #0d6efd 40%, #6e9afe 50%, #0d6efd 60%);
  background-size: 300% 100%; /* Increase size to ensure gradient covers the button during animation */
  background-position: -200% 0;
  border-color: #0d6efd;
  /* animation: slideGradient 8s linear infinite; */
}


.btn-primary.animate_button {
  background-color: #ad0dfd; /* Fallback for older browsers */
	background: linear-gradient(-45deg, #ad0dfd, #ad0dfd, #d79ff4, #ad0dfd, #ad0dfd);
	background-size: 400% 400%;
	animation: gradient 8s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	20% {
		background-position: 100% 50%;
	}
	40% {
		background-position: 0% 50%;
	}
  100% {
    background-position: 0% 50%;
  }
}



.special_templates {
  border-radius:1rem;
  padding:1.4rem;
  border: 3px solid #5e5aac;
  box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 10px;
}

.new_notice {
  font-weight: bold !important;
  text-align: center !important;
  position: absolute;
  top: 0;
  left: -30px; /* Adjust to position the ribbon at the left edge */
  transform: rotate(-45deg); /* Rotate the ribbon to align it diagonally at the top left */
  background-color: red; /* Ribbon color */
  color: white; /* Text color */
  padding: 5px 40px 5px 30px; /* Padding for the ribbon text */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Shadow for a 3D effect */
  /* You can add more styling as per your design needs */
}

.ribbon_wrapper {
  position: relative;
  overflow: hidden;
  /* Set the size as needed, possibly to match .col */
}

tr.draft td, tr.draft td .little_tag_row {
  background-color:#999;
}

i.fa-palette, i.fa-paint-brush {
  color: green;
}

.btn i.fa-palette, .btn i.fa-paint-brush {
  color:inherit !important;
}

.video_thumb_option {
  max-width:120px;
  margin:.2rem;
  cursor: pointer;
}

.animations_box {
  border-radius: .3rem;
  border: 4px solid #CBDEE9;
  padding:0;
}

.animations_box h5 {
  background-color: #CBDEE9;
  margin:0;
  padding:.2rem;
}

.animations_box .row.animations {
  border:2px solid #CBDEE9;
}

/* just hiding messages by default - will expose for relevant groups */
.if_messages {
  display:none;
}

#compose-message {
  height: 100px; /* Adjust this value as needed */
}

#messages-table, #conversation-table {
  width: 100% !important;
}

#messages-table_wrapper, #conversation-table_wrapper {
    width: 100% !important;
}

#compose-message-container, #compose-reply-container {
  padding:.3rem;
  margin-bottom: .4rem;
  border:4px solid #b4b4b4;
  border-radius:.4rem;
}

#sections-container {
  padding-top:.4rem;
}

#sections-container .section {
  padding:.3rem;
  margin-bottom: .4rem;
  border:4px solid #b4b4b4;
  border-radius:.4rem;
}

.page-content .section {
  margin-bottom: 1rem;
}

::placeholder {
  color:#999 !important;
}

.previous-week td {
  background-color: #ccc;
}

.current-week td, .current-week td *, .current-week .text-muted {
  font-weight: bold !important;
  background-color: #FFFFE0 !important;
  color: #212529 !important;
}

.calendar-table tr.current-week td {
  border-top: 2px solid #666; 
  border-bottom: 2px solid #666;
}

/* To avoid double borders between rows */
.calendar-table tr.current-week + tr td {
  border-top: none;
}

.main_campaign p {
  font-weight: bold;
  font-size: 1.2rem;
}

.color-swatch {
  display:inline-block !important;
}

.color-row {
  font-size:1px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fa-trash-alt {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  color: white;
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a24 24 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z'/%3E%3Cpath fill='white' d='M32 96v368c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V96H32zm72 313.6V160c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v249.6c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8zm96 0V160c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v249.6c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8zm96 0V160c0-4.4 3.6-8 8-8h16c4.4 0 8 3.6 8 8v249.6c0 4.4-3.6 8-8 8h-16c-4.4 0-8-3.6-8-8z'/%3E%3C/svg%3E"); */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M426 60h-85V35c0-19.299-15.701-35-35-35H206c-19.299 0-35 15.701-35 35v25H86c-24.853 0-45 20.147-45 45v12c0 8.284 6.716 15 15 15h400c8.284 0 15-6.716 15-15v-12c0-24.853-20.147-45-45-45zM201 35c0-2.757 2.243-5 5-5h100c2.757 0 5 2.243 5 5v25H201zM107.045 463.245C110.221 491.04 133.713 512 161.689 512h188.622c27.976 0 51.468-20.96 54.644-48.755L439.383 162H72.617zm216.648-12.101 13.143-230c.473-8.271 7.561-14.592 15.831-14.12 8.271.473 14.592 7.561 14.12 15.831l-13.143 230c-.473 8.271-7.561 14.593-15.831 14.12-8.271-.472-14.592-7.56-14.12-15.831zM241 222c0-8.284 6.716-15 15-15s15 6.716 15 15v230c0 8.284-6.716 15-15 15s-15-6.716-15-15zm-81.668-14.976c8.271-.473 15.359 5.849 15.832 14.12l13.143 230c.473 8.271-5.849 15.359-14.12 15.831-8.271.473-15.359-5.849-15.831-14.12l-13.143-230c-.473-8.27 5.848-15.358 14.119-15.831z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.collection_item_tile .controls {
  text-align: center;
}

.collection_item_tile .controls button {
  padding: .2rem !important;
}

.admin_modal_users_table {
  width: 100%;
}

.admin_modal_users_table td {
  padding: .2rem;
  max-width: 10%;
  overflow: hidden;
}

.admin_modal_users_table td, .admin_modal_users_table td input {
  font-size:.8rem;
}

.admin_modal_users_table button {
  padding: .1rem;
  font-size: .8rem;
}

/*
.admin_modal_users_table .user_username_field, .admin_modal_users_table .user_email_field {
  max-width: 180px;
  word-break: break-word;
  overflow-wrap: break-word;
}
  */

.admin_modal_users_table .user_username_field, .admin_modal_users_table .user_email_field {
  max-width: 180px;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.trumbowyg-editor p {
  margin-top:.2rem !important;
  margin-bottom:.1rem !important;
}

.trumbowyg-box, .trumbowyg-editor {
  min-height:250px !important;
}

.previous_week img {
  opacity:.6;
}

.previous_week .trumbowyg-editor * {
  opacity:.8;
}

.admin_tools .btn {
  margin: .1rem !important;
}