messageone {
    padding: 10px;
    background: yellow;
    color: black;
}

messagetwo {
    padding: 10px;
    background: lightblue;
    color: black;
}

dx-widget {
    font-size: 12px;
}

.brandvelocityheader {
    font-size: 9px;
}

#moduleoptionsdropdown {
    color: black;
    text-align: center;
    background: none;
}

#btn_add {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}
#btn_addProduct {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
#btn_Print {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

    #btn_Print i {
        color: #fff;
    }
}

#btn_Refresh {
    color: #000;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}


.dx-datagrid-headers {
    background: #0d6efd !important;
    color: #fff !important;
}



.context_menu_leaflet {
    color: black;
    font-size: 20px;
}

.context_menu_leaflet_delete {
    color: red;
    font-size: 20px;
}

#map {
    height: 80vh;
}

.leaflet-container { /* all maps */
    width: 100%;
    /* height: calc(100vh - 60px);  */
    height: 100vh;
}

.legend, .temporal-legend {
    padding: 6px 10px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
}

#legendTitle {
    text-align: center;
    margin-bottom: 15px;
    color: whitesmoke;
    /* font-variant: small-caps; */
    font-weight: bold;
}

.symbolsContainer {
    float: left;
    margin-left: 50px;
}

.legendCircle {
    border-radius: 50%;
    border: 1px solid #537898;
    background: rgba(0,128,128,0.5);
    display: inline-block;
}

.legendValue {
    position: absolute;
    right: 12px;
    color: whitesmoke;
    font-size: 10pt;
    text-align: center;
    font-weight: bold;
}

.info {
    width: 30vw;
    height: 48vh;
    /* width:20vw; */
    /* height:300px; */
    padding: 6px 10px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
    /* max-width:100%;
        max-height:100%; */
}

    .info h5 {
        margin: 0 0 5px;
        color: #777;
        text-align: center;
        /* margin-bottom: 15px; */
        color: whitesmoke;
        /* font-variant: small-caps; */
        font-weight: bold;
    }

    .info #horBarChart {
        width: 100% !important;
        max-width: 800px;
        /* height:inherit; */
    }

.leaflet-control-layers {
    float: right;
    top: 500px;
    right: 0;
    /* margin-left:-200px; */
    position: absolute;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
}

.legend {
    line-height: 20px;
    color: white;
}

    .legend i {
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }

.dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-title .dx-toolbar-before {
    margin: 0 auto;
    height: 100%;
    text-align: center;
    position: relative;
}

.toolTipPallet {
    background: none;
    border: none;
    font-size: 16px;
    color: black;
    box-shadow: none;
    text-align: center;
}

.toolTipBlack {
    background: none;
    border: none;
    font-size: 16px;
    color: white;
    box-shadow: none;
    text-align: center;
}

.patsetup-popup {
    font-size: 9px;
}

.pat_setup_left {
    width: 40%;
    display: inline-block
}

.pat_setup_right {
    width: 40%;
    display: inline-block
}

.btn btn-primary dropdown-toggle {
    color: black;
    text-align: center;
    background: none;
}

.dropdown {
    color: black;
    text-align: center;
    background: none;
}

.margintop {
    margin-top: 3.5rem
}

.hoverclass {
    font-size: 16px
}

hr {
    margin: 0.3rem 0rem !important;
}

.btnPr {
    font-size: 12px;
    text-align: center;
    border: none;
    background: #3f80ea;
    padding: 5px;
    border-radius: 5px;
    font-weight: 500;
    color: #fff;
    width: 100%;
    margin: 5px;
}

#siteconfigdropdown {
    color: black;
    text-align: left;
    background: none;
    float: left;
}

.dx-widget {
    font-size: 12px;
}

#mapTop {
    height: 35vh;
}

#mapBottom {
    height: 35vh;
}


.leaflet-container { /* all maps */
    width: 100%;
    /* height: calc(100vh - 60px);  */
    /*height: 35vh;*/
}


.legend, .temporal-legend {
    padding: 6px 10px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    backgrod: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
}

#legendTitle {
    text-align: center;
    margin-bottom: 15px;
    color: whitesmoke;
    /* font-variant: small-caps; */
    font-weight: bold;
}

.symbolsContainer {
    float: left;
    margin-left: 50px;
}

.legendCircle {
    border-radius: 50%;
    border: 1px solid #537898;
    background: rgba(0,128,128,0.5);
    display: inline-block;
}

.legendValue {
    position: absolute;
    right: 12px;
    color: whitesmoke;
    font-size: 10pt;
    text-align: center;
    font-weight: bold;
}

.info {
    width: 30vw;
    height: 48vh;
    /* width:20vw; */
    /* height:300px; */
    padding: 6px 10px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
    /* max-width:100%;
        max-height:100%; */
}

    .info h5 {
        margin: 0 0 5px;
        color: #777;
        text-align: center;
        /* margin-bottom: 15px; */
        color: whitesmoke;
        /* font-variant: small-caps; */
        font-weight: bold;
    }

    .info #horBarChart {
        width: 100% !important;
        max-width: 800px;
        /* height:inherit; */
    }

.leaflet-control-layers {
    float: right;
    top: 500px;
    right: 0;
    /* margin-left:-200px; */
    position: absolute;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
}

.legend {
    line-height: 20px;
    color: white;
}

    .legend i {
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }



.toolTipPallet {
    background: none;
    border: none;
    font-size: 8px;
    color: black;
    box-shadow: none;
    text-align: center;
}

.toolTipPalletTop {
    background: none;
    border: none;
    font-size: 16px;
    color: black;
    box-shadow: none;
    text-align: center;
}

.toolTipPalletBottom {
    background: none;
    border: none;
    font-size: 16px;
    color: black;
    box-shadow: none;
    text-align: center;
}



.toolTipBlack {
    background: none;
    border: none;
    font-size: 16px;
    color: white;
    box-shadow: none;
    text-align: center;
}


#AfterToggle, #BottomToggle {
    font-size: 12px !important;
    text-align: center;
    border: none;
    background: #3f80ea;
    padding: 5px;
    border-radius: 5px;
    font-weight: 500;
    color: #fff;
    width: 100%;
    margin: 5px;
}


.patsetup-popup {
    font-size: 9px;
}

.pat_setup_left {
    width: 40%;
    display: inline-block
}

.pat_setup_right {
    width: 40%;
    display: inline-block
}

.margintop {
    margin-top: 5rem
}



hr {
    margin: 0.3rem 0rem !important;
}


#moduleoptionsdropdown, #moduleconfigdropdown {
    color: black;
    text-align: left;
    background: none;
}

.tooltippopup {
    background: none;
    border: none;
    font-size: 10px;
    color: black;
    box-shadow: none;
    text-align: left;
}

.leaflet-container { /* all maps */
    width: 100%;
    /* height: calc(100vh - 60px);  */
    height: 35vh;
}

.legend, .temporal-legend {
    padding: 6px 10px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
}

#legendTitle {
    text-align: center;
    margin-bottom: 15px;
    color: whitesmoke;
    /* font-variant: small-caps; */
    font-weight: bold;
}

.symbolsContainer {
    float: left;
    margin-left: 50px;
}

.legendCircle {
    border-radius: 50%;
    border: 1px solid #537898;
    background: rgba(0,128,128,0.5);
    display: inline-block;
}

.legendValue {
    position: absolute;
    right: 12px;
    color: whitesmoke;
    font-size: 10pt;
    text-align: center;
    font-weight: bold;
}

.info {
    width: 30vw;
    height: 48vh;
    /* width:20vw; */
    /* height:300px; */
    padding: 6px 10px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
    /* max-width:100%;
        max-height:100%; */
}

    .info h5 {
        margin: 0 0 5px;
        color: #777;
        text-align: center;
        /* margin-bottom: 15px; */
        color: whitesmoke;
        /* font-variant: small-caps; */
        font-weight: bold;
    }

    .info #horBarChart {
        width: 100% !important;
        max-width: 800px;
        /* height:inherit; */
    }

.leaflet-control-layers {
    float: right;
    top: 500px;
    right: 0;
    /* margin-left:-200px; */
    position: absolute;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    color: whitesmoke;
}

.legend {
    line-height: 20px;
    color: white;
}

    .legend i {
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }

.toolTipPallet {
    background: none;
    border: none;
    font-size: 16px;
    color: black;
    box-shadow: none;
    text-align: center;
}

.toolTipBlack {
    background: none;
    border: none;
    font-size: 16px;
    color: white;
    box-shadow: none;
    text-align: center;
}

.patsetup-popup {
    font-size: 9px;
}

.pat_setup_left {
    width: 40%;
    display: inline-block
}

.pat_setup_right {
    width: 40%;
    display: inline-block
}
.dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-title .dx-toolbar-before {
    margin: 0 auto;
    height: 100%;
    text-align: center;
    position: relative;
}

.dx-widget {
    font-size: 12px;
}


.dx-widget {
    font-size: 12px;
}

.dx-theme-generic-typography a {
    color: rgba(233,236,239,.5) !important;
}



.btnPr {
    font-size: 12px;
    text-align: center;
    border: none;
    background: #3f80ea;
    padding: 5px;
    border-radius: 5px;
    font-weight: 500;
    color: #fff;
    width: 100%;
    margin: 5px;
}

.nav-tabs .tabbtn {
    color: #3266bb !important;
    border: none;
}

    .nav-tabs .tabbtn:hover {
        color: #fff !important;
        background: #3266bb;
        border: 1px solid #3266bb;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        border-bottom: none;
    }

    .nav-tabs .tabbtn.active {
        color: #fff !important;
        background: #3266bb;
        border: 1px solid #3266bb;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        border-bottom: none;
    }



.sites-wrapper {
    background-color: #ededed !important;
    height: 100% !important;
    display: block !important;
    max-height: calc(100% - 70px) !important;
}

    .sites-wrapper ul {
        padding: 0 !important;
        padding-top: 10px !important;
        overflow-y: auto !important;
        max-height: 300px !important;
    }

.site {
    list-style-type: none !important;
    text-align: left !important;
    padding: 5px 10px !important;
    background-color: white !important;
    border-radius: 3px !important;
    margin: 4px !important;
    text-transform: capitalize !important;
    cursor: pointer !important;
}

    .site.selected {
        background-color: #3f80ea !important;
        color: #fff !important;
    }



.nav-tabs .nav-link {
    background: #fff !important;
    color: #0d6efd !important;
    border: none !important;
}

   .nav-tabs .nav-link.active {
       background:#0d6efd !important;
       color: #fff !important;

   }