/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 24, 2018, 10:19:42 AM
    Author     : humza.ahmed
*/

@charset "UTF-8";

.mapStyle{

    position: fixed !important;
    top: 70px;
    bottom: 0;
    left: 0;
    right: 0;


    transition: left .5s;
}

.geoSearch{
    position: fixed;
    top: 83px;
    right: 303px;
    z-index: 2000;
}


.topBar{

    width: 100%;
    left: 0;
    top: 0;
    background-color: #232e44;
    /*height: 70px;*/
    /*padding: 12px 15px;*/
    border-bottom: solid 1px transparent;
    z-index: 100;
/*    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #360033;
    background-image: -webkit-gradient(linear, left top, right top, from(#360033), to(#0b8793));
    background-image: -webkit-linear-gradient(left, #360033, #0b8793);
    background-image: -moz-linear-gradient(left, #360033, #0b8793);
    background-image: -ms-linear-gradient(left, #360033, #0b8793);
    background-image: -o-linear-gradient(left, #360033, #0b8793);
    background-image: linear-gradient(left, #360033, #0b8793);
    filter: progid:DXImageTransform.Microsoft.gradient(start-colorStr='#360033', end-colorStr='#0b8793', gradientType='1');*/
}

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 350px; 
    position: fixed; /* Stay in place */
    z-index: 100; /* Stay on top */
    top: 74px; /* Stay at the top */
    left: -350px;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden; /* Disable horizontal scroll */
    /*padding-top: 60px;  Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidenavRight {
    height: 100%;  /*100% Full-height*/ 
    width: 300px; 
    position: fixed; /* Stay in place */
    z-index: 100; /* Stay on top */
    top: 74px; 
    /*bottom: 150px;*/
    right: 0px;
    background-color: #253659;
    color: white;
    overflow-y: scroll;
    overflow-x: hidden; /* Disable horizontal scroll */
    /*padding-top: 60px;  Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.btnPos{
    position: fixed;
    right: 20px;
    top: 120px;
}

.container {
    display: inline-block;
    cursor: pointer;
}

.verticalBar{
    border-left: 2px solid #d6d6d6;
    height: 100px;
}

.bar1, .bar2, .bar3 {
    width: 26px;
    height: 3px;
    background-color: black;
    margin: 6px 0;
    transition: 0.4s;
}

.barContainer{
    /*float: right;*/
    z-index: 100;
}

.barContainer:hover .bar1{
    margin: 1px 0;
    background-color: black;
}

.barContainer:hover .bar2{
    margin: 1px 0;
    background-color: black;
}

.barContainer:hover .bar3{
    margin: 1px 0;
    background-color: black;
    margin-bottom: 21px;
}


.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

#Main {
    transition: margin-left .5s;
    /*padding: 20px;*/
}

.textPMNside{
    background:url(../../resources/img/pmnLogo.png);
    margin-top: 20px;
    margin-left: 26px;
    height: 80px;
    width: 175px;
    z-index: 100;
}


@media only screen and (max-width: 1366px) {
    .sidenav {
        height: 80%;
    }
    
    .sidenavRight {
        height: 80%;
    }
}