/*********************************************** View ********************************************************/
@import "view/home/home.css" screen;
@import "view/policy/policy.css" screen;
@import "view/admin/admin.css" screen;
@import "view/login/login.css" screen;
@import "view/adminlogin/adminlogin.css" screen;
@import "view/register/register.css" screen;

/***************************************** Others Component **************************************************/
@import "components/appAdminlogin/appAdminlogin.css" screen;

@import "components/appHeader/appHeader.css" screen;
@import "components/appFooter/appFooter.css" screen;

@import "components/appSubscription/appSubscription.css" screen;
@import "components/appLogin/appLogin.css" screen;
@import "components/appRegister/appRegister.css" screen;
@import "components/appProfile/appProfile.css" screen;
@import "components/appProfile/myProfile/myProfile.css" screen;
@import "components/appEmailVerify/appEmailVerify.css" screen;
@import "components/appPasswordReset/appPasswordReset.css" screen;

@import "components/appRecipelist/appRecipelist.css" screen;
@import "components/appRecipe/appRecipe.css" screen;
@import "components/appUserProfile/appUserProfile.css" screen;
@import "components/appUsers/appUsers.css" screen;
@import "components/appFlavorlist/appFlavorlist.css" screen;

/*********************************************** Recipes *****************************************************/
@import "components/appCalculator/recipeHome/recipeHome.css" screen;
@import "components/appCalculator/recipeDetail/recipeDetail.css" screen;
@import "components/appCalculator/recipeList/recipeList.css" screen;
@import "components/appCalculator/recipeForm/recipeForm.css" screen;
@import "components/appCalculator/aromaTab/aromaTab.css" screen;
@import "components/appCalculator/resultAromaTab/resultAromaTab.css" screen;
@import "components/appCalculator/resultTab/resultTab.css" screen;
@import "components/appCalculator/parameters/parameters.css" screen;

/*********************************************** Admin ********************************************************/
@import "components/admin/adminHome/adminHome.css" screen;
@import "components/admin/siteManagement/siteManagement.css" screen;
@import "components/admin/communicationsAdmin/communicationsAdminHome/communicationsAdminHome.css" screen;
@import "components/admin/communicationsAdmin/communicationsAdminDetail/communicationsAdminDetail.css" screen;
@import "components/admin/communicationsAdmin/communicationsAdminList/communicationsAdminList.css" screen;
@import "components/admin/communicationsAdmin/communicationsAdminForm/communicationsAdminForm.css" screen;
@import "components/admin/membersManagement/membersManagementHome/membersManagementHome.css" screen;
@import "components/admin/membersManagement/membersManagementDetail/membersManagementDetail.css" screen;
@import "components/admin/membersManagement/membersManagementList/membersManagementList.css" screen;
@import "components/admin/membersManagement/membersManagementForm/membersManagementForm.css" screen;

/*********************************************** Products *****************************************************/
@import "components/appProfile/myIngredients/flavors/flavorsHome/flavorsHome.css" screen;
@import "components/appProfile/myIngredients/flavors/flavorsDetail/flavorsDetail.css" screen;
@import "components/appProfile/myIngredients/flavors/flavorsList/flavorsList.css" screen;
@import "components/appProfile/myIngredients/flavors/flavorsForm/flavorsForm.css" screen;

@import "components/appProfile/myIngredients/nicotine/nicotineHome/nicotineHome.css" screen;
@import "components/appProfile/myIngredients/nicotine/nicotineDetail/nicotineDetail.css" screen;
@import "components/appProfile/myIngredients/nicotine/nicotineList/nicotineList.css" screen;
@import "components/appProfile/myIngredients/nicotine/nicotineForm/nicotineForm.css" screen;

@import "components/appProfile/myIngredients/bottles/bottleHome/bottleHome.css" screen;
@import "components/appProfile/myIngredients/bottles/bottleDetail/bottleDetail.css" screen;
@import "components/appProfile/myIngredients/bottles/bottleList/bottleList.css" screen;
@import "components/appProfile/myIngredients/bottles/bottleForm/bottleForm.css" screen;

@import "components/appProfile/myIngredients/pg/pgHome/pgHome.css" screen;
@import "components/appProfile/myIngredients/pg/pgDetail/pgDetail.css" screen;
@import "components/appProfile/myIngredients/pg/pgList/pgList.css" screen;
@import "components/appProfile/myIngredients/pg/pgForm/pgForm.css" screen;

@import "components/appProfile/myIngredients/pga/pgaHome/pgaHome.css" screen;
@import "components/appProfile/myIngredients/pga/pgaDetail/pgaDetail.css" screen;
@import "components/appProfile/myIngredients/pga/pgaList/pgaList.css" screen;
@import "components/appProfile/myIngredients/pga/pgaForm/pgaForm.css" screen;

@import "components/appProfile/myIngredients/vg/vgHome/vgHome.css" screen;
@import "components/appProfile/myIngredients/vg/vgDetail/vgDetail.css" screen;
@import "components/appProfile/myIngredients/vg/vgList/vgList.css" screen;
@import "components/appProfile/myIngredients/vg/vgForm/vgForm.css" screen;


@import "components/appShoppingList/appShoppingList.css" screen;

@import "components/editableField/editableField.css" screen;

@import "components/editableEmailField/editableEmailField.css" screen;
@import "components/editableEmailFieldAdmin/editableEmailFieldAdmin.css" screen;
@import "modal.css" screen;


.maintenance {
    display: block;
    margin: 50px auto 0 !important;
}
.maintenance img {
    display: block;
    margin: 0 auto 20px;
}
.maintenance p {
    display: block;
    margin: 0 auto 0;
    width: 640px;
}

.tag-template div:first-child {
    float: left;
}

.tag-template div:first-child img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.tag-template div:last-child {
    float: left;
    margin-left: 5px;
}

/***************** Toaster *****************/
#toast-container>div {
    opacity: 0.95;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
    filter: alpha(opacity=95);
}
/********************************************/
/**************** Bootstrap *****************/
/********************************************/
.fas .fa-radiation:before {
    content: "\f043";
}
.far.fa-eye {
    cursor: pointer;
    font-size: 30px;
    line-height: 16px;
}
#modifyPasswordForm .far.fa-eye {
    font-size: initial;
}
.fa-angle-down, .fa-angle-up {
    float: right;
    cursor: pointer;
    font-size: 30px;
}
h3 .fa-angle-down, h3 .fa-angle-up {
    line-height: 28px;
}
h5 .fa-angle-down, h5 .fa-angle-up {
    line-height: 16px;
}
.bubble .bubble-info {
    margin-left: 0;
}
.bubble-info {
    position: relative;
    left: 0px;
    top: -3px;
    display: inline-block;
    min-width: 40px;
    padding: 0 5px;
    text-align: center;
    background-color: #D1ECF1;
    color: #161a21;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    font-size: 13px;
}
.bubble-tags {
    display: inline-block;
    /*font-size: 11px;*/
    margin: 0;
    padding: 0 5px;
    height: 26px;
    line-height: 25px;
    border: 1px solid #acacac;
    border-radius: 13px;
    color: #161A21;
    background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
    background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
}
.tooltip {
    z-index: 5000;
}
.tooltip .tooltipRecipeName {
    background-color: #D1ECF1;
    margin-bottom: 10px;
    padding: 5px;
    color: #161A21;
}
.tooltip .tooltipRecipeComment {
    margin-bottom: 10px;
    padding: 0 5px;
}
.tooltip .tooltipRecipeTags,
.tooltip .tooltipRecipeCategories {
    margin-bottom: 5px;
    padding: 0 5px;
}
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
    border-top-color: #161A21;
}
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #161A21;
}
.tooltip-inner {
    background-color: #161A21;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 5px 1px #161a21;
    max-width: 400px;
    opacity: 1;
}

.col-md-offset-4 {
    margin-left: 0 !important;
}
.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.isDisabled > a {
    color: currentColor;
    display: inline-block;  /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
}
.alert {
    margin-bottom: 5px;
}
.ng-dirty input.ng-invalid,
.ng-dirty textarea.ng-invalid,
.ng-dirty select.ng-invalid {
    border: #ced4da 1px solid;
}
ul.pagination-sm {

}

.tabsSet {
    margin: 0;
}
.uib-tab.nav-item {
    /*margin-right: 5px;*/
}
.uib-tab.nav-item.active {
    /*background-color: #D1ECF1;*/
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.nav-tabs .nav-link {
    border: 1px solid rgba(0,0,0,.125);
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #93B3C5 #93B3C5 #dee2e6;
}
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #49A6D5;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #161a21;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
.tab-content {
    display: flow-root;
    box-shadow: 0 3px 10px 3px #ddd;
}
.tab-content>.active {
    display: inherit;
}
.tab-content form {
    display: inherit;
    width: 100%;
}
.tab-pane,
.wrapperTabs {
    display: flow-root;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 7px;
}
.tab-pane,
.wrapperTabs .col-lg-6 {
    padding-left: 7px;
    padding-right: 7px;
}
.wrapperTabs .padLR {
    padding: 0 7px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: rgba(22,26,33,1);
    border-color: rgba(62,73,92,1);
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: rgba(62,73,92,1);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    color: #161A21;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:disabled, .form-control[readonly] {
    background-color: rgba(147,179,197,0.5);
    opacity: 1;
    cursor: not-allowed;
}
.form-control.ng-touched.ng-invalid,
tags-input.ng-touched.ng-invalid .tags {
    border-color: #C82333 !important;
    -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
    -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
}
.input-group {
    /*margin-bottom: 5px;*/
}
.input-group-text {
    background-color: #49A6D5;
    color: #ffffff;
    width: auto;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /*border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;*/
}
.input-group-text-danger {
    background-color: #dc3545;
    cursor: pointer;
}
.input-group-text i {
    color: #ffffff;
    font-size: 1rem;
}
.input-group-text a {
    color: #ffffff;
}
.input-group-text a.disabledLink {
    pointer-events: none;
    cursor: default;
    color: #93B3C5 !important;
}
.input-sm {
    height: 30px;
    padding: 5px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
.input-group-text.percent {
    font-size: 17px;
    font-weight: bold;
}
.list-group-item {
    position: initial;
    background-color: #fbfbfb;
    padding: 5px;
    border: 1px solid rgba(51,122,183,0.25);
    box-shadow: 0 2px 1px rgba(51,122,183,0.75);
    margin: 3px 0 0;
    width: 100%;
}
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #161a21;
    background-color: #D1ECF1;
    border-color: #161a21;
}
.ta-toolbar.btn-toolbar {
    margin-bottom: 5px;
}
.ta-toolbar.btn-toolbar .btn-group:nth-child(4) {
    display: none;
}
.ta-toolbar.btn-toolbar .btn-group:nth-child(4) .btn-default:nth-child(1) {
    display: none;
}
.ta-toolbar.btn-toolbar .btn-group:nth-child(4) .btn-default:nth-child(2) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.badge-info {
    color: #fff;
    background-color: #4891e4;
}
.btn-default {
    background-color: #49A6D5;
    color: #fff;
}
.btn-default:hover {
    background-color: #66B5DC;
}
.btn-success, .btn-default {
    color: #fff;
    background-color: rgba(22,26,33,1);
    border-color: rgba(62,73,92,1);
}
.btn-success:hover, .btn-default:hover {
    color: #fff;
    background-color: rgba(62,73,92,1);
    border-color: rgba(22,26,33,1);
}
.btn-success.disabled, .btn-success:disabled {
    color: #fff;
    background-color: rgba(22,26,33,0.7);
    border-color: rgba(62,73,92,0.7);
}
.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: rgba(22,26,33,0.7);
    border-color: rgba(62,73,92,0.7);
    box-shadow: 0 0 0 0.2rem rgba(102,181,220,.5);
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
    color: #fff;
    background-color: rgba(22,26,33,1);
    border-color: rgba(62,73,92,1);
}
.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
    background-color: rgba(22,26,33,0.7);
    border-color: rgba(62,73,92,0.7);
}
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(102,181,220,.5);
}
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {

}
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    color: #161a21;
    background-color: #D1ECF1;
    border-color: #161a21;
}
.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
    color: #161a21;
    background-color: #D1ECF1;
    border-color: #161a21;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger.disabled, .btn-danger:disabled {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger.disabled.focus, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled].focus, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-darkblue {
    color: #fff;
    background-color: #161a21;
    border-color: #161a21;
}
.btn-darkblue:hover {
    color: #fff;
    background-color: #354B61;
    border-color: #354B61;
}
.btn-darkblue.disabled, .btn-darkblue:disabled {
    color: #fff;
    background-color: #93B3C5;
    border-color: #93B3C5;
}
.btn-darkblue.focus, .btn-darkblue:focus {
    color: #fff;
    background-color: #161a21;
    border-color: #161a21;
    box-shadow: 0 0 0 0.2rem rgba(102,181,220,.5);
}

.form-group {
    margin-bottom: 0;
}

/********************************************/
/************* Alert - Confirm **************/
/********************************************/
.ng-confirm .ng-confirm-box {
    padding: 0;
}
.ng-confirm .ng-confirm-box div.ng-confirm-title-c {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-bottom: 0;
    background-color: #161a21;
    color: #fff;
}
/*.ng-confirm.ng-confirm-type-red .ng-confirm-box div.ng-confirm-title-c {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-bottom: 0;
    background-color: #e74c3c;
    color: #fff;
}*/
.ng-confirm .ng-confirm-box div.ng-confirm-content-pane {
    padding: 5px 10px 0;
}
.ng-confirm .ng-confirm-box .ng-confirm-buttons {
    padding: 10px;
}
/********************************************/
/***************** Default ******************/
/********************************************/
*,
*:before,
*:after {
    box-sizing: inherit;
}
html {
    height: 100%;
    box-sizing: border-box;
}
body {
    display: block;
    margin: 0;
    padding: 0;
    font-family: "Calibri",Arial,Helvetica,"Helvetica Neue",sans-serif;
    font-size: 14px;
    /*background-color: #efefef;*/
    background-color: rgba(255,255,255,0);
    color: #161A21;
    /*background-color: #161a21;
    color: #fff;*/
}
hr {
    display: block;
    height: 1px;
    border: 0;
    background-image: -webkit-linear-gradient(left, #D1ECF1, #49A6D5, #D1ECF1);
    margin: 10px 0;
    padding: 0;
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(12,84,96,1);
}
.navbar-light .navbar-nav .nav-link.active:focus,
.navbar-light .navbar-nav .nav-link.active:hover {
    color: rgba(22,26,33,1);
    cursor: initial;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(22,26,33,1);
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: rgba(51,122,183,0.8);
}
a {
    text-decoration: none;
    color: rgba(62,73,92,1);
    font-size: 16px;
}
a:hover {
    text-decoration: none;
    color: #E8F5F8;
}
h1{ font-size: 32px; }
h2{ font-size: 29px; }
h3{ font-size: 26px; }
h1, h2, h3 {
    background-color: #161a21;
    color: #fff;
    padding: 3px 10px 3px;
    margin: 0;
}
h3.comingSoon {
    text-align: center;
}
h4, h5, h6 {
    background-color: #337ab7;
    border: 1px solid #161a21;
    color: #fff;
    padding-left: 10px;
    margin: 0 0 5px;
    border-radius: 0;
}
h5 {
    font-size: 17px;
    border-radius: 0;
    padding: 3px 5px 0;
}
label {
    margin-bottom: 0;
}
input[type='checkbox'] {
    float: right;
    width: 20px;
    height: 20px;
    margin-top: 0;
}
input[type=file] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 275px;
}
textarea {
    resize: none;
    font-size: 12px !important;
    line-height: 13px !important;
}
table {
    width:100%;
}
table th {
    padding: 5px !important;
    background-color: #337ab7 !important;
    border-top: 1px solid #161A21 !important;
    border-bottom: 1px solid #161A21 !important;
    font-size: 18px;
    font-weight: bold;
}
table th {
    color: #fff;
}

table tr:nth-child(odd) {
    background-color: rgba(209,236,241,0.3);
}
table tr:nth-child(even) {
    background-color: rgba(209, 236, 241, 0.5);
}
.pagin {
    padding: 10px 0;
}
.svg-inline--fa {
    width: 14px;
}
.relative {
    position: relative;
}
.clear-fix {
    clear: both;
}
.space {
    padding: 10px 0;
}
.btnGroup {
    margin: 5px 0;
}
.disabledBtn {
    cursor: not-allowed !important;
}

.wrapper {
    max-width: 1280px;
    margin: auto;
}
.wrapperContainer {
    background-color: rgba(255,255,255,0);
}
.package {
    display: block;
    width: 100%;
    height: 100%;
    margin-bottom: 7px;
    padding: 5px;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 5px;
}
.selectWInput {
    margin-bottom: 5px;
}
/********************************************/
/***************** Message ******************/
/********************************************/
.msgIntro {
    overflow-y: scroll;
}
.msgIntro h3 {
    background-color: transparent;
    color: #161a21;
    padding-left: 0;
    margin: 0;
}
.msgEmpty {
    text-align: center;
    font-weight: bold;
}
.msgEmpty button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
}
.msgEmpty a {
    display: block;
    font-size: small;
    text-decoration: underline;
}
.danger {
    color: red;
}
.errorLabel {
    color: #dc3545;
}
/********************************************/
/****************** Commun ******************/
/********************************************/
/* Clear floats after the columns */
.clear-both {
    clear: both;
}
.full-width {
    width: 100%;
}
.myRow:after {
    content: "";
    display: table;
    clear: both;
}
.lastChild {
    padding-right: 0 !important;
}
.myCol-2 {
    width: calc(50%);
    padding-right: 7px;
}
.myCol-3 {
    width: calc(33.333333%);
    padding-right: 7px;
}
.myCol-4 {
    width: calc(25%);
    padding-right: 7px;
}

.half-percent {
    width: calc(50% - 0.25%);
}
.half-percent .left {
    width: calc(52% - 5px);
}
.half-percent .right {
    width: calc(48%);
}
.half-percent .half-percent {
    width: calc(50% - 0.5%);
}
.thirty-three-percent {
    width: calc(33% - 0.1%);
}

/********************************************/
/****************** Rating ******************/
/********************************************/
/******* Ratings *******/
.jk-rating-stars-container .star-button {
    text-shadow: none;
}
.memberNotes {
    display: block;
    width: 100%;
    min-width: 621px;
}
.memberNotes .ratingText {
    color: #161a21;
    margin-bottom: 10px;
}
.ratingDiv {
    display: block;
    width: 100%;
    max-width: 800px;
    max-height: 1584px;
    margin: auto;
}
.ratingDiv .custom-stars {
    float: right;
}
.ratingDiv .custom-stars.readOnly a {
    cursor: not-allowed;
}
.ratingDiv .custom-stars.readOnly a.star-button.star-on .material-icons {
    /*color: #93B3C5;*/
}
.ratingDiv .custom-stars .button .material-icons {
    font-size: 21px;
}
.ratingDiv .custom-stars .star-button.star-on .material-icons {
    color: #316287;
}
.ratingDiv .custom-stars .star-button.star-off .material-icons {
    color: #97BACB;
}
span.stars, span.stars span {
    /* Download the star image here: http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css */
    display: inline-block;
    background: url('/img/stars.png') 0 -19px repeat-x;
    width: 105px;
    height: 19px;
}
span.stars span {
    background-position: 0 -4px;
}
.ratingList {
    display: inline-block;
    width: 100%;
    max-width: 800px;
    padding: 10px 10px 0;
}
.ratingList .date {
    font-family: "Arial Black";
    font-size: 11px;
    color: #316287;
}
.ratingList .username {
    font-family: arial black;
    font-size: 20px;
    color: #49A6D5;
    padding-right: 20px;
}
.ratingList .username i {
    font-size: 30px;
    padding-right: 10px;
}
.ratingComment {
    margin-top: 10px;
}
/********************************************/
/***************** Loading ******************/
/********************************************/
/* The finishing CSS styles for the enter animation */
.fadeInOut {
    display: none;
}
.loading {
    position: absolute;
    top: 205px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    z-index: 10000;
}
.loading i {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
.loadingContainer {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}
.loadingSmall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: rgba(255,255,255,0.55);
}
.loadingSmall img {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

/********************************************/
/*************** Media Query ****************/
/********************************************/
@media screen and (max-device-width: 767px) {

}
@media screen and (max-device-width: 767px) and (orientation: portrait) {

}
@media screen and (max-device-width: 767px) and (orientation: landscape) {

}

@media screen and (min-device-width: 768px) {

}
@media screen and (min-device-width: 768px) and (orientation: portrait) {

}
@media screen and (min-device-width: 768px) and (orientation: landscape) {

}