body
     {
         /*padding-top: 50px; now define in JS to fit any title length */
        padding-bottom: 10px;
        font-family: 'Barlow';
        font-size: 17px;
        font-weight: normal;
        line-height: 1.42857143;
        color: #5e5c5c;
        height:200%;
        content: '';
        background: url(https://cdn.uca.fr/images/ent/background-ent2-mountain-2.jpg) no-repeat center fixed;
        background-size: cover;
        background-repeat: no-repeat;
        overflow-x: hidden;
        
    }
   
:root {
    --acc_color_1: white !important;
}
svg.bi.bi-trash {
    font: icon;
    /* font-style: oblique; */
    z-index: 9999;
    color: white;
}
#accessibility-modal p {
    display: none !important;
}

#accessibility-modal {
    background: #efefef !important;
    padding-bottom: 10px !important;
    
}

#accessibility-modal {
    background: #efefef !important;
}

#accessibility-modal #headerContent {
    background: #efefef !important;
}

#accessibility-modal #closeBtn {
      background: #006d82 !important;
}
.acc-child {   
    background: #006d82 !important;
    color : white !important;
    border: 1px solid white !important;
}

#reset-all {
    background-color: #d60550 !important;
    outline: none !important;
    display: none;
    color: #d60550 !important;
    border-color: #d60550;
    width: 40% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


#change-positions {
    background: #efefef  !important;
    margin-left: auto !important;
    margin-right: auto !important;

}


#change-positions button {
    background: #006d82 !important;
  
}

#acc-footer 
{
 background: #efefef !important;
}

#accessibility-modal #headerContent p {
    padding-top: 10px !important;
}

.acc-child.active {
    background: #17a2b8 !important;
    border: white  !important;
}  
  
 .acc-item {

    width: 16% !important;

}

select#theme-selector {
        /* padding: 10px !important; */
         margin-bottom: 10px !important; 
        /* font-size: 13px !important; */
    }

option.option_color_selector {
    background-color: white;
    color: #6d6d6c;
    text-align: left !important;
}
option.option_color_selector:hover {
    background-color: white;
    color: #006d82;
}
 .question.uploadedfiles {
    margin-top: 1rem;
    /* border-color: #e2e2e2 !important; */
    /* background-clip: padding-box; */
    /* column-rule: 4px solid red; */
    text-align: center;
    /* padding: revert; */
    color: #6d6d6c;
    /* border-radius: 10px; */
    border: 0.5px solid #006d82;
    padding: 10px !important;
}
  
  
 
        
     /* width */
    ::-webkit-scrollbar {
      width: 10px !important;
      scrollbar-width: thin; /* "auto" or "thin" */
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
       background: #006d82 !important;
       width: 3px 0px !important;

    }
     
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #17a2b8 !important; 
      width: 5px !important;
      border-radius : 25px !important;
    }
    
 
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #17a2b8 !important; 
      width: 5px !important;
    }
    
    .btn 
    {
        display: flex !important;
        padding : 15px !important;
        text-align:center;
    }
    
   .ls-no-js-hidden.card-footer {
        display: flex;
      gap: 10%;
    }
    
    
     .modal-title, .card-header:first-child
    {
        background-color: #efefef !important;
    }
   
    .navbar {
        height : 75px !important;
    }
    
       .img-fluid 
    {
        max-width: 70% !important;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    .select2-dropdown {
    z-index:99999;
    }
    
     select {
        word-wrap: normal;
        margin-top: 10px;
    }

    table{
        --bs-table-hover-color:none !important;
        --bs-table-hover-bg: none !important;
       
    }

    td.day,thead.day{
       border-color: #6d6d6c !important;
       color: #6d6d6c !important;
   }
   
   video {
        max-width: 100%;
        max-height: 50%;
    }
   thead{
       background-color:#006d82 ;
       color: white;
   
   }
   th.answer-text,th.assessment-heading{
        background-color :  #006d82 !important;
        color : white !important;
   }
   th.answer-item {
         padding-top: 12px;
         padding-bottom: 12px;
         text-align: left;
         background-color: #04AA6D !important;
         color: white !important;
   }
   th.answer-item:nth-child(even){background-color: #f2f2f2 !important;}

   th.answer-item:hover {background-color: #ddd !important;}


    .btn-outline-secondary {
        background-color: #006d82;
       color:white !important;
    }
    .btn-outline-secondary:hover{
          background-color: #17a2b8 !important;
    }
    
    .row 
    {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
    
    
    ls-table-wrapper{
        border : 1px solid gray;
    }
    tr.answers-list,  {
        border : 1px solid gray;
    }
   td{
       text-align:center;
       border-color: none !important;
       background-color:white;
          
      
   }
   
   .list-unstyled, .list-inline {
        padding-left: 0 !important;
        list-style: none !important;
        display: ruby !important;
    }

    .btn-check:focus:hover + .btn-primary, .btn-check .btn-primary:focus:hover, .btn-outline-secondary:focus:hover ,input:hover:focus:checked     {
        background-color: #17a2b8 !important;
        border-color: #006d82 !important;
        color: #fff !important;
    }
   div.time-container.td-half{
       border-color : #17a2b8  !important ;
       border : 3px;
   }
 
   img, svg{
        width: auto;
        height: auto;
        overflow-clip-margin: content-box;
        overflow:  visible;
        justify-content: center !important;
         background-repeat: no-repeat;        
        background-size: contain;
        max-width: 100%;
        max-height: 100%;
        margin : 10px;
    }
    .card-home {
        background-color: #f5f5f5 !important;
        margin-bottom: 10% !important;
        /* box-shadow: 5px 5px 5px #f5f5f5; */
        border: 10px solid #f5f5f5 !important;
    }
    code {
        font-family: 'Barlow';
        font-weight: normal;
       
        font-size: 1em;
        color: #333;
        background-color: rgba(0, 0, 0, 0.1) ;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 2px;
        border-radius: 2px;
        padding: 0.125rem 0.3125rem 0.0625rem;
         display:table-cell;
    }
    
    /*--------------------
     Back to Top Button
    ---------------------*/
    .scrollToTopBtn {
      background: #006d82;
      border-radius: 25%;
      width: 50px;
      height: 50px;
      border: 2px solid #006d82;
      color: white;
      cursor: pointer;
      font-size: 30px;
      line-height: 48px;
      position: fixed;
      bottom: 125px;
      right: 10px;
      z-index: 100;
      opacity: 0;
      transform: translateY(100px);
      transition: all .5s ease align-items: center;
      justify-content: center;
      display: flex;
      box-shadow: 0px 0px 10px 0px #17a2b8;
    }
    
    .scrollToTopBtn:hover
    {
         background:#17a2b8;
         border:2px solid #006d82 ;
    }
        
    .showBtn {
      opacity: 1;
      transform: translateY(0)
    }
    
    li.list-group-itemindex-item {
        width: 200px !important;
        padding-top : 5px !important;
    }
    
     .form-control.date-control.date.datetimepicker {
        width: 300px;
        flex: none;
        border-radius : 0px;
    }
    .ls-group-dynamic .form-control-static {
      padding-left: 100%;
     /* padding-right: 15px; */
    }
       .dropdown-toggle.nav-link{
         background-color :  #006d82  !important;
         color: white !important;
         border-radius: 8px !important;
         height: 30px !important;
     }

     .dropdown-toggle.nav-link:hover{
          border : #006d82  !important;
          border-radius: 8px !important;
          background-color :   #17a2b8  !important;
             height: 30px !important;
     }


    

    li.no-results{
        background : lightgray !important;
        border-radius : 5px;
        color: #6d6d6c !important;
    }
    .datetimepicker-addon{
        padding-top : 10px !important;
    }
 
    a.nav-link {
        background-color: #006d82 !important;
        border-radius: 5px;
        color: white !important;
        justify-content: center;
        text-align: center;
    }
    a.nav-link.dropdown-toggle{
         background-color :  #006d82  !important;
         border-radius: 8px !important;
         width: 200px !important;
         color: white !important;
    }
   a.nav-link.dropdown-toggle:hover{
         background-color :  #17a2b8  !important;
         border-radius: 10px;
         width: 200px !important;
         color: white !important;
    }
    a.nav-link:hover{
          border : #006d82  !important;
          border-radius: 5px;
          background-color :   #17a2b8 !important;
     }


    .slider-selection{
       box-shadow: inset 0 -1px 0 #006d82;
        background-image: -webkit-linear-gradient(top, #006d82, #006d82);
    }
    .slider-handle{
        border-radius : 10px;
        background-color : #17a2b8 !important ;
    }
    .slider-handle.untouched{
        background-color : #17a2b8 !important ;
    }
     .slider-handle.custom{
        background-color : #17a2b8 !important ;
    }
    .slider-handle.custom:before{

        padding :3px;
        font-size: 17px;
    }
    .round{
       background-color : #17a2b8 !important ;  
    }
    /*
    .alert-dismissible .btn-close{
            padding: 0.5em !important;
    }
    */
  
    li.list-group-itemindex-item{
      text-align: center; 
      list-style-position: outside; 
      font-size :12px;
    }
    
    span.em-expression{
        padding:0;
        margin:0;
        color: #5e5c5c;
           font-family: 'Barlow';
    font-size: 15px;
    }
   

  .table-bordered > thead > tr > th {#ebceb2
    border: 1px solid #dadada;
 
  }  
  .table-bordered > thead > tr > td {
   border: 1px solid #dadada;
  }
  .question-count-text,.survey-description,.text-info{
    font-family: 'Barlow';
    font-size: 15px;
    line-height: 1.42857143;
    color: #5e5c5c;
  }
  .radio-item input[type="radio"]:checked , label::after{
     background-color : #006d82 !important; 
     color : white !important;
  }
  .ls-questionhelp{
    font-family: 'Barlow';
    font-size: 15px;
    line-height: 1.42857143;
    color: #6d6d6c !important;
    font-weight: bold;
    background-color :#e2e2e2 !important;
    padding: 10px;
    text-align:center;
  }



 .ls-button-radio{
  color :red;
 }
 
 .group-title{
     color : #006d82;
     font-weight: bold;
 }
 
 .input-group .btn {
     padding : 25px !important;
 }
 
 .text-info {
      color: gray;
 }
 
 .float-start{
  color: #FFDB5B;
  padding-right : 10px;
  padding-top : 5px
}




 input#impression, input#imp,input[type=button],input[type=submit], button{
  color: #ffffff;
  background-color: gray;
  border-color: #006d82;
  font-family: 'Barlow';
  padding : 10px;
  margin : 10px;
  text-align: center;
  list-style-position: inside;
  border: 1px solid #006d82;
  border-radius : 8px;
 
}


.btn-outline-secondary, .bouton, btn, .btn-slider-reset{
  color: white !important;
  background-color: #006d82 !important ;
  border-color: #006d82 !important;
  padding: 20px 20px 20px 20px;
  border-radius: 8px;
  
}





.bouton:hover,.btn-outline-secondary:hover, , .btn-slider-reset:hover,btn:hover, button:hover,button:checked{
  color: #ffffff !important;
  background-color: #17a2b8 !important ;
  border-radius: 12px;
  
}

 input#impression:hover,  input#impression:checked, input#imp:hover, input#imp:checked ,input[type=button]:hover, input[type=button]:checked,input[type=button]:hover,input[type=button]:checked {
  color: #ffffff ;
  background-color: lightgray ;
}
.bouton:hover,.bouton:checked , .btn-slider-reset:hover,.btn-slider-reset:checked  {
  color: #ffffff ;
  background-color: #17a2b8 !important ;
  border-color: #006d82 !important ; 
  
}
.input-group-addon,.btn-primary, .selector--inputondemand-addlinebutton{
    background-color: #006d82;
    border-color: #006d82 ; 
    color: white;
}

.input-group-addon:hover,.btn-primary:hover, .selector--inputondemand-addlinebutton:hover{
    color: #ffffff ;
    background-color: #17a2b8 !important ;
    border-color: #006d82; 
    color: white ;
}


 .form-control{
         background-color : white !important;
         
     }
     .dropdown.bootstrap-select {
         background-color: #f8f8f8 !important;
     }

     .dropdown-toggle:hover{
          border : #006d82  !important;
          border-radius: 5px;
          background-color :   #17a2b8 !important !important;
     }
    

    .group-container.space-col {
        padding: 10px 50px 10px 50px;
        border-radius: 19px 19px 19px 19px / 11px 19px 19px 19px;
        background-color: #F8F9F9 !important;
        border-color: #e2e2e2 !important;
        box-shadow: 0 30px 60px rgba(1, 1, 1, .2);
    }
    
  

.bg-primary{
    /* background-color: #006d82 ;*/
    
     border-color: #006d82 ;
     border-right : 1000px ;
}
.bg-primary:hover,.btn-primary::focus {
    color: #ffffff ;
    background:  #006d82 ;
  
}

 .boutonacc{

    background-color: #1a242f ;
    padding: 12px 12px 12px 12px;
    border-radius: 8px;
 }

 .boutonacc:hover, .boutonacc:active,.btn:hover,.btn:active{
  color: #ffffff ;
  background-color: #17a2b8 !important ;

  background-color: #17a2b8 !important ;
  border-color: #17a2b8 !important ;
}

 
.font{
    /*padding-top: 50px; now define in JS to fit any title length */
    padding-bottom: 10px;
    font-family: 'Barlow';
    font-size: 15px;
    line-height: 1.42857143;
    color: #5e5c5c ;
    background-color: #ffffff ;
 }
 
 .font2{
    /*padding-top: 50px; now define in JS to fit any title length */
    padding-bottom: 10px;
    font-family: 'Barlow';
    font-size: 15px;
    line-height: 1.42857143;
    color: #5e5c5c ;

 }
 .survey-description
 



.remove-margins {
    margin: 0;
}
.remove-padding {
    padding: 0;
}


div[id^="group-"] > div { 
    background-color: #f8f9fa ; 
    margin-bottom: 1em;
 }

 div[id^="group-"]>div.group-container {
     background-color: transparent;
 }

.language-changer {
/*    background-color: #fff; */
    background-color: #faf8f5 ;
    padding: 1em;
}

#topContainer {
   
    /*top: 55px; now define in JS to fit any title length */
    width: 100%;
    padding: 1em;
    border-bottom: none;
}

.progress {
    height: 50px;
    margin-bottom: 0px;
    background-color:  #CACFD2 ;

}

.progress-bar{
    float: left;
    width: 0%;
    height: 100%;
    font-size: 13px;
    line-height: 21px;
    color: #ffffff ;
    text-align: center;
    /* background-color: #2c3e50; */
    background-color:  #006d82 ;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
    padding-top: 0.4em;
}

#surveynametitle {
    font-size: 20px;
}

#surveydescription, #surveynametitle, #welcome-container h1 {
    background: #e2e2e2 !important;
    color: #414141 !important;
    border-radius: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    padding : 20px !important;
}

.group-name {

}

#surveydescription, .group-name {
/*    color: #2c3e50;*/
    color: #006d82 ; /* fond uca */
}

#main-row, #welcome-container {
    background-color: transparent;
}
 /**
 * Navigator
 */

 #navigator-container {
     padding-bottom: 1em;
 }
 #navigator-container > hr
 {
    margin-top: 0px;
    margin-bottom: 0px;
 }

 #main-col {
     margin-top: 1em;
 }

.row {
}

 .col-centered{
     float: none;
     margin: 0 auto;
 }


/**
* navigator
*/
#loadallbtn{
    white-space: normal;
}


.label-col {
    min-width: 10%;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

li.responsive-content
{
    display: block;
    position: relative;
    float: left;
    width: 100%;
}

/* Don't wrap "No answer" for 10-point array */
.table-in-qanda-2 thead th {
    white-space: nowrap;
}


/**
* slider
**/

.slider-handle.triangle{
    background-color :#17a2b8 !important ;
}

.numeric-multi ul.slider.computed {
  width: 22em;
}

.numeric-multi ul.computed li label,.numeric-multi ul.slider.computed li label
  {
  padding-right: 0%;
}

.numeric-multi div.multinum-slider {
  width: auto;
  float: left;
  margin-top: 1.5em;
  margin-bottom: 0.2em;
}

/** UI Slider **/
.numeric-multi label.slider-label {
  display: table-cell;
  width: auto ;
  padding: 0 1em 0.2em 0;
  margin-top: 1.3em;
  vertical-align: middle;
}

.numeric-multi .ui-slider-handle {
    top: -0.35em;
}

.ui-slider-1 {
  width: 200px;
  height: 9px;
  margin-bottom: 20px;
}

.ui-slider-2 {
  width: 200px;
  height: 23px;
  position: relative;
  background-image: url(../../images/slider-bg-2.png);
  background-repeat: no-repeat;
  background-position: center center;
}

.slider_callout {
  height: 20px;
  width: 100px;
  overflow: hidden;
  position: absolute;
  top: -20px;
  margin-left: -3px;
  color: #006d82;
  font-size: 90%;
  font-weight: bold;
  text-align: left;
}

.slider_showmin {
  float: left;
  width: 50px;
  margin: 15px 0 0 -0.3em;
  font-family: 'Barlow'
  font-size: 0.7em;
  font-weight: normal;
  text-align: left;
}

.slider_showmax {
  float: right;
  width: 50px;
  margin: 15px -0.3em 0 0;
  font-family: 'Barlow';
  font-size: 0.7em;
  font-weight: normal;
  text-align: right;
}

.slider_lefttext {
  display: table-cell;
  padding-top: 1.5em;
  padding-right: 11px;
  padding-bottom: 3px;
  vertical-align: top;
  text-align: right;
  font-size: 0.9em;
}

.slider_righttext {
  display: table-cell;
  padding-top: 1.5em;
  padding-left: 11px;
  padding-bottom: 3px;
  vertical-align: top;
  font-size: 0.9em;
}

.withslider {
    margin-bottom: 30px;
}
.radio-item label, .checkbox-item label {
    cursor: pointer;
    font-family: 'Barlow';
    font-size: 15px;
}





#indexcontainer {display : none;}

.radio-list li
{
    display: block;
    clear: both;
}
/*
.checkbox, .radio
{
    float: left;
}

.label-radio span
{
    display: inline-block;
    padding-top: 3px;
}
*/
.question-item .other-label
{
    margin: 0px;
    padding: 0px;
}

/**
 * For em-type
 */
 .strong
 {
     font-weight: bold;
     display: inline-block;
     padding: 0.2em;
 }

 .hide-tip
 {
     display: none;
 }

/**
 * Surveys list
 */
.surveys-list {
    margin-top: 1em;
    list-style: none;
    display: ruby-text;
}
.surveys-list li {
    padding: 0.5em;
}
.surveys-list li a {
    margin-left: 0.5em;
    margin-top: 20px !important;
    font-size: 13px !important;
}

#surveys-list-jumbotron {
    text-align: center;
    background-color: white;
    border-radius: 10px;
    padding: 5px;
    margin: 10px;
}

#surveys-list-jumbotron img.site-surveylist-logo2 {
    max-width: 35%;
    display: block;
    margin: 15px auto;
}

/*#outerframeContainer {
    height: 100%;
}*/
.navbar>.container, .navbar>.container-fluid, .navbar>.container-sm, .navbar>.container-md, .navbar>.container-lg, .navbar>.container-xl, .navbar>.container-xxl {
    display: flex !important;
    position: sticky;
    flex-wrap: inherit !importantt;
    align-items: center !important;
    justify-content: center !important;
    background-color: white !important;
    border-bottom:  1px   #efefef solid !important;
    z-index: 1001 !important;
    /*padding-top: 30px !important;
    padding-bottom: 30px !important;*/
}




.border-footer{
        border-top:  1px  #efefef solid !important;
  
        height: auto;
        display: block;
        margin-left: auto;
}

#surveyListFooter {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 10px;
}

#surveyListFooter div{

}

html, body {
    height: 90%;
}

/**
 * Gender buttons
 */

/* Not selected */
.gender-button button{
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.16), 2px 2px 2px 0 rgba(0, 0, 0, 0.12);
    margin-left: 1em;
}

/* selected */
.gender-button .btn:focus {
    box-shadow: none;
}

.gender-button .btn:focus .gender-text{
    text-decoration: underline;
}

/* General */
.gender-button .btn span {
    display: block;
}

html body .navbar.navbar-default.navbar-fixed-top {
    z-index: 2000;
}

.gender-button .gender-icon {
    font-size: 2em;
}

.navbar-brand {
    height: auto;
}

/* For striped tables */
.array2 {
    background-color: #f9f9f9;
}

/* Make sure table covers hole page */
table {
    width: 100%;
    padding-top: 1em;
   /*   border-collapse: collapse;
    */
}

/* Give help text some space */
.question-title-container {
    background-color: #e2e2e2 !important;
    color: #3d3d3c !important;
    border-radius: 20px;
    margin-bottom: 10px;
    margin-top: 9px !important;
    box-shadow: 0 3px 5px rgba(1, 1, 1, .2);
}


.question-help {
    margin: 10px 0px 10px 0px;
    border-radius: 10px 10px 10px 10px;
    background-color: #e2e2e2 !important;
    box-shadow: 0 3px 5px rgba(1, 1, 1, .2);
}

.question-help-border{
    margin: 0;
    padding: 1em;
    background-color : #e2e2e2 !important;
    border-radius: 10px 10px 0 0;
}
/* Wrap text in e.g. gender button "No answer */
.wrap-normal {
    white-space: normal;
}

.slider.slider-horizontal {
    width: 100%;

    /* The reset button will be under the slider, so allow some margin */
    margin-bottom: 1em;
}

/* When slider has both show-min-max and reset button, add space between
 * left badge and reset button */
.slider-min-badge {
    margin-right: 1em;
}

.slider-left-span {
    text-align: right;
}

.slider-right-span {
    text-align: left;
}

.slider-container {
    margin-top: 3.5em;
    margin-bottom: 2.5em;
}

#yii-flash-message {
    margin-top: 3em;
}

.prefix-text-right {
    text-align: right;
}

.align-middle {
    vertical-align: middle ;
}

table.table-multi-text tbody tr th {
    vertical-align: middle;
}

table.question.subquestion-list.questions-list.table-multi-text thead tr th {
    text-align: center;
    
}

/* Used for date-picker icon within input */
.form-control-feedback {
    right: 1em;
    left: auto;
}

/* Used for multiple numeric sum and remain
 * Overwrite Bootstrap label font-size 75% */
.label {
    font-size: 90%;
}

body .navbar-default .navbar-brand:hover {
    color: #ffffff;
}

/* Only use <label> to get vertical align easy. Don't want boldness. */
.no-label {
    font-weight: normal;
}

/* Center radio buttons in array-by-column */
.table-array-by-column td.radio-item.text-center.answer-item {
    padding-left: 47px;
    padding-bottom : 8px !important;
}


table > tbody > tr > td.ddprefix {
    padding-right: 1em;
    vertical-align: middle;
    border-color: #006d82 !important; 
}


/*
    Arrays Question
*/

/* center the radio list in the td*/
td.answer-item.text-center
{
    padding-left: 39px;
}

table.array-no-dropdown  td.answer-item.text-center
{
    padding-left: 45px;
}

.table-5-point-array td.answer-item.text-center
{
    padding-left: 54px;
}

.table-10-point-array  td.answer-item.text-center
{
    padding-left: 40px;
}

.table-10-point-array  thead tr th.text-center
{
    padding-left: 0px;
}


/**
 * On big screen only, iPad and up
 */
@media only screen and (min-width: 768px) {
    .survey-list  {
        padding-bottom: 50px;
    }
    .table-dual-scale .separator {
        width: 6%;
    }

    table > tbody > tr > td.ddsuffix {
        padding-left: 1em;
        vertical-align: middle;
        border-color: #006d82 !important;
    
    }
    .ls-group-dynamic .form-control-static {
        padding-left: 5%;
    }
}

}
sup { 
     color : #5e5c5c;
}

/**
 * No more tables
 * OBS: Media specific CSS must be last in this file.
 * iPad has width 768px (according to Chrome dev tool)
 * Google Nexus 10 has width 800px.
 * (Both in portrait mode.)
 * We don't have to collapse tables on pads.
 */
@media only screen and (max-width: 801px) {

    select#theme-selector {
        /* padding: 10px !important; */
      
        /* margin-bottom: 5% !important; */
        /* font-size: 13px !important; */
    }
    .uploadedfiles thead  {
        display: none;
    }
    
    .uploadedfiles tr {
        display: grid;
        border: 1px solid #006d82;
        /* border-radius: 1px !important; */
        margin-top: 20% !important;
        margin-left: 10px !important;
        background-color: white;
        /* margin-left: 20% !important; */
        margin-right: 10px !important;
        margin-bottom: 20% !important;
         border : none !important;
    }
    /*
        No more table transformation applies when screen is under 801px (for a few exotic tablet screens, see #11016),
        whereas visible-xs-block respect bootstrap standards (767px)
        If too many bugs of this kind appears in the future, we should just refuse to support weird exotic tablet screens.
        We should repsect standards, we should not try to fit to non standards devices.
    */
    .visible-xs-block{
        display: block ;
    }
    .visible-xs-inline-block{
        display: inline-block ;
    }

    /* Remove margin */
    .row {
        margin: 0;
        padding: 0;
    }

    /* Add some margin for multiple short text */
    .form-group.row {
        margin-bottom: 15px;
    }

    /* Force table to not be like tables anymore */
    .no-more-tables table,
    .no-more-tables thead,
    .no-more-tables tbody,
    .no-more-tables th,
    .no-more-tables td {
        display: list-item;
         
       
    }

    .no-more-tables tbody th,
    .no-more-tables tbody td,
    .no-more-tables tbody tr {
        width: 100% ;
    }

    .no-more-tables tr {
        display: inline-block;
    }

    .no-more-tables tbody {
        padding: 0 1em 0 1em;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .no-more-tables tr,
    .array-by-columns-div .radio-list {
        border: 1px solid #ccc;
        padding: 1em;
    }

    /* Line header ; color is h4 color */
    .no-more-tables tr th,
    .array-by-columns-div .answertext {
        font-size: 1.1em;
        text-align: center;
        color: #006d82;
    }

    .no-more-tables tr th {
        text-align: left;
    }

    .array-by-columns-div .answertext {
        padding: 8px;
        padding-left: 0;
        text-align: left;
        font-weight: bold;
    }

    .array-by-columns-div .radio-item {
        padding-bottom: 8px;
    }

    .no-more-tables .checkbox  {
        position: relative;
        top: 6px;
    }

    .no-more-tables td {
        /* Behave  like a "row" */
        min-height: 2em;
        border: none;
        position: relative;
        /*padding-left: 95%;*/
        padding-bottom: 1em;
        white-space: normal;
        text-align:left ;
    }

    .array-multi-flexi  .no-more-tables td, .no-more-tables-array-dual-dropdown-layout  td, .no-more-tables-array-multi-text td{
        padding-left:1.5em;
    }


    .no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    /*.no-more-tables td:before { content: attr(data-title); }*/

    .no-more-tables-10-point td {
    }

    /* Don't wrap "No answer" on two lines */
    .no-more-tables-10-point label {
        white-space: nowrap;
    }

    .no-more-tables-10-point td:before, .no-more-tables-5-point td:before {
        /* Now like a table header */
        position: relative;
        left: 2px;
        /* Top/left values mimic padding */
    }

    /* When tables are collapsed, remove margin top so the labels look centered */
    input[type="radio"],
    .radio input[type="radio"],
    .radio-inline input[type="radio"] {
      margin-top: 4px;
      background-color: #006d82;
    }
    input{
         background-color: #006d82;
    }

    .five-point-choice .col-xs-12 {
        padding-bottom: 8px;  /* For 5-point-choice; TODO: Should look like 5-point-array? */
    }

    /* Hide the first column in array-by-column */
    .array-by-columns-table tr > *:nth-child(1) {
        display: none;
    }

    /* Need some more space on phone */
    .array-multi-flexi .answertext {
        padding-bottom: 0.5em;
    }

    .array-multi-flexi .answer-item label {
        padding-bottom: 0.5em;
    }

    /* On phone, left and right slider text is above and below slider */
    .slider-left-span {
        text-align: left;
    }

    /* As above, collapse prefix/suffix to above/below input */
    .prefix-text-right {
        text-align: left;
    }

    table.question.subquestion-list.questions-list tr th.answertext {
        text-align: left;
    }
    .form-control{
        background :none ;
    }

    /* Used for date-picker icon within input */
    .form-control-feedback {
        right: 0.5em;
    }

    /* Increase-same-decrease array */
    .row-inc-same-dec .radio-item,
    .thead-inc-same-dec th {
        text-align: left;
    }

    .table-multi-num.no-more-tables tr {
        border: none;
    }

    /* Used for <td></td> in multiple-numeric */
    td.hide-on-small-screen {
        display: none;
    }

    #langchanger-label {
        padding-top: 11px;
    }

    .col-xs-12.question-container {
        padding-right: 0;
        padding-left: 0;
        
    }


    /* text overflows, ellipsis and hyphens */
    .navbar-brand {
        white-space:nowrap;
        text-overflow: ellipsis;
        text-overflow: "…";
    }


}

/** On small phones, leave some more space */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    select#theme-selector {
        
   

    }

}


}

/** On small phones, leave some more space */
@media only screen and (max-width: 400px) {

    .array-by-columns-div .radio-list {
        border: 1px solid #ccc;
        padding: 1em;
        margin: 1em;
    }

    /*
    .col-sm-12.answer {
        padding-left: 0;
        padding-right: 0;
    }
    */

    .no-more-tables tbody {
        padding-left: 0;
        padding-right: 0;
    }

    /* For yes-no question, shrink the buttons a bit on phone screens */
    .btn-lg, .btn-group-lg label {
        padding: 10px 15px;
    }

    .slider.slider-horizontal {
        /* Slider can be full width on phones */
        width: 100%;
    }

    /* Center label under radio button on phones */
    .five-point-choice label {
        margin-left: 5px;
    }

    /* Make file-upload pop-up shorter on phones */
    .file-upload-modal-body {
        padding: 0;
        height: 300px;
    }

    /* Modal should be in front of navbar, so the close icon is visible */
    .modal {
        z-index: 3000;
    }

    /* Less margin on phones */
    .slider.slider-horizontal {
        margin-bottom: 0.4em;
    }

}




@media only screen and (max-width: 850px) {
    .five-point-choice .noanswer-item {
        padding: 0;
    }
}



/*
@media only screen and (max-width: 1000px) and (min-width: 800px) {
    .table-10-point-array td.answer-item.text-center
    {
        padding-left: 10px;
    }

    .table-10-point-array  > thead > tr > th
    {
        text-align: left;
        padding-right: 0px;
    }
    
}

*/
/**
 * Display adjust, question type by question type
 */

.radio input[type="radio"]:disabled + label
{
    opacity: 0.25;
}




/* center the label text in no more table mode */
.label-text{
    margin-top: -24px;
    margin-left: 20px;
}

/* ...except for dual-scale and array-by-column */
.table-dual-scale .label-text, .array-by-columns-div .label-text {
    margin-top: 0px;
    margin-left: 0px;
}

.label-clickable:hover
{
    cursor: pointer;
}

.table > tbody > tr > th
{
    vertical-align: middle;
}

table.numbers-only th, table.numbers-only input {
    text-align: right;
}

.othertext-label-checkox-container {
    padding-top: 5px;
    margin-right: 5px;
}

.multiple-choice-with-comment.table, .table-multi-num.table{
    table-layout: auto;
    width: initial;
}
 .multiple-choice-with-comment.table > tbody > tr > td {
     padding-left: 18px;
     vertical-align: middle;
 }

 /* alignment for small screens*/
 .multiple-choice-with-comment.table > tbody > tr > td.comment-container {
     padding-left: 14px;
 }
.checkbox input[type="checkbox"] {
    margin-left: 0px;
}

.short-free-text .prefix, .short-free-text .suffix,.geoloc-item .search-icon, .geoloc-item .checkbox  {
    padding-top: 10px;
}

.geoname_search {
    margin-bottom: 10px;
}



/** Question Design **/

body div.row .question-container {
    margin-bottom: 4em;
    border-radius: 30px;
}

.answer-container
{
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    padding-top: 3em;
    background-color: : #ffffff;
    padding-bottom: 2em;
    border: 2px solid #e2e2e2 !important;
    border-radius:10px;
}

.question-help-container
{
    background-color: #e2e2e2 !important;
}


/** Header **/



.question-valid-container {
    position: relative;
    text-align: center;
    padding-bottom: 1em;
    background-color: #e2e2e2 !important;
    padding-top: 15px;
    border-radius : 10px !important;
    margin-bottom : 10px !important;
}

.question-valid-container .text-danger{
   color : #ebceb2;
}


.question-valid-container{
    color: #ebceb2;
    font-weight: bold;
}

div.question-text {
   color :#6d6d6c !important;
   background-color:#e2e2e2 !important;
   border-radius : 8px;
   font-size: 17px;
   font-family: 'Barlow';
   font-weight: bold;
   text-align:center;
}

/* Arrow */
/* Will confuse survey takers?
.questionvalidcontainer:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #9e9c9c;
    border-width: 0.9em;
    margin-left: -0.9em;
}
*/

/* Asterix */
/*.asterisk {
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   
}
.asterisk:before {
    content: "\f069";
}*/


/* Check javascript */
#checkjavascript {
    margin-top: 100px;
    z-index: 999;
    right: 100px;
    position: fixed;
    width: 300px;
}

/*label font weight*/
label {
    font-weight: normal;
}

#surveys-list-container
{
    margin-top: 50px;
}

/* text overflows, ellipsis and hyphens */
.navbar-brand {
    overflow: hidden;
    text-overflow: ellipsis;
}

#outerframeContainer {
    min-height: 100%;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

.xdebug-var-dump {
    z-index: 10000;
    position: relative;
    top: 10px;
}

.list-unstyled.radio-list {
    padding-left: 15px;
}

div.yes-no .btn-group label {
  white-space:normal;
}


.multipleco-other-topic {
    max-width: 150px;
}

.privacy-header{
    font-weight: bold;
    font-style: italic;
    
}

/*** Divider for Bootstrap ***/

.horizontal-divider.top{
  border-top: 3px solid #323232;
}
.horizontal-divider.bottom{
  border-bottom: 3px solid #323232;
}

.vertical-divider.left {
  border-left: 3px solid #323232;
}
.vertical-divider.right {
  border-right: 3px solid #323232;
}
@media (max-width: 800px){
    .vertical-divider.left {
    border: none;
    }
    .vertical-divider.right {
    border: none;
    }

}
@media (max-width: 1400px){
    a.surveytitle.btn.btn.btn-primary.col-12 {
    font-size: 12px !important;
    }

} 
@media (max-width: 950px){
    a.surveytitle.btn.btn.btn-primary.col-12 {
    font-size: 12px !important;
}
}

/*** Small helper classes, that are not shipped with bootstrap but fit in well***/
.ls-custom-padding{
    padding: 1px;
}
.ls-custom-padding.two{
    padding: 2px;
}
.ls-custom-padding.three{
    padding: 3px;
}
.ls-custom-padding.four{
    padding: 4px;
}
.ls-custom-padding.five{
    padding: 5px;
}
.ls-custom-padding.fifteen{
    padding: 15px;
}
.ls-custom-padding.eighteen{
    padding: 18px;
}

.ls-custom-margin{
    margin: 1px;
}
.ls-custom-margin.two{
    margin: 2px;
}
.ls-custom-margin.three{
    margin: 3px;
}
.ls-custom-margin.four{
    margin: 4px;
}
.ls-custom-margin.five{
    margin: 5px;
}
.ls-custom-margin.fifteen{
    margin: 15px;
}
.ls-custom-margin.eighteen{
    margin: 18px;
}

.label-danger {
    white-space: normal;
}

p.return-to-survey{
    clear:left;
}

.survey-welcome{
    font-family: 'Barlow';
    font-size: 15px;
    line-height: 1.42857143;
    color: #5e5c5c;
}


.input-group-addon{
     height : 40px !important;
    
    
}
.bootstrap-datetimepicker-widget {
    margin : 10px !important;
    padding : 10px !important;
    color: white !important;
    position: relative !important;
    bottom: 20px;
    inset : 0px 0px 0px 0px !important;
    z-index: 9999;
    
    
}

.ls-input-group.col-12.col-md-8 {

    display : contents !important;
}


.bootstrap-datetimepicker-widget.dropdown-menu {
    margin: 2px 0;
    padding: 4px;
    width: 19em;
     
}


.bootstrap-datetimepicker-widget.dropdown-menu:before,.bootstrap-datetimepicker-widget.dropdown-menu:after {
    content: '';
    display: inline-block;
  
     
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid  #17a2b8 !important;
    border-bottom-color: rgba(0,0,0,0.2);
    top: -7px;
    left: 7px;
  
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #17a2b8 !important;
    top: -6px;
    left: 8px
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ccc;
    border-top-color: rgba(0,0,0,0.2);
    bottom: -7px;
    left: 6px
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
    bottom: -6px;
    left: 7px
}



.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
    left: auto;
    right: 6px
}

.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
    left: auto;
    right: 7px;
  
}

.bootstrap-datetimepicker-widget .list-unstyled {
    margin: 0
}

.bootstrap-datetimepicker-widget a[data-action] {
    padding: 6px 0;
    
      
}

.bootstrap-datetimepicker-widget a[data-action]:active {
    box-shadow: none
}

.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second {
    width: 54px;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0
}

.bootstrap-datetimepicker-widget button[data-action] {
    padding: 6px
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Increment Hours"
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Increment Minutes"
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Decrement Hours"
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Decrement Minutes"
}

.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Show Hours"
}

.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Show Minutes"
}

.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Toggle AM/PM"
}

.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Clear the picker"
}

.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Set the date to today"
}

.bootstrap-datetimepicker-widget .picker-switch {
    text-align: center
}

.bootstrap-datetimepicker-widget .picker-switch::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Toggle Date and Time Screens"
}


.bootstrap-datetimepicker-widget .picker-switch td {
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
    line-height: inherit
}

.bootstrap-datetimepicker-widget .picker-switch td span {
    line-height: 2.5;
    height: 2.5em;
    width: 100%
}

.bootstrap-datetimepicker-widget table {
    width: 50%;
    margin: 0;
   
}

.bootstrap-datetimepicker-widget table td,.bootstrap-datetimepicker-widget table th {
    display : table-cell !important;
    text-align: center;
    border-radius: 4px
     
}

.bootstrap-datetimepicker-widget table th {

    height: 20px;
    line-height: 20px;
    width: 20px;

}

.bootstrap-datetimepicker-widget table th.picker-switch {
    width: 145px
}


.bootstrap-datetimepicker-widget table th.disabled:hover {

    color: #17a2b8 !important;
    cursor: not-allowed
}
.bootstrap-datetimepicker-widget table th.disabled{
    background: none;
    color: #006d82;
    cursor: not-allowed;
     background-color:#006d82;
}

.bootstrap-datetimepicker-widget table th.prev::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Previous Month";
    background-color:#006d82;
}

.bootstrap-datetimepicker-widget table th.next::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Next Month"
}

.bootstrap-datetimepicker-widget table thead tr:first-child th {
    background: #006d82
    cursor: pointer
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: #17a2b8 !important
}
.bootstrap-datetimepicker-widget table thead tr:first-child th {
    background: #006d82
}


.bootstrap-datetimepicker-widget table td {
    height: 54px;
    line-height: 54px;
    width: 54px
   
}

.bootstrap-datetimepicker-widget table td.cw {
    font-size: .8em;
    height: 20px;
    line-height: 20px;
    color: #006d82
}

.bootstrap-datetimepicker-widget table td.day {
    height: 20px;
    line-height: 20px;
    width: 20px
  
}

.bootstrap-datetimepicker-widget table td.day:hover,.bootstrap-datetimepicker-widget table td.hour:hover,.bootstrap-datetimepicker-widget table td.minute:hover,.bootstrap-datetimepicker-widget table td.second:hover {
    background: #17a2b8 !important;
    cursor: pointer
}

.bootstrap-datetimepicker-widget table td.day,
.bootstrap-datetimepicker-widget table td.hour,
.bootstrap-datetimepicker-widget table td.minute,
.bootstrap-datetimepicker-widget table td.second {
    background: #006d82;
    cursor: pointer
}

.bootstrap-datetimepicker-widget table td.old,.bootstrap-datetimepicker-widget table td.new {
    color: #006d82
}

.bootstrap-datetimepicker-widget table td.today {
    position: relative
}

.bootstrap-datetimepicker-widget table td.today:before {
    content: '';
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 7px 7px;
    border-bottom-color: #17a2b8 !important;
    border-top-color: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 4px;
    right: 4px
}

.bootstrap-datetimepicker-widget table td.active,.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #17a2b8 !important;
    color: #17a2b8 !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25)
}
.bootstrap-datetimepicker-widget table td.active,.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #006d82;
    color: #006d82;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25)
}
.bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: #006d82
}

.bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
    color: #17a2b8 !important;
    cursor: not-allowed
}

.bootstrap-datetimepicker-widget table td.disabled{
    background: none;
    color: #006d82;
    cursor: not-allowed
}

.bootstrap-datetimepicker-widget table td span {
    display: inline-block;
    width: 30px;
    height:304px;
    line-height:30px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 4px
}

.bootstrap-datetimepicker-widget table td span:hover {
    background: #17a2b8 !important
}
.bootstrap-datetimepicker-widget table td span {
    background: #006d82
}

.bootstrap-datetimepicker-widget table td span.active {
    background-color: #006d82;
    color: #006d82;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25)
}

.bootstrap-datetimepicker-widget table td span.old {
    color: #006d82
}

.bootstrap-datetimepicker-widget table td span.disabled{
    background: none;
    color: #006d82;
    cursor: not-allowed
}
.bootstrap-datetimepicker-widget table td span.disabled:hover {
    background: none;
    color: #17a2b8 !important;
    cursor: not-allowed
}

.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
    height: 27px;
    line-height: 27px
}

.bootstrap-datetimepicker-widget.wider {
    width: 21em
}

.bootstrap-datetimepicker-widget .datepicker-decades .decade {
    line-height: 1.8em !important
}

.input-group.date .input-group-addon {
    cursor: pointer
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}


.block {
   display:none;
}

 .ls-group-dynamic .control-label, .ls-group-dynamic .form-control-static {
             display: contents !important;
    }   


.pagination {
   text-align: right;
   margin: 0;
   padding: 0;
   margin: 0 0 10px;
}
.pagination li {
   display: inline-block;
   list-style: none;
   padding: 10px 15px;
   cursor: pointer;

}
.pagination li.active {
   background: #006d82;
   border-radius : 50px;
   color: white;
}

.video-responsive { 
    overflow:hidden; 
    padding-bottom:56.25%; 
    position:relative; 
    height:0;
}

.video-responsive iframe {
    left:0; 
    top:0; 
    height:100%;
    width:100%;
    position:absolute;
}
.dir-ltr .ls-answers td.radio-item, .dir-ltr .ls-answers td.checkbox-item {
    padding-left: 0px !important;
    text-align: -webkit-center !important;
    vertical-align: center !important;
}


@media (min-width: 768px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width:10em;
           
        
    }
   
}


@media screen and (max-width:300px) {
 li.nav-item {
        width: 13em;
        margin : 10px;
        text-align: center; 
        list-style-position: inside;
        justify-content: center;
     
  }
  li.list-group-itemindex-item{
         font-size : 10px; 
    }

    table.ls-answers .control-label, .answertextright.information-item {
        text-align: center;
    }
    .answertext{
        text-align: center  !important;

        color: #006d82;
    }
    tbody,thead,tr{
        border-color : #006d82 !important ;
    }


}

@media screen and (max-width:1500px) {
    .input-group-addon{
     height : 40px !important;
    
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
        margin : 20px !important;
    }
    
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
        margin-left :  10px !important;
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom.pull-right:before {
          margin : 30px  !important;
    
    }
    .form-control.date-control.date.datetimepicker{
        width:180px !important;
        flex: none;
        border-radius : 0px;
    }

}
    
}

@media screen and (max-width:1300px) {
    .input-group-addon{
     height : 40px !important;
    
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
        margin : 20px !important;
    }
    
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
        margin-left :  10px !important;
        margin-bottom : 10px !important;
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom.pull-right:before {
        margin : 30px  !important;
    
    }
    .form-control.date-control.date.datetimepicker{
        width:175px !important;
         flex: none;
        border-radius : 0px;
    }
    

}
@media screen and (max-width:1100px) {
     .ytp-cued-thumbnail-overlay, .html5-video-player,.html5-main-video,#player{
        max-width:600px !important;
        max-height:600px !important;
        
     } 
     table.ls-answers .control-label {
        text-align: center;
        
    }
    
   .bootstrap-datetimepicker-widget table thead {
        display : table-row-group;
        min-width: 34px;
        text-align :center;
       
    }

 
    .bootstrap-datetimepicker-widget table thead td {
        display : table-row-group;
        margin : 0;
        width :100%;
      
        min-width: 34px;

    }
    
    .bootstrap-datetimepicker-widget table td {
        display : table-row-group;
        margin : 0;
        width :100%;

        min-width: 34px;

    }
    .bootstrap-datetimepicker-widget table  {
        display : table;
        margin : 0;
        width :100%;
    }
    
    .bootstrap-datetimepicker-widget.dropdown-menu {
        margin: 2px 0;
        padding: 4px;
        width: 12em;
    }
    img,svg{
      display: block;
      width: auto;
      height: auto;
        max-width: 100%;
        max-height: 100%;
    }
        
    .scrollToTopBtn
    {
        font-size : 30px !important;
         left: 10px !important;
         display: none !important;
    }
    .dir-ltr .ls-answers td.radio-item, .dir-ltr .ls-answers td.checkbox-item {
        padding-left: 0px !important;
        vertical-align: center !important;
    }

}

}


@media screen and (max-width:900px) {
   .ytp-cued-thumbnail-overlay,.html5-video-player{
        width: 300px !important;
        height : 300px !important;
        background-repeat: no-repeat;
        background-size: contain;
        
    }
  .question-container{
     margin-bottom: 1em;
  }

  .dropdown-toggle.nav-link{
        width: 17em;
         background-color :  #006d82  !important;
          border-radius: 5px;
         color: white !important;
     }
  
    a.nav-link {
        background-color: #006d82 !important;
        border-radius: 5px;
        margin: 20px;
        padding-left: 15em;
        text-align: center !important;
    }
   
  li.list-group-itemindex-item{
         font-size : 10px; 
    }
.logo-container {
    padding: 0px;
    float: left;
    font-size: 18px;
    line-height: 20px;
    position: relative;
}
.img-fluid, .img-thumbnail {
    height: auto;
    max-width: 100%;
    z-index: 7;
}

    table.ls-answers .control-label {
        text-align: center;
        
    }
    .answertext{
        text-align: center  !important;

 
    }
    tbody,thead,tr{
        border-color : #006d82 !important ;
    }

    .input-group-addon{
     height : 30px !important;
    
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
        margin : 20px !important;
    }
    
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
        margin-left : 20px !important;
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom.pull-right:before {
        margin : 10px  !important;
    
    }
    img,svg {
          display: flex;
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
        
    
     
}

@media screen and (max-width: 800px) {
    a.nav-link {
        background-color: #f8f8f8 !important border-radius: 5px;
        color: white !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        margin-top : 10px !important;
    }
    a.dropdown-toggle  {
        background-color: #f8f8f8 !important border-radius: 5px;
        color: white !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
    
    .scrollToTopBtn {
            font-size : 10px !important;
            left: 10px;
            width: 30px;
            height: 30px;
            display : none !important;
        }
   .surveys-list.list-unstyled {
      display: contents;
    }
  
}

@media screen and (max-width:700px) {
   .ytp-cued-thumbnail-overlay,.html5-video-player, #player{
        width: 300px !important;
        height : 300px !important;
        background-repeat: no-repeat;
        background-size: contain;
        
    }
  body {
     font-size: 11px;
  }
  h3,h1{
     font-size: 12px; 
  }
  .btn,.question-count-text,.survey-description,.text-info,.ls-questionhelp,.font,.progress-bar,.ls-question-message,.ls-print{
     font-size: 11px;
  }
  .survey-welcome{
       font-size: 12px;
  }
  .question-container{
     margin-bottom: 0.75em;
  }
  .answer-container {
    padding-top: 0.5 em;
    padding-bottom: 0.5 em;
    }


 .dropdown-toggle.nav-link{

        background-color: #f8f8f8 !important
          border-radius: 5px;
         color: white !important;
     }
  


  li.list-group-itemindex-item{
         font-size : 10px; 
    }
    
    table.ls-answers  .control-label {
        text-align: center ;
    
    }
    .answertext{
        text-align: center  !important;

    }
    tbody,thead,tr{
        border-color : #006d82 !important ;
        
    }
    img,svg
    {
          display: block;
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
    }
    
}
@media screen and (max-width:700px) {
     .list-group-horizontal {
         
             flex-direction: column !important;
    
    }
   img,svg {
          display: block;
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
    }
    .btn, button
    {
        font-size: 7px !important;
    } 
     .fixed-bottom
     {
        display: none !important;
     }
 
}
@media screen and (max-width:500px){
    .ytp-cued-thumbnail-overlay, .html5-video-player,.html5-main-video,#player{
       max-width:100px !important;
        max-height:100px !important;
    }
    .list-group-horizontal {
        flex-direction: inline !important;
    }
    
}
@media screen and (max-width: 500px) {
    .img-fluid {
        justify-content: center !important;
        /* margin: 0px !important;  padding: 15px !important;
        /* text-align: center !important; */
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
    }
     .scrollToTopBtn {
            font-size : 15px !important;
            left: 10px;
            width: 30px;
            height: 30px;
            display : none;
        }
}
@media screen and (max-width:400px) {
 
  .list-group-horizontal {
         
    flex-direction: inline !important;
    
   }

  body {
     font-size: 8px;
  }
  h3,h1{
     font-size: 9px; 
  }
  .btn,.question-count-text,.survey-description,.text-info,.ls-questionhelp,.font,.progress-bar,.ls-question-message{
     font-size: 8px;
  }
  .survey-welcome{
       font-size: 9px;
  }
  .answer-container {
    padding-top: 0.5 em;
    padding-bottom: 0.5 em;
  }
  .question-container{
     margin-bottom: 0.75em;
  }
  .answer-container{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    
  }

   .dropdown-toggle.nav-link{

          border-radius: 5px;
         color: white !important;
     }
  
    a.nav-link {

        
        border-radius: 5px;
        color: white !important;
    }
    li.list-group-itemindex-item{
         font-size : 5px; 
    }
    button{
        padding : 2px;
    }
    

    tbody,thead,tr{
        border-color : #006d82 !important ;
    }
    .answertext{
        text-align: center  !important;

    }
    .ranking-advanced-style .display_block_group{
      padding-bottom:10px !important;  
    }
    .ranking-advanced-style .display_block_group .sortable-block .sortable-block-content{
        font-size: 7px !important;
    }
    img, svg {
     overflow-clip-margin: content-box;
      overflow:  visible;
     justify-content: center !important;

    }
     
 

}



@media screen and (max-width:450px) {
    .list-group-horizontal {
         
    flex-direction: inline !important;
    
    }
   .bootstrap-datetimepicker-widget table td {
        display : table-row-group;
        margin : 0;
        width :100%;

        min-width: 31px;

    }
    
    
}

@media screen and (max-width:400px) {
   .bootstrap-datetimepicker-widget table td {
        display : table-row-group;
        margin : 0;
        width :100%;

        min-width: 27px;

    }
    
}


@media screen and (max-width:300px) {
  .dropdown-toggle {
        width :50px;
  }   
  img, svg {
          display: block;
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
    
}


li.dropdown.nav-item.ls-no-js-hidden.dropdown.index-menu-full {
    border-radius: 10px;
    justify-content: center;
   
}
a.dropdown-toggle {
    justify-content: center;
    padding : 5px !important;
    color : white !important;
    border-radius : 8px !important;
    background-color: #006d82 !important;
}

a.dropdown-toggle:hover {
    justify-content: center;
    padding : 5px !important;
    color : white !important;
    border-radius : 8px !important;
    background-color: #17a2b8 !important;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px){
    .dir-ltr .ls-answers td.radio-item, .dir-ltr .ls-answers td.checkbox-item {
        padding-left: 30px !important;
        text-align: none !important; 
        vertical-align: none !important
    }
  .navbar {
        height : auto !important;
    }
   .navbar-toggler
   {
       justify-content :center;
   }
  
}

@media screen and (max-width: 1013px){
 
    table.ls-answers tbody .control-label, table.ls-answers th{
        background : #006d82;
        text-align : center;
        color: white;
        padding :5px;
    }
tbody, thead, tr {
    border-color: #006d82 !important;
    border-radius: 5px 5px 0px 0px;
}
   .ls-button-label {
         font-size : 12px !important;
    
    }
    .btn-group , .list-group-horizontal 
    {
        display: block !important;

    }

.ls-choice.list-group-item.grabable.sortable-enable {
    touch-action: none;
    width: 250px !important;
};

.list-samechoiceheight .sortable-list {
    width: 250px !important;
}

}

.progress .progress-bar {
    line-height: 19px !important;
    padding: 10px !important ;
    font-weight: bold;
}


.page-footer {
  flex-grow: 0;
  flex-shrink: 0;
}

.btn-check:focus+.btn-primary, .btn-primary:focus, .btn-primary:hover {
    background-color: #17a2b8 !important;
    border-color: #006d82 !important;
    color: #fff;
}
.btn-danger:hover
{
    background-color: #d60550 !important;
    border-color: #d60550 !important;
}

.dropdown-menu {
    transform: translate(-5px, 10px) !important;
    overflow-y: scroll !important;
    width: 250px !important;
    height: 300px !important;
    overflow-x: clip !important;
    margin-bottom: 20px !important;
}

@media screen and (max-width: 900px) {
    .dropdown-menu {
        padding-top : 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 50% !important;
        overflow-y: clip;
        width: 200px !important;
        padding-bottom:25px !important;
    }
    .navbar-nav-scroll {
        overflow-y: clip !important;
    }
    
    .ls-choice.list-group-item.grabable.sortable-enable {
        touch-action: none;
        width: 80% !important;
        border-radius: 10px !important;
    }
    
    .ls-no-js-hidden.answers-list.list-samechoiceheight.list-samelistheight.row {
         display: flow !important;
    }
    
    .list-samechoiceheight .sortable-list {
        width: 100px !important;
    }
    .btn-group , .list-group-horizontal 
    {
        display: block !important;

    }
    .ls-button-label {
         border-radius: 10px !important;
    
    }
    
   .ls-no-js-hidden.card-footer {
       display: flex;
       margin: 10px;
       font-size: 8px !important;
       
    }
    
    .surveys-list li a {
        font-size: 7px !important;
     }
     
    .btn, button
    {
        font-size: 10px !important;
    }
    .navbar-nav {
     display: block !important;
     padding-bottom: 10px !important;
    }
    
}

.action--ls-button-submit
{
 display: inline !important;
}

.fixed-bottom {
    position: unset !important;
}

@property --progress-value {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@keyframes html-progress {
  to { --progress-value: 92; }
}

@keyframes css-progress {
  to { --progress-value: 87; }
}

@keyframes js-progress {
  to { --progress-value: 73; }
}

@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
  --size: 100px !important;
  --fg: #006d82;
  --bg: #17a2b8;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display:  grid !important;
  place-items: center;
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
  font-family: 'Barlow';
  font-size: calc(var(--size) / 5);
  color: var(--fg);
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
}

.top-container, .top-content
{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.progress-style
{
    padding: 10px 50px 10px 50px;
    border-radius: 19px 19px 19px 19px / 11px 19px 19px 19px;
    background-color: #F8F9F9 !important;
    border-color: #e2e2e2 !important;
    box-shadow: 0 30px 60px rgba(1, 1, 1, .2);
}

.tempus-dominus-widget .date-container-days div:not(.no-highlight).active, .tempus-dominus-widget .date-container-decades div:not(.no-highlight).active, .tempus-dominus-widget .date-container-months div:not(.no-highlight).active, .tempus-dominus-widget .date-container-years div:not(.no-highlight).active, .tempus-dominus-widget .time-container-clock div:not(.no-highlight).active, .tempus-dominus-widget .time-container-hour div:not(.no-highlight).active, .tempus-dominus-widget .time-container-minute div:not(.no-highlight).active, .tempus-dominus-widget .time-container-second div:not(.no-highlight).active {
    background-color: #006d82 !important;
}

.surveys-list li a {
    margin-left: 0.5em;
    margin-top: 20px !important;
    padding: 30px !important;
    font-size: 13px !important;
}

.fixed-bottom {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    height : 100px !important;
}

.font-noto {
    font-family: 'Barlow' !important;
}

@-moz-document url-prefix() {
    .list-unstyled, .list-inline {
      padding-left: 0;
      list-style: none;
      display: grid !important;
    }
   #survey {
      display: contents;
      margin: 0 auto;
    }
    
}

input[type="checkbox"]{
    flex: 0 0 auto;
    padding-left: 20px !important;
  }
  
 input[type="radio"]{
    flex: 0 0 auto;
    width: 100%;
    padding-left: 20px !important;
  } 

li.answer-item.radio-item {
    flex: 0 0 auto;
    width: 100%;
    padding-top: inherit !important;
}
.dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility {
  left: auto;
  margin-left: 10px;
}


.ls-answers label, .ls-answers th {
  font-weight: 400;

}

label {
  display: grid !important;
}

.form-control
{
    width : 100% !important;
}

blockquote>p {
    font-size: 20px !important;
    line-height: none !important;
    display: contents;
    padding: 0 1rem;
    margin: 0;
}

.btn-xs {
    background-color: #006d82 !important;
    color:white !important;
}

.edit-in-place-buttons {
    margin-top: -300px !important;
    position: absolute !important;
    /* display: flow; */
    background-color: #e2e2e2 !important;
    padding: 5px !important;
    border-radius: 20px !important;
    /* top: 500px; */
    /* left: 40px; */
    display: grid !important;
    margin-left: -150px !important;
    margin-bottom: 50px !important;
    padding-top: -50px !important;
    z-index: 100;
    border: 1px solid #efefef;
    box-shadow: 10px 5px 5px #e2e2e2;
}

[data-toggle="tooltip"] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border-radius: 12px;
    height: 48px;
    background-color: #006d82 !important;
    color: white !important;
    border-radius: 20px !important;
    display: contents;
    z-index: 100;
}
.fa-exclamation {
    color: black !important;
}
.fa-lock:before {
    content: "\f023";
    color: black !important;
}
.fa-file {
    content: "\f15b";
    color: black !important;
}
td.quickstat-response {
    background-color: white !important;
}
td.quickstat-rate {
    background-color: white !important;
}
td.quickstat-nbsend {
    background-color: white !important;
}
.input-group 
{
   flex-wrap: nowrap !important;
}
.mainrow {
    padding-top: 5% !important;
    background-color: #efefef !important;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 20px !important;
    box-shadow: 0 30px 60px #6d6d6c;
    padding-bottom: 1% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
    padding-bottom : 30px !important;
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    table.ls-answers tbody .control-label {
        text-align: left;
        background-color: #006d82;
        color: white;
    }
}

.save-message {
        /* margin-left: 25% !important;*/
        background-color: white !important;
         /*margin-right: 25% !important;*/
    }
    
    
.save-message.card.bg-light.mb-3.mt-3.clearfix,.save-message.card.card-body.bg-light.clearfix.mb-3
{
    background-color: white !important;
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;

    width: 120% !important;
}

.dropdown-item {
    width: 120% !important;

}
.dropdown-item:hover {
    background-color: #006d82 !important;

}

.dropdown-item:after {
    background-color: #17a2b8 !important;

}  


.btn-toolbar {
        display: table-row !important;
        /* flex-wrap: wrap; */
        justify-content: flex-start;
        width: 200% !important;
        justify-content: initial;
    }
@media only screen and (min-width: 800px) {
    .btn-toolbar {
      display: flex !important;
      flex-wrap: wrap;
      display: flex !important;
    }
}
@media only screen and (max-width: 800px) {
   .font2{
        font-size : 12px !important;
    }
    .h2 {
        font-size : 15px !important;
    }
  
}
@media only screen and (max-width: 600px) {
   .font2{
        font-size : 7px !important;
    }
      .h2 {
        font-size : 10px !important;
    }
}

ul.list-unstyled.col-12.col-md-12 {
        display: table-row !important;
        padding: 2% !important;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  .dir-ltr table.ls-answers .radio-item .ls-label-xs-visibility, .dir-ltr table.ls-answers .checkbox-item .ls-label-xs-visibility {
    margin-left: 0;
    background-color: #e2e2e2 !important;
    padding: 1% !important;
    border-radius: 10px !important;
  }
}
.file-element {
    display: table-cell;
    width: 100%;
    padding: 0.5em 0;
    text-align: -webkit-center;
}


.file-preview span {
   margin-left: 0em !important;
}

label.save-survey-label.control-label, label.load-survey-label.control-label {
    margin: auto;
    width: % !important;
    padding: 10px;
    border: 1px solid #efefef;
    border-radius: 10px !important;
    text-align: center;
    margin-bottom: 10px !important;
    background-color: #efefef;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .125) !important;
}


.btn-danger:hover
{
    background-color: #D60550 !important;
}
.ri-close-circle-line:before {
    content: "\eb97";
    padding-right: 5px !important;
}
.ri-checkbox-circle-line:before {
    content: "\eb81";
    padding-right: 5px !important;
}
.toolbar {
    /* background-color: rgba(214, 5, 80, var(--bs-text-opacity)) !important; */
    background-color: #D6054F !important;
    border-radius: 10px !important;
    margin: 10px;
    padding: -10px !important;
}
i.ri-delete-bin-fill.text-danger {
    color: white !important;
}
i.ri-arrow-right-s-fill,i.ri-arrow-left-s-fill {
    background: #006d82;
    padding: 5px !important;
    border-radius: 10px !important;
    color: white;
}
.tempus-dominus-widget .calendar-header {
    padding-top: 10px !important;
}

input::file-selector-button {
  font-weight: bold;
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
  border-radius: 3px;
}

 .question-container.merge-bottom {
    margin-bottom: 0 !important;
    border-bottom: 0 none !important;
  }
 
  .question-container.merge-top {
    margin-top: -1px !important;
    border-top: 0 none !important;
  }
 
  .question-container.hide-question-text .question-title-container {
    display: none !important;
  }
  td.upload.placeholder {
    padding: 0px !important;
    display : none !important;
}
.file-preview span {
    margin-left: none !important;
    /* background-color: red; */
}
.files-list {
    display: table;
    table-layout: fixed;
    width: 100%;
    list-style: none;
    padding: 1em;
    margin: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px !important;
    /* background: #6d6d6c; */
}

td.upload.edit, td.upload.comment, td.upload.title {
    text-align: center;
}
.uploadedfiles tbody tr td {
    text-align: left;
    padding: 10px !important;
}
fieldset {
    min-width: 0;
    padding: 10px !important;
    margin: 0;
    border: 0;
}
.upload-div {
    text-align: center;
    margin-bottom: 0.5em;
    margin-left: 40% !important;
}
a.btn.btn-danger {
    height: 48px !important;
    width: 200px !important;
}
.btn-danger:hover {
    background-color: #c00448 !important;
    border-color: #D60550 !important;
}
.input-group-text.search-icon {
    display: none;
}
input[id='searchbox'] {
    border-radius: 10px !important;
    margin: 10px !important;
}
.input-group-text.checkbox {
    margin: 10px !important;
}
.ls-choice.list-group-item.grabable.sortable-enable {
    touch-action: none;
    border-radius: 10px !important;
}

.ri-checkbox-blank-circle-line:before {
    content: "\eb7d";
    padding-right: 5px !important;
}
.ri-men-line:before {
    content: "\ef2e";
    padding-right: 5px !important;
}
.ri-women-line:before {
    content: "\f2ce";
    padding-right: 5px !important;
}
.tempus-dominus-widget .date-container-days div:not(.no-highlight).today:before, .tempus-dominus-widget .date-container-decades div:not(.no-highlight).today:before, .tempus-dominus-widget .date-container-months div:not(.no-highlight).today:before, .tempus-dominus-widget .date-container-years div:not(.no-highlight).today:before, .tempus-dominus-widget .time-container-clock div:not(.no-highlight).today:before, .tempus-dominus-widget .time-container-hour div:not(.no-highlight).today:before, .tempus-dominus-widget .time-container-minute div:not(.no-highlight).today:before, .tempus-dominus-widget .time-container-second div:not(.no-highlight).today:before {
    border-color: rgba(0, 0, 0, .2) transparent #006d82;
    border-style: solid;
    border-width: 0 0 7px 7px;
    bottom: 6px;
    content: "";
    display: inline-block;
    position: absolute;
    right: 6px;
}

.leaflet-container {
    border-radius: 20px !important;
}

.leaflet-bar a {
    background-color: #006d82;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: white;
    margin-bottom: 10px !important;
}

.leaflet-touch.leaflet-control-layers, .leaflet-touch.leaflet-bar {
    /* border: 2px solid rgba(0, 0, 0, 0.2); */
    background-clip: padding-box;
    padding: 100p;
}
.leaflet-bar a,.leaflet-bar a:hover  {
    background-color: #006d82 !important;
    color: white !important;
    border-radius : 10px !important;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: none !important;
    }
.leaflet-control-layers-expanded {
    background-color: #006d82 !important;
    color: white;
}

.geoname_search {
    margin-right: 10px;
    background-color: #e2e2e2;
    padding: 20px !important;
    border-radius: 10px !important;
}



.default {
  --primary-color: rgb(12, 153, 172);
  --secondary-color: #000;
  --background-default: #efefef;
  --background-paper: #fff;
  --font-color: #424242;
  --heading-color: #292922;
}
.mountain{
  background : url("https://cdn.uca.fr/images/ent/background-ent2-mountain-1.jpg") no-repeat center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  overflow-x: hidden;
}
.uca-beige
{
	background: url(https://cdn.uca.fr/images/ent/background-ent2-uca-beige.jpg) no-repeat center fixed;
	background-size: cover;
 	background-repeat: no-repeat;
  	overflow-x: hidden;
}
.uca-bleu
{
	background: url(https://cdn.uca.fr/images/ent/background-ent2-uca-blue.jpg) no-repeat center fixed;
	background-size: cover;
 	background-repeat: no-repeat;
  	overflow-x: hidden;
}
.uca-grey
{
	background: url(https://cdn.uca.fr/images/ent/background-ent2-uca-grey.jpg) no-repeat center fixed;
	background-size: cover;
 	background-repeat: no-repeat;
  	overflow-x: hidden;
}

.uca-bleu-text
{
background: url(https://cdn.uca.fr/images/ent/background-ent2-texture-blue.jpg) no-repeat center fixed;
background-size: cover;
background-repeat: no-repeat;
overflow-x: hidden;
}
.dark
{
   background: url(https://htmlcolorcodes.com/assets/images/colors/black-color-solid-background-1920x1080.png) no-repeat center fixed;
    background-size: cover;
    background-repeat: no-repeat;
    overflow-x: hidden; 
}

.navbar-expand-md.navbar-nav 
{
   
    margin-top: 5% !important;
}


@media only screen and (min-width: 768px) {

}

@media only screen and (max-width: 1200px) and (min-width: 750px) {
     a.nav-link.dropdown-toggle 
    {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }   
    ul.nav.navbar-nav.navbar-action-link.navbar-right.ms-auto {
        display: block;
       
    }
    li.nav-item {
        margin: 10px !important;
    }
}


@media only screen and (max-width: 1000px) {
select#theme-selector {
    /* padding: 10px !important; */
    margin-top: 7% !important;
    margin-bottom: 5% !important;
    font-size: 13px !important;
    margin-left: 5% !important;
    
}
.mainrow {
    margin-left: 0px !important;
    margin-right:  0px !important;
}

.group-container.space-col 
{
    padding: 0px 0px 0px 0px !important;
}
#accessibility-modal.close
{
    display :none !important;
}

.fixed-top {
    position: absolute !important;
    /* top: 0; */
    /* right: 0; */
    /* left: 0; */
    /* z-index: 1030; */
}

.justify-content-center.col-8.mx-auto.d-block.card-home.rounded-1 {
    width: -webkit-fill-available !important;
}
#surveys-list-container {
     margin-top: 0px !important; 
     padding-left: unset !important;
     padding-right: unset !important;
}
.row {

}
.row.card-body.rounded-0 {
    padding-left: unset !important;
    padding-right: unset !important;
    margin-left: unset !important;
    margin-right: unset !important;
}
.text-item.other-text-item.col-auto {
    width: inherit !important;
}
li.answer-item.radio-item {
    /* flex: 0 0 auto; */
    width: 75% !important;
    padding-top: inherit !important;
}
.surveys-list-container.surveytitle.btn-block.col-8.mx-auto {
    width: unset !important;
}

}

  @media only screen and (max-width: 789px) {
                select#theme-selector {
           
            margin-right: auto;
            /* font-size: 15px !important; */
            margin-left: auto !important;
            margin-top: 10px !important;
           
        }
    }
.homeButton{
    border-radius:10px !important;
    color:white !important;
    background-color:red;
}
}
input#datasecurity_accepted {
    width: 2px !important;
    height: ;
}
.card-header:first-child {
    border: 3px solid white !important;
}

.form-check {
    background-color: white !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin: 10px !important;
    border-radius: 10px !important;
}

.tempus-dominus-widget .toolbar div:hover {
    background-color: #c40449 !important;
    border-radius : 10px !important ;
}

.slider-list .slider-item 
{
   width: -moz-available;          /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
   width: fill-available
}
.tooltip
{
    padding: 1px !important;
    z-index : 0 !important;

}
.slider .tooltip.bs-tooltip-top {
    margin-top: -30px;
}
    
.col-6.slider-right.text-end {
     padding-bottom : 30px !important;
}
.col-6.slider-left {
    
    padding-bottom : 30px !important;
}

.slider-list .ls-slider-item-horizontal .slider-min-block {
        margin-right: -1rem;
         order: 1 !important;
    }
.slider-list .ls-slider-item-horizontal .slider-max-block {
    order: 25 !important;
}


.slider-list .ls-slider-item-horizontal .slider-container {
    order: 2 !important;
}

@media only screen and (max-width: 751px) {
        .slider .tooltip.bs-tooltip-top {
            margin-top: 30px;
    }
   .slider-list .ls-slider-item-horizontal .slider-max-block {
        order: 1 !important;
    }
  
}
}
 

@media only screen and (min-width:750px) {
    .slider .tooltip.bs-tooltip-top {
            margin-top: 30px;
    }
     .slider-list .ls-slider-item-horizontal .slider-max-block {
        order: 25 !important;
    }
    .col-6.slider-right.text-end {
        font-size: 10% !important;
    }
    .col-6.slider-left {
       font-size:10% !important;
    }
   

}

li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {

    margin-left: 2% !important;
}


li.answer-item.radio-item {
    flex: 0 0 auto;
    width: 100%;
    margin-left: 2% !important;
}

label.save-survey-label.control-label, label.load-survey-label.control-label
    {
        margin-left: 2% !important;
        margin-right: 2% !important;
    }
    .save-survey-input.input-cell {
         margin: 2% !important;
    }
.alert-danger {
    margin: 2% !important;
}