body {
    background-color: #FFF;
}
.form-control {
    padding: 0px 5px;
    color: black !important;
    transition:none !important;
}
.inheder-input .form-control:focus, .inheder-input select:focus {
    background: white;
}
.inheder-input {
    margin-right: 5px;
}
.inheder-input .form-control {
    background: white;
    margin-right:5px;
}

.empty-datarow td
{
    padding: 2px 5px;
    font-weight: bold;
    border: 1px solid #c8c8c8;
    color: #575757;
}
.gridBackground {
    background: #E3E3E3;
}
.vertical-center
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modal {
    background: #0000005c;
}
.modal.in .modal-dialog {
    box-shadow: 0 8px 25px #0000005c;
}
.modal-content {
    border-radius: 10px !important;
    overflow: hidden;
}
.modal-header {
    padding: 0 12px !important;
    background-color: #68798a !important;
    color: #fff !important;
    border-radius: 5px 5px 0 0 !important;
}
.modal-content {
    box-shadow: 0 0 4px #202020 !important;
}
.linearBg
{
    /* fallback */      
    background: rgb(178,225,255); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IyZTFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NmI2ZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(178,225,255,1) 0%, rgba(102,182,252,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,225,255,1)), color-stop(100%,rgba(102,182,252,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 ); /* IE6-8 */
}
.required-field
{
    color:#e46262;
}
.form_heading
{
    text-align: center;
    font-size:14px;
    cursor:pointer;
}

.form_heading .header-icon {
    color: black;
    animation-iteration-count: 1;
    animation-iteration-count: infinite;
    text-shadow: -0px -10px 4px white, 0 -0px 3px #ff5151, 0 0 2px white;
        animation: shake 1s;
    /* When the animation is finished, start again */
    animation-iteration-count: infinite; 
    transition: color ease-in-out .2s,text-shadow .1s;
}
@keyframes shake {
    0% { transform: translate(0px, -1px) rotate(0deg); }
    30% { transform: translate(-0px, -1px) rotate(-5deg); }
    20% { transform: translate(-0px, -1px) rotate(10deg); }
    30% { transform: translate(0px, -0px) rotate(0deg); }
    40% { transform: translate(0px, -0px) rotate(5deg); }
    50% { transform: translate(-0px, 1px) rotate(0deg); }
    60% { transform: translate(-0px, -0px) rotate(-5deg); }
    70% { transform: translate(0px, -1px) rotate(-10deg); }
    80% { transform: translate(-0px, -0px) rotate(0deg); }
    90% { transform: translate(0px, 0px) rotate(5deg); }
    100% { transform: translate(0px, -0px) rotate(-0deg); }
}

.fa.fa-asterisk {
    font-size: 7px;
    position: relative;
    top: -5px;
}
.group-controls {
    display: flex !important;
}
.control-holder {
    margin-bottom: 5px;
    display: block;
    position: relative;
    max-height:25px;
}
/*.control-holder span
{
    font-weight: 600;
    color: #686868;
}*/
.control-holder span {
    font-weight: 500;
    color: #080808;
}
.left-partition
{
    border-left:1px solid silver;
}
.flex-box-inside
{
    display:flex;
}
.input-combiner {
    background: white;
    border: 1px solid #ddd;
    padding: 2.5px;
}
.input-combiner input {
    border: none;
    background: transparent;
    border-right: 1px solid #efefef;
    padding: 0;
    width: 32.33%;
    padding-left: 3px;
}
.input-combiner input:last-child {
    border: none;
}
.input-detail * {
    font-size: 12px;
    padding: 0;
    margin: 0;
    display: block;
    color: #7a7a7a;
}
.combiner-r {
    display: table;
    width: 100%;
}
.combiner-r > * {
    display: table-cell !important;
}
.combiner-r .combine-r {
    min-width:30px;
}
.combiner-r *:first-child {
    border-radius: 3px 0 0 3px !important;
}
.combiner-r .combine-r:hover {
    background: #8a8a8a;
    color: white !important;
}
.combiner-r .combine-r {
    min-width: 30px;
    text-align: center;
    /* border: 1px solid silver; */
    border-radius: 0 3px 3px 0;
    background: #e4e4e4;
    color: #333232;
    /* background: #7e9764; */
    font-size: 12px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.combiner-r .combine-r i {
    font-size: 15px !important;
    position: relative;
    top: 1px;
}
.hanging-bottom select {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
    overflow: hidden;
    overflow: -moz-hidden-unscrollable;
}
.showon-par-hover
{
    display:none;
}
.showon-parent:hover + .showon-par-hover
{
    display:block;
}
.showon-par-hover:hover
{
    display:block;
}
.showon-par-hover a:hover
{
    color:#68c570;
}
.inbox-control-holder-r {
    position: relative;
}
.inbox-control-l {

}
.inbox-control-r {
    position: absolute;
    top: 0;
    right: 0%;
    z-index:9;
}
.inbox-control-btn {
    height: 25px;
    width: 25px;
    display: inline-block;
    padding: 2px;
    background: #2e3e4e;
    border: 1px solid;
    margin: 0;
    font-size: 20px;
    color: white;
    text-align: center;
}
.inbox-top-control-r {
    position: absolute;
    top: -20px;
    right: 0%;
    z-index: 9;
}
.inbox-top-control-btn {
    height: 20px;
    width: 15px;
    display: inline-block;
    margin: 0;
    font-size: 15px;
    color: #414141;
    text-align: center;
}
.inform-heading {
    font-weight: bold;
    border-bottom: 1px solid;
    font-size: 13px;
    cursor:pointer;
    padding-left:5px;   
}
.no-pad {
    padding: 0 !important;
}
.no-mar {
    margin: 0 !important;
}

.box-next + .vehicle-detail-box
{
    tranition:all .3s;
    display:none;
}
.box-next + .vehicle-detail-box.active
{
    display:block;
}
.control-holder span {
    font-size: 12px;
}
.btn-joined {
    display: table-cell;
    width: 50%;
    text-align: center;
    border: 1px solid #9e9e9e;
    padding: 4px;
    background: #fff;
    font-size: 15px;
    color: #8f8f8f;
}
.btn-joined:hover {
    color: #51c500;
    background: white;
    box-shadow: 0px 2px 4px gray inset;
}
a:hover {
    color: #26b2e9 !important;
}


/*INPUT-ANIMATIONS*/
input.zoom-in:focus {
    box-shadow: 0 0 4px #26b2e9 !important;
    z-index: 9;
    border: none;
    border-radius: 3px;
    transition: all cubic-bezier(.4,3.52,.56,-0.11) .5s;
    background: white;
    color: #2a2a2a;
}

/*INPUT-BACKLIGHT*/
/*input.backlight:focus, select.backlight:focus  {    
    z-index: 9;
    border: none;
    border-radius: 3px;
    transition: all ease .5s;
    background: transparent;
    color: #2a2a2a;
    animation: glowing-red 2s;*/
    /* When the animation is finished, start again */
/*animation-iteration-count: infinite; 
}*/
input.backlight:focus, select.backlight:focus {
    z-index: 9;
    border-radius: 3px;
    transition: all ease .5s;
    background: transparent;
    color: #2a2a2a;
    border-color: #567290;
    border-width: 2px;
}
.no-background-ctrl:focus {
    background: transparent !important;
}
@keyframes shake {
    0% { transform: translate(0px, -1px) rotate(0deg); }
    30% { transform: translate(-0px, -1px) rotate(-5deg); }
    20% { transform: translate(-0px, -1px) rotate(10deg); }
    30% { transform: translate(0px, -0px) rotate(0deg); }
    40% { transform: translate(0px, -0px) rotate(5deg); }
    50% { transform: translate(-0px, 1px) rotate(0deg); }
    60% { transform: translate(-0px, -0px) rotate(-5deg); }
    70% { transform: translate(0px, -1px) rotate(-10deg); }
    80% { transform: translate(-0px, -0px) rotate(0deg); }
    90% { transform: translate(0px, 0px) rotate(5deg); }
    100% { transform: translate(0px, -0px) rotate(-0deg); }
}

a:hover {
    color: #26b2e9;
}   

/***ANIMATIONS***/
@-webkit-keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
    }

    30% {
        box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
    }
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
    }

    30% {
        box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
    }
}
@keyframes phone-shake {
    0% {
        transform: translate(-1px, 0px) rotate(0deg);
    }
    5% {
        transform: translate(1px, 0px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, 0px) rotate(0deg);
    }
    15% {
        transform: translate(1px, 0px) rotate(0deg);
    }
    20% {
        transform: translate(-1px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(1px, 0px) rotate(0deg);
    }

    30% {
        transform: translate(-1px, 0px) rotate(0deg);
    }

    35% {
        transform: translate(1px, 0px) rotate(0deg);
    }

    40% {
        transform: translate(-1px, 0px) rotate(0deg);
    }
    45% {
        transform: translate(1px, 0px) rotate(0deg);
    }

    50% {
        transform: translate(-1px, 0px) rotate(0deg);
    }
    55% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

.bounce{
  animation: bounce linear 0.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: bounce linear 0.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: bounce linear 0.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: bounce linear 0.8s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: bounce linear 0.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes bounce{
  0% {
    top: 0px;
  }
  15% {
    top: -25px;
  }
  30% {
    top: 0px;
  }
  45% {
    top: -15px;
  }
  60% {
    top: 0px;
  }
  75% {
    top: -5px;
  }
  100% {
    top: 0px;
  }
}

@-moz-keyframes bounce{
  0% {
    -moz-top: 0px;
  }
  15% {
    -moz-top: -25px;
  }
  30% {
    -moz-top: 0px;
  }
  45% {
    -moz-top: -15px;
  }
  60% {
    -moz-top: 0px;
  }
  75% {
    -moz-top: -5px;
  }
  100% {
    -moz-top: 0px;
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-top: 0px;
  }
  15% {
    -webkit-top: -25px;
  }
  30% {
    -webkit-top: 0px;
  }
  45% {
    -webkit-top: -15px;
  }
  60% {
    -webkit-top: 0px;
  }
  75% {
    -webkit-top: -5px;
  }
  100% {
    -webkit-top: 0px;
  }
}

@-o-keyframes bounce {
  0% {
    -o-top: 0px;
  }
  15% {
    -o-top: -25px;
  }
  30% {
    -o-top: 0px;
  }
  45% {
    -o-top: -15px;
  }
  60% {
    -o-top: 0px;
  }
  75% {
    -o-top: -5px;
  }
  100% {
    -o-top: 0px;
  }
}

@-ms-keyframes bounce {
  0% {
    -ms-top: 0px;
  }
  15% {
    -ms-top: -25px;
  }
  30% {
    -ms-top: 0px;
  }
  45% {
    -ms-top: -15px;
  }
  60% {
    -ms-top: 0px;
  }
  75% {
    -ms-top: -5px;
  }
  100% {
    -ms-top: 0px;
  }
}
@keyframes glowing-red {
    0% { box-shadow: 0 0 2px #f05a48; }
    10% { box-shadow: 0 0 2px #f05a48; }
    20% { box-shadow: 0 0 3px #f05a48; }
    30% { box-shadow: 0 0 4px #f05a48; }
    40% { box-shadow: 0 0 4px #f05a48; }
    50% { box-shadow: 0 0 3px #f05a48; }
    60% { box-shadow: 0 0 2px #f05a48; }
    70% { box-shadow: 0 0 3px #f05a48; }
    80% { box-shadow: 0 0 4px #f05a48; }
    90% { box-shadow: 0 0 3px #f05a48; }
    100% { box-shadow: 0 0 3px #f05a48; }
}

input:read-only:focus, select:read-only:focus, input:-moz-read-only:focus, select:-moz-read-only:focus {
    box-shadow: none;
    animation: none;
    border: 1px solid #ffbebe;
    background: #eee;
}

.btn-radio-style-iphone 
{
    cursor:pointer;
    position: relative;
    width: 50px;
    height: 25px;
}

.btn-radio-style-iphone span
{
    position: absolute;
    width: 45px;
    height: 25px;
    display:block;
    border-radius: 16px;
    background: #f0f0f0;
    padding: 0;
    margin: 0;
    box-shadow: 0px 0px 3px gray inset;
    top: 0;
    left: 0;
    transition: all ease-in-out .3s;
}

.btn-radio-style-iphone span::after 
{
    content:"";
    position: absolute;
    top: 1px;
    left: 1px;
    height: 23px;
    width: 23px;
    border-radius: 22px !important;
    background: white;
    box-shadow: 0px 0px 1px silver, 0px 0px 4px silver;
    transition: all ease-in-out .3s;
    transition: all cubic-bezier(.07,1.24,.99,1.05) .3s;
}

.btn-radio-style-iphone input:checked + span
{
    background: #a4e4a4;
    box-shadow: 0px 0px 3px gray inset;
}

.btn-radio-style-iphone > input:checked + span::after
{
    left: 22px;
}
/*iPHONE-STYLE-CHECKBOX*/
.toggle-checkbox {
    display: inline-block;
    position: relative;
    height: 25px;
    width: 40px;
}

.toggle-checkbox input {
    height: 25px;
    width: 50px;
    margin: 0;
    margin: 0;
    opacity: 0;
    z-index: 99999;
    position: absolute;
}

.toggle-checkbox input + label:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 25px;
    content: "";
    background: white;
    border-radius: 20px;
    transition: cubic-bezier(0.53, 1.26, 0.79, 1.1) .3s;
    border: 1px solid #d0d0d0;
}

.toggle-checkbox input + label:before {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 23px;
    height: 23px;
    content: "";
    background: #e6e6e6;
    border-radius: 20px;
    z-index: 9;
    border: 1px solid #ffffff;
    transition: all cubic-bezier(0.53, 1.26, 0.79, 1.1) .3s;
}

.toggle-checkbox input:checked + label:before {
    left: 27px;
    border: 1px solid #36c554;
    background: white;
}
.toggle-checkbox input:checked + label:after {
    background: #3fde61;
}

.toggle-checkbox input + label {
    position: absolute;
    left: 0;
    top: -2px;
    width: 54px;
    height: 29px;
    border: 2px dotted #4f7ce000;
    border-radius: 20px;
}

.toggle-checkbox input:focus + label {
    border: 2px dotted #4f7ce0;
}
.toggle-checkbox input:active + label {
    border: 2px dotted transparent;
}
.auto-height-form, .auto-height-table {
    overflow: auto;
    display:inline-block;
    width:100%;
}
.center-block {
    float: none !important;
    margin: auto;
} 
.center-block-parent 
{
  position: relative;
}
.validation-remark {
    float: right;
}
.center-block-hv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.filter {
    background: white;
    display: none;
    position: absolute;
    z-index: 99;
    top: 35px;
    right: 1px;
    box-shadow: 0 2px 6px #484848;
    width: 300px;
    border-radius: 5px;
}
.filter:before {
    content: "";
    height: 7px;
    width: 7px;
    position: absolute;
    top: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #afafaf;
    right: 5px;
}
.fa-filter {
    cursor: pointer;
    font-size: 20px !important;
    padding: 2px;
    background: #ffffff;
    height: 25px;
    width: 25px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #d6d6d6;
    color: #bbbbbb;
}
.filter-section {
    display: table;
    padding: 10px 0 20px;
}

.filter-section {
    padding: 10px 0 20px;
}

.selected-filetrs {
    display: block;
    width: 95%;
    float: left;
}

.filter-field {
    padding: 0 3px 0 0;
    padding-right: 3px;
    display: block;
    float: left;
    padding-right: 30px;
    position: relative;
    margin-right: 5px;
    margin-bottom: 3px;
    border-radius: 2px;
    -webkit-transform: rotateY( 0deg );
    -ms-transform: rotateY(0deg);
    transform: rotateY( 0deg );
    /* transition: all cubic-bezier(.92,-0.54,.67,1.01) .8s; */
    transition: box-shadow ease-in .2s;
    border: 1px solid #d6d6d6;
}

    .filter-field:hover {
        box-shadow: 0 4px 3px -2px #0000007d;
        cursor: pointer;
    }

    .filter-field.rotate-remove {
        -webkit-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }

.field-name {
    font-size: 11px;
    color: #4a4a4a;
    padding: 4px;
    border-right: 1px solid #b5b5b5;
    float: left;
    font-weight: 600;
    background: #eaeaea;
}

.field-text {
    font-size: 11px;
    color: black;
    padding: 4px;
    float: left;
    background: white;
}

.filter-field span.delete:not(.disabled):hover {
    color: #4e4e4e;
    background: #bba4a4;
    cursor: pointer;
    background: #d8d8d8;
}

.filter-field span.delete {
    position: absolute;
    top: 4px;
    right: 4px;
    height: 16px;
    width: 16px;
    border-radius: 2px;
    text-align: center;
    font-weight: bold;
    color: #444444;
    font-family: inherit;
    padding: 2px 3px;
    cursor: auto;
    font-size: 12px;
}
.fa.fa-download {
    position: relative;
}
.download-options 
{
    display:none;
    position: absolute;
    top: 13px;
    right: -10px;
    background: #e7e7e7;
    z-index: 9;
    box-shadow: 0 2px 4px gray;
    padding: 2px;
}
.fa.fa-download:hover .download-options {
    display: block;
}
.download-options ul {
    padding: 0;
    list-style: none;
}
.download-options ul li {
    float:left;
    border:1px solid silver;
    background:linear-gradient(#eee, silver);
    list-style:none;
    height: 30px;
    width: 30px;
}
.record-count {
    font-size: 12px;
    display: block;
    text-align: left;
    float: none;
    clear: both;
}

.newfeature {
    height: 0;
    overflow:hidden;
    position: absolute;
    top:20px;
    right:5px;
    -moz-transition: height ease-in-out .4s;
    -webkit-transition: height ease-in-out .4s;
    -o-transition: height ease-in-out .4s;
    transition: height ease-in-out .4s;
    background: linear-gradient(#f8f8f8, silver);
    z-index: 99;
    box-shadow: 0 2px 6px #484848;
    width: 300px;
    border-radius: 4px;
}
.whatsnew:hover .newfeature {
    height: auto;
}
.whatsnew {
    float: right;
    position: relative;
    padding: 1px 5px;
    cursor:help;
}
.whatsnew span {
    font-weight: 600;
    color: #6ab077;
    font-family: arial;
}

.newfeature ol
{
    padding: 10px 20px;
}
.highlight
{
    box-shadow:0 0 4px red,0 0 8px white;
    -moz-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out; 
    -moz-animation:blink normal 1.5s infinite ease-in-out; /* Firefox */
    -webkit-animation:blink normal 1.5s infinite ease-in-out; /* Webkit */
    -ms-animation:blink normal 1.5s infinite ease-in-out; /* IE */
    animation:blink normal 1.5s infinite ease-in-out; /* Opera */
    
}
.fa.fa-filter.blink::after {
    content: "Filter!";
    position: absolute;
    left: -42px;
    top: 4px;
    font-size: 14px;
    color: #009ad7;
    font-family: arial;
    font-weight: bold;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -moz-animation: blink normal 1.5s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 1.5s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 1.5s infinite ease-in-out; /* IE */
    animation: blink normal 1.5s infinite ease-in-out; /* Opera */
}
@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* IE */
@keyframes blink {0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;}} /* Opera */

key {
    background: linear-gradient(#fff,#969696);
    border-radius: 3px;
    border: 1px solid silver;
    width: 22px;
    height: 22px;
    display: inline-block;
    text-align: center;
    box-shadow: 1px 1px 1px gray, 1px 1px 3px gray;
    color: #535353;
    margin: 0 2px;
}
.main-form
{
    width: 99%; margin-top: 30px; display: block;
    box-shadow: 0 0px 2px gray; border: none;
}

/********PRINTING ANIMATION************/
.printing-animation
{
    position:relative;
    margin-right:10px;
}
.printing-animation.icon-size
{
    float: left;
    width:30px;
    height:30px;
}
.printing-animation.icon-size .printer
{
    position: absolute;
    top: -2px;
    left: 0;
    height: 30px;
    width: 30px;
    z-index: 3;
    background-image: url('../images/printer-icon.png');
    background-size: 100%;
    background-position: top;
}
.printing-animation.icon-size .report
{
    position: absolute;
    top: -7px;
    left: 5px;
    height: 28px;
    width: 20px;
    z-index: 1;
    background-image: url('../images/report-icon.png');
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    -moz-animation:print normal 8s infinite; /* Firefox */
    -webkit-animation:print normal 8s infinite; /* Webkit */
    -ms-animation:print normal 8s infinite; /* IE */
    animation:print normal 8s infinite; /* Opera */
}
.printing-animation.icon-size .blank-paper {
    position: absolute;
    top: -6px;
    left: 7px;
    height: 12px;
    width: 16px;
    z-index: 2;
    background: white;
    -moz-animation:print-blank normal 8s infinite; /* Firefox */
    -webkit-animation:print-blank normal 8s infinite; /* Webkit */
    -ms-animation:print-blank normal 8s infinite; /* IE */
    animation:print-blank normal 8s infinite; /* Opera */
}
.printer::after {
    content: "";
    height: 2px;
    width: 2px;
    background: red;
    position: absolute;
    top: 10px;
    right: 3px;
    border-radius:10px;
    box-shadow:  0px 0px 3px red;
    -moz-animation:led-blink normal .5s infinite ease-in-out; /* Firefox */
    -webkit-animation:led-blink normal .5s infinite ease-in-out; /* Webkit */
    -ms-animation:led-blink normal .5s infinite ease-in-out; /* IE */
    animation:led-blink normal .5s infinite ease-in-out; /* Opera */
}
@-moz-keyframes print {0%{top:-9px;} 10%{top:-9px;} 70%{top:7px;} 90%{top:7px;opacity:1} 100%{top:7px;opacity:0}} /* Firefox */
@-webkit-keyframes print{0%{top:-9px;} 10%{top:-9px;} 70%{top:7px;} 90%{top:7px;opacity:1} 100%{top:7px;opacity:0}} /* Webkit */
@-ms-keyframes print {0%{top:-9px;} 10%{top:-9px;} 70%{top:7px;} 90%{top:7px;opacity:1} 100%{top:7px;opacity:0}} /* IE */
@keyframes print {0%{top:-9px;} 10%{top:-9px;}  70%{top:7px;} 90%{top:7px;opacity:1} 100%{top:7px;opacity:0}} /* Opera */

@-moz-keyframes print-blank {0%{top:-6px;z-index:2;} 10%{top:-6px;z-index:2;} 50%{z-index:0;} 70%{top:9px;z-index:0;} 90%{top:9px;z-index:0;opacity:1} 100%{top:9px;z-index:0;opacity:0} } /* Firefox */
@-webkit-keyframes print-blank{0%{top:-6px;z-index:2;} 10%{top:-6px;z-index:2;} 50%{z-index:0;} 70%{top:9px;z-index:0;} 90%{top:9px;z-index:0;opacity:1} 100%{top:9px;z-index:0;opacity:0} } /* Webkit */
@-ms-keyframes print-blank {0%{top:-6px;z-index:2;} 10%{top:-6px;z-index:2;} 50%{z-index:0;} 70%{top:9px;z-index:0;} 90%{top:9px;z-index:0;opacity:1} 100%{top:9px;z-index:0;opacity:0}} /* IE */
@keyframes print-blank {0%{top:-6px;z-index:2;} 10%{top:-6px;z-index:2;} 50%{z-index:0;} 70%{top:9px;z-index:0;} 90%{top:9px;z-index:0;opacity:1} 100%{top:9px;z-index:0;opacity:0} } /* Opera */

@-moz-keyframes led-blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes led-blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes led-blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
@keyframes led-blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera */

/********PRINTING ANIMATION/************/

/****NEW UPDATE****/
.new-update
{
    position:relative;
}
.new-update::after {
    
    background: #5db061;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.update-blink::after
{
    -moz-animation:led-blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation:led-blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation:led-blink normal 2s infinite ease-in-out; /* IE */
    animation:led-blink normal 2s infinite ease-in-out; /* Opera */
}

.list-of-new-updates ol {
    padding-left: 20px;
}

.list-of-new-updates {
    padding: 20px 10px;
    background: white;
    margin: 0 20px;
    box-shadow: 0 2px 4px gray;
    border-radius: 2px;
}
/*HELP*/
.help-comtainer {
    display: none;
}
.help-comtainer {
    background: #0000007a;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 99;
}
    .help-comtainer img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 80%;
        max-height: 300px;
    }
    .display-inline-textbox{
        display:flex;
    }
    .display-inline-textbox > *:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .display-inline-textbox > *:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
    }

    .display-inline-textbox {
        display: flex;
    }
    .btn-right-overlap > *:last-child {
        position: absolute;
        top: 0px;
        right: 0;
    }

    .btn-right-overlap {
        position: relative;
    }
    .redtext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px !important;
    color: #FF091B !important;
    padding-left: 5px;
    line-height: 14px;
}

/**DASHBOARD**/
.dashboard-shortcuts {
    margin: 6px;
}

.dashboard-shortcuts h4 {
    font-size: 13px;
    font-weight: bold;
    color: #269de6;
    text-transform: uppercase;
}

.shortcut-container {
    position: relative;
    display: block;
    background: #ffffff;
    box-shadow: 0 0 3px #757575;
    margin-bottom: 15px;
    width: calc(100%);
    margin: 0;
    overflow: hidden;
}

.tab-container .tab.active {
    border-bottom: 2px solid #17a8ec;
    color: #17a8ec;
}

.tab-container .tab {
    font-size: 14px;
    display: table-cell;
    padding: 10px 10px;
    border-bottom: 2px solid #00800000;
    position: relative;
    top: 1px;
    cursor: pointer;
    display: none !important;
}

.tab-container .tab:hover {
    border-bottom: 2px solid #17a8ec;
}

.tab-container {
    display: block;
}

.tab-container .tab-content.active {
    display: block;
    display: flex;
    flex-flow: wrap;
}

.tab-container .tab-content {
   display: none;
    max-height: 130px;
    overflow: hidden;
    transition: all ease-in-out .5s;
    box-shadow: 0 2px 5px -1px #0000006b;
    background: linear-gradient(#e2f2f9 40%, #6ad4ff);
    position: relative;
    z-index: 9;
    border-bottom: 2px solid #848484;

    background: url(../Dashboard/images/login-bg.png);
    background-size: cover;
    background-repeat: repeat;
}

.tab-container:hover .tab-content {
    max-height: 1000px;
    transition: all ease-in-out .5s;
    
}
.tab-container .tab-content .shortcut-link a.y-icon {
    display: inline-block;
    float: left;
    padding: 14px 7px;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
}
.tab-container .tab-content .shortcut-link {
    text-align: center;
    cursor: pointer;
    padding: 0;
    float: left;
    border-right: 1px solid white;
    padding-right: 10px;
}
.tab-container .tab-content .shortcut-link .y-icon i {
    font-size: 14px;
    margin: 5px;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    transition: all ease-in-out .2s;
    background: transparent !important;
}

.tab-container .tab-content .shortcut-link p {
    font-size: 12px;
    color: #4a4a4a;
    font-weight: 500;
    margin: 0;
    display: inline-block;
    margin-bottom: 3px;
    float: left;
    padding:3px 0;
}
.tab-container .tab-content .shortcut-link p b {
    font-size: 16px;
    font-weight: bold;
    color: #479eff;
    line-height: 46px;
}

.tab-content .shortcut-link:hover .shotcut-list {
    bottom: 0;
}

.shotcut-list {
    transition: ease-in-out .3s;
    position: relative;
    bottom: -20px;
    color: #6d6d6d;
    font-weight: 500;
    display: block;
    background: linear-gradient(#d6d6d6,silver);
    border-radius: 0 0 5px 5px;
    font-family: arial;
    font-size: 12px;
}

.shotcut-list {
    color: #5e5e5e;
    font-weight: 400;
    display: block;
    background: linear-gradient(#d6d6d6,silver);
    border-radius: 0 0 5px 5px;
    font-family: arial;
    font-size: 12px;
    border-bottom: 1px solid #939090;
    display: none;
}

    .shotcut-list:hover {
        background: #a9cf96;
        color: white !important;
    }
/*.shortcut-link:hover i {
    background: #7fde8b !important;
}*/
/*.shortcut-link:hover p {
    color: #7fde8b !important;
}*/
.rounded-card {
    border-radius: 5px;
}
.graph-box {
    box-shadow: 0 0 4px grey;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;
    margin-right: 4px;
    margin-left: 4px;
}

.graph-heading h2 {
    padding: 7px 10px;
    background: linear-gradient( #e6e6e6, #efefef);
    margin: 0;
    color: #404040;
    font-size: 16px;
    float:left;
}
.graph-container > div.graph {
    min-height:300px;
}
.graph-container {
    height: 350px;
    overflow: auto;
    background:white;
}

.tab-btn-container {
  float: right;
  display: flex;
  position: relative;
  flex-flow: nowrap;
}
.graph-heading {
  display: inline-block;
  width: 100%;
  background: linear-gradient( #e6e6e6, #efefef);
}
.tab-btn {
  display: block;
  padding: 6px 10px;
  font-size: 14px;
  color: #5d5d5d;
  border-left: 1px solid #cecece;
  cursor: pointer;
}
.tab-btn.active {
  color: #fff !important;
  background: linear-gradient(#7087a1,#25313e) !important;
}
.graph-card-data {
    display: none;
}
.graph-card-graph {
    display: none;
}
.graph-card-data.active {
    display: block;
}
.graph-card-graph.active {
    display: block;
}

.ui-datepicker-trigger {
    display: none;
}
/**HIDE-BREADCUM-ALL**/
div.col-sm-12[style*="background-color: lightgoldenrodyellow"], div.col-sm-12[style*="background-color: white; font-size: 1em; height: 24px;"], div.col-sm-12[style*="background-color: white; font-size: 1em;height: 24px;"], div.col-sm-12[style*="background-color: white; font-size: 1em; height: 24px; margin-bottom: 5px;"] {
    display: none;
}
/*USE-THIS-SCRIPT-FOR-ERP-ICON*/
/*<span class="erp-icon" > ERP</span >*/
.erp-icon {
    font-weight: 900;
    color: #a70000;
    padding: 1px;
    background: #ffeeee;
    height: 16px;
    display: inline-block;
    font-size: 14px;
    border: 1px solid #de9999;
    line-height: 13px;
}
/*Autocomplate search*/
.hanging-bottom {
    position: relative;
    width: 100%;
    display: block;
}

.hanging-bottom .ele-hanging
{
    position:absolute;
    z-index:99 !important;
    top:24px;
    left:0;
}
.hanging-bottom:not(.no-arrow)::after {
    background: url(../images/arrow-down.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: RIGHT;
    content: "";
    width: 18px;
    height: 20px;
    position: absolute;
    top: calc(50% - 12px);
    right: 0;
    margin: 3px;
    transition: all cubic-bezier(0, 0, 0.2, 1.49) .5s;
    background-position: center;
}

.hanging-bottom.drop-active:not(.no-arrow)::after {
    transform: rotate(180deg);
}
.trends {
    max-height: 100px;
    display: none;
    background-color: white !important;
    box-shadow: 0 2px 5px #0000007a;
}
#trends {
    max-height: 100px;
    display: none;
    background-color: white !important;
    box-shadow: 0 5px 6px #00000030;
}
	
.trends option:hover{
	background: #1e90ff;
	color: white;
}
div#TopMenuSearchBox {
    margin-right: 10px;
}
#TopMenuSearchBox input.autocomplete-search {
    margin: 12px 0;
    border-radius: 20px;
    padding: 0 22px 0 10px;
    font-weight: 300;
    font-family: arial;
    border: 2px solid #d2d2d2;
}
#TopMenuSearchBox select option {
    padding: 3px 5px;
    border-bottom: 1px solid #f3f3f3;
    background: white;
    font-size: 12px;
    color: #0d74da;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    #TopMenuSearchBox .autocomplete-search:focus, #TopMenuSearchBox autocomplete-search.focus:focus {
        background: white;
        border: 2px solid #ff9941;
        outline: none;
    }  
    #TopMenuSearchBox select:focus {
        border-color: snow;
        box-shadow: 0 2px 5px black;
    }
#TopMenuSearchBox select {
    border-radius: 5px;
    padding: 0;
    border: none;
    top: 26px !important;
    overflow-y: auto !important;
}
    #TopMenuSearchBox i.fa-search {
        position: absolute;
        top: 7px;
        right: 10px;
        color: #c8c8c8;
        font-size: 12px;
    }
    /*FOOTER-SOCIAL-LINKS-HIDE*/
    footer.footer.lt.hidden-xs.b-t.b-dark {
        display: none;
    }

    span.hover-hint-msg {
        display: none;
        position: absolute;
    }

    img.company-logo {
        height: 57px;
        display: none;
    }
.list-divider-line {
    margin: 11px 10px;
    width: 1px;
    height: 28px;
    background: #616161;
}
    /*BIKE-ANIMATION*/
    bike.icon {
        display: block;
        height: 40px;
        width: 40px;
        margin: auto;
        position: absolute;
        background: white;
        overflow: hidden;
        top: 31px;
    }
    .loader bike {
        background-repeat: repeat;
        background: white;
        background-size: 25% 25%;
        border-radius: 100%;
        display: block;
        overflow: hidden;
        position: absolute;
        top: 32px;
    }

    bikebody {
        background-image: url('bike-img/bike-body.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        width: 80%;
        height: 80%;
        background-position: 15% 40%;
        z-index: 3;
        top: 7%;
        left: 3%;
        -webkit-animation: bike-shake infinite 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        animation: bike-shake infinite 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        animation-delay: 0s;
    }

    tyrerear {
        background-image: url(bike-img/tyre.png);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        background-position: 19% 61%;
        z-index: 1;
        -webkit-animation-name: rotate_wheel;
        animation-name: rotate_wheel;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
        animation-play-state: running;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
    }

    tyrefront {
        background-image: url(bike-img/tyre.png);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        background-position: 19% 61%;
        z-index: 2;
        -webkit-animation-name: rotate_wheel;
        animation-name: rotate_wheel;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
        animation-play-state: running;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
    }

    windfront {
        background-image: url(bike-img/wind-back.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        width: 40%;
        height: 40%;
        top: 10%;
        right: -100%;
        background-position: 19% 61%;
        z-index: 3;
        transition: all linear .3s;
        -webkit-animation: slide-air 4s infinite;
        -webkit-animation-delay: 1s;
        animation: slide-air 4s infinite;
        animation-delay: 1s;
    }

    windback {
        background-image: url(bike-img/wind-front.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        width: 40%;
        height: 96%;
        top: -15%;
        right: -134%;
        background-position: 19% 61%;
        opacity: .5;
        transition: all linear 3s;
        z-index: 1;
        -webkit-animation: slide-air 4s infinite;
        -webkit-animation-delay: 1.1s;
        animation: slide-air 4s infinite;
        animation-delay: 1.1s;
    }

    road {
        background-image: url(bike-img/road.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        width: 50%;
        height: 3%;
        top: 69%;
        right: -50%;
        background-position: 19% 61%;
        transition: all linear .5s;
        z-index: 0;
        -webkit-animation: slide-road linear .5s infinite;
        -webkit-animation-delay: 2s;
        animation: slide-road .5s linear infinite;
        animation-delay: 2s;
        z-index: 2;
    }
    bike.icon road {
        background-image: url(bike-img/road.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        width: 50%;
        height: 2%;
        top: 68%;
        right: -50%;
        background-position: 19% 61%;
        transition: all linear .5s;
        z-index: 0;
        -webkit-animation: slide-road linear .5s infinite;
        -webkit-animation-delay: 2s;
        animation: slide-road .5s linear infinite;
        animation-delay: 2s;
        z-index: 2;
    }
    bike.icon.night road {
        background-image: url(bike-img/road.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        width: 50%;
        height: 2%;
        top: 74%;
        right: -50%;
        background-position: 19% 61%;
        transition: all linear .5s;
        z-index: 0;
        -webkit-animation: slide-road linear .5s infinite;
        -webkit-animation-delay: 2s;
        animation: slide-road .5s linear infinite;
        animation-delay: 2s;
        z-index: 2;
        background: white;
    }
    .rotate-front {
        position: absolute;
        width: 25%;
        height: 25%;
        top: 45%;
        right: 8%;
        transform: rotate(45deg);
        transition: all ease-in-out .1s;
        -webkit-animation: tyre-shake-2 infinite 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        animation: tyre-shake-2 infinite 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        animation-delay: 0s;
        z-index: 1;
    }

    .rotate-rear {
        position: absolute;
        width: 25%;
        height: 25%;
        top: 45%;
        left: 7%;
        transform: rotate(45deg);
        transition: all ease-in-out .2s;
        -webkit-animation: tyre-shake-2 infinite 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        animation: tyre-shake-2 infinite 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        animation-delay: 1s;
        z-index: 1;
    }

    tree {
        position: absolute;
        top: 10%;
        right: -50%;
        height: 60%;
        width: 20%;
        z-index: 0;
        transition: all linear 1s;
        z-index: 0;
        -webkit-animation: slide-tree linear .5s infinite;
        -webkit-animation-delay: 2s;
        animation: slide-tree .5s linear infinite;
        animation-delay: 2s;
        z-index: 0;
    }

    tree:after {
        content: "";
        height: 78%;
        width: 100%;
        background: #21b100;
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        position: absolute;
    }

    tree:before {
        content: "";
        height: 34%;
        width: 30%;
        top: 68%;
        left: 39%;
        background: #711b1b;
        position: absolute;
    }

    bike.night bikebody:after {
        content: "";
        position: absolute;
        top: 28%;
        left: 89%;
        height: 80%;
        width: 228%;
        background: #ffffff;
        opacity: .6;
        clip-path: polygon(-3% -2%, 38% 143%, 250% 126%);
    }

    bike.night.icon bikebody:after {
        content: "";
        position: absolute;
        top: 28%;
        left: 89%;
        height: 80%;
        width: 228%;
        background: #fdfda2;
        opacity: .6;
        clip-path: polygon(-3% -2%, 38% 143%, 250% 126%);
    }
    bike.night {
        background-repeat: repeat;
        background: radial-gradient(circle, white 6%, #3881ef 5%), radial-gradient(circle, white 3%, #02132d 5%) 50% 20%, radial-gradient(circle, white 4%, #02132d 5%) 31% 40%,radial-gradient(circle, white 1%, #02132d 5%) 58% 63% !important;
        background-repeat: repeat-x;
        background-size: 26% 25% !important;
        border-radius: 100%;
    }
    .loader.form-header-icon bike.night {
        background: radial-gradient(circle, white 6%, #61a0ff 5%), radial-gradient(circle, white 3%, #02132d 5%) 50% 20%, radial-gradient(circle, white 4%, #02132d 5%) 31% 40%,radial-gradient(circle, white 1%, #02132d 5%) 58% 63% !important;
    }
    bike.night bikebody:before {
        content: "";
        position: absolute;
        top: 35%;
        left: 24%;
        height: 6%;
        width: 4%;
        background: #ff0000;
        opacity: .6;
        border-radius: 50% 0 0 50%;
        box-shadow: -5px 0 9px 3px red;
    }

    bike {
        background-repeat: repeat;
        background: white;
        background-size: 25% 25%;
        border-radius: 100%;
    }

    bike.night:after {
            content: "";
        height: 30%;
        width: 100%;
        background: #383838;
        position: absolute;
        bottom: 0;
        box-shadow: 0 0 50px white;
    }

    bike.night.icon:after {
        content: "";
        height: 30%;
        width: 100%;
        background: #383838;
        position: absolute;
        bottom: 0;
        box-shadow: 0 0 50px white;
    }

    bike.night tree:after {
        background: #21b100;
    }

    bike.night tree:before {
        background: #711b1b;
    }

    bike.circle {
        border-radius: 100%;
    }

    @-webkit-keyframes slide-road {
        100% {
            right: 100%;
        }
    }

    @keyframes slide-road {
        100% {
            right: 100%;
        }
    }

    @-webkit-keyframes slide-tree {
        100% {
            right: 100%;
        }
    }

    @keyframes slide-tree {
        100% {
            right: 100%;
        }
    }

    @-webkit-keyframes slide-air {
        0% {
            right: -100%;
        }

        100% {
            right: 300%;
        }
    }

    @keyframes slide-air {
        0% {
            right: -100%;
        }

        100% {
            right: 300%;
        }
    }

    @-webkit-keyframes rotate_wheel {
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes rotate_wheel {
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes bike-shake {
        10%, 90%, 30%, 50%, 70% {
            -webkit-transform: translate3d(0, -1%, 0);
            transform: translate3d(0, -1%, 0);
        }

        20%, 80%,40%, 60% {
            -webkit-transform: translate3d(0, 2%, 0);
            transform: translate3d(0, 2%, 0);
        }
    }

    @keyframes bike-shake {
        10%, 90%, 30%, 50%, 70% {
            -webkit-transform: translate3d(0, -1%, 0);
            transform: translate3d(0, -1%, 0);
        }

        20%, 80%,40%, 60% {
            -webkit-transform: translate3d(0, 2%, 0);
            transform: translate3d(0, 2%, 0);
        }
    }

    @-webkit-keyframes tyre-shake {
        20%, 80%,40%, 60% {
            -webkit-transform: translate3d(0, -1%, 0);
            transform: translate3d(0, -1%, 0);
        }

        10%, 90%, 30%, 50%, 70% {
            -webkit-transform: translate3d(0, 2%, 0);
            transform: translate3d(0, 2%, 0);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes tyre-shake {
        20%, 80%,40%, 60% {
            -webkit-transform: translate3d(0, -1%, 0);
            transform: translate3d(0, -1%, 0);
        }

        10%, 90%, 30%, 50%, 70% {
            -webkit-transform: translate3d(0, 2%, 0);
            transform: translate3d(0, 2%, 0);
        }

        100% {
            transform: rotate(360deg);
        }
    }


    @-webkit-keyframes tyre-shake-2 {
        20%, 40%, 60% {
            -webkit-transform: translate3d(0, -1%, 0);
            transform: translate3d(0, -1%, 0);
        }

        10%, 90%,80%, 30%, 50%, 70% {
            -webkit-transform: translate3d(0, 2%, 0);
            transform: translate3d(0, 2%, 0);
        }
    }

    @keyframes tyre-shake-2 {
        20%, 40%, 60% {
            -webkit-transform: translate3d(0, -1%, 0);
            transform: translate3d(0, -1%, 0);
        }

        10%, 90%,80%, 30%, 50%, 70% {
            -webkit-transform: translate3d(0, 2%, 0);
            transform: translate3d(0, 2%, 0);
        }
    }

    .loader-container {
        display:none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #77777773;
        z-index: 999999;
    }
    .loader {
        position: absolute;
        top: calc(50% - 80px);
        left: calc(50% - 50px);
    }
    .loader:not(.loader.form-header-icon):after {
        content: "";
        height: 110px;
        width: 110px;
        background: #ffffff00;
        position: absolute;
        top: 27px;
        left: -5px;
        border-radius: 100%;
        border-left: 3px solid #64d283;
        border-right: 3px solid #59b3ea;
        border-bottom: 3px solid #f3525a;
        border-top: 3px solid #dacc4d;
        transition: all ease-in-out .3s;
        transform: rotate(434deg);
        -webkit-animation-name: rotate_wheel;
        animation-name: rotate_wheel;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
        animation-play-state: running;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.7s;
    }
    .loader bike.circle {
        border-radius: 100%;
        background: white;
    }
    .loader-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000000d4;
        z-index: 999999;
    }
    .loader.form-header-icon {
        position: initial;
        transform: scale(.4);
        z-index: 999;
        display: inline-block !important;
        float: left;
    }

    .loader.form-header-icon tyrefront {
        right: 0;
    }

    .loader.form-header-icon tyrerear {
        left: 2px;
    }
    .loader.form-header-icon bike {
        top: -25px;
    }
    .loader.form-header-icon + span {
        margin-left: 50px;
    }
    .loader.form-header-icon bike.night:after {
        left: 0;
        background: #313131;
    }
img.product-logo {
    max-height: 40px !important;
    top: 2px;
    left: 16px !important;
    position: relative;
}
.navbar-brand img {
    max-height: fit-content;
    margin-top: -2px;
    left: -12px;
    vertical-align: middle;
}
.client-company-name {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding: 15px;
}
.client-company-name i 
{
    display:none;
  font-size: 12px;
  padding: 4px 4px;
  background: white;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  color: #e47d7d;
  position: absolute;
  left: -12px;
  top: 15px;
}

.client-company-name p {
  padding: 0;
  margin: 0;
}

.client-company-name p::first-letter {
  font-size: 20px;
  background:;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  color: #7dc5e4;
  text-align: center;
  padding: 2px 9px;
  letter-spacing: ;
  margin-right: 2px;
}
/*INPUT-HINT*/

span.input-hint {
    display: none;
    opacity: 0;
    position: absolute;
    top: 10px;
    width: auto;
    padding: 5px;
    background: #fffff0;
    border: 1px solid #9d9d92;
    border-radius: 5px;
    z-index: 0;
    left: 0;
    box-shadow: 0 2px 3px #2d2d2d87;
    transition: all ease-in 0s;
    color: #5d5d5d;
    font-size: 12px;
    font-family: arial;
}

span.input-hint.error {
background: #f7baba;
}
span.input-hint::after {
	content: "";
    position: absolute;
    top: -5px;
    left: calc(50% - 5px);
    height: 5px;
    width: 5px;
    border-bottom: 5px solid #70706d;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

input:focus ~ span.input-hint 
{
    display:block;
	opacity:1;
	top: 35px;
	z-index:10;
	transition:all cubic-bezier(0.59, 1.54, 1, 1) .3s;
}

span.input-hint.active-relative {
    position:relative;
    display: block;
    opacity: 1;
    transition: all cubic-bezier(0.59, 1.54, 1, 1) .3s;
}

aside#nav {
    background: url(../Dashboard/images/login-bg.png);
    background-size: cover;
    background-repeat: repeat;
}
header.bg-dark.dk.header.navbar.navbar-fixed-top-xs {
    background: linear-gradient(#ffffff, silver);
    background-size: cover;
    background-repeat: repeat;
}
section#content {
    background: #fff;
    padding-top: 15px;
}
.nav-primary ul.nav > li li a {

    font-weight: normal;
    text-transform: none;
    font-size: 13px;

}
.nav-primary ul.nav > li > a {

    padding: 11px 15px;
    position: relative;
    font-weight: bold;
    font-size: 14px;
    border-top: 1px solid transparent;
        border-top-color: transparent;
    border-color: rgba(255,255,255,0.05);
    transition: color .3s ease-in-out 0s;

}
nav.nav-primary ul.nav li ul li.active ul {
    background: #455e75 !important;
}
.nav-primary ul.nav > li:hover > a, .nav-primary ul.nav > li:focus > a, .nav-primary ul.nav > li > a:focus, .nav-primary ul.nav > li > a:active, .nav-primary ul.nav > li.active > a {
    color: #59c3e2;
    background-color: transparent !important;
    text-shadow: none;
}
.nav-primary ul.nav > li > a:hover {

}
.bg-dark.lt, .bg-dark .lt {
    background-color: #455e75; /*#455e75;*/
}
nav.nav-primary ul.nav li ul li.active ul {
    background: #567290 !important;
}
    nav.nav-primary ul.nav li ul li.active ul li ul {
        background: #7897b3 !important;
    }
.bg-dark .nav > li > a {
    color: #ffffff;
}
.nav-primary a.current {
    color: #ffffff !important;
    background: #4c80b5;
}
@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
.bg-dark .nav > li > a {
    color: #fff !important;
}
.nav-primary a.current:after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    display: block;
    background: #59c3e2;
    border-radius: 100%;
    right: 14px;
    top: calc(50% - 5px);
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
.nav-primary a.current {
    position:relative;
}
/*.showroom-top-shortcut:not(.active):hover > a, .showroom-top-shortcut:not(.active):hover > a, .workshop-top-shortcut:not(.active):hover > a, .workshop-top-shortcut:not(.active):hover > a, .leadgraph-top-shortcut:not(.active):hover > a, .leadgraph-top-shortcut:not(.active):hover > a, .erpadmin-top-shortcut:not(.active) > a {
    background: skyblue !important;
}*/
.call-us {
    cursor: pointer !important;
    cursor:pointer;
}
.hbox > aside, .hbox > section {
    transition: all cubic-bezier(0.82, 0.69, 0, 1.2) .3s;
}
.call-us .call-us-circle {
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    padding: 4px;
    border-radius: 100%;
    margin-right: 4px;
}
.call-us:hover .call-us-circle {
    color: #5fc56c;
    background: white;
    transition:all ease-in-out .2s;
    -webkit-animation: ripple 0.7s linear infinite;
    animation: ripple 0.7s linear infinite;
}
.call-us:hover i.fa-phone {
    animation: phone-shake 500ms infinite;
    -webkit-animation: phone-shake 500ms infinite;
}
.toggle-nav {
    height: 30px;
    width: 30px;
    display: inline-block;
    position: relative;
    top: 3px;
    left: 6px;
    border-radius: 22%;
    color: #ffffff !important;
    padding: 4px 0;
    border: 2px solid #ffffff;
    font-size: 19px;
    text-align: center;
    background: #e47d7d;
    cursor:pointer;
}
.toggle-nav:hover {
    color: #f5f5f5 !important;
    border-color: #59c3e2;
}
/*aside#nav.fullscreen {
    width: 0 !important;
}*/
.toggle-nav-1.fullscreen i.fa-list-ul {
    display: block;
}
.toggle-nav-1 i.fa-bars {
    display: block;
}
.toggle-nav-1.fullscreen i.fa-bars {
    display: none;
}

.toggle-nav-1 i.fa-list-ul {
    display: none;
}

    .toggle-nav-2.fullscreen i.fa-list-ul {
        display: none;
    }

    .toggle-nav-2 i.fa-bars {
        display: none;
    }

    .toggle-nav-2.fullscreen i.fa-bars {
        display: block;
    }

    .toggle-nav-2 i.fa-list-ul {
        display: block;
    }
/**MENU-COLOR**/
.bg {
    background-color: #2e3e4e !important;
}
li.list-bg.active.bg-danger {
    background-color: #a40052d1;
}
li.list-bg.bg-danger {
    background-color: transparent;
}
li.list-bg.active.bg-success {
    background-color: #4a4a97de;
}
li.list-bg.active.bg-new {
    background-color: #006ad5db;
}
li.list-bg.active.bg-primary {
    background-color: #004993e0;
}
li.list-bg.active.bg-old {
    background-color: #00a8a8e0;
}
li.list-bg.active.bg-info {
    background-color: #004993e0;
}
li.list-bg.active.bg-start {
    background-color: #00A653;
}

li.list-bg.bg-success {
    background-color: transparent;
}

li.list-bg.bg-new {
    background-color: transparent;
}

li.list-bg.bg-primary {
    background-color: transparent;
}

li.list-bg.bg-old {
    background-color: transparent;
}

li.list-bg.bg-info {
    background-color: transparent;
}

li.list-bg.bg-start {
    background-color: transparent;
}
ul.dropdown-menu.animated.fadeInRight {
    padding: 0;
    margin: 0;
    min-width: 222px !important;
    right: 3px !important;
    border-radius: 4px;
    box-shadow: 0 2px 4px 1px #00000036;
}
ul.dropdown-menu.animated.fadeInRight .arrow.top {
    left: 78%;
}
    /**SOFTWARE-TIPS**/
    #hiddenSoftwaresTips{
    display:none;
}
.tooltip-container .material-icons {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 0;
    transition: ease-in .1s;
    background-size: calc(100% + 4px);
    background-position: -2px -2px;
    opacity: .75;
    cursor: pointer !important;
    border-radius: 100%;
    transition: all ease-in-out .3s;
    transition-delay: 3s;
    opacity: .8;
    cursor:pointer;
}
.tooltip-container .material-icons:hover .me-con {
    box-shadow: 0 2px 5px 1px #000000d9;
}
.tooltip-container .material-icons:hover:after {
    background: white;
    box-shadow: 0 1px 3px 0px #0000007a;
    padding: 0 10px;
    border-radius: 10px 0 0 10px;
    z-index: -1;
    border: 1px solid #ff5f5f;
}
.tooltip-container .material-icons:hover .me-body:before {
    content: "";
    height: 145px;
    width: 502px;
    position: absolute;
    background: #ff000000;
    top: -105px;
    right: -54px;
    z-index: 0;
}
.tooltip-container .material-icons:after {
    content: "Mili";
    font-style: normal;
    position: absolute;
    top: 4px;
    right: 62px;
    font-size: 12px;
    color: #e25252;
    font-weight: bold;
    background: #ffffffdb;
    padding: 0 10px;
    border-radius: 10px 0 0 10px;
    z-index: -1;
}
.tooltip-container {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
.tooltip-container:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
    transition: .25s all ease;
    transition-delay: 0s;
    bottom: 43px;
    right: -12px;
}
.tooltip-container.active .tooltip-content {
    visibility: visible;
    opacity: 1 !important;
    transition-delay: 0s;
    transition: .25s all ease;
    bottom: 43px;
    right: -12px;
}
.tooltip-container:hover .material-icons {
    transition:all ease-in-out .2s;
    transition-delay: 0s;
    opacity: 1 !important;
}
.tooltip-container.active .material-icons {
    visibility: visible;
    opacity: 1 !important;
    transition-delay: 0s;
}

.tooltip-content {
    min-height: 60px;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background: linear-gradient(#fffcf0,#fffbef);
    width: 100px;
    right: -24px;
    padding: 10px;
    margin: 16px;
    font-size: 13px;
    width: 255px;
    transition: .25s all ease;
    transition-delay: .25s;
    border-radius: 4px;
    border: 1px solid #b9b9b9;
    z-index: 2;
    color: #353535;
    box-shadow: 0 -3px 4px #0000005c;
    padding-left: 55px;
    padding-bottom: 25px;
}
.tooltip-content:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 5px;
    height: 40px;
    width: 40px;
    background: url(https://assets.materialup.com/uploads/ef2f0ee0-6f32-478c-b160-f52a308ee211/preview);
    background-size: contain;
}
.tooltip-content .align-right {
    text-align: right;
}
.tooltip-content .align-right a {
    color: #0089ff;
    text-decoration: none;
    margin-top: 5px;
    display: block;
    border-radius: 4px;
}
.tooltip-content p{
    margin:0;
}
.tooltip-content .align-right a:hover {
    text-decoration: underline;
}
.next-tip {
    cursor: pointer;
    text-decoration: none;
}
.chat-start-text {
    position: absolute;
    bottom: 0;
    background: #fbeec6;
    margin: 2px;
    font-size: 11px;
    padding: 1px 22px;
    left: 0;
    width: calc(100% - 4px);
    text-align: center;
    color: #b96c6c;
    font-weight: bold;
}
.tooltip-content:after {
    content: "";
    position: absolute;
    border-width: 10px;
    border-style: solid;
    top: 100%;
    right: 20px;
    border-color: #656565 transparent transparent transparent;
}
.greyed-text {
    color: #5f5f5f;
    font-style: italic;
    font-size: 13px;
    width: 100%;
    display: block;
    font-weight: 100;
}
.center-block {
    margin-top: 6px !important;
}
.ctrl-inline-btn {
    padding: 2px 10px;
    width: 100%;
    border-radius: 2px;
}
.inline-label-holder {
    padding: 3px 0;
}
.calculation-part .control-holder {
    margin-bottom: 0px;
    display: block;
}
.no-record-row {
    background: #f7f7f7 !important;
}
.no-record-row td span{
    font-size:12px;
}
.form-bottom-btn-holder {
    display: inline-block;
    padding-top: 10px;
    width: 100%;
}

.form-upload-box {
    padding: 5px;
    border: 1px solid #94acb9;
    border-radius: 3px;
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-upload-box:before {
    position: absolute;
    top: -10px;
    content: "Upload here";
    font-size: 11px;
    left: 10px;
    background: #5897b9;
    padding: 1px 5px;
    border-radius: 3px;
    color: white;
}
.control-holder.right-align-label {
    display: block;
    text-align: right;
}
/**SOFTWARE-TIPS**/
.gallery-cell {
    width: calc(100% - 20px);
    height: calc(100vh - 122px);
    margin-right: 10px;
    counter-increment: gallery-cell;
    text-align: center;
    padding: 20px;
    margin: 10px;
    background: linear-gradient(#bdbecc,#5b8196);
    border-radius: 5px;
    box-shadow: 0 0 4px #0000005c;
    margin-top: 64px;
    cursor: grab;
}
.gallery-cell:active {
    cursor: grabbing;
}

.flicker-img-container {
    text-align: center;
    height: calc(100vh - 234px);
    margin-bottom: 20px;
    border: none;
}

.flicker-img-container video {
    height: calc(100% - 20px);
    border-radius: 5px;
    box-shadow: 0 0 10px #0000009c;
}

.flicker-text-container {
    text-align: center;
}
.flicker-text-container h4 {
    text-align: center;
    font-size: 16px;
    padding: 16px;
    color: #fbfbfb;
    font-family: unset;
    line-height: 20px;
    font-weight: 300;
    border-top: 1px solid #cccccc;
    text-shadow: 0 0 3px black;
    margin-bottom: 0;
}
/* big buttons, no circle */
.flickity-prev-next-button {
    width: 50px;
    height: 50px;
    background: transparent;
    position: absolute;
    top: calc(50% - 25px);
    border: none;
}

.flickity-prev-next-button.next {
    right: 15px;
}

.flickity-prev-next-button.previous {
    left: 15px;
}
/* arrow color */
.flickity-prev-next-button .arrow {
    fill: white;
}

.flickity-prev-next-button.no-svg {
    color: white;
}

.flickity-prev-next-button:hover {
    background: transparent;
}
/* hide disabled button */
.flickity-prev-next-button:disabled {
    display: none;
}

/* position dots in gallery */
ol.flickity-page-dots {
    position: absolute;
    bottom: 92px;
    width: calc(100% - 20px);
    padding: 0;
    margin: 0 10px;
    text-align: center;
}
/* white circles */
.flickity-page-dots .dot {
    width: 10px;
    height: 10px;
    opacity: 1;
    background: #fbfbfb;
    margin: 2px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
    background: #5fe818;
}

.flickity-page-dots .dot:not(.is-selected):hover {
    background: #e8cc67;
}

.software-tips-headline {
    padding: 10px 20px;
    margin: 0px;
    text-align: center;
    display: block;
    width: 100%;
    color: black;
    font-family: inherit;
    line-height: 35px;
}

.software-tips-headline img {
    top: -2px;
    left: -7px;
    height: 40px;
    width: 40px;
    position: relative;
}
video.lazy {
    filter: blur(2px);
    -webkit-filter: blur(2px);
}
.gallery.js-flickity .icon-expand {
    display:block;
}
.gallery.js-flickity .icon-compress {
    display: none;
}
.gallery.js-flickity.fullscreen .icon-expand {
    display: none;
}
.gallery.js-flickity.fullscreen .icon-compress {
    display: block;
}
a.toggle-fullscreen {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px;
    color: white;
    margin: 10px;
    border: 2px solid white;
    border-radius: 6px;
    height: 30px;
    width: 30px;
    opacity: .5;
    background: #bbbaba;
}
.gallery.js-flickity.normal.flickity-enabled.is-draggable.fullscreen {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000000bf;
}
.gallery.js-flickity.fullscreen ol.flickity-page-dots {
    position: absolute;
    bottom: 140px;
}
a.toggle-fullscreen:hover {
    opacity: 1;
    color: white !important;
    cursor: pointer;
}
/*PASSWORD METER*/
.password-validation-container span.input-hint {
    opacity: 0;
    display: none;
    position: absolute;
    top: 52px !important;
    width: auto;
    padding: 5px;
    background: #ffffeb;
    border: 1px solid #ccccb7;
    border-radius: 5px;
    z-index: 1;
    left: 0;
    box-shadow: 0 2px 3px silver;
    transition: all ease-in 0s;
    padding-bottom: 20px;
}

    span.input-hint.error {
        background: #f7baba;
    }

.password-validation-container span.input-hint::after {
    content: "";
    position: absolute;
    top: -6px !important;
    left: calc(50% - 5px);
    height: 4px;
    width: 0px;
    border-bottom: 5px solid #ccccb7;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

input:focus + span + span.input-hint {
    display: block;
    opacity: 1;
    top: 32px;
    z-index: 9999 !important;
    transition: all cubic-bezier(0.59, 1.54, 1, 1) .3s;
    padding-bottom: 18px;
}

ul.password-validation-type {
    list-style: none;
    padding: 0 10px;
    margin: 5px 0;
}

    ul.password-validation-type li:first-child {
        font-style: italic;
        font-size: 12px;
        color: #101010;
        line-height: 15px;
        border-bottom: 1px dotted;
        margin-bottom: 5px;
    }

.password-meter a.password-meter-range {
    display: block;
    max-width: 200px;
    width: 100%;
    float: left;
    height: 5px;
    background: #eaeaea;
    border-radius: 10px;
    box-shadow: 0 0 10px grey inset;
    position: relative;
    top: 3px;
}

.password-meter a.password-meter-text {
    display: block;
    max-width: 100px;
    width: 30%;
    float: left;
}

.password-meter a.password-meter-range i:first-child {
    width: 33.33%;
    float: left;
    height: 5px;
    background: linear-gradient(to right, #ff1818,#efef00);
}

.password-meter a.password-meter-range i:nth-child(2) {
    width: 33.33%;
    float: left;
    height: 5px;
    background: linear-gradient(to right, #efec00,#f1d50f);
}

.password-meter a.password-meter-range i:nth-child(3) {
    width: 33.33%;
    float: left;
    height: 5px;
    background: linear-gradient(to right, #f1d80d,#00dc11);
}

ul.password-validation-type li i.password-valid {
    color: limegreen;
    transition: all ease-in .3s;
    animation-name: blink-zoom;
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

ul.password-validation-type li i.password-invalid {
    color: red;
    transition: all ease-in .3s;
}

li.password-meter {
    position: relative;
    top: 2px;
}

@keyframes blink-zoom {
    0% {
        transform: sale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

a.password-meter-range needle {
    position: absolute;
    top: 2px;
    left: 0;
    content: "";
    color: white;
    text-shadow: 0px 0px 0px #000000, 1px 1px 0px #000000, 1px 1px 4px #000000;
    transition: all cubic-bezier(0.25, -0.18, 0.51, 1.46) .4s;
    height: 10px;
    width: 0;
    border-top: 5px solid #80808000;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #565656;
}

ul.password-validation-type li:not(:first-child) {
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 5px;
}
.footer-container-btn {
    padding: 10px 12px;
    border-top: 1px solid #ececec;
}
.footer-container-btn.right-btns {
    text-align: right;
}
/***MILI-ASSISTANT***/
.pos, .me-con, .me-body, .me-ponytail, .me-head, .me-hair, .me-bangs, .me-face {
    position: absolute;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.me-con {
    left: 45%;
    top: 45%;
    width: 120px;
    height: 120px;
    background: #ff5f5f;
    transition: all 0.2s;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

.tooltip-container .me-con {
    left: -65px;
    top: -50px;
    width: 120px;
    height: 120px;
    background: #ff5f5f;
    transition: all 0.2s;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(.5);
}

.tooltip-container .me-con {
    -webkit-border-radius: 60px 60px 2px;
    border-radius: 60px 60px 2px;
}

.me-con.active {
    left: 40%;
}

.me-con:hover {
    -moz-border-radius: 60px 60px 2px;
    -webkit-border-radius: 60px;
    border-radius: 60px 60px 2px;
    cursor: pointer;
}

.me-body {
    width: 6px;
    height: 10px;
    background: #ffd7c5;
    top: 72%;
    box-shadow: inset 0px 6px 0px 0px #e1b9a7;
}

    .me-body:before, .me-body:after {
        content: "";
        position: absolute;
    }

    .me-body:before {
        background: #ffd7c5;
        width: 6px;
        height: 6px;
        border-radius: 10px;
        top: 5px;
        z-index: 1;
    }

    .me-body:after {
        width: 26px;
        height: 15px;
        background: #ff9b29;
        border-radius: 20px 20px 0px 0px;
        top: 7px;
        z-index: 0;
        left: -9px;
        box-shadow: inset 4px 0px 0px rgba(255, 195, 127, 0.5);
    }

.me-ponytail:after {
    position: absolute;
    content: "";
    width: 10px;
    height: 20px;
    background: #040f24;
    top: 20px;
    left: -20px;
    -moz-border-radius: 0px 100px 0px 100px;
    -webkit-border-radius: 0px;
    border-radius: 0px 100px 0px 100px;
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.me-head {
    background: #ffd7c5;
    border-radius: 100px;
    height: 50px;
    width: 40px;
}

    .me-head:after, .me-head:before {
        content: "";
        top: -6px;
        left: 0px;
        width: 16px;
        height: 30px;
        background: #040f24;
        position: absolute;
        -moz-border-radius: 1px 10px 0px 10px;
        -webkit-border-radius: 1px;
        border-radius: 18px 10px 0px 27px;
        -moz-transform: rotate(53deg);
        -ms-transform: rotate(53deg);
        -webkit-transform: rotate(53deg);
        transform: rotate(53deg);
    }

    .me-head:after {
        top: -8px;
        left: 20px;
        width: 20px;
        height: 35px;
        -moz-border-radius: 10px 10px 10px 0px;
        -webkit-border-radius: 10px;
        border-radius: 7px 23px 15px 0px;
        -moz-transform: rotate(-50deg);
        -ms-transform: rotate(-50deg);
        -webkit-transform: rotate(-50deg);
        transform: rotate(-50deg);
    }

.mouth:before {
    content: "";
    width: 10px;
    height: 3px;
    position: absolute;
    border: 1px solid #820000;
    background: #040f24;
    top: 18px;
    left: calc(50% - 5px);
    border-radius: 0 0 10px 10px;
    transition: all linear .2s;
    -moz-animation: mouth-laugh 20s infinite;
    -webkit-animation: mouth-laugh 20s infinite;
    animation: mouth-laugh 20s infinite;
    animation-delay: 2s;
}

.tooltip-container:hover .mouth:before, .tooltip-container.active .mouth:before {
    -moz-animation: mouth-talk 3s infinite;
    -webkit-animation: mouth-talk 3s infinite;
    animation: mouth-talk 3s infinite;
    animation-delay: .5s;
}
.tooltip-container.no-tip:hover .mouth:before, .tooltip-container.no-tip.active .mouth:before {
    -moz-animation: none;
    -webkit-animation: none;
    animation: none;
}
.tooltip-container.no-tip:hover .me-con .head-container, .tooltip-container.no-tip.active .me-con .head-container {
    -moz-animation: none;
    -webkit-animation: none;
    animation: none;
}
.me-hair {
    width: 55px;
    height: 50px;
    background: #040f24;
    border-radius: 80px;
    top: 44%;
}

    .me-hair:after, .me-hair:before {
        content: "";
        left: -2px;
        top: 28px;
        width: 10px;
        height: 13px;
        background: #ffd7c5;
        position: absolute;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    .me-hair:after {
        left: 46px;
    }

.me-bangs:before, .me-bangs:after {
    content: "";
    position: absolute;
    height: 36px;
    width: 10px;
    background: #040f24;
    left: -27px;
    top: -13px;
    border-radius: 24px 0px 0px 24px;
    box-shadow: inset 2px -4px 0px #0a204b;
}

.me-bangs:after {
    left: 14px;
    width: 13px;
    height: 39px;
    border-radius: 0 40px 100px 0;
    box-shadow: none;
}

.me-face .eyes {
    -moz-animation: blink 3s infinite;
    -webkit-animation: blink 3s infinite;
    animation: blink 3s infinite;
}

    .me-face .eyes:after, .me-face .eyes:before {
        width: 4px;
        height: 15px;
        background: #000;
        position: absolute;
        content: "";
        left: -10px;
        top: -5px;
        border-radius: 2px;
    }

    .me-face .eyes:after {
        left: 5px;
    }

.me-face .cheeks:after, .me-face .cheeks:before {
    width: 8px;
    height: 8px;
    background: #fa6363a6;
    position: absolute;
    content: "";
    left: -15px;
    top: 10px;
    border-radius: 4px;
}

.me-face .cheeks:after {
    left: 6px;
}

.me-con .head-container {
    position: relative;
    top: 60px;
    -moz-animation: head-move 20s infinite;
    -webkit-animation: head-move 20s infinite;
    animation: head-move 20s infinite;
    animation-delay: 2s;
}

.tooltip-container:hover .me-con .head-container, .tooltip-container.active .me-con .head-container {
    -moz-animation: head-nod 2s infinite;
    -webkit-animation: head-nod 2s infinite;
    animation: head-nod 2s infinite;
    animation-delay: 1s;
}

.tooltip-container:hover .me-con .me-ponytail, .tooltip-container.active .me-con .me-ponytail {
    -moz-animation: ponytail-move-2 2s infinite;
    -webkit-animation: ponytail-move-2 2s infinite;
    animation: ponytail-move-2 2s infinite;
    animation-delay: 1s;
}

.me-con .me-ponytail {
    -moz-animation: ponytail-move 20s infinite;
    -webkit-animation: ponytail-move 20s infinite;
    animation: ponytail-move 20s infinite;
    animation-delay: 2s;
}

@keyframes blink {
    0% {
        transform: scaleY(1);
    }

    18% {
        transform: scaleY(1);
    }

    20% {
        transform: scaleY(0);
    }

    25% {
        transform: scaleY(1);
    }

    38% {
        transform: scaleY(1);
    }

    40% {
        transform: scaleY(0);
    }

    45% {
        transform: scaleY(1);
    }

    80% {
        transform: scaleY(1);
    }
}

@keyframes head-move {
    0% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }

    5% {
        transform: rotate(15deg);
    }

    10% {
        transform: rotate(15deg);
    }

    25% {
        transform: rotate(15deg);
    }

    27% {
        transform: rotate(0deg);
    }

    30% {
        transform-origin: 50% 50%;
        transform: rotate(0deg);
    }

    31% {
        transform: rotate(3deg);
    }

    32% {
        transform: rotate(-3deg);
    }

    33% {
        transform: rotate(3deg);
    }

    34% {
        transform: rotate(-3deg);
    }

    40% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }

    51% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    51.4% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    51.8% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    52.2% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    52.6% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    53% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    53.4% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    53.8% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    54.2% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    54.6% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    55% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    55.4% {
        transform: rotate(0deg);
        transform: translateY(0);
    }

    80% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }

    81% {
        transform: rotate(10deg);
        transform: translateY(0px);
    }

    84% {
        transform: rotate(-10deg);
        transform: translateY(0px);
    }

    90% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }

    100% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }
}

@keyframes ponytail-move {
    0% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }

    4% {
        transform-origin: top center;
        transform: rotate(-3deg);
    }

    6% {
        transform-origin: top center;
        transform: rotate(2deg);
    }

    8% {
        transform-origin: top center;
        transform: rotate(-3deg);
    }

    10% {
        transform-origin: top center;
        transform: rotate(2deg);
    }

    12% {
        transform-origin: top center;
        transform: rotate(-2deg);
    }

    25% {
        transform: rotate(-2deg);
    }

    30% {
        transform-origin: top center;
        transform: rotate(0);
    }

    51% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    51.4% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    51.8% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    52.2% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    52.6% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    53% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    53.4% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    53.8% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    54.2% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    54.6% {
        transform: rotate(0deg);
        transform: translateY(-1px);
    }

    55% {
        transform: rotate(0deg);
        transform: translateY(1px);
    }

    55.4% {
        transform: rotate(0deg);
        transform: translateY(0);
    }

    80% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }

    81% {
        transform: rotate(10deg);
        transform: translateY(0px);
    }

    84% {
        transform: rotate(-10deg);
        transform: translateY(0px);
    }

    90% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }

    100% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }
}

@keyframes mouth-laugh {
    0% {
        transform: rotate(0deg);
        transform: translateY(0px);
    }

    61.4% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    61.8% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    62.2% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    62.6% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    63% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    63.4% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    63.8% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    64.2% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    64.6% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    65% {
        width: 13px;
        height: 6px;
        top: 15px;
        left: calc(50% - 7px);
        border-radius: 0 0 10px 10px;
    }

    65.4% {
        width: 10px;
        height: 3px;
        top: 18px;
        left: calc(50% - 5px);
        border-radius: 0 0 10px 10px;
    }

    80% {
    }

    81% {
    }

    84% {
    }

    90% {
    }

    100% {
    }
}

@keyframes mouth-talk {
    5% {
        height: 2px;
        width: 11px;
        left: calc(50% - 5.5px);
        border-radius: 0 10px 10px 0px
    }

    7% {
        height: 4px;
    }

    12% {
        height: 1px;
    }

    17% {
        height: 3px;
    }

    20% {
        height: 3px;
    }

    23% {
        height: 1px;
    }

    26% {
        height: 2px;
    }

    29% {
        height: 4px;
    }

    32% {
        height: 3px;
    }

    35% {
        height: 2px;
    }

    38% {
        height: 1px;
    }

    41% {
        height: 3px;
    }

    44% {
        height: 3px;
    }

    47% {
        height: 1px;
    }

    49% {
        height: 3px;
        border-radius: 10px
    }

    50% {
        height: 1px;
        border-radius: 10px
    }

    55% {
        height: 2px;
        border-radius: 10px
    }

    57% {
        height: 1px;
        border-radius: 0 10px 10px 0px
    }

    57% {
        height: 4px;
    }

    59% {
        height: 3px;
        border-radius: 10px
    }

    63% {
        height: 2px;
    }

    68% {
        height: 4px;
    }
}

@keyframes head-nod {
    0% {
        top: 60px;
    }

    15% {
        top: 62px;
    }

    20% {
        top: 60px;
    }

    25% {
    }

    30% {
        top: 61px;
    }

    35% {
        top: 60px;
    }

    40% {
        top: 60px;
    }

    45% {
        top: 62px;
    }

    50% {
        top: 60px;
    }
}

@keyframes ponytail-move-2 {
    0% {
        top: 60px;
    }

    15% {
        top: 61px;
    }

    20% {
        top: 60px;
    }

    25% {
    }

    30% {
        top: 60px;
    }

    45% {
        top: 61px;
    }

    50% {
        top: 60px;
    }
}
/*LOADING-ANIMATION*/
.loading-message .spinner {
    width: 40px;
    height: 40px;
    background: #74a6f2;
    padding: 0;
}

    .loading-message .spinner div {
        width: 6%;
        height: 16%;
        background: #FFF;
        position: absolute;
        left: 49%;
        top: 43%;
        opacity: 0;
        -webkit-border-radius: 50px;
        -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
        -webkit-animation: fade 1s linear infinite;
    }

@-webkit-keyframes fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.25;
    }
}

.loading-message .spinner div.bar1 {
    -webkit-transform: rotate(0deg) translate(0, -130%);
    -webkit-animation-delay: 0s;
}

.loading-message .spinner div.bar2 {
    -webkit-transform: rotate(30deg) translate(0, -130%);
    -webkit-animation-delay: -0.9167s;
}

.loading-message .spinner div.bar3 {
    -webkit-transform: rotate(60deg) translate(0, -130%);
    -webkit-animation-delay: -0.833s;
}

.loading-message .spinner div.bar4 {
    -webkit-transform: rotate(90deg) translate(0, -130%);
    -webkit-animation-delay: -0.7497s;
}

.loading-message .spinner div.bar5 {
    -webkit-transform: rotate(120deg) translate(0, -130%);
    -webkit-animation-delay: -0.667s;
}

.loading-message .spinner div.bar6 {
    -webkit-transform: rotate(150deg) translate(0, -130%);
    -webkit-animation-delay: -0.5837s;
}

.loading-message .spinner div.bar7 {
    -webkit-transform: rotate(180deg) translate(0, -130%);
    -webkit-animation-delay: -0.5s;
}

.loading-message .spinner div.bar8 {
    -webkit-transform: rotate(210deg) translate(0, -130%);
    -webkit-animation-delay: -0.4167s;
}

.loading-message .spinner div.bar9 {
    -webkit-transform: rotate(240deg) translate(0, -130%);
    -webkit-animation-delay: -0.333s;
}

.loading-message .spinner div.bar10 {
    -webkit-transform: rotate(270deg) translate(0, -130%);
    -webkit-animation-delay: -0.2497s;
}

.loading-message .spinner div.bar11 {
    -webkit-transform: rotate(300deg) translate(0, -130%);
    -webkit-animation-delay: -0.167s;
}

.loading-message .spinner div.bar12 {
    -webkit-transform: rotate(330deg) translate(0, -130%);
    -webkit-animation-delay: -0.0833s;
}

.loading-message .spinner.success:after {
    height: 12px;
    width: 20px;
    content: "";
    position: absolute;
    border-left: 5px solid white;
    border-bottom: 5px solid white;
    transform: rotate(-45deg);
    top: 13px;
    left: 11px;
}
.loading-message .spinner.failure:after {
    height: 0;
    width: 20px;
    content: "";
    position: absolute;
    border-left: 5px solid white;
    border-bottom: 5px solid white;
    transform: rotate( -45deg );
    top: 18px;
    left: 11px;
}
.loading-message .spinner.failure:before {
    height: 0;
    width: 20px;
    content: "";
    position: absolute;
    border-left: 5px solid white;
    border-bottom: 5px solid white;
    transform: rotate( 45deg );
    top: 18px;
    left: 11px;
}
.spinner.warning:before {
    position: absolute;
    top: 12px;
    left: calc(50% - 1px);
    width: 4px;
    border-top: 13px solid #ffffff;
    border-left: .5px solid transparent;
    border-right: .5px solid transparent;
    content: "";
}

.spinner.warning::after {
    position: absolute;
    top: 27px;
    left: calc(50% - 1px);
    height: 4px;
    width: 4px;
    border-radius: 10px;
    background: white;
    content: "";
}
.loading-message .spinner.failure > div, .loading-message .spinner.success > div, .loading-message .spinner.warning > div {
    display: none;
}
.spinner.warning {
    background: #ffc062;
}
.spinner.success > * {
    display: none;
}
/*LOADING-MESSAGE*/
.flex-box {
    display: flex;
}

.loading-message {
    position: fixed;
    width: 100%;
    left: 0;
    top: -65px;
    height: 0;
    text-align: center;
    background: #00000017;
    z-index: 999;
    cursor: wait;
}

.loading-message-info {
    position: relative;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    background: white;
    color: gray;
}

.loading-message .spinner {
    background: #74a6f2;
    padding: 0;
    height: 100%;
    min-height: 40px;
    width: 40px;
}

.loading-message.show {
    height: 100%;
    top: 0;
}

.loading-message.no-load {
    height: 0;
}

.loading-message > .loading-message-box {
    display: inline-block;
    margin: 10px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    top: -60px;
    transition: all cubic-bezier(0.13, 0.55, 0.62, 1.17) .3s;
    box-shadow: 0 0 4px 1px #000000;
}

.loading-message.show > .loading-message-box {
    top: 0;
}

.loading-message-img {
    position: relative;
}

.loading-message-info {
    position: relative;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    background: white;
    color: #4e4e4e;
}
.loading-message-info p {
    margin: 0;
}
.spinner.success {
    background: #80c07c;
}

.spinner.failure {
    background: #ca6666;
}
/**RADIO-BOXED-INLINE**/
.radio-labeled-style-1 {
    display: flex;
}

.radio-labeled-style-1 .radio-labeled-input {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.radio-labeled-style-1 .radio-labeled-input input[type=radio] {
    opacity: 0;
    height: 20px;
    padding: 0;
    margin: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.radio-labeled-style-1 .radio-labeled-input:first-child {
    border-radius: 4px 0 0 4px;
}

.radio-labeled-style-1 .radio-labeled-input input[type=radio]:last-child {
}

.radio-labeled-style-1 .radio-labeled-input:last-child {
    border-radius: 0 4px 4px 0;
    border-right: 1px solid #828282;
}

.radio-labeled-style-1 .radio-labeled-input .fgh {
    background: #adadad;
    border: 1px solid #828282;
    border-right: 1px solid #9e9e9e;
}

.radio-labeled-style-1 .radio-labeled-input label {
    margin: 0;
    padding: 5px;
    text-align: center;
    display: block;
    font-weight: bold;
    color: white;
    background: #adadad;
    border: 1px solid #828282;
    border-right: 1px solid #adadad;
}

.radio-labeled-style-1 .radio-labeled-input:first-child label {
    border-radius: 4px 0 0 4px;
}

.radio-labeled-style-1 .radio-labeled-input:last-child label {
    border-radius: 0 4px 4px 0;
}

.radio-labeled-style-1 .radio-labeled-input input:hover label {
    background: #68af27;
}

.radio-labeled-style-1 .radio-labeled-input:hover label {
    background: #90cc5a;
    border-right: 1px solid #68af27;
}

.radio-labeled-style-1 .radio-labeled-input input:checked + label {
    background: linear-gradient(#6ffb6f, #409e40);
    border-right: 1px solid #44d244;
}
/***TEXT-SLIDER***/
li.shortcuts-crawler {
    padding: 14px;
}
.marquee {
    width: 300px;
    height: 23px;
    overflow: hidden;
    position: relative;
    border: 1px solid #525252;
    border-top: 1px solid #353535;
    border-bottom: 1px solid #7d7d7d;
    background-color: #0000008f;
    -webkit-border-radius: 5px;
    border-radius: 17px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
}

    .marquee p {
        position: absolute;
        font-family: Tahoma, Arial, sans-serif;
        width: 100%;
        height: 100%;
        margin: 0;
        line-height: 50px;
        text-align: center;
        color: #fff;
        transform: translateX(100%);
        line-height: 22px;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 100;
        font-family: inherit;
    }

        .marquee p:nth-child(1) {
            animation: left-one 20s ease infinite;
        }

        .marquee p:nth-child(2) {
            animation: left-two 20s ease infinite;
        }

@keyframes left-one {
    0% {
        transform: translateX(100%);
    }

    10% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes left-two {
    0% {
        transform: translateX(100%);
    }

    50% {
        transform: translateX(100%);
    }

    60% {
        transform: translateX(0);
    }

    90% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}
.blinker {
    height: 5px;
    width: 5px;
    display: block;
    background: #59c3e2;
    border-radius: 100%;
    right: 14px;
    top: calc(50% - 5px);
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
/**DOWNLOAD-OPTION**/
.download-option-box {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient( #0f0e50d9, #540f3ce8);
    z-index: 99;
}

    .download-option-box.active {
        display: block;
        z-index:999;
        opacity: 1;
    }

.download-option-box .download-option-container {
    min-width: 300px;
    max-width: 450px;
    min-height: 200px;
    width: 100%;
    max-height: calc(100vh - 100px);
    position: absolute;
    background: white;
    border-radius: 10px;
    overflow: auto;
    box-shadow: 0 4px 15px #000000e0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.download-option-container.empty {
    background-image: url('../Images/Empty-Recods.png');
    background-size: 85px;
    background-repeat: no-repeat;
    background-position: 50% 35%;
}
.download-option-container.empty:after {
    content: 'No records found';
    position: absolute;
    bottom: 52px;
    font-size: 13px;
    color: #888888;
    font-weight: 300;
    text-align: center;
    width: 100%;
}
.download-option-box .download-option-container ul {
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
    padding: 20px 0;
}

.close-download-box {
    background: #ff0000d9;
    height: 70px;
    width: 70px;
    position: absolute;
    right: 15px;
    top: 15px;
}

.close-download-box:before {
    position: absolute;
    content: "";
    height: 60px;
    width: 2px;
    background: #ffffffa8;
    top: 6px;
    right: 34px;
    transform: rotate(45deg);
}

.close-download-box:after {
    position: absolute;
    content: "";
    height: 60px;
    width: 2px;
    background: #ffffffa8;
    top: 6px;
    right: 34px;
    transform: rotate(-45deg);
}

.download-option-box .download-option-container ul li {
display: inline-block;
padding: 13px;
width: 97px;
height: 97px;
position: relative;
border: 1px solid #cccccc;
margin: 10px;
margin-bottom: 25px;
border-radius: 15px;
transition: all ease-in-out .1s;
}

.download-option-box .download-option-container ul li:hover {
    box-shadow: 0 0 0 3px #2f2f2f, 0 5px 6px #2d2d2d;
}

.download-option-box .download-option-container ul li input, .download-option-box .download-option-container ul li a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    opacity: 0;
    border: none;
    border-radius: 15px;
}

li.download-excel {
    background-image: url(../images/file-type-icons.png);
    background-size: 285px;
    background-position: 189px 0px;
}

li.download-pdf {
    background-image: url(../images/file-type-icons.png);
    background-size: 285px;
    background-position: 285px -95px;
}

li.download-word {
    background-image: url(../images/file-type-icons.png);
    background-size: 285px;
    background-position: 95px 0px;
}

li.download-csv {
    background-image: url(../images/file-type-icons.png);
    background-size: 285px;
    background-position: 191px -95px;
}

li.download-email {
    background-image: url(../images/file-type-icons.png);
    background-size: 285px;
    background-position: 0 0;
}
li.print-report {
    background-image: url(../images/file-type-icons.png);
    background-size: 285px;
    background-position: -190px -96px;
}

.download-option-box .download-option-container ul li:after {
    content: attr(data-name);
    position: absolute;
    bottom: -23px;
    width: 100px;
    left: -3px;
    font-weight: 400;
    color: black;
    font-size: 13px;
}
.download-option-container h4 {
    padding: 10px;
    margin: 0;
    background: #24204c;
    text-align: center;
    font-weight: bold;
    color: white;
    position: absolute;
    width: 100%;
    bottom: 0;
} 
/**CHECKLIST-TABLE-STYLE**/

.chklist-tr-half tr {
    width: 50%;
    float: left;
    position: relative;
    cursor: pointer !important;
}

.chklist-tr-half tr td {
    width: 100%;
    display: block;
    border-bottom: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

.chklist-tr-half tr td input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.chklist-tr-half tr td input + label {
    display: block;
    width: 100%;
    padding: 3.5px 7px 3.5px 25px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    transition:all ease-in-out .3s;
}

.chklist-tr-half tr td input + label:after {
    content: "";
    height: 15px;
    width: 15px;
    position: absolute;
    left: 5px;
    top: 4px;
    border: 1px solid #737373;
    border-radius: 2px;
    background: white;
}

.chklist-tr-half tr td input + label:before {
    content: "";
    height: 5px;
    width: 10px;
    position: absolute;
    left: 7.5px;
    top: 8px;
    border: 3px solid;
    border-top: none;
    border-right: none;
    transform: rotate(360deg);
    border-color: #43c35f;
    z-index: 1;
    transition:all ease-in-out .3s;
    opacity:0;
}
.chklist-tr-half tr td input:checked + label:before {
    opacity:1;
    content: "";
    height: 5px;
    width: 10px;
    transform: rotate(-49deg);
    transition: all ease-in-out .3s;
}
.chklist-tr-half tr td input:checked + label {
    background: #64da7d;
    color: white;
}
/*ACTION-CENTER*/
.panel.panel-default > .panel-heading .pull-right, .action-center {
    position: relative;
    top: -3px;
    display: flex;
}
    .panel.panel-default > .panel-heading .pull-right, .action-center span {
        text-align: right;
    }

.action-center > *:not(.download-option-box) {
    display: inline-block;
}

.fa.fa-download:hover {
    color: #ed3237;
}

.panel-heading .fa.fa-download, .action-btn {
    height: 26px !important;
    width: 26px !important;
    display: inline-block;
    position: relative;
    padding-top: 7px;
    width: 25px;
    text-align: center;
    background: white;
    border-radius: 3px;
    color: #2e3e4e;
    font-size: 15px;
    margin-right: 2px;
    padding: 5.5px;
}
/**SEARCH-TABLE-RECORDS**/
.table-search-box {
    display: inline-block;
    height: 25px;
    margin-right: 5px;
    overflow: hidden;
    font-size: 14px;
    line-height: 22px;
    position: relative;
    background: #f2f2f2;
    border-radius: 5px;
    text-align: center;
    transition: all ease-in-out .3s;
}
.table-search-box.expand-input {
    width: 180px;
    transition: all ease-in-out .3s;
}
.table-search-box #search_table_data {
    background: #f2f2f200;
    height: 25px;
    border: none;
    z-index: 1;
    padding: 0 25px 0 5px;
    color: black;
    font-weight: 500;
}

.table-search-box .fa-search {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px;
    color: #4c4b4b;
    z-index: 0;
}

.table-search-box .fa-search:hover {
    cursor: pointer !important;
    color: red;
}

/**BORDERED-FORM**/
.bordered-form {
    padding: 10px !important;
    border: 1px solid #2e3e4e;
    margin: 3px;
    margin-top: 10px;
    border-radius: 3px;
    padding-top: 20px !important;
    position: relative;
}

.bordered-form .bordered-form-heading {
    position: absolute;
    top: -19px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background: #2e3e4e;
    padding: 1px 10px 2px 10px;
    left: 10px;
    border: 1px solid #2e3e4e;
    border-radius: 10px;
}
/**MEDIA-QUERIES***/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .responsive-form {
        display: block !important;
    }

    .bordered-form {
        width: 100% !important;
        margin-top: 10px;
    }

    .wrapper {
        width: 100% !important;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .responsive-form {
        display: block !important;
    }

    .bordered-form {
        width: 100% !important;
        margin-top: 10px;
    }

    .wrapper {
        width: 100% !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .responsive-form {
        display: block !important;
    }

    .bordered-form {
        width: 100% !important;
        margin-top: 10px;
    }

    .wrapper {
        width: 100% !important;
    }
}

/**FORM-FIXED-BOTTOM**/
.fixed-form-bottom {
    position: fixed;
    bottom: 0;
    box-shadow: 0 -1px 4px #00000066;
    background: white;
    width: calc(100% - 220px);
    right: 0;
    transition: all cubic-bezier(0.82, 0.69, 0, 1.2) .3s;
}

.center-block.fixed-form-bottom-container {
    padding-bottom: 50px;
}

.panel-body.fixed-form-bottom .btn {
    margin-bottom: 0;
}
.toggle-nav-1 {
    display: none;
}

.toggle-nav-2 {
    display: inline-block !important;
}
aside#nav.fullscreen + section#content .fixed-form-bottom {
    width: 100%;
    transition: all cubic-bezier(0.82, 0.69, 0, 1.2) .3s;
}
@media (max-width: 767px) {
    html, body, aside#nav + section#content .fixed-form-bottom, aside#nav.fullscreen + section#content .fixed-form-bottom {
        width: 100%;
    }
    .toggle-nav-1 {
        display: inline-block !important;
    }
    .toggle-nav-2 {
        display: none !important;
    }
}
@media (min-width: 768px) {
    aside#nav.fullscreen {
        width: 0 !important;
    }
}
.inline-block {
    display: inline-block;
}
.inline-fullwidth-block {
    display: inline-block;
    width: 100%;
}
/*FORM-LOGO-SWITCH*/
header.panel-heading.bike i.fa-motorcycle {
    display: inline-block;
}

header.panel-heading.bike i.fa-automobile {
    display: none;
}
header.panel-heading i.fa-motorcycle {
    display: none;
}

header.panel-heading i.fa-automobile {
    display: inline-block;
}
.group-control {
    padding: 0 !important;
}

.group-control:first-child .form-control {
    border-left: 1px solid #d9d9d9;
    border-radius: 2px 0 0 2px;
}

.group-control:last-child .form-control {
    border-radius: 0 2px 2px 0;
}

.group-control .form-control {
    border-right: 1px solid #d9d9d9;
    border-radius: 0;
}
.group-control:first-child .form-control:focus {
    border-left: 2px solid #567290;
    border-radius: 2px 0 0 2px;
}
.inline-popup-modal {
    display: none;
    position: absolute;
    width: 500px;
    z-index: 9999;
    right: 0;
    top: calc(100%);
    background: linear-gradient( #f0f0f0, #d5d5d5);
    padding: 20px 10px 10px 10px;
    box-shadow: 0 0 4px;
    border-radius: 4px;
}

.inline-popup-modal i.fa-times {
    position: absolute;
    top: 2px;
    right: 2px;
    height: 15px;
    width: 15px;
    padding: 3px;
    background: red;
    color: white;
    border-radius: 3px;
    line-height: 10px;
}

.inline-popup-modal i.fa-minus {
    position: absolute;
    top: 2px;
    right: 2px;
    height: 15px;
    width: 15px;
    padding: 3px;
    background: #ecb85b;
    color: white;
    border-radius: 3px;
    line-height: 10px;
}

.inline-popup-modal:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 5%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #acacac;
}

label.checkbox-style-1 {
    margin: 0;
    position: relative;
}

label.checkbox-style-1 input {
    position: absolute;
    padding: 0;
    height: 15px;
    width: 15px;
    z-index: 2;
}

label.checkbox-style-1 input:checked ~ span {
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ffffff;
    height: 100%;
    width: 100%;
    z-index: 0;
}

/*CHECKBOX-LIST*/
.checkbox-list-style-1 {
    max-height: 100px;
    overflow: auto;
    width: 100%;
    border-top: 1px solid;
    padding: 0;
    background: white;
}

.checkbox-list-style-1 tr {
    width: 50%;
    float: left;
    display: flex;
}

.checkbox-list-style-1 td {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    padding: 2px 5px;
    width: 100%;
    position: relative;
}
.checkbox-list-style-1 label {
    padding: 0;
    margin: 0;
    font-size: 11px;
    white-space: nowrap;
    position: absolute;
    left: 23px;
    top: 0;
    height: 17px;
    padding-left: 0;
    width: calc(100% - 23px);
    text-overflow: ellipsis;
    overflow: hidden;
}

.checkbox-list-style-1 td input[type="checkbox"], .checkbox-list-style-1 input[type="radio"] {
    position: relative;
    top: 0;
    margin: 0px;
    margin-right: 5px;
}

.checkbox-list-style-1 td:hover {
    background: #b6daff;
    /* color: white; */
}

.checkbox-list-style-1 td input:checked + label {
    color: #50ad3f;
    font-weight: 600;
}

.checkbox-list-style-1 table, .checkbox-list-style-1 tbody {
    width: 100%;
    display: contents;
    padding: 0;
}
.checkbox-list-style-1 + .text-overview {
    display: none;
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 100%;
    padding: 0 5px;
    color: blue;
    font-size: 12px;
}

.checkbox-list-style-1:hover + .text-overview {
    display: block;
}
h4.toggle-box-handle {
    margin: 5px 0;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    background: #747476 !important;
    color: white;
    margin-bottom: 0;
}

.toggle-box-content {
    border: 1px solid #747476 !important;
    padding: 10px 5px;
    max-height: 250px;
    overflow: hidden;
    transition: ease-in-out .3s;
    width: 100%;
}

.blank-recods {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #b7b7b7;
    font-weight: 600;
    font-size: 20px;
    height: 100%;
    background: #fff;
    padding: 136px 0;
    top: 18px;
    top: -19px;
}

h4.toggle-box-handle {
    margin: 5px 0;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    background: #567290;
    color: white;
    margin-bottom: 0;
}

    h4.toggle-box-handle i.fa-minus, h4.toggle-box-handle.closed i.fa-plus {
        display: inline-block;
    }

    h4.toggle-box-handle.closed i.fa-minus, h4.toggle-box-handle i.fa-plus {
        display: none;
    }

.toggle-box-content {
    border: 1px solid #567290;
    padding: 10px 5px;
}

.toggle-box-content {
    border: 1px solid #567290;
    padding: 10px 5px;
    max-height: 250px;
    overflow: hidden;
    transition: ease-in-out .3s;
}

    .toggle-box-content.closed {
        max-height: 0;
    }

        .toggle-box-content.closed > *:not(.expand-to-view) {
            opacity: 0;
        }

i.expand-to-view {
    display: none;
}

.toggle-box-content.closed i.expand-to-view {
    display: block !important;
    position: absolute;
    top: 34px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
}
/*DASHBOARD*/
a.icon-list {
    display: block;
    background: #2e3e4e;
    color: white;
    text-align: center;
    border-top: white 2px solid;
}

.rounded-card.showroom-graph {
    display: none;
}

    .rounded-card.showroom-graph.active {
        display: block;
    }



#piechart > div:last-child > svg > g > g:last-child > g > g > g > g > g:last-child[role="group"] {
    display: none;
}

#serviceWiseChart > div:last-child > svg > g > g:last-child > g > g > g > g > g:last-child[role="group"] {
    display: none;
}

.shortcut-link.purchase-icon a.y-icon i {
    background: #dc8585 !important;
}

.shortcut-link.quotation-icon a.y-icon i {
    background: #77c8e9 !important;
}

.shortcut-link.challan-icon a.y-icon i {
    background: #6cc39c;
}

.shortcut-link.bill-icon a.y-icon i {
    background: #8b97d5;
}

.shortcut-link.receipt-icon a.y-icon i {
    background: #6794dc;
}

.shortcut-link:hover a.y-icon::after {
    transform: scale(1.2);
}



/*.shortcut-link:hover i {
    box-shadow: 0px 2px 3px #00000082 inset, 0 0 30px #0c0c0c26 inset;
}
*/
    .shortcut-link:hover i:before {
        
    }

.tab-content.content-s.active:after {
    content: '\f107';
    position: absolute;
    font-family: FontAwesome;
    font-size: 20px;
    bottom: -6px;
    left: calc(50% - 9px);
    display:none;
}

.amcharts-chart-div a {
    display: none !important;
}

.rounded-card.workshop-graph {
    display: none;
}

    .rounded-card.workshop-graph.active {
        display: block;
    }

#piechart > div:last-child > svg > g > g:last-child > g > g > g > g > g:last-child[role="group"] {
    display: none;
}

#serviceWiseChart > div:last-child > svg > g > g:last-child > g > g > g > g > g:last-child[role="group"] {
    display: none;
}

.shortcut-link.purchase-icon a.y-icon i {
    background: #dc8585 !important;
}

.shortcut-link.quotation-icon a.y-icon i {
    background: #77c8e9 !important;
}

.shortcut-link.challan-icon a.y-icon i {
    background: #6cc39c;
}

.shortcut-link.bill-icon a.y-icon i {
    background: #8b97d5;
}

.shortcut-link.receipt-icon a.y-icon i {
    background: #6794dc;
}

.shortcut-link:hover a.y-icon::after {
    transform: scale(1.2);
}

.tab-container .tab-content .shortcut-link p {
    color: #545454 !importabt;
}

.tab-content.content-s.active:after {
    content: '\f107';
    position: absolute;
    font-family: FontAwesome;
    font-size: 20px;
    bottom: -6px;
    left: calc(50% - 9px);
}

.amcharts-chart-div a {
    display: none !important;
}
/*LEADGRAPH-CARDS*/
.top-shortcut-row {
    width: 100%;
    display: flex;
    /* display: block; */
    margin: 0 -5px;
}

.top-shortcut-card {
    width: 25%;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px #00000047;
    width: 25%;
    height: 60px;
    margin: 0 5px;
    border-radius: 5px;
    overflow: hidden;
}

.card-container {
}

.card-container {
    display: table;
}

.image-holder {
    height: 60px;
    display: table-cell;
    width: auto;
}

i.fa.fa-home {
}

.image-holder i.fa {
    font-size: 25px;
    margin: 12px;
    border: 1px solid #ececec;
    border-radius: 20%;
    background: #1973c5;
    color: #ffffff;
    padding: 5px 0;
    text-align: center;
    width: 37px;
    height: 37px;
}

.card-container p {
    margin: 0;
    font-size: 13px;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    font-weight: 700;
    line-height: 20px;
}

    .card-container p b {
        color: #2872c5;
        font-size: 17px;
        line-height: 20px;
        display: block;
    }

.card-container a {
    display: table-cell;
    padding: 12px;
    vertical-align: middle;
    border-left: 1px solid #ececec;
    font-weight: bold;
    color: #137fc0;
    background: #efefef;
}

    .card-container a:hover {
        background: #f5466b;
        color: white;
        border-radius: 0 5px 5px 0;
    }

.top-shortcut-card:hover .card-container .image-holder, .top-shortcut-card:hover .card-container p, .top-shortcut-card:hover .card-container p b {
    background: #137fc0;
    color: white;
    cursor: pointer;
}

    .top-shortcut-card:hover .card-container .image-holder i.fa {
        background: #dc7171;
    }
/*Checkbox-list*/
.ckechkbox-list-2-dropdown {
    position: relative;
}
/*--.ckechkbox-list-2-dropdown::after {
        content: "";
        background-image: url("https://cdn1.iconfinder.com/data/icons/ios-11-ui-elements-vol-1/29/25_dropdown_menu_down_arrow-128.png");
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 99;
        height: 20px;
        width: 20px;
        background-size: 100%;
        background-repeat: no-repeat;
    }--*/
.checkbox-list-input, .checkbox-list-input:focus {
    display: block;
    background: #28d094;
    border: none !important;
    color: white !important;
    cursor: pointer;
}

.ckechkbox-list-2-dropdown .checkbox-list-select {
    display: none;
    max-height: 100px;
    position: absolute;
    top: 25px;
    left: 0;
    background: white;
    overflow-y: auto;
    width: 100%;
    min-width: 150px;
    border: 1px solid silver;
    box-shadow: 0 4px 8px gray;
    z-index: 99;
}

.ckechkbox-list-2-dropdown .checkbox-list-input:focus + .checkbox-list-select, .checkbox-list-select:hover, .checkbox-list-select:focus {
    display: block;
}

.ckechkbox-list-2-dropdown .selected {
    background: #28d094;
}

    .ckechkbox-list-2-dropdown .selected * {
        color: White;
    }
/*Total records label*/
.btn.btn-success + label {
    position: absolute;
    font-size: 12px;
    top: 52px;
    left: 12px;
    color: #139a6a;
    font-weight: 500;
}

/*POPUP-HINT*/
/*IN CONTROL HINT*/
.incontrol-popuphint-holder {
    position: relative;
}

    .incontrol-popuphint-holder .incontrol-popuphint {
        display: none;
        position: absolute;
        background: #efefef;
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid #bbbbbb;
        color: #4a4a4a;
        font-size: 12px;
        max-width: 200px;
        white-space: nowrap;
        transition: all ease-in-out .5s;
    }

    .incontrol-popuphint-holder:hover > .hint-pos-top {
        display: block;
        transition: all ease-in-out .5s;
        bottom: calc(100% + 5px);
        box-shadow: 0 -4px 6px -3px grey, 0 0 4px silver;
    }

    .incontrol-popuphint-holder:hover > .hint-pos-left {
        display: block;
        transition: all ease-in-out .5s;
        right: calc(100% - 20px);
        box-shadow: 0 -4px 6px -3px grey, 0 0 4px silver;
    }

    .incontrol-popuphint-holder:hover > .hint-pos-bottom {
        display: block;
        transition: all ease-in-out .5s;
        top: calc(100% + 5px);
        box-shadow: 0 4px 6px -3px grey, 0 0 4px silver;
    }

    .incontrol-popuphint-holder:hover > .hint-pos-right {
        display: block;
        transition: all ease-in-out .5s;
        left: calc(100% - 20px);
        box-shadow: 0 -4px 6px -3px grey, 0 0 4px silver;
    }

.hint-pos-top {
    bottom: calc(100% + 20px);
}

.hint-pos-right {
    left: calc(100% - 20px);
}

.hint-pos-bottom {
    top: calc(100% + 20px);
}

.hint-pos-left {
    right: calc(100% - 20px);
}

.hint-dir-b-r::after {
    content: "";
    position: absolute;
    border-top: 5px solid #bbbbbb;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    bottom: -5px;
    left: calc(100% - 20px);
}

td.table-action-control {
    padding: 0 !important;
}

.btn-input-inline {
    width: 100%;
    position: relative;
    top: 20px;
    height: 25px;
    line-height: 15px;
}
/*MENU-SHOW-BY-TAB*/
#showroom_menu, #workshop_menu, #leadgraph_menu, #account_menu, #gst_menu, #hr_menu, #callcenter_menu, #erpworkshop_menu, #erpshowroom_menu, #erpleadgraph_menu {
    display: none;
}

#showroom_menu.active, #workshop_menu.active, #leadgraph_menu.active, #account_menu.active, #gst_menu.active, #hr_menu.active, #callcenter_menu.active, #erpworkshop_menu.active, #erpshowroom_menu.active, #erpleadgraph_menu.active {
    display: initial;
}

[class*="top-shortcut"] {
    padding: 0 !important;
    margin: 0 !important;
}
/*header ul.nav.navbar-nav a {
    color: #464646 !important;
    padding:12px 7px;
    cursor:pointer;
}*/
header ul.nav.navbar-nav a {
    color: #464646 !important;
    padding: 12px 7px;
    cursor: pointer;
    font-weight: 600;
}
.top-shortcut:hover > a {
    background: linear-gradient(#d4d4d45e,#9292925e) !important;
}
[class*="top-shortcut"] > a i {
    padding: 6px 0 !important;
    border-radius: 20px;
    color: #353535 !important;
    width: 15px;
    height: 25px;
    text-align: center;
}
li.top-shortcut.active > a {
    color: #fff;
    background: transparent !important; /*linear-gradient(#eaeaea, #dcdcdc) !important*/;
}
li.top-shortcut.active a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background: #585858;
}
 /*   [class*="top-shortcut"] > a {
        padding: 6px 0 !important;
        border-radius: 20px;
        background: #d8d8d8 !important;
        color: #616161 !important;
        width: 25px;
        height: 25px;
        text-align: center;
        border: 1px solid white;
    }

.showroom-top-shortcut.active > a, .showroom-top-shortcut:active > a, .workshop-top-shortcut.active > a, .workshop-top-shortcut:active > a, .leadgraph-top-shortcut.active > a, .leadgraph-top-shortcut:active > a, .account-top-shortcut.active > a, .account-top-shortcut:active > a, .gst-top-shortcut.active > a, .gst-top-shortcut:active > a, .hr-top-shortcut.active > a, .hr-top-shortcut:active > a, .erpadmin-top-shortcut.active > a, .erpadmin-top-shortcut:active > a {
    background: #e47d7d !important;
    color: white !important;
}
.top-shortcut.active > a, .top-shortcut:active > a {
    background: #e47d7d !important;
    color: white !important;
}
.showroom-top-shortcut.active > a, .showroom-top-shortcut:active > a, .workshop-top-shortcut.active > a, .workshop-top-shortcut:active > a, .leadgraph-top-shortcut.active > a, .leadgraph-top-shortcut:active > a, .account-top-shortcut.active > a, .account-top-shortcut:active > a, .gst-top-shortcut.active > a, .gst-top-shortcut:active > a, .hr-top-shortcut.active > a, .hr-top-shortcut:active > a, .erpadmin-top-shortcut.active > a, .erpadmin-top-shortcut:active > a {
    background: #e47d7d !important;
    color: white !important;
}

.workshop-top-shortcut, .leadgraph-top-shortcut, .account-top-shortcut, .showroom-top-shortcut, .gst-top-shortcut, .erpadmin-top-shortcut {
    position: relative;
    margin: 12px 3px;
}*/
.rounded-card.workshop-graph, .rounded-card.showroom-graph, .rounded-card.leadgraph-graph, .rounded-card.account-graph, .rounded-card.gst-graph, .rounded-card.hr-graph {
    display: none;
}

    .rounded-card.workshop-graph.active, .rounded-card.showroom-graph.active, .rounded-card.leadgraph-graph.active, .rounded-card.account-graph.active, .rounded-card.gst-graph.active, .rounded-card.hr-graph.active {
        display: block;
    }
.graph-card-graph svg + a {
    display: none !important;
}
.filter-control {
    display: inline-block;
    width: auto;
    position: relative;
}

.filter-control input, .filter-control select {
    padding: 8.5px 15px 8.5px 10px;
    border: none;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    border: none !important;
    background: transparent;
    border-right: 1px solid #cecece !important;
    max-width: 100px;
}

.graph-card .filter-control::after {
    content: '\f107';
    position: absolute;
    right: -4px;
    font-family: FontAwesome;
    right: 4px;
    top: calc(50% - 11px);
    font-size: 15px;
}
/**ADD TO COMMON.CSS IN NEW PROJECT-2020-07-21**/
=======
#showroom_menu.active, #workshop_menu.active, #leadgraph_menu.active, #account_menu.active, #gst_menu.active, #erpadmin_menu.active {
    display: initial;
}

    /**ADD TO COMMON.CSS IN NEW PROJECT-2020-07-21**/

    .AutoExtender {
        list-style: none;
        padding: 0;
        background: white;
        border: 1px solid silver;
        box-shadow: 0 0 4px gray;
    }

    .AutoExtenderList, .AutoExtenderHighlight {
        border-bottom: 1px solid silver;
        padding: 2px 5px;
    }

    .AutoExtenderHighlight {
        background: skyblue;
    }
    /**FORM-EXPAND**/
.form-screen-toggle {
    padding: 5px;
    height: 25px;
    font-size: 11px;
    width: 25px;
    display: inline-block;
    top: 0;
    right: 0;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 6px;
    background: #2e3e4e;
    margin-left: 5px;
    font-size: 13px;
}

    .form-screen-toggle .fa-expand {
        display: block;
    }

    .form-screen-toggle.full .fa-compress {
        display: block;
    }

    .form-screen-toggle .fa-compress {
        display: none;
    }

    .form-screen-toggle.full .fa-expand {
        display: none;
    }

    .form-screen-toggle:hover {
        border-color: #ff8010;
        color: #ff8010 !important;
    }

.addon-right ~ .addon-btn, .addon-right + ul ~ .addon-btn {
    min-width: 25px;
    color: white !important;
    vertical-align: middle;
    border-radius: 0 3px 3px 0;
    display: table-cell;
    position: absolute;
    height: 100%;
    font-size: 12px;
    background: #2e3e4f;
    border: 1px solid #2e3e4f;
    z-index: 9;
    cursor: pointer;
    transition: all ease-in .1s;
    padding: 5px;
    line-height: 13px;
    top: 0;
    right: 0;
}
.addon-right ~ .addon-btn *, .addon-right + ul ~ .addon-btn *{
    color:white;
}
.ledger-balance.dr {
    background: #ff5656;
}
.ledger-balance.cr {
    background: #42a042;
}
.ledger-balance {
    opacity: 1;
    transition: all ease-in .3s;
    position: absolute;
    right: 0;
    font-size: 10px;
    height: 18px;
    padding: 0 4px;
    line-height: 18px;
    color: white;
    border-radius: 10px 0 0 10px;
    z-index:99;
}
.select-ledger:focus ~ .ledger-balance {
    opacity: 0;
}

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 3px !important;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
    color: #fff !important;
    background-color: #00b360;
    border-color: #007941;
    outline: none;
    box-shadow: 0 0 35px #00000026 inset;
}
.btn-primary {
    background: #4c80b5;
}
.btn-success {
    background: #00B364;
}
.btn-danger {
    background: #eb1f12;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    color: #fff !important;
    background-color: #4c80b5;
    border-color: #4c80b5;
    outline: none !important;
    box-shadow: 0 0 35px #00000026 inset;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
    color: #fff !important;
    background-color: #00b360;
    border-color: #007941;
    outline: none !important;
    box-shadow: 0 0 35px #00000026 inset;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
    color: #fff !important;
    background-color: #eb1f12;
    border-color: #bf160c;
    outline: none !important;
    box-shadow: 0 0 35px #00000026 inset;
}
.button-controls {
    position: absolute !important;
    top: calc(100% - 59px) !important;
    float: none !important;
    padding: 14px 20px !important;
    border-top: 1px solid #c0c0c0;
    left: 0;
    width: 100%;
}
/************NEW BUTTONS************/
.auto-btn {
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    transition: box-shadow ease-in-out .1s;
    box-shadow: 0 4px 4px -1px #0000005c
}
.auto-btn .fa-spinner{
    display:none;
}
.auto-btn.loading .fa-spinner{
    display:inline;
    /*animation: spinner .6s linear infinite;*/
}
.auto-btn.loading .btn-icon{
    display:none;
}
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
.auto-btn-general {
    background: #ceffdf;
    background: #ffffff;
    border-radius: 3px;
    color: #333232;
    border: 1px solid silver;
    font-weight: 500;
    display: inline-flex;
}
.auto-btn-general:hover span {
    color: black;
}
.auto-btn:hover {
    box-shadow: 0 9px 4px -5px #0000007a;
    border: 1px solid #616161;
}
/*GENERAL BUTTON*/
.auto-btn-general i {
    font-size: 16px;
    line-height: 10px;
    padding: 9px 10px;
    background: #e4e4e4;
    border-radius: 2px 0 0 2px;
    border-right: 1px solid silver;
}

.auto-btn-general span {
    padding: 0px 10px;
    display: inline-block;
}
.auto-btn.auto-btn-general:hover i {
    color: white;
    background: #9a9a9a;
}
.auto-btn.auto-btn-general:hover i {
    color: white;
    background: #616161;
}
.auto-btn.auto-btn-success:hover span {
    color: #000000;
}
/*SUCCESS BUTTON*/
.auto-btn-success {
    background: #01a285;
    border-radius: 3px;
    color: #ffffff;
    border: 1px solid #017d67;
    font-weight: 500;
    display: inline-flex;
}
.auto-btn-success i {
    font-size: 16px;
    line-height: 10px;
    padding: 9px 10px;
    color: #ffffff;
    background: #017d67;
    border-radius: 2px 0 0 2px;
    border-right: 1px solid #219269;
}
.auto-btn-success span {
    padding: 0px 10px;
    display: inline-block;
}
.auto-btn.auto-btn-success:hover {
    border: 1px solid #048069;
    background: white;
}
.auto-btn.auto-btn-success:hover i {
    color: white;
    background: #037b66;
}
.auto-btn.auto-btn-success:hover span {
    color: #171717;
}

/*SUCCESS BUTTON*/
.auto-btn-success-white {
    background: #ffffff;
    border-radius: 3px;
    color: #ffffff;
    border: 1px solid #017d67;
    font-weight: 500;
    display: inline-flex;
}
.auto-btn-success-white i {
    font-size: 16px;
    line-height: 10px;
    padding: 9px 10px;
    color: #ffffff;
    background: #279884;
    border-radius: 2px 0 0 2px;
    border-right: 1px solid #219269;
}
.auto-btn-success-white span {
    padding: 0px 10px;
    display: inline-block;
    color: #171717;
}
.auto-btn.auto-btn-success-white:hover {
    border: 1px solid #048069;
}
.auto-btn.auto-btn-success-white:hover i {
    color: white;
    background: #017d67;
}
.auto-btn.auto-btn-success-white:hover span {
    color: #017d67;
}
.auto-btn:active, .auto-btn:focus {
    box-shadow: 0 7px 4px -5px #00000047;
    outline: none;  
}

/*DANGER BUTTON*/
.auto-btn-danger {
    background: #ffffff;
    border-radius: 3px;
    color: #ffffff;
    border: 1px solid #da1b1b;
    font-weight: 500;
    display: inline-flex;
}
.auto-btn-danger i {
    font-size: 16px;
    line-height: 10px;
    padding: 9px 10px;
    color: #ffffff;
    background: #f14040;
    border-radius: 2px 0 0 2px;
    border-right: 1px solid #da1b1b;
}
.auto-btn-danger span {
    padding: 0px 10px;
    display: inline-block;
    color: #171717;
}

.auto-btn.auto-btn-danger:hover {
    border: 1px solid #c70808;
}
.auto-btn.auto-btn-danger:hover .btn-icon-holder {
    color: white;
    background: #da2e2e;
}
.auto-btn.auto-btn-danger:hover span {
    color: #c70808;
}

/*WRNING BUTTON*/
.auto-btn-warning {
    background: #ffffff;
    border-radius: 3px;
    color: #ffffff;
    border: 1px solid #fdba3f;
    font-weight: 500;
    display: inline-flex;
}

.auto-btn-warning i {
    font-size: 16px;
    line-height: 10px;
    padding: 9px 10px;
    color: #ffffff;
    background: #fdba3f;
    border-radius: 2px 0 0 2px;
    border-right: 1px solid #fdba3f;
}

.auto-btn-warning span {
    padding: 0px 10px;
    display: inline-block;
    color: #171717;
}

.auto-btn.auto-btn-warning:hover {
    border: 1px solid #efa41c;
}

.auto-btn.auto-btn-warning:hover .btn-icon-holder {
    color: white;
    background: #efa41c;
}

.auto-btn.auto-btn-warning:hover span {
    color: #efa41c;
}

/*DATEPICKER*/
.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active[disabled], .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active.disabled:hover[disabled] {
    background-color: #577591;
}
.datepicker-days td {
    font-size: 13px;
}
.datepicker-days th {
    color: #154775;
}
/*TOUR*/
.popover-title {
    color: black;
}
.popover-content {
    color: black;
}
.popover-navigation .btn-group .btn {
    margin: 0 5px;
}
.popover-navigation .btn-group .btn:nth-child(2):not(:disabled) {
    background: #37ad50 !important;
    color: white !important;
}
button.btn.btn-sm.btn-default {
    color: white !important;
}

/*HEADER*/
span.header-tab {
    display: inline-block;
    color: #353535 !important;
    padding: 15px 4px;
    font-size: 13px;
    cursor: pointer;
}

span.header-tab.active {
    border-bottom: 2px solid #424040;
}

span.header-tab i {
    color: #565656;
}

header ul.nav.navbar-nav a {
    color: #464646 !important;
}

span.header-tab i {
    color: #565656;
    margin-right: 5px;
}
.header-action-btn {
    padding: 15px 10px !important;
}
.header-action-btn:hover {
    background: transparent !important;
    box-shadow: 0 0 63px #00000012 inset;
}
.header-action-btn:focus, .header-action-btn:active {
    background: #ffffff00 !important;
    box-shadow: 0 0 63px #0000004a inset;
}

/*MODAL*/
.modal-content {
    border-radius: 6px !important;
}
.modal-header {
    color: #fff;
    background: linear-gradient(#5f7f9e,#2e3e4e);
    height: 40px;
    padding: 6px 10px !important;
    border-radius: 5px 5px 0 0;
}

button.close {
    color: white !important;
    opacity: 1;
    font-size: 28px;
}