/* Add here all your CSS customizations */
html,
body {
	background: linear-gradient(#f7f7f7, #b0b0b0);
	width: 100%;
}


/* 3d buttons */
.btn3d {
  position: relative;
  top: -6px;
  border: 1px solid transparent;
  transition: all 40ms linear;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 2px;
  margin-right: 2px;
  box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #f5f5f5, 0 8px 8px 1px rgba(0, 0, 0, .2);
  background-color: #fff;

}

.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
  outline-style: none;
  -moz-outline-style: none;
  outline: medium none;
  background-color: #fff;

}

.btn3d.btn-white,
.btn3d.btn-white:active,
.btn3d.btn-white.active {
  color: #666666;
}

.btn3d.btn-red {
  color: #bd1111;
}

.btn3d.btn-green {
  color: #07ae0f;
}

.btn3d.btn-blue {
  color: #007bff;
}

.btn3d.btn-light-blue {
  color: #00d5ff;
}


.btn3d.btn-yellow {
  color: #c0b300;
}

.btn3d.btn-oarange,
.btn3d.btn-orange:active,
.btn3d.btn-orange:active{
  color: #dd4a06;
}



.btn3d.btn-green:active,
.btn3d.btn-green.active {
  color: #07ae0f;
}

.btn3d.btn-red:active,
.btn3d.btn-red.active {
  color: #bd1111;
}

.btn3d:hover {
  top: -4px;
  box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.13) inset, 0 6px 2px 0 #f5f5f5, 0 6px 6px 1px rgba(0, 0, 0, .2);
  background-color: #fff;

}

.btn3d:active,
.btn3d.active {
  top: 2px;
  box-shadow: inset 3px 4px 5px 0px #b6bcc2, 2px 4px 2px 0 rgba(255, 255, 255, 0.35), 1px 1px 0 0 rgb(91 89 89 / 46%);
}

.btn3d.btn-default {
  color: #666666;
  box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
  background-color: #f9f9f9;
}

.btn3d.btn-default:active,
.btn3d.btn-default.active {
  color: #666666;
  box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
  background-color: #f9f9f9;
}

.btn3d.btn-primary {
  box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #4274D7;
}

.btn3d.btn-primary:active,
.btn3d.btn-primary.active {
  box-shadow: inset 3px 4px 5px 0px #417fbd, 2px 4px 2px 0 rgba(255, 255, 255, 0.15), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
  background-color: #4274D7;
}
.btn3d.btn-primary:hover {
  top: -4px;
  box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 6px 2px 0 #4D5BBE, 0 6px 6px 1px rgba(0, 0, 0, 0.5);
}


.btn3d.btn-success {
  box-shadow: 0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #5eb924, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #78d739;
}

.btn3d.btn-success:active,
.btn3d.btn-success.active {
  box-shadow: 0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #78d739;
}

.btn3d.btn-info {
  box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #39B3D7;
}

.btn3d.btn-info:active,
.btn3d.btn-info.active {
  box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #39B3D7;
}

.btn3d.btn-warning {
  box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #D79A34, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #FEAF20;
}

.btn3d.btn-warning:active,
.btn3d.btn-warning.active {
  box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #FEAF20;
}

.btn3d.btn-danger {
  box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #AA0000, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #D73814;
}

.btn3d.btn-danger:active,
.btn3d.btn-danger.active {
  box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #D73814;
}

.btn3d.btn-magick {
  color: #fff;
  box-shadow: 0 0 0 1px #9a00cd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #9823d5, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #bb39d7;
}

.btn3d.btn-magick:active,
.btn3d.btn-magick.active {
  box-shadow: 0 0 0 1px #9a00cd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #bb39d7;
}


/* nav buttons */
.sidebar-left {
  background: #171717;
}

.main-btnnav {
  display: table;
}
.main-btnnav .btnnav-wrapper {
  display: table-cell;
  /* vertical-align: middle; */
  height: 59px;
  width: 100vw;
  border-radius: 7px;
  background-color: black;
  border: 2px solid black;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
}
.main-btnnav .btnnav-wrapper:after {
  content: "";
  display: block;
  clear: both;
}
.main-btnnav .btnnav-wrapper .btnnav{
  position: relative;
  z-index: 1;
  padding: 15px 23px;
  background-image: linear-gradient(#333, #222);
  margin: 2px;
  border-radius: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.175s ease;
}
.main-btnnav .btnnav-wrapper .btnnav:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-left: 0;
}
.main-btnnav .btnnav-wrapper .btnnav:first-child.selected:before {
  display: none;
}
.main-btnnav .btnnav-wrapper .btnnav:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-right: 0;
}
.main-btnnav .btnnav-wrapper .btnnav:last-child.selected:after {
  display: none;
}
.main-btnnav .btnnav-wrapper .btnnav:hover {
  z-index: 2;
  background-image: linear-gradient(#202020, #151515);
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0.55);
  border-right-color: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(255, 255, 255, 0.06);
  color: white;
  text-shadow: 0 0 10px rgba(2, 165, 238, 0.75);

}
.main-btnnav .btnnav-wrapper .btnnav.fa {
  color: #424242;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
  font-size: 28px;
  width: 32px;
}

.main-btnnav .btnnav-wrapper .btnnav.selected {
  z-index: 3;
  cursor: default;
  background-image: linear-gradient(#202020, #151515);
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0.55);
  border-right-color: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(255, 255, 255, 0.06);
}
.main-btnnav .btnnav-wrapper .btnnav.selected:after, .main-btnnav .btnnav-wrapper .btnnav.selected:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(2, 165, 238, 0.4), rgba(0, 0, 0, 0.25));
}
.main-btnnav .btnnav-wrapper .btnnav.selected:before {
  left: -4px;
}
.main-btnnav .btnnav-wrapper .btnnav.selected:after {
  right: -4px;
}
.main-btnnav .btnnav-wrapper .btnnav.selected .fa {
  color: white;
  text-shadow: 0 0 10px rgba(2, 165, 238, 0.75);
}
.main-btnnav .btnnav-wrapper .btnnav.selected .fa:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 80px;
  height: 1px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0));
}

/* hamburger */
.header .toggle-sidebar-left {
	background: #171717;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;

  border: none;
  border-radius: 80px;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.647), 0 10px 20px rgba(255, 255, 255, 0.208);
}

.header .toggle-sidebar-left.is-active {
	background: #f6f6f6;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(255, 255, 255, 0.06);
}

.hamburger .line{
  width: 20px;
  height: 2px;
  background-color: #f6f6f6;
  box-shadow: inset 0 1px 1px rgba(21, 75, 111, 0.4), 0 10px 20px rgba(255, 255, 255, 0.06);

  border-radius: 25px;
  display: block;
  margin: 6px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}

/* ONE */

#hamburger-1.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1){
  background-color: #171717;
  -webkit-transform: translateY(8px) rotate(45deg);
  -ms-transform: translateY(8px) rotate(45deg);
  -o-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3){
  background-color: #171717;
  -webkit-transform: translateY(-8px) rotate(-45deg);
  -ms-transform: translateY(-8px) rotate(-45deg);
  -o-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

/* TWO */

#hamburger-2.is-active .line:nth-child(1){
  -webkit-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
  transform: translateY(8px);
}

#hamburger-2.is-active .line:nth-child(3){
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

/* THREE */

#hamburger-3.is-active .line:nth-child(1),
#hamburger-3.is-active .line:nth-child(3){
  width: 40px;
}

#hamburger-3.is-active .line:nth-child(1){
  -webkit-transform: translateX(-10px) rotate(-45deg);
  -ms-transform: translateX(-10px) rotate(-45deg);
  -o-transform: translateX(-10px) rotate(-45deg);
  transform: translateX(-10px) rotate(-45deg);
}

#hamburger-3.is-active .line:nth-child(3){
  -webkit-transform: translateX(-10px) rotate(45deg);
  -ms-transform: translateX(-10px) rotate(45deg);
  -o-transform: translateX(-10px) rotate(45deg);
  transform: translateX(-10px) rotate(45deg);
}

/* FOUR */

#hamburger-4.is-active .line:nth-child(1),
#hamburger-4.is-active .line:nth-child(3){
  width: 40px;
}

#hamburger-4.is-active .line:nth-child(1){
  -webkit-transform: translateX(10px) rotate(45deg);
  -ms-transform: translateX(10px) rotate(45deg);
  -o-transform: translateX(10px) rotate(45deg);
  transform: translateX(10px) rotate(45deg);
}

#hamburger-4.is-active .line:nth-child(3){
  -webkit-transform: translateX(10px) rotate(-45deg);
  -ms-transform: translateX(10px) rotate(-45deg);
  -o-transform: translateX(10px) rotate(-45deg);
  transform: translateX(10px) rotate(-45deg);
}

/* FIVE */

#hamburger-5.is-active{
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

#hamburger-5.is-active .line:nth-child(2){
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

#hamburger-5 .line:nth-child(2){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}


#hamburger-5.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-5.is-active .line:nth-child(1),
#hamburger-5.is-active .line:nth-child(3){
  width: 35px;
  -webkit-transform-origin: right;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  transform-origin: right;
}

#hamburger-5.is-active .line:nth-child(1){
  -webkit-transform: translateY(15px) rotate(45deg);
  -ms-transform: translateY(15px) rotate(45deg);
  -o-transform: translateY(15px) rotate(45deg);
  transform: translateY(15px) rotate(45deg);
}

#hamburger-5.is-active .line:nth-child(3){
  -webkit-transform: translateY(-15px) rotate(-45deg);
  -ms-transform: translateY(-15px) rotate(-45deg);
  -o-transform: translateY(-15px) rotate(-45deg);
  transform: translateY(-15px) rotate(-45deg);
}

/* SIX */

#hamburger-6.is-active{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-6.is-active .line:nth-child(2){
  width: 0px;
}

#hamburger-6.is-active .line:nth-child(1),
#hamburger-6.is-active .line:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#hamburger-6.is-active .line:nth-child(1){
  -webkit-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
  transform: translateY(8px);
}

#hamburger-6.is-active .line:nth-child(3){
  -webkit-transform: translateY(-8px) rotate(90deg);
  -ms-transform: translateY(-8px) rotate(90deg);
  -o-transform: translateY(-8px) rotate(90deg);
  transform: translateY(-8px) rotate(90deg);
}

/* SEVEN */

#hamburger-7.is-active .line:nth-child(1){
  width: 30px;
}

#hamburger-7.is-active .line:nth-child(2){
  width: 40px;
}

#hamburger-7.is-active .line{
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

/* EIGHT */

#hamburger-8.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-8.is-active .line:nth-child(1){
  -webkit-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
  transform: translateY(8px);
}

#hamburger-8.is-active .line:nth-child(3){
  -webkit-transform: translateY(-8px) rotate(90deg);
  -ms-transform: translateY(-8px) rotate(90deg);
  -o-transform: translateY(-8px) rotate(90deg);
  transform: translateY(-8px) rotate(90deg);
}

/* NINE */

#hamburger-9{
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hamburger-9.is-active{
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-9:before{
  content: "";
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  border: 5px solid transparent;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  border-radius: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hamburger-9.is-active:before{
  border: 5px solid #ecf0f1;
}

#hamburger-9.is-active .line{
  width: 35px;
}

#hamburger-9.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-9.is-active .line:nth-child(1){
  -webkit-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
  transform: translateY(8px);
}

#hamburger-9.is-active .line:nth-child(3){
  -webkit-transform: translateY(-8px) rotate(90deg);
  -ms-transform: translateY(-8px) rotate(90deg);
  -o-transform: translateY(-8px) rotate(90deg);
  transform: translateY(-8px) rotate(90deg);
}

/* TEN */

#hamburger-10{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hamburger-10.is-active{
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

#hamburger-10.is-active .line:nth-child(1){
  width: 30px
}

#hamburger-10.is-active .line:nth-child(2){
  width: 40px
}

/* ELEVEN */

#hamburger-11{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hamburger-11.is-active{
  animation: smallbig 0.6s forwards;
}

@keyframes smallbig{
  0%, 100%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50%{
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}

#hamburger-11.is-active .line:nth-child(1),
#hamburger-11.is-active .line:nth-child(2),
#hamburger-11.is-active .line:nth-child(3){
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

#hamburger-11.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-11.is-active .line:nth-child(1){
  -webkit-transform: translateY(8px) rotate(45deg);
  -ms-transform: translateY(8px) rotate(45deg);
  -o-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}

#hamburger-11.is-active .line:nth-child(3){
  -webkit-transform: translateY(-8px) rotate(-45deg);
  -ms-transform: translateY(-8px) rotate(-45deg);
  -o-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

/* TWELVE */

#hamburger-12.is-active .line:nth-child(1){
  opacity: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

#hamburger-12.is-active .line:nth-child(3){
  opacity: 0;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

/* body {
  background: radial-gradient(#ffffff54 2px, transparent 0) 0 0/40px 40px, radial-gradient(#ff000026 2px, transparent 0) -1px 1px/40px 40px, radial-gradient(ellipse at 150% -50%, #6d788f, #fff);
} */
/* card */
.card {
  box-shadow: 4px 4px 5px 1px rgba(127, 168, 170, 0.374);
  border-radius: 20px;
}

.page-header {
  background: #171717;
  color: #f6f6f6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
  opacity: 0.9;
}

.sidebar-left {
  background: #171717;
  color: #f6f6f6;
  box-shadow: -2px -2px 8px rgba(3, 33, 105, 0.55),
              -2px -2px 12px rgba(1, 122, 155, 0.5),
              inset 2px 2px 4px rgba(0, 189, 170, 0.493),
              2px 2px 8px rgba(238, 238, 238, 0.15);
              transition:width .2s linear;

}
/* .nav-link {
  background: #171717;
  color: #f6f6f6;
  box-shadow: -2px -2px 8px rgba(3, 1, 46, 0.55),
              -2px -2px 12px rgba(75, 74, 74, 0.5),
              inset 2px 2px 4px rgba(190, 190, 190, 0.1),
              2px 2px 8px rgba(238, 238, 238, 0.15);

}
.nav-link .active{
  background: #525151;
  color: #706e6e;
      transform: scale(0.98);
    -webkit-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -moz-transform: scale(0.98);

  box-shadow: 2px 2px -8px rgba(51, 49, 87, 0.55),
              2px 2px -12px rgba(129, 127, 127, 0.5),
              inset -2px -2px -4px rgba(190, 190, 190, 0.1),
              -2px -2px -8px rgba(209, 202, 202, 0.15);

} */