@import url('/font/fonts.css'); 


html {
 background: #DD4B39;
}
body {
  
    margin: 0;
    font-family: 'Roboto',sans-serif;
  min-height:100vh;
    background: #ededed;
    }

.everythingcontainer{
 opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}

     .everythingcontainer.loaded {
    opacity: 1;
}

    a {
    color: #444444;
    text-decoration: none;
    }
    

#page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #EDEDED;
    z-index: 9999;

    opacity: 1;
    visibility: visible;

    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

/* hidden state */
#page-transition.hidden {
    visibility: hidden;
}
#page-transition.opacity0 {
    opacity: 0;
}

/* center logo */
.loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 28px;
    font-weight: bold;
    color: #dd4b39;


    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

/* show logo */
#page-transition.show-logo .loader-logo {
    opacity: 1;
}

  .paragraph-end-name {
  background-image: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
  background-image: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -o-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#00ffffff',EndColorStr='#ffffff');
  bottom: 62px;
  height: 20px;
  max-height: 100%;
  position: absolute;
  right: 0;
  width: 60px;
}

  .paragraph-end-dev {
  background-image: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
  background-image: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background-image: -o-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
  background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#00ffffff',EndColorStr='#ffffff');
  bottom: 46px;
  height: 18px;
  max-height: 100%;
  position: absolute;
  right: 0;
  width: 60px;
}

    .selectionbarselected {
    font-weight: bold;
    border-top: 2px solid red;
    color: #ffffff !important;
    }
    
    .selectionbar a {
    display: inline-block;  
    height: 28px;          
    line-height: 26px;      
    margin-right:2px;  
    padding-right:4px;  
  margin-right:4px; 
    color: #B3BBB0;       
    text-decoration: none;
    }

    .selectionbar a:hover {
    background-color: #444;
    }
    
    .topuserthing {
      line-height: 38px;
    height: 38px;
    float: right;
    }
 .topuserthing button {
     margin-top: 10px;
  margin-right: 18px;
    }
    
 .topuserthing span{
     line-height: 20px;
    }
    


    .topuserthing img {
   margin-top: 10px;
    height: 38px;
    width: 38px;
    }
    
    .topuserthing a {  
      margin-right:8px;  
      color: #444444;  
    }
    
    .topuserthing a,
    .topuserthing img {
    vertical-align: middle;
    }
    
    
    
    .searchbox {
    font-size: 24px;
    padding: 6px 4px;
    width: 500px;
    height: 32px;
    }

    
.morebtn:hover {
  background: #c1d33b;
  }

.pulldown {
    width: 80px;
    box-sizing: border-box;
}
.btnpulldown {
    width: 100%;
    box-sizing: border-box;
    display: block;
    margin-bottom: 2px;
}
    
#pulldownMenu {
  position: fixed;
  top: 160px;    
  right: 20px;
  width: 200px;
  z-index: 1; 
  
  display: none; 
        background: #f7f7f7;
    background: -webkit-linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(240,240,240,1) 100%);
    background: -moz-linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(240,240,240,1) 100%);
    background: linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(240,240,240,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#F7F7F7",
      endColorstr="#F0F0F0",
      GradientType=0
    );
 
}





  footer {
width: 100%;
    padding-top: 14px;
   padding-bottom: 14px;
  color: #ffffff; 
  background: #dd4b39;

}

  footer a, .footerlinks {
  color: #ffffff !important;

}


.footerlicense {
  color: #ffffff; 
  padding-left: 100px;
  text-wrap: balance;
}

.footerver {
  padding-left: 100px;
color: #ffffff; 
}

.main { 
  padding-right: 100px;
padding-left: 100px;
background: #ededed;
}

.topbarpadding {
 padding-top: 64px;
}

.mainbanner {
  width: 90%;
max-width: 800px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}  



.topbar {
    padding: 0px 8px;
    padding-top: 4px;
    font-size: 14px;
    font-weight: normal;
    padding-left: 4px;
    padding-right: 4px;
    background: #dd4b39;
  width:100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  color: #ffffff;
  height:64px;
  -webkit-box-shadow: 2px 0 6px rgba(0,0,0,.15);
          box-shadow: 2px 0 6px rgba(0,0,0,.15);    
}
    

.topbar a {
  color: #ffffff;
}



.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  background: #000000;
}

.modal-backdrop.open {
  display: block;
  opacity: 0.5;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 1000px;
  background: #fff;
  border-radius: 4px;
  padding-left: 14px;
 max-height: 600px;
  height:100%;
  opacity: 0;
  transform: translate(-50%, -40%) scale(0.9);
  -ms-transform: translate(-50%, -40%) scale(0.9);

  display: none;
  z-index: 10000;

  transition: all 0.2s ease-out;
  
   -webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3);
 box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3)
}


.modal.open {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
}

.modal button {
float:right;
  margin-top: 3px;
margin-bottom: 3px;
  margin-right:6px;
}


button {
  margin-right:2px;
  margin-left:2px;
  cursor:pointer;
   font-size: 18px;
    padding: 2px 6px;
   background: #dd4b39;
    border: 2px solid #dd4b39;
    border-radius: 2px;
    color: #fff;
  
}
    
button:hover {
  background: #f2534d;
  }



.modal h1 {
font-size: 2.28rem;
}

.modal h2 {
font-size: 15px;
}

.logotext {
font-family: 'Product Sans','Roboto',sans-serif;
font-size:26px;
line-height: 60px;
  padding-left:18px;
}

.logotext:hover {
    text-decoration: underline;
  }

.modal-content {
  height:93%;
  width:100%
  padding-right:24px;
overflow-y:scroll;
}



/* animations! ;3 */
.fade-in {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ripple {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.ripple span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  width: 20px;
  height: 20px;
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
}

.ripple.animate span {
  animation: rippleAnim 0.4s linear;
}

@keyframes rippleAnim {
  from {
    transform: scale(0);
    opacity: 0.6;
  }
  to {
    transform: scale(8);
    opacity: 0;
  }
}

.topshitcontainer {
  color: white;
  font-weight: 300;
  padding-top: 60px;
  padding-bottom:40px;
  background:#3d3d3d;
  padding-left: 100px;
  padding-right: 100px;
  background-image: url("/assets/jailogo.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 30% auto; 
   -webkit-transition: all .3s cubic-bezier(.4,0,.2,1);
            transition: all .3s cubic-bezier(.4,0,.2,1);
}

.topbarright,.topbarrightmobile {
float:right;
margin-right: 26px;
padding-top: 8px;
}

.topbarrightmobile {
  margin-right: 0px;
  }

.topbarrightmobile span {
 font-size:32px!important;
  line-height: 56px;
  float:left;
  display:none;
}


.topbarright span {
 font-size:32px!important;
  line-height: 56px;
    display:block;
  float:left;
}

.topbar .topbarright {
  margin-left: 6px;
}

.topbar .topbarright img,
.topbar .topbarright svg {
  margin-left: 12px;
}

.topbar .topbarright img {
  border-radius: 50%;
}

.topbar .topbarrightmobile img {
  border-radius: 50%;
}

    .loader {
  width: 100%;
  max-width: 420px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
    
.bar {
  position: absolute;
  height: 100%;
  background: #3D3D3D;
  width: 40%;
  left: -30%;
   animation: mui-slide1 2s ease-in-out infinite;
  -webkit-animation: mui-slide1 2s ease-in-out infinite;
  -moz-animation: mui-slide1 2s ease-in-out infinite;
}

@keyframes mui-slide1 {
  0%   { left: -35%; width: 30%; }
  50%  { left: 40%; width: 50%; }
  100% { left: 100%; width: 30%; }
}

@-webkit-keyframes mui-slide1 {
  0%   { left: -35%; width: 30%; }
  50%  { left: 40%; width: 50%; }
  100% { left: 100%; width: 30%; }
}

@-moz-keyframes mui-slide1 {
  0%   { left: -35%; width: 30%; }
  50%  { left: 40%; width: 50%; }
  100% { left: 100%; width: 30%; }
}    

@media screen and (max-width: 699px) {
.topbarright span {
 display:none;
}

.topbarrightmobile span {
   display:block;
}
.main {
 padding-left:15px;
   padding-right:15px;
}

.mainbanner {
  width: 100%;
}  


.modal {

    margin: 0; 

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  }


.modal-content {
  height:93%;
  width:100%
    padding-right:4px;
overflow-y:scroll;
}



.footerlicense {
  padding-left: 15px;
}

.footerver {
  padding-left: 15px;
}

.topshitcontainer {
    padding-top: 32px;
  padding-bottom:10px;
  padding-left: 15px;
   padding-right: 15px;
}
}



/*sidenav*/

/* base */
.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;       /* overridden by JS if menuWidth set */
  height: 100%;
  margin: 0;
  padding: 0 0 60px 0;
  background: #fff;
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */

  /* hardware-accelerated for Android */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;

  -webkit-transform: translateX(-105%);
      -ms-transform: translateX(-105%);
          transform: translateX(-105%);

  -webkit-box-shadow: 2px 0 6px rgba(0,0,0,.15);
          box-shadow: 2px 0 6px rgba(0,0,0,.15);
}

/* List items*/
.side-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-nav li {
  float: none;
  line-height: 48px;
}

.side-nav li.active {
  background-color: rgba(0,0,0,.05);
}

.side-nav li > a {
  color: rgba(0,0,0,.87);
  display: block;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  line-height: 48px;
  padding: 0 32px;
  text-decoration: none;
  -webkit-transition: background-color .15s ease;
          transition: background-color .15s ease;
}

.side-nav li > a > svg {
  height:24px;
   vertical-align: middle;
   margin-top: -4px;
  margin-right:16px;
  fill: #8C8B8C;
}


.side-nav li > a:hover {
  background-color: rgba(0,0,0,.05);
}

.side-nav li > a > i {
  float: left;
  height: 48px;
  line-height: 48px;
  margin: 0 32px 0 0;
  width: 24px;
  color: rgba(0,0,0,.54);
}

/*Divider*/
.side-nav .divider {
  height: 1px;
  background: rgba(0,0,0,.12);
  margin: 8px 0;
}

/*Subheader*/
.side-nav .subheader {
  cursor: default;
  pointer-events: none;
  color: rgba(0,0,0,.54);
  font-size: 14px;
  font-weight: 500;
  line-height: 48px;
  padding: 0 32px;
}

/* User-view area */
.side-nav .user-view {
  position: relative;
  padding: 32px 32px 0;
  margin-bottom: 8px;
  background: #dd4b39;
  color: #fff;
}

.side-nav .user-view .name,
.side-nav .user-view .email {
  display: block;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
}

.side-nav .user-view .name {
  margin-top: 16px;
  font-weight: 500;
}

.side-nav .user-view img.circle {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  display: block;
}

.side-nav .user-view .background {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  overflow: hidden;
}

/* Mobile */
@media screen and (max-width: 699px) {
  .side-nav {
    z-index: 999;
    -webkit-transform: translateX(-105%);
        -ms-transform: translateX(-105%);
            transform: translateX(-105%);
  }

  .sidenav-drag-target {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    z-index: 998;
  }

  #sidenav-overlay {
    cursor: pointer;
  }
}

@media screen and (min-width: 700px) {
  .side-nav {
    z-index: 990;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }

  .everythingcontainer {
    -webkit-transition: padding-left .3s cubic-bezier(.4,0,.2,1);
            transition: padding-left .3s cubic-bezier(.4,0,.2,1);
  }

  .sidenav-drag-target {
    display: none !important;
  }

  #sidenav-overlay {
    display: none !important;
  }
}

#sidenav-trigger {
  vertical-align: middle;
  position: relative;
  top: -6px; /* tweak */
}

#sidenav-trigger svg {
  
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(.4,0,.2,1);
          transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  display: block;
}

/* Mobile: rotated when open */
@media screen and (max-width: 699px) {
  #sidenav-trigger.sidenav-open svg {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

/* Desktop: rotated when closed (no class = open = normal) */
@media screen and (min-width: 700px) {
.topshitcontainer.nosidebar {
padding-left: 100px;
  padding-right: 100px;
  margin-left: 100px;
    margin-right: 100px;
}
.topbar {
z-index: 1000;
}

.user-view {
display:none;
}

#slide-out {
 box-shadow: none !important;
  margin-top:32px;
}
.side-nav {
  background: #ededed !important;
padding-top: 64px;
}
  #sidenav-trigger:not(.sidenav-open) svg {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

.btnthing {
padding-top: 5px;

}
/*sidenav end*/



/* floating button */
.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  background-color: #dd4b39;  
  border-radius: 50%;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;

  -webkit-transition: background-color .3s, -webkit-box-shadow .3s;
          transition: background-color .3s, box-shadow .3s;

  -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
          box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
}

.btn-floating:hover {
  background-color: #f2534d;
  -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
          box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
}

.btn-floating:focus {
  background-color: #c0392b;
  outline: none;
}

.btn-floating i,
.btn-floating svg {
  width: inherit;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  padding-top: 16px;
  fill: #fff;
  vertical-align: top;
}

.btn-floating.btn-large {
  width: 56px;
  height: 56px;
  line-height: 56px;
}

.btn-floating.btn-large i,
.btn-floating.btn-large svg {
  line-height: 56px;
}

.btn-floating.halfway-fab {
  position: absolute;
  right: 24px;
  bottom: -20px;
}

.btn-floating.btn-large.halfway-fab {
  bottom: -28px;
}

.btn-floating.halfway-fab.left {
  right: auto;
  left: 24px;
}

.btn-floating.disabled,
.btn-floating:disabled,
.btn-floating[disabled] {
  pointer-events: none;
  background-color: #dfdfdf !important;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #9f9f9f !important;
  cursor: default;
}

.fixed-action-btn {
  position: fixed;
  right: 23px;
  bottom: 23px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 997;
}

.fixed-action-btn ul {
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  bottom: 64px;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;

  -webkit-transition: visibility 0s linear .2s;
          transition: visibility 0s linear .2s;
}

.fixed-action-btn ul li {
  margin-bottom: 15px;
}


.fixed-action-btn.active ul {
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.fixed-action-btn.horizontal {
  padding: 0 0 0 15px;
}

.fixed-action-btn.horizontal ul {
  text-align: right;
  right: 64px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 100%;
  left: auto;
  width: 500px;
  bottom: auto;
}

.fixed-action-btn.horizontal ul li {
  display: inline-block;
  margin: 15px 15px 0 0;
}

.fixed-action-btn.toolbar {
  padding: 0;
  height: 56px;
}

.fixed-action-btn.toolbar.active > a i {
  opacity: 0;
}

.fixed-action-btn.toolbar ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  bottom: 0;
  z-index: 1;
  visibility: visible;  
}

.fixed-action-btn.toolbar ul li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: inline-block;
  margin: 0;
  height: 100%;
  -webkit-transition: none;
          transition: none;
}

.fixed-action-btn.toolbar ul li a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  line-height: 56px;
  z-index: 1;
}

.fixed-action-btn.toolbar ul li a i {
  line-height: inherit;
}

/* floating button end */





   .newmsgmodal {
    height:480px;
      width:520px;
    }
    
    .alternativebutton {
    padding-left:28px;
      padding-right:20px;
      margin-bottom:14px;
      background: #ffffff;
      color: #000000;
      border: none;
    }
    
       .alternativebutton:hover {
      background: #ffffff;
      color: #000000;
      border: none;
    }
    
    .alternativebutton.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
    
    .msg-modal-title {
      height:16%;
      width:100%;
  display: -webkit-box;   
  display: -webkit-flex;   
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
    
     .msg-modal-title img {
      height:60%;
      margin-top:3%;
      border-radius:50%;
      aspect-ratio: 1 / 1;
      }
    
        .msg-modal-title span {
        padding-top: 16px;
  padding-left: 10px;
      }
    

     .msg-modal-buttons {
      height:16%;
      width:100%;
      }
    .msg-modal-buttons svg {
    fill: #7E7D7E;
      height:28px;
      padding-right:8px;
    }
    
    .msg-modal-content {
  height: 74%;
      }
      .msg-modal-textarea {
      resize: none;
      height:74%;
        width: 98%;
    border: none;
       outline: none !important;
      font-weight: 300;
  font-size: 14px;
    }
    
       .msg-modal-textarea:focus {
    border: none;
       outline: none !important;
    }
    @media screen and (max-width: 699px) {
    
     .newmsgmodal {
    height:90%;
      width:95%;
    }
    
    
    }