/* * * * * * * * * * * * * * * * * * * * * * */
/*                                           */
/*    COLO365.COM DASHBORD LOGIN FORM CSS    */
/*  USED BY: INDEX.PHP, LOGIN, LOGIN-FAILED  */
/*                                           */
/* * * * * * * * * * * * * * * * * * * * * * */

* {
  box-sizing:                       border-box;
}

html {
  width:                            100%;
  height:                           100%;
}

body {
  box-sizing:                       border-box;
  color:                            #001737;
  font-family:                      "IBM-Plex", "Open Sans", Helvetica Neue, sans-serif;
  font-weight:                      300;
  margin:                           0px;
  height:                           100%;
  width:                            100%;
  text-align:                       left;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline:                          none;
}

#wrapper {
  width:                            450px;
  min-height:                       600px;
  position:                         absolute;
  top:                              50%;
  left:                             50%;
  -ms-transform:                    translateX(-50%) translateY(-50%);
  -webkit-transform:                translate(-50%,-50%);
  transform:                        translate(-50%,-50%);
}

#content {
  height:                           100%;
  min-height:                       600px;
  margin:                           auto;
  text-align:                       left;
  background-color:                 #FFFFFF;
  padding:                          20px;
}

#logo {
  width:                            90px;
  height:                           90px;
  background-color:                 #FFFFFF;
  margin:                           30px auto 10px auto;
  background-image:                 url(https://portal.colo365.com/includes/images/favicon.png);
  background-repeat:                no-repeat;
  background-size:                  100%;
  display:                          block;
}

#headline {
  color:                            #001737;
  font-size:                        22px;
  font-weight:                      400;
  line-height:                      30px;
  margin:                           10px auto 10px auto;
  width:                            358px;
  text-align:                       center;
  letter-spacing:                   1px;
}

#text {
  margin:                           20px auto 20px auto;
  width:                            358px;
  text-align:                       center;
  color:                            #8392a5;
  font-size:                        15px;
  font-weight:                      300;
  line-height:                      24px;
}

#input {
  width:                            320px;
  height:                           52px;
  background-color:                 #FFFFFF;
  border-radius:                    4px;
  margin:                           0px auto 20px auto;
  cursor:                           text;
}

#input-auth {
  width:                            320px;
  height:                           52px;
  background-color:                 #FFFFFF;
  border-radius:                    4px;
  margin:                           0px auto 20px auto;
  cursor:                           text;
  text-align:                       center;
}

#input-label {
  width:                            320px;
  font-size:                        14px;
  font-weight:                      400;
  line-height:                      21px;
  text-align:                       left;
  color:                            #001737;
}

#input #login-username,
#input #login-password {
  width:                            318px;
  height:                           50px;
  border-radius:                    4px;
  border:                           1px solid #C0CCDA;
  padding:                          0px 10px;
  font-size:                        14px;
  font-weight:                      400;
  color:                            #1b2e4b;
  transition-delay:                 0s;
  transition-duration:              0.30s;
  transition-property:              all;
  transition-timing-function:       ease-in-out;
}

#input #login-username:focus,
#input #login-password:focus,
#input #login-username:hover,
#input #login-password:hover {
  border:                           1px solid #0168FA;
  transition-delay:                 0s;
  transition-duration:              0.15s;
  transition-property:              all;
  transition-timing-function:       ease-in-out;
}

#input-auth #authtoken {
  width:                            50px;
  height:                           50px;
  border-radius:                    4px;
  border:                           1px solid #C0CCDA;
  margin:                           10px 5px 0px 5px;
  font-size:                        14px;
  font-weight:                      400;
  color:                            #1b2e4b;
  text-align:                       center;
  transition-delay:                 0s;
  transition-duration:              0.30s;
  transition-property:              all;
  transition-timing-function:       ease-in-out;
  text-transform:                   uppercase;
}

#input-auth #authtoken:focus,
#input-auth #authtoken:hover {
  border:                           1px solid #0168FA;
  transition-delay:                 0s;
  transition-duration:              0.15s;
  transition-property:              all;
  transition-timing-function:       ease-in-out;
}

#button-submit,
#button-reset
 {
  width:                            320px;
  height:                           52px;
  text-align:                       center;
  margin:                           35px auto 0px auto;
  cursor:                           pointer;
  background-color:                 #0168FA;
  border:                           1px solid #0168FA;
  border-radius:                    4px;
  color:                            #FFFFFF;
  font-size:                        14px;
  font-weight:                      500;
  padding:                          15px 0px;
  transition-delay:                 0s;
  transition-duration:              0.15s;
  transition-property:              background-color;
  transition-timing-function:       ease-in-out;
}

#button-submit:hover,
#button-reset:hover  {
  background-color:                 #0158d4;
}

#goback {
  width:                            320px;
  height:                           54px;
  text-align:                       center;
  margin:                           35px auto -20px auto;
}

#footer {
  color:                           #001737;
  font-size:                       13px;
  font-weight:                     400;
  line-height:                     19px;
  margin-top:                      30px;
  text-align:                      center;
}

#footer a,
#input-label a,
#goback a {
  color:                            #0168fa;
  font-size:                        13px;
  font-weight:                      400;
  line-height:                      19px;
  text-decoration:                  none;
}

#input-label a {
  float:                            right;
}

#footer a:hover,
#input-label a:hover,
#goback a:hover {
  color:                            #0158d4;
}

#submitbtn {
  display:                          none;
}

#warning {
  width:                            320px;
  height:                           38px;
  text-align:                       center;
  margin:                           -10px auto 0px auto;
  background-color:                 #FFC107;
  border:                           1px solid #FFC107;
  border-radius:                    4px;
  color:                            #FFFFFF;
  font-size:                        14px;
  font-weight:                      500;
  padding:                          8px 0px;
  opacity:                          100%;
  position:                         relative;

  animation:                        hidelabel 0.75s;
  animation-delay:                  3s;
  animation-fill-mode:              forwards;
  
  -webkit-animation:                hidelabel 0.75s;
  -webkit-animation-delay:          3s;
  -webkit-animation-fill-mode:      forwards; 
}

#alert {
  width:                            320px;
  height:                           38px;
  text-align:                       center;
  margin:                           -10px auto 0px auto;
  background-color:                 #D00E17;
  border:                           1px solid #D00E17;
  border-radius:                    4px;
  color:                            #FFFFFF;
  font-size:                        14px;
  font-weight:                      500;
  padding:                          8px 0px;
  opacity:                          100%;
  position:                         relative;

  animation:                        hidelabel 0.75s;
  animation-delay:                  3s;
  animation-fill-mode:              forwards;
    
  -webkit-animation:                hidelabel 0.75s;
  -webkit-animation-delay:          3s;
  -webkit-animation-fill-mode:      forwards;
}

@keyframes hidelabel {

  from {
    height:                         38px;
    padding:                        8px 0px;
    border:                         1px solid;
    opacity:                        100%;
  }

  to {
    height:                         0px;
    padding:                        0px 0px;
    border:                         0px;
    opacity:                        0%;
  }

}




/* * * * * * * * * * * * * * * * * * * * * * */
/*                                           */
/*       SCREEN SIZE 480PX AND UNDER         */
/*                                           */
/* * * * * * * * * * * * * * * * * * * * * * */


@media only screen and (max-width: 480px) {
/* For Phones: */  

  body {
    background-color:               #FFFFFF;
  }

  #content {
    width:                          450px;
    border:                         none;
    border-radius:                  0px;
    box-shadow:                     none;
  }

  #input-label {
    margin:                         10px auto 2px auto;
  }

}




/* * * * * * * * * * * * * * * * * * * * * * */
/*                                           */
/*       SCREEN SIZE 481PX AND ABOVE         */
/*                                           */
/* * * * * * * * * * * * * * * * * * * * * * */


@media only screen and (min-width: 481px) {
/* For desktop: */

  body {
    background-color:               #F5F6FA;
  }

  #content {
    width:                          400px;
    border:                         1px solid #485E9028;
    border-radius:                  6px;
    box-shadow:                     0 0 10px #1C273C0C;

  }

  #input-label {
    margin:                         10px 19px 2px 19px;
  }

}