/* ===============================
   WHITE UI
================================ */

.ppc-style-white{

    background: transparent;
    border: none;
    padding: 0;
}


/* Label */
.ppc-style-white .ppc-label{

    text-align: left;
    font: normal normal normal 14px/17px "Helvetica Neue";
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}


/* PIN */
.ppc-style-white .ppc-pin{

    width: 48px;
    height: 18px;
    text-align: left;
    font: normal normal normal 12px / 12px "Helvetica Neue";
    letter-spacing: 0px;
    color: #fff;
    opacity: 1;
    border-bottom: 1px dotted #fff !important;
    background: transparent;
    padding: 0px !important;
    margin-right: -5px;
    border: 0px;
}


/* Pen Icon */
.ppc-style-white .ppc-edit{

    width: 12px;
    height: 12px;

    color: #FFFFFF;
    font-size: 12px;

    opacity: 1;
}


/* Status (New Line) */
.ppc-style-white .ppc-status{

     display: inline-flex !important;   /* <br> effect */
    margin-top: 2px;

    width: 48px;
    height: 14px;

    text-align: left;

    font: normal normal normal 12px/14px "Helvetica Neue";
    letter-spacing: 0px;

    color: #12A81E !important;
    opacity: 1;
}
/* ===============================
   BLACK UI
================================ */

.ppc-style-black{

    background: transparent;
    border: none;
    padding: 0;
}


/* Label */
.ppc-style-black .ppc-label{

    width: 162px;
    height: 18px;

    text-align: left;

    font: normal normal normal 16px/18px "Helvetica Neue";
    letter-spacing: 0px;

    color: #000000;
    opacity: 1;
}


/* PIN */
.ppc-style-black .ppc-pin{

    width: 60px;
    height: 18px;
    padding: 0px !important;
    text-align: left;
    font: normal normal normal 16px / 18px "Helvetica Neue";
    letter-spacing: 0px;
    color: #000000;
    opacity: 0.69;
    border: 0px;
    
    border-bottom: 1px dotted #000 !important;
}




/* Pen Icon */
.ppc-style-black .ppc-edit{

    width: 13px;
    height: 13px;
margin-left:-4px !important;
    font-size: 13px;
border-bottom: 1px dotted #000 !important;
    opacity: 1;
}


/* Status */
.ppc-style-black .ppc-status{

    width: 56px;
    height: 16px;

    text-align: left;

    font: normal normal normal 14px/16px "Helvetica Neue";
    letter-spacing: 0px;

    color: #12A81E;
    opacity: 1;
}

/* ===============================
   AVAILABLE ICON FIX
================================ */

.ppc-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* Green Circle */
.ppc-available-icon {

    width: 12px;
    height: 12px;

    background-color: #12A81E;

    border-radius: 50%;

    display: inline-block;

    position: relative;
    
    flex-shrink: 0;
}


/* White Tick */
.ppc-available-icon::after {

    content: "";

    position: absolute;

    left: 4px;
    top: 2px;

    width: 4px;
    height: 7px;

    border: solid #ffffff;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}


/* Available Text */
.ppc-available-text {

    font-size: 14px;
    line-height: 14px;

    font-family: "Helvetica Neue", Arial, sans-serif;

    color: #12A81E;

    opacity: 1;
}


/* Not Available */
.ppc-not-text {

    font-size: 12px;
    line-height: 14px;

    font-family: "Helvetica Neue", Arial, sans-serif;

    color: #ff4d4d;
}
/* ===============================
   SVG PEN ICON
================================ */

.ppc-edit{
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}


/* Icon Size */
.ppc-pen-icon{

    width: 13px;
    height: 13px;
margin-bottom: 7px;
    fill: currentColor; /* important */

    display: block;
}


/* Black UI */
.ppc-style-black .ppc-edit{

    color: #000000;
    opacity: 1;
    margin-right:15px;
}


/* White UI */
.ppc-style-white .ppc-edit{
border-bottom: 1px dotted #ffff;
    padding-bottom: 4px;
    color: #FFFFFF;
    opacity: 1;
}