a {
    text-decoration: none;
}

.accpic {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: blue;
    background-image: url(../pic/defultpic-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px;
}

.upagecount {
    direction: rtl;
    /* text-align: right; */
    display: grid;
    grid-gap: 15px;
    padding: 10px;
    position: relative;
    z-index: 20;
}

.upagecount .item1,
.upagecount .item3 {
    font-size: 100%;
    background-color: white;
    border-radius: 10px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
    padding: 10px;
    position: relative;
    z-index: 1;
}

.upagecount .item1 {
    grid-area: menuN;
}

.upagecount .item2 {
    grid-area: body;
    padding: 20px 20px 20px 0;
    width: auto;
}

.upagecount .item3 {
    grid-area: drw2;
}

.upage-mnavi1 {
    display: block;
    text-align: center;
}

.upage_mnavi2 {
    display: block;
}


/* .upage_mnavist-2 {
    display: block;
    width: auto;
    transition: all 0.3;
    padding: 10px;
    background-color: white;
    text-align: right;
}

.upage_mnavist-2:hover {
    background-color: rgba(230, 230, 235, 1);
    color: grey;
} */
.table1row2 {
    background-color: rgb(237, 242, 235);
}

.table1row2:nth-of-type(odd) {
    background: rgb(228, 234, 226);
}


.upage_mnavist-dra {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}

.floatdiv {
    display: block;
    position: relative;
}

.labletext {
    display: inline-block;
    width: 93%;
}

.lableic {
    display: inline-block;
    width: 5%;
}

.upage_mnavist,
.upage_mnavist_act,
.upage_mnavist-2,
.listbuttselected1 {
    display: block;
    width: 100%;
    padding: 7px 5px;
    margin: 2px 0;
    text-align: center;
    color: grey;
    border-radius: 5px;
    transition: all 0.3;
}

.upage_mnavist,
.upage_mnavist-2 {
    /* background-color: rgb(92, 146, 245); */
    background-image: linear-gradient(to right, rgb(0, 0, 0, 0.05), white 30%, white, white 70%, rgb(0, 0, 0, 0.05));
}

.upage_mnavist:hover,
.upage_mnavist-2:hover {
    filter: drop-shadow(0 0 5px rgb(53, 112, 223));
    color: black;
    opacity: 0.8;
}

.listbuttselected1 {
    /* background-color: rgb(92, 146, 245); */
    /* background-image: linear-gradient(to right, rgb(0, 0, 0, 0.3), white 4%, white, white 96%, rgb(0, 0, 0, 0.3)); */
    background-image: linear-gradient(to right, rgb(200, 0, 0, 0.3), white 30%, white, white 70%, rgb(200, 0, 0, 0.3));
    opacity: 0.8;
}

.tablehead {
    width: auto;
    display: grid;
    grid-template-columns: auto 189px;
    margin: 0 0 10px 0;
    border-style: solid;
    border-color: grey;
    border-width: 0 0 1px 0;
    padding: 10px 0;
}

.subject1 {
    font-size: 140%;
    font-weight: bold;
    color: blueviolet;
    text-align: center;
}


.tabletopdiv_s {
    color: grey;
    font-weight: bold;
}

.tabletopdiv_s {
    color: grey;
    font-weight: bold;
    font-size: 110%;
}

.valuefieldR .value_{
    font-size: 120%;
    padding: 10px;
}

.valuefieldR .msgfield{
    padding: 10px 0 5px 0;
}

.butt1,
.butt1a {
    background-color: cadetblue;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    width: 150px;
    font-size: 110%;
    color: white;
}

.butt1 {
    padding: 20px;
}

.butt1:hover {
    background-color: rgb(81, 141, 143);
}

.checkboxB {
    display: inline-block;
    min-width: 50px;
    padding: 0 10px;
}

.table1 {
    color: black;
    width: 100%;
    direction: rtl;
    text-align: center;
    font-size: 90%;
    border-collapse: collapse;
}

.table1head {
    background-color: rgb(206, 215, 202);
}

.butt2_a {
    width: 40px;
    height: 40px;
    display: inline-block;
    font-size: 140%;
    padding: 5px 0;
    border-radius: 5px;
}

.butt2_a:hover {
    background-color: rgba(250, 250, 250, 0.3);
}

.smalbutt,
.smalbutt_unact {
    color: black;
    display: inline-block;
    width: auto;
    border: none;
    border-radius: 10px;
    padding: 5px 10px;
    background-color: rgb(236, 206, 160);
}

.smalbutt {
    text-decoration: none;
    cursor: pointer;
}

.smalbutt_unact {
    cursor: auto;
    background-color: rgb(185, 185, 185);
    color: grey;
}

.smalbutt:hover {
    background-color: rgb(204, 162, 95);
}

.subject2 {
    font-size: 115%;
    font-weight: bold;
    color: brown;
    text-align: center;
    padding: 5px 0;
}

.commenttext {
    text-align: right;
    color: red;
    font-size: 80%;
}

.formfieldT1,
.formfieldT2 {
    display: grid;
    grid-gap: 10px;
    padding: 10px 0 0 0;
}

.formfieldT2 span{
    padding: 8px 0;
}

.formfieldT1 {
    grid-template-columns: 250px auto;
}

@media (max-width: 450px) {
    .formfieldT1,
    .formfieldT2 {
        grid-template-columns: auto;
    }
}

@media (min-width: 451px) {
    .formfieldT1,
    .formfieldT2 {
        grid-template-columns: 20% auto;
    }
}

.inputtip1,
.inputtip1s,
.inputtip10,
.textareatip1 {
    padding: 5px;
    font-size: 120%;
    border-radius: 5px;
    border-width: 1px;
    border-color: rgb(155, 154, 154);
    border-style: solid;
}

.inputtip11 {
    padding: 5px;
    font-size: 120%;
}

.inputtip10 {
    display: block;
}

.inputtip1s {
    display: inline-block;
}

.inputtip1,
.textareatip1 {
    display: block;
    width: 100%;
}

.inputCommentTip10 {
    padding: 15px 5px;
    color: red;
    font-size: 90%;
}

.button1,
.button1_green,
.button10 {
    text-align: center;
    padding: 12px;
    border: 0;
    border-radius: 15px;
    color: white;
    cursor: pointer;
}

.button10 {
    background-color: blueviolet;
}

.button10:hover {
    background-color: rgb(188, 136, 236);
}

.button1,
.button1_green {
    width: 150px;
    display: inline-block;
}

.button1 {
    background-color: blueviolet;
}

.button1:hover {
    background-color: rgb(188, 136, 236);
}

.msgfield,
.msgfield-hide {
    color: red;
    font-size: 80%;
    text-align: right;
}

.msgfield {
    display: block;
}

.msgfield-hide {
    display: none;
}

@media (max-width: 800px) {
    .upagecount {
        grid-template-columns: auto;
        grid-template-areas: 'menuN' 'drw2' 'body';
    }
    .item2 {
        padding: 20px 0 20px 0;
    }
    .upage_mnavist-dra {
        width: 100%;
        position: relative;
    }
    .floatdiv {
        display: block;
        position: relative;
    }
}

@media (min-width: 801px) and (max-width: 1200px) {
    .upagecount {
        grid-template-columns: 350px auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'menuN body' 'drw2 body';
    }
    .item2 {
        padding: 0 10px 0 0;
    }
    .upage_mnavist-dra {
        width: 350px;
        position: absolute;
    }
    .floatdiv {
        display: block;
        position: relative;
        top: -40px;
        left: -330px;
    }
}

@media (min-width: 1201px) and (max-width: 1500px) {
    .upagecount {
        grid-template-columns: 350px auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'menuN body' 'drw2 body';
    }
    .item2 {
        padding: 0 10px 0 0;
    }
    .upage_mnavist-dra {
        width: 350px;
        position: absolute;
    }
    .floatdiv {
        display: block;
        position: relative;
        top: -40px;
        left: -330px;
    }
}

@media (min-width: 1501px) {
    .upagecount {
        grid-template-columns: 350px auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'menuN body' 'drw2 body';
    }
    .item2 {
        padding: 0 10px 0 0;
    }
    .upage_mnavist-dra {
        width: 350px;
        position: absolute;
    }
    .floatdiv {
        display: block;
        position: relative;
        top: -40px;
        left: -330px;
    }
}