@charset "UTF-8";


/* Typography Styles */
/* @import url("https://use.typekit.net/pwp1udi.css"); */

@font-face {
    font-family: "sofia-pro";
    src: url('/lz_styles/fonts/sophia/woff2/sofiapro-400.woff2');
    src: url('/lz_styles/fonts/sophia/woff/sofiapro-400.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "sofia-pro";
    src: url('/lz_styles/fonts/sophia/woff2/sofiapro-200.woff2');
    src: url('/lz_styles/fonts/sophia/woff/sofiapro-200.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "sofia-pro";
    src: url('/lz_styles/fonts/sophia/woff2/sofiapro-300.woff2');
    src: url('/lz_styles/fonts/sophia/woff/sofiapro-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "sofia-pro";
    src: url('/lz_styles/fonts/sophia/woff2/sofiapro-400.woff2');
    src: url('/lz_styles/fonts/sophia/woff/sofiapro-400.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "sofia-pro";
    src: url('/lz_styles/fonts/sophia/woff2/sofiapro-600.woff2');
    src: url('/lz_styles/fonts/sophia/woff/sofiapro-600.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "sofia-pro";
    src: url('/lz_styles/fonts/sophia/woff2/sofiapro-900.woff2');
    src: url('/lz_styles/fonts/sophia/woff/sofiapro-900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}


body.captina-backend{
  font-family:'sofia-pro', sans-serif;
  font-weight:400;
  font-style:normal;
  background-color: var(--body_bg);
}

h1, h2, h3, h4, h5{
  font-family:'sofia-pro', sans-serif;
  font-weight:700;
  font-style:normal;
}

button{
  font-family:'sofia-pro', sans-serif;
  font-weight:400;
  font-style:normal;
}


/* Font Awesome Styles */

.icon::before { /* renders pseudo-element icons better? */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}


/**************************************
***** SYSTEM UI COLOR DEFINITIONS *****
**************************************/

:root{

    /* Vinoshipper Color Palettes */

    --vs-blue-100:              #cfe3fA;
    --vs-blue-200:              #a0c6f5;
    --vs-blue-300:              #70aaf0;
    --vs-blue-400:              #408eeb;
    --vs-blue-500:              #1772e0;
    --vs-blue-600:              #125bb3;
    --vs-blue-700:              #0e4486;
    --vs-blue-800:              #092e5a;
    --vs-blue-900:              #05172d;

    --vs-purple-100:            #e1c6ee;
    --vs-purple-200:            #c38dde;
    --vs-purple-300:            #a555cd;
    --vs-purple-400:            #8031A7;    /* brand color */
    --vs-purple-500:            #6b298b;
    --vs-purple-600:            #55216f;
    --vs-purple-700:            #401854;
    --vs-purple-800:            #2b1038;
    --vs-purple-900:            #15081c;

    --vs-pink-100:              #f7d6e6;
    --vs-pink-200:              #efadce;
    --vs-pink-300:              #e685b5;
    --vs-pink-400:              #de5c9d;
    --vs-pink-500:              #d63384;
    --vs-pink-600:              #ab296a;
    --vs-pink-700:              #801f4f;
    --vs-pink-800:              #561435;
    --vs-pink-900:              #2b0a1a;

    --vs-red-100:               #f8d7da;
    --vs-red-200:               #f1aeb5;
    --vs-red-300:               #ea868f;
    --vs-red-400:               #e35d6a;
    --vs-red-500:               #dc3545;
    --vs-red-600:               #b02a37;
    --vs-red-700:               #842029;
    --vs-red-800:               #58151c;
    --vs-red-900:               #2c0b0e;

    --vs-yellow-100:            #fff3cd;
    --vs-yellow-200:            #ffe69c;
    --vs-yellow-300:            #ffda6a;
    --vs-yellow-400:            #ffcd39;
    --vs-yellow-500:            #ffc107;
    --vs-yellow-600:            #cc9a06;
    --vs-yellow-700:            #997404;
    --vs-yellow-800:            #664d03;
    --vs-yellow-900:            #332701;

    --vs-green-100:             #d1e7dd;
    --vs-green-200:             #a3cfbb;
    --vs-green-300:             #75b798;
    --vs-green-400:             #479f76;
    --vs-green-500:             #198754;
    --vs-green-600:             #146c43;
    --vs-green-700:             #0f5132;
    --vs-green-800:             #0a3622;
    --vs-green-900:             #051b11;

    --vs-gray-100:              #f8f9fa;
    --vs-gray-200:              #E9ECEF;
    --vs-gray-300:              #dee2e6;
    --vs-gray-400:              #ced4da;
    --vs-gray-500:              #adb5bd;
    --vs-gray-600:              #6C757D;
    --vs-gray-700:              #495057;
    --vs-gray-800:              #343a40;
    --vs-gray-900:              #212529;

    --vs-white:                 #fff;
    --vs-black:                 #000;


    /* CompleteDTC Theme */

    --cdtc-brand:               #8031A7;
    --cdtc-primary:             var(--vs-blue-600);
    --cdtc-secondary:           var(--vs-pink-500);
    --cdtc-tertiary:            var(--vs-gray-900);
    --cdtc-primary-accent:      var(--vs-blue-200);
    --cdtc-secondary-accent:    var(--vs-pink-100);
    --cdtc-tertiary-accent:     var(--vs-gray-100);

    --cdtc-active:              var(--vs-pink-500);

    --cdtc-text:                var(--vs-gray-900);
    --cdtc-text-muted:          var(--vs-gray-600);

    --cdtc-border:              var(--vs-gray-400);
    --cdtc-border-light:        var(--vs-gray-200);
    --cdtc-border-dark:         var(--vs-gray-500);


    /* old schemes - phase out */

    --vs-brand-dark:            #306;
    --vs-primary:               #1772e0;
    --vs-success:               #198754;
    --vs-danger:                #dc3545;
    --vs-warning:               #fd7e14;
    --vs-info:                  #ffc107;
    --vs-active:                #606;

    /* base scheme - also phase out */
    --base_text_color:#333;
    --color2:         var(--vs-gray-200);  /* light green */
    --color3:         var(--vs-gray-200);  /* dark blue */
    --color3a:        var(--vs-gray-600);  /*#70aacc; slight dark offset from color3 */
    --color4:         var(--vs-primary);   /* strong dark blue */
    --color5:         #0094e3;           /* bright blue */
    --color6:         var(--vs-gray-200);  /* lighter blue */
    --color6a:        #79a2c5;           /* color 6 accent */
    --color7:         var(--vs-active);    /* anchor: deep dark blue */

    --ada_grey:         #6C757D;
    /* end base scheme */

    /* Applied Colors - need to update/consolidate */

    --close_icon_color:           var(--vs-gray-600);
    --close_icon_color_hover:     var(--vs-primary);

    --setup_header_bg:            var(--color3a);
    --body-text:                  var(--cdtc-tertiary);
    --callout_bg:                 var(--vs-gray-200);

    --body_bg:                    var(--vs-white);
    --inner_wrapper_bg:           #eee;
    --inner_wrapper_border:       var(--color3);
    --main_content_bg:            var(--vs-white);

    --header_bg:                  var(--color6);
    --header_color:               var(--base_text_color);

    --table_header_bg:            var(--color6);
    --table_header_color:         var(--base_text_color);
    --table_header_border:        var(--color6a);

    --edit_window_border_color:   var(--color7);
    --main_content_border_color:  #ddd;
    --primary_border_color:       var(--color3);

    --tab_menu_color_normal:      var(--cdtc-primary);
    --tab_menu_bg_normal:         var(--vs-white);
    --tab_menu_border_normal:     var(--cdtc-border);
    --tab_menu_color_active:      var(--vs-white);
    --tab_menu_bg_active:         var(--cdtc-active);
    --tab_menu_border_active:     var(--cdtc-active);

    --topmenu_active-color:       var(--vs-gray-600);
    --topmenu_border_color:       var(--color7);          /* should be color3 */
    --topmenu_divider_color:      var(--color6a);
    --topmenu_normal_bg:          var(--color2);          /* should be color2 */
    --topmenu_hover_bg:           var(--color4);          /* should be color4 */
    --topmenu_normal_color:       var(--base_text_color); /* should be color1 */
    --topmenu_hover_color:        var(--color6);          /* should be color2 */

    --side_div_bg:                var(--color6);
    --side_div_border_color:      var(--color3);
    --side_div_color:             var(--color4);          /* should be color4 */

    --alert_bg:                   var(--color3);
    --alert_alt_bg:               var(--color4);
    --alert_border_color:         var(--primary_border_color);

    --btn_blue_bg:                var(--vs-blue-500);
    --btn_blue_hover:             var(--vs-blue-400);

    --btn_green_bg:               var(--vs-green-500);
    --btn_green_hover:            var(--vs-green-400);

    --btn_red_bg:                 var(--vs-red-500);
    --btn_red_hover:              var(--vs-red-400);

    --btn_primary_action:         var(--cdtc-primary);

    /*
    --tab_bg: var(--color6);
    --tab_active_bg: var(--color2);
    */
    --global-font-size:            11pt;

}


/**************************************
*****    GLOBAL ACTION STYLES     *****
**************************************/

.actionable{
    color:var(--cdtc-primary) !important;
    cursor:pointer;
}
.actionable:hover{
    text-decoration:underline;
}

.ada_grey {
    color: var(--ada_grey);
}

h1 {
    font-weight: 700!important;
}


/**************************************
*****  INLINE HELP POPUP STYLES   *****
**************************************/

div.cp_help_wrapper {
    position: relative;
    float: right !important;
    margin-right: 10px;
    /* z-index: 1; */
}

div.cp_help_wrapper.absolute {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

div.cp_help_wrapper.start {
    float: left !important;
    margin-left: 3px;
}

div.cp_help_wrapper.absolute {
    position: absolute;
}

div.cp_help_wrapper.page,
div.cp_help_wrapper.tutorial {
    float: unset !important;
    display: inline-block;
    margin-left: 1em;
    margin-right: unset;
    position: absolute;
    left: 10px;
    top: 10px;
}

div.cp_help_wrapper.tutorial{
  cursor:pointer;
}

li.menu_li div.cp_help_wrapper {
    display: none;
}

div.cp_help_wrapper div.cp_help {
    position: relative;
    text-align: center;
    background-color: transparent; /*#9CBBCA;*/
    border-radius: 50%;
    width: 13px;
    height: 13px;
    cursor: pointer;
    font-family: 'sofia-pro',arial, sans-serif;
}

div.cp_help_wrapper.left div.cp_help {
    right: 1em;
}

div.cp_help_wrapper div.help_topic_title h3 {
    margin-top: 0 !important;
    border: none;
}

div.cp_help_wrapper h3 {
    font-weight: bold !important;
    font-size: 16px !important;
    margin-bottom:16px;
}

div.cp_help_wrapper h4 {
    font-weight: bold !important;
    font-size:   15px !important;
    margin-top:  0;
}

div.cp_help_wrapper.tutorial h4 {
    background-color: rgba(0,0,0,0.07) !important;
    padding: 0.25em;
}

div.cp_help_wrapper:before {
    content:"\f05a";
    color:var(--btn_primary_action);
    font-family:"Font Awesome 6 Pro",sans-serif;
    font-size:14px;
    cursor: pointer;
}

.menu_ul div.cp_help_wrapper:before {
    color:var(--vs-white);
}

div.cp_help_wrapper div.cp_help.v2 {
    position: fixed;
    display: none;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(100,100,100,0.3);
    border-radius: unset;
    justify-content: center;
    align-items: center;
}

div.cp_help_wrapper div.cp_help.help_icon:before {
    content: unset;
    width: 18px;
    height: 18px;
}

div.cp_help_wrapper.tutorial:before {
  content:"\f51c";   /* chalkboard-user */
  position:fixed;
  left:8px;
  bottom:12px;
  font:var(--fa-font-light);
  font-size:24px !important;
  z-index:100;
}

div.cp_help_wrapper.page div.cp_help {
    width: 18px;
    height: 18px;
    background: url("/lz/lz_img/info_50.png") no-repeat transparent center center / 18px 18px;
}

div.cp_help_wrapper.page div.cp_help:before {
    content: unset;
}

div.cp_help_wrapper div.cp_help.hoverclass:hover div.cp_help_inner_wrapper {
    display: grid;
    transform-origin: 100% 0;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
}

div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper {    /* The tooltip */
    text-align: left;
    background-color: #fff;
    padding: 20px;
    border: 1px solid rgba(120,150,150,0.4);
    border-radius: 12px;
    color: #444400;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.7em;
    overflow: hidden;
    position: relative;
    width: 50vw;
    min-width: 300px;
    z-index: 9999999;
    font-family: 'sofia-pro',arial, sans-serif;
}

div.cp_help_wrapper div.cp_help.v2 div.cp_help_inner_wrapper {
    display: unset;
    position: relative;
    box-shadow: unset;
}

div.cp_help_wrapper div.cp_help div.help_topic_body {
    overflow: hidden;
}


/*
There are three built-in vertical class variants: below, above, and middle
 */

div.cp_help_wrapper div.cp_help.below div.cp_help_inner_wrapper {
    position: fixed;
    left: unset;
    right: unset;
}
div.cp_help_wrapper div.cp_help.above div.cp_help_inner_wrapper {
    transform: translateY(10em);
}
div.cp_help_wrapper div.cp_help.middle div.cp_help_inner_wrapper {
    transform: translateY(-10em);
}
/*
There are three built-in horizontal class variants: left, right, and centered
*/
div.cp_help_wrapper div.cp_help.left div.cp_help_inner_wrapper {
    transform: translateX(-90%);
}
div.cp_help_wrapper div.cp_help.right div.cp_help_inner_wrapper {
    transform: translateX(90%);
}
div.cp_help_wrapper div.cp_help.centered div.cp_help_inner_wrapper {
    transform: translateX(-50%);
}
/*
There are some combinatorial situations
*/
div.cp_help_wrapper div.cp_help.above.left div.cp_help_inner_wrapper {
    transform: translateX(-50%) translateY(-90%);
}
/*
There are some optional classes
*/
div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper .help_topic_bodies_wrapper {
    height: 410px;
}
div.cp_help_wrapper div.cp_help.short div.cp_help_inner_wrapper {
    max-height: 200px;
}
div.cp_help_wrapper div.cp_help.short div.cp_help_inner_wrapper .help_topic_bodies_wrapper {
    max-height: 175px;
}
div.cp_help_wrapper div.cp_help.wide div.cp_help_inner_wrapper {
    width: 600px;
}
div.cp_help_wrapper div.cp_help.wide.left div.cp_help_inner_wrapper {
    /*left: -610px;*/
}
div.cp_help_wrapper div.cp_help.wide.centered div.cp_help_inner_wrapper {
    left: 300px;
}
div.cp_help_wrapper.page div.cp_help.page div.cp_help_inner_wrapper {
    background-color: #fafafa !important;
    width: 700px;
    top: 10px;
    left: 5px;
}
div.cp_help_wrapper.page div.cp_help.page.centered div {
    left: -350px;
}
div.cp_help_wrapper.tutorial div.cp_help.tutorial div.cp_help_inner_wrapper { /* full page */
    background-color: #fff !important;
    width: auto;
    max-width: 85vw;
    height: calc(90vh - 160px);
    min-height: calc(90vh - 160px);
    top: unset;
    left: unset;
    border-radius: 0 12px 12px;
    align-content: baseline;
    transform: translateX(0%);
}
div.cp_help_wrapper.tutorial div.cp_help.tutorial div.cp_help_inner_wrapper .help_topic_bodies_wrapper {
    height: calc(90vh - 190px);
}

div.cp_help_wrapper div.cp_help.tutorial div.cp_help_inner_wrapper .help_topic_body {
    height: auto;
    max-height: unset;
    column-count: 2;
    column-gap: 40px;
    padding: 10px 20px 20px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

div.cp_help_wrapper div.cp_help.help_icon {
    background: url("/lz/lz_img/help_50.png") no-repeat transparent center center / 18px 18px;
}

div.cp_help_wrapper div.cp_help.tutorial {
    background: url("/lz/lz_img/icon_tutorial_40.png") no-repeat transparent center center / 32px 32px;
    width: 32px;
    height: 32px;
    border-radius: 0;
    margin-top: 8px;
}

/* div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper * {
    color: inherit;
    background-color: inherit;
    font-size: inherit;
    line-height: inherit;
    padding-right: 0.5em;
} */

div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper img {
    padding-bottom: 0;
}
div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper li {
    margin-bottom: 0;
}
div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper blockquote {
    margin-left: 2em;
}

div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper:before { /* The pointer of the tooltip */

}

div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper div.help_topic_bodies_wrapper {
    overflow-y: auto;
    height: calc(100% - 40px);
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 1em 0.5em;
}

div.help_topic_bodies_wrapper p,
div.help_topic_bodies_wrapper li {
    line-height: 1.4em;
}

/* Prevents the tooltip from being hidden; based on "below centered" */
div.cp_help_wrapper div.cp_help div.cp_help_inner_wrapper:after {
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}
div.cp_help_wrapper div.cp_help.above div.cp_help_inner_wrapper:after {
    /* move the padding below */
    top: unset;
    bottom: -40px;
}

div.cp_help_wrapper div.cp_help.left div.cp_help_inner_wrapper:after {
    left: unset;
    right: -40px;
    width: 40px;
    height: 100%;
}
div.cp_help_wrapper div.cp_help.right div.cp_help_inner_wrapper:after {
    top: unset;
    left: -40px;
    width: 40px;
    height: 100%;
}

@media all and (max-width: 700px) {
    div.cp_help_wrapper {
        display: none !important; /* don't show help on mobile */
    }
}


/***** NEW BOX TYPE POPUP *****/
#box_edit_wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    background-color: rgba(200,200,200,0.5);
    z-index: 999;
}
.box_edit_innards {
    width: 430px;
    min-height: 200px;
    height: min-content;
    padding-bottom: 1.5em;
    background-color: #fff;
    margin-top: 20vh;
    position: relative;
    text-align: center;
    font-size: 13px;
    font-family: 'sofia-pro',arial, sans-serif;
}
.box_edit_innards h4 {
    background-color: #333;
    padding: 15px 0;
    margin: 0 0 1em 0;
    color: #fff;
    text-align: center;
}
.box_edit_innards p {
    font-size: 13px;
    text-align: justify;
}
.box_fields_wrapper {
    padding: 0 50px;
}
.box_fields_wrapper div.lz_wrapped_label {
    color: var(--side_div_color);
    display: block;
    font-size: inherit;
    text-align: left;
    margin-bottom: 1em;
}
.box_edit_innards .lz_label {
    color: inherit;
    display: block;
    font-size: 16px;
}
.box_edit_innards .dimensions {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.box_edit_innards .lz_textbox,
.box_edit_innards .dimensions input {
    font-size: 13px;
}
.box_edit_innards .dimensions input {
    width: 5em;
}
.bottom_btns {
    margin-top: 2em;
}
.bottom_btns .lz_btn_10 {
    margin: 0 1em;
}



/***** HELP UI STYLES *****/
.cp_help_bestpractice,
.cp_help_warning {
    margin-left: 3em !important;
    text-indent: -17px !important;
}
.cp_help_bestpractice::before {
    content: '☛' !important;
    color: var(--vs-green-500) !important;
    font-size: 18px !important;
}
.cp_help_warning::before {
    content: '⚠︎';
    color: red;
    font-size: 15px !important;
    font-weight: bold;
    vertical-align: middle;
    display: inline;
    padding-right: 3px;
}
.cp_help_btn {
    font-size: 10px !important;
    padding: 0.25em 1em !important;
    border: none !important;
    border-radius: 0.25em !important;
    color: #fff !important;
    display: inline-block !important;
    text-indent: 0 !important;
    font-family:'sofia-pro',arial, sans-serif !important;
}
.cp_help_btn_red {
    background-color: var(--vs-red-500) !important;
}
.cp_help_btn_blue {
    background-color: var(--vs-blue-500) !important;
}
.cp_help_btn_green {
    background-color: var(--vs-green-500) !important;
}

/* CSS animation for INLINE HELP */

@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

/*
ATT deep blue #0057b8; font-size: 1rem; line-height: 1.5rem
 */