@tailwind base;
@tailwind components;
@tailwind utilities;


/* npx tailwindcss -i ./assets/css/style.css -o ./assets/css/output.css --watch */

@font-face {
    font-family: "Yekan";
    src: url("../fonts/Weblogma_Yekan.eot")format("eot"),
        url("../fonts/Weblogma_Yekan.otf") format("otf"),
        url("../fonts/Weblogma_Yekan.ttf")format("ttf"),
        url("../fonts/Weblogma_Yekan.woff")format("woff")
}

body {
    font-family: Yekan;
}

@layer utilities {
    .custom-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .custom-shadow-bold {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }

    .custom-bg {
        background-color: rgba(255, 255, 255, 0.8);
    }
}



@layer components {
    body {
        @apply flex flex-col min-h-screen
    }

    header {
        @apply h-[350px] bg-green-600 rounded-b-3xl p-4 text-white
    }

    header div {
        @apply container flex items-center gap-4
    }

    main {
        @apply transform -translate-y-[200px] flex-1
    }

    .sidebarMenu-item.active {
        @apply bg-green-400 text-white
    }

    .sidebarMenu-item {
        @apply cursor-pointer hover:custom-shadow p-4 rounded flex flex-col items-center text-lg shadow hover:bg-green-400 duration-500 hover:text-white text-gray-text
    }

    /* .profile-content {
        @apply flex flex-col
    }

    .profile-details {
        @apply flex flex-col items-center
    }

    .profile-details-img {
        @apply text-gray-400
    }

    .profile-details-name {
        @apply text-lg italic font-bold text-white border-b cursor-default
    }

    .profile-details-number {
        @apply font-serif text-lg text-gray-text border-b px-2 cursor-default
    }

    .profile-details-img i {
        @apply text-5xl p-3 border rounded-full shadow
    }

    .forms-profile {
        @apply grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4 p-4
    }

    .formProfile-section {
        @apply my-5 flex justify-center w-full rounded shadow shadow-white
    }

    .formProfile-section .btn-formProfile {
        @apply px-4 py-2 rounded bg-red-400 text-white hover:bg-red-600 duration-300 w-full text-lg
    }

    .form-profile {
        @apply flex flex-col gap-4 p-6 rounded w-full bg-white relative
    }

    .inputsProfile-section {
        @apply flex flex-col gap-4 w-full
    }

    .inputProfile-section {
        @apply flex flex-col gap-1 w-full
    }

    .input-profile {
        @apply border w-full rounded border-white p-3 outline-none placeholder:text-sm duration-300 bg-gray-100 focus:border-green-600
    }

    .label-profile {
        @apply text-sm font-bold text-green-600
    }

    .btn-editProfile {
        @apply px-4 py-2 rounded bg-green-600 text-white hover:bg-green-400 duration-300 w-full text-lg
    } */

    /* Login */

    .login-form {
        @apply p-6 rounded-2xl border-2 border-white custom-bg flex flex-col gap-4 w-[300px] custom-shadow hover:custom-shadow-bold relative overflow-hidden hover:border-green-600 duration-300
    }

    .login-form .bg-form {
        @apply absolute top-0 w-full h-0 bg-white right-0 duration-500
    }

    .login-form:hover>.bg-form {
        @apply h-full -z-10
    }

    .login-form .title-login-form {
        @apply text-3xl text-green-400 font-bold pb-2 border-white border-b text-center mb-4 z-10
    }

    .login-form div span {
        @apply absolute bottom-0 left-[55%] w-[0px] right-[45%] h-[1px] bg-blue-400
    }

    .login-form div {
        @apply relative
    }

    .login-form input {
        @apply bg-gray-100
    }

    .login-form div input:not(:placeholder-shown)+label {
        @apply -top-3 duration-500 text-sm
    }

    .login-form div input:focus+label {
        @apply -top-3 duration-500 text-sm
    }

    .login-form div label {
        @apply duration-500
    }

    .login-form div input {
        @apply p-2 rounded outline-none w-full
    }

    .login-form label {
        @apply absolute right-2 top-[10px] text-gray-text
    }

    .login-form div input:focus, .login-form div input:not(:placeholder-shown) {
        @apply -top-2
    }

    .login-form div input:not(:placeholder-shown)~span {
        @apply w-full left-0 right-0 duration-500
    }

    .login-form div a {
        @apply text-blue-600 hover:text-blue-400 duration-300 text-sm
    }



    .login-form div input:focus~span {
        @apply duration-500 right-0 left-0 w-full
    }

    .login-form div input:not(:placeholder-shown)+span {
        @apply duration-500 right-0 left-0 w-full
    }

    .login-form div button {
        @apply p-2 rounded border-2 text-green-600 border-green-600 w-full hover:custom-shadow duration-500 overflow-hidden relative
    }

    .login-form div button span {
        @apply h-full w-0 right-0 duration-200 bg-green-600 custom-shadow -z-10 absolute
    }

    .login-form div button:hover>span {
        @apply w-full right-0 left-0
    }

    /* Register  */

    .register-form {
        @apply p-6 rounded-2xl border-2 border-white custom-bg flex flex-col gap-4 w-[300px] custom-shadow hover:custom-shadow-bold relative overflow-hidden hover:border-green-600 duration-300
    }

    .register-form .bg-form {
        @apply absolute top-0 w-full h-0 bg-white right-0 duration-500
    }

    .register-form:hover>.bg-form {
        @apply h-full -z-10
    }

    .register-form .title-register-form {
        @apply text-3xl text-green-600 font-bold pb-2 border-white border-b mb-4 text-center z-10
    }

    .register-form input {
        @apply bg-gray-100
    }

    .register-form div {
        @apply relative
    }

    .register-form div input:not(:placeholder-shown)+label {
        @apply -top-3 duration-500 text-sm
    }

    .register-form div input:focus+label {
        @apply -top-3 duration-500 text-sm
    }

    .register-form div label {
        @apply duration-500
    }

    .register-form div input {
        @apply p-2 rounded outline-none w-full
    }

    .register-form label {
        @apply absolute right-2 top-[10px] text-gray-text
    }

    .register-form div span {
        @apply duration-500 absolute bottom-0 left-[55%] w-[0px] right-[45%] h-[1px] bg-green-400
    }

    .register-form div input:focus, .register-form div input:not(:placeholder-shown) {
        @apply -top-2
    }

    .register-form div input:not(:placeholder-shown)~span {
        @apply w-full left-0 right-0 duration-500
    }

    .register-form div input:focus~span {
        @apply duration-500 right-0 left-0 w-full
    }

    .register-form div input:not(:placeholder-shown)+span {
        @apply duration-500 right-0 left-0 w-full
    }

    .register-form button {
        @apply p-2 rounded border-2 text-green-600 border-green-600 w-full hover:custom-shadow duration-500 overflow-hidden
    }

    .register-form div button span {
        @apply absolute h-full w-0 right-0 duration-200 bg-green-600 custom-shadow -z-10
    }

    .register-form div button:hover>span {
        @apply w-full right-0 left-0
    }

    /* Withdraw */

    .box-item-withdraw {
        @apply flex flex-col gap-6 px-4 bg-gradient-to-t hover:to-gray-500 hover:from-green-400 to-green-400 from-gray-500 border-2 border-gray-400 text-slate-100 rounded-xl custom-shadow hover:custom-shadow-bold cursor-pointer duration-300 pb-4
    }

    .boxes-withdraw {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 col-span-2 bg-white rounded-xl custom-shadow p-4
    }

    .item-withdraw-title {
        @apply flex justify-center bg-white text-green-600 text-2xl p-1 rounded-b-xl border-t font-bold
    }

    .tt-1 {
        @apply text-2xl font-bold
    }

    .tt-2 {
        @apply text-xl font-bold text-yellow-400
    }

    .tt-3 {
        @apply flex flex-col items-center text-3xl font-bold
    }

    .tt-4 {
        @apply text-2xl font-bold text-yellow-400
    }

    .bw {
        @apply flex justify-start gap-2
    }

    .bw-true {
        @apply text-green-400 bg-white p-2 rounded-full flex justify-center items-center
    }

    .bw-false {
        @apply text-red-400 bg-white p-2 rounded-full flex justify-center items-center
    }

    .bw-btn {
        @apply p-2 flex justify-center gap-2 items-center rounded-lg text-2xl font-bold text-white hover:custom-shadow bg-gradient-to-l from-red-400 to-yellow-500 hover:bg-gradient-to-t hover:from-yellow-500 hover:to-red-400 duration-300
    }

    .prof-user-box {
        @apply flex flex-col items-center gap-1 mb-12
    }

    .prof-user-icon {
        @apply text-4xl rounded-full p-4 text-green-400 bg-white shadow
    }

    .prof-user-price {
        @apply px-3 py-1 rounded-full bg-white text-gray-text
    }

    /* balance */

    .title-balance-box {
        @apply px-6 py-2 rounded custom-shadow w-[250px] text-gray-text flex flex-col items-center
    }

    .price-balance-box {
        @apply text-xl font-bold text-black
    }

    .balance-section {
        @apply flex justify-center px-4 md:px-[50px] lg:px-[160px]
    }

    .form-balance {
        @apply w-full flex flex-col gap-2
    }

    .input-balance-item {
        @apply flex flex-col gap-1
    }

    .dd-1 {
        @apply text-gray-text
    }

    .dd-2 {
        @apply text-red-500 font-bold
    }

    .input-balance {
        @apply p-2 rounded border border-green-400 placeholder-shown:border-gray-200 outline-none focus:border-green-400 placeholder:text-sm
    }

    .ff-1 {
        @apply text-black flex gap-1 font-bold
    }

    .ff-2 {
        @apply text-red-500
    }

    .btn-balance {
        @apply p-2 rounded text-white bg-green-600 hover:bg-green-400 duration-300 font-bold
    }

    .pupper {
        @apply bg-green-400 p-4 rounded text-white fixed custom-shadow top-2 right-2 items-center justify-between gap-2
    }

    /* setting */
    .form-setting {
        @apply w-full grid grid-cols-1 md:grid-cols-2 gap-4
    }

    .inputItem-setting {
        @apply flex flex-col gap-1
    }

    .input-setting {
        @apply p-3 placeholder-shown:bg-white bg-green-50 rounded border border-gray-400 outline-none focus:bg-green-50 custom-shadow placeholder-shown:shadow-none
    }

    .btn-formSetting {
        @apply py-3 px-6 rounded bg-green-600 hover:bg-green-400 duration-300 text-white outline-none hover:custom-shadow
    }

    /* Investments */

    .investment-item {
        @apply flex justify-between gap-4 rounded p-4 custom-shadow hover:bg-gray-200 cursor-default duration-300
    }

    /* Transaction */
    .table-transaction {
        @apply w-full text-center
    }

    .table-transaction tr th {
        @apply p-4 border-b border-t border-gray-300 text-gray-500
    }

    .table-transaction tr {
        @apply border-b hover:custom-shadow rounded duration-300
    }

    .table-transaction tr td {
        @apply p-4 text-gray-text
    }

    .table-transaction tr span.success-transaction {
        @apply text-white bg-green-400 py-1 px-3 rounded
    }

    .table-transaction tr span.fail-transaction {
        @apply text-white bg-red-400 py-1 px-3 rounded
    }

    /* Payment */
    .methodPayment-title {
        @apply mt-12 text-2xl font-bold text-green-600 mb-2
    }

    .methodPayment-section {
        @apply grid grid-cols-1 md:grid-cols-2 gap-4
    }

    .methodPayment-item {
        @apply p-4 rounded custom-shadow flex flex-col justify-between
    }

    .btn-methodPayment-item {
        @apply border-2 border-green-400 p-2 rounded hover:bg-green-400 duration-300 hover:text-white text-xl text-gray-500
    }

    .methodPayment-details {
        @apply flex justify-between items-center mb-3
    }

    /* Investment */
    .investment-card {
        @apply flex flex-col items-center justify-center gap-2 p-2 rounded shadow hover:custom-shadow duration-300 cursor-pointer
    }

    /* Test */

    .btn-test {
        @apply text-gray-600 border border-green-600 hover:bg-green-600 hover:text-white duration-500 rounded px-4 py-2 hover:custom-shadow
    }

    .btn-test.active {
        @apply bg-green-600 text-white
    }

}

/* Exchange */

:root {
    --blue-600: #3099ff;
    --red-600: #f94b64;
    --gray-800: #4e5244;
    --gray-text: #919499;
    --gray-400: #e2e6e7;
    --gray-100: #f3f7fa;
    --white: #fffffd;
    --green-600: #1bc4bd;
    --green-400: #1dd4ce;
}


.parentTag {
    border: 2px solid var(--gray-100);
    box-shadow: 0 0 10px var(--gray-400);
    border-radius: 4px;
}

.form-item {
    gap: 20px;
    align-items: center;
}

.form-item label {
    color: var(--gray-text);
}

.form-item input {
    border: 1px solid var(--gray-100);
    outline: none;
    min-width: 250px;
}

.form-item input::placeholder {
    font-size: 12px;
    color: var(--gray-text);
}

.form-item div {
    position: absolute;
    left: 0;
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: var(--gray-400);
    color: var(--gray-800);
}

.form-item-range {
    position: relative;
}

.form-item-range label {
    color: var(--gray-text);
}

.form-item-range input {
    min-width: 250px;
}

.form-item .icon-search {
    background: transparent;
}

.form-item .input-untils {
    padding-left: 60px !important;
}

.btn-toggle:nth-child(1).active-green {
    background: var(--green-400);
    outline: none;
    border: none;
    border-radius: 4px;
    color: var(--white) !important;
    padding: .375rem .75rem;
    transition: all .3s ease;
    outline: none;
    border: none;
}

.btn-toggle:hover {
    color: white !important;
}

form .btn-toggle:focus {
    box-shadow: 0 0 0 !important;
}

.btn-toggle:nth-child(1):hover {
    background-color: var(--green-400);
}

.btn-toggle:nth-child(2).active-red {
    background: var(--red-600);
    outline: none;
    border: none;
    border-radius: 4px;
    color: var(--white) !important;
    padding: .375rem .75rem;
    transition: all .3s ease;
    outline: none;
    border: none;
}

.btn-toggle:nth-child(2):hover {
    background-color: var(--red-600);
}


form.exchange button {
    background: var(--green-600);
    transition: all .5s ease;
    outline: none;
    border: none;
    border-radius: 4px;
    color: var(--white);
    padding: 4px;
}

form .btn-submit:hover {
    background: var(--green-400);
}

.form-select {
    width: 250px !important;
}

@media screen and (max-width:450px) {
    form label {
        color: var(--gray-text);
        font-size: 14px !important;
    }

    form input {
        min-width: 150px !important;
    }

    form select {
        width: 150px;
    }

}


/* Index */

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    right: 0;
    background-color: var(--white-color);
    display: block;
    /* padding: 15px 30px; */
    z-index: 1000;
    box-shadow: 0 0 2px var(--grey-color-light);
}

.logo_item {
    display: flex;
    align-items: center;
    column-gap: 10px;

}

.logo_item img {
    border-radius: 50%;
}

.search_bar input {
    height: 100%;
    width: 100%;
    border-radius: 25px;
    font-size: 18px;
    outline: none;
    background-color: var(--white-color);
    color: var(--grey-color);
    border: 1px solid var(--grey-color-light);
    padding: 0 20px;
}

.navbar_content {
    display: flex;

    justify-content: left;
}

.navbar_content i {
    cursor: pointer;
    font-size: 18px;
    color: #414145;
    margin-top: 3px;
}

.main-input-rounded {
    background-color: transparent;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #c0c0c7;
}

.main-input-rounded input {
    width: 80%;
    margin: 0 5px;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: black;
}

.main-input-rounded i {
    margin-left: 10px;
    color: #7CD8C9;
    width: 17px;
    float: left;
    margin-top: 2px;
}

.navbar_content a {
    padding: 5px;
    border-radius: 0;
    color: #52A59B;
    margin: 0 5px;

}


.navbar_content a.active {
    border-bottom: 1px solid #7CD8C9;
}


.body-content {
    padding-top: 100px;
}

.custom-file-label {
    height: 35px;
}

.custom-file-label::after {
    background-color: #7CD8C9;
    color: #fff;
}

.form-control {
    font-size: 14px;
}

.form-row label {
    color: #414145;
    font-size: 14px;
}

.top-form {
    background-color: var(--white-color);
    padding-top: 15px;
    padding-bottom: 10px;
    box-shadow: 0 0 2px var(--grey-color-light);
}

.bg-white-box {
    background-color: var(--white-color);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 2px var(--grey-color-light);
}

.datatable-ex th {
    text-align: right !important;
}

.datatable-ex th::after,
.datatable-ex th::before {
    right: unset !important;
    left: 10px !important;
    color: #7CD8C9;
    opacity: 0.4;

}

.datatable-ex.dataTable thead th {
    font-weight: 500 !important;
    color: #414145 !important;
}

.dataTables_filter {
    display: none;
}

.dataTables_length,
.dataTables_info {
    direction: ltr;
    color: #414145 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important;
    background-color: #7CD8C9;
    border: none;
}

.primary-text {
    color: #52A59B;
    ;
}

.second-text {
    color: #414145;
    font-size: 14px;
}

.boxs-head h3 {
    font-size: 18px;
    color: #414145;
}

.boxs-head p {
    font-size: 14px;
    color: gray;
}

.succes-text p:first-child {
    font-size: 25px;
    color: green;
}

.succes-text p:last-child {
    font-size: 14px;
    color: green;
}

.danger-text p:first-child {
    font-size: 25px;
    color: rgb(223, 70, 70);
}

.danger-text p:last-child {
    color: rgb(223, 70, 70);
}

@media (max-width : 992px) {
    .body-content {
        padding-top: 230px;
    }
}

.datatable-area {
    overflow-x: scroll;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;

}

.dataTables_wrapper .dataTables_info {
    float: left;
    padding-top: 20px;
}