/* font */
body {
    font-size: 1.25rem;
}

h1, .h1 {
    font-size: 2.8rem;
}
h2, .h2 {
    font-size: 1.5rem;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.5;
}

.displayTitle {
    font-size: 1.8rem;
}
.displaySpan {
    font-size: 1.6rem;
}

.fontSize-085 {
    font-size: 0.85rem;
}
.fontSize-1 {
    font-size: 1rem;
}
.fontSize-1-2 {
    font-size: 1.2rem;
}
.fontSize-5 {
    font-size: 5rem;
}

.fontSize-1-5-em {
    font-size: 1.5em;
}

.textAlign-left {
    text-align: left!important;
}
.textAlign-center {
    text-align: center!important;
}

.width-100 {
    width: 100%;
}

/* container */
.container-lg, .container-md, .container { max-width: 1500px; }
.slide-menu { width: 300px; }
.content { margin-left: 300px; }

/* text */
.text-underline {
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}
a[target="_blank"] {
    word-wrap: break-word;
}

span.text-secondary:hover {
    color: #4f4f4f !important;
}

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

/* card */
.card-hover:hover {
    background: #d7e6e1;
}
.card-row {
    border-bottom: 1px solid #c7c7c7;
    margin: 0 0 20px 0;
    padding: 10px 0 20px;
}
.card-guide {
    color: #dc3545 !important;
    background-color: #f5f5f5 !important;
    font-size: 1.1rem;
    font-weight: 700;
}
.card-guide .card-body {
    padding: 0.7rem 1rem;
}
.card-border-radius {
    border-radius: 30px;
}

/* button */
.btn {
    box-shadow: 4px 5px 7px 0px rgba(0, 0, 0, 0.37);
}
.btn-warning {
    color: #fff;
    background-color: #FFAA33;
    border-color: #FFAA33;
}
.btn-warning:hover {
    color: #fff;
    background-color: #d5a30c;
    border-color: #d5a30c;
}
.btn-warning:focus,
.btn-warning.focus {
    color: #fff;
    background-color: #d5a30c;
    border-color: #d5a30c;
    box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}
.btn-warning.disabled,
.btn-warning:disabled {
    color: #fff;
    background-color: #d5a30c;
    border-color: #d5a30c;
}
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
    color: #fff;
    background-color: #d5a30c;
    border-color: #d5a30c;
}
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-glass {
    width: fit-content;
    padding: 14px 30px;
    color: #3c3c3c;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 7px 7px 14px 0px rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    border-radius: 50px;
}
.btn-glass:hover {
    background: rgba(200, 200, 200, 0.5);
    cursor: pointer;
}

.btn-choice {
    background: #d7e6e1;
}

.btn.disabled, .btn:disabled {
    pointer-events: none;
}

.pointer-events-none {
    pointer-events: none;
}

.badge-used {
    font-size: 10px;
    line-height: 25px;
}

.report-done, .report-undone {
    float: right;
    margin: 20px 30px 20px 0;
    font-weight: 600;
}

.report-done svg, .report-undone svg {
    margin-top: -3px;
}

@media (max-width: 576px) {
    .report-done, .report-undone {
        float: unset;
        display: block;
        margin: 0 0 10px 0;
    }
}

.shadow-unset {
    box-shadow: unset;
}


/* flex */
.flex-1 {
    flex: 1;
}
.flex-fill-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* form */
.form-control {
    min-height: 55px!important;
    font-size: 1.2rem!important;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
}
.form-control:focus {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    border: 2px solid #d4d4d4;
    border-bottom-color: #009e69;
    box-shadow: none;
}
.form-control.is-invalid {
    border-bottom-color: #dc3545;
}
.form-control.validFalse {
    border-bottom-color: #dc3545;
}
    /*password*/
    .form-password {
        position: relative;
    }
    .form-password .toggle-password {
        position: absolute;
        top: 50px;
        right: 10px;
    }
    .form-password .toggle-password svg {
        fill: #808080;
    }
    #i-password.is-invalid, #i-password-confirmation.is-invalid {
        background-image: unset;
    }

/* list */
.list-group-item {
    padding: 0.75rem 1rem;
}

/* float */
.float-left {
    float: left;
}
.float-right {
    float: right;
}

/* clear */
.clear-both {
    clear: both;
}

/* collapse */
.collapse-position {
    position: absolute;
    right: 35px;
}
.collapse-position-inline {
    margin: 0 0 0 0.4rem;
}

/* modal */
.modal-body {
    padding: 2rem 3rem;
}
.modal-footer {
    display: block;
    font-size: 1rem;
    text-align: center;
    padding: 1rem;
}

/* lighthouse.pagespeed.keyword 檢測流程 */

/* container title */
.container .title { position: absolute; z-index: 10; width: 40%; }

/* home */


/* index */
.container.detectIndex .title { position: absolute; width: 50%; }
.container.detectIndex .title h2 { font-size: 1.8rem; }
.backgroundGIF { float: right; width: 70%; margin-top: -140px; }
@media (max-width: 1700px) {
    .container.detectIndex .detectText { padding: 15px 30px; }
}
@media (max-width: 1280px) {
    .container.detectIndex .title { position: unset; width: 100%; }
    .backgroundGIF { float: unset; width: 100%; margin-top: 0; }
}
@media (max-width: 991px) {
    .container.detectIndex .title h2 { font-size: 1.2rem; }
}

/* device */
.device .btn-glass { position: unset; width: fit-content; white-space:nowrap; }
.span-sources { position: absolute; right: 10px; margin-top: -20px; color: #999999; }

/* regions */
    /* 多選框 */
    .select2-container .select2-selection--multiple {
        padding: 5px 40px 15px 20px!important;
        color: #3c3c3c!important;
        font-weight: 700!important;
        background: rgba(255, 255, 255, 0.5)!important;
        box-shadow: 7px 7px 14px 0px rgba(0, 0, 0, 0.37)!important;
        backdrop-filter: blur(3.5px)!important;
        -webkit-backdrop-filter: blur(3.5px)!important;
        border-radius: 50px!important;
        border: unset!important;
    }
    .select2-container--default .select2-selection--multiple.select2-selection--clearable {
        width: 600px;
    }

    .select2-container .select2-search--inline .select2-search__field {
        font-family: inherit!important;
        min-height: 50px!important;
        line-height: 45px!important;
        margin-top: 15px!important;
        margin-left: 20px!important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        height: unset!important;
        margin: 0 10px!important;
        top: 50%;
        transform: translateY(-50%);
    }
    .select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
        color: #bd2130!important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__clear span {
        padding: 10px;
    }

    /* 下拉選單 */
    .select2-container--open .select2-dropdown--below,
    .select2-container--open .select2-dropdown--above {
        padding: 14px 30px!important;
        color: #3c3c3c!important;
        font-weight: 700!important;
        background: rgba(255, 255, 255, 0.5)!important;
        box-shadow: 7px 7px 14px 0px rgba(0, 0, 0, 0.37)!important;
        backdrop-filter: blur(3.5px)!important;
        -webkit-backdrop-filter: blur(3.5px)!important;
        border-radius: 50px!important;
        border: unset!important;
        top: 10px
    }
    .select2-container--default .select2-results > .select2-results__options {
        max-height: 400px!important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin: 10px 8px 0 0!important;
        padding: 0 30px 0 20px!important;
        line-height: 50px!important;
        color: #3c3c3c!important;
        font-weight: 700!important;
        background: rgba(215, 230, 225, 0.5)!important;
        backdrop-filter: blur(3.5px)!important;
        -webkit-backdrop-filter: blur(3.5px)!important;
        border-radius: 25px!important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        border-right: none!important;
        padding: 0 10px!important;
        right: 0;
        left: unset!important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
        background-color: unset!important;
        color: #bd2130!important;
    }

    .select2-container--default .select2-results__group {
        padding: 6px 20px!important;
    }
    .select2-container--default .select2-results__option .select2-results__option {
        padding-left: 2em!important;
    }

    ul li ul li.select2-results__option:before {
        content: "";
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        border: 2px solid #e9e9e9;
        border-radius: 4px;
        background-color: #fff;
        margin-right: 20px;
        vertical-align: middle;
    }
    ul li ul li.select2-results__option.select2-results__option--selected:before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -3 20 20'%3E%3Cpath d='M5.37,11.79a1.2,1.2,0,0,1-.33,0,1.24,1.24,0,0,1-.47-.24h0l0-.05h0L.37,7.3A1.25,1.25,0,0,1,2.13,5.53L5.37,8.77l8.4-8.4a1.25,1.25,0,0,1,1.77,1.76L6.25,11.42h0A1.24,1.24,0,0,1,5.37,11.79Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: #d7e6e1!important;
        color: #3c3c3c!important;
    }
    .select2-open, .select2-close {
        color: #505050;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0;
        margin: -60px 20px 0 0;
        cursor: pointer;
    }
    .select2-All, #select2-selectAll, #select2-clearAll {
        color: #5c5c5c;
        font-size: 18px;
        font-weight: 600;
        display: inline-block;
        margin: 10px;
    }
    #select2-selectAll:hover {
        color: #009e69;
    }
    #select2-clearAll:hover {
        color: #bd2130;
    }

/* website */
.website input {
    background: rgba(255, 255, 255, 0.5)!important;
    box-shadow: 7px 7px 14px 0px rgba(0, 0, 0, 0.37)!important;
    backdrop-filter: blur(3.5px)!important;
    -webkit-backdrop-filter: blur(3.5px)!important;
    border-radius: 50px!important;
    height: 85px!important;
    padding: 0.5rem 1rem 0.5rem 2.5rem!important;
}
.website input#i-url.moreCompare {
    background: rgb(207 207 207 / 50%) !important;
    pointer-events: none;
}

/* analyze */
.Steps {
    width: 70%;
    position: relative;
    z-index: 10;
}
.Steps ul,
.Steps li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.Steps ul {
    display: table;
    width: 100%;
}
.Steps li {
    display: table-cell;
    position: relative;
}
.Steps li:first-child {
    width: 40px;
}
.Steps li:first-child .step:before {
    content: none;
}
.Steps .step {
    width: 60px;
    height: 60px;
    border: 2px solid;
    border-radius: 50%;
    border-color: transparent;
    line-height: 55px;
    font-size: 24px;
    text-align: center;
    color: #bbb;
    background-color: #eee;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 1px 1px rgba(0, 0, 0, 0.075);
    float: right;
}
.Steps .step:nth-child(n + 2) {
    margin: 0 0 0 100px;
    transform: translate(0, -4px);
}
.Steps .step:before {
    height: 4px;
    display: block;
    background-color: #eee;
    position: absolute;
    content: "";
    border-radius: 5px;
    right: 65px;
    left: 5px;
    top: 50%;
}
.Steps .step:after {
    display: block;
    transform: translate(-33px, 0);
    color: #818698;
    content: attr(data-desc);
    font-weight: 400;
    font-size: 18px;
    min-width: 120px;
}
.Steps .step.active {
    border-color: #2d6ca2;
    color: white;
    background: #73b5e8;
    background-image: linear-gradient(to bottom, #428bca 0, #3071a9 100%);
}
.Steps .step.active:before {
    background: linear-gradient(to right, #58bb58 0%, #418ac9 100%);
}
.Steps .step.active:after {
    color: #2d6ca2;
    font-weight: 600;
}
.Steps .step.done {
    background-color: #58bb58;
    border-color: #469f46;
    color: white;
    background-image: linear-gradient(to bottom, #5cb85c 0, #449d44 100%);
}
.Steps .step.done:after {
    color: #469f46;
}
.Steps .step.done:before {
    background-color: #58bb58;
}
.Steps .step .icon-valid {
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAu0lEQVQ4T6WTURHCMBBEdxWABCRUAkjAAShBCpWCBOoACXGwzGWazpEmIYV833vZ3F2IPw9/4SUNJJ/GbhZIugC4AxhJXjcJHJyCj92CAmySqUtQgwEco2AuuAE4p+akjE2YDMwKAoBTknyD4xQkGbRz44wSAMPcbT/pKcYmrSYeE1jhoyDZZzuygpc9qEiaNy8JXLNKSeKo8tje/DHGQpImXFxlJ3m1bl49wceSdAAQfLdrn65rE1s/9g2UFVqH6GtSAwAAAABJRU5ErkJggg==");
    display: block;
    margin: 20px;
}
.Steps .pulse::before {
    content: "";
    position: absolute;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNGRkZGRkYiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjRkZGRkZGIj4gICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjEiPiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjVzIiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDIwIiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIgICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4xNjUsIDAuODQsIDAuNDQsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi41cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAwIiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIgICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4zLCAwLjYxLCAwLjM1NSwgMSIgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+ICAgICAgICA8L2NpcmNsZT4gICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjEiPiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiICAgICAgICAgICAgICAgIGJlZ2luPSItMC45cyIgZHVyPSIyLjVzIiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDIwIiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIgICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4xNjUsIDAuODQsIDAuNDQsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMi41cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAwIiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIgICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4zLCAwLjYxLCAwLjM1NSwgMSIgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+ICAgICAgICA8L2NpcmNsZT4gICAgPC9nPjwvc3ZnPg==")
        no-repeat 50% 50%;
    width: 60px;
    height: 60px;
    top: 0;
    right: 0;
    opacity: 1;
}

/* enterKeyword */
.enterKeyword .select2-container--default .select2-selection--multiple.select2-selection--clearable { width: unset; }
.enterKeyword .btn-glass {
    width: fit-content;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.37);
    margin: 10px 0 5px 10px;
    font-size: 18px;
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
}
.enterKeyword .btn-glass:hover {
    background: rgba(200, 200, 200, 0.9);
    cursor: pointer;
}
.enterKeyword .keywordSelected {
    background: rgba(200, 200, 200, 0.9);
    pointer-events: none;
}
.enterKeyword .btn-outline-primary {
    background-color: white;
}
.enterKeyword .btn-outline-primary:hover {
    color: #fff;
    background-color: #009e69;
    border-color: #009e69;
}
.enterKeyword ul li.select2-results__option:before {
    content: "";
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    border: 2px solid #e9e9e9;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 20px;
    vertical-align: middle;
}
.enterKeyword ul li.select2-results__option.select2-results__option--selected:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -3 20 20'%3E%3Cpath d='M5.37,11.79a1.2,1.2,0,0,1-.33,0,1.24,1.24,0,0,1-.47-.24h0l0-.05h0L.37,7.3A1.25,1.25,0,0,1,2.13,5.53L5.37,8.77l8.4-8.4a1.25,1.25,0,0,1,1.77,1.76L6.25,11.42h0A1.24,1.24,0,0,1,5.37,11.79Z'%3E%3C/path%3E%3C/svg%3E");
}
.enterKeyword ul li.select2-results__message:before,
.enterKeyword ul li.select2-results__message {
    content: unset;
}
.enterKeyword .keywordRecommend svg {
    margin: 20px!important;
    cursor: pointer;
}
.enterKeyword .keywordRecommend svg:hover {
    color: #009e69;
}
.enterKeyword .keywordRecommend .spanTooltip svg {
    margin: 0px!important;
    color: #757575;
}
.enterKeyword .keywordRecommend .spanTooltip svg:hover {
    color: #4f4f4f;
}
.enterKeyword .keywordRecommend .keywordRecommendTitle {
    font-size: 1rem;
    margin: 1.8rem 0 0;
}
.enterKeyword .keywordRecommend .returnKeyword {
    padding-left: 65px;
}

/* register 註冊 */
.register-agreement {
    font-size: 1rem;
    margin-bottom: 20px;
}

/* verify 驗證 */
#verify-modal p {
    font-size: 1.1rem;
}
#verify-modal .verify_form {
    text-align: center;
}
#verify-modal .verify_input {
    letter-spacing: 1.7px;
    border: none;
    outline: none;
    stroke: none;
    box-shadow: none;
    width: 150px;
    height: 50px;
    transition: 0.2s 0s ease-out;
    width: 60px;
    height: 60px;
    border-radius: 9px;
    padding: 16px 0;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    background: #dde6f3;
    margin: 0 8px;
}
#verify-modal .verify_input:hover {
    box-shadow: 0 0 0 0.25rem rgba(165, 179, 212, 0.6);
}
#verify-modal #resend-submit {
    cursor: pointer;
}
#verify-modal #resend-submit.disabled {
    pointer-events: none;
    color: #005236;
}

/* END pagespeed.lighthouse.keyword 檢測流程 */

/* lighthouse 結果頁 */
    /* complete */
    .scoreAvg {
        font-size: 90px;
        font-weight: 700;
    }

    /* compare */
    .compare .scoreSvg {
        margin-right: 50px;
    }
    .compare .scoreAvg {
        font-size: 60px;
    }
    .exclamation {
        position: absolute;
        text-align: center;
        z-index: 10;
        background-color: #bd21301c;
        border-radius: 20px;
        width: 60%;
        height: 80%;
    }
    .exclamation svg {
        color: #dc3545;
    }
    .exclamation .text-danger.font-weight-bold {
        margin-top: -20px;
    }
    @media (max-width: 768px) {
        .exclamation svg { margin-top: -20px; }
        .exclamation .text-danger.font-weight-bold { display: none; }
    }
    .unreliable-color {
        color: #b9b9b9!important;
    }
    .unreliable-background-color {
        background-color: #b9b9b9!important;
        border-color: #b9b9b9!important;
    }
    .unreliable-stroke {
        stroke: #b9b9b9!important;
    }

/* pagespeed 結果頁 */
    /* complete */
    .speedAvg {
        font-size: 90px;
        font-weight: 700;
        margin-top: 2rem;
    }

    /* region */
    .imageDiv {
        display: flex;
        justify-content: center;
    }
    .imageScreenshot {
        position: relative;
        border: 1px solid #f0f0f0;
    }
    .imageScreenshot .imageBackground {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(70, 70, 70, 0.5);
        z-index: 1;
        cursor: pointer;
    }
    .imageScreenshot .iconPlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
        padding: 6px;
        border-radius: 50%;
        cursor: pointer;
    }
    .imageScreenshot img {
        max-height: 300px;
        width: 100%;
    }
    .collapseTitle {
        color: #757575;
        font-size: 1rem;
        margin: 5px 0 0 25px;
    }

    /* video */
    #timestampDone {
        font-size: 1.2rem;
    }
    #filmStripUnit {
        font-size: 1.8rem;
    }
    .btn-video {
        border: unset;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 8px 14px;
    }
    .btn-video:hover {
        background-color: rgba(0, 0, 0, 1);
    }
    .btn-video:disabled {
        background-color: rgb(200, 200, 200, 0.5);
    }

    .filmStrip {
        border: 1px solid #f0f0f0;
        max-width: 100%;
        max-height: 300px;
    }
    .filmStripImgSuccess {
        outline: 3px solid #28a745;
    }
    .filmStripImgWarning {
        outline: 3px solid #FFAA33;
    }
    .filmStripImgDanger {
        outline: 3px solid #dc3545;
    }

    /* compare */
    .compare #filmStripUnit {
        font-size: 5rem;
    }
    .compare .speedAvg {
        margin-top: 0;
        font-size: 60px;
        margin-right: 50px;
        white-space: nowrap;
    }
    .compare .col-filmStrip {
        flex: 0 0 11%;
        max-width: 11%;
    }

/* compare 比較頁 */
    .compare .win {
        background-color: rgba(40, 167, 69, 0.2);
    }
    .compare .win-crown {
        display: inline-block;
        transform: rotate(28deg);
        margin: -12px 0 0 5px;
    }
    .compare .imageScreenshot .iconCrown {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .compare .performance {
        margin-top: 0.2rem;
        margin-bottom: 0.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

/* keyword 結果頁 */
    /* complete */
    .keyword .keywordText {
        font-size: 1.5rem;
    }
    .keyword .keywordTitle {
        margin: 10px 0 5px;
    }
    .keyword .keywordValue {
        font-weight: 700 !important;
        margin-left: 12px;
    }
    .keyword .keywordNoData {
        font-size: 1rem;
        margin-left: 12px;
    }
    .keyword .custom-select { width: auto; }
    .keyword .btn { box-shadow: unset; }
    .keyword ul { padding-inline-start: 10px; }
    .keyword .spanTooltip svg {
        margin: 0px!important;
        color: #757575;
    }
    .keyword .spanTooltip svg:hover {
        color: #4f4f4f;
    }

    /* competitionIndex */
    .keyword .card {
        border-radius: 1rem!important;
    }
    .keyword .card .card-header {
        border-radius: 1rem 1rem 0 0!important;
    }
    .keyword .keywordSize {
        font-size: 1.8rem;
        font-weight: 600;
    }
    .keyword .keywordKV, .keyword .keywordKC {
        font-size: 28px;
        font-weight: 700 !important;
        margin-left: 30px;
    }
    .keyword .keywordPC {
        margin-left: 30px;
    }
    #table-competitionIndex_wrapper, .scheduled #table-competitionIndex {
        font-size: 15px;
    }
    #table-competitionIndex td .btn {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
        padding: 0.275rem 0.35rem;
    }
    #table-competitionIndex td div.text-danger, #table-competitionIndex td div.text-warning, #table-competitionIndex td div.text-success {
        font-size: 1.8rem;
    }
    #table-competitionIndex td .textValue {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        margin-left: 15px;
    }
    #table-competitionIndex td .textRank .textValue {
        display: unset;
    }
    #table-competitionIndex td .nodata {
        display: block;
        font-size: 0.85rem;
        margin-left: 0.5rem;
    }
    #table-competitionIndex td .textLink {
        font-size: 0.9rem;
        font-weight: unset;
        margin: 0 0 0 5px;
    }
    #table-competitionIndex th .resultAlign {
        text-align: center;
    }
    #table-competitionIndex td .number {
        font-weight: 700;
    }
    #table-competitionIndex .load-more {
        color: #009e69;
        font-size: 0.8rem;
        cursor: pointer;
    }
    #table-competitionIndex .load-more.card-hover:hover {
        color: #005236;
    }
    #table-competitionIndex .moreHidden {
        display: none;
    }
    #table-competitionIndex > tbody > tr > td { white-space: unset!important; }

    /* compare */
    .keyword .selector-item p {
        text-align: center;
        font-weight: 700;
        margin-bottom: 5px;
    }
    .keyword .selector-item span.region {
        text-align: center;
        font-size: 1rem;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .keyword .win-crown {
        margin: -5px 0 0 5px;
    }
    .keyword .rankWin {
        font-weight: 700;
    }
    #table-competitionIndex td .hr-dashed {
        margin: 0.5rem 1.5rem 0.5rem 0;
        border-top: 1px dashed rgb(191 191 191);
    }
    #table-competitionIndex td .textSelf, #table-competitionIndex td .textOther {
        font-size: 0.9rem;
    }

/* scheduled */
.scheduled .card {
    border-radius: 1rem!important;
}
.scheduled .card .card-header {
    border-radius: 1rem 1rem 0 0!important;
}
#table-scheduled_wrapper, .scheduled #table-scheduled {
    font-size: 16px;
}
#table-scheduled .hr-dashed {
    margin: 0.5rem 0;
    border-top: 1px dashed rgb(191 191 191);
}
.scheduledEdit {
    text-align: center;
}
.scheduledAdd-cycleTime, .scheduledEdit-cycleTime {
    width: 150px;
    margin: -5px 8px 8px 8px;
}
.scheduledAdd-info, .scheduledEdit-info {
    margin-top: -3px;
}
.scheduledDelete-span {
    color: #757575;
    font-size: 1rem;
}
.scheduledAdd-none {
    pointer-events: none;
    color: #262626;
}

/* historyRecord */
.breadcrumb.historyRecord, .historyRecord h1, .historyRecord p {
    position: relative;
    z-index: 10;
}

.historyRecord .card {
    border-radius: 1rem!important;
}
    /* table */
    #table-historyRecords_wrapper, .usedRecord #table-historyRecords {
        font-size: 16px;
    }
    .historyRecord .detectRatioText {
        font-size: 0.9rem;
    }
    .historyRecord .detectRatioText.good::before {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        background-color: #28a745;
        border-radius: 50%;
        margin-right: 3px;
    }
    .historyRecord .detectRatioText.needapprove::before {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        background-color: #FFAA33;
        border-radius: 50%;
        margin-right: 3px;
    }
    .historyRecord .detectRatioText.poor::before {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        background-color: #dc3545;
        border-radius: 50%;
        margin-right: 3px;
    }
    .historyRecord .detectRatioPer {
        font-size: 0.8rem;
    }
    .historyRecord .hr-dashed {
        margin: 0.5rem 0;
        border-top: 1px dashed rgb(191 191 191);
    }
    .historyRecord .noneHeight {
        height: 32px;
    }
    .text-danger.up:after {
        content: "↑";
        color: #dc3545;
        margin-left: 2px;
    }
    .text-success.down:after {
        content: "↓";
        color: #28a745;
        margin-left: 2px;
    }

    /* chart */
    .historyRecord #chart {
        max-width: 100%;
        height: 1500px;
    }
    .historyRecord #selector {
        width: 100%;
        height: 30px;
    }
    .historyRecord #chartMobile {
        width: 100%;
        height: 300px;
    }
    .historyRecord .selectUrl .urlHeight {
          max-height: 512px;
          overflow: auto !important;
      }
    .historyRecord .select {
        padding: 1rem;
        font-size: 1rem;
        border: 2px solid #44a182;
        border-radius: 1rem;
        background: #d7e6e1;
        line-height: 1.3rem;
    }
    .historyRecord .unselect {
        padding: 1rem;
        font-size: 1rem;
        border-radius: 1rem;
        line-height: 1.3rem;
        border: 2px solid #d5d3d3;
    }
    .historyRecord .unselect:hover {
        background: rgba(200, 200, 200, 0.5);
    }
    .historyRecord .amcharts-range-selector-range-wrapper, .amcharts-range-selector-title.amcharts-range-selector-period-title {
        display: none;
    }
    .historyRecord .amcharts-range-selector-period-button {
        padding: 0.5rem 0.8rem;
        font-size: 1rem;
        border-radius: 0.5rem;
        line-height: 1.3rem;
        border: 2px solid #d5d3d3;
        margin: 0.8rem 0 0 0.8rem!important;
    }
    .historyRecord .amcharts-range-selector-period-button:hover {
        background: rgba(200, 200, 200, 0.5);
    }

    .historyRecord .hasRecord .buttons {
        position: relative;
        float: right;
        margin: -5px 10px 0 0;
    }
    .historyRecord .hasRecord .buttons .btn-primary {
        box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.37);
    }
    .historyRecord .hasRecord .buttons .btn-secondary {
        box-shadow: none;
    }
    .historyRecord .hasRecord .report {
        margin: 90px 20px 0;
    }

    @media (max-width: 768px) {
        .historyRecord .hasRecord #chart, .historyRecord .hasRecord .buttons { display: none; }
    }

    /* keyword */
    .regionAll, .keywordAll { display: flex; justify-content: space-between; align-items: center; }
    .regionAll span, .keywordAll span { font-size: 1.3rem; }
    .clickTotableKeyworAnchor { color: #009e69; }
    .clickTotableKeyworAnchor:hover { color: #005236; cursor: pointer; }

/* usedRecord */
.breadcrumb.usedRecord, .usedRecord h1, .usedRecord p {
    position: relative;
    z-index: 10;
}

.usedRecord .card {
    border-radius: 1rem!important;
}
.usedRecord .card .card-header {
    border-radius: 1rem 1rem 0 0!important;
}
.usedRecord .canvas-center {
    text-align: center;
}
    /* table */
    #table-usedRecord .hr-dashed {
        margin: 0.5rem 0;
        border-top: 1px dashed rgb(191 191 191);
    }
    #table-usedRecord_wrapper, .usedRecord #table-usedRecord {
        font-size: 16px;
    }
    .tooltip-inner {
        text-align: left !important;
    }

/* checkout */
.badge-points-recommend {
    line-height: unset;
    text-align: left;
    white-space: unset;
    margin-top: 8px;
}

/* keywordRank */
#keywordRank-modal {
    padding-left: 17px!important;
}
#keywordRank-modal .modal-dialog {
    max-width: 90%;
}
#keywordRank-modal .modal-body .card {
    display: block;
    padding: 1rem 1.25rem;
}
#keywordRank-modal iframe {
    height: 70vh;
}
@media (max-width: 576px) {
    #keywordRank-modal iframe { height: 50vh; }
}

/* dashboard messages */
.dashboard .card { border-radius: 1rem!important; }
.dashboard .usedRecord .card-body, .dashboard .messages .card-body { min-height: 350px; max-height: 350px; }
.dashboard .messages .card-header { border-radius: 1rem 1rem 0 0 !important; }
.dashboard .messages .card-body { height: 350px; padding: 0.5rem 1.25rem 1.25rem; }
.dashboard .messages .card-body a.d-flex { border-right: 1px solid #f0f0f0; }
.dashboard .messages .card-body .messages-block { height: 290px; overflow-y: scroll; }
@media (max-width: 1490px) {
    .dashboard .card { font-size: 1rem; }
}
@media (max-width: 768px) {
    .dashboard .card-body, .dashboard .card .card-header { font-size: unset; }
    .dashboard .card-body { min-height: unset; max-height: unset; }
    .dashboard .usedRecord .card-body, .dashboard .messages .card-body { min-height: unset; max-height: unset; }
    .dashboard .messages .card-body { height: unset; }
}

/* pricing */
.btn-disabled {
    box-shadow: none;
    background-color: rgba(200, 200, 200, 0.5);
    border-color: rgba(200, 200, 200, 0.5);
    color: #757575;
    pointer-events: none;
}

/* download.shareLink Icon */
.shareIcon {
    margin-top: 6px;
    margin-left: auto;
}
#download {
    cursor: pointer;
    color: #6B6B6B;
    float: right;
}
#download:hover { color: #b30c00; }
#shareLink {
    cursor: pointer;
    color: #6B6B6B;
    margin: 5px 15px 5px 10px;
    float: right;
}
#shareLink:hover { color: #1779bf; }
#shareLink-modal .form-control[readonly] { background: rgb(207 207 207 / 50%) !important; cursor: pointer; }
#shareLink-modal a { color: #6B6B6B; }
#shareLink-modal a:hover { color: #009e69; }
.shareTitle { display: flex; align-items: center; padding-top: 20px; color: #262626; }
.shareTitle:hover { color: #009e69; }

/* table 響應式(no修改) */
table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.dataTable > tbody > tr > td:nth-child(2) {
    white-space: unset;
    overflow: unset;
    text-overflow: unset;
}
@media (max-width: 576px) {
    table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td {
        white-space: unset;
        overflow: unset;
        text-overflow: unset;
    }
}
span.dtr-data {
    margin-left: 10px;
}

/* menu */
li.nav-item { margin: 5px 10px 0; }

/* login */
#loginChange { margin-top: 4px; }

/* price */
.dark .card-guide { background-color: #3f3f3f!important; }

/* verify */
.dark #verify-modal .verify_input { background: #424242; }

/* index */
.detectText { padding: 20px 40px; font-size: 2.5rem; font-weight: 600; }
.detectText a:hover { text-decoration: underline; }
.detectText .free-trial-used { color: #005236; pointer-events: none; }
.detectText .badge-used { font-size: 18px; }

/* upgrade */
.anm_upgrade { max-width: 600px; }

.container .row { width: 100%; }
@media (max-width: 768px) { .container .row { width: unset; } }

.contact-min-h { min-height: 400px; }

.nav-exchange { color: #009e69!important; font-weight: bold; }
.nav-exchange:hover { color: rgba(0, 0, 0, 0.9)!important; }