534 lines
11 KiB
CSS
534 lines
11 KiB
CSS
body {
|
|
background-image: url("https://rms.rmto.ir/images/pattern-poster.jpg");
|
|
background-size: cover;
|
|
}
|
|
|
|
.container-page {
|
|
width: 1600px;
|
|
padding-right: 7.5px;
|
|
padding-left: 7.5px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.header-box {
|
|
background: #1b7e7e;
|
|
color: #fff;
|
|
height: 100px;
|
|
}
|
|
|
|
.header-box::before {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 50px solid transparent;
|
|
border-bottom: 50px solid transparent;
|
|
border-right: 50px solid #f9f9f9;
|
|
}
|
|
|
|
.header-box::after {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 50px solid transparent;
|
|
border-bottom: 50px solid transparent;
|
|
border-left: 50px solid #fefefe;
|
|
}
|
|
|
|
.logo {
|
|
height: 80px;
|
|
}
|
|
|
|
.counter-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.counter-box .counter-title {
|
|
border: 2px solid rgb(87, 45, 1);
|
|
border-radius: 8px;
|
|
padding: 20px 20px 50px 20px;
|
|
background-color: #fcbf49cc;
|
|
color: #412b01;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
/* box-shadow: rgb(38 57 77) 0px 20px 30px -10px; */
|
|
}
|
|
|
|
.counter-box .counters {
|
|
padding: 50px 20px;
|
|
}
|
|
|
|
.counter-box .counter-data {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background-color: #003049;
|
|
border: 2px solid #011724;
|
|
color: #fff;
|
|
margin-top: -30px;
|
|
padding: 15px;
|
|
height: 60px;
|
|
min-width: 60px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.counter-box .counter-data-top-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
margin-bottom: -30px;
|
|
font-size: 24px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.counter-box .counter-data-top-box .counter-data-top-right {
|
|
padding: 10px 20px 10px 60px;
|
|
background: #04669b;
|
|
border: 2px solid #011724;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.counter-box .counter-data-top-box .counter-data-top-left {
|
|
padding: 10px 20px;
|
|
background-color: #003049;
|
|
border: 2px solid #011724;
|
|
border-radius: 30px;
|
|
margin-right: -50px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.counter-box .counter-data-bottom-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
margin-top: -30px;
|
|
}
|
|
|
|
.counter-box .counter-data-bottom-box .counter-data-bottom-right {
|
|
padding: 10px 20px 10px 60px;
|
|
background: #04669b;
|
|
border: 2px solid #011724;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.counter-box .counter-data-bottom-box .counter-data-bottom-left {
|
|
padding: 10px 20px;
|
|
background-color: #003049;
|
|
border: 2px solid #011724;
|
|
border-radius: 30px;
|
|
margin-right: -50px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.counter-box .counter-data-bottom-box-2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
margin-top: -30px;
|
|
}
|
|
|
|
.counter-box .counter-data-bottom-box-2 .counter-data-bottom-right {
|
|
padding: 10px 20px;
|
|
background-color: #003049;
|
|
border: 2px solid #011724;
|
|
border-radius: 30px;
|
|
margin-left: -50px;
|
|
font-size: 24px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.counter-box .counter-data-bottom-box-2 .counter-data-bottom-left {
|
|
padding: 10px 60px 10px 20px;
|
|
background: #04669b;
|
|
border: 2px solid #011724;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.counter-box .counter-data-bottom-box-2 .success-box {
|
|
background: #127411;
|
|
}
|
|
|
|
.chart-bar-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.chart-bar-box .chart-bar-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background-color: #79724d;
|
|
border: 2px solid #413c24;
|
|
color: #fff;
|
|
margin-bottom: -30px;
|
|
padding: 15px;
|
|
font-size: 20px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.chart-bar-box .chart-bar-data {
|
|
border: 2px solid #79724d;
|
|
border-radius: 8px;
|
|
padding: 45px 20px 20px 20px;
|
|
background-color: #eae2b7cc;
|
|
width: 100%;
|
|
z-index: 1;
|
|
/* box-shadow: rgb(38 57 77) 0px 20px 30px -10px; */
|
|
}
|
|
|
|
.rank-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.rank-box .rank-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background-color: #233d4d;
|
|
border: 2px solid #14242e;
|
|
color: #fff;
|
|
margin-bottom: -30px;
|
|
padding: 15px;
|
|
font-size: 20px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.rank-box .rank-data {
|
|
border: 2px solid #618b82;
|
|
border-radius: 8px;
|
|
padding: 45px 20px 20px 20px;
|
|
background-color: #bee3dbcc;
|
|
width: 100%;
|
|
z-index: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
/* box-shadow: rgb(38 57 77) 0px 20px 30px -10px; */
|
|
}
|
|
|
|
.rank-box .rank-data .rank-item {
|
|
display: flex;
|
|
border-radius: 30px;
|
|
background-color: #89b0ae;
|
|
border: 2px solid #233d4d;
|
|
color: #0f3634;
|
|
}
|
|
|
|
.rank-box .rank-data .rank-item .rank-item-title {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.rank-box .rank-data .rank-item .rank-item-data {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #233d4d;
|
|
color: #fff;
|
|
border-radius: 30px;
|
|
min-width: 60px;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.table-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-box .table-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background-color: #370617;
|
|
border: 2px solid #18040b;
|
|
color: #fff;
|
|
margin-bottom: -30px;
|
|
padding: 15px;
|
|
font-size: 20px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.table-box .table-data-box {
|
|
border: 2px solid #a86308;
|
|
border-radius: 8px;
|
|
padding: 45px 20px 20px 20px;
|
|
background-color: #df973acc;
|
|
width: 100%;
|
|
z-index: 1;
|
|
height: 100%;
|
|
/* box-shadow: rgb(38 57 77) 0px 20px 30px -10px; */
|
|
}
|
|
|
|
.table-box .table-data-box .table-subtitle {
|
|
color: #370617;
|
|
background: #370617;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.table-box .table-data-box .table-subtitle .title {
|
|
background: #e2a95e;
|
|
padding: 0 30px;
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
}
|
|
|
|
.table-box .table-data-box .table-data {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.table-box .table-data-box .table-data .table-item {
|
|
display: flex;
|
|
border-radius: 30px;
|
|
background-color: #cd674c;
|
|
border: 2px solid #370617;
|
|
color: #200700;
|
|
}
|
|
|
|
.table-box .table-data-box .table-data .table-item .table-item-title {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.table-box .table-data-box .table-data .table-item .table-item-data {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #370617;
|
|
color: #fff;
|
|
border-radius: 30px;
|
|
min-width: 60px;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.second-color .table-data-box {
|
|
border: 2px solid #4b5a35;
|
|
background-color: #849669cc;
|
|
}
|
|
|
|
.second-color .table-title {
|
|
background-color: #001a2c;
|
|
border: 2px solid #010c14;
|
|
}
|
|
|
|
.second-color .table-data-box .table-subtitle {
|
|
color: #001a2c;
|
|
background: #001a2c;
|
|
}
|
|
|
|
.second-color .table-data-box .table-subtitle .title {
|
|
background: #9ba985;
|
|
}
|
|
|
|
.second-color .table-data-box .table-data .table-item {
|
|
background-color: #9dad6b;
|
|
border: 2px solid #001a2c;
|
|
color: #0c1001;
|
|
}
|
|
|
|
.second-color .table-data-box .table-data .table-item .table-item-data {
|
|
background-color: #001a2c;
|
|
}
|
|
|
|
.counter2-box {
|
|
height: 70%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
color: #2f4e5c;
|
|
}
|
|
|
|
.counter2-box::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 100%;
|
|
top: 0;
|
|
right: calc(50% - 5px);
|
|
background-color: #4f6d7a;
|
|
}
|
|
|
|
.counter2-box .counter2-data-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.counter2-box .counter2-data {
|
|
background: #c0d6df;
|
|
padding: 10px 30px;
|
|
font-size: 24px;
|
|
border: 4px solid #4f6d7a;
|
|
border-radius: 32px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.counter2-box .counter2-title-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.counter2-box .counter2-title {
|
|
background: #c0d6df;
|
|
padding: 10px 40px;
|
|
font-size: 30px;
|
|
border: 6px solid #4f6d7a;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.counter3-box {
|
|
height: 70%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
color: #4e301c;
|
|
}
|
|
|
|
.counter3-box::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 10px;
|
|
top: calc(50% - 5px);
|
|
right: 0;
|
|
background-color: #7f5539;
|
|
}
|
|
|
|
.counter3-box::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 100%;
|
|
top: 0;
|
|
right: calc(50% - 5px);
|
|
background-color: #7f5539;
|
|
}
|
|
|
|
.counter3-box .counter3-data-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.counter3-box .counter3-data {
|
|
background: #ddb892;
|
|
padding: 20px 30px;
|
|
font-size: 24px;
|
|
border: 4px solid #7f5539;
|
|
border-radius: 32px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.counter3-box .counter3-data-title-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
z-index: 2;
|
|
}
|
|
|
|
.counter3-box .counter3-title {
|
|
background: #ddb892;
|
|
padding: 10px 40px;
|
|
font-size: 30px;
|
|
border: 6px solid #7f5539;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.map-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.map-box .map-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background-color: #847577;
|
|
border: 2px solid #3f3738;
|
|
color: #fff;
|
|
margin-bottom: -30px;
|
|
padding: 15px;
|
|
font-size: 20px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.map-box .map-data-box {
|
|
border: 2px solid #3f3738;
|
|
border-radius: 8px;
|
|
background-color: #fbfbf2cc;
|
|
width: 100%;
|
|
z-index: 1;
|
|
/* box-shadow: rgb(38 57 77) 0px 20px 30px -10px; */
|
|
position: relative;
|
|
}
|
|
|
|
.map-box .map-data-box .map-data {
|
|
position: absolute;
|
|
top: 45px;
|
|
bottom: 0;
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.map-box .map-data-box .map-data.leaflet-container {
|
|
background: transparent;
|
|
}
|
|
|
|
.map-box .map-data-box .map-guid {
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: -2px;
|
|
width: 90px;
|
|
height: 110px;
|
|
background-color: #847577;
|
|
z-index: 400;
|
|
padding: 10px;
|
|
color: #fff;
|
|
border-bottom-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
border: 2px solid #3f3738;
|
|
}
|
|
|
|
.map-box .map-data-box .map-guid p {
|
|
font-size: 11px;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.text-labels-map {
|
|
font-family: "IRANSansFaNum" !important;
|
|
white-space: nowrap;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
margin: 0 !important;
|
|
}
|