/*##################################### container settings ############################## */
body {
    background-color: #ebf1ed;
    overflow-y: scroll !important;
    padding-bottom: 90px;
    padding-top: 75px;
}

#container-submenu {
    padding-bottom: 20px;
}

#container-submenu-l2 > div.row {
    padding-bottom: 20px;
}

/*##################################### SVG waves ############################## */
body .svg-wraper {
    position: fixed;
    top: 30%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
}

body .svg-wraper svg {
    display: block;
    z-index: -1;
}

body .svg-wraper .svg-filler {
    background-color: #D1E4D7;
    height: 100%;
}

/*##################################### utils ############################## */
/*# fix for unwanted  modal shifting after opening*/
body.modal-open {
    padding-right: 0 !important;
}

.margin-top-05 {
    margin-top: 0.5em;
}

.margin-top-10 {
    margin-top: 1.0em;
}

.margin-top-15 {
    margin-top: 1.5em;
}

.margin-top-20 {
    margin-top: 2.0em;
}

.margin-top-25 {
    margin-top: 2.5em;
}

.margin-top-30 {
    margin-top: 3.0em;
}

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

.strong {
    font-weight: bold;
}

.flex-vcenter {
    display: flex;
    justify-content: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vcenter {
    vertical-align: middle !important;
}

.text-vcenter {
    vertical-align: middle !important;
}

.text-center-all {
    vertical-align: middle !important;
    text-align: center;
}

.text-warning-alt {
    color: #EFA63F;
}

.float-none {
    float: none !important;
}

#container-content i.glyphicon, #container-content i.fa, #container-submenu i.glyphicon, #container-submenu i.fa, #jquery-json-tc i.fa, #jquery-json-tc i.glyphicon {
    padding-right: 4px;
}

.custom-a, table td a:not(.btn) {
    color: #476059 !important;
    text-decoration: none !important;
    outline: 0 !important;
}

.custom-a:hover, .custom-a:focus, .custom-a:active, table td a:not(.btn):focus, table td a:not(.btn):hover, table td a:not(.btn):active {
    color: #476059 !important;
    text-decoration: underline !important;
    outline: 0 !important;
}

form div:not(.has-success) label {
    font-weight: normal !important;
}

.add-margin-bottom-5 {
    margin-bottom: 5px;
}

.add-margin-right-5 {
    margin-right: 5px;
}

footer {
    padding-bottom: 2px;
    padding-right: 4px;
    position: fixed;
    bottom: 0;
    right: 0;
    color: #333 !important;
    font-size: 10px !important;
}

/*#######################################  CUSTOM BOOTSTRAP INPUT  ############################################# */

/*Green focus*/
select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    /*border-color: #2B542C !important;*/
    border-color: #5d7871 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #5d7871 !important;
}

/*Black borders*/
input[type="text"], input[type="file"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    border: 1px solid #555 !important;
}

/*Black borders - due to has-error*/
select, textarea {
    border: 1px solid #555 !important;
}


table .bg-success {
    /*background-color: #f1f7f3 !important;*/
    background-color: #e9efeb !important;
}

/*tags color*/
.form-group .label-success {
    background-color: #7f9a93 !important;
}

/*#######################################  CUSTOM BOOTSTRAP BADGE  ############################################# */

.btn-success .badge {

    color: #5d7871;
    background-color: #fff;
}

/*########################## CUSTOM IMPUT LABEL COLOR ############################*/
.has-success .checkbox, .has-success .checkbox-inline, .has-success .control-label, .has-success .help-block, .has-success .radio, .has-success .radio-inline, .has-success.checkbox label, .has-success.checkbox-inline label, .has-success.radio label, .has-success.radio-inline label {
    color: #476059 !important;
}

/*################################## ADD  SM, MD, LG SUPPORT INTO PULL-LEFT, PULL-RIGHT   ################################### */

@media (min-width: 768px) {
    .pull-sm-left {
        float: left !important;
    }

    .pull-sm-right {
        float: right !important;
    }

    .pull-sm-none {
        float: none !important;
    }
}

@media (min-width: 992px) {
    .pull-md-left {
        float: left !important;
    }

    .pull-md-right {
        float: right !important;
    }

    .pull-md-none {
        float: none !important;
    }
}

@media (min-width: 1200px) {
    .pull-lg-left {
        float: left !important;
    }

    .pull-lg-right {
        float: right !important;
    }

    .pull-lg-none {
        float: none !important;
    }
}

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

/*################################## add size SM, XS for bootstrap inputs  ################################### */
/*# override font size and padding */

.input-sm {
    font-size: 14px !important;
    padding: 4px 10px !important;
    line-height: 1.5 !important;
    /*border-radius: 3px;*/
}

/*# for autoheight of textarea , rest in template _common_field.html*/
textarea.input-sm {
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 4px 10px !important;
    overflow: hidden !important;
    resize: none !important;
    /*padding: 0 10px !important;*/
    /*line-height: 2.21 !important;*/
    /*height: 31px !important;*/
}

/*# bootstrap-select - make SM variant */
.selectpicker-sm + .bootstrap-select, .selectpicker-sm + .bootstrap-select > .btn {
    height: 30px;
    line-height: 15px;
}

.input-xs {
    height: 26px;
    padding: 5px 5px;
    font-size: 12px;
    line-height: 1.5; /*If Placeholder of the input is moved up, rem/modify this.*/
    /*line-height: 26px; !*If Placeholder of the input is moved up, rem/modify this.*!*/
    border-radius: 2px;
}

.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
    height: 22px;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}

/*# boostrap-select - a change of  background-color */
.bootstrap-select ul.dropdown-menu li.selected.active {
    background-color: #5d7871 !important;
}

.bootstrap-select ul.dropdown-menu a.selected.active {
    background-color: unset !important;
    background-image: unset !important;
}

/**/

/*########################################## DATEPICKER, TYPEHEAD, TAGSINPUT ######################################## */
/* green color to datetime marker */
.bootstrap-datetimepicker-widget table td.today:before {
    content: '';
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 7px 7px;
    border-bottom-color: #5d7871 !important;
    border-top-color: rgba(0, 0, 0, 0.2) !important;
    position: absolute;
    bottom: 4px;
    right: 4px;
}

/*green color to datetime marker*/
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    /*background-color: rgb(102, 153, 102) !important;*/
    background-color: #5d7871 !important;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/*green color to datetime marker*/
.bootstrap-datetimepicker-widget table td span.active {
    /*background-color: rgb(102, 153, 102) !important;*/
    background-color: #5d7871 !important;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* green color to typeahead */

/* like input-sm */
input.typeahead {
    height: 30px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
}

ul.typeahead.dropdown-menu > li.active a {
    background-image: none !important;
    /*background-color: rgb(102, 153, 102) !important;*/
    background-color: #5d7871 !important;
}

ul.typeahead.dropdown-menu > li strong {
    font-weight: 400 !important;
    color: black !important;
}

ul.typeahead.dropdown-menu > li.active strong {
    color: white !important;
}

/* bootstrap tags */
.bootstrap-tagsinput {
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: block;
    padding: 6px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    width: 100% !important;;
    line-height: 20px;
    min-height: 34px;
    cursor: text;
    border: 1px solid #555 !important;
}

.bootstrap-tagsinput > input, .bootstrap-tagsinput > input:focus {
    border: none !important;
    /*border: black solid 1px !important;*/
    box-shadow: none !important;
    min-width: 200px !important;
}

.bootstrap-tagsinput.focus {
    border-color: #5d7871 !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px #5d7871 !important;
}

/*.tag-disabled {*/
/*background-color: rgb(238, 238, 238) !important;*/
/*}*/

/* bootstrap tags */
/*.label-tag {*/
/*font-size: 12px !important;*/
/*padding: 2px !important;*/
/*}*/

/*#########################################  TOP MENU #####################################*/

.navbar-header > a {
    color: #eee !important;
    font-size: 24px !important;
    font-weight: bold !important;
    outline: 0 !important;
}

.navbar-header > a:hover,
.navbar-header > a:focus {
    text-decoration: none !important;
    color: #fff !important;
    outline: 0 !important;
}

.navbar-nav > li > a {
    color: #eee !important;
    font-size: 16px !important;
    outline: 0 !important;
    padding-right: 12px;
    padding-left: 12px;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    text-decoration: none !important;
    color: #fff !important;
    outline: 0 !important;
}

.navbar .label,
.navbar .glyphicon,
.navbar .fa {
    margin-right: 6px;
}

/*################################# CUSTOM BOOSTRAP NAVBAR HIDDEN BREAKPOINT ##################################*/
/*# default is 768 (sm), 991px (dm), 1199px (xl) */

/*# less then 990 menu colapses*/
@media screen and (max-width: 1199px) {
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

    .navbar-nav > li {
        float: none;
    }

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }

    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .collapsing {
        overflow: hidden !important;
    }
}

/*################################# CUSTOM BOOSTRAP PANEL ##################################*/

.panel-custom {
    border: 1px solid #555;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 20px !important;
}

.panel-custom > .panel-heading {
    color: #fff;
    background-color: #7f9a93;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 5px 15px;
}

.panel-custom-small {
    border: 1px solid #555;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 20px !important;
}

.panel-custom-small > .panel-heading {
    color: #fff;
    background-color: #7f9a93;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 2px 15px;
}

.panel-custom-small > .panel-body {
    padding: 5px 15px 5px 15px;
}

.panel-custom-small > .panel-body > ul {
    padding: 5px 15px 0 5px;
}

/*####################### CUSTOM BOOSTRAP MODAL ##############################*/

.modal-content-custom-big {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

    /* new custom width - default 600px*/
    width: 900px;
    /*Left Margin = |600px – [New Width]| / 2*/
    margin-left: -150px;
}

.modal-content-custom-huge {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

    /* new custom width - default 600px*/
    width: 1100px;
    /*Left Margin = |600px – [New Width]| / 2*/
    margin-left: -250px;
}

/*########################## CUSTOM BTN COLOR ############################*/

.btn-success {
    background-color: #7f9a93;
    border-color: #7f9a93;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #759089;
    background-image: -moz-linear-gradient(top, #7f9a93, #65817a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7f9a93), to(#65817a));
    background-image: -webkit-linear-gradient(top, #7f9a93, #65817a);
    background-image: -o-linear-gradient(top, #7f9a93, #65817a);
    background-image: linear-gradient(to bottom, #7f9a93, #65817a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f9a93', endColorstr='#ff658079', GradientType=0);
    border-color: #65817a #65817a #445651;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-success:hover,
.btn-success:focus {
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position .1s linear;
    -moz-transition: background-position .1s linear;
    -o-transition: background-position .1s linear;
    transition: background-position .1s linear;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #65817a;
    color: #fff;
}

.btn-success:active,
.btn-success.active,
.btn-success.active:hover {
    background-color: #718f87;
    border-color: #65817a;
    color: #fff;
}

.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled] .btn-success:hover,
.btn-success[disabled] .btn-success:focus,
.btn-success[disabled] .btn-success:active,
.btn-success[disabled] .btn-success.active {
    background-color: #7f9a93;
    border-color: #7f9a93;
    color: #fff;
}

.btn-success.disabled, .btn-success.disabled.active, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled], .btn-success[disabled].active, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success.active, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
    background-color: #7f9a93;
    background-image: none;
}


.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover {
    color: #fff;
    background-color: #7f9a93;
    border-color: #7f9a93;
}


/*########################## upload font ############################*/
.upload-font {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
}

.upload-font strong, .upload-font a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
}

/*########################## STARS RATING ############################*/

ul.rating, ul.rating a:hover, ul.rating .vote {
    background: url('../img/stars.png') left -1000px repeat-x;
    margin: 0 !important;
    padding: 0 !important;
}

ul.rating {
    position: relative;
    width: 80px;
    height: 16px;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    background-position: left top;
}

ul.rating li {
    display: inline;
    background-image: none;
    padding: 0 !important;
    margin: 0 !important;
}

ul.rating a, ul.rating .vote {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -1000em;
    height: 16px;
    line-height: 16px;
    outline: none;
    overflow: hidden;
    border: none;
    cursor: pointer;
}

ul.rating a:hover {
    background-position: left bottom;
}

ul.rating a.v1 {
    width: 20%;
    z-index: 6;
}

ul.rating a.v2 {
    width: 40%;
    z-index: 5;
}

ul.rating a.v3 {
    width: 60%;
    z-index: 4;
}

ul.rating a.v4 {
    width: 80%;
    z-index: 3;
}

ul.rating a.v5 {
    width: 100%;
    z-index: 2;
}

ul.rating li.w1 {
    width: 20%;
}

ul.rating li.w2 {
    width: 40%;
}

ul.rating li.w3 {
    width: 60%;
}

ul.rating li.w4 {
    width: 80%;
}

ul.rating li.w5 {
    width: 100%;
}

ul.rating .vote {
    z-index: 1;
    background-position: left center;
}