* {box-sizing:border-box}
html, body {margin:0; padding:0}
body {font-family:Calibri; color:#525252; font-size:18px; overflow-x:hidden}
img {max-width:100%; height:auto}

/* Header
================== */
#header {margin-bottom:30px}
#wrapper {position: relative; left: 0; transition: 0.3s all ease-in-out; padding-bottom: 60px;}

/* Navigation
================== */
#main-menu {background:#212c43; border-bottom:1px solid #000; position: fixed; top: 0; left: -240px; width: 240px; height: 100%; transition: 0.3s all ease-in-out; z-index: 100;}
#main-menu > ul {max-width:1200px; width:100%; margin:0 auto; list-style:none; padding:0}
#main-menu > ul:after {content:""; display:table; clear:both}
#main-menu > ul > li {position:relative; border-width:0 1px 0 0; border-style:solid; border-color:#000}
#main-menu > ul > li:first-child {border-left-width:1px}
#main-menu a {display:block; text-decoration:none; padding:20px 25px; color:#fff; font-weight:300}
#main-menu a.active {color:#87abf5}
#main-menu a.active:hover {color:#668cd8}
#main-menu > ul > li > a:hover {color:#87abf5}
#main-menu ul li ul {display: none;}
#main-menu ul li ul.expand {display:block; background:#495267; padding: 0;}
#main-menu ul li ul li {border-bottom:1px solid #323846}
#main-menu ul li ul li:last-child {border:none}
#main-menu ul li ul li a:hover {color:#87abf5}
#main-menu ul li a.has-dropdown {position: relative;}
#main-menu ul li a.has-dropdown:after {position: absolute; content: ''; width: 7px; height: 7px; border-width: 1px 0 0 1px; border-style: solid; border-color: #607d8b; right: 1em; -webkit-transform: rotate( 135deg ) translate(0, -50%); -ms-transform: rotate(135deg) translate(0, -50%); -o-transform: rotate(135deg) translate(0, -50%); transform: rotate( 135deg ) translate(0, -50%); -webkit-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; top: 47%; -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;}
#main-menu ul li a.has-dropdown.active:after {-webkit-transform: rotate( -135deg ) translate(0, -50%); -ms-transform: rotate(-135deg) translate(0, -50%); -o-transform: rotate(-135deg) translate(0, -50%); top: 45%; width: 7px; transform: rotate( -135deg ) translate(0, -50%);}
.btn-toggle-menu {font-size: 1.5em; color:#333; position: relative; left: 10px; transition: 0.3s all ease-in-out;}

/* Nav Button
====================== */
#nav-icon {width: 35px; height: 30px; position: relative; margin: 10px 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer}
#nav-icon span {display: block; position: absolute; height: 5px; width: 100%; background: #333; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out}
#nav-icon span:nth-child(1) {top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center}
#nav-icon span:nth-child(2) {top: 12px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center}
#nav-icon span:nth-child(3) {top: 24px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center}
.show-sidebar #nav-icon span:nth-child(1) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0; left: 5px}
.show-sidebar #nav-icon span:nth-child(2) {width: 0%; opacity: 0}
.show-sidebar #nav-icon span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 25px; left: 5px}

/* Skeleton
================== */
.container {max-width:100%; width:100%; margin:0 auto}
.container.narrow {max-width:500px}
.container:after {content:""; display:table; clear:both}
[class*=col-] {width:100%; padding-bottom:10px}

/* Form
================== */
input[type="text"],
input[type="password"],
select,
textarea,
.upload-btn {display:block; border:1px solid #dedede; border-radius:3px; height:40px; max-width:100%; width:100%; padding:5px; font-size:inherit; font-family:inherit}
.upload-btn {padding:0 5px; line-height:40px; cursor: pointer}
textarea {min-height:150px}
.btn {background:#7ccbfc; text-decoration:none; color:#fff; font-size:inherit; font-family:inherit; border:none; border-radius:3px; padding:10px 20px; display:inline-block; cursor:pointer; margin-right:5px}
.btn:hover {background:#62a2ca}
.btn.warning {background:#fc7c7c}
.btn.warning:hover {background:#e85454}
.btn.success {background:#54d25f}
.btn.success:hover {background:#4fc159}

/* Login Form
================== */
.login {background:#f3f3f3; margin:50px 0; padding:50px; border-radius:5px; box-shadow:0 2px 2px #999}
.login h1 {margin-top:0; text-align:center}
.login img {border-radius:50%; display:block; margin:30px auto}
.login .btn {display:block; width:100%}

/* Reset Form
================== */
.reset {background:#f3f3f3; margin:50px 0; padding:50px; border-radius:5px; box-shadow:0 2px 2px #999}
.reset h1 {margin:0; text-align:center}
.reset p {margin:0 0 30px 0; text-align:center}
.reset .btn {display:block; width:100%}
.reset .security_question {display:block; margin-top:20px}

#preview {margin-top:30px}
#preview article {border: 1px solid #dedede; border-radius:3px; position:relative; min-height:350px}
#preview article .image, #preview article .summary {float:left}
#preview article .image:after, #preview article .summary:after {content:""; display:table; clear:both}
#preview article .image {width:100%; background:none}
#preview article .summary {width:100%; padding:2%}
#preview article:after {content:""; display:table; clear:both}
#preview article h2, #preview article h3, #preview article p {margin-top:0}
#preview article h2, #preview article h3 {margin-bottom:5px}
#preview article img {display:block}
#preview article .features:before {content:"Features: "}
.java_required {display:none; position:absolute; top:50%; transform:translateY(-50%); width:100%; text-align:center}
.java_required h2, .java_required p {margin:0}
.java_required h2 {font-size:50px; line-height:55px; color:#eb6d06}

/* Colors
================== */
.red {color:#e82222}
.green {color:#43d849}

/* Elements
================== */
table {margin:20px 0; width:100%; border-collapse:collapse}
table tr th, table tr td {position:relative; border:1px solid #dedede; padding:10px; text-align:left}
table tr:hover {background:#f3f3f3}
table tr td input {cursor:pointer}
table tr td .btn {padding:5px 20px; margin:0 5px 5px 0}
table .order-link {display: inline-block; background:#fc7c7c; color:#fff; width: 25px; height: 25px; text-align: center; line-height: 25px; text-decoration: none; border-radius:3px}
table .order-link:hover {background:#e85454}
table .order-link:first-child {margin-left:10px; margin-right:5px}
.td-5 tr td {height:60px; padding:0 10px}
.td-5 tr td:first-child,
.td-5 tr th:first-child,
.td-5 tr td:last-child {text-align:center}

/* Select Table
================== */
.td-4 tr th:nth-child(3),
.td-4 tr td:nth-child(3),
.td-4 tr th:nth-child(4),
.td-4 tr td:nth-child(4) {text-align:center; width:150px}

/* Hearing aids table
================== */
.td-3 tr td:last-child {max-width:70px; text-align:center}
.table table,
.table tbody,
.table th,
.table td,
.table tr {display: block}
.table tr:hover {background:#fff}
.table td {border: none; position: relative; padding-left: 25% !important; text-align:left !important; z-index:0}
.table table td span {max-width:100% !important}
.table td:before {position: absolute; top: 10px; left: 6px; width: 20%; padding-right: 10px; white-space: nowrap}
.table td:nth-of-type(1):before {content: "Brand:"}
.table td:nth-of-type(2):before {content: "Name:"}
.table td:nth-of-type(3):before {content: "Subtitle:"}
.table td:nth-of-type(4):before {content: "Page Title:"}
.table td:nth-of-type(5):before {content: "Image:"}
.table td:nth-of-type(6):before {content: "Image Small:"}
.table td:nth-of-type(7):before {content: "Brochure:"}
.table td:nth-of-type(8):before {content: "Features:"}
.table td:nth-of-type(9):before {content: "Short Description:"}
.table td:nth-of-type(10):before {content: "Description:"}
.table td:nth-of-type(11):before {content: ""}
.title {background: #f3f3f3; padding: 10px; border: 1px solid #dedede; text-align: center}
#bulk {position:relative; width:100%; margin:50px 0 30px; background: #f3f3f3; padding: 30px; border: 1px solid #dedede}
#bulk:before {content: "Bulk Selection"; position: absolute; top: -35px; left: 0px; text-transform: uppercase; text-align: center; width: 100%; font-size: 25px; letter-spacing:2px}
#bulk > div {float:left; max-width:23.5%; width:100%; margin:0 2% 2% 0}
#bulk > div:nth-child(4n) {margin-right:0}
#bulk:after, #bulk > div:after {content:""; display:table; clear:both}
#bulk > div > span {display:block}
#bulk > div > span:first-child {font-weight:bold; margin-bottom:10px}
.bulk-edit {text-decoration: none; color: #fff; background: #7ccbfc; position: fixed; bottom: 30px; right: 30px; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50%; font-size: 20px}
.bulk-edit:after {content: "Bulk"; color: #333; position: absolute; width: 100px; bottom: -35px; left: -25px; font-size: 14px}

#filter {position:relative; text-align:right; width:100%; margin:30px 0}
#filter:after {content:""; display:table; clear:both}
#filter > div {display:inline-block; margin:0 10px 5px 0}
#filter > div:last-child {margin-right:0}
#filter input[type=checkbox] {display:none}
#filter label {cursor:pointer}
#filter input[type=checkbox] + label {background: transparent; border: 1px solid #dedede; padding: 10px; display: inline-block}
#filter input[type=checkbox]:checked + label, #filter input[type=checkbox] + label:hover {background:#7ccbfc; color:#fff}

.brand-logo {width: 100px}
table tr:hover .brand-logo:after {background: #f3f3f3}
.brand-logo:before {content:""; background:url(/page/logo-brands.jpg)no-repeat; width:64px; height:32px; position:absolute; top:3px; left:0; right:0; margin:0 auto; z-index: 100}
.brand-logo:after {content:""; background:#fff; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1}
.brand-logo.resound:before {background-position:0px 0px}
.brand-logo.oticon:before  {background-position:-66px 0px}
.brand-logo.phonak:before  {background-position:-132px 0px}
.brand-logo.rexton:before  {background-position:-198px 0px}
.brand-logo.signia:before {background-position:-264px 0px}
.brand-logo.sonic:before   {background-position:-330px 0px}
.brand-logo.starkey:before {background-position:-396px 0px}
.brand-logo.unitron:before {background-position:-462px 0px}
.brand-logo.widex:before   {background-position:-528px 0px}
.brand-logo.audina:before   {background-position:-598px 0px}
.brand-logo.beltone:before   {background-position:-722px 0px}
.brand-logo.audibel:before   {background-position:-661px 0px}

/* Result page
================== */
article {display:block}
article h2, article h3 {margin-top:0}
article h2 {margin-bottom:0; font-size:35px; line-height:40px}
article .btn {margin:0 5px 5px 0}
.boxed, .fluid {margin-bottom:30px}
.boxed:after, .fluid:after {content:""; display:table; clear:both}

/* Boxed display
================== */
.boxed {border-radius: 3px; padding: 50px 30px; border: 1px solid #dedede; background: #fff}
.boxed .image {display:none}
.boxed .description {width:100%}

/* Fluid display
================== */
.fluid {border-bottom:1px solid #dedede; padding-bottom:50px; margin-bottom:50px}
.fluid:last-child {border-bottom:none; padding-bottom:0; margin-bottom:0}
.fluid .image {display:none}
.fluid .description {width:100%}
.text-right {text-align: right;}

/* Sortable
================== */
#sortable > div {cursor: pointer; border:1px solid #dedede; padding: 20px 15px 20px 150px; margin-bottom: 20px; position: relative;}
#sortable > div .brand-logo {position: absolute; left: 0}

/* Elements
================== */
.row {display: -ms-flexbox; display:-webkit-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction:row; -webkit-flex-direction:row; -ms-flex-direction:row; margin-right: -15px; margin-left: -15px}
.row:not(:last-of-type) {margin-bottom:30px}
.row:after{content:''; min-height:inherit}
.tox .tox-notification--warn, .tox .tox-notification--warning {display: none !important;}
.loader {background: url(../images/ajax-loader.gif)no-repeat 0 4px; height: 32px; padding: 0 0 0 20px !important; display: none; text-align: left; margin-bottom: 10px}
.loader:after {content:"Saving..."; margin-left: 5px}

@media only screen and (min-width: 769px) {
  #preview article .image {width:30%; height:350px; background-image:url(https://placehold.it/350x350); background-size:contain; background-repeat:no-repeat; background-position:left center}
  #preview article .summary {width:70%}
  #preview article img {display:none}

  /* Result page */
  article {display:table}
  article .btn.img {display:none}

  /* Fluid display */
  .boxed .image, .boxed .description {display:table-cell; vertical-align:middle}
  .boxed .image {width:25%; padding-right:2%}
  .boxed .description {width:75%}

  /* Fluid display */
  .fluid {position:relative; margin-bottom:0; padding-top:50px; z-index:100}
  .fluid .image, .fluid .description {display:table-cell; vertical-align:middle; padding-right:2%}
  .fluid .image {width:25%}
  .fluid .description {width:75%}
  #main-menu {left: 0;}
  #wrapper {padding-left: 240px; max-width: 90%; margin: 0 auto;}
  .btn-toggle-menu {display: none;}
}

@media only screen and (max-width:768px) {
  table,
  tbody,
  table tr th,
  table tr td,
  table tr {display: block}
  table tr {margin-bottom:20px; padding:10px; border:1px solid #dedede; background:#f3f3f3}
  table tr td {border: none; position: relative; text-align:left !important; z-index:0; height:auto !important; padding:10px 10px 10px 25% !important}
  table table td span {max-width:100% !important}
  table td:before {position: absolute; top: 10px; left: 6px; width: 20%; padding-right: 10px; white-space: nowrap}
  thead {display:none}

  /* Table with 3 columns: Brand, Name and Action */
  .td-3 td:before {background:none; top: 10px; left: 6px}
  .td-3 td:nth-of-type(1):before {content: "Brand:"}
  .td-3 td:nth-of-type(2):before {content: "Name:"}
  .td-3 tr td:last-child {max-width:100%}

  /* Table with 4 columns: Brand, Name, Display and Hide */
  .td-4 td:before {background:none; top: 10px; left: 6px}
  .td-4 td:nth-of-type(1):before {content: "Brand:"}
  .td-4 td:nth-of-type(2):before {content: "Name:"}
  .td-4 td:nth-of-type(3):before {content: "Display:"}
  .td-4 td:nth-of-type(4):before {content: "Hide:"}

  /* Table with 5 columns: #, Domain Name, Practice name, Display Layout and Action */
  .td-5 td:before {background:none; top: 10px; left: 6px}
  .td-5 td:nth-of-type(1):before {content: "#:"}
  .td-5 td:nth-of-type(2):before {content: "Domain Name:"}
  .td-5 td:nth-of-type(3):before {content: "Practice Name:"}
  .td-5 td:nth-of-type(4):before {content: "Display Layout:"}

  #bulk > div {float:none; max-width:100%; margin:0 0 20px 0}
  #filter input[type=checkbox] + label {padding:5px}

  .show-sidebar #wrapper {left: 240px;}
  .show-sidebar #main-menu {left: 0;}
  .show-sidebar .btn-toggle-menu {left: 250px;}
}

@media only screen and (max-width: 479px) {
  article .btn {width:100%; text-align:center}
}