/* =========================================================
    PRIVATE ROOM ACCESS OBJECT
    Object-specific styling only.
    Shared object behavior comes from objects.css.
    ========================================================= */

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

/* =========================================================
   ROOM ACCESS GRAPHIC
   ========================================================= */

.room-graphic {
    width: 66px;
    height: 48px;

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

    position: relative;
}

/* =========================================================
   ACCESS CARD
   ========================================================= */

.room-access-card {
    position: relative;

    width: 42px;
    height: 30px;

    box-sizing: border-box;

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

/* Card stripe */

.access-card-stripe {
    position: absolute;

    left: 0;
    right: 0;
    top: 7px;

    height: 4px;

    background: #fff;
}

/* Card chip */

.access-card-chip {
    position: absolute;

    left: 7px;
    bottom: 6px;

    width: 8px;
    height: 6px;

    border: 1px solid #fff;
}

/* Small identity mark */

.access-card-mark {
    position: absolute;

    right: 7px;
    bottom: 7px;

    width: 8px;
    height: 8px;

    border: 1px solid #fff;
}

/* =========================================================
   ROOM READER
   ========================================================= */

.room-reader {
    position: absolute;

    right: 1px;
    top: 9px;

    width: 12px;
    height: 30px;

    box-sizing: border-box;

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

.reader-light {
    position: absolute;

    left: 3px;
    top: 8px;

    width: 4px;
    height: 4px;

    background: #fff;
}