body {font-family: "Lato", sans-serif}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    /*overflow-y: hidden;*/
    padding-top: 15px; /* Place content 60px from the top */
    /*transition: 0.5s;*/ /* 0.5 second transition effect to slide in the sidenav */
    padding-bottom: 60px; /* Place content 60px from the top */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 18px;
    text-decoration: none;
    font-size: 18px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav i {
    font-size: 24px;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav2 {
    height: 100%; /* 100% Full-height */
    width: 0px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Stay on top */
    top: 0;
    left: -18px;
    background-color: #630404; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    /*overflow-y: auto;*/
    padding-top: 15px; /* Place content 60px from the top */
    /*transition: 0.5s;*/ /* 0.5 second transition effect to slide in the sidenav */
    padding-bottom: 60px; /* Place content 60px from the top */
}

/* The navigation menu links */
.sidenav2 a {
    padding: 0px 4px 0px 6px;
    text-decoration: none;
    text-transform:capitalize;
    font-size: 1.1rem;
    color: #f39e61;
    transition: 0.3s;
    line-height:24px;
}

.sidenav2 span {
    font-size: 13px;
    color: #ff6a00;
}

.sidenav2 i {
    font-size: 24px;
}

/* When you mouse over the navigation links, change their color */
.sidenav2 a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav2 .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav2 .caption {  
    font-family:Verdana, Geneva, Tahoma, sans-serif;  
    font-size: 14px;
    color:#fff;
    text-transform:uppercase;
}

.shortcut_box{
    width:auto;
    height:65px;
    /*border:1px solid #fff;*/
    padding:8px 4px;
    margin-bottom:30px;
    vertical-align:middle;
    text-align:center;
}

.shortcut_box i{
    font-size:32px;
}

.shortcut_box span{
    font-size:12px;
}

.shortcut_box a{
    color:#fff;
    text-decoration:none;
    vertical-align:middle;
}

.pad-4{padding:4px;} .pad-2{padding:2px} .pad-3{padding:3px}
.pad-6{padding:6px} .pad-8{padding:8px} .pad-10{padding:10px} .pad-12{padding:12px}

.margin-4{margin:4px;} .margin-2{margin:2px} .margin-3{margin:3px}
.margin-6{margin:6px} .margin-8{margin:8px} .margin-10{margin:10px} .margin-12{margin:12px}

.mdet{padding:10px}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

.notify-icon-button {
    display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
    position: relative; /* All 'absolute'ly positioned elements are relative to this one */
    padding: 2px 5px; /* Add some padding so it looks nice */
}

/* Make the badge float in the top right corner of the button */
.notify-icon-button-badge {
    background-color: #fa3e3e;
    border-radius: 2px;
    color: white;
    padding: 1px 3px 1px 3px;
    font-size: 10px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: 0;
    right: 0;
}

.comminfo
{
    display:none;
    position:absolute;
    z-index:6;
    max-width:250px;
    background:#666;
    color:#f7f7f7;
    font-size:12px;
    padding:10px;
    border-radius:10px;    
}

.comminfo span
{
    cursor:pointer;
    padding:6px 0px 5px 0px;
}

.btnellipse
{
    text-decoration:underline;
    color:#335566;
    font-size:14px;
    cursor:pointer;
    font-weight:bold;
}

.pink{
    background:#a50ba5;color:#fff;
}

.pink-text{
    color:#a50ba5
}

#btnScrollTop{
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

.position-bottom-left{    
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  left: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */  
}

@media (max-width:1024px) {
    .hide-medium-x{display:none!important}
}

@media (max-width:334px) and (min-width:320px) {
    .hide-small-less{display:none!important}
    .show-small-less{display:block!important}
}

#btnScrollTop:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

html,body {
  scroll-behavior: smooth;
}

/*success spinner begins*/
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}
.path.circle {
  -webkit-animation: dash 0.9s ease-in-out;
  animation: dash 0.9s ease-in-out;
}
.path.line {
  stroke-dashoffset: 1000;
  -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
  animation: dash 0.9s 0.35s ease-in-out forwards;
}
.path.check {
  stroke-dashoffset: -100;
  -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
  animation: dash-check 0.9s 0.35s ease-in-out forwards;
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
/*success spinner ends*/

/*Floating label begins*/

.fl {
    display:block;
    position: relative;
    margin-bottom: 1.5rem;
}

.fl-elem-placeholder {
    position: absolute;
    top: 0;
    left:0;
    padding: 7px 0 0 0;
    transition: all 200ms;
    -webkit-transition: all 200ms;
    opacity: 0.5;
    font-size:36%
}

.fl-elem:focus + .fl-elem-placeholder,
.fl-elem:valid + .fl-elem-placeholder {
    font-size: 75%;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
}

/*Floating label ends*/

/*Loading animation starts 6*/
.loading_animation6 {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background-color: #90C695;
      -webkit-animation: loading_animation6 1s infinite ease-in;
      animation: loading_animation6 1s infinite ease-in;
   }
   
   @-webkit-keyframes loading_animation6 {
      0% {
         -webkit-transform: scale(0);
         transform: scale(0);
         opacity: 1;
      }
      100% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 0;
      }
   }
   
   @keyframes loading_animation6 {
      0% {
         -webkit-transform: scale(0);
         transform: scale(0);
         opacity: 1;
      }
      100% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 0;
      }
   }
/*loading animation 6 ends*/

/*loading animation 9 begins*/
.loading_animation9 {
      height: 6px;
      width: 75px;
      background-color: #d8d7d7;
      position: relative;
   }
      
   .loading_animation9:before {
      content: '';
      height: 6px;
      width: 10px;
      position: absolute;
      left: 0;
      background-color: #EC644B;
      -webkit-animation: loading_animation9anim 4s infinite ease-in-out;
      animation: loading_animation9anim 4s infinite ease-in-out;
   }
      
   @-webkit-keyframes loading_animation9anim {
      0%, 100% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
      }
      50% {
         -webkit-transform: translateX(65px);
         transform: translateX(65px);
      }
   }
      
   @keyframes loading_animation9anim {
      0%, 100% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
      }
      50% {
         -webkit-transform: translateX(65px);
         transform: translateX(65px);
      }
   }
/*loading animation 9 ends*/

/*loading animation 14 starts*/
    .loading_animation14 {
      height: 20px;
      width: 140px;
   }
      
   .loading_animation14s {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background-color: aquamarine;
      float: left;
      margin: 0 4px;
   }
      
   .loading_animation14s1,
   .loading_animation14s5 {
      background-color: #EC644B;
      -webkit-animation: m14s_anim 2.5s infinite ease-in-out;
      animation: m14s_anim 2.5s infinite ease-in-out;
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
   }
      
   .loading_animation14s2,
   .loading_animation14s4 {
      background-color: #C0392B;
      -webkit-animation: m14s_anim 2.5s infinite ease-in-out;
      animation: m14s_anim 2.5s infinite ease-in-out;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
   }
      
   .loading_animation14s3 {
      background-color: #96281B;
      -webkit-animation: m14s_anim 2.5s infinite ease-in-out;
      animation: m14s_anim 2.5s infinite ease-in-out;
   } 
     
   @-webkit-keyframes m14s_anim {
      0%, 40%, 100% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
      }
      20% {
         -webkit-transform: translateY(-25px);
         transform: translateY(-25px);
      }
   } 
     
   @keyframes m14s_anim {
      0%, 40%, 100% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
      }
      20% {
         -webkit-transform: translateY(-25px);
         transform: translateY(-25px);
      }
   }
/*loading animation 14 ends*/


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

.top_fixed_panel {
    display: none;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    color: #F0F0F0;
    font-family: Calibri;
    border-radius: 8px;
    position: fixed;
    z-index: 1000;
}