@media all and (min-width: 320px), all and (max-width: 320px) {
    .main-panel > .content { padding: 15px 0 30px 0; }
}

@media all and (min-width: 600px) {
    .main-panel > .content { padding: 15px 15px 30px 15px; }
}

@media all and (min-width: 990px) {
    .main-panel > .content { padding: 15px 15px 30px 15px; }
}

body {
    min-width: 320px;
}

.fa {
    width: auto;
}

.main-panel > .content {
    max-width: 960px
}

#contentContainer {
    top: 0px;
}

#whistleViewWrapper .block {
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 5px;
    -webkit-background-clip: padding-box;
}

#whistleViewWrapper .secHeader {
    border-bottom: 1px solid #e5e5e5;
    color: #fec201;
    font-size: 17px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    margin: -5px -5px 0;
    padding: 0 10px 0 20px;
    position: relative;
    text-transform: uppercase;
}

#whistleViewWrapper .secHeader .fa {
    float: left;
    line-height: 50px;
    margin-right: 7px;
}

#whistleViewWrapper .whistleListItem {
    border: none;
    height: auto;
    min-height: 80px;
    padding: 10px;
    position: relative;
}

.mobile #whistleViewWrapper .whistleListItem {
    padding: 10px;
}

#whistleViewWrapper .whistleUserPic {
    background-color: #cdddec;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    height: 50px;
    position: absolute;
    width: 50px;
    -webkit-background-clip: padding-box;
}

#whistleViewWrapper .whistleContentBox {
    left: 50px;
    margin-left: 15px;
    min-height: 50px;
    position: relative;
    width: 80%;
}

#whistleViewWrapper .whistlePlace {
    color: #8b99a0;
    font-size: 13px;
    width: 100%;
}
#whistleViewWrapper .whistlePlace .whistlePlaceID,
#whistleViewWrapper .whistlePlace .placeLink {
    color: #188cef;
    font-weight: 600;
}
#whistleViewWrapper .whistlePlace .placeLink {
    text-decoration: underline;
}
.mobile #whistleViewWrapper .whistlePlace {
    font-size: 12px;
}

#whistleViewWrapper .whistleUserName {
    color: #243147;
    font-size: 14px;
    font-weight: 600;
}

#whistleViewWrapper .whistleText {
    font-size: 14px;
    line-height: 20px;
    margin-top: 7px;
    word-wrap: break-word;
}

#whistleViewWrapper .whistleImage, #whistleViewWrapper .blogImage {
    cursor: pointer;
    height: auto;
    margin: 15px -16px;
    max-height: 400px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: auto;
}

#whistleViewWrapper .whistleImage > img {
    height: auto;
    max-width: 100%;
    width: auto;
}

#whistleViewWrapper .dotSeparator {
    background-color: #8b99a0;
    margin: 5px 10px;
}

#whistleViewWrapper .whistleStatus {
    color: #8b99a0;
    display: block;
    font-size: 11px;
    height: 14px;
    margin: 5px 0 5px 0;
}

#whistleViewWrapper .whistleStatus div {
    float: left;
    margin-right: 7px;
}

#whistleViewWrapper .whistleWrapperBox {
    margin-top: 10px;
}

#whistleViewWrapper .whistleListItem .fa {
    font-size: 12px;
    margin-right: 5px;
}

#whistleViewWrapper .whistleOptions {
    display: table;
    margin: 10px 0;
    max-width: 280px;
    width: 100%;
}

#whistleViewWrapper .whistleOptions .optionBtn {
    color: #243147;
    cursor: pointer;
    font-size: 15px;
    margin-left: 35px;
    width: 120px;
}

/* ---------------- Blog Css Starts ------------------ */

#whistleViewWrapper .blogWrapperBox {
    background-color: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
    /*overflow: hidden;*/
    width: auto;
}
#whistleViewWrapper .blogImage {
    margin: 5px -16px 0;
    /*text-align: left;*/
}
#whistleViewWrapper .blogImage > img {
    height: auto;
    max-width: 100%;
    width: auto;
}
#whistleViewWrapper .blogTitleText {
    color: #243147;
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    margin: 7px 0 10px;
}
#whistleViewWrapper .blogDescText {
    color: #626262;
    font-size: 13px;
    line-height: 20px;
    margin-top: 10px;
}

/* ---------------- Blog Css Ends ------------------ */

#whistleViewWrapper .whistleListItem .tagBox, #whistleViewWrapper .whistleContainer .tagBox {
    border-radius: 3px;
    display: none;
    font-size: 12px;
    margin: 10px 0 0;
    padding: 2px 10px;
    -webkit-background-clip: padding-box;
}
#whistleViewWrapper .whistleListItem .tagBox {
    margin: 5px 0 0;
    padding: 3px 10px;
}
#whistleViewWrapper .whistleListItem .tagBox.hashTag, #whistleViewWrapper .whistleContainer .tagBox.hashTag {
    background-color: #f4fbfe;
    border: 1px solid #a8e0f7;
    color: #188cef;
    display: inline-block;
}
#whistleViewWrapper .whistleListItem .tagBox.giftTag, #whistleViewWrapper .whistleContainer .tagBox.giftTag {
    background-color: #ffaa00;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #ffffff;
    display: inline-block;
}
#whistleViewWrapper .whistleListItem .tagBox.offerTag, #whistleViewWrapper .whistleContainer .tagBox.offerTag {
    background-color: #33bb33;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #ffffff;
    display: inline-block;
}
#whistleViewWrapper .fade {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}
#whistleViewWrapper .fade::after {
    background: #ffffff; /* For browsers that do not support gradients */
    background: -o-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); /* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); /* For Safari 5.1 to 6.0 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); /* Standard syntax (must be last) */
    bottom: 0;
    clear: both;
    content: "";
    height: 20px;
    position: absolute;
    right: 0;
    width: 20%;
}

#whistleViewWrapper .readMoreBtn {
    background-color: #ffffff;
    border-radius: 3px;
    color: #188cef;
    cursor: pointer;
    font-size: 12px;
    line-height: 25px;
    margin: 5px 0 0;
    text-align: center;
    text-decoration: underline;
}

#whistleViewWrapper .approveWhistle {
    height: 30px;
    margin: 10px 0 0;
    position: relative;
    text-align: right;
}

#whistleViewWrapper .approvalStatus {
    background-color: #dd0000;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    height: auto;
    left: -15px;
    line-height: 12px;
    padding: 3px 7px 3px 10px;
    position: absolute;
    text-transform: uppercase;
    top: 6px;
}

#whistleViewWrapper .approvalStatus::before {
    border-bottom: 9px solid #dd0000;
    border-right: 10px solid transparent;
    border-top: 9px solid #dd0000;
    content: "";
    position: absolute;
    right: -10px;
    top: 0;
}

#whistleViewWrapper .approveBtn {
    width: 70px;
}

#whistleViewWrapper .approveBtn.approve {
    background-color: #243147;
    color: #ffffff;
    width: 100px;
}

#whistleViewWrapper .approveBtn.reject{
    margin-left: 5px;
}

#whistleViewWrapper .whistleCommentWrapper {
    background-color: #f3f6f8;
    border: 1px solid #e5e5e5;
    margin: 15px -10px -10px;
    overflow: hidden;
    padding: 15px;
}
#whistleViewWrapper .whistleCommentBox {
    border: none;
    color: #626262;
    display: block;
    font-size: 11px;
    /*margin-top: 10px;*/
    padding-top: 10px;
    position: relative;
}
#whistleViewWrapper .whistleCommentBox:first-child {
    padding: 0;
}
#whistleViewWrapper .whistleCommentBox.textBox:first-child {
    border: none;
    margin: 0;
    padding-bottom: 10px;
}
#whistleViewWrapper .whistleCommentBox td {
    padding: 0;
    width: 40px;
}
#whistleViewWrapper .whistleCommentBox td.wcDetailsTd {
    max-width: 500px;
    width: 100%;
}
#whistleViewWrapper .wcUserPic {
    background-color: #cdddec;
    background-image: url("images/default/user.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    display: inline-block;
    height: 40px;
    width: 40px;
}
#whistleViewWrapper .wcDetails {
    margin-left: 10px;
    min-height: 40px;
}
#whistleViewWrapper .textBox .wcDetails {
    background-color: #ffffff;
    border: 1px solid #d5d5d5;
    min-height: 18px;
    padding: 8px;
}
#whistleViewWrapper .textBox .wcTextBox {
    background-color: transparent;
    border: none;
    color: #243147;
    font-size: 12px;
    outline: none !important;
    padding: 0;
    resize: none;
    width: 89%;
}
#whistleViewWrapper .textBox .commentBtn {
    color: #188cef;
    cursor: pointer;
    float: right;
    font-size: 18px;
    height: 20px;
    line-height: 20px;
    margin: 0;
    max-width: 30px;
    min-width: 20px;
    text-align: center;
    text-decoration: none;
    width: 7%;
}
#whistleViewWrapper .wcUserName {
    color: #188cef;
    cursor: pointer;
    display: inline;
    font-size: 12px;
    font-weight: 600;
    margin: 0 2px 2px 0;
}
#whistleViewWrapper .wcText {
    color: #243147;
    display: inline;
    font-size: 12px;
    word-wrap: break-word;
}
#whistleViewWrapper .wcTime {
    color: #8b99a0;
    margin-top: 5px;
}
#whistleViewWrapper .whistleCommentBox .wcDelete {
    bottom: -4px;
    color: #8b99a0;
    cursor: pointer;
    display: none;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin: 0;
    position: absolute;
    right: 0;
    text-align: center;
    width: 20px;
}

#whistleViewWrapper .whistleCommentBox:hover .wcDelete,
.mobile #whistleViewWrapper .whistleCommentBox .wcDelete {
    display: block;
}

/* ---------------- Create Whistle -------------------- */


.createWhistle .wizPlace {
    min-height: 70px;
    position: relative;
    width: 100%;
}

.createWhistle .wizPlaceWrapper {
    padding: 10px;
}

.createWhistle .locaelCoverPic {
    background-color: #cdddec;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: medium none;
    border-radius: 50%;
    height: 50px;
    overflow: hidden;
    width: 50px;
    -webkit-background-clip: padding-box;
}

/* enhancement */

.createWhistle .whistleDetails {
    left: 0;
    margin-left: 60px;
    padding-right: 10px;
    position: relative;
    top: -3px;
}
.createWhistle .whistlePlace {
    color: #8b99a0;
    font-size: 13px;
    font-weight: 600;
}
.createWhistle .whistleUserName {
    color: #243147;
    font-size: 14px;
    font-weight: 600;
}
.createWhistle .whistlePlaceID {
    color: #188cef;
    font-weight: 600;
}
.createWhistle .whistlePlaceID .placeLink {
    text-decoration: underline;
}

.wizPlaceCategory {
    background-color: #ffffff;
    border-radius: 50%;
    font-size: 13px;
    height: 25px;
    left: 36px;
    line-height: 21px;
    position: absolute;
    text-align: center;
    top: 37px;
    width: 25px;
    -webkit-background-clip: padding-box;
}
.wizPlaceCategory.H {
    border: 2px solid #f63835;
    color: #f63835;
}
.wizPlaceCategory.B {
    border: 2px solid #ffaf23;
    color: #ffaf23;
}
.wizPlaceCategory.S {
    border: 2px solid #38d3a9;
    color: #38d3a9;
}
.wizPlaceCategory.W {
    border: 2px solid #00d5ff;
    color: #00d5ff;
}
.wizPlaceCategory.C {
    border: 2px solid #821ea4;
    color: #821ea4;
}
.wizPlaceCategory.T {
    border: 2px solid #87cbfe;
    color: #87cbfe;
}

.wizPlaceCategory .fa {
    display: none;
    line-height: 21px;
}
.wizPlaceCategory.H .fa.fa-home,
.wizPlaceCategory.B .fa.fa-briefcase,
.wizPlaceCategory.S .fa.fa-graduation-cap,
.wizPlaceCategory.W .fa.fa-laptop,
.wizPlaceCategory.C .fa.fa-arrows-alt,
.wizPlaceCategory.T .fa.fa-map-marker {
    display: inline-block;
}

.createWhistle .wizPlaceNameBox, .createWhistle .wizPlaceTitle, .createWhistle .wizPlaceInfo {
    color: #243147;
    display: block;
    left: 70px;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
}

.createWhistle .wizPlaceTitle {
    font-size: 14px;
    font-weight: 600;
    top: 12px;
}

.createWhistle .wizPlaceNameBox {
    color: #8b99a0;
    font-size: 12px;
    top: 34px;
}

.createWhistle .divInput {
    height: auto;
    margin: 10px;
}

.createWhistle .divInput .txtWizTitleBox, .createWhistle .wizDescBox {
    border: 1px solid #d5d5d5;
    margin: 10px 0;
    overflow: hidden;
    padding: 0;
}

.createWhistle .divInput .txtWizTitle, .createWhistle .wizBlogDesc {
    border: medium none;
    color: #243147;
    font-size: 14px;
    height: 70px;
    outline: medium none !important;
    padding: 7px 10px;
    position: relative;
    resize: none;
    width: 100%;
}

.createWhistle .wizDescBox {
    margin: 10px 10px 15px;
}

.createWhistle .wizBlogDesc {
    min-height: 250px;
}

.createWhistle .wizPic {
    background-color: transparent;
    border-radius: 3px;
    display: inline-block;
    margin: 4px 10px 0;
    max-height: 100px;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 200px;
}

.createWhistle .wizPic.hidden {
    display: none;
}

.createWhistle .wizPic::before {
    border: 1px solid rgba(0, 0, 0, 0.1);
    bottom: 0;
    content: "";
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

.createWhistle .deleteWizImage {
    background-color: rgba(0, 0, 0, 0.2);
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    visibility: visible;
    width: 30px;
    z-index: 1;
}

.createWhistle .wizPic .imgWizActual {
    height: auto;
    max-width: 100%;
    width: auto;
}

.createWhistle .divBottomButton {
    height: auto;
    margin-top: 10px;
    min-width: 280px;
    padding: 10px;
}

.createWhistle .divBottomButton .wizInfo {
    display: block;
    height: 37px;
    width: auto;
}

.createWhistle .wizBtn {
    margin-right: 7px;
    width: 35px;
    cursor: pointer;
}

.createWhistle .wizInfo .whistleBtn, .createWhistle .wizInfo .cancelBtn {
    float: right;
    width: 110px;
}
.createWhistle .wizInfo .whistleBtn {
    background-color: #243147;
    color: #ffffff;
}



.createWhistle .wizInfo .whistleBtn .fa {
    margin-right: 5px;
}

.createWhistle .wizInfo .cancelBtn {
    margin-left: 10px;
}

.createWhistle .wizInfo .whistleBtn, .createWhistle .wizInfo .cancelBtn {
    background-color: #243147;
    border: 1px solid #243147;
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
    float: right;
    font-size: 14px;
    font-weight: 600;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    text-align: center;
    text-transform: uppercase;
    width: 85px;
}
.hover{
  background-color: #d6d6d6 !important;
  border-color: #188cef !important;
  color: #ffffff !important;
}
.createWhistle .wizInfo .whistleBtn{
    width: 125px;
}
.mobile .createWhistle .wizInfo .whistleBtn, .mobile .createWhistle .wizInfo .cancelBtn {
    font-size: 11px;
    width: 70px;
}

.createWhistle .wizInfo .whistleBtn .fa {
    float: left;
    font-size: 18px;
    line-height: 36px;
    margin: 0 5px 0 0;
}

.mobile .createWhistle .wizInfo .whistleBtn .fa {
    font-size: 16px;
}

.createWhistle .wizInfo .cancelBtn {
    background-color: transparent;
    color: #243147;
    margin-left: 10px;
    padding: 0;
}

/* ---------------- Create Whistle -------------------- */

/* ---------------- tagSuggBox ---------------- */
.createWhistle .tagSuggBox, .showWhistle .tagSuggBox {
    height: 32px;
    margin: 0;
    max-width: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

.createWhistle .tagSuggBox {
    margin: -10px 0 10px 0;
}

.showWhistle .tagSuggBox {
    margin: 10px 0;
}

.createWhistle .tagSuggDropDown, .showWhistle .tagSuggDropDown {
    background-color: #f3f6f8;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    color: #8b99a0;
    cursor: pointer;
    float: left;
    font-size: 12px;
    line-height: 28px;
    overflow: hidden;
    padding: 0 35px 0 10px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 115px;
}

.createWhistle .tagSuggDropDown:hover, .showWhistle .tagSuggDropDown:hover {
    background-color: #f4fbfe;
    border: 1px solid #a8e0f7;
}

.createWhistle .tagSuggAdd, .showWhistle .tagSuggAdd {
    color: #8b99a0;
    font-size: 10px;
    line-height: 28px;
    margin: 0 !important;
    position: absolute;
    right: 10px;
}

.createWhistle .tagWrapperBox, .showWhistle .tagWrapperBox {
    background-color: #f4fbfe;
    border: 1px solid #a8e0f7;
    border-radius: 3px;
    cursor: default;
    float: left;
    height: 30px;
    line-height: 28px;
    margin-left: 10px;
    overflow: hidden;
    padding: 0 35px 0 10px;
    position: relative;
}

.createWhistle .tagSelected, .showWhistle .tagSelected {
    color: #188cef;
    display: inline-block;
    font-size: 12px;
    max-width: 100px;
    min-width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.createWhistle .tagRemove, .showWhistle .tagRemove {
    background-color: transparent;
    color: #8b99a0;
    cursor: pointer;
    font-size: 12px;
    line-height: 28px;
    margin: 0 !important;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 25px;
}

.createWhistle .tagRemove:hover, .showWhistle .tagRemove:hover {
    background-color: rgba(0, 100, 255, 0.1);
}

.createWhistle .tagSuggList, .showWhistle .tagSuggList {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    list-style-type: none;
    max-height: 145px;
    max-width: 100%;
    min-width: 145px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    top: 29px;
}

.createWhistle .tagSuggList > li, .showWhistle .tagSuggList > li {
    background-color: #ffffff;
    border-top: 1px solid #e5e5e5;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    padding: 8px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.createWhistle .tagSuggList > li:first-child, .showWhistle .tagSuggList > li:first-child {
    border: none;
}

.createWhistle .tagSuggList > li:hover, .showWhistle .tagSuggList > li:hover {
    background-color: #f4fbfe;
    color: #188cef;
}

/* ---------------- tagSuggBox ---------------- */

.whistleOptionListItem {
    cursor:pointer;
    display: inline-block;
    text-align: center;
    width: 35%;
}
.fa.fa-clock-o.time {
    padding: 0 5px 0 0;
}