@import url("../plugins/fontawesome/css/all.min.css");
@import url("../plugins/fontawesome/css/font-awesome-animation.min.css");
@import url("../plugins/themify/themify-icons.css");
@import url("../plugins/flaticon/flaticon.css");
html,
body {
    margin: 0;
    padding: 0;
    background: #eee;
    font-size: 110%;
    overflow: hidden;
}


.fs-default *{
    font-size: 101%;
}

.fs-1x *{
    font-size: 103%;
}
.fs-0 {
  font-size: 100% !important;
}
.fs-1 {
  font-size: calc(1.40625rem + 1.875vw) !important;
}

.fs-2 {
  font-size: calc(1.359375rem + 1.3125vw) !important;
}

.fs-3 {
  font-size: calc(1.3125rem + 0.75vw) !important;
}

.fs-4 {
  font-size: calc(1.2890625rem + 0.46875vw) !important;
}

.fs-5 {
  font-size: calc(1.25625rem + 0.075vw) !important;
}

.fs-6 {
  font-size: 0.9375rem !important;
}


@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.8125rem !important;
  }

  .fs-2 {
    font-size: 2.34375rem !important;
  }

  .fs-3 {
    font-size: 1.875rem !important;
  }

  .fs-4 {
    font-size: 1.640625rem !important;
  }

  .fs-5 {
    font-size: 1.3125rem !important;
  }
}

.fancyTable *,.default-table *{
    font-size: 103%;
}

/*indicators*/
.indicators{
  list-style: none;
  margin: 0;
  padding: 0;
}
.indicators:after{
  clear: both;
  display: block;
  content: "";
}
.indicators.four li{
  width: 25%;
  float: left;

}
.indicator{
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-weight: 600;
  text-align: center;
}
.indicator.finished{
  background: rgba(255,0,0);
  color: #fff;
}
.indicator.very-low{
  background: rgba(250, 195, 195);
}

.indicator.low{
  background: rgba(241, 196, 15);
  color: #fff;
}
.indicator.available{
  background: rgba(0,255,0);
}
@media(max-width: 575px){
  .indicator{
    min-height: 65px;
  }
}
/**/
.indicators-container{
    padding: 15px;
}
.indicator-box{
    display: flex;
}

.indicator-box .color-box{
    width: 50px;
}
.indicator-box .color-box.lightred{
    background: #fcf2f2 !important;
    border: 1px solid #f5dede;
}

.indicator-box .desc-box{
    width: calc(100% - 50px);
    line-height: 18px;
    padding: 0 12px;
}
/*icons*/

.cog-i::before{
    font-family: FontAwesome;
    content: "\f013";
}

.help-i::before{
    font-family: FontAwesome;
    content: "\f128";
}
.help-circle-i::before{
    font-family: FontAwesome;
    content: "\f059";
}

.undo-i{
    position: relative;
    background-image: url('refresh.png');
    
    background: rgba(0, 0, 0, .1);
    width: 400px; height: 200px;
}

.home-i::before{
    font-family: FontAwesome;
    content: "\f0e2";
}

.search-i::before{
    font-family: FontAwesome;
    content: "\f0e2";
}

.menu-i::before{
    font-family: FontAwesome;
    content: "\f0e2";
}

.grid-i::before{
    font-family: FontAwesome;
    content: "\f009";
}

.table-i::before{
    font-family: FontAwesome;
    content: "\f0e2";
}

.user-circle-i::before{
    font-family: FontAwesome;
    content: "\f2bd";
}

.edit-i::before{
    font-family: FontAwesome;
    content: "\f044";
}

.envelope-i::before{
    font-family: FontAwesome;
    content: "\f0e0";
}

.trash-i::before{
    font-family: FontAwesome;
    content: "\f2ed";
}

.logout-i::before{
    font-family: FontAwesome;
    content: "\f2f5";
}

/*end icons*/
.title-bordered-b {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    padding-bottom: 10px;
}

.title-bordered-b.light {
    border-color: rgba(255, 255, 255, .05) !important;
}

.title-bordered-b.dark {
    border-color: rgba(0, 0, 0, .05) !important;
}

.link,
.link:before {
    color: blue;
}


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


/*   HEADER/TITLE STYLES
/*------------------------------------------*/

.header-style-1{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.header-style-1 .title-section{
    width: 70%;
}

.header-style-1 .controls-section{
    width: 30%;
    padding-top: 10px;
}
.select-control{
    background: rgba(0, 0, 0, .05);
    padding: 5px 12px;
}
.select-control label{
    margin-right: 10px;
    margin-bottom: 0;
}
.select-control select{
    font-size: 90%;
    height: 25px;
    outline: 0;
}
/*------------------------------------------*/


/*   DIVIDER STYLES
/*------------------------------------------*/

.divider10 {
    height: 10px;
}

.divider25 {
    height: 20px;
}

.divider20 {
    height: 25px;
}

.divider30 {
    height: 30px;
}

.divider40 {
    height: 40px;
}

.divider50 {
    height: 50px;
}

.divider60 {
    height: 60px;
}

.divider70 {
    height: 70px;
}

.divider80 {
    height: 80px;
}

.divider90 {
    height: 90px;
}

.divider100 {
    height: 100px;
}

.divider120 {
    height: 150px;
}

.divider130 {
    height: 150px;
}

.divider150 {
    height: 150px;
}

.divider160 {
    height: 160px;
}

.divider170 {
    height: 170px;
}

.divider180 {
    height: 180px;
}

.divider190 {
    height: 190px;
}

.divider200 {
    height: 200px;
}

.divider250 {
    height: 250px;
}


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


/*   LOADER STYLES
/*------------------------------------------*/

.count img {}

.processing-container,
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483647;
    background: transparent;
}

.loader-style1 {
    display: block;
    max-width: 20%;
    margin: 18% auto;
    text-align: center;
    background: #fff;
    padding: 20px;
    color: #0890e3;
    border: 2px solid #ccc;
    font-size: 18px;
    font-weight: 800;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.loader-style1 .loader-gif-section {
    display: block;
    width: 100%;
}

.loader-style1 .loader-gif-section img {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
}

.loader-style1 .loader-text-section {
    display: block;
    width: 100%;
}


/* style 2 */

.loader-style2 {
    display: block;
    max-width: 220px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    color: #0890e3;
    font-size: 100%;
}

.loader-style2 .loader-gif-section {
    display: block;
    width: 100%;
}

.loader-style2 .loader-gif-section img {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
}

.loader-style2 .loader-text-section {
    display: block;
    width: 100%;
}


/* end */

@media(max-width: 992px) {
    .loader-style1 {
        max-width: 40%;
    }
}

@media(max-width: 768px) {
    .loader-style1 {
        max-width: 50%;
    }
}

@media(max-width: 576px) {
    .loader-style1 {
        max-width: 80%;
    }
}

.processing {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 50%;
    height: 28px;
    background: #f5f895;
    border: 1px solid #c3c745;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
}

.processing-img {
    width: 100px;
    float: left;
}

.processing-img img {
    width: 100%;
    margin-top: -10px;
    margin-left: 30px;
}

.processing-text {
    width: calc(100% - 100px);
    float: right;
    white-space: nowrap;
    font-size: 80%;
    padding: 3px;
    color: #09b4e9;
    font-weight: 600;
}

.processing:after {
    clear: both;
    display: block;
    content: "";
}

@media(max-width: 576px) {
    .processing {
        width: 95%;
    }
}

.loader {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../images/loader/loaderx.gif) center no-repeat rgba(0, 0, 0, 0.01);
}

div.add-preloader {
    position: relative;
    width: 100%;
    min-height: 130px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.image_loader {
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: auto auto;
    padding-top: 26px;
}

.image_loader img {
    width: 150px;
    display: block;
    margin: auto auto;
}


/*inter loader*/

.loading {
    background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}

.inner_loader {
    max-width: 180px;
    margin: 10% auto;
}

.inner_loader img {
    max-width: 100%;
}


/* loader*/

.innerloader_absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
}

.innerloader_fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
}

.innerloader_absolute .img_div,
.innerloader_fixed .img_div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 50%;
    max-width: 150px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    height: 100px;
}

.innerloader_absolute .img_div p,
.innerloader_fixed .img_div p {
    text-align: center;
    font-size: 100%;
    margin: 0;
    padding: 0;
    line-height: 18px;
    color: #1ab8e4;
    font-weight: 500;
    font-family: Tahoma;
}

.innerloader_absolute .img_div img,
.innerloader_fixed .img_div img {
    width: 100%;
}


/**/

.load-more-container {
    margin: 15px;
}

.load-more {
    width: 150px;
    height: 35px;
    background: #cfe2eb;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #aecddd;
    text-align: center;
    border-radius: 100px;
}

.load-more a {
    padding: 5px 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

.load-more a:hover {
    text-decoration: none;
}

.load-more img {
    display: block;
    width: 120px;
    margin: 0 auto;
    margin-top: -12px;
}

@media(max-width: 991px) {
    .data-pager-bar .pager-bar-left {
        width: 100%;
    }
    .data-pager-bar .pager-bar-right {
        display: none;
    }
}

.more-button {
    display: inline-block;
    font-weight: bold;
    color: #00f;
    background: rgba(0, 0, 0, 0.04);
    padding: 5px 10px;
}

.more-button i {
    vertical-align: middle;
}

.more-button:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}


/*_____________________________________END
////////////////////////////////////////*/

.to-right {
    float: right;
}

.to-right:after {
    clear: both;
    display: block;
    content: "";
}

.trash {
    color: red;
}

.overflow-auto {
    overflow: auto;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-hidden {
    overflow: hidden;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.disabled,
.read-only,
[readonly],
[disabled] {
    opacity: 0.3;
    cursor: not-allowed !important;
}

.disabled:hover,
.disabled a:hover {
    text-decoration: none;
}

.sub {
    margin-top: 10px;
}

.printable-content-heading {
    display: none;
}

.hide {
    display: none;
}

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

.faint {
    opacity: 0.4;
}

.total,
.bold {
    font-weight: 700 !important;
}

.bold600{
    font-weight: 600 !important;
}

.bold700{
    font-weight: 700 !important;
}

.bold800{
    font-weight: 800 !important;
}

.bold900{
    font-weight: 900 !important;
}

.text-italic{
    font-style: italic !important;
}

.required {
    color: red;
    font-weight: 600;
    font-size: 18px;
}

.optional {
    color: green;
    font-weight: 600;
    padding-left: 7px;
}

.status-bar span {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    border-radius: 3px;
    padding: 5px 15px;
    box-sizing: border-box;
}

.status-bar-red span {
    background: #e6fbe9;
    border: 1px solid #f9ced2;
    display: block;
    padding: 3px 15px;
    color: red;
    margin-bottom: 5px;
}

.app-alert {
    width: 100%;
}

.app-alert .alert-icon {
    width: 32px;
    float: left;
}

.app-alert .alert-icon {}

.app-alert .alert-icon img {
    width: 32px;
}

.app-alert .alert-text {
    width: calc(100% - 32px);
    float: right;
    line-height: 20px;
    padding: 5px;
    vertical-align: middle;
    white-space: normal;
}

.app-alert:after {
    clear: both;
    display: block;
    content: "";
}

.alert-red {
    background: #fbe6e8;
    border: 1px solid #f9ced2;
    display: block;
    padding: 3px 15px;
    color: red;
    font-weight: 600;
    margin-bottom: 5px;
}

.alert-green {
    background: #b9f4b9;
    border: 1px solid #9be99b;
    display: block;
    padding: 3px 15px;
    color: darkgreen;
    font-weight: 600;
    margin-bottom: 5px;
}

.alert-orange {
    background: #f8e5d2;
    border: 1px solid #ebd1b6;
    display: block;
    padding: 3px 15px;
    color: #ff7f00;
    font-weight: 600;
    margin-bottom: 5px;
}

.alert-blue {
    background: #dae5f8;
    border: 1px solid #b3cbf6;
    display: block;
    padding: 3px 15px;
    color: #0c4cc0;
    font-weight: 600;
    margin-bottom: 5px;
}

.status-msg {
    display: block;
}

.status-msg::after {
    clear: both;
    display: block;
    content: "";
}

.status-msg-icon {
    width: 32px;
    float: left;
}

.status-msg-icon img {
    width: 100%;
}

.status-msg-text {
    width: calc(100% - 32px);
    float: left;
    padding-top: 5px;
    padding-left: 5px;
}


/*end*/

.flex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.nowrap {
    white-space: nowrap;
}

.block {
    display: block;
    width: 100%;
}

.inline-block {
    display: inline-block !important;
}

.no-resize {
    resize: none;
}

.text-center {
    text-align: center;
}

.text-white {
    color: #fff;
}

.text-orange {
    color: orange;
}

.text-green {
    color: green;
}

.text-blue {
    color: blue;
}

.text-red,
.text-red:hover {
    color: red !important;
}

.info-text {
    color: #0c4cc0;
}

.no-data {
    display: inline-block;
    margin: 5%;
}

.empty {
    font-style: italic;
    font-size: 80%;
}

.info-area {
    display: block;
    max-width: 70%;
    padding: 10%;
    color: green;
}

.info-box {
    background: #dcf0fc;
    border: 1px solid #b8ddf4;
    display: block;
    padding: 30px;
    color: blue;
    margin-bottom: 10px;
}

.error-box {
    background: #fbe6e8;
    border: 1px solid #f9ced2;
    display: block;
    padding: 30px;
    color: red;
    margin-bottom: 10px;
}

.error_box {}

.error_box ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.validation_error,
.error {
    color: red !important;
}

input.validation_error,
select.validation_error,
textarea.validation_error {
    border: 1px solid red;
    border-color: red;
}

label.validation_error {
    position: relative;
    display: block;
    width: 100%;
    line-height: 18px;
    font-size: 80%;
}


/*WIDTH*/


/* WIDTH */

.max-width50 {
    max-width: 50px;
}

.max-width60 {
    max-width: 60px;
}

.max-width70 {
    max-width: 70px;
}

.max-width80 {
    max-width: 80px;
}

.max-width90 {
    max-width: 90px;
}

.max-width100 {
    max-width: 100px;
}

.max-width130 {
    max-width: 130px;
}

.max-width150 {
    max-width: 150px;
}

.max-width160 {
    max-width: 160px;
}

.max-width170 {
    max-width: 170px;
}

.max-width180 {
    max-width: 180px;
}

.max-width190 {
    max-width: 190px;
}

.max-width200 {
    max-width: 200px;
}

.max-width250 {
    max-width: 250px;
}

.max-width300 {
    max-width: 300px;
}

.max-width320 {
    max-width: 320px;
}

.max-width350 {
    max-width: 350px;
}

.max-width400 {
    max-width: 400px;
}

.max-width450 {
    max-width: 450px;
}

.max-width480 {
    max-width: 480px;
}

.max-width500 {
    max-width: 500px;
}

.max-width550 {
    max-width: 550px;
}

.max-width600 {
    max-width: 600px;
}


/*  */

.min-width20 {
    min-width: 20px;
}

.min-width40 {
    min-width: 40px;
}

.min-width60 {
    min-width: 60px;
}

.min-width80 {
    min-width: 80px;
}

.min-width100 {
    min-width: 100px;
}

.min-width130 {
    min-width: 130px;
}

.min-width150 {
    min-width: 150px;
}

.min-width200 {
    min-width: 200px;
}

.min-width250 {
    min-width: 250px;
}

.min-width300 {
    min-width: 300px;
}

.min-width320 {
    min-width: 320px;
}

.min-width350 {
    min-width: 350px;
}

.min-width400 {
    min-width: 400px;
}

.min-width450 {
    min-width: 450px;
}

.min-width480 {
    min-width: 480px;
}

.min-width500 {
    min-width: 500px;
}

.min-width550 {
    min-width: 550px;
}

.min-width600 {
    min-width: 600px;
}


/* HEIGHT */

.ht-pct100 {
    height: 100%;
}

.ht-pct95 {
    height: 95%;
}

.ht35 {
    height: 35px;
}

.ht35 {
    height: 65px;
}


/*
*   MARGINS
*/

.mgn-t5 {
    margin-top: 5px;
}

.mgn-t10 {
    margin-top: 10px;
}

.mgn-t15 {
    margin-top: 15px;
}

.mgn-t20 {
    margin-top: 20px;
}

.mgn-t25 {
    margin-top: 25px;
}

.mgn-t30 {
    margin-top: 30px;
}

.mgn-t35 {
    margin-top: 35px;
}

.mgn-t40 {
    margin-top: 40px;
}

.mgn-t45 {
    margin-top: 45px;
}

.mgn-t50 {
    margin-top: 50px;
}

.mgn-t55 {
    margin-top: 55px;
}

.mgn-t60 {
    margin-top: 60px;
}

.mgn-t65 {
    margin-top: 65px;
}

.mgn-t70 {
    margin-top: 70px;
}

.mgn-t75 {
    margin-top: 75px;
}

.mgn-t80 {
    margin-top: 80px;
}

.mgn-t85 {
    margin-top: 85px;
}

.mgn-t90 {
    margin-top: 90px;
}

.mgn-t95 {
    margin-top: 95px;
}

.mgn-t100 {
    margin-top: 100px;
}

.mgn-t105 {
    margin-top: 105px;
}

.mgn-t110 {
    margin-top: 110px;
}

.mgn-t115 {
    margin-top: 115px;
}

.mgn-t120 {
    margin-top: 120px;
}

.mgn-t125 {
    margin-top: 125px;
}

.mgn-t150 {
    margin-top: 150px;
}

.mgn-t200 {
    margin-top: 200px;
}

.mgn-t250 {
    margin-top: 250px;
}

.mgn-l5 {
    margin-left: 5px;
}

.mgn-l10 {
    margin-left: 10px;
}

.mgn-l15 {
    margin-left: 15px;
}

.mgn-l20 {
    margin-left: 20px;
}

.mgn-l25 {
    margin-left: 25px;
}

.mgn-l30 {
    margin-left: 30px;
}

.mgn-l35 {
    margin-left: 35px;
}

.mgn-l40 {
    margin-left: 40px;
}

.mgn-l45 {
    margin-left: 45px;
}

.mgn-l50 {
    margin-left: 50px;
}

.mgn-l55 {
    margin-left: 55px;
}

.mgn-l60 {
    margin-left: 60px;
}

.mgn-l65 {
    margin-left: 65px;
}

.mgn-l70 {
    margin-left: 70px;
}

.mgn-l75 {
    margin-left: 75px;
}

.mgn-l80 {
    margin-left: 80px;
}

.mgn-l85 {
    margin-left: 85px;
}

.mgn-l90 {
    margin-left: 90px;
}

.mgn-l95 {
    margin-left: 95px;
}

.mgn-l100 {
    margin-left: 100px;
}

.mgn-r5 {
    margin-right: 5px;
}

.mgn-r10 {
    margin-right: 10px;
}

.mgn-r15 {
    margin-right: 15px;
}

.mgn-r20 {
    margin-right: 20px;
}

.mgn-r25 {
    margin-right: 25px;
}

.mgn-r30 {
    margin-right: 30px;
}

.mgn-r35 {
    margin-right: 35px;
}

.mgn-r40 {
    margin-right: 40px;
}

.mgn-r45 {
    margin-right: 45px;
}

.mgn-r50 {
    margin-right: 50px;
}

.mgn-r55 {
    margin-right: 55px;
}

.mgn-r60 {
    margin-right: 60px;
}

.mgn-r65 {
    margin-right: 65px;
}

.mgn-r70 {
    margin-right: 70px;
}

.mgn-r75 {
    margin-right: 75px;
}

.mgn-r80 {
    margin-right: 80px;
}

.mgn-r85 {
    margin-right: 85px;
}

.mgn-r90 {
    margin-right: 90px;
}

.mgn-r95 {
    margin-right: 95px;
}

.mgn-r100 {
    margin-right: 100px;
}

.mgn-lr5 {
    margin-left: 5px;
    margin-right: 5px;
}

.mgn-lr10 {
    margin-left: 10px;
    margin-right: 10px;
}

.mgn-lr15 {
    margin-left: 15px;
    margin-right: 15px;
}

.mgn-lr20 {
    margin-left: 20px;
    margin-right: 20px;
}

.mgn-lr25 {
    margin-left: 25px;
    margin-right: 25px;
}

.mgn-lr30 {
    margin-left: 30px;
    margin-right: 30px;
}

.mgn-lr35 {
    margin-left: 35px;
    margin-right: 35px;
}

.mgn-lr40 {
    margin-left: 40px;
    margin-right: 40px;
}

.mgn-lr45 {
    margin-left: 45px;
    margin-right: 45px;
}

.mgn-lr50 {
    margin-left: 50px;
    margin-right: 50px;
}

.mgn-lr55 {
    margin-left: 55px;
    margin-right: 55px;
}

.mgn-lr60 {
    margin-left: 60px;
    margin-right: 60px;
}

.mgn-lr65 {
    margin-left: 65px;
    margin-right: 65px;
}

.mgn-lr70 {
    margin-left: 70px;
    margin-right: 70px;
}

.mgn-lr75 {
    margin-left: 75px;
    margin-right: 75px;
}

.mgn-lr80 {
    margin-left: 80px;
    margin-right: 80px;
}

.mgn-lr85 {
    margin-left: 85px;
    margin-right: 85px;
}

.mgn-lr90 {
    margin-left: 90px;
    margin-right: 90px;
}

.mgn-lr95 {
    margin-left: 95px;
    margin-right: 95px;
}

.mgn-lr100 {
    margin-left: 100px;
    margin-right: 100px;
}

.mgn-b2 {
    margin-bottom: 2px;
}

.mgn-b5 {
    margin-bottom: 5px;
}

.mgn-b10 {
    margin-bottom: 10px;
}

.mgn-b15 {
    margin-bottom: 15px;
}

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

.mgn-b25 {
    margin-bottom: 25px;
}

.mgn-b30 {
    margin-bottom: 30px;
}

.mgn-b35 {
    margin-bottom: 35px;
}

.mgn-b40 {
    margin-bottom: 40px;
}

.mgn-b45 {
    margin-bottom: 45px;
}

.mgn-b50 {
    margin-bottom: 50px;
}

.mgn-b55 {
    margin-bottom: 55px;
}

.mgn-b60 {
    margin-bottom: 60px;
}

.mgn-b65 {
    margin-bottom: 65px;
}

.mgn-b70 {
    margin-bottom: 70px;
}

.mgn-b75 {
    margin-bottom: 75px;
}

.mgn-b80 {
    margin-bottom: 80px;
}

.mgn-b85 {
    margin-bottom: 85px;
}

.mgn-b90 {
    margin-bottom: 90px;
}

.mgn-b95 {
    margin-bottom: 95px;
}

.mgn-b100 {
    margin-bottom: 100px;
}


/*
*   PADDING
*/

.pdg-t0 {
    padding-top: 0px;
}

.pdg-t5 {
    padding-top: 5px;
}

.pdg-t10 {
    padding-top: 10px;
}

.pdg-t15 {
    padding-top: 15px;
}

.pdg-t20 {
    padding-top: 20px;
}

.pdg-t25 {
    padding-top: 25px;
}

.pdg-t30 {
    padding-top: 30px;
}

.pdg-t35 {
    padding-top: 35px;
}

.pdg-t40 {
    padding-top: 40px;
}

.pdg-t45 {
    padding-top: 45px;
}

.pdg-t50 {
    padding-top: 50px;
}

.pdg-t55 {
    padding-top: 55px;
}

.pdg-t60 {
    padding-top: 60px;
}

.pdg-t65 {
    padding-top: 65px;
}

.pdg-t70 {
    padding-top: 70px;
}

.pdg-t75 {
    padding-top: 75px;
}

.pdg-t80 {
    padding-top: 80px;
}

.pdg-t85 {
    padding-top: 85px;
}

.pdg-t90 {
    padding-top: 90px;
}

.pdg-t95 {
    padding-top: 95px;
}

.pdg-t100 {
    padding-top: 100px;
}

.pdg-t105 {
    padding-top: 100px;
}

.pdg-l0 {
    padding-left: 0px;
}

.pdg-l5 {
    padding-left: 5px;
}

.pdg-l10 {
    padding-left: 10px;
}

.pdg-l15 {
    padding-left: 15px;
}

.pdg-l20 {
    padding-left: 20px;
}

.pdg-l25 {
    padding-left: 25px;
}

.pdg-l30 {
    padding-left: 30px;
}

.pdg-l35 {
    padding-left: 35px;
}

.pdg-l40 {
    padding-left: 40px;
}

.pdg-l45 {
    padding-left: 45px;
}

.pdg-l50 {
    padding-left: 50px;
}

.pdg-l55 {
    padding-left: 55px;
}

.pdg-l60 {
    padding-left: 60px;
}

.pdg-l65 {
    padding-left: 65px;
}

.pdg-l70 {
    padding-left: 70px;
}

.pdg-l75 {
    padding-left: 75px;
}

.pdg-l80 {
    padding-left: 80px;
}

.pdg-l85 {
    padding-left: 85px;
}

.pdg-l90 {
    padding-left: 90px;
}

.pdg-l95 {
    padding-left: 95px;
}

.pdg-l100 {
    padding-left: 100px;
}

.pdg-r0 {
    padding-right: 0px !important;
}

.pdg-r5 {
    padding-right: 5px !important;
}

.pdg-r10 {
    padding-right: 10px;
}

.pdg-r15 {
    padding-right: 15px;
}

.pdg-r20 {
    padding-right: 20px;
}

.pdg-r25 {
    padding-right: 25px;
}

.pdg-r30 {
    padding-right: 30px;
}

.pdg-r35 {
    padding-right: 35px;
}

.pdg-r40 {
    padding-right: 40px;
}

.pdg-r45 {
    padding-right: 45px;
}

.pdg-r50 {
    padding-right: 50px;
}

.pdg-r55 {
    padding-right: 55px;
}

.pdg-r60 {
    padding-right: 60px;
}

.pdg-r65 {
    padding-right: 65px;
}

.pdg-r70 {
    padding-right: 70px;
}

.pdg-r75 {
    padding-right: 75px;
}

.pdg-r80 {
    padding-right: 80px;
}

.pdg-r85 {
    padding-right: 85px;
}

.pdg-r90 {
    padding-right: 90px;
}

.pdg-r95 {
    padding-right: 95px;
}

.pdg-r100 {
    padding-right: 100px;
}

.pdg-lr0 {
    padding-left: 0;
    padding-right: 0px;
}

.pdg-lr5 {
    padding-left: 5;
    padding-right: 5px;
}

.pdg-lr10 {
    padding-left: 10;
    padding-right: 10px;
}

.pdg-lr15 {
    padding-left: 15;
    padding-right: 15px;
}

.pdg-lr20 {
    padding-left: 20;
    padding-right: 20px;
}

.pdg-lr25 {
    padding-left: 25;
    padding-right: 25px;
}

.pdg-lr30 {
    padding-left: 30;
    padding-right: 30px;
}

.pdg-lr35 {
    padding-left: 35;
    padding-right: 35px;
}

.pdg-lr40 {
    padding-left: 40;
    padding-right: 40px;
}

.pdg-lr45 {
    padding-left: 45;
    padding-right: 45px;
}

.pdg-lr50 {
    padding-left: 50;
    padding-right: 50px;
}

.pdg-lr55 {
    padding-left: 55;
    padding-right: 55px;
}

.pdg-lr60 {
    padding-left: 60;
    padding-right: 60px;
}

.pdg-lr65 {
    padding-left: 65;
    padding-right: 65px;
}

.pdg-lr70 {
    padding-left: 70;
    padding-right: 70px;
}

.pdg-lr75 {
    padding-left: 75;
    padding-right: 75px;
}

.pdg-lr80 {
    padding-left: 80;
    padding-right: 80px;
}

.pdg-lr85 {
    padding-left: 85;
    padding-right: 85px;
}

.pdg-lr90 {
    padding-left: 90;
    padding-right: 90px;
}

.pdg-lr95 {
    padding-left: 95;
    padding-right: 95px;
}

.pdg-lr100 {
    padding-left: 100;
    padding-right: 100px;
}

.pdg-b2 {
    padding-bottom: 2px;
}

.pdg-b5 {
    padding-bottom: 5px;
}

.pdg-b10 {
    padding-bottom: 10px;
}

.pdg-b15 {
    padding-bottom: 15px;
}

.pdg-b20 {
    padding-bottom: 20px;
}

.pdg-b25 {
    padding-bottom: 25px;
}

.pdg-b30 {
    padding-bottom: 30px;
}

.pdg-b35 {
    padding-bottom: 35px;
}

.pdg-b40 {
    padding-bottom: 40px;
}

.pdg-b45 {
    padding-bottom: 45px;
}

.pdg-b50 {
    padding-bottom: 50px;
}

.pdg-b55 {
    padding-bottom: 55px;
}

.pdg-b60 {
    padding-bottom: 60px;
}

.pdg-b65 {
    padding-bottom: 65px;
}

.pdg-b70 {
    padding-bottom: 70px;
}

.pdg-b75 {
    padding-bottom: 75px;
}

.pdg-b80 {
    padding-bottom: 80px;
}

.pdg-b85 {
    padding-bottom: 85px;
}

.pdg-b90 {
    padding-bottom: 90px;
}

.pdg-b95 {
    padding-bottom: 95px;
}

.pdg-b100 {
    padding-bottom: 100px;
}

.pdg-a0 {
    padding: 0;
}

.pdg-a1 {
    padding: 1px;
}

.pdg-a2 {
    padding: 2px;
}

.pdg-a5 {
    padding: 5px;
}

.pdg-a3 {
    padding: 3px;
}

.pdg-a10 {
    padding: 10px;
}

.pdg-a15 {
    padding: 15px;
}

.pdg-a20 {
    padding: 20px;
}

.pdg-a25 {
    padding: 25px;
}

.pdg-a30 {
    padding: 30px;
}

.pdg-a35 {
    padding: 35px;
}

.pdg-a40 {
    padding: 40px;
}

.pdg-a45 {
    padding: 45px;
}

.pdg-a50 {
    padding: 50px;
}

.pdg-a55 {
    padding: 55px;
}

.pdg-a60 {
    padding: 60px;
}

.pdg-a65 {
    padding: 65px;
}

.pdg-a70 {
    padding: 70px;
}

.pdg-a75 {
    padding: 75px;
}

.pdg-a80 {
    padding: 80px;
}

.pdg-a85 {
    padding: 85px;
}

.pdg-a90 {
    padding: 90px;
}

.pdg-a95 {
    padding: 95px;
}

.pdg-a100 {
    padding: 100px;
}


/* ___________________________________
// SCROLL */

.left-scroll-button {
    position: absolute;
    left: 0;
}

.right-scroll-button {
    position: absolute;
    right: 0;
}

.scroll-button {
    border: 0;
    width: 16px;
    height: inherit;
    background: rgba(0, 0, 0, 0.05);
    color: #000;
    padding: 3px;
    padding-top: 2px;
    box-sizing: border-box;
}

.scroll-button:hover {
    background: rgba(0, 0, 0, 0.1);
}

.scroll-button:focus {
    outline: 0;
}

.HScrollable-menu {
    position: absolute;
    left: 16px;
    right: 16px;
    overflow: auto;
    overflow-y: hidden;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

.HScrollable-menu::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}

.HScrollable-menu li:first-child {
    margin-left: 5px;
}


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


/*   TABLE STYLES
/*------------------------------------------*/

.default-table {}

.sub-table,
.fancyTable {
    background: #fff;
}

.default-table th,
.default-table td {
    padding: 5px 15px;
    vertical-align: top;
}

.default-table thead {
    background: rgba(0, 0, 0, .2);
}

.default-table th,
.default-table .thead {
    font-weight: 700;
}

.default-table.bordered,
.default-table.bordered th,
.default-table.bordered td {
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.default-table .pdg-a0 {
    padding: 0;
}

.default-table.borderless,
.default-table .borderless {
    border: 0
}

.default-table.borderless th,
.default-table.borderless td,
.default-table .borderless th,
.default-table .borderless td {
    border: 0;
}

.default-table.bordered-bottom>tbody>tr,
.bordered-bottom tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.default-table.bordered-bottom>tbody>tr:last-child,
.bordered-bottom tr:last-child {
    border-bottom: 0;
}

.default-table.no-lw th,
.default-table.no-lw td:first-child {
    padding-left: 0 !important;
}

.default-table table .sub-table,
.default-table table .sub-table td,
.default-table table .sub-table th {
    border: 0;
}

.default-table table .sub-table.borderless,
.default-table table .sub-table.borderless td,
.default-table table .sub-table.borderless th {
    border: 0;
}

.striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.striped-2>tbody>tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.default-table td.stripless,
.stripless>tbody>tr:nth-of-type(odd) {
    background: transparent;
}

.table-numbered {
    counter-reset: rowNumber;
}

.table-numbered thead tr.main-tr::before {
    display: table-cell;
    content: "#";
    padding: 5px 15px;
    padding-right: 0.3em;
    text-align: right;
}

.table-numbered tbody tr.main-tr::before {
    display: table-cell;
    counter-increment: rowNumber;
    content: counter(rowNumber) ".";
    padding: 5px 15px;
    text-align: right;
}

.form-table {
    white-space: nowrap;
    border-collapse: collapse;
}

.form-table .rounded3 {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
}

.form-table td {
    padding: 3px;
    vertical-align: top;
}

.form-table tr td:first-child {
    padding-left: 0;
    padding-right: 0;
}

.form-table tr td:last-child {
    padding-right: 0;
}

.form-table .label {
    font-weight: 600;
}

.inform-table {
    border-collapse: collapse;
    border-color: transparent !important;
}

.inform-table td,
.inform-table th {
    border-color: transparent !important;
    vertical-align: top;
    padding: 0 5px;
}

.inform-table tr td:first-child,
.inform-table tr th:first-child {
    padding-left: 0;
}

.inform-table tr td:last-child,
.inform-table tr th:last-child {
    padding-right: 0;
}

.no-border,
.no-border td {
    border: 0 !important;
}

.prices-form {}

.form-table.style1 input,
.form-table.style1 .form-control {
    border: 0;
    text-align: right;
    float: right;
    background: transparent;
    padding: 0 6px;
    height: 30px;
    min-height: 30px;
}

.form-table.style1 input:focus,
.form-table.style1 .form-control:focus {
    color: green;
}

.form-table.style1 .controls-row {}

.form-table.style1 .controls-row th,
.form-table.style1 .controls-row td {
    padding: 6px;
    padding-bottom: 20px;
}

.form-table.style1 tbody td {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.form-table.style1 input[type="search"] {
    border: 1px solid rgba(0, 0, 0, .3);
    text-align: left;
    border-radius: 100px;
    padding: 0 15px;
    min-width: 150px;
}

.form-table.style2 th,
.form-table.style2 td {
    vertical-align: bottom;
    padding-top: 12px;
}
.form-table.style2 .form-control,
.form-table.style2 .form-control {
    padding-bottom: 2px;
    height: 25px;
}

/*_______________________END*/


/*====================================================================================
//////////////////////////////////////////////////////////////////////////////////////
    BUTTONS
*/

.button {
    /* appearance */
    background-color: #3f3f3f;
    background-image: -moz-linear-gradient( top, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.1) 50%);
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 0.0)), color-stop(50%, rgba(255, 255, 255, 0.1)));
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 0 rgba(139, 139, 139, 1) inset, 0 1px 0 rgba(88, 88, 88, 1);
    -moz-box-shadow: 0 1px 0 rgba(139, 139, 139, 1) inset, 0 1px 0 rgba(88, 88, 88, 1);
    box-shadow: 0 1px 0 rgba(139, 139, 139, 1) inset, 0 1px 0 rgba(88, 88, 88, 1);
    cursor: pointer;
    /* position */
    display: inline-block;
    /* size */
    padding: 3px 10px;
    min-height: 28px;
    font-size: 85%;
    /* text */
    color: #eaeaea;
    text-decoration: none;
    white-space: nowrap;
}

.button:hover {
    color: #fff;
    text-decoration: none;
}


/*login*/

.login-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.login-wrapper h4 {}

.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 50%;
    max-width: 480px;
    margin: 0 auto;
    padding: 5px 10px;
}

.login-box .form-control {
    color: #029cfd!important;
    font-weight: 600;
    border-width: 1px;
}

.login-box fieldset {
    background: transparent;
    border: transparent;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 30px;
}

.password-toggler {
    font-weight: 600;
    font-size: 80%;
    width: 40px;
    cursor: pointer;
    color: #029cfd;
}

.login-logo,
.login-fields {
    padding: 0;
}

.login-logo {
    padding: 10px;
}

.login-logo div {
    /*background: rgba(0,0,0,0.1);*/
    width: 100%;
}

.login-logo img {
    /*float: right;*/
    width: 100%;
    max-width: 150px;
    display: block;
    margin: 0 auto;
}

.login-fields {
    padding: 10px;
    /*background: gray;*/
}

.login-fields div {
    width: 100%;
}

.login-box .button,
.login-box button {
    font-size: 100%;
    font-weight: 600;
}

@media(min-width: 360px) and (max-width: 767px) {
    .login-logo div img {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    .login-box {}
}

@media(max-width: 575px) {
    .login-wrapper {
        margin: 5%;
    }
    .login-box {
        width: 100%;
    }
    .login-logo {
        width: 100%;
    }
    .login-logo div {
        max-width: 170px;
        margin: 0 auto;
    }
    .login-logo div img {
        width: 100%;
    }
    .login-box .button,
    .login-box button {
        width: 100%;
        font-size: 100%;
        font-weight: 700;
    }
}


/**/


/*______________________________________
//  POPUP*/

.popup {
    position: fixed;
    /*width: 100%;
    height: 100%;*/
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: none;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 50%;
    height: 90%;
    min-height: 250px;
    z-index: 15000;
    border: 8px solid #ddd;
    /*border-top-width: 5px;*/
    background: #eee;
    color: #666666;
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.popup-content-sm {
    width: 20%;
}

.popup-content-md {
    width: 40%;
}

.popup-content-lg {
    width: 60%;
}

.popup-content-xl {
    width: 80%;
}

.popup-content-hsm {
    height: 250px;
}

.popup-content-hmd {
    height: 320px;
}

.popup-content-hlg {
    height: 500px;
}

.popup-header {
    position: absolute;
    top: 0;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #ccc;
    background: #fff;
    height: 30px;
    font-size: 12px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset; */
}

.popup-header:after {
    clear: both;
    display: block;
    content: "";
}

.popup-title {
    width: calc(100% - 35px);
    float: left;
    padding: 3px 15px;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
}

.popup-close {
    width: 35px;
    float: right;
    height: 28px;
    font-size: 16px;
    padding: 2px 11px;
    background: #a00;
    color: #fff;
}

.popup-close:hover {
    background: red;
    cursor: pointer;
}

.popup-body {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 50px;
    padding: 10px 15px;
    overflow: auto;
    /* box-shadow: 0 0 1px rgba(0, 0, 50, 1) inset; */
}

.popup-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    height: 50px;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.popup-footer-left {
    width: calc(100% - 160px);
    float: left;
}

.popup-footer-right {
    width: 160px;
    float: right;
}

.popup-buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    float: right;
    max-width: 230px;
}

.popup-buttons:after {
    clear: both;
    display: block;
    content: "";
}

.popup-footer button {
    height: 25px;
    font-size: 80%;
    padding: 0 5px;
    margin-right: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#search_results_count {
    color: green;
    font-weight: 600;
    font-size: 82%;
}


/* otp popup */

.popup.otp-popup {}

.popup.otp-popup .popup-content {
    padding: 30px;
}

.otp-fields {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 240px;
    margin: 30px auto;
}

.otp-fields input {
    width: 30px;
    margin-right: 10px;
    text-align: center;
    min-height: 39px;
    border: 0;
    border-bottom: 1px solid #000000;
    outline: 0;
    font-size: 26px;
}

.otp-fields input:focus {
    border-color: #057aee;
    outline: 0;
    box-shadow: none;
}

.status-icon {}

.status-icon img {
    display: block;
    width: 32px;
    margin: 0 auto;
}

.status-text {
    font-weight: 700;
    text-align: center;
    padding: 5px;
}

.status-text.text-green {
    color: #10a64a;
}

.verify-btn {
    display: block;
    width: 100%;
    max-width: 150px;
    text-align: center;
    margin: 0 auto;
}

@media(max-width: 1024px) {
    .popup-content {
        width: 90%;
        height: 90%;
    }
}

@media(max-width: 576px) {
    .popup-content {
        width: 95%;
        height: 95%;
    }
    .popup.otp-popup .popup-body {
        padding: 15px;
    }
    .crop-popup .popup-content {
        padding: 0 0;
        border: 1px;
        min-width: 95%;
    }
}


/*END*/


/**/

.app-container {
    position: relative;
    overflow: hidden;
}

.app-header {
    position: absolute;
    left: 0;
    right: 0;
    height: 75px;
    z-index: 1000;
}

.app-top-seperator {
    -webkit-box-shadow: 0 6px 6px -6px #777;
    -moz-box-shadow: 0 6px 6px -6px #777;
    box-shadow: 0 6px 6px -6px #777;
    border-bottom: 1px solid #fff;
}


/*barnds*/

.app-brand-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.1);
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
    height: 50px;
    padding: 3px;
}

.app-brand-bar .brand-bar-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
}

.brand-bar-left img {
    width: 100%;
}

.app-brand-bar .brand-bar-right {
    position: absolute;
    top: 0;
    left: 150px;
    right: 0;
    bottom: 0;
}

.app-menu-section {
    position: absolute;
    top: 3px;
    left: 0;
    bottom: 0;
    right: 250px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #ddd;
    height: 40px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    border-radius: 3px;
    padding: 5px;
}

.brand-logo{}
.brand-icon{
    display: none;
}

.client-brand-section {
    position: absolute;
    top: 0;
    left: calc(100% - 250px);
    bottom: 0;
    right: 0;
}

.branch-switcher {
    width: 100%;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: purple;
    font-weight: 800;
    text-transform: uppercase;
}
.branch-switcher::before {

}

.branch-switcher::after {
    font-family: FontAwesome;
    content: "\f0d7";
    padding-left: 15px;
    padding-right: 5px;
    position: absolute;
    right: 0;
}

@media(max-width:  991px){}
@media(max-width:  767px){
    .brand-logo{}
    .brand-icon{
        display: none;
    }
    .branch-switcher::after {
        padding: 3px 16px;
        font-size: 26px;
        content: "\f142";
        font-weight: normal !important;
    }
    .branch-switcher span{display: none;}
}

@media(max-width:  575px){
    .app-brand-bar .brand-bar-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
    }

    .brand-bar-left img {
        width: 100%;

    }

    .app-brand-bar .brand-bar-right {
        position: absolute;
        top: 0;
        left: 80px;
        right: 0;
        bottom: 0;
    }
    .brand-logo{display: none;}
    .brand-icon{
        display: block;
    }
}

/**/
.app-dashboard,
.app-dashboard table td,
.app-dashboard .card table td{
    
}

.app-dashboard .links-list{
    padding: 0;
    margin: 0;
}
.app-dashboard .links-list li a{
    display: block;
    width: 100%;
    padding: 3px 12px;
    font-weight: 500;
}

/*app menu*/
.app-menu {
    float: right;
    box-sizing: border-box;
}

.app-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    list-style: none;
    white-space: nowrap;
    display: flex;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0 auto;
}

.app-menu ul::-webkit-scrollbar {
    display: none;
}

.app-menu ul li {
    float: left;
    margin-right: 10px;
}

.app-menu ul li:last-child {
    margin-right: 0;
}

.app-menu ul li a {
    display: inline-block;
    padding: 0 5px;
    color: #029cfd;
    font-weight: 600;
    text-transform: capitalize;
}

.app-menu .menu-icon {
    padding: 0;
}

.app-menu .menu-icon img {
    width: 18px;
    padding: 0;
    margin-top: -5px;
    /*display: block;margin: 0 auto;*/
}

.app-menu .menu-text {
    padding-left: 3px;
}

@media(max-width: 992px) {
    .app-menu-section {
        padding: 0 !important;
    }
    .app-menu {

    }
    .app-menu ul li {
        /*margin-right: 5px;*/
    }
    .app-menu ul li a {
        background: rgba(0, 0, 0, 0.02);
        border-radius: 50%;
        box-sizing: border-box;
        /*border: 2px solid rgba(0, 0, 0, 0.05);*/
        white-space: nowrap;
        width: 36px;
        height: 36px;
        padding-top: 5px;
    }
    .app-menu .menu-icon {
        font-size: 18px;
    }

    .app-menu .menu-icon img {
        width: 36px;
        display: block;
        margin: 0 auto;
    }
    .app-menu .menu-text {
        display: none;
    }
}

@media(max-width: 575px) {
    .app-menu-section {
        overflow: hidden;
        white-space: nowrap;
    }
}

@media(max-width: 360px) {
    .app-menu {
        padding-top: 3px;
    }
    .app-menu ul li a {
        width: 25px;
        height: 25px;
    }
    .app-menu .menu-icon {}
    .app-menu .menu-icon img {
        width: 16px;
    }
}


/* sidebar menu */

.side-menu-container {}

.side-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu li {
    border-top: rgba(0, 0, 0, 0.05);
    margin-bottom: 1px;
}

.side-menu li .side-menu-item {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    padding: 8px 12px;
    color: black;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 110%;
}

.side-menu li .side-menu-item .side-menu-icon {}

.side-menu li .side-menu-item .side-menu-label {
    padding: 0 6px;
}

.side-menu li .side-menu-item .angle {
    float: right;
    vertical-align: middle;
}

.side-menu li .side-menu-item:hover,
.side-menu li .side-menu-item:focus {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1);
}

.side-menu li .side-menu-item:focus,
.side-menu li.active .side-menu-item,
.side-menu li.active a {
    border-left: 5px solid green;
    background: #eee;
    background: linear-gradient(to right, #bbb 25%, #eee 100%);
    -webkit-background: linear-gradient(to right, #bbb 25%, #eee 100%);
    -ms-background: linear-gradient(to right, #bbb 25%, #eee 100%);
    -o-background: linear-gradient(to right, #bbb 25%, #eee 100%);
    color: green;
    font-weight: 700;
}

.side-menu li .sub-menu {
    display: none;
}

.side-menu li .sub-menu {
    padding: 0;
    list-style: none;
}

.side-menu li .sub-menu li a {
    display: block;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    padding-left: 40px;
    font-weight: 400;
    font-size: 110%;
}

.side-menu li .sub-menu li a:hover,
.side-menu li .sub-menu li a:focus {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.03);
}

.slide.is-expanded {}

.slide.is-expanded .sub-menu {
    max-height: 100%;
    display: block;
}

.slide.is-expanded .sub-menu li a:hover {}

.slide.is-expanded .angle {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}


/*client*/

.client-brand-container {
    max-width: 250px;
    line-height: 18px;
    min-height: 43px;
    background: rgba(0, 0, 0, .1);
    margin: 3px;

}

.client-brand-container:hover {
    cursor: pointer;
}

.client-brand-container .main-conent {
    width: calc(100% - 20px);
    float: left;
}

.client-brand-container .chevron-down {
    width: 20px;
    height: 100%;
    height: inherit;
    font-family: FontAwesome;
    content: "\f058";
    float: right;
    background: rgba(0, 0, 0, .2);
    padding: 5px;
    padding-top: 15px;
}

.client-brand-particulars {
    width: calc(100% - 60px);
    float: right;
    text-transform: uppercase;
    font-weight: 800;
    min-height: 50px;
}

.client-brand-particulars div {
    display: block;
    max-height: 50px;
    margin-top: 5px;
    margin-right: 15px;
    color: purple;
}

.client-logo {
    width: 60px;
    float: left;
}

.client-logo div {
    display: block;
    margin: 0 auto;
    padding: 0 3px;
    box-sizing: border-box;
}

.char-logo div {
    width: 45px;
    height: 45px;
    margin-top: 2px;
    font-size: 24px;
    text-align: center;
    padding: 9px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    background-color: purple;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

.client-logo img {
    width: 48px;
    height: 48px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

.app-brand-bar:after {
    clear: both;
    display: block;
    content: "";
}

@media(max-width: 768px) {
    .app-header {}
    .app-brand-bar {}
    .app-menu-section {
        right: 50px;
    }
    .client-brand-section {
        left: calc(100% - 50px);
        padding-left: 5px;
        padding-right: 5px;
    }
    .client-brand-container {
        max-width: 100%;
        padding-right: 3px;
    }
    .client-brand-particulars {
        display: none;
    }
    .client-logo {
        width: 100%;
        float: none;
    }
    .client-logo div,
    .client-logo img {
        width: 40px;
        height: 40px;
    }
}




/*end*/


/*user bar*/

.app-user-bar {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    height: 25px;
    padding: 0 15px;
    padding-bottom: 5px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.user-info {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-info:hover {
    cursor: pointer;
}

.particulars-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 100px;
    padding-bottom: 3px;
    /*overflow: hidden;
    text-overflow: ellipsis;*/
}

.particulars-section img {
    margin-bottom: 5px;
}

.user-photo {
    display: block;
}

.user-photo img {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 4px;
    border-radius: 50%;
    border: 2px solid red;
    box-shadow: 0 0 5px rgba(0, 255, 0, .5);
}

.app-user-bar .user-name {}

.app-user-bar .user-position {
    opacity: 0.5;
}

.signout-section {
    position: absolute;
    top: 0;
    left: calc(100% - 100px);
    right: 0;
    bottom: 0;
}

.signout-section a {
    float: right;
    color: #ff3f3f;
    font-weight: 700;
    margin-bottom: 3px;
    margin-right: 6px;
}

.signout-section #signout .signout-icon img {
    margin-bottom: 3px;
}

@media(max-width: 575px) {
    .app-user-bar .user-position {
        display: none;
    }
}


/**/


/*title bar*/

.app-title-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    padding: 3px 15px;
    box-sizing: border-box;
    padding-left: 0;
    overflow: hidden;
}

.app-title-bar .left-section {
    width: 40px;
    height: 30px;
    float: left;
}

.app-title-bar .left-section img {
    vertical-align: middle;
    margin-left: 5px;
    width: 32px;
}

#sidebar_toggler {
    background: rgba(0, 0, 0, 0.07);
    border-radius: 3px;
    display: block;
    width: 100%;
    height: 30px;
    color: #000;
}

.menu-container {
    text-align: center;
    display: block;
    font-size: 20px;
    margin: 0 auto;
    margin-top: -2px;
    margin-left: 2px;
    border: 1px solid rgba(0, 0, 0, .3);
}

@media(max-width: 767px) {
    #sidebar_toggler {
        /*padding: 0px 6px;
        padding-left: 8px;
        padding-right: 0;*/
    }
}

.app-title-bar .right-section {
    width: calc(100% - 40px);
    float: right;
}

.app-title-bar .app-title {
    width: calc(100% - 140px);
    float: left;
    padding: 0 15px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.app-title-bar .app-controls-section {
    width: 140px;
    float: right;
}


/*  */

.app-actions-bar .right-section::after {
    clear: both;
    display: block;
    content: "";
}

.app-actions-bar .controls-section {
    width: calc(100% - 200px);
    float: left;
}

.app-actions-bar .search-section {
    width: 200px;
    float: right;
}


/*  */

.app-actions-bar .other-actions-section {
    width: calc(100% - 80px);
    float: left;
}

.app-actions-bar .export-actions {
    width: 80px;
    float: right;
}

.app-actions-bar .export-actions .menu-button {
    display: inline-block;
    padding: 0 5px;
    color: #029cfd;
    font-size: 14px;
    font-weight: 600;
    /* border: 1px solid rgba(0, 0, 0, 0.4);
    border-bottom-color: #000; */
    /* background: #fff; */
    height: 25px;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset; */
    /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; */
}

.app-actions-bar .export-actions .menu-button .btn-icon {
    width: 24px;
    float: left;
}

.app-actions-bar .export-actions .menu-button .btn-icon img {
    width: 18px;
    margin: 0;
}

.app-actions-bar .export-actions .menu-button .btn-text {
    width: calc(100% - 24px);
    float: right;
}

.app-actions-bar .export-actions .dropmenu-visible {
    top: 28px;
    right: 0;
    border-top: 0;
}


/*  */

.app-controls {
    position: relative;
}

.app-controls ul {
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    display: flex;
}

.app-controls ul li {
    float: left;
    margin-right: 10px;
    color: #029cfd;
    font-weight: 600;
}

.app-controls ul li:last-child {
    margin-right: 0;
}

.app-controls ul li a,
.app-controls ul li button {
    display: inline-block;
    padding: 0 5px;
    color: #029cfd;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100%;
    box-sizing: border-box;
}

.app-controls ul li button {}

.app-controls ul li a:hover,
.app-controls ul li button:hover,
.app-controls ul li a:focus,
.app-controls ul li button:focus {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    outline: 0;
    cursor: pointer;
}

.app-controls .menu-icon {}

.app-controls .menu-icon img {
    width: 18px;
    min-width: 18px;
}

.app-controls .menu-text {
    padding-left: 3px;
}

@media(max-width: 992px) {
    .app-controls .md-hide {
        display: none;
    }
    .app-controls ul li {}
}

@media(max-width: 767px) {
    .app-controls .sm-hide {
        display: none;
    }
}

@media(max-width: 576px) {
    .app-controls .xs-hide {
        display: none;
    }
    .app-actions-bar .controls-section {
        width: calc(100% - 120px);
    }
    .app-actions-bar .search-section {
        width: 120px;
    }
    /*  */
    .app-actions-bar .other-actions-section {
        width: calc(100% - 40px);
    }
    .app-actions-bar .export-actions {
        width: 40px;
        height: 28px;
    }
    .app-actions-bar .export-actions .menu-button .btn-text {
        display: none;
        padding: 0;
    }
    .app-actions-bar .export-actions .menu-button .btn-icon {
        display: inline-block;
        width: 100%;
        float: none;
        margin: 0;
    }
    .app-actions-bar .export-actions .menu-button .btn-icon img {
        width: 24px;
        display: block;
        margin: 0 auto;
    }
}


/*end*/


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


/*   SEARCH STYLES
/*------------------------------------------*/

.global-search {}

.global-search ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-search ul li {
    margin-top: 3px;
}

.global-search ul li a,
.searchable-table a {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 3px 12px;
}


/*  */

.search-elm {}

.search-elm input {
    width: 100%;
    max-width: 150px;
}


/* all in one search */

.search-controls {
    position: relative;
    right: 2px;
    width: 100%;
    font-size: 16px;
    min-width: 100px;
    padding-bottom: 2px;
}

.search-controls label {
    display: inline-block;
    margin: 0;
    position: absolute;
    left: 5px;
    z-index: 1;
}

.search-controls input {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding-left: 25px;
    /* padding-right: 65px; */
    outline: 0;
    width: 100%;
    position: absolute;
    left: 0;
    right: 2px;
}

.search-controls input:focus {
    border-color: #057aee;
}

.search-controls .more-options {
    display: inline-block;
    height: 28px;
    padding: 0 6px;
    padding-bottom: 3px;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    color: blue;
    outline: 0;
    position: absolute;
    right: 0;
}

.search-controls .more-options:hover,
.search-controls .more-options:focus,
.search-controls .more-options:active {
    color: brown;
    background: rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.search-controls input::placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 82%;
    font-weight: 400;
}

.search-controls input::-moz-placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 82%;
    font-weight: 400;
}

.search-controls input::-ms-placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 82%;
    font-weight: 400;
}

.search-controls input::-webkit-placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 82%;
    font-weight: 400;
}

@media(max-width: 576px) {
    .search-controls input {
        padding-right: 25px;
    }
    .search-controls .more-options span {
        display: none;
    }
    .search-controls .more-options {
        font-weight: 900;
        padding-bottom: 15px;
    }
}


/* end */


/*actions bar*/

.app-actions-bar {
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    height: 30px;
    padding: 1px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background-color: rgba(0, 0, 0, 0.01);
}

.app-actions-bar .left-section {
    width: 90px;
    float: left;
    overflow-x: hidden;
    padding: 2px;
    padding-top: 1px;
}

.app-actions-bar .left-section a,
.app-actions-bar .left-section button {
    padding: 0 6px;
    display: block;
    white-space: nowrap;
    min-height: 28px;
    min-width: 88px;
    max-width: 88px;
    width: 100%;
    color: #029cfd;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    outline: 0;
    text-align: left;
}

.app-actions-bar .left-section a:hover,
.app-actions-bar .left-section button:hover {
    background: rgba(0, 0, 0, 0.07);
    text-decoration: none;
    cursor: pointer;
}

.app-actions-bar .right-section {
    width: calc(100% - 90px);
    float: right;
}

@media(max-width: 576px) {
    .app-actions-bar .left-section {
        width: 30px;
    }
    .app-actions-bar .left-section .menu-text {
        display: none;
    }
    .app-actions-bar .right-section {
        width: calc(100% - 30px);
    }
}


/*end*/

.app-content-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.app-content-section.add-sidebar .app-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    background: #eee;
    border-right: 3px solid rgba(0, 0, 0, 0.05);
    overflow: auto;
    z-index: 300;
}

.app-content-section.add-sidebar .app-right-content {
    position: absolute;
    top: 0;
    left: 251px;
    right: 0;
    bottom: 0;
}

.app-content-section.sidebar-close .app-sidebar {
    left: -250px;
}

.app-content-section.sidebar-close .app-right-content {
    left: 0;
}

.content-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 65px !important;
    background-color: rgba(0, 0, 0, 0.05);
}

.content-header.ht35 {
    height: 35px !important;
}

.content-body {
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    bottom: 0;
}

.content-body.top-offset0 {
    top: 0 !important;
}

.container-fluid {
    padding: 15px;
    box-sizing: border-box;
}

.app-footer {
    position: absolute;
    top: calc(100% - 25px);
    left: 0;
    right: 0;
    bottom: 0;
    height: 25px;
    font-style: italic;
    font-size: 82%;
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.app-footer div {
    display: inline-block;
    width: 100%;
}

.app-footer div a {
    display: inline-block;
}


/*offsets*/

.top-offset35 {
    top: 35px;
}

.top-offset50 {
    top: 50px;
}

.top-offset65 {
    top: 65px;
}

.top-offset70 {
    top: 75px;
}

.top-offset75 {
    top: 75px;
}

.top-offset76 {
    top: 76px;
}

.top-offset81 {
    top: 81px;
}

.top-offset110 {
    top: 110px;
}

.top-offset140 {
    top: 140px;
}

@media(max-width: 768px) {
    .app-content-section.add-sidebar .app-sidebar {
        left: -250px;
    }
    .app-content-section.add-sidebar .app-right-content {
        left: 0;
    }
    /*toggle sidebar*/
    .app-content-section.sidebar-close .app-sidebar {
        left: 0px;
        display: none;
    }
    .app-content-section.sidebar-close .app-right-content {
        left: 0;
    }
    /**/
    .app-content-section.sidebar-open .app-sidebar {
        top: 35px;
        left: 0;
        display: block;
    }
    .app-content-section.sidebar-open .app-right-content {
        left: 0;
    }
}


/*FORMS*/
.editable:focus{
    background: #fff;
    border:  1px solid dodgerblue;
    outline:  1px solid dodgerblue;
}

.form-group {
    background: transparent;
}

.form-group.add-legend>label {
    top: 18px;
    left: 6px;
    position: relative;
    background-color: #f6f6f6;
    padding: 0px;
    font-size: 0.9em;
}

.form-control {
    border: 1px solid #c4bfbf;
    background: transparent;
}

.input-group-prepend,
.input-group-text {
    border-color: #c4bfbf !important;
}

.file-input {
    width: 100%;
    padding: 0;
    margin-top: 8px;
    cursor: pointer;
}

.date-input-fixed{
    width: 120px!important;
    max-width: 120px!important;
}

.form-check.add-seperator {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    background-color: transparent;
    !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    color: inherit;
}

.form-control:focus {
    box-shadow: none;
    border-color: #029cfd;
    background: #fff;
}

.form-control::placeholder,
select::placeholder,
input::placeholder,
textarea::placeholder,
select option:first-child.placeholder {
    color: #000;
    opacity: 0.3;
    font-size: 100%;
    font-weight: 400;
}

.form-control::-moz-placeholder,
select::placeholder,
input::placeholder,
textarea::placeholder,
select option:first-child.placeholder {
    color: #000;
    opacity: 0.3;
    font-size: 100%;
    font-weight: 400;
}

.form-control::-ms-placeholder,
select::placeholder,
input::placeholder,
textarea::placeholder,
select option:first-child.placeholder {
    color: #000;
    opacity: 0.3;
    font-size: 100%;
    font-weight: 400;
}

.form-control::-webkit-placeholder,
select::placeholder,
input::placeholder,
textarea::placeholder,
select option:first-child.placeholder {
    color: #000;
    opacity: 0.3;
    font-size: 100%;
    font-weight: 400;
}

.form-label {
    text-align: right;
    line-height: 18px;
    display: inline-block;
    width: 100%;
}

/*filter form*/
.filter-form{
    display: flex;
}
.filter-form .filter-action{}
.filter-form .filter-action.filter-label{
    margin-right: 5px;
    font-weight: 600;
}
.filter-form .filter-action.scan-toggler{
    margin-left: 5px;
}
.filter-form .filter-action.scan-toggler button{
    white-space: nowrap;
    outline: 0;
    height: 35px;
    cursor: pointer;
}
.filter-form .filter-action input[type="search"]{
    width: 100%;
    max-width: 200px;
    padding: 0px 12px;
    height: 35px;
}
.filter-form .filter-action input[type="search"].ready-to-scan{
    border-color: green;
    outline-color: green;
    border-radius: 3px;
}

.filter-form .filter-action .search-button{
    border: 1px solid transparent;
    background: #000;
    color: #fff;
    height: 35px;
    outline: 0;
    cursor: pointer;
    margin-left: 5px;
}
.filter-form .filter-action .search-button:focus{
    outline: 0;
}
@media(max-width:991.98px){
    .filter-form .filter-action.filter-label,
    .filter-form .filter-action.scan-toggler button span,
    .filter-form .filter-action .search-button span{
        display: none;
    }
}

/**/
/**/

.input-group .left-addon {
    display: inline-block;
    min-height: 38px;
    border: 1px solid #c4bfbf;
    background: #fff;
    padding: 5px 10px;
    border-radius: 3px 0 0 3px;
    border-right: 0;
}

.input-group .bdr-l0 {
    border-left: 0;
}

.input-group .bdr-r0 {
    border-right: 0;
}

.input-group .bdr-lr0 {
    border-left: 0;
    border-right: 0;
}

.input-group .right-addon {
    display: inline-block;
    min-height: 38px;
    border: 1px solid #c4bfbf;
    background: #fff;
    padding: 5px;
    border-radius: 0 3px 3px 0;
    border-left: 0;
    padding-right: 15px;
}

.input-group .button {
    padding: 5px;
    border-radius: 0;
}

.keword-filter-input {
    height: 25px;
    padding: 5px;
    margin: 1px;
    max-width: 130px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: #fff;
}

.keword-filter-input:focus {
    outline: 0;
    box-shadow: none;
}

fieldset,
legend {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

fieldset {
    padding: 15px;
    margin: 5px;
    margin-bottom: 15px;
}

legend {
    width: auto;
    padding: 0 15px;
    font-weight: 600;
    font-size: 120%;
    text-transform: capitalize;
}

.input-fieldset {
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 3px;
    padding-right: 0;
    margin: 0;
}

.input-fieldset legend {
    border: 0;
    margin: 0;
    font-weight: normal;
    font-size: 100%;
    padding: 0 10px;
}

.input-fieldset .form-control,
.input-fieldset input[type="text"],
.input-fieldset textarea {
    border: 0;
    margin-top: -10px;
    background: transparent;
}

.input-fieldset .check-group,
.check-group {
    margin-top: 10px;
    max-height: 320px;
    overflow-y: auto;
    width: 100%;
}

.input-fieldset input[type="text"]:focus,
.input-fieldset .form-control:focus {
    background: transparent;
}

.transparent02,
.transparent02 legend {
    background: rgba(0, 0, 0, 0.02);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.02);
}

.transparent02 legend {
    font-weight: normal;
    font-size: 100%;
}

.transparent02 .input-fieldset legend {
    background: transparent;
}

.menu-checkbox {
    margin-left: 3px;
    display: none;
}

.sub-checkbox {
    position: relative;
}

.sub-checkbox input {
    position: absolute;
    right: 0;
    top: -10px;
    right: -13px;
    width: 10px;
    border: 1px solid red;
}

.sub-checkbox input:checked {
    background: #f00;
}

.app-checkbox {}

.checkbox {
    width: 18px;
    float: left;
}

.checkbox-text {
    width: calc(100% - 18px);
    float: right;
    padding-left: 5px;
    box-sizing: border-box;
}

.data-id,
.tickall {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
    cursor: pointer;
}

[for="tickall"] {
    cursor: pointer;
}


/* custom-radio-1 STYLING */

.custom-radio-1 {
    margin: 0 0 1.5rem;
    box-sizing: border-box;
    font-size: 0;
    /* display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch; */
}

.custom-radio-1.mgn-t15 {
    margin-top: 7px;
}

.custom-radio-1 input {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
}

.custom-radio-1 input+label {
    margin: 0;
    width: 100%;
    padding: 0.2rem 2rem;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border: solid 1px #ddd;
    background-color: #fff;
    font-size: 1rem;
    line-height: 140%;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
    /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
    /*flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
   */
    /* ----- */
}

.custom-radio-1 input+label:first-of-type {
    border-radius: 6px;
    /* border-right: none; */
}

.custom-radio-1 input+label:last-of-type {
    /* border-radius: 0 6px 6px 0;
    border-left: none; */
}

.custom-radio-1 input:hover+label {
    border-color: rgba(0, 0, 255, 0.1);
    background: rgba(0, 0, 255, 0.05);
}

.custom-radio-1 input:checked+label {
    background-color: #4b9dea;
    color: #fff;
    box-shadow: 0 0 10px rgba(102, 179, 251, .5);
    border-color: #4b9dea;
    z-index: 1;
}

.custom-radio-1 input:focus+label {
    outline: dotted 1px #ccc;
    outline-offset: 0.45rem;
}

@media (max-width: 800px) {
    .custom-radio-1 input+label {
        /* padding: 0.75rem 0.25rem; */
        flex: 0 0 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.custom-radio-2 {
    box-sizing: border-box;
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.custom-radio-2.mgn-t15 {
    margin-top: 7px;
}

.custom-radio-2 input {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
}

.custom-radio-2 input+label {
    margin: 0;
    padding: 0.2rem 2rem;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border: solid 1px #ddd;
    background-color: #fff;
    font-size: 1rem;
    line-height: 140%;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
    /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
    /*flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
   */
    /* ----- */
}

.custom-radio-2 input+label:first-of-type {
    border-radius: 6px 0 0 6px;
    /* border-right: none; */
}

.custom-radio-2 input+label:last-of-type {
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.custom-radio-2 input:hover+label {
    border-color: rgba(0, 0, 255, 0.1);
    background: rgba(0, 0, 255, 0.05);
}

.custom-radio-2 input:checked+label {
    background-color: #4b9dea;
    color: #fff;
    box-shadow: 0 0 10px rgba(102, 179, 251, .5);
    border-color: #4b9dea;
    z-index: 1;
}

.custom-radio-2 input:focus+label {
    outline: dotted 1px #ccc;
    outline-offset: 0.45rem;
}

@media (max-width: 800px) {
    .custom-radio-2 input+label {
        /* padding: 0.75rem 0.25rem; */
        flex: 0 0 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


/*  */


/*  */


/* range input */

.range-controls {}

.range-controls fieldset,
.range-controls .input-fieldset {
    margin: 0;
    background: transparent;
}

.range-controls .input-fieldset legend {
    background: transparent;
}

.range-controls .control-label {
    padding: 8px;
    border: 1px solid #94a2b6;
    height: 39px;
    border-radius: 3px 0 0 3px;
    border-right: 0;
}

.range-controls .min-control .control-label {
    width: 50px;
    float: left;
}

.range-controls .min-control .control-input {
    width: calc(100% - 50px);
    float: right;
}

.range-controls .max-control .control-label {
    width: 30px;
    float: left;
}

.range-controls .max-control .control-input {
    width: calc(100% - 30px);
    float: right;
}

.range-controls .min-control {
    width: 50%;
    float: left;
}

.range-controls .max-control {
    width: calc(100% - 50%);
    float: right;
    padding-left: 5px;
}


/* .range-controls input {
    width: 100%;
    height: 39px;
    border: 1px solid #94a2b6;
    background: #fff;
    padding: 0 15px;
    border-radius: 0 3px 3px 0;
    border-left: 0;
}

.range-controls input:focus {
    outline: 0;
    box-shadow: none;
} */

.range-controls:after,
.range-controls:after {
    clear: both;
    display: block;
    content: "";
}


/* end */


/*  */

.content-controls1 {
    margin-top: 15px;
    padding-right: 12px;
}

.content-controls1::after {
    clear: both;
    display: block;
    content: "";
}

.content-controls1 .left-controls {
    width: calc(100% - 50%);
    float: left;
}

.content-controls1 .right-controls {
    width: 50%;
    float: right;
}

.content-controls1 .search-elm input {
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 30px;
    padding: 3px 12px;
    width: 100%;
    max-width: 150px;
    outline: 0;
}

.center-content {
    margin: 0 auto;
    max-width: 576px;
}

@media(max-width: 992px) {
    .center-content {
        margin: 0 auto;
    }
}

.select2-container .select2-hidden-accessible,
.select2-container,
.select2-container .select2-selection--single,
.select2-container .select2-selection--single .select2-selection__rendered {
    width: 100%;
}

.form-style1 {}
  
.form-style1 .form-control,
.form-style1 input[type="text"],
.form-style1 input[type="date"],
.form-style1 input[type="tel"],
.form-style1 input[type="number"],
.form-style1 input[type="time"],
.form-style1 select,
.form-style1 textarea {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    border-radius: 0;
    padding: 0 12px;
    min-height: 25px;
    background: transparent;
}
.form-style1 textarea {
    resize: none;
}
.form-style1 .form-control.no-bottom-border{
    border-bottom: 0 !important;
}
.form-style1 .input-group-prepend,.form-style1 .input-group-append {
    outline: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

.form-style1 .input-group-prepend,.form-style1 .input-group-append .input-group-text {
    outline: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
}

.form-style1 .input-group-prepend,.form-style1 .input-group-append button.input-group-text {
    background: transparent;
    cursor: pointer;
}

.form-style1 .input-group-text {
    border-left: 0;
    border-top: 0;
    border-radius: none;
    border-right: 0;
    background: transparent;
}


/*.form-style1 .select2-container .select2-hidden-accessible,
.form-style1 .select2-container,
.form-style1 .select2-container .select2-selection--single,
.form-style1 .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: transparent;
    border-color: transparent;
    width: 100%;
}*/

.form-style1 .select2-container--default .select2-selection--single {
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .3) !important;
    border-radius: 0;
    padding: 0 12px;
    min-height: 25px;
    background: transparent;
}

.form-style1 input[type="file"] {
    border: 0 !important;
}

.form-style1 .left-addon,
.form-style1 .right-addon {
    padding-top: 8px;
    padding-bottom: 3px;
    border: 0;
}

.form-style1 .form-control:focus,
.form-style1 input[type="text"]:focus,
.form-style1 input[type="date"]:focus,
.form-style1 input[type="tel"]:focus,
.form-style1 input[type="number"]:focus,
.form-style1 input[type="time"]:focus,
.form-style1 select:focus,
.form-style1 textarea:focus {
    border-color: rgba(0, 0, 255, .3);
    outline: 0;
}

.form-style1 .main-label,
.main-label {
    margin: 0;
    font-weight: 600;
    display: block;
    background: transparent !important;
}

.form-style1 .card {
    box-shadow: none;
    margin-bottom: 15px;
    border: 1px solid rgba(0, 0, 0, .1);
}


/*  */

.form-group.label-topleft>.main-label {
    top: 18px;
    left: 6px;
    position: relative;
    background-color: white;
    padding: 0px 5px 0px 5px;
    font-size: 0.9em;
}

.remove-arrow {
    -moz-appearance: none;
    -webkit-appearance: none;
    /* padding: 2px 30px 2px 2px; */
    border: none;
    overflow: hidden;
    /* width: 120%; */
}

.remove-arrow::-ms-expand {
    display: none;
}

.form-style1 .remove-arrow {
    border-bottom: 1px solid rgba(0, 0, 0, .3) !important;
}


/* form style 2 */

.input-style1.input-contain {
    position: relative;
}

.input-style1 input {
    min-height: 38px;
    width: 100%;
    border: 1px solid black;
    border-radius: 3px;
}

.input-style1 input:focus {
    outline: none;
    border-color: blueviolet;
}

.input-style1 input:focus+.placeholder-text .input-label,
.input-style1 :not(input[value=""])+.placeholder-text .input-label {
    background-color: white;
    font-size: 1.1rem;
    color: black;
    transform: translate(0, -170%);
}

.input-style1 input:focus+.placeholder-text .input-label {
    border-color: blueviolet;
    color: blueviolet;
}

.input-style1 .placeholder-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 3px solid transparent;
    background-color: transparent;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.input-style1 .input-label {
    font-size: 1.4rem;
    padding: 0 0.5rem;
    background-color: transparent;
    transform: translate(0);
    color: black;
    transition: transform 0.15s ease-out, font-size 0.15s ease-out, background-color 0.2s ease-out, color 0.15s ease-out;
}

.input-style1 input,
.placeholder-text {
    font-size: 1.4rem;
    padding: 0 1.2rem;
}

@media (max-width: 40rem) {
    .input-style1 input {
        width: 70vw;
    }
}


/*  */

.input-style2 input,
.input-style2 textarea {
    background: none;
    font-size: 18px;
    padding: 6px 12px;
    padding-top: 12px;
    display: block;
    width: 100%;
    min-height: 39px;
    border: none;
    border: 0;
    border-bottom: 1px solid #000;
}

.input-style2 textarea {
    padding-top: 10px;
    resize: none;
}

.input-style2 input:hover {
    border-color: blue;
}

.input-style2 input:focus,
.input-style2 textarea:focus {
    outline: none;
    border: 1px solid blue;
    border-radius: 3px;
}

.input-style2 input:focus~label,
.input-style2 input:valid~label,
.input-style2 textarea:focus~label,
.input-style2 textarea:valid~label {
    top: -10px;
    font-size: 100%;
    font-weight: 600;
    color: #000;
    left: 11px;
}

.input-style2 input:focus~.bar:before,
.input-style2 textarea:focus~.bar:before {}

.input-style2 input[type="password"] {
    letter-spacing: 0.3em;
}

.input-style2 .form-group {
    position: relative;
    margin-bottom: 20px;
}

.input-style2 label {
    color: #c6c6c6;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 12px;
    transition: 300ms ease all;
    background-color: #fff;
    padding: 0 2px;
}


/* end */

.info-box1 {
    display: block;
    width: 100%;
}

.info-box1::after {
    clear: both;
    display: block;
    content: "";
}

.info-box1 .info-icon {
    width: 32px;
    float: left;
}

.info-box1 .info-icon img {
    width: 32px;
    display: block;
    margin: 0 auto;
}

.info-box1 .info-text {
    width: calc(100% - 32px);
    float: right;
    padding: 5px;
}


/*__________________END*/


/*____________________________________
// MENU */


/* popup menu */

.popup-menu-container {
    position: relative;
}

.popup-menu {
    display: none;
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    vertical-align: bottom;
    padding: 0 5px;
    margin-top: 25px;
    z-index: 101;
    overflow: auto;
}

.popup-menu:after {
    clear: both;
    display: block;
    content: "";
}


/* .popup-menu li {
    list-style: none;
    float: left;
    margin-right: 2px;
} */

.popup-menu a {
    background: rgba(0, 0, 0, 0.01) !important;
    display: block;
    width: 100%;
    white-space: nowrap;
    padding: 5px;
    font-weight: 700;
    color: #fff;
}

.popup-menu .trash {
    color: #a00;
}

.popup-menu .trash:hover {
    color: #f00;
}

.menu-button {
    /* position: absolute;
    right: 0; */
    padding: 0;
    border: 0;
    min-height: 30px;
    white-space: nowrap;
    box-sizing: border-box;
    font-size: 80%;
    font-weight: normal;
    outline: none;
    background: transparent;
}

.menu-button:hover {}

.menu-button:focus {
    outline: none;
    box-shadow: none;
}

.menu-button .menu-text {
    padding: 0px 6px;
}

.menu-button .btn-icon {
    padding: 3px;
}

.menu-button .btn-icon img {
    width: 32px;
    display: block;
    margin: 0 auto;
}

.dropmenu-visible {
    display: block;
    position: absolute;
    top: 40px;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.4);
    margin-top: 0;
    padding: 0;
    min-width: 130px;
}

.dropmenu-visible li {
    position: relative;
    float: none;
    margin-bottom: 2px;
}

.dropmenu-visible li:last-child {
    margin-bottom: 0;
}

.dropmenu-visible li button {
    display: block;
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 0 12px;
    white-space: nowrap;
    text-align: left;
}

.dropmenu-visible li a {
    text-decoration: none;
    color: #242222;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-weight: normal !important;
}

.dropmenu-visible li:last-child li a {
    border-bottom: 0;
}

.dropmenu-visible li a:hover,
.dropmenu-visible li button:hover,
.dropmenu-visible li a:focus,
.dropmenu-visible li button:focus {
    background: rgba(0, 0, 0, 0.1);
    outline: 0;
}

.dropmenu-visible .menu-icon {
    width: 24px;
    float: left;
}

.dropmenu-visible .menu-icon img {
    width: 18px;
    margin: 0;
}

.dropmenu-visible .menu-text {
    width: calc(100% - 24px);
    float: right;
}

.close-dropmenu {
    display: inline-block;
    border: 0;
    background: rgba(0, 0, 0, 0.05);
    padding: 3px 6px;
    color: red;
}

.close-dropmenu:hover {
    background: rgba(0, 0, 0, 0.1);
}

.close-dropmenu:focus {
    outline: 0;
    box-shadow: none;
}

@media(max-width: 576px) {}


/* end */

.data-actions {
    /*display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;*/
    min-width: 150px;
}

.data-actions .action {
    background: transparent;
    font-weight: 600;
    border: 0;
    border-radius: 5px;
    color: #54a4f2;
    cursor: pointer;
}

.data-actions .trash {
    color: #d22a2a;
}

.data-actions .action-icon {}

.data-actions .action-icon img {
    width: 20px;
}

.data-actions .action-text {}

.data-actions a:after,
.data-actions button:after {
    font-size: 18px;
    content: "|";
    margin-left: 5px;
    margin-right: 2px;
    opacity: 0.2;
    display: inline-block;
    color: #000;
}

.data-actions a:last-child:after,
.data-actions button:last-child:after {
    content: ''
}

.data-actions a:focus,
.data-actions button:focus {
    outline: 0;
}


/*  */

.app-options {}

.app-option {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 30px 10px;
}

.app-option a {
    display: block;
}

.app-option .option-icon {}

.app-option .option-icon img {
    width: 50px;
    display: block;
    margin: 0 auto;
}

.app-option .option-text {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    padding: 10px;
    line-height: 18px;
}


/*end*/


/* full width actions */

.full-width-actions,.full-width-actions ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.full-width-actions::after {
    clear: both;
    display: block;
    content: "";
}

.full-width-actions li {
    float: left;
}

.full-width-actions .action {
    border: none;
    display: block;
    font-weight: 600;
    text-align: center;
    padding: 5px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-right: 0;
    white-space: nowrap;
    cursor: pointer;
}

.full-width-actions.no-bg .action {
    background: transparent;
}

.full-width-actions .action:hover {
    background: rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.full-width-actions .action:focus {
    outline: 0;
}

.full-width-actions.no-bg .action:hover {
    background: transparent;
}

.full-width-actions li:last-child .action {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    ;
}

.full-width-actions.three li {
    width: 33.33333333333333%;
}

.full-width-actions.four li {
    width: 25%;
}

.full-width-actions.two li {
    width: 50%;
}
.full-width-actions.fit-actions li a{
    display: block;
    padding: 0 !important;
}
.full-width-actions.fit-actions.ht35 li a{
    min-height: 35px;
    padding: 6px 12px !important;
}

@media(max-width: 576px) {
    .full-width-actions .btn-icon {}
    .full-width-actions .btn-text {
        display: none;
    }
}


/*mega vertical-menu*/

.dashbard-menu {
    margin: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 90%;
    white-space: nowrap;
    margin-bottom: 20px;
    padding: 5px 15px;
}

.dashbard-menu:hover {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid #d8dfe9;
}

.dashbard-menu-left {
    width: 60px;
    float: left;
}

.dashbard-menu img {
    width: 100%;
}

.dashbard-menu a {
    color: darkgreen;
    font-weight: 700;
}

.dashbard-menu-right {
    width: calc(100% - 60px);
    float: right;
    padding: 5px 15px;
    font-weight: 600;
    font-size: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.dashbard-menu:after {
    clear: both;
    display: block;
    content: "";
}

.dashbard-menu ul {
    padding: 0;
    margin: 0;
}

.dashbard-menu ul li {
    list-style: none;
}

.dashbard-menu ul a {
    font-size: 90%;
    color: blue;
    font-weight: normal;
    font-weight: 600;
}

.dashbard-menu ul.flex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.dashbard-menu ul.flex li:after {
    font-size: 80%;
    content: "|";
    margin-left: 8px;
    margin-right: 8px;
    opacity: 0.2;
    display: inline-block;
}

.dashbard-menu ul.flex li:last-child:after {
    content: ''
}

@media(max-width: 320px) {
    .dashbard-menu-right {
        font-size: 82%
    }
    .dashbard-menu ul a {
        font-size: 70%;
    }
}

.dashboard-section {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left: 0;
    padding: 10px;
    height: 100%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.dashboard-section h1 {
    background: rgba(0, 0, 0, 0.05);
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 0;
    margin-top: -10px;
    padding: 10px;
}

.dashboard-section h2 {
    /* text-decoration: underline; */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dashboard-section h3 {
    margin-left: 15px;
}

.dashboard-section .no-shadow {
    box-shadow: none !important;
}


/*content dropdown*/


/*_________________END*/


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


/*   LIST STYLES
/*------------------------------------------*/


.box-list.style1{
background: #fff;
padding: 15px;
font-size: 100%;
border: 1px solid rgba(0, 0, 0, .1);
}
.box-list.style1 .label-section{
font-weight: 600;
font-family: Arial;
padding-bottom: 6px;
font-size: 130%;
}
.box-list.style1 .label-section:after{
clear: both;
display: block;
content: "";
}
.box-list.style1 .label-section .label-left{
width: 70%;
float: left;
}
.box-list.style1 .label-section .label-right{
width: calc(100% - 70%);
float: right;
text-align: right;
}
.box-list.style1 .label-section .top-text{
display: block;
font-size: 12px;
text-transform: uppercase;
}
.box-list.style1 .label-section .bottom-text{
display: block;
font-weight: 900;
font-family: Arial;
}
.box-list.style1 table td{
padding: 3px 12px;
font-size: 130%;
font-weight: normal;
font-family: Arial;
}
.box-list.style1 table tr td:first-child{

}
.box-list.style1 table tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.03);
}

.box-list.style1 table.bordered-bottom tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.box-list.style1 table.bordered-bottom tr:last-child {
  border-bottom: 0;
}


.list-angle-right,
.list-arrow,
.list-arrow-circle,
.list-check,
.list-check-circle,
.list-checked,
.list-chevron-circle,
.list-circle,
.list-times-circle {
    margin: 0;
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none
}

.list-angle-right.mgn-a0,
.list-arrow.mgn-a0,
.list-arrow-circle.mgn-a0,
.list-check.mgn-a0,
.list-check-circle.mgn-a0,
.list-checked.mgn-a0,
.list-chevron-circle.mgn-a0,
.list-circle.mgn-a0,
.list-times-circle.mgn-a0 {
    margin: 0 0 0 0;
}

.list-angle-right li,
.list-arrow li,
.list-arrow-circle li,
.list-check li,
.list-check-circle li,
.list-checked li,
.list-chevron-circle li,
.list-circle li,
.list-times-circle li {
    padding: 5px 5px 5px 20px;
    position: relative
}

.list-angle-right li:before,
.list-arrow li:before,
.list-arrow-circle li:before,
.list-check li:before,
.list-check-circle li:before,
.list-checked li:before,
.list-chevron-circle li:before,
.list-circle li:before,
.list-times-circle li:before {
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 6px;
    display: block;
    font-size: 15px;
    color: #777
}

.list-circle li:before {
    top: 10px;
    font-size: 10px
}

.list-circle li:before {
    content: "\f111"
}

.list-angle-right li:before {
    content: "\f105"
}

.list-arrow li:before {
    content: "\f0da"
}

.list-check li:before {
    content: "\f00c"
}

.list-checked li:before {
    content: "\f046"
}

.list-check-circle li:before {
    content: "\f058";
}

.find-active-item li.active:before {
    content: "\f058";
    color: #23e409;
}

.find-active-item li.active a {
    color: #23e409;
}

.find-active-item li.inactive:before a,
.find-active-item li.inactive a {
    color: blue;
}

.list-chevron-circle li:before {
    content: "\f138"
}

.list-arrow-circle li:before {
    content: "\f0a9"
}

.list-times-circle li:before {
    content: "\f057"
}

.primary li:before {
    color: #00a3c8
}

.secondry li:before {
    color: #77c04b
}

.black li:before {
    color: #000
}

.white li:before {
    color: #fff
}

.orange li:before {
    color: #f60
}

.green li:before {
    color: #0c0
}

.red li:before {
    color: #ff3737
}

.no-margin {
    margin: 0 0 0!important;
    list-style: none
}

.list-num-count {
    counter-reset: li;
    padding-left: 0
}

.list-num-count>li {
    position: relative;
    margin: 0 0 6px 30px;
    padding: 4px 8px;
    list-style: none
}

.list-num-count>li:before {
    content: counter(li, decimal);
    counter-increment: li;
    position: absolute;
    top: 0;
    left: -28px;
    width: 28px;
    height: 28px;
    padding: 5px;
    color: #fff;
    background: #efbb20;
    font-weight: 700;
    text-align: center;
    font-size: 12px;
    -webkit-border-radius: 100px;
    border-radius: 100px
}

.list-num-count.lower-alpha>li:before {
    content: counter(li, lower-alpha)
}

.list-num-count.upper-alpha>li:before {
    content: counter(li, upper-alpha)
}

/**/
/*   ICON STYLES
/*------------------------------------------*/

.icon-box.style1{
    display: block;
    width: 100%;
    padding: 5px;
    vertical-align: middle;
    background: red;
}
.icon-box.style1 .icon{
    display: block;
    text-align: center;
}
.icon-box.style1 .desc{
    display: block;
    text-align: center;
    padding-top: 10px;
}
.icon-list-box.style1 {
    display: block;
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 5px 15px;
    margin: 10px;
}

.icon-list-box.style1:after {
    clear: both;
    display: block;
    content: "";
}

.icon-list-box.style1 .icon-box {
    width: 40px;
    float: left;
    padding-top: 3px;
}

.icon-list-box.style1 .desc-box {
    width: calc(100% - 40px);
    float: right;
    font-size: 120%;
    line-height: 26px;
}

/**/
/*iconic*/
.iconic-list.style1{
    display: block;
    margin-top: 5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.iconic-list.style1.add-bg{
    background: rgba(255, 255, 255, .5);
    padding: 15px;
}
.iconic-list p{
    margin: 0 !important;
    padding: 0 !important;
}
.iconic-list.style1:after{
    clear: both;
    display: block;
    content: "";
}
.iconic-list.style1 .icon-box{
    width: 40px;

}
.iconic-list.style1 .icon-box img{
    width: 100%;
    max-width: 32px;
}
.iconic-list.style1 .icon-box i{
    font-size: 26px !important;
    vertical-align: middle;

}

.iconic-list.style1 .icon-box i.fa-3x{
    font-size: 50px !important;

}
.iconic-list.style1 .desc-box{
    width: calc(100% - 40px);
}

.iconic-list.style1.iw-50 .icon-box{
    width: 50px;
    padding: 0;
    padding-bottom: 8px;
    text-align: center;
}
.iconic-list.style1.iw-50 .desc-box{
    width: calc(100% - 50px);
}

.iconic-list.style1.iw-55 .icon-box{
    width: 55px;
}
.iconic-list.style1.iw-55 .desc-box{
    width: calc(100% - 55px);
}

.iconic-list.style1.iw-60 .icon-box{
    width: 60px;
}
.iconic-list.style1.iw-60 .desc-box{
    width: calc(100% - 60px);
}

.iconic-list.style1.iw-70 .icon-box{
    width: 70px;
}
.iconic-list.style1.iw-70 .desc-box{
    width: calc(100% - 70px);
}

.iconic-list.style1.iw-80 .icon-box{
    width: 80px;
}
.iconic-list.style1.iw-80 .desc-box{
    width: calc(100% - 80px);
}

.iconic-list.style1.iw-90 .icon-box{
    width: 90px;
}
.iconic-list.style1.iw-90 .desc-box{
    width: calc(100% - 90px);
}

.iconic-list.style1.iw-100 .icon-box{
    width: 100px;
}
.iconic-list.style1.iw-100 .desc-box{
    width: calc(100% - 100px);
}

/*vertical list styles*/
.v-list,.v-list ul{
    margin: 0;
    padding: 0;
}
.v-list li{
    list-style: none;
}
.v-list li a{
    display: block;
    padding: 6px 12px;
    background: inherit;
    margin-top: 3px;
    color: inherit;
    line-height: 18px;
}
.v-list li a:hover{
    color: green;
}
.v-list li.has-icon a{
    display: flex;
}
.v-list li.has-icon a .list-icon{
    width: 32px;
}
.v-list li.has-icon a .list-text{
    width: calc(100% - 32px);
}
.v-list.white li a{
    background: #fff;
}
.v-list.add-bottom-border li a{
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding: 6px 12px;
}
.v-list.add-bottom-border li:last-child a{
    border-bottom: 0;
}

/* -------------------------------------
   DROP DOWN STYLES
---------------------------------------*/

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    z-index: 999999;
}

.dropdown-content.top-offset35 {
    top: 25px !important;
}

.dropdown-content.content-left {
    left: 5px;
}

.dropdown-content.content-right {
    right: 5px;
}

.dropdown:hover .dropdown-content {
    top: 100%;
    display: block;
}

.dropdown-content:before {
    content: "";
    position: absolute;
    right: 11px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent #fff transparent;
    z-index: 999999;
}

.dropdown-content.pointer-left:before {
    left: 11px;
}

.dropdown:hover .dropdown-content:before {
    border-width: 0 10px 10px 10px;
}


/* -------------------------------------
   TILE DATA
---------------------------------------*/

#tabular_data {
    display: block;
}

#tiled_data {
    display: none;
}

.tile-data {
    position: relative;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, .3);
    background: #fff;
    border-radius: 3px;
    padding: 5px;
}

.tile-data .tile-checkbox {
    position: absolute;
    top: -8px;
    left: -4px;
}

.tile-data .tile-checkbox input {
    outline: none;
}

.tile-data .data-area {
    padding: 15px;
    padding-top: 8px;
}

.tile-data:after {
    clear: both;
    display: block;
    content: "";
}

.tile-data table tr td:first-child {
    padding-left: 0;
}

.tile-data table tr td {
    padding-top: 0;
    padding-bottom: 0;
}

.title1 {
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: 130%;
}

.title2 {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: 115%;
}

@media(max-width: 576px) {
    #tabular_data.sm-hide {
        display: none;
    }
    #tiled_data.sm-show {
        display: block;
    }
}


/*//////////////////////////////
/*person profile*/

.person-profile {
    position: relative;
    /* margin: 5px;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.03); */
}

.person-profile.no-bg {
    background: transparent;
    border: 0;
}

.person-profile .tile-checkbox {
    position: absolute;
    top: 0;
    left: 2px;
}

.person-profile .label {
    font-weight: 600;
    text-transform: capitalize;
}

.person-profile .person-photo {
    width: 160px;
    float: left;
}

.person-profile .person-info {
    width: calc(100% - 160px);
    float: right;
    padding: 0 15px;
}

.person-profile .person-photo img {
    width: 100%;
    max-width: 150px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.3);
}

.person-profile .names {
    font-size: 110%;
    font-weight: 700;
    text-transform: capitalize;
}

.person-profile:after {
    clear: both;
    display: block;
    content: "";
}

.person-profile table tr td {
    padding: 0 12px;
}

.person-profile table tr td:first-child {
    padding-left: 0;
}

@media(max-width: 480px) {
    .person-profile .person-photo {
        width: 100%;
        float: none;
    }
    .person-profile .person-info {
        width: 100%;
        float: none;
        padding-top: 8px;
    }
    .person-profile .names {
        text-align: center;
    }
}


/*___________end*/


/*load more*/

.data-pager-bar {
    padding: 0 15px;
    height: 35px;
    margin-top: 5px;
    /*position: absolute;
    bottom: 0;
    left: 0;
    right: 0;*/
}

.data-pager-bar .pager-bar-left {
    width: 50%;
    float: left;
}

.data-pager-bar .pager-bar-right {
    width: calc(100% - 50%);
    float: right;
}

.data-pager-bar:after {
    clear: both;
    display: block;
    content: "";
}

.pager-limiter-container {
    float: right;
    margin-top: 3px;
}

.pager-limiter {
    width: calc(100% - 130px);
    float: left;
    padding: 0 15px;
}

.pager-limiter select {
    height: 28px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.pager-limiter select:focus {
    outline: 0;
}

.next-prev-controls {
    width: 130px;
    float: right;
}

.next-prev-controls a {
    font-weight: 600;
    display: inline-block;
    background: rgba(0, 0, 0, 0.02);
    padding: 0 5px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 80%;
}

.next-prev-controls a:first-child {
    margin-right: 5px;
}


/**/


/**/

.load-more-container {
    margin: 15px;
}

.load-more {
    width: 150px;
    height: 35px;
    background: #cfe2eb;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #aecddd;
    text-align: center;
    border-radius: 100px;
}

.load-more a {
    padding: 5px 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

.load-more a:hover {
    text-decoration: none;
}

.load-more img {
    display: block;
    width: 120px;
    margin: 0 auto;
    margin-top: -12px;
}

@media(max-width: 991px) {
    .data-pager-bar .pager-bar-left {
        width: 100%;
    }
    .data-pager-bar .pager-bar-right {
        display: none;
    }
}

.more-button {
    display: inline-block;
    font-weight: bold;
    color: #00f;
    background: rgba(0, 0, 0, 0.04);
    padding: 5px 10px;
}

.more-button i {
    vertical-align: middle;
}

.more-button:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}


/*end*/


/*___________________________________
//  GRADING SYSTEM*/

.grading-system {
    min-width: 768px;
    max-width: 768px;
    margin: 3%;
}

.grading-system .grades {
    border-bottom: 1px solid #fff;
}

.grading-system .grades td {
    font-weight: 800;
}

.grading-system .thead {
    font-weight: 800;
    text-align: center;
}

.grading-system .data-label {
    font-weight: 800;
    text-align: left;
}

.grading-system table {
    white-space: nowrap;
}

.grading-system table td {
    text-align: center;
    padding: 6px 12px;
}

.grading-system .score-inputs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
    width: 94px;
    height: 29px;
    padding: 1px;
    border: 1px solid #0a0;
}

.grading-system input {
    width: 40px;
    height: 25px;
    padding: 0 5px;
    text-align: center;
    border: 0;
}

.grading-system .score-inputs label {
    width: 10px;
}

.grading-system .aggregates input,
.pass-mark input {
    width: 100%;
    text-align: center;
    border: 0;
}

.grading-system input:focus {
    outline: 0;
}


/* setup */

.setup-section {
    padding: 5px;
    margin-bottom: 10px;
}

.setup-section.add-bg {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-color: rgba(0, 0, 0, 0.02);
}

.setup-header .setup-title {
    font-size: 100%;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.setup-control {
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

.setup-body {}

.setup-body p {
    margin: 0;
    padding: 0;
    line-height: 24px;
}

.setup-body table th {
    white-space: nowrap;
}

.setup-body table.bordered-bottom tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.setup-body table th,
.setup-body table td {
    padding: 5px 15px;
    vertical-align: top;
}

.setup-body table th,
.setup-body table td:first-child {
    padding-left: 0 !important;
}

.setup-body table.striped {
    border: 1px solid rgba(0, 0, 0, .1);
}

.setup-body table.striped th,
.setup-body table.striped td {
    border: 1px solid rgba(0, 0, 0, .1);
}

.setup-body table.striped th,
.setup-body table.striped td:first-child {
    padding: 5px 15px !important;
}

.setup-body table.bordered-bottom tr:last-child {
    border-bottom: 0;
}

.setup-body table.bordered-bottom {
    border-collapse: collapse;
}

.action-button {
    background: transparent;
    border: 1px solid transparent;
    border: 0;
    outline: 0;
    font-weight: 600;
    padding: 5px;
}

.action-button:focus {
    outline: 0;
    box-shadow: none;
    border: 0;
}

@media(max-width: 575px) {
    .action-button .button-text {
        display: none;
    }
}


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


/*   USER INFO STYLES
/*------------------------------------------*/


/* .user-info {
    max-width: 250px;
    white-space: nowrap;
    height: 40px;
}

.user-info:after {
    clear: both;
    display: block;
    content: "";
}

.user-photo {
    width: 30px;
    float: left;
    height: inherit;
}

.user-photo img {
    width: 30px;
    max-width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 2px solid #bbb;
}

.user-particulars {
    width: calc(100% - 30px);
    float: right;
    height: inherit;
    padding: 0 5px;
    text-transform: uppercase;
}

.user-name {
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: 70%;
    text-overflow: ellipsis;
    overflow: auto;
}

.user-designation {
    display: block;
    width: 100%;
    font-size: 60%;
    text-overflow: ellipsis;
    overflow: auto;
    opacity: 0.7;
} */

.user-info.style2 {
    height: auto;
    max-width: 100%;
    color: #242222;
    max-width: 250px;
    white-space: nowrap;
    height: 40px;
}

.user-info.style2:after {
    clear: both;
    display: block;
    content: "";
}

.user-info.style2 .user-photo {
    width: 50px;
    float: left;
    height: inherit;
}

.user-info.style2 .user-photo img {
    width: 100%;
    max-width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 2px solid #bbb;
}

.user-info.style2 .user-particulars {
    width: calc(100% - 50px);
    float: right;
    padding: 0 20px;
    text-transform: uppercase;
}

.user-info.style2 .user-particulars .user-name {
    font-size: 100%;
    display: block;
    width: 100%;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: auto;
}

.user-info.style2 p {
    text-transform: capitalize;
}

.user-info.style2 p.email {
    text-transform: lowercase;
}


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


/*   PAYMENT STYLES
/*------------------------------------------*/

.visa {
    width: 250px;
    max-width: 250px;
}

.visa-payment {
    padding: 15px;
    width: 100%;
    border-radius: 8px;
}

.visa-payment input::-moz-placeholder {
    color: #555;
    opacity: 1;
}

.visa-payment input:-ms-input-placeholder {
    color: #555;
    opacity: 1;
}

.visa-payment input::-webkit-input-placeholder {
    color: #555;
    opacity: 1;
}

.month-input {
    /* width: 80px;
    max-width: 80px; */
}

.year-input {
    /* width: 90px;
    max-width: 90px; */
}

.cvv {
    width: 60px;
    max-width: 60px;
}

.cvv-container {}

.cvv-container:after {
    clear: both;
    display: block;
    content: "";
}

.cvv-container .cvv-left {
    width: 60px;
    float: left;
}

.cvv-container .cvv-right {
    width: calc(100% - 60px);
    float: right;
}

.cvv-container .cvv-right img {
    max-width: 80px;
    display: block;
    margin: 15px;
    margin-top: 20px;
}


/* transaction info */

.transaction-info {
    display: block;
    max-width: 320px;
    margin: 10% auto;
    border-radius: 10px;
    background: #fff;
}

.transaction-info .info-title {
    font-weight: 800;
    font-size: 130%;
    text-align: center;
    margin-bottom: 15px;
    line-height: 24px;
    padding-bottom: 15px;
}

.transaction-info .info-title.add-divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.transaction-info p {}

.transaction-info .icon-box {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background: #fff;
    /* border: 1px solid #bbb; */
    border-radius: 50%;
    padding: 2px;
    padding-top: 4px;
    box-sizing: border-box;
    margin-top: -30px;
}

.transaction-info .icon-box img {
    display: block;
    width: 50px;
    margin: 0 auto;
}

.transaction-info .details-box {
    display: block;
    width: 100%;
    padding: 15px;
}

.transaction-info.callelled {
    border: 5px solid #f9c700;
}

.transaction-info.errorbox {
    border: 5px solid #cb3332;
}

.transaction-info.successful {
    border: 5px solid #00d219;
}


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


/*   CARD STYLES
/*------------------------------------------*/

.card {}

.card-header {
    padding: 0;
}

.card-header::after {
    clear: both;
    display: block;
    content: "";
}

.card-header .card-title {
    margin: 0 !important;
    padding: 5px 15px;
    font-size: 110% !important;
    font-weight: normal ;
}

.card-header-left {
    width: calc(100% - 100px);
    float: left;
}

.card-header-right {
    width: 100px;
    float: right;
}

.card-header-right a {
    font-weight: 900;
}

.card-body {
    overflow: auto;
    padding: 6px 12px;
}

.card-body table th,
.card-body table td {
    padding: 5px 15px;
}

.card-body .default-table th,
.card-body .default-table td:first-child {
    padding-left: 0 !important;
}
.card table.striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border: 0;
}

.card-footer {
    padding: 3px 15px;
}

.card.dark,
.card.dark a {
    color: #fff;
}

.card.style1 {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.card-body .details-section {
    width: calc(100% - 70px);
    float: left;
}

.card-body .icon-section {
    width: 70px;
    float: right;
}

.card-body:after {
    clear: both;
    display: block;
    content: "";
}


/*card style3*/
.card.style3{
    background: #f5f3f3 !important;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, .2);
    position: relative;
}
.card.style3 .c-header{
    padding: 2px;
    border: 1px solid rgba(0, 0, 0, .1);
}
.card.style3 .c-title{
    text-transform: capitalize;
    font-size: 100% !important; 
    font-weight: 600;
    margin-bottom: 0 !important;
    background-color: rgba(0,0,0,.1);
    padding: 4px 12px;
    display: block;
    width: 100%;

}
.card.style3 .c-inner-header{
    display: flex;
    background-color: rgba(0,0,0,.1);
}
.card.style3 .c-inner-header .c-title{
    background-color: transparent;
}
.card.style3 .c-inner-header .title-section{
    width: 80%;
}
.card.style3 .c-inner-header .actions-section{
    width: 20%;
}
.card.style3 .c-body{
/*    border: 1px solid rgba(0, 0, 0, .1);*/
    position: relative;
    padding-bottom: 30px;
    overflow: auto;
    box-sizing: border-box;
    margin-bottom: 30px;
}
.card.style3 .c-body .border-box{
    border: 1px solid rgba(0, 0, 0, .2);
}
.card.style3 .c-body.no-margin{
    margin-bottom: 0px;
}
.card.style3 .c-body.add-padding{
    padding: 0 15px;
}
.card.style3 .c-body.padding-top15{
    padding-top: 15px !important;
}
.card.style3 .c-body.no-bottom-padding{
    padding-bottom: 0;
}

.card.style3 .c-body.add-bg{
    background: rgba(0, 0, 0, .05);
    padding: 15px;
}
.card.style3 .c-body .block-link{
    display: block !important;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 20px;
    color: #000;
}
.card.style3 .c-body .details-section {
    width: calc(100% - 70px);
    float: left;
}

.card.style3 .c-body .icon-section {
    width: 70px;
    float: right;
}

.card.style3 .c-body:after {
    clear: both;
    display: block;
    content: "";
}
.card.style3 .data-block{
    padding-top: 10px;
    margin: 0;
    padding: 5px;
}
.card.style3 .data-block.add-bg{
    background-color: rgba(255, 255, 255, .3);
    padding: 0 15px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 10px;
}
.card.style3 .data-block label{
    text-transform: uppercase;
    display: block;
    width: 100%;
    margin-bottom: 0;
    font-size: 70%;
    font-weight: 900;
    font-family: Tahoma;
}
.card.style3 .data-block .sub-text{
    font-size: 80%;
    font-weight: 600;
}
.card.style3 .data-block .fs-4{
    font-size: 26px !important;
    font-weight: 600;
}
.card.style3 .data-block .fs-5{
    font-size: 20px !important;
    font-weight: 600;
}
.card.style3 .data-block label.green{
    color: green !important;
}
.card.style3 .data-block label.brown{
    color: brown !important;
}
.card.style3 .data-block label.orange{
    color: orange !important;
}
.card.style3 .data-block label.blue{
    color: blue !important;
}
.card.style3 .data-block label.purple{
    color: purple !important;
}
.card.style3 .data-block label.darkblue{
    color: darkblue !important;
}
.card.style3 .data-block label.add-bg{
    background: purple;
    color: #fff !important;
    display: inline-block !important;
    width: auto;
/*    font-weight: 400;*/
    padding: 0 12px;
}
.card.style3 .data-block label.add-bg.blue{
    background: blue;
}
.card.style3 .data-block label.add-bg.brown{
    background: brown;
}
.card.style3 .data-block label.add-bg.orange{
    background: orange;
}
.card.style3 .data-block label.add-bg.green{
    background: green;
}
.card.style3 .data-block .details{
    text-transform: uppercase;
    display: block;
    width: 100%;
}
.card.style3 .data-block .details p{
    line-height: 18px;
}
.card.style3 .data-block{
    
}
.card.style3 .c-footer{
    padding: 4px 12px;
    font-size: 90%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35px;
    background: rgba(0, 0, 0, .05);
}
.card.style3 .c-footer.has-full-width-actions{
    padding: 0 !important;
}
.card.style3 .c-footer a{
    font-size: 90%;
    font-weight: 600;
}
.card.style3  table{
    margin: 0;
    margin-bottom: 5px;
}
.card.style3  table th{
    text-align: left;
}
.card.style3  table th,
.card.style3  table td {
    padding: 5px 12px !important;
    vertical-align: top;
}

.card.style3 th,
.card.style3 td:first-child {

}
.card.style3  table.striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border: 0;
}

.card.style3  table.striped tbody tr.stripless:nth-of-type(odd) {
  background-color: transparent !important;
  border: 0;
}
.card.style3  table.striped tbody tr.stripless td {
  border: 0;
}
.card.style3  table.bordered{
    border-collapse: collapse;
}
.card.style3  table.bordered th,
.card.style3  table.bordered td{
    border: 1px solid rgba(0, 0, 0, .1);
}

/**/
.section-style1{
    /*border: 3px solid #000;
    padding: 0 15px;
    padding-bottom: 15px;*/
}
.section-style1.add-top-seperator{
    padding-top: 15px;
    border-top: 10px dashed rgba(0, 0, 0, .1);
}
.section-style1 .section-title{
    /*background: #000;
    color: #fff;
    padding: 5px 15px;*/
    margin-bottom: 0 !important;
    text-transform: uppercase;
    font-family: Tahoma;
}

/**/


.title-section.style1{

}
.title-section.style1 .divider {
  display: flex;
}
.title-section.style1 .divider:before, 
.title-section.style1 .divider:after {
  content: "";
  flex: 1;
}
.title-section.style1 .razor:before, 
.title-section.style1 .razor:after {
  box-shadow: 0 0.5px 0px #ff7f00;
}


.title-section.style1 .line {
  align-items: center;
  margin: 1em -1em;
}
.title-section.style1 .line:before, 
.title-section.style1 .line:after {
  height: 1px;
  margin: 0 1em;
}

.title-section.style1 .title{
    font-weight: 700;
    text-transform: uppercase;
    color: #ff7f00;
    font-family: Tahoma;
}

.title-section.style1 .title.fs-0{
    font-size: 100% !important;
}
.title-section.style1 .title.no-margin{
    margin-top: 0;
    margin-bottom: 0;
}
/*purple*/
.title-section.style1.purple .razor:before, 
.title-section.style1.purple .razor:after {
  box-shadow: 0 0.5px 0px purple;
}
.title-section.style1.purple .title{
    color: purple;
}

/*purple*/
.title-section.style1.green .razor:before, 
.title-section.style1.green .razor:after {
  box-shadow: 0 0.5px 0px green;
}
.title-section.style1.green .title{
    color: green;
}

/*purple*/
.title-section.style1.cyan .razor:before, 
.title-section.style1.cyan .razor:after {
  box-shadow: 0 0.5px 0px cyan;
}
.title-section.style1.cyan .title{
    color: cyan;
}


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


/*   ZOOMER STYLES
/*------------------------------------------*/

.zoomer {
    width: 100%;
    min-width: 80px;
    height: 25px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.zoomer label {
    height: 25px;
    padding: 0 6px 5px;
    font-weight: 600;
}

.zoomer input {
    font-size: 12px;
    height: 25px;
}

.zoomer-btn:hover {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.zoomout-btn {
    cursor: zoom-out;
}

.zoomin-btn {
    cursor: zoom-in;
}

#zoompct {
    width: 45px;
    font-size: 12px;
    height: 25px;
    text-align: center;
    font-weight: 700;
    padding-top: 5px;
}


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


/*   LOAN STATEMENT STYLES
/*------------------------------------------*/

.statement {
    width: 100%;
    max-width: 8.27in;
    min-width: 8.27in;
    margin: 15px auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.5in;
    background: #fff;
}

.statement.no-mw {
    min-width: 100%;
    max-width: 8.27in;
}

.statement.full-width {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin: 15px auto;
    border: 0;
    padding: 0;
}

.statement .printable-content-heading {
    text-align: center;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    margin: 20px;
    margin-left: 0;
    margin-right: 0;
    display: block !important;
    border-bottom: 3px solid rgba(0, 0, 0, 0.5);
    padding: 5px;
}

.statement .printable-content-heading2 {
    font-size: 16px;
    font-weight: 700;
    margin: 10px;
    margin-top: 30px;
    text-transform: uppercase;
}

.statement table {
    white-space: nowrap;
}

.statement .total {
    font-weight: 800;
}

.statement table thead.add-thead-bg {
    background: rgba(0, 0, 0, 0.05);
}

.statement table thead,
.statement table .thead {
    white-space: nowrap;
    font-weight: 900;
}

.statement table thead.add-bg,
.statement table .thead.add-bg {
    background: #f1a3a3;
}

.statement table tr.total {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.03);
}

.statement .profile-photo {
    width: 192px;
    height: 192px;
    border: 3px dashed rgba(0, 0, 0, 0.07);
    padding: 1px;
    overflow: hidden;
}

.statement .profile-photo img {
    display: block;
    max-width: 192px;
    margin: auto auto;
    border: 3px solid rgba(0, 0, 0, 0.2);
}

.statement .bordered-outer {
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.statement table.bordered {
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-collapse: collapse;
}

.statement table.bordered tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.statement table.add-vborder td {
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.statement table td,
.statement table th {
    padding: 3px 12px;
    vertical-align: top;
}

.statement table .pdg-a0 {
    padding: 0 !important;
}


/*  */

.signatories {
    display: none;
}

.signatories .title {
    font-weight: 900;
    border-bottom: 1px solid #000;
    margin-bottom: 25px;
    margin-top: 25px;
}

.signatories .signatory {
    margin-bottom: 25px;
}

.signatories .signatory .signatory-title {
    display: block;
    width: 100%;
    font-weight: 700;
    font-style: capitalize;
    /* margin-left: 15px; */
}

.label-line {
    display: block;
    min-height: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.label-line:after {
    clear: both;
    display: block;
    content: "";
}

.label-line .label {
    font-weight: 600;
    width: 250px;
    float: left;
    padding-top: 5px;
}

.label-line .line {
    width: calc(100% - 250px);
    float: right;
    height: 25px;
    border-bottom: 1px dashed #000;
}

.dashed-line {
    display: block;
    height: 25px;
    border-bottom: 1px dashed #000;
}

.inline-dashed-line {
    display: inline-block;
    height: 25px;
    min-height: 25px;
    border-bottom: 1px dashed #000;
    min-width: 180px;
    margin-left: 15px;
    margin-right: 15px;
    /* margin-bottom: 5px;
    margin-top: -15px; */
}


/*  */

.label-line.lw60 .label {
    width: 60px;
}

.label-line.lw60 .line {
    width: calc(100% - 60px);
}

.label-line.lw80 .label {
    width: 80px;
}

.label-line.lw80 .line {
    width: calc(100% - 80px);
}

.label-line.lw100 .label {
    width: 100px;
}

.label-line.lw100 .line {
    width: calc(100% - 100px);
}


/*  */

.label-line.lw120 .label {
    width: 120px;
}

.label-line.lw120 .line {
    width: calc(100% - 120px);
}


/*  */

.label-line.lw130 .label {
    width: 130px;
}

.label-line.lw130 .line {
    width: calc(100% - 130px);
}


/*  */

.label-line.lw140 .label {
    width: 140px;
}

.label-line.lw140 .line {
    width: calc(100% - 140px);
}


/*  */

.label-line.lw150 .label {
    width: 150px;
}

.label-line.lw150 .line {
    width: calc(100% - 150px);
}

.signatories table td {
    padding: 0 15px;
}

.statement table.no-lw th,
.statement table.no-lw td:first-child {
    padding-left: 0 !important;
}

.statement table.no-lw tr th,
.statement table.no-lw tr td:last-child {
    padding-right: 0 !important;
}


/*  */

.bio-section {
    display: block;
}

.bio-section::after {
    clear: both;
    display: block;
    content: '';
}

.bio-section .photo-area {
    width: 240px;
    float: left;
    background: rgba(0, 0, 0, 0.05);
    padding: 10px;
    text-align: center;
}

.bio-section .names-area {
    width: calc(100% - 240px);
    float: right;
    padding: 10px;
}

.bio-section .photo-area .image_area {
    display: block;
    max-width: 240px;
    margin: 0 auto;
}

@media(max-width: 768px) {
    .bio-section .photo-area,
    .bio-section .names-area {
        width: 100%;
        float: none;
    }
}


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

.verification-options {
    padding: 0;
    margin: 0;
}

.verification-options li {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 10px;
    padding: 6px 12px;
}

.verification-options li:hover,
.verification-options li:focus {
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: green;
}


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


/*   COLUMNS STYLES
/*------------------------------------------*/

.cols {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.cols span {
    padding: 0 15px;
}

.col1 {
    width: 12.5%;
}

.col2 {
    width: 25%;
}

.col3 {
    width: 37.5%;
}

.col4 {
    width: 50%;
}

.col5 {
    width: 62.5%;
}

.col6 {
    width: 75%;
}

.col7 {
    width: 87.5%;
}

.col8 {
    width: 100%;
}

.padded .col1,
.padded .col2,
.padded .col3,
.padded .col4,
.padded .col5,
.padded .col6,
.padded .col7,
.padded .col8 {
    padding: 0 15px;
}


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


/*   COMMING SOON STYLES
/*------------------------------------------*/

.coming-soon {}

.coming-soon .title {
    font-weight: 600;
    font-size: 110%;
    line-height: 26px;
    margin-bottom: 15px;
}

.coming-soon p {
    font-weight: 600;
    font-size: 110%;
}


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


/*   CHAT STYLES
/*------------------------------------------*/

.chat-button-container {
    position: fixed;
    right: 25px;
    bottom: 16px;
    background: transparent;
}

.chat-button {
    display: inline-block;
    border-color: transparent;
    padding: 1px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-weight: 700;
    cursor: pointer;
    outline: 0;
}

.chat-button img {
    max-width: 50px;
    display: block;
    margin: 0 auto;
}

.chat-button:hover {
    color: #fff;
}

@media(max-width: 576px) {
    .chat-button-container {
        right: 0;
        bottom: 16px;
    }
    .chat-button {
        display: block;
        margin: 0 auto;
    }
}

.chat-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    overflow: hidden;
    padding: 30px;
    box-sizing: border-box;
}

.chat-popup-content {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 576px;
    height: 70%;
    min-height: 250px;
    border: 3px solid gray;
    background: #fff;
    color: #666666;
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.chat-popup-header {
    position: absolute;
    top: 0;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    height: 30px;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
    color: #000;
}

.chat-popup-header:after {
    clear: both;
    display: block;
    content: "";
}

.chat-popup-title {
    width: calc(100% - 35px);
    float: left;
    padding: 3px 15px;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
}

.chat-popup-close {
    width: 35px;
    float: right;
    height: 28px;
    font-size: 16px;
    padding: 2px 11px;
    background: #a00;
    color: #fff;
}

.chat-popup-close:hover {
    background: red;
    cursor: pointer;
}

.chat-popup-body {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 50px;
    padding: 10px 15px;
    overflow: auto;
    box-shadow: 0 0 1px rgba(0, 0, 50, 1) inset;
}

.chat-popup-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.chat-input {
    width: calc(100% - 60px);
    float: left;
}

.chat-send-button {
    width: 60px;
    float: right
}

.chat-send-button button {
    border: 1px solid transparent;
    background: #db690d;
    color: #fff;
    font-weight: 700;
    width: 100%;
    height: 50px;
    outline: 0;
    font-size: 80%;
}

.chat-send-button button:hover {
    background: #f6740b;
    cursor: pointer;
}

.chat-send-icon {
    display: block;
    width: 100%;
}

.chat-send-icon img {
    width: 24px;
    display: block;
    margin: 0 auto;
}

.chat-send-text {
    display: block;
    width: 100%;
    text-align: center;
}

.chat-input textarea {
    resize: none;
    width: 100%;
    height: 50px;
    border: 1px solid #db690d;
    padding: 10px 20px;
    line-height: 12px;
    font-size: 80%;
}

.chat-input textarea:focus {
    outline: 0;
}

@media(max-width: 576px) {
    .chat-popup-content {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 100%;
        height: 100%;
    }
}


/*   COMMENT STYLES
/*------------------------------------------*/

.comments-list {
    display: block;
}

.comments-list-item {
    background: rgba(0, 0, 0, 0.04);
    margin-top: 2px;
    padding: 6px 12px;
    line-height: 24px;
}

.comments-list-item .data-actions {
    float: left;
}

.comments-list-item::after {
    clear: both;
    display: block;
    content: "";
}

.comments-list-item p {
    margin: 0;
    line-height: 24px;
}

.comment-author {
    font-style: italic;
    font-size: 82%;
    color: brown;
    float: right;
}


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


/*   MESSAGE(S) STYLES
/*------------------------------------------*/

.message-list {}

.message-list-item {
    background: rgba(0, 0, 0, 0.05);
    margin-bottom: 2px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
}

.message-heading {
    font-size: 110%;
    font-weight: 600;
    margin-top: 20px;
}

.message-list .no-bg {
    background: transparent;
    border-color: transparent;
}

.message-list-item .icon-section {
    width: 50px;
    float: left;
}

.message-list-item .icon-container {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    text-align: center;
    border: 2px solid burlywood;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 255, 0.8);
}

.message-list-item .icon-container .text-icon {
    display: block;
    font-weight: 700;
    font-size: 26px;
    color: burlywood;
    text-transform: uppercase;
}

.message-list-item .icon-container img {
    width: 100%;
    margin: 0 auto;
}

.message-list-item .message-body {
    width: calc(100% - 50px);
    float: right;
    padding: 0 15px;
}

.message-list-item .message-subject {
    display: block;
    width: 100%;
    font-weight: 600;
}

.message-list-item .message-intro {
    display: block;
    width: 100%;
}

.sender-info {
    display: block;
    width: 100%;
    font-size: 80%;
    color: green;
}

.timestamp {
    font-style: italic;
    color: brown;
}

.message-list-item .sender-name {}

.message-list-item .bold {
    font-weight: 600;
}

.message-list-item::after {
    clear: both;
    display: block;
    content: "";
}

.message-actions {
    padding: 5px;
}

.message-actions button,
.message-actions a {
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 3px 15px;
    color: blue;
    border-radius: 7px;
}

.message-actions .trash {
    color: red;
}

.message-actions button:hover,
.message-actions a:hover {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.message-reply-list {
    border-left: 5px solid rgba(0, 0, 0, 0.1);
    padding-left: 15px;
    margin-left: 10px;
}

.reply-list-item {
    margin-bottom: 15px;
}

.reply-list-item::after {
    clear: both;
    display: block;
    content: "";
}

.message-reply {
    display: block;
    width: 100%;
}

.list-num {
    width: 25px;
    float: left;
    text-align: center;
    color: green;
    font-weight: 600;
}

.list-content {
    width: calc(100% - 25px);
    float: right;
    padding-left: 5px;
}

.list-num .num-circular {
    width: 25px;
    height: 25px;
    display: inline-block;
    width: 100%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@media(max-width: 576px) {
    .message-list-item .message-subject {}
    .message-list-item .message-intro {}
}


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


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


/*   BREADCRUMB STYLES
/*------------------------------------------*/

.breadcrumb {}

.breadcrumb ol,
.breadcrumb ul {
    margin: 0;
    padding: 0;
}

.cd-breadcrumb,
.cd-multi-steps {
    width: 100%;
    padding: 0;
    margin: 0;
}

.cd-breadcrumb:after,
.cd-multi-steps:after {
    content: "";
    display: table;
    clear: both;
}

.cd-breadcrumb li,
.cd-multi-steps li {
    display: inline-block;
    float: left;
}

.cd-breadcrumb li a,
.cd-multi-steps li a {
    color: blue;
}

.cd-breadcrumb li::after,
.cd-multi-steps li::after {
    /* this is the separator between items */
    display: inline-block;
    content: '\00bb';
    margin: 0 .6em;
    color: #959fa5;
}

.cd-breadcrumb li:last-of-type::after,
.cd-multi-steps li:last-of-type::after {
    /* hide separator after the last item */
    display: none;
}

.cd-breadcrumb li>*,
.cd-multi-steps li>* {
    /* single step */
    display: inline-block;
    font-size: 90%;
    color: #2c3f4c;
}

.cd-breadcrumb li.current>*,
.cd-multi-steps li.current>* {
    /* selected step */
    color: #96c03d;
}

.no-touch .cd-breadcrumb a:hover,
.no-touch .cd-multi-steps a:hover {
    /* steps already visited */
    color: #96c03d;
}

.cd-breadcrumb.custom-separator li::after,
.cd-multi-steps.custom-separator li::after {
    /* replace the default arrow separator with a custom icon */
    content: '';
    height: 16px;
    width: 16px;
    background: url(../img/cd-custom-separator.svg) no-repeat center center;
    vertical-align: middle;
}

.cd-breadcrumb.custom-icons li>*::before,
.cd-multi-steps.custom-icons li>*::before {
    /* add a custom icon before each item */
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: .4em;
    margin-top: -2px;
    background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
    vertical-align: middle;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2)>*::before,
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(2)>*::before {
    /* change custom icon using image sprites */
    background-position: -20px 0;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3)>*::before,
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(3)>*::before {
    background-position: -40px 0;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4)>*::before,
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(4)>*::before {
    background-position: -60px 0;
}

.cd-breadcrumb.custom-icons li.current:first-of-type>*::before,
.cd-multi-steps.custom-icons li.current:first-of-type>*::before {
    /* change custom icon for the current item */
    background-position: 0 -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(2)>*::before,
.cd-multi-steps.custom-icons li.current:nth-of-type(2)>*::before {
    background-position: -20px -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(3)>*::before,
.cd-multi-steps.custom-icons li.current:nth-of-type(3)>*::before {
    background-position: -40px -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(4)>*::before,
.cd-multi-steps.custom-icons li.current:nth-of-type(4)>*::before {
    background-position: -60px -20px;
}

@media only screen and (min-width: 768px) {
    .cd-breadcrumb,
    .cd-multi-steps {
        padding: 0 1.2em;
    }
    .cd-breadcrumb li,
    .cd-multi-steps li {
        margin: 1.2em 0;
    }
    .cd-breadcrumb li::after,
    .cd-multi-steps li::after {
        margin: 0 1em;
    }
    .cd-breadcrumb li>*,
    .cd-multi-steps li>* {
        font-size: 90%;
    }
}


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

Triangle breadcrumb

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

@media only screen and (min-width: 768px) {
    .cd-breadcrumb.triangle {
        /* reset basic style */
        background-color: transparent;
        padding: 0;
        height: 30px;
    }
    .cd-breadcrumb.triangle li {
        position: relative;
        padding: 0;
        margin: 4px 4px 4px 0;
    }
    .cd-breadcrumb.triangle li:last-of-type {
        margin-right: 0;
    }
    .cd-breadcrumb.triangle li>* {
        position: relative;
        padding: 1em .8em 1em 2.5em;
        color: #2c3f4c;
        background-color: #edeff0;
        /* the border color is used to style its ::after pseudo-element */
        border-color: #edeff0;
    }
    .cd-breadcrumb.triangle li.current>* {
        /* selected step */
        color: #ffffff;
        background-color: #96c03d;
        border-color: #96c03d;
    }
    .cd-breadcrumb.triangle li:first-of-type>* {
        padding-left: 1.6em;
        border-radius: .25em 0 0 .25em;
    }
    .cd-breadcrumb.triangle li:last-of-type>* {
        padding-right: 1.6em;
        border-radius: 0 .25em .25em 0;
    }
    .no-touch .cd-breadcrumb.triangle a:hover {
        /* steps already visited */
        color: #ffffff;
        background-color: #2c3f4c;
        border-color: #2c3f4c;
    }
    .cd-breadcrumb.triangle li::after,
    .cd-breadcrumb.triangle li>*::after {
        /* 
        li > *::after is the colored triangle after each item
        li::after is the white separator between two items
    */
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        content: '';
        height: 0;
        width: 0;
        /* 48px is the height of the <a> element */
        border: 24px solid transparent;
        border-right-width: 0;
        border-left-width: 20px;
    }
    .cd-breadcrumb.triangle li::after {
        /* this is the white separator between two items */
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        border-left-color: #ffffff;
        /* reset style */
        margin: 0;
    }
    .cd-breadcrumb.triangle li>*::after {
        /* this is the colored triangle after each element */
        z-index: 2;
        border-left-color: inherit;
    }
    .cd-breadcrumb.triangle li:last-of-type::after,
    .cd-breadcrumb.triangle li:last-of-type>*::after {
        /* hide the triangle after the last step */
        display: none;
    }
    .cd-breadcrumb.triangle.custom-separator li::after {
        /* reset style */
        background-image: none;
    }
    .cd-breadcrumb.triangle.custom-icons li::after,
    .cd-breadcrumb.triangle.custom-icons li>*::after {
        /* 50px is the height of the <a> element */
        border-top-width: 25px;
        border-bottom-width: 25px;
    }
    @-moz-document url-prefix() {
        .cd-breadcrumb.triangle li::after,
        .cd-breadcrumb.triangle li>*::after {
            /* fix a bug on Firefix - tooth edge on css triangle */
            border-left-style: dashed;
        }
    }
}


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

Custom icons hover effects - breadcrumb and multi-steps

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

@media only screen and (min-width: 768px) {
    .no-touch .cd-breadcrumb.triangle.custom-icons li:first-of-type a:hover::before,
    .cd-breadcrumb.triangle.custom-icons li.current:first-of-type em::before,
    .no-touch .cd-multi-steps.text-center.custom-icons li:first-of-type a:hover::before,
    .cd-multi-steps.text-center.custom-icons li.current:first-of-type em::before {
        /* change custom icon using image sprites - hover effect or current item */
        background-position: 0 -40px;
    }
    .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(2) a:hover::before,
    .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(2) em::before,
    .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(2) a:hover::before,
    .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(2) em::before {
        background-position: -20px -40px;
    }
    .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(3) a:hover::before,
    .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(3) em::before,
    .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(3) a:hover::before,
    .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(3) em::before {
        background-position: -40px -40px;
    }
    .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(4) a:hover::before,
    .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(4) em::before,
    .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(4) a:hover::before,
    .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(4) em::before {
        background-position: -60px -40px;
    }
}


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

Multi steps indicator 

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

@media only screen and (min-width: 768px) {
    .cd-multi-steps {
        /* reset style */
        background-color: transparent;
        padding: 0;
        text-align: center;
    }
    .cd-multi-steps li {
        position: relative;
        float: none;
        margin: 0.4em 40px 0.4em 0;
    }
    .cd-multi-steps li:last-of-type {
        margin-right: 0;
    }
    .cd-multi-steps li::after {
        /* this is the line connecting 2 adjacent items */
        position: absolute;
        content: '';
        height: 4px;
        background: #edeff0;
        /* reset style */
        margin: 0;
    }
    .cd-multi-steps li.visited::after {
        background-color: #96c03d;
    }
    .cd-multi-steps li>*,
    .cd-multi-steps li.current>* {
        position: relative;
        color: #2c3f4c;
    }
    .cd-multi-steps.custom-separator li::after {
        /* reset style */
        height: 4px;
        background: #edeff0;
    }
    .cd-multi-steps.text-center li::after {
        width: 100%;
        top: 50%;
        left: 100%;
        -webkit-transform: translateY(-50%) translateX(-1px);
        -moz-transform: translateY(-50%) translateX(-1px);
        -ms-transform: translateY(-50%) translateX(-1px);
        -o-transform: translateY(-50%) translateX(-1px);
        transform: translateY(-50%) translateX(-1px);
    }
    .cd-multi-steps.text-center li>* {
        z-index: 1;
        padding: .6em 1em;
        border-radius: .25em;
        background-color: #edeff0;
    }
    .no-touch .cd-multi-steps.text-center a:hover {
        background-color: #2c3f4c;
    }
    .cd-multi-steps.text-center li.current>*,
    .cd-multi-steps.text-center li.visited>* {
        color: #ffffff;
        background-color: #96c03d;
    }
    .cd-multi-steps.text-center.custom-icons li.visited a::before {
        /* change the custom icon for the visited item - check icon */
        background-position: 0 -60px;
    }
    .cd-multi-steps.text-top li,
    .cd-multi-steps.text-bottom li {
        width: 80px;
        text-align: center;
    }
    .cd-multi-steps.text-top li::after,
    .cd-multi-steps.text-bottom li::after {
        /* this is the line connecting 2 adjacent items */
        position: absolute;
        left: 50%;
        /* 40px is the <li> right margin value */
        width: calc(100% + 40px);
    }
    .cd-multi-steps.text-top li>*::before,
    .cd-multi-steps.text-bottom li>*::before {
        /* this is the spot indicator */
        content: '';
        position: absolute;
        z-index: 1;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background-color: #edeff0;
    }
    .cd-multi-steps.text-top li.visited>*::before,
    .cd-multi-steps.text-top li.current>*::before,
    .cd-multi-steps.text-bottom li.visited>*::before,
    .cd-multi-steps.text-bottom li.current>*::before {
        background-color: #96c03d;
    }
    .no-touch .cd-multi-steps.text-top a:hover,
    .no-touch .cd-multi-steps.text-bottom a:hover {
        color: #96c03d;
    }
    .no-touch .cd-multi-steps.text-top a:hover::before,
    .no-touch .cd-multi-steps.text-bottom a:hover::before {
        box-shadow: 0 0 0 3px rgba(150, 192, 61, 0.3);
    }
    .cd-multi-steps.text-top li::after {
        /* this is the line connecting 2 adjacent items */
        bottom: 4px;
    }
    .cd-multi-steps.text-top li>* {
        padding-bottom: 20px;
    }
    .cd-multi-steps.text-top li>*::before {
        /* this is the spot indicator */
        bottom: 0;
    }
    .cd-multi-steps.text-bottom li::after {
        /* this is the line connecting 2 adjacent items */
        top: 3px;
    }
    .cd-multi-steps.text-bottom li>* {
        padding-top: 20px;
    }
    .cd-multi-steps.text-bottom li>*::before {
        /* this is the spot indicator */
        top: 0;
    }
}


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

Add a counter to the multi-steps indicator 

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

.cd-multi-steps.count li {
    counter-increment: steps;
}

.cd-multi-steps.count li>*::before {
    content: counter(steps) " - ";
}

@media only screen and (min-width: 768px) {
    .cd-multi-steps.text-top.count li>*::before,
    .cd-multi-steps.text-bottom.count li>*::before {
        /* this is the spot indicator */
        content: counter(steps);
        height: 26px;
        width: 26px;
        line-height: 26px;
        font-size: 1.4rem;
        color: #ffffff;
    }
    .cd-multi-steps.text-top.count li:not(.current) em::before,
    .cd-multi-steps.text-bottom.count li:not(.current) em::before {
        /* steps not visited yet - counter color */
        color: #2c3f4c;
    }
    .cd-multi-steps.text-top.count li::after {
        bottom: 11px;
    }
    .cd-multi-steps.text-top.count li>* {
        padding-bottom: 34px;
    }
    .cd-multi-steps.text-bottom.count li::after {
        top: 11px;
    }
    .cd-multi-steps.text-bottom.count li>* {
        padding-top: 34px;
    }
}


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


/*   PRODUCT STYLES
/*------------------------------------------*/

.products {
    background: #fff;
}

.product.style1 {
    background: #fff;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, .1);
    height: 100%;
}

.product.style1 .product-image {}

.product.style1 .product-image img {
    width: 100%;
    border: 2px solid gray;
    max-width: 100px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5) inset;
}

.product.style1 .product-info {
    text-align: center;
    padding-top: 10px;
}

.product.style1 .product-info h2 {
    text-align: center;
    font-size: 130%;
}

.product.style1 .product-info h3 {
    text-align: center;
    font-size: 100%;
    font-weight: 700;
}

.product.style1 .product-info .link {
    color: blue;
    display: block;
}


/*categories*/

.product-categories {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    width: 100%;
    height: 100%;
}

.product-categories ul {
    list-style: none;
}

.product-categories ul:first-child {
    margin-bottom: 0;
}

.product-categories ul li {}

.product-categories ul li a {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    color: #000;
}

.product-categories ul li ul {
    display: none;
    padding-left: 10px;
}

.product-categories ul li ul li ul {
    display: none;
    padding-left: 20px;
}

.product-categories ul li ul li ul li ul {
    display: none;
    padding-left: 30px;
}

.product-categories ul li ul.expand {
    display: block;
}

.product-categories ul li a.active {
    color: green;
    font-weight: 600;
}

.product-categories ul:first-child li:last-child a {
    border-bottom: 0;
}

.product-categories ul li a:hover {
    color: brown;
    font-weight: 600;
}

.product-categories ul.sub1,
.product-categories ul.sub2,
.product-categories ul.sub3,
.product-categories ul.sub4 {
    list-style: none;
    list-style-image: url('../images/icons/bullet_line.png');
    padding-left: 15px;
    border-left: 2px solid rgba(0, 0, 0, 1.0);
    margin-left: 15px;
}


/**/

.categories.style1 .link {
    color: blue;
}

.categories.style1 .link:hover {
    color: brown;
}

.categories.style1 .card {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, .05);
}

.categories.style1 ul:first-child {
    list-style-type: decimal;
    padding-left: 15px;
    margin-top: 15px;
}

.categories.style1 ul.sub1 {
    list-style-type: lower-alpha;
    padding-left: 15px;
}

.categories.style1 li {}

.striped-list li:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .03);
    border-top: 2px solid #fff;
}

.categories.style1 ul.sub2 {
    list-style-type: square;
    padding-left: 13px;
    border-left: 1px solid rgba(0, 0, 0, .1);
    ;
}

.categories.style1 ul.sub3 {
    list-style: none;
    list-style-image: url('../images/icons/bullet_star.png');
    padding: 0;
    padding-left: 20px;
    margin: 0;
}

.categories .actions {}

.categories .actions .action {
    padding-left: 5px;
}


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


/*   MEDIA QUERY STYLES
/*------------------------------------------*/

@media(max-width: 1199px) {
    .lg-hide {
        display: none;
    }
}

@media(max-width: 991px) {
    .md-hide {
        display: none;
    }
}

@media(max-width: 767px) {
    .sm-hide {
        display: none;
    }
    .products {
        background: transparent;
    }
    .products .col-6 {
        padding: 5px !important;
        margin-top: 0px !important;
    }
    .product.style1 {
        background: #f5f3f3;
    }
}

@media(max-width: 575px) {
    .xs-hide {
        display: none;
    }
}


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


/*   POS STYLES
/*------------------------------------------*/

.pos-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
}

.pos {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 1200px;

}

.pos table {
    font-size: 100%;
}

.pos table .thead {
    background: rgba(0, 0, 0, .2);
}

.pos table td {
    vertical-align: top;
}

.pos .label {
    font-weight: 700;
    padding: 0 15px;
    text-align: right;
}

.pos input[type="text"],
.pos select,
.pos .form-control {
    width: 100%;
    height: 30px;
    min-height: 30px;
    outline: 0;
    border: 1px solid rgba(0, 0, 0, .3);
}

.pos select {
    width: 100%;
    padding: 0;
}

.pos #barcode {
    min-width: 200px;
}
/**/
.pos input[type="text"] {
    padding: 0 10px;
}

.pos #quantity {
    width: 100px !important;
}
.pos .remove-product,.delete-btn {
    background: transparent;
    color:  #d22a2a;
    border:  1px solid rgba(0, 0, 0, .05);
    padding: 0 10px;
    cursor: pointer;
    outline: 0;
}
.pos .remove-product.no-bg,.delete-btn.no-bg {
    border:  0;
    padding: 0 !important;
}

.pos .remove-product:focus,.delete-btn:focus{
    outline: 0;
}

.pos .remove-product:hover,.delete-btn:hover{
    color: red;
    background: rgba(0, 0, 0, .05);
}

.pos .remove-product.no-bg:hover,.delete-btn.no-bg:hover{
    background: transparent;
}


/*.pos .select2-container .select2-hidden-accessible,
.pos .select2-container,
.pos .select2-container .select2-selection--single,*/

.pos .select2-container .select2-selection--single {
    min-width: 300px;
}

.pos .select2-container .select2-selection--single .select2-selection__rendered {
    width: 300px !important;
}

.pos .form-control,
.pos .button,
.pos .button:focus {
    border-radius: 0;
}

.pos .padded,
.pos .padded td,
.pos .padded th {
    padding: 2.5px;
}

.pos table .tbody td {
    padding-top: 5px;
}

.pos .product-list-table>tbody>tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.pos-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
    /*background: rgba(0,0,0,0.1);*/
    padding: 6px;
    padding-top: 0;
}

.pos-top select,
.pos-top input[type="text"] {
    height: 37px !important;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    border-radius: 3px !important;
}

.pos-middle {
    position: absolute;
    top: 75px;
    left: 0;
    right: 100px;
    bottom: 150px;
    background: rgba(0, 0, 0, 0.05);
    overflow: scroll;
    padding: 1px;
    border: 2px solid rgba(0, 0, 0, .1);
}

.pos-middle .padded th,
.pos-middle .padded td {
    padding: 0 15px;
}

.pos-right {
    position: absolute;
    top: 75px;
    right: 0;
    bottom: 0;
    width: 100px;
    background: rgba(0, 0, 0, 0.2);
}

.pos-bottom {
    position: absolute;
    left: 0;
    right: 100px;
    bottom: 0;
    height: 150px;
    background: rgba(0, 0, 0, 0.1);
    font-size: 100%;
    padding: 0 15px;
}
.pos-bottom table{white-space: nowrap;}
.cutomer-wrapper {
    position: relative;
}

@media(max-width: 991px) {
    .pos-container {
        overflow: scroll;
    }
}

.pos .buttons {}

.pos .buttons .button {
    max-width: 90px;
    min-width: 90px;
    text-align: center;
    white-space: normal;
    margin: 5px;
    border-radius: 7px;
}

.pos #payable {
    font-weight: 700;
    color: green;
}

.pos .disabled,
.pos .read-only,
.pos [readonly],
.pos [disabled] {
    opacity: 1;
    cursor: not-allowed !important;
}

.pos #barcode.active {
    border: 1px solid lightgreen;
    background: rgba(0, 255, 0, .05);
    color: green;
    opacity: 1;
}

.pos #barcode.active::placeholder {
    color: green;
    opacity: 1;
}

.pos #barcode.active::-moz-placeholder {
    color: green;
    opacity: 1;
}

.pos #barcode.active::-ms-placeholder {
    color: green;
    opacity: 1;
}

.pos #barcode.active::-webkit-placeholder {
    color: green;
    opacity: 1;
}

.mini-pos{}
.mini-pos .pos-controls .controls-table td{
    padding: 5px 15px;
}
.mini-pos .pos-controls .buttons{
    padding: 10px;
    background: rgba(0, 0, 0, .1);
    margin-top: 10px;
}
.product-list-header{
    display: block;
    border-bottom: 5px solid rgba(0, 0, 0, .3);
    padding-top: 20px;
    padding-bottom: 15px;
}
.product-list-header::after{clear: both;display: block;content: "";}
.product-list-header-left{
    width: calc(100% - 100px);
    float: left;
}
.product-list-header-right{
    width: 100px;
    float: right;
}

.mini-pos .product-list-title{
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 15px;
}
.mini-pos .product-list-table th,
.mini-pos .product-list-table td{
    padding: 5px 15px;
}

.mini-pos-footer{
    margin-top: 20px;
}
.mini-pos-footer table{
    border-collapse: collapse;
    white-space: nowrap;

}
.mini-pos-footer table td{
    vertical-align: top;
    padding: 5px 15px;
    padding-bottom: 0;
}
.mini-pos-footer table tr{

}
.mini-pos-footer select
.mini-pos-footer input{
    /*width: 100%;*/
}
/**/

.pos #barcode.request {
    border: 1px solid gold;
    background: rgba(255, 255, 0, .05);
    color: orange;
    opacity: 1;
}

.pos #barcode.request::placeholder {
    color: orange;
    opacity: 1;
}

.pos #barcode.request::-moz-placeholder {
    color: orange;
    opacity: 1;
}

.pos #barcode.request::-ms-placeholder {
    color: orange;
    opacity: 1;
}

.pos #barcode.request::-webkit-placeholder {
    color: orange;
    opacity: 1;
}


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


/*   INVOICE/RECEIPT STYLES
/*------------------------------------------*/

.receipt-title {
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    display: block;
    font-size: 26px;
    border-bottom: 1px dashed black;
}

.receipt-number {
    color: red;
}

.receipt-body {
    margin-top: 50px;
}

.receipt table td {
    vertical-align: top;
}

.receipt-label {
    font-weight: 700;
}

.receipt .padded td {
    padding: 5px 15px;
    white-space: nowrap;
}

.receipt td.pdg-a0 {
    padding: 0;
}

.receipt .line {
    display: block;
    width: 100%;
    border-bottom: 1px solid dashed black;
}

.receipt .signature {
    display: block;
    padding-top: 30px;
    min-width: 320px;
}


/*payment*/

.payment-section,
.receipt {
    display: block;
    width: 100%;
    min-width: 480px;
    height: 95%;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px;
    min-height: 400px;
    padding-bottom: 50px;
}

.payment-table {}

.payment-table td {
    vertical-align: top;
    padding: 5px;
}

.payment-table .form-control {
    border-radius: 0;
}

.payment-table .label {
    font-weight: 600;
    page-break-inside: avoid;
}

.page-break {
    page-break-before: always;
    page-break-after: avoid;
}


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


/*   DATA SUMMARY STYLES
/*------------------------------------------*/

.stats {}

.stats .h1,
.stats .h2,
.stats .h3 {
    padding: 6px 12px !important;
    margin-top: 20px;
}


.data-summary ul{
    list-style: none;margin: 0;padding: 0;
    background: #f5f3f3;
}
.data-summary ul li{
    display: block;
    float: left;
    padding: 5px;
}
.data-summary ul li div{
    display: block;
    height: 100%;
    /*border:  1px solid rgba(0, 0, 0, .1);*/
    padding: 10px;
}
.data-summary ul::after{clear: both;display: block;content: '';}
.data-summary ul.two li{
    width: 50%;
}
.data-summary ul.three li{
    width: 33.333333333%;
}
.data-summary ul.four li{
    width: 25%;
}

@media(max-width: 767px){
    .data-summary ul.two li{
        width: 50%;
    }
    .data-summary ul.three li{
        width: 50%;
    }
    .data-summary ul.four li{
        width: 50%;
    }
}

@media(max-width: 575px){
    .data-summary ul{
        background: transparent;
    }
    .data-summary ul li{
        background: #f5f3f3;
        border:  1px solid rgba(0, 0, 0, .1);
        margin: 5px;
        margin-top: 5px;
    }
    .data-summary ul.two,
    .data-summary ul.three li,
    .data-summary ul.four li{
        width: 100%;
    }
}
/**/

.data-stats.style1 {
    margin-bottom: 15px;
}

.data-stats.style1 tr.main-tr {
    border: 1px solid rgba(0, 0, 0, .05);
}

.data-stats.style1 tr.main-tr td.pdg-a0 {
    padding: 0;
}

.data-stats.style1 tr.main-tr:last-child {
    /*border-bottom:  1px solid rgba(0, 0, 0, .05);*/
}

.data-stats.style1 .data-title1,
.data-stats.style1 .data-title1 td {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 18px;
    padding: 6px 12px;
}

.data-stats.style1 .data-title1 td {
    padding-top: 20px;
}

.data-stats.style1 .data-title2,
.data-stats.style1 .data-title2 td {
    font-weight: 600;
    text-transform: capitalize;
}

.data-stats.style1 table.table1 {
    margin-bottom: 20px;
}

.data-stats.style1 table {}

.data-stats.style1 table td {
    padding: 3px 12px;
}

.data-stats.style1 .table1 tr {
    border-bottom: 1px solid rgba(0, 0, 0, 1.0);
}

.data-stats.style1 .table1 td {
    vertical-align: top;
}

.data-stats.style1 .table2 tr {
    border-bottom: 0;
    white-space: nowrap;
}

.data-stats.style1 .table2.uppercase,
.data-stats.style1 .table2.uppercase td {
    text-transform: uppercase !important;
}

.data-stats.style1 table.striped td {
    border-left: 0;
    border-right: 0;
}

.data-stats.balance-sheet .assets,
.data-stats.balance-sheet .liabilities {
    border-left: 5px solid #fff !important;
    border-right: 5px solid #fff !important;
}

.data-stats.balance-sheet .data-title2 {
    background: rgba(0, 0, 255, 0.1);
}



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


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

.profile.style1{
    position: relative;
}
.profile.style1 .profile-header{
    border: 1px solid rgba(0, 0, 0, .05);
}
.profile.style1 .profile-header:after{
    clear: both;
    display: block;
    content: "";
}
.profile.style1 .profile-header .pic-section{
    width: 240px;
    float: left;
}
.profile.style1 .profile-header .pic-section img{
    width: 100%;
}
.profile.style1 .profile-header .name-section{
    width: calc(100% - 240px);
    float: right;
    padding: 30px;

}
.profile.style1 .data-section{
    border: 1px solid rgba(0, 0, 0, .05);
    padding: 15px;
}

.profile.style1 .contacts{
    display: block;
}

.profile.style1 .contacts a{
    display: inline-block;
    margin-right: 15px;
}

.profile.style1 .profile-header table{

}
.profile.style1 .profile-header table td{
    padding: 0 6px;
}
@media(max-width: 575px){
    .profile.style1 .profile-header{
        padding-bottom: 30px;
    }
    .profile.style1 .profile-header table{
        text-align: left;
        margin-left: 30px;
    }
    .profile.style1 .profile-header .pic-section,
    .profile.style1 .profile-header .name-section{
        float: none;
        width: 100%;
    }
    .profile.style1 .profile-header .name-section{
        padding: 0;
        text-align: center;
    }
    .profile.style1 .profile-header .pic-section img{
        display: block;
        margin: 30px auto;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 3px solid rgba(0, 0, 0, .5);
    }
}
/**/
.profile.style2{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.profile.style2 .pic-section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: rgba(0, 0, 0, .1);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
}
.profile.style2 .pic-section img{
    display: block;
    width: 100%;
    min-width: 300px;
}
.profile.style2 .details-section{
    position: absolute;
    top: 300px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    box-sizing: border-box;
    border-top: 3px solid rgba(0, 0, 0, .1);
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}
.profile.style2 .details-section::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}
.profile.style2 .details-section p{
    margin-bottom: 0;
}
.profile.style2 .details-section a{
    color: inherit;
}
.profile.style2 h1{
    font-weight: 600;
    font-size: 110%;
    text-align: center;
    line-height: 20px;
}

/* TABBED CONTENT STYLES*/
.tabbed-content{
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 0 15px;
    padding-bottom: 100px;
}
.tabbed-content.style1{
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 0 15px;
    padding-bottom: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.tabbed-content .h-tabs{

}
.tabbed-content.style1 .h-tabs{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    overflow: auto;
    overflow-y: hidden;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    background: rgba(0, 0, 0, .05);
    border-bottom: 3px solid #eee;
}
.tabbed-content.style1 .h-tabs::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}
.tabbed-content .h-tabs ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.tabbed-content .h-tabs ul li{
    display: inline-block;
}
.tabbed-content .h-tabs ul li a{
    display: inline-block;
    padding: 6px 12px;
}
.tabbed-content .h-tabs.style1  ul li.active{

}
.tabbed-content .h-tabs.style1  ul li.active a{
    background: #eee;
    font-weight: 600;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    color: green;
}
.tabbed-content .tab-details{}
.tabbed-content.style1 .tab-details{
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
}
.tabbed-content.style1 .tab-details .left-content{
    position: absolute;
    top: 0;
    left: 0;
    right: calc(100% - 300px);
    bottom: 0;
    border: 2px solid rgba(0, 0, 0, .05);
}
.tabbed-content.style1 .tab-details .right-content{
    position: absolute;
    top: 0;
    left: 300px;
    right: 0;
    bottom: 0;
    overflow: scroll;
    padding: 15px;
    border: 2px solid rgba(0, 0, 0, .05);
}
.tabbed-content.style1 .card{
    background: #f5f3f3 !important;
    box-shadow: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}
.tabbed-content.style1 .card .card-header{

}
.tabbed-content.style1 .card .card-title{

}
.data-section{
    margin-top: 20px;
}
.data-section .title{
    font-weight: 600;
    font-size: 100%;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.data-section .content{
    padding-top: 10px;
}


@media(min-width:992px) and (max-width:1199.98px){
    .tabbed-content.style1 .tab-details .left-content{}
    .tabbed-content.style1 .tab-details .right-content{}

}

@media(max-width:991.98px){
    .tabbed-content.style1 .tab-details{
        overflow: scroll;
    }

    .tabbed-content.style1 .tab-details .left-content{
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    .tabbed-content.style1 .tab-details .right-content{
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }

    .tabbed-content.style1 .profile.style2{
        text-align: center;
        position: relative;
        background: #f5f3f3 !important;
    }

    .tabbed-content.style1 .profile.style2 .pic-section{
        position: relative;
        background: rgba(0, 0, 0, .05);
        padding-top: 30px;
        overflow: inherit;
    }

    .tabbed-content.style1 .profile.style2 .details-section{
        position: relative;
        top: 0;
        border-top: 0;
        padding-top: 50px;
    }
    .tabbed-content.style1 .profile.style2 .pic-section img{
        display: block;
        width: 100%;
        max-width: 50%;
        margin: 0 auto;
    }
}

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


/*   BORDER STYLES
/*------------------------------------------*/
.border-1-light-1{border: 1px solid rgba(0, 0, 0, .05); !important;}


.border-1-red-1{border: 1px solid #ee1d23 !important;}
.border-2-red-1{border: 2px solid #ee1d23 !important;}
.border-3-red-1{border: 3px solid #ee1d23 !important;}
.border-4-red-1{border: 4px solid #ee1d23 !important;}
.border-5-red-1{border: 5px solid #ee1d23 !important;}

.border-1-red-2{border: 1px solid #d11419 !important;}
.border-2-red-2{border: 2px solid #d11419 !important;}
.border-3-red-2{border: 3px solid #d11419 !important;}
.border-4-red-2{border: 4px solid #d11419 !important;}
.border-5-red-2{border: 5px solid #d11419 !important;}


.border-1-dark-1{border: 1px solid #343a40 !important;}
.border-2-dark-1{border: 2px solid #343a40 !important;}
.border-3-dark-1{border: 3px solid #343a40 !important;}
.border-4-dark-1{border: 4px solid #343a40 !important;}
.border-5-dark-1{border: 5px solid #343a40 !important;}
.border-6-dark-1{border: 6px solid #343a40 !important;}
.border-7-dark-1{border: 7px solid #343a40 !important;}
.border-8-dark-1{border: 8px solid #343a40 !important;}
.border-9-dark-1{border: 9px solid #343a40 !important;}
.border-10-dark-1{border: 10px solid #343a40 !important;}

.border-1-green-1{border: 1px solid #62be42 !important;}
.border-2-green-1{border: 2px solid #62be42 !important;}
.border-3-green-1{border: 3px solid #62be42 !important;}
.border-4-green-1{border: 4px solid #62be42 !important;}
.border-5-green-1{border: 5px solid #62be42 !important;}
.border-6-green-1{border: 6px solid #62be42 !important;}
.border-7-green-1{border: 7px solid #62be42 !important;}
.border-8-green-1{border: 8px solid #62be42 !important;}
.border-9-green-1{border: 9px solid #62be42 !important;}
.border-10-green-1{border: 10px solid #62be42 !important;}

.border-1-blue-1{border: 1px solid #002a5c !important;}
.border-2-blue-1{border: 2px solid #002a5c !important;}
.border-3-blue-1{border: 3px solid #002a5c !important;}
.border-4-blue-1{border: 4px solid #002a5c !important;}
.border-5-blue-1{border: 5px solid #002a5c !important;}
.border-6-blue-1{border: 6px solid #002a5c !important;}
.border-7-blue-1{border: 7px solid #002a5c !important;}
.border-8-blue-1{border: 8px solid #002a5c !important;}
.border-9-blue-1{border: 9px solid #002a5c !important;}
.border-10-blue-1{border: 10px solid #002a5c !important;}

.border-1-brown-1{border: 1px solid #ad3e11 !important;}
.border-2-brown-1{border: 2px solid #ad3e11 !important;}
.border-3-brown-1{border: 3px solid #ad3e11 !important;}
.border-4-brown-1{border: 4px solid #ad3e11 !important;}
.border-5-brown-1{border: 5px solid #ad3e11 !important;}
.border-6-brown-1{border: 6px solid #ad3e11 !important;}
.border-7-brown-1{border: 7px solid #ad3e11 !important;}
.border-8-brown-1{border: 8px solid #ad3e11 !important;}
.border-9-brown-1{border: 9px solid #ad3e11 !important;}
.border-10-brown-1{border: 10px solid #ad3e11 !important;}

.border-1-white-1{border: 1px solid #fff !important;}
.border-2-white-1{border: 2px solid #fff !important;}
.border-3-white-1{border: 3px solid #fff !important;}
.border-4-white-1{border: 4px solid #fff !important;}
.border-5-white-1{border: 5px solid #fff !important;}
.border-6-white-1{border: 6px solid #fff !important;}
.border-7-white-1{border: 7px solid #fff !important;}
.border-8-white-1{border: 8px solid #fff !important;}
.border-9-white-1{border: 9px solid #fff !important;}
.border-10-white-1{border: 10px solid #fff !important;}

.border-1-l-trpt-1{border: 1px solid rgba(255, 255, 255, .1) !important;}
.border-2-l-trpt-1{border: 2px solid rgba(255, 255, 255, .1) !important;}
.border-3-l-trpt-1{border: 3px solid rgba(255, 255, 255, .1) !important;}
.border-4-l-trpt-1{border: 4px solid rgba(255, 255, 255, .1) !important;}
.border-5-l-trpt-1{border: 5px solid rgba(255, 255, 255, .1) !important;}
.border-6-l-trpt-1{border: 6px solid rgba(255, 255, 255, .1) !important;}
.border-7-l-trpt-1{border: 7px solid rgba(255, 255, 255, .1) !important;}
.border-8-l-trpt-1{border: 8px solid rgba(255, 255, 255, .1) !important;}
.border-9-l-trpt-1{border: 9px solid rgba(255, 255, 255, .1) !important;}
.border-10-l-trpt-1{border: 10px solid rgba(255, 255, 255, .1) !important;}

.border-1-l-trpt-2{border: 1px solid rgba(255, 255, 255, .2) !important;}
.border-2-l-trpt-2{border: 2px solid rgba(255, 255, 255, .2) !important;}
.border-3-l-trpt-2{border: 3px solid rgba(255, 255, 255, .2) !important;}
.border-4-l-trpt-2{border: 4px solid rgba(255, 255, 255, .2) !important;}
.border-5-l-trpt-2{border: 5px solid rgba(255, 255, 255, .2) !important;}
.border-6-l-trpt-2{border: 6px solid rgba(255, 255, 255, .2) !important;}
.border-7-l-trpt-2{border: 7px solid rgba(255, 255, 255, .2) !important;}
.border-8-l-trpt-2{border: 8px solid rgba(255, 255, 255, .2) !important;}
.border-9-l-trpt-2{border: 9px solid rgba(255, 255, 255, .2) !important;}
.border-10-l-trpt-2{border: 10px solid rgba(255, 255, 255, .2) !important;}




.border-1-trpt-d1{border: 1px solid rgba(0, 0, 0, .1) !important;}
.border-2-trpt-d1{border: 2px solid rgba(0, 0, 0, .1) !important;}
.border-3-trpt-d1{border: 3px solid rgba(0, 0, 0, .1) !important;}
.border-4-trpt-d1{border: 4px solid rgba(0, 0, 0, .1) !important;}
.border-5-trpt-d1{border: 5px solid rgba(0, 0, 0, .1) !important;}
.border-6-trpt-d1{border: 6px solid rgba(0, 0, 0, .1) !important;}
.border-7-trpt-d1{border: 7px solid rgba(0, 0, 0, .1) !important;}
.border-8-trpt-d1{border: 8px solid rgba(0, 0, 0, .1) !important;}
.border-9-trpt-d1{border: 9px solid rgba(0, 0, 0, .1) !important;}
.border-10-trpt-d1{border: 10px solid rgba(0, 0, 0, .1) !important;}

.border-1-trpt-d2{border: 1px solid rgba(0, 0, 0, .2) !important;}
.border-2-trpt-d2{border: 2px solid rgba(0, 0, 0, .2) !important;}
.border-3-trpt-d2{border: 3px solid rgba(0, 0, 0, .2) !important;}
.border-4-trpt-d2{border: 4px solid rgba(0, 0, 0, .2) !important;}
.border-5-trpt-d2{border: 5px solid rgba(0, 0, 0, .2) !important;}
.border-6-trpt-d2{border: 6px solid rgba(0, 0, 0, .2) !important;}
.border-7-trpt-d2{border: 7px solid rgba(0, 0, 0, .2) !important;}
.border-8-trpt-d2{border: 8px solid rgba(0, 0, 0, .2) !important;}
.border-9-trpt-d2{border: 9px solid rgba(0, 0, 0, .2) !important;}
.border-10-trpt-d2{border: 10px solid rgba(0, 0, 0, .2) !important;}



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