@media(min-width: 2100px) {
    /* Report Button */
    #fundraiser-dash .success-reporting h4, #fundraiser-dash .success-reporting h5{
        font-size: 28px;
        top: 25px;
    }

    #fundraiser-dash .success-reporting:hover .half-report{
        width: 40%;
    }

    #fundraiser-dash .reporting-button{
        transition: all .5s linear;
    }

    /* USER */
    #reports-page .user-report-container h4,
    #reports-page .user-bank-container h4{
        font-size: 22px;
    }

    #reports-page .avatar-user{
        width: 65%;
        margin-top: 20px;
    }

    #reports-page .user-radio .type-radio{
        font-size: 18px;
        padding-bottom: 22px;
    }

    #reports-page .user-radio label:before{
        width: 55px;
        height: 55px;
    }

    #reports-page .user-radio label input[type='radio']:checked+span{
        width: 55px;
        height: 55px;
    }

    #reports-page .user-checkbox .type-radio{
        font-size: 15px;
    }

    #reports-page .user-checkbox label:before{
        margin-top: 10px;
        width: 50px;
        height: 50px;
    }

    #reports-page .user-checkbox label input[type='checkbox']:checked+span{
        top: 60px;
        height: 50px;
        width: 50px;
    }

    #reports-page .user-bank-container .form-group .form-control option{
        font-size: 16px;
    }

    #reports-page .user-bank-container .form-control{
        height: 370px;
    }

    #reports-page .chart-header span{
        font-size: 18px;
    }

    #reports-page .chart-header input{
        font-size: 18px;
    }

    #reports-page .button-back-container button{
        font-size: 20px;
        top: 11px;
    }
    /* CHARTS */
    #reports-page .user-chart-container{
        height: 700px;
    }

    #reports-page .header-chart h5, .csv-date-header h5, .csv-options-header h5, .user-header h5{
        font-size: 25px;
    }

    #reports-page .user-body{
        padding-bottom: 50px;
    }

    #reports-page .chart-body{
        padding: 20px 40px 30px 40px;
    }

    #reports-page #firstDraftUsageChart, #reports-page #yoyOutreachChart, #reports-page #firstDraftTypeChart{
        height: 580px !important;
    }

    #reports-page #giftsBarChart, #reports-page #avgGiftBarChart, #reports-page #numBarChart{
        height: 490px !important;
    }
    /* CSV REPORT */
    #reports-page .csv-date-body h6{
        font-size: 20px;
    }

    #reports-page .csv-date-body p{
        font-size: 15px;
    }

    #reports-page .csv-date-body .form-control{
        font-size: 16px;
    }

    #reports-page .deselect-user, .clear-dates{
        font-size: 20px;
    }

    #reports-page .download-csv{
        font-size: 26px;
    }

    /*gift comparison button*/
    #reports-page .button-container{
        font-size: 14px;
        height: 45px;
        width: 200px;
    }

    #reports-page .button-container .button{
        height: 45px;
        width: 200px;
    }

    #reports-page .button-container .button.back img{
        width: 40px;
    }

    #reports-page .average-gift .button.back img{
        width: 56px;
    }

    #reports-page .total-gift .button.back img{
        width: 24px;
    }

    #reports-page .button-flip-vertical .flipper-flip-vertical {
        transform-origin: 100% 22.5px;
    }

    #reports-page .user-outer{
        width: 60%;
    }

    #reports-page .date-range .settings-button{
        width: 41px;
        height: 35px;
    }

    #reports-page .date-range .settings-button svg{
        width: 36px;
        height: 36px;
    }
}

@media(max-width: 1560px){
    #reports-page .thirds{
        width: 33%;
        margin-top: -20px;
        padding-bottom: 16px;
    }

    #reports-page .user-header h5{
        font-size: 16px;
    }

    #fundraiser-dash .success-reporting:hover .half-report{
        width: 53%;
    }
}

@media(max-width: 1420px){
    #reports-page .button-container{
        font-size: 8px;
        height: 46px;
        width: 120px;
    }

    #reports-page .button-container .button{
        height: 35px;
        width: 130px;
    }

    #reports-page .button-flip-vertical .flipper-flip-vertical {
        transform-origin: 100% 17.5px;
    }
}

@media(max-width: 1199px){
    .bottom-spacing{
        padding-bottom: 15px;
    }

    #reports-page .thirds{
        width: 25%;
        padding-bottom: 35px;
    }

    #reports-page .user-chart-container{
        height: auto;
    }

    #reports-page .csv-date-container{
        width: 75%;
        text-align: center;
    }

    #reports-page .csv-date-container label{
        width: 100%;
    }

    #reports-page .big-screen{
        opacity: 1;
    }

    #fundraiser-dash .success-reporting:hover .half-report{
        width: 42%;
    }

    #reports-page .date-range label input{
        width: 130px;
    }
}

@media(max-width: 1065px){
    #reports-page .button-back-container{
        background-image: none;
        width: 25%;
    }
    #reports-page .button-back-container button{
        font-size: 14px;
    }
}

@media(max-width: 991px){
    #reports-page .user-report-container{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #reports-page .csv-date-container{
        width: 100%;
    }

    #reports-page .avatar-user{
        width: 55%;
    }

    #reports-page .button-back-container button{
        font-size: 12px;
        padding-left: 18px;
        padding-right: 18px;
        right: 14px;
    }

    #reports-page .mobile-message{
        display: none;
    }

    #reports-page .icon-avatar{
        top: -30px;
        left: -30px;
        width: 55px;
    }

    #reports-page .user-bank-container h4{
        font-size: 14px;
    }

    #reports-page .user-radio .type-radio, #reports-page .user-checkbox .type-radio{
        font-size: 10px;
    }

    #reports-page .user-radio label:before{
        height: 35px;
        width: 35px;
    }

    #reports-page .user-radio label input[type='radio']:checked+span{
        height: 35px;
        width: 35px;
    }

    #reports-page .user-checkbox label:before{
        height: 30px;
        width: 30px;
    }

    #reports-page .user-checkbox label input[type='checkbox']:checked+span{
        height: 30px;
        width: 30px;
    }

    #reports-page .user-bank-container button, .clear-dates{
        font-size: 14px;
    }

    #reports-page .chart-header input{
        font-size: 11px;
    }

    #reports-page .header-chart h5, .csv-date-header h5, .csv-options-header h5, #reports-page .user-header h5{
        font-size: 16px;
    }

    #reports-page .download-csv{
        font-size: 18px;
    }

    #reports-page .vector-highlight{
        top: 66px;
    }

    #reports-page .user-radio .type-radio, #reports-page .user-checkbox .type-radio{
        font-size: 11px;
    }

    #reports-page .date-range label input{
        width: 100px;
    }

    #reports-page .date-range h6{
        font-size: 11px;
    }

    #reports-page .chart-header-description h5{
        font-size: 13px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media(max-width: 800px) {
    #reports-page .date-range label input {
        width: 95px;
    }
    #reports-page .button-back-container{
         width: 23%;
     }
    #reports-page .button-back-container button{
        font-size: 10px;
    }
}

@media(max-width: 768px){
    #reports-page .avatar-user{
        width: 65%;
    }
    #reports-page{
        width: 100%;
        text-align: center;
    }
    #reports-page .button-back-container{
        position: static;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
    }
    #reports-page .button-back-container button{
        position: static;
    }
    #reports-page .user-radio .type-radio, #reports-page .user-checkbox .type-radio{
        font-size: 10px;
    }
    #reports-page .csv-date-body .col-sm-6+.col-sm-6{
        padding-top: 20px;
    }
    #reports-page .csv-date-body label{
        width: 70%;
    }
    #reports-page .user-header h5{
        font-size: 15px;
    }
}

@media(max-width: 650px) {
    #reports-page .outer-box-container {
        display: none;
    }
    #reports-page .mobile-message {
        display: block;
        font-size: 16px;
    }
    #reports-page {
        height: 100%;
    }
}