*{
    font-size:12px;
}

h1{
    letter-spacing: 2px;
    font-size: 45px;
    margin-top:100px;
    
}
body{
    font-family: 'Roboto', sans-serif!important;
    color:#373741!important;
    min-height: 100vh;
    position: relative;
    background-color: #fcfcfc;
    transition: background-color .3s,color .3s;
    padding-bottom: 100px; 
}
body.nightMode{
    background-color: #373741;
    color:#f5f5f5!important;
}
.infoMsg{
margin-left:50px;
}
.alert{
    margin-top:20px;
}
.nightMode .mask{
    color:#f5f5f5;
}
.nightMode .table-bordered td, .nightMode .table-bordered th{
    border-color:#4b4b58;
}
.table-bordered td, .table-bordered th{
    transition: border-color .3s;
}
.nightMode .image{
    background-image: url("/img/2logo\ white.png");
}
.nightMode .logo{
    background-color: #4c4c58;
}
.submit{
    padding-left:20px;
    padding-right: 20px;
    letter-spacing: 1px;
    transition: background-color .2s;
}

.submit{
    background-color: rgb(214, 60, 191)!important;
    border-color: transparent!important;
    box-shadow:0 0 6px rgba(0, 0, 0, 0.25);
}
.submit:hover{
    background-color: rgba(214, 60, 191,.8)!important;
    border-color: transparent!important;
}
.nightMode .submit{
    background-color:rgba(254, 61, 225, 0.70)!important;
}
.nightMode .submit:hover{
    background-color:rgba(254, 61, 225, 0.55)!important;
}
.form-control{
    transition-property: background-color,box-shadow,border-color,color;
    transition-duration: .15s!important;
    transition-timing-function: ease-in-out;
}


.nightMode .form-control{
    background-color: #4b4b58;
    color:white;
    border-color: rgba(196, 50, 174, 0.2);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(228, 133, 213, 0.075),0 0 8px rgba(221, 0, 188,.3);
    box-shadow: inset 0 1px 1px rgba(228, 133, 213, 0.075),0 0 8px rgba(221, 0, 188,.3);
}
.nightMode .form-control:focus{
    background-color: #4b4b58;
    color:white;
}
.title{
    margin:0 0 20px 0;
}
.submit{
    margin:20px 0;
}
.mask{
    transition: color .3s;
   margin:0 10px;
}
.errorMsg{
    margin-left:3px;
    margin-right: 50px;
}
.errorIp{
    font-weight: 600;
}
.shortMask{
    font-weight: 500;
    color:lightseagreen;
}
.nightMode .shortMask{
    color:lightseagreen;
}
.classMask{
    display: none;
    color:lightseagreen;
}
.nightMode .classMask{
    color:lightseagreen;
}
.vCenter{
    position: absolute;
    top:50%;
    right:20px;
    transform: translateY(-50%);
    font-weight: 500;
}
.relative{
    position: relative;
}
.maskCol .mask:nth-child(2){
    margin-left:0;
}
.maskCol .colored{
    position: relative;
    /* color:lightseagreen; */
    color:#373741;
    margin-left:10px;
    transition: color .3s;
}
.nightMode .maskCol .colored{

    color:whitesmoke;

}


.upper{
    text-transform: uppercase;
}

table .coltext{
    font-weight: 500;
    color:#373741;
    transition:color .3s!important;
}
.nightMode table .coltext,
.nightMode table .dectext
{
    color:whitesmoke;
   
}
.nightMode table .hosttext{
    color:lightblue;
}

table .dectext{
    font-weight: 400;
    color:#393994;
    letter-spacing: 1px;
    transition: color .3s;
}
table .hosttext{
    font-weight: 500;
    color:#393994;
    transition: color .3s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus,
.form-control:focus {
    border-color: rgba(196, 50, 174, 0.6);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(221, 0, 188,.075),0 0 8px rgba(221, 0, 188,.6);
    box-shadow: inset 0 1px 1px rgba(221, 0, 188,.075),0 0 8px rgba(221, 0, 188,.6);
}



/* Toggle */
.overlay{
    position: absolute;
    width: 58px;
    height: 30px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:20;
    border-radius:15px;
    cursor: pointer;
}
.toggle-container{
    position: absolute;
    width: 100px;
    height: 70px;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none; 
}
.toggle-container .title{
    text-align: center;
    font-size: 11px;
    position: absolute;
    left:50%;
    bottom:-2px;
    width: 100%;
    transform: translateX(-50%);
    margin:0;
}
#toggle{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 58px;
    height: 30px;
    background-color: rgb(235, 235, 235);
    border-radius: 15px;
    transition:background-color .3s;
    border:3px solid rgb(107, 107, 107);
    overflow: hidden;
}
#toggle.nightMode{
    background-color: rgb(214, 60, 191);
}
#toggle.nightMode .circle{
    background-color: whitesmoke;
    left:28px;
}#toggle .off{
    font-size: 12px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:5px;
    transition: .3s;
    color:rgb(70, 70, 70);
    
}
#toggle.nightMode .off{
    /* color:#494952; */
    color:rgb(82, 82, 82);
    right:-25px;
    transition: .3s;
}
#toggle .on{
    top:50%;
    transform: translateY(-50%);
    font-size: 12px;
    position: absolute;
    left:-25px;
    color:rgb(207, 207, 207);
    transition: .3s;
    
    
}
#toggle.nightMode .on{
color: white;
left:5px;
}
#toggle .circle{
    position: absolute;
    width:19px;
    height: 19px;
    border-radius: 100%;
    background-color: rgb(107, 107, 107);;
    left:4px;
    top:50%;
    transform: translateY(-50%);
    transition: .3s;
}
/* Logo */
.lastelement{
    position: absolute;
    bottom:5px;
    height: 100px;
    width: 100%;
}
.logo{
    position: absolute;
    bottom:10px;
    right:50%;
    transform: translateX(50%);
    background-color: #fff;
    border:1px solid #3737410c;
    width: 65px;
    height: 65px;
    border-radius: 100%;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
transition:.3s;
}
.image {
    background-image: url("/img/4logo.png");
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center; 
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    transition: .3s;
}
.logo:hover{
    transform: translateX(50%) scale(1.1) ;
}

@media (min-width: 576px) { 
    *{
        font-size:16px;
    }
    .logo{
        transform: translateX(0);
        top:auto;
        left:auto;
        bottom:10px;
        right: 30px;
    }
    .logo:hover{
        transform: scale(1.1);
    }
    .classMask{
        display: block;
    }
    .nightMode .maskCol .colored{
        color:lightseagreen;
    }
    .maskCol .colored{
        position: relative;
        color:lightseagreen;
        margin-left:10px;
        
    }

}