@media screen and (max-width: 768px) {
    #sidebar {
        min-width: 44px;
        /* min-width: 28px; */
    }

    #main {
        width: 1%;
        left: 0;
    }

    #sidebar .visible-xs {
       display:inline !important;
    }

    .row-offcanvas {
       position: relative;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }

    .row-offcanvas-left.active {
       left: 45%;
    }

    .row-offcanvas-left.active .sidebar-offcanvas {
       left: -45%;
       position: absolute;
       top: 0;
       width: 45%;
    }
}


@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }

  .row-offcanvas-left.active {
    left: 3%;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    left: -3%;
    position: absolute;
    top: 0;
    width: 3%;
    text-align: center;
    min-width:42px;
  }

  #main {
    left: 0;
  }
}

/* rveron */

.navigation {
	line-height: 3.4em;
	padding-bottom:15px;
}

.readonly-field {
	padding: 6px 14px;
	margin: 0 14px;
	margin-bottom: 14px;
	background-color: #fbfbfb;
	border: 1px dashed #e1e1e8;
	border-radius: 4px;
}

.field-label {
	font-weight: strong;
    text-align: right;
	padding: 6px 14px;
	margin-bottom: 14px;
}

.form-horizontal .control-label-long {
    text-align: right;
      position: relative;
  	-webkit-transform: translateY(-15%);
  	-ms-transform: translateY(-15%);
  	transform: translateY(-15%)
}

.footer {
	background:#f8f8f8;
	border-top:2px solid #eee;
	font-size:0.85em;
}

.xre-name {
	font-size:1.1em;
	font-weight:bold;
}

.footer .footerbox {padding: 20px 10px 10px 10px;}
.footer-extra{background:#777; font-size:0.85em; color:silver; line-height:2}
.footer h2{
	padding:0;margin:0;
	font-size:1em;
	letter-spacing:.1em;
	color:#8e0b00;
	text-shadow:1px 1px 1px rgba(255,255,255,.6);
	border-bottom:1px solid #e8e8e8;
	padding-bottom:10px;
	margin-bottom:10px;
	text-transform:uppercase
}

.contact{
	border-left:1px solid #e8e8e8
}


.btn-edit {
	color: #fff;
	background-color: #61A0B0;
	border-color: #3E8FA3;
}

.btn-edit:hover {
	color: #fff;
	background-color: #2D8FA8;
	border-color: #3E8FA3;
}


input:invalid, select:invalid, textarea:invalid {
	background: #fff3f3;
	border-color: #ffaaaa;
	color: #cc0000;
}

input:invalid:focus, select:invalid:focus, textarea:invalid:focus {
	border-color: #ffaaaa;
	-moz-box-shadow: 0 0 0.5em #ffaaaa;
	-webkit-box-shadow: 0 0 0.5em #ffaaaa;
	        box-shadow: 0 0 0.5em #ffaaaa;
}