/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.wpte-expand-extra-service{
    position: relative;
    cursor: pointer;
}

.wpte-expand-extra-service:after{
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 20px;
    content: '';
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 320 512'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") center center no-repeat;
    pointer-events: none;
}

.extra-service-repeater .dashicons-no {
    border: none;
    color: red;
    width: 25px;
}

.extra-service-repeater {
    border: 1px solid #ddd;
    padding: 5px 0 5px 0;
    margin: 10px 0 10px 0;
    cursor: pointer;
}

.extra-service-holder {
    border: 1px solid #ddd;
    padding: 5px 5px;
    margin: 5px;
}
.extra-service-template span.extra-service-name {
    font-weight: bold;
    margin: 0 10px;
}

.extra-service-template .extra-service-repeater {
    padding: 10px;
}

.extra-service-wrap .tooltip{
    width: 15px;
    height: 20px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238d8d8d' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z'/%3E%3C/svg%3E") center center no-repeat;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.extra-service-wrap .tooltip-content{
    /*display: none;*/
    position: absolute;
    bottom: 30px;
    left: -138px;
    width: 220px;
    background: #000;
    color: #fff;
    border-radius: 5px;
    padding: 3px 15px;
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-transition: ease 0.2s;
    -moz-transition: ease 0.2s;
    transition: ease 0.2s;
}

.extra-service-wrap .tooltip-content:after{
    position: absolute;
    bottom: -4px;
    right: 71px;
    width: 8px;
    height: 8px;
    background: #000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '';
}

.extra-service-wrap .tooltip:hover .tooltip-content{
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}