#dhub .dhb-frame_workspace_const .ws-buttons_container{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 16px 0;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

#dhub .dhb-frame_workspace_const >.box-title{
    text-align: center;
    color: rgb(24,24,24);
    margin: 12px 0;
    padding: 12px 8px;
    border-radius: 10px;
    background-color: rgba(1,32,96,0.03);
    box-sizing: border-box;
    position: relative;
    font-size: 0.98em;
    font-weight: normal;
}

#dhub .dhb-frame_workspace_const .box-title > font {
    font-family: Acme;
    display: block;
    padding: 5px 0;
    text-transform: uppercase;
    font-size: 1.1em;
    color: rgb(1,32,96);
}

#dhub .dhb-frame_workspace_const .box-title > span {
    font-size: 0.87em;
    font-style: italic;
    color: rgba(1,32,96,0.8);
    font-family: 'Noto Sans';
}

#dhub .dhb-frame_workspace_const .ws-buttons_container >dhbbutton{
    cursor: default;
    position: relative;
    box-sizing: border-box;
    vertical-align: top;
    height: max-content;
    padding: 8px;
    display: inline-flex;
    flex-direction: column;
    background-color: rgba(1,32,96,0.06);
    box-shadow: 1px 1px 3px rgba(238, 237, 237, 0.04);
    border-radius: 10px;
    align-items: center;
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton > .icon,
#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton > .name,
#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton > .desc{
    display: block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton > .icon{
    height: 80px;
    border-radius: 10px;
    margin-bottom: 4px;
    text-align: left;
}


#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton >.name{
    position: relative;
    font-size: 1.2em; 
    font-family: Acme;
    max-height: 20%;
    height: max-content;
    color: rgb(244,244,244);
    text-shadow: 0 2px 3px rgba(24,24,24,0.2);
}


#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton > .desc{ 
    max-height: 30%;
    height: max-content;
    font-family: 'Noto Sans';
    font-size: 0.88em;
    color: rgba(244,244,244,0.8);
    text-shadow: 0 1px 3px rgba(24,24,24,0.5);
}



#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton:hover {
    box-shadow: 0px 4px 1.2px rgb(56, 0, 87);
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton:hover > .name {
    color: rgb(244,244,244);
    text-shadow: 0 2px 3px rgba(24,24,24,0.2);
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton:hover > .desc {
    color: rgba(244,244,244,0.8);
    text-shadow: 0 2px 3px rgba(24,24,24,0.2);
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton  > .icon:before {
    content: '';
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-color: rgba(1,32,96,0.08);
    background-position: center;
    box-sizing: inherit;
    left: 50%;
    transform: translateX(-50%);
}


#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="finance"] > .icon:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="rgb(244,244,244)"><path d="M200-280v-280h80v280h-80Zm240 0v-280h80v280h-80ZM80-120v-80h800v80H80Zm600-160v-280h80v280h-80ZM80-640v-80l400-200 400 200v80H80Zm178-80h444-444Zm0 0h444L480-830 258-720Z"/></svg>');
    background-size: 60%;
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="finance"] {
    background-color: rgb(52, 152, 219);
}


#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="community"] > .icon:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="rgb(244,244,244)"><path d="M360-320q33 0 56.5-23.5T440-400q0-33-23.5-56.5T360-480q-33 0-56.5 23.5T280-400q0 33 23.5 56.5T360-320Zm240 0q33 0 56.5-23.5T680-400q0-33-23.5-56.5T600-480q-33 0-56.5 23.5T520-400q0 33 23.5 56.5T600-320ZM480-520q33 0 56.5-23.5T560-600q0-33-23.5-56.5T480-680q-33 0-56.5 23.5T400-600q0 33 23.5 56.5T480-520Zm0 440q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
    background-size: 60%;
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="community"] {
    background-color: rgb(46, 204, 113);
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="service"] > .icon:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="rgb(244,244,244)"><path d="M480-400ZM80-160v-400q0-33 23.5-56.5T160-640h120v-80q0-33 23.5-56.5T360-800h240q33 0 56.5 23.5T680-720v80h120q33 0 56.5 23.5T880-560v400H80Zm240-200v40h-80v-40h-80v120h640v-120h-80v40h-80v-40H320ZM160-560v120h80v-40h80v40h320v-40h80v40h80v-120H160Zm200-80h240v-80H360v80Z"/></svg>');
    background-size: 60%;
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="service"] {
    background-color: rgb(243, 156, 18);
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="user"] > .icon:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="rgb(244,244,244)"><path d="M400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18h14q6 0 12 2-8 18-13.5 37.5T404-360h-4q-71 0-127.5 18T180-306q-9 5-14.5 14t-5.5 20v32h252q6 21 16 41.5t22 38.5H80Zm560 40-12-60q-12-5-22.5-10.5T584-204l-58 18-40-68 46-40q-2-14-2-26t2-26l-46-40 40-68 58 18q11-8 21.5-13.5T628-460l12-60h80l12 60q12 5 22.5 11t21.5 15l58-20 40 70-46 40q2 12 2 25t-2 25l46 40-40 68-58-18q-11 8-21.5 13.5T732-180l-12 60h-80Zm40-120q33 0 56.5-23.5T760-320q0-33-23.5-56.5T680-400q-33 0-56.5 23.5T600-320q0 33 23.5 56.5T680-240ZM400-560q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Zm12 400Z"/></svg>');
    background-size: 60%;
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="user"] {
    background-color: rgb(231, 76, 60);
}


#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="humans_resource"] > .icon:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="rgb(244,244,244)"><path d="M480-480Zm0 360q-18 0-34.5-6.5T416-146L148-415q-35-35-51.5-80T80-589q0-103 67-177t167-74q48 0 90.5 19t75.5 53q32-34 74.5-53t90.5-19q100 0 167.5 74T880-590q0 49-17 94t-51 80L543-146q-13 13-29 19.5t-34 6.5Zm40-520q10 0 19 5t14 13l68 102h166q7-17 10.5-34.5T801-590q-2-69-46-118.5T645-758q-31 0-59.5 12T536-711l-27 29q-5 6-13 9.5t-16 3.5q-8 0-16-3.5t-14-9.5l-27-29q-21-23-49-36t-60-13q-66 0-110 50.5T160-590q0 18 3 35.5t10 34.5h187q10 0 19 5t14 13l35 52 54-162q4-12 14.5-20t23.5-8Zm12 130-54 162q-4 12-15 20t-24 8q-10 0-19-5t-14-13l-68-102H236l237 237q2 2 3.5 2.5t3.5.5q2 0 3.5-.5t3.5-2.5l236-237H600q-10 0-19-5t-15-13l-34-52Z"/></svg>');
    background-size: 60%;
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="humans_resource"] {
    background-color: rgb(155, 89, 182);
}


#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="invoice"] > .icon:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="rgb(244,244,244)"><path d="M240-80q-50 0-85-35t-35-85v-120h120v-560l60 60 60-60 60 60 60-60 60 60 60-60 60 60 60-60 60 60 60-60v680q0 50-35 85t-85 35H240Zm480-80q17 0 28.5-11.5T760-200v-560H320v440h360v120q0 17 11.5 28.5T720-160ZM360-600v-80h240v80H360Zm0 120v-80h240v80H360Zm320-120q-17 0-28.5-11.5T640-640q0-17 11.5-28.5T680-680q17 0 28.5 11.5T720-640q0 17-11.5 28.5T680-600Zm0 120q-17 0-28.5-11.5T640-520q0-17 11.5-28.5T680-560q17 0 28.5 11.5T720-520q0 17-11.5 28.5T680-480ZM240-160h360v-80H200v40q0 17 11.5 28.5T240-160Zm-40 0v-80 80Z"/></svg>');
    background-size: 60%;
}

#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton[data-target="invoice"] {
    background-color: rgb(153, 102, 0);
}


#dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton > .trigger {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
 
@media only screen and (max-width: 524px) {
    #dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton >.name {
        max-height: 30%;
        line-height: 1.15em
    }
}

@media only screen and (max-width: 448px) {
    #dhub .dhb-frame_workspace_const .ws-buttons_container dhbbutton > .desc {
        font-size: 0.78em;
        top: 3px
    }
}