/*
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
*/
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

    html[app-fs="L"] {
        font-size: 16px;
    }

body {
    margin-top: 70px;
    /*margin-bottom: 60px;*/
}

@media (max-width: 576px) {

    .dropdown-item {
        font-size: 1.2rem;
    }
}

nav.navbar.fixed-top a.active {
    padding-bottom: 1px;
    border-bottom: 3px solid #1a73e8;
}

/* loading */
#top-loading {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0,0,0,0.02);
}

.top-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-spinner {
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

.spinner-sm {
    width: 1.5rem;
    height: 1.5rem;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

/* sticky table */
.sticky_table {
    display: block;
    overflow: hidden;
    /* height: calc(100vh - 220px); */
    height: 100%;
    margin: 0 auto;
}

    .sticky_table table {
        display: block;
        position: relative;
        overflow: scroll;
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        font-size: 0;
    }

        .sticky_table table thead, .sticky_table table tbody {
            display: block;
            width: max-content;
        }

        .sticky_table table th, .sticky_table table td {
            /*display: inline-block;*/
            min-width: 5rem;
            font-size: 1rem;
        }

        .sticky_table table tbody th:nth-of-type(1) {
            background-color: #fff;
        }

        .sticky_table table th:nth-of-type(1) {
            border-left: 0;
            border-collapse: separate;
        }

        .sticky_table table tbody th {
            position: sticky;
            left: 0;
            z-index: 1;
        }

        .sticky_table table thead {
            position: sticky;
            top: 0;
            z-index: 2;
        }

            .sticky_table table thead th.blank {
                position: sticky;
                top: 0;
                left: 0;
                z-index: 3;
            }

/* ReservePage */
/*.dropdown-toggle-split {
  border-left: solid 1px whitesmoke;
}*/
#ReservePage #Calendar {
    height: calc(100vh - 18rem);
}

#ReservePage .table > :not(:first-child) {
    border-top: none;
}

#ReservePage #Dialog .modal-body {
    /*background-color: whitesmoke;*/
}

#ReservePage #Dialog label {
    font-weight: 700;
}

#ReservePage #Dialog #selUId table {
    width:auto;
}
    #ReservePage #Dialog #selUId table td {
        padding: 0.5rem;
        white-space: nowrap;
    }

#ReservePage #Dialog #option .card {
    max-height: 8.8rem;
    overflow-y: scroll;
}

#ReservePage #DialogEdit .bg .modal-content,
#ReservePage #DialogEdit .bg button,
#ReservePage #DialogEdit .bg input,
#ReservePage #DialogEdit .bg table {
    background-color: silver;
}

#ReservePage #DialogEdit .modal-footer {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#ReservePage #DialogEdit #DateFr,
#ReservePage #DialogEdit #DateTo {
    width: 6.4rem;
    padding: 0rem;
}

#ReservePage #DialogEdit table {
    vertical-align: middle;
}

    #ReservePage #DialogEdit table td {
        padding-top: 0;
        padding-bottom: 0;
    }

    #ReservePage #DialogEdit table div,
    #ReservePage #DialogEdit table button {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

/* #UserPage */
#UserPage .card-body table {
    vertical-align: middle;
}
#UserPage .card-body table td:not(:last-child) {
    border-right: solid 1px;
    border-right-color: inherit;
}
    #UserPage .card-body table td:first-child,
    #UserPage .card-body td:last-child {
        width: 1px;
        white-space: nowrap;
    }
    #UserPage .card-body table tr:not(:last-child) {
        border-bottom: solid 1px;
        border-bottom-color: inherit;
    }

/* #ManagePage */
#ManagePage table {
    vertical-align: middle;
}

/* calendarM */
#calendarM {
    /*width: 100%;*/
}

    #calendarM table {
        table-layout: fixed;
        width: 100%;
    }

    #calendarM .bg {
        opacity: 0.8;
    }

    #calendarM thead {
        border-bottom: solid 1px lightgray;
    }

        #calendarM thead th {
            /*background-color: whitesmoke;*/
            background-color: white;
            text-align: center;
        }

    #calendarM tbody {
        background-color: black;
    }

        #calendarM tbody td:not([class="t2c-today"]):not([class^="ritem-tag-"]) {
            /*background-color: #f9f9f9;*/
            background-color: white;
        }

        #calendarM tbody td.bg2:not([class^="ritem-tag-"]) {
            background-color: gray;
        }

    #calendarM tr:not(:last-child) {
        border-bottom: solid 1px lightgray;
    }

    #calendarM th:not(:last-child),
    #calendarM td:not(:last-child) {
        border-right: solid 1px lightgray;
    }

    #calendarM td {
        padding: 0 0.2rem 0.2rem 0.2rem;
        /*height: 6rem;*/
        vertical-align: top;
    }

        #calendarM td div {
            padding: 0rem 0.2rem;
            white-space: nowrap;
            overflow: hidden;
            border-radius: 1px;
        }

            #calendarM td div[class^="ritem-tag-"] {
                border: solid 1px lightgray;
                border-radius: 2px;
            }

    #calendarM .t2c-rows4 tr td {
        height: calc(20rem / 4);
    }

    #calendarM .t2c-rows5 tr td {
        height: calc(20rem / 5);
    }

    #calendarM .t2c-rows6 tr td {
        height: calc(20rem / 6);
    }

/*#calendarW {
    border-radius: .25rem;
}

    #calendarW table {
        background-color: white;
    }

        #calendarW table .bg2 {
            background-color: gray;
        }

        #calendarW table thead th:not(.t2c-today) {
            background-color: white;
            padding: 0;
        }

        #calendarW table thead th {
            border-right: solid 1px lightgray;
        }

        #calendarW table thead th div {
            height: 1.8rem;
        }

        #calendarW table thead tr:nth-of-type(1) th:nth-of-type(1) div {
            height: calc(3.6rem + 4px);
        }

        #calendarW table thead tr:nth-of-type(1) div {
            padding-left: 0.3rem;
        }

        #calendarW table thead tr:nth-of-type(2) {
            border-top: solid 1px lightgray;
            border-bottom: solid 1px lightgray;
        }

        #calendarW table tbody th,
        #calendarW table tbody td {
            padding: 0px;
            border-right: solid 1px lightgray;
        }
        #calendarW table tbody tr:not(:first-child) {
            border-top: solid 1px lightgray;
        }

        #calendarW table thead th div {
            left: 0.2rem;
        }

        #calendarW table tbody th div {
            padding-right: 0.2rem;
        }

        #calendarW table tbody th > div:nth-of-type(1),
        #calendarW table tbody td > div:nth-of-type(1) {
            height: 8px;
        }

        #calendarW table tbody tr:last-child {
            border-bottom: solid 1px lightgray;
        }
        #calendarW table tbody tr:nth-child(4n+5) th,
        #calendarW table tbody tr:nth-child(4n+5) td {
            border-top: solid 1px darkgray;
        }

        #calendarW table tbody th[rowspan="4"] > div:nth-of-type(1) {
            height: 32px;
        }

        #calendarW table tbody:not(.small) th > div:nth-of-type(1),
        #calendarW table tbody:not(.small) td > div:nth-of-type(1) {
            height: 2rem;
        }

        #calendarW table td > div:nth-of-type(1) {
            width: 100%;
        }

        #calendarW table tbody td.bg > div:nth-of-type(1) {
            background-color: #0003;
        }

        #calendarW table tbody td:not([class^="ritem-tag-"]) {
            background-color: #f9f9f9;
        }

        #calendarW table tr:nth-of-type(1) {
            border-top-color: #dee2e6;
        }

        #calendarW table thead tr:nth-of-type(2) th {
            padding: 2px;
        }

        #calendarW table thead tr:nth-of-type(2) div {
            border: solid 1px lightgray;
            border-radius: 2px;
        }

        #calendarW table th, #calendarW td {
            text-align: center;
            vertical-align: middle;
            min-width: 4rem;
        }

            #calendarW table th.c1, #calendarW td.c1 {
                min-width: 8rem;
                max-width: 8rem;
            }

        #calendarW table thead tr:nth-of-type(1) th {
            text-align: left;
        }

            #calendarW table thead tr:nth-of-type(1) th:nth-of-type(1) {
                min-width: 3rem;
                max-width: 3rem;
            }

        #calendarW table tbody th {
            min-width: 3rem;
            max-width: 3rem;
            text-align: right;
            vertical-align: top;
        }*/
#calendarW {
    border-radius: .25rem;
}

    #calendarW table {
        background-color: white;
    }

        #calendarW table .bg2 {
            background-color: gray;
        }

        #calendarW table thead th:not(.t2c-today) {
            background-color: white;
            padding: 0;
        }

        #calendarW table thead th {
            padding:0;
        }
            #calendarW table thead th > div {
                border-right: solid 1px lightgray;
            }
        #calendarW table thead th div div {
            height: 1.8rem;
        }

        #calendarW table thead tr:nth-of-type(1) th:nth-of-type(1) div {
            height: calc(3.6rem + 2px);
        }

        #calendarW table thead tr:nth-of-type(1) div {
            padding-left: 0.3rem;
        }

        #calendarW table thead tr:nth-of-type(2) {
            /*border-top: solid 1px lightgray;*/
            /*border-bottom: solid 1px lightgray;*/
        }
        #calendarW table thead tr div {
            /*border-bottom: solid 1px lightgray;*/
        }
        #calendarW table thead tr:nth-of-type(1) th:nth-of-type(1) div {
            border-bottom: solid 1px lightgray;
        }
        #calendarW table thead tr:nth-of-type(2) th > div {
            border-top: solid 1px lightgray;
            border-bottom: solid 1px lightgray;
        }

        #calendarW table tbody th,
        #calendarW table tbody td {
            padding: 0px;
        }
            #calendarW table tbody th > div,
            #calendarW table tbody td > div {
                padding: 0px;
                border-right: solid 1px lightgray;
            }
        #calendarW table tbody tr:not(:first-child) th > div,
        #calendarW table tbody tr:not(:first-child) td > div {
            border-top: solid 1px lightgray;
        }

        #calendarW table thead th div {
            left: 0.2rem;
        }

        #calendarW table tbody th div {
            padding-right: 0.2rem;
        }

        #calendarW table tbody th > div:nth-of-type(1),
        #calendarW table tbody td > div:nth-of-type(1) {
            height: 8px;
        }

        #calendarW table tbody tr:last-child {
            border-bottom: solid 1px lightgray;
        }
        #calendarW table tbody tr:nth-child(4n+5) th > div,
        #calendarW table tbody tr:nth-child(4n+5) td > div {
            border-top: solid 1px darkgray;
        }

        #calendarW table tbody th[rowspan="4"] > div:nth-of-type(1) {
            height: 32px;
        }

        #calendarW table tbody:not(.small) th > div:nth-of-type(1),
        #calendarW table tbody:not(.small) td > div:nth-of-type(1) {
            height: 2rem;
        }

        #calendarW table td > div:nth-of-type(1) {
            width: 100%;
        }

        #calendarW table tbody td.bg > div:nth-of-type(1) {
            background-color: #0003;
        }

        #calendarW table tbody td:not([class^="ritem-tag-"]) {
            background-color: #f9f9f9;
        }

        #calendarW table tr:nth-of-type(1) {
            border-top-color: #dee2e6;
        }

        #calendarW table thead tr:nth-of-type(2) div {
            padding: 2px;
        }

            #calendarW table thead tr:nth-of-type(2) div div[class^="ritem-tag-"] {
                border: solid 1px lightgray;
                border-radius: 2px;
            }

        #calendarW table th, #calendarW td {
            text-align: center;
            vertical-align: middle;
            min-width: 4.2rem;
        }

            #calendarW table th.c1, #calendarW td.c1 {
                min-width: 8rem;
                max-width: 8rem;
            }

        #calendarW table thead tr:nth-of-type(1) th {
            text-align: left;
        }

            #calendarW table thead tr:nth-of-type(1) th:nth-of-type(1) {
                min-width: 3rem;
                max-width: 3rem;
            }

        #calendarW table tbody th {
            min-width: 3rem;
            max-width: 3rem;
            text-align: right;
            vertical-align: top;
        }

.t2ui-droptime button {
    min-width: 2.7em;
    text-align: right;
}

.t2ui-droptime table td {
    text-align: right;
}

.t2ui-droptime [data-type="minute"] .dropdown-menu {
    min-width: 5em;
    max-width: 5em;
}

.t2ui-droptime table td a.disabled {
    background-color: lightgray;
}

.t2ui-calendar-item {
    position: relative;
}

    .t2ui-calendar-item div {
        position: absolute;
        border: solid 1px gray;
        border-radius: 2px;
        background-color: white;
    }

    .t2ui-calendar-item[data-uid="-1"] > div {
        background-color: lightgray;
    }

td.bg .t2ui-calendar-item div {
    background-color: silver;
}






/*@keyframes blink {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
.t2-blink {
  animation: blink 1s ease-in-out infinite alternate;
}*/

/* loading */
#test-container {
    /*display: none;*/
    position: fixed;
    /*position: relative;*/
    /*top: calc(100% - 50px);*/
    /*left: calc(100% - 50px);*/
    width: 100vh;
    height: 100vh;
    z-index: 10000;
    background: rgba(0,0,0,0.02);
}

/**  t2c-body-bg **/
.t2c-body-bg {
    background-color: #edf2f9;
}

    .t2c-body-bg .btn-outline-secondary {
        border-color: silver;
    }

        .t2c-body-bg .btn-outline-secondary:not(:hover) {
            background-color: white;
        }

        .t2c-body-bg .btn-outline-secondary.dropdown-toggle.show,
        .t2c-body-bg .btn-outline-secondary.active {
            background-color: #6c757d;
        }

    .t2c-body-bg .modal-content {
        background-color: #f9fafd;
    }

.t2c-rotate90 {
    transform: rotate(90deg);
}

.t2c-today {
    background-color: #fcf8e3;
}

.t2c-sun {
    color: red;
}

.t2c-sat {
    color: blue;
}

.t2b-top-20 {
    top: 20% !important;
}

.t2b-start-80 {
    left: 80% !important;
}