/*!
 * Copyright 2021 VariaMos PLE. 
 */

 :root {
  --primary-color: #428DCF;
  --primary-color-text: #ffffff;
  --primary-color-constrast: #0f436d;
  --primary-color-constrast-text: #ffffff;

  /* --secondary-color: #8bc34a;
  --secondary-color-text: #344b1b;
  --secondary-color-constrast: #344b1b;
  --secondary-color-constrast-text: #ffffff; */

  --secondary-color: #428DCF;
  --secondary-color-text: #ffffff;
  --secondary-color-constrast: #0f436d;
  --secondary-color-constrast-text: #ffffff;

  
  --header-color: #dcdcdc;
  --dark-color-font: #212529;
}

html{
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dark-color-font) !important;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0px;
  padding: 0px;
}

.bodyContent{ 
  background-color: white;
} 

/* General design
---------------------------- */
.distribution-variamos {
  padding: 0.05em;
  border: none;
}

.card {
  border: 1px rgba(0, 0, 0, 0.125);
}

.background-variamos {
  background-color: var(--primary-color);
  color: var(--primary-color-text);
}

.dropdown-item:active {
  background-color: var(--primary-color);
  color: var(--primary-color-text);
}

.projectName {
  color: var(--primary-color);
}

label {
  color: gray;
}

.ajs-error,
.ajs-message,
.ajs-warning {
  color: var(--primary-color-text) !important;
  border-bottom: 1px !important;
  box-shadow: 2px 2px 6px var(--primary-color-constrast);
}

/* ---------------------------- */

/* Variamos Botton - Primary Color
---------------------------- */
.btn-Variamos {
  color: var(--secondary-color-text);
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.btn-Variamos:hover {
  color: var(--secondary-color-constrast-text);
  background-color: var(--secondary-color-constrast);
  border-color: var(--secondary-color-constrast);
}

.btn-Variamos:active {
  color: var(--secondary-color-constrast-text);
  background-color: var(--secondary-color-constrast);
  border-color: var(--secondary-color-constrast);
}
/* ---------------------------- */

/* Variamos project management
---------------------------- */
.border-title-darkblue-variamos {
  border-bottom: 5px solid var(--primary-color-constrast);
  border-right: 5px solid var(--primary-color-constrast);
}

.list-group-item.active {
  color: var(--primary-color-text);
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color-constrast);
  border-bottom: 5px solid var(--primary-color-constrast);
}

/* ---------------------------- */

/* Variamos Tree
---------------------------- */
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); */
.outer {
  top: 30%;
  left: 40%;
}
ul {
  list-style: none;
}
#ul {
  margin: 0;
  padding: 0;
}
.fa-minus-square-o,
.nested {
  cursor: pointer;
  user-select: none;
}
.fa-minus-square-o::before,
.fa-plus-square::before {
  display: inline-block;
  margin-right: 5px;
}

.nested {
  display: none;
}

.active {
   display: block; 
}

.fa-minus-square-o,
.fa-plus-square {
  color: var(--primary-color);
  cursor: pointer;
}

.fa-minus-square-o:active,
.fa-plus-square:active {
  background-color: #b8daed3b;
}

.fa-minus-square-o:active,
.fa-plus-square:active {
  background-color: #b8daed3b;
}
/* ---------------------------- */

/* Variamos navigate bar
---------------------------- */
.nav-bar-variamos,
a {
  text-decoration: none !important;
  color: var(--primary-color-text);
  background-color: transparent !important;
  border: none;
  padding-top: 5px;
  cursor: pointer;
}

.nav-bar-variamos:active {
  color: var(--primary-color-constrast-text) !important;
  text-decoration: none;
  background-color: var(--primary-color-constrast) !important;
  border-color: var(--primary-color-constrast);
}

.nav-bar-variamos:hover {
  color: var(--primary-color-constrast-text) !important;
  text-decoration: none;
  background-color: var(--primary-color-constrast) !important;
  border-color: var(--primary-color-constrast);
}

a:hover {
  text-decoration: none;
  color: var(--primary-color-text);
}
/* ---------------------------- */

/* Variamos icon dark
---------------------------- */
.icon-dark-variamos {
  text-decoration: none !important;
  color: var(--primary-color-text);
  background-color: var(--primary-color);
  border: none;
  padding-top: 5px;
  cursor: pointer;
}

.icon-dark-variamos:hover {
  color: var(--primary-color-constrast-text) !important;
  text-decoration: none;
  background-color: var(--primary-color-constrast) !important;
  border-color: var(--primary-color-constrast);
}

.header {
  color: var(--dark-color-font);
  background-color: #f9fcff;
  text-align: center;
  padding: 0.25rem; 
  font-weight: bold;
  vertical-align: middle; 
}


.divTreeExplorer span{
  color: var(--dark-color-font);
}

.btn-icon{
  background-color: #2196f3;
  border-radius: 50%; 
  padding: 0.25rem;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.3);
}


footer .row {
  padding-bottom: unset !important;
}

.form-control{
  background-color: white !important;
}

.primary{
  background-color: var(--primary-color) !important;
}

.ImageInput{
}

.ImageInput img{
   max-height: 5rem !important;
   border-radius: 0.25rem;
}

.ImageInput p{
   font-size: 0.7rem;
}