/*------------------------------------------------------------------
 * Theme Name: Ipsum Form
 * Theme URI: https://www.trybpoltd.com/envato/theme/form/ipsum/
 * Author: TRYBPO
 * Author URI: https://www.trysolutions.com/
 * Description: A Bootstrap Responsive HTML5 Template
 * Version: 1.0
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Bootstrap v4.1 (http://getbootstrap.com)
 * Copyright 2024 TRYSOLUTIONS.
 -------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1. General Styles.
2. Responsive Styles.
-------------------------------------------------------------------*/

.clock {
    position   : relative;
    display    : flex;
    flex-flow  : column wrap;
    width      : 280px;
    height     : 100px;
    margin-left: 7%;
}

.block {
    width     : calc(100% / 12);
    height    : 20%;
    color     : #474747;
    transition: 0.4s;
}

.block:not(:nth-child(n+16)):nth-child(n+11),
.block:not(:nth-child(n+46)):nth-child(n+41) {
    margin-right: 10px;
}

.block:not(:nth-child(n+31)):nth-child(n+26) {
    margin-right: 20px;
}

.block:before {
    content    : attr(data-num);
    position   : relative;
    display    : block;
    font-size  : 16px;
    width      : 100%;
    height     : 100%;
    line-height: 20px;
    text-align : center;
}

.block:nth-child(-n+10):before {
    content: "0"attr(data-num);
}

.block.active:before {
    color      : whitesmoke;
    font-weight: 500;
}

.block.second:before {
    color: #FF8300;
}

.divider {
    position        : absolute;
    width           : 2px;
    background-color: whitesmoke;
    height          : 60%;
    top             : 20%;
    left            : calc(50% + 19px);
}

body.light-theme {
    background: #e6e6e6;
}

body.light-theme .block {
    outline: 1px solid #dfdfdf;
    color  : #acacac;
}

body.light-theme .block.active:before {
    color: #333;
}

body.light-theme .block.second {
    background: #d4d4d4;
}

body.light-theme .block.second:before {
    color: #333;
}

body.light-theme .divider {
    background: #333;
}

.switch-theme {
    position: absolute;
    bottom  : 40px;
    right   : 40px;
    color   : grey;
}

.switch {
    position   : relative;
    display    : inline-block;
    width      : 60px;
    height     : 34px;
    margin-left: 30px;
}

.switch input {
    display: none;
}

.slider {
    position        : absolute;
    cursor          : pointer;
    top             : 0;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background-color: #ccc;
    transition      : all 0.4s;
    border-radius   : 34px;
}

.slider:before {
    position        : absolute;
    content         : "";
    height          : 26px;
    width           : 26px;
    left            : 4px;
    bottom          : 4px;
    background-color: white;
    transition      : 0.4s;
    border-radius   : 50%;
}

input:checked+.slider {
    background-color: #333;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    transform: translateX(26px);
}