/* psichomics.css */

/* Avoid fixed-top navbar from obscuring content */
body { padding-top: 70px; }

/* Add a pointer to every link (even without href defined) */
a { cursor: pointer; }

/* Hide inset shadows from well panels */
.well {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* As selectize choices load quickly, avoid changes from default state */
.selectize-control.loading {
    margin-top: 0;
    text-align: left;
}

mark {
    padding: 0;
    color: #333;
    background-color: #f1c40f;
}

/* Alerts appear fixed on the top right above other elements */
.sbs-alert {
    position: fixed;
    right: 10px;
    z-index: 9;
    -webkit-filter: opacity(80%);
    filter: opacity(80%);
}

/* Style progress bar */
.progress-text { width: auto; }
.shiny-notification-close { display: none; }
#shiny-notification-panel {
    top: 50px;
    width: auto;
    min-width: 250px;
}
#shiny-notification-panel .progress-bar {
    background-image: -moz-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;

    -moz-animation: progress-bar-stripes 2s linear infinite;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

/* Loading message located in the navbar at the right */
#loadmessage {
    top: 65px;
    left: -15px;
    position: fixed;
    width: 100%;
    font-size: 100%;
    color: gray;
    z-index: 1050;
}

/* Show shadows in the outer box of loading message */
#loadmessage span {
    -webkit-box-shadow: 0 0 10px 0 white;
    -moz-box-shadow: 0 0 10px 0 white;
    box-shadow: 0 0 10px 0 white;
}

/* Properly sets the loading message when the navbar is collapsed */
@media (max-width: 768px) { #loadmessage { left: -70px; } }

/* Set the width of the navbar container to auto (better for bigger displays) */
@media (min-width: 768px) { .navbar .container { width: auto; } }

/* Align element with selectize input */
.inline_selectize { margin-top: 25px; }

/* Increase dropdown width of a specific selectize input */
#groups-sampleGroupModule-groupAttributePatients + div > .selectize-dropdown {
    width: auto !important;
}

/* Add error style to modal headers
Adapted from: http://bootsnipp.com/snippets/featured/colored-modal-headings */
.modal-content .error {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #d9534f;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

/* Add info style to modal headers
Adapted from: http://bootsnipp.com/snippets/featured/colored-modal-headings */
.modal-content .info {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #5bc0de;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

/* Add warning style to modal headers
Adapted from: http://bootsnipp.com/snippets/featured/colored-modal-headings */
.modal-content .warning {
	color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #f0ad4e;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

/* Make the active item from the selectize.js dropdown more noticeable */
.selectize-dropdown .active, .selectize-dropdown .active.create {
    background-color: #1C7AB4;
    color: white;
}

/* Make the active item from the selectize.js dropdown more noticeable */
.selectize-dropdown .active {
    background-color: #1C7AB4;
    color: white;
}

/* Make the text complete dropdown apper above everything (even modals) */
.textcomplete-dropdown { z-index: 10000 !important; }

/* Style an ordered list; original source:
https://blog.endeos.com/lleva-las-listas-html-al-siguiente-nivel-con-css */
#list {
    list-style-type: none;
    list-style-type: decimal !ie; /* IE7 hack */
    counter-reset: li-counter;
}

#list > li{
    position: relative;
    margin-bottom: 20px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#list > li:before {
    position: absolute;
    top: 4px;
    left: -0.8em;
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;

    content: counter(li-counter);
    counter-increment: li-counter;
}

/* Avoid wrapping content of DataTables */
table { white-space: nowrap; }

/* Improve padding of content inside navigation tabs and pills */
.tab-content { padding: 10px; }

/* Style Highcharts tooltip outside of Highcharts container */
.highcharts-container { overflow: visible !important; }

/* Fix font weight glitch when clicking with a menu in the navigation bar */
.navbar-fixed-top { border-radius: 1px; }

/* Improve readability of links in selected rows of DataTables */
tr.active > td > a:link {
    color: white;
    text-decoration: underline;
}
tr.active > td > a:hover { font-weight: bold; }

/* Make plus and minus sign for extra DataTable details look clickable */
.details-control { cursor: pointer; }

/* Improve style of table details */
.table-details  {
    margin-left: 15px;
    table-layout:fixed;
    color: gray;
}
.table-details td:first-child { width: 45px; }

/* Remove bottom margin from help blocks in dropdown menus */
.dropdown-menu > li > a > .help-block { margin-bottom: 0; }

/* Place groups' colour picker below input */
.groups-colourpicker div .colourpicker-panel { top: 34px; }

/* Style list item as danger for dropdown menu */
.li-danger {
  color: #fff !important;
  background-color: #d9534f !important;
  border-color: #d9534f !important;
}
.li-danger:hover,
.li-danger:active, .li-danger.active,
.show > .li-danger.dropdown-toggle {
  color: #fff !important;
  background-color: #c9302c !important;
  border-color: #ac2925 !important;
}
.li-danger:focus, .li-danger.focus {
  color: #fff !important;
  background-color: #c9302c !important;
  border-color: #761c19 !important;
}
.li-danger.disabled, .li-danger:disabled {
  background-color: #d9534f !important;
  border-color: #d9534f !important;
}

/* Disable clicking on disabled elements from a dropdown menu */
.dropdown-menu > .disabled{ cursor: not-allowed; }
.dropdown-menu > .disabled > a{ pointer-events: none; }

/* Avoid text overflowing its container */
.popover { max-width: 300px; }
.popover-content { word-wrap: break-word; }

/* Improve style of lists in popovers */
.popover-list { padding-left: 20px !important; }

/* Alternative splicing diagram style */
#selectizeEvent .selectize-dropdown {
    width: 700px !important;
    left: initial !important;
    right: 0 !important;
}
#selectizeEvent .selectize-dropdown-content { max-height: 500px !important; }

#selectizeEvent div.active text.diagram.outside { fill: white !important; }
#selectizeEvent div.active path.diagram { stroke: white !important; }
#selectizeEvent div.active rect.diagram { stroke: white !important; }

#selectizeEvent .selectize-control::before {
    content: '\f863';
    font-weight: 900;
    font-family: "Font Awesome 5 Free";

    z-index: 2;
    position: absolute;
    display: block;
    top: 45%;
    right: 34px;
    margin: -8px 0 0 0;
    opacity: 0;
}

#selectizeEvent .selectize-control.loading::before {
  -o-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;

  -moz-animation: fa-spin 2s infinite linear;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;

  opacity: 0.4;
}

/* Groups */
.editGroups { color: #9A9A9A; }
.editGroups .active { color: white; }
