@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    background-color: #f0f2f5;
    color: #1e2022;
    height: 100vh;
    width: 100vw;
}

/* winbox start */
.winbox {
    /* background: linear-gradient(45deg,rgba(20, 60, 20, 0.8),rgba(40, 120, 160, 0.8)) !important; */
    -webkit-backdrop-filter:  saturate(140%) blur(40px);
    backdrop-filter: saturate(140%) blur(40px);
    border-radius: 4px !important;
}

.winbox-dark {
    background: rgba(43, 43, 43, 0.568) !important;
}

.winbox-light {
    background: rgba(212, 212, 212, 0.568) !important;
}

.wb-title {
    color: #131820 !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-transform: capitalize !important;
    /* text-shadow: 2px 1px 4px black; */
}

.wb-icon {
    height: 25px !important;
    width: 25px !important;
    margin-top: 4px !important;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    background-size: 20px !important;
}

.wb-body {
    color: #131820 !important;
    background: transparent !important;
    box-shadow: none;
    border-radius: 0px 0px 4px 4px;
}

.wb-body::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.wb-body::-webkit-scrollbar-track {
    background: transparent !important;
}

.wb-body::-webkit-scrollbar-thumb {
    border-radius: 4px !important;
    background: #2630409f !important;
}

.wb-body::-webkit-scrollbar-thumb:window-inactive {
    background: #181f2a3f !important;
}

.wb-body::-webkit-scrollbar-corner {
    background: transparent !important;
}

.wb-control * {
    width: 25px !important;
    height: 25px !important;
    cursor: auto !important;
    margin-top: 4px;
    margin-right: 4px;
    border-radius: 4px;
    background-position: center !important;
    background-size: 17px auto !important;
}

.wb-min:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.wb-max:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.wb-full:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.wb-close:hover {
    background-color: rgba(211, 47, 47, 1) !important;
}

@media (hover: hover) {
    .winbox.min:not(:hover) {
        background: rgba(120, 120, 120, 0.2) !important;
    }

    .winbox:not(.min,.focus) {
        background: rgba(120, 120, 120, 0.2) !important;;
    }
}
/* winbox end */

/* react mouse select start*/
.mouse-select-desktop-item__frame {
    background: rgba(25, 118, 210, 0.2);
    opacity: 0.5;
    border: 0.1px solid #fff;
    border-radius: 2px;
}
/* react mouse select end */

.container {
    max-width: 780px;
    margin-top: 5rem;
    margin-left: auto;
    margin-right: auto;
}

.titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titlebar_item, h1, button {
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn {
    border: 1px solid #6A727A;
    padding: 9px 15px;
    border-radius: 4px;
    background: #FFF;
    color: #000;
    cursor: pointer;
}

.btn:hover {
    background: #F1F1F1;
    color: #6A727A;
}

.list_header {
    display: grid;
    gap: 10px;
    grid-template-columns: 50px 1fr 120px 120px 120px;
    color: #6A727A;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #E0E0E0;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 1.2rem;
    margin-top: 20px;
    background-color: #FFF;
}

.list_items {
    padding: 10px 30px !important;
    gap: 10px;
    display: grid;
    grid-template-columns: 50px 1fr 120px 120px 120px;
    align-items: center;
    border-bottom: 1px solid #E0E0E0;
    color: #6A727A;
    background-color: #F1F1F1;
}

.btn-icon {
    border: 1px solid #E0E0E0;
    background: none;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    color: #6A727A;
    cursor: pointer;
}

.success:hover {
    background: rgb(47, 214, 111);
    color: #FFF;
}

.danger:hover {
    background: rgb(214, 47, 47);
    color: #FFF;
}

.card_wrapper {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 290px);
    gap: 20px;
    color: #6A727A;
    margin-top: 20px;
}

.card {
    padding-left: 20px;
    padding-right: 20px;
    background: #FFF;
}

.card p {
    margin-top: 10px;
    margin-bottom: 10px;
}

.card input {
    padding: 9px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    width: 100%;
}

.card textarea {
    padding: 9px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    width: 100%;
    font-size: 1.1rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.media {
    margin-top: 20px;
}

.images_list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.image_item {
    position: relative;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
}

.image_item_img {
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 117px;
}

.image_item_form {
    border: 2px dashed #6A727A;
    position: relative;
    cursor: pointer;
}

.image_item_form_label {
    padding: 9px 15px;
    border-radius: 4px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image_item_form_input {
    height: 100px;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.hr {
    margin-top: 30px;
    margin-bottom: 30px;
    height: 1px;
    background-color: #000;
}

.br {
    margin-top: 40px;
}