/*Version in use to support existing blocks within MicroBit Series until all replaced with with microbit.css*/
.controlBlock {
    background-color: orange;
    color: white;
    text-align: left;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
}
.valueBox {
    background-color: white;
    color: black;
    border-radius: 50%;
    padding-left: 5%;
    padding-right: 5%;
}
.valueBoxVariable {
    background-color: #FF8533;
    color: white;
    border-radius: 50%;
    padding-left: 5%;
    padding-right: 5%;
}
.valueBoxOperator {
    background-color: green;
    color: white;
    border-radius: 20%;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 5px;
    padding-bottom: 5px;
}
.motionBlock {
    background-color: royalblue;
    color: white;
    padding-left: 0.5rem;
    padding-top: 1%;
    padding-bottom: 1%;
    border-radius: 10px;
    text-align: left;
}
.blockNotch {
    margin-left: 5%; 
    margin-top: 2%; 
    background-color: white;
}
.penBlock {
    background-color: seagreen;
    color: white;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.embroideryBlock {
    background-color: darkgreen;
    color: white;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.colorBlock {
    background-color:magenta;
    color: white;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}

/*Tinkercad Block additions*/

.tcVariableBlock {
    background-color: orchid;
    color: white;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.dropDownInsert {
    border: solid white 1px;
    padding: 2px;
}
.tcMathBlock {
    background-color: limegreen;
    color: white;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.tcValueBoxVariable {
    background-color: orchid;
    color: white;
    border-radius: 50%;
    padding-left: 5%;
    padding-right: 5%;
}

/*Makecode variations*/

.mcArray {
    background-color: orangered;
    color: white;
    padding-left: 0.5rem;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcArrayBox {
    background-color: orangered;
    color: white;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcDarkLogicBox {
    background-color: rgb(1, 58, 58);
    color: white;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcDarkMusicBox {
    background-color: darkred;
    color: white;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcFunction {
    background-color: navy;
    color: white;
    padding-left: 0.5rem;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcInput {
    background-color: magenta;
    color: white;
    padding-left: 0.5rem;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcInputBox {
    background-color: magenta;
    color: white;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcLogic {
    background-color: darkcyan;
    color: white;
    padding-left: 0.5rem;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcLogicBox {
    background-color: darkcyan;
    color: white;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcMusic {
    background-color: red;
    color: white;
    padding-left: 0.5rem;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcRadio {
    background-color: magenta;
    color: white;
    padding-left: 0.5rem;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 2rem;
    text-align: left;
}
.mcVariable {
    background-color: crimson;
    color: white;
    border-radius: 2rem;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}
.mcVariableBox {
    background-color: crimson;
    color: white;
    border-radius: 2rem;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1.75%;
    padding-bottom: 1.75%;
}
.mcLoop {
    background-color: green;
    color: white;
    border-radius: 2rem;
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
}
.mcValueBox {
    background-color: white;
    color: black;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1.75%;
    padding-bottom: 1.75%;
    border-radius: 2rem;
    text-align: left;
}

.mcGrid td {
    border: solid white;
    padding-top: 8%;
    width: 18%;
}
.mcIconGrid td {
    border: solid white;
    width: 20%;
    font-size: x-small;
}
.mc0 {
 color: royalblue;
}
.mcX {
    color: white;
    background-color: white;
}