@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');

@font-face {
    font-family: Roboto;
    src: url('/fontsV2/Roboto-Regular.ttf');
}

body {
    height: 100% !important;
    font-family: 'Roboto', sans-serif !important;
}

html {
    height: 100% !important;
}

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    overflow: hidden;
}

.modal {
    overflow-y: auto;
}

.switchBookingVersion {
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 10000;
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 50px !important;
}

.ui-dialog .ui-icon {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background: none;
    border: none;
}

.ui-dialog {
    z-index: 10000 !important;
}

.ui-widget-overlay {
    background: #000000;
    /*Crossbrowser Opacity */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    background-color: #2b3740;
}

.ui-dialog > .ui-widget-header {
    background-color: #096FB1;
    background-image: none;
    color: #FFFFFF;
}

div.ui-dialog {
    position: fixed;
}

.ui-menu .ui-menu-item a:hover {
    text-decoration: none !important;
    border: none !important;
}

.ui-autocomplete {
    position: absolute;
    cursor: default;
    z-index: 999999 !important;
}

p,
ul.submenu,
ul.parent-menu,
li,
div,
nav {
    padding: 0;
    margin: 0;
}

.wrapper {
    width: 50%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: relative;
    margin-top: 20px;
}

#loginForm .forms {
    width: 50%;
    margin: 0 auto;
    display: block;
    border-radius: 25px;
    background: url("../imagesV2/formsBG.png") repeat;
    padding: 25px;
}


#loginForm .forms_retrieve_pwd {
    width: 525px;
    margin: 0 auto;
    display: block;
    border-radius: 25px;
    background: url("../imagesV2/formsBG.png") repeat;
    padding: 25px;
}

#loginForm .forms_lost_pwd {
    width: 500px;
    margin: 0 auto;
    display: block;
    border-radius: 25px;
    background: url("../imagesV2/formsBG.png") repeat;
    padding: 25px;
}

#loginForm a {
    color: #ffffff;
    text-decoration: underline;
}

    #loginForm a:hover {
        color: #212121 !important;
    }

#loginForm .btn:hover {
    background-color: #00bdd1 !important;
}

#loginForm .vertical-center {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.centerLogo {
    width: 40%;
}
/* For 980px or less */

@media screen and (max-width: 980px) {
    .wrapper {
        width: 100%;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: relative;
    }

    #loginForm .forms {
        width: 70%;
        margin: 0 auto;
        display: block;
        border-radius: 25px;
        background: url("../imagesV2/formsBG.png") repeat;
        padding: 25px;
    }
}

.nav-label {
    display: none;
}

#nav .icon {
    font-size: 25px;
}

.navbar-collapse {
    max-height: none;
}

.top-navigation {
    background-color: #2b3740;
    z-index: 10001 !important;
}

#nav {
    overflow: hidden;
    position: fixed;
    z-index: 103;
    height: 100%;
    left: 0;
    -webkit-user-select: none;
}

.parent-menu {
    background-color: #3A72BE;
    width: 80px;
    float: left;
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

#nav ul {
    list-style-type: none;
}

    #nav ul li a {
        padding: 10px 5px;
        display: block;
        color: #FFFFFF;
        text-decoration: none;
        cursor: pointer;
        line-height: 12px;
        text-align: center;
    }

        #nav ul li a .icon-label {
            display: block;
            padding: 0;
            margin: 0;
            margin-top: 5px;
            font-size: 12px;
            overflow-wrap: break-word;
            word-wrap: break-word;
            -webkit-hyphens: auto;
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;
        }

    #nav ul li ul {
        overflow: auto;
    }

    #nav ul li:hover > a {
        background-color: #2B528B;
        color: #FFFFFF;
        border-left: solid 3px #FFFFFF;
    }

    #nav ul li:active > ul,
    #nav ul li ul.open {
        left: 80px;
        -webkit-transition: left 250ms ease-in-out;
        -moz-transition: left 250ms ease-in-out;
        -ms-transition: left 250ms ease-in-out;
        transition: left 250ms ease-in-out;
    }

    #nav ul li ul li a {
        color: #FFFFFF;
        text-align: left;
        line-height: 16px;
        padding: 8px 15px;
    }

        #nav ul li ul li a:hover {
            background-color: #29456E;
            border-left: solid 3px #FFFFFF;
            padding: 8px 15px 8px 12px;
        }

        #nav ul li ul li a.divider:hover {
            background: none;
            border-left: none;
        }

    #nav ul li > ul {
        position: fixed;
        background-color: #2B528B;
        left: -380px;
        width: 300px;
        z-index: -2;
        height: 100%;
        -webkit-transition: left 250ms ease-in-out;
        -moz-transition: left 250ms ease-in-out;
        -ms-transition: left 250ms ease-in-out;
        transition: left 250ms ease-in-out;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.26), inset 2px 0 10px rgba(0, 0, 0, 0.26);
    }

.menuLabel {
    text-align: center;
    padding: 13px;
    margin-top: 12px;
    background-color: #29456e;
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.submenu {
    height: 100%;
}

.navbar-brand {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: 100%;
    padding-left: 18px;
}

    .navbar-brand img {
        height: 35px;
    }

#banner li {
    padding-left: 5px;
    padding-right: 5px;
}

/* Cancel left and right gap for BG Image Home page 
.maincontent {
    margin-left: 10px;
    margin-right: 10px;
}
*/

#popover_content_wrapper {
    width: 400px;
}

.badge-notify {
    background-color: #FF0000;
}

a:active,
a:focus,
button:active,
button:focus {
    outline: none;
}
/*Width of task popup*/

.ul-task {
    width: 600px;
}

.ul-waitList {
    width: 400px;
}


/*Height of task list*/
#taskContainer {
    max-height: 85vh;
    overflow: auto;
}

/*Dropdown hover option*/

#headerDropdown.dropdown:hover > .dropdown-menu {
    display: block;
    margin: 0;
}

#headerDropdown1.dropdown:hover > .dropdown-menu {
    display: block;
}

#showOptions.dropdown:hover > .dropdown-menu {
    display: block;
}

/*Set checkicon on Task filter buttons*/

.btn-group .btn span.glyphicon {
    opacity: 0;
}

.btn-group .btn.active span.glyphicon {
    opacity: 1;
}


/*Style for Loading thing*/
@-webkit-keyframes mic-on {
    0% {
        background: -webkit-radial-gradient(red 20%, white 80%); /* Safari 5.1 to 6.0 */
        background: -o-radial-gradient(red 20%, white 80%); /* For Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(red 20%, white 80%); /* For Firefox 3.6 to 15 */
        background: radial-gradient(red 20%, white 80%); /* Standard syntax */
    }

    40% {
        background: -webkit-radial-gradient(red 40%, white 60%); /* Safari 5.1 to 6.0 */
        background: -o-radial-gradient(red 40%, white 60%); /* For Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(red 40%, white 60%); /* For Firefox 3.6 to 15 */
        background: radial-gradient(red 40%, white 60%); /* Standard syntax */
    }

    50% {
        background: -webkit-radial-gradient(red 60%, white 40%); /* Safari 5.1 to 6.0 */
        background: -o-radial-gradient(red 60%, white 40%); /* For Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(red 60%, white 40%); /* For Firefox 3.6 to 15 */
        background: radial-gradient(red 60%, white 40%); /* Standard syntax */
    }

    75% {
        background: -webkit-radial-gradient(red 80%, white 20%); /* Safari 5.1 to 6.0 */
        background: -o-radial-gradient(red 80%, white 20%); /* For Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(red 80%, white 20%); /* For Firefox 3.6 to 15 */
        background: radial-gradient(red 80%, white 20%); /* Standard syntax */
    }

    100% {
        background: -webkit-radial-gradient(red 100%, white 0%); /* Safari 5.1 to 6.0 */
        background: -o-radial-gradient(red 100%, white 0%); /* For Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(red 100%, white 0%); /* For Firefox 3.6 to 15 */
        background: radial-gradient(red 100%, white 0%); /* Standard syntax */
    }
}

#load {
    top: 80%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: 9999;
    font-weight: bold;
    color: #096FB1;
    padding: 10px;
    /*Crossbrowser Opacity */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    background-color: #2b3740;
    /*#2b3740;*/
    /*Crossbrowser Rounded Corner */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: #b2b2b2 solid 1px;
    color: #FFFFFF;
}

    #load img {
        display: inline;
        float: none;
    }

.notification_ {
    top: 10px;
    right: 10px;
    position: fixed;
    z-index: 9999;
    width: 300px;
    height: 75px;
}

#taskStatus .badge {
    font-size: 8px;
}

#header_panel {
    overflow: hidden !important;
}

.datepicker-inline {
    width: 100% !important;
}

.datepicker table {
    width: 100% !important;
}

.datepicker td {
    padding: 0px !important;
    margin: 0px !important;
}

.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
    height: 22px;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}

.missing-info {
    position: relative;
}

    .missing-info:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-top: 20px solid #f00;
    }

/*Modify input style*/

.input-style {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display: inline-block;
    font-size: 12px;
    height: 26px;
    line-height: 1.42857;
    padding: 4px 4px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.btn-xs {
    height: 26px;
}

.panel-heading {
    padding: 8px 8px;
}

.panel-title {
    font-size: 13px !important;
    font-weight: bold;
}

.panel-body {
    font-size: 12px;
    margin: 0px 15px 0px 15px;
}


/*******************************************/

.text_top {
    vertical-align: top !important;
}

.text_center {
    text-align: center;
}

.text_left {
    text-align: left !important;
}

.text_right {
    text-align: right;
}

.block_center {
    margin-left: auto;
    margin-right: auto;
}

.block_left {
    margin-left: 0 !important;
}

.block_right {
    margin-right: 0 !important;
}

.page_title {
    text-align: center;
    margin: 40px 0;
    color: seagreen;
    font-size: 24px;
    font-weight: bold;
}

.first_content {
    position: relative;
    margin: 30px 50px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 20px 0 rgba(205, 209, 239, 1), 0 6px 20px 0 rgba(225, 227, 243, 1);
}

.second_content {
    display: flex;
    padding: 20px 50px;
}

.second-content-custom {
    font-family: azo-sans-web;
    padding-top: 45px;
    padding-left: 30px;
    padding-right: 30px;
}

.third_content {
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.ex_content {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.furth_content {
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
}

.fifth_content {
    width: 75%;
}

.sixth_content {
    display: flex;
    justify-content: space-between;
}

.w-50 {
    width: 50%;
}

.p-20-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.inpt-style-ba {
    border: 1px solid #c7cfe0 !important;
    border-radius: 3px !important;
}

.width_80 {
    width: 80%;
}

.m-top-87 {
    margin-top: 87px;
}

.d-toggle {
    position: absolute;
    top: 37px;
    left: 50%;
    transform: translateX(-10%);
    right: 10px;
}

.b-h-30 {
    position: absolute;
    top: 38px;
    right: 50px;
    height: 30px;
}

.m-top-53 {
    margin-top: 53px
}

.second_title {
    font-size: 16px;
    font-weight: bold;
}

.m_t {
    margin-top: 22px;
}

#txtEmailForPrinting {
    width: 100%;
}

.btn_run {
    float: right;
}

.select_oganisation {
    width: 110px !important;
    background: #4f8ac9 !important;
    border: none !important;
}

    .select_oganisation:hover {
        opacity: 0.7;
    }

.letters_title {
    margin: 13px 0 !important;
}

#sms-container, #email-container {
    text-align: center;
}

#btnAddNewContact {
    margin-left: 7px;
}

.btnAddNew {
    height: 35px;
    padding: 0 10px;
    font-size: 14px;
    border: none;
    outline: none;
    background: transparent linear-gradient(89deg, #178EDC 0%, #3AADF8 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 2px #0000002E;
    border-radius: 19px;
    color: white;
}

    .btnAddNew:hover {
        opacity: 0.8 !important;
        color: white;
    }

#btnSendEmailOrSms {
    margin-left: 10px;
    width: 30%;
    height: 35px;
    font-size: 14px;
    border: none;
    outline: unset;
    background: #CCCCCC;
    box-shadow: 0px 5px 2px #0000002E;
    border-radius: 19px;
    pointer-events: none;
}

    #btnSendEmailOrSms:hover {
        opacity: 0.8;
    }

#btnSendSMS, #btnSendEmail, #btnPreviewEmail {
    margin-left: 10px;
    width: 30%;
    height: 35px;
    font-size: 14px;
    border: none;
    outline: unset;
    background: linear-gradient(89deg, rgb(23, 142, 220) 0%, rgb(58, 173, 248) 100%) 0% 0% no-repeat padding-box padding-box transparent;
    box-shadow: 0px 5px 2px #0000002E;
    border-radius: 19px;
}

    #btnSendSMS:hover, #btnSendEmail:hover {
        opacity: 0.8;
    }

#lblPatientName {
    color: #2C64C5;
    font-size: 25px;
    text-decoration: underline;
    font-weight: bold;
}

#chkSelect, #chkSelect1 {
    float: right;
    margin: 0 !important;
}

.sending-title {
    font-size: 20px;
    color: purple;
    padding: 0 10px;
    border-bottom: 1px solid
}

.custom-select {
    position: relative;
    font-family: Arial;
}

.select-selected {
    background-color: DodgerBlue;
}

    .select-selected:after {
        position: absolute;
        content: "";
        top: 14px;
        right: 10px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #fff transparent transparent transparent;
    }

    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 7px;
    }

.select-items div, .select-selected {
    color: #302D2D;
    padding: 8px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.item-selected::before {
    content: '';
    width: 100%;
    height: 38px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.chkPhone {
    display: none;
}

.instead-chkSelect {
    font-size: 17px;
    color: #3A72BF;
    float: right;
}

.select-items {
    background-color: white;
    z-index: 99;
}

.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.page_title h3,
h4,
h5 {
    font-weight: 700;
    color: #817f7f;
}

.page_title span#lblHeading {
    color: #363636;
    font-weight: 700;
    font-size: 24px;
}

.page_title span#lnkToEntity {
    color: #817F7F;
    font-weight: 700;
    font-size: 24px;
}

.page_title a#lnkToEntity {
    font-weight: 700;
    font-size: 24px;
}

.page_title_external {
    text-align: center;
    margin: 12px 0;
}

    .page_title_external span#lblHeading {
        color: #585858;
        font-weight: 700;
        font-size: 24px;
    }


.detailheadertable {
    width: 60%;
    margin: 0 auto;
}

.detailtable_staff {
    margin: 0 auto;
}

    .detailtable_staff > tbody > tr > td:nth-child(1) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_staff > tbody > tr > td:nth-child(2) {
        width: 130px;
    }

    .detailtable_staff > tbody > tr > td:nth-child(3) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_staff > tbody > tr > td:nth-child(4) {
        width: 130px;
    }

    .detailtable_staff > tbody > tr > td:nth-child(5) {
        width: 30px;
    }

    .detailtable_staff > tbody > tr > td:nth-child(6) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_staff > tbody > tr > td:nth-child(7) {
        width: 175px;
    }

    .detailtable_staff > tbody > tr > td:nth-child(8) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_staff > tbody > tr > td:nth-child(9) {
        width: 140px;
    }

.detailtable_staff_external {
    margin: 0 auto;
}

    .detailtable_staff_external > tbody > tr > td:nth-child(1) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_staff_external > tbody > tr > td:nth-child(2) {
        width: 130px;
    }

    .detailtable_staff_external > tbody > tr > td:nth-child(3) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_staff_external > tbody > tr > td:nth-child(4) {
        width: 180px;
    }

.detailtable_organisation {
    width: 405px;
    margin: 0 auto;
}

    .detailtable_organisation > tbody > tr > td:nth-child(1) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_organisation > tbody > tr > td:nth-child(2) {
        width: 175px;
    }

    .detailtable_organisation > tbody > tr > td:nth-child(3) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_organisation > tbody > tr > td:nth-child(4) {
        width: 200px;
    }

.detailtable_organisation_insurance {
    width: 405px;
    margin: 0 auto;
}

    .detailtable_organisation_insurance > tbody > tr > td:nth-child(1) {
        width: 100px;
        min-width: 115px;
        max-width: 115px;
    }

    .detailtable_organisation_insurance > tbody > tr > td:nth-child(2) {
        width: 90px;
    }

    .detailtable_organisation_insurance > tbody > tr > td:nth-child(3) {
        width: 15px;
        min-width: 15px;
        max-width: 15px;
    }

    .detailtable_organisation_insurance > tbody > tr > td:nth-child(4) {
        width: 185px;
    }


.table-grid {
    font-size: 14px;
    background-color: #fff;
}

    .table-grid > tbody > tr > td,
    .table-grid > tfoot > tr > td {
        border: 1px solid #d0d7e1 !important;
        /*text-align: center;*/
        padding: 5px !important;
    }
    /*.table-grid > tbody > tr > td:nth-child(1), .table-grid > tbody > tr > td:nth-child(3) { text-align: left; }*/


    .table-grid > tbody > tr > th {
        color: #FFF !important;
        background: #3A72BE !important;
        font-weight: 400;
        text-align: center;
        vertical-align: middle !important;
    }

        .table-grid > tbody > tr > th > a {
            color: #FFF !important;
        }

    .table-grid > thead > tr > th {
        color: #FFF !important;
        background: #3A72BE !important;
        font-weight: 400;
        text-align: center;
        vertical-align: middle !important;
    }

        .table-grid > thead > tr > th > a {
            color: #FFF !important;
        }

    .table-grid > tfoot > tr > td {
        font-weight: 700;
    }

    .table-grid > tbody > tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .table-grid > tbody > tr:hover {
        background-color: #ddd;
    }

table.table-grid > tbody > tr > td {
    padding-right: 10px;
    padding-left: 10px;
    vertical-align: middle;
}

table.table-grid-left-right-padding-normal > tbody > tr > td {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

table.table-grid-top-bottum-padding-normal > tbody > tr > td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

table.table-grid-top-bottum-padding-thick > tbody > tr > td {
    padding-top: 4px !important;
    padding-bottom: 5px !important;
}

table.table-grid-header-top-bottum-padding-thn > tbody > tr > th {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

table.vertical_align_top > tbody > tr > td {
    vertical-align: top !important;
}

.booking-table-grid-header {
    font-size: 14px;
    border: 1px solid #DDD;
}

    .booking-table-grid-header > tbody > tr > td,
    .booking-table-grid-header > tfoot > tr > td {
        border: 1px solid #0870ae !important;
        text-align: center;
        padding: 5px !important;
    }

        .booking-table-grid-header > tbody > tr > td:nth-child(1),
        .booking-table-grid-header > tbody > tr > td:nth-child(3) {
            text-align: left;
        }

    .booking-table-grid-header > tbody > tr > th {
        border: 1px solid #DDD;
        color: #FFF !important;
        background: #0870ae !important;
        font-weight: 500;
        text-align: center;
        vertical-align: middle !important;
    }

        .booking-table-grid-header > tbody > tr > th > a {
            color: #FFF !important;
        }

    .booking-table-grid-header > tfoot > tr > td {
        font-weight: 700;
    }

    .booking-table-grid-header > tbody > tr > th.days {
        color: #000 !important;
        background: #c7f0ff !important;
    }

.booking-table-grid-body > tbody > tr > td {
    font-size: 14px;
    border: 1px solid #0870ae;
    line-height: 19px;
}

.line_height_booking_settings td {
    line-height: 17px;
}

.max_height_170px {
    max-height: 170px;
}

.table-white > tbody > tr:nth-child(odd) {
    background: #ffffff;
}

.table-white > tbody > tr:nth-child(even) {
    background: #ffffff;
}

.table-lightgray > tbody > tr:nth-child(odd) {
    background: #ededed;
}

.table-lightgray > tbody > tr:nth-child(even) {
    background: #ededed;
}

.logoff {
    color: #656565;
}

.org_stat > tbody > tr > td:nth-child(3) {
    text-align: center;
}

.cast_centres_form {
    width: 400px;
    padding-bottom: 15px;
    margin: 0 auto 20px auto;
    text-align: center;
    border-bottom: 1px solid #b2b2b2;
}

.table_cast_centres {
    width: 600px;
    margin: 0 auto;
}

    .table_cast_centres > table > tbody > tr > td:last-child {
        width: 50px;
        text-align: center;
    }

    .table_cast_centres > table > tbody > tr > td:nth-child(1) {
        text-align: center;
    }

    .table_cast_centres > table > tbody > tr > td:nth-child(2) {
        text-align: left;
    }

.user_login_form,
.patient_list_form {
    width: 100%;
    margin: 0 auto 13px auto;
    text-align: center;
}

.div-i-block {
    display: inline-block;
}

.user_d div,
.patient_list_form {
    border-top: 1px solid #b2b2b2;
    border-bottom: 1px solid #b2b2b2;
    margin: 20px 0;
    padding: 10px;
}

.user_login_form_no_width {
    margin: 0 auto 10px auto;
    text-align: center;
}

.user_login_form_no_width_div {
    border-top: 1px solid #b2b2b2;
    border-bottom: 1px solid #b2b2b2;
    margin: 20px 0 10px;
    padding: 5px;
}

.patient_list_form {
    width: 1000px;
    margin: 0 auto 20px auto;
}

.divautoheight {
    overflow: auto;
    height: 100%;
    display: inline-block;
    max-width: 100%;
}

/*
#freeze_toprow_container {
    display: none !important;
}
*/

.add_clinic_left_div {
    width: 450px;
    border-right: 1px solid #949494;
    float: left;
    margin-left: 10%;
}

    .add_clinic_left_div table {
        width: 100%;
    }

.add_clinic_right_div {
    width: 700px;
    float: right;
    margin-right: 10%;
}

    .add_clinic_right_div table {
        width: 100%;
    }

        .add_clinic_right_div table > tbody > tr > td {
            padding: 7px 0;
        }

.add_patient_left_div {
    width: 450px;
    float: left;
    margin-left: 3%;
}

    .add_patient_left_div table {
        width: 100%;
    }

.add_patient_right_div {
    width: 1000px;
    float: right;
    margin-right: 3%;
}

    .add_patient_right_div table {
        width: 100%;
    }

.comment_center {
    width: 600px;
    margin: 0 auto;
}

    .comment_center textarea {
        width: 600px;
        height: 100px;
    }

input[type="text"].datepicker {
    height: 25px;
}

.org_stat_left,
.org_stat_right {
    float: left;
    width: 715px;
    margin-left: 3%;
}

.org_stat_right {
    float: right;
    margin-right: 3%;
    margin-left: 0;
}

    .org_stat_right table > tbody > tr > td:nth-child(2) {
        text-align: left;
    }

.pagination {
    margin: 0 !important;
}

.booking_divs {
    width: 1210px;
    margin: 0 auto;
}

    .booking_divs div {
        float: left;
        width: 340px;
        font-size: 14px;
    }

.bookings_header_vertical_divider {
    width: 1px !important;
    height: 175px;
    background: #999;
    margin: 0 60px;
}

.staff_detail_vertical_divider {
    width: 1px !important;
    height: 475px;
    background: #999;
    margin: 0 auto;
}

.staff_external_detail_vertical_divider {
    width: 1px !important;
    height: 400px;
    background: #999;
    margin: 0 auto;
}

.org_detail_vertical_divider {
    width: 1px !important;
    height: 475px;
    background: #999;
    margin: 0 45px;
}

.org_detail_vertical_divider_short {
    width: 1px !important;
    height: 375px;
    background: #999;
    margin: 0 45px;
}

.referrer_detail_vertical_divider {
    width: 1px !important;
    height: 255px;
    background: #999;
    margin: 0 auto;
}

.circle {
    border-radius: 13px;
    width: 13px;
    height: 13px;
    border: 1px solid #000;
    display: block;
    float: left;
    margin: 3px 5px 0 0;
}

.bookinglist {
    overflow: auto;
    width: 2300px;
    height: 100%;
}

.booking-table {
    width: 2300px;
}

    .booking-table > thead > tr > th.days {
        color: #000;
        background: #c7f0ff;
    }

    .booking-table > thead > tr:nth-child(2) > th {
        width: 120px !important;
    }

    .booking-table > tbody > tr > td {
        background: #ededed;
        text-align: left;
    }

#bookings_frame {
    width: 100%;
    height: 100%;
    border: 1px solid #CCC;
}

.booking-table > tbody > tr > td > .crit {
    color: #FF0000;
}

.booking-table > tbody > tr > td.unavailable {
    background: #d3d3d3;
}

.booking-table > tbody > tr > td.clinic_unconf {
    background: #ffffa9;
}

.booking-table > tbody > tr > td.completed {
    background: #ffdaa9;
}

.booking-table > tbody > tr > td.available {
    background: #f5f5dc;
}

.booking-table > tbody > tr > td.clinic_conf {
    background: #fdd017;
}

.booking-table > tbody > tr > td.clinic_unconf_epc {
    background: #cef5bd;
}

.booking-table > tbody > tr > td.clinic_conf_epc {
    background: #97e173;
}

.booking-table > tbody > tr > td.ac_unconf {
    background: #d3fffa;
}

.booking-table > tbody > tr > td.ac_conf {
    background: #19efef;
}

.booking-table > tbody > tr > td.ac_unconf_epc {
    background: #bad2ff;
}

.booking-table > tbody > tr > td.ac_conf_epc {
    background: #7da9ff;
}

.booking-table > tbody > tr > td {
    width: 250px;
}

    .booking-table > tbody > tr > td:nth-child(1),
    .booking-table > tbody > tr > td:nth-child(4),
    .booking-table > tbody > tr > td:nth-child(7),
    .booking-table > tbody > tr > td:nth-child(10),
    .booking-table > tbody > tr > td:nth-child(13),
    .booking-table > tbody > tr > td:nth-child(16),
    .booking-table > tbody > tr > td:nth-child(19) {
        text-align: center;
        vertical-align: top;
        width: 50px;
    }

.clickicons {
    margin-top: 10px;
    bottom: 0px;
}

.note {
    width: 24px;
    height: 20px;
    display: block;
    background: url(../imagesV2/img_note.png) no-repeat;
    float: left;
    margin-right: 5px;
}

.person_active {
    width: 20px;
    height: 24px;
    display: block;
    background: url(../imagesV2/img_person.png) top no-repeat;
    float: left;
    margin-right: 5px;
}

.person_inactive {
    width: 20px;
    height: 24px;
    display: block;
    background: url(../imagesV2/img_person.png) bottom no-repeat;
    float: left;
    margin-right: 5px;
}

.stat_active {
    width: 25px;
    height: 24px;
    display: block;
    background: url(../imagesV2/img_stat.png) top no-repeat;
    float: left;
    margin-right: 5px;
}

.stat_inactive {
    width: 25px;
    height: 24px;
    display: block;
    background: url(../imagesV2/img_stat.png) bottom no-repeat;
    float: left;
    margin-right: 5px;
}

#more_search_options {
    width: 1300px;
    margin: 0 auto;
}

input[type="image"] {
    margin: 0;
    padding: 0;
}
/*footer { height: 34px; background: #82cde9; margin-bottom: 13px; }*/

footer {
    display: none;
}

.border_top_bottom {
    border-top: 1px solid #b2b2b2;
    border-bottom: 1px solid #b2b2b2;
}

.border_top {
    border-top: 1px solid #b2b2b2;
}

.border_bottom {
    border-bottom: 1px solid #b2b2b2;
}

hr {
    border: 0;
    clear: both;
    display: block;
    background-color: #000000;
    height: 1px;
}
/*input[type="submit"] { padding: 2px 6px; }*/
/*button[type="button"] { padding: 2px 6px !important; }*/

select {
    padding-top: 3px;
    padding-bottom: 3px;
}

.thin_button {
    padding: 2px 6px !important;
}

.white_button {
    color: #000000;
}

    .white_button:hover {
        color: #999999;
    }

    .white_button:active {
        position: relative;
        top: 2px;
    }

#claimNumberAllocationChkBoxList {
    border-collapse: initial !important;
    border-spacing: 5px !important;
}

.max_width_letters_mc_rej_msg {
    max-width: 250px;
}

.max_width_letters_mc_rej_alert {
    max-width: 250px;
}

th,
td {
    padding: 0;
}

cellspacing="5" */ table.zero-padded-spaced td {
    padding: 0;
}

table.zero-padded-spaced {
    border-collapse: collapse;
    border-spacing: 0;
}

.gridviewcol_spaceright {
    padding-right: 10px;
}

table.padded-table-1px td {
    padding: 1px;
}

table.padded-table-2px td {
    padding: 2px;
}

table.padded-table-width-8px td {
    padding-left: 8px;
    padding-right: 8px;
}

.w-83 {
    width: 83%;
}

table.padded-table-width-4px td {
    padding-left: 4px;
    padding-right: 4px;
}

table.max_width_100pc {
    max-width: 100%;
}

.hiddencol {
    display: none;
}

.hiddencol_keep_space {
    visibility: hidden;
}

.nowrap {
    white-space: nowrap;
}

.auto_width {
    width: auto;
}

.width_100pc {
    width: 100%;
}

.standard_box {
    display: inline-block;
    position: relative;
    padding: 20px 60px !important;
    margin: 20px 20px !important;
    background-color: #c7f0ff;
    border: solid 1px #364d8d;
    border-right: solid 2px #0e2946;
    border-bottom: solid 2px #0e2946;
}

    .standard_box h3 {
        color: white;
        text-align: center;
        background: #0870ae;
        padding: 5px 0;
        border: 1px solid #364d8d;
    }

    .standard_box td.tfoot {
        background: #0870ae;
        padding: 5px 0;
        border: 1px solid #364d8d;
    }

.call_centre_header:link {
    color: #0A2D75;
    text-decoration: underline;
}

.call_centre_header:hover {
    color: #0A2D75;
    text-decoration: none;
}

.required_asterisk {
    color: red;
    font-weight: bold;
}

pt_page_nav {
    margin: 6px auto;
    background: repeat-x #82cde9;
}

.pt_page_nav {
    background: #82cde9;
    margin: 6px auto;
}

    .pt_page_nav > td {
        float: left;
    }

        .pt_page_nav > td a {
            color: black;
            background: #82cde9;
            text-align: left;
            text-decoration: none;
        }

            .pt_page_nav > td a:hover {
                color: white;
                text-decoration: none;
            }

.pt_page_nav_spacer {
    width: 2px;
    background: url(../imagesv2/img_spacer.png) no-repeat center #ededed;
}

table.margin_top_bottum {
    border-bottom: medium;
}

.margin_top_bottum {
    border-bottom: medium;
}

ul.bullet_list_smaller {
    padding-left: 12px;
}

li.bullet_list_smaller {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

table.checkbox-list td {
    padding: 0px !important;
    margin: 0px !important;
    line-height: 8px;
}

.wrapword {
    white-space: -moz-pre-wrap !important;
    /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;
    /*Chrome & Safari */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    white-space: pre-wrap;
    /* css-3 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
    white-space: normal;
}

table.zero-padded-spaced td {
    padding: 0;
}

table.zero-padded-spaced {
    border-collapse: collapse;
    border-spacing: 0;
}

.gridviewcol_spaceright {
    padding-right: 10px;
}

table.padded-table-1px td {
    padding: 1px;
}

table.padded-table-2px td {
    padding: 2px;
}

table.padded-table-width-8px td {
    padding-left: 8px;
    padding-right: 8px;
}

table.padded-table-width-4px td {
    padding-left: 4px;
    padding-right: 4px;
}

table.max_width_100pc {
    max-width: 100%;
}

.hiddencol {
    display: none;
}

.hiddencol_keep_space {
    visibility: hidden;
}

.nowrap {
    white-space: nowrap;
}

.auto_width {
    width: auto;
}

.standard_box {
    display: inline-block;
    position: relative;
    padding: 20px 60px !important;
    margin: 20px 20px !important;
    background-color: #c7f0ff;
    border: solid 1px #364d8d;
    border-right: solid 2px #0e2946;
    border-bottom: solid 2px #0e2946;
}

    .standard_box h3 {
        color: white;
        text-align: center;
        background: #0870ae;
        padding: 5px 0;
        border: 1px solid #364d8d;
    }

    .standard_box td.tfoot {
        background: #0870ae;
        padding: 5px 0;
        border: 1px solid #364d8d;
    }

.call_centre_header:link {
    color: #0A2D75;
    text-decoration: underline;
}

.call_centre_header:hover {
    color: #0A2D75;
    text-decoration: none;
}

.required_asterisk {
    color: red;
    font-weight: bold;
}

pt_page_nav {
    margin: 6px auto;
    background: repeat-x #82cde9;
}

.pt_page_nav {
    background: #82cde9;
    margin: 6px auto;
}

    .pt_page_nav > td {
        float: left;
    }

        .pt_page_nav > td a {
            color: black;
            background: #82cde9;
            text-align: left;
            text-decoration: none;
        }

            .pt_page_nav > td a:hover {
                color: white;
                text-decoration: none;
            }

.pt_page_nav_spacer {
    width: 2px;
    background: url(../imagesv2/img_spacer.png) no-repeat center #ededed;
}

table.margin_top_bottum {
    border-bottom: medium;
}

.margin_top_bottum {
    border-bottom: medium;
}

ul.bullet_list_smaller {
    padding-left: 12px;
}

li.bullet_list_smaller {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

table.checkbox-list td {
    padding: 0px !important;
    margin: 0px !important;
    line-height: 8px;
}

.wrapword {
    white-space: -moz-pre-wrap !important;
    /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;
    /*Chrome & Safari */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    white-space: pre-wrap;
    /* css-3 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
    white-space: normal;
}

.ui-tooltip {
    position: absolute;
    opacity: 0.95 !important;
    filter: alpha(opacity=95) !important;
    padding: 10px 20px !important;
    border-radius: 7px !important;
    font: 12px "Helvetica Neue", Sans-Serif !important;
    box-shadow: 0 0 7px black !important;
    z-index: 100000;
}

.BookingSheetHeaderSection {
    position: fixed;
    width: 300px;
    overflow: auto;
    z-index: 0;
}

.BookingSheetBookingSection {
    position: relative;
    background-color: #FFFFFF;
    z-index: 1;
}

.showhideHeader {
    padding: 5px 0 5px;
    color: #096FB1;
    border-bottom: solid #096FB1 1px;
    cursor: pointer;
}

    .showhideHeader:hover {
        font-weight: bold;
    }

.bookingsheet_clinicdetails {
    color: #096FB1 !important;
    border-bottom: solid #096FB1 1px;
}

.settingsIcon {
    position: relative;
    top: 0;
    left: 5px;
    z-index: 100;
    text-shadow: -3px 0 #FFFFFF, 0 3px #FFFFFF, 3px 0 #FFFFFF, 0 -3px #FFFFFF;
}

.rotate {
    transform: rotate(0deg);
    /*transform: rotate(180deg);*/
    transition: .3s cubic-bezier(.17,.67,.21,1.69);
}

.rotate2 {
    transform: rotate(180deg);
    transition: .3s cubic-bezier(.17,.67,.21,1.69);
}

.info_icon {
    text-decoration: none !important;
    color: #096FB1;
    cursor: pointer;
}

.nopadding {
    margin: 1px;
    padding: 1px;
}

.center_div {
    margin: 0 auto;
    width: 80% /* value of your choice which suits your alignment */
}

/* Hiding the checkbox, but allowing it to be focused */
.badgebox {
    opacity: 0;
}

    .badgebox + .badge {
        /* Move the check mark away when unchecked */
        text-indent: -999999px;
        /* Makes the badge's width stay the same checked and unchecked */
        width: 27px;
    }

    .badgebox:focus + .badge {
        /* Set something to make the badge looks focused */
        /* This really depends on the application, in my case it was: */
        /* Adding a light border */
        box-shadow: inset 0px 0px 5px;
        /* Taking the difference out of the padding */
    }

    .badgebox:checked + .badge {
        /* Move the check mark back when checked */
        text-indent: 0;
    }

#main_table input[type="image"] {
    height: 20px;
    width: auto;
}

.not-active {
    pointer-events: none;
    cursor: default;
    color: #999;
}

.has-float-label {
    position: relative;
}

    .has-float-label label {
        position: absolute;
        cursor: text;
        font-size: 75%;
        opacity: 1;
        -webkit-transition: all .2s;
        transition: all .2s;
        top: -.5em;
        left: 12px;
        z-index: 3;
        line-height: 1;
        padding: 0 1px;
        color: #555555;
        white-space: nowrap;
        background-color: #ffffff;
    }

        .has-float-label label span {
            background-color: #ffffff;
        }

        .has-float-label label::after {
            content: " ";
            display: block;
            position: absolute;
            background: transparent;
            height: 2px;
            top: 50%;
            left: -.2em;
            right: -.2em;
            z-index: -1;
            -moz-box-shadow: inset 0 0 10px #fff;
            -webkit-box-shadow: inset 0 0 10px #fff;
            box-shadow: inset 0 0 10px #fff;
        }

    .has-float-label .form-control::-webkit-input-placeholder {
        opacity: 0.8;
        -webkit-transition: all .2s;
        transition: all .2s;
    }

    .has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
        opacity: 0;
    }

    .has-float-label .form-control:placeholder-shown:not(:focus):-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        opacity: 0;
    }

    .has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder { /* Mozilla Firefox 19+ */
        opacity: 0;
    }

    .has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder { /* Internet Explorer 10+ */
        opacity: 0;
    }

    .has-float-label .form-control:placeholder-shown:not(:focus) + label {
        font-size: 90%;
        opacity: .8;
        top: .8em;
        font-weight: normal;
        color: #999;
    }

.input-group .has-float-label {
    display: table-cell;
}

    .input-group .has-float-label .form-control {
        border-radius: 4px;
    }

    .input-group .has-float-label:not(:last-child) .form-control {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .input-group .has-float-label:not(:first-child) .form-control {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        margin-left: -1px;
    }

.col-centered {
    float: none;
    margin: 0 auto;
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }

    .printable, #printDiv {
        display: block;
        font-size: 26pt;
    }
}

#div_livesearch {
    z-index: 1000;
}

.formTaskSlide {
    height: 100%;
    position: fixed;
    top: 0px;
    right: -1000px;
}

.modal {
    z-index: 99999999 !important;
    padding: 0;
}

.modal-dialog {
    position: relative;
    display: table;
    overflow-y: auto;
    overflow-x: auto;
    width: auto;
    min-width: 300px;
}

.modal-open {
    overflow-y: scroll;
}

.makeitBlur {
    -webkit-filter: blur(4px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);
    pointer-events: none;
}

.modal-backdrop {
    background: transparent;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 200px auto;
    }
}

.fade-scale {
    -webkit-animation: showSweetAlert 0.3s;
    animation: showSweetAlert 0.3s;
}

/* -- end quick_links -- */

/*
 * Animations
 */
@-webkit-keyframes showSweetAlert {
    0% {
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
    }

    45% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }

    80% {
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@keyframes showSweetAlert {
    0% {
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
    }

    45% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }

    80% {
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes hideSweetAlert {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
    }
}

@keyframes hideSweetAlert {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
    }
}

@-webkit-keyframes slideFromTop {
    0% {
        top: 0%;
    }

    100% {
        top: 50%;
    }
}

@keyframes slideFromTop {
    0% {
        top: 0%;
    }

    100% {
        top: 50%;
    }
}

@-webkit-keyframes slideToTop {
    0% {
        top: 50%;
    }

    100% {
        top: 0%;
    }
}

@keyframes slideToTop {
    0% {
        top: 50%;
    }

    100% {
        top: 0%;
    }
}

@-webkit-keyframes slideFromBottom {
    0% {
        top: 70%;
    }

    100% {
        top: 50%;
    }
}

@keyframes slideFromBottom {
    0% {
        top: 70%;
    }

    100% {
        top: 50%;
    }
}

@-webkit-keyframes slideToBottom {
    0% {
        top: 50%;
    }

    100% {
        top: 70%;
    }
}

@keyframes slideToBottom {
    0% {
        top: 50%;
    }

    100% {
        top: 70%;
    }
}



/*Auto complete form and unit*/
.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 160px;
    max-width: 300px;
    _width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    overflow: auto;
    max-height: 300px;
}

    .ui-autocomplete .ui-menu-item > a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
    }

        .ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-hover, .ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-active {
            color: #ffffff;
            text-decoration: none;
            background-color: #0088cc;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            background-image: none;
        }


/*Description list alignment*/
dl.inline {
    margin: 0 10px 0 0;
    padding: 0;
    vertical-align: top;
}

    dl.inline dd {
        display: inline;
        margin: 0;
        width: 50%;
        font-weight: normal;
    }

        dl.inline dd:after {
            display: block;
            content: '';
        }

    dl.inline dt {
        display: inline-block;
        width: 50%;
        font-weight: normal;
    }

.vcenter {
    display: inline-block;
    vertical-align: top !important;
    float: none;
    width: 100%;
}

    .vcenter h5 {
        color: #2b3740;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(53,86,129, 0.3);
        text-align: right;
    }

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
#modalIframe .modal-dialog {
    margin: 2.5vh 2.5vw auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
#modalIframe .modal-content {
    height: 95vh;
    width: 95vw;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
#modalIframe .modal-body {
    height: 80vh;
    width: 80vw;
}

.list-group-bottom-only-border .list-group-item {
    border-left: 0;
    border-right: 0;
}

.row-no-padding [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row-no-padding .panel, .row-no-padding .panel-heading {
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

#maintable {
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    background-color: #fff;
    border: none;
}

#custom-search-input {
    padding: 3px;
    border: solid 1px #E4E4E4;
    border-radius: 6px;
    background-color: #fff;
}

    #custom-search-input input {
        border: 0;
        box-shadow: none;
    }

    #custom-search-input button {
        margin: 2px 0 0 0;
        background: none;
        box-shadow: none;
        border: 0;
        color: #666666;
        padding: 0 8px 0 10px;
        border-left: solid 1px #ccc;
    }

        #custom-search-input button:hover {
            border: 0;
            box-shadow: none;
            border-left: solid 1px #ccc;
        }

    #custom-search-input .glyphicon-search {
        font-size: 23px;
    }

.height-35 > [class*='col-'] {
    height: 37px !important;
}

.divLiveSearch {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    background: #FFFFFF;
    float: left;
    width: auto;
    padding-right: 20px;
}

    .divLiveSearch table td {
        white-space: nowrap;
    }

.floatingIcon {
    bottom: 0;
    position: fixed;
    margin: 1em;
    right: 0px;
    text-align: right;
}

.reminderbutton {
    display: block;
    position: relative;
}

.content {
    display: none;
    transition: opacity 3s ease-out;
    opacity: 0;
}

.floatingIcon:hover .content {
    display: block;
    opacity: 1;
}

.alternateList li:nth-child(odd) {
    background-color: #ededed;
}

#micSpeak {
    border-radius: 50%;
    text-align: center;
    z-index: 9999;
    padding: 10px;
}

    #micSpeak i {
        font-size: 16px;
        margin: 5px;
        color: #FFF;
    }

    #micSpeak svg {
        font-size: 16px;
        color: #A6ABBE;
    }

    #micSpeak:hover {
        opacity: 0.50;
    }


#chatBoxIcon {
    position: fixed;
    top: 50px;
    right: 13px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    line-height: 4;
    text-align: center;
    background: #4f8ac9;
    z-index: 99999;
    border: 2px solid #ccc;
    color: #fff;
}

.nav-m {
    margin-right: 30px;
}

.nav-m-r {
    margin-right: 55px;
}

#chatSystem {
    background: #267347;
    border-color: #267347;
}

    #chatSystem:hover {
        opacity: 0.9;
    }

#missNotification {
    position: absolute;
    top: 46px;
    right: 10px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border-image: initial;
    background: tomato;
    text-align: center;
    color: white;
    font-weight: bold;
    z-index: 99999;
    display: none;
}

    #missNotification label {
        margin: auto;
    }

#rptstaffID {
    display: none;
}

.groupChatID {
    display: none;
}

.d-flex {
    display: flex;
}

#chatBoxIcon i {
    font-size: 24px;
    margin: 5px;
}

#chatBoxIcon svg {
    font-size: 24px;
    margin: 7px;
}

.peerName {
    display: none;
}

#chatBoxIcon:hover {
    cursor: pointer;
    border: 2px solid #bbb;
}

.chatBox {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
}


.staffList-content {
    position: fixed;
    bottom: 0;
    right: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    height: 430px;
    width: 340px;
    z-index: 999;
    background: #fff;
    flex-direction: column;
    animation-name: display_animation;
    animation-duration: 0.5s;
    display: none;
}


.chat-content, .group-chat-content {
    position: fixed;
    bottom: 0;
    right: 360px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    height: 430px;
    width: 340px;
    z-index: 999;
    background: #fff;
    flex-direction: column;
    animation-name: display_animation;
    animation-duration: 0.5s;
    display: none;
}

@keyframes display_animation {
    0% {
        height: 0;
    }

    100% {
        height: 430px;
    }
}

#roomName {
    display: none;
}

.messages {
    flex-grow: 1;
    padding: 10px 20px;
    height: 315px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: unset;
    font-size: 14px;
}

    .messages::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }

    .messages::-webkit-scrollbar {
        width: 10px;
        background-color: #F5F5F5;
    }

    .messages::-webkit-scrollbar-thumb {
        background-color: #3A72BE;
        border-radius: 5px;
    }

.message {
    display: flex;
    flex-direction: column;
}

.message_date {
    display: flex;
    align-items: center;
    padding: 12px 0;
    width: 120%;
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    clear: both;
}

    .message_date::before {
        display: block;
        content: "";
        flex-grow: 1;
        margin-right: 10px;
        border-top: 1px solid rgba(0, 0, 0, .15);
    }

    .message_date::after {
        display: block;
        content: "";
        flex-grow: 1;
        margin-left: 10px;
        border-top: 1px solid rgba(0, 0, 0, .15);
    }

.message--mine {
    float: right;
    align-items: flex-end;
    margin-top: 7px;
    width: 83%;
}

.message--theirs {
    align-items: flex-start;
    margin-top: 7px;
    width: 83%;
}

.message__name {
    padding: 2px 0;
    color: saddlebrown;
    font-weight: bold;
    font-size: 11px;
}

.message__bubble {
    padding: 7px 17px;
    border-radius: 0 6px 6px;
    word-break: break-all;
}

.message--theirs .message__bubble {
    background: #668cff;
    color: white;
    word-break: break-all;
}

.message--mine .message__bubble {
    background: rgba(156, 172, 172, 0.2);
    color: #333;
    word-break: break-all;
}

.div-form {
    border-top: 1px solid rgba(156, 172, 172, 0.2);
    display: flex;
    flex-shrink: 0;
    position: absolute;
    width: 100%;
    padding-top: 8px;
    bottom: 0;
}

.group-form {
    border-top: 1px solid rgba(156, 172, 172, 0.2);
    display: flex;
    flex-shrink: 0;
    position: absolute;
    width: 100%;
    padding-top: 8px;
    bottom: 0;
}

.d-load_more {
    text-align: center;
}

.load_more, .load_more_for_group, .load_more_patient {
    cursor: pointer;
}

.group_messages {
    flex-grow: 1;
    padding: 10px 20px;
    height: 315px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: unset;
    font-size: 14px;
}

    .group_messages::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }

    .group_messages::-webkit-scrollbar {
        width: 10px;
        background-color: #F5F5F5;
    }

    .group_messages::-webkit-scrollbar-thumb {
        background-color: #3A72BE;
        border-radius: 9px;
    }

#enterMessage {
    width: 220px;
    font-size: 16px;
    box-sizing: border-box;
    resize: none;
    color: #666666;
    border: none;
    font-family: monospace;
    background: transparent;
}


    #enterMessage:focus {
        outline: unset;
    }

#sendMessage {
    background: black;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    outline: none;
}

#enterGroupMessage {
    width: 220px;
    font-size: 16px;
    box-sizing: border-box;
    resize: none;
    color: #666666;
    border: none;
    font-family: monospace;
    background: transparent;
}


    #enterGroupMessage:focus {
        outline: unset;
    }

#sendGroupMessage {
    background: black;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    outline: none;
}

.paperclip {
    margin: auto 10px;
    color: #555;
}

.input-div {
    display: flex;
}

.chat-header, #staffList-header {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid rgba(156, 172, 172, 0.5);
    justify-content: space-between;
}

#group-header {
    display: flex;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(156, 172, 172, .5);
    justify-content: space-between;
}

.create-group-btn {
    font-size: 22px;
    color: #4f8ac9;
}

.create-group-btn {
    cursor: pointer;
}

.group-list {
    display: flex;
}

.i-remove {
    color: white;
    font-size: 13px !important;
}

#chatStaff {
    position: absolute;
    bottom: 100px;
    right: 100px;
}


.pulse-animation {
    background-color: rgb(232, 76, 61) !important;
    box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

#staffList {
    list-style: none;
    height: 368px;
    overflow-y: scroll;
    padding: 0;
}

    #staffList::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }

    #staffList::-webkit-scrollbar {
        width: 15px;
        background-color: #F5F5F5;
    }

    #staffList::-webkit-scrollbar-thumb {
        background-color: #3A72BE;
        border-radius: 9px;
    }

    #staffList li {
        padding: 8px 20px;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        color: #666666;
        justify-content: space-between;
    }

        #staffList li:hover {
            background: #ccddff;
            cursor: pointer;
        }

.miss-notify {
    color: white;
    margin: auto 0;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border-image: initial;
    background: tomato;
    text-align: center;
    color: white;
    font-weight: bold;
    display: none;
}

.miss-notify-for-group {
    color: white;
    margin: auto 0;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border-image: initial;
    background: tomato;
    text-align: center;
    color: white;
    font-weight: bold;
    display: none;
}

.call-selection span {
    padding: 0 4px;
    cursor: pointer;
}

.close {
    opacity: 1;
}

.group-close {
    margin-top: 5px;
    margin-left: 6px;
    padding: 0 4px !important;
    outline: none !important;
}

.chat_close {
    margin-top: 2px;
    margin-left: 3px;
    padding: 0 4px !important;
    outline: none !important;
}

.staff-item {
    display: flex;
}

.group-chat-staff {
    display: flex;
}

.groupShortName {
    vertical-align: sub;
    font-size: 12px;
    color: white;
}

.groupName {
    margin: auto 8px;
}

#rptstaffName {
    margin: auto 8px;
}


.profile-id {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3b5998;
    text-align: center;
    position: relative;
}

.profile-group-id {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: seagreen;
    text-align: center;
    position: relative;
}

.profileName {
    vertical-align: sub;
    font-size: 12px;
    color: white;
}

.showonline, .showonline_for_group {
    position: absolute;
    right: 0px;
    bottom: 1px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-image: initial;
    border-color: rgb(255, 255, 255);
    background: gray;
}

.online_or_offline {
    position: absolute;
    right: 0px;
    bottom: 1px;
    height: 11px;
    width: 11px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-image: initial;
    border-color: rgb(255, 255, 255);
    background: gray;
}

.create-group-content {
    position: absolute;
    bottom: 0px;
    right: 357px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    height: 430px;
    width: 340px;
    z-index: 999;
    background: #fff;
    flex-direction: column;
    animation-name: display_animation;
    animation-duration: 0.5s;
    display: none;
}

.input_for_groupName {
    border: none;
    border-bottom: 1px solid;
    color: #096FB1;
    box-shadow: unset;
    border-radius: unset;
    font-size: 14px;
    outline: unset;
    font-weight: bold;
    width: 170px;
}

#groupList {
    list-style: none;
    height: 368px;
    padding: 0;
    overflow-y: scroll;
}

    #groupList::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }

    #groupList::-webkit-scrollbar {
        width: 15px;
        background-color: #F5F5F5;
    }

    #groupList::-webkit-scrollbar-thumb {
        background-color: #3A72BE;
        border-radius: 9px;
    }

    #groupList li {
        padding: 8px 14px;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        color: #666666;
        justify-content: space-between;
    }

        #groupList li:hover {
            background: #ccddff;
            cursor: pointer;
        }

.remove_group_menu, .manage_archive {
    display: none;
    text-align: center;
    position: absolute;
    width: 100px;
    border: 1px solid #ccc;
    background: white;
    z-index: 9999;
    box-shadow: 2px 2px 1px #777;
}

#remove_from_list, #delete_group, #readd_list {
    padding: 4px;
    font-size: 14px;
    color: black;
}

    #remove_from_list:hover, #delete_group:hover, #readd_list:hover {
        cursor: pointer;
        background-color: #ccc;
    }

#archive {
    display: none;
    z-index: 999999;
    opacity: 0.6;
}

#unarchive {
    display: none;
    opacity: 0.6;
    z-index: 999999;
}

    #archive:hover, #unarchive:hover {
        opacity: 1;
    }

.suggeted-mark {
    font-size: 14px;
    font-family: monospace;
    font-weight: bold;
    color: #777;
    margin-left: 15px;
    margin-bottom: 0;
}

.every-selected-members {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-color: transparent;
    text-align: left;
    border-width: 0px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 0px;
    cursor: pointer;
    border-style: solid;
}

.every-members {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: stretch;
}

.selected-members-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: stretch;
}

.d-member {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: center;
    background-color: rgb(229, 228, 232);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    justify-content: center;
}

.member-short-name {
    position: relative;
    display: inline;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    white-space: pre;
    padding-top: 3px;
    text-overflow: ellipsis;
    font-size: 15px;
    color: rgb(0, 120, 212);
    font-family: sans-serif;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0);
    cursor: inherit;
}

.remove-member {
    position: absolute;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: center;
    border-radius: 12px;
    border-width: 2px;
    border-style: solid;
    height: 18px;
    width: 18px;
    right: -2px;
    top: -2px;
    justify-content: center;
    border-color: rgb(255, 255, 255);
    background-color: rgb(0, 120, 212);
}

.selected-members {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    align-items: stretch;
    align-self: stretch;
    justify-content: center;
    height: 0;
    transition: height 250ms ease 250ms;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 15px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    border: 1px solid #9db8e1;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
    background-color: #2196F3;
    border-radius: 50%;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 7px;
    top: 4px;
    width: 7px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.toast-success {
    background-color: #2d8659 !important;
}

.form-check-input {
    width: 15px;
    height: 15px;
}

.profileInitialName {
    vertical-align: sub;
    font-size: 12px;
    color: white;
}

#voice-call, #video-call, #group-video-call, #group-voice-call {
    padding: 5px 1px;
}

    #voice-call:hover, #video-call:hover, #group-video-call:hover, #group-voice-call:hover {
        background: #8ab1db;
        border-radius: 50%;
        color: white;
        opacity: 0.5;
    }

#targetStaffName, #targetGroupName {
    font-weight: bold;
    margin: auto 8px;
}

#targetStaffID {
    display: none;
}

#targetGroupID {
    display: none;
}

#voice-call-cotent, #video-call-cotent {
    position: absolute;
    top: 45%;
    left: 50%;
    background: #333;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 250px;
    border-radius: 5px;
    z-index: 999;
    display: none;
}

#group-voice-call-cotent, #group-video-call-cotent {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #333;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    border-radius: 5px;
    z-index: 999;
    display: none;
}

#staffList-header {
    cursor: pointer;
}

.chat-header {
    cursor: pointer;
}

#remoteVideo {
    width: 100%;
    height: 100%;
    background: #333;
    padding: 0;
    display: none;
}

.remoteStaffVideo {
    width: auto;
    background: #333;
    z-index: 999;
    border: 2px solid lightsteelblue;
}

    .remoteStaffVideo:hover {
        cursor: pointer;
        border: 2px solid steelblue;
    }

.remoteVideoContent {
    display: inline-grid;
    text-align: center;
    justify-items: center;
    width: 50%;
    margin: 0 30px;
}

.remoteName {
    color: white;
}


#receive-call-cotent, #receive-group-call-cotent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 250px;
    background: #333;
    z-index: 999;
    border-radius: 5px;
    display: none;
}


.caller {
    position: absolute;
    top: 15px;
    left: 3%;
    font-weight: bold;
    font-size: 24px;
    color: white;
}

#video-call-cotent {
    position: absolute;
    top: 15px;
    left: 3%;
    font-weight: bold;
    font-size: 24px;
    color: white;
}

    #voice-call-cotent .person-emoji, #video-call-cotent .person-emoji {
        position: relative;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: white;
        border: 4px solid steelblue;
        text-align: center;
    }

#group-voice-call-cotent .person-emoji, #group-video-call-cotent .person-emoji {
    position: relative;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: white;
    border: 4px solid steelblue;
    text-align: center;
}

.call_state {
    position: absolute;
    top: 26px;
    color: white;
    margin: 20px 30px;
    font-size: 18px;
}

.other-persons {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    float: right;
}

.localVideo {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 9999;
    display: none;
}


.groupLocalVideo {
    position: absolute;
    top: 105px;
    right: 30px;
    z-index: 9999;
    display: none;
}

#localVideo, #groupLocalVideo {
    width: 250px;
    height: auto;
}

.remote_audios {
    position: absolute;
    top: 120px;
    display: none;
    width: 100%;
}

.remote_videos {
    position: absolute;
    top: 120px;
    display: none;
    width: 100%;
}

.other-person {
    width: 50px;
    height: 50px;
    margin-left: 5px;
    border: 3px solid seagreen;
    border-radius: 50%;
    background-color: white;
    text-align: center;
}

.member-name {
    display: none;
}

.member_Names {
    display: none;
}

.memberNames {
    font-size: 11px;
    font-weight: bold;
    color: saddlebrown;
    position: absolute;
    top: 40px;
    left: 49px;
}

.other-person-name {
    color: steelblue;
    font-size: 20px;
    font-weight: bold;
    margin-top: 7px;
}

.from_person {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: white;
    border: 4px solid steelblue;
    text-align: center;
}

.from_person_name {
    font-size: 52px;
    color: seagreen;
    font-family: sans-serif;
    font-weight: bold;
    margin-top: 17%;
}

.from_group_name {
    font-size: 52px;
    color: seagreen;
    font-family: sans-serif;
    font-weight: bold;
    margin-top: 17%;
}

.response-call-select {
    position: absolute;
    bottom: 4%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    font-size: 16px;
    z-index: 999;
    display: flex;
}

.group_voice_record {
    width: 50px;
    height: 50px;
    color: black;
    font-weight: bold;
    padding-top: 14px;
    border-radius: 50%;
    background: white;
}

    .group_voice_record:hover {
        opacity: 0.7;
        cursor: pointer;
    }

#call, #accept-group-call, #patient_call {
    width: 50px;
    height: 50px;
    color: white;
    padding-top: 13px;
    border-radius: 50%;
    background: rgb(76, 175, 80);
}

    #call:hover, #accept-group-call:hover, #patient_call:hover {
        cursor: pointer;
        opacity: 0.7;
        color: white;
    }

#call_name, #call_person_name {
    display: none;
}

.group_name {
    color: white;
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 26px;
}

#notificate:hover, #group-chat:hover, #archive-group:hover, #unarchive-group:hover {
    opacity: 0.6;
    cursor: pointer;
}

#unarchive-group {
    display: none;
}

#archiveList {
    display: none;
    list-style: none;
    height: 368px;
    overflow-y: scroll;
    padding: 0;
}

    #archiveList::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }

    #archiveList::-webkit-scrollbar {
        width: 15px;
        background-color: #F5F5F5;
    }

    #archiveList::-webkit-scrollbar-thumb {
        background-color: #3A72BE;
        border-radius: 8px;
    }

    #archiveList li {
        padding: 8px 20px;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        color: #666666;
        justify-content: space-between;
    }

        #archiveList li:hover {
            background: #ccddff;
            cursor: pointer;
        }

.more_dropdown {
    position: absolute;
    top: 45px;
    right: 23px;
    background-color: white;
    min-width: 120px;
    font-family: inherit;
    font-size: 14px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99999;
    display: none;
}

.dropdown_item {
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

.select-groups {
    display: none;
}

.dropdown_item:hover {
    background-color: #e6e6e6;
    cursor: pointer;
    text-decoration: none;
}

#voice-call-end:hover, #video-call-end:hover {
    opacity: 0.7;
    cursor: pointer;
}

#group-video-call-end:hover, #group-voice-call-end:hover {
    opacity: 0.7;
    cursor: pointer;
}

#chatUsername {
    font-weight: bold;
    padding-top: 3px;
    padding-left: 3px;
    color: #555;
}

.span-color {
    color: #3b5998;
}

.paperclip:hover {
    cursor: pointer;
    opacity: 0.7;
}

.chat-cont {
    position: absolute;
    bottom: 0px;
    right: 366px;
    z-index: 999999;
    width: 300px;
    box-shadow: 0 5px 10px -4px rgba(0,0,0,0.5);
    background: #fff;
    margin: 50px auto;
    color: #999;
    display: none;
}

    .chat-cont > div {
        padding: 15px;
        background: #0af;
        color: #fff;
    }

.emoji-dashboard {
    display: block;
    padding: 0;
    top: 110%;
    margin: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    background: #fff;
    list-style-type: none;
    color: #a0a0a0;
    right: 0;
    z-index: 9999;
}

.emoji-dashboard {
    bottom: 0;
    top: auto;
}

.chat-inp .emoji {
    display: inline-block;
    height: 35px;
    width: 35px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    top: 0;
    left: 10px;
    bottom: 0;
    margin: auto;
}

    .chat-inp .emoji:before {
        content: '\f118';
        font-family: fontAwesome;
        line-height: 35px;
        font-size: 20px;
        font-weight: normal;
        color: #a0a0a0;
    }

.emoji-dashboard .emojis {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    height: 200px;
    overflow-y: overlay;
    overflow-x: hidden;
}

    .emoji-dashboard .emojis li {
        margin: 5px 15px;
        cursor: pointer;
    }

.chat-cont *::-webkit-scrollbar {
    width: 5px;
    background: transparent;
    position: absolute;
    left: 0;
}

.chat-cont *::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0);
    border-radius: 5px;
}

.chat-cont *:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.3);
    border-radius: 5px;
}

@-webkit-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

@keyframes pulse {
    to {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}

.patient_chatBox {
    width: 100%;
    display: flex;
}

.patient_list {
    width: 300px;
    text-align: center;
}

.patient_chat_content {
    text-align: center;
    border-left: 1px solid #ccc;
}

#staff_name, #lblstaffID, #lblpatientID, #lbllocalID {
    display: none;
}

.patient_online {
    font-size: 12px;
    color: #333;
}

.patient_call-selection {
    position: absolute;
    top: 0;
    right: 30px;
    display: flex;
}

#patient_video-call, #patient_voice-call {
    width: 40px;
    height: 40px;
    border: 1px solid;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    padding-top: 7px;
    margin-left: 10px;
    background-color: rgba(156, 172, 172, 0.2);
    color: #0088cc;
}

    #patient_video-call:hover, #patient_voice-call:hover {
        opacity: 0.7 !important;
        cursor: pointer;
    }

#urlRoomName {
    display: none;
}

.patient_form {
    position: absolute;
    bottom: 5px;
    display: flex;
    width: calc(100% - 120px);
    margin: 0 20px;
    padding: 8px 20px;
    justify-content: space-between;
    background-color: rgba(156, 172, 172, 0.2);
    border: 1px solid rgba(156, 172, 172, 0.2);
    border-radius: 20px 20px;
}

.message_content {
    margin-left: 55px;
}

.message--mine .message_content .message__name {
    text-align: right;
}
/* Patient chat*/
/* Summer Note */
.main_content ul {
    list-style: disc;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

.page_divider {
    padding-top: 5%;
}

.page_container {
    background: linear-gradient(288deg,rgba(228, 233, 239, 0.36),rgb(233, 245, 255));
    width: 32%;
    margin: auto;
    border-radius: 15px;
    padding: 3%;
}

.image_control {
    height: 45%;
    width: 45%;
}

.justify_element {
    text-align: justify;
    padding: 0;
    margin: 0;
}

    .justify_element:after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0px !important;
    }

legend {
    color: #096FB1;
    font-size: 16px;
    font-weight: bold;
}

.form-group-less-margin .form-group {
    margin-bottom: 5px;
}

.form-group-less-margin .form-control {
    padding: 1px !important;
}

.unified-inputs.input-group {
    width: 100%;
}

.unified-inputs-2.input-group .form-control {
    width: 50% !important;
}

.unified-inputs-3.input-group .form-control {
    width: 33.3% !important;
}

.unified-inputs-4.input-group .form-control {
    width: 25% !important;
}

.border-bottom-gradient {
    padding-bottom: 2px;
    background: /* gradient can be an image */
    linear-gradient( to right, #999 0%, #ededed 70%, transparent 100% ) left bottom transparent no-repeat;
    background-size: 100% 2px; /* if linear-gradient, we need to resize it */
}

.frame_holder {
    top: 50px;
    bottom: 50px;
    left: 50px;
    right: 50px;
    background: #ffffff;
}

.scroll_frame {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    border: 1px solid #e0e0e0 !important;
}

.my_frame {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    vertical-align: top !important;
}


@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

        .navbar-collapse.collapse {
            display: none !important;
        }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }

    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .collapsing {
        overflow: hidden !important;
    }
}

#toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div {
    width: 100% !important;
    opacity: 1;
}

.mt-75px {
    margin-top: 75px !important;
}

.mt-5px {
    margin-top: 5px;
}

.m-75-0 {
    margin: 75px 0 0 0;
}

.m-10-0 {
    margin: 10px 0 0 0;
}

.m-5-0 {
    margin: 0 0 5px 0;
}

.d-contacts-title {
    display: flex;
    margin-left: calc(50% - 160px);
    width: 30%;
    justify-content: space-between;
    transform: translateX(-50%);
}

.contacts_title {
    font-size: 28px;
    font-weight: bold;
    color: darkslategrey;
}

#btnAddPerson {
    margin-top: 4px;
    height: 30px;
    padding: 5px;
    border-radius: 30px;
    color: white;
    background: cadetblue;
}

    #btnAddPerson:focus {
        outline: none;
    }

.d_contacts_row {
    display: none;
    margin-top: 30px;
    text-align: left;
}

.d-float-right {
    float: right;
    margin-top: 10px;
}

#AddNewContact {
    margin-left: 30px;
    padding-left: 30px;
    padding-right: 30px;
    height: 35px;
    background: #4f8ac9;
    font-size: 14px;
    font-weight: 300 !important;
    color: white;
    border: none;
    border-radius: 20px;
    outline: unset;
    font-weight: bold;
}

#btnUpdateContact {
    height: 35px;
    padding-left: 25px;
    padding-right: 25px;
    outline: none;
}

.external_contacts_list {
    margin-top: 40px;
}

.table-responsive {
    height: 45vh;
    overflow-y: auto;
}

.external_list thead {
    font-weight: bold;
    font-size: 16px;
}

#newSendLink {
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
}

    #newSendLink:hover {
        cursor: pointer;
    }


.s_first_name {
}

.d-hidden {
    display: none;
}

.mt-80 {
    margin-top: 80px;
}

.p-notify {
    color: brown;
}

.s-third-name {
    font-size: 17px;
    font-weight: bold;
}

.p-send-link {
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
    background: #F6FCFF;
    border-top: 1px solid rgba(0, 123, 254, 0.28);
    border-bottom: 1px solid rgba(0, 123, 254, 0.28);
}

.td-property {
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid #ddd !important;
    padding: 11px 0;
}

#lblErrorMessage {
    line-height: 1;
}

.chkLink {
    display: none;
}

#instead-chkSendEmail, #instead-chkSendPhone {
    font-size: 15px;
}

.sending-result {
    font-size: 14px;
    color: #14A086;
}

.td-property table {
    width: 90%;
}

.chkLink {
    margin: 0;
}

.lbl_person_id, .lbl_country_id {
    display: none;
}

.invalid {
    border-color: red;
}

#email_validat {
    margin-top: 5px;
    color: red;
}

#newPhoneNumberValidate {
    margin-left: 15px;
}

#deleteContact {
    padding: 4px 14px;
    height: 30px;
    background: transparent;
    border: 1px solid tomato;
    color: tomato;
}

    #deleteContact:hover {
        border: 2px solid tomato;
        font-weight: bold;
    }

    #deleteContact:focus {
        outline: none;
    }

#lnkSendEmail {
    margin: auto 0;
}

.viewHistory:hover {
    cursor: pointer;
    background: whitesmoke;
}

.content-title {
    font-family: azo-sans-web;
    margin-left: 38px;
    padding-top: 31px;
}

#btnOpenPage {
    height: 37px;
    width: 120px;
    background: #133A68;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    outline: none;
}

    #btnOpenPage:hover {
        opacity: 0.9;
    }

.d-main-body {
    width: 100%;
    min-width: 1160px;
    height: 65vh;
    font-family: azo-sans-web;
}

.d-home-left {
    width: 350px;
    min-width: 350px;
    height: calc(100vh - 97px);
    border: 1px solid #178EDC;
    background: #F6FCFF;
    border-top: none;
    padding-left: 0;
    padding-right: 0;
}

.ml-2 {
    margin-left: 10px;
}

#d-select-content {
    margin-top: 11px;
    background: #3A72BF;
    padding: 8px;
    margin-left: 22px;
    margin-right: 22px;
    font: normal normal normal 16px/18px azo-sans-web, sans-serif;
    color: #F6FCFF;
    text-align: center;
    cursor: pointer;
}

.select-list-title {
    margin-left: 10px;
    font-size: 18px;
    cursor: pointer;
}

.d-search {
    margin-top: 12px;
    padding-left: 18px;
    padding-right: 23px;
    width: 100%;
    position: relative;
}

#input-search {
    width: 100%;
    background: #ffffff;
    height: 35px;
    border: 1px solid #178EDC;
    border-radius: 24px;
}

#b-search {
    position: absolute;
    top: 3px;
    right: 26px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    line-height: 2;
    padding: 6px;
    text-align: center;
    background: #3A72BF;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

#contact-list-container {
    margin-top: 10px;
    height: calc(100vh - 202px);
    overflow: auto;
    overflow-x: hidden;
}

    #contact-list-container::-webkit-scrollbar {
        width: 5px;
    }

    #contact-list-container::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
    }

    #contact-list-container::-webkit-scrollbar-thumb {
        background: #134384;
        border-radius: 10px;
        opacity: 0.7;
    }

        #contact-list-container::-webkit-scrollbar-thumb:hover {
            background: #164e9c;
            opacity: 1;
        }

.d-home-right {
    width: 100%;
}

.d-chat-box {
    display: flex;
    justify-content: space-between;
    height: calc(100vh - 147px);
}

.d-chat-body {
    width: 100%;
    background: #F1F0F0;
}

.d-chat-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    padding-bottom: 4px;
    background: #fff;
}

.d-chat-staff-state {
    display: flex;
    margin-left: 20px;
}

.d-chat-mark {
    display: inline-block;
    position: relative;
}

.img-mark {
    width: 39px;
    border: 1px solid rgba(19, 67, 132, 0.74);
    border-radius: 50%;
}

.show-online {
    position: absolute;
    right: 0px;
    bottom: 2px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-image: initial;
    border-color: rgb(255, 255, 255);
    background: gray;
}

.d-staff-state {
    padding-left: 10px;
}

#p-chat-staff-name {
    font-size: 15px;
    font-family: azo-sans-web, sans-serif;
    color: #134384;
    margin-bottom: 0;
    font-weight: bold;
}

    #p-chat-staff-name:hover {
        text-decoration: underline;
        cursor: pointer;
        opacity: 0.8;
    }

#s-staff-state {
    font-size: 13px;
    font: azo-sans-web, sans-serif;
    color: #F65E5E;
}

.a-call-way {
    margin: auto 10px;
    margin-right: 0;
    padding: 6px 18px;
    font: normal normal 14px/18px azo-sans-web, sans-serif;
    color: #14A086 !important;
    border: 1px solid #14A086;
    border-radius: 40px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .a-call-way:hover {
        border: 2px solid #14A086;
        cursor: pointer;
        opacity: 0.8;
        text-decoration: none;
    }

.s-call-letter {
    padding-left: 8px;
    color: #302D2D;
}

#click-invitation-link {
    display: block;
    position: absolute;
    top: 50%;
    left: 42%;
    transform: translate(-50%, -50%);
    color: #0066ff;
}

    #click-invitation-link:hover {
        cursor: pointer;
        text-decoration: underline;
    }

.d-message-box {
    position: relative;
    padding: 21px 15px;
    height: calc(100vh - 206px);
    background: #F1F0F0;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

    .d-message-box::-webkit-scrollbar {
        width: 5px;
    }

    .d-message-box::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
    }

    .d-message-box::-webkit-scrollbar-thumb {
        background: #134384;
        border-radius: 10px;
        opacity: 0.7;
    }

        .d-message-box::-webkit-scrollbar-thumb:hover {
            background: #164e9c;
            opacity: 1;
        }

.d-message-form {
    width: 100%;
    display: flex;
    padding-left: 24px;
    background: #F1F0F0;
}

.d-message-input {
    width: 100%;
    padding: 9px 20px;
    border: 1px solid #13438473;
    border-radius: 0px 22px 22px 22px;
    background: #F4F9FC;
}

#enterPatientMessage {
    display: block;
    width: 100%;
    font: normal normal 300 16px azo-sans-web, sans-serif;
    border: none;
    resize: none;
    color: #666666;
    background: #F4F9FC;
}

    #enterPatientMessage:focus {
        outline: none;
    }

#sendPatientMessage {
    margin: auto 10px;
    margin-bottom: 5px;
    padding: 4px 18px;
    font: normal normal 14px/18px azo-sans-web, sans-serif;
    color: #302D2D !important;
    border-radius: 40px;
    display: flex;
    background: #FFFFFF;
    border: 2px solid #178EDC;
}

    #sendPatientMessage:hover {
        cursor: pointer;
    }

.i-send {
    padding-left: 10px;
    color: #178EDC;
    margin: auto;
}

.d-chat-info {
    width: 300px;
}

.d-chat-info-header {
    padding: 8px;
}

.d-chat-info-body {
    padding-right: 3px;
    height: calc(100vh - 147px);
    background: #F6FCFF;
    border-left: 3px solid #3A72BF;
}

.mr-35 {
    margin-right: 35px;
}

.a-close-box {
    margin: auto;
    margin-right: 0;
    padding: 7px 12px;
    background: #E3E3E3;
    border-radius: 50%;
    color: #333 !important;
}

    .a-close-box:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.d-search-conversation {
    padding-top: 13px;
    padding-left: 5px;
    width: 100%;
    position: relative;
}

#input-search-conv {
    width: 100%;
    height: 35px;
    border: 1px solid #178EDC;
    border-radius: 20px;
    background: #ffffff;
}

#i-search-conv {
    position: absolute;
    top: 18px;
    right: 3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    line-height: 2;
    padding: 5px;
    text-align: center;
    background: #3A72BF;
    color: white;
    font-size: 13px;
    cursor: pointer;
}

.d-staff-profile {
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #134384;
}

.d-staff-profile-fir {
    padding-left: 10px;
    display: flex;
}

#img-chat-staff {
    width: 44px;
    border-radius: 50%;
    border: 2px solid rgba(19, 67, 132, 0.74);
}

.d-chat-view-profile {
    width: 100%;
    margin-left: 5px;
}

#p-staff-name {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0px;
    color: #134384;
}

#btnViewProfile {
    margin-top: 2px;
    margin-right: 3px;
    background: #3A72BF;
    padding: 2px;
    font: normal normal normal 13px/17px azo-sans-web, sans-serif;
    color: #F6FCFF;
    text-align: center;
}

    #btnViewProfile:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.d-profile-detail {
    display: none;
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid #178EDC;
    border-radius: 10px;
    padding: 5px;
}

.p-detail {
    margin-bottom: 3px;
    padding-right: 10px;
    font: normal normal normal 13px azo-sans-web, sans-serif;
    color: #302D2D;
}

.d-pinned-box {
    margin-top: 17px;
}

.p-pinned-title {
    text-align: center;
    color: #3A72BF;
    font: normal normal 18px azo-sans-web, sans-serif;
}

.s-pinned-title {
    padding-left: 5px;
    font-size: 20px;
    color: #302D2D;
}

.d-pin-content {
    height: calc(100vh - 335px);
    overflow-y: auto;
    overflow-x: hidden;
}

    .d-pin-content::-webkit-scrollbar {
        width: 5px;
    }

    .d-pin-content::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
    }

    .d-pin-content::-webkit-scrollbar-thumb {
        background: #134384;
        border-radius: 10px;
        opacity: 0.7;
    }

        .d-pin-content::-webkit-scrollbar-thumb:hover {
            background: #164e9c;
            opacity: 1;
        }

.d-every-pin-content {
    margin-top: 7px;
}

.d-pin {
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    border: 1px solid #707070;
    border-radius: 0px 14px 14px 14px;
}

.p-pinned-date {
    display: inline-block;
    margin-left: 13px;
    margin-bottom: 0;
    padding-top: 6px;
    font: normal normal 300 13px azo-sans-web, sans-serif;
    border-bottom: 1px solid #134384;
}

.p-pinned-mess {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 13px;
    padding-right: 10px;
    font: normal normal normal 14px azo-sans-web, sans-serif;
    color: #302D2D;
}

.add-note {
    position: absolute;
    bottom: 1px;
    right: 2px;
}

    .add-note:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.remove-note {
    display: none;
    position: absolute;
    bottom: 0;
    right: 2px;
    color: #3A72BF;
    font-size: 14px;
}

    .remove-note:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.close-pin {
    position: absolute;
    top: 1px;
    right: 6px;
    font-size: 11px;
}

    .close-pin:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.d-additional-note {
    display: none;
    position: relative;
    margin-right: 4px;
    margin-left: 20px;
}

.t-add-note {
    margin-top: 7px;
    padding: 3px;
    width: 100%;
    font: normal normal normal 14px/18px azo-sans-web, sans-serif;
    color: #302D2D;
    border-radius: 9px;
    border: navajowhite;
    overflow: hidden;
    resize: unset;
    background: #F1F0F0;
    outline: none;
}

.delete-note {
    display: none;
    position: absolute;
    bottom: 9px;
    right: 4px;
    color: tomato;
    font-size: 13px;
}

    .delete-note:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.save-note {
    position: absolute;
    bottom: 9px;
    right: 4px;
    color: white;
    background: #3A72BF;
    font-size: 10px;
    padding: 0px 4px;
    border-radius: 7px;
}

    .save-note:hover {
        cursor: pointer;
        opacity: 0.8;
    }

#referrerListForMediCallModal {
    display: none;
    padding: 110px 5px 5px 0;
    z-index: 1000;
    position: fixed;
    top: 30px;
    left: 0;
    outline: 0 !important;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    overflow-x: hidden;
    overflow-y: auto;
}

.reffererListContainer {
    position: relative;
    width: 100%;
    height: 100%;
}

#referrerListForMedicallBody {
    position: relative;
    margin-left: 50%;
    transform: translateX(-50%);
    min-height: 400px;
    width: 800px;
    background: #f4f9fc;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.close-referrer-list {
    position: absolute;
    right: 6px;
    top: 6px;
    cursor: pointer;
    color: #ff5858
}

.referrer-list-title {
    padding: 20px 10px;
    padding-bottom: 0;
    font-family: azo-sans-web, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0F0F0F;
}

.referrer-list-hr {
    margin-left: 10px;
    width: 300px;
    height: 1px;
    background: #5A5858;
}

#txtSearchSurName, #NarrowBelowSearch {
    border-radius: 17px;
    outline: none;
    border: 1px solid #178edc;
    padding: 7px 15px;
    width: 300px;
    font-size: 14px;
    height: 34px;
}

.position-relative {
    position: relative;
}

.d-inline {
    display: inline;
}

.s-search-content {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 15px;
    background: #178edc;
    color: #fff;
}

#btnAddNewReferrer {
    background: #178edc;
    height: 30px;
    margin-right: 6px;
    padding: 7px 16px;
    float: right;
    color: #fff;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    border-radius: 15px;
    cursor: pointer;
}

.m-10 {
    margin: 10px;
}

#btnAddNewReferrer:hover {
    opacity: 0.8;
}

.justify-space-between {
    justify-content: space-between;
}

.referrer-table-contaner {
    border-radius: 15px;
    background: #fff;
    margin: 15px;
    margin-top: 30px;
    padding: 5px;
}

#NarrowBelowSearch {
    border-radius: 17px;
    outline: none;
    border: 1px solid #178edc;
    padding: 7px 15px;
    width: 291px;
    font-size: 14px;
    height: 34px;
}

#search-narrow-surname {
    top: -4px;
}

.d-referrer-paginate {
    text-align: right;
    margin-right: 20px;
}

#referrerPrepage {
    margin-right: 10px;
    cursor: pointer;
    color: #178EDC;
}

#referrerNextpage {
    margin-left: 10px;
    cursor: pointer;
    color: #178EDC;
}

.referrer-paginate {
    font-size: 15px;
}

.selectReferrerBtn {
    background: #178edc;
    color: #fff;
    border-radius: 15px;
    padding: 3px 15px;
    cursor: pointer;
}

.select-another-list {
    display: none;
    position: absolute;
    left: 22px;
    width: calc(100% - 44px);
    z-index: 99;
    text-align: center;
    background-color: #f1f1f1;
    padding: 6px;
    border-radius: 5px;
    font-size: 17px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    cursor: pointer;
}

.d-paticpant {
    margin: 5px 7px 0 7px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-radius: 9px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .d-paticpant:hover {
        background: #e6f7ff !important;
        cursor: pointer;
    }

.d-contact-user-mark {
    display: inline-block;
    position: relative;
}

.img-mark {
    width: 39px;
    border: 1px solid rgba(19, 67, 132, 0.74);
    border-radius: 50%;
}

.show-online {
    position: absolute;
    right: 0px;
    bottom: 2px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-image: initial;
    border-color: rgb(255, 255, 255);
    background: gray;
}

.d-contact-user-info {
    position: relative;
    width: 100%;
    margin-left: 15px;
    margin-right: 10px;
    padding-bottom: 0;
    border-bottom: 1px solid #134384;
}

.p-contacts-name {
    margin-bottom: 0;
    font-size: 15px;
    letter-spacing: 0px;
    color: #302D2D;
}

.last-time {
    font-size: 13px;
}

.unread-count {
    position: absolute;
    bottom: 5px;
    right: 20px;
    display: none;
    font-size: 13px;
    margin-bottom: 0;
    padding: 1px 5px;
    background: tomato;
    color: white;
    border-radius: 50%;
}

.p-contacts {
    margin-bottom: 0;
    font: normal normal 13px/18px azo-sans-web, sans-serif;
    letter-spacing: 0px;
    color: #302D2D;
    font-size: 12px;
}

.d-none {
    display: none;
}

.achive-button {
    color: #3A72BF;
    font-size: 12px;
    visibility: hidden;
    cursor: pointer;
}

.edit-active-list {
    display: none;
    position: absolute;
    top: 12px;
    right: 0;
    font-size: 13px;
    list-style: none;
    background: white;
    z-index: 9999;
    padding: 2px 10px;
    box-shadow: 1px 4px 5px #888888;
}

.achive-clk {
    color: tomato;
    cursor: pointer;
}

.add-to-contact {
    color: #3A72BF;
    cursor: pointer;
}

#d-referrer-chat-list {
    display: none;
}

.i-send {
    padding-left: 10px;
    color: #178EDC;
    margin: auto;
    font-size: 21px;
}

.staff-emoji {
    margin-bottom: 5px;
}

.chat-imgs {
    border: 1px solid rgba(19, 67, 132, 0.74);
    border-radius: 50%;
}

.d-message-box .message--mine {
    float: right;
    align-items: flex-end;
    margin-top: 7px;
    width: 63%;
    word-break: break-all;
}

.d-message-box .message--theirs {
    align-items: flex-start;
    margin-top: 7px;
    width: 68%;
    word-break: break-all;
}

.d-message-box .message_date {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    width: 90%;
    font-size: 13px;
    font-weight: 300;
}

.d-message-box .message__bubble {
    text-align: left;
    font: normal normal normal 14px/18px azo-sans-web, sans-serif;
    letter-spacing: 0px;
    color: #302D2D;
    padding: 0;
    background: none;
}

.d-message-box .message--theirs .message_content {
    margin-left: 0;
    position: relative;
    background: #F4F9FC;
    padding: 17px 66px 14px 13px;
    border-radius: 0px 14px 14px 14px;
}

.d-message-box .message--mine .message_content {
    margin-left: 0;
    position: relative;
    padding: 17px 66px 14px 13px;
    background: #D5E7FF;
    border-radius: 12px 0px 12px 12px;
}

.sent-time {
    position: absolute;
    bottom: 4px;
    right: 7px;
    font: normal normal 300 12px/17px azo-sans-web, sans-serif;
    letter-spacing: 0px;
    color: #302D2D;
}

.custom-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin-top: 0 !important;
    border: none;
}

.custome-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background: #F6FCFF;
    background-clip: padding-box;
    border: none;
    border-radius: .3rem;
    outline: 0;
}

.newconv-modal-header {
    height: 30px;
    padding: 0;
    background: #3A72BF;
}

.conv-close {
    padding: 0 !important;
    margin: 3px 1rem 0 auto !important;
    color: white;
    opacity: 1;
    font-weight: 300;
    outline: none !important;
}

.p-conv-modal-title {
    font: normal normal bold 28px azo-sans-web, sans-serif;
    margin-bottom: 0;
}

.p-conv-modal-sec {
    margin-top: 12px;
    font: normal normal 14px azo-sans-web, sans-serif;
    font-weight: 300;
    color: #302D2D;
}

.hr-conv {
    width: 70%;
    margin-left: 0;
    border-top: 1px solid #134384;
}

.p-conv-modal-third {
    font: normal normal normal 15px/18px azo-sans-web, sans-serif;
    color: #212529;
}

.d-conv-modal-email {
    margin-top: 30px;
    width: 43%;
}

.l-conv-email {
    color: black;
}

.form-input {
    background: #ffffff !important;
    height: 35px;
    border: 1px solid #178EDC;
    border-radius: 24px;
}

.d-conv-modal-phone {
    margin-top: 30px;
    padding-bottom: 20px;
    width: 43%;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px;
}

.w-100 {
    width: 100% !important;
}

.l-share-link {
    color: #212529;
}

.w-70 {
    width: 70%;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.d-copy {
    position: relative;
}

.i-new-copy {
    position: absolute;
    top: 9px;
    right: 6px;
    font-size: 15px;
    color: darkslategray;
    cursor: pointer;
}

    .i-new-copy:hover {
        color: #178EDC;
    }

.some-button {
    width: 79px;
    padding: 5px;
    margin: auto 0;
    text-align: center;
    border: 1px solid #178EDC;
    border-radius: 24px;
    font: normal normal 12px/15px azo-sans-web, sans-serif;
    background: #178EDC;
    letter-spacing: 0;
    color: #FFFFFF;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sending-result {
    display: none;
    position: absolute;
    bottom: 4px;
    right: 15px;
    font-size: 14px;
    color: green;
}

.show-checking-result {
    display: none;
    position: absolute;
    left: 41%;
    top: 25px;
    font-size: 12px;
    padding: 3px 7px;
    border: 1px solid #009966;
    background: white;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.modal-like-note {
    left: 73px !important;
    width: 190px;
    border-top-left-radius: 8px;
    border-top-right-radius: 0 !important;
}

.share-link-checking {
    z-index: 99;
    top: 22px !important;
    width: 200px;
    left: 48px !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 0 !important;
}

#input-conv-link {
    padding-right: 24px;
}

#sendlink {
    position: absolute;
    bottom: 30px;
    right: 15px;
    cursor: pointer;
    height: 35px;
    padding: 8px;
}

    #sendlink:hover {
        text-decoration: none;
        color: white;
        opacity: 0.8;
    }

.generate-state {
    width: 64px;
    position: absolute;
    bottom: 40px;
    right: 94px;
}

#voice_call_content:hover {
    cursor: move;
}

.call-content {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 230px;
    border: 1px solid #3A72BF;
    border-radius: 20px;
    background: #F6FCFF
}

.call-title {
    width: 100%;
    margin-bottom: 1rem;
    background: #212531;
    text-align: center;
    font: normal normal bold 21px/30px azo-sans-web, sans-serif;
    color: #F4F9FC;
    border-radius: 19px 19px 0 0;
}

.d-call-state {
    display: flex;
    width: 80%;
    margin: auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #134384;
}

.a-video-record {
    margin-left: 90px;
    padding: 9px 7px 12px 7px;
    background: #134384;
    border-radius: 22px;
    z-index: 99999;
    cursor: pointer;
}

    .a-video-record:hover {
        opacity: 0.8;
    }

.d-chat-mark {
    display: inline-block;
    position: relative;
}

.call_staff_mark {
    border: 1px solid #134384;
    border-radius: 50%;
}

.d-staff-state {
    padding-left: 10px;
}

.p-call-staff-name {
    font: normal normal bold 15px/19px azo-sans-web, sans-serif;
    color: #134384;
    margin-bottom: 0;
}

.s-call-state {
    font: normal normal 300 13px/17px azo-sans-web, sans-serif;
    color: #302D2D;
}

.a-record {
    display: none;
    padding: 9px 7px 9px 7px;
    background: #134384;
    border-radius: 22px;
}

.s-record-mark {
    background: #F4F9FC;
    padding: 4px 5px 3px 5px;
    border-radius: 50%;
}

.l-record {
    font: normal normal 14px azo-sans-web, sans-serif;
    color: #F4F9FC;
}

.a-hangup, .a-call-reject {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

    .a-hangup:hover {
        cursor: pointer;
        opacity: 0.8;
    }

#remoteMediCallVoice {
    display: none;
}

.video-modal-close {
    position: absolute;
    top: 106px;
    right: 10px;
    padding: 2px 8px 3px !important;
    background: #F6FCFF !important;
    border-radius: 50%;
    opacity: 1;
}

    .video-modal-close:hover {
        color: black !important;
        opacity: 0.8;
    }

    .video-modal-close:focus {
        outline: none;
    }

.d-localVideo {
    position: absolute;
    top: 132px;
    left: 66px;
}

.show {
    display: block;
}

#localMediCallVideo {
    border-radius: 12px;
}

.video-modal-content {
    border-radius: 19px;
    background-color: transparent;
}

.video-modal-body {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    width: 500px;
    padding: 0;
    z-index: 999999;
}

    .video-modal-body:hover {
        cursor: move;
    }

#remoteMediCallVideo {
    width: 100%;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background: black;
}

.video-call-title {
    margin-bottom: 0;
    width: 100%;
    background: #212531;
    text-align: center;
    font: normal normal bold 21px/30px azo-sans-web, sans-serif;
    color: #F4F9FC;
    border-radius: 19px 19px 0 0;
}

.d-video-footer {
    background: #F6FCFF;
    margin-top: 30px;
    border-radius: 35px;
}

.s-video-tile {
    display: inline-block;
    width: 80px;
    font: normal normal bold 23px/30px azo-sans-web, sans-serif;
    color: #302D2D;
    margin-left: 25px;
    vertical-align: middle;
}

.a-zoom {
    display: none;
    position: absolute;
    top: 37px;
    right: 18px;
    background: #F4F9FC;
    color: #3A72BF !important;
    padding: 3px 6px;
    border-radius: 50%;
    z-index: 99999;
}

    .a-zoom:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.a-accept-call {
    margin-left: 20px;
}

    .a-accept-call:hover {
        cursor: pointer;
        opacity: 0.8;
    }


.record-animation {
    animation: color-change 1s infinite;
}

@keyframes color-change {
    0% {
        color: red;
    }

    50% {
        color: black;
    }

    100% {
        color: red;
    }
}

.modal-backdrop {
    display: none;
}

.s-pin-message {
    display: none;
    position: absolute;
    bottom: 0;
    right: -21px;
    font-size: 12px;
    padding: 2px 6px;
    background: #F4F9FC;
    border-radius: 50%;
    color: #3A72BF;
}

    .s-pin-message:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.d-initate-box {
    display: none;
    width: 100%;
}

.p-initate-title {
    margin-top: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.s-p-title {
    background: white;
    height: 35px;
    border: 1px solid #178EDC;
    border-radius: 24px;
    padding-top: 3px;
    padding-bottom: 0;
}

.w-23 {
    width: 23%;
}

.pr-0 {
    padding-right: 0;
}

.pr-3 {
    padding-right: 1rem !important;
}

.w-35 {
    width: 35%;
}

.w-25 {
    width: 25%;
}

.w-60 {
    width: 60%;
}

.mt-30 {
    margin-top: 30px;
}

#edit_modal {
    cursor: pointer;
}

#profile-email {
    word-break: break-all;
}

.i-voice-record {
    display: none;
}

.i-video-record {
    display: none;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
    float: unset;
}

.d-font {
    font-size: 16px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.display-4 {
    font-size: 54px;
    font-weight: 300;
    line-height: 1.2;
}

.card-main {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 2px solid #13438470;
    border-radius: 25px;
}

.mb-3 {
    margin-bottom: 16px;
}

.mb-4 {
    margin-bottom: 24px;
}


element.style {
}

.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-body {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #F5F8FB;
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: 25px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 20px;
}

.bg-white {
    background-color: #fff !important;
}

.review-style {
    border-radius: 15px;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pl-2, .px-2 {
    padding-left: .5rem !important;
}

.pl-5px {
    padding-left: 5px !important;
}

.pb-2, .py-2 {
    padding-bottom: .5rem !important;
}

.pr-2, .px-2 {
    padding-right: .5rem !important;
}

.card-header-title {
    padding-left: 15px;
    padding-bottom: 15px;
    color: inherit;
}

.az-17 {
    font-family: azo-sans-web, sans-serif;
    font-weight: 700;
    font-size: 17px;
}

.card-header-content {
    padding-left: 15px;
    color: inherit;
}

.az-15 {
    font-family: azo-sans-web, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: inherit;
}

.text-center {
    text-align: center;
}

.form-cl-amount {
    display: block;
    width: 30%;
    height: 40px;
    padding: .375rem .75rem;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #257dd6;
    border-radius: 25px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-left: auto;
    margin-right: auto;
    background-color: white !important;
    outline: none;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 24px;
}

.divi-noline {
    margin-top: 15px;
}

.mb-2, .my-2 {
    margin-bottom: .5rem !important;
}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.custom-control-label {
    margin-bottom: 0;
}

.az-15-label {
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    margin-top: -4px;
    color: #302D2D;
}

.color-a {
    color: #007bff;
}

.divi-line {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border: solid #d3e8f3d1 1px;
    width: 100%;
}

.card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
}

.btn-for-payment {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.subscribe {
    border-radius: 4px !important;
    outline: none;
}

    .subscribe:focus {
        outline: none;
    }

.pt-3-1 {
    padding-top: 16px !important;
}

.table-content {
    background-color: unset !important;
}

.font-16 {
    font-size: 16px;
}

.height-font {
    height: 37px;
    font-size: 16px;
}

.padding-left-0 {
    padding-left: 0 !important;
}

.padding-right-0 {
    padding-right: 0;
}

.card-footer {
    padding: 12px 20px;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
}

    .card-footer:last-child {
        border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
    }

.margin-unset {
    margin: unset;
}

.pay-btn {
    background-color: #007bff !important;
    border-color: #007bff !important;
    width: 100%;
    padding: 6px !important;
    border-radius: 4px !important;
}

    .pay-btn:hover {
        opacity: 0.8;
    }

#a-go-back {
    position: absolute;
    top: 0;
    left: 15%;
    padding: 5px 20px;
    border-radius: 20px;
    color: white;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 2px 3px 7px #aaaaaa;
    background: #337ab7;
    cursor: pointer;
}

.a-contact-admin {
    position: absolute;
    top: 60px;
    left: 15%;
    padding: 5px 20px;
    border: 1px solid #666;
    border-radius: 20px;
    color: #666;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 2px 3px 7px #aaaaaa;
}

    .a-contact-admin:hover {
        border: 2px solid #666;
        font-weight: bold;
        text-decoration: none;
        color: #666;
    }

.d-header-for-unlogin {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #212531;
    height: 74px;
    z-index: 99999999;
}

.home-logo {
    margin-top: 16px;
    margin-left: 18px;
    width: 114px;
    height: 40px;
    padding-right: 15px;
    border-right: 2px solid #F4F9FC;
}

.d-h-desc {
    margin-top: 13px;
    margin-left: 18px;
}

.p-d-medic {
    text-align: left;
    font: normal normal 25px/33px azo-sans-web, sans-serif;
    letter-spacing: 0px;
    color: #F4F9FC;
    margin-bottom: 0;
}

.p-d-tutor {
    text-align: left;
    font: normal normal normal 12px/16px azo-sans-web, sans-serif;
    letter-spacing: 0px;
    color: #F4F9FC;
    margin-bottom: 0;
}

.d-open-profile-photo-content {
    width: 33px;
    float: left
}

.btnOpenProfilePicture {
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 11px;
    color: #ffffff;
    font-size: 10px;
    cursor: pointer;
}

    .btnOpenProfilePicture :hover {
        opacity: 0.8;
    }
    
    .d-default-avartar-content {
        width: 150px;
        margin-right: 25px;
    }

#img_default_avatar {
    width: 150px;
    border-radius: 75px;
}

#imgProfilePic {
    border-radius: 50%;
    border: 1px solid #848D92 !important;
    background-size: cover;
}

#imgOnlineProductPic {
    /* width: 150px; */
    /* height: 150px; */
    /* border-radius: 50%; */
    border: 1px solid #848D92 !important;
    background-size: cover;
}

.d-first-left-border {
    width: 1px;
    height: 300px;
    background-color: #178EDC;
    opacity: 0.32;
}

.m-0 {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

#lblFullname {
    color: #272626;
    font: Bold 25px azo-sans-web, sans-serif;
    line-height: 33px;
}

.second-row {
    padding-top: 0px;
    margin: 0px;
    margin-bottom: 3px;
}

.d-patient-id-conent {
    color: #5A5858;
    font: 400 17px azo-sans-web, sans-serif;
    padding-left: 5px !important;
    line-height: 13px;
}

.span-alert-new {
    font: bold 20px azo-sans-web, sans-serif;
    color: #DE3431;
}

.link-alert-new {
    color: #178EDC;
    cursor: pointer;
    font-size: 18px;
}

.btn-alertext-delete-new {
    color: #ff5858;
    font-size: 13px;
    cursor: pointer;
}

.lblStatic-new {
    font: 15px azo-sans-web, sans-serif;
    color: #FF5858 !important;
}

.text-right {
    text-align: right;
}

.btnOpenRightSidebar-new {
    color: #9a9ea4;
    float: right;
    padding: 2px 4px;
    background: #e4e5e7;
    border-radius: 50%;
    cursor: pointer;
}

.mh-200px {
    min-height: 200px;
}

.basic-details-new {
    width: 100%;
    overflow: hidden;
    height: 100%;
    margin-bottom: 36px;
}

.yes-company-first-new {
    display: none;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-right: -20px;
}

.yes-company-second-new {
    padding-top: 13px;
    display: none;
}

.pedit-new {
    width: 120px;
    margin-top: -15px;
    margin-bottom: -15px;
    height: 26px;
    display: none;
}

.no-company-first-new {
    font: 14px azo-sans-web, sans-serif;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-right: -20px;
}

.w-80px {
    width: 80px !important;
}

.pedit-second-new {
    width: 95px;
    margin-top: -15px;
    margin-bottom: -15px;
    padding: 2px 10px;
    height: 26px;
    border: 1px solid #CED4DA;
    display: none;
}

.birth-stype-new {
    font-size: 12px !important;
    height: 26px !important;
    width: 70px !important;
    border: 1px solid #CED4DA !important;
}

.pedit-third-new {
    margin-top: -5px;
    margin-bottom: -5px;
    margin-left: -25px;
    display: none;
    width: 80px;
    height: 26px;
    border: 1px solid #CED4DA;
}

.pr-0 {
    padding-right: 0px !important;
}

.no-company-content-first-new {
    border-left: 1px solid #a3d4f5;
    font: 14px azo-sans-web, sans-serif;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-right: -20px;
}

.pedit-fourth-new {
    margin-top: -5px;
    margin-bottom: -5px;
    display: none;
    width: 96px;
    height: 26px;
    padding: 2px 10px;
    border: 1px solid #178EDC;
}

.pt-14px {
    padding-top: 14px;
}

.emergency-title-new {
    color: #0f0f0f;
    font: bold 14px azo-sans-web, sans-serif;
}

.pt-12px {
    padding-top: 12px;
}

.h-10px {
    height: 10px;
}

.h-15px {
    height: 15px;
}

.mr-20px {
    margin-right: 20px;
}

.mr-auto {
    margin-left: auto;
}

.pedit-fifth-new {
    width: 95px;
    margin-top: -15px;
    margin-bottom: -15px;
    height: 26px;
    display: none;
    border: 1px solid #CED4DA;
}

.pt-13px {
    padding-top: 13px;
}

.pb-5px {
    padding-bottom: 5px;
}

.pt-5px {
    padding-top: 5px;
}

.pr-12px {
    padding-right: 12px;
}

.mt-13px {
    margin-top: 13px;
}

.line-height-7 {
    line-height: 0.7 !important;
}

.no-company-content-second-new {
    border-left: #a3d4f5 solid 1px;
    font: 14px azo-sans-web, sans-serif;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.mr--100px {
    margin-right: -100px;
}

.mr--70px {
    margin-right: -70px;
}

.pt-4px {
    padding-top: 4px;
}

.pt-17px {
    padding-top: 17px;
}

.body-details-new {
    width: 100%;
    overflow: hidden;
    height: 0px;
    margin-bottom: 0px;
}

.pedit-sixth-new {
    width: 60px;
    margin-top: -15px;
    margin-bottom: -15px;
    height: 26px;
    border: 1px solid #CED4DA;
    display: none;
}

.pedit-7-new {
    width: 15px;
    margin-top: 2px;
    margin-bottom: 0px;
    display: none;
}

.pedit-8-new {
    float: right;
    margin-top: -5px;
    margin-bottom: -5px;
    display: none;
    margin-right: 13px;
    padding: 2px 10px;
    height: 26px;
    border: 1px solid #CED4DA;
}

.xs-4-new {
    border-left: #a3d4f5 solid 1px;
    font: 14px azo-sans-web, sans-serif;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-right: -20px;
}

.xs-4-new-1 {
    border-left: #a3d4f5 solid 1px;
    font: 14px azo-sans-web, sans-serif;
    padding-left: 20px !important;
    padding-right: 20px !important;
    height: 200px;
    margin-right: -20px;
}

.pt-6px {
    padding-top: 6px !important;
}

.plus-icon-style  {
    font-size: 15px;
    color: #178EDC;
}

.xs-4-new-2 {
    border-left: #d9ecf9 solid 1px;
    font: 14px azo-sans-web, sans-serif;
    padding-left: 20px;
    padding-right: 20px;
    height: 200px;
}

.xs-4-new-3 {
    padding-left: 0px;
    margin-left: -10px;
}

.pedit-9-new {
    max-width: 65px;
    margin-top: -15px;
    margin-bottom: -15px;
    height: 26px;
    display: none;
    border-color: #CED4DA;
}

.pedit-19-new {
    max-width: 150px;
    margin-top: -15px;
    margin-bottom: -15px;
    height: 26px;
    display: none;
    border-color: #CED4DA;
}

.concession-card-expiry {
    font-size: 12px;
    height: 22px;
    border: 1px solid #CCCCCC;
}

.pb-10px {
    padding-bottom: 10px;
}

.lblBtnLink-new {
    color: #178edc !important;
    cursor: pointer;
}

.pedit-10-new {
    width: 95px;
    float: right;
    margin-top: -5px;
    margin-bottom: -5px;
    display: none;
    margin-right: 13px;
    padding: 2px 10px;
    height: 26px;
    border-color: #CED4DA;
}

.mr--80px {
    margin-right: -80px;
}

.f-z-10px {
    font-size: 10px;
}

.pl-10px {
    padding-left: 10px;
}

.pr-10px {
    padding-right: 10px;
}

.pt-16px {
    padding-top: 16px;
}

.f-w-nomal {
    font-weight: normal;
}

.peditp-new {
    margin-left: -25px;
    margin-top: -5px;
}

.pedit-11-new {
    width: 110px;
    box-shadow: none;
    border-radius: 12px;
    height: 26px;
    padding: 0px 5px;
    display: none;
    border-color: #CED4DA;
}

.patient-text-vtab-group-new {
    position: relative;
    margin-left: auto;
    text-align: right;
    min-height: 200px;
}

.w-17px {
    width: 17px;
    height: 17px;
}

.patient-vtab-line {
    position: absolute;
    top: 10px;
    right: 0;
    width: 1px;
    border-right: 2px solid #15A186;
    height: 165px;
}

.d-company-setting {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 7px;
}

.pedit-12-new {
    margin-right: auto;
    position: relative;
    display: none;
}

.btn-is-company-new {
    width: 16px;
    height: 16px;
    border-radius: 15px;
    border: 1px solid #178edc;
    display: inline-block;
    position: absolute;
    top: 4px;
    padding: 2px 2px;
    cursor: pointer;
}

.is-company-new {
    width: 10px;
    height: 10px;
    border-radius: 9px;
    background: #178edc;
}

.s-is-company-new {
    color: #0f0f0f;
    margin-left: 31px;
    font-family: azo-sans-web, sans-serif;
    font-size: 18px;
}

.s-active-state {
    margin-right: 8px;
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    color: #5A5858;
}

.active-circle {
    padding: 1px 2px;
    border: 1px solid;
    font-size: 10px;
    border-radius: 50%;
    line-height: 2;
    margin-left: 5px;
}

.btn-del-undel-patient-new {
    background: #ffffff;
    border-radius: 14px;
    border: solid 1px #14A086;
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ff5858;
    padding: 2px 5px;
    padding-left: 20px;
    cursor: pointer;
}

.btnPEdit-new {
    margin-left: 8px;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    padding: 6px 11px 5px 11px;
    background: #178EDC;
    border: none;
    cursor: pointer;
    color: #ffffff;
    border-radius: 15px;
    text-align: center;
}

.btnPCancel-new {
    margin-left: 8px;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    padding: 4px 26px 3px 26px;
    background: #ffffff;
    border: 1px solid #178EDC;
    cursor: pointer;
    color: #0f0f0f;
    border-radius: 15px;
    text-align: center;
    display: none;
}

.btnPUpdate-new {
    margin-left: 8px;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    padding: 5px 10px 4px 10px;
    background: #178EDC;
    border: none;
    cursor: pointer;
    color: #ffffff;
    border-radius: 15px;
    text-align: center;
    display: none;
}

.rightSidebar-new {
    height: calc(100% - 125px);
    position: absolute;
    top: 0px;
    right: 0px;
    width: 500px !important;
    margin-top: 113px;
    margin-right: 15px;
    padding: 0px !important;
    z-index: 11;
    border: 1px solid #333333;
    display: none;
}

.pt-10px {
    padding-top: 10px;
}

.cursor-pointer {
    cursor: pointer;
}

.color-ff5858 {
    color: #ff5858;
}

.btnUpdateRightSidebar-new {
    cursor: pointer;
    color: #ffffff;
    float: right;
    border-radius: 12px;
    height: 20px;
    padding: 2px 10px;
    margin-left: auto;
    margin-right: 3px;
    font-size: 12px;
    background: #178edc;
    border: #178edc;
}

.d-select-vtab-group-new {
    border: 1px solid #888888;
    border-radius: 10px;
    padding: 10px 15px;
    margin-top: 20px;
}

.l-select-vtab-group {
    font-weight: bold;
    font-family: azo-sans-web, sans-serif;
    font-size: 18px;
    color: #000;
}

.s-select-display-tab-new {
    font-weight: bold;
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
}

.ml--20px {
    margin-left: -20px;
}

.mr--20px {
    margin-right: -20px;
}

.patient-text-htab-group-new {
    margin-top: 21px;
    display: flex;
    justify-content: space-between;
    margin: 10px 0px;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.card-new {
    min-height: 450px;
    margin-top: 10px;
    padding: 0px !important;
}

.p-15px {
    padding: 15px;
}

.row-billing {
    margin: 0;
    margin-top: 10px;
}

.lblStatic-billing-new {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f0f0f !important;
    margin-bottom: 0px;
    margin-top: 2px;
}

.lblStatic-sec-billing-new {
    font-size: 15px !important;
    color: #0f0f0f !important;
} 
    
.col-xs-7-new {
    padding: 0px;
    display: flex;
    align-items: center;
}

.lblReferrer-new {
    font-size: 15px;
    color: #212121;
}

.btnReferrer-new {
    margin-left: auto;
    min-width: 60px;
    text-align: center;
    border: 1px solid #7087F2;
    background: #fff;
    border-radius: 15px;
    cursor: pointer;
    color: #0f0f0f;
    padding: 4px 10px;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    font-weight: 300;
}

    .btnReferrer-new:hover {
        border: 2px solid #7087F2;
        font-weight: 600;
    }

    .mt-11px {
        margin-top: 11px;
    }

.customer-modal-for-measurement {
    display: none;
    z-index: 1000;
    position: fixed !important;
    top: 102px !important;
    bottom: 1px !important;
    left: 81px !important;
    right: 1px !important;
    outline: 0 !important;
    background-color: rgba(0, 0, 0, .3);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px;
}

#add-measurementinfo-modal, #edit-measurementinfo-modal {
    display: none;
    z-index: 3000;
    position: fixed !important;
    top: 100px !important;
    bottom: 0px !important;
    left: 78px !important;
    right: 0px !important;
    outline: 0 !important;
    background-color: #5A58587A;
    overflow: hidden;
}

.new-modal-for-patient-page {
    display: none;
    z-index: 3000;
    position: fixed !important;
    top: 100px !important;
    bottom: 0px !important;
    left: 78px !important;
    right: 0px !important;
    outline: 0 !important;
    background-color: #5A58587A;
    overflow: hidden;
}

.modal-content-for-patient {
    width: 98%;
    height: calc(100vh - 128px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 15px;
}

.measurement-list-content {
    margin: 12px;
    height: calc(100vh - 127px);
    background: #f4f9fc;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
}

.add-measurement-content {
    width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 15px;
}

.p-measurement-title {
    font-family: azo-sans-web, sans-serif;
    font-weight: bold;
    font-size: 25px;
    color: #0F0F0F;
}

.p-add-measurement-title {
    margin-top: 10px;
    font-family: azo-sans-web, sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #0F0F0F;
    text-align: center;
}

.btn-patient-management {
    display: inline-block;
    background: #178EDC;
    padding: 6px 20px;
    color: white;
    font-size: 14px;
    border-radius: 16px;
    text-decoration: none;
    cursor: pointer;
}

.mb-20px {
    margin-bottom: 20px;
}

.w-0 {
    width: 0;
}

.d-add-second-measurement {
    margin-top: 30px;
    margin-left: 0;
    margin-right: 15px;
}

.btn-add-measurement-modal {
    position: absolute;
    right: 10px;
    top: 10px;
}

.d-first-measurement {
    padding-top: 11px;
    margin-left: 13px;
    margin-right: 13px;
    display: flex;
    justify-content: space-between;
}

#btn-new-measurement {
    display: inline-block;
    margin-top: 15px;
    margin-left: 13px;
    background: #178EDC;
    padding: 5px 11px;
    color: white;
    font-size: 14px;
    border-radius: 16px;
    cursor: pointer;
}

#btn-new-measurement:hover {
    opacity: 0.8;
}

.d-second-measurement {
    border: 1px solid #c8c8c8;
    border-radius: 15px;
    background: #fff;
    margin: 13px;
    min-height: 450px;
    padding: 10px;
}

.d-history-content {
    overflow: auto;
    min-height: calc(100vh - 270px);
    max-height: calc(100vh - 270px);
    margin: 13px;
}

.overflow-auto {
    overflow: auto;
}

.table-measurement-list th {
    color: #3A72BF;
    font-family: azo-sans-web, sans-serif;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    padding: 7px 20px;
    border-bottom: 1px solid #707070;
}

.table-all-history-list th {
    color: #FFFFFF;
    font-family: azo-sans-web, sans-serif;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    padding: 7px 20px;
    background: #3A72BF;
    text-align: left;
    position: sticky;
    top: 0px;
}

.history-tbody tr {
    border-bottom: 1px solid #c8c8c8;
}

.history-tbody td {
    padding: 8px 20px;
}

.white-space-nowrap {
    white-space: nowrap;
    text-align: left;
}

.min-h-200 {
    min-height: 200px;
}

.d-inline-block {
    display: inline-block;
}

.btn-close-measurement {
    padding: 3px 6px;
    background: #d9534f;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
    cursor: pointer;
    border: 1px solid #d43f3a;
    font-size: 12px;
}

    .btn-close-measurement:hover {
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925;
    }

.btn-edit-measurement {
    position: absolute;
    top: 20px;
    left: 1px;
    padding: 2px 5px;
    border: 1px solid #ccc;
    font-size: 11px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
}

    .btn-edit-measurement:hover {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

.table-measurement-list td {
    font-family: azo-sans-web, sans-serif;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    padding: 22px 20px;
}

.btn-upload {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    width: 98px;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
}

    .btn-upload:hover {
        opacity: 0.8;
    }
    
.upload-img-content {
    border-radius: 50%;
    display: inline-block;
    box-shadow: 2px 2px 5px #999999;
}

.btn-upload-wrapper {
    background-color: #ec971f;
    border-color: #d58512;
}

.btn-upload-all {
    background-color: #178EDC;
    border-color: #178EDC;
}

.btn-delete-image {
    background-color: #FF5858;
    border-color: #FF5858;
}

.modal-content-for-upload-profile {
    background: #FAFDFF;
    width: 338px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    border: 2px solid #3A72BF;
    border-radius: 16px;
    box-shadow: 0px 3px 6px #00000057;
}

.p-upload-profile-title {
    font-size: 20px;
    font-weight: bold;
    padding-top: 10px;
    margin-left: 20px;
}

.btn-close-upload-modal {
    position: absolute;
    top: 10px;
    right: 14px;
    font-weight: 100;
    font-size: 16px;
    color: #000;
}

.mt-40px {
    margin-top: 40px;
}

.img-upload-profile {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

#booking-count {
    margin-right: 16px;
}

#booking-detail-card-list-content {
    min-height: 180px;
    max-height: 600px;
    overflow-y: auto;
    width: 100%;
}

#imgProfileFile {
    display: none !important;
}

#lblUploadMessage  {
    display: none;
}

.d-manage-files {
    margin-bottom: 10px;
}

#addContactModal {
    z-index: 1000 !important;
}

.modal-content-new {
    background: #FAFDFF;
    border: 2px solid #3A72BF;
}

.contact-modal-title {
    color: black;
    font-weight: bold;
    font-size: 20px;
}

.btn-close-new {
    font-size: 25px;
}

#btnAddContact {
    background-color: #178EDC;
    border-color: #178EDC;
    color: white;
}

#btnAddContact:hover {
    opacity: 0.8;
}

.w-420px {
    width: 420px;
}

.f-w-bold {
    font-weight: bold;
}

.fleshy-message-title {
    margin-left: 22px;
    margin-top: 23px;
    font-size: 17px;
    font-weight: bold;
    color: black;
}

.d-flesy-first {
    display: flex;
    justify-content: space-between;
    padding: 15px 22px;
}

.btn-fleshy {
    background: #3A72BF;
    padding: 5px 25px;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
}

    .btn-fleshy:hover {
        text-decoration: none;
        color: white;
        opacity: 0.8;
    }
    
.d-fleshy-second {
    display: flex;
    padding: 10px 22px;
    padding-top: 0;
}

.d-fleshy-third {
    display: flex;
    justify-content: space-between;
    padding: 15px 22px;
}

#flesy-message-box {
    resize: none;
}

.grid-condition-first {
    display: flex;
    justify-content: space-between;
    padding-right: 50px;
}

.condition-line {
    height: 1px;
    margin: 10px;
    margin-left: 15px;
    margin-right: 50px;
    background: #707070;
}

.condition-day, .condition-month, .condition-year {
    margin: 5px;
}

.mt-25px {
    margin-top: 25px;
}

.ml-15px {
    margin-left: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.d-custorm-first {
    height: 2px;
    margin: 18px 0px;
    background: #8ec8ee;
}

.lblStatic-thirth-billing-new {
    font-size: 18px;
    font-weight: 600;
    color: #212121;
}

.lblStatic-ten-billing-new {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0F0F0F !important;
}

.mt-3 {
    margin-top: 3px;
}

.billing-dropdown-first {
    cursor: pointer;
    padding: 4px 15px;
    border: 1px solid #7087F2;
    font-family: azo-sans-web, sans-serif;
    background: #fff;
    color: #6eb8e9;
    border-radius: 15px;
    font-weight: lighter;
    font-size: 12px;
    margin-bottom: 6px;
    display: block;
    width: 100%;
    text-align: center;
}

.billing-method-dropdown-new {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 9999;
    background: white;
    padding-inline-start: 0;
    list-style: none;
    border: 1px solid #7087F2;
    border-radius: 15px;
    text-align: center;
}

.selected-card-0 {
    color: #15A186 !important;
    font-weight: 300;
    font-size: 12px;
}

#selectedCard {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #0F0F0F !important;
}

.font-13 {
    font-size: 13px;
}

.add-new-billing-option {
    margin-left: auto;
    min-width: 90px;
    border: 1px solid #178EDC;
    border-radius: 14px;
    padding: 5px 14px;
    background: #178EDC;
    color: white;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    cursor: pointer;
}

    .add-new-billing-option:hover {
        opacity: 0.8;
    }


.btn-additional-bank-info {
    background: #FF5858 !important;
    border: none !important;
}
.edit-billing-medicare {
    border: 1px solid #7087f2;
    width: 90px;
    text-align: center;
    border-radius: 15px;
    height: 30px;
    padding: 5px 10px;
    background: white;
    color: black;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
}

.edit-billing-medicare:hover {
    font-weight: bold;
    border-width: 2px;
}

.dropdown-menu-item-start {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.dropdown-menu-item-end {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
} 

.lblStatic-fourth-billing-new {
    font-size: 15px !important;
    color: #0f0f0f !important;
}

.d-billing-line-first {
    height: 1px;
    margin: 15px 0px;
    background: #a3d4f5;
}

.lblValue-first {
    font-size: 15px;
    color: #9A9EA4;
}

.replace-referral-billing {
    border: 1px solid #7087f2;
    border-radius: 16px;
    padding: 4px 16px;
    background: #7087f2;
    color: white;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
}

.lblStatic-fifth-billing-new {
    font-size: 15px;
    color: #ff5858;
}

.col-communication-1 {
    display: flex;
    justify-content: space-between;
    padding: 0px !important;
    align-items: center;
}

.communication-additional-btn {
    color: #fff;
    background: #178edc;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    border-radius: 14px;
    padding: 4px 14px;
    cursor: pointer;
}

.w-calc-10 {
    width: calc(100% - 10px);
}

.btn-referer-additional-cancel {
    border: 1px solid #ff5858;
    border-radius: 15px;
    font-family: azo-sans-web, sans-serif;
    font-size: 13px;
    padding: 5px 14px;
    background: white;
    color: #ff5858;
    cursor: pointer;
}

    .btn-referer-additional-cancel:hover {
        border-width: 2px;
        font-weight: bold;
    }
    
.btn-referer-additional-confirm {
    border-radius: 15px;
    background: #3A72BF;
    font-family: azo-sans-web, sans-serif;
    font-size: 13px;
    padding: 3px 14px;
    color: #fff;
    margin-left: auto;
    cursor: pointer;
    border: 1px solid #3A72BF;
}

.communication-row-first {
    margin: 0px;
    margin-top: 10px;
    background: #9dcff0;
    height: 1px;
    border-bottom: solid 1px #cfe7f8;
}

.lblStatic-sixth-billing-new {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f0f0f !important;
}

.lblStatic-seventh-billing-new {
    font-size: 12px;
    font-weight: 600;
    color: #3da0dc;
}

#input_creditcard_type {
    outline: none;
    display: none;
}

.lblStatic-eighth-billing-new {
    font-size: 14px !important;
    font-weight: 600 !important; 
    color: #ff5858 !important;
}

#btnClaimantIsNotAPatient {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    border: 1px solid #178edc;
    padding: 2px;
    position: absolute;
    top: -12px;
    left: 8px;
    cursor: pointer;
}

.btn-update-bank-account {
    display: none;
    background: #14A086;
    min-width: 90px;
    padding: 6px 19px;
    border-radius: 15px;
    color: #FFFFFF;
    font-size: 13px;
    cursor: pointer;
}

    .btn-update-bank-account:hover {
        opacity: 0.8;
    }
    
#circleClaimantIsNotAPatient {
    display: none;
    width: 9px;
    height: 9px;
    border-radius: 9px;
    background: #178edc;
}

#claimantDOBdatepicker {
    border: 1px solid #ccc;
    width: 50px;
    padding: 0px 4px;
    border-radius: 12px;
}

.input-group-addon-billing {
    height: 20px;
    padding: 0px;
    border: none;
    background: none;
}

.h-20 {
    height: 20px;
}

.ml-10 {
    margin-left: 10px !important;
}

#claimantMedicareCardNbredit {
    display: none;
    border-radius: 5px;
}

#claimantMedicareCardFamilyNbredit {
    display: none;
    width: 30px;
    border-radius: 5px;
}

.referrer-list-modal-new {
    display: none;
    padding: 110px 5px 5px 0;
    z-index: 1000;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    outline: 0 !important;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    overflow-x: hidden;
    overflow-y: auto;
}

.referrer-list-content-new {
    position: relative;
    width: 100%;
    height: 100%;
}

.referrer-list-first-content-new {
    position: absolute;
    right: 0;
    min-height: 100%;
    width: 500px;
    background: #f4f9fc;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.referrer-list-btn-content {
    text-align: right;
    margin: 10px 12px 0 0;
}

.referrer-panel-new {
    border: 1px solid #c8c8c8;
    border-radius: 15px;
    background: #fff;
    margin: 10px;
    min-height: 200px;
    padding: 10px;
}

.btn-dlg-referrer-new {
    margin-left: auto;
    border-color: #178edc;
    background: #178edc;
    border-radius: 15px;
    cursor: pointer;
    color: #fff;
    padding: 5px 16px;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    font-weight: 300;
}

.btn-referrer-remove-new {
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    border: 1px solid #ff5858;
    border-radius: 15px;
    padding: 5px 18px;
    background: white;
    color: #ff5858;
    cursor: pointer;
}

    .btn-referrer-remove-new:hover {
        font-weight: bold;
        border-width: 2px;
        color: #ff5858;
        text-decoration: none;
        opacity: 0.9;
    } 
    
.lblStatic-nineth-billing-new {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0F0F0F !important;
}

.btn-referrer-letters-send-add-new {
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    padding: 4px 15px;
    color: white;
    border-radius: 15px;
    background: #133A68;
    float: right;
    cursor: pointer;
}

.billing-method-content {
    border: 1px solid #c8c8c8;
    border-radius: 15px;
    background: #fff;
    margin: 10px;
    min-height: 500px;
    padding: 10px;
}

.referrer-dropdown-first-new {
    cursor: pointer;
    padding: 5px 15px;
    border: 1px solid #5bafe6;
    font-family: azo-sans-web, sans-serif;
    background: #fff;
    color: #6eb8e9;
    border-radius: 15px;
    font-weight: lighter;
    font-size: 15px;
    margin-bottom: 6px;
}

.billing-medicare-card-name-new {
    margin-left: 1px;
    border-radius: 5px;
    padding: 2px 10px;
    font-family: azo-sans-web, sans-serif;
    font-size: 15px;
    width: 230px;
    height: 26px;
    outline: none;
}

.billing-medicare-card-number-new {
    margin-left: 1px;
    padding: 2px 2px;
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    width: 17px;
    height: 26px;
    outline: none;
    border-radius: 5px;
}

#billing_medicare_card_number10 {
    height: 24px;
    width: 40px;
    border-radius: 2px;
    vertical-align: top;
    padding: 2px 2px;
    outline: none;
}

.additional-billing-option {
    background: #02AAB0 !important;
    color: white !important;
    border-color: #02AAB0 !important;
}

#ddlOrganisation {
    width: 230px;
    outline: none;
}

.border-billing-input {
    border: 1px solid #178EDC !important;
}

.ddl-billing-new {
    font-size: 15px;
    border-radius: 14px;
}

.d-billing-line-second {
    height: 1px;
    margin: 20px 5px;
    background: #eee;
}

.remove-billing-option {
    border-radius: 15px;
    border: 1px solid #ff5858;
    color: #ff5858;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
    background: #fff;
    height: 31px;
    padding: 5px 16px;
}

    .remove-billing-option:hover {
        font-weight: bold;
        border-width: 2px;
    }
    
.add-billing-option {
    border-radius: 15px;
    border: 1px solid #7087F2;
    color: #0F0F0F;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
    background: #fff;
    height: 31px;
    padding: 5px 16px;
}

    .add-billing-option:hover {
        font-weight: bold;
        border-width: 2px;
    }
    
#leftPanelReferrerListModal {
    display: none;
    position: absolute;
    right: 515px;
    min-height: 400px;
    width: 800px;
    background: #f4f9fc;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.margin-5-10 {
    margin: 5px 10px 0 0;
}

.p-0-10 {
    padding: 0 10px;
}

.referrer-list-title-new {
    font-family: azo-sans-web, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #0F0F0F;
}

.d-billing-line-third {
    margin-left: 10px;
    width: 300px;
    height: 1px;
    background: #c8c8c8;
}

.txtSearchFullName {
    border-radius: 17px;
    outline: none;
    border: 1px solid #178edc;
    padding: 7px 15px;
    width: 300px;
    margin: 10px;
    font-size: 14px;
    height: 34px;
}

.btn-billing-search {
    position: absolute;
    top: -5px;
    right: 14px;
    width: 25px;
    height: 25px;
    padding: 4px 7px;
    border-radius: 15px;
    background: #3A72BF;
    color: #fff;
    font-size: 13px;
}

.btn-billing-search-2 {
    position: absolute;
    top: -5px;
    right: 4px;
    width: 25px;
    height: 25px;
    padding: 4px 6px;
    border-radius: 15px;
    background: #3A72BF;
    color: #fff;
    font-size: 13px;
}

.border-red {
    border-color: red !important;
}

#warning-for-mobil {
    display: none;
    color: red;
}

.btn-disable {
    border-color: grey;
    pointer-events: none;
}

.divLiveSearch-billing {
    display: none;
    position: absolute;
    background: #FFFFFF;
    z-index: 1000;
    top: 28px;
    left: -311px;
    right: 20px;
    width: 300px;
    padding: 5px 0;
    border-radius: 10px;
}

.referrer-list-second-content-new {
    border: 1px solid #c8c8c8;
    border-radius: 15px;
    background: #fff;
    margin: 10px;
    padding: 10px;
}

.referrer-pagenation {
    margin-right: 10px;
    cursor: pointer;
}

.ddl-date {
    border-radius: 15px !important;
}

.add-allocate-referrer {
    border-color: #9A9EA4 !important;
    background: #9A9EA4 !important;
    pointer-events: none;
}

#ddlDVACardType {
    width: 50%;
    outline: none;
}

#referralInfoModal {
    display: none;
    padding: 110px 5px 5px 0;
    z-index: 1000;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    outline: 0 !important;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    overflow-x: hidden;
    overflow-y: auto;
}

.referrer-info-content-first {
    position: relative;
    width: 100%;
    height: 100%;
}

.referrer-info-content-second {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    background: #F4F9FC;
    border-radius: 19px;
}

.referrer-info-content-third {
    border: 1px solid #5A5858;
    border-radius: 18px;
    background: #fff;
    margin: 10px;
    min-height: 200px;
    padding: 10px;
}

#ReferralInfoConfirm {
    margin-left: auto;
    border-color: #178edc;
    background: #178EDC;
    border-radius: 15px;
    cursor: pointer;
    color: #fff;
    padding: 4px 14px;
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    font-weight: 300;
}

#ReferralInfoConfirm:hover {
    opacity: 0.8;
}

#lblCombinedEPCRemainingThisYear {
    color: #14A086;
    font-size: 18px;
}

.h-250px {
    height: 250px;
}

.referrerAdditionalEmailsEditUpdateBtn {
    margin-left: auto;
}

#creditcard_type {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #0F0F0F !important;
}

#creditcard_view {
    border: 1px solid #7087f2;
    width: 77px;
    text-align: center;
    border-radius: 15px;
    padding: 3px 10px;
    background: white;
    color: black;
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
}

    #creditcard_view:hover {
        font-weight: bold;
        border-width: 2px;
    }
    
.btn-additional-for-confirm {
    background: #14A086 !important;
    color: #fff !important;
    border: none !important;
}

#txtCardHolderName {
    width: 100%;
    height: 34px;
}

.pt-8 {
    padding-top: 8px;
}

.b-none {
    border: none !important;
}

.helper-text-billing {
    color: #e93143;
    font-size: 12px;
    height: 12px;
}

.hosted-field-invalid {
    border: 1px solid #e93143;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233,49,67, 0.8);
}

#checkBlueSnap {
    color: #e93143 !important;
    font-weight: normal !important;
}

.p-10-0 {
    padding: 10px 0 !important;
}

#btn-bluesnap-confirm {
    background: #14A086;
    min-width: 70px;
    padding: 3px 19px;
    border-radius: 15px;
    color: #FFFFFF;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

.booking-content-first {
    height: 34px;
    margin-top: 17px;
    border: 1px solid #5A5858;
    border-radius: 26px;
    display: flex;
    align-items: center;
}

#clinic_all {
    float: right;
    font-size: 20px;
    margin-left: 3px;
    background: #178edc;
    padding-left: 6px;
    padding-right: 7px;
    border-radius: 50%;
    text-align: center;
    height: 27px;
    width: 27px;
}

.booking-content-2 {
    display: inline;
    position: relative;
    width: 0px;
    height: 0px;
}

#clinic_all_panel {
    overflow: hidden;
    overflow-y: auto;
    height: 225px;
}

    #clinic_all_panel::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
    }

    #clinic_all_panel::-webkit-scrollbar {
        background-color: #fff;
        border: 1px solid #9A9EA47A;
        width: 6px;
    }

    #clinic_all_panel::-webkit-scrollbar-thumb {
        background-color: #178EDC;
        border-radius: 5px;
    }

#clinic_update {
    display: inline-block;
    background: #178edc;
    border-radius: 14px;
    width: 250px;
    padding: 3px 12px;
    font-size: 13px;
    font-family: azo-sans-web, sans-serif;
    font-weight: 300;
    color: #fff;
    cursor: pointer;
}

#clinic_select_panel {
    z-index: 1000;
    background: #f1f9ff;
    position: absolute;
    left: -26px;
    top: 23px;
    width: 300px;
    min-height: 20px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
    display: none;
    border: 1px solid #3A72BF;
}

.clinic_select_content {
    white-space: nowrap;
    padding: 0px;
    width: 160px;
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0F0F0F;
    margin-bottom: 0px;
    margin-left: 8px;
    text-align: center;
    cursor: pointer;
}

.w-338 {
    width: 470px;
}

.d-clinic-second {
    padding: 10px 22px;
    padding-top: 0;
}

.d-clinic-third {
    padding: 15px 22px;
    text-align: center;
}

.click-checked-mark {
    font-size: 20px;
    padding: 1px;
    color: #3A72BF;
}

#book_appointment {
    width: 120px;
    margin-left: 13px;
    cursor: pointer;
    border-radius: 26px;
    padding: 4px 12px;
    margin-right: 2px;
    font-size: 14px;
    background: #178edc;
    color: #fff;
    text-align: center;
}

.status-width {
    width: 156px !important;
}

#clinic_select {
    margin-left: 13px;
    height: 20px;
    padding: 0px;
    color: #0F0F0F;
    cursor: pointer;
}

.booking-search-content {
    margin-left: auto;
    margin-right: 10px;
    height: 33px;
    border: 0.5px solid #5A5858;
    border-radius: 26px;
    width: 290px;
    display: flex;
    align-items: center;
    margin-top: 17px;
    position: relative;
}

.booking-searn-from-text {
    position: absolute;
    font-family: azo-sans-web, sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #0F0F0F;
    top: -7px;
    padding: 0px 3px;
    left: 15px;
    z-index: 1;
    background: #ffffff;
}

.booking-searn-to-text {
    position: absolute;
    font-family: azo-sans-web, sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #0F0F0F;
    top: -7px;
    padding: 0px 3px;
    left: 115px;
    z-index: 1;
    background: #ffffff;
}

.input-group-addon-booking-1 {
    height: 20px;
    padding: 0px;
    border: none;
    background: none;
    cursor: pointer;
}

.booking-dropdown-icon {
    height: 20px;
    padding: 0px;
}

#booking-list-search-btn {
    cursor: pointer;
    color: #fff;
    background: #178edc;
    border-radius: 16px;
    padding: 4px 12px;
    margin-left: auto;
    margin-right: 2px;
    font-size: 13px;
}

#booking-list-search-btn:hover {
    opacity: 0.8;
}

.lbl-booking-appointment {
    font-size: 12px !important;
    color: #212121 !important;
}

.lblstatic-appointment {
    font-size: 12px !important;
    color: #3A72BF !important;
    min-width: 80px;
}

.mt-2px {
    margin-top: 2px;
}

.booking-setting-page-colums {
    width: 115px;
    position: relative;
}

.booking-settings {
    border: 1px solid #0F0F0F;
    font-size: 14px;
    text-align: center;
    color: #0F0F0F;
    border-radius: 16px;
    padding: 1px;
    cursor: pointer;
}

.page-columns-drop-content {
    position: absolute;
    top: 27px;
    display: none;
    z-index: 9999;
    background: #FFF;
}

.page-colums-drop-list {
    padding-inline-start: 0;
    list-style: none;
    width: 115px;
    border: 1px solid #3A72BF;
    border-radius: 8px;
    cursor: pointer;
}

.li-page-colums {
    padding-top: 5px;
    padding-left: 10px;
    color: #0F0F0F;
}

.li-page-colums:first-of-type {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.li-page-colums:last-of-type {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

    .li-page-colums:hover {
        background: #ccc;
    }

.booking-setting-status {
    width: 156px;
    position: relative;
    display: inline-block;
}

.booking-clock-btn {
    position: absolute;
    top: -5px;
    right: -13px;
    color: #9A9EA4;
    cursor: pointer;
    margin-right: 0px;
    font-size: 17px;
    background: #e9f2fb;
    padding: 0 4px;
    border-radius: 50%;
}

.booking-clock-dropdown {
    display: none;
    position: absolute;
    right: -11px;
    padding-inline-start: 0;
    list-style: none;
    z-index: 9999;
    background: #fff;
    border: 1px solid #3A72BF;
    text-align: center;
    width: 210px;
    border-radius: 13px;
    border-top-right-radius: 0;
    padding: 7px;
}

.booking-clock-set-btn {
    display: block;
    background: #262626;
    padding: 3px 38px;
    color: white;
    border-radius: 19px;
}

.booking-clock-weel {
    display: inline;
    position: relative;
}

.booking-dropdown-item {
    padding: 3px;
    cursor: pointer;
}

    .booking-dropdown-item:hover {
        opacity: 0.8;
    } 
    
#booking-list-content {
    margin-top: 70px;
}

.booking-list {
    border: 1px solid #70707087;
    border-radius: 9px;
    padding: 18px 14px;
    margin-top: 10px;
    position: relative;
}

.lbl-booking-state {
    background: #ECF4FF;
    padding: 3px 10px;
    border-radius: 26px;
    color: #3A72BF;
    margin-left: 10px;
}

.booking-bottom-content {
    position: absolute;
    bottom: 0;
    right: 14px;
    width: calc(66.666% - 30px);
}

#lblBookingFiles {
    font-size: 32px;
}

.i-booking-sheet {
    font-size: 27px;
    color: #3A72BF;
}

.invalid-referrer-info {
    color: red;
}

#remove-referral-info {
    display: none;
}


.invalid-edit-referrer-list {
    padding-inline-start: 16px;
}

.booking-detail-card {
    min-height: 163px;
    display: flex;
    padding: 14px 14px 0 10px;
    border: solid 1px #70707087;
    border-radius: 10px;
    margin-bottom: 10px;
}

.booking-card-left-content {
    width: 320px;
    border-right: solid 1px #5A5858;
    margin-bottom: 10px;
    padding-right: 10px;
}

.lbl-booking-first-new {
    font-weight: bold;
    font-family: azo-sans-web, sans-serif;
    font-size: 15px;
    color: #212121;
}

.lbl-booking-second-new {
    font-weight: 300;
    font-family: azo-sans-web, sans-serif;
    font-size: 15px;
    color: #212121;
}

.booking-card-right-content {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 300px);
    padding-left: 10px;
    margin-bottom: 5px;
}

.booking-card-right-first-content {
    width: 558px;
    margin-bottom: 10px;
}

.s-booking-payment-type {
    position: absolute;
    top: 0px;
    right: -105px;
    font-size: 12px;
    padding: 1px 4px 1px 3.5px;
    border-radius: 15px;
    background: #178edc;
    color: #fff;
}

.d-booking-payment-type {
    margin-left: 8px;
    border: 1px solid #178EDC;
    border-radius: 16px;
    padding: 2px 6px 1px 6px;
    font-family: azo-sans-web, sans-serif;
    font-size: 15px;
    width: 100px;
    float: right;
    text-align: left;
    cursor: pointer;
}

.btn-booking-action-dropdown {
    cursor: pointer;
    padding: 5px 15px;
    border: none;
    font-family: azo-sans-web, sans-serif;
    background: #337ab7;
    color: #fff;
    border-radius: 15px;
    font-weight: lighter; 
    font-size: 12px; margin-bottom: 6px;
}

.booking-action-dropdown-list {
    display: none; 
    position: absolute;
    padding-inline-start: 0;
    list-style: none;
    text-align: left;
    width: 180px;
    top: 25px;
    background: #FAFDFF;
    border: 1px solid #3A72BF;
    border-radius: 8px;
    z-index: 999999;
}

.last-booking {
    top: -152px !important;
}


.tab-hover-animation {
    background-color: #3a72bf;
    transition: all 250ms ease 0s;
    transform: scale(1);
}

.pl-13px {
    padding-left: 13px;
}

.w-200px {
    width: 200px;
}

#history-search-start, #history-search-end {
    border: 1px solid #ccc;
    width: 100px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 28px;
}

.history-search-date {
    border: 1px solid #ccc;
    padding: 6px;
    border-left: none;
    font-size: 12px;
    vertical-align: text-top;
}

.history-search-date-close {
    border: 1px solid #ccc;
    padding: 6px;
    border-left: none;
    font-size: 12px;
    vertical-align: text-top;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#btn-history-search-date {
    margin-left: 10px;
    height: 28px;
    margin-top: 10px;
    padding: 5px 10px;
    background: #3A72BF;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

#btn-history-search-date:hover {
    opacity: 0.8;
}

#d-history-date-search-content {
    display: none;
}

.history-pagenation-list {
    display: flex;
    list-style: none;
    font-size: 15px;
}

.li-history-pagenation {
    padding: 0 6px;
    margin: 2px;
    border-radius: 50%;
}

    .li-history-pagenation:hover {
        cursor: pointer;
        background: #e8ecfd;
    }

.history-pagenation-prev, .history-pagenation-after {
    cursor: pointer;
    margin: 2px;
}

.focus-pagenation {
    background: #d0d8fb !important;
}

#selected-history-title {
    font-size: 17px;
    font-weight: bold;
    color: #000;
    padding-right: 10px;
}

.edit-adminnote-text {
    width: 100%;
    border: 1px solid #CCCCCC;
}

.adminnote-edit-data {
    display: none;
}

.select-adminnote {
    background-color: #FFFFFF;
    background-image: none;
    margin: 4px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 8%) inset;
    color: #555555;
    font-size: 12px;
    height: 26px;
    line-height: 1.42857;
    padding: 4px 6px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.lnk-admin-update {
    padding: 7px;
    cursor: pointer;
}

.lnk-admin-cancel {
    padding: 7px;
    cursor: pointer;
}

.lnk-adminnote-edit {
    cursor: pointer;
}

.lnk-adminnote-edit:hover {
    opacity: 0.8;
}

.lnk-adminnote-delete {
    cursor: pointer;
}

.lnk-adminnote-delete:hover {
    opacity: 0.8;
}

#lnk-insert {
    cursor: pointer;
}

.clinic-select-content {
    padding: 3px 5px;
} 

.clinic-select-content:hover {
    background: #d7defb;
    cursor: pointer;
}

#history-search-surname {
    height: 28px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    outline: none;
}

#history-search-clear-surname {
    border: 1px solid #ccc;
    padding: 6px;
    border-left: none;
    font-size: 12px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
}

.surname-list-content {
    position: absolute;
    width: 100%;
    z-index: 9999;
    background: #fff;
}

.search-surname-list {
    margin-top: 5px;
    padding-inline-start: 0;
    list-style: none;
    border: 1px solid #3A72BF;
    border-radius: 8px;
    cursor: pointer;
}

#outstanding-invoice {
    margin-left: 10px;
    font-size: 15px;
}

.pt-60px {
    padding-top: 60px;
}

.col-12-new {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 15px;
    font-family: azo-sans-web, sans-serif;
    padding-right: 0px;
    color: #000;
}

#showAdminNote {
    color: #1782ec;
    cursor: pointer;
}

    #showAdminNote img {
        width: 20px;
        vertical-align: text-bottom;
    }

#adminnote-more-info {
    color: #F8CB4F;
    font-size: 21px;
    cursor: pointer;
    
}

#div-adminnote-more-info {
    display: none;
    position: absolute;
    top: 26px;
    right: 21px;
    font-weight: 300;
    border: 1px solid #F8CB4F;
    border-radius: 8px 0 8px 8px;
    padding: 5px;
    width: 250px;
    background: #fff;
    z-index: 999;
}

.lnk-action-btn {
    padding: 3px 7px !important;
}

.lnk-action-btn:hover {
    background: none !important;
}

.color-green {
    color: green;
}

.color-red {
    color: red;
}

.border-red {
    border-color: red;
}

.dropdown-send-form {
    top: 22px;
    display: none;
    padding: 0;
}

#lnkSendForm:hover {
    background: none;
}

#lnkFilledForm:hover {
    background: none;
}

.btn-print-retrive {
    padding: 4px 10px;
    background: #337ab7;
    color: #fff;
    border-radius: 15px;
}

    .btn-print-retrive:hover {
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }

.notify-change-result {
    display: none;
    position: fixed;
    top: 108px;
    left: 50%;
    transform: translateX(-30%);
    padding: .75rem;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);
    border-radius: .25rem;
    z-index: 99999;
    background: #fff;
}

.notify-success-icon {
    color: green;
    font-size: 16px;
}

#toOldSite {
    color: #337ab7;
    cursor: pointer;
    margin-right: 7px;
    font-size: 16px;
    vertical-align: sub;
}

#booking-count-content {
    display: none;
    text-align: right;
}

.btn-booking-reverse {
    cursor: pointer;
    padding: 5px 15px;
    border: none;
    font-family: azo-sans-web, sans-serif;
    background: #337ab7;
    color: #fff;
    border-radius: 15px;
    font-weight: lighter;
    font-size: 12px;
    margin-bottom: 6px;
}

.highlight-booking {
    background-color: #f0f9ff;
}

.allergi-add-content {
    margin-left: 15px;
    margin-top: 15px;
    width: 20%;
}

.allergies-table-content {
    padding: 15px;
}

.table-alergies {
    width: 100%;
}

    .table-alergies th {
        color: #FFFFFF;
        font-family: azo-sans-web, sans-serif;
        font-size: 13px;
        font-weight: 300;
        white-space: nowrap;
        padding: 7px 20px;
        background: #3A72BF;
        text-align: left;
        position: sticky;
        top: 0px;
    }

.deleted-show-label {
    margin-top: 16px;
    margin-left: 15px;
}

.allergies-tbody td {
    padding-left: 20px;
}

.ml-20px {
    margin-left: 20px;
}

#add-new-allergies {
    cursor: pointer;
}

#cancel-new-allergies {
    cursor: pointer;
}

#txtSymptoms {
    border: 1px solid #ccc;
    border-radius: 3px;
}

.lnkEdit {
    cursor: pointer;
}

.btnDelete {
    cursor: pointer;
}

.hidden_item {
    display: none;
}

.voucher-delete {
    display: block;
    border: 1px solid #ff5858;
    padding: 3px 0;
    border-radius: 34px;
    color: #ff5858;
    
    cursor: pointer;
}

    .voucher-delete:hover {
        border-width: 2px;
        text-decoration: none;
        color: #ff5858;
    }

.hidden-voucher {
    color: grey;
    display: none;
}

.show-voucher-content {
    width: 16px;
    height: 16px;
    border-radius: 15px;
    border: 1px solid #178edc;
    display: inline-block;
    padding: 2px 2px;
    cursor: pointer;
}

#show-voucher {
    width: 10px;
    height: 10px;
    border-radius: 9px;
    background: #178edc;
}

.show-voucher-list-content {
    display: flex;
    margin: 15px 10px;
    cursor: pointer;
}

#show-has-future-booking {
    margin-bottom: 10px;
    color: red;
}


.is-patient-arrived {
    color: #15A186;
    font-size: 15px;
    font-weight: bold;
}

.main-container {
    padding: 70px 100px;
    background: #F6F9FB;
    font-family: 'azo-sans-web, sans-serif';
    font-size: 14px;
    height: calc(100vh - 120px);
}

.create-template-content {
    background: #FFFFFF;
    display: flex;
    padding: 60px;
    font-family: azo-sans-web, sans-serif;
}

.complex-note-content {
    width: 45%;
}

.simple-note-content {
    width: 50%;
    margin-left: 5%;
    font-family: azo-sans-web, sans-serif;
}

.create-note-title {
    font-weight: bold;
    font-size: 25px;
    color: #0F0F0F;
    font-family: azo-sans-web, sans-serif;
}

.create-new-btn {
    font-family: azo-sans-web, sans-serif;
    color: #fff;
    font-size: 12px;
    padding: 5px 15px;
    cursor: pointer;
    background: #337ab7;
    border-radius: 16px;
}

    .create-new-btn:hover {
        text-decoration: none;
        color: #fff;
        opacity: 0.8;
    }

.action-template-btn {
    margin-left: 5px;
    font-family: azo-sans-web, sans-serif;
    color: #fff;
    font-size: 12px;
    padding: 5px 15px;
    cursor: pointer;
    background: #337ab7;
    border-radius: 16px;
}

    .action-template-btn:hover {
        text-decoration: none;
        color: #fff;
        opacity: 0.8;
    }

.disabled-template-btn {
    background: #EAEEED;
    border: 1px solid #9A9EA4;
    color: #9A9EA4;
    pointer-events:none;
}

.template-list-table  {
    width: 100%;
}

.template-list-table th {
    color: #0F0F0F;
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    padding: 7px 15px;
    background: #F6FCFF;
    text-align: left;
    border-bottom: 1px #99ddff solid;
}

.template-list-table td {
    padding: 7px 15px;
    border-bottom: 1px #cceeff solid;
}

.check-template-note {
    width: 16px;
    height: 16px;
    border-radius: 15px;
    border: 1px solid #178edc;
    display: inline-block;
    padding: 2px 2px;
    cursor: pointer;
}

.is-check-div {
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 9px;
    background: #178edc;
}

.new-create-template-check-content {
    width: 18px;
    height: 18px;
    border-radius: 15px;
    border: 1px solid #3A72BF;
    display: inline-block;
    padding: 2px 2px;
    cursor: pointer;
    vertical-align: middle;
}

.is-check-style {
    display: none;
    width: 12px;
    height: 12px;
    border-radius: 9px;
    background: #178edc;
}

.td-check-box {
    width: 19px;
    padding: 7px !important;
    text-align: center;
}

.treatment-note-container {
    display: flex;
    padding: 35px 100px;
    background: rgb(246, 249, 251);
    font-family: azo-sans-web, sans-serif;
    font-size: 14px;
}

.left-treatment-note-content {
    background: #fff;
    min-width: 320px;
    width: 320px;
    border-radius: 25px;
    padding: 15px 30px;
    height: fit-content;
}

.padding-15 {
    padding: 15px;
}

.new-right-treatment-note-content {
    margin-left: 20px;
    background: #fff;
    border-radius: 25px;
    padding: 15px 20px;
}

.treatment-note-title {
    font-size: 25px;
    font-weight: bold;
    font-family: azo-sans-web, sans-serif;
    color: #0F0F0F;
}

#search-template, #search-complex-template {
    margin-top: 30px;
    width: 100%;
    height: 30px;
}

.new-template-list-content {
    margin-top: 5px;
    border: 1px #CCCCCC solid;
    border-radius: 5px;
    min-height: 250px;
    padding: 14px 13px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.new-treatment-template, .new-complex-treatment-template {
    padding-inline-start: 0;
    list-style: none;
}

    .new-treatment-template li, .new-complex-treatment-template li {
        padding: 5px;
        cursor: pointer;
    }

.new-insert-btn-content {
    background: #C7E2FF;
    text-align: right;
    padding: 8px 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#new-insert-new-template, #new-insert-new-complex-template {
    background: #F1F9FF;
    padding: 5px 15px;
    border: 1px solid #F1F9FF;
    border-radius: 13px;
    color: #9A9EA4;
    font-size: 12px;
    cursor: pointer;
}

.focused-insert-template, .fucused-complex-template-insert {
    background: #F3F3F3 !important;
    text-decoration: none;
    border: none !important;
}

.focused-insert-template-btn {
    background: #3A72BF !important;
    color: #fff !important;
    text-decoration: none;
    border: none !important;
}
    
.new-template-detail-content {
    margin-top: 13px;
    border: 1px solid #007BFE;
    border-radius: 12px;
    padding: 11px;
}

.new-template-detail-content table {
    width: 100%;
}

    .new-template-detail-content table td {
        padding: 5px 0;
    }
    
.w-40p {
    width: 40%;
}

.w-37p {
    width: 37%;
}

.new-treatment-tab-btn {
    margin-right: 15px;
    border: 1px solid #3A72BF;
    border-radius: 17px;
    padding: 5px 15px;
    color: #0F0F0F;
    cursor: pointer;
}

    .new-treatment-tab-btn:hover {
        border: 2px solid #3A72BF;
        font-weight: bold;
        text-decoration: none;
        color: #0F0F0F;
    }
    
.new-focused-btn {
    background: #3A72BF;
    color: #fff;
}

    .new-focused-btn:hover {
        color: #fff;
    } 
    
.new-treatment-referrer-content {
    margin-top: 35px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.new-treatment-referrer-title {
    font-size: 20px;
    font-weight: bold;
}

.new-treatment-referrer-label {
    font-weight: bold;
}

#new-treatment-referrer-note-input {
    width: 100%;
    min-height: 200px;
}

.new-treatment-referrer-action-content {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

.new-treatment-referrer-action {
    margin-right: 15px;
    border: 1px solid #3A72BF;
    border-radius: 17px;
    padding: 4px 15px;
    font-size: 12px;
    color: #0F0F0F;
    cursor: pointer;
}

.new-treatment-referrer-action-save {
    background: #3A72BF;
    color: #fff;
}


.new-treatment-previous-note-content {
    display: flex;
    border: 1px #CCCCCC solid;
    border-radius: 18px;
    padding: 15px;
    margin: 10px 0;
}

.new-treatment-previous-view-content {
    margin-left: 10px;
    width: 65%;
    border-left: 1px solid #0F0F0F;
    padding-left: 10px;
}

.new-p-template-name {
    font-family: azo-sans-web, sans-serif;
    font-size: 17px;
    color: #0F0F0F;
    font-weight: bold;
}

.new-p-template-second-title {
    font-family: azo-sans-web, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #0F0F0F;
}

#new-input-template-name, #new-input-complex-template-name {
    margin-top: 6px;
    width: 100%;
    height: 30px;
}

.new-span-referrer-session {
    font-family: azo-sans-web, sans-serif;
    vertical-align: top;
    margin-left: 8px;
    color: #5A5858;
}

.new-create-template-line {
    width: 100%;
    height: 1px;
    background-color: #3A72BF;
    margin: 15px 0;
}

#new-select-template-user {
    margin-top: 10px;
    width: 100%;
}

.new-all-provider-content {
    background: #F6F9FB;
    padding: 5px;
}

.new-select-template-provider-mark {
    font-size: 18px;
    color: #3A72BF;
}

.new-select-template-provider-letter {
    margin-left: 10px;
    vertical-align: top;
    color: #5A5858;
}

.mb-5px {
    margin-bottom: 5px;
}

.new-btn-create-template {
    font-family: azo-sans-web, sans-serif;
    font-size: 12px;
    background: #3A72BF;
    border: 1px solid #3A72BF;
    padding: 5px 18px;
    border-radius: 15px;
    color: #fff;
}

    .new-btn-create-template:hover {
        cursor: pointer;
        color: #fff;
        text-decoration: none;
        opacity: 0.9;
    }

.new-create-template-provider-content {
    cursor: pointer;
}

#new-create-template-result {
    display: none;
    margin-right: 30px;
    font-size: 15px;
    color: red;
}

.new-template-dashboard-child-div {
    background: rgb(246, 249, 251);
    position: relative;
}

.new-template-path-content {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: azo-sans-web, sans-serif;
}

.new-note-template-item:hover {
    background: #e6f2ff;
    cursor: pointer;
}

.focused-note-template-item {
    background: #C7E2FF;
}

.case-manager-invalid-email {
    display: none;
    color: red;
}

.treatment-note-edit-content {
    display: none;
}

.new-treatment-action-btn, .complex-note-action-btn {
    margin-left: 15px;
    border: 1px solid #3A72BF;
    border-radius: 17px;
    padding: 3px 15px;
    color: #3A72BF;
    cursor: pointer;
}

    .new-treatment-action-btn:hover, .complex-note-action-btn:hover {
        border: 2px solid #3A72BF;
        font-weight: bold;
        text-decoration: none;
        color: #3A72BF;
    }

.new-treatment-action-create-btn {
    margin: 0;
    border: 1px solid #3A72BF;
    border-radius: 17px;
    padding: 3px 15px;
    cursor: pointer;
    background: #3A72BF;
    color: #fff;
}

.d-visable {
    opacity: 0;
}

.new-treatment-action-create-btn:hover {
    color: #fff;
}

.new-treatment-note-view-list {
}

.new-treatment-note-simple-view-list {
    border: 1px #CCCCCC solid;
    border-radius: 18px;
    padding: 15px;
    margin-top: 15px;
}

.new-treatment-action-delete-btn, .new-treatment-action-cancel-btn, .new-treatment-action-create-cancel-btn {
    border: 1px solid #FF5858;
    color: #FF5858;
}

.border-color-red {
    border-color: red;
}

.f-s-16 {
    font-size: 16px;
}

.ml-30px {
    margin-left: 30px;
}

.f-c-evaluate {
    color: #5A5858;
}

.f-c-evaluate-mark {
    color: #3A72BF;
}

.margin-8-0 {
    margin: 8px 0;
}

.f-c-blue {
    color: #3A72BF;
}

.new-template-complex-every-edit-section-content {
    position: relative;
    width: 98%;
    border-radius: 18px;
    border: 1px solid #3A72BF99;
}

.new-template-complex-sort-content {
    position: absolute;
    top: 0;
    right: -30px;
}

.new-template-complex-action-content {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}

.new-template-create-new-sction-btn-content {
    flex: auto;
    text-align: center;
}

.include-complex-content {
    cursor: pointer;
}

.new-templete-complext-evaluation-content {
    cursor: pointer;
}

.new-complex-observation-content {
    margin: 30px 40px 30px 15px;
}

.new-complex-every-observation-content {
    position: relative;
    text-align: left;
}

.complex-note-observation-title {
    flex: 1;
}

.section-move-up, .section-move-down, .observation-move-up, .observation-move-down {
    cursor: pointer;
}

.section-move-delete, .observation-move-delete {
    color: #9C2F2A;
    cursor: pointer;
}

.new-complex-section-title-content {
    background: #2F80ED;
    border-radius: 17px 17px 0px 0px;
    padding: 4px;
}

    .new-complex-section-title-content label {
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        margin-left: 10px;
    }

.section-title-input {
    margin-left: 10px;
    width: 50%;
}

.new-complex-line {
    margin: 0 40px 0 20px;
    border-top: solid 1px #5A5858;
}

.new-complex-option-title {
    width: 30%;
    margin-left: 6px;
}

.new-complex-option-remove {
    color: #9C2F2A;
    font-size: 18px;
    margin-left: 10px;
    cursor: pointer;
}

.new-complex-add-option-btn {
    margin-left: 0;
}

.mb-25px {
    margin-bottom: 25px;
}

.new-complex-observation-line {
    border-top: 1px solid #B0B1B4;
    margin: 20px 0 16px;
}

.hover-glip {
    color: #A4A4A4;
    font-size: 20px;
    vertical-align: sub;
    opacity: 0;
}

.input-new-complex-abservation-template {
    width: 100%;
}

.new-complex-select-rows-height {
    width: 77px;
}

.note-complex-section-title {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}

.m-20 {
    margin: 20px;
}

.m-t-b-15 {
    margin: 15px 0;
}

.new-observation-title {
    font-size: 16px;
}

.create-complex-note-btn {
    margin: 0;
    background: #3A72BF;
    color: #ffffff;
}

    .create-complex-note-btn:hover {
        color: #ffffff;
    }

.new-template-alert-content, .new-template-error-alert-content {
    display: none;
    position: fixed;
    top: 114px;
    right: 11px;
    z-index: 999999;
    width: 270px;
}

.new-template-alert-header {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: #4CAF50;
    color: #fff;
    font-weight: bold;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.new-template-error-alert-header {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: #ea001e;
    color: #fff;
    font-weight: bold;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.new-template-alert-body, .new-template-error-alert-body {
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px;
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);
    background-clip: padding-box;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: #ffffff;
}

.new-template-alert-close {
    cursor: pointer;
}

.new-template-alert-close:hover {
    opacity: 0.8;
}

.f-c-evaluate {
    cursor: pointer;
}

#treatment-note-loader {
    display: none;
}

.new-treatment-note-create-content {
    position: relative;
    min-height: 400px;
    text-align: center;
}

.create-complex-note-empty {
    position: absolute;
    top: 50%;
    color: #818181;
    left: 50%;
    font-size: 16px;
    transform: translate(-50%, -50%);
}

.sterilisation-content {
    display: inline-block;
    padding-right: 10px;
    border-right: 1px solid #707070;
    margin-right: 10px;
}

.patient-consent-content {
    display: inline-block;
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #707070;
}

.new-complex-extra-content {
    font-size: 15px;
}

.complex-is-referrer-check-edit {
    cursor: pointer;
}

.new-complex-text-edit-input {
    width: 100%;
}

.self-checkin-content {
    margin-bottom: -20px;
    position: relative;
    background-image: url("/imagesV2/Self Check In/17545.jpg");
    height: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: azo-sans-web, sans-serif;
}

.overlay-content {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    padding-top: 27px;
    padding-left: 41px;
    background: transparent radial-gradient(closest-side at 50% 50%, rgba(67, 125, 213, 0.65) 0%, rgb(222, 235, 248, 0.65) 100%) 0% 0% no-repeat padding-box;
}

.self-checkin-title {
    font-size: 36px;
    font-weight: bold;
    color: #515151;
}

.self-checkin-body-content {
    padding-bottom: 200px;
}

#self-checkin-search-content {
    width: 579px;
    margin: auto;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 5px #0000000d;
    border: 2px solid #70707085;
    border-radius: 20px;
    padding: 28px 32px;
}

.self-checkin-search-title {
    font-size: 26px;
    font-weight: bold;
    color: #515151;
}

.self-checkin-search-sub-title {
    font-size: 15px;
    color: #515151;
}

.self-checkin-search-title-content {
    padding-bottom: 25px;
    border-bottom: 1px solid #70707085;
}

.self-checkin-search-second-title {
    font-size: 15px;
    font-weight: bold;
    color: #515151;
}

.self-checkin-search-manatory {
    font-size: 15px;
    color: #DE3431;
}

.self-checkin-search-input {
    width: 100%;
    height: 37px;
    padding: 15px;
    font-size: 16px;
}

#self-checkin-search-btn {
    background: #2F80ED 0% 0% no-repeat padding-box;
    box-shadow: 1px 4px 4px #00000029;
    border-radius: 2px;
    width: 274px;
    color: white;
    text-align: center;
    padding: 9px;
    font-size: 16px;
    margin: auto;
    margin-top: 80px;
    margin-bottom: 20px;
    cursor: pointer;
}

.self-checkin-qr-content {
    position: absolute;
    bottom: 30px;
    width: 30%;
    display: flex;
    justify-content: space-between;
}

.ml-25px {
    margin-left: 25px;
}

.self-checkin-qr {
    border-radius: 15px;
}

#self-checkin-search-success-content {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 579px;
    background: #FFFFFF;
    border: 2px solid #70707085;
    border-radius: 20px;
    text-align: center;
    padding-bottom: 30px;
}

.self-checkin-success-title {
    margin-top: 100px;
    font-size: 30px;
    font-weight: bold;
    color: #515151;
}

.self-checkin-success-mark {
    margin-top: 10px;
    color: rgb(20, 160, 134);
    font-size: 60px;
}

#self-checkin-checkin-content, #self-checkin-new-booking-content {
    margin: auto;
    margin-top: 80px;
    width: 579px;
    background: #FFFFFF;
    border: 2px solid #70707085;
    border-radius: 20px;
    padding: 26px 34px;
    padding-bottom: 50px;
}

.self-checkin-flex-content {
    display: flex;
    justify-content: space-between;
}

.mt-55px {
    margin-top: 55px;
}

.f-s-16 {
    font-size: 16px;
    color: #212531;
}

.f-s-16-orange {
    font-size: 18px;
    font-weight: bold;
    color: #E5B721;
}

.f-w-18 {
    font-size: 18px;
    font-weight: bold;
    color: #212531;
}

.self-checkin-state {
    margin-top: 75px;
    font-size: 15px;
    color: #515151;
}

#self-checkin-checkin-btn {
    background: #2F80ED 0% 0% no-repeat padding-box;
    box-shadow: 1px 4px 4px #00000029;
    border-radius: 2px;
    width: 274px;
    color: white;
    text-align: center;
    padding: 9px;
    font-size: 16px;
    margin: auto;
    margin-top: 80px;
    margin-bottom: 20px;
    cursor: pointer;
}

#self-checkin-additional-details-content {
    width: 70%;
    margin: auto;
}

.self-checkin-additional-up-content {
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 5px #0000000d;
    border-radius: 20px;
    padding: 28px 32px;
}

.self-checkin-nomal-font {
    font-size: 18px;
    color: #515151;
}

.self-checkin-mobile-info {
    font-size: 15px;
    color: #515151;
    margin-bottom: 5px;
}

.mr-25px {
    margin-right: 25px;
}

.self-checkin-input-title {
    font-size: 15px;
    font-weight: bold;
    color: #212531;
}

.mt-52px {
    margin-top: 52px;
}

.h-37px {
    height: 37px;
}


.w-100px {
    width: 100px;
}

.self-checkin-cancel-btn {
    display: inline-block;
    text-align: center;
    font-size: 16px;
    width: 128px;
    padding: 7px;
    border: 1px solid #515151;
    border-radius: 2px;
    cursor: pointer;
}

.self-checkin-update-save-btn {
    display:inline-block;
    text-align: center;
    font-size: 16px;
    width: 272px;
    padding: 8px;
    border-radius: 2px;
    background: rgb(47, 128, 237);
    color: #ffffff;
    cursor: pointer;
}

    .self-checkin-update-save-btn:hover {
        opacity: 0.8;
    } 

.mt-8px {
    margin-top: 8px;
}

.mt-37px {
    margin-top: 37px;
}

.self-checkin-validate {
    display: none;
    font-size: 15px;
    color: #DE3431;
}

.self-checkin-search-invalid-patient {
    margin-top: 30px;
    color: red;
    font-size: 16px;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.self-checkin-loader {
    display: none;
    width: 30px;
    height: 30px;
    margin: auto;
    border: solid 4px #ffffff;
    border-radius: 50%;
    border-right-color: transparent;
    border-bottom-color: transparent;
    -webkit-transition: all 0.5s ease-in;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1.0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    transition: all 0.5s ease-in;
    animation-name: rotate;
    animation-duration: 1.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#self-checkin-search-country-code {
    position: absolute;
    top: 8px;
    left: 31px;
}

#self-checkin-patient-search-phone-number {
}

.self-checkin-search-phone-number-content {
    width: calc(70% - 15px);
}

.validate-date-format {
    display: none;
    margin-top: 15px;
    color: red;
}

.print-switch-content {
    display: flex;
    justify-content: space-between;
    width: 150px;
    align-items: flex-end;
}

.mx-15px {
    margin: 0 15px;
}

.ml-5px {
    margin-left: 5px;
}

@media only screen and (max-width: 1024px) {
    #self-checkin-search-content {
        width: 60%;
        margin-top: 30px;
    }

    #self-checkin-additional-details-content {
        width: 85%;
        margin-top: 30px;
    } 
    
    .self-checkin-qr-content {
        width: 40%;
    }

    .f-w-18 {
        font-size: 16px;
    }

    .f-s-16 {
        font-size: 14px;
    }
}

@media only screen and (max-width: 768px) {
    #self-checkin-search-content {
        width: 70%;
        margin-top: 30px;
    }

    .self-checkin-qr-content {
        width: 55%;
    }

    .self-checkin-search-title {
        font-size: 22px;
    }

    .self-checkin-search-sub-title {
        font-size: 14px;
    }

    #self-checkin-additional-appoinment {
        width: 55%;
    }

    #selfCheckinCountryCode {
        width: 57%;
    }

    #self-checkin-no-check-referrer-mobile-phone {
        width: 40%;
    }

    #selfCheckinReferrerCountryCode {
        width: 52%;
    }
}