body {
    color: #31373d;
    background-color: #f4f6f8;
    text-align: left;
    margin: 0px;
    font-size: .9rem;
}

.bg-body-faded {
    color: #333;
    background-color: #e9ebee;
}

button, input, optgroup, select, textarea {
    font-family: inherit; font-size: inherit;
}

/* label { margin-bottom: 0; } */
a {
    color: #5a5a5a;
}

.h2, h2 { font-size: 1.5rem; }
.h3, h3 { font-size: 1.1rem; }
.h4, h4 { font-size: 0.95rem; }
.h5, h5 { font-size: .85rem; }

/*
.card {
    margin-bottom: 15px;
    border: 0;
    -webkit-box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
    box-shadow: 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
}
*/

.card-aside { background-color: #f9fafb; }
.card-header { border-bottom: 1px solid #ebeef0; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-color: #ebeef0 #ebeef0 #fff; }
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #eceeef #eceeef transparent;
}

.fixed-top {
    z-index: 8;
}

.navbar-submit {
    z-index: 99;
    box-shadow: 0 0 5px #949494;
    height: 57px;
}

.col-form-label { text-align: right;}
.form-check-input {
    position: inherit; 
    margin-right: 5px;
    font-size: 1rem;
}
.form-radio-caption { color: #ccc; padding: 0 10px; font-size: 80%; }
.form-control {
    background-color: #F5F8F9;
    /* font-size: inherit; */
}
.form-control-custom { padding: .3rem .45rem;}

.custom-control-label { padding-top: 2px; }

.form-check input[type="radio"]:checked + span {
    font-weight: 600;
}

.mx--2 {
    margin-left: -10px;
    margin-right: -10px;
}

.btn {
    font-size: inherit;
}

.hidden { display: none; visibility: hidden; }
.card .card-block h1,.card .card-block h2,
/*.card .card-block h3,.card .card-block h4 { margin-top: 15px;margin-bottom: 20px; }*/
section { margin-bottom: 25px; }
.table tr > td { vertical-align: middle; }

.form-check { margin-bottom: 12px; }
.form-check .form-group {
    margin-bottom: 0;
}

.card-footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: inherit;
}

/* Switch button */
.btn-secondary.btn-on.active {background-color: #5BB75B !important;color: white;}
.btn-secondary.btn-off.active {background-color: #DA4F49 !important;color: white;}

.autocomplete-suggestions {
    overflow: auto;
    border: 1px solid #CBD3DD;
    background: #FFF;
    z-index: 9999;
    max-height: 200px;
}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestion {
    display: block;
    overflow: hidden;
    padding: 5px 15px;
    white-space: nowrap;
    cursor: pointer;
}

.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestion {
    display: block;
    overflow: hidden;
    padding: 5px 5px;
    white-space: nowrap;
    cursor: pointer;
}
a.autocomplete-suggestion { text-decoration: none; }

.autocomplete-suggestion img { float: left; margin: 5px 0 0 0; }
.autocomplete-suggestion .prod-right { margin-left: 40px; }
.prod-desc { font-size: .8em; color: #ccc; }
.text-highlight { color: red; }

.bg-lighter {
    background-color: #eaeaea!important;
}

.box-shadow {
    box-shadow: 0 0 6px 2px rgba(28, 31, 47, 0.1);
}

.clickable { cursor: pointer; }

.notifications {
    position: fixed;
    top: 100px;
    right: 10px;
}

.footer {
    padding: 1.5rem 0;
    color: #999;
    font-size: .8rem;
    text-align: center;
    background-color: transparent;
}


/* Range Slider */
.range-slider {
  width: 100%;
}

.range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (60px + 13px));
  height: 10px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
}

/* Range Handle */
.range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background .15s ease-in-out;
}

.range-slider__range::-webkit-slider-thumb:hover {
      background: #1abc9c;
}

.range-slider__range:active::-webkit-slider-thumb {
    background: #1abc9c;
}

.range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    transition: background .15s ease-in-out;
}

.range-slider__range::-moz-range-thumb:hover {
      background: #1abc9c;
}

.range-slider__range:active::-moz-range-thumb {
    background: #1abc9c;
}

/* Range Label */
.range-slider__value {
  display: inline-block;
  position: relative;
  width: 60px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  background: #2c3e50;
  padding: 5px 10px;
  margin-left: 8px;
}

.range-slider__value:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: '';
}

.range-slider__input {
    width: 100%;
    background-color: rgba(107, 107, 107, 0.64);
    color: white;
    border: 0;
    outline: 0;
    text-align: center;
    -webkit-appearance: none;
}

/* Firefox Overrides */
::-moz-range-track {
    background: #d7dcdf;
    border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer { 
  border: 0; 
}

.plan { margin: 50px auto 0; width: 100%; max-width: 500px; text-align: center; }
.alert { position: relative; padding-right: 27px; }
.upgrade .alert-custom {
    margin: 1rem;
}

.alert .close {
    position: absolute;
    top: 5px;
    right: 10px;
}

.item-three {
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    padding: 5px;
}

.item-three .item-three--header {
    font-size: 1.05rem;
    margin-top: 1.2rem;
}

.item-three p {
    margin-bottom: 1.2rem;
}

.first-time .intro {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 2.5rem;
}

.first-time .intro-sub {
    text-align: center;
    color: gray;
    margin-bottom: 30px;
}

.robot p:last-child {
    margin-bottom: 0;
}

.card-handling {
    margin-top: 0;
    margin-bottom: 2rem;
    text-align: center;
}

.card-icon {
    position: absolute;
    top: 14px;
    font-size: 30px;
}

.card-right {
    margin-left: 40px;
}

/********************/
.form-template input[type="radio"] {
    display: none;
}

.form-template .screenshot {
    padding: 3px;
    display: block;
    width: 100%;
    max-width: 320px;
    vertical-align: middle;
    border: 1px solid #d6d6d6;
    border-radius: 3px;
}

.form-template:hover .screenshot {
    box-shadow: 0px 0px 10px #dddddd;
}

.form-template .screenshot > img {
    width:100%;
}

/* appearance for checked radiobutton */
.form-template input[type="radio"]:checked + .screenshot {
  border-color: #2196F3;
    border-style: dashed;
}

.form-template .form-check-label {
    display: block;
    padding-left: 0;
}

.form-template .form-radio-subscription {
    margin-left: 15px;
}

.form-template.premium .form-radio-subscription {
    color: #16B67F;
}

.form-template.free .form-radio-subscription {
    color: #999;
}

.form-template .premium-badge {
    position: absolute;
    top: 3px;
    right: 12px;
    color: skyblue;
}
.form-template:hover .premium-badge {
    color: blue;
}

/********************/
.current-plan {
    margin-bottom: 20px;
    background-color: #f3f3f3;
    padding: 15px;
}

/* .plan-item {
    padding: 20px 15px;
    min-height: 454px;
    box-shadow: 0px 0px 5px #ccc;
    border-radius: 10px;
    background-color: white;
} */

/* .plan-item ul {
    list-style-type: disc;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.plan-item ul > li {
    padding: 10px 0;
    border-top: 1px solid #ddd;
}

.plan-item ul > li:last-child {
    border-bottom: 1px solid #ddd;
} */

h2.plan-name {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px !important;
}

.plan-price {
    font-size: 2.0rem;
    text-align: center;
    text-shadow: 0 0 3px #ccc, 0 0 5px #999;
}

.plan-price-unit {
    text-align: center;
    margin-bottom: 15px;
}

.price {
    color: red;
}

.btn-plan {
    min-width:150px;
}
.btn-plan:disabled { cursor: auto; }

.plan-offer {
    color: #f7a305;
    margin-top: 15px;
}

.dropdown-menu {
    font-size: 14px;
}

.dropdown-item {
    padding-left: 12px;
}

.img-highlight {
    -webkit-box-shadow: 1px 2px 14px 1px #c4cdd5;
    box-shadow: 1px 2px 14px 1px #c4cdd5;
    border-radius: 6px;
}

.notify {
    display: none;
    border-radius: 2px;
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    z-index: 99905;
    text-align: center;
    font-size: 16px;
    color: white;
    background-color:rgba(0, 0, 0, 0.7);
    padding: 15px;
}


/* Here are my icons */
.svg-icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; stroke-width: 1; fill: #637381; }
/* .svg-icon:hover { fill: #4691f6; } */
.svg-icon-size14 { width: 14px; height: 14px; }
.svg-icon-size16 { width: 16px; height: 16px; }
.svg-icon-size20 { width: 20px; height: 20px; }
.svg-icon-size32 { width: 32px; height: 32px; }
.svg-icon-color-grey { fill: #637381; }
.svg-icon-color-white { fill: white; }
.svg-icon-color-light { fill: #4691f6; }
.svg-icon-color-red { fill: red; }


.widget-review {
    margin-top: 15px;
}

/************** SLIDER SWITCH BUTTON **********************/
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    vertical-align: middle;
}
.switch-sm {
  width: 36px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -ms-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -ms-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.switch-sm .slider:before {
  height: 16px;
  width: 16px;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}

.switch-sm input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -moz-transform: translateX(16px);
  -ms-transform: translateX(16px);
  -o-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 12px;
}

.slider.round:before {
  border-radius: 50%;
}


.row-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -.5rem;
    margin-left: -.5rem;
}

.column-half {
    position: relative;
    width: 100%;
    padding-right: .5rem;
    padding-left: .5rem;
}

@media (min-width: 576px) {
    .column-half {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.fixed {
    position: relative;
}

@media (min-width: 768px) {
    .fixed {
        position: fixed;
        top: 10px;
        z-index: 99;
    }
}

.btn-refresh {
    color: #ff3b2c;
    background-color: #f3f3f3;
    border-color: #cecece;
}

.btn-refresh:hover {
    color: #ff3b2c;
    background-color: #e2e2e2;
}

.btn-refresh .lnr {
    display: inline-block;
    line-height: 1;
    -webkit-transition: -webkit-transform .3s ease-in-out;
            transition:         transform .3s ease-in-out;
}

.btn-refresh:hover .lnr {
    transform: rotate(-360deg);
}

.discover .card-body {
    padding: .25rem;
}

.form-label {
    font-weight: 500;
    margin-bottom: .25rem;
}

.master-actions {
    margin-bottom: 15px;
}
.master-actions form {
    display: inline-block;
}

.product-checks label {
    width: 100%;
    line-height: 30px;
}
.product-checks input[type="checkbox"] {
    font-size: 2rem;
}

.table-product th > a {
    color: #31373d;
}

.search-input {
    position: relative;
}

.search-input .btn-search {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    padding: 6px 10px;
    background: 0;
    border: 0;
    cursor: pointer;
}

.search-input input[type="text"] {
    padding-right: 33px;
}

.table thead th {
    border-top: none;
    vertical-align: middle;
}

.slide-left {
    transition: 1s;
    left: 0;
}

.progress {
    border-radius: .5rem;
}

.accordion .card-header > a {
    color: #666;
}

#preview_widget {
    max-width: 250px;
    margin: auto;
}

.slidersticks {
    position: relative;
    color: #666;
    text-align: left;
}

.slidersticks span:last-child {
    position: absolute;
    right: 0;
}


/* .copiable {
    cursor: copy;
} */

.btn-copy {
    font-size: 90%;
    line-height: 1;
    color: #000;
    padding: 5px;
    background-color: #d1d1d1;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    cursor: pointer;
    border-radius: 5px;
}

.btn-copy:hover {
    opacity: 1;
}

/* .copiable .content {
    display: block;
    margin-right: 45px;
} */

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    background-color: rgba(48, 63, 86, 0.77);
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 50px;
}


.product-row {
    position: relative;
    margin: 0 auto;
    max-width: 200px;
}

.product-row .product-details {
    margin-top: .5rem;
}

.content .icon {
    display: inline-block;
    font-size: 17px;
    line-height: 17px;
    padding: 13px;
    border-radius: 50%;
    margin-right: 15px;
    min-width: 46px;
    min-height: 46px;
    margin-top: 2px;
}

.pull-left {
    float: left!important;
}

.user-icon {
    display: inline-block;
    text-align: center;
    color: #eee;
    font-weight: 400;
}

.user-avatar {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    min-width: 36px;
    min-height: 36px;
}

.user-avatar img,
.user-avatar .user-icon {
    margin-right: 5px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: .98rem;
}

.topic .content img {
    max-width: 100%;
    height: auto;
}

.user-icon.icon-sm {
    font-size: 1rem !important;
}

.user-icon.icon-xs {
    font-size: .5rem !important;
}

.posts .content {
    margin-top: 20px;
    padding-bottom: 1px;
    margin-top: -43px;
    margin-left: 50px;
    word-wrap: break-word;
    overflow: hidden;
}

.posts .content pre {
    color: #dadada;
    background-color: #002b36;
    border: none;
    box-shadow: 0 0 6px 2px rgba(28, 31, 47, 0.1);
    padding: 10px;
    white-space: pre-wrap;
    overflow-x: auto;
    border-radius: 5px;
}


.btn-width-sm {
    min-width: 112px;
}

.btn-width-md {
    min-width: 250px;
}

.btn-width-lg {
    min-width: 100%;
}

@media (max-width: 768px) {
    .btn-width-md {
        min-width: 100%;
    }
}

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

.text-violet {
    color: #6800c3;
}

.bg-violet {
    background-color: #2b306d;
}

/********* TOPIC TAGS *********/
.tags {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-right: -15px;
    display: flex;
    flex-wrap: wrap;
}

.tags li {
    justify-content: flex-start;
    margin: .6rem .6rem 0 0;
    overflow: hidden;
}

.tags .tag-item {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    min-height: 1.3rem;
    background-color: #dfe3e8;
    border-radius: 15px;
    color: #212b36;
}

.tags .tag-item .tag-name {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .85rem;
}

.tags .tag-item .btn-times {
    color: #959595;
    font-size: .75rem;
    border-radius: 15px;
    margin-left: -8px;
}

.tags .tag-item .btn-times:hover {
    color: #333333;
}

.mymention {
    color: #03bb03;
}

blockquote {
    padding-left: 10px;
    background: #f5f5f5;
    border: 1px solid #e7e7e7;
    border-left: 3px solid #b7b7b7;
}

.author-icon {
    position: absolute !important;
    top: 15px;
    left: 15px;
}

.cdn-icon {
    position: absolute !important;
    top: 20px;
    right: 15px;
}

.text-carot {
    color: #fd6d03;
}

.no-resize {
    resize: none;
}

.plugin-page .header {
    background: linear-gradient(rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0)), url(../img/bg-pluginpage.png);
    background-size: cover;
    background-position: bottom;
    min-height: 350px;
}

.translation .list-group .list-group-item {
    border-top: 0;
    border-bottom: 0;
}

.translation .list-group .list-group-item:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0.045);
}


.preview {
    position: relative;
}

.preview .btn-times {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 16px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
}

.preview .btn-times:hover {
    background: rgba(0, 0, 0, 0.4);
    color: rgba(249, 0, 0, 0.5);
}


/** TAGS SUGGESTION in form new topic */
.autocomplete-suggestion-wrapper {
    position: relative;
    z-index: 9999;
}

.autocomplete-suggestion-tags {
    position: absolute;
    width: 100%;
}

.autocomplete-suggestions {
    /* overflow: auto; */
    border: 1px solid #CBD3DD;
    border-radius: 4px;
    background: #FFF;
    z-index: 99;
    /* max-height: 130px; */
    z-index: 9999;
}

.autocomplete-selected,
.autocomplete-kselected {
    background: #F0F0F0;
}

.autocomplete-suggestion:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}
.autocomplete-suggestion {
    display: block;
    overflow: hidden;    
    padding: .375rem .75rem;
    white-space: nowrap;
}

a.autocomplete-suggestion {
    text-decoration: none; 
    cursor: pointer; 
}
/** // TAGS SUGGESTION in form */

.mapping-ok + button > .fas {
    color: #999999;
}

.mapping-ok:checked + button > .fas {
    color: #007bff;
}