@charset "UTF-8"; /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio, input, button):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; display: block; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .custom-radio + label { display: inline-block; cursor: pointer; position: absolute; right: 6px; top: 6px; } .custom-radio + label:before { content: ""; display: block; width: 14px; height: 14px; border: 2px solid #676879; background-color: #fff; border-radius: 2px; } .custom-radio { display: none !important; } .custom-radio:checked + label:after { content: "✔"; font-size: 11px; color: #1371FE; display: block; position: absolute; top: 0; left: 3px; width: 14px; height: 14px; border-radius: 2px; } .custom-radio:checked + label::before { border-color: #1371FE; } .relative { position: relative; } .dropdown { position: relative; } .drop-down { position: absolute; min-width: 100%; background: #FFFFFF; border: 1px solid #E4E4E4; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.0784313725); max-height: 264px; top: 60px; left: 0px; right: 0px; overflow: hidden; overflow-y: auto; border-radius: 0px 0px 8px 8px; display: none; transition: all 2s; z-index: 2; } .drop-down-btn { border: 1px solid #ccc; padding: 2px 22px 2px 12px; background-color: #fff; cursor: pointer; position: relative; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; user-select: none; display: flex; align-items: center; justify-content: space-between; font-size: 14px; height: 36px; } .drop-down-btn svg { width: 15px; height: 15px; } .drop-down-btn::before { content: ""; position: absolute; right: 10px; border: solid #676879; border-width: 0 1.5px 1.5px 0; display: inline-block; padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .drop-down-btn + .drop-down { font-size: 14px; z-index: 3; top: 34px; } .drop-down.open { display: block; } .drop-down-list-item { padding: 12px; cursor: pointer; } .drop-down-list-item:hover { background: #EDF8FF; } .blur-contain { filter: blur(1px); } .spinner { /* Spinner size and color */ width: 19px; height: 19px; border-top-color: #FA892D; border-left-color: #FA892D; /* Additional spinner styles */ animation: spinner 1s linear infinite; border-bottom-color: #f4f4f4; border-right-color: #FA892D; border-style: solid; border-width: 3px; border-radius: 50%; box-sizing: border-box; display: inline-block; vertical-align: middle; } /* Animation styles */ @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* figtree-regular - latin-ext */ @font-face { font-display: swap; font-family: "Figtree"; font-weight: 400; src: url("../assets/fonts/Figtree-regular.woff2") format("woff2"); } /* figtree-500 - latin-ext */ @font-face { font-display: swap; font-family: "Figtree"; font-weight: 500; src: url("../assets/fonts/Figtree-medium.woff2") format("woff2"); } /* figtree-600 - latin-ext */ @font-face { font-display: swap; font-family: "Figtree"; font-weight: 600; src: url("../assets/fonts/Figtree-bold.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Figtree"; font-weight: 700; src: url("../assets/fonts/Figtree-xtrabold.woff2") format("woff2"); } body { font: 400 16px/1.4 "Figtree", Arial, Sans-Serif; color: #676879; } label { font: 400 16px/1.4 "Figtree", Arial, Sans-Serif; color: #676879; } input { font: 400 16px/1.4 "Figtree", Arial, Sans-Serif; color: #676879; } h1 { font: 700 32px/1.2 "Figtree", Arial, Sans-Serif; color: #161A30; } h2 { font: 600 32px/2.37 "Figtree", Arial, Sans-Serif; } h3 { font: 600 12px/1.31 "Figtree", Arial, Sans-Serif; } .submit-button { background-color: #1371FE; border-radius: 4px; padding: 15px 0; text-align: center; color: #FFFFFF; font-size: 16px; border: none; cursor: pointer; } .save-button { background-color: #1371FE; border-radius: 4px; padding: 9px 0; text-align: center; color: #FFFFFF; font-size: 16px; border: none; cursor: pointer; } .cancel-button { border-radius: 4px; padding: 9px 0; text-align: center; color: #161A30; font-size: 16px; border: 1px solid #E7ECF4; cursor: pointer; } .input-button { border: 1px solid rgba(103, 104, 121, 0.2); border-radius: 4px; color: #161A30; font-size: 16px; font-family: "Figtree"; } .custom-upload-button { display: inline-block; padding: 10px 24px; color: white; background-color: #1371FE; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; border: 0; } .circle { height: 16px; width: 16px; border-radius: 50px; background-color: #3C9E62; } .error { color: #ED565B; font-size: 12px; } .text-center { text-align: center; } .form-label { font-size: 14px; color: #161A30; margin-bottom: 8px; } .form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #E6E9EF; border-radius: 4px; width: 100%; font-size: 14px; padding: 2px 12px; line-height: 32px; height: 36px; } .login { padding: 12px; background-color: #161A30; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } .login .container { max-width: 528px; width: 100%; background-color: #FFFFFF; padding: 24px; text-align: center; border-radius: 8px; } .login .container .text { font-size: 24px; color: #676879; margin-bottom: 10px; } .login .container .title { color: #161A30; margin-bottom: 32px; } .login form { display: flex; justify-content: start; flex-direction: column; gap: 32px; text-align: start; } .login form svg { height: 20px; width: 20px; cursor: pointer; } .login form .crosseye { display: none; } .login form .form-group { display: flex; align-items: start; flex-direction: column; } .login form .form-group .form-field { width: 100%; display: flex; justify-content: start; align-items: center; padding-left: 16px; padding-right: 20px; } .login form .form-group input { padding: 12px 14px 12px 8px; border: none; outline: none; width: 100%; } .login form .form-group .email + input { margin-right: -20px; border-radius: 0 4px 4px 0; } .login form .check { cursor: pointer; font-size: 14px; } .dashboard { height: 100vh; width: 100%; background-color: #161A30; display: flex; padding: 10px 0; position: relative; } .dashboard .content { background-color: #FFFFFF; border-top-left-radius: 6px; border-bottom-left-radius: 6px; width: calc(100% - 61px); height: 100%; padding: 24px; background-color: #F6F7FA; } .dashboard .content header { padding-bottom: 24px; border-bottom: 1px solid #E7ECF4; display: flex; } .dashboard .content header .leftarrow { height: 20px; width: 20px; cursor: pointer; } .dashboard .content .title { color: #161A30; font-weight: 600; text-align: center; width: 100%; } .dashboard .content .sub-title { color: #161A30; font-weight: 600; font-size: 16px; margin-top: 24px; line-height: 16px; margin-bottom: 16px; } .dashboard .content .upload { margin-top: 24px; background-color: #EDF8FF; border: 1px dashed #89CEFF; border-radius: 4px; padding: 16px; text-align: center; } .dashboard .content .upload .upload-text p:first-child { font-size: 14px; font-weight: 600; } .dashboard .content .upload .upload-text p:first-child a { color: #1371FE; } .dashboard .content .upload .upload-text p:last-child { font-size: 12px; font-style: italic; margin-bottom: 16px; } .dashboard .content .upload #fileInput { display: none; } .dashboard .content .upload .upload-button { margin-top: 16px; } .dashboard .content .table-wrap { overflow-x: auto; border-radius: 4px; } .dashboard .content .table-wrap .tables { border: 1px solid #E7ECF4; background-color: #FFFFFF; min-width: 1080px; width: 100%; border-radius: inherit; position: relative; } .dashboard .content .table-wrap .tables table.tables > thead > tr { display: table; table-layout: fixed; width: 100%; } .dashboard .content .table-wrap .tables .table-header { width: 100%; display: grid; align-items: space-between; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 150px; border-bottom: 1px solid #E7ECF4; background: #E7ECF4; } .dashboard .content .table-wrap .tables .table-header th { padding: 8px 8px 8px 16px; } .dashboard .content .table-wrap .tables .table-header th:last-child { width: 150px; } .dashboard .content .table-wrap .tables .table-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #676879; } .dashboard .content .table-wrap .tables .table-title span { display: flex; align-items: center; gap: 10px; cursor: pointer; } .dashboard .content .table-wrap .tables .table-title span.disble-text { color: rgba(103, 104, 121, 0.2); } .dashboard .content .table-wrap .tables .table-icon { height: 23px; width: 23px; } .dashboard .content .table-wrap .tables tbody { display: block; max-height: calc(100vh - 329px); overflow-y: auto; overflow-x: hidden; } .dashboard .content .table-wrap .tables tbody tr { display: grid; align-items: center; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 150px; border-bottom: 1px solid #E7ECF4; table-layout: fixed; width: 100%; } .dashboard .content .table-wrap .tables tbody tr .chip-orange, .dashboard .content .table-wrap .tables tbody tr .chip-red, .dashboard .content .table-wrap .tables tbody tr .chip-green { background-color: rgba(250, 137, 45, 0.1607843137); color: #FA892D; min-width: 85px; border-radius: 4px; padding: 5px 8px; display: inline-block; text-align: center; white-space: nowrap; } .dashboard .content .table-wrap .tables tbody tr .chip-red { color: #ED565B; background-color: rgba(237, 86, 91, 0.1607843137); } .dashboard .content .table-wrap .tables tbody tr .chip-green { color: #3C9E62; background-color: rgba(60, 158, 98, 0.1607843137); } .dashboard .content .table-wrap .tables tbody tr .status-info { display: flex; align-items: center; gap: 4px; color: #757575; font-size: 12px; } .dashboard .content .table-wrap .tables tbody tr .status-detail { display: flex; align-items: center; gap: 16px; } .dashboard .content .table-wrap .tables tbody tr .reloader { width: 20px; height: 18px; cursor: pointer; } .dashboard .content .table-wrap .tables tbody tr td { padding: 10px 8px 10px 16px; font-size: 14px; font-weight: 400; color: #161A30; } .dashboard .content .table-wrap .tables tbody tr td:last-child { width: 150px; } .sidebar { width: 61px; display: flex; justify-content: space-between; align-items: center; flex-direction: column; padding: 15px 12px; } .sidebar img { cursor: pointer; width: 35px; } .sidebar .logout { position: relative; } .sidebar .logout svg.logout-icon { height: 16px; width: 16px; cursor: pointer; } .sidebar .logout .tooltip { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2); background: #FFFFFF; border-radius: 4px; color: #161A30; font-size: 14px; padding: 2px 8px; position: absolute; z-index: 2; left: 22px; top: -3px; opacity: 0; transition: opacity 0.3s ease; } .sidebar .logout-icon:hover + .tooltip { opacity: 1; } .main-content { margin-top: 16px; display: grid; grid-template-columns: 265px 1fr 140px; gap: 32px; } .main-content .aside-accordian { height: calc(100vh - 118px); display: flex; justify-content: space-between; flex-direction: column; gap: 10px; } .main-content .aside-accordian.image-expand .accordian { height: calc(100% - 332px); } .main-content .aside-accordian .accordian { border-radius: 4px; background-color: #FFFFFF; flex: 1; height: calc(100% - 62px); } .main-content .aside-accordian .accordian input { cursor: pointer; margin: 0; } .main-content .aside-accordian .accordian .download-btn { background: #1371FE; cursor: pointer; color: #FFFFFF; position: relative; padding: 6px 9px; display: flex; align-items: center; gap: 9px; border-radius: 3px; } .main-content .aside-accordian .accordian .download-btn svg { width: 12px; height: 12px; } .main-content .aside-accordian .accordian .download-btn svg.uparrow { border-left: 1px solid; padding-left: 6px; width: 20px; } .main-content .aside-accordian .accordian .download-btn .dropdown-container { background: #fff; border: 1px solid #CBDAE1; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1019607843); border-radius: 8px; padding: 8px; position: absolute; top: 35px; right: 0; display: none; min-width: 40px; width: 190px; z-index: 2; } .main-content .aside-accordian .accordian .download-btn .dropdown-container ul li { font-size: 14px; color: #676879; border-bottom: 1px solid #E7ECF4; padding: 8px; cursor: pointer; } .main-content .aside-accordian .accordian .download-btn .dropdown-container ul li:last-child { border: none; } .main-content .aside-accordian .accordian .add-category { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #E7ECF4; padding: 16px 16px 16px 16px; } .main-content .aside-accordian .accordian .add-category .category { display: flex; align-items: center; gap: 10px; } .main-content .aside-accordian .accordian .add-category .category .plus { background-color: #EDF8FF; height: 28px; width: 28px; padding: 7px; border-radius: 50px; cursor: pointer; color: #1371FE; } .main-content .aside-accordian .accordian .add-category .category span { font-size: 14px; color: #1371FE; font-weight: 500; cursor: pointer; } .main-content .aside-accordian .accordian .add-category .category .uparrow { height: 12px; width: 12px; cursor: pointer; color: #676879; margin-left: 16px; } .main-content .aside-accordian .accordian .add-category a { display: flex; padding-top: 5px; } .main-content .aside-accordian .accordian .add-category a .upload-icon { height: 24px; width: 24px; } .main-content .aside-accordian .accordian .select { display: flex; justify-content: space-between; border-bottom: 1px solid #E7ECF4; font-size: 14px; box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.0509803922); padding: 16px; } .main-content .aside-accordian .accordian .select .select-all { cursor: pointer; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .main-content .aside-accordian .accordian .select .select-all label { font-size: 14px; } .main-content .aside-accordian .accordian .select p { width: 82px; } .main-content .aside-accordian .accordian .accordian-left { height: calc(100% - 125px); overflow: auto; } .main-content .aside-accordian .accordian .accordian-left .accordian-category { font-size: 14px; } .main-content .aside-accordian .accordian .accordian-left .accordian-category::after { content: ""; border-bottom: 1px solid #E4E4E4; width: calc(100% - 32px); height: 1px; display: block; margin: 0 16px; } .main-content .aside-accordian .accordian .accordian-left .accordian-category:last-child::after { content: none; } .main-content .aside-accordian .accordian .accordian-left .accordian-category.main-category .selection-category .circle { display: none; } .main-content .aside-accordian .accordian .accordian-left .accordian-category.main-category .selection-category.sub-category { padding: 5px 5px 5px 26px; } .main-content .aside-accordian .accordian .accordian-left .accordian-category.main-category .selection-category.sub-category .circle { display: block; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-category { padding: 16px 16px 16px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; cursor: pointer; color: #161A30; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-category .selection { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-shrink: 0; width: calc(100% - 67px); } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-category .selection span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; width: calc(100% - 55px); display: block; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-category .selection span br { display: none; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-category .selection .circle { height: 16px; width: 16px; border-radius: 50px; background-color: #3C9E62; display: block; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-category .selection-count { display: flex; justify-content: space-between; align-items: center; font-weight: 500; width: 55px; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-category .selection-count svg { height: 12px; width: 12px; transition: all 0.5s; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-category.open svg { transform: rotate(0deg); } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-list { display: flex; justify-content: center; flex-direction: column; gap: 8px; margin-top: 8px; margin-bottom: 16px; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-list li { cursor: pointer; display: flex; gap: 10px; margin-left: 54px; font-size: 14px; color: #676879; } .main-content .aside-accordian .accordian .accordian-left .accordian-category .selection-list li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; line-height: 20px; } .main-content .aside-accordian .accordian .accordian-left .selection-category:hover { background-color: #EDF8FF; border-radius: 4px; } .main-content .aside-accordian .more-link { display: flex; align-items: center; gap: 3px; text-decoration: underline; color: #1371FE; font-weight: 500; font-size: 14px; } .main-content .aside-accordian .more-link svg { width: 12px; height: 12px; } .main-content .aside-accordian .selected-page { border-radius: 4px; background-color: #FFFFFF; padding: 16px; } .main-content .aside-accordian .selected-page .selected-overview { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #E7ECF4; } .main-content .aside-accordian .selected-page .selected-overview a { text-decoration: underline; color: #1371FE; font-weight: 500; font-size: 14px; } .main-content .aside-accordian .selected-page .selected-overview svg { height: 21px; width: 21px; cursor: pointer; } .main-content .aside-accordian .selected-page .selected-image { cursor: pointer; } .main-content .aside-accordian .selected-page .selected-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .main-content .area-selection { display: flex; flex-direction: column; gap: 20px; } .main-content .area-selection .image-settings { display: flex; justify-content: center; gap: 50px; position: relative; } .main-content .area-selection .image-settings .sheet-name { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #676879; } .main-content .area-selection .image-settings .sheet-name span { border: 1px solid rgba(103, 104, 121, 0.2); padding: 1px 6px; line-height: 20px; border-radius: 4px; color: rgba(103, 104, 121, 0.6); } .main-content .area-selection .image-settings .pagination { display: flex; justify-content: center; align-items: center; gap: 10px; } .main-content .area-selection .image-settings .pagination svg { height: 12px; width: 12px; cursor: pointer; } .main-content .area-selection .image-settings .pagination p { font-size: 12px; } .main-content .area-selection .image-settings .pagination p .image-number { color: #161A30; background: #E4E4E4; padding: 4px 6px; font-weight: 600; border-radius: 4px; margin-right: 8px; } .main-content .area-selection .image-settings .zoom-effect { display: flex; align-items: center; gap: 8px; position: absolute; right: 0; } .main-content .area-selection .image-settings .zoom-effect svg { height: 14px; width: 14px; cursor: pointer; } .main-content .area-selection .image-settings .zoom-effect .zoom-input { border: 1px solid #E7ECF4; font-size: 12px; padding: 4px; border-radius: 4px; color: rgba(103, 104, 121, 0.6); width: 43px; background: transparent; } .main-content .area-selection .image-settings .zoom-effect .zoom-input:focus { border: 1px solid #E7ECF4; outline: none; } .main-content .area-selection .plan-selection { height: calc(100vh - 225px); position: relative; } .main-content .area-selection .plan-selection img { width: 100%; height: 100%; } .main-content .area-selection .edit-tools { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 6px 10px; background-color: #FFFFFF; border-radius: 4px; width: 220px; margin: auto; color: #111; } .main-content .area-selection .edit-tools svg { height: 16px; width: 16px; cursor: pointer; } .main-content .area-selection .edit-tools .select { height: 28px; width: 28px; text-align: center; border-radius: 4px; display: flex; justify-content: center; align-items: center; } .main-content .area-selection .edit-tools .select:hover { background-color: #E7ECF4; } .main-content .area-selection .edit-tools .select.active { background-color: #1371FE; color: #FFFFFF; } .main-content .area-selection .edit-tools .shape-list { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 4px; } .main-content .area-selection .edit-tools .shape-list .shape { text-align: center; border-radius: 4px; display: flex; justify-content: center; align-items: center; } .main-content .area-selection .edit-tools .shape-list:hover { background-color: #E7ECF4; } .main-content .area-selection .edit-tools .shape-list.active { background-color: #1371FE; color: #FFFFFF; } .main-content .area-selection .edit-tools .shape-list .dropdown-btn { display: flex; justify-content: center; align-items: center; background: #E9E9E9; padding: 0px 3px; border-radius: 2px; width: 16px; height: 16px; position: relative; } .main-content .area-selection .edit-tools .shape-list .dropdown-btn svg { width: 12px; height: 10px; } .main-content .area-selection .edit-tools .shape-list .dropdown-container { background: #111; color: #FFFFFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1019607843); border-radius: 4px; padding: 8px; position: absolute; bottom: 35px; display: none; } .main-content .area-selection .edit-tools .shape-list .dropdown-container li { display: flex; align-items: center; gap: 4px; padding: 0px 16px; cursor: pointer; font-size: 12px; line-height: 20px; } .main-content .area-selection .edit-tools .shape-list .dropdown-container li:hover { background: #1371FE; border-radius: 4px; } .main-content .area-selection .edit-tools .page-number { display: flex; align-items: center; gap: 8px; } .main-content .area-selection .edit-tools .page-number input::-webkit-outer-spin-button, .main-content .area-selection .edit-tools .page-number input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .main-content .area-selection .edit-tools .page-number-input { border: 1px solid #E7ECF4; width: 38px; height: 22px; text-align: center; border-radius: 2px; font-size: 14px; color: #111; } .main-content .area-selection .edit-tools .page-number-input:focus { border: 1px solid #E7ECF4; outline: none; } .main-content .images-list { background-color: #FFFFFF; padding: 5px; border-radius: 8px; } .main-content .images-list ul { display: flex; justify-content: start; flex-direction: column; gap: 14px; height: calc(100vh - 150px); overflow: auto; } .main-content .images-list ul li { margin-right: 6px; position: relative; padding: 4px 4px 0 4px; border-radius: 6px; font-size: 10px; } .main-content .images-list ul li input { cursor: pointer; position: absolute; right: 8px; top: 8px; } .main-content .images-list ul li img { width: 100%; aspect-ratio: 3/2; border: 1px solid #CBDAE1; } .main-content .images-list ul li p { margin-top: 4px; text-align: center; } .main-content .images-list ul li:hover, .main-content .images-list ul li.active { background: #caeaff; } .main-content .beam-action { background: #FFFFFF; width: 35px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1215686275); border-radius: 8px; position: absolute; top: 0; display: none; } .main-content .beam-action ul { height: 100%; display: flex; align-items: center; flex-direction: column; } .main-content .beam-action .list-item { padding: 10px; display: flex; position: relative; cursor: pointer; transition: all 2s; } .main-content .beam-action .list-item:first-child { border-radius: 8px 8px 0 0; } .main-content .beam-action .list-item:last-child { border-radius: 0 0 8px 8px; } .main-content .beam-action .list-item svg { width: 14px; color: #323338; cursor: pointer; max-height: 14px; } .main-content .beam-action .list-item span { background: #111; color: #FFFFFF; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 2px 8px; position: absolute; font-size: 14px; left: 37px; top: 3px; visibility: hidden; } .main-content .beam-action .list-item:hover span { visibility: visible; } .tooltip { position: relative; display: inline-block; } .tooltip p span { color: #6e6e6e; font-weight: 600; } .tooltip .tooltiptext { font-size: 12px; visibility: hidden; width: 80px; background-color: #121212; color: #fff; text-align: center; border-radius: 6px; padding: 5px 8px; bottom: 30px; left: -30px; /* Position the tooltip */ position: absolute; z-index: 1; display: flex; /* Enable Flexbox for alignment */ justify-content: space-between; /* Aligns text left and right */ white-space: nowrap; /* Prevent text wrapping */ width: auto; /* Automatically adjust width to content */ min-width: 60px; /* Set a minimum width for consistency */ max-width: 100px; } .tooltip:hover .tooltiptext { visibility: visible; } .modal { height: 100vh; position: absolute; padding: 12px; top: 0; right: 0; background-color: rgba(0, 0, 0, 0.658); z-index: 100; width: 100%; display: flex; justify-content: center; align-items: center; display: none; } .modal .full-screen-loader .spinner { width: 50px; height: 50px; border-width: 7px; border-top-color: #1371FE; border-left-color: #1371FE; border-bottom-color: #EDF8FF; border-right-color: #1371FE; } .modal-container { padding: 24px; max-width: 422px; width: 100%; background-color: #FFFFFF; border-radius: 8px; } .modal-title { color: #161A30; font-size: 16px; font-weight: 500; line-height: 21px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid #E7ECF4; } .modal-header svg { height: 21px; width: 21px; cursor: pointer; } .modal-body { padding: 24px 0 28px 0; } .modal-bottom { padding-top: 25px; display: flex; flex-direction: column; gap: 24px; } .modal-bottom svg { height: 21px; width: 21px; cursor: pointer; } .modal .choose-category { display: flex; flex-direction: column; gap: 3px; } .modal .choose-category label { font-size: 14px; color: #161A30; } .modal .choose-category .category-dropdown { display: flex; justify-content: space-between; align-items: center; padding: 7px; } .modal .choose-category input { font-size: 14px; color: #161A30; outline: none; border: none; width: 100%; } .modal-buttons { margin-top: 8px; display: flex; justify-content: space-between; gap: 20px; } .modal-buttons a { width: 100%; } .upload-modal { height: 100vh; position: absolute; padding: 12px; top: 0; right: 0; background-color: rgba(0, 0, 0, 0.658); z-index: 100; width: 100%; display: flex; justify-content: center; align-items: center; display: none; } .upload-modal .modal-container { position: relative; padding: 24px; max-width: 635px; width: 100%; background-color: #FFFFFF; border-radius: 8px; } .upload-modal .modal-container .close { height: 21px; width: 21px; position: absolute; right: 12px; top: 12px; cursor: pointer; } .upload-modal .modal-container .modal-header { display: flex; justify-content: initial; align-items: initial; flex-direction: column; gap: 24px; padding-bottom: 0; border-bottom: 0px; } .upload-modal .modal-container .modal-header .choose-category { display: flex; flex-direction: column; gap: 3px; } .upload-modal .modal-container .modal-header .choose-category label { color: #161A30; font-size: 14px; font-weight: 500; line-height: 20px; } .upload-modal .modal-container .modal-header .choose-category .input-button { border: 1px solid #E6E9EF; border-radius: 8px; } .upload-modal .modal-container .modal-header .choose-category input { font-size: 14px; color: #161A30; outline: none; border: none; border-radius: inherit; width: 100%; padding: 8px; } .upload-modal .modal-container .modal-header .choose-category input::-moz-placeholder { color: rgba(103, 104, 121, 0.6); opacity: 1; /* Firefox */ } .upload-modal .modal-container .modal-header .choose-category input::placeholder { color: rgba(103, 104, 121, 0.6); opacity: 1; /* Firefox */ } .upload-modal .modal-container .modal-header .choose-category input::-ms-input-placeholder { /* Edge 12 -18 */ color: rgba(103, 104, 121, 0.6); } .upload-modal .modal-container .modal-header .upload-file { display: flex; flex-direction: column; gap: 8px; } .upload-modal .modal-container .modal-header .upload-file label { font-size: 14px; color: #161A30; font-weight: 500; } .upload-modal .modal-container .modal-header .upload-file .upload-image { background-color: #FAFBFE; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; padding: 48px 31px; margin: auto; width: 100%; border: 1px dashed #89CEFF; height: 100%; border-radius: 7px; } .upload-modal .modal-container .modal-header .upload-file .upload-image img { height: auto; width: 147px; } .upload-modal .modal-container .modal-header .upload-file .upload-image .upload-file .upload-text p:first-child { font-size: 18px; font-weight: 600; text-align: center; color: #161A30; margin-bottom: 16px; } .upload-modal .modal-container .modal-header .upload-file .upload-image .upload-file .upload-text p:first-child .custom-link { font-size: 18px; font-weight: 600; color: #1371FE; cursor: pointer; text-decoration: underline; } .upload-modal .modal-container .modal-header .upload-file .upload-image .upload-file .upload-text p:first-child #fileInput { display: none; } .upload-modal .modal-container .modal-header .upload-file .upload-image .upload-file .upload-text p:last-child { font-size: 14px; font-weight: 400; color: rgba(22, 26, 48, 0.6); text-align: center; } .upload-modal .modal-container .modal-header .upload-file-list .more-file { cursor: pointer; font-weight: 700; color: #1371FE; } .upload-modal .modal-container .modal-header .total-uploaded p { font-size: 14px; font-weight: 600; color: #161A30; } .upload-modal .modal-container .modal-header .total-uploaded p a { color: #1371FE; } .upload-modal .modal-container .modal-buttons { margin-top: 32px; display: flex; justify-content: end; gap: 20px; } .upload-modal .modal-container .modal-buttons a { width: 103px; } /* width */ ::-webkit-scrollbar { width: 5px; height: 5px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #E7ECF4; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #E7ECF4; border-radius: 10px; }/*# sourceMappingURL=main.css.map */