  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
  body { font-family: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; color: #111827; color: #32325D; background: #F6F9FC; }
  body:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #38BDF8, #6366F1); background: linear-gradient(to right, #A855F7, #6366F1); opacity: 0.01; }
  a { color: #5469D4; color: #1A0DAB; text-decoration: none; font-weight: 500; }
  a:hover { text-decoration: underline; }
  .break { display: block; width: 100%; }
  .clear { clear: both; }
  .report { padding: 0 0 20px; }
  hr { border: 0 none; border-bottom: 1px solid rgba(0,0,0,0.1); margin: 0; padding-top: 10px; }
  .wrapper { position: relative; width: 100%; max-width: 960px; margin: 0 auto; font-size: 0; line-height: 1; }
  .columns { columns: 2; }
  .button { border: 0 none; outline: 0 none; position: relative; line-height: 20px; font-family: inherit; color: inherit; background: white; box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 8px; transition: box-shadow 0.3s ease; user-select: none; display: inline-block; text-decoration: none; }
  .button span.mdi { display: inline-block; margin-right: 6px; }
  .button:hover { box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 3px 9px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; }
  .button.margin-right { margin-right: 15px; }
  .button.margin-left { margin-left: 15px; }
  .button.disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
  
  .card-header-button { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: rgba(50,50,93,0.8); }

  .header { position: relative; width: 100%; background: white; box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; margin: 0; z-index: 30; }
    .header .header-main { position: relative; display: block; height: 60px; }
    .header .wrapper { height: 100%; padding: 0; }
    .header a.logo { position: relative; display: block; width: calc(100% - 160px); max-width: 260px; height: calc(100% - 26px); max-height: 26px; top: 50%; transform: translateY(-50%); margin: 0 auto; }
    .header a.logo:hover { opacity: 0.9; }
    .header a.logo img { position: relative; width: 100%; display: block; height: 100%; object-fit: contain; margin: 0 auto; }
    .header .main-nav-item { position: absolute; top: 50%; left: 10px; font-size: 24px; line-height: 1; margin: -12px 0 0; color: inherit; cursor: pointer }
    
  .cover { position: relative; background: white; font-size: 14px; padding: 20px 20px 5px; z-index: 20; }
    .cover .logo { position: relative; display: block; width: 75%; max-width: 200px; margin: 0 auto 20px; text-align: center; }
    .cover .logo img { position: relative; width: auto; max-width: 100%; max-height: 60px; }
    .cover .title { font-weight: 600; font-size: 24px; line-height: 1.4; text-align: center; }

  .range { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.975); box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; text-align: center; margin: 0 0 10px; padding: 15px 0px; }
  #reportrange { position: relative; display: inline-block; cursor: pointer; padding: 10px; background: linear-gradient(#FAFAFA,#FFFFFF); box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; font-size: 14px; font-weight: 500; text-align: center; margin: 0 auto; border-radius: 6px; transition: box-shadow 0.3s ease; }
    #reportrange:hover { box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 3px 9px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; }
    #reportrange .icon { display: inline-block; padding: 0; opacity: 0.8; }
    #reportrange span { padding-left: 3px; }
    #reportrange em { padding: 0 5px; }
  .daterangepicker { font-family: inherit; font-size: inherit; border-radius: 6px; box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; border: 0 none; margin-top: 4px; }
    .daterangepicker .ranges ul { width: 230px; text-align: center; }
    .daterangepicker .ranges li { width: calc(100% - 10px); font-size: 14px; line-height: 1.4; font-weight: 500; margin: 5px auto; border-radius: 6px; }
    .daterangepicker.show-calendar .ranges { margin: 0; border-right: 1px solid rgba(0,0,0,0.1); }
    .daterangepicker.show-ranges.ltr .drp-calendar.left { border: 0 none; }
    .daterangepicker .drp-buttons button.btn { -webkit-appearance: none; appearance: none; border: 0 none; font-size: 12px; font-family: inherit; font-weight: 500; box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; border-radius: 4px; padding: 4px 8px; line-height: 18px; background: transparent; }
    .daterangepicker .drp-buttons button.btn.btn-primary { color: #009688; font-weight: 600; }

  .card { display: inline-block; width: calc(100% - 20px); margin: 10px; border-radius: 6px; background: white; vertical-align: top; font-size: 14px; box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; }
    .card p { opacity: 0.8; line-height: 1.6; margin: -5px 0 15px; }
    .card p strong { font-weight: 600; }
    .card .key { text-transform: uppercase; font-size: 12px; font-weight: 600; display: block; margin: 0 0 10px; letter-spacing: 0.3px; }
    .card p:last-child { margin-bottom: 0; }
    .card .item.item-inline { display: inline-block; width: auto; padding: 10px 60px 25px 0; }
    .card .item.item-inline:last-child { padding: 0 0 25px 0; }
    .card .item:last-child { padding: 0; }
    .card span.comment { display: inline-block; margin-left: 5px; opacity: 0.7; }
    .card .card-header { position: relative; padding: 20px; }
    .card .card-header .card-icon { margin-right: 5px; }
    .card .card-header .label { font-size: 18px; font-weight: 600; }
    
    .card .card-content { padding: 25px 20px 20px; border-top: 1px solid rgba(0,0,0,0.05); overflow: hidden; }
    .card .card-content.current-ad { padding: 0; border-top: 0 none; }
      .card .card-content.current-ad .tabs { position: relative; font-size: 0; box-shadow: 0 -2px 0 rgb(0 0 0 / 5%) inset; }
        .card .card-content.current-ad .tabs .tab { display: inline-block; font-size: 14px; width: 50%; text-align: center; line-height: 50px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; cursor: pointer; color: rgba(75,89,102,0.7); }
        .card .card-content.current-ad .tabs .tab.active { box-shadow: 0 -2px 0 inset #4B5966; color: #4B5966; font-weight: bold; }
      .card .card-content.current-ad .container { display: none; font-size: 0; }
        .card .card-content.current-ad .container.active { display: block; }
        .card .card-content.current-ad .container img { width: 100%; height: auto; }
    .card .card-content .promo-wrapper { padding: 25px 0; background: #FAFAFA; position: relative; border-bottom: 1px solid #F3F3FF; }
      .card .card-content .promo { position: relative; display: block; margin: 0 auto; width: 300px; height: 250px; border-radius: 6px; overflow: hidden; box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; }
      .card .card-content .promo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 none; }
    .card .card-content.promo-info { width: 100%; max-width: 340px; margin: -1px auto 0; overflow: visible; }
      .card .card-content.promo-info p { font-size: 14px; margin: 25px 0 0; }
      .card .card-content.promo-info p strong { display: inline-block; border-bottom: 1px dotted rgba(0,0,0,0.3); }
    .card .switcher { position: absolute; top: 50%; right: 10px; line-height: 30px; font-size: 0; transform: translateY(-50%); font-weight: normal; user-select: none; padding: 0 25px; margin-top: 1px; }
    .card .switcher span.mdi { cursor: pointer; position: absolute; top: 0; left: 0; font-size: 20px; margin-top: 1px; }
    .card .switcher span.mdi.mdi-chevron-right { left: auto; right: 0; }
    .card .switcher span.item-number { display: inline-block; font-size: 15px; }
    .card .switcher span.total { display: inline-block; opacity: 0.6; font-size: 15px; }
    .card .switcher span.total:before { content: "/"; margin: 0 5px; }
    
    .card .item { display: block; width: 100%; font-size: 15px; padding: 0 0 25px; }
    .card .item .value { position: relative; margin: 10px 0 0; }
    .card .item .value span.number { font-weight: 500; }
    .card .item .value.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
    .card .item .value.text p { margin-top: 0; }
    .card .item .value.text.expanded { display: block; }
    .card .item .value.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 2; margin: 0; }
    .card .item span.mdi { margin-right: 7px; }
    .card .item .value span.mdi { color: #697386; opacity: 0.8; float: left; margin-right: 10px; }
    
    .card .item .value.breakdown { font-size: 0; margin: 0; line-height: 2; }
    .card .item .value.breakdown span { display: inline-block; font-size: 15px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .card .item .value.breakdown span.mdi { float: none; width: 25px; }
    .card .item .value.breakdown span.label { width: calc(100% - 145px); }
    .card .item .value.breakdown span.number { width: 60px; text-align: right; }
    .card .item .value.breakdown span.percentage { width: 60px; text-align: right; opacity: 0.5; transform: scale(0.9); transform-origin: right center; }
    .card .item .value.breakdown.breakdown-with-dot span.dot { width: 12px; height: 12px; margin: 0 13px 0 0; border-radius: 100%; transform: translateY(-10px); }
    .card .item .value.breakdown.breakdown-with-dot span.label { width: calc(100% - 170px); }
    
    .card .item.stat-inline { display: inline-block; width: auto; padding: 10px 50px 10px 0px; }
    .card .item.stat-inline:last-child { padding: 10px 0; }
    .card .item.stat-big .value { font-size: 34px; opacity: 0.8; }
    .card .item.stat-bold .value { font-weight: 600; opacity: 1; }
    .card .item.stat-accented .value { color: #4CC0C0; opacity: 1; }
    .card .item.stat-accented-negative .value { color: #FF6384; opacity: 1; }
    .card .item.stat-with-arrow span.mdi { opacity: 1; transform: scale(0.75); transform-origin: center left; width: auto; margin: 0 -5px 0 0; color: inherit; }
      
  .state-zero { display: none;background: rgba(0,0,0,0.01); padding: 15px; border: 1px solid rgba(0,0,0,0.05); border-radius: 6px; }
  .state-zero .title { font-weight: 600; font-size: 16px; margin: 5px 0 20px; line-height: 1; }
  .state-zero .title span.mdi { margin-right: 7px; }
  
  .search-ranks { border-bottom: 1px solid rgba(0,0,0,0.05); padding: 0 0 10px; }
  .search-rank-buttons { margin: 5px 0 0; }
  .search-rank-buttons .button { margin: 0 10px 0 0; color: rgba(50,50,93,0.9); font-weight: normal; }
  
  progress { -webkit-appearance: none; width: 100%; margin: 0px 0 30px; border-radius: 6px; overflow: hidden; background: transparent; height: 12px; }
  progress::-webkit-progress-bar { background: #E1E5EA; background: #6C8EEF; }
  progress::-webkit-progress-value { background: #4CC0C0; border-right: 4px solid white; }
  
  #competitor-comparison { overflow: hidden; background: rgba(0,0,0,0.01); padding: 15px; border: 1px solid rgba(0,0,0,0.05); border-radius: 6px; margin: 0 0 20px; }
  .highcharts-title, .highcharts-credits { display: none; }
  #competitor-comparison .highcharts-legend-item text { font-weight: 500 !important; letter-spacing: 0.2px; }

  .search-results-preview { list-style: none; padding: 15px 0 0; }
  .search-results-preview li { position: relative; padding: 10px 15px 10px 35px; line-height: 1.3; }
  .search-results-preview li.selected { box-shadow: 3px 0 0 inset #4CC0C0; background: rgba(76,192,192,0.075); }
  .search-results-preview .a { font-size: 12px; padding: 0 0 5px; color: #202124; }
  .search-results-preview .b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  font-size: 15px; }
  .search-results-preview .c { position: absolute; top: 12px; left: 5px; font-size: 12px; line-height: 1; opacity: 0.6; text-align: right; width: 20px; font-weight: 500; }
  .search-results-preview .c:after { content: "."; }
  
  .tooltip { position: relative; cursor: pointer; color: rgba(50,50,93,0.8); }
  .tooltip:hover:after { content: attr(data-tooltip); position: absolute; text-transform: none; background: #32325D; color: white; padding: 10px; min-width: 200px; text-align: center; border-radius: 6px; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); line-height: 1.3; }
  .tooltip.tooltip-small:hover:after { min-width: 120px; }

  .card-header .tooltip { font-size: 15px; margin-left: 5px; color: rgba(50,50,93,0.6); }
  .card-header .tooltip:hover:after { font-size: 13px; }
  
  body.modal-on { overflow: hidden; }
  .modal { display: none; position: fixed; font-size: 15px; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); z-index: 100; line-height: 1.6; }
  .modal .modal-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; cursor: pointer; }
  .modal .modal-container { z-index: 6; position: absolute; top: 50%; left: 50%; width: calc(100% - 12px); height: calc(100% - 12px); overflow: auto; transform: translateX(-50%) translateY(-50%); border-radius: 6px; box-shadow: 0 0 8px rgb(0 0 0 / 10%); max-height: 800px; max-width: 600px; background: white; }
  .modal.auto-height .modal-container { height: auto; max-height: calc(100% - 12px); }
  .modal .modal-header { position: sticky; top: 0; left: 0; width: 100%; background: rgba(250,250,250,0.98); padding: 20px 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); z-index: 100; }
  .modal .modal-header h2 { font-size: 20px; line-height: 1; }
  .modal .modal-close { position: absolute; top: 19px; right: 26px; font-size: 22px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.3s ease; }
  .modal .modal-close:hover { opacity: 1; }
  .modal .modal-content { padding: 20px 30px; }
  
  .select-container { position: relative; background: linear-gradient(#FAFAFA,#FFFFFF); box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; border-radius: 6px; padding: 0; cursor: pointer; display: inline-block; margin: 0 0 15px; overflow: hidden; }
  .select-container:after { content: "\F035D"; font-family: "Material Design Icons"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 0 10px; pointer-events: none; }
  .select-container select { -webkit-appearance: none; appearance: none; border: 0 none; outline: 0 none; font-family: inherit; font-size: inherit; color: inherit; font-weight: 500; padding: 10px 30px 10px 12px; background: transparent; cursor: pointer; }
  .select-container select:focus { box-shadow: 0 0 0 1px rgba(84,105,212,0.8) inset; border-radius: 6px; }
  
  .form .input { position: relative; padding-left: 140px; margin: 0 0 20px; font-size: 14px; min-height: 38px; }
  .form .input .label { position: absolute; left: 0; width: 140px; padding-right: 20px; line-height: 38px; font-weight: 500; }
  .form .input.required .label:after { content: "*"; margin-left: 4px; }
  .form input[type=text],
  .form input[type=number],
  .form input[type=email],
  .form input[type=url],
  .form textarea { -webkit-appearance: none; appearance: none; border: 0 none; outline: 0 none; font-family: inherit; line-height: inherit; font-size: inherit; color: inherit; background: transparent; padding: 8px 12px; box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px; width: 100%; overflow: hidden; border-radius: 6px; }
  .form input[type=text]:focus,
  .form input[type=number]:focus,
  .form input[type=email]:focus,
  .form input[type=url]:focus,
  .form textarea:focus { box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 8%) 0px 1px 1px 0px, rgb(60 66 87 / 8%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 8%) 0px 2px 5px 0px, 0 0 0 1px rgba(84,105,212,0.8) inset; }
  .form textarea { height: 130px; }
  .form .select-container { margin: 0 0 5px; }
  .form h4 { text-transform: uppercase; letter-spacing: 0.2px; padding: 20px 0 10px; border-bottom: 1px solid rgba(0,0,0,0.05); margin: 0 0 20px; }
  .form .input p { opacity: 0.7; font-size: 13px; padding-top: 5px; }
  .form .form-actions { text-align: right; background: rgba(250,250,250,0.98); padding: 20px 30px; margin: 30px -30px -20px; position: relative; bottom: 0; box-shadow: 0 -1px 3px rgba(0,0,0,0.1); z-index: 100; }
  .form .form-actions .button { margin-left: 10px; }
  .form .form-actions .button.primary { background: #5469D4; color: white; }
  
  .form .bh-input-group { font-size: 0; }
  .form .bh-input-group input { font-size: 14px; }
  .form .bh-input-group span { position: relative; display: inline-block; float: left; }
  .form .bh-input-group span:before { display: none; content: attr(data-label); position: absolute; line-height: 1; font-size: 11px; bottom: 100%; font-weight: 500; width: 100%; padding-bottom: 12px; text-transform: uppercase; }
  .form .bh-input-group span.text-input-container { width: calc(50% - 100px); margin-left: 20px; }
  .form .bh-input-group span.text-input-container:first-child { margin: 0; }
  .form .bh-input-group span.checkbox-container { width: 60px; text-align: center; line-height: 38px; height: 38px; }

  .form .first-bh-input { margin-top: 50px; }
  .form .first-bh-input .bh-input-group span:before { display: block; }

  .form .input.with-action input { padding-right: 52px; }
  .delete-keyword { position: absolute; top: auto; right: 0; width: 40px; text-align: center; font-size: 18px; line-height: 37px; color: #f44336; cursor: pointer; z-index: 10; border-left: 1px solid rgba(0,0,0,0.05); }
  .form .form-actions .button.add-keyword { margin: 0; float: left; }
  
  details { font-size: 14px; }
  details[open] { opacity: 1; }
  details summary { text-transform: uppercase; font-size: 12px; font-weight: 600; padding-bottom: 20px; letter-spacing: 0.3px; outline: 0 none; cursor: pointer; user-select: none; }
  details[open] summary { border-bottom: 1px solid rgba(0,0,0,0.05); padding: 0 0 15px; margin: 0 0 15px; }
  details *:marker { margin-right: 10px; }


@media screen and (max-width: 970px) {
  .header .main-nav-item { left: 12px; }
  .wrapper { padding: 0 10px; }
  .card { max-width: 400px; }
  .daterangepicker { width: 250px; }
  .daterangepicker.show-calendar { width: 280px; }
  .daterangepicker.show-calendar .ranges { border-right: 0 none; border-bottom: 1px solid rgba(0,0,0,0.1); margin: 0 0 10px; }
  .daterangepicker.show-calendar .ranges ul { width: 100%; }
}

@media screen and (max-width: 766px) {
  .wrapper { padding: 0; }
  .header .header-main { height: 50px; }
  .cover { padding: 20px 15px 5px; }
  .cover .title { font-size: 19px; line-height: 1.1; }
  .range { padding: 15px 0; margin: 0 0 15px; }
  .columns { columns: auto; display: flex; flex-flow: column; }
  .card { display: block; margin: 0 auto 15px; font-size: 14px; }
  .card .card-header .label { font-size: 17px; }
  .card[data-title="ads"] { order: 1; }
  .card[data-title="information"] { order: 5; }
  .card[data-title="engagement"] { order: 4; }
  .card[data-title="total-reach"] { order: 2; }
  .card[data-title="online-reach"] { order: 3; }
  .card[data-title="comparison"] { order: 6; }
  .card[data-title="rank"] { order: 7; }
  .card .item .value.half { width: 100%; }
  .card .item.stat-inline { padding-right: 30px; }
  .card .search-ranks .item.stat-inline { width: 100%; }
  .card-header-button { font-size: 0; height: 28px; }
  .card-header-button span.mdi { font-size: 14px; margin: 0; }
  .modal .modal-header { padding: 15px 20px; }
  .modal .modal-close { top: 12px; right: 20px; }
  .modal .modal-content { padding: 15px 20px; }
  .modal .modal-header h2 { font-size: 18px; }
  .form .input { padding: 0; margin: 0 0 20px; min-height: 66px; }
  .form .input .label { position: relative; top: auto; left: auto; line-height: 1; text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: 0.2px; padding: 0 0 15px; }
  .form h4 { font-size: 14px; }
  .form .form-actions { padding: 20px; margin: 25px -20px -15px; }
  .form .bh-input-group { padding: 30px 0 50px; }
  .form .bh-input-group span:before { display: block; }
}