equation-admin-template/ltr/assets/css/components/custom-scroll_bars_basic.css

Booststrap 4 admin template made by equation

.basic_content h2 {
    font-size: 22px;
    color: #ee3d50;
    text-transform: uppercase;
}
.vertical_content_1 h2 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
}
.vertical_content_2 h2 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
}
.vertical_content_3 h2 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
}
.mCS-rounded-dots h2 {
    font-weight: 600;
    font-size: 32px;
    color: #3862f5;
}
.infinite_scrollbar h2 {
    font-size: 30px;
    color: #00d1c1;
    font-weight: 600;
}
.rtl h2 {
    font-size: 30px;
    font-weight: 600;
    color: #3232b7;
}
.callback_function h2 {
    font-size: 28px;
    color: #3862f5;
}
hr { border-top: 1px solid #e9ecef; }
label {
    font-size: 15px;
    font-weight: 600;
    color: #3232b7;
}
.form-control {
    border: 1px solid #d5dae2;
    color: #888ea8;
}
.form-control:focus {
    border-color: #3232b7;
    color: #3b3f5c;
}
.nav-tabs a { color: #888ea8; }
.nav-tabs a:hover { color: #ee3d50; }
.modal-title {
    color: #ee3d50;
    text-transform: uppercase;
}
.modal-header .close { color: #888ea8; }
.modal-header { border-bottom: 1px solid #f1f3f1; }
.modal-footer { border-top: 1px solid #f1f3f1; }
.panel-group { margin-bottom: 20px; }
.panel {
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
}
.panel-default { border-color: #e9ecef; }
.panel-default>.panel-heading {
    color: #000;
    background-color: #f9f9f9;
    border-color: #d3d3d3;
}
.panel-group .panel {
    margin-bottom: 5px;
    border-radius: 4px;
}
.panel, .panel-group .panel {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 4px;
}
.panel-default > .panel-heading {
    color: #000;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-title {
    margin: 0px;
    font-size: 18px;
    font-weight: 500;
}
.panel-title a { color: #3862f5; }
.panel-body { padding: 15px; }
.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid #ddd;
    border-top-color: rgb(221, 221, 221);
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #e9ecef;
}
.nav-tabs { border-bottom: 1px solid #e9ecef; }
.nav > li {
    position: relative;
    display: block;
}
.nav-tabs > li { float: left; margin-bottom: -1px; }
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
#myTab .nav-tabs > li > a.active, #myTab .nav-tabs > li > a.active:focus, #myTab .nav-tabs > li > a.active:hover {
    color: #00d1c1;
    font-weight: 600;
    cursor: default;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-bottom-color: transparent;
}
.tab-content { margin-bottom: 20px; }
.basic_content {
    overflow: hidden;
    position: relative;
    padding: 20px;
    background: #fff;
    margin: 10px;
    width: 100%;
    max-width: 98%;
    height: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #888da8;
}

.basic_content p:nth-child(odd), .basic_content.light p:nth-child(odd) {
    background: #444;
    background: rgba(255,255,255,0.1);
    padding: 5px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.basic_content p:nth-child(3n+3) {
    background: none;
    padding: 0;
}
.basic_content p:nth-child(odd), .basic_content.light p:nth-child(odd) {
    background: #f1f3f9;
    padding: 5px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #6156ce;
}
.basic_content p { margin: 30px 0; }
.basic_content hr {
   background-color: transparent;
   border: none;
   border-bottom: 1px solid #f1f3f1;
   border-top: 1px solid #f1f3f1;
   clear: both;
}
.mCustomScrollbar {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}
#vertical-scrollbar-1 img, #vertical-scrollbar-2 img, #vertical-scrollbar-3 img { width: 100%; }
.vertical_content_2.light {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
    padding: 20px;
    margin: 10px;
    max-width: 98%;
    height: 500px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.vertical_content_2 p {
    padding: 10px;
    font-size: 16px;
    text-align: justify;
}
.vertical_content_2 hr {
   background-color: transparent;
   border: none;
   border-top: 1px solid #5247bd;
   clear: both;
}
#vertical-scrollbar-3.vertical_content_3 {
    height: 500px;
    background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    padding: 5px;
    margin: 10px;
    color: #fff;
}
.vertical-images.vertical_content_3 ul {
    margin: 0;
    padding: 10px;
    list-style: none;
    overflow: hidden;
}
.vertical-images.vertical_content_3 ul li img { margin-top: 10px; }
.mCustomScrollbar {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}
.vertical_content_1 {
    overflow: hidden;
    position: relative;
    padding: 20px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
    background-blend-mode: multiply,multiply;
    margin: 10px;
    max-width: 98%;
    height: 500px!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
}
.vertical_content_1 p {
    padding: 10px;
    font-size: 17px;
    text-align: justify;
}
.vertical_content_1 hr {
   background-color: transparent;
   border: none;
   border-top: 1px solid #515365;
   clear: both;
}
#rounded-dots-less-momentum.rounded_dots_less_momentum {
    background-color: #fff;
    color: #3b3f5c;
}
.rounded_dots_less_momentum {
    float: left;
    width: 100%;
    height: 500px;
    padding: 20px;
}
#horizontal-scrollbar-2.horizontal-images.horizantal_content_2 {
    padding: 10px 0 5px 0;
    background-color: #1F3892;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGA4A8QmQAwGjDAGNgGwSgwVAFVOAgV/1mwxAAAAAElFTkSuQmCC);
}
.horizontal-images.horizantal_content_2 li {
    margin: 0 3px;
    float: left;
}
.horizontal-images.horizantal_content_2 h2 {
    color: #fff;
    background-color: #77EDB0;
    padding: 10px 20px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 165%;
    height: 119px;
}
.horizontal-images.horizantal_content_2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    margin-top: 10px;
}
.horizontal-images.horizantal_content_2 li:first-child {
    margin-left: 0;
}
.horizontal-images.horizantal_content_2 li {
    margin: 0 3px;
    float: left;
}
.horizontal-images.horizantal_content_2 li img {
    height: 119px;
    width: auto;
    padding: 0;
}

#scrollbar-pos-outside-1.scrollbar_pos_outside_1 {
    background-color: #fff;
    margin: 0px;
    width: 98%;
    height: 500px;
    padding: 20px;
}
#scrollbar-pos-outside-1.scrollbar_pos_outside_1 h2 {
    color: #e95f2b;
    font-size: 30px;
    letter-spacing: 1.2px;
    line-height: 1.5;
}
.scrollbar_pos_outside_1:nth-child(odd) h2 {
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.scrollbar_pos_outside_1 h2:first-child {
    margin-top: 5px;
}
.scrollbar_pos_outside_1 h2 {
    font-size: 200%;
    line-height: 130%;
}
.scrollbar_pos_outside_1 p {
    margin: 30px 0;
    color: #ffffff;
}
.scrollbar_pos_outside_1 p:nth-child(3n+3) {
    color: #3862f5;
    background: none;
    padding: 0;
}
.scrollbar_pos_outside_1 p:nth-child(odd), .scrollbar_pos_outside_1.light p:nth-child(odd) {
    background: #f1f3f9;
    padding: 5px 10px;
    -moz-border-radius: 3px;
    color: #888ea8;
}
.scrollbar_pos_outside_1 input[type='text'], .scrollbar_pos_outside_1 textarea {
    border: none;
    background: transparent;
    background-color: #f1f3f1;
    min-height: 20px;
    padding: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: inherit;
    font-family: inherit;
    color: #3b3f5c;
}
.scrollbar_pos_outside_1 hr {
    background-color: transparent;
    border: none;
    border-top: 1px solid #e9ecef;
    clear: both;
}
.ui-widget.ui-widget-content {
    border-color: #e9ecef;
    width: auto!important;
}
.custom-modal-with-scrollbar {
    height: 19.5em;
}
.cutom-autocomplete {
    height: 19.5em;
}
.ui-menu {
    background-color: #f7f7f7;
    color: #4f5163;
    height: 9.1em !important;
}
.ui-menu li.ui-menu-item div:hover {
    background-color: #eaeef1;
    border-color: #eaeef1;
    color: #3862f5;
}
.inline {
    font-weight: 600;
    color: #ee3d50 !important;
    text-decoration: underline;
}
.mCSB_outside + .mCSB_scrollTools {
    right: -2px !important;
}
button.btn.btn-primary {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}
#myModal button.btn.btn-primary {
    margin-top: 10px;
}
#myModal-2 .modal-body {
    max-height: 340px;
    height: 100%!important;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin-bottom: -15px;
    width: auto;
}
#myModal-2 button.btn.btn-primary {
    margin-top: 10px;
}
li span.text {
    color: #000;
    padding-left: 12px;
    width: 100%;
}
.custom-dropdown_with_scroll {
    height: 11.5em; 
}
.custom-dropdown_with_scroll .btn.dropdown-toggle.btn-default {
    height: 40px;
}
.bootstrap-select .dropdown-toggle:focus {
    outline: thin dotted #fff !important;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;
}
#accordion .panel-title {
    font-weight: 100;
}
.infinite_scrollbar {
    overflow: hidden;
    position: relative;
    padding: 20px;
    background: #fff;
    margin: 10px;
    max-width: 100%;
    height: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3b3f5c;
}
#infinite-scroll .offset {
    display: block;
    width: 100%;
    height: auto;
    color: #00d1c1;
}
#infinite-scroll .offset .indicator {
    padding: 9px;
    font-size: 20px;
    color: #6424c9;
    font-weight: 700;
}
.rtl {
    overflow: hidden;
    position: relative;
    padding: 20px;
    background: #fff;
    margin: 10px;
    height: 400px!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #888ea8;
    /*  rtl property */
    direction: rtl;
    unicode-bidi: embed;
    float: right;
}
.rtl hr {
   background-color: transparent;
   border: none;
   border-top: 1px solid #e9ecef;
   clear: both;
}
.right_to_left {
    overflow: auto;
    position: relative;
    padding: 20px;
    background: #333;
    margin: 10px;
    width: 100%;
    max-width: 98%;
    height: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
/*      rtl property      */
    direction: rtl;
    unicode-bidi: embed;
    float: right;
}
.right_to_left.light {
    background-color: #1F3892;
    color: #fff;
}
.right_to_left.light p:nth-child(odd) {
    background: #77edb0;
    background: rgb(119, 237, 176);
    color: #1F3892;
}
.callback_function {
    overflow: auto;
    position: relative;
    padding: 20px;
    background: #fff;
    margin: 15px;
    width: 100%;
    max-width: 97.5%;
    height: 352px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3b3f5c;
}
.callbacks {
    background: #fff;
}
.callbacks ul {
    overflow: hidden;
    margin: 0;
    padding: 10px;
    list-style: none;
}
.callbacks ul li {
    float: left;
    margin: 3px 6px 3px 0;
}
.callbacks ul li a {
    display: block;
    padding: 3px 15px;
    text-decoration: none;
    color: #3b3f5c;
}
.callbacks a span {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background: #25d5e4;
    margin-right: 3px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
p.callbacks_para {
    font-size: 12px;
    color: #888ea8;
    padding: 6px 15px;
    background-color: #fff;
    margin-top: 18px;
    border-top: solid 1px #e9ecef;
}
.callbacks + p span {
    display: inline-block;
}
.callbacks a span.on  {
    background-color: #e91e63;
}
.callbacks ul li.off {
    opacity: 0.6;
}
@media(max-width: 768px) {
    .custom-inline-html {
        height: 28.4em;
    }
    .panel-title {
        font-size: 16px;
    }
}