/*======================================================================= =============================DIV TAAM{7}================================ ========================================================================*/ /* Google Font Cdn Link */ @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); /* Changing Some Default Browser Css */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Making Colors And Fonts Varibles */ :root { --p-f:"poppins",sans-serif; --r-f: "Raleway", sans-serif; --m-f: "Mulish", sans-serif; --d-f:"Dancing Script", cursive; --r2-f:"Roboto Mono", monospace; --p-color:#69d633 ; --s-color:#4CAF50 ; --bg-color:#ebeef1 ; } table { font-weight: bold !important; } body { background-color: var(--bg-color); width: 100%; height: 100vh; overflow-x:hidden ; font-family: var(--r-f); } .main-container { width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; } .main-container .header-text { width: 100%; background-color: #fff; display: flex; flex-wrap: wrap; text-align: left; justify-content: space-around; font-family: var(--m-f); align-items: center; line-height: 1.5; padding: 10px; } .main-container .header-text .fit-text p { margin: 0px 10px; } .main-container .header-text h5 { font-size: 40px; color: #69d633; /* text-align: center; */ } .hhhh { /* font-size: 40px; */ color: #69d633 !important; /* text-align: center; */ } .fit-text { display: flex; justify-content: space-around; flex-wrap: wrap; } .main-container .container-filter { background-color: #fff; width: 100%; display: flex; justify-content: space-around; padding: 20px; /* position: fixed; */ flex-wrap: wrap; } .main-container .container-filter div { margin: 10px; } .main-container .container-filter .search input { padding: 10px 20px; border-radius: 20px; border: 1px solid #aaa; outline: none; } .main-container .container-filter .search input:focus { border: 1px solid #69d633; } .main-container .container-filter .year-filter select { padding: 10px; border: 1px solid #aaa; outline: none; border-radius:4px ; } .main-container .container-filter #quaterFilterContainer select { padding: 10px; border: 1px solid #aaa; outline: none; border-radius:4px ; } .main-container .container-filter .view button { padding: 10px; border: none; border-radius: 4px; background-color: #69d633; color: #fff; position: relative; cursor: pointer; } .main-container .container-filter .view button.active { background-color: #4CAF50 !important; } .main-container .container-filter .view .list::after { content: "List View"; position: absolute; background-color: #333; color: #fff; padding: 10px; border-radius:10px ; top: 38px; left: -20px; font-size: 10px; width: 50px; display: none; } .main-container .container-filter .view .list:hover::after { display: block; top: 40px; } .main-container .container-filter .view .list:hover::before { display: block; top: 38px; } .main-container .container-filter .view .list::before { content: ""; background-color: #333; width: 10px; height: 10px; position: absolute; z-index: 1; transform: rotate(45deg); top:34px; display: none; } .main-container .container-filter .view .grip::after { content: "grip View"; position: absolute; background-color: #333; color: #fff; padding: 10px; border-radius:10px ; top: 38px; left: -20px; font-size: 10px; width: 50px; display: none; } .main-container .container-filter .view .grip:hover::after { display: block; top: 40px; } .main-container .container-filter .view .grip:hover::before { display: block; top: 38px; } .main-container .container-filter .view .grip::before { content: ""; background-color: #333; width: 10px; height: 10px; position: absolute; z-index: 1; transform: rotate(45deg); top:34px; display: none; } .main-container .charts-container { width: 100%; height: auto; display: flex; align-items: center; flex-direction: column; } .main-container .charts-container .row { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; } .main-container .charts-container .row .one-chart { background-color: #fff; padding: 20px 10px; display: flex; width: 35vh; align-items: center; flex-direction: column; margin: 20px 10px; border-radius: 10px; font-family: var(--m-f); box-shadow: 1px 2px 4px -1px rgba(0,0,0,0.28); } .main-container .charts-container .row .one-chart h3 { color: #69d633; } .main-container .charts-container .row .one-chart .center { box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),-6px -6px 10px -1px rgba(235, 238, 241, 0.40); padding: 20px; border-radius: 50%; width: 160px; height: 160px; display: flex; justify-content: center; position: relative; align-items: center; } .main-container .charts-container .row .one-chart .center .center-text { box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),inset -4px -4px 6px -1px rgba(235, 238, 241, 0.40); border-radius: 50%; width: 120px; height: 120px; display: flex; justify-content: space-between; padding:10px 0px; padding-top: 17px; flex-direction: column; position: absolute; color: #69d633; /* line-height: 2.5; */ } .main-container .charts-container .row .one-chart .center .center-text::before { content: ""; background-color: #69d633; margin-left: 0px; width: 100%; height: 3px; border-radius: 20px; position: absolute; top:50%; } circle { fill: none; stroke: url(#GradientColor); stroke-width: 21px; } svg { position: absolute; top: 2px; /* display: none; */ left: 2px; } .no-results-message { color: red; text-align: center; font-size: 30px; margin-top: 50px; /* Adjust the margin as needed */ }