/*global changes css*/

body > .header .logo {
    width       : 241px;
}
.left-side {
    width : 240px;
}
.sidebar {
    width : 240px;
}
.right-side {
    margin-left : 240px;
    padding     : 62px 15px 10px 15px;
}
@media screen and (max-width : 560px) {
    .right-side {
        padding : 112px 10px 10px 10px;
    }
}
@media screen and (min-width : 992px) {
    .left-side {
        top : 51px;
    }
    /*Right side strech mode*/
    .right-side.strech {
        margin-left : 0;
    }
    /* Left side collapse */
    .left-side.collapse-left {
        left : -240px;
    }
}
@media screen and (max-width : 992px) {
    .row-offcanvas-left {
        left : 240px;
    }
    .row-offcanvas-left .sidebar-offcanvas {
        left : -240px;
    }
}
/*Give content full width on xs screens*/

@media screen and (max-width : 992px) {
    .right-side {
        margin-left : 0;
    }
}
.panel {
    background    : #fff;
    border-radius : 3px;
    margin        : 15px 0;
}
.panel-heading {
    border-bottom : 1px solid #efefef;
}
/*search field*/
.nav-search {
    float     : left;
    max-width : 220px;
}
.nav-search .search-field {
    padding-left : 28px;
    padding-top  : 11px;
}
.nav-search .search-field .form-control {
    width              : 132px;
    height             : 28px;
    -webkit-transition : all .3s ease;
    -moz-transition    : all .3s ease;
    -o-transition      : all .3s ease;
    transition         : all .3s ease;
    border             : 1px solid #ccc;
    box-shadow         : none;
    background         : #fff url("../../img/images/search.png") no-repeat 8px center;
    padding            : 0 0 0 30px;
    color              : #ccc;
    border-radius      : 50px;
}
.nav-search .search-field .form-control:focus {
    width              : 182px;
    border             : 1px solid #ccc;
    box-shadow         : none;
    -webkit-transition : all .3s ease;
    -moz-transition    : all .3s ease;
    -o-transition      : all .3s ease;
    transition         : all .3s ease;
    color              : #555;
}
/*sales chart */

#sales-chart svg {
    height        : 350px;
    margin-left   : -21px;
    margin-bottom : -9px;
}
.chart-header {
    color         : #555;
    font-size     : 24px;
    margin-top    : 20px;
    margin-bottom : 10px;
    padding       : 0 23px;
}
#main-chart {
    width : 100%;
}
#main-chart .ti-fullscreen {
    font-size : 18px;
}
.statchart-data {
    width         : 65%;
    float         : left;
    color         : #999;
    margin-bottom : -26px;
    margin-top    : 15px;
}
.statchart-data .data {
    width        : 30%;
    float        : left;
    padding-left : 9%;
}
.statchart-data .percent {
    font-size : 24px;
    color     : #777;
}
.chart-header .option-more {
    font-size         : 19px;
    -webkit-transform : rotate(90deg);
    -moz-transform    : rotate(90deg);
    -ms-transform     : rotate(90deg);
    -o-transform      : rotate(90deg);
    transform         : rotate(90deg);
    display           : inline-block;
}
.chart-header .chartoption-menu {
    min-width : 100px;
}
#sales-chart svg .nv-legendWrap {
    pointer-events : none;
}
#sales-chart .nvd3 .nv-axis line {
    stroke : #f5f5f5;
}
#sales-chart .nvd3 .nv-groups .nv-group {
    fill-opacity : 1 !important;
}
/*sales chart ends here*/

/*users, visits, hits tiles*/

.main-cards h4 {
    padding-left : 22px;
    padding-top  : 4px;
    color        : #555;
}
.main-cards p {
    padding   : 9px 22px 5px 22px;
    color     : #555;
    font-size : 24px;
}
.main-cards p small {
    font-size   : 57%;
    font-weight : bold;
}
.main-cards .progress-label {
    margin-right : 15px;
    color        : #29AC6A;
    font-size    : 14px;
}
.hits-progress {
    margin-bottom    : 0;
    margin-top       : 33px;
    background-color : #DAF6E8;
}
#user-chart canvas, #subscriber-chart canvas {
    margin-bottom : -3px;
    margin-right  : -4px;
}
/*users, visits, hits tiles ends*/

/*chats profile*/
.profile-page .cover-image {
    width                   : 100%;
    height                  : 114px;
    background-image        : url("../../img/profile-cover.jpg");
    background-size         : cover;
    border-top-left-radius  : 3px;
    border-top-right-radius : 3px;
}
.profile-page .cover-image .change_pic {
    background-color : rgba(225, 225, 225, .4);
}
.profile-page .cover-image .change_pic img {
    height : 20px;
}
.profile-page .cover-image .profile-name {
    top       : 103px;
    left      : 174px;
    position  : absolute;
    color     : #fff;
    font-size : 20px;
}
.profile-page .cover-image .follow-link {
    position      : absolute;
    right         : 30px;
    top           : 140px;
    border        : 1px solid #509DE0;
    background-color: #509DE0;
    border-radius : 4px;
}
.profile-page .cover-image .follow-link .btn {
    font-size : 14px;
    padding   : 1px 9px;
    color : #fff;
}
.profile-page .profile-pic {
    width            : 120px;
    height           : 120px;
    background-image : url("../../img/profile-pic.jpg");
    background-size  : cover;
    border-radius    : 50%;
    border           : 4px solid rgba(225, 225, 225, 1.5);
    margin-top       : -75px;
    margin-left      : 25px;
}
.profile-page .about {
    min-height : 123px;
    margin-top : -25px;
}
.profile-page .about .designation {
    padding-top  : 24px;
    padding-left : 7%;
    color        : #555;
}
.profile-page .about .designation .new-task,
.profile-page .about .designation .new-task:active {
    border-color  : #509DE0;
    color : #509DE0;
    border-radius : 200px;
    font-size     : 14px;
    padding       : 3px 10px;
}
.profile-page .about .designation .new-task:hover {
    color            : #fff;
    background-color : #509DE0;
}
.profile-page .about .brief {
    overflow-y : hidden;
    height     : 105px;
    padding    : 5px 35px 5px 20px;
    color      : #777;
}
.profile-page .about .brief:before {
    content          : '';
    height           : 67%;
    width            : 1px;
    position         : absolute;
    left             : 0;
    top              : 26%;
    background-color : #ccc;
}
.profile-page .about .brief h4 {
    font-weight : 700;
}
/*chats profile ends*/

/*weather widget*/

.weather-widget {
    background-image : url("../../img/d4-weather.jpg");
    background-size  : cover;
    height           : 260px;
    color            : #fff;
    position         : relative;
    border-radius    : 5px;
}
.weather-data .temperature {
    padding-top  : 29px;
    padding-left : 10%;
}
.weather-data .temperature h2 span {
    font-size    : 60px;
    margin-right : 40px;
}
.weather-data .temperature .icon {
    position  : absolute;
    font-size : 82px;
    z-index   : 0;
}
.weather-data .temperature .location {
    font-size : 14px;
    position  : absolute;
}
.weather-footer {
    background                 : rgba(0, 0, 0, 0.4);
    height                     : 100px;
    bottom                     : 0;
    width                      : 100%;
    position                   : absolute;
    border-bottom-right-radius : 4px;
    border-bottom-left-radius  : 4px;
}
.weather-footer h5 {
    color : #B3B3B3;
}
.weather-footer i {
    font-size : 22px;
    margin    : 5px 0 8px 0;
}
.weather-footer p {
    font-size : 15px;
}
.weather-footer .popup {
    -webkit-transition : .1s ease-in-out;
    -moz-transition    : .1s ease-in-out;
    -o-transition      : .1s ease-in-out;
    transition         : .1s ease-in-out;
}
.weather-footer .popup:hover {
    cursor            : pointer;
    -webkit-transform : scale(1.1);
    -moz-transform    : scale(1.1);
    -o-transform      : scale(1.1);
    -ms-transform     : scale(1.1);
    transform         : scale(1.1);
}
@media screen and (max-width : 375px) {
    .weather-data .temperature h2 span.pull-right {
        font-size: 50px;
        margin-right: 26px;
        margin-top: -15px;
    }
    .weather-footer .popup {
        padding-left : 10px;
    }
    .weather-data .temperature .icon {
        font-size: 60px;
    }
}
/*weather widget ends*/

/*timeline chart*/

.schedule-cont {
    padding-left : 0;
}
.schedule-cont .item {
    border-left   : 1px solid #ccc;
    margin-bottom : -10px;
    min-height    : 70px;
    padding-top   : 10px;
}
.schedule-cont .success {
    border-left : 1px solid #66CC99;
}
.schedule-cont .danger {
    border-left : 1px solid #FF6666;
}
.schedule-cont .item .text-muted {
    color : #888;
    font-size: 11px;
}
.schedule-cont .item p {
    color : #555;
}
.schedule-cont .item:before {
    content          : " ";
    display          : table;
    background-color : #fff;
    border           : 1px solid #58748B;
    border-radius    : 10px;
    height           : 9px;
    left             : 0;
    margin-left      : -5px;
    width            : 9px;
    clear            : both;
    bottom           : auto;
    top              : 4px;
}
.schedule-cont .success:before {
    border-color : #66CC99;
}
.schedule-cont .danger:before {
    border-color : #FF6666;
}
.schedule-cont .item .data {
    padding-left : 20px;
    margin-top   : -10px;
}
/*timeline chart ends*/

/*server load*/
.server-load h4 {
    font-weight : bold;
    color       : #777;
}
/*social networks*/
.social .twitter {
    background-color : #1da1f2;
    height           : 77px;
    padding-top      : 13px;
}
.social .twitter i, .social .facebook i {
    color          : #fff;
    font-size      : 50px;
    vertical-align : middle;
}
.social .twitter i:hover, .social .facebook i:hover {
    display        : inline-block;
    font-size      : 60px;
    -moz-transform : translate3d(0px, -7px, 0px);
    -ms-transform  : translate3d(0px, -7px, 0px);
    -o-transform   : translate3d(0px, -7px, 0px);
    transform      : translate3d(0px, -7px, 0px);
    transition     : transform .2s ease-in-out;

}
.social .facebook {
    background-color : #3b5998;
    height           : 77px;
    padding-top      : 13px;
    width            : 100%;
}
.social .info-1, .social .info-2 {
    font-weight : bold;
    color       : #777;
}
.social .info-1 p, .social .info-2 p {
    color: #999;
}
.social .info-1 {
    padding-left : 15px;
}
.social .info-2 {
    padding-right : 20px;
}
.social .info-1 h3, .social .info-2 h3 {
    font-weight   : bold;
    margin-bottom : 3px;
    margin-top    : 20px;
}
/*feeds*/
.tile_1 {
    background-color : rgba(82, 166, 223, .7);
    height           : 148px;
}
.tile_2 {
    height : 200px;
}
.live-tile .tile-time {
    bottom : 4px;
    left   : 20px;
}
.live-tile .feed-title {
    top         : 5px;
    left        : 10px;
    font-size   : 19px;
    font-weight : bold;
}
.live-tile .full {
    padding : 40px 20px 10px 23px;
}
.live-tile, .list-tile, .copy-tile, .tile-strip .flip-list > li {
    height             : 100%;
    margin             : 0;
    outline            : 1px solid transparent;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
    padding            : 0;
    width              : 100%;
}
/*feeds ends*/


/*media queries*/
@media screen and (max-width : 560px) {
    .rightsidebar-right .rightsidebar-right-content {
        padding-top : 103px;
    }
    .profile-page .profile-pic {
        width      : 95px;
        height     : 95px;
        margin-top : -58px;
    }
    .profile-page .cover-image .profile-name {
        left : 148px;
    }
    .profile-page .about .brief {
        height : 150px;
    }
    body > .header .logo, body > .header .navbar {
        width : 100%;
    }
}
@media screen and (max-width : 680px) {
    .statchart-data {
        width         : 100%;
        margin-bottom : 0;
    }
}
@media screen and (max-width : 767px) {
    .profile-page .about .brief {
        border-left : 0;
        padding     : 5px 35px;
    }
    .profile-page .cover-image .profile-name {
        top : 88px;
    }
    .profile-page .cover-image .follow-link {
        top : 127px;
    }
    .profile-page .about .brief:before {
        visibility : hidden;
    }
}