/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.woocommerce .extra-flate-tool-tip{display:inline;position:relative;}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip]{position:relative;z-index:2;cursor:pointer;}

/* Hide the tooltip content by default */
[data-tooltip]:before,[data-tooltip]:after{visibility:hidden;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;pointer-events:none;}

/* Position tooltip above the element */
[data-tooltip]:before{position:absolute;bottom:150%;left:50%;margin-bottom:5px;margin-left:-80px;padding:7px;width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#000;background-color:hsla(0,0%,20%,0.9);color:#fff;content:attr(data-tooltip);text-align:center;font-size:14px;line-height:1.2;}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after{position:absolute;bottom:150%;left:50%;margin-left:-5px;width:0;border-top:5px solid #000;border-top:5px solid hsla(0,0%,20%,0.9);border-right:5px solid transparent;border-left:5px solid transparent;content:" ";font-size:0;line-height:0;}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;}
.extra-flate-tool-tip{display:inline-block!important;margin-right:7px;}

/**
* Optional fee CSS 
*/
.checbox_row span.title_fee{padding-left:8px;}
.checbox_row span.title_fee:hover,.dropdown_row span.title_fee:hover{cursor:pointer;}
.wcpfc-fee-tooltiptext{display:none;}
.wcpfc-fee-tooltip-wrap{position:relative;display:inline-block;}
.wcpfc-fee-tooltip-wrap .wcpfc-fee-tooltiptext{width:120px;background-color:#555;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1;top:100%;left:50%;margin-left:-60px;transition:opacity 0.3s;}
.wcpfc-fee-tooltip-wrap .wcpfc-fee-tooltiptext::after{content:"";position:absolute;top:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #555 transparent;}
.wcpfc-fee-tooltip-wrap .dashicons,.dashicons-before:before{vertical-align:middle;font-size:16px;cursor:pointer;}
.optional_fee_container .checbox_row,.optional_fee_container .dropdown_row{padding:1.41575em;float:none;width:100%;background:#f5f5f5;cursor:pointer;}
.optional_fee_container .checbox_row:hover,.optional_fee_container .dropdown_row:hover{background:#f0f0f0;}
.optional_fee_container .optional_row:nth-child(odd){background:#fafafa;}
.optional_fee_container .optional_row:last-child{margin-bottom:2.617924em;}
.optional_fee_container .input-dropdown{padding:5px;border-radius:5px;margin-left:10px;}
.optional_fee_container .optional_fee_description{margin:0;margin-top:10px;font-style:italic;font-size:14px;}

/* Tooltip new styles */
.extra-flate-tool-tip a{cursor:pointer;}
.extra-flate-tool-tip .tooltip{position:absolute;bottom:135%;left:50%;margin-bottom:5px;margin-left:-80px;padding:7px;width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#000;background-color:hsla(0,0%,20%,0.9);color:#fff;text-align:center;font-size:14px;line-height:1.2;opacity:0;visibility:hidden;}
.extra-flate-tool-tip .tooltip::after{position:absolute;bottom:-5px;left:26.5%;margin-left:-5px;width:0;border-top:5px solid #000;border-top:5px solid hsla(0,0%,20%,0.9);border-right:5px solid transparent;border-left:5px solid transparent;content:" ";font-size:0;line-height:0;}
.extra-flate-tool-tip:hover .tooltip{visibility:visible;opacity:1;}

@media (max-width:400px){
    .extra-flate-tool-tip a[data-tooltip]:before{width:200px;}
    .extra-flate-tool-tip a[data-tooltip]:before{left:auto;right:-15px;}

    .extra-flate-tool-tip .tooltip{left:auto;right:-15px;width:200px;}
    .extra-flate-tool-tip .tooltip::after{left:87.5%;}
}
@media (max-width:960px){
    .optional_fee_container .input-dropdown{margin-top:10px;margin-left:0;display:block;width:100%;}
}