/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

body {
    overscroll-behavior-x: none;
  /*  height: 100%;
    background: #dcd9ce;*/
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}
.content-wrapper {
    background-color: #ffffff !important;
    min-height: calc(100vh - 375px)!important;
}
    .content-wrapper .content {
        min-height: calc(100vh - 442px) !important;
    }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}
.btn-success {
    color: #ffffff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-link {
    color: #17a2b8;
}
.btn-outline-info {
    color: #17a2b8;
    background-color: #fff;
    border-color: #17a2b8;
}
    .btn-outline-info:hover {
        color: #fff;
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 18px;
}
@media only screen and (min-width: 768px) {
    html {
        font-size: 20px;
    }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

/*body {
  /* Margin bottom by footer height 
  margin-bottom: 60px;
}*/
.footer {
    width: 100%;
    background-color: #333333;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 15px;
    padding-top: 15px;
    color: #e5e5e5;
    line-height: 2;
}

/*DataTable Css*/
.dataTables_scrollHeadInner{
    width: 100%!important;
}
    .dataTables_scrollHeadInner .table {
        width: 100% !important;
    }
.dataTables_scrollBody .table {
    width: 100% !important;
}
.dataTable .table-icon{
    min-width: 1.5rem;
}

.nav-link{
    cursor: pointer;
}

.configure{
    position: relative;
}
    .configure .configure-menu{
        right: 0;
    }


.Remark {
    display: flex;
    flex-direction: column;
    color: #acadae;
}
.important-remark{
    color: red;
}
.important-remark:before{
    content: '*';
    padding-left: 5px;
    height: 100%;
    vertical-align: middle;
}
.required{
    position: relative;
}
.required:before {
    font-size: 1.2rem;
    content: '*';
    color: red;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -15px;
}
/* 2022-07-25 By Chike: 新功能 30 上傳附件 按鈕旁都上警語，限制上傳檔案10MB -- Start -- */ 
.filealt {
    color: red;
    font-size: 0.6rem;
}
/* 2022-07-25 By Chike: 新功能 30 上傳附件 按鈕旁都上警語，限制上傳檔案10MB -- End -- */

/* 2022-08-09 By Chike: 連結移過去應該要有手指頭 -- Start -- */
.noticeSignDateLink{
    cursor: pointer;
}
/* 2022-08-09 By Chike: 連結移過去應該要有手指頭 -- End -- */


/* 2022-08-15 By Chike: 0718-6 聯絡簿 國中小聯絡簿UI設計 -- Start -- */
.bg-primay-light {
    margin-right: 0 !important;
    margin-left: 0 !important;
    background-color: rgba(0, 0, 0, 0.03);
}
/* 2022-08-15 By Chike: 0718-6 聯絡簿 國中小聯絡簿UI設計 -- End -- */

/* 2022-08-15 By Chike: 0718-6 聯絡簿，增加今日表現 -- Start -- */
.bg-pink {
    background-color: #df83f5 !important;
}

/* 今日表現-編輯 -- Start -- */
#behaviorArea {
    overflow: auto;
    width: 100%;
    min-height: 200px;
}
.behaviorTable {
    table-layout: fixed;
    width: 100%;
    /*height: 80vh;*/
}
    .behaviorTable td:first-child, .behaviorTable th:first-child {
        position: sticky;
        left: 0; /* 首行永遠固定於左 */
        z-index: 1;
    }

    .behaviorTable thead tr th {
        position: sticky;
        top: 0; /* 列首永遠固定於上 */
        background-color: #a6e5fc;
        color: #000000;
    }
        .behaviorTable thead tr th:hover {
            background-color: #86d3f0 !important;
            color: #000000;
        }

    .behaviorTable th:first-child {
        z-index: 2;
        background-color: lightblue;
    }

    .behaviorTable, .behaviorTable > th, .behaviorTable > td {
        border: none;
        border-collapse: collapse !important;
    }

        .behaviorTable .studentName {
            background-color: #a6e5fc;
            color: #000000;
        }
        .behaviorTable .studentName:hover {
            background-color: #86d3f0 !important;
            color: #000000;
        }
        .behaviorTable > tbody > tr > th {
            background-color: #a6e5fc;
            color: #000000;
        }

        .behaviorTable > tbody > tr:hover th {
            background-color: #86d3f0 !important;
            color: #000000;
        }

        .behaviorTable > tbody > tr > td, .behaviorTable > tbody > tr > th {
            text-align: center !important;
            vertical-align: middle !important;
        }

        .behaviorTable tr {
            border-style: solid;
            border-color: inherit;
            border-width: 0;
        }

        .behaviorTable input[type="checkbox"] {
            margin-right: 2px !important;
        }

        .behaviorTable label {
            margin-bottom: 0px !important;
        }

        .behaviorTable .behaviorTypeHeaderLabel_1{
            display: inline-block;
        }
        .behaviorTable .behaviorTypeHeaderLabel_2 {
            display: none;
        }
@media only screen and (max-width: 991.99px) {
    .behaviorTable .studentName {
        padding-left: 0.3rem;
        white-space: nowrap;
    }

    .behaviorTable .behaviorTypeAll {
        display: block;
        margin-left: 38%;
    }

    .behaviorTable .behaviorTypeHeaderLabel_1 {
        display: none;
    }

    .behaviorTable .behaviorTypeHeaderLabel_2 {
        display: inline-block;
        white-space: nowrap;
    }
}
/* 今日表現-編輯 -- End -- */

/* 今日表現-檢視 -- Start -- */
.BehaviorDiv {
}

    .BehaviorDiv .behaviorItem {
        border: 1px solid #dee2e6;
        text-align: center !important;
        vertical-align: middle !important;
    }

        .BehaviorDiv .behaviorItem:hover {
            background-color: rgba(0,0,0,.075) !important;
        }

        .BehaviorDiv .behaviorItem input[type="checkbox"] {
            margin-right: 2px !important;
        }

        .BehaviorDiv .behaviorItem label {
            margin-bottom: 0px !important;
        }

    .BehaviorDiv .Select {
        border: 1px solid #db95ed !important;
        background-color: #e5b2f2 !important;
        color: #050505;
    }

        .BehaviorDiv .Select:hover {
            background-color: #d395e2 !important;
            color: #291818;
        }
/* 今日表現-檢視 -- End -- */

/* 2022-08-15 By Chike: 0718-6 聯絡簿，增加今日表現 -- End -- */

/* 2022-08-15 By Chike: 班費繳費紀錄格式調整 -- Start -- */
.ClassFeeBillStudent {
}
    .ClassFeeBillStudent .studentHeader {
        background-color: #a6e5fc;
        color: #000000;
        font-weight: bold;
    }
        .ClassFeeBillStudent .studentHeader .first {
            background-color: lightblue;
        }
        .ClassFeeBillStudent .studentHeader div {
            border: 1px solid #dee2e6;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    .ClassFeeBillStudent .studentName {
        background-color: #a6e5fc;
        color: #000000;
        font-weight: bold;
    }
    .ClassFeeBillStudent .student div {
        border: 1px solid #dee2e6;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ClassFeeBillStudent .student label{
        display:inline;
        margin: 0.25rem 0px 0.25rem 0.25rem;
    }
        .ClassFeeBillStudent .student:hover {
            background-color: rgba(0,0,0,.075) !important;
        }
    .ClassFeeBillStudent .student .number {
        width: 90%;
        text-align: center;
        font-weight: bold;
    }

    .ClassFeeBillStudent .student .reason {
        width: 90%;
    }
    .ClassFeeBillStudent .student .nowPoint{
        color: red;
        font-size: 1.5rem;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
        margin-bottom: 0.5rem;
    }
    /* 2022-08-15 By Chike: 班費繳費紀錄格式調整 -- End -- */
    /* 2022-08-18 By Chike: 新功能 89 聯絡簿 學習任務的考試時間太長，發布任務改以第幾節來呈現。 -- Start -- */
    .eventTiemArea {
        margin-right: 0px;
        margin-left: 0px;
    }
.event-remark {
    font-size: 0.75rem;
    color: #827b7b;
}
.modal {
    overflow-y: auto;
}
/* 2022-08-18 By Chike: 新功能 89 聯絡簿 學習任務的考試時間太長，發布任務改以第幾節來呈現。 -- End -- */
.bg-primary {
    background-color: #45AEF1 !important;
    color: #ffffff;
}

.bg-secondary {
    background-color: #e4e6ef !important;
    color: #172b4c;
}

.bg-success {
    background-color: #26C6DA !important;
    color: #ffffff;
}

.bg-info {
    background-color: #7460EE !important;
    color: #ffffff;
}

.bg-warning {
    background-color: #FFB22B !important;
    color: #ffffff;
}

.bg-danger {
    background-color: #E03656 !important;
    color: #ffffff;
}



/*.bg-primary-light {
    background-color: #eff7ff !important;
    color: #006C9B !important;
}
.bg-secondary-light {
    background-color: #e9edf2 !important;
    color: #727787 !important;
}
.bg-success-light {
    background-color: #e0fdfb !important;
    color: #33A0AF !important;
}
.bg-info-light {
    background-color: #f7f3ff !important;
    color: #634FA1 !important;
}
.bg-warning-light {
    background-color: #fff8ea !important;
    color: #D6A419 !important;
}
.bg-danger-light {
    background-color: #fff2f3 !important;
    color: #6F2D3A !important;
}*/

.freezeParent{
    position:relative;
}

.freezeTab {
    top: 0px;
    left: 0px;
    position: fixed;
    background-color: #fff;
    z-index: 99;
    margin-top: 0;
    min-width: 100%;
    /*width: 1172px;*/
    opacity: 0.94;
    align-items: center;
    /*border: 1px solid red;*/
}
@media only screen and (max-width: 576px) {
    .tabbutton {
        padding-right: 0px;
        padding-left: 0px;
    }
}
/* 2022-09-23 By Chike: 新功能 112 聯絡簿 聯絡簿內容 沒有依照訊息長度調整欄位高度 -- Start -- */
select.form-control {
    padding: 0.375rem 0rem 0.375rem 0.375rem;
    font-size: 1.2rem;
}
div.form-control {
    height: auto;
    min-height: 38px;
}
textarea.form-control {
    display: block;
    overflow: hidden;
    resize: none;
}
/* 2022-09-23 By Chike: 新功能 112 聯絡簿 聯絡簿內容 沒有依照訊息長度調整欄位高度 -- End -- */


/* 2022-12-13 By Chike: 新功能 148	所有的日期	點擊後會出現鍵盤，要直接選日期不要鍵盤(手機板) -- Start -- */
.datepicker:read-only {
    background-color: #ffffff !important;
}
/* 2022-12-13 By Chike: 新功能 148	所有的日期	點擊後會出現鍵盤，要直接選日期不要鍵盤(手機板) -- End -- */




/* 舊版達學堂Modal樣式 -- Start -- */
hr {
    margin-top: 0px;
    margin-bottom: 0px;
    border: 0;
    border-top: 1px solid #d4d4d4;
}
#divLogin {
    font-family: "Microsoft JhengHei";
    letter-spacing: 3px;
}
.no-background{
    background: unset !important;
}

#loginArea * {
    font-size: 16px;
    line-height: normal;
}

#loginArea .thirdLoginBtn {
    background-color: #fff;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    cursor: pointer;
    margin: 20px 0px;
}

#loginArea .accountLoginBtn {
    background-color: #fff;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    margin: 20px 0px;
}

    #loginArea .accountLoginBtn .loginInputTextDiv {
        width: 60%;
        display: inline-block;
    }

        #loginArea .accountLoginBtn .loginInputTextDiv input {
            margin: 10px 0px;
            padding: 10px 5px;
        }

    #loginArea .accountLoginBtn .loginBtnDiv {
        width: 30%;
        display: inline-block;
    }

        #loginArea .accountLoginBtn .loginBtnDiv .loginBtn {
            border-radius: 5px;
            background-color: #f54b5e;
            border: 0px solid;
            color: #fff;
            padding: 2px 30px;
        }
    #loginArea .thirdLoginBtn .bigTitleStyle, #loginArea .accountLoginBtn .bigTitleStyle {
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #1a2448;
    }

    #loginArea .thirdLoginBtn .smallTitleStyle, #loginArea .accountLoginBtn .smallTitleStyle {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
        color: rgba(0, 0, 0, 0.54);
    }

@media only screen and (min-width: 583px) {
    #divLogin {
        width: 512px;
    }

    /* 2023-01-08 By Chike: 這個CSS會讓Modal的位置往下掉 -- Start -- */
    /* .modal:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }*/
    /* 2023-01-08 By Chike:這個CSS會讓Modal的位置往下掉 -- End -- */
}


/*.modal {
    text-align: center;
}


.modal-dialog {
    display: inline-block;
}
*/

#divLogin hr {
    display: block;
    unicode-bidi: isolate;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

#divLogin .btn_delete {
    float: right;
    width: 20px;
    height: 20px;
    background: url(../images/icon_delete.png) no-repeat;
    border: 0;
    cursor: pointer;
}

    #divLogin .btn_delete:hover {
        background: url(../images/icon_delete_on.png) no-repeat;
    }

#divLogin #loginId {
    width: 100%;
}

#divLogin #userpsw {
    width: 100%;
}
/*
/* 舊版達學堂Modal樣式 -- End -- */

/* Nestable 槽狀排序元件 -- Start -- */
/* ---------------------------------------------------------------------- */
/*	Nestable List
/* ---------------------------------------------------------------------- */
.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 20px;
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .dd-list .dd-list {
        padding-left: 36px;
    }

.dd-collapsed .dd-list {
    display: none;
}

.dd-item, .dd-empty, .dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 32px;
    font-size: 1.2rem;
    line-height: 32px;
}

.dd-handle {
    display: block;
    /*height: 33px;*/
    min-height: 33px;
    margin: 5px 0;
    padding: 5px 10px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ccc;
    background: #fafafa;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhZmFmYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #eeeeee));
    background: -moz-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
    background: -webkit-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
    background: linear-gradient(to bottom, #fafafa 0%, #eeeeee 100%);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .dd-handle:hover {
        color: #2ea8e5;
        background: #ffffff;
    }

.dd-handle-button {
    position: absolute;
    right: 16px;
    top: 6px;
}

    .dd-handle-button > a {
        color: #666666;
        text-decoration: none;
        cursor: pointer;
    }

        .dd-handle-button > a:hover {
            color: #0480BE;
        }

.dd-item > button {
    display: block;
    position: relative;
    cursor: pointer;
    float: left;
    width: 25px;
    height: 20px;
    margin: 5px 0;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    font-weight: bold;
}

    .dd-item > button:before {
        content: '+';
        display: block;
        position: absolute;
        width: 100%;
        text-align: center;
        text-indent: 0;
    }

    .dd-item > button[data-action="collapse"]:before {
        content: '-';
    }



.dd-placeholder, .dd-empty {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
    background: #f2fbff;
    border: 1px dashed #b6bcbf;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.dd-empty {
    border: 1px dashed #bbb;
    min-height: 100px;
    background-color: #e5e5e5;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -moz-linear-gradient(45deg, #ffffff 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #ffffff 75%, #ffffff), -moz-linear-gradient(45deg, #ffffff 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #ffffff 75%, #ffffff);
    background-image: -webkit-linear-gradient(45deg, #ffffff 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #ffffff 75%, #ffffff), -webkit-linear-gradient(45deg, #ffffff 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #ffffff 75%, #ffffff);
    background-image: linear-gradient(45deg, #ffffff 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #ffffff 75%, #ffffff), linear-gradient(45deg, #ffffff 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #ffffff 75%, #ffffff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.dd-dragel {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

    .dd-dragel > .dd-item .dd-handle {
        margin-top: 0;
    }

    .dd-dragel .dd-handle {
        -moz-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
    }

/** Nestable Extras **/
.nestable-lists {
    display: block;
    clear: both;
    padding: 30px 0;
    width: 100%;
    border: 0;
    border-top: 2px solid #DDDDDD;
    border-bottom: 2px solid #DDDDDD;
}

#nestable-menu {
    padding: 0;
    margin: 20px 0;
}

#nestable-output, #nestable2-output, #jsondata {
    width: 100%;
    height: 7em;
    font-size: 13px;
    line-height: 1.333333em;
    padding: 5px;
    margin-bottom: 5px;
}

#nestable2 .dd-handle {
    color: #ffffff;
    border: 1px solid #999;
    background: #bbb;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk5OTk5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bbbbbb), color-stop(100%, #999999));
    background: -moz-linear-gradient(top, #bbbbbb 0%, #999999 100%);
    background: -webkit-linear-gradient(top, #bbbbbb 0%, #999999 100%);
    background: linear-gradient(to bottom, #bbbbbb 0%, #999999 100%);
}

    #nestable2 .dd-handle:hover {
        background: #bbb;
    }

#nestable2 .dd-item > button:before {
    color: #ffffff;
}

.dd-hover > .dd-handle {
    background: #2ea8e5 !important;
}

/** Nestable Draggable Handles **/
.dd3-content{
    vertical-align: middle;
    padding: 8px 100px 8px 76px !important;
}
    .dd3-content > .title {
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0;
    }

    .dd3-content > .desc {
        margin-left: 10px;
        color: #888888;
        font-size: 1rem;
        font-weight: 100;
        letter-spacing: 0;
    }

.dd-dragel > .dd3-item > .dd3-content {
    margin: 0;
}

/* .dd3-item > button { */
/* margin-left: 30px; } */
.dd3-item > .dd-collapse {
    margin-left: calc(36px + 0.5rem);
}

.dd3-item > .dd-expand {
    /*margin-left: 0.1rem;*/
    /*    margin-left: 0.5rem;*/
}
.dd-list button{
    width: 32px !important;
    height: 32px !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
}

.dd-list .dd3-handle{
    
        background: #264272 !important;
}
.dd-list .dd3-handle:hover{
    
        background: #5B72A6 !important;
}
.dd3-handle {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    cursor: pointer;
    height: 50px !important;
    width: 40px !important;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #aaa;
    /*background: #DDDDDD;*/
        background: #264272;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background: -moz-linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
    background: linear-gradient(to bottom, #dddddd 0%, #bbbbbb 100%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

    .dd3-handle:before {
        content: '\f0c9';
        display: block;
        font-family: FontAwesome;
        position: absolute;
        left: 0;
        top: 3px;
        width: 100%;
        text-align: center;
        text-indent: 0;
        color: #ffffff;
        background: #264272;
        font-size: 0.8rem;
        font-weight: normal;
    }

    .dd3-handle:hover {
        background: #5B72A6 !important;
        color: #ffffff !important;
    }
    .dd3-handle:hover::before{
        background: #5B72A6 !important;
        color: #ffffff !important;
    }

.dd3-handle-button {
    position: absolute;
    right: 16px;
    top: 6px;
}

    .dd3-handle-button > a {
        color: #666666;
        text-decoration: none;
        cursor: pointer;
    }

        .dd3-handle-button > a:hover {
            color: #0480BE;
        }

.MapTips {
    text-align: center;
    margin-bottom: 0.5rem !important;
    background-color: #e2e2e2 !important;
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 20px;
}
.NoData {
    text-align: center;
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
    background-color: #fff2f3 !important;
    color: #E03656;
    font-size: 1.5rem;
    line-height: 32px;
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid #E03656;
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content:center;
    gap: 0.5rem;
}
    .NoData .btn {
        color: #ffffff !important;
        font-size: 1.5rem;
    }
/* Nestable 槽狀排序元件 -- End -- */


.align-center{
    text-align: center;
}

/* 頁面功能區塊-左側篩選、右側功能 -- Start -- */
.FunctionArea{
    display: flex;
    display: -webkit-flex;
    gap: 4rem;
}
    .FunctionArea .FunctionSearchArea {
        flex-grow: 1;
        /*float: left;*/
        /*width: 60%;*/
        /*border: 1px solid red;*/ /*測試用*/
        /*text-align: left;*/

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 2px;
        /*flex: 1;*/
    }
        .FunctionArea .FunctionSearchArea .Title {
            font-size: 32px;
            font-weight: 700;
            color: #0e0808;
            margin-bottom: 1rem;
        }
        .FunctionArea .FunctionSearchArea select {
            max-width: 150px;
        }
        .FunctionArea .FunctionSearchArea .FunctionSearchInput {
            display: flex;
            flex-wrap: nowrap;
            max-width: 300px;
        }
   .FunctionArea .FunctionBtnArea {
        /*flex: 1;*/
        /*width: 40%;*/
        /*border: 1px solid green;*/ /*測試用*/

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: flex-end;
        gap: 2px;
        /*text-align: right;*/
        /*float: right;*/
        /*margin-right: 0%;*/
        /*align-self: center;*/
    }
@media only screen and (max-width: 1600px) {
  /*  .FunctionArea .FunctionSearchArea .FunctionSearchInput {
        width: 30% !important;
    }*/


}
@media only screen and (max-width: 1200px) {
    .FunctionArea {
        display: block;
        /*display: -webkit-box;*/
    }

        .FunctionArea .FunctionSearchArea {
            display: flex;
            text-align: center;
            width: 100%;
            align-self: center;
            justify-content: center;
        }

            .FunctionArea .FunctionSearchArea select {
                /*width: 24% !important;*/
                /*margin-top: 0.25rem;*/
            }
            .FunctionArea .FunctionSearchArea .input-group-prepend {
                /*margin-top: 0.25rem;*/
            }

            .FunctionArea .FunctionSearchArea .FunctionSearchInput {
                padding: 0 !important;
                margin-top: 0.25rem;
                width: 100% !important;
            }

        .FunctionArea .FunctionBtnArea {
            display: inline-block;
            text-align: center;
            width: 100%;
            margin-top: 1rem;
        }
}
    @media only screen and (max-width: 768px) {
        .FunctionArea {
            display: block;
            /*display: -webkit-box;*/
        }

            .FunctionArea .FunctionSearchArea {
                display: flex;
                flex-direction: column;
                text-align: center;
                width: 100%;
            }
                .FunctionArea .FunctionSearchArea .input-group-prepend {
                    margin-top: 0.25rem;
                }

                .FunctionArea .FunctionSearchArea select {
                    width: 100% !important;
                    max-width: unset;
                    margin-top: 0.25rem;
                }

                .FunctionArea .FunctionSearchArea .FunctionSearchInput {
                    padding: 0!important;
                    margin-top: 0.25rem;
                    width: 100% !important;
                }

            .FunctionArea .FunctionBtnArea {
                display: block;
                text-align: center;
                width: 100%;
                margin-top: 1rem;
            }
    }
    /* 頁面功能區塊-左側篩選、右側功能 -- End -- */


    /* Tab標籤樣式 -- Start -- */
    .nav-tabs .nav-link.active {
        border-bottom-color: #45AEF1;
        background-color: #45AEF1;
        color: #ffffff;
    }

    .nav-tabs .nav-link {
        /*border-bottom-color: #e9f6ff;*/
        background-color: #e9f6ff;
    }
    /*.tab-content > .tab-pane {
    border: 0px;
}*/
    /* Tab標籤樣式 -- End -- */

    /* 列表功能按鈕 -- Start -- */
    .dropdown-content-pc {
        display: inline;
    }
        .dropdown-content-pc a {
            margin-right: 0.5rem;
        }
            .dropdown-content-pc a:last-child {
                margin-right: 0;
            }

.dropdown-content-mobile {
    display: none;
}

.dropdown .dropdown-menu{
    /*margin-left: -23px;*/
}
.dropdown .dropdown-menu a{
    font-size: 1rem;
}
@media only screen and (max-width: 1200px) {
    .dropdown-content-pc {
        display: none;
    }

    .dropdown-content-mobile {
        display: block;
    }

        .dropdown-content-mobile .dropdown-menu.show {
            position: relative;
            position: fixed;
            z-index: 999;
        }

        .dropdown-content-mobile .dropdown-menu .dropdown-item {
            font-size: 16px;
            display: flex;
            align-items: center;
        }
        /*固定 <i> icon的寬度*/
        .dropdown-content-mobile .dropdown-menu .dropdown-item i {
            min-width: 32px;
        }
    button.btn.dropdown-toggle:after{
        /*margin-bottom: 4px;*/
    }
}

@media only screen and (max-width: 992px) {

}
    /* 列表功能按鈕 -- End -- */





/* 教師試卷管理主頁 knob 樣式 -- Start -- */
.examMainContent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

}
    .examMainContent .Link {
        width: 50px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .examMainContent .Link span {
        margin-top: 1rem;
        font-size: 20pt;
    }
/* 教師試卷管理主頁 knob 樣式 -- End -- */

/* 教師試卷管理主頁 - 我要組卷 -- Start -- */

.radioList_2_title_desc {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
    .radioList_2_title_desc button {
        flex: 1 1 auto;
        width: 48.4%;
        margin-bottom: 8px;
        min-height: 100px;
    }
        .radioList_2_title_desc button + button {
            margin-left: 8px;
        }       
        .radioList_2_title_desc button span.btn-title {
            font-size: 20px;
            display: block;
        }
        .radioList_2_title_desc button span.btn-desc {
            font-size: 10px;
            color: #bdc3c8;
            display: block;
        }

.radioList_2_height {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
    .radioList_2_height button {
        flex: 1 1 auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
        /*min-height: 60px;*/
        /*padding: 0px 0px 0px 0px;*/
        font-size: 1.2rem;
    }
    .radioList_2_height button+button {
        margin-left: 8px;
    }

.radioList_2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
    .radioList_2 button {
        flex: 1 1 auto;
    }
        .radioList_2 button + button {
            margin-left: 8px;
        }

.radioList_3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
    .radioList_3 button {
        flex: 1 1 auto;
        /*padding: 0px 0px 0px 0px;*/
        font-size: 1.2rem;
    }
        .radioList_3 button + button {
            margin-left: 8px;
        }

.radioList_3_title_desc {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

    .radioList_3_title_desc button {
        flex: 1 1 auto;
        width: 31%;
        margin-bottom: 8px;
        min-height: 100px;
    }

        .radioList_3_title_desc button + button {
            margin-left: 8px;
        }

        .radioList_3_title_desc button span.btn-title {
            font-size: 1.2rem;
            font-weight: bold;
            display: block;
        }

        .radioList_3_title_desc button span.btn-desc {
            font-size: 1rem;
            color: #727787;
        }
         
        .radioList_3_title_desc button.active span.btn-desc {
            color: #ffffff;
        } 
        .radioList_3_title_desc button:hover span.btn-desc {
            color: #ffffff;
        }

.radioList_multi {
    width: 100%;
    display: flex;
}
    .radioList_multi button {
        flex: 1 1 auto;
        width: 18.5%;
        margin-bottom: 8px;
        margin-right: 8px;
        /*padding: 0px 0px 0px 0px;*/
        font-size: 1.2rem;
    }

@media only screen and (max-width: 992px) {
    .radioList_2_title_desc button {
        width: 47%;
    }

    .radioList_2_height button {
        width: 47%;
    }

    .radioList_multi button {
        width: 31%;
    }
    .radioList_3_title_desc button {
        width: 31%;
    }

}

@media only screen and (max-width: 768px) {
    .radioList_2_title_desc button {
        width: 47%;
    }

    .radioList_2_height button {
        width: 47%;
    }

    .radioList_multi button {
        width: 47%;
    }
    .radioList_3_title_desc button {
        width: 31%;
    }
}
@media only screen and (max-width: 576px) {
    .radioList_multi button {
        width: 47%;
    }

    .radioList_2_title_desc button {
        width: 47%;
    }

    .radioList_2_height button {
        width: 47%;
    }

    .radioList_3_title_desc button {
        width: 100%;
        margin-bottom: 8px;
    }

        .radioList_3_title_desc button + button {
            margin-left: 0;
        }
}
@media only screen and (max-width: 390px) {
    .radioList_2_title_desc button {
        width: 100%;
    }

        .radioList_2_title_desc button + button {
            margin-left: 0;
        }

    .radioList_2_height button {
        width: 100%;
        margin-bottom: 8px;
    }

        .radioList_2_height button + button {
            margin-left: 0;
        }


    .radioList_2 button {
        width: 100%;
        margin-bottom: 8px;
    }

        .radioList_2 button + button {
            margin-left: 0;
        }

    .radioList_3 button {
        width: 100%;
        margin-bottom: 8px;
    }

        .radioList_3 button + button {
            margin-left: 0;
        }

    .radioList_3_title_desc button {
        width: 100%;
        margin-bottom: 8px;
    }
        .radioList_3_title_desc button + button {
            margin-left: 0;
        }
    .radioList_multi button {
        width: 100%;
    }
}

/* 教師試卷管理主頁 - 我要組卷 -- Start -- */

/*summernote toolbar 換行 -- Start -- */
.note-toolbar.card-header {
    display: unset !important;
}
/*summernote toolbar 換行 -- End -- */


/* width 寬度複寫 -- Start -- */
.w-10 {
    width: 10% !important;
}
.w-20 {
    width: 20% !important;
}
.w-25 {
    width: 25% !important;
}
.w-30 {
    width: 30% !important;
}
.w-40 {
    width: 40% !important;
}
.w-50 {
    width: 50% !important;
}
.w-60 {
    width: 60% !important;
}
.w-70 {
    width: 70% !important;
}
.w-75 {
    width: 75% !important;
}
.w-80 {
    width: 80% !important;
}
.w-90 {
    width: 90% !important;
}
.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}


.width-50 {
    width: 50px !important;
}


.width-100 {
    width: 100px !important;
}
/* width 寬度複寫 -- Start -- */

/* bootstrap treeview 頁面中的樣式 -- Start -- */
.treeView_Class {
}
    .treeView_Class .list-group {
    }

        .treeView_Class .list-group .list-group-item {
            padding: 0.25rem !important;
        }

/* bootstrap treeview 頁面中的樣式 -- End -- */

/* bootstrap treeview 篩選選單中的樣式 -- Start -- */
.treeView_Class_View {
    /*font-size: 14px;*/
}

    .treeView_Class_View .list-group {
    }

        .treeView_Class_View .list-group .list-group-item {
            display: flex;
            flex-direction: row;
            padding: 0.25rem !important;
            align-items: baseline;
            /*margin-right: 20px;*/
        }
        .treeView_Class_View .list-group .list-group-item .icon {
            margin-right: 8px;
        }
            .treeView_Class_View .list-group .list-group-item .badge {
                /*    position: absolute;
                right: -20px;*/
                background-color: #e0fdfb;
                border-radius: 15px;
                margin-left: auto;
            }
            .treeView_Class_View .list-group .list-group-item.node-selected .badge {
                /*    position: absolute;
                right: -20px;*/
                color: #172b4c;
                background-color: #e0fdfb;
                border-radius: 15px;
                margin-left: auto;
            }
      

/* bootstrap treeview 篩選選單中的樣式 -- End -- */

/* bootstrap treeview Modal中的卷軸樣式 -- Start -- */
.treeViewContent {
    height: calc(calc(100vh - 300px) );
    max-height: calc(calc(100vh - 300px) );
    overflow-y: auto;
}

    .treeViewContent::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }

    .treeViewContent::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
    }

    .treeViewContent::-webkit-scrollbar-thumb {
        background-color: #acadae;
        border-radius: 20px;
    }

/* bootstrap treeview Modal中的卷軸樣式 -- End -- */


.tooltip-inner {
    background: #fafafa !important;
    /*//修改背景色 text-align: left !important;
    //字型左對齊 color:#363636 !important;
    //字型顏色 border:1px solid #dedede;
    //新增boder max-width: 400px !important;
    //修改寬度*/
}

.tooltip-arrow {
    border-bottom-color: #ffffff !important;
   /* //修改三角形的顏色 opacity: 0;
    //三角形透明*/
}

.tooltip {
    opacity: 1 !important;
    /*//讓整個tooltip不透明*/
}


.modal-header .close{
    color: #ffffff;
}

.hidden{
    /*display: none;*/
    display: flex; /* TODO: 上線要改成display:none */
    flex-direction: column;
}

/* 題型順序調整 customBox -- Start -- */
.customBox {
    position: relative;
    margin-bottom: 1.5rem;
    width: 100%;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 0px;
    -webkit-transition: .5s;
    transition: .5s;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 5%);
    box-shadow: 0 0 5px rgb(0 0 0 / 5%);
}
    .customBox .box-title {
        padding: 1.5rem;
        color: #172b4c;
        display: block;
        position: relative;
        border-bottom: 1px solid #26C6DA;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .customBox .QuestViewContent {
        margin-top: 0;
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
/* 題型順序調整 customBox -- End -- */


/* 互動搜尋主頁樣式 -- Start -- */
.examMainContent_full {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.examMainContent_mini {
    display: flex;
    flex-direction: column;
    width: 75%;
    height: 100%;
    margin: auto;
}
/* 互動搜尋主頁樣式 -- End -- */

/* 新增題目 新增選項/刪除選項 區域 -- Start --*/
.OptionControlButton{
    display: flex;
    gap: 2px;
}
.OptionControlButton button {
    flex-grow: 1;
}
/* 新增題目 新增選項/刪除選項 區域 -- End --*/


/* 我的測驗-測驗狀態 -- Start -- */
/*已派卷*/
.Dispatched{
    color: green;
}
/*測驗中*/
.InTest {
    color: red;
}
/*測驗完成*/
.QuizComplete {
    color: blue;
}
/*閱卷完成*/
.ScoringCompleted {
    color: black;
}
/*可閱卷*/
.HaveToScoring {
    color: red;
    background: yellow;
}
/* 我的測驗-測驗狀態 -- End -- */


/* 地圖資訊 -- Start -- */
.MapSummary{
    text-align: center;
    font-size: 18pt;
    
}
    .MapSummary .UnitCount {
        font-size: 20pt;
        color: red;
    }
/* 地圖資訊 -- End -- */

/* Modal內的試卷邀請碼 -- Start -- */
.PinCodeTitle{
    font-size: 1.2rem;
}
.PinCodeBox {
    display: block;
    float: none;
    position: relative;
    width: 100%;
    margin-right: 0px;
    border-radius: 20px;
    height: 46px;
    padding: 0px 0px;
    background-color: #fff;
    cursor: pointer;
    border: 1px #f54b5e solid;
}
    .PinCodeBox input[type="text"] {
        font-size: 14px;
        height: 30px;
        text-align: center;
        background: #fff;
        width: calc(100% - 44px - 2rem);
        border: none;
        color: #000;
        margin: 0px 1rem;
        outline: unset;
    }
    .PinCodeBox .search_box_query_btn {
        background: #f54b5e;
        color: #ffffff;
        height: 44px;
        float: right;
        border: 0;
        width: 44px;
        margin-right: 0%;
        border-radius: 22px;
    }
/* Modal內的試卷邀請碼 -- End -- */

/* 調整派卷的我的試卷下拉，和下方的select2對齊 -- Start -- */
.paperOwnerType{
    padding-left: 16px !important;
}
/* 調整派卷的我的試卷下拉，和下方的select2對齊 -- End -- */

/* 調整box-control的大小 -- Start -- */
.box-controls{
}
.box-controls li > a {
    font-size: 1.2rem;
    color: #264272;
}
.ti-more-alt:before{
    color: #264272;

}
/* 調整box-control的大小 -- End -- */

.b-result{
    color: red;
    font-weight: 700;
    margin-top: 0.5rem;
    display: block;
    width: 100%;
    text-align:center;
}

.progress-radius-25{
    border-radius: 25px !important;
}
.progress-height-30{
    min-height: 30px;
    height: auto;
}

/*.progress{
    margin-bottom: 0px;
    height: auto;
    position: relative;
}
.progress-bar{
    position: absolute;
    z-index: 10;
}
.progress-placeholder{
    float: left;
    width: 100%;
    text-align: center;
    visibility: hidden;
}
.progress-text {
    position: absolute;
    z-index: 20;
    width: 100%;
    text-align: center;
}*/



.progress{
    border-radius: 25px !important;
    background-color: #ffffff;
    border-top: 1px solid #f9f8f8;
    border-bottom: 1px solid #999;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.progress-bar{
    border-radius: 25px !important;
    height: 6px;
    margin-top: 24px;
}
.progress-bar-danger{
    background-color: #FD3C3D  !important;
}

.Progress-Content{
    float: left;
    display: flex;
    z-index:10;
    width: 100%;
    align-items: center;
    font-size: 1rem;
}
.Progress-Content .Left{
    /*background-color: #cd9af5;*/
    color: #000000;
    flex: 1;
    padding-left: 0.4rem;
}
.Progress-Content .Center{
    /*background-color: #f5a1a1;*/
    width: 4rem !important;
    text-align: center;
}
.Progress-Content .Right{
    /*background-color: #77f3ec;*/
    width: 4rem !important;
    text-align: center;

}

@media only screen and (max-width: 576px) {

    .Progress-Content .Center { display: none; }
    .Progress-Content .Right { display: none; }
}

/* 修改書籤LOGO */
.bookmark-star {
    background: url(images/bookmark-star.png) top left no-repeat;
    background-position: 8px 3px;
    background-size: 24px;
    border-style: none;
    font-size: 15px;
    padding: 4px 20px 5px 20px;
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    height: 32px;
}
.bookmark-star:hover {
    background: url(images/bookmark-star-active.png) top left no-repeat;
    background-position: 8px 3px;
    background-size: 24px;
    border-style: none;
    font-size: 15px;
    padding: 4px 20px 5px 20px;
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    height: 32px;
}
.bookmark-star-active {
    background: url(images/bookmark-star-active.png) top left no-repeat;
    background-position: 8px 3px;
    background-size: 24px;
    border-style: none;
    font-size: 15px;
    padding: 4px 20px 5px 20px;
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    height: 32px;
}
/* 修改書籤LOGO */

.fullwidth{
    width: 100%;
}