@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');

body {
    font-family: 'Chakra Petch', sans-serif;
    /* background-color: #F5F6F8; */
    background-color: #EBEBED;
    /* background-color: #ebebeb; */
}

@media print {
    .hid {
        display: none;
        /* ซ่อน  */
    }
}

.bgMainNavbar {
    background-color: white;
}

.btnbell {
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}

.bradeNoti {
    border: 2px solid white;
}

.AvatarProfile1 {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.AvatarProfile2 {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.borderRD15 {
    border-radius: 15px;
}

.w-30 {
    width: 30%;
}

.borderRD50 {
    border-radius: 50%;
}

.mr-10 {
    margin-right: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.t-al-l {
    text-align: left;
}

.t-al-r {
    text-align: right;
}

.t-al-c {
    text-align: center;
}

.tdcrtn {
    text-decoration: none;
}

.textLimit1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.textLimit3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.section {
    display: grid;
    justify-content: center;
    align-content: center;
}

@media (max-width: 768px) {
    .text-b {
        font-size: 12px;
    }

    .text-s {
        font-size: 6px;
    }
}

.imageLogo {
    width: 180px;
}

.imageLogofooter {
    width: 50px;
}

.imageLogoListbed {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #a6dbff;
}

.imageTakePhotoPT {
    width: 180px;
    height: 180px;
    border-radius: 15%;
    /* border: 3px solid #8ED1FC; */
    object-fit: cover;
}

.imageTakePhotoPTInWardPRESCRIPTION {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* border: 3px solid #8ED1FC; */
    object-fit: cover;
}

.bg-orange {
    background-color: #fa6000;
    background-image: linear-gradient(349deg, #fa6000 0%, #ff9b5b 100%);
}

.c-w {
    color: white;
}

.bg_w {
    background-color: white;
}

.profile {
    display: flex;
    align-items: center;
}

.profile-picture {
    width: 40px;
    /* ขนาดของรูปโปรไฟล์ */
    height: 40px;
    /* ขนาดของรูปโปรไฟล์ */
    border-radius: 50%;
    /* ทำให้รูปเป็นรูปวงกลม */
    margin-right: 10px;
    /* ระยะห่างระหว่างรูปและข้อความ */
}

.profile-name {
    font-size: 16px;
    /* ขนาดตัวอักษร */
    font-weight: bold;
    /* ตัวหนา */
    color: #333;
    /* สีข้อความ */
}

.card_group_department {
    border: 1px solid #006400;
    background-color: #00640020;
    color: #006400;
    background-image: url("../image/system/wave.svg");
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.5s ease;
}

.card_group_department:hover {
    animation: zoomInBackground 0.5s forwards;
    /* เรียกใช้ animation เมื่อ hover */
}

@keyframes zoomInBackground {
    from {
        transform: scale(1);
        /* ขนาดเริ่มต้น */
    }

    to {
        transform: scale(1.1);
        /* ขยายขนาดเมื่อ hover */
    }
}

.footer {
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 9;
}

.status_user_on {
    border: 1px solid #25d281;
    color: #23bc74;
    background-color: #19875420;
}

.status_bed_success {
    border: 1px solid #198754;
    color: #198754;
    background-color: #19875420;
}

.status_bed_secondary {
    border: 1px solid #6C757D;
    color: #6C757D;
    background-color: #dcdcdc20;
}

.card_tool_ward_num_bed {
    border: 1px solid #186279;
    /* background-color: #18627920; */
    color: #186279;
    background-image: url("../image/system/card_tool_ward_num_bed.png");
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-position 0.5s ease;
}

.card_tool_ward_num_bed:hover {
    background-position: center bottom;
    color: white;
}

.card_tool_ward_schd_mds {
    border: 1px solid #a97c00;
    /* background-color: #FCB90020; */
    color: #a97c00;
    background-image: url("../image/system/card_tool_ward_schd_mds.png");
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-position 0.5s ease;
}

.card_tool_ward_schd_mds:hover {
    background-position: center bottom;
    color: white;
}

.card_tool_ward_prescription {
    border: 1px solid #483078;
    /* background-color: #FCB90020; */
    color: #483078;
    background-image: url("../image/system/card_tool_ward_prescription.png");
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-position 0.5s ease;
}

.card_tool_ward_prescription:hover {
    background-position: center bottom;
    color: white;
}

.card_tool_ward_matching {
    border: 1px solid #BA5600;
    /* background-color: #FCB90020; */
    color: #BA5600;
    background-image: url("../image/system/card_tool_ward_matching.png");
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-position 0.5s ease;
}

.card_tool_ward_matching:hover {
    background-position: center bottom;
    color: white;
}

.list_group_list_bed {
    height: 270px;
    overflow: auto;
    /* overflow: hidden; */
    border: 1px solid rgb(229, 229, 229);
}

.tag_scanner_qrcode {
    -webkit-border-radius: 15px;
    border-radius: 15px;
    width: 100%;
}

.box_body_scanner_QR_Code {
    background-color: #1e1e1e00;
    border: 0px;
}

.fs_30 {
    font-size: 70px;
}

.color_green_blue {
    color: #4E98B3;
}

.border_green_blue {
    border: 1px solid #A0C6CF;
}

.btn_green_blue {
    background-color: #4E98B3;
    color: white;
}

.bg_bg_opacity {
    background-color: #00000064;
}

.bg-opacity-0 {
    background-color: #00000000;
}

.bg_bg_opacity_blur {
    background-color: #00000064;
    backdrop-filter: blur(10px);
    /* ปรับค่าตามความต้องการ */
    -webkit-backdrop-filter: blur(10px);
    /* เพื่อรองรับบางเบราว์เซอร์ */
}

.btn_lock_main {
    background-color: white;
    color: #000000aa;
}

.btn_lock_main:hover {
    border: 2px solid white;
    color: white;
}

.btn_pin_lock {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid white;
    background-color: #00000000;
    color: white;
}

.form_pin {
    --black: #000000;
    --ch-black: #141414;
    --eer-black: #1b1b1b;
    --night-rider: #2e2e2e;
    --white: #ffffff;
    --af-white: #f3f3f3;
    --ch-white: #e1e1e1;
    --tomato: #fa5656;
    font-family: Helvetica, sans-serif;
    border: 2px solid var(--glow-color);
    padding: 25px;
    display: flex;
    max-width: 420px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    color: var(--night-rider);
    /* background-color: var(--white); */
    border-radius: 8px;
    position: relative;
    /* box-shadow: 10px 10px 10px rgba(0, 0, 0, .15); */
}

/*----input-fields------*/

.form_pin .input-fields {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.form_pin .input-fields input {
    height: 2em;
    width: 2em;
    outline: none;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.5rem;
    color: var(--ch-black);
    border-radius: 5px;
    border: 2.5px solid var(--ch-white);
    background-color: var(--ch-white);
}

.form_pin .input-fields input:focus {
    border: 1px solid var(--night-rider);
    box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .15);
    transform: scale(1.05);
    transition: 0.5s;
}

.card_admin {
    background-image: url("../image/system/lock_admin.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
}

.card_normal {
    background-image: url("../image/system/lock_normal.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
}

.card_lock_admin {
    background-image: url("../image/system/lock_admin.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.card_lock_normal {
    background-image: url("../image/system/lock_normal.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.card_lock_setting {
    height: 50vh;
}

.p-r-0 {
    padding-right: 0px;
}

.p-l-0 {
    padding-left: 0px;
}

@media (max-width: 767px) {
    .p-r-0 {
        padding: unset;
    }

    .p-l-0 {
        padding: unset;
    }

    .card_lock_setting {
        height: 50vh;
    }
}

.btn_loack_back {
    position: absolute;
    top: 5px;
    left: 5px;
    text-decoration: none;
    color: white;
}

.clock {
    font-size: 20px;
    font-weight: bold;
}

.image_logo_nevbar {
    width: 50px;
}

.red {
    border: 1px solid red;
}

iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.image_logo_login {
    width: 100px;
}

.image_footer_company {
    width: 110px;
}

.box_footer_login {
    background-color: #2D2D2D;
}

.btn_checkin_checkout {
    background-image: linear-gradient(0deg, #228be6 5%, #3bc9db 95%);
    color: white;
}

.btn_start_workking{
    background-image: linear-gradient(0deg, #82c91e 5%, #38d9a9 95%);
    color: white;
}

.input_file_camera {
    display: none;
}

.labelFile {
    text-align: center;
    /* border: 2px dashed #ccc; */
    background-image: linear-gradient(0deg, #be4bdb 5%, #f783ac 95%);
    color: white;
}

.custom_icon {
    font-size: 90px;
    padding: 5px;
}

#preview {
    display: none;
    flex-direction: column;
    align-items: center;
}

#preview img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.nowrap {
    white-space: nowrap;
}