.msp-plugin{font-family:"Helvetica Neue","Segoe UI",Helvetica,"Source Sans Pro",Arial,sans-serif;font-size:14px;line-height:1.42857143;position:absolute;left:0;top:0;right:0;bottom:0;/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */}.msp-plugin *{box-sizing:border-box}.msp-plugin [hidden],.msp-plugin template{display:none}.msp-plugin a{background-color:rgba(0,0,0,0)}.msp-plugin a:active,.msp-plugin a:hover{outline:0}.msp-plugin abbr[title]{border-bottom:1px dotted}.msp-plugin b,.msp-plugin strong{font-weight:bold}.msp-plugin small{font-size:80%}.msp-plugin img{border:0}.msp-plugin svg:not(:root){overflow:hidden}.msp-plugin button,.msp-plugin input,.msp-plugin optgroup,.msp-plugin select,.msp-plugin textarea{color:inherit;font:inherit;margin:0}.msp-plugin button{overflow:visible}.msp-plugin button,.msp-plugin select{text-transform:none}.msp-plugin button,.msp-plugin html input[type=button],.msp-plugin input[type=reset],.msp-plugin input[type=submit]{-webkit-appearance:button;cursor:pointer}.msp-plugin button[disabled],.msp-plugin html input[disabled]{cursor:default}.msp-plugin button::-moz-focus-inner,.msp-plugin input::-moz-focus-inner{border:0;padding:0}.msp-plugin input{line-height:normal}.msp-plugin input[type=checkbox],.msp-plugin input[type=radio]{box-sizing:border-box;padding:0}.msp-plugin input[type=number]::-webkit-inner-spin-button,.msp-plugin input[type=number]::-webkit-outer-spin-button{height:auto}.msp-plugin textarea{overflow:auto}.msp-plugin .msp-layout-expanded,.msp-plugin .msp-layout-standard{left:0;right:0;top:0;bottom:0}.msp-plugin .msp-layout-standard{border:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-region{overflow:hidden}.msp-plugin .msp-layout-static,.msp-plugin .msp-layout-scrollable{position:absolute}.msp-plugin .msp-scrollable{overflow-y:auto}.msp-plugin .msp-scrollable-container{position:absolute;left:0;right:0;top:0;bottom:0;overflow-y:auto}.msp-plugin .msp-layout-static{overflow:hidden}.msp-plugin .msp-layout-top .msp-layout-static,.msp-plugin .msp-layout-main .msp-layout-static,.msp-plugin .msp-layout-bottom .msp-layout-static{left:0;right:0;top:0;bottom:0}.msp-plugin .msp-layout-right .msp-layout-static{left:0;right:0;top:0;bottom:0}.msp-plugin .msp-layout-right .msp-layout-scrollable{left:0;right:0;top:43px;bottom:0}.msp-plugin .msp-layout-left .msp-layout-static{left:0;right:0;bottom:0;top:0}.msp-plugin .msp-layout-standard-outside{position:absolute}.msp-plugin .msp-layout-standard-outside .msp-layout-main{position:absolute;left:0;right:0;bottom:0;top:0}.msp-plugin .msp-layout-standard-outside .msp-layout-top{position:absolute;right:0;height:97px;top:-97px;width:50%;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-outside .msp-layout-bottom{position:absolute;left:0;right:0;height:97px;top:-97px;width:50%;border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-outside .msp-layout-right{position:absolute;width:50%;right:0;bottom:-295px;height:295px;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-outside .msp-layout-left{position:absolute;width:50%;left:0;bottom:0;bottom:-295px;height:295px;border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-right .msp-layout-left{width:100%}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-left .msp-layout-right{width:100%;border-left:none}.msp-plugin .msp-layout-standard-outside .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-outside .msp-layout-collapse-left .msp-layout-right{left:32px;width:auto}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-top .msp-layout-bottom{width:100%;border-left:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-bottom .msp-layout-top{width:100%;border-left:none}.msp-plugin .msp-layout-standard-landscape{position:absolute}.msp-plugin .msp-layout-standard-landscape .msp-layout-main{position:absolute;left:330px;right:300px;bottom:70px;top:100px}.msp-plugin .msp-layout-standard-landscape .msp-layout-top{position:absolute;left:330px;right:300px;height:100px;top:0;border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-landscape .msp-layout-bottom{position:absolute;left:330px;right:300px;height:70px;bottom:0;border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-landscape .msp-layout-right{position:absolute;width:300px;right:0;bottom:0;top:0;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-landscape .msp-layout-left{position:absolute;width:330px;left:0;bottom:0;top:0;border-right:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-right .msp-layout-main,.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-right .msp-layout-top,.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-right .msp-layout-bottom{right:0}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-left .msp-layout-main,.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-left .msp-layout-top,.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-left .msp-layout-bottom{left:0}.msp-plugin .msp-layout-standard-landscape .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-landscape .msp-layout-collapse-left .msp-layout-main,.msp-plugin .msp-layout-standard-landscape .msp-layout-collapse-left .msp-layout-top,.msp-plugin .msp-layout-standard-landscape .msp-layout-collapse-left .msp-layout-bottom{left:32px}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-bottom .msp-layout-main{bottom:0}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-top .msp-layout-main{top:0}.msp-plugin .msp-layout-standard-portrait{position:absolute}.msp-plugin .msp-layout-standard-portrait .msp-layout-main{position:absolute;left:0;right:0;bottom:361px;top:97px}.msp-plugin .msp-layout-standard-portrait .msp-layout-top{position:absolute;right:0;height:97px;top:0;width:50%;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-portrait .msp-layout-bottom{position:absolute;left:0;right:0;height:97px;width:50%;border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-portrait .msp-layout-right{position:absolute;width:50%;right:0;bottom:0;height:361px;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-portrait .msp-layout-left{position:absolute;width:50%;left:0;bottom:0;height:361px;border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-right .msp-layout-left{width:100%}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-left .msp-layout-right{width:100%;border-left:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-right.msp-layout-hide-left .msp-layout-main{bottom:0}.msp-plugin .msp-layout-standard-portrait .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-portrait .msp-layout-collapse-left .msp-layout-right{left:32px;width:auto}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-top .msp-layout-bottom{width:100%;border-left:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-bottom .msp-layout-top{width:100%;border-left:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-top.msp-layout-hide-bottom .msp-layout-main{top:0}.msp-plugin .msp-layout-standard-reactive{position:absolute}@media(orientation: landscape),(min-width: 1000px){.msp-plugin .msp-layout-standard-reactive .msp-layout-main{position:absolute;left:330px;right:300px;bottom:70px;top:100px}.msp-plugin .msp-layout-standard-reactive .msp-layout-top{position:absolute;left:330px;right:300px;height:100px;top:0;border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-reactive .msp-layout-bottom{position:absolute;left:330px;right:300px;height:70px;bottom:0;border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-reactive .msp-layout-right{position:absolute;width:300px;right:0;bottom:0;top:0;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-reactive .msp-layout-left{position:absolute;width:330px;left:0;bottom:0;top:0;border-right:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-main,.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-top,.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-bottom{right:0}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-main,.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-top,.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-bottom{left:0}.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-main,.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-top,.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-bottom{left:32px}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-bottom .msp-layout-main{bottom:0}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top .msp-layout-main{top:0}}@media(orientation: portrait)and (max-width: 1000px){.msp-plugin .msp-layout-standard-reactive .msp-layout-main{position:absolute;left:0;right:0;bottom:361px;top:97px}.msp-plugin .msp-layout-standard-reactive .msp-layout-top{position:absolute;right:0;height:97px;top:0;width:50%;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-reactive .msp-layout-bottom{position:absolute;left:0;right:0;height:97px;width:50%;border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-reactive .msp-layout-right{position:absolute;width:50%;right:0;bottom:0;height:361px;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-reactive .msp-layout-left{position:absolute;width:50%;left:0;bottom:0;height:361px;border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-left{width:100%}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-right{width:100%;border-left:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right.msp-layout-hide-left .msp-layout-main{bottom:0}.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-right{left:32px;width:auto}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top .msp-layout-bottom{width:100%;border-left:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-bottom .msp-layout-top{width:100%;border-left:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top.msp-layout-hide-bottom .msp-layout-main{top:0}}.msp-plugin .msp-layout-expanded{position:fixed}@media(orientation: landscape){.msp-plugin .msp-layout-expanded .msp-layout-main{position:absolute;left:330px;right:300px;bottom:70px;top:100px}.msp-plugin .msp-layout-expanded .msp-layout-top{position:absolute;left:330px;right:300px;height:100px;top:0;border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-expanded .msp-layout-bottom{position:absolute;left:330px;right:300px;height:70px;bottom:0;border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-expanded .msp-layout-right{position:absolute;width:300px;right:0;bottom:0;top:0;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-expanded .msp-layout-left{position:absolute;width:330px;left:0;bottom:0;top:0;border-right:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-main,.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-top,.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-bottom{right:0}.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-main,.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-top,.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-bottom{left:0}.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-main,.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-top,.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-bottom{left:32px}.msp-plugin .msp-layout-expanded .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-bottom .msp-layout-main{bottom:0}.msp-plugin .msp-layout-expanded .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-top .msp-layout-main{top:0}}@media(orientation: portrait){.msp-plugin .msp-layout-expanded .msp-layout-main{position:absolute;left:0;right:0;bottom:361px;top:97px}.msp-plugin .msp-layout-expanded .msp-layout-top{position:absolute;right:0;height:97px;top:0;width:50%;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-expanded .msp-layout-bottom{position:absolute;left:0;right:0;height:97px;width:50%;border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-expanded .msp-layout-right{position:absolute;width:50%;right:0;bottom:0;height:361px;border-left:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-expanded .msp-layout-left{position:absolute;width:50%;left:0;bottom:0;height:361px;border-top:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-left{width:100%}.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-right{width:100%;border-left:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-right.msp-layout-hide-left .msp-layout-main{bottom:0}.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-right{left:32px;width:auto}.msp-plugin .msp-layout-expanded .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-top .msp-layout-bottom{width:100%;border-left:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-bottom .msp-layout-top{width:100%;border-left:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-top.msp-layout-hide-bottom .msp-layout-main{top:0}}.msp-plugin ::-webkit-scrollbar{width:10px;height:10px}.msp-plugin ::-webkit-scrollbar-track{border-radius:0;background-color:hsl(42.8571428571,17.0731707317%,89.4607843137%)}.msp-plugin ::-webkit-scrollbar-thumb{border-radius:10px;background-color:hsl(42.8571428571,17.0731707317%,69.4607843137%);border:solid 1px rgba(0,0,0,0);background-clip:content-box}.msp-plugin .msp-form-control,.msp-plugin .msp-control-row select,.msp-plugin .msp-control-row button,.msp-plugin .msp-control-row input[type=text],.msp-plugin .msp-btn{display:block;width:100%;background:hsl(42.8571428571,17.0731707317%,94.4607843137%);border:none;padding:0 10px;line-height:30px;height:32px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-shadow:none;box-shadow:none;background-image:none}.msp-plugin .msp-form-control::-moz-placeholder,.msp-plugin .msp-control-row select::-moz-placeholder,.msp-plugin .msp-control-row button::-moz-placeholder,.msp-plugin .msp-control-row input[type=text]::-moz-placeholder,.msp-plugin .msp-btn::-moz-placeholder{color:hsl(36,24.3902439024%,49.0784313725%);opacity:1}.msp-plugin .msp-form-control:-ms-input-placeholder,.msp-plugin .msp-control-row select:-ms-input-placeholder,.msp-plugin .msp-control-row button:-ms-input-placeholder,.msp-plugin .msp-control-row input[type=text]:-ms-input-placeholder,.msp-plugin .msp-btn:-ms-input-placeholder{color:hsl(36,24.3902439024%,49.0784313725%)}.msp-plugin .msp-form-control::-webkit-input-placeholder,.msp-plugin .msp-control-row select::-webkit-input-placeholder,.msp-plugin .msp-control-row button::-webkit-input-placeholder,.msp-plugin .msp-control-row input[type=text]::-webkit-input-placeholder,.msp-plugin .msp-btn::-webkit-input-placeholder{color:hsl(36,24.3902439024%,49.0784313725%)}.msp-plugin .msp-form-control:hover,.msp-plugin .msp-control-row select:hover,.msp-plugin .msp-control-row button:hover,.msp-plugin .msp-control-row input[type=text]:hover,.msp-plugin .msp-btn:hover{color:#ae5d04;background-color:hsl(42.8571428571,17.0731707317%,89.4607843137%);border:none;outline-offset:-1px !important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561) !important}.msp-plugin .msp-form-control:active,.msp-plugin .msp-control-row select:active,.msp-plugin .msp-control-row button:active,.msp-plugin .msp-control-row input[type=text]:active,.msp-plugin .msp-btn:active,.msp-plugin .msp-form-control:focus,.msp-plugin .msp-control-row select:focus,.msp-plugin .msp-control-row button:focus,.msp-plugin .msp-control-row input[type=text]:focus,.msp-plugin .msp-btn:focus{color:#332b1f;background-color:hsl(42.8571428571,17.0731707317%,94.4607843137%);border:none;outline-offset:0;outline:none}.msp-plugin .msp-form-control[disabled],.msp-plugin .msp-control-row select[disabled],.msp-plugin .msp-control-row button[disabled],.msp-plugin .msp-control-row input[disabled][type=text],.msp-plugin [disabled].msp-btn,.msp-plugin .msp-form-control[readonly],.msp-plugin .msp-control-row select[readonly],.msp-plugin .msp-control-row button[readonly],.msp-plugin .msp-control-row input[readonly][type=text],.msp-plugin [readonly].msp-btn,fieldset[disabled] .msp-plugin .msp-form-control,fieldset[disabled] .msp-plugin .msp-control-row select,fieldset[disabled] .msp-plugin .msp-control-row button,fieldset[disabled] .msp-plugin .msp-control-row input[type=text],fieldset[disabled] .msp-plugin .msp-btn{background:#eeece7;opacity:.35}.msp-plugin .msp-btn,.msp-plugin .msp-control-row button{display:inline-block;margin-bottom:0;text-align:center;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 10px;line-height:32px;border:none;-moz-box-sizing:border-box;box-sizing:border-box}.msp-plugin .msp-btn[disabled],.msp-plugin .msp-control-row button[disabled]{background:#eeece7;opacity:.35}.msp-plugin .msp-btn-block,.msp-plugin .msp-control-row button{display:block;width:100%}.msp-plugin .msp-btn,.msp-plugin .msp-control-row button,.msp-plugin .msp-btn:active,.msp-plugin .msp-btn-link:focus,.msp-plugin .msp-btn:hover{outline:none}.msp-plugin .msp-material-icon svg{display:inline-flex;vertical-align:middle;font-size:1.2em;margin-bottom:3px;fill:currentColor;width:1em;height:1em;flex-shrink:0;user-select:none}.msp-plugin .msp-btn-block>.msp-material-icon,.msp-plugin .msp-control-row button>.msp-material-icon{margin-left:0;margin-right:.4em}.msp-plugin .msp-btn-childless>.msp-material-icon{margin-left:0;margin-right:0}.msp-plugin .msp-btn-icon{border:none;height:32px;width:32px;line-height:32px;padding:0;text-align:center}.msp-plugin .msp-btn-icon:hover{color:#ae5d04;background-color:hsl(42.8571428571,17.0731707317%,89.4607843137%);border:none;outline-offset:-1px !important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561) !important}.msp-plugin .msp-btn-icon[disabled],.msp-plugin .msp-btn-icon[disabled]:hover,.msp-plugin .msp-btn-icon[disabled]:active{color:hsl(36,24.3902439024%,49.0784313725%)}.msp-plugin .msp-btn-icon-small{border:none;height:32px;width:20px;line-height:32px;padding:0;text-align:center}.msp-plugin .msp-btn-icon-small:hover{color:#ae5d04;background-color:hsl(42.8571428571,17.0731707317%,89.4607843137%);border:none;outline-offset:-1px !important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561) !important}.msp-plugin .msp-btn-icon-small[disabled],.msp-plugin .msp-btn-icon-small[disabled]:hover,.msp-plugin .msp-btn-icon-small[disabled]:active{color:hsl(36,24.3902439024%,49.0784313725%)}.msp-plugin .msp-btn-link{font-weight:normal;border-radius:0}.msp-plugin .msp-btn-link,.msp-plugin .msp-btn-link:active,.msp-plugin .msp-btn-link.active,.msp-plugin .msp-btn-link[disabled],fieldset[disabled] .msp-plugin .msp-btn-link{background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none}.msp-plugin .msp-btn-link,.msp-plugin .msp-btn-link:hover,.msp-plugin .msp-btn-link:focus,.msp-plugin .msp-btn-link:active{border-color:rgba(0,0,0,0)}.msp-plugin .msp-btn-link:hover,.msp-plugin .msp-btn-link:focus{text-decoration:none;background-color:rgba(0,0,0,0)}.msp-plugin .msp-btn-link[disabled]:hover,.msp-plugin .msp-btn-link[disabled]:focus,fieldset[disabled] .msp-plugin .msp-btn-link:hover,fieldset[disabled] .msp-plugin .msp-btn-link:focus{text-decoration:none}.msp-plugin .msp-btn-link .msp-icon{font-size:100%}.msp-plugin .msp-btn-link,.msp-plugin .msp-btn-link:active,.msp-plugin .msp-btn-link:focus{color:#332b1f;text-decoration:none}.msp-plugin .msp-btn-link:hover{color:#ae5d04;text-decoration:none}.msp-plugin .msp-btn-link-toggle-on{color:#332b1f}.msp-plugin .msp-btn-link-toggle-off,.msp-plugin .msp-btn-link-toggle-off:active,.msp-plugin .msp-btn-link-toggle-off:focus{color:hsl(36,24.3902439024%,49.0784313725%) !important}.msp-plugin .msp-btn-link-toggle-on:hover{color:#ae5d04 !important}.msp-plugin .msp-btn-link-toggle-off:hover{color:rgb(219.729494382,155.9019762062,85.770505618) !important}.msp-plugin .msp-btn-action,.msp-plugin .msp-btn-action:active,.msp-plugin .msp-btn-action:focus{color:#332b1f;background:hsl(42.8571428571,17.0731707317%,94.4607843137%)}.msp-plugin .msp-btn-action:hover{color:#ae5d04;background:hsl(42.8571428571,17.0731707317%,96.9607843137%)}.msp-plugin .msp-btn-action[disabled],.msp-plugin .msp-btn-action[disabled]:hover,.msp-plugin .msp-btn-action[disabled]:active,.msp-plugin .msp-btn-action[disabled]:focus{color:hsl(36,24.3902439024%,17.0784313725%)}.msp-plugin .msp-btn-commit-on,.msp-plugin .msp-btn-commit-on:active,.msp-plugin .msp-btn-commit-on:focus{color:#974102;background:hsl(42.8571428571,17.0731707317%,93.9607843137%)}.msp-plugin .msp-btn-commit-on:hover{color:#ae5d04;background:hsl(42.8571428571,17.0731707317%,96.4607843137%)}.msp-plugin .msp-btn-commit-on[disabled],.msp-plugin .msp-btn-commit-on[disabled]:hover,.msp-plugin .msp-btn-commit-on[disabled]:active,.msp-plugin .msp-btn-commit-on[disabled]:focus{color:hsl(25.3691275168,97.385620915%,31%)}.msp-plugin .msp-btn-commit-off,.msp-plugin .msp-btn-commit-off:active,.msp-plugin .msp-btn-commit-off:focus{color:#332b1f;background:hsl(42.8571428571,17.0731707317%,95.9607843137%)}.msp-plugin .msp-btn-commit-off:hover{color:#ae5d04;background:rgb(251.7451219512,251.362195122,250.4048780488)}.msp-plugin .msp-btn-commit-off[disabled],.msp-plugin .msp-btn-commit-off[disabled]:hover,.msp-plugin .msp-btn-commit-off[disabled]:active,.msp-plugin .msp-btn-commit-off[disabled]:focus{color:hsl(36,24.3902439024%,17.0784313725%)}.msp-plugin .msp-btn-remove:hover{color:#f2f4f7}.msp-plugin .msp-btn-commit-on:hover{color:hsl(25.3691275168,97.385620915%,50%)}.msp-plugin .msp-btn-action{height:32px;line-height:32px}.msp-plugin input[type=file]{display:block}.msp-plugin input[type=range]{display:block;width:100%}.msp-plugin select[multiple],.msp-plugin select[size]{height:auto}.msp-plugin textarea.msp-form-control,.msp-plugin textarea.msp-btn{height:auto}.msp-plugin .msp-control-top-offset{margin-top:1px}.msp-plugin .msp-btn-commit{text-align:right;padding-top:0;padding-bottom:0;padding-right:10px;padding-left:0;line-height:32px;border:none;overflow:hidden;font-weight:bold}.msp-plugin .msp-btn-commit .msp-icon{display:block-inline;line-height:32px;width:32px;text-align:center}.msp-plugin select.msp-form-control,.msp-plugin .msp-control-row select,.msp-plugin select.msp-btn{background:none;background-color:hsl(42.8571428571,17.0731707317%,94.4607843137%);background-size:8px 12px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:right 10px center;padding-right:24px}.msp-plugin select.msp-form-control:-moz-focusring,.msp-plugin .msp-control-row select:-moz-focusring,.msp-plugin select.msp-btn:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #332b1f}.msp-plugin .msp-default-bg{background:#eeece7}.msp-plugin .msp-transparent-bg{background:rgba(0,0,0,0)}.msp-plugin .msp-no-hover-outline:hover{color:#ae5d04;background-color:inherit;border:none;outline-offset:0 !important;outline:none !important}.msp-plugin .msp-icon-inline{margin-right:8px}.msp-plugin .msp-control-row{position:relative;height:32px;background:#eeece7;margin-top:1px}.msp-plugin .msp-control-row>span.msp-control-row-label,.msp-plugin .msp-control-row>button.msp-control-button-label{line-height:32px;display:block;width:120px;text-align:right;padding:0 10px;color:hsl(36,24.3902439024%,31.0784313725%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default}.msp-plugin .msp-control-row>button.msp-control-button-label{background:#eeece7;cursor:pointer}.msp-plugin .msp-control-row .msp-control-current{background:#eeece7}.msp-plugin .msp-control-row>div.msp-control-row-ctrl{position:absolute;left:120px;top:0;right:0;bottom:0}.msp-plugin .msp-control-row>div.msp-control-row-text{position:absolute;left:120px;top:0;right:0;bottom:0;display:flex;align-items:center;padding:0 10px}.msp-plugin .msp-control-row>div{background:hsl(42.8571428571,17.0731707317%,94.4607843137%)}.msp-plugin .msp-control-row>.msp-flex-row,.msp-plugin .msp-control-row>.msp-state-image-row{background:#eeece7}.msp-plugin .msp-control-label-short>span{width:80px !important}.msp-plugin .msp-control-label-short>div:nth-child(2){left:80px !important}.msp-plugin .msp-control-col-2{float:left;width:50%}.msp-plugin .msp-control-twoline{height:64px !important}.msp-plugin .msp-control-group{position:relative}.msp-plugin .msp-toggle-button .msp-icon{display:inline-block;margin-right:6px}.msp-plugin .msp-toggle-button>div>button:hover{border-color:hsl(42.8571428571,17.0731707317%,89.4607843137%) !important;border:none;outline-offset:-1px !important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561) !important}.msp-plugin .msp-slider>div:first-child{position:absolute;top:0;left:18px;bottom:0;right:62px;display:flex}.msp-plugin .msp-slider>div:last-child{position:absolute;height:32px;line-height:32px;text-align:center;right:0;width:50px;top:0;bottom:0}.msp-plugin .msp-slider input[type=text]{padding-right:6px;padding-left:4px;font-size:80%;text-align:right}.msp-plugin .msp-slider2>div:first-child{position:absolute;height:32px;line-height:32px;text-align:center;left:0;width:25px;top:0;bottom:0;font-size:80%}.msp-plugin .msp-slider2>div:nth-child(2){position:absolute;top:0;left:35px;bottom:0;right:37px;display:flex}.msp-plugin .msp-slider2>div:last-child{position:absolute;height:32px;line-height:32px;text-align:center;right:0;width:25px;top:0;bottom:0;font-size:80%}.msp-plugin .msp-slider2 input[type=text]{padding-right:4px;padding-left:4px;font-size:80%;text-align:center}.msp-plugin .msp-toggle-color-picker button{border:10px solid hsl(42.8571428571,17.0731707317%,94.4607843137%) !important;margin:0;text-align:center;padding-right:10px;padding-left:10px}.msp-plugin .msp-toggle-color-picker button:hover{border-color:hsl(42.8571428571,17.0731707317%,89.4607843137%) !important;border:none;outline-offset:-1px !important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561) !important}.msp-plugin .msp-toggle-color-picker .msp-color-picker{position:absolute;z-index:100000;background:#eeece7;border-top:1px solid #eeece7;padding-bottom:5px;width:100%}.msp-plugin .msp-toggle-color-picker-above .msp-color-picker{top:-85px;height:85px}.msp-plugin .msp-toggle-color-picker-below .msp-color-picker{top:32px;height:80px}.msp-plugin .msp-control-offset{padding-left:10px}.msp-plugin .msp-accent-offset{padding-left:1px;margin-left:8px;border-left:2px solid hsl(28.1632653061,79.674796748%,56.7647058824%)}.msp-plugin .msp-control-group-wrapper{margin-bottom:0px;margin-top:1px}.msp-plugin .msp-control-group-header{background:#eeece7}.msp-plugin .msp-control-group-header>button,.msp-plugin .msp-control-group-header div{padding-left:4px;text-align:left;height:24px !important;line-height:24px !important;font-size:85% !important;background:#eeece7 !important;color:hsl(36,24.3902439024%,31.0784313725%)}.msp-plugin .msp-control-group-header .msp-icon{height:24px !important;line-height:24px !important}.msp-plugin .msp-control-group-header>span{padding-left:5px;line-height:21.3333333333px;font-size:70%;background:#eeece7;color:hsl(36,24.3902439024%,31.0784313725%)}.msp-plugin .msp-control-current{background:#eeece7}.msp-plugin .msp-control-group-footer{background:hsl(42.8571428571,17.0731707317%,86.9607843137%);height:5px;font-size:1px;margin-top:1px}.msp-plugin .msp-control-group-expander{display:block;position:absolute;line-height:32px;padding:0;left:0;top:0;width:120px;text-align:left;background:rgba(0,0,0,0)}.msp-plugin .msp-control-group-expander .msp-icon{line-height:29px;width:31px;text-align:center;font-size:100%}.msp-plugin .msp-plugin-layout_controls{position:absolute;left:10px;top:10px}.msp-plugin .msp-plugin-layout_controls>button:first-child{margin-right:6px}.msp-plugin .msp-empty-control{display:none}.msp-plugin .msp-control .msp-btn-block,.msp-plugin .msp-control .msp-control-row button,.msp-plugin .msp-control-row .msp-control button{margin-bottom:0px;margin-top:0px}.msp-plugin .msp-row-text{height:32px;position:relative;background:#eeece7;margin-top:1px}.msp-plugin .msp-row-text>div{line-height:32px;text-align:center;color:hsl(36,24.3902439024%,31.0784313725%)}.msp-plugin .msp-help span{display:none}.msp-plugin .msp-help:hover span{display:inline-block;background:linear-gradient(#eeece7, rgba(238, 236, 231, 0.8))}.msp-plugin .msp-help-text{position:relative;background:#eeece7;margin-top:1px}.msp-plugin .msp-help-text>div{padding:5px 10px;text-align:left;color:hsl(36,24.3902439024%,31.0784313725%)}.msp-plugin .msp-help-text>p{padding:5px 10px;text-align:left;color:hsl(36,24.3902439024%,31.0784313725%)}.msp-plugin .msp-help-description{font-style:italic}.msp-plugin .msp-help-legend{padding-top:10px}.msp-plugin .msp-scale-legend>div{width:100%;height:30px}.msp-plugin .msp-scale-legend>div>span{padding:5px;color:#fff;font-weight:bold;background-color:rgba(0,0,0,.2)}.msp-plugin .msp-table-legend>div{margin-right:5px;display:inline-flex}.msp-plugin .msp-table-legend>div .msp-table-legend-color{width:30px;height:20px}.msp-plugin .msp-table-legend>div .msp-table-legend-text{margin:0 5px}.msp-plugin .msp-image-preview{position:relative;background:#eeece7;margin-top:1px;padding:10px}.msp-plugin .msp-image-preview canvas{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.msp-plugin .msp-image-preview>span{margin-top:6px;display:block;text-align:center;font-size:80%;line-height:15px}.msp-plugin .msp-copy-image-wrapper{position:relative}.msp-plugin .msp-copy-image-wrapper div{font-weight:bold;padding:3px;margin:1px 0;width:100%;background:hsl(42.8571428571,17.0731707317%,94.4607843137%);text-align:center}.msp-plugin .msp-copy-image-wrapper img{margin-top:1px}.msp-plugin .msp-control-text-area-wrapper,.msp-plugin .msp-text-area-wrapper{position:relative}.msp-plugin .msp-control-text-area-wrapper textarea,.msp-plugin .msp-text-area-wrapper textarea{border:none;width:100%;height:100%;background:hsl(42.8571428571,17.0731707317%,94.4607843137%);padding:5px 10px;resize:none;font-size:12px;line-height:16px}.msp-plugin .msp-control-text-area-wrapper{height:64px !important}.msp-plugin .msp-text-area-wrapper{height:96px !important}.msp-plugin .msp-slider-base{position:relative;height:14px;padding:5px 0;width:100%;border-radius:6px;align-self:center;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.msp-plugin .msp-slider-base *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.msp-plugin .msp-slider-base-rail{position:absolute;width:100%;background-color:rgb(224.2548780488,220.637804878,211.5951219512);height:4px;border-radius:2px}.msp-plugin .msp-slider-base-track{position:absolute;left:0;height:4px;border-radius:6px;background-color:tint(#332b1f, 60%)}.msp-plugin .msp-slider-base-handle{position:absolute;margin-left:-11px;margin-top:-9px;width:22px;height:22px;cursor:pointer;border-radius:50%;background-color:#332b1f;border:4px solid rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-slider-base-handle:hover{background-color:#ae5d04}.msp-plugin .msp-slider-base-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.msp-plugin .msp-slider-base-mark-text{position:absolute;display:inline-block;vertical-align:middle;text-align:center;cursor:pointer;color:#999}.msp-plugin .msp-slider-base-mark-text-active{color:#666}.msp-plugin .msp-slider-base-step{position:absolute;width:100%;height:4px;background:rgba(0,0,0,0)}.msp-plugin .msp-slider-base-dot{position:absolute;bottom:-2px;margin-left:-4px;width:8px;height:8px;border:2px solid #e9e9e9;background-color:#fff;cursor:pointer;border-radius:50%;vertical-align:middle}.msp-plugin .msp-slider-base-dot:first-child{margin-left:-4px}.msp-plugin .msp-slider-base-dot:last-child{margin-left:-4px}.msp-plugin .msp-slider-base-dot-active{border-color:tint(#332b1f, 50%)}.msp-plugin .msp-slider-base-disabled{background:#eeece7;opacity:.35}.msp-plugin .msp-slider-base-disabled .msp-slider-base-handle,.msp-plugin .msp-slider-base-disabled .msp-slider-base-dot{cursor:not-allowed}.msp-plugin .msp-slider-base-disabled .msp-slider-base-mark-text,.msp-plugin .msp-slider-base-disabled .msp-slider-base-dot{cursor:not-allowed !important}.msp-plugin .msp-description{padding:10px;font-size:85%;background:#eeece7;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;font-weight:light;cursor:default}.msp-plugin .msp-description:not(:first-child){border-top:1px solid rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-color-picker input{color:#000 !important}.msp-plugin .msp-no-webgl{position:absolute;width:100%;height:100%;left:0;top:0;display:table;text-align:center;background:#eeece7}.msp-plugin .msp-no-webgl>div b{font-size:120%}.msp-plugin .msp-no-webgl>div{display:table-cell;vertical-align:middle;text-align:center;width:100%;height:100%}.msp-plugin .msp-loader-msp-btn-file{position:relative;overflow:hidden}.msp-plugin .msp-loader-msp-btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:100px;text-align:right;filter:alpha(opacity=0);opacity:0;outline:none;background:#fff;cursor:inherit;display:block}.msp-plugin .msp-controls-section{margin-bottom:10px}.msp-plugin .msp-combined-color-button{border:4px solid hsl(42.8571428571,17.0731707317%,94.4607843137%) !important;margin:0;text-align:center;padding-right:10px;padding-left:10px}.msp-plugin .msp-combined-color-button:hover{border-color:hsl(42.8571428571,17.0731707317%,89.4607843137%) !important;border:none;outline-offset:-1px !important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561) !important}.msp-plugin .msp-combined-color-swatch{width:100%;display:grid;grid-gap:1px;grid-template-columns:repeat(6, auto)}.msp-plugin .msp-combined-color-swatch .msp-btn:hover,.msp-plugin .msp-combined-color-swatch .msp-control-row button:hover,.msp-plugin .msp-control-row .msp-combined-color-swatch button:hover{outline-offset:-1px !important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561) !important}.msp-plugin .msp-action-select{position:relative}.msp-plugin .msp-action-select select{padding-left:42px}.msp-plugin .msp-action-select option:first-child{color:hsl(36,24.3902439024%,31.0784313725%)}.msp-plugin .msp-action-select>.msp-icon{display:block;top:0;left:10px;position:absolute;line-height:32px}.msp-plugin .msp-simple-help-section{height:28px;line-height:28px;margin-top:5px;margin-bottom:5px;padding:0 10px;font-weight:500;background:#eeece7;color:#332b1f}.msp-plugin .msp-left-panel-controls-buttons{position:absolute;width:32px;top:0;bottom:0;padding-top:10px;background:#eeece7}.msp-plugin .msp-left-panel-controls-buttons-bottom{position:absolute;bottom:0}.msp-plugin .msp-left-panel-controls-button-data-dirty{position:absolute;width:6px;height:6px;background:hsl(28.1632653061,79.674796748%,56.7647058824%);border-radius:3px;right:6px;bottom:6px}.msp-plugin .msp-left-panel-controls .msp-scrollable-container{left:33px}.msp-plugin .msp-mapped-parameter-group{position:relative}.msp-plugin .msp-mapped-parameter-group>.msp-control-row:first-child>div:nth-child(2){right:33px}.msp-plugin .msp-mapped-parameter-group>button:first-child{right:33px}.msp-plugin .msp-mapped-parameter-group>.msp-btn-icon{position:absolute;right:0;width:32px;top:0;padding:0}.msp-plugin .msp-shape-filled{fill:#332b1f;stroke:#332b1f}.msp-plugin .msp-shape-empty{fill:none;stroke:#332b1f}.msp-plugin .msp-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msp-plugin .msp-25-lower-contrast-text{color:hsl(36,24.3902439024%,41.0784313725%)}.msp-plugin .msp-expandable-group-color-stripe{position:absolute;left:0;top:30px;width:120px;height:2px}.msp-plugin .msp-section-header{height:32px;line-height:32px;margin-top:10px;margin-bottom:10px;text-align:right;padding:0 10px;font-weight:bold;background:#eeece7;overflow:hidden;cursor:default}.msp-plugin .msp-section-header>.msp-icon{display:block;float:left}.msp-plugin .msp-section-header>small{font-weight:normal}.msp-plugin .msp-current-header{height:32px;line-height:32px;margin-bottom:10px;text-align:center;font-weight:bold;background:#eeece7}.msp-plugin .msp-flex-row,.msp-plugin .msp-state-image-row{margin-top:1px;background:#eeece7;display:flex;flex-direction:row;width:inherit;height:32px}.msp-plugin .msp-flex-row>.msp-flex-item,.msp-plugin .msp-state-image-row>.msp-flex-item{margin:0;flex:1 1 auto;margin-right:1px;overflow:hidden}.msp-plugin .msp-flex-row>.msp-flex-item:last-child,.msp-plugin .msp-state-image-row>.msp-flex-item:last-child{margin-right:0}.msp-plugin .msp-flex-row>select,.msp-plugin .msp-state-image-row>select,.msp-plugin .msp-flex-row>button,.msp-plugin .msp-state-image-row>button{margin:0;flex:1 1 auto;margin-right:1px;height:32px;overflow:hidden}.msp-plugin .msp-flex-row .msp-btn-icon,.msp-plugin .msp-state-image-row .msp-btn-icon,.msp-plugin .msp-flex-row .msp-btn-icon-small,.msp-plugin .msp-state-image-row .msp-btn-icon-small{flex:0 0 32px;max-width:32px}.msp-plugin .msp-flex-row>select,.msp-plugin .msp-state-image-row>select{background:none}.msp-plugin .msp-flex-row>select>option[value=_],.msp-plugin .msp-state-image-row>select>option[value=_]{display:none}.msp-plugin .msp-flex-row>select:last-child,.msp-plugin .msp-state-image-row>select:last-child,.msp-plugin .msp-flex-row>button:last-child,.msp-plugin .msp-state-image-row>button:last-child{margin-right:0}.msp-plugin .msp-flex-row>button.msp-control-button-label,.msp-plugin .msp-state-image-row>button.msp-control-button-label{background:#eeece7}.msp-plugin .msp-state-list{list-style:none}.msp-plugin .msp-state-list>li{position:relative;overflow:hidden}.msp-plugin .msp-state-list>li>button:first-child{text-align:left;border-left:10px solid hsl(42.8571428571,17.0731707317%,79.9607843137%) !important}.msp-plugin .msp-state-list>li>div{position:absolute;right:0;top:0}.msp-plugin .msp-state-image-row{height:96px;margin-top:0px}.msp-plugin .msp-state-image-row>button{height:96px;padding:0px}.msp-plugin .msp-state-image-row>button>img{min-height:96px;width:inherit;transform:translateY(-50%);top:50%;position:relative}.msp-plugin .msp-tree-row{position:relative;margin-top:0;margin-bottom:1px;background:rgba(0,0,0,0)}.msp-plugin .msp-tree-row-current .msp-btn-tree-label>span{font-weight:bold}.msp-plugin .msp-tree-row-current .msp-btn-tree-label{border-radius:0 !important}.msp-plugin .msp-tree-row .msp-btn-tree-label{text-align:left;border-radius:0 0 0 8px;border-left-width:4px;border-left-style:solid}.msp-plugin .msp-tree-row .msp-btn-tree-label>small{color:hsl(36,24.3902439024%,36.0784313725%)}.msp-plugin .msp-tree-updates-wrapper .msp-control-group-header:last-child{margin-bottom:1px}.msp-plugin .msp-viewport-top-left-controls{position:absolute;left:10px;top:10px}.msp-plugin .msp-viewport-top-left-controls .msp-traj-controls{line-height:32px;float:left;margin-right:10px;background-color:hsl(42.8571428571,17.0731707317%,94.4607843137%)}.msp-plugin .msp-viewport-top-left-controls .msp-traj-controls>span{color:#332b1f;margin-left:10px;margin-right:10px;font-size:85%;display:inline-block}.msp-plugin .msp-viewport-top-left-controls .msp-state-snapshot-viewport-controls{line-height:32px;float:left;margin-right:10px}.msp-plugin .msp-viewport-top-left-controls .msp-state-snapshot-viewport-controls>button{background-color:hsl(42.8571428571,17.0731707317%,94.4607843137%)}.msp-plugin .msp-viewport-top-left-controls .msp-state-snapshot-viewport-controls>select{display:inline-block;width:200px;margin-right:10px}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls{line-height:32px;float:left;margin-right:10px;position:relative}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls>div:first-child{position:relative;display:inline-block}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls>div:first-child>button{position:relative}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls .msp-animation-viewport-controls-select{width:290px;position:absolute;left:0;margin-top:10px;background:rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls .msp-animation-viewport-controls-select .msp-control-row:first-child{margin-top:0}.msp-plugin .msp-selection-viewport-controls{position:relative;margin:10px auto 0 auto;width:430px}.msp-plugin .msp-selection-viewport-controls-actions{position:absolute;width:100%;top:32px;background:rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-selection-viewport-controls>.msp-flex-row .msp-btn,.msp-plugin .msp-selection-viewport-controls>.msp-state-image-row .msp-btn,.msp-plugin .msp-selection-viewport-controls>.msp-flex-row .msp-control-row button,.msp-plugin .msp-control-row .msp-selection-viewport-controls>.msp-flex-row button,.msp-plugin .msp-selection-viewport-controls>.msp-state-image-row .msp-control-row button,.msp-plugin .msp-control-row .msp-selection-viewport-controls>.msp-state-image-row button{padding:0 5px}.msp-plugin .msp-selection-viewport-controls select.msp-form-control,.msp-plugin .msp-selection-viewport-controls select.msp-btn,.msp-plugin .msp-selection-viewport-controls .msp-control-row select,.msp-plugin .msp-control-row .msp-selection-viewport-controls select{padding:0 5px;text-align:center;background:hsl(42.8571428571,17.0731707317%,94.4607843137%);flex:0 0 80px;text-overflow:ellipsis}.msp-plugin .msp-param-object-list-item{margin-top:1px;position:relative}.msp-plugin .msp-param-object-list-item>button{text-align:left}.msp-plugin .msp-param-object-list-item>button>span{font-weight:bold}.msp-plugin .msp-param-object-list-item>div{position:absolute;right:0;top:0}.msp-plugin .msp-state-actions .msp-transform-wrapper:last-child{margin-bottom:10px}.msp-plugin .msp-button-row{display:flex;flex-direction:row;height:32px;width:inherit}.msp-plugin .msp-button-row>button{margin:0;flex:1 1 auto;margin-right:1px;height:32px;text-align-last:center;background:none;padding:0 10px;overflow:hidden}.msp-plugin .msp-action-menu-options-no-header,.msp-plugin .msp-action-menu-options .msp-control-group-children{max-height:300px;overflow:hidden;overflow-y:auto}.msp-plugin .msp-action-menu-options .msp-control-row,.msp-plugin .msp-action-menu-options button,.msp-plugin .msp-action-menu-options .msp-icon,.msp-plugin .msp-action-menu-options .msp-flex-row,.msp-plugin .msp-action-menu-options .msp-state-image-row{height:24px;line-height:24px}.msp-plugin .msp-action-menu-options button{text-align:left}.msp-plugin .msp-action-menu-options .msp-action-menu-button{margin-top:1px;display:flex}.msp-plugin .msp-action-menu-options .msp-action-menu-button .msp-icon{margin-right:6px}.msp-plugin .msp-representation-entry{position:relative}.msp-plugin .msp-representation-entry>.msp-control-group-header>.msp-btn,.msp-plugin .msp-control-row .msp-representation-entry>.msp-control-group-header>button{font-weight:bold}.msp-plugin .msp-representation-entry>.msp-control-group-header>.msp-icon,.msp-plugin .msp-representation-entry>.msp-control-group-header>.msp-btn-link{line-height:24px;height:24px}.msp-plugin .msp-control-group-presets-wrapper{position:absolute;right:0;top:0}.msp-plugin .msp-control-group-presets-wrapper .msp-control-group-header{background:rgba(0,0,0,0)}.msp-plugin .msp-control-group-presets-wrapper button{background:rgba(0,0,0,0) !important}.msp-plugin .msp-parameter-matrix input{flex:1 1 auto;min-width:0}.msp-plugin .msp-btn-apply-simple{text-align:left}.msp-plugin .msp-btn-apply-simple .msp-icon{margin-right:10px}.msp-plugin .msp-type-class-Root{border-left-color:#eeece7}.msp-plugin .msp-type-class-Group{border-left-color:hsl(28.1632653061,79.674796748%,56.7647058824%)}.msp-plugin .msp-type-class-Data{border-left-color:hsl(183.5294117647,8.7179487179%,76.7647058824%)}.msp-plugin .msp-type-class-Object{border-left-color:rgb(84.456,216.544,140.468)}.msp-plugin .msp-type-class-Representation3D{border-left-color:rgb(73.6589958159,162.989539749,222.8410041841)}.msp-plugin .msp-type-class-Behavior{border-left-color:hsl(282.5806451613,38.9121338912%,63.137254902%)}.msp-plugin .msp-accent-color-cyan{color:hsl(183.5294117647,8.7179487179%,76.7647058824%)}.msp-plugin .msp-accent-bg-cyan{background:hsl(183.5294117647,8.7179487179%,76.7647058824%)}.msp-plugin .msp-transform-header-brand-cyan{border-bottom:1px solid hsl(183.5294117647,8.7179487179%,76.7647058824%)}.msp-plugin .msp-transform-header-brand-cyan:active,.msp-plugin .msp-transform-header-brand-cyan:focus{border-bottom:1px solid hsl(183.5294117647,8.7179487179%,76.7647058824%)}.msp-plugin .msp-accent-color-red{color:hsl(5.6140350877,78.0821917808%,72.0588235294%)}.msp-plugin .msp-accent-bg-red{background:hsl(5.6140350877,78.0821917808%,72.0588235294%)}.msp-plugin .msp-transform-header-brand-red{border-bottom:1px solid hsl(5.6140350877,78.0821917808%,72.0588235294%)}.msp-plugin .msp-transform-header-brand-red:active,.msp-plugin .msp-transform-header-brand-red:focus{border-bottom:1px solid hsl(5.6140350877,78.0821917808%,72.0588235294%)}.msp-plugin .msp-accent-color-gray{color:rgb(70.1643835616,98.5,126.8356164384)}.msp-plugin .msp-accent-bg-gray{background:rgb(70.1643835616,98.5,126.8356164384)}.msp-plugin .msp-transform-header-brand-gray{border-bottom:1px solid rgb(70.1643835616,98.5,126.8356164384)}.msp-plugin .msp-transform-header-brand-gray:active,.msp-plugin .msp-transform-header-brand-gray:focus{border-bottom:1px solid rgb(70.1643835616,98.5,126.8356164384)}.msp-plugin .msp-accent-color-green{color:rgb(84.456,216.544,140.468)}.msp-plugin .msp-accent-bg-green{background:rgb(84.456,216.544,140.468)}.msp-plugin .msp-transform-header-brand-green{border-bottom:1px solid rgb(84.456,216.544,140.468)}.msp-plugin .msp-transform-header-brand-green:active,.msp-plugin .msp-transform-header-brand-green:focus{border-bottom:1px solid rgb(84.456,216.544,140.468)}.msp-plugin .msp-accent-color-purple{color:hsl(282.5806451613,38.9121338912%,63.137254902%)}.msp-plugin .msp-accent-bg-purple{background:hsl(282.5806451613,38.9121338912%,63.137254902%)}.msp-plugin .msp-transform-header-brand-purple{border-bottom:1px solid hsl(282.5806451613,38.9121338912%,63.137254902%)}.msp-plugin .msp-transform-header-brand-purple:active,.msp-plugin .msp-transform-header-brand-purple:focus{border-bottom:1px solid hsl(282.5806451613,38.9121338912%,63.137254902%)}.msp-plugin .msp-accent-color-blue{color:rgb(73.6589958159,162.989539749,222.8410041841)}.msp-plugin .msp-accent-bg-blue{background:rgb(73.6589958159,162.989539749,222.8410041841)}.msp-plugin .msp-transform-header-brand-blue{border-bottom:1px solid rgb(73.6589958159,162.989539749,222.8410041841)}.msp-plugin .msp-transform-header-brand-blue:active,.msp-plugin .msp-transform-header-brand-blue:focus{border-bottom:1px solid rgb(73.6589958159,162.989539749,222.8410041841)}.msp-plugin .msp-accent-color-orange{color:hsl(28.1632653061,79.674796748%,56.7647058824%)}.msp-plugin .msp-accent-bg-orange{background:hsl(28.1632653061,79.674796748%,56.7647058824%)}.msp-plugin .msp-transform-header-brand-orange{border-bottom:1px solid hsl(28.1632653061,79.674796748%,56.7647058824%)}.msp-plugin .msp-transform-header-brand-orange:active,.msp-plugin .msp-transform-header-brand-orange:focus{border-bottom:1px solid hsl(28.1632653061,79.674796748%,56.7647058824%)}.msp-plugin .msp-volume-channel-inline-controls>:first-child{position:absolute;left:0;top:0;height:32px;right:32px}.msp-plugin .msp-volume-channel-inline-controls .msp-slider>div:first-child{right:42px}.msp-plugin .msp-volume-channel-inline-controls .msp-slider>div:last-child{width:30px}.msp-plugin .msp-volume-channel-inline-controls>button{position:absolute;right:0;width:32px;top:0;padding:0}.msp-plugin .msp-volume-channel-inline-controls>button .msp-material-icon{margin-right:0}.msp-plugin .msp-list-unstyled{padding-left:0;list-style:none}.msp-plugin .msp-drag-drop-overlay{border:12px dashed #332b1f;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;position:absolute;left:0;right:0;top:0;bottom:0;font-size:48px;font-weight:bold}.msp-plugin .msp-task-state{line-height:32px}.msp-plugin .msp-task-state>span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default}.msp-plugin .msp-overlay-tasks{position:absolute;display:flex;top:0;left:0;bottom:0;right:0;height:100%;width:100%;z-index:1000;justify-content:center;align-items:center;background:rgba(0,0,0,.25)}.msp-plugin .msp-overlay-tasks .msp-task-state>div{height:32px;margin-top:1px;position:relative;width:100%;background:#eeece7}.msp-plugin .msp-overlay-tasks .msp-task-state>div>div{height:32px;line-height:32px;display:inline-block;padding:0 10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;white-space:nowrap;background:#eeece7;position:absolute}.msp-plugin .msp-overlay-tasks .msp-task-state>div>button{display:inline-block;margin-top:-3px}.msp-plugin .msp-background-tasks{position:absolute;left:0;bottom:0;z-index:1000}.msp-plugin .msp-background-tasks .msp-task-state>div{height:32px;margin-top:1px;position:relative;width:100%;background:#eeece7}.msp-plugin .msp-background-tasks .msp-task-state>div>div{height:32px;line-height:32px;display:inline-block;padding:0 10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;white-space:nowrap;background:#eeece7;position:absolute}.msp-plugin .msp-background-tasks .msp-task-state>div>button{display:inline-block;margin-top:-3px}.msp-plugin .msp-viewport{position:absolute;left:0;top:0;right:0;bottom:0;background:#eeece7}.msp-plugin .msp-viewport .msp-btn-link{background:rgba(0,0,0,.2)}.msp-plugin .msp-viewport-expanded{position:fixed;z-index:1000}.msp-plugin .msp-viewport-host3d{position:absolute;left:0;top:0;right:0;bottom:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;touch-action:manipulation}.msp-plugin .msp-viewport-host3d>canvas{background-color:#eeece7;background-image:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey),linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey);background-size:60px 60px;background-position:0 0,30px 30px}.msp-plugin .msp-viewport-controls{position:absolute;right:10px;top:10px;width:32px}.msp-plugin .msp-viewport-controls-buttons{text-align:right;position:relative}.msp-plugin .msp-viewport-controls-buttons>div{position:relative;margin-bottom:4px}.msp-plugin .msp-viewport-controls-buttons button{padding:0;text-align:center;width:32px;position:relative}.msp-plugin .msp-viewport-controls-buttons .msp-btn-link-toggle-off{color:hsl(36,24.3902439024%,49.0784313725%)}.msp-plugin .msp-viewport-controls-buttons .msp-btn-link:hover{color:#ae5d04}.msp-plugin .msp-semi-transparent-background{background:#eeece7;opacity:.5;position:absolute;top:0;left:0;width:100%;height:100%}.msp-plugin .msp-hover-box-wrapper{position:relative}.msp-plugin .msp-hover-box-wrapper .msp-hover-box-body{visibility:hidden;position:absolute;right:36px;top:0;width:100px;background-color:#eeece7}.msp-plugin .msp-hover-box-wrapper .msp-hover-box-spacer{visibility:hidden;position:absolute;right:32px;top:0;width:4px;height:32px}.msp-plugin .msp-hover-box-wrapper:hover .msp-hover-box-body,.msp-plugin .msp-hover-box-wrapper:hover .msp-hover-box-spacer{visibility:visible}.msp-plugin .msp-viewport-controls-panel{width:290px;top:0;right:36px;position:absolute;background:rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-viewport-controls-panel .msp-control-group-wrapper:first-child{padding-top:0}.msp-plugin .msp-viewport-controls-panel .msp-viewport-controls-panel-controls{overflow-y:auto;max-height:400px}.msp-plugin .msp-highlight-toast-wrapper{position:absolute;right:10px;bottom:10px;max-width:95%;z-index:10000}.msp-plugin .msp-highlight-info{color:#ae5d04;padding:3px 10px;background:#eeece7;opacity:90%;max-width:400px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default}.msp-plugin .msp-highlight-markdown-row{padding-left:10px}.msp-plugin .msp-highlight-simple-row{text-align:right}.msp-plugin .msp-highlight-info-hr{margin-inline:0px;margin-block:3px;border:none;height:1px;background-color:#ae5d04}.msp-plugin .msp-highlight-info-additional{font-size:85%;display:inline-block;color:rgb(249.8314606742,145.1685393258,30.1685393258)}.msp-plugin .msp-snapshot-description-wrapper{background:rgba(238,236,231,.5);position:absolute;left:0;top:42px;padding:6.6px 10px;max-height:224px;overflow:hidden;overflow-y:auto;width:max-content;max-width:400px}.msp-plugin .msp-snapshot-description-wrapper a{text-decoration:underline;cursor:pointer;color:#332b1f}.msp-plugin .msp-snapshot-description-wrapper ul,.msp-plugin .msp-snapshot-description-wrapper ol{padding-left:14px}.msp-plugin .msp-log-wrap{position:absolute;right:0;top:0;left:0;bottom:0;overflow:hidden}.msp-plugin .msp-log{position:absolute;right:-20px;top:0;left:0;bottom:0;overflow-y:scroll;overflow-x:hidden;font-size:90%;background:rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-log{font-size:90%}.msp-plugin .msp-log ul{padding:0;margin:0}.msp-plugin .msp-log{color:hsl(36,24.3902439024%,21.0784313725%)}.msp-plugin .msp-log li{clear:both;margin:0;background:#eeece7;position:relative}.msp-plugin .msp-log li:not(:last-child){border-bottom:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%)}.msp-plugin .msp-log .msp-log-entry{margin-left:110px;background:hsl(42.8571428571,17.0731707317%,90.4607843137%);padding:3px 25px 3px 10px}.msp-plugin .msp-log .msp-log-timestamp{padding:3px 10px 3px 10px;float:left;text-align:right;width:110px;color:hsl(36,24.3902439024%,36.0784313725%);font-size:100%}.msp-plugin .msp-log .msp-log-timestamp small{font-size:100%}.msp-plugin .msp-log .label{margin-top:-3px;font-size:7pt}.msp-plugin .msp-log-entry-badge{position:absolute;left:0;top:0;bottom:0;width:6px}.msp-plugin .msp-log-entry-message{background:#0cca5d}.msp-plugin .msp-log-entry-info{background:#5e3673}.msp-plugin .msp-log-entry-error{background:#fd354b}.msp-plugin .msp-log-entry-warning{background:#fcc937}.msp-plugin .msp-sequence{position:absolute;right:0;top:0;left:0;bottom:0;background:#eeece7}.msp-plugin .msp-sequence-select{position:relative;height:24px;width:100%;margin-bottom:1px;background:rgb(224.2548780488,220.637804878,211.5951219512);text-align:left}.msp-plugin .msp-sequence-select>span{display:inline-block;line-height:24px;padding:0 10px;font-size:85%;font-weight:bold;cursor:default}.msp-plugin .msp-sequence-select>select{display:inline-block;max-width:120px;width:auto;text-overflow:ellipsis;font-size:85%;height:24px;line-height:24px;background-size:6px 8px;background-color:rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-sequence-wrapper{word-break:break-word;padding:10px 10px 3px 10px;user-select:none}.msp-plugin .msp-sequence-wrapper-non-empty{font-size:85%;line-height:180%;font-family:"Courier New",monospace;background:hsl(42.8571428571,17.0731707317%,94.4607843137%);width:100%;overflow-y:auto;overflow-x:hidden;position:absolute;top:25px;left:0;bottom:0;right:0}.msp-plugin .msp-sequence-chain-label{margin-left:10px;margin-top:10px;user-select:none;color:#ae5d04;font-size:90%;line-height:90%;padding-left:.2em}.msp-plugin .msp-sequence-wrapper span{cursor:pointer}.msp-plugin .msp-sequence-wrapper .msp-sequence-residue-long{margin:0em .2em 0em .2em}.msp-plugin .msp-sequence-wrapper .msp-sequence-residue-long-begin{margin:0em .2em 0em 0em}.msp-plugin .msp-sequence-wrapper .msp-sequence-residue-focused{font-weight:bold;text-decoration:underline}.msp-plugin .msp-sequence-wrapper .msp-sequence-label{color:#ae5d04;font-size:90%;line-height:90%;padding-bottom:1em;padding-left:.2em}.msp-plugin .msp-sequence-wrapper .msp-sequence-number{color:#ae5d04;word-break:keep-all;cursor:default;position:relative;top:-1.1em;left:3.1em;padding:0px;margin-left:-3em;font-size:80%;pointer-events:none}.msp-plugin .msp-sequence-wrapper .msp-sequence-number-long{left:3.3em}.msp-plugin .msp-sequence-wrapper .msp-sequence-number-long-negative{left:2.7em}.msp-plugin .msp-sequence-wrapper .msp-sequence-number-negative{left:2.5em}.msp-plugin .msp-sequence-wrapper .msp-sequence-present{color:#332b1f}.msp-plugin .msp-sequence-wrapper .msp-sequence-missing{color:hsl(36,24.3902439024%,61.0784313725%);cursor:default}.msp-plugin .msp-transformer .msp-entity-badge{position:absolute;top:0;right:0;height:32px;line-height:32px;width:32px}.msp-plugin .msp-layout-right,.msp-plugin .msp-layout-left{background:rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-transformer-wrapper{position:relative}.msp-plugin .msp-transformer-wrapper .msp-entity-badge{left:0;top:0}.msp-plugin .msp-transformer-wrapper:first-child .msp-panel-description-content{top:33px}.msp-plugin .msp-transformer-wrapper:not(:first-child) .msp-panel-description-content{bottom:33px}.msp-plugin .msp-transform-wrapper{margin-bottom:10px}.msp-plugin .msp-transform-wrapper-collapsed{margin-bottom:1px}.msp-plugin .msp-transform-update-wrapper{margin-bottom:1px}.msp-plugin .msp-transform-update-wrapper-collapsed{margin-bottom:1px}.msp-plugin .msp-transform-update-wrapper>.msp-transform-header>button,.msp-plugin .msp-transform-update-wrapper-collapsed>.msp-transform-header>button{text-align:left;padding-left:32px;line-height:24px;background:hsl(42.8571428571,17.0731707317%,89.4607843137%)}.msp-plugin .msp-transform-wrapper>.msp-transform-header>button{text-align:left;background:#eeece7;font-weight:bold;padding-right:5px}.msp-plugin .msp-transform-header{position:relative}.msp-plugin .msp-transform-header>button>small{font-weight:normal;float:right}.msp-plugin .msp-transform-header>button>span:first-child{margin-right:10px}.msp-plugin .msp-transform-header>button:hover{color:hsl(36,24.3902439024%,31.0784313725%)}.msp-plugin .msp-transform-header-brand{margin-bottom:-1px}.msp-plugin .msp-transform-header-brand svg{fill:#332b1f;stroke:#332b1f}.msp-plugin .msp-transform-default-params{background:#eeece7;position:absolute;left:0;top:0;width:32px;padding:0}.msp-plugin .msp-transform-default-params:hover{background:hsl(42.8571428571,17.0731707317%,111.9607843137%)}.msp-plugin .msp-transform-apply-wrap{position:relative;margin-top:1px;width:100%;height:32px}.msp-plugin .msp-transform-refresh{width:87px;margin-left:33px;background:#eeece7;text-align:right}.msp-plugin .msp-transform-apply{display:block;position:absolute;left:120px;right:0;top:0}.msp-plugin .msp-transform-apply-wider{margin-left:33px}.msp-plugin .msp-data-beh{margin:10px 0 !important}.msp-plugin .msp-toast-container{position:relative;z-index:1001}.msp-plugin .msp-toast-container .msp-toast-entry{color:#332b1f;background:rgb(224.2548780488,220.637804878,211.5951219512);position:relative;float:right;min-height:32px;margin-top:10px;border:1px solid hsl(42.8571428571,17.0731707317%,76.9607843137%);display:table}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-title{height:100%;line-height:32px;padding:0 10px;background:#eeece7;font-weight:bold;display:table-cell;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;font-weight:light;cursor:pointer}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message{padding:3px 42px 3px 10px;display:table-cell}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message a{text-decoration:none;color:#974102;font-weight:bold}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message a:hover{text-decoration:underline;color:hsl(25.3691275168,97.385620915%,50%)}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message a:active,.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message a:focus{color:#974102;outline-offset:0;outline:none}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-hide{position:absolute;width:42px;right:0;top:0;bottom:0}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-hide .msp-btn-icon{background:rgba(0,0,0,0);position:absolute;top:1px;right:0;left:0;bottom:0;width:100%;text-align:right;padding-right:5px}.msp-plugin .msp-help-row{position:relative;height:32px;background:#eeece7;margin-top:1px;display:table;width:100%}.msp-plugin .msp-help-row>span{width:120px;text-align:right;padding:3px 10px;color:hsl(36,24.3902439024%,31.0784313725%);display:table-cell;font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default}.msp-plugin .msp-help-row>div{background:hsl(42.8571428571,17.0731707317%,94.4607843137%);position:relative;padding:3px 10px;display:table-cell}.msp-plugin .msp-canvas{width:100%;height:100%;background-color:#f3f2ee}.msp-plugin .msp-canvas text{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.msp-plugin .msp-canvas circle{stroke:#000;stroke-width:10;stroke-opacity:.3}.msp-plugin .msp-canvas circle:hover{fill:#ae5d04;stroke:#000;stroke-width:10px}.msp-plugin .msp-canvas .info{fill:#fff;stroke:#000;stroke-width:3}.msp-plugin .msp-canvas .show{visibility:visible}.msp-plugin .msp-canvas .hide{visibility:hidden}.msp-plugin .msp-canvas .delete-button rect{fill:#ed4337;stroke:#000}.msp-plugin .msp-canvas .delete-button text{stroke:#fff;fill:#fff}.msp-plugin .msp-canvas .delete-button:hover{stroke:#000;stroke-width:3;fill:#ff6961}.msp-plugin .msp-canvas .infoCircle:hover{fill:#4c66b2}.msp-plugin .msp-canvas:focus{outline:none}.msp-plugin .msp-logo{display:block;position:absolute;bottom:10px;right:10px;height:32px;width:100px;background-repeat:no-repeat;background-position:bottom right;background-size:auto;background-image:url(data:image/png;base64,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)}.msp-plugin .msp-plugin-content{color:#332b1f}.msp-plugin .msp-plugin-init-error{white-space:pre;margin:10px}.msp-plugin .msp-svg-text{fill:#332b1f}.msp-plugin{background:#eeece7} /* ========================================================================== AUTHENTICATION STYLES ========================================================================== */ .auth-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 100vh; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); display: flex; align-items: center; justify-content: center; z-index: 9999; box-sizing: border-box; } .auth-form-container { background: white; border-radius: var(--radius-lg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); padding: 2.5rem 2rem; /* Increased top/bottom padding for better proportions */ width: 100%; max-width: 450px; /* Increased width for account setup form */ margin: 1rem; /* Restored original margin */ } .auth-form { text-align: center; } .auth-header h2 { color: var(--text); margin-bottom: 0.75rem; font-size: 1.6rem; font-weight: 600; } .auth-header p { color: var(--text-secondary); margin-bottom: 2rem; /* Restored original margin */ font-size: 1.1rem; /* Larger welcome text */ } .auth-form .input-group { margin-bottom: 1rem; /* Restored original spacing for Sign In */ text-align: left; width: 100%; } .auth-form input { width: 100%; height: 48px; /* More compact inputs */ padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: var(--radius-md); font-size: 0.95rem; font-family: var(--font-main); font-weight: 400; background-color: white; color: var(--text); transition: all 0.2s ease; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 1.5; } /* Specific styling for date input to match other fields */ .auth-form input[type="date"] { width: 100%; height: 48px; /* Harmonized height */ padding: 0.75rem 1rem; /* Harmonized padding */ border: 2px solid var(--border); border-radius: var(--radius-md); font-size: 0.95rem; /* Harmonized font size */ font-family: var(--font-main); font-weight: 400; background-color: white; color: var(--text); transition: all 0.2s ease; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 1.5; } /* Style the date picker icon */ .auth-form input[type="date"]::-webkit-calendar-picker-indicator { background-color: transparent; color: var(--text-secondary); cursor: pointer; padding: 0.25rem; margin-left: 0.5rem; } .auth-form input:focus { outline: none; border-color: var(--primary); } /* Ensure consistent placeholder styling */ .auth-form input::placeholder { color: var(--text-muted); font-family: var(--font-main); font-size: 1rem; font-weight: 400; opacity: 1; line-height: 1.5; } /* Ensure consistent styling for all input types */ .auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="date"] { width: 100% !important; height: 48px !important; /* Harmonized height */ padding: 0.75rem 1rem !important; /* Harmonized padding */ border: 2px solid var(--border) !important; border-radius: var(--radius-md) !important; font-size: 0.95rem !important; /* Harmonized font size */ font-family: var(--font-main) !important; font-weight: 400 !important; background-color: white !important; color: var(--text) !important; box-sizing: border-box !important; line-height: 1.5 !important; transition: all 0.2s ease !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } /* Password input group with integrated toggle */ .auth-form .password-group { position: relative; display: flex; align-items: center; } .auth-form .password-group input { width: 100% !important; height: 52px !important; /* Match other inputs */ margin-right: 0 !important; /* Space for eye icon */ padding-right: 0 !important; /* Space for eye icon */ border: 2px solid var(--border) !important; border-radius: var(--radius-md) !important; font-size: 1rem !important; /* Harmonized font size */ font-family: var(--font-main) !important; font-weight: 400 !important; background-color: white !important; color: var(--text) !important; transition: none !important; /* Disable transitions */ box-sizing: border-box !important; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 1.5; } .auth-form .password-group input:focus { outline: none; border-color: var(--primary); } /* Integrated password toggle - no visible button borders */ .auth-form .password-toggle { position: absolute; right: 8px; /* Positioned at the extreme right inside the input */ top: 50%; transform: translateY(-50%); background: transparent; border: none; outline: none; color: var(--text-muted); cursor: pointer; padding: 0; margin: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; } .auth-form .password-toggle:hover { color: var(--primary); } .auth-form .password-toggle:focus { outline: none; color: var(--primary); } .auth-form .password-toggle:active { color: var(--primary-700); } /* Eye icon styling */ .auth-form .password-toggle svg { width: 20px; height: 20px; transition: all 0.2s ease; pointer-events: none; } /* Eye icon states */ .auth-form .password-toggle.showing svg { color: var(--primary); } .auth-form .password-toggle.showing svg path:first-child { opacity: 0.4; } .auth-form .password-toggle.showing svg circle { stroke-width: 2.5; } /* Prevent input size changes when toggling password visibility */ .auth-form .password-group input[type="password"], .auth-form .password-group input[type="text"] { font-size: 0.95rem !important; /* Force consistent font size */ height: 48px !important; /* Force consistent height */ padding-right: 0 !important; /* Force consistent right padding for eye icon */ margin-right: 0 !important; /* Space for eye icon */ line-height: 1.5 !important; /* Force consistent line height */ font-family: var(--font-main) !important; /* Force consistent font family */ font-weight: 400 !important; /* Force consistent font weight */ width: 100% !important; /* Force consistent width */ box-sizing: border-box !important; /* Force consistent box sizing */ border: 2px solid var(--border) !important; /* Force consistent border */ border-radius: var(--radius-md) !important; /* Force consistent border radius */ background-color: white !important; /* Force consistent background */ color: var(--text) !important; /* Force consistent text color */ -webkit-appearance: none !important; /* Force consistent appearance */ -moz-appearance: none !important; appearance: none !important; } /* Specific styles for Account Setup form (register-container) */ #register-container .auth-form-container { padding: 1.5rem 1.25rem; /* More comfortable padding for setup form */ max-width: 500px; /* Increased width for better text flow */ margin: 1rem auto; /* Reduce top/bottom margin */ } #register-container .auth-form .input-group { margin-bottom: 0.75rem; /* Better spacing between inputs */ } #register-container .auth-header { margin-bottom: 1.25rem; /* Proper header margin */ padding-top: 0; /* Remove top padding */ } #register-container .auth-header h2 { margin-bottom: 0.5rem; /* Proper space below title */ margin-top: 0; /* Remove top margin */ font-size: 1.4rem; /* Smaller title */ } #register-container .auth-header p { margin-bottom: 1.25rem; /* Proper header spacing for setup form */ margin-top: 0; /* Remove top margin */ font-size: 0.9rem; /* Slightly larger for better readability */ line-height: 1.3; /* Tighter line height */ white-space: nowrap; /* Prevent text wrapping */ } #register-container .auth-footer { margin-top: 1rem; /* Proper space above footer */ margin-bottom: 0; /* Remove bottom margin */ padding-bottom: 0; /* Remove bottom padding */ } #register-container .btn-main { margin-top: 0.75rem; /* Better button top margin */ margin-bottom: 0.5rem; /* Proper space below button */ } /* Proper footer spacing for Account Setup */ #register-container .auth-footer p { margin: 0; /* Remove all margins from footer text */ padding: 0; /* Remove all padding from footer text */ line-height: 1.2; /* Tighter line height */ } /* ABSOLUTE FORCE: Ensure all auth inputs have identical styling */ .auth-form input, .auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="date"], .auth-form .password-group input, .auth-form .password-group input[type="password"], .auth-form .password-group input[type="text"] { font-size: 0.95rem !important; /* Force consistent font size */ height: 48px !important; /* Force consistent height */ min-height: 48px !important; /* Force minimum height */ max-height: 48px !important; /* Force maximum height */ padding: 0.75rem 1rem !important; /* Force consistent padding */ font-family: var(--font-main) !important; /* Force consistent font family */ font-weight: 400 !important; /* Force consistent font weight */ line-height: 1.5 !important; /* Force consistent line height */ box-sizing: border-box !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; width: 100% !important; /* Force consistent width */ min-width: 100% !important; /* Force minimum width */ max-width: 100% !important; /* Force maximum width */ border: 2px solid var(--border) !important; /* Force consistent border */ border-radius: var(--radius-md) !important; /* Force consistent border radius */ background-color: white !important; /* Force consistent background */ color: var(--text) !important; /* Force consistent text color */ transition: none !important; /* Disable transitions that might cause size changes */ } /* Smaller inputs specifically for Account Setup form */ #register-container .auth-form input, #register-container .auth-form input[type="text"], #register-container .auth-form input[type="email"], #register-container .auth-form input[type="password"], #register-container .auth-form input[type="date"], #register-container .auth-form .password-group input, #register-container .auth-form .password-group input[type="password"], #register-container .auth-form .password-group input[type="text"] { height: 42px !important; /* Smaller height for Account Setup */ min-height: 42px !important; /* Smaller minimum height */ max-height: 42px !important; /* Smaller maximum height */ padding: 0.65rem 1rem !important; /* Adjusted padding for smaller height */ font-size: 0.9rem !important; /* Slightly smaller font size */ } /* ULTRA-SPECIFIC: Force identical sizing for all authentication inputs */ #login-container input, #register-container input, #password-change-container input, #login-container input[type="text"], #login-container input[type="password"], #register-container input[type="text"], #register-container input[type="email"], #register-container input[type="password"], #register-container input[type="date"], #password-change-container input[type="password"] { height: 52px !important; min-height: 52px !important; max-height: 52px !important; font-size: 1rem !important; padding: 0.875rem 1rem !important; width: 100% !important; box-sizing: border-box !important; border: 2px solid var(--border) !important; border-radius: var(--radius-md) !important; font-family: var(--font-main) !important; font-weight: 400 !important; line-height: 1.5 !important; background-color: white !important; color: var(--text) !important; } /* ULTRA-SPECIFIC: Force password inputs to maintain size */ #login-container .password-group input, #register-container .password-group input, #password-change-container .password-group input { padding-right: 0 !important; /* Space for eye icon */ margin-right: 0 !important; /* Space for eye icon */ height: 52px !important; min-height: 52px !important; max-height: 52px !important; } .auth-form .btn-main { width: 100%; height: 52px; /* Match input height */ padding: 0.875rem 1rem; margin-bottom: 1.25rem; /* Increased margin for better spacing */ border: none; border-radius: var(--radius-md); font-size: 1rem; font-family: var(--font-main); font-weight: 600; background-color: var(--primary); color: white; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; line-height: 1.5; text-align: center; display: flex; align-items: center; justify-content: center; } .auth-form .btn-main:hover { background-color: var(--primary-700); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .auth-form .btn-main:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .auth-footer { margin-top: 1.5rem; margin-bottom: 0.5rem; /* Add bottom margin to prevent sticking to bottom */ } .auth-footer p { margin: 0; padding: 0; line-height: 1.4; } .auth-footer a { color: var(--primary); text-decoration: none; font-weight: 500; } .auth-footer a:hover { text-decoration: underline; } .error-message { color: #dc2626; font-size: 0.875rem; margin-top: 0.5rem; text-align: left; } .success-message { color: var(--green-dark); font-size: 0.875rem; margin-top: 0.5rem; text-align: left; } .user-profile { position: fixed; top: 1rem; right: 1rem; background: white; border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 1rem; z-index: 100; display: flex; align-items: center; gap: 1rem; } .profile-info { display: flex; flex-direction: column; gap: 0.25rem; } .profile-info span:first-child { font-weight: 600; color: var(--text); } .email-display { font-size: 0.875rem; color: var(--text-secondary); } .btn-secondary { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; } .btn-secondary:hover { background: var(--surface-dark); border-color: var(--border-dark); } /* ========================================================================== GLOBAL VARIABLES ========================================================================== */ :root { --green-light: #2bb57e; --green-dark: #1c9b6d; --blue-light: #29c6f6; --blue-dark: #008db3; --gray-bg: #f5f5f5; --gray-border: #cccccc; --font-main: 'Poppins', sans-serif; /* Design tokens aligned with brand */ --primary: var(--green-dark); --primary-200: var(--green-light); --primary-700: #0f573c; --accent: var(--blue-dark); --accent-200: var(--blue-light); /* Enhanced surface colors with gradients */ --surface: #fafbfc; --surface-alt: #f0f2f5; --surface-dark: #e8eaed; --surface-darker: #dde1e6; /* Rich border colors */ --border: #d1d5db; --border-light: #e5e7eb; --border-dark: #9ca3af; /* Enhanced text colors */ --text: #1f2937; --text-secondary: #6b7280; --text-muted: #9ca3af; /* Premium accent colors */ --gold: #f59e0b; --gold-light: #fbbf24; --purple: #8b5cf6; --purple-light: #a78bfa; --teal: #14b8a6; --teal-light: #22d3ee; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --space-1: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* Elevation */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 2px 6px rgba(0,0,0,0.06); --shadow-md: 0 6px 16px rgba(0,0,0,0.08); } /* ========================================================================== UNIFIED TITLE SYSTEM ========================================================================== */ /* Main section titles - larger and elegant */ .section-title { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 var(--space-4) 0; padding: var(--space-3) var(--space-4); background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); color: white; border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(28, 155, 109, 0.25); display: flex; align-items: center; justify-content: center; gap: var(--space-3); position: relative; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .section-title::before { font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } /* Special styling for different sections */ .section-title.workflow { background: linear-gradient(135deg, #1c9b6d 0%, #008db3 100%); } .section-title.catalog { background: linear-gradient(135deg, #008db3 0%, #1c9b6d 100%); margin-bottom: 6px; /* Reduced margin for tighter spacing */ margin-top: 0; } .section-title.assistant { background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); } /* Unified button system - Meddenovo style */ .btn-main, #submit-receptor, #add-peptide, #chat-send, .btn-dock, .btn-view { background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); color: white; border: none; border-radius: var(--radius-md); padding: 12px 20px; font-size: 14px; font-weight: 600; font-family: var(--font-main); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(28, 155, 109, 0.2); text-transform: none; letter-spacing: 0.3px; } .btn-main:hover, #submit-receptor:hover, #add-peptide:hover, #chat-send:hover, .btn-dock:hover, .btn-view:hover { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--green-dark) 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(28, 155, 109, 0.3); } .btn-main:active, #submit-receptor:active, #add-peptide:active, #chat-send:active, .btn-dock:active, .btn-view:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(28, 155, 109, 0.2); } .btn-main:disabled, #submit-receptor:disabled, #add-peptide:disabled, #chat-send:disabled, .btn-dock:disabled, .btn-view:disabled { background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%); color: #f8f9fa; cursor: not-allowed; opacity: 0.6; transform: none; box-shadow: none; } /* ========================================================================== 1. GLOBAL RESET & PAGE SETUP ========================================================================== */ /* Reset base styles and layout */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; /* Ensures absolutely positioned children are relative to this */ box-sizing: border-box; font-family: var(--font-main); background: #f8fafc; color: #333; line-height: 1.45; overflow: hidden; /* prevent page-level scrollbars; internal panels handle scroll */ } button, input, .input-group button, .catalog-tab-button, .toggle-label, .text-instructions, .wizard-step-arrow h3 { white-space: nowrap; /* no return to line */ overflow: hidden; /* no overflow */ text-overflow: ellipsis; /* add ellipsis for overflowed text */ } /* ========================================================================== TOP NAVIGATION BAR ========================================================================== */ #top-navbar { position: fixed; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); } .navbar-left { display: flex; align-items: center; width: minmax(360px, 480px); /* Match info panel width */ justify-content: center; /* Center logo within this width */ padding-left: 100px; /* Add left margin to center better */ padding-left: 100px; /* Add left margin to center better */ } .navbar-logo { display: flex; align-items: center; justify-content: center; } .navbar-logo img { height: 65px; width: auto; } .navbar-right { display: flex; align-items: center; } /* ========================================================================== INTEGRATED USER PROFILE ========================================================================== */ .user-profile-integrated { display: flex; align-items: center; gap: 12px; font-family: var(--font-main); position: relative; } .profile-info-inline { display: flex; align-items: center; gap: 12px; } .profile-avatar-inline { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 16px; flex-shrink: 0; } .profile-text-inline { display: flex; flex-direction: column; min-width: 0; } .profile-name-inline { font-weight: 600; color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-email-inline { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-dropdown-trigger { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 50%; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(20px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .profile-dropdown-trigger:hover { background: rgba(255, 255, 255, 1); border-color: var(--primary); transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } .profile-dropdown-trigger.active { background: var(--primary); border-color: var(--primary); transform: scale(1.05); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .dropdown-arrow { color: var(--text-muted); font-size: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; } .profile-dropdown-trigger:hover .dropdown-arrow { color: var(--primary); } .profile-dropdown-trigger.active .dropdown-arrow { transform: rotate(180deg); color: white; } .profile-dropdown-menu-elegant { position: absolute; top: 100%; right: 0; margin-top: 12px; background: white; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08); min-width: 180px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.95); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1001; overflow: hidden; backdrop-filter: blur(20px); } .profile-dropdown-menu-elegant.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .dropdown-item-elegant { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border: none; background: none; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-align: left; position: relative; } .dropdown-item-elegant:hover { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%); color: var(--error); transform: translateX(2px); } .dropdown-item-elegant:hover .logout-icon { transform: translateX(2px); color: var(--error); } .logout-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--text-muted); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .logout-icon svg { width: 16px; height: 16px; } /* ========================================================================== USER PROFILE DROPDOWN ========================================================================== */ .user-profile-dropdown { position: relative; font-family: var(--font-main); } .profile-trigger { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); min-width: 220px; backdrop-filter: blur(10px); } .profile-trigger:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } .profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px; flex-shrink: 0; } .profile-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .profile-name { font-weight: 600; color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-email { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dropdown-arrow { color: var(--text-muted); font-size: 12px; transition: transform 0.2s ease; flex-shrink: 0; } .profile-trigger.active .dropdown-arrow { transform: rotate(180deg); } .profile-dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); min-width: 300px; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: all 0.2s ease; z-index: 1001; } .profile-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-header { padding: 20px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%); border-radius: 10px 10px 0 0; } .profile-details { display: flex; align-items: center; gap: 16px; } .profile-avatar-large { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 20px; flex-shrink: 0; } .profile-info-large h4 { color: white; font-size: 16px; font-weight: 600; margin: 0 0 4px 0; } .profile-info-large p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin: 0; } .dropdown-divider { height: 1px; background: var(--border); margin: 0; } .dropdown-actions { padding: 8px 0; } .dropdown-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; border: none; background: none; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: left; } .dropdown-item:hover { background: var(--background); color: var(--primary); } .dropdown-item .icon { font-size: 16px; width: 20px; text-align: center; } .logout-item { color: var(--error); } .logout-item:hover { background: rgba(239, 68, 68, 0.1); color: var(--error); } /* ========================================================================== 2. INFO PANEL (LEFT SIDEBAR UI) ========================================================================== */ /* Responsive layout with flexible info panel */ #main-layout { display: grid; grid-template-columns: 480px 1fr 400px; /* fixed info panel | flexible viewer | fixed chat */ width: 100%; height: calc(100dvh - 80px); /* Subtract navbar height */ margin-top: 80px; /* Offset for fixed navbar */ min-width: 0; min-height: 0; /* Ensure it's visible when shown */ visibility: visible; opacity: 1; } #info-panel, #viewer-container, #custom-chat { min-width: 0; min-height: 0; } #info-panel { width: 100%; min-width: 360px; max-width: 480px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #f9fafb 100%); padding: 0; /* Remove padding to eliminate gap */ box-sizing: border-box; border-right: 1px solid var(--border); display: flex; flex-direction: column; position: relative; /* Pour que le catalog puisse se positionner */ box-shadow: 2px 0 16px rgba(0, 0, 0, 0.06); /* Force the panel to not exceed its max width */ flex: 0 0 auto; margin-right: 0; padding-right: 0; } #panel-body{ flex-grow: 1; overflow-y: visible; /* No scrolling on panel body */ min-height: 0; padding: 20px 16px 16px 16px; /* Reduced left/right padding for more space */ display: flex; flex-direction: column; gap: 20px; /* Increased gap for better spacing between workflow and catalog */ align-items: center; /* Center the content horizontally */ } /* No scrollbar for panel body - scrolling only in lists */ /* Remove resizer visuals */ #panel-resizer { display: none !important; } #panel-resizer::after { display: none !important; } /* Fix button heights and spacing */ button, input[type="text"], input[type="number"] { min-height: 40px; max-height: 40px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Modern catalog footer */ #catalog-bar { flex-shrink: 0; position: absolute; bottom: 0; left: 0; right: 0; /* extend to full width of panel */ background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%); border-top: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15), 0 -2px 8px rgba(0,0,0,0.1); z-index: 1000; overflow: hidden; /* Prevent scrollbar from going under catalog */ pointer-events: none; backdrop-filter: blur(10px); } #catalog-bar * { pointer-events: auto; /* Re-enable events for catalog content */ } /* === Logo Meddenovo === */ #meddenovo-logo { display: flex; justify-content: center; align-items: center; } #meddenovo-logo img { max-width: 60%; /* smaller logo to save space */ height: auto; display: block; } /* === Text Feedback Panel === */ #sel-info { font-size: 13px; margin-top: 8px; line-height: 1.3; } /* ! TODO : réunir */ .text-instructions { font-size: 13px; /* reduced font size to save space */ margin-top: 6px !important; /* reduced margin */ display: flex; align-items: center; justify-content: space-between; gap: 6px; /* reduced gap */ flex-wrap: wrap; margin: 0; } /* Override for peptide details to allow line breaks */ #peptide-details { white-space: normal !important; text-overflow: initial !important; overflow: visible !important; font-size: 13px; line-height: 1.4; word-wrap: break-word; } /* === Toggle Selection Switch === */ .toggle-container { display: flex; align-items: center; gap: 8px; /* reduced gap */ margin: 12px 0; /* reduced margin */ } .toggle-label { font-size: 13px; /* reduced font size */ font-weight: 500; color: #333; line-height: 30px; /* reduced line height */ user-select: none; } .switch { position: relative; display: inline-block; width: 54px; /* smaller toggle */ height: 30px; /* smaller toggle */ } .switch input { opacity: 0; /* Hide native checkbox */ width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 30px; } .slider::before { position: absolute; content: ""; height: 22px; /* smaller slider button */ width: 22px; /* smaller slider button */ left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } .switch input:checked + .slider { background-color: #4caf50; } .switch input:checked + .slider::before { transform: translateX(22px); /* adjusted for smaller toggle */ } /* General input styles removed - too broad and conflicts with specific input-group styles */ /* General input focus styles removed - handled by specific input-group styles */ /* Inline input/button container */ .input-group { display: flex; flex-direction: row; flex-wrap: nowrap; /* Prevent wrapping for horizontal alignment */ gap: 6px; /* reduced gap */ align-items: center; width: 100%; } .input-group input[type="text"], .input-group textarea { flex: 1; margin: 0; font-family: var(--font-main); font-size: 13px; border: 1px solid var(--gray-border); border-radius: 6px; resize: vertical; min-height: 40px; padding: 6px 10px; box-sizing: border-box; background: white; } .input-group textarea { min-height: 60px; max-height: 120px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; } .input-group button { height: 40px; padding: 8px 12px; font-size: 13px; font-weight: 600; font-family: var(--font-main); white-space: nowrap; min-width: 80px; box-sizing: border-box; flex-shrink: 0; /* Prevent button from shrinking */ width: auto; /* Don't take full width */ } /* Focus styles for all inputs - harmonized */ input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(28, 155, 109, 0.2) !important; } /* Specific focus styles for receptor and chat inputs */ #receptor-input:focus, #chat-input:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(28, 155, 109, 0.2) !important; } /* Buttons (default style) */ button { padding: 8px 14px; /* reduced padding */ font-size: 14px; /* increased font size for better readability */ background-color: var(--green-dark); border: none; color: white; border-radius: 8px; font-weight: 600; font-family: var(--font-main); transition: background-color 0.3s ease, transform 0.1s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } /* Override button styles for input-group buttons specifically */ .input-group button { font-size: 13px !important; border-radius: 6px !important; } /* Hover State (Generic) */ button:hover { background-color: var(--green-light); transform: translateY(-1px); } /* Clear button (override) */ #clear-selection-btn { background: linear-gradient(90deg, #fce3e3, #f9d0d0); color: #a80000; font-weight: 600; border: none; border-radius: 12px; padding: 8px 14px; font-size: 14px; /* increased font size for consistency */ min-height: 40px; max-height: 40px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.2s ease-in-out; } #clear-selection-btn:hover { background: linear-gradient(90deg, #f9cece, #f8afaf); box-shadow: 0 3px 6px rgba(0,0,0,0.08); } #clear-selection-btn .icon { font-size: 16px; line-height: 1; } /* Interaction Info Section */ .text-info h3 { font-size: 16px; /* reduced from 18px */ font-weight: 700; margin-bottom: var(--space-2); /* reduced margin */ border-left: 0; padding-left: 0; color: var(--text); text-transform: none; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; } /* Brand gradient text utility */ .gradient-text { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Ensure gradient takes precedence on titled sections */ .text-info h3.gradient-text { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Decorative underline for titles */ .title-underline { position: relative; margin-bottom: var(--space-3); } .title-underline::after { content: ""; display: block; width: 36px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; margin-top: 6px; } /* Panel section cards */ .panel-section { background: #ffffff; border: 1px solid #d1d5db; border-radius: 12px; padding: var(--space-3); /* reduced padding for more content space */ margin-bottom: var(--space-3); /* reduced margin for compactness */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); margin-left: 0; margin-right: 0; /* take full available width */ } .section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: var(--space-2); } .section-header h3 { margin:0; font-size: 18px; } .section-actions { display:flex; align-items:center; gap:8px; } /* Form controls */ .form-control { width:100%; padding: 10px 12px; font-size:14px; border:1px solid var(--border); border-radius: var(--radius-md); background:#fff; box-sizing:border-box; } .form-row { display:flex; gap: var(--space-2); align-items:center; flex-wrap:wrap; } /* Button system */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-md); font-weight: 600; border: 0; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); min-height: 40px; font-size: 13px; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn:hover::before { left: 100%; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .btn--primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-200) 100%); color: #fff; box-shadow: 0 2px 8px rgba(28, 155, 109, 0.2); } .btn--ghost { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%); color: var(--primary); border: 2px solid var(--border-light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .btn--danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; box-shadow: 0 2px 12px rgba(239, 68, 68, 0.3); } .btn--sm { padding: 6px 10px; font-size: 12px; border-radius: 14px; } .btn--icon { padding: 8px; width: 36px; height: 36px; } /* Map existing buttons to new system without breaking IDs/classes */ .btn-secondary { background: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; } #clear-selection-btn { border-radius: var(--radius-lg); } .btn-dock { background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); } .text-info p { font-size: 14px; color: #444; } /* === Preset Dropdown & Description === */ #preset-select { margin-top: 16px; padding: 6px 12px; font-size: 14px; border-radius: 6px; border: 1px solid #ccc; background-color: white; width: 100%; max-width: 250px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } #preset-desc { display: block; margin-top: 4px; font-size: 13px; color: #444; padding-left: 2px; background: none; box-shadow: none; } /* ========================================================================== 3. MOLSTAR VIEWER ========================================================================== */ /* Viewer occupies the middle column fully */ #viewer-container { position: relative; width: 100%; height: 100%; background-color: #f5f5f5; border-left: none; /* Remove left border to eliminate gap */ border-right: 1px solid #d1d5db; /* Ensure it's visible */ display: block; visibility: visible; opacity: 1; /* Force the viewer to take full space */ min-width: 0; flex: 1; margin-left: 0; padding-left: 0; } /* Modern catalog header */ .catalog-title-wrapper { position: relative; text-align: center; padding: 16px 20px 12px; /* increased padding for more space */ background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .catalog-title { font-family: var(--font-main); text-transform: uppercase; font-weight: 700; font-size: 14px; /* increased from 12px */ letter-spacing: 1.2px; /* increased letter spacing for elegance */ color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; /* increased gap between icon and text */ min-height: 21px; /* match Mexa Assistant height for vertical centering */ } .catalog-title::before { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 40px; height: 2px; background: rgba(255,255,255,0.6); border-radius: 1px; } .catalog-title::after { display: none; } /* Catalog buttons now use unified tab system above */ .tab-buttons { width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box; min-height: 40px; display: flex; justify-content: center; gap: 0; overflow: hidden; border: none; background: transparent; } /* Catalog sticky at bottom of info panel */ #catalog-sticky { position: sticky; bottom: 0; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #ffffff 100%); border-top: 1px solid var(--border); padding: 8px 24px 8px 24px; /* Ultra-compact: minimal bottom padding */ margin-top: auto; z-index: 10; } /* Responsive layout adjustments */ @media (max-width: 1280px){ #main-layout{ grid-template-columns: 420px 1fr 28%; } } @media (max-width: 1024px){ #main-layout{ grid-template-columns: 380px 1fr 25%; } #custom-chat{ display: flex; } } @media (max-width: 768px){ #main-layout{ display: block; } #info-panel{ width: 100%; max-width: none; } #viewer-container{ height: 50vh; } } /* First/last button styling */ .catalog-tab-button:first-child { border-right: 1px solid var(--border); border-radius: 0 0 0 var(--radius-md); } .catalog-tab-button:last-child { border-left: 1px solid var(--border); border-radius: 0 0 var(--radius-md) 0; } /* Modal Overlay */ .modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; justify-content: center; align-items: center; } .hidden { display: none; } /* Modal Container */ .modal-content { background: white; width: 95%; height: 95%; max-width: 1400px; max-height: 900px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 50px rgba(0,0,0,0.4); } /* Modal Header */ .modal-header { background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-radius: 16px 16px 0 0; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-bottom: 1px solid rgba(255,255,255,0.1); } .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6, .modal-header span { color: white; font-size: 18px; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.2); margin: 0; } .modal-tab { background: none; border: none; color: white; font-weight: bold; margin-right: 12px; padding: 6px 16px; cursor: pointer; border-bottom: 3px solid transparent; } .modal-tab.active { border-bottom: 3px solid #fff; } .modal-close { background: none !important; border: none !important; color: white !important; font-size: 20px; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; outline: none !important; box-shadow: none !important; } .modal-close:hover { color: rgba(255, 255, 255, 0.8); } .modal-close:focus { outline: none !important; box-shadow: none !important; } /* Modal body */ .modal-body { flex-grow: 1; padding: 10px; overflow: hidden; display: flex; justify-content: center; align-items: center; } .modal-body img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; } /* ========================================================================== 5. CUSTOM CHATBOT ========================================================================== */ /* Chatbot Header - elegant and prominent */ #custom-chat::before { content: "MEXA ASSISTANT"; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 var(--space-4) 0; padding: var(--space-3) var(--space-4); background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); color: white; border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(28, 155, 109, 0.25); display: flex; align-items: center; justify-content: center; gap: var(--space-3); position: relative; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } #custom-chat::before::after { content: "🤖"; font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } /* Remove old decoration - now handled above */ /* Chat Bubbles */ #chat-history p { max-width: 90%; padding: 10px 14px; margin: 6px 0; border-radius: 16px; line-height: 1.4; white-space: pre-wrap; } /* Bot message */ #chat-history p:has(> span.bot) { background: linear-gradient(90deg, #e7f7f0, #beecda); font-weight: 500; align-self: flex-start; padding: 10px 16px; max-width: 80%; width: fit-content; border-radius: 14px 14px 14px 4px; margin-right: auto; margin-left: 0; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04); } /* User message */ #chat-history p:has(> span.user) { background: linear-gradient(90deg, #def4f9, #c0e7f5); font-weight: 500; align-self: flex-end; padding: 10px 16px; max-width: 80%; width: fit-content; border-radius: 14px 14px 4px 14px; margin-left: auto; margin-right: 0; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04); } /* Inline bot/user markers hidden */ span.user, span.bot { display: none; } /* Bot is typing bubble */ #chat-history p.typing { background-color: #eeeeee; color: #666; font-style: italic; border-radius: 16px; padding: 8px 14px; max-width: fit-content; display: inline-block; margin: 6px 0; position: relative; width: 60px; height: 24px; } /* Animated dots effect */ #chat-history p.typing::after { content: ''; display: inline-block; width: 1em; height: 1em; background-image: radial-gradient(currentColor 0.15em, transparent 0), radial-gradient(currentColor 0.15em, transparent 0), radial-gradient(currentColor 0.15em, transparent 0); background-repeat: no-repeat; background-position: 0 50%, 50% 50%, 100% 50%; background-size: 0.25em 0.25em; animation: typing-dots 1s infinite steps(1); } @keyframes typing-dots { 0% { opacity: 0.3; } 33% { opacity: 0.6; } 66% { opacity: 1; } 100% { opacity: 0.3; } } /* Custom Chatbot */ #custom-chat { width: 100%; height: 100%; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 50%, #f9fafb 100%); display: flex; flex-direction: column; padding: 12px 16px 12px 16px; box-sizing: border-box; border: none; border-radius: 0; box-shadow: none; margin: 0; /* Ensure it's visible */ visibility: visible; opacity: 1; } #chat-history { flex: 1; overflow-y: auto; padding: 16px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 12px; margin: 0 0 16px 0; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Chat input styles - copy from peptide input pattern */ #chat-input { flex: 1 !important; min-height: 40px !important; max-height: 40px !important; padding: 6px 10px !important; border: 1px solid var(--gray-border) !important; border-radius: 6px !important; font-family: var(--font-main) !important; font-size: 13px !important; line-height: 1.3 !important; box-sizing: border-box !important; background: white !important; width: auto !important; /* Override any width: 100% */ min-width: 0 !important; /* Allow flex to shrink properly */ } #chat-send { height: 40px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 600 !important; font-family: var(--font-main) !important; border-radius: 6px !important; box-sizing: border-box !important; white-space: nowrap !important; min-width: 80px !important; flex-shrink: 0 !important; /* Prevent button from shrinking */ width: auto !important; /* Take natural width */ } #chat-send:hover { background: linear-gradient(135deg, #1a7a5a 0%, #007a9b 100%); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } #chat-send:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Disabled input/button styles */ #chat-input:disabled { background-color: #eee; color: #999; cursor: not-allowed; } /* Duplicate styles removed - using unified button system above */ /* ========================================================================== 6. ACTIONS SECTION (FORM TO TRIGGER SCIENTIFIC SCRIPTS) ========================================================================== */ #scientific-actions { display: flex; flex-direction: column; position: relative; overflow: visible; padding: 16px; background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 50%, #ffffff 100%); border: 1px solid #d1d5db; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); margin: 0; /* Remove margin to let panel-body gap handle spacing */ max-height: calc(100vh - 280px); /* More space to prevent overlap with catalog */ flex: 1; min-height: 0; width: 100%; max-width: 100%; } /* Override panel-section styles for workflow */ #scientific-actions.panel-section { background: none; border: none; border-radius: 0; box-shadow: none; margin: 0; padding: 0; } /* No scrollbar for scientific-actions - scrolling only in individual lists */ .tabbed-form { margin-top: 20px; } /* Wizard step content - no extra padding needed */ .tabs { display: flex; gap: 0; margin-top: 0; margin-bottom: -1px; /* Pour que les tabs s'imbriquent dans le contenu */ position: relative; z-index: 10; } /* Workflow tabs - original style */ .tab-button { flex: 1; padding: 10px 12px; /* Reduced padding for more space */ background: #ffffff; color: var(--text); border: 2px solid #d1d5db; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 600; cursor: pointer; font-size: 13px; /* Harmonized with catalog buttons */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative; z-index: 1; min-width: 0; /* Allow flex shrinking */ } .tab-button:hover { background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(28, 155, 109, 0.2); border-color: var(--green-dark); } .tab-button.active { background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); color: white; border-color: var(--green-dark); box-shadow: 0 4px 12px rgba(28, 155, 109, 0.3); transform: translateY(-2px); z-index: 2; } .tab-button.disabled { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); color: #adb5bd; border-color: #dee2e6; cursor: not-allowed; opacity: 0.6; } .tab-button.disabled:hover { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); color: #adb5bd; border-color: #dee2e6; transform: none; box-shadow: none; } /* Catalog tabs - pills design with rounded borders */ .catalog-tab-button { flex: 1; padding: 6px 20px; /* Reduced vertical padding for more compact design */ background: #ffffff; color: var(--text); border: 2px solid #d1d5db; font-weight: 600; cursor: pointer; font-size: 13px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; white-space: nowrap; margin: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .catalog-tab-button:hover { background: #f3f4f6; color: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(28, 155, 109, 0.15); border-color: var(--green-dark); } .catalog-tab-button.active { background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); color: white; border-color: var(--green-dark); box-shadow: 0 3px 8px rgba(28, 155, 109, 0.25); transform: translateY(-1px); z-index: 2; } .catalog-tab-button.disabled { background: #ffffff; color: #adb5bd; border-color: #e5e7eb; cursor: not-allowed; opacity: 0.6; } .catalog-tab-button.disabled:hover { background: #ffffff; color: #adb5bd; border-color: #e5e7eb; transform: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* Binding Site Interface */ .binding-site-interface { padding: 8px; /* Harmonized with other forms */ max-width: 100%; } .btn-back-small { cursor: pointer; font-size: 22px; color: var(--primary); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; font-weight: 600; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin-left: auto; display: inline-block; align-self: center; margin-top: 8px; } .btn-back-small:hover { color: var(--green-dark); transform: translateX(-3px) scale(1.1); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .btn-back-small:active { transform: translateX(-2px) scale(1.05); color: var(--green-dark); } .binding-site-interface .form-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--primary-200); position: relative; } .binding-site-interface .form-title > div:first-child { flex: 1; } .binding-site-interface .form-title h3 { margin: 0 0 4px 0; color: var(--primary); font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .binding-site-interface .form-title p { margin: 0; color: #6b7280; font-size: 12px; line-height: 1.3; } .binding-site-header h4 { margin: 0; color: var(--primary); font-size: 16px; font-weight: 600; } .binding-site-content { max-width: 100%; } .form-section { margin-bottom: 12px; } .form-section:last-child { margin-bottom: 0; } /* Form Titles */ .form-title { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--primary-200); } .form-title h3 { margin: 0 0 4px 0; color: var(--primary); font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .form-title p { margin: 0; color: #6b7280; font-size: 12px; line-height: 1.3; } /* Binding site button styling */ .btn-binding-site { background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); color: white; border: none; border-radius: 4px; padding: 6px 8px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; box-shadow: 0 2px 8px rgba(28, 155, 109, 0.2); } .btn-binding-site:hover { background: linear-gradient(135deg, var(--green-light) 0%, var(--blue-light) 100%); transform: scale(1.1); box-shadow: 0 4px 12px rgba(28, 155, 109, 0.3); } .btn-binding-site:disabled { background: #e9ecef; color: #6c757d; cursor: not-allowed; transform: none; box-shadow: none; } .btn-binding-site:disabled:hover { background: #e9ecef; transform: none; box-shadow: none; } .tab-content { background: #ffffff; padding: 20px; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); position: relative; z-index: 1; } .tab-content .form-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; } /* Main CTA buttons - now handled by unified system above */ .form-group { display: flex; gap: 6px; /* Reduced gap for tighter spacing */ margin-bottom: 8px; /* Reduced margin for more compact design */ flex-wrap: wrap; } .form-label { font-size: 13px; font-weight: 500; margin-bottom: 4px; display: block; } /* !! CLEAN HERE*/ /* Wizard Step Arrows */ .wizard-header { display: flex; justify-content: center; align-items: center; margin: 12px 0; gap: 4px; } .wizard-step-arrow { flex: 1; position: relative; color: white; font-weight: 600; font-size: 14px; /* increased font size for consistency */ padding: 10px 16px; border: none; border-radius: 4px; background-color: var(--green-dark); cursor: pointer; transition: all 0.2s ease-in-out; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); text-align: center; display: flex; align-items: center; justify-content: center; min-height: 40px; } .wizard-step-arrow.disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.6; filter: grayscale(80%); pointer-events: none; } .wizard-step-arrow.active { background: linear-gradient(to right, #005070, #0b6145); /* plus foncé que --blue-dark et --green-dark */ color: white; font-weight: bold; box-shadow: 0 0 0 4px white, 0 0 6px 2px rgba(0, 0, 0, 0.3); transform: scale(1.03); } /* Ensure the button stays readable when background is overridden */ .wizard-step-arrow span { z-index: 2; position: relative; } /* Optional hover effect */ .wizard-step-arrow:not(.disabled):hover { transform: translateY(-1px); filter: brightness(1.05); } /* Prevent wizard steps from breaking layout */ .wizard-header { flex-wrap: nowrap; } /* Ensure the wizard section fits visually inside the side panel */ #receptor-tab { padding-top: 8px; padding-bottom: 8px; max-height: none; overflow-y: visible; } #submit-binding-site-container { margin-top: 8px; display: flex; align-items: center; gap: 8px; } #submit-binding-site { width: 100% !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 600 !important; } #binding-site-input { max-width: 50%; /* Half of the form width */ min-height: 40px !important; max-height: 40px !important; font-family: var(--font-main) !important; border: 1px solid var(--gray-border) !important; border-radius: 4px !important; padding: 8px 12px !important; font-size: 14px !important; font-weight: 400 !important; background-color: white !important; color: var(--text-primary) !important; line-height: 1.2 !important; } /* Binding site input focus - harmonized with other inputs */ #binding-site-input:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(28, 155, 109, 0.2) !important; } #binding-site-input::placeholder { color: var(--text-secondary) !important; font-weight: 400 !important; } #binding-site-details { margin: 0; font-size: 13px; } /* Peptide Input Container */ .peptide-input-container { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } /* Receptor Input Container */ .receptor-input-container { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; /* ensures spacing above list identical to peptide */ } /* Receptor input styles - copy from peptide input pattern */ #receptor-input { flex: 1 !important; min-height: 40px !important; max-height: 40px !important; padding: 6px 10px !important; border: 1px solid var(--gray-border) !important; border-radius: 6px !important; font-family: var(--font-main) !important; font-size: 13px !important; line-height: 1.3 !important; box-sizing: border-box !important; background: white !important; width: auto !important; /* Override any width: 100% */ min-width: 0 !important; /* Allow flex to shrink properly */ } #submit-receptor { height: 40px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 600 !important; font-family: var(--font-main) !important; border-radius: 6px !important; box-sizing: border-box !important; white-space: nowrap !important; min-width: 80px !important; flex-shrink: 0 !important; /* Prevent button from shrinking */ width: auto !important; /* Take natural width */ } .peptide-input-container textarea { width: 100%; min-height: 45px; max-height: 80px; padding: 6px 10px; border: 1px solid var(--gray-border); border-radius: 6px; font-family: var(--font-main); font-size: 13px; resize: vertical; line-height: 1.3; white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; } .peptide-input-container button { align-self: stretch; /* Full width */ width: 100% !important; display: block; margin-top: 2px; padding: 8px 12px; font-size: 13px; } /* Hide peptide help - not needed */ .peptide-help { display: none; } /* Peptide */ #peptide-list-container { display: flex; flex-direction: column; gap: 8px; /* Harmonized with other lists */ margin-top: 8px; margin-bottom: 0px; /* No bottom margin for maximum compactness */ /* Show exactly 2 complete peptide items */ max-height: calc(var(--peptide-item-height, 100px) * 2 + 8px); /* 2 items + 1 gap */ overflow-y: auto; /* scroll only when needed */ padding: 8px 8px 2px 8px; /* Further reduced bottom padding */ scrollbar-width: thin; scrollbar-color: var(--primary) var(--surface-alt); } /* Harmonized scrollbar for peptide list */ #peptide-list-container::-webkit-scrollbar { width: 8px; } #peptide-list-container::-webkit-scrollbar-track { background: var(--surface-alt); border-radius: 10px; } #peptide-list-container::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 100%); border-radius: 10px; border: 1px solid var(--surface-alt); } #peptide-list-container::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-200) 0%, var(--primary) 100%); } .peptide-item { display: flex; flex-direction: column; background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%); border: 1px solid #e9ecef; border-radius: 8px; padding: 10px 12px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); box-sizing: border-box; justify-content: center; /* center content vertically */ min-height: var(--peptide-item-height, 100px); /* ensure consistent height */ } /* expose height token used for one-line clamp */ :root { --peptide-item-height: 100px; } /* Ensure docking list follows the same single-item height convention */ :root { --docking-item-height: 130px; } .peptide-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .peptide-item-sequence { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; color: #2c3e50; word-break: break-all; line-height: 1.4; margin: 4px 0 8px 0; padding: 4px 8px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 6px; border-left: 3px solid var(--green-dark); letter-spacing: 0.5px; } .peptide-item:hover { background: #f8fafb; border-color: #dfe6ea; } .peptide-item.selected { background: #e3f2fd; border-color: #2196f3; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); } /* Receptor selected state mirrors peptide/docking */ .receptor-item.selected { background: #e3f2fd !important; border-color: #2196f3 !important; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important; } /* Clickability cues for docking items */ .docking-item.not-clickable { cursor: default; } .docking-item.not-clickable:hover { background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%); border-color: #e9ecef; box-shadow: none; } .docking-item.clickable { cursor: pointer; } .peptide-number { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--green-dark), var(--blue-dark)); color: white; font-weight: 600; font-size: 11px; width: 20px; height: 20px; border-radius: 50%; margin: 0; } .peptide-status { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; } .peptide-status.ready { color: var(--green-dark); font-size: 13px; } .peptide-status.processing { color: #f39c12; font-size: 13px; } .peptide-status.pending { color: #f39c12; font-size: 13px; } .peptide-status.error { color: #e74c3c; font-size: 13px; } .peptide-controls { display: flex; align-items: center; gap: 6px; height: 24px; flex-shrink: 0; } .btn-secondary { background: linear-gradient(135deg, var(--green-dark), var(--blue-dark)); color: white; font-weight: 600; padding: 10px 16px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background 0.2s ease; white-space: nowrap; } .btn-secondary:hover { background: var(--green-light); transform: translateY(-1px); } .btn-secondary.disabled { background-color: #ccc; transform: translateY(-1px); } .btn-icon { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; font-size: 22px; display: inline; cursor: pointer; transition: all 0.2s ease; outline: none !important; box-shadow: none !important; } .btn-icon:hover { transform: scale(1.1); } .btn-icon:focus { outline: none !important; box-shadow: none !important; } .btn-check { color: var(--green-dark) !important; background: none !important; border: none !important; border-radius: 4px; width: 24px !important; height: 24px !important; display: flex; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: all 0.2s ease; } .btn-check:hover { color: var(--green-dark) !important; background: rgba(28, 155, 109, 0.1) !important; transform: scale(1.1); } .btn-delete { color: #dc2626 !important; background: none !important; border: none !important; border-radius: 4px; width: 24px !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: all 0.2s ease; font-size: 18px; font-weight: bold; } .btn-delete:hover { color: #dc2626 !important; background: rgba(220, 38, 38, 0.1) !important; transform: scale(1.1); } .btn-delete:disabled { display: none !important; } .btn-delete.hidden { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; visibility: hidden !important; } .btn-dock { padding: 5px 10px; font-size: 11px; font-weight: 700; border-radius: 14px; background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); color: white; border: 2px solid var(--green-dark); cursor: pointer; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.8px; box-shadow: 0 3px 6px rgba(28, 155, 109, 0.2); transition: all 0.2s ease; } .btn-dock:hover { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--green-dark) 100%); border-color: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(28, 155, 109, 0.3); } .btn-dock:disabled { background: #bdc3c7; border-color: #95a5a6; cursor: not-allowed; transform: none; box-shadow: none; } .btn-view { background: none !important; color: var(--green-dark) !important; font-size: 16px !important; font-weight: bold; border: none !important; border-radius: 50% !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background 0.2s ease; padding: 0 !important; line-height: 1 !important; } .btn-view:hover { background-color: #e2f5ec !important; } /* ========================================================================== 7. OPENDIALOG WEBCHAT INJECTION FIXES ========================================================================== */ #info-panel .od-body-form__container { all: unset !important; /* Reset all styles */ } #info-panel .odl-external-buttons { all: unset !important; display: block !important; margin: 0 !important; padding: 0 !important; width: fit-content !important; } #info-panel .odl-button { font-family: inherit !important; /* Inherit font family from info-panel */ font-size: 14px !important; font-weight: bold !important; padding: 10px 16px !important; background-color: var(--green-dark) !important; color: white !important; border-radius: 6px !important; border: none !important; cursor: pointer !important; text-align: left !important; box-shadow: none !important; display: inline-block !important; margin-top: 16px !important; } #info-panel .odl-button:hover { background-color: var(--green-light) !important; } /* === Force iframe to behave like a normal element inside this box === */ /* #od-webchat > iframe#opendialog-chatwindow { position: static !important; width: 100% !important; height: 100% !important; border: none !important; } */ /* === Optional fix if margins still apply === */ /* .od-chat-window.iframe, .od-chat-window.iframe.opened { margin: 0 !important; } */ /* ========================= Docking Form Styles ========================= */ .docking-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e9ecef; } .docking-header h4 { margin: 0; color: #2c3e50; font-size: 18px; font-weight: 600; } .docking-list-container { display: flex; flex-direction: column; gap: 8px; /* Harmonized with other lists */ margin-top: 8px; margin-bottom: 0px; /* No bottom margin for maximum compactness */ /* Show exactly 3 complete docking items */ max-height: calc(var(--docking-item-height, 110px) * 3 + 16px); /* 3 items + 2 gaps */ overflow-y: auto; padding: 8px 8px 2px 8px; /* Further reduced bottom padding */ scrollbar-width: thin; scrollbar-color: var(--primary) var(--surface-alt); } /* Docking item base visuals (match peptide/receptor items) */ .docking-item { display: flex; flex-direction: column; background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%); border: 1px solid #e9ecef; border-radius: 8px; padding: 10px 12px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); box-sizing: border-box; } /* Receptor list: same visuals as docking list */ #receptor-list-container { display: flex; flex-direction: column; gap: 0; /* Remove gap, use margins on items instead */ margin-top: 8px; margin-bottom: 0px; /* No bottom margin for maximum compactness */ /* Show exactly 4 complete receptor items */ max-height: calc(var(--receptor-item-height, 155px) * 4 + 24px); /* 4 items + 3 margins (8px each) */ overflow-y: auto; padding: 8px 8px 4px 8px; /* Reduced bottom padding */ scrollbar-width: thin; scrollbar-color: var(--primary) var(--surface-alt); } .receptor-item { display: flex; flex-direction: column; background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%); border: 1px solid #e9ecef; border-radius: 8px; padding: 12px 14px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); box-sizing: border-box; cursor: pointer; transition: all 0.2s ease; margin-bottom: 8px; /* Harmonized with other lists */ } :root { --receptor-item-height: 155px; } .receptor-item:hover { background: #f8fafb; border-color: #dfe6ea; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); } /* Receptor header: compact layout with status and receptor info on same line */ .receptor-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .receptor-item-header .receptor-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .peptide-item-header .peptide-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .receptor-item-header .peptide-status { min-width: 80px; text-align: center; font-weight: 600; } .receptor-item-header .peptide-controls { display: flex; gap: 6px; align-items: center; height: 24px; flex-shrink: 0; } /* Receptor meta: compact single line */ .receptor-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0; } /* Harmonized scrollbar for receptor list */ .receptor-list-container::-webkit-scrollbar, #receptor-list-container::-webkit-scrollbar, .docking-list-container::-webkit-scrollbar { width: 8px; } .receptor-list-container::-webkit-scrollbar-track, #receptor-list-container::-webkit-scrollbar-track, .docking-list-container::-webkit-scrollbar-track { background: var(--surface-alt); border-radius: 10px; } .receptor-list-container::-webkit-scrollbar-thumb, #receptor-list-container::-webkit-scrollbar-thumb, .docking-list-container::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 100%); border-radius: 10px; border: 1px solid var(--surface-alt); } .receptor-list-container::-webkit-scrollbar-thumb:hover, #receptor-list-container::-webkit-scrollbar-thumb:hover, .docking-list-container::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-200) 0%, var(--primary) 100%); } .docking-item:hover { background: #f8fafb; border-color: #dfe6ea; } .receptor-item:hover { background: #f8fafb; border-color: #dfe6ea; } .docking-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .docking-item-header .docking-left { flex: 1; min-width: 0; } .docking-item-header .peptide-status { max-width: calc(100% - 84px); /* reserve space for 2 icon buttons */ } .receptor-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .receptor-item-header .receptor-left { flex: 1; min-width: 0; } .receptor-item-header .peptide-status { max-width: calc(100% - 84px); } .docking-info { flex: 1; } .docking-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; } .chip { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; border: 1px solid #e0e6ea; background: #f4f7f9; color: #2c3e50; } .chip-rec { border-left: 3px solid var(--green-dark); } .chip-site { border-left: 3px solid var(--blue-dark); } .docking-seq { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; color: #2c3e50; word-break: break-all; line-height: 1.4; margin: 2px 0; padding: 4px 8px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 6px; border-left: 3px solid var(--green-dark); letter-spacing: 0.5px; } /* Receptor meta line mimics docking */ .receptor-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 2px; } .docking-item.selected { background: #e3f2fd; border-color: #2196f3; box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); } /* status visuals are reused from peptide: .peptide-status.ready/.processing/.error */ .docking-status-message { font-size: 13px; color: #495057; margin: 8px 0; padding: 10px 12px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #dee2e6; display: none; line-height: 1.3; max-height: 3.6em; /* ~3 lignes par défaut */ overflow: hidden; white-space: normal; word-break: break-word; overflow-wrap: anywhere; position: relative; font-weight: 500; } .docking-status-message::before { content: 'ℹ️'; position: absolute; left: 8px; top: 8px; font-size: 12px; } .docking-status-message { padding-left: 24px; /* leave room for icon */ } /* Progress bar for docking */ .docking-progress-container { margin: 4px 0; padding: 0; } .docking-progress-bar { width: 100%; height: 12px; background: #f8f9fa; border-radius: 4px; overflow: hidden; position: relative; border: 1px solid #dee2e6; } .docking-progress-fill { height: 100%; background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); border-radius: 3px; transition: width 0.3s ease; width: 0%; } .docking-progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; color: white; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.9); z-index: 1; } .docking-controls { display: flex; gap: 8px; align-items: center; } .docking-controls .btn-icon { flex: 0 0 auto; } /* reuse peptide button styles: .btn-icon, .btn-check, .btn-delete already defined above */ .no-dockings { text-align: center; color: #6c757d; font-style: italic; margin: 30px 0; font-size: 14px; } /* ========================================================================== MICRO-ANIMATIONS & TRANSITIONS FLUIDES ========================================================================== */ /* Smooth transitions for all interactive elements */ * { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Enhanced button hover effects with 3D elevation */ .btn:hover, button:hover, .wizard-step-arrow:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1); } /* Tab buttons with subtle hover effect to prevent overlap */ .tab-button:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .btn:active, button:active, .tab-button:active, .wizard-step-arrow:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* Enhanced tab button animations */ .tab-button { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .tab-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .tab-button:hover::before { left: 100%; } .tab-button.active { transform: none; /* remove scale to prevent overlap */ box-shadow: 0 2px 8px rgba(15, 87, 60, 0.2); z-index: 1; /* ensure active tab is above others */ } /* Wizard step arrows with enhanced animations */ .wizard-step-arrow { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .wizard-step-arrow:not(.disabled):hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .wizard-step-arrow.active { animation: pulse-glow 2s ease-in-out infinite alternate; } @keyframes pulse-glow { 0% { box-shadow: 0 0 0 4px white, 0 0 6px 2px rgba(0, 0, 0, 0.3); } 100% { box-shadow: 0 0 0 6px white, 0 0 12px 4px rgba(0, 0, 0, 0.4); } } /* Input fields with focus animations */ input[type="text"], input[type="number"], textarea { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--primary), var(--accent)) border-box; } /* Removed conflicting focus styles - now handled by unified rule above */ /* Force focus styles with maximum specificity to override Mol* CSS */ html body #main-layout #receptor-input:focus, html body #main-layout #chat-input:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(28, 155, 109, 0.2) !important; } /* Additional specificity to override any plugin CSS */ .msp-plugin #receptor-input:focus, .msp-plugin #chat-input:focus, #receptor-input:focus:not(.msp-plugin), #chat-input:focus:not(.msp-plugin) { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(28, 155, 109, 0.2) !important; } /* Toggle switch with smooth animation */ .switch { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .switch:hover { transform: scale(1.05); } .slider { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Catalog bar with subtle hover effects */ .catalog-tab-button { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .catalog-tab-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.6s; } .catalog-tab-button:hover::before { left: 100%; } .catalog-tab-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Panel sections with subtle entrance animations */ .panel-section { animation: fade-in-up 0.6s ease-out; } @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Logo animation on page load */ #meddenovo-logo img { animation: logo-grow 1.2s ease-out; } @keyframes logo-grow { from { opacity: 0; transform: scale(0.8) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } /* ========================================================================== RESPONSIVE DESIGN & MEDIA QUERIES ========================================================================== */ /* Medium screens - tablets and small laptops */ @media (max-width: 1200px) { #main-layout { grid-template-columns: minmax(360px, 480px) 1fr minmax(180px, 22%); } #info-panel { min-width: 360px; max-width: 480px; } .tabbed-form { margin-top: 16px; } .tabs { gap: 2px; } .tab-button { padding: 6px 8px; font-size: 13px; } } /* Small screens - mobile and tablets */ @media (max-width: 768px) { #main-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "info" "viewer" "chat"; } #info-panel { grid-area: info; width: 100%; min-width: 100%; max-width: 100%; min-height: auto; max-height: 300px; order: 1; } #viewer-container { grid-area: viewer; order: 2; } #custom-chat { grid-area: chat; order: 3; width: 100%; min-width: 100%; max-width: 100%; } .tabbed-form { margin-top: 12px; } .tabs { gap: 1px; } .tab-button { padding: 4px 6px; font-size: 12px; } .wizard-header { flex-direction: column; gap: 8px; } .wizard-step-arrow { width: 100%; clip-path: none; border-radius: 4px; } } /* Large screens - maintain proportions */ @media (min-width: 1600px) { #main-layout { grid-template-columns: minmax(400px, 520px) 1fr minmax(220px, 24%); } #info-panel { min-width: 400px; max-width: 520px; } } /* Extra large screens - optimize for wide displays */ @media (min-width: 2000px) { #main-layout { grid-template-columns: minmax(440px, 560px) 1fr minmax(240px, 22%); } #info-panel { min-width: 440px; max-width: 560px; } } /* Extra small screens */ @media (max-width: 480px) { #info-panel { padding: 12px 0 0 12px; } .panel-section { padding: var(--space-2); margin-right: 12px; } .tab-content { padding: 8px; } .input-group { flex-direction: column; align-items: stretch; } .input-group input, .input-group button { width: 100%; } } /* High DPI and zoom support */ @media (min-resolution: 2dppx) { #info-panel { border-right-width: 0.5px; } .panel-section { border-width: 0.5px; } } /* Ensure catalog bar is always responsive */ #catalog-bar { width: 100%; box-sizing: border-box; overflow: hidden; } #catalog-bar .tab-buttons { width: 100%; box-sizing: border-box; } .catalog-tab-button { flex: 1; min-width: 0; box-sizing: border-box; } /* Info buttons */ .btn-info { background: none; color: var(--green-dark); border: none; border-radius: 4px; width: 24px !important; height: 24px !important; display: flex; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease; padding: 0 !important; font-size: 14px !important; font-weight: bold; } .btn-info:hover { background: rgba(28, 155, 109, 0.1); color: var(--green-dark); transform: scale(1.1); } .btn-info:disabled { background: #6c757d !important; cursor: not-allowed !important; opacity: 0.6 !important; transform: none !important; box-shadow: none !important; } .btn-info:disabled:hover { background: #6c757d !important; transform: none !important; box-shadow: none !important; } .btn-info .info-icon { width: 18px; height: 18px; } .btn-download { background: none; color: var(--green-dark); border: none; border-radius: 4px; width: 24px !important; height: 24px !important; display: flex; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease; padding: 0 !important; font-size: 14px !important; font-weight: bold; } .btn-download:hover { background: rgba(28, 155, 109, 0.1); color: var(--green-dark); transform: scale(1.1); } .btn-download .download-icon { width: 18px; height: 18px; } .btn-download:disabled { background: #6c757d !important; cursor: not-allowed !important; opacity: 0.6 !important; transform: none !important; box-shadow: none !important; } .btn-download:disabled:hover { background: #6c757d !important; transform: none !important; box-shadow: none !important; } .btn-check .check-icon { width: 18px; height: 18px; } .btn-binding-site { color: var(--green-dark) !important; background: none !important; border: none !important; border-radius: 4px; width: 24px !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: all 0.2s ease; } .btn-binding-site:hover { color: var(--green-dark) !important; background: rgba(28, 155, 109, 0.1) !important; transform: scale(1.1); } .btn-binding-site .binding-icon { width: 18px; height: 18px; } /* Info Modal Styles - Cohérent avec le design existant */ .info-modal .modal-content { width: 90%; height: auto; max-width: 1400px; max-height: 90vh; min-height: 400px; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.4); display: flex; flex-direction: column; background: white; overflow: hidden; } .info-modal .modal-body { overflow: visible; min-height: 300px; padding: 20px; flex: 1; display: flex; flex-direction: column; background: white; } .modal-header-actions { display: flex; align-items: center; gap: 12px; } .info-modal .modal-header { position: relative; background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-radius: 16px 16px 0 0; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-bottom: 1px solid rgba(255,255,255,0.1); } .info-modal .modal-header > div:first-child { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; } .modal-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .info-modal .modal-header > div:first-child span { color: white; font-size: 18px; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .btn-export-header { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } .btn-export-header:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); } .btn-export-header .download-icon { width: 14px; height: 14px; } .info-table { width: 100%; border-collapse: collapse; margin: 12px auto 16px auto; flex: 1; table-layout: fixed; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border: 1px solid #e5e7eb; max-width: 1000px; } .info-table th:nth-child(1), .info-table td:nth-child(1) { width: 20%; } .info-table th:nth-child(2), .info-table td:nth-child(2) { width: 45%; word-break: break-all; overflow-wrap: anywhere; } .info-table th:nth-child(3), .info-table td:nth-child(3) { width: 35%; } .info-table th, .info-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; transition: all 0.2s ease; } .info-table th { background: #f8fafc; font-weight: 700; color: #1f2937; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .info-table td { font-size: 14px; color: #4b5563; background: white; } .info-table tr:hover td { background: #f8fafc; } .info-table tr:last-child td { border-bottom: none; } /* Style pour la séquence peptidique - joli style */ .info-table td[style*="font-family: 'Courier New'"] { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-left: 4px solid var(--green-dark); font-weight: 600; color: #0c4a6e; letter-spacing: 0.5px; position: relative; } .info-table td[style*="font-family: 'Courier New'"]::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--green-dark), var(--blue-dark)); } /* Style pour les valeurs avec unités */ .info-table td:contains("Da"), .info-table td:contains("Ų") { font-weight: 600; color: var(--green-dark); } /* Docking info compact - simple et neutre */ .docking-info-compact { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; } .docking-info-compact .info-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .docking-info-compact .info-item { display: flex; align-items: center; gap: 6px; } .docking-info-compact .info-label { font-weight: 600; color: #64748b; font-size: 12px; } .docking-info-compact .info-value { font-family: 'Courier New', monospace; color: #1e293b; font-weight: 500; background: #ffffff; padding: 2px 6px; border-radius: 4px; border: 1px solid #e2e8f0; font-size: 12px; } /*# sourceMappingURL=style.css.map*/