html {
    --amarillo: #00ae3d;
 }



 .fade-in{
         -webkit-animation: rot 0.3s ease-out;
        -moz-animation: rot 0.3s ease-out;
        animation: rot 0.3s ease-out;
      }


@keyframes rot {
    from {
      transform-origin: center 20%;
      -webkit-transform: rotateX(90deg);
      -moz-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
    to {
      transform-origin: center 0;
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      transform: rotateX(0deg);
    }
  }

.unidad-cantidad{
width:140px;
}/*
.unidad-cantidad input{
margin:0 2px 2px 0;
border:1px solid #dddddd;
border-radius: 9px;
padding:4px;
font-weight: 600;
width:70px;
text-align: right;
}*/
.unidad-cantidad select{
 width:50px;
 border:1px solid #dddddd;
 border-radius: 9px;
 padding:3px;
}



@media (max-width: 767px){

 .no-in-small{
display:none; 
}
 

 }


.bottom-buttons{

margin:32px 0;
text-align: right;;
}
.bottom-buttons button{
    margin-left: 2px;
}


.smallBold{
    font-size: 12px;
    color:black;
    display:block;
}


.flexDiv{
display:flex;
align-items: flex-end;

}

.flexDiv > div{
flex:1;
}

.addButton{

margin:8px 0;
border:1px solid #aaaaaa;
border-radius: 8px;
padding:8px 16px 8px 4px;
vertical-align: middle;
cursor:pointer;
line-height:20px;
display:inline-block;   
}
.addButton svg{
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.addButton span{
    line-height: 20px;
    display:inline-block;

    vertical-align: middle;
}
.addButton:hover{

     border:1px solid #00ae3d;
     
    }


    .innerButton {
        display: inline-block;
        margin: 1px 4px 1px 0;
        padding: 2px 8px;
        background: #29b549;
        color: #FFF;
        font-size: 11px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 600;
      }


      .matOptionsItem{
background:#efefef;
border: 1px solid #aaaaaa;
padding:4px 4px;
margin:4px 8px 0px 0;
cursor:pointer;
font-size: 14px;
border-radius: 6px;
      }
      .matOptionsItem:hover{
        border: 1px solid #00ae3d;
      }


      .borderBox {
        padding: 4px 4px;
        border: 1px solid #aaaaaa;
        font-size: 14px;
        border-radius: 6px;
margin-bottom:8px;
      }

      .yellowBg{

        background:#00ae3d;
      }


      .noBorderInput {
        padding: 0;
        margin: 0;
        border: 0;
        background: none;
        width: 70%;
        font-weight: 600;
    }


    .uni_cant{
      padding-right: 2px;
      text-align: right;
      padding: 7px 8px;
    border: 1px solid #aaaaaa;
    margin: 0;
    position: relative;
    font-size: 14px;
    display: block;
    border-radius: 6px;

    }






    /*TOOLTIP */
    :root {
      --tooltip-text-color: white;
      --tooltip-background-color: black;
      --tooltip-margin: 10px;
      --tooltip-arrow-size: 6px;
    }
    
    /* Wrapping */
    .Tooltip-Wrapper {
      display: inline-block;
      position: relative;
      
    }
    
    /* Absolute positioning */
    .Tooltip-Tip {

      position: absolute;
      border-radius: 4px;
      left: 50%;
      transform: translateX(-50%);
      padding: 6px;
      color: var(--tooltip-text-color);
      background: var(--tooltip-background-color);
      font-size: 14px;
      font-family: sans-serif;
      line-height: 1;
      z-index: 100;
      /*white-space: nowrap;*/
      max-width: 320px;
      min-width: 280px;
    
    }
    
    /* CSS border triangles */
    .Tooltip-Tip::before {
      content: " ";
      left: 50%;
      border: solid transparent;
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-width: var(--tooltip-arrow-size);
      margin-left: calc(var(--tooltip-arrow-size) * -1);
    }
    
    /* Absolute positioning */
    .Tooltip-Tip.top {
      top: calc(var(--tooltip-margin) * -1);
    }
    /* CSS border triangles */
    .Tooltip-Tip.top::before {
      top: 100%;
      border-top-color: var(--tooltip-background-color);
    }
    
    /* Absolute positioning */
    .Tooltip-Tip.right {
      left: calc(100% + var(--tooltip-margin));
      top: 50%;
      transform: translateX(0) translateY(-50%);
    }
    /* CSS border triangles */
    .Tooltip-Tip.right::before {
      left: calc(var(--tooltip-arrow-size) * -1);
      top: 50%;
      transform: translateX(0) translateY(-50%);
      border-right-color: var(--tooltip-background-color);
    }
    
    /* Absolute positioning */
    .Tooltip-Tip.bottom {
      bottom: calc(var(--tooltip-margin) * -1);
    }
    /* CSS border triangles */
    .Tooltip-Tip.bottom::before {
      bottom: 100%;
      border-bottom-color: var(--tooltip-background-color);
    }
    
    /* Absolute positioning */
    .Tooltip-Tip.left {
      left: auto;
      right: calc(100% + var(--tooltip-margin));
      top: 50%;
      transform: translateX(0) translateY(-50%);
    }
    /* CSS border triangles */
    .Tooltip-Tip.left::before {
      left: auto;
      right: calc(var(--tooltip-arrow-size) * -2);
      top: 50%;
      transform: translateX(0) translateY(-50%);
      border-left-color: var(--tooltip-background-color);
    }
    
    
    
    .tooltip-content{
      padding:16px;
      font-size:14px;
      background: var(--tooltip-background-color);
      
    } 
    
     .tooltip-content h3{
      color:#00ae3d;
      font-size:18px;

         }
    .tooltip-content b{
      color:#00ae3d;
         }
    .tooltip-content p{
 color:#efefef;
 font-size:14px;
    }
    .tooltip-content .desc{
      color:#eeeeee;
      font-size:13px;
         }
         .tooltip-content span{
          color:#eeeeee;
          font-size:14px;
             }

    /* /TOOLTIP */