/******************
    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
*/
#surveys-list-jumbotron {text-align:center; background: #2c78bb;color: white;}
#surveys-list-jumbotron .h2 {font-weight:700; text-align:center;}
.jumbotron p {margin-bottom: 0.5em;font-size: 1.2rem;}
.survey-list-heading .h3 {text-align:center;}
.surveys-list-container {margin-bottom: 50px;}
.survey-welcome {font-size: 1.2em;margin: 2em;text-align: center;}
.lead {margin: 3rem auto 3rem auto;font-size: 1em !important;}

.question-text p, .ls-answer p {margin: 0 0 0.7rem 0;line-height: 1.5em;}

/* для цветового теста, когда цвета заданы картинками */
.imageselect-list {display: flex;flex-direction: row;justify-content: space-around;flex-basis: 360px;flex-wrap: wrap;}
.imageselect-list li.imageselect-listitem .imageselect-container .imageselect-label {border: transparent none;}
.imageselect-list li.imageselect-listitem input[type="radio"]:indeterminate + label::after {display: none;}
.sortable-rank .ls-choice {background:#e0e0e0;}
.radio-label .color-box {display: flex;flex-direction: row;}
.question-text h2 {font-weight:800; text-align:center;}
.color-box {min-width:600px;}
.question-text .color-box {display:inline;} /* в ответах на тест вместо цветной плашки название цвета */
.color-div .question-valid-container {display:none;} /* прячу подсказку в вопросах на выбор цвета */

.pf-test .answer-container {max-width: 500px;} /* когда ПФ-тест показываем как множественный выбор в 2 колонки */
/* для ПФ-теста с перетаскиванием - вариант вопроса Card */
.pf-card .items-end-wrapper, .pf-card .items-start {max-width: 48%;}
.pf-card .card-sort-outer-wrapper {height: 600px;}
.pf-card .items-start {display: flex;flex-wrap: wrap;flex-direction: column;align-content: flex-start;height: 100%;width: 100%;}
.pf-card .card {width: 47%;border:0;background-color:white;}
#golomshtok th, td {padding: 20px;}
/* socionic font - расширенная версия файла (не только символы аспектов, но и другие) */
@font-face {
    font-family: 'socionic';
    src: url('../fonts/socionic-webfont.eot');
    src: url('../fonts/socionic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/socionic-webfont.woff2') format('woff2'),
         url('../fonts/socionic-webfont.woff') format('woff'),
         url('../fonts/socionic-webfont.ttf') format('truetype'),
         url('../fonts/socionicsweb-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.soc{font-family: 'socionic';font-size:105%;}
details {background:#f5f5f5;}
summary {cursor: pointer;margin:10px;background:#dff0d8;}
summary::-webkit-details-marker {display: none;}
:focus {outline: none;}
.h4 {font-size: 1.2rem;}
/* для подсказки в модальном окне - используется в анкете Соломина для описания типов профессий */
.und a {text-decoration: underline;font-weight: 700;}
.modal {display: none;}
.modal:target {display: flex;}
.modal {text-align: left;background-filter:blur(2px);position: fixed;top: 0;left: 0; width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);padding: 2rem;}
.modal:target {justify-content: space-around;align-items: center;}
.modal__overlay {position: absolute;height: 100%;width: 100%;left: 0;top: 0;cursor: default;}
.modal__content {min-width: 480px;position: relative;background-color: #f5f5f5;padding: 2rem;}
.modal__close {color: initial;text-decoration: none;position: absolute;top: 0;right: 0;padding: 0 0.5rem;display: inline-block;}