/*Start: Alert Box*/
.confirmBoxContainer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); display: flex; 
                            align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: .3s ease; z-index: 9999; }
.confirmBoxContainer.showConfirmDialogBox { visibility: visible; opacity: 1; }
.confirmBoxContainerInner { background: #fff; max-width: 450px; padding: 30px; border-radius: 12px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,.2);
                                                animation: scaleIn .3s ease; }
@keyframes scaleIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirmBoxAlertIcon { width: 70px; height: 70px; border: 4px solid #f5b97a; border-radius: 50%; margin: 0 auto 20px; font-size: 40px; 
                                    color: #f5b97a; display: flex; align-items: center; justify-content: center; }
.confirmBoxContainerInner h2 { margin-bottom: 10px; font-weight: 500; color: #555; }
.confirmBoxContainerInner p { margin-bottom: 25px; color: #666; }
.confirmBoxButtonsContainer { display: flex; justify-content: center; gap: 15px; }
.confirmBoxContainer .btnConfirm { background: #28a745; color: #fff; border: none; padding: 10px 22px; border-radius: 6px; cursor: pointer; }
.confirmBoxContainer .btnConfirm:hover { background: #218838!important; }
.confirmBoxContainer .btnCancel { background: #ccc; color: #333; border: none; padding: 10px 22px; border-radius: 6px; cursor: pointer; }
.confirmBoxContainer .btnCancel:hover { background: #b3b3b3 }
.confirmBoxContainer .close-buttonVMR {font-style: normal;font-size: 20px;font-weight: bold;background: none;border: none;cursor: pointer;color: #CCCCCC;float: right;margin-top: -30px;margin-right: -22px;}
.confirmBoxContainer .close-buttonVMR:hover {color: gray}
/*End: Alert Box*/

/*Start: Editable DDL*/
.editable-select-wrapper {position: relative;width: 100%;}
.editable-select-wrapper input{display:inline-block!important;width: 100%;}
.editable-select-list {position: absolute;width: 100%;border: 1px solid #ccc;background: #fff;max-height: 150px;overflow-y: auto;
            list-style: none;margin: 0;padding: 0;z-index: 9999;}
.editable-select-list li {padding: 6px;cursor: pointer;border-bottom:1px dotted gray}
.editable-select-list li:hover {background: #f0f0f0;}
/*End: Editable DDL*/

/*Start: Multi Select DDL*/
div.custom-multiselect[accesskey="a"]{border:1px solid #ff5b5b;}
.custom-multiselect.ValidBreak .dropdown-btn{background-color:#ffe1e1}
.custom-multiselect {position: relative;display: inline-block;padding :0px!important;height:auto!important}
.custom-multiselect .dropdown-btn {background: white;border: 1px solid #ddd;padding: 2px 2px 2px 3px;border-radius: 4px;
    cursor: pointer;text-align: left;width: 100%;}
.custom-multiselect .dropdown-panel {display: none;position: absolute;top: 110%;left: 0;background:white;
    border: 1px solid #bbb;border-radius: 6px;box-shadow: 0 5px 12px rgba(0,0,0,0.2);padding: 8px 0;z-index: 1000;width: 230px;
    max-height: 450px; overflow-y: auto;}
.custom-multiselect .txtSearch-boxMultiSelectDdl {padding: 5px 10px;}
.custom-multiselect .txtSearch-boxMultiSelectDdl input {width: 100%;padding: 5px;}
.custom-multiselect .divDividerAfterSearch {height: 1px;background: #ccc;margin: 5px 0;}
.custom-multiselect .checkbox-itemDDlMulti {display: block;padding:2px 4px;cursor: pointer;font-weight: normal!important;} 
.custom-multiselect .checkbox-itemDDlMulti.active {background-color:#428BCA; color:white}
.custom-multiselect .checkbox-itemDDlMulti:hover {background: #0080C0; color:white}
.custom-multiselect .checkbox-itemDDlMulti input {margin-right: 8px;display: inline-block !important;}
/*End: Multi Select DDL*/

/*Start: Time Picker*/
.txtTimePicker {width: 100%;}
.spTimePickerContainer {position: relative;display: inline-block}
.spTimePickerClockIcon {position: absolute;right:0px;top:3px;cursor: pointer;opacity: 0;}
.spTimePickerContainer:hover .spTimePickerClockIcon {opacity: 1;}
/*End: Time Picker*/

/*Start: Three Dots Menu DropDown*/
.threeDotsMenuContainerShowOnHover .threeDotsMenuContainer {visibility:hidden}
.threeDotsMenuContainerShowOnHover:hover .threeDotsMenuContainer {visibility:visible}
.threeDotsMenuContainer{position:relative;display:inline-block;}
.threeDots{font-size:22px;cursor:pointer;padding:5px 10px;width:20px}
.threeDotsMenuDropdown{position:absolute;top:20px;/*right:0;*/width:200px;background:white;border:1px solid #ddd;
        box-shadow:0 2px 8px rgba(0,0,0,0.2);display:none;border-radius:6px;font-family:Arial;z-index:1}
.threeDotsMenuDropdown.left{right:auto;left:0;}
.threeDotsMenuDropdown div{padding:10px 15px;cursor:pointer;}
.threeDotsMenuDropdown div:hover{background:#f1f3f4;}
.threeDotsMenuDropdown hr{margin:4px 0;border:none;border-top:1px solid #eee;}
/*Start: Three Dots Menu DropDown*/

/*Start: This is for Image Carousels*/
/*#couraselGallery{display:flex;*//*flex-wrap:wrap;*//*gap:12px;margin:20px 0;}*/
#couraselGallery {display: flex;flex-wrap: nowrap;justify-content: flex-start;gap: 12px;margin: 20px 0;
    overflow-x: auto;scroll-behavior: smooth;scroll-snap-type: x mandatory;padding: 10px 40px;}
#couraselGallery::-webkit-scrollbar {height: 6px;}
#couraselGallery::-webkit-scrollbar-thumb {background: #777;border-radius: 10px;}
#couraselGallery .gallery-item {scroll-snap-align: center;flex-shrink: 0;}
#couraselGallery img{width: 100px;height: 75px;object-fit:cover;border-radius:6px;cursor:pointer;transition:.3s;}
#couraselGallery img:hover{transform:scale(1.1);}
.gallery-item{position:relative;display:inline-block;}
.gallery-item img{width:120px;height:90px;object-fit:cover;border-radius:6px;cursor:pointer;transition:.3s;}
.gallery-item img:hover{transform:scale(1.1);}
.img-hover-title{position:absolute;bottom:81%;left:50%;transform:translateX(-50%);background:#000;color:#fff;font-size:12px;padding:4px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;z-index:5;}
.popup-thumbs .gallery-item{position:relative;margin-top:10px;}
.gallery-item:hover .img-hover-title{opacity:1;}
.popUpCarousels{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);flex-direction:column;justify-content:center;align-items:center;z-index:99;}
.popUpCarousels #imgPopUpMain,.popUpCarousels #imgPopUpMainCourasal{max-width:80%;max-height:70%;border-radius:10px;}
.closeCarousels{position:absolute;top:20px;right:40px;font-size:40px;color:white;cursor:pointer;}
.prevCarousels,.nextCarousels{position:absolute;top:50%;transform:translateY(-50%);font-size:50px;color:white;cursor:pointer;}
.prevCarousels{left:40px;}
.nextCarousels{right:40px;}
.popup-thumbs{display:flex;gap:10px;margin-top:20px;max-width:90vw;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;}
.popup-thumbs::-webkit-scrollbar{height:6px;}
.popup-thumbs::-webkit-scrollbar-thumb{background:#777;border-radius:10px;}
.popup-thumbs img{width:80px;height:60px;object-fit:cover;cursor:pointer;opacity:.6;border:2px solid transparent;}
.popup-thumbs img.active{opacity:1;border:2px solid white;}
/*End: This is for Image Carousels*/