/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
* https://bootstrapious.com/p/bootstrap-vertical-navbar
*/

body
{
  background: #fff;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

/* Amazon
body{font-size:14px;line-height:20px;font-family:Arial,sans-serif}h1{font-weight:400;font-size:28px;line-height:36px}h2{font-weight:700;font-size:24px;line-height:32px}h3{font-weight:700;font-size:18px;line-height:24px}h4{font-weight:700;font-size:18px;line-height:24px}h5{font-weight:700;font-size:14px;line-height:20px}h6{font-weight:700;text-transform:uppercase;font-size:12px;line-height:16px;padding-bottom:1px}.a-size-mini{font-size:12px!important;line-height:16px!important}.a-size-small{font-size:12px!important;line-height:16px!important}.a-size-base{font-size:14px!important;line-height:20px!important}.a-size-base-plus{font-size:16px!important;line-height:24px!important}.a-size-medium{font-size:18px!important;line-height:24px!important}.a-size-medium{text-rendering:optimizeLegibility}.a-size-large{font-size:24px!important;line-height:32px!important}.a-size-large{text-rendering:optimizeLegibility}.a-size-extra-large{font-size:28px!important;line-height:36px!important}.a-size-extra-large{text-rendering:optimizeLegibility}
*/

a { color: #0090c9; font-weight: 600; }
a:hover { color: #0595d0; }

.btn-primary
{
  color: #fff;
  background-color: #0090c9;
  border-color: #0090c9;
}

.btn-primary:hover
{
    background-color: #369;
    border-color: #369;
}

label { color: #369; }

.separator
{
  margin: 3rem 0;
  border-bottom: 1px dashed #fff;
}

.text-uppercase
{
  letter-spacing: 0.1em;
}

.text-grey
{
  color: #aaa;
}

.font-weight-bold { font-weight: 700;  }

.logo {margin: auto; max-width: 45% }

#sidebarCollapse { margin-top: -55px; }

/**
* Main left menu
**/
.vertical-nav
{
  min-width: 17rem;
  width: 17rem;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  border-right: 1px solid #eee;
  transition: all 0.4s;
  font-weight: 600;
}
.vertical-nav li:hover { background-color: #fdfefd; }
.vertical-nav li:active { margin-left: 1px; background-color: #fff; }

.active-menu
{
  background-color: #fff;
  font-weight: 700;
  /* letter-spacing: -0.3px; */
}

.top-return
{
  position: absolute;
  top: -45px;
  display: block;
  width: 60px;
}

@media (max-width: 768px)
{
  .top-return
  {
    position: relative;
    top: 12px;
    display: block;
    width: 60px;
    padding-bottom: 12px;
    text-align: center;
  }
}

.bg-light { background-color: #f9f9f9!important; }

/**
/* Submenu
**/
.nav-tabs .nav-link
{
    font-weight: 400;
    border: 1px solid transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nav-link:hover { background: #fdfefd; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { letter-spacing: -0.25px; font-weight: 600; }

.block-title
{
  margin:-9px -9px 9px -9px;
  overflow: hidden
}

/**
/* Moving left menu to left
**/
.page-content
{
  width: calc(100% - 17rem);
  margin-left: 17rem;
  transition: all 0.4s;
}

/* for toggle behavior */
#sidebar.active
{
  margin-left: -17rem;
}

#content.active
{
  width: 100%;
  margin: 0;
}

/**
/* Logs
**/
.logs-selector
{
  position: fixed;
  top:25px;
  right: 25px;
  display: block;
  width: 400px;
  z-index: 120;
  overflow-y: scroll;
  max-height: 90%;
  padding: 15px;
  border-radius: 15px 0px 0px 15px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;
}
.logs-selector a { color: #666; }

.logs-display
{
  width: 100%;
  color: #039;
  white-space: pre;
  font-family: 'lucida console', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, 'San Francisco', Helvetica, Verdana;
  word-wrap: break-word;
  font-size: 0.9rem;
}

/**
/* Responsive
**/
@media (max-width: 768px)
{
  #sidebar
  {
    margin-left: -17rem;
  }
  #sidebar.active
  {
    margin-left: 0;
  }
  #content
  {
    width: 100%;
    margin: 0;
  }
  #content.active
  {
    margin-left: 17rem;
    width: calc(100% - 17rem);
  }
}

/**
/* Data rows
**/
.row-selector
{
  cursor: pointer;
  color: #fff;
}
.row-selector:hover
{
  /* text-decoration: underline; */
  color: #fff;
  background: #666;
}
.row-selector:active
{
  color: #000;
  background: #ccc;
  transition-property: all;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

/**
/* Code pages
**/
code
{
  padding: 15px 55px;
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
  background: #f6f7f6;
  font-size: 1.0em;

  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/***
** Pagination
**/
#pagination1 { height: 50px; }
.record-count { width: 95px; top: 3px; right:15px; }
.sort-order { width: 95px; top: 3px; left: 15px; }

/*
.page-link { color: #369; font-weight: 600; }
.page-link:hover { color: #0070c9; }
.page-item.active .page-link
{
    z-index: 3;
    color: #fff;
    background-color: #0070c9;
    border-color: #0070c9;
}*/
.page-item.disabled .page-link { color: #dde; }
.page-item.active .page-link { color: #0070c9; font-weight: 600; background: #fff; }

ul.pagination { padding: 0px; }

ul.pagination li
{
    background-color: #fff;
    display: block;
    float: left;
    line-height: 16px;
    list-style: none;
    position: relative;
    margin: 0 5px 0 0;
}

ul.pagination li a
{
    color: #111;
    font-weight: 400;
}
ul.pagination li a
{
    padding: 8px 12px 7px 13px;
}
ul.pagination li a
{
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
    background: #eff1f3;
    background: -webkit-linear-gradient(top,#f7f8fa,#e7e9ec);
    background: linear-gradient(to bottom,#f7f8fa,#e7e9ec);
    border: 1px solid #6c6e73;
    border-color: #adb1b8 #a2a6ac #8d9096;
}
ul.pagination li a:hover
{
  background:#e0e3e9;
  background:-webkit-linear-gradient(top,#e7eaf0,#d9dce1);
  background:linear-gradient(to bottom,#e7eaf0,#d9dce1);
  border-color:#a2a6ac #979aa1 #82858a
}
ul.pagination li a, ul.pagination li.disabled
{
    display: block;
    text-decoration: none;
}
ul.pagination li a:focus
{
  box-shadow:0 0 3px 2px rgba(0,112,201,.5);
  outline:0
}
ul.pagination li a:active
{
  border-radius:3px;
  border-color:#0070c9; /* Orange #e77600 */
  box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
  background-color:#e7e9ec;
  background-image:none
}

ul.pagination li a.ellipsis
{
  cursor: default;
  border-radius: 3px;
  box-shadow: none;
  background: transparent;
  background: transparent;
  background: transparent;
  border: 1px solid transparent;
  border-color: transparent;
  padding: 8px 2px 7px 4px;
}

/***
** General buttons
**/
.btn-gradient
{
  border-radius: 3px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 60%) inset;
  background: #eff1f3;
  background: -webkit-linear-gradient(top,#f7f8fa,#e7e9ec);
  background: linear-gradient(to bottom,#f7f8fa,#e7e9ec);
  border: 1px solid #6c6e73;
  border-color: #adb1b8 #a2a6ac #8d9096;
}
.btn-gradient:hover
{
  background:#e0e3e9;
  background:-webkit-linear-gradient(top,#e7eaf0,#d9dce1);
  background:linear-gradient(to bottom,#e7eaf0,#d9dce1);
  border-color:#a2a6ac #979aa1 #82858a
}

/***
** Editable
**/
.editable { border-left: 1px solid #0bd!important; }

[contenteditable]:focus
{
  outline: 1px solid #0cf;
  box-shadow: 3px 3px 4px #ccc;
  background-color: #fff;
  color: #000;
}

.btn-add-row { position:absolute;margin:-3px 0 0 -15px; }
.btn-delete-row { position:absolute;margin-left:-1px;margin-top:-1px; font-size: 15px; }
.btn-password-row { position:relative;left:-1px;bottom:-25px; font-size: 13px; }

.goto-top
{
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: xx-large;
    background-color: #669;
    border-radius: 9px;
    color: #fff;
    padding: 5px;
    z-index: 1;
}

#progress-wrp
{
    position: relative;
    height: 30px;
    border-radius: 3px;
    /* margin: 10px; */
    text-align: left;
    background: #eee;
    /* box-shadow: inset 1px 3px 6px rgb(0 0 0 / 12%); */
}

#progress-wrp .progress-bar
{
  height: 100%;
  border-radius: 3px;
  background-color: #00c0f9;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status
{
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

.main-image
{
  -webkit-transition: all 2s ease-out;
  -moz-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  transition: all 2s ease-out;
}

.disable
{
    pointer-events: none;
    opacity: 0.2;
}

/* Editor */
.panel-default>.panel-heading
{
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.btn-group-sm>.btn, .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.note-editor .btn-default:hover
{
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.note-editor .btn.focus, .note-editor .btn:focus, .note-editor .btn:hover
{
    color: #333;
    text-decoration: none;
}

.dropdown-toggle::after
{
    display: none;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
*, ::after, ::before {
    box-sizing: border-box;
}

button.close { position: absolute; }

/* Article media library */
.modal-header .close { right: 15px; }
.responsive-iframe
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.library-sidebar
{
  height: 100%;
  width: 0;
  position: fixed;
  z-index:1111;
  top: 0;
  left: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
}

.btn-toggle-media-library
{
  position: absolute;
  top: 55px;
  right: 100px;
  display: block;
  /*width: 220px;*/
}

.btn-publish-group
{
  position: absolute;
  width: 320px;
  right: 15px;
  text-align: right;
  top: 55px;
}

/* Media library */
.img-wrap
{

  padding: 3px;
  text-align: center;
  margin-bottom: 10px;
}

.thumbnail
{
  background: #eee;
  position: relative;
  height: 150px;
  overflow: hidden;
}

.thumbnail img
{
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

.img-wrap .delete, .img-wrap .copy
{
    position: absolute;
    right: 6px;
    bottom: 1px;
    background: transparent;
    color: #0090c9;
    width: 25px;
    height: 30px;
    z-index: 101;
    padding: 3.5px;
    cursor: pointer;
    text-align: center;
    transition: all 200ms ease-out;
    opacity: 0.3;
}

.img-wrap .delete { left: 5px; }

.img-wrap .delete:hover, .img-wrap .copy:hover
{
  background: #0090c9;
  color: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 20%);
  opacity: 1.0;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #333;
    border-radius: .25rem;
}

.monospace { font-family: monospace; }

#filter-btn
{
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
    background: #eff1f3;
    background: -webkit-linear-gradient(top,#f7f8fa,#e7e9ec);
    background: linear-gradient(to bottom,#f7f8fa,#e7e9ec);
    border: 1px solid #6c6e73;
    border-color: #adb1b8 #a2a6ac #8d9096;
}

#filter-btn:hover
{
  background:#e0e3e9;
  background:-webkit-linear-gradient(top,#e7eaf0,#d9dce1);
  background:linear-gradient(to bottom,#e7eaf0,#d9dce1);
  border-color:#a2a6ac #979aa1 #82858a
}

#filter-btn.active
{
  border-radius:3px;
  color: #fff;
  border-color: #e77600 !important; /* Orange #e77600 */
  box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
  background-color: #e77600;
  background-image:none
}

#filter-btn.active:hover
{
  background-color: #FF9224;
}

/**************
** Dashboard cards
**************/
.card
{
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
  transition: .1s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.1s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  cursor: pointer;
}

.card:hover
{
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

/**************
** Checkboxes
**************/
input[type="checkbox"] { cursor: pointer; width: 20px !important; height: 20px !important; }
input[type="radio"] { cursor: pointer; width: 20px !important; height: 20px !important; }

input[type="checkbox"].toggle {
  opacity: 0;
  position: absolute;
  left: -9000px;
  top: -9000px;
}

input[type="checkbox"].toggle + label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

input[type="checkbox"].toggle + label::before {
  content: "";
  width: 3em;
  height: 1.5em;
  background-color: hsl(0, 85%, 85%);
  border-radius: 1em;
  margin-right: 0.75em;
  transition: background-color 200ms ease-in-out;
}

input[type="checkbox"].toggle + label::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  content: "\2715";
  font-size: 1.0em;
  height: 1.5em;
  left: 0em;
  width: 1.5em;
  height: 1.5em;
  background-color: hsl(0, 80%, 60%);
  color: white;
  border-radius: 1em;
  transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
}

input[type="checkbox"].toggle:focus + label::before {
  outline: 1px solid #999;
}

input[type="checkbox"].toggle:checked + label::before {
  background-color: hsl(100, 70%, 90%);
}

input[type="checkbox"].toggle:checked + label::after {
  content: "\2713";
  transform: translateX(100%);
  background-color: hsl(100, 65%, 30%);
}

input[type="checkbox"].toggle:disabled + label {
  color: #777;
}

input[type="checkbox"].toggle:disabled + label::before {
  background-color: #CCC;
}

input[type="checkbox"].toggle:disabled + label::after {
  background-color: #777;
}

.wrench:hover, .wrench:active
{
  color: #00f!important;
}

.eye
{
  cursor: pointer;
}

.eye:hover, .eye:active
{
  background: #F8F9FA;
}

.delete:hover, .delete:active
{
  color: #C00!important;
}