:root{
	--main-color: #676767;
	--main-text-color: #fff;
	--main-bg-color: #cfcfcf;
	--sub-color: #000;
	--sub-bg-color: #FBFBE5;
	--btn-hover-color: #ecc100;
}

#circle{ background: black; width: 50px; height: 50px; border-radius: 64px; border: 2px solid orange; }
#circle div { position:relative; left: 0px; top: 10px; width: 40px; height: 40px; color: white; text-align:center; }
	
.btnCommon {
	display: inline-block;
	vertical-align: top;
	padding: 12px 3px;
	text-align: center;
	width: 180px;
	min-width: 70px;
	border-radius: 5px;
	/* begin update 20230302 style change k.o */
	/* background: #079e07;
	color: #fff !important;
	border: 1px solid #079e07; */
	background: var(--main-color);
	color: var(--main-text-color) !important;
	border: 1px solid var(--main-color);
	/* end update 20230302 style change k.o */
	/*text-transform: uppercase;*/
	text-decoration:none !important;
	box-sizing: border-box;
	font-size: 0.9em !important;
	font-weight: 900;
	line-height: 10px;
	cursor: pointer !important;
	text-shadow : none !important
}
.btnCommon:hover {
	/* background: #09d309 !important;  */
	background: var(--btn-hover-color) !important; 
	color: #000 !important;
	text-decoration:none !important;
}
.btnCommon:click {
	/* background: #09d309 !important;  */
	background: var(--btn-hover-color) !important; 
	color: #000;
	text-decoration:none !important;
}
.btnCommon:visited {  
	color: #000;
	text-decoration:none !important;
}


.box-icon {
	/*border-radius: 0.25rem;*/
	border: none !important;
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	font-size: 1.875rem;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	width: 65px;
	background-color: transparent;
	color: #FCB807 !important;
	box-shadow: none !important;

}

.box-icon > img {
	max-width: 100%;
}

.myspecial:before {
    content: "" !important;
}

.bg-menu-theme .menu-sub>.menu-item>.menu-link:before{
   content: none !important;
}

.btn-small-text {
	font-size: 0.85em !important;
	border: 1px solid #20034c !important;
}
.body-main {
  /* begin update 20230302 style change k.o */
	/* background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("https://dashboard.ultimopay.io/assets/img/misc/spacebg02.jpg"); */
	background: var(--main-bg-color);
	background-position: center center !important;
    background-repeat: no-repeat  !important;
	background-size: cover !important;
}

#cardbox-bg {
	/*background-image: url('../img/misc/ultimopay-card04.png');*/
	/*background-size: 300px;*/
	/*background-repeat: no-repeat;*/
}


/*
* custom input
*/
.my-input {
  display: block !important;
  width: 100% !important;
  /*height: calc(2.25rem + 2px) !important;*/
  /*padding: 0.375rem 0.75rem !important;*/
  /*font-size: 1rem  !important;*/
  /*font-weight: 400 !important;*/
  line-height: 1.5 !important;
  color: #B6B5B3  !important;
  /*background-color: transparent  !important;*/
  /*background-clip: padding-box  !important;*/
  /*border: 1px solid #ced4da;*/
  /*border-radius: 0.25rem;*/
  /*border: none !important;*/
  /*border-bottom: 0.5px solid #fff  !important;*/
  /*box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);*/
 /* transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
 
  
  height: calc(2.25rem + 2px);
  /*border: none;*/
  outline: none;
  padding: 5px 15px;
  /*background:linear-gradient(315deg,#e91e63,#5d02ff) ;*/
  background: rgba(0, 0, 0, 0.3);
  color: #B6B5B3;
  font-size: 0.9em !important;
  font-weight: 300 !important;
  border-radius: 5px;
  border: 1px solid #FDAA1B;
 
}

.my-input-error {
	border: 1px solid red !important;
}

.input-ex {
	background: rgba(0, 0, 0, 0.55) !important;
}



@media (prefers-reduced-motion: reduce) {
  .my-input {
    transition: none;
  }
}

.my-input::-ms-expand {
  background-color: transparent;
  border: 0;
}

.my-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
  /*background-color: transparent;*/
}

.my-input:focus {
  color: #fff;
  /*/background-color: transparent;*/
  /*border-color: #80bdff;*/
  /*border: 3px solid #fdae19;*/
  border: 1px solid #FDAA1B !important;
  outline: 0;
  /*box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), none;*/
}

.my-input::-webkit-input-placeholder {
  color: #878685 !important;
  opacity: 1;
}

.my-input::-moz-placeholder {
  color: #878685 !important;
  opacity: 1;
}

.my-input:-ms-input-placeholder {
  color: #878685 !important;
  opacity: 1;
}

.my-input::-ms-input-placeholder {
  color: #878685 !important;
  opacity: 1;
}

.my-input::placeholder {
  color: #878685 !important;
  opacity: 1;
}

.my-input:disabled, .form-control[readonly] {
  /*background-color: #e9ecef;*/
  opacity: 1;
}

select.my-input:focus::-ms-value {
  color: #495057;
  background-color: #ffffff;
}

/*
* custom select box
*/
.myform select
{
	::-webkit-scrollbar {
		width: 20px !important;
	}
	position: relative !important;
	width: 100% !important;
	height: 40px !important;

	outline: none !important;

	padding: 0.5em 3.5em 0.5em 1em !important;

	/* update 20230302 style change k.o */
	/* background: rgba(0, 0, 0, 0.3); */
	/* color: #fff !important; */
	color: var(--main-text-color) !important;
	font-size: 0.85em !important;
	font-weight: 300 !important;
	border-radius: 5px !important;
	/* update 20230302 style change k.o */
	/* border: 1px solid green !important; */
	border: 1px solid var(--main-color) !important;

}

.myform select option
{  
	/* update 20230302 style change k.o */
	/* background: rgba(0, 0, 0, 0.9);
	color: #fff; */
	background: rgba(0, 0, 0, 1) !important;
	color: var(--main-text-color) !important;
}

.myform select { 
    ::-webkit-scrollbar {
		width: 20px !important;
	}
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	-ms-appearance: none !important;
	appearance: none !important;
	outline: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
	border: none !important;
	/*background-color: rgba(255,255,255,0.99) !important;*/
	background: rgba(0, 0, 0, 0.3) !important;
	/*background: #fff !important;*/
	background-image: none !important;
	/*color: #000 !important;*/
	width: 100% !important;

	/*font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;*/
	/*font-family: 'Titillium Web', sans-serif !important;*/
	font-size: 1.0rem !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;

}
/* Remove IE arrow */
.myform select::-ms-expand {
	display: none !important;
}
/* Custom Select */
.select {
	::-webkit-scrollbar {
		width: 20px !important;
	}
	position: relative !important;
	display: flex !important;
	/*width: 20em !important;*/
	height: 2.8em !important;
	line-height: 3 !important;
	/*background: #E9942E !important;*/
	/*background-color: rgba(255,255,255,0.99) !important;*/
	overflow: hidden !important;
	/*border-radius: .25em !important;*/
	width: 100% !important;
	/*border: 1px solid #fff !important;*/
	/* update 20230302 style change k.o */
	/* background: rgba(0, 0, 0, 0.9);
	color: #fff; */
	color: var(--main-text-color);
	font-size: 0.9em !important;
	font-weight: 300 !important;
	border-radius: 5px !important;
	/* update 20230302 style change k.o */
	/* border: 1px solid green !important; */
	border: 1px solid #FDAA1B !important;
  
}
.select_error{
	border: 1px solid red !important;
}
.myform select {
	flex: 1 !important;
	padding: 0 .5em !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	/*color: #000 !important;*/
	/*color: #000 !important;*/
	cursor: pointer !important;
	/* update 20230302 style change k.o */
	/* color: #fff !important; */
	color: var(--main-text-color);
}

/* Arrow */
.select::after {
	content: '\25BC' !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	padding: 0 1em !important;
	/* update 20230302 style change k.o */
	/* background: green !important; */
	background: #b2a998 !important;
	cursor: pointer !important;
	pointer-events: none !important;
	-webkit-transition: .25s all ease !important;
	-o-transition: .25s all ease !important;
	transition: .25s all ease !important;
}
/* Transition */
.select:hover::after {
	/*color: #8BE5FC !important;*/
}


/*
* customer checkbox
*/
.cb-container {
  display: block;
  position: relative;
  padding-left: -50px !important;
  margin-bottom: 22px;
  cursor: pointer;
  font-size: 1.0em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 1.5 !important;
  text-align: left !important;
  
}

/* Hide the browser's default checkbox */
.cb-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  text-align: left !important;  
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 5px;

  background: rgba(0, 0, 0, 0.3);
  
  border-radius: 6px;
  border: 1px solid #FDAA1B !important;
}

/* On mouse-over, add a grey background color */
.cb-container:hover input ~ .checkmark {
  /*background-color: #ccc;*/
}

/* When the checkbox is checked, add a blue background */
.cb-container input:checked ~ .checkmark {
  /*background-color: #D4A23F;*/
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cb-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.cb-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* update 20230302 style change k.o */
/* a.linkex:link, a.linkex:visited {color: white; text-decoration: underline; font-weight: 900;}
a.linkex:hover, a.linkex:active {color: white;}

a.linkex2:link, a.linkex2:visited {color: #20fd1b; text-decoration: none; font-weight: 900;} */
a.linkex:link, a.linkex:visited {color: var(--main-text-color); text-decoration: underline; font-weight: 900;}
a.linkex:hover, a.linkex:active {color: var(--main-text-color);}

a.linkex2:link, a.linkex2:visited {color: var(--main-text-color); text-decoration: none; font-weight: 900;}
a.linkex2:hover, a.linkex2:active {text-decoration: underline;}

/*
* my custom button
*/
.btncustom {
	/* color: #fff !important;
	border-color: #11b719 !important;
	background-color: #11b719 !important; */
	color: #fff!important;
	border-color: #083b01 !important;
	background-color: #138704 !important;
}

.btncustom:hover {
	
	/* color: var(--main-text-color) !important;
	border-color: var(--main-color) !important;
	background-color: var(--main-color) !important; */
	color: #000 !important;
	background-color: #adf1a4 !important;
}

.shadow-box {
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  /*box-shadow: 0px 0px 10px 0px var(--main-color);*/
}