.button { 
padding: 9px 12px; 
display: inline-block; 
border: 2px solid gray;
margin: 2px;
}

.icon-button { 
padding: 4px 7px; 
border: 2px solid gray;
font-size: 18px;
}

.button:hover{
    background-color: #aed9ee;
}
.button:focus, .icon-button:focus {
    outline: 2px solid blue;
}
.primary {
background-color: #0464b3;
color: white;
}

.container {
    border: 2px solid #ccc;
    padding: 20px;
    margin-top: 100px;
    max-width: 600px;
}    
.panel-1{
    padding: 5px;
}
.panel-1 label { margin: 5px;}
.panel-1 input { 
    vertical-align: middle;    
    width: 276px;
    max-width: 70%;
    padding: 7px 10px;
    border: 1px solid #000;
}
.panel-1 button { margin: 5px; vertical-align: middle;}

.tooltip label { margin: 5px;}
.tooltip-wrapper {
position: relative;
}
.tooltip {
box-sizing: border-box;
font-size: 13px;
position: absolute;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.3);
min-width: 104px;

margin-right: -340px;
padding: 8px 6px;
line-height: 16px;
z-index: 70;
top: -25px;
left: 80%;
}
.select-user { 
    padding: 10px 30px 0px 10px;
    width: 350px;
}

.hidden { display: none;}
.visible { display: block;}

@media screen and (max-width: 500px) {
    .container {
        padding: 5px;
    }  
    .select-user { 
        padding: 2px 6px 0px 2px;
        width: 260px;
    }
    .panel-1 label {
        display: inline-block;
        width: 100%;
    }  
}
@media screen and (max-width: 300px) {
    .panel-1 input { 
        width: 236px;
        max-width: 60%;
    }
        
}