@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Roboto+Flex:opsz@8..144&display=swap');

.mwd-pg-i-i-container {
margin: 2em auto;
max-width: 640px;
padding: 2em 1em 1em 1em;
border-radius: 5px;
border: 1px solid #ffffff;
outline: 2px solid rgba(255, 255, 255, 0.60);
outline-offset: 6px;
background: rgba(255, 255, 255, 0.60);
}

.mwd-pg-i-i-insert-button {
width: 40px;
height: 40px;
font-size: 16px !important;
padding: 8px 4px 0 4px;
text-align: center;
border-radius: 100%;
border: none;
}


.mwd-quote-container {
margin-bottom: 0;
}

.mwd-quote-content {
font-family: 'Roboto Flex', sans-serif;
font-size: 1.6em;
line-height: 1em;
padding: 20px 20px 60px 20px;
background: rgba(186, 186, 186, 0.20); 
color: rgba(0, 0, 0, 0.50);
border-radius: 4px;
}

@media (max-width: 640px) {
.mwd-quote-content:after {
font-size: 10em;
right: 10px;
}
}

.mwd-pg-i-i-quote-buttons-container {
position: relative;
top: -30px;
text-align: center;
}

.quote-input-container {

}

#input_quote {
width: 100%;
border-color: rgba(0, 0, 0, 0.20); /* same as input-quote-info */
background: rgba(255, 255, 255, 0.40);
border: 1px solid #ECECEC;
padding: 2px;
border-radius: 4px;
}

.input-quote-info {
background-color: rgba(0, 0, 0, 0.20);
color: #ffffff;
text-align: center;
padding: 2px 10px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
font-size: 12px;
}

.wg-form-container {

}

.generated-password-container {
margin-top: 10px;
height: 20px;
}

.invalid-input-message {
position: relative;
background-color: rgba(255, 146, 148, 0.67);
color: rgba(255, 255, 255, 0.60);
padding: 4px 40px;
margin: 10px 0;
border-radius: 4px;
}

.invalid-input-message:before {
position: absolute;
font-family: 'FontAwesome';
font-size: 16px;
content: "\f0a6";
color: #FFFFFF;
left: 10px;
}

.invalid-input-message:after {
position: absolute;
font-family: 'FontAwesome';
font-size: 16px;
content: "\f071";
color: #FFFFFF;
right: 10px;
}

.submit-button-container {
padding-top: 20px;
text-align: center;
}

.password-result {
text-align: center;
font-family: 'Courier Prime', monospace;
font-size: 1.4em;
}

.mwd-wg-submit-button {
border-radius: 5px;
border: 1px solid #ffffff;
outline: 2px solid rgba(255, 255, 255, 0.60);
outline-offset: 6px;
background: rgba(255, 255, 255, 0.60);
}

.mwd-pg-button-container {
margin: 2em auto;
max-width: 640px;
}

.mwd-pg-button-main {

}

.password-output-field {
width: 100%;
font-size: 1.4em;
border: none;
background-color: transparent;
text-align: center;
}

.mwd-pg-button-sub {
text-align: right;
}

.mwd-pg-button-container .mwd-pg-button {
padding-top: 0;
padding-bottom: 0;
color: #FFFFFF;
}

.mwd-pg-button-container .mwd-pg-button-i-i {
position: relative;
width: 129px;;
font-size: 12px;
padding-left: 42px;
border: none;
margin-bottom: 10px;
text-align: left;
border-radius: 4px;
color: rgba(255, 255, 255, 0.9);
}

.mwd-pg-button-container .mwd-pg-button-i-i:before {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
top: 0;
left: 0;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.6);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}


.mwd-pg-button-container .mwd-pg-button-i-iii {
position: relative;
width: 129px;;
font-size: 12px;
padding-right: 32px;
border: none;
margin-bottom: 10px;
text-align: left;
border-radius: 4px;
}

.mwd-pg-button-container .mwd-pg-button-i-iii:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
top: 0;
right: 0;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.2);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.mwd-pg-button-i-i-refresh:before {
font-family: 'FontAwesome';
content: "\f2f1";
}

.mwd-pg-button-i-i-copy:after {
font-family: 'FontAwesome';
content: "\f0c5";
}


.mwd-pg-button-container .mwd-pg-button-label {
display: inline-block;
position: relative;
left: -14px;
padding: 8px 16px;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px 0 0 4px;
}

.mwd-pg-button-container .fa, .fa-solid {
color: #FFFFFF;
}

/* copy to clipboard button */

.mwd-pg-button-i-i-copied {
position: relative;
width: 129px;;
font-size: 12px;
padding-right: 32px;
border: none;
margin-bottom: 10px;
text-align: left;
border-radius: 4px;
background: rgba(69, 104, 86, 0.9) !important;
color: rgba(255, 255, 255, 0.9);
}

.mwd-pg-button-i-i-copied:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
content: "\f00c";
top: 0;
right: 0;
padding: 8px 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;	
}