/* =================== STRIP ================================== */
.strip {
    width: 570px;
    height: 100px;
    background-color: white;
    border: 1px solid #616161;
    cursor: grab;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    touch-action: none;
    box-shadow: 0 0 0 1px black;
}

.strip .button_box {
    display: flex;
    flex-direction: column;

    padding-right: 2px;
}

.strip .button_box button {
    all: unset;
    cursor: pointer;
    border: 1px solid rgb(0, 0, 0); 
    width: 34px;
    height: 32px;
}

.strip .button_box button img {
    width: 34px;
    height: 32px;
}

.strip .button_box button:hover {
   opacity: 0.8;
}

.strip .button_box button:hover {
    background-color: rgb(229, 229, 229);
}

.lower-opacity {
    opacity: 0.5;
}

.sortable-drag {
    -webkit-box-shadow: 5px 5px 0px 3px rgba(184,184,184,0.8); 
box-shadow: 5px 5px 0px 3px rgba(184,184,184,0.8);
}

.strip_content {
    display: flex;
    align-items: center;
    position: relative;
}

.blue { border: 3px solid rgb(3,3,231); }
.red { border: 3px solid rgb(221,13,10); }
.black { border: 3px solid rgb(5, 0, 0); }
.yellow { border: 3px solid rgb(249,248,40); }

/* ============ BIG STRIP =============================================== */
#big_strip {
    width: calc(570px*1.8);
    height: calc(100px*1.8);
    position: absolute;
    z-index: 3;
    cursor: auto;
    -webkit-box-shadow: 5px 5px 0px 3px rgba(184,184,184,0.8); 
    box-shadow: 5px 5px 0px 3px rgba(184,184,184,0.8);
}

#big_strip .button_box img{
    width: calc(34px*1.8);
    height: calc(32px*1.8);
}

#big_strip .button_box button {
    width: calc(34px*1.8);
    height: calc(32px*1.8);
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.mapToLeft {left: 0 !important; }
.mapToRight {right: 0 !important; }
.mapToBottom {bottom: 0 !important; }
.mapToTop {top: 0 !important; }
/* =========================================================== */

#confirm_delete_button, #copy_button, #duplicate_button {
    position: absolute;
    border: 1x solid rgb(128, 128, 128);
    background-color: rgb(235, 235, 235);
    padding: 4px;
    cursor: pointer;
    z-index: 3;
}

.flaggedLeft {
    transform: translateX(-40px);
    -webkit-box-shadow: 40px 0px 0px 0px #98c27f; 
    box-shadow: 40px 0px 0px 0px #8fc76d;
}
.flaggedRight {
    transform: translateX(40px);
    -webkit-box-shadow: -40px 0px 0px 0px #98c27f; 
    box-shadow: -40px 0px 0px 0px #8fc76d;
}

.highlight {
    background-color: rgba(255, 255, 0, 0.274); /* Half-transparent red */
    z-index: 2; /* Make sure it's above the canvas */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* MAKE THE BUTTON BOX SMALLER WHEN STRIP RESIZING */
.smaller {
    transform: scale(0.77) ; 
}