/*
* CAFPI PLUGWS CSS
* Last update : 22/09/2022
* by franck.netillard@plug-all.com | plug@all
*/

.cafpi-plug-main { width: 100%; padding: 0.5em; min-width: 320px; box-sizing: border-box; line-height: 1; text-align: left; display: none;}
.cafpi-plug-main *, .cafpi-plug-main *::before, .cafpi-plug-main *::after { box-sizing: border-box;}
.cafpi-plug-main svg:not(:root) { overflow: hidden;}
.cafpi-plug-main button { border-radius: 0;}
.cafpi-plug-main button:focus { outline: 0;}
.cafpi-plug-main input { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit;}
.cafpi-plug-main button, .cafpi-plug-main input { overflow: visible;}
.cafpi-plug-main button { text-transform: none; -webkit-appearance: button;}
.cafpi-plug-main button::-moz-focus-inner { padding: 0; border-style: none;}
.cafpi-plug-main .clearfix::after { display: block; clear: both; content: "";}

.cafpi-plug-main > .cafpi-plug-wrapper { position: relative; width: 100%; margin-bottom: 0.5em; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 { width: 58%; height: 100%; padding: 1.5em 0; float: left;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-legend { text-align: center;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-params { margin-bottom: 1em; text-align: center;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-field { width: 7em; padding: 0.2em; -webkit-border-radius: 5px; border-radius: 5px; border: 0; text-align: center; outline: 0;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-unit { padding: 0 8px;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-year { width: 3.5em; text-align: left; display: inline-block;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector { position: relative; width: 300px; height: 30px; margin: 0 auto;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-axis { position: absolute; left: 0; top: 13px; width: 100%; height: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-unit { position: absolute; top: 10px; width: 1px; height: 10px;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-unit-1 { left: 20%;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-unit-2 { left: 40%;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-unit-3 { left: 60%;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-unit-4 { left: 80%;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-selected { position: absolute; left: 0; top: 13px; width: 60%; height: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-cursor { position: absolute; left: calc(60% - 15px); top: 0; width: 30px; height: 30px; cursor: pointer;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-selector-cursor > div { margin: 5px; width: 20px; height: 20px; -webkit-border-radius: 50%; border-radius: 50%;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-cafpi { margin: 1.5em auto 0 auto; border-collapse: collapse;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-cafpi td:first-child { text-align: right; vertical-align: middle;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-cafpi td:last-child { text-align: left; vertical-align: middle;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-svg { width: auto; height: 1.5em; display: inline-block;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-1 .cafpi-plug-svg > svg { width: 100%; height: 100%; margin-left: 0.5em; display: block;}

.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-2 { position: relative; width: 42%; height: 100%; padding: 1.5em 0; float: right;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-2 > svg { position: absolute; left: -11px; top: calc(50% - 11px); display: block;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-2 .cafpi-plug-taux { margin-bottom: 1em; text-align: center;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-2 .cafpi-plug-label {}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-2 .cafpi-plug-percent {}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-2 .cafpi-plug-monthly { margin-bottom: 0.5em; text-align: center;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-2 .cafpi-plug-out { margin-bottom: 1.5em; text-align: center; font-size: 12px;}
.cafpi-plug-main > .cafpi-plug-wrapper > .cafpi-plug-panel-2 .cafpi-plug-button { width: 18em; height: 4em; line-height: 4em; margin: 0 auto; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer; -webkit-border-radius: 5px; border-radius: 5px; border: 0; display: block;}

.cafpi-plug-main > .cafpi-plug-mentions { font-size: 10px; line-height: 1.3em; text-align: justify;}