/** Bootstrap shim
 ********************************************************************/

.shown { display : revert !important; }
.hidden { display : none !important; }

.invisible {
    -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter     : alpha(opacity=0);
    opacity    : 0;
}

@-webkit-keyframes fadeFromOpaque {
    0% {
        -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter     : alpha(opacity=0);
        opacity    : 0;
    }
    100% {
        -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter     : alpha(opacity=100);
        opacity    : 1;
    }
}

@keyframes fadeFromOpaque {
    0% {
        -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter     : alpha(opacity=0);
        opacity    : 0;
    }
    100% {
        -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter     : alpha(opacity=100);
        opacity    : 1;
    }
}

.visible {
    -webkit-animation : fadeFromOpaque 0.5s ease-out 0s 1;
    animation         : fadeFromOpaque 0.5s ease-out 0s 1;
}

.pull-right { float : right; }
.pull-left { float : left; }
.pull-none { float : none; }

.btn-primary {
    background-color : #2E7AB6;
}

a.btn {
    font-size : 1em;
    color     : white;
}

.text-right {
    margin-bottom : 0;
}

.form-control-label {
    border     : none;
    background : transparent;
    cursor     : pointer;
}

label.form-control-label {
    /*font-weight : bold;*/
    display      : inline-block;
    width        : auto;
    padding-left : 0;
}

input[type=radio].form-control,
input[type=checkbox].form-control {
    display : inline-block;
    width   : auto;
    cursor  : pointer;
}

.container {
    max-width : 90%;
}

.row {
    width       : 100%;
    margin-left : 0;
}

.table {
    border : 1px solid #DDD;
}

div.css-table-responsive {
    overflow: auto;
    white-space: nowrap;
    max-width: 85vw;
    margin-bottom: 1rem;
}

.css-mylist-table td {
    vertical-align: middle;
}

.btn:focus {
    outline            : none;
    box-shadow         : none;
    -o-box-shadow      : none;
    -moz-box-shadow    : none;
    -webkit-box-shadow : none;
}

.inline-select {
    display : inline-block;
    width   : unset;
}

.btn-group .dropdown-menu,
.bootstrap-select .dropdown-menu {
    box-shadow : 0 10px 20px slategray;
}

.btn[disabled=disabled] {
    background-color : gray !important;
    border-color     : darkgray;
}

/** 共通
 ********************************************************************/

body {
    width            : 100%;
    height           : 100vh;
    background-color : #F9F5FC;
    font-size        : 0.8rem;
}

a:hover {
    text-decoration : none;
}

.css-content-all {
    display       : table;
    width         : 100%;
    min-height    : 80vh;
    position      : relative;
    top           : -29px;
    margin-bottom : 14px;
}

.css-content-main {
    display : table-cell;
}

.css-content {
    max-width : 800px;
    margin    : 0 auto;
}

#header {
    width            : 100%;
    height           : 80px;
    background-color : #7E467C;
}

#header .css-banner {
    height                : 50px;
    padding-top           : 12.5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
}

#header .css-logo {
    height         : 25px;
    line-height    : 50px;
    width          : auto;
}

#header .css-usermenu-wrapper {
    width            : 100%;
    background-color : #FFF;
    border-bottom    : 1px solid #CECCCE;
}

#usermenu {
    height     : 30px;
    overflow   : visible;
    text-align : right;
}

#header .css-usermenu {
    float : right;
}

#header .css-usermenu > div {
    display     : inline;
    float       : left;
    margin-left : 10px;
    line-height : 30px;
}

#header .css-avatar {
    width    : 64px;
    height   : 64px;
    position : relative;
    top      : -34px;
}

#header .css-badge > span {
    cursor                : pointer;
    padding               : 0 10px;
    background-color      : rgb(189, 5, 5);
    -webkit-border-radius : 1rem;
    -moz-border-radius    : 1rem;
    border-radius         : 1rem;
    color                 : white;
}

.css-notifications {
    background-color      : #FFF;
    padding               : 10px;
    border                : 1px solid #CECCCE;
    z-index               : 200;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;

    box-shadow            : 0 20px 30px darkgray;
    -o-box-shadow         : 0 20px 30px darkgray;
    -moz-box-shadow       : 0 20px 30px darkgray;
    -webkit-box-shadow    : 0 20px 30px darkgray;
}

.css-arrow,
.css-arrow::before {
    position : absolute;
    width    : 20px;
    height   : 20px;
    z-index  : -1;
}

.css-arrow::before {
    content          : "";
    transform        : rotate(45deg);
    background-color : #FFF;
    border-left      : 1px solid #CECCCE;
    border-top       : 1px solid #CECCCE;
}

.css-notifications[data-popper-placement^="top"] > .css-arrow,
.css-notifications[x-placement^="top"] > .css-arrow {
    bottom : -10px;
}

.css-notifications[data-popper-placement^="bottom"] > .css-arrow,
.css-notifications[x-placement^="bottom"] > .css-arrow {
    top : -10px;
}

.css-notifications[data-popper-placement^="left"] > .css-arrow,
.css-notifications[x-placement^="left"] > .css-arrow {
    right : -10px;
}

.css-notifications[data-popper-placement^="right"] > .css-arrow,
.css-notifications[x-placement^="right"] > .css-arrow {
    left : -10px;
}

.css-cursor_pointer {
    cursor : pointer !important;
}

.css-notifications p {
    margin : 0;
}


#content {
    position       : relative;
    padding-bottom : 200px;
}

/** サイドメニュー
 ********************************************************************/

#sidemenu {
    background-color   : #FFF;
    padding            : 0;
    -moz-box-shadow    : inset 0 0 0 1px #CECCCE;
    -o-box-shadow      : inset 0 0 0 1px #CECCCE;
    -webkit-box-shadow : inset 0 0 0 1px #CECCCE;
    box-shadow         : inset 0 0 0 1px #CECCCE;
    display            : inline-block;
    position           : fixed;
    z-index            : 995;
    top                : 0;
    bottom             : 0;
    left               : -180px;
    font-size          : 1rem;
    width              : 170px;
}

#small_menu {
    float     : left;
    font-size : 0.8rem;
    display   : inline-block;
    cursor    : pointer;
}

#small_menu span {
    font-size : 2rem;
    position  : relative;
    top       : -20px;
}

@-webkit-keyframes slideInMenuOverlay {
    0% { left : -180px; }
    100% { left : 0; }
}

@keyframes slideInMenuOverlay {
    0% { left : -180px; }
    100% { left : 0; }
}


#sidemenu.css-slide {
    left              : 0;

    -webkit-animation : slideInMenuOverlay 0.2s ease-out 0s 1;
    animation         : slideInMenuOverlay 0.2s ease-out 0s 1;
}

.css-sidemenu-overlay {
    z-index           : 994;
    background        : black;
    position          : fixed;
    display           : block;
    top               : 0;
    bottom            : 0;
    right             : 0;
    left              : 0;
    -ms-filter        : "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter            : alpha(opacity=60);
    opacity           : 0.6;
    -webkit-animation : fadeInOverlay 0.3s ease-out 0s 1;
    animation         : fadeInOverlay 0.3s ease-out 0s 1;
}

@media (min-width : 576px) {
}

@media (min-width : 768px) {
    #sidemenu {
        display               : table-cell;
        position              : initial;
        z-index               : inherit;
        /* padding-top           : 35px; */
        -webkit-border-radius : 5px;
        -moz-border-radius    : 5px;
        border-radius         : 5px;
        font-size             : 0.8rem;
        width                 : 150px;
    }

    .css-sidemenu-overlay,
    #small_menu {
        display : none;
    }
}

@media (min-width : 992px) {
    div.css-table-responsive {
        max-width: 70vw;
    }
}

@media (min-width : 1200px) {

}

@media (min-width: 1300px){
    div.css-table-responsive {
        max-width: 100%;
    }
}

#sidemenu > div,
#sidemenu > a {
    background-color : #D7D6D7;
    padding          : 10px;
    color            : #666;
    text-align       : center;
    margin-top       : 1px;
    display          : block;
}

#sidemenu > a:hover:not(.css-active) {
    background-color : #C4C4C4;
    cursor           : pointer;
}

#sidemenu > span:first-child {
    display     : block;
    padding     : 10px;
    text-align  : center;
    line-height : 2.8rem;
    color       : #8A8A8A;
}

#sidemenu > a.css-active,
#sidemenu > div.css-active {
    color      : #FFF;
    background : #4F4F4F;
    cursor     : default;
}

#sidemenu a div {
    text-decoration : none;
    color           : black;
}

#sidemenu a.css-active div {
    color : white;
}

/** タブ
 ********************************************************************/

#tabs.ui-tabs {
    /* サイドバーとタブの高さが揃えるため！ */
    padding-bottom : 0.1px;
}

#tabs .css-pagetitle {
    font-size   : 1.4rem;
    font-weight : bold;
    margin      : 0 auto;
}

#tabs .css-top-pagetitle {
    display: inline-block;
    align-items: end;
    height: min-content;
    margin: auto;
    padding: 0 1rem;
}
#tabs .css-tabbar {
    margin              : 0;
    padding             : 0;
    margin-top          : 5px;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
}

#tabs .ui-tabs-nav {
    margin  : 0;
    padding : 0;
}

#tabs .ui-tab {
    padding          : 5px;
    list-style       : none;
    float            : left;
    clear            : right;
    color            : #337AB7;
    background-color : transparent;
    position         : relative;
    bottom           : -2px;
    border           : none;
    z-index          : 100;
}

#tabs .ui-tab:first-child {
    margin-left : 15px;
}

#tabs .ui-tab.ui-tabs-active {
    background-color   : #FFF;
    border             : 1px solid #CECCCE;
    border-bottom      : none;
    box-shadow         : 0 -15px 20px rgba(244, 244, 0, 0.2);
    -moz-box-shadow    : 0 -15px 20px rgba(244, 244, 0, 0.2);
    -o-box-shadow      : 0 -15px 20px rgba(244, 244, 0, 0.2);
    -webkit-box-shadow : 0 -15px 20px rgba(244, 244, 0, 0.2);
}

#tabs .css-tabbar a {
    color : rgb(100, 156, 240);
}

#tabs .css-tabbar .ui-tab.ui-tabs-active a {
    color           : #000 !important;
    text-decoration : none;
    cursor          : default;
}

#tabs .ui-tabs-panel {
    padding               : 10px;
    background-color      : #FFF;
    height                : 100%;
    clear                 : both;
    border                : 1px solid #CECCCE;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
}

#tabs .css-tabcontent {
    width          : 100%;
    min-height     : 75vh;
    padding-bottom : 100px;
}

#tabs .css-tab-close {
    border : 1px solid transparent !important;
    cursor : pointer;
}

#tabs .css-tab-close:hover {
    border           : 1px solid #BD2130 !important;
    color            : #FFF !important;
    background-color : #C82333 !important;
}

/**
 ********************************************************************/

#footer {
    border-top       : 1px solid #CECCCE;
    width            : 100%;
    background-color : #FFF;
    height           : 30px;
    text-align       : center;
}

.lp-footer-content {
    padding        : 1rem;
    padding-bottom : 0;
    text-align     : left;
    display        : inline-block;
}

.lp-footer-content ul {
    list-style   : none;
    padding-left : 0;
}

.lp-footer-content i {
    margin-right : .5rem;
}

.lp-footer-content a,
.lp-footer-content a:link,
.lp-footer-content a:hover,
.lp-footer-content a:visited,
.lp-footer-content a:active {
}

#footer {
    height   : auto;
    /*position : static;*/
}

/**
 ********************************************************************/

.custom-file-container,
.css-profile-pic-container {
    display : flex;
}

.css-profile-pic-clear {
    /*float : left;*/
    position : absolute;
    top      : 0;
    left     : 0;
}

.css-profile-pic {
    width           : 96px;
    height          : 96px;
    overflow        : hidden;
    background-size : contain;
    margin          : 0;
}

.css-profile-pic-file {
    margin : 0;
    top    : 56px;
}

.css-profile-pic-filename {
    padding-right : 70px;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.css-licfile {
    display : none;
}

.ui-widget-content,
.ui-widget-header,
.ui-widget.ui-widget-content {
    background : none;
    border     : none;
}

.css-error {
    color                 : #721C24;
    background-color      : #F8D7DA;
    border-color          : #F5C6CB;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    padding-top           : 1rem;
    margin-bottom         : 1rem;
}

.css-success {
    color                 : #155724;
    background-color      : #D4EDDA;
    border-color          : #C3E6CB;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    padding-top           : 1rem;
    margin-bottom         : 1rem;
}

.css-link {
    text-decoration : none;
}

.css-link-color {
    color : rgb(100, 156, 240) !important;
}

.css-form-error p {
    color                 : #721C24;
    background-color      : #F8D7DA;
    border-color          : #F5C6CB;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    padding               : 0.4rem;
    margin-top            : 5px;
    font-size             : 1rem;
}

.css-pre-inputform input,
.css-pre-inputform select {
    width : 100%;
}

@-webkit-keyframes fadeInOverlay {
    0% {
        -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter     : alpha(opacity=0);
        opacity    : 0;
    }
    100% {
        -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter     : alpha(opacity=100);
        opacity    : 0.3;
    }
}

@keyframes fadeInOverlay {
    0% {
        -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter     : alpha(opacity=0);
        opacity    : 0;
    }
    100% {
        -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter     : alpha(opacity=100);
        opacity    : 0.3;
    }
}

.css-overlay {
    z-index           : 999;
    background        : black;
    position          : fixed;
    /*width             : 100vw;*/
    /*height            : 100vw;*/
    display           : block;
    top               : 0;
    bottom            : 0;
    right             : 0;
    left              : 0;
    -ms-filter        : "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter            : alpha(opacity=30);
    opacity           : 0.3;

    -webkit-animation : fadeInOverlay 0.3s ease-out 0s 1;
    animation         : fadeInOverlay 0.3s ease-out 0s 1;
}

.css-overlay-focus {
    height  : 0;
    width   : 0;
    border  : none;
    padding : 0;
    margin  : 0;
    opacity : 0;
    float   : left;
}

.css-overlay_transparent {
    background : transparent;
}

.css-form-group label {
    margin-bottom : 0;
    padding       : 0;
}

.css-form-group > * {
    padding-left : 0;
}

/* ダイアログ */

/* 利用規約ダイアログスクロール */
.swal2-content.css-term-content {
    overflow : scroll;
}

/* 利用規約ダイアログサイズ調整 */
.swal2-popup.css-term-popup {
    width  : 80%;
    height : 60%;
}

/* 利用規約ヘッダータイトルサイズ変更 */
.css-term-dialog .swal2-title {
    font-size : 1.2rem;
}

.css-term-dialog-style ul {
    list-style : none;
}


.css-auth-dialog .swal2-header,
.css-reject-dialog .swal2-header {
    display               : block;
    background-color      : #F8D7DA;
    margin                : 0 0 10px 0;
    -webkit-border-radius : 5px 5px 0 0;
    -moz-border-radius    : 5px 5px 0 0;
    border-radius         : 5px 5px 0 0;
    padding               : 10px 15px;
}

.css-edit-dialog .swal2-header {
    display               : block;
    background-color      : #D7D6D7;
    margin                : 0 0 10px 0;
    -webkit-border-radius : 5px 5px 0 0;
    -moz-border-radius    : 5px 5px 0 0;
    border-radius         : 5px 5px 0 0;
    padding               : 10px 15px;
}

/* ×ボタンの調整 */
.css-edit-dialog .swal2-header .swal2-close {
    color         : #495057;
    padding-right : 15px;
    font-size     : 1.7em;
    line-height   : 1.7em;
    width         : 1.7em;
    height        : 1.7em;
}

.css-auth-dialog .swal2-content,
.css-edit-dialog .swal2-content,
.css-reject-dialog .swal2-content {
    padding : 0;
}

.css-auth-dialog .swal2-title,
.css-reject-dialog .swal2-title {
    color       : #721C24;
    font-weight : normal;
    font-size   : 1.4em;
    margin      : 0;
}

.css-edit-dialog .swal2-title {
    font-weight : normal;
    font-size   : 1.4em;
    margin      : 0;
}


.css-auth-dialog .swal2-popup,
.css-edit-dialog .swal2-popup,
.css-reject-dialog .swal2-popup {
    padding : 0;
}

.css-auth-dialog,
.css-reject-dialog {
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
}


/* ボタンサイズの変更(comfirm) */
.css-term-dialog .swal2-styled,
.css-add-dialog .swal2-styled,
.css-edit-dialog .swal2-styled,
.css-delete-dialog .swal2-styled,
.css-contact-dialog .swal2-styled,
.css-auth-dialog .swal2-styled,
.css-reject-dialog .swal2-styled {
    padding : 0.375rem 0.75rem;
}

.css-edit-dialog .swal2-actions,
.css-auth-dialog .swal2-actions,
.css-reject-dialog .swal2-actions {
    display    : block;
    margin     : 1em auto 1em;
    text-align : right;
}

.css-auth-dialog .label-field,
.css-edit-dialog .label-field,
.css-reject-dialog .label-field {
    margin-top : 10px;
}

.css-auth-dialog .form-control-label,
.css-edit-dialog .form-control-label,
.css-reject-dialog .form-control-label {
    font-weight : bold;
}

/* 却下ボタン */
.css-delete-dialog .swal2-styled.swal2-confirm,
.css-reject-dialog .swal2-styled.swal2-confirm {
    background-color : #DC3545;
    font-size        : 0.9em;
}

.css-auth-dialog .swal2-styled.swal2-confirm,
.css-add-dialog .swal2-styled.swal2-confirm,
.css-edit-dialog .swal2-styled.swal2-confirm {
    font-size : 0.9em;
}

/* はいボタン */
.css-contact-dialog .swal2-styled.swal2-confirm {
    font-size : 0.9em;
}

/* 却下ボタン(deny) */
.css-contact-dialog .swal2-styled.swal2-deny {
    font-size : 0.9em;
}


/* キャンセルボタン */
.css-term-dialog .swal2-cancel.swal2-styled,
.css-contact-dialog .swal2-cancel.swal2-styled,
.css-auth-dialog .swal2-styled.swal2-cancel,
.css-reject-dialog .swal2-styled.swal2-cancel {
    color            : #000;
    background-color : #C0C0C0;
    font-size        : 0.9em;
}

/* キャンセルボタン(サイズだけ変更用) */
.css-delete-dialog .swal2-styled.swal2-cancel,
.css-add-dialog .swal2-styled.swal2-cancel,
.css-edit-dialog .swal2-styled.swal2-cancel {
    font-size : 0.9em;
}


/* 確認ダイアログ本文左寄せ */
.css-term-dialog .swal2-content,
.css-add-dialog .swal2-content,
.css-delete-dialog .swal2-content,
.css-contact-dialog .swal2-content,
.css-auth-dialog .swal2-content,
.css-reject-dialog .swal2-content {
    text-align : left;
    font-size  : 1em;
    padding    : 0;
}

.css-auth-dialog .css-reject-content,
.css-reject-dialog .css-reject-content {
    padding-left  : 15px;
    padding-right : 15px;
}


/* 確認ダイアログのボタンの右寄せ */
.css-add-dialog .swal2-actions,
.css-delete-dialog .swal2-actions,
.css-term-dialog .swal2-actions,
.css-contact-dialog .swal2-actions {
    display    : block;
    text-align : right;
    padding    : 0;
}

.css-instruction-button-dialog .swal2-html-container  {
    white-space: break-spaces;
}


/* タブ */
.css-userdetail-tabcontent ul {
    list-style           : none;
    padding-inline-start : 0;
    margin-bottom        : 0;
}

.css-userdetail-tabcontent table {
    width      : 100%;
    /*max-height : 300px;*/
    overflow-y : auto;
}

.css-pagination {
    display : inline-block;
}

.css-pagination .page-item.disabled,
.css-pagination .page-item.active {
    cursor : default !important;
}

.css-pagination .page-item.disabled .page-link {
    color : gray !important;
}

.konvajs-content {
    margin   : 0 auto !important;
    position : inherit !important;
    border   : 1px solid lightgray;
}

.konvajs-content canvas {
    margin : 0 auto !important;
}

.css-subordinate-form {
    margin-top : 15px;
}

.css-subordinate-delete {
    margin-right : 10px;
}

.css-master-delete {
    margin-right : 10px;
}

.css-nowrap {
    white-space : nowrap;
}

.css-unsubscribe-position {
    bottom : 10px;
}

.css-mypage-plan-select {
    margin-bottom : 200px;
}

.css-inline-list li {
    display      : inline;
    margin-right : 1em;
}

.css-line-break {
    white-space : pre-wrap;
}

.css-word-wrap {
    word-break    : break-word;
    overflow-wrap : break-word;
}

.css-favorite-organaization-nav:hover {
    cursor : pointer;
}

.css-favorite-organization-nav-menu li:hover {
    background-color : #4F4F4F;
    color            : #FFF;
}

.css-favorite-organaization-nav ul li {
    color : #4F4F4F;
}

.css-add-org-mylist-select {
    color : rgb(100, 156, 240);
}

.css-favorite-organization-nav-menu {
    background           : white;
    padding              : 10px;
    z-index              : 1010;
    position             : absolute;
    border               : 1px solid black;
    padding-inline-start : 10px !important;
}

.flatpickr-calendar {
    box-shadow         : 0 20px 30px darkgray;
    -o-box-shadow      : 0 20px 30px darkgray;
    -moz-box-shadow    : 0 20px 30px darkgray;
    -webkit-box-shadow : 0 20px 30px darkgray;
}

/* trのホバー時の色付け */
.css-table-tr-hover-color:hover {
    background-color : lightgray;
}

.css-user-search-results {
    /* margin-bottom : 100px; */
}

/* bootstrapのモーダルのカスタマイズ */
.modal.fade .modal-dialog {
    -webkit-transform : translate(0, 0);
    -ms-transform     : translate(0, 0);
    transform         : translate(0, 0);
}

.container-fluid {
    padding : 0;
}

.modal-body {
    padding-left   : 0;
    padding-right  : 0;
    padding-bottom : 0;
}

.modal-header {
    background-color : #D7D6D7;
    padding          : 0.5rem;
}

.modal-title {
    font-size : 1rem;
}

.modal-footer {
    border-top  : none;
    padding-top : 0;
}

.css-normal-weight {
    font-weight : normal !important;
}

.css-paid-history {
    border-collapse: collapse;
}

.css-no-top-border td {
    border-top : none;
}

/* サービス利用履歴 */
.css-paid-history ul{
    list-style           : none;
    padding-inline-start : 0;
    margin-bottom        : 0;
}

/* サービスマニュアルの不要なマージンの削除 */
.pf {
    margin: 0!important;
}