/* here you can put your own css to customize and override the theme */
#login-wrapper {
    width: 100%;
    height: 100%;
    background-size: cover;
}

#bg {
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
}

#login {
    margin: 0 auto;
    margin-top: 130px;
}

#login-logo img {
    display: block;
    width: 300px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.loginButton {
    margin-top: 30px;
}

.loginLabel p {
    font-size: 15px;
    text-align: center;
}

.loginCopyRights p {
    font-size: 15px;
    text-align: center;
    color: #989595;
}

/* Calendar Toggle */
.calendar-toggle {
    font-size: 30px;
    margin-right: 10px;
    cursor: pointer;
}

.calendar-toggle.active {
    color: #3598dc;
}

/* Header */
.page-header.navbar .page-logo {
    background: #fff;
}

.page-header.navbar {
    background: #fff !important;
}

.logo {
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 45%;
}

/* Tooth SVG */
.tooth {
    width: 150px;
    height: 150px;
}

.tooth svg {shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd}
.str2 {stroke:#82888A;stroke-width:635582;stroke-linecap:round;stroke-linejoin:round}
.str4 {stroke:#82888A;stroke-width:635582;stroke-linecap:round;stroke-linejoin:round}
.str3 {stroke:#82888A;stroke-width:635582;stroke-linecap:round;stroke-linejoin:round}
.str1 {stroke:#82888A;stroke-width:635582;stroke-linecap:round;stroke-linejoin:round}
.str5 {stroke:#82888A;stroke-width:635582;stroke-linecap:round;stroke-linejoin:round}
.str0 {stroke:#96989A;stroke-width:635606;stroke-linecap:round;stroke-linejoin:round}
.fil0 {fill:none; pointer-events:all;}
.fil1 {fill:none; pointer-events:all;}
.str0, .str1, .str2, .str3, .str4, .str5 {
    stroke: #454545;
}

.fil0:hover {
    fill: #a9a7a6;
    cursor: pointer;
}

/* Sidebar */
.page-sidebar .page-sidebar-menu>li.active.open>a>i, .page-sidebar .page-sidebar-menu>li.active>a>i {
    color: #f9f1fb;
}

/* Calendar Styles */
#calendar .fc-day {
    height: 0px;
    cursor: pointer;
}

#calendar td.fc-day {
    position: relative;
}

#calendar td, #calendar td.fc-today {
    border: none !important;
}

#calendar .fc-ltr .fc-basic-view .fc-day-number {
    text-align: center;
    vertical-align: middle !important;
}

#calendar .fc-day-number {
    height: auto;
    padding-top: 5% !important;
    text-align: center !important;
    margin-top: 32%;
    margin-right: 35%;
}

#calendar .fc-today {
    background: none;
}

#calendar .dateSelected, #calendar .dateToday {
    border-radius: 100%;
    border: 3px solid #3FA9F5;
    margin: 0 auto;
    width: 65%;
    padding-top: 65%;
    height: auto;
    position: absolute;
    top: 16%;
    left: 15%;
}

#calendar .dateToday {
    background: #3FA9F5;
}

#calendar .withAppointment {
    border: 3px solid #303B44;
}

@media screen
and (min-device-width: 1600px)
and (max-device-width: 1700px)
and (-webkit-min-device-pixel-ratio: 1) {
    #calendar .fc-day-number {
        margin-top: 32%;
        margin-right: 40%;
    }
}

/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
    #calendar .fc-day-number {
        margin-top: 32%;
        margin-right: 35%;
    }
}

/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
    #calendar .fc-day-number {
        margin-top: 32%;
        margin-right: 35%;
    }
}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    #calendar .fc-day-number {
        margin-top: 34%;
        margin-right: 24%;
    }
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
    #calendar .fc-day-number {
        margin-top: 34%;
        margin-right: 24%;
    }
}

@media only screen
and (max-width: 960px) {
    #bg {
        opacity: 0.4;
    }
}

/* Patient List Style */
.no-padding {
    padding: 0 !important;
}

.patientItem {
    padding: 0 !important;
    transition: all 0.2s;
}

.patientItem .patientItemContent {
    padding: 20px !important;
}

.patientItem.pending {
    border-left: 1px #f1c40f solid !important;
}

.patientItem.completed {
    border-left: 1px #337ab7 solid !important;
}

.patientItem.cancelled {
    border-left: 1px #ed6b75 solid !important;
}

.patientItem .patientItemContent:hover {
    border-left-width: 5px !important;
    cursor: pointer;
}

.mt-info i {
    font-size: 18px;
}

/* Cubic Bezier Transition */
/***
New Profile Page
***/
.profile-sidebar {
    float: left;
    width: 300px;
    margin-right: 20px; }

.profile-content {
    overflow: hidden; }

/* PROFILE SIDEBAR */
.profile-sidebar-portlet {
    padding: 30px 0 0 0 !important; }

.profile-userpic img {
    float: none;
    margin: 0 auto;
    width: 50%;
    height: 50%;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important; }

.profile-usertitle {
    text-align: center;
    margin-top: 20px; }

.profile-usertitle-name {
    color: #5a7391;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px; }

.profile-usertitle-job {
    text-transform: uppercase;
    color: #5b9bd1;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 7px; }

.profile-userbuttons {
    text-align: center;
    margin-top: 10px; }

.profile-userbuttons .btn {
    margin-right: 5px; }
.profile-userbuttons .btn:last-child {
    margin-right: 0; }

.profile-userbuttons button {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 15px; }

.profile-usermenu {
    margin-top: 30px;
    padding-bottom: 20px; }

.profile-usermenu ul li {
    border-bottom: 1px solid #f0f4f7; }

.profile-usermenu ul li:last-child {
    border-bottom: none; }

.profile-usermenu ul li a {
    color: #93a3b5;
    font-size: 16px;
    font-weight: 400; }

.profile-usermenu ul li a i {
    margin-right: 8px;
    font-size: 16px; }

.profile-usermenu ul li a:hover {
    background-color: #fafcfd;
    color: #5b9bd1; }

.profile-usermenu ul li.active a {
    color: #5b9bd1;
    background-color: #f6f9fb;
    border-left: 2px solid #5b9bd1;
    margin-left: -2px; }

.profile-stat {
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f4f7; }

.profile-stat-title {
    color: #7f90a4;
    font-size: 25px;
    text-align: center; }

.profile-stat-text {
    color: #5b9bd1;
    font-size: 11px;
    font-weight: 800;
    text-align: center; }

.profile-desc-title {
    color: #7f90a4;
    font-size: 17px;
    font-weight: 600; }

.profile-desc-text {
    color: #7e8c9e;
    font-size: 14px; }

.profile-desc-link i {
    width: 22px;
    font-size: 19px;
    color: #abb6c4;
    margin-right: 5px; }

.profile-desc-link a {
    font-size: 14px;
    font-weight: 600;
    color: #5b9bd1; }

.bootstrap-tagsinput {
    width: 100%;
}

/* END PROFILE SIDEBAR */
/* RESPONSIVE MODE */

@media (max-width: 991px) {
    /* 991px */
    /* 991px */
    .profile-sidebar {
        float: none;
        width: 100% !important;
        margin: 0; 
    }
    .profile-sidebar > .portlet {
        margin-bottom: 20px; 
    }
    .profile-content {
        overflow: visible; 
    } 

    .medix-profile-style {
        position : relative;
    }

    .medix-content-style {
        margin-left: 0;
    }
    .blockContentUi {
        position: relative !important;
        top: 0 !important;
    }
}


@media (min-width : 320px) and (max-width: 618px) {
    .nav > li {
        display: block;
    }

    .menu-toggler {
        background-color: #aaa;
    }

    .logo {
        left : 10%;
    }

    .profilePicList {
        width : 75px !important;
        height: 75px !important;
    }
}

    

    


/* Typeahead Style */
span.twitter-typeahead .tt-menu,
span.twitter-typeahead .tt-dropdown-menu {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    margin-top: 20px;
}
span.twitter-typeahead .tt-suggestion {
    display: block;
    /*padding: 3px 20px;*/
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333333;
    white-space: nowrap;
    cursor: pointer;
}
span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion:focus {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
    background-color: #337ab7;
}
.input-group.input-group-lg span.twitter-typeahead .form-control {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
.input-group.input-group-sm span.twitter-typeahead .form-control {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
span.twitter-typeahead {
    width: 100%;
}
.input-group span.twitter-typeahead {
    display: block !important;
    height: 34px;
}
.input-group span.twitter-typeahead .tt-menu,
.input-group span.twitter-typeahead .tt-dropdown-menu {
    top: 32px !important;
}
.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {
    border-radius: 0;
}
.input-group span.twitter-typeahead:first-child .form-control {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group span.twitter-typeahead:last-child .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.input-group.input-group-sm span.twitter-typeahead {
    height: 30px;
}
.input-group.input-group-sm span.twitter-typeahead .tt-menu,
.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
    top: 30px !important;
}
.input-group.input-group-lg span.twitter-typeahead {
    height: 46px;
}
.input-group.input-group-lg span.twitter-typeahead .tt-menu,
.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
    top: 46px !important;
}

.canvas-content {
    position: relative;
    min-height: 559px;
}

.canvas-content > div {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.canvas-content .navmenu-fixed-left {
    position: absolute;
    z-index: 1;
    -webkit-transform: translate(-300px, 0);
    transform: translate(-300px, 0);
}


.bottomModal {
    position: fixed;
    padding: 20px 0;
    background: white;
    width: 100%;
    bottom: 12%;
    left: 0;
    min-height: 80px;
    box-shadow: 0 -1px 0 rgba(76,86,103,.2),0 -2px 35px rgba(31,37,50,.14);
    z-index: 5;
}

/* Custom Multi Menu FAB */
#overlay {
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(220, 220, 220, 0.7);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
#overlay.showFab {
    visibility: visible;
    opacity: 1;
}

#hamburger {
    z-index: 10;
    position: fixed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 2%;
    right: 2%;
    background-color: #337ab7;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.3);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#hamburger .icon-bar {
    display: block;
    background-color: #FFFFFF;
    width: 22px;
    height: 2px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#hamburger .icon-bar + .icon-bar {
    margin-top: 4px;
}

.fabNav {
    z-index: 9;
    position: fixed;
    bottom: 2.5%;
    right: 2.5%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f9f9f9;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    visibilty: hidden;
    opacity: 0;
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.48);
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.fab-icons {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.54);
}

#hamburger.showFab {
    box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.48);
}
#hamburger.showFab #wrapper {
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
#hamburger.showFab #one {
    -webkit-transform: translateY(6px) rotateZ(45deg) scaleX(0.9);
    transform: translateY(6px) rotateZ(45deg) scaleX(0.9);
}
#hamburger.showFab #thr {
    -webkit-transform: translateY(-6px) rotateZ(-45deg) scaleX(0.9);
    transform: translateY(-6px) rotateZ(-45deg) scaleX(0.9);
}
#hamburger.showFab #two {
    opacity: 0;
}

.fabNav.showFab {
    visibility: visible;
    opacity: 1;
    text-decoration: none;
}

.fabNav.showFab:hover {
    background-color: #727272;
    color: #f9f9f9 !important;
}

.fabNav.showFab:hover .fab-icons {
    color: #f9f9f9 !important;
}

.fabLabel {
    position: absolute;
    left: -150px;
    top: -9px;
    background-color: #6a6a6a;
    width: 140px;
    padding: 2px 10px;
    text-align: center;
    color: #eaeaea;
}


/* Charting Modal */
#setTooth .modal-body {
    position: relative;
    height: calc(100vh - 300px);
    overflow: auto;
}

#procedureChoices {
    height: 200px;
    overflow: scroll;

    padding: 0px 10px;
}

.treatmentMenuNav > li > a {
    color : #333;
    padding: 10px 35px;
    font-weight: bold;
}

.treatmentMenuNav > li > a:hover, .treatmentMenuNav > li.active > a:hover, .treatmentMenuNav > li.active > a:focus, .treatmentMenuNav > li.active > a {
    color : #2197EB;
    background-color: transparent;
    font-weight: bold;
}

.procedureGiven:hover {
    color : #2197EB;
}

/* Expandable Table */
td.details-control {

}

/*BlockUI*/
div.blockOverlay {
    opacity : 0.6 !important;
}

/*DataTable*/

.table-scrollable { 
    border : none !important;
}

td.details-control {
    background: url('/../../../../images/down-chevron.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('/../../../../images/down-chevron.png') no-repeat center center;
}

.medix-profile-style {
    position : fixed;
    width : 180px;
}

.medix-content-style {
    margin-left: 200px;
}

.tabbable-line>.nav-tabs>li.active {
    border-bottom: 4px solid #2197EB;  
}

.tabbable-line>.nav-tabs>li.open, .tabbable-line>.nav-tabs>li:hover {
    border-bottom: 4px solid #3FA9F5; 
}

.md-checkbox label>.check {
    border-right: 2px solid #2197EB;
    border-bottom: 2px solid #2197EB;
}

.md-radio label>.check {
    background: #2197EB;
}

#alertNotif > div {
    background: #3FA9F5;
    color: #fff;
}

#myProfileAlertNotif > div {
    background: #3FA9F5;
    color: #fff;
}

.bootstrap-tagsinput input {
    width : auto !important;
}

.dataTables_length > label {
    text-transform: capitalize;
}

.cbp-caption-active .cbp-caption, .cbp-caption-active .cbp-caption-defaultWrap, .cbp-caption-active .cbp-caption-activeWrap {
    border: 1px solid #b2b2b2;
}

/* Gallery */
.portfolio-content .text-center {
    margin-top: 3px !important;
}

.portfolio-content .cbp-l-filters-button .cbp-filter-item {
    background: none !important;
    border: none !important;
    color: #000 !important;
    font-size: 14px;
    font-weight: 600;
}

.portfolio-content .cbp-l-filters-button .cbp-filter-item.cbp-filter-item-active {
    background: none !important;
    border: none !important;
    color: #2197EB !important;
}

body.modal-open {
    overflow: hidden !important;
}

.tagsTypeaheadProcedure + .bootstrap-tagsinput {
    min-height: 140px;
}

.tag.label {
    background-color : #3FA9F5;
}