@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

:root {
    --body-bg: #cecece;
    --header-bg: #2f8994;
    --header-hover: #287680;
    --adm-panel-a: #4f5a6e;
    --adm-panel-hover: #287680;
    --menu-bg: #fff;
    --link-col: #454545e0;
    --text-col: #8b8b8b;
    --ssyl2-col: #454545e0;
    --ssyl2-hover: #f1f1f1;
    --border: 1px solid #99999917;
    --title: #2f8994;
    --title-col: #fff;
    --auth2-bg: #2b818c;
    --auth2-col: #fff;
    --auth2-hover: #205d65;
    --input-bg: #2f8994;
    --input-bg-hover: #1d5b63;
    
    --textarea-bg: #fff;
    --textarea-border: 1px solid #3336;
    --textarea-col: #5a5a5a;
    --navi-bg: #4a959e;
    --navi-hover: #39747b;
    --mnavi-bg: #2f8994;
    --mnavi-hover: #256b73;
     --items-span-bg: #2f8994;
    --items-hover: #efefef;
    --items-col: #f7f7f7;
    --panel-bg: #287680;
    --panel-right: 1px solid #23232347;
    --panel-left: 1px solid #dedede21;
    --panel-bottom: 1px solid #27747d;
    --panel-hover: #236971;
    --dropdown-content2-bg: #e4e4e4;
    --dropdown-content2-col: #3c3c3c;
    --dropdown-content2-span: #353232;
    --dropdown-content-bg: #e4e4e4;
    --dropdown-content-col: #525252;
    --dropdown-content-hover: #d2d2d2;
    /*--toggle-bg: url(/views/green_flat_mod/img/dark-mode.png);*/
    --forum-togg-bg: url(/views/icon/forum/dots-vertical.png);
    --header-menu-bg: #ebebeb;
    --header-link-border: 1px solid #cccccc4d;
    --header-link-col: #6b6b6b;
    --quote-bg: #e8e8e8;
    --quote-border: 3px solid #607D8B;
    --quote-col: #676767;
    --f-a-hover: #efefef;
    --sidebar-user-hover: #efefef;
    --dmy2-bg: #e8e8e8;
    --dot2-bg: #bee7ec;
    --banbg: #000;
    --header-link-hover: #d9d9d9;
    --confirm-bg: #e2e2e2;
    --confirm-hover: #d0d0d0;
    --pp-tit: #607D8B;
    --footer-bg: #383838f2;
    --box-shadow: 0px 2px 2px rgb(0 0 0 / 32%);
    --like-hover: #e2e2e2;
    --item-span: #2c3a47;
    --rekl-bg: #fff;
    --dial-border: none;
     --menu-border: 1px solid #21202017;
     --smiles-bg: #fff;
     --smiles-hover: #ccc7c7;
     --online-ico: 5px solid #fff;
     --border-bottom: #dee2e6;
     --user-rel: #ebebeb;
}

:root[data-theme='dark'] {
     --body-bg: #282829;
     /*--body-bg: #202021;---------------------------*/
     --header-bg: #436f6b;
     --header-hover: #3f7974;
     --adm-panel-a: #af6061;
     --adm-panel-hover: #ab5556;
     --menu-bg: #353538;
     /*--menu-bg: #2a2a2b;-----------------*/
     /*--menu-bg: #303335;*/
     /*--link-col: #e0e0e0;*/
     --link-col: #e8e8e8;
     --text-col: #b1b1b1;
     /*--text-col: #bfbebe;-------------------*/
     /*--ssyl2-col: #ecececf0;*/
     --ssyl2-col: #e8e8e8f7;
     --ssyl2-hover: #46464a;
     /*--ssyl2-hover: #4e4d4d;---------------------*/
     /*--ssyl2-hover: #3a3d40;*/
     --border: none;
     --title: #3a3a3e;
     /* --title: #313131;-----------------------*/
     --title-col: #7aa29f;
     --auth2-bg: #5a5a5a;
     --auth2-col: #f4f4f4d9;
     --auth2-hover: #353535;
     --input-bg: #458680;
     --input-bg-hover: #2b5a56;
     
     --textarea-bg: #29292b;
     /*--textarea-bg: #222223;------------------*/
     --textarea-border: 1px solid #2b2b2d;
     --textarea-col: #d8dce2;
     --navi-bg: #3b5d5a;
     --navi-hover: #458680;
     --mnavi-bg: #555658;
     --mnavi-hover: #353638;
    --items-span-bg: #716e6e;
     --items-hover: #3a3d40;
    --items-col: #ecececf0;
     --panel-bg: #323333;
     --panel-right: 1px solid #1f1f1f94;
     --panel-left: 1px solid #464646a6;
     --panel-bottom: 1px solid #272727;
     --panel-hover: #3d3e40;
     --dropdown-content2-bg: #3f4042;
     --dropdown-content2-col: #b1b1b1;
     --dropdown-content2-span: #dadada;
     --dropdown-content-bg: #414448;
     --dropdown-content-col: #e8e8e8;
     --dropdown-content-hover: #353535;
    /* --toggle-bg: url(/views/green_flat_mod/img/light-mode.png);*/
    --forum-togg-bg: url(/views/icon/forum/dots-vertical_white.png);
     --header-menu-bg: #1F1F1F;
     --header-link-border: 1px solid #0000004d;
     --header-link-col: #e2e1e1e3;
     --quote-bg: #434546;
     --quote-border: 3px solid #26a69a6e;
     --quote-col: #d3d9dc;
     --f-a-hover: #46464a;
     /*--f-a-hover: #4e4d4d;---------------*/
     --sidebar-user-hover: #46464a;
     --dmy2-bg: #3e3e40;
     --dot2-bg: #5373704a;
     --banbg: #a0a0a0;
     --header-link-hover: #272727;
     --confirm-bg: #414344;
     --confirm-hover: #393b3c;
     --pp-tit: #5d9bbf;
     --footer-bg: #3844439c;
     --box-shadow: none;
     --like-hover: #404142;
      --item-span: #ffffffd4;
       --rekl-bg: #353538;
           --dial-border: 1px solid #2f2f31;
           /*--dial-border: 1px solid #212121;---------------------*/
            --menu-border: 1px solid #2b2b2d;
            /*--menu-border: 1px solid #212121;---------------------*/
             --smiles-bg: #2c2d2d;
             --smiles-hover: #1d1c1c;
             --online-ico: 5px solid #353538;
             --border-bottom: #303132;
             --user-rel: #353536;
}

:root[data-theme='green'] {
     --body-bg: #cecece;
     --header-bg: #6e9d70;
     --header-hover: #49774c;
     --adm-panel-a: #607D8B;
     --adm-panel-hover: #497286;
     --menu-bg: #fff;
     /*--menu-bg: #303335;*/
    --link-col: #454545e0;
    --text-col: #8b8b8b;
    --ssyl2-col: #454545e0;
    --ssyl2-hover: #f1f1f1;
    --border: 1px solid #99999917;
     --title: #6e9d70;
     --title-col: #fff;
     --auth2-bg: #68966a;
     --auth2-col: #fff;
     --auth2-hover: #568458;
     --input-bg: #6e9d70;
     --input-bg-hover: #6e9d70;
     
     --textarea-bg: #fff;
     --textarea-border: 1px solid #3336;
     --textarea-col: #5a5a5a;
     --navi-bg: #68966a;
     --navi-hover: #568458;
     --mnavi-bg: #68966a;
     --mnavi-hover: #568458;
     --items-span-bg: #4d8449;
     --items-hover: #efefef;
     --items-col: #fff;
     --panel-bg: #568b59;
     --panel-right: 1px solid #1717172b;
     --panel-left: 1px solid #2f2f2f12;
     --panel-bottom: 1px solid #548656;
     --panel-hover: #49774c;
     --dropdown-content2-bg: #e4e4e4;
     --dropdown-content2-col: #3c3c3c;
     --dropdown-content2-span: #353232;
     --dropdown-content-bg: #e4e4e4;
     --dropdown-content-col: #3a3a3a;
     --dropdown-content-hover: #d2d2d2;
    /* --toggle-bg: url(/views/green_flat_mod/img/light-mode.png);*/
    --forum-togg-bg: url(/views/icon/forum/dots-vertical.png);
     --header-menu-bg: #ebebeb;
     --header-link-border: 1px solid #cccccc4d;
     --header-link-col: #6b6b6b;
     --quote-bg: #e8e8e8;
     --quote-border: 3px solid #6e9d70;
     --quote-col: #676767;
     --f-a-hover: #efefef;
     --sidebar-user-hover: #efefef;
     --dmy2-bg: #e8e8e8;
     --dot2-bg: #c5f1c7;
     --banbg: #000;
     --header-link-hover: #d9d9d9;
     --confirm-bg: #e2e2e2;
     --confirm-hover: #d0d0d0;
     --pp-tit: #607D8B;
     --footer-bg: #383838f2;
     --box-shadow: 0px 2px 2px rgb(0 0 0 / 32%);
     --like-hover: #e2e2e2;
     --item-span: #2c3a47;
      --rekl-bg: #fff;
          --dial-border: none;
           --menu-border: 1px solid #21202017;
            --smiles-bg: #fff;
            --smiles-hover: #ccc7c7;
            --border-bottom: #dee2e6;
            --user-rel: #ebebeb;
}
:root[data-theme='red'] {
     --body-bg: #cecece;
     --header-bg: #d66c64;
     --header-hover: #c7665f;
     --adm-panel-a: #607D8B;
     --adm-panel-hover: #497286;
     --menu-bg: #fff;
     /*--menu-bg: #303335;*/
    --link-col: #454545e0;
    --text-col: #8b8b8b;
    --ssyl2-col: #454545e0;
    --ssyl2-hover: #f1f1f1;
    --border: 1px solid #99999917;
     --title: #d66c64;
     --title-col: #fff;
     --auth2-bg: #d66c64;
     --auth2-col: #fff;
     --auth2-hover: #b55c55;
     --input-bg: #d4655c;
     --input-bg-hover: #ca8e89;
     
     --textarea-bg: #fff;
     --textarea-border: 1px solid #3336;
     --textarea-col: #5a5a5a;
     --navi-bg: #737070;
     --navi-hover: #4a4848;
     --mnavi-bg: #d66c64;
     --mnavi-hover: #96453f;
     --items-span-bg: #8c8888;
     --items-hover: #efefef;
     --items-col: #fff;
     --panel-bg: #c35b53;
     --panel-right: 1px solid #1717172b;
     --panel-left: 1px solid #2f2f2f12;
     --panel-bottom: 1px solid #b5554e;
     --panel-hover: #b5554e;
     --dropdown-content2-bg: #e4e4e4;
     --dropdown-content2-col: #3c3c3c;
     --dropdown-content2-span: #353232;
     --dropdown-content-bg: #e4e4e4;
     --dropdown-content-col: #3a3a3a;
     --dropdown-content-hover: #d2d2d2;
     /*--toggle-bg: url(/views/green_flat_mod/img/light-mode.png);*/
     --forum-togg-bg: url(/views/icon/forum/dots-vertical.png);
     --header-menu-bg: #ebebeb;
     --header-link-border: 1px solid #cccccc4d;
     --header-link-col: #6b6b6b;
     --quote-bg: #e8e8e8;
     --quote-border: 3px solid #d66c64;
     --quote-col: #676767;
     --f-a-hover: #efefef;
     --sidebar-user-hover: #efefef;
     --dmy2-bg: #e8e8e8;
     --dot2-bg: #fbdfdd;
     --banbg: #000;
     --header-link-hover: #d9d9d9;
     --confirm-bg: #e2e2e2;
     --confirm-hover: #d0d0d0;
     --pp-tit: #2e9a90;
     --footer-bg: #383838f2;
     --box-shadow: 0px 2px 2px rgb(0 0 0 / 32%);
     --like-hover: #e2e2e2;
     --item-span: #2c3a47;
      --rekl-bg: #fff;
          --dial-border: none;
           --menu-border: 1px solid #21202017;
            --smiles-bg: #fff;
            --smiles-hover: #ccc7c7;
           --border-bottom: #dee2e6;
           --user-rel: #ebebeb;
}



details {
 border-bottom: 1px solid var(--border-bottom);
 padding: 10px;
 }

.material-icons.md-16 { font-size: 16px; vertical-align: middle;}
.material-icons.md-18 { font-size: 18px; vertical-align: middle;}
.material-icons.md-20 { font-size: 20px; vertical-align: middle;}
.material-icons.md-24 { font-size: 24px; vertical-align: middle;}
.material-icons.md-36 { font-size: 36px; vertical-align: middle;}
.material-icons.md-48 { font-size: 48px; vertical-align: middle;}

.material-icons.color { color: #fff;}
.material-icons.col-red { color: #D95F59;}
.material-icons.col-green { color: #5CD949;}
.material-icons.col-black {color: #37383a;}

.user_repl {
    font-size: x-small;
    background: var(--user-rel);
    padding: 2px 1px;
    border-radius: 5px;
}

.lbl {
    position: sticky;
    top: 60px;
}

.online-ico {
    padding: 8px;
    background: #26a930;
    border: var(--online-ico);
    border-radius: 50%;
    position: absolute;
    margin-left: -70px;
    margin-top: 8px;
}

.icon-ava-level{
    border: 1px solid var(--menu-bg);
}

.icon-ava-online{
    border: 1px solid var(--menu-bg);
}


/*stiker forum*/

/*
.stiker-block{
	display: none;
	margin: 20px;
    
    max-height: 300px;
    overflow: auto;
    
    padding: 12px;
    background: #1b1b1b;
    border: 1px solid #1b1b1b;
    border-radius: 4%;
    
}

.stiker-close {
    color: #fff;
    padding: 5px 8px;
    background: #000;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    right: 12%;
}
*/

/*stiker forum*/

.stiker-block{
	display: none;
	margin: 20px;
    max-height: 300px;
    overflow: auto;
    /* border: 1px solid rgb(0, 0, 0); */
    padding: 12px;
    background: var(--body-bg);
    border: var(--border);
    border-radius: 4%;
    position: relative;
}

.stiker-close {
    color: #fff;
    padding: 5px 8px;
    background: #ad3030;
    border-radius: 5px;
    cursor: pointer;
    position: sticky;
    top: 1px;
    float: right;
}
 
/*stiker forum*/

.div_prof1 {
 
  width: 100px;
  height: 100px;
 
  display: none;
}

.delete {
    color: #fff;
    background: #ca4444;
    display: inline-block;
    float: right;
    padding: 3px 5px;
}
.delete:hover {
    background: #e67272;
}

.dial-border {
    border-bottom: var(--dial-border);
}
.no_notif {
    padding: 0;
    border: 0;
    width: 28px;
    height: 28px;
    background-color: #0000;
    background-image: url(/views/icon/no_notif.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.dial_noread{
    border-right: 4px solid #dc7a73;
}

.adm {
    background: #e74c3c;
}

.gladm {
    background: #1f80ce;
}

.on_notif {
    padding: 0;
    border: 0;
    width: 28px;
    height: 28px;
    background-color: #0000;
    background-image: url(/views/icon/on_notif.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.change_notif a {
    /*background-color: #000;*/
    display: inline-block;
    margin: 1px;
    padding: 8px;
    color: #fff;
    text-decoration: none;
    float: right;
    border-radius: 50%;
}

.mod {
    background: #8BC34A;
}

.level {
    padding: 1px 4px;
    font-size: 8px;
    margin-left: 5px;
    border-radius: 3px;
    color: #fff;
	display: inline-block;
	vertical-align: middle;
}

.matrix {
  width: 400px;
  margin: auto;
  text-align: justify;
}
/* begin Demo Not necessary   */

/* begin begin Back to Top button  */

.back_to_top1 {
    position: fixed;
    bottom: 120px;
    right: 20px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 35px;
    background: #f5f5f5e0;
    color: #444;
    cursor: pointer;
    border-radius: 50%;
    display: none;
    font-size: 20px;
    border: 1px solid #585858;

}

.back_to_top1:hover {
  background: #e9ebec;
}

.back_to_top-show1 {
  display: block;
}

.up_top {
     width: 20px;
     height: 20px;
      border-top: 4px solid #fff;
      border-right: 4px solid #fff;
      /*margin-right: 60px;*/
          display: inline-block;
          position: relative;
    top: 15px;
    box-sizing: border-box;
}

.top{
       transform: rotate(-45deg);
}

.back_to_top {
    position: fixed;
    bottom: 120px;
    right: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 35px;
    background: #00000045;
    
    cursor: pointer;
    border-radius: 50%;
    display: none;
    font-size: 20px;
    
}

.back_to_top-show {
  display: block;
}

/*--------------------------------------------------------------------------------------*/

.ked_title {
    display: block;
    color: #efefef;
    padding:12px;
    background: #da4747;
}


/* Dropdown Button */
.ban-btn {
    /*background-color: #4CAF50;*/
    color: white;
   /* padding: 17px;*/
    font-size: 16px;
    border: none;
    margin-top: 3px;
}

/* The container <div> - needed to position the dropdown content */
.ban-popup {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.ban-popup-content {
    display: none;
    /*position: absolute;*/
    /*background-color: var(--menu-bg);*/
    min-width: 40px;
    width: 100%;
    height: 100%;
   /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    z-index: 1;
    text-align: left;
}

/* Links inside the dropdown */
.ban-popup-content a {
    color: var(--link-col);
    padding: 12px 16px;
    text-decoration: none;
    display: initial;
}

/* Show the dropdown menu on hover */
.ban-popup:hover .ban-popup-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.ban-popup:hover .ban-popup {background-color: #3e8e41;}

.dark-th {
    background-color: #000;
    border-radius: 50%;
    width:28px;
    height:28px;
}

/*--------------------------------------------------------------------------------------*/


.accordion {
    /*max-width: 800px;*/
}
.accordion .contentBx {
    position: relative;
    margin: 2px 0;
}
.accordion .contentBx .label{
    position: relative;
    padding:10px;
    background: #2694af;
    color: #fff;
    cursor: pointer;
    
}

.accordion .contentBx .label:before{
    content: "+";
    position: absolute;
   top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.5em;
}

/*
.accordion .contentBx.active .label:before{
    content: "-";
}
*/

.accordion .contentBx.active .label:before{
    content: "";
    background: #2694af;
   transform: rotate(45deg);
    position: absolute;
    left: 20px;
    top: auto;
    bottom: -7px;
    width: 14px;
    height: 14px;
    z-index: 3;
    transition: 0.5s;
}

.accordion .contentBx .cont_prof{
position: relative;
/*background: #fff;*/
/*height: 0;*/
display: none;
overflow: hidden;
transition: 0.5s;
overflow-y: auto;
}

.accordion .contentBx.active .cont_prof{
    display: block;
    /*height: 100%;*/
    /*padding: 10px;*/
}


/*------------------------------------MORE VERT FORUM--------------------------------------------------*/
 
 .toggle-forum {
   padding: 0;
    
    border: 0;
    width: 24px;
    height: 24px;
    background-color: #0000;
    background-image: var(--forum-togg-bg);
    background-size: contain;
    background-repeat: no-repeat;
    float:right;
    
}

/* Dropdown Button */
.forum-btn {
    /*background-color: #4CAF50;*/
    color: white;
   /* padding: 17px;*/
    font-size: 16px;
    border: none;
    margin-top: 3px;
}

/* The container <div> - needed to position the dropdown content */
.forum-popup {
    position: relative;
   /* display: inline-block;*/
    float: right;
    margin-bottom: 20px;
    margin-left: 8px;
}

/* Dropdown Content (Hidden by Default) */
.forum-popup-content {
    /*display: none;*/
    position: absolute;
    background-color: var(--menu-bg);
    min-width: 200px;
    padding: 5px;
    right: 0;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 33%);
    z-index: 1;
    margin-top: 35px;
    
}

/* Links inside the dropdown */
.forum-popup-content a {
    
    color: var(--link-col);
    /*padding: 12px 16px;*/
    text-decoration: none;
    
}

/* Change color of dropdown links on hover */
/*.theme-popup-content a:hover {background-color: #ddd;}*/

/* Show the dropdown menu on hover */
.forum-popup:hover .forum-popup-content {display: inline-block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.forum-popup:hover .forum-popup {background-color: #3e8e41;}

/*---------------------------------------------------------------------------------------------------------*/


/*---------------------------------------------------*/
.toggle-theme {
   padding: 0;
    
    border: 0;
    width: 24px;
    height: 24px;
    background-color: #0000;
    background-image: var(--toggle-bg);
    background-size: contain;
    background-repeat: no-repeat;
    
    
}

*{
   
    margin: 0;
    padding:0;
    text-decoration: none;
    
}

.profile-card{
    /*width:400px;*/
    text-align: center;
    /*border-radius:8px;*/
    overflow: hidden;
}
.card-header{
    /*background: #2c3a47;*/
    /*padding: 20px 40px;*/
    padding: 0;
}
.pic {
    display:inline-block;
    padding:8px;
    background: linear-gradient(130deg, #74b9ff, #e66767);
    margin: auto;
    border-radius: 50%;
    background-size: 200% 200%;
    animation: animated-gradient 2s linear infinite;
}

@keyframes animated-gradient{
    25%{
        background-position: left bottom;
    }
    50%{
        background-position: right bottom;
    }
    75%{
        background-position: right top;
    }
    100%{
        background-position: left top;
    }
}
/*
.pic img {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
*/
.name_profile {
    color: #d07785;
    font-size: 36px;
    font-weight: 600;
    margin: 5px 0;
}
.name_profile a{
    font-size: 18px;
}

.desc_profile {
    font-size: 18px;
    color: #e66767;
}

.sm{
    display: flex;
    justify-content: center;
    margin: 28px 0;
}

.sm a {
    color: #f2f2f2;
    width: 56px;
    font-size: 22px;
    transition: .3s linear;
}
    .sm a:hover {
        color: #e66767;
    }
    
    .contact-btn {
        display: inline-block;
        padding: 12px 20px;
        color: #e66767;
        border: 2px solid #e66767;
        border-radius: 6px;
        margin-top: 16px;
        transition: .3s linear;
    }

.contact-btn:hover {
    background: #e66767;
    color: #f2f2f2;
}

.card-footer {
    /*background: #f4f4f4;*/
    padding: 10px 0;
}

.numbers_profile {
    display: flex;
    align-items: center;
    /*padding-bottom: 10px;*/
}

.item{
    flex: 1;
    text-transform: uppercase;
    font-size: 12px;
    color: #e66767;
}

.item span{
    display: block;
    color: var(--item-span);
    font-size: 18px;
}

.item a{
    color: #e66767;
}


.item a:hover{
    background-color: #eee;
    display: block;
}

.border{
    width: 1px;
    height: 30px;
    background: #bbb;
}

/*--------------------------------------------------------------------------------------*/
/* Dropdown Button */
.theme-btn {
    /*background-color: #4CAF50;*/
    color: white;
   /* padding: 17px;*/
    font-size: 16px;
    border: none;
    margin-top: 3px;
}

/* The container <div> - needed to position the dropdown content */
.theme-popup {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.theme-popup-content {
    display: none;
    position: absolute;
    background-color: var(--body-bg);
    min-width: 40px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.theme-popup-content a {
    color: var(--link-col);
    padding: 12px 16px;
    text-decoration: none;
    display: initial;
}

/* Change color of dropdown links on hover */
/*.theme-popup-content a:hover {background-color: #ddd;}*/

/* Show the dropdown menu on hover */
.theme-popup:hover .theme-popup-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.theme-popup:hover .theme-popup {background-color: #3e8e41;}

.dark-th {
    background-color: #000;
    border-radius: 50%;
    width:28px;
    height:28px;
}

.blue-th {
    background-color: #2f8994;
    border-radius: 50%;
    width:28px;
    height:28px;
}

.green-th {
    background-color: #6e9d70;
    border-radius: 50%;
    width:28px;
    height:28px;
}

.red-th {
    background-color: #d66c64;
    border-radius: 50%;
    width:28px;
    height:28px;
}
/*--------------------------------------------------------------------------------------*/

/*
*, *:before, *:after {
  box-sizing: border-box;
}
*/

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

a { 
color: var(--link-col); 
text-decoration: none;
}


a:hover { 
text-decoration: none;
}


img {
vertical-align: middle;
}

header {
/*background-color: #037058;*/
/*height: 64px;*/
/*margin: 0 5px 0 5px;*/
}
.banbg {
    color: var(--banbg);
}
/*
.confirm a {
    text-decoration: none;
    margin-top: 10px;
    line-height: 3;
    display: inline-block;
    width: 49%;
    text-align: center;
    background: var(--confirm-bg);
}
.confirm a:hover {
    background: var(--confirm-hover);
}
*/
.progress {
  position: relative;
  width: 180px;
  height: 12px;
  overflow: hidden;
  background: #ff3232;
  background: linear-gradient(to right, #ff3232 0%,#ff9600 33%,#ffff00 66%,#00ff00 100%);
}
.newls {
    border-left: 4px solid #f44336;
    /*padding-left: 7px;*/
}

.auth{
background: url(/views/default/img/auth.gif) repeat-x top #253137;
padding: 5px 0;
text-align: center;
margin: 0 5px 0 5px;

}
.avatarm {
  width: 40px;
  height: 40px;
  border-radius: 20px; /* половина ширины и высоты */
}
.auth a {
background: #118c71;
display: inline-block;
width: 21%;
padding: 9px 0;
color: #fff;

}
.auth a:hover {
background: #00654f;
text-decoration: none;
}

.auth1{
background: url(/views/default/img/auth.gif) repeat-x top #253137;
padding: 5px 0;
text-align: center;
margin: 0 5px 0 5px;
}

.auth1 a {
background: #118c71;
display: inline-block;
width: 32%;
padding: 9px 0;
color: #fff;
}
.auth1 a:hover {
background: #00654f;
text-decoration: none;
}

.menuv{
background: var(--rekl-bg);
font-size: 13px;
/*padding: 6px 9px;*/
/*margin: 5px;*/
/*box-shadow: 0px 2px 2px #c4c4c4;*/
padding: 8px;
}
.menuv_mob{
    display:block;
        /*padding: 8px;*/
}

.ntitle {
background: #cbcbcb;
padding: 10px;
margin: 8px 5px 0 5px;
color: #fff;
}

.title {
background: var(--title);
padding: 12px 10px;
margin: 5px 0 0 0;
color: var(--title-col);
/*box-shadow: 0px 2px 2px 2px #232323;*/
}

.title img {
margin: 0 3px;
}

.title a {
color: var(--title-col);
text-decoration: none;
}

img.ava {
width: 32px;
margin: 1px;
}

a.nick{
background-color: #bcbcbc;
display: inline-block;
margin: 1px;
padding: 4px;
color: #fff;
}

.numb {
display: inline-block;
padding: 1px 3px;
background-color: #eee;
margin: 0 3px 0 0;
}

.navi a {
background-color: var(--navi-bg);
    display: inline-block;
    margin: 1px;
    padding: 6px;
    color: #fff;
    text-decoration: none;
}

.navi a:hover {
background-color: var(--navi-hover);
/*display: inline-block;
margin: 1px;
padding: 6px;*/
}

.mnavi a {
background-color: var(--mnavi-bg);
display: inline-block;
margin: 1px;
padding: 4px 6px;
color: #fff;
text-decoration: none;
border-radius: 7px;
}

.mnavi a:hover {
background-color: var(--mnavi-hover);
}

.mnavi span{
background-color: #129276;
display: inline-block;
margin: 1px;
padding: 3px 6px;
color: #fff;
}

.menu, .navi, .mnavi, .menu2 {
background-color: var(--menu-bg);
padding: 12px;
box-shadow: var(--box-shadow);
margin: 0 0 4px 0;
}
/*
.menu a {
    color: #454545e0;
    text-decoration: none;
}
*/
.main {
background-color: var(--menu-bg);
box-shadow: var(--box-shadow);
margin: 0 0 4px 0;
}

.menu3 {
background-color: var(--menu-bg);
padding: 12px 9px;
/*box-shadow: 0px 2px 2px #c4c4c4;*/
/*margin: 0 5px 0 5px;*/
border-bottom: var(--menu-border);
box-shadow: var(--box-shadow);
}
.m3 {
background-color: var(--menu-bg);

/*box-shadow: 0px 2px 2px #c4c4c4;*/
/*padding: 3px;*/

}

.auth2 a {
background-color: var(--auth2-bg);
padding: 6px;
display: inline-block;
margin: 3px 1px;
color: var(--auth2-col);
border-radius: 9px;
}
.auth2 a:hover {
background-color: var(--auth2-hover);

margin: 3px 1px;
padding: 6px;
color: #fff;
}
.block a{
background: var(--menu-bg);
padding: 12px;
display: block;
text-align: center;
/*margin: 3px 5px 0 5px;*/
}

.ssyl2 {
display: block;
border-bottom: var(--border);
padding: 15px 8px;
/*color: #eeeeeee0;*/
color: var(--ssyl2-col);
}

.ssyl2:hover, .theme-popup-content a:hover {
background: var(--ssyl2-hover);
text-decoration: none;
}


.green {
color: #118c71;
}

.green2 {
color: #d3fff6;
}

.q {
    background: var(--quote-bg);
    padding: 12px 8px;
    border-left: var(--quote-border);
    margin: 12px 5px;
    color: var(--quote-col);
}

footer {
background: var(--footer-bg);
padding: 10px;
/*margin: -5px 0;*/
color: #fff;

}
footer a{
    color: #fff;
        font-weight: 600;
}
.footer_online {display:block;}
.timepostweb {display:none;}


.lin2 a {
display: inline-block;
border-bottom: 1px solid #f5f5f5;

padding: 12px 0;
width: 32%;
text-align: center;
}
.lin2 a:hover {
background: #f5f5f5;
text-decoration: none;
}


textarea {
/*width: 90%;
height: 90%;*/
 width: -webkit-fill-available;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 margin-top: 2px;
    transition: background .2s;
    border-radius: 4px;
    resize: vertical;
    background: var(--textarea-bg);
    padding: 7px;
    border: var(--textarea-border);
    margin: 3px 1px;
     color: var(--textarea-col);
    
}
input, select {
background: var(--textarea-bg);
    padding: 7px;
    border: var(--textarea-border);
    margin: 3px 1px;
    border-radius: 5px;
    color: var(--textarea-col);
    max-width: 500px;
}
select, option { max-width:70vh;}

input[type="submit"]{
background: var(--input-bg);
border: 0;
color: #fff;
margin: 3px;
}

input[type="submit"]:hover{
background-color: var(--input-bg-hover);
}

option {
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
    max-width: 500px;
}

.dmy{

}
.dmy2{
background: var(--dmy2-bg);
margin: 7px 2px 7px 0px;
padding: 6px;
max-width: 80%; 
border-radius: 10px;
display: inline-block;
word-wrap: break-word; /* Перенос слов */
margin-left: 15px;
position: relative;
}

.dmy2:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 100%;
    top: calc(50% - 12px);
    border-top: 12px solid #0000;
    border-right: 24px solid var(--dmy2-bg);
    border-bottom: 12px solid #0000;
    padding-right: 30px;
}

.dot{

}

.dot2{
float: right;
background: var(--dot2-bg);
margin: 7px 0px 7px 0px;
padding: 6px;
max-width: 80%; 
border-radius: 10px;
display: inline-block;
word-wrap: break-word; /* Перенос слов */
margin-right: 15px;
position: relative;
}

.dot2:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 100%;
    top: calc(50% - 12px);
    border-top: 12px solid #0000;
    border-left: 24px solid var(--dot2-bg);
    border-bottom: 12px solid #0000;
    padding-left: 1px;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 99999;
		-webkit-transition: opacity .5s;
		-moz-transition: opacity .5s;
		-ms-transition: opacity .5s;
		-o-transition: opacity .5s;
		transition: opacity .5s;
}

.popup {
	background-color: var(--smiles-bg);
/*	border: 3px solid #fff;*/
	display: inline-block;
	left: 50%;
	opacity: 0;
	padding: 15px;
overflow-y: scroll;
	max-width: 450px;
	max-height: 323px;
	position: fixed;
	text-align: justify;
	top: 40%;
	visibility: hidden;
	z-index: 999999;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: opacity .5s, top .5s;
	-moz-transition: opacity .5s, top .5s;
	-ms-transition: opacity .5s, top .5s;
	-o-transition: opacity .5s, top .5s;
	transition: opacity .5s, top .5s;
	border-radius: 11px;
}
img.close_window:hover {
    background: var(--smiles-hover);
    /*padding: 6px;*/
}
.close_window {
	cursor: pointer;

}

#cont {
    
}
#cont .page {
   
}

.nav_icon {
    position: relative;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    color: gray;
    font-size: 12px;
    margin: 0px 0px 10px 0px;
    padding: 10px 2px;
}

.nav_icon-touch {
     width: 50px;
    height: 50px;
    margin-bottom: 5px;
    display: block;
    text-align: center;
    line-height: 46px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border: 1px solid #9e9e9e;
}
.nav_icon-touch:hover {
border: 1px solid #616161;
}
.nav {
  font-size: 11px;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
  border-right: 1px solid #1a2127;
  transition: background .2s;
}

.nav a:hover {
  background: #27323a;
}

.nav a.active {
  background: #1a2127;
}

.nav a:last-child {
  border: 0;
}
.flex {   /* flexbox */
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.like a {
	
	padding: 6px;
	display: inline-block;
}

.like a:hover {
	background-color: var(--like-hover);
}
.ls {
display: flex;
flex-direction: column;
}

.forum_topic a:first-child {
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
}
a.items {
  background: var(--menu-bg);
  /*color: #eeeeeee0;*/
}

a.items:hover {
  background-color: var(--items-hover);
}

a.topic {
  border-bottom: var(--border);
}
a.topic > b {

  vertical-align: middle;
}

.forum_topic > a {
  display: block;
}


.forum_topic > a > login {
  float: right;
}

.forum_topic a:last-child {
  -webkit-box-flex: 0.07;
  -webkit-flex: 0.07;
  -ms-flex: 0.07;
  text-align: center;
  border-bottom: var(--border);
}

.f a{
    display: block;
    padding: 12px;
    transition: background .2s;
    text-decoration: none;
}
.f a > span {
  background: #fff;
  
  padding: 2px 4px;
  color: #717171;
  
  border-radius: 2px;
  border-bottom: 1px solid #313a42;
}

.f {
margin: 0;
}
.f a.items > span {
  background: var(--items-span-bg);
  color: var(--items-col);
  border: 0;
  
}

.f > span.fmenu a {
  border-bottom: var(--border);
}

.f > a > span:nth-child(3), .f > .fmenu a > span:nth-child(3) {
  background: #4CAF50;
  color: #fff;
  border: 0;
}

.f a:hover {
  background: var(--f-a-hover);
  text-decoration: none;
}
.f img {
 
  margin: 0 6px 0 0;
}

.forum_topic a:first-child {
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
}

/*spoiler forum*/
 .spoiler-trigger::before{
    
	color: #0b70db;
	text-decoration: none;
	padding: 0 5px;
	content: "+";
	border: 1px solid #0b70db;
	}
.spoiler-trigger.active::before{
    
    color: #0b70db;
    content: "-";
    border: 1px solid #0b70db;
}
.spoiler-trigger>span{
		border-bottom: 1px solid #0b70db;
	padding:0 3px;
}
.spoiler-trigger:hover>span{
	border-bottom-style: solid #0b70db;
}
.spoiler-block{
	display: none;
}
 
/*spoiler forum*/


h1, p {
  margin: 0 0 1em 0;
}

.other-gird-content{
  display: grid;
  grid-gap: 10px;
}
/*
aside, aside2 {
    display: none;
  }
*/


  /*
  .wrapper {
  max-width: 767px;
  
}
*/
.panel a, .adm_panel > a {
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
}
a.apanel {
  -webkit-box-flex: 0.25;
  -webkit-flex: 0.25;
  -ms-flex: 0.25;
}
.adm_panel {
  text-align: center;
  width: 100%;
  grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
    margin: 0;
}

.adm_panel > a {
  display: block;
  background-color: var(--adm-panel-a);
  padding: 5px;
  color: #fff;
  font-size: 13px;
  transition: background .2s;
  text-decoration: none;
}

.adm_panel > a:hover {
  background: var(--adm-panel-hover);
}

.panel_web {
    display: none;
}

.panel {
  /*border-bottom: var(--panel-bottom);*/
  display: flex;
  /*margin-top: 10px;*/
}

.panel a {
    color: #fff;
    display: block;
    padding: 13px;
    background-color: #4f5a6e;
    text-align: center;
    border-right: var(--panel-right);
    border-left: var(--panel-left);
    position: relative;
    transition: background .2s;
    /* margin-top: 10px;*/
}

.panel a:first-child {
  border-left: 0;
}
.panel a:last-child {
  border-right: 0;
}

.panel a:hover {
 background: #4f5a6e;
}
.panel a img {
  vertical-align: middle;
}

.panel count {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  background-color: #fc4b6c !important;
}

.header {
    position: sticky;
    width: 100%;
    /*max-width: 1550px;*/
    top: 0;
    /*left: 0;*/
    z-index: 50;
    
}

.header a {
	display: block;
	padding: 13px;
	/*color: #fff;*/
	cursor: pointer;
	/*line-height: 1;*/
	text-decoration: none;
}

.header:before {
    content: '';
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    /*border-bottom: 1px solid #8d6e63;*/
    background-color: var(--header-bg);
    z-index: 2;
    -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.48);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.48);
}

.header__body {
    position: relative;
  
    display: flex;
    justify-content: flex-end;
    /*height: 50px;*/
    align-items: center;
}
.header__logo {
    flex: 0 0 60px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 3;
}
.header__logo img{
    max-width: 100%;
    display: block;
    
}

.header__list {
    display: block;
    padding-top: 50px;
}
.header__list a{
    padding: 12px;
}
.header__list li{
    list-style-type: none;
}
.header__menu {
   position: fixed;
    left: -110%;
    bottom: 0; 
    width: 250px;
    height: 100%;
    overflow: auto;
    transition: all 0.6s ease 0s;
    background-color: var(--header-menu-bg);
    /* padding: 10px 0;*/
    /*box-shadow: 0px 0px 0px 520px rgb(0 0 0 / 72%);*/
    box-shadow: 0 14px 38px rgb(0 0 0 / 88%);
}
.header__menu.active {
    left: 0;
    bottom: 0;
    
}
.header__body {
    
    min-height: 40px;
}
.header__burger {
    display: block;
    position: relative;
    width: 17px;
    height: 14px;
    
    z-index: 3;
    margin-left: 15px;
}
.header__logo {
    flex: 0 0 40px;
}
.header__burger span {
     position: absolute;
     background-color: #fff;
     left: 0;
      width: 100%;
    height: 2px;
    top: 6px;
    transition: all 0.4s ease 0s;
}
.header__burger:before, .header__burger:after {
    content: '';
    background-color: #fff;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    transition: all 0.4s ease 0s;
}
.header__burger:before{
    top: 0;
}
.header__burger:after {
    bottom: 0;
}
.header__burger.active span{
    transform: scale(0);
}
.header__burger.active:before {
    transform:rotate(45deg);
    top: 5px;
}

.header__burger.active:after {
    transform:rotate(-45deg);
    bottom: 7px;
}
body.lock{
    overflow: hidden;
    /*padding-top: 50px;*/
}
body{
    /*padding-top: 50px;*/
}
.header__link {
    font-size: 16px;
    display:block;
     color: var(--header-link-col);
	
	font-weight: 400;
	border-bottom: var(--header-link-border);
	padding:8px;
}
.header__link a{
    color: rgb(226 225 225 / 89%);
}

.header__link:hover {
    /*display:block;*/
    background-color: var(--header-link-hover);
   /* padding:17px;*/
}
.panel_web {
    display: none;
}
.adm_menu_web { margin-left: 0;}

.site_name a {
	color: #fff;
	/*padding: 0;*/
}

.site_name a:hover {
	color: #fff !important;
}
.r_bar {
	/*position: relative;*/
	float: right;
	line-height: 0;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
	z-index: 2;
}
 .r_bar a{
     color: #fff;
 }

.r_bar:hover, .panel_web a:hover, .p_name a:hover, .site_name a:hover, .theme-btn a:hover {
	  background: var(--header-hover);
}


h1 {
	font-size: 16px !important;
	text-align: center;
	color: #333;
	/*line-height: 33px !important;*/
}
.l_bar {
    line-height: 0;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    position: absolute;
    left: 0;
}

.l_bar:hover {
	background: #49774c;
}

.c_bar {
    /* float: left; */
    height: 56px;
    z-index: 2;
    position: absolute;
    left: 45px;
}

.site_name {
    float: left !important;
    margin-top: 4px;
    /* margin-left: 14px !important; */
    font-size: 20px !important;
    font-weight: 400 !important;
    height: 56px !important;
    line-height: 23px;
    text-decoration: none;
}

.p_name {
	float: left !important;
	margin: 0;
	/*margin-left: 14px !important;*/
	font-size: 20px !important;
	font-weight: 400 !important;
	height: 56px !important;
	line-height: 1;
	text-decoration: none;
	padding: 3px 0;
}

.t_name {
    	float: left !important;
	margin: 0;
	/*margin-left: 14px !important;*/
	font-size: 20px !important;
	font-weight: 400 !important;
	height: 56px !important;
	line-height: 1;
	text-decoration: none;
	padding: 3px;
}
}

.header__list li{
   list-style: none;
  
}

.header__list b{
  font-size: 22px;
  line-height: 2;
  color:var(--link-col);
}

.avatarm {
	width: 40px;
	height: 40px;
	border-radius: 20px;
}
.avatar_nav {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

IMG.avatar_nav{
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}

p{
  flex: 1 1 200px;
  padding-left: 6px;
  line-height: 1.9;
  font-size: 10px;
}

p a{
  font-size: 14px;
}

pp{
  padding-left: 12px;
  line-height: 1.9;
  font-size: 14px;
      margin-left: auto;
    margin-right: auto;
}

pp > tit {
 color: var(--pp-tit);
    font-size: 21px;
  font-weight: 600;
  padding-bottom: 5px;
}

p > razd {
  color: #6b6b6b;
  font-size: 12px;
  padding: 2px 10px;
  margin-left: 5px;
  border-left: 1px solid #2d3840;
  font-weight: bold;
}


.dropdown {
    float: right;
    position: relative;
    display: inline-block;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--dropdown-content-bg);
    min-width: 220px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    z-index: 1;
}


.dropdown-content.active {
    display: block;
}

.dropdown-content a {
    color: var(--dropdown-content-col);
    padding: 12px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: var(--dropdown-content-hover);}

.show {display: block;}
.dropdown2 {
    float: right;
    position: relative;
    display: inline-block;
}


.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: var(--dropdown-content2-bg);
    min-width: 220px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    z-index: 1;
    color: var(--dropdown-content2-col);
    padding: 15px;
}

.dropdown-content2 input{
    margin: 3px 0;
}


.dropdown-content2.active {
    display: block;
}

.dropdown-content2.active a {
   color: #000;
}

.dropdown-content2 span {
   color: var(--dropdown-content2-span);
    padding: 15px 0px;
    text-decoration: none;
    display: block;
}
.dropdown-content p {
    color: black;
  padding: 10px;
    text-decoration: none;
display: block;
}
.dropdown-content3 {
    display: none;
    position: relative;
    background-color: #fff;
    min-width: 220px;
    overflow: auto;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    right: 0;
    z-index: 1;
color: black;
  padding: 20px;
    
}

.dropdown-content3.active {
    display: block;
}

.dropdown-content3.active a {
   color: #000;
}

.dropdown-content3 span {
   color: black;
    padding: 10px 0px;
    text-decoration: none;
    display: block;
}

.show2 {display: block;}

.panel_web {
    display: none;
}
.adm_menu_web { margin-left: 0;}

  .sidebar_user a {
  
  padding: 8px;
  /*background: #fff;*/
  /*color: #fff;*/
  border-top: 1px solid #E4E4E4;
  transition: background .2s;
  
  margin: 0 auto;
  display: block;
  align-items: center;
  flex-wrap: wrap; 
  /*color: #fff;*/
}

.sidebar_user a:first-child {
  border-top: 0;
}

.sidebar_user {
  margin-bottom: 0px;
      font-weight: 500;
      /*padding-top: 15px;*/
}

.sidebar_user > a > img {
  /*margin: 0 5px 0 5px;*/
  vertical-align: middle;
}

.sidebar_user a:hover {
    background: var(--sidebar-user-hover);
    text-decoration: none;
}

.inline {
    text-align: center;
}

.inline a {
    display: inline-block;
    padding: 12px 0;
    background-color: var(--menu-bg);
   /* color: #454545;*/
    width: 48%;
    border: var(--menu-border);
}
.inline a:hover {
	background-color: var(--ssyl2-hover);
}


/*----------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {

body {
        background: var(--body-bg);
        font-size: 16px;
        margin-top: 0;
}
.theme-popup:hover .theme-popup-content {display: -webkit-box;}
.title:first-child {
  margin: 0;
}

.forum_topic a:last-child {
  -webkit-box-flex: 0.12;
  -webkit-flex: 0.12;
  -ms-flex: 0.12;
}
.footer_online {display:none;}
.timepostweb {display:block;}

.timepost {display:none;}

/*a.items{color:#eeeeeee0;}*/
.header a {padding: 13px; }
.menuv{padding: 0;}

.fontsize, .fontsize a {font-size: 12px;font-weight: 500;}
.menuv_mob{display:none;}
 .ssyl2 {padding: 10px;}
.f {font-size: 14px;}
.wrapper {
  /*max-width: 940px;
  margin: 0 20px;*/
  display: grid;
  grid-gap: 10px;
  /*background-color: #cecece;*/
}

  /* no grid support? */

  
  .left_block{
 /*     position: sticky;
top: 60px;*/
/*height: 100vh;*/
box-sizing: border-box;
padding: 10px;
background-color: var(--menu-bg);
display: block;
  }
  
    .right_block{
      position: sticky;
top: 60px;
/*height: 100vh;*/
box-sizing: border-box;
/*padding: 6px;*/
background-color: var(--menu-bg);
display: block;
    /*margin: 5px 0 0 0;*/
  }
  .right_block a{
      font-weight: 500;
  }
  .left_forum {display:none;}
  
aside2 {
    float: left;
    width: 20%;
    /*border: 1px solid #e0dede;*/
   /* padding: 20px;
    background-color: #fff;*/
    margin-right: 5%;
        display: block;
        margin: 5px 0 0 0;
  }
  
  .content {
    float: right;
    width: 80%;
    
    padding: 2px;
  }
  .block11{
    float:left;
    width: 50%;
  }
  .other-gird-content{
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
  }
  .wrapper {
    margin: 0 7%;
    grid-template-columns: 1.2fr 3fr 1fr;
        word-break: break-word;
  }
  
  header, footer {
    grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
    /*background-color: #444;*/
    color: #fff;
    margin: 0;
  }
  /*header {background-color: #118d73;}*/
  footer {padding: 10px;margin-top: 10px;}
  
  .l_bar { display: none;}
.c_bar { left: 0;}

.panel {
    display: none;
}

  header, .footer, .error, .success {
    grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
   
  }
  header{
      position: sticky;
      top:0;
      z-index:99;
      /*height: 74px;*/
  }
  
  .panel {
 display: none;
}

.header__burger {
    display:none;
}
.header__list {
    display:none;
}

.panel_web a img {
  vertical-align: middle;
}
.panel {
 display: none;
}

.header__burger {
    display:none;
}
.header__list {
    display:none;
}

.panel_web a {
  flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
}


.panel_web {
   display: flex;
}

.panel_web a {
  color: #fff;
  display: block;
  text-align: center;
  position: relative;
  transition: background .2s;
  z-index: 2;
  padding:17px;
  border-right: var(--panel-right);
  border-left: var(--panel-left);
}


.panel_web a:first-child {border-left: 0;}

.panel_web a:last-child {border-right: 0;}

.panel_web a img {vertical-align: middle;}

.panel_web count {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  background-color: #fc4b6c !important;
}

.adm_panel > a{font-size: 14px;}

.wrapper > * {
  
  /*border-radius: 5px;*/
  /*padding: 20px;*/
 /* font-size: 150%;*/
  /* needed for the floated layout*/
  /*margin-bottom: 10px;*/
}

/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
  .wrapper > * {
    width: auto;
    /*margin: 0;*/
  }
  /*
  .stiker-close {
    right: 30%;
}
*/
}
@media screen and (min-width: 1000px) {
 
  .wrapper {  margin-left: 5%; margin-right: 5%;}
  .left_forum {display:none;}
  /*.stiker-close {
    right: 27%;
}*/
}

@media screen and (min-width: 1200px) {
 .f {font-size: 15px;}
  .wrapper {  margin-left: 5%; margin-right: 5%;}
  .left_forum {display:block;}
  /*.stiker-close {
    right: 26%;
}
*/
}

@media screen and (min-width: 1600px) {
  body { font-size: 20px;margin-top: 0;}
  .title { font-size: 19px; }
  .left_forum {display:block;}
  .q { font-size: 14px; }
  .menu, .menu3, textarea, input, select { font-size: 16px; }
  .footer { font-size: 17px; }
  .wrapper { margin-left: 8%; margin-right: 8%;}
  .f {font-size: 15px;}
  .site_name { font-size: 22px !important;}
  /*.stiker-close {
    right: 28%;
}*/
}

@media screen and (min-width: 1900px) {
 
  .ssyl2 {padding: 14px;}
 .left_forum {display:block;}
  
   
  .site_name { font-size: 23px !important;}
  .adm_panel a {font-size: 19px;}
  .f a {padding: 14px;}
  
   body { font-size: 20px;margin-top: 0;}
   .title { font-size: 20px; padding: 14px;}
  
  .q { font-size: 14px; }
  .menu, .menu3, textarea, input, select { font-size: 16px; }
  .footer { font-size: 18px; }
  .wrapper { margin-left: 8%; margin-right: 8%;}
  
  .site_name { font-size: 23px !important;}
  .f {font-size: 16px;}
  .fontsize, .fontsize a {font-size: 13px;font-weight: 500;}
  IMG.avatar_nav {margin-left: auto; margin-right: 1px;}
  .back_to_top {width: 50px; height: 50px; line-height: 40px; font-size: 24px;}
  .no_notif {
    width: 30px;
    height: 30px;
}

.on_notif {
    width: 30px;
    height: 30px;
}
.up_top {
     width: 20px;
     height: 20px;
    top: 10px;
}
/*
.stiker-close {
    right: 27%;
}*/
}

@media screen and (min-width: 2300px) {
  body { font-size: 21px;margin-top:0;}
  .title { font-size: 23px; padding: 14px;}
  .q { font-size: 17px; }
  .ssyl2 {padding: 15px;}
  .menu, .menu3, textarea, input, select { font-size: 20px; }
  .footer { font-size: 19px; }
 .left_forum {display:block;}
   .wrapper { margin-left: 11%; margin-right: 11%; grid-gap: 20px;}
  .site_name { font-size: 24px !important;}
  .adm_panel a {font-size: 21px;}
  .f a {padding: 16px;}
   .fontsize, .fontsize a {font-size: 14px;font-weight: 500;}
   IMG.avatar_nav {margin-left: auto; margin-right: 1px;}
   .material-icons.md-24 { font-size: 34px; vertical-align: middle;}
   .panel_web count {font-size: 15px;}
   .menuv {font-size: 15px;}
   .right_block, .left_block{top: 70px;}
    aside2 {margin: 15px 0 0 0;}
   .content {margin-top: 8px;}
   .dropdown-content2{min-width: 390px;}
   .dropdown-content2 input{margin: 10px 0;}
   .panel_web a, .r_bar a, .c_bar a {padding: 13px 29px;}
   .avatar_nav {width: 200px; height: 200px;}
   pp > tit {font-size: 35px;}
   .back_to_top {width: 60px; height: 60px; line-height: 50px; font-size: 28px;}
     .no_notif {
    width: 34px;
    height: 34px;
}

.on_notif {
    width: 34px;
    height: 34px;
}
.toggle-forum {width: 27px;height: 27px; }

.forum-popup-content {min-width: 250px; margin-top: 28px;}
/*.stiker-close {
    right: 29%;
}*/
}

@media screen and (min-width: 3000px) {
  body { font-size: 22px;margin-top:0;}
  .title { font-size: 24px; padding: 14px;}
  .q { font-size: 18px; }
  .ssyl2 {padding: 16px;}
  .menu, .menu3, textarea, input, select { font-size: 21px; }
  .footer { font-size: 20px; }
 .left_forum {display:block;}
   .wrapper { margin-left: 15%; margin-right: 15%; grid-gap: 22px;}
  .site_name { font-size: 25px !important;}
  .adm_panel a {font-size: 22px;}
  .f a {padding: 17px;}
   .fontsize, .fontsize a {font-size: 15px;font-weight: 500;}
   IMG.avatar_nav {margin-left: auto; margin-right: 1px;}
   .material-icons.md-24 { font-size: 35px; vertical-align: middle;}
    .panel_web count {font-size: 16px;}
    .menuv {font-size: 16px;}
    .right_block, .left_block{top: 71px;}
    aside, aside2 {margin: 20px 0 0 0;}
    .content {margin-top: 15px;}
    .dropdown-content2{min-width: 390px;}
    .dropdown-content2 input{margin: 10px 0;}
    .avatar_nav {width: 220px; height: 220px;}
    pp > tit {font-size: 40px;}
    .back_to_top {width: 65px; height: 65px; line-height: 55px; font-size: 28px;}
      .no_notif {
    width: 38px;
    height: 38px;
}

.on_notif {
    width: 38px;
    height: 38px;
}
.toggle-forum {width: 30px;height: 30px; }

.forum-popup-content {min-width: 300px; margin-top: 31px;}
/*.stiker-close {
    right: 31%;
}*/
}

@media screen and (min-width: 3800px) {
  body { font-size: 23px;margin-top:0;}
  .title { font-size: 25px; padding: 15px;}
  .q { font-size: 19px; }
  .ssyl2 {padding: 17px;}
  .menu, .menu3, textarea, input, select { font-size: 23px; }
  .footer { font-size: 21px; }
 .left_forum {display:block;}
   .wrapper { margin-left: 17%; margin-right: 17%; grid-gap: 25px;}
  .site_name { font-size: 26px !important;}
  .adm_panel a {font-size: 23px;}
  .f a {padding: 17px;}
   .fontsize, .fontsize a {font-size: 16px;font-weight: 500;}
   IMG.avatar_nav {margin-left: auto; margin-right: 1px;}
   .material-icons.md-24 { font-size: 38px; vertical-align: middle;}
    .panel_web count {font-size: 17px;}
    .menuv {font-size: 17px;}
    .right_block, .left_block{top: 74px;}
    aside, aside2 {margin: 25px 0 0 0;}
    .content {margin-top: 20px;}
    .dropdown-content2{min-width: 390px;}
    .dropdown-content2 input{margin: 10px 0;}
    .panel_web a, .r_bar a, .c_bar a {padding: 13px 31px;}
    .avatar_nav {width: 250px; height: 250px;}
    pp > tit {font-size: 45px;}
    .back_to_top {width: 70px; height: 70px; line-height: 60px; font-size: 35px;}
.no_notif {width: 48px; height: 48px;}
.on_notif {width: 48px; height: 48px;}
.toggle-forum {width: 35px;height: 35px; }

.forum-popup-content {min-width: 350px; margin-top: 36px;}
/*.stiker-close {
    right: 32%;
}*/
}