.tabletext
        {
            font-family:Arial;
            font-size:14px;
            width:90%;      
            margin:auto;                  
        }

        .logintable
        {
            font-family:Arial;
            font-size:14px;
            width:80%;      
            margin:auto;                  
        }

        .labeltext
        {
            font-family:Arial;
            font-size:14px;
        }

        .labeltextbold
        {
            font-family:Arial;
            font-size:14px;
            font-weight:bold;
        }
        
        .labelheader
        {
            font-family:Arial;
            font-size:14px;
            font:bold;
            color:#299C8D;
            background-color:#EAF3F0;
        }
        
        .footertext
        {
            font-family:Arial;
            font-size:10px;
        }

        .titletext
        {
            font-family:Arial;
            font-size:18px;
            font-weight:bold;
        }    
        
        .textbox
        {
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        
        .button 
        {
            background-color: #3399ff;
            border: solid;
            border-color: #f1f1f1;
            color: white;
            font-size:14px;
            padding: 5px 10px; 
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 2px; 
            cursor: pointer;
            border-radius: 16px;        
        }   

        .button:hover 
        {
            background-color: #f1f1f1;
            border: solid;
            border-color: #3399ff;
            color: black;
        }

        .button:disabled
        {
            background-color: #f1f1f1;
            cursor:not-allowed;
        }

        .button_blue 
        {
            background-color: #3399ff;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 16px;        
        }   

        .button_blue:hover 
        {
            background-color: #f1f1f1;
            color: black;
        }

        .button_orange 
        {
            background-color: orange;
            border: solid;
            border-color: #f1f1f1;
            color: white;
            font-size:14px;
            padding: 5px 10px; 
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 2px; 
            cursor: pointer;
            border-radius: 16px;        
        }   

        .button_orange:hover 
        {
            background-color: #f1f1f1;
            border: solid;
            border-color: orange;
            color: black;
        }

        .button_orange:disabled
        {
            cursor:not-allowed;
        }

        .button_big 
        {
            background-color: white;
            color: black;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 16px;     
            font-size: 24px;
            padding: 5px 10px; 
        }   

        .button_big:hover 
        {
            background-color: #f1f1f1;
        }

        .icon_button
        {
            background-color:transparent;
            border:none;
            cursor:pointer;
        }

        .open_button
        {           
            background:transparent url('.././images/close-24.png') no-repeat;
            background-position:center;
            width: 30px;
            height: 30px;
            border: none;
            vertical-align: middle
        }    

        .open_button:hover
        {           
            background:transparent url('.././images/open-24.png') no-repeat;
            background-position:center;
            width: 30px;
            height: 30px;
            border: none;
            vertical-align: middle
        }    

        .upload_button
        {           
            background:transparent url('.././images/upload-to-cloudw-24.png') no-repeat;
            background-position:center;
            width: 24px;
            height: 24px;
            border: none;
            vertical-align: middle
        }    

        .upload_button:hover
        {           
            background:transparent url('.././images/upload-to-cloudb-24.png') no-repeat;
            background-position:center;
            width: 24px;
            height: 24px;
            border: none;
            vertical-align: middle
        }    
        
        .color_red
        {
             color:#ff0000;
        }
        
        .color_blue
        {
            color:#0000FF;
        }

        .color_dark_blue_bold
        {
            color:#0000FF;
            font-weight:bold;
        }
        
        .color_green
        {
            color:#006633;
        }
        
        .color_light_blue
        {
            color:#006699;
        }
        
        .color_dark_blue
        {
            color:#0000FF;
        }
        
        .dot {
            height: 16px;
            width: 16px;
            background-color: #FFFFFF;
            border-style:solid;
            border-color:black;
            border-radius: 50%;
            display: inline-block;
            /* vertical-align:middle; */
            text-align:center;
        }
        
        .reddot {
            height: 16px;
            width: 16px;
            background-color: red;
            border-style:solid;
            border-color:black;
            border-radius: 50%;
            display: inline-block;
            /* vertical-align:middle; */
            text-align:center;
        }

        .round_button 
        {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
      
        .roundedcorner {
            margin-left:auto;
            margin-right:auto;
            margin-top:1px;
            margin-bottom:1px;
            padding:3px;
            border-top:1px solid #CCCCCC;
            border-left:1px solid #CCCCCC;
            border-right:1px solid #999999;
            border-bottom:1px solid #999999;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
        }    
        
        .roundedcorner:disabled {
            background-color:#eeeeee;
        }
        
        .roundeddropdown {
            margin-left:auto;
            margin-right:auto;
            margin-top:1px;
            margin-bottom:1px;
            padding:3px;
            border-top:1px solid #CCCCCC;
            border-left:1px solid #CCCCCC;
            border-right:1px solid #999999;
            border-bottom:1px solid #999999;
            min-width:30px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
        }    

        .roundeddropdown:disabled {
            background-color:#eeeeee;
        }


        /* The Modal (background) */
        .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        .survey-modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 5%; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
        }

        .confirm-content {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 60%;
        }

        .smodal {
          display: none; 
          position: fixed; 
          z-index: 1; 
          padding-top: 10px; 
          left: 0;
          top: 0;
          width: 100%; 
          height: 95%; 
          overflow: auto; 
          background-color: rgb(0,0,0); 
          background-color: rgba(0,0,0,0.4); 
        }

        .submit-content {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 90%;
        }

        /* The Close Button */
        .close {
          color: #aaaaaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
        }

        .close:hover,
        .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
        }
        
        .general_backgroundcolor  {
           background-color: #F0FAFC;
        }
       
        .upperleft {
            float:left;
            width:100%;
        }

        .uppermain {
            float: left;
        }

        .upperright {
            float:right;
        }

        .myCheckbox input {
            position: relative;
            z-index: -9999;
        }

        .myCheckbox span {
            width: 32px;
            height: 32px;
            display: inline-block;
            cursor: pointer;
            vertical-align:middle;
            background: url(".././images/unchecked-32.png") no-repeat;
        }

        .myCheckbox input:checked + span {
            width: 32px;
            height: 32px;
            background: url(".././images/checked-32.png") no-repeat;
        }

        .myCheckboxHide {
            display:none;
        }

        .myToggle input {
            position: relative;
            z-index: -9999;
        }

        .myToggle span {
            width: 40px;
            height: 26px;
            display: inline-block;
            cursor: pointer;
            vertical-align:middle;
            background: url(".././images/toggle-off-40s.png") no-repeat;
        }

        .myToggle input:checked + span {
            width: 40px;
            height: 26px;
            background: url(".././images/toggle-on-40s.png") no-repeat;
        }

        .myToggleHide {
            display:none;
        }

        .roundCheckbox input {
            position: relative;
        }

        .roundCheckbox span {
            width: 32px;
            height: 32px;
            display: inline-block;
            cursor: pointer;
            vertical-align:middle;
            background: url(".././images/round_checked_unchecked-32.png") no-repeat;
        }

        .roundCheckbox input:checked + span {
            width: 32px;
            height: 32px;
            background: url(".././images/round_checked-32.png") no-repeat;
        }

        .roundCheckbox input:hover + span {
            width: 32px;
            height: 32px;
            background: url(".././images/round_checked_mouseon-32.png") no-repeat;
        }

        .roundCheckbox input:checked+:hover + span {
            width: 32px;
            height: 32px;
            background: url(".././images/round_checked-32.png") no-repeat;
        }

        .roundCheckboxHide {
            display: none;
        }

        .valsummary ul {
            display: none;
            visibility: hidden;
        }

        .mpilogo {
            width:232px;
            height:auto;
            background: url(".././images/logo-macaopoly.png") no-repeat;
        }

        .seperator {
        }

        #grow {
            -moz-transition: height .5s;
            -ms-transition: height .5s;
            -o-transition: height .5s;
            -webkit-transition: height .5s;
            transition: height .5s;
            height: 0;
            overflow: hidden;
        }

        .grow {
            -moz-transition: height .5s;
            -ms-transition: height .5s;
            -o-transition: height .5s;
            -webkit-transition: height .5s;
            transition: height .5s;
            height: 0;
            overflow: hidden;
        }

        .garbage {
            display: none;
        }

        .garbage[style*=visible] + input,
        .garbage[style*=visible] + select,
        .garbage[style*=visible] + textarea {
            background-color: #ffcccc;
            border: 1px solid #ff0000;
        }

        .caption_pwd {
            width: 240px;
            display: inline-block;
            text-align: right;
        }

        .speech-bubble {
	        position: relative;
	        background: #ff0000;
	        border-radius: .4em;
            padding: 3px 3px;
        }

        .speech-bubble:after {
	        content: '';
	        position: absolute;
	        top: 0;
	        left: 30%;
	        width: 0;
	        height: 0;
	        border: 7px solid transparent;
	        border-bottom-color: #ff0000;
	        border-top: 0;
	        margin-left: -7px;
	        margin-top: -7px;
        }

        .speech-bubble-left {
	        position: relative;
	        background: #ff0000;
	        border-radius: .4em;
            padding: 3px 3px;
        }

        .speech-bubble-left:after {
	        content: '';
	        position: absolute;
	        top: 30%;
	        left: 0;
	        width: 0;
	        height: 0;
	        border: 7px solid transparent;
	        border-right-color: #ff0000;
	        border-left: 0;
            border-bottom: 0;
	        margin-left: -7px;
	        margin-top: 0px;
        }

        .speech-bubble-down {
	        position: relative;
	        background: #ff0000;
	        border-radius: .4em;
            padding: 3px 3px;
        }

        .speech-bubble-down:after {
	        content: '';
	        position: absolute;
	        bottom: 0;
	        left: 30%;
	        width: 0;
	        height: 0;
	        border: 7px solid transparent;
	        border-top-color: #ff0000;
	        border-left: 0;
            border-bottom: 0;
	        margin-left: -7px;
	        margin-bottom: -7px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .searchtextbox:focus .dropdown-content {
            display: block;
        }

        .hints-item {

        }

        .hints-item:hover {
            background-color:lightblue;
        }
        
        @media screen and (max-width:800px) {
            .upperleft, .uppermain, .upperright {
                width: 100%;
            }

           .button_big {
                background-color: white;
                color: black;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                margin: 4px 2px;
                cursor: pointer;
                border-radius: 16px;     
                font-size: 24px; 
                line-height:32px;
                padding: 5px 10px; 
           }   

           .button_big:hover {
                background-color: #f1f1f1;
           }

           .tabletext {
                font-family:Arial;
                font-size:14px;
                width:100%;
           }

           .logintable {
                font-family:Arial;
                font-size:14px;
                width:100%;
           }

           .seperator {
               display:none;
           }

           .caption_pwd {
               text-align:left;
           }

           .modal-content {
               padding: 5px;
               width: 95%;
           }

           .confirm-content {
               padding: 5px;
               width: 95%;
           }

           .submit-content {
               padding: 5px;
               width: 95%;
           }
        }