@font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Black.ttf'); 
    font-weight: 900;
  }
  
  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-BlackItalic.ttf'); 
    font-weight: 900;
    font-style: italic;
  }
  
  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Bold.ttf'); 
    font-weight: 700;
  }
  
  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-BoldItalic.ttf'); 
    font-weight: 700;
    font-style: italic;
  }

  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Light.ttf'); 
    font-weight: 300;
  }

  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-LightItalic.ttf'); 
    font-weight: 300;
    font-style: italic;
  }

  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Regular.ttf'); 
    font-weight: 400;
  }

  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-RegularItalic.ttf'); 
    font-weight: 400;
    font-style: italic;
  }

  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-Thin.ttf'); 
    font-weight: 100;
  }

  @font-face {
    font-family: Lato;
    src: url('../fonts/Lato-ThinItalic.ttf'); 
    font-weight: 100;
    font-style: italic;
  }



.navbar-brand{
            margin-top: -10px;
            margin-bottom: -15px;
        }

        .p{
        	font-family: Lato;
        	color: #8d8d8d;
            outline: 0;
            border: 0;
        	/*text-decoration: none;*/
        }

        .b{
        	font-family: Lato;
        	color: #7E7979;
            outline: 0;
            border: 0;
        }

        .c{
        	font-family: Lato;
        	color: #7E7979;
        	font-size: 15px;
            outline: 0;
            border: 0;

        }

        .tombol{
        	 background:#222;
			 color:white;
			 border-top:0;
			 border-left:0;
			 border-right:0;
			 border-bottom:0;
			 padding:10px 20px;
			 text-decoration:none;
			 font-family:Lato;
			 font-size:11pt;
             outline: 0;
             border: 0;
        }

        .tombol-danger{
        	background:#f44336;
			 color:white;
			 border-top:0;
			 border-left:0;
			 border-right:0;
			 border-bottom:0;
			 padding:10px 20px;
			 text-decoration:none;
			 font-family:Lato;
			 font-size:11pt;
             outline: 0;
             border: 0;
        }

        a:hover, a:active, a:focus{
            outline: 0;
            border: 0;
        }

        .hr{
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #8d8d8d;
            margin: 1em 0;
            padding: 0; 
        }

        .dropdown-1 {
    position: relative;
    display: inline-block;
    }

    .dropdown-content-1 {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
    }

    .dropdown-1:hover .dropdown-content-1 {
        display: block;
    }

    .text-ini{
        width: 100%;
     max-width: 500px;
     box-sizing: border-box;
    }

    .flexbox { display: flex; }
    .flexbox .stretch { flex: 1; }
    .flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
    .flexbox div input { padding: .5em 1em; width: 100%; }
    .flexbox div button { padding: .5em 1em; white-space: nowrap; }

    .fileDiv {
      position: relative;
      overflow: hidden;
    }
    .upload_attachmentfile {
      position: absolute;
      opacity: 0;
      right: 0;
      top: 0;
    }
    .btnFileOpen {margin-top: -50px; }

    .body-chat {
        margin: 0 auto;
        max-width: 800px;
        padding: 0 20px;
    }

    .container-chat {
        border: 1px solid #ededed;
        background-color: #fff;
        /*font-color: #fff;*/
        border-radius: 5px;
        padding: 10px;
        margin: 10px 0;
    }

    .darker-chat {
        border-color: #ededed;
        /*font-color: #fff;*/
        background-color: #ededed;
    }

    .container-chat::after {
        content: "";
        clear: both;
        display: table;
    }

    .container-img {
        float: left;
        max-width: 60px;
        width: 100%;
        margin-right: 20px;
        border-radius: 50%;
    }

    .container-chat img.right {
        float: right;
        margin-left: 20px;
        margin-right:0;
    }

    .time-right-chat {
        float: right;
        /*color: #fff;*/
    }

    .time-left-chat {
        float: left;
        /*color: #fff;*/
    }


    .btn-split {
    background-color: #e85e43;
    color: white;
    padding: 12px;
    font-size: 12px;
    border: none;
    outline: none;
    /*min-width: 40px;*/
    }

    .dropdown-split {
        position: absolute;
        display: inline-block;
    }

    .dropdown-content-split {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        z-index: 1;
    }

    .dropdown-content-split a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content-split a:hover {background-color: #ddd}

    .dropdown-split:hover .dropdown-content-split {
        display: block;
    }

    .btn-split:hover, .dropdown-split:hover .btn-split {
        background-color: #e83f1e;
    }

    .chat-text{
        /*border: 1px solid gray;*/
        padding: 8px;
    }

    .p-tetx{
        text-indent: 50px;
        text-align: justify;
        letter-spacing: 3px;
    }

    .attachmentImgCls{ width:450px; margin-left: -25px; cursor:pointer; }


    .notification {
      /*background-color: #555;*/
      color: white;
      text-decoration: none;
      /*padding: 15px 26px;*/
      position: relative;
      display: inline-block;
      /*border-radius: 2px;*/
    }

    

    .notification .badge {
      position: absolute;
      top: -10px;
      right: -10px;
      padding: 5px 10px;
      border-radius: 50%;
      background-color: red;
      color: white;
    }