/* This is the dashboard styling */

.secure-header {
    padding-bottom: 20px;
}
.secure-header.bottom-border {
    border-bottom: solid 3px #B2B2B2;
}
.secure-header td:first-child {
    width: 1%;
}
.secure-header td:last-child {
    width: 150px;
}
.secure-header td {
    vertical-align: bottom !important;
}
.secure-header #logout {
    position: absolute;
    top: 20px;
    margin-right: 80px;
    color: #FFFFFF;
}
.secure-header .h0 {
	font-size: calc(22px + 2.2vw) !important;
    padding-bottom: 40px;
}


.user-photo-icon {
    background: url(../../assets/images/user_icon_placeholder.png) #F5F5F5 no-repeat center center;
    background-size: cover;
    width: 100px;
    height:100px;
    border-radius: 100px;
    -moz-border-radius: 100px;
}

.user-home-icon {
    background: url(../../assets/images/home_icon.png) #F5F5F5 no-repeat center center;
    background-size: cover;
    width: 100px;
    height:100px;
    border-radius: 100px;
    -moz-border-radius: 100px;
}




.dashboard-icons {
	vertical-align: top;
    margin: auto;
    margin-top: 50px;
    text-align: left;
    padding: 0px 50px 0px 50px;
    display: inline-block;
    max-width: 500px;
}

.dashboard-icons > div {
	width: 140px;
    height: 140px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    border: 3px solid #F9CD04;
    background-color: #F9CD04;
    display: inline-block;
    margin-right: 40px;
    margin-bottom: 30px;
    text-align: center;
    align: left;
}

.dashboard-icons > div > div:first-child {
	width: calc(100% - 20px);
    height: 90px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    background-color: #FFF;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Roboto-Black', Arial, sans-serif !important;
    vertical-align: top;
    color: #777;
    padding: 10px;
    white-space: nowrap;
}
.dashboard-icons > div > div:last-child {
	background-color: #F9CD04;
    cursor: pointer;
    color: #FFF;
    font-size: 17px;
    font-family: 'Roboto-Black', Arial, sans-serif !important;
    padding: 5px 5px 5px 23px;
    white-space: nowrap;
    display: inline-block;
}


.dashboard-icons > div.my-items > div:first-child {
	background: url(../../assets/images/my_items_icon.gif) #FFF no-repeat center 45px;
}
.dashboard-icons > div.pay-requests > div:first-child {
	background: url(../../assets/images/get_paid_icon.gif) #FFF no-repeat center 50px;
}
.dashboard-icons > div.my-money > div:first-child {
	background: url(../../assets/images/olycash_logo.gif) #FFF no-repeat center 50px;
}
.dashboard-icons > div.my-orders > div:first-child {
	background: url(../../assets/images/order_icon.gif) #FFF no-repeat center 45px;
}
.dashboard-icons > div.my-settings > div:first-child {
	background: url(../../assets/images/settings_icon.gif) #FFF no-repeat center 45px;
}


.dashboard-icons > div.my-items > div:last-child,
.dashboard-icons > div.pay-requests > div:last-child {
	background: url(../../assets/images/plus_white.gif) #F9CD04 no-repeat left 2px;
}
.dashboard-icons > div.my-money > div:last-child {
	background: url(../../assets/images/withdraw_icon.gif) #F9CD04 no-repeat left 2px;
}
.dashboard-icons > div.my-orders > div:last-child {
	background: url(../../assets/images/search_icon_white.png) #F9CD04 no-repeat left 3px;
}
.dashboard-icons > div.my-settings > div:last-child {
	background: url(../../assets/images/edit_icon_white.png) #F9CD04 no-repeat left 1px;
}



.logout {
    background: url(../../assets/images/logout_icon.gif)  #FFFFFF no-repeat center center;
}

.editable-image {
    min-width: 200px !important;
    /* height: 200px; */
    position: relative;
}
.editable-image.user {
    background: url(../../assets/images/default_user.gif) #F5F5F5 no-repeat center center;
    background-size: cover;
}
.editable-image span {
    color: #FFF;
    font-family: 'Roboto-Black', Arial, sans-serif !important;
    cursor: pointer;
    width: calc(100% - 16px);
    padding: 8px;
    background-color: #000;
    display: block;
    position: absolute;
    bottom: 0;
}
.editable-image.small-screens {
    margin-bottom: 30px;
}


#settings_table .large-screens, 
#add_table .large-screens {
    white-space: nowrap;
}

.half-width {
    width: calc(50% - 30px) !important;
    display: inline-block;
}
td .half-width:not(:last-child) {
    margin-right: 15px;
}


.micro-form.view-mode input[type='text'],
.micro-form.view-mode input[type='password'],
.micro-form.view-mode textarea,
.micro-form.view-mode button,
.micro-form.view-mode .hide-on-view, 
.micro-form.view-mode .editable-image span {
    display:none !important;
}
.micro-form .value {
    font-family: 'Roboto-Black', Arial, sans-serif !important;
}
.micro-form.view-mode .value {
    display: inline-block !important;
}
.micro-form.edit-mode .value:not(.persist) {
    display: none !important;
}



.comment {
    background-color: #F5F5F5;
    border: 1px solid #B2B2B2;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    position: relative;
}

.comment.left-source:after {
    content:  "\0025C0";
    color: #B2B2B2; 
    position: absolute;
    top: 0px;
    left: -13px;
}
.comment.right-source:after {
    content:  "\0025B6";
    color: #B2B2B2; 
    position: absolute;
    top: 0px;
    right: -13px;
}










/* -------------------------------------------------------------------------- */
/* CSS for small screens */
/* -------------------------------------------------------------------------- */
@media only screen and (max-width:650px){

.secure-header .h0 {
    padding-bottom: 10px;
    font-size: calc(13px + 2.2vw) !important;
}
.user-photo-icon, 
.user-home-icon {
    width: 60px;
    height:60px;
    border-radius: 60px;
    -moz-border-radius: 60px;
}
    
.dashboard-icon span {
    height: 50px;
}
.dashboard-icon span:first-child {
    width: 50px;
    border-radius: 50px;
    -moz-border-radius: 50px;
}

.dashboard-icon span:last-child {
    font-size: 21px;
    line-height: 50px;
}

.half-width {
    width: calc(100% - 20px) !important;
    display: block;
}
td .half-width:not(:last-child) {
    margin-right: 0px;
    margin-bottom: 15px;
}
    
}




/* CSS for very small (mobile) screens */
@media only screen and (max-width:500px){
.comment.left-source:after {
    left: -9px;
}
.comment.right-source:after {
    right: -9px;
}

#logout {
	margin-bottom: 90px !important;
}

.dashboard-icons {
    margin-top: 20px;
    padding: 0px 0px 0px 15px;
}

.dashboard-icons > div:nth-child(odd) {
    margin-right: 20px;
    margin-bottom: 20px;
}

.dashboard-icons > div:nth-child(even) {
    margin-right: 0px;
    margin-bottom: 20px;
}

}