.top-sec-p{background: #018be3; float:left; position:relative; width:100%;}
.top-sec-p h2{color: #fff; float: right; font-size: 36px; font-weight: bold; margin-right:48px; margin-top: 52px; /*text-shadow: 0px 1px 5px rgba(0,0,0,0.5);*/}
.top-sec-p img{height: 150px; width: auto;}
.link-sec{width: 100%; float: left; position:relative; display:block; padding: 10px 15px; background: #fff; border-radius: 5px; box-shadow: 0px 0px 3px rgba(0,0,0,0.5); margin-top: 20px; cursor:pointer;}
.link-sec .img-sec1{width: 60px; height: 60px; border-radius: 50px; background: #fa9c5c url(../images/health-profil-icon.png) 2px 2px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
.link-sec .img-sec2{width: 60px; height: 60px; border-radius: 50px; background: #fa9c5c url(../images/health-profil-icon.png) -67px 4px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
.link-sec .img-sec3{width: 60px; height: 60px; border-radius: 50px; background: #fa9c5c url(../images/health-profil-icon.png) -131px 4px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
.link-sec .img-sec4{width: 60px; height: 60px; border-radius: 50px; background: #fa9c5c url(../images/health-profil-icon.png) -198px 4px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}

.link-sec:hover .img-sec1{background: #018be3 url(../images/health-profil-icon.png) 2px 2px no-repeat;}
.link-sec:hover .img-sec2{background: #018be3 url(../images/health-profil-icon.png) -67px 4px no-repeat;}
.link-sec:hover .img-sec3{background: #018be3 url(../images/health-profil-icon.png) -131px 4px no-repeat;}
.link-sec:hover .img-sec4{background: #018be3 url(../images/health-profil-icon.png) -198px 4px no-repeat;}
.link-sec .link{ color:#018be3; font-size:16px; text-align:left; margin-top:18px; position:relative; display:block; transition:all 0.3s ease-in-out;}
.link-sec:hover  .link{text-decoration:none; color:#fa9c5c;}
.table{border:1px solid #ccc !important; border-collapse:collapse; }

.table tr th{background:#018be3; color:#fff; border:1px solid #fff !important; border-collapse:collapse;}
.table > tr {border:1px solid #ccc !important; border-collapse:collapse; }
.table  tr  td {border:1px solid #ccc !important; border-collapse:collapse; } 
/*.table tr td:first-child{text-align:center;}*/
    .table tbody > tr:nth-of-type(odd) {
        background-color: #f9f9f9;
    }

.link-sec .pimg-sec1{width: 60px; height: 60px; border-radius: 50px; background: #fa9c5c url(../images/phr-icon.png) -2px -8px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
.link-sec .pimg-sec2{width: 60px; height: 60px; border-radius: 50px; background: #fa9c5c url(../images/phr-icon.png) -122px -8px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
.link-sec .pimg-sec3{width: 60px; height: 60px; border-radius: 50px; background: #fa9c5c url(../images/phr-icon.png) -262px -8px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}

.link-sec:hover .pimg-sec1{background: #018be3 url(../images/phr-icon.png) -2px -8px no-repeat;}
.link-sec:hover .pimg-sec2{background: #018be3 url(../images/phr-icon.png) -122px -8px no-repeat;}
.link-sec:hover .pimg-sec3{background: #018be3 url(../images/phr-icon.png) -262px -8px no-repeat;}
.top-title{background:#fff; position:relative; width:100%;float:left; margin-top:-10px; border-bottom:2px solid #f34443; }
.top-title img{width:20px; height:auto; margin-top:8px; float:left; position:relative;}
.top-title h5{color:#018be3;}


/*Dashboard css*/

.main{width:100%; float:left; position:relative; background:#fff;}
        .main ul{width:100%; float:left; position:relative; list-style:none;  padding:3px;}
        .main ul li{width:25%; float:left; position:relative;  /*box-shadow:0px 0px 1px rgba(0,0,0,0.2);*/ padding:10px; }
        .main ul li a{width:100%; height:100%; float:left; position:relative; display:block; padding:10px; background:#fff; transition:all 0.3s ease-in-out; border-radius:5px; border:1px solid #ddd; box-shadow:0px 0px 6px rgba(0,0,0,0.1);}
        .main ul li a:hover{text-decoration:none;}
        .main ul li .img-sec{width:100px; height:100px; display:block; margin:0 auto; padding:10px; position:relative; background:#018be3; border-radius:50%; /*box-shadow:0px 0px 10px rgba(9,180,182,0.5);*/ transition:all 0.3s ease-in-out;}
        .main ul li a:hover .img-sec{ background:#f34443;  box-shadow:0px 0px 25px rgba(0,0,0,0.5);}
        .main ul li a .img-sec img{transition:all 0.3s ease-in-out; margin-top:8px;}
        .main ul li a:hover .img-sec img{transform: scale(1.2);}
        .main ul li a:hover {background:#018be3; color:#fff;}
        .main ul li .text-sec{width:100%;position:relative; text-align:center; color:#f34443; margin-top:15px; font-weight:bold; transition:all 0.3s ease-in-out;}
        .main ul li a:hover .text-sec{width:100%;position:relative; text-align:center; color:#fff; margin-top:15px;}

        .right-menu{margin-right:22px !important;}

       .page-topbar .quick-area .info-menu li .dropdown-menu{margin-left:-150px;}
        .page-topbar .dropdown-menu:before{right:9px !important;}
        .page-topbar .dropdown-menu:after{right:9px !important;}

        .view-btn{background:#018be3 url(../images/Viewnew.png) 2px 2px no-repeat !important; padding:3px 14px !important; border-radius:4px;height:24px;}
        .view-btn:hover{background:#313131 url(../images/Viewnew.png) 2px 2px no-repeat !important;height:24px;}
        .calender-btn{background:#fa9c5c url(../images/calendernew.png) 2px 2px no-repeat !important; padding:3px 14px !important; height:24px;}
        .calender-btn:hover{background:#018be3 url(../images/calendernew.png) 2px 2px no-repeat !important; padding:3px 14px !important; height:24px;}
        .edit-btn{background:#fa9c5c url(../images/editnew1.png) 2px 2px no-repeat !important; padding:3px 14px !important; height:24px;}
        .edit-btn:hover{background:#018be3 url(../images/editnew1.png) 2px 2px no-repeat !important; padding:3px 14px !important; height:24px;}
        .download-btn{background:#fa9c5c url(../images/download-button.png) 6px 6px no-repeat !important; padding:14px 14px !important; height:24px;}
        .download-btn:hover{background:#018be3 url(../images/download-button.png) 6px 6px no-repeat !important; padding:14px 14px !important; height:24px;}
        .delete-btn{background:#fa9c5c url(../images/delete.png) 1px 2px no-repeat !important; padding:3px 14px !important;height:24px;}
        .delete-btn:hover{background:#018be3 url(../images/delete.png) 1px 2px no-repeat !important; padding:3px 14px !important;height:24px;}
        .btn-Schedule{background:#fff !important; border:1px solid #fa9c5c !important; color: #fa9c5c !important; border-radius:13px !important; padding:4px 15px !important; transition:all 0.3s ease-in-out;}
        .btn-Schedule:hover {background:#fa9c5c !important; border:1px solid #fa9c5c !important; color: #fff !important; height:24px;}
        /* The Modal (background) */
.modal {
   /* display: none;  Hidden by default */
    position: fixed; /* Stay in place */
    z-index:9999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    display:block;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
   
}
.modal-width{width:50%;}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}




.modal-header {
    padding:5px 16px;
    background-color:#018be3;
    color: white;
    float:left; width:100%;
    line-height:20px !important;
}



.user-sec{}



.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.form-control{height:30px; border-radius:4px !important; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; border:1px solid #ccc !important;}
textarea.form-control{height:auto; resize:vertical;}
.inner-box{width: 100%; float: left; position: relative; background: #fff; margin-top:10px; border-radius: 10px; border: 1px solid #ccc; padding:10px;}

hr{color:#ccc !important; border-top: 1px solid #ccc  !important;}


.main-wrapper {margin-top:60px; display: inline-block;width: 100%;  padding: 15px 20px 0 20px; min-height:490px;}


/*---------------------------------------------------------------------------------------------------------*/
.right-box-s{padding-left:80px;}
.smart-heading{color: #018be3; font-weight: bold; font-size:36px; }
.smart-heading-bo-border{width:460px; height:4px; float:left; position:relative; background:#fa9c5c; margin-bottom:60px;}
.doctor-now-btn{ background:#018be3 !important; border-radius:4px; color:#fff; transition:all 0.3s ease-in-out;}
.doctor-now-btn:hover{ background:#fa9c5c !important;}
.appointment-btn{ background:#fa9c5c !important; margin-left:30px; border-radius:4px; color:#fff; transition:all 0.3s ease-in-out;}
.appointment-btn:hover{ background:#313131 !important; }
.smart-bo-border{width:100%; float:left; position:relative; height:1px; background:#5e5e5e; margin-top:60px; }
.smart-img{}

.un-read-m{float: right; display: inline-block; margin-top: -18px; background:#018be3; font-size:11px; padding-top:2px; width: 20px; height: 20px;   border-radius: 50%;   color: #fff;  text-align: center;}


/*@media only screen and (max-width:1300px) {
    .smart-heading-bo-border{width:90%; height:4px; float:left; position:relative; background:#fa9c5c; margin-bottom:60px;}
}*/


@media only screen and (max-width:1250px) {
    .right-box-s{padding-left:40px;}
    .smart-heading{color: #018be3; font-weight: bold; font-size:30px;}
    .appointment-btn{ background:#fa9c5c !important; margin-left:10px; border-radius:4px; color:#fff; transition:all 0.3s ease-in-out;}
.smart-heading-bo-border{width:380px; height:4px; float:left; position:relative; background:#fa9c5c; margin-bottom:60px;}
}






@media only screen and (max-width:1200px) {
.main-wrapper {margin-top: 60px; display: inline-block;width: 100%;  padding: 15px 20px 0 20px;}
.page-topbar .logo-area {
   background: url('../../images/carelogo.png') 38px 3px no-repeat;
    background-repeat: no-repeat;
        background-size: 167px auto;
}
 .right-menu{margin-right:22px !important;}
}

@media only screen and (max-width:1100px) {
.main-wrapper {margin-top: 60px; display: inline-block;width: 100%;  padding: 15px 20px 0 20px;}
.page-topbar .logo-area {
   background: url('../../images/carelogo.png') 38px 3px no-repeat;
    background-repeat: no-repeat;
        background-size: 167px auto;
}
 .right-menu{margin-right:22px !important;}
    .page-topbar .logo-center {
        padding-left: 0px;
    }
}



@media only screen and (max-width:998px) {
     .top-sec-p h2{color: #fff; float: right; font-size: 36px; font-weight: bold; margin-right:48px; margin-top: 52px; text-shadow: 0px 1px 5px rgba(0,0,0,0.5);}
        .top-sec-p img{height: 150px; width: auto;}
        .main-wrapper {margin-top: 60px; display: inline-block;width: 100%;  padding: 15px 0px 0 0px;}
        .page-topbar .logo-area {
   background: url('../../images/carelogo.png') 11px 3px no-repeat;
    background-repeat: no-repeat;
        background-size: 167px auto;
}
        .page-topbar .logo-area {width:240px;}
        .right-menu{margin-right:0px !important;}
    .page-topbar .logo-center { display:none;}
         .right-box-s{padding-left:20px;}
    .smart-heading{color: #018be3; font-weight: bold; font-size:26px;}
    .smart-heading-bo-border{width:330px; height:3px; float:left; position:relative; background:#fa9c5c; margin-bottom:60px;}

        }

@media only screen and (max-width:850px) {
     .top-sec-p h2{color: #fff; float: right; font-size: 36px; font-weight: bold; margin-right:50px; margin-top: 52px; text-shadow: 0px 1px 5px rgba(0,0,0,0.5);}
        .top-sec-p img{height: 150px; width: auto;}

        .doctor-now-btn{ background:#018be3 !important; border-radius:4px; color:#fff; margin:0 auto; transition:all 0.3s ease-in-out; display:block;}
.appointment-btn{ background:#fa9c5c !important; margin-left:30px; margin:0 auto; border-radius:4px; margin-top:10px; color:#fff; transition:all 0.3s ease-in-out; display:block;}
}

@media only screen and (max-width:768px) {
     .top-sec-p h2{color: #fff; float: right; font-size:28px; font-weight: bold; margin-right:40px; margin-top:32px; text-shadow: 0px 1px 5px rgba(0,0,0,0.5);}
        .top-sec-p img{height: 100px; width: auto;}
        .link-sec{width: 100%; float: left; position: relative; padding:5px 5px; margin-top:14px;}
               .link-sec .link{ color:#333333; font-size:14px; text-align:left; margin-top:18px;}
               .modal-width{width:80%;}

                 .main ul li .img-sec{width:60px; height:60px; display:block; margin:0 auto; padding:10px; position:relative;  border-radius:50%;  transition:all 0.3s ease-in-out;}
       .main ul li{width:33.33%; float:left; position:relative; height:150px;  /*box-shadow:0px 0px 1px rgba(0,0,0,0.2);*/ padding:5px; }
        .main ul li a{width:100%; height:100%; float:left; position:relative; display:block; padding:10px; background:#fff; transition:all 0.3s ease-in-out;}
         .main ul li a .img-sec img{transition:all 0.3s ease-in-out; margin-top:4px;}
         .main-wrapper {margin-top:40px;}
         .smart-img{display:none;}
}

@media only screen and (max-width:640px) {
     .top-sec-p h2{color: #fff; float: right; font-size:24px; font-weight: bold; margin-right:40px; margin-top:32px; text-shadow: 0px 1px 5px rgba(0,0,0,0.5);}
        .top-sec-p img{height: 100px; width: auto;}
        .link-sec .img-sec1{width:50px; height:50px; border-radius: 50px; background: #018be3 url(../images/health-profil-icon.png) -1px -2px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
        .link-sec .img-sec2{width: 50px; height: 50px; border-radius: 50px; background: #018be3 url(../images/health-profil-icon.png) -71px -2px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
        .link-sec .img-sec3{width: 50px; height: 50px; border-radius: 50px; background: #018be3 url(../images/health-profil-icon.png) -136px 0px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
        .link-sec .img-sec4{width: 50px; height: 50px; border-radius: 50px; background: #018be3 url(../images/health-profil-icon.png) -201px 0px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}

        .link-sec:hover .img-sec1{background: #fa9c5c url(../images/health-profil-icon.png) -1px -2px no-repeat;}
        .link-sec:hover .img-sec2{background: #fa9c5c url(../images/health-profil-icon.png) -71px -2px no-repeat;}
        .link-sec:hover .img-sec3{background: #fa9c5c url(../images/health-profil-icon.png) -136px 0px no-repeat;}
        .link-sec:hover .img-sec4{background: #fa9c5c url(../images/health-profil-icon.png) -201px 0px no-repeat;}
         .link-sec .link{ color:#333333; font-size:14px; text-align:left; margin-top:12px;}



         .link-sec .pimg-sec1{width:50px; height:50px; border-radius: 50px; background: #018be3 url(../images/phr-icon.png) -7px -14px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
.link-sec .pimg-sec2{width:50px; height:50px; border-radius: 50px; background: #018be3 url(../images/phr-icon.png) -127px -14px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}
.link-sec .pimg-sec3{width:50px; height:50px; border-radius: 50px; background: #018be3 url(../images/phr-icon.png) -267px -14px no-repeat; transition:all 0.3s ease-in-out; cursor:pointer;}

.link-sec:hover .pimg-sec1{background: #fa9c5c url(../images/phr-icon.png) -7px -14px no-repeat;}
.link-sec:hover .pimg-sec2{background: #fa9c5c url(../images/phr-icon.png) -127px -14px no-repeat;}
.link-sec:hover .pimg-sec3{background: #fa9c5c url(../images/phr-icon.png) -267px -14px no-repeat;}



}

@media only screen and (max-width:550px) {
     .top-sec-p h2{color: #fff; float: right; font-size:20px; font-weight: bold; margin-right:15px; margin-top:32px; text-shadow: 0px 1px 5px rgba(0,0,0,0.5);}
        .top-sec-p img{height:80px; width: auto;}
        .main ul li .text-sec{width:100%;position:relative; text-align:center;  margin-top:15px; font-size:13px;}
         .main ul li{width:33.33%; float:left; position:relative; height:135px; padding:3px; }
         .main ul li a{width:100%; height:100%; float:left; position:relative; display:block; padding:10px 5px; background:#fff; transition:all 0.3s ease-in-out;}
}

@media only screen and (max-width:400px) {
     .top-sec-p h2{color: #fff; float: right; font-size:20px; font-weight: bold; margin-right:20px; margin-top:20px; text-shadow: 0px 1px 5px rgba(0,0,0,0.5);}
        .top-sec-p img{height:60px; width: auto;}
        .link-sec .link{ color:#333333; font-size:14px; text-align:left; margin-top:12px;}
         .main ul li .text-sec{width:100%;position:relative; text-align:center; margin-top:15px; font-size:13px;}

          .main ul li{width:50%; float:left; position:relative; height:150px;  }
           .user-sec {
        display: none !important;
    }
}