/** ------------------------------------ /  GENERAL  / ------------------------------------ **/
:root{
  --p-mb: 16px;
  --header-height: 80px;
  --page-nav-height: 60px;
  --container-padding: 25px;
  --container-max-width: 1440px;
  --gap: 16px;
  --card-gap: 6px;
  --space-top: 72px;
  --space-bottom: 72px;
  --transition-duration: 0.25s;
  --transition-timing-function: ease;
  --primary: rgb(0, 94, 168);
  --dark-blue: #004780;
  --secondary: #116b6e;
  --tertiary: #516369;
  --green: #00afa5;
  --green-secondary: #e8f6ee;
  --green-tertiary: #096731;
  --red: #ae0060;
  --dark-red: #b40b46;
  --emergency-red: #d80f55;
  --blue: #006bbf;
  --light-gray: #f0f5f9;
  --light-gray-secondary: #7398bb;
  --primary-rgb: 0, 94, 168;
  --secondary-rgb: 17, 107, 110;
  --tertiary-rgb: 81, 99, 105;
  --green-tertiary-rgb: 9, 103, 49;
  --light-gray-rgb: 240, 245, 249;
  --primary-gradient: linear-gradient(
  	0deg,
  	#007bba -23.14%,
  	#005699 82.67%,
  	#005598 82.67%
  );
  --secondary-gradient: linear-gradient(180deg, #116b6e 0%, #148184 100%);
  --tertiary-gradient: linear-gradient(180deg, #516369 0%, #63787f 100%);
  --text-default: #171717;
  --text-medium: #545454;
  --text-light: #747474;
  --link-color: var(--primary);
  --link-color-hover: #0072cc;
  --link-color-over: var(--link-color-hover);
  --secondary-hover: #0f777a;
  --hover-color: var(--link-color-hover);
  --white: #fff;
  --black: #171717;
  --white-rgb: 255, 255, 255;
  --box-background: #f0f8ff;
  --content-background: rgba(240, 245, 249, 0.8);
  --shadow-default: 0px 8px 24px rgba(22, 65, 147, 0.15);
  --shadow-hover: 0px 3px 16px rgba(22, 65, 147, 0.12),
  	0px 8px 34px rgba(22, 65, 147, 0.2);
  --shadow-hover-list-item: 0px 34px 70px rgba(22, 65, 147, 0.15);
  --shadow-hover-accordion: 0px 12px 34px rgba(22, 65, 147, 0.18),
  	0px 24px 80px rgba(22, 65, 147, 0.1);
  --shadow-card: 0px 4px 24px rgba(22, 65, 147, 0.15),
  	0px 3px 8px rgba(22, 65, 147, 0.05);
  --shadow-radio-focus: 0px 12px 40px rgba(22, 65, 147, 0.15);
  --border-radius: 100px;
  --border-color: #d5deed;
  --orange: #ff6600;
  --smooth-red: #e63946;
  --dark-green: #5f7c81;
}

/* hide lastpass icon*/
div[data-lastpass-icon-root]{display: none!important;}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;

}


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



/** ------------------------------------ /  COLORS  / ------------------------------------ **/
.main-blue{
    color: var(--primary);
}

.red{
    color: var(--red);
}

.red-emergency{
    color: var(--emergency-red);
}

.green{
    color: var(--green);
}

.orange{
    color: var(--orange);
}

.gray{
    color: var(--text-light);
}

.smooth-red{
    color: var(--smooth-red);
}

.dark-green{
    color: var(--dark-green);
}

.text-muted {
    color: #c3c3c3!important;
    cursor: not-allowed!important;; 
  }
  


/** ------------------------------------ /  BODY & CONTENT  / ------------------------------------ **/

.page{
    min-height: 100%;
    display: flex;
    flex-direction: column;

}

.content{
    margin-top: 80px;
   /*  margin-bottom: 40px; */
}

.page .content{
    margin-left: 270px;
    transition: all 0.8s ease;
    width: calc(100% - 270px);
}


.content-tool{
    margin-top: 80px;
    margin-bottom: 40px;
    overflow: hidden!important;
    max-width: 100%;
}

.page .content-tool{
    transition: all 0.8s ease;
    width: 100%;
}


/** ------------------------------------ /  SIDEBAR  / ------------------------------------ **/
/* Media query for smaller screens */
@media (max-width: 768px) {
    .page .sidebar {
        width: 70px!important; 
    }
    .side-bar-text{
        display: none;
    }

    .page .content{
        margin-left: 80px;
        width: calc(100% - 80px);
    }

      /* Apply styles for screens with a maximum width of 768px (adjust as needed) */
  body {
    background-color: #fff;
    overflow-x: hidden!important;
}

table{
    max-width: 100%!important;
}
}

.page .sidebar{
    height: 100vh;
    width: 250px;
    background-color: var(--primary);
    top: 0;
    left: 0;
    position: fixed;
    transition: all 0.8s ease;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: solid 3px var(--dark-blue-CI);
    color:  var(--white);
    z-index: 1000;
}


.sidebar-content{
    padding-top: 100px;
    padding-left:10px;
}

.opacity-none{
    opacity: 0;
}




/** ------------------------------------ /  NAVBAR  / ------------------------------------ **/
.navbar-main{
    height: 70px;
    color: var(--primary);
    box-shadow: 0px 4px 24px rgba(22, 65, 147, 0.15), 0px 3px 8px rgba(22, 65, 147, 0.05);
}

 .navbar-brand{
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 10px;
    transition: all 0.8s ease;
}

.navbar-brand:hover{
    color: var(--link-color-hover);
    cursor: pointer;
}

.fa-main-nav{
    padding: 10px;
}

.ribbon-1 {
    position: fixed;
    background: var(--primary);
    box-shadow: 0 0 0 999px var(--primary);
    clip-path: inset(0 -100%);
    color: var(--white);
  }

  .right-ribbon {
    inset: 0 0 auto auto;
    transform-origin: 0 0;
    transform: translate(29.3%) rotate(45deg);
  }



  /** ------------------------------------ /  FOOTER  / ------------------------------------ **/
  footer {
    padding: 20px;
    background: var(--white);
    height: 70px;
    color: var(--primary);
    box-shadow: 0px -4px 8px rgba(22, 65, 147, 0.15), 0px 3px 8px rgba(22, 65, 147, 0.05);
    margin-top: auto;
}

.footer-content {
   /*  max-width: 1200px; */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content p {
    font-size: 14px;
}

.footer-content ul {
    list-style: none;
    display: flex;
}

.footer-content li {
    margin-right: 20px;
}

.footer-content a {
    color: #fff;
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}



/** ------------------------------------ /  MARGINS  / ------------------------------------ **/
.margin-top-20{
    margin-top: 20px;
}
.margin-top-40{
    margin-top: 40px;
}

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


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


/** ------------------------------------ /  GLOBALS  / ------------------------------------ **/
.resize-none{
    resize: none;
}

.cursor-pointer{
    cursor: pointer;
}

.cursor-not-allowed{
    cursor: not-allowed;
}

.btn-close-white {
    color: #fff;
}

.btn-close-white:hover {
    color: #fff;
}

.bold{
    font-weight: bold;
}

.width-100{
    width: 100%;
}

.display-none{
    display: none;
}

.is-invalid{
    border-color: #dc3545;
}

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

.float-right{
    float: right;
}

.active-filter{
    color: var(--link-color-hover);
    text-decoration: underline;
}

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



/** ------------------------------------ /  CONTAINERS  / ------------------------------------ **/
.container .border-container{
    padding: 20px;
    border: 1px solid var(--white);
    border-radius: 0.375rem;
    background-color: var(--light-gray-secondary);
}



.disabled-row{
    color: #888; /* Grayed out text color */
  background-color: #f2f2f2; /* Grayed out background color */
  opacity: 0.6; /* Reduced opacity */
  cursor: not-allowed; /* Change cursor to indicate non-interactivity */
}




@media (max-width: 970px) {
.navbar-text{
    display: none;
}
}





.info-field {
    margin-bottom: 5px;
    text-align: center;
}

/** ------------------------------------ /  MAGNIFIC POPUP IFRAME  / ------------------------------------ **/
.mfp-iframe-holder .mfp-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    max-width: 80%;
    cursor: none;
  
  }

  .mfp-wrap {
    cursor:context-menu; 
    z-index: 100000!important;
  }