html {
    font-size: 62.5%;
    height:100%;
}

.body {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     font-size: 1.6rem;
     font-weight: 400;
     font-style: normal;
     color: #f1f1f1;
     line-height: normal;
     background: #f2f2f2;
     overflow-x: hidden;
     font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-perspective-origin: 0 0;
}

.body{
    min-height: 100%;
    background: linear-gradient(270deg, rgba(21,37,62,1) 0%, rgba(28,46,74,1) 100%); /* w3c */
}
.body__wrapper{
    padding-top: 20px;
    padding-bottom: 120px;
}
.desktop .body__wrapper{
    padding-top: 120px;
}

.archive .body__wrapper{
    padding-top: 120px !important;
}

.logout-btn{
    position: absolute;
    top:100px;
    right:100px;
}
.archive-warn{
    position: absolute;
    top: 20px;
    background: #d0374b;
    border-radius: 5px;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 20px;
}
.archive-warn a{
    color:#fff;
    border-bottom: 1px solid #eee;
}
.mobile .archive-warn{
    width:96%;
}

 .btn {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    border-radius: 22px;
    padding: 0 20px;
    overflow: hidden;
    color:#fff;
    background: #1261f2;
    transition: 150ms;
 }
 .btn:hover {
    box-shadow: inset 0 0 200px rgba(255, 255, 255, .1);
 }
.info-box{
                                    padding: 20px;
                                    background: #2b3f5d;
                                    font-size: 14px;
                                    background: rgba(255,255,255,.02);
                                    border: 1px solid #33445f;
                                    margin-bottom: 20px;
                                    color: #71839e;
                            }

.form__row{
    margin-bottom:20px;
}
.form__row-title{
    display: none;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: bolder;
        color: #677fa2;
        margin-bottom:4px;
        margin-left:20px;
}
    .edit-form .form__row-title{
        display: block;
    }
.field{
    min-height: 44px;
    border-radius: 22px;
    background: rgba(0,0,0,0.15);
    overflow: hidden;
    border-bottom: 1px solid #323d56;
}


.field select{
    width: 100%;
    height: 44px;
    padding: 0 20px;
    text-indent: 12px;
    background: transparent;
    border: 0;
    color: #677892;
}

.field__loading{
    background-image: url(/img/loading.gif);
    background-position:  94% 50%;
    background-repeat: no-repeat;
}

.field input, .field textarea{
    color: #677892;
    width: 100%;
    min-height: 44px;
    padding: 0 20px;
    background: transparent;
}
.field textarea{
    min-height: 120px;
    border:0;
    padding:14px;
    outline:none;
}
.field input::placeholder, .field textarea::placeholder {
    color: #435b82;
    opacity: 1; /* Firefox */
}
.field input:read-only{
    background: #38465a;
}
.field input[type=file]{
    padding-top: 10px;
}
.field__name-value input, .field__name-value select{
                                    min-height: 44px;
                                    width: 50%;
                                    float: left;
                                    border-left: 1px solid #273c5b;
                                    text-align: center;
                            }
.due-to-date{
    background: #af4444;
    padding: 1px 5px;
    border-radius: 50px;
}

.box{
    border-radius: 4px;
    background: rgba(53, 77, 113, 0.5);
    box-shadow: -3px -3px 5px rgba(82,95,127,.04);
    color: #fff;
}
.box__header{
    padding: 60px 20px 20px 20px;
    text-align: center;
    text-transform: uppercase;
    background: rgba(255,255,255,.02);
    position: relative;
    border-bottom: 1px solid #33445f;
}
.box__message{
    display: block;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #617ca5;
}
.box__header-item{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}
.mobile .box__header-item{
    position: static;
    transform: initial;
    margin-top: 20px;
}
.mobile .hide-on-mobile{
    display: none;
}
.mobile .show-on-mobile{
    display: block !important;
}
.box__header-item--right{
    right:20px;
}
.box__header-item--left{
    left:20px;
}
.box__header-circle{
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: #273b5a;
    position: absolute;
    border-radius: 40px;
    top: 0%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.box__header-circle img{
    max-width: 60%;
    vertical-align: middle;
}
.box__header h4{
    display: inline;
    font-size: 20px;
    font-weight: 500;
    border-bottom: 2px solid #1261f2;
}
.box__wrapper{
    padding: 30px 24px;
}
 .form__message {
     margin: 2px 0;
     padding: 10px 14px;
     border-left: 2px solid #1261f2;
     color: #f1f1f1;
     font-size: 14px;
 }
 .form__message ul li{
     padding: 2px 0;
 }
 .form__message--error {
     border-color: #fd8585;
     color: #e07777;
 }

 .dashboard{
    position: relative;
    z-index: 1;
}
.dashboard__title{
    display: inline-block;
    margin-bottom: 60px;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 100;
    color: #fff;
    border-bottom: 1px solid #1261f2;

}
.mobile .dashboard{
position: static;
}
.dashboard .box{
    margin-bottom:40px;
}
.dashboard__nav{
position: absolute;
left:-140px;
top:0;
border-radius:10px;
background: rgba(53, 77, 113, 0.5);
font-size: 1.6rem;
overflow: hidden;
z-index: 99;
}
.dashboard__nav--compact{
    position: fixed;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    border-radius: 0;
    background: #273c5b;
    border-top: 1px solid #2c466d;
}

.nav{
    font-size:0;
}
.nav__item{
    padding: 20px;
    color: #fff;
    display: block;
    width: 120px;
    max-width: 120px;
    text-align: center;
    border-bottom: 1px solid #33445f;
    opacity: .5;
    overflow: hidden;
    transition: opacity 150ms;
}
.dashboard__nav--compact .nav__item{
    padding: 8px;
    width:20%;
    display: inline-block;
    }
.nav__item:not(.nav__item--active):hover{
    opacity: 1;
    background: rgba(255,255,255,.02);
}
.nav__item--active{
    opacity: 1;
    background: #1261f2;
}
.nav__item img{
    max-width: 44%;
}
.nav__item span{
    margin-top:10px;
    display: block;
    text-transform: uppercase;
    font-size: 12px;
}
.dashboard__nav--compact .nav__item span{
    font-size: 10px;
}

.table{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.table__message{
    display: block;
    padding: 10px;
    font-size: 14px;
    color: #6e82a0;
    text-align: center;
}
.table__item{
    width:100%;
    font-size: 14px;
}

.table__item tr.green td:first-child{
    border-left: 3px solid #3ea23e;
}
.table__item tr.red td:first-child{
    border-left: 3px solid #c33d3d;
}
.table__item td, .table__item th{
    text-align: center;
    padding:14px;
}
.mobile .table__item td, .mobile .table__item th{
    min-width: 100px;
    overflow: hidden;
}

.table__item th{
    border-bottom: 1px solid #2e4669;
    font-weight: bolder;
}
.table__item tr:nth-child(even), .table__item th{
    background: rgba(255,255,255,.02);
}
   .table__item th .mi{
            margin-right:1px;
            font-size: 20px;
            vertical-align: middle;
            color: #435b80;
        }
        .table__item th.sort-active .mi{
            color:#f1f1f1;
        }
.link{
    color: #7f9bce;
    border-bottom: 1px solid #3a5588;
}
.link:hover{
    border-color: transparent;
}

.item-info{
                    margin-bottom:20px;
                }
                .item-info h6{
                    text-transform: uppercase;
                    font-size: 16px;
                    letter-spacing: 0px;
                    font-weight: bolder;
                    line-height: 21px;
                    color: #677fa2;
                }
                .item-info span{
                        font-size: 22px;
                        font-weight: 300;
                        display: block;
                        margin-top: 8px;
                }