/******************
    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
*/
.fruity .text-primary{
    color: #00b834;
}
#navbar {
    background: #1f1f1f;
}
#dynamicReloadContainer > .navbar.navbar-default.navbar-fixed-top > .navbar-header {
    background: #1f1f1f;
}
@media (max-width: 768px){
#dynamicReloadContainer > div.navbar.navbar-default.navbar-fixed-top > div.navbar-header > button {
    background-color: #1f1f1f;
}
}
h1.survey-name {
    font-size: 4rem;
}
.progress {
    width: 75%;
    margin: auto;
    border-radius: 90px;
}

.fruity .survey-description{
    margin: 1.75rem 1rem 3rem 1rem;
    color: #858585;
}
#welcome-container {
    margin: 0 1rem 2rem 1rem;
    padding: 0 2rem;
}
/* progress bar */
.fruity .progress {
    background-color: #1e3725;
}
 
.limit-text-window {
    max-height: 40rem;
    max-height: 33vh;
    padding: 0.5rem 2.5rem;
    overflow: auto;
    border-top: none;
    border-bottom: none;
    background-color: #2a2b2a;
    border-radius: 16px;
}   
.limit-text-window > h1 {
    font-size: 2.5rem;
}
.btn-group-lg>.btn, .btn-lg {
    border-radius: 12px;
    margin-right: 1rem;
    background: #00b834;
}

label.control-label {
    margin: 2rem 1rem;
}
label.control-label > input {
    padding: 1rem;
    border-radius: 20px;
}



.poweredby{
    max-width:250px;
}



.answer-container input.has-warning:focus {
    color: #cc0000;
}




@media only screen and (min-width: 600px) {
  body {
    font-size: 16px;
  }
  h1.survey-name {
    font-size: 6rem;
    }

    #welcome-container {
        margin: 0rem 2rem 2rem 2rem;
    }

    /* privatnost podataka */
    .limit-text-window {
        max-height: 50rem;
        max-height: 39vh;
        padding: 1.5rem 3rem;
        background-color: #2a2a2a;
        border-radius: 18px;
    }    
    .toggle-switch .toggle-slider {
    width: 60px;
    height: 30px;
    margin-right: 10px;
    overflow: visible;
  }
  
  .toggle-switch .toggle-slider:before {
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
  }
}    

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.toggle-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .toggle-slider {
  position: relative;
  display: inline-block;
  min-width: 40px;
  width: 40px; /* set a fixed width */
  height: 20px; /* set a fixed height */
  margin-right: 5px;
  border-radius: 10px;
  background-color: #ccc;
  transition: background-color .4s, transform .4s;
  overflow: hidden;
}

.toggle-switch .toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  border-radius: 50%;
  background-color: white;
  transition: transform .4s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #00b834;
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 1px #00b834;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px); /* match the width of the .toggle-slider */
}

input.form-control:not(.has-warning) {
  color: #ddd !important;
}

.modal-dialog > .modal-content {
    background-color: #1f1f1f;
}
    
#dynamicReloadContainer > div.navbar.navbar-default.navbar-fixed-top {
    background-color: #1f1f1f;
}