kekule/src/widgets/themes/default/chemWidget.css

Open source JavaScript toolkit for chemoinformatics

/* ChemViewer */
.K-Chem-Periodic-Table
{
    cursor: default;
}
.K-Chem-Periodic-Table .K-Chem-Periodic-Table-Legend
{
    float: right;
    position: relative;
    text-decoration: none;
    border: 1px solid;
    padding: 0.3em 0.5em;
}
.K-Chem-Periodic-Table .K-Chem-Periodic-Table-Legend-Content
{
    position: absolute;
    right: 0;
    bottom: 1.6em;
    padding: 0.5em;
    display: none;
    border: 1px solid;
    z-index: 10;
    cursor: default;
}
.K-Chem-Periodic-Table .K-Chem-Periodic-Table-Legend:hover .K-Chem-Periodic-Table-Legend-Content,
.K-Chem-Periodic-Table .K-Chem-Periodic-Table-Legend:active .K-Chem-Periodic-Table-Legend-Content
{
    display: block;
}

.K-Chem-Periodic-Table .K-Chem-Periodic-Table-Legend .K-Chem-Periodic-Table-Legend-Color,
.K-Chem-Periodic-Table .K-Chem-Periodic-Table-Legend .K-Chem-Periodic-Table-Legend-Colors
{
    float: left;
}
.K-Chem-Periodic-Table .K-Chem-Periodic-Table-Legend .K-Chem-Periodic-Table-Legend-Colors
{
    width: 20em;
}
.K-Chem-Periodic-Table .K-Chem-Periodic-Table-Legend .K-Chem-Periodic-Table-Legend-Color
{
    width: 47%;
    border: 1px solid;
    padding: 1px;
    margin: 1px;
    white-space: nowrap;
    font-size: 1em;
    text-align: center;
}

.K-Chem-Periodic-Table table
{
    border-collapse: collapse;
    margin: 0.5em auto;
}

.K-Chem-Periodic-Table tr,
.K-Chem-Periodic-Table td
{
    text-align: center;
    vertical-align: middle;
}
.K-Chem-Periodic-Table td.K-Chem-Periodic-Table-Head-Cell-Group
{
    vertical-align: bottom;
}

.K-Chem-Periodic-Table td
{
    padding: 0;
    margin: 0;
}
.K-Chem-Periodic-Table td.K-Chem-Periodic-Table-Elem-Cell,
.K-Chem-Periodic-Table td.K-Chem-Periodic-Table-Elem-StubsCell
{
    border: 1px solid;
}
.K-Chem-Periodic-Table-Head-Cell-Content
{
    display: inline-block;
    position: relative;
    padding: 0.3em 0.3em;
    font-weight: bold;
    font-size: 1.1em;
}
.K-Chem-Periodic-Table-Elem-Cell-Content
{
    display: inline-block;
    padding: 0.3em 0.3em;
    text-align: center;
    line-height: 1.1;
    width: 6em;
    font-size: 0.8em;
    letter-spacing: -0.1em;
}
.K-Chem-Periodic-Table-Legend .K-Chem-Periodic-Table-Elem-Cell-Content
{
    float: left;
    width: 8em;
    padding: 0.5em;
    color: #fff;
    font-size: 1.1em;
}
.K-Chem-Periodic-Table td.K-Chem-Periodic-Table-Elem-Cell .K-Chem-Periodic-Table-Elem-Cell-Content:hover
{
    transform: scale(1.2);
    outline: 1px solid;
    box-shadow: 1px 1px 2px;
    z-index: 5;
}
.K-Chem-Periodic-Table td.K-Chem-Periodic-Table-Elem-Cell.K-State-Disabled .K-Chem-Periodic-Table-Elem-Cell-Content:hover
{
    transform: none;
    outline: inherit;
    box-shadow: inherit;
    z-index: inherit;
}

.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Atomic-Num
{
    float: left;
    font-weight: bold;
}
.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Atomic-Weight
{
    float: right;
}
.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Elem-Symbol,
.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Elem-Symbol-Stubs
{
    clear: both;
    display: block;
    font-size: 3em;
    font-weight: bold;
}
.K-Chem-Periodic-Table-Legend .K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Elem-Symbol
{
    font-size: 2em;
}
.K-Chem-Periodic-Table-Legend .K-Chem-Atomic-Num,
.K-Chem-Periodic-Table-Legend .K-Chem-Atomic-Weight
{
    max-width: 40%;
}
.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Elem-Symbol-Stubs span
{
    font-size: 50%;
    /*line-height: 2em;*/
    vertical-align: middle;
}
.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Elem-Name
{
    display: block;
    clear: both;
}
.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Atomic-Num,
.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Atomic-Weight,
.K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Elem-Name
{
    opacity: 0.6;
}

.K-Chem-Periodic-Table.K-Chem-Periodic-Table-Mini .K-Chem-Atomic-Weight,
.K-Chem-Periodic-Table.K-Chem-Periodic-Table-Mini .K-Chem-Elem-Name,
.K-Chem-Periodic-Table.K-Chem-Periodic-Table-Mini .K-Chem-Periodic-Table-Head-Cell .K-Chem-Periodic-Table-Head-Cell-Content
{
    display: none;
}
.K-Chem-Periodic-Table.K-Chem-Periodic-Table-Mini .K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Elem-Symbol,
.K-Chem-Periodic-Table.K-Chem-Periodic-Table-Mini .K-Chem-Periodic-Table-Elem-Cell-Content .K-Chem-Elem-Symbol-Stubs
{
    font-size: 1.5em;
}
.K-Chem-Periodic-Table.K-Chem-Periodic-Table-Mini .K-Chem-Periodic-Table-Elem-Cell-Content
{
    width: 3em;
}
.K-Chem-Periodic-Table.K-Chem-Periodic-Table-Mini .K-Chem-Periodic-Table-Legend .K-Chem-Periodic-Table-Elem-Cell-Content
{
    width: 6em;
}

.K-Chem-Displayer-DrawContext-Parent,
.K-Chem-Viewer-UiContext-Parent
{
    display: block;
    /*
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.K-Chem-Viewer
{
    /* default size of viewer */
    width: 20em;
    height: 15em;
}

.K-Chem-Viewer.K-State-Hover
{

}

.K-Chem-Viewer2D /* .K-Chem-Displayer-DrawContext-Parent*/
{

}
.K-Chem-Viewer3D /* .K-Chem-Displayer-DrawContext-Parent*/
{
    /*background-color: #000;*/
}

.K-Chem-Viewer .K-Chem-InnerToolbar  /* default location */
{
    display: block;
    /*
    right: 0.5em;
    bottom: 0.5em;
    */
    z-index: 10;
}
.K-Chem-Viewer .K-Chem-InnerToolbar.K-Chem-Viewer-Embedded-Toolbar
{
    position: absolute;
}
.K-Chem-Viewer .K-Chem-InnerToolbar.K-Button
{
    height: 37px;
}

.K-Chem-Viewer .K-Chem-Viewer-Caption
{
    display: block;
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    text-align: center;
}

.K-Chem-Viewer .K-Error-Report
{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 0.3em 0.6em;
}

.K-Chem-Viewer-Editor-FullClient
{
    /* important, override the adjusted popup settings (maybe absolute positioned) by global manager */
    position: fixed !important;
    top: 0px !important;
    left: 0px !important;
}

.K-SpectrumInspector
{
    width: 60em;
    height: 25em;
    overflow: hidden;
}
.K-SpectrumInspector .K-SpectrumInspector-Client
{
    display: flex;
    flex-direction: row-reverse;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
.K-SpectrumInspector.K-SpectrumInspector-AssocTailing .K-SpectrumInspector-Client
{
    flex-direction: row;
}
.K-SpectrumInspector.K-Layout-V .K-SpectrumInspector-Client
{
    flex-direction: column-reverse;
}
.K-SpectrumInspector.K-SpectrumInspector-AssocTailing.K-Layout-V .K-SpectrumInspector-Client
{
    flex-direction: column;
}
.K-SpectrumInspector .K-SpectrumInspector-Client .K-SpectrumInspector-ClientComponentHolder
{
    /*border: 1px solid red;*/
    padding: 0;
    margin: 0;
}
.K-SpectrumInspector .K-SpectrumInspector-Client .K-SpectrumInspector-ClientComponentHolder-AssocViewer
{
    flex: 0 0 25%;
}
.K-SpectrumInspector .K-SpectrumInspector-Client .K-SpectrumInspector-ClientComponentHolder-SpectrumViewer
{
    flex: 1 1 auto;
}
.K-SpectrumInspector .K-SpectrumInspector-Client .K-SpectrumInspector-ClientComponentHolder-ModifierPanel
{
    /*flex: 0 0 content;*/
    display: none;
    flex: 0 0 auto;
}
.K-SpectrumInspector .K-SpectrumInspector-Client .K-SpectrumInspector-ClientComponentHolder-HiddenCanvas
{
    flex: 0 0 0;
    display: none;
}
.K-SpectrumInspector.K-SpectrumInspector-Editing .K-SpectrumInspector-Client .K-SpectrumInspector-ClientComponentHolder-ModifierPanel
{
    display: block;
}

.K-SpectrumInspector .K-SpectrumInspector-Client .K-Chem-Viewer
{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}


.K-MenuItem.K-SpectrumInspector-MenuItem-SpectrumDataSection
{
    margin-left: 2em;
}

.K-Chem-StructureNodeSelectPanel, .K-Chem-StructureConnectorSelectPanel
{
    width: 20em;
    /*height: 30em;*/
}

.K-Chem-CheckResultListView
{
    padding: 0;
}

.K-Chem-CheckResultListView .K-Chem-CheckResultListView-Item
{
    display: block;
    padding: 0.2em 0.5em;
    padding-left: 20px;
    margin: 0;
    border-bottom: 1px solid;
    background-repeat: no-repeat;
    background-position-x: 4px;
    background-position-y: 4px;
}

.K-Chem-CheckResultListView .K-Chem-CheckResultListView-Item .K-Chem-CheckResultListView-ItemBody,
.K-Chem-CheckResultListView .K-Chem-CheckResultListView-Item .K-Chem-CheckResultListView-Item-SolutionSection
{
    vertical-align: middle;
    padding-left: 0.3em;
}
.K-Chem-CheckResultListView .K-Chem-CheckResultListView-Item .K-Chem-CheckResultListView-ItemBody
{
    display: block;
}
.K-Chem-CheckResultListView .K-Chem-CheckResultListView-Item .K-Chem-CheckResultListView-Item-SolutionSection
{
    display: none;
}
.K-Chem-CheckResultListView.K-Chem-CheckResultListView-SolutionEnabled .K-Chem-CheckResultListView-Item.K-State-Selected .K-Chem-CheckResultListView-Item-SolutionSection
{
    display: block;
    padding-right: 0.3em;
    text-align: right;
}
.K-Chem-CheckResultListView.K-Chem-CheckResultListView-SolutionEnabled .K-Chem-CheckResultListView-Item.K-State-Selected .K-Chem-CheckResultListView-Item-SolutionSection .K-Chem-CheckResultListView-Item-SolutionWidget
{
    font-size: 0.8em;
    margin: 0.3em 0.5em;
}

.K-Chem-IssueInspector
{
    /* initial size */
    width: 20em;
    height: 30em;
    padding: 0;
    overflow: hidden;
}
.K-Chem-IssueInspector .K-Chem-IssueInspector-SubPart
{
    margin: 0;
    padding: 0;
}
/*
.K-Chem-IssueInspector .K-Chem-IssueInspector-ToolPanel
{
    padding: 0.2em;
}
*/
.K-Chem-IssueInspector .K-Chem-IssueInspector-ListPanel
{
    position: absolute;
    /*top: 2.8em;*/
    left: 0;
    right: 0;
    bottom: 0;
}
.K-Chem-IssueInspector .K-Chem-CheckResultListView
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}

.K-Chem-IssueInspector.K-Chem-IssueInspector-Flex-Layout
{
    display: inline-flex;
    flex-direction: column;
}
/*
.K-Chem-IssueInspector.K-Chem-IssueInspector-Flex-Layout .K-Chem-IssueInspector-ToolPanel
{
    height: auto;
    flex: 0 0 auto;
}
*/
.K-Chem-IssueInspector.K-Chem-IssueInspector-Flex-Layout .K-Chem-IssueInspector-ListPanel
{
    position: relative;
    top: auto;
    flex: 1 1 auto;
}


.K-Chem-StructureNodeSelectPanel .K-TabView
{

}

.K-Chem-StructureNodeSelectPanel .K-TabView .K-TabView-Page-Container
{
    height: 22em;
    overflow-y: auto;
}
.K-Chem-StructureNodeSelectPanel .K-TabView .K-TabView-Page-Container .K-TabView-Page
{

}

.K-Chem-StructureNodeSelectPanel .K-Chem-StructureNodeSelectPanel-SetButton
{
    min-width: 3em;
}

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: -ms-flex) or
          (display: flex) {
    .K-Chem-StructureNodeSelectPanel
    {
        display: inline-block;
        position: relative;
        height: 20em;
        /*
        display: -webkit-flex;
        display: -moz-flex;
        display:flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
        */
    }

    .K-Chem-StructureNodeSelectPanel .K-TabView
    {
        /*
        -webkit-flex: auto;
        -moz-flex: auto;
        flex: auto;
        */
        height: 100%;
        /*
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        */
        display: -webkit-flex;
        display: -moz-flex;
        display:flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
    }

    .K-Chem-StructureNodeSelectPanel .K-TabView .K-TabView-Page-Container
    {
        /*position: relative;*/
        /*
        width: 100%;
        height: 100%;
        */
        /*width: 100%;*/
        height: auto;
        -webkit-flex: auto;
        -moz-flex: auto;
        flex: auto;
        display: -webkit-flex;
        display: -moz-flex;
        display:flex;
    }
    .K-Chem-StructureNodeSelectPanel .K-TabView .K-TabView-Page-Container .K-TabView-Page
    {
        /*min-height: 10em;*/

        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
        /*
        -webkit-flex: auto;
        -moz-flex: auto;
        flex: auto;
        */
    }

    .K-Chem-StructureNodeSetter
    {
        width: 22em;
        display: -webkit-flex;
        display: -moz-flex;
        display:flex;
        flex-direction: column;
    }
    .K-Chem-StructureNodeSetter .K-Chem-StructureNodeSelectPanel
    {
        width: auto;
        flex: auto;
    }
}

.K-Chem-StructureNodeSetter.K-ChemEditor-Atom-Setter
{
    margin: 0;
}

.K-Chem-StructureNodeSetter .K-Chem-StructureNodeSetter-InputBox,
.K-Chem-StructureNodeSetter .K-Chem-StructureNodeSelectPanel
{
    display: block;
}
.K-Chem-StructureNodeSetter-InputBox .K-ComboTextBox-Assoc-Widget .K-Pri-Glyph-Content
{
    display: none;
}

.K-Chem-StructureConnectorSelectPanel .K-Chem-StructureConnectorSelectPanelAdv-ExtraSection
{
    margin-top: 0.7em;
}

.K-Chem-Charge-SelectPanel .K-Chem-Charge-SelectPanel-BtnGroup
{
    display: block;
    margin: 0.5em auto;
    background-color: transparent;
    text-align: left;
}
.K-Chem-Charge-SelectPanel .K-Chem-Charge-SelectPanel-BtnGroup .K-Chem-Charge-SelectPanel-ChargeButton
{
    min-width: 4em;
}

.K-Chem-GlyphPath-Arrow-SettingPanel .K-Chem-GlyphPath-Arrow-StyleButtonGroup
{

}

.K-Chem-GlyphPath-Arrow-SettingPanel .K-Chem-GlyphPath-Arrow-SizeSetter
{
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: middle;
}
.K-Chem-GlyphPath-Arrow-SettingPanel .K-Chem-GlyphPath-Arrow-SizeSetter *
{
    display: inline-block;
    vertical-align: middle;
}

.K-Chem-GlyphPath-Arrow-SettingPanel .K-Chem-GlyphPath-Arrow-SizeSetter .K-NumInput,
.K-Chem-GlyphPath-Line-SettingPanel .K-NumInput
{
    margin-left: 0.5em;
    margin-right: 0.5em;
}
.K-Chem-GlyphPath-Arrow-SettingPanel .K-Chem-GlyphPath-Arrow-SizeSetter .K-NumInput
{
    width: 7em;
}

.K-Chem-Glyph-ReactionArrow-PresetSelector .K-Button,
.K-Chem-Glyph-ReactionArrow-PresetSelector-ButtonSet-DropDown .K-Button
{
    text-align: left;
}

.K-Chem-GlyphPath-Line-SettingPanel .K-NumInput
{
    width: 6em;
}

.K-Chem-GlyphPath-SettingPanel .K-Chem-GlyphPath-SettingPanel-Section
{
    display: block;
}
.K-Chem-GlyphPath-SettingPanel-Section-Title
{
    display: block;
    font-size: 1em;
    font-weight: bold;
}
.K-Chem-ReactionArrow-SettingPanel-ArrowPresetSection .K-Chem-GlyphPath-SettingPanel-Section-Title
{
    display: inline;
    margin-right: 0.5em;
}


.K-Chem-GlyphPath-SettingPanel .K-Chem-GlyphPath-SettingPanel-Section .K-Chem-GlyphPath-SettingPanel-Section-Panel
{
    border: none;
    margin: 0.5em;
    padding: 0;
}

.K-Chem-GlyphMultiPath-SettingPanel .K-Chem-GlyphMultiPath-SettingPanel-PathTabGroup,
.K-Chem-GlyphMultiPath-SettingPanel .K-Chem-GlyphMultiPath-SettingPanel-PathSettingPanel
{
    float: left;
    clear: left;
}
.K-Chem-Editor
{
    overflow: auto;
}

.K-Chem-Editor .K-Chem-Editor-Client
{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.K-Chem-Editor .K-Chem-Editor-UiEvent-Receiver
{
    background: #fff;
    opacity: 0;
    filter:Alpha(Opacity=0);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.K-ChemEditor-Text-Setter
{
    min-width: 8em;
    min-height: 1em;
    margin: 0;
    padding: 2px;
    /*border: 1px;*/
    margin-left: -3px;  /* consider the border(1px) and padding */
    margin-top: -3px;
    /*background: transparent;*/
}

.K-ChemEditor-Atom-Setter
{
    width: 8em;
}

.K-Chem-Composer
{
    position: relative;
    /* default width/height */
    width: 600px;
    height: 400px;
    min-width: 300px;
    min-height: 200px;
}

.K-Chem-Composer .K-Chem-Editor
/*.K-Chem-Composer .K-Chem-Composer-Editor-Stage*/
{

    width: 100%;
    height: 100%;

    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
}

.K-Chem-Composer .K-Chem-Composer-Editor-Stage,
.K-Chem-Composer .K-Chem-Editor,
.K-Chem-Composer .K-Chem-Editor .K-Chem-Editor-Client
{
    touch-action: none;  /* disable default touch actions, for we have own ones */
}

.K-Chem-Composer .K-Chem-Composer-Top-Region,
.K-Chem-Composer .K-Chem-Composer-Left-Region,
.K-Chem-Composer .K-Chem-Composer-Bottom-Region
{
    position: absolute;
    padding: 0;
    margin: 0;
}
.K-Chem-Composer .K-Chem-Composer-Bottom-Region
{
    overflow: hidden;
}
.K-Chem-Composer .K-Chem-Composer-Top-Region
{
    left: 48px;
    height: 37px;
}
.K-Chem-Composer .K-Chem-Composer-Bottom-Region
{
    left: 48px;
    height: 32px;
}
.K-Chem-Composer .K-Chem-Composer-Left-Region
{
    top: 37px;
    width: 48px;
}

.K-Chem-Composer .K-Chem-Composer-Toolbar
{
    z-index: 100;
    margin: 0;
    padding: 0;
}

/*
.K-Chem-Composer .K-Chem-Composer-Common-Toolbar .K-Button,
.K-Chem-Composer .K-Chem-Composer-Chem-Toolbar .K-Button
{
    width: 47px;
    height: 36px;
}
*/

.K-Chem-Composer .K-Chem-Composer-Common-Toolbar
{
    position: absolute;
    top: 0;
    /*left: 47px;*/
}
.K-Chem-Composer .K-Chem-Composer-Zoom-Toolbar
{
    /*
    position: absolute;
    bottom: 0;
    right: 0;
    */
    float: right;
}
.K-Chem-Composer .K-Chem-Composer-Chem-Toolbar
{
    /*
    position: absolute;
    top: 37px;
    left: 0;
    */
    display: block;
    float: right;
}
.K-Chem-Composer .K-Chem-Composer-Common-Toolbar .K-Button,
.K-Chem-Composer .K-Chem-Composer-Chem-Toolbar .K-Button
{
    /* a default size for easy layout */
    /*
    width: 48px;
    height: 37px;
    */
}
.K-Chem-Composer .K-Chem-Composer-Zoom-Toolbar .K-Button
{
    /*
    width: 41px;
    height: 30px;
    */
    padding: 4px 5px;
}
.K-Chem-Composer .K-Chem-Composer-Assoc-Toolbar.K-Layout-H,
.K-Chem-Composer .K-Chem-Composer-Style-Toolbar,
.K-Chem-Composer .K-Chem-Composer-ObjModifier-Toolbar
{
    /*
    position: absolute;
    left: 48px;
    bottom: 0px;
    */
    float: left;
    margin-right: 5px;
}
.K-Chem-Composer .K-Chem-Composer-Assoc-Toolbar.K-Layout-V
{
    float: right;
    margin-top: 20px;
    margin-right: 0;
}

.K-Chem-Composer .K-Chem-Composer-Zoom-Toolbar .K-Button,
.K-Chem-Composer .K-Chem-Composer-Assoc-Toolbar .K-Button,
.K-Chem-Composer .K-Chem-Composer-Style-Toolbar .K-Button,
.K-Chem-Composer .K-Chem-Composer-ObjModifier-Toolbar .K-Button
{
    height: 32px;
}

/*
.K-Chem-Composer .K-Chem-Composer-Style-Toolbar
{
    bottom: 0px;
}
*/


.K-Chem-Composer.K-Chem-Composer-Grid-Layout
{
    display: inline-grid;
    grid-template-rows: min-content 1fr min-content min-content;
    grid-template-columns: min-content 1fr min-content;
}

.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Top-Region,
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Left-Region,
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Bottom-Region,
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Adv-Panel
{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-Wrapper
{
    display: flex;
    flex-direction: column;
}
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-Wrapper .K-Chem-Composer-Issue-Panel-ToolPanel
{
    height: auto;
    flex: 0 0 min-content;
}
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-Wrapper .K-Chem-Composer-Issue-Panel-InspectorRegion
{
    flex: 1 1 auto;
    position: relative;
    top: auto;
}

.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Top-Region,
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Left-Region,
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Bottom-Region
{
    width: auto;
    height: auto;
}
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Top-Region
{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Left-Region
{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 5;
}
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Bottom-Region
{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
}
.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Common-Toolbar
{
    position: relative;
}

.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Editor-Stage
{
    position: relative;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}


.K-Chem-Composer.K-Chem-Composer-Grid-Layout .K-Chem-Composer-Adv-Panel
{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}
.K-Chem-Composer.K-Chem-Composer-Grid-Layout.K-Chem-Composer-Portrait .K-Chem-Composer-Adv-Panel
{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    height: 22em;
    width: auto;
}

.K-Chem-Composer-Toolbar
{
    white-space: nowrap;
}

.K-Chem-Composer-Style-Toolbar .K-Button,
.K-Chem-Composer-ObjModifier-Toolbar .K-Button
{
    text-align: left;
    padding: 0.2em 0.4em;
    white-space: nowrap;
}

.K-Chem-Composer-Style-Toolbar .K-Button .K-Content,
.K-Chem-Composer-ObjModifier-Toolbar .K-Button .K-Content
{
    /*margin: 0;*/
}
/*.K-Chem-Composer .K-Chem-Composer-Style-Toolbar*/ .K-Chem-Composer-FontName-Box
{
    width: 13em;
}
/*.K-Chem-Composer .K-Chem-Composer-Style-Toolbar*/ .K-Chem-Composer-FontSize-Box
{
    width: 6em;
}
.K-Chem-Composer /*.K-Chem-Composer-Style-Toolbar*/ .K-Chem-Composer-Color-Box
{

}

.K-Chem-Composer-ObjModifier-Toolbar
{
    vertical-align: top;
}

.K-Chem-Composer-ObjModifier-Toolbar sup,
.K-Chem-Composer-ObjModifier-Toolbar sub
{
    font-size: 0.7em;
}

.K-Chem-Composer-ObjModifier-Toolbar .K-Button
{
    padding-left: 0.22em;
    padding-right: 0.22em;
}

.K-Chem-Composer-ObjModifier-Toolbar .K-Chem-Composer-AtomModifier-Button,
.K-Chem-Composer-ObjModifier-Toolbar .K-Chem-Composer-ChargeModifier-Button
{
    font-family: /*Georgia,*/ "Times New Roman", Times, serif;
    font-size: 1.2em;
    /*line-height: 0.833em;*/
    vertical-align: middle;  /* solve the align problem of modifier buttons in Chrome */
}
.K-Chem-Composer-ObjModifier-Toolbar .K-Chem-Composer-AtomModifier-Button .K-Text-Content,
.K-Chem-Composer-ObjModifier-Toolbar .K-Chem-Composer-ChargeModifier-Button .K-Text-Content
{
    /*vertical-align: top;*/
}
.K-Chem-Composer-ObjModifier-Toolbar .K-Chem-Composer-AtomModifier-Button .K-Pri-Glyph-Content,
.K-Chem-Composer-ObjModifier-Toolbar .K-Chem-Composer-ChargeModifier-Button .K-Pri-Glyph-Content
{
    display: none;
}
.K-Chem-Composer-AtomModifier-DropDown
{
    width: 22em;
    max-height: 90%;
}
.K-Chem-Composer-AtomModifier-DropDown .K-Chem-StructureNodeSelectPanel
{
    padding: 0;
    border: none;
    width: auto;
}


.K-Chem-Composer .K-Chem-Composer-Adv-Panel
{
    position: absolute;
    width: 22em;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    display: none;  /* hide at first */
}
.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-TreeView
{
    /*width: 100%;
    height: 34%;*/
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 66%;
}
.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-ObjInspector
{
    /*width: 100%;
    height: 64%;*/
    width: auto;  /* override default size */
    height: auto;
    display: block;
    margin: 0;
    position: absolute;
    top: 34%;
    bottom: 0;
    left: 0;
    right: 0;
}
.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-ObjInspector.K-ObjInspector-Flex-Layout
{
    display: flex;
}

.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-ObjInspector .K-ValueListEditor-KeyCell
{
    width: 10em;
}

.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel,
.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-Wrapper
{
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-ToolPanel
{
    position: relative;
    padding: 0.25em;
    height: 2.3em;
    overflow: hidden;
}
.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-ToolPanel .K-Chem-Recheck-Issues
{
    float: left;
}
.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-ToolPanel .K-Chem-Toggle-ShowIssues
{
    float: right;
}
.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-InspectorRegion
{
    position: absolute;
    top: 2.8em;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
}
.K-Chem-Composer .K-Chem-Composer-Adv-Panel .K-Chem-Composer-Issue-Panel .K-Chem-Composer-Issue-Panel-InspectorRegion .K-Chem-IssueInspector
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
}

.K-Chem-Composer-Modifier-RichText-Panel
{
    /*min-width: 20em;*/
}
.K-Chem-Composer-Modifier-RichText-Panel td
{
    white-space: nowrap;
}
.K-Chem-Composer-Modifier-RichText-Panel .K-Chem-Composer-Modifier-RichText-Panel-Group-LabelCell
{
    text-align: right;
}
.K-Chem-Composer-Modifier-RichText-Panel .K-Chem-Composer-Modifier-RichText-Panel-Group-CtrlCell
{
    text-align: left;
}

.K-Chem-Obj-Setter
{
    width: 600px;
    height: 450px;
}
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-Client
{
    display: block;
}
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-Client
{
    position: absolute;
    width: 100%;
    top: 0px;
    bottom: 0px;
    margin: 0;
}
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-Viewer,
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-Client
{
    border: 1px solid;
    position: relative;
}
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-Viewer.K-Chem-Viewer
{
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    width: auto;
    height: auto;
}
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-InfoLabel,
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-StatusLabel
{
    position: absolute;
}
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-InfoLabel
{
    top: 5px;
    left: 5px;
}
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-StatusLabel
{
    right: 5px;
    bottom: 5px;
}
.K-Chem-Obj-Setter .K-Chem-Obj-Setter-TabGroup
{
    position: absolute;
    bottom: 5px;
}

.K-Chem-Obj-Setter.K-Chem-Obj-Setter-Flex-Layout
{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
}

.K-Chem-Obj-Setter.K-Chem-Obj-Setter-Flex-Layout .K-Chem-Obj-Setter-Toolbar-Area,
.K-Chem-Obj-Setter.K-Chem-Obj-Setter-Flex-Layout .K-Chem-Obj-Setter-TabGroup
{
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
}
.K-Chem-Obj-Setter.K-Chem-Obj-Setter-Flex-Layout .K-Chem-Obj-Setter-TabGroup
{
    bottom: auto;
}

.K-Chem-Obj-Setter.K-Chem-Obj-Setter-Flex-Layout .K-Chem-Obj-Setter-Client
{
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative;
    width: auto;
    height: auto;
    padding: 5px;
}
.K-Chem-Obj-Setter.K-Chem-Obj-Setter-Flex-Layout .K-Chem-Obj-Setter-Client .K-Chem-Viewer.K-Chem-Obj-Setter-Viewer
{

}

.K-Chem-Obj-Setter-Configurator
{
    padding-left: 2em;
}
.K-Chem-Obj-Setter-Configurator .K-CheckBox
{
    /*display: block;*/
    margin: 0.5em 0.5em;
}
.K-Chem-Obj-Setter-Configurator .K-TextBox
{
    width: 4em;
}
.K-Chem-Obj-Setter-Configurator .K-Chem-Obj-Setter-Line
{
    display: block;
}
.K-Chem-Obj-Setter-Configurator .K-Chem-Obj-Setter-Region
{
    display: block;
}
.K-Chem-Obj-Setter-Configurator .K-Chem-Obj-Setter-Region-Label
{
    margin-left:-1em;
    padding-top: 0.5em;
    padding-bottom: 0.2em;
}
.K-Chem-Obj-Setter-Configurator .K-Assoc-Text-Content
{
    margin-left: 1em;
    font-size: 90%;
}

.K-SpectrumObjInserter
{
    width: 80em;
    height: 27em;
}
.K-SpectrumObjInserter .K-SpectrumObjInserter-Container
{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.K-SpectrumObjInserter .K-SpectrumObjInserter-Container .K-SpectrumObjInserter-Toolbar-Area
{
    flex: 0 0 content;
}
.K-SpectrumObjInserter .K-SpectrumObjInserter-Container .K-SpectrumObjInserter-Client
{
    flex: 1 1 auto;
    padding: 0;
}
.K-SpectrumObjInserter .K-SpectrumObjInserter-Container .K-SpectrumObjInserter-Client .K-SpectrumInspector
{
    width: 100%;
    height: 100%;
    margin: 0;
}

.K-SpectrumObjInserter .K-SpectrumObjInserter-InfoLabel
{
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
}

.K-Chem-ComposerDialog .K-Chem-Composer
{
    width: 650px;
    height: 400px;
}

.K-Chem-Dialog-Choose-File-Format,
.K-Chem-Dialog-LoadData
{
    min-width: 25em;
}

.K-Chem-Dialog-Choose-File-Format .K-Dialog-Client .K-Chem-Dialog-Choose-File-Format-FormatBox,
.K-Chem-Dialog-Choose-File-Format .K-Dialog-Client .K-Chem-Dialog-Choose-File-Format-Previewer,
.K-Chem-Dialog-LoadData .K-Dialog-Client .K-Chem-Dialog-LoadData-FormatBox,
.K-Chem-Dialog-LoadData .K-Dialog-Client .K-Chem-Dialog-LoadData-SrcEditor
{
    display: block;
    width: 100%;
}
.K-Chem-Dialog-Choose-File-Format .K-Dialog-Client div,
.K-Chem-Dialog-LoadData .K-Dialog-Client div
{
    margin: 0.5em 0;
}
.K-Chem-Dialog-Choose-File-Format .K-Dialog-Client textarea,
.K-Chem-Dialog-LoadData .K-Dialog-Client textarea
{
    height: 150px;
}

.K-Chem-Dialog-LoadData .K-Chem-Dialog-LoadData-Btn-LoadFromFile
{
    float: left;
    white-space: nowrap;
}

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    .K-Chem-Dialog-Choose-File-Format .K-Dialog-Client,
    .K-Chem-Dialog-LoadData .K-Dialog-Client
    {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
    }
    .K-Chem-Dialog-Choose-File-Format .K-Dialog-Client div,
    .K-Chem-Dialog-LoadData .K-Dialog-Client div,
    .K-Chem-Dialog-LoadData .K-Chem-Dialog-LoadAppendData-AppendCheckBox
    {
        -webkit-flex: 0 0 auto;
        -moz-flex: 0 0 auto;
        flex: 0 0 auto;
        margin: 0.25em 0;  /* flex layout won't collapse margin */
    }
    .K-Chem-Dialog-LoadData .K-Dialog-Client .K-Chem-Dialog-LoadData-SrcEditorRegion,
    .K-Chem-Dialog-Choose-File-Format .K-Dialog-Client .K-Chem-Dialog-Choose-File-Format-PreviewerRegion
    {
        -webkit-flex: 1 1 auto;
        -moz-flex: 1 1 auto;
        flex: 1 1 auto;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
    }
    .K-Chem-Dialog-LoadData .K-Dialog-Client .K-Chem-Dialog-LoadData-SrcEditor,
    .K-Chem-Dialog-Choose-File-Format .K-Dialog-Client .K-Chem-Dialog-Choose-File-Format-Previewer
    {
        -webkit-flex: 1 1 auto;
        -moz-flex: 1 1 auto;
        flex: 1 1 auto;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
    }
    .K-Chem-Dialog-Choose-File-Format .K-Dialog-Client textarea,
    .K-Chem-Dialog-LoadData .K-Dialog-Client textarea
    {
        height: auto;  /* the height can variant now by flex layout */
    }
    .K-Chem-Dialog-Choose-File-Format,
    .K-Chem-Dialog-LoadData
    {
        height: 350px;
    }
}

.K-Chem-ComposerFrame
{
    border: none;
    /*
    width: 100%;
    height: 100%;
    */
}
.K-Chem-ComposerFrame-ContentDoc, .K-Chem-ComposerFrame-ContentBody
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.K-Chem-ComposerFrame-ContentBody .K-Chem-Composer
{
    margin: 0;
    width: 100%;
    height: 100%;
}