/* here you can put your own css to customize and override the theme */ /*** Rounded Portlets ***/ /* .portlet { border-radius: 4px !important; } .portlet .portlet-title { border-radius: 4px 4px 0px 0px !important; } .portlet .portlet-body, .portlet .portlet-body .form-actions { border-radius: 0px 0px 4px 4px !important; } */ .document-comment-input { width:100%; } .whatsapp-icon { background: url(/assets/global/svg/whatsapp.svg) 2px 2px no-repeat; background-size: 14px; width: 16px; height: 16px; float: right; margin-left: 4px; } .sortableTable tr, .ui-sortable-helper { cursor: move; } .fa-eye{ position: absolute; top: 3%; right: 88%; cursor: pointer; color: lightgray; } .fa-eye-slash{ position: absolute; top: 3%; right: 88%; cursor: pointer; color: lightgray; } .no-hover { pointer-events: none; } @media screen and (max-width: 480px) { .fa-eye{ right: 84%; } .fa-eye-slash{ right: 84%; } } .details { right: 25px; left: auto !important; } .details > .number { text-align: right !important; white-space: normal; float: none; display: block; } .dashboard-stat .details .desc { text-align: right; } @media screen and (max-width: 1400px) { .dashboard-stat .details .number { padding-top: 25px; text-align: left; font-size: 26px !important; line-height: 36px; letter-spacing: -1px; margin-bottom: 0px; font-weight: 300; } } @media screen and (max-width: 990px) { .summary-row{ display: grid !important; flex-wrap: wrap; grid-template-columns: 1fr 1fr; } .summary-row-cont{ margin-top: 0px !important; } #icon-whatsapp-cont{ margin-top: 10px; } #icon-download-cont{ margin-top: 10px; } } .summary-row-cont{ margin-top: 15px; } .summary-row{ display: block; flex-wrap: wrap; grid-template-columns: 1fr 1fr; } .report-icon { padding: 1px 2px; background: aliceblue !important; border-radius: 3px !important; } /*.report-icon:hover { padding: 1px 2px; border-radius: 3px !important; background: #3B82EE; }*/ .report-icon:hover { background-color: #e0e0e0; /* Change background on hover */ border-color: #999; /* Change border color on hover */ cursor: pointer; /* Indicate it's clickable */ } .icon-view { display: inline-block; width: 24px; /* Total height: 11 (shape) + 2 (top) + 2 (bottom) = 15 units */ height: 12px; position: relative; top: 3px; background-repeat: no-repeat; background-position: center; background-size: contain; /* viewBox explanation: "0 4.5 24 15" 0 = Start at X=0 4.5 = Start at Y=4.5 (6.5 minus 2px spacing) 24 = Keep 24px width 15 = Show 15px total height */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4.5 24 15' fill='none'%3E%3Cpath d='M14.55 12C14.55 13.3018 13.4083 14.3571 12 14.3571C10.5917 14.3571 9.45 13.3018 9.45 12C9.45 10.6982 10.5917 9.64286 12 9.64286C13.4083 9.64286 14.55 10.6982 14.55 12Z' stroke='%233B82EE' stroke-width='1.52' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 12C4.86012 8.78065 8.03563 6.5 12 6.5C15.9644 6.5 19.1399 8.78065 20.5 12C19.1399 15.2194 15.9644 17.5 12 17.5C8.03563 17.5 4.86012 15.2194 3.5 12Z' stroke='%233B82EE' stroke-width='1.52' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-view:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4.5 24 15' fill='none'%3E%3Cpath d='M14.55 12C14.55 13.3018 13.4083 14.3571 12 14.3571C10.5917 14.3571 9.45 13.3018 9.45 12C9.45 10.6982 10.5917 9.64286 12 9.64286C13.4083 9.64286 14.55 10.6982 14.55 12Z' stroke='%23FFFFFF' stroke-width='1.52' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 12C4.86012 8.78065 8.03563 6.5 12 6.5C15.9644 6.5 19.1399 8.78065 20.5 12C19.1399 15.2194 15.9644 17.5 12 17.5C8.03563 17.5 4.86012 15.2194 3.5 12Z' stroke='%23FFFFFF' stroke-width='1.52' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /*a.report-icon:hover { background: blue; }*/ .icon-invoice2 { display: inline-block; width: 24px; height: 12px; background-repeat: no-repeat; background-position: center; /* 'contain' prevents the icon from stretching out of proportion */ background-size: contain; /* viewBox explanation for 24x12 (2:1 ratio): - The shape is 15 units high (4.5 to 19.5). - To fit a 2:1 ratio container, our viewBox width must be double the height. - Height: 15 units. - Width: 30 units (to maintain 2:1 ratio). - X-offset: -3 (to center the 24-unit wide design inside 30 units). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 4.5 30 15' fill='none'%3E%3Cpath d='M8.5 19.5C7.39543 19.5 6.5 18.6046 6.5 17.5V4.5H13.5714L17.5 8.66667V17.5C17.5 18.6046 16.6046 19.5 15.5 19.5H8.5Z' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 4.5V9.5H17.5' stroke='%233B82EE' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9.5 12.5H14.5' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 15.5H14.5' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-invoice { display: inline-block; width: 24px; /* Total height: 15 (shape) + 2 (top) + 2 (bottom) = 19px */ height: 16px; position: relative; top: -1px; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; /* viewBox explanation: "0 2.5 24 19" 0 = Start at X=0 2.5 = Start at Y=2.5 (4.5 minus 2px spacing) 24 = Keep 24px width 19 = Show 19px total height */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 2.5 24 19' fill='none'%3E%3Cpath d='M8.5 19.5C7.39543 19.5 6.5 18.6046 6.5 17.5V4.5H13.5714L17.5 8.66667V17.5C17.5 18.6046 16.6046 19.5 15.5 19.5H8.5Z' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 4.5V9.5H17.5' stroke='%233B82EE' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9.5 12.5H14.5' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 15.5H14.5' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-invoice:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 2.5 24 19' fill='none'%3E%3Cpath d='M8.5 19.5C7.39543 19.5 6.5 18.6046 6.5 17.5V4.5H13.5714L17.5 8.66667V17.5C17.5 18.6046 16.6046 19.5 15.5 19.5H8.5Z' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 4.5V9.5H17.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9.5 12.5H14.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 15.5H14.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-receipt { display: inline-block; width: 24px; /* Total height: 15 (shape) + 2 (top) + 2 (bottom) = 19px */ height: 16px; position: relative; top: -1px; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; /* viewBox explanation: "0 2.5 24 19" 0 = Start at X=0 2.5 = Start at Y=2.5 (4.5 minus 2px spacing) 24 = Keep 24px width 19 = Show 19px total height */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 2.5 24 19' fill='none'%3E%3Cpath d='M8.5 19.5C7.39543 19.5 6.5 18.6046 6.5 17.5V4.5H13.5714L17.5 8.66667V17.5C17.5 18.6046 16.6046 19.5 15.5 19.5H8.5Z' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 4.5V9.5H17.5' stroke='%233B82EE' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14.5 12.5L11.1667 16.5L9.5 14.5' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-receipt:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 2.5 24 19' fill='none'%3E%3Cpath d='M8.5 19.5C7.39543 19.5 6.5 18.6046 6.5 17.5V4.5H13.5714L17.5 8.66667V17.5C17.5 18.6046 16.6046 19.5 15.5 19.5H8.5Z' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 4.5V9.5H17.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14.5 12.5L11.1667 16.5L9.5 14.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-notification { display: inline-block; width: 24px; /* Total height: 14 (shape) + 2 (top) + 2 (bottom) = 18px */ /* Total height: 15 (shape) + 2 (top) + 2 (bottom) = 19px */ height: 16px; position: relative; top: -1px; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; /* viewBox explanation: "0 3.25 24 18" 0 = Start at X=0 3.25 = Start at Y=3.25 (5.25 minus 2px spacing) 24 = Keep 24px width 18 = Show 18px total height */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3.25 24 18' fill='none'%3E%3Cpath d='M7.875 16.5V10.625C7.875 8.34683 9.72183 6.5 12 6.5C14.2782 6.5 16.125 8.34683 16.125 10.625V16.5M7.875 16.5H16.125M7.875 16.5H6.5M16.125 16.5H17.5' stroke='%234B8DF8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.5 18.5L12.5 18.5' stroke='%234B8DF8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='6' r='0.5' stroke='%234B8DF8' stroke-width='1.5'/%3E%3C/svg%3E"); } .icon-notification:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3.25 24 18' fill='none'%3E%3Cpath d='M7.875 16.5V10.625C7.875 8.34683 9.72183 6.5 12 6.5C14.2782 6.5 16.125 8.34683 16.125 10.625V16.5M7.875 16.5H16.125M7.875 16.5H6.5M16.125 16.5H17.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.5 18.5L12.5 18.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='6' r='0.5' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E"); } .icon-cancel{ width: 24px; height: 20px; position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='6.5' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4444 10.5555L10.5556 13.4444' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5556 10.5555L13.4444 13.4444' stroke='%233B82EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; } .icon-cancel:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='6.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4444 10.5555L10.5556 13.4444' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5556 10.5555L13.4444 13.4444' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-mail { display: inline-block; width: 43px; height: 35px; /* We encode the SVG to be CSS-safe (changing # to %23) */ background-image: url("data:image/svg+xml,%3Csvg width='43' height='35' viewBox='0 0 43 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41.5 5.5C41.5 3.3 39.7 1.5 37.5 1.5H5.5C3.3 1.5 1.5 3.3 1.5 5.5M41.5 5.5V29.5C41.5 31.7 39.7 33.5 37.5 33.5H5.5C3.3 33.5 1.5 31.7 1.5 29.5V5.5M41.5 5.5L21.5 19.5L1.5 5.5' stroke='%23213651' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon-download { width: 36px; height: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 27L6.75 15.75L9.9 12.4875L15.75 18.3375V0H20.25V18.3375L26.1 12.4875L29.25 15.75L18 27ZM4.5 36C3.2625 36 2.20312 35.5594 1.32188 34.6781C0.440625 33.7969 0 32.7375 0 31.5V24.75H4.5V31.5H31.5V24.75H36V31.5C36 32.7375 35.5594 33.7969 34.6781 34.6781C33.7969 35.5594 32.7375 36 31.5 36H4.5Z' fill='%23213651'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon-whatsapp { display: inline-block; width: 36px; height: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E"); transition: background-color 0.3s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .b-red-link{ font-size: 16px; color: #2a6496; font-weight: normal; text-decoration: none; } .b-red-link:hover{ font-size: 16px; color: #2a6496; font-weight: normal; text-decoration: underline; }