/**
*
* Styling for all elements on the page
* like Buttons, Dropdowns etc.
*
**/
/**
*
* Defines all colors that are used in MoPats less sheets
*
**/
/**
* This file contains color definition based on the material
* design specification for color palettes
**/
/* Grayscales (from Bootstrap) */
/**
*
* Sizes for the mopat web application
*
**/
/**
*
* Some variable values that will be repeated
* for MoPats views
* This file can be used as a central hub to change
* many settings at once without touching the less files
*
**/
.dropdown-menu {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/*
* Bootstraps "d-flex" uses the !important flag so it cannot be removed by display:none;
* Use this class, if elements should be dynamically shown via JS
*/
.removableFlex {
display: flex;
}
.bi-large {
font-size: 150%;
font-weight: 700;
}
.bi-xlarge {
font-size: 200%;
font-weight: 900;
}
.bi-action:hover {
cursor: grab;
}
.note-editor,
.file-preview,
.form-control,
.form-select,
form .card,
.alert,
.page-link {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.dropdown-item {
border: 0.3em solid #ffffff;
font-size: 1.1em;
}
.dropdown-item:hover {
border-left: 0.3em solid #377cbf;
background-color: #eeeeee;
border-radius: 0;
transition: 0.25s ease-in-out;
}
.dropdown-item.active {
color: #3e3e3b;
border-left: 0.3em solid #254c7e !important;
background-color: white !important;
}
#languageDropdown .dropdown-toggle {
color: #62778c;
text-decoration: none;
}
.form-group {
margin-bottom: 15px;
/* restore old form layout for bootstrap 5 */
/* Style the chevron signs in every form group. Used for collapsable elements */
}
.form-group .required:after {
content: "*";
color: #ff0000;
}
.form-group .bi-chevron-up {
float: right;
color: #3e3e3b;
margin-right: 11px;
}
.form-group .bi-chevron-down {
float: right;
color: #3e3e3b;
margin-right: 11px;
margin-right: 0;
}
.btn {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 0.25s ease-in-out;
border-radius: 5px;
}
.btn:disabled {
background-color: #e0e0e0;
color: #757575;
border-color: #757575;
}
.btn:hover {
transition: 0.25s ease-in-out;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn-primary {
background-color: #254c7e;
border-color: #254c7e;
color: #ffffff;
border-radius: 5px;
transition: 0.25s ease-in-out;
}
.btn-primary:hover {
background-color: #377cbf;
border-color: #377cbf;
transition: 0.25s ease-in-out;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn-outline-primary {
border-color: #254c7e;
color: #254c7e;
border-radius: 5px;
transition: 0.25s ease-in-out;
}
.btn-outline-primary:hover {
border-color: #377cbf;
color: #377cbf;
transition: 0.25s ease-in-out;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
background-color: #254c7e;
border-color: #254c7e;
color: #ffffff;
transition: 0.25s ease-in-out;
}
.btn-secondary {
background-color: #333333;
border-color: #333333;
color: #ffffff;
border-radius: 5px;
transition: 0.25s ease-in-out;
}
.btn-secondary:hover {
background-color: #777777;
border-color: #777777;
transition: 0.25s ease-in-out;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn-primary-list {
background-color: #254c7e;
border-color: #254c7e;
color: #ffffff;
border-radius: 5px;
transition: 0.25s ease-in-out;
background-color: #ffffff;
border-color: #dee2e6;
color: #62778c;
}
.btn-primary-list:hover {
background-color: #377cbf;
border-color: #377cbf;
transition: 0.25s ease-in-out;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn-primary-list:hover {
background-color: #f8f9fa;
border-color: #dee2e6;
color: #254c7e;
transition: 0.25s ease-in-out;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn-primary-list i {
font-size: 1.2rem;
}
.bi-edit-question {
display: inline-block;
width: 2em;
height: 1em;
background-color: currentColor;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.bi-lab-icon {
display: inline-block;
position: relative;
top: 10%;
width: 2em;
height: 2em;
background-color: currentColor;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.bi-list-icon {
display: inline-block;
width: 2em;
height: 1em;
}
.bi-green {
color: #264409 !important;
}
.btn-red {
background-color: #fbe3e4 !important;
border-color: #fbc2c4 !important;
}
.btn-red i {
color: #8a1f11;
}
.btn-green {
background-color: #e6efc2 !important;
border-color: #c6d880 !important;
}
.btn-green i {
color: #264409;
}
.btn-yellow {
background-color: #fcf8e3 !important;
border-color: #f5e79e !important;
}
.btn-yellow i {
color: #eb9316;
}
.btn-crossed {
pointer-events: none;
background-color: #efefef;
}
.btn-crossed i {
opacity: 0.3;
}
input[type=checkbox],
input[type=radio] {
accent-color: #377cbf;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
color: #3e3e3b;
text-decoration: none;
}
.form-switch .form-check-input {
width: 60px !important;
height: 25px !important;
}
.form-check-input:checked {
background-color: #377cbf;
border-color: #377cbf;
}
.form-checkbox label {
display: flex;
align-items: center;
cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0 10px 0 0;
cursor: pointer;
}
/* Style the links which collapse a area. I.e. question/edit */
a[data-bs-toggle='collapse'] {
text-decoration: none !important;
color: #3e3e3b !important;
}
a[data-bs-toggle='collapse']:hover,
a[data-bs-toggle='collapse'] label:hover {
cursor: pointer;
}
/* The container for the two drag&drop lists */
.doubleList {
margin-top: 10px;
margin-bottom: 10px;
}
/* The icons between the two drag&drop lists */
.doubleListIcon {
padding-top: 55px;
}
.questionnaire-version-group-header-spacer {
margin-top: 0.75rem;
}
.questionnaire-version-group-footer-spacer {
margin-bottom: 0.75rem;
}
.chevron-icon-down,
.chevron-icon-up {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
opacity: 0;
pointer-events: none;
}
.chevron-icon-down.show,
.chevron-icon-up.show {
opacity: 1;
pointer-events: auto;
}
/* Give this elements a fixed hight and make them scrollable */
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.questionnaireName {
width: 200px;
text-align: left;
vertical-align: top;
}
.questionnaireDescription {
text-align: left;
}
.position {
text-align: left;
vertical-align: top;
}
.templateTypes {
text-align: left;
vertical-align: top;
}
.custom-tooltip {
max-width: 400px;
}
@media only screen and (min-width: 1200px) {
.upload-info-box {
min-width: 1000px;
max-width: 1000px;
}
}
@media only screen and (max-width: 1200px) {
#uploadForm {
width: 100%;
}
}
@media only screen and (min-width: 1400px) {
#errorAccordion {
max-width: 1000px;
}
}
span.success {
padding: 2px;
text-align: center;
background-color: #e6efc2;
border: 2px solid #c6d880;
color: #264409;
}
span.failure {
padding: 2px;
text-align: center;
background-color: #fbe3e4;
border: 2px solid #fbc2c4;
color: #8a1f11;
}
span.conflict {
padding: 2px;
text-align: center;
background-color: #fcf8e3;
border: 2px solid #f5e79e;
color: #eb9316;
}
.score-panel span,
.score-panel .bi {
font-size: 2rem;
}
.score-panel .form-control {
margin-bottom: 10px;
margin-top: 10px;
}
.score-element {
max-width: 100% !important;
text-overflow: ellipsis;
}
.exportSuccess {
background-color: #c8e6c9;
color: #1b5e20;
}
.exportConflict {
background-color: #fff9c4;
color: #f57f17;
}
.exportFailed {
background-color: #ffcdd2;
color: #b71c1c;
}
.shape {
fill: #009ee0ff;
opacity: 0.3;
}
.shape:hover {
fill: #009ee0ff;
cursor: pointer;
opacity: 0.6;
}
.shape-selected {
fill: #009ee0ff;
opacity: 0.6;
}
.shape-selected:hover {
fill: #009ee0ff;
cursor: pointer;
opacity: 0.3;
}
.drag-n-drop-header-item {
padding-top: 5px;
}
.list-group-item.active {
background-color: #254c7e !important;
}
.groupType {
font-size: 1.4rem;
}
.bi-lg {
font-size: 1.5rem;
}
legend {
border-bottom: 1px solid #e5e5e5;
}
.boxShadowMaterialSm {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}
.boxShadowMaterialMd {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
}
.boxShadowMaterialLg {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
}
.boxShadowMaterialXl {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
}
.boxShadowMaterialXxl {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22) !important;
}
@media only screen and (max-width: 768px) {
#loadingSpinner {
width: 150px;
height: 150px;
}
}
@media only screen and (min-width: 768px) {
#loadingSpinner {
width: 250px;
height: 250px;
}
}