body{ overflow: hidden; } #progressBar { margin: 0 auto; width: 100px; height:40px; } .province{ font-size: 12px; } .provinceRow{ margin-bottom: 3px; } #map{ position: absolute; top: 0; bottom: 0; width: 100%; } .container{ height: 100%; } .half{ /* height: 105px; */ height: 10.5vh; } .whole{ /* height: 226px; */ height: 22.5vh; } #cardMap{ padding: 0px; } .minCard{ padding: 10px; } .minCard > span{ font-size: 14px; } .firstCol h5{ margin-bottom: 20px; width: 100%; } span{ font-weight: bold; font-size: 13px; } .counter { display:inline-table !important } .firstPart{ height: 50%; } .secondPart{ height: 50%; } .card-body{ text-align: center; } .headTitle{ font-weight: bold; font-size: 14px; margin-bottom: 10px; } .centerFlex{ display: flex; justify-content: center; flex-direction: column; text-align: center; align-items: center; } .provincialcamera > .form-map { display: flex; flex-flow: column; align-items: flex-end; } .provincialcamera > .form-map > svg { margin: auto; width: 58%; height: auto; } .provincialcamera > .form-map > svg #iran > path { cursor: pointer; } .provincialcamera > .form-map > svg #iran > path:hover { fill: #ff5630; } .provincialcamera > .form-map > svg #iran > .map-selected { fill: #ff5630; } .form-map svg .sea path, .form-map svg .lake path { fill: #6caed8; } .form-map svg #iran path { fill: #d1d1d1; } .form-map svg .border path, .form-map svg .island path { fill: #fff; } @media (min-width: 1200px){ .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1500px; } } .card-body { flex: 1 1 auto; min-height: 1px; padding: 1.0rem; }