.main2 {
    margin: 3px;
    padding: 3px;
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.main2>header {
    /*width: 60px;*/
    height: inherit;
    flex: 1 1 auto;
    margin: 3px;
    padding: 3px;
    border-radius: 3pt;
}

.main2>.homebtn,
.main2>.reguser {
    /*width: 60px;*/
    height: inherit;
    flex: 0 0 auto;
    margin: 3px;
    padding: 3px;
    border-radius: 3pt;
}

.footer {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 50px;
    border-radius: 3pt;
}

body {
    font: 1em Helvetica;
}

.main {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 6px;
    padding: 6px;
    min-height: 400px;
}

.main>.title {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.main>.card,
.main>.inputval {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 0 0 80%;
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    border-radius: 1pt;
    height: 100px;
    position: relative;
}

.main>.search_blk {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 0 0 80%;
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    border-radius: 1pt;
    height: 25px;
    position: relative;
}

.main>.search_blk input#search_str {
    width: 100%;
    text-shadow: 0 0 1px black;
    background-color: white;
    box-shadow: 2px 3px 7px 0px black;
    background-color: #1bff6e;
}

.main>.inputcard,
.main>.buttoncard {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 0 0 60%;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    border-radius: 1pt;
    position: relative;
}

.main>.inputcard,
.main>.buttoncard {
    height: 63px;
}

.main>.cardcount2 {
    height: 105px;
}

.main>.cardcount3 {
    height: 147px;
}

.main>.cardcount4 {
    height: 189px;
}

.main>.cardcount5 {
    height: 231px;
}

.card>.card_footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.main>.title,
.main>.card,
.card>.card_footer,
.card>.card_close,
.main>.search_blk,
.main>.inputcard,
.main>.buttoncard {
    margin: 0.5%;
    padding: 0.7%;
}

.main>.inputcard>input {
    width: 100%;
    font-size: 100%;
}

.main>.buttoncard:nth-child {
    width: 25%;
    font-size: 100%;
}

.card>.card_close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    background-color: #1bff6e;
    z-index: 9999;
}

table {
    border-spacing: 0px;
    border-collapse: collapse;
    background-repeat: no-repeat;
}

table,
td,
th {
    border-width: 2px;
    border-style: outset;
    padding: 0.1em 0.1em 0.1em 0.1em;
}

.main>.button21 {
    display: inline-block;
    line-height: 2em;
    vertical-align: middle;
    text-align: center;
    user-select: none;
    outline: none;
    border-radius: 2px;
    transition: .2s ease-in-out;
    border-radius: 3pt;
    width: 10em;
}

.main>.alert.alert-danger {
    padding: 1px;
}