assets/css/appscms-theme.css in appscms-tools-theme-4.8.1 vs assets/css/appscms-theme.css in appscms-tools-theme-4.8.2

@@ -2133,10 +2133,249 @@
 @media (min-width: 768px) and (max-width: 991.98px) {
   .toolfilters {
     font-size: 12px;
   }
 }
+.mobile-search-bar {
+  position: relative;
+  height: 100px;
+  width: 100%;
+  display: none;
+}
 
+.mobile-search-container {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  overflow: hidden;
+  height: 38px;
+  margin: 20px 0px 20px 0px;
+  background-color: white;
+  position: relative;
+}
+
+.mobile-search-input {
+  flex: 1;
+  border: none;
+  padding: 12px 16px;
+  font-size: 16px;
+  outline: none;
+}
+
+.mobile-search-input::placeholder {
+  color: #888;
+}
+
+.mobile-search-button {
+  background-color: #000;
+  border: none;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+}
+
+.mobile-search-button svg {
+  /* fill: #fff; */
+  height: 20px;
+}
+
+.mobile-search-button:active {
+  background-color: #555;
+}
+
+.mobile-nav-search {
+  position: relative;
+}
+
+.mobile-result-item {
+  padding: 9px 12px;
+}
+
+.mobile-result-item a {
+  color: #222325;
+}
+
+.mobile-searchbarResults {
+  background-color: #fff;
+  border: 1px solid #e4e5e7;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 17px 58px rgba(0, 0, 0, 0.08);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #74767e;
+  cursor: default;
+  margin-top: 8px;
+  padding: 12px;
+  position: fixed;
+  margin-top: 42px;
+  width: 244px;
+  height: 400px;
+  overflow-y: scroll;
+  z-index: 101;
+  display: none;
+}
+
+.scroll-container {
+  display: flex;
+  align-items: center;
+  background-color: #333;
+  position: relative;
+}
+
+.scroll-left,
+.scroll-right {
+  background-color: #4456f6f7;
+  color: white;
+  border: none;
+  height: 40px;
+  cursor: pointer;
+  position: absolute;
+  width: 40px;
+  top: 50%;
+  z-index: 100;
+  transform: translateY(-50%);
+}
+
+.scroll-left {
+  left: 0;
+}
+
+.scroll-right {
+  right: 0;
+}
+
+.scroll-left:hover,
+.scroll-right:hover {
+  background-color: #8691f6f7;
+}
+
+.navbar {
+  /* overflow-x: auto; */
+  white-space: nowrap;
+  flex-grow: 1;
+  scroll-behavior: smooth;
+  display: flex;
+}
+
+.navbar ul {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  list-style-type: none;
+}
+
+.navbar li {
+  display: inline;
+}
+
+.search-container {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  overflow: hidden;
+  height: 38px;
+  width: 400px;
+  background-color: white;
+  position: relative;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  padding: 12px 16px;
+  font-size: 16px;
+  outline: none;
+}
+
+.search-input::placeholder {
+  color: #888;
+}
+
+.search-button {
+  background-color: #1a2ee7;
+  border: none;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+}
+
+.search-button svg {
+  /* fill: #fff; */
+  height: 20px;
+}
+
+.search-button:active {
+  background-color: #555;
+}
+.nav-search {
+  position: relative;
+}
+.result-item {
+  padding: 9px 12px;
+}
+.result-item a {
+  color: #222325;
+}
+.searchbarResults {
+  overflow: scroll;
+  height: 60vh;
+  background-color: #fff;
+  border: 1px solid #e4e5e7;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 17px 58px rgba(0, 0, 0, 0.08);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #74767e;
+  cursor: default;
+  margin-top: 8px;
+  padding: 12px;
+  position: absolute;
+  width: 100%;
+  z-index: 101;
+  display: none;
+}
+
+.modal1 {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(59, 58, 58, 0.9);
+}
+.modal1-content1 {
+  margin: auto;
+  display: block;
+  width: 80%;
+  max-width: 800px;
+  margin-top: 20px;
+}
+.modal1-body img {
+  width: 100%;
+  height: auto;
+}
+.close1 {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  color: #fff;
+  cursor: pointer;
+}
+.close1:hover {
+  color: #ccc;
+}
 /* Large devices (desktops) */
 @media (min-width: 992px) and (max-width: 1199.98px) {
   /* Insert CSS code here */
 }