/*--------------------------------------------------------------*/
/*-----------------------------Colors---------------------------*/
/*--------------------------------------------------------------*/

:root {
    --cbot-green: #a4cb68;
    --cbot-green-hover: #92c14b;
    --cbot-green-dark: #89b940;
    --cbot-green-light: #ecf7ec;
    --cbot-pink: #f69595;
    --cbot-pink-hover: #f37171;
    --cbot-pink-dark: #f04d4d;
    --cbot-pink-light: #feefef;
    --cbot-teal: #00b2c5;
    --cbot-gray: #a7aaac;
    --cbot-gray-light: #f8f8f8;
    --cbot-yellow-light: #fff8e1;
    --cbot-yellow: #fbc54c;
    --cbot-yellow-dark: #fcb25e;
    --cbot-blue: #408ff0;
    --cbot-blue-hover: #2e84ef;
    --cbot-blue-active: #2e84ef;
    --cbot-blue-dark-text: #0e56ae;
    --cbot-blue-dark: #05587c;
    --cbot-blue-darker: #0c4c9b;
    --cbot-orange: #e29c50;
    --cbot-purple: #b599c7;
    --cbot-red: #f37171;
    --cbot-form-border: #e4e7ea;
    --gradient-purple-blue: linear-gradient(135deg, #a6b8f3 0%, #bde2ed 100%);
    --gradient-orange-yellow: linear-gradient(135deg, #f0cba4 0%, #fcf2ca 100%);
    --gradient-orange-yellow-dark: linear-gradient(
        135deg,
        #e29c50 0%,
        #f8df7f 100%
    );
    --gradient-green-yellow: linear-gradient(135deg, #c7ead2 0%, #ecf7c1 100%);
    --gradient-purple-purple: linear-gradient(135deg, #9e9ee8 0%, #d9cdf7 100%);
    --gradient-purple-teal: linear-gradient(
        135deg,
        #705be1,
        #52d8c6
    ) !important;
    --gradient-blue-teal-dark: linear-gradient(
        135deg,
        rgb(106, 120, 209),
        rgb(0, 164, 189)
    );
    --gradient-blue-purple: linear-gradient(135deg, #4295cb 0%, #a6abf3 100%);
    --gradient-purple: linear-gradient(135deg, #987be6 0%, #367fe1 100%);
    --gradient-purple-2: linear-gradient(335deg, #987be6 0%, #367fe1 60%);
    --gradient-navy-blue: linear-gradient(135deg, #0880b5 0%, #079db5 100%);
    --gradient-navy-purple: linear-gradient(
        135deg,
        #1b71b1 0%,
        rgb(106, 120, 209) 100%
    );
    --gradient-orange: linear-gradient(225deg, #ffa378, #ff7878);
    --gradient-purple-teal: linear-gradient(35deg, #8842c7 0%, #4dc7df 100%);

    --gradient-blue-1: linear-gradient(35deg, #1b71b1 0%, #20a8d8 80%);
    --gradient-blue-2: linear-gradient(125deg, #1b71b1 0%, #20a8d8 80%);
    --gradient-blue-3: linear-gradient(215deg, #1b71b1 0%, #20a8d8 80%);
    --gradient-blue-4: linear-gradient(305deg, #1b71b1 0%, #20a8d8 80%);

    --gradient-purple-teal-dark-1: linear-gradient(
        35deg,
        #6064e9 0%,
        #43b9dd 100%
    );
    --gradient-purple-teal-dark-2: linear-gradient(
        125deg,
        #6064e9 0%,
        #43b9dd 100%
    );
    --gradient-purple-teal-dark-3: linear-gradient(
        215deg,
        #6064e9 0%,
        #43b9dd 100%
    );
    --gradient-purple-teal-dark-4: linear-gradient(
        305deg,
        #6064e9 0%,
        #43b9dd 100%
    );
    --gradient-navy-blue-1: linear-gradient(35deg, #0880b5 0%, #079db5 60%);
    --gradient-navy-blue-2: linear-gradient(125deg, #0880b5 0%, #079db5 60%);
    --gradient-navy-blue-3: linear-gradient(215deg, #0880b5 0%, #079db5 60%);
    --gradient-navy-blue-4: linear-gradient(305deg, #0880b5 0%, #079db5 60%);
    --gradient-teal-dark-1: linear-gradient(135deg, #0a7cd7 0%, #4ceccfe7 100%);
    --gradient-teal-dark-2: linear-gradient(
        135deg,
        #0a7cd7 40%,
        #4ceccfe7 100%
    );
    --gradient-blue-baby-blue: linear-gradient(
        135deg,
        #0e73c0 0%,
        #4dc7df 100%
    );
}

/*--------------------------------------------------------------*/
/*-------------------------Plugin Wizard------------------------*/
/*--------------------------------------------------------------*/

.plugin-details-setup-link {
    font-size: 16px;
    text-align: right;
}

/*--------------------------------------------------------------*/
/*-------------------------Overall Site-------------------------*/
/*--------------------------------------------------------------*/

body {
    overflow-y: scroll;
}

.header-fixed .app-body {
    overflow: auto;
}

.cb-plugin-wizard .wizard-install .number-step {
    background: var(--blue);
    padding: 3px 0px;
    border-radius: 25px;
    color: white;
    font-weight: 600;
    width: 38px;
    display: inline-block;
    height: 38px;
    margin-bottom: 5px;
    font-size: 24px;
    text-align: center;
    margin-right: 5px;
}

.plugin-coming-soon {
    display: inline-block;
    width: 135px;
    border: 1px solid #9a74ec;
    border-radius: 3px;
    margin: 10px 3px 20px 3px;
    font-size: 14px;
    padding: 5px;
    background: #f2edfd;
    color: #533765;
    text-align: center;
}

.cbot-wizard-template-info {
    margin: 10px auto 25px;
    padding: 9px;
    font-size: 18px;
    text-align: center;
    width: 100%;
    border: 1px solid #00b2c5;
    background: #e3effe;
    border-radius: 3px;
}

.number-step {
    background: var(--blue);
    padding: 3px 0px;
    border-radius: 18px;
    color: white;
    font-weight: 500;
    width: 25px;
    display: inline-block;
    height: 25px;
    margin-bottom: 5px;
    font-size: 15px;
    text-align: center;
    margin-right: 5px;
}

.cb-plugin-wizard .wizard-install .step {
    font-size: 22px;
}

.cb-plugin-wizard .wizard-install button.btn-show-optional.btn.btn-secondary {
    margin: 40px 0px 0px;
}

.step {
    font-weight: 500;
    display: inline-block;
    color: var(--cbot-blue-dark);
    font-size: 18px;
}

.step-detail {
    font-size: 18px;
    padding-bottom: 5px;
    color: #424242;
    cursor: default;
    margin-top: 8px;
    max-width: 940px;
}

.step-title {
    color: var(--cbot-blue-dark);
    font-size: 24px;
    margin-bottom: 35px;
    border-bottom: 1px solid #c8ced3;
}

.step-details {
    margin-top: 14px;
}

.step-details li {
    margin-top: 10px;
}

.form-control:disabled,
.form-control[readonly] {
    cursor: not-allowed;
}

.horizontal-with-text {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #a7aaac;
    line-height: 0.1em;
    margin: 60px 0px;
    color: #a7aaac;
}

.horizontal-with-text span {
    padding: 0 20px;
    background: #f4f8fc;
}

/*---Remove underline for text--*/
.app .cb-plugins a:hover,
.app .cb-learn a:hover {
    text-decoration: none;
}

.title-detail {
    clear: both;
    font-size: 20px;
    color: #5b5b5b;
    padding-bottom: 20px;
    min-height: 43px;
}

.cb-settings .title-detail {
    min-height: 0px;
    padding: 0px;
}

.viewPDF {
    text-align: right;
}

/* Change color of main background */
/* Lighter option: #fbfdff */
/* Another option: #f1f3f7 */
body {
    background-color: #f6f9fc !important;
}

.app-main-content {
    min-width: 1000px;
}

.app .main .container-fluid .fadeIn {
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
    width: 95%;
}

.app .main .container-fluid .fotoscript-editor.fadeIn {
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.cb-dashboard,
.cb-templates,
.cb-learn {
    margin: 25px 70px;
}

.screentitle-wrapper {
    margin-top: 35px;
}

.screentitle-wrapper::after {
    clear: both;
}

.screentitle-wrapper .fade:not(.show) {
    display: none;
}

.screen-title {
    font-size: 32px;
    color: #424242;
    float: left;
    height: 45px;
}

.setup-instructions {
    font-size: 18px;
    margin-top: 4px;
}

.title-detail .max-info {
    float: right;
    font-size: 18px;
    color: rgb(0, 0, 0, 0.8);
}

.title-description {
    width: 950px;
    display: inline-block;
}

.screen-subtitle {
    font-size: 28px;
    color: #424242;
    height: 45px;
    padding: 75px 0px 80px 0px;
    margin-bottom: 20px;
}

.screen-subtitle-info {
    font-size: 16px;
    text-align: left;
    margin: 5px 0px;
}

.app-main-content {
    clear: both;
    padding: 20px 0px 20px 0px;
}

.cb-global-counters .app-main-content,
.cb-global-webinar-configs .app-main-content {
    clear: both;
    padding: 0px 0px 20px 0px;
}

.helper-text.helper-text-no-tabs {
    padding: 30px 0px 10px 0px;
}

/*---Tooltip icon next to screen title on each page---*/
.screen-title i {
    margin-left: 10px;
    color: #a7aaac;
    opacity: 0.8;
    font-size: 26px;
}

.qs-platform-text {
    font-size: 18px;
    color: black;
    line-height: 1.7;
    min-height: 120px;
    max-width: 75%;
    margin-right: auto;
    margin-left: auto;
}

.qs-platform-version {
    font-size: 14px;
    color: black;
    line-height: 1.7;
    min-height: 35px;
    margin-right: 10px;
    margin-left: 10px;
}

.lab-platform-text {
    font-size: 14px;
    color: black;
    line-height: 1.7;
    margin-top: 10px;
    margin-bottom: 20px;
}

.lab-info-card .lab-button,
.qs-template-card .lab-button {
    color: #fff;
    background-color: var(--cbot-blue);
    border-color: var(--cbot-blue);
    font-size: 18px;
}

.cb-templates .lab-button:hover {
    color: #fff;
    background: var(--cbot-blue-hover);
    border-color: var(--cbot-blue-hover);
    font-size: 18px;
}

.lab-details {
    font-size: 18px;
    color: black;
    line-height: 1.7;
    margin-top: 10px;
    min-height: 200px;
    max-width: 75%;
    margin-right: auto;
    margin-left: auto;
}

/*--------------------------------------------------------------*/
/*-------------------------Tooltip------------------------------*/
/*--------------------------------------------------------------*/

body .tooltip {
    font-size: 16px;
}

body .tooltip .tooltip-inner {
    max-width: 280px;
}

body .tooltip-modal {
    cursor: pointer;
}

body .tooltip-modal:hover {
    color: var(--cbot-blue);
}

/*--------------------------------------------------------------*/
/*-------------------------Searchable Select--------------------*/
/*--------------------------------------------------------------*/

select.form-control {
    width: 100%;
    text-align-last: center;
}

/*
  correct alignment within modals
*/
.modal-dialog .modal-content .searchable-select {
    text-align: left;
}

.searchable-select {
    font-size: 16px;
}

.searchable-select__single-value {
    width: 100%;
}

.searchable-select__value-container.searchable-select__value-container--has-value {
    text-align: center;
    cursor: pointer;
}

.modal-dialog .modal-content .searchable-select--is-disabled {
    background-color: #e4e7ea;
    color: black;
    cursor: not-allowed;
}
/*--------------------------------------------------------------*/
/*---------------------------Error------------------------------*/
/*--------------------------------------------------------------*/

.global-error .fa-exclamation-circle {
    font-size: 100px;
    color: #ffd77f;
    display: block;
    padding-bottom: 20px;
}

.app.global-error .card-body .text-muted {
    font-size: 22px;
}

#root .global-error .container .card-group .card-body {
    padding: 0px 0px 20px 0px;
}

/*--------------------------------------------------------------*/
/*-----------------------Header with Branding-------------------*/
/*--------------------------------------------------------------*/

/*-----------For regular logo,   margin-left: -60px;-----------------*/
/*------------or regular logo,   margin-left: -25px------------------*/
/*-----Also update image width under container/DefaultHeader.js------*/
/*---------------------Image located in src/assets-------------------*/
.app-header .navbar-brand .navbar-brand-full {
    margin-left: 47px;
}

.app-header {
    /*--background: linear-gradient(135deg,#0780b5 0%,#00b2c5 100%); Original Darker-*/
    background: linear-gradient(160deg, #00b2c5 35%, #9a74ec 100%);
}

/*--------------------------------------------------------------*/
/*----------------------------Sidebar---------------------------*/
/*--------------------------------------------------------------*/

@media (min-width: 992px) {
    .sidebar-compact .app .sidebar .sidebar-nav {
        width: 165px;
    }
    .sidebar-compact .app .sidebar .nav {
        width: 165px;
    }
    .sidebar-compact .app .sidebar .nav-item {
        width: 165px;
    }
    .sidebar-fixed .app .sidebar {
        width: 165px;
    }
    .sidebar-compact.sidebar-fixed .app .sidebar {
        width: 165px;
    }
    html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .main {
        margin-left: 165px !important;
    }
}

@media (min-width: 992px) {
    .sidebar-compact .app .sidebar {
        flex: 0 0 165px;
    }
}

/*Change color of button for account on nav bar*/
/*Not working*/
.app .navbar-nav .btn-primary,
.app .show > .btn-primary.dropdown-toggle {
    color: #5b5b5b !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #187da0;
    font-size: 16px;
}

.btn-primary.disabled,
.btn-primary:disabled {
    cursor: not-allowed;
}

.app .app-header .navbar-brand {
    width: 200px;
}

/*Change color of button for account on nav bar on hover*/
/*Not working*/
.app .navbar-nav .btn-primary:hover {
    color: #5b5b5b;
    background: rgba(255, 255, 255);
    border-color: #187da0;
}

/*Change style of minimizer at bottom left*/
.sidebar .mt-auto {
    background-color: transparent !important;
}

.sidebar .mt-auto:hover {
    background-color: transparent !important;
}

.app .sidebar .nav li:nth-last-child(3) {
    flex: 2 0;
}

/* Navigation Sidebar Style */
/*Darker option: #f5faff*/
.app .sidebar {
    /*background: #032f44; -- dark*/
    background: #e3effe;
    font-size: 18px;
    border-right: 1px solid rgb(185, 220, 255);
    transition: none;
}

.sidebar-compact .app .sidebar .nav-link {
    color: var(--cbot-blue-darker);
    padding: 14px 7px 14px 13px;
    font-size: 14px;
    text-align: left;
}

.app .sidebar .nav-link i {
    font-size: 20px;
    margin: 0 0.75rem 0 0;
}

.app .sidebar .nav {
    padding: 0px;
}

.app .sidebar .nav-link:hover {
    /*color: #ffffff; -- darker*/
    color: var(--cbot-blue-dark);
    background: rgb(255, 255, 255, 0.25);
    border-right: 2px solid rgb(64, 143, 240, 0.4);
}

.app .sidebar .nav-link.active:hover {
    /*color: #ffffff; -- darker*/
    color: var(--cbot-blue-active);
    background: rgb(255, 255, 255, 0.25);
    border-right: 2px solid rgb(64, 143, 240, 0.7);
}

.app .sidebar .nav-link:hover .nav-icon {
    /*color: #ffffff; -- darker*/
    color: var(--cbot-blue-dark);
}

.app .sidebar .nav-link.active {
    background: rgb(255, 255, 255, 0.3);
    /*color: #f8fcff; -- darker*/
    color: var(--cbot-blue-active);
    font-weight: 600;
    border-right: 2px solid rgb(64, 143, 240, 0.75);
}

.nav-item,
.navbar-nav .nav-item .nav-link {
    color: #ffffff;
    font-weight: 500;
}

/*Change opacity of active item to have light background*/
.app .sidebar .nav-link.active {
    background: rgb(255, 255, 255, 0.45);
}

.app .sidebar .nav-link.active .nav-icon {
    /*color: #f8fcff; -- darker*/
    color: var(--cbot-blue-active);
}

/*Change icon color to white*/
.app .navbar-nav .nav-link {
    color: #f8fcff;
}

/*Chance icon color and font size*/
.app .sidebar .nav-link .nav-icon {
    /*color: #f8fcff; -- darker*/
    color: #4782cc;
    font-size: 18px !important;
    text-align: left;
}

/*Spin the Wheel icon*/
i.nav-icon.fas.fa-asterisk::before {
    border: 3px solid #4782cc;
    border-radius: 20px;
    margin-left: -3px;
}

@media (min-width: 992px) {
    .sidebar-compact .app .sidebar .nav-link .nav-icon {
        /*color: #f8fcff; -- darker*/
        display: inline-block;
        width: 30px;
    }
}

@media (min-width: 992px) {
    .app .sidebar-minimized .sidebar .nav-item:hover {
        border: 1px solid white;
        color: white;
    }
}

@media (min-width: 992px) {
    .app .sidebar-minimized .nav-link:hover,
    .app .sidebar-minimized .nav-link.active:hover {
        border: 1px solid #187da0;
        color: white;
    }
}

@media (min-width: 992px) {
    .sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon {
        color: #0780b5 !important;
    }
}

@media (min-width: 992px) {
    .sidebar-minimized .sidebar .nav-item:hover > .nav-link {
        background: #ebf4fe !important;
        box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.15);
    }
}

/*--------------------------------------------------------------*/
/*------------------------Primary Button------------------------*/
/*--------------------------------------------------------------*/

.btn.btn-primary {
    font-weight: 600;
    font-size: 16px;
}

.app .btn-primary.focus,
.app .btn-primary:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*--------------------------------------------------------------*/
/*------------------------Dashboard Page------------------------*/
/*--------------------------------------------------------------*/

.main .cb-dashboard .text-value {
    font-size: 24px;
    font-weight: 700;
}

.app .main .cb-dashboard {
    font-size: 14px;
    font-weight: 500;
}

/*--Change color of Card 1 Heading when suspended--*/
.main .cb-dashboard .dashboard-card-1.account-suspended {
    background: var(--gradient-orange);
}

/*--Change color of Card 1 Heading--*/
.main .dashboard-card-1.card,
.main .referral-card-1.card {
    background: var(--gradient-purple-teal-dark-1);
}

/*--Change color of Card 2 Heading--*/
.main .dashboard-card-2.card,
.main .referral-card-2.card {
    background: var(--gradient-purple-teal-dark-2);
    color: white;
}

/*--Change color of Card 3 Heading--*/
.main .dashboard-card-3.card,
.main .referral-card-3.card {
    background: var(--gradient-purple-teal-dark-3);
}

/*--Change color of Card 4 Heading--*/
.main .dashboard-card-4.card,
.main .referral-card-4.card {
    background: var(--gradient-purple-teal-dark-4);
}

/*--Change color of Updates Card Heading--*/
.main .cb-dashboard .updates .text-value,
.main .cb-dashboard .links .text-value,
.main .cb-dashboard .usage-chart .text-value {
    margin-top: -17px;
    margin-left: -21px;
    margin-right: -21px;
    background: var(--gradient-purple);
    padding: 15px 30px;
    color: white;
    border-radius: 3px;
    margin-bottom: 20px;
}

.main .cb-dashboard .chart .card-body {
    border-radius: 3px;
}

/*--Change style of bullets font in updates list--*/
.main .cb-dashboard .updates li,
.main .cb-dashboard .links li {
    font-size: 18px;
    padding: 10px 0px;
    font-weight: 400;
}

/*--Change style of bullets in updates list--*/
.main .cb-dashboard .updates ul,
.main .cb-dashboard .links ul {
    padding-inline-start: 30px;
    margin-top: 20px;
}

/*--Change color of date listed in bullets to blue--*/
.main .cb-dashboard .updates .main-detail,
.main .cb-dashboard .links .main-detail {
    color: var(--cbot-blue);
    font-weight: 600;
}

/*--Change style of icon in updates card--*/
.main .cb-dashboard .updates .fa,
.main .cb-dashboard .links .fas {
    float: right;
    font-size: 42px;
    opacity: 0.4;
    margin-top: -4px;
}

/*--Change style of icon in stats card--*/
.main .dashboard-card .dashboard-icon.fa,
.main .cb-coupon .dashboard-icon,
.main .referral-card .referral-icon.far,
.main .referral-card .referral-icon.fas,
.main .referral-card .referral-icon.fab {
    color: white;
    padding: 5px 10px;
    margin-right: 20px;
    float: left;
    font-size: 48px;
    opacity: 0.4;
}

/*---Min height for stats card--*/
.cb-dashboard .card-body {
    min-height: 84px;
    padding: 16px 20px;
    font-size: 16px;
}

.cb-settings .referral-card .card-body {
    min-height: 84px;
    padding: 16px 20px;
    font-size: 16px;
}

/*---Min height for chart card--*/
.cb-dashboard .chart,
.cb-dashboard .updates,
.cb-dashboard .usage-chart.card {
    min-height: 545px;
}

.cb-dashboard .usage-chart.card {
    padding-bottom: 40px;
}

/*---Min height for news and links card--*/
.cb-dashboard .updates {
    min-height: 290px;
}

.cb-dashboard .links {
    min-height: 625px;
}

/*---Change color of text in dashboard card---*/
.cb-dashboard .dashboard-card,
.cb-settings .referral-card {
    color: white;
}

/*--------------------------------------------------------------*/
/*--------------------------My Profile--------------------------*/
/*--------------------------------------------------------------*/

.my-profile .my-profile-card .profile-info {
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    width: 85px;
    margin-left: 20px;
}

.my-profile input.form-control {
    width: 475px;
    cursor: not-allowed;
    background: #f8f8f8;
}

.my-profile .social-logo-connect.btn {
    font-size: 18px;
    font-weight: 600;
    margin-top: -5px;
    color: white;
    background: #20a8d8;
    border-color: #20a8d8;
}

.my-profile .social-logo {
    margin-left: 40px;
    width: 400px;
    cursor: default;
}

.my-profile .social-logo img {
    width: 30px;
    margin-right: 15px;
}

.my-profile .social-login-status {
    padding: 5px 12px;
    border: 1px solid var(--cbot-green);
    background: var(--cbot-green);
    color: white;
    border-radius: 3px;
    margin: 0px 10px 0px 15px;
    font-weight: 600;
    cursor: default;
}

.my-profile button.fa.fa-close.btn.btn-secondary.btn.btn-secondary {
    background: white;
    color: #a7aaac;
    border: 2px solid var(--cbot-pink);
    border-radius: 18px;
    padding: 2px 6px;
    margin-left: 0px;
    margin-top: 2px;
    font-size: 14px;
}

/*--------------------------------------------------------------*/
/*--------------------------Main Button-------------------------*/
/*--------------------------------------------------------------*/

.app-main-content .cbot-button-main {
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 18px;
    float: left;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
}

.app-main-content .cbot-button-main,
.cb-settings .btn-run-report,
.cb-settings .btn-billing-portal,
.modal .btn-secondary {
    margin: 0px 5px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 18px;
    float: right;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
    margin-bottom: 25px;
}

.app-main-content .cbot-button-main:hover,
.cb-settings .btn-run-report:hover,
.cb-settings .btn-billing-portal:hover,
.modal .btn-secondary:hover {
    background: var(--cbot-blue-hover);
    color: white;
}

.cb-settings .create-key-options:hover,
.cb-settings .btn-run-report:hover,
.cb-settings .btn-billing-portal:hover,
.modal .btn-secondary:hover {
    background: #2e74ef;
    color: white;
}

.app-main-content .cbot-button-main:active,
.cb-settings .btn-run-report:active,
.cb-settings .btn-billing-portal:active,
body .btn-secondary:not(:disabled):not(.disabled):active {
    background: var(--cbot-blue-active);
    border: 1px solid var(--cbot-blue-active);
    color: white;
}

.cb-settings .btn-run-report-wrapper {
    margin-top: 25px;
}

.cb-settings .start-date-dropdown,
.cb-settings .end-date-dropdown {
    width: 200px;
    text-align: center;
    border: 1px solid var(--cbot-gray);
    background: rgb(185, 220, 255, 0.2) !important;
    display: inline-block;
    margin-left: 10px;
}

.cb-settings .report-start-date {
    display: inline-block;
}

.cb-settings .report-end-date {
    float: right;
}

/*----Formatting feature list---*/
.cb-settings .feature-label {
    padding-left: 40px;
    display: inline-block;
    width: 85%;
    line-height: 1.85;
}

.cb-settings .feature-count {
    display: inline-block;
    width: 12%;
    line-height: 1.85;
    text-align: right;
}

.cb-settings .feature:nth-child(odd) {
    background: rgb(185, 220, 255, 0.2);
}

/*-----Button to add new ---*/
.main .app-main-content .main-list-add-btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 5px 30px;
    font-size: 18px;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
    margin-left: 5px;
}

/*-----Button to add new in active state---*/
.app .main .app-main-content .btn-secondary.main-list-add-btn:active {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 5px 30px;
    font-size: 18px;
    background: #1c68ee;
    border: 1px solid #1c68ee;
}

/*-----Button to add new counter---*/
.main-list-add-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
    color: white;
}

.main .app-main-content .main-list-add-btn:hover {
    background: #2e74ef;
    color: white;
}

.app .card {
    border: 0px;
    margin-bottom: 1.5rem;
    margin-top: 0rem;
    border: 1px solid #c8ced3;
}

.app .dashboard-card {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}

.main .switch-primary .switch-input:checked + .switch-slider {
    background-color: var(--cbot-green-dark);
    border-color: #708d30;
}

.main .switch-primary .switch-input:checked + .switch-slider::before {
    border-color: #708d30;
}

/*--------------------------------------------------------------*/
/*---------------------New Tab Instructions---------------------*/
/*--------------------------------------------------------------*/

.image-new-tab-screenshot img {
    border: 1px solid #dfdfdf;
}

/*--------------------------------------------------------------*/
/*------------------------Refer a Friend------------------------*/
/*--------------------------------------------------------------*/

.cb-settings .refer-a-friend .feature-label {
    line-height: 2.5;
    width: 60%;
}

.cb-settings .refer-a-friend #category {
    width: 200px;
    float: left;
    margin-bottom: 10px;
}

.cb-settings .refer-a-friend .switch-slider {
    margin-top: 7px;
}

.cb-settings .refer-a-friend .more-history-btn {
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 8px 30px;
    font-size: 18px;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
    float: right;
    width: 405px;
}

.cb-settings .refer-a-friend .referral-sign-up-btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 12px 30px;
    font-size: 20px;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
    margin-right: auto;
    margin-left: auto;
    width: 445px;
}

.cb-settings .refer-sign-up-details {
    text-align: center;
    font-size: 20px;
    margin-bottom: 24px;
}

.cb-settings .refer-sign-up-disclaimer {
    font-size: 16px;
    text-align: center;
    margin-bottom: 75px;
    margin-top: 50px;
}

.cb-settings .refer-sign-up-points-worth {
    font-size: 16px;
    text-align: center;
    margin: 20px 0px;
}

.cb-settings .refer-a-friend .btn-wrapper {
    text-align: center;
    padding: 25px 0px 40px 0px;
}

.cb-settings .refer-sign-up-details .card-body {
    min-height: 20px;
}

.cb-settings .refer-details {
    text-align: center;
}

.cb-settings .refer-a-friend img {
    width: 125px;
}

.cb-settings .refer-a-friend .refer-sign-up .card-heading {
    text-align: center;
    margin: 10px 0px 20px 0px;
    font-size: 20px;
    font-weight: 600;
    color: var(--cbot-blue-dark);
    border-bottom: 0px;
    padding-bottom: 0px;
}

.cb-settings .refer-a-friend .refer-sign-up .card-details {
    font-size: 18px;
    text-align: center;
    color: black;
    padding-top: 5px;
}

.refer-a-friend .refer-sign-up .image-icon {
    text-align: center;
}

.cb-settings .refer-a-friend .feature-count {
    width: 40%;
    padding-right: 35px;
}

.cb-settings .refer-sign-up .card-body {
    min-height: 325px;
    padding: 22px 25px;
}

.cb-settings .refer-a-friend-title {
    font-size: 20px;
    color: var(--cbot-blue-dark);
}

.refer-a-friend .info-options .card-body {
    min-height: 375px;
}

.refer-a-friend .referral-card .text-value {
    font-size: 20px;
    margin-top: 3px;
}

/*--------------------------------------------------------------*/
/*------------------------Global Counter------------------------*/
/*--------------------------------------------------------------*/

.main .app-main-content .add-btn-wrapper {
    text-align: right;
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    min-height: 36px;
}

.cb-user-library .add-btn-wrapper {
    text-align: left;
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
}

.counter-form-label {
    width: 28%;
    text-align: left;
    float: left;
    clear: both;
    margin-bottom: 15px;
    padding: 10px 0px;
    font-size: 18px;
}

.counter-form-input {
    width: 70%;
    float: left;
}

.counter-form-input input[type="text"] {
    width: 400px;
    padding: 8px 5px;
    float: left;
    border: 1px solid #a7aaac;
    border-radius: 3px;
    text-align: center;
    min-height: 40px;
    font-size: 18px;
}

.counter-form-input input:focus {
    outline: none;
    border: 1px solid var(--cbot-teal);
    box-shadow: none;
}

.counter-form-row {
    margin-top: 10px;
}

/*---
button.bp3-button {
    background: var(--cbot-teal);
    border: white 1px solid;
    font-size: 11px;
    border-radius: 12px;
    padding: 2px 5px;
}

.bp3-input-group {
    float: left;
}

.bp3-button-group.bp3-vertical.bp3-fixed {
    width: 20px;
    float: left;
    margin-left: 8px;
}

--*/

/*----Change color of chevron---*/
.bp3-icon svg {
    fill: white;
}

.bp3-input:focus,
.bp3-input.bp3-active {
    box-shadow: none !important;
    border: 1px solid var(--cbot-teal);
}

/*--
.counter-form-input input:read-only {
    background: #e4e7ea;
    cursor: not-allowed;
    border: 1px solid #a7aaac;
}

/*--------------------------------------------------------------*/
/*--------------------------Webinar Event-----------------------*/
/*--------------------------------------------------------------*/

.cb-global-webinar-events i.fas.fa-envelope {
    margin-left: 3px;
    margin-right: 3px;
}

.cb-global-webinar-events i.fas.fa-envelope.reminder-error {
    color: var(--cbot-red);
}

.cb-global-webinar-events i.fas.fa-envelope.reminder-off {
    color: var(--cbot-gray);
}

.cb-global-webinar-events i.fas.fa-envelope.reminder-sent-partial {
    color: var(--cbot-orange);
}

.cb-global-webinar-events i.fas.fa-envelope.reminder-sent-complete {
    color: var(--cbot-green);
}

.cb-global-webinar-events i.fas.fa-envelope.reminder-scheduled {
    color: var(--cbot-blue);
}

.cb-global-webinar-events .add-btn-wrapper button {
    margin-left: 3px;
    margin-right: 3px;
}

.cb-global-webinar-events .add-btn-wrapper .events-filter {
    display: inline-block;
    width: 120px;
    margin-left: 3px;
}

.cb-global-webinar-events .add-btn-wrapper .gallery-navigation {
    float: left;
    margin-left: 0px;
    margin-right: 3px;
}

/*--------------------------------------------------------------*/
/*--------------------------Login Page--------------------------*/
/*--------------------------------------------------------------*/

.app.login-page .button-row .btn-facebook {
    max-width: 400px;
    width: 100%;
    background: #4267b2;
    padding: 6px 5px;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.app.login-page .button-row .btn-magic-link {
    max-width: 400px;
    width: 100%;
    background: var(--cbot-teal);
    border: var(--cbot-teal);
    height: 49px;
    padding: 6px 5px;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.app.login-page .button-row .btn-facebook .fb-logo,
.app.login-page .button-row .btn-magic-link .magic-link-logo {
    float: left;
}

.app.login-page .button-row .btn-magic-link .magic-link-text {
    vertical-align: middle;
    padding-top: 5px;
    margin-right: 10px;
}

.app.login-page .button-row .btn-facebook .fb-login-text {
    vertical-align: middle;
    padding-top: 5px;
}

.app.login-page .button-row .btn-facebook img {
    max-width: 35px;
}

.app.login-page .button-row .btn-magic-link .magic-link-logo i {
    margin-left: 10px;
    font-size: 25px;
    margin-top: 4px;
}

/*----Logo on Login Page--*/
.cbot-logo {
    position: fixed;
    top: 35px;
    left: 35px;
}

/*--Background color--*/
html body .app.login-page {
    background: linear-gradient(135deg, #00b2c5 0%, #0780b5 100%);
}

.app.login-page .form-control {
    font-size: 18px;
    height: 49px;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.app.login-page .input-group-text {
    font-size: 18px;
}

.app.login-page .text-muted {
    font-size: 18px;
}

.app.login-page .btn-primary {
    font-size: 18px;
    font-weight: 600;
}

.app.login-page .justify-content-center {
    margin-bottom: 100px;
}

.app.login-page .login-loader {
    min-height: 5px;
}

.app.login-page .error-message {
    min-height: 50px;
}

.app.login-page .card-body {
    padding: 20px 30px 60px 30px;
    text-align: center;
}

.app.login-page .button-row {
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    width: 100%;
}

.app.login-page h1 {
    margin-bottom: 45px;
}

.app.login-page .additional-text,
.app.login-page .additional-text a,
.app.login-page .additional-text a:hover {
    text-align: center;
    color: white;
    margin-top: 10px;
    font-size: 18px;
}

.app.login-page .alert-danger {
    color: white;
    background-color: var(--cbot-red);
    border-color: var(--cbot-red);
    font-weight: 600;
    font-size: 16px;
    padding: 7px;
    margin-bottom: 0px;
}

.app.login-page .alert-success {
    color: white;
    background-color: var(--cbot-green-dark);
    border-color: var(--cbot-green-dark);
    font-weight: 600;
    font-size: 16px;
    padding: 7px;
    margin-bottom: 0px;
    -webkit-animation: wiggle-small 3s linear 1;
    animation: wiggle-small 3s linear 1;
}

.app.login-page .row.login-tooltip {
    font-size: 16px;
    text-align: left;
    display: block;
}

.app.login-page .row.login-tooltip.more-help {
    text-align: center;
    margin-top: 20px;
}

/*--------------------------------------------------------------*/
/*-------------------------Settings Page------------------------*/
/*--------------------------------------------------------------*/

.cb-settings .card-body {
    min-height: 350px;
    padding: 22px 25px;
}

.cb-settings .app-main-content .card-heading .fa.fa-plus-circle {
    color: white;
    font-size: 16px;
    opacity: 1;
    margin-right: 5px;
}

/*---Generate Report Button--*/
.cb-settings .report-wait {
    text-align: center;
    background: var(--cbot-blue);
    padding: 4px;
    font-weight: 600;
    border-radius: 3px;
    color: white;
}

.cb-settings .report-wait .fa {
    margin-right: 4px;
}

/*---Animate Download Button when Report Ready--*/
.cb-settings .btn-download-report {
    -webkit-animation: wiggle 3s linear 1;
    animation: wiggle 3s linear 1;
    border: 1px solid var(--cbot-green-hover) !important;
    background: var(--cbot-green-hover) !important;
    font-weight: 600 !important;
    color: white;
}

/*---Green Button Hover Over for download report---*/
.cb-settings .btn-download-report:hover {
    background: var(--cbot-green-dark);
    color: white;
}

.cb-settings .app-main-content .card-heading .fa,
.cb-settings .app-main-content .card-heading .far,
.cb-settings .app-main-content .card-heading .fas {
    color: var(--cbot-blue);
    margin-right: 10px;
    font-size: 26px;
    opacity: 0.8;
}

.main .cb-settings .card-details {
    padding-top: 20px;
    font-size: 18px;
}

.main .cb-settings .card-details-error {
    font-size: 18px;
    font-weight: 600;
    border: 1px solid var(--cbot-red);
    background: #ffffff;
    text-align: center;
    width: 625px;
    color: #424242;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    padding: 20px;
}

.main .cb-settings .card-details .card-text {
    margin-bottom: 50px;
}

.main .cb-settings .info-options .card-details {
    padding-bottom: 20px;
    cursor: default;
}

.cb-settings .card-heading {
    font-size: 22px;
    font-weight: 600;
}

.cb-settings .card-heading-detail {
    font-size: 14px;
    color: #898d8f;
}

.cb-settings .card-heading {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 10px;
}

.cb-settings .info-options .card-heading {
    margin-bottom: 20px;
}

/*----Change to access key button when user already used up their max---*/
.app-main-content .cbot-button-main:disabled,
.app-main-content .cbot-button-main:disabled:hover {
    background: #adc9f9;
    border: 1px solid #adc9f9;
    cursor: not-allowed;
    color: white;
}

.info-options .card-body {
    min-height: 350px;
}

/*--------------------------------------------------------------*/
/*-------------------------App Message--------------------------*/
/*--------------------------------------------------------------*/

.screentitle-wrapper .app-message {
    float: right;
    font-size: 18px;
    width: 650px;
    text-align: center;
    padding: 10px 5px;
    border-radius: 3px;
    color: white;
    font-weight: 700;
    position: fixed;
    top: 90px;
    right: 50px;
    z-index: 100;
    box-shadow: 5px 5px 18px 3px rgba(0, 0, 0, 0.18);
}

/* override toast width */
.Toastify__toast-container.Toastify__toast-container--top-right {
    width: 380px;
}

.app-message {
    font-size: 17px;
}

.app-message.red {
    background: var(--gradient-orange);
    border: 1px solid var(--cbot-pink);
    color: white;
}

.app-message.green {
    background: var(--cbot-green);
    border: 1px solid var(--cbot-green-dark);
    color: white;
}

.app-message.yellow {
    background: var(--cbot-yellow);
    border: 1px solid var(--cbot-yellow-dark);
}

/*--Closing Button for app message--*/
.app-message .fa.fa-close {
    float: right;
    margin-right: 10px;
    padding: 4px 6px;
    color: var(--gray);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 11px;
}

/*--------------------------------------------------------------*/
/*------------------------Add Admin Config------------------------*/
/*--------------------------------------------------------------*/

.adminconfig-form-label {
    text-align: left;
    margin-bottom: 5px;
}

.modal-dialog.add-admin .modal-body {
    padding-top: 25px;
}

.adminconfig-form-input {
    width: 90%;
    display: inline-block;
}

.adminconfig-form-label {
    text-align: left;
    margin-bottom: 5px;
    width: 10%;
    display: inline-block;
}

/*--------------------------------------------------------------*/
/*------------------------Add Bot Config------------------------*/
/*--------------------------------------------------------------*/

.botconfig-form-input {
    width: 67%;
    display: inline-block;
    vertical-align: middle;
}

.botconfig-form-label {
    width: 24%;
    margin-right: 8px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    padding-top: 17px;
}

.test-integration-add-bot button.btn.btn-secondary {
    float: right;
}

.botconfig-form-row.test-integration-add-bot {
    padding-bottom: 50px;
}

/*--------------------------------------------------------------*/
/*-------------------------Loading Icon-------------------------*/
/*--------------------------------------------------------------*/

.app .center-panel-loading {
    clear: both;
    justify-content: center;
    vertical-align: middle;
    min-height: 100px;
    padding-top: 30vh;
}

.app .cb-user-library .center-panel-loading {
    background: #f8f8f8;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    padding: 30vh 0px;
}

.app .config-right-panel .center-panel-loading {
    clear: both;
    justify-content: center;
    vertical-align: middle;
    min-height: 100px;
    width: 955px;
    height: 500px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #a7aaac;
    margin-left: auto;
    margin-right: auto;
    padding-top: 200px;
}

.app .subtle-loader {
    clear: both;
    text-align: right;
    display: inline-block;
    width: 25%;
    margin-left: auto;
    margin-right: auto;
}

.subtle-loader > div,
.subtle-loader > div > div {
    width: 30px;
    height: 30px;
    float: right;
}

/*--------------------------------------------------------------------*/
/*------------------------FotoScript Libary Page----------------------*/
/*--------------------------------------------------------------------*/

.cb-library .cb-libcard-menu,
.cb-library .cb-libcard-menu:hover,
.show > .cb-libcard-menu.btn-secondary.dropdown-toggle,
.show > .cb-libcard-menu.btn-secondary.dropdown-toggle:focus,
.cb-library .cb-libcard-menu:not(:disabled):not(.disabled):active {
    background: rgba(255, 255, 255, 0.9);
    color: var(--cbot-blue-dark);
    border: none;
    box-shadow: none;
    margin-top: -15px;
    margin-right: -15px;
    border: none;
}

.cb-libcard .cb-cardimg {
    max-height: 157px;
    max-width: 300px;
    cursor: pointer;
    border-radius: 3px 3px 0px 0px;
}

.highlighted.warning,
.warning-message {
    border: 2px solid var(--cbot-red);
    padding: 10px;
    color: #930c0c;
    font-size: 16px;
    text-align: center;
    margin-bottom: 5px;
}

/*-----Button to add new counter---*/
.cb-library .main-list-add-btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 5px 30px;
    font-size: 18px;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
}

.cb-library .add-btn-wrapper {
    text-align: right;
    max-width: 1445px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
}

.cb-library .add-btn-wrapper .form-control {
    width: 224px;
    display: inline-block;
    font-size: 18px;
}

.cb-library .category-label {
    padding-right: 5px;
    font-size: 18px;
    float: left;
    margin-top: 6px;
}

.cb-library #category {
    float: left;
}

/*Need to change div under cb-libcard to display block
//<div class="cb-libcard card">
//<div style="display: block;justify-content: center;"
//Adjust breakpoint*/
.cb-libcard .cb-cardimg-wrapper {
    display: block;
    justify-content: center;
}

@media (min-width: 1444px) {
    .cb-libcard .cb-cardimg-wrapper {
        min-height: 157px;
    }
}

.cb-libcard {
    background-color: #f8f8f8;
    min-height: 145px;
    max-width: 300px;
    margin: auto;
}

.cb-libcard .card-header {
    background-color: #f8f8f8;
    border: none;
}

/*--------------------------------------------------------------*/
/*----------------------User Library Page-----------------------*/
/*--------------------------------------------------------------*/

.cb-btn-dgd-refresh {
    margin-right: 5px;
    padding: 9px;
    color: #6c7071;
    background-color: #f8f8f8;
    border: 2px rgba(166, 101, 202, 0.7) solid;
    border-radius: 20px;
    font-size: 15px;
}

.cb-btn-dgd-refresh:hover {
    color: #464849;
    border: 2px rgba(166, 101, 202, 1) solid;
}

.cb-btn-dgd-edit {
    margin-right: 5px;
    padding: 8px;
    color: #6c7071;
    background-color: #f8f8f8;
    border: 2px rgba(7, 128, 181, 0.7) solid;
    border-radius: 20px;
}

.cb-btn-dgd-edit:hover {
    color: #464849;
    border: 2px rgba(7, 128, 181, 1) solid;
}

.cb-btn-dgd-copy,
.cb-btn-dgd-view {
    margin-right: 5px;
    padding: 8px;
    color: #6c7071;
    background-color: #f8f8f8;
    border: 2px rgba(164, 203, 104, 0.8) solid;
    border-radius: 20px;
}

.cb-btn-dgd-copy:hover {
    color: #464849;
    border: 2px rgba(164, 203, 104, 1) solid;
}

.cb-btn-dgd-copy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cb-btn-dgd-delete {
    margin-right: 5px;
    padding: 8px 10px;
    color: #6c7071;
    background-color: #f8f8f8;
    border: 2px rgba(246, 149, 149, 0.6) solid;
    border-radius: 20px;
}

.cb-btn-dgd-delete:hover {
    color: #464849;
    border: 2px rgba(246, 149, 149, 1) solid;
}

.cb-global-webinar-events .webinar-event-id {
    margin-left: 28px;
}

/*--------------------------------------------------------------*/
/*------------------------Template Page-------------------------*/
/*--------------------------------------------------------------*/

/*----Overide hover underline text---*/
.cb-templates a:hover {
    cursor: pointer;
    text-decoration: none;
    color: #106ba3;
}

/*-----------------Instructions for Platform--------------------*/
.qs-logo-image {
    max-width: 150px;
}

.lab-logo-image {
    max-width: 180px;
    margin-bottom: 10px;
}

.qs-template-wrapper {
    text-align: center;
    font-size: 22px;
    padding: 20px 0px;
}

.qs-template-card,
.lab-info-card {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}

.ptemplate-wrapper,
.ptemplate-warning-wrapper {
    background: white;
    margin: 40px 0px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    padding: 35px 50px 50px 35px;
}

.ptemplate-warning-wrapper {
    padding: 45px 50px 45px 35px;
}

.ptemplate-warning-wrapper .ptemplate-content-wrapper {
    float: none;
    text-align: center;
    width: 100%;
}

.ptemplate-links .not-applicable {
    margin-left: 5px;
}

.ptemplate-warning-wrapper .ptemplate-text {
    font-size: 20px;
    margin: 20px 0px 20px 0px;
}

.ptemplate-title .fa-exclamation-triangle,
.cb-settings .fa-exclamation-triangle {
    color: var(--cbot-red);
    font-size: 28px;
}

.ptemplate-wrapper.chatfuel-template {
    border: rgba(7, 128, 181) 2px solid;
    border-radius: 5px;
}

.ptemplate-image-wrapper {
    width: 18%;
    display: inline-block;
}

.ptemplate-image-wrapper img {
    width: 100%;
}

.ptemplate-content-wrapper {
    float: right;
    width: 78%;
}

.ptemplate-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--cbot-blue-dark);
}

.ptemplate-text {
    font-size: 18px;
    margin: 10px 0px 20px 0px;
    line-height: 1.7;
}

.ptemplate-links {
    font-size: 18px;
}

.ptemplate-links a,
.template-urls .coming-soon {
    margin: 0px 50px 0px 20px;
    color: var(--cbot-blue);
}

.template-page-note {
    text-align: center;
    font-size: 18px;
}

/*--------------------------------------------------------------*/
/*-----------------------FotoBot Library------------------------*/
/*--------------------------------------------------------------*/

/* Change template card style */
/*Change color of card footer to white*/
.main .cb-library .card-footer {
    background-color: #ffffff;
}

.main .cb-library .cb-libcard-menu {
    padding: 0.15rem 0.4rem;
    font-size: 18px;
}

.main .cb-libcard .btn-group > .btn-group:not(:last-child) > .btn,
.main .cb-libcard .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: 15px;
}

.cb-library .cb-libcard.card {
    cursor: pointer;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}

.cb-library .cb-libcard.card:hover {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
}

/*--------------------------------------------------------------*/
/*---------------------FotoBot Editor Details-------------------*/
/*--------------------------------------------------------------*/

.fotobot-instruction-wrapper .output-title {
    font-weight: 600;
    font-size: 15px;
}

.config-container .config-left-panel .nav-item,
.config-container .config-left-panel .navbar-nav .nav-item .nav-link {
    width: 20%;
    text-align: center;
    font-size: 15px;
    color: #424242;
}

.config-container .config-left-panel .collapse {
    min-height: 705px;
}

/*----Fix transition on editor when toggling between textbox---*/
.config-container .config-left-panel .collapsing {
    -webkit-transition: fadeInSlow 0.5s ease !important;
    transition: fadeInSlow 0.5s !important;
}

.config-container .config-left-panel .card-body {
    padding: 0px;
}

/*--------------------------------------------------------------*/
/*------------------------FotoBot Format------------------------*/
/*--------------------------------------------------------------*/

.fotobot-instruction-wrapper .invalid-feedback {
    font-size: 14px;
}

.fotobot-instruction-wrapper .ruleblocks-wrapper .card {
    border: 1px solid #c8ced3;
}

.fotobot-instruction-wrapper
    .ruleblocks-wrapper
    .config-fallback
    .fa-arrows-alt {
    color: rgb(0, 0, 0, 0.3);
}

#config-container
    .fotobot-instruction-wrapper
    .ruleblocks-wrapper
    .text-input:first-child {
    background: #e0ddfc;
    margin-bottom: 15px;
    padding-bottom: 10px;
    padding: 10px 15px 10px 15px;
    font-weight: 600;
}

#config-container
    .fotobot-instruction-wrapper
    .ruleblocks-wrapper
    .text-input:first-child
    .config-fallback {
    width: 245px;
    margin-top: 7px;
    cursor: grab;
    font-weight: 600;
}

#config-container
    .fotobot-instruction-wrapper
    .ruleblocks-wrapper
    .text-input:first-child
    .config-fallback:focus {
    outline: none;
}

.fotobot-instruction-wrapper .ruleblocks-wrapper .card .text-input {
    padding: 2px 15px;
}

.fotobot-instruction-wrapper .ruleblocks-wrapper .card .text-input:last-child {
    padding-bottom: 25px;
}

.fotobot-instruction-wrapper .add-gallery-button {
    margin-bottom: 10px;
    width: 100%;
    font-size: 16px;
}

/*--------------------------------------------------------------*/
/*------------------------------Text Style----------------------*/
/*--------------------------------------------------------------*/

/*--Change style of focus for all buttons--*/
button.bp3-button:focus,
.config-container .config-left-panel input:focus {
    outline: none;
    border: 1px solid var(--cbot-teal);
}

.app .main .btn-secondary.btn:focus,
.app .main .btn-secondary.btn:focus:active,
.app .main button:focus,
.app .main button:focus:active {
    box-shadow: none;
    outline: none;
}

/*--Set icon transparency--*/
.config-container .config-left-panel svg {
    background: transparent;
}

.config-container .config-left-panel .bp3-icon-align-left,
.config-container .config-left-panel .bp3-icon-align-center {
    border-right: 1px solid var(--cbot-form-border);
}

.config-container .config-left-panel .bp3-icon-bold {
    border-right: 1px solid var(--cbot-form-border);
}

.config-container .config-left-panel .bp3-icon-align-left,
.config-container .config-left-panel .bp3-icon-align-center,
.config-container .config-left-panel .bp3-icon-align-right {
    padding: 8px 16px;
}

.config-container .config-left-panel .align-top,
.config-container .config-left-panel .align-middle,
.config-container .config-left-panel .align-bottom {
    padding: 4px 10px;
}

.config-container .config-left-panel .bp3-icon-bold,
.config-container .config-left-panel .bp3-icon-italic {
    padding: 8px 16px 8px 16px;
    box-shadow: none;
}

.config-container .config-left-panel .bp3-icon-bold.disabled,
.config-container .config-left-panel .bp3-icon-italic.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.config-container .config-left-panel .textAlign-btn-wrapper,
.config-container .config-left-panel .vAlign-btn-wrapper {
    width: 150px;
    border: 1px solid var(--cbot-form-border);
    text-align: center;
    border-radius: 3px;
    height: 34px;
    float: left;
    cursor: pointer;
    margin-right: 10px;
}

.text-weight-style-wrapper {
    width: 100px;
    border: 1px solid var(--cbot-form-border);
    text-align: center;
    border-radius: 3px;
    height: 34px;
    float: left;
    cursor: pointer;
}

/*---Change numeric inputs width---*/
.config-container .config-left-panel .bp3-numeric-input .bp3-input-group {
    width: 50px;
}

.config-container .config-left-panel input.bp3-input {
    height: 32px;
}

.config-container .config-left-panel .bp3-numeric-input {
    margin-bottom: 10px;
}

/*---Change color fill of icons for styles options--*/
.config-container .config-left-panel .bp3-icon path {
    fill: #05587c;
}

.bp3-icon.active,
.material-icons.active {
    background: #f8f8f8;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2) inset;
}

.config-container .config-left-panel button.bp3-button {
    background: white;
    max-width: 24px;
}

span.bp3-icon:hover {
    background: transparent;
}

.cb-font-btns-row {
    clear: both;
}

/*----Temp hidden while rotation isn't controlled by user--*/
.text-rotation-wrapper .bp3-vertical {
    visibility: hidden;
}

/*----Temp change color text while rotation isn't controlled by user--*/
.text-rotation-wrapper .bp3-input:disabled {
    color: #424242;
    width: 90px;
}

.cb-font-btns-row.row1 {
    margin-top: 25px;
}

.cb-font-btns-row {
    margin-bottom: 15px;
    min-height: 32px;
}

.cb-font-btns-row.row5 {
    margin-bottom: 40px;
}

.cb-font-btns-row.row2 .bp3-numeric-input.bp3-control-group {
    float: left;
    margin-right: 10px;
}

/*---Spacing between rotation and line height---*/
.text-rotation-wrapper,
.text-lineHeight-wrapper {
    margin-right: 30px;
    float: left;
}

input.bp3-input:disabled {
    background: #f8f8f8;
}

span.bp3-icon:hover {
    background: #f8f8f8;
}

button.bp3-button.bp3-disabled {
    border: 1px solid var(--cbot-form-border);
}

input.bp3-input {
    border: 1px solid var(--cbot-form-border);
    box-shadow: none;
    font-size: 16px;
}

/*---Change font-size for label for rotation, line height and opacity--*/
.font-ctl-label {
    font-size: 15px;
    padding-bottom: 2px;
}

/*--------------------------------------------------------------*/
/*---------------------------Font Picker------------------------*/
/*--------------------------------------------------------------*/

.config-container .config-left-panel .ReactFontPicker_Options {
    height: 200px;
    -webkit-transition: 0.2s all ease-in-out;
    -moz-transition: 0.2s all ease-in-out;
    -ms-transition: 0.2s all ease-in-out;
    -o-transition: 0.2s all ease-in-out;
    transition: 0.2s all ease-in-out;
    line-height: 34px;
}

.config-container .config-left-panel .ReactFontPicker_Options,
.config-container .config-left-panel .ReactFontPicker_OptionsHidden {
    top: 36px;
    font-size: 18px;
}

.config-container .config-left-panel .ReactFontPicker_Option {
    width: 100%;
    height: 34px;
    line-height: 34px;
}

.ReactFontPicker_Wrapper {
    border-radius: 3px;
    border: 1px solid var(--cbot-form-border);
}

.config-left-panel .ReactFontPicker .ReactFontPicker_SelectedOption {
    height: 32px !important;
    line-height: 20px !important;
    padding: 5px 10px;
    font-size: 18px;
}

.ReactFontPicker_Button {
    right: 10px !important;
    border-width: 8px 8px 0px 8px !important;
    border-color: #a7aaac transparent transparent transparent !important;
}

/*--------------------------------------------------------------*/
/*---------------------------Color Picker-----------------------*/
/*--------------------------------------------------------------*/

.color-swatch-value {
    border: 1px solid #a7aaac;
    height: 22px !important;
    width: 46px !important;
}

/*----------------------------------------------------------------*/
/*----------------------Modal for Plugin Help---------------------*/
/*------------------------under development-----------------------*/
/*----------------------------------------------------------------*/

.cb-plugin-help .card-heading {
    text-align: center;
    margin: 10px 0px 20px 0px;
    font-size: 20px;
    font-weight: 500;
    color: var(--cbot-blue-dark);
}

.cb-plugin-help .card {
    padding: 10px 20px 0px 20px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    min-height: 250px;
    border-radius: 15px;
}

/*--------------------------------------------------------------*/
/*----------------------Modal for Delete & Replace--------------*/
/*--------------------------------------------------------------*/

body .modal-dialog.delete,
body .modal-dialog.replace {
    max-width: 500px;
}

body .modal-dialog.delete .modal-body,
body .modal-dialog.replace .modal-body {
    padding: 20px;
    min-height: 150px;
}

/*--------------------------------------------------------------*/
/*---------------------React Table Styling----------------------*/
/*--------------------------------------------------------------*/

/*----Update style of no interactions----*/

.main .ReactTable .rt-noData {
    top: 30vh;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid var(--cbot-red);
    background: #ffffff;
    text-align: center;
    width: 775px;
    color: #424242;
}

.main .ReactTable .btn-clipboard {
    margin-right: 5px;
    padding: 5px;
    color: #6c7071;
    background-color: white;
    border: 1px rgba(186, 194, 198, 0.7) solid;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 5px;
}

.main .cb-settings .ReactTable .rt-noData {
    top: 15vh;
}

/* Update style of table */
.ReactTable {
    border: none !important;
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
}

.ReactTable .cell-name {
    cursor: pointer;
}

.ReactTable .cell-name:hover {
    cursor: pointer;
    color: var(--cbot-blue-dark);
}

.ReactTable .rt-table {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}

.main .ReactTable.-striped .rt-tr.-odd {
    background: #f9fcff;
}

.main .rt-th.rt-resizable-header.-cursor-pointer,
.ReactTable .rt-thead .rt-resizable-header-content {
    font-size: 20px;
    font-weight: 600;
    line-height: 2;
}

.ReactTable .rt-thead.-header {
    -webkit-box-shadow: none;
    box-shadow: none !important;
    background: var(--gradient-purple-teal-dark-1);
    color: white;
}

.ReactTable .rt-table .rt-tr-group .-even {
    background: rgb(255, 255, 255, 0.9);
}

.main .ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
    background: #f5faff;
}

.main .ReactTable .-pagination .-btn {
    background: var(--blue);
    font-size: 18px;
    margin-top: 10px;
    color: white;
    font-weight: 600;
}

.main .ReactTable .-pagination .-center {
    margin-top: 10px;
}

.app .ReactTable .-pagination .-btn:not([disabled]):hover {
    background: rgba(7, 128, 181, 0.95);
    color: white;
}

.rt-td {
    font-size: 18px;
    line-height: 3;
}

.app .ReactTable .rt-td,
.app .ReactTable .rt-th {
    padding: 7px 25px;
    text-align: center;
}

.app .ReactTable .-pagination {
    box-shadow: none;
    margin-top: 10px;
    border-top: none;
}

/* Box Shadow when sorting table */
.app .ReactTable .rt-thead .rt-td.-sort-asc,
.app .ReactTable .rt-thead .rt-th.-sort-asc {
    -webkit-box-shadow: inset 0 5px 0 0 rgb(0, 0, 0, 0.35);
    box-shadow: inset 0 5px 0 0 rgb(0, 0, 0, 0.35);
}

.app .ReactTable .rt-thead .rt-td.-sort-desc,
.app .ReactTable .rt-thead .rt-th.-sort-desc {
    -webkit-box-shadow: inset 0 -5px 0 0 rgb(0, 0, 0, 0.35);
    box-shadow: inset 0 -5px 0 0 rgb(0, 0, 0, 0.35);
}

.app .ReactTable .rt-thead .rt-resizable-header:last-child {
    -webkit-box-shadow: none;
    box-shadow: none;
}

#config-container .cb-params-input .row {
    display: block;
    clear: both;
}

/*--------------------------------------------------------------*/
/*----------------FotoBot Interaction Details-------------------*/
/*--------------------------------------------------------------*/

.main .row {
    flex-wrap: nowrap;
}

/*--------------------------------------------------------------*/
/*----------------FotoBot Interaction Details-------------------*/
/*------------------------Navigation----------------------------*/

.app .nav-tabs .nav-link.active,
.app .nav-tabs .nav-link.active:focus {
    opacity: 1;
}

/*--Change color of profile icon--*/
.app .app-header.navbar .nav-link .icon-user,
.app .app-header.navbar .nav-link .icon-user:hover {
    color: white;
    font-weight: 600;
    font-size: 18px;
}

#config-container .text-input {
    margin-bottom: 0px;
    border-radius: 0px;
    min-width: 250px;
}

#config-container .cb-params-wrapper .sample-text .label {
    clear: both;
}

/*--------------------------------------------------------------*/
/*----------------FotoBot Interaction Details-------------------*/
/*------------------------Left Panel----------------------------*/

#config-container .config-left-panel {
    min-width: 360px;
    width: 360px;
    float: left;
    padding-right: 0px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    margin-right: 10px;
    margin-left: -14px;
    background: white;
}

#config-container .config-left-panel textarea {
    resize: none;
    font-size: 16px;
}

#config-container .config-left-panel textarea.request-body,
#config-container .config-left-panel .wizard-api-url {
    width: 100%;
    font-size: 14px;
    padding: 7px;
}

#fotoscript-response {
    border: 1px solid black;
    padding: 10px 10px;
    border-radius: 2px;
    font-size: 16px;
    width: 240px;
    float: left;
}

#config-container .config-left-panel textarea.request-body:focus {
    outline: none;
}

.config-container .config-left-panel .nav {
    width: 100%;
    background: rgb(185, 220, 255, 0.15);
    height: 90px;
}

.config-container .config-left-panel .nav-tabs .nav-link {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 0px;
    font-size: 14px;
}

.config-container .config-left-panel .nav-tabs .nav-link.active {
    background: white;
    height: 90px;
}

.config-left-panel hr {
    margin-top: 30px;
    margin-bottom: 30px;
    border-top: 2px solid var(--cbot-blue);
    opacity: 0.5;
}

.config-container .config-left-panel .nav-tabs .nav-link {
    opacity: 0.85;
}

.config-container .config-left-panel .nav-tabs .nav-link:hover {
    border-radius: 5px 5px 0px 0px;
    opacity: 0.85;
}

.config-container .config-left-panel .nav-item .fa,
.config-container .config-left-panel .nav-item .fas,
.config-container .config-left-panel .nav-item .far,
.config-container .config-left-panel .nav-item .material-icons {
    color: var(--cbot-blue-dark);
    font-size: 26px;
    display: block;
    margin-bottom: 7px;
}

.config-container .config-left-panel .nav-item .active .fa,
.config-container .config-left-panel .nav-item .active .far,
.config-container .config-left-panel .nav-item .active .fas {
    color: var(--cbot-blue);
}

/*---Change color of question tooltip icon in FotoScript--*/
.fa.fa-question-circle {
    margin-left: 4px;
    font-size: 18px;
    color: #bbbebf;
}

.fotobot-instruction-wrapper .footnote {
    text-align: left;
}

.config-container .config-left-panel .form-group label {
    margin-bottom: 8px;
    width: 100%;
    float: left;
    max-width: 205px;
    margin-right: 3px;
}

.config-container .config-left-panel .cb-params-input .form-control {
    margin-left: 4px;
    display: inline;
    margin-left: 0px;
    font-size: 16px;
}

.config-container .config-left-panel .cb-params-input .preview-col {
    margin-right: 5px;
    float: left;
    padding-right: 0px;
    padding-left: 0px;
    font-size: 16px;
}

.config-container .config-left-panel .param-col {
    width: 70%;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 16px;
    padding-right: 0px;
}

.config-container
    .config-left-panel
    .cb-params-input
    .preview-col.preview-sample {
    margin-bottom: 24px;
}

.config-container .config-left-panel .param-col input {
    width: 285px;
    height: 40px;
}

.config-container .config-left-panel .preview-col input.form-control {
    height: 40px;
    margin-bottom: 7px;
    width: 180px;
    margin-right: 5px;
}

.config-container .config-left-panel .cb-params-input .preview-col label {
    margin-bottom: 0px;
}

.config-container .config-left-panel .cb-params-input .preview-btn {
    margin-bottom: 12px;
}

.config-container .config-left-panel .cb-params-input .preview-btn {
    width: 24px;
    display: block;
    float: left;
    padding-right: 0px;
    padding-left: 0px;
}

.config-container .config-left-panel .cb-params-input .row .col label {
    margin-bottom: 0px;
    margin-top: 10px;
    width: 100px;
}

.form-group .form-control.enabled {
    background-color: #f8f8f8;
    cursor: pointer;
    box-shadow: none;
    border: 1px solid var(--cbot-form-border);
}

.form-group .form-control.disabled,
.config-container .config-left-panel .form-control:disabled,
.modal-dialog .modal-content .searchable-select__control--is-disabled,
.config-container .config-left-panel .form-control[readonly],
.config-container .config-left-panel .form-control[readonly]:focus {
    background-color: #f8f8f8;
    cursor: not-allowed;
    box-shadow: none;
    border: 1px solid var(--cbot-form-border);
}

.webinar-config-form-input .form-control:disabled {
    background: #f8f8f8;
    cursor: not-allowed;
}

.searchable-select__single-value--is-disabled {
    color: black !important;
}

/*----Delete button for message text---*/
.config-container
    .config-left-panel
    button.fa.fa-close.btn.btn-secondary.delete-message {
    float: right;
    line-height: 12px;
    padding: 3px 5px;
    margin-top: 0px;
    display: none;
}

/*---Delete button for preview sample text---*/
.config-container .config-left-panel button.fa.fa-close.btn.btn-secondary {
    background: white;
    color: #a7aaac;
    border: 2px solid var(--cbot-pink);
    border-radius: 18px;
    padding: 2px 6px;
    margin-left: 0px;
    margin-top: 2px;
    font-size: 14px;
}

.config-container .config-left-panel button.fa.fa-check.btn.btn-secondary {
    background: white;
    color: #a7aaac;
    border: 2px solid var(--cbot-green);
    border-radius: 18px;
    padding: 2px 5px;
    margin-left: 0px;
    margin-top: 5px;
    font-size: 14px;
}

.config-container
    .config-left-panel
    button.fa.fa-check.btn.btn-secondary:focus {
    box-shadow: none;
}

/*Font style for style label in text tab*/
.config-container .config-left-panel .config-message,
.config-container .config-left-panel .config-fallback {
    font-size: 16px;
    margin-bottom: 2px;
    font-weight: 400;
    margin-top: 15px;
    cursor: default;
}

/*Font style for style label in text tab*/
.config-container .config-left-panel .config-title {
    font-size: 20px;
    padding-top: 20px;
    font-weight: 600;
    color: var(--cbot-blue-dark);
    margin-top: 40px;
    cursor: default;
}

/*Font style for style label in text tab*/
.config-container .config-left-panel .config-subtitle {
    font-size: 18px;
    padding-bottom: 5px;
    font-weight: 600;
    color: #424242;
    margin-top: 50px;
    margin-bottom: 15px;
    cursor: default;
}

.config-container .config-left-panel textarea#interactionURL {
    word-wrap: normal;
}

.config-container .config-left-panel .config-instructions:first-child {
    margin-top: 25px;
}

/*Font style for style label in text tab*/
.config-container .config-left-panel .config-instructions {
    padding-bottom: 5px;
    margin-top: 55px;
    margin-bottom: 15px;
}

/*--Style change for message text form in left panel--*/
.config-container .config-left-panel .config-title.config-message-text {
    margin-top: 25px;
    border-top: none;
    padding-top: 0px;
    cursor: default;
    color: var(--cbot-blue-dark);
}

.config-container .config-left-panel .sample-text .label {
    display: inline;
}

.config-container .config-left-panel .cb-params-input .btn-secondary .fa {
    font-size: 14px;
    color: white;
    margin-right: 3px;
}

/*--------------------------------------------------------------*/
/*---------------Sample Background Image Placeholder------------*/
/*--------------------------------------------------------------*/

.sample-background-image {
    height: calc(100vh - 55px - 78px - 150px);
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    overflow-y: scroll;
    border-radius: 3px;
    margin-top: 15px;
    text-align: center;
    font-size: 18px;
    padding-bottom: 0px;
    font-weight: 600;
    margin-left: -18px;
}

.config-left-panel .sample-background-image {
    font-weight: 400;
    font-size: 16px;
}

.config-left-panel .library-items {
    margin-bottom: 10px;
}

.sample-background-image img {
    width: 90%;
    margin: 10px 0px 0px 10px;
    cursor: pointer;
    border: 1px solid #cfd1d2;
}

.config-container .config-left-panel .config-subtitle.under-construction {
    margin-top: 10px;
    font-size: 20px;
    text-align: center;
}

.config-container .config-left-panel .background-info {
    text-align: center;
    font-size: 18px;
}

.fotoscript-editor .config-left-panel textarea.form-control {
    text-align: left;
}

/*--------------------------------------------------------------*/
/*----------------FotoBot Interaction Details-------------------*/
/*------------------------Right Panel---------------------------*/

.scratchcardsetup.footnote {
    font-size: 16px;
}

#config-container .config-right-panel .fade {
    clear: both;
    min-height: 40px;
}

#config-container.fotoscript-editor .config-right-panel .app-message {
    min-height: 37px;
    margin: 5px auto 5px auto;
    line-height: 2;
    font-size: 18px;
    border-radius: 5px;
    font-weight: 500;
    padding: 3px 5px 2px 5px;
    float: none;
    width: 955px;
    text-align: center;
}

#config-container .config-right-panel .app-message .fa.fa-close {
    margin-top: 3px;
}

.app .config-container .config-right-panel .ctl-btns {
    float: right;
}

.config-container .config-right-panel #canvas {
    clear: both;
}

#config-container .config-right-panel {
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 900px;
    padding-top: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1000px;
}

/*--------------------------------------------------------------*/
/*-----------------FotoScript & Canvas Menu---------------------*/
/*--------------------------------------------------------------*/

.main-canvas {
    background-image: url(/assets/plugins/grid-transparent-background.png);
    background-repeat: repeat;
}

.canvas-menu {
    width: 750px;
    margin-right: auto;
    margin-left: auto;
    height: 42px;
    background: white;
    margin-bottom: 12px;
    border: 1px solid #a7aaac;
    border-radius: 7px;
    font-size: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

body .text-tooltip.tooltip {
    width: 215px;
}

body .text-tooltip.tooltip.hidden {
    display: none;
}

button.canvas-options {
    width: 33.333333333333333%;
    height: 100%;
    border: none;
    color: #5b5b5b;
    background: none;
    display: inline-block;
    text-align: center;
}

button.canvas-options.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.canvas-menu .fa-plus {
    color: var(--cbot-green-dark);
    margin-right: 7px;
}

.canvas-menu .fa-clone {
    color: var(--cbot-blue-dark);
    margin-right: 7px;
}

.canvas-menu .fa-trash {
    color: var(--cbot-pink-hover);
    margin-right: 7px;
}

/*--------------------------------------------------------------*/
/*----------------FotoBot Interaction Details-------------------*/
/*------------------------Save Warning--------------------------*/

/*-------Instantly after 1 change-------*/
.save-warning1 {
    border: 1px solid var(--cbot-green-hover) !important;
    background: var(--cbot-green-hover) !important;
    font-weight: 600 !important;
}

/*-------Instantly after 5 changes-------*/
.save-warning2 {
    -webkit-animation: wiggle 3s linear 3;
    animation: wiggle 3s linear 3;
    border: 1px solid var(--cbot-green-hover) !important;
    background: var(--cbot-green-hover) !important;
    font-weight: 600 !important;
}

/*-------Instantly after 10 changes-------*/
.save-warning3 {
    -webkit-animation: wiggle 3s linear infinite;
    animation: wiggle 3s linear 1;
    border: 1px solid var(--cbot-green-hover) !important;
    background: var(--cbot-green-hover) !important;
    font-weight: 600 !important;
}

.save-warning1:hover,
.save-warning2:hover,
.save-warning3:hover {
    -webkit-animation: none;
    animation: none;
}

/*--------------------------------------------------------------*/
/*----------------FotoBot Interaction Details-------------------*/
/*----------------------Bottom Controller-----------------------*/

.ctl-btns-bottom {
    margin-top: 75px;
    margin-right: auto;
    margin-left: auto;
}

.ctl-btns-bottom .btn {
    padding: 10px 20px;
    font-size: 18px;
}

.ctl-btns-bottom .btn-primary.disabled,
.ctl-btns-bottom .btn-primary:disabled {
    cursor: not-allowed;
}

p.card-text,
.cb-params-top-ctl {
    cursor: default;
}

.btn-close-wrapper {
    display: inline;
}

.btn-close-wrapper .btn-secondary {
    background: var(--cbot-pink);
    border-radius: 15px;
    border: none;
    width: 25px;
    height: 25px;
    line-height: 1;
    color: white;
}

.btn-close-wrapper .btn-secondary .fa {
    margin-left: 0px;
    color: white;
}

/*--------------------------------------------------------------*/
/*------------------------FotoBot Details-----------------------*/
/*-----------------------Preview Image Modal--------------------*/

.modal-dialog.image-preview {
    max-width: 750px;
}

.modal-dialog.image-preview .modal-body {
    padding: 20px;
}

.image-button-preview-wrapper {
    max-width: 525px;
    margin-right: auto;
    margin-left: auto;
}

.image-preview .modal-body img {
    border-radius: 7px 25px 0px 0px;
}

.modal-body img {
    max-width: 100%;
    border: 1px #eee solid;
}

.wizard-modal-image-full {
    text-align: center;
}

.ctl-btns-bottom button {
    color: black;
    margin-left: auto;
    margin-right: auto;
}

.modal-dialog.image-preview .tab-pane {
    min-height: 500px;
}

.image-card-button-preview.gallery-button {
    border-top: 2px #e3e3e3 solid;
    border-left: 2px #e3e3e3 solid;
    border-right: 2px #e3e3e3 solid;
    padding-top: 10px;
    padding-bottom: 10px;
}

.image-card-button-preview a {
    color: #1c6bff;
    font-weight: 600;
}

.image-card-button-preview a:hover {
    cursor: pointer;
    text-decoration: none;
    color: #1c6bff;
}

.image-card-preview-titles-wrapper {
    padding: 15px;
    border: 2px #e3e3e3 solid;
}

.image-card-button-preview.gallery-button:last-child {
    border-bottom: 2px #e3e3e3 solid;
    border-radius: 0px 0px 15px 15px;
}

.image-card-preview-wrapper {
    /*max-width: 425px;*/
    margin: 5px auto;
}

.image-card-title-preview {
    font-weight: 600;
    text-align: left;
    padding: 5px 0px;
}

.image-card-subtitle-preview {
    text-align: left;
    padding: 5px 0px;
}

/*--------------------------------------------------------------*/
/*----------------FotoBot Interaction Details-------------------*/
/*----------------------Preview Text Sample---------------------*/

.app .config-container .cb-params-input .row {
    margin: 0px;
}

.app .config-container .cb-params-input .btn-secondary {
    background: var(--cbot-green);
    border: none;
    color: white;
}

.app .config-container .cb-params-input .btn-secondary:hover {
    background: var(--cbot-green-hover);
    border: none;
    color: white;
}

.app .config-container .cb-params-input .btn-add-wrapper {
    float: right;
}

.app .config-container .tab-content {
    height: calc(100vh - 55px - 78px);
    max-width: 420px;
    border-top: 1px solid #c8ced3;
    border-right: none;
    border-left: none;
    border-bottom: none;
    overflow-x: hidden;
}

.app .form-control:focus,
.modal .form-control:focus {
    box-shadow: none;
    border: 1px solid var(--cbot-teal);
    color: black;
}

/*--------------------------------------------------------------*/
/*----------------FotoBot Interaction Details-------------------*/
/*--------------------------Control Bar-------------------------*/

.top-control-bar .form-control {
    width: 45%;
    margin-bottom: 5px;
    font-size: 24px;
    background: #f1f3f7;
    float: left;
    border: 1px #f1f3f7 solid;
    background: rgba(255, 255, 255, 0.5);
    padding: 20px 10px;
    text-align: left;
}

.fotoscript-dropdown .btn-group {
    float: right;
}

.cell-design-id {
    display: inline-block;
    min-width: 170px;
}

.fotoscript-dropdown .dropdown-item:hover,
.fotoscript-dropdown .dropdown-item:focus {
    background: transparent;
    outline: none;
}

.fotoscript-dropdown .dropdown-item:active {
    color: #23282c;
}

.fotoscript-dropdown .dropdown-item.disabled,
.dropdown-item:disabled {
    cursor: not-allowed;
}

.top-control-bar .btn-primary {
    display: inline;
    margin-right: 5px;
    font-size: 16px;
}

.top-control-bar .form-control:active {
    width: 40%;
    margin-bottom: 5px;
    font-size: 24px;
    border: 0px;
    background: white;
}

/*--------------------------------------------------------------*/
/*---------------Button & Drop Down Menu------------------------*/
/*--------------------------------------------------------------*/

.app .btn-group .dropdown-button {
    border-radius: 3px !important;
    background: #20a8d8;
    color: white;
    height: 38px;
    border: 1px solid #20a8d8;
}

/*-------------------------------------------------------------------------------------------*/
/*---------------------------------------Dropdown Menu---------------------------------------*/
/*---------For example look at FotoScript editor and Rule Block in Dynamic Link--------------*/

/*--Dropdown menu for account selection--*/
.app-header .navbar-nav .dropdown-menu.show {
    margin-top: 5px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

/*--Dropdown menu for user icon--*/
.app-header .navbar-nav .user-icon .dropdown-menu.show {
    margin-top: 15px;
}

.dropdown-menu.show {
    margin-top: 5px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

.dropdown-item .fa.fa-clone {
    color: var(--cbot-green);
    font-weight: 800;
    margin-right: 3px;
}

.dropdown-item {
    font-size: 16px;
}

.dropdown-item .fa.fa-trash-o {
    color: var(--cbot-pink);
    font-weight: 800;
    margin-right: 3px;
}

.dropdown-item .fa.fa-file-text-o {
    color: var(--cbot-blue);
    font-weight: 500;
    margin-right: 3px;
}

.dropdown-item.active,
.dropdown-item:active {
    background: rgba(32, 168, 216, 0.1);
    color: black;
}

button.dropdown-item:focus {
    outline: none;
}

/*--------------------------------------------------------------*/
/*----------------Launch Installation Instructions--------------*/
/*--------------------------------------------------------------*/

.config-container .config-left-panel .output .fa {
    font-size: 28px;
    display: block;
    padding-bottom: 5px;
    color: #a7aaac;
    opacity: 0.8;
}

.config-container .config-left-panel .output button {
    background: white;
    border: 1px solid var(--cbot-form-border);
    width: 105px;
    text-align: center;
    padding: 10px 8px 8px 8px;
    border-radius: 5px;
    float: left;
    margin-right: 17px;
}

.config-container .config-left-panel .output.output-3 button {
    margin-right: 0px;
}

.config-container .config-left-panel .output-save-btn-wrapper {
    clear: both;
}

.config-container .config-left-panel .btn-upload-background {
    text-align: center;
    margin: 10px 7px 10px 0px;
}

.config-container .config-left-panel .btn-upload-background button {
    background: #89b93f;
    cursor: pointer;
    color: white;
    font-size: 18px;
    width: 100%;
}

.config-container
    .config-left-panel
    .fotobot-instruction-wrapper
    .config-subtitle {
    margin-top: 50px;
}

.config-container
    .config-left-panel
    .fotobot-instruction-wrapper
    .config-subtitle:first-child {
    margin-top: 20px;
}

.config-container .config-left-panel .output-save-btn-wrapper button {
    width: 100%;
    margin-top: 10px;
    color: white;
    font-weight: 600;
    border-radius: 3px;
    padding: 7px 5px;
    animation: none;
    -webkit-animation: none;
    font-size: 16px;
}

.config-container .config-left-panel .output.active button .fa {
    color: var(--cbot-blue);
}

.config-container .config-left-panel .output.active button {
    border: 1px solid var(--cbot-blue);
}

.config-container .config-left-panel .output button:focus {
    outline: none;
}

.cbot-interact-id {
    width: 250px;
    padding: 7px;
    border: 1px solid #e4e7ea;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.cbot-interact-id.design-interact-id {
    width: 280px;
    padding: 7px;
    border: 1px solid #e4e7ea;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    background: #f8f8f8;
}

.config-container .config-left-panel .url-instructions {
    width: 365px;
    padding: 15px;
    border: 1px solid #a7aaac;
    border-radius: 3px;
    display: block;
    margin: 10px 0px;
    min-height: 90px;
    background: #f8f8f8;
}

.fotobot-instruction-wrapper .btn-clipboard {
    padding: 12px 8px;
    background: var(--blue);
    border-radius: 3px;
    float: right;
    color: white;
    font-weight: 600;
    border: none;
    font-size: 14px;
}

.cb-global-link .step-detail {
    font-weight: 400;
}

.cb-global-link .btn-clipboard,
.cb-scoreboard .btn-clipboard {
    padding: 8px;
    background: var(--blue);
    border-radius: 3px;
    float: right;
    color: white;
    font-weight: 600;
    border: none;
    margin-right: 2px;
    font-size: 18px;
}

.config-container .config-left-panel .launch-installation-more-details {
    clear: both;
    text-align: left;
    font-size: 18px;
    margin-top: 50px;
}

.launch-installation-link {
    clear: both;
    text-align: left;
    font-size: 15px;
}

.launch-installation-more-details li {
    padding-bottom: 8px;
}

.launch-platform-dropdown #exampleSelect {
    font-size: 18px;
    height: 40px;
}

.config-container
    .config-left-panel
    .fotobot-instruction-wrapper
    .btn-clipboard
    .fa-copy {
    margin-right: 5px;
    color: white;
}

/*--------------------------------------------------------------*/
/*------------------ Upload Instructions -----------------------*/
.footnote {
    font-size: 14px;
    color: #898d90;
    text-align: center;
    cursor: default;
}

.footnote-left {
    text-align: left;
    margin-top: 14px;
}

/*--------------------------------------------------------------*/
/*-------------------------Konva JS-----------------------------*/
/*--------------------------------------------------------------*/

.konvajs-content {
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.15);
}

/*--------------------------------------------------------------*/
/*----------------------Wizard Plugin Page-------------------------*/
/*--------------------------------------------------------------*/

.how-to-video-link {
    color: var(--cbot-blue-dark-text);
    font-size: 14px;
}

.how-to-video-link .fa.fa-question-circle {
    font-size: 14px;
}

.how-to-video-link:hover {
    color: var(--cbot-blue-hover);
    cursor: pointer;
}

.cb-plugin-wizard .step1-wrapper,
.cb-plugin-wizard .step2-wrapper {
    margin-top: 50px;
}

.wizard-install .wizard-api-url,
.cb-global-link .wizard-api-url,
.cb-scoreboard .wizard-api-url,
.cb-airtable .wizard-api-url {
    padding: 8px;
    border: 1px solid #c8ced3;
    border-radius: 3px;
    margin: 5px 0px;
    font-weight: 400;
}

.copy-wizard-info {
    height: 50px;
    margin: 5px 0px;
}

.copy-wizard-api-image {
    text-align: center;
    padding: 5px 0px;
    border-bottom: 1px solid #c8ced3;
    border-left: 1px solid #c8ced3;
    border-right: 1px solid #c8ced3;
    margin: auto;
}

.wizard-video {
    width: 900px;
    border: 1px solid #c8ced3;
}

.wizard-video-title {
    width: 900px;
    border-top: 1px solid #c8ced3;
    color: black;
    background: rgba(224, 221, 252, 0.3);
    font-weight: 500;
    font-size: 18px;
    border-radius: 0;
    text-align: left;
    margin-top: 15px;
    padding: 10px;
    border-left: 1px solid #c8ced3;
    border-right: 1px solid #c8ced3;
}

.cbot-wizard-image-row span.fas {
    float: right;
    margin-top: 5px;
}

video:focus {
    outline: none;
}

.cbot-wizard-image-row {
    width: 95%;
    margin: auto;
}

.cb-plugin-wizard .collapse-container {
    margin-bottom: 50px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    border: 5px solid rgb(185, 220, 255, 0.3);
}

.cb-plugin-wizard .collapse-title .fa {
    margin-right: 7px;
    color: var(--cbot-blue);
}

.cb-plugin-wizard .collapse-title {
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px;
    background: rgb(185, 220, 255, 0.15);
}

.cb-plugin-wizard .collapse-container .collapse,
.cb-plugin-wizard .collapse-container .collapse.show,
.cb-plugin-wizard .collapse-container .collapsing {
    margin-top: 25px;
}

.plugin-sort select.form-control {
    width: 225px;
    display: inline-block;
}

.plugin-sort {
    margin-bottom: 10px;
    text-align: right;
}

.main-list-add-btn.wizard-navigation {
    margin-top: 25px;
}

.wizard-modal-title {
    font-weight: 500;
    margin: 30px 0px;
    font-size: 22px;
}

.wizard-modal-image-half img {
    border: 1px solid #a7aaac;
    max-height: 250px;
    margin: 20px;
}

.wizard-modal-image-half {
    width: 40%;
    display: inline-block;
}

.wizard-modal-image {
    max-width: 700px;
}

.wizard-modal-text-half {
    width: 60%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.wizard-modal-text-full {
    display: block;
    text-align: left;
}

.wizard-modal-text-half li,
.wizard-modal-text-full li {
    line-height: 2;
}

.cb-plugin-wizard .app-main-content {
    margin-top: 4vh;
}

.wizard-answer input.bp3-input {
    height: 39px;
    text-align-last: center;
}

.wizard-answer input.bp3-input {
    padding-left: 30px;
}

.wizard-install .example,
.wizard-answer .example {
    font-size: 13px;
    color: #5b5b5b;
    padding-top: 3px;
    padding-bottom: 1px;
}

.wizard-install .wizard-send-info .param-header.col {
    margin-top: 20px;
    color: var(--cbot-blue-dark);
    font-weight: 500;
    max-width: 350px;
    margin-left: 3px;
}

.wizard-install .wizard-fields.param-col.col,
.wizard-install .wizard-value.param-col.col {
    max-width: 350px;
}

.wizard-install .param-col.col input {
    text-align: left;
    background: transparent;
    border: none;
}

.wizard-install .wizard-request-body {
    width: 100%;
    padding: 10px;
    display: block;
}

.wizard-install .wizard-request-body:focus {
    outline: none;
    border: 1px solid var(--cbot-blue);
}

.wizard-answer .flatpickr-input {
    width: 477px;
    text-align: center;
    min-height: 39px;
    font-size: 16px;
}

.wizard-answer .flatpickr-input:focus {
    outline: none;
}

.wizard-button-wrapper {
    margin-top: 70px;
}

.wizard-answer input:hover,
.wizard-fields input:hover,
.wizard-value input:hover {
    color: var(--cbot-blue);
}

.wizard-row {
    margin-bottom: 10px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    min-height: 55px;
}

.wizard-install {
    margin-bottom: 75px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    font-size: 16px;
}

.wizard-install .wizard-answers-header .param-header.cbot-answer.col {
    max-width: 250px;
}

.cb-scratchcard .param-header.col,
.wizard-install .wizard-answers-header .param-header.col {
    background: var(--cbot-blue);
    padding-top: 7px;
    margin-left: 0px;
    margin-top: 12px;
    color: white;
    padding-bottom: 7px;
    font-weight: 500;
}

.cb-scratchcard .airtable-config-form-input.scratch-card-input {
    width: 500px;
}

.cb-scratchcard .airtable-config-form-label.scratch-card-label {
    width: 26%;
}

.cb-scratchcard .param-col.wizard-description.col {
    max-width: 550px;
    background: #f8f8f8;
}

.wizard-install .param-col.wizard-description.col {
    width: 100%;
    background: #f8f8f8;
    max-width: none;
}

.cb-scratchcard .wizard-answers-header .param-header.col.cbot-description {
    max-width: 549px;
}

.wizard-install .wizard-answers-header .param-header.col.cbot-description {
    max-width: 100%;
}

.param-col.wizard-description.col > div:first-child {
    padding: 10px 0px 5px;
    margin-left: 18px;
}

.wizard-answers-header.row {
    margin-left: -2px;
}

.cb-plugin-wizard .txt-clipboard {
    cursor: pointer;
}

.wizard-question {
    width: 44%;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin-top: 5px;
    font-size: 16px;
    margin-bottom: 5px;
    margin-right: 20px;
}

.wizard-answer .bp3-input-group {
    width: 448px;
}

.wizard-row .split-question-input .bp3-control-group {
    display: inline-flex;
    margin-left: 5px;
    margin-right: 5px;
}

.wizard-answer {
    width: 53%;
    display: inline-block;
}

.wizard-start-wrapper .plugin-install-time {
    text-align: center;
    margin-bottom: 30px;
    font-size: 16px;
}

.wizard-install .param-col.wizard-answer .form-control[readonly] {
    background: #f8f8f8;
}

.param-col.wizard-answer.col,
.param-col.wizard-description.col {
    margin: 0px;
    border-radius: 0px;
    background: #f8f8f8;
    border-bottom: 1px solid #e4e7ea;
    border-top: none;
    border-right: none;
    border-left: none;
}

.wizard-install .param-col.wizard-fields .form-control[readonly],
.wizard-install .param-col.wizard-value .form-control[readonly] {
    background: #f8f8f8;
    margin: 4px 0px;
    border: 1px solid #a7aaac;
}

.param-col.wizard-answer.col,
.param-col.wizard-description.col {
    padding: 0px;
    margin: 0px;
}

.cb-plugin-wizard .step-details {
    max-width: 940px;
}

.cb-plugin-wizard button.txt-clipboard {
    float: right;
}

.param-col.wizard-answer.col {
    margin-left: 12px;
}

.cb-plugin-wizard .param-col.wizard-answer.col {
    max-width: 250px;
}

.cb-plugin-wizard .helper-text {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
}

.wizard-start-wrapper .plugin-name {
    font-size: 32px;
    color: #424242;
    height: 45px;
    text-align: center;
    margin: 20px 0px 40px 0px;
}

.cb-plugin-wizard .plugin-image {
    text-align: center;
    margin: 15px;
}

.cb-plugin-wizard .plugin-description {
    text-align: center;
    font-size: 18px;
    margin-bottom: 30px;
    width: 425px;
    margin-right: auto;
    margin-left: auto;
}

.wizard-platform .form-control {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
}
.wizard-get-started button {
    width: 300px;
}

.wizard-get-started {
    text-align: center;
}

.wizard-platform select,
.wizard-answer select {
    text-align-last: center;
}

.cb-plugin-wizard .plugin-image img {
    max-width: 140px;
}

button.cbot-button-main.wizard-previous-button {
    float: left;
}

.wizard-get-started .cbot-button-main {
    float: none;
    margin-top: 20px;
}

.cbot-button-main.wizard-previous-button,
.cbot-button-main.wizard-next-button {
    min-width: 175px;
}

.wizard-answer label {
    display: block;
    margin-left: 20px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 10px;
}

.wizard-row.answer .wizard-question {
    display: block;
    text-align: left;
}

.wizard-row.answer {
    width: 500px;
    text-align: left;
}

.wizard-fields {
    max-width: 300px;
}

.wizard-value {
    max-width: 500px;
}

.cb-plugin-wizard .table-row .table-data {
    width: 48%;
    display: inline-block;
}

.cb-plugin-wizard .table-row .table-header.col {
    width: 48%;
    display: inline-block;
}

.cb-plugin-wizard .table-row {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8px;
    font-size: 16px;
}

.cb-plugin-wizard .table-instructions {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3px;
    font-size: 16px;
}

.cb-plugin-wizard .table-data input {
    text-align: left;
}

.cb-plugin-wizard .table-instructions {
    margin-top: 40px;
}

.cb-plugin-wizard .table-row .table-header.col {
    width: 45%;
    display: inline-block;
    padding: 0px;
    margin-bottom: 3px;
    font-size: 16px;
    color: var(--cbot-blue-dark);
    font-weight: 500;
    margin-right: 45px;
    text-transform: capitalize;
    margin-top: 20px;
}

.cb-plugin-wizard .table-row .table-data:first-child {
    width: 45%;
    display: inline-block;
    padding: 0px;
    margin-right: 45px;
}

.cb-plugin-wizard .table-row .table-data:last-child {
    width: 445px;
    padding: 0px;
    display: inline-block;
}

/*--------------------------------------------------------------*/
/*----------------------Bot Plugin Page-------------------------*/
/*--------------------------------------------------------------*/

/*--------------------Plugin Instructions Section---------------*/
.app .cb-plugins .cb-plugin-step .cb-plugin-image {
    max-width: 130px;
    padding: 25px 0px 10px 0px;
    margin-right: auto;
    margin-left: auto;
}

.app .cb-plugins .plugin-list .cb-plugin-image {
    vertical-align: middle;
    border-style: none;
    max-width: 180px;
    padding: 20px;
    width: 100%;
}

.cb-plugin-step {
    padding: 25px;
}

.cb-plugin-instruction {
    font-size: 18px;
    text-align: center;
    min-height: 46px;
}

.cb-new-to-cbot-details {
    font-size: 20px;
    text-align: center;
    color: #5b5b5b;
}

.app .cb-plugins .cb-plugin-step .cb-plugin-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--cbot-blue-dark);
    padding: 0px 3px 10px 3px;
}

.app .cb-plugins .cb-plugin-title {
    text-align: center;
    padding: 0px 10px 5px 10px;
    font-size: 18px;
}

.app .cb-plugins .cb-plugin-subtitle {
    text-align: center;
    font-size: 12px;
    padding-bottom: 10px;
}

.app .cb-plugins .btn-wizard,
.app .cb-plugins .btn-docs {
    display: inline-block;
    width: 80px;
    border: 1px solid rgb(185, 220, 255);
    border-radius: 3px;
    margin: 10px 3px 20px 3px;
    font-size: 14px;
    padding: 3px;
    background: #e3effe;
    color: var(--cbot-blue-dark);
}

.app .cb-plugins .btn-wizard:hover,
.app .cb-plugins .btn-docs:hover {
    border: 1px solid #7ebfff;
}

.app .cb-plugins .btn-wizard.disabled,
.app .cb-plugins .btn-docs.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cb-plugin-buttons {
    margin-left: auto;
    margin-right: auto;
}

.app .cb-plugins .cb-plugin-step {
    padding: 0px 20px 30px 20px;
    margin-bottom: 0px;
}

.app .cb-plugins .cb-plugin-image-wrapper {
    margin-right: auto;
    margin-left: auto;
}

.app .cb-plugins .card {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}

.cb-plugin-card.card:hover {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

.app .cb-plugins .cb-plugin-library.col {
    min-width: 280px;
    width: 20%;
}

.app .cb-plugins a .cb-plugin-title {
    color: #23282c;
}

/*--------------------------------------------------------------*/
/*--------------------------Settings----------------------------*/
/*--------------------------------------------------------------*/

.cb-settings .tab-content {
    background: none;
    border: none;
    min-width: 1350px;
}

.cb-settings .nav-item {
    width: 200px;
}

.cb-settings .tab-pane {
    padding-top: 45px;
}

.app .cb-settings .email {
    display: inline-block;
    width: 88%;
    background: #f8f8f8;
    border: 1px solid #a7aaac;
    font-size: 16px;
}

.cb-settings .email-label {
    font-weight: 600;
    width: 12%;
    display: inline-block;
}

.access-key-agreement {
    text-align: left;
    margin-top: 35px;
}
.access-key-agreement p {
    margin-bottom: 20px;
    font-weight: 600;
}

.access-key-agreement-checkbox {
    margin-top: 40px;
}

.access-key-agreement li {
    margin-bottom: 10px;
}

.cb-settings .key-title {
    width: 20%;
    display: block;
    font-weight: 600;
    float: left;
}

.cb-settings .key-expiration {
    font-size: 14px;
    display: block;
    font-weight: 500;
}

.cb-settings .access-key {
    clear: both;
    width: 50%;
    display: inline-block;
    margin: 0px 12px;
    border: 1px solid #a7aaac;
    padding: 10px 2px;
    border-radius: 3px;
    color: #424242;
    font-size: 18px;
    text-align: center;
    height: 42px;
    background: #f8f8f8;
}

.cb-settings .info {
    bottom: 0px;
    color: #5b5b5b;
    margin: 30px 0px 20px 0px;
    width: 93%;
    font-size: 15px;
}

.cb-settings .card-details a {
    color: var(--cbot-blue-dark);
}

.cb-settings .card-heading a {
    color: #23282c;
}

.cb-settings .card-details a:hover,
.cb-settings .card-heading a:hover {
    text-decoration: none;
}

.cb-settings .access-key-options {
    width: 14%;
    display: inline-block;
    margin: 0px 8px 0px 20px;
    font-weight: 600;
    text-align: center;
    color: white;
    border-radius: 3px;
    padding: 5px;
    border: none;
}

.cb-settings .apikey-instructions {
    text-align: center;
    padding: 30px;
    font-size: 18px;
    font-weight: 500;
    border: 1px solid var(--cbot-red);
}

.cb-settings .no-api-key-title {
    font-size: 20px;
}

.cb-settings .no-api-key-details {
    font-size: 18px;
    padding-top: 10px;
}

/*
.main .cb-settings .row{
  min-width: 1400px;
}
*/

.cb-settings .access-key-options.green {
    background: var(--cbot-green);
}

.cb-settings .access-key-options.yellow {
    background: var(--cbot-yellow);
}

.cb-settings .temp-key,
.cb-settings .main-key {
    margin-bottom: 25px;
}

.cb-settings .ReactTable {
    max-width: 1500px;
}

/*
.cb-settings .ReactTable .-pagination .-btn[disabled]{
  opacity: 0;
}
*/

.cb-settings .ReactTable .rt-table {
    box-shadow: none;
    border: 1px solid #c8ced3;
    border-radius: 3px;
}

/*--------------------------------------------------------------*/
/*------------Modal for Access Keys from Settings Page----------*/
/*--------------------------------------------------------------*/

.modal .modal-body {
    font-size: 18px;
    text-align: center;
    background: #f8f8f8;
    border-radius: 20px 20px 0px 0px;
    padding: 20px 70px;
    min-height: 250px;
}

.modal .modal-key-instructions {
    font-size: 18px;
    text-align: center;
    background: #f8f8f8;
    border-radius: 20px 20px 0px 0px;
    padding: 20px 0px;
}

.modal .key-title {
    font-size: 18px;
    float: left;
    padding: 5px 0px;
    text-align: left;
    width: 120px;
    font-weight: 600;
}

.modal .access-key {
    font-size: 16px;
    border: 1px solid #a7aaac;
    float: left;
    padding: 7px 1px;
    border-radius: 3px;
    background: #ffffff;
    width: 350px;
    text-align: center;
}

.modal button.fa {
    padding: 10px;
    background: white;
    border-radius: 18px;
    color: var(--cbot-blue-dark);
    float: left;
    margin: 0px 0px 0px 5px;
    border: 1px solid var(--cbot-blue-dark);
}

.modal .modal-calendly-gallery .ReactTable button.fa {
    float: none;
}

.modal .modal-footer {
    background: #f8f8f8;
    border-radius: 0px 0px 20px 20px;
}

.modal .modal-footer button {
    border: 1px solid var(--cbot-blue);
    background: var(--cbot-blue);
    color: white;
    margin-right: auto;
    margin-left: auto;
    font-size: 18px;
    font-weight: 500;
}

.modal .secret-key-info,
.modal .access-key-info {
    float: left;
    margin-bottom: 12px;
    margin-left: 180px;
}

/*--------------------------------------------------------------*/
/*------------------------Learn Page----------------------------*/
/*--------------------------------------------------------------*/

.cb-learn img {
    width: 125px;
}

.cb-learn .image-icon {
    text-align: center;
}

.cb-learn .card-heading {
    text-align: center;
    margin: 10px 0px 20px 0px;
    font-size: 24px;
    font-weight: 600;
    color: var(--cbot-blue-dark);
}

.cb-learn .card {
    padding: 20px 25px 25px 25px;
    box-shadow: 5px 5px 25px 5px rgba(0, 0, 0, 0.07);
    min-height: 325px;
}

.cb-learn .card-details {
    font-size: 18px;
    text-align: center;
    color: black;
}

/*--------------------------------------------------------------*/
/*-----------------Modal for Delete Confirmation----------------*/
/*--------------------------------------------------------------*/

.modal .warning-title {
    display: block;
    font-size: 26px;
    margin-bottom: 10px;
    font-weight: 500;
}

.modal .modal-footer button.delete-button {
    background: var(--cbot-red);
    color: white;
    font-weight: 600;
    border: 1px solid #f37171;
    min-width: 120px;
}

.modal .modal-footer button.cancel-button {
    min-width: 120px;
    font-weight: 600;
}

/*-------------------------------------------------------------------------------*/
/*----------------------------------LineNav-Tab Styling--------------------------*/
/*-------------------------------------------------------------------------------*/

.linenav-tabs .form-control.is-invalid,
.linenav-tabs .form-control.is-invalid:focus,
.form-control.is-invalid:focus {
    border: 1px solid var(--cbot-teal);
    box-shadow: none;
}

.linenav-tabs .invalid-feedback {
    color: #106ba3;
    text-align: center;
}

.linenav-tabs .nav-tabs .nav-link.active {
    border-bottom: transparent;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    background: transparent;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border: none;
}

.linenav-tabs .nav-item {
    color: var(--cbot-blue-dark);
    font-size: 20px;
}

.linenav-tabs .fa-check-circle.valid {
    color: var(--cbot-green-dark);
    padding-left: 5px;
}

.linenav-tabs .fa-exclamation-circle.invalid {
    color: var(--cbot-red);
    padding-left: 5px;
}

.linenav-tabs .form-step-number {
    font-weight: 700;
    font-size: 14px;
    padding-bottom: 8px;
}

.linenav-tabs .nav-tabs {
    border-bottom: 2px solid #e4e5e6;
}

.linenav-tabs .nav-item {
    text-align: center;
}

.linenav-tabs li.nav-item:hover {
    cursor: pointer;
}

/*-------------------------------------------------------------------------------*/
/*------------------------------Page for Editing Dynamic Link---------------------*/
/*-------------------------------------------------------------------------------*/

.cb-global-link textarea#link-request-body {
    width: 700px;
    display: block;
    height: 120px;
    padding: 10px;
    margin-bottom: 5px;
    font-size: 15px;
}

.cb-global-link textarea#link-request-body:focus {
    outline: none;
}

.link-interact-id {
    width: 630px;
    padding: 7px;
    border: 1px solid #e4e7ea;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 5px;
}

.cell-config-id {
    display: inline-block;
    min-width: 130px;
}

.cb-global-link .nav-item {
    width: 25%;
}

.cb-global-link .bp3-input-group .bp3-input {
    height: 39px;
}

.cb-global-link .bp3-input-group .bp3-input:focus {
    box-shadow: none;
}

.link-config-form-row.link-config-form-row-spacing {
    margin: 35px 0px;
    min-height: 90px;
}

.cb-global-link .link-config-form-row .switch {
    width: 40px;
    height: 26px;
    margin-top: 9px;
    float: right;
}

.position-relative.form-group.link-config-max-view-wrapper {
    height: 49px;
    margin-right: 10px;
    display: inline-block;
}

.cb-global-link .link-config-form-input.max-view-wrapper {
    width: 300px;
}

.cb-global-link .link-config-form-label {
    margin-top: 14px;
    width: 225px;
    text-align: left;
    float: left;
    font-size: 16px;
}

.cb-global-link .link-config-instructions .link-config-form-label {
    margin: 25px 0px 10px 0px;
}

.cb-global-link .link-config-form-label-long {
    width: 325px;
    font-weight: 600;
}

.cb-global-link .link-config-instructions .link-config-form-label-long {
    max-width: 1000px;
    width: 100%;
    float: none;
}

.cb-global-link .link-config-save input {
    width: 350px;
    display: inline-block;
}

cb-global-link .link-config-instructions .invalid-feedback {
    display: block;
    width: 350px;
}

.link-config-form-row .link-config-max-view {
    float: left;
}

input.link-config-max-view.form-control {
    width: 218px;
}

.cb-global-link .add-rule .btn-secondary {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 8px 30px;
    font-size: 18px;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
    width: 30%;
}

.cb-global-link .link-config-form-input-region.form-control {
    width: 25%;
    float: left;
    clear: both;
}

.cb-global-link .link-config-form-input-timezone.form-control {
    width: 70%;
    float: right;
}

.cb-global-link .link-config-form-input {
    width: 80%;
    display: inline-block;
}

.cb-global-link .link-config-form-input-short {
    width: 45%;
    display: inline-block;
}

.link-config-form-input-short .invalid-feedback {
    width: 350px;
}

.cb-global-link .link-config-instructions .link-config-form-input-short {
    width: 100%;
}

.cb-global-link #btn-copy-id,
.cb-global-link #btn-copy-attributename {
    float: right;
    margin-left: 10px;
}

.cb-global-link .app-main-content {
    width: 1280px;
    margin-right: auto;
    margin-left: auto;
}

.cb-global-link .add-rule {
    text-align: center;
}

.cb-global-link .ruleblocks-wrapper select {
    text-align-last: center;
}

.cb-global-link .tab-content {
    background: rgb(255, 255, 255, 0.95);
    min-height: 500px;
}

.cb-global-link .linenav-tabs .tab-content .tab-pane {
    padding: 50px 70px;
    min-height: 700px;
}

.tab-content .tab-pane div div div:nth-child(3n + 2) .ruleblock .card-header {
    background: #e0ddfc; /*cbb9f8*/
}

.tab-content .tab-pane div div div:nth-child(3n + 0) .ruleblock .card-header {
    background: #e0ddfc; /*a7acf6*/
}

.tab-content .tab-pane div div div:nth-child(3n + 1) .ruleblock .card-header {
    background: #e0ddfc; /*a7cdf6*/
}

.cb-global-link .app .card {
    border: none;
}

.cb-global-link .linenav-tabs .nav-tabs {
    border-bottom: none;
}

.cb-global-link button.secondary.btn.btn-secondary {
    border: 1px solid var(--cbot-blue);
    background: var(--cbot-blue);
    color: white;
    font-size: 18px;
    font-weight: 500;
    margin-left: 20px;
    margin-top: 20px;
    width: 150px;
}

.cb-global-link .link-config-form-buttons-wrapper {
    text-align: right;
    width: 30%;
    float: right;
    margin: 10px 0px;
}

.link-config-form-buttons-wrapper.top-control-bar.bottom {
    margin-bottom: 100px;
}

.cb-global-link div:focus {
    outline: none;
}

.cb-global-link .rule-title span.fas {
    margin-right: 8px;
    color: rgb(0, 0, 0, 0.3);
}

/*
  Dragged cards will exist outside of normal screen div so use body for specificity
*/

body .ruleblock .delete-rule button.btn.btn-secondary,
body .ruleblock .delete-rule button.btn.btn-secondary:hover {
    border: none;
    border-radius: 3px;
    background: none;
    color: #7c5694;
    font-size: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: -8px;
}

body .ruleblock input.flatpickr-input {
    width: 30%;
    display: inline-block;
    margin-right: 15px;
    height: 35px;
    border-radius: 3px;
    border: 1px solid #e4e7ea;
    text-align: center;
}

body .ruleblock input.form-control:disabled {
    background: #f8f8f8;
    cursor: not-allowed;
}

body .ruleblock .add-condition-wrapper {
    text-align: center;
    clear: both;
    margin-bottom: 25px;
}

body .ruleblock .rule-url-wrapper input.rule-condition-input.form-control {
    width: 83%;
    float: right;
}

body .cb-global-link .ruleblock .condition-label {
    width: 30px;
    display: inline-block;
    color: var(--cbot-blue-darker);
    margin-right: 50px;
    font-size: 16px;
}

body .ruleblock .rule-url-label {
    width: 150px;
    display: inline-block;
    margin-top: 7px;
    font-weight: 600;
    color: var(--cbot-blue-darker);
}

body .ruleblock .rule-title {
    float: left;
}

body .ruleblock .delete-rule {
    float: right;
}

body .ruleblock button.fa.fa-close.btn.btn-secondary {
    background: white;
    color: var(--cbot-pink);
    border: 2px solid var(--cbot-pink);
    border-radius: 18px;
    padding: 2px 6px;
    margin-left: 0px;
    margin-top: 2px;
    font-size: 14px;
}

body .ruleblock button.add-condition.btn.btn-secondary {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    color: var(--cbot-blue-dark-text);
    border-radius: 3px;
    padding: 5px 30px;
    font-size: 18px;
    background: rgb(64, 143, 240, 0.2);
    border: 1px solid rgb(64, 143, 240);
    width: 240px;
}

body .ruleblock .rule-url-wrapper {
    padding-top: 10px;
}

body .ruleblock button.add-condition.btn.btn-secondary.disabled {
    display: none;
}

body .ruleblock .card-header {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    color: black;
    font-weight: 500;
    font-size: 18px;
    background: #e0ddfc;
    height: 45px;
}

body .ruleblock select.form-control {
    width: 245px;
    display: inline-block;
    margin-right: 25px;
    text-align-last: center;
    cursor: pointer;
}

body .ruleblock .condition-row {
    margin-bottom: 25px;
}

body .ruleblock .card-body {
    padding: 40px 80px;
}

body .ruleblock input.form-control {
    width: 30%;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
}

body .cb-global-link .ruleblock input.form-control {
    width: 30%;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
    height: 35px;
    border-radius: 3px;
    border: 1px solid #e4e7ea;
}

.app .cb-global-link .card {
    border: 1px solid #bfb9f9;
    margin-bottom: 50px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}

.app .cb-global-link .ruleblock.dragged.card {
    border: 1px solid #8d83f4;
    margin-bottom: 50px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

.app .cb-global-link .ruleblock.dragged.card .card-header {
    background: #d0cbfa;
}

body .ruleblock.dragged .card-header {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

body .ruleblock :focus {
    outline: none;
}

/*-------------------------------------------------------------------------------*/
/*----------------------------------CSS for Columns------------------------------*/
/*-------------------------------------------------------------------------------*/

.cb-col3 {
    width: 32%;
    display: inline-block;
    vertical-align: top;
}

/*-------------------------------------------------------------------------------*/
/*------------------------------CSS for ActiveCampaign---------------------------*/
/*-------------------------------------------------------------------------------*/

.email-config-form-buttons {
    margin: 120px 20px;
}

.email-config-form-buttons button {
    width: 100%;
    margin: 5px 0px;
}

.email-config-form-label {
    text-align: center;
    font-size: 18px;
    color: #106ba3;
    margin-bottom: 8px;
}

button.refresh-fields-button.btn.btn-primary {
    width: 100%;
    margin-top: 10px;
}

.cb-activecampaign li.nav-item {
    width: 20%;
}

.cb-activecampaign .link-config-form-buttons-wrapper.top-control-bar.top {
    float: right;
}

.ac-config-form-input {
    display: inline-block;
    width: 575px;
}

.ac-config-form-input-system-fields {
    margin: 5px 70px 5px 20px;
    font-size: 16px;
    line-height: 1.7;
    display: inline-block;
}

.ac-config-form-row {
    margin: 5px 0px;
}

.ac-config-form-label {
    width: 250px;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    vertical-align: top;
}

.cb-activecampaign .cb-col3.cb-col3-2 {
    width: 18%;
}

.ac-config-form-setup-title {
    font-size: 18px;
    color: var(--cbot-blue-dark);
    margin-top: 75px;
    font-weight: 500;
}

.cb-activecampaign .step {
    margin-top: 35px;
}

.ac-config-form-instructions {
    font-size: 16px;
    font-weight: 500;
    margin-top: 25px;
}

.cb-activecampaign .btn-clipboard {
    padding-right: 25px;
    padding-left: 25px;
}

.ac-config-max-selected {
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
}

.cb-activecampaign hr {
    margin: 7px 0px;
}

.ac-config-form-label.long {
    width: 380px;
}

/*-------------------------------------------------------------------------------*/
/*-----------------------------------CSS for Coupon----------------------------*/
/*-------------------------------------------------------------------------------*/
.report-dashboard.row {
    margin-right: auto;
    max-width: 1428px;
    margin-left: auto;
    margin-top: 20px;
}

.cb-coupon .collapse .helper-text {
    margin: 0px 0px 30px 0px;
}

.cb-coupon-report .dashboard-card {
    font-size: 16px;
    font-weight: 500;
}

.cb-coupon-report .card-body {
    min-height: 84px;
    padding: 16px 20px;
    font-size: 16px;
}

.cb-coupon .wizardField {
    width: 350px;
    padding: 7px;
    border: 1px solid #e4e7ea;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-right: 10px;
}

.coupon-config-form-setup-title {
    font-size: 18px;
    color: var(--cbot-blue-dark);
    margin-top: 75px;
    font-weight: 500;
}

.coupon-config-form-row {
    margin-bottom: 10px;
}

.coupon-config-form-input-system-fields {
    margin: 5px 0px 5px 84px;
    font-size: 16px;
    line-height: 1.7;
    display: inline-block;
}

.coupon-config-form-input-system-fields:first-child {
    margin: 5px 0px 5px 22px;
}

.coupon-config-form-input {
    display: inline-block;
    width: 575px;
}

.cb-coupon-report .horizontal-with-text {
    width: 52%;
    margin-left: 50px;
}

.cb-coupon-report button.main-list-add-btn.btn.btn-secondary {
    margin: 0px 3px;
}

.cb-coupon-report
    button.main-list-add-btn.gallery-navigation.btn.btn-secondary {
    float: left;
}

.cb-coupon .nav-item {
    width: 22%;
}

.cb-coupon .link-config-form-buttons-wrapper.top-control-bar.top {
    float: right;
}

.coupon-config-form-label {
    width: 325px;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    vertical-align: top;
}

.coupon-report-detail {
    font-size: 14px;
    line-height: 2;
}

.coupon-report-main {
    line-height: 2;
}

.coupon-switch .switch {
    float: left;
    margin-bottom: 1rem;
}

select.coupon-timeunit.form-control {
    display: inline-block;
    width: 200px;
}

.coupon-config-form-input.short {
    width: 140px;
}

.cb-coupon .bp3-input-group .bp3-input {
    position: relative;
    width: 100%;
    max-width: 100px;
}

.coupon-config-form-row.wizard {
    margin: 35px 0px;
}

.cb-coupon-report .coupon-config-form-row.report-criteria {
    margin-top: 70px;
}

.coupon-config-form-input-details {
    display: inline-block;
    font-size: 16px;
}

.coupon-config-form-input {
    display: inline-block;
    width: 575px;
}

.coupon-date-picker input.flatpickr-input.active,
.coupon-date-picker input.flatpickr-input {
    padding: 5px 15px;
    font-size: 16px;
}

.cb-coupon-report .coupon-config-form-row {
    margin-top: 20px;
    margin-left: 50px;
}

.cb-coupon-report .coupon-config-form-label {
    width: 200px;
}

input.flatpickr-input.active:focus {
    outline: none;
    border: 1px solid var(--cbot-teal);
    border-radius: 2px;
}

.coupon-date-to {
    display: inline-block;
    padding: 0px 20px;
    font-size: 16px;
}

button.search-coupon.btn.btn-primary {
    margin-top: 10px;
    width: 100%;
}

/*-------------------------------------------------------------------------------*/
/*-----------------------------------CSS for Airtable----------------------------*/
/*-------------------------------------------------------------------------------*/

.cb-airtable .search-conditions .airtable-config-form-input {
    margin-top: 14px;
}

.cb-airtable input[type="checkbox"] {
    transform: scale(1.2);
}

body .cb-airtable .ruleblock .rule-label.with-checkbox {
    width: 35%;
}

.cb-airtable .rule-input.with-checkbox {
    width: 65%;
}

.airtable-config-form-line {
    width: 400px;
    margin: 50px auto;
}

body .cb-airtable .ruleblock .condition-label {
    width: 100%;
    display: inline-block;
    color: var(--cbot-blue-darker);
    font-size: 18px;
    margin-bottom: 10px;
}

.cb-airtable textarea#mc-request-body,
.cb-airtable textarea#cf-request-body {
    width: 700px;
    display: block;
    height: 120px;
    padding: 10px;
    margin-bottom: 5px;
    font-size: 15px;
}

.airtable-config-form-row {
    min-height: 55px;
}

.cb-airtable .test-connection {
    float: right;
}

.cb-airtable .config-instructions {
    padding: 10px 0px 40px 0px;
}

.cb-airtable .link-config-form-buttons-wrapper {
    text-align: right;
    width: 15%;
    float: right;
    margin: 10px 0px;
}

.cb-airtable textarea#mc-request-body:focus {
    outline: none;
}

.cb-airtable .nav-item {
    width: 20%;
    min-width: 225px;
}

.cb-airtable .bp3-input-group .bp3-input {
    height: 39px;
}

.cb-airtable .bp3-input-group .bp3-input:focus {
    box-shadow: none;
}

.cb-airtable .airtable-config-form-row .switch {
    width: 40px;
    height: 26px;
    margin-top: 9px;
    display: inline-block;
}

.airtable-config-form-title {
    width: 100%;
    text-align: left;
    display: inline-block;
    font-size: 18px;
    padding-top: 25px;
    font-weight: 600;
    color: #424242;
    border-top: 1px solid rgba(5, 88, 124, 0.25);
    margin-top: 40px;
    margin-bottom: 5px;
    cursor: default;
}

.position-relative.form-group.airtable-config-max-view-wrapper {
    height: 49px;
    margin-right: 10px;
    display: inline-block;
}

.cb-airtable .airtable-config-form-input.max-view-wrapper {
    width: 300px;
    vertical-align: middle;
}

.cb-airtable .airtable-config-form-label {
    width: 20%;
    text-align: left;
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
    margin-top: 14px;
}

.form-input-tip {
    text-align: center;
    font-size: 14px;
    padding-bottom: 10px;
    padding-top: 5px;
    color: #5b5b5b;
}

.search-condition-note li {
    margin-bottom: 5px;
}
.search-condition-note {
    font-size: 16px;
}

.cb-airtable .airtable-config-form-label.click-button-clear {
    width: 475px;
    height: 39px;
}

.cb-airtable .airtable-config-form-input.click-button-clear-toggle {
    width: 50%;
}

.cb-airtable .airtable-config-instructions .airtable-config-form-label {
    margin: 25px 0px 10px 0px;
}

.cb-airtable .airtable-config-form-label-long {
    width: 325px;
    font-weight: 600;
}

.cb-airtable .airtable-config-instructions .airtable-config-form-label-long {
    width: 700px;
    float: none;
}

.cb-airtable .airtable-config-save input {
    width: 350px;
    display: inline-block;
}

.cb-airtable .airtable-config-instructions .invalid-feedback {
    display: block;
    width: 350px;
}

.airtable-config-form-row .airtable-config-max-view {
    float: left;
}

input.airtable-config-max-view.form-control {
    width: 218px;
}

.cb-airtable .add-rule .btn-secondary {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    padding: 8px 30px;
    font-size: 18px;
    background: var(--cbot-blue);
    border: 1px solid var(--cbot-blue);
    width: 30%;
}

.cb-airtable .airtable-config-form-input-region.form-control {
    width: 25%;
    float: left;
    clear: both;
}

.cb-airtable .airtable-config-form-input-timezone.form-control {
    width: 70%;
    float: right;
}

.cb-airtable .airtable-config-form-input {
    width: 80%;
    display: inline-block;
}

.cb-airtable .airtable-config-form-input-short {
    width: 45%;
    display: inline-block;
}

.airtable-config-form-input-short .invalid-feedback {
    width: 350px;
}

.cb-airtable .airtable-config-instructions .airtable-config-form-input-short {
    width: 100%;
}

.cb-airtable #btn-copy-id,
.cb-airtable #btn-copy-attributename {
    float: right;
    margin-left: 10px;
}

.cb-airtable .app-main-content {
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    min-width: 1325px;
}

.cb-airtable .add-rule {
    text-align: center;
}

.cb-airtable .ruleblocks-wrapper select {
    text-align-last: center;
}

.cb-airtable .tab-content {
    background: rgb(255, 255, 255, 0.95);
    min-height: 500px;
}

.cb-airtable .linenav-tabs .tab-content .tab-pane {
    padding: 50px 70px;
    min-height: 700px;
}

.tab-content .tab-pane div div div:nth-child(3n + 2) .ruleblock .card-header {
    background: #e0ddfc; /*cbb9f8*/
}

.tab-content .tab-pane div div div:nth-child(3n + 0) .ruleblock .card-header {
    background: #e0ddfc; /*a7acf6*/
}

.tab-content .tab-pane div div div:nth-child(3n + 1) .ruleblock .card-header {
    background: #e0ddfc; /*a7cdf6*/
}

.cb-airtable .app .card {
    border: none;
}

.cb-airtable .linenav-tabs .nav-tabs {
    border-bottom: none;
}

.cb-airtable button.secondary.btn.btn-secondary {
    border: 1px solid var(--cbot-blue);
    background: var(--cbot-blue);
    color: white;
    font-size: 18px;
    font-weight: 500;
    margin-left: 20px;
    margin-top: 20px;
    width: 150px;
}

.cb-airtable .airtable-config-form-buttons-wrapper {
    text-align: right;
    width: 30%;
    float: right;
    margin: 10px 0px;
}

.airtable-config-form-buttons-wrapper.top-control-bar.bottom {
    margin-bottom: 100px;
}

.cb-airtable div:focus {
    outline: none;
}

.cb-airtable .rule-title span.fas {
    margin-right: 8px;
    color: rgb(0, 0, 0, 0.3);
}

/*
  Dragged cards will exist outside of normal screen div so use body for specificity
*/

body .ruleblock .delete-rule button.btn.btn-secondary,
body .ruleblock .delete-rule button.btn.btn-secondary:hover {
    border: none;
    border-radius: 3px;
    background: none;
    color: #7c5694;
    font-size: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: -8px;
}

body .ruleblock input.flatpickr-input {
    width: 30%;
    display: inline-block;
    margin-right: 15px;
    height: 35px;
    border-radius: 3px;
    border: 1px solid #e4e7ea;
    text-align: center;
}

body .ruleblock input.form-control:disabled {
    background: #f8f8f8;
    cursor: not-allowed;
}

body .ruleblock .add-condition-wrapper {
    text-align: center;
    clear: both;
    margin-bottom: 25px;
}

body .ruleblock .rule-url-wrapper input.rule-condition-input.form-control {
    width: 83%;
    float: right;
}

body .ruleblock .rule-url-label {
    width: 150px;
    display: inline-block;
    margin-top: 7px;
    font-weight: 600;
    color: var(--cbot-blue-darker);
}

body .ruleblock .rule-title {
    float: left;
}

body .ruleblock .delete-rule {
    float: right;
}

body .ruleblock button.fa.fa-close.btn.btn-secondary {
    background: white;
    color: var(--cbot-pink);
    border: 2px solid var(--cbot-pink);
    border-radius: 18px;
    padding: 2px 6px;
    margin-left: 0px;
    margin-top: 2px;
    font-size: 14px;
}

body .ruleblock button.add-condition.btn.btn-secondary {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    color: var(--cbot-blue-dark-text);
    border-radius: 3px;
    padding: 5px 30px;
    font-size: 18px;
    background: rgb(64, 143, 240, 0.2);
    border: 1px solid rgb(64, 143, 240);
    width: 240px;
}

body .ruleblock .rule-url-wrapper {
    padding-top: 10px;
}

body .ruleblock button.add-condition.btn.btn-secondary.disabled {
    display: none;
}

body .ruleblock .card-header {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    color: black;
    font-weight: 500;
    font-size: 18px;
    background: #e0ddfc;
    height: 45px;
}

body .ruleblock select.form-control {
    width: 245px;
    display: inline-block;
    margin-right: 35px;
    text-align-last: center;
    cursor: pointer;
}

body .ruleblock .condition-row {
    margin-bottom: 25px;
}

body .ruleblock .card-body {
    padding: 40px 80px;
}

body .cb-airtable .ruleblock input.form-control {
    width: 30%;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
}

body .cb-airtable .ruleblock input.form-control {
    width: 30%;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
    height: 35px;
    border-radius: 3px;
    border: 1px solid #e4e7ea;
}

.app .cb-airtable .card {
    border: 1px solid #bfb9f9;
    margin-bottom: 50px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}

.app .cb-airtable .ruleblock.dragged.card {
    border: 1px solid #8d83f4;
    margin-bottom: 50px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

.app .cb-airtable .ruleblock.dragged.card .card-header {
    background: #d0cbfa;
}

.cb-airtable .set-custom-field .col {
    font-size: 16px;
    display: inline-block;
    cursor: default;
}

body .cb-airtable .ruleblock .row input.form-control {
    width: 100%;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
    height: 35px;
    border-radius: 3px;
    border: 1px solid #e4e7ea;
    margin-bottom: 8px;
}

.cb-airtable .set-custom-field.row {
    margin-bottom: 5px;
}

.cb-airtable .set-custom-field-confirm,
.cb-airtable .set-custom-field-confirm:hover {
    background: white;
    color: #a7aaac;
    border: 2px solid var(--cbot-green);
    border-radius: 18px;
    padding: 2px 5px;
    margin-left: 0px;
    margin-top: 5px;
    font-size: 14px;
}

.cb-airtable .ruleblock button.set-custom-field-delete {
    background: white;
    color: #a7aaac;
    border: 2px solid var(--cbot-pink);
    border-radius: 18px;
    padding: 2px 6px;
    margin-left: 0px;
    margin-top: 2px;
    font-size: 14px;
}

body .cb-airtable .ruleblock .row input:read-only {
    cursor: not-allowed;
}

body .cb-airtable .ruleblock.wide-rule-label .rule-input {
    width: 60%;
}
body .cb-airtable .ruleblock.wide-rule-label .rule-label {
    width: 40%;
}

body .cb-airtable .ruleblock .rule-label {
    margin-top: 14px;
    width: 25%;
    text-align: left;
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
}

.cb-airtable .rule-input {
    display: inline-block;
    width: 75%;
}

body .ruleblock .rule-input select.form-control {
    width: 100%;
}

body .ruleblock .rule-input input.form-control {
    width: 100%;
}

body .ruleblock .rule-input input.form-control:read-only {
    cursor: not-allowed;
}

.copy-button-wrapper {
    text-align: right;
    max-width: 700px;
}

.copy-button-wrapper button {
    padding: 11px 8px;
    background: var(--blue);
    border-radius: 3px;
    color: white;
    font-weight: 600;
    border: none;
    display: inline-block;
    font-size: 14px;
    margin-left: 10px;
}

.cb-airtable .rule-input.if-condition {
    display: inline-block;
    width: 30%;
    margin-right: 10px;
}

.cb-airtable .rule-input.if-condition.field-comparison {
    width: 38%;
}

.cb-airtable .rule-input.if-condition.operator {
    width: 20%;
}

.airtable-config-form-input .searchable-select__placeholder {
    text-align: center;
    width: 100%;
}

.rule-input.if-condition.operator {
    width: 23%;
}

.input-copy-button {
    width: 10%;
    float: right;
    clear: both;
}

.input-with-copy-button {
    width: 87%;
    display: inline-block;
}

.cb-airtable .rule-input.if-condition.plus-minus-time {
    width: 60%;
}

.cb-airtable .rule-input.if-condition.plus-minus-time-number {
    width: 14%;
}

.cb-airtable .rule-input.if-condition.add-minute-day-unit {
    width: 20%;
}

.cb-airtable .rule-input.if-condition.operator {
    display: inline-block;
    margin-right: 10px;
}

.cb-airtable .rule-input.if-condition .bp3-input-group.bp3-disabled,
.cb-airtable .rule-input.if-condition .bp3-input-group {
    width: 70%;
}

.cb-airtable .search-conditions .airtable-config-form-label {
    text-align: right;
}

.cb-airtable .rule-input input.form-check-input {
    margin: 18px 0px 0px 0px;
}

.cb-airtable button.btn-show-optional.btn.btn-secondary,
.cb-airtable button.btn-show-optional.btn.btn-secondary:active {
    width: 100%;
    border: 1px solid #c8ced3;
    color: black;
    background: rgba(224, 221, 252, 0.3);
    font-weight: 500;
    font-size: 18px;
    border-radius: 0;
    text-align: left;
    margin: 40px 0px 15px;
}

.cb-airtable button.btn-show-optional.btn.btn-secondary .fas {
    color: rgba(31, 16, 182, 0.42);
}

.cb-airtable .advanced-details-row {
    clear: both;
}

.cb-airtable .advanced-details-row .fa.fa-question-circle {
    margin-left: 4px;
    font-size: 18px;
    color: rgba(31, 16, 182, 0.3);
}

/*-------------------------------------------------------------------------------*/
/*---------------------------------Calendly--------------------------------------*/
/*-------------------------------------------------------------------------------*/

.cbot-config-form-row .cbot-config-form-label.calendly-refresh {
    width: 135px;
}

.cbot-config-form-row .form-control:disabled,
.cbot-config-form-row .form-control[readonly] {
    cursor: not-allowed;
    background: #f8f8f8;
}

.modal-cbot-config.modal-calendly-gallery .nav-tabs .nav-item {
    width: 45%;
}

.modal-cbot-config .calendly-integration-success {
    color: var(--cbot-green-dark);
    font-size: 22px;
    margin-top: 20px;
}

.modal-cbot-config .calendly-integration-success-detail {
    font-size: 18px;
    margin-top: 10px;
    color: black;
}

.calendly-integration-id select.form-control,
.modal-cbot-config .calendly-integration-id .position-relative.form-group {
    width: 375px;
}

.cbot-config-form-label.calendly-refresh {
    width: 140px;
}

.cbot-config-form-input.calendly-integration-id {
    width: 375px;
}

.cbot-config.form-label.cbot-reminder-day {
    width: 50px;
    text-align: right;
}

.cbot-config.form-label.cbot-reminder {
    width: 70px;
    text-align: right;
}

.cbot-config-form-row .reminder-inline-controls .switch .switch-slider {
    margin-top: 8px;
}

/*-------------------------------------------------------------------------------*/
/*-------------------------------CBot Modal--------------------------------------*/
/*-------------------------------------------------------------------------------*/
.modal-cbot-config.modal-calendly-event-types .nav-tabs .nav-item {
    width: 33%;
}

.modal-cbot-config.modal-calendly-event .nav-tabs .nav-item {
    width: 25%;
}

.modal-content .modal-body .cbot-config-form-row {
    clear: both;
}

.cbot-config-form-row,
.cbot-event-form-row {
    clear: both;
}

.modal-cbot-config .tab-content .tab-pane.active {
    min-height: 650px;
    border: 2px solid #e4e5e6;
    background: white;
}

.cbot-config-form-input .form-control:disabled {
    background: #f8f8f8;
    cursor: not-allowed;
}

.modal-cbot-config .position-relative.form-group,
.modal-cbot-event .position-relative.form-group {
    height: 50px;
    width: 500px;
}

.modal-cbot-config .invalid-feedback {
    margin: 5px 0px 10px 0px;
    background: var(--cbot-yellow-light);
    padding: 4px;
}

.modal-cbot-config .cbot-config-form-label,
.modal-cbot-event .cbot-config-form-label,
.modal-cbot-config .cbot-config.form-label,
.modal-cbot-event .cbot-config.form-label {
    margin-top: 5px;
    width: 240px;
    text-align: left;
    vertical-align: top;
}

.cbot-config-form-row .cbot-config-form-label,
.cbot-config-form-row .cbot-config-form-input,
.cbot-event-form-row .cbot-event-form-label,
.cbot-event-form-row .cbot-event-form-input,
.cbot-config-form-row .cbot-config.form-label {
    display: inline-block;
    padding: 5px;
    margin-top: 0px;
}

.cbot-config.form-label.cbot-reminder-day {
    width: 50px;
    text-align: right;
}

.cbot-config.form-label.cbot-reminder {
    width: 70px;
    text-align: right;
}

.cbot-config-form-row .reminder-inline-controls .mx-1 {
    margin: 0px 20px 0px 0px !important;
    vertical-align: top;
}

.reminder-inline-controls {
    min-height: 75px;
}

.reminder-inline-controls .position-relative.form-group {
    display: inline;
}

.modal-cbot-config .bp3-numeric-input.cbot-reminder input,
.modal-cbot-event .bp3-numeric-input.cbot-reminder input {
    width: 42px;
}

.cbot-config-form-row .cbot-config-form-input .cbot-reminder .bp3-input-group,
.cbot-config-form-row .cbot-config-form-input .cbot-reminder .bp3-button-group {
    padding: 5px 0px;
}

.cbot-config-form-row .reminder-inline-controls .switch .switch-slider {
    margin-top: 8px;
}

.modal-webinar-config .reminder-inline-controls .invalid-feedback {
    margin-top: 0px;
    clear: both;
}

.cbot-config-form-row input.form-control.enabled.flatpickr-input {
    background-color: white;
}

.cbot-config-form-label.cbot-reminder-day,
.cbot-config.form-label.cbot-reminder-day {
    width: 50px;
    text-align: right;
}

.webinar-config-form-label.webinar-reminder-day,
.webinar-config.form-label.webinar-reminder-day {
    width: 50px;
    text-align: right;
}

.webinar-config-form-label.webinar-reminder,
.webinar-config.form-label.webinar-reminder {
    width: 70px;
    margin-top: 5px;
    text-align: right;
    margin-left: 22px;
}

.form-label.control-label.reminder-details {
    width: 200px;
    display: inline-block;
    padding: 5px;
    vertical-align: top;
    text-align: left;
}

.cbot-config.form-label.reminder-name {
    width: 200px;
}

.reminder-inline-controls .form-label.cbot-reminder-day,
.reminder-inline-controls .form-label.cbot-reminder {
    width: 100px;
    text-align: left;
    font-size: 14px;
}

.reminder-inline-controls .cbot-config.form-input {
    width: 105px;
    display: inline-block;
}

/*-------------------------------------------------------------------------------*/
/*----------------------Modal for Webinar Config Editor & Add Bot----------------*/
/*-------------------------------------------------------------------------------*/

.modal-webinar-config .bp3-numeric-input.cbot-reminder input,
.modal-webinar-event .bp3-numeric-input.cbot-reminder input {
    width: 42px;
}

/*-------------------------------------------------------------------------------*/
/*----------------------Modal for Webinar Config Editor & Add Bot----------------*/
/*-------------------------------------------------------------------------------*/

.cb-global-webinar-events .rt-resizable-header-content .fa.fa-question-circle {
    color: #ffffff;
    opacity: 0.8;
    margin-left: 2px;
}

.add-bot .nav-tabs .nav-item {
    width: 25%;
}

/*----Change color of text for weekday on calendar---*/
.flatpickr-weekdays span.flatpickr-weekday {
    color: white;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--cbot-blue-darker);
}

.flatpickr-calendar .flatpickr-time input:hover,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-calendar .flatpickr-time input:focus,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-calendar .numInputWrapper:hover {
    background: rgb(185, 220, 255, 0.2) !important;
}

body .modal-dialog {
    max-width: 1000px;
}

.modal-dialog .modal-body {
    padding: 0px 62px 20px 62px;
}

.cb-global-webinar-events .webinar-event-label {
    padding-right: 5px;
    font-size: 18px;
    float: left;
    margin-top: 6px;
}

.modal-webinar-event .tab-content {
    height: 655px;
    border: 2px solid #e4e5e6;
    border-radius: 0px 0px 7px 7px;
}

.modal-webinar-config .tab-content .tab-pane.active {
    min-height: 650px;
    border: 2px solid #e4e5e6;
    background: white;
}

.modal-webinar-config .tab-content {
    border: none;
}

.add-bot .tab-content {
    min-height: 300px;
}

.add-bot .tab-content {
    border: 2px solid #e4e5e6;
    background: white;
}

.linenav-tabs .nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border: transparent;
}

.linenav-tabs .nav-tabs .nav-link.active:hover {
    border-bottom: 2px solid var(--cbot-blue);
}

.linenav-tabs .nav-item .active.nav-link {
    border-bottom: 2px solid var(--cbot-blue);
}

.linenav-tabs .nav-item .active.nav-link .form-step-number {
    color: var(--cbot-blue);
}

.cb-global-webinar-events .add-btn-wrapper .form-control {
    width: 180px;
    font-size: 18px;
    float: left;
}

/*----Style to Toggle Advanced Settings---*/
.more-details-section,
button.btn-show-optional.btn.btn-secondary,
button.btn-show-optional.btn.btn-secondary:active {
    width: 100%;
    border: 1px solid #c8ced3;
    color: black;
    background: rgba(224, 221, 252, 0.3);
    font-weight: 500;
    font-size: 18px;
    border-radius: 0;
    text-align: left;
    margin: 40px 0px 15px;
}

.more-details-section {
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
}

.modal .btn-secondary.disabled,
.btn-secondary:disabled {
    color: white;
    cursor: not-allowed;
    border: 1px solid var(--cbot-blue);
    background: var(--cbot-blue);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    cursor: not-allowed;
}

button.btn-show-optional.btn.btn-secondary:focus {
    box-shadow: none;
}

button.btn-show-optional.btn.btn-secondary .fas {
    color: var(--cbot-blue-dark);
}

.helper-text {
    font-size: 18px;
    text-align: left;
    color: #939699;
    margin: 0px 0px 30px 0px;
    border-radius: 3px;
    clear: both;
}

.cb-airtable .collapse .helper-text {
    margin: 0px 0px 30px 0px;
}

.collapse .helper-text {
    margin: 0px 0px 30px 20px;
}

.helper-text .red-error-message {
    color: var(--cbot-pink-dark);
    font-weight: 600;
}

.helper-text.red {
    color: var(--cbot-pink-dark);
    font-weight: 600;
    border: 1px solid var(--cbot-pink-dark);
    padding: 10px;
    text-align: center;
}

.helper-text-advanced {
    font-size: 18px;
    text-align: left;
    color: #939699;
    border-radius: 3px;
    clear: both;
    margin-bottom: 10px;
}

.helper-text-description {
    font-size: 16px;
    text-align: left;
    color: black;
    margin: 12px 0px 15px 0px;
    border-radius: 3px;
    clear: both;
}

.helper-step {
    font-size: 18px;
    color: black;
    text-align: left;
    margin: 12px 0px 15px 0px;
    border-radius: 3px;
    clear: both;
}

.helper-text-title {
    font-size: 18px;
    color: #5b5b5b;
    text-align: left;
    padding: 10px 0px;
    font-weight: 600;
    float: none;
}

.helper-text-warning {
    font-size: 18px;
    color: #5b5b5b;
    text-align: left;
    margin: 18px 0px 12px 0px;
    padding: 12px 24px 24px 24px;
    border: 2px solid #05587c3d;
}

.modal-content .modal-body .webinar-config-form-row {
    clear: both;
}

/*----Hide button to add event if it is disabled, for example, in the case of zoom or fetch in case of custom--*/
.main .cb-global-webinar-events .app-main-content .main-list-add-btn.disabled {
    display: none;
}

/*--------------------------------------------------------------*/
/*----------------------Webinar Config Editor-------------------*/
/*--------------------------------------------------------------*/

.webinar-config-form-row,
.webinar-event-form-row {
    clear: both;
}

.webinar-config-form-row .webinar-config-form-label,
.webinar-config-form-row .webinar-config-form-input,
.webinar-event-form-row .webinar-event-form-label,
.webinar-event-form-row .webinar-event-form-input,
.webinar-config-form-row .webinar-config.form-label {
    display: inline-block;
    padding: 5px;
    margin-top: 0px;
}

.webinar-config-form-row .webinar-config.form-input {
    padding: 0px 5px;
    display: inline-block;
}

.webinar-config-form-input input.form-control {
    background: #ffffff;
}

/*
  The following is a somewhat short-cutted method to align reminder controls into a single line
  It may cause adverse effects if unexpected controls are added

.webinar-config-form-row .reminder-inline-controls div {
  float: left;
  padding: 5px;
}
*/

/*--------------------------------------------------------------*/
/*-------------------------Wizard Request-----------------------*/
/*--------------------------------------------------------------*/

.wizard-request-body {
    padding: 10px;
}

.wizardLabel {
    display: inline-block;
    margin-right: 10px;
    width: 130px;
}

/*--------------------------------------------------------------*/
/*-------------------------Webinar Helper-----------------------*/
/*--------------------------------------------------------------*/

/*-------------------Webinar Modal Config-----------------------*/

.modal-webinar-config .nav-tabs .nav-item,
.modal-webinar-event .nav-tabs .nav-item {
    width: 25%;
}

body .form-control {
    font-size: 16px;
    height: 39px;
    color: black;
    text-align: center;
}

.modal-webinar-config .webinar-config-form-label,
.modal-webinar-event .webinar-config-form-label,
.modal-webinar-config .webinar-config.form-label,
.modal-webinar-event .webinar-config.form-label {
    margin-top: 5px;
    width: 260px;
    text-align: left;
    vertical-align: top;
}

.modal-webinar-config .position-relative.form-group,
.modal-webinar-event .position-relative.form-group {
    height: 50px;
    width: 500px;
}

.modal-webinar-config .no-feedback.position-relative.form-group,
.modal-webinar-event .no-feedback.position-relative.form-group {
    height: 30px;
    width: 500px;
}

/*--Get rid of outline on chevron buttons--*/
.webinar-config-form-input svg:focus {
    outline: none;
}

.modal-webinar-config .nav-link,
.modal-webinar-event .nav-link {
    padding: 10px 10px 14px 10px;
}

.modal-webinar-config .invalid-feedback {
    margin-top: 0px;
}

.modal-webinar-config input[type="checkbox"] {
    margin-top: 19px;
}

.webinar-config-form-input.registration-required {
    text-align: left;
}

.zoom-host-id .position-relative.form-group {
    width: 300px;
}

.webinar-config-form-label.lookup-zoom-host-id {
    margin-top: 6px;
    width: 200px;
}

i#tooltip-host-id {
    padding-left: 7px;
    margin-top: 10px;
}

.modal-webinar-config .form-check-input {
    margin: 0px;
}

.webinar-config-form-row .switch {
    margin-top: 0px;
}

.webinar-config-form-row .reminder-inline-controls .switch .switch-slider {
    margin-top: 8px;
}

.modal-webinar-config .red,
.modal-webinar-event .red {
    margin-top: 5px;
    height: 42px;
}

.linenav-tabs .tab-content .tab-pane {
    padding: 24px 16px;
}

.cb-plugin-wizard .tab-content .tab-pane {
    padding: 0px 40px 50px 40px;
    min-height: 650px;
}

.modal-webinar-config .red-message,
.modal-webinar-event .red-message,
.add-bot .red {
    background: var(--cbot-pink);
    padding: 10px;
    border-radius: 3px;
    color: white;
}

.cb-plugin-wizard .error-message.red-message {
    background: var(--cbot-pink);
    text-align: center;
    font-size: 16px;
    width: 80vw;
    padding: 10px 5px;
    border-radius: 3px;
    color: white;
    font-weight: 700;
    position: fixed;
    top: 90px;
    z-index: 100;
    box-shadow: 5px 5px 18px 3px rgba(0, 0, 0, 0.18);
    max-width: 1420px;
}

.add-bot .green {
    background: var(--cbot-green);
    padding: 10px;
    border-radius: 3px;
    color: white;
}

/*
.modal-webinar-config button.bp3-button:focus,
.modal-webinar-event button.bp3-button:focus{
  outline: none;
}
*/

.modal-webinar-config .webinar-config-form-input-region.form-control,
.modal-webinar-event .webinar-config-form-input-region.form-control {
    width: 25%;
    float: left;
}

.modal-webinar-config .webinar-config-form-input-timezone.form-control,
.modal-webinar-event .webinar-config-form-input-timezone.form-control {
    width: 70%;
    float: right;
}

.reminder-time-default {
    font-size: 14px;
}

.reminder-details .reminder-scheduled {
    font-weight: 600;
}

/*---------------------------------------------------------------*/
/*------------------Scratch Card---------------------------------*/
/*---------------------------------------------------------------*/

.cb-scratchcard
    .scratch-card-image
    .airtable-config-form-input.start-image-library {
    max-height: 377px;
    overflow-y: scroll;
    width: 90%;
    margin: 0px auto;
    overflow-x: auto;
    border: 1px solid #e4e7ea;
    border-radius: 4px;
}

.cb-scratchcard .start-image {
    border: 2px solid #e4e7ea;
    cursor: pointer;
    padding: 2px;
    background: white;
}

.cb-scratchcard .start-image:nth-child(even) {
    margin: 12px 5px 12px 18px;
}
.cb-scratchcard .start-image:nth-child(odd) {
    margin: 12px 5px 12px 18px;
}

.cb-scratchcard .active.start-image {
    border: 3px solid #89b940;
    padding: 1px;
    background: white;
}

.cb-scratchcard .active.start-image:nth-child(even) {
    margin: 12px 5px 12px 18px;
}
.cb-scratchcard .active.start-image:nth-child(odd) {
    margin: 12px 5px 12px 18px;
}

.cb-scratchcard .scratchcard-webview-size {
    width: 50%;
    margin: 0px auto;
}

.cb-scratchcard .scratchcard-webview-size .airtable-config-form-label {
    width: 20%;
}

.cb-scratchcard .sendCustomMessageText textarea.form-control {
    width: 50%;
    text-align: left;
    resize: none;
}

.cb-scratchcard .scratchcard-webview-size div {
    display: block;
}

.cb-scratchcard .scratchcard-webview-size .airtable-config-form-input {
    width: 100%;
}

.cb-scratchcard .sendCustomMessageButton input.form-control {
    width: 50%;
}

.cb-airtable .claim-prize-button .airtable-config-form-input {
    width: 55%;
}

.modal-dialog .scratchcard-preview img,
.modal-dialog .scratchcard-preview canvas {
    border: 0px; /* undo img border set by fotoscript preview */
    border-image-width: 0px; /* undo img border set by fotoscript preview */
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.scratchcard-preview .wrapper {
    display: block;
    width: 100%;
    height: 560px;
    max-width: 955px;
    margin: 0 auto;
    border: 5px solid white;
}

.scratchcard-preview .container {
    position: relative;
    overflow: hidden;
    height: auto;
    width: 600px;
    padding-left: 0px; /* undo specification declared else where */
    padding-right: 0px; /* undo specification declared else where */
}

.scratchcard-preview .container > img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.scratchcard-preview .container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.scratchcard-preview .button-wrapper {
    width: 100%;
    text-align: center;
    padding-top: 10px;
    margin: 0 auto;
}

.spinwheel-editor .spinWheelButtonEditor .form-control,
.webviewButtonPreview .form-control {
    font-size: 18px;
    border-radius: 3px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    padding: 5px 30px;
    color: white;
}

.webviewButtonPreview .blue.disabled {
    cursor: not-allowed;
}

.spinwheel-editor .webviewButtonPreview button {
    min-width: 300px;
    color: white;
    font-size: 18px;
    border-radius: 3px;
    font-weight: 600;
    text-align: center;
    padding: 5px 30px;
    cursor: pointer;
    color: white;
}

.config-container.spinwheel-editor .config-left-panel .nav-item,
.config-container .config-left-panel .navbar-nav .nav-item .nav-link {
    width: 20%;
}

.spinwheel-editor.config-container
    .config-left-panel
    .preview-col
    input.form-control {
    width: 400px;
}

.webviewButtonPreview .form-control,
.webviewButtonPreview .form-control.is-invalid {
    color: black;
    font-size: 16px;
    font-weight: 400;
}

.spinwheel-editor .spinWheelButtonEditor .blue,
.webviewButtonPreview .blue,
.webviewButtonPreview .blue.disabled,
.webviewButtonPreview .blue:hover,
.webviewButtonPreview .blue:focus {
    background-color: #1c6bff;
    border: 1px solid #1c6bff;
    color: white;
    font-weight: 600;
}

.spinwheel-editor .spinWheelButtonEditor .black,
.webviewButtonPreview .black,
.webviewButtonPreview .black.disabled,
.webviewButtonPreview .black:hover,
.webviewButtonPreview .black:focus {
    background-color: #000000;
    border: 1px solid #000000;
    color: white;
    font-weight: 600;
}

.spinwheel-editor .spinWheelButtonEditor .pink,
.webviewButtonPreview .pink,
.webviewButtonPreview .pink.disabled,
.webviewButtonPreview .pink:hover,
.webviewButtonPreview .pink:focus {
    background-color: #ec87bf;
    border: 1px solid #ec87bf;
    color: white;
    font-weight: 600;
}

.spinwheel-editor .spinWheelButtonEditor .purple,
.webviewButtonPreview .purple,
.webviewButtonPreview .purple.disabled,
.webviewButtonPreview .purple:hover,
.webviewButtonPreview .purple:focus {
    background-color: #4f349f;
    border: 1px solid #4f349f;
    color: white;
    font-weight: 600;
}

.spinwheel-editor .spinWheelButtonEditor .red,
.webviewButtonPreview .red,
.webviewButtonPreview .red.disabled,
.webviewButtonPreview .red:hover,
.webviewButtonPreview .red:focus {
    background-color: #fc374a;
    border: 1px solid #fc374a;
    color: white;
    font-weight: 600;
}

.spinwheel-editor .spinWheelButtonEditor .yellow,
.webviewButtonPreview .yellow,
.webviewButtonPreview .yellow.disabled,
.webviewButtonPreview .yellow:hover,
.webviewButtonPreview .yellow:focus {
    background-color: #ffae00;
    border: 1px solid #ffae00;
    color: white;
    font-weight: 600;
}

.spinwheel-editor .spinWheelButtonEditor .green,
.webviewButtonPreview .green,
.webviewButtonPreview .green.disabled,
.webviewButtonPreview .green:hover,
.webviewButtonPreview .green:focus {
    background-color: #71b406;
    border: 1px solid #71b406;
    color: white;
    font-weight: 600;
}

.scratchcard-preview .button:focus {
    outline: none;
}

.scratchcard-preview .button {
    font-size: 18px;
    border-radius: 3px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    padding: 5px 30px;
    cursor: pointer;
    /* using blue theme attributes as default */
    color: white;
    background-color: #1c6bff;
    border: 1px solid #1c6bff;
}

.scratchcard-preview .theme-blue .button {
    background-color: #1c6bff;
    border: 1px solid #1c6bff;
}

.scratchcard-preview .theme-black .button {
    background-color: #000000;
    border: 1px solid #000000;
}

.scratchcard-preview .theme-pink .button {
    background-color: #ec87bf;
    border: 1px solid #ec87bf;
}

.scratchcard-preview .theme-purple .button {
    background-color: #4f349f;
    border: 1px solid #4f349f;
}

.scratchcard-preview .theme-red .button {
    background-color: #fc374a;
    border: 1px solid #fc374a;
}

.scratchcard-preview .theme-yellow .button {
    background-color: #ffc300;
    border: 1px solid #ffc300;
}

.scratchcard-preview .theme-green .button {
    background-color: #71b406;
    border: 1px solid #71b406;
}

.scratch-card-image {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 50px;
    border: 1px solid #43b9dd;
    border-radius: 5px;
    margin-right: 20px;
    min-height: 520px;
    box-shadow: 3px 4px 7px #a7aaac75;
}

.scratch-card-image .airtable-config-form-label {
    color: var(--cbot-blue);
    font-size: 20px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    font-weight: 600;
}

.scratch-card-image button.btn.btn-primary {
    width: 100%;
}

.cb-airtable .scratch-card-image .airtable-config-form-label {
    margin-top: 0px;
    display: block;
    margin-bottom: 25px;
}

.scratch-card-image .airtable-config-form-row {
    min-height: 0;
}

.cb-scratchcard .link-config-form-buttons-wrapper {
    width: 24%;
}

.cb-scratchcard .nav-item {
    width: 24%;
}

.scratchcard-image {
    text-align: center;
    margin-top: 40px;
}

.scratchcard-image img {
    border: 1px solid #e4e7ea;
}

.cb-scratchcard .scratch-card-image .airtable-config-form-label {
    margin-top: 0px;
    display: block;
    margin-bottom: 25px;
    border-radius: 4px 4px 0px 0px;
    padding: 10px 0px;
    background: var(--gradient-purple-teal-dark-1);
    color: white;
}

.cb-scratchcard .scratch-card-image.before .airtable-config-form-label {
    background: var(--gradient-purple-teal-dark-1);
    width: 100%;
}

.cb-scratchcard .scratch-card-image.after .airtable-config-form-label {
    background: var(--gradient-purple-teal-dark-3);
    width: 100%;
}

.scratch-card-image .airtable-config-form-input {
    width: 90%;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.cb-scratchcard button.fa.fa-close.btn.btn-secondary {
    background: white;
    color: #a7aaac;
    border: 2px solid var(--cbot-pink);
    border-radius: 18px;
    padding: 2px 6px;
    margin-left: 0px;
    margin-top: 2px;
    font-size: 14px;
}

.cb-scratchcard button.fa.fa-check.btn.btn-secondary {
    background: white;
    color: #a7aaac;
    border: 2px solid var(--cbot-green);
    border-radius: 18px;
    padding: 2px 5px;
    margin-left: 0px;
    margin-top: 5px;
    font-size: 14px;
}

.cb-scratchcard .airtable-config-form-input .row {
    margin-bottom: 10px;
}

.cb-scratchcard .collapse .helper-text {
    margin: 0px 0px 30px 0px;
}

.cb-scratchcard input.form-control[readonly] {
    border: 1px solid var(--cbot-form-border);
    background: #f8f8f8;
    text-align: left;
    padding-left: 25px;
}

.cb-scratchcard .param-header.col {
    font-size: 16px;
    padding-left: 25px;
}

.cb-scratchcard .wizard-answers-header .param-header.cbot-answer.col,
.cb-scratchcard .wizard-answer.col.param-col {
    max-width: 500px;
}

.cb-scratchcard .txt-clipboard {
    cursor: pointer;
}

/*--------------------------------------------------------------*/
/*-----------------------Bundle Options-------------------------*/
/*--------------------------------------------------------------*/

.order-title {
    font-size: 24px;
    font-weight: 600;
}

.order-input {
    display: inline-block;
    width: 700px;
    font-size: 16px;
}

.order-label {
    width: 125px;
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    vertical-align: top;
}

.order-text {
    font-size: 16px;
    margin-bottom: 50px;
    line-height: 2;
}

.order-agree-terms {
    font-size: 16px;
    margin-top: 40px;
    margin-left: 20px;
}

.order-label.payment-info {
    display: block;
    width: 500px;
}

.order-input.payment-info {
    margin-top: 15px;
    width: 450px;
}

.order-agree-terms {
    font-size: 16px;
}

.cb-interactions-bundle input.bp3-input {
    text-align: center;
}

.cb-interactions-bundle .linenav-tabs {
    width: 1400px;
    margin-right: auto;
    margin-left: auto;
}

.cb-order-configs
    button.main-list-add-btn.gallery-navigation.btn.btn-secondary.btn.btn-secondary,
.cb-interactions-bundle
    button.main-list-add-btn.gallery-navigation.btn.btn-secondary.btn.btn-secondary {
    float: left;
}

.cb-order .link-config-form-buttons-wrapper {
    width: 25%;
}

.interaction-config-form-input.interaction-bundle-select {
    margin-top: 13px;
    margin-left: 20px;
}

.cb-order-configs .add-btn-wrapper button {
    margin-left: 5px;
}

.cb-order .nav-item {
    width: 25%;
}

.cb-order .airtable-config-form-input {
    font-size: 16px;
    vertical-align: middle;
    border: 1px solid #e4e7ea;
    border-radius: 3px;
    padding: 6px;
    background: #f8f8f8;
    margin-top: 8px;
    cursor: not-allowed;
}

.cb-interactions-bundle .linenav-tabs .tab-content .tab-pane {
    padding: 50px 70px;
    min-height: 700px;
}

.bundle-options {
    font-size: 16px;
    margin-bottom: 15px;
}

.cb-interactions-bundle .interaction-config-form-input {
    width: 60%;
    display: inline-block;
    font-size: 16px;
    margin-top: 14px;
}

.interaction-config-form-input input.flatpickr-input {
    padding: 7px;
    margin-top: 5px;
    width: 100%;
    text-align: center;
    font-size: 15px;
    border: 1px solid #e4e7ea;
    border-radius: 0.25rem;
}

.interaction-config-form-input.remaining-note {
    text-align: center;
}

.interaction-config-form-input .bp3-control-group.bp3-numeric-input {
    margin-top: 8px;
}

.interaction-config-form-input.interaction-order-buttons button {
    margin-left: 10px;
    float: right;
}

.cb-interactions-bundle .interaction-config-form-label {
    width: 420px;
    text-align: left;
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
    margin-top: 14px;
}

.cb-interactions-bundle .bp3-input-group {
    width: 96%;
}

.interaction-config-form-row {
    min-height: 55px;
}

.interaction-config-form-input.interaction-coupon input {
    width: 88%;
    display: inline-block;
    margin-right: 10px;
}

.interaction-config-form-input.interaction-coupon button {
    float: right;
}

.interaction-config-form-input.order-total {
    font-size: 16px;
    margin-bottom: 15px;
    margin-top: 14px;
    font-weight: 600;
}

.interaction-config-form-label.order-total {
    font-weight: 600;
}

/*--------------------------------------------------------------*/
/*--------------------------Scoreboard--------------------------*/
/*--------------------------------------------------------------*/
.search-scoreboard-member-id input.form-control {
    width: 52%;
    display: inline-block;
    min-width: 475px;
}

.search-scoreboard-member-id button {
    margin-left: 10px;
}

.scoreboard-member-rank input.form-control {
    width: 52%;
    display: inline-block;
    min-width: 475px;
}

/*--------------------------------------------------------------*/
/*-----------------------Spin the Wheel-------------------------*/
/*--------------------------------------------------------------*/

.fotoscript-editor .wizard-answers-header.row {
    max-width: 328px;
    background: var(--cbot-blue);
    padding-top: 7px;
    margin-top: 12px;
    color: white;
    padding-bottom: 7px;
    font-weight: 500;
    font-size: 18px;
    border-radius: 5px 5px 0px 0px;
}

.fotoscript-editor .setup-params {
    max-width: 346px;
    margin-left: -16px;
}

.fotoscript-editor .setup-params .param-col {
    margin-bottom: 0px;
}

.config-container .config-left-panel .setup-params .param-col input {
    width: 100%;
    text-align: left;
}

.fotoscript-editor .param-col.wizard-answer.param-key.col input {
    width: 100%;
    max-width: 327px;
}

.spinwheel-editor .wizard-answers-header.row {
    max-width: 454px;
    background: var(--cbot-blue);
    padding-top: 7px;
    margin-left: -9px;
    margin-top: 12px;
    color: white;
    padding-bottom: 7px;
    font-weight: 500;
    font-size: 18px;
    border-radius: 5px 5px 0px 0px;
}

.spinwheel-editor .param-col.wizard-answer.col {
    margin-left: 5px;
}

.spinwheel-editor .param-col.wizard-answer.col,
.param-col.wizard-description.col {
    background: transparent;
    border-bottom: none;
    max-width: 225px;
}

.spinwheel-editor.config-container
    .config-left-panel
    .param-col.wizard-answer
    input {
    cursor: pointer;
    text-align: left;
}

.spinwheel-editor.config-container
    .config-left-panel
    .param-col.wizard-description
    input {
    cursor: not-allowed;
    text-align: left;
}

.spinwheel-editor.config-container .config-left-panel .param-col input {
    width: 230px;
}

.spinwheel-editor .CustomMessageWebview {
    width: 90%;
    margin: 0px auto;
}
.sendCustomMessageText .position-relative.form-group {
    margin-bottom: 0px;
}

.sendCustomMessageText textarea.form-control {
    background: #f8f8f8;
    border: 3px solid #e4e7ea;
    border-bottom: none;
    border-radius: 14px 14px 0px 0px;
    height: 110px;
    padding: 15px;
    width: 90%;
    margin: 0px auto;
}

.app .sendCustomMessageText .form-control:focus {
    border: 3px solid #e4e7ea;
    border-bottom: none;
}

.sendCustomMessageButton input.form-control {
    border: 3px solid #e4e7ea;
    border-top: 2px solid #e4e7ea;
    border-radius: 0px 0px 14px 14px;
    width: 90%;
    margin: 0px auto;
}

.app .sendCustomMessageButton .form-control:focus {
    border: 3px solid #e4e7ea;
    border-top: 2px solid #e4e7ea;
}

.spinwheel-editor .ctl-btns.fotoscript-dropdown {
    margin-right: 30px;
}

.spinwheel-editor .footnote {
    text-align: left;
}

#config-container.spinwheel-editor .config-right-panel {
    width: 60%;
    padding-top: 20px;
    min-width: 825px;
}

.spinwheel-editor #config-container .config-right-panel {
    min-width: 950px;
}

.spinwheel-preview button.btn.btn-primary {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}

.spinwheel-editor #canvas-wrapper {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    background: #e9efff;
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #daddde;
}

.spinwheel-editor.config-container
    .config-left-panel
    .bp3-numeric-input
    .bp3-input-group {
    width: 120px;
}

.spinwheel-editor.config-container
    .config-left-panel
    .bp3-numeric-input.prize-font-size
    .bp3-input-group {
    width: 120px;
}

/***
#config-container.spinwheel-editor .text-input.spin-wheel-locale-wrapper,
#config-container.spinwheel-editor .text-input.spin-wheel-max-view-wrapper {
  display: inline-block;
  width: 50%;
  margin-right: 0px;
  min-width: 200px;
}
***/

.check-prize-flow-id {
    border: 1px solid #e4e7ea;
    border-radius: 0.25rem;
    display: inline-block;
    padding: 5px;
    width: 100%;
    height: 39px;
    text-align: center;
    cursor: not-allowed;
}

button.save-spin-wheel.btn.btn-primary:enabled {
    border: 1px solid var(--cbot-green-hover) !important;
    background: var(--cbot-green-hover) !important;
    font-weight: 600 !important;
}

button.save-spin-wheel.save-spin-wheel-wizard {
    border: 1px solid var(--cbot-green-hover) !important;
    background: var(--cbot-green-hover) !important;
    font-weight: 600 !important;
    width: 100%;
}

.spinwheel-editor .param-col.wizard-answer.col.prize-id {
    max-width: none;
}

.param-col.wizard-answer.prize-id.col input {
    width: 100%;
    max-width: 454px;
}

.spinwheel-editor.config-container
    .config-left-panel
    .spin-wheel-max-view-wrapper
    .bp3-input-group {
    width: 150px;
}

.spinwheel-editor .text-weight-style-wrapper {
    border: 1px solid var(--cbot-form-border);
    border-radius: 3px;
    height: 34px;
    display: inline-block;
    cursor: pointer;
    width: 120px;
    float: none;
    vertical-align: top;
    margin: 20px 12px 0px 12px;
}

.spinwheel-editor .ReactFontPicker_Wrapper {
    height: 32px;
}

.spinwheel-editor .text-lineHeight-wrapper {
    vertical-align: top;
    display: inline-block;
    float: none;
    margin-right: 0px;
}

.spinwheel-editor .ReactFontPicker {
    width: 100%;
}

.spinwheel-editor button.add-prize-button.btn.btn-primary {
    width: 100%;
    margin-bottom: 50px;
}

.spinwheel-editor .colorpicker-wrapper {
    display: inline-block;
    width: 25%;
    height: 55px;
}

.spinwheel-editor .color-swatch-value {
    width: 75px !important;
}

.spinwheel-editor .text-from-center-wrapper {
    display: inline-block;
    vertical-align: top;
}

.spinwheel-editor.config-container .config-left-panel .bp3-icon-bold {
    padding: 7px 16px 7px 16px;
    box-shadow: none;
}

.config-container.spinwheel-editor .config-left-panel .bp3-icon-bold {
    border-right: none;
    width: 100%;
}

.config-container.spinwheel-editor .config-left-panel .bp3-icon-bold.active {
    background: #f8f8f8;
}

.config-container.spinwheel-editor .config-left-panel .bp3-icon-bold:hover {
    background: #f8f8f8;
}

.config-container.spinwheel-editor .config-left-panel .bp3-icon-bold svg {
    margin-right: auto;
    margin-left: auto;
}

.spinwheel-editor .prize-details-wrapper.prize-details-background-color-wrapper,
.spinwheel-editor .prize-details-wrapper.prize-details-text-color-wrapper {
    height: 58px;
}

.spinwheel-editor .nav-link.active i.fas.fa-asterisk::before {
    border: 4px solid var(--cbot-blue);
    border-radius: 25px;
    font-size: 20px !important;
    margin: 6px 0px;
}

.app .config-container.spinwheel-editor .tab-content {
    max-width: 500px;
}

.spinwheel-editor.config-container .config-left-panel .nav {
    width: 500px;
}

#config-container.spinwheel-editor.config-container .config-left-panel {
    width: 500px;
}

.spinwheel-editor .nav-link i.fas.fa-asterisk::before {
    border: 4px solid var(--cbot-blue-dark);
    border-radius: 25px;
    font-size: 20px !important;
    margin: 6px 0px;
}

#config-container.spinwheel-editor .ruleblocks-wrapper .text-input:first-child {
    background: #e0ddfc;
    margin-bottom: 15px;
    padding-bottom: 10px;
    padding: 10px 15px 10px 15px;
    font-weight: 600;
}

#config-container.spinwheel-editor
    .ruleblocks-wrapper
    .text-input:first-child
    .config-fallback {
    width: 285px;
    margin-top: 7px;
    cursor: grab;
    font-weight: 600;
}

.spinwheel-editor .ruleblocks-wrapper .config-fallback .fa-arrows-alt {
    color: rgb(0, 0, 0, 0.3);
}

.spinwheel-editor .output-title {
    font-weight: 600;
    font-size: 15px;
}

.spinwheel-editor .prize-details-name-wrapper .output-title,
.spinwheel-editor .prize-details-value-wrapper .output-title {
    margin-top: 10px;
    width: 105px;
    display: inline-block;
    vertical-align: top;
}

.spinwheel-editor .ruleblocks-wrapper .text-input {
    margin-bottom: 0px;
    border-radius: 0px;
    min-width: 250px;
    padding: 10px 15px;
}

.config-container.spinwheel-editor
    .config-left-panel
    button.far.fa-clone.btn.btn-secondary {
    background: white;
    color: #a7aaac;
    border: 2px solid var(--cbot-teal);
    border-radius: 18px;
    padding: 2px 6px;
    margin-left: 0px;
    margin-top: 2px;
    font-size: 14px;
    margin-right: 5px;
}

.spinwheel-editor .ruleblocks-wrapper .text-input.prize-details-name-wrapper {
    padding: 0px 15px;
}

.text-output.prize-details-value-number,
.text-output.prize-details-name-text {
    display: inline-block;
    width: 70%;
}

.prize-details-wrapper {
    width: 30%;
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
}

.spinwheel-editor .prize-details .color-swatch-value {
    width: 100px !important;
}

.spinwheel-editor .prize-details-name-wrapper .prize-details-value-label,
.spinwheel-editor .prize-details-value-wrapper .prize-details-name-label {
    vertical-align: top;
    display: inline-block;
}

.spinwheel-editor .prize-details-name-text textarea,
.spinwheel-editor .prize-details-value-number input {
    width: 300px;
    margin-left: 10px;
}

#config-container.spinwheel-editor
    .config-left-panel
    .prize-details-name-text
    textarea {
    resize: vertical;
    min-height: 38px;
    width: 300px;
    text-align: center;
}

.prize-details-name-text .invalid-feedback,
.prize-details-value-number .invalid-feedback {
    text-align: center;
    margin-left: 10px;
}

.spinwheel-editor .wheel-pointer-style .colorpicker-wrapper {
    width: 33%;
    margin-top: 5px;
}

.spinwheel-editor
    .wheel-pointer-style
    .colorpicker-wrapper
    .color-swatch-value {
    width: 130px !important;
}

.modal-dialog.image-preview .spinwheel-preview .tab-pane {
    background: #e9efff;
}

.spinwheel-preview .wrapper {
    border: 5px solid transparent;
}

.spinwheel-preview-option {
    display: inline-block;
    margin-right: 10px;
}

.spinwheel-preview-option.spinwheel-preview-select .form-control {
    width: 375px;
}

.spinwheel-preview-wrapper {
    margin-right: auto;
    margin-left: auto;
}

.spinwheel-editor .warning-message {
    text-align: left;
}

.spinwheel-editor .preview-col.col {
    min-width: 425px;
}

/*--------------------------------------------------------------*/
/*-------------------------Animation----------------------------*/
/*--------------------------------------------------------------*/

@keyframes wiggle {
    0%,
    7% {
        transform: rotateZ(0);
    }
    13% {
        transform: rotateZ(-15deg);
    }
    18% {
        transform: rotateZ(10deg);
    }
    23% {
        transform: rotateZ(-10deg);
    }
    28% {
        transform: rotateZ(6deg);
    }
    33% {
        transform: rotateZ(-4deg);
    }
    40%,
    100% {
        transform: rotateZ(0);
    }
}

@keyframes wiggle-small {
    0%,
    7% {
        transform: rotateZ(0);
    }
    13% {
        transform: rotateZ(-1deg);
    }
    18% {
        transform: rotateZ(1deg);
    }
    23% {
        transform: rotateZ(-1deg);
    }
    28% {
        transform: rotateZ(1deg);
    }
    33% {
        transform: rotateZ(-1deg);
    }
    40%,
    100% {
        transform: rotateZ(0);
    }
}

.report-wait-1 {
    display: inline-block;
    animation: blinkWord 0.5s ease 1;
    -webkit-animation: blinkWord 0.5s ease 1;
    opacity: 0;
    animation-fill-mode: forwards;
}

.report-wait-2 {
    display: inline-block;
    animation: blinkWord 0.5s ease 1;
    -webkit-animation: blinkWord 0.5s ease 1;
    animation-delay: 2s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.report-wait-3 {
    display: inline-block;
    animation: blinkWord 2s ease 1;
    -webkit-animation: blinkWord 2s ease 1;
    animation-delay: 3s;
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes blinkWord {
    to {
        opacity: 1;
    }
}

/*=== Basic box styling  ===*/
.box {
    background: #23a3d3;
    width: 90px;
    height: 70px;
    padding: 20px;
    text-align: center;
    color: white;
    border-radius: 7px;
    float: left;
    margin: 4px;
    font-size: 14px;
    font-family: "Arial";
    text-transform: uppercase;
}

/*=== Trigger  ===*/
.animate {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*=== Optional Delays, change values here  ===*/
.one-delay {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

.two-delay {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
}

.three {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
}

/*----------------------------FadeOut----------------------------*/

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ----- Works but needs to be renamed to something else--
.fadeout {
  -webkit-animation-name: fadeOut 2s ease;
  animation-name: fadeOut 2s;
}


body .ruleblock.fadeout {
  opacity: 0.1;
  transition: opacity 500ms ease-in;
}
*/

/*----------------------------FadeIn----------------------------*/

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/*=== FADE IN DOWN ===*/
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/*==== FADE IN ===*/
@-webkit-keyframes fadeInSlow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeInSlow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeInSlow {
    -webkit-animation-name: fadeInSlow;
    animation-name: fadeInSlow;
}