
 



:root {
    --spacing-page: 24px; 
     --Color_Primary: #fe3e29;
     --Color_Primary_100: rgba(254, 62, 41, 0.1);
     --Color_Secondary: #898989;
     --Color_Success: #05c575;
     --Color_Success_100: rgba(5, 197, 117, 0.1);
     --Color_Danger: #fe3e29;
     --Color_Danger_100: rgba(254, 62, 41, 0.1);
     --Color_Info: #0d84ff;
     --Color_Info_100: rgba(13, 132, 255, 0.1);
     --Color_Member: #ffe09b;
     --Color_Orange: #ff730d;
     --Color_Orange_100: rgba(255, 115, 13, 0.1);
     --Color_Gray_800: #333;
     --Color_Gray_600: #666;
     --Color_Gray_500: grey;
     --Color_Gray_300: #b3b3b3;
     --Color_Gray_150: #d9d9d9;
     --Color_Gray_50: #f3f3f3;
     --Color_Gray_30: #f6f6f6;
     --Color_White: #fff;
     --Color_Black: #000;
     --Color_Black_900: rgba(0, 0, 0, 0.9);
     --Color_Black_800: rgba(0, 0, 0, 0.8);
     --Color_Black_700: rgba(0, 0, 0, 0.7);
     --Color_Black_600: rgba(0, 0, 0, 0.6);
     --Color_Black_500: rgba(0, 0, 0, 0.5);
     --Color_Black_400: rgba(0, 0, 0, 0.4);
     --Color_Black_300: rgba(0, 0, 0, 0.3);
     --Color_Black_200: rgba(0, 0, 0, 0.2);
     --Color_Black_150: rgba(0, 0, 0, 0.15);
     --Color_Black_100: rgba(0, 0, 0, 0.1);
     --Color_Black_50: rgba(0, 0, 0, 0.05);
     --Color_Black_30: rgba(0, 0, 0, 0.03);
     --Color_White_900: hsla(0, 0%, 100%, 0.9);
     --Color_White_800: hsla(0, 0%, 100%, 0.8);
     --Color_White_700: hsla(0, 0%, 100%, 0.7);
     --Color_White_600: hsla(0, 0%, 100%, 0.6);
     --Color_White_500: hsla(0, 0%, 100%, 0.5);
     --Color_White_400: hsla(0, 0%, 100%, 0.4);
     --Color_White_300: hsla(0, 0%, 100%, 0.3);
     --Color_White_200: hsla(0, 0%, 100%, 0.2);
     --Color_White_150: hsla(0, 0%, 100%, 0.15);
     --Color_White_100: hsla(0, 0%, 100%, 0.1);
     --Color_White_50: hsla(0, 0%, 100%, 0.05);
     --Color_White_30: hsla(0, 0%, 100%, 0.03);
     --Color_Mask_2: rgba(0, 0, 0, 0.7);
     --Color_Text_1: #0e151c;
     --Color_Text_2: rgba(14, 21, 28, 0.6);
     --Color_Text_3: rgba(14, 21, 28, 0.4);
     --Color_Text_4: rgba(14, 21, 28, 0.2);
     --Color_Text_Member: var(--Color_Gray_800);
     --Color_Divider: rgba(14, 21, 28, 0.1);
     --Color_Border_Img: rgba(14, 21, 28, 0.06);
     --Color_Border_Card: rgba(14, 21, 28, 0.1);
     --Color_Mask_1: rgba(0, 0, 0, 0.4);
     --Color_Mask_3: rgba(0, 0, 0, 0.1);
     --Color_Bg_Card_White: var(--Color_White);
     --Color_Bg_Card_Gray: #f7f8f9;
     --Color_Bg_White: var(--Color_White);
     --Color_Bg_Gray: #f3f4f7;
     --Color_Bg_Title: var(--Color_Bg_White);
     --Color_Bg_Dialog: var(--Color_White);
     --Color_Bg_Member: #f9ebd6;
     --Color_Bg_Input: #f6f7f8;
     --Color_Btn_Default: rgba(14, 21, 28, 0.05);
     --Color_Btn_Primary: var(--Color_Primary);
     --Color_Btn_Black: #0e151c;
     --Color_Btn_Gray: rgba(14, 21, 28, 0.05);
     --Color_Btn_White: var(--Color_White);
     --Color_Btn_Switch: rgba(14, 21, 28, 0.06);
     --Color_White_DisColor: #fff;
     --Color_Black_DisColor: #000;
     --Color_Bg_Toast: hsla(0, 0%, 94.9%, 0.64);
     --Color_Text_Toast: rgba(0, 0, 0, 0.8);
     --Color_Border_Toast: rgba(0, 0, 0, 0.1);
     --Color_Head_Bg: #8496a9;
     --Color_Pc_Header_Bg: hsla(0, 0%, 100%, 0.9);
     --Pc_Header_Bg_Filter: blur(40px);

 }

 :root {
     --radius: 9px;
     --margin: 20px;
     --padding: 20px;
     --margin-: -20px;
 }
  
.dark:root  
 {
     --Color_Text_1: rgb(255 255 255 / 80%);
     --Color_Text_2: hsla(0, 0%, 100%, 0.7);
     --Color_Text_3: hsla(0, 0%, 100%, 0.5);
     --Color_Text_4: hsla(0, 0%, 100%, 0.3);
     --Color_Text_Member: #ffe09b;
     --Color_Divider: hsla(0, 0%, 100%, 0.15);
     --Color_Border_Img: hsla(0, 0%, 100%, 0.15);
     --Color_Border_Card: hsla(0, 0%, 100%, 0.15);
     --Color_Mask_1: rgba(0, 0, 0, 0.7);
     --Color_Mask_3: rgba(0, 0, 0, 0.2);
     --Color_Bg_Card_White: #181818;
     --Color_Bg_Card_Gray: #1f1f1f;
     --Color_Bg_White: #181818;
     --Color_Bg_Gray: #000;
     --Color_Bg_Title: #181818;
     --Color_Bg_Dialog: #262626;
     --Color_Bg_Member: #1f1f1f;
     --Color_Bg_Input: hsla(0, 0%, 100%, 0.08);
     --Color_Btn_Default: hsla(0, 0%, 100%, 0.1);
     --Color_Btn_Primary: rgba(254, 62, 41, 0.69);
     --Color_Btn_Black: rgb(255 255 255 / 80%);
     --Color_Btn_Gray: hsla(0, 0%, 100%, 0.1);
     --Color_Btn_White: hsla(0, 0%, 100%, 0.1);
     --Color_Btn_Switch: hsla(0, 0%, 100%, 0.1);
     --Color_White_DisColor: #000;
     --Color_Black_DisColor: rgb(255 255 255 / 80%);
     --Color_Bg_Toast: rgba(31, 31, 31, 0.75);
     --Color_Text_Toast: hsla(0, 0%, 100%, 0.8);
     --Color_Border_Toast: hsla(0, 0%, 100%, 0.1);
     --Color_Pc_Header_Bg: #141414;
     --Pc_Header_Bg_Filter: none
 } 
 .dark div{
border-color: var(--Color_Pc_Header_Bg)!important;
 }
 .dark{
    opacity: 0.9;
 }
 

 @media (max-width: 575.98px) {
     :root {
         --spacing-page: 20px;
         --padding: 12px;
         --margin: 4px;
         --radius: 0;
     }
 }





 


 @media (max-width: 991.98px) {}

 @media (max-width: 1199.98px) {

     .d-md-none {
         display: none !important;
     }

     .d-md-block {
         display: block !important;
     }
 }

 *,
 :after,
 :before {
  
     text-decoration: none;
     margin: 0;
     border: 0;
     padding: 0;
 }

 a:hover {
     opacity: .6;
     text-decoration: none;
 }

 a:active {
     opacity: .8;
 }

 .d-flex-wrap {
     display: flex;
     flex-wrap: wrap;
 }

 .Button_primary {
     background-color: var(--Color_Btn_Primary);
     color: var(--Color_White_DisColor); 
}
 .Button_black {
     background-color: var(--Color_Btn_Black);
     color: var(--Color_White_DisColor);
 }

 .Button_small {
     min-width: 40px;
     height: 28px;
     line-height: 28px;
     border-radius: 14px;
     padding: 0 8px;
 }

 .Button_btn {
     display: inline-block;
     text-align: center;
     cursor: pointer;
     box-sizing: border-box;
 }
 a {
    color: var(--Color_Text_1); 
}
.radius{
    border-radius: var(--radius);
    overflow: hidden;
}