.submit_data { margin-top: 20px; padding: 0px 10px; height: 38px; line-height: 38px; border-radius: 10px; font-size: 14px; background: #00A0E9; color: #fff; text-align: center; cursor: pointer; }

.home_info {   box-sizing: border-box; margin-top: 120px;z-index:999; }
.home_info .h_tip{background:linear-gradient(45deg, #FFE100,  #FFE100, #00A0E9);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientAnimation 2s ease infinite;font-size:70px;text-align:center;height:60px;line-height:60px;margin-top:30px;letter-spacing:5px;}
 
@keyframes gradientAnimation { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
.home_info .h_en { color:#FFE100; font-size:25px; opacity:0.6; letter-spacing:1px; text-align:center; margin-top:10px; }
 
@media (min-width: 100px) and (max-width: 768px) 
{
.home_info {   box-sizing: border-box; margin-top: 4rem; }
.home_info .h_tip{background:linear-gradient(45deg, #FFE100,  #FFE100, #00A0E9);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientAnimation 2s ease infinite;font-size:1.5rem;text-align:center;height:2.5rem;  line-height:3rem; }
.home_info .h_en { color:#FFE100; font-size:0.5rem; opacity:0.6; letter-spacing:6px; text-align:center; margin-top:0.5rem; }
}

/* 横屏平板设备 */
@media (min-width: 768px) and (max-width: 1024px)  {
.home_info {   box-sizing: border-box; margin-top: 80px; }
.home_info .h_tip{background:linear-gradient(45deg, #FFE100,  #FFE100, #00A0E9);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientAnimation 2s ease infinite;font-size:2.5rem;text-align:center;height:3rem;  line-height:3rem; }
.home_info .h_en { color:#FFE100; font-size:1rem; opacity:0.6; letter-spacing:6px; text-align:center; margin-top:0.5rem; }
}

.box_search{width:100%;height:auto;margin-top:20px;display:flex;justify-content:center;}
.box_search .search{display:flex; overflow:hidden; justify-content:space-between; width:32rem;height:3rem;border-radius:20px;background:#fff;opacity:0.7;border:2px solid #00A0E9;}
.box_search .search input{width:26rem;height:3rem;border:none;font-size:18px; background-color:transparent;text-align:center;}
.box_search .search .btn_search{width:6rem;height:3rem;cursor:pointer; line-height:3rem;font-size:20px; background:#00A0E9;color:#fff;text-align:center;}

.time1 { animation: flip 0.5s linear forwards; }
.time2 { animation: flip 0.8s linear forwards; }
.time3 { animation: flip 1s linear forwards; }
.time4 { animation: flip 3s linear forwards; }
@keyframes flip { 0% { background: #FFE100; color: #000; transform: rotateX(0deg); } 50% { background: #313131; color: #fff; transform: rotateX(180deg); } 100% { color: #fff; transform: rotateX(360deg); } }


.box_web_list {width:100%;  display: flex; justify-content: center;  margin-top: 30px; z-index: 999;  }
.box_web_list .web_list {   height: 100%; margin-left: 10px; }
.web_list .box_title { display: flex; justify-content: flex-start; white-space: nowrap; align-content: center; padding: 10px 0px; background-color: transparent; }
.web_list .box_title .img { width: 5px; height: 20px; border-radius: 5px; background: #00A0E9; margin-left: 5px; }
.web_list .box_title .title { color: #fff; font-size: 20px; line-height: 20px; margin-left: 10px; font-weight: 700; }
.web_list .sub_title { font-size: 20px; padding-top: 10px; text-align: center; color: #999; background: #16191e; }
.web_list .a_li { position: relative; perspective: 1000px; transform-style: preserve-3d; margin-top: 8px; padding: 0px 10px; font-family: 'Microsoft YaHei'; border-radius: 5px; white-space: nowrap; font-size: 14px; background: #000; overflow: hidden; box-shadow: 0 0 0 0 transparent; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; display:flex; justify-content:flex-start; align-items:center; }
.web_list .a_li img{width:20px;margin-right:6px;}
.web_list .a_li a { color: #999; text-decoration: none; display: block; padding: 8px  0px;  width: 100%;  height: 100%; backface-visibility: hidden; }
.web_list .a_li a:hover { color: #FFE100; }
.web_list .a_li:hover { background: #FFE100; box-shadow: 0 0 8px 5px #FFE100; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.web_list .a_li:hover a { color: #000; font-weight: 700; text-decoration: none; text-align: center; }
.web_list .a_li:hover::before { -webkit-animation: sh02 0.5s 0s linear; -moz-animation: sh02 0.5s 0s linear; animation: sh02 0.5s 0s linear; }
.web_list .a_li::before { content: ''; display: block; width: 0px; height: 86%; position: absolute; top: 7%; left: 0%; opacity: 0; background: #fff; box-shadow: 0 0 50px 30px #fff; -webkit-transform: skewX(-20deg); -moz-transform: skewX(-20deg); -ms-transform: skewX(-20deg); -o-transform: skewX(-20deg); transform: skewX(-20deg); }
.flip-container { width: 100%; height: 32px; margin: 1px 0px; border-radius: 5px; overflow: hidden; }
.front a:hover { background: #FFE100; box-shadow: 0 0 8px 5px #FFE100; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: #000; transition: box-shadow 0.3s ease; box-shadow: 0 0 20px 10px rgba(250, 250, 250, 0.9); }
.flipper { perspective: 1000px; transform-style: preserve-3d; position: relative; width: 100%; height: 100%; }
.front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }
.front { background-color: #000; color: white; display: flex; justify-content: center; align-items: center; font-size: 14px; }
.front a { display: block; width: 100%; height: 32px; line-height: 32px; padding-left: 15px; text-decoration: none; box-sizing: border-box; color: #999; }
.back { background-color: #00A0E9; color: white; display: flex; justify-content: center; align-items: center; font-size: 14px; transform: rotateX(180deg); }
@keyframes sh02 { from { opacity: 0; left: 0%; } 50% { opacity: 1; } to { opacity: 0; left: 100%; } }
.web_list .a_li:active { box-shadow: 0 0 0 0 transparent; -webkit-transition: box-shadow 0.2s ease-in; -moz-transition: box-shadow 0.2s ease-in; transition: box-shadow 0.2s ease-in; }

@media (min-width: 100px) and (max-width: 768px) {
.box_web_list {position:fixed; left:0px;right:0px;top:0px; top:100px;bottom:100px;   overflow-y:auto; overflow-x:hidden; display: flex;justify-content:flex-start;  flex-direction: column;margin-top: 1rem; z-index: 999; }
.box_web_list .web_list {display: flex;  flex-direction: row; flex-wrap: wrap; width:100%; height: 100%;  box-sizing:border-box; }
.web_list .box_title {width:100%; display: flex; justify-content: flex-start; white-space: nowrap; align-content: center; padding: 10px 0px; background-color: transparent; }
.web_list .box_title .img { width: 0.2rem; height: 1rem; border-radius: 0.1rem; background: #00A0E9; margin-left: 0.3rem; }
.web_list .box_title .title { color: #fff; font-size: 1rem; line-height: 1rem; margin-left: 0.8rem; font-weight: 700; }
.web_list .sub_title { font-size: 1rem; padding-top: 0.5rem; text-align: center; color: #999; background: #16191e; }
.web_list .a_li { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin: 0.3rem 0.3rem 0rem 0rem; padding: 0.5rem; font-family: 'Microsoft YaHei'; border-radius: 1rem; white-space: nowrap; font-size: 0.8rem; background: #000; overflow: hidden; box-shadow: 0 0 0 0 transparent; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.web_list .a_li img { width: 1rem; height: auto; display: block; margin:0rem;padding:0rem;}    
.web_list .a_li a { color: #999; text-decoration: none; display: block; padding: 0.5rem 0rem;  backface-visibility: hidden; }
}
/* 竖屏平板设备 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
 
    /* 这里添加竖屏平板设备的样式 */
.box_web_list .web_list { height: 100%; margin-left: 10px;  overflow:hidden; }
.web_list .box_title { display: flex; justify-content: flex-start; white-space: nowrap; align-content: center; padding: 10px 0px; background-color: transparent; }
.web_list .box_title .img { width: 5px; height: 20px; border-radius: 5px; background: #00A0E9; margin-left: 5px; }
.web_list .box_title .title { color: #fff; font-size: 20px; line-height: 20px; margin-left: 10px; font-weight: 700; }
.web_list .sub_title { font-size: 20px; padding-top: 10px; text-align: center; color: #999; background: #16191e; }
.web_list .a_li { position: relative; perspective: 1000px; transform-style: preserve-3d; margin-top: 8px; padding: 0px 10px; font-family: 'Microsoft YaHei'; border-radius: 5px; white-space: nowrap; font-size: 14px; background: #000; overflow: hidden; box-shadow: 0 0 0 0 transparent; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; display:flex; justify-content:flex-start; align-items:center; }
.web_list .a_li a { color: #999; text-decoration: none; display: block; padding: 8px 0px; width: 100%; height: 100%; backface-visibility: hidden; }

}

/* 横屏平板设备 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* 这里添加横屏平板设备的样式 */
.box_web_list .web_list { height: 100%; margin-left: 10px;   overflow:hidden; }
.web_list .box_title { display: flex; justify-content: flex-start; white-space: nowrap; align-content: center; padding: 10px 0px; background-color: transparent; }
.web_list .box_title .img { width: 5px; height: 20px; border-radius: 5px; background: #00A0E9; margin-left: 5px; }
.web_list .box_title .title { color: #fff; font-size: 20px; line-height: 20px; margin-left: 10px; font-weight: 700; }
.web_list .sub_title { font-size: 20px; padding-top: 10px; text-align: center; color: #999; background: #16191e; }
.web_list .a_li { position: relative; perspective: 1000px; transform-style: preserve-3d; margin-top: 8px; padding: 0px 10px; font-family: 'Microsoft YaHei'; border-radius: 5px; white-space: nowrap; font-size: 14px; background: #000; overflow: hidden; box-shadow: 0 0 0 0 transparent; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; display:flex; justify-content:flex-start; align-items:center; }
.web_list .a_li a { color: #999; text-decoration: none; display: block; padding: 8px 0px; width: 100%; height: 100%; backface-visibility: hidden; }

}
.ml10 { margin-left: 10px; }
.mr10 { margin-right: 10px; }
.w { font-weight: 700; }
.blank { height: 20px; overflow: hidden; }
.box_form { padding: 20px; border-radius: 20px; width: 100%; box-sizing: border-box; }
.box_form .box_input { position: fixed; display: flex; justify-content: flex-start; justify-items: center; flex-direction: row; margin-top: 15px; width: 600px; }
.box_form .box_input .l_words { font-size: 14px; color: #fff; line-height: 32px; width: 70px; text-align: right; }
.box_form .box_input .r_box { justify-content: flex-end; width: 480px; overflow: hidden; }
.box_form .box_input .r_box input { height: 32px; width: 98%; margin-left: 10px; background-color: transparent; box-sizing: border-box; padding: 0px 10px 0 10px; border-left: 0px; border-top: 0px; border-right: 0px; color: #999; border-bottom: 1px solid #d2d2d2; }
.box_form .box_submit { margin-top: 15px; width: 100%; display: flex; justify-content: flex-start; align-items: center; }
.box_form .box_submit .button { align-items: center; width: 120px; height: 32px; border-radius: 10px; margin-right: 20px; line-height: 32px; border: 1px solid #00A0E9; color: #00A0E9; text-align: center; }
.box_form .script_title { display: flex; justify-content: space-between; padding: 8px 15px; background: #fafafa; color: #000; cursor: pointer; border-bottom: 1px solid #ccc; }
.box_form .json_data { padding: 8px 15px; }
.box_form .script_title div:nth-child(1) { font-size: 22px; }
.box_form .script_title .btns { display: flex; justify-content: flex-start; font-size: 14px; text-align: center; cursor: pointer; font-weight: 700; font-family: Arial; }
.box_form .script_title .btns div { cursor: pointer; font-size: 14px; }
.mt20 { margin-top: 20px; }
.hide { display: none; }
.box_data_list { width: 100%; }
.box_data_list .data_li { display: flex; justify-content: flex-start; margin-top: 10px; }
.tag { position: relative; float: left; cursor: pointer; padding: 0px 8px; line-height: 28px; margin-bottom: 8px; font-size: 12px; border-radius: 8px; background: #fff; border: 1px solid #00A0E9; color: #00A0E9; margin-right: 10px; }
.tag.cs { background: #00A0E9; color: #fff; }
.tag .del { position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; cursor: pointer; text-align: center; line-height: 16px; border-radius: 8px; background: #cc0000; color: #fff; }
.web_input { display: flex; justify-content: flex-start; margin-top: 10px; }
.web_input .txt_input { margin-right: 10px; border-radius: 5px; padding: 4px 5px; border: 1px solid #ccc; }
.web_input .btn_radio { cursor: pointer; padding-top: 4px; font-size: 12px; }
.web_input .btn_add { border-radius: 5px; margin-left: 10px; padding: 4px 8px; font-size: 12px; cursor: pointer; background: #000; color: #fff; text-align: center; }
.web_input .btn_sure_change { border-radius: 5px; margin-left: 10px; padding: 4px 8px; font-size: 12px; cursor: pointer; background: #000; color: #fff; text-align: center; }
 
.web_input .btn_cancel_change { border-radius: 5px; margin-left: 10px; padding: 4px 8px; font-size: 12px; cursor: pointer; background: #999; color: #fff; text-align: center; }

 
.box_add_type { position: fixed; right: 20px; bottom: 20px; display: flex; background: #000; border-radius: 8px; justify-content: flex-end; z-index: 999; padding: 8px; }
.box_add_type div:nth-child(1) { width: 220px; height: 32px; }
.box_add_type div:nth-child(1) input { width: 220px; height: 32px; padding: 0px 8px; box-sizing: border-box; border: 1px solid #fff; border-radius: 8px; }
.box_add_type div:nth-child(2) { display: flex; cursor: pointer; justify-content: flex-start; justify-items: center; margin-left: 8px; font-size: 14px; line-height: 32px; color: #fff; font-size: 12px; }
.box_add_type div:nth-child(3) { margin-left: 8px; width: 66px; height: 30px; cursor: pointer; font-size: 14px; line-height: 32px; background: #00A0E9; cursor: pointer; border: 1px solid #00A0E9; color: #fff; text-align: center; border-radius: 8px; }
.star1 { z-index: 0; width: 3px; height: 3px; position: absolute; left: 100px; top: 100px; background: #fff; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -webkit-transform: translate(100%); -moz-transform: translate(100%); transform: translate(100%); -webkit-animation: star1 1s linear infinite forwards; -moz-animation: star1 1s linear infinite forwards; animation: star1 1s linear infinite forwards; }
@-webkit-keyframes star1 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }
@-moz-keyframes star1 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }
@keyframes star1 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }
.star2 { z-index: 0; width: 5px; height: 5px; position: absolute; left: 150px; top: 150px; background: #fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; -webkit-animation: star2 1.5s linear infinite forwards; -moz-animation: star2 1.5s linear infinite forwards; animation: star2 1.5s linear infinite forwards; }
@-webkit-keyframes star2 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }
@-moz-keyframes star2 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }
@keyframes star2 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }
.star3 { z-index: 0; width: 6px; height: 6px; position: absolute; left: 300px; top: 300px; background: #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-animation: star3 2s linear infinite forwards; -moz-animation: star3 2s linear infinite forwards; animation: star3 2s linear infinite forwards; }
@-webkit-keyframes star3 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }
@-moz-keyframes star3 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }
@keyframes star3 { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } }

.footer_btns { position: fixed; bottom: 80px; left: 20px; right: 20px; display: flex; z-index: 1; justify-content: center; }
.footer_btns .button .ui-checkbox { --primary-color: #1677ff; --secondary-color: #fff; --primary-hover-color: #4096ff; --checkbox-diameter: 20px; --checkbox-border-radius: 5px; --checkbox-border-color: #d9d9d9; --checkbox-border-width: 1px; --checkbox-border-style: solid; --checkmark-size: 1.2; }
.footer_btns .button .ui-checkbox, .footer_btns .button .ui-checkbox *, .footer_btns .button .ui-checkbox *::before, .footer_btns .button .ui-checkbox *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
.footer_btns .button .ui-checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: var(--checkbox-diameter); height: var(--checkbox-diameter); border-radius: var(--checkbox-border-radius); background: var(--secondary-color); border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; cursor: pointer; position: relative; }
.footer_btns .button .ui-checkbox::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color); box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color); border-radius: inherit; opacity: 0; -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46); -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46); transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46); }
.footer_btns .button .ui-checkbox::before { top: 40%; left: 50%; content: ""; position: absolute; width: 4px; height: 7px; border-right: 2px solid var(--secondary-color); border-bottom: 2px solid var(--secondary-color); -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0); -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0); transform: translate(-50%, -50%) rotate(45deg) scale(0); opacity: 0; -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s; -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s; transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s; }
.footer_btns .button .ui-checkbox:hover { border-color: var(--primary-color); }
.footer_btns .button .ui-checkbox:checked { background: var(--primary-color); border-color: transparent; }
.footer_btns .button .ui-checkbox:checked::before { opacity: 1; -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size)); -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size)); transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size)); -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; }
.footer_btns .button .ui-checkbox:active:not(:checked)::after { -webkit-transition: none; -o-transition: none; -webkit-box-shadow: none; box-shadow: none; transition: none; opacity: 1; }
.footer_btns .button .job { color: #fff;white-space: nowrap;overflow:hidden; }
.footer_btns .button { position: relative; text-decoration: none; color: #fff; background: linear-gradient(45deg, #00A0E9, #FFE100); height: 32px; border-radius: 16px; width: 120px; font-size: 14px; border: 0px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.footer_btns .button .un_check { position: absolute; inset: 1px; background: #272727; border-radius: 16px; transition: 0.5s; display: flex; justify-content: center; align-items: center; }
.footer_btns .button .wait_check { position: absolute; inset: 1px; background: #00A0E9; border-radius: 16px; transition: 0.5s; display: flex; justify-content: center; align-items: center; }

@media (min-width: 100px) and (max-width: 768px) {
   
.footer_btns { position: fixed; flex-wrap: nowrap;overflow-x: auto; overflow-y: hidden;bottom: 70px; left: 10px; right: 10px; display: flex; z-index: 1; justify-content: flex-start; }
 
.footer_btns .button .ui-checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: var(--checkbox-diameter); height: var(--checkbox-diameter); border-radius: var(--checkbox-border-radius); background: var(--secondary-color); border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; cursor: pointer; position: relative; }
.footer_btns .button .ui-checkbox::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color); box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color); border-radius: inherit; opacity: 0; -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46); -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46); transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46); }
.footer_btns .button .ui-checkbox::before { top: 40%; left: 50%; content: ""; position: absolute; width: 4px; height: 7px; border-right: 2px solid var(--secondary-color); border-bottom: 2px solid var(--secondary-color); -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0); -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0); transform: translate(-50%, -50%) rotate(45deg) scale(0); opacity: 0; -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s; -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s; transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s; }
.footer_btns .button .ui-checkbox:hover { border-color: var(--primary-color); }
.footer_btns .button .ui-checkbox:checked { background: var(--primary-color); border-color: transparent; }
.footer_btns .button .ui-checkbox:checked::before { opacity: 1; -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size)); -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size)); transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size)); -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; }
.footer_btns .button .ui-checkbox:active:not(:checked)::after { -webkit-transition: none; -o-transition: none; -webkit-box-shadow: none; box-shadow: none; transition: none; opacity: 1; }
.footer_btns .button .job { color: #fff;white-space: nowrap;overflow:hidden; }
.footer_btns .button { position: relative; flex-shrink: 0;  min-width: 80px;  text-decoration: none; color: #fff; background: linear-gradient(45deg, #00A0E9, #FFE100); height: 32px; border-radius: 16px;  font-size: 14px; border: 0px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.footer_btns .button .un_check { position: absolute; inset: 1px; background: #272727; border-radius: 16px; transition: 0.5s; display: flex; justify-content: center; align-items: center; }
.footer_btns .button .wait_check { position: absolute; inset: 1px; background: #00A0E9; border-radius: 16px; transition: 0.5s; display: flex; justify-content: center; align-items: center; }


}


.color_basic { color: #00A0E9; }
.color_yellow{color:#FFE100;}
.box_selector { display: flex; justify-content: flex-start; }
.box_selector .name { padding: 0px 8px; line-height: 28px; color: #000; font-weight: 700; }

.card { display: flex; justify-content: flex-start; flex-direction: row; position: fixed;bottom:150px; right: 20px; align-items: center;z-index:999; }
.card .btn_left { width: 20px; height: 50px; background: #000; color:#fff; cursor: pointer; border-radius:8px; }
.card:hover { right: 20px; }
.card .list .element label input[type="radio"] { display: none; }
.card .separator { border-top: 1.5px solid #42434a; }
.card .list { width: 120px; user-select: none; border-radius: 10px; padding: 10px; background-color: #000; list-style-type: none; display: flex; flex-direction: column; }
.card .list a { color: #fff; text-decoration: none; }
.card .list .element > label { display: flex; align-items: center; color: #fff; gap: 10px; transition: all 0.3s ease-out; padding: 6px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.card .list .element label svg { width: 19px; height: 19px; transition: all 0.3s ease-out; }
.card .list .element label:has(input[type="radio"]:checked), .card .list .element label:hover { background-color: var(--color); color: var(--hover-color); }
.card .list .element label:active { transform: scale(0.96); }
.card .list .element label:has(input[type="radio"]:checked) svg, .card .list .element label:hover svg { stroke: var(--hover-storke); }
.card  .btn_close{position:absolute;bottom:-48px;right:20px; cursor:pointer; width:38px;height:38px;background:#42434a;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;border-radius:50%;}
.card  .btn_close img{width:65%;display:block;}


         .notification_box {
            position: fixed;
            display: flex;
            flex-direction: column;
            right: -300px;
            top: 80px;
            z-index: 1;
        }

            .notification_box .notification {
                position: relative;
                background: #000;
                padding: 15px 20px;
                border-radius: 10px;
                height: auto;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                max-width: 300px;
                overflow: hidden;
                margin-bottom: 10px;
                animation: slideIn 0.5s forwards;
                display: flex;
                flex-direction: column;
                padding: 8px 38px 8px 50px;
            }

        .notification h3 {
            margin: 0;
            font-size: 16px;
            color: #fff;
        }

        .notification p {
            margin: 0;
            font-size: 12px;
            color: #999;
        }

        .icon_notification {
            position: absolute;
            top: 10px;
            left: 10px;
            background: none;
            border: none;
            font-size: 28px;
            font-weight: 700;
            color: #cc0000;
            cursor: pointer;
            animation: shake 1.5s infinite;
        }

        @keyframes shake {
            0% {
                transform: rotate(0deg);
            }

            10% {
                transform: rotate(-15deg);
            }

            20% {
                transform: rotate(15deg);
            }

            30% {
                transform: rotate(-15deg);
            }

            40% {
                transform: rotate(15deg);
            }

            50% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 5px;
            background: none;
            border: none;
            font-size: 28px;
            font-weight: 700;
            color: #cc0000;
            cursor: pointer;
        }

            .close-btn:hover {
                color: #333;
            }

        @keyframes slideIn {
            to {
                right: 20px;
            }
        }