/* 
    Created on : 03-mar-2017, 9:30:11
    Author     : j.llaurado
*/
:root {
    --font-color: #424242;
    --form-bg-color: #BBB;
    --form-sel-bg-color: #b8b333;
    --bg-color: #fff;
    --alpha1-bg-color: rgba(0,0,0,0.1);
}

[data-theme="light"] {
    --font-color: #424242;
    --form-bg-color: #BBB;
    --form-sel-bg-color: #b8b333;
    --bg-color: #fff;
    --alpha1-bg-color: rgba(0,0,0,0.1);
}

[data-theme="dark"] {
    --font-color: #e1e1ff;
    --form-bg-color: #444;
    --form-sel-bg-color: #807c18;
    --bg-color: #161625;
    --alpha1-bg-color: rgba(255,255,255,0.1);
}

body {
    background-color: var(--bg-color);
    color: var(--font-color);
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

.table {
    color: var(--font-color);
}

.form-control {
    color: var(--font-color);
    background-color: var(--form-bg-color);
}
.form-control:focus {
    color: var(--font-color);
    background-color: var(--form-sel-bg-color);
}

/*

    Menu configuration and sticky top

*/
.nav-title {
    font-family: "Playfair Display";
    text-align: center;
}

.top-container {
}

.header {
  width: 100%;
  padding-bottom: 10px;
  background-color: rgba(10,10,10,0.7);
  color: var(--font-color);
  z-index: 1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
}

.sticky + .content {
  padding-top: 102px;
}

section.container-fluid {
    font-family: "Playfair Display";
    padding: 0px;
    /*font-size: 35px;*/
}

div.card {
    border: solid 1px;
    border-color: var(--form-bg-color);
}
div.card-footer {
    background-color: var(--alpha1-bg-color);
}

/*
    Blockquote configuration
*/
blockquote {
    padding: 1rem 1rem 1rem 1rem;
    position: relative;
    background-color: var(--alpha1-bg-color);
    margin-left: 2rem;
    margin-right: 2rem;
}

blockquote p {
    font-family: "Utopia-italic";
    font-size: 1rem;
    font-weight: 200;
    text-align: center;    
    border-radius: 25px;
}

blockquote:before {
  position: absolute;
  font-family: 'Noto Sans JP';
  top: 0;
  margin-top: -3rem;
  content:'“';
  font-size: 15rem;
  line-height: 15rem;
  color: var(--alpha1-bg-color);
}

.card {
    background-color: var(--bg-color);
}

.background {
    background-color: var(--bg-color);
    color: var(--font-color);
    border-color: var(--alpha1-bg-color);
}
/*
    Silent links
 */
a.blacklink:link {
  color: var(--font-color);
}

/* visited link */
a.blacklink:visited {
  color: var(--font-color);
}

/* mouse over link */
a.blacklink:hover {
  color: var(--font-color);
}

/* selected link */
a.blacklink:active {
  color: var(--font-color);
}

/*
    Silent links
 */
a.whitelink:link {
  color: white;
}

/* visited link */
a.whitelink:visited {
  color: white;
}

/* mouse over link */
a.whitelink:hover {
  color: white;
}

/* selected link */
a.whitelink:active {
  color: white;
}

/*

    Old stuff 

*/
div.f1n-modal {
    width: 80% !important;
    max-width: 80% !important;
}

.blue {
    border: 1px solid #ddd;
    padding: 5px;
    line-height: 1.42857143;
    vertical-align: middle;
    background-color: #5bc0de !important;
    color: #fff !important;
    font-weight: bold;
}

.lightblue {
    border: 1px solid #ddd;
    padding: 5px;
    line-height: 1.42857143;
    vertical-align: middle;
    background-color: #8bd1f9 !important;
    color: #fff !important;
    font-weight: bold;
}

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

.blue-right {
    border: 1px solid #ddd;
    padding: 5px;
    line-height: 1.42857143;
    vertical-align: middle;
    background-color: #5bc0de !important;
    color: #fff !important;
    font-weight: bold;
    text-align: right;
}

table.f1n_p_l {
    font-size: 12px;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    border: 1px solid #dddddd;
    line-height: 1.428571429;
    vertical-align: middle;
}

.f1n_p_l tr {
    vertical-align: baseline;
    height: 0.5rem !important;
}
.f1n_p_l td {
    vertical-align: baseline !important;
    padding: 2px 4px 2px 4px !important;
}

.f1n_pre_amount {
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    width: 1%;
    white-space: nowrap;
    vertical-align: baseline !important;
    display: table-cell;
    border-spacing: 0;
    border-collapse: separate;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.f1n_amount {
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-right: 0;
    cursor: not-allowed;
    background-color: #eeeeee;
    padding: 4px 8px;
    font-size: 10px;
    color: #555;
    vertical-align: baseline;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    font-family: inherit;
    box-sizing: border-box;
    display: table-cell;
    text-align: right;
    width: 70px;
}

/* To solve problem with tooltip of jQuery SparkLine */
.jqstooltip{
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

/* Card CSS classes */
div.f1n-cardflex {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 6px 4px 4px 2px;
    padding-left: 5px;
    padding-right: 5px;    
}

div.f1n-card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 6px 4px 4px 2px;
    /*max-width: 13.5rem; 
    min-height:16rem; 
    max-height: 16rem;*/
    /*padding: 8px 5px 4px 5px;*/
    padding-left: 5px;
    padding-right: 5px;
    min-height: 180px;
}

div.f1n-card-body {
    padding: 6px;
}

div.f1n-carddouble {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 6px 4px 4px 2px;
    width: 27.5rem; 
    max-width: 27.5rem;
    min-height:13rem; 
/*    max-height: 16rem;*/
    background-color: #fff;
}

a.black {
    color: #000;
}
a.silent:hover {
    text-decoration: none;
}

/* Add some padding inside the card container */
div.container {
    padding: 1px 1px;
    max-width: 95%;
}

div.cut {
    overflow: hidden;
    white-space: nowrap;
}

/* On mouse-over, add a deeper shadow */
div.f1n-card {
    box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
    min-height: 13rem;
/*    height: 12rem !important;*/
}

div.f1n-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* On mouse-over, add a deeper shadow */
div.f1n-cardmenu {
/*    height: 8rem !important;*/
    min-height: 13rem;
    width: 12rem !important;
    margin: 0.25rem;
    margin-right: 0.25rem !important;
}

div.f1n-cardhalf-container {
    color: rgb(51, 51, 51);
    cursor: pointer;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    -moz-text-size-adjust: none;
    -moz-user-select: none;
}

div.f1n-cardhalf {
    color: rgb(51, 51, 51); 
    margin-right: 4px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    width: 50%;
    -moz-text-size-adjust: none;
}

/* DIV Bar - value / novalue */
div.bar_content {
    height: 12px;
    line-height: 12px;
    margin: 1px 0px 3px 0px;
    overflow: hidden;
    white-space: nowrap;
    max-height: 16px;
    min-height: 12px;
}

div.bar_content.mini {
    font-size: 0.75rem;
}

div.bar {
    font-size: 0.75rem;
    height: 4px;
    line-height: 12px;
    margin: 1px 0px 3px 0px;
    outline-color: rgb(51, 51, 51);
    outline-style: none;
    outline-width: 0px;
    overflow: hidden;
    white-space: nowrap;
    -moz-text-size-adjust: none;
}

div.bar.novalue {
    background-color: #d5dadc;
    box-sizing: border-box;
    float: left;
    height: 8px;
    line-height: 14.4px;
    max-height: 8px;
    min-height: 4px;
    top: 50%;
    transform: matrix(1, 0, 0, 1, 0, -4);
    white-space: nowrap;
    -moz-text-size-adjust: none;
}

div.bar.value {
    background-color: #2b7d2b;
    cursor: pointer;
    float: left;
    height: 8px;
    line-height: 14.4px;
    max-height: 8px;
    min-height: 4px;
    top: 50%;
    transform: matrix(1, 0, 0, 1, 0, -4);
    white-space: nowrap;
    -moz-text-size-adjust: none;
}

.white {
    color: #888;
    font-weight: bold;
}
.black {
    color: #888;
    font-weight: bold;
}
.black:hover {
    color: #000;
    font-weight: bold;
}
.white:hover {
    color: #fff;
    font-weight: bold;
}

.green {
    color: #2b7d2b;
}

.red {
    color: #ac2925;
}

.darkgrey {
    color: #555;
}

.paleblue {
    color: #d6dce4;
}

.paleblue2 {
    color: #dee1e3;
}

.bg-green {
    background-color: #2b7d2b;
}

.bg-red {
    background-color: #ac2925;
}

.bg-darkgrey {
    background-color: #555;
}

.bg-paleblue {
    background-color: #d6dce4;
}

.bg-paleblue2 {
    background-color: #dee1e3;
}

/* 

Bootstrap extensions

*/
.container-fluid-full {
    height: 100%;
    overflow: hidden;
    position: relative;
}


.full-screen-background-image {
    /*background: rgba(0, 0, 0, 0) url("../img/Fulles_grogues_riu_blau.jpg") no-repeat fixed center center / cover ;*/
    filter: blur(5px);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}