.stateTip {
            position: absolute;
            display: none;
            min-width: 80px;
            height: auto;
            background: none repeat scroll 0 0 #ffffff;
            border: 1px solid rgb(236, 0, 0);
            padding: 14px;
            text-align: center;
        }

        #zongyuan-geo-block {
            display: inline-flex;
            text-align: left;
            width: 1200px;
        }

        .univGeoCircles:hover {
            stroke: rgb(242, 135, 125) !important;
            stroke-width: 2px !important;
        }


        .button {
            position: relative;
            background-color: rgba(0, 0, 0, 0.2);
            border: none;
            border-radius: 0.8em;
            color: white;
            padding: 20px;
            width: 100px;
            text-align: center;
            -webkit-transition-duration: 0.4s; 
            transition-duration: 0.4s;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
            font-size: 12px;
        }

        .button:after {
            content: "";
            background: #f1f1f1;
            display: block;
            position: absolute;
            padding-top: 300%;
            padding-left: 350%;
            margin-left: -20px !important;
            margin-top: -120%;
            opacity: 0;
            transition: all 0.8s
        }

        .button:active:after {
            padding: 0;
            margin: 0;
            opacity: 1;
            transition: 0s;
        }

        /* Checkbox style */
         /* Customize the label (the container) */
        .container {
            position: relative;
            padding-left: 35px;
            padding-top: 6px;
            cursor: pointer;
            font-size: 12px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
        }

        /* On mouse-over, add a grey background color */
        .container:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .container input:checked ~ .checkmark {
            background-color: #2196F3;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .container input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .container .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .buttonblocks {
            width: 600px;
            padding: 5%;
        }

        #rankbuttons {
            display: block;
            height: 200px;
        }

        .rankbuttonclass {
            width: 100px;
            margin-left: 0.3em;
            margin-right: 0.2em;
            margin-top: 10px;
        }