/*----- Other Default Styles  -----*/
::-webkit-input-placeholder,  /* Edge */
:-ms-input-placeholder,       /* Internet Explorer 10-11 */
::placeholder {
  color:$color-65;
}
/*--- Scrollbar  ---*/
 /* Scrollbar width */
 ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 100px;
}

/* Scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
body {
    margin: 0;
    padding: 0;
    padding-top: 100px;
}
body * {
    box-sizing: border-box;
    font-size: 16px;
    font-family: sans-serif;
}
.logo{
    height:80px;
}
input {
    height: 45px;
    border-radius: 50px;
    background-color: #f1f1f1;
    border: 0;
    color: #222;
    padding: 0 20px;
}
section {
    max-width: 800px;
    margin: auto;
    display: grid;
}
.list,
.list-column {
    display: grid;
    grid-gap: 8px;
}
.list-column {
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
}
/* padding */
.p-lg {
    padding: 64px;
}
.p-md {
    padding: 32px;
}
.p-sm {
    padding: 20px;
}
.p-xsm {
    padding: 14px;
}
.p-xxsm {
    padding: 8px;
}
/* spacing */
.lg {
    grid-gap: 64px;
}
.md {
    grid-gap: 32px;
}
.sm {
    grid-gap: 20px;
}
.xsm {
    grid-gap: 14px;
}
.xxsm {
    grid-gap: 8px;
}
/* btn list */
.btnList {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.btnList > * {
    color: #222;
    text-decoration: none;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
}
.btnList > *:hover {
    background-color: #f1f1f1;
}
.btnList img {
    height: 30px;
    width: 30px;
    object-fit: contain;
    object-position: center;
}
.btn{
    text-decoration: none;
    color:#fff;
    padding: 0 14px;
    background-color:#222;
    border:0;
    transition: 0.2s;
    height:35px;
    border-radius:8px;
    display:grid;
    align-items:center;
    grid-auto-flow: column;
    grid-gap:8px;
    cursor: pointer;
    font-family: sans-serif;
    font-size:16px;
    font-weight: bold;
}
.btn:hover{
    background-color:#2facee;
}
select{
    padding: 0 8px;
    display:grid;
    border-radius:8px;
    background-color:#fff;
    border:0;
}
@media (max-width: 800px) {
    .btnList {
        grid-template-columns: 1fr;
    }
}