@font-face {
font-family: 'icon-set';
src: url(//wp-dev.bulbtech.com/icon-set) format('truetype'),
url(//wp-dev.bulbtech.com/icon-set) format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
.external-tool-container {
--color-primary: #00A0DF;
--color-secondary: #3ACC88;
--color-tertiary: #A4ADAA;
--color-secondary-dark: #1e6b47;
--color-tertiary-dark: #5c615f;
--opacity-start-value: 0.6;
--opacity-end-value: 1;
--transition-duration: 0.40s;
--transition-function: ease-out;
--border-radius: 4px;
--btn-size: 100px;
--btn-clicked-size: calc(var(--btn-size) / 2);
--btn-margin-right: 1rem;
--btn-margin-bottom: 1rem;
--popup-height: 50vh;
--popup-width: 20vw;
--popup-height-large: 70vh;
--popup-width-large: 30vw;
--popup-margin-right: calc(-0.1 * var(--btn-clicked-size) - var(--btn-margin-right));
--popup-margin-bottom: calc(-0.2 * var(--btn-clicked-size) - var(--btn-margin-bottom));
--loading-spinner-size: 50px;
}
.external-tool-btn-container {
position: fixed;
right: var(--btn-margin-right);
bottom: var(--btn-margin-bottom);
z-index: 999999;
display: flex;
align-items: center;
text-transform: uppercase;
}
.external-tool-btn-img {
height: var(--btn-size);
width: var(--btn-size);
transition: all var(--transition-duration) var(--transition-function);
}
.external-tool-btn.external-tool-button-clicked .external-tool-btn-img {
height: calc(var(--btn-size) / 2);
width: calc(var(--btn-size) / 2);
}
.external-tool-btn {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
z-index: 100;
opacity: var(--opacity-start-value);
transition: opacity var(--transition-duration) var(--transition-function);
}
.external-tool-btn:focus {
outline: none;
}
.external-tool-btn.external-tool-button-clicked,
.external-tool-btn-container:hover .external-tool-btn
{
opacity: var(--opacity-end-value);
}
.external-tool-btn-msg {
background-color: white;
padding: 0.5rem 6rem .4rem .8rem;
color: var(--color-primary);
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
position: absolute;
left: 0;
right: 0;
text-align: center;
white-space: nowrap;
opacity: 0;
transition: all var(--transition-duration) var(--transition-function);
}
.external-tool-btn-container:hover .external-tool-btn-msg {
cursor: pointer;
opacity: var(--opacity-end-value);
transform: translateX(-95%);
}
.external-tool-btn-container:hover .external-tool-btn-msg.external-tool-button-clicked {
opacity: 0;
transform: translateX(0);
}
.external-tool-popup {
background: white;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
border-radius: var(--border-radius);
overflow: hidden;
z-index: 999998;
position: fixed;
bottom: var(--btn-margin-bottom);
right: var(--btn-margin-right);
height: 0;
width: 0;
transform: translate(-50%,-50%);
opacity: 0;
transition: all var(--transition-duration) var(--transition-function);
}
.external-tool-popup.external-tool-popup-visible {
height: var(--popup-height);
width: var(--popup-width);
opacity: 1;
transform: translate(var(--popup-margin-right), var(--popup-margin-bottom));
}
.external-tool-popup.external-tool-popup-visible.external-tool-popup-large {
height: var(--popup-height-large);
width: var(--popup-width-large);
}
.external-tool-popup.external-tool-popup-large {
height: 0;
width: 0;
}
.external-tool-popup-header {
display: flex;
align-items: center;
padding: 0.25rem .5rem 0.25rem 1rem;
background: linear-gradient(45deg, var(--color-primary), #3ACC88);
}
.external-tool-popup-header-title {
display: flex;
justify-content: flex-start;
align-items: center;
flex: 1;
margin-top: 0.5rem;
margin-bottom: 0.2rem;
font-size: 1rem;
font-weight: normal;
color: white;
}
.external-tool-popup-header-btn {
background: transparent;
border: 0;
border-radius: 50%;
outline: none;
cursor: pointer;
padding: 0.5rem;
margin-left: 0.25rem;
height: 2rem;
width: 2rem;
display: flex;
justify-content: center;
align-items: center;
transition: background-color var(--transition-duration) var(--transition-function);
}
.external-tool-popup-header-btn:hover {
background: rgba(225,225,225,.6);
}
.external-tool-popup-header-btn:active {
background: none;
}
.external-tool-popup-header-icon {
display: flex;
color: white;
font-family: 'icon-set';
font-style: normal;
transition: color var(--transition-duration) var(--transition-function);
}
.external-tool-popup-header-icon.icon-arrow-slim-down {
font-size: 1.2rem;
}
.external-tool-popup-header-icon.icon-delete {
font-size: .75rem;
}
.external-tool-popup-header-icon.icon-arrows-up-down {
font-size: .75rem;
}
.external-tool-popup-header-btn:hover .external-tool-popup-header-icon  {
color: #fff;
}
.external-tool-error-msg-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ff004c;
padding: .3rem .8rem .3rem 1rem;
}
.external-tool-error-msg {
color: white;
margin: 0;
font-size: .75rem;
}
.external-tool-error-msg-btn {
background: transparent;
border: 0;
outline: none;
cursor: pointer;
}
.external-tool-error-msg-btn .external-tool-popup-header-icon {
font-size: .5rem;
}
.icon-arrows-up-down:before {
content: "\e96a";
}
.icon-blocked:before {
content: "\ea89";
}
.icon-arrow-slim-down:before {
content: "\e601";
}
.icon-delete:before {
content: "\e97d";
}
.external-tool-popup-content {
flex: 1;
height: 100%;
overflow: auto;
padding: 1.5rem;
padding-bottom: calc(-1 * var(--popup-margin-bottom));
overscroll-behavior: contain;
}
.external-tool-abort-confirmation-dialog {
display: none;
justify-content: center;
align-items: center;
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
}
.external-tool-abort-confirmation-dialog-content {
background-color: #fefefe;
max-width: 80%;
text-align: center;
border-radius: .5rem;
padding: 1rem 1.2rem;
}
.external-tool-abort-confirmation-dialog-title {
font-size: 1.25rem;
font-weight: normal;
color: black;
}
.external-tool-abort-confirmation-dialog-msg {
font-size: 0.875rem;
color: #707070;
width: auto;
}
.external-tool-abort-confirmation-dialog-actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-top: 1rem;
justify-content: space-around;
}
.external-tool-action-btn {
padding: .75rem 1rem;
text-transform: initial;
font-weight: bold;
border-radius: 0;
transition: .3s all ease;
border: 0;
cursor: pointer;
color: #FFF;
width: 45%;
min-width: fill-available;
margin: .25rem;
}
.external-tool-action-btn:hover {
box-shadow: 0 3px rgb(209 227 238);
}
.external-tool-action-btn.tertiary-btn {
background: var(--color-tertiary);
}
.external-tool-action-btn.tertiary-btn:hover {
background: var(--color-tertiary-dark);
}
.external-tool-action-btn.confirm-btn {
background: var(--color-secondary);
}
.external-tool-action-btn.confirm-btn:hover {
background: var(--color-secondary-dark);
}
.external-tool-retry-container {
flex-direction: column;
justify-content: center;
align-items: center;
height: 80%;
}
.external-tool-retry-msg {
text-align: center;
font-size: 1.125rem;
color: #707070;
}
.external-tool-loading-container {
display: flex;
justify-content: center;
align-items: center;
height: 80%;
width: 100%;
}
.external-tool-loading-spinner {
animation: spin 2s linear infinite;
width: var(--loading-spinner-size);
height: var(--loading-spinner-size);
}
.external-tool-loading-spinner-path {
stroke: var(--color-primary);
stroke-linecap: round;
animation: stroke-path 1.5s ease-in-out infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes stroke-path {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
@media only screen and (max-width: 1400px) {
.external-tool-container {
--popup-height: 60vh;
--popup-width: 30vw;
--popup-height-large: 80vh;
--popup-width-large: 40vw;
}
}
@media only screen and (max-width: 799px) {
body {
font-size: 12px;
}
.external-tool-container {
--popup-height: 60vh;
--popup-width: 70vw;
--popup-height-large: 80vh;
--popup-width-large: 80vw;
}
}