body {
  background: #f2f2f2;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-display: auto;
}

@media only screen and (min-width: 1200px) {
  .ui.container {
    width: 1200px !important;
  }
}
@media only screen and (max-width: 1199px) and (min-width: 992px) {
  .ui.container {
    width: 1050px !important;
  }
}

body.pushable > .pusher {
  background: #f2f2f2;
}

#logo {
  width: 200px;
}
#logo-mob {
  width: 150px;
}
#logo-side {
  width: 150px;
}

#logo-item:hover {
  background: white;
}

#main-menu {
  position: relative;
  height: 90px;
  margin: 0;
  font-size: 16px;
  border-top: none;
  border-bottom: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all 0.5s;
  border-radius: 0;
  z-index: 999;
}

.margin {
  height: 90px;
  display: none;
}
.margin-tab {
  height: 80px;
}

.margin.active {
  display: block;
}

#mobile-only-menu {
  height: 80px;
  margin: 0;
  border-top: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all 0.5s;
  z-index: 9999;
}

#toolbar-menu {
  margin-bottom: 0;
  margin-top: 0;
  border-radius: 0;
  border-bottom: none;
  font-size: 14px;
}

#toolbar-menu a {
  font-weight: 900;
}

.ui.yellow-sliptest.button {
  /* background: #f7cd2b; */
  background: #f7cd2b;
}
.ui.yellow-sliptest.button:hover {
  background: #f5d255;
}

#footer {
  padding-top: 40px;
  background: white;
  text-align: justify;
}

#footer .item {
  text-align: left;
}

#footer-divider {
  margin-bottom: 0;
}

#burger-dropdown {
  font-size: 20px;
}

#client-menu {
  margin: 0;
  height: 105vh;
  width: 230px;
  position: fixed;
  top: -5px;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow: hidden;
  z-index: 99999;
  padding-bottom: 20px;
}

.seg-wrap {
  margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#client-menu:hover {
  overflow-y: auto;
}

#pdf-download {
  /* background: #f7cd2b; */
  background: #f7cd2b;
}
#pdf-download:hover {
  /* background: #f5d255; */
  background: #ffdc00;
}

#margin {
  height: 50px;
}
#portal-wrapper {
  height: 2300px;
}

#sidebar-logo-item {
  margin: 10px 0;
}

#portal-wrapper {
  margin-left: 230px;
}

#wrapper {
  margin: 0 !important;
}

#page-not-found {
  font-size: 35px;
}

#cookie-policy {
  display: none;
  position: fixed;
  bottom: -20px;
  /* background: #080808c7; */
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 16px;
  text-align: justify;
  z-index: 9999999999;
}

#cookie-policy h2 {
  text-align: left;
}

#cookie-policy .ui.right.floated.huge.button {
  margin-left: 40px;
}
#quote-header {
  /* background: #f7cd2b; */
  background: #f7cd2b;
}
#quote-header:hover {
  background: #f7cd2b;
}
.ui.menu:not(.vertical) .item.hover:hover {
  /* background: #f7cd2b; */
  background: #ffdc00;
}
.ui.menu:not(.vertical) .item.selected {
  /* background: #f7cd2b; */
  background: #f7cd2b;
}
#services-drop {
  /* background: #f7cd2b; */
  background: #f7cd2b;
}
#guidance-drop {
  /* background: #f7cd2b; */
  background: #f7cd2b;
}
#success-message {
  display: none;
  position: fixed;
  bottom: 20px;
  padding: 25px;
  left: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 999;
}
#error-message {
  display: none;
  position: fixed;
  bottom: 20px;
  padding: 25px;
  left: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 999;
}

@media only screen and (min-width: 991px) and (max-width: 1024px) {
  .ui.container {
    width: 980px !important;
  }
  #main-menu {
    font-size: 14px;
  }
}

/* .pusher { 
  min-height: 100% !important; 
  height: 100% !important;
} */

/* .pusher { min-height: 100% !important; height: 100% !important } */

/* .ui.segment{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} */

/* Semantic UI has these classes, however they're only applicable to*/
/* grids, containers, rows and columns.*/
/* plus, there isn't any `mobile hidden`, `X hidden` class.*/
/* this snippet is using the same class names and same approach*/
/* plus a bit more but to all elements.*/
/* see https://github.com/Semantic-Org/Semantic-UI/issues/1114*/

/* Mobile */
@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }

  #portal-wrapper {
    margin-left: auto;
  }

  .ui.form input:not([type]),
  .ui.form input[type="date"],
  .ui.form input[type="datetime-local"],
  .ui.form input[type="email"],
  .ui.form input[type="file"],
  .ui.form input[type="number"],
  .ui.form input[type="password"],
  .ui.form input[type="search"],
  .ui.form input[type="tel"],
  .ui.form input[type="text"],
  .ui.form input[type="time"],
  .ui.form input[type="url"] {
    font-size: 16px;
  }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large screen only"]:not(.tablet),
  [class*="widescreen only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
  [class*="mobile only"]:not([class*="large screen"]),
  [class*="tablet only"]:not([class*="large screen"]),
  [class*="computer only"]:not([class*="large screen"]),
  [class*="large screen hidden"],
  [class*="widescreen only"]:not([class*="large screen"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
  [class*="mobile only"]:not([class*="widescreen"]),
  [class*="tablet only"]:not([class*="widescreen"]),
  [class*="computer only"]:not([class*="widescreen"]),
  [class*="large screen only"]:not([class*="widescreen"]),
  [class*="widescreen hidden"],
  [class*="widescreen or lower hidden"] {
    display: none !important;
  }
}