* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	user-select: none;  
}

body, html {
	position: relative;
	height: 100%;
	width: 100%;
	font-size: 0.7292vw;
	overflow: hidden;
	color: white;
	scroll-behavior: smooth;
}

@font-face { 
    font-family: 'AgencyB';
    src: url('../font/agencyfb_bold.ttf');
  }
  @font-face { 
    font-family: 'AgencyR';
    src: url('../font/agencyfb_reg.ttf');
  }
  @font-face { 
    font-family: 'Atomic';
    src: url('../font/atomic.otf');
  }
  @font-face { 
    font-family: 'Black';
    src: url('../font/RevxNeueBlack.ttf');
  }
  @font-face { 
    font-family: 'Bold';
    src: url('../font/RevxNeueBold.ttf');
  }
  @font-face { 
    font-family: 'Medium';
    src: url('../font/RevxNeueMedium.ttf');
  }
  @font-face { 
    font-family: 'Regular';
    src: url('../font/RevxNeueRegular.ttf');
  }
  @font-face { 
    font-family: 'SemiBold';
    src: url('../font/RevxNeueSemiBold.ttf');
  }

  .clmn_loading_sec_main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.clmn_char_info_right {
    align-items: flex-end;
    
}
.rightSexText  {
    margin-left: auto;
}

  .generalSection {
    background-image: url('../images/bg_car.png');
    background-size: 100% 100%;
  }
  .flex {
    display: flex;
  }
  .alcn {
    display: flex;
    align-items: center;
  }
  .clmn {
    display: flex;
    flex-direction: column;
  }
  .jlcn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon_hd {
	margin-top: -0.3646vw;
	margin-left: -0.3646vw;
	width: 2.8125vw;
	height: 2.8125vw;
	background-image: url('../images/tringle.png');
	background-size: 100% 100%;
	filter: drop-shadow(0 0.208vw 0.898vw rgba(255, 121, 43, 0.95));
}
.icon_hd svg {
	width: 0.8854vw;
	height: 0.8854vw;
}
.left_block {
	gap: 0.0521vw;
}
.flex_hd span:first-child {
	font-size: 2.2917vw;
	font-family: 'AgencyB';
	letter-spacing: -0.03em;
	text-shadow: 0 0 2.135vw rgba(255, 255, 255, 0.25);
}
.flex_hd span:last-child {
	margin-left: -0.7583vw;
	width: 4.2708vw;
	height: 2.6563vw;
	margin-top: 0.1vw;
	background-image: url('../images/city_text.png');
	background-size: 100% 100%;
	filter: drop-shadow(0 0 0.835vw rgba(255, 121, 43, 0.85));
}
.name_ui {
	margin-top: 0.1563vw;
	font-size: 1.0313vw;
	font-family: 'AgencyR';
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}
.flex_hd {
	height: 1.9479vw;
}
.info_block {
	gap: 0.3125vw;
	width: 18.3958vw;
	margin-top: 0.5208vw;
}
.info_block svg {
	width: 0.8333vw;
	height: 0.8333vw;
	flex-shrink: 0;
}
.info_block span {
	font-size: 0.7292vw;
	font-family: 'Regular';
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.65);
}
.charList {
    margin-top: 1.667vw;
}
  
  
  
  
  


.slotRedeemSection {
    display: none;
    z-index: 9879;
    position: absolute;
    height: 100%;
    width: 100%;
    background:  rgba(20, 13, 7, 0.65);
}
.loadingSection {
    background:  rgba(20, 13, 7, 0.65);
    z-index: 9879;
}
.slotRedeemMain .left_block {}


.redeemInput {
    transition: all 0.3s ease;
	height: 1.9792vw;
	border: 0.052vw solid rgba(255, 255, 255, 0.15);
	border-radius: 0.104vw;
	width: 15vw;
	text-align: center;
	background: none;
	font-size: 0.7813vw;
	padding-top: 0.2vw;
	font-family: 'Regular';
	padding-left: 0.625vw;
	padding-right: 0.625vw;
	color: white;
	outline: none;
}
.redeemInput::placeholder {
	transition: all 0.3s ease;
	color: rgba(255, 255, 255, 0.75);
}
.redeemInput:focus::placeholder {
	color: rgba(255, 255, 255, 0);
}
.redeemInput:hover {
	background: rgba(255, 255, 255, 0.05);
}
.redeemInput:focus {
	background: rgba(255, 121, 43, 0.05);
	border: 0.052vw solid rgba(255, 121, 43, 0.35);
}
.row_pop span:first-child {
	font-size: 0.729vw;
	font-family: 'SemiBold';
	text-shadow: 0 0 2.135vw rgba(255, 255, 255, 0.25);
}
.row_pop span:last-child {
	font-size: 0.7292vw;
	font-family: 'Regular';
	color: rgba(255, 255, 255, 0.65);
	margin-top: -0.1042vw;
}
.row_pop {
    margin-top: 0.625vw;
    margin-bottom: 0.625vw;
}
.redeemButtonArea {
    display: flex;
    width: 15vw;
}

.redeemButton {
    transition: all 0.3s ease;
	cursor: pointer;
	gap: 0.237vw;
	height: 1.9792vw;
	border-radius: 0.0963vw;
	box-shadow: 0 0.469vw 1.406vw rgba(255, 121, 43, 0.25);
	background: #ff6e2b;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.redeemButton:hover {
	transform: translateY(0.1vw);
	box-shadow: 0 0.469vw 1.406vw rgba(255, 121, 43, 0.35);
}
.redeemButton:active {
	opacity: 0.75;
}
.redeemButton {
	font-size: 0.7813vw;
	font-family: 'SemiBold';
	letter-spacing: -0.02em;
}
.redeemButton:hover {
	color: rgba(0, 0, 0, 0.75);
}
.redeemButton:hover svg path {
	fill: black;
	fill-opacity: 0.75;
}
.redeemButtonArea {
    gap: 0.625vw;
    margin-top: 0.625vw;
}

@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

.noval_bar {
    width: 3.5417vw;
    height: 3.5417vw;
    border-radius: 100%;
    background-image: url('../images/noval_circ.png');
    background-size: 100% 100%;
    margin-bottom: 1.6667vw;
    animation: spin 1s linear infinite;
}
.val_bar {
    width: 3.5417vw;
    height: 3.5417vw;
    border-radius: 100%;
    background-image: url('../images/val.png');
    background-size: 100% 100%;
}

.load_text_main {
    font-size: 2.5917vw;
    font-family: 'AgencyB';
    background: radial-gradient(116.67% 116.67% at 37.02%  50.00%, rgb(255, 121, 43) 0%, rgb(153, 26, 26) 100%);
    background-clip: text;
    letter-spacing: -0.02em;
    text-shadow: 0 0 1.667vw rgba(255, 121, 43, 0.45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.loadingSection {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.slotRedeemMain {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}
.generalSection {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.6667vw;
    padding-right: 1.6667vw;
}

.charCreateRight {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}
.charCreateRight .info_block {
    width: 12.1875vw;
    flex-direction: row-reverse;
    text-align: right;
}
.creatorRightItemArea {
    margin-top: 1.6667vw;
}

.agreeDeleteSection {
    display: none;
    position: absolute;
    z-index: 987777;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.53);
}
.charList {
    display: flex;
    flex-direction: column;
}

.charInfoRight {
    position: relative;
}

.rightSexText {

}
.charInfoRight {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}
.rightSexText {
    height: 1.4583vw;
    border-radius: 0.104vw;
    padding: 0.208vw 0.365vw;
    box-shadow: 0 0.26vw 0.99vw rgba(255, 121, 43, 0.25);
    background: #ff6e2b;
    font-size: 0.8333vw;
    font-family: 'SemiBold';
    color: rgba(0, 0, 0, 0.75);
    letter-spacing: -0.02em;
}
.rightCharName {
    font-size: 2.2917vw;
    font-family: 'AgencyB';
    letter-spacing: -0.02em;
    text-shadow: 0 0 2.5vw rgba(255, 255, 255, 0.25);
}
.rightItemLeftArea {
    display: flex;
    flex-direction: column;
    gap: 0.5729vw;
    align-items: flex-end;
}
.rightInfoItem {
    width: 12.1875vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0.052vw solid rgba(255, 255, 255, 0.15);
    border-radius: 0.104vw;
    padding: 0.313vw 0.469vw;
    background: rgba(255, 255, 255, 0.05);
    text-align: right;
}
.rightItemArea {
    margin-top: 1.25vw;
}
.rightInfoText {
    font-size: 0.7813vw;
    font-family: 'Medium';
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: -0.02em;
}
.rightInfo {
    font-size: 0.7813vw;
    font-family: 'Bold';
    margin-top: -0.1vw;
    letter-spacing: -0.02em;
}

.charItem {
    position: relative;
    width: 19.1667vw;
    height: 2.3438vw;
    border-radius: 0.104vw;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 0.052vw solid rgba(255, 255, 255, 0.05);
}
.charItemSexArea {
    position: absolute;
    right: 3.9063vw;
    top: -0.3646vw;
    height: 1.3021vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.104vw;
    padding: 0.208vw 0.365vw;
    box-shadow: 0 0.26vw 0.99vw rgba(255, 121, 43, 0.25);
    background: #ff6e2b;
    font-size: 0.7292vw;
    font-family: 'SemiBold';
    color: rgba(0, 0, 0, 0.75);
    letter-spacing: -0.05em;
}
.charItemAgeText {
    position: absolute;
    top: 0.3125vw;
    left: 0.6833vw;
}
.charItemNameArea {
    position: absolute;
    bottom: 0.2125vw;
    left: 0.6833vw;
}
.charItemArrowArea {
    position: absolute;
    right: 0.625vw;
}
.charItemArrowArea img {
    width: 0.8333vw;
    height: 0.8333vw;
}
.charItemNameArea span {
    font-size: 0.7813vw;
    font-family: 'Bold';
    letter-spacing: -0.02em;
}
.charItemAgeText span {
    font-size: 0.7813vw;
    font-family: 'Regular';
    color: rgba(255, 255, 255, 0.35);
}
.charCreateImgArea img {
    width: 0.8333vw;
    height: 0.8333vw;
}
.charItem {
    cursor: pointer;
    transition: all 0.3s ease;
    padding-left: 0.6833vw;
}
.charListRightArea {
    gap: 0.4167vw;
    display: flex;
    flex-direction: column;
}
.buttonItem, .rightButtonItem {
    margin-top: 1.25vw;
    transition: all 0.3s ease;
    width: 19.1667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.9792vw;
    gap: 0.1563vw;
    font-family: 'SemiBold';
    cursor: pointer;
    border-radius: 0.1042vw;
    box-shadow: 0 0.469vw 1.406vw rgba(255, 121, 43, 0.25);
    background: #ff6e2b;
}
.buttonItem:hover, .rightButtonItem:hover {
    transform: translateY(0.1vw);
    box-shadow: 0 0.469vw 1.406vw rgba(255, 121, 43, 0.5);
}
.buttonItem svg, .rightButtonItem svg {
    width: 0.8854vw;
    height: 0.8854vw;
}
.buttonItem:active, .rightButtonItem:active {
    opacity: 0.75;
}
.rightButtonItem {
    width: 12.1875vw;
}
.creatorItemLeftArea {
    gap: 0.625vw;
    display: flex;
    flex-direction: column;
}
.creatorItemLeftArea .rightButtonItem {
    margin-top: 0.625vw;
}
.create, .locked {
    gap: 0.3646vw;
    font-size: 0.7813vw;
    font-family: 'Medium';
    color: rgba(255, 255, 255, 0.75);
}

.charItem.create {
    background: rgba(255, 255, 255, 0.05);
    border: 0.052vw solid rgba(255, 255, 255, 0.05);
}

.charItem.locked {
    background: rgba(255, 168, 97, 0.15);
    border: 0.052vw solid rgba(255, 168, 97, 0.15);
}

.charItem:hover {
    background: rgba(255, 255, 255, 0.09);
}

.charItem.active {
    background: rgba(255, 121, 43, 0.15);
    border: 0.052vw solid rgba(255, 121, 43, 0.25);
}
.sexButton {
    transition: all 0.3s ease;
    cursor: pointer;
    width: 5.8333vw;
    height: 2.3438vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2083vw;
    font-size: 0.7813vw;
    font-family: 'Medium';
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 0.052vw solid rgba(255, 255, 255, 0.15);
    border-radius: 0.104vw;
}
.sexButton:hover {
    background: rgba(255, 255, 255, 0.08);
}
.sexButton.active {
    border: 0.052vw solid rgba(255, 121, 43, 0.75);
    background: rgba(255, 121, 43, 0.15);
    color: white;
}
.sexButton.active i {
    color: #ff6e2b;
}
.sexButton:active {
    opacity: 0.65;
}
.sexArea {
    display: flex;
    gap: 0.625vw;
}
.firstNameArea, .lastNameArea, .dateOfBirthArea, .heightArea {
    position: relative;
    width: 12.1875vw;
    height: 2.3438vw;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 0.052vw solid rgba(255, 255, 255, 0.15);
}
.inputTitle, .rightSolidText {
    position: absolute;
    font-size: 0.7813vw;
    font-family: 'Regular';
    left: 0.4688vw;
    top: 0.2925vw;
    color: rgba(255, 255, 255, 0.65);
}
.inputDesc {
    position: absolute;
    right: 0.4688vw;;
    top: 0.4125vw;
    font-size: 0.625vw;
    font-family: 'Regular';
    color: rgba(255, 255, 255, 0.35);
}
.customInput, #datepicker, #heightInput {
    transition: all 0.3s ease;
    color: white;
    height: 0.8854vw;
    position: absolute;
    bottom: 0.2125vw;
    width: 11.1979vw;
    left: 0.4688vw;
    font-size: 0.7813vw;
    font-family: 'Medium';
    background: none;
    outline: none;
    border: none;
}
#heightInput::placeholder {
    color: white;
}
.customInputLL {

}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}