/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

.question-area{
    color: #fff!important;
    background: #1a6634!important;
    text-align:left!important;
    width:100%!important;
    padding:15px!important;
}

#navbar{
    display:none !important;
}

h2{
    font-size: 14pt!important;
    font-weight:bold!important;
}
p{
    font-size: 11pt!important;
    font-weight:normal!important;
}
.ranking-advanced-style .display_block_group .sortable-block {
    display: inline-block;
    width: 23%;
    margin: 1% 1%;
    padding-top: 23%!important;
    position: relative;
    background: none!important;
}
@media (max-width: 768px) {
   .ranking-advanced-style .display_block_group .sortable-block {
    display: inline-block;
    width: 48%;
    margin: 1% 1%;
    padding-top: 23%!important;
    position: relative;
    background: none!important;
    height: 280px!important;
} 
}

body{
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(28, 103, 53, 1) 75%)!important;
    height:100vh!important;
    background-attachment:fixed!important;
}
/*
html{
    rgba(226,233,245,1)!important;
}*/

.sortable-subtitle .sortable-rank-subtitle b{
    font-size: 14pt!important;
    text-transform: uppercase!important;
    color: #6b70d6!important;
}

.ranking-advanced-style .display_block_group {
    margin-bottom: 40px;
}

.ls-label-question{
    font-size:14pt!important;
    font-weight:bold!important;
}

.question-container {
  flex-wrap: wrap!important;
  justify-content: space-between!important;
  width: 100% !important;
  margin-left: 39px !important;


}


.custom-div {
  margin-bottom: 20px!important;
}

@media (max-width: 768px) {
  .quesdtion-container {
    flex-direction: column!important;
    align-items: center!important;
  }
}
.ranking-advanced-style  .display_block_group{
    min-width: 350px!important;
}

.group-title.text-center.h3.space-col, h1.survey-name.text-center {
    color: #fff!important;
    text-shadow: 1px 2px 3px rgba(0,0,0,.5)!important;
    display:none!important;
}

.description{
font-weight:normal!important;
font-size: 11pt!important;
}

.image-box .title{
    color:#00539e!important;
    margin-bottom:10px;
    text-align: center!important;
    }

/*-------------------- QUESTION HEADERS --------------------*/

.question-area {
    display: flex;
    justify-content: space-between;
}

.question-area .left-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.question-area .circle {
    width: 100px;
    height: 100px;
    background-color: #134c24; /* Kelly Green */
    border-radius: 50%; /* Makes it a circle */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2em;
    font-weight: bold;
}

.question-area .right-column {
    flex-grow: 1;
    padding-left: 20px; /* Add some space between the columns */
}

.no-hyphenation {
    word-break: break-word;
  }
  
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px!important;
  padding: 5px;
  box-sizing: border-box;
}

.group-title.text-center.h3.space-col, h1.survey-name.text-center {
    color: #00539d!important;
    text-shadow: none!important;
    font-weight:bold;
}

.hide{
    display: none!important;
}

.ls-answers tbody .answertext {
  text-align: left !important;
}

/*---------------------- changes May 26, 2023 ---------------------*/

body .top-container {
    max-width: 900px!important;
    margin: 0px auto!important;
    margin-top: 15px!important;
}

.top-container .progress {
    height: 30px!important;
    x: 0!important;
}

.progress .progress-bar {
    line-height: 30px!important;
}

.progress-bar{
    background-color: #207f74!important;
}

.btn-primary {
    color: #fff!important;
    background-color: #396aa2!important;
    border-color: #eceded!important;
}
/*----------------------- WELCOME PAGE ------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.welcomePage-container p, .welcomePage-container li, .welcomePage-container h1, .welcomePage-container h2, .welcomePage-container h3, .welcomePage-container h4{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight:300;
}

.welcomePage-container h1, .welcomePage-container h2, .welcomePage-container h3, .welcomePage-container h4{
font-weight: 800;
}
.welcomePage-container {
    max-width: 900px;
    margin: auto;
}

.welcomePage-row {
    display: flex;
    flex-direction: row;
}

.welcomePage-responsive-img {
    width: 100%;
    height: auto;
}

.welcomePage-column {
    flex: 50%;
}

#welcomePage-left-column, #welcomePage-right-column {
    border-top: 1px solid;
}

#welcomePage-left-column {
    background: url('https://epitomesystem.com/crm/uploads/projects/6/9b2d98e72876fcadc866a36841a1ed5a.jpg');
    background-size: cover;
    color: white;
    background-position: center center;
}

#welcomePage-left-column .welcomePage-header {
    background-color: #14375a;
    text-align: center;
    padding: 10px;
}

#welcomePage-left-column .welcomePage-header h2, #welcomePage-right-column h2 {
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}

#welcomePage-left-column .welcomePage-header p {
    font-size: 0.8em;
}

#welcomePage-right-column {
    background-color: #396aa2;
    color: white;
    padding: 20px;
}

#welcomePage-right-column ul {
    list-style-type: none;
    padding-left: 0;
}

#welcomePage-right-column ul li {
    padding: 8px 0;
    position: relative;
    padding-left: 20px;
}

#welcomePage-right-column ul li::before {
    content: "• ";
    color: #f68b1f;
    font-size: 30px;
    position: absolute;
    left: 0;
    top: 0;
}

/* Responsive design for tablet and mobile */
@media (max-width: 768px) {
    .welcomePage-row {
        flex-direction: column;
    }
    
    .welcomePage-column {
        flex: 100%;
    }

    #welcomePage-left-column .welcomePage-img-background {
        height: 200px;
    }

    #welcomePage-right-column {
        padding: 20px 20px 20px 35px;
    }
}

/*---------------------------------------------*/

.array-radio{
    display:none;
}

.group-title.text-center.h3.space-col, h1.survey-name.text-center {
    color: #ffffff!important;
    text-shadow: none!important;
    font-weight: bold;
}

.question-container {
    margin-bottom: 2em;
    border: 1px solid #b4bbed;
    background-color: #f5f6fc;
    border-radius: 10px!important;
}

.completed-text p, .completed-text h1, .completed-text h2{
    color:#fff;
}

.question-number {
    display: none !important;
    width:30px;
    height:30px;
    background-color: #007188; /* Kelly Green */
    border-radius: 50%; /* Makes it a circle */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: .75em;
    font-weight: bold;
    text-align:center;
    padding-top: 5px;
    margin-right:15px;
}

.align-right{
    text-align: right!important;
}

.dir-ltr .ls-questionhelp:before {
    display: none;
}

.answers-list.radio-list.col-sm-6.col-xs-12 {
    width: 100%!important;
}

.radio-line .radio-list li {
    display: inline!important;
}

label{
    font-weight: 400;
    /*display: none;/*
}

.name-info label{
    display:inline!important;
}

span.fa.fa-exclamation-circle {
    display: none!important;
}

.text-muted {
    color: #d1b9ea;
}