:root {
    --light-green: #d9cec5;
    --medium-gray: #404040;
    --red: #a63736;
    --light-red: #c2413e;
}

#html-main, .body-main {
    background-color: #ffffff;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    font-family: Arial, Verdana, Tahoma, sans-serif;
    font-size: 1em !important;
    color: #4E4E4E;
}

textarea, input, select {
    font-family: Arial, Verdana, Tahoma, sans-serif;
    padding: 5px 5px;
    border-radius: 4px;
    border: 1px solid gray;
    box-sizing: border-box;
}

table {
}

.body-main {
    display: block;
    text-align: justify;
}



.make-it-center {
    margin: auto;
    height: auto;
    /*background: url("https://www.zenfoods.com/sites/all/themes/zenfoods2012/images/bkg-enzo.png") no-repeat center top;*/
}


.main-content-block {
    height: auto;
    margin-top: 20px;
    line-height: 145%;
}

#bkg-page {
    max-width: 1000px !important;
    width:100%;
    overflow: hidden;
    margin: auto;
}

.clear {
    clear: both;
    font-size: 0px;
    line-height: 0px;
    visibility: collapse;
}

a {
    color: #8d6e00;
}


    a:hover {
        color: #8d6e00;
        text-decoration: none;
    }


    a:visited {
        color: #8d6e00;
    }


p {
    margin: 0px;
    padding: 0 0 15px 0;
}


/** FONT headers **/
h4, h5, h6 {
    line-height: normal;
    font-family: Arial, Verdana, Tahoma, sans-serif;
    color: var(--medium-gray);
    margin-bottom: 10px;
}

h1, h1.title {
    font-size: 2.2em;
    margin-bottom: 2px;
    font-weight: normal;
    margin-left: 0px;
    text-align: center;
    line-height: normal;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform:uppercase;
    color: #922a36;
    margin-bottom: 10px;
}

h2 {
    font-size: 1.8em;
    font-weight: normal;
    padding: 0;
    line-height: normal;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    color: #922a36;
    margin-bottom: 10px;
}

@media  (max-width:600px){
    h2{
        margin-bottom:30px;
    }
}

    h2 a {
        color: #2b5d2b;
    }

.block h2, .block h2.title {
    font-size: 1.2em;
    padding: 10px 10px 5px 50px;
    color: #2b5d2b;
    /*background: url("https://www.zenfoods.com/sites/all/themes/zenfoods2012/images/bkg-blockHeader1.jpg") no-repeat left top;*/
    margin: 0 0 0.5em 0;
    border-bottom: 1px solid #2b5d2b;
}

    .block h2 a, .block h2.title a {
        color: #fff;
    }

        .block h2 a:hover, .block h2.title a:hover {
            color: #bbbbbb;
        }

h3 {
    font-size: 1.3em;
    font-weight: normal;
    line-height: normal;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    color: var(--medium-gray);
    margin-bottom: 10px;
}

h4, h4.title {
    font-size: 1.4em;
    padding: 0 0 6px 0;
    clear: both;
    display: block;
    font-weight: bold;
}

h5, h5.title {
    font-size: 1em;
    padding: 0 0 6px 0;
    clear: both;
    display: block;
    font-weight: normal;
}


.large-text {
    font-size: 3em;
    line-height: normal;
    font-family: 'Source Sans Pro', sans-serif;
    color: #922a36;
    margin-bottom: 10px;
}

table td {
    padding: 2px 5px;
    position: relative;
}


.content li {
    margin-bottom: 0.6em;
}

.content form li {
    margin-bottom: 0;
}
/*////////////////////////////CUSTOM BODY STYLES/////////////////////////////////*/

.top-menu {
    background-color: #3e0002;
    padding: 0px 0;
    text-align: left;
}

#top-links {
    float: right;
    margin-top: 20px;
}

.top-links-ul, .top-links-ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    float: right;
}

    .top-links-ul li {
        float: left;
        padding: 0 1em 0 1em;
        font-family: Arial, Helvetica, sans-serif;
        color: #ffffff;
        font-size: 0.7em;
        border-right: 1px solid #8d6e00;
    }

        .top-links-ul li.last {
            border-right: none;
            padding: 0 0 0 1em;
        }

        .top-links-ul li a {
            text-decoration: none;
        }

            .top-links-ul li a:hover {
                color: #000000;
                text-decoration: underline;
            }



/**************  LOGO AND HEADER ***************************************/
#logo-picture {
    float: left;
    text-align: center;
    width: 175px;
    margin-left: 115px;
}
#logo-picture img {
    width:100%;
    max-width: 175px;
}

#top-box-left {
    width: 280px;
    margin: 40px 0px 0px 0px;
    float: left;
    color: #922a36;
    font-size: 18px;
}

    #top-box-left .top-box-left-middle {
        color: #FFF;
        background: #922a36;
        font-size: 13px;
        padding: 3px;
        text-align: center;
    }

    #top-box-left .top-box-left-btm {
        margin-top: 10px;
    }

#top-box-right {
    width: 175px;
    float: right;
    margin-top: 45px;
    text-align: right;
    margin-right: 30px;
}
    #top-box-right > a > img {
        width: 164px !important;
    }

#container {
    margin: auto;
    min-height: 100%;
    width: auto;
    position: relative;
}

#content-wrapper {
    width:100%;
    min-height: 400px;
    margin: auto;
    overflow: hidden;
    padding-bottom: 10px;
}

#header {
    height: 152px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px !important;
    width:100%;
}

#header-container {
    text-align: left;
    height: 152px;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

#concierge-small {
    display: none;
    position: absolute;
    text-align: center;
    right: 10px;
    top: 83px;
    color: #922a36;
}

/******** Primary menu ************************************************/
.rws-primary-menu {
    background-color: #8fca23;
    color: #fff;
    font-family: 'Open sans', sans-serif;
    text-align: left;
    margin-bottom: 14px;
    margin-top: 5px;
    /*Causing main menu to shift right in Chrome
overflow: hidden;*/
}

.rws-primary-menu-center {
    max-width: 1000px;
    width:100%;
    padding-top: 8px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
}

.rws-primary-menu a {
    color: #ffffff;
}

.rws-primary-menu .block, .rws-primary-menu .block-menu {
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
}

.rws-primary-menu h2 {
    display: none;
}

.rws-primary-menu ul, .rws-primary-menu ul.menu {
    margin: 0px;
    padding: 0;
}
    .rws-primary-menu li {
        width: 16%;
    }

    .rws-primary-menu li, .rws-primary-menu li.leaf, .rws-primary-menu ul.links li {
        margin: 0;
        list-style: none;
        float: left;
    }

        .rws-primary-menu li a {
            text-decoration: none;
            display: block;
            height: 16px;
            padding: 0.4em .8em 0.8em 1.0em;
            font-size: 14px;
            font-weight: bold;
        }


.rws-primary-menu li a:hover {
	color:#8fca23;
    background-color:#ffffff;
    border-radius: 5px;
}
.rws-primary-menu li a.active {
    color:#000000; 
    background-color:#ffffff;
    border-radius: 5px;
}

.rws-menu-button {
    float: right;
    display: none;
}

.rws-menu-button .rws-menu-button-content {
    position: absolute;
    height:30px;
    width: 36px;
    top:0px;
    right:0px;
    margin: 2px;
    background-color: #8fca2c !important;
    padding: 4px 0px 2px 8px;
    border-radius: 6px;
}

.rws-menu-button .rws-menu-button-content:hover {
    background-color: #6faa0c !important;
}

.rws-menu-button .rws-menu-button-content .line {
    height: 4px;
    margin-top: 4px;
    background: #FFFFFF;
    width: 28px;
}
.rws-menu-button.opened .rws-menu-button-content .line {
    /*background: #999999;*/
}

.rws-menu-toggle-area {
    display:none;
}




/****************** Columns********************************************/

.column-2 {
    width: 524px;
    padding: 0px 10px 10px 10px;
    float: left;
    margin-left: -1px;
    text-align: left;
    overflow: hidden;
    margin-bottom: 0px;
}

.no-right-and-left-columns {
    width: 978px;
    margin-left: 0;
}




/******** COLUMN 2 NODES *********************************************************/
.sticky {
    border: 1px solid #c0c0c0;
   /* background: #fff url("https://www.zenfoods.com/sites/all/themes/zenfoods2012/images/featured.gif") no-repeat 18px 0 !important;*/
    padding-top: 35px !important;
}


/*************** NODE ***********************************/
.node {
    padding: 8px 18px 0px 0px;
    margin-bottom: 0px;
}

.links {
    text-align: right;
    font-size: 0.9em;
    text-align: center;
}

.content p {
    line-height: 145%;
}



/****** FOOTER *************************************************/
#footer {
    position: fixed;
    bottom: 0px;
    text-align: center;
    clear: both;
    background-color: #8fca23;
    font-size: 0.9em;
    color: #fff;
    margin: auto;
    height: auto;
    width: 100%;
    min-height: 70px;
    overflow: hidden;
    /*background: transparent url("https://www.zenfoods.com/sites/all/themes/zenfoods2012/images/bg_node.gif") repeat-x top left;*/
}

    #footer h2 {
        display: none;
    }

    #footer .block-menu ul, #footer1 .block-menu ul.menu {
        margin: 0;
        padding: 10px 0px 5px 0px;
        font-family: Arial, Verdana, sans-serif;
        overflow: hidden;
        float: none;
        text-align: center;
    }

    #footer .block-menu li, #footer .block-menu li.leaf {
        margin: 0;
        padding: 0px;
        list-style: none;
        font-size: 1.1em;
        float: none;
        display: inline;
    }

    #footer .block-menu ul, #footer1 .block-menu ul.menu {
        margin: 0;
        padding: 10px 0px 5px 0px;
        font-family: Arial, Helvetica, sans-serif;
        overflow: hidden;
        float: none;
        text-align: center;
    }

    #footer .block-menu li, #footer .block-menu li.leaf {
        margin: 0;
        padding: 0px;
        list-style: none;
        font-size: 1em;
        float: none;
        display: inline;
    }

    #footer .block-menu ul a {
        display: inline;
        padding: 10px 10px 10px 10px;
    }

    #footer .block {
        clear: both;
        margin-bottom: 0px;
    }

        #footer .block .content {
            padding: 0;
        }

    #footer p {
        padding: 0 0 5px 0;
    }

.footer {
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: "Open Sans", "sans serif";
    text-align: center;
    clear: both;
    background-color: #8fca23;
    font-size: 14px;
    line-height: 1.1;
    color: #fff;
    width: 100%;
}
    .footer .footer-company-info {
        width: 100%;
        margin-bottom: 9px;
    }

    .footer .footer-company-info a {
        color: #b22222;
    }

    .footer .footer-company-info span {
        padding-left: 4px;
        font-size: 12px;
    }

    .footer .footer-company-info span:after {
        margin-left: 4px;
        content: "|";
    }

    .footer .footer-company-info span:last-child:after {
        content: "";
    }

/************************ MISC. ***************************/

.breadcrumb {
    font-size: 12pt;
    margin-left: 0px;
}


/**************** Styles from ERP **********************/

.fLeft {
    float: left;
}

.fRight {
    float: right;
}

.cFix {
    clear: both;
}

.block {
    display: block;
}

.inBlock {
    display: inline-block;
}

.tCenter {
    text-align: center;
}

.aLeft {
    text-align: left;
}

.aCenter {
    text-align: center;
}

.aRight {
    text-align: right;
}

.row {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.msgBox {
    border: 1px dashed #8fca23;
    background-color: white;
    padding: 10px;
    color: red;
    font-weight: bold;
    display: block;
}

.requiredAccount {
    color: red;
    font-size: 12px;
    text-align: left;
    float: left;
}

.requiredAccount[id*='rVal'] {
    position: absolute;
    left: -5px;
}

.requiredProgram {
    color: red;
}

/* Page Styles */
#progressBar {
    margin: 0px auto;
    padding: 10px;
    margin: 10px 0px 20px 0px;
    text-align: center;
}

#programContainer {
    width: 100%;
    height: auto;
    border-top: solid 3px var(--light-green);
    vertical-align: middle;
    padding: 20px 0px 12px 0px;
    position: relative;
}

    #programContainer #leftDiv {
        float: left;
        width: 25%;
        /* IE 7 hack */
        *zoom: 1;
        *display: inline;
        vertical-align: middle;
    }

        #programContainer #leftDiv img {
            width: 100%;
        }

    #programContainer .collapse-button {
        display: none;
        border: none;
        width: 20px;
        height: 20px;
        background: none;
        padding: 3px;
    }

    #programContainer #detailsCollapsedDiv,
    #programContainer #collapseHitArea {
        display: none;
    }

    #programContainer #detailsDiv {
        width: 60%;
        float: left;
        margin: 0px 10px;
        /* IE 7 hack */
        *zoom: 1;
        *display: inline;
        vertical-align: middle;
        text-align: left;
    }

        #programContainer #detailsDiv h3 {
            margin-top: 0px;
        }

        

    #programContainer #daysDiv {
        width: 18%;
        float: left;
        /*margin-left: 5px;*/
    }

    #programContainer #purchaseDiv {
        margin-top: 40px;
        float: right;
    }

#programContainerLast {
    border-top: solid 3px var(--light-green);
    height: 70px;
}



.lside {
    float: left;
    width: 590px;
}

.rside {
    float: left;
    padding-left: 20px;
    height: 370px;
    width: 325px;
}
   

.imglist {
    margin: 0;
    padding: 0;
}

    .imglist li {
        list-style: none;
        float: left;
        margin: 13px 0;
        width: 510px;
    }


        .imglist li img {
            float: left;
            margin-right: 10px;
        }

.grd_ddl {
    width: 500px;
    /*padding:10px 0px 10px 0px;*/
    margin: 10px 0px 10px 0px;
    height: 20px;
}

.unthisclass table {
    width: 750px;
    margin: 0 auto;
}




.unthisclass td {
    text-align: left;
}

.grd_ddl {
    float: right;
}

.fixedUpdate {
    position: fixed;
    float: right;
    z-index: 10000;
    /* margin-left: 845px; */
    top: 540px;
    left: 85%;
}

/* LOGIN */
.login-box-border {
    width: 623px;
    border: 3px solid var(--light-green);
    padding: 20px;
    border-radius: 8px;
}

    .login-box-border .login-button-container,
    .login-box-border #usernamediv,
    .login-box-border #passworddiv {
        float: left;
        overflow: auto;
        margin: 20px 10px;
    }

    .login-box-border #usernamediv,
    .login-box-border #passworddiv {
        /*width: 45%;*/
    }

    .login-box-border .login-button-container {
        /*width: 100%;*/
    }


/*  Code added on 3rd of December for new changes asked by client in design : profile page etc*/


.clear {
    clear: both;
}

.add_bredcrumb {
    background: #f7f6f6;
    padding: 5px 10px;
    border-radius: 4px;
}

    .add_bredcrumb ul {
        margin: 0px;
        padding: 0px;
        list-style: none;
        font-family: 'Open Sans', sans-serif;
    }

        .add_bredcrumb ul li {
            display: inline-block;
            margin: 0 5px 0 0;
        }

        .add_bredcrumb ul span {
            color: #8fca23;
        }

.upper_ad_header {
    width: 100%;
    float: left;
}

    .upper_ad_header h2 {
        text-align: center;
    }

.btm_ad_profile {
    width: 100%;
    float: left;
}

    .btm_ad_profile .value-field {
        max-width: 665px;
        float:left;
        margin-left: 10px;
    }

    .btm_ad_profile .history-grid tr td:first-child {
        width:130px;
    }

    .btm_ad_profile .buttons {
        float:none;
    }
    .btm_ad_profile .buttons input {
        margin:2px 0px;
    }

.inner_profile {
    border: 3px solid var(--light-green);
    padding: 20px 10px;
    border-radius: 10px;
    margin-bottom: 35px;
    font-family: 'Open Sans', sans-serif;
    position: relative;
}
.inner_profile.hide {
    display:none;
}
    .inner_profile h3 {
        min-width: 300px;
        background: var(--light-green);
        float: left;
        text-align: center;
        color: var(--medium-gray);
        position: absolute;
        left: 15px;
        top: -28px;
        margin: 0;
        padding: 0 10px;
        line-height: 35px;
        border-radius: 5px;
    }


ul.pro_list {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul.pro_list li {
        width: 100%;
        float: left;
    }

        ul.pro_list li label {
            width: 270px;
            max-width:40%;
            float: left;
            font-size: 16px;
            color: #858585;
            text-align: right;
            padding-right: 5px;
        }

        ul.pro_list li span {
            float: left;
        }


.pro_list input, .buttonClassFrontEnd {
    background-color: var(--red);
    border: 1px solid var(--red);
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    /*line-height: 30px;*/
    padding: 9px 20px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: button;
    font-size: 13.3333px;
}
    .buttonClassFrontEnd:disabled {
        opacity: .5;
        cursor: default;
    }
@media  (max-width:600px){
    .pro_list input, .buttonClassFrontEnd{
        padding: 8px 14px;
    }
    .buttonClassFrontEnd {
        margin-bottom:10px;
    }
}


.pro_list span {
    font-weight: bold;
}

.requiredPayment {
    color: red;
}



/*       Create account        */
.alreadyclient-panel{
    width: 64%; 
    float: right;
}

    .alreadyclient-panel .bottom-text {
        padding-top:15px;
        padding-bottom:14px;
    }
    .alreadyclient-panel .phrase-extra {
    }
    .alreadyclient-panel .signin-link {
        display:none;
    }

.alreadyclient-box {
    text-align: center;
    border: solid 3px var(--light-green);
    border-radius: 10px;
    padding: 0px 50px 15px 40px;
    display: inline-block;
    min-width: 280px;
}

.ac-table {
    padding-top:8px;
}

.ac-table-row {
    padding-bottom: 5px;
}

    .ac-table-row .ac-table-cell {
        padding: 3px 5px;
        width: 100%;
    }

        .ac-table-row .ac-table-cell .field {
            width: 140px;
            margin-left: 2%;
            float: right;
        }

        .ac-table-row .ac-table-cell span {
            text-align: right;
        }

        .ac-table-row .ac-table-cell.username,
        .ac-table-row .ac-table-cell.password,
        .ac-table-row .ac-table-cell.forgot-username,
        .ac-table-row .ac-table-cell.forgot-password {
            
        }

        .ac-table-row .ac-table-cell.username,
        .ac-table-row .ac-table-cell.password {
            margin-top: 5px;
        }

        .ac-table-row .ac-table-cell.forgot-username,
        .ac-table-row .ac-table-cell.forgot-password {
            text-align: right;
        }

.createaccount-panel {
    width: 36%;
    float: left;
}


/*Program Details*/

.pd-left-panel,
.pd-right-panel {
    width: 48%;
}

.inner_profile.pd-left-panel,
.inner_profile.pd-right-panel {
    width: 45%;
}


.pd-left-panel {
    float: left;
}

.pd-right-panel {
    float: right;
}

.pd-profile-panel {
    width: 100%;
}

.inner_profile .field {
    width: 100%;
}

.inner_profile .activity-level tr td {
    float: left;
}

.weekday-checkbox {
    float:left;
    margin: 0px 10px;
}

.pd-title {
    width: 35%;
}

.after-home {
    font-size: 14pt;
    font-weight: bold;
}

.basic-datepicker {
    display: initial;
}

.input-datepicker {
    display: none;
}

tr.keys-row .doorman-check-label {
    margin-left: 30px;
}

/*Payments*/

/*.payments .cc-radiolist {

    margin-left: 279px;
}*/

.juice-disclaimer {
    font-weight: normal; 
    font-size: 15px; 
    width: 750px;
    max-width: 750px;
}

.juice-disclaimer .message {
    margin-bottom: 10px; 
    margin-left: 5px; 
    text-align: justify; 
    width: 100%;
    color: #4e4e4e;
}

.payments .cc-radiolist {
    font-weight: bold;
    margin-bottom: -11px;
    width: 100%;
}

    .payments .cc-radiolist table {
        width: 100%;
    }

        .payments .cc-radiolist table tr td:first-child {
            text-align: right;
        }

        .payments .cc-radiolist table tr td:last-child {
            text-align: left;
        }

        /*Invoice*/

.header-numberdays:after {
    content: 'Number of Days';
}

.arrow-icon {
    width:100%;
    height:100%;
    position:static;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.arrow-icon-right {
    background-image: url('../Images/arrow-right.png');
}
.arrow-icon-up {
    background-image: url('../Images/arrow-up.png');
}
.arrow-icon-down {
    background-image: url('../Images/arrow-down.png');
}
.arrow-icon-left {
    background-image: url('../Images/arrow-left.png');
}

.subscribe-panel .fLeft.checkbox {
    position:absolute;
}
.subscribe-panel .fLeft.field {
    padding-left:25px;
    width: auto;
}
.subscribe-panel .field-with-label,
.subscribe-panel .field-with-label .label,
.subscribe-panel .field-with-label .field-control {
    /*float: left;*/
    display: inline-block;
    width: auto;
}
.subscribe-panel .field-with-label .field-control input {
    width: 200px;
}

.subscribe-panel .field-with-label .label,
.subscribe-panel .field-with-label .field-control {
    padding: 5px 5px;
}

.subscribe-panel .field-with-label:first-of-type {
    margin-right: 50px;
}

span.item-complement {
    display: initial;
    position: static;
}
span.item-plus-button {
    display: none;
}

/*Payments Order details*/
.payment-orderdetails {
    padding: 10px;
    margin: 15px 0 -24px;
    width: 98%;
    border: solid 0px #555555;
}




/*        Meal Z.E.N. Selection       */

.leftp {
    display:initial;
    position:static;
    float:left;
    width: 61.5%;
}

    .leftp .leftp-internal {
        border: 3px solid var(--light-green);
        border-radius: 10px;
        padding: 10px 10px 127px;
    }

.rightp {
    display:initial;
    position:static;
    width:37%;
    border:none;
    float:right;
    min-height:600px
}
    .rightp.rightp-showborder {
        border: 3px solid var(--light-green);
        border-radius: 10px;
    }
.rightp .popup-close {
    display:none;
}

.bg-trigger-panel {
    display:none;
}
.bg-trigger-panel.hidden {
    display:none;
}

#div_MealDetailPopUp.lightboxpp {
    display: none;
    min-height: 200px;
    top: 10%;
}
#div_MealDetailPopUp.lightboxpp #div_mealDetail img {
    height:400px;
}

#divCheckOut #chk_defaultDetail {
    margin-left: 20px;
}
#divCheckOut #chk_newCreditCard {
    margin-left: 55px;
}
#divCheckOut .lightboxpp {
    top: 5%;
    height: 290px;
}
#divCheckOut br.saved-cc-br {
    display: none;
}

.lightboxpp .popup-heading h3 {
    margin-top: -20px;
}

#div_unsavedChangesPopUp.lightboxpp {
    display: block;
    z-index: 150;
    height: auto;
    max-height: 70px;
    top: 35%;
    left: 25%;
    right: 25%;
    -webkit-box-shadow: 4px 8px 8px gray;
    -ms-box-shadow: 4px 8px 8px gray;
    -webkit-box-shadow: 4px 8px 8px rgba(0,0,0,0.3);
    -ms-box-shadow: 4px 8px 8px rgba(0,0,0,0.3);
    box-shadow: 4px 8px 8px gray;
    box-shadow: 4px 8px 8px rgba(0,0,0,0.3);
}

#div_unsavedChangesPopUp.lightboxpp.hidden {
    display: none;
}

#div_unsavedChangesPopUp.lightboxpp label.warning {
    color: red;
    font-weight: bold;
}

#calendarMenu {
    display:none;
}
#calendarMenu .bottom-menu-trigger {
    display:none;
}

#tt.tabs-wrap {
    margin: 0 !important;
    width: 100% !important;
}

#mobileVersionFlag {
    display:none;
    position:fixed;
    left:-1px;
    height:0;
    width:0;
}

#ContentPlaceHolder1_calender .calendar-control {
    display: block;
}
#ContentPlaceHolder1_calender .calendar-control.checkbox {
    display: inline-block;
}

/*by ard 11/19/2014 */
/*for calender*/
.calendar-full {
    border-collapse: separate !important;
}
#ContentPlaceHolder1_calender {
    width: 100%;
}

    #ContentPlaceHolder1_calender td {
        height: 70px;
        vertical-align: top;
        text-align: left;
        overflow: hidden;
        border: 1px solid var(--light-green);
        position: relative;
    }

    #ContentPlaceHolder1_calender tr:first-child td {
        height: auto;
        text-align: center;
        border: none !important;
    }

        #ContentPlaceHolder1_calender tr:first-child td,
        #ContentPlaceHolder1_calender tr:first-child td a {
            font-size: 1.8em;
            font-weight: normal;
            padding: 0;
            color: #922a36;
            font-family: 'Source Sans Pro', sans-serif;
            line-height: normal;
            margin-bottom: 10px;
        }

.lft-creditdetail {
    float: left;
}

.appendwidth {
    overflow: auto;
}

.total-credit {
    margin-top: -34px;
    font-weight: bold;
    text-align: right;
    padding-right: 50px;
    max-width: 750px;
}



.total-creditforappendwith {
    margin-top: -34px !important;
}
#dislikes-list{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 30px;
    background-color: #E7F1CC;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 20px;   
    -webkit-column-gap: 10px;
    column-gap: 10px;
     column-rule-width: 1px;
   white-space:nowrap;
}
dislikeitem{display:block;}
#dislikes-list{overflow: hidden;}
.delete-dislike{color:red; font-weight:bold; margin-right: 10px; text-decoration:none;}
div#dislikes-list:empty { display: none }
/* BM 7/13/2016 Updated design*/
/* Top Bar */
.top-bar {
    background: #e5dbd1;
    color: #fff;
    padding: 4px 0 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 1.39;
    max-width: 100%;
    overflow: hidden;
}
@media (max-width: 768px)
{
.top-bar {
    width: 100%;
    z-index: 1000;
    top: 0;
}
}


@media (max-width: 767px){
    .hidden-xs {
    display: none!important;
}
}
.top-bar a {
    color: var(--medium-gray);
    cursor: pointer;
    text-decoration:none;
}
.top-bar a:hover{
    color:#2A6496;
}
    .top-bar a img {
        padding: 0 15px;
    }
.top-bar b, .top-bar strong {
    font-weight: 600;
}

.top-bar p{
    margin: 0px;
       margin: 0 0 10px;
       padding: 0px;
         white-space: nowrap;
  overflow: hidden;
       min-width: 300px;
}


@media (min-width: 768px){
.container {
    width: 750px;
}
}
@media (min-width: 992px){
.container {
    width: 970px;
}
}
@media (min-width: 1200px){
.container {
    width: 1170px;
}
}
.container {
    padding-right: .39em;
    padding-left: .39em;
    margin-right: auto;
    margin-left: auto;
  
}
@media (min-width: 1152px)
{
.container {
    width: 980px;
}
}
.container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after{
        content: " ";
    display: table;
    box-sizing: border-box;
        clear: both;
        
}

.top-bar .row {
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    border-style: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.voffset {
    margin-top: 2px;
}
.voffset1 {
    margin-top: 5px;
}
.voffset2 {
    margin-top: 10px;
}
.text-right {
    text-align:right;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

    .row:before,
    .row:after {
        display: table;
        content: " ";
    }

    .row:after {
        clear: both;
    }
.col-md-12, .col-md-6, .col-md-5, .col-md-3 {
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    float: left;
}
@media (min-width: 768px){
    .col-md-12 {
        width: 100%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-5{
        width: 41.66666667%;
   
    }
    .col-md-offset-4 {
        margin-left: 31.33333333%;
    }
    .col-md-3 {
        width: 25%;
    }
    .top-bar .col-md-6 .media {
        transform:translateY(20px);
    }
}
@media (max-width: 767px) {
    .voffset2 {
        flex-grow:1;
    }
    .text-right {
        text-align: center;
    }
    .col-md-3, .col-md-5, .col-md-6, .col-md-12 {
        width:100%;
        text-align:center;
    }
    .top-bar .row {
        flex-direction:column;
    }
}
@media (min-width: 583px) {
        .col-md-offset-4 {
        margin-left: 31.33333333%;
    }

}



.media:first-child {
    margin-top: 0;
}

.media, .media-body {
    overflow: hidden;
        zoom: 1;
}
.media-body strong{
    font-weight: 600;
  
}



.list-inline {
        padding-left: 0;
    list-style: none;
    margin-left: -5px;
        margin-top: 0;
    margin-bottom: 10px;
}
.list-inline a{
        opacity: .85;
            transition: opacity 0.2s ease-in-out 0s;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
    -moz-transition: opacity 0.2s ease-in-out 0s;
    -o-transition: opacity 0.2s ease-in-out 0s;
        box-sizing: border-box;
            text-decoration: none;
}
    .list-inline a.btn-warning {
        background:var(--medium-gray);
        border:1px solid var(--medium-gray);
width:175px;
    }
    .list-inline a:hover {
        opacity: 1;
        text-decoration: none;
    }
    .list-inline a.btn-warning:hover {
        color:#ccc;
    }
.list-inline > li {
    box-sizing: border-box;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}
.btn {
    text-transform: capitalize;
        display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn.btn-danger {
    color: #fff;
        background: #a63736;
    border-color: #a63736;
}

.btn.btn-warning {
    background: #dc7d28;
       color: #fff;
           border-color: #eea236;
}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active{color:#444;background-color:#d2322d;border-color:#ac2925}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active{color:#444;background-color:#ed9c28;border-color:#d58512}

/* Header */
header{
    display:block;
    font-family: 'Source Sans Pro', sans-serif;
line-height: 1.39;
color: #222;
font-size: 14px;
}
    header a {
        opacity: .85;
        transition: opacity 0.2s ease-in-out 0s;
        -webkit-transition: opacity 0.2s ease-in-out 0s;
        -moz-transition: opacity 0.2s ease-in-out 0s;
        -o-transition: opacity 0.2s ease-in-out 0s;
        color: var(--medium-gray);
        cursor: pointer;
        text-decoration: none;
        background: 0 0;
        box-sizing: border-box;
    }
    header h1 {
        font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.3;
font-size: 36px;
    }
    header img {
    vertical-align: middle;
}
header img {
    border: 0;
}

.text-center {
    text-align: center;
}

@media (min-width: 768px){
.navbar {
    border-radius: 4px;
}
}
.navbar {
        position: relative;
    min-height: 50px;
    border: 1px solid transparent;
    margin-bottom: 0;
    display: block;
    box-sizing: border-box;

}
.container-fluid {
        padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}



.navbar-collapse.collapse {
    display: none;
}
@media (min-width: 768px){
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
}

.navbar-collapse {
    max-height: 340px;
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    -webkit-overflow-scrolling: touch;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}
.nav {
    box-sizing: border-box;
        margin-top: 0;
        text-align: center;
    margin-bottom: 10px;
    padding-left: 0;
    list-style: none;

}
.nav-pills>li+li {
    margin-left: 2px;
}

.nav>li {
    position: relative;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.open>a {
    outline: 0;
}
.nav-pills > li > a {
    color: var(--medium-gray);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}
.nav>li>a {
        position: relative;
    display: block;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 15px;
    margin-right: 15px;
}
.nav-pills>li>a {
    border-radius: 0px;
    border-bottom: 2px solid transparent;
}
.nav > li > a:hover, .nav > li > a:focus {
    background: transparent;
    color: var(--medium-gray);
    border-bottom: 2px solid var(--medium-gray);
    opacity: 1;
}
.nav-pills > li {
    float: none;
    display: inline-block;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
    border-color: #428bca;
}
    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
        border-bottom: 2px solid var(--medium-gray);
        background: #fff;
    }
.nav-pills > li > a.active, .nav-pills > li > a.active:hover, .nav-pills > li > a.active:focus {
    background: transparent;
    color: var(--medium-gray);
    border-bottom: 2px solid var(--medium-gray);
}
.dropdown {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
        list-style: none;
    font-size: 14px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background: var(--red);
    border: none;
    border-radius: 0;
    margin: 1px 0 0;
}
.dropdown-menu > li > a {
        background: 0 0;
     display: block;
        clear: both;
           font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 40px;
       
 
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background: #fff;
    color: #444;
}
.open>.dropdown-menu {
    display: block;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.brickred {
           margin-top: 0px;
    border-width: 0px;
    border-bottom: 8px solid;
    position: relative;
    z-index: 1;
}
hr.downward-indicator.brickred {
    border-color: #922a36;
}
#menu-item-2480 {
    border: 1px solid #999999;
    background: #922a36;
}
#menu-item-2480 a:focus {
    color: #fff;
    background: #922a36;
}
#menu-item-2480 a.dropdown-toggle {
    color: #fff;
}
/*Footer*/
footer {
    font-family: 'Source Sans Pro', sans-serif;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 1.39;
    color: #222;
    background: #e5dbd1;
}
footer.site-footer {
    padding: 40px 0;
    display: block;
    box-sizing: border-box;
    text-align: center;
}


.site-footer:after {
    clear: both;
}
 .site-footer:before, .site-footer:after {
    content: "";
    display: table;
}
 .list-unstyled {
     margin-top: 0;
    margin-bottom: 10px;
    padding-left: 0;
    list-style: none;
}
 .list-unstyled li {
    line-height: 1.5;
}
footer a {
    opacity: .85;
    transition: opacity 0.2s ease-in-out 0s;
    -webkit-transition: opacity 0.2s ease-in-out 0s;
    -moz-transition: opacity 0.2s ease-in-out 0s;
    -o-transition: opacity 0.2s ease-in-out 0s;
    color: var(--medium-gray);
    text-decoration: none;
}
  footer a:hover {
    color:#2a6496;

}
  footer.site-footer span.fa-stack {
    color: #37332e;
}
  /* Responsive menu */

#responsive-menu .appendLink, #responsive-menu .responsive-menu li a, #responsive-menu #responsive-menu-title a,#responsive-menu .responsive-menu, #responsive-menu div, #responsive-menu .responsive-menu li, #responsive-menu{box-sizing: content-box !important;-moz-box-sizing: content-box !important;-webkit-box-sizing: content-box !important;-o-box-sizing: content-box !important}.RMPushOpen{width: 100% !important;overflow-x: hidden !important;height: 100% !important}.RMPushSlide{position: relative;left: 84%}
#responsive-menu {
    position: fixed;
    overflow-y: auto;
    bottom: 0px;
    width: 60%;
    left: -60%;
    top: 0px;
    background: var(--red);
    z-index: 9999;
    box-shadow: 0px 1px 8px #333333;
    font-size: 13px !important;
    max-width: 999px;
    display: none
}#responsive-menu.admin-bar-showing{padding-top: 32px}
 #click-menu.admin-bar-showing{margin-top: 32px}
 #responsive-menu #rm-additional-content{padding: 10px 5% !important;width: 90% !important;color: #FFFFFF}
#responsive-menu .appendLink {
    right: 0px !important;
    position: absolute !important;
    border-top: 1px solid #FFF !important;
    padding: 12px 10px !important;
    color: #FFFFFF !important;
    background: var(--red)!important;
    height: 20px !important;
    line-height: 20px !important;
    border-right: 0px !important
}
    #responsive-menu .appendLink:hover {
        cursor: pointer;
        background: var(--light-red)!important;
        color: #FFFFFF !important
    }
    #responsive-menu .responsive-menu, #responsive-menu div, #responsive-menu .responsive-menu li,#responsive-menu{text-align: left !important}
    #responsive-menu .RMImage{vertical-align: middle;margin-right: 10px;display: inline-block}
    #responsive-menu.RMOpened{}
    #responsive-menu,#responsive-menu input{}
        #responsive-menu #responsive-menu-title {
            width: 95% !important;
            font-size: 14px !important;
            padding: 20px 0px 20px 5% !important;
            margin-left: 0px !important;
            background: #1fcb39 !important;
            white-space: nowrap !important
        }
        #responsive-menu #responsive-menu-title,#responsive-menu #responsive-menu-title a{color: #FFFFFF !important;text-decoration: none !important;overflow: hidden !important}
        #responsive-menu #responsive-menu-title a:hover{color: #FFFFFF !important;text-decoration: none !important}
        #responsive-menu .appendLink,#responsive-menu .responsive-menu li a,#responsive-menu #responsive-menu-title a{transition: 0.414s all;-webkit-transition: 0.414s all;-moz-transition: 0.414s all;-o-transition: 0.414s all}
        #responsive-menu .responsive-menu{width: 100% !important;list-style-type: none !important;margin: 0px !important}
        #responsive-menu .responsive-menu li.current-menu-item > a, #responsive-menu .responsive-menu li.current-menu-item > .appendLink, #responsive-menu .responsive-menu li.current_page_item > a, #responsive-menu .responsive-menu li.current_page_item > .appendLink {
            background: #1fcb39 !important;
            color: #FFFFFF !important
        }
        #responsive-menu .responsive-menu li.current-menu-item > a:hover, #responsive-menu .responsive-menu li.current-menu-item > .appendLink:hover, #responsive-menu .responsive-menu li.current_page_item > a:hover, #responsive-menu .responsive-menu li.current_page_item > .appendLink:hover {
            background: var(--light-red)!important;
            color: #FFFFFF !important
        }
            #responsive-menu.responsive-menu ul{margin-left: 0px !important}#responsive-menu .responsive-menu li{list-style-type: none !important;position: relative !important}#responsive-menu .responsive-menu ul li:last-child{padding-bottom: 0px !important}#responsive-menu .responsive-menu li a:not(.btn-sign-out) {padding: 12px 0px 12px 5% !important;width: 95% !important;display: block !important;height: 20px !important;line-height: 20px !important;overflow: hidden !important;white-space: nowrap !important;color: #FFFFFF !important;border-top: 1px solid #FFF !important;text-decoration: none !important}
#click-menu {
    text-align: center;
    cursor: pointer;
    font-size: 13px !important;
    display: none;
    position: fixed;
    right: 0%;
    top: 176px;
    color: #FFFFFF;
    background: #1bb332;
    padding: 5px;
    z-index: 9999
}
#responsive-menu #responsiveSearch{display: block !important;width: 95% !important;padding-left: 5% !important;border-top: 1px solid #8fca2c !important;clear: both !important;padding-top: 10px !important;padding-bottom: 10px !important;height: 40px !important;line-height: 40px !important}
#responsive-menu #responsiveSearchSubmit{display: none !important}
#responsive-menu #responsiveSearchInput{width: 91% !important;padding: 5px 0px 5px 3% !important;-webkit-appearance: none !important;border-radius: 2px !important;border: 1px solid #8fca2c !important}
#responsive-menu .responsive-menu,#responsive-menu div,#responsive-menu .responsive-menu li{width: 100% !important;margin-left: 0px !important;padding-left: 0px !important}
#responsive-menu .responsive-menu li li a{padding-left: 10% !important;width: 90% !important;overflow: hidden !important}
#responsive-menu .responsive-menu li li li a{padding-left: 15% !important;width: 85% !important;overflow: hidden !important}
#responsive-menu .responsive-menu li li li li a{padding-left: 20% !important;width: 80% !important;overflow: hidden !important}
#responsive-menu .responsive-menu li li li li li a{padding-left: 25% !important;width: 75% !important;overflow: hidden !important}
    #responsive-menu .responsive-menu li a:not(.btn-sign-out):hover {
        background: var(--light-red) !important;
        color: #FFFFFF !important;
        list-style-type: none !important;
        text-decoration: none !important
    }#click-menu #RMX{display: none;font-size: 24px;line-height: 20px !important;height: 20px !important;color: #FFFFFF !important;top: -4px !important;position: relative !important}#click-menu #RMX.threelines-float-left,#click-menu #RMX.threelines-float-right,#click-menu-label{line-height: 14px !important}#click-menu-label.click-menu-label-left{float: left !important;margin-right: 10px !important}#click-menu-label.click-menu-label-right{float: right !important;margin-left: 5px !important}#click-menu img,#click-menu .threeLines{width: 32px !important;height: 20px !important;margin: 4px auto !important}#click-menu img.rm-img-clicked{display: none}#click-menu img{height: auto !important}#click-menu img.click-menu-float-left,#click-menu img.click-menu-float-right,#click-menu .threeLines.threelines-float-left{float: left !important}#click-menu .threeLines .line{height: 4px !important;margin-bottom: 4px !important;background: #FFFFFF !important;width: 100% !important}#click-menu .threeLines .line.last{margin-bottom: 0px !important}@media only screen and ( min-width : 0px ) and ( max-width : 768px ){#click-menu{display: block}}
.responsive-menu li > a.active {
    background: #1fcb39 !important;
    color: #FFFFFF !important
}

/*Ingredient Dislikes on Create Plans*/
.ingredientCategoryToggle{display:none;}

/* Zen Select Mobile Styling */

.popup-close.meals-popup-close-trigger img,
#btnCancel, .cancel-popup img, #ImgMealDetailClose img {
    display: none;
}
a.popup-close::before {
    content: "x";
    background-color: var(--light-green);
    color: rgba(0, 0, 0, 0.7);
    padding: 5px 10px 7px 11px;
    border-radius: 50%;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.popup-close {
  top: 1%;
  right: 2%;
}

@media (max-width: 600px),
  (-webkit-min-device-pixel-ratio: 2) and (max-width: 600px) {
    .popup-close {
    padding-right: 3%;
    padding-top: 3%;
  }

  #mealOuterBox #divPopUp.lightboxpp.lightboxpp-wide {
    padding: 29px 10px 0;
  }
}

@media screen and (max-width: 630px) {
  #saveChanges {
    position: fixed;
    bottom: 0;
    background: #8ec92c;
    border: 3px solid #8ec92c;
    box-sizing: border-box;
    z-index: 99;
    margin-left: -3px;
  }

  #saveChanges #divConfirmButton {
    margin: 5px auto !important;
    float: none !important;
  }
  #saveChanges .confirm-changes,
  #saveChanges #add-quantity-span {
    text-align: center !important;
  }

  #saveChanges .headingFont,
  #saveChanges .upcharges {
    display: block !important;
    text-align: center;
    margin: 0 auto;
  }
}

.orange_btn.more-changes {
  background: none;
  color: #ff9c28;
  margin: 0px 10px 0px 5px !important;
}
#divChoices .orange_btn {
  border: 2px solid #ff9c28;
}

#saveChanges #divConfirmButton {
  display: block;
}

@media screen and (min-width: 454px) and (max-width: 582px) {
    .top-bar .voffset3 {
        padding-right: 21% !important;
    }
    @media screen and (min-width: 574px) {
        .top-bar .voffset3 {
            padding-right: 23% !important;
        }
    }
}

/* Add Choice View Table Styling for Mobile */
.cellBold {
  font-weight: bold !important;
}

/* Responsive Menu Styling */
div#click-menu {
  display: none;
  -webkit-text-size-adjust: 100%;
}

.btn-sign-out {
    padding-left: 0;
    width: 96%;
    text-decoration: none;
}
@media screen and (max-width: 767px) {

  #click-menu, #click-menu .threeLines {
    display: inline-block;
  }
  #click-menu .threeLines {
    vertical-align: middle;
  }
  div#click-menu {
    transition: transform 0.5s, background-color 0.5s;
    z-index: 40;
    padding: 0 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    width: 55px;
    height: 55px;
    position: absolute;
    top: 15px;
    right: 5%;
    background: var(--red);
  }
  #click-menu .threeLines {
    width: 25px !important;
    height: 19px !important;
  }
  #click-menu .threeLines .line {
    display: none;
    height: 0;
    margin-bottom: 0;
    background: none;
    width: 0;
}
   #click-menu .threeLines .line:first-of-type {
    display: block;
    top: 50%;
    margin-top: -1.5px;
  }
  body #click-menu .threeLines .line:first-of-type, .line:first-of-type::before, .line:first-of-type::after {
    width: 25px !important;
    height: 3px !important;
    margin-bottom: 0 !important;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
  }
  
  div#click-menu:hover .line:first-of-type,
  div#click-menu:hover .line:first-of-type::before,
  div#click-menu:hover .line:first-of-type::after,
  div#click-menu:hover
  div#click-menu:focus .line:first-of-type,
  div#click-menu:focus .line:first-of-type::before,
  div#click-menu:focus .line:first-of-type::after {
    background-color: #fff;
  }
  .line:first-of-type::before,
  .line:first-of-type::after {
    content: "";
    display: block;
  }
  .line:first-of-type::before {
    top: -8px;
  }
  .line:first-of-type::after {
    bottom: -8px;
  }
  #click-menu .line:first-of-type,
  #click-menu .line:first-of-type::before,
  #click-menu .line:first-of-type::after {
    transition-property: none;
  }
  #click-menu.click-menu-active .line:first-of-type {
    transform: rotate(45deg);
  }
  #click-menu.click-menu-active .line:first-of-type::before {
    top: 0;
    opacity: 0;
  }
  #click-menu.click-menu-active .line:first-of-type::after {
    bottom: 0;
    transform: rotate(-90deg);
  }

  div#click-menu:hover,
  div#click-menu:focus {
    background: var(--light-red);
  }
  div#click-menu .threeLines {
    color: #fff;
  }

}