/*Module*/
.module {
    position: absolute;
    background: #666;
    padding: 5px;
    top: 10%;
    left: 10%;
    display: flex;
    flex-direction: column;
    width: 50vw;
}
.module>div h2{
    width: 75%;
}
.module button {
    border: none;
    background: #999;
    padding: 5px;
    cursor: pointer;
    border-radius: 5px;
    margin: 5px;
    float: right;
    transition: .7s;
}
.module .closeBtn{
    float: right;
}
.module h2{
    float: left;
    display: block;
    width: 50%;
}
.module button.valid {
    background: #3A622A;
    color: #FFF;
}

.module button:hover {
    background: #555;
}

.module button.valid:hover {
    background: #080;
}
.moduleContent{
    display: flex;
    flex-direction: column;
    max-height: 50vh;
    overflow: auto;
}
[name=closeBtn] {
    float: right;
    text-decoration: none;
    color: #000;
    padding: 3px;
    display: block;
    background: #333;
    margin: 6px;
}

[name=closeBtn]:hover {
    color: #FFF;
    background: #999;
}

@media (max-width: 576px) {
    .module {
        width: 90%;
        left: 5%;
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .module {
        width: 80%;
        left: 10%;
    }
}