/*the container must be positioned relative:*/
.custom-select1 {																	/*custom-select */     	/*custom-select1 */	
  position: relative;
  font-family: Arial;
  
  font-family: Tahoma, Geneva, sans-serif;
  /*
  font-size: 16px;
  */
  font-size: 13px;
  line-height: 20px;
}
.custom-select1 select {															/*custom-select */     	/*custom-select1 */	
  display: none; /*hide original SELECT element:*/
 /* display: block; hide original SELECT element:*/
 
}
.select-selected1 {																	/*select-selected */	/*select-selected1 */
	/*
  background-color: DodgerBlue;
   background-color: #039696;
  */
  
 
  background-color: rgba(3, 146, 146, 0.87);
  background-color: rgba(3, 146, 146, 0.84);
  background-color: rgba(3, 146, 146, 0.70);
  background-color: rgba(228, 231, 230, 0.70);
  background-color: rgba(4, 175, 175, 0.70);
  background-color: rgba(3, 146, 146, 0.70);
  background-color: rgba(255, 255, 255, 0.70);
  /*
  background-color: #04afaf;
  background-color: #039696;
  */
  height: 24px;
  height: 30px;
  height: 28px;
  height: 27px;
  height: 24px;
 
}
/*style the arrow inside the select element:*/
.select-selected1:after {															/*select-selected */		/*select-selected1 */
  position: absolute;
  content: "";
  
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  
  border: 6px solid transparent;
 /* */
  border-color: #fff transparent transparent transparent;
  border-color: #404040 transparent transparent transparent;
  /*
  border: 2px solid #3300ff;
  */
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected1.select-arrow-active1:after {												/*select-selected */		/*select-arrow-active */  /*select-selected1 */  /*select-arrow-active1 */
  border-color: transparent transparent #fff transparent;
  top: 7px;
  /*
   border: 10px solid #ff0000;
   */
}
/*style the items (options), including the selected item:*/
.select-items1 div,.select-selected1 {														/*select-items*/	/*select-selected */		/*select-items1 */		/*select-selected1 */
  color: #ffffff;
  color: #404040;
  /*
    padding: 8px 16px;
  */
  padding: 1px 16px;
  padding: 2px 16px 2px 16px;
 
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
  /*
  border: 10px solid #3300ff;
   border: 10px solid #ffffff;
   border: 10px solid #039292;
  */
  /*
  border: 2px solid #000000;
  */
  
}
/*style items (options):*/
.select-items1 {																				/*select-items*/		/*select-items1 */
  position: absolute;
  /*
  background-color: DodgerBlue;
  max-height: 534px !important;
   background-color: #039696;
    background-color: #ff00ff;
  */
 /*
 background-color: #039696;
 */
 background-color: rgba(3, 146, 146, 0.87);
 background-color: rgba(3, 146, 146, 0.84);
  background-color: rgba(3, 146, 146, 0.70);
  background-color: rgba(3, 146, 146, 0.86);
   background-color: rgba(3, 146, 146, 0.87);
    background-color: rgba(3, 146, 146, 0.88);
	 background-color: rgba(3, 146, 146, 0.89);
		background-color: rgba(3, 146, 146, 0.90);
		
		background-color: rgba(204, 153, 255, 0.90);
		
		background-color: rgba(4, 200, 200, 0.90);
		background-color: rgba(235, 237, 236, 0.90);
		
 
  top: 100%;
  /**/
  left: 0;
  right: 0;
  
  z-index: 99;

  padding: 8px 16px;
  
  border: 1px solid #cccccc;
 /* */
  /*
  max-height: 178px !important;
  */
  /*
  max-height: 286px !important;
  */
  /*
   max-height: 486px !important;
 */
  /*
   height: 286px;
   max-height: 286px !important;
  height: 286px;
  overflow-y: scroll;
  */
  overflow-y: scroll;
  /*
  border: 1px solid #ff00ff;
  */
  top: 0%;
  
}
/*hide the items when the select box is closed:*/
.select-hide1 {																							/*select-hide */			/*select-hide1 */
  display: none;
}
.select-items1 div:hover, .same-as-selected1 {															/*select-items*/	/*same-as-selected */ /*select-items1 */   /*same-as-selected1 */
  background-color: rgba(0, 0, 0, 0.1);
}


/*
	Source: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select
			https://www.w3schools.com/howto/howto_custom_select.asp
			
	Name: Create a Custom Select Menu


*/


/*
https://codepen.io/petrushonis/pen/wGdPrv
*/



.s-hidden {
    visibility:hidden;
    padding-right:10px;
}
.select {
    cursor:pointer;
    display:inline-block;
    position:relative;
    font:normal 11px/22px Arial, Sans-Serif;
    color:black;
    border:1px solid #ccc;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:white;
    padding:0 10px;
    font-weight:bold;
}
.styledSelect:after {
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:black transparent transparent transparent;
    position:absolute;
    top:9px;
    right:6px;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}
.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding:0 0;
    list-style:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
    padding:0 6px;
    margin:0 0;
    padding:0 10px;
}
.options li:hover {
    background-color:#39f;
    color:white;
}



.visual_editor_action_confirm_close_button_up{

	width:	        20px;
	height:	        20px;
	position:	    relative;
	float:          left;
	outline: 	    none;
	border:		    0px solid #ff00ff;
	display:	    block;
	margin-top:		0px;
	margin-right:	0px;
	margin-bottom:	0px;
	margin-left:	0px;
	
	background:	url(images/visual_editor/Close_Button.png) no-repeat;
	/**/
	
}
/**/




/*
	Source: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select
			https://www.w3schools.com/howto/howto_custom_select.asp
			
	Name: Create a Custom Select Menu


*/



/* Style 1 */
#style-1::-webkit-scrollbar-track {
  background-color: transparent;
}
#style-1::-webkit-scrollbar {
  width: 20px;
}
#style-1::-webkit-scrollbar-thumb {
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(0, 44, 138, 1) 50%,
    rgba(47, 189, 236, 1) 100%
  );
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
#style-1::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* Style 1 */
.style-1::-webkit-scrollbar-track {
  background-color: transparent;
}
.style-1::-webkit-scrollbar {
  width: 20px;
}
.style-1::-webkit-scrollbar-thumb {
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(0, 44, 138, 1) 50%,
    rgba(47, 189, 236, 1) 100%
  );
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
.style-1::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}



/* Style 2 */
#style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
#style-2::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}
#style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #ff8575;
}

/* Style 2 */
.style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
.style-2::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}
.style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #ff8575;
}



/* Style 3 */
#style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  background-color: #cccccc;
}
#style-3::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
#style-3::-webkit-scrollbar-thumb {
  background-color: #fff;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 25%,
    transparent 100%,
    rgba(0, 0, 0, 1) 75%,
    transparent
  );
}

/* Style 3 */
.style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  background-color: #cccccc;
}
.style-3::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
.style-3::-webkit-scrollbar-thumb {
  background-color: #fff;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 25%,
    transparent 100%,
    rgba(0, 0, 0, 1) 75%,
    transparent
  );
}



/* Style 4 */
#style-4::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}
#style-4::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
#style-4::-webkit-scrollbar-thumb {
  background-color: #00a6fb;
  border: 2px solid #00527a;
}



/* Style 4 */
.style-4::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}
.style-4::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
.style-4::-webkit-scrollbar-thumb {
  background-color: #00a6fb;
  border: 2px solid #00527a;
}




/* Style 5 */
#style-5::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}
#style-5::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}
#style-5::-webkit-scrollbar-thumb {
  background-color: #00a6fb;
}

/* Style 5 */
.style-5::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}
.style-5::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}
.style-5::-webkit-scrollbar-thumb {
  background-color: #00a6fb;
}


/* Style 6 */
#style-6::-webkit-scrollbar-track {
  background-color: #efeeee;
}
#style-6::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
#style-6::-webkit-scrollbar-thumb {
  background-color: #029887;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}


/* Style 6 */
.style-6::-webkit-scrollbar-track {
  background-color: #efeeee;
}
.style-6::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
.style-6::-webkit-scrollbar-thumb {
  background-color: #029887;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}


/* Style 7 */
#style-7::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}
#style-7::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
#style-7::-webkit-scrollbar-thumb {
  background-color: #eecc32;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    transparent 75%,
    transparent
  );
}

  );
}

/* Style 7 */
.style-7::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}
.style-7::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
.style-7::-webkit-scrollbar-thumb {
  background-color: #eecc32;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    transparent 75%,
    transparent
  );
}



/* Style 8 */
#style-8::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: #cccccc;
}
#style-8::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}
#style-8::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #a004b5;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent
  );
}


/* Style 8 */
.style-8::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: #cccccc;
}
.style-8::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}
.style-8::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #a004b5;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent
  );
}



/* Style 9 */
#style-9::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  border-radius: 5px;
  background-color: #cccccc;
}
#style-9::-webkit-scrollbar {
  width: 12px;
  width: 10px;
  width: 4px;
  background-color: #f5f5f5;
  background-color: #00ff00;
}
#style-9::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border-radius: 5px;
  background-color: #a004b5;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent
  );
}



/* Style 9 */
.style-9::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  border-radius: 5px;
  background-color: #cccccc;
}
.style-9::-webkit-scrollbar {
  width: 12px;
  width: 10px;
  width: 4px;
  background-color: #f5f5f5;
  background-color: #00ff00;
}
.style-9::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border-radius: 5px;
  background-color: #a004b5;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent
  );
}



/* For Firefox */
.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-demo-1 {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}
.scroll-demo-2 {
  scrollbar-color: #ac246f black;
  scrollbar-width: auto;
}
.scroll-demo-3 {
  scrollbar-color: #00527a transparent;
  scrollbar-width: thin;
}
.scroll-demo-4 {
  scrollbar-color: orange lightyellow;
  scrollbar-width: auto;
}

.scroll-demo-9 {
 
  scrollbar-color: #afbdcf transparent;
  scrollbar-color: #404040 transparent;
  scrollbar-color: #f2f2f2 transparent;
  scrollbar-color: #ffffff transparent;
  scrollbar-width: thin;
  /*	*/
}




.scroll-demo-10 {
  overflow:   scroll;
}

.scroll-demo-10::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.disable-scrollbars::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}
    
.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}