/*--------------------------------------
*********** STYLE ME ***********
--------------------------------------*/

.dis-table{
    display: table;
    margin: 15px auto
}

.width-50{
    width: 150px;
}

.custom-file-upload {
    border: 1px solid #30a5ff;
    display: inline-block;
    padding: 5px 12px;
    cursor: pointer;
    width: 100%;
    color: #30a5ff;
}

textarea {
    height: 150px !important;
}

#customers {
    border-collapse: collapse !important;
    width: 100% !important;
}
  
#customers td, #customers th {
    border: 1px solid #ddd !important;
    padding: 8px !important;
    text-align: center !important;
}
  
#customers tr:nth-child(even){background-color: #f2f2f2 !important;}

#customers tr:hover {background-color: #ddd !important;}
  
#customers th {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    text-align: center !important;
    background-color: #2196f3 !important;
    color: white !important;
}

#customers td img{
    width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
}

/*--------------------------------------
*********** START RESET ***********
--------------------------------------*/

* {
    border: 0;
    margin: 0;
    padding: 0;
    outline: none !important;
}

@font-face {
    font-family: 'JF-Flat';
    src: url('../fonts/JF-Flat-regular.eot');
    src: url('../fonts/JF-Flat-regular.woff') format('woff'),
    url('../fonts/JF-Flat-regular.ttf') format('truetype'),
    url('../fonts/JF-Flat-regular.svg#JF-Flat-regular') format('svg');
}

body {
    color: #212121;
    background: #fafafa;
    min-width: 320px;
    overflow-x: auto;
    line-height: 1.6em;
    font: 14px 'JF-Flat', sans-serif;
}

a,
.btn-link {
    color: #2196f3;
}

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
    color: #1976d2;
}

a,
a:hover,
a:focus,
button,
label {
    text-decoration: none;
    cursor: pointer;
}

label {
    font-weight: 100;
}

.dis-block{
    display: block
}

:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-webkit-input-placeholder {
    color: #888;
    opacity: 1;
}

select,
textarea,
input:not([type='submit']),
.form-control {
    display: block;
    width: 100%;
    height: 37px;
    color: #212121;
    background: transparent;
    border-radius: 0;
    padding: 6px;
    margin-bottom: 15px;
    border: 0;
    border-bottom: 1px solid #eaeaea;
}

select.bordered,
textarea.bordered,
input:not([type='submit']).bordered,
.form-control.bordered {
    border: 1px solid #eaeaea;
}

select:focus,
textarea:focus,
input:not([type='submit']):focus,
.form-control:focus {
    border-color: #2196f3;
}

select, select.form-control {
    background: url("../images/caret.png") no-repeat 10px center;
    background-size: 9px auto;
    padding: 0 2px;
    appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

option, optgroup {
    padding: 3px 8px;
    font-weight: 100;
}

option {
    font-size: 12px;
}

textarea {
    height: 120px;
    resize: none;
}

input[type="radio"],
input[type="checkbox"] {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

button {
    background: transparent;
}

ul, ol {
    list-style-position: inside;
}

a, input, select, textarea, button, .btn:before,
.side-menu .menu-links a .fa, .dropdown-menu,
.statistics .fa, .dropdown-menu.big-menu div,
.checkbox-icon, .radio-icon, .checkbox-icon .fa, .radio-icon .fa,
.rating label {
    transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

p.clearfix {
    margin-bottom: 0;
}

.no-padding {
    padding: 0 !important;
}

.text-align-right, .text-align-left {
    text-align: center;
}

/*--------------------------------------
*********** BUTTONS ***********
--------------------------------------*/

.btn {
    border: 0;
    border-radius: 0;
    padding: 8px 20px;
    position: relative;
}

.btn:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    opacity: 0;
    border-radius: 50%;
    transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
}

.btn.btn-black:before {
    background: rgba(0, 0, 0, 0.2);
}

.btn:hover:before, .btn:focus:before {
    opacity: 1;
    border-radius: 0;
    transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

.btn-lg {
    padding: 10px 30px;
}

.btn-sm {
    padding: 6px 12px;
}

.btn-xs {
    padding: 4px 10px;
}

.btn-block {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*--------------------------------------
*********** SET COLOR ***********
--------------------------------------*/

.btn-default, .btn-default:hover, .btn-default:focus,
.label-default, .progress-bar-default, .alert-default, .bg-default {
    background-color: #EEE;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus,
.label-primary, .progress-bar-primary, .alert-primary, .bg-primary {
    background-color: #2196f3;
}

.btn-success, .btn-success:hover, .btn-success:focus,
.label-success, .progress-bar-success, .alert-success, .bg-success {
    background-color: #4caf50;
}

.btn-info, .btn-info:hover, .btn-info:focus,
.label-info, .progress-bar-info, .alert-info, .bg-info {
    background-color: #00bcd4;
}

.btn-danger, .btn-danger:hover, .btn-danger:focus,
.label-danger, .progress-bar-danger, .alert-danger, .bg-danger {
    background-color: #f44336;
}

.btn-warning, .btn-warning:hover, .btn-warning:focus,
.label-warning, .progress-bar-warning, .alert-warning, .bg-warning {
    background-color: #ffc107;
}

.btn-purple, .btn-purple:hover, .btn-purple:focus,
.label-purple, .progress-bar-purple, .bg-purple {
    background-color: #9C27B0;
}

.btn-orange, .btn-orange:hover, .btn-orange:focus,
.label-orange, .progress-bar-orange, .bg-orange {
    background-color: #FF5722;
}

.btn-teal, .btn-teal:hover, .btn-teal:focus,
.label-teal, .progress-bar-teal, .bg-teal {
    background-color: #009688;
}

.btn-brown, .btn-brown:hover, .btn-brown:focus,
.label-brown, .progress-bar-brown, .bg-brown {
    background-color: #795548;
}

.btn-pink, .btn-pink:hover, .btn-pink:focus,
.label-pink, .progress-bar-pink, .bg-pink {
    background-color: #E91E63;
}

.btn-deep-blue, .btn-deep-blue:hover, .btn-deep-blue:focus,
.label-deep-blue, .progress-bar-deep-blue, .bg-deep-blue {
    background-color: #3F51B5;
}

.btn-black, .btn-black:hover, .btn-black:focus {
    background-color: #212121;
}

/*--------------------------------------
*********** ALERT COLOR ***********
--------------------------------------*/

.alert-default, .label-default {
    color: #424242;
}

.alert-primary {
    color: #BBDEFB;
}

.alert-success {
    color: #C8E6C9;
}

.alert-info {
    color: #B2EBF2;
}

.alert-danger {
    color: #ffcdd2;
}

.alert-warning {
    color: #FFF9C4;
}

.alert.alert-default a,
.alert.alert-primary a,
.alert.alert-success a,
.alert.alert-info a,
.alert.alert-danger a,
.alert.alert-warning a {
    text-decoration: underline;
}

.bg-primary,
.bg-success,
.bg-info,
.bg-danger,
.bg-warning,
.bg-purple,
.bg-orange,
.bg-teal,
.bg-brown,
.bg-pink,
.bg-deep-blue,
.alert.alert-primary a,
.alert.alert-success a,
.alert.alert-info a,
.alert.alert-danger a,
.alert.alert-warning a,
.btn-purple, .btn-purple:hover, .btn-purple:focus,
.btn-orange, .btn-orange:hover, .btn-orange:focus,
.btn-teal, .btn-teal:hover, .btn-teal:focus,
.btn-brown, .btn-brown:hover, .btn-brown:focus,
.btn-pink, .btn-pink:hover, .btn-pink:focus,
.btn-deep-blue, .btn-deep-blue:hover, .btn-deep-blue:focus,
.btn-black, .btn-black:hover, .btn-black:focus{
    color: #fff;
}

.bg-default {
    color: #212121;
}

/*--------------------------------------
*********** COLORS ***********
--------------------------------------*/

.text-default {
    color: #BDBDBD;
}

.text-primary {
    color: #2196F3;
}

.text-success {
    color: #4CAF50;
}

.text-info {
    color: #00BCD4;
}

.text-danger, .error-message {
    color: #f44336;
}

.text-warning {
    color: #FFC107;
}

/*--------------------------------------
*********** ALERT ***********
--------------------------------------*/

.alert {
    border-radius: 0;
    padding: 10px;
    border: 0;
}

.alert-default {
    background-color: #eaeaea;
}

.alert.alert-default a {
    color: #444;
}

/*--------------------------------------
*********** LABEL ***********
--------------------------------------*/

.label {
    border-radius: 0;
    font-weight: 100;
}

/*--------------------------------------
*********** PROGRESS BAR ***********
--------------------------------------*/

.progress {
    height: 15px;
    background-color: #fafafa;
    border-radius: 0;
    box-shadow: none;
}

.progress-bar {
    box-shadow: none;
}

/*--------------------------------------
*********** FORM ***********
--------------------------------------*/

.form-control, .form-control:focus {
    box-shadow: none;
}

.input-with-button {
    position: relative;
}

.input-with-button .icon {
    position: absolute;
    top: 0;
    line-height: 37px;
    padding: 0 10px;
}

.radio label, .checkbox label {
    font-weight: 100;
}

.radio input[type="radio"], .radio-inline input[type="radio"],
.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    margin-top: 7px;
}

.has-success .form-control {
    border-color: #4caf50;
}

.has-warning .form-control {
    border-color: #ffc107;
}

.has-error .form-control {
    border-color: #f44336;
}

/*--------------------------------------
*********** PAGINATION ***********
--------------------------------------*/

.pagination {
    margin: 15px 0;
}

.pagination > li {
    display: inline-block;
}

.pagination > li > a, .pagination > li > span {
    float: none;
    margin-left: -1px !important;
    color: #2196f3;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 0 !important;
}

.pagination > li > a:hover, .pagination > li > span:hover {
    color: #2196f3;
    background: #f4f4f4;
    border-color: #eaeaea;
}

.pagination > li.active > a, .pagination > li.active > a:hover,
.pagination > li.active > span, .pagination > li.active > span:hover {
    color: #fff;
    background: #2196f3;
    border-color: #2196f3;
}

/*--------------------------------------
*********** UploadImage ***********
--------------------------------------*/

.images-upload-block {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 5px 0;
}

.upload-img {
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    position: relative;
    border-radius: 15px;
    margin: 5px;
    border: 2px dotted #212121;
}

.upload-img:before{
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 15px;
}

.upload-img span{
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 9;
    top: 50%;
    transform: translateY(-50px);
    font-size: 22px;
}

.upload-img span i{
    color: #212121
}

.upload-img i{
    font-size: 20px;
    color: #212121;
}

.upload-img input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    display: none
}

.uploaded-block {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 5px;
    width: 100px;
    height: 100px;
    z-index: 9;
}

.uploaded-block img {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 15px;
}

.uploaded-block .close {
    position: absolute;
    top: -8px;
    color: #fff;
    background: #212121 !important;
    font-size: 18px;
    width: 23px;
    height: 23px;
    text-align: center;
    border-radius: 50%;
    opacity: 1;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0
}

/*--------------------------------------
*********** BOX ***********
--------------------------------------*/

.div-padding {
    padding-top: 50px;
    padding-bottom: 50px;
}

.div-padding .div-padding {
    padding-bottom: 0;
}

.div-small-padding {
    padding: 30px 0;
}

.panel {
    margin: 15px 0;
    border-radius: 0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.panel-heading {
    border-bottom: 1px solid #eaeaea;
    position: relative;
}

.panel-heading:after {
    content: '';
    height: 100%;
    width: 4px;
    display: block;
    background: #2196f3;
    position: absolute;
    bottom: 0;
}

.border-bottom {
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 15px;
}

.relative-box {
    position: relative;
}

/*--------------------------------------
*********** TOP HEADER ***********
--------------------------------------*/

.top-header {
    background: #fff;
    min-height: 50px;
    position: fixed;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.02);
    width: 100%;
    right: 0;
    z-index: 99;
}

.top-header img.logo {
    max-height: 40px;
    max-width: 180px;
    margin: 5px 15px;
    display: inline-block;
    vertical-align: top;
}

.top-header .menu-btn {
    display: inline-block;
    vertical-align: top;
    height: 50px;
    line-height: 55px;
    color: #212121;
    font-size: 21px;
}

.top-header .fa {
    line-height: 53px;
}

.top-header .dropdown {
    display: inline-block;
    vertical-align: top;
}

.top-header .dropdown-toggle {
    height: 50px;
    line-height: 50px;
    color: #212121;
    padding: 0 10px;
    border-bottom: 3px solid transparent;
}

.top-header .dropdown-toggle img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-top: -3px;
    display: inline-block;
    vertical-align: middle;
}

.top-header .dropdown-toggle .fa-angle-down {
    font-size: 12px;
}

.dropdown-menu {
    border-radius: 0;
    margin: 0;
    border: 0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    display: block;
    z-index: -1;
    opacity: 0;
    font-size: 14px;
    transform: translateY(15px);
    -o-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -webkit-transform: translateY(15px);
}

.open .dropdown-menu {
    z-index: 1000;
    opacity: 1;
    transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
}

.dropdown.open .dropdown-toggle {
    border-color: #2196f3;
}

.dropdown-menu.big-menu {
    min-width: 330px;
    padding: 0;
}

.dropdown-menu.big-menu .inner-notif {
    max-height: 300px;
    overflow: auto;
}

.dropdown-menu .divider {
    margin: 5px 0;
    background-color: #F5F5F5;
}

.dropdown-menu li a, .dropdown-menu li small {
    padding: 7px 10px;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #2196f3;
    background: transparent;
    padding-right: 14px;
}

.dropdown-menu.big-menu > div,
.dropdown-menu.big-menu .inner-notif .single {
    padding: 6px 12px;
}

.dropdown-menu.big-menu > div.no-hover {
    padding: 4px 12px;
}

.dropdown-menu.big-menu > div:not(:last-child),
.dropdown-menu.big-menu .inner-notif .single:not(:last-child) {
    border-bottom: 1px solid #F5F5F5;
}

.dropdown-menu.big-menu a {
    color: #212121;
}

.dropdown-menu.big-menu > div.no-hover a {
    display: block;
    text-align: center;
}

.dropdown-menu.big-menu > div .fa {
    line-height: 1.4em;
}

.dropdown-menu.big-menu div.inner-notif {
    padding: 0;
    font-size: 13px;
}

.dropdown-menu.big-menu .inner-notif .single:hover {
    background-color: #F5F5F5;
}

/*------------------------------------*/

.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
    margin-right: 0;
    margin-left: 0;
}

.mCSB_scrollTools {
    opacity: 1;
    width: 4px;
}

.mCSB_scrollTools .mCSB_draggerRail, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 4px;
    border-radius: 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
    background: #212121;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: #2196f3;
}

/*--------------------------------------
*********** SIDE MENU ***********
--------------------------------------*/

.side-menu {
    background: #212121;
    color: #fff;
    width: 230px;
    position: fixed;
    top: 50px;
    z-index: 800;
    transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    /* height: 100%; */
}

.menu-btn.close-menu {
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.side-menu a {
    color: #fff;
}

/*------------------------------------*/

.user-info-box {
    padding: 25px 10px;
    background: url("../images/user-bg.png") repeat center fixed;
}

.user-info-box a {
    display: block;
}

.user-info-box img, .user-info-box .user-details {
    display: inline-block;
    vertical-align: middle;
}

.user-info-box img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.user-info-box .user-details h3 {
    margin: 0 0 3px;
    font-size: 18px;
}

.user-info-box .user-details p {
    margin: 0;
}

/*------------------------------------*/

.side-menu input {
    color: #fff;
    background: #272727;
    border: 0;
}

.side-menu .input-with-button .icon {
    color: #888;
}

.input-with-button:hover .icon, .input-with-button input:focus + .icon {
    color: #2196f3;
}

/*------------------------------------*/

.side-menu .menu-links a {
    display: block;
    padding: 8px 10px;
}

.side-menu .menu-links a:hover, .side-menu .menu-links a.active {
    background: #2e2e2e;
}

.side-menu .menu-links a .fa {
    line-height: 29px;
}

.side-menu .menu-links a.active .fa {
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.side-menu .menu-links a .badge {
    width: 23px;
    height: 23px;
    line-height: 23px;
    padding: 0;
    border-radius: 50%;
    background: #0E0E0E;
    margin-top: 2px;
    font-weight: 100;
    font-size: 12px;
}

.side-menu .menu-links .drop-down-menu {
    background: #2e2e2e;
    list-style-type: none;
}

/*--------------------------------------
*********** MAIN CONTENT ***********
--------------------------------------*/

.main-content, .side-menu {
    transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
}

.main-content {
    position: relative;
    padding-top: 50px
}

.main-content > .container-fluid {
    padding-bottom: 60px;
}

.footer-fixed-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
    border-top: 1px solid #ddd;
}

.footer-fixed-bottom p {
    margin: 0;
}

/*--------------------------------------
*********** BREAD CRUMBS ***********
--------------------------------------*/

.breadcrumb-box {
    background: #f5f5f5;
    border-bottom: 1px solid #efefef;
    padding: 20px 15px;
    margin-bottom: 20px;
}

.breadcrumb-box h1 {
    margin: 4px 0 0;
    font-size: 22px;
}

.breadcrumb-box .breadcrumb {
    margin: 15px 0 0;
    background: transparent;
    padding: 0;
}

/*--------------------------------------
*********** INDEX ***********
--------------------------------------*/

.statistics {
    position: relative;
    overflow: hidden;
}

.statistics h1 {
    margin: 0 0 8px;
}

.statistics p {
    margin: 0;
}

.statistics .fa {
    font-size: 8em;
    position: absolute;
    bottom: -20px;
    color: rgba(255, 255, 255, 0.3);
}

.statistics.bg-default .fa {
    color: rgba(0, 0, 0, 0.1);
}

.statistics:hover .fa {
    transform: scale(1.12, 1.12);
    -o-transform: scale(1.12, 1.12);
    -ms-transform: scale(1.12, 1.12);
    -moz-transform: scale(1.12, 1.12);
    -webkit-transform: scale(1.12, 1.12);
}

.ads-block {
    padding: 30px 15px;
    text-align: center;
}

.ads-block img {
    max-width: 100%;
}

/*--------------------------------------
*********** FORM PAGE ***********
--------------------------------------*/

.upload-img {
    position: relative;
}

.upload-img input[type="file"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.upload-img input[disabled] {
    border-color: #eaeaea;
}

.upload-img .btn {
    position: absolute;
    bottom: 0;
}

/*--------------------------------------
*********** CHECKBOX + RADIO ***********
--------------------------------------*/

.checkbox-holder, .radio-holder {
    font-weight: 100;
    position: relative;
    cursor: pointer;
    margin: 0 0 15px;
}

.checkbox-holder span, .radio-holder span {
    vertical-align: middle;
}

.checkbox-holder .checkbox-icon, .radio-holder .radio-icon {
    width: 16px;
    height: 16px;
    line-height: 12px;
    display: inline-block;
    border: 1px solid #ccc;
    background: #fff;
    text-align: center;
    margin-left: 5px;
}

.radio-holder .radio-icon {
    border-radius: 50%;
}

.checkbox-holder input[type="checkbox"], .radio-holder input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-holder input[type="checkbox"]:checked + .checkbox-icon, .radio-holder input[type="radio"]:checked + .radio-icon {
    border-color: #2196f3;
}

.checkbox-holder input[type="checkbox"]:disabled ~ span, .radio-holder input[type="radio"]:disabled ~ span {
    color: #888;
    cursor: not-allowed;
}

.checkbox-holder .checkbox-icon .fa, .radio-holder .radio-icon .fa {
    font-size: 12px;
    opacity: 0;
}

.radio-holder .radio-icon .fa {
    font-size: 10px;
}

.checkbox-holder input[type="checkbox"]:checked + .checkbox-icon .fa, .radio-holder input[type="radio"]:checked + .radio-icon .fa {
    color: #2196f3;
    opacity: 1;
}

.checkbox-holder input[type="checkbox"]:checked ~ .fa, .radio-holder input[type="radio"]:checked ~ .fa {
    color: #2196f3;
}

/*--------------------------------------
*********** SELECT 2 ***********
--------------------------------------*/

.select2-container {
    width: 100%;
}

.select2-dropdown {
    border: 1px solid #f0f0f0;
    border-radius: 0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 0 !important;
    border-bottom: 1px solid #eaeaea !important;
    border-radius: 0;
    min-height: 37px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 33px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
    width: 20px;
}

.select2-container--default .select2-selection--single[aria-expanded="true"],
.select2-container--default .select2-selection--multiple[aria-expanded="true"] {
    border-color: #2196f3 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #eaeaea;
    margin: 0;
}

.select2-container--default .select2-results__group {
    padding: 3px 6px;
}

.select2-container--default .select2-results__option .select2-results__option {
    padding: 3px 5px;
    font-size: 12px;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #eaeaea;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #2196f3;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f4f4f4;
    border: 1px solid #eaeaea;
    border-radius: 0;
    margin-top: 5px;
}

.select2-container--default .select2-search--inline .select2-search__field {
    margin: 0;
    height: auto;
}

/*------------------------------------*/

.switch {
    background: #eaeaea;
    border-radius: 10px;
    width: 50px;
    height: 12px;
    position: relative;
    margin: 15px 0;
}

.switch input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.switch .checkbox-icon {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 50%;
    margin-top: -13px;
    background: #ccc;
    z-index: 3;
    border-radius: 50%;
}

.switch input:checked + .checkbox-icon {
    background: #2196f3;
}

/*------------------------------------*/

.cke_chrome, a.cke_combo_button, a.cke_button_on {
    box-shadow: none !important;
}

/*------------------------------------*/

.rating {
    display: inline-block;
}

.rating input {
    position: absolute;
    opacity: 0;
    margin: 0;
}

.rating label {
    padding: 0 1px;
    font-size: 18px;
    color: #bbb;
    margin: 0;
}

.rating input:hover ~ label, .rating input:checked ~ label {
    color: #2196f3;
}

/*--------------------------------------
*********** TABLES ***********
--------------------------------------*/

table {
    width: 100%;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 8px 10px;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid #ddd;
}

/*------------------------------------*/

div.dataTables_wrapper div.dataTables_length select {
    margin: 0 5px;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin: 0;
    height: 30px;
    line-height: 30px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 7px 0;
}

table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
    border-bottom-width: 1px;
}

/*--------------------------------------
*********** INBOX ***********
--------------------------------------*/

.tab-pane .list-group-item:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.tab-pane .list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.tab-pane .list-group .checkbox {
    display: inline-block;
    margin: 0;
}

.tab-pane .list-group input[type="checkbox"] {
    margin-top: 2px;
}

a.list-group-item.read {
    color: #222;
    background-color: #F3F3F3;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.nav-pills > li > a {
    padding: 5px 10px;
}

.nav-pills > li > a > .badge {
    margin-top: 4px;
    padding: 3px;
    min-width: 18px;
    text-align: center;
}

.progress-sm {
    height: 10px;
}

.well {
    background: #f8f8f8;
    color: #777;
    border-radius: 0;
    box-shadow: 0 0 0;
}

.well, .page-header, input, .form-control, 
.table-bordered, .table-bordered > thead > tr > th, 
.table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, 
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, 
.table-bordered > tfoot > tr > td, hr {
    border-color: #f0f0f0;
}

.nav-pills > li > a {
    border-radius: 2px;
}

a.list-group-item.active,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    background-color: #00bcd4;
    border-color: #00bcd4;
}

/*--------------------------------------
*********** TABS ***********
--------------------------------------*/

.nav-tabs {
    border-bottom: 0;
}

.nav-tabs > li {
    z-index: 2;
}

/*--------------------------------------
*********** MODAL ***********
--------------------------------------*/

.modal-content {
    border-radius: 0;
}

.modal-body.max-height {
    max-height: 450px;
    overflow: auto;
}

.sender-data {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.sender-data h3 {
    margin: 0;
    font-size: 16px;
}

.sender-data p {
    margin-bottom: 5px;
}

.sender-data .margin-small-top {
    font-size: 13px;
    margin-top: 10px;
}

/*--------------------------------------
*********** VIEW NEWS ***********
--------------------------------------*/

.page-header {
    margin-top: 0;
    font-size: 18px;
}

.margin-bottom {
    margin-bottom: 20px;
}

.img-responsive.text-center {
    margin-right: auto;
    margin-left: auto;
}

/*--------------------------------------
*********** VIEW PRODUCT ***********
--------------------------------------*/

.inline-block {
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 20px;
}

.fa-2x {
    font-size: 1.7em;
}

.owl-carousel {
    direction: ltr;
    position: relative;
    margin-bottom: 20px;
}

.owl-carousel img {
    width: 100%;
}

.owl-controls .owl-buttons div {
    position: absolute;
    top: 50%;
    width: 25px;
    height: 25px;
    font-size: 0;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    margin-top: -12px;
    text-align: center;
}

.owl-controls .owl-buttons div:after {
    font: 14px FontAwesome, sans-serif;
    color: #444;
    line-height: 27px;
}

.owl-controls .owl-buttons div.owl-next {
    right: 5px;
}

.owl-controls .owl-buttons div.owl-prev {
    left: 5px;
}

.owl-controls .owl-buttons div.owl-next:after {
    content: '\f054';
}

.owl-controls .owl-buttons div.owl-prev:after {
    content: '\f053';
}

/*--------------------------------------
*********** LOGIN ***********
--------------------------------------*/

.login-box {
    background: #212121 url("../images/user-bg.png") repeat center fixed;
}

.login-box .bg-info {
    background: rgba(0, 188, 212, 0.9);
}

.login-box .bg-info .page-header {
    border-color: rgba(255, 255, 255, 0.4);
}

.login-box .bg-info select,
.login-box .bg-info textarea,
.login-box .bg-info input:not([type='submit']),
.login-box .bg-info .form-control {
    border-color: #fff;
}

.login-box .bg-info .checkbox-holder .checkbox-icon {
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.28);
}

.login-box .bg-info .checkbox-holder input[type="checkbox"]:checked + .checkbox-icon {
    border-color: #fff;
}

.login-box .bg-info .checkbox-holder input[type="checkbox"]:checked + .checkbox-icon .fa {
    color: #fff;
}

/*--------------------------------------
*********** 404 ***********
--------------------------------------*/

.not-found .fa-5x {
    font-size: 8em;
}

.not-found p {
    margin-bottom: 0;
}

.not-found h4 {
    margin: 60px 0 3px;
}

/*--------------------------------------
*********** NOTIFICATIONS ***********
--------------------------------------*/

.list-group {
    margin: 0;
}

.list-group.no-border li {
    border: 0;
    border-radius: 0;
    padding: 8px 0;
}

.list-group.no-border li:not(:last-child) {
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 0;
}

.list-group.no-border li a {
    color: #212121;
}

/*--------------------------------------
*********** PROFILE ***********
--------------------------------------*/

.user-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
}

.user-image img {
    width: 100%;
    min-height: 200px;
}

.list-padding li {
    padding-top: 4px;
    padding-bottom: 4px;
}

/*--------------------------------------
*********** ICONS ***********
--------------------------------------*/

.icons-box {
    max-height: 300px;
    overflow: auto;
}

/*--------------------------------------
*********** START MEDIA ***********
--------------------------------------*/

@media (max-width: 470px) {

    .top-header .pull-left {
        display: none;
    }

}

@media (max-width: 768px) {

    .dropdown {
        position: static;
    }

    .user-image + .btn {
        margin-bottom: 20px;
    }

}

@media (min-width: 768px) {

    .side-menu {
        width: 240px;
    }

    .modal-dialog {
        width: 700px;
        margin: 80px auto 30px;
    }

}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}
.show-video{
    position: relative;
    overflow: hidden;
    display: table;
    margin: auto;
    padding: 10px
}

.show-video img{
    max-width: 500px;
    position: relative;
    z-index: 77;
}
video {
    position: absolute;
    width: 93%;
    height: 72%;
    right: 0;
    left: 0;
    margin: auto;
    top: 15px;
    z-index: 88;
}
.show-video img{
    max-width: 100%;
}