/** Standard **/
@import url("fonts.css");
@import url("bootstrap.css");
@import url("fontawesome.css");
@import url("animate.css");
@import url("jquery-confirm.css");
@import url("jspanel.css");
@import url("extras.css");
@import url("simple-datatables.css");
/** Application **/

@import url("codemirror.css");
@import url("dropzone.min.css");
@import url("fileexplorer.css");
@import url("lightgallery.css");
@import url("flexmonster.css");
@import url("tagify.css");
@import url("survey-core.min.css");
@import url("survey-creator-core.min.css");
@import url("fullcalendar.css");
@import url("elfinder.full.css");

/**
 * 
@import url("bootstrap-icons.css");
@import url("bootstrap-table.css");
@import url("jsoneditor.css");
**/

  /**
   * Fixed Navbar
   * 
   * **/
  body {
    min-height: 30rem;
    padding-top: 5rem;
  }

  .red {
    color: #d6070a;
  }
  .orange {
    color: #f58113;
  }

  .pagebg {
    background-color: #e5e5f7;
    opacity: 0.8;
    background-size: 10px 10px;
    background-image:  repeating-linear-gradient(0deg, #fbd5a2, #fbd5a2 0.5px, #e5e5f7 0.5px, #e5e5f7);
  }

  .ce-toolbar__content {
    border: 1px;
  }

  .mainadmincontent {}

  input::placeholder, 
  input:-moz-placeholder,
  input:-ms-input-placeholder {
    font-variant: small-caps;
    color: red;
    opacity: 1; /* Firefox */
  }

  input.required, textarea.required, select.required {
    border: red;
  }

  .dropup-select.show {
    transform: none !important;
    top: auto !important;
  }

  .chosen-container .chosen-drop {
      border-bottom: 0;
      border-top: 1px solid #aaa;
      top: auto;
      bottom: 40px;
  }

  .chosen-container.chosen-with-drop .chosen-single {
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;

      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;

      background-image: none;
  }

  .chosen-container.chosen-with-drop .chosen-drop {
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;

      border-top-left-radius: 5px;
      border-top-right-radius: 5px;

      box-shadow: none;

      margin-bottom: -16px;
  }

    .CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee; line-height: 1.3; height: 800px}
    .CodeMirror-linenumbers { padding: 0 8px; }

    .fm-custom-cell {
      display: flex !important;
      align-items: center !important;
      font-size: 12px !important;
    }

    .fm-custom-cell .flag-icon {
      width: 21px !important;
      height: 16px !important;
      margin-left: 0 !important;
      margin-right: 2px !important;
    }

    #fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before, 
    #fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
      top: -2px;
      height: 16px;
    }

  .card-deck {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }


  #surveyworkspace,
  #workspace,
  #fullcalendar,
  #lightgallery,
  #adminworkspace {
      min-height: 90vh; /* Or use a percentage like 100vh */
      overflow-y: scroll; /* Add if you want scrollbars */
      overflow-x: hidden;
  }

  .svc-creator__banner {
    display: none;
  }

  /* Main style for the header menu */
  .header-menu-start {
      width: 100%;
      display: flex;
      justify-content: space-between;
  }  

  /* Responsive adjustments for screens narrower than 991px */
  @media only screen and (max-width: 991px) {

      /* Style for "Create New Menu" button on smaller screens */
      button#CreateNewMenu {
          margin-top: 10px;
          width: 100%;
      }  
      
      /* Adjusting the header menu to stack elements vertically on smaller screens */
      .header-menu-start {
          justify-content: space-between;
          flex-direction: column;
      } 
    
  }  

  /* Style for link buttons to remove text decoration and set color to black */
  .btn-link {
      text-decoration: none;
      color: #000;
  }

  /* Standard margin for form groups for consistent spacing */
  .form-group {
      margin-bottom: 1rem;
  }

  /* Hide the "Edit Menu Name" button by default */
  #EditMenuName {
      display: none;
  }

  /* Flex display with gap for inline Font Awesome icons, aligning items centrally */
  .inlinefontawsome {
      gap: 10px;
      display: flex;
      align-items: center;
  }

  /* Style for highlighting sortable UI elements */
  .ui-state-highlight {
      border: 1px dashed #ccc;
      background-color: #f5f5f5;
      height: 40px; 
      margin-bottom: 10px;
  }

  /* Removing padding from the unordered list for appending menu items */
  ul#menuitemappend {
      padding: 0px;
  }   

  /* Cursor style for draggable elements */
  .drag-handle {
      cursor: grab;
      margin-right: 10px;
      vertical-align: middle;
  }

  /* Cursor changes to 'grabbing' when a card header is actively being dragged */
  .card-header:active .drag-handle {
      cursor: grabbing;
  }

  /* Style for disabled buttons, reducing opacity and changing cursor */
  .btn-outline-danger.disabled, .btn-outline-danger:disabled {
      opacity: 0.5 !important;
      cursor: no-drop !important;
  }

  /* Style for list items in the menu append list, removing list style and adjusting margins */
  #menuitemappend ul li {
      list-style-type: none !important;
      margin-top:5px;
      margin-right:5px;
  }

  .card-body ul li {
      list-style-type: none !important;
  }

  li.menu-placeholder {
      list-style-type: none !important;
  }


  .jsPanel-error {
    margin-top:60px;
  }

  /** Tooltips on Hrefs 
  a {
    position: relative;
    display: inline-block;
  }

  a[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: 80%;
    left: -5;
    background-color: #3E3F3A;
    color: #fff;
    padding: 0px 5px;
    font-size: 10px;
    border: solid 1px #555;
    box-shadow: 3px 3px  2px rgba(0,0,0,0.6);
    -moz-box-shadow: 3px 3px  2px  rgba(0,0,0,0.6);
    -webkit-box-shadow: 3px 3px  2px  rgba(0,0,0,0.6);
    -o-box-shadow: 3px 3px  2px  rgba(0,0,0,0.6);
    border-radius:3px;
  }

  /* CSS for jsPanel custom controls */
  .custom-control-icon.custom-smallify::before{
      content: "\025B4";
      /*content: url(../../images/close16x16.png);*/
  }
  .custom-control-icon.custom-minimize::before { content: "\0268A"; }
  .custom-control-icon.custom-normalize::before{ content: "\02750"; }
  .custom-control-icon.custom-maximize::before{ content: "\02610"; }
  .custom-control-icon.custom-close::before{ content: "\02715"; }

    @keyframes spinner-line-fade-more {
    0%, 100% {
      opacity: 0; /* minimum opacity */
    }
    1% {
      opacity: 1;
    }
  }

  @keyframes spinner-line-fade-quick {
    0%, 39%, 100% {
      opacity: 0.25; /* minimum opacity */
    }
    40% {
      opacity: 1;
    }
  }

  @keyframes spinner-line-fade-default {
    0%, 100% {
      opacity: 0.22; /* minimum opacity */
    }
    1% {
      opacity: 1;
    }
  }

  @keyframes spinner-line-shrink {
    0%, 25%, 100% {
      /* minimum scale and opacity */
      transform: scale(0.5);
      opacity: 0.25;
    }
    26% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .actionbutton {
    cursor: pointer;
  }

@media (max-width: 768px) {
  .btn-responsive {
    padding:3px 6px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:3px 6px;
    font-size:80%;
    line-height: 1.1;
  }
}

.my-6 {
    margin-top: 3.25rem!important;
    margin-bottom: 3.25rem!important;    
}

  .error {
    border-color: red !important;
  }

  .success {
    border-color: green !important;
  }

.clqcols-columns {
  display: flex;
  box-sizing: border-box;
}

.clqcols-columns > * {
  flex: 1;
  padding: 1rem;
}

.clqcols-columns * {
  box-sizing: border-box;
}

.clqcols-columns img {
  display: block;
  width: 100%;
}