body {
    /*background-color: #f1f1f1 !important;*/
    margin-bottom: 50px;
}

html {
    min-height: 100%;
    position: relative;
}

/*Bigger font in mobile view*/
@media (min-width: 768px) {
    body {
        font-size: 15px;
    }
}

a:hover {
    text-decoration: none !important;
}

.footer {
    text-align: center;
    bottom: 0;
    position: fixed;
    width: 100%;
    background-color: #fff;
    padding-top: 10px;
}

.dropdown-menu {
    height:80px;
    overflow: auto;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 170px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-menu li {
    margin:0 4px;
    float:left;
}

h1 {
    color: #fff !important;
    font-family: "Source Sans Pro Bold", sans-serif !important;
    margin-bottom: 30px !important;
    /*font-size: 72px !important;*/
}

h2 {
    color: #fff !important;
    font-family: "Source Sans Pro Bold", sans-serif !important;
    /*font-size: 60px !important;*/
}

h3 {
    /*color: #fff !important;*/
    font-family: "Source Sans Pro Bold", sans-serif !important;
    /*font-size: 48px !important;*/
}

h4 {
    /*color: #fff !important;*/
    font-family: "Source Sans Pro Light", sans-serif !important;
    /*font-size: 36px !important;*/
}

select, input:not(.no-margin) {
    margin-bottom: 5px !important;
}

/*Header styles*/

.header {
    height: 55px;
    background-color: #EDA027;
}

.jumbotron h1 {
    margin-bottom: 0 !important;
}

.header h2 {
    text-decoration: underline;
    margin: 10px 0;
}

/*.header a {
    display: inline-block;
    width: auto;
}*/

header .jumbotron {
    background-color: #EDA027;
}

/*Button styles*/
.btn-sm.round {
    padding-left: 30px !important;
    padding-right: 30px !important;
    -ms-border-radius: 24px;
    border-radius: 24px;
}

.btn-del {
	padding-top: 0px;
    padding-bottom: 0px;
    border: none !important;
    outline: none;
}

a.signed-in-user-btn {
    background-color: #fff;
    color: #000;
    font-weight: bold;
    outline: none !important;
    border: none;
    padding: 5px 0 !important;
    margin-right: 15px;
    position: absolute;
    top: 10px;
    right: 15px;
}

    a.signed-in-user-btn:hover {
        background-color: #ddd;
    }

.approveBtn {
    background-color: #fff;
    color: #3E8C77;
    border: 1px solid #3E8C77;
    font-weight: bold;
    outline: none;
    margin: 10px;
}

    .approveBtn:hover {
        background-color: #3E8C77;
        color: #fff;
    }

.navbar-toggle {
    margin-left: 15px;
    border-color: #ddd !important;
    background-color: #fff !important;
}

    .navbar-toggle .icon-bar {
        background-color: #000;
    }

    .navbar-toggle:focus, .navbar-toggle:hover {
        background-color: #ddd !important;
    }

    .navbar-toggle:focus {
        outline: 0;
    }

.nav-tabs li a {
    color: #000;
}

/*Signin*/
header .jumbotron {
    margin-bottom: 0;
}

.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 50px auto;
}

    .form-signin input {
        margin-bottom: 5px;
    }

.form-singnin-button-container {
    margin-top: 15px;
}

.recoverPasswordLink {
    display: block;
    color: #000;
    font-weight: bold;
    font-size: 12px;
    width: 120px;
}

/*Inputfield icons classes*/
.left-inner-addon {
    position: relative;
}

    .left-inner-addon input {
        padding-left: 30px;
    }

    .left-inner-addon i {
        position: absolute;
        padding: 10px 12px;
        pointer-events: none;
    }

.icon-lg {
    padding: 15px 12px !important;
}

.right-inner-addon {
    position: relative;
}

    .right-inner-addon input {
        padding-right: 30px;
    }

    .right-inner-addon i {
        position: absolute;
        right: 0px;
        padding: 10px 12px;
        pointer-events: none;
    }

button i.glyphicon {
    top: 2px;
}

.icon-color-gray {
    color: #777;
}

/*Menu*/
.navbar {
    padding: 10px 0;
    height: 70px;
}

.clear {
    clear: both;
}

.navmenu {
    max-width: 200px !important;
    background-color: #fff !important;
}

a.navbar-brand {
    margin: 0 auto;
    clear: left;
}

a.navmenu-brand {
    padding: 15px;
    font-weight: bold;
    font-size: 22px;
}

.navmenu ul li {
    border-bottom: 1px solid #e7e7e7;
}

.navmenu ul li a {
    font-weight: bold;
}

    .navmenu ul li a i {
        margin-right: 5px;
    }

#mainContent.container {
    padding-top: 70px;
    padding-bottom: 30px;
    overflow: visible;
}

/*Showes menu if screen size larger than 768px*/
@media (min-width: 768px) {
    .offcanvas {
        display: block !important;
    }

    #mainContent.container {
        position: absolute;
        padding-left: 215px;
    }

    header a.navbar-brand {
        display: block !important;
    }
}

header a.navbar-brand, header a.navbar-brand:hover {
    display: none;
    color: #fff;
    font-weight: bold;
    font-size: 36px;
    text-decoration: underline !important;
    outline: 0;
    -webkit-text-decoration-color: rgba(255,255,255,0.5) !important;
    -moz-text-decoration-color: rgba(255,255,255,0.5) !important;
    -ms-text-decoration-color: rgba(255,255,255,0.5) !important;
    -o-text-decoration-color: rgba(255,255,255,0.5) !important;
    text-decoration-color: rgba(255,255,255,0.5) !important;
}

/*Retina iPad*/

/*@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {

     .offcanvas {
    display: block!important;
  }
  #mainContent.container {
      position: relative;
      left: 300px;
  }
}*/

/*@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {

     .offcanvas {
    display: block!important;
  }
  #mainContent.container {
      position: relative;
      left: 300px;
  }
}*/

/*Main content*/

#mainContent h1 {
    color: #000 !important;
}

.tab-content {
    padding: 15px;
}

.tab-content.bot-margin {
    padding: 0px 0px 15px 0px !important;
}

.tab-content.top-bot-margin {
    padding: 15px 0px 15px 0px !important;
}

h4.panel-title {
    color: #000 !important;
}

.panel-body h4 {
    color: #000 !important;
}

.half-width{
    width: 50%;
}

/*Rating*/
.rating-symbol {
    margin-bottom: 20px;
}

.rating-container button {
    vertical-align: middle;
    margin-top: -10px;
}

.glyphicon-star {
    font-size: 2.5em;
    color: #EDA027;
}

.glyphicon-star-empty {
    font-size: 2.5em;
    color: #EDA027;
}

.rating-container-previous .glyphicon {
    font-size: 1em;
}

/*Panel*/
.panel-time {
    display: block;
    padding-top: 5px;
}

.panel-group .panel-body{
        border-top: 1px solid #ddd;
}

.message-unread-date{
    font-weight: bold;
}

/*Conversation*/
.conversation-name {
    font-size: bold;
    font-size: 1.5em;
    white-space: nowrap;
}

.conversation-unread-messages {
    padding-top: 15px;
}

.conversation-icon-size {
    font-size: 2em;
    /* float: right; */
}

.last-message-date {
    padding-top: 2px;
}

.primary-background-color {
    background-color: #0275d8 !important;
}

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

/*started with conversation details*/

.message-details .message-details-header {
    font-size: 2em;
    text-align: center;
    padding-left: 35%;
}

.message-details .received-message {
	background-color: lightgray;
}

.message-details .sent-message {
    float: right;
	background-color: lightblue;

}

.talk-header {
    font-weight: bold;
    padding: 1em;
	text-align: left;
    line-height: 1.5em;
}

.conversation-messages-container {
    position: fixed;
    top: 150px;
    bottom: 160px;
    overflow-x: hidden;
    overflow-y: auto;
}
.conversation-header {
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid grey;
}
.conversation-header-container {
    position: fixed;
    height: 80px;
    white-space: nowrap;
}

@media(max-width: 767px) {
    .konversation-width {
        width: 90%;  
    }
}

@media(min-width: 768px) {
    .konversation-width {
        width: 70%;   
    }
}


.write-new-message-container {
    position: fixed;
    bottom: 0; 
    height: 160px;  
}

.unread-messages-text {
    font-size: 2em;
}

.unread-meassage-container {
    display: inline;
}

.talk-sendername {
    padding: 1em 0 0 1em;
    font-weight: bold;
    display: inline-block;
}

.talk-text {
    padding: 1em;
	text-align: left;
    line-height: 1.5em;
}

.talk-date {
    font-style: italic;
    padding: 0em 1em 1em 1em;
}

.talk-bubble {
	margin: 10px 0;
    display: inline-block;
    position: relative;
	max-width: 80%;
	height: auto;
    border: 2px solid #666;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.talk-isRead-icon {
    display: inline-block;
}

.unread-message-icon {
    font-size: 2em;
    padding-right: 10px;
}

.talk-confirm-symbol {
    padding: 0.5em 0em 0em 0.5em;
    font-size: 1.5em;
}

.conversation-back-link {
    color: grey;
    font-size: 2em;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}