﻿body {
    font-family: 'Open Sans', sans-serif;
}

#divAdvancedSearchPg {
    display: flex !important;
    justify-content: center;
}

.fund-widget {
    display: flex;
}


.fund-widget-iframe .fund-widget .fw-box {
    width: 194px;
    margin-right: 10px !important;
}

.fund-widget-iframe .fund-widget .fw-head {
    height: 70px !important;
}

.fw-box {
    width: 194px;
    font-size: 9.5pt;
    color: #2c5982;
    text-align: center;
    margin-right: 10px;
}

    .fw-box:last-child {
        margin-right: 0px;
    }

.fw-head {
    background: url('../images/fw-head-bg.png')no-repeat left top;
    font-size: 9.5pt;
    color: #fff;
    text-align: center;
    align-items: center;
    background-size: cover;
    width: 92%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    padding-top: 30px;
    font-weight: 700;
    margin: auto 4%;
    /*background-position: 16px 0;
    margin-left: -13px;
    padding-left: 16px;*/
    box-sizing: border-box;
}

.fw-content {
    border: 3px solid #009ace;
    border-radius: 16px;
    margin-top: -1px;
    padding: 5px;
}
    .fw-content span { line-height: 15px; }

    .fw-content.company-info-box {
        border-bottom-width: 8px;
    }

.fw-box-6 {
    height: 120px;
}


.fw-box-4 {
    height: 80px;
}

.fw-box-8 {
    height: 160px;
}

.fw-box-8-2 {
    height: 80px;
    padding: 0;
}

.fund-widget-iframe .fw-box-6 {
    height: 136px;
}

.fund-widget-iframe .fw-box-6-2 {
    height: 136px;
    padding: 0;
}

.fund-widget-iframe .fw-box-4 {
    height: 79px;
    padding: 0 5px;
}
.fund-widget-iframe .fw-box-4 > span {display: block; line-height: 19px !important;}

.fund-widget-iframe .fw-box-8-2 {
    height: 74px;
}

.fund-widget-iframe .fw-box-8 {
    height: 199px;
}

ul.o-exclution {
    list-style: none;
    padding: 0;
    display: block;
    margin: 0px auto;
    margin-top: 10px;
  /*  columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;*/
    width: 130px;
}

    ul.o-exclution li {
        display: block;
        font-size: 7pt !important;
        margin-right: 5px;
        font-weight: 700;
       /* width: 60px;*/
        text-align: center;
    }

.rating-img {
    padding: 5px 0px;
}



ul.o-exclution li span {
    display: block;
    line-height: normal;
}

ul.o-exclution li:last-child {
    margin-right: 0px;
}

.p-text {
    font-weight: 700;
}

    .p-text.big {
        font-size: 50pt;
        line-height: 50pt;
        margin-top: 5px; margin-top:0;
    }

.fund-widget-iframe .p-text.big {
    font-size: 50pt;
    line-height: 60pt;
    margin-top: 9px; margin-top:0;
}

.font-8pt {
    font-size: 8pt;
    /*line-height: 9.6pt;*/
    line-height: 5.6pt;
    display: block;
}

.fw-content.pad0 {
    padding: 5px 0px 0 !important;
}

.fw-content.pad23 {
    padding: 23px 0px 0 !important;
}


ul.company-info {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #009ace;
    margin-top: 6px;
    cursor: pointer; /*added by khyati*/
}

    ul.company-info li {
        font-size: 24pt !important;
        font-weight: 700;
        width: 100%;
        line-height: 28pt;
        border-left: 1px solid #009ace;
        height: 70px;
        justify-content: center;
        align-items: center;
        display: flex;
        cursor: pointer; /*added by khyati*/
        height: 89px;
        color: #2c5982;
    }

        ul.company-info li:first-child {
            border-left: none;
            border-bottom-left-radius: 7px;
        }

        ul.company-info li:last-child {
            border-bottom-right-radius: 7px;
        }

        ul.company-info li.active {
            background-color: #009ace;
            color: #ffffff;
        }

.circle-graph {
    display: flex;
}

    .circle-graph div {
        width: 100%;
    }

.p-text.small {
    font-size: 20pt;
    line-height: 24pt;
}

.circle-graph div.p-text.small {
    align-items: center;
    display: flex;
    justify-content: center;
}
/*Chart Css*/
.chart-icons {
    height: 100%;
    width: 100%;
    min-height: 40px;
    display: block;
    position: relative;
    display: flex;
    justify-content: center;
}

    .chart-icons > div::before {
        content: " ";
        width: 10px;
        height: 2px;
        position: absolute;
        bottom: 0px;
        left: 13px;
        z-index: 1;
        border-top: 1px solid;
    }

    .chart-icons > div::after {
        content: "+";
        position: absolute;
        bottom: -9px;
        right: 11px;
        font-size: 16px;
    }

/*End Chart*/

/*Slider Css*/
.ui-slider-horizontal.ui-slider-pips {
    margin-bottom: 1em;
    /*background: linear-gradient(to right, #da2128 13%, #e66417 32%, #56a072 57%, #007d3d 100%);*/
    background: linear-gradient(to right,#007d3d 13%, #56a072 32%, #e66417 57%, #da2128 100%);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
    border: none;
    box-shadow: inset 0 0 0px 1px rgba(0, 0, 0, 0.18);
    height: 7px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 3px;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: url(../images/slider-icon.png) 50% 50% repeat-x !important;
    border: none !important;
    outline: none;
}

.ui-slider .ui-slider-handle {
    width: 20px !important;
    height: 18px !important;
}

.ui-slider-pips .ui-slider-pip {
    top: 9px !important;
}

.ui-slider-pips .ui-slider-pip {
    font-weight: 700;
    color: #2c5982 !important;
}

.ui-slider-pips [class*=ui-slider-pip-selected] {
    font-size: 11pt !important;
    line-height: 8pt !important;
    color: #f6b035 !important;
}

.ui-slider-pips .ui-slider-label {
    top: 9px !important; line-height:7px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.5em !important;
}

.range-slider {
    display: block;
}

.fw-content .range-slider:last-child {
    /*margin-top: 30px;*/
    margin-top: 40px; /*margin-top:22px;*/
}
/*End Slider Css*/
ul.srri-rating {
    padding: 0;
    margin: 0px 0;
    list-style: none;
    display: inline-flex;
}

    ul.srri-rating li.x:first-child {
        border-right: 3px solid #2c5982;
        padding: 5px 0;
    }

    ul.srri-rating li.x {
        width: auto;
        padding: 5px 0;
       /* height: 130px;*/
    }
    ul.srri-rating li.x.fw-box-disabled{color: darkgray;}
    ul.srri-rating li{color: #2c5982;}
    ul.srri-rating li span {line-height: 16px;  display: inline-block;}
    #divSRRI .select2-container .select2-selection{height:67px !important;}

.font-32pt {
    font-size: 32pt;
    line-height: 31.5pt;
}

.font-7pt {
    font-size: 7pt;
    text-align: center;
    display: block;
    line-height: 8pt;
}

.font-16pt {
    font-size: 16pt;
    text-align: center
}

.mt7 {
    margin-top: 7px;
}

/*.fw-head a:hover {
    text-decoration: underline;
}*/

.fw-head a {
    text-decoration: none;
}

.zc-menu {
    display: none !important;
}

.fw-box-disabled {
    border: 3px solid #c2bfbf;
    background-color: rgba(237, 232, 232, 0.4);
    cursor: not-allowed;
    color: darkgray;
}

    .fw-box-disabled .ui-slider-horizontal.ui-slider-pips {
        background: #c2bfbf;
    }

li.fw-box-disabled {
    border-bottom-right-radius: 16px;
    border-top-right-radius: 16px;
    border: none;
}

ul.srri-rating li.x:first-child {
    border-right: 3px solid #c2bfbf;
}

.scoreDisabled {
    background-color: rgba(237, 232, 232, 0.4);
    cursor: not-allowed !important;
    color: darkgray;
}

#divAdvanceSearch input[type="checkbox"] {
    -webkit-appearance: initial;
    background: white;
    width: 23px;
    height: 23px;
    position: relative;
    border-color: #009ace;
    cursor: pointer;
}

    #divAdvanceSearch input[type="checkbox"]:checked {
        background: #009ace;
    }

        #divAdvanceSearch input[type="checkbox"]:checked:after {
            /* Heres your symbol replacement */
            content: "✓";
            color: #fff;
            font-size: 18px;
            /* The following positions my tick in the center,
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            /*
     * If you want to fully change the check appearance, use the following:
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
        }

span.select2-selection.select2-selection--multiple {
    border: 2px solid #009ace !important;
}

span.select2-dropdown.select2-dropdown--below, span.select2-dropdown.select2-dropdown--above {
    border: 2px solid #009ace !important;
}


.user-rating {
    /*
    font-size: 20px;
    padding: 10px 30px;
    display: inline-block;*/
    direction: rtl;
    font-size: 17px;
    unicode-bidi: bidi-override;
    padding: 7px 0px 7px 15px;
    display: inline-block;
}

    .user-rating input {
        opacity: 0;
        position: relative;
        left: -20px;
        z-index: 2;
        cursor: pointer;
        height: 16px;
        width: 16px;
    }

    .user-rating i.fa-crown {
        display: inline-block;
        font-style: normal;
        /*font-weight: normal;*/
        position: relative;
        z-index: 1;
    }

    .user-rating i {
        margin-left: -20px;
    }

        .user-rating i.fa-crown:before {
            color: #777777;
            /*content:"\f006";*/
            /*padding-right: 5px;*/
        }
    /*.user-rating input:hover + i.fa-crown:before, .user-rating input:hover + i.fa-crown ~ i.fa-crown:before, .user-rating input:checked + i.fa-crown:before, .user-rating input:checked + i.fa-crown ~ i.fa-crown:before {
  color: #ffd100 !important;
}*/

    .user-rating input:checked + i.fa-crown:before, .user-rating input:checked + i.fa-crown ~ i.fa-crown:before {
        color: #009ace;
    }

    .user-rating input:hover i.fa-crown:before, .user-rating input:hover + i.fa-crown:before, .user-rating input:hover + i.fa-crown ~ i.fa-crown:before {
        color: #009ace !important;
    }

    .user-rating input:checked:hover + i.fa-crown:before, .user-rating input:checked:hover + i.fa-crown ~ i.fa-crown:before {
        color: #777777 !important;
    }

.score-hover {
    background-color: #009ace;
    color: #ffffff !important;
}

.selected-rating {
    color: #ffd100;
    font-weight: bold;
    font-size: 3em;
}

span#lblPercentageOverXYears { line-height: 16px !important; display: inline-block; margin-top: 5px;}
/*span#lblPercentageOverXYears+div{padding-top:5px !important}*/
#divAdvanceSearch input[type="search"].select2-search__field{ padding: 0; font-size: 14px;}
#divAdvanceSearch .select2-container--default .select2-selection--multiple .select2-selection__rendered li{margin:0}
#divAdvanceSearch .select2-container--default .select2-selection--multiple .select2-selection__rendered li.select2-selection__choice {
    margin-right: 5px; margin-top: 5px; font-size: 13px; line-height: 15px;}

#adiv .adv-top-search.adv-search-btn { text-align: center;  margin-top: 0; }
#adiv .adv-top-search.adv-search-btn .btn+.btn{margin-left:16px;}
@media (min-width: 1200px){
    #adiv .adv-top-search.adv-search-btn{margin-top:32px;}
}
@media (max-width: 1199px) {
    ul.o-exclution li {
        margin-right: 3px;
    }

    .range-slider {
        display: block;
    }



    .zc-map {
        display: none;
    }

    .fund-widget {
        flex-wrap: wrap;
        justify-content: center
    }

    .fw-box {
        margin-bottom: 30px;
    }
    /*.fw-head {
        width: 88%;
    }*/
}

@media (max-width: 979px) {
    .fund-widget {
        flex-wrap: wrap;
        justify-content: center
    }

    .fw-box {
        /*width: 31.7%;*/
        margin-bottom: 30px;
    }

    .range-slider {
    }

    .font-7pt.mt7 {
        margin-top: 3px;
        padding: 0 5px;
    }

    .fund-widget .fw-box:nth-child(3) {
        margin-right: 0px;
    }
}

@media (min-width: 980px) and (max-width: 1199px) {
    .fw-box {
        margin: 0px 30px 10px 30px;
        margin-bottom: 30px;
    }
    .p-text.big {
        font-size: 35pt;
        line-height: 35pt;
        margin-top: 5px;
    }

    .fund-widget-iframe .p-text.big {
        font-size: 50pt;
        line-height: 50pt;
        margin-top: 9px;
    }
}

@media (max-width: 767px) {


    .font-7pt.mt7 {
        margin-top: 6px;
    }
}

@media (max-width: 650px) {
    /*.fw-box {
        width: 48%;
    }*/

    .fund-widget .fw-box:nth-child(3) {
        margin-right: 10px;
    }

    .fund-widget .fw-box:nth-child(2), .fund-widget .fw-box:nth-child(4) {
        margin-right: 0px;
    }

    /*.fw-head {
        height: 90px;
    }*/

    .font-8pt {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .fund-widget {
        flex-direction: column;
    }

    .fw-box {
        /*width: 200px;*/
        margin: 0 auto 20px !important;
    }

    .fund-widget-iframe .fund-widget .fw-box {
        margin: 0 auto 20px !important;
    }

    /*.fw-head {
        height: 70px;
    }*/
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #009ace !important;
    border: 1px solid #009ace !important;
    color: white !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white !important;
}

/*@media (min-width: 980px) and (max-width: 5000px) {
    .chart-icons > div::before {
        left: 17px;
    }

    .chart-icons > div::after {
        right: 17px !important;
    }
}*/