/* CUSTOM FRONT-CSS */

label.error,
.required {
    color: red;
}


.full-section-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -30px;
}

.left-div,
.right-div {
    width: 45%;
    margin-bottom: 20px;
}

.left-div h2,
.right-div h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.left-div p,
.right-div p {
    font-size: 16px;
    line-height: 1.5;
}

.left-div {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}



@media screen and (max-width: 768px) {

    .left-div,
    .right-div {
        width: 100%;
    }

    /* .swiper {
      padding-top: 25px;
      padding-bottom: 25px;
  } */

}



.modal-submit-red-button {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: 0px;
    /* margin: -16px 2em 0px 0px; */
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, Poppins;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.75;
    min-width: 64px;
    padding: 5px 15px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border: 1px solid rgb(167 6 63);
    border-radius: 8px;
    text-transform: capitalize;
    background-color: rgb(245, 0, 87);
    color: rgb(243, 243, 243);
    /* float: right; */
    /* margin-bottom: -22px; */
}

.modal-submit-red-button:hover {
    /* background-color: rgb(245, 221, 221); */
    background-color: rgb(194, 4, 70);
}


.blue-light-button {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    outline: 0px;
    /* margin: -16px 2em 0px 0px; */
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, Poppins;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.75;
    min-width: 64px;
    padding: 5px 15px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border: 1px solid rgba(10, 143, 220, 0.5);
    color: rgb(10, 143, 220);
    border-radius: 8px;
    text-transform: capitalize;
    float: right;
}

.blue-light-button:hover {
    background-color: rgb(241, 247, 250);
}

.blue-deep-button {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    outline: 0px;
    /* margin: -16px 2em 0px 0px; */
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, Poppins;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.75;
    min-width: 64px;
    padding: 5px 15px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border: 1px solid rgba(10, 143, 220, 0.5);
    color: #fff;
    background: #0a8fdb;
    background-image: linear-gradient(to right, #1a81e9 0%, #0b97e9 51%, #1a81e9 100%);
    /* background-color: rgb(10, 143, 220); */
    border-radius: 8px;
    text-transform: capitalize;
    /* float: right; */
}

button.close {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: 0px;
    border: 0px;
    /* margin: -10px 15px 0px 0px; */
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif, Poppins;
    font-weight: 500;
    font-size: 0.875rem;
    /* line-height: 1.75; */
    text-transform: uppercase;
    /* min-height: 36px; */
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 50%;
    padding: 0px;
    min-width: 0px;
    /* width: 40px;
    height: 40px; */
    box-shadow: rgb(0 0 0 / 20%) 0px 3px 5px -1px, rgb(0 0 0 / 14%) 0px 6px 10px 0px, rgb(0 0 0 / 12%) 0px 1px 18px 0px;
    background: #fad7ec;
    background-color: rgba(245, 0, 87, 0.145);
    color: rgb(245, 0, 87) !important;
}

.form-group {
    position: relative;
    /* display: inline-block; */
}


.form-group i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #33333363
}


.modal-submit-red-button {
    margin: -16px 2em 0px 0px;
}

.center-modal {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-item {
    /* margin-top: 100px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-items {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-items button,
.center-items button {
    margin-right: 10px;
}


.pos-item {
    padding-top: 10px !important
}

/* #direct_pin_generator {
    display: flex;
    justify-content: center;
    align-items: center;
} */

.new-modal .modal-dialog {
    top: 30%;
}

.new-modal button.close {
    padding: 18px;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: -36px !important;
}


.table-badge-warning {
    color: #b37907;
    background-color: #e2a72e44;
    border-radius: 4px;
    display: inline-block;
    padding: 1px 10px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.table-badge-success {
    color: #03572f;
    background-color: #43c88844;
    border-radius: 4px;
    display: inline-block;
    padding: 1px 10px;
    margin-top: 3px;
    margin-bottom: 3px;
}

li.paginate_button.active a {
    background: #0a8fdb !important;
    border: 1px solid #0a8fdb !important;
}


/* a.btn.btn-default {
    padding: 16px;
} */


.input-group-btn a.btn.btn-default {
    padding: 16px;
}

a.btn.btn-default i.fa.fa-plus {
    font-size: 15px;
    color: #066135;
}



/*========= Invoice hide or show css========== */

/* Style the switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide the checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Style the slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

/* When the switch is toggled on, change the background color of the slider and move the slider to the right */
input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Show/hide the element when the switch is toggled */
input:checked~#showHideInvoice,
input:checked~#showHideEstimate {
    display: block;
}

td.qty-inv,
.switch-pipeline {
    display: none !important;
}

/*========= Invoice hide or show css========== */

.bold {
    font-weight: bold !important;
}

.receipt-title {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: center;
}

.droit-border {
    border: 1px solid #6d6c6c;
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left !important;
}

/*---------- Menu List For Easy Menu PopUps----------- */
ul.quick-menu-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 5px;
}

ul.quick-menu-list.sidebar-menu {
    margin-top: -15px;
}

ul.quick-menu-list i.fa {
    margin-right: 5px;
    color: #0A8FDC;
}

ul.quick-menu-list li a {
    color: #000 !important;
    /*282828*/
    font-family: "Trebuchet MS";
    padding: 7px 20px;
}

ul.quick-menu-list.nav.side-menu>li>a,
ul.quick-menu-list.nav.child_menu>li>a {
    font-weight: bold;
}



/* .modal-body {
    padding: 0px;
} */

/*----------Menu List For Easy Menu PopUps ----------- */



/*----------Easy Menu Page Cards ----------- */
.list-group-horizontal .list-group-item {
    display: inline-block;
}

.list-group-horizontal .list-group-item {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: 10px;
}

.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.list-group-item {
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 12%);
}



.list-group {
    padding-top: 10px;
    text-align: center;
}





.emtyle {
    background: none;
    height: 50px;
    line-height: 50px !important;
    text-align: center;
    border-radius: 4px;
    color: #0A8FDC !important;
    margin-right: 5px;
    width: 50px;
    font-size: 50px;
    margin-bottom: 15px;
}

a.summary-item {
    width: 240px;
    text-align: center;
    margin-top: 25px !important;
    margin-left: 20px !important;
    margin-bottom: 25px !important;
}

#summarymenuModalLabel {
    font-size: large;
    font-weight: bolder;
    display: initial;
    justify-content: flex-start;
}

.summary-icon {
    background: none;
    height: 160px;
    line-height: 150px !important;
    text-align: center;
    border-radius: 4px;
    color: #0A8FDC !important;
    margin-right: 5px;
    width: 150px;
    font-size: 150px;
    margin-bottom: 15px;
}

.fa-tripadvisor.summary-icon,
.fa-graduation-cap.summary-icon {
    margin-right: 40px;
}

.summary-title {
    font-size: 15px;
}

.summary-modal-overlay {
    /* background-color: transparent; */
    background-color: rgba(0, 0, 0, 0.651);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
}

.checker_card {
    margin-left: 80px !important;
}

.custom-green {
    background-color: #053b1e;
    border-color: #0f3d06;
}

#easymenuModalLabel,
div#menuDetailModalTemplate {
    display: initial;
    justify-content: flex-start;
}

#menuModalTemplate div.modal-header,
#easymenuModal div.modal-header {
    background: #0A8FDC;
    color: aliceblue;
}

#easymenuModalLabel {
    font-size: large;
    font-weight: bolder;
    color: #fff;
    text-align: center;
}

/* .instructions {
    padding: 10px;
    border-radius: 5px;
    color: #05144a;
    background-color: #c9e7ff;
    margin: 20px;
} */

.instructions {
    padding: 10px;
    border-radius: 5px;
    color: #05144a;
    margin: 20px;
    /* background-color: #c9e7ff;
    background: #9edcf5; */
    background-image: linear-gradient(213deg, #fff1c9 7%, #9edcf5 92%);
    /* background-image: linear-gradient(213deg, #9ec1f5 7%, #9edcf5 92%); */
}

.approved {
    /* background-color: #034b21; */
    color: #034b21;
    font-weight: bold;
}

.unapproved {
    /* background-color: #750303; */
    color: #a30606;
    font-weight: bold;
}

.complete {
    background-color: #b9fad4;
}

.incomplete {
    background-color: #fab9b9;
}

body .container.body .right_col,
body {

    background-image: -webkit-linear-gradient(270deg, #FFFFFF, #FAFDFB, #ECF0F4);
    background-image: -webkit-linear-gradient(270deg, #FFFFFF, #FAFDFB, #D7E9F7);
}

html,
/* .content, */
.btn-bottom-toolbar,
#wrapper {
    /* background: #ECF0F4; */
    background: #D7E9F7;
    /* background: linear-gradient(90deg, #0078D7, #00A1F1); */
    /* background: linear-gradient(270deg, #b6deff, #D7E9F7); */
}

/* .top_stats_wrapper,
.panel_s,
.panel-body {
    background-image: linear-gradient(270deg, #e4edf3, #FAFDFB, #ECF0F4);
    background-image: linear-gradient(270deg, #e4edf3, #FAFDFB, #e4edf3);
} */


/* .table-striped>tbody>tr:nth-of-type(odd) { */
table>tbody>tr:nth-of-type(odd) {
    /* background-image: -webkit-linear-gradient(270deg, #e4edf3, #FAFDFB, #e4edf3); */
    background-image: -webkit-linear-gradient(270deg, #ECF0F4, #FAFDFB, #ECF0F4);
    background-image: -webkit-linear-gradient(270deg, #ebf0f3, #FAFDFB, #ebf0f3);

}

/* .table-striped>tbody>tr:hover { */
table>tbody>tr:hover {
    /* background-image: -webkit-linear-gradient(270deg, #f8cba5, #FAFDFB, #f8cba5); */
    /* background-image: -webkit-linear-gradient(270deg, #f1d5aa, #FAFDFB, #f1d5aa); */
    /* background-image: -webkit-linear-gradient(270deg, #f1dbba, #FAFDFB, #f1dbba); */
    background-image: -webkit-linear-gradient(270deg, #ffffff, #fdfcfa, #f7f2d7);
}

.table>thead>tr>th {
    /* color: #044a72 !important; */
    background: #0A8FDC;
}

table.dataTable thead>tr>th {
    border-color: #000 !important;
}


/* tr.has-row-options.odd{

} */

ul.quick-menu-list.nav.side-menu>li>a:hover {

    color: #000 !important;

    border-radius: 0px 30px 30px 0px;
    -webkit-border-radius: 0 30px 30px 0;
    color: #000;
    background: #b6deff;
    border-left: 2px solid #0A8FDC !important;
}

ul.quick-menu-list.nav.side-menu>li>a:hover,
ul.quick-menu-list.nav>li>a:focus {
    text-decoration: none;
    background: transparent;
    border-radius: 0px 30px 30px 0px;
    -webkit-border-radius: 0 30px 30px 0;
    color: #000;
    background: #b6deff;
    border-left: 2px solid #0A8FDC !important;
}


.modal-content {
    /* background-image: linear-gradient(213deg, #eef7fa 7%, #9edcf5 92%); */
    background-image: linear-gradient(270deg, #e4edf3, #FAFDFB, #e4edf3);
    color: #044a72 !important;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
    box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
}


.company-logo {
    padding: 0;
    display: block;
    margin-top: 15px;
}



.btn-primary {
    background-image: linear-gradient(to right, #1a81e9 0%, #0b97e9 51%, #1a81e9 100%) !important;
    border: #044a72;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active {
    background-image: linear-gradient(213deg, #0b97e9 7%, #1a81e9 92%) !important;
    color: #fff;
}


div .btn-bottom-toolbar {
    position: fixed;
    bottom: 0;
    /* left: 0; */
    right: 1px !important;
    /* float: right !important; */
    padding: 10px 30px;
    /* margin-left: 320px; */
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    /* width: 253px !important; */

    box-shadow: none !important;
    /* background: #fff; */
    /* width: calc(100% - 230px); */
    z-index: 5;
}



/* .form-control,
.form-control .btn.dropdown-toggle,
.bootstrap-select>.dropdown-toggle.bs-placeholder {
    border: 1.5px solid #e7e5e5 !important;
    border-radius: 8px !important;
    min-height: 42px !important;
    font-size: 14px !important;
} */




/* .nav.child_menu li:hover,
.nav.child_menu li.active {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 0px 30px 30px 0px;
    -webkit-border-radius: 0 30px 30px 0;
    color: #000;
    background: #b6deff;
    border-left: 2px solid #0A8FDC !important;
} */
/* #luckysheet {
    margin-left: -200px;
    padding: 0px;
    position: fixed;
    width: 100%;
    height: 90%;
    left: 210px;
    top: 113px;
} */
/*----------Easy Menu Page Cards ----------- */

#invoice_declaration,
#invoice_bl_n,
#invoice_ship_n,
#invoice_ref_booking,
#invoice_chf,
#invoice_tcs,
#invoice_re_export,
#invoice_partie_tc_x_20,
#invoice_partie_tc_x_40,
#invoice_som_n,
#invoice_dl,
#invoice_valeur_caf,
#invoice_name_tc_x_40p,
#invoice_nbre_tc_x_40p,
#invoice_name_tc_x_20p,
#invoice_nbre_tc_x_20p,

#estimate_declaration,
#estimate_bl_n,
#estimate_ship_n,
#estimate_part_tc_x_40,
#estimate_ref_booking,
#estimate_chf,
#estimate_tcs,
#estimate_re_export,
#estimate_som_n,
#estimate_dl,
#estimate_valeur_caf,
#estimate_name_tc_x_40p,
#estimate_nbre_tc_x_40p,
#estimate_name_tc_x_20p,
#estimate_nbre_tc_x_20p {
    display: none;
}

.inv-n-info {
    margin-top: -15px;
}



a.list-group-item {
    width: 120px;
    text-align: center;
}

a.list-group-item#text {
    font-family: "Trebuchet MS";
    font-size: 11px;
    /* color: #000; */
}

a.list-group-item,
button.list-group-item {
    color: #938f8f;
}

.scroll,
.btn-default {
    background-image: -webkit-linear-gradient(270deg, #FFFFFF, #FAFDFB, #D7E9F7);
    color: #044a72 !important;
}

a.btn-default,
button.btn-default {
    color: #044a72 !important;
}

/* btn-tr btn btn-default mright5 text-right invoice-form-submit save-as-draft transaction-submit */


.btn-default:hover,
.btn-default:active {
    background-image: -webkit-linear-gradient(270deg, #ffffff, #fdfcfa, #f7f2d7);
    color: #044a72 !important;
    border-color: #D7E9F7;
}


li.dropdown-header,
svg.tw-w-5.tw-h-5.tw-shrink-0 {
    /* color: #03a9f4 !important; */
    color: #0a8fdb !important
}

/* .dt-buttons.btn-group .btn {
    color: #0a8fdb !important;
} */


/* .dropdown-menu li a, */
/* .dropdown-menu>.active>a {
    background: #98a4ad;
    color: #044a72 !important;
} */

/* Hide the scrollbar track, but keep the scrollbar handle visible */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Style the scrollbar handle */
::-webkit-scrollbar-thumb {
    /* background-color: #044a72; */
    background-color: #c6e2f7;
    border-radius: 3px;
}

/* On hover, style the scrollbar handle */
::-webkit-scrollbar-thumb:hover {
    /* background-color: #012438; */
    background-color: #012438;
}

/* Optional: Style the scrollbar track */
::-webkit-scrollbar-track {
    background-image: -webkit-linear-gradient(270deg, #FFFFFF, #FAFDFB, #D7E9F7);
}

input.form-control,
textarea.form-control {
    background-image: -webkit-linear-gradient(270deg, #FFFFFF, #FAFDFB, #D7E9F7);
    color: #044a72;
}

.btn-primary {
    height: 35px;
}

.show-custom-menu-on-small-device {
    --tw-bg-opacity: 0;
    border: 1px solid rgba(226, 232, 240, .6);
    border-radius: 0.375rem;
    padding: 6px;
    color: #0a8fdb !important;
    margin-left: 10px;
    margin-right: -20px;
}

@media (max-width: 768px) {
    body.show-sidebar #wrapper:after {
        background-color: transparent !important;
    }

    .show-logo-on-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .show-logo-on-mobile img {
        max-width: 90%;
        /* max-width: 100%;
        max-height: 100%; */
    }

    #top_search input {
        min-width: max-content;
    }
}

/* .textarea-like {
    height: auto;
    overflow: hidden;
    min-height: 30px;
} */

.email-template-cont-editable {
    border: 1px solid steelblue;
    background: #f5f5dc;
    background-image: -webkit-linear-gradient(270deg, #f5f5dc, #fdfcfa, #f5f5dc);
    /* background-image: -webkit-linear-gradient(270deg, #f7f2d7, #fdfcfa, #f7f2d7); */
    padding: 10px;
    border-radius: 5px;
}

.email-template-cont-editable:hover {
    background-image: -webkit-linear-gradient(270deg, #f7f2d7, #fdfcfa, #f7f2d7);
}





.textarea-like {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100px;
    padding: 5px;
    font-size: 14px;
    line-height: 1.5;
    /* color: #555; */
    border: 1px solid #ddd;
    background-color: #fff;
    resize: vertical;
    white-space: pre-wrap;
}




.mce-container,
.mce-container *,
.mce-widget,
.mce-widget *,
.mce-reset {
    background-image: -webkit-linear-gradient(270deg, #f5f5dc, #fdfcfa, #f5f5dc) !important;
    border-radius: 5px !important;
    color: #044a72 !important;
}

/* .mce-container a:hover,
.mce-container a:hover *,
.mce-widget a:hover,
.mce-widget a:hover *,
.mce-reset a:hover {
    color: #044a72 !important;
} */


/* .preeloader {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 999999;
}
.preloader-spinner {
    -webkit-animation: 1s ease-out 0s normal none infinite running pulsate;
    animation: 1s ease-out 0s normal none infinite running pulsate;
    border: 5px solid #292929;
    border-radius: 40px;
    display: block;
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    opacity: 0;
    position: fixed;
    top: 50%;
    width: 40px;
    z-index: 10;
} */

/* .dark div#logo img.img-responsive */