@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype"); }
  
  .far,
  .fa-regular {
    font-family: 'Font Awesome 6 Free';
    font-weight: 400; }

  
  @font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype"); }
  

.fas,
.fa-solid {
    font-family: 'Font Awesome 6 Free';
  font-weight: 900; }

  @font-face {
    font-family: 'Anta';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/Anta-Regular.ttf") format("truetype"); }

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype"); }
  
body {
    font-family: "Anta", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.input10
{
    width:10em;
}
.input2
{
    width:2em;
}
.input3
{
    width:3em;
}
.input4
{
    width:4em;
}
.input6
{
    width:6em;
}

#programmingStage
{
    display:flex;
}
#activeProgramContainerWrap
{
    width:100%;
}
#activeProgramContainer
{
    width:100%;
    border: 2px solid white;
}

#blockOptionsContainer
{
    width: 20rem;
    margin: 0 1rem;
}

.eventActionHeader
{
    padding:0.5rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

#eventOptionsHeader
{
    border: 1px solid black;
}
.dndOptionsContainer
{
    border: 1px solid black;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom:1rem;
}

.onWallCollision
{
    background-color : #03045e;
    color : white;
    border: 2px solid #03045e;
}
.onBotCollision
{
    background-color : #023e8a;
    color : white;
    border: 2px solid #023e8a;
}
.onRadarContact
{
    background-color : #0077b6;
    color : black;
    border: 2px solid #0077b6;
}
.onRadarContactLost
{
    background-color : #0096c7;
    color : black;
    border: 2px solid #0096c7;
}
.missileHitEvent
{
    background-color : #ade8f4;
    color : black;
    border: 2px solid #ade8f4;
}
.onShieldBreak
{
    background-color : #00b4d8;
    color : black;
    border: 2px solid #00b4d8;
}
.successfulShotEvent
{
    background-color : #48cae4;
    color : black;
    border: 2px solid #48cae4;
}
.onMissileFired
{
    background-color : #caf0f8;
    color : black;
    border: 2px solid #caf0f8;
}
.onCpuCycle
{
    background-color : #90e0ef;
    color : black;
    border: 2px solid #90e0ef;
}
.onStartup
{
    background-color : #ade8f4;
    color : black;
    border: 2px solid #ade8f4;
}

#addNewRoutineContainer {
    background-Color: #335c67;
    border: 2px solid #335c67;
    margin-left: 0.5rem;
    color:white;
}
.eventRoutine
{
    background-color: #335c67;
    color: white;
    border: 2px solid #335c67;

}
.eventRoutineSourceContainer
{
    display: flex;
    align-items: center;
    margin: 1rem;
    padding:0.5rem;
}
.routineSourceTextLabel
{
    margin-right:0.5rem;
}

.dragAndDrop
{
    opacity: 0.5;
}
.dragAndDropAbsolute
{
    opacity: 0.5;
    position: absolute;
    top:0;
    left:0;
    z-index:98;
}
.dragAndDropAbsoluteTarget
{
    position:relative;
}
.programmingEvent
{
    padding:0.5rem;
    width:10rem;
    margin: 1rem;
    
}
.programmingAction
{
    padding:0.5rem;
    width:10rem;
    margin: 1rem;
}
.programmingCondition
{
    padding:0.5rem;
    width:10rem;
    margin: 1rem;
    background-color: #f4d35e;
}
.eventActionContainer
{
    background-color:white;
    color: black;
    margin: 1rem 0;
}
.eventActionConditionContainer
{
    border: 2px solid white;
    padding: 1rem;
    position: relative;
}
.eventActionActionContainer
{
    border: 2px solid white;
    padding: 1rem;
    position: relative;
}


/* colors #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51 */

.eventActionCondition
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0;
}
.eventActionConditionOperator
{
    margin: 0 0.5rem;
    position: relative;
}
.eventActionConditionMissingValue
{
    border: 1px solid #d90429;
    color: #d90429;
    padding:0.5rem;

}
.eventActionCondition
{
    background-color:#f4d35e;
    padding:0.5rem;
}
.dragAndDropOverlay
{
    border: 2px solid white;
    position: absolute;
    left:-2px;
    top:-2px;
    width:100%;
    height:100%;
    z-index: 99;
}
.eventActionAction
{
    background-color:#f95738;
    padding:0.5rem;
    margin: 0.5rem 0 0 0;
}
.eventActionActionHeader
{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:0.5rem;
}

.eventActionOdd
{
    background-color:#f95738;
}
.eventActionEven
{
    background-color:#ee964b;
}

.eventActionVariableOption
{
    padding:0.5rem;
    width:10rem;
    margin: 1rem;
}
.variableColorOdd
{
    background-color:#40916c;
}
.variableColorEven
{
    background-color:#95d5b2;
}
.eventActionConditionVariable 
{
    background-color:#40916c;
}

.customExpressionOption
{
    padding:0.5rem;
    width:10rem;
    margin: 1rem;
    cursor: pointer;
}
.expressionColorOdd
{
    background-color:#c77dff;
}
.expressionColorEven
{
    background-color:#9d4edd;
}

.variableBox
{
    padding:0.5rem;
    margin:0 0.5rem;
}
.eventActionConditionExpression
{
    
    background-color:#c77dff;
}
.eventActionConditionCustomVariable
{
    background-color:#fb6f92;
    cursor:pointer;
    display:flex;
}
.eventActionConditionCustomVariableLeaveUnchanged
{
    background-color:#AAAAAA;
    cursor:pointer;
}
.eventActionFieldContainerLine{
    display:flex;
    padding: 0.5rem 0 0 0;
    align-items: center;
}
.eventActionActionSelectField
{
    margin-left:0.5rem;
}

.deleteIcon, .cloudUploadIcon
{
    cursor: pointer;

}
.cloudIcon
{
    color:#40916c;
}

#programFixedDetails
{
    margin-bottom:1rem;
}
#pcHeader
{
    border:2px solid #2b2d42;
}
#pcHeaderText
{
    background-color: #2b2d42;
    color:white;
    padding:0.5rem;
}
#pcInitialSettingsHeader
{
    border:2px solid #8d99ae;
}
#pcInitialSettingsHeaderText
{
    background-color: #8d99ae;
    padding:0.5rem;
}
.tableContainer
{
    padding:0.5rem;
}


.undoReminderDiv
{
    border:1px solid #666666;
    margin:0.5rem 0;
    background-color: #dddddd;
    padding:0.5rem;
}
.undoReminderText
{
    padding-bottom:0.25rem;
    text-align: center;
    font-style: italic;
    color: #666666;
}
.undoReminderProgress
{
    width: calc(100% - 6px);
    height: 5px;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.undoReminderProgressBar
{
    display: block;
    height: 5px;
    background: #659cef;
    border-radius: 3px;
    /*transition: width 250ms ease-in-out;*/
    transition: width 5s ease-in-out;

}

#savedHistoryHeader
{
    position:relative;
}
#autosaveHistoryDisplay
{
    display: flex;
    flex-direction: column;
    /*flex-direction: column-reverse;*/
}
.savedProgramContainer
{
    padding:0.5rem;
    width:10rem;
    margin: 1rem;
    padding: 0.5rem;
}
.savedProgramOdd
{
    background-color: #999999;
}

.savedProgramEven
{
    background-color: #cccccc;
}
.savedProgramDate
{
    font-size: 0.75rem;
}
.savedProgramLoad
{
    font-size: 0.75rem;
}
.loadIcon
{
    cursor: pointer;
    padding-left:0.5rem;
}
.savedProgramDelete{
    display:flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.saveProgramButton
{
    background-color: #0096c7;
    border:2px solid #0096c7;
    margin-right: 0.5rem;
    cursor:pointer;
    
}
.saveProgramButtonIcon
{
    padding-right: 0.5rem;
}
#programSaveContainer
{
    padding:0.5rem;
}
#programResetButton
{
    background-color: #ee964b;
    border:2px solid #ee964b;
}
#programSaveButtonContainer
{
    display: flex;
}
#programResetButtonContainer
{
    display: flex;   
}
#programResetContainer
{
    display:flex;
    padding:0.5rem;
}
#programSaveButtonResults
{
    padding:0.5rem;
    margin:0.5rem 0;
    background-color:#40916c;
    color: white;
    display: none;
}

.addIcon
{
    padding-left:0.5rem;
}
.itemChooserTarget
{
    position:relative;
    cursor: pointer;
}
#itemChooserList
{
    position: absolute;
    top:0.5rem;
    left:0.5rem;
    background-color: white;
    border:2px solid black;
    z-index:10;
    display:none;
    cursor:auto;
    padding: 0.5rem;
    flex-flow: column;
}
#itemChooserModal
{
    position:fixed;
    top:0;
    left:0;
    background-color: #666666;
    opacity: 0.5;
    width:100%;
    height:100%;
    z-index:9;
    display:none;
}
.itemChooserChoice
{
    cursor: pointer;
}
.icOptionsContainer
{
    max-height: 200px;
    overflow-y: auto;
    margin-bottom:1rem;
}
.newItemWrap
{
    display:flex;
    justify-content: center;
}
#addNewEventContainer
{
    background-Color: #0096c7;
    border:2px solid #0096c7;
}

.newItemContainer
{
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
}
.addNewConditionContainer
{
    background-color:#faf0ca;
    border:2px solid #faf0ca;
}
.conditionVariableSlot
{
    background-color:#faf0ca;
    padding:0.5rem;
    cursor:pointer;
}
.conditionDeleteIcon
{
    padding-left:0.5rem;
}
.conditionExtraTarget
{
    margin-top:0.25rem;
}
.addNewActionContainer
{
    background-color:#ee964b;
    border:2px solid #ee964b;
    margin-bottom: 0.5rem;
}
.actionVariableSlot
{
    background-color:#ee964b;
    padding:0.5rem;
    margin:0 0.5rem;
    cursor:pointer;
}
.eventIcon, .conditionIcon, .actionIcon, .variableIcon, .expressionIcon, .saveIcon, .cvIcon, .routineIcon
{
    padding-right: 0.5rem;
}
.icBlock
{
    flex: 1 1 0px;
}
.variableIconBefore::before
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"\f46d";
    padding-right:0.5rem;
}
.saveIconBefore::before
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"\f0c7";
    padding-right:0.5rem;
}
.constantIconBefore::before
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"_";
    padding-right:0.5rem;
}
.expressionIconBefore::before
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"\f1ec";
    padding-right:0.5rem;
}

.cvIconBefore::before
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"$";
    padding-right:0.5rem;
}

.cvIcon_numeric_After::after
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"#";
    padding-left:0.5rem;
}
.cvIcon_point_After::after
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"\f3c5";
    padding-left:0.5rem;
}
.cvIcon_vector_After::after
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"\f124";
    padding-left:0.5rem;
}
.cvIcon_rect_After::after
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"\f5cb";
    padding-left:0.5rem;
}
.cvIcon_numericArray_After::after
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"[#]";
    padding-left:0.5rem;
}
.cvIcon_pointArray_After::after
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"[\f3c5]";
    padding-left:0.5rem;
}
.cvIcon_vectorArray_After::after
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"[\f124]";
    padding-left:0.5rem;
}
.cvIcon_rectArray_After::after
{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content:"[\f5cb]";
    padding-left:0.5rem;
}

#addNewCustomVariable
{
    background-color: #fb6f92;
    cursor: pointer;
    border:2px solid #fb6f92;
    position:relative;
}

.cvColorOdd
{
    background-color: #fb6f92;
}
.cvColorEven
{
    background-color: #ffc2d1;
}
/* custom variable colors
--misty-rose: #ffe5ecff;
--pink: #ffc2d1ff;
--cherry-blossom-pink: #ffb3c6ff;
--bakermiller-pink: #ff8fabff;
--rose-pompadour: #fb6f92ff;
*/
.customVariableOption
{

    padding: 0.5rem;
    width: 10rem;
    margin: 1rem;
    display:flex;
    cursor: pointer;

}
.flexFixed
{
    flex: 0 0 auto;
}
.customVariableNameContainer
{
    flex:1 1 auto;
    max-width:80%;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

#addCustomVariableModalOverlay
{
    position:fixed;
    top:0;
    left:0;
    background-color: #666666;
    opacity: 0.5;
    width:100%;
    height:100%;
    z-index:9;
	display: none;
	justify-content: center;
	align-items: center;
}
#addCustomVariableContainer
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
	display: none;
	justify-content: center;
	align-items: center;
}
#addCustomVariableBox
{
    background-color: #FFFFFF;
    border:2px solid #fb6f92;
}
#addCustomVariableHeader
{
    background-color: #fb6f92;
    padding:1rem;
    display: flex;
    justify-content: space-between;
}
#addCustomVariableBody
{
    padding:1rem;
}
#addCustomVariableFooter
{
    position:relative;
}
#customVariableComponentLeaveUnchanged_ic
{
    display:none;
    padding: 0.5rem;
    width: 10rem;
    margin: 1rem;
    background-color:#AAAAAA;
}

.ea_customVariableContainer
{
    display:flex;
    align-items: center;
}
.customVariableTextDisplayName
{
    flex:1 1 auto;
    max-width:80%;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.customVariableLHS
{
    margin-right: 0.5rem;
    position:relative;
}
.customVariableRHS
{
    margin-left:0.5rem;
    position:relative;
}
.customVariableOrBlock
{
    text-align: center;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0.25rem 0;
}
.eventActionConditionCustomVariableArrayIndexContainer
{
    display:flex;
}
.incrementWrap
{
    display:flex;
}

#addCustomExpressionModalOverlay
{
    position:fixed;
    top:0;
    left:0;
    background-color: #666666;
    opacity: 0.5;
    width:100%;
    height:100%;
    z-index:9;
	display: none;
	justify-content: center;
	align-items: center;
}
#addCustomExpressionContainer
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
	display: none;
	justify-content: center;
	align-items: center;
}
#addCustomExpressionBox
{
    background-color: #FFFFFF;
    border:2px solid #c77dff;
}
#addNewCustomExpression
{
    background-color:#c77dff;
    cursor:pointer;
    border:2px solid #c77dff;
    position:relative;
}
#addCustomExpressionHeader
{
    background-color:#c77dff;
    padding:1rem;
    display: flex;
    justify-content: space-between;
}
#addCustomExpressionBody
{
    padding:1rem;
}
#addCustomExpressionFooter
{
    position:relative;
}

.expressionValidList span
{
    margin: 0.2rem 0.25rem;
    padding: 0 0.5rem;
    background-color:#CCCCCC;
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 0.8rem;

}
.expressionValidList
{
    display: flex;
    max-width: 600px;
    max-height:175px;
    overflow-y:auto;
    flex-wrap: wrap;
    border:1px solid black;
    margin-bottom: 0.5rem;
}
#expressionDesignerFormValueTextArea
{
    width: 100%;
    height: 3rem;
}
#expressionDesignerFormCommentTextArea
{
    width: 100%;
    height: 3rem;
}
#addCustomExpressionValidListContainer
{
    max-height: 300px;
    overflow-y: auto;
}
.innerIndexSlot
{
    margin-left:0.5rem;
}

#addCustomVariableFormSubmitButton
{
    background-color: #fb6f92;
    cursor: pointer;
    margin:0.5rem 0;
    border:2px solid #fb6f92;
}
.newItemContainer:hover
{
    border:2px solid black !important;
}
#addCustomVariableFormSubmitButton .addIcon
{
    padding-right:0.5rem;
    padding-left: 0;
}
#expressionDesignerSubmitButton
{
    background-color: #c77dff;
    cursor: pointer;
    margin:0.5rem 0;
    border:2px solid #c77dff;
}
#expressionDesignerSubmitButton .addIcon
{
    padding-right:0.5rem;
    padding-left: 0;
}
#expressionDesignerSubmitButtonContainer
{
    display:flex;
    justify-content: center;
}
.closeX
{
    padding:0 0.5rem;
    cursor:pointer;
}
#exportProgramModalOverlay
{
    position:fixed;
    top:0;
    left:0;
    background-color: #666666;
    opacity: 0.5;
    width:100%;
    height:100%;
    z-index:9;
	display: none;
	justify-content: center;
	align-items: center;
}
#exportProgramContainer
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
	display: none;
	justify-content: center;
	align-items: center;
}
#exportProgramBox
{
    background-color: #FFFFFF;
    border:2px solid #2b2d42;
}
#exportProgramButton
{
    background-color:#2b2d42;
    cursor:pointer;
    border:2px solid #2b2d42;
    color:white;
}
#exportProgramHeader
{
    background-color:#2b2d42;
    color:white;
    padding:1rem;
    display: flex;
    justify-content: space-between;
}
#exportProgramBody
{
    padding:1rem;
}
#exportProgramResults
{
    width: 500px;
    height: 30rem;
}
#importProgramModalOverlay
{
    position:fixed;
    top:0;
    left:0;
    background-color: #666666;
    opacity: 0.5;
    width:100%;
    height:100%;
    z-index:9;
	display: none;
	justify-content: center;
	align-items: center;
}
#importProgramContainer
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
	display: none;
	justify-content: center;
	align-items: center;
}
#importProgramBox
{
    background-color: #FFFFFF;
    border:2px solid #2b2d42;
}
#importProgramButton
{
    background-color:#2b2d42;
    cursor:pointer;
    border:2px solid #2b2d42;
    color:white;
}
#importProgramHeader
{
    background-color:#2b2d42;
    color:white;
    padding:1rem;
    display: flex;
    justify-content: space-between;
}
#importProgramBody
{
    padding:1rem;
}
#importProgramResults
{
    width: 500px;
    height: 30rem;
}
#importProgramSubmitButton
{
    background-color: #2b2d42;
    cursor: pointer;
    margin:0.5rem 0;
    border:2px solid #2b2d42;
    color:white;
}

#importProgramSubmitButton .addIcon
{
    padding-right:0.5rem;
    padding-left: 0;
}
#importProgramSubmitButtonContainer
{
    display:flex;
    justify-content: center;
}
.cvSetActionContainer
{
    position:relative;
}
.constantOption {
    padding: 0.5rem;
    width: 10rem;
    margin: 1rem;
    display: flex;
    cursor: pointer;
}
.constantOptionOdd
{
    background-color: #d4a373;
}
.constantOptionEven
{
    background-color: #e7c8a0;
}
.eventActionConditionConstant
{
    background-color:#d4a373;
}
#programmingStageFooter
{
    width:100%;
    height:200px;
}
#ic_filter
{
    width:100%
}
#ic_filter_icon
{
    margin:0 0.5rem;
}
#ic_filter_input
{
    width:70%;
}
.eventActionHeaderActionIconContainer
{
    display:flex;
}
.moveUpIcon
{
    margin-right:0.5rem;
    cursor:pointer;
}
.moveDownIcon
{
    margin-right:0.5rem;
    cursor:pointer;
}

#eventOptionsHeader, #eventOptionsContainer, #actionOptionsHeader, #actionOptionsContainer, #conditionOptionsHeader, #conditionOptionsContainer, #variableOptionsHeader, #variableOptionsContainer
{
    display:none;
}