:root {
    --p-color: #00aa80;
    --s-color: #57d4b5;
    --t-color: #ffffff;
    --d-color: #929292;
    --g-color: #c4c4c4db;
    --gray-color: #D9D9D9;
    /*----*/
    --bg-jpeg-viewer: #222222;
    --bg-jpeg-viewer-tool-item: rgba( 255, 255, 255, 0.3 );
    --bg-jpeg-viewer-tool-item-active: #0000004d;
    --text-jpeg-viewer-tool-item: #222222;
    --text-jpeg-viewer-tool-item-active: #e7e7e7;
    /*-----*/
    --input-focus-outline-default-color: #c2c2c2db;
    --border-default-color: #c2c2c2db;
    --sliding-placeholder-color: black;
    /**/
    /**/
    --color-pacs-p: #202020;
    --color-pacs-p-2: #282828;
    --color-pacs-s: #3d3d3d;
    --color-pacs-t: #e2e2e2;
    --color-pacs-g: #c2c2c2;
    --color-pacs-orange: #FFA500;
    /**/
    /**/
    /* Z-Index */
    --zi-117: 117;
    --zi-118: 118;
    --zi-119: 119;
    /**/
    --zi-header: 120;
    --zi-header-upper-1: 121;
    --zi-header-upper-2: 122;
    /**/
    --zi-modal-1: 123;
    --zi-modal-1-upper-1: 124;
    --zi-modal-1-upper-2: 125;
    /**/
    --zi-modal-2: 126;
    --zi-modal-2-upper-1: 127;
    --zi-modal-2-upper-2: 128;
}

.clr-picker {
    direction: ltr;
}

    .clr-picker input {
        font-family: Arial !important;
    }


.bg-black {
    background-color: black;
}

.dynamic-svg-path {
    fill: var(--class-main-bg-color) !important;
}

@font-face {
    font-family: iransans;
    src: url("../Fonts/IRANSans.ttf") format("truetype");
}

@font-face {
    font-family: "titr";
    src: url('../Fonts/B Titr Bold.eot'); /* IE */
    src: url("../Fonts/B Titr Bold.eot?#iefix") format("embedded-opentype"), /* IE */
    url("../Fonts/B Titr Bold.woff") format("woff"), /* Modern Browsers */
    url("../Fonts/B Titr Bold.ttf") format("truetype"); /* Safari, Android, iOS */
    font-weight: 100;
}

.arial {
    font-family: Arial;
}

.titr {
    font-family: Titr;
}

.tahoma {
    font-family: Tahoma;
}


.iransans {
    font-family: iransans;
}



body {
    font-family: iransans;
/*  

    بخاطر مشکل اسکرول در نام ب?ماران در قسمت پزشک معالج غ?ر فعال شد 1401/08/25 
    overflow-x: hidden;
    overflow-y: hidden;
*/
}

html {
    touch-action: none;
}

#body::-webkit-scrollbar {
    width: 10px;
    opacity: 0.1;
}

#body::-webkit-scrollbar-track {
    background: var(--class-div-1-bg-color);
}

#body::-webkit-scrollbar-thumb {
    opacity: 0.1 !important;
    background: var(--class-div-1-text-color);
    border-radius: 2px;
}
    /* Handle on hover */
    #body::-webkit-scrollbar-thumb:hover {
        background: var(--class-div-1-text-color);
    }




a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
}


.user-select-none {
    user-select: none;
}


.disabled-dashboard-item {
    filter: grayscale(1);
    cursor: default !important;
}

.zi-header {
    z-index: 120;
}

.zi-1 {
    z-index: 1;
}

.zi-2 {
    z-index: 2;
}


/* loading ring */

.lds-dual-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
    width: 80px;
    height: 80px;
    z-index: 128;
    background-color: white;
    border-radius: 10px;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid #fff;
        border-color: var(--class-main-bg-color) transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}







.bg-gray {
    background-color: var(--gray-color);
    color: var(--class-div-1-text-color);
}




.bg-white-100 {
    background-color: white;
}

/* PACS COLORS */


.bg-pacs-p {
    background-color: var(--color-pacs-p);
}

.bg-pacs-p-lighter {
    background-color: var(--color-pacs-p-2);
}


.bg-pacs-s {
    background-color: var(--color-pacs-s);
}

.bg-pacs-t {
    background-color: var(--color-pacs-t);
}

.bg-pacs-g {
    background-color: var(--color-pacs-g);
}

.bg-pacs-orange {
    background-color: var(--color-pacs-orange);
}

/* Dashboard Colors */

.bg-dashboard-p {
    background-color: var(--class-dashboard-item-text-color);
}

.bg-dashboard-s {
    background-color: var(--class-dashboard-item-bg-color);
}

.text-dashboard-p {
    color: var(--class-dashboard-item-text-color);
}

.text-dashboard-s {
    color: var(--class-dashboard-item-bg-color);
    fill: var(--class-dashboard-item-bg-color);
}

    .text-dashboard-s path {
        fill: var(--class-dashboard-item-bg-color);
    }

.border-dashboard-p {
    border-color: var(--class-dashboard-item-text-color);
}

.border-dashboard-s {
    border-color: var(--class-dashboard-item-bg-color);
}

/* Dashboard Colors */
.svg-danger {
    fill: #c42b2b;
}

    .svg-danger path {
        fill: #c42b2b;
    }

.border-gray-500 {
    border-color: #3e3e3e76;
}



.text-pacs-p {
    color: var(--color-pacs-p);
    fill: var(--color-pacs-p);
}

.text-pacs-s {
    color: var(--color-pacs-s);
    fill: var(--color-pacs-s);
}



.text-pacs-t {
    color: var(--color-pacs-t);
    fill: var(--color-pacs-t);
}

.text-pacs-g {
    color: var(--color-pacs-g);
    fill: var(--color-pacs-g);
}

.text-pacs-orange {
    color: var(--color-pacs-orange);
    fill: var(--color-pacs-orange);
}


/* Colors */

.text-warning * {
    fill: #ffc107;
}



.bg-p {
    background-color: var(--p-color);
}

.bg-s {
    background-color: var(--s-color);
}

.bg-t {
    background-color: var(--t-color);
}

.bg-d {
    background-color: var(--d-color);
}


.text-p {
    color: var(--p-color);
    fill: var(--p-color);
}

.text-s {
    color: var(--s-color);
    fill: var(--s-color);
}



.text-t {
    color: var(--t-color);
    fill: var(--t-color);
}

.text-d {
    color: var(--d-color);
    fill: var(--d-color);
}


.hover-bg-p:hover {
    background-color: var(--p-color);
    transition: 0.3s;
}

.hover-bg-s:hover {
    background-color: var(--s-color);
    transition: 0.3s;
}

.hover-bg-t:hover {
    background-color: var(--t-color);
    transition: 0.3s;
}

.hover-bg-d:hover {
    background-color: var(--d-color);
    transition: 0.3s;
}

.hover-bg-g:hover {
    background-color: var(--g-color);
    transition: 0.3s;
}



.hover-text-p:hover {
    transition: .3s;
    color: var(--p-color);
    fill: var(--p-color);
}

.hover-text-s:hover {
    transition: .3s;
    color: var(--s-color);
    fill: var(--s-color);
}

.hover-text-t:hover {
    transition: .3s;
    color: var(--t-color);
    fill: var(--t-color);
}

.hover-text-d:hover {
    transition: .3s;
    color: var(--d-color);
    fill: var(--d-color);
}


.hover-text-p:hover svg {
    fill: var(--p-color);
}

.hover-text-s:hover svg {
    fill: var(--s-color);
}

.hover-text-t:hover svg {
    fill: var(--t-color);
}

.hover-text-d:hover svg {
    fill: var(--d-color);
}


/* Sizing */

.min-vh-100 {
    min-height: 100vh;
}

.min-h-55 {
    min-height: 55%;
}


.vh-100 {
    height: 100vh;
}

.vh-90 {
    height: 90vh;
}

.vh-80 {
    height: 80vh;
}

.vh-70 {
    height: 70vh;
}

.vh-65 {
    height: 65vh;
}

.vh-60 {
    height: 60vh;
}

.vh-50 {
    height: 50vh;
}

.vh-55 {
    height: 55vh;
}

.vh-40 {
    height: 40vh;
}

.vh-30 {
    height: 30vh;
}

.vh-20 {
    height: 20vh;
}

.vh-10 {
    height: 10vh;
}




.h-5 {
    height: 5%;
}

.h-10 {
    height: 10%;
}

.h-20 {
    height: 20%;
}

.h-30 {
    height: 30%;
}

.h-40 {
    height: 40%;
}

.h-50 {
    height: 50%;
}

.h-55 {
    height: 55%;
}

.h-60 {
    height: 60%;
}

.h-70 {
    height: 70%;
}

.h-80 {
    height: 80%;
}

.h-90 {
    height: 90%;
}

.h-95 {
    height: 95%;
}

.h-98 {
    height: 98%;
}


.max-h-90 {
    max-height: 90%;
}

.max-h-100 {
    max-height: 100%;
}

.max-h-100px {
    max-height: 100px;
}


.h-1px {
    height: 1px;
}

.h-3px {
    height: 3px;
}

.h-10px {
    height: 10px;
}

.h-20px {
    height: 20px;
}

.h-25px {
    height: 25px;
}

.h-30px {
    height: 30px;
}

.h-35px {
    height: 35px;
}

.h-38px {
    height: 38px;
}

.h-40px {
    height: 40px;
}

.h-50px {
    height: 50px !important;
}

.h-60px {
    height: 60px;
}

.h-70px {
    height: 70px;
}

.h-80px {
    height: 80px;
}

.h-90px {
    height: 90px;
}

.h-100px {
    height: 100px;
}

.h-110px {
    height: 110px;
}

.h-120px {
    height: 120px;
}

.h-130px {
    height: 130px;
}

.h-140px {
    height: 140px;
}

.h-150px {
    height: 150px;
}




.h-200px {
    height: 200px;
}

.h-100-minus-50px {
    height: calc(100% - 50px);
}

.h-100-minus-60px {
    height: calc(100% - 60px);
}


.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-55 {
    width: 55%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.max-w-100 {
    max-width: 100%;
}

.w-calc-100 {
    width: calc(100%);
}


.w-100-minus-350px {
    width: calc(100% - 350px);
}



.w-20px {
    width: 20px !important;
}

.w-30px {
    width: 30px !important;
}

.w-32px {
    width: 32px !important;
}


.w-35px {
    width: 30px !important;
}


.w-40px {
    width: 40px !important;
}

.w-50px {
    width: 50px !important;
}

.w-60px {
    width: 60px !important;
}

.w-70px {
    width: 70px !important;
}

.w-80px {
    width: 80px !important;
}

.w-90px {
    width: 90px !important;
}

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

.w-110px {
    width: 110px !important;
}

.w-120px {
    width: 120px !important;
}

.w-130px {
    width: 130px !important;
}

.w-140px {
    width: 140px !important;
}

.w-150px {
    width: 150px !important;
}

.w-200px {
    width: 200px !important;
}

.w-250px {
    width: 250px !important;
}

.w-300px {
    width: 300px !important;
}


.w-400px {
    width: 400px !important;
}

.min-w-50px {
    min-width: 50px !important;
}

.min-w-60px {
    min-width: 60px !important;
}

.min-w-70px {
    min-width: 70px !important;
}

.min-w-80px {
    min-width: 80px !important;
}

.min-w-90px {
    min-width: 90px !important;
}

.min-w-100px {
    min-width: 100px !important;
}

.min-w-110px {
    min-width: 110px !important;
}

.min-w-120px {
    min-width: 120px !important;
}

.min-w-130px {
    min-width: 130px !important;
}

.min-w-140px {
    min-width: 140px !important;
}

.min-w-150px {
    min-width: 150px !important;
}

.min-w-200px {
    min-width: 200px !important;
}

.min-w-100{
    min-width: 100%; 
}

.vw-100 {
    width: 100vw;
}

.vw-99 {
    width: 99vw;
}


.vw-98 {
    width: 98vw;
}

.vw-95 {
    width: 95vw;
}

.vw-90 {
    width: 90vw;
}

.vw-80 {
    width: 80vw;
}

.vw-70 {
    width: 70vw;
}

.vw-60 {
    width: 60vw;
}

.vw-50 {
    width: 50vw;
}

.vw-55 {
    width: 55vw;
}

.vw-40 {
    width: 40vw;
}

.vw-30 {
    width: 30vw;
}

.vw-20 {
    width: 20vw;
}

.vw-10 {
    width: 10vw;
}

.max-w-90 {
    max-width: 90%;
}


@media only screen and (min-width: 768px) {


    .position-md-fixed{
        position: fixed;
    }

    /* Height */

    .h-md-5 {
        height: 5%;
    }

    .h-md-10 {
        height: 10%;
    }

    .h-md-20 {
        height: 20%;
    }

    .h-md-30 {
        height: 30%;
    }

    .h-md-40 {
        height: 40%;
    }

    .h-md-50 {
        height: 50%;
    }

    .h-md-55 {
        height: 55%;
    }

    .h-md-60 {
        height: 60%;
    }

    .h-md-70 {
        height: 70%;
    }

    .h-md-80 {
        height: 80%;
    }

    .h-md-85 {
        height: 85%;
    }

    .h-md-90 {
        height: 90%;
    }

    .h-md-100 {
        height: 100%;
    }

    .h-md-1px {
        height: 1px;
    }

    .h-md-10px {
        height: 10px;
    }

    .h-md-20px {
        height: 20px;
    }

    .h-md-25px {
        height: 25px;
    }

    .h-md-30px {
        height: 30px;
    }

    .h-md-35px {
        height: 35px;
    }

    .h-md-40px {
        height: 40px;
    }

    .h-md-50px {
        height: 50px;
    }

    .h-md-60px {
        height: 60px;
    }

    .h-md-70px {
        height: 70px;
    }

    .h-md-80px {
        height: 80px;
    }

    .h-md-90px {
        height: 90px;
    }

    .h-md-100px {
        height: 100px;
    }

    .h-md-110px {
        height: 110px;
    }

    .h-md-120px {
        height: 120px;
    }

    .h-md-130px {
        height: 130px;
    }

    .h-md-140px {
        height: 140px;
    }

    .h-md-150px {
        height: 150px;
    }


    /* Width */


    .w-md-5 {
        width: 5%;
    }

    .w-md-10 {
        width: 10%;
    }

    .w-md-20 {
        width: 20%;
    }

    .w-md-30 {
        width: 30%;
    }

    .w-md-40 {
        width: 40%;
    }

    .w-md-50 {
        width: 50%;
    }

    .w-md-55 {
        width: 55%;
    }

    .w-md-60 {
        width: 60%;
    }

    .w-md-70 {
        width: 70%;
    }

    .w-md-80 {
        width: 80%;
    }

    .w-md-90 {
        width: 90%;
    }

    .w-md-95 {
        width: 95%;
    }


    .w-md-30px {
        width: 30px !important;
    }

    .w-md-35px {
        width: 35px !important;
    }

    .w-md-40px {
        width: 40px !important;
    }

    .w-md-50px {
        width: 50px !important;
    }

    .w-md-60px {
        width: 60px !important;
    }

    .w-md-70px {
        width: 70px !important;
    }

    .w-md-80px {
        width: 80px !important;
    }

    .w-md-90px {
        width: 90px !important;
    }

    .w-md-100px {
        width: 100px !important;
    }

    .w-md-110px {
        width: 110px !important;
    }

    .w-md-120px {
        width: 120px !important;
    }

    .w-md-130px {
        width: 130px !important;
    }

    .w-md-140px {
        width: 140px !important;
    }

    .w-md-150px {
        width: 150px !important;
    }

    .w-md-200px {
        width: 200px !important;
    }
}


@media only screen and (max-width: 768px) {


    /* Height */

    .h-sm-5 {
        height: 5%;
    }

    .h-sm-10 {
        height: 10%;
    }

    .h-sm-20 {
        height: 20%;
    }

    .h-sm-30 {
        height: 30%;
    }

    .h-sm-40 {
        height: 40%;
    }

    .h-sm-50 {
        height: 50%;
    }

    .h-sm-55 {
        height: 55%;
    }

    .h-sm-60 {
        height: 60%;
    }

    .h-sm-70 {
        height: 70%;
    }

    .h-sm-80 {
        height: 80%;
    }

    .h-sm-90 {
        height: 90%;
    }

    .h-sm-100 {
        height: 100%;
    }

    .h-sm-1px {
        height: 1px;
    }

    .h-sm-10px {
        height: 10px;
    }

    .h-sm-20px {
        height: 20px;
    }

    .h-sm-25px {
        height: 25px;
    }

    .h-sm-30px {
        height: 30px;
    }

    .h-sm-35px {
        height: 35px;
    }

    .h-sm-40px {
        height: 40px;
    }

    .h-sm-50px {
        height: 50px;
    }

    .h-sm-60px {
        height: 60px;
    }

    .h-sm-70px {
        height: 70px;
    }

    .h-sm-80px {
        height: 80px;
    }

    .h-sm-90px {
        height: 90px;
    }

    .h-sm-100px {
        height: 100px;
    }

    .h-sm-110px {
        height: 110px;
    }

    .h-sm-120px {
        height: 120px;
    }

    .h-sm-130px {
        height: 130px;
    }

    .h-sm-140px {
        height: 140px;
    }

    .h-sm-150px {
        height: 150px;
    }


    /* Width */


    .w-sm-5 {
        width: 5%;
    }

    .w-sm-8 {
        width: 8%;
    }

    .w-sm-10 {
        width: 10%;
    }

    .w-sm-20 {
        width: 20%;
    }

    .w-sm-30 {
        width: 30%;
    }

    .w-sm-40 {
        width: 40%;
    }

    .w-sm-50 {
        width: 50%;
    }

    .w-sm-55 {
        width: 55%;
    }

    .w-sm-60 {
        width: 60%;
    }

    .w-sm-70 {
        width: 70%;
    }

    .w-sm-80 {
        width: 80%;
    }

    .w-sm-90 {
        width: 90%;
    }

    .w-sm-95 {
        width: 95%;
    }

    .w-sm-100 {
        width: 100%;
    }


    .w-sm-40px {
        width: 40px;
    }

    .w-sm-50px {
        width: 50px;
    }

    .w-sm-60px {
        width: 60px;
    }

    .w-sm-70px {
        width: 70px;
    }

    .w-sm-80px {
        width: 80px;
    }

    .w-sm-90px {
        width: 90px;
    }

    .w-sm-100px {
        width: 100px;
    }

    .w-sm-110px {
        width: 110px;
    }

    .w-sm-120px {
        width: 120px;
    }

    .w-sm-130px {
        width: 130px;
    }

    .w-sm-140px {
        width: 140px;
    }

    .w-sm-150px {
        width: 150px;
    }

    .w-sm-200px {
        width: 200px;
    }
}

@media only screen and (min-width: 768px) {
}


/* 0 to Medium */
@media only screen and (max-width: 1200px) {

    .table-sm-col-0 {
        min-width: 0;
        max-width: 0;
    }

    .table-sm-col-3 {
        min-width: calc(3%);
        max-width: calc(3%);
    }

    .table-sm-col-5 {
        min-width: calc(5%);
        max-width: calc(5%);
    }

    .table-sm-col-6 {
        min-width: calc(6%);
        max-width: calc(6%);
    }

    .table-sm-col-7 {
        min-width: calc(7%);
        max-width: calc(7%);
    }

    .table-sm-col-8 {
        min-width: calc(8%);
        max-width: calc(8%);
    }

    .table-sm-col-9 {
        min-width: calc(9%);
        max-width: calc(9%);
    }

    .table-sm-col-10 {
        min-width: calc(10%);
        max-width: calc(10%);
    }

    .table-sm-col-12 {
        min-width: calc(12%);
        max-width: calc(12%);
    }

    .table-sm-col-15 {
        min-width: calc(15%);
        max-width: calc(15%);
    }


    .table-sm-col-20 {
        min-width: calc(20%);
        max-width: calc(20%);
    }

    .d-0-1200-none {
        display: none;
    }

    .d-0-1200-flex {
        display: flex;
    }
}


/* Large to 100 */
@media only screen and (min-width: 1201px) {




    .d-1200-to-max-none {
        display: none;
    }

    .d-1200-to-max-flex {
        display: flex;
    }

    .table-lg-col-3 {
        min-width: calc(3%);
        max-width: calc(3%);
    }

    .table-lg-col-4 {
        min-width: calc(4%);
        max-width: calc(4%);
    }

    .table-lg-col-5 {
        min-width: calc(5%);
        max-width: calc(5%);
    }

    .table-lg-col-6 {
        min-width: calc(6%);
        max-width: calc(6%);
    }

    .table-lg-col-7 {
        min-width: calc(7%);
        max-width: calc(7%);
    }

    .table-lg-col-8 {
        min-width: calc(8%);
        max-width: calc(8%);
    }

    .table-lg-col-9 {
        min-width: calc(9%);
        max-width: calc(9%);
    }

    .table-lg-col-10 {
        min-width: calc(10%);
        max-width: calc(10%);
    }

    .table-lg-col-12 {
        min-width: calc(12%);
        max-width: calc(12%);
    }

    .table-lg-col-15 {
        min-width: calc(15%);
        max-width: calc(15%);
    }

    .table-lg-col-20 {
        min-width: calc(20%);
        max-width: calc(20%);
    }
}

.table-col-3 {
    min-width: calc(3%);
    max-width: calc(3%);
}

.table-col-4 {
    min-width: calc(4%);
    max-width: calc(4%);
}


.table-col-5 {
    min-width: calc(5%);
    max-width: calc(5%);
}

.table-col-6 {
    min-width: calc(6%);
    max-width: calc(6%);
}

.table-col-7 {
    min-width: calc(7%);
    max-width: calc(7%);
}

.table-col-8 {
    min-width: calc(8%);
    max-width: calc(8%);
}

.table-col-9 {
    min-width: calc(9%);
    max-width: calc(9%);
}

.table-col-10 {
    min-width: calc(10%);
    max-width: calc(10%);
}

.table-col-12 {
    min-width: calc(12%);
    max-width: calc(12%);
}

.table-col-15 {
    min-width: calc(15%);
    max-width: calc(15%);
}

/* ----------- Padding and Margin ------------ */



.p-2px {
    padding: 2px;
}

.p-x-5px {
    padding: 0px 4px;
}

.p-x-50px {
    padding: 0px 50px;
}

.p-x-55px {
    padding: 0px 55px;
}

.p-l-55px {
    padding-left: 55px;
}

.p-r-55px {
    padding-right: 55px;
}

.pt-40px {
    padding-top: 40px;
}

.pt-50px {
    padding-top: 50px;
}

.pt-70px {
    padding-top: 70px;
}


.mb-6 {
    margin-bottom: 4rem;
}

.m-x-1px {
    margin: 0px 1px;
}

.m-x-2px {
    margin: 0px 2px;
}

.m-x-3px {
    margin: 0px 3px;
}

.m-x-4px {
    margin: 0px 4px;
}

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

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

.m-r-2px {
    margin-right: 2px;
}

.m-l-2px {
    margin-left: 2px;
}

.m-y-2px {
    margin: 2px 0px;
}



@media only screen and (min-width: 769px) {

    .pt-md-40px {
        padding-top: 40px;
    }
}

/* --------------- Font Size --------------------- */


@media only screen and (max-width: 768px) {

    .opacity-sm-90 {
        opacity: 0.9;
    }

    .opacity-sm-85 {
        opacity: 0.85;
    }

    .opacity-sm-83 {
        opacity: 0.83;
    }

    .opacity-sm-80 {
        opacity: 0.8;
    }

    .font-size-sm-0-7 {
        font-size: 0.7rem;
    }

    .font-size-sm-0-8 {
        font-size: 0.8rem;
    }

    .font-size-sm-0-9 {
        font-size: 0.9rem;
    }

    .font-size-sm-1-1 {
        font-size: 1.1rem;
    }

    .font-size-sm-1-2 {
        font-size: 1.2rem;
    }

    .font-size-sm-1-5 {
        font-size: 1.5rem;
    }
}


@media only screen and (min-width: 992px) {


    .h-lg-100-minus-50px {
        height: calc(100% - 50px);
    }

    .font-size-lg-0-7 {
        font-size: 0.7rem;
    }

    .font-size-lg-0-9 {
        font-size: 0.9rem;
    }

    .font-size-lg-1-5 {
        font-size: 1.5rem;
    }

    .font-size-lg-2 {
        font-size: 2rem;
    }
}

@media only screen and (min-width: 1200px) {



    .font-size-xl-0-7 {
        font-size: 0.7rem;
    }

    .font-size-xl-0-9 {
        font-size: 0.9rem;
    }

    .font-size-xl-1-5 {
        font-size: 1.5rem;
    }

    .font-size-xl-2 {
        font-size: 2rem;
    }
}


.font-big {
    font-size: 1.5rem;
}

.font-size-0-5 {
    font-size: 0.5rem;
}

.font-size-0-7 {
    font-size: 0.7rem;
}

.font-size-0-8 {
    font-size: 0.8rem;
}

.font-size-0-9 {
    font-size: 0.9rem;
}

.font-size-1-1 {
    font-size: 1.1rem;
}

.font-size-1-2 {
    font-size: 1.2rem;
}

.font-size-1-5 {
    font-size: 1.5rem;
}

.font-size-2 {
    font-size: 2rem;
}






.text-nowrap {
    white-space: nowrap;
}



.overflow-dotted {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}






/* -------------------------- */


.rotate-45 {
    transform: rotate(45deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-225 {
    transform: rotate(225deg);
}


.input-number {
    direction: ltr;
}

.ltr {
    direction: ltr;
}

.rtl {
    direction: rtl;
}


.t-0 {
    top: 0;
}

.t-50 {
    top: 50%;
    transform: translateY(-50%);
}

.t-100 {
    top: 100%;
}

.t-110 {
    top: 110%;
}

.l-0 {
    left: 0;
}

l-50 {
    left: 50%;
    transform: translateX(-50%);
}

.r-0 {
    right: 0;
}

.b-0 {
    bottom: 0;
}

.aspect-1 {
    aspect-ratio: 1/1 !important;
}

.flex-1 {
    flex: 1;
}

.opacity-90 {
    opacity: 0.90;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-50 {
    opacity: 0.50;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-0 {
    opacity: 0.0;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-visible {
    overflow: visible;
}


.overflow-y-auto {
    overflow-y: auto;
}

.overflow-overlay {
    overflow: overlay;
}

.overflow-x-overlay {
    overflow-x: overlay;
}

.overflow-y-overlay {
    overflow-y: overlay;
}




/*  ---------------- Border Effects ---------------------- */
.border-5 {
    border-radius: 5px;
}


.border-15 {
    border-radius: 15px;
}

.border-30 {
    border-radius: 30px;
}


.border-top-right-5 {
    border-top-right-radius: 5px;
}

.border-top-left-5 {
    border-top-left-radius: 5px;
}

.border-bottom-right-5 {
    border-bottom-right-radius: 5px;
}

.border-bottom-left-5 {
    border-bottom-left-radius: 5px;
}

.border-top-right-5 {
    border-top-right-radius: 5px;
}

.border-top-left-5 {
    border-top-left-radius: 5px;
}

.border-bottom-right-15 {
    border-bottom-right-radius: 15px;
}

.border-bottom-left-15 {
    border-bottom-left-radius: 15px;
}

.border-top-right-30 {
    border-top-right-radius: 30px;
}

.border-top-left-30 {
    border-top-left-radius: 30px;
}

.border-bottom-right-30 {
    border-bottom-right-radius: 30px;
}

.border-bottom-left-30 {
    border-bottom-left-radius: 30px;
}

.border-top-right-45 {
    border-top-right-radius: 45px;
}

.border-top-left-45 {
    border-top-left-radius: 45px;
}

.border-bottom-right-45 {
    border-bottom-right-radius: 45px;
}

.border-bottom-left-45 {
    border-bottom-left-radius: 45px;
}


.border-p {
    border-color: var(--p-color);
}

.border-s {
    border-color: var(--s-color);
}

.border-t {
    border-color: var(--t-color);
}

.border-d {
    border-color: var(--d-color);
}

.border-g {
    border-color: var(--g-color);
}

.border-default-color {
    border-color: var(--border-default-color);
}

.border-solid {
    border-style: solid;
}




/* ----------------  Input Effects -------------- */


.focus-outline-default:focus {
    outline-color: var(--input-focus-outline-default-color);
}

.focus-outline-none:focus {
    outline: none;
}

.focus-border-default:focus {
    border-color: var(--input-focus-outline-default-color);
}


/* ------------- Modals --------------- */
.modal-1 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--zi-modal-1);
    display: none;
}

.modal-1-upper-1 {
    z-index: var(--zi-modal-1-upper-1);
}

.modal-1-upper-2 {
    z-index: var(--zi-modal-1-upper-2);
}

.modal-2 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--zi-modal-2);
    display: none;
}

.modal-2-upper-1 {
    z-index: var(--zi-modal-2-upper-1);
}

.modal-2-upper-2 {
    z-index: var(--zi-modal-2-upper-2);
}


.modal-bg-0-4 {
    background-color: rgba(255, 255, 255, 0.4);
}

.modal-bg-0-6 {
    background-color: rgba(255, 255, 255, 0.6);
}

.modal-bg-0-8 {
    background-color: rgba(255, 255, 255, 0.8);
}




.circle {
    border-radius: 50%;
}




/*  -------------- Shadow Effects --------------- */







.cursor-pointer {
    cursor: pointer;
}

.glass-container-1 {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6.5px);
    -webkit-backdrop-filter: blur(6.5px);
}

/* ---------------- Theme Settings --------------------- */


.border-bottom-1px {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.border-bottom-2px {
    border-bottom-style: solid;
    border-bottom-width: 2px;
}

.bordered-1px {
    border-style: solid;
    border-width: 1px;
}

.bordered-2px {
    border-width: 2px;
}

.bordered-3px {
    border-width: 3px;
}

.bordered-4px {
    border-width: 4px;
}

.bordered-5px {
    border-width: 5px;
}


.text-dark {
    fill: #090909;
}

.class-main {
    background-color: var(--class-main-bg-color);
    color: var(--class-main-text-color);
}

a.class-main:hover, a.class-main:focus, a.class-main:active {
    color: var(--class-main-text-color);
}

.class-main > svg {
    fill: var(--class-main-svg-color);
}

    .class-main > svg path {
        fill: var(--class-main-svg-color);
    }


.class-main > div > svg {
    fill: var(--class-main-svg-color);
}

    .class-main > div > svg path {
        fill: var(--class-main-svg-color);
    }


.class-main .border-text {
    border-color: var(--class-main-text-color);
}



.class-main.reverse-color {
    background-color: var(--class-main-text-color);
    color: var(--class-main-bg-color);
}

    .class-main.reverse-color > svg {
        fill: var(--class-main-bg-color);
    }

        .class-main.reverse-color > svg path {
            fill: var(--class-main-bg-color);
        }


    .class-main.reverse-color > div > svg {
        fill: var(--class-main-bg-color);
    }

        .class-main.reverse-color > div > svg path {
            fill: var(--class-main-bg-color);
        }


.border-color-class-main-bg {
    border-color: var(--class-main-bg-color);
}

.text-class-main-bg {
    fill: var(--class-main-bg-color);
    color: var(--class-main-bg-color);
}


.class-div-1 {
    background-color: var(--class-div-1-bg-color);
    color: var(--class-div-1-text-color);
    fill: var(--class-div-1-svg-color);
}

    .class-div-1 > svg {
        fill: var(--class-div-1-svg-color);
    }

        .class-div-1 > svg path {
            fill: var(--class-div-1-svg-color);
        }

    .class-div-1 > div > svg {
        fill: var(--class-div-1-svg-color);
    }

        .class-div-1 > div > svg path {
            fill: var(--class-div-1-svg-color);
        }


.class-button-1 {
    background-color: var(--class-button-1-bg-color);
    color: var(--class-button-1-text-color);
}

a.class-button-1:hover, a.class-button-1:focus, a.class-button-1:active {
    color: var(--class-button-1-text-color);
}

    .class-button-1:not(.disable-hover-shadow):hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        color: var(--class-button-1-text-color);
        fill: var(--class-button-1-svg-color);
    }

    .class-button-1 > svg {
        fill: var(--class-button-1-svg-color);
    }

        .class-button-1 > svg path {
            fill: var(--class-button-1-svg-color);
        }

    .class-button-1 > div > svg {
        fill: var(--class-button-1-svg-color);
    }

        .class-button-1 > div > svg path {
            fill: var(--class-button-1-svg-color);
        }


.class-contact-us {
    background-color: var(--class-contact-us-bg-color);
    color: var(--class-contact-us-text-color);
}

a.class-contact-us:hover, a.class-contact-us:focus, a.class-contact-us:active {
    color: var(--class-contact-us-text-color);
}


    .class-contact-us > div > svg {
        fill: var(--class-contact-us-svg-color);
    }


.class-white-label {
    background-color: var(--class-white-label-bg-color);
    color: var(--class-white-label-text-color);
}

a.class-white-label:hover, a.class-white-label:focus, a.class-white-label:active {
    color: var(--class-white-label-text-color);
}

    .class-white-label:hover {
        color: var(--class-white-label-text-color);
    }

    .class-white-label > div > svg {
        fill: var(--class-white-label-svg-color);
    }


.class-user-info-toggler {
    background-color: var(--class-user-info-toggler-bg-color);
    color: var(--class-user-info-toggler-text-color)
}

    .class-user-info-toggler:hover {
    }

    .class-user-info-toggler > div > svg {
        fill: var(--class-user-info-toggler-svg-color);
    }



.class-dashboard-item {
    background-color: var(--class-dashboard-item-bg-color);
    color: var(--class-dashboard-item-text-color);
}

a.class-dashboard-item:hover, a.class-dashboard-item:focus, a.class-dashboard-item:active {
    color: var(--class-dashboard-item-text-color);
}


    .class-dashboard-item > svg {
        fill: var(--class-dashboard-item-svg-color);
    }

        .class-dashboard-item > svg path {
            fill: var(--class-main-svg-color);
        }


    .class-dashboard-item > div > svg {
        fill: var(--class-dashboard-item-svg-color);
    }

        .class-dashboard-item > div > svg path {
            fill: var(--class-dashboard-item-svg-color);
        }


    .class-dashboard-item.reverse-color {
        background-color: var(--class-dashboard-item-text-color);
        color: var(--class-dashboard-item-bg-color);
    }

        .class-dashboard-item.reverse-color > svg {
            fill: var(--class-dashboard-item-bg-color);
        }

            .class-dashboard-item.reverse-color > svg path {
                fill: var(--class-main-bg-color);
            }


        .class-dashboard-item.reverse-color > div > svg {
            fill: var(--class-dashboard-item-bg-color);
        }

            .class-dashboard-item.reverse-color > div > svg path {
                fill: var(--class-dashboard-item-bg-color);
            }


/* ---------------- Shadows --------------------- */


.small-text-shadow {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.small-drop-shadow {
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}


.hover-drop-shadow-1:hover {
    transition: 0.3s;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.4));
}

.small-box-shadow {
    box-shadow: 0 0 10px 3px rgb(0 0 0 / 5%);
}

.hover-small-box-shadow:hover {
    box-shadow: 0 0 3px rgb(0 0 0 / 40%);
}

.md-box-shadow {
    box-shadow: 0 0 6px rgb(0 0 0 / 40%);
}

.hover-md-box-shadow:hover {
    box-shadow: 0 0 6px rgb(0 0 0 / 40%);
}

.big-box-shadow {
    box-shadow: 0 0 12px rgb(0 0 0 / 40%);
}

.hover-big-box-shadow:hover {
    box-shadow: 0 0 12px rgb(0 0 0 / 40%);
}


@media only screen and (min-width: 768) {
    .small-md-box-shadow {
        box-shadow: 0 0 10px 3px rgb(0 0 0 / 5%);
    }
}


/* ------------- Effects On Hover -------------- */
.transition-0-3 {
    transition: .3s;
}

.hover-mini-scale:hover {
    transition: .3s;
    transform: scale(1.005);
    -webkit-transform: scale(1.005);
}
/* -------------- Layout Header ------------------- */
.layout-header {
    z-index: var(--zi-header);
}

    .layout-header .clinic-image {
    }

.input-with-icon-left {
    position: relative;
}

    .input-with-icon-left .left-icon {
        color: var(--border-default-color);
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

#user-info-toggler {
    position: relative;
}

#user-info-menu {
    display: none;
    z-index: var(--zi-header-upper-1);
    position: absolute;
    top: 100%;
    left: 0rem;
    background-color: var(--class-user-info-toggler-bg-color);
}

    #user-info-menu.active {
    }

    #user-info-menu .menu-row:hover {
        background-color: #424242;
    }

    #user-info-menu .menu-row:first-child {
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }

    #user-info-menu .menu-row:last-child {
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }

@media only screen and (max-width: 500px) {
    #user-info-menu {
        width: 35vw;
    }
}

@media only screen and (max-width: 768px) {
    .flex-sm-1 {
        flex: 1;
    }
}
/* ----------------- HTML HELPERS ----------------------- */
.search-input-wrapper {
    position: relative;
}

    .search-input-wrapper .search-input {
        height: 70px;
        padding-right: 20px;
    }

        .search-input-wrapper .search-input::placeholder {
            font-size: 0.8rem;
            opacity: 50%;
        }

    .search-input-wrapper .search-button {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        border-radius: 5px;
    }

        .search-input-wrapper .search-button svg {
            fill: var(--class-main-bg-color);
        }


    .search-input-wrapper.eng {
        position: relative;
    }

.half-down {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%,0);
}

.half-down-wrapper {
    height: 50px;
}

.half-down input {
    border: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.2)
}





/* ------------------ Main ----------------- */

.index-right-circle {
    top: 50%;
    right: 0;
    transform: translate(50%,-50%);
}

.sick-list-item.active {
    background-color: var(--class-main-bg-color);
    color: var(--class-main-text-color);
    fill: var(--class-main-svg-color);
}

#sick-results-modal .body {
    height: calc(100% - 50px);
}


/* ------------ JPEG VIEWER */


#jpeg-viewer-modal {
    background-color: #222222;
}

    #jpeg-viewer-modal .viewer-tool-item {
        background: var(--bg-jpeg-viewer-tool-item);
        backdrop-filter: blur( 7px );
        -webkit-backdrop-filter: blur( 7px );
        border-radius: 5px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
    }

        #jpeg-viewer-modal .viewer-tool-item:hover {
            box-shadow: 0 0px 5px 5px #0000004d;
        }

        #jpeg-viewer-modal .viewer-tool-item svg, #jpeg-viewer-modal .viewer-tool-item path {
            fill: var(--text-jpeg-viewer-tool-item);
        }

    #jpeg-viewer-modal .viewer-tool-bar {
        box-shadow: 0 0 12px rgb(0 0 0);
    }

    #jpeg-viewer-modal .viewer-tool-item.active {
        background: var(--bg-jpeg-viewer-tool-item-active);
        backdrop-filter: blur( 7px );
        -webkit-backdrop-filter: blur( 7px );
        border-radius: 5px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
    }


        #jpeg-viewer-modal .viewer-tool-item.active svg, #jpeg-viewer-modal .viewer-tool-item.active path {
            fill: var(--text-jpeg-viewer-tool-item-active);
        }

    #jpeg-viewer-modal .viewer-tool-item:hover {
        border: 1px solid #ffffff;
    }


        #jpeg-viewer-modal .viewer-tool-item:hover svg {
            fill: var(--text-jpeg-viewer-tool-item-active);
        }

        #jpeg-viewer-modal .viewer-tool-item:hover path {
            fill: var(--text-jpeg-viewer-tool-item-active);
        }

.attach-img {
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


/* Forms */

.form-input-wrapper {
    position: relative;
}

    .form-input-wrapper .form-input-label-wrapper {
        font-size: 1rem;
        position: absolute;
        top: 0;
        right: 30px;
        z-index: 126;
        transform: translateY(-50%);
    }

        .form-input-wrapper .form-input-label-wrapper label {
            opacity: 0.9;
            z-index: 127;
        }

        .form-input-wrapper .form-input-label-wrapper::before {
            content: "";
            height: 6px;
            width: 100%;
            background-color: white;
            position: absolute;
            top: 50%;
            transform: translateY(-70%);
            right: 0;
        }

        .form-input-wrapper .form-input-label-wrapper.required::after {
            content: "*";
            color: #f52a2a;
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
        }

    .form-input-wrapper .form-input-error-wrapper {
        height: 20px;
        font-size: 0.7rem;
        color: #c22828;
        overflow: visible;
        white-space: nowrap;
        padding: 15px 0;
    }

/* Sweet Alert */

/* Contacts */

#contacts-result {
    height: calc(100vh - 200px);
    overflow-x: visible !important
}


.contact-list-item:hover {
    background-color: #ebebeb;
}


.contact-list-item-more {
    display: none;
    z-index: 126;
}

    .contact-list-item-more .item:hover {
        background-color: #d3d3d3;
    }

.contact-list-item-more-dots:hover > .contact-list-item-more {
    display: block;
}


.contact-list-item-actions {
    z-index: 126;
    transition: 0.3s;
}

.contact-list-item-actions-wrapper {
    width: 0px;
}

    .contact-list-item-actions-wrapper.toggled {
    }