/*********************************************************************************
 * 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/>.
*********************************************************************************/

* {
	margin: 0;
	padding: 0;
	font-size: 1em;
	text-decoration: none;
	border: none;
	list-style: none;
	outline: none;
}

#animation .loader-source, #animation .loader-cible {
	width: 43px;
	height: 11px;
	min-height:11px;
	min-width:43px;	
	display: inline-block;
	margin: 0 15px;
}

#animation #connector-source-error, #animation #connector-cible-error,
#animation #connector-source-success, #animation #connector-cible-success {
	width: 410px;
	max-width: 410px;
    margin-top: 10px;
	height: auto;
	word-wrap: break-word;
}


#animation {
    max-width: 1280px;
    margin: auto;
}

#animation > .animation-content{
    display: inline-block;
    vertical-align: top;
}

#animation a {
    color: #067dd7;
}
#animation a:hover {
    text-decoration: underline;
}

#animation .animation-content-left{
	width: 15%;
	height: 100%;
    padding-left: 5px;
}

#animation .animation-position-text-source{
    position: relative;
    top: 180px;
    left: 72px;
}


#animation .animation-content-right{
	width: 15%;
	height: 100%;
	padding-right: 5px;
}

#animation .animation-content-right > div{
    float: right;
}

#animation .animation-position-text-cible{
    position: relative;
    top: 260px;
    right: 72px;
}

#animation .animation-content-left-toggle-btn{
    display: none;
}

#animation .animation-content-right-toggle-btn{
    display: none;
}

#animation .animation-workspace{
	width: 69%;
	height: 100%;
    margin-top: 5%;
}

#animation .animation-workspace-title{
    text-align: center;
    font-weight: normal;
    text-shadow: 0px 0px 1px #AAA;
    color: #424140;
}

#animation .animation-center{
	margin: auto;
}

#animation .animation-workspace-container{
    width: 100%;
    height: 200px;
}

#animation .animation-workspace-content{
    width: 19%;
    height: 100%;
    float: left;
}

#animation .animation-workspace img{
	border: 2px solid #AAA;
	border-radius: 10px;
    opacity: 0.9;
    display: inline-block;
    height: 65px;
    width: 65px;
}

#animation-myddleware-div div{
    height: 150px;
    width: 150px;
}

#animation-myddleware-div .animation-myddleware-logo{
    border: none;
    padding: none;
    height: 105px;
    margin: auto;
    margin-top: 50px;
}

#animation-myddleware-back-2 > .animation-myddleware-logo {
    float: left;
    width: 0px;
}

#animation-myddleware-back-3 > .animation-myddleware-logo {
    float: right;
    margin-right: 45px;
    width: 0px;
}

#animation .animation-puce > ul{
    width: 120px;
    height: 120px;
    margin: auto;
    margin-top: 10%;
    padding-top: 50px;
    text-align: center;
}

#animation select{
	padding: 5px;
    overflow: hidden;
    text-align: left;
    font-size: 1em;
    border-radius: 1px;
    -webkit-box-shadow: rgba(0,0,0,0.05) -1px -2px 2px;
    -moz-box-shadow:  rgba(0,0,0,0.05) 0px 2px 2px;

}

/* PROGRESS-BAR */

#animation .animation-bar-left {
    height: 20px;
    width: 80%;
    border-radius: 4px;
    background: #DDDBDE;
    border: 1px solid #AAA;
    overflow: hidden;
}
#animation .animation-bar-left .progress-bar {
	float: left;
	border-radius: 4px;
	min-height: 10px;
	border-right: 1px solid #AAA;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background-color: #b1b1b1;;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: none;
          transition: none;
    -moz-transition: none;
          transition: none;
}

#animation .animation-bar-right {
    height: 20px;
    width: 80%;
    border-radius: 4px;
    background: #DDDBDE;
    border: 1px solid #AAA;
    overflow: hidden;
}
#animation .animation-bar-right .progress-bar {
    float: right;
    border-radius: 4px;
    min-height: 10px;
    border-right: 1px solid #AAA;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background-color: #64afd9;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: none;
          transition: none;
    -moz-transition: none;
          transition: none;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

h2 { margin-top: 50px;}

/* ---------------------------------------------------------------------- */

@media screen and (max-width: 950px) {
    #animation > .animation-content{
        display: block;
    }

    #animation .animation-workspace{
        width: 80%;
        height: 100%;
        margin: auto;
        margin-top: 5%;
    }

    #animation .animation-content-left{
        position: absolute;
        top: 0;
        left: -80px;
        width: 80px;
        background: #CACACA;
    }

    #animation .animation-content-right{
        position: absolute;
        top: 0;
        right: -80px;
        width: 80px;
        background: #CACACA;
    }

    #animation .animation-content-left-toggle-btn{
        display: block;
        position: absolute;
        top: 0;
        left: 80px;
        width: 35px;
        height: 35px;
    }

    #animation .animation-content-right-toggle-btn {
        display: block;
        position: absolute;
        top: 0;
        right: 80px;
        width: 35px;
        height: 35px;
    }
}

@media screen and (max-width: 830px) {
    #animation .animation-bar-left {
        width: 50%;
        margin: 50px 5% 50px auto;
    }

    #animation .animation-bar-right {
        width: 50%;
        margin: 50px 5% 50px auto;
    }
}

/* ---------------------------------------------------------------------- */

#animation #template {
	display:block
}

#animation #choice, #animation #validation {
	margin: 50px;
}

#animation #template table tbody tr {
	background:white;
	color:black;
}

#animation #template tr:hover {
	cursor:pointer;
}

#animation ul.bar-left, #animation ul.bar-right {
	padding-top: 65px;
}

#animation .animation-solution-cible, #animation .animation-solution-source {
	width: 50px;
}

#animation #animation-cleft li, #animation #animation-cright li {
	border-bottom: 2px solid #ccc;	
	text-align: center;
}

#animation .animation-addbtn {
	font-size: 2.4em;
	color: #198BCA;
}

#animation .animation-addbtn:hover {
	color:#0F66A9;
}

#animation #nameverif .has-success .form-control {
    border-color: #198BCA;  
}

#animation #nameverif .form-control {
	border-radius: 4px;
}
#animation #nameverif .has-success .form-control:focus {
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #198BCA;
}

#animation #nameverif .has-success .form-control-feedback {
    color: #198BCA;
}

#animation #nameverif .has-normal .form-control {
	border-color: #66afe9;
}

#animation #animation-Connecteur-source, #animation #animation-Module-source {
    margin-left: 6px;
	color: #0D6AAF;		

}
#animation-Module-source {
    margin-left: -77px !important;
}

#animation #animation-Connecteur-cible, #animation-Module-cible {
    margin-left: 66px;
	color: #198BCA;
}

#animation #choice .btn-primary {
    background-color: #444446;
    border-color: black;
    color: white;	
}

#animation #choice .btn-default {
    color: #9D9EA0;	
}

#animation #choice .btn-default, #animation #choice .btn-primary {
    padding: 20px;
    width: 250px;
}

#animation .name_solution {
	letter-spacing:0.5em;
}

#animation #template th {
	background: #ECECEC;
	height: 20px;
	padding: 2px;
	text-align: center;	
}

#animation #template .info td {
	color: white;
	background: #444446;	
}

#animation #template .alert {
	width: 400px;
}

#animation #head {
	padding-bottom: 50px;
}

#animation .selected {
	color: #1667A8;
}

#animation .sub_module_selected:hover {
	cursor: pointer;
}

/* added to compensate the fact that jobscheduler.css is loaded when it shouldn't be */
#nameverif {
    margin: 0;
    padding: 0;
}

/* enlarge input size to maximum to be able to read placeholder */
#animation-Connecteur-source, #animation-Connecteur-cible {
    min-width: 250px;
    max-width: 300px;
}

#btn_module, #btn_template {
    width: 10vw;
}


/* On Documents list page, make the filter button bigger (same size as the delete filters btn) */
#form_click_filter {
	width: 120px;
}


.text-left {
    text-align: left !important;
}

#workflow_name_label, #rule_name_label {
    padding-top: 5px;
}

#workflow_name, #rule_name {
    height: 35px;
    min-height: 35px !important;
}

#rulesearchbarcontainer {
    display: flex;
    margin-left: 4.9vw !important;
}

#dropdown-rulegroup {
    padding: 0.20rem 1rem !important;
}
#dropdown-rulegroup-grey {
    padding: 0.20rem 1rem !important;
    color: #7777;
}
#dropdown-rulegroup:hover {
    padding: 0.20rem 1rem !important;
}
#dropdown-workflow {
    padding: 0.20rem 1rem !important;
}
#dropdown-workflow-grey  {
    padding: 0.20rem 1rem !important;
    color: #7777;
}
#dropdown-workflow:hover {
    padding: 0.20rem 1rem !important;
}
#dropdown-variables {
    padding: 0.20rem 1rem !important;
}
#dropdown-variables-grey {
    padding: 0.20rem 1rem !important;
    color: #7777;
}
#dropdown-variables:hover {
    padding: 0.20rem 1rem !important;
}

#cancelflux-grey, #reloadflux-grey, #unlockAllFlux-grey {
    color: #7777;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6; /* Optional: makes it look disabled */
}

#dropdown-cron {
}
#dropdown-cron-grey {
    color: #7777;
}

.hover-image {
    display: none; /* Initially hide the image */
    position: absolute; /* Position it as needed */
    top: 50px; /* Adjust based on your layout */
    left: 50px; /* Adjust based on your layout */
    z-index: 1000; /* Ensure it appears above other elements */
}

#filter-premium-container-grey {
    color: #7777;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6; /* Optional: makes it look disabled */
}


#area_confirm {
    margin-top: 35px;
}

.function-wizard-title {
    margin-left: 1em;
    font-weight: bold;
}

.function-wizard-select {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.function-wizard-title-function-select {
    font-weight: bold;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 0;
}

#function-select {
    height: auto;
    margin-bottom: 0;
    margin-left: -0.5rem;
    padding-right: .25rem;
    width: 14em;
}

#lookup-rule, #lookup-field {
    margin-left: 0.6rem;
}

#function-parameter {
    margin-left: -3.5rem;
    width: 14rem
}

#round-precision {
margin-left: -0.5rem;
}

#insert-function-parameter {
    margin-left: -3.5rem;
}

#round-precision-input {
    margin-left: -3rem;
}

#submit-lookup {
    margin-left: 0.5rem;
}

.sourceIdOfDocument,
.targetIdOfDocument {
    width: 19rem;
}

#relation_filter_field,
#relation_filter_another_field,
#relation_filter_textarea_field {
    border: 1px solid #ccc;
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
}

/* in the document filter view (list of documents), reduce the width of the global status filter CONTAINER */
.global-status-reduced-width {
    width: 20rem !important;
}

/* reduce the width of the filter-premium-container-reduced-width to 94rem to match the end of the source id filter */
.filter-premium-container-reduced-width {
    width: 100%;
    max-width: 1520px;
}

/* set the margin left of the button active of the workflow action list inside the workflow show page */
.workflow-action-list-inside-workflow-show {
    margin-left: -2.25em !important;
}

/* update password form in the account page */

/* selector is a label with the for update_password_plainPassword_first */
label[for="update_password_plainPassword_first"] {
    font-weight: 600 !important;
}

/* selector is a label with the for update_password_plainPassword_second */
label[for="update_password_plainPassword_second"] {
    font-weight: 600 !important;
}

/* selector is a label with the for update_password_oldPassword */
label[for="update_password_oldPassword"] {
    font-weight: 600 !important;
}