/*-------------------------------------------*\
   Custom Css: styles-additional

   Index
   - 1. Root Variables
   - 2. Buttons
   - 3. Text Related
   - 4. Positioning
   - 5. Background Images
   - 6. Page Loader
   - 7. Tooltip
   - 8. Modal
   - 9. Alertify Dialog
   - 10. Vessel Custom Ballon
   - 11. Windy
\*-------------------------------------------*/

/*-------------------------------------------*\
    1. Root Variables
\*-------------------------------------------*/

:root {
    --main-bg-color: #026c8f;
    --main-hoverbg-color: #015774;
    --main-tototheo-color: #015874;
}

* {
    font-family: 14px/26px Roboto,Helvetica,sans-serif;
   }
   .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin: 10px 0;
    font-weight: 600;
  }
  @font-face {
    font-family: "San Francisco";
    src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2") format("woff2"),
         url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff") format("woff"),
         url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }

  body {
    font-family: "San Francisco", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }

  .content {
    margin-bottom: 80px;
  }

  .italic {
    font-style: italic;
  }

/*-------------------------------------------*\
    2. Buttons
\*-------------------------------------------*/
.btn-primary, .btn-primary:visited {
    background-color: var(--main-bg-color);
    border: 1px solid var(--main-bg-color);
}

.btn-primary:active {
    background-color: var(--main-bg-color)!important;
    border: 1px solid var(--main-bg-color)!important;
}

.btn-primary:hover {
    background-color: var(--main-hoverbg-color);
    border: 1px solid var(--main-hoverbg-color);
}
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: .9375rem 1.25rem;
}

.btn-close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

/*-------------------------------------------*\
    3. Text Related
\*-------------------------------------------*/
.text-primary {
    color: var(--main-bg-color)!important;
}

a.text-primary:focus, a.text-primary:hover {
    color: var(--main-hoverbg-color)!important;
}

.section-header {
    color: var(--main-hoverbg-color);
    padding-bottom: 8px;
    font-weight: bold;
}

.dashboard-widget-label {
    color: #6c757d;
    font-weight: bold;
}
.font-12, .fs-12 {
    font-size: 12px;
}
.font-13, .fs-13 {
    font-size: 13px;
}
.font-14, .fs-14 {
    font-size: 14px;
}

.font-15, .fs-15 {
    font-size: 15px;
}

.font-16, .fs-16 {
    font-size: 16px;
}

.font-17, .fs-17 {
    font-size: 17px;
}

.font-20, .fs-20 {
    font-size: 20px;
}

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

.font-lighter {
    font-weight: lighter;
}

.cursor-pointer {
    cursor: pointer !important;
}

.fw-bold {
    font-weight: bold;
}

/*-------------------------------------------*\
    4. Positioning
\*-------------------------------------------*/
.centerAlign {
    text-align: center;
}

.pad-10 {
    padding: 10px;
}

.pad-bt-10 {
    padding-top: 10px;
}

.m-left-8 {
    margin-left: 8px;
}
.m-right-8 {
    margin-right: 8px;
}

.marginLeft4 {
    margin-left: 4%;
}

.marginLeft9 {
    margin-left: 9%;
}

.marginTop10 {
    margin-top: 10px;
}

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

.full-width {
    width: 100%;
}

.p-top-10 {
    padding-top: 10px;
}
.p-left-10 {
    padding-left: 10px;
}
.p-bottom-10 {
    padding-bottom: 10px;
}
.w-70 {
    width: 70%;
}

/*-------------------------------------------*\
    Login Page
/*--------------------------------------------*/
.login-page-logo-container{
    position: relative;
    height: 350px;
    background-image: url("../images/logos/login-bg.png");
    background-size: cover;
    padding: 15px;
}
.logo-container {
    position: relative;
    top: 100px;
    /*left: 25%;*/
}
.logos{
    position: relative;
    max-width: 570px;
}
.starlink-logo{
    margin-top: 22px;
    max-width: 272px;
}
/*-------------------------------------------*\
    5. Background Images
\*-------------------------------------------*/
.auth-page-sidebar{
    background-image: url("../images/logos/loginbg.svg");
}

.hidden-elem {
    display: none;
}

/* USER PROFILE CIRCLE */
.res-circle {

    width: 14%;
    border-radius: 50%;
    background: #a3b8f7;
    line-height: 0;
    position: relative;
}

.res-circle::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/* CENTER TEXT IN CIRCLE */
.circle-txt {
    position: absolute;
    bottom: 50%;
    width: 100%;
    text-align: center;
    color: #285dfb;
    font-size: 32px;
    font-family: "Segoe UI",system-ui,"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
}

#mapid {
    display:none !important;
}

#map-frame, #map-frame-dashboard {
    height: 75vh;
    border: none;
}

.spinner-custom {
    animation: spinner-grow 1.75s linear infinite;
}

.dot-success {
    background-color: #00ff44;
}

.dot-error {
    background-color: #b20000;
}

.dot-green {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: green;
}

.dot-primary {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #5369f8;
}

.dot-secondary {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #43d39e;
}

.dot-danger {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ff1800;
}

.dot-danger-sm {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ff1800;
}

.dot-inactive {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #777777;
}

.dot-inactive-sm {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #777777;
}

.dot-success-sm {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #31c903;
}

.pulse {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #31c903;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.8);
        opacity: 1;
    }
}

.custom-widget {
    box-shadow: 0px 1px 4px 1px #ccc;
    margin-bottom: 30px;
    /* margin-left: 20px; */
}

body[data-layout="topnav"] .container-fluid {
    max-width: 95%;
}

.full-width {
    width: 100%;
}

/*-------------------------------------------*\
    6. Page Loader
\*-------------------------------------------*/
#loader {
    border: 9px solid #f3f3f3;
    border-radius: 50%;
    border-top: 9px solid var(--main-bg-color);
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}

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

.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.badge-custom {
    background-color: var(--main-bg-color)!important;
    padding: 8px;
    cursor: pointer;
    float: none !important;
}

/*-------------------------------------------*\
    7. Tooltip
\*-------------------------------------------*/
.fleet-card > .tooltip-inner {
    background-color:  #616161;
    border-radius: 0.1px;
}

.fleet-card > .bs-tooltip-auto[x-placement^="top"] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: #fff;
}

.card-body > .tooltip-inner>ul {
    list-style-type: none;
}

.fleet-card-bottom {
    margin-bottom: -5px;
}

.company_header {
    font-size: 26px;
    font-weight: 900;
    color: var(--main-hoverbg-color);
}

.fleet-card-bottom-div {
    margin-bottom: .6rem !important;
}

/*-------------------------------------------*\
    8. Modal
\*-------------------------------------------*/
.modal-header {
    background-color: #015774;
}

.modal-title {
    color: white;
}

.close {
    color: white;
}

/*-------------------------------------------*\
    9. Alertify Modal
\*-------------------------------------------*/
.alertify .ajs-dialog {
    border: none;
}

.ajs-header {
    background-color: #015774 !important;
    color: white !important;
}

.ajs-ok {
    background-color: #026c8f;
    color: white;
    border-bottom-left-radius: 4.8px;
    border-bottom-right-radius: 4.8px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(1, 87, 116);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(1, 87, 116);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgb(1, 87, 116);
    border-top-left-radius: 4.8px;
    border-top-right-radius: 4.8px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    float: right;
}

.ajs-ok:hover {
    color: #e2e6ea;
    background-color: #015774;
    border-color: #dae0e5;
}

.ajs-cancel {
    background-color: #f8f9fa;
    border-bottom-color: rgb(218, 224, 229);
    border-bottom-left-radius: 4.8px;
    border-bottom-right-radius: 4.8px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(218, 224, 229);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(218, 224, 229);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgb(218, 224, 229);
    border-top-left-radius: 4.8px;
    border-top-right-radius: 4.8px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: rgb(33, 37, 41);
    cursor: pointer;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
}

.ajs-cancel:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.profile-dropdown {
    display: block;
}

.item-visible {
    display: block;
}

.item-invisible {
    display: none;
}

.left-side-menu-condensed .user-profile .pro-user-desc, .left-side-menu-condensed .user-profile .pro-user-name {
    display: block;
}

.pro-user-name {
    display: block;
}

.chart-period-selection {
    padding-top: 10px;
    padding-right: 24px;
}

.alertsNotificationNum {
    margin-left: 5px;
}

#windy {
    width: 99%;
    height: 73vh;
}

/*-------------------------------------------*\
    10. Vessel Custom Ballon
\*-------------------------------------------*/
.custom-popup .leaflet-popup-content-wrapper {
    border-radius: 4px;
    font-size: 13px;
}

.ballon-header {
    background: #015874;
    color: white !important;
    /* font-size: 14px; */
    padding: 1px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ballon-header>h3 {
    margin-left: 19px;
    color: white;
    background: #015874;
    color: white !important;
    font-size: 17px;
    padding: 1px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.popup-label-container {
    margin-top: 3px;
}

.view-more-link {
    margin-top: -10px;
    padding: 10px;
}

.leaflet-popup-content {
    margin: -1px -1px !important;
}

.view-more-popup {
    color: #015874;
    font-size: 14px;
    cursor: pointer;
}

.view-more-popup:hover {
    color: #002d3c;
}

.mTop10 {
    margin-top: 10px;
}

.pad10 {
    padding: 10px;
}

/*-------------------------------------------*\
    11. Windy
\*-------------------------------------------*/

#weather_checkbox {
    cursor: pointer;
}

/* #windy #logo-wrapper {
    display: none;
} */

.custom-check-icon {
    color: green !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}


/*-------------------------------------------*\
    12. Datatables Export Buttons
\*-------------------------------------------*/
.dt-buttons {
    float: right;
    margin-top: -5px;
    display: block;
}
.dt-buttons button {
    background: transparent;
    border: none;
    font-size: 17px;
}
.dt-buttons button:hover{
    /* background-color: var(--main-hoverbg-color); */
    /* border: 1px solid var(--main-bg-color); */
    /* border-color: var(--main-bg-color) !important; */
}
#datatables_buttons_info{
    border: unset;
}
#datatables_buttons_info div {
    background-color: white;
    color: var(--main-bg-color);
}
#datatables_buttons_info h2 {
    background-color: var(--main-bg-color);
}

/*-------------------------------------------*\
    13. Headers Scroll
\*-------------------------------------------*/
.sidebar-content {
    position:fixed;
}

.topnav-scrolled {
    position: fixed !important;
    z-index: 100;
    width: 100%;
    background-color: var(--main-tototheo-color);
}
.topnav-scrolled #menu-bar li a, .topnav-scrolled #menu-bar li a svg {
    color: white;
}

.topnav-scrolled #menu-bar li a, .topnav-scrolled #menu-bar li a svg {
    color: white;
}

.topnav-scrolled #menu-bar li a.active {
    padding-left: 9px;
    padding-right: 9px;
}

.topnav-scrolled #menu-bar li .active {
    border-bottom: 3px solid white;
    background-color: var(--dark-secondary);
}

.content-page-scrolled {
    margin-top: 54px !important;
}
.nav-item .active {
    background-color: var(--main-tototheo-color) !important;
    color: white !important;
}
.nav-item .active {
    background-color: #034357 !important;
    border: 1px solid white;
    color: white;
}

.stop-impersonate-icon {
    color: red !important;
}
.site-links {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.notification-menu {
    right: 0 !important;
    left: auto !important;
}

.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit;
}

.float-end {
    float: right !important;
}

[data-simplebar] {
    position: relative;
}

/* .simplebar-height-auto-observer-wrapper {
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
  } */

  .simplebar-content-wrapper {
    overflow: scroll !important;
    max-height: 350px;
    padding-bottom: 120px;
  }



.success {
    background-color: #31c903;
}
.success-color {
    color: #31c903;
}
.error-color {
    color: #ff1800;
}
.danger {
    background-color: #ff1800;
}
.warning-color {
    color: #ffc107;
}

.notify-details {
    text-overflow: unset;
    white-space: normal !important;
}

.notification-default {
    background-color: #5369f8;
}
.notification-low {
    background-color: #b0c632;
}
.notification-medium {
    background-color: #ff5c1c;
}
.notification-high {
    background-color: #ff1800;
}

.no-bottom-border {
    border-bottom: unset !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after {
    cursor: pointer;
}

/* CUSTOM DATATABLES */
/* table.dataTable tbody th, table.dataTable tbody td {
    border-top: none !important;
} */

table.dataTable thead tr th {
    border-top: none !important;
    border-bottom: none !important;
}
.dataTables_filter input {
    background-color: var(--dark-secondary);
}
/* /CUSTOM DATATABLES */

/* CUSTOM SELECT */
.select2-container--default .select2-selection--single {
    display: inline-block !important;
    width: 100% !important;
    padding: 0.31rem 1.75rem 0.30rem 0.25rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #a1a8b8 !important;
    vertical-align: middle !important;
    border-radius: 0.3rem !important;
    appearance: none !important;
    height: calc(1.5em + 1rem + 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px !important;
    right: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #a1a8b8 !important;
}
.select2-container--default .select2-results__option--highlighted {
    background-color:  var(--main-hoverbg-color) !important;
}
/* /CUSTOM SELECT */

.widget-table tbody td {
    border-top: none !important;
}

.widget-table th {
    border-top: none;
    border-bottom: none !important;
}

/* .progress-circle__stroke_grey {
    stroke: #fff !important;
} */

.table thead {
    color: rgba(128,159,184,1);
}
.stroke_grey{
    stroke: #fff !important;
  }

.text-underline-dotted {
    border-bottom: 1px solid;
}

.bg-white {
    background: white;
}

.uptime-badge {
    padding: 9px;
    font-size: 23px;
}

.searchable, .searchable:focus {
    border-radius: 0;
    background: white;
}

.feature-widget {
    border: 1px solid var(--main-hoverbg-color);
}

.img-class-container {
    border: 1px solid var(--main-hoverbg-color);
}
.link-primary, .link-primary:hover {
    color: var(--main-hoverbg-color);
}
/* Fix datatable responsive text wrap on columns*/
@media screen and (max-width: 600px) {
    table.dataTable.nowrap th, table.dataTable.nowrap td {
        white-space: inherit!important;
    }
}

.max-content {
    width: max-content;
}

/* DATATABLE FILTERS */
.flex-container {
    display: flex;
}

.custom-control {
    margin-right: 20px;
}
.filters-box {
    position: absolute;
    margin-left: 11%;
    margin-top: 7px;
}
@media (max-width: 1300px) {
    .filters-box {
        position: relative;
        margin-left: unset;
        margin-top: unset;
    }
}
/* /DATATABLE FILTERS */
.notes-counter{
    font-size: 10px;
    margin-top: 1px;
    height: 11px;
    width: 20px;
    text-align: center;
    padding: 1px;
    border-radius: 0.3rem;
    background: #292d36;
    display: inline-block;
    line-height: 1;
    color:white;
}

.noti-icon-badge {
    background-color: #ed0000 !important;
    color: white;
    font-weight: bold !important;
    font-size: 12px;
    width: 17px;
    vertical-align: super;
}

.borderContainer {
    border: 1px solid #8f8f8f;
    border-radius: 7px;
    padding: 3px;
    text-align: center;
}

.selectedLabel {
    background: var(--main-tototheo-color)!important;
    padding: 3px;
    color: white;
    border-radius: 2px;
}

.cursor-unset {
    cursor: auto;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 4px;
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: var(--main-tototheo-color);
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px var(--main-tototheo-color);
  }
  

::-webkit-scrollbar-corner {
    background: var(--main-tototheo-color);
}

/* /Custom Scrollbar */

/* Custom Horizontal Scrollbar */
::-webkit-scrollbar {
    height: 3px; /* Set the height to make it thinner */
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: var(--main-tototheo-color);
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px var(--main-tototheo-color);
}
/* /Custom Horizontal Scrollbar */

/* Sidebar Theme Fix ** */
#sidebar-menu > ul > li > a {
    display: inline-block;
}

/* Dashboard styles */
.jcalendar-controls{
    display: none;
}
#traffic-chart-calendar {
    cursor: pointer;
}
.vessel-name {
    font-size: 18px;
}
th.dpass, td.dpass {display: none;}
.connection-Online {
    color: green;
}
.connection-Offline {
    color: red;
}
#pills-tabContent {
    padding: 4px 0 0 0;
}


.period_selection_nav {
    list-style: none;
    margin: 0;
    padding: 0 8px 0px 49px;
    overflow: hidden;
    /* background-color: #f1f1f1; */
    border-bottom: 1px solid #868686;
}

.period-selection {
    cursor: pointer;
}

.period_selection_nav li {
    float: left;
}

.period_selection_nav li a {
    display: block;
    /* color: #333; */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.nperiod_selection_navav li a:hover {
    background-color: #ddd;
    color: white;
}

.dark-mode .period_selection_nav .active a {
    border-bottom-color: white;
    color: white;
    font-weight: 700;
}
.light-mode .period_selection_nav .active a {
    border-bottom-color: white;
    color: var(--main-bg-color);
    font-weight: 700;
}
.usage-container {
    margin-top:90px;
}
.table-logo-preview {
    width: 50px;
   transition: transform .5s ease;
}
.table-logo-preview:hover {
    transform: scale(5);
}
.res-circle {
    width: 40px;
    height: 40px;
    font-size: 16px;
}
.circle-txt {
  font-size: 19px;
}
li.period-download {
    float: right;
    margin-top: 7px;
}
li.period-download .btn{
    background: var(--main-bg-color);
    border: var(--main-bg-color);
}
/* /Dashboard styles */

.d-none-important {
    display: none !important;
}

/* Left Sidebar Fix */
.sidebar-enable .navbar-custom .button-menu-mobile.disable-btn {
    display: block;
}

.sidebar-enable #sidebar-menu li a{
    width: 100%;
} 
/* /Left Sidebar Fix */

.modal-center {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fade-out {
    opacity: 0;
}

.source-label {
    padding: 5px;
    border-radius: 5px;
    color: white;
    border-style: double;
    margin-left: -7px;
}
.ais-color {
    background-color: #3cbb44;
}
.h3-cell-color {
    background-color: #234cc8;
}
.reg-address-color {
    background-color: #ea8111;
}

.mt-5-neg {
    margin-top: -5px;
}
.mt-10-neg {
    margin-top: -10px;
}
.mt-20-neg {
    margin-top: -20px;
}

.ml-20-neg {
    margin-left: -20px;
}

#sidebar-menu > ul > li > a .fas {
    width: 32px;
}
#sidebar-menu > ul > li > a i {
    width: 26px;
}

#sidebar-menu #emptySubscriptionsCounter {
    padding-right: 7px;
}
.topbar-nav #emptySubscriptionsCounter {
    width: 0px !important;
    margin-right: 20px !important;
    position: initial;
}

.dashboard-ais-label {
    position: absolute;
    right: 2%;
    padding: 2px;
    top: 42%;
}

.terminal-healthy {
    color:#1cc51c;
}
.terminal-healthy-badge {
    background:#1cc51c;
}
.terminal-warning {
    color: darkorange;
}
.terminal-warning-badge {
    background: darkorange;
}
.terminal-danger{
    color: red;
}
.terminal-danger-badge{
    background: red;
}
.column-word-wrap {
    white-space: normal;
    word-wrap: break-word;
}

/* Custom Radio Button */
.tototheo-radio input[type="radio"] {
    display: none;
}
.tototheo-radio input[type="radio"] + label:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px; 
    border-radius: 50%;
    border: 2px solid var(--main-bg-color);
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
}
.tototheo-radio input[type="radio"]:checked + label:before {
    background-color: var(--main-bg-color);
    cursor: pointer;
}
.tototheo-radio input[type="radio"]:hover {
    cursor: pointer;
}
.tototheo-radio label {
    cursor: pointer;
}
/* /Custom Radio Button */

.selected-primary {
    background-color: var(--main-hoverbg-color);
    color: white;
}

/*  Custom Datatables */
.light-mode .page-item.active .page-link {
    background-color: var(--main-hoverbg-color);
    border-color: var(--main-hoverbg-color);
}

@media (max-width: 767.98px) {
    li.paginate_button.next, li.paginate_button.previous {
        display: inline-block;
        font-size: 12px;
    }
}

.page-item.disabled .page-link {
    color: #b6bbc6;
}
.light-mode .page-link {
    color: var(--main-hoverbg-color);
}
.dataTables_empty {
    color: red;
}
/* / Custom Datatables */

/* Custom Fieldset */
fieldset {
    border: 1px solid #ccc;
    padding-left: 10px;
    padding-right: 5px;
    border-radius: 5px;
}
legend {
    font-size: 18px;
    font-weight: bold;
    padding: 0 10px;
    width: auto;
    line-height: 8px;
}
/* /Custom Fieldset */

/* Custom Icon */
.custom-icon {
    border-radius: 50%;
    border: 2px solid #fff;
    padding: 10px;
    background: #1e1e25;
    border-style: outset;
    width: 42px;
    text-align: center;
}
/* /Custom Icon */
.border-radius {
    border-radius: 10px;
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgb(255, 255, 255);
}

.light-mode .text-white {
    color: #6c757d !important;
}

.grey-text {
    color: #4d4e50;
}