a:hover{cursor:pointer}.shop-title-container h1{font-size:30px !important;font-weight:700;color:#323232;display:inline-block;font-family:montserrat, "sans-serif"}.shop-title-container h2{font-size:20px;font-weight:700;color:#323232;display:inline-block;font-family:"Montserrat", "sans-serif"}.shop-title-container .tp-widget-score-wrapper{position:absolute;top:85px;right:0;width:110px;height:auto}@media only screen and (max-width: 991px){.shop-title-container .tp-widget-score-wrapper{top:55px}}@media only screen and (max-width: 767px){.shop-title-container .tp-widget-score-wrapper{top:0;right:0}}.shop-title-container .buy-badge-avtest{position:absolute;display:inline-block;right:12px;top:90px;width:90px;height:auto;margin-top:5px;margin-bottom:5px}.shop-title-container .buy-badge-avtest img{width:100%}@media only screen and (max-width: 991px){.shop-title-container .buy-badge-avtest{top:55px}}@media only screen and (max-width: 767px){.shop-title-container .buy-badge-avtest{display:none}}.shop-title-container p{font-size:18px;color:#323232}.shop-title-container ul{list-style-type:none;margin:0;padding:0}.shop-title-container ul li{font-size:14px;color:#95989A;display:inline-block;padding:5px 35px 5px 0px;vertical-align:top}.shop-title-container ul li img{height:15px;width:auto;display:inline-block;margin-top:-4px}.shop-title-container ul li:before{content:"\f00c";font-family:Font Awesome\ 5 Free;color:#4BA920;opacity:.9;font-weight:900;display:inline-block;background-repeat:no-repeat;background-size:18px;padding-right:19px;width:18px;height:14px}.shop-title-container .mobile-display{display:none;text-align:center}.shop-title-container .mobile-display>img{float:none;margin-left:10px}.shop-title-container .mobile-display .buy-badge-avtest-mobile>img{max-width:100px}.shop-title-container .mobile-display .reviews-av-trustpilot-container{display:flex;align-items:center;justify-content:space-around;padding-top:20px}@media (max-width: 991px){.shop-title-container ul li{width:70%}.shop-title-container .list-full-width ul li{width:100%}}@media (max-width: 767px){.shop-title-container ul{display:inline-block}.shop-title-container ul li{font-size:12px;width:110%;color:#6C6C6C;text-align:left;display:list-item;float:none;padding:0;line-height:25px}.shop-title-container ul li strong{font-weight:400}.shop-title-container h1{font-size:34px;display:block;text-align:center}.shop-title-container .mobile-display{display:block}.shop-title-container ul{padding-bottom:25px}.shop-title-container .tp-widget-score-wrapper{position:relative;float:none;display:inline-block;vertical-align:middle}}section.buy-step h2{font-size:20px;font-weight:600;color:#323232;display:inline-block;font-family:"Montserrat", "sans-serif"}section.buy-step .step-description{font-size:14px;color:#95989A}section.buy-step .step-description.gdpr{font-size:12px}section.buy-step .step-description.gdpr .read-more-gdpr{text-decoration:underline;cursor:pointer}section.buy-step .gdpr-section{position:relative;padding-right:15px}section.buy-step .gdpr-section .close-gdpr{position:absolute;right:0px;top:-5px;font-size:20px;cursor:pointer;color:#95989A;display:none}section.buy-step .gdpr-section .step-description.gdpr.gdpr-more{display:none}section.buy-step .gdpr-section.active .step-description.gdpr .read-more-gdpr{display:none}section.buy-step .gdpr-section.active .close-gdpr,section.buy-step .gdpr-section.active .step-description.gdpr.gdpr-more{display:block}section.buy-step .step-description a{color:#48B6FF}section .signupEmail{border:1px solid transparent;-webkit-box-shadow:0 0 0 1px #95989A;-moz-box-shadow:0 0 0 1px #95989A;box-shadow:0 0 0 1px #95989A;border-radius:2px;display:block;font-size:16px;padding:0px 40px 0px 15px;line-height:45px;height:45px;width:100%;margin:5px 0}section .signupEmail::-ms-clear{display:none}section .signupEmail:focus{border:1px solid transparent}section#step2 .account-module .cg-textfield{border-radius:2px;display:block;font-size:14px;padding:0px 25px;line-height:40px;width:100%;margin:5px 0}section .alert-returning{display:none}section .signupForm.has-error.alert-notvalid .alert-notvalid-email{display:block}section .signupForm.has-error.alert-existing .alert-email-already-exists{display:block !important}section .signupForm.has-error.alert-country .alert-notvalid-country{display:block}section .signupForm.has-error.alert-noserver .alert-noserver{display:block}section .signupForm.has-error.alert-support .alert-support{display:block}section .signupForm.has-error .signupEmail{border:1px solid transparent;-webkit-box-shadow:0 0 0 2px #FF5252;-moz-box-shadow:0 0 0 2px #FF5252;box-shadow:0 0 0 2px #FF5252}section .signupForm.valid-email .signupEmail{border:1px solid transparent;-webkit-box-shadow:0 0 0 2px #4BA920;-moz-box-shadow:0 0 0 2px #4BA920;box-shadow:0 0 0 2px #4BA920}section .signupForm .cg-textfield-group{position:relative}section .signupForm .cg-textfield-icon:after{position:absolute;display:inline-block;content:"\f00c";font-family:Font Awesome\ 5 Free;color:#4BA920;font-weight:900;background-repeat:no-repeat;background-size:25px;width:25px;height:25px;font-size:20px;top:7px;right:10px;opacity:0;transition:0.5s all}section .signupForm:not(.has-error).valid-email .cg-textfield-icon:after{opacity:1}section .signupForm .alert{display:none}section .secure-badge{display:inline-block;color:#95989A;font-size:12px;font-weight:500;border:none;padding:8px 0;float:right}section .secure-badge img{height:14px;width:auto;margin:0 10px}section .padd-desktop{padding-top:25px}@media screen and (max-width: 991px){section .padd-desktop{padding-top:0px}}#payment.pp-bitpay .panel-bitpay,#payment.pp-stripe .panel-stripe,#payment.pp-cleverbridge .panel-cleverbridge,#payment.pp-stripe.pp-cleverbridge .panel-cleverbridge .panel-heading{display:block}#payment.pp-cleverbridge .panel-cleverbridge .panel-heading .payment-container .payment{display:inline-block}#payment.pp-stripe .panel-stripe .panel-heading .payment-container .payment.payment-visa,#payment.pp-stripe .panel-stripe .panel-heading .payment-container .payment.payment-mastercard{display:inline-block}#payment.pp-cleverbridge .panel-paypal .panel-heading .payment-container .payment.payment-paypal{display:inline-block}#payment.pp-stripe .panel-cleverbridge .panel-heading .payment-container .payment.payment-visa,#payment.pp-stripe .panel-cleverbridge .panel-heading .payment-container .payment.payment-mastercard{display:inline-block}#payment.pp-stripe.pp-cleverbridge .panel-cleverbridge .panel-heading .payment-container .payment.payment-directdebit{display:inline-block}#payment .panel-bitpay .panel-heading .payment-container .payment{display:inline-block}#payment.pp-cleverbridge .panel-cleverbridge .panel-heading .payment-container .payment.payment-directdebit{display:none}.plan-details-ab{border:1px solid;border-radius:2px}.plan-details-ab>div{position:relative;padding:15px 10px}.plan-details-ab.plan-details-account,.plan-details-ab.plan-details-subscription{border-color:#D5D5D5;background-color:rgba(213,213,213,0.1)}.plan-details-ab.plan-details-days{border-color:#4BA920;background-color:rgba(75,169,32,0.1)}.plan-details-ab span{color:#6C6C6C;font-size:12px}.plan-details-ab span strong{color:#212121;font-size:14px}.plan-details-ab-exp{border:none}.plan-details-ab-exp>div{position:relative;padding:15px 10px;font-size:18px;font-weight:bold}@media (max-width: 767px){.plan-details-ab-exp>div{font-size:14px}}.plan-details-ab-exp span{color:#6C6C6C;font-size:12px}.plan-details-ab-exp span strong{color:#212121;font-size:14px}.payment-form-container input::-webkit-input-placeholder{color:transparent;transition:color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)}.payment-form-container input::-moz-placeholder{color:transparent;transition:color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)}.payment-form-container input:-ms-input-placeholder{color:transparent;transition:color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)}.payment-form-container input:focus::-webkit-input-placeholder{color:#ccc}.payment-form-container input:focus::-moz-placeholder{color:#ccc}.payment-form-container input:focus:-ms-input-placeholder{color:#ccc}.payment-form-container.alert-name .alert-name{display:inline-block}.payment-form-container.alert-name .alert-name.alert-name-pristine{display:none}.payment-form-container.alert-zip .alert-zip{display:inline-block}.payment-form-container.alert-zip .alert-zip.alert-zip-pristine{display:none}.payment-form-container.alert-address .alert-address{display:inline-block}.payment-form-container.alert-address .alert-address.alert-address-pristine{display:none}.payment-form-container .alert-address,.payment-form-container .alert-zip,.payment-form-container .alert-name{display:none}.payment-form-container label{color:#6C6C6C;font-size:14px;font-weight:500;transition:0.3s top;z-index:10;position:absolute;left:15px;top:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform-origin:0 50%;cursor:text;transition-property:color, transform;transition-duration:0.3s;transition-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1);max-width:calc(100% - 30px)}.payment-form-container .StripeElement--focus+label,.payment-form-container .StripeElement--complete+label,.payment-form-container .StripeElement--invalid+label,.payment-form-container .touched .signupEmail+label,.payment-form-container input:focus+label,.payment-form-container input.has-name+label,.payment-form-container input.has-zip+label,.payment-form-container input.has-address+label,.payment-form-container .has-success label,.payment-form-container select+label{transform:scale(0.85) translateY(-40px) translateX(-14px);cursor:default}.payment-form-container label.stripe-postalCode,.payment-form-container label.stripe-cardCvc{left:12px;top:10px}.payment-form-container .new-payment-alert{width:100%;padding:2rem;margin-top:20px;margin-bottom:20px;background:#FAE4ED !important;letter-spacing:0px;border-radius:4px}.payment-form-container .new-payment-alert-text{font-size:14px;font-weight:600;color:#333333;padding-left:35px}.payment-form-container .new-payment-alert-text:before{content:'';background-image:url("/img/element/shop/desktop/payment-error-icon.svg");position:absolute;width:27px;height:27px;left:35px;background-repeat:no-repeat}#step3 .country-select:after{content:'\f0d7';position:absolute;font-family:Font Awesome\ 5 Free;font-weight:900;right:12px;top:12px;pointer-events:none}#step3 select.form-control{padding:5px 12px;-webkit-appearance:none;position:relative;box-shadow:none}#step3 .form-control{font-size:16px;height:45px;padding:10px 12px}#step3 .form-group{margin-bottom:15px;margin-top:25px;position:relative}#step3 .panel-bitpay_bc .form-control{height:46px}@media screen and (max-width: 991px){#step3 .panel-bitpay_bc .form-control{height:38px}}.StripeElement--focus,input#payment-name:focus,input#stripe-address:focus,select#payment-country:focus{-webkit-box-shadow:2px 2px 10px 0 rgba(0,0,0,0.3);-moz-box-shadow:2px 2px 10px 0 rgba(0,0,0,0.3);box-shadow:2px 2px 10px 0 rgba(0,0,0,0.3)}.account-module .cg-textfield-custom{border:1px solid #4BA920;position:relative}.account-module .cg-textfield-custom .cg-textfield-icon:after{position:absolute;display:inline-block;content:"\f00c";font-family:Font Awesome\ 5 Free;color:#4BA920;font-weight:900;background-repeat:no-repeat;background-size:25px;width:25px;height:25px;font-size:20px;right:10px}#payment .panel-default{border:none;box-shadow:none}#payment .panel-default .input-container{position:relative}#payment .panel-default .input-container i{font-family:Font Awesome\ 5 Free;font-style:normal;font-size:14px;display:inline-block;position:absolute;top:8px;right:3px;cursor:pointer;color:#6F6F6F;z-index:11;padding:5px;transition:0.3s all}#payment .panel-default .input-container .cvc-info,#payment .panel-default .input-container .zip-info{position:absolute;display:none;top:14px;right:25px;-webkit-box-shadow:0px 3px 20px 0px rgba(0,0,0,0.3);-moz-box-shadow:0px 3px 20px 0px rgba(0,0,0,0.3);box-shadow:0px 3px 20px 0px rgba(0,0,0,0.3);z-index:15;padding:10px;background-color:#F8F9FA}#payment .panel-default .input-container .cvc-info .title,#payment .panel-default .input-container .zip-info .title{font-size:14px;font-weight:700;color:#323232;display:block;margin-bottom:5px}#payment .panel-default .input-container .cvc-info img,#payment .panel-default .input-container .zip-info img{width:45px;height:auto;margin-right:5px;display:inline-block;vertical-align:middle}#payment .panel-default .input-container .cvc-info .info-text,#payment .panel-default .input-container .zip-info .info-text{font-size:10px;color:#323232}#payment .panel-default .input-container i:hover{top:-1px;right:6px;font-size:20px}#payment .panel-default .input-container i:hover+.cvc-info,#payment .panel-default .input-container i:hover+.zip-info{display:block}#payment .panel-default>.panel-heading{background-color:#fff;border:none;padding:0}#payment .panel-default>.panel-heading a{display:block;color:#212121;border:1px solid #95989A;border-radius:2px;text-decoration:none;position:relative;text-align:center;padding:20px;height:160px;opacity:1;transition:0.3s box-shadow}#payment .panel-default>.panel-heading a:hover{display:block;color:#212121;border:1px solid #95989A;border-radius:2px;text-decoration:none;position:relative;text-align:center;padding:20px;height:160px;opacity:1;transition:0.3s box-shadow;-webkit-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);-moz-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1)}#payment .panel-default>.panel-heading a:not(.collapsed){-webkit-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);-moz-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1)}#payment .panel-default .days-back__tos{font-size:12px;font-weight:600;display:none}#payment.valid-email .panel-default>.panel-heading a:not(.collapsed){border:2px solid #4BA920;border-bottom-color:#D5D5D5;border-bottom-width:1px}#payment.has-error .panel-default>.panel-heading a:not(.collapsed){border:2px solid #FF5252;border-bottom-color:#D5D5D5;border-bottom-width:1px}#payment.valid-email .payment-form-container .panel-body{border:2px solid #4BA920;border-top-style:none}#payment.has-error .payment-form-container .panel-body{border:2px solid #FF5252;border-top-style:none}#payment .panel-default>.panel-heading a:after,#payment .panel-default>.panel-heading a:before{content:'';display:block;opacity:0;position:absolute;width:0;height:0;border-style:solid;left:0;right:0;margin:auto;border-width:0px;transition:.3s opacity, .3s bottom, .3s border-width}#payment .panel-default>.panel-heading a:after{bottom:0px;border-color:#fff transparent transparent transparent}#payment .panel-default>.panel-heading a:before{bottom:0px;border-color:#4BA920 transparent transparent transparent}#payment .panel-default>.panel-heading a:not(.collapsed):after{bottom:-20px;opacity:1;border-color:#fff transparent transparent transparent;border-width:10px}#payment .panel-default>.panel-heading a:not(.collapsed):before{bottom:-24px;opacity:1;border-color:#4BA920 transparent transparent transparent;border-width:12px}#payment .panel-default>.panel-heading a .payment-details-container{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}#payment .panel-default>.panel-heading a .payment-details-container .payment-logo-paypal{height:26px;width:auto}#payment .panel-default>.panel-heading a .payment-details-container .payment-logo-bitpay{height:20px;width:auto}#payment .panel-default>.panel-heading a .panel-title{display:table;text-align:center;font-size:10px;font-weight:600;margin:20px auto 0 auto;min-width:50%;border:1px solid #95989A;color:#95989A;border-radius:2px;padding:5px;transition:0.3s all}#payment .panel-default>.panel-heading a:hover .panel-title{background-color:rgba(213,213,213,0.3)}#payment .panel-default>.panel-heading a:not(.collapsed) .panel-title{background-color:#4BA920;color:#fff;border-color:#4BA920}#step3 .panel-group .panel+.panel{margin-top:0}section.buy-step#step3 .panel-default{border:none}section.buy-step#step3 .panel{border:none;box-shadow:none;margin-bottom:0}.payment-form-container .panel-body{border:1px solid #95989A;border-top-style:none;padding:20PX 35px;border-radius:2px;-webkit-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);-moz-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1)}html body #content .signupForm{display:block !important}.payment-form-container p.tos{font-size:12px;color:#95989A}.payment-form-container p.tos a{color:#95989A}.col-custom-1{width:60%;float:left;padding:0 15px}.col-custom-2{width:40%;float:left;padding:0 15px}.billing-cycle{font-size:12px;line-height:1.2em !important}.billing-cycle .line-through{text-decoration:line-through}.billing-cycle .green-light{color:#4ba920 !important;font-weight:600 !important}.order-summary .selected-plan,.order-summary .plan-description-pricing,.order-summary .bonus{color:#6C6C6C;font-weight:500;font-size:16px;line-height:30px}.order-summary .saving,.order-summary .dedicated-country,.order-summary .dedicated-country-text{color:#6c6c6c;font-weight:600;font-size:16px;line-height:30px}.order-summary .total,.order-summary .order-total-value{color:#4ba920;font-weight:600;font-size:20px;line-height:35px}.recurring-billing{font-weight:600;color:#6C6C6C}.payment-form-container .order-summary{display:inline-block}@media (max-width: 767px){.payment-form-container .order-summary{margin-top:5px;margin-bottom:5px}}.payment-form-container .coupon,.payment-form-container .left,.payment-form-container .middle,.payment-form-container .right{display:none}.payment-form-container .coupon.active,.payment-form-container .left.active,.payment-form-container .middle.active,.payment-form-container .right.active{display:block}.payment-form-container .form-control{border-radius:2px;border-color:#95989A}.payment-form-container label{color:#6C6C6C;font-size:14px;font-weight:500}.payment-form-container h5{color:#6F6F6F;font-size:16px;font-weight:700;padding-bottom:5px}.cg-green{background-color:#4BA920}.cg-green:hover,.cg-green:focus,.cg-green:active{background-color:#4BA920}.payment-form-container.panel-bitpay_bc .panel-body .text-center .cg-btn,.payment-form-container.panel-bitpay_bc .panel-body .text-center .cg-line-btn{width:100%}.payment-form-container .panel-body .cg-btn,.payment-form-container .panel-body .cg-line-btn{border-radius:2px;font-size:16px;font-weight:700;padding:8px 40px;font-family:"Montserrat", "sans-serif";line-height:30px;width:100%;transition:.3s all}body.vi .payment-form-container .panel-body .cg-btn,body.vi .payment-form-container .panel-body .cg-line-btn{font-size:15px}.payment-form-container .panel-body .cg-btn img,.payment-form-container .panel-body .cg-line-btn img{max-height:25px}.payment-form-container .panel-body .cg-btn i,.payment-form-container .panel-body .cg-line-btn i{font-size:20px}.payment-form-container .panel-body .cg-btn:hover,.payment-form-container .panel-body .cg-line-btn:hover{-webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35);-moz-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35);box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35)}.payment-form-container .panel-body .text-center .cg-btn,.payment-form-container .panel-body .text-center .cg-line-btn{width:40%;margin:0 auto}.payment-form-container .panel-body .text-center .cg-btn img,.payment-form-container .panel-body .text-center .cg-line-btn img{max-height:25px}.payment-form-container .panel-body .text-center .cg-btn i,.payment-form-container .panel-body .text-center .cg-line-btn i{font-size:20px}.has-error .cg-textfield.form-control{border-color:#ff5252}.selected-plan-mobile .background-color{background-color:rgba(255,204,0,0.1);border-bottom:1px solid #ffcc00;transition:0.5s all}.selected-plan-mobile .background-color.active-coupon,.selected-plan-mobile .background-color.active-middle{background-color:rgba(75,169,32,0.1);border-bottom:1px solid #4BA920}.payment-form-container .panel-body{padding:20PX 35px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#payment .panel-default>.panel-heading a{margin:10px auto 0;height:80px;padding:10px 35px 10px 10px}#payment .panel-default>.panel-heading a:hover{margin:10px auto 0;height:80px;padding:10px 35px 10px 10px}#payment .panel-default>.panel-heading a:not(.collapsed){border-bottom-width:1px;border-bottom-color:#D5D5D5;-webkit-border-radius:2px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius:2px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;border-radius:2px;border-bottom-right-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.cg-valid .payment-form-container .panel-body{border-top-width:0px;-webkit-border-radius:2px;-webkit-border-bottom-right-radius:2px;-webkit-border-bottom-left-radius:2px;-moz-border-radius:2px;-moz-border-radius-bottomright:2px;-moz-border-radius-bottomleft:2px;border-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;padding:20px 35px}#payment .panel-default>.panel-heading a:hover .panel-title,#payment .panel-default>.panel-heading a:not(.collapsed) .panel-title,#payment .panel-default>.panel-heading a .panel-title{display:inline-block;text-align:left;width:40%;color:#6C6C6C;min-width:120px;margin:0 auto;padding:0 0 0 20px;border-style:none;background-color:#fff;font-size:16px}#payment .panel-default>.panel-heading a:hover .panel-title.hidden-xs.hidden-sm,#payment .panel-default>.panel-heading a:not(.collapsed) .panel-title.hidden-xs.hidden-sm,#payment .panel-default>.panel-heading a .panel-title.hidden-xs.hidden-sm{display:none !important}#payment .panel-default>.panel-heading a:not(.collapsed):before,#payment .panel-default>.panel-heading a:not(.collapsed):after{display:none}#payment .panel-default>.panel-heading a .payment-details-container{text-align:left}#payment .panel-default>.panel-heading a .payment-details-container .payment-logo-paypal,#payment .panel-default>.panel-heading a .payment-details-container .payment-logo-bitpay{height:auto;width:80px;float:right}.payment-details-container .payment{transform:scale(0.8);vertical-align:middle;float:right}.payment-form-container p.tos{font-size:10px !important}.payment-form-container p.tos-tos{color:#95989A;font-size:10px !important}#payment .panel-default>.panel-heading a .panel-title:before{border-style:solid;border-width:2px 2px 0 0;content:'';display:inline-block;height:10px;width:10px;left:-10px;position:relative;top:-2px;transform:rotate(45deg);vertical-align:middle;transition:.5s all}#payment .panel-default>.panel-heading a:not(.collapsed) .panel-title:before{transform:rotate(135deg)}.border-form{border-bottom:2px solid #ddd;border-top:2px solid #ddd}.border-form.border-green{border-style:none}.border-form.border-green .border-container{height:2px;width:100%;background-color:#4BA920}.border-form .border-container{display:block;margin:auto;height:0;width:0;background:0 0;transition:width .5s ease, background-color .5s ease}@media (max-width: 991px){.payment-form-container .panel-body .cg-btn,.payment-form-container .panel-body .cg-line-btn{font-size:13px;padding:0;width:100%;line-height:40px}.payment-form-container .panel-body .cg-btn img,.payment-form-container .panel-body .cg-line-btn img{max-height:25px}.payment-form-container .panel-body .cg-btn i,.payment-form-container .panel-body .cg-line-btn i{font-size:20px}.payment-form-container .panel-body .text-center .cg-btn,.payment-form-container .panel-body .text-center .cg-line-btn{width:100%}.payment-form-container .panel-body .text-center .cg-btn img,.payment-form-container .panel-body .text-center .cg-line-btn img{max-height:25px}.payment-form-container .panel-body .text-center .cg-btn i,.payment-form-container .panel-body .text-center .cg-line-btn i{font-size:20px}.payment-form-container .panel-body .signupEmail{line-height:36px;height:38px}section#BottomSectionPricing h2{padding-top:50px}section.buy-step h2{font-size:20px}.payment-form-container .panel-body{padding:30px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#payment .panel-default>.panel-heading a{margin:10px auto 0;height:80px;padding:10px}#payment .panel-default>.panel-heading a:hover{margin:10px auto 0;height:80px;padding:10px}#payment .panel-default>.panel-heading a:not(.collapsed){border-bottom-width:1px;border-bottom-color:#D5D5D5;-webkit-border-radius:2px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius:2px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;border-radius:2px;border-bottom-right-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.payment-form-container .panel-body{border-top-width:0px;-webkit-border-radius:1px;-webkit-border-bottom-right-radius:2px;-webkit-border-bottom-left-radius:2px;-moz-border-radius:1px;-moz-border-radius-bottomright:2px;-moz-border-radius-bottomleft:2px;border-radius:1px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;padding:20px 35px}#payment .panel-default>.panel-heading a:hover .panel-title,#payment .panel-default>.panel-heading a:not(.collapsed) .panel-title,#payment .panel-default>.panel-heading a .panel-title{text-align:left;width:40%;color:#6C6C6C;min-width:120px;margin:0 auto;padding:0 0 0 20px;border-style:none;background-color:#fff;font-size:16px}#payment .panel-default>.panel-heading a:not(.collapsed):before,#payment .panel-default>.panel-heading a:not(.collapsed):after{display:none}#payment .panel-default>.panel-heading a .payment-details-container{text-align:left}#payment .panel-default>.panel-heading a .payment-details-container .payment-logo-paypal,#payment .panel-default>.panel-heading a .payment-details-container .payment-logo-bitpay{height:auto;width:80px}.payment-details-container .payment{transform:scale(0.8);vertical-align:middle;margin-top:-4px}.order-summary .selected-plan,.order-summary .plan-description-pricing,.order-summary .saving-value,.order-summary .bonus-details,.order-summary .saving,.order-summary .bonus{font-size:16px}.payment-form-container .panel-body .cg-btn,.payment-form-container .panel-body .cg-line-btn{font-size:13px;padding:0;width:100%;line-height:1.2em}.payment-form-container .panel-body .cg-btn.paypal-button,.payment-form-container .panel-body .cg-line-btn.paypal-button{padding:10px 40px !important;margin:0 auto !important}.payment-form-container p.tos{font-size:10px !important}#payment .panel-default>.panel-heading a .panel-title:before{border-style:solid;border-width:0.3px 0.3px 0 0;content:'';display:inline-block;height:7px;left:-10px;position:relative;top:-2px;transform:rotate(45deg);vertical-align:middle;width:7px;transition:.5s all}#payment .panel-default>.panel-heading a:not(.collapsed) .panel-title:before{transform:rotate(135deg)}.selected-plan-mobile.active{z-index:1030;opacity:1;height:95px}.selected-plan-mobile .background-color{height:95px}.gdpr-section{font-size:10px !important}}@media (max-width: 767px){.border-form{border-bottom:2px solid #ddd;border-top:2px solid #ddd}.border-form.border-green{border-style:none}section.buy-step h2{display:block}section .secure-badge{text-align:center;display:block;float:none;border-left:none;border-right:none;border-width:1px;border-color:#95989A;margin:15px 0;color:#95989A;font-size:12px;font-weight:500}section .signupEmail{font-size:16px;line-height:40px}section .signupEmail .cg-textfield-icon:after{top:7px}section .form-control input{font-size:16px}section.buy-step .step-description{font-size:10px !important}.payment-details-container .payment{transform:scale(0.6);vertical-align:middle;margin-left:-8px;margin-right:-8px;margin-top:-4px}.account-module .cg-textfield-custom{font-size:12px;color:#6C6C6C}.account-module .cg-textfield-custom .cg-textfield-icon{top:10px;right:10px}.selected-plan-mobile.active{opacity:1;height:80px}.selected-plan-mobile .background-color{height:80px}.payment-form-container .panel-body{padding:15px}#payment .panel-default>.panel-heading a:hover .panel-title,#payment .panel-default>.panel-heading a:not(.collapsed) .panel-title,#payment .panel-default>.panel-heading a .panel-title{width:auto;font-size:12px}#payment .panel-default .days-back__tos.active{display:block}.order-summary .selected-plan,.order-summary .plan-description-pricing,.order-summary .saving-value,.order-summary .bonus-details,.order-summary .saving,.order-summary .bonus{font-size:12px;line-height:1.3em !important}.order-summary .saving{line-height:22px}.order-summary .total{font-size:16px}}.selected-plan-mobile{position:fixed;top:0;left:0;width:100%;z-index:0;background-color:#fff;-webkit-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);-moz-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1);height:0;opacity:0;overflow:hidden;-webkit-transition:opacity 0.5s, height 0.5s;-moz-transition:opacity 0.5s, height 0.5s;-ms-transition:opacity 0.5s, height 0.5s;-o-transition:opacity 0.5s, height 0.5s;transition:opacity 0.5s, height 0.5s}.selected-plan-mobile .left,.selected-plan-mobile .right,.selected-plan-mobile .middle,.selected-plan-mobile .best-deal,.selected-plan-mobile .plan-tip{display:none}.selected-plan-mobile .left.active,.selected-plan-mobile .right.active,.selected-plan-mobile .middle.active,.selected-plan-mobile .best-deal.active,.selected-plan-mobile .plan-tip.active{display:inline-block}.smartbanner-show .selected-plan-mobile{top:80px}.plan-saved{display:inline-block;vertical-align:middle;padding-right:10px}.selected-plan-container{padding:0px 15px;position:relative;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%)}.plan-tip{display:none}.plan-tip.active{display:inline-block}.plan-saved span{display:inline-block;font-size:12px;color:#212121;text-decoration:none;text-align:center}.plan-tip.active span,.plan-tip.active a{display:inline-block;font-size:12px;color:#212121;vertical-align:middle;text-decoration:none;text-align:center}.plan-tip.active span.button{background-color:#fc0;color:#323232;border-radius:4px;padding:3px 20px;font-size:12px;text-align:center}.plan-tip.active span.button>em{font-style:normal;font-size:18px;line-height:18px;font-weight:700}@media (max-width: 480px){.plan-tip.active span.button{padding:3px 5px}}.menu-btn.cg-btn{display:none !important}.selected-plan-mobile span.button{position:relative}.selected-plan-mobile span.button::-moz-focus-inner{border:0}.selected-plan-mobile span.button:after{content:"";display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-transform-origin:center;transform-origin:center;border-radius:4px;height:100%;width:100%;z-index:-1;background:repeating-radial-gradient(rgba(142,96,4,0) 0%, rgba(142,96,4,0.15) 50%, rgba(142,96,4,0.5) 75%, rgba(142,96,4,0.05) 100%);-webkit-animation:pulse_shadow 2s ease-in-out infinite;animation:pulse_shadow 2s ease-in-out infinite}.selected-plan-mobile span.button:hover:after,.selected-plan-mobile span.button:focus:after{background:repeating-radial-gradient(rgba(255,99,71,0) 0%, rgba(255,99,71,0.15) 50%, rgba(255,99,71,0.5) 75%, rgba(255,99,71,0.05) 100%)}@-webkit-keyframes pulse_pseudo{0%{opacity:1;-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1)}100%{opacity:0;-webkit-transform:translate(-50%, -50%) scale(1.25);transform:translate(-50%, -50%) scale(1.25)}}@keyframes pulse_pseudo{0%{opacity:1;-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1)}100%{opacity:0;-webkit-transform:translate(-50%, -50%) scale(1.25);transform:translate(-50%, -50%) scale(1.25)}}@-webkit-keyframes pulse_shadow{0%{box-shadow:0px 0px 0px 0px rgba(142,96,4,0.25)}100%{box-shadow:0px 0px 3px 15px rgba(142,96,4,0)}}@keyframes pulse_shadow{0%{box-shadow:0px 0px 0px 0px rgba(142,96,4,0.25)}100%{box-shadow:0px 0px 3px 15px rgba(142,96,4,0)}}#stripe-errors{display:none !important}.icon-bg.bitpay_bc{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-40px -64px;background-size:197px 327px;width:120px;height:25px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.stripe_cc,.icon-bg.cleverbridge_cc,.icon-bg.cleverbridge_cc_iframe,.icon-bg.cleverbridge_cc_iframe_noreview{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 -149px;background-size:197px 327px;width:140px;height:25px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.cleverbridge_sepa{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 -89px;background-size:197px 327px;width:74px;height:24px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.cleverbridge_ideal{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-160px -64px;background-size:197px 327px;width:29px;height:25px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.cleverbridge_paynearme{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 0;background-size:197px 327px;width:119px;height:24px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.cleverbridge_paypal{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 -114px;background-size:197px 327px;width:93px;height:24px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.cleverbridge_sofort{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-103px -39px;background-size:197px 327px;width:80px;height:25px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.cleverbridge_konbini{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 -64px;background-size:197px 327px;width:40px;height:25px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.cleverbridge_boleto{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-13px -39px;background-size:197px 327px;width:90px;height:25px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.cleverbridge_webmoney{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-74px -89px;background-size:197px 327px;width:96px;height:25px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right}.icon-bg.stripe_google_pay{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 -266px;background-size:197px 327px;width:56px;height:37px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right;margin-top:-7px}.icon-bg.stripe_apple_pay{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-140px -149px;background-size:197px 327px;width:56px;height:37px;background-repeat:no-repeat;overflow:hidden;display:inline-block;float:right;margin-top:-7px}.icon-bg-reuse{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-144px -114px;background-size:197px 327px;width:35px;height:35px;background-repeat:no-repeat;overflow:hidden;display:inline-block;vertical-align:middle}.icon-bg-secure{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 -39px;background-size:197px 327px;width:12px;height:14px;background-repeat:no-repeat;overflow:hidden;display:inline-block;vertical-align:middle;margin:0 10px}.icon-bg-devices{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 -24px;background-size:197px 327px;width:197px;height:15px;background-repeat:no-repeat;overflow:hidden;display:inline-block;vertical-align:middle;margin-top:-5px}.icon-bg-why{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-89px -266px;background-size:197px 327px;width:90px;height:61px;background-repeat:no-repeat;overflow:hidden;display:inline-block}.icon-bg-cart{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:0 -186px;background-size:197px 327px;width:80px;height:80px;background-repeat:no-repeat;overflow:hidden;display:inline-block}.icon-bg-cvc{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-94px -114px;background-size:197px 327px;width:50px;height:32px;background-repeat:no-repeat;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:10px}.icon-bg-loading{background-image:url('../../../img/pages/shop/sprites/icons-2x-s55334425d8.png');background-position:-56px -266px;background-size:197px 327px;width:33px;height:39px;background-repeat:no-repeat;overflow:hidden;display:inline-block}@media screen and (max-width: 767px){.icon-bg{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)}}.dedicated-summary,.dedicated-total-value,.select-country-alert{display:none}.privacy-guard-summary,.privacy-guard-total-value,.combo-total-value{display:none}@media only screen and (max-width: 767px){.payment-methods{margin-left:10px;margin-right:10px}.payment-methods .tab-content{border:#57AF2F 1px solid}.payment-methods .nav-tabs .nav-link.active{border-left:#57AF2F 1px solid;border-right:#57AF2F 1px solid;border-bottom:#57AF2F 1px solid}}.payment-methods{margin-left:10px;margin-right:10px;margin-top:15px}.payment-methods .tab-content.greenedge{border:#57AF2F 2px solid}.payment-methods .tab-content.grayedge{border:#57AF2F 2px solid}.payment-methods .tab-content.rededge{border:#FF5252 2px solid}.pricing-nav{display:flex;flex-direction:row;margin-top:1px;border-top-right-radius:10px;border-top-left-radius:10px;background-color:#F8F8F8;border-top-left-radius:10px;border-top-right-radius:10px}.pricing-nav .ideal .desktop{height:60px;padding-top:10px}.pricing-nav.greenedge .active{border-left:#57AF2F 2px solid;border-right:#57AF2F 2px solid;border-top:#57AF2F 2px solid;margin-bottom:-3px}.pricing-nav.grayedge .active{border-left:#57AF2F 2px solid;border-right:#57AF2F 2px solid;border-top:#57AF2F 2px solid;margin-bottom:-3px}.pricing-nav.rededge .active{border-left:#FF5252 2px solid;border-right:#FF5252 2px solid;border-top:#FF5252 2px solid;margin-bottom:-3px}.pricing-nav li{margin-top:1px;text-align:center;border-right:#F0F0F0 1px solid}.pricing-nav li a{border:none !important;margin-right:0px !important}.pricing-nav li:first-child{border-top-left-radius:10px}.pricing-nav li:first-child a{border-top-left-radius:10px}.pricing-nav li:last-child{border-right:none;border-top-right-radius:10px}.pricing-nav li:last-child a{border-top-right-radius:10px}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.pricing-nav li:first-child{margin-left:-1px}.pricing-nav li:last-child{margin-right:-1px}}}.pricing-nav.greenedge li:last-child.active{border-right:#57AF2F 2px solid}.pricing-nav.grayedge li:last-child.active{border-right:#57AF2F 2px solid}.pricing-nav.rededge li:last-child.active{border-right:#FF5252 2px solid}.pricing-nav .nav-item{width:100%}.pricing-nav .desktop{height:70px}.pricing-nav .desktop-ru{height:70px;width:20%;min-width:40px}.pricing-nav .mobile{display:none}.pricing-nav .methodTitle{display:none}.pricing-nav .stripe_apple_pay{height:36px;margin-top:10px}.pricing-nav .amazon_pay{padding-top:38px;height:100%}.pricing-nav .amazon_pay .desktop{height:20px;width:auto}.pricing-nav .qiwi_wallet_via_paymentwall{padding-top:30px;height:100%}.pricing-nav .qiwi_wallet_via_paymentwall .desktop{height:35px;width:auto}.pricing-nav .qiwi_wallet{padding-top:30px;height:100%}.pricing-nav .qiwi_wallet .desktop{height:35px;width:auto}@media only screen and (max-width: 767px){.pricing-nav .desktop{display:none}.pricing-nav .desktop-ru{display:none}.pricing-nav .mobile{display:inline-block;height:20px}.pricing-nav li a{padding:10px 10px !important}.pricing-nav.nav-num-nonum .mobile{height:10px}.pricing-nav.nav-num-6 .mobile{height:20px}.pricing-nav.nav-num-5 .mobile{height:20px}.pricing-nav.nav-num-4 .mobile{height:20px}.pricing-nav.nav-num-3 .mobile{height:20px}.pricing-nav.nav-num-2 .mobile{height:20px}.pricing-nav.nav-num-1 .mobile{height:20px}.pricing-nav .methodTitle{display:none}.pricing-nav .stripe_apple_pay{height:36px;margin-top:-8px}}.tab-content .panel-body{border:none !important}.tab-content .days-back__tos{display:none !important}.tab-content .mobile{display:none}@media only screen and (max-width: 767px){.tab-content .days-back__tos.active{display:block !important}.tab-content .mobile{display:block}.tab-content .payment-method-title{margin-top:15px;margin-left:10px}.tab-content .payment-method-title hr{color:#707070;width:100%;margin-left:-4px;margin-top:0px}.tab-content .payment-method-title .method-name{font-weight:bold;margin-top:20px;padding-bottom:5px}.tab-content .payment-method-title .method-image-div{text-align:center;vertical-align:top}.tab-content .payment-method-title .method-image-div .method-image{height:60px}.tab-content .payment-method-title .method-image-div .method-image.ideal{height:50px}.tab-content .payment-method-title .method-image-div .method-image.amazon_pay{margin-top:10px;height:20px}.tab-content .payment-method-title .method-image-div .method-image.credit_card_ru{height:40px;position:relative;top:5px}.tab-content .payment-method-title .method-image-div .method-image.qiwi_wallet_via_paymentwall{height:30px}.tab-content .payment-method-title .method-image-div .method-image.qiwi_wallet{height:30px}}@media only screen and (max-width: 480px){.tab-content .payment-method-title .method-image-div .method-image.credit_card{height:50px}.tab-content .payment-method-title .method-image-div .method-image.credit_card_ru{height:29px;position:relative;top:15px}}.tab-content .input-container{position:relative}.tab-content .input-container i{font-family:Font Awesome\ 5 Free;font-style:normal;font-size:14px;display:inline-block;position:absolute;top:8px;right:3px;cursor:pointer;color:#6F6F6F;z-index:11;padding:5px;transition:0.3s all}.tab-content .input-container .cvc-info,.tab-content .input-container .zip-info{position:absolute;display:none;top:14px;right:25px;-webkit-box-shadow:0px 3px 20px 0px rgba(0,0,0,0.3);-moz-box-shadow:0px 3px 20px 0px rgba(0,0,0,0.3);box-shadow:0px 3px 20px 0px rgba(0,0,0,0.3);z-index:15;padding:10px;background-color:#F8F9FA}.tab-content .input-container .cvc-info .title,.tab-content .input-container .zip-info .title{font-size:14px;font-weight:700;color:#323232;display:block;margin-bottom:5px}.tab-content .input-container .cvc-info img,.tab-content .input-container .zip-info img{width:45px;height:auto;margin-right:5px;display:inline-block;vertical-align:middle}.tab-content .input-container .cvc-info .info-text,.tab-content .input-container .zip-info .info-text{font-size:10px;color:#323232}.tab-content .input-container i:hover{top:-1px;right:6px;font-size:20px}.tab-content .input-container i:hover+.cvc-info,.tab-content .input-container i:hover+.zip-info{display:block}.hidden-component{display:none}.pricing-duration del:after{content:"\A";white-space:pre}@media (min-width: 475px){.tpd-skin-cg{z-index:10 !important}}.tpd-skin-cg .tpd-content,.tpd-skin-cg .tpd-title,.tpd-skin-cg .tpd-close{color:#fff}.tpd-skin-cg .tpd-background-content{background-color:#323348}.tpd-skin-cg .tpd-background{border-width:1px;border-color:rgba(6,0,12,0.6)}.tpd-skin-cg .tpd-content{padding:20px}.tpd-skin-cg .tpd-background-title{background-color:#323348}.tpd-skin-cg .tpd-title-wrapper{border-bottom:1px solid #2a1fb4}.tpd-skin-cg .tpd-background-shadow{box-shadow:0 0 8px rgba(0,0,0,0.15)}.tpd-skin-cg .tpd-spinner-spin{border-color:rgba(255,255,255,0.2);border-left-color:#fff}.tpd-skin-cg a{color:#ddd}.tpd-skin-cg a:hover{color:#c6c6c6}#tooltip-dedicated-locations,#tooltip-dedicated-locations-remove,#tooltip-dip-countries,.tooltip-dip-countries{color:#1C1D2F;text-decoration:underline;cursor:pointer;font-size:14px;font-weight:700;display:inline-flex;margin-left:25px}@media (max-width: 475px){#tooltip-dedicated-locations,#tooltip-dedicated-locations-remove,#tooltip-dip-countries,.tooltip-dip-countries{align-self:start;margin-top:10px;margin-left:0}}.tooltip-dip-countries{padding:10px 15px;display:inline-block}@media (max-width: 475px){.tooltip-dip-countries{padding:0;margin-top:10px}}@media (max-width: 475px){.section-optional-add-ons .boxes-container .box .controls-content{flex-direction:column}}.dip-locations-container .dip-locations-title{color:#FFCD00;font-size:12px}.dip-locations-container hr{margin-top:10px;margin-bottom:10px;border-color:rgba(255,255,255,0.15)}.dip-locations-container ul{list-style-type:none;padding:0;margin:0}.dip-locations-container ul.left{float:left;margin-right:5px}.dip-locations-container ul.right{float:right;margin-left:5px}.dip-locations-container ul>li{font-size:14px;font-weight:600}.content__www_checkout .buy-step h2{display:none}.content__www_checkout .section-optional-add-ons-order-summary h2{display:block}.content__www_checkout #step3{padding-top:0 !important}@media only screen and (max-width: 767px){.content__www_checkout section .secure-badge{margin:5px 0 !important}}.pricing-breadcrumbs{font-size:16px}.tooltip-dip-countries{font-size:12px}.subtotal-value{color:#6c6c6c !important;font-weight:600;font-size:16px !important;line-height:30px}.vat-value{color:#6c6c6c}.vat-price{color:#6c6c6c !important;font-weight:600;margin-left:3px}.vat-experiment-small{color:#6c6c6c;font-weight:600}.panel-stripe_apple_pay #payment-country-cc{height:46px}@media screen and (max-width: 991px){.panel-stripe_apple_pay #payment-country-cc{height:38px}}.panel-braintree_paypal #payment-country-bc{height:46px}@media screen and (max-width: 991px){.panel-braintree_paypal #payment-country-bc{height:38px}}.width-100{width:100% !important}.icon-dip{width:27px;height:21px;margin-right:10px}.stripe-new .form-control{padding:0 !important}#stripe-cardNumber{padding:13px}.stripe.stripe-new{background-color:transparent;margin-left:5px}@media only screen and (max-width: 767px){.stripe.stripe-new{margin-left:5px;margin-right:4px}}.stripe.stripe-new *{font-size:16px;font-weight:500}.stripe.stripe-new form{max-width:496px !important;padding:0 15px}.stripe.stripe-new form>*+*{margin-top:20px}.stripe.stripe-new .container{background-color:#fff;border-radius:4px;padding:3px}.stripe.stripe-new fieldset{margin-left:-5px;margin-right:-5px;border-radius:8px}.stripe.stripe-new fieldset legend{float:left;width:100%;text-align:center;font-size:13px;color:#8898aa;padding:3px 10px 7px}.stripe.stripe-new .card-only{display:block}.stripe.stripe-new .payment-request-available{display:none}.stripe.stripe-new fieldset legend+*{clear:both}.stripe.stripe-new input,.stripe.stripe-new button{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border-style:none;color:#fff}.stripe.stripe-new input:-webkit-autofill{transition:background-color 100000000s;-webkit-animation:1ms void-animation-out}.stripe.stripe-new input{-webkit-animation:1ms void-animation-out}.stripe.stripe-new input::-webkit-input-placeholder{color:#9bacc8}.stripe.stripe-new input::-moz-placeholder{color:#9bacc8}.stripe.stripe-new input:-ms-input-placeholder{color:#9bacc8}.stripe.stripe-new button{display:block;width:100%;height:37px;background-color:#d782d9;border-radius:2px;color:#fff;cursor:pointer}.stripe.stripe-new button:active{background-color:#b76ac4}.stripe.stripe-new .error svg .base{fill:#e25950}.stripe.stripe-new .error svg .glyph{fill:#f6f9fc}.stripe.stripe-new .error .message{color:#e25950}.stripe.stripe-new .success .icon .border{stroke:#ffc7ee}.stripe.stripe-new .success .icon .checkmark{stroke:#d782d9}.stripe.stripe-new .success .title{color:#32325d}.stripe.stripe-new .success .message{color:#8898aa}.stripe.stripe-new .success .reset path{fill:#d782d9}.country-select-stripe{font-size:14px !important}.info-banner-pricing{display:flex !important;flex-direction:row;justify-content:center;align-items:center;gap:50px;margin-top:25px !important;padding-top:7px !important;padding-bottom:7px !important;border:1px solid !important}@media only screen and (max-width: 767px){.info-banner-pricing{flex-direction:column;gap:5px}}.info-banner-pricing-info{display:flex;justify-content:center;align-items:center}.info-banner-pricing-info-p{font-size:14px !important;font-weight:600}@media only screen and (max-width: 767px){.info-banner-pricing-info-p{text-align:center}}.info-banner-pricing img{height:40px;width:auto}@media only screen and (max-width: 767px){.pt-xs-10{padding-top:10px}}.checkout-exp .summary-text-checkout{margin-top:6px;font-size:18px;font-weight:600}@media only screen and (max-width: 767px){.checkout-exp .summary-text-checkout{font-size:14px;margin-top:0}}.checkout-exp .order-subscription{background:#F6F6F6;font-size:16px;font-weight:600;margin-top:16px;margin-bottom:16px;width:100%;padding-top:10px;padding-bottom:10px}@media only screen and (max-width: 767px){.checkout-exp .order-subscription{margin-top:0;font-size:14px}}.checkout-exp .order-subscription .subscription-text-checkout{margin-left:24px}@media only screen and (max-width: 767px){.checkout-exp .order-subscription .subscription-text-checkout{margin-left:12px}}.checkout-exp .gray-exp{width:100%}.checkout-exp .ml-exp-24{margin-left:23px}.checkout-exp .mr-exp-24{margin-right:23px}.order-summary .billing-cycle .saving-exp{background:#F7CE46 !important;border-radius:5px;color:#242538;padding-left:8px;padding-right:8px;margin-bottom:6px;margin-top:6px;width:fit-content;padding:0px 10px !important;height:auto}.order-summary .billing-cycle .saving-exp-new-banner{background:#ECF6E8 !important;border-radius:60px;color:#4BA920;margin-bottom:6px;margin-top:6px;width:111px;height:19px;font-size:12px;text-align:center;padding:0 !important;width:fit-content;padding:0px 10px !important;height:auto}@media only screen and (max-width: 767px){.order-summary .billing-cycle .saving-exp-new-banner{height:26px;display:flex;align-items:center}}.row-exp{margin-left:9px;margin-right:9px}@media only screen and (max-width: 767px){.row-exp{margin-right:-15px;margin-left:-15px}}.mt-6{margin-top:6px}.info-plan-notice{background-color:#F4F9FC;color:#0087C4;display:inline-block;margin:0 auto;border:1px #0087C4 solid;border-radius:5px;padding:5px 25px !important;line-height:2em;font-size:14px;margin-top:10px;margin-bottom:5px}@media only screen and (max-width: 767px){.info-plan-notice{font-size:12px;margin-top:15px;margin-bottom:15px}}.info-plan-notice-link{color:#305A9E}.info-plan-notice-link:hover{color:#305A9E}.info-plan-notice-image{margin-top:3px;margin-right:10px;width:18px;height:18px}.info-plan-notice-experiment{background-color:#F8F9FA;border:none;align-items:center;justify-content:space-between}.info-plan-notice-experiment .info-plan-notice-text{color:#242538;text-align:left;padding-right:20px}.info-plan-notice-experiment .cg-btn{font-size:12px !important;font-weight:700;flex-grow:1;text-align:center;width:auto;min-width:min-content;max-width:max-content;white-space:nowrap}.info-plan-notice-experiment .cg-btn:hover{cursor:pointer}@media only screen and (max-width: 767px){.info-plan-notice-experiment{flex-direction:column}.info-plan-notice-experiment .cg-btn{min-width:initial;max-width:initial;width:100%}.info-plan-notice-experiment .info-plan-notice-text{text-align:center;padding-right:0}}.super-badge-experiment{background-color:#ECF6E8 !important}.super-badge-experiment .super-badge-text{color:#4BA920 !important}.red-line{color:#CB4447;font-style:normal}.pcloud-info-icon{font-size:14px;color:#D5D5D5}.super-badge-m{max-width:fit-content;background:#4BA920;border-radius:12px;padding:4px 8px 5px 8px;margin-bottom:10px;text-align:center}.super-badge-m-text{color:white !important;font-size:10px !important;font-weight:600;text-align:center;padding-bottom:0 !important}.step-description{font-size:14px;color:#95989A}.step-description.gdpr{font-size:12px}.step-description.gdpr .read-more-gdpr{text-decoration:underline;cursor:pointer}.step-description.gdpr .read-more-gdpr-exp{text-decoration:underline;cursor:pointer;color:#218BED}.gdpr-section{position:relative;padding-right:15px}.gdpr-section .close-gdpr{position:absolute;right:0px;top:-5px;font-size:20px;cursor:pointer;color:#95989A;display:none}.gdpr-section .step-description.gdpr.gdpr-more{display:none}.gdpr-section.active .step-description.gdpr .read-more-gdpr{display:none}.gdpr-section.active .close-gdpr,.gdpr-section.active .step-description.gdpr.gdpr-more{display:block}.gdpr-section-exp{position:relative;padding:0 15px 0 15px}.gdpr-section-exp .close-gdpr-exp{position:absolute;right:0px;top:-5px;font-size:20px;cursor:pointer;color:#95989A;display:none}.gdpr-section-exp .step-description.gdpr.gdpr-more{display:none}.gdpr-section-exp.active .step-description.gdpr .read-more-gdpr-exp{display:none}.gdpr-section-exp.active .close-gdpr-exp,.gdpr-section-exp.active .step-description.gdpr.gdpr-more{display:block}@media only screen and (max-width: 767px){#mainDropdown.open .dropdown-menu{display:block;width:298px;border-radius:2px;border:1px solid #D5D5D5;background:#F8F9FA;padding:0 10px;left:0;top:25px}#mainDropdown.open .dropdown-menu a:hover{text-decoration:none}#mainDropdown.open .dropdown-menu .main-dropdown-name{cursor:default;color:#6A7788;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:12px 0;border-bottom:1px solid #F0F1F3;margin-bottom:12px}#mainDropdown.open .dropdown-menu .dropdown-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;margin-bottom:8px;border:1px solid transparent}#mainDropdown.open .dropdown-menu .dropdown-item:hover{border-radius:2px;border:1px solid #D5D5D5;background:#FFF}#mainDropdown.open .dropdown-menu .dropdown-item.selected{border-radius:2px;border:1px solid #4BA920;background:#FFF}#mainDropdown.open .dropdown-menu .dropdown-item .main-plan-duration{color:#242538;font-size:14px;font-style:normal;font-weight:600;line-height:normal}#mainDropdown.open .dropdown-menu .dropdown-item .price-small{color:#6A7788;font-size:10px;font-style:normal;font-weight:600;line-height:normal}#mainDropdown.open .dropdown-menu .dropdown-item .save{color:#4BA920;font-size:14px;font-style:normal;font-weight:600;line-height:normal}#mainDropdown.open .dropdown-menu .dropdown-item .save.nos{color:#242538}#mainDropdown.open #dropdownPlanNames .selected-plan-p{border-radius:2px 2px 0 0;border:1px solid #D5D5D5;background:#F8F9FA}#mainDropdown #dropdownPlanNames{cursor:pointer;position:relative;top:5px}#mainDropdown #dropdownPlanNames .selected-plan-p{color:#6C6C6C;font-weight:500;font-size:12px;line-height:30px;max-width:fit-content;padding:0 8px;position:relative;border:1px solid #D5D5D5;bottom:9px;background:#F8F9FA;right:0}#mainDropdown #dropdownPlanNames .selected-plan-p:hover{border-radius:2px 2px 0 0;border:1px solid #D5D5D5;background:#F8F9FA}.col-custom-e{width:80% !important}.col-custom-f{width:20% !important;position:relative;right:8px}}.tp-widget-stars .single-star{width:120px !important}@media only screen and (max-width: 767px){#top-container{margin-bottom:35px !important}}
#PricingSection .special-card-container .pricing-table .white-green:hover,#PricingSection .special-card-container .pricing-table.active .white-green,#PricingSection .white-green.main-price-button:hover,#PricingSection .pricing-table.active .white-green.main-price-button,#PricingSection .pricing-table.best-value-plan:hover .white-green,#PricingSection .pricing-table.best-value-plan.active .white-green{background-color:#4ba920 !important;color:white !important;border:1px solid #4ba920}#PricingSection .white-green:hover,#PricingSection .pricing-table.active .white-green{background-color:#323232;color:white !important;border:1px solid #323232}.pricing-table .pricing-duration .text-primary{display:inline !important;color:#4ba920 !important}@media (min-width: 767px){.pricing-table .pricing-duration .text-primary{display:block !important}}@media (max-width: 767px){.default-october2020-pricing .special-card-container .pricing-table .offer-text{margin:0 !important;margin-top:45px !important}}._3yEuDo .special-card-container .pricing-table .offer-text{margin:0px 0px 75px 0px !important}@media (max-width: 767px){._3yEuDo .special-card-container .pricing-table .offer-text{margin:0 !important;margin-top:45px !important}}
.exposed-bar .client-info{display:none !important}._1y29 .main-footer{display:none}
.dedicated-ips-bar{padding:10px;background-color:#f8fafa;color:#6d6d6d}.dedicated-ips-bar .tooltip-dediclasd-info{position:relative}.bundle-options-price{font-size:32px;font-weight:700;color:#212121;margin-bottom:-5px}.bundle-options-price .new-price-currency{color:#242537;vertical-align:text-top;font-size:14px;font-weight:600;display:inline-block}.bundle-options-price .price{font-size:40px;font-weight:700}.bundle-options-price .new-price-month{display:inline-block;font-size:12px;font-weight:400;color:#6C6C6C}.form-element{background-color:white;padding:15px;border:solid gray 1px;border-radius:4px;color:#212121}.form-element .price-details-full{color:grey;font-size:12px;position:absolute}.pricing-options.display-table{width:100%;border-collapse:separate;border-spacing:20px}.pricing-options.display-table .table-cell{width:50%}@media (max-width: 767px){.pricing-options.display-table{border-spacing:0}.pricing-options.display-table .table-cell{display:block;margin-bottom:10px;width:100%}}.pricing-options.display-table .cell-container.display-table{width:100%;border-spacing:0px}.pricing-options.display-table .cell-container.display-table .table-cell{display:table-cell}.pricing-options.display-table .cell-container.display-table .left-cell{width:60%}.pricing-options.display-table .cell-container.display-table .right-cell{text-align:right}.dedicated-small-price{font-weight:normal;margin-left:19px}.dedicated-small-price .price{font-size:12px}#dedicated-countries-select-section{width:100%}#dedicated-countries-select-section .caret{position:absolute;right:10px;top:0;bottom:0;margin-top:auto;margin-bottom:auto}#dedicated-countries{border-radius:2px;border-color:#95989A;height:25px;font-size:12px;width:200px;padding:0}#dedicated-countries option{font-size:12px;background-repeat:no-repeat;background-position:bottom left;padding-left:30px}.dedicatedCheckField{display:block;position:relative;cursor:pointer;font-size:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dedicatedCheckField input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.dedicatedCheckmark{vertical-align:middle;display:inline-block;height:15px;width:15px;background-color:#fff;border:1px solid #666;margin-top:-3px}.dedicatedCheckField:hover input ~ .dedicatedCheckmark{background-color:#eee}.dedicatedCheckField input:checked ~ .dedicatedCheckmark{background-color:#4ba920;border:1px solid #4ba920;background-image:url(/img/element/shop/pricing/check-white.png);background-size:9px 7px;background-repeat:no-repeat;background-position:center;transition:0.1s all}.dedicatedCheckmark:after{content:"";position:absolute;display:none}.dedicatedCheckField input:checked ~ .dedicatedCheckmark:after{display:block}.dedicatedCheckField .textField{display:inline-block;margin-top:6px}.dedicatedCheckField .textField i{font-size:12px}.dedicated-ips-bar .price-details-full .price-details-info{display:inline-block;opacity:0;height:0;transition:0.5s all;font-size:14px;font-weight:300;color:#6F6F6F;background-color:#fff;border:1px solid #95989A;border-radius:2px;position:absolute;width:350px;z-index:2;-webkit-box-shadow:0px 1px 20px 0px rgba(33,33,33,0.2);-moz-box-shadow:0px 1px 20px 0px rgba(33,33,33,0.2);box-shadow:0px 1px 20px 0px rgba(33,33,33,0.2);top:40px;left:50px;-webkit-transform:translate(-50%, 0);-moz-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0);overflow:hidden}.dedicated-ips-bar .price-details-full:hover .price-details-info{opacity:1;height:auto;padding:20px 15px}.dedicated-ips-bar .price-details-full-xs .price-details-info-xs{display:inline-block;opacity:0;height:0;transition:0.5s all;font-size:12px;font-weight:300;color:#6F6F6F;background-color:#fff;border:1px solid #95989A;border-radius:2px;position:absolute;width:350px;max-width:100%;z-index:2;-webkit-box-shadow:0px 1px 20px 0px rgba(33,33,33,0.2);-moz-box-shadow:0px 1px 20px 0px rgba(33,33,33,0.2);box-shadow:0px 1px 20px 0px rgba(33,33,33,0.2);top:30px;left:50%;-webkit-transform:translate(-50%, 0);-moz-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0);overflow:hidden}.tooltip-dedicated-info{display:block;position:relative;top:-5px}.dedicated-ips-bar .price-details-full-xs:hover .price-details-info-xs{opacity:1;padding:5px 10px;height:auto}.price-details-full-xs i{font-size:20px}select#dedicated-countries.error,select#dedicated-countries.ng-touched.ng-empty{border:1.5px solid #f00}select#dedicated-countries.success{border:1.5px solid #4ba920}.success-green-border{background-color:#fff !important;border:1.5px solid #4ba920 !important}.error-red-border{background-color:#fff !important;border:1.5px solid #f00 !important}.bootstrap-select.form-control{border:0px;width:100%}.bootstrap-select.form-control .dropdown-menu{width:100%}.bootstrap-select button{width:100%}.dedicated-ips-bar .form-control{height:auto;padding:0}.dedicated-ips-bar .dropdown-menu.open{overflow:visible !important;min-height:auto !important;cursor:pointer;padding:0;margin:0;border:none}.dedicated-ips-bar .dropdown-menu a:focus{outline:none}.dedicated-ips-bar .select-country-alert{font-size:10px}#dedicated-countries,.dedicated-summary,.dedicated-total-value,.select-country-alert{display:none}@media (max-width: 767px){.dedicatedCheckmark{display:inline-block;position:relative;top:-1px}.dedicated-ips-bar .bootstrap-select{background-color:#f8fafa;border:0px solid #f8fafa;-webkit-box-shadow:inset 0 0px 0px transparent;box-shadow:inset 0 0px 0px transparent;-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}.dedicated-ips-bar .btn-group>.btn:first-child{position:initial;float:none;margin:0 auto}.dedicated-ips-bar .select-country-alert{position:relative}.dedicated-ips-bar .media{max-width:100% !important}#dedicatedIpsContent.active .price-details-info{left:-50px}}@media (max-width: 450px){.dedicated-ips-bar .price-details-full .price-details-info{max-width:250px;left:0px}}
.section-optional-add-ons-order-summary{margin:30px 0;position:relative;padding-left:35px;padding-right:35px;border-radius:4px;margin-left:-34px;margin-right:-34px}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary{padding-left:10px;padding-right:10px;margin-left:0;margin-right:0}}.section-optional-add-ons-order-summary h2{display:block !important;font-size:18px !important}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary h2{font-size:16px !important}}.section-optional-add-ons-order-summary .disabled-alert{color:#ff3b30;font-size:16px}.section-optional-add-ons-order-summary .bottom-arrow{position:absolute;text-align:center;width:200px;height:40px;background-image:url("/img/element/shop/add-ons/arrow-down.svg");background-size:fill;background-repeat:no-repeat;background-position:center top;top:100%;left:50%;margin-left:-100px}.section-optional-add-ons-order-summary .boxes-container{display:flex;flex-direction:column}.section-optional-add-ons-order-summary .boxes-container .box{background-color:white;border:1px solid #D5D5D5;border-radius:4px;box-sizing:border-box;flex-grow:1;flex-shrink:0;flex-basis:0;flex:1;flex-basis:auto;padding:20px;display:flex;flex-direction:row;margin-top:20px;cursor:pointer;align-items:center;position:relative}.section-optional-add-ons-order-summary .boxes-container .box.active{border-color:#4BA920}.section-optional-add-ons-order-summary .boxes-container .box.isactive{border-color:#4ba920}.section-optional-add-ons-order-summary .boxes-container .box.isactive .select-pricing{border-color:#4ba920}.section-optional-add-ons-order-summary .boxes-container .box .recommended-container{position:absolute;top:-24px;left:-1px;height:24px;background-color:#4BA920;color:#fff;font-size:12px;font-weight:bold;padding:5px 20px;border-top-left-radius:5px;border-top-right-radius:5px}.section-optional-add-ons-order-summary .boxes-container .box.box-aio{border-top-left-radius:0px}.section-optional-add-ons-order-summary .boxes-container .box .checkmark-container{padding-right:20px;display:flex;align-items:center;margin-left:20px}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary .boxes-container .box .checkmark-container{align-items:flex-start;padding-right:10px;padding-top:5px;margin-left:0px}}.section-optional-add-ons-order-summary .boxes-container .box .text-content{margin-bottom:auto;width:50%}.section-optional-add-ons-order-summary .boxes-container .box .text-content h3{font-size:16px;font-weight:700}.section-optional-add-ons-order-summary .boxes-container .box .text-content h3 .fa-info-circle{font-size:14px;color:#D5D5D5;vertical-align:super}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary .boxes-container .box .text-content h3{font-size:14px}}.section-optional-add-ons-order-summary .boxes-container .box .text-content p{font-size:12px;margin-top:5px}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary .boxes-container .box .text-content{width:100%}}.section-optional-add-ons-order-summary .boxes-container .box .text-content .tooltip-dip-countries{margin:0 0 0 5px;padding:0}.section-optional-add-ons-order-summary .boxes-container .box .controls-container{text-align:center;justify-content:center;display:flex;flex-direction:column}.section-optional-add-ons-order-summary .boxes-container .box .controls-container .price-addon .main-price{font-size:16px;font-weight:bold}.section-optional-add-ons-order-summary .boxes-container .box .controls-container .controls-content{font-size:10px}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary .boxes-container .box .controls-container{text-align:left}}.section-optional-add-ons-order-summary .boxes-container .box .box-content{width:100%;display:flex}.section-optional-add-ons-order-summary .boxes-container .box .box-content-pm{flex-direction:column}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary .boxes-container .box .box-content{flex-direction:column;padding-left:10px}}.section-optional-add-ons-order-summary .boxes-container .box.isactive .checkbox-svg .checkbox-base{fill:#4ba920;stroke:#4ba920}.section-optional-add-ons-order-summary .boxes-container .box.isactive .checkbox-svg .checkbox-check{fill:#fff;opacity:1}.section-optional-add-ons-order-summary .boxes-container .box.isactive .checkbox-svg .rectangle-shape{stroke:none}.section-optional-add-ons-order-summary .boxes-container .box.isdisabled:not(.isactive){background-color:#e5e5e5}.section-optional-add-ons-order-summary .boxes-container .box.isdisabled:not(.isactive) .checkbox-svg .rectangle-shape{fill:#D5D5D5}.section-optional-add-ons-order-summary .boxes-container .box.isdisabled:not(.isactive) .select-pricing{background-color:#e5e5e5}.section-optional-add-ons-order-summary .boxes-container .box.isdisabled{cursor:default !important}.section-optional-add-ons-order-summary .boxes-container .box.box-aio{margin-top:40px}.section-optional-add-ons-order-summary .boxes-container .box.no-extra-margin{margin-top:20px !important}.section-optional-add-ons-order-summary .boxes-container .box .right-section{display:flex;flex-grow:1}@media only screen and (min-width: 768px){.section-optional-add-ons-order-summary .boxes-container .box .right-section{padding-left:30px}.section-optional-add-ons-order-summary .boxes-container .box .right-section-pm{padding-left:0;margin-top:16px}.section-optional-add-ons-order-summary .boxes-container .box .right-section .ml-auto{margin-left:auto}}@media only screen and (max-width: 767.98px){.section-optional-add-ons-order-summary .boxes-container .box .right-section{flex-direction:column}}.section-optional-add-ons-order-summary .boxes-container .box .right-section .more-info{font-size:14px;font-weight:bold;display:flex;align-items:center}.section-optional-add-ons-order-summary .boxes-container .box .right-section .tooltip-dip-countries{margin:0;padding:0}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary .boxes-container .box{align-items:start}}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary .boxes-container{flex-direction:column}}.section-optional-add-ons-order-summary .checkbox-svg .checkbox-base{fill:#fff}.section-optional-add-ons-order-summary .checkbox-svg .checkbox-check{opacity:0}.section-optional-add-ons-order-summary .checkbox-svg .rectangle-shape{stroke:#D5D5D5;stroke-width:2px}.section-optional-add-ons-order-summary .cg-btn-link{font-size:16px;font-weight:700;text-decoration:underline;display:inline-block;padding:10px 15px;cursor:pointer}.section-optional-add-ons-order-summary .pricing-addon-form{text-align:center;position:relative;min-width:300px}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list{display:none;position:absolute;margin:0;padding-inline-start:0px;background:#FFFFFF;z-index:190;width:100%;border-radius:5px;border:2px #4BA920 solid;top:0;min-height:42px;padding:0 10px}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list .inactive{width:93%}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list li{list-style-type:none;text-align:left;width:100%;background:#FFFFFF;line-height:25px;font-size:12px;padding:10px 10px;cursor:pointer;margin-top:5px;margin-bottom:5px;font-weight:normal}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list li:hover{background:#F6F6F6}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list li.selected{background:#F0F5EA}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list li.selected:after{content:"\f00c";font-family:Font Awesome\ 5 Free;color:#4BA920;opacity:.9;font-weight:900;display:inline-block;background-repeat:no-repeat;background-size:18px;padding-right:19px;width:18px;height:14px;position:absolute;right:20px}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list li:first-child{padding:0px 10px;font-size:12px;font-weight:600}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list li .discount-text{font-size:14px;font-weight:600}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list li .dropdown-caret{color:#6A7788;position:absolute;top:13px;right:25px}.section-optional-add-ons-order-summary .pricing-addon-form .pricing-list li.inactive{background-color:transparent}.section-optional-add-ons-order-summary .pricing-addon-form .select-pricing{width:100%;background:#FFF;color:black;line-height:40px;font-size:14px;padding:0 20px;cursor:pointer;border:1px #D5D5D5 solid;border-radius:5px;text-align:left;font-weight:normal}.section-optional-add-ons-order-summary .pricing-addon-form .select-pricing .discount-text{color:#4BA920;font-weight:600}.section-optional-add-ons-order-summary .pricing-addon-form .select-pricing .dropdown-caret{color:#6A7788;position:absolute;top:13px;right:25px}#modal-remove-password-manager.modal .modal-dialog{min-width:600px;margin-top:200px}@media only screen and (max-width: 767px){#modal-remove-password-manager.modal .modal-dialog{min-width:0;margin-top:80px}}#modal-remove-password-manager.modal .modal-header{padding-top:50px}#modal-remove-password-manager.modal .modal-header .modal-title{margin-top:10px}@media only screen and (max-width: 767px){#modal-remove-password-manager.modal .modal-header{padding-top:30px}}#modal-remove-password-manager.modal .modal-footer{padding-bottom:50px}#modal-remove-password-manager.modal h4{font-size:20px;font-weight:600;line-height:1.2em}#modal-remove-password-manager.modal p{font-size:16px;line-height:1.2em;margin-top:35px;margin-bottom:15px}#modal-remove-password-manager.modal ul{padding-left:0;list-style-position:inside;font-size:16px;font-weight:600;margin-top:20px}#modal-remove-password-manager.modal .modal-icon{width:90px}#modal-remove-password-manager.modal .cg-btn{font-size:16px;font-weight:600;min-width:150px}#modal-remove-password-manager.modal .cg-btn.darkblue{border:1px solid #1D1E2F}#modal-remove-password-manager.modal .cg-btn.btn-darkblue{border:1px solid #1D1E2F;background-color:white}.password-manager-text{color:#6C6C6C;font-weight:500;font-size:16px;line-height:30px}.dedicated-country,.dedicated-country-text{font-weight:500 !important}@media only screen and (max-width: 767px){.password-manager-text{font-size:12px}.dedicated-country,.dedicated-country-text{font-size:12px !important}}.tpd-skin-dark .tpd-background{background-color:#242638 !important}.tooltip-content-dip-countries{padding:0 5px}.tooltip-content-dip-countries header{background-color:transparent;color:#fc0;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.2)}.tooltip-content-dip-countries ul{padding-left:0;list-style-type:none}.tooltip-content-dip-countries ul.left{float:left;margin-right:5px}.tooltip-content-dip-countries ul.right{float:right;margin-left:5px}.tooltip-content-dip-countries ul li{font-weight:600;font-size:13px;margin-top:5px;margin-bottom:5px}.tooltip-content-dip-countries ul li .dip-country-flag{display:inline-block;vertical-align:middle;margin-right:5px}@media only screen and (max-width: 767px){.section-optional-add-ons-order-summary .right-section .more-info .pricing-addon-form{min-width:100% !important;margin-top:15px;margin-bottom:15px}}@media only screen and (max-width: 354px){.section-optional-add-ons-order-summary .right-section .more-info .pricing-addon-form{min-width:135% !important;margin-left:-35px;margin-top:15px;margin-bottom:15px}}
.modal.dip-sell .modal-dialog,.modal.wss-sell .modal-dialog{max-width:850px !important;width:100%}.modal.dip-sell .modal-header,.modal.wss-sell .modal-header{background-color:#242537;color:#fff;padding-bottom:0;padding-top:10px !important}.modal.dip-sell .modal-header .modal-title,.modal.wss-sell .modal-header .modal-title{color:#ffffff;margin-top:20px}.modal.dip-sell .modal-header .modal-icon,.modal.wss-sell .modal-header .modal-icon{position:relative;top:28px}.modal.dip-sell .modal-header .modal-countdown,.modal.wss-sell .modal-header .modal-countdown{font-size:16px}.modal.dip-sell .modal-header .modal-countdown>.time_unit.days .text,.modal.wss-sell .modal-header .modal-countdown>.time_unit.days .text{margin-right:10px}.modal.dip-sell .modal-header .modal-countdown>.time_unit>.number,.modal.wss-sell .modal-header .modal-countdown>.time_unit>.number{font-weight:bold;color:#fc0}.modal.dip-sell .modal-header .modal-countdown>.time_unit>.text,.modal.wss-sell .modal-header .modal-countdown>.time_unit>.text{display:inline-block;font-size:14px;color:#fff;line-height:1em;opacity:0.8;font-weight:200;padding-left:5px}.modal.dip-sell .modal-header .modal-countdown>.separator,.modal.wss-sell .modal-header .modal-countdown>.separator{display:inline-block;padding:0 5px;font-size:16px}.modal.dip-sell .modal-header .modal-countdown>.time_unit.days,.modal.wss-sell .modal-header .modal-countdown>.time_unit.days{border:0;padding:0;height:0;vertical-align:unset}.modal.dip-sell .modal-header .modal-countdown>.time_unit.days span,.modal.wss-sell .modal-header .modal-countdown>.time_unit.days span{transform:translateY(0);vertical-align:unset;padding:0 5px;font-size:16px;height:0;border:0;top:0}.modal.dip-sell .modal-header .modal-countdown>.time_unit.days .text,.modal.wss-sell .modal-header .modal-countdown>.time_unit.days .text{border:0;padding:0;height:0;top:0}.modal.dip-sell .modal-body .digital-privacy-box,.modal.wss-sell .modal-body .digital-privacy-box{padding:0 !important;border:2px solid #f8f9fa;margin:20px 35px 0}.modal.dip-sell .modal-body .digital-privacy-box .small-mention,.modal.wss-sell .modal-body .digital-privacy-box .small-mention{font-weight:500;color:#6C6C6C;font-size:12px}.modal.dip-sell .modal-body .digital-privacy-box .bigger-text,.modal.wss-sell .modal-body .digital-privacy-box .bigger-text{font-size:23px}.modal.dip-sell .modal-body .digital-privacy-box .big-text,.modal.wss-sell .modal-body .digital-privacy-box .big-text{font-size:20px}.modal.dip-sell .modal-body .digital-privacy-box .text-content,.modal.wss-sell .modal-body .digital-privacy-box .text-content{text-align:left;width:60%;margin:0 auto}@media (max-width: 767px){.modal.dip-sell .modal-body .digital-privacy-box .text-content,.modal.wss-sell .modal-body .digital-privacy-box .text-content{padding-left:11%}}@media (max-width: 510px){.modal.dip-sell .modal-body .digital-privacy-box .text-content,.modal.wss-sell .modal-body .digital-privacy-box .text-content{width:65%}}.modal.dip-sell .modal-body .digital-privacy-box .text-content .antivirus-icon,.modal.wss-sell .modal-body .digital-privacy-box .text-content .antivirus-icon{float:left;padding-right:5px}.modal.dip-sell .modal-body .digital-privacy-box .text-content p,.modal.wss-sell .modal-body .digital-privacy-box .text-content p{width:100% !important}.modal.dip-sell .modal-body .digital-privacy-box .text-content p:not(:last-child),.modal.wss-sell .modal-body .digital-privacy-box .text-content p:not(:last-child){line-height:30px}.modal.dip-sell .modal-body .digital-privacy-box .dedicated-ip,.modal.wss-sell .modal-body .digital-privacy-box .dedicated-ip{width:78%}.modal.dip-sell .modal-body .digital-privacy-box .price-addon,.modal.wss-sell .modal-body .digital-privacy-box .price-addon{width:63%}.modal.dip-sell .modal-body .digital-privacy-box .triangle,.modal.wss-sell .modal-body .digital-privacy-box .triangle{height:60px;position:absolute;left:-35px;transform:rotate(-90deg) translateX(-23%)}@media (max-width: 767px){.modal.dip-sell .modal-body .digital-privacy-box .triangle,.modal.wss-sell .modal-body .digital-privacy-box .triangle{top:-30px;left:auto;transform:rotate(0deg) translateX(-50%)}}@media (max-width: 767px){.modal.dip-sell .modal-body .digital-privacy-box .right-box,.modal.wss-sell .modal-body .digital-privacy-box .right-box{padding-bottom:50px}}.modal.dip-sell .modal-footer,.modal.wss-sell .modal-footer{padding-top:0 !important}.modal.dip-sell .modal-footer .cg-btn,.modal.dip-sell .modal-footer .cg-line-btn,.modal.wss-sell .modal-footer .cg-btn,.modal.wss-sell .modal-footer .cg-line-btn{padding:10px 50px !important}.modal.dip-sell .modal-footer .float-right,.modal.wss-sell .modal-footer .float-right{float:right}@media (max-width: 767px){.modal.dip-sell .modal-footer .float-right,.modal.wss-sell .modal-footer .float-right{float:none}}.modal.dip-sell .modal-footer .float-left,.modal.wss-sell .modal-footer .float-left{float:left}@media (max-width: 767px){.modal.dip-sell .modal-footer .float-left,.modal.wss-sell .modal-footer .float-left{float:none}}@media (max-width: 767px){.modal.dip-sell .modal-footer .col-sm-6,.modal.wss-sell .modal-footer .col-sm-6{padding-left:15px !important;padding-right:15px !important}}.modal.dip-sell .modal-footer .money-back,.modal.wss-sell .modal-footer .money-back{font-size:12px;font-weight:bold;color:#6C6C6C}@media (max-width: 767px){.modal.dip-sell .modal-footer>div,.modal.wss-sell .modal-footer>div{padding-top:0}}#modal-ss-cross-sell .countdown{display:inline-block}#modal-dip-cross-sell .right-box .triangle{transform:rotate(-90deg) translateX(-20%)}@media (max-width: 767px){#modal-dip-cross-sell .right-box .triangle{transform:rotate(0deg) translateX(-50%)}}@media (max-width: 767px){#modal-dip-cross-sell .right-box{padding-top:50px}}#modal-dip-cross-sell .countdown{display:inline-block}#dip-cross-sell-countdown.hide-days .time_unit.days{display:none}#ss-cross-sell-countdown.hide-days .time_unit.days{display:none}body.el .crosssell-switch-btn{font-size:17px !important}
.billing-plans-include{color:#212121}@media (max-width: 767.98px){.billing-plans-include{width:100%;margin-left:auto;margin-right:auto}}.billing-plans-include .heading{margin-bottom:6px}.billing-plans-include.has-variation-b .heading{margin-bottom:8px}@media (max-width: 575.98px){.billing-plans-include.has-variation-b .heading{display:none}}.billing-plans-include .heading h3{font-size:18px;font-weight:600}.billing-plans-include.has-variation-b .heading h3{text-align:center}.billing-plans-include section ul{list-style-type:none;margin:0;padding:0;margin-top:6px}@media (max-width: 767.98px){.billing-plans-include section ul{margin-top:0}}.billing-plans-include.has-variation-b section ul{display:flex;justify-content:center;flex-wrap:wrap;margin-top:0}.billing-plans-include section ul li{display:inline-flex;align-items:flex-start;padding:0 25px 0 0;font-size:14px;color:#212121}@media (max-width: 767.98px){.billing-plans-include section ul li{display:flex;align-items:center;padding:0 25px 0 0;font-size:12px}}.billing-plans-include section ul li::before{display:none}.billing-plans-include section ul li .icon{font-size:0;line-height:0;padding:3px 0;padding-right:10px}@media (max-width: 767.98px){.billing-plans-include section ul li .icon{padding-top:0}}.billing-plans-include section ul li .icon svg{height:10px;width:13px}.billing-plans-include section ul li .icon svg path{fill:#4BA920}.billing-plans-include section ul li .text strong{font-weight:600}.billing-plans-include section ul li .text.text-devices>strong{margin-right:5px}@media (max-width: 767.98px){.billing-plans-include section ul li .text .devices-icons img{height:14px;width:auto}}.billing-plans-include.has-variation-b section ul li{margin-bottom:10px}@media (min-width: 576px) and (max-width: 991.98px){.billing-plans-include.has-variation-b section ul li{width:unset}}@media (max-width: 575.98px){.billing-plans-include.has-variation-b section ul li{width:100%;margin-bottom:6px}}.billing-plans-include-wrapper,.billing-plans-include-wrapper.is-over-plans{margin-top:48px}@media (min-width: 576px) and (max-width: 767.98px){.billing-plans-include-wrapper,.billing-plans-include-wrapper.is-over-plans{margin-top:24px}}@media (max-width: 575.98px){.billing-plans-include-wrapper,.billing-plans-include-wrapper.is-over-plans{margin-top:16px}}.billing-plans-include-wrapper.is-between-plans-and-addons{margin-top:-24px;margin-bottom:36px}@media (min-width: 576px) and (max-width: 767.98px){.billing-plans-include-wrapper.is-between-plans-and-addons{margin-top:24px;margin-bottom:36px}}@media (max-width: 575.98px){.billing-plans-include-wrapper.is-between-plans-and-addons{margin-top:20px;margin-bottom:40px}}
#PricingSection>.container>.row{display:flex;flex-wrap:wrap}@media (min-width: 1200px){#PricingSection .pricing-table-container-special{width:320px !important}#PricingSection .pricing-table-container-first,#PricingSection .pricing-table-container-second,#PricingSection .pricing-table-container-third{width:272px !important}}#PricingSection .pricing-table-container-first .pricing-table,#PricingSection.has-coupon .pricing-table-container-second .pricing-table,#PricingSection .pricing-table-container-third .pricing-table{height:280px}#PricingSection:not(.has-coupon) .pricing-table-container-second .pricing-table{height:280px}@media only screen and (min-width: 767px){#PricingSection .pricing-table-container.special-card .pricing-table{height:350px}}#PricingSection .pricing-table-container{margin:15px 0 15px 0;padding:0px !important}@media (max-width: 767.98px){#PricingSection .pricing-table-container>.pricing-table{margin-left:auto !important;margin-right:auto !important}}#PricingSection .pricing-table-container-special{position:relative;z-index:1}#PricingSection a.pricing-table:hover,#PricingSection a.pricing-table:focus{text-decoration:none}#PricingSection .white-green{background-color:#FFFFFF;border:1px solid black;color:black;border-radius:10px;box-shadow:none;margin-top:20px}#PricingSection .white-green:hover{color:white;background-color:#4ba920;border:1px solid #4ba920}#PricingSection .special-card-container .pricing-table .pricing-table .pricing-duration{color:white}#PricingSection .special-card-container .pricing-table .white-green{background-color:#FFFFFF;border:1px solid black;color:black}#PricingSection .special-card-container .pricing-table .white-green,#PricingSection .special-card-container .pricing-table.active .white-green,#PricingSection .special-card-container .pricing-table:hover .white-green{border:1px solid transparent}@media (min-width: 576px){#PricingSection .special-card-container .pricing-table .white-green,#PricingSection .special-card-container .pricing-table.active .white-green,#PricingSection .special-card-container .pricing-table:hover .white-green{width:200px}}#PricingSection .special-card-container .pricing-table.active .white-green,#PricingSection .special-card-container .pricing-table:hover .white-green{background-color:#4ba920;color:white;border:1px solid #4ba920}@media (min-width: 992px) and (max-width: 1199.98px){#PricingSection .special-card-container .pricing-table.active .white-green,#PricingSection .special-card-container .pricing-table:hover .white-green{width:200px}}@media (max-width: 767.98px){#PricingSection .special-card-container .pricing-table.active .white-green,#PricingSection .special-card-container .pricing-table:hover .white-green{width:unset}}#PricingSection .string-prices-currency_boxes{position:absolute;top:0;right:24px;max-width:330px;text-align:right;font-size:12px;color:#6C6C6C}@media (max-width: 767.98px){#PricingSection .string-prices-currency_boxes{display:none}}#PricingSection .string-prices-currency_section-end{font-weight:500;color:#6C6C6C;font-size:12px}#PricingSection.has-notification-container-extra-margin .notification-container.active{margin-bottom:48px}.pricing-table .pricing-duration .text-line-through{font-size:16px;font-weight:400;text-decoration:line-through}@media (max-width: 767.98px){.pricing-table .pricing-duration .text-line-through{display:none !important}}.pricing-breadcrumbs{z-index:1000;width:100%;height:45px;padding-top:22px;text-align:left;font-size:16px;font-weight:700;color:#bebebe}@media (min-width: 576px) and (max-width: 767.98px){.pricing-breadcrumbs{font-size:14px;padding-top:12px}}@media (max-width: 575.98px){.pricing-breadcrumbs{font-size:12px;padding-top:10px}}.pricing-breadcrumbs.has-variation-b{display:flex;align-items:flex-start;height:unset;color:#6A7788}@media (max-width: 575.98px){.pricing-breadcrumbs.has-variation-b{justify-content:center;align-items:baseline}}.pricing-breadcrumbs .breadcrumb-step{position:relative;text-decoration:none;font-weight:400}.pricing-breadcrumbs .breadcrumb-step.active{font-weight:700;color:#242538}.pricing-breadcrumbs .breadcrumb-step.breadcrumbs-step-1:hover{color:#242538}.pricing-breadcrumbs .breadcrumb-step::before{content:'';position:absolute;z-index:1;top:0;left:0;transform:translate(-100%, 1px);display:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:600;line-height:1;color:white;background:#6A7788}@media (max-width: 575.98px){.pricing-breadcrumbs .breadcrumb-step::before{width:16px;height:16px;font-size:10px}}.pricing-breadcrumbs .breadcrumb-step::after{content:'';box-sizing:inherit;position:absolute;bottom:-5px;left:0;display:none;width:100%;height:2px;background:#fc0}.pricing-breadcrumbs .breadcrumb-step.active::after{display:block}.pricing-breadcrumbs .breadcrumb-step.active::before{background:#242538}.pricing-breadcrumbs.has-variation-b .breadcrumb-step{margin-left:20px;padding-left:8px;color:#6A7788}.pricing-breadcrumbs.has-variation-b .breadcrumb-step.active{color:#242538 !important}.pricing-breadcrumbs.has-variation-b .breadcrumb-step::before{display:flex}.pricing-breadcrumbs.has-variation-b .breadcrumb-step.active::before{font-weight:700}.pricing-breadcrumbs.has-variation-b .breadcrumb-step::after{display:none !important}.pricing-breadcrumbs .breadcrumbs-step-1,.pricing-breadcrumbs .breadcrumbs-step-2{color:#6A7788}.pricing-breadcrumbs .breadcrumbs-step-1{flex-shrink:0}@media (max-width: 575.98px){.pricing-breadcrumbs .breadcrumbs-step-1{margin-right:12px}}.pricing-breadcrumbs .breadcrumbs-step-1::before{content:'1'}.pricing-breadcrumbs .breadcrumbs-step-2::before{content:'2'}.pricing-breadcrumbs>i.fas{align-self:center;padding:0 18px;font-size:0.875em}@media (max-width: 767.98px){.pricing-breadcrumbs>i.fas{padding:0 16px}}@media (max-width: 575.98px){.pricing-breadcrumbs>i.fas{display:none}}@media screen and (max-width: 767px){#step3{padding-top:0 !important}}.mobile-selected{display:none}#PricingSection .pricing-table{display:block;text-align:center;position:relative;opacity:1 !important;box-shadow:0 0 0 0 transparent,0 0 0 1px #95989A;transition:0.3s all}#PricingSection .pricing-table .pricing-table-content-wrapper{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:flex;flex-direction:column;justify-content:space-between;height:100%;overflow:hidden}#PricingSection .pricing-table .money-back{display:block;height:0px;font-size:12px;color:#969696;padding-top:0;padding-bottom:15px;padding-left:10px;padding-right:10px}#PricingSection .pricing-table .offer-badge{position:absolute;z-index:1;top:0;left:50%;transform:translate(-50%, -50%);width:100%}#PricingSection .pricing-table .offer-text{display:inline-block;max-width:90%;padding:8px 27px;margin:0 !important;border-radius:20px;font-size:12px;font-weight:700;text-align:center;color:#FFFFFF;background-color:#4BA920}body.vi #PricingSection .pricing-table .offer-text{font-size:10px;max-width:96%}#PricingSection .pricing-table.pricing-table-middle .price-save span{font-size:12px}#PricingSection .pricing-table.pricing-table-middle .offer-text{font-size:12px}#PricingSection .pricing-table .price-save{position:absolute;top:18px;left:-125px;text-align:center;transform:rotate(-32deg);-webkit-transform:rotate(-32deg);width:360px;z-index:2;color:white;background-color:#D5D5D5;transition:0.5s all;text-transform:capitalize}#PricingSection .pricing-table .price-save span{display:inline-block;font-size:14px;font-family:"Montserrat", "sans-serif";padding:10px 0;color:#fff;font-weight:700;max-width:100px}#PricingSection .pricing-table.active .price-save,#PricingSection .pricing-table:hover .price-save{background-color:#4ba920}#PricingSection .pricing-table .price-details{display:inline-block;position:relative;opacity:1;transition:0.5s all;font-size:12px;color:#6C6C6C}#PricingSection .pricing-table .price-details .price-details-full{font-size:12px}#PricingSection .pricing-table .price-details .price-details-full em{font-style:normal;text-transform:none}#PricingSection .pricing-table .price-details .price-details-full em span{display:inline-block}#PricingSection .pricing-table .new-price{font-size:40px;font-weight:900;color:#212121}#PricingSection .pricing-table .new-price .new-price-currency{color:#242537;vertical-align:text-top;font-size:14px;font-weight:900;margin-top:7px;display:inline-block}@media (max-width: 767px){#PricingSection .pricing-table .new-price .new-price-currency{color:#6C6C6C;font-size:16px;vertical-align:middle;margin:0}}.ja #PricingSection .pricing-table .new-price .new-price-currency{font-size:20px;margin-top:5px}#PricingSection .pricing-table .new-price .price{display:inline}#PricingSection .pricing-table .new-price .new-price-month{display:inline-block;font-size:16px;font-weight:400;opacity:0.7}#PricingSection .pricing-table .pricing-duration{font-size:18px;font-weight:600;color:#212121;transition:.3s all}#PricingSection .pricing-table:hover{box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1),0 0 0 1px #95989A}#PricingSection .pricing-table.active{z-index:1;background:white;box-shadow:0px 0 24px 0px rgba(0,0,0,0.1),0 0 0 1px #323232 !important}@media (max-width: 767.98px){#PricingSection .pricing-table.active{box-shadow:0px 0 24px 0px rgba(0,0,0,0.1),0 0 0 1px #323232 !important}}#PricingSection .pricing-table.active .pricing-duration{padding-top:0px;font-weight:700}#PricingSection .pricing-table span{display:block;text-align:center}#PricingSection .special-card-container .pricing-table{background-size:100% auto;background-repeat:no-repeat;background-position:center;height:360px !important;margin-top:-12px !important;border-radius:4px}@media (max-width: 767.98px){#PricingSection .special-card-container .pricing-table{max-height:320px !important}}#PricingSection .special-card-container .pricing-table.active{box-shadow:0px 0 32px 0px rgba(0,0,0,0.2),0 0 0 2px #4BA920 !important}@media (max-width: 767.98px){#PricingSection .special-card-container .pricing-table.active{box-shadow:0px 0 24px 0px rgba(0,0,0,0.1),0 0 0 2px #4BA920 !important}}#PricingSection .special-card-container .pricing-table .price-current{transition:0.3s padding-top}#PricingSection .special-card-container .pricing-table .pricing-duration{font-size:18px;padding-top:0}#PricingSection .special-card-container .pricing-table .new-price{font-size:40px;color:#333;position:relative;bottom:9px}#PricingSection .special-card-container .pricing-table .choose-plan a{background-color:white;border:1px solid black}#PricingSection .special-card-container .pricing-table .choose-plan .money-back{color:white}@media (min-width: 1200px){#PricingSection .special-card-container .pricing-table-content-middle{padding-top:0}}#PricingSection .special-card-container .pricing-table-content-bottom{border-radius:0 0 4px 4px;overflow:hidden}#PricingSection .special-card-container .pricing-table.active .pricing-table-content-bottom{border-radius:0 0 4px 4px}#PricingSection .special-card-container .card-decoration{padding-top:10px}#PricingSection .special-card-container .special-card-panel{background:#4BA920;color:white;padding:12px 4px;font-size:14px;font-weight:700}@media (min-width: 992px) and (max-width: 1199.98px){#PricingSection .special-card-container .special-card-panel{font-size:13px}}.notification-container{display:block;visibility:hidden;opacity:0;transition:0.5s all;background-color:#faeae8;box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1),0 0 0 1px #FF3E3E;border-radius:2px;font-size:12px;padding:0 15px;overflow:hidden}.notification-container .notification{color:#FF3E3E;line-height:1.5em}.notification-container .notification span strong:first-of-type:before{content:'\0024D8';display:inline-block;background-size:18px auto;background-repeat:no-repeat;height:17px;width:25px;margin-bottom:-3px;padding-right:5px}.notification-container.active{opacity:1;visibility:visible;padding:5px 15px;max-height:150px}.notification-container-blue{display:block;visibility:hidden;opacity:0;transition:0.5s all;background-color:#017ABA0F;box-shadow:none !important;border-radius:2px;font-size:12px;padding:0 15px;overflow:hidden}.notification-container-blue .notification{color:#2688c2;line-height:1.5em}.notification-container-blue .notification span strong:first-of-type:before{content:'' !important;display:inline-block;background-size:18px auto;background-repeat:no-repeat;height:17px;width:0 !important;margin-bottom:-3px;padding-right:0 !important}.notification-container-blue.active{opacity:1;visibility:visible;padding:5px 15px;max-height:150px}.notification-container-hero{display:block;visibility:hidden;opacity:0;transition:0.5s all;background-color:#F4FAF2;box-shadow:#F4FAF2;border-radius:2px;font-size:12px;padding:0 15px;overflow:hidden}body.de .notification-container-hero,body.es .notification-container-hero,body.hu .notification-container-hero,body.nb .notification-container-hero{font-size:10px}body.el .notification-container-hero{font-size:9px}body.pt .notification-container-hero,body.sv .notification-container-hero{font-size:11px}.notification-container-hero .notification{color:#4BA920;line-height:1.5em;display:flex;padding:5px}@media only screen and (max-width: 768px){.notification-container-hero .notification{font-size:11px}}.notification-container-hero .notification span strong:first-of-type:before{content:url("/img/campaigns/halloween22/green-icon.svg");display:inline-block;background-size:18px auto;background-repeat:no-repeat;height:17px;width:25px;margin-bottom:-3px;padding-right:5px}.notification-container-hero .notification-img{margin-right:10px}@media only screen and (max-width: 768px){.notification-container-hero .notification-img{width:32px}}.notification-container-hero.active-hero{opacity:1;visibility:visible;margin-top:13.5px}.pricing-table .choose-plan,.pricing-table:hover .choose-plan,.pricing-table.active .choose-plan{display:block}.pricing-table .choose-plan a{width:90%}.pricing-table .choose-plan button{width:14em}.pricing-table .choose-plan .btn-add{width:90%}@media only screen and (max-width: 765px){.pricing-table .choose-plan .btn-add{color:#fff}}.checked-coupon{position:absolute;height:22px;width:22px;background-color:#fff;border:1px solid #95989A;right:15px;top:15px;transition:0.5s all;border-radius:2px}.checked-coupon i{display:none}.no-coupon .pricing-table:not(.pricing-table-middle){margin:15px 25px 0}.no-coupon .notification-container{margin:5px 25px 0}#PricingSection .special-card-container .pricing-table:hover .price-save{background-color:#4BA920}@media (max-width: 767.98px){#PricingSection .special-card-container .new-price .price{font-size:18px}}@media (max-width: 767.98px){#PricingSection .special-card-container .new-price .new-price-currency{vertical-align:unset;margin-right:2px}}@media (max-width: 767.98px){#PricingSection .special-card-container .new-price .new-price-month{margin-left:0}}.pricing-table-container .pricing-table:hover .choose-plan a{border:1px solid #4ba920}.pricing-table-container .pricing-table.active .checked-coupon i{color:#fff;display:inline-block}.plan-tip.pricing-cards,.visible-mobile{display:none !important}@media (max-width: 1199px){#PricingSection:not(.has-coupon) .pricing-table-container-second .pricing-table{height:250px}}@media (max-width: 767px){#PricingSection .pricing-table-container .pricing-table .mobile-special{padding-top:30px !important}}@media (max-width: 991px){#PricingSection .pricing-table .new-price{font-size:32px}#PricingSection .pricing-table .price-save{top:11px;left:-135px}#PricingSection .notification-container{font-size:10px}#PricingSection .pricing-table-container .pricing-table .price-save span{font-size:10px;width:85px}#PricingSection .pricing-table-container-first .pricing-table,#PricingSection.has-coupon .pricing-table-container-second .pricing-table,#PricingSection .pricing-table-container-third .pricing-table{height:280px}#PricingSection:not(.has-coupon) .pricing-table-container-second .pricing-table{height:275px}#PricingSection .pricing-table .money-back{font-size:11px}}@media (max-width: 767px){#PricingSection:not(.has-coupon).pricing-table-container-second .pricing-table,#PricingSection .pricing-table-container-first .pricing-table,#PricingSection.has-coupon .pricing-table-container-second .pricing-table,#PricingSection .pricing-table-container-third .pricing-table{padding:10px;height:190px}.no-coupon .pricing-table:not(.pricing-table-middle){margin:0}.no-coupon .notification-container{height:0px;max-height:0px;transition:1s all;overflow:hidden;padding:0 15px;margin:0 auto}.no-coupon .notification-container.active{height:auto;max-height:100px;padding:5px 15px;margin-top:5px}.notification-container{height:0px;max-height:0px;transition:1s all;overflow:hidden;padding:0 15px;margin:0}.notification-container.active{height:auto;max-height:100px;padding:5px 15px;margin-top:5px}.pricing-table-container{margin:10px 0}.flex-mobile{display:flex;flex-wrap:wrap}.pricing-table-container-second{order:1}.pricing-table-container-third{order:2}.pricing-table-container-first{order:0}.visible-mobile{display:inline-block !important}.special-card-container .pricing-table .offer-text,.no-coupon .pricing-table .offer-text{font-size:12px}.special-card-container .pricing-table{box-shadow:0px 0 24px 0px rgba(0,0,0,0.1),0 0 0 2px #4BA920}.special-card-container .pricing-table .choose-plan a{background-color:#4ba920 !important;border:1px solid #4ba920 !important}.special-card-container .pricing-table .pricing-duration{display:inline-block;font-size:16px;color:#6C6C6C;padding:0}.special-card-container .pricing-table .price-current{padding-top:0}.special-card-container .pricing-table .new-price{display:inline-block;font-size:16px;color:#6C6C6C;padding:0}.special-card-container .pricing-table .new-price .new-price-currency{display:inline-block;font-size:16px;color:white;padding:0;margin:0;vertical-align:middle}.special-card-container .pricing-table .comma{display:inline-block;font-size:16px;color:#6C6C6C;padding:0}#PricingSection .pricing-table .pricing-duration,#PricingSection .pricing-table .new-price,#PricingSection .pricing-table .comma{display:inline-block;font-size:16px;color:#6C6C6C;padding:0}#PricingSection .pricing-table .price-details{color:white;opacity:0.7;position:relative;width:auto;box-shadow:none;border:none;top:0;left:auto;right:auto;transform:none;padding:0}#PricingSection .pricing-table.active .price-current,#PricingSection .pricing-table:not(.active) .price-current.mobile-selected{display:none}#PricingSection .pricing-table.active .price-current.mobile-selected,#PricingSection .pricing-table:not(.active) .price-current{display:block}.nospy #PricingSection .special-card-container .pricing-table,#PricingSection .special-card-container .pricing-table{background-image:none}.checked-coupon{border-radius:4px;font-size:10px;width:15px;height:15px;top:10px;right:10px;vertical-align:middle}.plan-tip.pricing-cards{display:block !important;opacity:0;transition:0.5s all;background-color:rgba(255,204,0,0.1);-webkit-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1),0 0 0 2px #fc0;-moz-box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1),0 0 0 2px #fc0;box-shadow:0px 5px 20px 0px rgba(0,0,0,0.1),0 0 0 2px #fc0;border-radius:2px;height:0px;max-height:0px;padding:0;margin:0;overflow:hidden;text-align:center}.plan-tip.pricing-cards span.button{font-size:10px;margin:5px;font-weight:600}.plan-tip.pricing-cards.active{height:auto;max-height:100px;padding:5px 15px;margin-top:8px;opacity:1}}@media only screen and (max-width: 767px) and (max-width: 765px){.plan-tip.pricing-cards{display:none !important}}.privacy-guard-text{color:#6c6c6c;font-weight:600;font-size:16px;line-height:30px}.addons-slide{color:#6d6d6d;font-weight:bold;font-size:18px;cursor:pointer;padding-left:10px}.pricing-table-container .special-card-container .pricing-table{background-size:100% auto;background-repeat:no-repeat;background-position:center;background-color:#FFF}.pricing-table-container .special-card-container .pricing-table.active .checked-coupon{background-color:#FFFFFF;border:1px solid #FFFFFF}.pricing-table-container .special-card-container .pricing-table.active .checked-coupon i{color:#4BA920}@media only screen and (max-width: 767px){.pricing-table-container .special-card-container .pricing-table.active .checked-coupon{background-color:#4BA920}.pricing-table-container .special-card-container .pricing-table.active .checked-coupon i{color:#1D1E2F}}@media only screen and (min-width: 767px){.big-height{height:350px !important}.medium-height{height:300px}}.pricing-table .main-price-button{background-color:#FFFFFF !important;border:1px solid black !important;color:black !important}.pricing-table.active .main-price-button,.pricing-table:hover .main-price-button{background-color:#4ba920 !important;color:white !important;border:1px solid #4ba920 !important}.pricing-duration del:after{content:"\A";white-space:pre}.cg-btn,.cg-line-btn{padding:10px 15px !important;border-radius:4px !important}@media (min-width: 768px){#PricingSection .pricing-boxes-row{padding-left:17px;padding-right:17px}}@media only screen and (max-width: 767px){#PricingSection .pricing-table.best-value-plan{margin-left:auto;margin-right:auto;max-height:190px;box-shadow:0 0 0 0 transparent, 0 0 0 1px #95989A}#PricingSection .pricing-table.best-value-plan.active{box-shadow:0px 0 24px 0px rgba(0,0,0,0.1),0 0 0 2px #4BA920}}@media only screen and (max-width: 767px){#PricingSection .pricing-table.best-value-plan .white-green{color:#FFF}}#PricingSection .pricing-table-container-first{text-align:left}#PricingSection .pricing-table-container-second{text-align:center}#PricingSection .pricing-table-container-third{text-align:right}@media only screen and (max-width: 767px){#PricingSection .pricing-table-container-first{text-align:center}#PricingSection .pricing-table-container-second{text-align:center}#PricingSection .pricing-table-container-third{text-align:center}}#PricingSection .pricing-table{margin-left:0;margin-right:0;width:100%}@media only screen and (max-width: 767px){#PricingSection .pricing-table{width:91% !important}}#PricingSection .pricing-table .pricing-duration del{font-size:14px}#PricingSection .pricing-table .choose-plan a{width:auto;min-width:70%;padding:7px 15px !important;font-size:16px}#PricingSection .pricing-table.pricing-table-coupon,#PricingSection .pricing-table.pricing-you{max-width:100%}#PricingSection .notification-container{display:block;margin-left:auto;margin-right:auto;margin-top:8px;width:95%}#PricingSection .notification-container-blue{width:100%}#PricingSection .pricing-table-container-first .pricing-table,#PricingSection .pricing-table-container-third .pricing-table{height:300px;margin-top:60px}@media only screen and (max-width: 767px){#PricingSection .pricing-table-container-first .pricing-table,#PricingSection .pricing-table-container-third .pricing-table{height:190px;margin-top:0}}#PricingSection .pricing-table-container-second .pricing-table{height:380px !important}@media only screen and (max-width: 767px){#PricingSection .pricing-table-container-second .pricing-table{max-width:100%;height:210px !important}}#PricingSection.has-coupon .pricing-table-container-first .pricing-table{width:99%;margin-left:1px}#PricingSection.has-coupon .pricing-table-container-first .pricing-table,#PricingSection.has-coupon .pricing-table-container-third .pricing-table{margin-top:20px}@media (min-width: 767.98px) and (max-width: 991.98px){#PricingSection.has-coupon .pricing-table-container-second .pricing-table,#PricingSection.has-coupon .pricing-table-container-third .pricing-table{margin-top:0 !important}}#PricingSection.has-coupon .pricing-table-container-second .pricing-table{height:300px !important;margin-top:20px}@media (min-width: 992px){#PricingSection.has-coupon .pricing-table-container-second .pricing-table{margin-left:-1px}}@media only screen and (max-width: 767px){#PricingSection.has-coupon .pricing-table-container-second .pricing-table{max-width:100%;height:190px !important}}#step1{margin-top:50px}@media only screen and (max-width: 767px){#step1{margin-top:0}}body._VPNbundle2 .pricing-breadcrumbs{text-align:center;font-size:14px}body._VPNbundle2 .bundle-discount{padding-top:10px}body._VPNbundle2 .content__www_pricing .shop-title-container,body._VPNbundle2 .content__pro_pricing .shop-title-container{background:#242538}body._VPNbundle2 .content__www_pricing .shop-title-container .pricing-breadcrumbs,body._VPNbundle2 .content__pro_pricing .shop-title-container .pricing-breadcrumbs{background:#242538}body._VPNbundle2 .content__www_pricing .shop-title-container .pricing-breadcrumbs .active,body._VPNbundle2 .content__pro_pricing .shop-title-container .pricing-breadcrumbs .active{color:#FFFFFF !important}body._VPNbundle2 .content__www_pricing .shop-title-container .pricing-breadcrumbs .breadcrumbs-step-2,body._VPNbundle2 .content__pro_pricing .shop-title-container .pricing-breadcrumbs .breadcrumbs-step-2{color:#92929C}body._VPNbundle2 #step1.exp-p .id-guard{display:none}body._VPNbundle2 #step1.exp-p .product-tabs,body._VPNbundle2 #step1.exp-p .price-columns{display:block}body._VPNbundle2 .content__www_checkout .product-tabs,body._VPNbundle2 .content__www_checkout .price-columns,body._VPNbundle2 .content__pro_checkout .product-tabs,body._VPNbundle2 .content__pro_checkout .price-columns{display:none !important}body._VPNbundle2 #step1{margin-top:0px}body._VPNbundle2 #step1 .bundle-products,body._VPNbundle2 #step1 .default-products{position:relative;padding-top:25px}body._VPNbundle2 #step1 .currency-name{position:absolute;right:15px;top:45px}body._VPNbundle2 #step1 .pricing-table{background:white}body._VPNbundle2 #step1 .pricing-table.active{z-index:1}body._VPNbundle2 #step1 .billing-plans-include{margin-top:0}body._VPNbundle2 #step1 .product-tabs,body._VPNbundle2 #step1 .price-columns{display:none}body._VPNbundle2 #step1 .no-margins{margin-right:0;margin-left:0}body._VPNbundle2 #step1 .negative-margins{margin-right:-15px;margin-left:-15px}body._VPNbundle2 #step1 .section-optional-add-ons{margin-top:0;margin-bottom:0}body._VPNbundle2 #step1 .billing-plans-include header h3{margin-bottom:10px;font-size:20px}body._VPNbundle2 #step1 .notification-container{font-size:10px}body._VPNbundle2 #step1 .id-guard{background:#f8f9fa}@media (min-width: 1200px){body.en #PricingSection .pricing-table .offer-text{font-size:14px}}@media (max-width: 575.98px){.shop-title-container{padding-bottom:20px}}.shop-title-container #billing-plans-pricing .is-over-plans{display:none !important}#PricingSection .u-pos-rel{position:relative}#PricingSection .u-z-index-121{z-index:121}.h-0{height:0}#pricingBenefits23 .pricing-head{font-size:32px;font-weight:700;margin-bottom:50px}@media only screen and (max-width: 768px){#pricingBenefits23 .pricing-head{font-size:24px}}#pricingBenefits23 .em-background-underline{position:relative;display:inline-block;font-style:normal;color:inherit !important;z-index:1}#pricingBenefits23 .em-background-underline::before{content:'';position:absolute;z-index:-1;bottom:-1px;left:50%;transform:translateX(-50%);height:50%;width:106%;background:#ffe066}#pricingBenefits23 .video-tabs .tab-content video{height:auto;bottom:-78px;border:8px solid #ffffff;border-radius:10px;margin-bottom:50px;margin-top:50px}@media only screen and (max-width: 768px){#pricingBenefits23 .video-tabs .tab-content video{position:relative;top:19px}}@media only screen and (max-width: 768px){#pricingBenefits23 .side-feature{margin-top:24px}}#pricingBenefits23 .benefits-content-title{font-size:18px;font-weight:700}#pricingBenefits23 .benefits-content-card{border:1px solid #FFFFFF;border-radius:5px;height:64px;background:white;color:#6A7788;width:367px;margin:0 auto;display:flex;align-items:center;padding:10px}@media only screen and (max-width: 768px){#pricingBenefits23 .benefits-content-card{width:100%}}#pricingBenefits23 .benefits-content-card li{list-style-type:none;display:flex;gap:15px;text-align:left}#pricingBenefits23 .benefits-content-card-span{font-size:16px}#pricingBenefits23 .benefits-container{display:flex;justify-content:center;gap:3%;padding-bottom:50px}@media only screen and (max-width: 992px){#pricingBenefits23 .benefits-container{flex-direction:column}}#pricingBenefits23 .custom-p{padding:0}@media only screen and (max-width: 768px){#pricingBenefits23 .custom-p{position:relative;top:0;padding:23px 23px 0}}#pricingBenefits23 .from-mid{margin-left:auto;margin-right:auto;width:1px;height:40px;background:#242538}#pricingBenefits23 .from-mid svg{transform:translate(50%, 150%);position:absolute;display:block;width:18px;height:20px;color:#242538;right:50%}.cg-b-text{color:#242538 !important}
#PricingSection.variation-4-boxes-sticky{position:relative}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container{height:100%;padding:0 15px !important;margin:5px 0 !important}}@media (min-width: 576px) and (max-width: 767.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container{padding:0 16px !important;margin:10px 0}}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container .pricing-table{height:unset !important;min-height:unset !important;max-height:unset !important;margin-top:0;padding:28px 12px 28px 20px;border-radius:4px;width:100% !important;cursor:pointer}#PricingSection.variation-4-boxes-sticky .pricing-table-container .pricing-table.active{box-shadow:0px 0 32px 0px rgba(0,0,0,0.2),0 0 0 2px #4ba920 !important}}@media (max-width: 575.98px) and (max-width: 767.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container .pricing-table.active{box-shadow:0px 0 24px 0px rgba(0,0,0,0.1),0 0 0 2px #4ba920 !important}}@media (min-width: 576px) and (max-width: 767.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container .pricing-table{width:100% !important;border-radius:4px}}@media (min-width: 576px){#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .pricing-table .pricing-table-content-wrapper .pricing-table-content-bottom .special-card-tooltip{display:none}}#PricingSection.variation-4-boxes-sticky .pricing-table-content-middle{position:relative}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky .pricing-table .pricing-table-content-wrapper{top:unset;transform:unset;overflow:unset}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .pricing-table-container-special .special-card-container .pricing-table{padding-bottom:0 !important}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom{display:block !important;overflow:unset;margin-top:32px}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .special-card-panel{display:none !important}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .special-card-tooltip{position:relative;min-height:20px;margin-left:-21px;margin-right:-13px;padding:16px 10px 16px 10px;border:1px solid #95989a;border-top-color:currentColor;border-bottom:none;border-radius:4px;background:#ECF6E8;color:#95989a}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .special-card-tooltip::after{content:'';position:absolute;z-index:1;top:0;left:50%;transform:translate(-50%, -7px) rotateZ(45deg);width:12px;height:12px;border:1px solid #95989a;border-left-color:currentColor;border-top-color:currentColor;border-bottom-color:transparent;border-right-color:transparent;color:#95989a;background:#ecf6e8}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-content{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#242538}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-text{display:inline;padding-right:6px}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-counter{display:flex;flex-wrap:wrap;justify-content:center}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-counter .time_unit{display:flex;align-items:center;justify-content:center}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-counter .time_unit .number{width:23px;padding-right:3px;text-align:right}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-counter .time_unit.seconds{color:#4BA920}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-counter .separator{padding-left:3px}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-counter.hide-days .time_unit.days{display:none}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table .pricing-table-content-bottom .tooltip-counter .time_unit.days .text.days{padding-right:4px}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table.active .pricing-table-content-bottom .special-card-tooltip{color:#4ba920;border-color:currentColor !important}#PricingSection.variation-4-boxes-sticky.has-timer-on-hero-plan .special-card-container .pricing-table.active .pricing-table-content-bottom .special-card-tooltip::after{color:#4ba920}}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky .pricing-table .buttons-layout{display:none !important}}@media (min-width: 576px){#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout{display:none !important}}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .inner-wrapper{display:flex;justify-content:space-between;align-items:center}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .cbx-content{flex-grow:1;display:flex;justify-content:space-between;align-items:center}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .cbx-content_period{text-align:left;font-weight:700;color:#6C6C6C}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .cbx-content_period .extra-period{text-align:left;color:#4BA920}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .cbx-content_price{display:flex;align-items:center;font-size:16px;font-weight:700;color:#242538}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .cbx-content_price-period{font-size:12px;font-weight:400;color:#6C6C6C}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .cbx-checkbox{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:24px;height:24px;margin-left:10px;border-radius:4px;border:2px solid #909395;background:white;color:white;transition:0.2s}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .cbx-checkbox:hover{color:#909395}#PricingSection.variation-4-boxes-sticky .pricing-table .checkboxes-layout .cbx-checkbox_icon{font-size:14px}#PricingSection.variation-4-boxes-sticky .pricing-table.active .checkboxes-layout .cbx-checkbox{border-color:#4BA920;background:#4BA920;color:white}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container.pricing-table-container-special .special-card-container .pricing-table{padding-top:32px;padding-bottom:32px}}@media (max-width: 767.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container.pricing-table-container-special .special-card-container .pricing-table .offer-badge .offer-text{border:1px solid #4BA920;background-color:#E9F3E5;color:#4BA920;transition:0.2s}}@media (max-width: 767.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container.pricing-table-container-special .special-card-container .pricing-table.active .offer-badge .offer-text{background-color:#4BA920;color:#FFFFFF}}@media (max-width: 767.98px){#PricingSection.variation-4-boxes-sticky .pricing-table-container.pricing-table-container-special .special-card-container .pricing-table .mobile-special{padding-top:0 !important}}#PricingSection.variation-4-boxes-sticky .special-card-container .pricing-table-content-middle .buttons-layout .money-back{padding-bottom:32px}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky .special-card-container .pricing-table-content-middle .buttons-layout .money-back{display:none}}#PricingSection.variation-4-boxes-sticky .special-card-container .pricing-table-content-bottom .special-card-panel{display:none}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer{position:sticky;bottom:0;z-index:120;padding:16px 4px;margin-bottom:12px;background:white}@media (min-width: 576px){#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer{display:none !important}}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer.cookie-message-is-opened{padding-bottom:110px;margin-bottom:-100px}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer.cookie-message-already-closed{padding-bottom:16px !important}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer::after{content:'';position:absolute;left:0;top:100%;width:100%;height:32px;background:white}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer .inner-wrapper{font-size:inherit}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer .pricing-button-wrapper{display:flex;align-items:center;justify-content:center}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer a.pricing-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:250px;max-width:95%;margin-left:auto;margin-right:auto;font-size:16px;font-weight:700;border-radius:4px;border:none;background:#4BA920;color:white;text-decoration:none;transition:0.2s}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer a.pricing-button:hover{background:#5DB237}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer .money-back{display:none;min-height:18px;margin-top:6px;text-align:center;font-size:12px;color:#6C6C6C}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer .money-back.active{display:block}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer-shadow{position:sticky;left:0;bottom:89px;z-index:100;height:20px}@media (min-width: 576px){#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer-shadow{display:none !important}}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer-shadow::before{content:'';position:absolute;top:0;left:0;width:100%;height:12px;background:white;box-shadow:0 -3px 6px rgba(0,0,0,0.16)}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer-shadow.cookie-message-is-opened{bottom:174px}#PricingSection.variation-4-boxes-sticky .sticky-pricing-footer-shadow.cookie-message-already-closed{bottom:89px !important}@media (min-width: 375px) and (max-width: 575.98px){#PricingSection .section-optional-add-ons{padding-left:0;padding-right:0}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box{display:flex;flex-direction:row;padding:16px 12px 20px 20px;border-width:1px;border-color:#95989a;outline-offset:-2px;outline-color:transparent;transition:0.2s}#PricingSection .section-optional-add-ons .boxes-container .box.active{border-color:#4ba920;box-shadow:0 0 20px 0 rgba(0,0,0,0.1);outline:2px solid #4ba920}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .recommended-container{left:-1px}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .recommended-container .string-nonsticky{display:none}}@media (min-width: 576px){#PricingSection .section-optional-add-ons .boxes-container .box .recommended-container .string-sticky{display:none}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .text-content{text-align:left;padding-bottom:0}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .text-content h3{text-align:left}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .text-content p{text-align:left}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .text-content #tooltip-dedicated-locations,#PricingSection .section-optional-add-ons .boxes-container .box .text-content #tooltip-dedicated-locations-remove,#PricingSection .section-optional-add-ons .boxes-container .box .text-content #tooltip-dip-countries,#PricingSection .section-optional-add-ons .boxes-container .box .text-content .tooltip-dip-countries{text-align:left;font-size:12px;padding:0;margin-top:10px}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .text-content .options{display:none !important}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .text-content .icon-dip{display:none !important}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .dip-separator-container{display:none !important}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .base-price,#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .main-price{display:flex;justify-content:center;align-items:baseline}#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .base-price .currency,#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .main-price .currency{font-size:16px;font-weight:700;color:#242538}#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .base-price .price,#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .main-price .price{font-size:16px;font-weight:700;color:#242538}#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .base-price .price.old-price,#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .base-price .price.old-price+.currency,#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .main-price .price.old-price,#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .main-price .price.old-price+.currency{font-weight:400;color:#6C6C6C;font-size:14px}#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .base-price .month,#PricingSection .section-optional-add-ons .boxes-container .box .price-addon .main-price .month{left:unset;font-size:12px;font-weight:400;color:#6C6C6C}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .controls-container .price-addon .base-price{transform:scale(0.8)}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .controls-container .price-addon .base-price .currency{vertical-align:unset;font-size:14px;color:#6C6C6C}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .controls-container{flex-shrink:0;display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-left:10px}}@media (max-width: 575.98px){#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .saved-amount{display:none !important}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .add-ons_cta-button-content{display:none}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content add-ons_cta-checkbox-content{display:flex;justify-content:center;align-items:center}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-add,#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-remove{width:24px;height:24px;padding:0 !important;margin:0 0 0 10px !important;border-style:solid;border-width:2px;font-size:14px;transition:0.2s}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-add,#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-add:hover,#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-add:focus,#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-add:active,#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-remove,#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-remove:hover,#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-remove:focus,#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-remove:active{box-shadow:none !important}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-add{border-color:#909395 !important;background:white !important;color:transparent !important}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-add:hover{color:#909395 !important}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-remove{border-color:#4ba920 !important;background:#4ba920 !important;color:white !important}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-remove:hover{background:#4ba920 !important}#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .btn-remove i{margin:0 !important}}@media (min-width: 576px){#PricingSection .section-optional-add-ons .boxes-container .box .controls-content .add-ons_cta-checkbox-content{display:none !important}}@media (min-width: 992px){#PricingSection.variation-4-boxes-sticky.has-campaign-theme .pricing-table{box-shadow:0 0 0 0 transparent, 0 0 0 1px #D5D5D5}}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .pricing-table-container .special-card-container .pricing-table{background-color:#242538}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table.active,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table.best-value-plan.active{box-shadow:0px 0 32px rgba(0,0,0,0.2),0 0 0 2px #fc3 !important}@media (max-width: 767.98px){#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table.active,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table.best-value-plan.active{box-shadow:0px 0 24px rgba(0,0,0,0.1),0 0 0 2px #fc3 !important}}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .offer-text{color:#242538 !important;background-color:#ffcc00 !important;border-color:#ffcc00 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table-content-middle .buttons-layout .money-back{display:none}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table-content-bottom .special-card-panel{display:block}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .pricing-duration,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .pricing-duration .text-primary{color:#FFFFFF !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .new-price .new-price-currency,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .new-price .new-price-month{color:#FFFFFF}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .new-price .price{color:#FFCC00}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .price-details{color:#FFFFFF}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .white-green:hover,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table.active .white-green,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .white-green.main-price-button:hover,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .pricing-table.active .white-green.main-price-button,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .pricing-table.best-value-plan:hover .white-green,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .pricing-table.best-value-plan.active .white-green{color:#212121 !important;background-color:#FFCC00 !important;border-color:#FFCC00 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table .choose-plan a{color:#212121 !important;background-color:#FFCC00 !important;border-color:#FFCC00 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table-content-bottom .special-card-panel{background:#FFCC00;color:#212121}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table-content-bottom .special-card-tooltip{color:#f4c331 !important;background:#f4c331 !important;border-top-color:#f4c331 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table-content-bottom .special-card-tooltip::after{color:#f4c331 !important;background:#f4c331 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .pricing-table-content-bottom .special-card-tooltip .tooltip-counter .time_unit.seconds{color:inherit !important}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky.has-campaign-theme .pricing-table .pricing-table-content-bottom{display:none}}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .checkboxes-layout .cbx-content_period{color:white}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .checkboxes-layout .cbx-content_period .extra-period{color:#FFCC00}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .checkboxes-layout .cbx-content_price .new-price-currency,#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .checkboxes-layout .cbx-content_price .cbx-content_price-period{color:white}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .checkboxes-layout .cbx-content_price .price{color:#FFCC00}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .special-card-container .checkboxes-layout .cbx-checkbox{border-color:#ffcc00}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky.has-campaign-theme .pricing-table.active .checkboxes-layout .cbx-checkbox{border-color:#FFCC00;background:#FFCC00;color:#242538}}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky.has-campaign-theme .pricing-table-container .pricing-table.active{box-shadow:0px 0 24px 0px rgba(0,0,0,0.1),0 0 0 2px #fc0 !important}}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box.active{border-color:#FFCC00;outline-color:#FFCC00}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box .controls-content .btn-add{background:#fc0;color:#242538}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box .controls-content .btn-remove{background:white;color:#242538}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box .recommended-container{background:#FFCC00 !important;color:#242538 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box .text-content .options .column-sep .fas{color:#FFCC00 !important}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box.active{border-color:#FFCC00;outline-color:#FFCC00}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box.active .controls-container .controls-content .cg-btn{background:#FFCC00 !important;color:#242538 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box.active .controls-content .btn-remove{border-color:#FFCC00 !important;background:#FFCC00 !important;color:#242538 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box .recommended-container{background:#FFCC00 !important;color:#242538 !important}#PricingSection.variation-4-boxes-sticky.has-campaign-theme .section-optional-add-ons .boxes-container .box .text-content .options .column-sep .fas{color:#FFCC00 !important}}#PricingSection.variation-4-boxes-sticky.has-campaign-theme #PricingSectionStickyFooter .pricing-button{color:#242538;background:#FFCC00}#PricingSection.variation-4-boxes-sticky.has-campaign-theme #PricingSectionStickyFooter .pricing-button:hover{background:#FFD11A}#PricingSection.variation-4-boxes-sticky.has-campaign-theme.has-blackfriday-styling .pricing-table-container .special-card-container .pricing-table{background-color:#000000}#PricingSection.variation-4-boxes-sticky .buttons-layout .vat-string{display:none}#PricingSection.variation-4-boxes-sticky .cbx-content_price-vat{display:none}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky.has-vat-experiment .pricing-table-container .pricing-table{padding:20px 12px 20px 12px}}#PricingSection.variation-4-boxes-sticky.has-vat-experiment .buttons-layout{position:relative}#PricingSection.variation-4-boxes-sticky.has-vat-experiment .buttons-layout .vat-string{position:absolute;bottom:-32px;left:50%;transform:translate(-50%, 0);display:block;font-size:12px;color:#6C6C6C;opacity:0.8}#PricingSection.variation-4-boxes-sticky.has-vat-experiment .pricing-table-container-special .buttons-layout .vat-string{color:#6C6C6C;opacity:1}#PricingSection.variation-4-boxes-sticky.has-vat-experiment.has-campaign-theme .pricing-table-container-special .buttons-layout .vat-string{color:#ffffff}#PricingSection.variation-4-boxes-sticky.has-vat-experiment .cbx-content_price-vat{display:block;font-size:10px;color:#24253A}#PricingSection.variation-4-boxes-sticky.has-vat-experiment .pricing-table-container-special .cbx-content_price-vat{color:white}#PricingSection.variation-4-boxes-sticky.has-july22-design .pricing-table .money-back{position:absolute;bottom:-40px;left:50%;transform:translate(-50%, 0);display:block;width:100%;height:unset;padding-bottom:0;color:#6c6c6c}#PricingSection.variation-4-boxes-sticky.has-july22-design .buttons-layout .vat-string{position:unset;bottom:unset;left:unset;transform:unset;color:#212121}@media (min-width: 1200px){#PricingSection.variation-4-boxes-sticky.has-july22-design .special-card-container .pricing-table{height:342px !important}}#PricingSection.variation-4-boxes-sticky.has-july22-design .special-card-container .pricing-table-content-middle .buttons-layout .money-back{display:block;padding-bottom:0;color:white}@media (min-width: 1200px){#PricingSection.variation-4-boxes-sticky.has-july22-design .special-card-container .pricing-table-content-middle .buttons-layout .money-back{font-size:14px;font-weight:600}}#PricingSection.variation-4-boxes-sticky.has-july22-design .special-card-container .pricing-table-content-middle .buttons-layout .vat-string{color:white}#PricingSection.variation-4-boxes-sticky.has-july22-design .special-card-container .pricing-table-content-bottom .special-card-panel,#PricingSection.variation-4-boxes-sticky.has-july22-design .special-card-container .pricing-table-content-bottom .special-card-tooltip{display:none !important}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky.has-july22-design.has-timer-on-hero-plan .special-card-container .pricing-table-content-bottom{margin-top:16px}}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky.has-july22-design.has-timer-on-hero-plan .special-card-container .pricing-table-content-bottom .special-card-tooltip{display:block !important;margin:unset !important;border-radius:0 !important;border:unset !important;border-top:1px solid #333447 !important;background:#242538 !important;color:#333447 !important}#PricingSection.variation-4-boxes-sticky.has-july22-design.has-timer-on-hero-plan .special-card-container .pricing-table-content-bottom .special-card-tooltip::after{display:none}#PricingSection.variation-4-boxes-sticky.has-july22-design.has-timer-on-hero-plan .special-card-container .pricing-table-content-bottom .special-card-tooltip .tooltip-content{font-size:13px;font-weight:600;color:white !important}}@media (max-width: 575.98px){#PricingSection.variation-4-boxes-sticky.has-july22-design.has-blackfriday-styling.has-timer-on-hero-plan .special-card-container .pricing-table-content-bottom .special-card-tooltip{background:#000000 !important}}#PricingSection.has-special-box-hidden .pricing-boxes-row,#PricingSection.has-first-box-hidden .pricing-boxes-row,#PricingSection.has-second-box-hidden .pricing-boxes-row,#PricingSection.has-third-box-hidden .pricing-boxes-row{justify-content:space-between}#PricingSection.has-special-box-hidden .pricing-boxes-row::before,#PricingSection.has-special-box-hidden .pricing-boxes-row::after,#PricingSection.has-first-box-hidden .pricing-boxes-row::before,#PricingSection.has-first-box-hidden .pricing-boxes-row::after,#PricingSection.has-second-box-hidden .pricing-boxes-row::before,#PricingSection.has-second-box-hidden .pricing-boxes-row::after,#PricingSection.has-third-box-hidden .pricing-boxes-row::before,#PricingSection.has-third-box-hidden .pricing-boxes-row::after{display:none !important}#PricingSection.has-special-box-hidden .pricing-table-container-special,#PricingSection.has-first-box-hidden .pricing-table-container-first,#PricingSection.has-second-box-hidden .pricing-table-container-second,#PricingSection.has-third-box-hidden .pricing-table-container-third{display:none !important}@media (max-width: 575.98px){div#content,main#content{overflow:unset}}.info-section-pricing-page{position:relative;z-index:199}@media (max-width: 991.98px){.info-section-pricing-page .info-section-decorations-mobile{display:flex;justify-content:center}}.info-section-pricing-page .text-content-list{padding:0;list-style:none !important}.info-section-pricing-page .text-content-list li{position:relative;padding-left:24px;margin-bottom:2px;font-size:14px;font-weight:600}@media (max-width: 991.98px){.info-section-pricing-page .text-content-list li{display:flex;align-items:center;justify-content:center}}@media (max-width: 575.98px){.info-section-pricing-page .text-content-list li{margin-bottom:8px}}.info-section-pricing-page .text-content-list .li-check{position:relative;display:flex;width:16px;height:16px;border-radius:50%}@media (min-width: 992px){.info-section-pricing-page .text-content-list .li-check{position:absolute;top:10%;left:0}}@media (max-width: 991.98px){.info-section-pricing-page .text-content-list .li-check{position:relative;margin-right:8px;flex-shrink:0;align-self:normal}}.info-section-pricing-page .text-content-list .li-check::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:9px;height:9px;background-image:url("/img/campaigns/birthday22/info-section/check.png");background-position:center center;background-repeat:no-repeat;background-size:9px}.tpd-tooltip{z-index:130 !important}#upsell-modal{cursor:default}#upsell-modal .modal{padding:50px;background:rgba(28,29,47,0.75)}#upsell-modal .modal-dialog{max-width:565px}#upsell-modal .modal-content{position:relative;border-radius:36px;border:2px solid #6C6E9B33;color:white;background:#242538;box-shadow:0 4px 50px rgba(0,0,0,0.3)}#upsell-modal .modal-content:before{content:'';position:absolute;top:-4px;left:-4px;z-index:-1;width:calc(100% + 8px);height:calc(100% + 8px);border-radius:36px;background:linear-gradient(to top, #4B4C6D, #32344C)}#upsell-modal .modal-header,#upsell-modal .modal-body,#upsell-modal .modal-footer{padding-left:40px;padding-right:40px}#upsell-modal .modal-header{padding-top:40px;padding-bottom:0}#upsell-modal .modal-body{padding-top:0;padding-bottom:0}#upsell-modal .modal-footer{padding-top:0;padding-bottom:48px}#upsell-modal .image-up{display:flex;justify-content:center}#upsell-modal .image-up-img{width:85px}#upsell-modal .modal-title{width:100% !important;color:white;font-size:32px;padding-top:5px !important;margin-top:10px}#upsell-modal .modal-subtitle{font-weight:700;margin-top:32px;margin-bottom:12px;font-size:16px}#upsell-modal .layer-color{display:flex;padding:16px 26px;margin-bottom:6px;border:1px solid rgba(219,220,237,0.1);border-radius:4px;background:#DBDCED1A}#upsell-modal .layer-color:last-of-type{margin-bottom:unset}#upsell-modal .layer-content{font-size:16px}#upsell-modal .layer-content-arrow{margin-right:15px !important}#upsell-modal .modal-footer,#upsell-modal .btns-container{display:flex;align-items:center;justify-content:center;margin-top:32px}#upsell-modal .keep-btn,#upsell-modal .switch-btn{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;min-width:40%;padding:14px 24px !important;margin:0}#upsell-modal .keep-btn{background:transparent;color:white;border:1px solid white}#upsell-modal .switch-btn{background:#FFCC00;color:black;border:1px solid #FFCC00;margin-left:15px}#upsell-modal .yellow-text{color:#FFCC00 !important;font-family:inherit;font-style:normal;font-weight:700}body.el .logged-users{font-size:13px !important}body.ru .logged-users{font-size:12px !important}body.ru .logged-users{font-size:15px !important}body.pl .logged-users{font-size:15px !important}body.fr .logged-users{font-size:15px !important}
@media (min-width: 768px) and (max-width: 1199.98px){#PricingSection.has-campaign-styling .pricing-table-container-special,#PricingSection.has-campaign-styling .pricing-table-container-first,#PricingSection.has-campaign-styling .pricing-table-container-third{width:30%}}@media (min-width: 768px){#PricingSection.has-campaign-styling .pricing-table-container-special .pricing-table,#PricingSection.has-campaign-styling .pricing-table-container-first .pricing-table,#PricingSection.has-campaign-styling .pricing-table-container-third .pricing-table{border-radius:3px !important}}@media (min-width: 768px){#PricingSection.has-campaign-styling .pricing-table-container-special{order:2}}@media (min-width: 768px) and (max-width: 1199.98px){#PricingSection.has-campaign-styling .pricing-table-container-special{width:37%}}@media (min-width: 768px){#PricingSection.has-campaign-styling .pricing-table-container-first{order:3}}@media (min-width: 768px){#PricingSection.has-campaign-styling .pricing-table-container-third{order:1}}#PricingSection.has-campaign-styling.variation-4-boxes-sticky.has-campaign-theme .pricing-table-container .special-card-container .pricing-table{box-shadow:0px 0px 0px 2px #fecb29}#PricingSection.has-campaign-styling.variation-4-boxes-sticky.has-campaign-theme .pricing-table-container .special-card-container .pricing-table .buttons-layout .vat-string{position:relative;margin-bottom:8px}#PricingSection.has-campaign-styling.variation-4-boxes-sticky.has-campaign-theme .pricing-table-container .special-card-container .pricing-table .buttons-layout .money-back{position:absolute;bottom:-64px;font-size:12px;font-weight:400}#PricingSection.has-campaign-styling.variation-4-boxes-sticky.has-campaign-theme .pricing-table-container .special-card-container .pricing-table .special-card-container .pricing-table-content-bottom .special-card-tooltip{display:none !important}@media (min-width: 1200px){#PricingSection.has-campaign-styling .pricing-table-container-special{width:380px !important}}@media (min-width: 1200px){#PricingSection.has-campaign-styling .pricing-table-container-special .special-card-container .pricing-table{height:380px !important}}@media (min-width: 992px) and (max-width: 1199.98px){#PricingSection.has-campaign-styling .pricing-table-container-special .special-card-container .pricing-table{height:400px !important}}@media (min-width: 768px) and (max-width: 991.98px){#PricingSection.has-campaign-styling .pricing-table-container-special .special-card-container .pricing-table{height:360px !important}}@media (max-width: 575.98px){#PricingSection.has-campaign-styling .pricing-table-container-special .special-card-container .pricing-table{padding-top:24px !important;padding-bottom:24px !important}}#PricingSection.has-campaign-styling .pricing-table-container-special .pricing-table-content-wrapper{position:relative}@media (max-width: 575.98px){#PricingSection.has-campaign-styling .pricing-table-container-special .pricing-table-content-bottom{margin-top:0}}#PricingSection.has-campaign-styling .pricing-table-container-special .offer-badge_lace,#PricingSection.has-campaign-styling .pricing-table-container-special .offer-badge_pill{display:none !important}@media (max-width: 575.98px){#PricingSection.has-campaign-styling .pricing-table-container-special .offer-badge .offer-text{padding-top:5px;padding-bottom:5px}}@media (max-width: 575.98px){#PricingSection.has-campaign-styling .pricing-table-container-special .cbx-content_period em{font-style:normal;color:#ffcc00}}@media (min-width: 1200px){#PricingSection.has-campaign-styling .pricing-table-container-first,#PricingSection.has-campaign-styling .pricing-table-container-third{display:flex;flex-direction:column;justify-content:center;width:320px !important;margin-top:0}}@media (min-width: 768px){#PricingSection.has-campaign-styling .pricing-table-container-first .pricing-table,#PricingSection.has-campaign-styling .pricing-table-container-third .pricing-table{margin-top:0 !important}}@media (max-width: 575.98px){#PricingSection.has-campaign-styling .pricing-table-container-first .cbx-content_period,#PricingSection.has-campaign-styling .pricing-table-container-third .cbx-content_period{color:#242538 !important}}#PricingSection.has-campaign-styling .pricing-table-container-first .choose-plan>.cg-btn.white-green:hover,#PricingSection.has-campaign-styling .pricing-table-container-third .choose-plan>.cg-btn.white-green:hover{color:white !important;background-color:#323232 !important;border:1px solid #323232 !important}@media (min-width: 1200px){#PricingSection.has-campaign-styling .pricing-table .pricing-duration{font-weight:700}}#PricingSection.has-campaign-styling .vat-string,#PricingSection.has-campaign-styling .cbx-content_price-vat{display:none !important}#PricingSection.has-campaign-styling.has-vat-experiment .vat-string,#PricingSection.has-campaign-styling.has-vat-experiment .cbx-content_price-vat{display:block !important}
.vb-icon-title-description-wrapper{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-bottom:-36px}@media (min-width: 768px){.vb-icon-title-description-wrapper{margin-top:36px;margin-bottom:36px}}@media (max-width: 767.98px){.vb-icon-title-description-wrapper{margin-top:24px;margin-bottom:24px}}.vb-icon-title-description{flex:1 0 33.33%;padding-left:15px;padding-right:15px;margin-bottom:36px;text-align:center}@media (min-width: 600px) and (max-width: 991.98px){.vb-icon-title-description{flex-basis:50%}}@media (max-width: 599.98px){.vb-icon-title-description{flex-basis:100%}}.vb-icon-title-description .itd-icon{display:block;max-height:80px;margin-left:auto;margin-right:auto}.vb-icon-title-description .itd-title{margin-top:16px;font-size:18px;font-weight:700;line-height:1.1;color:#242538}.vb-icon-title-description .itd-description{margin-top:8px;font-size:16px;line-height:1.3;color:#6A7788}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
/*!
 * Bootstrap-select v1.13.14 (https://developer.snapappointments.com/bootstrap-select)
 *
 * Copyright 2012-2020 SnapAppointments, LLC
 * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
 */@-webkit-keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}@-o-keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}@keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}.bootstrap-select>select.bs-select-hidden,select.bs-select-hidden,select.selectpicker{display:none!important}.bootstrap-select{width:220px\0;vertical-align:middle}.bootstrap-select>.dropdown-toggle{position:relative;width:100%;text-align:right;white-space:nowrap;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.bootstrap-select>.dropdown-toggle:after{margin-top:-1px}.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{color:#999}.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:hover{color:rgba(255,255,255,.5)}.bootstrap-select>select{position:absolute!important;bottom:0;left:50%;display:block!important;width:.5px!important;height:100%!important;padding:0!important;opacity:0!important;border:none;z-index:0!important}.bootstrap-select>select.mobile-device{top:0;left:0;display:block!important;width:100%!important;z-index:2!important}.bootstrap-select.is-invalid .dropdown-toggle,.error .bootstrap-select .dropdown-toggle,.has-error .bootstrap-select .dropdown-toggle,.was-validated .bootstrap-select select:invalid+.dropdown-toggle{border-color:#b94a48}.bootstrap-select.is-valid .dropdown-toggle,.was-validated .bootstrap-select select:valid+.dropdown-toggle{border-color:#28a745}.bootstrap-select.fit-width{width:auto!important}.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){width:220px}.bootstrap-select .dropdown-toggle:focus,.bootstrap-select>select.mobile-device:focus+.dropdown-toggle{outline:thin dotted #333!important;outline:5px auto -webkit-focus-ring-color!important;outline-offset:-2px}.bootstrap-select.form-control{margin-bottom:0;padding:0;border:none;height:auto}:not(.input-group)>.bootstrap-select.form-control:not([class*=col-]){width:100%}.bootstrap-select.form-control.input-group-btn{float:none;z-index:auto}.form-inline .bootstrap-select,.form-inline .bootstrap-select.form-control:not([class*=col-]){width:auto}.bootstrap-select:not(.input-group-btn),.bootstrap-select[class*=col-]{float:none;display:inline-block;margin-left:0}.bootstrap-select.dropdown-menu-right,.bootstrap-select[class*=col-].dropdown-menu-right,.row .bootstrap-select[class*=col-].dropdown-menu-right{float:right}.form-group .bootstrap-select,.form-horizontal .bootstrap-select,.form-inline .bootstrap-select{margin-bottom:0}.form-group-lg .bootstrap-select.form-control,.form-group-sm .bootstrap-select.form-control{padding:0}.form-group-lg .bootstrap-select.form-control .dropdown-toggle,.form-group-sm .bootstrap-select.form-control .dropdown-toggle{height:100%;font-size:inherit;line-height:inherit;border-radius:inherit}.bootstrap-select.form-control-lg .dropdown-toggle,.bootstrap-select.form-control-sm .dropdown-toggle{font-size:inherit;line-height:inherit;border-radius:inherit}.bootstrap-select.form-control-sm .dropdown-toggle{padding:.25rem .5rem}.bootstrap-select.form-control-lg .dropdown-toggle{padding:.5rem 1rem}.form-inline .bootstrap-select .form-control{width:100%}.bootstrap-select.disabled,.bootstrap-select>.disabled{cursor:not-allowed}.bootstrap-select.disabled:focus,.bootstrap-select>.disabled:focus{outline:0!important}.bootstrap-select.bs-container{position:absolute;top:0;left:0;height:0!important;padding:0!important}.bootstrap-select.bs-container .dropdown-menu{z-index:1060}.bootstrap-select .dropdown-toggle .filter-option{position:static;top:0;left:0;float:left;height:100%;width:100%;text-align:left;overflow:hidden;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}.bs3.bootstrap-select .dropdown-toggle .filter-option{padding-right:inherit}.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option{position:absolute;padding-top:inherit;padding-bottom:inherit;padding-left:inherit;float:none}.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner{padding-right:inherit}.bootstrap-select .dropdown-toggle .filter-option-inner-inner{overflow:hidden}.bootstrap-select .dropdown-toggle .filter-expand{width:0!important;float:left;opacity:0!important;overflow:hidden}.bootstrap-select .dropdown-toggle .caret{position:absolute;top:50%;right:12px;margin-top:-2px;vertical-align:middle}.input-group .bootstrap-select.form-control .dropdown-toggle{border-radius:inherit}.bootstrap-select[class*=col-] .dropdown-toggle{width:100%}.bootstrap-select .dropdown-menu{min-width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select .dropdown-menu>.inner:focus{outline:0!important}.bootstrap-select .dropdown-menu.inner{position:static;float:none;border:0;padding:0;margin:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.bootstrap-select .dropdown-menu li{position:relative}.bootstrap-select .dropdown-menu li.active small{color:rgba(255,255,255,.5)!important}.bootstrap-select .dropdown-menu li.disabled a{cursor:not-allowed}.bootstrap-select .dropdown-menu li a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bootstrap-select .dropdown-menu li a.opt{position:relative;padding-left:2.25em}.bootstrap-select .dropdown-menu li a span.check-mark{display:none}.bootstrap-select .dropdown-menu li a span.text{display:inline-block}.bootstrap-select .dropdown-menu li small{padding-left:.5em}.bootstrap-select .dropdown-menu .notify{position:absolute;bottom:5px;width:96%;margin:0 2%;min-height:26px;padding:3px 5px;background:#f5f5f5;border:1px solid #e3e3e3;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);pointer-events:none;opacity:.9;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select .dropdown-menu .notify.fadeOut{-webkit-animation:.3s linear 750ms forwards bs-notify-fadeOut;-o-animation:.3s linear 750ms forwards bs-notify-fadeOut;animation:.3s linear 750ms forwards bs-notify-fadeOut}.bootstrap-select .no-results{padding:3px;background:#f5f5f5;margin:0 5px;white-space:nowrap}.bootstrap-select.fit-width .dropdown-toggle .filter-option{position:static;display:inline;padding:0}.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner,.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner{display:inline}.bootstrap-select.fit-width .dropdown-toggle .bs-caret:before{content:'\00a0'}.bootstrap-select.fit-width .dropdown-toggle .caret{position:static;top:auto;margin-top:-1px}.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{position:absolute;display:inline-block;right:15px;top:5px}.bootstrap-select.show-tick .dropdown-menu li a span.text{margin-right:34px}.bootstrap-select .bs-ok-default:after{content:'';display:block;width:.5em;height:1em;border-style:solid;border-width:0 .26em .26em 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle{z-index:1061}.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before{content:'';border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(204,204,204,.2);position:absolute;bottom:-4px;left:9px;display:none}.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after{content:'';border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;bottom:-4px;left:10px;display:none}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before{bottom:auto;top:-4px;border-top:7px solid rgba(204,204,204,.2);border-bottom:0}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after{bottom:auto;top:-4px;border-top:6px solid #fff;border-bottom:0}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before{right:12px;left:auto}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after{right:13px;left:auto}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:after,.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:before,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:after,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:before{display:block}.bs-actionsbox,.bs-donebutton,.bs-searchbox{padding:4px 8px}.bs-actionsbox{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-actionsbox .btn-group button{width:50%}.bs-donebutton{float:left;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-donebutton .btn-group button{width:100%}.bs-searchbox+.bs-actionsbox{padding:0 8px 4px}.bs-searchbox .form-control{margin-bottom:0;width:100%;float:none}.triangle-separator{background:white;height:30px;position:relative;background-color:white}.triangle-separator .triangle{position:absolute;height:60px;transform:translateX(-50%);z-index:1}.triangle-separator .triangle.down{left:50%;top:-30px}.triangle-separator .triangle.up{left:50%;top:0;transform:translateX(-50%) rotate(180deg)}
.section-optional-add-ons{margin:20px 0;padding-bottom:20px}.section-optional-add-ons .boxes-container{display:flex}@media (max-width: 767.98px){.section-optional-add-ons .boxes-container{flex-direction:column}}.section-optional-add-ons .boxes-container .box{position:relative;display:flex;align-items:center;flex-grow:1;flex-shrink:0;flex-basis:0;flex:1;box-sizing:border-box;padding:20px;margin-top:20px;border-radius:4px;border:2px solid #d5d5d5;background-color:white}.section-optional-add-ons .boxes-container .box.box-left{margin-right:10px}.section-optional-add-ons .boxes-container .box.box-aio{border-top-left-radius:0px}.section-optional-add-ons .boxes-container .box .text-content{padding-bottom:15px;margin-bottom:auto}.section-optional-add-ons .boxes-container .box .text-content h3{font-size:16px;font-weight:700}@media only screen and (max-width: 767px){.section-optional-add-ons .boxes-container .box .text-content h3{font-size:13px}}.section-optional-add-ons .boxes-container .box .text-content h3 .fa-info-circle{font-size:14px;color:#D5D5D5;vertical-align:super}.section-optional-add-ons .boxes-container .box .text-content p{font-size:12px;margin-top:5px}.section-optional-add-ons .boxes-container .box .text-content .options{display:flex;align-items:center;padding:15px 0}.section-optional-add-ons .boxes-container .box .text-content .options .side-column{display:flex;align-items:center}.section-optional-add-ons .boxes-container .box .text-content .options .side-column .title{margin-left:10px;font-size:16px;font-weight:bold}.section-optional-add-ons .boxes-container .box .text-content .options .column-sep .fas{color:#FFCC00;margin:0 15px;font-size:14px}.section-optional-add-ons .boxes-container .box .text-content .options .tooltip-container .fa-info-circle{font-size:14px;color:#D5D5D5;vertical-align:super}.section-optional-add-ons .boxes-container .box .text-content .learn-more{font-size:10px;font-weight:700;text-decoration:underline}.section-optional-add-ons .boxes-container .box .controls-container{display:flex;flex-direction:row;align-items:center;min-width:300px;margin-left:auto;padding-left:40px;border-left:1px solid #D5D5D5}.section-optional-add-ons .boxes-container .box .controls-container .controls-content{position:relative;display:flex;flex-direction:column;text-align:center;margin-left:15px}.section-optional-add-ons .boxes-container .box .controls-container .controls-content .cg-btn{padding:10px 40px !important;background:#FFCC00;color:#212121}.section-optional-add-ons .boxes-container .box .controls-container .controls-content .saved-amount{color:#212121;font-weight:bold;font-size:12px}.section-optional-add-ons .boxes-container .box .controls-container .controls-content .btn-remove i{margin-right:10px}@media only screen and (max-width: 991px){.section-optional-add-ons .boxes-container .box .controls-container{flex-direction:column;align-items:center;min-width:200px}.section-optional-add-ons .boxes-container .box .controls-container .controls-content{order:2;margin-left:0}.section-optional-add-ons .boxes-container .box .controls-container .link-content{order:1}.section-optional-add-ons .boxes-container .box .controls-container .link-content .cg-btn-link{padding-left:0}}.section-optional-add-ons .boxes-container .box .controls-container .price-addon{text-align:center}.section-optional-add-ons .boxes-container .box .controls-container .price-addon .base-price{font-size:20px}.section-optional-add-ons .boxes-container .box .controls-container .price-addon .base-price .currency{font-size:9px;color:#242537;vertical-align:text-top;display:inline-block}.section-optional-add-ons .boxes-container .box .controls-container .price-addon .base-price .month{font-size:10px;display:inline-block;left:-5px;position:relative}.section-optional-add-ons .boxes-container .box .controls-container .price-addon .base-price .price.old-price{text-decoration:line-through}.section-optional-add-ons .boxes-container .box .controls-container .price-addon .main-price{font-size:40px;font-weight:bold}.section-optional-add-ons .boxes-container .box .controls-container .price-addon .main-price .currency{font-size:14px;color:#242537;vertical-align:text-top;display:inline-block}.section-optional-add-ons .boxes-container .box .controls-container .price-addon .main-price .month{font-size:12px;display:inline-block;left:-12px;position:relative}.section-optional-add-ons .boxes-container .box .link-content{display:inline-block}@media only screen and (max-width: 991px){.section-optional-add-ons .boxes-container .box .text-content .options .side-column{flex-direction:column}.section-optional-add-ons .boxes-container .box .text-content .options .side-column .title{font-size:14px}}@media only screen and (max-width: 767px){.section-optional-add-ons .boxes-container .box.box-left,.section-optional-add-ons .boxes-container .box.box-right{margin:20px 0 0 0}.section-optional-add-ons .boxes-container .box.box-aio{flex-direction:column}.section-optional-add-ons .boxes-container .box.box-dip{flex-direction:column}.section-optional-add-ons .boxes-container .box .controls-container{min-width:auto;margin-left:0;border:0;padding-left:0}.section-optional-add-ons .boxes-container .box .text-content{text-align:center}.section-optional-add-ons .boxes-container .box .text-content .options{flex-direction:column}.section-optional-add-ons .boxes-container .box .text-content p{text-align:center}.section-optional-add-ons .boxes-container .box .text-content .column-sep{margin:10px 0}}.section-optional-add-ons .boxes-container .box .recommended-container{position:absolute;top:-24px;left:-2px;height:24px;font-size:12px;font-weight:bold;padding:5px 20px;border-top-left-radius:5px;border-top-right-radius:5px}.section-optional-add-ons .box-left.state-pm-added .price-value{display:none}.section-optional-add-ons .box-left.state-pm-added .free-value{display:inline-block !important}.section-optional-add-ons .box-left.state-pm-added #add-password-manager{display:none}.section-optional-add-ons .box-left.state-pm-added .button-subtext{display:none}.section-optional-add-ons .box-left.state-pm-added .text-included{margin-top:15px;display:block !important}.section-optional-add-ons .cg-btn-link{font-size:16px;font-weight:700;text-decoration:underline;display:inline-block;padding:10px 15px;cursor:pointer}.section-optional-add-ons .boxes-container .box.active,.section-optional-add-ons.has-variation-a .boxes-container .box.active{border-color:#4BA920}.section-optional-add-ons .boxes-container .box .recommended-container,.section-optional-add-ons.has-variation-a .boxes-container .box .recommended-container{background:#4ba920;color:white}.section-optional-add-ons .boxes-container .box .controls-container .controls-content .btn-add,.section-optional-add-ons.has-variation-a .boxes-container .box .controls-container .controls-content .btn-add{background:#4ba920;color:white}.section-optional-add-ons .boxes-container .box .text-content .options .column-sep .fas,.section-optional-add-ons.has-variation-a .boxes-container .box .text-content .options .column-sep .fas{color:#4ba920}#modal-remove-password-manager.modal .modal-dialog{min-width:600px;margin-top:200px}@media only screen and (max-width: 767px){#modal-remove-password-manager.modal .modal-dialog{min-width:0;margin-top:80px}}#modal-remove-password-manager.modal .modal-header{padding-top:50px}#modal-remove-password-manager.modal .modal-header .modal-title{margin-top:10px}@media only screen and (max-width: 767px){#modal-remove-password-manager.modal .modal-header{padding-top:30px}}#modal-remove-password-manager.modal .modal-footer{padding-bottom:50px}#modal-remove-password-manager.modal h4{font-size:20px;font-weight:600;line-height:1.2em}#modal-remove-password-manager.modal p{font-size:16px;line-height:1.2em;margin-top:35px;margin-bottom:15px}#modal-remove-password-manager.modal ul{padding-left:0;list-style-position:inside;font-size:16px;font-weight:600;margin-top:20px}#modal-remove-password-manager.modal .modal-icon{width:90px}#modal-remove-password-manager.modal .cg-btn,#modal-remove-password-manager.modal .cg-line-btn{font-size:16px;font-weight:600;min-width:150px}#modal-remove-password-manager.modal .cg-btn.darkblue,#modal-remove-password-manager.modal .cg-line-btn.darkblue{border:1px solid #1D1E2F}#modal-remove-password-manager.modal .cg-btn.btn-darkblue,#modal-remove-password-manager.modal .cg-line-btn.btn-darkblue{border:1px solid #1D1E2F;background-color:white}.password-manager-text{color:#6C6C6C;font-weight:500;font-size:13px;line-height:30px}.dedicated-country,.dedicated-country-text{font-weight:500 !important}@media (max-width: 767.98px){.password-manager-text{font-size:12px}.dedicated-country,.dedicated-country-text{font-size:12px !important}}.section-optional-add-ons .container{padding-left:0;padding-right:0}.tooltip-img{margin-bottom:10px}.tooltip-img img{width:100%}.tpd-content ul{padding-left:1em}.tpd-content a{color:black !important}.tpd-content .tooltip-bold{font-weight:bold}.tpd-content .tooltip-underline{text-decoration:underline}.tpd-skin-dark .tpd-background{background-color:#242638 !important}.tooltip-content-dip-countries{padding:0 5px}.tooltip-content-dip-countries header{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.2);background-color:transparent;color:#fc0}.tooltip-content-dip-countries ul{padding-left:0;list-style-type:none}.tooltip-content-dip-countries ul li{margin-top:5px;margin-bottom:5px;font-weight:600;font-size:13px}.tooltip-content-dip-countries ul li .dip-country-flag{display:inline-block;vertical-align:middle;margin-right:5px}.dip-separator-container{width:100%}.dip-separator-container .dip-separator{border-top:1px solid #D5D5D5 !important;border:0px solid}.dip-icon-f{display:flex !important;max-width:85%}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip {
  box-sizing: content-box;
}
.tpd-tooltip [class^="tpd-"] {
  box-sizing: inherit;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content {
  padding-right: 0 !important;
}
.tpd-tooltip .tpd-content-no-padding {
  padding: 0 !important;
}

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative {
  width: 100%;
}
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box !important;
}
.tpd-has-title-close .tpd-title {
  padding-right: 0 !important;
}
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}

/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top {
  display: block;
}
.tpd-visible-frame-bottom .tpd-frame-bottom {
  display: block;
}
.tpd-visible-frame-left .tpd-frame-left {
  display: block;
}
.tpd-visible-frame-right .tpd-frame-right {
  display: block;
}

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow {
  box-shadow: none !important;
}

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem {
  display: none;
}
.tpd-no-stem .tpd-background-box-top {
  display: block;
}

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading {
  display: none;
}
/* no radius */
.tpd-no-radius
  .tpd-skin
  .tpd-frames
  .tpd-frame
  .tpd-backgrounds
  .tpd-background {
  border-radius: 0;
}
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top {
  top: 0;
}
.tpd-background-box-bottom {
  bottom: 0;
}
.tpd-background-box-left {
  left: 0;
}
.tpd-background-box-right {
  right: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side {
  width: 100%;
}
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side {
  height: 100%;
}

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset {
  margin: 0 !important;
}

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer {
  margin-top: 0;
}

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * {
  z-index: 0;
  zoom: 1;
}

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1, 1);
  transform: rotate(-90deg) scale(-1, 1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1, -1) translate(0, -100%);
  transform: scale(1, -1) translate(0, -100%);
}

/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tpd-spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper {
  display: none;
}
.tpd-is-loading .tpd-background {
  display: none;
}
.tpd-is-loading .tpd-background-loading {
  display: block;
}

/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper {
  display: block;
}

/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover {
  color: #808080;
  text-decoration: underline;
}
.tpd-tooltip a:hover {
  color: #6c6c6c;
}

/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background {
  border-radius: 5px;
}
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem {
  margin-left: 7px;
}
.tpd-size-x-small .tpd-close {
  margin-bottom: 1px;
}
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin {
  margin: 6px 0 0 9px;
}
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background {
  border-radius: 6px;
}
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem {
  margin-left: 8px;
}
.tpd-size-small .tpd-close {
  margin: 2px 1px;
}
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin {
  margin: 7px 0 0 13px;
}
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}

/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background {
  border-radius: 8px;
}
.tpd-size-medium .tpd-stem {
  width: 16px; /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-medium .tpd-close {
  margin: 4px 2px;
}
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin {
  margin: 8px 0 0 15px;
}
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background {
  border-radius: 8px;
}
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem {
  margin-left: 10px;
}
.tpd-size-large .tpd-close {
  margin: 5px 2px 5px 2px;
}
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin {
  margin: 9px 0 0 17px;
}
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}

/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
  color: #fff;
}
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper {
  border-bottom: 1px solid #404040;
}
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a {
  color: #ccc;
}
.tpd-skin-dark a:hover {
  color: #c0c0c0;
}

/* light */
.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
  color: #333;
}
.tpd-skin-light .tpd-background-content {
  background-color: #fff;
}
.tpd-skin-light .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.3);
}
.tpd-skin-light .tpd-background-title {
  background-color: #f7f7f7;
}
.tpd-skin-light .tpd-title-wrapper {
  border-bottom: 1px solid #c0c0c0;
}
.tpd-skin-light .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
/* fallback for no/disabled shadow */
.tpd-skin-light.tpd-no-shadow .tpd-background {
  border-color: rgba(100, 100, 100, 0.3);
}
.tpd-skin-light .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-light a {
  color: #808080;
}
.tpd-skin-light a:hover {
  color: #6c6c6c;
}

/* gray */
.tpd-skin-gray .tpd-content,
.tpd-skin-gray .tpd-title,
.tpd-skin-gray .tpd-close {
  color: #fff;
}
.tpd-skin-gray .tpd-background-content,
.tpd-skin-gray .tpd-background-title {
  background-color: #727272;
}
.tpd-skin-gray .tpd-background {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.1);
}
.tpd-skin-gray .tpd-title-wrapper {
  border-bottom: 1px solid #505050;
}
.tpd-skin-gray .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-gray a {
  color: #ccc;
}
.tpd-skin-gray a:hover {
  color: #b6b6b6;
}

/* red */
.tpd-skin-red .tpd-content,
.tpd-skin-red .tpd-title,
.tpd-skin-red .tpd-close {
  color: #fff;
}
.tpd-skin-red .tpd-background-content {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-background {
  border-width: 1px;
  border-color: rgba(12, 0, 0, 0.6);
}
.tpd-skin-red .tpd-background-title {
  background-color: #e13c37;
}
.tpd-skin-red .tpd-title-wrapper {
  border-bottom: 1px solid #a30500;
}
.tpd-skin-red .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-red .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-red a {
  color: #ddd;
}
.tpd-skin-red a:hover {
  color: #c6c6c6;
}

/* green */
.tpd-skin-green .tpd-content,
.tpd-skin-green .tpd-title,
.tpd-skin-green .tpd-close {
  color: #fff;
}
.tpd-skin-green .tpd-background-content {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 12, 0, 0.6);
}
.tpd-skin-green .tpd-background-title {
  background-color: #4aab3a;
}
.tpd-skin-green .tpd-title-wrapper {
  border-bottom: 1px solid #127c00;
}
.tpd-skin-green .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-green .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-green a {
  color: #ddd;
}
.tpd-skin-green a:hover {
  color: #c6c6c6;
}

/* blue */
.tpd-skin-blue .tpd-content,
.tpd-skin-blue .tpd-title,
.tpd-skin-blue .tpd-close {
  color: #fff;
}
.tpd-skin-blue .tpd-background-content {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 12, 0.6);
}
.tpd-skin-blue .tpd-background-title {
  background-color: #45a3e3;
}
.tpd-skin-blue .tpd-title-wrapper {
  border-bottom: 1px solid #1674b4;
}
.tpd-skin-blue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-blue .tpd-spinner-spin {
  border-color: rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
}
.tpd-skin-blue a {
  color: #ddd;
}
.tpd-skin-blue a:hover {
  color: #c6c6c6;
}

/* lightyellow */
.tpd-skin-lightyellow .tpd-content,
.tpd-skin-lightyellow .tpd-title,
.tpd-skin-lightyellow .tpd-close {
  color: #333;
}
.tpd-skin-lightyellow .tpd-background-content {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 8, 0, 0.35);
}
.tpd-skin-lightyellow .tpd-background-title {
  background-color: #ffffa9;
}
.tpd-skin-lightyellow .tpd-title-wrapper {
  border-bottom: 1px solid #a7a697;
}
.tpd-skin-lightyellow .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightyellow .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightyellow a {
  color: #777;
}
.tpd-skin-lightyellow a:hover {
  color: #868686;
}

/* lightblue */
.tpd-skin-lightblue .tpd-content,
.tpd-skin-lightblue .tpd-title,
.tpd-skin-lightblue .tpd-close {
  color: #333;
}
.tpd-skin-lightblue .tpd-background-content {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-background {
  border-width: 1px;
  border-color: rgba(0, 0, 8, 0.35);
}
.tpd-skin-lightblue .tpd-background-title {
  background-color: #bce5ff;
}
.tpd-skin-lightblue .tpd-title-wrapper {
  border-bottom: 1px solid #909b9f;
}
.tpd-skin-lightblue .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightblue .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightblue a {
  color: #777;
}
.tpd-skin-lightblue a:hover {
  color: #868686;
}

/* lightpink */
.tpd-skin-lightpink .tpd-content,
.tpd-skin-lightpink .tpd-title,
.tpd-skin-lightpink .tpd-close {
  color: #333;
}
.tpd-skin-lightpink .tpd-background-content {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-background {
  border-width: 1px;
  border-color: rgba(8, 0, 0, 0.35);
}
.tpd-skin-lightpink .tpd-background-title {
  background-color: #ffc4bf;
}
.tpd-skin-lightpink .tpd-title-wrapper {
  border-bottom: 1px solid #a08f8f;
}
.tpd-skin-lightpink .tpd-background-shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.tpd-skin-lightpink .tpd-spinner-spin {
  border-color: rgba(51, 51, 51, 0.2);
  border-left-color: #333;
}
.tpd-skin-lightpink a {
  color: #777;
}
.tpd-skin-lightpink a:hover {
  color: #868686;
}
.modal.modal-login.modal-new .modal-body{padding:10px 30px}.modal.modal-login.modal-new .modal-dialog{width:500px;max-width:100% !important;position:relative;margin:100px auto}.modal.modal-login.modal-new .modal__top-border{border-top:1px solid #D5D5D5}.modal.modal-login.modal-new .modal-header{padding-top:20px;text-align:center}.modal.modal-login.modal-new .modal-header img{max-width:200px}.modal.modal-login.modal-new .modal-header .img-error{display:none}.modal.modal-login.modal-new.error .modal-header .img-error{display:inline-block}.modal.modal-login.modal-new.error .modal-header .img-success{display:none}.modal.modal-login.modal-new.error .modal-header .header-message{color:#CB321B}.modal.modal-login.modal-new.error input{border-color:#CB321B !important}.modal.modal-login.modal-new.error .modal-content .error-msg{display:block}.modal.modal-login.modal-new.error .btn-error{display:block !important}.modal.modal-login.modal-new.error .btn-success{display:none}.modal.modal-login.modal-new .text-larger{font-size:18px}.modal.modal-login.modal-new .modal-content{padding:20px;background-color:#F8F9FA;-webkit-box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4);-moz-box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4);box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4)}.modal.modal-login.modal-new .modal-content.account-login{display:none}.modal.modal-login.modal-new .modal-content.account-login.active{display:block}.modal.modal-login.modal-new .modal-content input{color:#6C6C6C !important}.modal.modal-login.modal-new .modal-content.account-email{display:none}.modal.modal-login.modal-new .modal-content.account-email.active{display:block}.modal.modal-login.modal-new .modal-content .error-msg{display:none;background-color:#F2E6E5;text-align:center;color:#CB321B;font-weight:bold;padding:7px 0px;margin-bottom:15px}.modal.modal-login.modal-new .modal-content .error-msg p{font-weight:600}.modal.modal-login.modal-new .modal-content .btn-error{display:none}.modal.modal-login.modal-new .modal-content button.close{transition:transform .5s ease-in-out}.modal.modal-login.modal-new .modal-content button.close:hover{-webkit-transform:rotate(180deg);transform:rotate(180deg);text-decoration:none}.modal.modal-login.modal-new .modal-content .modal-title{color:#6C6C6C;font-weight:bold;font-size:40px;margin-top:0px}.modal.modal-login.modal-new .modal-content .modal-title img{height:80px;display:inline-block;margin-bottom:20px}.modal.modal-login.modal-new .modal-content .form-group{position:relative}.modal.modal-login.modal-new .modal-content .form-group label{position:absolute;top:25px;left:15px;font-weight:500;cursor:text;transition:0.3s all}.modal.modal-login.modal-new .modal-content .form-group .cg-textfield{border-color:#D5D5D5;height:40px;width:100%;font-size:16px;padding:8.5px 16px;font-weight:500;color:rgba(50,50,50,0.6);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin:15px auto 0 auto}.modal.modal-login.modal-new .modal-content .form-group .cg-textfield:focus{outline:0;-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3);-moz-box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3);box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3)}.modal.modal-login.modal-new .modal-content .form-group .cg-textfield:focus ~ label,.modal.modal-login.modal-new .modal-content .form-group .cg-textfield.not-empty ~ label{transform:scale(0.85) translateY(-40px) translateX(-25px)}.modal.modal-login.modal-new .modal-content button[type="submit"],.modal.modal-login.modal-new .modal-content a.js-email{cursor:pointer;width:100%;margin:0 auto;background-color:#fff;border:1px solid #1D1E2E;color:#1D1E2E;font-weight:bold;font-size:16px}.modal.modal-login.modal-new .modal-content .btn.disabled,.modal.modal-login.modal-new .modal-content button[type="submit"]:disabled{opacity:.65}.modal.modal-login.modal-new .modal-content .alert{display:none}.modal.modal-login.modal-new .modal-content form{padding-left:10px;padding-right:10px}.modal.modal-login.modal-new .modal-content .modal__new-user{color:#6C6C6C;font-size:18px;font-weight:bold;display:inline-block;padding-top:10px;line-height:40px}.modal.modal-login.modal-new .modal-content .modal__new-user a{color:#4BA920;text-decoration:underline}.modal.modal-login.modal-new .modal-apple-pay button[type="submit"]{background-color:#4BA920 !important;border-color:#4BA920 !important;color:#fff}.modal.modal-login.modal-new .forgot-user{color:#6C6C6C}.modal.modal-login.modal-new a.forgot-user{text-decoration:underline;font-weight:600}.modal.modal-login.modal-new.filled-modal .custom-hey .hey-1,.modal.modal-login.modal-new.filled-modal .custom-hey .hey-2{fill:#4BA920}.modal.modal-login.modal-new.filled-modal button[type="submit"]{background-color:#1D1E2E;color:#fff}.modal.modal-login.modal-new .recovered-email{color:#6C6C6C;text-decoration:underline}.modal.modal-login.modal-new .modal-recover .modal-header p{font-weight:600}.modal.modal-login.modal-new .modal-recover .forgot-user{font-size:12px}.modal.modal-login.modal-new .show-password{position:absolute;top:28px;right:20px;cursor:pointer;color:#1D1E2E}@media screen and (max-width: 767px){#login-modal .modal-content .modal-header{padding-bottom:0}#login-modal .modal-content .modal-header .modal-title{color:#6C6C6C;font-weight:bold;font-size:30px;margin-top:0px}#login-modal .modal-content .modal-header .modal-title .custom-hey{width:20px}#login-modal .modal-content .modal-body{padding-top:0}}.text-bold{font-weight:bold}
.modal.modal-login.modal-new .modal-body{padding:10px 30px}.modal.modal-login.modal-new .modal-dialog{width:500px;max-width:100% !important;position:relative;margin:100px auto}.modal.modal-login.modal-new .modal__top-border{border-top:1px solid #D5D5D5}.modal.modal-login.modal-new .modal-header{padding-top:20px;text-align:center}.modal.modal-login.modal-new .modal-header img{max-width:200px}.modal.modal-login.modal-new .modal-header .img-error{display:none}.modal.modal-login.modal-new.error .modal-header .img-error{display:inline-block}.modal.modal-login.modal-new.error .modal-header .img-success{display:none}.modal.modal-login.modal-new.error .modal-header .header-message{color:#CB321B}.modal.modal-login.modal-new.error input{border-color:#CB321B !important}.modal.modal-login.modal-new.error .modal-content .error-msg{display:block}.modal.modal-login.modal-new.error .btn-error{display:block !important}.modal.modal-login.modal-new.error .btn-success{display:none}.modal.modal-login.modal-new .text-larger{font-size:18px}.modal.modal-login.modal-new .modal-content{padding:20px;background-color:#F8F9FA;-webkit-box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4);-moz-box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4);box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4)}.modal.modal-login.modal-new .modal-content.account-login{display:none}.modal.modal-login.modal-new .modal-content.account-login.active{display:block}.modal.modal-login.modal-new .modal-content input{color:#6C6C6C !important}.modal.modal-login.modal-new .modal-content.account-email{display:none}.modal.modal-login.modal-new .modal-content.account-email.active{display:block}.modal.modal-login.modal-new .modal-content .error-msg{display:none;background-color:#F2E6E5;text-align:center;color:#CB321B;font-weight:bold;padding:7px 0px;margin-bottom:15px}.modal.modal-login.modal-new .modal-content .error-msg p{font-weight:600}.modal.modal-login.modal-new .modal-content .btn-error{display:none}.modal.modal-login.modal-new .modal-content button.close{transition:transform .5s ease-in-out}.modal.modal-login.modal-new .modal-content button.close:hover{-webkit-transform:rotate(180deg);transform:rotate(180deg);text-decoration:none}.modal.modal-login.modal-new .modal-content .modal-title{color:#6C6C6C;font-weight:bold;font-size:40px;margin-top:0px}.modal.modal-login.modal-new .modal-content .modal-title img{height:80px;display:inline-block;margin-bottom:20px}.modal.modal-login.modal-new .modal-content .form-group{position:relative}.modal.modal-login.modal-new .modal-content .form-group label{position:absolute;top:25px;left:15px;font-weight:500;cursor:text;transition:0.3s all}.modal.modal-login.modal-new .modal-content .form-group .cg-textfield{border-color:#D5D5D5;height:40px;width:100%;font-size:16px;padding:8.5px 16px;font-weight:500;color:rgba(50,50,50,0.6);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin:15px auto 0 auto}.modal.modal-login.modal-new .modal-content .form-group .cg-textfield:focus{outline:0;-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3);-moz-box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3);box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3)}.modal.modal-login.modal-new .modal-content .form-group .cg-textfield:focus ~ label,.modal.modal-login.modal-new .modal-content .form-group .cg-textfield.not-empty ~ label{transform:scale(0.85) translateY(-40px) translateX(-25px)}.modal.modal-login.modal-new .modal-content button[type="submit"],.modal.modal-login.modal-new .modal-content a.js-email{cursor:pointer;width:100%;margin:0 auto;background-color:#fff;border:1px solid #1D1E2E;color:#1D1E2E;font-weight:bold;font-size:16px}.modal.modal-login.modal-new .modal-content .btn.disabled,.modal.modal-login.modal-new .modal-content button[type="submit"]:disabled{opacity:.65}.modal.modal-login.modal-new .modal-content .alert{display:none}.modal.modal-login.modal-new .modal-content form{padding-left:10px;padding-right:10px}.modal.modal-login.modal-new .modal-content .modal__new-user{color:#6C6C6C;font-size:18px;font-weight:bold;display:inline-block;padding-top:10px;line-height:40px}.modal.modal-login.modal-new .modal-content .modal__new-user a{color:#4BA920;text-decoration:underline}.modal.modal-login.modal-new .modal-apple-pay button[type="submit"]{background-color:#4BA920 !important;border-color:#4BA920 !important;color:#fff}.modal.modal-login.modal-new .forgot-user{color:#6C6C6C}.modal.modal-login.modal-new a.forgot-user{text-decoration:underline;font-weight:600}.modal.modal-login.modal-new.filled-modal .custom-hey .hey-1,.modal.modal-login.modal-new.filled-modal .custom-hey .hey-2{fill:#4BA920}.modal.modal-login.modal-new.filled-modal button[type="submit"]{background-color:#1D1E2E;color:#fff}.modal.modal-login.modal-new .recovered-email{color:#6C6C6C;text-decoration:underline}.modal.modal-login.modal-new .modal-recover .modal-header p{font-weight:600}.modal.modal-login.modal-new .modal-recover .forgot-user{font-size:12px}.modal.modal-login.modal-new .show-password{position:absolute;top:28px;right:20px;cursor:pointer;color:#1D1E2E}@media screen and (max-width: 767px){#login-modal .modal-content .modal-header{padding-bottom:0}#login-modal .modal-content .modal-header .modal-title{color:#6C6C6C;font-weight:bold;font-size:30px;margin-top:0px}#login-modal .modal-content .modal-header .modal-title .custom-hey{width:20px}#login-modal .modal-content .modal-body{padding-top:0}}.text-bold{font-weight:bold}
.black{background-color:#000 !important;color:#fff !important}.yellow{background-color:#fc0 !important;color:#1E1F2E !important}.darkgray{background-color:#1E1F2E !important;color:#fff !important}.semidarkgray{background-color:#95989A !important;color:#fff !important}.lightgray{background-color:#f8f9fa !important;color:#1E1F2E !important}.white{background-color:#fff !important;color:#1E1F2E !important}.green{background-color:#4BA920 !important;color:#fff !important}.primary{background-color:#fc0 !important;color:#1E1F2E !important}.darkblue{background-color:#1D1E2F !important;color:#fff !important}.dark{background-color:#1E1F2E !important;color:#fff !important}.dark .darkgray-text{color:#fff !important}.dark .darkgray-text:hover,.dark .darkgray-text:focus,.dark .darkgray-text:active{color:#fff !important}.light{background-color:#f8f9fa !important;color:#1E1F2E !important}.light .lightgray-text{color:#1E1F2E !important}.light .lightgray-text:hover,.light .lightgray-text:focus,.light .lightgray-text:active{color:#1E1F2E !important}.light .white-text{color:#1E1F2E !important}.light .white-text:hover,.light .white-text:focus,.light .white-text:active{color:#1E1F2E !important}.yellow-text{color:#fc0 !important}.yellow-text:hover,.yellow-text:focus,.yellow-text:active{color:#fc0 !important}.darkgray-text{color:#1E1F2E !important}.darkgray-text:hover,.darkgray-text:focus,.darkgray-text:active{color:#1E1F2E !important}.lightgray-text{color:#f8f9fa !important}.lightgray-text:hover,.lightgray-text:focus,.lightgray-text:active{color:#f8f9fa !important}.white-text{color:#fff !important}.white-text:hover,.white-text:focus,.white-text:active{color:#fff !important}.green-text{color:#4BA920 !important}.green-text:hover,.green-text:focus,.green-text:active{color:#4BA920 !important}.darkblue-text{color:#1D1E2F !important}.darkblue-text:hover,.darkblue-text:focus,.darkblue-text:active{color:#1D1E2F !important}.darkgray-shade-one-text{color:#7477a4}.color-facebook{background-color:#3B5998;color:white}.color-google-plus{background-color:#DC4E41;color:white}.color-instagram{background-color:#6A453B;color:white}.color-linkedin{background-color:#007AB9;color:white}.color-pinterest{background-color:#CB2027;color:white}.color-twitter{background-color:#55ACEE;color:white}.color-vimeo{background-color:#86C9EF;color:white}.color-youtube{background-color:#D42428;color:white}.pv-xs{padding-top:5px;padding-bottom:5px}.pt-xs{padding-top:5px}.pb-xs{padding-bottom:5px}.ph-xs{padding-left:5px;padding-right:5px}.pl-xs{padding-left:5px}.pr-xs{padding-right:5px}.pv-sm{padding-top:25px;padding-bottom:25px}.pt-sm{padding-top:25px}.pb-sm{padding-bottom:25px}.ph-sm{padding-left:25px;padding-right:25px}.pl-sm{padding-left:25px}.pr-sm{padding-right:25px}.pv-md{padding-top:50px;padding-bottom:50px}.pt-md{padding-top:50px}.pb-md{padding-bottom:50px}.ph-md{padding-left:50px;padding-right:50px}.pl-md{padding-left:50px}.pr-md{padding-right:50px}.pv-lg{padding-top:100px;padding-bottom:100px}.pt-lg{padding-top:100px}.pb-lg{padding-bottom:100px}.ph-lg{padding-left:100px;padding-right:100px}.pl-lg{padding-left:100px}.pr-lg{padding-right:100px}.pv-xl{padding-top:200px;padding-bottom:200px}.pt-xl{padding-top:200px}.pb-xl{padding-bottom:200px}.ph-xl{padding-left:200px;padding-right:200px}.pl-xl{padding-left:200px}.pr-xl{padding-right:200px}@media only screen and (max-width: 767px){.pv-xs.resp{padding-top:2.5px;padding-bottom:2.5px}.pt-xs.resp{padding-top:2.5px}.pb-xs.resp{padding-bottom:2.5px}.ph-xs.resp{padding-left:2.5px;padding-right:2.5px}.pl-xs.resp{padding-left:2.5px}.pr-xs.resp{padding-right:2.5px}.pv-sm.resp{padding-top:12.5px;padding-bottom:12.5px}.pt-sm.resp{padding-top:12.5px}.pb-sm.resp{padding-bottom:12.5px}.ph-sm.resp{padding-left:12.5px;padding-right:12.5px}.pl-sm.resp{padding-left:12.5px}.pr-sm.resp{padding-right:12.5px}.pv-md.resp{padding-top:25px;padding-bottom:25px}.pt-md.resp{padding-top:25px}.pb-md.resp{padding-bottom:25px}.ph-md.resp{padding-left:25px;padding-right:25px}.pl-md.resp{padding-left:25px}.pr-md.resp{padding-right:25px}.pv-lg.resp{padding-top:50px;padding-bottom:50px}.pt-lg.resp{padding-top:50px}.pb-lg.resp{padding-bottom:50px}.ph-lg.resp{padding-left:50px;padding-right:50px}.pl-lg.resp{padding-left:50px}.pr-lg.resp{padding-right:50px}.pv-xl.resp{padding-top:100px;padding-bottom:100px}.pt-xl.resp{padding-top:100px}.pb-xl.resp{padding-bottom:100px}.ph-xl.resp{padding-left:100px;padding-right:100px}.pl-xl.resp{padding-left:100px}.pr-xl.resp{padding-right:100px}}.mt-0{margin-top:0px !important}.pt-0{padding-top:0px !important}.mb-0{margin-bottom:0px !important}.pb-0{padding-bottom:0px !important}.ml-0{margin-left:0px !important}.pl-0{padding-left:0px !important}.mr-0{margin-right:0px !important}.pr-0{padding-right:0px !important}.mt-5{margin-top:5px !important}.pt-5{padding-top:5px !important}.mb-5{margin-bottom:5px !important}.pb-5{padding-bottom:5px !important}.ml-5{margin-left:5px !important}.pl-5{padding-left:5px !important}.mr-5{margin-right:5px !important}.pr-5{padding-right:5px !important}.mt-10{margin-top:10px !important}.pt-10{padding-top:10px !important}.mb-10{margin-bottom:10px !important}.pb-10{padding-bottom:10px !important}.ml-10{margin-left:10px !important}.pl-10{padding-left:10px !important}.mr-10{margin-right:10px !important}.pr-10{padding-right:10px !important}.mt-15{margin-top:15px !important}.pt-15{padding-top:15px !important}.mb-15{margin-bottom:15px !important}.pb-15{padding-bottom:15px !important}.ml-15{margin-left:15px !important}.pl-15{padding-left:15px !important}.mr-15{margin-right:15px !important}.pr-15{padding-right:15px !important}.mt-20{margin-top:20px !important}.pt-20{padding-top:20px !important}.mb-20{margin-bottom:20px !important}.pb-20{padding-bottom:20px !important}.ml-20{margin-left:20px !important}.pl-20{padding-left:20px !important}.mr-20{margin-right:20px !important}.pr-20{padding-right:20px !important}.mt-25{margin-top:25px !important}.pt-25{padding-top:25px !important}.mb-25{margin-bottom:25px !important}.pb-25{padding-bottom:25px !important}.ml-25{margin-left:25px !important}.pl-25{padding-left:25px !important}.mr-25{margin-right:25px !important}.pr-25{padding-right:25px !important}.mt-30{margin-top:30px !important}.pt-30{padding-top:30px !important}.mb-30{margin-bottom:30px !important}.pb-30{padding-bottom:30px !important}.ml-30{margin-left:30px !important}.pl-30{padding-left:30px !important}.mr-30{margin-right:30px !important}.pr-30{padding-right:30px !important}.mt-35{margin-top:35px !important}.pt-35{padding-top:35px !important}.mb-35{margin-bottom:35px !important}.pb-35{padding-bottom:35px !important}.ml-35{margin-left:35px !important}.pl-35{padding-left:35px !important}.mr-35{margin-right:35px !important}.pr-35{padding-right:35px !important}.mt-40{margin-top:40px !important}.pt-40{padding-top:40px !important}.mb-40{margin-bottom:40px !important}.pb-40{padding-bottom:40px !important}.ml-40{margin-left:40px !important}.pl-40{padding-left:40px !important}.mr-40{margin-right:40px !important}.pr-40{padding-right:40px !important}.mt-45{margin-top:45px !important}.pt-45{padding-top:45px !important}.mb-45{margin-bottom:45px !important}.pb-45{padding-bottom:45px !important}.ml-45{margin-left:45px !important}.pl-45{padding-left:45px !important}.mr-45{margin-right:45px !important}.pr-45{padding-right:45px !important}.mt-50{margin-top:50px !important}.pt-50{padding-top:50px !important}.mb-50{margin-bottom:50px !important}.pb-50{padding-bottom:50px !important}.ml-50{margin-left:50px !important}.pl-50{padding-left:50px !important}.mr-50{margin-right:50px !important}.pr-50{padding-right:50px !important}.mt-60{margin-top:60px !important}.pt-60{padding-top:60px !important}.mb-60{margin-bottom:60px !important}.pb-60{padding-bottom:60px !important}.ml-60{margin-left:60px !important}.pl-60{padding-left:60px !important}.mr-60{margin-right:60px !important}.pr-60{padding-right:60px !important}.mt-70{margin-top:70px !important}.pt-70{padding-top:70px !important}.mb-70{margin-bottom:70px !important}.pb-70{padding-bottom:70px !important}.ml-70{margin-left:70px !important}.pl-70{padding-left:70px !important}.mr-70{margin-right:70px !important}.pr-70{padding-right:70px !important}.mt-80{margin-top:80px !important}.pt-80{padding-top:80px !important}.mb-80{margin-bottom:80px !important}.pb-80{padding-bottom:80px !important}.ml-80{margin-left:80px !important}.pl-80{padding-left:80px !important}.mr-80{margin-right:80px !important}.pr-80{padding-right:80px !important}.mt-90{margin-top:90px !important}.pt-90{padding-top:90px !important}.mb-90{margin-bottom:90px !important}.pb-90{padding-bottom:90px !important}.ml-90{margin-left:90px !important}.pl-90{padding-left:90px !important}.mr-90{margin-right:90px !important}.pr-90{padding-right:90px !important}.mt-100{margin-top:100px !important}.pt-100{padding-top:100px !important}.mb-100{margin-bottom:100px !important}.pb-100{padding-bottom:100px !important}.ml-100{margin-left:100px !important}.pl-100{padding-left:100px !important}.mr-100{margin-right:100px !important}.pr-100{padding-right:100px !important}.display-table{display:table}.table-row{display:table-row}.table-cell{display:table-cell;vertical-align:middle}.uppercase{text-transform:uppercase}.underline{text-decoration:underline}.sprite-cell{display:inline-block;transform-origin:center center}.sprite{display:inline-block !important}.center-vertical-top{transform:translateY(-50%)}.center-absolute{position:absolute;top:0;left:0;right:0;margin:auto}.no-margin{margin:0 !important}.icon-size{width:190px;height:190px}@media only screen and (max-width: 767px){.icon-size.resp{width:114px;height:114px}}.icon-size-400{display:inline-block;max-width:400px;height:auto}@media only screen and (max-width: 767px){.icon-size-400{width:80%}}.max-600{max-width:600px;margin-left:auto;margin-right:auto}.max-800{max-width:800px;margin-left:auto;margin-right:auto}.max-950{max-width:950px;margin-left:auto;margin-right:auto}.max-1024{max-width:1024px;margin-left:auto;margin-right:auto}.container.limit-container-width{max-width:950px;margin-left:auto;margin-right:auto}.accent-line{position:relative;margin-top:0;margin-bottom:0}.accent-line:before{position:absolute;content:"";width:80px;height:4px;background-color:#fc0;bottom:-10px}@media only screen and (max-width: 767px){.accent-line:before{left:50%;transform:translate(-40px)}}.btn-store>img{height:64px;width:auto}textarea:focus,input:focus,button:focus{outline:none}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:0}.text-left-not-xs,.text-left-not-sm,.text-left-not-md,.text-left-not-lg{text-align:left}.text-center-not-xs,.text-center-not-sm,.text-center-not-md,.text-center-not-lg{text-align:center}.text-right-not-xs,.text-right-not-sm,.text-right-not-md,.text-right-not-lg{text-align:right}.text-justify-not-xs,.text-justify-not-sm,.text-justify-not-md,.text-justify-not-lg{text-align:justify}@media (max-width: 767px){.text-left-not-xs,.text-center-not-xs,.text-right-not-xs,.text-justify-not-xs{text-align:inherit}.text-left-xs{text-align:left}.text-center-xs{text-align:center}.text-right-xs{text-align:right}.text-justify-xs{text-align:justify}}@media (min-width: 768px) and (max-width: 991px){.text-left-not-sm,.text-center-not-sm,.text-right-not-sm,.text-justify-not-sm{text-align:inherit}.text-left-sm{text-align:left}.text-center-sm{text-align:center}.text-right-sm{text-align:right}.text-justify-sm{text-align:justify}}@media (min-width: 992px) and (max-width: 1199px){.text-left-not-md,.text-center-not-md,.text-right-not-md,.text-justify-not-md{text-align:inherit}.text-left-md{text-align:left}.text-center-md{text-align:center}.text-right-md{text-align:right}.text-justify-md{text-align:justify}}@media (min-width: 1200px){.text-left-not-lg,.text-center-not-lg,.text-right-not-lg,.text-justify-not-lg{text-align:inherit}.text-left-lg{text-align:left}.text-center-lg{text-align:center}.text-right-lg{text-align:right}.text-justify-lg{text-align:justify}}.col-xs-5ths,.col-sm-5ths,.col-md-5ths,.col-lg-5ths{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-5ths{width:20%;float:left}@media (min-width: 768px){.col-sm-5ths{width:20%;float:left}}@media (min-width: 992px){.col-md-5ths{width:20%;float:left}}@media (min-width: 1200px){.col-lg-5ths{width:20%;float:left}}.utils.m-0{margin:0 !important}.utils.mx-0{margin-left:0 !important;margin-right:0 !important}.utils.my-0{margin-top:0 !important;margin-bottom:0 !important}.utils.p-0{padding:0 !important}.utils.px-0{padding-left:0 !important;padding-right:0 !important}.utils.py-0{padding-top:0 !important;padding-bottom:0 !important}.utils.mt-0{margin-top:0 !important}.utils.mx-0{margin-left:0 !important;margin-right:0 !important}.utils.my-0{margin-top:0 !important;margin-bottom:0 !important}.utils.pt-0{padding-top:0 !important}.utils.px-0{padding-left:0 !important;padding-right:0 !important}.utils.py-0{padding-top:0 !important;padding-bottom:0 !important}.utils.mb-0{margin-bottom:0 !important}.utils.mx-0{margin-left:0 !important;margin-right:0 !important}.utils.my-0{margin-top:0 !important;margin-bottom:0 !important}.utils.pb-0{padding-bottom:0 !important}.utils.px-0{padding-left:0 !important;padding-right:0 !important}.utils.py-0{padding-top:0 !important;padding-bottom:0 !important}.utils.mr-0{margin-right:0 !important}.utils.mx-0{margin-left:0 !important;margin-right:0 !important}.utils.my-0{margin-top:0 !important;margin-bottom:0 !important}.utils.pr-0{padding-right:0 !important}.utils.px-0{padding-left:0 !important;padding-right:0 !important}.utils.py-0{padding-top:0 !important;padding-bottom:0 !important}.utils.ml-0{margin-left:0 !important}.utils.mx-0{margin-left:0 !important;margin-right:0 !important}.utils.my-0{margin-top:0 !important;margin-bottom:0 !important}.utils.pl-0{padding-left:0 !important}.utils.px-0{padding-left:0 !important;padding-right:0 !important}.utils.py-0{padding-top:0 !important;padding-bottom:0 !important}.utils.m-1{margin:5px !important}.utils.mx-1{margin-left:5px !important;margin-right:5px !important}.utils.my-1{margin-top:5px !important;margin-bottom:5px !important}.utils.p-1{padding:5px !important}.utils.px-1{padding-left:5px !important;padding-right:5px !important}.utils.py-1{padding-top:5px !important;padding-bottom:5px !important}.utils.mt-1{margin-top:5px !important}.utils.mx-1{margin-left:5px !important;margin-right:5px !important}.utils.my-1{margin-top:5px !important;margin-bottom:5px !important}.utils.pt-1{padding-top:5px !important}.utils.px-1{padding-left:5px !important;padding-right:5px !important}.utils.py-1{padding-top:5px !important;padding-bottom:5px !important}.utils.mb-1{margin-bottom:5px !important}.utils.mx-1{margin-left:5px !important;margin-right:5px !important}.utils.my-1{margin-top:5px !important;margin-bottom:5px !important}.utils.pb-1{padding-bottom:5px !important}.utils.px-1{padding-left:5px !important;padding-right:5px !important}.utils.py-1{padding-top:5px !important;padding-bottom:5px !important}.utils.mr-1{margin-right:5px !important}.utils.mx-1{margin-left:5px !important;margin-right:5px !important}.utils.my-1{margin-top:5px !important;margin-bottom:5px !important}.utils.pr-1{padding-right:5px !important}.utils.px-1{padding-left:5px !important;padding-right:5px !important}.utils.py-1{padding-top:5px !important;padding-bottom:5px !important}.utils.ml-1{margin-left:5px !important}.utils.mx-1{margin-left:5px !important;margin-right:5px !important}.utils.my-1{margin-top:5px !important;margin-bottom:5px !important}.utils.pl-1{padding-left:5px !important}.utils.px-1{padding-left:5px !important;padding-right:5px !important}.utils.py-1{padding-top:5px !important;padding-bottom:5px !important}.utils.m-2{margin:25px !important}.utils.mx-2{margin-left:25px !important;margin-right:25px !important}.utils.my-2{margin-top:25px !important;margin-bottom:25px !important}.utils.p-2{padding:25px !important}.utils.px-2{padding-left:25px !important;padding-right:25px !important}.utils.py-2{padding-top:25px !important;padding-bottom:25px !important}.utils.mt-2{margin-top:25px !important}.utils.mx-2{margin-left:25px !important;margin-right:25px !important}.utils.my-2{margin-top:25px !important;margin-bottom:25px !important}.utils.pt-2{padding-top:25px !important}.utils.px-2{padding-left:25px !important;padding-right:25px !important}.utils.py-2{padding-top:25px !important;padding-bottom:25px !important}.utils.mb-2{margin-bottom:25px !important}.utils.mx-2{margin-left:25px !important;margin-right:25px !important}.utils.my-2{margin-top:25px !important;margin-bottom:25px !important}.utils.pb-2{padding-bottom:25px !important}.utils.px-2{padding-left:25px !important;padding-right:25px !important}.utils.py-2{padding-top:25px !important;padding-bottom:25px !important}.utils.mr-2{margin-right:25px !important}.utils.mx-2{margin-left:25px !important;margin-right:25px !important}.utils.my-2{margin-top:25px !important;margin-bottom:25px !important}.utils.pr-2{padding-right:25px !important}.utils.px-2{padding-left:25px !important;padding-right:25px !important}.utils.py-2{padding-top:25px !important;padding-bottom:25px !important}.utils.ml-2{margin-left:25px !important}.utils.mx-2{margin-left:25px !important;margin-right:25px !important}.utils.my-2{margin-top:25px !important;margin-bottom:25px !important}.utils.pl-2{padding-left:25px !important}.utils.px-2{padding-left:25px !important;padding-right:25px !important}.utils.py-2{padding-top:25px !important;padding-bottom:25px !important}.utils.m-3{margin:50px !important}.utils.mx-3{margin-left:50px !important;margin-right:50px !important}.utils.my-3{margin-top:50px !important;margin-bottom:50px !important}.utils.p-3{padding:50px !important}.utils.px-3{padding-left:50px !important;padding-right:50px !important}.utils.py-3{padding-top:50px !important;padding-bottom:50px !important}.utils.mt-3{margin-top:50px !important}.utils.mx-3{margin-left:50px !important;margin-right:50px !important}.utils.my-3{margin-top:50px !important;margin-bottom:50px !important}.utils.pt-3{padding-top:50px !important}.utils.px-3{padding-left:50px !important;padding-right:50px !important}.utils.py-3{padding-top:50px !important;padding-bottom:50px !important}.utils.mb-3{margin-bottom:50px !important}.utils.mx-3{margin-left:50px !important;margin-right:50px !important}.utils.my-3{margin-top:50px !important;margin-bottom:50px !important}.utils.pb-3{padding-bottom:50px !important}.utils.px-3{padding-left:50px !important;padding-right:50px !important}.utils.py-3{padding-top:50px !important;padding-bottom:50px !important}.utils.mr-3{margin-right:50px !important}.utils.mx-3{margin-left:50px !important;margin-right:50px !important}.utils.my-3{margin-top:50px !important;margin-bottom:50px !important}.utils.pr-3{padding-right:50px !important}.utils.px-3{padding-left:50px !important;padding-right:50px !important}.utils.py-3{padding-top:50px !important;padding-bottom:50px !important}.utils.ml-3{margin-left:50px !important}.utils.mx-3{margin-left:50px !important;margin-right:50px !important}.utils.my-3{margin-top:50px !important;margin-bottom:50px !important}.utils.pl-3{padding-left:50px !important}.utils.px-3{padding-left:50px !important;padding-right:50px !important}.utils.py-3{padding-top:50px !important;padding-bottom:50px !important}.utils.m-4{margin:100px !important}.utils.mx-4{margin-left:100px !important;margin-right:100px !important}.utils.my-4{margin-top:100px !important;margin-bottom:100px !important}.utils.p-4{padding:100px !important}.utils.px-4{padding-left:100px !important;padding-right:100px !important}.utils.py-4{padding-top:100px !important;padding-bottom:100px !important}.utils.mt-4{margin-top:100px !important}.utils.mx-4{margin-left:100px !important;margin-right:100px !important}.utils.my-4{margin-top:100px !important;margin-bottom:100px !important}.utils.pt-4{padding-top:100px !important}.utils.px-4{padding-left:100px !important;padding-right:100px !important}.utils.py-4{padding-top:100px !important;padding-bottom:100px !important}.utils.mb-4{margin-bottom:100px !important}.utils.mx-4{margin-left:100px !important;margin-right:100px !important}.utils.my-4{margin-top:100px !important;margin-bottom:100px !important}.utils.pb-4{padding-bottom:100px !important}.utils.px-4{padding-left:100px !important;padding-right:100px !important}.utils.py-4{padding-top:100px !important;padding-bottom:100px !important}.utils.mr-4{margin-right:100px !important}.utils.mx-4{margin-left:100px !important;margin-right:100px !important}.utils.my-4{margin-top:100px !important;margin-bottom:100px !important}.utils.pr-4{padding-right:100px !important}.utils.px-4{padding-left:100px !important;padding-right:100px !important}.utils.py-4{padding-top:100px !important;padding-bottom:100px !important}.utils.ml-4{margin-left:100px !important}.utils.mx-4{margin-left:100px !important;margin-right:100px !important}.utils.my-4{margin-top:100px !important;margin-bottom:100px !important}.utils.pl-4{padding-left:100px !important}.utils.px-4{padding-left:100px !important;padding-right:100px !important}.utils.py-4{padding-top:100px !important;padding-bottom:100px !important}.utils.m-5{margin:200px !important}.utils.mx-5{margin-left:200px !important;margin-right:200px !important}.utils.my-5{margin-top:200px !important;margin-bottom:200px !important}.utils.p-5{padding:200px !important}.utils.px-5{padding-left:200px !important;padding-right:200px !important}.utils.py-5{padding-top:200px !important;padding-bottom:200px !important}.utils.mt-5{margin-top:200px !important}.utils.mx-5{margin-left:200px !important;margin-right:200px !important}.utils.my-5{margin-top:200px !important;margin-bottom:200px !important}.utils.pt-5{padding-top:200px !important}.utils.px-5{padding-left:200px !important;padding-right:200px !important}.utils.py-5{padding-top:200px !important;padding-bottom:200px !important}.utils.mb-5{margin-bottom:200px !important}.utils.mx-5{margin-left:200px !important;margin-right:200px !important}.utils.my-5{margin-top:200px !important;margin-bottom:200px !important}.utils.pb-5{padding-bottom:200px !important}.utils.px-5{padding-left:200px !important;padding-right:200px !important}.utils.py-5{padding-top:200px !important;padding-bottom:200px !important}.utils.mr-5{margin-right:200px !important}.utils.mx-5{margin-left:200px !important;margin-right:200px !important}.utils.my-5{margin-top:200px !important;margin-bottom:200px !important}.utils.pr-5{padding-right:200px !important}.utils.px-5{padding-left:200px !important;padding-right:200px !important}.utils.py-5{padding-top:200px !important;padding-bottom:200px !important}.utils.ml-5{margin-left:200px !important}.utils.mx-5{margin-left:200px !important;margin-right:200px !important}.utils.my-5{margin-top:200px !important;margin-bottom:200px !important}.utils.pl-5{padding-left:200px !important}.utils.px-5{padding-left:200px !important;padding-right:200px !important}.utils.py-5{padding-top:200px !important;padding-bottom:200px !important}body{font-family:"Montserrat","Verdana",sans-serif}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin-top:0;margin-bottom:0;color:inherit}h1{font-size:40px !important;font-weight:700}h1 em{font-size:70px !important;text-transform:uppercase;font-style:normal;font-weight:800}@media only screen and (max-width: 767px){h1 em{font-size:30px !important}}@media only screen and (max-width: 767px){h1{font-size:30px !important}}h2{font-size:32px;font-weight:600}h2+.subtitle{font-size:20px}@media only screen and (max-width: 767px){h2{font-size:24px}h2+.subtitle{font-size:16px}}h3{font-size:20px;font-weight:600}@media only screen and (max-width: 767px){h3{font-size:20px}}p{margin:0;font-size:16px;font-weight:400;line-height:1.5em;color:inherit}@media only screen and (max-width: 767px){p{font-size:16px}}p a{color:inherit;text-decoration:underline}p a:hover,p a:active,p a:focus{color:inherit}address{font-size:16px}.jumbotron .subtitle{font-size:20px}@media only screen and (max-width: 767px){.jumbotron .subtitle{font-size:16px}}.subtitle-lg{font-size:28px;font-weight:300;margin-top:10px}@media only screen and (max-width: 767px){.subtitle-lg{font-size:20px}}a.white-text:hover{color:#fc0 !important}.font-weight-bold{font-weight:700}.font-weight-normal{font-weight:400}.cg-btn,.cg-line-btn{position:relative;vertical-align:top;font-size:18px;font-weight:700;line-height:1.5em;border:none;padding:8px 12px;margin:5px;border-radius:4px;outline:0;display:inline-block;text-decoration:none;overflow:hidden;text-overflow:ellipsis;word-wrap:normal;white-space:normal;transition:opacity .5s, box-shadow 300ms, background-color 300ms}.cg-btn:hover,.cg-btn:focus,.cg-line-btn:hover,.cg-line-btn:focus{opacity:0.9;text-decoration:none;box-shadow:0px 0px 16px rgba(0,0,0,0.5)}.cg-btn:active,.cg-line-btn:active{transition:opacity 0.5s;opacity:0.2;text-decoration:none}.cg-btn::-moz-focus-inner,.cg-line-btn::-moz-focus-inner{border:0}.cg-btn.cg-processing:before,.cg-btn.cg-processing:after,.cg-line-btn.cg-processing:before,.cg-line-btn.cg-processing:after{position:absolute;content:'';display:inline-block;left:10px;top:calc(50% - 4px);width:7px;height:7px;background-color:#ffffff;border-radius:100%;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.cg-btn.cg-processing:after,.cg-line-btn.cg-processing:after{left:20px;-webkit-animation-delay:-0.32s;animation-delay:-0.32s}@-webkit-keyframes sk-bouncedelay{0%, 80%, 100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%, 80%, 100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.cg-btn.cg-btn-sm{padding:6px 10px;font-size:14px;font-weight:400}.cg-btn.cg-btn-lg{padding:10px 15px;font-size:18px}.cg-btn.cg-btn-long{padding:10px 45px;font-size:18px}.cg-btn.cg-btn-xl{padding:10px 25px;font-size:27px}.cg-line-btn{padding:7px 10px;border-width:1px;border-style:solid;background-color:transparent}.cg-line-btn.cg-line-btn-sm{padding:5px 9px;font-size:14px;font-weight:400}.cg-line-btn.cg-line-btn-lg{padding:9px 14px;font-size:18px}.cg-line-btn.cg-line-btn-xl{padding:9px 24px;font-size:27px}.cg-btn.primary:hover{background-color:#FFC200 !important}.cg-btn.yellow:hover{background-color:#FFC200 !important}.cg-line-btn{background-color:transparent !important}.cg-line-btn.primary{border-color:#fc0;color:#fc0}.cg-line-btn.yellow{border-color:#fc0;color:#fc0 !important}.cg-line-btn.white{border-color:#fff;color:#fff !important}.cg-line-btn.white:hover{background-color:white !important;color:#1D1E2F !important}.cg-line-btn.darkgray{border-color:#1E1F2E;color:#1E1F2E !important}.cg-line-btn.green{border-color:#4BA920;color:#4BA920 !important}.cg-line-btn.lightgray{border-color:#f8f9fa;color:#f8f9fa !important}.cg-line-btn.darkblue{border-color:#1D1E2F;color:#1D1E2F !important}.cg-line-btn.darkblue:hover{background-color:#1D1E2F !important;color:#fff !important}@media only screen and (max-width: 767px){.cg-btn.resp{padding:6px 10px;font-size:14px}.cg-line-btn.resp{padding:5px 9px;font-size:14px}.cg-btn-lg.resp{padding:8px 12px;font-size:18px}.cg-btn-long.resp{padding:8px 12px;font-size:18px}.cg-line-btn-lg.resp{padding:7px 11px;font-size:18px}}@media only screen and (max-width: 767px){.cg-btn.cg-btn-lg{padding:8px 12px;font-size:18px}.cg-btn.cg-btn-long{padding:8px 12px;font-size:18px}.cg-line-btn.cg-line-btn-lg{padding:7px 11px;font-size:18px}}.download-button-container{display:inline-block;text-align:center}.download-button-container .underline{font-size:15px}.cg-textfield{vertical-align:top;display:inline-block;font-size:16px;line-height:1.35em;border:1px solid rgba(0,0,0,0.2);border-radius:4px;padding:8.5px 16px;margin:5px;-webkit-appearance:none}.cg-textfield::placeholder{color:rgba(0,0,0,0.4)}.cg-textfield:focus{border-color:#fc0}.cg-textfield.disabled{opacity:0.4;background-color:rgba(0,0,0,0.1)}.cg-textfield.cg-textfield-sm{font-size:14px;padding:5px 12px}.cg-textfield.darkblue{background-color:transparent !important;color:#323232 !important}.cg-textfield.darkblue:focus{background-color:transparent !important;border-color:#1D1E2F}.modal-backdrop{background-color:black;opacity:0.4 !important}@media (min-width: 768px){.modal .modal-dialog{max-width:500px;margin:100px auto}}.modal .modal-content{border-radius:2px;border:none}@media (min-width: 768px){.modal .modal-content{box-shadow:0 5px 15px rgba(0,0,0,0.2)}}.modal .modal-header{border:none}.modal .modal-footer{border-top:none;text-align:center}.modal .modal-footer .container-buttons{width:80%;margin:0 auto;margin-bottom:25px}.modal .modal-title{width:80%;margin-left:auto;margin-right:auto;margin-top:50px}.modal .modal-body p{width:80%;margin-left:auto;margin-right:auto}.cg-dropdown-container{display:inline-block}.dropdown.cg-line-dropdown.open>.dropdown-toggle.btn-default{background-color:transparent}.dropdown.cg-line-dropdown.darkgray{background-color:transparent !important}.dropdown.cg-line-dropdown.darkgray .btn-default{border-radius:4px;border-color:#1E1F2E}.dropdown.cg-line-dropdown.darkgray .btn-default:hover,.dropdown.cg-line-dropdown.darkgray .btn-default:focus{background-color:transparent}.dropdown.cg-line-dropdown.darkgray .btn-default:active{box-shadow:none;background-color:transparent;opacity:0.2;transition:opacity 500ms}.dropdown.cg-line-dropdown .dropdown-menu{border:1px solid rgba(0,0,0,0.05)}.dropdown.cg-line-dropdown .dropdown-menu li{border-bottom:1px solid rgba(0,0,0,0.05)}.dropdown.cg-line-dropdown .dropdown-menu li:last-child{border-bottom:none}.dropdown.cg-line-dropdown .dropdown-menu li a{line-height:2.5em}.dropdown.cg-line-dropdown .dropdown-menu li a:hover{background-color:rgba(50,50,50,0.05);color:#1E1F2E}.alert,.alert.alert-dismissible{display:inline-block;margin:0 auto;border-radius:2px;padding:0px 25px;line-height:2em;border-color:transparent;font-size:12px}.alert.alert-dismissible.show{display:inline-block !important}.alert.alert-dismissible .close{opacity:.9;right:-23px;width:20px;top:1.6px;border-radius:100px;height:20px;line-height:0em;text-shadow:none}.alert.alert-dismissible .close:active{opacity:0.2;transition:opacity 0.3s}.alert.alert-danger,.alert.alert-dismissible.alert-danger{color:#e4502a;background-color:rgba(228,80,42,0.1)}.alert-dismissible.alert-danger .close{color:#e4502a;background-color:rgba(228,80,42,0.3)}.title-and-paragraphs b,.title-and-paragraphs strong,.title-and-paragraphs-lists b,.title-and-paragraphs-lists strong{font-weight:600}.title-and-paragraphs.limit-paragraphs-width p,.title-and-paragraphs-lists.limit-paragraphs-width p{max-width:750px;margin:0 auto}body{margin-top:0 !important}@media only screen and (max-width: 1100px){body{margin-top:0}}body.menu-height-margin{margin-top:75px !important}@media only screen and (max-width: 1100px){body.menu-height-margin{margin-top:55px !important}}body.menu-height-margin-with-banner{margin-top:125px !important}@media only screen and (max-width: 1100px){body.menu-height-margin-with-banner{margin-top:55px !important}}.exposed-bar{z-index:0;position:fixed;top:0}@media only screen and (max-width: 767){html.smartbanner-show{margin-top:135px !important}}html.smartbanner-show .exposed-bar{top:80px}.navbar-fixed-under-app-banner{top:80px !important}.breadcrumbs{background:rgba(0,0,0,0.1) !important;padding:0 10px;padding-bottom:4px;border-radius:50px;position:absolute;top:10px;left:10px;z-index:20}.breadcrumbs>.breadcrumb{display:inline-block;margin:0;padding:0 5px;text-align:center;color:#0f0f0f;font-size:11px;font-weight:normal;line-height:1em;background-color:transparent;color:white}.breadcrumbs>a.breadcrumb:hover{text-decoration:none}.breadcrumbs>.breadcrumb.separator{display:inline-block;margin:0;padding:0;text-align:center}.tpd-size-medium .tpd-content,.tpd-size-medium .tpd-title{width:420px !important}body.es .tpd-size-medium .tpd-content,body.es .tpd-size-medium .tpd-title{width:420px !important}body.cs .tpd-size-medium .tpd-content,body.cs .tpd-size-medium .tpd-title{width:420px !important}body.fi .tpd-size-medium .tpd-content,body.fi .tpd-size-medium .tpd-title{width:420px !important}body.fr .tpd-size-medium .tpd-content,body.fr .tpd-size-medium .tpd-title{width:420px !important}body.id .tpd-size-medium .tpd-content,body.id .tpd-size-medium .tpd-title{width:420px !important}body.it .tpd-size-medium .tpd-content,body.nl .tpd-size-medium .tpd-content,body.it .tpd-size-medium .tpd-title,body.nl .tpd-size-medium .tpd-title{width:420px !important}body.pl .tpd-size-medium .tpd-content,body.pl .tpd-size-medium .tpd-title{width:420px !important}body.pt .tpd-size-medium .tpd-content,body.pt .tpd-size-medium .tpd-title{width:420px !important}body.ru .tpd-size-medium .tpd-content,body.ru .tpd-size-medium .tpd-title{width:420px !important}@media only screen and (max-width: 767px){.tpd-size-medium .tpd-content,.tpd-size-medium .tpd-title{width:359px !important}}.dip-wrapper-green{padding:5px 8px;background-color:#4BA920;color:white;width:fit-content;font-size:10px;font-weight:700;border-radius:20px;margin-left:3px}.icon-boxes-container{width:100%;table-layout:fixed;border-spacing:30px 0}.icon-box{position:relative;max-width:350px;padding:50px 35px;vertical-align:top;box-shadow:5px 8px 13px 0 rgba(0,0,0,0.33)}.icon-box .icon-placeholder{display:inline-block;width:65px;height:65px;background-color:rgba(0,200,0,0.5)}@media only screen and (max-width: 767px){.icon-box{display:block;max-width:350px;margin:0 auto 60px auto}.icon-box:last-child{margin-bottom:0}}.os-icons .os-icon{display:inline-block;font-size:28px;margin:5px;width:60px;opacity:0.8;outline:0;transition:opacity .3s, transform .3s}.os-icons .os-icon:hover{opacity:1;transform:scale(1.3)}.os-icons .os-icon:active{opacity:.2}@media only screen and (max-width: 767px){.os-icons .os-icon{width:auto}}.os-icons .os-icon .os-icon-mac{height:24px;padding-left:5px;padding-right:5px;margin-top:-5px}.side-feature{position:relative}.side-feature h3{position:relative;margin-top:0;margin-bottom:0}.side-feature h3:before{position:absolute;content:"";width:80px;height:4px;background-color:#fc0;bottom:-10px}@media only screen and (max-width: 767px){.side-feature h3:before{left:50%;transform:translate(-40px)}}.side-feature ul{padding-left:20px}.side-feature ul>li{font-size:16px}.side-feature b,.side-feature strong{font-weight:600}.side-feature.display-table{width:100%}.side-feature.display-table .table-cell{vertical-align:middle}.side-feature .left-side{width:25%}.side-feature .right-side{padding-left:8.33333333%}.side-feature.reversed .left-side{width:75%;padding-right:8.33333333%}.side-feature.reversed .right-side{padding-left:0}.side-feature .left-side,.side-feature .right-side{overflow:hidden}.side-feature .sprite{overflow:hidden}@media only screen and (max-width: 767px){.side-feature .left-side,.side-feature .right-side{display:block;width:100% !important;height:auto;padding:0 !important}.side-feature.reversed .table-row{display:flex;flex-direction:column}.side-feature.reversed .left-side{order:2}.side-feature.reversed .right-side{order:1}}.side-feature .feat-img{display:inline-block;max-height:230px}@media only screen and (max-width: 1200px){.side-feature .feat-img{height:auto}}@media only screen and (max-width: 767px){.side-feature .feat-img{max-width:85%}}@media only screen and (max-width: 767px){.side-feature .left-side,.side-feature .right-side{display:block;width:100%;height:auto}.side-feature.side-feature-right .table-row{display:flex;flex-direction:column}.side-feature.side-feature-right .left-side{order:2}.side-feature.side-feature-right .right-side{order:1}}@media only screen and (max-width: 767px){.side-feature .sprite{transform-origin:center center;transform:scale(0.75)}}.full-cta-section{background-position:center center;background-size:cover}.two-columns-text .left-column{padding-left:20%;padding-right:5%}@media only screen and (max-width: 767px){.two-columns-text .left-column{padding-left:5%;padding-right:5%}}.two-columns-text .right-column{padding-left:5%;padding-right:20%}@media only screen and (max-width: 767px){.two-columns-text .right-column{padding-left:5%;padding-right:5%}}.two-columns-text-image .display-table{width:100%}.two-columns-text-image .display-table .table-cell{vertical-align:middle}.two-columns-text-image .left-side{width:50%}.two-columns-text-image img{max-width:250px}@media only screen and (max-width: 767px){.two-columns-text-image .left-side,.two-columns-text-image .right-side{display:block;width:100%;height:auto}.two-columns-text-image.reversed .table-row{display:flex;flex-direction:column}.two-columns-text-image.reversed .left-side{order:2}.two-columns-text-image.reversed .right-side{order:1}}.two-columns-icons .feature{padding-left:20%;padding-right:20%}@media only screen and (max-width: 767px){.two-columns-icons .feature{padding-left:2%;padding-right:2%}.two-columns-icons .feature .sprite{transform-origin:center center;transform:scale(0.65)}}.three-columns-icons .feature{max-width:400px;margin:0 auto}.three-columns-icons .feature .icon-size{width:auto;height:160px}@media only screen and (max-width: 767px){.three-columns-icons .feature{padding-left:2%;padding-right:2%}.three-columns-icons .feature .sprite{transform-origin:center center;transform:scale(0.65)}}#TrulyCompleteVPN span i{font-family:"Font Awesome\ 5 Free";font-style:normal}.complete-vpn{list-style:none;padding:0;list-style-image:url("/img/common/controls/check-solid-green.svg")}.complete-vpn li{padding:10px 0;position:relative;font-size:12px}.complete-vpn li i{font-size:22px;line-height:24px;color:#4BA920}.complete-vpn .check-icon-awesome{position:absolute;left:-30px;top:7px;width:20px;height:20px;border-radius:4px}#TrulyCompleteVPN{padding:40px 0 60px;background-color:#f8f9fa;position:relative}#TrulyCompleteVPN .scroll-btn-up{height:22px;width:22px;position:absolute;display:block;left:50%;top:10px;color:#323232;margin-left:-11px;-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation:scroll-btn-animation-bottom 2s infinite;-moz-animation:scroll-btn-animation-bottom 2s infinite;-o-animation:scroll-btn-animation-bottom 2s infinite;animation:scroll-btn-animation-bottom 2s infinite}@keyframes scroll-btn-animation-bottom{0%{top:5px}30%{top:10px}60%{top:5px}90%{top:10px}100%{top:5px}}@media only screen and (max-width: 767px){.complete-vpn{padding:0 0 0 30px}.complete-vpn img{position:relative;left:0;top:-2px}}.sprite-menu-flags{background:url("/img/common/sprites/menu-flags/globe.png") no-repeat top left;width:18px;height:18px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.sprite-menu-flags{background-image:url("/img/common/sprites/menu-flags/globe-2x.png");background-size:18px 38px}}.sprite-menu-flags.sprite-globe-white{background-position:0 0}.sprite-menu-flags.sprite-globe-dark{background-position:0 -19px}.main-menu{z-index:999999}.main-menu .menu-btn,.main-menu .menu-line-btn{transition:background-color 0.3s, opacity 0.3s !important}.main-menu .menu-btn:active,.main-menu .menu-line-btn:active{opacity:0.2}.main-menu .menu-line-btn.white{transition:0.3s !important}.main-menu .menu-line-btn.white:hover,.main-menu .menu-line-btn.white:active,.main-menu .menu-line-btn.white:focus{color:#fc0 !important;border-color:#fc0}.main-menu .menu-line-btn.primary:hover,.main-menu .menu-line-btn.primary:active,.main-menu .menu-line-btn.primary:focus{background-color:#ffc200 !important;color:#1d1e2f !important}.main-menu.navbar-darkblue .navbar-nav>li>a.menu-btn.primary:hover,.main-menu.navbar-darkblue .navbar-nav>li>a.menu-btn.primary:active,.main-menu.navbar-darkblue .navbar-nav>li>a.menu-btn.primary:focus,.main-menu .menu-btn.primary:hover,.main-menu .menu-btn.primary:active,.main-menu .menu-btn.primary:focus{background-color:#ffc200 !important}.main-menu.navbar{border-radius:0}.main-menu.navbar-default{background-color:white;border:none;box-shadow:0 1px 5px 0 rgba(0,0,0,0.2);margin-bottom:0;min-width:320px}.main-menu.navbar-default .navbar-nav>li>a{color:#1E1F2E}@media only screen and (max-width: 1300px){.main-menu .container{width:100%}}.main-menu .navbar-brand{height:auto;padding-top:18px}.main-menu .navbar-brand .cg-logo{width:auto;height:35px}@media only screen and (max-width: 1100px){.main-menu .navbar-brand{padding:10px 15px}.main-menu .navbar-brand .cg-logo{height:35px;width:auto}}.main-menu ul.navbar-nav{padding:9px 0}@media only screen and (max-width: 1100px){.main-menu ul.navbar-nav{padding:0}}.main-menu .navbar-sticky{padding:9px 0}@media only screen and (max-width: 1100px){.main-menu .navbar-sticky{padding:0}}@media only screen and (max-width: 1100px){.main-menu .new-login .menu-item{padding:0 !important;margin-right:10px}.main-menu .new-login .menu-item .white-login{border:1px solid white !important;border-radius:4px}.main-menu .new-login .menu-item .white-login:hover{transition:none !important;color:white !important}.main-menu .new-login .menu-item .white-login:active{transition:none !important;color:white !important}}.main-menu .menu-item{padding:5px 5px}@media only screen and (max-width: 1100px){.main-menu .menu-item{padding:5px 0}}.main-menu .menu-item.menu-country{padding-top:15px}@media only screen and (max-width: 1100px){.main-menu .menu-item:last-child a{border-bottom:none}}.main-menu .menu-item-pro{padding:5px 0}@media only screen and (max-width: 1100px){.main-menu .menu-item-pro{padding:8px 0}.main-menu .menu-item-pro .menu-line-btn.primary{padding:5px;font-size:12px;border:1px solid #fc0 !important}.main-menu .menu-item-pro .menu-line-btn.white{padding:5px;font-size:12px;border:1px solid white !important}.main-menu .menu-item-pro .menu-line-btn.white:hover{background-color:white !important;color:#1d1e2f !important}}.main-menu .menu-link{padding:10px 0;margin:0 10px;color:#6f6f6f;margin-top:3px;position:relative}.main-menu .menu-link .fa-angle-down{transition:0.5s cubic-bezier(0.07, 0.47, 0.58, 1);position:relative;top:0}.main-menu .menu-link:focus{background-color:white !important;color:#1E1F2E}.main-menu .menu-link:hover{transition:color 1s !important;background-color:white !important;color:#1E1F2E}.main-menu .menu-link:hover .fa-angle-down{color:#fc0;top:3px}.main-menu .menu-link.active{transition:color 1s !important;background-color:white !important;color:#1E1F2E}.main-menu .menu-link.menu-country-sel{padding-left:0;display:inline}@media only screen and (max-width: 1100px){.main-menu .menu-link:hover{border-bottom:1px solid rgba(0,0,0,0.05)}.main-menu .menu-link:hover::after{display:none}.main-menu .menu-link:hover .fa-angle-down{color:#6f6f6f}}.main-menu .open .menu-link{background-color:white !important;color:#1E1F2E}.main-menu .open .menu-link:hover,.main-menu .open .menu-link:focus{background-color:white !important;color:#1E1F2E}.main-menu .open .menu-link:hover::after,.main-menu .open .menu-link:focus::after{transform:scale3d(1, 1, 1);transition:transform 0.5s}.main-menu .open .menu-link .fa-angle-down,.main-menu .open .menu-link:focus .fa-angle-down,.main-menu .open .menu-link:hover .fa-angle-down{color:#fc0;top:3px}.main-menu .open .menu-link::after{transform:scale3d(1, 1, 1);transition:transform 0.5s}@media only screen and (max-width: 1100px){.main-menu .open .menu-link{border-color:white}.main-menu .open .menu-link:hover,.main-menu .open .menu-link:focus{border-color:white}}.main-menu .menu-btn{padding:10px 20px;margin-top:3px;margin-bottom:3px;border-radius:4px;transition:box-shadow 300ms}.main-menu .menu-btn:hover{-webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35);-moz-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35);box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35);text-decoration:none}@media only screen and (max-width: 1100px){.main-menu .menu-btn{border:none;margin:0}}.main-menu .menu-line-btn{padding:9px 20px;margin:3px 0 3px 10px;border-radius:4px;background-color:transparent !important;transition:box-shadow 300ms}.main-menu .menu-line-btn:hover{-webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35);-moz-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35);box-shadow:0px 0px 8px 0px rgba(0,0,0,0.35);text-decoration:none}.main-menu .menu-line-btn.yellow{border:1px solid #fc0}.main-menu .menu-line-btn.primary{border:1px solid #fc0}.main-menu .menu-line-btn.white{border:1px solid #fff}@media only screen and (max-width: 1100px){.main-menu .menu-line-btn{border:none !important;margin:3px 0}}.main-menu .navbar-nav .dropdown-menu,.main-menu .navbar-sticky .dropdown-menu{margin-top:0}.main-menu .dropdown-menu{border:none;border-radius:2px;border:1px solid rgba(0,0,0,0.01)}.main-menu .dropdown-menu.dropdown-menu-left{margin-left:10px}.main-menu .dropdown-menu.dropdown-menu-right{margin-right:10px}.main-menu .dropdown-menu li a{padding-top:0.7em;padding-bottom:0.7em;border-bottom:1px solid rgba(0,0,0,0.05)}.main-menu .dropdown-menu li:last-child a{border-bottom:none}.main-menu .navbar-collapse{padding-right:0 !important;padding-left:0 !important}.main-menu .navbar-right{padding-right:5px !important}@media only screen and (max-width: 1100px){.main-menu .navbar-header{float:none}.main-menu .navbar-left,.main-menu .navbar-right{float:none !important}.main-menu .navbar-toggle{display:block;margin-top:10px !important}.main-menu .navbar-collapse{border-top:none}.main-menu .navbar-collapse.collapse{display:none !important}.main-menu .navbar-fixed-top{top:0}.main-menu .navbar-nav{float:none !important}.main-menu .navbar-nav:not(.navbar-nav-pro){margin-top:7.5px}.main-menu .navbar-nav.navbar-nav-pro{margin:0}.main-menu .navbar-nav>li{float:none}.main-menu .navbar-nav>li>a{padding-top:10px;padding-bottom:10px}.main-menu .collapse{overflow-y:scroll !important}.main-menu .collapse.in{display:block !important}}.main-menu.navbar-default .burger-menu-icon:focus,.main-menu.navbar-default .burger-menu-icon:hover{background-color:transparent}.main-menu.navbar-default .navbar-collapse{border:none;max-height:400px}@media only screen and (max-width: 1100px){.main-menu.navbar-default .navbar-collapse{display:block;margin-top:55px}.main-menu.navbar-default .navbar-collapse .menu-item{padding:0}.main-menu.navbar-default .navbar-collapse .menu-item .menu-link{padding:5px 10px}}@media only screen and (max-width: 1100px){.main-menu .collapse .menu-item .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}.main-menu .dropdown.open:not(.menu-country) .dropdown-menu{padding-top:5px;padding-bottom:5px}.main-menu .navbar-nav>li a{border-bottom:1px solid rgba(0,0,0,0.05)}.main-menu.navbar-default .navbar-nav .open .dropdown-menu>li>a{padding-left:40px !important}.main-menu.navbar-default .navbar-nav .open .dropdown-menu>li:last-child>a{border-bottom:none}}.burger-menu-icon{width:22px;height:22px;position:relative;background-image:none;border:none;box-shadow:none;top:10px;cursor:pointer;margin-left:10px}.burger-menu-icon .icon-bar{display:block;position:absolute;height:2px;width:22px;left:0;padding:0;margin:0;border-radius:9px;opacity:1;background-color:#1E1F2E !important;transform:rotate(0deg);transition:0.25s ease-in-out}.burger-menu-icon .icon-bar:nth-child(2){top:0px}.burger-menu-icon .icon-bar:nth-child(3),.burger-menu-icon .icon-bar:nth-child(4){top:2px}.burger-menu-icon .icon-bar:nth-child(5){top:8px}.burger-menu-icon.open .icon-bar:nth-child(2){top:18px;width:0%;left:50%}.burger-menu-icon.open .icon-bar:nth-child(3){transform:rotate(45deg)}.burger-menu-icon.open .icon-bar:nth-child(4){transform:rotate(-45deg)}.burger-menu-icon.open .icon-bar:nth-child(5){top:18px;width:0%;left:50%}.menu-flag{display:inline-block;vertical-align:middle}.menu-cta-default{padding-left:45px !important;font-weight:bold}.menu-cta-default:before{content:"";position:absolute;background-image:url("/img/pages/homepage/jumbotron/default/cg-arrow-btn.png");background-size:24px auto;width:24px;height:17px;top:11px;left:10px;transition:0.3s all ease-in}.menu-cta-default:hover:before{left:13px}.en._3Years99 .menu-cta-default,.en._3yEuDo .menu-cta-default,.en._3y99v1 .menu-cta-default,.en._3y99v2 .menu-cta-default,.de._FlashSale .menu-cta-default,.de._3Y89 .menu-cta-default,.de._3Years99 .menu-cta-default,.de._3yEuDo .menu-cta-default,.de._3y99v1 .menu-cta-default,.de._3y99v2 .menu-cta-default,.es._FlashSale .menu-cta-default,.es._3Y89 .menu-cta-default,.es._FlashSale2 .menu-cta-default,.es._FlashSale3 .menu-cta-default,.es._18M63 .menu-cta-default,.es._1y29 .menu-cta-default,.es._FSV2 .menu-cta-default,.es._3Years99 .menu-cta-default,.es._3yEuDo .menu-cta-default,.es._3y99v1 .menu-cta-default,.es._3y99v2 .menu-cta-default,.ru._FlashSale .menu-cta-default,.ru._3Y89 .menu-cta-default,.ru._FlashSale2 .menu-cta-default,.ru._FlashSale3 .menu-cta-default,.ru._18M63 .menu-cta-default,.ru._1y29 .menu-cta-default,.ru._FSV2 .menu-cta-default,.ru._3Years99 .menu-cta-default,.ru._3yEuDo .menu-cta-default,.ru._3y99v1 .menu-cta-default,.ru._3y99v2 .menu-cta-default,.pt._FlashSale .menu-cta-default,.pt._3Y89 .menu-cta-default,.pt._FlashSale2 .menu-cta-default,.pt._FlashSale3 .menu-cta-default,.pt._18M63 .menu-cta-default,.pt._1y29 .menu-cta-default,.pt._FSV2 .menu-cta-default,.pt._3Years99 .menu-cta-default,.pt._3yEuDo .menu-cta-default,.pt._3y99v1 .menu-cta-default,.pt._3y99v2 .menu-cta-default,.fr._FlashSale .menu-cta-default,.fr._FlashSale2 .menu-cta-default,.fr._FlashSale3 .menu-cta-default,.fr._18M63 .menu-cta-default,.fr._1y29 .menu-cta-default,.fr._FSV2 .menu-cta-default,.fr._3Years99 .menu-cta-default,.fr._3yEuDo .menu-cta-default,.fr._3y99v1 .menu-cta-default,.fr._3y99v2 .menu-cta-default,.nl._3Years99 .menu-cta-default,.nl._3yEuDo .menu-cta-default,.nl._3y99v1 .menu-cta-default,.nl._3y99v2 .menu-cta-default{padding-left:10px !important}.en._3Years99 .menu-cta-default:before,.en._3yEuDo .menu-cta-default:before,.en._3y99v1 .menu-cta-default:before,.en._3y99v2 .menu-cta-default:before,.de._FlashSale .menu-cta-default:before,.de._3Y89 .menu-cta-default:before,.de._3Years99 .menu-cta-default:before,.de._3yEuDo .menu-cta-default:before,.de._3y99v1 .menu-cta-default:before,.de._3y99v2 .menu-cta-default:before,.es._3Y89 .menu-cta-default:before,.es._FlashSale .menu-cta-default:before,.es._FlashSale2 .menu-cta-default:before,.es._FlashSale3 .menu-cta-default:before,.es._18M63 .menu-cta-default:before,.es._1y29 .menu-cta-default:before,.es._FSV2 .menu-cta-default:before,.es._3Years99 .menu-cta-default:before,.es._3yEuDo .menu-cta-default:before,.es._3y99v1 .menu-cta-default:before,.es._3y99v2 .menu-cta-default:before,.ru._FlashSale .menu-cta-default:before,.ru._3Y89 .menu-cta-default:before,.ru._FlashSale2 .menu-cta-default:before,.ru._FlashSale3 .menu-cta-default:before,.ru._18M63 .menu-cta-default:before,.ru._1y29 .menu-cta-default:before,.ru._FSV2 .menu-cta-default:before,.ru._3Years99 .menu-cta-default:before,.ru._3yEuDo .menu-cta-default:before,.ru._3y99v1 .menu-cta-default:before,.ru._3y99v2 .menu-cta-default:before,.pt._FlashSale .menu-cta-default:before,.pt._3Y89 .menu-cta-default:before,.pt._FlashSale2 .menu-cta-default:before,.pt._FlashSale3 .menu-cta-default:before,.pt._18M63 .menu-cta-default:before,.pt._1y29 .menu-cta-default:before,.pt._FSV2 .menu-cta-default:before,.pt._3Years99 .menu-cta-default:before,.pt._3yEuDo .menu-cta-default:before,.pt._3y99v1 .menu-cta-default:before,.pt._3y99v2 .menu-cta-default:before,.fr._FlashSale .menu-cta-default:before,.fr._FlashSale2 .menu-cta-default:before,.fr._FlashSale3 .menu-cta-default:before,.fr._18M63 .menu-cta-default:before,.fr._1y29 .menu-cta-default:before,.fr._FSV2 .menu-cta-default:before,.fr._3Years99 .menu-cta-default:before,.fr._3yEuDo .menu-cta-default:before,.fr._3y99v1 .menu-cta-default:before,.fr._3y99v2 .menu-cta-default:before,.nl._3Years99 .menu-cta-default:before,.nl._3yEuDo .menu-cta-default:before,.nl._3y99v1 .menu-cta-default:before,.nl._3y99v2 .menu-cta-default:before{display:none}@media only screen and (max-width: 1100px){.menu-cta-default{text-align:center}.menu-cta-default:before{display:none}}.main-menu .large-desktop{display:inline}.main-menu .small-desktop{display:none}@media only screen and (max-width: 1430px){.main-menu.es .large-desktop{display:none}.main-menu.es .small-desktop{display:inline}}@media only screen and (max-width: 1265px){.main-menu .large-desktop{display:none}.main-menu .small-desktop{display:inline}}@media only screen and (max-width: 1300px){.main-menu.en .collapse .menu-link,.main-menu.de .collapse .menu-link,.main-menu.ro .collapse .menu-link,.main-menu.nl .collapse .menu-link,.main-menu.ja .collapse .menu-link{margin:0 5px;font-size:12px}.main-menu.en .collapse .menu-btn,.main-menu.en .collapse .menu-line-btn,.main-menu.de .collapse .menu-btn,.main-menu.de .collapse .menu-line-btn,.main-menu.ro .collapse .menu-btn,.main-menu.ro .collapse .menu-line-btn,.main-menu.nl .collapse .menu-btn,.main-menu.nl .collapse .menu-line-btn,.main-menu.ja .collapse .menu-btn,.main-menu.ja .collapse .menu-line-btn{font-size:12px;padding:9px 10px}.main-menu.en .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left,.main-menu.de .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left,.main-menu.ro .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left,.main-menu.nl .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left,.main-menu.ja .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left{top:58px !important}.main-menu.en .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner,.main-menu.de .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner,.main-menu.ro .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner,.main-menu.nl .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner,.main-menu.ja .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner{top:120px !important}}@media only screen and (max-width: 1340px){.main-menu.fr .collapse .menu-link,.main-menu.es .collapse .menu-link{margin:0 5px;font-size:13px}.main-menu.fr .collapse .menu-btn,.main-menu.fr .collapse .menu-line-btn,.main-menu.es .collapse .menu-btn,.main-menu.es .collapse .menu-line-btn{font-size:13px;padding:9px 10px}.main-menu.fr .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left,.main-menu.es .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left{top:58px !important}.main-menu.fr .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner,.main-menu.es .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner{top:120px !important}}@media only screen and (max-width: 1260px){.main-menu.fr .collapse .menu-link,.main-menu.es .collapse .menu-link{margin:0 3px;letter-spacing:-0.8px}.main-menu.fr .collapse .menu-btn,.main-menu.fr .collapse .menu-line-btn,.main-menu.es .collapse .menu-btn,.main-menu.es .collapse .menu-line-btn{letter-spacing:-0.8px;padding:7px 6px}}@media only screen and (max-width: 1391px){.main-menu.pt .collapse .menu-link{margin:0 5px;font-size:13px}.main-menu.pt .collapse .menu-btn,.main-menu.pt .collapse .menu-line-btn{font-size:13px;padding:9px 10px}.main-menu.pt .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left{top:58px !important}.main-menu.pt .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner{top:120px !important}}@media only screen and (max-width: 1230px){.main-menu.pt .collapse .menu-link{margin:0 3px;letter-spacing:-0.8px}.main-menu.pt .collapse .menu-btn,.main-menu.pt .collapse .menu-line-btn{letter-spacing:-0.8px;padding:7px 6px}}@media only screen and (max-width: 1340px){.main-menu.ru .collapse .menu-link{margin:0 5px;font-size:13px}.main-menu.ru .collapse .menu-btn,.main-menu.ru .collapse .menu-line-btn{font-size:13px;padding:9px 10px}.main-menu.ru .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left{top:58px !important}.main-menu.ru .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner{top:120px !important}}@media only screen and (max-width: 1165px){.main-menu.ru .collapse .menu-link{margin:0 3px;letter-spacing:-0.8px}.main-menu.ru .collapse .menu-btn,.main-menu.ru .collapse .menu-line-btn{letter-spacing:-0.8px;padding:7px 6px}}@media only screen and (max-width: 1340px){.main-menu.it .collapse .menu-link,.main-menu.pl .collapse .menu-link{margin:0 5px;font-size:13px}.main-menu.it .collapse .menu-btn,.main-menu.it .collapse .menu-line-btn,.main-menu.pl .collapse .menu-btn,.main-menu.pl .collapse .menu-line-btn{font-size:13px;padding:9px 10px}.main-menu.it .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left,.main-menu.pl .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left{top:58px !important}.main-menu.it .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner,.main-menu.pl .collapse .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner{top:120px !important}}@media only screen and (max-width: 1165px){.main-menu.it .collapse .menu-link,.main-menu.pl .collapse .menu-link{margin:0 3px;letter-spacing:-0.8px}.main-menu.it .collapse .menu-btn,.main-menu.it .collapse .menu-line-btn,.main-menu.pl .collapse .menu-btn,.main-menu.pl .collapse .menu-line-btn{letter-spacing:-0.8px;padding:7px 6px}}@media only screen and (max-width: 1100px){.main-menu .menu-link{margin:0 0px !important;font-size:14px !important}.main-menu .menu-btn,.main-menu .menu-line-btn{font-size:14px !important;padding:9px 10px !important}}.main-menu .navbar-nav>li>a.menu-btn.primary{font-weight:700}@media only screen and (max-width: 1100px){.main-menu .navbar-nav>li>a.menu-btn.primary{text-align:center}}.navbar-darkblue.main-menu .menu-link.active{background-color:transparent !important}.navbar-darkblue{background-color:#1d1e2f !important;border-bottom:1px solid rgba(255,255,255,0.05) !important}.main-menu.navbar-darkblue .navbar-nav>li>a{color:white !important}.navbar-darkblue .open .menu-link,.main-menu.navbar-darkblue .open .menu-link:hover{background-color:#1d1e2f !important}.navbar-darkblue.navbar-blackfriday .open .menu-link,.main-menu.navbar-darkblue.navbar-blackfriday .open .menu-link:hover{background-color:#000000 !important}.main-menu.navbar-darkblue .open .menu-link{border-bottom-color:#fc0 !important}.main-menu.navbar-darkblue .dropdown-menu.dropdown-menu-left,.main-menu.navbar-darkblue .dropdown-menu.dropdown-menu-right{background-color:#1d1e2f}.main-menu.navbar-darkblue .dropdown-menu>li>a:hover{background-color:#36385a !important;color:white !important}.main-menu.navbar-darkblue .menu-link{color:white}.main-menu.navbar-darkblue .menu-link:hover,.main-menu.navbar-darkblue .menu-link:focus,.main-menu.navbar-darkblue .menu-link:active{background-color:#1d1e2f !important;color:#fc0 !important}.main-menu.navbar-darkblue .menu-item.dropdown.open .menu-link{color:#ffcc00 !important}@media screen and (max-width: 768px){.main-menu.navbar-darkblue .menu-link:hover{background-color:#36385a !important;color:white !important}}.navbar-darkblue li a{background-color:#1d1e2f !important;color:white}.navbar-darkblue.navbar-default .navbar-nav .dropdown-menu li a:hover{background-color:#36385a !important}li a.arrow-jump.cg-menu-buy-cta.menu-btn.cg-btn.cg-menu-cta{background-color:#fc0;font-weight:700;color:#1e1f2e}.navbar-darkblue.navbar-default .navbar-language li>a{background-color:#1d1e2f;color:white}.navbar-darkblue.navbar-default .navbar-language li>a:hover{background-color:#36385a}.navbar-darkblue .burger-menu-icon{background:transparent}.navbar-darkblue .navbar-toggle .icon-bar{background-color:white !important}@media (max-width: 1140px){.navbar-darkblue .nav>li>a{border-bottom-color:rgba(255,255,255,0.1)}}.navbar-darkblue .navbar-collapse{background-color:#1d1e2f}.navbar-darkblue.navbar-blackfriday .navbar-collapse{background-color:#000000}.navbar-default.navbar-darkblue .navbar-nav>.open>a,.navbar-default.navbar-darkblue .navbar-nav>.open>a:focus{background-color:#1d1e2f;color:white}.navbar-default.navbar-darkblue.navbar-blackfriday .navbar-nav>.open>a,.navbar-default.navbar-darkblue.navbar-blackfriday .navbar-nav>.open>a:focus{background-color:#000000;color:white}.navbar-default.navbar-darkblue .navbar-collapse,.navbar-default .navbar-form{border-bottom-color:#1d1e2f;border-top-color:#1d1e2f}.navbar-default.navbar-darkblue{border-color:rgba(255,255,255,0.1)}@media screen and (max-width: 768px){.navbar-darkblue .navbar-nav>li a{color:white !important}.navbar-darkblue .navbar-nav>li a.cg-menu-cta,.navbar-darkblue .navbar-nav>li a.cg-menu-cta:hover{color:#1e1f2e !important}.navbar-darkblue .navbar-nav>li a:hover,.navbar-darkblue .navbar-nav>li a:active{background-color:transparent !important;color:white !important}}.navbar-darkblue .dropdown-menu li a{border-bottom:1px solid rgba(255,255,255,0.05)}.main-menu.navbar-darkblue .navbar-nav>li>a.menu-btn.primary{background-color:#fc0 !important;color:#1e1f2e !important}.main-menu.navbar-darkblue .dropdown-toggle.menu-link.menu-country-sel{background-color:transparent !important;display:inline-flex}.main-menu.navbar-darkblue .dropdown-toggle.menu-link.menu-country-sel img{margin-top:2px}@media only screen and (max-width: 1100px){.main-menu .menu-item.menu-country{height:auto}}.main-menu .menu-item-columns .display-table{min-width:250px}.main-menu .menu-item-columns .dropdown-menu{padding:24px 32px}.main-menu .menu-item-columns .table-cell{vertical-align:top}.main-menu.navbar-darkblue .menu-item-apps{position:static}.main-menu.navbar-darkblue .menu-item-apps .dropdown-menu.dropdown-menu-left{border:none;box-sizing:border-box;width:100%;margin-left:0;left:0;top:62px;background-color:#1d1e2f}.main-menu.navbar-darkblue .menu-item-apps .dropdown-menu.dropdown-menu-left.has-banner{top:120px}.main-menu .menu-item-apps .dropdown-menu-apps-container{border-top:1px solid #242538}.main-menu .menu-item-apps .dropdown-menu-apps-container.dropdown-menu-apps-container-footer{border-top:none}.main-menu .menu-item-apps .dropdown-menu-apps-container .container-custom{margin-left:90px;margin-right:90px}@media screen and (max-width: 1685px){.main-menu .menu-item-apps .dropdown-menu-apps-container .container-custom{margin-left:50px;margin-right:50px}}.main-menu .menu-item-apps .display-table.apps-categories{margin:0 auto;width:100%}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category{display:inline-block;box-sizing:border-box;vertical-align:top;width:20%;max-width:250px;padding:24px 0;padding-right:32px;padding-left:56px}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category.app-category-what-is-vpn{width:30%;max-width:300px}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category.app-category-footer{padding-top:0;padding-bottom:0}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category.app-category-footer>ul{border-top:none}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category.app-category-footer>ul li{padding-top:0 !important}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category.app-category-footer>ul li>a{padding:0}@media screen and (max-width: 1200px){.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category{padding-left:16px}}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category .apps-categories-title{font-size:16px;line-height:1em;color:#656679;display:table-cell;vertical-align:middle;height:36px;margin-bottom:12px;position:relative}@media screen and (max-width: 1200px){.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category .apps-categories-title{font-size:14px}}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category .apps-categories-title .app-category-icon{width:48px;height:48px;text-align:center;position:absolute;top:2px;left:-56px}@media screen and (max-width: 1200px){.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category .apps-categories-title .app-category-icon{display:none}}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category ul{padding-left:0;border-top:1px solid #656679}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category ul li{color:white;list-style-type:none;margin-bottom:8px;line-height:1.2em}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category ul li:first-child{padding-top:12px !important}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category ul li a{font-size:14px !important;border-bottom:none !important}.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category ul li a,.main-menu .menu-item-apps .display-table.apps-categories .table-cell.app-category ul li a:hover{background-color:transparent !important}.main-menu .menu-item-apps .apps-menu-footer{padding:20px 0;border-top:1px solid #242538}.main-menu .menu-item-apps .apps-menu-footer.apps-menu-footer-what-is-vpn{padding:12px 0}.main-menu .menu-item-apps .apps-menu-footer .apps-menu-footer-container{margin-left:144px;margin-right:248px}@media screen and (max-width: 1680px){.main-menu .menu-item-apps .apps-menu-footer .apps-menu-footer-container{margin-left:106px;margin-right:106px}}@media screen and (max-width: 1200px){.main-menu .menu-item-apps .apps-menu-footer .apps-menu-footer-container{margin-left:65px;margin-right:65px}}@media screen and (max-width: 767px){.collapse.navbar-collapse.navbar-left,.collapse.navbar-collapse.navbar-right{display:none !important}}@keyframes slide-in{0%{transform:translateX(400px)}100%{transform:translateX(0)}}#main-menu-mobile{animation-fill-mode:forwards;animation:slide-in 0.3s ease;display:none;box-shadow:0 3px 6px rgba(0,0,0,0.33)}@media screen and (min-width: 1101px){#main-menu-mobile{display:none !important}}@media screen and (max-width: 1100px){#main-menu-mobile{background-color:#1d1e2f !important;position:absolute;box-sizing:border-box;width:100%;height:calc(100vh - 58px);right:0;top:55px}#main-menu-mobile .navbar-mobile-top{box-sizing:border-box;width:100%;vertical-align:middle;border-bottom:1px solid rgba(255,255,255,0.07)}#main-menu-mobile .navbar-mobile-top button.btn-menu-icon{background-color:transparent;border:none;transition:opacity 0.3s;padding:6px}#main-menu-mobile .navbar-mobile-top button.btn-menu-icon img{height:15px;vertical-align:middle;display:inline-block}#main-menu-mobile .navbar-mobile-top button.btn-menu-icon:active{opacity:0.2}#main-menu-mobile .navbar-mobile-top .navbar-mobile-title{display:inline-block;font-size:16px;font-weight:bold;vertical-align:middle;line-height:1em;color:white;margin-left:10px}#main-menu-mobile .navbar-mobile-top .country-selection-group{overflow:hidden;float:right;margin-top:0}#main-menu-mobile .navbar-mobile-top .country-selection-group .menu-country-sel{text-decoration:none;display:inline-block;padding:4px 8px;border-radius:4px}#main-menu-mobile .navbar-mobile-content{box-sizing:border-box;padding-bottom:280px;height:100%;overflow:scroll;text-align:left}#main-menu-mobile .navbar-mobile-content .new-menu{background-color:#1d1e2f;bottom:100px;position:absolute;width:100%;padding-bottom:20px;padding-top:20px}#main-menu-mobile .navbar-mobile-content .menu-item .menu-chevron{margin-left:auto;transform:rotate(90deg);scale:1.5;padding:5px 15px}#main-menu-mobile .navbar-mobile-content .menu-item .menu-chevron.active{transform:rotate(270deg) !important}#main-menu-mobile .navbar-mobile-content .menu-item .submenu-new-menu{background-color:#242538 !important}#main-menu-mobile .navbar-mobile-content .menu-item .submenu-new-menu .navbar-nav>li a{background-color:#242538 !important}#main-menu-mobile .navbar-mobile-content .navbar-nav{margin:unset !important}#main-menu-mobile .navbar-mobile-content .menu-link{display:inline-block;box-sizing:border-box;padding:10px 0 !important;font-weight:bold;width:100%;font-size:14px !important;line-height:16px !important;border-bottom:none}#main-menu-mobile .navbar-mobile-content .menu-link .separator{border:1px solid #404752;height:24px;margin-left:63px}#main-menu-mobile .navbar-mobile-content .menu-link:hover,#main-menu-mobile .navbar-mobile-content .menu-link:active,#main-menu-mobile .navbar-mobile-content .menu-link:focus{background-color:transparent !important;text-decoration:none !important;transition:none}#main-menu-mobile .navbar-mobile-content .menu-cta-default{border-radius:4px !important;text-align:center}#main-menu-mobile .navbar-mobile-content .menu-line-btn.white{text-align:center;border:1px solid white !important}#main-menu-mobile .navbar-mobile-content .menu-line-btn.white:hover{background-color:white !important;color:#1d1e2f !important}#main-menu-mobile .navbar-mobile-content .menu-line-btn.primary{text-align:center;border:1px solid #fc0 !important}#main-menu-mobile #main-menu-mobile-apps .app-category,#main-menu-mobile #main-menu-mobile-what-is-vpn .app-category,#main-menu-mobile #main-menu-mobile-servers .app-category,#main-menu-mobile #main-menu-mobile-servers .app-category,#main-menu-mobile #main-menu-mobile-security-products .app-category{padding-bottom:10px;overflow:hidden}#main-menu-mobile #main-menu-mobile-apps .apps-categories-title,#main-menu-mobile #main-menu-mobile-what-is-vpn .apps-categories-title,#main-menu-mobile #main-menu-mobile-servers .apps-categories-title,#main-menu-mobile #main-menu-mobile-servers .apps-categories-title,#main-menu-mobile #main-menu-mobile-security-products .apps-categories-title{color:#656679;font-size:10px;border-bottom:1px solid #656679}#main-menu-mobile #main-menu-mobile-apps .apps-categories-title a,#main-menu-mobile #main-menu-mobile-what-is-vpn .apps-categories-title a,#main-menu-mobile #main-menu-mobile-servers .apps-categories-title a,#main-menu-mobile #main-menu-mobile-servers .apps-categories-title a,#main-menu-mobile #main-menu-mobile-security-products .apps-categories-title a{color:white;text-decoration:none}#main-menu-mobile #main-menu-mobile-apps .apps-categories-title a:hover,#main-menu-mobile #main-menu-mobile-what-is-vpn .apps-categories-title a:hover,#main-menu-mobile #main-menu-mobile-servers .apps-categories-title a:hover,#main-menu-mobile #main-menu-mobile-servers .apps-categories-title a:hover,#main-menu-mobile #main-menu-mobile-security-products .apps-categories-title a:hover{color:#fc0}#main-menu-mobile #main-menu-mobile-apps .nav.navbar-nav,#main-menu-mobile #main-menu-mobile-what-is-vpn .nav.navbar-nav,#main-menu-mobile #main-menu-mobile-servers .nav.navbar-nav,#main-menu-mobile #main-menu-mobile-servers .nav.navbar-nav,#main-menu-mobile #main-menu-mobile-security-products .nav.navbar-nav{margin-left:0}#main-menu-mobile #main-menu-mobile-apps .menu-item,#main-menu-mobile #main-menu-mobile-what-is-vpn .menu-item,#main-menu-mobile #main-menu-mobile-servers .menu-item,#main-menu-mobile #main-menu-mobile-servers .menu-item,#main-menu-mobile #main-menu-mobile-security-products .menu-item{border-bottom:1px solid #242538}#main-menu-mobile #main-menu-mobile-apps .menu-item:last-child,#main-menu-mobile #main-menu-mobile-what-is-vpn .menu-item:last-child,#main-menu-mobile #main-menu-mobile-servers .menu-item:last-child,#main-menu-mobile #main-menu-mobile-servers .menu-item:last-child,#main-menu-mobile #main-menu-mobile-security-products .menu-item:last-child{border-bottom:none}#main-menu-mobile #main-menu-mobile-apps .menu-link,#main-menu-mobile #main-menu-mobile-what-is-vpn .menu-link,#main-menu-mobile #main-menu-mobile-servers .menu-link,#main-menu-mobile #main-menu-mobile-servers .menu-link,#main-menu-mobile #main-menu-mobile-security-products .menu-link{margin:0 !important;padding:2px 0 !important}#main-menu-mobile #main-menu-mobile-apps footer a,#main-menu-mobile #main-menu-mobile-what-is-vpn footer a,#main-menu-mobile #main-menu-mobile-servers footer a,#main-menu-mobile #main-menu-mobile-servers footer a,#main-menu-mobile #main-menu-mobile-security-products footer a{color:white}#main-menu-mobile #main-menu-mobile-apps footer a:hover,#main-menu-mobile #main-menu-mobile-what-is-vpn footer a:hover,#main-menu-mobile #main-menu-mobile-servers footer a:hover,#main-menu-mobile #main-menu-mobile-servers footer a:hover,#main-menu-mobile #main-menu-mobile-security-products footer a:hover{color:#fc0}#main-menu-mobile #main-menu-mobile-countries ul>li:last-child a{border-bottom:none}#main-menu-mobile #main-menu-mobile-countries ul>li a .menu-flag{display:inline-block;margin-right:10px}}#main-menu-mobile #main-menu-mobile-main{overflow-x:hidden;display:block}#main-menu-mobile #main-menu-mobile-what-is-vpn{display:none}#main-menu-mobile #main-menu-mobile-servers{display:none}#main-menu-mobile #main-menu-mobile-features{display:none}#main-menu-mobile #main-menu-mobile-apps{display:none}#main-menu-mobile .btn-close{display:inline-block}#main-menu-mobile .btn-back{display:none}#main-menu-mobile .title-text{display:none}.noscroll{overflow:hidden}.new-login{padding:0 !important}.main-menu .category-title{font-size:16px;line-height:1.5em;color:#656679}.main-menu .category-links{padding-right:60px}.main-menu .category-links:last-child{padding-right:0}.main-menu .category-links ul{padding-left:0;margin-top:10px}.main-menu .category-links li{color:white;list-style-type:none;margin-bottom:8px;line-height:1.2em}.main-menu .category-links li a{border-bottom:none}.main-menu .category-links li a:hover{background-color:transparent !important}.main-menu .menu-footer{padding-top:25px;border-top:none !important}.navbar-darkblue.navbar-default .navbar-nav .dropdown-menu .category-links li a{background-color:transparent !important}.navbar-darkblue.navbar-default .navbar-nav .dropdown-menu .category-links li a:hover{background-color:transparent !important}.main-menu .mobile-cta:before{display:none}.main-menu.navbar-blackfriday{background-color:black !important}.main-menu.navbar-blackfriday .navbar-mobile-content{background-color:#0c0c0c !important}.main-menu.navbar-blackfriday .navbar-mobile-content li a{background-color:#0c0c0c !important}.main-menu.navbar-blackfriday svg.svg-menu-handle path{fill:#202020 !important}.main-menu.navbar-blackfriday .navbar-collapse,.main-menu.navbar-blackfriday li a,.main-menu.navbar-blackfriday .menu-link:hover,.main-menu.navbar-blackfriday .menu-link:focus,.main-menu.navbar-blackfriday .menu-link:active{background-color:transparent !important}.main-menu.navbar-blackfriday .dropdown-menu .dropdown-menu-content{background-color:#202020 !important}.main-menu.navbar-blackfriday .dropdown-menu.dropdown-menu-left,.main-menu.navbar-blackfriday .dropdown-menu.dropdown-menu-right{background-color:transparent !important}.main-menu.navbar-blackfriday .dropdown-menu li a,.main-menu.navbar-blackfriday .menu-footer li a{background-color:transparent !important}.main-menu.navbar-blackfriday .navbar-nav .dropdown-menu li a:hover{background-color:#1d1d1d !important}.main-menu.navbar-blackfriday .navbar-nav .dropdown-menu .category-links li a:hover{background-color:transparent !important}.main-menu.navbar-blackfriday #main-menu-mobile{background-color:#0c0c0c !important}.main-menu.navbar-blackfriday .menu-btn.primary.blackfriday19{color:#000000 !important}.main-menu.navbar-blackfriday li a.yellow-text{background-color:#0c0c0c !important}.main-menu.mod-2021 .hover-yellow:hover a{color:#fc0 !important}.main-menu.mod-2021 .inline-block{display:inline-block !important}.main-menu.mod-2021 .mt-12{margin-top:12px !important}.main-menu.mod-2021 .font-bold{font-weight:bold !important}.main-menu.mod-2021 .display-flex{display:flex !important}.main-menu.mod-2021 li.separator{padding:7px 10px}.main-menu.mod-2021 li.separator div{width:1px;height:42px;border-left:1px solid #656679}.main-menu.mod-2021 li.separator-mobile{padding:7px 0}.main-menu.mod-2021 li.separator-mobile div{border-bottom:1px solid #656679;margin-left:20px;margin-right:20px}.main-menu.mod-2021 .dropdown-menu{background-color:transparent !important;box-shadow:none;padding:0;border-radius:8px}.main-menu.mod-2021 .dropdown-menu .dropdown-menu-content{background-color:#1d1e2f;border-radius:8px;margin-top:36px;box-shadow:0 6px 12px rgba(0,0,0,0.18)}.main-menu.mod-2021 .dropdown-menu .dropdown-menu-content .menu-handle{position:absolute;top:23px;left:20px}.main-menu.mod-2021 .dropdown-menu li a{padding-top:0;padding-bottom:0}.main-menu.mod-2021 .dropdown-menu .menu-footer .icon{width:14px;margin-right:10px}.main-menu.mod-2021 .dropdown-menu .menu-footer a:hover{text-decoration:none !important;color:#fc0;font-weight:bold;transition:font-weight 0.2s}.main-menu.mod-2021 .dropdown-menu .category-links{margin-right:56px;padding-right:0}.main-menu.mod-2021 .dropdown-menu .category-links:last-child{margin-right:0}.main-menu.mod-2021 .dropdown-menu .category-links li{line-height:1.8em}.main-menu.mod-2021 .dropdown-menu .category-links li a{line-height:1.3em;display:inline-block;padding-bottom:15px}.main-menu.mod-2021 .dropdown-menu .category-links li a:hover{text-decoration:none;color:#fc0}.main-menu.mod-2021 .dropdown-menu .category-links li a.icon-item{display:inline-flex;align-items:center}.main-menu.mod-2021 .dropdown-menu .category-links li a.icon-item>.icon{margin-right:10px;width:14px}.main-menu.mod-2021 .dropdown-menu .category-links li a.icon-item>.icon.icon-big{width:24px}.main-menu.mod-2021 .dropdown-menu .category-links li a.icon-item>.text .category-subtitle{font-size:12px;color:#838495}.main-menu.mod-2021 .dropdown-menu .category-title{font-size:18px;line-height:1.2em;font-weight:600;color:#838495;text-transform:uppercase;border-bottom:1px solid #323445;padding-bottom:12px}.main-menu.mod-2021 .menu-item-columns{width:auto;min-width:auto;box-sizing:border-box}.main-menu.mod-2021 .menu-item-columns .dropdown-menu .dropdown-menu-content{padding:24px 48px !important}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-whatisvpn .display-flex .cell{width:150px}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .display-flex .cell{width:150px}@media only screen and (max-width: 1510px){.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .display-flex .cell{width:180px}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .dropdown-menu .dropdown-menu-content{padding:24px 36px !important}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .dropdown-menu .category-links{margin-right:36px;padding-right:0}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .dropdown-menu .category-links:last-child{margin-right:0}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .dropdown-menu .category-title{min-height:calc(44px + 12px + 1px)}}@media only screen and (max-width: 1200px){.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .display-flex .cell{width:160px}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .dropdown-menu .dropdown-menu-content{padding:24px 24px !important}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .dropdown-menu .category-links{margin-right:36px}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .dropdown-menu .category-links:last-child{margin-right:0}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .category-links li a.icon-item>.icon{display:none}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-apps .menu-footer .icon{display:none}}.main-menu.mod-2021 .menu-item-columns.menu-item-columns-servers .display-flex .cell{width:110px}@media screen and (max-width: 1100px){#main-menu-mobile.mod-2021 .apps-categories-title{font-size:18px !important;font-weight:600 !important;text-transform:uppercase !important;margin-top:22px !important;margin-bottom:22px !important;color:#656679;border-bottom:1px solid #656679}#main-menu-mobile.mod-2021 .menu-item{border-bottom:none !important}#main-menu-mobile.mod-2021 .menu-item .menu-text{display:inline-block;font-size:16px;line-height:1.2em;padding-right:8px;width:65%;font-weight:600 !important;text-decoration:underline}#main-menu-mobile.mod-2021 .menu-item a.icon-item{display:inline-flex;align-items:center}#main-menu-mobile.mod-2021 .menu-item a.icon-item>.icon{margin-right:10px;width:14px}#main-menu-mobile.mod-2021 .menu-item a.icon-item>.icon svg{max-width:14px;max-height:14px}#main-menu-mobile.mod-2021 .navbar-mobile-content .menu-link{font-weight:400 !important;align-items:center;padding:10px 24px !important}#main-menu-mobile.mod-2021 .navbar-mobile-content .menu-link.inline-block.font-bold.mt-12{display:inline-block !important;font-weight:bold !important;margin-top:12px !important}#main-menu-mobile.mod-2021 .navbar-mobile-content{padding-right:0}#main-menu-mobile.mod-2021 .navbar-mobile-content #nav-buy .menu-text,#main-menu-mobile.mod-2021 .navbar-mobile-content #nav-privacyhub .menu-text,#main-menu-mobile.mod-2021 .navbar-mobile-content #nav-help .menu-text{height:20px;font-size:14px !important;text-decoration:none !important;font-weight:400 !important}}#main-menu-mobile.mod-2021 .navbar-nav>li>a.menu-btn,#main-menu-mobile.mod-2021 .navbar-nav>li>a.menu-line-btn{max-width:85%;margin-left:auto;margin-right:auto}@media only screen and (max-width: 1340px){.main-menu.mod-2021 .navbar-nav>li>a{margin:0 5px;padding:10px 5px;font-size:13px}}@media only screen and (max-width: 1390px){.ru .main-menu .menu-link,.pt .main-menu .menu-link{font-size:12px !important;letter-spacing:-0.5px !important}}@media only screen and (max-width: 1230px){.ru .main-menu .menu-link,.pt .main-menu .menu-link{letter-spacing:-0.9px !important}}@media only screen and (min-width: 1101px){.mobile-country-selection{display:none !important}}@media only screen and (max-width: 1100px){.cs .main-menu .new-login .menu-item,.de .main-menu .new-login .menu-item,.es .main-menu .new-login .menu-item,.fr .main-menu .new-login .menu-item{margin-right:0}.es .main-menu .new-login .menu-item .white-login,.hu .main-menu .new-login .menu-item .white-login,.pl .main-menu .new-login .menu-item .white-login,.vi .main-menu .new-login .menu-item .white-login{font-size:12px !important;padding-left:5px !important;padding-right:5px !important}.es .country-selection-exposed-bar,.hu .country-selection-exposed-bar,.pl .country-selection-exposed-bar,.vi .country-selection-exposed-bar{right:110px !important}}.country-selection-exposed-bar{overflow:visible;position:absolute;top:3px;right:0;z-index:99999999;display:inline-block;text-align:right}@media only screen and (max-width: 1100px){.country-selection-exposed-bar{right:100px !important;top:3px !important}}@media only screen and (max-width: 1100px){.country-selection-exposed-bar{right:60px;top:13px}.country-selection-exposed-bar .menu-country{transition:left 0.2s linear, opacity 0.2s linear;left:0px;opacity:1}.country-selection-exposed-bar .menu-country.toggled{left:20px;opacity:0}}.country-selection-exposed-bar #dropdown-lang{background-color:#fff !important;border:1px solid #D2D6DB;border-radius:4px;padding:16px 8px;position:absolute !important;margin-top:52px !important}@media only screen and (max-width: 768px){.country-selection-exposed-bar #dropdown-lang{margin-top:34px !important}}.country-selection-exposed-bar #dropdown-lang :hover{background-color:#f0f0f0 !important}.country-selection-exposed-bar #dropdown-lang a{color:black !important;padding-top:12px;padding-bottom:12px;background-color:white !important}.country-selection-exposed-bar .dropdown-menu{position:unset !important;top:30px !important;transform:unset !important;float:unset;width:300px;padding:16px 8px;margin-right:-40px !important;border-radius:4px;border:1px solid #ddd;columns:2;column-rule:1px solid #ddd}.country-selection-exposed-bar .dropdown-menu::before{width:20px;content:"";position:absolute;top:-13px;left:57%;margin-left:50px;border-width:0 12px 12px 12px;border-style:solid;border-color:transparent transparent #D2D6DB transparent}.country-selection-exposed-bar .nav>li>a{margin:2px;font-weight:700;padding:0;color:#000333}.country-selection-exposed-bar .nav>li>a :hover,.country-selection-exposed-bar .nav>li>a :active,.country-selection-exposed-bar .nav>li>a :focus{color:white !important}.country-selection-exposed-bar .nav>li>a>span{vertical-align:middle}.country-selection-exposed-bar .open>.dropdown-menu{border-radius:0;background-color:#f6f6f6}.country-selection-exposed-bar .dropdown-menu{top:94%;border:none;columns:2;-webkit-columns:2;-moz-columns:2;-webkit-column-rule:1px solid #ddd;-moz-column-rule:1px solid #ddd;column-rule:1px solid #ddd;padding:20px 10px}.country-selection-exposed-bar .dropdown-menu>li>a{padding:10px 20px}.country-selection-exposed-bar .dropdown-menu>li>a:hover{background-color:#e9e9e9}.country-selection-exposed-bar .dropdown-menu>li{list-style:none;position:relative;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}.country-selection-exposed-bar .dropdown-menu>li:last-child>a{border-bottom:none}.main-footer{background-color:#f0f3f5;color:#6f6f6f}.main-footer a{color:#6f6f6f}@media only screen and (max-width: 767px){.main-footer .footer-columns{padding-top:20px}}.main-footer .footer-column h4{font-size:18px;font-weight:600;color:#6f6f6f;line-height:1.1em}.main-footer .footer-column ul{padding-left:0;list-style-type:none;margin:15px 0 25px 0}.main-footer .footer-column ul>li>a{display:inline-block;font-size:14px;font-weight:400;line-height:18px;margin:5px 0;cursor:pointer}.main-footer .footer-column .tp-widget-score-wrapper{display:inline-block;width:110px !important;vertical-align:middle}@media only screen and (max-width: 767px){.main-footer .footer-column{padding-top:0}.main-footer .footer-column .footer-section{padding:20px 0 0 0}.main-footer .footer-column .footer-section h4{font-size:16px;cursor:pointer;margin-left:10px}.main-footer .footer-column .footer-section h4:before{display:inline-block;position:relative;font-family:"Font Awesome\ 5 Free";font-weight:900;content:"\f067";font-size:10px;line-height:16px;border-radius:50%;width:18px;height:18px;top:-2px;right:10px;text-align:center;color:#6f6f6f;border:1px solid #6f6f6f}.main-footer .footer-column .footer-section.active h4:before{content:"\f068"}.main-footer .footer-column .footer-section>ul{display:none;margin:1em 2em 0.5em 2em}.main-footer .footer-column .footer-section>ul.social-media-icons{display:block}.main-footer .footer-column .footer-section.active>ul{display:block}.main-footer .footer-column .footer-section>ul:not(.social-media-icons)>li a{font-size:14px;font-weight:400}.main-footer .footer-column .footer-section>ul:not(.social-media-icons)>li a:active,.main-footer .footer-column .footer-section>ul:not(.social-media-icons)>li a:focus,.main-footer .footer-column .footer-section>ul:not(.social-media-icons)>li a:hover{text-decoration:none}.main-footer .footer-column .footer-section h4.social-media-icons:before{visibility:hidden}.main-footer .footer-column .footer-section .social-media-icons li{display:inline-flex;align-items:center;justify-content:center}.main-footer .footer-column .tp-widget-score-wrapper{align-items:center;justify-content:center;display:inline-flex;width:110px;margin:0 2em}}.main-footer .footer-bottom small{font-size:12px;font-weight:400}.main-footer .footer-bottom a{text-decoration:none;border-bottom:1px dotted #6f6f6f;margin-left:0.5em;margin-right:0.5em}.main-footer .social-media-icons li{display:inline-block;border-radius:50px;width:30px;height:30px;text-align:center;padding-top:1px;margin:8px;margin-left:0;background-color:#6f6f6f;transition:0.3s background-color;cursor:pointer}.main-footer .social-media-icons li i.fab{font-size:16px;color:#323232;transition:0.3s color}.main-footer .social-media-icons li:hover i.fab{color:white}.main-footer .social-media-icons li:hover.color-facebook{background-color:#3b5998;color:white}.main-footer .social-media-icons li:hover.color-google-plus:hover{background-color:#dc4e41;color:white}.main-footer .social-media-icons li:hover.color-instagram:hover{background-color:#6a453b;color:white}.main-footer .social-media-icons li:hover.color-linkedin:hover{background-color:#007ab9;color:white}.main-footer .social-media-icons li:hover.color-pinterest:hover{background-color:#cb2027;color:white}.main-footer .social-media-icons li:hover.color-twitter:hover{background-color:#55acee;color:white}.main-footer .social-media-icons li:hover.color-vimeo:hover{background-color:#86c9ef;color:white}.main-footer .social-media-icons li:hover.color-youtube:hover{background-color:#d42428;color:white}@media only screen and (max-width: 767px){.main-footer .social-media-icons{max-width:200px}}.main-footer .badge-avtest{display:inline-block;max-width:90px;vertical-align:middle;margin-top:5px;margin-bottom:5px}.main-footer .badge-avtest img{width:100%}@media only screen and (max-width: 1199px){.main-footer .badge-avtest{margin-top:10px}}.main-footer.inverse{background-color:#323232;color:#c1c1c1}.main-footer.inverse a{color:#c1c1c1}.main-footer.inverse .footer-column h4{color:#c1c1c1;opacity:0.4}.main-footer.inverse .footer-column h4:before{color:#c1c1c1;border-color:#c1c1c1}.main-footer.inverse .footer-column>ul:not(.social-media-icons)>li a{border-bottom-color:#c1c1c1}@media only screen and (max-width: 767px){.main-footer.inverse .footer-column h4{opacity:1}}.main-footer.inverse .footer-bottom a{border-bottom-color:#c1c1c1}.main-footer.dark-blue{background-color:#1d1e2f}.main-footer.dark-blue .social-media-icons li{background-color:rgba(255,255,255,0.6)}.main-footer.dark-blue .social-media-icons li i.fab{color:#1d1e2f}.main-footer.dark-blue .social-media-icons li:hover i.fab{color:white}.main-footer.dark-blue a{color:rgba(255,255,255,0.8)}.main-footer.dark-blue .footer-column h4{color:#fff}.blackfriday19.main-footer.dark-blue{background-color:black}.modal.modal-login.modal-custom .modal-dialog{width:500px;max-width:100% !important;position:relative;margin:100px auto}.modal.modal-login.modal-custom .modal__top-border{border-top:1px solid #D5D5D5}.modal.modal-login.modal-custom .modal-content{-webkit-box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4);-moz-box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4);box-shadow:0px 5px 15px 0px rgba(0,0,0,0.4)}.modal.modal-login.modal-custom .modal-content.account-login{display:none}.modal.modal-login.modal-custom .modal-content.account-login.active{display:block}.modal.modal-login.modal-custom .modal-content.account-email{display:none}.modal.modal-login.modal-custom .modal-content.account-email.active{display:block}.modal.modal-login.modal-custom .modal-content.account-email.active .custom-hey .hey-1,.modal.modal-login.modal-custom .modal-content.account-email.active .custom-hey .hey-2{fill:#6c6c6c}.modal.modal-login.modal-custom .modal-content.account-email.active .custom-hey .hey-1.active,.modal.modal-login.modal-custom .modal-content.account-email.active .custom-hey .hey-2.active{fill:#4BA920}.modal.modal-login.modal-custom .modal-content button.close{transition:transform .5s ease-in-out}.modal.modal-login.modal-custom .modal-content button.close:hover{-webkit-transform:rotate(180deg);transform:rotate(180deg);text-decoration:none}.modal.modal-login.modal-custom .modal-content .modal-title{color:#6C6C6C;font-weight:bold;font-size:40px;margin-top:0px}.modal.modal-login.modal-custom .modal-content .modal-title img{height:80px;display:inline-block;margin-bottom:20px}.modal.modal-login.modal-custom .modal-content .form-group{position:relative}.modal.modal-login.modal-custom .modal-content .form-group label{position:absolute;top:25px;left:15px;font-weight:500;cursor:text;transition:0.3s all}.modal.modal-login.modal-custom .modal-content .form-group .cg-textfield{border-color:#D5D5D5;height:40px;width:100%;font-size:16px;padding:8.5px 16px;font-weight:500;color:rgba(50,50,50,0.6);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin:15px auto 0 auto}.modal.modal-login.modal-custom .modal-content .form-group .cg-textfield:focus{border-color:#4BA920;outline:0;-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3);-moz-box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3);box-shadow:2px 2px 10px 0px rgba(0,0,0,0.3)}.modal.modal-login.modal-custom .modal-content .form-group .cg-textfield.not-empty{border-color:#4BA920}.modal.modal-login.modal-custom .modal-content .form-group .cg-textfield:focus ~ label,.modal.modal-login.modal-custom .modal-content .form-group .cg-textfield.not-empty ~ label{transform:scale(0.85) translateY(-40px) translateX(-25px)}.modal.modal-login.modal-custom .modal-content button[type="submit"],.modal.modal-login.modal-custom .modal-content a.js-email{cursor:pointer;width:100%;margin:0 auto;background-color:#fff;border:2px solid #4BA920;color:#4BA920;font-weight:bold;font-size:16px}.modal.modal-login.modal-custom .modal-content .alert{display:none}.modal.modal-login.modal-custom .modal-content form{padding-left:10px;padding-right:10px}.modal.modal-login.modal-custom .modal-content .modal__new-user{color:#6C6C6C;font-size:18px;font-weight:bold;display:inline-block;padding-top:10px;line-height:40px}.modal.modal-login.modal-custom .modal-content .modal__new-user a{color:#4BA920;text-decoration:underline}.modal.modal-login.modal-custom .forgot-user{color:rgba(50,50,50,0.6)}.modal.modal-login.modal-custom a.forgot-user{text-decoration:underline}.modal.modal-login.modal-custom .custom-hey{width:30px;display:inline-block;vertical-align:middle}.modal.modal-login.modal-custom .custom-hey .hey-1,.modal.modal-login.modal-custom .custom-hey .hey-2{transition:.3s all}.modal.modal-login.modal-custom.filled-modal .custom-hey .hey-1,.modal.modal-login.modal-custom.filled-modal .custom-hey .hey-2{fill:#4BA920}.modal.modal-login.modal-custom.filled-modal button[type="submit"]{background-color:#4BA920;color:#fff}@media screen and (max-width: 767px){#login-modal .modal-content .modal-header{padding-bottom:0}#login-modal .modal-content .modal-header .modal-title{color:#6C6C6C;font-weight:bold;font-size:30px;margin-top:0px}#login-modal .modal-content .modal-header .modal-title .custom-hey{width:20px}#login-modal .modal-content .modal-body{padding-top:0}}#login-shop{z-index:999999}.vpn-plans-title{background-color:#f8f9fa;border:1px solid #aeb5b6;position:relative;height:60px}.vpn-plans-title img{width:75px}.vpn-plans-items{background-color:#f8f9fa;border:1px solid #aeb5b6;position:relative;height:60px}.vpn-plans-title{margin:25px 0px 15px 0px}.vpn-plans-items{margin:10px 0px}.vpn-plans-title img{position:absolute;left:18px}.vpn-plans-title.vpn-plans-1 img{bottom:-10px}.vpn-plans-title.vpn-plans-2 img{bottom:2px}.vpn-plans-title.vpn-plans-3 img{bottom:-15px}.vpn-plans-items img{margin:18px;max-width:25px}.vpn-plans-title span{padding-left:118px;line-height:60px;font-weight:bold}.vpn-plans-items span{display:inline-block;vertical-align:middle;width:80%}@media (min-width: 992px) and (max-width: 1199px){.vpn-plans-items span{width:75%}.vpn-plans-title span{padding-left:95px}.vpn-plans-title img{left:10px}}@media (min-width: 768px) and (max-width: 991px){.vpn-plans-items span{width:68%;font-size:11px}.vpn-plans-title{height:65px}.vpn-plans-title span{padding-left:90px}.vpn-plans-title img{left:5px}.vpn-plans-items{height:65px}html:lang(ru) .vpn-plans-3>span{line-height:25px;display:block;padding-top:7px;word-wrap:break-word;padding-right:5px}}@media (max-width: 767px){.vpn-plans-items span{width:75%}.vpn-plans-title{height:65px}.vpn-plans-title span{padding-left:90px}.vpn-plans-title img{left:5px}.vpn-plans-items{height:65px}}.carousel-container{min-height:450px}.carousel-container.carousel-bg-image{background-image:url("/img/element/carousel/back-quotes.jpg");background-position:top;background-size:cover}.carousel-container #carousel-quotes .rating{font-size:24px;margin:15px 0 25px 0}.carousel-container #carousel-quotes .rating i{margin-left:10px;margin-right:10px}.carousel-container #carousel-quotes .quote{display:inline-block;width:70%}.carousel-container #carousel-quotes .quote span{display:inline-block;vertical-align:middle;font-size:18px;font-weight:200}.carousel-container #carousel-quotes .quote .quote-source a{display:inline-block}.carousel-container #carousel-quotes .quote img{width:160px;height:auto;margin:30px;padding:0px}.carousel-container .carousel-control{background-image:none !important;padding-top:60px}.carousel-container .carousel-control .quote__arrow--left{width:60px;height:60px;border:2px solid;border-color:#fc0 transparent transparent #fc0;transform:rotate(-45deg);display:inline-block}.carousel-container .carousel-control .quote__arrow--right{width:60px;height:60px;border:2px solid;border-color:transparent #fc0 #fc0 transparent;transform:rotate(-45deg);display:inline-block}.trusted-by-users .table-item{height:160px;width:100%;padding:30px;margin:15px 0}.trusted-by-users .table-item span.img-bg{display:block;margin:0px auto;height:45px}.trusted-by-users .table-item span{bottom:35px;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;color:#fff}.trusted-by-users .table-item.surf{background-color:#ffcc00}.trusted-by-users .table-item.stream{background-color:#e96032}.trusted-by-users .table-item.wifi{background-color:#00a0de}.trusted-by-users .table-item.torrent{background-color:#844cb1}.trusted-by-users .table-item.website{background-color:#2f5a9e}.trusted-by-users .table-item.vpn{background-color:#be2867}.exposed-bar{background-color:#f6f6f6;width:100%;overflow:visible;padding:0;box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2)}.exposed-bar.dark{background-color:#323232}.exposed-bar.dark .client-info span{color:#fff;vertical-align:middle}.exposed-bar.dark .client-info span span.exposed a:hover{color:#fff}.exposed-bar .client-info{display:inline-block;padding-right:10px;text-decoration:none;box-sizing:border-box;padding:0 35px 0 35px;width:85%}@media only screen and (max-width: 1100px){.exposed-bar .client-info{width:100%}}.exposed-bar .client-info.is-exposed{cursor:pointer}.exposed-bar .client-info.is-protected{cursor:default}.exposed-bar .client-info.no-link{cursor:default}.exposed-bar .client-info .label{font-weight:normal;margin:0;padding:0}.exposed-bar .client-info>span{padding-right:3%}.exposed-bar .client-info span{color:#636363;font-size:12px;line-height:25px}.exposed-bar .client-info span span{padding-left:3px}.exposed-bar .client-info span span.exposed{color:#e4502a}.exposed-bar .client-info span span.exposed a{color:#e4502a;text-decoration:none;transition:all 250ms ease-in}.exposed-bar .client-info span span.exposed a:active,.exposed-bar .client-info span span.exposed a:visited{color:#e4502a;text-decoration:none;transition:all 250ms ease-in}.exposed-bar .client-info span span.exposed a:hover{color:#323232}.exposed-bar .client-info span span.protected{color:#88b639}.exposed-bar .client-info>span{padding-right:25px}@media (max-width: 1140px){.exposed-bar{padding:0 5px;font-size:12px}}@media (max-width: 768px){.exposed-bar{padding:0 5px}.exposed-bar .client-info span{font-size:10px}.exposed-bar .client-info span span{font-size:10px}.exposed-bar .client-info>span{padding-right:15px}}@media only screen and (max-width: 480px){.exposed-bar .client-info>span{padding-right:5px}.exposed-bar .client-info span span{font-size:10px}}.exposed-bar.dark-blue{background-color:#242538;color:white;border-top-color:rgba(255,255,255,0.1)}.exposed-bar.dark-blue .client-info span{color:#656679;opacity:1}.exposed-bar.dark-blue .client-info span span.exposed a{color:#e4502a !important}.exposed-bar.dark-blue .breadcrumb{color:rgba(255,255,255,0.7);background-color:transparent}.exposed-bar.dark-blue .breadcrumb a{color:rgba(255,255,255,0.7);text-decoration:underline}.tp-widget-dark{color:rgba(255,255,255,0.8)}.tp-widget-light{color:#191919}.tp-widget-review{background-color:#f8f9fa;border-radius:2px;box-shadow:0 1px 0 0 rgba(182,196,210,0.4);display:inline-block;height:159px;line-height:16px;margin:0 24px 10px 0;padding:15px;position:relative;vertical-align:middle;white-space:normal;width:100%}.tp-widget-review .tp-review-title{color:#1f2936;font-size:14px;font-weight:700;height:16px;margin:0 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-widget-review .tp-review-date{color:rgba(25,25,25,0.6);font-size:12px;line-height:14px;max-width:calc(100% - 135px);position:absolute;right:15px;text-align:right;top:15px}.tp-widget-review .tp-review-text{color:#191919;font-size:13px;line-height:16px;max-height:50px;overflow:hidden;word-wrap:break-word}.tp-widget-review .tp-review-username{bottom:12px;color:rgba(25,25,25,0.6);font-size:12px;left:16px;overflow:hidden;position:absolute;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 30px);z-index:2}.tp-widget-review a,.tp-widget-review a:hover{text-decoration:none}.tp-widget-stars{margin-bottom:14px}.tp-widget-stars .single-star{width:100%}.tp-widget-stars .tp-stars{width:110px}.tp-widget-stars .tp-stars .single-star{width:17px}.tp-widget-stars .tp-stars--5 .single-star{background-color:#00b67a}.tp-widget-stars .tp-stars--4 .single-star{background-color:#73cf11}.tp-widget-stars .tp-stars--3 .single-star{background-color:#ffce00}.tp-widget-stars .tp-stars--2 .single-star{background-color:#ff8622}.tp-widget-stars .tp-stars--1 .single-star{background-color:#ff3722}.trustbox-quotes .tp-reviews-bottom{line-height:16px;margin:15px auto 5px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:13px}.trustbox-quotes .tp-reviews-bottom .tp-widget-rating{display:inline-block;vertical-align:bottom}.trustbox-quotes .tp-reviews-bottom .tp-widget-rating a{color:#ffffff;text-decoration:underline}.trustbox-quotes .tp-reviews-bottom span{display:inline-block}.trustbox-quotes .tp-reviews-bottom .tp-widget-poweredby{display:inline-block;vertical-align:bottom}.trustbox-quotes .tp-reviews-bottom .tp-widget-poweredby .tp-widget-logo{display:block;margin:0 auto;width:80px}.trustbox-quotes .tp-reviews-bottom .tp-widget-poweredby #tp-widget-logo .tp_logo{height:16px}.trustbox-quotes .tp-reviews-bottom .bold-underline{font-weight:500}.trustbox-quotes .tp-rating-big{max-width:200px;text-align:center;z-index:100;color:#fff;margin:0 auto}.trustbox-quotes .tp-rating-big .tp-widget-logo img{margin:0 auto;width:95px}.trustbox-quotes .tp-rating-big .tp-widget-humanscore{font-size:24px;margin:0 0 12px;font-weight:500}.trustbox-quotes .tp-rating-big .tp-widget-humanscore a{color:#fff;text-decoration:none}.trustbox-quotes .tp-rating-big .tp-stars{margin:0 auto}.trustbox-quotes .tp-rating-big .tp-widget-stars .tp-stars{width:160px}.trustbox-quotes .tp-rating-big .tp-widget-stars .tp-stars .single-star{width:27px}.trustbox-quotes .tp-rating-big .tp-widget-businessinfo{font-size:13px;line-height:16px;margin:0 0 14px}.trustbox-quotes .tp-rating-big .tp-widget-businessinfo a{color:#fff;text-decoration:none}.trustbox-quotes .tp-rating-big .bold-underline{font-weight:700;text-decoration:underline}.tp-widget-score-wrapper{text-align:center;width:90px}.tp-widget-score-wrapper a{text-decoration:none}.tp-widget-score-wrapper .tp-widget-logo img{width:65px}.tp-widget-score-wrapper .tp-widget-stars{margin-bottom:0}.tp-pricing-widget .tp-rating-big{max-width:200px;text-align:center;z-index:100;margin:0 auto}.tp-pricing-widget .tp-rating-big .tp-widget-logo img{margin:0 auto;width:95px}.tp-pricing-widget .tp-rating-big .tp-widget-humanscore{font-size:24px;margin:0 0 12px;font-weight:500}.tp-pricing-widget .tp-rating-big .tp-widget-humanscore a{color:#191919;text-decoration:none}.tp-pricing-widget .tp-rating-big .tp-stars{margin:0 auto}.tp-pricing-widget .tp-rating-big .tp-widget-stars .tp-stars{width:160px}.tp-pricing-widget .tp-rating-big .tp-widget-stars .tp-stars .single-star{width:27px}.tp-pricing-widget .tp-rating-big .tp-widget-businessinfo{font-size:13px;line-height:16px;margin:0 0 14px}.tp-pricing-widget .tp-rating-big .tp-widget-businessinfo a{color:#191919;text-decoration:none}.tp-pricing-widget .tp-rating-big .bold-underline{font-weight:700;text-decoration:underline}.tp-pricing-widget .tp-pricing-reviews .tp-widget-review{background-color:transparent;box-shadow:none}.tp-stars .gray-background{background-color:#dcdce5 !important}@media only screen and (min-width: 990px) and (max-width: 1200px){.tp-widget-review{height:200px}.tp-widget-review .tp-review-date{max-width:none;position:relative;text-align:left;margin-bottom:10px;right:0;top:0}}.wrap-snapengage{animation-delay:2s;animation:slideUp 0.8s both;position:fixed;right:20px;bottom:20px;width:auto;z-index:999998;cursor:pointer;background-color:transparent;border:unset}@media (min-width: 768px){.wrap-snapengage.up{bottom:60px}}.snapengage-button{background-color:white;border-radius:12px;box-shadow:0px 0px 35.346px 0px rgba(0,0,0,0.1);padding:0.6rem;display:flex;gap:0.3rem;flex-flow:column nowrap;justify-content:center;width:75px;height:75px}@media (min-width: 768px){.snapengage-button{gap:0.8rem;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:auto;height:auto;border-radius:1132.2px;box-shadow:0px 0px 39.667px 0px rgba(0,0,0,0.1);padding:0.4rem 2rem 0.4rem 0.6rem}}.icon-wrapper,.text-wrapper{display:block}@media (max-width: 768px){.icon-wrapper.desktop,.text-wrapper.desktop{display:none}}@media (min-width: 768px){.icon-wrapper.mobile,.text-wrapper.mobile{display:none}.icon-wrapper.desktop,.text-wrapper.desktop{display:block}}.icon-wrapper{width:25px;height:22px;margin:0 auto}@media (min-width: 768px){.icon-wrapper{width:56px;height:56px}}.text-wrapper{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center}@media (min-width: 768px){.text-wrapper{align-items:flex-start;text-align:left}}.snapengage-text{background:white;border-radius:0.6rem 0.6rem 0 0;color:#242538;font-size:18px;font-weight:700;margin:0}.snapengage-status{color:#667782;font-size:12px;font-weight:400;line-height:normal;white-space:nowrap;margin:0}.snapengage-button.spin .icon-wrapper svg#svg-bg{background-size:contain;animation:rotation 2s infinite linear}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0, 100%, 0)}100%{opacity:1;transform:none}}@keyframes rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}#designstudio-button{direction:ltr;right:2rem;z-index:100002 !important}@media (min-width: 768px){#designstudio-button{right:1rem}}.blobs{width:300px;height:80px;position:relative;overflow:hidden;margin:10px auto}.blob{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:absolute;background:#fc0;top:calc(50% - 15px);width:30px;height:30px;border-radius:50%;opacity:0}.blob.blob-left{left:0px;-webkit-animation:blobs-left ease 2s infinite;-moz-animation:blobs-left ease 2s infinite;animation:blobs-left ease 2s infinite}.blob.blob-right{right:0px;-webkit-animation:blobs-right ease 2s infinite;-moz-animation:blobs-right ease 2s infinite;animation:blobs-right ease 2s infinite}.blob-center{position:absolute;left:0px;right:0px;margin:0 auto;top:calc(50% - 35px);height:70px;width:70px;background:#fc0;border-radius:70px;opacity:0;-webkit-animation:blobs-center ease 1s forwards;-moz-animation:blobs-center ease 1s forwards;animation:blobs-center ease 1s forwards}.cg-ghosty{position:absolute;left:0px;right:0px;margin:0 auto;top:calc(50% - 20px);opacity:0;-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-animation:pulse ease 1s forwards;-moz-animation:pulse ease 1s forwards;animation:pulse ease 1s forwards}.blob:nth-child(1),.blob:nth-child(5){-webkit-animation-delay:0s;--moz-animation-delay:0s;animation-delay:0s}.blob:nth-child(2),.blob:nth-child(6){-webkit-animation-delay:1s;--moz-animation-delay:1s;animation-delay:1s}.blob:nth-child(3),.blob:nth-child(7){-webkit-animation-delay:2s;--moz-animation-delay:2s;animation-delay:2s}.blob:nth-child(4),.blob:nth-child(8){-webkit-animation-delay:3s;--moz-animation-delay:3s;animation-delay:3s}.blob-center,.cg-ghosty{-webkit-animation-delay:1.2s;--moz-animation-delay:1.2s;animation-delay:1.2s}@-webkit-keyframes blobs-left{0%{opacity:0;left:0px;transform:scale(0.5)}1%{opacity:1}100%{opacity:1;transform:scale(1);left:135px}}@-moz-keyframes blobs-left{0%{opacity:0;left:0px;transform:scale(0.5)}1%{opacity:1}100%{opacity:1;transform:scale(1);left:135px}}@keyframes blobs-left{0%{opacity:0;left:0px;transform:scale(0.5)}1%{opacity:1}100%{opacity:1;transform:scale(1);left:135px}}@-webkit-keyframes blobs-right{0%{opacity:0;right:0px;transform:scale(0.5)}1%{opacity:1}100%{opacity:1;transform:scale(1);right:135px}}@-moz-keyframes blobs-right{0%{opacity:0;right:0px;transform:scale(0.5)}1%{opacity:1}100%{opacity:1;transform:scale(1);right:135px}}@keyframes blobs-right{0%{opacity:0;right:0px;transform:scale(0.5)}1%{opacity:1}100%{opacity:1;transform:scale(1);right:135px}}@keyframes blobs-center{0%{opacity:0;transform:scale(0.3)}1%{opacity:1}50%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes pulse{0%{opacity:0;-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}1%{opacity:1}50%{opacity:1;-webkit-transform:scale3d(1.2, 1.2, 1.2);transform:scale3d(1.2, 1.2, 1.2)}100%{opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@-moz-keyframes pulse{0%{opacity:0;-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}1%{opacity:1}50%{opacity:1;-webkit-transform:scale3d(1.2, 1.2, 1.2);transform:scale3d(1.2, 1.2, 1.2)}100%{opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes pulse{0%{opacity:0;-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}1%{opacity:1}50%{opacity:1;-webkit-transform:scale3d(1.2, 1.2, 1.2);transform:scale3d(1.2, 1.2, 1.2)}100%{opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}.router-menu:hover .router-icon{content:url("/img/pages/apps/router-icon-yellow.png")}.console-menu:hover .console-icon{content:url("/img/pages/apps/console-icon-yellow.png")}.console-menu.active .console-icon{color:#fc0}.console-menu.active .console-icon{content:url("/img/pages/apps/console-icon-yellow.png")}.d-none{display:none !important}.yellow-underline{position:relative}.yellow-underline:before{position:absolute;content:"";width:80px;height:4px;background-color:#fc0;bottom:-10px}html{scroll-behavior:smooth}
/* Countdown Clock container */

/* a number for: day, hour, min and sec */
.countdown-container-inline > .time_unit {
}

/* clock separator ':' */
.countdown-container-inline > .separator {
}
nav.main-menu a.menu-btn.spring22{font-weight:bold}nav.main-menu a.menu-btn.spring22:before{content:'';position:absolute;top:50%;left:6px;transform:translateY(-50%);display:none;width:30px;height:28px;background-size:30px auto;background-image:url("/img/campaigns/spring22/main-menu/btn-icon.svg");background-repeat:no-repeat}@media only screen and (max-width: 1000px){nav.main-menu a.menu-btn.spring22:before{display:none}}@media only screen and (max-width: 1340px){nav.main-menu a.menu-btn.spring22:before{display:none}}body.pt nav.main-menu a.menu-btn.spring22,body.ru nav.main-menu a.menu-btn.spring22{padding:10px 10px;font-size:12px !important;letter-spacing:-0.9px}@media only screen and (max-width: 1391px){body.pt nav.main-menu a.menu-btn.spring22,body.ru nav.main-menu a.menu-btn.spring22{font-size:12px !important;letter-spacing:-0.9px}}body.pt nav.main-menu a.menu-btn.spring22:before,body.ru nav.main-menu a.menu-btn.spring22:before{display:none}