@import (reference) '~antd/es/style/themes/index';
.serviceList{
    display: flex;
    flex-wrap: wrap;
    .cardBox{     
        min-width: 300px;   
        width: calc(25% - 15px);
        margin-right: 15px;
        margin-bottom: 15px;
    }
    .statusCircel{
        display: inline-block;
        height: 10px;
        width: 10px;
        border-radius: 10px;
        margin-right: 5px;
        flex-shrink: 0;
    }

    .statusProcessing{
        position: relative;
        color: #1677ff;
        background-color: #1677ff;
        &:after{
            position: absolute;
            top: 0;
            inset-inline-start: 0;
            width: 100%;
            height: 100%;
            border-width: 1px;
            border-style: solid;
            border-color: inherit;
            border-radius: 50%;
            animation-name: antStatusProcessing;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            content: "";
        }
    }
    .alertWrap{
        position: absolute;
        top: 4px;
        right: 8px;
        color: var(--cloudeon-red-color);
        // font-size: 18px;
    }
}

:global {
    .ant-popover-placement-right{
        padding-left: 0px !important;
    }
}
.cardClickText{
    width: 100%;
    // font-weight: 600;
    color: var(--cloudeon-primary-color);
}
.actionSelects{
    background-color: #ffffff;
    line-height: 30px;
    width: 100%;
    padding: 5px 0;
    .actionItem{
        width: 100%;
        line-height: 30px;
        padding: 2px 10px 2px 15px;
        color: rgba(0, 0, 0, 1);
        // display: flex;
        // align-items: center;
        // justify-content: center;
        cursor: pointer;
        &:hover{
            color: var(--cloudeon-primary-color);
        }
    }
    .clickedItem{
        color: var(--cloudeon-primary-color);
    }
}

.dropdownContent {
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,8%), 0 9px 28px 8px rgba(0,0,0,5%);
}
.dropdownContent .ant-dropdown-menu {
    box-shadow: none;
}

.alertText{
    color: var(--cloudeon-red-color) !important;
}

@-webkit-keyframes antStatusProcessing {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .9
    }
 
    to {
        -webkit-transform: scale(2.4);
        transform: scale(2.4);
        opacity: 0
    }
}
 
@keyframes antStatusProcessing {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .9
    }
 
    to {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0
    }
}