.dc-background {
    background: linear-gradient(to bottom, #D6E8FE, #B0C4DE);
    border: 1px solid #234B64;
    padding: 0.5rem;
}

.GridHeader {
    width: 100%;
    table-layout: fixed;
    overflow: hidden;
    empty-cells: show;
    z-index: 1;
    font-family: Arial;
    font-size: small;
    font-weight: bold;
    color: black;
    height: 1.5rem;
    background-color: #444;
    border-bottom: 1px solid #444;
    background: -moz-linear-gradient(center bottom, rgb(149,180,198) 39%, rgb(224,224,224) 70% );
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.39, rgb(149,180,198)), color-stop(0.7, rgb(224,224,224)) );
    background: -webkit-linear-gradient(top, rgb(149,180,198) 39%, rgb(224,224,224) 70%);
    background: -o-linear-gradient(top, rgb(149,180,198) 39%, rgb(224,224,224) 70%);
}

.Grid-Hilight-Color {
    background-color: #0088cc;
    color: white;
}

.GridHeaderText {
    background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    font-family: Arial;
    font-size: small;
    font-weight: bold;
    color: black;
    height: 1.5rem;
}

.GridBody {
    overflow: auto;
    overflow-y: auto;
    background-color: white;
    font-family: Arial;
    font-size: small;
    color: black;
}

.GridTableBody {
    width: 100%;
    table-layout: fixed;
    white-space: nowrap;
    overflow: hidden;
    empty-cells: show;
    cursor: pointer;
    background-color: white;
    user-select: none;
    text-overflow: ellipsis;
}

.GridTableBodyText {
    background-color: white;
    font-family:Arial;
    font-size: small;
    color: black;
}

.GridTableBodyText-Highlight {
    background-color: white;
    font-family: Arial;
    font-size: small;
    background-color: #0088cc;
    color: white;
}

.GridBorder{
    border:1px solid lightgray;
}

.GridHeaderBorder {
    border-left: 1px solid navy;
    border-right: 1px solid navy;
    border-bottom: 1px solid navy;
}

.home-button-div {
    height: 2rem;
    border-right: 1px solid white;
    color: white;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    font-size: x-large;
}

    .home-button-div:hover {
        height: 2rem;
        border-right: 1px solid white;
        color: white;
        padding: 0.25rem 0.5rem 0.25rem 0.5rem;
        font-size: x-large;
        cursor: pointer;
    }

.button-div {
    height: 2rem;
    border-right: 1px solid white;
    color: white;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    font-size: large;
}

    .button-div:hover {
        height: 2rem;
        border-right: 1px solid white;
        color: white;
        padding: 0.25rem 0.5rem 0.25rem 0.5rem;
        font-size: large;
    }

/*.left-button-div {
    height: 2rem;
    border-left: 1px solid white;
    border-right: 1px solid white;
    color: white;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}*/

/*.left-button-div-disabled {
    height: 2rem;
    border-left: 1px solid white;
    border-right: 1px solid white;
    color: navy;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}*/

.button-div-disabled {
    height: 2rem;
    border-right: 1px solid white;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    /*color: navy;*/
}

a.nav-bar-link-color{
    color:white;
}

    a.nav-bar-link-color:hover {
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

    a.nav-bar-link-color:visited {
        color: white;
        text-decoration: none;
    }

a.nav-bar-link-color-disabled {
    color: navy;
    text-decoration: none;
    cursor: default;
}

    a.nav-bar-link-color-disabled:visited {
        color: navy;
        text-decoration: none;
        cursor: default;
    }

a.clock-link-color {
    color: black;
}

a.clock-link-color:hover {
    color: blue;
}

a.clock-link-color:visited {
    color: black;
}

.login-layout {
    border: 1px solid black;
    margin: 2rem;
    padding: 1rem;
}

.epms-navbar {
    background-color: #4682B4;
}

.layout-background {
    background-color: #f0f7ff;
}

.layout-menuitem {
    font-size: 0.75rem;
}

/** BACKGROUNDS */
.bg1 { background: url(images/header_bg3.jpg) repeat-x left top; }

.epmsGradientBackground {
    background:linear-gradient(to bottom, #D6E8FE, #B0C4DE);
}

.data-collection-background {
    background-color: #FEFEFA; 
}

.data-collection-panel {
    margin-top:0.5rem;
    padding: 0.5rem;
    background-color: #FEFEFA;
    border: 1px solid lightgray;
    border-radius: 5px;
}

.roundCloseButton {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px; /* future proofing */
    border:solid;
    border-width:2px;
    border-color:#234B64;
    height:20px;
    width:20px;
    text-align:center;
    font-weight:bold;
    font-size:16px; 
    color:#234B64; 
    cursor:pointer;
    display:inline-block;
}

.circle {
    width:16px;
    height:16px;
    border-radius:8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    font-size:10px; 
    color:white;
    line-height:16px;
    text-align:center;
    background:blue;
    position:relative;
    float:left;
    left:11px;
    top:-35px;
}

.breakoutButton {
    border:solid;
    border-width:2px;
    border-color:#000000;
    height:17px;
    width:20px;
    cursor:pointer;
    position:relative;
    margin:2px;
}

.breakoutButtonTitleBar {-moz-border-radius: 20px; 
    position:absolute;
    left:0px;top:0px;
    width:20px;
    height:5px;
    background-color:#000000;
}

.toolbarTable {
   -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px; /* future proofing */
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    background:linear-gradient(to bottom, #234B64, #4579A0);
    width: 980px; 
    margin-left: auto; 
    margin-right: auto;
    
}

.notes_panel {
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px; /* future proofing */
    height:150px;
    width:560px;
    background:linear-gradient(to bottom, #FFFFFF, gray);
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    color:black;
    padding-left:20px;
    font-size:11px;
}

.notes-title{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; /* future proofing */
    height:15px;
    width:150px;
    background:linear-gradient(to bottom, gray, #FFFFFF);
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    color:navy;
    font-weight:bold;
    font-size:11px;
    padding-left:5px;
    padding-top:2px;
}

.received_notes_panel {
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px; /* future proofing */
    height:150px;
    width:560px;
    background:linear-gradient(to bottom, #FFFFFF, #D3D3D3);
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    color:black;
    padding-left:20px;
    font-size:11px;
}

.received_notes-title{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; /* future proofing */
    height:15px;
    width:175px;
    background:linear-gradient(to bottom, #D3D3D3, #FFFFFF);
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    color:navy;
    font-weight:bold;
    font-size:11px;
    padding-left:5px;
    padding-top:2px;
}

.notes_invoice_panel {
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px; /* future proofing */
    height:150px;
    width:560px;
    background:linear-gradient(to bottom, #FFFFFF, #FFFF00);
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    color:black;
    padding-left:20px;
    font-size:11px;
}

.notes_invoice_title{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; /* future proofing */
    height:15px;
    width:180px;    
    background:linear-gradient(to bottom, #FFFF00, #FFFFFF);
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    color:navy;
    font-weight:bold;
    font-size:11px;
    padding-left:5px;
    padding-top:2px;
}

.received_notes_invoice_panel {
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px; /* future proofing */
    height:150px;
    width:560px;
    background:linear-gradient(to bottom, #FFFFFF, #FFFFCC);
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    color:black;
    padding-left:20px;
    font-size:11px;
}

.received_notes_invoice_title{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; /* future proofing */
    height:15px;
    width:180px;    
    background:linear-gradient(to bottom, #FFFFCC, #FFFFFF);
    border:solid;
    border-color:lightsteelblue;
    border-width:thin;
    color:navy;
    font-weight:bold;
    font-size:11px;
    padding-left:5px;
    padding-top:2px;
}

.logon-Title {
    background: linear-gradient(to bottom, #B0C4DE, #FFFFFF);
    text-shadow: 2px 2px 2px gray;
    text-align:center;
    font-family: 'Times New Roman', 'serif', 'Modern No. 20';
    font-size:x-large;
    Color:#295f94;    
}

.copyright{
    FONT-WEIGHT: normal;
    FONT-SIZE: 7pt;
    Color:white; 
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-ALIGN: center;
}

.textBox{    
   /*border: solid 2px #050505;*/
   padding: 2px;
   font-size: 12px;
   box-shadow: 0px 1px 2px 0px #9C9C9C;
   background-color: #FFFFFF;
   outline: none;
   color: #474747;
 }

.EPMSRedButton {
    height: 3rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: #384e73;
    background-color: #FA8072;
    float: right;
    width: 10rem;
    border-color: red;
}

.diary-note-acknowledged-button {
    height: 3rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: #384e73;
    background-color: #FA8072;
    float: right;
    width: 10rem;
    border-color: red;
}

.diary-note-unacknowledged-button {
    height: 3rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    font-weight: bold;
    color: #384e73;
    background-color: #FA8072;
    float: right;
    width: 10rem;
    border-color: red;
}

.EPMSElipseButton {
    height: 1.75rem;
    width: 1.75rem;
    margin-left: 0.25rem;
    color: #384e73;
    background-color: #bfcddf; 
    border-color: #8ba0bc;
}

.EPMSListButton {
    font-size:small;
    height: 3rem;
    width: 6rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: #384e73;
    background-color: #bfcddf;
    float: right; 
    border-color: #8ba0bc;
}

.EPMSListButton-disabled {
    font-size: small;
    height: 3rem;
    width: 6rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: darkgray;
    background-color: lightgray;
    float: right;
    border-color: #8ba0bc;
    cursor: default;
}

.EPMSListButton-disabled:hover {
    font-size: small;
    height: 3rem;
    width: 6rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: darkgray;
    background-color: lightgray;
    float: right;
    border-color: #8ba0bc;
    cursor: default;
}

.EPMSListButton-disabled:focus {
    font-size: small;
    height: 3rem;
    width: 6rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: darkgray;
    background-color: lightgray;
    float: right;
    border-color: #8ba0bc;
    cursor: default;
}

.EPMSListButton-disabled:active {
    font-size: small;
    height: 3rem;
    width: 6rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: darkgray;
    background-color: lightgray;
    float: right;
    border-color: #8ba0bc;
    cursor: default;
}

/*.EPMSCancelButton {
    height: 3rem;
    width: 5rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    color: #384e73;
    background-color: #bfcddf;
    float: right;
    width: 10rem;
    border-color: #8ba0bc;
}*/

.EPMSButton {
    height: 3rem;
    width: 10rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: #384e73;
    background-color: #bfcddf;
    float: right;
    border-color: #8ba0bc;
}

.EPMSButton:hover {
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: #f3d64a;
    color: #1e395b;
    background-color: #fcf5d9;
    background: linear-gradient(to bottom, #fae185, #fcf5d9);
}

.EPMSButton-disabled {
    font-size: small;
    height: 3rem;
    width: 10rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: darkgray;
    background-color: lightgray;
    float: right;
    border-color: #8ba0bc;
    cursor: default;
}

.EPMSButton-disabled:hover {
    font-size: small;
    height: 3rem;
    width: 10rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: darkgray;
    background-color: lightgray;
    float: right;
    border-color: #8ba0bc;
    cursor: default;
}

.EPMSButton-disabled:focus {
    font-size: small;
    height: 3rem;
    width: 10rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: darkgray;
    background-color: lightgray;
    float: right;
    border-color: #8ba0bc;
    cursor: default;
}

.EPMSButton-disabled:active {
    font-size: small;
    height: 3rem;
    width: 10rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: darkgray;
    background-color: lightgray;
    float: right;
    border-color: #8ba0bc;
    cursor: default;
}

.EPMSButtonTable{
    height:100%;
    width:100%;
    border:none;
}

.EPMSButtonImageCell{
    vertical-align:middle;
    width:2rem;
}

.EPMSButtonImage{
    padding:0px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    border:none;
}

.EPMSButtonImageText{
    text-align:center;
}

.modalPopup
{
    background:linear-gradient(to bottom, #D6E8FE, #B0C4DE);
    border-width: 3px;
    border-style: solid;
    border-color: gray;
    padding: 3px;
    width: 900px;
}

.modalBackground
{
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.popup_Container {
    border: 1px solid lightgray;
    background-color: #FEFEFA; 
    border-radius: 10px;
    padding: 5px;
}

.tabPanel {
    background:linear-gradient(to bottom, #234B64, #4579A0); 
}

.logon-Title {
    top: 0px;
    left: 0px;
    height: 30px;
} 

.login-popup{
    display:none;
    position:absolute;
    z-index:1;
    top:5%;
    margin-left:auto;
    margin-right:auto;
    width:150px;
    height:100px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.modalClockOut-content {
    background-color: #fefefe;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80% /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.barchartborder {
    outline: 1px solid black;
    border-top: 1px solid orange;
    padding: 10px;
    background-color: yellow;
}

.dataCollectionTile {
    height: 5rem;
    border: 1px solid lightblue;
    color: white;
    background-color: #B0C4DE;
    /*background: linear-gradient(to bottom, #B0C4DE, #4682B4);*/
    cursor: pointer;
    margin-bottom: 0.25rem;
    border-radius: 5px;
}

.dataCollectionTileSelected {
    height: 5rem;
    border: 1px solid lightblue;
    color: white;
    background-color: #4682B4;
    cursor: pointer;
    margin-bottom: 0.25rem;
    border-radius: 5px;
}

.dcTileStateIndicatorStopped {
    width:10px;
    height:10px;
    border-radius:5px;
    background-color: red;
}

.dcTileStateIndicatorOnHold {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: yellow;
}

.dcTileStateIndicatorRunning {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: lime;
}

.productionEntryStartButton {
    width: 100%;
    height: 5rem;
    margin-top: 0.5rem;
    background-color: lime;
    font-size: x-large;
    color: black;
}

.productionEntryStopButton {
    width: 100%;
    height: 5rem;
    margin-top: 0.25rem;
    background-color: red;
    font-size: x-large;
    color: black;
}

.productionEntryHoldButton {
    width: 100%;
    height: 5rem;
    margin-top: 0.25rem;
    background-color: yellow;
    font-size: x-large;
    color: black;
}

.dcTileStatusPanel {
    height: 22rem;
    border-radius: 5px;
    margin-top: 0.5rem;
    overflow-y: auto;
    border: 1px solid lightgray;
    background-color: #FEFEFA;
}

.job-ticket-panel {
    height: 22rem;
    border-radius: 5px;
    margin-top: 0.5rem;
    border: 1px solid lightgray;
    background-color: #FEFEFA;
}

.dcTileCloseButton {
    color: red;
    display: none; 
    float: right;
    top: 0px;
}

.Login-Page {
    border: 1px solid lightgray;
    margin: 0.5rem;
    padding: 0.5rem;
    width: 20rem;
}

.ProgressStartTime {
    float: left;
    font-size: xx-small
}

.ProgressEndTime {
    float: right;
    font-size: xx-small
}

.progress-conatiner {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid lightgray;
    background-color: #FEFEFA;
    border-radius: 5px;
}

.Progress-Outer {
    width: 100%;
    text-align: center;
    border: solid 1px black;
}

.Progress-Inner {
    background: linear-gradient(to bottom, lime, #043927);
}

.selected-row {
    background: linear-gradient(to bottom, #ffa84c 0%, #ff7b0d 100%)
}

.asending-sort-caret {
    float: right;
    margin-top: 5px;
    margin-right: 3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid gray;
}

.descending-sort-caret {
    float: right;
    margin-top: 5px;
    margin-right: 3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid gray;
}

.red-text{
    color:red;
}

#ruler {
    visibility: hidden;
    white-space: nowrap;
    font-size: 11px;
}

.slideup, .slidedown {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}

.slidedown {
    max-height: 20rem;
}

.epms-button {
    transition: none;
}

.epms-text {
    color: black;
}

.epms-button:hover {
    color: #212529;
    text-decoration: none;
}

.epms-button:focus, .btn.focus {
    outline: 0;
    /*box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
}

.epms-button.disabled, .btn:disabled {
    opacity: 0.65;
}

.epms-button:not(:disabled):not(.disabled) {
    cursor: pointer;
}

a.epms-button.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
}

.epms-button-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

    .epms-button-primary:hover {
        color: #fff;
        background-color: #0069d9;
        border-color: #0062cc;
    }

    .epms-button-primary:focus, .epms-button-primary.focus {
        color: #fff;
        background-color: #0069d9;
        border-color: #0062cc;
        /*box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);*/
    }

    .epms-button-primary.disabled, .epms-button-primary:disabled {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .epms-button-primary:not(:disabled):not(.disabled):active, .epms-button-primary:not(:disabled):not(.disabled).active,
    .show > .epms-button-primary.dropdown-toggle {
        color: #fff;
        background-color: #0062cc;
        border-color: #005cbf;
    }

epms-button-default {
    color: #fff;
    background-color: #393a3e;
    border-color: #393a3e;
    float: right;
}

.epms-button-default:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.epms-button-default:focus, .epms-button-default.focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    /*box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);*/
}

.epms-button-default.disabled, .epms-button-default:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.epms-button-default:not(:disabled):not(.disabled):active, .epms-button-default:not(:disabled):not(.disabled).active,
.show > .epms-button-default.dropdown-toggle {
    color: #fff;
    background-color: #393a3e;
    border-color: #393a3e;
}

/*.epms-button-default:not(:disabled):not(.disabled):active:focus, .epms-button-default:not(:disabled):not(.disabled).active:focus,
.show > .epms-button-default.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}*/
/*.epms-button-primary:not(:disabled):not(.disabled):active:focus, .epms-button-primary:not(:disabled):not(.disabled).active:focus,
        .show > .epms-button-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
        }*/

.epms-button-block {
    display: block;
    width: 100%;
}

    .epms-button-block + .epms-button-block {
        margin-top: 0.5rem;
    }

/* The switch - the box around the slider */
        .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

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

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

input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 24px;
}

    .slider.round:before {
        border-radius: 50%;
    }