/* Multi-level Extensions - INOBEI - Start */

/* Level 4 */

/* Level 4 Item - BG Color */
.sidebar-menu > li > ul > li > ul > li ul {
  background-color: #1F2228;
}
/* Level 4 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > a {
  color: #bbbbbb;
}
/* Level 4 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > ul > li > ul > li > a:focus {
  color: inherit;
  background-color: transparent;
}

/* Level 4 - Active Item Border */
.sidebar-menu > li > ul > li > ul > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  height: 90%;
  width: 3px;
  background: #999;
}

/* Level 4 Active Item - Border Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li:focus > a:after {
  background: #F7C65F;
}
/* Level 4 Active Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li.active > a {
  background: transparent;
}
/* Level 4 Active Item - Icon Color */
.sidebar-menu > li > ul > li > ul > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > ul > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #ffffff;
}
/* Level 4 Active Item - Border Color */
.sidebar-menu > li > ul > li > ul > li > ul > li.active > a:after {
  background: #F7C65F;
}

/* Level 5 */

/* Level 5 Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li ul {
  background-color: #1B1E23;
}
/* Level 5 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > a {
  color: #bbbbbb;
}
/* Level 5 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > a:focus {
  color: inherit;
  background-color: transparent;
}

/* Level 5 Active Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li.active > a {
  background: transparent;
}
/* Level 5 - Active Item Border */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  height: 90%;
  width: 3px;
  background: #999;
}

/* Level 5 Active Item - Border Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li:focus > a:after {
  background: #EC6F5A;
}

/* Level 5 Active Item - Icon Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #ffffff;
}
/* Level 5 Active Item - Border Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li.active > a:after {
  background: #EC6F5A;
}

/* Level 6 */

/* Level 6 Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li ul {
  background-color: #181B1F;
}
/* Level 6 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a {
  color: #bbbbbb;
}
/* Level 6 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a:focus {
  color: inherit;
  background-color: transparent;
}

/* Level 6 Active Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a {
  background: transparent;
}
/* Level 6 - Active Item Border */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  height: 90%;
  width: 3px;
  background: #999;
}
/* Level 6 Active Item - Border Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li:focus > a:after {
  background: #37BC9B;
}
/* Level 6 Active Item - Icon Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #ffffff;
}
/* Level 6 Active Item - Border Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a:after {
  background: #37BC9B;
}

/* Level 7 */

/* Level 7 Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li ul {
  background-color: #14171A;
}
/* Level 7 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a {
  color: #bbbbbb;
}
/* Level 7 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a:focus {
  color: inherit;
  background-color: transparent;
}

/* Level 7 Active Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a {
  background: transparent;
}
/* Level 7 - Active Item Border */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  height: 90%;
  width: 3px;
  background: #999;
}
/* Level 7 Active Item - Border Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:focus > a:after {
  background: #85D27A;
}
/* Level 7 Active Item - Icon Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #ffffff;
}
/* Level 7 Active Item - Border Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a:after {
  background: #85D27A;
}

/* Level 8 */

/* Level 8 Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li ul {
  background-color: #111316;
}
/* Level 8 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a {
  color: #bbbbbb;
}
/* Level 8 Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a:focus {
  color: inherit;
  background-color: transparent;
}

/* Level 8 Active Item - BG Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a {
  background: transparent;
}
/* Level 8 - Active Item Border */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  height: 90%;
  width: 3px;
  background: #999;
}
/* Level 8 Active Item - Border Color:hover */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:focus > a:after {
  background: #967adc;
}
/* Level 8 Active Item - Icon Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #ffffff;
}
/* Level 8 Active Item - Border Color */
.sidebar-menu > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li.active > a:after {
  background: #967adc;
}

/*
http://www.w3schools.com/tags/ref_colorpicker.asp
use #22262C
*/

/* Multi-level Extensions - INOBEI - End */


.addbutton {
  	margin: 5px;
  	float: right;
  }
  
.specialbox {
  	text-align: right;
  	float: none;
}

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
  .table-scroll {
  	overflow-x: scroll;
  }
  
  
  
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
  .table-scroll {
  	overflow-x: scroll;
  }
  
  .specialbox {
  	text-align: right;
  	float: none;
  }
  
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
  .table-scroll {
  	overflow-x: scroll;
  }
  
  .specialbox {
  	text-align: right;
  	float: none;
  }
  
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
  .table-scroll {
  	overflow-x: scroll;
  }
  
  .specialbox {
  	text-align: right;
  	float: none;
  }
  
}
	

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
  .table-scroll {
  	overflow-x: scroll;
  }
  
  .specialbox {
  	float: right;
  }
  
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
  .panel-extended {
  	width: 700px;
  }
  
  .nav-theme {
	margin-right: 20px;
  }
  
  .specialbox {
  	float: right;
  }

  .addbutton {
  	margin-right: 20px;
  }
  
  
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

  .specialbox {
  	float: right;
  }
  
}

/* #### Desktops #### */
@media screen and (min-width: 768px){
  /* some CSS here */
  .table-scroll {
  	overflow-x: auto;
  }
  
  .specialbox {
  	float:right;
  }
  
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
  .table-scroll {
  	overflow-x: auto;
  }
  
  .specialbox {
  	float:right;
  }
  
}

.table {
	back-ground-color: white;
}

.nav-theme > li {
	border: 1px solid black;
}

.nav-theme > li.active > a {
	font-weight: bold;
	background-color: white;
	border-top: 2px solid #4A89DC;
}

.nav-theme > li.active > a {
	font-weight: bold;
	background-color: white;
	border-top: 2px solid #4A89DC;
}

.nav-theme > li.active > a:hover {
	color: #44A2DD;
	background-color: white;
}

.right-tabs .nav {
    float: right;
    border-bottom: 0px;
}

.right-tabs .nav li { 
	float: left; 
}

.right-tabs .nav li.dropdown > ul > li { 
	clear: both;
	width: 100%;
}


.product-search .ms-sel-ctn {
	min-height: auto !important;
	padding-top: 0px !important;
}

.product-search .ms-ctn .ms-trigger .ms-trigger-ico {
	margin-top: 17px !important;
}

/* Autocomplete */
.ms-sel-ctn {
	min-height: 32px;
	padding-top: 5px;
}

.ms-sel-ctn > input {
	position: relative; 
	left: 5px;
}


.state-error > div.ms-ctn,
.state-error > div.ms-ctn > div > input {
	background: #fee9ea none repeat scroll 0 0;
    border-color: #de888a;
}

.state-success > div.ms-ctn,
.state-success > div.ms-ctn > div > input {
	background: #f0fee9 none repeat scroll 0 0;
    border-color: #a5d491;
}

div.ms-sel-item {
	color: #626262;
	margin-right: 3px !important; 
}
	
.special-search > div.ms-ctn {
	height: 41px;
	padding-top:10px;
}

.button {
	margin-bottom: 1px !important; 
}

.btn {
	margin-bottom: 1px !important; 
}

.container {
	min-height: 500px;
}


/*SLIDE CSS*/

.inbblock h1 {
	color: #3498db;
    font-size: 32px;
    font-weight: 600;
    line-height: 150px;
}

.slick-slide span.inbblock {
    background: #fff none repeat scroll 0 0;
    display: block;
    border: 1px solid #ddd;
    height: 200px;
    margin: 15px;
    text-align: center;
}

.slick-prev::before, .slick-next::before {
	color: #4a89dc !important;
}

.slick-prev {
	color: transparent !important;
}

.slick-next {
	color: transparent !important;
}

/*Additions Nov 16, 2023*/

.formgroup-pad {
	
	margin-left: 10px !important;
	
}

.container-report {
  margin-right: 0px; margin-left: 10px !important;
  margin-left: 0px; margin-left: 10px !important;
  padding-left: 11px;
  padding-right: 11px;
}

/*PANEL*/

.panel-butterscotch .panel-controls > a,
.panel-sun .panel-controls > a {
  color: #FFF;
}

.panel-butterscotch.panel-border {
  border-color: #FABD02;
}
.panel-butterscotch > .panel-heading {
  color: #ffffff;
  background-color: #FABD02;
  border-color: #FABD02;
}
.panel-butterscotch > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #FABD02;
}
.panel-butterscotch > .panel-heading .badge {
  color: #FABD02;
  background-color: #ffffff;
}
.panel-butterscotch > .panel-heading > .panel-title {
  color: #ffffff;
}
.panel-butterscotch > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #FABD02;
}
.panel-butterscotch > .panel-body.fill {
  color: #FFF;
  border-color: #82ade7;
  background-color: #82ade7;
}
.panel-butterscotch > .panel-body.border {
  border: 3px solid #FABD02;
}



.panel-sun.panel-border {
  border-color: #FDC12A;
}
.panel-sun > .panel-heading {
  color: #ffffff;
  background-color: #FDC12A;
  border-color: #FDC12A;
}
.panel-sun > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #FDC12A;
}
.panel-sun > .panel-heading .badge {
  color: #FDC12A;
  background-color: #ffffff;
}
.panel-sun > .panel-heading > .panel-title {
  color: #ffffff;
}
.panel-sun > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #FDC12A;
}
.panel-sun > .panel-body.fill {
  color: #FFF;
  border-color: #FDC12A;
  background-color: #FDC12A;
}
.panel-sun > .panel-body.border {
  border: 3px solid #FDC12A;
}

.panel-woman.panel-border {
  border-color: #F764AF;
}
.panel-woman > .panel-heading {
  color: #ffffff;
  background-color: #F764AF;
  border-color: #F764AF;
}
.panel-woman > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #F764AF;
}
.panel-woman > .panel-heading .badge {
  color: #F764AF;
  background-color: #ffffff;
}
.panel-woman > .panel-heading > .panel-title {
  color: #ffffff;
}
.panel-woman > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #F764AF;
}
.panel-woman > .panel-body.fill {
  color: #FFF;
  border-color: #F764AF;
  background-color: #F764AF;
}
.panel-woman > .panel-body.border {
  border: 3px solid #F764AF;
}

.label-woman {
  background-color: #F764AF;
}
.label-woman[href]:hover,
.label-woman[href]:focus {
  background-color: #F764AF;
}

.shop-sizes {
	list-style-type: none;
	display: flex;
	padding: 0px;
	margin: 0px;
}



.shop-sizes > li {
	border: 1px solid #ddd;
  	display: inline;
	list-style: none;
	padding: 3px;
	margin-left: 0px;
	margin-right: 0px;
}

.shop-sizes > li:first-child {
  border-right: none
}


.shop-bold {
	font-weight: bold;
}

.shop-btn-enabled {
	font-weight: bold;
	color: #4A89DC !important
}

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

/*page demo styles*/
  .wizard .steps .fa,
  .wizard .steps .glyphicon,
  .wizard .steps .glyphicon {
    /*display: none;*/
  }


.dropdown-alert {
	background-color: #967adc;
}

.dropdown-alert > a {
	color: white !important
}

.dropdown-alert > a:hover {
	color: white !important;
	font-weight: bold;
	background-color: #967adc !important
}


.dropdown-primary {
	background-color: #4A89DC;
}

.dropdown-primary > a {
	color: white !important
}

.dropdown-primary > a:hover {
	color: white !important;
	font-weight: bold;
	background-color: #4A89DC !important
}

.dropdown-success {
	background-color: #70CA63;
}

.dropdown-success > a {
	color: white !important
}

.dropdown-success > a:hover {
	color: white !important;
	font-weight: bold;
	background-color: #70CA63 !important
}

.dropdown-system {
	background-color: #37BC9B;
}

.dropdown-system > a {
	color: white !important
}

.dropdown-system > a:hover {
	color: white !important;
	font-weight: bold;
	background-color: #37BC9B !important
}

.dropdown-info {
	background-color: #3BAFDA;
}

.dropdown-info > a {
	color: white !important
}

.dropdown-info > a:hover {
	color: white !important;
	font-weight: bold;
	background-color: #3BAFDA !important
}

.panel-heading-form {
    position: relative ;
    height: 40px ;
    line-height: 36px ;
    background: #fafafa ;
    color: #666666 ;
    font-size: 13px ;
    font-weight: 600 ;
    padding: 0 8px ;
    border: 1px solid #e5e5e5 ;
    border-top-right-radius: 1px ;
    border-top-left-radius: 1px ;
}

.panel-body-form {
    position: relative;
    padding: 15px;
    border: 1px solid #e5e5e5;
}

.panel-footer-form {
    padding: 10px 15px;
    background-color: #fafafa;
    border: 1px solid #e5e5e5;
    border-bottom-right-radius: 1px;
    border-bottom-left-radius: 1px;
}

/* PANEL CONTEXTUALS
 */

.panel-primary > .panel-heading-form {
  color: #ffffff;
  background-color: #4a89dc;
  border-color: #4a89dc;
}
.panel-primary > .panel-heading-form + .panel-collapse > .panel-body {
  border-top-color: #4a89dc;
}
.panel-primary > .panel-heading-form .badge {
  color: #4a89dc;
  background-color: #ffffff;
}
.panel-primary > .panel-heading-form > .panel-title {
  color: #ffffff;
}


.panel-success > .panel-heading-form {
  color: #ffffff;
  background-color: #70ca63;
  border-color: #70ca63;
}
.panel-success > .panel-heading-form + .panel-collapse > .panel-body {
  border-top-color: #70ca63;
}
.panel-success > .panel-heading-form .badge {
  color: #70ca63;
  background-color: #ffffff;
}
.panel-success > .panel-heading-form > .panel-title {
  color: #ffffff;
}

.panel-info > .panel-heading-form {
  color: #ffffff;
  background-color: #3bafda;
  border-color: #3bafda;
}
.panel-info > .panel-heading-form + .panel-collapse > .panel-body {
  border-top-color: #3bafda;
}
.panel-info > .panel-heading-form .badge {
  color: #3bafda;
  background-color: #ffffff;
}
.panel-info > .panel-heading-form > .panel-title {
  color: #ffffff;
}

.panel-warning > .panel-heading-form {
  color: #ffffff;
  background-color: #f6bb42;
  border-color: #f6bb42;
}
.panel-warning > .panel-heading-form + .panel-collapse > .panel-body {
  border-top-color: #f6bb42;
}
.panel-warning > .panel-heading-form .badge {
  color: #f6bb42;
  background-color: #ffffff;
}
.panel-warning > .panel-heading-form > .panel-title {
  color: #ffffff;
}

.panel-danger > .panel-heading-form {
  color: #ffffff;
  background-color: #e9573f;
  border-color: #e9573f;
}
.panel-danger > .panel-heading-form + .panel-collapse > .panel-body {
  border-top-color: #e9573f;
}
.panel-danger > .panel-heading-form .badge {
  color: #e9573f;
  background-color: #ffffff;
}
.panel-danger > .panel-heading-form > .panel-title {
  color: #ffffff;
}

.panel-alert > .panel-heading-form {
  color: #ffffff;
  background-color: #967adc;
  border-color: #967adc;
}
.panel-alert > .panel-heading-form + .panel-collapse > .panel-body {
  border-top-color: #967adc;
}
.panel-alert > .panel-heading-form .badge {
  color: #967adc;
  background-color: #ffffff;
}
.panel-alert > .panel-heading-form > .panel-title {
  color: #ffffff;
}

.panel-system > .panel-heading-form {
  color: #ffffff;
  background-color: #37bc9b;
  border-color: #37bc9b;
}
.panel-system > .panel-heading-form + .panel-collapse > .panel-body {
  border-top-color: #37bc9b;
}
.panel-system > .panel-heading-form .badge {
  color: #37bc9b;
  background-color: #ffffff;
}
.panel-system > .panel-heading-form > .panel-title {
  color: #ffffff;
}

.panel-dark > .panel-heading-form {
  color: #ffffff;
  background-color: #3b3f4f;
  border-color: #3b3f4f;
}
.panel-dark > .panel-heading-form + .panel-collapse > .panel-body {
  border-top-color: #3b3f4f;
}
.panel-dark > .panel-heading-form .badge {
  color: #3b3f4f;
  background-color: #ffffff;
}
.panel-dark > .panel-heading-form > .panel-title {
  color: #ffffff;
}


@media (max-width: 900px) {
  body.sb-l-c #content-footer.affix {
    margin-left: 0px;
  }
}



/* Extra Small Devices (phones, less than 576px) */
@media (max-width: 575.98px) {
  .image-banner {
    /* Styles for xs screens (mobile) */
    width: 100%;
    padding: 5px;
  }
}

/* Small Devices (sm, ≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .image-banner {
    /* Styles for sm screens (small tablets) */
    width: 50%;
    padding: 5px;
  }
}

/* Medium Devices (md, ≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .image-banner {
    /* Styles for md screens (tablets, small desktops) */
    width: 50%;
    padding: 5px;
  }
}

/* Large Devices (lg, ≥992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .image-banner {
    /* Styles for lg screens (desktops) */
    width: 50%;
    padding: 5px;
  }
}

/* Extra Large Devices (xl, ≥1200px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .image-banner {
    /* Styles for xl screens (large desktops) */
    width: 33%;
    padding: 5px;
  }
}

/* Extra Extra Large Devices (xxl, ≥1400px) */
@media (min-width: 1400px) {
  .image-banner {
    /* Styles for xxl screens (very large desktops) */
    width: 33%;
    padding: 5px;
  }
}