/******************
    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
*/

/* General Layout */
@font-face {
font-family:"TheSansUHH";
font-display:fallback;
src:url("./SansUHH/TheSansUHHRegular.woff") format("woff"),
	url("./SansUHH/TheSansUHHRegular.woff2") format("woff2");
font-weight:normal;
font-style:normal;
}

@font-face {
font-family:"TheSansUHH"; font-display:fallback;
src:url("./SansUHH/TheSansUHHBold.woff2") format("woff2");
font-weight:bold;
font-style:normal;
}

@font-face {
font-family:"TheSansUHH";
font-display:fallback;
src:url("./SansUHH/TheSansUHHRegularItalic.woff2") format("woff2");
font-weight:normal;
font-style:italic;
}


body {
  font-family: "TheSansUHH", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #999;
  margin: 0 !important;
  padding: 0 !important;
}
#outerwrapper {
  margin-top: 10px;
  margin-bottom: 10px;
  float: none;
  clear: both;
  background-color: #FFF;
}
#outerwrapper #outerwrapper,
#outerwrapper #outerwrapper .container {
  padding: 0;
  width: auto;
}
#outerframeContainer {
  padding: 0;
  width: auto;
}
#dynamicReloadContainer {
	padding: 0;
}


@media only screen and (max-width: 768px) {
  #outerwrapper {
    margin-top: 0;
    margin-bottom: 0;
  }  
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}


@media (min-width: 992px) {
  .container {
    /*width: 970px;*/
    width: 998px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

hr {
  margin: 10px 0;
}
a,
a:link {
  color: #555;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #333;
  text-decoration: underline;
}
img {
    max-width: 100%;
}

/* Navbar */
.header-wrapper {
  margin-bottom: 15px;
}
.navbar-toggle {
	float: none;
  margin-right: 0;
}
.navbar-collapse {
	padding: 0;
}
.navbar {
	min-height: 0;
	margin: 0;
	text-align: center;
}
.navbar-header {
  float: none !important;
  padding: 15px 0;
}
.navbar-brand {
  padding: 15px 0;
  min-height: initial;
}
h1.surveyname {
  text-align: center;
  font-weight: 700;
  height: auto;
  line-height: 130%;
  font-size: 19px;
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .logo-wrapper,
  h1.surveyname {
    margin-bottom: 15px;
  }
}
.navbar-nav {
	float: none;
}
.navbar-default {
	background-color: transparent;
	border: none;
}
.navbar-action-link {
	padding: 0;
}
.navbar-collapse.in {
	overflow-y: visible;
}
.navbar-item-left {
	text-align: left;
	padding-left: 0;
}
.navbar-item-middle {
	text-align: center;
}
.navbar-item-right {
	text-align: right;
	padding-right: 0;
}
.navbar-logo-left {
  padding-left: 0;
}
.navbar-logo-middle {
  padding-right: 0;
  text-align: center;
}
.navbar-logo-right {
  padding-right: 0;
  text-align: right;
}
.logo-bar {
  margin-top: 0;
  padding: 15px 0;
}
.navbar-banner {
  text-align: center;
}

@media only screen and (max-width: 768px) {
	.navbar-collapse {
		padding: 0 15px;
	}
  .navbar-logo-left {
    padding: 0;
    text-align: center;
  }
  .navbar-logo-middle {
    text-align: center;
    padding: 0;
    margin-top: 15px;
  }
  .navbar-logo-right {
    text-align: center;
    padding: 0;
    margin-top: 15px;
  }
  .navbar-item-left {
    text-align: center;
    margin: 6px 0;
    padding: 0;
  }
  .navbar-item-middle {
    text-align: center;
    margin: 6px 0;
    padding: 0;
  }
  .navbar-item-right {
    text-align: center;
    margin: 6px 0;
    padding: 0;
  }
    .navbar-banner {
    padding: 0;
    }
}

/* Language Changer */
.language-wrapper {
  margin: 15px 0;
  text-align: right;
}
.languagechanger {
    margin: 15px 0;
    display: block;
}
a.languagechanger,
a:link.languagechanger {
    color: #888;
    text-decoration: none;
}
a:hover.languagechanger,
a:focus.languagechanger {
    color: #888;
    text-decoration: none;
}
#langs-container {
    height: auto;
}
.form-change-lang {
    text-align: center;
}
ul#langs-container {
    margin-left: 42%;
    overflow: initial !important;
}

/* Progress bar */
.progress-wrapper {
  padding: 0;
}
.progress {
  background-color: #f0f0f0;
  margin-bottom: 0;
}
.progress-bar {
  background-color: #333;
}

/* Welcome Page */
.text-info {
  color: #333;
}
.survey-welcome {
  margin-top: 15px;
}
.question-count-text {
  margin-top: 15px;
  color: #575757;
}

/* Privacy */
.privacy {
  margin-top: 15px;
  padding: 15px 0;
  margin: 15px 1px;
  border: 1px solid #eee;
  background-color: #eee;
}
p.ls-privacy-body {
  margin: 15px 0 0 0;
  font-style: italic;
}

/* Privacy policy */
.panel {
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  background-color: transparent;
}
.panel-primary {
    border-color: transparent;
}
.panel-primary > .panel-heading {
    color: #000;
    background-color: transparent;
    border-color: transparent;
    padding: 15px 0;
}
.panel-body {
    padding: 5px 0;
}
.panel-footer {
    padding: 10px 0;
    background-color: transparent;
    border-top: transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
input#datasecurity_accepted {
  vertical-align: top;
}

/* Group layout */
.group-outer-container {
	display: block;
}
.group-title {
  text-align: center;
  font-weight: normal;
  font-size: 140%;
  margin-top: 0;
  margin-bottom: 15px;
}
.group-description {
  margin-top: 0;
  text-align: center;
}

/* Question layout */
.question-number, .question-code {
	float: none;
	margin: 0;
}
.question-container {
    background-color: #fff;
    margin-bottom: 30px;
    margin-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #aaa;
}

.question-text {
    font-size: 120%;
}

.input-error.question-container {
    border: 1px solid #a94442;
}
.question-title-container {
    padding: 8px 15px;
    background-color: #eee;
    color: #333;
    margin-bottom: 15px;
}

.question-valid-container {
  padding-left: 0;
  padding-right: 0;
  font-size: 90%;
  margin-top: 5px;
}
.question-number,
.question-code {
  font-weight: normal;
}
.ls-answers tbody .answertext {
  text-align: left;
}
tr.ls-odd,
.array-flexible-column tr.answers-list:nth-child(even) {
  background-color: #f0f0f0;
}
.table-hover > tbody > tr:hover,
tr.answers-list:hover,
.array-flexible-column tr.answers-list:hover {
    background-color: #ddd;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  border: 0;
  padding: 4px 8px;
}
.table-bordered {
  border: 0;
}
.asterisk {
  margin-right: 5px;
  font-size: 90% !important;
  vertical-align: top;
}
.asterisk small {
  font-size: 90% !important;
  vertical-align: top;  
}
.save-form .asterisk,
.save-survey-form .asterisk {
  float: none !important;
}
.input-error .asterisk {
  font-size: 90% !important;
  margin-top: 0;  
}
.question-help-container {
  font-size: 90%;
  margin-top: 10px;
  color: #595959;
}
.numeric-multi input.numeric,
.multiple-short-txt input.form-control,
.multiple-short-txt textarea.form-control {
  margin-bottom: 15px;
}
.ls-input-group-extra {
  vertical-align: top;
  padding: 1rem 1.2rem;
}
.array-flexible-row .ls-answers .answertextright {
  text-align: right;
}

/* Navigator */
#navigator-container {
  margin-bottom: 15px;
  padding-bottom: 0;
  margin-top: 30px;
}
.btn {
  font-size: 110%;
  border-radius: 4px;
}
a.btn-primary {
  color: #fff;
}
.btn-primary {
  color: #ffffff;
  background-color: #333;
  border-color: #333;
}
.btn-primary:hover {
  color: #ffffff;
  background-color: #111;
  border-color: #111; 
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #ffffff;
  background-color: #111;
  border-color: #111;
}
.input-group-addon.btn-primary {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.btn-default {
    border-color: #adadad;
}

/* Radios and checkboxes */

/* radio buttons */
.radio-item label::before {
  border: 1px solid #aaa;
  background-color: #FFF;
}
.radio-item label::after {
  background-color: #333;
}
/* checkboxes */
.checkbox-item label::before {
  border: 1px solid #aaa;
  background-color: #FFF;
}
.checkbox-item label::after {
  color: #333;
  background-color: transparent;
  width: 17px;
  height: 17px;
  left: -1px;
  top: 0px;
  font-size: 12px;
}


/* Ranking question */
.sortable-choice {
  padding: 5px;
}
.sortable-choice .ls-choice.sortable-item {
  background-color: #ddd;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}
.sortable-rank {
  padding: 5px;
}
.sortable-rank .ls-choice.sortable-item {
  background-color: #333;
  border: 1px solid #333;
  margin-bottom: 5px;
  color: #fff;
}

/* Boilerplate question */
/* 2019-04-04 No paddings for boilerplate */
.boilerplate {
    padding-bottom: 0;
}
/*.boilerplate .answer-container {
    display: none !important;
}
*/
.boilerplate .question-title-container {
    margin-bottom: 0;
}

/* Equation question */
/* 2020-09-07 No paddings for equations */
.equation {
    padding-bottom: 0;
}
.equation .answer-container {
    display: none !important;
}
.equation .question-title-container {
    margin-bottom: 0;
}

/* Gender question */
/* Yes/no question */
/* Bootstrap buttons layout */
.gender-button .btn-primary,
.yes-no .btn-primary,
.bootstrap-buttons-div .button-item {
  color: #333;
  background-color: #eee;
  border: 2px solid #FFF;
  border-radius: 6px;
}
.gender-button .btn-primary:active,
.gender-button .btn-primary.active:hover,
.gender-button .btn-primary:focus,
.gender-button .btn-primary.active,
.gender-button .btn-primary.active:focus,
.yes-no .btn-primary:focus,
.yes-no .btn-primary.active,
.yes-no .btn-primary.active:hover,
.yes-no .btn-primary.active:focus,
.bootstrap-buttons-div .button-item:focus,
.bootstrap-buttons-div .button-item.active,
.bootstrap-buttons-div .button-item:focus {
  color: #FFF;
  background-color: #777;
  border: 2px solid #fff;
  opacity: 1;
  filter: alpha(opacity=1);
  background-image: none;
  transition: 0.125s ease-in-out;
}
.gender-button .btn-primary:hover,
.yes-no .btn-primary:hover,
.bootstrap-buttons-div .button-item:hover {
  color: #FFF;
  background-color: #777;
  border: 2px solid #fff;
  opacity: 0.75;
  filter: alpha(opacity=75);
  background-image: none;
  transition: 0.125s ease-in-out; 
}

/* Bootstrap buttons layout */
/* 2019-04-05 Marcel: New CSS for bootstrap button layout */
.bootstrap-buttons-div
{
	padding: 0 5px;
}
.bootstrap-buttons-div .button-item {
    word-break: break-all;	/* remove this to not break words (wastes quite some space) */
    white-space: normal;
    padding: 0.5em 0.5em;
}

/* 5pt choice */
.choice-5-pt-radio li.radio-item {
  margin-right: 15px;
}

/* Slider question */
.slider-handle {
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #555 0%, #222 100%);
    background-image: -o-linear-gradient(top, #555 0%, #222 100%);
    background-image: linear-gradient(to bottom, #555 0%, #222 100%);
}
.tooltip-inner {
  background-color: #333;
}
.tooltip.top .tooltip-arrow {
     border-top-color: #333;
}
.slider-selection {
    background-image: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
    background-image: -o-linear-gradient(top, #eee 0%, #ccc 100%);
    background-image: linear-gradient(to bottom, #eee 0%, #ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0);
}

.numeric-multi .ls-group-remaining .suffix-text.suffix {
    display: inline;
    margin-left: -15px;
}


/* Text questions */

/* Highlight text fields with main template color */
.form-control:focus {
    border-color: #000;
    box-shadow: inset 0 0 0 1px #0271bb, 0 0 5px 1px #0271bb; !important;
}

/* Print Page */
.url-wrapper-survey-print {
  margin: 15px 0;
}
.question-container-printanswers {
  border-bottom: 1px solid #ccc;
}

/* Footer */
footer .copyright {
	text-align: center;
  margin: 20px 0;
  font-size: 90%;
}

div.yes-no .btn-group label,
.gender .btn-group label {
    padding-top: 10px;
}

.completed-wrapper {
  margin-bottom: 45px;
  min-height: 200px;
 }

 /* Datepicker */

 .datepicker .active,
 .datepicker .today {
  background-color: #333 !important;
  background: #333 !important;
  color: #FFF !important;
 }

/* Index */
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  background-color: #333;
  color: #FFF;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: #ccc;
}

.dropdown-menu > li > a {
  background-color: #fff;
  color: #000;
}

/* Startpage */
.survey-list-heading,
.survey-list,
.survey-contact {
  text-align: center;
}
#surveys-list-container {
  background-color: #fff;
  padding: 45px 0;
}

/* Fix array alignment */
td.answer-item.radio-item {
    vertical-align: middle;
}

/* 2018-12-02 Marcel: Fix captcha width */
.captcha-image
{
    width: auto;
}

/* 2019-02-10 Marcel: Additional language changer adjustments */
#main-col form div.form-change-lang.form-inline
{
    display: none;
}


/* 2019-02-11 Marcel: Hide progress bar from certain screens */
.printanswers .header-wrapper .progress-wrapper,
.listsurveys .header-wrapper .progress-wrapper
{
    display: none;
}

/* 2019-03-11 Marcel: adjust margin to not show scroll bar at list survey page */
.listsurveys
{
    margin-right: 15px;
    margin-left: 15px;
}

/* 2019-02-11 Marcel: Remove background color from print version (PDF) */
body.printlayout
{
    background-color: #fff;
    padding: 10px !important;
}



/* START 2019-03-13 Marcel: Adjusted styles for "List surveys" screen */
.listsurveys
{
	border-bottom: 1px solid #000;
}

.listsurveys .header-wrapper
{
	margin-bottom: 0px;
}

.listsurveys .header-wrapper .navbar-brand
{
	display: none;
}

#surveys-list-container 
{
    padding: 0 0 45px 0;
    margin-top: 0px;
}

#surveyListFooter
{
	margin: 0px;
	padding: 0px;
	height: 0px;
}

.surveys-list .btn-group {
    margin: 0 auto;
    float: none;
}

.survey-contact.col-xs-12 {
    padding-top: 20px;
}
/* END 2019-03-13 Marcel: Adjusted styles for "List surveys" screen */




/* 2019-04-04 Marcel: Improved display for split up array questions */
@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
{
    .table-hover > tbody > tr:hover, 
    tr.answers-list:hover, 
    .array-flexible-column tr.answers-list:hover {
        background-color: initial; 
        color: initial;
    }   
    tr.ls-odd, .array-flexible-column tr.answers-list:nth-child(even) {
        background-color: #f0f0f0;
    }
    
    table.ls-answers > tbody > tr:nth-child(even):hover {
        background-color: #f0f0f0;
    }
    
    table.ls-answers > tbody > tr:nth-child(odd):hover {
    	background-color: #fff;
	}


    
    table.ls-answers > tbody > tr td.answer-item.radio-item,
    table.ls-answers > tbody > tr td.answer-item.checkbox-item {
        border-bottom: 1px solid #ddd;
        padding-left: 30px;
        padding-top: 10px;
        padding-bottom: 0px;
    }
    
    td.answer-item.radio-item.answer_cell_ noanswer-item,
    td.answer-item.checkbox-item.answer_cell_ noanswer-item {
        border-bottom: 0px;
    }
    .array-flexible-row .ls-answers .answertextright {
        text-align: left;
    }
    
    table.ls-answers > tbody > tr.ls-heading-repeat
    {
        display: none;
    }
    
    table.ls-answers > tbody > tr th.answertext,
    table.ls-answers > tbody > tr th.answertextright {
        font-size: 120%;
    }
    
    
    
    table.ls-answers > tbody > tr td.radio-item:hover, 
    table.ls-answers > tbody > tr td.checkbox-item:hover {
	    color: #000;
	    background-color: #ddd;
	}
    
}

/* 2019-05-03 Marcel: Left align item text at multiplce choice with comment */
.multiple-opt-comments .checkbox-text-item .answer-item .checkbox-label
{
    text-align: left;
}


/* 2019-05-09 Marcel: Styles for Bootstrap tooltips */
span.tooltip
{
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    color: #a94442;
    opacity: 1;
    font-size: inherit;
    position: initial;
    display: inline;
}


/* Add class "tooltipquestion" at the "Display" section of your question! */
.tooltipquestion li.radio-item label, 
.tooltipquestion li.checkbox-item label {
    width: 100%;
}

.answer-item .tooltip .tooltip-inner {
    max-width: 75%;
    margin: auto;
}
/* Make sure sliders with tooltips still use same defaults */
.answer-item .slider .tooltip .tooltip-inner {
    max-width: initial;
}

/* Align modal on top */
.modal::before {
    height: auto;
    vertical-align: top;
}

/* Hide tip */
.ls-em-tip {
  display: block;
}
.ls-em-error {
  display: block;
}

/* Error page */
.error-wrapper p {
    font-size: 100%;
    font-family: inherit;
    color: #333;
    line-height: 1.42857143;
}

/* 2021-01-28 Marcel Minke: Fix slider display issues on iPad and other smaller devices */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
{
    .numeric-multi .slider-item .visible-xs-block 
    {
        display: none !important;
    }
}

/*tri: start*/
section.info ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: right;
}
section.info li {
    display: inline-block;
}
section.info li a {
    position: relative;
    padding-left: 12px;
    margin-left: 20px;
    font-weight: bold;
}
section.info li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 6px;
    height: 6px;
    border: 2px solid #4E4E4E;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg) scale(0.8) translate3d(-1px, 1px, 0);
}
body {
    background-color: #fff;
}

.progress-bar {
    background-color: #0271bb;
}
.radio-item label::after {
    background-color: #0271bb;
}
.checkbox-item label::after {
    color: #0271bb !important;
}
.checkbox-item input[type="checkbox"]:focus + label::before, 
.checkbox-item input[type="radio"]:focus + label::before {
    outline: none !important;
}

.question-container {
	 border: 1px solid #ddd !important;
}

.question-title-container {
    background-color: #f3f3f3 !important;
}

.tooltip-inner {
    background-color: #0271bb;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #0271bb;
}




/*--------------------start button--------------------- */
/*btn btn-primary*/

    /*next-btn*/

    .ls-move-submit-btn,
    .ls-move-submit-btn:hover,
    .ls-move-submit-btn:active,
    .ls-move-submit-btn.active,
    .ls-move-submit-btn:focus,
    .ls-move-submit-btn.focus,
    .ls-move-submit-btn:active:hover,
    .ls-move-submit-btn.active:hover,
    .ls-move-submit-btn:active:focus,
    .ls-move-submit-btn.active:focus,
    .ls-move-submit-btn:active.focus,
    .ls-move-submit-btn.active.focus,
	
    .ls-move-next-btn,
    .ls-move-next-btn:hover,
    .ls-move-next-btn:active,
    .ls-move-next-btn.active,
    .ls-move-next-btn:focus,
    .ls-move-next-btn.focus,
    .ls-move-next-btn:active:hover,
    .ls-move-next-btn.active:hover,
    .ls-move-next-btn:active:focus,
    .ls-move-next-btn.active:focus,
    .ls-move-next-btn:active.focus,
    .ls-move-next-btn.active.focus {
        color: #ffffff !important;
        background-color: #0271bb !important;
        border-color: #0271bb !important;
        background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;
    }

    /*upload: Save Changes...*/
    .upload.btn-primary,
    .upload.btn-primary:hover,
    .upload.btn-primary:active,
    .upload.btn-primary.active,
    .upload.btn-primary:focus,
    .upload.btn-primary.focus,
    .upload.btn-primary:active:hover,
    .upload.btn-primary.active:hover,
    .upload.btn-primary:active:focus,
    .upload.btn-primary.active:focus,
    .upload.btn-primary:active.focus,
    .upload.btn-primary.active.focus {
        color: #ffffff !important;
        background-color: #0271bb !important;
        border-color: #0271bb !important;
        background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;
    }
	
	/*upload: Select file...*/
	.upload-div .btn {
        color: #ffffff !important;
        background-color: #0271bb !important;
        border-color: #0271bb !important;
        background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;
	}
	
	
	/*upload: You can upload...*/
	.uploader .alert-info {
		color: #ffffff !important;
		background-color: #0271bb !important;
		border-color: #0271bb !important;
	}	

    /*gender/yes/no... : default*/
	.gender-button .btn-primary, 
	.yes-no .btn-primary, 
	.bootstrap-buttons-div .button-item {
		/*color: #ffffff;*/
		/*background-color: #6068879e;*/
	}

        /*gender/yes/no... : hover*/
        .gender-button .btn-primary:hover, 
        .yes-no .btn-primary:hover, 
        .bootstrap-buttons-div .button-item:hover {
            color: #ffffff !important;
            background-color: #0271bb !important;
            border-color: #0271bb !important;
            background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
            background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
            background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
            background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
            background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;
        }       

            /*gender/yes/no... : active*/
            .gender-button .btn-primary:active, 
            .gender-button .btn-primary.active:hover, 
            .gender-button .btn-primary:focus, 
            .gender-button .btn-primary.active, 
            .gender-button .btn-primary.active:focus, 
            .yes-no .btn-primary:focus, 
            .yes-no .btn-primary.active, 
            .yes-no .btn-primary.active:hover, 
            .yes-no .btn-primary.active:focus, 
            .bootstrap-buttons-div .button-item:focus, 
            .bootstrap-buttons-div .button-item.active, 
            .bootstrap-buttons-div .button-item:focus {
                color: #ffffff !important;
                background-color: #0271bb !important;
                border-color: #0271bb !important;
                background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
                background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
                background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
                background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
                background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;
            }    


    /*date picker*/
    .date-timepicker-group .btn-primary,		
    .date-timepicker-group .btn-primary:hover,
    .date-timepicker-group .btn-primary:active,
    .date-timepicker-group .btn-primary:focus,
    .date-timepicker-group .btn-primary:active:hover,
    .date-timepicker-group .btn-primary:active:focus,
    .date-timepicker-group .btn-primary:active.focus,	
    .date-timepicker-group .btn-primary.hover,		
    .date-timepicker-group .btn-primary.active,
    .date-timepicker-group .btn-primary.focus,
    .date-timepicker-group .btn-primary.active:hover,
    .date-timepicker-group .btn-primary.active:focus,
    .date-timepicker-group .btn-primary.active.focus {
        color: #fff !important;
        background-color: #0271bb !important;
        border-color: #0271bb !important;
    }

/*btn btn-default*/

    /*previous-btn*/

    .ls-move-previous-btn,
    .ls-move-previous-btn:hover,
    .ls-move-previous-btn:active,
    .ls-move-previous-btn.active,
    .ls-move-previous-btn:focus,
    .ls-move-previous-btn.focus,
    .ls-move-previous-btn:active:hover,
    .ls-move-previous-btn.active:hover,
    .ls-move-previous-btn:active:focus,
    .ls-move-previous-btn.active:focus,
    .ls-move-previous-btn:active.focus,
    .ls-move-previous-btn.active.focus {
        color: #ffffff !important;
        background-color: #0271bb !important;
        border-color: #0271bb !important;
        background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;
    }

/*btn btn-success*/

    /*file upload popup save*/

    .file-upload-modal-footer .btn,
    .file-upload-modal-footer .btn:hover,
    .file-upload-modal-footer .btn:active,
    .file-upload-modal-footer .btn.active,
    .file-upload-modal-footer .btn:focus,
    .file-upload-modal-footer .btn.focus,
    .file-upload-modal-footer .btn:active:hover,
    .file-upload-modal-footer .btn.active:hover,
    .file-upload-modal-footer .btn:active:focus,
    .file-upload-modal-footer .btn.active:focus,
    .file-upload-modal-footer .btn:active.focus,
    .file-upload-modal-footer .btn.active.focus {
        color: #ffffff !important;
        background-color: #0271bb !important;
        border-color: #0271bb !important;
        background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;
    } 

/*--------------------end button--------------------- */    

/*--------------------start sortables----------------*/

/*unsorted*/
.sortable-choice .ls-choice.sortable-item {
    /*background: #233d7a !important;*/
    /*color: #fff!important;*/
    /*border: 0px;*/
}

/*sorted*/
.sortable-rank .ls-choice.sortable-item {
    color: #ffffff !important;
    background-color: #0271bb !important;
    border-color: #0271bb !important;
    background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
    background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
    background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
    background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;
}


/*--------------------end sortables----------------*/    


.slider-handle {
    background-color: #0271bb !important;
    background-image: linear-gradient(to bottom, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
    background-image: -o-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
    background-image: -moz-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
    background-image: -webkit-linear-gradient(top, #0271bb 0%, #0271bb 2%, #0271bb 50%, #0271bb 100%) !important;
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #0271bb), color-stop(0.02, #0271bb), color-stop(0.50, #0271bb), color-stop(0.99, #0271bb) ) !important;	
}		
    
	
/*
.navbar-item-left a,
.navbar-item-middle a.dropdown-toggle,
.navbar-item-right a {
    color: #ffffff;
}
	.navbar-item-left a:hover,
	.navbar-item-middle a.dropdown-toggle:hover,
	.navbar-item-right a:hover,
	.navbar-item-left a:focus,
	.navbar-item-middle a.dropdown-toggle:focus,
	.navbar-item-right a:focus	{
		color: #ffffff;
		text-decoration: underline;
	}
*/
/*date picker today*/  
.datepicker .today {
    background-color: #fff !important;
    background: #fff !important;
    color: #333 !important;
}
  
.datepicker .active {
    background-color: #0271bb !important;
    color: #ffffff !important;
}
.btn:hover, .btn:focus, .btn.focus {
    text-decoration: underline;
}
.radio-item input[type="radio"]:focus + label::before {
    outline: 5px auto #0271bb;
}
.text-danger {
    color: #c40017;
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
    color: #c40017;
}
/*tri: end*/

/* Schutz nur für gezielt markierte Fragen */
.protect-content {
    user-select: none; /* Kein Markieren von Text */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none; /* Kein Rechtsklick */
}

/* Beim Drucken gezielt nur protect-content ausblenden */
@media print {
    .protect-content {
        display: none;
    }
}