/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import url("/assets/bootstrap.min-474821e1.css");
/*@import url("/assets/surveyjs-f5c669a8.css");*/
@import url("/assets/devise-f9b85475.css");
@import url("/assets/survey-core@1.12.13/defaultV2.min-f5c669a8.css");
@import url("/assets/survey-creator-core/survey-creator-core-b5eaf9ee.css");
@import url("/assets/fa-all-002e6971.css");

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
}

a {
    color: #0d3ef0;
}

.min-width {
    max-width: min-content;
}

/*
 * When representing radio form elements as buttons, lets squish the buttons to be right beside each other.
 * :has may not be supported in older browsers, but in that case we just don't have the squished buttons and it'll look
 * fine regardless.
 */
.sd-selectbase__column:has(.btn) {
    flex: 0;
}
.sd-selectbase__column:has(.btn):not(:last-child) {
    padding-right: 0;
}
.sd-selectbase--multi-column:has(.btn) .sd-selectbase__column:first-child .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.sd-selectbase--multi-column:has(.btn) .sd-selectbase__column:last-child .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.sd-selectbase--multi-column:has(.btn) .sd-selectbase__column:not(:first-child):not(:last-child) .btn {
    border-radius: 0;
    border-right: 0;
}
.sd-selectbase--multi-column:has(.btn) .sd-selectbase__column label {
    cursor: pointer;
}

/*
 * At very small --sjs-base-unit sizes (i.e. we do 2px) some elements are way too small. We manually adjust it here.
 */
.sd-checkbox {
    --sjs-base-unit: 5px;
}

.sd-file {
    --sjs-base-unit: 5px;
}

/*
 * Add a horizontal rule between each SurveyJS form if we are rendering a list of them
 */
.card-body > .surveyjs-form:not(:last-child) {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

/*nav[data-controller="navbar"] {*/
/*    transition: all 0.5s ease-in-out;*/
/*    overflow: hidden;*/
/*    width: 250px;*/
/*}*/

/*nav[data-controller="navbar"].collapsed {*/
/*    width: 80px;*/
/*}*/

#flash_messages_container { 
    position: fixed; 
    top: 20px;   
    right: 20px;
    z-index: 1050; 
    width: 300px;   
    max-width: 90%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  
  .alert {
   
    position: relative; 
    pointer-events: auto; 
    width: 100%; 
    padding: 15px;
    border-radius: 5px;
    opacity: 0.95;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-family: sans-serif;
    font-size: 0.95em;
  }
  .fade-out {
    animation: fadeOut 0.5s forwards;
  }
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

 .cursor-move{
    cursor: move;
}
.sortable-ghost {
    opacity: 0.2;
    background-color: #e6ffe6;
    border: 2px dashed #8bc34a;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none; 
    cursor: move !important; 
}