.nav-site {
    background-color: white;
    border: solid 2px silver;
}

.nav-site.sites {
    background-color: white;
    border: solid 2px orange;
}

.nav-site .heading {
    background-color: gold;
    border: solid 1px orange;
}

#Navigations #NavigationMenu{
    width: 100%;
}

#NavigationMenu .menu > li > a {
    color: #222222;
}

.control-selectable .ui-selecting {
    background: #106EBE;
    color: #FFFFFF;
}

.control-selectable .ui-selected {
    background: #106EBE;
    color: #FFFFFF;
}

.nav-sites .ui-icon {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

#RecordInfo .ui-icon {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

#EditorComments .ui-icon {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

.ui-icon.ui-icon-pencil.button-edit-markdown {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

.ui-widget-content .control-markup a {
    color: #222222;
}

.ui-widget-content a {
    color: #222222;
}

.field-control .control-textbox {
    color: #222222;
}

.field-control .already-attachments .file-name {
    color: #222222;
}

.field-control .ui-multiselect {
    color: black;
}

.field-control .ui-multiselect .ui-icon.ui-icon-triangle-1-s {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

#CopyToClipboards .ui-icon.ui-icon-link {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

.ui-icon.ui-icon-close {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

.ui-button-icon.ui-icon.ui-icon-close {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

#ViewFilters .ui-icon.ui-icon-info {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

#Links .grid-row a {
    color: #222222;
}

/* 全体共通 */
* {
    font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    font-size: 13px;
}

a, a:link {
    color: #106EBE;
}

body {
    background-color: #E7E7E7;
}

/* コンテンツ */
#MainContainer {
    margin-left: 52px;
}

#MainContainer #Application {
    margin: 0;
    padding: 0;
}

/* 共通ヘッダ */
#MainContainer #Header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #CECECE;
    color: #222222;
}

#Header #Logo {
    padding: 2px 0;
}

#Header #CorpLogo {
    margin: 0;
}

#NavigationsUpperRight {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#NavigationsUpperRight #Search {
    height: 30px;
    padding: 4px 8px;
    margin-left: 16px;
    margin-right: 4px;
}

#NavigationsUpperRight #AccountUserName .ui-icon-person {
    background-position: -144px -96px;
}

/* クリップボードリンク */
nav.both.cf {
    position: relative;
}

#CopyToClipboards {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

#CopyDirectUrlToClipboard {
    border: 1px solid #CECECE;
    padding: 0 2px;
    border-radius: 4px;
}

/* パンくず */
#Application nav #Breadcrumb .separator {
    display: none;
}

#Application nav #Breadcrumb {
    display: flex;
    margin: 0;
    background-color: #FFFFFF;
    width: 100%;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
    position: relative;
}

#Application nav #Breadcrumb li {
    list-style: none;
    font-size: 14px;
    height: 40px;
    line-height: 30px;
    margin-right: 28px;
    position: relative;
    padding: 0 16px;
}

#Application nav #Breadcrumb li:first-child {
    padding-left: 36px;
}

#Application nav #Breadcrumb li:before,
#Application nav #Breadcrumb li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    border-top: 20px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 20px solid transparent;
}

#Application nav #Breadcrumb li:last-child {
    background-color: #106EBE;
}

#Application nav #Breadcrumb li:nth-last-child(2)::after {
    background-color: #106EBE;
}

#Application nav #Breadcrumb li:last-child::after {
    border-left: 15px solid #106EBE;
}

#Application nav #Breadcrumb li:before {
    right: -39px;
    border-left: 15px solid #ccc;
}

#Application nav #Breadcrumb li:after {
    right: -38px;
    border-left: 15px solid #fff;
}

#Application nav #Breadcrumb li:last-child a {
    color: #fff;
}

#Application nav #Breadcrumb .item {
    padding: 4px 24px 4px 12px;
}

/* 横断検索 */
#Application #SearchResults {
    margin: 0 0 0 16px;
}

#Application #SearchResults #Search{
    height: 30px;
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 11px;
}

#Application #SearchResults .result {
    background-color: #FFFFFF;
    margin-bottom: 16px;
}

#Application #SearchResults #Breadcrumb .item:first-child {
    padding-left: 0;
}

/* ビュー */
#MainForm #ViewSelectorField {
    top: 5px;
}

/* フィルター */
#MainForm #ViewFilters {
    margin: 0;
    padding: 8px 16px 0;
    border: none;
    border-radius: 0;
    background-color: #DEECF9;
    color: #222222;
}

#MainForm #ViewFilters > .display-control {
    margin: 0 8px 8px 0;
}

#MainForm #ViewFilters > .field-auto-thin {
    height: 30px;
    margin-bottom: 8px;
}

/* 結果 */
#MainForm #Aggregations {
    margin: 0;
    padding: 8px 16px 0;
    border: none;
    border-radius: 0;
    background-color: #DEECF9;
    color: #222222;
}

#MainForm #Aggregations .label {
    height: auto;
    margin: 0 0 8px;
    border-radius: 4px;
    background: #C1E1FF;
    border: 1px solid #90CAFF;
}

#MainForm #Aggregations > .display-control{
    margin: 0 8px 8px 0;
}

#MainForm #Aggregations .label.overdue {
    background: #E03E3E;
    border: 1px solid #E03E3E;
}

#MainForm #Aggregations .data{
    margin: 0 16px 8px 0;
    min-height: 30px;
}

#MainForm #Aggregations span{
    padding: 4px 8px;
}

#MainForm #Aggregations .data.overdue {
    color: #E03E3E;
}

#Application #SearchResults .count {
    margin-bottom: 16px;
}

#Application #SearchResults .count .label {
    height: auto;
    margin: 0;
    border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
}

#Application #SearchResults .count .data{
    padding-left: 16px;
}

/* 見出しタイトル */
#TitleContainer {
    padding: 16px;
}

/* テーブルヘッダ */
.grid-row .ui-icon {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

.ui-widget-header,
.ui-dialog.ui-widget.ui-widget-content fieldset .ui-widget-header,
#ProcessForm #ProcessTabsContainer fieldset .ui-widget-header {
    background: #106EBE;
}

.ui-multiselect-header {
    background: #ECECEC;
    border: 1px solid #CECECE;
    padding: 4px !important;
}

.ui-multiselect-header .ui-icon {
    float: none !important;
}

#MainForm #Aggregations .label.overdue {
    background-color: #E03E3E;
}

#MainForm .grid > thead > tr:first-child > th:first-child {
    border-radius: 0;
}

/* テーブルヘッダ（スクロール） */
thead th .control-checkbox{
    margin: 0;
}
thead th:has(.control-checkbox) {
    text-align: center;
}

/* フォーム */
.field-control .control-text {
    border: 1px solid #CECECE;
    border-radius: 4px;
    padding: 4px 8px 4px 8px;
    color: #222222;
}

#SearchField .control-textbox,
.field-control .control-textbox,
.field-control .control-markup {
    border: 1px solid #CECECE;
}

.field-control .control-textbox.error {
    border: solid 1px #f00;
}

#SearchField .control-textbox:focus{
    border: 1px solid #666666;
}

#MainContainer .fieldset.enclosed,
#MainContainer .fieldset.enclosed-thin {
    border: 1px solid #CECECE;
    border-radius: 4px;
    background: #F8F8F8;
}

#MainContainer .field-control .control-dropdown,
#MainContainer .field-control .ui-multiselect {
    border-radius: 4px;
}

#MainContainer .fieldset .field-normal .field-control .control-dropdown,
.ui-dialog .ui-dialog-content .fieldset .field-normal .field-control .control-dropdown,
.ui-dialog .ui-dialog-content form .field-normal .field-control .control-dropdown {
    margin: 0;
}

#MainContainer .fieldset .field-normal .field-control .ui-icon-person,
.ui-dialog .ui-dialog-content .fieldset .field-normal .field-control .ui-icon-person {
    background-position: -144px -96px;
}

.field-control .control-textbox {
    border-radius: 4px;
    padding: 4px 8px 4px 8px;
}

.field-control span.control-text.status-preparation,
.field-control span.control-text.status-inprogress,
.field-control span.control-text.status-closed,
.field-control span.control-text.status-rejected {
    color: #fff;
}

.field-control pre {
    color: #222222;
}

.control-textbox:focus,
.control-dropdown:focus,
.control-textarea:focus {
    outline: none;
    border: 1px solid #666;
}

.field-control .control-textbox,
.dialog .command-center button,
#MainCommands button,
#Editor fieldset button,
.field-control select.control-dropdown {
font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

.field-control .control-markdown,
.field-control .control-spinner {
    outline: none;
}

#Editor .field-control .control-markup {
    padding: 8px 28px 8px 8px;
    border-radius: 4px;
    color: #222222;
}

#Editor .control-markdown{
    padding: 8px;
    border-radius: 4px;
}

.field-control .control-attachments-upload {
    border: 2px dotted #106EBE;
}

fieldset .command-left {
    padding: 0;
}

fieldset .command-center > button,
fieldset .command-left > button {
    margin: 0 4px 8px;
}

.container-selectable .command-center,
.container-selectable .command-left {
    padding: 0;
}

.container-selectable .command-center > button,
.ui-dialog .container-selectable .command-center > button,
.container-selectable .command-left > button,
.field-control .container-selectable .command-right > button {
    margin: 0 4px 8px;
}

.container-selectable button {
    margin-right: 8px;
}

.control-dropdown {
    margin: 0 4px 8px;
}

.field-control #SearchPermissionElements {
    margin-left: 0;
    margin-right: 8px;
}

.field-control input[type='file']{
    padding: 1px;
}

#MainContainer input:focus,
#MainContainer textarea:focus,
#MainContainer select:focus:not(.has-css) {
    background-color: #FFF9E3;
}

.field-control label,
.field-control textarea {
    color: #222222;
}

.field-control label.error {
    z-index: 3;
}

.ui-widget.ui-state-default.ui-multiselect {
    padding: 4px 0 4px 8px;
}

.field-control .container-normal .ui-slider-handle {
    background-image: none;
    background-color: #106EBE;
    border-radius: 2px;
    outline: none;
}

.field-control .container-normal .ui-slider-handle:hover,
.field-control .container-normal .ui-slider-handle:active,
.field-control .container-normal .ui-slider-handle:focus {
    background-color: #005A9E;
    outline: none;
}

.field-control .container-normal .already-attachments {
    background-color: #DEECF9;
}

.field-control .container-normal .control-attachments-item {
    border: 1px solid #106EBE;
}

.field-control .container-normal .already-attachments.preparation-delete {
    background-color: #ECECEC;
    border: 1px solid #CECECE;
}

#FieldSetMailAddresses .field-vertical .command-left > button {
    margin: 8px 4px 0;
}

#FieldSetMailAddresses .field-vertical .command-left > input {
    margin: 8px 4px 0 0;
}
/* ボタン */
.ui-button {
    background: #FFFFFF;
    border-radius: 4px !important;
    border: 1px solid #CECECE;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    color: #222222;
}

.ui-button:hover {
    background: #FFFFFF;
    border: 1px solid #aeaeae;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.ui-button:hover .ui-icon {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

.ui-icon-person {
    background-position: -144px -93px;
}

.ui-widget.ui-widget-content {
    border: 1px solid #CECECE;
    border-radius: 4px;
}

.ui-widget.ui-widget-content.ui-spinner:has(.ui-spinner-input:focus) {
    background-color: #FFF9E3;
}

.ui-tabs .ui-tabs-nav {
    padding: 4px 0 0 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.ui-widget-content {
    background: #fff;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: #C1E1FF;
    border: 1px solid #90CAFF;
}

.ui-button:hover,
.ui-button:focus,
.ui-button:active {
    background: none;
    background-color: #FFFFFF;
    border: 1px solid #CECECE;
    color: #555555;
}

.button-neutral,
.button-neutral:hover,
.button-neutral:focus,
.button-neutral:active {
    background: none;
    background-color: #444444;
    border: 1px solid #444444;
    color: #FFFFFF;
}

.button-negative,
.button-negative:hover,
.button-negative:focus,
.button-negative:active {
    background: none;
    background-color: #E16A6A;
    border: 1px solid #E16A6A;
    color: #FFFFFF;
}

.button-positive,
.button-positive:hover,
.button-positive:focus,
.button-positive:active {
    background: none;
    background-color: #106EBE;
    border: 1px solid #106EBE;
    color: #FFFFFF;
}


.button-neutral:hover {
    background-color: #515151;
}

.button-positive:hover {
    background-color: #1a77c6;
}

.button-negative:hover {
    background-color: #e37171;
}

#MainForm .button-neutral .ui-icon,
#MainForm .button-neutral:hover .ui-icon,
#MainForm .button-negative .ui-icon,
#MainForm .button-negative:hover .ui-icon,
#MainForm .button-positive .ui-icon,
#MainForm .button-positive:hover .ui-icon,
#MainCommands .button-neutral .ui-icon,
#MainCommands .button-neutral:hover .ui-icon,
#MainCommands .button-negative .ui-icon,
#MainCommands .button-negative:hover .ui-icon,
#MainCommands .button-positive .ui-icon,
#MainCommands .button-positive:hover .ui-icon,
.dialog .button-neutral .ui-icon,
.dialog .button-neutral:hover .ui-icon,
.dialog .button-neutral:focus .ui-icon,
.dialog .button-negative .ui-icon,
.dialog .button-negative:hover .ui-icon,
.dialog .button-negative:focus .ui-icon,
.dialog .button-positive .ui-icon,
.dialog .button-positive:hover .ui-icon,
.dialog .button-positive:focus .ui-icon,
fieldset .button-neutral .ui-icon,
fieldset .button-neutral:hover .ui-icon,
fieldset .button-negative .ui-icon,
fieldset .button-negative:hover .ui-icon,
fieldset .button-positive .ui-icon,
fieldset .button-positive:hover .ui-icon,
#OutgoingMailsForm .button-positive .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}

/* ボタンpadding設定 */
#Editor #RecordSwitchers .ui-button,
#MainCommands .ui-button,
#ViewModeContainer .ui-button,
#ViewFilters .ui-button,
fieldset .ui-button,
.field-control .ui-button,
.dialog .ui-button,
#OutgoingMailsForm .ui-button,
#ApiEditorCommands .ui-button {
    padding: 4px 8px 4px 6px !important;
}

.ui-state-active .ui-icon, .ui-button:active .ui-icon,
.ui-state-active .ui-icon, .ui-button:focus .ui-icon {
    background-image: url(images/ui-icons_3d3d3d_256x240.png);
}

.legend .ui-icon-triangle-1-e {
    background-position: -32px -12px;
}

.legend .ui-icon-triangle-1-s {
    background-position: -65px -12px;
}

fieldset .legend{
    color: #222222;
}

/* 一覧画面 */
#ViewModeContainer .grid > thead > tr > th {
    padding: 8px;
    font-weight: bold;
}

#ViewModeContainer > .both{
    padding: 16px 16px 0;
}

#ViewModeContainer .both button {
    margin: 0 4px 2px;
}

#ViewModeContainer .fc-toolbar-chunk .fc-button-group {
    margin-right: 16px;
}

#ViewModeContainer .both #FullCalendar button {
    margin: 0 0 2px;
}

#ViewModeContainer td {
    padding: 8px;
}

#ViewModeContainer .grid > tbody > tr > td,
#EditorTabsContainer .grid > tbody > tr > td {
    border-left: 1px solid #ECECEC;
    border-right: 1px solid #ECECEC;
    color: #222222;
}

#ViewModeContainer .grid-row .comment,
#EditorTabsContainer .grid-row .comment {
    margin-bottom: 0;
    padding: 4px 4px 4px 16px;
    background: #EFF6FC;
    border: 1px solid #C1E1FF;
    margin-bottom: 4px;
}

.grid > thead > tr > th {
    font-weight: bold;
}

.grid .grid-row .comment {
    background: #FFFFFF;
}

.grid .grid-row:hover .comment{
    background: #FFFFFF;
}

#MainForm .grid > thead > tr:first-child > th:last-child {
    border-radius: 0;
}

#ViewModeContainer .grid-title-body,
#EditorTabsContainer .grid-title-body {
    margin-bottom: 4px;
    padding: 8px;
}

#ViewModeContainer .grid > thead > tr:first-child > th:last-child,
#EditorTabsContainer .grid > thead > tr:first-child > th:last-child {
    border-radius: 0;
}

#ViewModeContainer table td:has(.grid-title-body),
#ViewModeContainer table td:has(.comment),
#EditorTabsContainer table td:has(.grid-title-body),
#EditorTabsContainer table td:has(.comment) {
    padding: 4px 4px 0;
}

#ViewModeContainer .limit-warning3 {
    background-color: #E03E3E;
}

#ViewModeContainer .grid-stack{
    margin: 16px;
}

#ViewModeContainer #GanttAxis {
    margin-left: -2px;
    width: calc(100% + 2px);
}

#Editor #RecordHeader {
    position: relative;
    margin: 0;
    padding-top: 8px;
    padding-bottom: 12px;
}

#Editor #RecordHeader #RecordSwitchers {
    position: absolute;
    bottom: 10px;
    right: 16px;
}

#Editor #RecordHeader #RecordSwitchers .current {
    height: 30px;
    margin: 0 8px;
}

#Editor #RecordHeader #RecordSwitchers .ui-widget-header {
    background: none;
    color: #222222;
    border: none;
}

#Editor #RecordHeader #RecordSwitchers button:last-child {
    margin-left: 16px;
}

table.grid thead th > input,
table.grid tbody td > input {
    margin: 0 auto;
    width: 100%;
    cursor: pointer;
}

#Editor table.grid > thead > tr:first-child > th:first-child,
#Editor table.grid > thead > tr:last-child > th:last-child {
    border-radius: 0;
}

#Editor #EditorTabsContainer.ui-tabs .ui-tabs-panel {
    padding: 16px 16px 28px;
}

#SummariesSettingsEditor .grid > thead > tr > th:nth-child(3),
#SummariesSettingsEditor .grid > thead > tr > th:last-child {
    border-bottom: solid 1px #fff;
}

/* 編集画面 */
#Editor {
    overflow: hidden;
}

#Editor #EditorComments{
    background: #DEECF9;
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    color: #222222;
}

#Editor #EditorComments .comment {
    border: 0;
    border-bottom: 1px solid #CECECE;
    background: none;
    color: #222222;
}

#Application #TemplateTabsContainer {
    margin: 16px;
    width: calc(100% - 32px);
}

#Application #EditorTabsContainer,
#Application #TemplateTabsContainer,
.ui-dialog .ui-dialog-content form .tab-container {
    margin-bottom: 0;
}

#Application #EditorTabsContainer.ui-widget-content,
#Application #TempleteTabsContainer.ui-widget-content,
.ui-dialog .ui-dialog-content form .tab-container.ui-widget-content {
    background: #fff;
    border: none;
}

#Application #EditorTabsContainer.ui-tabs,
#Application #TempleteTabsContainer.ui-tabs,
.template-tab-container .ui-tabs,
.ui-dialog .ui-dialog-content form .tab-container.ui-tabs {
    padding: 0;
}

#Application #EditorTabs.ui-widget-header,
.template-tab-container > .ui-widget-header,
.ui-dialog .ui-dialog-content .tab-container .ui-tabs-nav.ui-widget-header,
.ui-dialog .ui-dialog-content form .tab-container > .ui-widget-header {
    background: #DEECF9;
    border: none;
    border-radius: 0;
    border-bottom: 4px solid #106EBE;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.template-tab-container .ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-dialog .ui-dialog-content form .tab-container.ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
}

#Application #EditorTabs li.ui-state-active,
.template-tab-container li.ui-state-active,
.ui-dialog .ui-dialog-content form .tab-container li.ui-state-active {
    border: none;
    border-radius: 4px 4px 0 0;
}

#Application #EditorTabs li.ui-state-active a,
.template-tab-container li.ui-state-active a,
.ui-dialog .ui-dialog-content .tab-container .ui-tabs-nav li.ui-state-active a,
.ui-dialog .ui-dialog-content form .tab-container .ui-tabs-nav li.ui-state-active a{
    background: #106EBE;
    border-radius: 4px 4px 0 0;
    font-weight: bold;
    color: #fff;
}

#Application #EditorTabs li,
.template-tab-container li,
.ui-dialog .ui-dialog-content form .tab-container .ui-tabs-nav li {
    border: none;
    border-radius: 4px 4px 0 0;
}

#Application #EditorTabs li a,
.template-tab-container li a,
.ui-dialog .ui-dialog-content .tab-container .ui-tabs-nav li a,
.ui-dialog .ui-dialog-content form .tab-container .ui-tabs-nav li a {
    background: #fff;
    border-radius: 4px 4px 0 0;
    color: #106EBE;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-radius: 0;
}

.ui-dialog.ui-widget.ui-widget-content {
    padding: 0;
    border: none;
    border-radius: 0;
}

.ui-dialog.ui-widget.ui-widget-content .ui-widget-header {
    background: #fff;
    border: none;
    border-bottom: 1px solid #CECECE;
}

.ui-dialog.ui-widget.ui-widget-content .ui-widget-header .ui-dialog-title {
    color: #222222;
}

.ui-dialog.ui-widget.ui-widget-content .ui-widget-header .ui-dialog-titlebar-close {
    box-shadow: none;
    border: none;
    right: 1.5rem;
}

.ui-dialog .ui-dialog-content form .tab-container.ui-tabs fieldset {
    margin: 0;
    padding: 1rem;
}

.ui-dialog .ui-dialog-content form .tab-container.ui-tabs fieldset fieldset {
    margin: 0 10px 10px 10px;
}

#Application #Guide > div {
    margin: 0 0 12px 0;
    padding: 10px 16px 8px;
    border: none;
    border-bottom: 1px solid #CECECE;
    position: static;
    border-radius: 0;
    background-color: #FFF9E3;
}

#HeaderTitleContainer #HeaderTitle {
    font-size: 16px;
    color: #222;
}

#RecordHeader #RecordInfo {
    padding: 0 16px;
    color: #222222;
}

#RecordHeader #RecordInfo div p .elapsed-time {
    background-color: #CECECE;
}

.ui-icon, .ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_3d3d3d_256x240.png");
}

.control-selectable .ui-selected {
    background: #106EBE;
    border: 1px solid #005A9E;
}

.control-selectable li:active {
    background: #106EBE;
    border: 1px solid #005A9E;
    color: #FFFFFF;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: none;
    color: #106EBE;
}

.template-tab-container .fieldset {
    background-color: #FFFFFF;
}

.ui-tabs .ui-tabs-panel {
    background-color: #FFFFFF;
}

.ui-widget-content {
    border: 1px solid #AEAEAE;
    background-color: #F5F5F5;
}

.container-selectable {
    margin-top: 8px;
}

.field-control .container-selectable .wrapper {
    background-color: #FFFFFF;
}

fieldset .field-vertical > .field-label {
    padding: 0;
}

.field-label label{
    cursor: default;
    color: #222222;
}

.field-control .command-left .control-textbox {
    margin-right: 8px;
}

.field-control .command-right {
    padding: 0;
}

.field-control .command-right > button {
    margin: 0 0 8px;
}

.ui-dialog .command-center > button{
    margin: 0 4px;
}

/* フッタメッセージ */
#Application .message {
    bottom: 63px;
}

    #Application .message .body {
        margin-bottom: 0;
        border-radius: 0;
    }

#Application .alert-success {
    padding: 8px;
    background-color: rgba(0,159,124,.9);
    border: none;
}

#Application .alert-error {
    padding: 8px;
    background-color: #E03E3E;
    border: none;
}

.message-dialog .alert-error {
    background-color: #E03E3E;
}

/* フッタボタン */
#Application #MainCommandsContainer {
    height: 63px;
    background-color: rgba(0,0,0,.5);
    bottom: 0;
    padding-top: 16px;
}

#Application #MainCommands > button {
    margin: 0 4px;
}

#Application #MainCommands > button .ui-icon-person {
    background-position: -144px -96px;
}

/* 共通フッタ（コピーライト） */
#MainContainer #Footer {
    display: none;
}

#MainContainer #BottomMargin {
    height: 80px;
}

/* トップ（スタートガイド） */
#MainForm #StartGuide {
    width: calc(100% - 32px);
    background-color: #FFFFFF;
    border-radius: 4px;
    margin: 16px 16px 0;
    padding: 24px 0 0 0;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

#MainForm #StartGuide > #StartGuideContents > a:hover {
    background-color: #EFF6FC;
}

#MainForm #StartGuide > #StartGuideContents {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

#MainForm #StartGuide > #StartGuideContents > a {
    margin: 0 0;
    border-radius: 4px;
    padding: 16px;
    width: 216px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#MainForm #StartGuide > #DisableStartGuideField {
    margin: 24px 0 0 16px;
}

/* トップ（サイトメニュー） */
#SiteMenu {
    margin: 0;
}

#SiteMenu .heading {
    display: none;
}

#Application .nav-sites {
    margin: 0;
    padding: 16px;
}

#Application .nav-site {
    margin: 0 16px 16px 0;
}

#Application .nav-site a {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

#Application .nav-site .conditions {
    top: 0;
    left: 0;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

#Application .nav-site .conditions span:nth-of-type(2) {
    margin-left: auto;
}

#Application .nav-site .conditions span.count {
    background-color: #C1E1FF;
    border: 1px solid #90CAFF;
}

#Application .nav-site .conditions span.overdue {
    background-color: #E03E3E;
    border: 1px solid #E03E3E;
}

#Application .nav-site {
    width: 209px;
    min-height: 140px;
    background-color: #FFFFFF;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

#Application .nav-site span.title {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.stacking1, .stacking2 {
    display: none;
}

#SiteMenu .nav-site.to-parent {
    min-height: 36px;
    margin-top: 0;
}

#SiteMenu .nav-site.to-parent .ui-icon{
    top: 12px;
}

#TemplateTabsContainer.ui-widget.ui-widget-content {
    border: none;
    border-radius: 0;
}

#TemplateTabsContainer.ui-widget.ui-widget-content.ui-tabs {
    padding: 0;
}

#TemplateTabsContainer .template-viewer {
    background-color: #F8F8F8;
    border: 1px solid #CECECE;
    padding: 0;
    margin: 0 0 0 330px;
}

#TemplateTabsContainer .template-viewer .description {
    margin: 0;
    padding: 10px 16px 8px;
    border: none;
    border-radius: 0;
    border-bottom: none;
    background: #FFF9E3;
}

#TemplateTabsContainer .template-viewer .samples-displayed {
    margin: 0;
    padding: 10px 16px 8px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #cecece;
    background: #FFE1E1;
    color: #E03E3E;
}

.viewer .template-tab-container.ui-widget.ui-widget-content {
    border: none;
    border-radius: 0;
    padding: 16px;
    background-color: #F8F8F8;
}

#SiteMenu .nav-site .conditions span {
    background: none;
    padding: 0 8px;
    margin: 6px 6px 6px 0;
}

.site-icon{
    margin: 24px 0 0;
}

.site-icon img {
    width: 48px;
}

#StandardTemplatesViewer .site-icon {
    text-align: center;
}

/* サイドメニュー */
.box-header {
    background: #fff;
    height: 64px;
    padding: 1em;
    position: absolute;
    width: 92%;
    right: 10px;
}

.box-sitename {
    font-weight: 700;
    font-size: 18px;
}

.hamburger-menubox * {
    font-size: 13px;
}

.hamburger-menubox li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.input-hidden {
    display: none;
}

.hamburger-switch {
    cursor: pointer;
    position: fixed;
    left: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    z-index: 9999;
    background-color: #FFFFFF;
    padding: 12px;
    border-radius: 4px
}

.hamburger-switch-line, .hamburger-switch-line:before, .hamburger-switch-line:after {
    width: 20px;
    height: 2px;
    background: #666;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: .3s;
    content: "";
    z-index: 9999;
}

.hamburger-switch-line {
    transform: translate(-50%, -50%);
}

.hamburger-switch-line:before {
    transform: translate(-50%, -300%);
}

.hamburger-switch-line:after {
    transform: translate(-50%, 200%);
}

.hamburger-menuwrap {
    position: fixed;
    height: 100%;
    background: #FFFFFF;
    padding: 100px 0 16px;
    z-index: 9998;
    transition: .3s;
    top: 0;
    left: 0;
    width: 52px;
    overflow: hidden;
    box-shadow: 2px 0 2px rgba(0,0,0,.2);
}

.hamburger-menulist {
    margin-right: 3%;
    padding-left: 0%;
    list-style: none;
}

.hamburger-menulist li a {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0;
    overflow: hidden;
    width: 160px;
    height: 52px;
}

.accordion a img {
    margin: 0 10px 0 10px;
    width: 32px;
}

.accordion a img.new {
    background-color: #106EBE;
    border-radius: 16px;
}

.hamburger-menulist li a:hover {
    background-color: #DEECF9;
}

#hamburger:checked ~ .hamburger-menuwrap {
    left: 0;
    width: 240px;
    overflow-y: scroll;
}

.hamburger-menuwrap::-webkit-scrollbar {
    display: none;
}

#hamburger:checked ~ .hamburger-closelabel {
    width: 100%;
    height: 100%;
    top: 50px;
    left: 0;
}

#hamburger:checked ~ .hamburger-closelabel .hamburger-cover {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9997;
    background: rgba(3,3,3,.1);
    display: block;
    cursor: pointer;
}

section.accordion {
    width: 240px;
    overflow: hidden;
}

.toggle {
    display: none;
}

.menulabel {
    display: block;
    cursor: pointer;
}

label.menulabel::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #999999;
    border-right: 2px solid #999999;
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: calc( 50% - 3px );
    right: 20px;
    transform: rotate(135deg);
}

.menulabel,
.menubox-sub {
    height: 52px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.toggle:checked + .menulabel + .menubox-sub {
    width: 240px;
    height: auto;
    transition: all .3s;
    overflow: hidden;
}

.toggle:checked + .menulabel::before {
    transform: rotate(-45deg);
}

.menubox > a {
    min-height: 52px;
}

.menubox a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: #222222;
    text-decoration: none;
}

.menubox a span:first-child {
    width: 52px;
}

.menubox .menulabel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.menubox a:hover,
.menubox label:hover {
    background-color: #DEECF9;
}

.menubox .menulabel span:first-child {
    width: 52px;
    height: 52px;
    justify-content: center;
}

.menubox .menulabel span:first-child img{
    width: initial;
    margin: auto;
}

.menubox-sub {
    height: 0;
    padding: 0;
    overflow: hidden;
    background-color: #F5F5F5;
}

.menubox-sub ul {
    margin: 0;
    padding: 0;
}

.menubox-sub ul li a {
    width: 100%;
    padding: 8px 8px 8px 52px;
}

.menubox-sub ul li a:hover {
    background: #E7E7E7;
}

.menubox a span,
.menubox label span {
    display: flex;
    align-items: center;
}

.menubox-sub .sub-menu .sub-menu > ul {
    margin-bottom: 15px;
}

.menubox-sub .sub-menu .sub-menu > ul li {
    padding-left: 52px;
}

.menubox-sub .sub-menu .sub-menu > ul > li > a {
    position: relative;
    padding: 3px 1.5em;
    font-size: 12px;
    word-break: break-all;
}

.menubox-sub .sub-menu .sub-menu > ul > li > a::before {
    position: absolute;
    top: 3px;
    left: 0;
    content: '・';
}

/* ログイン画面 */
body#login {
    background-color: #F8F8F8;
}

body#login #MainContainer {
    margin-left: 0;
}

body#login #MainContainer #Application #PortalLink{
    top: -30px;
}

#MainContainer #Header {
    min-height: 39px;
}

#LoginLogo {
    margin: 100px auto 40px;
}

#LoginLogo #Logo {
    padding: 0;
}

#LoginLogo #Logo #CorpLogo {
    float: none;
    margin: 0 auto;
    max-height: 48px;
    margin: 0 auto 20px auto;
}

#MainForm #LoginFieldSet {
    background-color: initial;
    border: 1px solid #CECECE;
    border-radius: 4px;
    margin: 0 auto 20px auto;
}

#Logins div .field-wide {
    padding-bottom: 14px;
}

#Logins div .field-wide .field-control .container-normal {
    margin-left: 0;
}

#Logins div .field-wide .field-control .container-normal input {
    height: 48px;
    border: 1px solid #CECECE;
    border-radius: 4px;
    padding: 4px 20px;
    font-size: 16px;
}

#Logins div .field-wide .field-control .container-normal input.error{
    border: solid 1px #f00;
}

#Logins div #Tenants:empty {
    display: none;
}

#Logins div #Tenants.field-wide {
    padding-right: 0;
}

#Logins div #Tenant select {
    height: 48px;
    border: 1px solid #CECECE;
    border-radius: 4px;
    padding: 4px 20px;
    font-size: 16px;
}

#Logins #SsoLogin .ssoLoginMessage {
    margin: 10px 0;
    padding: 6px 0;
}

#login #Users_LoginIdField p,
#login #Users_PasswordField p {
    display: none;
}

#login #Users_LoginIdField .field-control .container-normal label.error,
#login #Users_PasswordField .field-control .container-normal label.error {
    background-color: transparent;
    border-radius: 0;
    border: none;
    padding: 4px 8px;
    top: 0;
}

#login #Users_PasswordField div .show-password {
    position: absolute;
    top: 14px;
    right: -36px;
    color: #666666;
    font-weight: lighter;
}

#login #Users_RememberMeField {
    width: 240px;
    padding-top: 24px;
}

#login #Users_RememberMeField .field-control .container-normal {
    margin-left: 0;
}

#login #Users_RememberMeField .field-control .container-normal .control-checkbox ~ label {
    margin: 5px 5px 0 6px;
}

#LoginCommands {
    position: relative;
    top: -30px;
    right: 8px;
}

#LoginCommands button {
    height: 40px;
}

#MainForm #LoginFieldSet #Logins #LoginCommands #Login.ui-button {
    padding: 4px 22px !important;
}

.fieldset .show-password,
.ui-dialog .show-password {
    color: #666666;
    font-weight: lighter;
}

#LoginFieldSet #TotpRegister {
    text-align: center;
}

#LoginFieldSet #TotpRegister #qrCodeText {
    font-size: 1.2rem;
}

#FullCalendar th {
    padding: 8px 0;
}

#FullCalendar td {
    padding: 0;
}

#FullCalendar tbody {
    background: #fff;
}

#FullCalendar th[role="presentation"],
#FullCalendar td[role="presentation"] {
    padding: 0;
}

#FullCalendar .fc-daygrid-day-top {
    padding: 8px;
}

#FullCalendar .fc-event-time {
    padding: 0 8px;
}

#ViewModeContainer #CalendarBody th,
#ViewModeContainer #CalendarBody td {
    padding: 8px 0;
    border: 1px solid #8F8F8F;
}

#CalendarBody tbody {
    background-color: #fff;
}