.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}
.flow-chart {
    max-height: 400px;
}
.dashboard-info-frame {
    text-align: center;

    padding: 20px;
}

.dashboard-info-title {
    font-size: larger;
    font-weight: bold;
}

.main-config-cogs {
    font-size: xx-large;
    padding-right: 15px;
    margin-top: 5px;
}

.user-dashboard-companies-tab {
    text-align: center;
}

.dashboard-add-icon {
    font-size: large;
    float: right;
}

.demand-tag {
    display: inline-block;
    margin-bottom: 5px;
    font-size: medium;
}
{
    transition: all 0.6s;
}

html {
    height: 100%;
}

#main{
    font-family: 'Lato', sans-serif;
    color: #888;
    margin: 0;

    display: table;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.fof{
    display: table-cell;
    vertical-align: middle;
}

.fof h1{
    font-size: 50px;
    display: inline-block;
    padding-right: 12px;
    margin-bottom: -10px;
    animation: type .5s alternate infinite;
}

@keyframes type{
    from{box-shadow: inset -3px 0 0 #888;}
    to{box-shadow: inset -3px 0 0 transparent;}
}
.timeline {
    background-color: #3498db;

}

.timeline-day {
    border: 1px solid #f0f2fb;
    background-color: #3498db;
    min-width: 45px;
    display: inline-block;
    text-align: center;
    color: white;
}

.timeline-legend {
    min-width: 15px;
    min-height: 15px;
    display: inline-block;
    margin-right: 5px;
}
.incomes-div {
    min-height: 40px;
    background-color: lightblue;
    padding: 4px;
}

.outcomes-div {
    min-height: 40px;
    background-color: #FFCDD2;
    padding: 4px;
}

.finances-consolidation-value {
    margin-top: 5px;
    font-weight: bold;

}

.finances-consolidation-row {
    padding: 3px;
}

.balance-div {
    min-height: 40px;
    background-color: #EEFF41;
    padding: 4px;
}
.help-block {
    margin-bottom: 0;

    font-size: 1.2rem;
    text-align: left;
}

.has-error {
    border: 2px solid lighten(#EE1C3A, 10%) !important;
    box-shadow: none;
}

.header-link {
    text-align: right;
    text-transform: uppercase;
}

.bottom-spaced-component { margin-bottom: 8px; }

.project-deadline-info {
    font-size: large;
    margin-bottom: 17px;
}

.label-hint { color: #768899; }

.data-red {
    color: #EE1C3A;
}

.data-yellow {
    color: #EEE1B7;
}

.grouped-button {
    margin-left: 2px;
}

.flex-container {
    display: flex;
}

.input-field {
    flex: 1;
}

.radio-label {
    margin-left: 5px;
    margin-right: 20px;
    font-weight: normal;
}

.radio-button-quiz {
    margin-right: 100px;
}

.check-box-group-label {
    padding-right: 10px;
}

.no-alert {
    padding: 10px;
    background-color: #8dfae3;
    border: 2px solid darkgreen;
}

.yellow-alert {
    padding: 10px;
    background-color: #EEE1B7;
    border: 2px solid darkorange;
}

.red-alert {
    padding: 10px;
    background-color: #f0cbcf;
    border: 2px solid darkred;
}

.standard-form {
    background-color: #f3f6fc;
    margin-top: 10px;
    padding: 10px;
}

label.required:after{content: " *"}

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit;
    font-weight: bolder;
}
.header {
    padding: 10px;
    background-color: #26182d;
    height: 100%;
}

.header-nav {
    font-size: large;
    height: 100%;

    padding: 15px;
    margin-left: -30px;
}

.top-nav-bar-text {
    color: white;
}

.top-nav-bar-item {
    color: white;
    text-decoration: none;
    vertical-align: bottom;
}

/* Style the list */
ul.breadcrumb {
    list-style: none;
    background-color: transparent;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: large;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    color: black;
    content: "\2192";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    text-decoration: underline;
}

.page-body {
    position: relative;
    margin-bottom: 50px;
}
.help-frame {
    padding: 10px;
    border: 3px solid #CCC;
    margin-left: 20%;
    margin-right: 20%;
}

.help-title {
    font-size: large;
    text-align: center;
    font-weight: bold;
}
.red-project {
    background-color: #f0cbcf;
}

.circle-red {
    display: block;
    background: red;
    border: 1px solid black;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0;
}

.circle-green {
    display: block;
    background: green;
    border: 1px solid black;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0;
}

.circle-yellow {
    display: block;
    background: yellow;
    border: 1px solid black;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0;
}

.circle-transparent {
    display: block;
    background: transparent;
    border: 1px solid black;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    margin: 0;
}

.center {
    text-align: center;
}

.div-parent-check-group {
    border: 1px solid;
    background-color: rgba(11, 110, 154, 0.57);
}

.no-data {
    font-size: large;
    font-style: italic;
    text-align: center;
    width: 100%;
}

.header-summary {
    padding: 5px;
}

.same-line-sync-symbol {
    padding-left: 5px;
}

#popup {
    height: 50px;
    width: 200px;
    text-align: center;
    vertical-align:middle;
    background-color: cornflowerblue;
    color: white;
    display: none;
    padding-top: 8px;
    position: absolute;
}
.tab {
    overflow: hidden;
    /*border: 1px solid #ccc;*/
    /*background-color: #f1f1f1;*/
    padding-bottom: 15px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: #aaa;
    text-align: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    padding: 6px 12px;
    color: white;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #888;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
}

.topnav-right {
    float: right;
    margin-right: 10px;
}

.stats-tab {
    width: 100%;
}
* {
    box-sizing: border-box;
}

/* Create three columns of equal width */
.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

/* Style the list */
.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

/* List items */
.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

/* Grey list item */
.price .grey {
    background-color: #eee;
    font-size: 20px;
}

/* The "Sign Up" button */
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}
.product-branch {
    background-color: #F9FCB3;
    padding: 20px;
}

.demand-branch {
    background-color: #F2D7B1;
    padding: 20px;
}

.product-tree-connector {
    font-size: x-large;
    text-align: center;
}

.tf-nc {
    padding: 40px;
}

.tf-nc-title {
    margin-top: 15px;
}

.tf-custom .tf-nc {
    background-color: #F9FCB3;
    padding: 10px;
    min-width: 270px;
}

.tf-header {
    font-size: x-small;
}

.tf-footer {
    font-size: x-small;
    margin-bottom: 0;
}

.card-header {
    margin-top: -10px;
    margin-bottom: 30px;
    font-size: smaller;
    padding: 1px;
}

.card-title {
    text-align: center;
}

.card-subtitle {
    font-size: smaller;
    font-style: italic;
    margin-bottom: 20px;
}

.card-progress-bar {
    margin-bottom: -19px;
}

.queue-progress {
    width: 100%;
    background-color: lightgrey;
    border: 1px solid;
}

.queue-bar {
    width: 0;
    height: 20px;
    background-color: lightcoral;
    text-align: center;
    position: relative;
    display: table;
    vertical-align: middle;
    font-weight: bold;
}

.general-progress {
    width: 100%;
    background-color: lightblue;
    border: 1px solid;
}

.general-bar {
    width: 0;
    height: 20px;
    background-color: lightgreen;
    text-align: center;
    position: relative;
    display: table;
    vertical-align: middle;
    font-weight: bold;
}

.show-main-info {
    font-size: x-large;
    margin-bottom: 3px;
}

.show-main-info-buttons {
    font-size: large;
}

.show-secondary-info {
    font-size: medium;
    margin-bottom: 20px;
}

.show-important-detail {
    font-size: larger;
    margin-bottom: 5px;
    font-style: italic;
}

.stamp {
    padding: 10px;
    background-color: lightskyblue;
    border: thin solid;
}

.green-stamp {
    background-color: #a0f0e0;
    padding: 10px;
    border: thin solid;
}

.stamp-title {
    font-weight: bold;
    font-size: small;
    font-style: italic;
}

.stamp-content {
    font-size: large;
    min-height: 25px;
}

.table-index {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.table-detail {
    font-size: smaller;
}

.upstream {
    font-style: italic;
}

.discarded {
    font-style: italic;
}

.top-button {
    width: 100%;
}

.detailed {
    vertical-align: super;
    font-size: smaller;
    color: lightgray;
    margin-left: 5px;
    font-style: italic;
}

.countdown {
    font-weight: bold;
}

.loader {
    position: fixed;
    z-index: 999;
    margin: auto;
    top: 200px;
    left: 0;
    bottom: 0;
    right: 0;

    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 600ms linear infinite;
}

.summary-card-frame {
    padding: 0 2px 0 2px;
}

.summary-card-content {
    padding: 3px 0 0 0;
    background-color: #DADADA;
    border-bottom: 3px solid red;
    text-align: center;
}

.summary-card-title {
    font-size: smaller;
    font-weight: bold;
}

.summary-card-value {
    font-size: small;
}

.btn-active {
    background-color: #DADADA;
}

.user-avatar {
    border-radius: 50%;
}

.user-container {
    margin: 50px 150px 20px 150px;
}

.user-info {
    font-size: large;
    font-style: italic;
}

.center-text {
    text-align: center;
}

.x-large-font {
    font-size: x-large;
}

.larger-font {
    font-size: larger;
}

.small-font {
    font-size: small;
}

.demand-score {
    font-size: xx-large;
    text-align: center;
}

.div-group-title {
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: large;
    font-weight: bold;
    text-align: center;
    background-color: #F0F0EF;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.col-table-details {
    font-size: smaller;
    font-style: italic;
}

.equal-heights {
    display: flex;
    flex-wrap: wrap;
}

.table-filter {
    font-size: smaller;
}

.relative-row {
    position: relative;
}

.bottom-button {
    position: absolute;
    bottom: 0;
}
.bottom-right-button {
    position: absolute;
    right: 0;
    bottom: 0;
}

.row-equal {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.truncated-table-column {
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.cell-small {
    max-width: 130px;
}
/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
    margin-bottom: 8px;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.visible {
    display: block;
}

.user-avatar {
    border-radius: 50%;
}

.mb-5 {
    margin-bottom: 50px;
}

.mb-3 {
    margin-bottom: 30px;
}