@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;500;700&family=Inconsolata:wght@300;500;600;900&family=Lato:wght@400;700&family=Open+Sans:wght@300;400;500;600&family=Press+Start+2P&display=swap');
html{
    --Base: #DDDDDD;
    --Primary: #ff9068;
    --Secondary: #aa66cc;
    --Gold: #E2AE00;
    --Raise: rgba(255,255,255,0.8);
    --Lift: rgba(255,255,255,0.3);
    --UnLift: rgba(255,255,255,0);
    --UnLower: rgba(0,0,0,0);
    --Lower: rgba(0,0,0,0.3);
    --Drop: rgba(0,0,0,0.5);
    --LiftBase: #ECECEC;
    --RaiseBase: #F9F9F9;
    --LowerBase: #D6D6D6;
    --DropBase: #BDBDBD;
    --OnBase: #0f0d0c;
    --OnPrimary: #ffffff;
    --OnSecondary: #ffffff;
    --OnRaise: #1f1d1c;
    --OnLift: #141414;
    --OnLower: #000000;
    --OnDrop: #ffffff;
    --Gradient: linear-gradient(to right, var(--Primary), var(--Secondary));
    --AssetSize: 5em;
    -webkit-backface-visibility: hidden;
	font-family:'Chakra Petch','Open-Sans','Raleway','Lato';
    font-size: 1.02em;


    /* Old Variables (for Compatability) */
    --MainGradient: var(--Gradient);
    --CardBG: var(--Lift);
}
body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, .alert, a, .td-name, td, button.close {
    font-family: 'Chakra Petch', 'Open-Sans', 'Raleway', 'Lato', Arial, sans-serif;
    font-weight: 500;
}
body.DarkTheme{
    --Base: #121212;
    --Primary: #ff9068;
    --Secondary: #aa66cc;
    --Gold: #ffdf00;
    --ItemPrimary: #5AC18E;
    --ItemError: #B2303B;
    --ItemWarning: #E3A727;
    --Raise: rgba(255,255,255,0.22);
    --Lift: rgba(255,255,255,0.09);
    --Lower: rgba(0,0,0,0.12);
    --Drop: rgba(0,0,0,0.34);
    --LiftBase: #202020;
    --RaiseBase: #313131;
    --LowerBase: #0E0E0E;
    --DropBase: #070707;
    --OnBase: #D8D9DA;
    --OnPrimary: #ffffff;
    --OnSecondary: #ffffff;
    --OnRaise: #ffffff;
    --OnLift: #e1e2e3;
    --OnLower: #dadada;
    --OnDrop: #C2C3C4;
    --Gradient: linear-gradient(to right, var(--Primary), var(--Secondary));
    --AssetSize: 4em;
    --BodyBackground: var(--Base);
    color: var(--OnBase);
}
body.DarkTheme .badge-primary, body.DarkTheme .btn-primary, {
    background-color: #4470BA !important
}
body.DarkTheme .badge-secondary, body.DarkTheme .btn-secondary {
    background-color: #805198 !important;
}
body.DarkTheme .badge-success, body.DarkTheme .btn-success {
    background-color: #40A155 !important;
}
body.DarkTheme .badge-info, body.DarkTheme .btn-info {
    background-color: #3B98A5 !important;
}
body.DarkTheme .badge-warning, body.DarkTheme .btn-warning {
    background-color: #E3A727 !important;
    color: #212529 !important;
}
body.DarkTheme .badge-danger, body.DarkTheme .btn-danger {
    background-color: #B2303B !important;
}
body.DarkTheme .badge-light, body.DarkTheme .btn-light {
    background-color: #C1C1C1 !important;
}
body.DarkTheme .badge-dark, body.DarkTheme .btn-dark {
    background-color: var(--LiftBase) !important;
}
body.DarkTheme .badge-lift, body.DarkTheme .btn-lift {
    background-color: var(--RaiseBase) !important;
}
body.DarkTheme .btn-lift:hover {
    color: var(--OnBase);
}
.FirstLayer{
    color: var(--OnBase);
    background-color: var(--Base);
}
.SecondLayer{
    color: var(--OnLift);
    background-color: var(--LiftBase);
}
.ThirdLayer{
    color: var(--OnRaise);
    background-color: var(--RaiseBase);
}
.FirstLayerText{
    color: var(--OnBase);
}
.SecondLayerText{
    color: var(--OnLift);
}
.ThirdLayerText{
    color: var(--OnRaise);
}
.BlazeHeader{
    Color: var(--Primary);
}
.BlazeText{
    Color: var(--Primary);
}
.RolesHeader{
    Color: var(--Secondary);
}
.RolesText{
    Color: var(--Secondary);
}
.AccentText{
    Color: var(--Primary);
}
.Underlined{
    text-decoration: underline !important;
}
.GoldText{
    Color: var(--Gold);
}
.ItemHeader{
    Color: #00c851 ;
}
.table{
    color: var(--OnLift);
    background: var(--LiftBase);
}
.navbar .dropdown-menu a:not(.active){
    color: var(--OnLift);
}
.nav-pills{
    background-color:var(--Lower);
}
.nav-pills .nav-item{
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.nav-pills .nav-item:hover{
    border-bottom: 1px solid rgba(255,255,255,0.6);
}
.DashProgress{
    --NegLevelUpProcess: 0%;
    --BGcolor: var(--Primary);
    --AccentGradientOld: linear-gradient(260deg,
		rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,
		rgba(255,255,255,0.2) 10.01%,rgba(255,255,255,0.4) 20%,
    	rgba(255,255,255,0) 20.01%,rgba(255,255,255,0) 30%,
    	rgba(255,255,255,0.2) 30.01%,rgba(255,255,255,0.4) 40%,
    	rgba(255,255,255,0) 40.01%,rgba(255,255,255,0) 50%,
    	rgba(255,255,255,0.2) 50.01%,rgba(255,255,255,0.4) 60%,
    	rgba(255,255,255,0) 60.01%,rgba(255,255,255,0) 70%,
        rgba(255,255,255,0.2) 70.01%,rgba(255,255,255,0.4) 80%,
        rgba(255,255,255,0) 80.01%,rgba(255,255,255,0) 90%,
        rgba(255,255,255,0.2) 90.01%,rgba(255,255,255,0.4) 100%
	);
    --AccentGradient: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0));
	--clip-path:polygon(
		0% 0%, 0% 100%, 0.1% 100%, 0.1% 0%,
		0.1% 0%, 0.1% 25%, 1.1% 50%, 0.1% 75%, 0.1% 100%, 10% 100%,
		10% 0%, 10% 25%, 11% 50%, 10% 75%, 10% 100%, 20% 100%,
		20% 0%, 20% 25%, 21% 50%, 20% 75%, 20% 100%, 30% 100%,
		30% 0%, 30% 25%, 31% 50%, 30% 75%, 30% 100%, 40% 100%,
		40% 0%, 40% 25%, 41% 50%, 40% 75%, 40% 100%, 50% 100%,
		50% 0%, 50% 25%, 51% 50%, 50% 75%, 50% 100%, 60% 100%,
		60% 0%, 60% 25%, 61% 50%, 60% 75%, 60% 100%, 70% 100%,
		70% 0%, 70% 25%, 71% 50%, 70% 75%, 70% 100%, 80% 100%,
		80% 0%, 80% 25%, 81% 50%, 80% 75%, 80% 100%, 90% 100%,
		90% 0%, 90% 25%, 91% 50%, 90% 75%, 90% 100%, 100% 100%, 100% 0%
	);
    background: linear-gradient(120deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) var(--NegLevelUpProcess), #5E5E5E calc(var(--NegLevelUpProcess) + 0.2%), #5E5E5E 100%),
    var(--AccentGradient),
	linear-gradient(var(--BGcolor),var(--BGcolor));
    border:1px solid black;
    height:10px;
}
p{
    opacity:0.9;
}
p.small{
    font-size:90%
}
.BlazeHeader, .BlazeText, .RolesHeader, .RolesText, .AccentText{
    opacity:1;
}
.Gamify{
    font-family: "Press Start 2P";
}
.badge{
    font-weight:700;
    letter-spacing:0.02em;
    line-height: 1.2em;
}
body{
    background: linear-gradient(to bottom, var(--Base) calc(100% - 180px), var(--Lower) 100%), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNzAiPgo8cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjYwIiBmaWxsPSJub25lIj48L3JlY3Q+CjxwYXRoIHN0cm9rZS1vcGFjaXR5PSIwLjMiIGQ9Ik0gMCAwIEwyNSAwIEwgNDUgMzUgTCA4NSAzNSBMIDEwNSAwIEwgMTMwIDAgTSAwIDcwIEwyNSA3MCBMIDQ1IDM1IE0gODUgMzUgMTA1IDcwIEwgMTMwIDcwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiI+PC9wYXRoPgo8L3N2Zz4="), linear-gradient(to bottom, var(--Base),var(--Base));
    background-position:  0 0,0 80%;
    overflow-x: hidden !important;
}
body::-webkit-scrollbar-track, .row::-webkit-scrollbar-track, ::-webkit-scrollbar-track{
	background-color: var(--LiftBase);
}
body::-webkit-scrollbar, .row::-webkit-scrollbar, ::-webkit-scrollbar{
	width: 12px;
	border-radius: 3px;
	background-color: var(--Lower);
}
body::-webkit-scrollbar-thumb, .row::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color: var(--Primary);
}
.carousel .carousel-indicators li{
    width:1rem;
    height: 1rem;
    border:none;
    background-color: var(--Lower);
    cursor:default;
}
.carousel .carousel-indicators li.active{
    background-color: var(--Drop);
    box-shadow: 0px 0px 5px var(--Drop);
}
.carousel .carousel-indicators{
    margin: 0 auto;
    max-width: min(100%, 200px);
}
@keyframes appear {
    from{
        opacity: 0;
        transform:scale(0);
    }
    to {
        opacity: 1;
        transform:scale(1);
    }
}
a:not(.nav-background):not(.navbar-brand){
	transition: color 0.3s;
}
a, table.table a{
    color: var(--OnBase);
}
a:hover{
	transition: color 0s;
    color:var(--Primary);
}
.form-check input[type="checkbox"] + label,
.form-check input[type="radio"] + label{
    text-align:left;
}
.btn.dropdown-toggle:after{
    border:none;
    margin:0;
}
Select ,input:not([type="checkbox"]):not([type="radio"]){
    max-width:100%;
    font-size:1.5rem;
	border-radius:5px;
	padding:0px;
	box-sizing:border-box;
}
label:not(.form-check > label){
 	text-align: left;
	font-size:1.5rem;
}
Select:focus{
 border-radius: 8px 8px 0px 0px;
}
.container-fluid, .row{
    padding: 0;
    margin: 0;
}
.toggle-handle{
    padding:0px 16px;
}
.DividerLong{
    background: var(--Gradient);
	width:100%;
	min-height: 1px;
	margin: 0px 5%;
    z-index:10;
}
.material-icons{
vertical-align: middle;
font-size: 1em;
}
.smallIcon{
    vertical-align: middle;
    height:1.2em;
}
.RoleBadge{
    white-space:nowrap;
    border-radius: 15px;
    background: linear-gradient(to top, var(--Lift), var(--UnLift));
    border: 2px solid darkgray;
    padding: 1px 4px;
    vertical-align:top;
    font-size: 17px;
    margin: 0px 2px;
}
.RoleBadge .material-icons{
margin-top: -0.225em;
}
.img-250{
	max-height:250px;
}
.CurrencyImage, .EventImage, .img-200{
    max-height:200px;
}
.img-150{
    max-height:150px;
}
[data-notifications] {
	position: relative;
}

[data-notifications]:after {
	content: attr(data-notifications);
	position: absolute;
	background: var(--Secondary);
    font-weight: bold;
	border-radius: 100px;
	display: inline-block;
	padding: 0px 0.30em;
	color: var(--OnSecondary);
	right: -8px;
	top: -15px;
}
.IconBtn{
    padding:6px;
    border: 2px solid var(--Raise);
	border-radius: 2px;
	background-color: var(--Lift);
    width:3em;
    height:3em;
}
#Dashboard_UserEmblem{
    border: 2px solid var(--Drop);
    border-radius: 10px;
    background-color: rgba(0,0,0,1);
}
.IconSpan{
    display:inline-block;
    padding:6px;
    width:2.8em;
    height:2.8em;
    border: none;
    background: none;
}
#RightArrowUpgrade{
	margin-top:-10%
}
.IconBtn.Big {
    width:4.5em;
    height:4.5em;
}
.IconBtn:hover, .IconBtn:focus{
    background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),
    radial-gradient(circle at center, rgba(0,123,255,0.3), rgba(0,0,0,0));
}
.ItemSlot{
    border: 2px solid var(--OnDrop);
	border-radius: 15px;
    background-color: var(--LiftBase);
    position: relative;
    display: inline-block;
    margin: 0.3rem;
}
.ItemSlot:hover{
    border: 2px solid var(--ItemPrimary);
    color: var(--ItemPrimary);
}
.ItemSlot.HoverRed:hover{
    border: 2px solid var(--ItemError);
    color: var(--ItemError);
}
.ItemSlot.HoverYellow:hover{
    border: 2px solid var(--ItemWarning);
    color: var(--ItemWarning);
}
.ItemAsset{
 width:var(--AssetSize);
 height: var(--AssetSize);
 background-color: rgba(127,127,127,0.3);
 padding: 0.3rem;
 border-radius: 13px 13px 23px 0px;
}
.ItemName{
    font-size:0.7em;
    font-weight: 600;
	background-color: rgba(0,0,0,0.6);
}
.ItemSlot .ItemName{
    position: absolute;
    z-index: 999;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 1px;
    text-align: center;
    display:none;
    border-radius: 15px 15px 0px 0px;
}
.ItemSlot:hover .ItemName{
    display:block;
}
.ItemSlot .ItemCount{
    margin: 0 auto;
	font-size:1em;
    text-align: center;
    text-shadow: 0 0 10px black;
    border-radius: 0px 0px 5px 5px;
}
.ItemSlot.Big .ItemAsset{
    width: calc(var(--AssetSize) * 1.4);
    height: calc(var(--AssetSize) * 1.4);
}
.ItemSlot.Big .ItemCount{
    font-size:1.25em;
}
.ItemSlot.TypeBlaze .ItemAsset, .ItemSlot.TypeMysterybox .ItemAsset{
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5)), linear-gradient(to bottom right, #CB743E, #A2557A);
}
.ItemSlot.TypeBoost .ItemAsset, .ItemSlot.TypeMaterial .ItemAsset{
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5)), linear-gradient(to bottom right, #4679AF, #00BBC6);
}
.ItemSlot.TypeItem .ItemAsset, .ItemSlot.TypeTool .ItemAsset{
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5)), linear-gradient(to bottom right, #D44761, #884F8B);
}

.ItemSlot.SmallCount .ItemCount{
	font-size:0.87em;
}
.ItemSlot.NoCount .ItemAsset{
 border-radius: 13px;
}



/* Utility Classes: */
.InfoMSG, .SuccessMSG, .WarningMSG, .ErrorMSG {
    padding-left:10px;
    line-height: 45px;
    font-size:20px;
    margin: 10px;
    border-radius:10px;
    text-align: left;
    color: var(--OnPrimary);
}
body.DarkTheme .InfoMSG, body.DarkTheme .SuccessMSG, body.DarkTheme .WarningMSG, body.DarkTheme .ErrorMSG{
    opacity: 0.85;
}
.InfoMSG {
    background-color: #3A9DCE;
}
.SuccessMSG {
    background-color: #39B053;
}
.WarningMSG {
    background-color: #c9a102;
}
.ErrorMSG {
    background-color: #C94343;
  }

.btn{
    box-sizing: border-box;
}
.form-elegant .font-small {
    font-size: 0.8rem; }

.form-elegant .z-depth-1a {
    -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
    box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
    -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
    box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

.form-elegant .modal-header {
    border-bottom: none; }

.modal-dialog .form-elegant .btn .fab {
    color: #2196f3!important; }

.modal-content{
    background-color: var(--RaiseBase);
    color: var(--OnRaise);
}
.input-group-text{
    color: var(--OnBase);
}
.form-elegant .modal-body, .form-elegant .modal-footer {
    font-weight: 400; }

.HexBackground{
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNzAiPgo8cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjYwIiBmaWxsPSJub25lIj48L3JlY3Q+CjxwYXRoIHN0cm9rZS1vcGFjaXR5PSIwLjMiIGQ9Ik0gMCAwIEwyNSAwIEwgNDUgMzUgTCA4NSAzNSBMIDEwNSAwIEwgMTMwIDAgTSAwIDcwIEwyNSA3MCBMIDQ1IDM1IE0gODUgMzUgMTA1IDcwIEwgMTMwIDcwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiI+PC9wYXRoPgo8L3N2Zz4=");
    background-repeat: repeat;
}
.HexBackground.Dark{
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNzAiPgo8cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjYwIiBmaWxsPSJub25lIj48L3JlY3Q+CjxwYXRoIHN0cm9rZS1vcGFjaXR5PSIwLjMiIGQ9Ik0gMCAwIEwyNSAwIEwgNDUgMzUgTCA4NSAzNSBMIDEwNSAwIEwgMTMwIDAgTSAwIDcwIEwyNSA3MCBMIDQ1IDM1IE0gODUgMzUgMTA1IDcwIEwgMTMwIDcwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiI+PC9wYXRoPgo8L3N2Zz4=");
}
.LandingSpacer{
    background: linear-gradient(to bottom, var(--Base), var(--Lift));
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-top:60px;
}
#Currencies{
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNzAiPgo8cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjYwIiBmaWxsPSJub25lIj48L3JlY3Q+CjxwYXRoIHN0cm9rZS1vcGFjaXR5PSIwLjMiIGQ9Ik0gMCAwIEwyNSAwIEwgNDUgMzUgTCA4NSAzNSBMIDEwNSAwIEwgMTMwIDAgTSAwIDcwIEwyNSA3MCBMIDQ1IDM1IE0gODUgMzUgMTA1IDcwIEwgMTMwIDcwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiI+PC9wYXRoPgo8L3N2Zz4="), linear-gradient(to top, #488AD4 20%, #7EC4D8 100%);
    background-repeat: repeat, no-repeat;
    padding-top:30px;
}
.CardImage{
	max-width:150px;
    max-height:150px;

}
.Card{
    padding: 10px;
	border-radius: 15px;
    box-shadow: 2px 2px 1px rgba(0,0,0,.2);
	transition: box-shadow 0.4s;
	background-color: var(--Lift);
    color: var(--OnLift);
    text-align: center;
	width:100%;
    height:100%;
}
.Card-light{
    padding: 10px;
    text-align: center;
    height:100%;
    width:100%;
}
.Card:hover {
    box-shadow: 2px 2px 7px rgba(0,0,0,.5);
}
.Window{
    display:flex;
    flex-flow: column;

	border-radius: 5px;
    box-shadow: 0px 0px 12px rgba(0,0,0,.4);
	transition: box-shadow 0.4s;
	background-color: var(--Lower);
    color: var(--OnLower);
    text-align: center;
	width:100%;
    height:100%;
}
.WindowTop{
    flex: 0 1 auto;
    border-radius: 5px 5px 0 0;
    background-color: var(--Lift);
	width:100%;
}
.WindowMiddle{
    flex: 1 1 auto;
	width:100%;
}
.WindowBottom{
    flex: 0 1 auto;
    border-radius: 0 0 5px 5px ;
    background-color: var(--Lift);
	width:100%;
    min-height:25px;
}
.Window:hover {
    box-shadow: 0px 0px 20px rgba(0,0,0,.55);
}
@supports ((-webkit-backdrop-filter: blur(0.2em)) or (backdrop-filter: blur(0.2em))) {
    .BackgroundBlur, .Card .Window {
        -webkit-backdrop-filter: blur(0.3em);
        backdrop-filter: blur(0.3em);
    }
    .modal.fade.show{
        -webkit-backdrop-filter: blur(0.2em);
        backdrop-filter: blur(0.2em);
    }
    @keyframes BlurInBackground {
        0%{
            backdrop-filter: blur(4px);
        }
        100%{
            backdrop-filter: blur(1.2px);
        }
    }
}
.Invisible{
    visibility: hidden;
}
.Hidden, .hide, .Hide{
    display: none;
}
.left{
    float:left;
}
.right{
    float:right;
}
.toggleSwitch{
    background-color: var(--Lower);
}
.toggleSwitch:checked{
    background-color: var(-Primary);
}

.RewardOverlay{
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    bottom: 0;
    background: linear-gradient(to bottom left, rgba(30,10,0,0.2), rgba(20,0,50,0.4)), linear-gradient(to bottom, var(--LowerBase), var(--LiftBase));
    color: var(--OnLower);
    z-index: 1998;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.4s ease-out, transform 0.1s ease-out 0.4s;
}
.RewardOverlay .TopAccent{
    position: fixed;
    width: 100vw;
    height: min(50vh, 80vw);
    left: 0;
    top: calc(0 - min(50vh, 80vw));
    filter: drop-shadow(5px 2px 8px rgba(0, 0, 0, 0.7));

}
.RewardOverlay .TopAccent::before{
    position: absolute;
    bottom:0;
    right:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,0,0,0.3)), linear-gradient(to top, var(--Secondary), var(--Secondary));
    transition: none;
    opacity: 0.9;
    clip-path: polygon(0% 0%,
        0.0% 0%, 0.5% 0%, 1.2% 0%, 1.9% 0%, 2.7% 0%, 3.6% 0%,
        4.6% 0%, 5.7% 0%, 7.0% 0%, 8.4% 0%, 9.9% 0%, 11.6% 0%,
        13.4% 0%, 15.5% 0%, 17.7% 0%, 20.1% 0%, 22.7% 0%, 25.5% 0%,
        28.4% 0%, 31.6% 0%, 35.0% 0%, 38.5% 0%, 42.2% 0%, 46.0% 0%,
        49.8% 0%, 53.8% 0%, 57.8% 0%, 61.9% 0%, 65.9% 0%, 70.0% 0.0%,
    0% 0%);
    content: '';
}
.RewardOverlay .BottomAccent{
    position: fixed;
    width: 100vw;
    height: min(50vh, 80vw);
    right: 0;
    bottom: 0;
    filter: drop-shadow(-5px -2px 8px rgba(0, 0, 0, 0.7));
}
.RewardOverlay .BottomAccent::before{
    position: absolute;
    bottom:0;
    right:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(255,0,0,0.3)), linear-gradient(to bottom, var(--Secondary), var(--Secondary));
    transition: none;
    opacity: 0.9;
    clip-path: polygon(100% 100%,
        30.0% 100.0%, 34.1% 100%, 38.1% 100%, 42.2% 100%, 46.2% 100%, 50.2% 100%,
        54.0% 100%, 57.8% 100%, 61.5% 100%, 65.0% 100%, 68.4% 100%, 71.6% 100%,
        74.5% 100%, 77.3%100%, 79.9% 100%, 82.3% 100%, 84.5% 100%, 86.6% 100%,
        88.4% 100%, 90.1% 100%, 91.6% 100%, 93.0% 100%, 94.3% 100%, 95.4% 100%,
        96.4% 100%, 97.3% 100%, 98.1% 100%, 98.8% 100%, 99.5% 100%, 100.0% 100%,
    100% 100%);
    content: '';
}
.RewardOverlay .RewardBar{
    position: relative;
    opacity:0;
    width: 100vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleY(0.3);
    padding: 1px 0px;
    background: var(--RaiseBase);
    margin: 0 auto;
    box-shadow: 4px 4px 14px rgba(0,0,0,.5);
}
.RewardOverlay .RewardCards .ItemSlot{
    --Placement: 0;
    opacity:0;
    transform: scale(0.7);
}
.RewardOverlay .RewardCards .ItemSlot::after{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    box-shadow: 2px 2px 30px rgba(255,255,255,.7);
    opacity: 1;
}
.RewardOverlay .CloseButton{
    position: relative;
    opacity:0;
    width: 100vw;
    height: auto;
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0) scale(0.3);
    margin: 0 auto;
}
.RewardOverlay .RewardTitle{
    position: fixed;
    width: 100vw;
    height: auto;
    left: 0;
    bottom: 75vh;
    color: var(--OnRaise);
    opacity: 0;
    transform: scale(0);
}
.RewardOverlay.active .RewardTitle{
    transform: scale(1);
    opacity: 1;
    transition: opacity 0.2s ease-out 0.6s, transform 0.2s ease-out 0.6s;
}

.RewardOverlay.active .CloseButton{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: opacity 0.2s ease-out 1.4s, transform 0.2s ease-out 1.4s;
}
.RewardOverlay.active .RewardCards .ItemSlot::after{
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(1,.1,.75,-0.25) calc(1s + calc(var(--Placement) * 0.1s));
}
.RewardOverlay.active .RewardCards .ItemSlot{
    opacity:1;
    transform: scale(1);
    box-shadow: 2px 2px 5px rgba(0,0,0,.2);
    transition: opacity 0.3s cubic-bezier(.75,1.25,.75,1.25) calc(1s + calc(var(--Placement) * 0.1s)), transform 0.3s cubic-bezier(.75,1.25,.75,1.25)  calc(1s + calc(var(--Placement) * 0.1s));
}
.RewardOverlay.active{
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s ease-out;
}
.RewardOverlay.active .RewardBar{
    transform: translate(-50%, -50%) scaleY(1);
    opacity: 1;
    transition: opacity 0.2s ease-out 0.8s, transform 0.2s ease-out 0.8s;
}
.RewardOverlay.active .TopAccent::before{
    clip-path: polygon(0% 0%,
        0.0% 80.0%, 0.5% 76.0%, 1.2% 71.9%, 1.9% 67.9%, 2.7% 63.9%, 3.6% 59.9%,
        4.6% 56.0%, 5.7% 52.1%, 7.0% 48.2%, 8.4% 44.4%, 9.9% 40.6%, 11.6% 36.9%,
        13.4% 33.2%, 15.5% 29.7%, 17.7% 26.3%, 20.1% 23.0%, 22.7% 19.8%, 25.5% 16.9%,
        28.4% 14.1%, 31.6% 11.5%, 35.0% 9.2%, 38.5% 7.2%, 42.2% 5.4%, 46.0% 3.9%,
        49.8% 2.6%, 53.8% 1.6%, 57.8% 0.9%, 61.9% 0.4%, 65.9% 0.1%, 70.0% 0.0%,
    0% 0%);
    transition: clip-path 0.2s ease-out 0.6s;
}
.RewardOverlay.active .BottomAccent::before{
    clip-path: polygon(100% 100%,
        30.0% 100.0%, 34.1% 99.9%, 38.1% 99.6%, 42.2% 99.1%, 46.2% 98.4%, 50.2% 97.4%,
        54.0% 96.1%, 57.8% 94.6%, 61.5% 92.8%, 65.0% 90.8%, 68.4% 88.5%, 71.6% 85.9%,
        74.5% 83.1%, 77.3% 80.2%, 79.9% 77.0%, 82.3% 73.7%, 84.5% 70.3%, 86.6% 66.8%,
        88.4% 63.1%, 90.1% 59.4%, 91.6% 55.6%, 93.0% 51.8%, 94.3% 47.9%, 95.4% 44.0%,
        96.4% 40.1%, 97.3% 36.1%, 98.1% 32.1%, 98.8% 28.1%, 99.5% 24.0%, 100.0% 20.0%,
    100% 100%);
    transition: clip-path 0.2s ease-out 0.6s;
}





#MysteryBoxTopAccent {
    position: absolute;
    left: 0;
    top: calc(0 - min(50%, 80vw));
    width: 100%;
    height: min(50%, 80vw);
    filter: drop-shadow(5px -2px 6px rgba(0, 0, 0, 0.7));
}
#MysteryBoxBottomAccent {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(50%, 80vw);
    filter: drop-shadow(-3px -3px 6px rgba(0, 0, 0, 0.7));
}
#MysteryBoxTopAccent:before{
    position: absolute;
    bottom:0;
    right:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,122,0.2), rgba(0,0,122,0.4)), linear-gradient(to top, #35c064, #84dca2);
    clip-path: polygon(0% 0%, 23% 0%, 47% 0%, 70% 0%, 0% 0%);
    content: '';
}
#MysteryBoxBottomAccent:before{
    position: absolute;
    bottom:0;
    right:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,122,0.2), rgba(0,0,122,0.4)), linear-gradient(to bottom, #35c064, #84dca2);
    clip-path: polygon(30% 100%, 53% 100%, 77% 100%, 100% 100%, 100% 100%);
    content: '';
}

#MysteryboxModal.show #MysteryBoxTopAccent:before{
    animation: 0.75s MBTA_Entry 0.775s cubic-bezier(.5,0,0,1) forwards;
}
#MysteryboxModal.show #MysteryBoxBottomAccent:before {
    animation: 0.75s MBBA_Entry 0.775s cubic-bezier(.5,0,0,1) forwards;
}
@keyframes MBTA_Entry {
	33% {
		clip-path: polygon(0% 33%, 23% 12%, 47% 10%, 70% 0%, 0% 0%);
	}
	66% {
		clip-path: polygon(0% 66%, 23% 53%, 47% 32%, 70% 0%, 0% 0%);
	}
	100% {
		clip-path: polygon(0% 100%, 23% 42%, 47% 57%, 70% 0%, 0% 0%);
	}
}
@keyframes MBBA_Entry {
	33% {
		clip-path: polygon(30% 100%, 53% 46%, 77% 16%, 100% 66%, 100% 100%);
	}
	66% {
		clip-path: polygon(30% 100%, 53% 16%, 77% 33%, 100% 33%, 100% 100%);
	}
	100% {
		clip-path: polygon(30% 100%, 53% 56%, 77% 43%, 100% 0%, 100% 100%);
	}
}






@keyframes floating {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0px);
	}
}



/* Tutorial Custom Styling */
div#driver-popover-item#driver-popover-item{
    background-color:var(--RaiseBase);
    color: var(--OnRaise);
    max-width: min(60vw, 80%, 80ch);
}
div#driver-popover-item#driver-popover-item .driver-popover-description.driver-popover-description{
    color: var(--OnLift);
}
div#driver-popover-item#driver-popover-item .driver-popover-footer.driver-popover-footer button{
    padding: 0.7rem 2rem;
    background-color: var(--LowerBase);
    text-shadow: none;
    color: var(--OnLower);
    font-size: 0.8rem;
    font-family:'Chakra Petch','Open-Sans','Raleway','Lato';
}

@media (max-width: 700px){
    html{
        --AssetSize: 3.5em;
    }
  	.modal-dialog {
    	max-width: 100%;
  	}
}
@media (max-width: 400px){

}
@media (min-width: 700px) {
  .modal-dialog {
    max-width: 80%;
  }

}
@media (min-width: 1200px) {
    .modal-dialog {
        max-width: 65%;
    }
    #HeaderDropdown{
        height:calc(100vh - 62px);
    }
    .modal-fullscreen-lg {
        padding: 0 !important;
    }
    .modal-fullscreen-lg .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-lg .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-lg .modal-body {
        overflow-y: auto;
    }
}


@media (max-width: 575.98px) {
:root{
    font-size:0.8em;
}
  .modal-fullscreen {
    padding: 0 !important;
  }
  .modal-fullscreen .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-sm {
    padding: 0 !important;
  }
  .modal-fullscreen-sm .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-md {
    padding: 0 !important;
  }
  .modal-fullscreen-md .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md .modal-body {
    overflow-y: auto;
  }
  .navbar .navbar-nav .nav-item .nav-link, .nav-item, .nav-link{
    padding: 2px;
    line-height:1.2em;
    margin:1px;
  }
}
.nav-item{
    font-size:1.25em;
}
.modal-fullscreen-xl {
  padding: 0 !important;
}
.modal-fullscreen-xl .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen-xl .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen-xl .modal-body {
  overflow-y: auto;
}
/*
Custom Switch;
*/
.switch label {
	cursor: pointer
}
.md-form label:not(.active){
    transform: translateY(-14px) scale(0.8);
    font-size:1rem;
}
.switch label input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0
}

.switch label input[type="checkbox"]:checked+.lever {
	background-color: #D09985
}

.switch label input[type="checkbox"]:checked+.lever:after {
	left: 1.5rem;
	background-color: var(--Primary);
}

.switch label input[type="checkbox"]:checked:not(:disabled)~.lever:active:after {
	-webkit-box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4), 0 0 0 0.9375rem rgba(255,144,104, 0.1);
	box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4), 0 0 0 0.9375rem rgba(255,144,104, 0.1)
}

.switch label input[type="checkbox"]:not(:disabled)~.lever:active:after {
	-webkit-box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4), 0 0 0 0.9375rem rgba(0, 0, 0, 0.08);
	box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4), 0 0 0 0.9375rem rgba(0, 0, 0, 0.08)
}

.switch label input[type="checkbox"]:disabled+.lever {
	cursor: default
}

.switch label input[type="checkbox"]:disabled+.lever:after,
.switch label input[type="checkbox"]:disabled:checked+.lever:after {
	background-color: #bdbdbd
}

.switch label .lever {
	position: relative;
	display: inline-block;
	margin: 0 1rem;
	margin-right: .625rem;
	vertical-align: middle;
	content: "";
	background-color: #818181;
	border-radius: .9375rem;
	width: 2.5rem;
	height: .9375rem;
	-webkit-transition: background 0.3s ease;
	transition: background 0.3s ease
}

.switch label .lever:after {
	position: absolute;
	top: -.1875rem;
	left: -.3125rem;
	display: inline-block;
	content: "";
	background-color: #f1f1f1;
	border-radius: 1.3125rem;
	-webkit-box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4);
	box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4);
	width: 1.3125rem;
	height: 1.3125rem;
	-webkit-transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 1s ease;
	transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 1s ease;
	transition: left 0.3s ease, background 0.3s ease, box-shadow 1s ease;
	transition: left 0.3s ease, background 0.3s ease, box-shadow 1s ease, -webkit-box-shadow 1s ease
}



/* BS4 Grid XXL breakpoint */

/* adding col-xxl */
.col-xxl, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 1570px){
    /* expanding BS4 max-width */
    .container {max-width: 1540px;}

    /* grid columns xxl */
    .col-xxl {-ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;}
    .col-xxl-auto {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none;}
    .col-xxl-1 {-webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%;}
    .col-xxl-2 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;}
    .col-xxl-3 {-webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
    .col-xxl-4 {-webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
    .col-xxl-5 {-webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%;}
    .col-xxl-6 {-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .col-xxl-7 {-webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%;}
    .col-xxl-8 {-webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;}
    .col-xxl-9 {-webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}
    .col-xxl-10 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;}
    .col-xxl-11 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;}
    .col-xxl-12 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;}

    /* order xxl */
    .order-xxl-0 {-webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0;}
    .order-xxl-1 {-webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;}
    .order-xxl-2 {-webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;}
    .order-xxl-3 {-webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3;}
    .order-xxl-4 {-webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4;}
    .order-xxl-5 {-webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5;}
    .order-xxl-6 {-webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6;}
    .order-xxl-7 {-webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7;}
    .order-xxl-8 {-webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8;}
    .order-xxl-9 {-webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9;}
    .order-xxl-10 {-webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10;}
    .order-xxl-11 {-webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11;}
    .order-xxl-12 {-webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12;}

    /* text-align xxl */
    .text-xxl-center {text-align: center!important;}
    .text-xxl-left {text-align: left!important;}
    .text-xxl-right {text-align: right!important;}

    /* float xxl */
    .float-xxl-left {float: left!important;}
    .float-xxl-right {float: right!important;}
    .float-xxl-none {float: none!important;}

    /* display xxl */
    .d-xxl-none {display: none!important;}
    .d-xxl-inline {display: inline!important;}
    .d-xxl-inline-block {display: inline-block!important;}
    .d-xxl-block {display: block!important;}
    .d-xxl-table {display: table!important;}
    .d-xxl-table-cell {display: table-cell!important;}
    .d-xxl-table-row {display: table-row!important;}
    .d-xxl-flex {display: flex!important;}
    .d-xxl-inline-flex {display: inline-flex!important;}

    /* offsets xxl */
    .offset-xxl-1 {margin-left: 8.333333%;}
    .offset-xxl-2 {margin-left: 16.666667%;}
    .offset-xxl-3 {margin-left: 25%;}
    .offset-xxl-4 {margin-left: 33.333333%;}
    .offset-xxl-5 {margin-left: 41.666667%;}
    .offset-xxl-6 {margin-left: 50%;}
    .offset-xxl-7 {margin-left: 58.333333%;}
    .offset-xxl-8 {margin-left: 66.666667%;}
    .offset-xxl-9 {margin-left: 75%;}
    .offset-xxl-10 {margin-left: 83.333333%;}
    .offset-xxl-11 {margin-left: 91.666667%;}

    /* spacing xxl */
    .m-xxl-0{margin:0!important}.mt-xxl-0,.my-xxl-0{margin-top:0!important}.mr-xxl-0,.mx-xxl-0{margin-right:0!important}.mb-xxl-0,.my-xxl-0{margin-bottom:0!important}.ml-xxl-0,.mx-xxl-0{margin-left:0!important}.m-xxl-1{margin:.25rem!important}.mt-xxl-1,.my-xxl-1{margin-top:.25rem!important}.mr-xxl-1,.mx-xxl-1{margin-right:.25rem!important}.mb-xxl-1,.my-xxl-1{margin-bottom:.25rem!important}.ml-xxl-1,.mx-xxl-1{margin-left:.25rem!important}.m-xxl-2{margin:.5rem!important}.mt-xxl-2,.my-xxl-2{margin-top:.5rem!important}.mr-xxl-2,.mx-xxl-2{margin-right:.5rem!important}.mb-xxl-2,.my-xxl-2{margin-bottom:.5rem!important}.ml-xxl-2,.mx-xxl-2{margin-left:.5rem!important}.m-xxl-3{margin:1rem!important}.mt-xxl-3,.my-xxl-3{margin-top:1rem!important}.mr-xxl-3,.mx-xxl-3{margin-right:1rem!important}.mb-xxl-3,.my-xxl-3{margin-bottom:1rem!important}.ml-xxl-3,.mx-xxl-3{margin-left:1rem!important}.m-xxl-4{margin:1.5rem!important}.mt-xxl-4,.my-xxl-4{margin-top:1.5rem!important}.mr-xxl-4,.mx-xxl-4{margin-right:1.5rem!important}.mb-xxl-4,.my-xxl-4{margin-bottom:1.5rem!important}.ml-xxl-4,.mx-xxl-4{margin-left:1.5rem!important}.m-xxl-5{margin:3rem!important}.mt-xxl-5,.my-xxl-5{margin-top:3rem!important}.mr-xxl-5,.mx-xxl-5{margin-right:3rem!important}.mb-xxl-5,.my-xxl-5{margin-bottom:3rem!important}.ml-xxl-5,.mx-xxl-5{margin-left:3rem!important}
    .p-xxl-0{padding:0!important}.pt-xxl-0,.py-xxl-0{padding-top:0!important}.pr-xxl-0,.px-xxl-0{padding-right:0!important}.pb-xxl-0,.py-xxl-0{padding-bottom:0!important}.pl-xxl-0,.px-xxl-0{padding-left:0!important}.p-xxl-1{padding:.25rem!important}.pt-xxl-1,.py-xxl-1{padding-top:.25rem!important}.pr-xxl-1,.px-xxl-1{padding-right:.25rem!important}.pb-xxl-1,.py-xxl-1{padding-bottom:.25rem!important}.pl-xxl-1,.px-xxl-1{padding-left:.25rem!important}.p-xxl-2{padding:.5rem!important}.pt-xxl-2,.py-xxl-2{padding-top:.5rem!important}.pr-xxl-2,.px-xxl-2{padding-right:.5rem!important}.pb-xxl-2,.py-xxl-2{padding-bottom:.5rem!important}.pl-xxl-2,.px-xxl-2{padding-left:.5rem!important}.p-xxl-3{padding:1rem!important}.pt-xxl-3,.py-xxl-3{padding-top:1rem!important}.pr-xxl-3,.px-xxl-3{padding-right:1rem!important}.pb-xxl-3,.py-xxl-3{padding-bottom:1rem!important}.pl-xxl-3,.px-xxl-3{padding-left:1rem!important}.p-xxl-4{padding:1.5rem!important}.pt-xxl-4,.py-xxl-4{padding-top:1.5rem!important}.pr-xxl-4,.px-xxl-4{padding-right:1.5rem!important}.pb-xxl-4,.py-xxl-4{padding-bottom:1.5rem!important}.pl-xxl-4,.px-xxl-4{padding-left:1.5rem!important}.p-xxl-5{padding:3rem!important}.pt-xxl-5,.py-xxl-5{padding-top:3rem!important}.pr-xxl-5,.px-xxl-5{padding-right:3rem!important}.pb-xxl-5,.py-xxl-5{padding-bottom:3rem!important}.pl-xxl-5,.px-xxl-5{padding-left:3rem!important}
    .m-xxl-auto{margin:auto!important}.mt-xxl-auto,.my-xxl-auto{margin-top:auto!important}.mr-xxl-auto,.mx-xxl-auto{margin-right:auto!important}.mb-xxl-auto,.my-xxl-auto{margin-bottom:auto!important}.ml-xxl-auto,.mx-xxl-auto{margin-left:auto!important}
}