@charset "utf-8";
/*
 * Copyright (c) 2018. Alendo Solutions KLG, 5444 Künten, http://www.alendo.ch
 */
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('http://fonts.googleapis.com/css?family=Roboto');

/* reset-min */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend
,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}

/* fonts-min */
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

/* Style.css */
/* body */
body {width:100%;height: 100vh}
#layout {width: 100%;min-height: 100vh;position: relative;height: auto;
    background: -webkit-linear-gradient(left, #E6E6E6, #00c6ff)}
#admin-container {display: flex}
#container {}

/* Not Found */
#id-404 {width: 30%;position: relative;left: 35%;top: 50px;text-align: center;height: 200px}
#id-404 span {font-size: 25px;font-weight: 800;color: #444;}
#id-404 p {font-size: 15px;color: #333;text-align: center;position: relative;margin: 20px 0;}
#id-404 p a {text-decoration: none;color: #333;font-weight: 700}

/* Genral Stuff */
#login-alert {position: fixed;bottom: 85px;width: 100%;}

/* Overlay */
.overlay {position: fixed;display: none;width: 100%;height: 100%;overflow: scroll;
    top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.59);z-index: 999;cursor: pointer;
    /*visibility: hidden;opacity: 0;transition: visibility 0s linear 0.33s, opacity 0.33s linear*/ }

.edit-overlay #head {position: relative;border-bottom: solid 1px #ccc;padding: 15px 0;margin-bottom: 20px}
.edit-overlay #head span {font-size: 18px;font-weight: 600;text-align: center;color: #616161;
    margin-left: 5%}
.edit-overlay .login-div {width: 45%; padding-top: 25px}

.tab {float: left;border: 1px solid #ccc;background-color: #f1f1f1;width: 30%;overflow: hidden;min-height: 300px}
.tab button {display: block;background-color: inherit;color: black;padding: 13px 13px;width: 100%;border: none;outline: none;text-align: left;cursor: pointer;transition: 0.3s;}
.tab button:hover {background-color: #ddd;}
.tab button.active {background-color: #ccc;}
.tabcontent {float: left;padding: 0px 12px;border: 1px solid #ccc;border-left: none;}
.tabcontent form {display: flex;padding: 10px 2%;}
.tabcontent form label {width: 15%;}
.tabcontent form input {display: block;width: 75%;padding: .375rem .75rem;font-size: 1rem;line-height: 1.5;
    color: #495057;background-color: #fff;border: 1px solid #ced4da;
    border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

/* messages overlay */
#message .message-body {width: 32%;background: #fff;border-radius: 10px;overflow: hidden;padding: 30px 40px;
    margin: auto;position: relative;margin-top: 100px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);}
#message .message-body #message-text {padding-right: 20px;}
#message .message-body #message-text span {display: block;padding: 2px 0}

.margin-top50 {margin-top: 50px !important;}

/* Switch Buttons */
.switch {width: 100%;position: relative;}
.switch-field {font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;padding: 20px 0;overflow: hidden;display: inline-flex;}
.switch-field input {position: absolute !important;clip: rect(0, 0, 0, 0);height: 1px;width: 1px;
    border: 0;overflow: hidden;}
.switch-field label {float: left;}
.switch-field label {display: inline-block;width: 60px;background-color: #e4e4e4;color: rgba(0, 0, 0, 0.6);
    font-size: 14px;font-weight: normal;text-align: center;text-shadow: none;padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition:    all 0.1s ease-in-out;
    -ms-transition:     all 0.1s ease-in-out;
    -o-transition:      all 0.1s ease-in-out;
    transition:         all 0.1s ease-in-out;}
.switch-field label:hover {cursor: pointer;}
.switch-field input:checked + label {border: solid 2px #63889B;color: #63889B;font-weight: bold;padding: 5px 14px;}
.switch-field label:first-of-type {border-radius: 4px 0 0 4px;}
.switch-field label:last-of-type {border-radius: 0 4px 4px 0;}


/* login/register */
.login-div {width: 32%;background: #fff;border-radius: 10px;overflow: hidden;padding: 40px 55px 33px 55px;
    margin: auto;position: relative;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);}
.login-div .title {display: block;font-size: 30px;color: #333333;line-height: 1.2;text-align: center;}
.login-div form {width: 100%;margin: 35px 0;}
.login-div form .input,
.login-div form .gender-div {width: 100%;position: relative;border-bottom: 2px solid #adadad;margin-bottom: 37px;}
.login-div form .input input {font-family: Poppins-Regular, sans-serif;font-size: 15px;color: #555555;line-height: 1.2;
    display: block;width: 100%;height: 45px;background: transparent;padding: 0 5px;border: none}
.login-div form .input input:focus {outline: none}
.login-div form .input textarea {width: 100%;padding: 8px;color: rgb(73, 80, 87);border: 1px solid rgb(206, 212, 218);
    border-radius: 4px;z-index: auto;position: relative;line-height: 24px;font-size: 16px;resize: none;
    border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0}
.login-div form .gender label {font-family: Poppins-Regular, sans-serif;font-size: 16px;color: #555555}
.login-div form .status select {font-family: Poppins-Regular, sans-serif;font-size: 16px;color: #555555;
    padding: 8px 0;width: 100%; background: transparent;
    margin-bottom: 37px; border: 0; border-bottom: 2px solid #adadad;}
.login-div form .input:focus-within {border-bottom: solid 2px #a209e2}
.login-div form .input:focus {border-bottom: solid 2px #a209e2}
.login-div form .status select:focus-within {border-bottom: solid 2px #a209e2}
.login-div form .status select:focus {outline: none}

.login-div form .submit {display: -webkit-box;display: -webkit-flex;display: -moz-box;
    display: -ms-flexbox;display: flex;flex-wrap: wrap;justify-content: center;padding-top: 13px;}
.login-div form .submit .container {width: 50%;display: block;position: relative;z-index: 1;
    border-radius: 25px;overflow: hidden;margin: 0 auto;}

.login-div form .submit .container div {position: absolute;z-index: -1;width: 300%;height: 100%;background: #a64bf4;
    background: -webkit-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);background: -o-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
    background: -moz-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);background: linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
    top: 0;left: -100%;
    -webkit-transition: all 0.4s;-o-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s;}
.login-div form .submit .container button {font-family: Poppins-Medium;font-size: 15px;color: #fff;
    line-height: 1.2;text-transform: uppercase;left: 33%;position: relative;
    display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;
    justify-content: center;align-items: center;padding: 0 20px;height: 50px;background: none;border: none}

.login-div form .submit .container div:hover {left: 0;}
.login-div .footer {padding-top: 40px}
.login-div .register-footer {padding-top: 0}
.login-div .footer span {font-family: Poppins-Regular;font-size: 13px;color: #666666;line-height: 1.5;}
.login-div .footer span .register {font-family: Poppins-Regular;font-size: 13px;color: #333333;line-height: 1.5;}
.login-div #forgot-password {position: absolute;margin-top: 50px;}
.add_user-div {width: 85% !important;padding-top: 0px !important;margin: 0 !important;}


/* admin portal */
/* Left Panel*/
#panel {width: 20%;height: 100%; position: fixed}
#leftPanel {width: 100%;height: 100%;position: relative;background: linear-gradient(to right, #222d32 , #3b454a);
    z-index: 1;float: left;min-height: 100vh;transition: width 0.3s ease;}
#leftPanel #userSection {text-align: left;padding: 0 15px;}
#leftPanel #userSection span {font-size: 16px; color: #FFF; font-weight: bold; margin: 50px;}
#leftPanel #userSection img {height: 60px;display: inline-block;border-radius:  50px;border: 2px solid #fff;}
#leftPanel #sep {padding: 10px 0 10px 20px;background-color: rgba(255, 255, 255, 0.1);margin: 0 0 25px;}
#leftPanel #sep span {font-size: 13px;font-family: 'Poppins', sans-serif;font-weight: 500;color:  #fff;}

#leftPanel #siteManager ul {list-style: none;}
#leftPanel #siteManager ul li {padding: 8px;}
#leftPanel #siteManager ul li a {text-decoration: none; color: #FFF;font-size: 14px;}
#leftPanel #siteManager ul li:hover{background-color: rgba(255, 255, 255, 0.1);border-right: solid 4px #1ABB9C;}
#leftPanel #siteManager i {color: #FFF; padding: 7px 10px;line-height: 6px}
#leftPanel #siteManager hr {width: 70%;margin: 0 8%;border-width: 0.5px;}
#leftPanel #siteManager .section-title {border-bottom: 1px solid #4e4e52;color: #9496a1;clear: both;
    display: block;font-family: 'Open Sans';font-size: 12px;font-weight: 700;line-height: 30px;
    text-transform: uppercase;margin: 0 8%;width: 90%}
#leftPanel #userSection h6 {color: #fff;font-family: 'Poppins', sans-serif;display:  inline-block;
    vertical-align:  top;margin: 16px 0 0;}
#leftPanel #userSection h6 strong {font-weight:  600;font-size: 16px;}
#leftPanel #sep i {font-size: 17px;margin-right: 7px;color: #1ABB9C;}

#right-panel {width: 80%;position: relative;display: inline-block;background: #FFFFFF;left: 20%}
#static-page {width: 80%;}

#dashboard {position: relative;width: 80%;}
#dashboard .item {background: linear-gradient(to bottom right, #20a8d8, #20a8d8b0);width: 22%;border-radius: 6px;
    margin: 10px 1.3%;display: inline-block;vertical-align: top;position: relative;font-family: 'Montserrat', sans-serif;
    box-shadow: 0 0 16px #00000045;}
#dashboard .item .head {display: flex;vertical-align: top;overflow: hidden;
    border-top-left-radius: 6px; border-top-right-radius: 6px;
    background-color: #337ab7;border-color: #337ab7;padding: 20px 15px;border-bottom: 1px solid transparent;}

#dashboard .item a {text-decoration: none}
#dashboard .item .footer {padding: 10px 15px;background-color: #f5f5f5;border-top: 1px solid #ddd;
    border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;display: flex;}
#dashboard .item .footer a {color: #FFF;font-size: 20px;padding: 5px 0;text-decoration: none;}
#dashboard .item .head span {color: #FFF;font-size: 32px;font-weight: 800;position: absolute;right: 5%;}
#dashboard .item .break {border-bottom: 1px dotted #fff;left: 0;right: 110px;
    top: 0;z-index:  -1;}
#dashboard .item .head i {color: #fff;font-size: 45px;}
#dashboard .item .footer i {position: absolute;right: 0;margin: 4px 7%;}
.dropdown-btn {cursor: pointer;color: #c7c7c7;font-family: 'Poppins', sans-serif;font-size: 14px;font-weight: 500;
    margin-left: 8%;padding: 15px 0 10px 0;display: flex;}
.dropdown-btn:hover {color: #FFFFFF;}
.dropdown-container {display: none;margin: 0 0 0 10%}

#manageUsers {width: 96%;padding: 30px 30px;min-height: 30vh;box-shadow: 0 0 16px #00000026;border-radius: 3px;
    left: 2%;position: relative;margin-top: 50px;background: #f1f2f7}
#manageUsers #header {padding: 0 0 0 10px;margin-bottom: 40px;font-weight: 700;font-size: 26px;color: #444;
    font-family: 'Montserrat', sans-serif;display: inline-block;text-transform:  uppercase;position: relative;
    border-left: 3px solid #244d79;}

.modal-width-50 {width: 50% !important;}

#manageUsers .container-table {width: 100%;align-items: center;justify-content: center;flex-wrap: wrap;}
/*#manageUsers .container-table table {border-collapse: collapse;background: #FFFFFF;width: 100%;position: relative;table-layout: fixed}*/
#manageUsers .container-table table .tr td, .tr table th {padding-left: 8px;}
#manageUsers .container-table table .tr td {overflow: hidden;}
#manageUsers .container-table table thead .tr {height: 60px;background: #36304a;}
#manageUsers .container-table table thead .tr th:first-child {border-top-left-radius: 10px}
#manageUsers .container-table table thead .tr th:last-child {border-top-right-radius: 10px}
#manageUsers .container-table table tbody .tr {height: 50px;}
#manageUsers .container-table table tbody .tr:last-child {border: 0;}
#manageUsers .container-table .table-head th {font-size: 18px;color: #fff;line-height: 1.2;font-weight: unset;}
#manageUsers .container-table tbody .tr:nth-child(even) {background-color: #f5f5f5;}
#manageUsers .container-table tbody .tr {font-size: 15px;color: #808080;line-height: 1.2;font-weight: unset;}
#manageUsers .container-table tbody .tr:hover {color: #555555;background-color: #f5f5f5;cursor: pointer;}
#manageUsers .container-table .column1 {width: 50px;}
#manageUsers .container-table .column2 {width: 100px;}
#manageUsers .container-table .column3 {width: 150px;}
#manageUsers .container-table .column4 {width: 120px;}
#manageUsers .container-table .link {color: #007bff;text-decoration: none;background-color: transparent;}
#manageUsers .container-table .link:hover {color: #0056b3;text-decoration: underline;}
.login-div #close {font-size: 30px;position: absolute;top: 10px;right: 10px;color: #6f6f6f;}
.login-div #close:hover {font-size: 31px}
.delete-user {margin-top: 50px}
.delete-user .notice {color: #444;}

/* Admin - Manage bids, Manage Comments*/
#manageUsers #post-info {width: 100% !important; margin: 0 0 15px 0 !important;padding: 15px 30px 0 30px !important;}
#manageUsers #post-info #user-bids ul, #manageUsers #post-info #user-comments ul {list-style-type: none}
#manageUsers #post-info #user-bids ul li, #manageUsers #post-info #user-comments ul li
    {border-bottom: 1px solid #ddd;padding: 15px 0 20px 44px;position: relative;display: flex}
#manageUsers #post-info #user-comments ul li {display: block !important;padding-bottom: 8px}
#manageUsers #post-info #user-bids ul li:last-child {border-bottom: none}
#manageUsers #post-info #user-comments ul li:last-child {border-bottom: none}
#manageUsers #post-info #user-bids ul li .left img, #manageUsers #post-info #user-comments ul li .left img
    {width: 40px;height: 40px;margin-right: 15px;overflow: hidden;float: left;border-radius: 50%;}
#manageUsers #post-info #user-comments ul li .left img {width: 35px !important; height: 35px !important;}
#manageUsers #post-info #user-bids ul li .time-date {color: #999;font-size: 12px;display: block;font-weight: 600}
#manageUsers #post-info #user-comments ul li time {color: #b2b2b2;padding-left: 8px;font-weight: 700;font-size: 14px}
#manageUsers #post-info #user-bids ul li .right {margin-left: 12%;display: inline-grid;}
#manageUsers #post-info #user-bids ul li .right span {font-weight: 600;color: #555555}
#manageUsers #post-info #user-comments ul li .comment {width: 65%;position: relative;margin-left: 6%;
    font-size: 14px;line-height: 22px;padding: 8px 0;word-break: break-word;color: #555;}
#manageUsers #post-info #user-comments ul li .reply {border-top: solid 1px #ccc;padding: 15px 0 2px 0;margin-left: 6%;width: 90%;}

#manageUsers #post-info #user-bids ul li .buttons {display: inline-flex;margin: 0 50px;position: absolute; right: 0}
#manageUsers #post-info #user-comments ul li .buttons {display: inline-flex;margin: 15px 50px;position: absolute;right: 0;top: 0;}
#manageUsers #post-info #user-bids ul li .buttons .switch-field, #manageUsers #post-info #user-comments ul li .buttons .switch-field
    {margin: -17px 15px}
#manageUsers #post-info #user-comments ul li .buttons-reply {display: inline-flex;float: right;margin-top: -75px}
#manageUsers #post-info #user-comments ul li .buttons-reply .switch-field {margin: -17px 15px}


.elements {display: block;}
.elements .element {width: 100%;height: 50px;position: relative;display: flex;word-wrap: break-word;
    border: 1px solid rgba(0,0,0,.125);border-radius: 4px;
    padding: 5px 10px;background-color: rgba(0,0,0,.03);margin-bottom: 20px}
.elements .element:hover {box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);border-color: rgba(0,0,0,.25);}
.elements .element .left {color: #878787;font-weight: 700;margin: 7px 10px}
.elements .element .left span:hover {color: #3a3a3a;cursor: pointer}
.elements .element .right {position: absolute;right: 1%;}