// Variables

/* ====================================== */
// Welcome UI Fonts

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

$ui_font_small: 14px;
$ui_font_normal: 16px;

h1, h2, h3, h4 {
  font-family: 'gt-eesti-regular';
}
.ui-app-area {
  font-family: 'hk_groteskmedium';
}
.ui-app-area strong {
  font-family: 'hk_groteskbold';
}

/* ====================================== */
// Welcome UI Colors

$ui_back:          #000000 !important;
$ui_white:         #ffffff !important;
$ui_blue:          #4A8FE7 !important;
$ui_red:           #ff0000 !important;
$ui_green:         #28A745 !important;
$ui_darkgray:      #9C9C9C !important;
$ui_middlegray:    #F2F2F2 !important;
$ui_lightgray:     #D9D9D9 !important;
$ui_lightergray:   #FAFAFA !important;
$ui_fill:          #F8F8F8 !important;

$ui-colors: () !default;
$ui-colors: map-merge(
  (
    "ui-black":         $ui_back,
    "ui-white":         $ui_white,
    "ui_blue":          $ui_blue,
    "ui_green":         $ui_green,
    "ui_red":           $ui_red,
    "ui_darkgray":      $ui_darkgray,
    "ui_middlegray":    $ui_middlegray,
    "ui_lightgray":     $ui_lightgray,
    "ui_lightergray":   $ui_lightergray,
    "ui_fill":          $ui_fill
  ),
  $ui-colors
);

$ui-radius: .25rem !important;

/* ====================================== */
// Welcome UI - Margin & Padding

$sm-margintop: 10px;
$sm-marginbottom: 10px;

$md-margintop: 30px;
$md-marginbottom: 30px;

$lg-margintop: 60px;
$lg-marginbottom: 60px;

$md-paddingtop: 30px;
$md-paddingbottom: 30px;

$lg-paddingtop: 60px;
$lg-paddingbottom: 60px;

/* ====================================== */

.ui-app-area h4 {
  font-size: 20px;
}

.land-app, .main-app {
  background-color: $ui_lightergray;
}
.land-app .main-btns .ui-menu-dots {
  display: block;
  float: right;
}
.ui-app-area {
  padding: 22px 20px;
}
.am-left-sidebar .sidebar-elements > li > ul {
  left: 16% !important;
}

/* ====================================== */

.am-wrapper.main-app .menu-app {
  width: 16%;
}
.am-wrapper.main-app .navbar {
  background-color: $ui_white;
  height: 58px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.05%);
}
.am-wrapper.main-app .ui-app-area {
  padding: 15px;
  width: 84%;
  float: right;
  background-color: #fafafa !important;
}
.am-wrapper.main-app .ui-app-area .main-content,
.am-wrapper.main-app .ui-app-area .page-head {
  padding: 20px;
}
.am-navbar-header .page-title img {
  width: 84px;
  margin-left: -26px;
  margin-top: -10px;
}
.admin-options .collapse,
.admin-options .nav {
  display: block !important;
  float: right;
  margin-left: 6px;
}
.admin-options .dropdown-toggle::after {
  display: none;
}
.admin-options .dropdown-menu {
  position: absolute;
  top: 100%;
  left: -80px;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 100px;
  padding: 6px;
  margin: 0.1538rem 0 0;
  font-size: 13px;
  color: #555555;
  text-align: right;
  list-style: none;
  background-color: #FFFFFF;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
}
.admin-options .dropdown-menu a {
  color: $ui_back;
}

/* ====================================== */

.breadcrumb {
  background-color: #fff !important;
  padding-right: 130px;
  box-shadow: 1px -1px 13px 0px rgba(174,174,174,0.25);
  -webkit-box-shadow: 1px -1px 13px 0px rgba(174,174,174,0.25);
  -moz-box-shadow: 1px -1px 13px 0px rgba(174,174,174,0.25);
  background-image: image-url('icons/division-line.svg');
  background-repeat: repeat-y;
  background-position: top right 120px;
}
.breadcrumb a {
  color: $ui_back;
  border-bottom: 1px solid $ui_blue;
}
.breadcrumb a:hover {
  text-decoration: none;
}

/* ====================================== */

.prev-next {
  display: block;
  position: absolute;
  right: 30px;
  top: 32px;
}
.prev-next a {
  margin: 0 5px;
}

/* ====================================== */

.am-login img {
  width: 128px;
  display: block;
  margin-bottom: 12px;
}
.login-container .card-header {
  background-color: $ui_back;
  color: $ui_white;
}
.login-container .card-body {
  padding: 35px 35px 20px;
}
.login-container .btn-block {
  display: block;
  width: auto;
  margin: 0 auto;
  border: none;
  font-family: gt-eesti-medium;
  color: #fff;
  padding: 8px 40px;
  border-radius: 100px;
  font-size: 18px !important;
  font-family: gt-eesti-medium !important;
}
.login-container .input-group-text {
  display: none;
}
.login-container .form-group.footer.row {
  margin-top: 30px;
  border-top: 1px solid #d9d9d9;
  padding-top: 20px;
  margin-bottom: 0;
}
.login-container .form-control {
  height: 42px;
  border: 1px solid #b2b2b2;
}
.main-app .dashboard-box {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 20px;
}
.main-app .dashboard-area {
  padding: 30px;
}
.main-app .dashboard-area .data-info .value {
  font-weight: 600;
  font-size: 22px;
}

.am-left-sidebar .sub-menu {
  position: relative !important;
  height: auto;
  width: auto;
  left: 0 !important;
  table-layout: auto;
  top: auto;
  display: block;
}
.am-left-sidebar .sub-menu .title {
  display: none;
}
.am-left-sidebar .sub-menu .nav-items {
  display: block;
  float: left;
  position: relative;
  height: auto;
  width: 100%;
  padding: 0 0 0 30px;
}
.am-left-sidebar .sidebar-elements > li > ul >
.nav-items .am-scroller .content {
  position: relative !important;
  padding-top: 0 !important;
}
.am-left-sidebar .sidebar-elements > li > ul {
  left: 0% !important;
  box-shadow: none !important;
  width: 100% !important;
}
.am-left-sidebar .sidebar-elements > li:hover,
.am-left-sidebar .sidebar-elements > li.open {
  background-color: #fff !important;
}
.am-left-sidebar .sidebar-elements > li {
  border-bottom: none !important;
  list-style: none;
}
.main-app .navbar .title .badge {
  font-size: 13px !important;
}

.am-left-sidebar .parent .list-group-item:before {
  background-image: url("https://land.welcomehomes.com/assets/icons/icn-submenu-cf0fa33c4c7e45be386bde2e5d9cf8b5297cf24558243549ff5b308a988f8af1.svg");
  background-repeat: no-repeat;
  background-position: right 10px top 18px;
  content: ' ';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.2;
}
.am-left-sidebar .parent .list-group-item:hover:before {
  opacity: 1;
}
.am-left-sidebar .parent.open .list-group-item:before {
  background-image: url("https://land.welcomehomes.com/assets/icons/icn-submenu-close-c4f6ca0fdef472f702d123f11b746478f1820ccb4051671984fea27e64f51d0a.svg");
  background-repeat: no-repeat;
  background-position: right 10px top 18px;
  content: ' ';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
}
.list-group-item:first-child {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.am-left-sidebar .sidebar-elements > li > ul > .nav-items .am-scroller .content > ul > li > a:hover {
  background-color: transparent !important;
}
.admin-options {
  padding-right: 0 !important;
}

/* ====================================== */

@media (max-width: 1024px) and (min-width: 769px) {
  .am-wrapper.main-app .menu-app {
    width: 20% !important;
    max-width: 20% !important;
  }
  .am-wrapper.main-app .ui-app-area {
    width: 80%;
  }
  .main-app .ui-app-area .page-head {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .am-wrapper.main-app .ui-app-area .main-content, .am-wrapper.main-app .ui-app-area .page-head {
    padding: 20px 0;
  }
  .admin-options {
    margin-right: -15px;
  }
}
@media (min-width: 769px) {
  input[type="radio"]#swipe, input[type="checkbox"]#swipe {
    display: none; 
  }
}
@media (max-width: 768px) {
  .page-head .col-md-6 {
    width: 50%;
    display: block;
    float: left;
    position: relative;
  }
  .am-wrapper.main-app .navbar {
    height: 50px;
    display: block;
  }
  .am-top-header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
  }
  .am-left-sidebar .am-logo {
    height: 50px !important;
  }
  .am-wrapper.main-app .ui-app-area {
    width: 100%;
    margin-top: 50px;
    display: block;
  }
  .am-wrapper.main-app .menu-app {
    width: 100%;
    transform: translate3d(0, 0, 0);
  }
  .am-left-sidebar.menu-app {
    transform: translate3d(260px, 0px, 0px) !important;
    position: fixed !important;
    width: 260px !important;
    background: #112e66;
    color: #eee;
    right: 0;
    left: auto;
    height: 100%;
    transition: all 0.3s;
  }
  .am-left-sidebar .sidebar-elements > li.parent > a:after {
    display: none;
  }
  .am-left-sidebar .sidebar-elements > li > a {
    padding: 10px 10px 10px 0px;
  }
  .am-navbar-header .page-title img {
    margin-left: -18px;
    position: fixed;
    margin-top: 2px;
  }
  .button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10000;
    color: white;
    padding: 10px;
    font-size: 30px;
    cursor: pointer;
  }
  .button .fa {
    transition: color 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition-delay: 0.75s;
  }
  input[data-function*=swipe] {
    position: absolute;
    opacity: 0;
  }
  label[data-function*=swipe] {
    position: fixed;
    top: 0px;
    right: 5px;
    display: block;
    width: 36px;
    height: 50px;
    text-align: center;
    color: #444;
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s;
    z-index: 9999;
    font-size: 14px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgNmgtMjR2LTRoMjR2NHptMCA0aC0yNHY0aDI0di00em0wIDhoLTI0djRoMjR2LTR6Ii8+PC9zdmc+');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: top 16px right 12px;
  }
  .am-content.ui-app-area {
    flex: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s;
  }
  input[data-function*=swipe]:checked ~ .am-content {
    transform: translate3d(0, 0px, 0px) !important;
  }
  input[data-function*=swipe]:checked ~ .am-left-sidebar.col-12.col-lg-2.p-0.menu-app {
    transform: translate3d(0px, 0px, 0px) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  .nav-menu-btn {
    display: none;
    /*vertical-align: middle;
    padding: 5px;
    cursor: pointer;
    margin-top: 14px;
    border: 1px solid #000;
    z-index: 9999;*/
  }
  .nav-menu-btn .menu-bar {
    background: #000;
    width: 15px;
    height: 2px;
    margin: 0 0 3px;
    transition: all .2s ease-in-out;
  }
  .nav-menu-btn .menu-bar:last-child {
    margin: 0;
  }
  .am-wrapper.main-app .ui-app-area .main-content,
  .am-wrapper.main-app .ui-app-area .page-head {
    padding: 20px 0;
  }
  .main-app .ui-app-area .page-head {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .user-profile {
    position: fixed;
    top: 11px;
    right: 46px;
  }
  .user-notifications {
    position: fixed;
    top: 11px;
    right: 78px;
  }
  .navbar-toggler {
    display: none;
  }
  .col-6.admin-options {
    display: block;
    float: right;
    position: relative;
    padding-right: 40px !important;
    height: 30px;
  }
}

@media (max-width: 580px) {
  .am-content.ui-app-area .widget-area .widget-box {
    width: 50% !important;
  }
  .am-content.ui-app-area .block-stats .block-stats-area .parcels-list div {
    width: 100% !important;
  }
  .am-content.ui-app-area .block-stats .block-stats-area .table-responsive tbody tr td {
    padding-right: 10px;
  }
  .am-content.ui-app-area .block-stats .block-stats-area.asking-price-range .w-25 {
    width: 50% !important;
    margin-bottom: 12px;
  }
  .am-content.ui-app-area .block-stats .block-stats-area .list-approbed {
    width: 100% !important;
    padding-top: 320px;
    padding-right: 0 !important;
  }
  .am-content.ui-app-area .block-stats .block-stats-area .maps-frame {
    height: 300px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .am-content.ui-app-area table {
    table-layout: auto !important;
  }
}