/* @font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir.eot');
    src: url('../fonts/Vazir.eot?#iefix') format('embedded-opentype'), url('../fonts/Vazir.woff2') format('woff2'), url('../fonts/Vazir.woff') format('woff'), url('../fonts/Vazir.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir-Bold.eot');
    src: url('../fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Vazir-Bold.woff2') format('woff2'), url('../fonts/Vazir-Bold.woff') format('woff'), url('../fonts/Vazir-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
} */

a {
    text-decoration: none;
    color: black;
}

.hr {
    size: 2px;
    background-color: crimson;
}

table {
    border-collapse: collapse;
}

li {
    list-style-type: none;
}

span {
    display: inline;
}

i {
    display: inline;
}


/* .formfieldT1 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px auto;
    padding: 10px 0;
} */

.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;
    }
}

.masterImage {
    width: auto;
    height: 600px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: sticky;
    z-index: -10;
}

.masterheader1 {
    background-color: rgba(250, 250, 250, 0.317);
    border-radius: 15px;
    margin: 20px;
    padding: 10px;
    position: relative;
    top: -600px;
    display: grid;
    height: 80px;
    grid-template-columns: 300px auto 80px;
    grid-gap: 10px;
}

.masterheader2 {
    background-color: rgba(112, 81, 81, 0.139);
    border-radius: 15px;
    margin: 20px;
    padding: 10px;
    display: grid;
    height: 80px;
    grid-template-columns: 300px auto 80px;
    grid-gap: 10px;
}

.crystalBtn1 {
    display: block;
    width: 100%;
    padding: 15px 10px 5px 10px;
    background-color: rgba(250, 250, 250, 0.2);
    border-style: solid;
    border-radius: 10px;
    border-color: rgba(250, 250, 250, 0.5);
    border-width: 1px;
    color: rgb(91, 66, 66);
    transition: all 0.3s ease-in;
    text-align: center;
}

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

.acc_btn {
    padding: 10px;
    margin: 2px 0;
    transition: all 0.3s ease-out;
    display: block;
    text-align: center;
}

.acc_btn:hover {
    background-color: rgb(230, 230, 230);
}

.acc_count1 {
    direction: ltr;
    text-align: left;
}

.acc_itemc1,
.acc_itemc2 {
    margin: 10px 0;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    width: 200px;
    position: relative;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}

.acc_itemc1 {
    display: none;
}

.acc_itemc2 {
    display: inline-block;
}

.headerbtn2 {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../pic/account-1.svg);
}

.tablebox {
    padding: 20px 0;
}

.tablesub {
    text-align: center;
    padding: 15px 0;
    font-size: 25px;
    font-weight: bold;
    color: red;
}

.tablebody {
    overflow-x: auto;
    display: table;
    width: auto;
}

.table_t1 {
    text-align: center;
    width: auto;
    display: block;
}

.table_t1_col21 {
    max-width: 150px;
    text-align: center;
}

.table_t1_inp {
    height: 60px;
    width: 150px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.table_t1_tr1 {
    height: 70px;
    background-color: cadetblue;
}

.emptyprocat {
    background-color: yellow;
    text-align: center;
    padding: 10px;
}

.table_t1_tr2,
.table_t1_tr3 {
    height: 60px;
}

.table_t1_tr2 {
    background-color: rgb(250, 250, 250);
}

.table_t1_tr3 {
    background-color: rgb(240, 240, 240);
}

.table_t1_col1 {
    width: 400px;
}

.table_t1_col2 {
    width: auto;
}


/* .valuefieldR {
    background-color: rgba(250, 250, 250, 0);
} */


/* .valuefieldER {
    background-color: rgba(255, 0, 0, 0.1);
} */

.header_imp_box {
    position: relative;
    top: 10px;
    display: inline-block;
    width: auto;
    height: 2px;
}

.header_imp_box1 {
    padding: 10px 30px 15px 30px;
    background-image: linear-gradient(to bottom, rgba(20, 180, 14, 0.324) 50%, rgba(0, 0, 0, 0));
    /* background-color: green; */
    border-radius: 30px 30px 0 0;
    /* border-style: solid;
    border-color: white;
    border-width: 2px; */
    /* filter: drop-shadow(0 0 7px rgb(200, 200, 200)); */
    color: grey;
}

.inputfield,
.valuefield {
    width: auto;
    text-align: right;
    padding: 5px 0;
    margin: 5px 0;
}

.inputfield {
    border-color: rgb(202, 201, 201);
    border-style: solid;
    border-width: 0 0 1px 0;
}


.tablecoll1 {
    padding: 20px 10px;
    min-height: 60px;
    width: auto;
}

.tableTip1 {
    padding: 30px 0;
    display: block;
}

.tablerowTip2 {
    padding: 5px;
    background-color: rgb(214, 225, 225);
    border-style: solid;
    border-color: grey;
    border-width: 2px 0 2px 0;
}

.iconclass-s1 {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: auto;
}

.tablerowTip4 {}

.tablerowTip3 {}

.tablerowTip1,
.tablerowTip3 {
    padding: 20px 10px;
}

.tablerowTip1 {
    border-style: solid;
    border-color: grey;
    border-width: 0 0 1px 0;
}

.ipgtable {
    width: 100%;
}

.ipgtablerow_h {
    background-color: brown;
    color: white;
}

.ipgtablerow1 {
    background-color: rgb(230, 230, 230);
}

.ipgtablerow2 {
    background-color: rgb(240, 240, 240);
}

.ipgtablecol0 {
    padding: 10px 5px;
    text-align: center;
}

.ipgtablecol1,
.ipgtablecol2 {
    padding: 10px 5px;
}

.ipgtablecol1 {
    text-align: right;
}

.ipgtablecol2 {
    text-align: left;
}

.btnviv {
    display: grid;
    grid-template-columns: auto 150px;
    grid-gap: 10px;
    padding: 20px 0;
}

.smalBtn,
.smalBtnDis {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    color: white;
    text-align: center;
    vertical-align: middle;
}

.smalBtnDis {
    background-color: rgb(181, 178, 183);
    cursor: auto;
}

.smalBtn {
    padding: 10px 0 0 0;
    background-color: blueviolet;
}

.smalBtn:hover {
    background-color: rgb(178, 114, 238);
}

.grid_box_v1 {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    padding: 30px 10px;
}

.boxitemv2 {
    padding: 10px;
    margin: 2px 0;
    background-color: white;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(220, 220, 220);
    display: grid;
    grid-template-columns: auto auto;
}

.import_div {
    margin: 0 0 40px 0;
    padding: 20px 10px;
    background-color: white;
    border-radius: 3px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
}

.bigBtnTip1,
.BtnTip1,
.BtnTip1Del {
    display: inline-block;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.bigBtnTip1,
.BtnTip1 {
    background-color: rgb(240, 239, 239);
}

.BtnTip1,
.BtnTip1Del {
    width: 40px;
    height: 40px;
    display: inline-block;
    padding: 5px 0 0 0;
}

.BtnTip1Del {
    background-color: rgb(253, 213, 198);
}

.BtnTip1Del:hover {
    background-color: rgb(252, 204, 186);
}

.bigBtnTip1 {
    padding: 20px;
    width: 100%;
    min-height: 80px;
}


/* .BtnTip1,
.BtnTip1Del {
    padding: 10px 20px;
    width: auto;
    margin: 10px 0;
} */

.bigBtnTip1:hover,
.BtnTip1:hover {
    background-color: rgb(191, 190, 188);
    border-radius: 15px;
}

.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;
    ;
}

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

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

.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;
}
.pnaviInp{
    text-align: center;
    border-color: grey;
    border-width: 1px;
    height: 25px;
    border-radius: 10px;
}

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

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

.butt1 {
    padding: 10px 20px;
}

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

.butt1a {
    text-align: center;
    padding: 10px 0;
}

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

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

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

.table1culauto,
.table1cul1,
.table1cul2,
.table1cul3,
.table1cul4 {
    padding: 15px 4px;
    vertical-align: middle;
    display: inline-block;
}

.table1culauto {
    width: 130px;
}

.table1row1 {
    background-color: rgb(194, 233, 179);
}

.table1row2 {
    background-color: rgb(237, 242, 235);
}

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

.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);
}

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

.inputfield {
    border-color: rgb(202, 201, 201);
    border-style: solid;
    border-width: 0 0 1px 0;
}



/* .valuefieldR {
    background-color: rgba(250, 250, 250, 0);
} */


/* .valuefieldER {
    background-color: rgba(255, 0, 0, 0.1);
} */

.formmsg,
.formmsg-hide {
    color: red;
    padding: 20px 10px;
}

.formmsg {
    display: block;
}

.formmsg-hide {
    display: none;
}

.lablespan {
    display: inline-block;
    width: 150px;
}

.lablespan2 {
    display: inline-block;
    width: 200px;
}

.inputfield,
.valuefield {
    width: auto;
    text-align: right;
    padding: 5px 0;
    margin: 5px 0;
}

.inputfield {
    border-color: rgb(202, 201, 201);
    border-style: solid;
    border-width: 0 0 1px 0;
}

.inputfield1 {
    text-align: right;
    padding: 5px 0;
}

.bkpCountainer {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* .valuefieldR {
    background-color: rgba(250, 250, 250, 0);
} */


/* .valuefieldER {
    background-color: rgba(255, 0, 0, 0.1);
} */

.inpcaptip1 {
    display: inline-block;
    padding: 5px;
    font-size: 120%;
}

.product_item1 {
    padding: 20px;
    border-radius: 20px;
    /* background-color: white; */
    filter: drop-shadow(0 0 5px rgb(223, 221, 221));
}

.product_item1:hover {
    filter: drop-shadow(0 0 10px rgb(240, 240, 240));
}

.inputtip1,
.inputtip1s,
.inputtip10,
.textareatip1,
.inputtip11 {
    padding: 5px;
    font-size: 120%;
}

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

.inputtip10 {
    display: block;
}

.inputtip1s {
    display: inline-block;
}

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

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

.inputStar {
    padding: 10px 5px;
    color: red;
}

.lablespanTip10 {
    padding: 10px 5px;
}

@media (max-width:500px) {
    /* .inputtip1 {
        width: 90%;
    } */
    .inputtip1s {
        width: 90%;
    }
    /* .textareatip1 {
        width: 90%;
    } */
}

@media (min-width:501px) {
    /* .inputtip1 {
        width: 300px;
    } */
    .inputtip1s {
        width: 312px;
    }
    /* .textareatip1 {
        width: 70%;
    } */
}

.formmsg-hide {
    display: none;
}

.starrspan,
.starrspan-hide {
    color: red;
    font-size: 130%;
}

.starrspan {
    display: inline;
}

.starrspan-hide {
    display: none;
}

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

.msgfield {
    display: block;
}

.msgfield-hide {
    display: none;
}

.valuespan {
    font-size: 100%;
    font-weight: bold;
    color: black;
}

.inputboxsub {
    width: auto;
    font-weight: bold;
    font-size: 105%;
    color: rgb(98, 60, 133);
    text-align: right;
    padding: 10px 0 5px 0;
}

.inputboxframe {
    width: auto;
    border-radius: 10px;
    border-style: solid;
    border-color: rgb(172, 172, 172);
    border-width: 1px;
    padding: 10px;
    direction: rtl;
    background-color: rgb(255, 255, 255, 0.8);
    font-size: 95%;
}

.inputboxmsg {
    font-size: 80%;
    color: yellow;
    background-color: red;
    padding: 5px;
}

.inputboxmsg-hide {
    display: none;
}

.loginsubjectM,
.loginsubjectS {
    border-style: solid;
    margin: 0 5px;
}

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

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

.btn1 {
    display: inline-block;
    width: auto;
    padding: 10px;
    background-color: blue;
    border-radius: 10px;
    color: white;
    transition: all 0.3s ease;
    text-align: center;
}

.btn1:hover {
    background-color: blueviolet;
    color: white;
}

.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);
}

.button1_green {
    background-color: green;
}

.button1_green:hover {
    background-color: rgb(30, 190, 30);
}

.textlink {
    color: rgb(35, 35, 201);
}

.textlink:hover {
    color: rgb(84, 84, 235);
}

.butt2 {
    width: 30px;
    height: 30px;
    display: inline-block;
    /* background-image: url("../pic/edit_icon_1.svg"); */
    background-size: 30px;
    background-repeat: no-repeat;
    background-color: rgba(248, 249, 250, 0);
    border: 0;
    cursor: pointer;
}

.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);
}

.boxbold {
    width: auto;
    background-color: rgb(245, 245, 245);
    padding: 20px 20px 0 20px;
    /* filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3)); */
    /* background-image: linear-gradient(rgb(81, 197, 197), rgb(147, 248, 218), white); */
}

.fieldcomplex {
    border-style: solid;
    border-color: grey;
    border-width: 1px;
    border-radius: 10px;
    padding: 20px;
}

.fieldcomplexSub {
    padding: 10px 0 5px 0;
    font-size: 105%;
}

.inputDivTip1,
.inputDivTip2 {
    padding: 10px 0;
    display: grid;
    /* grid-template-columns: 200px 300px auto; */
}

@media (max-width: 200px) {
    .inputDivTip1,
    .inputDivTip2 {
        grid-template-columns: auto auto auto;
    }
}

@media (min-width: 1000px) {
    .inputDivTip1 {
        grid-template-columns: 200px 400px auto;
    }
    .inputDivTip2 {
        grid-template-columns: 200px 700px auto;
    }
}

.centerMsg {
    max-width: 700px;
    /* min-height: 500px; */
    padding: 30px;
    margin: 100px auto;
}

.centerMsg2 {
    background-color: white;
    border-radius: 20px;
    filter: drop-shadow(0 0 10px rgb(220, 220, 220));
}

.inputboxframe {
    border-style: solid;
    border-color: grey;
    border-width: 1px;
    border-radius: 10px;
    padding: 20px;
}

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

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

.loginsubjectM {
    border-color: grey;
    border-width: 0 0 2px 0;
    font-size: 140%;
    padding: 10px 0;
}

.loginsubjectS {
    border-color: rgb(220, 220, 220);
    border-width: 0 0 1px 0;
    font-weight: normal;
    font-size: 95%;
    padding: 15px 0;
}

.colcont {
    display: grid;
    grid-template-columns: 28% 44% 28%;
}

.inputboxM {
    padding: 10px 0;
}

.inputbox {
    padding: 10px 0;
}

.inputfield1 {
    padding: 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
}

.submitbtn1,
.submitbtn1_dis {
    border-radius: 10px;
    color: white;
    padding: 12px 10px;
    border-width: 0;
}

.submitbtn1 {
    background-color: blue;
    transition: 0.2s ease;
}

.submitbtn1:hover {
    background-color: grey;
}

.submitbtn1_dis {
    background-color: grey;
    pointer-events: none;
    cursor: pointer;
}

.submitbtncot {
    text-align: center;
}

.inputfield1lab {
    padding: 10px 0;
}

.loginsubject {
    font-weight: bold;
    text-align: center;
    padding: 0 0 50px 0;
    color: blueviolet;
}

.logincount {
    display: grid;
    padding: 0 20px;
}

.login1 {
    grid-area: login1;
}

.login2 {
    grid-area: login2;
}

.login3 {
    grid-area: login3;
}

.login4 {
    grid-area: login4;
}

.login6 {
    grid-area: login6;
}

.login7 {
    grid-area: login7;
}

.login8 {
    grid-area: login8;
}

.login9 {
    grid-area: login9;
}

@media (max-width: 650px) {
    .logincount {
        grid-template-columns: 0 auto 0;
        grid-template-rows: 30% auto 30%;
        grid-template-areas: 'login1 login2 login3' 'login4 frameshadow login6' 'login7 login8 login9';
        /* padding: 20px; */
    }
    .inputbox {
        display: block;
    }
    .inputfield1lab {
        display: block;
        text-align: center;
    }
    .inputfield1 {
        display: block;
        width: 100%;
    }
    .loginframe {
        margin: 20px;
        padding: 5px;
    }
}

@media (min-width: 651px) {
    .logincount {
        grid-template-columns: auto 600px auto;
        grid-template-rows: 50% auto 50%;
        grid-template-areas: 'login1 login2 login3' 'login4 frameshadow login6' 'login7 login8 login9';
        /* padding: 100px 20px; */
    }
    .inputbox {
        display: grid;
        grid-template-columns: auto 300px;
    }
    .loginframe {
        margin: 50px;
        padding: 10px;
    }
}

.msgTip1 {
    max-width: 800px;
    min-height: 300px;
    padding: 30px;
    background-color: white;
    border-radius: 15px;
    filter: drop-shadow(0 0 10px rgb(230, 230, 230));
    margin: 25% auto;
    text-align: center;
}

.loginspa1 {
    grid-area: spa1;
}

.loginspa2 {
    grid-area: spa2;
}

#overlayer {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 7100;
    background: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.loader {
    z-index: 7700;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* background-color: rgba(255, 255, 255, 0.5); */
}


/* .frameshadow {
    background-color: white;
    border-radius: 15px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
    grid-area: frameshadow;
} */

.frameshadow {
    background-color: white;
    border-radius: 15px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
    max-height: 90vh;
    position: fixed;
    overflow-y: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.login_frame{
    display: grid;
    grid-template-columns: auto 200px;
    grid-gap: 30px;
}

@media (max-width:700px) {
    .frameshadow {
        width: 90%;
        padding: 20px;
    }

    .login_frame{
        grid-template-columns: auto;
    }
    .login_frame .img_{
        display: none;
    }
}

@media (min-width:701px) {
    .frameshadow {
        width: 600px;
        padding: 60px;
    }
}

.boot_link {
    font-size: 85%;
    color: cornflowerblue;
}

.myheadernavbarMob {
    font-size: 110%;
}

.mnavi {
    display: inline;
    padding: 10px 0;
}

.navbarsign {
    background-color: crimson;
    border-radius: 15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    color: white;
    text-align: center;
    font-size: 9px;
}

.myheaderlogo {
    grid-area: logo;
}

.myheaderfra {
    grid-area: telb;
    color: rgb(200, 0, 0);
    font-size: 105%;
    font-weight: bold;
    padding: 10px 0 0 0;
}

.myheadernavbar {
    grid-area: navbar;
    text-align: center;
    padding: 20px 0 0 0;
}

.myheaderfill {
    grid-area: dist;
}

.myheaderfill2 {
    grid-area: dist2;
}

.myheader {
    position: relative;
    z-index: 10;
    padding: 20px;
    direction: ltr;
    display: grid;
    background-color: white;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
}

.myheaderlogoimg {
    width: 320px;
}

.mnavi2 {
    display: block;
}

.mnavist,
.mnavist_bo {
    color: green;
    font-size: 105%;
    transition: all 0.3;
    padding: 5px 10px;
    border-radius: 8px;
    text-decoration: none;
}

.mnavist_bo {
    background-color: bisque;
}

.mnavist_bo:hover {
    background-color: burlywood;
    color: white;
}

.mnavist {}

.mnavist:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: grey;
}

.mnavist_2 {
    display: block;
    width: auto;
    font-size: 105%;
    transition: all 0.3;
    padding: 10px;
    background-color: white;
    text-decoration: none;
    color: green;
}

.mnavist_2:hover {
    background-color: rgba(230, 230, 235, 1);
    color: grey;
}

.myheaderfraP {
    text-align: center;
}

.mnavi1-act {
    border-style: solid;
    border-color: rgb(237, 197, 197);
    border-width: 0 0 4px 0;
    padding: 0 0 10px 0;
}

@media (max-width:900px) {
    .sepspan {
        display: none;
    }
    .mnavist {
        display: block;
    }
}

@media (min-width:901px) {
    .sepspan {
        display: inline;
    }
}

@media (min-width: 1201px) {
    .myheader {
        grid-template-columns: 320px auto 0 0 270px;
        grid-template-areas: 'logo navbar dist dist2 telb';
    }
    .mnavist-dra {
        position: absolute;
        padding: 10px 5px 5px 5px;
        display: inline-block;
        width: 320px;
        z-index: 10;
    }
    .mnavi1,
    .mnavi1-act {
        display: inline-block;
        width: auto;
    }
    .mnavist_2 {
        text-align: left;
    }
    .myheaderlogo {
        padding: 10px 0 0 0;
    }
}

@media (min-width: 601px) and (max-width: 1200px) {
    .myheader {
        grid-template-columns: 250px auto auto 250px;
        grid-template-areas: 'logo dist dist2 telb' 'navbar navbar navbar navbar';
    }
    .mnavist-dra {
        position: absolute;
        padding: 10px 5px 5px 5px;
        display: inline-block;
        width: 250px;
        z-index: 10;
    }
    .mnavi1,
    .mnavi1-act {
        display: inline-block;
        width: auto;
    }
    .mnavist_2 {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .myheader {
        grid-template-columns: auto 320px auto;
        grid-template-areas: 'dist logo dist2' 'dist telb dist2' 'navbar navbar navbar';
    }
    .myheaderfra {
        padding: 30px 0;
    }
    .mnavist-dra {
        padding: 10px 5px 5px 5px;
    }
    .mnavist_2 {
        text-align: center;
    }
    .mnavi1,
    .mnavi1-act {
        display: block;
        padding: 5px 0;
    }
}