@layer components {
    .dropify-wrapper {
        @apply border-2 border-custom-grey-300 border-dashed !important;
    }

    .custom-dropify-wrapper .dropify-wrapper {
        @apply !border-none;
    }

    dt{
        @apply clear-both font-bold;
    }

    dd{
        @apply m-0 mb-8;
    }

    span.action-links{
        @apply text-sm font-normal;
    }

    ul.tree-overview, ul.tree-overview ul{
        @apply m-0 p-0 list-none bg-custom-blue-25 w-60 border-b border-custom-blue-400
    }

    ul.tree-overview ul{
        margin-left: 13.87em;
        margin-top: -2em;
    }

    ul.tree-overview li{
        @apply m-0 p-4 border border-custom-blue-400 text-center border-b-0 text-sm-medium text-custom-grey-900;
    }

    ul.tree-overview li a, p.top-links{
        @apply text-sm;
    }
    li.missing-content{
        @apply bg-custom-orange-25 !border-custom-orange-200;
    }


    /* Organogram */

    .orgchart {
        @apply bg-transparent;
    }
    .orgchart .hierarchy::before,
    .orgchart .nodes.vertical .hierarchy::after,
    .orgchart .nodes.vertical .hierarchy::before {
        @apply border-t-2 border-solid border-custom-grey-300;
    }

    #chart-container {
        @apply top-0;
    }

    .orgchart>ul>li>ul li>.node::before,
    .orgchart .node:not(:only-child)::after,
    .orgchart .nodes.vertical::before {
        @apply bg-custom-grey-300;
    }

    .orgchart ul li .node:hover,
    .orgchart .node.focused {
        @apply bg-transparent;
    }

    .orgchart .node .edge::before {
        @apply border-custom-orange-300;
    }

    .orgchart .edge:hover::before {
        @apply border-custom-orange-500;
    }

    .orgchart .delete-menu-icon,
    .orgchart .edit-menu-icon, .orgchart .create-menu-icon {
        @apply text-custom-orange-500
    }

    #modal-cropper #cropper-image{ @apply contents;}
    #modal-cropper img, .cropper-bg{ @apply min-h-[540px] block;}

    .tox .tox-toolbar__group { @apply !p-0 !px-1;}

    .profile-img .dropify-wrapper { @apply max-w-[186px];}
    [contenteditable=true]:empty:before { @apply text-custom-grey-500 text-md-regular; }

    .dot-opacity-loader span {
        @apply bg-custom-orange-500;
    }

    .hidden-tool {
        @apply hidden;
    }

    .context-menu-list {
        @apply !z-[350];
    }
}