:root {
    --e-alert-one-info-light: #E3FAFF;
    --e-alert-one-warning-light: #FFF2E3;
    --e-alert-one-danger-light: #FFE3E3;

    --e-alert-one-info: #389DE7;
    --e-alert-one-warning: #FFB739;
    --e-alert-one-danger: #FF2A51;
}

.e-alert-one {
    background: #f6f6f6;
    padding: 25px 5px;
    border-radius: 10px;
    display: flex;
}

.e-alert-one .icon {
    min-width: 135px;
    width: 135px;
    min-height: 135px;
    height: 135px;
    border-radius: 100px;
    position: relative;
    background: #eee;
    margin: 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e-alert-one .details .title {
    font-weight: 800;
    color: #888;
    font-size: 24px;
}

.e-alert-one .details ul {
    margin-top: 30px;
    padding: 0 25px;
}

.e-alert-one .details ul li {
    margin-bottom: 10px;
    list-style: none;
    position: relative;

}

.e-alert-one .details ul li::before {
    content: '' !important;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #888;
    position: absolute;
    top: 4px;
    left: -25px;
}


/* alert info*/
.e-alert-one.info {
    background: var(--e-alert-one-info-light);
}

.e-alert-one.info .icon {
    background: var(--e-alert-one-info);
}

.e-alert-one.info .icon::before {
    content: url("data:image/svg+xml,%3Csvg width='83' height='74' viewBox='0 0 83 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72.2085 25.0414L67.1668 27.2913L66.0834 27.7913L63.1251 29.083L41.7918 38.5831C41.2502 38.8331 40.7501 38.958 40.1668 39.0414C39.2918 39.208 38.3752 39.208 37.5002 39.0414C36.9168 38.958 36.4168 38.8331 35.8751 38.5831L14.5418 29.083L11.5835 27.7913L10.5001 27.2913L5.4585 25.0414C1.41683 23.2498 1.41683 18.6663 5.4585 16.8747L35.8751 3.33301C37.7084 2.58301 39.9585 2.58301 41.7918 3.33301L72.2085 16.8747C76.2501 18.6247 76.2501 23.2498 72.2085 25.0414Z' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M63.1251 29.083V45.0414C63.1251 46.4581 62.4584 47.7916 61.2501 48.5832C57.3334 51.1666 49.4585 55.3747 38.8335 55.3747C35.5835 55.3747 26.0002 54.9999 16.4168 48.5832C15.2502 47.7916 14.5835 46.4581 14.5835 45.0414V29.1247L35.9168 38.6248C36.4585 38.8748 36.9585 38.9998 37.5419 39.0831C38.4169 39.2498 39.3335 39.2498 40.2085 39.0831C40.7918 38.9998 41.2919 38.8748 41.8335 38.6248L63.1251 29.083Z' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M75.25 20.958V58.4163' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M75.2502 50.9995C71.1668 50.9995 67.8335 54.333 67.8335 58.4163C67.8335 62.4996 71.1668 65.8328 75.2502 65.8328C79.3335 65.8328 82.6668 62.4996 82.6668 58.4163C82.6668 54.333 79.3335 50.9995 75.2502 50.9995Z' fill='white'/%3E%3Cpath d='M75.25 62.708V71.2496' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.e-alert-one.info .details .title {
    color: var(--e-alert-one-info);
}

.e-alert-one.info .details ul li::before {
    background: var(--e-alert-one-info);
}

/* alert warning*/
.e-alert-one.warning {
    background: var(--e-alert-one-warning-light);
}

.e-alert-one.warning .icon {
    background: var(--e-alert-one-warning);
}

.e-alert-one.warning .icon::before {
    content: url("data:image/svg+xml,%3Csvg width='92' height='92' viewBox='0 0 92 92' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M62.0616 56.4266L52.67 47.035L44.4666 38.8317L34.96 29.325' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34.9604 72.6799L59.3787 53.7049L37.682 32.0466L18.707 56.4266L34.9604 72.6799Z' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28.7119 78.9668L34.9985 72.6801L18.7452 56.4268L12.4585 62.7134C9.92854 65.2434 9.92854 69.3067 12.4585 71.8367L19.5885 78.9668C22.0802 81.4968 26.1819 81.4968 28.7119 78.9668Z' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M35.6118 73.3315L43.7385 81.4582' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M52.1717 39.215C53.6667 40.71 53.705 43.125 52.1717 44.62C51.865 44.9267 51.4817 45.2334 51.0217 45.3867L46 40.365C46.1533 39.9434 46.4217 39.56 46.7667 39.215C48.3 37.6817 50.6767 37.72 52.1717 39.215Z' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M81.4587 43.125H73.792' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72.4886 19.5117L65.9336 26.0667' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.875 10.5417V18.2084' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.e-alert-one.warning .details .title {
    color: var(--e-alert-one-warning);
}

.e-alert-one.warning .details ul li::before {
    background: var(--e-alert-one-warning);
}

/* alert danger*/
.e-alert-one.danger {
    background: var(--e-alert-one-danger-light);
}

.e-alert-one.danger .icon {
    background: var(--e-alert-one-danger);
}

.e-alert-one.danger .icon::before {
    content: url("data:image/svg+xml,%3Csvg width='18' height='87' viewBox='0 0 18 87' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='9' cy='78.5' rx='9' ry='8.5' fill='white'/%3E%3Cpath d='M9 52V8' stroke='white' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E%0A");;
}

.e-alert-one.danger .details .title {
    color: var(--e-alert-one-danger);
}

.e-alert-one.danger .details ul li::before {
    background: var(--e-alert-one-danger);
}


/* Responsive Style */
@media only screen and (max-width: 768px) {

    .e-alert-one {
        flex-direction: column;
    }
    .e-alert-one .icon {
        margin: 0 auto !important;
    }
    .e-alert-one .title {
        text-align: center;
        margin-bottom: 30px;
        margin-top: 10px;
    }
    .e-alert-one .icon {
        width: 85px;
        min-width: 85px;
        height: 85px;
        min-height: 85px;
    }
    .e-alert-one .icon::before {
        position: relative;
        transform: scale(.6);
    }
}


/* RTL */
[dir="rtl"] .e-alert-one .details ul li::before {
    left: unset;
    right: -25px;
}