/** 
 * @fileoverview   Ecco2 Utilites.
 * @author         Nestor Peña Lopez <nestor.penalopez@ecco2.ch>
 *
 * Table of Contents
 * 01. Disabled card
 * 02. Faded text
 * 03. Font sizes
 * 04. Legend
 * 04.01. Dataset colors
 * 04.02. Symbols
 * 05. Margins, Paddings and Heights
 * 06. Show on hover
 * 07. Status colors
 * 08. Various
 *
 */


/** 01. Disabled card */

.disabled-card {
    pointer-events: none;
}


/** 02. Faded text */

.faded-text {
    color: #8f8f8f;
    opacity: .6;
    height: auto !important;
}


/** 03. Font sizes */

.building-font {
    font-family: Verdana, sans-serif;
    font-size: .8rem;
    font-weight: 400;
    color: #6c757d;
    font-style: italic;
}

.very-small-font {
    font-size: 9px !important;
}

.small-font {
    font-size: 10px !important;
}

.popup-font {
    font-size: 12px !important;
}

.regular-font {
    font-size: 13px !important;
}

.normal-font {
    font-size: 18px !important;
}

.medium-font {
    font-size: 20px !important;
}

.large-font {
    font-size: 32px !important;
}

.big-font {
    font-size: xx-large !important;
}

.very-big-font {
    font-size: 60px !important;
}


/** 04. Legend */

.legend-point {
    height: 15px;
    width: 15px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 50%;
    opacity: 0.4;
    margin-right: 5px;
}

.legend-text {
    font-size: 11px !important;
    font-style: italic;
}


/** 04.01 Datasets color */

.district-heating {
    background-color: #FF8373;
}

.electricity {
    background-color: #FFDA83;
}

.fuel-oil {
    background-color: #A3A0FB;
}

.gas {
    background-color: #40DBCE;
}

.heating-limit {
    background-color: Crimson;
}

.permanent-load {
    background-color: rgba(128, 128, 128, 0.5);
}

.with-optimization {
    background-color: rgb(146, 210, 203);
}

.without-optimization {
    background-color: GoldenRod;
}


/** 04.02. Symbols */

.dash {
    height: 5px;
    width: 10px;
    vertical-align: middle;
    display: inline-block;
    opacity: 0.4;
    margin-right: 5px;
}

.rectangle {
    height: 15px;
    width: 15px;
    vertical-align: middle;
    display: inline-block;
    opacity: 0.4;
    margin-right: 5px;
}


/** 05. Margins, Paddings and Heights */

.min-height-400 {
    min-height: 400px;
}

.margin-bottom-100 {
    margin-bottom: 100px
}

.max-height-120 {
    max-height: 120px;
}

.padding-8px {
    margin: 0px 0px 8px;
}


/** 06. Show on hover */

.hoverWrapper:hover .actionButtons {
    display: block;
}

.hoverWrapper .actionButtons {
    display: none;
    position: absolute;
}


/** 07. Status colors */

.status-danger {
    color: #FF8373 !important;
}

.status-warning {
    color: #FFDA83 !important;
}

.status-ok {
    color: #40DBCE !important;
}


/** 08. Various */

.data-table-rows-check {
    pointer-events: none;
}

.device-list-button {
    font-size: 12px;
    width: 25px;
    height: 25px;
    line-height: 25px;
}

.icon-cards-row .card-text {
    height: auto !important;
}

.list-item-heading {
    font-size: 0.85rem
}

.reference-line {
    background-color: #722F37;
    opacity: 1 !important;
}

.spawn {
    background: #fff;
    cursor: pointer;
    padding: 5px 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    width: 100%;
}

.transparent-card {
    background-color: transparent;
    box-shadow: none;
}

.reason-count {
    color: #145388;
    font-size: 10px;
    border: 1px solid #145388;
    border-radius: 16px;
    padding: 3px;
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 2px;
    position: relative;
    left: -6px;
    text-align: center;
    font-weight: 700;
}

.first-element {
    background-color: #e1e1e1;
    color: #0369AA;
}

.mapping-icon {
    font-size: 0.8rem;
    color: #2F4360;
}

.input-enter {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 300px;
}

.input-enter::before {
    position: absolute;
    content: " \21B5";
    top: 8px;
    right: 10px;
    font-size: 18px;
}