/*************************************************************************
                    global tag level styles
*************************************************************************/
img {
    max-width: 95%;
    max-height: 95%;
}
input, textarea {
    caret-color: #4d4d4d !important;
}
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(155, 155, 155, 0.5);
    border-radius: 20px;
    border: transparent;
}
a {    text-decoration:none;        }


/*************************************************************************
                    global generic class level styles
*************************************************************************/
.overflow-ellipse-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}
.dropdown-item {      
    cursor: pointer;
    transition: all 0.4s;
    white-space: normal;
    max-width: 100%;
}
.dropdown-item:hover {    background: #E1F5FE; transition: all 0.3s;   }
.dropdown-item-selected {   background: #E1F5FE;    }
  
.packshot-img-delete-icon {
    cursor: pointer;
    top: 10% !important;
    left: 80% !important;
}
.compact-btn {
    white-space: normal !important;
    text-overflow: ellipsis;
    overflow: hidden;
}
.page-item {    cursor: pointer;        }
.sidebar-menu-option {    transition: all 0.2s;cursor: pointer;     }
.sidebar-menu-option:hover {    box-shadow: 0 0 4px 4px #0d6efd22;      }
.sidebar-menu-icon {    margin-right: 1em;      } 
.generic-packshot-sub-container {
    max-height: 10em;
    max-width: 15em;
    overflow:visible;
}
.generic-packshot-img-delete-icon {     visibility: hidden;     }
.generic-packshot-sub-container:hover .generic-packshot-img-delete-icon {     visibility: visible;        }

.duplicate-cluster-card {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.2);
}

.duplicate-warning-modal .modal-content {
    border-radius: 12px;
    border: 1px solid #f6b704;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.duplicate-warning-modal .modal-header {
    background-color: #ffc107;
    color: #1f1f1f;
    border-bottom: 1px solid #f1b302;
}

.duplicate-warning-modal .modal-body {
    background-color: #fffdf5;
    color: #2c2c2c;
    font-size: 0.95rem;
}

.duplicate-warning-modal .modal-footer {
    border-top: 1px solid #f1b302;
    background-color: #fffdf5;
}

.duplicate-warning-intro {
    color: #b54708;
}

.duplicate-warning-cluster-name {
    font-weight: 600;
    color: #212529;
    word-break: break-word;
}

.duplicate-warning-modal table thead tr {
    background-color: #ffe08a;
    color: #473406;
}

.duplicate-warning-modal table tbody tr:nth-child(even) {
    background-color: #fff7da;
}

.duplicate-warning-modal table tbody tr:nth-child(odd) {
    background-color: #fffdf5;
}

.duplicate-warning-crop-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.duplicate-warning-crop-link {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.duplicate-warning-crop-link:hover,
.duplicate-warning-crop-link:focus {
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35);
    transform: translateY(-1px);
}

.duplicate-warning-crop-img {
    max-width: 88px;
    max-height: 88px;
    object-fit: cover;
    display: block;
}

.duplicate-warning-confirm-btn {
    font-weight: 600;
    color: #1f1f1f;
    background-color: #ffb703;
    border-color: #ffb703;
}

.duplicate-warning-confirm-btn:hover,
.duplicate-warning-confirm-btn:focus {
    color: #1f1f1f;
    background-color: #ffa826;
    border-color: #ffa826;
}


#mainContainer {
    margin-top: 2%;
    padding:1%;
    caret-color: transparent;
    caret-color: #263238 !important;
}


/*************************************************************************
                    Zoom option for cluster label page
*************************************************************************/

.zoom-container {
    display: none;
    position: fixed;
    border: 0.15em solid #2196F3;
    border-radius: 3%;
    background-size: 200% 200%;
    background-repeat: no-repeat;
    z-index: 1000;
    pointer-events: none;
    padding:0.5em;
}

.zoom-container-arrow {
    content: '';
    position: absolute;
    bottom: -10px; /* Adjust to move the arrow closer or farther from the container */
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent; /* Left side of the triangle */
    border-right: 10px solid transparent; /* Right side of the triangle */
    border-top: 10px solid #2196F3; /* The color of the triangle */
}