@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');

body {background:#ffffff !important; font-family:"Roboto", sans-serif !important;}

a, a:hover, a:active, a:visited {text-transform: none;text-decoration: none;}

:root {overscroll-behavior: none;}

.card {border-radius:28px;background:#f5f5f7;border:0px;}
.btn-primary {background: #36784B;}
.bg-primary {background: #36784B;}
.bg-fanta {background:#36784B !important}
.bg-gray {background:#ccc !important}
.text-fanta {color:#36784B}
.text-gray {color:rgb(102, 115, 130);}
.text-primary {color: #36784B;}
.bg-yellow {background:#e7c606;}
.bg-sara-blue {background:#060F73;}
.bg-green-fanta {background:rgb(97, 180, 96) !important}
.bg-darkgrey {background:#717070;}

.btn {border-radius:24px;height:48px;font-size:18px;}
.form-control, .input-group-text, .input-group-flat {outline:none !important;border-radius:24px;background-color: #fff !important;height:48px;border:none;}
.form-control:focus-within, .form-control:focus, .input-group-flat:focus-within {
  box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), 0);
  border-radius: 24px;
  outline:none !important;
  box-shadow: none;
  border:none;
}
.form-control {padding-left:24px;padding-right:24px;color: #23366F !important;font-size:18px;border:none;box-shadow: none;background-color:#ffffff !important;}
.form-label {font-size:.9rem;color:#000;z-index:999;margin-left:20px;margin-bottom:-2px;margin-right:20px;display:none;}
.CSForgotPW {color:#222 !important;}

.form-check-label{line-height:22px !important;z-index:1 !important;position:relative;border:none;box-shadow: none;font-size:14px;}
::-webkit-input-placeholder {font-size:18px;} 

.CS-NotHaveAccount {border-radius:24px;height:48px;font-size:14px;background:transparent;line-height:48px;color:#000 !important;margin:18%;}
.CS-NotHaveAccount-Link {text-align:center;margin-left:10px;padding:13px 20px;border-radius:22px;height:44px;font-size:14px;background:#000;line-height:44px;color:#fff !important;font-weight:500;}
.avatar {border:none !important;box-shadow:none;border-radius:24px;background:#000;color:#fff;}
.atbottom {position: absolute;bottom:14px;left:14px;width:calc(100% - 28px);text-align:left;}
.cover {  width: 100%;  height: 100%;  object-fit: cover;}
.spot {position:absolute;top:48px;left:24px;font-size:48px;font-weight:700;font-family:"Roboto Condensed", sans-serif;letter-spacing:-2px;line-height:50px;}
.spotsmall {position:absolute;top:24px;left:24px;font-size:28px;font-weight:700;font-family:"Roboto Condensed", sans-serif;letter-spacing:-2px;line-height:32px;}
.white {color:#fff}
.black {color:#000}
.notfullblack {color:#1d1d1f}
.divide {width:100px;position:relative;height:1px;background:#ddd;margin-top:24px;margin-bottom:24px;}
.btn-black {background:#000;color:#fff;border:0px;}

.hidden {display:none !important;}

#search-container {position: fixed;top:8px;right:15%;width:18%;border-radius: 24px;overflow: hidden; background: #fff;}

#slidercover {position: fixed; top:8px; right:4px; width:48px; height:48px; border-radius: 24px; background:#e9e9eb; z-index:3;}
#scroll-container {position: fixed;top:8px;left:15%;width:50%;border-radius: 24px;overflow: hidden; background: #e9e9eb;}
#scroll-text {font-family:"Kode Mono"; font-size:16px; line-height:48px; -moz-transform: translateX(230%); -webkit-transform: translateX(230%); transform: translateX(230%);  -moz-animation: TextSlider 20s linear infinite; -webkit-animation: TextSlider 20s linear infinite; animation: TextSlider 20s linear infinite;}
@-moz-keyframes TextSlider {from { -moz-transform: translateX(230%); } to { -moz-transform: translateX(-230%); }}
@-webkit-keyframes TextSlider {  from { -webkit-transform: translateX(230%); }  to { -webkit-transform: translateX(-230%); }}
@keyframes TextSlider {  from {    -moz-transform: translateX(230%);    -webkit-transform: translateX(230%);    transform: translateX(230%);  }  to {    -moz-transform: translateX(-230%);    -webkit-transform: translateX(-230%);    transform: translateX(-230%);  }}

#FooterActionsWrapper               {box-sizing:border-box;position:fixed;bottom:12px;left:15%;width:70%;border-radius:28px;height:64px;background:#f5f5f7;padding:4px;z-index:5}
#FooterInteracionTab                {box-sizing:border-box;position:fixed;bottom:12px;left:15%;width:70%;border-radius:28px;height:138px;background:#f5f5f7;padding:16px;transition: all .5s;font-size:14px;font-weight:700;z-index:4;line-height:16px;}
#FooterInteracionTab5050            {box-sizing:border-box;position:fixed;bottom:12px;left:3%;width:94%;border-radius:28px;height:138px;background:#f5f5f7;padding:16px;transition: all .5s;font-size:14px;font-weight:700;z-index:4;line-height:16px;}
.FooterActionActive{box-sizing:border-box;width:33.33%;background:#000 !important;float:left;height:56px;border-top-left-radius:28px;border-bottom-left-radius:28px;font-family:"Roboto Condensed";color:#fff !important;font-weight:700;font-size:20px;line-height:56px;text-align:center;}
.FooterAction {box-sizing:border-box;width:33.33%;background:#fff;float:left;height:56px;border-top-left-radius:28px;border-bottom-left-radius:28px;font-family:"Roboto Condensed";color:#000;font-weight:700;font-size:20px;line-height:56px;text-align:center;}
.FooterActionEmpty {box-sizing:border-box;width:33.33%;background:#fff;float:left;height:56px;text-align:center;}

#UserActions,#DEV {display:none;z-index:101;width:100%;box-sizing:border-box;height:80%;position:absolute;top:0px;background:rgb(34,34,34);color:#f4f4f4;border-bottom-left-radius: 28px;border-bottom-right-radius: 28px;}
#UserActions-LogoWrapper {padding:5% important;height:60px !important;background:#f5f5f7}
#HideUserActions,#HideUserActionsDEV {position:absolute;top:11px;right:10px;z-index:100}
.ContentWrapper {top:78px;position:fixed;width:100%;overflow-y:hidden;height:calc(100% - 172px)}
.HScrollWrapper {position:relative;box-sizing:border-box;height:100%;width:400%;}
.HScroll {scroll-snap-align: start;display:inline-block;box-sizing:border-box;height:100%;width:23.5%;}
.NoScroll {box-sizing:border-box;height:100%;width:calc(100% - 24px);}
.NoScroll-Stacked {box-sizing:border-box;height:auto;width:calc(100% - 24px);}
.transparent {background:transparent;}

.Training-EventIntro      {margin:0; position:absolute;  top:50%;  left:50%;  transform:translate(-50%, -50%);}
.Training-EventTitle      {position:absolute;top:24px;left:24px;font-size:56px;font-weight:700;font-family:"Roboto Condensed", sans-serif;letter-spacing:-1px;line-height:60px;z-index:5;}
.Training-EventTitleMid   {position:absolute;top:24px;left:24px;font-size:28px;font-weight:700;font-family:"Roboto Condensed", sans-serif;letter-spacing:0px;line-height:30px;z-index:5;}
.Match-QuestionsWrapper   {height:100%;width:100%;margin:0; margin-top:0;position:absolute;  top:50%;  left:50%;  transform:translate(-50%, -50%);text-align: center;}
.Match-Question           {border-radius:28px;background:#f5f5f7; position:relative;min-width:31.33%;max-width:31.33%;height:24%;display:inline-block;box-sizing:border-box;margin:1%;margin-bottom:0;margin-top:0;}
.Match-QuestionNumber     {line-height:90px;font-family:"Kode Mono"; font-size:90px;font-weight:700;top:50%;  left:50%;  transform:translate(-50%, -50%);position:absolute;}
.Home-Wrapper             {height:100%;width:100%;margin:0; margin-top:0;position:absolute;  top:50%;  left:50%;  transform:translate(-50%, -50%);}
.zi5 {z-index:5}
.grey {color: rgb(102, 115, 130)}

.Card-StandardText        {font-weight:500;font-size:18px;line-height:20px;}
.Card-LightText           {font-weight:500;font-size:14px;line-height:16px;letter-spacing:0px !important;}

.CardBottomOverlay        {box-sizing:border-box;position:absolute;bottom:-2%;left:-1.5%;width:103%;border-radius:28px;height:auto;background:#000;padding:16px;transition: all .5s;font-size:14px;font-weight:700;z-index:4;line-height:16px;color:#fff}

.MonsterIcon              {font-size:280px;}
.TrainingListIcon         {font-size:120px;position:absolute !important;top:-45px;right:-30px;opacity:.2}

.ContentLenght            {display:inline-block;background:#ccc;width:65px;height:40px;text-align:right;padding:10.5px;padding-right:8px;border-radius:20px;margin-left:-36px;font-size:15px;color:#000;font-weight:500;line-height:18px;}

.Match_Answer_Unselected {background:rgba(82, 82, 82, 0.08);border-radius:28px;padding:5px;padding-left:12px;padding-right:12px;font-size:16px;font-weight:500;border:4px solid rgb(97, 180, 96, .1)}
.Match_Answer_5050       {background:rgba(82, 82, 82, 0.08);border-radius:28px;padding:5px;padding-left:12px;padding-right:12px;font-size:16px;font-weight:500;border:4px solid rgb(97, 180, 96, .1);color:#bbb;}
.Match_Answer_Selected-Wrong {background:rgba(255, 0, 0,0.8);border-radius:28px;padding:5px;padding-left:12px;padding-right:12px;color:#fff;font-size:16px;font-weight:500;border:4px solid rgb(97, 180, 96, .1)}
.Match_Answer_Selected-Correct {background:rgba(97, 180, 96);border-radius:28px;padding:5px;padding-left:12px;padding-right:12px;color:#fff;font-size:16px;font-weight:500;border:4px solid rgb(97, 180, 96, .1)}
.Match_Answer_UnSelected-Correct {background:rgba(97, 180, 96, .7);border:3px solid #77A984;border-radius:28px;padding:5px;padding-left:12px;padding-right:12px;font-size:16px;font-weight:500;}
.Match_Answer_UnSelected-Wrong {background:#ECEEEF;border:3px solid #FF7569;border-radius:28px;padding:5px;padding-left:12px;padding-right:12px;font-size:16px;font-weight:500;}
.answer-selected {background:rgba(97, 180, 96) !important;color:#ffffff !important;}

.Footer-Top {line-height:30px;width:100%;font-family:"Roboto Condensed";color:#000;font-weight:700;font-size:24px;padding-top:6px;}
.Footer-Bottom {line-height:16px;width:100%;font-family:"Roboto Condensed";color:#000;font-weight:700;font-size:14px;}

.Question-Standard  {z-index:1 !important;font-size:21px;line-height:26px;font-weight:700;letter-spacing:-.5px;}
.Question-Wrapper   {position:relative;width:100%;padding:6px;padding-top:28px;}
.Answers-Wrapper    {position:relative;width:100%;text-align:left !important;margin-top:28px;}

.t16                {font-size:16px;line-height:20px;}
.t15                {font-size:15px;line-height:18px;}
.t14                {font-size:14px;line-height:17px;}
.t40                {font-size:40px;}
.tmedium            {font-weight:500;}
.tregular           {font-weight:400;}
.theavy             {font-weight:700;}

#ViewModeWrapper    {position:fixed;top:50%;margin-top:-52px;right:-8px;z-index:25;border-radius:24px;border-top-right-radius:0px;border-bottom-right-radius:0px;padding:4px;background:#000;width:55px;}

.TrainingListStatus {font-family:"Roboto Condensed";color:#fff;font-weight:700;font-size:14px;line-height:20px;text-align:center;}

.Bookmark-Active    {fill:#61b460;stroke:#fff;}
.Bookmark-Inactive  {fill:none;stroke:#000;}
.AddToBookmark      {background:#ccc}
.RemoveFromBookmark {background:#000}

#FooterPulsing { animation: pulse 2s infinite;position:absolute;top:0px;left:0px;height:100%;border-radius:28px;z-index:-2;background:#abbaba;width:100%;}

@keyframes pulse {
  0%, 100% { background-color: #abbaba; }
  50% { background-color: #f5f5f7; }
}

@keyframes blink { 
  0%  { opacity: 1; }
  50% { opacity: 0; }
  100%{ opacity: 1; }
}
.blink { color: #005aab;animation: blink 2s infinite;}
.ZHYellow {background:#FFF773 !important; color:#000 !important;}
.ZHRed {background:#FF7569 !important;}

input:focus{
  outline: none !important; 
}
input::placeholder{
  font-size:14px;color:#aaa;
}

.YandOAnswerWrapper {position:absolute;top:-11px;right:6px;width:auto;text-wrap: nowrap;}
.YandOAnswer {position:relative;position:relative;float:right;background:black;line-height:18px;font-size:12px;font-weight:700;color:#fff;border-radius:6px;padding-left:8px;padding-right:8px;margin-right:10px;}