/*@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700');*/

*{
  /* Fonts*/
  --work: 'Work Sans', sans-serif;
  
  /* Colors*/
  --h2o: #7bd4cc;
  --honey: #bea42e;
  --army: #7b895b;
  --green: #037367;
  --sangria: #00281f;
  --white: #fff;
  /* Transition */
 --transition-short: all .5s ease-in-out;
  
  /* padding */
  --padding-standard:1rem;
}

html,body{ min-height:100%; height:100%;}
button{ cursor:pointer; }

body{ font-family: var(--work); /* IE10+ */ 
background-image: -ms-linear-gradient(bottom, #7BD4CC 0%, #037367 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #7BD4CC 0%, #037367 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #7BD4CC 0%, #037367 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #7BD4CC), color-stop(100, #037367));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #7BD4CC 0%, #037367 100%);

/* W3C Markup */ 
background-image: linear-gradient(to top, #7BD4CC 0%, #037367 100%); display: flex; align-items: center; align-content: center;
}
h2, p, input, h1, h3{ font-family:  var(--work); }

.left_panel{ padding-left:0px; padding-right:0px;}
.left_panel header{ background-color: var(--h2o); padding:var(--padding-standard); }

#chart_datas{ position: relative; }
#chartpanel{ background-color:#fafafa; max-width:50rem; max-width: 50rem; height: auto; border-radius:7px;}


.hideshow{ color: var(--white); font-size: .8rem;}
.inputHide{ oapcity:1;  -webkit-transition: var(--transition-short);  -moz-transition: var(--transition-short);  -o-transition: var(--transition-short); transition: var(--transition-short);}
.is-collapsed{ opacity:0;}

.addRowBtn{width:auto; position: absolute; left: 2rem;     font-size: 2rem;    background-color: var(--honey);    padding: .1rem .9rem; border-radius: 2rem; margin-top: -4rem; z-index: 999999999999999; -webkit-box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.45);
box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.45); cursor: pointer; opacity:1; -webkit-transition: var(--transition-short);  -moz-transition: var(--transition-short);  -o-transition: var(--transition-short); transition: var(--transition-short);}
.addRowBtn:hover{ opacity:.8; }
.addRowBtn .fa{color:var(--white); margin-top: 7px; }

.single-cel{overflow: hidden; display: block; position: relative;}
.edit_mode{ cursor:pointer; color:var(--h20); position:absolute; right:1.3rem; -webkit-transition: var(--transition-short);  -moz-transition: var(--transition-short);  -o-transition: var(--transition-short); transition: var(--transition-short); margin-right:2%}
.edit_mode:hover{ color:#666;}
.edit_panel{padding-left:1rem !important; padding-right:1rem; padding-top:.5rem !important;}
.edit_panel button{color:var(--sangria);}
.edit_panel button:hover{ opacity:.5;}

.left_panel{ overflow:hidden; position:relative; border-radius:7px; -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.57);
-moz-box-shadow:    0px 0px 20px 0px rgba(50, 50, 50, 0.57);
box-shadow:         0px 0px 20px 0px rgba(50, 50, 50, 0.57);}
.left_panel header{ overflow:hidden; position:relative; color:var(--white);}
.menu_top_icon, .right_nav .fa-heart, .right_nav .fa-link{ font-size:1.3rem; color:var(--sangria);}
.right_nav .fa-user-circle{ font-size:1.3rem; margin-left:1rem; }
.right_nav .fa-link{ margin-left:1rem;}
.right_nav{float:right;}

#chart_datas{ padding-top:1rem; margin-top: 1.5rem;}
.input_wrp .cell{padding:0px;}
#chart_datas input{    border-top: 0px; border-left: 0px; border-right: 0px; box-shadow: none; background-color: rgba(255,255,255,.30); border-color: var(--h2o);}

#cart_table, #chart_datas{ padding-left: 1rem; padding-right: 1rem }
#chart_table{padding-left:1rem; padding-right:1rem;}
#chart_table .column{ padding:3px;}
#chart_table .row{ margin-left:0px; margin-right:0px;}
#chart_table .top_titles div{ text-align:center; color: var(--green); text-transform: uppercase; font-size: 75%;}
#chart_table div.table_cell input{ border: 0px; background-color: rgba(0,0,0,.05); text-align: center; color: var(--army); font-weight: 500;}

#chart_table div.table_cell input[type="text"]:disabled { background: rgba(0,0,0,.02); }

.right_panel{padding-left:0px; padding-right:0px; min-height:10.8rem; border-radius:3px;}

.right_panel header{background-color:var(--green); min-height:3rem; display:block; width:100%; border-left: 2px solid rgba(0,0,0,.2); }