:root {
  --main-primary-color:#db2d2c;
  --main-primary-hover-color:  #c32a29;
  --main-secondary-color: #4c5154;
  --main-bg-color:  #f3f3f3;
  --main-error-color: #ff605b;
  --main-validation-color: #40e87d;
}

.table-responsive .dropdown{
    overflow: visible !important;
    position: static;
}

.navbar{
    background-color: var(--main-primary-color);
    font-size: 1.2em;
  }
  
  .navbar .navbar-brand {
  color: #ffffff;
  }
  
  #content{
    background-color: var(--main-bg-color);
  }
  
  .validation_admin{
    background-color: var(--main-validation-color) !important;
  }


  .error{
    background-color: var(--main-error-color) !important;;
  }
  
  .btn-sopa{
  background-color: var(--main-primary-color);
  color: #fff;
  }
  
  .btn-sopa:hover,
  .btn-sopa:active,
  .btn-sopa:focus,
  .btn-sopa.active {
  background-color: var(--main-primary-hover-color);
  color: #fff;
  }
  

  button.dropdown-item:hover:not(.disabled), a.dropdown-item:hover:not(.disabled){
    background-color: #ecd5d5;
    cursor: pointer;
  }
  
  .header{
    background-color: var(--main-primary-color);
  }
  
  .footer{
    background-color: var(--main-secondary-color);
    
  }
  
  .icon-menu {
  color: var(--main-secondary-color);
  }
  
  .icon-menu:hover{
  color: var(--main-primary-color);
  }
  
  .site{
    display: flex;
    height: 100vh;
    flex-direction :column;
  }
  
  
  
  .site-content{
    flex: 1 0 auto;
    background-color: var(--main-bg-color);
  }
  
  .txt-black{
    color: #452529;
  }

  .txt-red{
    color: var(--main-primary-color);
  }
  
  .txt-orange{
  color:  #f7711f ;
  }
  
  .txt-green{
  color: var(--main-validation-color);
  }

  .txt-grey{
    color: var(--main-secondary-color);
  }
  
  .text-green{
  color: var(--main-validation-color);
  }
  
  
  ul.breadcrumb {
    background:var(--main-bg-color);
  }
  ul.breadcrumb > .active {
  color: black;
  text-decoration: none;
  }
  
  ul.breadcrumb li a {
  color: black;
  text-decoration: none;
  }
  ul.breadcrumb li a:hover {
  color: black;
  text-decoration: underline;
  }
  
  hr{
    background-color: grey;
    color:grey;
  }
  
  .vl{
    border-left: 15px solid var(--main-primary-color);
    height: 100%;
  }
  
  .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
  opacity: 0;
  }

  
  
  .style-chooser .vs__search::placeholder,
  .style-chooser .vs__dropdown-toggle,
  .style-chooser .vs__dropdown-menu {
       border-color: #dc3545;
   }

  .vm--container .vm--modal{
     overflow: visible;
   }