/* 
    Document   : flSteps
    Created on : 05-Sep-2013, 19:14:32
    Author     : yann
    Description:
        Purpose of the stylesheet follows.
*/

/*Css for the TK buttons in step editor that consist in a clickable icon*/
.fl_stepIconTKButton{
    color: black;
    cursor: pointer;
}
.fl_stepIconTKButton_text{
    color: black;
    cursor: pointer;
}
.fl_stepIconTKButton-hover{
    color: black;
    cursor: pointer;
}
.fl_stepIconTKButton-disabled{
    color: black;
    cursor: pointer;
    opacity: 0.5;
}
.fl_stepIcon{
    border-radius: 21px !important;
    overflow:auto;
    float: left;
    width: 42px !important;
    height: 45px !important;
    margin: 3px 0 0 -21px !important;
}
.fl_stepIconfafafa{
    background-color: #fafafa !important;
    border-radius: 21px !important;
    overflow:auto;
    float: left;
    width: 42px !important;
    height: 45px !important;
    margin: 3px 0 0 -21px !important;
}
.fl_stepIcon255126124{
    background-color: #FF7E7C !important;
    border-radius: 21px !important;
    overflow:auto;
    float: left;
    width: 42px !important;
    height: 45px !important;
    margin: 3px 0 0 -21px !important;
}
.fl_stepIcon126126255{
    background-color: #7E7EFF !important;
    border-radius: 21px !important;
    overflow:auto;
    float: left;
    width: 42px !important;
    height: 45px !important;
    margin: 3px 0 0 -21px !important; 
}
.fl_stepIcon121255251{
    background-color: #79FFFB !important;
    border-radius: 21px !important;
    overflow:auto;
    float: left;
    width: 42px !important;
    height: 45px !important;
    margin: 3px 0 0 -21px !important;
}
.fl_stepIcon125255120{
    background-color: #7DFF78 !important;
    border-radius: 21px !important;
    overflow:auto;
    float: left;
    width: 42px !important;
    height: 45px !important;
    margin: 3px 0 0 -21px !important; 
}
.fl_stepIcon255230120{
    background-color: #FFE678 !important;
    border-radius: 21px !important;
    overflow:auto;
    float: left;
    width: 42px !important;
    height: 45px !important;
    margin: 3px 0 0 -21px !important; 
}
.fl_stepErrorIcon{
    z-index: 1;
    height: 22px;
    width: 22px;
    margin-top: 13px;      
}
.fl_StepComponentIcon2020 {
    width: 20px;
    height:20px;
}
/*CSS for the save button on top of the step list*/
.fl_saveAllStepsButton {
    color: #3fb34f;
    font-family: "Helvetica";
    text-decoration: underline;
    font-size: 18px;
    cursor: pointer;
}
.fl_saveAllStepsButton_text {
    color: #3fb34f;
    font-family: "Helvetica";
    text-align: right !important;
    text-decoration: underline;
    font-size: 18px;
    cursor: pointer;
    padding-left: 6px;
}
.fl_saveAllStepsButton-hover {
    color: #3fb34f;
    font-family: "Helvetica Neue";
    text-align: right !important;
    text-decoration: underline;
    font-size: 18px;
    cursor: pointer;
}
/*CSS for the save button on top of the step list*/
.fl_saveAllStepsButtonConflict {
    color: #ff0000 !important;
    font-family: "Helvetica";
    text-decoration: underline;
    font-size: 18px;
    cursor: pointer;
}
.fl_saveAllStepsButtonConflict_text {
    color: #ff0000;
    font-family: "Helvetica";
    text-align: right !important;
    text-decoration: underline;
    font-size: 18px;
    cursor: pointer;
    padding-left: 6px;
}
.fl_saveAllStepsButtonConflict-hover {
    color: #ff0000;
    font-family: "Helvetica Neue";
    text-align: right !important;
    text-decoration: underline;
    font-size: 18px;
    cursor: pointer;
}

.fl_topTemplateName {
    color: black;
    font-family: "Helvetica";
    font-size: 18px;
    text-align: center;
    overflow: hidden ;
    text-overflow: ellipsis;
    white-space: nowrap ;
}

.fl_stepsCount {
    color: #aeaeae;
    text-align: right;
    font-family: "Helvetica";
    font-size: 18px;
    font-style: italic;
}
/*CSS for the expland/collapse all button on top of the step list*/
.fl_expandCollapseAllStepsButton {
    color: black;
    text-align: right;
    font-family: "Helvetica";
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
}
.fl_expandCollapseAllStepsButton_text {
    color: black;
    text-align: right;
    font-family: "Helvetica";
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
}
.fl_expandCollapseAllStepsButton-hover {
    color: black;
    text-align: right;
    font-family: "Helvetica";
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
}

/*CSS for the add label/task/branch/media on top of the step list*/
.fl_addStepMenuButton {
    cursor: pointer;
}
.fl_addStepMenuButton-hover{
    cursor: pointer;
}
.fl_addStepMenuButton_active {    
    cursor: pointer;
}
.fl_addStepMenuButton_active-hover{
    cursor: pointer;
}
.fl_addStepButtonToolBar{
    background-color: #ffcb7e !important;
}
/*CSS for the add  after/in/last label/task/branch/media on top of the step list*/
.fl_addStepButton {  
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    background-color: white;
}
.fl_addStepButton-hover {
    cursor: pointer;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    background-color: white;
}
.fl_addStepButton_text {  
    cursor: pointer;
    background-color: white;
}
.fl_addStepCancel {
    text-align: right !important;
}
.fl_addStepCancel-hover{
    text-align: right !important;
}
.fl_addStepCancel_text{
    color: white;
    font-weight: bold;
    font-family: "Helvetica";
    font-size: 14px;
    cursor:pointer;
    text-align: right !important;
}
/* CSS for the icons of the StepDisplay component */
.fl_stepDisplayIcons {
    padding-right: 1px;
    right: 5px;
    top: 1px;
    vertical-align: top;
    float: right;
    margin-left: 13px;
    height: 48px;
}
/* CSS for the table of the StepDisplay that contains the text of the labek, and the step icons */
.fl_stepDisplay100Table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border-collapse:collapse;
}
/* CSS for the table of the StepDisplay that contains the text of the labek, and the step icons */
.fl_stepDisplay50Table {
    width: 50%;
    height: 100%;
    table-layout: fixed;
}
.fl_stepDisplayTableTopAlign {
    vertical-align:top;
}
.fl_stepTableNoBorder {
    border: none;
}
.fl_stepGoToText {
    display: inline-block;
    overflow: hidden ;
    text-overflow: ellipsis ;
    white-space: nowrap ;
    margin-bottom: 5px;
    margin-left: 5px;
    position: relative;
    width: 50%;
    height: 26px;
}

/* CSS for the step popup action menu*/
.fl_stepPopup {
    background: white !important;
}
.fl_setpActionsLabel {
    color: #CCCCCC;
    background: white !important;
    border-bottom: 1px solid #CCCCCC;
    text-align: center;
    
}
/* CSS for the color selector in the step action menu*/
.fl_StepColorSelector {
    background: white;
    border-top: 1px solid #CCCCCC;
}

/* CSS for the buttons in the popup menu of the step list*/
.fl_stepPopupButton {  
    cursor: pointer;
    background-color: white;
    opacity: 1;
    padding-left: 10px;
}
.fl_stepPopupButton-disabled{
    background-color: white;
    opacity: 1 !important;
    color: lightgray;
    cursor: default;
    padding-left: 10px;
}
.fl_stepPopupButton-hover{  
    cursor: pointer;
    background: #ffcb7e;
    opacity: 1;
    padding-left: 10px;
}
.fl_stepPopupButton_text {  
    cursor: pointer;
    background-color: transparent;
}
/*CSS for the color selector when disabled*/
.fl_colorSelector-Disabled {
    opacity: 1 !important;
}
/*CSS for the buttons used to select color in step popup action menu*/
.fl_stepColorButton {  
    cursor: pointer;
    background-color: white;
    border: 1px solid white;
    border-radius: 5px;  
    opacity: 1;
}
.fl_stepColorButton-disabled{  
    cursor: pointer;
    background-color: white;
    border: 1px solid white;
    border-radius: 5px;      
    opacity: 1 !important;
}
.fl_stepColorButton-hover {  
    cursor: pointer;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;  
    opacity: 1;
}
.fl_stepColorButton_selected {  
    cursor: pointer;
    background-color: white;
    border-radius: 5px;  
    border: 1px solid black;
    opacity: 1;
}
.fl_stepColorButton_selected-hover {  
    cursor: pointer;
    background-color: white;
    border-radius: 5px;  
    border: 1px solid black;
    opacity: 1;
}

/* CSS for the add Free/yesNoNa/Multi-CHoice/Check buttons in task step */
.fl_stepInputButton {  
    cursor: pointer;
    /*border-radius: 5px;    
    background: #f2f2f2;
    border-bottom: 1px solid darkgray;*/
}
.fl_stepInputButton_icon{  
    cursor: pointer;
    /*background: #f2f2f2;*/
    height: 27px !important;
    width: 28px !important;
}
.fl_stepInputButton-hover{  
    background-color: white;
    /*border-radius: 5px;
    background: #f2f2f2;
    border-bottom: 1px solid darkgray;*/
}
.fl_stepInputButton_text {  
    cursor: pointer;
    /*background: #f2f2f2;*/
}


/* Basic CSS of a step component */
.fl_stepLabel{
    text-align: center; 
    padding-left: 5px;
    padding-right: 5px;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    position:relative;
    top:  14px;  
}
.fl_stepText {
    display: inline-block;
    overflow: hidden ;
    text-overflow: ellipsis ;
    white-space: nowrap ;
    margin-bottom: 5px;
    margin-left: 5px;
    top: 14px; 
    position: relative;
    width: 100%;
    height: 26px;   
    float: left;
}
.fl_step {
    color: black;
    background-color: #f2f2f2 !important;
}
/* CSS of a selected step component */
.fl_stepSelected {
    color: black;
    background-color: #ffcb7e !important;
}
/* CSS of a selected dragged over step component */
.fl_stepDragOver {
    border-top: 2px solid black !important;
    border-bottom: 1px solid white !important;
    /*border: 1px solid black !important;*/
}
/* CSS of a label step component */
.fl_labelStep {
    color: black;
    background-color: #dcdcdc !important;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* CSS of a selected label step component */
.fl_labelStepSelected {
    color: black;
    font-weight: bold;
    background-color: #ffcb7e !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* CSS of a media step component */
.fl_mediaStep {
    color: #c61717;
    background-color: #dcdcdc !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* CSS of a selected media step component */
.fl_mediaStepSelected {
    color: #c61717;
    background-color: #ffcb7e !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* CSS of a branch step component */
.fl_branchStep {
    color: #1585d3;
    background-color: #dcdcdc !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* CSS of a selected branch step component */
.fl_branchStepSelected {
    color: #1585d3;
    background-color: #ffcb7e !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* CSS of a label step component */
.fl_endMarkerStep {
    color: #791F1F;
    background-color: white !important;
    font-weight: bold;
    border: 3px solid #791F1F;
}
/* CSS of a selected label step component */
.fl_endMarkerStepSelected {
    color: #791F1F;
    background-color: #ffcb7e !important;
    font-weight: bold;
    border: 3px solid #791F1F;
}
/* CSS for the condition editor*/
.fl_StepCondition {
    border-top: solid 1px white;   
}
/* CSS for the blog icons StepBlogsComponent*/
.fl_StepBlogsComponent {
    border-top: 1px solid #7eadd9;
    border-bottom: 1px solid #7eadd9;
    border-right: 1px solid #7eadd9;
    background: #eef4ff;
}

/* CSS for the textboxes in edit mode*/
.fl_StepEditorTextBox .x-form-text{
    border: 1px solid #7eadd9 !important;
    background: #eef4ff !important;
}
.fl_DefaultItem {
    background-image: none !important;
    background-color: #DEE4EF !important;
}