/** SCROLLBAR FOR HTML BODY **/

/***************************************************************************************************************************/

/* SMALLER TABLET screens -----------*/   /*--- SMALLER TABLET ---*/
@media screen and (max-width: 480px) {
  	::-webkit-scrollbar {
    		width: 10px    
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
  	::-webkit-scrollbar {
    		width: 10px; 
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/
  	::-webkit-scrollbar {
    		width: 10px;  
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/
  	::-webkit-scrollbar {
    		width: 11px; 
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 690px) and (max-width : 769px) {/*--- Tablet portrait ---*/
  	::-webkit-scrollbar {
    		width: 12px;   
  		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture) --- SMALLER TABLET ---*/
@media only screen and (min-width : 769px) and (max-width : 800px) {/*--- Small tablet landscape ---*/
	::-webkit-scrollbar {
    		width: 13px;   
  		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture --- SMALLER TABLET ---*/
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/
  	::-webkit-scrollbar {
    		width: 14px;   
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape ---*/
  	::-webkit-scrollbar {
    		width: 16px; 
  		}
	}





/*********************************************************************************************************/
/* Desktops and laptops ----------- */  /*--- SMALL DESKTOP ---*/
@media only screen 
and (min-width : 1224px) {
  	::-webkit-scrollbar {
    		width: 18px;  
		} 
	}
/*********************************************************************************************************/




 
::-webkit-scrollbar-track {
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    	border-radius: 10px; 
	}
 
::-webkit-scrollbar-thumb {
    	border-radius: 20px;       /* roundness of the scroll thumb */ 
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  	background: #3cb0fd; 
  	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);   
	border: 3px solid #F7F7F7;  /* creates padding around scroll thumb */ 
	}

::-webkit-scrollbar-thumb:hover {
    	background: #7D7E94; 
	}
 
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
    	background-color: #D9E8F0; 
    	border: 1px solid #267DA8; 
}
 
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
    	background-color: #D9E8F0; 
    	border: 1px solid #267DA8;
}
 
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
    	border: 1px solid #FFFFCC;
	background-color: #FFFFBF; background: #FFD950; 
}
 
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
    	border: 1px solid #FFFFCC;
	background: #FFD950;
}
/*********************************************************************/






/*************SCROLLBAR FOR PRODUCT DETAILS FROM MY CART****FOR .o-card_paragraph ******************************************/
.o-card_paragraph::-webkit-scrollbar {
    	width: 12px;
	}
 
.o-card_paragraph::-webkit-scrollbar-track {
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    	border-radius: 10px;
	}
 
.o-card_paragraph::-webkit-scrollbar-thumb {
    	border-radius: 20px;       /* roundness of the scroll thumb */ 
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  	background: #3cb0fd; 
  	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);   
	border: 3px solid #F7F7F7;  /* creates padding around scroll thumb */ 
	}

.o-card_paragraph::-webkit-scrollbar-thumb:hover {
    	background: #7D7E94; 
	}
 
/* Place The scroll down button at the bottom */
.o-card_paragraph::-webkit-scrollbar-button:vertical:increment {
    	background-color: #D9E8F0; 
    	border: 1px solid #267DA8; 
}
 
/* Place The scroll up button at the up */
.o-card_paragraph::-webkit-scrollbar-button:vertical:decrement {
    	background-color: #D9E8F0; 
    	border: 1px solid #267DA8;
}
 
/* Top area above thumb and below up button */
.o-card_paragraph::-webkit-scrollbar-track-piece:vertical:start {
    	border: 1px solid #FFFFCC;
	background: #FFD950; 
}
 
/* Bottom area below thumb and down button */
.o-card_paragraph::-webkit-scrollbar-track-piece:vertical:end {
    	border: 1px solid #FFFFCC;
	background: #FFD950; 
}
/*********************************************************************/














/*************SCROLLBAR FOR VERTICAL NAVIGATION BAR****FOR .o-card_paragraph ******************************************/
.tooltip-content::-webkit-scrollbar {
    	width: 10px;
	}
 
.tooltip-content::-webkit-scrollbar-track {
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    	border-radius: 10px;
	}
 
.tooltip-content::-webkit-scrollbar-thumb {
    	border-radius: 20px;       /* roundness of the scroll thumb */ 
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  	background: #3cb0fd; 
  	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);   
	border: 3px solid #F7F7F7;  /* creates padding around scroll thumb */ 
	}

.tooltip-content::-webkit-scrollbar-thumb:hover {
    	background: #7D7E94; 
	}
 
/* Place The scroll down button at the bottom */
.tooltip-content::-webkit-scrollbar-button:vertical:increment {
    	background-color: #D9E8F0; 
    	border: 1px solid #267DA8; 
}
 
/* Place The scroll up button at the up */
.tooltip-content::-webkit-scrollbar-button:vertical:decrement {
    	background-color: #D9E8F0; 
    	border: 1px solid #267DA8;
}
 
/* Top area above thumb and below up button */
.tooltip-content::-webkit-scrollbar-track-piece:vertical:start {
    	border: 1px solid #FFFFCC;
	background: #FFD950; 
}
 
/* Bottom area below thumb and down button */
.tooltip-content::-webkit-scrollbar-track-piece:vertical:end {
    	border: 1px solid #FFFFCC;
	background: #FFD950; 
}
/*********************************************************************/