.hh-cancel-btn {
    min-width: var(--denso-button-min-width);
    height: var(--denso-button-height);
    min-height: var(--denso-button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 18px;
    background: #BCD5FF;
    color: #434655;
    font-weight: 600;
    border: 1px solid #5a55554d;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s ease;
}

 .hh-cancel-btn:hover {
     background: #a9c8ff;
     color: #434655;
 }

 .hh-cancel-btn:focus,
 .hh-cancel-btn:active {
     background: #BCD5FF;
     color: #434655;
     box-shadow: 0 0 0 .2rem rgba(188, 213, 255, .35);
 }

 .hh-device {
     display: flex;
     flex-direction: column;

     height: 100%;
     min-height: 360px;

     border: 1px solid #C3C6D6;
     border-radius: 16px;

     overflow: hidden;
 }

 .hh-device.hh-device-selected {
     border: 2px solid #004AC6;
     box-shadow: 0 8px 20px rgba(0, 74, 198, .15);
 }

 .hh-select-device-btn.selected {
     background: #004AC6;
     color: #FFFFFF;
 }

 .hh-select-device-btn.selected:hover {
     background: #003D9B;
     color: #FFFFFF;
 }

 .hh-device .hh-select-device-btn {
     width: 100%;
     height: 52px;
     border: none;
     border-radius: 8px;
     background: #E9EDFF;
     color: #003D9B;
     font-size: 16px;
     font-weight: 600;
     margin-top: auto;
     transition: all .2s ease;
 }

 .hh-device .hh-select-device-btn:hover {
     background: #D8E3FF;
     color: #003D9B;
 }

 .hh-device-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 20px;
 }

 .hh-device img,
 .hh-device-placeholder {
     width: 100%;
     height: 180px;
     object-fit: contain;

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

     background: #F7F8FC;
 }

 .hh-action.hh-disabled {
     opacity: .45;
     pointer-events: none;
     cursor: not-allowed;
     background: #e9ecef;
     border-color: #ced4da;
     color: #6c757d !important;
 }

 .hh-action.hh-disabled i {
     color: #6c757d !important;
 }

 button.hh-disabled:disabled {
     opacity: .45;
     cursor: not-allowed;
 }

 .hh-purple {
    background: #9b7cf5;
}

.hh-orange {
    background: #ff9f43;
}

.hh-teal {
    background: #2ec4b6;
}

.hh-pink {
    background: #f472b6;
}

.hh-cyan {
    background: #4dc9f6;
}

.hh-brown {
    background: #b08968;
}

.hh-dark-red {
    background: #c64e41;
}

.hh-indigo {
    background: #5c6bc0;
}

.tm-remove {
    height: 30px;
    width: 30px;
}