Size of the close X

Hi,
This css works for me
With that, I took the button out of the box and rounded it up, and the “X” is bigger.

.et_pb_section.popup .evr-close_wrap {
    position: absolute;
    right: -30px;
    top: -30px;
    opacity: .2;
    z-index: 100;
    text-align: right;
    transition: opacity .6s .3s;
}
.et_pb_section.popup .evr-close {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-family: "Courier New",monospace;
    font-size: 30px;
    /* font-weight: 700; */
    cursor: pointer;
    color: #fefefe;
    background: #333;
    opacity: .7;
    box-shadow: 0 0 3px 1px #00000008;
    transition: all .3s;
    border-radius: 50px;
    border: #fefefe 2px solid;
}

I tried

.da-close {
font-size:30px !important;
}

That did the job.

Hello @jrockoford234

Apologize for the inconvenience!

Yes, as explained above by some of the divimode members, it can be done from the following:

.area-outer-wrap .da-close {
color: red!important; transform: scale(1.25);
}

.area-outer-wrap .da-close:hover {
color: green!important;
}

Please feel free to get back to me, in-case of any query.

Regards,
Syed

Thank you all so much! That worked.

Ha! I tried .da-close {font-size:30px; } and didn’t work because I left !important out, and !important is obviously really important. I shall never forget !important ever again ??

Another question: How do I get rid of the gray square framing the X when you hover? Is it a border? I tried border:transparent !important; but did not work. Thanks!

… I think I may have figured it out: box-shadow: none !important;