/**
 * Start responsive. Ideally we'd use a CSS preprocessor like SASS to do this
 * We omit the screen string from the @media query since the task is to make it responsive
 */

@media (max-width: 900px) {

}

/**
 * Generic mobile/cell phones in portrait mode
 */
@media (max-width: 600px) {


    * {
        -ms-touch-action: manipulation;
        touch-action: manipulation;
    }
    body {
        overflow-x: hidden !important;
        margin: 0 !important;
        max-width: 600px;
        width: 100vw !important;
        font-family:  Calibri !important;
    }

    #main1 {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;

    }
    #page {
        width: 100vw !important;

    }
    #top-block1  {
        display: none;
    }
    #acc-bar99 {
        display: none;
    }
    #header_menu_container {
        display: none;
    }
    #db-left {
        display: none;
    }
    .header-top-l {
        display: none;
    }
    .header-top-r {
        display: none;
    }
    #footer-space {
        display: none;
    }
    .site {
        display: none;
    }

    .mobile-wrapper {
        display: initial !important;
        position: relative;
        width: 100vw !important;

    }

    .nhob_subpg_gnrlinfo_cnt
    {
        width: 97.5% !important;
        float: left;
        margin-left: 3px;
    }
    .nhob_subpg_gnrlinfo_expnd
    {
        width: 98% !important;
        margin-left:3px !important;
        right-padding: 10px;
    }
    .nhob_subpg_gnrlinfo_ttl
    {
        width: 100%;
    }
    .header-top-m
    {
        width: 98vw !important;
        border-radius: 8px 8px 0px 0px;
    }
    #db-right {
        float: left;
        height: auto;
        width: 100vw !important;
        margin-left: 5px !important;
        margin-top: 3px !important;
        padding-bottom: 20px;
    }
    .header-mobile-menu
    {
        background-image: url(../images/mobile-header-1.png);
        background-repeat: repeat-x;
        height: 35px !important;
        width: 100vw !important;

    }
    .ptext1 {
        font-family:  Calibri !important;
        font-size: 12px;
        float: left;
        height: 24px !important;
        width: 45% !important;
        border-style: outset;
        border-color: #35454e;
        border-width: 1px;
        padding-top:4px;

    }
    .ptext2 {
        font-family:  Calibri !important;
        font-size: 12px;
        float: left;
        height: 24px !important;
        width: 48% !important;
        border-style: outset;
        border-color: #35454e;
        border-width: 1px;
        padding-top:4px;
        text-align:center;
    }
    .ptext00 {
        width: 5% !important;
        height: 28px !important;
        border-style: outset;
        border-color: #35454e;
        border-width: 1px;
    }
    .text-block1 {
        width: 100% !important;
        margin-left: 0px !important;
    }
    .text-block {
        width: 100% !important;
        margin-left: 0px !important;
    }
    .container-halfblock {
        width: 100vw !important;

    }

    .container-halfblock2 {
        width: 100vw !important;
        margin-left: 0px !important;
    }
    .header-index-block {
        width: 98vw !important;
        border-radius: 8px 8px 0px 0px;
    }
    .gray-block1-middle{

        width: 98vw !important;
        background-image: url(../images/inside-middle.png) !important;
        background-repeat: repeat-y;
        border-radius: 0px 0px 8px 8px;
    }
    #menu3 {
        float: left;
        height: auto;
        width: 100% !important;
        margin-top:10px;
    }
    .mline
    {
        width: 98% !important;
        height:1px;
        margin-top:5px;
        background-color:#090b07;
    }
    #shoutbox
    {
        width: 92vw !important;
    }
    #footer {
        width: 100vw !important;

    }
    .footer-inner {
        width: 100% !important;
        margin-right: auto;
        margin-left: auto;
        height: auto;
        padding-top: 25px;
        padding-right: 30px;
        padding-left: 0px !important;
    }
    #footer-link {
        float: left;
        height: 23px;
        width: 100% !important;
        background-image: url(../images/footer-link-bg.png);
        background-repeat: no-repeat;
        font-size:12px !important;
        padding-top:5px;
    }
    #pnotepad {
        width: 100vw !important;
    }
    #notepad-top {
        width: 100vw !important;
    }
    #notepad-repeat {
        width: 100vw !important;
    }
    #note-text {
        width: 100vw !important;
    }


    .textnote
    {
        width: 92vw !important;
    }
    .update-button
    {
        float:left !important;
    }
    .trr1 {
        float: left;
        height: auto;
        width: 25% !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    .index-home-image
    {
        width:50% !important;

    }
    .index-home-details
    {
        width:50% !important;
    }

    .index-home-upgrades-container
    {
        width:100% !important;
    }
    .tr2 {
        float: left;
        width: 33% !important;
        height: 100px;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .nhob_subpg_refrl_cnt {
        float: left;
        margin-top: 7px;
        position: relative;
        width: 97% !important;
        background: #ed9018 url(../images/nhobo_subpg_refrl_bg.jpg) repeat-x;
        min-height: 66px;
        /* -- Box Radius -- */
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .nhob_subpg_refrl_ribn{
        display: none;
    }
    .mobile-referral-hide{
        display: none;
    }
    .nhob_subpg_refrl_mmebr{ display: none;}
    .nhob_subpg_refrl_txtbox{ float:left; width:94% !important;font-family:  Calibri !important; height:22px; background:#a70000; margin-left:3px; margin-top:13px; padding:1px 9px 3px 9px; }
    .nhob_subpg_refrl_erntxt{ float:left; margin-left:39px; font-size:15px; line-height:19px;font-family:  Calibri !important; width:94% !important; margin-top:0px; font-weight: bold;}
    .nhob_subpg_refrl_lbltxt{ float:left; margin-left:39px; font-size:15px; color:#cb1515;font-family:  Calibri !important; margin-top:17px; font-weight: bold;}

    .mobile-referral-show{
        display: initial !important;
        float: right;
        margin-top: 3px;
        margin-right: 10px;
        text-align: center;
        font-family:  Calibri !important;
        font-weight: bold;

    }
    #shouts{
        font-family:  Calibri !important;
    }
    #explore-link-container
    {
        width: 50% !important;
    }
    .city-th {
        width: 100% !important;
    }
    .city-td {
        width: 100% !important;
        min-height: 266px !important;
    }
    #city-width
    {
        width: 48% !important;
        margin-left: 5px !important;
    }
    #city-width-hourlies
    {
        width: 48% !important;
        margin-left: 5px !important;
    }
    .city-td li
    {
        font-family:  Calibri !important;
        font-size: 14px !important;
        font-weight: bold;
        float: left;
        height: 24px !important;
        width: 100% !important;
        margin-left: -25px;
        margin-top: -2px;
        border-style: outset;
        border-color: #35454e;
        border-width: 1px;
        padding-top:4px;
        list-style: none;
        padding-left: 8px;
    }
    .city-hourlies {
        background-color: #222;
        border-radius: 0px 0px 10px 10px;
        background-color: rgba(0,0,0,0.85);
        min-height: 65px;
    }
    .city-hourlies-header {
        font-family:  Calibri !important;
        background-color: #222;
        border-radius: 8px 8px 0px 0px;
        background-color: rgba(0,0,0,1);
        text-align:center;
        font-size: 12px !important;
        font-weight: bold;
        color:orange;
        height:30px;
    }
    #city-width-hourlies
    {
        width: 31% !important;
        margin-left: 5px !important;
        float: left;
    }
    .mailbox-menu
    {
        width:32.5% !important;
        font-size:18px !important;
    }
    .mailbox-inbox-list
    {
        min-height: 50px !important;
        margin-left: -3px !important;
    }
    #mailbox-time-mobile
    {
        font-size: 10px;
    }
    #mailbox-inbox-hide-del
    {
        display: none;
    }
    #mailbox-savebutton-mobile
    {
        width:50% !important;
    }
    #mailbox-inbox-actions
    {
        display: none;
    }
    #mailbox-inbox-subject
    {
        width:40% !important;
    }
    #mailbox-inbox-time
    {
        width:48% !important;
    }
    #message
    {
        width: 92vw !important;
    }
    #inset-border
    {
        border-style: outset;
        border-color: #35454e;
        border-width: 1px;
    }
    #inbox-subject-read
    {
        width: 50vw !important;
    }
    #inbox-read-mail
    {
        width: 94vw !important;
    }
    #inbox-read-respond
    {
        width: 94vw !important;
    }
    #mobile-events-time
    {
        font-size: 12px !important;
    }
    #mobile-events-time-gone
    {
        display: none;
    }
    #mobile-events-time-details
    {
        width: 90% !important;
    }
    #mobile-event-text
    {
        font-size: 12px !important;
        font-weight: bold
    }
    #mobile-raid-details
    {
        width: 50% !important;
    }
    .per-bg99
    {
        width: 90% !important;
    }
    #mobile-raid-fight
    {
        width: 99vw !important
    }
    .rampagezone
    {
        float: left;
        width: 45% !important;
        height: auto;

    }
    .rampagezone img
    {
        width: 150px;
        height: 100px;
    }
    #raid-desktop-only
    {
        display: none;
    }
    #raid-mobile-only
    {
        display: block !important;
    }
    #raid-action-text
    {
        font-size: 18px !important;
        font-family:  Calibri !important;
        font-weight: bold;
    }

    .mobile-inner-style
    {
        width:100%;
        height: 50px !important;
        font-family:  Calibri;
        font-size: 14px;
        float:left;
        margin-bottom:1px;
        border-style: outset;
        border-color: #35454e;
        border-width: 1px;
    }
    .border-outset
    {
        font-family:  Calibri;
        border-style: outset;
        border-color: #35454e;
        border-width: 1px;
        text-align:center;
    }
    .isa_success, .isa_error {
        width:94vw !important;
        padding-left: 0px !important;
    }
    .bank_container {
        width: 100% !important;
        text-align: center !important;
    }
    .bank_money
    {
        margin-left: 0px !important;
        margin-bottom: 50px !important;
    }
    .bank_points
    {
        margin-left: 0px !important;
    }
    #width-50vw
    {
        width: 50vw !important;
    }
    .bank_container
    {
        display: none;
    }
    .bank_container-mobile-only
    {
        display: block !important;
    }

    .imagecontainers
    {
        height: 65px !important;
        width: 65px !important;
    }
    .imagecontainers img
    {
        height: 50px !important;
        width: 50px !important;
    }
    #inventory-img-mobile
    {
        display: none;
    }

    .accordion {
        cursor: pointer;
        width: 100%;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    .active, .accordion:hover {

    }

    .accordion:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2212";
    }

    .panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;

    }
    #mobile-only
    {
        display: block !important;
    }
    #inventory-mobile-itmname
    {
        width: 40% !important;
    }
    #inventory-mobile-sellprice {
        width: 35% !important;
    }
    #desktop-only
    { display: none;}

    .perks_container {
        width: 100% !important;
    }
    .perks_bar-mobile
    {
        width: 100%;
        min-height: 50px;
        float:left;
    }
    .perks_bar_header-mobile
    {
        float: left;
        height: 25px;
        width: 98%;
        font-size:16px;
        font-family: Calibri;
        color:white;
        margin-top:6px;
        font-weight:bold;
    }
    .perks_bar_contents-mobile
    {
        float: left;
        height: auto;
        width: 98%;
        font-size:14px;
        font-family: Calibri;
        color:white;
        margin-top:6px;
        font-weight:bold;
    }
    .perks_gold_star_container-mobile
    {
        float: left;
        height: 21px;
        width: 99%;
        margin-top:5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .perks_gold_star
    {
        margin-left: 5px !important;
    }
    .perks_claim_button
    {
        float: right;
        height: 26px;
        width: 100% !important;
        background-image: url(../images/blank.gif);
        background-repeat: no-repeat;
        margin-right: 14px;
        margin-top:3px;
        margin-bottom: 8px;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    #estate-mobile
    {
        width: 50% !important;
    }
    .gym_strength
    {
        margin-left: 0px !important;
    }
    #userlist-img-size img
    {
        width: 35px;
        height: 35px;
    }
    #top-game-details {
        display: none !important;
    }
    a.linkText {
        color : red;
        font-family:  Calibri !important;
        font-size : 12px;
        text-decoration : none;
    }
    a.linkText:link {color : green; }
    a.linkText:visited { color : green; }
    a.linkText:hover { color : orange; }

    #hof-menu-height
    {
        min-height: 28px !important;
    }
    .explore-deadly-player
    {
        width:100%;
        text-align:center;
        font-family:  Calibri;
        font-size: 12px !important;
    }
    .voting-image-container
    {
        width:25% !important;
        text-align:center;
        float: left;
    }
    .viewuser-actions-right
    {
        width: 100% !important;

    }
    .viewuser-actions-left
    {
        width: 100% !important;

    }
    #viewuser-profile-img
    {
        text-align: center;
    }


    #mobile-text-calibri
    {
        font-family:  Calibri !important;
    }
    #viewuser-details
    {
        width: 90% !important;
    }
    #mobile-width-8-perc
    {
        width: 8% !important;
    }
    #mobile-width-10-perc
    {
        width: 10% !important;
    }
    #mobile-width-15-perc
    {
        width: 15% !important;
    }
    #mobile-width-20-perc
    {
        width: 20% !important;
    }
    #mobile-width-25-perc
    {
        width: 25% !important;
    }
    #mobile-width-27-perc
    {
        width: 27% !important;
    }
    #mobile-width-30-perc
    {
        width: 30% !important;
    }
    #mobile-width-35-perc
    {
        width: 35% !important;
    }
    #mobile-width-40-perc
    {
        width: 40% !important;
    }
    #mobile-width-45-perc
    {
        width: 45% !important;
    }
    #mobile-width-47-perc
    {
        width: 47% !important;
    }
    #mobile-width-48-perc
    {
        width: 48% !important;
    }
    #mobile-width-49-perc
    {
        width: 49% !important;
    }
    #mobile-width-50-perc
    {
        width: 50% !important;
    }
    #mobile-width-55-perc
    {
        width: 55% !important;
    }
    #mobile-width-60-perc
    {
        width: 60% !important;
    }
    #mobile-width-70-perc
    {
        width: 70% !important;
    }
    #mobile-width-80-perc
    {
        width: 80% !important;
    }
    #mobile-width-90-perc
    {
        width: 90% !important;
    }
    #mobile-width-95-perc
    {
        width: 95% !important;
    }
    #mobile-width-97-perc
    {
        width: 97% !important;
    }
    #mobile-width-98-perc
    {
        width: 98% !important;
    }
    #mobile-width-99-perc
    {
        width: 99% !important;
    }
    #mobile-width-100-perc
    {
        width: 100% !important;
    }
    .other-item-header {
        height: 50px !important;
        width: 50px !important;
        margin-right: 0px !important;
    }
    .other-item-header img
    {
        height: 45px !important;
        width: 45px !important;

    }


    /* Tooltip container */
    .tooltip9 {
        position: relative;
        display: inline-block;
        /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }
    .tooltiptext9
    {
        position: fixed !important;
        bottom: 0% !important;
        top: 0% !important;
        left: 5% !important;
        margin-left: 0px !important;
        margin-top: 65px !important;
        width: 90% !important;
        height: 250px !important;
        border-style: none !important;
    }
    .tooltiptext9::after
    {
        display: none !important;
    }
    #mobile-only-height-30px
    {
        height: 35px;
    }
    #mobile-notice-icon
    {
        width: 20% !important;
    }
    #mobile-notice-details
    {
        width: 80% !important;
    }
    .main_container
    {
        width: 100vw;
        display: flex;flex-wrap: wrap;justify-content: space-around;gap: 2px;
    }
    .header-page-content
    {
        padding-left: 5px;

    }
    .subpg_bg
    {
        background: none !important;
    }
    .page-middle
    {
        width: 98% !important;

    }

    #city-width-hourlies
    {
        width: 48% !important;
        margin-left: 5px !important;
    }
    .subpg_wall_container { z-index:1 !important; }

    .pagin {
        padding: 7px 0 !important;
        font-size: 10pt !important;

    }
    .login_form_outer {
        margin-left: 15px !important;
        margin-right: 0px !important;
        float: left !important;
        margin-top:-125px !important;
    }
    .isa_success
    {
        font-size: 15px;
        font-weight: bold;
    }
    .isa_error
    {
        font-size: 15px;
        font-weight: bold;
    }
    .nhob_rgtsde_mmenu_icon{ background: unset !important;}
    .nhob_rgtsde_mmenu_name{ background: unset !important;}
    .nhob_subpg_box1_cnt{ width:97.5% !important;}
    .nhob_subpg_box1_expnd{width:97% !important; margin-left: 2px !important;}
    .nhob_subpg_box1_cnt.mrgn_lft{ margin-left: 0px !important; }
    .ftr_imp_note { margin-left: 8px !important; color:#FFFFFF; width:95% !important; text-align: center; }
    .citylandmark {width: 50% !important;}
    .mobile-activity-contest
    {
        min-height: 45px;
    }
    .accordion {
        cursor: pointer;
        width: 100%;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    .active, .accordion:hover {

    }

    .accordion:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2212";
    }

    .panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;

    }
    .gym-defense-bg
    {
        width:350px !important;
        height:145px !important;
    }
    .gym-speed-bg
    {
        width:350px !important;
        height:145px !important;
    }
    .gym-strength-bg
    {
        width:350px !important;
        height:145px !important;
    }
    #mobile-flex
    {
        gap:0;
        justify-content:center;
        margin-left:-4px;
    }

    .hdr_logo {
        margin-left:0px !important;
    }
    .hdr_stats_txt {
        width: 100vw !important;
        text-align: center !important;
    }
}



@media (max-width: 470px) {

}

@media (max-width: 375px) {
    #spend-credits-container {
        width: 45% !important;
        min-height: 125px !important;
    }
}
@media (max-width: 359px) {
    /**

        border-style: outset;
        border-color: #35454e;
        border-width: 1px;
    font-family:  Calibri !important;
    display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;

        border-style: outset;border-color: #35454e;border-width: 1px;
    display: flex;flex-wrap: wrap;justify-content: space-around;align-content: center;align-items: center;gap: 5px;
    display: flex;align-content: center;align-items: center;
    align-content: center;
	min-height: 25px;max-height: 25px;

     * Screen is too small
     * Maybe load the game with very basic styling?
     */
    .header-top-m
    {
        width: 98vw !important;
        border-radius: 8px 8px 0px 0px;
    }
    .page-middle
    {
        width: 98% !important;

    }
    #mobile-small-screen
    {
        width: 35vw !important;
    }
    #mobile-small-screen-statbars
    {
        width: 22vw !important;
        margin-left: 2px !important;
        font-size: 10px !important;
    }
    .voting-image-container
    {
        width:33% !important;
        text-align:center;
        float: left;
    }
}
@media (max-width: 300px) {

}