/**
prevent focus box shadow on cookiebanner preview
 */
a.cc-btn:focus {
  box-shadow: 0 0 0 0 #fff, 0 0 0 0 rgba(0, 0, 0, 0);
  outline: 0px solid transparent;
}

/*
    show edit buttons in WP table class

*/
.wrap.cookie-warning .row-actions{
    left:0;
}
/*
    Hide nags from other plugins
*/
.error, .notice, .update-nag, .notice-info {
    &:not(.really-simple-plugins) {
        display: none !important;
    }
}
/*
Tabs
*/

.cmplz-tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;

    button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        &:hover {
            background-color: #ddd;
        }
        &.active {
            background-color: #2daee1;
            color:#fff;

        }
    }
}

/* Style the tab content */
.cmplz-tabcontent {
    display: none;
    float:left;
    width:100%;
    > div {
	  padding: 6px 12px;
	}
    border: 1px solid #ccc;
    border-top: none;
    background-color:#fff;
    &.active {
        display:block;
    }
    margin-bottom:30px;
}

.cmplz-settings input[name="cmplz_reset_settings"], .cmplz-reset{

    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    &:hover{
            background-color: darken(#dc3545,10%) !important;
            border-color: darken( #dc3545,10%) !important;
        }
    }


table {
    .cmplz-cookie-variations {
        margin-bottom: 20px;
        tr {
            &.selected {
                background-color:black;
                a {
                    color:white;
                }
            }
            td {
                padding: 8px 10px;
                a {

                    display: block;
                    width: 100%;
                }
                input[type=text] {
                    width:300px;
                    height:30px;
                }
                button {
                    float:right;
                }
            }
        }

    }
}

#complianz .dashboard .fa-times{
    color:red;
}

#complianz .dashboard .fa-check{
    color:green;
}
.cmplz_multiple{
    width:300px;
    height:150px;
}

.detected-cookies table td {
    padding:0;
}


/* cmplz-cmplz-tooltip for settings page */
/* Base styles for the element that has a cmplz-tooltip */
[data-cmplz-tooltip],
.cmplz-tooltip {
    position: relative;
    cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-cmplz-tooltip]:before,
[data-cmplz-tooltip]:after,
.cmplz-tooltip:before,
.cmplz-tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition:
            opacity 0.2s ease-in-out,
            visibility 0.2s ease-in-out,
            -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:
            opacity 0.2s ease-in-out,
            visibility 0.2s ease-in-out,
            -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:
            opacity 0.2s ease-in-out,
            visibility 0.2s ease-in-out,
            transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
    pointer-events: none;
}

/* Show the entire cmplz-tooltip on hover and focus */
[data-cmplz-tooltip]:hover:before,
[data-cmplz-tooltip]:hover:after,
[data-cmplz-tooltip]:focus:before,
[data-cmplz-tooltip]:focus:after,
.cmplz-tooltip:hover:before,
.cmplz-tooltip:hover:after,
.cmplz-tooltip:focus:before,
.cmplz-tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* Base styles for the cmplz-tooltip's directional arrow */
.cmplz-tooltip:before,
[data-cmplz-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Base styles for the cmplz-tooltip's content area */
.cmplz-tooltip:after,
[data-cmplz-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    width: 160px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-cmplz-tooltip);
    font-size: 14px;
    line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-cmplz-tooltip]:before,
[data-cmplz-tooltip]:after,
.cmplz-tooltip:before,
.cmplz-tooltip:after,
.cmplz-tooltip-top:before,
.cmplz-tooltip-top:after {
    bottom: 100%;
    left: 50%;
}

[data-cmplz-tooltip]:before,
.cmplz-tooltip:before,
.cmplz-tooltip-top:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: #000;
    border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom cmplz-tooltips */
[data-cmplz-tooltip]:after,
.cmplz-tooltip:after,
.cmplz-tooltip-top:after {
    margin-left: -80px;
}

[data-cmplz-tooltip]:hover:before,
[data-cmplz-tooltip]:hover:after,
[data-cmplz-tooltip]:focus:before,
[data-cmplz-tooltip]:focus:after,
.cmplz-tooltip:hover:before,
.cmplz-tooltip:hover:after,
.cmplz-tooltip:focus:before,
.cmplz-tooltip:focus:after,
.cmplz-tooltip-top:hover:before,
.cmplz-tooltip-top:hover:after,
.cmplz-tooltip-top:focus:before,
.cmplz-tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform:    translateY(-12px);
    transform:         translateY(-12px);
}

/* Left */
.cmplz-tooltip-left:before,
.cmplz-tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
}

.cmplz-tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 20%, 0.9);
}

.cmplz-tooltip-left:hover:before,
.cmplz-tooltip-left:hover:after,
.cmplz-tooltip-left:focus:before,
.cmplz-tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform:    translateX(-12px);
    transform:         translateX(-12px);
}

/* Bottom */
.cmplz-tooltip-bottom:before,
.cmplz-tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.cmplz-tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.cmplz-tooltip-bottom:hover:before,
.cmplz-tooltip-bottom:hover:after,
.cmplz-tooltip-bottom:focus:before,
.cmplz-tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform:    translateY(12px);
    transform:         translateY(12px);
}

/* Right */
.cmplz-tooltip-right:before,
.cmplz-tooltip-right:after {
    bottom: 50%;
    left: 100%;
}

.cmplz-tooltip-right:before {
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 20%, 0.9);
}

.cmplz-tooltip-right:hover:before,
.cmplz-tooltip-right:hover:after,
.cmplz-tooltip-right:focus:before,
.cmplz-tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform:    translateX(12px);
    transform:         translateX(12px);
}

/* Move directional arrows down a bit for left/right cmplz-tooltips */
.cmplz-tooltip-left:before,
.cmplz-tooltip-right:before {
    top: 3px;
}

/* Vertically center cmplz-tooltip content for left/right cmplz-tooltips */
.cmplz-tooltip-left:after,
.cmplz-tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
}

/*skeleton*/
@panelheight : 38px;
@panelborder : 1px;
@paneloffset : 3*(@panelborder+@panelheight);
@rows : 6;
.cmplz-skeleton:empty {
    margin: auto;
    width: 100%;
    height: (@rows*@panelheight)+(@rows+1)*@panelborder; /* change height to see repeat-y behavior */

    background-image:
            linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.5) 15% ),
            linear-gradient( #f2f2f2 @panelheight, transparent 0 ),
            linear-gradient( #f2f2f2 @panelheight, transparent 0 ),
            linear-gradient( #f2f2f2 @panelheight, transparent 0 ),
            linear-gradient( #f2f2f2 @panelheight, transparent 0 );

    background-repeat: repeat-y;

    background-size:
            50px 200px, /* highlight */
            100% @paneloffset,
            100% @paneloffset,
            100% @paneloffset,
            100% @paneloffset;

    background-position:
            0 0, /* highlight */
            @panelborder @panelborder,
            @panelborder @panelheight+(2*@panelborder),
            @panelborder (2*@panelheight)+(3*@panelborder),
            @panelborder (3*@panelheight)+(4*@panelborder);

    background-color:#d6d8db;
    animation: shine 2.5s infinite;
}
    @keyframes shine {
    to {
        background-position:
                100% 0, /* move highlight to right */
                @panelborder @panelborder,
                @panelborder @panelheight+(2*@panelborder),
                @panelborder (2*@panelheight)+(3*@panelborder),
                @panelborder (3*@panelheight)+(4*@panelborder);
    }
}

/*loader*/
.cmplz-loader {
    margin: 0;
    width: 50px;
    height: 15px;
    text-align: center;
    font-size: 10px;
}

.cmplz-loader > div {
    margin:1px;
    background-color: #333;
    height: 100%;
    width: 3px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.cmplz-loader .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.cmplz-loader .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.cmplz-loader .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.cmplz-loader .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
           transform: scaleY(1.0);
           -webkit-transform: scaleY(1.0);
       }
}
