/* Css vars definition */
:root {
	--master-keyring-color: #da4026;
	--keyring-color: #2472b8;
	--user-color: #7fba42;
}

/* Button copy clipboard */
.webpassword-btn, .webpassword-copy-btn{
    cursor: pointer;
}

.webpassword-btn > .fa, .webpassword-copy-btn > .fa{
    opacity: 0;
    color: #666;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.webpassword-btn:hover > .fa, .webpassword-copy-btn:hover > .fa{
    opacity: 1;
}


.webpassword-btn > .fa.fa-check, .webpassword-copy-btn > .fa.fa-check{
    color: green;
}
.webpassword-btn > .fa.fa-exclamation-triangle, .webpassword-copy-btn > .fa.fa-exclamation-triangle{
    color: red;
}

.webpassword-picto{
    color: #6e6768;
    vertical-align: middle;
    max-height: 16px;
    max-width: 16px;
}

input.like-password-field{
    text-security:disc;
    -webkit-text-security:disc;
}

/* The Modal (background) */
.password-modal-layer {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* Black w/ opacity */

}

.password-modal-layer.opened {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    background-image: url("../img/combination-lock.svg");
    background-position: center ; /* for compatibility */
    background-position: 50% calc(50% - 200px) ;
    background-repeat: no-repeat;
    background-size: 200px 200px;
}


/* Modal Content/Box */
.password-modal-box {
    background-color: #fff;/*#675e58;*/
    margin: 0 auto; /* 15% from the top and centered */
    min-width: 25%;

    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
}
.password-modal-layer.opened .password-modal-box {

    -webkit-animation-name: passwordModalFadeInDown;
    animation-name: passwordModalFadeInDown;

    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* Modal title */
.password-modal-title{
    display: block;
    color: #666;
    font-size: 1.3em;
}


/* Modal Content/Box */
.password-modal-content {
    padding: 20px;
    position: relative;
}


/* The Close Button */
.password-modal-box .close {
    color: #666;
    position: absolute;
    right: 5px;
    top:-5px;
    font-size: 20px;
    font-weight: bold;
}

.password-modal-box .close:hover,
.password-modal-box .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* FORM STYLE */

.password-modal-box .input-addon-field:not(:last-child) {
    border-right: 0;
}
.password-modal-box .input-addon-field:not(:first-child) {
    border-left: 0;
}
.password-modal-box .input-addon-field, .password-modal-box .input-addon-item {
    border: 1px solid rgba(147,128,108,.25);
    padding: .5em .75em;
    margin: 0;
}

.password-modal-box .input-addon {
    display: flex;
    justify-items: stretch;
}

.password-modal-box .input-addon-field {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.password-modal-box .input-addon-item {
    /* item styles */
}


/* Modal animation */
@-webkit-keyframes passwordModalFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes passwordModalFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/* Hook */
div.tabBar .fichecenter table.border>tbody>tr.webpassword-quick-access-row>td.webpassword-quick-access-container{
    border: none !important;
}

.master-keyring-color {
	color: var(--master-keyring-color);
}
.keyring-color {
	color: var(--keyring-color);
}
.user-color {
	color: var(--user-color);
}


/*
* PASSWORD METER
*/
meter.webpassword {
	/* Reset the default appearance */
	/*-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;*/

	margin: 0 auto 1em;
	width: 100%;
	height: .5em;

	/* Applicable only to Firefox */
	background: none;
	background-color: rgba(0,0,0,0.1);
}

meter.webpassword ::-webkit-meter-bar {
	background: none;
	background-color: rgba(0,0,0,0.1);
}

meter.webpassword [value="1"]::-webkit-meter-optimum-value { background: red; }
meter.webpassword [value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter.webpassword [value="3"]::-webkit-meter-optimum-value { background: orange; }
meter.webpassword [value="4"]::-webkit-meter-optimum-value { background: green; }

meter.webpassword [value="1"]::-moz-meter-bar { background: red; }
meter.webpassword [value="2"]::-moz-meter-bar { background: yellow; }
meter.webpassword [value="3"]::-moz-meter-bar { background: orange; }
meter.webpassword [value="4"]::-moz-meter-bar { background: green; }

.webpassword-feedback {
	color: #9ab;
	font-size: 90%;
	padding: 0 .25em;
	font-family: Courgette, cursive;
	margin-top: 1em;
}


/*
* SEARCH
*/

.webpassword-global-search-container{
	min-width: 70%;
	margin: 2em 0 1em 0;
	text-align: center;
}

.webpassword-global-search-input {
	width: 100%;
	padding: 10px 35px 10px 20px;

	background-color: transparent;
	font-size: 14px;
	line-height: 16px;
	box-sizing: border-box;


	color: #575756;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: 95% center;
	background-position: calc(100% - 16px) center;
	border-radius: 50px;
	border: 1px solid #c4c4c2 !important;
	transition: all 250ms ease-in-out;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	font-style: oblique;
	max-width: 600px;

}

.webpassword-global-search-input::placeholder {
	color: color(#575756 a(0.8));
	letter-spacing: 1.5px;
}

/*
 * Form toggle display
 */

.form-toggle-target[data-display="0"]{
	display: none;
}

.form-toggle-target[data-display="1"] .select2-container{
	min-width: 200px; /* fix for micro with */
}