@font-face{
    font-family: Nevia-Light ;
    src: url(Nevia-Light-AF65d86a047dbed.otf);
    font-style: normal;
    font-weight: 200;
}

.esdy-font{
    font-family: Nevia-Light;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    /*color: #fff ! important;*/
}


@font-face{
    font-family: KrossNeueGrotesk-Light ;
    src: url(KrossNeueGrotesk-Light.woff);
    font-style: normal;
    font-weight: 200;
}

/*p,div,h1,h2,h3,h4,table{
    font-family: KrossNeueGrotesk-Light;
    font-weight: 500 !important;
}*/

a{
	text-decoration: none;
	color: inherit;
}
a:hover{
	text-decoration: none;
	color: inherit;
}
.home-top-nav{
	font-size: 12px;
	color: black;
	list-style-type: none;
	float: right;
}

.home-top-nav li{
	display: inline-block;
}

.home-top-nav li:after{
	content: '|';
	padding: 10px;
}

.home-top-nav li:last-child{
	content: '';
}


.nav {
  overflow: hidden;
  z-index: 9;
  font-size: 14px;
}

.nav > li {
  z-index: 9;
  text-align: left;
}

.nav > li > a, .nav li ul li a {
  display: block;
  padding: 14.2px 20px;
  color: #fff;
  list-style-type: none;
  text-align: left;
}

.nav li ul li a:hover {
  background: rgba(17, 143, 239,1);
  color: white !important;
}

.nav > li:hover {
  background: rgba(17, 143, 239,1);
  color: black !important;
}

.nav li ul {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav > li:hover ul {
  display: block;
}

.homepagebox{
	width:100%;
	font-size:12px;
	border:1px solid #118fef;
	padding:10px;
	border-radius: 10px;
	background: rgba(17, 143, 239,0.3) !important;
	margin-bottom: 20px;
}

.homepagebox:hover{
	background: rgba(17, 143, 239,0.45);
	cursor: pointer;
}

.homepageboxwhite{
	width:100%;
	font-size:12px;
	border:1px solid #118fef;
	padding:10px;
	border-radius: 10px;
	margin-bottom: 20px;
}

.ut-hr-txt {
  color: #AAAAAA;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
}

.ut-hr-txt hr {
  background-color: #AAAAAA;
  height: 1px;
  margin-top: 0.7em !important;
  margin-bottom: 0px !important;
  width: 100%;
}

.ut-hr-txt span {
  padding-left: 1em;
  padding-right: 1em;
  text-align: center;
  position: relative;
  top: -0.8em;
  background-color: #FFFFFF;
}

.modal-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    animation: modal-slide-in 0.3s ease-out;
}

  @keyframes modal-slide-in {
    from {
      right: -100%;
    }
    to {
      right: 0;
    }
  }

  @media (max-width: 768px) {
    .modal-panel {
      width: 100%;
    }
  }



.timeline {
    position: relative;
    margin: 0 auto;
}

.timeline-item {
    padding: 3px 0;
    position: relative;
    border-left: 2px solid #d3d3d3;
    margin-left: 25px;
}

.timeline-item.complete::before {
    content: '✔';
    position: absolute;
    left: -30px;
    top: 12px;
    background-color: #fff;
    border: 2px solid #092680;
    color: #092680;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
}

.timeline-item.active::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 12px;
    background-color: #ff006e;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ff006e;
}

.timeline-item.pending::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 12px;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border: 2px solid #d3d3d3;
    border-radius: 50%;
}

.timeline-date {
    font-size: 12px;
    color: #808080;
}

.timeline-date span {
    display: block;
}

.timeline-content h4 {
    font-size: 16px;
    margin: 1px 0;
}

.timeline-content p {
    font-size: 14px;
    color: #808080;
}


    
.prj_timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: 2px solid #d3d3d3;
    position: relative;
    padding-top: 20px;
}

.prj_event {
    position: relative;
    text-align: center;
    width: 25%;
}



        .switch {
            position: relative;
            display: inline-block;
            width: 45px;
            height: 20px;
        }

        .switch input {
            opacity: 0; /* Hide the default checkbox */
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 20px; /* Rounded corners */
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%; /* Circle */
        }

        .switch input:checked + .slider {
            background-color: #2196F3; /* Blue when checked */
        }

        .switch input:checked + .slider:before {
            transform: translateX(22px); /* Move to the right */
        }

.prj_circle {
    height: 20px;
    width: 20px;
    background-color: white;
    border: 2px solid #d3d3d3;
    border-radius: 50%;
    margin: 0 auto;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.prj_event.prj_completed .prj_circle {
    background-color: #4caf50;
    border-color: #4caf50;
}

.prj_event.prj_completed ~ .prj_event .prj_circle {
    background-color: white;
    border-color: #d3d3d3;
}

.prj_info {
    margin-top: 2px;
}

.prj_status {
    /*font-weight: bold;*/
}

.prj_event.prj_completed .prj_status {
    color: #4caf50;
}


.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  position: relative;
}

.org-node {
  text-align: center;
  position: relative;
  padding: 20px;
}

.org-node.parent:after {
  content: "";
  width: 2px;
  height: 30px;
  background: #888;
  position: absolute;
  bottom: -15px;
}

.org-node img {
  border-radius: 50%;
  border: 5px solid #ff6c00;
}

.name {
  font-weight: bold;
  margin: 10px 0 5px;
}

.title {
  color: #ff6c00;
}

.connector-vertical {
  width: 2px;
  height: 30px;
  background-color: #888;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.connector-vertical::before,
.connector-vertical::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #888;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.connector-vertical::before {
  top: -5px;
}

.connector-vertical::after {
  bottom: -2px;
}

.connect-parent {
  height: 100px;
  top: -80px;
}

.connector-horizontal-wrapper {
  display: flex;
  justify-content: space-around;
  width: 100%;
  position: relative;
}

.org-children {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.org-node.child:first-child:before,
.org-node.child:last-child:after {
  display: none;
}

.org-node.child:before {
  content: "";
  width: 50%;
  height: 2px;
  background: #888;
  position: absolute;
  right: 50%;
  top: -10px;
}

.org-node.child:after {
  content: "";
  width: 50%;
  height: 2px;
  background: #888;
  position: absolute;
  left: 50%;
  top: -10px;
}

.org-children .org-chart:before {
  content: "";
  width: 50%;
  height: 2px;
  background: #888;
  position: absolute;
  left: 0%;
  top: -10px;
}

.org-node.null {
  width: 10px;
  height: 1px;
  padding: 2px 10px;
}

@media (max-width: 1024px) {
  body,
  .org-chart {
    align-items: flex-start;
    justify-content: start;
  }
  .org-children {
    flex-direction: column;
  }

  .child:after,
  .org-node.child:before,
  .null .connector-vertical {
    display: none;
  }

  .org-node.parent:after {
    height: 380px;
    top: 200px;
    left: 20px;
  }

  .org-children .org-chart .org-node.parent:after {
    height: 988px;
    top: -10px;
    left: 30px;
  }
  .org-children .child {
    margin-left: 25px;
  }
  .parent1 {
    margin-left: 15px !important;
  }
  .parent1 .connector-vertical {
    width: 40px;
    left: 25px;
  }
  .connector-vertical {
    top: 100px;
    width: 30px;
    height: 2px;
    left: 20px;
  }
  .org-children .org-chart:before {
    width: 30px;
    left: 20px;
  }
  .org-children .org-chart {
    padding-left: 20px;
  }

  .connector-vertical::before {
    left: 1px;
    top: -4px;
  }

  .connector-vertical::after {
    right: -10px !important;
    left: auto;
    top: -4px;
  }
}


.oneline {
 overflow: hidden;
 display: -webkit-box;
 -webkit-line-clamp: 1; /* number of lines to show */
         line-clamp: 1; 
 -webkit-box-orient: vertical;
}

.twoline {
 overflow: hidden;
 display: -webkit-box;
 -webkit-line-clamp: 2; /* number of lines to show */
         line-clamp: 2; 
 -webkit-box-orient: vertical;
}


.threeline {
 overflow: hidden;
 display: -webkit-box;
 -webkit-line-clamp: 3; /* number of lines to show */
         line-clamp: 3; 
 -webkit-box-orient: vertical;
}
/*CIRCLES*/

/*CIRCLES*/


        #voice-output {
            margin-top: 20px;
            width: 300px;
            height: 100px;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #fff;
            overflow-y: auto;
        }

/*
 * Loading Dots
 * Can we use pseudo elements here instead :after?
 */
.loading span {
  display: inline-block;
  vertical-align: middle;
  width: .6em;
  height: .6em;
  margin: .19em;
  background: #007DB6;
  border-radius: .6em;
  animation: loading 1s infinite alternate;
}

/*
 * Dots Colors
 * Smarter targeting vs nth-of-type?
 */
.loading span:nth-of-type(2) {
  background: #008FB2;
  animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
  background: #009B9E;
  animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
  background: #00A77D;
  animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
  background: #00B247;
  animation-delay: 0.8s;
}
.loading span:nth-of-type(6) {
  background: #5AB027;
  animation-delay: 1.0s;
}
.loading span:nth-of-type(7) {
  background: #A0B61E;
  animation-delay: 1.2s;
}

/*
 * Animation keyframes
 * Use transition opacity instead of keyframes?
 */
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*MSG CONTAINER*/

#nyla-chat-box-container {
    max-height: 100%;
    overflow-y: auto;
    /*background-color: #f9f9f9;*/
}

.nyla-msg-container {
  width: 100%;
  height: auto;
  position: relative;
  display: flex; /* Use flexbox for alignment */
  flex-direction: column; /* Stack messages vertically */
  margin: 10px 0; /* Add margin for spacing */
  font-size: 12px;
}

.nyla-msg-container .bot,
.nyla-msg-container .me {
  max-width: 80%; /* Set max-width to 80% */
  width: auto; /* Allow width to adjust based on content */
  padding: 10px;
  margin-bottom: 10px; /* Add margin for spacing between messages */
  display: flex; /* Use flexbox for content alignment */
  align-items: center; /* Align items vertically in the center */
}

.nyla-msg-container .bot {
  align-self: flex-start; /* Align bot message to the left */
}

.nyla-msg-container .me {
  align-self: flex-end; /* Align user message to the right */
}

.nyla-msg-container .bot-text {
  background: #252a31; /* Background color for bot text */
  color: white;
  padding: 10px; /* Optional: Add padding for better spacing */
  border-radius: 5px; /* Round the corners of the text background */
}

.nyla-msg-container .me-text {
  background: #252a31; /* Background color for user text */
  color: white;
  margin-right: 10px;
  padding: 10px; /* Optional: Add padding for better spacing */
  border-radius: 5px; /* Round the corners of the text background */
}

.nyla-msg-container img {
  width: 40px; /* Set the width for the images */
  height: 40px; /* Set the height for the images */
  border-radius: 50%; /* Make the images circular */
  margin-right: 10px; /* Add spacing between image and text */
}

.nyla-msg-container p {
  margin: 0; /* Remove default margin from paragraphs */
}
/*MSG CONTAINER*/



.suggestions-box {
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1000;
    display: none; /* Hidden by default */
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

.ribbon {
 position:absolute!important;
 top:-5px;
 left:-5px;
 overflow:hidden;
 width:96px;
 height:94px
}
.ribbon .ribbon-inner {
 text-align:center;
 color:#fff;
 top:24px;
 left:-31px;
 width:135px;
 padding:3px;
 position:relative;
 transform:rotate(-45deg)
}
.ribbon .ribbon-inner:before,
.ribbon .ribbon-inner:after {
 content:"";
 border-top:5px solid transparent;
 border-left:5px solid;
 border-left-color:inherit;
 border-right:5px solid transparent;
 border-bottom:5px solid;
 border-bottom-color:inherit;
 position:absolute;
 top:20px;
 transform:rotate(-45deg)
}
.ribbon .ribbon-inner:before {
 left:0;
 border-left:2px solid transparent;
 color:#2e8fda
}
.ribbon .ribbon-inner:after {
 right:-3px;
 border-bottom:3px solid transparent;
 color:#2e8fda
}
.ribbon .ribbon-open {
 background-color:#268ddd;
 border-color:#1c72b4
}
.ribbon .ribbon-accepted {
 background-color:#1aaf5d;
 border-color:#138345
}
.ribbon .ribbon-success {
 background-color:#1fcd6d;
 border-color:#18a155
}
.ribbon .ribbon-overdue {
 background-color:#f59d00;
 border-color:#c27c00
}
.ribbon .ribbon-draft {
 background-color:#94a5a6;
 border-color:#788e8f
}
.ribbon .ribbon-error {
 background:#c46766;
 border-color:#953b39
}
.ribbon .ribbon-void {
 background:#474747;
 border-color:#1a1a1a
}
.ribbon .ribbon-pending,
.ribbon .ribbon-pending-confirmation {
 background-color:#f59d00;
 border-color:#c27c00;
 padding:5px 0;
 font-size:11px
}
.ribbon .ribbon-cancelled {
 background-color:#ff4c37;
 border-color:#dc3545
}
.ribbon .ribbon-pending-confirmation {
 font-size:10px
}
.ribbon .ribbon-approved {
 background-color:#5bc0de;
 border-color:#31b0d5
}
.ribbon .ribbon-signed {
 background-color:#8aa9ff;
 border-color:#5c87ff
}
.ribbon .ribbon-exception {
 background-color:#db584b;
 border-color:#953b39
}
.ribbon-right {
 left:initial;
 right:-5px
}
.ribbon-right>.ribbon-inner {
 left:initial;
 right:7px;
 transform:rotate(45deg)
}

.new_dashboard_card{
  width:100% ;
  padding:10px 8px;
  position: relative;
  border:1px solid #d3d3d3;
  border-radius:5px;
  margin-bottom: 30px;
  background-color: #fff;
  /*box-shadow: 0px 0px 16px rgba(0,0,0,0.1);*/
}

.new_dashboard_card .icon_holder{
  width:60px;
  height:60px;
  background:#DF3A5C;
  border-radius: 10px;
  position: absolute;
  top:-15px;
  left: 10px;
  color:white;
  text-align: center;
  padding-top:5px;
  font-size: 30px;
}

.new_dashboard_card:hover{
  box-shadow: 0px 0px 36px rgba(0,0,0,0.2);
}
/* Arshad font */
.Font{
  /*font-size: 12px !important;*/
}

#toast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    margin: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;

    position: fixed;
    z-index: 1;
    left: 0;right:0;
    bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
}
#toast #img{
  width: 50px;
  height: 50px;
  float: left;
    
    padding-top: 16px;
    padding-bottom: 16px;
    
    box-sizing: border-box;

    
    background-color: #111;
    color: #fff;
}
#toast #desc{  
  color: #fff;
  padding: 16px;
  overflow: hidden;
  white-space: nowrap;
}

#toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px} 
    to {min-width: 350px}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}
@-webkit-keyframes stay {
    from {min-width: 350px} 
    to {min-width: 350px}
}

@keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}
@-webkit-keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}