﻿body {
    padding: 0px;
    margin: 0px;
}

.card-columns-customize-3 {
    column-count: 3 !important;
    column-gap: 0.25rem !important;
}

.font-size-22 {
    font-size: 22px
}

.font-size-24 {
    font-size: 24px
}

.font-size-20 {
    font-size: 20px
}

.font-size-16 {
    font-size: 16px
}

.font-size-18 {
    font-size: 18px !important
}

.line-height25 {
    line-height: 2.5rem
}

.mobile-width {
    width: 30% !important;
}

.table td, .table th {
    padding-top: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.75rem !important;
}

.position-left {
    top: 40% !important;
    left: 9% !important;
}

.position-right {
    top: 20% !important;
    left: 44% !important;
}

.div-alpha {
    filter: alpha(Opacity=80);
    -moz-opacity: 0.3;
    opacity: 0.6;
    background-color: #000000;
    padding: 5px 15px;
}
@media screen and (min-width:200px) and (max-width:350px) {
    .font-size-22 {
        font-size: 3px !important
    }

    .mobile-width {
        width: 40% !important;
    }

    .font-size-20 {
        font-size: 2px !important
    }

    .font-size-16 {
        font-size: 16px !important
    }

    .line-height25 {
        line-height: 0.3rem !important
    }

    .card-img-overlay {
        padding-top: 5px !important;
    }

    .table td, .table th {
        padding-top: 0.25rem !important;
        padding-right: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .position-left {
        top: 40% !important;
        left: 4% !important;
    }

    .position-right {
        top: 15% !important;
        left: 44% !important;
    }
}

@media screen and (min-width:351px) and (max-width:575px) {
    .font-size-22 {
        font-size: 6px !important
    }

    .mobile-width {
        width: 40% !important;
    }

    .font-size-20 {
        font-size: 4px !important
    }

    .font-size-16 {
        font-size: 16px !important
    }

    .line-height25 {
        line-height: 0.4rem !important
    }

    .card-img-overlay {
        padding-top: 5px !important;
    }

    .table td, .table th {
        padding-top: 0.25rem !important;
        padding-right: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .position-left {
        top: 40% !important;
        left: 5% !important;
    }

    .position-right {
        top: 15% !important;
        left: 44% !important;
    }
}

@media screen and (min-width:501px) and (max-width:575px) {
    .font-size-22 {
        font-size: 10px !important
    }

    .mobile-width {
        width: 40% !important;
    }

    .font-size-20 {
        font-size: 6px !important
    }

    .font-size-16 {
        font-size: 16px !important
    }

    .line-height25 {
        line-height: 0.7rem !important
    }

    .card-img-overlay {
        padding-top: 5px !important;
    }

    .table td, .table th {
        padding-top: 0.3rem !important;
        padding-right: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: 0.3rem !important;
    }

    .position-left {
        top: 40% !important;
        left: 6% !important;
    }

    .position-right {
        top: 15% !important;
        left: 44% !important;
    }
}

@media screen and (min-width:576px) and (max-width:750px) {
    .font-size-22 {
        font-size: 12px !important
    }

    .mobile-width {
        width: 40% !important;
    }

    .font-size-20 {
        font-size: 8px !important
    }

    .font-size-16 {
        font-size: 7px !important
    }

    .line-height25 {
        line-height: 0.8rem !important
    }

    .card-img-overlay {
        padding-top: 5px !important;
    }

    .table td, .table th {
        padding-top: 0.3rem !important;
        padding-right: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: 0.3rem !important;
    }

    .position-left {
        top: 40% !important;
        left: 7% !important;
    }

    .position-right {
        top: 15% !important;
        left: 44% !important;
    }
}

@media screen and (min-width:751px) and (max-width:1000px) {
    .font-size-22 {
        font-size: 15px !important
    }

    .mobile-width {
        width: 40% !important;
    }

    .font-size-20 {
        font-size: 12px !important
    }

    .font-size-16 {
        font-size: 10px !important
    }

    .line-height25 {
        line-height: 1.1rem !important
    }

    .card-img-overlay {
        padding-top: 5px !important;
    }

    .table td, .table th {
        padding-top: 0.3rem !important;
        padding-right: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        padding-left: 0.3rem !important;
    }

    .position-left {
        top: 40% !important;
        left: 7% !important;
    }

    .position-right {
        top: 15% !important;
        left: 44% !important;
    }
}

@media screen and (min-width:1001px) and (max-width:1541px) {
    .font-size-22 {
        font-size: 21px !important
    }

    .mobile-width {
        width: 40% !important;
    }

    .font-size-20 {
        font-size: 14px !important
    }

    .font-size-16 {
        font-size: 10px !important
    }

    .line-height25 {
        line-height: 1.6rem !important
    }

    .card-img-overlay {
        padding-top: 5px !important;
    }

    .table td, .table th {
        padding-top: 0.6rem !important;
        padding-right: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        padding-left: 0.6rem !important;
    }

    .position-left {
        top: 40% !important;
        left: 7% !important;
    }

    .position-right {
        top: 20% !important;
        left: 44% !important;
    }
}
        
