* { margin:0; padding:0; box-sizing:border-box; font-family:'Open Sans', sans-serif; outline:none; }
a { text-decoration:none; color:#000; font-weight:bold; }

:focus {outline:none;}
::-moz-focus-inner {border:0;}
h1 { font-size:22px; padding-bottom:10px; padding-top:5px; }
h2 { border-bottom:1px solid #5691C1; margin:10px 0; color:#5691C1; font-size:14px; }
h2.no-underline { border-bottom:0px none; }

#popup { font-size:12px; }

#time { left:40%; right:40%; position:absolute; text-align:center; font-size:36px; color:#fff; }

label { display:block; }

textarea, input, select { height:34px; padding:0 10px; border:1px solid #aaa; width:100%; background-color:#fff; color:#000; }
textarea { height:120px; }

.center-text { text-align:center; display:block; }


.login-container { margin:80px auto; width:500px; padding:20px; background-color:#333; border-radius:4px; color:#fff; }
.login-container label.head { text-align:center; font-size:36px; padding-bottom:20px; }

div.header { width:100%; height:70px; line-height:70px; background-color:#333; padding:0 15px; }
div.header .header-container { min-width:800px; max-width:1200px; margin:0px auto; position:relative; }
div.header .logo { margin:15px 0; float:left; }
div.header .info { margin:15px 0; float:right; cursor:pointer; }
div.header .add { margin:15px 0; float:right; cursor:pointer; }
div.header .toggle_parent { right:140px; position:absolute; color:#fff; font-size:13px; text-align:right; }
ul.notification { position:absolute; right:80px; }
ul.notification li { display:block; }
ul.notification li ul { top:90px; position:absolute; width:460px; left:-360px; background-color:#333; opacity:0; transition:opacity .1s ease-in; z-index:10; display:none;}

ul.notification li ul li { overflow:hidden; transition:max-height .1s ease-in; }
ul.notification li ul li:hover { overflow-y:auto; }

ul.notification.open li ul { opacity:0.6; display:block; }
ul.notification.open li:hover ul { opacity:1; }
ul.notification li ul:before {
  content:"\A";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent #333 transparent;
  position:absolute;
  left:360px;
  top:-20px;
}

#note { color:#fff; font-size:13px; line-height:22px; width:100%; padding:5px; }
#note a { text-decoration:none; color:#fff; font-weight:bold; }
#note tr td:first-child { width:40px; }
#note tr:last-child td { border-bottom:2px none; }
#note tr td { border-bottom:2px solid #666; padding:4px 0; }
#note tr td.t { text-align:center; }
#note img { vertical-align:middle; }

/* Masonry */
.masonry { display:-webkit-flex; display:-ms-flexbox; display:flex; flex:1; flex-direction:row; -webkit-flex-direction:row; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;  justify-content:space-around; -webkit-justify-content:space-around; width:100%; }

.masonry .item { background-color:#eee; display: inline-block; margin:10px 5px; margin-bottom:0px;  width:260px; color:#000; box-shadow:2px 2px 5px -3px #000; cursor:pointer; }
.masonry .item .card-container { font-size:12px; display:block; margin:5px 5px 5px 10px; height:100%; }
.masonry .item .mdi { font-weight:bold; }
.masonry .item .name { font-size:20px; background-color:rgba(0,0,0,0.4); padding-left:6px; color:#fff; }
.masonry .item.status-ok { background-color:#00cc33; }
.masonry .item.status-warn { background-color:#ff9900; }
.masonry .item.status-error { background-color:#cc2900; }
.masonry .item.status-old { background-color:#E473FF; }
.masonry .item.status-update { background-color:#00BFFF; }
.masonry .item.status-old-crm { background-color:#CDBC00; }

.masonry .update-link { float:right; height:27px; width:27px; text-align:center; }
.masonry .update-link img { width:20px; height:20px; margin:3px 0; }

/* Container */
.main-container { width:450px; height:auto; margin:8% auto; text-align:center; background-color:#f1f1f1; padding:60px 40px; border:1px solid #ccc; box-shadow:2px 2px 5px -2px #000; border-radius:3px; }
.main-container label { display:block; padding-bottom:40px; color:#aaa; font-size:26px; }
.main-container input { padding:10px; width:100%; border:1px solid #ccc; margin-bottom:10px; font-size:14px; }
.main-container input[type="submit"] { background-color:#4E90FE; font-weight:bold; color:#fff; }

/* Image rotation */
@keyframes rotate360 {
  to { transform: rotate(360deg); }
}

.update-img { height:20px; vertical-align:top; margin:3px; float:right; }
.is_update .update-img { animation: 2s rotate360 infinite linear; }


/* Button */
a.bttn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background-color: #538fbe;
    padding: 5px 15px;
    font-size: 14px;
    border: 1px solid #2d6898;
    background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(73,132,180)),
        color-stop(1, rgb(97,155,203))
    );
}
a.bttn:hover {
    background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(79,142,191)),
        color-stop(1, rgb(102,166,214))
    );
}
a.bttn:active {
    background-image: linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
    background-image: -o-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(88,154,204)),
        color-stop(1, rgb(90,150,199))
    );
}

/* OTHER */
ul.ul_table, ul.ul_table_small { display:table; width:100%; min-height:22px; line-height:22px; }
ul.ul_table li, ul.ul_table_small li { display:table-cell; text-align:left; vertical-align:top; word-break:break-all; padding-right:4px; }
ul.ul_table li:first-child { width:240px; font-weight:normal; }

ul.ul_table_small { min-height:14px; line-height:14px; font-size:12px; }
ul.ul_table_small li { word-break:normal; font-weight:bold; }
ul.ul_table_small li:first-child { width:1px; font-weight:normal; }

/* Other */
.is_grid { width:100%; table-layout:fixed; }
.is_grid tr th { cursor:pointer; }
.is_grid tr th.small { width:130px; }
.is_grid tr td { padding:0 4px; }
.is_grid tr:hover td { background-color:#729FDB; }
.table-container { overflow:hidden; max-height:250px; overflow-y:auto; }