body {
    background:#fff;
    padding:0;
    -webkit-font-smoothing:antialiased;
}

.navbar-inner {
    background:#073648;
    height:60px;
    padding-top:20px;
    border:0;
    border-radius:0;
}

.navbar-inner .container {
    width:1170px;
}

.navbar .nav li a {
    color:#ddd;
    text-shadow:none;
    font-weight:500;
    font-size:14px;
    margin:0 5px;
}

.navbar .nav li.sep {
    border-left:1px solid rgba(255,255,255,0.15);
    width:1px;
    height:14px;
    margin:15px 5px;
}

.navbar .nav li.active a {
    background:none;
    color:#fff;
    border-bottom:2px solid #fff;
    padding-left:0;
    padding-right:0;
    padding-bottom:5px;
    margin:0 10px;
    box-shadow:none;
    transition:0.2s all ease;
}

.navbar .nav li.active a:hover {
    background:none;
    color:#fff;
    padding-bottom:8px;
    box-shadow:none;
}

.navbar .nav>li>a:focus, .navbar .nav>li>a:hover {
    color:#fff;
    background:none;
}

.navbar .nav>li .sign-in {
    background:#fff;
    color:#111;
    border-radius:2px;
    padding:4px 12px;
    font-size:11px;
    margin:5px 0 5px 10px;
    text-transform:uppercase;
    border:2px solid #fff;
    transition:.15s all ease;
}

.navbar .nav>li .sign-in:hover {
    background:none;
    color:#fff;
}

.navbar .brand {
    text-shadow:none;
    color:#fff;
}

#main {
    margin-top:30px;
}

.well {
    border-radius:2px;
    border:1px solid #d8dcdf;
    box-shadow:0 1px 0px 0 #d8dcdf;
}

.accordion-group {
    border-radius:0;
    margin:0 -20px;
}

.accordion-heading {
    padding:20px 30px;
}

.accordion-heading > div {
    margin-left:60px;
}

.accordion-heading .accordion-toggle {
    color:#4f5d68;
    font-size:16px;
    display:block !important;
    padding:0;
}

.accordion-group .icon {
    float:left;
    height:40px;
    width:40px;
    border:2px solid #4292cb;
    border-radius:40px;
}

.nav-pills > .active a,
.nav-pills > .active a:hover {
    background:none;
    color:#111;
}

.badge-important {
    border-radius:2px;
    border:2px solid #fd8560;
    background:none;
    color:#fd8560;
}

.btn {
    background:#eee;
    color:#444;
    border:0;
    box-shadow:none;
    text-shadow:none;
    border-radius:2px;
    text-transform:uppercase;
    padding:1em 1.8em .9em;
    font-size:11px;
    font-weight:400;
    border-bottom:2px solid #ccc;
    transition:0.15s all ease;
    white-space:nowrap;
    letter-spacing:1px;
    line-height:1.5;
}

.btn:hover {
    border-color:#eee;
    background:#eee;
}

.btn-primary {
    background:#3e90ca;
    color:#fff;
    border-color:#47799d;
}

.btn-primary:hover {
    background:#3e90ca;
    border-color:#3e90ca;
}

.btn-success {
    background:#16bb8e;
    border-color:#3d987f;
    color:#fff;
}

.btn-success:hover {
    background:#16bb8e;
    border-color:#16bb8e;
    color:#fff;
}

h1, h2, h3, h4, h5, h6 {
    font-weight:500;
    color:#073648;
}

h1 {}

h2 {
    font-size:22px;
}

h4 {
    font-size:15px;
}

p {
    color:#5f6366;
}

.muted {
    color:#8e979b;
}

a {
    color:#3e90ca;
}

/* PROFILE */

.mentor-card, .well {
    border-radius:2px;
    border:1px solid #ddd;
    box-shadow:0 1px 0px #ddd;
    background:#fff;
}

.mentor-card img {
    border-radius:2px;
    width:200px;
    margin:15px 0;
    max-width:100%;
}

.mentor-card h1 {
    font-size:22px;
    font-weight:500;
    margin:0;
    line-height:1;
}

.mentor-card .btn {
    margin-top:15px;
    margin-bottom:10px;
}

.mentor-card > div p {
    margin-bottom:0;
}

.mentor-card > div {
    border-bottom:1px solid #ddd;
    padding:15px 30px;
    text-align:center;
}


.mentor-card .price {
    line-height:2;
    vertical-align:middle;
}
.mentor-card .price strong {
    font-size:18px; 
}

.mentor-card > div:last-child {
    border:0;
}


.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
  padding:0.2em 0 0.5em;
  width:80px;
  display:inline-block;
}

.rating > span.empty {
    color:#ddd;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
  color:#3e90ca;;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color:#3e90ca;
}


.skills {
    overflow:hidden;
}

.skills hr {

}

.skills .span2 {
    max-width:140px;
}

.skills .label {
    margin-top:4px;
}
 
.label {
    text-shadow:none;
    color:#666;
    border:2px solid #ccc;
    background:#fff;
    padding:0.5em 1em;
}

.label-ruby {
    border-color:#b82020;
    color:#b82020;
}

.label-php {
    color:#6e03c1;
    border-color:#6e03c1;
}

.label-python {
    color:#3581ba;
    border-color:#3581ba;
}

.label-html {
    color:#280059;
    border-color:#280059;
}

.label-javascript {
    color:#f15501;
    border-color:#f15501;
}

.reviews {
    padding:0;
}

.reviews ul {
    margin:0;
    list-style:none;
}

.reviews li {
    overflow:hidden;
    border-bottom:1px solid #ddd;
    padding:15px;
}

.reviews li:last-child {
    border:0;
}

.reviews .avatar {
    margin-left:0;

}

.reviews .avatar img {
    border-radius:100px;
    margin:10px;
}

.reviews h4 {
    font-weight:400;
    color:#777;
}

.reviews a {
    font-weight:bold;
}


/* MENTEE DASHBOARD */

.issues {
    padding:0;
}

.issues .issues-list {
    margin:0;
    list-style:none;
}

.issues-header {
    border-bottom:1px solid #ddd;
    padding:20px 30px;
    margin:0;
}

.issues-header li {
    display:inline-block;
}

.issues-header .active a {
    color:#444;
}

.issues-header .active .label {
    border-color:#fd8560;
    color:#fd8560;
}

.issues-header a {
    font-size:15px;
    font-weight:500;
    margin-right:30px;
    display:inline-block;
}

.issues-header .btn {
    font-size:10px;
    margin-top:-0.9em;
}

.issues-header .label {
    padding:0.2em 0.5em;
    font-size:11px;
    margin-right:7px;
    margin-top:-4px;
    vertical-align:middle;
    border-color:#9fb5be;
    color:#7d8e95;
}

.issues .mentors {
    background:whitesmoke;
    border-top:1px solid #ddd;
    overflow:hidden;
    padding:20px 30px;
    display:none;
    margin:25px 0 0;
    padding-left:100px;
    box-shadow:0 1px 1px rgba(0,0,0,0.05) inset;
    position:relative;
    z-index:1;
}


.issues .issues-list .expanded {
    padding-bottom:0;
}

.issues .expanded .mentors {
    display:block;
}

.issues .status {
    border:2px solid ;
    width:40px;
    height:40px;
    border-radius:40px;
    float:left; 
    margin-left:30px;
    border-color:#3e90ca;
}

.issues .issues-list > li {
    padding:25px 0 15px;
    border-bottom:1px solid #ddd;
}

.issues .issues-list h4 {
    margin:0;
    font-size:16px;
}

.issues .issues-list h4 a {
    color:#073648;
}

.issues .content .meta {
    font-size:13px;
}

.issues .content {
    margin-left:100px;
    padding-right:40px;
}

.issues .status .icon {
    width:18px;
    height:18px;
    background:url(../img/icon-schedule.png) no-repeat;
    background-size:18px;
    display:inline-block;
    margin:11px;
}

.issues .scheduled .status {
    border-color:#16bb8e;;
}

.issues .scheduled .status .icon {
   background-image:url(../img/icon-scheduled.png);
}

.issues .mentors > ul {
    margin:0;
    list-style:none;
}

.issues .mentors > ul > li {
    border:0;
    border-top:1px solid #ddd;
    padding:15px 0 0;
    margin-top:15px;
}

.issues .mentors > ul > li > div {
    display:table-cell;
    padding:0 25px;
    vertical-align:top;
}

.issues .mentors .avatar {
    position:relative;
}

.issues .mentors .avatar:after {
    width:8px;
    height:8px;
    display:block;
    background:#16bb8e;
    position:absolute;
    content:" ";
    right:0;
    bottom:6px;
    border-radius:8px;
    border:2px solid #fff;
}

.issues .mentors > ul > li > div:first-child {
    padding:0;
}

.issues .mentors > ul > li > div:last-child {
    padding-right:0;
}

.issues .mentors img {
    width:42px;
    border-radius:42px;
}

.issues .mentors h6, .issues .mentors h5 {
    margin:0;
}

.issues .mentors .rating {
    width:110px;
}

.menu {
    padding:0;
}

.menu .nav {
    margin:0;
}

.menu .nav li {
    border-top: 1px solid #ddd;
}

.menu .nav li a {
    font-weight:500;
    padding:15px 20px;
    display:block;
}

.menu h4 {
    margin:0;
}

.menu > div {
    padding:20px;
}

.menu ul {
    list-style:none;
    padding:0;
    margin:0;
}

.menu .sessions li a {
    margin:10px 0 0 0;
    color:#444;
    display:inline-block;
}

.menu i {
    background-size:16px;
    display:inline-block;
    width:30px;
    height:16px;  
}

.icon-mentor {
    background:url(../img/icon-mentor.png) no-repeat;

}

.icon-issue {
    background:url(../img/icon-issue.png) no-repeat;
}

.icon-payment {
    background:url(../img/icon-payment.png) 0 4px no-repeat;
}

.menu .icon-profile {
    background:url(../img/icon-profile.png) 1px 0 no-repeat;
    background-size:14px;
}

.menu .active a {
    color:#444;
    background:whitesmoke;
}

.menu .nav a:hover {
    background:whitesmoke;
}

.menu .active .icon-issue {
    background-position:0 -27px;
}

.menu .active .icon-mentor {
    background-position:0 -23px;
}

.menu .active .icon-payment {
    background-position:0 -31px;
}

.menu h6 {
    margin:0;
    padding:10px 20px;
}

.confirm {
    padding:30px 30px 30px 100px;
    border-top:1px solid #ddd;
    background:whitesmoke;
    margin-top:25px;
}

.confirm > div {
    display:table-cell;
    padding:10px 40px 10px 0;
    vertical-align:top;
}

.confirm h6 {
    margin:0;
    color:#71767a;
    text-transform:uppercase;
    font-size:11px;
}

.confirm > div span {
    font-size:16px;
    color:#073648;
}

.confirm h5 {
    margin-top:0;
}

.confirm img {
    width:42px;
    border-radius:42px;
    margin-left:-69px;
    float:left;
}

.confirm .btn {
    margin-right:10px;
}


footer {
    border-top:1px solid #ddd;
    padding:40px 0;
    margin-top:40px;
    color:#777;
}


#session {
    
}

#session {
    position:absolute;
    background:#eee;
    top:0;
    left:0;
    right:0;
    bottom:0;
    min-width:800px;
    min-height:400px;
}

#session .top {
    background:#073648;
    height:60px;
    position:absolute;
    left:0;
    right:0;
}

#session .top .actions {
    position:absolute;
    right:180px;
    top:10px;
}

#session .top .actions button {
    background:#111;
    border-radius:2px;
    border:0;
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:8px 20px;
    text-transform:uppercase;  
    margin:0 3px; 
}

#session .top .actions button i {
    width:18px;
    height:14px;
    background:url(../img/icon-share.png) no-repeat;
    background-size:14px;
    display:inline-block;
    vertical-align:middle;
}

#session .top .actions .hangup i {
    background-image:url(../img/icon-hangup.png);
    background-position:0 4px;
}

#session .top .actions .pause i {
    background-image:url(../img/icon-pause.png);
    background-size:8px;
    background-position:2px 1px;
}

#session .top .logo {
    padding:20px;
}

#session .top .actions .hangup {
    background:#d54938;
}

#session .top .actions .share {
    background:#4b8ef9;
}

#session .top .actions .pause {
    background:#2f6a81;
}

#session .top .duration {
    width:140px;
    padding:20px;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    color:#fff;
    font-size:24px;
    font-weight:bold;
}

#session .top .duration i {
    display:inline-block;
    background:url(../img/icon-time.png) no-repeat;
    background-size:18px;
    width:26px;
    height:18px;
}

#session .top .duration span {
    display:inline-block;
}


#session .panel {
    position:absolute;
    bottom:0;
    left:0;
    top:60px;
    width:50%;
    background:whitesmoke;
    box-shadow:0 1px 1px rgba(0,0,0,0.15);
}

#session .panel-r {
    width:50%;
    right:0;
    left:auto;
    background:#fff;
}

#session .panel .header {
    position:absolute;
    top:15px;
    right:15px;
    cursor:pointer;
    z-index:10;
}

#session .panel .header select {
    border: 0;
    outline: 0;
    background: transparent;
    -webkit-appearance: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid #ddd;
    position: relative;
    padding:0px 10px;
    font-size:11px;
    width:100px;
}

#session .panel .editor {
    position:absolute;
    top:0px;
    bottom:0;
    left:0;
    right:0;
    padding:30px;
    font-family:monaco, menlo, monospace;
    font-size:13px;
    transition:background 0.2s ease;
    overflow-y:auto;
    padding-top:40px;
}

#session .panel .editor:focus {
    box-shadow:none;
    outline:none;
    background:rgba(255,255,255,0.5);
    transition:background 0.2s ease;
}

#session .chat input[type=text] {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:60px;
    width:100%;
    box-sizing:border-box;
    border-radius:0;
    border:0;
    border-top:1px solid #ddd;
    background:whitesmoke;
    margin:0;
    padding:15px;
    box-shadow:none;
}

#session .chat input[type=text]:focus {
    box-shadow:none;
    background:#fff;

}

#session .chat #messages {
    margin:0;
    padding:0;
    overflow-y:auto;
    position:absolute;
    bottom:60px;
    top:240px;
}

#session .chat #messages li {
    list-style:none;
    border-bottom:1px solid #eee;
    padding:10px 20px;
    font-size:13px;
}

#session .chat #messages li .author {
    font-weight:600;
    padding-right:20px;
    white-space:nowrap;
}
 
#session .video {
    background:#111;
    min-height:240px;
    position:relative;
}

#session .video .name {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.3);
    color:#fff;
    font-weight:600;
    padding:5px;
    text-align:center;
    text-shadow:0 0 3px #000;
}

#session .video .video-1 {
    position:absolute;
    left:0;
    right:50%;
    bottom:0;
    top:0;
    background:green;
}

#session .video .video-2 {
    position:absolute;
    right:0;
    left:50%;
    bottom:0;
    top:0;
    background:blue;
}

#notifications {
    position:absolute;
    top:2%;
    right:2%;
    z-index:10000000000;
    font-size:14px;
}

#notifications .message {
    background:#fff;
    width:400px;
    box-shadow:0 1px 7px rgba(0,0,0,0.2);
    margin-top:15px;
    border-radius:1px;
    border:1px solid rgba(0,0,0,0.15)
}

#notifications p {
    margin:0;
    margin-left:60px;
}

#notifications .message > div {
    padding:15px;
}

#notifications .message .content {
    overflow:hidden;
    min-height:42px;
    max-height:60px;
}

#notifications .message img {
    float:left;
    width:42px;
    border-radius:100px;
}

#notifications .message .actions {
    border-top:1px solid #ddd;
    text-align:center;
}

#notifications .btn {
    font-size:10px;
    font-weight:bold;
    margin:0 0.5em;
}