<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="inner_body">
<section class="create_projectnw">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12 col-sm-12">
<div class="left_menubx">
<div class="frame">
<div id="sidepanel" class="sidepanel">
<div id="profile">
<div class="wrap">
<img id="profile-img" src="http://emilcarlsson.se/assets/mikeross.png" class="online" alt="" />
<p>Waris</p>
<i class="fa fa-chevron-down expand-button" aria-hidden="true"></i>
<div id="status-options">
<ul>
<li id="status-online" class="active"><span class="status-circle"></span> <p>Online</p></li>
<li id="status-away"><span class="status-circle"></span> <p>Away</p></li>
<li id="status-busy"><span class="status-circle"></span> <p>Busy</p></li>
<li id="status-offline"><span class="status-circle"></span> <p>Offline</p></li>
</ul>
</div>
<div id="expanded">
<label for="twitter"><i class="fa fa-facebook fa-fw" aria-hidden="true"></i></label>
<input name="twitter" type="text" value="mikeross" />
<label for="twitter"><i class="fa fa-twitter fa-fw" aria-hidden="true"></i></label>
<input name="twitter" type="text" value="ross81" />
<label for="twitter"><i class="fa fa-instagram fa-fw" aria-hidden="true"></i></label>
<input name="twitter" type="text" value="mike.ross" />
</div>
</div>
</div>
<div id="search">
<label for=""><i class="fa fa-search" aria-hidden="true"></i></label>
<input type="text" placeholder="Search contacts...">
</div>
<div id="contacts" class="chat_list contacts">
<ul>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="http://emilcarlsson.se/assets/louislitt.png" alt="">
<div class="meta">
<p class="name">Imtiyaz <span class="date">Apr 20</span></p>
<p class="preview">You just got LITT up, Mike.</p>
</div>
</div>
</li>
<li class="contact active">
<div class="wrap">
<span class="contact-status busy"></span>
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="">
<div class="meta">
<p class="name">Rishal Raza<span class="date">Apr 20</span></p>
<p class="preview">Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things.</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status away"></span>
<img src="http://emilcarlsson.se/assets/rachelzane.png" alt="">
<div class="meta">
<p class="name">Shoaib <span class="date">Apr 20</span></p>
<p class="preview">I was thinking that we could have chicken tonight, sounds good?</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="http://emilcarlsson.se/assets/donnapaulsen.png" alt="">
<div class="meta">
<p class="name">Dilshad <span class="date">Apr 20</span></p>
<p class="preview">Mike, I know everything! I'm Donna..</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status busy"></span>
<img src="http://emilcarlsson.se/assets/jessicapearson.png" alt="">
<div class="meta">
<p class="name">Dilnawaz <span class="date">Apr 20</span></p>
<p class="preview">Have you finished the draft on the Hinsenburg deal?</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status"></span>
<img src="http://emilcarlsson.se/assets/haroldgunderson.png" alt="">
<div class="meta">
<p class="name">Asif Ali <span class="date">Apr 20</span></p>
<p class="preview">Thanks Mike! :)</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status"></span>
<img src="http://emilcarlsson.se/assets/danielhardman.png" alt="">
<div class="meta">
<p class="name">Shahbabu <span class="date">Apr 20</span></p>
<p class="preview">We'll meet again, Mike. Tell Jessica I said 'Hi'.</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status busy"></span>
<img src="http://emilcarlsson.se/assets/katrinabennett.png" alt="">
<div class="meta">
<p class="name">Bushra Naaz <span class="date">Apr 20</span></p>
<p class="preview">I've sent you the files for the Garrett trial.</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status"></span>
<img src="http://emilcarlsson.se/assets/charlesforstman.png" alt="">
<div class="meta">
<p class="name">Charles Forstman <span class="date">Apr 20</span></p>
<p class="preview">Mike, this isn't over.</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status"></span>
<img src="http://emilcarlsson.se/assets/jonathansidwell.png" alt="">
<div class="meta">
<p class="name">Jonathan Sidwell <span class="date">Apr 20</span></p>
<p class="preview"><span>You:</span> That's bullshit. This deal is solid.</p>
</div>
</div>
</li>
</ul>
</div>
<!-- <div id="bottom-bar">
<button id="addcontact"><i class="fa fa-user-plus fa-fw" aria-hidden="true"></i> <span>Add contact</span></button>
<button id="settings"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> <span>Settings</span></button>
</div>-->
</div>
<div class="content">
<div class="contact-profile">
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="">
<p>Harvey Specter</p>
<div class="social-media camera">
<a href="#" class="video_call">
<i class="fa fa-video-camera m-0" aria-hidden="true"></i>
</a>
<a href="#" class="common-btn">
View Profile
</a>
</div>
</div>
<div class="messages">
<ul>
<li class="sent">
<img src="http://emilcarlsson.se/assets/mikeross.png" alt="">
<p>How the hell am I supposed to get a jury to believe you when I am not even sure that I do?!</p>
<span class="msg_time">8:40 AM, Today</span>
</li>
<li class="replies">
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="">
<p>When you're backed against the wall, break the god damn thing down.</p>
<span class="msg_time">8:40 AM, Today</span>
</li>
<li class="replies">
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="">
<p>Excuses don't win championships.</p>
<span class="msg_time">8:40 AM, Today</span>
</li>
<li class="sent">
<img src="http://emilcarlsson.se/assets/mikeross.png" alt="">
<p>Oh yeah, did Michael Jordan tell you that?</p>
<span class="msg_time">8:40 AM, Today</span>
</li>
<li class="replies">
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="">
<p>No, I told him that.</p>
<span class="msg_time">8:40 AM, Today</span>
</li>
<li class="replies">
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="">
<p>What are your choices when someone puts a gun to your head?</p>
<span class="msg_time">8:40 AM, Today</span>
</li>
<li class="sent">
<img src="http://emilcarlsson.se/assets/mikeross.png" alt="">
<p>What are you talking about? You do what they say or they shoot you.</p>
<span class="msg_time">8:40 AM, Today</span>
</li>
<li class="replies">
<img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="">
<p>Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things.</p>
<span class="msg_time">8:40 AM, Today</span>
</li>
</ul>
</div>
<div class="message-input">
<div class="wrap">
<input type="text" placeholder="Write your message...">
<i class="fa fa-paperclip attachment" aria-hidden="true"></i>
<button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
/*.inner_body{*/
/* padding: 84px 0px 0px;*/
/*}*/
.left_menubx{
box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
border-radius:20px;
}
.contacts ul{
padding:0
}
.contacts ul li{
list-style :none;
}
.common-btn {
display: inline-block;
color: #FFFFFF;
background-color: #32465a;
text-align: center;
border-radius: 30px;
font-size: 14px;
border: none;
text-transform: none;
font-weight: 500;
line-height: normal;
cursor: pointer;
padding: 10px 25px;
min-width: 80px;
box-shadow: none;
}
.common-btn:hover {
-webkit-box-shadow: 0px 7px 14px rgb(0 0 0 / 29%);
box-shadow: 0px 3px 3px rgb(0 0 0 / 16%);
color: #0D0D0D;
background-color: #ffffff;
text-decoration:none;
}
.login_sign {
background-color: #F8F8F8;
padding: 60px 0px;
}
.loginsign_bx {
background-color: #ffffff;
border-radius: 10px;
-webkit-box-shadow: 0px 6px 12px rgb(0 0 0 / 10%);
box-shadow: 0px 6px 12px rgb(0 0 0 / 10%);
padding: 40px 30px;
}
.login_sign .modal-header .modal-title {
width: 100%;
text-align: center;
font-size: 30px;
font-weight: 600;
color: #333333;
margin-top: 0px;
}
.login_sign .modal-header {
padding-top: 0px;
padding-bottom: 23px;
border: none;
}
.social-cmn-btn {
width: 100%;
display: block;
border-radius: 5px;
text-align: center;
color: #fff;
font-size: 15px;
padding: 12px 20px;
margin-bottom: 15px;
font-weight: 500;
transition: 0.4s ease-in-out;
}
.social-cmn-btn.glplus {
background: #DD4B39;
}
.social-cmn-btn.glplus:hover {
background: #c13726;
}
.social-cmn-btn.fb {
background: #3B5998;
}
.social-cmn-btn i {
margin-right: 5px;
}
.social-cmn-btn.fb:hover {
background: #253f77;
}
.social-cmn-btn:hover {
color: #fff;
box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
}
span.or-syl {
text-align: center;
display: inline-block;
position: relative;
color: #000034;
font-size: 18px;
margin-bottom: 20px;
margin-top: 5px;
display: block;
}
span.or-syl::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 13px;
background-color: #DDDDDD;
width: 100%;
display: inline-block;
height: 1px;
}
span.or-syl span {
background-color: #ffffff;
position: relative;
padding-left: 10px;
padding-right: 10px;
font-weight: 600;
}
.form-control {
width: 100%;
height: 47px;
border: 1px solid #D4D4D4;
border-radius: 5px;
font-size: 14px;
color: #1D2245;
padding: 0 10px;
}
.form-control:focus {
box-shadow: none;
}
.login_sign .modal-form .modal-form-btn .btn {
background: #B9AC92;
border-radius: 30px;
padding: 10px 20px;
text-align: center;
font-size:20px;
font-weight: 500;
border: none;
box-shadow: none;
width: 100%;
height: 50px;
line-height: normal;
color: #FFFFFF;
margin-bottom: 5px;
}
.login_sign .modal-form .modal-form-btn .btn:hover {
-webkit-box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
background-color: #ffffff;
color: #183C6D;
}
.login_sign .modal-form .input-group .input-group-prepend {
max-width: 50%;
width: 100%;
}
.login_sign .modal-form .input-group .input-group-append {
width: 100%;
max-width: 50%;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.login_sign .modal-form .input-group .input-group-append .forget_pass {
font-weight: 500;
color:#887F6C;
font-size: 15px;
}
.login_sign .modal-form .input-group .input-group-append .forget_pass:hover{
color:#102542;
}
.login_sign .modal-form .input-group .input-group-prepend label {
font-weight: 500;
color:#102542;
font-size: 15px;
}
.check-style label:before {
content: '';
-webkit-appearance: none;
border: 0.5px solid #DDDDDD;
border-radius: 3px;
background-color: #F6F6F6;
padding: 8px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.check-style input:checked + label:after {
content: '';
display: block;
position: absolute;
background-color: transparent;
top: 5px;
left: 6px;
width: 5px;
height: 12px;
border: solid #7e7768;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.check-style input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.login_sign .modal-form .modal-bottom-info p {
margin-bottom: 0;
font-size: 15px;
font-weight: 500;
color: #102542;
}
.login_sign .modal-form .modal-bottom-info {
text-align: center;
margin-top: 20px;
}
.login_sign .modal-form .modal-bottom-info p a {
color: #B9AC92;
display: inline-block;
margin-left: 5px;
font-weight: 600;
}
.login_sign .modal-form .modal-bottom-info p a:hover{
color:#102542;
}
.frmgrp_mrg{
margin-top:20px;
margin-bottom:20px;
}
.login_sign .input-group.check_info .input-group-prepend {
max-width: 100%;
width: 100%;
}
.login_sign .input-group.check_info .input-group {
margin-bottom: 7px;
margin-top: 10px;
}
.login_sign .input-group.check_info .form-group.check-style label span {
position: relative;
top: -4px;
left: 2px;
}
.login_sign .form-group.check-style label {
font-size: 15px;
display: flex;
font-weight: 400;
align-items: start;
line-height: 23px;
}
.login_sign .input-group.check_info .check-style input:checked + label:after {
top: 2px;
}
.login_sign .input-group.check_info .form-group.check-style label a {
font-size: 15px;
font-weight: 600;
color:#B9AC92;
}
.login_sign .input-group.check_info .form-group.check-style label a:hover {
color:#102542;
}
.input-group.check_info {
margin-top: 20px;
}
.option-flex {
display: flex;
flex-direction: column;
align-items: center;
border: none;
}
.option-flex .custom-radio {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.option-flex .custom-radio [type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.option-flex .custom-radio .radio-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: none;
border-radius: 5px;
position: relative;
width: calc(50% - 10px);
}
.option-flex .custom-radio .label-icon {
background-size: auto 40px;
background-repeat: no-repeat;
margin-bottom: 0;
padding: 15px 30px;
background-position: bottom 50% left 15px;
justify-content: center;
display: flex;
align-items: baseline;
-webkit-transition: all 0.3s cubic-bezier(0.07, 0.49, 1, 0.08);
-moz-transition: all 0.3s cubic-bezier(0.07, 0.49, 1, 0.08);
transition: all 0.3s cubic-bezier(0.07, 0.49, 1, 0.08);
}
.option-flex .custom-radio .label-icon {
background-size: 30px;
padding: 15px;
background-color: #EFEFEF;
}
.option-flex .custom-radio .or-separator {
margin: 0 35px;
}
.option-flex .custom-radio label, .option-flex .custom-radio .or-separator {
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 130%;
letter-spacing: 0.03em;
color:#404040;
}
.option-heading {
display: block;
font-family: "Dosis", sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 130%;
letter-spacing: 0.05em;
text-align: center;
color: black;
text-transform: uppercase;
}
/* IMAGE STYLES */
[type=radio] + .label-icon {
cursor: pointer;
}
/* CHECKED STYLES */
[type=radio]:checked + .label-icon {
background: #B9AC92;
background-size: auto 40px;
background-repeat: no-repeat;
color: white;
}
.option-flex .custom-radio .label-icon {
background-size: 30px;
width: 100%;
border-radius: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mrgbtn_nw{
margin-bottom:20px;
}
.login_sign .white_img{
display:none;
}
.login_sign .label-icon img {
margin-right: 10px;
max-width: 30px;
}
.login_sign [type=radio]:checked + .label-icon.option1 .white_img{
display:inline-block;
}
.login_sign [type=radio]:checked + .label-icon.option1 .drk_img{
display:none;
}
.login_sign [type=radio]:checked + .label-icon.option2 .white_img{
display:inline-block;
}
.login_sign [type=radio]:checked + .label-icon.option2 .drk_img{
display:none;
}
.create_projectnw{
font-size:16px;
padding: 60px 0px;
background-color:#eeeeee;
}
.create_projectnw .left_menubx ul li a {
font-size: 15px;
color: #A7A3A3;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
padding: 8px 15px;
position: relative;
cursor: not-allowed;
}
.create_projectnw .left_menubx ul li.active a::before {
content: " ";
position: absolute;
border-left: 3px solid #B9AC92;
left: 0;
right: auto;
bottom: 0;
top: 0;
}
.create_projectnw .left_menubx ul li.active.completed a::before{
display:none;
}
.create_projectnw .left_menubx ul li.active a,
.create_projectnw .left_menubx ul li.visited a {
color: #333333;
cursor: pointer;
}
.create_projectnw .left_menubx ul li.active a .checkiocn,
.create_projectnw .left_menubx ul li.visited a .checkiocn{
background-color:#77B40D;
}
.create_projectnw .left_menubx ul li a .checkiocn {
margin-left: auto;
width: 16px;
color: #ffffff;
line-height: 17px;
text-align: center;
font-size: 13px;
height: 16px;
background-color: #B7B7B7;
border-radius: 50%;
display: inline-block;
}
.create_projectnw .left_menubx ul li a .icon_area{
width:16px;
margin-right:12px;
}
.create_projectnw .white_contentbx{
background-color:#ffffff;
border-radius:7px;
box-shadow: 0px 3px 3px rgb(0 0 0 / 10%);
}
.create_projectnw .white_contentbx .maintop_heading h1 {
font-size: 18px;
color: #333333;
font-weight: 500;
margin-bottom: 7px;
}
.create_projectnw .white_contentbx .maintop_heading {
padding: 15px 20px;
border-bottom: 1px solid #D1D0D0;
}
.create_projectnw .white_contentbx .maintop_heading p{
font-size:15px;
color:#333333;
margin-bottom:0px;
}
.create_projectnw .white_contentbx .footbtm {
padding: 18px 20px;
text-align: right;
border-top: 1px solid #D1D0D0;
}
.create_projectnw .white_contentbx .footbtm .common-btn.bdr{
border: 2px solid #CBCBCB;
color:#666666;
padding: 8px 25px;
margin-right:15px;
}
.create_projectnw .white_contentbx .footbtm .common-btn.bdr:hover {
background-color: #fafafa;
box-shadow: none;
color:#666666;
}
.create_projectnw .white_contentbx .footbtm .common-btn:hover {
background-color: #9b907a;
color: #ffffff;
}
.create_projectnw .white_contentbx .body_form{
padding: 20px 20px;
}
.create_projectnw .white_contentbx .body_form .heading_tpon {
font-size: 16px;
color: #333333;
font-weight: 400;
margin-bottom: 15px;
}
.rdio {
position: relative;
}
.rdio input[type=radio] {
opacity: 0;
}
.custom.rdio label {
padding-left: 6px;
cursor: pointer;
font-size: 15px;
color: #333333;
line-height: normal;
}
.custom.rdio label:before {
width: 18px;
height: 18px;
position: absolute;
top: 1px;
left: 0;
content: "";
display: inline-block;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 1px solid #B9AC92;
background: #fff;
}
.custom.rdio input[type=radio] {
margin: 0px;
}
.custom.rdio input[type=radio]:disabled + label {
color: #999;
}
.custom.rdio input[type=radio]:disabled + label:before {
background-color: #fbc52d;
}
.custom.rdio input[type=radio]:checked + label::after {
content: "";
position: absolute;
top: 5px;
left: 4px;
display: inline-block;
font-size: 11px;
width: 10px;
height: 10px;
background-color: #B9AC92;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.radio_commonbx {
border: 1px solid #CCCCCC;
border-radius: 7px;
text-align: center;
min-height:170px;
padding: 20px;
position:relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom:20px;
flex-direction: column;
}
.radio_commonbx i{ font-size: 22px; margin-bottom: 13px; }
.radio_commonbx i img{ width: 35px; height: 35px; }
.radio_commonbx .small_heading {
font-size: 15px;
color: #333333;
font-weight: 500;
margin-bottom:12px;
}
.radio_commonbx p{
font-size: 14px;
color:#333333;
margin-bottom:0px;
}
.radio_commonbx .iconwtop {
font-size: 23px;
color: #333333;
margin-bottom: 12px;
}
.radio_commonbx .rdio.custom {
position: absolute;
right: 5px;
top: 5px;
}
.create_projectnw .white_contentbx .body_form .form-group label {
color: #333333;
font-weight: 500;
font-size: 15px;
margin-bottom: 12px;
}
.create_projectnw .white_contentbx .body_form .small_heading {
font-size: 15px;
color: #333333;
font-weight: 500;
margin-bottom: 12px;
}
.create_projectnw .white_contentbx .body_form .common_linetext{
font-size: 14px;
color:#333333;
}
.create_projectnw .white_contentbx .body_form .common_linetext li{
position:relative;
padding-left:25px;
margin-bottom: 5px;
}
.create_projectnw .white_contentbx .body_form .common_linetext li:last-child{ margin-bottom: 0; }
.create_projectnw .white_contentbx .body_form .common_linetext li:after {
content: " ";
position: absolute;
width: 5px;
height: 5px;
border-radius: 100%;
background-color: #333333;
top: 7px;
left: 9px;
}
.create_projectnw .white_contentbx p {
font-size: 14px;
color: #333333;
margin-bottom: 10px;
}
.link{
font-size:16px;
color:#928771;
font-weight:500;
}
.link:hover{
color: #7d7361;
text-decoration:underline;
}
.body_form .form-group textarea{
padding: 20px 10px;
background: #FFFFFF;
border: 1px solid #D4D4D4;
border-radius: 5px;
height: 219px;
width: 100%;
margin-bottom: 12px;
}
.body_form .text-area-sec{ text-align: right; }
.body_form .text-area-sec span{ color: #666666; font-size: 14px; color: #666666; }
.filelabel {
border-radius: 5px;
border: 2px dashed #B9AC92;
display: block;
padding: 5px 16px;
transition: border 300ms ease;
cursor: pointer;
text-align: center;
margin: 0;
background-color: #F9F9F9;
height: 109px;
display: flex;
align-items: center;
}
.filelabel i {
display: block;
font-size: 30px;
padding-bottom: 2px;
margin-right: 10px;
}
.filelabel .title{ font-size: 15px; width: 100%; }
.filelabel .title span{ color: #B9AC92; display: inline-block; }
.filelabel i{ font-size: 22px; }
.filelabel i,
.filelabel .title {
color: grey;
transition: 200ms color;
}
.FileUpload1{
display:none;
}
.body_form .form-group .form-input{ margin-bottom: 25px; }
.body_form .form-group > span{ display: inline-block; color: #666666; font-size: 14px; }
.body_form .file-sec{ margin-bottom: 54px; }
.body_form .button-sec{ padding: 23px 0 0 0 !important; position: relative; }
.body_form .button-sec::before{
content: "";
position: absolute;
top: -1px;
left: -1910px;
width: 1920px;
height: 1px;
background: #D1D0D0;
}
.body_form .button-sec::after{
content: "";
position: absolute;
top: -1px;
right: -1910px;
width: 1920px;
height: 1px;
background: #D1D0D0;
}
.body_form{ overflow: hidden; }
.white_contentbx .screening .add-btn{
display: inline-block;
font-size: 16px;
color: #928771;
font-weight: 600;
position: relative;
padding-left: 20px;
}
.white_contentbx .screening .add-btn span{
display: inline-block;
position: absolute;
top: 3px;
left: 0;
font-size: 16px;
line-height: 16px;
color: #928771;
}
.white_contentbx .screening,
.white_contentbx .require-sec{ padding: 35px; position: relative; }
.white_contentbx .screening::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
background: #D1D0D0;
height: 1px;
width: 100%;
}
.white_contentbx .screening h2,
.white_contentbx .require-sec h2{ font-size: 20px; line-height: 30px; color: #333333; font-weight: 600; margin-bottom: 25px; }
.white_contentbx .screening p{ font-size: 16px; line-height: 44px; font-weight: 600; margin-bottom: 26px; }
.white_contentbx .require-sec p{ font-size: 16px; line-height: 25px; }
.white_contentbx .skill-button h4{ font-size: 18px; line-height: 25px; color: #333333; margin-bottom: 13px; font-weight: 600; }
.white_contentbx .skill-button{ margin-top: 20px; margin-bottom: 33px; }
.white_contentbx .skill-button:last-child{ margin-bottom: 0; margin-top: 0; }
.white_contentbx .skill-button ul li a{
display: flex;
align-items: center;
background: #FCFCFC;
border: 1px solid #D4D4D4;
border-radius: 30px;
font-size: 16px;
line-height: 26px;
color: #666666;
padding: 8px 17px;
cursor: pointer;
}
.white_contentbx .skill-button ul li a span{
display: inline-block;
margin-right: 5px;
}
.white_contentbx .skill-button ul li:last-child a{
border: none;
padding: 0;
color: #928771;
}
.white_contentbx .skill-button ul{ display: flex; flex-wrap: wrap; align-items: center; margin-bottom: -15px; }
.white_contentbx .skill-button ul li{ margin-right: 15px; margin-bottom: 15px; }
.white_contentbx .skill-button ul li:last-child{ margin-right: 0; }
.white_contentbx .form-group select{
background: #FFFFFF;
border: 1px solid #D4D4D4;
border-radius: 5px;
width: 100%;
height: 50px;
padding: 13px 20px;
font-size: 15px;
background: url(../images/caret.svg) no-repeat calc(100% - 16px);
background-size: 13px;
padding-right: 25px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.talent .screening::before{ display: none; }
.white_contentbx .user-section{ padding: 35px; border: 1px solid #CCCCCC; margin-bottom: 30px; }
.white_contentbx .user-section:last-child{ margin-bottom: 0; }
.white_contentbx .user-card .user-image{
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px auto;
}
.white_contentbx .user-card{
padding: 20px 10px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
}
.white_contentbx .user-card .user-cont h4{ font-size: 20px; line-height: 1.2; font-weight: 600; margin-bottom: 20px; }
.white_contentbx .user-card .user-cont .common-btn{ border-radius: 0; }
.white_contentbx .user-card{ text-align: center; }
.white_contentbx .user-card .user-image img{ width: 100%; }
.white_contentbx .form-secction .form-input input[type="text"]{
width: 100%;
padding: 0 20px;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #D9D9D9;
height: 50px;
font-size: 14px;
font-weight: 400;
color: #777777;
}
.white_contentbx .form-secction .form-input{ margin-bottom: 20px; }
.user-search .user-wrapper{ display: flex; align-items: center; flex-wrap: wrap; margin: 0 -15px; margin-bottom: 20px; }
.user-search .user-wrapper:last-child{ margin-bottom: 0; }
.user-search .user-image{ width: 15%; padding: 0 15px; text-align: center; }
.user-search .user-image span{
display: inline-block;
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
}
.user-search .usearch{ width: 70%; padding: 0 15px; }
.user-search .usearch input[type="text"]{
width: 100%;
padding: 0 20px;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #D9D9D9;
height: 50px;
font-size: 14px;
font-weight: 400;
color: #777777;
}
.user-search .user-btn{ width: 15%; padding: 0 15px; text-align: center; }
.user-search .user-image span img{ width: 100%; }
.maintop_heading .heading-wrapper{ display: flex; align-items: center; justify-content: space-between; }
.body_form .title h4{ font-size: 18px; line-height: 25px; margin-bottom: 14px; font-weight: 600; color: #333333; }
.body_form .title h5{ font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.body_form .title{ margin-bottom: 23px; }
.body_form .title p a{ color: #B9AC92; display: inline-block; }
.body_form .title p a:hover{ color: #333333; }
.body_form .title:last-child{ margin-bottom: 0; }
.body_form .title-sec{ position: relative; }
.body_form .title-sec .edit{
display: flex;
align-items: center;
justify-content: center;
width: 41px;
height: 41px;
border: 1px solid #D1D0D0;
border-radius: 50%;
font-size: 17px;
line-height: 17px;
color: #333333;
position: absolute;
top: 0;
right: 0;
transition: 0.5s ease-in-out;
}
.body_form .title-sec .edit:hover{ background: #B9AC92; border-color: #B9AC92; color: #fff; }
.white_contentbx .form-devide{ position: relative; }
.white_contentbx .form-devide::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #D1D0D0;
}
.body_form .title-sec ul{ display: flex; flex-wrap: wrap; margin: 0 -15px; margin-bottom: -33px; }
.body_form .title-sec ul li{ width: 50%; padding: 0 15px; margin-bottom: 33px; }
.white_contentbx .form-devide:last-child::after{ display: none; }
.radio_commonbx {
min-height: 183px;
}
.radio_commonbx.spl_height {
min-height: 135px;
}
.input-group.price_range .input-group-text{
background-color:#ffffff;
border-right:none;
}
.input-group.price_range .form-control{
border-left:none;
padding-left:0px;
text-align:right;
}
.budget_bx .twobx{
margin-left:15px;
margin-right:15px;
font-size: 15px;
color: #333333;
font-weight: 500;
}
.budget_bx {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.input-group.price_range .input-group-append .input-group-text {
border: none;
font-size: 14px;
padding-left: 5px;
padding-right: 0px;
}
.budget_bx .input-group.price_range {
max-width: 160px;
}
.body_form.bdr_nw{
border-top:1px solid #D1D0D0;
border-bottom:1px solid #D1D0D0;
margin-bottom: 20px;
}
@media(max-width:1400px){
.white_contentbx .skill-button ul li a{ font-size: 13px; }
.white_contentbx .skill-button ul li {
margin-right: 10px;
margin-bottom: 10px;
}
.white_contentbx .skill-button h4{ font-size: 16px; line-height: 23px;}
}
@media(max-width:1199px){
.create_projectnw .white_contentbx p{ font-size: 12px; }
.white_contentbx .screening h2, .white_contentbx .require-sec h2,
.white_contentbx .screening p{ margin-bottom: 14px; }
.white_contentbx .user-section{ padding: 15px; }
.white_contentbx .user-card .user-image{ width: 90px; height: 90px; }
.white_contentbx .user-card .user-cont h4{ font-size: 18px; margin-bottom: 15px; }
.user-search .user-image span{ width: 70px; height: 70px; }
}
@media(max-width:991px){
.white_contentbx .screening h2, .white_contentbx .require-sec h2{
font-size: 17px;
line-height: 27px;
}
.white_contentbx .user-section .user-row{ margin-bottom: -20px; }
.white_contentbx .user-section .user-col{ margin-bottom: 30px; }
.user-search .user-image{ width: 23%; }
.user-search .usearch{ width: 54%; }
.user-search .user-btn{ width: 23%; }
}
@media(max-width:767px){
.body_form .form-group textarea{ height: 150px; }
.body_form .file-sec {
margin-bottom: 25px;
}
.user-search .user-image {
width: 28%;
}
.user-search .usearch {
width: 71%;
}
.user-search .user-btn{ width: 100%; margin-top: 20px; }
.user-search .user-btn .common-btn{ width: 100%; }
.body_form .title h4{ font-size: 16px; line-height: 23px; }
.body_form .title h5{ font-size: 14px; }
}
@media(max-width:479px){
.create_projectnw .white_contentbx .maintop_heading h1{ font-size: 16px; }
.create_projectnw .white_contentbx .maintop_heading p,
.create_projectnw .white_contentbx .body_form .common_linetext li,
.body_form .form-group > span{ font-size: 13px; }
.body_form .form-group textarea {
height: 120px;
}
.create_projectnw .white_contentbx .body_form .small_heading{ font-size: 14px !important; }
.filelabel .title{ font-size: 13px; }
.filelabel{ height: 65px; }
.white_contentbx .screening, .white_contentbx .require-sec{
padding: 20px;
}
.user-search .user-image,
.user-search .usearch{ width: 100%; }
.user-search .usearch{ margin-top: 20px; }
.maintop_heading .heading-wrapper{ flex-wrap: wrap; }
.create_projectnw .white_contentbx .maintop_heading h1{ width: 100%; margin-bottom: 15px; }
.body_form .title-sec ul li{ width: 100%; }
.create_projectnw .white_contentbx .footbtm{ text-align: center; }
.create_projectnw .white_contentbx .footbtm a{ margin-bottom: 15px; }
}
.input-group.price_range .input-group-text {
background-color: #ffffff;
border-right: none;
font-weight: normal;
color: #495057;
border-color: #D4D4D4;
}
/*body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #27ae60;
font-family: "proxima-nova", "Source Sans Pro", sans-serif;
font-size: 1em;
letter-spacing: 0.1px;
color: #32465a;
text-rendering: optimizeLegibility;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
-webkit-font-smoothing: antialiased;
}*/
.frame {
width: 100%;
min-width: 360px;
max-width: 100%;
height: 92vh;
min-height: 300px;
max-height: 720px;
background: transparent;
}
@media screen and (max-width: 360px) {
.frame {
width: 100%;
height: 100vh;
}
}
.frame .sidepanel {
float: left;
min-width: 280px;
max-width: 340px;
width: 40%;
height: 100%;
background: #2c3e50;
color: #f5f5f5;
overflow: hidden;
border-radius: 10px 0px 0px 10px;
position: relative;
}
@media screen and (max-width: 735px) {
.frame .sidepanel {
width: 58px;
min-width: 58px;
}
}
.frame .sidepanel #profile {
width: 80%;
margin: 25px auto;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile {
width: 100%;
margin: 0 auto;
padding: 5px 0 0 0;
background: #32465a;
}
}
.frame .sidepanel #profile.expanded .wrap {
height: 210px;
line-height: initial;
}
.frame .sidepanel #profile.expanded .wrap p {
margin-top: 20px;
}
.frame .sidepanel #profile.expanded .wrap i.expand-button {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.frame .sidepanel #profile .wrap {
height: 60px;
line-height: 60px;
overflow: hidden;
-moz-transition: 0.3s height ease;
-o-transition: 0.3s height ease;
-webkit-transition: 0.3s height ease;
transition: 0.3s height ease;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap {
height: 55px;
}
}
.frame .sidepanel #profile .wrap img {
width: 50px;
border-radius: 50%;
padding: 3px;
border: 2px solid #e74c3c;
height: auto;
float: left;
cursor: pointer;
-moz-transition: 0.3s border ease;
-o-transition: 0.3s border ease;
-webkit-transition: 0.3s border ease;
transition: 0.3s border ease;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap img {
width: 40px;
margin-left: 4px;
}
}
.frame .sidepanel #profile .wrap img.online {
border: 2px solid #2ecc71;
}
.frame .sidepanel #profile .wrap img.away {
border: 2px solid #f1c40f;
}
.frame .sidepanel #profile .wrap img.busy {
border: 2px solid #e74c3c;
}
.frame .sidepanel #profile .wrap img.offline {
border: 2px solid #95a5a6;
}
.frame .sidepanel #profile .wrap p {
float: left;
margin-left: 15px;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap p {
display: none;
}
}
.frame .sidepanel #profile .wrap i.expand-button {
float: right;
margin-top: 23px;
font-size: 0.8em;
cursor: pointer;
color: #435f7a;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap i.expand-button {
display: none;
}
}
.frame .sidepanel #profile .wrap #status-options {
position: absolute;
opacity: 0;
visibility: hidden;
width: 150px;
margin: 70px 0 0 0;
border-radius: 6px;
z-index: 99;
line-height: initial;
background: #435f7a;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap #status-options {
width: 58px;
margin-top: 57px;
}
}
.frame .sidepanel #profile .wrap #status-options.active {
opacity: 1;
visibility: visible;
margin: 75px 0 0 0;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap #status-options.active {
margin-top: 62px;
}
}
.frame .sidepanel #profile .wrap #status-options:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #435f7a;
margin: -8px 0 0 24px;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap #status-options:before {
margin-left: 23px;
}
}
.frame .sidepanel #profile .wrap #status-options ul {
overflow: hidden;
border-radius: 6px;
}
.frame .sidepanel #profile .wrap #status-options ul li {
padding: 15px 0 30px 18px;
display: block;
cursor: pointer;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap #status-options ul li {
padding: 15px 0 35px 22px;
}
}
.frame .sidepanel #profile .wrap #status-options ul li:hover {
background: #496886;
}
.frame .sidepanel #profile .wrap #status-options ul li span.status-circle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px 0 0 0;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap #status-options ul li span.status-circle {
width: 14px;
height: 14px;
}
}
.frame .sidepanel #profile .wrap #status-options ul li span.status-circle:before {
content: '';
position: absolute;
width: 14px;
height: 14px;
margin: -3px 0 0 -3px;
background: transparent;
border-radius: 50%;
z-index: 0;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap #status-options ul li span.status-circle:before {
height: 18px;
width: 18px;
}
}
.frame .sidepanel #profile .wrap #status-options ul li p {
padding-left: 12px;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #profile .wrap #status-options ul li p {
display: none;
}
}
.frame .sidepanel #profile .wrap #status-options ul li#status-online span.status-circle {
background: #2ecc71;
}
.frame .sidepanel #profile .wrap #status-options ul li#status-online.active span.status-circle:before {
border: 1px solid #2ecc71;
}
.frame .sidepanel #profile .wrap #status-options ul li#status-away span.status-circle {
background: #f1c40f;
}
.frame .sidepanel #profile .wrap #status-options ul li#status-away.active span.status-circle:before {
border: 1px solid #f1c40f;
}
.frame .sidepanel #profile .wrap #status-options ul li#status-busy span.status-circle {
background: #e74c3c;
}
.frame .sidepanel #profile .wrap #status-options ul li#status-busy.active span.status-circle:before {
border: 1px solid #e74c3c;
}
.frame .sidepanel #profile .wrap #status-options ul li#status-offline span.status-circle {
background: #95a5a6;
}
.frame .sidepanel #profile .wrap #status-options ul li#status-offline.active span.status-circle:before {
border: 1px solid #95a5a6;
}
.frame .sidepanel #profile .wrap #expanded {
padding: 100px 0 0 0;
display: block;
line-height: initial !important;
}
.frame .sidepanel #profile .wrap #expanded label {
float: left;
clear: both;
margin: 0 8px 5px 0;
padding: 5px 0;
}
.frame .sidepanel #profile .wrap #expanded input {
border: none;
margin-bottom: 6px;
background: #32465a;
border-radius: 3px;
color: #f5f5f5;
padding: 7px;
width: calc(100% - 43px);
}
.frame .sidepanel #profile .wrap #expanded input:focus {
outline: none;
background: #435f7a;
}
.frame .sidepanel #search {
border-top: 1px solid #32465a;
border-bottom: 1px solid #32465a;
font-weight: 300;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #search {
display: none;
}
}
.frame .sidepanel #search label {
position: absolute;
margin: 10px 0 0 20px;
}
.frame .sidepanel #search input {
padding: 10px 0 10px 46px;
width: 100%;
border: none;
background: #32465a;
color: #f5f5f5;
font-size: 14px;
}
.frame .sidepanel #search input:focus {
outline: none;
background: #435f7a;
}
.frame .sidepanel #search input::-webkit-input-placeholder {
color: #f5f5f5;
}
.frame .sidepanel #search input::-moz-placeholder {
color: #f5f5f5;
}
.frame .sidepanel #search input:-ms-input-placeholder {
color: #f5f5f5;
}
.frame .sidepanel #search input:-moz-placeholder {
color: #f5f5f5;
}
.frame .sidepanel .contacts {
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-top: 15px;
padding-bottom: 15px;
}
@media screen and (max-width: 735px) {
.frame .sidepanel .contacts {
height: calc(100% - 149px);
overflow-y: scroll;
overflow-x: hidden;
}
.frame .sidepanel .contacts::-webkit-scrollbar {
display: none;
}
}
.frame .sidepanel .contacts.expanded {
height: calc(100% - 334px);
}
.frame .sidepanel .contacts::-webkit-scrollbar {
width: 8px;
background: #2c3e50;
}
.frame .sidepanel .contacts::-webkit-scrollbar-thumb {
background-color: #243140;
}
.frame .sidepanel .contacts ul li.contact {
position: relative;
padding: 10px 0 15px 0;
font-size: 0.9em;
cursor: pointer;
}
@media screen and (max-width: 735px) {
.frame .sidepanel .contacts ul li.contact {
padding: 6px 0 15px 8px;
}
}
.frame .sidepanel .contacts ul li.contact:hover {
background: #32465a;
}
.frame .sidepanel .contacts ul li.contact.active {
background: #32465a;
border-right: 5px solid #435f7a;
}
.frame .sidepanel .contacts ul li.contact.active span.contact-status {
border: 2px solid #32465a !important;
}
.frame .sidepanel .contacts ul li.contact .wrap {
width: 88%;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
}
.chat_list .date{
position:relative;
}
@media screen and (max-width: 735px) {
.frame .sidepanel .contacts ul li.contact .wrap {
width: 100%;
}
}
.frame .sidepanel .contacts ul li.contact .wrap span {
position: absolute;
left: 0;
margin: -2px 0 0 -2px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #2c3e50;
background: #95a5a6;
}
.frame .sidepanel .chat_list ul li.contact .wrap span.date {
position: relative;
background-color: transparent;
border-radius: 0px;
font-size: 11px;
width: auto;
font-weight: 400;
height: auto;
margin: 0;
}
.frame .sidepanel .contacts ul li.contact .wrap span.online {
background: #2ecc71;
}
.frame .sidepanel .contacts ul li.contact .wrap span.away {
background: #f1c40f;
}
.frame .sidepanel .contacts ul li.contact .wrap span.busy {
background: #e74c3c;
}
.frame .sidepanel .contacts ul li.contact .wrap img {
width: 40px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
@media screen and (max-width: 735px) {
.frame .sidepanel .contacts ul li.contact .wrap img {
margin-right: 0px;
}
}
.frame .sidepanel .contacts ul li.contact .wrap .meta {
padding: 5px 0 0 0;
width: 100%;
}
@media screen and (max-width: 735px) {
.frame .sidepanel .contacts ul li.contact .wrap .meta {
display: none;
}
}
.frame .sidepanel .contacts ul li.contact .wrap .meta .name {
font-weight: 500;
margin-bottom: 0px;
font-size: 13px;
display: flex;
justify-content: space-between;
}
.frame .sidepanel .contacts ul li.contact .wrap .meta .preview {
margin: -1px 0 0 0;
padding: 0 0 1px;
font-weight: 400;
white-space: nowrap;
max-width: 170px;
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
-moz-transition: 1s all ease;
-o-transition: 1s all ease;
-webkit-transition: 1s all ease;
transition: 1s all ease;
}
.frame .sidepanel .contacts ul li.contact .wrap .meta .preview span {
position: initial;
border-radius: initial;
background: none;
border: none;
padding: 0 2px 0 0;
margin: 0 0 0 1px;
opacity: .5;
}
.frame .sidepanel #bottom-bar {
position: absolute;
width: 100%;
bottom: 0;
}
.frame .sidepanel #bottom-bar button {
float: left;
border: none;
width: 50%;
padding: 10px 0;
background: #32465a;
color: #f5f5f5;
cursor: pointer;
font-size: 0.85em;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #bottom-bar button {
float: none;
width: 100%;
padding: 15px 0;
}
}
.frame .sidepanel #bottom-bar button:focus {
outline: none;
}
.frame .sidepanel #bottom-bar button:nth-child(1) {
border-right: 1px solid #2c3e50;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #bottom-bar button:nth-child(1) {
border-right: none;
border-bottom: 1px solid #2c3e50;
}
}
.frame .sidepanel #bottom-bar button:hover {
background: #435f7a;
}
.frame .sidepanel #bottom-bar button i {
margin-right: 3px;
font-size: 1em;
}
@media screen and (max-width: 735px) {
.frame .sidepanel #bottom-bar button i {
font-size: 1.3em;
}
}
@media screen and (max-width: 735px) {
.frame .sidepanel #bottom-bar button span {
display: none;
}
}
.frame .content {
float: right;
width: 60%;
height: 100%;
overflow: hidden;
position: relative;
background-color: #e7e7e7;
border-radius: 0px 15px 15px 0px;
}
@media screen and (max-width: 735px) {
.frame .content {
width: calc(100% - 58px);
min-width: 300px !important;
}
}
@media screen and (min-width: 900px) {
.frame .content {
width: calc(100% - 340px);
}
}
.frame .content .contact-profile {
width: 100%;
height: 60px;
line-height: 60px;
background: #f5f5f5;
}
.frame .content .contact-profile img {
width: 40px;
border-radius: 50%;
float: left;
margin: 9px 12px 0 9px;
}
.frame .content .contact-profile p {
float: left;
margin-bottom: 0px;
}
.frame .content .contact-profile .social-media {
float: right;
}
.frame .content .contact-profile .social-media.camera a.video_call {
color: #ffffff;
width: 35px;
border-radius: 50%;
font-size: 13px;
text-align: center;
height: 35px;
background-color: #32465a;
line-height: 35px;
display: inline-block;
margin-right: 10px;
}
.frame .content .contact-profile .social-media.camera a.video_call:hover{
color:#b9ac92;
background-color:#ffffff;
}
.frame .content .contact-profile .social-media i {
margin-left: 14px;
}
.frame .content .contact-profile .social-media i:nth-last-child(1) {
margin-right: 20px;
}
.frame .content .messages {
height: auto;
min-height: calc(100% - 150px);
max-height: calc(100% - 150px);
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
}
.frame .content .contact-profile .social-media.camera a.common-btn {
font-size: 12px;
padding: 8px 15px;
margin-right: 15px;
}
@media screen and (max-width: 735px) {
.frame .content .messages {
max-height: calc(100% - 105px);
}
}
.frame .content .messages::-webkit-scrollbar {
width: 8px;
background: transparent;
}
.frame .content .messages::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
}
.frame .content .messages ul li {
display: inline-block;
clear: both;
float: left;
margin: 25px 15px 5px 15px;
width: calc(100% - 25px);
font-size: 0.9em;
position: relative;
}
.frame .content .messages ul li:nth-last-child(1) {
margin-bottom: 20px;
}
.frame .content .messages ul li.sent img {
margin: 6px 8px 0 0;
}
.frame .content .messages ul li.sent p {
background: #32465a;
color: #f5f5f5;
margin-bottom: 0px;
}
.frame .content .messages ul li.replies img {
float: right;
margin: 6px 0 0 8px;
}
.frame .content .messages ul li.replies p {
background: #effcf5;
float: right;
margin-bottom: 0px;
}
.frame .content .messages ul li img {
width: 22px;
border-radius: 50%;
float: left;
}
.frame .content .messages ul li p {
display: inline-block;
padding: 10px 15px;
font-size: 13px;
border-radius: 20px;
margin-bottom: 5px !important;
max-width: 205px;
line-height: 130%;
}
.frame .content .messages ul li .msg_time {
position: absolute;
left: 40px;
right: auto;
bottom: -15px;
color: #2c2c2c;
font-size: 11px;
min-width: 100px;
}
.frame .content .messages ul li.replies .msg_time {
right: 40px;
left: auto;
text-align: right;
}
@media screen and (min-width: 735px) {
.frame .content .messages ul li p {
max-width: 300px;
}
}
.frame .content .message-input {
position: absolute;
bottom: 0;
width: 100%;
z-index: 99;
background-color: #ffffff;
}
.frame .content .message-input .wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.frame .content .message-input .wrap input {
float: left;
border: none;
width: 100%;
padding: 11px 32px 10px 8px;
font-size: 0.8em;
color: #32465a;
height: 50px;
}
@media screen and (max-width: 735px) {
.frame .content .message-input .wrap input {
padding: 15px 32px 16px 8px;
}
}
.frame .content .message-input .wrap input:focus {
outline: none;
}
.frame .content .message-input .wrap .attachment {
position: absolute;
right: 60px;
z-index: 4;
margin-top: 10px;
margin: 0px;
font-size: 1.1em;
color: #435f7a;
opacity: .5;
cursor: pointer;
}
@media screen and (max-width: 735px) {
.frame .content .message-input .wrap .attachment {
margin-top: 17px;
right: 65px;
}
}
.frame .content .message-input .wrap .attachment:hover {
opacity: 1;
}
.frame .content .message-input .wrap button {
float: right;
border: none;
width: 50px;
height: 50px;
padding: 12px 0;
cursor: pointer;
background: #32465a;
color: #f5f5f5;
}
@media screen and (max-width: 735px) {
.frame .content .message-input .wrap button {
padding: 16px 0;
}
}
.frame .content .message-input .wrap button:hover {
background: #435f7a;
}
.frame .content .message-input .wrap button:focus {
outline: none;
}
.home-banner .field-box {
background: #fff;
border-radius: 5px;
padding: 7px 15px 6px;
margin: 0 1px;
height: 56px;
}
.home-banner label {
display: block;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
color: #5A5855;
margin-bottom: 0px;
}
.home-banner .field-box .form-control {
height: 27px !important;
border: none;
padding-left: 0px;
padding-top: 3px;
width: 100%;
padding: 0px;
color: #979797;
font-size: 15px;
position: relative;
}
.banner-search-btn .common-btn {
font-size: 20px;
background: #B9AC92;
color: #FFFFFF;
padding: 13px 0px !important;
border-radius: 3px;
border: none;
width: 100%;
}
.banner-search-btn .common-btn:hover {
background: #ffffff;
color:#B9AC92;
}
.list_area .right-cmn-bx {
background-color: #ffffff;
-webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
border: none;
padding: 15px;
width: 100%;
display: block;
position: relative;
border-radius: 5px;
}
.list_area.details_listing .right-cmn-bx .media {
align-items: center;
}
.list_area.details_listing .right-cmn-bx img {
width: 100px;
height: 100px;
-ms-flex-item-align: start;
align-self: flex-start;
-o-object-fit: cover;
object-fit: cover;
}
.list_area.details_listing .right-cmn-bx img {
width: 100px;
height: 100px;
-ms-flex-item-align: start;
align-self: flex-start;
-o-object-fit: cover;
object-fit: cover;
border-radius: 5px;
}
.list_area.details_listing .right-cmn-bx .media .media-body h5 a {
color: #333;
}
.list_area.details_listing .right-cmn-bx .media .media-body h5 a:hover {
color: #666666;
}
.rating_bx {
padding: 0px 0px;
margin-bottom: 7px;
}
.rating_bx i {
font-size: 16px;
color: #FFCC00;
}
.list_area.details_listing .right-cmn-bx .small_description {
font-size: 16px;
margin-bottom: 0px;
color: #666666;
}
.list_area.details_listing .right-cmn-bx .badge_time {
padding-left: 0px;
margin-bottom: 10px;
}
.list_area.details_listing .right-cmn-bx .badge_time li {
padding: 0px;
list-style: none;
font-size: 14px;
font-weight: 500;
margin-bottom: 5px;
}
.list_area.details_listing .right-cmn-bx .badge_time li i {
margin-right: 5px;
}
.list_area.details_listing .right-cmn-bx .badge_time li .left_hd {
min-width: 80px;
margin-left: 0px;
display: inline-block;
}
.common-btn.bdr {
border: 2px solid #b9ac92;
color:#B9AC92;
}
.document_bx .common-btn{
padding: 6px 20px;
}
.document_bx {
margin-top: 35px;
}
.document_bx .heading {
position: relative;
margin-bottom: 20px;
font-size: 20px;
padding-left: 8px;
}
.cust_modal .details_listing .heading {
position: relative;
margin-bottom: 10px;
font-size: 16px;
padding-left: 0px;
font-weight: 500;
}
.list_area.details_listing .right-cmn-bx .small_description {
font-size: 14px;
margin-bottom: 0px;
color: #666666;
}
.cust_modal .modal-header .modal-title {
width: 100%;
text-align: left;
font-size: 20px;
font-weight: 500;
color: #333333;
}
.question_bx {
border-top: 1px solid #e9e9e9;
padding-top: 15px;
margin-top: 20px;
}
.question_bx label{
font-size: 14px;
display: block;
font-weight: 500;
margin-bottom: 5px;
color: #333333;
}
.question_bx p {
font-size: 14px;
display: block;
font-weight: 400;
color: #333333;
display: flex;
margin-bottom: 15px;
}
.question_bx .single_question {
border-bottom: 1px solid #f2f2f2;
margin-bottom: 15px;
}
.question_bx .single_question:last-child{
border-bottom:none;
}
.question_bx .form-group{
margin-bottom:0px;
}
.question_bx p span {
font-weight: 500;
display: inline-block;
margin-right: 10px;
color: #5e1c1c;
}
.cust_modal .details_listing .question_bx .heading {
margin-bottom: 15px;
margin-top: 10px;
}
.cust_modal.proposal_details .modal-header .modal-title {
font-size: 23px;
}
