@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary-bg: #337ab7;
  --secondary-bg: #f09721;
  --sidebar-menu-bg: #fff;
  --sidebar-menu-link-bg: #fff;
  --submenu-bg: #F2F2F2;
  --submenu-hover-bg: #fff;
  --dropdown-bg: #FFF;
  --body-bg: #001f56;
  --page-header-bg: #f09721;
  --content-bg: #FFF;
  --mobile-open-bg: #FFF;
  --mobile-close-bg: #C92829;

  --primary-color: #337ab7;
  --secondary-color: #f09721;
  --sidebar-menu-color: #fff;
  --sidebar-menu-link-color: #337ab7;
  --sidebar-menu-link-active-color: #f09721;
  --submenu-color: #F2F2F2;
  --dropdown-color: #FFF;
  --body-color: #001f56;
  --page-header-color: #fff;
  --content-color: #353434;
  --header-color: #fff;
  --footer-color: #fff;

  --dark-primary-bg: #337ab7;
  --dark-secondary-bg: #f09721;
  --dark-sidebar-menu-bg: #012939;
  --dark-sidebar-menu-link-bg: #012939;
  --dark-submenu-bg: #012946;
  --dark-submenu-hover-bg: #012939;
  --dark-dropdown-bg: #012939;
  --dark-body-bg: #000;
  --dark-page-header-bg: #f09721;
  --dark-content-bg: #012939;
  --dark-mobile-open-bg: #FFF;
  --dark-mobile-close-bg: #C92829;

  --dark-primary-color: #337ab7;
  --dark-secondary-color: #f09721;
  --dark-sidebar-menu-color: #012939;
  --dark-sidebar-menu-link-color: #012939;
  --dark-sidebar-menu-link-active-color: #f09721;
  --dark-submenu-color: #012946;
  --dark-dropdown-color: #012939;
  --dark-body-color: #000;
  --dark-page-header-color: #FFF;
  --dark-content-color: #FFF;
  --dark-header-color: #fff;
  --dark-footer-color: #f09721;
}


body { 
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100; 
  font-size: 18px; 
}

* { box-sizing: border-box; outline: none; }


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin: 6px 0;
}

body.mobile-open {
  overflow: hidden;
}

.dark .gm-style-iw, 
.dark .gm-style-iw div, 
.dark .gm-style-iw-d, 
.dark .gm-style-iw-d div, 
.dark .gm-style-iw p, 
.dark .gm-style-iw h3, 
.dark .gm-style-iw {
  background:#363535 !important;
  color:#fff !important;
  border-color: #000 !important;
}
.dark .gm-style-iw-c {
  padding-inline-end:10px !important;
}

.dark .gm-style-iw .slider-controls { background: none !important;}
.dark .gm-style-iw-d{
  overflow: auto !important;
}

.dark .gm-style-iw-chr button span {
  background: #fff;
}

.dark .gm-style .gm-style-iw-tc::after {
  background:#363535;
}

.sol { background: var(--body-bg); }
.sol.dark {background: var(--dark-body-bg);}
.sol body { font-size: 16px; background: var(--body-bg) url(../images/contentbg.jpg) repeat-x; }
.sol.dark body  {  background: var(--dark-body-bg) url(../images/contentbg-dark.jpg) repeat-x; }
.sol #main-header { min-height: 100px;  }
.sol #main-content {min-height: calc(100vh - 205px);}
.sol header:after { content: ''; display: block; clear: both; }
.sol .left-nav { list-style: none; margin: 0; padding: 0; }
.sol #wrapper {padding: 0 10px;position: relative;z-index: 1;}
.sol #wrapper .menu-aside {position: absolute;left:0;top: 47px;z-index:10; bottom:0;}
.sol #wrapper .menu-aside a { cursor: pointer; }
.sol #logo-wrap { padding-top: 10px; height: 130px; }
.sol .header-right-menu {padding: 20px 10px 10px; color: var(--header-color);}
.sol.dark .header-right-menu { color: var(--dark-header-color);}
.sol .header-right-menu a { cursor: pointer; text-decoration: none; }
.sol .header-right-menu a .fa { margin-top: 3px; }
.sol .list-menu li { display: inline-block; padding-left: 25px;}
.sol .list-menu li li { padding-left: 0; display: block;}
.sol #logo-wrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.sol .page-header { padding: 0; background: var(--page-header-bg); color:var(--page-header-color); border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.sol .page-header h1 { margin: 0; padding:10px; font-size: 1.2em; padding-top:6px;  }
.sol .page-header h1::after { content: ''; display: block; clear: both; }
.sol .dark .page-header {background: var(--dark-page-header-bg); color:var(--dark-page-header-color);}
.sol .content {border: 2px solid var(--page-header-bg);margin-left: 45px;border-radius: 8px; color:var(--content-color);background: var(--content-bg);transition: all .8s;}
.sol.dark .content { background: var(--dark-content-bg); color:var(--dark-content-color); border-color: var(--dark-page-header-bg);}
.sol .mobile-menu { position: absolute; bottom: 0; left: 10px; display: none; }
.sol .menu-aside ul { position: relative; z-index: 10; }
.sol .menu-aside ul:before {content: '';position: absolute;top:0;left: 0;bottom: 0;width: 55px;background: var(--sidebar-menu-bg);display: block;}
.sol.dark .menu-aside ul:before  {background: var(--dark-sidebar-menu-bg);}
.sol .menu-aside ul > li { position: relative; z-index: 5; margin-bottom: 1px }
.sol .menu-aside ul > li:last-child { margin-bottom: 0px; }
.sol .menu-aside ul > li > a { 
  color: var(--sidebar-menu-link-color);
  text-decoration: none;
  display: inline-block; 
  padding: 10px 15px;
  width: 100%; 
  overflow: hidden; 
  vertical-align: middle; 
  white-space: nowrap; 
  background: var(--sidebar-menu-link-bg); 
  border-bottom-right-radius: 10px; 
  border-top-right-radius: 10px; 
  border: 2px solid; 
  border-color: var(--sidebar-menu-link-bg);
  }
.sol.dark .menu-aside ul > li > a { background:var(--dark-sidebar-menu-link-bg); border-color: var(--dark-sidebar-menu-link-bg); }
.sol .menu-aside ul > li:hover > a, .menu-aside ul > li.active > a, .menu-aside ul > li > a:focus { background: var(--sidebar-menu-link-bg); color: var(--sidebar-menu-link-active-color); }
.sol.dark .menu-aside ul > li:hover > a, .dark .menu-aside ul > li.active > a, .dark .menu-aside ul > li > a:focus { background: var(--dark-sidebar-menu-link-bg); color: var(--dark-sidebar-menu-link-active-color); }
.sol .menu-aside ul > li > a > i { font-size: 1.3em; display: inline-block; vertical-align: middle; width: 30px; }
.sol .menu-aside ul > li > a > svg {display: inline-block;vertical-align: middle;width: 22px; height: auto; margin-right:10px}
.sol .menu-aside ul > li > a > span.fa { margin-left: 10px; }
.sol .menu-aside ul > li {max-width: 45px;}
.sol .menu-aside ul > li:hover { animation: main_menu 1s ease; max-width: 400px; }
.sol .menu-aside ul > li:hover > a {border-color: var(--sidebar-menu-link-active-color); animation: main_menu_a 1s ease; }
.sol .menu-aside ul ul.submenu { 
  min-width: 50px; 
  width: auto; 
  max-height: 0px;
  position: absolute; 
  left: 57px; 
  top: 100%; 
  background: none; 
  overflow: hidden; 
  border-bottom-right-radius: 10px; 
  border-top-right-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  -webkit-transition-delay: 250ms; 
  transition-delay: 250ms;
}
.sol .menu-aside ul > li:hover ul.submenu {
  max-height: 1000px;
  animation: sub_menu 2s ease;
}
.sol a:hover { text-decoration: none; }
.sol .menu-aside ul ul.submenu li { max-width: 100%; width: 100%;  margin:0; animation: none; }
.sol .menu-aside ul ul.submenu li a { border: none; border-radius: 0; padding: 5px 10px; background: var(--submenu-bg); }
.sol .menu-aside ul ul.submenu li a svg {  margin-right: 10px; vertical-align: baseline; margin-top: 3px; width: 10px; height: auto; }
.sol .menu-aside ul ul.submenu li:hover a {background: var(--submenu-hover-bg); }
.sol #main-footer { text-align: center; min-height: 20px; color: var(--footer-color); }
.sol.dark #main-footer {color: var(--dark-footer-color);}
.sol .footer-pads { padding: 5px; font-size: .8em;}
.sol .flex-footer label.lpad {
    margin-bottom: 0;
}

.sol.dark .menu-aside ul ul.submenu li a { background:var(--dark-submenu-bg);}

@keyframes main_menu {
  from {max-width: 45px;}
  to {max-width: 400px;}
}

@keyframes main_menu_a {
  from {border-color: transparent;}
  to {border-color: var(--sidebar-menu-link-active-color);}
}

@keyframes sub_menu {
  from {max-height: 0px; }
  to {max-height: 1000px;}
}


/* Splash page*/

.sol #welcome-splash { list-style: none; text-align:center; margin: 0; padding: 0; }
.sol #welcome-splash li { display:inline-block; width:250px; height:250px;  border-radius:10px; margin: 10px;}
.sol #welcome-splash li a { display:block; width:inherit; height:inherit; border-radius:10px; text-decoration: none; color:#F09721; transition: all .8s;}
.sol #welcome-splash li:hover a { background:#F09721; color:#3171B8; transition: all .8s;}
.sol #welcome-splash li .icon { display:block;}
.sol #welcome-splash li .title { text-transform:uppercase; font-size:20px;}

/* Mobile menu */

.sol #show-menu-mobile {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 10px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.sol #show-menu-mobile span {
  display: block;
  position: absolute;
  height: 9px;
  width: 50%;
  background: var(--mobile-open-bg);
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

.sol #show-menu-mobile span { background: var(--dark-mobile-open-bg);  }

.sol #show-menu-mobile span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}

.sol #show-menu-mobile span:nth-child(odd) {
  left:0px;
  border-radius: 9px 0 0 9px;
}

.sol #show-menu-mobile span:nth-child(1), #show-menu-mobile span:nth-child(2) {
  top: 0px;
}

.sol #show-menu-mobile span:nth-child(3), #show-menu-mobile span:nth-child(4) {
  top: 18px;
}

.sol #show-menu-mobile span:nth-child(5), #show-menu-mobile span:nth-child(6) {
  top: 36px;
}

.sol .mobile-open #show-menu-mobile span:nth-child(1),.mobile-open #show-menu-mobile span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sol .mobile-open #show-menu-mobile span:nth-child(2),.mobile-open #show-menu-mobile span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sol .mobile-open #show-menu-mobile span:nth-child(1) {
  left: 5px;
  top: 7px;
}

.sol .mobile-open #show-menu-mobile span:nth-child(2) {
  left: calc(50% - 5px);
  top: 7px;
}

.sol .mobile-open #show-menu-mobile span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

.sol .mobile-open #show-menu-mobile span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

.sol .mobile-open #show-menu-mobile span:nth-child(5) {
  left: 5px;
  top: 29px;
}

.sol .mobile-open #show-menu-mobile span:nth-child(6) {
  left: calc(50% - 5px);
  top: 29px;
}

.sol #main_admin_menu {
  position:sticky;
  top:0;
}

@media screen AND (max-width: 760px) {
  .mobile-open { overflow: hidden; }
  .sol .menu-aside ul > li:hover ul.submenu { animation:none;}
 .sol #main-header { padding-bottom: 50px  }
 .sol .menu-aside { transition: all 2s;}
 .sol .mobile-menu { display: block; transition: all 2s;}
 
 .sol .mobile-open .mobile-menu { position:fixed; top:15px; left: calc(100vw - 75px); z-index:102; width:60px; height:65px; transition: all 2s;}
 .sol .mobile-open #show-menu-mobile span { background: var(--mobile-close-bg); }
  .sol.dark .mobile-open #show-menu-mobile span { background: var(--dark-mobile-close-bg); }
 .sol #logo-wrap { height: 80px; padding-top: 10px; }

 .sol .mobile-open #wrapper .menu-aside { display: block; transition: all .8s; z-index:100; position:relative}
 .sol .content { margin-left: 0; transition: all .8s; }
 .sol .mobile-open .content { margin-left: 0; transition: all .8s; }
 .sol .list-menu { text-align: right; }
 .sol .ranges { clear: both; }
 .sol #main_admin_menu {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right: 100vw;
    overflow-y:hidden;
    overflow-x:hidden;
    transition: all 1s;
    background: var(--sidebar-menu-bg);
    height:100vh;
    padding-bottom: 15px;
  }
 .sol .mobile-open #main_admin_menu {
    right: 0;
    overflow-y:auto;
    transition: right 2s;
  }


  .sol.dark #main_admin_menu {
    background: var(--dark-sidebar-menu-bg);
  }
 .sol .menu-aside ul > li {
    max-width: 100%;
    
  }
 .sol .menu-aside ul:before { width:100vw; transition: all 2s;}
 .sol .menu-aside  .fa-chevron-down { display:none}
 .sol .menu-aside ul ul.submenu { 
  min-width: 100vw; 
  width: auto; 
  max-height: 100vh;
  position: relative; 
  left: 40px; 
  top: 0; 
  background: none; 
  overflow: visible; 
  border-bottom-right-radius: 10px; 
  border-top-right-radius: 10px;
  box-shadow: none;
  }
 .sol .menu-aside ul > li > a { width: 100vw; border-radius: 0px; }
 .sol .menu-aside ul > li:hover > a, .menu-aside ul > li:hover, .menu-aside ul > li:hover ul.submenu {animation: none; }
}

.sol .push {
  height:70px;
}

@media screen AND (max-width: 600px) { 
 .sol .header-right-menu li { display: block; }
}


@media screen AND (min-width: 992px) {
 .sol .container {
    width: auto;
  }
}