/* =========================================================
   yu.su adaptive layer
   Loaded AFTER style.css and bootstrap*.css
   Layout breakpoints (kept from old custom bootstrap.css block):
     - lg  (>=1126px): two columns, fixed widths
     - md  (992-1125px): two columns, fluid content
     - sm  (<992px): single column, colRight hidden, burger menu
   ========================================================= */

/* ---------- default hidden on desktop (shown <992px) ---------- */
.burger-btn { display: none; }
.topmenu-mobile { display: none; }

/* ---------- global fluid guards ---------- */
img { max-width: 100%; height: auto; }
video, iframe, embed { max-width: 100%; }
textarea, input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], select {
  max-width: 100%;
  box-sizing: border-box;
}
.wrap_body { overflow-x: hidden; }

/* ---------- desktop two columns (>=1126px) ---------- */
@media (min-width: 1126px) {
  #wrapper { max-width: 1122px; }
  #headerInner { max-width: 1122px; }
  #content #colLeft { width: 800px; float: right; }
  #content #colRight { width: 280px; float: left; }
  #footerInner { max-width: 1122px; }
  .logotip_top { margin-left: 25px; }
  .container { max-width: 1122px; }
  .postBox { width: 777px; margin-top: 0; margin-left: 0; margin-bottom: 10px; }
  .postBox .textPreview { border: 0 solid #333; margin-bottom: 30px; }
  .chainli { width: 100%; overflow-wrap: break-word; }
  .chain { text-align: center; width: 820px; margin-left: -12px; margin-top: 0; padding: 0; height: auto; }
  .show_chain2 { background: #fefefe; width: 187px; padding: 5px; min-height: 50px; text-align: center; font-size: 14px; line-height: 1.1em; box-shadow: 0 0 1px rgba(0,0,0,.1); margin-right: 2px; }
  .show_chain2:hover { opacity: .7; }
  .mrl50 { margin-left: 50px; }
  .txtmain { margin: 40px 50px 50px 50px; height: auto; }
}

/* ---------- tablet two columns, fluid content (992-1125px) ---------- */
@media (min-width: 992px) and (max-width: 1125px) {
  #wrapper { max-width: 1122px; }
  #headerInner { max-width: 1122px; }
  #footerInner { max-width: 1122px; }
  .container { max-width: 1122px; }
  #content #colLeft {
    width: auto;
    float: right;
    min-width: 0;
    max-width: calc(100% - 300px);
  }
  #content #colRight { width: 280px; float: left; }
  .postBox { width: 100%; }
  .chainli { width: 100%; overflow-wrap: break-word; }
  .chain { text-align: center; width: 100%; margin-left: -12px; margin-top: 0; padding: 0; height: auto; }
  .show_chain2 { background: #fefefe; width: 93%; padding: 5px; min-height: 50px; font-size: 14px; line-height: 1.1em; margin: 0; }
  .show_chain2:hover { opacity: .7; }
  .mrl50 { margin-left: 0; }
  .txtmain { margin: 40px 0 50px 0; height: auto; }
}

/* ---------- mobile single column (<992px) ---------- */
@media (max-width: 991.98px) {
  #wrapper, #content, #colLeft, #colRight { width: 100% !important; max-width: 100% !important; }
  #content #colLeft, #content #colRight { float: none; min-width: 0; }
  #content #colLeft { padding-left: 10px; padding-right: 10px; }
  #footer, .pos-f-t { width: 100% !important; max-width: 100% !important; }
  #headerInner, #footerInner { max-width: 100%; }

  .postBox { width: 100%; }
  .chain { width: 100%; margin-left: 0; }
  .chainli { width: 100%; overflow-wrap: break-word; }
  .show_chain2 { width: 100%; margin: 0 0 4px 0; }
  .mrl50 { margin-left: 0; }
  .txtmain { margin: 20px 0 30px 0; }

  /* header */
  .header { margin-top: 5px; margin-bottom: 5px; }
  .logotip_top { margin-left: 10px; }
  .logotip_top img.logoi { max-width: 170px; }
  .topMenuRight, .topMenuRightAUTH { position: static; float: left; }
  .topMenuRight ul li, .topMenuRightAUTH ul li { float: left; }
  .topMenuRight ul li a, .topMenuRightAUTH ul li a { font-size: 15px; padding: 6px 9px; }

  /* account popup (open_acn) - absolute margins are desktop-only */
  .open_acn {
    left: auto;
    right: 0;
    top: 52px;
    margin-left: 0;
    margin-top: 0;
    width: 300px;
    max-width: calc(100vw - 20px);
  }
  .open_acn::after { right: 12px; }

  /* burger button */
  .burger-btn {
    display: inline-block;
    float: right;
    margin: 8px 12px 0 0;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    color: #0e344f;
  }
  .burger-btn:focus { outline: none; }
  .burger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: #0e344f;
    margin: 4px 0;
    border-radius: 1px;
  }
  .burger-btn.close span { background: #fff; }

  /* mobile header menu (toggled by burger) */
  .topmenu-mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #eee;
    border-top: 3px solid #38C59A;
    box-shadow: 0 8px 16px rgba(0,0,0,.12);
  }
  .topmenu-mobile.open { display: block; }
  .topmenu-mobile .topmenu-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
  }
  .topmenu-mobile .topmenu-mobile-head .logoi { max-width: 150px; }
  .topmenu-mobile .topmenu-mobile-head .burger-btn.close {
    float: none;
    margin: 0;
    background: #0F9877;
    border-color: #0F9877;
  }
  .topmenu-mobile ul { margin: 0; padding: 0; list-style: none; }
  .topmenu-mobile ul li { display: block; border-bottom: 1px solid #f0f0f0; }
  .topmenu-mobile ul li a {
    display: block;
    padding: 12px 16px;
    color: #0e344f;
    font-size: 16px;
    text-decoration: none;
  }
  .topmenu-mobile ul li a:hover { background: #f6fbf9; color: #0F9877; }
  .topmenu-mobile .topmenu-mobile-title {
    padding: 8px 16px;
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
  }
  .topmenu-mobile .mobile-cab-title {
    padding: 8px 16px;
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
  }

  /* content tables: horizontal scroll instead of overflow off-screen */
  .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll table { max-width: 100%; }

  /* forms full width */
  input[type="text"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="number"], select, textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
  .form-control { width: 100% !important; max-width: 100% !important; }
  .input-group { max-width: 100%; flex-wrap: wrap; }
  .input-group .form-control { width: auto !important; flex: 1 1 auto; }

  /* modal dialogs fit the screen */
  .modal-dialog { margin: 10px auto; max-width: calc(100% - 20px); }
  .modal-content { max-width: 100%; }
  #q_content { max-width: 100% !important; }
  #q_box { max-width: 100% !important; }

  /* chains / banner strips */
  .tabreclama { max-width: 100%; }

  /* footer columns stack vertically */
  #footer { height: auto; padding-bottom: 60px; }
  #footerInner { padding: 0 12px; }
  .foter_bottom { height: 120px; }
  .foter_menu_link1, .foter_menu_link2, .foter_menu_link3, .foter_menu_link4 {
    position: static;
    margin: 0 0 24px 0;
    height: auto;
  }
  .foter_menu_link1 .foter_menu_title,
  .foter_menu_link2 .foter_menu_title,
  .foter_menu_link3 .foter_menu_title,
  .foter_menu_link4 .foter_menu_title {
    margin-bottom: 8px;
  }
  .foter_up { float: none; margin: 0 auto 20px auto; }

  /* fixed-width custom tables/blocks fit the screen */
  .regavto { width: 100% !important; max-width: 100% !important; margin: 20px 0 30px 0; }
  .tablemenu { width: 100% !important; max-width: 100% !important; margin: 30px auto 0 auto; }
  .mobile-left-menu { width: 100% !important; max-width: 100% !important; margin: 15px 0 0 0; }
  .tables td.tdpl0 { width: auto; }
  .bgtd { max-width: 100%; }
  .tnbut { width: auto; float: none; }
  .toggnavi { margin-top: 0; float: none; }
}