/* the whole document */
html, body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    background-color: #CCCCCC;
    background-image: url(./images/bck_06.png);
    background-repeat: repeat;
}

/* normal tables */
table {
    font-size: 90%;
    border: 0;
}

/* normal labels */
label {
    color: #999999;
}

/* normal forms */
form {
    margin: 0;
}

image {
    border: 0;
    margin: 0;
    padding: 0;
}

#page_side_border {
    position: absolute;
    left: 50%;
    top: 25px;
    margin-left: -321px;
    width: 645px;
    text-align: left;
    background-image: url(./images/bigborder_07.png);
    background-repeat: repeat-y;
    padding: 0;
}

/* the page on the document */
#page {
    margin-left: 1px;
    width: 640px;
    text-align: left;
    background-color: #FFFFFF;
    padding: 0;
    border-right: 1px solid rgb(130,130,130);
    border-left: 1px solid rgb(130,130,130);
}

/* the rounded top corners of the page */
#topcorners {
    position: relative;
    margin-left: -1px;
    margin-right: -4px;
    width: 645px;
    height: 12px;
    background-image: url(./images/bck_gray_top_14.png);
    background-repeat: no-repeat;
}

/* the rounded bottom corners of the page */
#bottomcorners {
    position: relative;
    margin-left: -1px;
    margin-right: -4px;
    width: 645px;
    height: 15px;
    background: url(./images/bck_gray_bottom_06.png);
    background-position: bottom;
    background-repeat: no-repeat;
}

/* the rounded bottom corners of the page */
#bottomclubs {
    align: center;
    font-size: 14px;
    padding: -5px;
    margin: 10px 0;
}

/* the loginpage, the "paper" on the document */
#loginpage {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -190px;
    margin-top: -210px;
    width: 380px;
    /*    height:sclogoarea 420px;*/
    /*  text-align: center;*/
    background: url(./images/loginbck_box_03.png);
    /*    background-repeat: no-repeat;*/
    padding-top: 10px;
    /*  padding-bottom: 10px;*/
}

#getapppage {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 220px;
    margin-top: -210px;
    width: 200px;
    background: transparent;
    padding: 0;
}

#loginpage #loginpage_bottom{
    background: url(images/loginbck_box_03.png) bottom;
    padding: 0 10px 10px 10px;
}

/* the loginbox area on the login page */
#loginboxarea {
    /*height: 235px;*/  /*280px*/
}

/* the usable content of the loginbox */
#loginboxcontent {
    position: relative;  /* absolute */
    left: 150px;     /* 180 */
    top: 0px;        /* 130 */
    /*    text-align: center;   /*left*/*/
    color: #333333;
}

#loginkey{
    position: absolute;
    text-align: left
}

/* the messagebox area on the login page */
#messageboxarea {
    position: absolute;
    left: 400px;
    top: 1px;
    width: 213px;
    height: 419px;
    background-image: url(./images/messagebox_07.png);
    background-repeat: no-repeat;
}

/* the usable content of the messagebox */
#messageboxcontent {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 20px 20px 20px 40px;
    color: gray;
    text-align: left;
    width: 213px;
    height: 419px;
}

/* the messagebox with image area on the login page */
#messageboxareaimg {
    position: absolute;
    left: 400px;
    top: 1px;
    width: 213px;
    height: 419px;
}

#loginpage #btnLogin  {
    margin-top: 20px;
}

/* sportcenter's logo area of the page */
#sclogoarea {
    padding-top: 2px;
    padding-bottom: 4px;
    color: #333333;
    text-align: center;
}

/* sportcenter's name area on a normal page */
#scname {
    font-size: 130%;
    padding: 10px;
}

/* sportcenter's name area on the login page */
#loginpage #scname {
    font-size: 100%;
    padding: 5px;
}

/* area where loggedin username is displayed */
#usernamearea {
    padding-left: 5px;
    color: #666666;
    float: left;
    clear: none;
    text-align: left;
    font-size: xx-small;
}
#usernamearea.popscanpage {
    padding-left: 21px;
}

/* area where logout link is displayed */
#logoutarea {
    padding-right: 5px;
    float: right;
    text-align: right;
    font-size: xx-small;
    clear: right;
}

/* page logo */
#pagelogo {
    float: none;
    clear: both;
    overflow: hidden;
    height: 106px;
}

#pagelogo img {
    border-top: 2px solid #666666;
    border-bottom: 2px solid #777777;
}

/* title text of the whole page */
#pagetitle {
    color: #777777;
    font-weight: bold;
    font-size: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-bottom: 2px;
    background-color: #F6F6F6;
    /* background-color: #FF9900; */
}

/* the usable content, "main" area of the page */
#content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    clear: both;
}

#covid label{
    color: #000000;
}

/* fitman's logo area of any page */
#fmlogoarea {
    text-align: center;
    position: static;  /*relative;*/
    margin-left: 1px;
    margin-right: 1px;
    background-color: white;
}

/* fitman's logo area on the normal page (not on the login) */
#page #fmlogoarea {
    margin-top: 0;
}

/* fitman's logo area on the login page (not on the normal) */
#loginpage #fmlogoarea {
    margin-top: 0px;   /*-12*/
}

/* language selection area */
#langselector {	
    position: relative;
    left: 540px;
    top: -15px;
    font-size: 15px;
    color: #999999;
    width: 100px;
}
#langselector a:visited,
#langselector a:link,
#langselector a:active {
    color: #999999;
}
#langselector a:hover {
    color: #FF6600; 
}

.error {
    color: #FF0000;
}
/*//////////////////////////////////////////////////////////*/

/* container of admin's navigation buttons */
.adminnav {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-top: -20px;
    margin-left:  -20px;
    margin-right: -20px;
    width: 640px;
    height: 193px;	
    padding: 20px;	
    background-color: #F8F8F8;
    border-bottom: 1px dashed #CCCCCC;
}

.adminnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.adminnav li {
    float: left;
    margin-right: 28px;
}

/* manage activities button */
#btnManageActs {
    background-image: url(./images//btnManageActs_17.jpg);
    background-repeat: no-repeat;
}
#btnManageActs a {
    background-image: url(./images//btnManageActs_17.jpg);
    background-repeat: no-repeat;
    width: 180px;
    height: 140px;
    display: block;
}
#btnManageActs a:hover {
    background-image: url(./images//btnManageActs_17b.jpg);
    background-repeat: no-repeat;
}

/* configure schedule button */
#btnConfSched {
    background-image: url(./images//btnConfSched_12.jpg);
    background-repeat: no-repeat;
}
#btnConfSched a {
    background-image: url(./images//btnConfSched_12.jpg);
    background-repeat: no-repeat;
    width: 180px;
    height: 140px;
    display: block;
}
#btnConfSched a:hover {
    background-image: url(./images//btnConfSched_12b.jpg);
    background-repeat: no-repeat;
}

/* sportcenter settings button */
#btnScSettings {
    background-image: url(./images//btnScSettings_07.jpg);
    background-repeat: no-repeat;
    margin-right: 0;
}
#btnScSettings a {
    background-image: url(./images//btnScSettings_07.jpg);
    background-repeat: no-repeat;
    width: 180px;
    height: 140px;
    display: block;
}
#btnScSettings a:hover {
    background-image: url(./images//btnScSettings_07b.jpg);
    background-repeat: no-repeat;	
}

/* container of members's navigation buttons */
.membernav {
    float: none;
    clear: both;
    margin-top: -20px;
    margin-left:  -20px;
    margin-right: -20px;
    width: 640px;
    height: 314px;
    background-color: white;
    /* background-image: url(./images//gymcourt_642_03.jpg); */
    background-repeat: no-repeat;
    border-bottom: 1px dotted #CCCCCC;
    overflow: hidden;
}

.membernav ul {
    list-style: none;
    margin: 0;
    padding: 80px 0 0 0;
}

.membernav li {
    position: relative;
    left: 400px;
    top: 40px;
    margin-bottom: 40px;
}

.membernavbutton {
}
.membernavbutton a {
    width: 220px;
    /* height: 30px; */
    display: block;
    padding-left: 16px;
}
.membernavbutton a:hover {
    padding-left: 10px;
    border-left: 6px solid #FF9900;
}
.membernavbutton a:hover .navmain {
    color: #FF9900;
    font-weight: bold;
    font-style: normal;
}
.membernavbutton a:hover .navdesc {
    color: #666666;
}
.membernavbutton .navmain {
    font-size: 110%;
    color: #96CB18;
    font-weight: bold;
    font-style: normal;
}
.membernavbutton .navdesc {
    color: #999999;
    font-style: normal;
    font-size: 80%;
}

/*//////////////////////////////////////////////////////////*/

/* normal group boxes */
.groupbox {
    background-color: #F4F4F4;
    padding: 10px;
    color: #999999;
    border-left: 	 1px solid #DDDDDD;
    border-right:  1px solid #DDDDDD;
    border-top:		 none;
    border-bottom: 1px dashed #DDDDDD;	
}

/* first group of controls on the page right under the pagelogo */
.firstgroup {
    /* border-top: 1px solid #CCCCCC; */
}

/* last group of controls on the page right above the fmlogo */
.lastgroup {
    /* border-bottom: 1px dashed #CCCCCC; */
    border-bottom: 1px solid #CCCCCC;
}

/* labels on a groupbox */
.groupbox label {
    font-size: 85%;
    font-weight: bold;
    color: #888888;
}

/* links on a groupbox */
.groupbox a:visited,
.groupbox a:link,
.groupbox a:active {
    color: #3B7B09;
}
.groupbox a:hover {
    color: #FF6600;
}

/* horizontal line on a groupbox */
.groupbox hr {
    color: #CCCCCC;
    background-color: #CCCCCC;
    height: 1px;
    border: 0;
}

/* title text of page sections */
.sectiontitle {
    /* color: #6699FF; */
    /* color: #CCCCCC; */
    color: black;
    padding-top: 10px;
}

/* title text of control groups */ 
.grouptitle {
    margin-top: 15px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    /* background-image: url(./images//grouptitle_bck_03.jpg); */
    background-color: #F8F8F8;
    border-left: 	 1px solid #DDDDDD;
    border-right:  1px solid #DDDDDD;
    border-top:		 1px solid #DDDDDD;
    border-bottom: none;
    color: #8DC54C;	
    font-weight: bold;
}

/* normal edit boxes */
.editbox {
    /* color: #E07C1E; */
    color: black;
    border: 1px solid #888888;
    padding-left: 2px;
    font-family: Verdana, Arial, Helvetica, sans-serif
        /* font-weight: bold; */
}

.editboxReset {
    /* color: #E07C1E; */
    color: black;
    border: 1px solid #888888;
    padding-left: 2px;
    font-family: Verdana, Arial, Helvetica, sans-serif
        /* font-weight: bold; */
}

#loginpage .editboxReset {
    font-size: 70%;
    font-weight: bold;
    color: #E07C1E;
}

/* edit boxes on the login page */
#loginpage .editbox {
    font-size: 90%;
    font-weight: bold;
    color: #E07C1E;
}

/* combo boxes */
.combo {
    color: black;
    border: 1px solid #888888;
    padding-left: 2px;
    margin-top: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif  
}

/* normal buttons */
.button {
}

/* normal listboxes */
.listbox {
    width: 280px;
    color: #E07C1E;
}

/* long listboxes */
.longlistbox {
    width: 570px;
    color: #E07C1E;	
}

/* small notes */
.smallnote {
    font-size: xx-small;
    color: #999999;
}

.activityExtraInfo {
    left: 20px;
    position: relative;
    top: -20px;
    font-size: xx-small;
    display: table;
    width:160px;
}

/* area of form buttons */
.formbuttonarea {
    text-align: right;
    margin: 0;
    padding-top: 5px;
    /* margin-bottom: -5px; */
}

/* area of form buttons inside a groupbox */
.groupbox .formbuttonarea {
    border-top: 1px dashed #DDDDDD;
}

/* dynamic texts */
.dynamictext {
    color: #E07C1E;
}

/* disabled texts */
.disabledtext {
    color: #BBBBBB;
}

/* area of listbox's buttons */
.listbuttonarea {
    padding-left: 10px;
}

/* big buttons */
.bigbutton {
    width: 14em;
    padding-left: 6px;
    padding-right: 2px;
    margin-bottom: 5px;
}

/* 3 buttons under a normal listbox */
.listbutton3 {
    /* =~ lisbox.width/3-5 */
    width: 90px;
}

/* controls under each other in a column */
.controls_in_column {
    text-align: left;
}

/* controls next to each other in a row */
.controls_in_row {
    text-align: center;
}

.controls_in_row .bigbutton {
    padding-left: 0;
}

.smallhref {
    text-decoration: none;
    font-size: 9px;	
    color: #BBBBBB;
}

/* the fixed toolbars on the calendar configurator page */
.calconftoolbar {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 152px;
    text-align: left;
    position: absolute;
    left: 50%;
    margin-left: -482px;
    top: 410px;
    background-color: #DDDDDD;
    padding: 6px;
    /*
    filter: alpha(opacity=40);
    opacity: 0.4;
    -moz-opacity:0.4;
    */
}

/* buttons on the fixed toolbars on the calendar configurator page */
.calconftoolbar .button {
    font-size: 90%;
    width: 140px;
    color: #333333;
}

.PasswrdIdentical{
    font-size: 80%;
    width: 200px;
    color: #333333;    
}

.WarningText {
    color: #C82814;
    font-weight: bold;
}

.WarningText a:visited,
.WarningText a:link,
.WarningText a:active {
    color: #C82814;
}

.ErrorText {
    color: red;
    font-weight: bold;
}

.errorReset {
    color: #FF0000;
    font-size: 70%;
    width: 200px;  
}
.DescriptionText {
    color: black;
}

.DescriptionText a:visited,
.DescriptionText a:link,
.DescriptionText a:active {
    color: #C82814;
    text-decoration: underline;
    font-weight: bold;
}

#slowpagewarning {
    color: red;
    font-weight: bold;
    text-decoration: blink;
}

#eResCost {
    width: 50px;
}

#frmMake_reservation_2 div.groupbox {
    border-bottom: none;
}

a:link {
    color:#96CB18;
    text-decoration: none;
} 
a:visited {
    color:#96CB18;
    text-decoration: none;
}
a:hover {
    /* color:#CEC81A; */
    color: #FF6600;
    text-decoration: none;
    font-style: italic;	
} 
a:active {
    color:#96CB18;
    text-decoration: none;	 
}
a img {
    border: 0;
}

.linkimage a img {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

.linkimage a:hover img {
    border-top: 1px solid #FF6600;
    border-bottom: 1px solid #FF6600;
}

/*//////////////////////////////////////////////////////////*/

/* usual 3 column table */
.tbl3 {
    margin-bottom: 10px;
}

/* row of a usual 3 column table */
.tbl3 tr {
    height: 30px;
}

/* first column in a usual 3 column table */
.tbl3_col1 {
    text-align: right;
    padding-right: 5px;
    /* width: 20%; */
}

/* second column in a usual 3 column table */
.tbl3_col2 {
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    /* width: 60%; */
}

/* third column in a usual 3 column table */
.tbl3_col3 {
    text-align: left;
    padding-left: 5px;
    /* width: 20%; */
}

/*//////////////////////////////////////////////////////////*/

/* a table displaying reservation calendar info */
.caltable {
    width: 600px;
    margin-top: 4px;
    font-size: 95%;
    color: #E07C1E;
    border-collapse: collapse;
    text-align: center;
}

/* a normal cell in a caltable */
.caltable td {
    border: 1px solid #CCCCCC;
}

/* header row in a caltable */
.caltable_header {
    background-color: #E07C1E;
    font-weight: bold;
    color: #FFFFFF;
}

/* when column in a caltable */
.caltable_whencol {
    width: 14%;
}

/* data column in a caltable */
.caltable_datacol {
    width: 7%;
    font-size: 70%;
}

/* checked cell in a caltable */
.caltable_checkedcell {
    background: #E6E6FF;	
}

/*//////////////////////////////////////////////////////////*/

/* a table displaying reservation info */
.restable {
    width: 600px;
    margin-top: 4px;
    font-size: x-small;
    color: #E07C1E;
    border-collapse: collapse; 
}

/* a normal row in a restable */
.restable tr {
    height: 25px;
}

/* a normal cell in a restable */
.restable td {
    text-align: center;
    border: 1px solid #CCCCCC;
}

/* header row in a restable */
.restable_header {
    background-color: #E07C1E;
    font-weight: bold;
    color: #FFFFFF;
}

.restable_header td {
    height: 10px;
}

/* start column in a restable */
.restable_startcol {
    font-size: xx-small;
    width: 110px;
}

/* activity name column in a restable */
.restable_anamecol {
    padding-left: 5px;
    text-align: left;
    /* color: #90B0D0; */
    font-size: xx-small;
    /* color: #CC3300; */
}

/* place column in a restable */
.restable_placecol {
    font-size: xx-small;
}

/* reserved column in a restable */
.restable_reservedcol {
    font-size: xx-small;
    width: 125px;
}

/* status column in a restable */
.restable_statuscol {
    font-size: xx-small;
}

/* ticket column in a restable */
.restable_ticketcol {
    font-size: xx-small;
}

/* 2 merged cancelled column in a restable */
.restable_cancelledcol {
    font-size: xx-small;
    text-align: center;
}

/* member column in a restable */
.restable_membercol {
    font-size: xx-small;
}

/* row which has friends under it */
.restable_row_above_friends {
    border-bottom: solid 0px red !important;
}

/* friends row */
.restable_friends_row {
    border-top: solid 0px red !important;
    text-align: right !important;
    padding-right: 5px;
    font-size: xx-small;
}

/*//////////////////////////////////////////////////////////*/

/* a table displaying friends */
.friendstable {
    width: 600px;
    margin-top: 4px;
    font-size: x-small;
    color: #E07C1E;
    border-collapse: collapse; 
}

/* a normal row in a friendstable */
.friendstable tr {
    height: 25px;
}

/* a normal cell in a friendstable */
.friendstable td {
    text-align: center;
    border: 1px solid #CCCCCC;
}

/* header row in a friendstable */
.friendstable_header {
    background-color: #E07C1E;
    font-weight: bold;
    color: #FFFFFF;
}
.friendstable_header td {
    height: 10px;
}

/* name column in a friendstable */
.friendstable_namecol {
    padding-left: 5px;
    text-align: left;
    /* color: #90B0D0; */
    font-size: xx-small;
    /* color: #CC3300; */
    width: 400px;
}

/* action1 column in a friendstable */
.friendstable_action1col {
    font-size: xx-small;
    text-align: center;
}

/* action2 column in a friendstable */
.friendstable_action2col {
    font-size: xx-small;
    text-align: center;
}

/*//////////////////////////////////////////////////////////*/

.d0 {
    background-color: #FFFFD0;
    color: #1D3286
}

.d1 {
    background-color: #FFFFFF;
    color: #1D3286

}

.c0 {
    background-color: #FFFFD0; 
    color: #DDDDDD;
}

.c1 {
    background-color: #FFFFFF;
    color: #DDDDDD;
}

.h1 {
    background-color: #E07C1E;
    font-weight: bold;
    color: #FFFFFF;
}

h2 {
    font-size: large;
    line-height: 100%;
    color: #BBBBBB;
    padding-left: 16px;
}

/*//////////////////////////////////////////////////////////*/

#tablist {
    padding: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 20px;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;	
}

#tablist li {
    list-style: none;
    display: inline;
    margin: 0;
}

#tablist li a {
    text-decoration: none;
    padding: 3px 0.5em;
    margin-left: 0px;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    background: #EEEEEE;
}

#tablist li a:link, #tablist li a:visited {
    color: #CA701C;
}

#tablist .current {
    background: #FFFFD0;
}

#tabcontentcontainer {
    width: 600px;
    overflow: hidden;
    /* Insert Optional Height definition here to give all the content a unified height */
    padding: 0;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
}

#tabcontentcontainer .DescriptionText {
    padding: 10px 0 5px 5px;
}

.tabcontent {
    display: none;
}

/*//////////////////////////////////////////////////////////*/

.groupbox .bigbutton_selectactivity a {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 15px;
    font-size: 17px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    /* overflow: hidden; */
    height: 20px;
    color: #96CB18;
    /* border-top: solid #F4F4F4;
    border-bottom: solid #F4F4F4; */
    border: 0;
    margin: 0;
}
.makeres_maindiv1_selectactivity a:hover {
    background-color: #EEEEEE;
    font-style: normal;
    font-weight: bold;
    color: #FF6600;
    /*
    border-top: dotted #999999;
    border-bottom: dotted #999999;
    */
}

#tbl2Col_Left {
    float: left;
    /* width: 33%; */
    width: 200px;
    /* height: 400px; */
    display: inline-table;
    padding-right: 10px;
    vertical-align: top;
    border-right: 1px solid #CCCCCC;
}

#tbl2Col_Middle {
    float: left;
    /* width: 33%; */
    width: 200px;
    /* height: 400px; */
    display: inline-table;
    padding-left: 10px;	
    padding-right: 10px;
    border-right: 1px solid #CCCCCC;
}

#tbl2Col_Right {
    float: left;
    /* clear: right;  */
    /*  width: 33%; */
    width: 198px;
    /* height: 400px; */
    display: inline-table;
    padding-left: 10px;
}

#makeres_maindiv1 {
    /* height: 388px; */
    padding: 0;
    margin: 0;
    display: table;
}

#clubselector {
    float: right;
    margin-right: 25px;
}

#clubselector .combo{
    margin-top: 0px;
}

#day1content, #day2content, #day3content, #day4content, #day5content, #day6content, #day7content{
    style=border:1px solid black;
    height:100%;
    width:100%;
    overflow-y:hidden;
    overflow-x:scroll;
}

#wrongPassword{
    max-width: 200px;
    padding: 15px;
    color: #ff0000;
    word-wrap: break-word;
    display: inline-block;
}

@media screen and (max-width: 1024px) {

    * {
        box-sizing: border-box;
    }

    #loginpage {
        position: static;
        margin: 0;
        width: 100%;
    }

    #loginboxarea {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    #loginkey {
        display: flex;
        justify-content: center;
    }

    #loginkey,
    #loginboxcontent {
        position: static;
        width: 100%;
    }

    .restable {
        width: 100%;
    }

    #page {
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        border: 0;
    }

    #page_side_border {
        position: static;
        width: 100%;
        margin: 0;
        overflow-x: hidden;
    }

    #bottomcorners,
    #topcorners {
        position: static;
        width: 100%;
        margin: 0;
        display: none;
    }

    .membernav li {
        left: unset;
        right: 0;
    }

    .membernav li a {
        margin-left: auto;
    }

    #makeres_maindiv1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #tbl2Col_Left tbody tr:nth-child(2) {
        display: none;
    }

    .groupbox .bigbutton_selectactivity a {
        height: auto;
    }

    body:has(#loginpage) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 0 20px;
    }

    #loginpage #loginpage_bottom {
        background: none;
    }

    #loginpage {
        position: static;
        margin: 0;
        background: white;
        width: 100%;
    }

    #loginboxarea {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        height: auto;
        text-align: center;
    }

    #loginboxcontent {
        display: flex;
        justify-content: center;
    }

    .bigbutton_selectactivity {
        text-align: center;
        display: flex;
        justify-content: center;
    }

    #makeres_maindiv1 table {
        border: 0;
        padding: 0;
    }

    #page_side_border {
        background-color: transparent;
    }

    #page #fmlogoarea {
        margin-top: auto!important;
    }

    #langselector {
        position: static;
        top: unset;
        left: unset;
        width: 100%;
        margin: 20px 20px 0;
        padding-bottom: 20px;
    }

    .membernav {
        margin: 40px 0!important;
        width: 100%;
    }

    #langselector a {
        font-size: 16px;
    }

    #pagelogo img {
        border: 0;
        width: 100%;
    }

    #pagelogo {
        display: flex;
        align-items:center;
        justify-content: center;
    }
}

@media screen and (max-width: 675px) {
    .membernav {
        background-position: 100% top;
    }
}

#topcorners,
#bottomcorners {
    display: none!important;
}

@media screen and (min-width: 1025px) {
    #page {
    border-radius: 6px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
    border: 0;
}
}

#page_side_border {
    background-image: none!important;
}

@media screen and (max-width: 768px) {
    /* Keep the original positioning of login and getapp containers */
    #loginpage, #getapppage {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 380px !important;
    }

    #getapppage {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Make store links appear side-by-side */
    #getapppage > a {
        flex: 1 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Remove the height spacer between the links */
    #getapppage > div {
        display: none !important;
    }

    /* Make images fill their container */
    #getapppage img {
        max-width: 100% !important;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
}