/* 
    Document   : header_custom.css
    Description:
        Contains custom css for the header.php file
*/

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 500;
  src: local('Maven Pro Medium'), local('MavenProMedium'), url(../libraries/google_fonts/Maven_Pro/MavenPro-Medium.woff) format('woff');
}


   /*well will add some padding on the page to fix it in the center*/
            .well 
            {
                padding-left: 40px;
                padding-right: 40px;
            }
            /*it will add some style  to the index page image*/
            #Gordon-Jumping
            {
                text-align: center;
                margin-bottom: -3.56%;
                position: relative;
                z-index: 3;
                -webkit-transform:rotate(00.5deg);
                
            } 
            /*this class will give img size on the menu page*/
            .gordonjumpimg
            {
                width: 40%;
                margin-top: 10px;
            }
            /*this class will add width to the image*/
            .indexpageimg
            {
                width: 50%;
            }
            #main
            {
                height:100%;
            }
/*it will make edeal logo to come in center on the index page*/
            #energy_deal_logo
            {
                text-align: center;
            }

            #energy_deal_img
            {
                text-align: center;
                margin-bottom:-6%;
                position: relative;
                z-index: 4;
            } 
            /*index well size is different than other well sizes so added this class*/
            .indexwell
            {
               width:50%;
               margin-left: 25%;
            }
            /*Background-gradient for the page*/
            html
            {
                height: 100%;
                min-height: 100%;
            }
            html, body 
            {
                background: linear-gradient(0deg,#a3c63f 0%, #2b793b 100%);
                background: -o-linear-gradient(0deg, #a3c63f  0%,#2b793b  100%);
                background: -moz-linear-gradient(0deg,#a3c63f   0%,#2b793b 100%);
                background: -webkit-linear-gradient(0deg, #a3c63f  0%, #2b793b 100%);
                background: -ms-linear-gradient(0deg, #a3c63f  0%,#2b793b 100%);                           
                margin: 0;
                padding: 0;
             }
             
/*            #main_content
            {
                height: 100%;
            }*/
            /* Set the fixed height of the footer here */
            #push 
            {
                height: 60px;
            }
            .margindropdown
            {
                margin-top: 1.5%;
            }
    
            /*Not required for template or sticky footer method. */
             #wrap > .container 
             {
                padding-top: 60px;
             }
            /*This class will define header of the page*/
            .reportHeader 
            {
                position: relative;
                border-radius: 2px;
                text-align: center;
                padding: 10px 15px;
                background: linear-gradient(0deg, #2b793b  0%, #a3c63f 100%);
                background: -o-linear-gradient(0deg, #2b793b  0%,#a3c63f  100%);
                background: -moz-linear-gradient(0deg, #2b793b   0%,#a3c63f 100%);
                background: -webkit-linear-gradient(0deg, #2b793b  0%, #a3c63f 100%);
                background: -ms-linear-gradient(0deg, #2b793b  0%,#a3c63f 100%);  
                -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
                -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
                box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
                height: 46px;
                line-height: 23px;
                margin-top: 10px;
/*              removed class reportHeader-margin and make it one class as reportHeader*/
                margin-bottom: -25px;
                margin-left: -59px;
                margin-right: -40px;
                margin-bottom:-35px;
             }

            .reportHeader .reportHeader-content:before, .reportHeader .reportHeader-content:after 
            {
                content: "";
                position: absolute;
                border-style: solid;
                border-color: #047065  transparent transparent transparent;
                -webkit-filter: brightness(0.7);
                bottom: -1em;
            }

            .reportHeader .reportHeader-content:before 
            {
                left: 0;
                border-width: 1em 0 0 1em;
            }
            .reportHeader .reportHeader-content:after
            {
                right: 0;
                border-width: 1em 1em 0 0;
            }
            /* This code will give margin from navbar to the container */
            .container-push
            {
                margin-top: 40px;
            }
            .indexwellposition
            {
                margin-top:0px;
            }
            /* This will reduce the top margin*/
            .container-push-tracker
            {
                margin-top: -30px;
            }
            .containerheight {
height: 385px!important;
}
            /*to increase the default tooltip max-width to 500px*/
            .tooltip-inner 
            {
                max-width: 250px;
                min-width: 250px;
            }
            /*This class will display bootstrap submenu in the header*/
            .dropdown-submenu
            {
                position: relative;
                
            }
/*            this class will set the position of submenu according to the main menu*/
            .dropdown-submenu>.dropdown-menu
            {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 6px 6px 6px 6px;
            }
/*            on hover this class will remove the caret from drop-down menu*/
            .dropdown-submenu:hover>.dropdown-menu
            {
                display: block;
            }
/*            this class will set the content inside submenu according to content inside the dropdown-submenu*/
            .dropdown-submenu>a:after
            {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #cccccc;
                margin-top: 5px;
                margin-right: -10px;
            }
/*            after hovering remove the current background color and set it to white*/
            .dropdown-submenu:hover>a:after
            {
                border-left-color: #ffffff;
            }
/*            this class will pull the dropdown submenu on left side on dropdown main menu*/
            .dropdown-submenu.pull-left
            {
                float:none;
            }
            .dropdown-submenu.pull-left>.dropdown-menu
            {
                left:-100%;
                margin-left:10px;
                -webkit-border-radius:6px 0 6px 6px;
                -moz-border-radius:6px 0 6px 6px;
                border-radius:6px 0 6px 6px;
            }
            /*this class is added to give opacity to tooltip with black color*/
/*            .tooltip-inner
            {
                background-color: rgba(0, 0, 0, 0.8); 
            }*/
  
/*            if the tooltip is at top this class will make it opacblack*/
            .tooltip.top .tooltip-inner 
            {
                background-color:rgba(0, 0, 0, 0.8);
            }
/*            to set the tooltip arrow at top with the opac black color*/
            .tooltip.top .tooltip-arrow 
            {
                border-top-color: rgba(0, 0, 0, 0.8);
            }
/*            if the tooltip is at right this class will make it opacblack*/
            .tooltip.right .tooltip-inner 
            {
                background-color:rgba(0, 0, 0, 0.8);
            }
/*            to set tooltip arrow at right with opac black color*/
            .tooltip.right .tooltip-arrow 
            {
                border-right-color:rgba(0, 0, 0, 0.8);
            }
/*            if the tooltip is at bottom this class will make it opacblack*/
            .tooltip.bottom .tooltip-inner 
            {
                background-color:rgba(0, 0, 0, 0.8);
            }
/*            to set tooltip arrow at bottom with opac black color*/
            .tooltip.bottom .tooltip-arrow 
            {
                border-bottom-color: rgba(0, 0, 0, 0.8);
            }  
/*            if the tooltip is at left this class will make it opacblack*/
            .tooltip.left .tooltip-inner 
            {
                background-color:rgba(0, 0, 0, 0.8);
            }
/*            to set tooltip arrow at left with opac black color*/
            .tooltip.left .tooltip-arrow 
            {
                border-left-color: rgba(0, 0, 0, 0.8);
            }
/*            included font-gotham for the report banners and menu.php file*/
/*this font style includes bold version of font-gotham*/
/*            @font-face 
            {
                font-family: 'GothamRounded-Bold';
                src: url('../fonts/GothamRounded-Bold.eot');
                src: local('☺'), url('../fonts/GothamRounded-Bold.woff') format('woff'), url('../fonts/GothamRounded-Bold.ttf') format('truetype'), url('../fonts/GothamRounded-Bold.svg') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            default version of font-gotham without any bold properties.
            @font-face 
            {
                font-family: 'GothamRounded-Book';
                src: url('../fonts/gothamroundedbook.eot');
                src: local('☺'), url('../fonts/gothamroundedbook.woff') format('woff'), url('../fonts/gothamroundedbook.ttf') format('truetype'), url('../fonts/gothamroundedbook.svg') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            declared fonts as font-family to make it easily usable and can apply it as class
            .font-gotham 
            {
                font-family:'GothamRounded-Bold'
            }
            declared fonts as font-family so it can be applicable as class name
            .font-book 
            { 
                font-family:'GothamRounded-Book'
            }*/
/*            to set margin to row which is been used in banner of the page*/
            .rowbanner-margin
            {
                margin-left: 4px;
            }
/*            to set margins on reportHeader */
/*            .reportHeader-margin
            {
                margin-bottom: -25px;
                margin-left: -59px;
                margin-right: -40px;
                margin-bottom:-35px;
            }*/
/*           set margin to content inside banner*/
            .reportHeadercontent-margin
            {
                margin-bottom: -35px;
            }
/*            properties of font inside the banner*/
            .reportHeadertext
            {
                text-align: center;
                font-size: 24px;
                font-family:'Maven Pro', sans-serif ;
                color: white;
            }
/*            gives text-styles to secondary detail header*/
            .secondaryHeadertext
            {
                text-align: center;
                font-family: 'Maven Pro', sans-serif; 
            }
/*            gives additional width to container for resource file and dashboard*/
            .containersize
            {
                width: 90%;
            }
/*            gives style to signin button of an index page*/
            .signinbutton
            {
                width: 50%;
            }
/*            gives style  to every footer of the page*/
            .pagefooterstyle
            {
                background-color: rgba(0, 0, 0, 0.4);
                color: white;
/*              font-family: GothamRounded-Book; */
                margin-top: 2em;
                height: 25px; 
                line-height: 24px;
                font-size: 90%;
            }
/*            header file extra css*/
/*            gives style to header file for navbarbrand(logo)*/
            .navbarlogomargin
            {
                margin-top:-4.5%;
            }
/*            gives left margin to navbar menus*/
            .navmargin
            {
                margin-left: -6%;
            }
/*            gives margin to welcome msg*/
            .pullrightdropdown
            {
                margin-top:1.5%;
            }
/*            gives grey color to welcomemsg*/
            .welcomemsg
            {
                color:#777;
            }
/*            gives color to caret and username*/
            .welcomeusername
            {
                color:black;
            }
/*            .reportCheckboxmargin
            {
                margin:-2px 0px 0px 5px;
            }*/
            .selectmultiple
            {
                width:30%;
            }
            .testfont
            {
               font-size: 15px;
               color: red;
            }
            .valid-Input
            {
                border-color:#00c700;
                border-width: 1px;
                box-shadow: 0 0 10px #00c700;
            }

            .invalid-Input 
            {
                border-color:#ff4d4d;
                border-width: 1px;
                box-shadow: 0 0 10px #ff4d4d;  
            }
            .font-maven-pro
            {
                font-family: 'Maven Pro', sans-serif;
            }

            .input-field
            {
                font-size: 110%;
            }
            .input-label
            {
                font-size: 120%;
            }

            .btn-file 
            {
                position: relative;
                overflow: hidden;
            }
            .btn-file input[type=file]
            {
                position: absolute;
                top: 0;
                right: 0;
                min-width: 100%;
                min-height: 100%;
                font-size: 999px;
                text-align: right;
                filter: alpha(opacity=0);
                opacity: 0;
                outline: none;
                background: white;
                cursor: inherit;
                display: block;
            }

            .background-white
            {
                background-color: white !important;
            }

            /*Fix for Datepickers being overlapped by upload fields*/
            #ui-datepicker-div {
                z-index: 10!important;
              }
              
              /*to highlight the menu option to be green if its on the same page that is clicked as an option.*/
.makeactive
{
    background-color:#2b793b;
    border-radius:5px;
}
/*to set the font color to be white if its on the same page that is clicked as an option.*/
.white
{
    color:white !important;
}
/*to set the font-color to be green and the background-color to be default(grey) if any links are not active.(default behaviour)*/
.green
{
    color: #2b793b !important;
}
/*on menupanel options hovering it was taking the default color of grey.applied this class to make it green*/
.nohover:hover
{
    border-radius:5px;
    background-color:transparent !important;
}
/*applied to make it come after specified height.z-index will solve the issue of overlapping the dropdown options.*/
.menupanelcontainer
{
    margin-top: 25px;
    /*margin-left: auto;*/
    z-index: 10;  
    font-family: 'Maven Pro', sans-serif;
}
/*specified the height to well for the menupanel container*/
/*.menupanelwell
{
    height: 20px;  
}*/
/*applied some styling to unordered list of menu panel.*/
.menupanelul
{
    margin-top: -25px;
    border-radius: 2px;   
}
/*to set the arrow glyphicon at certain place after the options.*/
.menupanelI
{
    vertical-align:middle;
    line-height:20px;
    padding-top: 15px;
}
/*applied to set the last menuoption to be not clickable by default.*/
.noclickablelink
{
    cursor: not-allowed;
    pointer-events: none;
}

#radiostyle label
{
    width:70px;
    background-color: green;
    border-radius:4px;
}

#radiostyle label span 
{
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
    /*font-family:  'Maven Pro', sans-serif;*/
}

#radiostyle label input 
{
    position:absolute;
    z-index:-10;
}
#radiostyle input:checked + span
{
    border:3px solid #2b793b;
    color:white;
    border-radius: 4px;
    box-shadow: 0 0 30px #9ACD32;
    background-size: 100%;
    -webkit-animation-name:radiostyle ;
    -webkit-animation-duration: .7s;
    -webkit-animation-timing-function: ease-out;
    
 }

#radiostyle .lightgreen
{
    background-color: yellowgreen;
}
#radiostyle .errorSelector
{
    background-color: #ffa3a3;
}
@-webkit-keyframes radiostyle {
0% {
        -webkit-box-shadow: 
                0 0 2px 0 #9ACD32,
                0 0 0px 0 white;
}
20% {
        -webkit-box-shadow: 
                0 0 15px 10px #9ACD32,
                0 0 20px 0 white;
}
60% {
        -webkit-box-shadow: 
                0 0 2px 0 #9ACD32,
                0 0 2px 0 white;
}
}
.makecursor
{
    cursor:pointer;
}

/*
    Start Fieldset CSS
*/
fieldset.fset 
{
    border: 1px solid #ddd !important;
    border-radius: 4px;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: -2em 0 1.5em 0 !important;
    background-color: #eeeeee;
    /*background-color: #ebebeb;*/
     /*margin-top: -500px;*/
}
fieldset.fset1 
{
    border: 1px solid #a3c63f !important;
    border-radius: 4px;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: -2em 0 1.5em 0 !important;
    /*background-color: #eeeeee;*/
    background-color: #dceab9;
    /*background-color: #ffe3b0;*/
     /*margin-top: -500px;*/
}

legend.fset 
{
    /*font-size: 1.2em !important;*/
    /*font-weight: bold !important;*/
    text-align: left !important;
    width:auto;
    padding:10px 10px;
    color:gray;
    border-bottom: none;
    margin: -1px;
   
}

.legend-label
{
    font-weight: normal !important;
}

/*
    End Fieldset CSS
*/

/* Start Code for Side Panel */

/*#retaileroffers 
{
    margin-right: -13em;
    right: 0;
    width: 13em;
    background: #f5f5f5;
    position: fixed;
    height:84%;
    overflow-y: auto;
    z-index: 1000;
    transition: all 1s ease-in 0s;
    -webkit-transition: all 1s ease-in 0s;
    -moz-transition: all 1s ease-in 0s;
    -ms-transition: all 1s ease-in 0s;
    -o-transition: all 1s ease-in 0s;
    margin-top: 70px;
    border-radius: 6px 0 0 6px;
    overflow-x: hidden;
    
}
#retaileroffers.active 
{
    right: 13em;
    width: 13em;
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}*/

/*#retaileroffers 
{
    margin-right: -190px;
    right: 0;
    margin-top: 70px;
    padding-bottom: 60px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    position: fixed;
    top: 10px;
    border-radius: 6px 0 0 6px;
    bottom: 10px;
    height: 85%;
}
#retaileroffers.active 
{
    right: 190px;
    width: 190px;
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}*/
#hidebtntext
{
position:;
top: 0;
left: -21%;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform: rotate(90deg);
position:absolute;
margin-left: 27px;  
text-align: center;
/*font-weight: bold;*/

}
#showretaileroffers
{
    top:42.5%;
    height:29%;
    margin-left:-14%;
    position:absolute;
    max-height: 29%;
    height: 183px;
    min-height: 183px;
    z-index:1000;
}
.robtn
{
    background-color: #dcdcdc;
    border-color: transparent;
    border-radius:4px 0px 0px 4px; 
}
.chevronangle
{
    -webkit-transform: rotate(90deg);
    color:#2B793B;
}
#retaileroffers 
{
    margin-right: -177px;
    right: 0;
    margin-top: 70px;
    padding-bottom: 60px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    position: fixed;
    top: 10px;
    border-radius: 6px 0 0 6px;
    bottom: 10px;
    height: 85%;
    max-height: 85%;
    min-height: 85%;
/*    overflow-x: scroll;*/
}
#retaileroffers.active 
{
    right: 177px;
    width: 190px;
    max-width: 190px;
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}
#retaileroffers.inactive 
{
    right: -3px;
    /*right: 0px;*/
/*  width: 190px;
    max-width: 190px;*/
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}
#showretaileroffers.active 
{
    right: 180px;
    width: 190px;
    max-width: 190px;
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}
@-webkit-keyframes refresh 
{
    0% 
    {
     -webkit-box-shadow: 
                0 0 5px 0 lightgoldenrodyellow,
                0 0 0px 0 lightgoldenrodyellow;
    }
    75% 
    {
     -webkit-box-shadow: 
                0 0 15px 10px lightgoldenrodyellow,
                0 0 90px 0 lightgoldenrodyellow;
    }
    100% 
    {
     -webkit-box-shadow: 
                0 0 2px 0 lightgoldenrodyellow,
                0 0 2px 0 lightgoldenrodyellow;
    }
}
     
#retaileroffers.refresh 
{
        -webkit-animation-name: refresh;
        -webkit-animation-duration: 1.5s;
        -webkit-animation-timing-function: ease-out;
}
#scrollable 
{
    overflow-y: scroll;
    height:88%;
    min-height: 88%;
    /*max-height: 88%;*/
   
    overflow-x: hidden;
}
.noborderradius
{
    border-radius: 0 !important;
}
.scrolltopbtn
{
    border-left: none;
    border-radius: 0 !important;
}
.topbtn
{
    border-right: none;
    border-radius: 0 !important;
}
.bottombutton
{
    border-left: none;
    border-top-right-radius: 0px;
    border-top-left-radius:0px !important;
    border-bottom-left-radius:6px !important;
    /*position:fixed;*/
}
.scrolltopbtn
{
  border-right:none; 
  border-left:none;
  border-radius:0px 0px 0px 0px !important;
}
.btnradiusbottom
{
   border-radius:0px 0px 0px 6px !important; 
}
.smallfontbtn
{
    font-size: 12px;
}
/* End Code for Side Panel */

/* Start Code for Signup Forms */
 .panelgreen
{
    background: linear-gradient(0deg, #2b793b 0%, #a3c63f 100%) !important;
    background: -o-linear-gradient(0deg, #2b793b  0%, #a3c63f 100%) !important;
    background: -moz-linear-gradient(0deg, #2b793b  0%, #a3c63f 100%) !important;
    background: -webkit-linear-gradient(0deg, #2b793b  0%, #a3c63f 100%) !important;
    background: -ms-linear-gradient(0deg, #2b793b  0%, #a3c63f 100%) !important;
    color: white !important;
    font-weight: bold !important;
    border-radius: 2px !important;
    font-family: 'Maven pro', sans-serif;
/*                text-shadow: 0 0.5px 0 black, 0 -0.5px 0 black, 0.5px 0 0 black, -0.5px 0 0 black;
    -webkit-text-stroke: 0.1px white;*/
}
.panel-title a 
{
   padding: 10px 15px;
   margin: -10px -15px;
   display: block;
}
.panel-body
{
    background-color: #f5f5f5 !important;
}
.sidebtn
{
    background-image: linear-gradient(#FFFFFF, #E6E6E6);
    height:50px;
    text-align: right;
    line-height: 25px;
    border-radius: 0px !important;
    width:200px;
}
.nohover:hover
{
    border-radius:5px;
    background-color:transparent !important;
}
.verticalsidepnltop
{
    top: 60px;
}
.linedpage {
font-family: 'Maven pro', sans-serif;;
/*width: 900px;*/
position: relative;
margin: auto;
/*padding: 15px 0;*/
 color: black;
-webkit-border-bottom-left-radius: 20px 500px;
-webkit-border-bottom-right-radius: 500px 30px;
-webkit-border-top-right-radius: 5px 500px;
-moz-border-radius-bottomleft: 20px 500px;
-moz-border-radius-bottomright: 500px 30px;
-moz-border-radius-topright: 5px 100px;
border-radius-bottomleft: 20px 500px;
border-radius-bottomright: 500px 30px;
border-radius-topright: 5px 100px;
background: white;
background:-webkit-gradient(linear,left top, left bottom,from(#333),color-stop(2%, white));
background:-moz-repeating-linear-gradient(top,#fff,#fff 38px,#81cbbc 40px);
background:repeating-linear-gradient(top,#fff,#fff 38px,#81cbbc 40px);
-webkit-background-size: 100% 40px;
-webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.3);
-moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
}
.linedpage p 
{
padding: 0 30px;
line-height: 40px;
margin-bottom: 40px;
font-size: 16px;
}
/* End Code for Signup Forms */
/* Start Code for Script Display Styling */
.scriptbg
{
    background: #e2e2e2;
    padding: 10px 10px 10px 10px;
}
/* End Code for Script Display Styling */

/* Start Code for Left Panel Styling */
#leftsidepanel 
{
    margin-left: -177px;
    left: 0;
    margin-top: 70px;
    padding-bottom: 60px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    position: fixed;
    top: 10px;
    border-radius: 0px 6px 6px 0px;
    bottom: 10px;
     z-index:1000;
    
/*    height: auto;
    min-height: auto;*/
    /*overflow-x: hidden;*/
}
#leftsidepanel.lsactive 
{
    left: 177px;
    width: 190px;
    max-width: 190px;
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}
#leftsidepanel.lsinactive 
{
    left: -13px;
    width: 190px;
    max-width: 190px;
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}
#showleftsidepanel.lsactive 
{
    left: 180px;
    width: 190px;
    max-width: 190px;
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}
#lsshowbutton
{
    top:42.5%;
    height:24%;
    margin-left:100%;
    position:absolute;
    max-height: 24%;
    z-index: 20;
    height: 121.5px; 
    min-height: 121.5px;
}


#lshidebtntext
{
position:absolute;
top: 0;
left: -21%;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform: rotate(90deg);
position:absolute;
margin-left: 27px;  
text-align: center;
/*font-weight: bold;*/

} 
.lsbtn
{
    background-color: #dcdcdc;
    border-color: transparent;
    border-radius:0px 4px 4px 0px; 
}
.lschevronangle
{
    /*-webkit-transform: rotate(180deg);*/
    color:#2B793B;
}
       tr.spaceUnder > td
{
  padding-bottom: 0.5em;
  
}
/* End Code for Left Panel Styling */
/*start code to load data in leftsidepanel*/
.wrapit
{
    max-width:187px;
    word-wrap:break-word;
  
}
.consdetails{
    position:relative;
    cursor: pointer;
   /*line-height: normal;*/
/*    width:400px
    height:400px;*/
}
/*.ss  {
    width:100%;
    vertical-align:top;
}*/
.consdetails:after {
    content:'Click here to change usage details';
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
   
    font-family: 'Maven pro', sans-serif;
    font-size: 16px;
    /*line-height:  inherit;*/
    text-align: center;
    padding-top: 90px;
     transition: all 1s;
    -webkit-transition: all 1s;
    /*vertical-align: -(height/2)px;*/
    /*transform: translateY(-50%);*/
    
}

.consdetails:hover:after {
    opacity:1;
    /*vertical-align: middle;*/
}
.retdetails{
    position:relative;
    cursor: pointer;
/*    width:400px;
    height:400px;*/
}
/*.ss  {
    width:100%;
    vertical-align:top;
}*/
.retdetails:after {
    content:'Click here to change plan';
    color:#fff;
    position:absolute;
    width:100%;
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    padding-top: 90px;
}
.retdetails:hover:after {
    opacity:1;
}
/*.clickable {
   cursor: pointer;
}
.clickable:hover {
   background: #efefef;
}*/
/*end code to load data in leftsidepanel*/
#suburb
{
    border-radius: 4px 0px 0px 4px;
}
.row
{
    font-family: 'Maven pro', sans-serif;
}

.tooltip /* Provide z index to prevent overlapping with Modal */
{
    z-index: 5;
}

/* fix dupcheck modal*/
.table-responsive 
{
/*min-height: .01%;*/
overflow-x: auto;
}
/*initialize code to resize container size to make it responsive in fiji*/
.mediumcontainer
{
    width:71%;
}
.smallcontainer
{
    width:68%;
}

/* Start Code for Right Panel Styling */
#rightsidepanel
{
    width: 150px; 
    height: 6800px;
    margin-right: -177px;
    right: 0;
    margin-top: 75px;
/*    border: 1px solid #ccc;*/
    position: fixed;
    top: 10px;
    bottom: 10px;
    z-index:1000;
    background-color:#f5f5f5;
    min-height: 680px;
    max-height: 680px;
    border-radius: 5px;
    text-align: center;
}
#rightsidepanel.lsactive 
{
    right: 170px;
    width: 200px;
    max-width: 200px;
    transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
}
 
/* End Code for Right Panel Styling */