/*==============  Mobile   ==============*/
@media (min-width: 300px) and (max-width: 450px) {
    .lblselectBeneficiary {
        width: 64vw;
        margin-right: 10vw;
        margin-top: 35px;
        text-align:center
    }

    .cardbeneficiary {
        border-top-left-radius: 8%;
        border-top-right-radius: 8%
    }

    .imgBeneficiary {
        width: 130px;
        height: 120px;
    }

    .doctorname {
        font-size:18px;
        color:darkblue
    }


    .doctorspecial{
        font-size:13px
    }


    .cardheaderBeneficiry {
        background-color: #8CC0DE;
        font-size: 16px;
        width:80%
    }


    .cardbodyspan1Beneficiary {
        width: 20px;
        font-size: 14px
    }

    .cardbodyspan2Beneficiary {
        width: 40px;
        font-size: 14px;
        color: blue
    }


    .cardbodyspan3Beneficiary {
        width: 60px;
        font-size: 14px
    }

    .cardbodyspan4Beneficiary{
        color:red
    }

    .buttonSelectbene{
        font-weight:bold ;
        color:white ;
        font-size:17px;
        cursor:pointer
    }

        .buttonSelectbene:hover {
            font-weight: bolder;
            color: orange;
        }
}







/*==============  Mini Tablet   ==============*/
@media (min-width: 451px) and (max-width: 700px) {
    .lblselectBeneficiary {
        width: 38vw;
        margin-right: 3vw;
        margin-top: 25px;
        text-align: center
    }

    .cardbeneficiary {
        border-top-left-radius: 8%;
        border-top-right-radius: 8%
    }

    .imgBeneficiary {
        width: 100px;
        height: 90px;
    }

    .doctorname {
        font-size: 18px;
        color: darkblue
    }


    .doctorspecial {
        font-size: 13px
    }


    .cardheaderBeneficiry {
        background-color: #8CC0DE;
        font-size: 16px;
        width: 80%
    }


    .cardbodyspan1Beneficiary {
        width: 20px;
        font-size: 14px
    }

    .cardbodyspan2Beneficiary {
        width: 40px;
        font-size: 14px;
        color: blue
    }


    .cardbodyspan3Beneficiary {
        width: 60px;
        font-size: 14px
    }

    .cardbodyspan4Beneficiary {
        color: red
    }

    .buttonSelectbene {
        font-weight: bold;
        color: white;
        font-size: 17px;
        cursor: pointer
    }

        .buttonSelectbene:hover {
            font-weight: bolder;
            color: orange;
        }
}






/*==============   Tablet   ==============*/
@media (min-width: 701px) and (max-width: 900px) {
    .lblselectBeneficiary {
        width: 25vw;
        margin-right: 1vw;
        margin-top: 25px;
        text-align: center
    }

    .cardbeneficiary {
        border-top-left-radius: 8%;
        border-top-right-radius: 8%
    }

    .imgBeneficiary {
        width: 100px;
        height: 90px;
    }

    .doctorname {
        font-size: 18px;
        color: darkblue
    }


    .doctorspecial {
        font-size: 13px
    }


    .cardheaderBeneficiry {
        background-color: #8CC0DE;
        font-size: 16px;
        width: 80%
    }


    .cardbodyspan1Beneficiary {
        width: 20px;
        font-size: 14px
    }

    .cardbodyspan2Beneficiary {
        width: 40px;
        font-size: 14px;
        color: blue
    }


    .cardbodyspan3Beneficiary {
        width: 60px;
        font-size: 14px
    }

    .cardbodyspan4Beneficiary {
        color: red
    }

    .buttonSelectbene {
        font-weight: bold;
        color: white;
        font-size: 17px;
        cursor: pointer
    }

        .buttonSelectbene:hover {
            font-weight: bolder;
            color: orange;
        }
}






/*==============  Small PC   ==============*/
@media (min-width: 901px) and (max-width: 1200px) {
    .lblselectBeneficiary {
        width: 18.5vw;
        margin-right: 1vw;
        margin-top: 25px;
        text-align: center
    }

    .cardbeneficiary {
        border-top-left-radius: 8%;
        border-top-right-radius: 8%
    }

    .imgBeneficiary {
        width: 100px;
        height: 90px;
    }

    .doctorname {
        font-size: 18px;
        color: darkblue
    }


    .doctorspecial {
        font-size: 13px
    }


    .cardheaderBeneficiry {
        background-color: #8CC0DE;
        font-size: 16px;
        width: 80%
    }


    .cardbodyspan1Beneficiary {
        width: 20px;
        font-size: 14px
    }

    .cardbodyspan2Beneficiary {
        width: 40px;
        font-size: 14px;
        color: blue
    }


    .cardbodyspan3Beneficiary {
        width: 60px;
        font-size: 14px
    }

    .cardbodyspan4Beneficiary {
        color: red
    }

    .buttonSelectbene {
        font-weight: bold;
        color: white;
        font-size: 17px;
        cursor: pointer
    }

        .buttonSelectbene:hover {
            font-weight: bolder;
            color: orange;
        }
}




/*==============   PC   ==============*/
@media (min-width: 1201px) and (max-width: 1450px) {
    .lblselectBeneficiary {
        width: 14.5vw;
        margin-right: 1vw;
        margin-top: 25px;
        text-align: center
    }

    .cardbeneficiary {
        border-top-left-radius: 8%;
        border-top-right-radius: 8%
    }

    .imgBeneficiary {
        width: 100px;
        height: 90px;
    }

    .doctorname {
        font-size: 18px;
        color: darkblue
    }


    .doctorspecial {
        font-size: 13px
    }


    .cardheaderBeneficiry {
        background-color: #8CC0DE;
        font-size: 16px;
        width: 80%
    }


    .cardbodyspan1Beneficiary {
        width: 20px;
        font-size: 14px
    }

    .cardbodyspan2Beneficiary {
        width: 40px;
        font-size: 14px;
        color: blue
    }


    .cardbodyspan3Beneficiary {
        width: 60px;
        font-size: 14px
    }

    .cardbodyspan4Beneficiary {
        color: red
    }

    .buttonSelectbene {
        font-weight: bold;
        color: white;
        font-size: 17px;
        cursor: pointer
    }

        .buttonSelectbene:hover {
            font-weight: bolder;
            color: orange;
        }
}


/*==============   Large PC   ==============*/
@media (min-width: 1451px) and (max-width: 2200px) {
    .lblselectBeneficiary {
        width: 13.5vw;
        margin-right: 1vw;
        margin-top: 25px;
        text-align: center
    }

    .cardbeneficiary {
        border-top-left-radius: 8%;
        border-top-right-radius: 8%
    }

    .imgBeneficiary {
        width: 100px;
        height: 90px;
    }

    .doctorname {
        font-size: 18px;
        color: darkblue
    }


    .doctorspecial {
        font-size: 13px
    }


    .cardheaderBeneficiry {
        background-color: #8CC0DE;
        font-size: 16px;
        width: 80%
    }


    .cardbodyspan1Beneficiary {
        width: 20px;
        font-size: 14px
    }

    .cardbodyspan2Beneficiary {
        width: 40px;
        font-size: 14px;
        color: blue
    }


    .cardbodyspan3Beneficiary {
        width: 60px;
        font-size: 14px
    }

    .cardbodyspan4Beneficiary {
        color: red
    }

    .buttonSelectbene {
        font-weight: bold;
        color: white;
        font-size: 17px;
        cursor: pointer
    }

        .buttonSelectbene:hover {
            font-weight: bolder;
            color: orange;
        }
}