/* ==================================================================================================
 * Title:      OlthenI.css
 * Author:     Héctor S. Enrique
 * Version:    1.0
 * Purpose:    Styles para el Crecimiento Animal I.
 * Notes:      Version 1.0, Septiembre 2021
 *             - First release.
 * ==================================================================================================*/

.calculator3D {
  width: 555px;
}

input[type=text] {
    width: 85px;
    /* height: 35px; */
    border-radius: 5px;
    border: none;
    background-color: #333333;
    color: #d9d9d9;
    /* padding: 4px 14px 0 1px; */
    margin: 1px;
	text-align:center;
	font-size:12px;
}
input.quart[type=text] {
    width: 45px;
    /* height: 35px; */
    border-radius: 5px;
    border: none;
    background-color: #333333;
    color: #d9d9d9;
    /* padding: 4px 14px 0 1px; */
    margin: 1px 0px 1px 0;
	text-align:center;
	font-size:12px;
}


.combo1{
    width: 85px;
}
.combo2{
    width: 130px;
}


.calc-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

.label1 {
   margin: 1px; 
   width: 270px;
   border: none;
   height: 25px;
   border-radius: 4px;
   color: #000000;
   padding: 10px 0px 0 0px;
   text-align:center;
  font-size:12px;
}

.label3 {
   margin: 1px; 
   width: 270px;
   border: none;
   height: 25px;
   border-radius: 4px;
   color: #d0d0d0;
   background-color: #400000;
   padding: 10px 0px 0 0px;
   text-align:center;
  font-size:14px;
}

.label2, .label0 {
   margin: 1px 1px 1px 1px;  
   width: 80px;
   border: none;
   /* height: 25px; */
   border-radius: 4px;
   color: #101010;
   background-color: #a0a0a0;
   padding: 1px 1px 1px 1px;
   text-align:center;
}
.label0 {
   background-color: gray;
}
.label21 {
   margin: 1px 1px 1px 1px;  
   width: 165px;
   border: none;
   /* height: 25px; */
   border-radius: 4px;
   color: #101010;
   background-color: #a0a0a0;
   padding: 1px 1px 1px 1px;
   text-align:center;
}
.label13 {
   margin: 1px 1px 1px 1px;  
   width: 65px;
   border: none;
   /* height: 25px; */
   border-radius: 4px;
   color: #101010;
   background-color: #a0a0a0;
   padding: 1px 1px 1px 1px;
   text-align:center;
}
.label15 {
   margin: 1px 1px 1px 1px;  
   width: 62px;
   border: none;
   /* height: 25px; */
   border-radius: 4px;
   color: #101010;
   background-color: #a0a0a0;
   padding: 1px 1px 1px 1px;
   text-align:center;
}
.label4 {
   margin: 1px 0px 1px 0px;  
   width: 49px;
   border: none;
   /* height: 25px; */
   border-radius: 4px;
   color: #101010;
   background-color: #a0a0a0;
   padding: 1px 1px 1px 1px;
   text-align:center;
}

.rich-label {
   margin: 3px;
   width: 210px;
   border: none;
   height: 25px;
   border-radius: 0px;
   color: #d0d0d0;
   background-color: #000080;
   padding: 10px 10px 0 1px;
   text-align:center;
}
.rich-label3 {
   margin: 1px 1px 1px 0px;  
   width: 65px;
   border: none;
   border-radius: 0px;
   color: #d0d0d0;
   background-color: #000080;
   padding: 1px 1px 1px 1px;
   text-align:center;
}
.rich-label5 {
   margin: 1px 1px 1px 0px;  
   width: 62px;
   border: none;
   border-radius: 0px;
   color: #d0d0d0;
   background-color: #000080;
   padding: 1px 1px 1px 1px;
   text-align:center;
}

.button5 {
   width: 175px;
}

button:hover {
  background-color: hsla(10, 100%, 40%, 0.3);
  transition: .2s;
}


.functions-cero {
	margin-top: 3px;
    width: 550px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.functions-one {
    width: 230px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.functions-three {
    width: 250px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.functions-tercio, .functions-2xtercio {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.functions-tercio {
    width: 180px;
	margin-left:0px;
	margin-right:0px;
}
.functions-2xtercio {
    width: 365px;
}

.functions-five {
    width: 340px;
    display: flex;
    flex-wrap: wrap;
}

.triggers {
    background-color: #ffc266;
}



.numbers {
    background-color: #999999;
}

.basic-stuff {
    background-color: #80d4ff;
}

.complex-stuff {
    background-color: #80ffff;
}

canvas {
	padding:3px 0px 3px 0px;
	/* image-rendering: pixelated; */
}