@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100;300;400;600;700&display=swap');

html {height: 100%;}

:root {
    --color-primary: #2E3192;
    --color-secondary: #56585D;
    --color-light: #fff;
    --color-light-gray: #BABABB;
    --color-medium-gray: #999999;
    --color-dark-gray: #252528;
    --color-bg-dark: #1A1A1D;
    --color-bg-light: #f8f8f8;
    --border-radius: 6px;
    --module-spacing: 90px;
}

@media only screen and (max-width:991px) {
    :root {
        --module-spacing: 30px;
    }
}

.color-primary      {color:#F6BA25}
.color-secondary    {color:#56585D}
.color-medium-gray  {color:#999;}

div, span, ul, li, p, h1, h2, h3, h4, h5, h6, a {font-family: 'Commissioner', sans-serif !important;}
a, a:hover, a:visited                           {color:inherit !important; text-decoration: none !important;}

/* content */
.gray-pane                                                  {background-color:#f6f6f6;}

.button-primary                                             { border-radius: var(--border-radius); border: solid 1px var(--color-primary); position:relative; padding:6px 20px 8px 20px; background-color:var(--color-primary); color:var(--color-light) !important; font-weight:600; transition: all 0.3s ease-in-out;}
.button-primary:hover                                       { background-color:var(--color-light); color:var(--color-primary) !important}
.button-primary-invert                                      { border-radius: var(--border-radius); border: solid 1px var(--color-primary); position:relative; padding:6px 20px 8px 20px; background-color:var(--color-light); color:var(--color-primary); font-weight:600; transition: all 0.3s ease-in-out;}
.button-primary-invert:hover                                { background-color:var(--color-primary); color:var(--color-light) !important}

/* language selector */
.language-object                                            { position: relative;}
select#dnn_dnnLANGUAGE_selectCulture                        { padding: 12px 16px 12px 40px; }
img.menu-flag                                               { position:absolute; top:14px; left:10px; }

/* menu classes */
/* menu */
#dnn_dnav                                           {margin:0; padding:0;}
/* root level */
.MenuItem0                                          {list-style:none; padding:15px 0; margin-right:35px; font-weight:600;}
.MenuItem0 > a,
.MenuItem0 > i::before                              {color:var(--color-secondary) !important; transition: all 0.3s ease-in-out; }
.MenuItem0:hover > a,
.MenuItem0:hover > i::before                        {color:var(--color-primary) }
.MenuItem0.active                                   {color:var(--color-primary)}
.MenuItemSub                                        {position:absolute; z-index:-99; min-width:250px; background-color:var(--color-light); padding:0; box-shadow: 0 10px 20px rgba(0,0,0,0.14)}
.MenuItem0 > .MenuItemSub                           {max-height:0px; overflow: hidden; margin:20px 0 0 0; transition: all 0.3s ease-in-out; opacity:0; }
.MenuItem0:hover > .MenuItemSub                     {z-index:999; opacity:1; overflow:initial; margin:5px 0 0 0; max-height:500px;}

/* first level */
.MenuItem1                                          {position:relative; }
.MenuItem1 > a                                      {display:inline-block !important}
.MenuItem1 > i                                      {float:right; position:relative; top:5px;}
.MenuItemSub li                                     {list-style:none; display:block; padding:8px 25px; transition: all 0.3s ease-in-out; }
.MenuItemSub li > a                                 {color:var(--color-secondary) !important; font-weight:400; display:block; transition: all 0.3s ease-in-out;}
.MenuItemSub li:hover                               {background-color:rgba(0,0,0,0.05); box-shadow: 5px 0 0 0 var(--color-primary) inset; }
.MenuItemSub li:hover > a                           {color:var(--button-color)}
.MenuItemSub i                                      {color:var(--button-color-2)}
.MenuItem1 > .MenuItemSub                           {left:100%; top:0; margin:0; opacity:0; max-height:0; overflow:hidden;}
.MenuItem1:hover > .MenuItemSub                     {opacity:1; max-height:500px; overflow: auto;}
/* mobile menu */
.mobile-menu-trigger                            {color: var(--color-secondary); padding: 10px; display:inline-block; font-size:24px;}
.offcanvas                                      {background-color: var(--color-primary) !important; width:600px !important; max-width:80%; z-index: 9999;}
.mobile-menu .display-4                         {text-decoration:none !important; padding:10px 0; display:block;}
.mobile-menu .display-4 span                    {color:#fff;}
/* header styles */
.menu-container                     { position:relative; }
.header-section                     { position:relative; z-index:999; }
.header-logo-container              { max-height:110px; text-align: center; }
.header-logo                        { object-fit: cover; width:auto; height:110px; margin:auto;}
.header-top                         { border-bottom: solid 2px var(--color-bg-light); padding:15px 0;}
/* footer */
.footer                                                 { background-color: #000243;}
select#dnn_dnnFOOTERLANGUAGE_selectCulture              { padding: 12px 16px 12px 40px; }

@media only screen and (max-width: 991px) {
    .header-section                                     { padding-top: 3px; }
    select#dnn_dnnLANGUAGE_selectCulture                { padding: 6px 6px 6px 30px; }
    img.menu-flag                                       { top:8px; left:4px; }
}

@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1440px !important;
    }
}

/* light theme */
.home-container.light .root-menu .menu-item > a span    { color: var(--color-bg-dark) }
.home-container.light .mobile-menu-trigger              { color: var(--color-bg-dark) }


.app-mobius5-wrapper  {
max-width: 100% !important;
background-color:#fff;
padding: 35px;
border-radius: var(--border-radius);
overflow:hidden;
box-shadow: 0 0 25px rgba(0,0,0,0.375);
z-index:99;
position:relative;
}
.app-mobius5-wrapper button.btn {
border-radius: var(--border-radius);
border: solid 1px var(--color-primary);
position:relative; padding:6px 20px 8px 20px; 
background-color:var(--color-primary);
color:var(--color-light) !important;
font-weight:600;
transition: all 0.3s ease-in-out;
}
.app-mobius5-wrapper button.btn:hover {
background-color:var(--color-light);
color:var(--color-primary) !important
}