/*********************************************************************************
 * This file is part of Myddleware.

 * @package Myddleware
 * @copyright Copyright (C) 2013 - 2015  St�phane Faure - CRMconsult EURL
 * @copyright Copyright (C) 2015 - 2016  St�phane Faure - Myddleware ltd - contact@myddleware.com
 * @link http://www.myddleware.com	
 
 This file is part of Myddleware.
 
 Myddleware is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 Myddleware is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with Myddleware.  If not, see <http://www.gnu.org/licenses/>.
*********************************************************************************/

#step_modules {
	padding: 20px;
}

#validation_simulation:hover {
	cursor: pointer;
}

#connexion #rulename {
	border: 3px solid transparent;
	padding: 5px;
	color: white;
	background: #202020;
}

.obl {
	display: inline-block;
	width:16px;
	height:16px;
	margin-left: 20px;
	padding-left: 5px;
}
.windows {
	display:none;
}


.clr {
	both: clear;
}

.left {
	float: left;
	text-align: left;
}

.right {
	float: right;
	text-align: right;
}

.cursor:hover {
	cursor:pointer;
	color: #12BA00;
}



/* step 3 */

.note, #error {
	float: left; 
	margin-right: .3em;	
	width: 400px;
	margin: 20px 0;
}

.ui-widget-content {
	font-size: 1em;
}

.ui-widget-header {
	font-size:0.85em;	
}

/*#cible ul li li::before{ content:"Formule : "; }*/

#choix fieldset {
	border: 0px;
}

.clr {
	clear:both;
}

.listepager {
	min-width:75px;
}

.listepager td {
	padding: 5px;
	color: black; 
	min-width: 155px;
	text-align: center!important;
	vertical-align: middle;
	word-break: break-word;
}

.solution_block {	
	width: 200px;
	height: 64px auto;
	text-align: center!important;
}

.listepager .off td {
	opacity:0.5;
}

.listepager tr {
	padding: 10px;
}

.has-switch > div {
	height: 30px;
}


/* params */

#fields_duplicate_target li {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;	
    
    background-color: #FFFFFF;
    border-color: #CCCCCC;
    color: #333333;    
}

#fields_duplicate_target li:hover {
	cursor: pointer;
}
#fields_duplicate_target li.active {
    background-color: #5BC0DE;
    border-color: #46B8DA;
    color: #FFFFFF;  
}

#fields_duplicate_target li.no_active {
    background-color: #D9534F;
    border-color: #D43F3A;
    color: #FFFFFF;
}

/* relation step 3 */

#relation .rel .obl {
	margin-left: 0px;
}

#relation .rel, #fieldsfilter {
	list-style: none outside none;
}

#fieldsfilter li {
	margin: 10px 0px;
}


input[type="text"] {
	color: black;
}

/* infobulle mapping des champs */
.justify-content-center{
	margin-bottom: 15px;
}

#source_info select{
	max-width: 500px;
}

.info_delete_fields {
	position:absolute;
	background: rgba(157,192,225,4);
	border: 1px solid #0F66A9;
	color: #444446;
	min-width: 100px;
	padding:0px 4px;
	font-weight:bold;	
	font-size: 0.7em;
	margin-left: 50px;
}

.badge {
	--bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity));
	display:inline-block;
	width: 40px;
}

#champs #catalog {
	/* max-height: 870px; */
	overflow: auto;
	/* max-width: 300px; */
}


/*  Manual rule simulation buttons and input  -- ESTELLE TODO : check whether this is still relevant */


.manual-simulation, .simulation-buttons {
	width: 65vw;
}

.btn-success {
	background-color: #19ca42!important;
	border-color: #19ca42!important;
}

.btn-success:hover {
	background-color: #16aa39!important;
	border-color: #16aa39!important;
} 


/*------------------------- Update SF4 -------------------- */

/* Validate button  */
#validation {
	display: block!important;
	box-shadow: none;
}

/* Page View Rule simulation with 2 tables (source & target) */
.edit-rule-overview{
	display: flex;
	justify-content: space-between;
	margin-top: 3vh;
}

td {
	text-align: left!important;
}

td > a {
	color: #337ab7;
	text-decoration: none;
}

.unlink_rule_from_group {
	color: #dc3545 !important;
}

.unlink_rule_from_group:hover {
	color: white !important;
}

.title_source_ctr, .title_target_ctr {
	font-weight: bold;
}

.title_source, .title_source_ctr {
	color: #0F66A9;	
}

.title_target, .title_target_ctr {
	color: #198BCA;
}

/* Page View Rule : Validation Tab */
#ruleparams,
#simuleRuleFluxContainer {
	background: rgb(233, 233, 233);
    color: black;
    margin-bottom: 20px;
    padding: 30px;
	max-width: 30vw;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#ruleparams p,
#validRuleParams p {
    font-weight: bold;
    margin-bottom: 5px;
}

#ruleparams .form-control, #ruleparams .form-select,
#validRuleParams .form-control, #validRuleParams .form-select {
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}


#simuleRuleFluxError {
	display:none;
}

#simuleRuleFluxResult {
	width: fit-content;
}

#ruleparams .form-control,
#validRuleParams .form-control {
	max-width: 250px;
	margin-bottom: 5px;
}

/* Page View rule : mapping tab */

.mapping-card {
	margin-bottom: 10px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
}

.mapping-card-title {
	margin: 10px;
}

.mapped-fields{
	color: #198BCA;
}

.mapped-formula {
	color: #0F66A9;
}


/* Page View Rule List  */

.solution_block, .CRUD-icons, .creation-date {
	text-align: center!important;
}

#rule-list {
	max-width: 88vw;
}

/* Connectors list page */
#connector-list {
	max-width: 75vw;
}

#validRuleParams {
	margin-left: -12px;
}

.CRUD-icons a {
	text-decoration: none!important;
}

.tab-3, .tab-4, .tab-5, .tab-6, .tab-7{
	border: 0px solid transparent !important;
	border-top-right-radius: 194.25rem !important;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front {
	max-width: 645px;
}

.close-button-description, .close-button-name-rule  {
    background: none;
    color: #dc3545;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
}
.close-button-description {
	top: -41px;
    right: 10px;
}
.close-button-name-rule{  
    top: -35px;
    right: 5px;
}

.close-button-description:hover, .close-button-name-rule:hover {
    color: #cd2536;
	transform: scale(1.1);
}

.edit-form-description-close {
    position: relative; 
}

.edit-form-name-rule {
	position: relative;
}


/* rule parameters tab */

#ruleparams,
#simuleRuleFluxContainer {
    border-radius: 15px;
}

#simuleRuleFluxContainer {
	margin-top: 3em;
}

#rule-params-container {
	margin-top: 3em;
	align-items: flex-start !important;
}

#ruleparams {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.workflow-name-link-rule {
	color: #0a58ca !important;
}

.workflow-name-link-rule:hover {
	text-decoration: underline !important;
}

/* connector parameters input */

input[id^="connector_connectorParams_"][id$="_value"],
input#connector_name {
    border: 1px solid #dfdddd;
    border-radius: 4px;
	margin-bottom: 3px;
	min-width: 410px;
}

label[for^="connector_connectorParams_"][for$="_value"] {
    margin-bottom: 3px;
}

/* workflow action fields */

input#form_name,
textarea#form_description,
input#form_order,
input#form_multipleRuns,
input#form_status,
input#form_active,
input#form_subject,
input#form_message,
input#form_to,
input#form_targetField,
input#form_targetFieldValue,
input#form_rerun,
input#form_ruleId,
input#form_searchField,
input#form_searchValue,
select#form_name,
select#form_Workflow,
select#form_description,
select#form_action,
select#form_order,
select#form_multipleRuns,
select#form_status,
select#form_active,
select#form_subject,
select#form_message,
select#form_to,
select#form_targetField,
select#form_targetFieldValue,
select#form_rerun,
select#form_ruleId,
select#form_searchField,
select#form_searchValue {
	border: 1px solid #dfdddd;
    border-radius: 4px;
	margin-bottom: 3px;
	margin-left: 10px;
}

  .form-group-workflow-action {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 1rem;
  }

  .form-group-workflow-action label {
    font-weight: 600;
  }

  .form-group-workflow-action input,
  .form-group-workflow-action select,
  .form-group-workflow-action textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
  }

  .form-group-workflow-action label {
	margin-bottom: 0.4rem;
	font-weight: 600;
	/* 👇 This aligns label start with input */
	padding-left: 10px;
  }

  .form-actions-workflow-action {
    text-align: center;
    margin-top: 20px;
  }

  .form-actions-workflow-action button {
    padding: 8px 16px;
    font-size: 14px;
    margin: 0 8px;
  }

.rule-list-activation-switch {
    display: flex !important;
    justify-content: center !important;
}

.flex-center-rule-name {
	margin-left: 4rem;
}

.workflow-action-new-name div #form_name,
.workflow-action-edit-name div #form_name,
.workflow-action-new-workflow div #form_Workflow,
.workflow-action-edit-workflow div #form_Workflow,
.workflow-action-new-action div #form_action,
.workflow-action-edit-action div #form_action,
.workflow-action-edit-status div #form_status,
.workflow-action-new-status div #form_status,
.workflow-action-new-rule div #form_ruleId,
.workflow-action-edit-rule div #form_ruleId,
.workflow-action-new-searchfield div #form_searchField,
.workflow-action-edit-searchfield div #form_searchField,
.workflow-action-new-searchvalue div #form_searchValue,
.workflow-action-edit-searchvalue div #form_searchValue,
.workflow-action-new-to div #form_to,
.workflow-action-edit-to div #form_to,
.workflow-action-new-subject div #form_subject,
.workflow-action-edit-subject div #form_subject {
	width: 200%;
}

.workflow-action-new-description div #form_description,
.workflow-action-edit-description div #form_description {
	width: 350%;
}

.workflow-action-new-message div #form_message,
.workflow-action-edit-message div #form_message {
	width: 400% !important;
}