@import url("/sitepkg/customselectbox/customselect_2.css");
@import url("/sitepkg/customselectbox/customselect.css");

/*------------------------ SIDE NAV -------------------- */
.sidenav {
    height: 100vh;
    width: 185px;
    padding: 15px 10px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    border: none;
    overflow-y: auto;
}

.wrapper {
    -webkit-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -moz-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -o-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -ms-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    margin:0px;
}


.sidenav ul {
    display: block;
}
.sidenav ul li, 
.sidenav ul li a {
    padding-bottom: 5px;
    padding-top: 5px;
}
.sidenav ul li {
    padding-left: 5px;
    position: relative;
}


/* ---------------------  OFF-SIDE-NAV ------ */
.off-side-nav {
    height: 100vh;
    position: fixed;
    display: block;
    width: 185px;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-y: hidden;
    -webkit-transform: translate3d(201px, 0, 0);
    -moz-transform: translate3d(201px, 0, 0);
    -o-transform: translate3d(201px, 0, 0);
    -ms-transform: translate3d(201px, 0, 0);
    transform: translate3d(201px, 0, 0);
    -webkit-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -moz-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -o-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -ms-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    border:none;
    padding: 15px 8px;
    overflow-y: auto;
}

.move .off-side-nav {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
}

.move .wrapper {
    -webkit-transform: translate3d(-201px, 0, 0);
    -moz-transform: translate3d(-201px, 0, 0);
    -o-transform: translate3d(-201px, 0, 0);
    -ms-transform: translate3d(-201px, 0, 0);
    transform: translate3d(-201px, 0, 0);
}

/*--- Styling new element that will be created to mimic side nav ---*/
.off-side-nav ul li, 
.off-side-nav ul li a {
    padding-bottom: 5px;
    padding-top: 5px;
}


.off-side-nav ul li {
    position: relative;
    padding-left: 5px;
}

/* remove if possible  */
.divider hr {
    border: 1px solid gray;
}

/*----------------- Style Main Page Content ------------*/
.main {
    margin-left: 200px; /* <- adjust this to zero to reverse effect */
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    min-width: 320px !important;
}


button.navbar-toggle {
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    margin-right: 10px;
}


@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
}

@media screen and (max-width: 850px) {
    .sidenav { display:none;}
    .main { margin-left:0px;}
}
    

.navbar-toggle {
  margin-top: 19px;
  margin-bottom: 19px;
  border: 0; }

.navbar-toggle .navbar-collapse,
.navbar-toggle .navbar-form,
.navbar button {
    border-color: transparent; }

.navbar-toggle .icon-bar {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    margin: 0 auto;}

.navbar-toggle,
input:focus,
button:focus {
    outline: 0; }

.navbar-toggle {
    width: 30px;
    height: 30px; }

.icon-bar {
    margin-bottom: 4px !important;
    margin-top: 4px !important;
    background-color: white;}

.bar1,
.bar2,
.bar3 {
outline: 1px solid transparent;}

.bar1 {
    top: 0px;
    -webkit-animation: topbar-back 500ms linear 0s;
    -moz-animation: topbar-back 500ms linear 0s;
    animation: topbar-back 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

.bar2 {
    opacity: 1; }

.bar3 {
    bottom: 0px;
    -webkit-animation: bottombar-back 500ms linear 0s;
    -moz-animation: bottombar-back 500ms linear 0s;
    animation: bottombar-back 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

[data-state="open"] .bar1 {
    top: 6px;
    -webkit-animation: topbar-x 500ms linear 0s;
    -moz-animation: topbar-x 500ms linear 0s;
    animation: topbar-x 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

[data-state="open"] .bar2 {
    opacity: 0; }

[data-state="open"] .bar3 {
    bottom: 6px;
    -webkit-animation: bottombar-x 500ms linear 0s;
    -moz-animation: bottombar-x 500ms linear 0s;
    animation: bottombar-x 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

@keyframes topbar-x {
0% {
top: 0px;
transform: rotate(0deg); }
45% {
top: 6px;
transform: rotate(145deg); }
75% {
transform: rotate(130deg); }
100% {
transform: rotate(135deg); } }

@-webkit-keyframes topbar-x {
0% {
top: 0px;
-webkit-transform: rotate(0deg); }
45% {
top: 6px;
-webkit-transform: rotate(145deg); }
75% {
-webkit-transform: rotate(130deg); }
100% {
-webkit-transform: rotate(135deg); } }


@-moz-keyframes topbar-x {
0% {
top: 0px;
-moz-transform: rotate(0deg); }
45% {
top: 6px;
-moz-transform: rotate(145deg); }
75% {
-moz-transform: rotate(130deg); }
100% {
-moz-transform: rotate(135deg); } }



@keyframes topbar-back {
0% {
top: 6px;
transform: rotate(135deg); }
45% {
transform: rotate(-10deg); }
75% {
transform: rotate(5deg); }
100% {
top: 0px;
transform: rotate(0); } }

@-webkit-keyframes topbar-back {
0% {
top: 6px;
-webkit-transform: rotate(135deg); }
45% {
-webkit-transform: rotate(-10deg); }
75% {
-webkit-transform: rotate(5deg); }
100% {
top: 0px;
-webkit-transform: rotate(0); } }

@-moz-keyframes topbar-back {
0% {
top: 6px;
-moz-transform: rotate(135deg); }
45% {
-moz-transform: rotate(-10deg); }
75% {
-moz-transform: rotate(5deg); }
100% {
top: 0px;
-moz-transform: rotate(0); } }

@keyframes bottombar-x {
0% {
bottom: 0px;
transform: rotate(0deg); }
45% {
bottom: 6px;
transform: rotate(-145deg); }
75% {
transform: rotate(-130deg); }
100% {
transform: rotate(-135deg); } }

@-webkit-keyframes bottombar-x {
0% {
bottom: 0px;
-webkit-transform: rotate(0deg); }
45% {
bottom: 6px;
-webkit-transform: rotate(-145deg); }
75% {
-webkit-transform: rotate(-130deg); }
100% {
-webkit-transform: rotate(-135deg); } }

@-moz-keyframes bottombar-x {
0% {
bottom: 0px;
-moz-transform: rotate(0deg); }
45% {
bottom: 6px;
-moz-transform: rotate(-145deg); }
75% {
-moz-transform: rotate(-130deg); }
100% {
-moz-transform: rotate(-135deg); } }


@keyframes bottombar-back {
0% {
bottom: 6px;
transform: rotate(-135deg); }
45% {
transform: rotate(10deg); }
75% {
transform: rotate(-5deg); }
100% {
bottom: 0px;
transform: rotate(0); } }

@-webkit-keyframes bottombar-back {
0% {
bottom: 6px;
-webkit-transform: rotate(-135deg); }
45% {
-webkit-transform: rotate(10deg); }
75% {
-webkit-transform: rotate(-5deg); }
100% {
bottom: 0px;
-webkit-transform: rotate(0); } }

@-moz-keyframes bottombar-back {
0% {
bottom: 6px;
-moz-transform: rotate(-135deg); }
45% {
-moz-transform: rotate(10deg); }
75% {
-moz-transform: rotate(-5deg); }
100% {
bottom: 0px;
-moz-transform: rotate(0); } }

@-webkit-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }

@-moz-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }

@keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }



.wrapper.level_down .main {
    margin-left: 0px !important;
}

.wrapper.level_down .sidenav {
    width: 0px !important;
    display: none !important;
}