.contentpanel {
        width: 500px;
        height: 650px;
       padding: 0px 20px 0px 20px;
    }

  
        @media screen and (max-width:450px) {
         .contentpanel {
        width: 400px;        
    }
}
    .dialogC{
        position:fixed;
        top:150px;
        background-color:white;
        right:30%;
        height:510px;
        z-index:10;
        display:none;
    }

@media screen and (max-width:768px) {
    .dialogC{
        right: 10%; 
        height:600px; 
        top:10%;      
    }
     h3{
       margin-bottom:10px;
       margin-top:10px;
   }
       .contentpanel {
        width: 400px;        
    }
}
@media screen and (min-width:450px) { 
    .dialogC{
        height:510px;  
        top:15%;   
    }}

@media screen and (max-width:990px) { 
    .dialogC{
        height:600px;  
    }}

@media screen and (max-width:415px) { 
   .contentpanel{
       width:350px;
   }

   .dialogC{
       height:635px;
       z-index: 10000;
   }
}

@media screen and (max-width:376px) { 
   .contentpanel{
       width:300px;
       font-size:13px;
   }

   .form-group{
       margin-bottom:8px;
   }

   .dialogC{
       height:565px;
       z-index: 10000;
   }
   h3{
       margin-bottom:10px;
       margin-top:10px;
   }
}


@media screen and (max-width:321px) { 
   .contentpanel{
       width:270px;
       font-size:11px;
   }

   .form-group{
       margin-bottom:5px;
   }

   .dialogC{
       height:515px;
       z-index: 10000;
       top:9%;
   }

   h3{
       font-size:initial;
       margin-bottom:5px;
       margin-top:5px;
   }
}


@media screen and (max-width:281px) { 
   .contentpanel{
       width:240px;
   }

   .dialogC{
       height:535px;
       z-index: 10000;
   }

}

@media screen  and (min-width:415px)  and (max-width:541px) { 
   
   .dialogC{
       height:610px;
       z-index: 10000;
   }

}