.clock_styles {
   font-size: 2em;
   color: white;
   background-color: #174769;
   border-radius: 6px;
   padding: 12px;
   width: 160px;
}

.clock_text_styles {
	font-size: 1.2em;
   	margin-top: 10px;
   	color: #174769;
}

.main {
    display: flex;
    padding: .5em;
    padding-left: 3.5em;
    padding-right: 3.5em;
    height: 110px;
    justify-content: center;
    align-items: middle;
    border: 0px solid #000;
}

.clockbox,
.clock {
    width: 100px;
    height: 100px;
    border: 0px solid #000;
}

/* Clock styles */
.circle {
    fill: none;
    stroke: #174769;
    opacity: .7;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.mid-circle {
    fill: #000;
}
.hour-marks {
    fill: none;
    stroke: #ccc;
    stroke-width: 8;
    stroke-miterlimit: 10;
}

.hour-arm {
    fill: none;
    stroke: #aaa;
    stroke-width: 20;
    stroke-miterlimit: 10;
}

.minute-arm {
    fill: none;
    stroke: #ccc;
    stroke-width: 11;
    stroke-miterlimit: 10;
}

.second-arm {
    fill: none;
    stroke: red;
    stroke-width: 4;
    stroke-miterlimit: 10;
}

/* Transparent box ensuring arms center properly. */
.sizing-box {
    fill: none;
}

/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour_ny,
#minute_ny,
#second_ny,

#hour_ch,
#minute_ch,
#second_ch,

#hour_st,
#minute_st,
#second_st,

#hour_mx,
#minute_mx,
#second_mx,

#hour_tx,
#minute_tx,
#second_tx {
    transform-origin: 300px 300px;
    /*transition: transform .5s ease-in-out;*/
}