:root {
	--blue: #0078ff;
	--red: #ed1b24;
}

.hidden
{
	display: none;
}

.abs-vcenter
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.abs-hcenter
{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.abs-center
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.jquery-ui-blue-button
{
	background: var(--blue)!important;
	border-radius: 8px!important;
	color: #fff!important;
	transition: 0.4s ease all!important;
	text-align: center!important;
	border: 2px solid var(--blue)!important;
}

.jquery-ui-red-button
{
	background: var(--red)!important;
	border-radius: 8px!important;
	color: #fff!important;
	transition: 0.4s ease all!important;
	text-align: center!important;
	border: 2px solid darkred!important;
}

.ui-dialog-titlebar {
	background-color: var(--red)!important;
	background-image: none!important;
}

.inc-btn
{

}

.dec-btn
{

}

.inc-btn, .dec-btn
{
	background-color: var(--red);
	display: inline-block;
	width: 50px;
	text-align: center;
}

/* Tooltip container */
.tooltip {
	/*  position: relative;*/
	display: inline-block;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
}

.tooltip .tooltiptext {
	width: 300px;
	top: 100%;
	/*  left: 50%; */
	margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
	padding: 5px 10px 5px 10px;
	background-color: #424242;
}

.tooltip .tooltiptext::after {
	content: " ";
	position: absolute;
	bottom: 100%;  /* At the top of the tooltip */
	/*  left: 50%;*/
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent black transparent;
}

#register .register-page
{
	position: relative;
}

#register .form
{
	position: relative!important;
}

.my-blue-button
{
	border-radius: 10px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	padding: 3px 20px 3px 20px;
	background-color: var(--blue);
	cursor: pointer;
}
.my-blue-button:hover
{
	border-color: white;
	border-width: 1px;
	border-style: solid;
	background-color: black;
}

.my-red-button
{
	border-radius: 10px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	padding: 3px 20px 3px 20px;
	background-color: var(--red);
	cursor: pointer;
}

.my-red-button:hover
{
	border-color: white;
	border-width: 1px;
	border-style: solid;
	background-color: black;
}

  /********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 15rem;
 }
 
 /* Removes default focus */
 input[type="range"]:focus {
   outline: none;
 }
 
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #fff;
    border-radius: 5px;
    height: 5px;  
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; 
    appearance: none;
    margin-top: -8px; 
    width: 20px;
    height: 20px;
    background: #dd3e3a;
    border-radius: 100%;
    border: 2px solid white;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4);
 }

 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #fff;
    border-radius: 5px;
    height: 5px;  
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
    border: none; 
    width: 20px;
    height: 20px;
    background: #dd3e3a;
    border-radius: 100%;
    border: 2px solid white;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4);
 }


.flexgrid4 {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
} 
.flexgrid4 .box-3 {
    width:100%;
}

#register .select-custom-type-2 .container .item:before {
    content: unset;
}

#register .select-custom-type-2 .container .item {
    width: 100%;
    font-size: 24px;
    line-height: 26px;
    padding: 0 15px;
}

.buttons_row {
    display: flex; 
    justify-content: center;
    margin-top:20px;
}

.buttons_row .box {
    text-align:center;
}
.buttons_row .box .btn {
    margin:0 5px;
}

.box-3 {
    width: 33%!important;
}

.vard{
	display:block;
	color:white;
	background-color:#000;
	text-align:left;
	direction:ltr;
}