/* =========================================================
    BRIEFCASE OBJECT
    ========================================================= */

.briefcase-object {
    width: 86px;
    min-height: 72px;
}

/* =========================================================
   BRIEFCASE GRAPHIC
   ========================================================= */

.briefcase-graphic {
    position: relative;

    width: 66px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   BRIEFCASE BODY
   ========================================================= */

.briefcase-body {
    position: relative;

    width: 52px;
    height: 34px;

    box-sizing: border-box;

    border: 2px solid #fff;
    background: #111;
}

/* =========================================================
   HANDLE
   ========================================================= */

.briefcase-handle {
    position: absolute;

    left: 16px;
    top: -9px;

    width: 20px;
    height: 10px;

    box-sizing: border-box;

    border: 2px solid #fff;
    border-bottom: 0;
}

/* =========================================================
   CENTER SEAM
   ========================================================= */

.briefcase-seam {
    position: absolute;

    left: 50%;
    top: 0;
    bottom: 0;

    width: 1px;

    background: #fff;

    transform: translateX(-50%);
}

/* =========================================================
   LATCHES
   ========================================================= */

.briefcase-latch {
    position: absolute;

    top: 13px;

    width: 6px;
    height: 8px;

    box-sizing: border-box;

    border: 1px solid #fff;
}

.briefcase-latch.left {
    left: 12px;
}

.briefcase-latch.right {
    right: 12px;
}

/* =========================================================
   BRIEFCASE OPEN CAPABILITY
   ========================================================= */

.briefcase-open-capability {
    width: 110px;
    min-height: 82px;
}

.briefcase-open-graphic {
    position: relative;

    width: 72px;
    height: 52px;

    margin: 0 auto;
}

/* Open lid */

.briefcase-open-lid {
    position: absolute;

    left: 8px;
    top: 4px;

    width: 54px;
    height: 20px;

    box-sizing: border-box;

    border: 2px solid #fff;

    transform:
        rotate(-12deg)
        skewX(-8deg);
}

/* Case body */

.briefcase-open-body {
    position: absolute;

    left: 10px;
    bottom: 3px;

    width: 54px;
    height: 25px;

    box-sizing: border-box;

    border: 2px solid #fff;
    background: #111;
}

/* Hinges */

.briefcase-open-hinge {
    position: absolute;

    bottom: 23px;

    width: 5px;
    height: 5px;

    border: 1px solid #fff;
}

.briefcase-open-hinge.left {
    left: 14px;
}

.briefcase-open-hinge.right {
    right: 14px;
}

.briefcase-close-capability {
    width: 110px;
    min-height: 82px;
}

.briefcase-close-graphic {
    position: relative;
    width: 72px;
    height: 52px;
    margin: 0 auto;
}

/* closed case body */

.briefcase-close-body {
    position: absolute;

    left: 10px;
    bottom: 5px;

    width: 54px;
    height: 30px;

    box-sizing: border-box;

    border: 2px solid #fff;
    background: #111;
}

/* lid */

.briefcase-close-lid {
    position: absolute;

    left: 10px;
    top: 10px;

    width: 54px;
    height: 8px;

    box-sizing: border-box;

    border: 2px solid #fff;
    background: #111;
}

/* center seam */

.briefcase-close-body::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;
    bottom: 0;

    width: 1px;

    background: #fff;

    transform: translateX(-50%);
}

/* latch */

.briefcase-close-latch {
    position: absolute;

    left: 33px;
    top: 23px;

    width: 7px;
    height: 8px;

    box-sizing: border-box;

    border: 1px solid #fff;
}

.briefcase-navigation {
    margin-top: 20px;
}

.briefcase-return-room-capability {
    width: 110px;
    min-height: 82px;
    cursor: pointer;
}

.briefcase-return-room-graphic {
    width: 72px;
    height: 52px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.briefcase-return-room-arrow {
    font-size: 32px;
    color: #fff;
}

.briefcase-return-room-capability .world-object-label {
    text-align: center;
}