html, body {
    height: 100%;
}
/* LIBRARY STYLING */

/*@font-face {*/
/*    font-family: 'Material Icons';*/
/*    font-style: normal;*/
/*    font-weight: 400;*/
/*    src: url(https://example.com/MaterialIcons-Regular.eot); !* For IE6-8 *!*/
/*    src: local('Material Icons'),*/
/*    local('MaterialIcons-Regular'),*/
/*    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),*/
/*    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),*/
/*    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');*/
/*}*/

/*.material-icons {*/
/*    font-family: 'Material Icons';*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*    font-size: 24px;  !* Preferred icon size *!*/
/*    display: inline-block;*/
/*    line-height: 1;*/
/*    text-transform: none;*/
/*    letter-spacing: normal;*/
/*    word-wrap: normal;*/
/*    white-space: nowrap;*/
/*    direction: ltr;*/

/*    !* Support for all WebKit browsers. *!*/
/*    -webkit-font-smoothing: antialiased;*/
/*    !* Support for Safari and Chrome. *!*/
/*    text-rendering: optimizeLegibility;*/

/*    !* Support for Firefox. *!*/
/*    -moz-osx-font-smoothing: grayscale;*/

/*    !* Support for IE. *!*/
/*    font-feature-settings: 'liga';*/
/*}*/



/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }



/* PRESENTATION CLOCK STYLING */
body {
    background-color: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;

}

.hidden {
    display: none;
}

.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0 0;
    z-index: 1;
}

/*.widget-wrapper {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: wrap;*/
/*    flex-grow: 2;*/
/*    margin: 0 0;*/
/*    z-index: 1;*/
/*}*/

.widget-wrapper {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    grid-template-areas: none;
    width: 100%;
    margin: 0 0;
    z-index: 1;

}

/* SIDEBAR */
.sidebar {
    /*background-color: #3d3d3d;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 2;
    margin: 0 0;
}

.sidebar.minimized {
    max-width: 4rem;
}

.sidebar > .action-btn {
    /*flex: 1;*/
    margin-top: 1rem;
    padding: .5rem .25rem;
}

.action-btn {
    cursor: pointer;
}

.action-btn:hover {
    color: #ffd700;
}

.widget {
    display: flex;
    flex-direction: column;
    border: 1px solid #f8f8f82a;
    height: 50vh;
}

/*.w2 {*/
/*    flex-grow: 2;*/
/*    font-size: calc(100vw/4 - 6rem)*/
/*}*/
.w2 {
    grid-column: 1 / span 2;
    /*font-size: calc(100vw/4 - 6rem)*/
    font-size: calc(min(40vh,100vw/4))
}

.w2 .seconds {
    /*font-size: calc(100vw/6 - 6rem);*/
    font-size: calc(min(40vh,100vw/6));
}

/*.w1 {*/
/*    flex-grow: 1;*/
/*    font-size: calc(100vw/5 - 6rem);*/
/*}*/

.w1 {
    grid-column: auto / span 1;
    /*font-size: calc(100vw/5 - 6rem);*/
    font-size: calc(min(40vh,100vw/8));
}


.w1 .seconds {
    /*font-size: calc(100vw/7 - 6rem);*/
    font-size: calc(min(40vh,100vw/10));
}

.widget .action-bar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 1rem;
    padding: .25rem .5rem;
}

.action-bar .title-text {
    font-size: 36px;
    /*font-variant-caps: all-small-caps;*/
    text-transform: uppercase;
    flex-grow: 1;
    text-align: left;
}

.action-bar .action-btn {
    padding: 0 1rem;
}

.widget-main-display {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.widget-main-display .type_icon {
    font-size: calc(100vw/8);
}

.type-selector {
    display: flex;
    flex-direction: row;
    font-size: .5rem;
}

/** Clock Styling **/
.type_clock .seconds{
    display: none;
    /*visibility: hidden;*/
}

/** Timer Styling **/
/*[data-type="timer"] .timer_period {*/
/*    display: flex;*/
/*    font-size: .5rem;*/
/*}*/


/** Clock Styling **/
/*[data-type="clock"] .timer_period {*/
/*    display: none;*/
/*}*/

.type_clock .seconds {
    visibility: hidden;
}

/** Stopwatch Styling **/
/*[data-type="stopwatch"] .timer_period{*/
/*    display: none;*/
/*}*/


/** Settings Overlay **/
#settings-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,50%);
    display: flex;
    justify-content: center;
    z-index: 10;
    padding-top: 5vh;

}

#settings-overlay.hidden {
    display: none;
}

#widget-settings-form {
    display: flex;
    flex-direction: column;
    padding: 2rem 4rem;
    /*justify-content: flex-start;*/
    align-content: center;
    /*align-items: center;*/
    background-color: rgba(26, 26, 26, 1);
    min-height: 80vh;
    max-height: 100vh;
    max-width: 75vw;
    text-align: left;
    border-radius: 1rem;
    border: 1px solid rgba(230,230,230,1);
    font-size: 2rem;
    line-height: 3.5rem;
    flex-grow: 0;
}

#widget-settings-form .widget_title {
    width: 20rem;
    font-size: 2rem;
    border: none;
    background-color: #696868;
    color: white;
}

.timer_hours, .timer_minutes, .timer_seconds, .widget_height, .widget_width{
    width: 4rem;
    font-size: 2rem;
    border: none;
    background-color: #696868;
    color: white;
}

#widget-settings-form input[type="checkbox"] {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

#widget-settings-form input[name="autoStartTime"], #widget-settings-form input[name="endTime"] {
    font-size: 1.5rem;
    vertical-align: text-top;
}

#widget-settings-form input[type="submit"], #widget-settings-form button {
    width: 10rem;
    font-size: 1.5rem;
    padding: 0.75rem 0rem;
    font-family: arial;
    border: none;
    background-color: #696868;
    color: white;
    margin: 0 .5rem;
}


/** Message  */
#message-overlay {
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    z-index: 9;
    background-color: rgba(0,0,0, 0.8);
    width: 100%;
    height: 100%;
    text-align: left;
    color: rgba(255,255,255, 1);
    padding-top: .5rem;
}

#message-overlay .action-bar {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#message-overlay.hidden {
    display: none;
}

#message-overlay .message {
    font-size: 15rem;
}

#message-overlay .message.animate {
    /*background: linear-gradient(-45deg, #6355a4, #6355a4, #e89a3e, #e89a3e);*/
    background: linear-gradient(to left, #ffffff, #ffffff, #ffd700, #ffd700);
    background-size: 300%;
    font-family: Arial, sans-serif;
    /*font-weight: 900;*/

    /*font-size: 5vw;*/
    /*letter-spacing: -5px;*/
    /*text-transform: uppercase;*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*animation: animated_text 10s ease-in-out infinite;*/
    /*-moz-animation: animated_text 10s ease-in-out infinite;*/
    /*-webkit-animation: animated_text 10s ease-in-out infinite;*/
    animation: animated_text 5s ease-in-out infinite;
    -moz-animation: animated_text 5s ease-in-out infinite;
    -webkit-animation: animated_text 5s ease-in-out infinite;
}

#message-overlay .message-text-animate.on {
    color: #ffd700;
}

@keyframes animated_text {
    0% { background-position: 0px 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0px 50%; }
}

.type-option.selected {
    color: yellow;
}

input.error {
    border: 2px solid darkred;
    background-color: #a57577;
}

.button-row {
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
}

.time_caution {
    color: yellow
}

.time_warning {
    color: red;

}

.sidebar .asleep {
    color: red;
}

.widget-wrapper.asleep {
    opacity: 50%;
}

.blinking {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}