@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");.fresco-panel .input-container,.fresco-panel .textarea-container{display:flex;flex-direction:column}.fresco-panel .input-container .input-control-container,.fresco-panel .textarea-container .input-control-container{display:flex;position:relative}.fresco-panel .input-container .input-control-container .saved-icon-container,.fresco-panel .textarea-container .input-control-container .saved-icon-container{position:absolute;height:100%;width:3em;display:flex;justify-content:center;align-items:center;right:0;border:1px solid transparent}.fresco-panel .input-container .input-control-container .saved-icon-container svg,.fresco-panel .textarea-container .input-control-container .saved-icon-container svg{color:#63d263;width:1.25em;height:1.25em}.fresco-panel .input-container .input-control-container .btn,.fresco-panel .textarea-container .input-control-container .btn{width:3em;border:none;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;font-weight:700}.fresco-panel .input-container .input-control-container .btn[disabled],.fresco-panel .textarea-container .input-control-container .btn[disabled]{background:#e0e0e0;cursor:not-allowed}.fresco-panel .input-container .input-control-container .btn[disabled] i,.fresco-panel .textarea-container .input-control-container .btn[disabled] i{border-color:#9e9e9e}.fresco-panel .input-container .input-control-container .btn i,.fresco-panel .textarea-container .input-control-container .btn i{padding:3px}.fresco-panel .input-container .input,.fresco-panel .textarea-container .input{font-family:Open Sans,Helvetica,sans-serif;font-size:14px;padding:1em;border:1px solid #dbdbdb;border-radius:4px;box-shadow:inset 0 1px 2px rgba(10,10,10,.1);flex:1}.fresco-panel .input-container .input[disabled],.fresco-panel .textarea-container .input[disabled]{cursor:not-allowed;resize:none;background:#eee}.fresco-panel .input-container .input.has-action,.fresco-panel .textarea-container .input.has-action{border-radius:4px 0 0 4px}.fresco-panel .input-container .input:focus,.fresco-panel .textarea-container .input:focus{border-color:#dbdbdb}.fresco-panel .input-container .input.saved,.fresco-panel .textarea-container .input.saved{padding-right:3em}.fresco-panel .input-container .input.failed,.fresco-panel .textarea-container .input.failed{border-color:#ff1744}.fresco-panel .input-container .input.failed:focus,.fresco-panel .textarea-container .input.failed:focus{border-color:#dbdbdb}.fresco-panel .input-container .textarea,.fresco-panel .textarea-container .textarea{font-family:Open Sans,Helvetica,sans-serif;resize:vertical;overflow:auto;flex:none}.fresco-panel .input-container ::-moz-placeholder,.fresco-panel .textarea-container ::-moz-placeholder{color:#212529;opacity:.7}.fresco-panel .input-container :-ms-input-placeholder,.fresco-panel .textarea-container :-ms-input-placeholder{color:#212529;opacity:.7}.fresco-panel .input-container ::placeholder,.fresco-panel .textarea-container ::placeholder{color:#212529;opacity:.7}.fresco-panel .btn{width:100%;cursor:pointer;padding:1.1em;border-radius:4px;border:none;font-family:Open Sans,Helvetica,sans-serif;font-weight:600;font-size:14px}.fresco-panel .btn.input-button{padding:0}.fresco-panel .btn.input-button svg{height:1.25em;width:1.25em}.fresco-panel .btn.fill[disabled]{background:#eee;color:#ccc;cursor:not-allowed}.fresco-panel .btn.fill[disabled]:hover{background:#eee;color:#ccc}.fresco-panel .btn.outline{background:#fff}.fresco-panel .btn.outline[disabled]{border-color:#dbdbdb;color:#ccc;cursor:not-allowed}.fresco-panel .btn.outline[disabled]:hover{background:#fff;color:#ccc}.fresco-panel .btn.text{background:transparent}.fresco-panel .btn.text:hover{background:#f5f5f5}.fresco-panel .btn.text[disabled]{color:#ccc;cursor:not-allowed}.fresco-panel .btn.text[disabled]:hover{background:transparent}.fresco-panel .list-container{margin-left:-16px;margin-right:-16px}.fresco-panel .list-item{padding:1em 18px;display:flex;align-items:center}.fresco-panel .list-item:focus:not(:focus-visible){outline:none}.fresco-panel .list-item:not(:last-child){border-bottom:1px solid #e8e8e8}.fresco-panel .list-item.has-action{cursor:pointer}.fresco-panel .list-item.has-action:hover{background:#f5f5f5}.fresco-panel .list-item.has-action .list-item__subtitle{color:#212529;opacity:.7}.fresco-panel .list-item.has-action.disabled{color:#212529;opacity:.7;cursor:not-allowed}.fresco-panel .list-item.has-action.disabled:hover{background:#fff}.fresco-panel .list-item.has-action.disabled .list-item__action{color:#212529}.fresco-panel .list-item__subtitle{opacity:.5}.fresco-panel .list-item__action{display:flex;justify-content:center;align-items:center;margin-left:6px}.fresco-panel .list-item__action svg{height:1.25em;width:1.25em}.fresco-panel .list-item__image{width:100%;height:100%}.fresco-panel .list-item-right{display:flex;flex:1;align-items:center;justify-content:space-between}.fresco-panel .list-item__text-container__subtitle{opacity:.6;margin-top:.25em}.fresco-panel .list-item__image-container{margin-right:16px}.fresco-panel .ss-container{display:flex;flex-direction:column}.fresco-panel .ss-container.emoji .ss__option{font-size:32px;border:none;padding:.5em 0}.fresco-panel .ss-container.emoji .ss__option:first-child,.fresco-panel .ss-container.emoji .ss__option:last-child{border-radius:0}.fresco-panel .ss-container.disabled .ss__option{background:#eee;color:#ccc;cursor:not-allowed;border:1px solid #dbdbdb}.fresco-panel .ss-container.disabled .ss__option:not(:first-child){border-left-color:#dbdbdb}.fresco-panel .ss-container.disabled .ss__option:not(:last-child){border-right-color:#dbdbdb}.fresco-panel .ss-container.saved.disabled .ss__option{cursor:default}.fresco-panel .ss-container.failed .label{color:#ff1744}.fresco-panel .ss-container .ss__option{flex:1;text-align:center;padding:.75em 0;margin:auto;background:#fff;border:1px solid #dbdbdb;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.fresco-panel .ss-container .ss__option:first-child{border-radius:4px 0 0 4px}.fresco-panel .ss-container .ss__option:last-child{border-radius:0 4px 4px 0}.fresco-panel .ss-container .ss__option:hover{background:#f5f5f5}.fresco-panel .ss-container .ss__option.disabled{background:#eee;color:#ccc;cursor:not-allowed}.fresco-panel .ss-container .ss__option.disabled:hover{background:#eee}.fresco-panel .ss-container .ss__option:focus:not(:focus-visible){outline:none}.fresco-panel .ss-container .ss__option:not(:first-child){border-left:none}.fresco-panel .ss-options-container{display:flex}.fresco-panel .dropdown-container{display:flex;flex-direction:column;position:relative}.fresco-panel .dropdown-container.disabled .dropdown__button{background:#eee;border:1px solid #dbdbdb;color:#ccc;cursor:not-allowed}.fresco-panel .dropdown-container.disabled .dropdown__button:hover{background:#eee}.fresco-panel .dropdown-container.disabled .dropdown__button .arrow{border-color:#ccc}.fresco-panel .dropdown-container.saved.disabled .dropdown__button{cursor:default;color:#757575}.fresco-panel .dropdown-container.failed .label{color:#ff1744}.fresco-panel .dropdown-container .dropdown__button{cursor:pointer;border:1px solid #dbdbdb;border-radius:4px;box-shadow:inset 0 1px 2px rgba(10,10,10,.1);font-size:.85em;font-weight:700;line-height:1.2;display:flex;justify-content:space-between;align-items:center;word-break:break-all;position:relative;padding:1.1em 3.5em 1.1em 1.1em;outline-offset:-2px}.fresco-panel .dropdown-container .dropdown__button:hover{background:#f5f5f5}.fresco-panel .dropdown-container .dropdown__button.selected{outline-style:auto;outline-width:5px}.fresco-panel .dropdown-container .dropdown__button.selected:hover{background:#fff}.fresco-panel .dropdown-container .dropdown__button i{display:flex;justify-content:center;align-items:center;height:100%;position:absolute;width:3em;font-size:13px;right:0;top:0;border:1px solid transparent}.fresco-panel .dropdown-container .dropdown__button svg{height:1em;width:1em}.fresco-panel .dropdown-container .dropdown__button .saved-icon svg{width:1.25em;height:1.25em;color:#63d263}.fresco-panel .dropdown-container .dropdown__options{position:absolute;background:#fff;border:1px solid #dbdbdb;border-radius:4px;top:100%;width:100%;box-sizing:border-box;z-index:1;box-shadow:0 2px 8px 0 rgba(0,0,0,.1);max-height:10em;overflow-y:auto;overflow-x:hidden}.fresco-panel .dropdown-container .dropdown__options--hidden{display:none}.fresco-panel .dropdown-container .dropdown__options-opt{padding:.75em 1.5em;cursor:pointer;word-break:break-word}.fresco-panel .dropdown-container .dropdown__options-opt:focus:not(:focus-visible){outline:none}.fresco-panel .dropdown-container .dropdown__options-opt:hover{background:#f5f5f5}.fresco-panel .text.right{text-align:right}.fresco-panel .text.left{text-align:left}.fresco-panel .text.center{text-align:center}.fresco-panel .text h1{font-size:1.4em;font-weight:500;margin:0}.fresco-panel .text h2{font-size:16px;font-weight:500;margin:0}.fresco-panel .text h3{font-size:1.1em;font-weight:500;margin:0}.fresco-panel .text.muted{opacity:.7}.fresco-panel .text.header{font-size:16px;font-weight:600;margin:0;color:#212529}.fresco-panel .text.error{color:#ff1744}.fresco-panel .table .table-row{display:flex}.fresco-panel .table .table-row .row-key{flex:1;max-width:30%;word-break:break-word;word-wrap:break-word;padding:.5em 1em .5em 0;font-weight:700;color:#616161}.fresco-panel .table .table-row .row-value{flex:1;word-break:break-all;padding:.5em 0}.fresco-panel .image-container.left{text-align:left}.fresco-panel .image-container.center{text-align:center}.fresco-panel .image-container.right{text-align:right}.fresco-panel .image-container .image{max-width:100%;height:auto}.fresco-panel .image-container .image.rounded{border-radius:50em}.fresco-panel .spacer-container,.fresco-panel .spacer-container:not(:last-child){margin-bottom:0!important}.fresco-panel .spacer.xs{height:.5em}.fresco-panel .spacer.s{height:1em}.fresco-panel .spacer.m{height:1.5em}.fresco-panel .spacer.l{height:2em}.fresco-panel .spacer.xl{height:3em}.fresco-panel .divider{position:relative;margin-left:-16px;margin-right:-16px}.fresco-panel .divider:after{content:"";position:absolute;left:0;right:0;border-bottom:1px solid #e8e8e8}.fresco-panel{border-radius:6px;padding:1.25em;margin-bottom:1.5em;-webkit-animation:fadeIn .6s ease-in-out;animation:fadeIn .6s ease-in-out;line-height:1.5em;position:relative;opacity:1;transition:opacity .3s;color:#212529;font-size:14px;font-family:Open Sans,Helvetica,sans-serif}.fresco-panel *{transition:.2s}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fresco-panel:not(.embedded){background:#fff;box-shadow:0 4px 15px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.1),inset 0 1px 0 0 rgba(0,0,0,.1)}.fresco-panel.embedded{box-shadow:none;margin:0;padding:0}.fresco-panel.readonly{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fresco-panel .component-container:not(:last-child){margin-bottom:8px}.fresco-panel .element-container.loading{opacity:.25;transition:.3s}.fresco-panel .panel-loading-container{position:absolute;height:100%;width:100%;top:0;left:0}.fresco-panel .panel-loading-container .spinner{position:absolute;top:0;bottom:0;left:0;right:0;width:50%;height:30%;margin:auto;display:flex;justify-content:center;align-items:center}.fresco-panel .panel-loading-container .spinner svg{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fresco-panel .label{font-weight:500;margin-top:5px;margin-bottom:5px}.fresco-panel .label:empty{margin:0}.fresco-panel .label.failed{color:#ff1744}.fresco-panel em{font-weight:700;font-style:normal}.fresco-panel i.arrow{border-style:solid;border-width:0 2px 2px 0;display:inline-block;padding:2px;width:0;height:0}.fresco-panel i.arrow.right{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.fresco-panel i.arrow.left{transform:rotate(135deg);-webkit-transform:rotate(135deg)}.fresco-panel i.arrow.up{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}.fresco-panel i.arrow.down{transform:rotate(45deg);-webkit-transform:rotate(45deg)}
html,
body,
.container {
	height: 100%;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-size: 14px;
	overflow: auto;
	margin: 0;
	background-color: #F2F2F2;
}

.app-container {
	overflow: auto;
	display: flex;
	justify-content: center;
}

.app {
	width: 380px;
	margin: 20px;
}