body {

    font-size: 1.25rem;

    font-family: "Helvetica", "Noto Sans TC", "sans-serif";

    letter-spacing: 0.125em;

    min-height: 800px;

    position: relative;

}



.link_primary {

    color: #0B44A0;

    font-weight: 900;

}



.text_warning {

    color: #D55443;

}





#navbar1 ul li .nav_link {

    color: #0B44A0;

    padding: 0px 20px;

    font-weight: 900;



}



#navbar1 ul li .nav_link {

    border-left: 1px solid #767676;

}



#navbar1 ul li:first-child .nav_link {

    border-left: 0px;

}



#navbar1 ul li:last-child .nav_link {

    padding-right: 0px;

}



.nav_tab {

    display: inline-flex;

    width: auto;

}



.nav_tab .nav_link {

    padding: 7px 32px;

    display: block;

    font-weight: 400;

    color: #1f1f1f;

}



.nav_tab .nav_link.active {

    background-color: #fff;

    border-radius: 5px;

    font-weight: 700;

}



#notification {

    background-color: #B11818;

    color: #fff;

    padding: 5px 10px;

    position: absolute;

    top: -14px;

    right: 5px;

    font-size: 12px;

    border-radius: 30px;

    font-weight: 700;

}



/*table_info*/

.table_info th,

.table_info td {

    padding: 0px 10px;

    font-family: "Noto Sans TC", "sans-serif";

}



.table_info td {

    font-weight: 100;

    

}



.table_info th {

    font-weight: 500;

    white-space: nowrap;

}



.table_info thead th {

    padding: 0px;

}



/**/

[class*="btn_"] {

    letter-spacing: 0.15rem;

    padding: 9px 32px;

    white-space: nowrap;

    border-radius: 3rem;

}



.btn_sm {

    font-size: 18px;

    padding: 6px 1.5rem;

    transform: translateY(0.625px);

}



.btn_lg {

    font-size: 32px;

    padding: 16px 80px;

}



.btn_sm.btn_inside_icon i {

    font-size: 14px;

    transform: translateY(-1px);

}



.btn_sm.btn_inside_icon {

    padding-right: 20px;

}



.btn_primary_outline {

    border: 1px solid #184A9B;

    color: #184A9B;



}



.btn_warn_outline {

    border: 1px solid rgb(182, 68, 68);

    color: rgb(182, 68, 68);



}



.btn_secondary_outline {

    border: 1px solid rgb(0, 0, 0);

}



.btn_primary {

    position: relative;

    background-color: #4376C8;

    color: #fff;

    font-weight: 700;

}



.btn_primary_icon {

    position: relative;

    background-color: #4376C8;

    color: #fff;

    padding-right: 64px;

}



.btn_primary:active,

.btn_primary_icon:active {

    background-color: #3361ac;

}



.btn_secondary_outline:active {

    background-color: rgba(0, 0, 0, .0375);

    font-weight: 500;

}



.btn_primary_outline:active {

    background-color: rgba(65, 117, 200, .0375);

    font-weight: 500;

}



.btn_warn_outline:active {

    background-color: rgba(182, 68, 68, .0375);

    font-weight: 500;

}





.icon_f095::before {

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f095";

    display: block;

}



.icon_f054::before {

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f054";

    display: block;

}



.btn_primary_icon::before {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    font-size: 18px;

    background-color: rgba(0, 0, 0, .2);

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    right: 5px;

}



.btn_primary_icon.btn_lg {

    padding-right: 76px;

    border-radius: 50px;

    font-size: 24px;

}



.btn_primary_icon.btn_lg::before {

    width: 48px;

    height: 48px;

    font-size: 18px;

    right: 10px;

}



/*switch*/

.switch {

    position: relative;

    width: 48px;

    height: 26.67px;

    display: block;

}



.switch .slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    transition: .4s;

}



.switch .slider:before {

    content: "";

    position: absolute;

    width: 21.33px;

    height: 21.33px;

    background-color: #fff;

    display: block;

    top: 50%;

    left: 2.5px;

    transform: translateY(-50%);

    transition: .4s;

}



.switch input {

    opacity: 0;

}



.switch .slider.round {

    border-radius: 30px;

}



.switch .slider.round:before {

    content: "";

    border-radius: 50%;

}



.switch input:checked+.slider {

    background-color: #0B44A0;

}



.switch input:checked+.slider:before {

    left: auto;

    right: 2.5px;



}



/*datatable*/

#page_table.table_style1.dataTable thead th,

#page_table.table_style1.dataTable tbody td {

    padding: 18px 2rem;

}



#page_table.table_style1.dataTable tbody tr td:first-child {

    padding-left: 6rem;

    padding-right: 2rem;

}



#page_table.table_style1.dataTable tbody tr td:last-child {

    padding-right: 6rem;

    padding-left: 2rem;

}



#page_table.table_style2.dataTable thead th,

#page_table.table_style2.dataTable tbody td {

    padding: 1rem 1rem;

    text-align: center;

    font-size: 18px;

}



#page_table.table_style2.dataTable thead th {

    border-bottom: 1px solid rgba(0, 0, 0, 1);

}



#page_table.table_style2.dataTable tbody td {

    border-top: 1px solid rgba(213, 213, 213, 1);

}



#page_table.table_style3.dataTable thead th,

#page_table.table_style3.dataTable tbody td {

    padding: 0;

    text-align: left;

}



#page_table.table_style3.dataTable {

    border-collapse: separate;

}



#page_table.table_style3.dataTable tbody td {

    border-top: 0px;

    vertical-align: top;

}



#page_table.table_style3.dataTable tbody td:first-child {

    padding: 2.25rem 1.75rem 0rem 0rem

}



#page_table.table_style3.dataTable tbody td:last-child {

    padding: 2.25rem 0rem 0rem 0rem;

}



#search_btn {

    background-color: black;

    width: 44px;

    height: 44px;

    align-items: center;

    justify-content: center;

    color: #fff;

    border-radius: 50%;

    font-size: 1rem;

}



#search_input {

    background-color: #F2F2F2;

    width: 100%;

    padding: .5rem 1rem .5rem 3.5rem;

    border-radius: 20px;

    border-color: #F2F2F2;

    font-size: 20px;

}



#search_input:focus {

    box-shadow: none;

}



#search_input::placeholder {

    color: #868686;

}



#search_input::-ms-input-placeholder {

    color: #868686;

}



#page_table_filter {

    display: none;

}



#page_table_wrapper .dataTables_paginate {

    float: initial;

    text-align: center;

    padding-top: 1.5em;

}



#page_table_wrapper .dataTables_paginate .paginate_button.current,

#page_table_wrapper .dataTables_paginate .paginate_button.current:hover {

    border: none;

    background: transparent;

    color: #0B44A0 !important;

    font-weight: 900;

}



#page_table_wrapper .dataTables_paginate .paginate_button:hover {

    background: transparent;

    border-color: transparent;

    color: inherit !important;

}





#page_table_wrapper .dataTables_paginate .paginate_button:active {

    outline: none;

    background: transparent;

    box-shadow: none;

}



#page_table_previous,

#page_table_next {

    font-size: 1rem;

}



#page_table.dataTable.display>tbody>tr.even>.sorting_1,

#page_table.dataTable.order-column.stripe>tbody>tr.even>.sorting_1 {

    box-shadow: inset 0 0 0 9999px transparent;

}



#page_table.dataTable.display>tbody>tr.odd>.sorting_1,

#page_table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1 {

    box-shadow: inset 0 0 0 9999px transparent;

}



#page_table.dataTable.stripe>tbody>tr.odd>*,

#page_table.dataTable.display>tbody>tr.odd>* {

    box-shadow: inset 0 0 0 9999px transparent;

}



#page_table.dataTable.hover>tbody>tr:hover>*,

#page_table.dataTable.display>tbody>tr:hover>* {

    box-shadow: inset 0 0 0 9999px transparent;

}



/*wifi*/

.wifi_item {

    border-top: 1px solid #D5D5D5;

    padding: 1rem 0rem;

}





.wifi_item:first-child {

    border-top: 0px;

}



/*records*/

.record_detail_link {

    padding: 0px 2rem;

    border-left: 1px solid rgb(0, 0, 0);

    white-space: nowrap;

    font-weight: 500;

}



.record_detail_link:first-child {

    border-left: 0px;

}



/*video_call*/

.video_side_btn {

    color: #5f5f5f;

}



.video_side_btn i {

    font-size: 2.25rem;

}



.video_side_btn span {

    font-size: 18px;

    display: block;

    margin-top: 10px;

}



.video_side_btn.func_switch.status_on {

    color: #4376C8;

}



.main_func_btn {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}



.main_func_btn {

    background-color: rgba(120, 120, 120, 70%);

    backdrop-filter: blur(10px);

}



.main_func_btn.status_on {

    background-color: #4376C8;

}



.main_func_btn img {

    width: 32px;

    height: 32px;

}



.recording_AT {

    animation: recording 1s infinite;

}



@keyframes recording {

    0% {

        opacity: 1;

    }



    50% {

        opacity: .5;

    }



    100% {

        opacity: 1;

    }

}



#slider_range {

    -webkit-appearance: none;

    appearance: none;

    width: 100%;

    cursor: pointer;

    outline: none;

    border-radius: 15px;

    height: 3px;

    background: #ccc;

}



#slider_range::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    height: 15px;

    width: 15px;

    background-color: rgb(0, 0, 0);

    border-radius: 50%;

    border: none;

    transition: .2s ease-in-out;

}



#slider_range::-moz-range-thumb {

    height: 15px;

    width: 15px;

    background-color: rgb(0, 0, 0);

    border-radius: 50%;

    border: none;

    transition: .2s ease-in-out;

}



.slider_value {

    font-size: 26px;

    width: 50px;

    text-align: center;

}







/*calling page*/

.ring_lg {

    background: radial-gradient(rgba(254, 254, 255, .5) 60%, rgba(67, 118, 200, 100%));

    width: 400px;

    height: 400px;

    animation: ring_lg 2.25s .25s infinite;

    opacity: 0;

    transform-origin: top left;

    transform: scale(.8) translate(-50%, -50%);

}



.ring_md {

    background: radial-gradient(rgba(254, 254, 255, 0) 0%, rgba(67, 118, 200, 100%));

    /* width: 338.46px;

    height: 338.46px; */

    width: 315px;

    height: 315px;

    animation: ring_md 2.25s .125s ease-in infinite;

    opacity: 0.2;

    transform-origin: top left;

    transform: scale(.9) translate(-50%, -50%);

}



.ring_sm {

    background: radial-gradient(rgba(254, 254, 255, 0) 10%, rgba(67, 118, 200, 100%));

    /*width: 276.92px;

    height: 276.92px;*/

    width: 255px;

    height: 255px;

    animation: ring_sm 2.25s ease-in infinite;

    opacity: .4;

    transform-origin: top left;

}



@keyframes ring_lg {

    0% {

        transform: scale(.9) translate(-50%, -50%);

        opacity: 0%;

    }



    25% {

        transform: scale(1) translate(-50%, -50%);

        opacity: .3;

    }



    100% {

        transform: scale(1) translate(-50%, -50%);

        opacity: 0%;

    }



}



@keyframes ring_md {

    0% {

        transform: scale(.95) translate(-50%, -50%);

    }



    15% {

        transform: scale(1) translate(-50%, -50%);

        opacity: .2;

    }



    60% {

        opacity: .25;

    }



    100% {

        transform: scale(1) translate(-50%, -50%);

        opacity: 0;

    }

}



@keyframes ring_sm {

    0% {

        transform: scale(.93) translate(-50%, -50%);



    }



    5% {

        transform: scale(1) translate(-50%, -50%);

    }



    100% {

        transform: scale(.93) translate(-50%, -50%);

    }

}



#waiting_wave {

    position: relative;

    text-align: center;

    width: 80px;

    height: 20px;

    margin-left: auto;

    margin-right: auto;





}



.dot {

    display: inline-block;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    margin-right: 3px;

    background: #303131;

    animation: wave 1.3s linear infinite;





}



.dot:nth-child(2) {

    animation-delay: -1.1s;

}



.dot:nth-child(3) {

    animation-delay: -0.9s;

}



@keyframes wave {



    0%,

    60%,

    100% {

        transform: initial;

    }



    30% {

        transform: translateY(-10px);

    }

}



/*google*/