@font-face {
    font-family: "Pluto";
    src: url("/assets/fonts/pluto/PlutoRegular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Pluto";
    src: url("/assets/fonts/pluto/PlutoLight.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Pluto";
    src: url("/assets/fonts/pluto/PlutoCondBold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: "Pluto", Helvetica Neue, Helvetica, Arial, sans-serif;

}


ul#prot_summary_general > li{
    list-style-type:none;
}
label.pb-a-label {
    position: absolute;
    left:0;
    width: 100%;
    color: black;
    font-weight: bold;
    text-align: center;
}
.panel img
{
    max-width: 100%;
}
.navbar-inverse {
    background-color: #77b800;
    border-color: #77b800;
}

.btn-icon-thick {
    background-color: #ffffff;
    position: relative;
    width: 32px;
    height: 32px;
}

.btn-icon-thick i {
    display: none;
}

.btn-icon-thick::before,
.btn-icon-thick::after {
    content: "";
    position: absolute;
    background-color: #77b800;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.btn-icon-thick::before {
    width: 6px;
    height: 20px;
}

.btn-icon-thick::after {
    width: 20px;
    height: 6px;
}

.btn-icon-thick:hover {
    background-color: #77b800;
}

.btn-icon-thick:hover::before,
.btn-icon-thick:hover::after {
    background-color: #ffffff;
}

/* TEXT */
.text-the-green {
    color: #77b800 !important;
}

/* BACKGROUND */
.bg-the-green {
    background-color: #77b800 !important;
}

/* BORDER */
.border-the-green {
    border-color: #77b800 !important;
}

/* BORDER (all sides if no border exists) */
.border-all-the-green {
    border: 1px solid #77b800 !important;
}

/* HOVER TEXT */
.hover-text-the-green:hover {
    color: #77b800 !important;
}

/* HOVER BACKGROUND */
.hover-bg-the-green:hover {
    background-color: #77b800 !important;
}

/* HOVER BORDER */
.hover-border-the-green:hover {
    border-color: #77b800 !important;
}

.display-flex {
    display: flex;
}
.display-inline-flex {
    display: inline-flex;
}
.d-flex { display:flex; }
.d-inline-flex { display:inline-flex; }
.flex-row { flex-direction:row; }
.flex-column { flex-direction:column; }

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

.align-center { align-items:center; }
.align-start { align-items:flex-start; }
.align-end { align-items:flex-end; }

.flex-wrap { flex-wrap:wrap; }
.flex-grow { flex-grow:1; }

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-default .navigation > li.active > a,
.sidebar-default .navigation > li.active > a:hover,
.sidebar-default .navigation > li.active > a:focus {
    border-bottom-width: 2px;
    border-bottom-color: #77b800;
    border-bottom-style: solid;
    color: #77b800;
    background-color: white;
}
.sidebar-xs .sidebar-default .navigation-main > li > a > span {
    background-color: #77b800;
    border-color: #77b800;
}
body.sidebar-xs .main-page-container.page-container{
    padding: 0 !important;
}
body.sidebar-xs .main-page-container.page-container >.page-content > .content-wrapper{
padding: 20px 20px;
}
body.sidebar-xs .main-page-container.page-container >.page-content > .sidebar{
    border-right-color: #fe7a02;
    border-right-width: 5px;
    border-right-style: solid;
    background: white;
    padding-right: 0;
}
body.sidebar-xs .main-page-container.page-container >.page-content > .sidebar > .sidebar-content{
    border: none;
    background: inherit;
    box-shadow: none;
}
body.is_logged .navbar-inverse{
    border-bottom-color: #fe7a02;
    border-bottom-width: 5px;
}
.index-container .btn.bg-primary{
    background-color: #55C2EE;
    border-color: #55C2EE;
}
.navbar-brand > img {
    /*height: 50px;*/
    height: 100%;
}
.dropdown.language-switch a{
    font-size: 18px;
}
.navbar-brand{
    background: white;
    height: 64px;
}
#navbar-mobile .navbar-right{
    margin-top: 10px;
    margin-bottom: 10px;
}
#navbar-second{
    background-color: #ff7900;
    border-color: #ff7900;
}
#navbar-second .navbar-nav > .active > a{
    background: none;
}

/* DataTables header color */
.table.dataTable thead th {
    background-color: #77b800;
    color: #ffffff;
}

/* keep color on sorting states */
.table.dataTable thead .sorting,
.table.dataTable thead .sorting_asc,
.table.dataTable thead .sorting_desc {
    background-color: #77b800;
    color: #ffffff;
}

/* optional: header links/icons also white */
.table.dataTable thead th:after,
.table.dataTable thead th:before {
    color: #ffffff;
}

.datatable-header:after { content:""; display:block; clear:both; }

.datatable-header .dataTables_length { float: left; }
.datatable-header .dataTables_filter { float: right; text-align: right; }

/* GREEN BUTTON */
.btn-the-green {
    background-color: #77b800;
    color: #ffffff;
    border-color: #77b800;
}

.btn-the-green:hover,
.btn-the-green:focus,
.btn-the-green:active {
    background-color: #5f9400;
    color: #ffffff;
    border-color: #5f9400;
}


/* ORANGE BUTTON */
.btn-the-orange {
    background-color: #ff7900;
    color: #ffffff;
    border-color: #ff7900;
}


.btn-the-orange:hover,
.btn-the-orange:focus,
.btn-the-orange:active {
    background-color: #e66d00;
    color: #ffffff;
    border-color: #e66d00;
}
/*blue*/
.btn-the-blue {
    background-color: #00aad2;
    color: #ffffff;
    border-color: #00aad2;
}

.btn-the-blue:hover,
.btn-the-blue:focus,
.btn-the-blue:active {
    background-color: #00aad2;
    color: #ffffff;
    border-color: #00aad2;
}
/* row container */
.all-bordered {
    display: flex;
    flex-direction: row;
    border: 1px solid #ddd;
}

/* cells */
.all-bordered > span {
    flex: 1;
    padding: 8px 12px;
    border-right: 1px solid #ddd;
}

/* remove last separator */
.all-bordered > span:last-child {
    border-right: none;
}

/*some fancy new menu*/

/*some fancy new menu*/

/* ===== MENU CONTAINER ===== */

.new_flex_menu {
    margin-bottom: 20px;
}

.new_flex_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;                 /* spacing between items */
    background: #ffffff;
}


/* ===== MENU ITEMS ===== */

.new_flex_menu li {
    flex: 1;
    position: relative;
    text-align: center;
    background: #ffffff;
}


/* REMOVE separators */
/* (deleted border-right rule) */


.new_flex_menu li a {
    display: block;
    padding: 18px 10px;
    text-decoration: none;
    color: #555;
    position: relative;
}


/* ===== ICON PLACEHOLDER (image-based) ===== */

.new_flex_menu li i {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* ===== HOVER EFFECT ===== */

.new_flex_menu li:hover {
    background-color: #f7f7f7;
}


/* ===== ACTIVE ITEM (ICON UNDERLINE ONLY) ===== */

.new_flex_menu li.active {
    background-color: #ffffff;
}

.new_flex_menu li.active a {
    color: #555;
}

.new_flex_menu li.active i {
    border-bottom: 3px solid #77b800;
    padding-bottom: 6px;
}


/* ===== HOVER LABEL (tooltip text) ===== */

.new_flex_menu li span {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    white-space: nowrap;

    background: #77b800;
    color: #ffffff;
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 3px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.new_flex_menu li:hover span {
    opacity: 1;
}


/* ===== ICON IMAGES ===== */

.icon-the-patient-overview { background-image: url('/assets/images/new_icons/patient_record.svg'); }
.icon-the-myappia { background-image: url('/assets/images/new_icons/myappia.svg'); }
.icon-the-patient-eye-length { background-image: url('/assets/images/new_icons/eye_growth_curve.svg'); }
.icon-the-patient-pshy-eye { background-image: url('/assets/images/new_icons/annual_eye_growth.svg'); }
.icon-the-patient-card { background-image: url('/assets/images/new_icons/QR.svg'); }
.icon-the-why-myopia-matters { background-image: url('/assets/images/new_icons/i.svg'); }

.icc-menu-icon{
    width: 44px;
    height: 44px;
    background-position: center center;
    background-size: contain;
    margin: 0 auto!important;
    display: inline-block;
}
.icon-the-side-patients { background-image: url('/assets/images/new_icons/patients.svg');}
.icon-the-side-add-patient { background-image: url('/assets/images/new_icons/add_patient.png');}
.icon-the-side-simulator { background-image: url('/assets/images/new_icons/Simulator.svg');}
.icon-the-side-info { background-image: url('/assets/images/new_icons/i.svg');}


/* ===== OPTIONAL ACTIVE ICON OVERRIDE ===== */

.new_flex_menu li.active i {
    /* optional alternate icon image */
}

.tool-reference {
    margin-top: 20px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #667085;
    background-color: #fafafa;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
}