/* ######################## */
/* # Hero                 # */
/* ######################## */
.herocontainer                                              {width:100%; min-height:560px; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 17%),url('/Images/Header/Pattern-LightBlue.png?1=1'); background-attachment: fixed; background-size: contain cover; background-position: center; background-repeat: no-repeat; padding:0px; z-index:2; position:relative; display:flex; align-items: center; justify-content: center;}
.herologo                                                   {width:400px; }
.herocontainer .stamp                                       {z-index:1000; position:absolute; transform:translate(0, 0) rotate(-15deg) scale(20); opacity:0;transition:opacity 0.3s ease-in 1.5s, transform 0.3s ease-in 1.5s;}
.stampintoview                                              {opacity:1 !important; transform:translate(55px, 160px) rotate(-12deg) scale(0.7) !important; }

/* iPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .herocontainer {background-attachment:scroll;}
  }
/* iPad Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .herocontainer {background-attachment:scroll;}
}

select:disabled {background-color: #e9ecef;color: #6c757d;cursor: not-allowed;opacity: 1;}
input:disabled {background-color: #e9ecef;color: #6c757d;cursor: not-allowed;opacity: 1;}

.loadingicon                                                  {width:70px;}

/* ######################## */
/* # Alert/Popup          # */
/* ######################## */
#alertbg					                                            {font-size:15px; position: fixed;left: 0px;top: 0px; z-index:1000; background-color:rgba(0, 0, 0, 0.7); width:100%; height:100%; border:0px red solid; text-align:center; display:flex; align-items:center; justify-content: center;}
#alertbox_data        				                                {position: fixed;left: auto; top:50px; max-height:calc(90vh - 50px); overflow-y:auto; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
#alertboxtitle_data       			                              {border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
#alertboxmessage_data                                         {border:0px green solid; text-align:center;padding:10px 20px 20px 20px; }
#alertboxbuttons_data         		                            {border-top:1px silver solid;}
#alertbox_data td         			                              {text-align:center;}
#alertbox_data .leftbutton        	                          {border-right:1px solid silver; cursor:pointer; padding:20px;}
#alertbox_data .rightbutton	                                  {cursor:pointer; padding:20px;}

/* ######################## */
/* # Welcome Bar          # */
/* ######################## */
.welcome                                                {display:flex; justify-content: space-between;}
.welcome .leftsection                                   {border:0px red solid; width:60px; height:100%; display:flex; align-items: center; justify-content:flex-start; padding-left:15px;}
.welcome .midsection                                    {border:0px red solid; width:auto; height:100%; display:flex; align-items: center; justify-content:center; text-align: center;}
.welcome .rightsection                                  {border:0px red solid; width:60px; height:100%; display:flex; align-items: center; justify-content:flex-end; padding-right:15px;}


/* ######################## */
/* # Body                 # */
/* ######################## */
.body                                                         {padding:0px; display:flex; flex-direction: column; align-items: center; justify-content: flex-start; border:px red solid}
.cta                                                          {border:0px blue solid; text-align: center; padding:10px 10px 20px 30px;}
#categoryanchor                                               {visibility:hidden; border:1px red solid; height:50px; width:100px; position:absolute; transform: translateY(-130px);}
.categories                                                   {border:0px red solid;text-align: left; padding:20px 0px 20px 0px; width:1000px; margin-left:0; margin-right:0; position:relative}
.categories .category                                         {border:0px blue solid; display:flex; flex-direction: row; gap:20px; margin-bottom:100px}
.categories .category.odd                                     {flex-direction: row-reverse;}
.categories .category .image                                  {border:0px red solid; padding:0px; width:30%}
.categories .category .text                                   {border:0px blue solid; padding:0 30px 0 30px; width:65%; text-align: center;}
.categories .categoryimage                                    {width:100%; border:0px solid silver; border-radius: 10px; padding:0px;}
.categories .category .text h3                                {margin-top:0;}

.statscontainer                                               {background-color:white; width:100vw; display:flex; justify-content: center; margin:50px 0 50px 0;background-image:url('/Images/Backgrounds/Background-Confetti-Gold.png'); background-size:300px; flex-wrap: wrap;}
.stats                                                        {width:1000px; border:0px blue solid; text-align: center; padding:50px 10px 50px 10px; display:flex; flex-wrap: wrap; flex-direction:row; align-items: center; justify-content:space-evenly; gap:50px;}
.stats .iconcontainer                                         {margin-bottom:10px}
.stats h1                                                     {font-size:3rem; font-weight: 300; margin:0; border:0px red solid; line-height: 3rem;}
.stats p                                                      {margin:0;  border:0px red solid; font-weight:400}
.stat                                                         {border:0px red solid; width:190px; background-color:white;}
.statsfooter                                                  {border:0px red solid; text-align: center; background-color:rgba(255, 255, 255, 1); padding:10px; max-width:1000px}
.statsfooter h2                                               {padding:0px; margin:0;}

/* ######################## */
/* # Tabs                 # */
/* ######################## */
.tabs                                                         {display:flex; justify-content: space-evenly;}
.tabbody                                                      {display:flex; flex-direction: column; align-items: center; border:0px red solid; width:100%; max-width:auto; padding:20px 0 0 0px;}
.tabbody.upload                                               {height:auto;}
.tabbody.upload h2                                            {}

/* ######################## */
/* # File Upload          # */
/* ######################## */
::selection                                                   {color: #fff;background: #6990F2;}
.fileupload .field                                            {position:relative; border:0px red solid; padding-bottom:3px;}
.fileupload .uploadicon                                       {width:300px; height:auto}
.fileupload .content                                          {border:0px red solid; height:calc(100% - 100px); overflow-x:auto; overflow-y:auto; padding:0; display:flex; scroll-snap-type:x mandatory; -webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;}
.fileupload .content::-webkit-scrollbar                       {display: none;}
.fileupload li                                                {list-style: none;}
.fileupload .progress-area .row .uploadcontent                {width: 100%;}
.fileupload .progress-area .details                           {display: flex;align-items: center;margin-bottom: 7px;justify-content: space-between;}
.fileupload .progress-area .uploadcontent .progress-bar       {height:6px;width:100%;margin-bottom: 4px;background: #fff;border-radius: 30px}
.fileupload .uploadcontent .progress-bar .progress            {height: 100%;width: 0%;background: #6990F2;border-radius: inherit;}
.fileupload .uploaded-area                                    {max-height: 232px; overflow-y: scroll;}
.fileupload .uploaded-area.onprogress                         {max-height: 150px;}
.fileupload .uploaded-area::-webkit-scrollbar                 {width: 0px;}
.fileupload .uploaded-area .row .uploadcontent                {display: flex;align-items: center;}
.fileupload .uploaded-area .row .details                      {display: flex;margin-left: 15px;flex-direction: column; width:100%; justify-content: center;}
.fileupload .uploaded-area .row .details .size                {color: #404040;font-size: 11px;}
.fileupload .uploaded-area i.fa-check                         {font-size: 16px;}

/* ######################## */
/* # Upload CTA           # */
/* ######################## */
.uploadctacontainer                                           {margin-left: calc(50% - 50vw); min-height:300px; width:100vw; margin-bottom:70px; color:white; background-color:#1c6991; display:flex; flex-direction: column; padding:30px 0 30px 0; align-items:center; justify-content: center;background-image:url('/Images/Header/Pattern-Grey-25.png'); background-attachment: fixed; background-size:  cover; background-position: center; background-repeat: no-repeat; }
.uploadctacontainer h1                                        {font-weight:400; margin-bottom:0; margin-top:0;}
.uploadctacontainer p                                         {width:100%; max-width:1000px; text-align: center;}

/* ######################## */
/* # Popups               # */
/* ######################## */
.popup                                                        {width:1000px; background-color:white; position:fixed; bottom:0; margin-bottom:0px; border-radius: 20px 20px 0 0; z-index:20; box-shadow: 0px 0px 10px 1px #b4b3b3; transition: transform 0.5s ease-in-out 0s; overflow:hidden;}
.popup .header                                                {display:flex; align-items: center; justify-content: space-between;; border-bottom:1px solid var(--lightgrey); background-color:white; padding:10px 15px 10px 15px; margin:0;}
.popup .header h2                                             {padding:0; margin:0;}
.popup .header .icon                                          {width:20px; height:20px; cursor:pointer}                
.popup .content                                               {padding:5px 20px 20px 20px;}
.popupbackground                                              {position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:rgba(0, 0, 0, 0.481); z-index:16; display:none; opacity:0; transition: opacity 0.5s}
.popup .searchfield                                           {padding:10px; border-radius: 10px; width:100%; border:1px solid grey}
.popup .infoicon                                              {width:15px; height:15px; margin-right:5px; cursor:pointer;}

/* ######################## */
/* # Upload Fields        # */
/* ######################## */
#divFileUploadBefore .headercontainer                         {display:grid; grid-template-columns: 50% 50%; padding-bottom:10px;margin-bottom:0px; }
#divFileUploadBefore .competitioncontainer                    {grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 1;}
#divFileUploadBefore .typecontainer                           {grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 2;}
#divFileUploadBefore .namecontainer                           {grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 3;}
#divFileUploadBefore .locationcontainer                       {grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 4;}
#divFileUploadBefore .datecontainer                           {grid-column-start: 1; grid-column-end: 1; grid-row-start: 5; grid-row-end: 5;}
#divFileUploadBefore .countrycontainer                        {grid-column-start: 2; grid-column-end: 2; grid-row-start: 5; grid-row-end: 5;}
#divFileUploadBefore .moreinfocontainer                       {grid-column-start: 1; grid-column-end: 3; grid-row-start: 6; grid-row-end: 6;}
#divFileUploadBefore .buttoncontainer                         {grid-column-start: 1; grid-column-end: 4; grid-row-start: 7; grid-row-end: 7;}

/* ########################### */
/* # Resource Search         # */
/* ########################### */
#divResourceRolesContainer                                    {width:100%; max-width:1000px; padding:5px 2px 5px 2px; min-height:130px}
#divResourceRolesContainer                                    {display:flex; justify-content:flex-start; flex-wrap:nowrap; gap:10px; width:100%; max-width:1000px; overflow-x:auto; overflow-y: hidden;}
#divResourceRolesContainer .category                          {flex-grow:0; flex-shrink:0; cursor:pointer; border:1px #eff1f4 solid; width:calc(25% - 8px); height:115px; border-radius: 10px; position:relative; text-align:center; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.226); overflow:hidden; padding:0px;}
#divResourceRolesContainer .hdr                               {background-image:url('/Images/Header/CategoryPattern.png'); background-size: cover; background-position:center; background-repeat: no-repeat;}
#divResourceRolesContainer .hdr                               {width:100%; border:0px red solid; height:75px; display:flex; justify-content:flex-start; align-items:flex-end; padding:10px; color:white; font-weight: 600; font-size:1.2rem}
#divResourceRolesContainer .ftr                               {border:0px blue solid; height:30px; width:100%; text-align:left; padding:10px 10px 0px 40px; background-image:url('/Images/Icons/Bookx3.png'); background-size:20px; background-position: 10px 10px; background-repeat: no-repeat; color:gray; font-size:0.8rem}
#divResourceRolesContainer::-webkit-scrollbar           {display: none;}

#divResourceDisciplinesContainer                              {width:100%; max-width:1000px; padding:5px 2px 5px 2px; min-height:130px}
#divResourceDisciplinesContainer                              {display:flex; justify-content:flex-start; flex-wrap:nowrap; gap:10px; width:100%; max-width:1000px; overflow-x:auto; overflow-y: hidden;}
#divResourceDisciplinesContainer .category                    {flex-grow:0; flex-shrink:0; cursor:pointer; border:1px #eff1f4 solid; width:calc(25% - 8px); height:115px; border-radius: 10px; position:relative; text-align:center; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.226); overflow:hidden; padding:0px;}
#divResourceDisciplinesContainer .hdr                         {background-image:url('/Images/Header/CategoryPattern.png'); background-size: cover; background-position:center; background-repeat: no-repeat;}
#divResourceDisciplinesContainer .hdr                         {width:100%; border:0px red solid; height:75px; display:flex; justify-content:flex-start; align-items:flex-end; padding:10px; color:white; font-weight: 600; font-size:1.2rem}
#divResourceDisciplinesContainer .ftr                         {border:0px blue solid; height:30px; width:100%; text-align:left; padding:10px 10px 0px 40px; background-image:url('/Images/Icons/Bookx3.png'); background-size:20px; background-position: 10px 10px; background-repeat: no-repeat; color:gray; font-size:0.8rem}

.resourcediscipline-slider                                    {position: relative;width: 100%;max-width: 1000px;min-width: 0;box-sizing: border-box;padding: 0;}
.resourcediscipline-slider .resourcediscipline-slider-track   {display: flex;flex-wrap: nowrap;justify-content: flex-start;gap: 10px;width: 100%;min-width: 0;box-sizing: border-box;overflow-x: auto;overflow-y: hidden;scrollbar-width: none;}
.resourcediscipline-slider-track::-webkit-scrollbar           {display: none;}
.resourcediscipline-slider-track > div                        {flex-shrink: 0}
.resourcediscipline-slider-arrow                              {position: absolute;top: 50%;transform: translateY(-50%);z-index: 1;display: flex;align-items: center;justify-content: center;width: 25px;height: 40px;padding: 0;border: 1px solid #dce0e5;border-radius: 3px;background: white;color: #444;font-size: 20px;cursor: pointer;box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);}
.resourcediscipline-slider-arrow                              {visibility: hidden;}
.resourcediscipline-slider-prev                               {left: -30px}
.resourcediscipline-slider-next                               {right: -30px;}
.resourcediscipline-slider-arrow:hover                        {background: #eff1f4;}
.resourcediscipline-slider-arrow:focus-visible                {outline: 2px solid #555;outline-offset: 2px}


#divResourceSearchResultsContainer                            {display:flex; justify-content:flex-start; flex-wrap: wrap; gap:13px; width:100%; max-width:1000px}
#divResourceSearchResultsContainer .resource                  {cursor:pointer; border:1px #eff1f4 solid; width:230px; border-radius: 10px; position:relative; text-align:center; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.226); overflow:hidden;}
#divResourceSearchResultsContainer .info                      {border:0px purple solid; border-top:1px silver; width:100%; height:180px; padding:30px 10px 10px 10px}
#divResourceSearchResultsContainer .thumbnail                 {position: relative;width: 100%;height:160px;overflow: hidden;background-size: 0 0;background-repeat: no-repeat; border-bottom:1px var(--lightgrey) solid;}
#divResourceSearchResultsContainer .thumbnail::before         {content: "";position: absolute;inset: 0;background-image: inherit;background-size: cover;background-position: center;background-repeat: no-repeat;transition: transform 0.3s ease;pointer-events: none;}
#divResourceSearchResultsContainer .thumbnail:hover::before   {transform: scale(1.02);}
#divResourceSearchResultsContainer .thumbnail > *             {position: relative;z-index: 1;}
#divResourceSearchResultsContainer .info .author              {font-size:0.7rem; margin-top:5px;}
#divResourceSearchResultsContainer .info .title               {font-weight: 600; margin-top:10px;}
#divResourceSearchResultsContainer .info .title               {line-height: 1rem; max-height: 2rem; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
#divResourceSearchResultsContainer .info .price               {font-weight: normal; margin:10px 0 5px 0;}
#divResourceSearchResultsContainer .date                      {font-size:0.7rem; color:gray}
#divResourceSearchResultsContainer .flag                      {width:45px; height:20px; position:absolute; bottom:10px; right:0px; z-index: 1;}
#divResourceSearchResultsContainer .iconcontainer             {position:absolute; bottom:10px; left:5px; display:flex; gap:5px;}
#divResourceSearchResultsContainer .savedicon                 {width:20px; height:20px; }
#divResourceSearchResultsContainer .downloadicon              {width:20px; height:20px; }


#divResourceSearchResultsContainer .profilepic                {width:40px; height:40px; background-color:white; border:0px white solid; border-radius: 50%; overflow:hidden;box-shadow: 0px 3px 5px 0px #88888858; position:absolute; top:145px; left:50%; transform: translateX(-50%); z-index: 1;}
#divResourceSearchResultsContainer .profileimg                {width:100%; height:100%;}
#divResourceSearchResultsContainer .profilepic.plain          {width:40px; height:40px; background-color:transparent; border:0px white solid; border-radius: 50%; overflow:visible;box-shadow:none; position:absolute; top:145px; left:50%; transform: translateX(-50%); z-index: 1;}
#divResourceSearchResultsContainer .profileimg.plain          {width:100%; height:100%;}
#divResourceSearchResultsContainer .noresults                 {text-align:center; width:100%; margin-bottom:20px;}
#divResourceSearchResultsContainer .StarRating                {position: relative;display: inline-block;font-family: Arial, sans-serif;font-size: 24px;line-height: 1;white-space: nowrap;color: #d5d5d5;}
#divResourceSearchResultsContainer .StarRatingFill            {position: absolute;top: 0;left: 0; width: clamp(0%, calc(var(--rating) * 20%), 100%); overflow: hidden;color: #ffb400}
#divResourceSearchResultsContainer .StarRatingValue           {font-size:0.7rem; color:gray}

#divResourceSearchUploadContainer .uploadresources            {text-align:center; padding:20px; border:1px dashed silver; margin-top:20px; border-radius: 10px;}
#divResourceSearchUploadContainer .uploadresources h2         {margin-top:0;}

#divResourceSearchResultsAnchor                               {position:relative; transform: translateY(-135px);}

/* ######################## */
/* # Resource Filter      # */
/* ######################## */
.resourcefiltercontainer                                      {padding-bottom:0px; gap:10px; justify-content: space-between; flex-wrap: wrap; position:relative; display:flex;}
.resourcefiltercontainer #cboResourceSearch_Discipline        {width:calc(50% - 5px)}
.resourcefiltercontainer #cboResourceSearch_Age               {width:calc(50% - 5px)}
.resourcefiltercontainer #cboResourceSearch_Country           {width:calc(50% - 5px)}
.resourcefiltercontainer #cboResourceSearch_Year              {width:calc(50% - 5px)}

/* ######################## */
/* # Search Box           # */
/* ######################## */
.searchbrowsecontainer                                        {display:flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color:rgb(243, 243, 243, 0); height:auto; min-height:calc(100vh - 153px); box-sizing: border-box;border:0px red solid; width:100%; padding:20px 20px 0 20px;}
.searchbrowsecontainer .searchbox                             {border:1px solid #eff1f4; background-color:white; border-radius: 10px; width:100%; max-width:1000px; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.226); text-align: center; padding:0px 50px 30px 50px;background-image:url('/Images/Header/Pattern-grey-25.png'); background-attachment:fixed; background-size: contain cover; background-position: center; background-repeat: no-repeat;}
.searchbrowsecontainer .searchfield                           {background-color:white; max-width:500px; background-image: url('/Images/Icons/search.png'); background-position: left center; background-position: 5px center; background-repeat: no-repeat; background-size:20px; padding-left:30px; outline: 1px solid white;}
.searchbrowsecontainer .resultsbox                            {padding:20px;border:1px solid #eff1f4; background-color:white; border-radius: 10px; width:100%; max-width:1000px; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.226); text-align: center; padding:20px 20px 20px 20px;background-image:url('/Images/Header/Pattern-grey-25.png'); background-attachment: fixed; background-size: contain cover; background-position: center; background-repeat: no-repeat;}
.searchbrowsecontainer .resultsbox th, td                     {text-align:left;}
.searchbrowsecontainer .resultsbox td a                       {text-decoration: underline; color:blue;}
.searchbrowsecontainer .resultsbox td a:visited               {text-decoration: underline; color:purple;}
.searchbrowsecontainer .resultsbox .flag                      {height:15px; width:auto}
.searchbrowsecontainer .resultsbox .headericon                {height:15px; width:auto}
.searchbrowsecontainer .resultsbox .viewall                   {margin-top:10px;}
.searchbrowsecontainer .searchresults                         {width:100%; max-width:1000px; display:flex; flex-direction: row; justify-content: space-between;  row-gap:10px; column-gap: 10px; margin-top:10px; flex-wrap: wrap; padding-bottom:30px; border:0px red solid}
.searchbrowsecontainer .searchresults h3                      {width:100%; margin:0px 0 0 0; padding:0;}
.searchbrowsecontainer .searchcategory                        {border:1px solid #eff1f4; cursor:pointer; background-color:white; border-radius: 10px; width:calc(25% - 10px); flex-shrink: 0; flex-grow: 0; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.226); text-align: center; padding:10px 10px 10px 10px;background-image:url('/Images/Header/Pattern-grey-25.png'); background-attachment: fixed; background-size: 1500px; background-position: top; background-repeat: repeat; display:flex; flex-direction: row; justify-content: flex-start; gap:5px}
.searchbrowsecontainer .searchcategory img                    {width:20px; height:20px;}
.searchbrowsecontainer .namesubtext                           {color:grey}
.searchbrowsecontainer .desktopcol                            {display:table-cell;}
.searchbrowsecontainer .mobilecol                             {display:none;}
.searchbrowsecontainer .resultsbox .desktop                   {display:;}
.searchbrowsecontainer .resultsbox .mobile                    {display:none;}

/* ######################## */
/* # MRU Popup            # */
/* ######################## */
.mrupopup                                                     {height:calc(100vh - 110px); transform: translateY(130%) translateX(-50%); overflow-y:hidden; left:50%;}
.mrupopup .searchresultscontainer                             {border:0px red solid; height:calc(100vh - 235px); overflow-y:auto;background-image:url('/Images/Icons/Pin.png'); background-size:60%; background-repeat: no-repeat; background-position:center center; background-color:rgba(255,255,255,0.98); background-blend-mode: lighten;padding-bottom:50px}
.mrupopup .field                                              {position:relative; border:0px red solid; padding-bottom:3px; width:100%}
.mrupopup .combo                                              {font-size:1rem; width:100%;-webkit-appearance: none; height:40px; border:1px solid gray; background-color: white;appearance: none;background-image: url('/Images/Backgrounds/Dropdown-Arrow.png');background-color: transparent;background-repeat: no-repeat;background-position: right;background-size: 20px;font-size:15px; color:black}
.mrupopup .searchresult                                       {border-bottom:1px var(--lightgrey) solid; width:100%; display:flex; flex-direction: row; gap:10px; padding:5px 0px 5px 0px; align-items: center; justify-content: space-between;}
.mrupopup .searchresult .membername                           {border:1px red solid; flex-grow: 1; }
.mrupopup .searchresult .buttons                              {border:1px red solid; width:100px display:flex; justify-content: flex-end; text-align:right}
.mrupopup .searchresult .friends                              {color:gray}
.mrupopup .searchresult .profilepic                           {box-shadow: 0px 0px 2px 0px #888888;border:2px white solid; width:80px; height:80px; border-radius: 50%; background-color:white; flex-shrink: 0; overflow:hidden; box-sizing: border-box;}
.mrupopup .searchresult .profilepic img                       {width:76px; height:76px;}
.mrupopup .searchresult .tick                                 {width:30px; padding-right:10px;}

.mrupopup .optiontabs                                         {min-width:100%; border:0px rgb(175, 175, 175) inset; background-color:var(--lightgrey); border-radius: 8px; padding:5px 0 5px 0px; display:flex; flex-direction: row; justify-content:stretch; gap:0px; overflow:hidden; position:relative;}
.mrupopup .optiontab                                          {height:100%; width:100%; border:0px red solid; border-radius: 8px; padding:2px; flex-grow: 1; position:relative; z-index:10; cursor:pointer;}
.mrupopup .selector                                           {background-color:white; height:calc(100% - 6px);  position:absolute; top:3px; left:3px; border-radius: 7px; box-shadow: 0px 0px 7px rgb(127, 127, 127); cursor:pointer; transition: transform 0.25s;}
.mrupopup .optiondivider                                      {width:1px; border-right:1px solid silver;}
.mrupopup .panels                                             {border:0px red solid; margin-top:0px; position:relative}
.mrupopup .panel                                              {border:0px blue solid; width:100%; height:calc(100vh - 200px); position:absolute; display:flex; flex-direction: row; gap:0; justify-content: space-evenly; flex-wrap: wrap; align-items: flex-start; overflow-y:hidden; padding:0;}
.mrupopup .panel p                                            {padding:0; margin:0 0 10px 0}
.mrupopup .content                                            {padding:10px 20px 0 20px; border:0px green solid; height:calc(100% - 110px)}
.mrupopup .content .icon                                      {width:20px; height:20px;}
.mrupopup .content .flag                                      {width:30px; height:15px;}
.mrupopup .content .desktop                                   {display:}
.mrupopup .content .mobile                                    {display:none}
.mrupopup .content .subtext                                   {color:gray; font-size:0.8rem}

/* ######################## */
/* # Thin Mobile          # */
/* ######################## */
/* (e.g. not portrait tablet) */
@media only screen and (max-width: 500px){ 
  #divResourceSearchResultsContainer                          {justify-content:space-evenly;}
  #divResourceSearchResultsContainer                          {gap:13px;}
  #divResourceSearchResultsContainer .resource                {width:100%}
  #divResourceSearchResultsContainer .thumbnail               {height:240px}
  #divResourceSearchResultsContainer .info                    {height:160px}
  #divResourceSearchResultsContainer .profilepic              {top:240px;}

}

/* ######################## */
/* # Mobile               # */
/* ######################## */
@media only screen and (max-width: 1000px){ 
    .herocontainer                                            {width:100%; height:350px; min-height:350px; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 20%),url('/Images/Header/Pattern-LightBlue.png?1=1'); background-attachment:scroll; background-size:cover ; background-position:center; background-repeat: no-repeat; padding:0px; z-index:; position:relative; display:flex; align-items: center; justify-content: center;}
    .herologo                                                 {height:250px; width:auto; }

    /* ######################## */
    /* # Body                 # */
    /* ######################## */    
    .cta                                                      {border:0px blue solid; text-align: center; padding:10px 20px 20px 20px}
    .cta h1                                                   {border:0px blue solid; margin-top:25px}
    #categoryanchor                                           {visibility:; border:1px red solid; height:50px; width:100px; position:absolute; transform: translateY(-120px);}
    .categories                                               {border:0px red solid;text-align: left; padding:0px 20px 20px 20px; width:100%}
    .categories h2                                            {text-align: center;}
    .categories .category                                     {border:0px blue solid; display:flex; flex-direction: column;margin-bottom:50px; gap:10px;text-align: center;display:flex; align-items: center; justify-content: center;}
    .categories .category.odd                                 {flex-direction: column}
    .categories .category .image                              {border:0px red solid; padding:0px; width:100%;max-width:300px;}
    .categories .category .text                               {border:0px red solid; padding:0px 0 0px 0; width:100%; text-align: center;}
    .categories .categoryimage                                {width:100%; max-width:500px; border:0px solid silver; border-radius: 10px;}
    .categories .category .text h3                            {margin-top:10px;}
    .categories .category .image h3                           {display:none;margin-bottom:0;}

    .stats                                                    {text-align:center; justify-content:space-evenly; gap:30px; padding:80px 10px 20px 10px;}
    .stats h1                                                 {font-size:2rem; font-weight: 300; line-height: 2rem;}
    .stats p                                                  {}
    .stat                                                     {width:100px; padding-bottom:30px}
  
    .stampintoview                                            {opacity:1 !important; transform:translate(45px,100px) rotate(-12deg) scale(0.5) !important; }

    .searchbrowsecontainer .searchbox                         {background-image:url('/Images/Header/Pattern-grey-25.png'); background-attachment:scroll; background-size: 1500px; background-position: top; background-repeat:no-repeat; padding:0px 20px 20px 20px}
    .searchbrowsecontainer .resultsbox                        {background-image:url('/Images/Header/Pattern-grey-25.png'); background-attachment:scroll; background-size: 1500px; background-position: top; background-repeat:no-repeat; padding:20px}
    .searchbrowsecontainer .resultsbox .desktop               {display:none;}
    .searchbrowsecontainer .resultsbox .mobile                {display:block;}    
    .uploadinfopopup .filescontainer .desktop                 {display:none;}    
    
    .searchbrowsecontainer .searchresults                     {row-gap:10px; column-gap: 10px; margin-top:0px; flex-wrap: wrap;}
    .searchbrowsecontainer .searchresults h3                  {margin:10px 0 0 0; }
    .searchbrowsecontainer .searchcategory                    {width:calc(50% - 5px); }
    .searchbrowsecontainer .actionbuttons                     {display:flex; justify-content: space-evenly;}
    .searchbrowsecontainer .desktopcol                        {display:none;}
    .searchbrowsecontainer .mobilecol                         {display:table-cell;}
    
    #divResourceSearchResultsAnchor                            {position:relative; transform: translateY(-100px);}
    #divResourceSearchResultsContainer                        {justify-content:center;}
    #divResourceRolesContainer .category                      {width:calc(40% - 8px);}
    #divResourceDisciplinesContainer .category                {width:calc(40% - 8px);}

    .mrupopup                                                 {max-width:100% !important; height:100% !important; border-radius: 0px !important; margin:0 !important;box-sizing: border-box !important; width:100% !important}
    .mrupopup .searchresultscontainer                         {background-size:90%;height:calc(100vh - 125px)}
    .mrupopup .panel                                          {height:calc(100vh - 120px);}
    .mrupopup .content .desktop                               {display:none}
    .mrupopup .content .mobile                                {display:table-cell}  
    .resourcediscipline-slider-arrow                              {display:none} 


}

/* ######################## */
/* # Thin Mobile          # */
/* ######################## */
/* (e.g. not portrait tablet) */
@media only screen and (max-width: 500px){ 
  #divResourceSearchResultsContainer                            {justify-content:space-evenly;}
  #divResourceSearchResultsContainer                            {gap:30px;}
  #divResourceSearchResultsContainer .resource                  {width:100%}
  #divResourceSearchResultsContainer .thumbnail                 {height:240px}
  #divResourceSearchResultsContainer .info                      {height:180px}

  #divResourceSearchResultsContainer .profilepic                {width:50px; height:50px;top:220px;}
  #divResourceSearchResultsContainer .profilepic.plain          {width:50px; height:50px;top:220px;}  

  #divResourceRolesContainer .category                          {width:calc(60% - 8px);}
  #divResourceDisciplinesContainer .category                    {width:calc(60% - 8px);}


}