header {
    position: absolute;
    width: 100vw;
    height: 45px;
    background-color: #0054A4;
    z-index: 2;
}

#header-wrapper {
    width: auto;
    height: auto;
}

#header-wrapper li {
    width: auto;
    height: 100%;
    display: inline-table;
}
#header-wrapper li .logo {
    width: auto;
    height: 30px;
    padding: 7.5px 0px 7.5px 15px;
}

#header-wrapper li img {
    width: 30px;
    height: auto;
    padding: 7.5px;
}

#main-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
}

/*************************
** Navigation Panel CSS **
**************************/

#navigation-panel {
    width: 20%;
    height: 100%;
    background-color: #333333;
    float: left;
    overflow-y: auto;
}
.top-spacing {
    width: 100%;
    height: 45px;
}

#control-panel {
    width: 100%;
    height: 45px;
    background-color: #fff;
    border-bottom: 1px solid #c6c6c6;
}

#profile-info-wrapper {
    width: 100%;
    height: 110px;
    background-color: #fff;
}
#profile-info-wrapper .profile-image{
    width: 90px;
    height: 90px;
    border-radius: 90px;
    padding: 10px;
    float: left;
}
#profile-info-wrapper .profile-name {
    padding-top: 40px;
    color: #0054A4;
}
#profile-info-wrapper .profile-position {
    font-size: 12px;
    color: #595959;
}

.navigation-wrapper {
    width: 100%;
    height: auto;
}

#navigation {
    width: 100%;
    height: auto;
}
#navigation li{
    width: auto;
    height: 45px;
    border-left: 3px solid #333333;
    transition-duration: 0.3s;
    color: #f4f4f4;
}
#navigation li:hover{
    background-color: #2b2b2b;
    border-left: 3px solid #2b2b2b;
    padding-left: 15px;
    transition-property: padding;
    transition-duration: 0.3s;
    cursor: pointer;
}
#navigation .selected-navigation {
    padding-left: 15px;
    border-left: 3px solid #0054A4;
}
#navigation .selected-navigation:hover {
    border-left: 3px solid #0054A4;
}
#navigation li p{
    color: #f4f4f4;
    font-size: 13px;
    line-height: 45px;
    text-transform: capitalize;
}
#navigation li img{
    width: 20px;
    height: auto;
    float: left;
    padding: 12px 10px;
}
#navigation .navigation-subtitle {
    width: auto;
    height: auto;
    line-height: 20px;
    background-color: #d3d3d3;
    color: rgb(70, 70, 70);
    font-size: 11px;
    padding: 10px;
}

/**********************
** Content Panel CSS **
***********************/

#content-panel {
    width: 80%;
    height: 100%;
    background-color: #f4f4f4;
    overflow-y: auto;
    float: right;
    box-shadow: 1px 0px 5px #595959;
}
#control-panel #page-title-wrapper {
    width: 40%;
    height: 100%;
    float: left;
    overflow: hidden;
}

#page-title-wrapper .page-title{
    width: auto;
    height: auto;
    line-height: 45px;
    padding-left: 15px;
    font-size: 14px;
    color: #0054A4;
}

#admin-panel {
    width: 60%;
    height: 100%;
    float: right;
}

#admin-panel .controls-wrapper {
    width: auto;
    height: auto;
    padding-right: 10%;
}
#admin-panel .controls-wrapper li{
    display: inline-block;
    vertical-align: middle;
    float: right;
}

#admin-panel .controls-wrapper li img{
    display: block;
    width: 25px;
    height: auto;
    padding: 12px;
    cursor: pointer;
}

#data-panel {
    width: 98%;
    height: 200px;
    margin: 0px auto;
    padding: 1%;
}
#folder-panel {
    width: 100%;
    height: auto;
    margin: 10px 0px 20px;
}
.folder-wrapper {
    width: 25%;
    height: auto;
    float: left;
    margin: 10px 0px;
}
.folder-wrapper .folder-container{
    position: relative;
    width: 200px;
    height: 35px;
    margin: 0px auto;
    background-color: #fff;
    border-bottom: 2px solid #fff;
}
.folder-container:hover{
    transition-duration: 0.2s;
    cursor: pointer;
    border-bottom: 2px solid #0054A4;
    box-shadow: 0px 0px 2px 0px #c6c6c6;
}
.folder-container .folder-box{
    width: 100%;
    height: 100%;
}
.folder-box .folder-icon{
    width: 20px;
    height: auto;
    float: left;
    padding: 7.5px;
}
.folder-box .folder-name{
    line-height: 35px;
    width: 130px;
    float: left;
    overflow: hidden;
}
.folder-container .folder-setting {
    position: absolute;
    display: block;
    width: 15px;
    height: auto;
    padding: 5px;
    margin: 5px;
    right: 0px;
}

#file-panel {
    width: 100%;
    height: auto;
}
.file-wrapper {
    width: 25%;
    height: auto;
    float: left;
    margin: 10px 0px;
}
.file-container{
    position: relative;
    width: 200px;
    height: 130px;
    margin: 0px auto;
    background-color: #fff;
    border-bottom: 2px solid #fff;
}
.file-container:hover{
    transition-duration: 0.2s;
    cursor: pointer;
    border-bottom: 2px solid #0054A4;
    box-shadow: 0px 0px 2px 0px #c6c6c6;
}
.file-container .file-setting{
    position: absolute;
    width: 15px;
    height: auto;
    margin: 10px;
}
.file-box{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.file-box .file-icon{
    width: 45px;
    height: auto;
    display: block;
    margin: 20px auto 10px;
}
.file-box .file-name{
    line-height: 35px;
    width: 90%;
    max-width: 96%;
    height: 35px;
    overflow: hidden;
    text-align: center;
    margin: 0px auto;
}
.file-box .file-type {
    width: 96%;
    overflow: hidden;
    text-align: center;
    margin: 0px auto;
    color: #c6c6c6;
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
}

/**********************
*** Album Panel CSS ***
**********************/

.album-panel{
    width: 20%;
    height: auto;
    float: left;
    margin-top: 10px;
}

.album-wrapper {
    position: relative;
    width: 170px;
    height: auto;
    margin: 0px auto;
    border-bottom: 2px solid #fff;
}
.album-wrapper:hover{
    transition-duration: 0.3s;
    cursor: pointer;
    border-bottom: 2px solid #0054A4;
    box-shadow: 0px 0px 2px 0px #c6c6c6;
}
.album-wrapper .album-box {
    width: 100%;
    height: 140px;
    background-color: #fff;
}
.album-wrapper .album-setting {
    position: absolute;
    width: 15px;
    height: auto;
    margin: 10px;
}
.album-wrapper .album-setting:hover{
    cursor: pointer;
}
.album-box .album-icon {
    width: 30%;
    height: auto;
    display: block;
    padding-top: 35px;
    margin: 0px auto 15px;
}
.album-box .album-info {
    width: 96%;
    height: auto;
    margin: 5px auto;
    text-align: center;
    color: #c6c6c6;
    font-size: 12px;
}
.album-name {
    width: 96%;
    height: 35px;
    line-height: 17px;
    text-align: center;
    margin: 0px auto;
    padding: 10px 0px;
	overflow: hidden;
}
.photo-panel {
    position: relative;
    width: 20%;
    height: auto;
    float: left;
}
.photo-container {
    width: 170px;
    height: 170px;
    background-color: #333;
    margin: 10px auto;
    background-position: center;
    background-size: cover;
}
.photo-container:hover{
    cursor: pointer;
}

#lightbox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(198, 198, 198, 0.85);
    z-index: 3;
    display: none;
}

#popContainer {
    position: fixed;
    width: 300px;
    height: auto;
    min-height: 100px;
    z-index: 4;
    left: calc((100vw/2) - 150px);
    top: 100px;
    background-color: #fff;
    border-top: 3px solid #0054A4;
    display: none;
}
.folderEdit {
    width: 90%;
    height: auto;
    margin: 10px auto;
}

.popTitle {
    width: auto;
    height: auto;
    text-align: center;
    color: #0054A4;
    padding: 10px 0px 0px;
    text-transform: capitalize;
}

.close {
    width: auto;
    height: auto;
    text-align: right;
    padding: 5px 10px 0px 0px;
    font-size: 10px;
    color: #333;
    cursor: pointer;
}

/** Blog Page CSS **/
.blog-wrapper {
    width: 70%;
    height: auto;
    background-color: #fff;
    padding: 25px 5%;
    margin: 0px auto 15px;
}
.blog-wrapper .blog-image {
    width: auto;
    max-width: 90%;
    height: 250px;
    margin: 10px 0px;
}
.blog-wrapper .blog-title {
    width: auto;
    height: auto;
    text-transform: capitalize;
    margin: 0px 0px 5px;
    color: #0054A4;
    text-align: center;
}
.blog-wrapper .blog-info {
    width: auto;
    height: auto;
    text-align: right;
    font-size: 12px;
    color: #b1b1b1;
    margin: 10px 0px;
}
.blog-wrapper .blog-article{
    text-align: justify;
}
.blog-wrapper .blog-author{
    text-align: center;
    color: #c4c4c4;
    font-size: 12px;
    margin: 0px 0px 10px;
}
/*************************
*** User Panel CSS **
**************************/
.user-managment-panel{
    width: 25%;
    height: auto;
    float: left;
    margin-top: 10px;
}
.user-managment-wrapper{
    width: 200px;
    height: auto;
    background-color: #fff;
    overflow: hidden;
    margin: 0px auto;
    padding: 5px 0px 15px;
    border-bottom: 2px solid #fff;
}
.user-managment-wrapper:hover{
    transition-duration: 0.3s;
    cursor: pointer;
    border-bottom: 2px solid #0054A4;
    box-shadow: 0px 0px 2px 0px #c6c6c6;
}
.user-profile-image{
    width: 160px;
    height: 160px;
    display: block;
    margin: 10px auto;
    border-radius: 130px;
}
.user-profile-name{
    width: auto;
    height: auto;
    padding: 5px;
    color: #0054A4;
    text-align: center;
}
.user-profile-type{
    width: auto;
    height: auto;
    color: #c6c6c6;
    line-height: normal;
    text-align: center;
    font-size: 11px;
    text-transform: capitalize;
}

/*************************
*** Calendar Panel CSS **
**************************/
#calendar-panel{
    width: 85%;
    height: auto;
    margin: 0px auto 20px;
}
#calendar-controls-panel{
    width: 100%;
    height: 40px;
}
#calendar-controls-panel li{
    width: 33.3%;
    float: left;
    display: block;
    line-height: 40px;
    font-size: 14px;
    color: #0054A4;
}
#calendar-controls-panel li:hover{
    cursor: pointer;
}
#calendar-previous{
    text-align: left;
}
#calendar-month{
    text-align: center;
}
#calendar-next{
    text-align: right;
}
#calendar-days-panel{
    width: 100%;
    height: 40px;
}
#calendar-days-panel li{
    width: calc(100%/7);
    height: 100%;
    text-align: center;
    display: block;
    float: left;
    color: #f4f4f4;
    line-height: 40px;
    background-color: #0054A4;
}
#calendar-dates-panel{
    width: 100%;
    height: auto;
    position: relative;
}
.calendar-dates-wrapper{
    position: relative;
    width: calc(100%/7);
    height: 100px;
    background-color: #fff;
    display: block;
    float: left;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.calendar-dates-wrapper:hover{
    background-color: #f1f8ff;
    transition-duration: 0.2s;
}
.calendar-date{
    width: auto;
    height: auto;
    padding: 5px 5px 0px 5px;;
    font-size: 12px;
    color: #333333;
    text-align: right;
}
.date-event-wrapper{
    width: 90%;
    height: 65px;
    overflow: hidden;
    margin: 0px auto;
}
.date-event-wrapper .date-event-green{
    background-color: #28A599;
}
.date-event-wrapper .date-event-orange{
    background-color: #eaaa1a;
}
.date-event-wrapper .date-event-blue{
    background-color: #3570d0;
}
.date-event-wrapper .date-event-purple{
    background-color: #965add;
}
.date-event-wrapper .date-event-brown{
    background-color: #b5641e;
}
.date-event-wrapper .date-event-red{
    background-color: #ba1b1b;
}
.date-event-wrapper .date-event-pink{
    background-color: #ef12bc;
}
.date-event-count{
    position: absolute;
    width: auto;
    padding: 2px 4px;
    top: 11px;
    left: 10px;
    background-color: #ff5762;
    font-size: 9px;
    border-radius: 4px;
    line-height: normal;
    color: #fff;
}
.date-event-wrapper .date-event-name{
    width: auto;
    height: 19px;
    text-align: left;
    padding: 0px 5px;
    margin-bottom: 3px;
    font-size: 11px;
    color: #fff;
    overflow: hidden;
    line-height: 19px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#calendar-detail-panel{
    position: relative;
    width: 85%;
    height: auto;
    margin: 10px auto;
}
.calendar-detail-title{
    width: 100%;
    height: auto;
    margin: 20px 0px;
    text-align: center;
    color: #0054A4;
}
.event-wrapper{
    position: relative;
    width: 80%;
    height: auto;
    background-color: #fff;
    overflow: hidden;
    margin: 0px auto 15px;
}
.event-delete{
    width: 20px;
    height: auto;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    display: none;
}
.event-delete-id{
    display: none;
}
.event-title{
    width: 100%;
    height: auto;
    text-align: center;
    color: #0054A4;
    margin-top: 10px;
    padding: 15px 0px;
}
.calendar-subtitle{
    color: #acacac;
}
.event-date {
    text-align: center;
}
.event-info{
    width: 40%;
    height: 20px;
    margin: 10px auto;
}
.event-info li{
    width: 50%;
    height: 100%;
    text-align: center;
    display: block;
    float: left;
    font-size: 13px;
    color: #595959;
}
.event-description{
    width: 70%;
    height: auto;
    text-align: center;
    margin: 10px auto 25px;
}
#calendar-edit-panel{
    position: absolute;
    z-index: 101;
    top: 100px;
    width: 500px;
    height: auto;
    margin-left: 50%;
    padding-bottom: 20px;
    transform: translateX(-50%);
    background-color: #fff;
    border-top: 3px solid #0054A4;
    display: none;
}
.edit-title{
    width: auto;
    height: auto;
    margin: 20px 0px 10px;
    text-align: center;
    color: #0054A4;
    text-transform: capitalize;
}
.edit-form{
    width: 90%;
    height: auto;
    margin: 0px auto;
}
.form-subbox-left{
    width: 45%;
    height: auto;
    float: left;
}
.form-subbox-right{
    width: 45%;
    height: auto;
    float: right;
}
.login-title{
    width: auto;
    text-align: center;
    color: #0054A4;
    margin: 15px 0px;
}
.login-panel {
    position: relative;
    width: 96%;
    max-width: 500px;
    height: auto;
    margin: 0px auto;
    background-color: #f4f4f4;
}
.login-form {
    width: 80%;
    height: auto;
    padding: 20px 0px 35px;
    margin: 0px auto;
}
.space {
    height: 100%;
    height: 15px;
}
.forgot-password {
    text-align: center;
    margin-top: 10px;
}
#lightbox{
    position: fixed;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background-color: rgba(198, 198, 198, 0.95);
}
.edit-panel {
    position: absolute;
    z-index: 101;
    top: 100px;
    width: 500px;
    height: auto;
    max-height: 70vh;
    overflow: auto;
    margin-left: 50%;
    padding-bottom: 20px;
    transform: translateX(-50%);
    background-color: #fff;
    border-top: 3px solid #0054A4;
    display: none;
}
.edit-panel-message{
    width: auto;
    height: auto;
    text-align: center;
    padding: 10px 0px;
    color: #fff;
    margin: 5px 0px;
    display: none;
}
.message-success{
    background-color: #18b224;
}
.message-error{
    background-color: #d35050;
}
.edit-panel .form-delete{
    background-color: #e24747;
}
.edit-panel .form-delete:active{
    background-color: #cc2e2e;
}
#folder-edit-panel {
    display: none;
}


/*************************
*** Application Panel CSS **
**************************/
#application-wrapper {
    width: 100%;
    height: auto;
    margin: 0px auto;
}
#application-panel{
    width: 100%;
    height: auto;
}
#application-panel tr th{
    width: 20%;
    height: 40px;
    font-size: 11px;
    text-align: left;
    vertical-align: bottom;
    padding-bottom: 7px;
    color: #595959;
}
#application-panel tr td{
    width: 20%;
    height: 40px;
    background-color: #fff;
    overflow: hidden;
    text-transform: capitalize;
}
#application-panel tr td p{
    width: auto;
    height: auto;
    margin: 0px;
    font-size: 12px;
    line-height: 40px;
    padding-left: 10px;
    border-right: 1px solid #f4f4f4;
    border-bottom: 1px solid #e8e8e8;
}

#application-panel a{
    font-size: 12px;
    color: #0054a4;
}

#application-panel .application-delete{
    color: #e85a5a;
    cursor: pointer;
}

#user-image-preview {
    width: 130px;
    height: 130px;
    border-radius: 130px;
    background-image: url(../res/images/person.svg);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    background-color: #f4f4f4;
    margin: 0px auto 10px;
    cursor: pointer;
}
#user-image-preview img{
    width: 100%;
    height: 100%;
    border-radius: 130px;
    display: none;
}

.image-preview-info {
    text-align: center;
    font-size: 9px;
    color: f4f4f4;
    line-height: normal;
}

.album-id {
    display: none;
}

#loader {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(244, 244, 244, 0.9);
    background-image: url(../res/images/loader.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    display: none;
}

.user-id {
    display: none;
}

.blog-delete {
    width: auto;
    height: 35px;
    background-color: #333333;
    color: #f4f4f4;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    display: none;
}
.blog-id {
    display: none;
}

.photo-delete {
    width: 170px;
    height: 170px;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    left: 50%;
    background-color: rgba(51, 51, 51, 0.81);
    text-align: center;
    line-height: 170px;
    color: #f4f4f4;
    display: none;
    cursor: pointer;
}

#photos-upload-form {
    display: none;
}

.photo-id {
    display: none;
}

.announcement-left-box {
    width: 60%;
    height: auto;
    float: left;
}

.announcement-right-box {
    width: 40%;
    height: 300px;
    float: right;
    background-color: #fff;
    border-top: 2px solid #0054A4;
}

.announcement-wrapper {
    width: 95%;
    height: auto;
    margin: 0px auto 20px;
    background-color: #fff;
    border-top: 2px solid #0054A4;
}
.announcement-wrapper:hover{
    border-top: 2px solid #0054A4;
}

.announcement-title {
    width: auto;
    height: auto;
    padding: 20px 20px 5px;
    color: #0054A4;
}

.announcement-article {
    width: auto;
    height: auto;
    padding: 0px 20px 10px;
    margin-top: 10px;
    white-space: pre-wrap;
}
.announcement-link{
    width: auto;
    height: auto;
    padding: 10px 20px;
    color: #0054A4;
}

.announcement-image {
    width: auto;
    max-width: 90%;
    height: 250px;
    padding: 10px 20px;
}

.announcement-info {
    width: auto;
    height: auto;
    padding: 10px 20px;
    text-align: right;
    color: #b1b1b1;
    font-size: 11px;
}

.announcement-delete {
    width: auto;
    height: 35px;
    background-color: #333333;
    color: #f4f4f4;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    display: none;
}

.announcement-id {
    display: none;
}

.application-id {
    display: none;
}

#file-upload-form {
    display: none;
}



.announcement-video {
    width: 95%;
    height: 360px;
    margin: 0px auto;
    display: block;
}

#calendar-current-month {
    display: none;
}

#calendar-current-year {
    display: none;
}

#message-panel {
    width: 95%;
    height: 450px;
    margin: 0px auto;
    background-color: #ffffff;
}

#message-user-Panel {
    width: 25%;
    height: 100%;
    float: left;
    overflow-y: auto;
    background-color: #333333;
}

#message-chat-panel {
    width: 75%;
    height: 100%;
    float: right;
    overflow: auto;
}

#message-user-list {
    width: 100%;
    height: auto;
}

.message-user-wrapper {
    width: 100%;
    height: 60px;
    background-color: transparent;
    border-bottom: 1px solid #4e4e4e;
    overflow: hidden;
}

.message-user-wrapper:hover{
    cursor: pointer;
    background-color: #212121;
}

.message-user-wrapper img{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    display: block;
    float: left;
    padding: 10px;
}
.message-user-wrapper h4{
    margin-top: 15px;
    font-size: 15px;
    color: #d8d8d8;
}

.message-user-wrapper p{
    font-size: 11px;
    color: #747474;
}

#user-chat-messages {
    width: 100%;
    height: calc(85% - 90px);
    padding: 10px 0px;
    overflow: auto;
}

#chat-input-panel {
    width: 100%;
    height: 15%;
    background-color: #ffffff;
    box-shadow: 0px -1px 15px -1px #D8D8D8;
}

#message-input {
    width: 88%;
    height: 65%;
    margin: 12px 0px 0px 10px;
    float: left;
    border: none;
    background-color: #fff;
}

#message-send {
    width: 10%;
    height: 100%;
    background-color: #fff;
    color: #06a291;
    margin: 0px;
    font-weight: 400;
}
.chatDate {
    clear: both;
    text-align: center;
}

.chatDate span {
    background-color: #d5e9f5;
    padding: 3px 25px;
    color: #333;
    border-radius: 20px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
}
.messange-sent {
    display: table;
    width: auto;
    max-width: 50%;
    height: auto;
    float: right;
    padding: 10px;
    margin: 7px 15px 0px 0px;
    text-align: left;
    background-color: #0054A4;
    color: #F4F4F4;
    clear: both;
}
.messange-sent span{
	float: right;
    font-size: 10px;
    line-height: normal;
    margin-top: 3px;
    color: #5BAFFF;
}
.messange-received {
    display: table;
    width: auto;
    max-width: 50%;
    height: auto;
    padding: 10px;
    float: left;
    margin: 8px 0px 0px 15px;
    background-color: #f4f4f4;
    clear: both;
}
.messange-received span{
	float: left;
    font-size: 10px;
    line-height: normal;
    margin-top: 3px;
    color: #B9B9B9;
}

.chat-to {
    display: none;
}
.chat-from {
    display: none;
}

.today-calendar-title {
    width: 96%;
    height: auto;
    margin: 15px auto;
    color: #0054A4;
}

#chat-input-send {
    width: 100%;
    height: 100%;
}

#current-chat-user {
    position: relative;
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0px 2px 15px 0px #D8D8D8;
}

#current-chat-image {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #fff;
    margin: 10px;
    float: left;
    display: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#current-chat-name {
    width: auto;
    height: auto;
    margin: 20px 0px 0px 10px;
    color: #333333;
    font-size: 15px;
    display: none;
}

#current-chat-position {
    font-size: 11px;
    color: #adadad;
    display: none;
}

.report-wrapper {
    width: 25%;
    height: auto;
    float: left;
    margin: 10px 0px;
}

.report-container {
    position: relative;
    width: 200px;
    height: 130px;
    margin: 0px auto;
    background-color: #fff;
    border-bottom: 2px solid #fff;
}

.report-container:hover {
    transition-duration: 0.2s;
    cursor: pointer;
    border-bottom: 2px solid #0054A4;
    box-shadow: 0px 0px 2px 0px #c6c6c6;
}

.report-setting {
    position: absolute;
    width: 20px;
    height: auto;
    right: 0px;
    margin: 10px;
    display: none;
}

.report-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.report-icon {
    width: 45px;
    height: auto;
    display: block;
    margin: 30px auto 10px;
}

.report-name {
    line-height: 35px;
    width: 90%;
    max-width: 96%;
    height: 35px;
    overflow: hidden;
    text-align: center;
    margin: 0px auto;
}
.report-id{
    display: none;
}

#delete-event-admin {
    width: 25px;
    height: auto;
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.announcement-edit {
    width: auto;
    height: auto;
    padding: 5px 20px;
    background-color: #0054A4;
    color: #f4f4f4;
    text-align: center;
    cursor: pointer;
}

#old-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(244, 244, 244, 0.9);
    background-image: url(../res/images/loader.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    display: none;
}

.today-calendar-event {
    width: 95%;
    height: auto;
    margin: 0px auto;
    padding: 10px 0px;
    border-bottom: 1px solid #c6c6c6;
}

.dashboard-wrapper {
    width: 400px;
    height: auto;
    background-color: #fff;
    float: left;
    margin: 10px;
}

.dashboard-wrapper-title {
    width: auto;
    height: auto;
    margin: 0px auto;
    padding: 15px 15px;
    font-size: 14px;
    background-color: #0054A4;
    color: #f4f4f4;
}

.dashboard-content-panel {
    width: 90%;
    height: auto;
    margin: 0px auto;
}
.dashboard-content-panel tr{
    border-bottom: 1px solid #f4f4f4;
}

.dashboard-product-name {
    width: 70%;
    height: auto;
    padding: 5px 0px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}

.dashboard-product-view {
    color: #40b431;
    font-size: 13px;
}

.dashboard-product-code {
    height: auto;
    padding: 5px 0px;
    font-size: 14px;
    color: #e05757;
}

#uploadLoader {
    position: absolute;
    z-index: 101;
    top: 100px;
    width: 250px;
    height: 100px;
    overflow: auto;
    margin-left: 50%;
    padding-bottom: 20px;
    transform: translateX(-50%);
    background-color: #fff;
    border-top: 3px solid #0054A4;
    display: none;
    background-image: url(../res/images/loader.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 30%;
}

#application-view {
    width: 100%;
    height: auto;
}

#application-view h4{
    padding: 5px 15px;
    color: #0054A4;
    font-weight: 400;
}
#application-view p{
    padding: 5px 15px;
}
#application-view-wrapper {
    width: 100%;
    height: auto;
    display: inline-table;
}
#application-view-wrapper li {
    width: 50%;
    height: auto;
    display: inline-block;
}