/*login*/
.login {
    margin: 60px auto;
    width: 340px;
    padding: 30px 25px;
    background: white;
    border: 1px solid #c4c4c4;
}

h1.login-title {
    margin: -28px -25px 25px;
    padding: 15px 25px;
    line-height: 30px;
    font-size: 25px;
    font-weight: 300;
    text-align:center;
}

.login-input {
    width: 285px;
    height: 50px;
    margin-bottom: 25px;
    padding-left:10px;
    font-size: 15px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.login-input:focus {
    border-color:#6e8095;
    outline: none;
}
.login-button {
    width: 100%;
    height: 50px;
    padding: 0;
    font-size: 20px;
    color: #fff;
    text-align: center;
    border: 0;
    border-radius: 5px;
    cursor: pointer; 
    outline:0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#720272+0,7f0008+100 */
    background: rgb(114,2,114); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(114,2,114,1) 0%, rgba(127,0,8,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(114,2,114,1) 0%,rgba(127,0,8,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(114,2,114,1) 0%,rgba(127,0,8,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#720272', endColorstr='#7f0008',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.login-lost
{
    text-align:center;
    margin-bottom:0px;
}

.login-lost a
{
    color:#666;
    text-decoration:none;
    font-size:13px;
}

#login_body{
    background-size: cover;
    background-image:url(/img/bg_login-min.jpg);
}

#dashboard_body{
    padding:10px;
    padding-top:50px;
    background-size: cover;
    min-width: 768px;
}

header{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    right: 0px;
    overflow: hidden;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#720272+1,7f0008+100 */
    background: rgb(114,2,114); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(114,2,114,1) 1%, rgba(127,0,8,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(114,2,114,1) 1%,rgba(127,0,8,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(114,2,114,1) 1%,rgba(127,0,8,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#720272', endColorstr='#7f0008',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
main{
    position: absolute;
    top: 40px;
    bottom: 20px;
    left: 0px;
    right: 0px;
    overflow: auto;

}
main>div{
    width:100%;
    margin: auto;
    /*max-width: 1440px;*/
}
footer{
    position:absolute; 
    bottom:0px; 
    height:20px; 
    line-height:20px; 
    left:0px; 
    right:0px; 
    overflow:hidden;
    color:#fff;
    font-size: 12px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#720272+1,7f0008+100 */
    background: rgb(114,2,114); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(114,2,114,1) 1%, rgba(127,0,8,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(114,2,114,1) 1%,rgba(127,0,8,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(114,2,114,1) 1%,rgba(127,0,8,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#720272', endColorstr='#7f0008',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


#dashboard_title{
    text-align: center;
    margin-top: 50px;
    font-size: 32px;
    background: -webkit-linear-gradient(#720272, #7F0008);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#dashboard_options_top{
    z-index: 1;
    white-space: nowrap;
    position: absolute;
    bottom:250px;
    left:0;
    width:100%;
    height:250px;
    /*display: flex;*/
    /*    flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-around;*/
    border-top: 1px solid #aaa;
    text-align: center;
    background: linear-gradient(135deg, rgba(110,54,124,1) 0%,rgba(170,54,89,1) 100%);
}
#dashboard_options_bottom{
    z-index: 1;
    white-space: nowrap;
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:250px;
    /*display: flex;*/
    /*flex-wrap: nowrap;*/
    /*flex-direction: row;*/
    /*justify-content: space-around;*/
    border-top: 1px solid #aaa;
    text-align: center;
    background: linear-gradient(135deg, rgba(110,54,124,1) 0%,rgba(170,54,89,1) 100%);
}


#dashboard_options_top >.item{
    transform: translate(0px, 50px);
}

#dashboard_options_bottom >.item{
    transform: translate(0px, -50px);
}

#dashboard_options_top.active >.item,#dashboard_options_bottom.active >.item{
    opacity:1;
    transform: translate(0px, 0px);
}
.dashboard_options >.item{
    text-align: center;
    opacity:0;
    transition-duration: .4s;
    border:1px solid transparent;
    border-right:1px dashed #aaa;
    padding-bottom:20px; 
    /*    flex: 1; */
    background: #ddd;
    width:20%;
    min-width: 270px;
    display: inline-block;
    vertical-align: top;
    height:100%;
}

.dashboard_options >.item:hover{
    background:#aaa;
    border:1px solid #069;
}
.dashboard_options >.item:active{
    outline:1px solid #7f0008;
    z-index: 10;
}

.dashboard_options >.item:last-child{
    border:none;
}
.dashboard_options >.item >.label{
    font-weight: 600;
    text-align: center;
    /*background: rgba(0,0,0,.1);*/
    color:#000;
    /*opacity: .8;*/
    font-size: 12px;
    /*font-size: 2vw;*/
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:20px;
    line-height:20px;
    white-space: nowrap;
}
.dashboard_options >.item >.content{
    white-space: normal;
    height:100%;
    width:100%;
    /*transition: .2s all ease;*/
    overflow:hidden;
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
}
/*.dashboard_options >.item >.content:hover{
    z-index: 100;
    transform: scale(1.1);
    transform-origin: bottom center;
}*/

#dashboard_options_panels{
    position: relative;
    width:100%;
    height:100%;
}

#dashboard_options_panels >div{
    opacity: 0;
    transition: .2s all ease;
    width:100%;
    height:100%;
    overflow: auto;
    position: absolute;
    top:0px;
    left:0px;
    pointer-events: none;
}

#dashboard_options_panels >div.active{
    opacity: 1;
    pointer-events: auto;
}

/*calendar*/
.calendar_month {
    border-spacing: 0px!important;
    border-collapse: separate;
    border: 1px solid #9DABCE;
    border-width: 0px 0px 0px 0px;
    font-size: 10px;
    width:100%;
}

.calendar_month td, .calendar_month th {
    width:14.28%;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    color: #444;
    position: relative;
    user-select:none;
    transition: .2s all ease ;

}

.calendar_month th {
    height: 30px;
    font-weight: bold;
    font-size: 11px;
}

.calendar_month td.date_has_event {
    color: white;
}
.calendar_month tbody td:not(.padding) {
    -webkit-box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.2);
    box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.2);
}
.calendar_month td.today {
    background: linear-gradient(to bottom, rgba(203,235,255,1) 0%,rgba(161,219,255,1) 100%);
}
.calendar_month td.padding {
    pointer-events: none;
}
.calendar_month .date{
    width:100%;
    height:15px;
    line-height:15px;
    position: absolute;
    top:0px;
    left:0px;
    color:rgba(0,0,0,.6);
}
.calendar_month .cell_content{
    padding-top: 15px;
    width:100%;
    height:100%;
    text-align: center;
}
.calendar_month .cell_content .event{
    background: #006699;
    width:15px;
    height:15px;
    line-height:15px;
    color:rgba(255,255,255,.5);
    font-size: 10px;
    display: inline-block;
    border-radius: 10px;
}



.cols_d1{
    width:100%;
    margin-left:0%;
    margin-right:0%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}

.cols_d2{
    width:49.8%;
    margin-left:0.05%;
    margin-right:0.05%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}

.cols_d3{
    width:33.05%;
    margin-left:0.05%;
    margin-right:0.05%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}

.cols_d4{
    width:24.8%;
    margin-left:0.05%;
    margin-right:0.05%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}

.cols_d5{
    width:19.9%;
    margin-left:0.05%;
    margin-right:0.05%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}

.cols_d3_2{
    width:66.05%;
    margin-left:0.05%;
    margin-right:0.05%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}


.cols_d4_3{
    width:74.8%;
    margin-left:0.05%;
    margin-right:0.05%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}

.cols_d6{
    width:16.5%;
    margin-left:0.05%;
    margin-right:0.05%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}



.cols_d8{
    width:12.4%;
    margin-left:0.05%;
    margin-right:0.05%;
    padding:0;
    vertical-align: top;
    display: inline-block;
}

.mat_label{
    font-family: 'Ubuntu', sans-serif;
    background: rgba(255,255,255,.4);
    color: #000;
    padding: 2px 4px;
    border-radius: 5px;
}

.mat_val{
    font-family: 'Ubuntu', sans-serif;
    font-weight:700;
}