#body_wrap {
    width: 100%;
    height: 100%;
    transform-origin: 0 0; /* يبدأ التحجيم من الزاوية العلوية اليسرى */
}

.center {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.wave {
    width: 5px;
    height: 100px;
    background: linear-gradient(45deg, cyan, #fff);
    margin: 10px;
    animation: wave 1s linear infinite;
    border-radius: 20px;
}

    .wave:nth-child(2) {
        animation-delay: 0.1s;
    }

    .wave:nth-child(3) {
        animation-delay: 0.2s;
    }

    .wave:nth-child(4) {
        animation-delay: 0.3s;
    }

    .wave:nth-child(5) {
        animation-delay: 0.4s;
    }

    .wave:nth-child(6) {
        animation-delay: 0.5s;
    }

    .wave:nth-child(7) {
        animation-delay: 0.6s;
    }

    .wave:nth-child(8) {
        animation-delay: 0.7s;
    }

    .wave:nth-child(9) {
        animation-delay: 0.8s;
    }

    .wave:nth-child(10) {
        animation-delay: 0.9s;
    }

@keyframes wave {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

/* Large/medium screens: fractional widths */
.col-lg-2_5, .col-md-2_5, .col-sm-2_5 {
    flex: 0 0 20.8333%;
    max-width: 20.8333%;
}

.col-lg-7, .col-md-7, .col-sm-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
}

/* Small screens (<780px): stack full width in custom order */
@media (max-width: 800px) {
    .col-lg-2_5, .col-md-2_5, .col-sm-2_5,
    .col-lg-7, .col-md-7, .col-sm-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Order: Right → Left → Main */
    #LeftPanelWrapper {
        order: 1;
        display: block;
        max-width: 95%;
    }

    #MainContentWrapper {
        order: 2;
        max-width: 70%;
    }

    #RightPanelWrapper {
        order: 3;
        display: block;
        max-width: 25%;
    }
}
/* Optional: small breathing space between panels */
.row {
    gap: 15px;
}



/* Margin Top */
.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}
/* ~4px */
.mt-2 {
    margin-top: 0.5rem !important;
}
/* ~8px */
.mt-3 {
    margin-top: 1rem !important;
}
/* ~16px */
.mt-4 {
    margin-top: 1.5rem !important;
}
/* ~24px */
.mt-5 {
    margin-top: 3rem !important;
}
/* ~48px */

/* Margin Bottom */
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

/* Margin Left & Right (Horizontal) */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

.mx-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.mx-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.mx-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.mx-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

/* Margin Top & Bottom (Vertical) */
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

/* Padding All */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

/* Padding Horizontal */
.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.px-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

/* Padding Vertical */
.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}


/* Margin Top Utilities */
.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}
/* 4px تقريباً */
.mt-2 {
    margin-top: 0.5rem !important;
}
/* 8px تقريباً */
.mt-3 {
    margin-top: 1rem !important;
}
/* 16px تقريباً */
.mt-4 {
    margin-top: 1.5rem !important;
}
/* 24px تقريباً */
.mt-5 {
    margin-top: 3rem !important;
}
/* 48px تقريباً */

/* Padding Utilities */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}
/* 4px تقريباً */
.p-2 {
    padding: 0.5rem !important;
}
/* 8px تقريباً */
.p-3 {
    padding: 1rem !important;
}
/* 16px تقريباً */
.p-4 {
    padding: 1.5rem !important;
}
/* 24px تقريباً */
.p-5 {
    padding: 3rem !important;
}
/* 48px تقريباً */

/* Base style for ASP.NET buttons */
/* Base style */
/* Base style */
.btn3 {
    display: inline-block;
    padding: 7px 7px;
    margin: 0 5px 5px 0px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease-in-out;
    color: #fff;
}

/* Orange (PixelKit style) */
.btn3-orange {
    background: linear-gradient(to bottom, #e07b3a 0%, #c85a22 100%);
}

    .btn3-orange:hover {
        background: linear-gradient(to bottom, #d06b2a 0%, #b84a12 100%);
        box-shadow: 0 2px 4px rgba(0,0,0,0.4); /* ظل خفيف */
    }

/* Green */
.btn3-green {
    background: linear-gradient(to bottom, #4CAF50 0%, #2E7D32 100%);
}

    .btn3-green:hover {
        background: linear-gradient(to bottom, #3e8e41 0%, #1b5e20 100%);
        box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }

/* Blue */
.btn3-blue {
    background: linear-gradient(to bottom, #2196F3 0%, #0D47A1 100%);
}

    .btn3-blue:hover {
        background: linear-gradient(to bottom, #1976D2 0%, #0B3C91 100%);
        box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }

/* Red */
.btn3-red {
    background: linear-gradient(to bottom, #F44336 0%, #B71C1C 100%);
}

    .btn3-red:hover {
        background: linear-gradient(to bottom, #D32F2F 0%, #8A1515 100%);
        box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }

/* Gold */
.btn3-gold {
    background: linear-gradient(to bottom, #FFD54F 0%, #FFA000 100%);
    color: #000;
}

    .btn3-gold:hover {
        background: linear-gradient(to bottom, #E0B93E 0%, #CC8A00 100%);
        box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }



/* Style for selected row */
.selected-row {
    color: rgb(241, 91, 10);
}



.frame-item {
    position: relative;
    /*width: 48%;*/
    /*height: auto;*/
    margin: 2px;
    display: inline-block;
    vertical-align: top;
}

    .frame-item img {
        width: 100%;
        height: auto;
        /*height:Auto;*/
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        padding: 2px;
    }


/* إذا العرض الناتج أقل من 170px، خليها full width */
@media screen and (max-width: 1526px) {
    /* 48% من 350px ≈ 168px */
    .frame-item {
        width: 100% !important;
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    text-align: center;
    border-radius: 6px 6px 0 0;
}

    .overlay .model {
        display: block;
        font-weight: bold;
    }

    .overlay .code {
        display: block;
        cursor: pointer;
        color: #ffd700;
    }

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}

.modal-content {
    display: block;
    margin: 5% auto;
    max-width: 80%;
    border-radius: 8px;
}

.close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}




<!-- Body Wrapper -->
<!-- Modal Styles -->
/* الخلفية */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-top: 60px;
}

/* محتوى المودال */
.modal-content {
    margin: 5% auto;
    padding: 20px;
    width: 400px;
}

/* زر الإغلاق أو العناصر النشطة */
.QListActive:hover,
.QListActive:focus {
    color: black;
    background-color: #fc8440;
    text-decoration: none;
    cursor: pointer;
}
/* Default table cells */

/* Default inputs */
/*input[type="text"], textarea {
    text-align: left;
    direction: ltr;
}*/

/* Class applied when Arabic text is detected */
.arabic-input {
    text-align: right !important;
    direction: rtl !important;
}

/* Default table cells */
table td {
    text-align: left;
    direction: ltr;
    vertical-align: middle;
}

    /* Arabic cell styling */
    table td.arabic-cell {
        text-align: right !important;
        direction: rtl !important;
        font-weight: bold;
        /*color: rgb(241, 91, 10);*/ /* optional orange */
    }

/*-----------------------------------*/
/* Patient Form */
/*-----------------------------------*/
.list-container {
    display: flex;
    align-items: center;
    gap: 10px;
    
}

.list-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.list-box {
    width: 45%;
    background-color: #353e47;
    color: #353e47;
    font-size: 12px;
    font-family: 'Cabin', sans-serif;
    padding: 5px;
    box-sizing: border-box;
    border: revert-layer;
    border-color: #353e47;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.4);
}

    .list-box :focus :active {
        width: 45%;
        background-color: #353e47;
        color: #353e47;
        font-size: 14px;
        font-family: 'Cabin', sans-serif;
        padding: 5px;
        box-sizing: border-box;
        border: revert-layer;
        border-color: #353e47;
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.4);
    }
    /* Empty state visibility */
    .list-box:empty::before {
        content: "No items available";
        display: block;
        text-align: center;
        color: #b7bfc7;
        font-style: italic;
        /*padding-top: 800px;*/
    }

    /* Option styling */
    .list-box option {
        padding: 5px 5px 5px 5px;
        color: #b7bfc7;
        box-sizing: border-box;
    }

        /* Hover and selected states */
        .list-box option:hover {
            background-color: #3e4752;
            color: #fff;
            width: 105%;
        }

        .list-box option:checked {
            background-color: #3e4752;
            color: #fff;
            width: 105%;
            box-sizing: border-box;
            border: revert-layer;
            border-color: #353e47;
            box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.4);
        }

.scrollbar {
    margin-right: 0px;
    width: 90%;
}

select[multiple], select[size] {
    height: 105px;
}
/* Default for width >=1200px */
@media (min-width: 1200px) and (max-width: 1400px) {
    .col-sm-2_5 {
        flex: 0 0 auto;
        width: 20.8333%; /* same as col-sm-2 */
    }
}

@media (max-width: 768px) {
    .col-sm-2_5 {
        display: none; /* hide sidebars on small screens */
    }

    .col-sm-6_5 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/*-----------------------------------*/
/* Sideform Form */
/*-----------------------------------*/
.field_Patientname input {
    float: left;
    /* width: 255px;*/
    margin-right: 5%;
    font-size: 16px;
}

.field_phone input {
    float: left;
    max-width: 150px;
    margin-right: 5%;
}

.field_RecordNumber input {
    float: left;
    max-width: 150px;
    margin-right: 5%;
}

.field_Date input {
    float: left;
    max-width: 150px;
    margin-right: 5%;
}

#Save::before {
    content: "\e172"; /* كود أيقونة floppy-disk من Glyphicons */
    font-family: 'Glyphicons Halflings';
    margin-right: 5px;
}

#Delete::before {
    content: "\e020"; /* trash */
    font-family: 'Glyphicons Halflings';
    margin-right: 5px;
}

#Clear::before {
    content: "\e088"; /* remove-circle */
    font-family: 'Glyphicons Halflings';
    margin-right: 5px;
}

#Update::before {
    content: "\e031"; /* refresh */
    font-family: 'Glyphicons Halflings';
    margin-right: 5px;
}

.btn1 {
    display: inline-block;
    background: linear-gradient(to bottom, #d46a2f 0%, #b84e1f 100%); /* تدرج برتقالي */
    color: #fff;
    border: none;
    border-radius: 6px;
    height: 36px; /* ارتفاع الزر */
    line-height: 36px; /* يضبط النص والأيقونة في المنتصف */
    /*width: 50px;*/ /* عرض أصغر */
    text-align: center;
    font-size: 14px; /* حجم خط مناسب */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0 10px 0 10px;
}

.btn2 {
    display: inline-block;
    background: linear-gradient(to bottom, #d46a2f 0%, #b84e1f 100%); /* تدرج برتقالي */
    color: #fff;
    border: none;
    border-radius: 6px;
    height: 30px; /* ارتفاع الزر */
    /*line-height: 36px;*/ /* يضبط النص والأيقونة في المنتصف */
    /*width: 50px;*/ /* عرض أصغر */
    text-align: center;
    font-size: 14px; /* حجم خط مناسب */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    line-height: 2px;
    /*padding: 0 10px 0 10px;*/
}

    .btn2:hover {
        background: linear-gradient(to bottom, #e07b3a 0%, #c85a22 100%);
        box-shadow: 0 6px 8px rgba(0,0,0,0.5);
    }
/* تأثير عند المرور */
.btn1:hover {
    background: linear-gradient(to bottom, #e07b3a 0%, #c85a22 100%);
    box-shadow: 0 6px 8px rgba(0,0,0,0.5);
}

/* أيقونات Bootstrap 3 */
.btn1 .btn2 .glyphicon {
    font-size: 16px; /* حجم أيقونة أصغر */
    vertical-align: middle;
}
/* Success (أخضر) */
.btn-success {
    background: linear-gradient(to bottom, #5cb85c 0%, #4cae4c 100%);
}

    .btn-success:hover {
        background: linear-gradient(to bottom, #6fdc6f 0%, #5cb85c 100%);
    }

/* Danger (أحمر) */
.btn-danger {
    background: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
}

    .btn-danger:hover {
        background: linear-gradient(to bottom, #e06663 0%, #d9534f 100%);
    }

/* Warning (برتقالي/أصفر) */
.btn-warning {
    background: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
}

    .btn-warning:hover {
        background: linear-gradient(to bottom, #f7c15f 0%, #f0ad4e 100%);
    }

/* Info (أزرق فاتح) */
.btn-info {
    background: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
}

    .btn-info:hover {
        background: linear-gradient(to bottom, #6cd3f0 0%, #5bc0de 100%);
    }

.widget_Sideform {
    margin: 15px 0 19px;
}

    .widget_Sideform .btn {
        margin-left: 0;
    }

.widget_Sideform {
    font-weight: 600;
    /*color: #f06e23;*/
    /* text-decoration: underline;*/
}

.widget_Sideform {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.Sideform {
    margin: 125px auto;
    max-width: 100%;
}


.SideformrowSubmit {
    height: 58px;
    padding: 15px 35px 0;
    background: url(../images/comment-rowsubmit.png) repeat-x;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.Sideformform_inner {
    padding: 10px 10px 10px;
    margin: 0 auto;
}