body,table {
    color:black;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size:13px;

}
* {
    outline: 0!important;
}
body {
    background-color:white;
    margin:0;
    padding:0;
}

table {
    background-color:white;
    border-spacing:0;
    border-collapse:collapse;
    width:100%;
}
table th {
    font-weight:bold;
    text-align:left;
    font-size:13px;
    /*    border-bottom:solid 2px #ccc; */
    text-transform: uppercase;
}
th {
    padding:8px 8px;
    color:#666
}

h3 {
    padding-top:0px;
    padding-bottom:10px;
    color: #313131;
    font-size:16px;
}

td.missing {
    font-weight:bold;
    color:black;
}

td i {
    padding-right:2px;
}

a {
    text-decoration:none;
    color:#337ab7;
}
.number {
    text-align:right;
}

tr:nth-child(odd) td {
    background-color: #f7fafc;
}

td {
    color:#797979;
    background-color:white;
    padding:8px 8px;
    border-top:solid 1px #e4e7ea;
}

.footer {
    text-align:center;
    padding:20px;
    color:#797979;
    background-color:white;

}

/* ------------------------------- */

.content {
    background-color:#edf1f5;
    padding:20px;
}

.box {
    background-color:white;
    padding:10px;
    margin-bottom:20px;
    color:#666;
    /* box-shadow: 0px 2px 3px #d4d7da; */
}

@media only screen and (max-height: 768px) {
    td, th {
        padding: 5px 5px;
    }

    .content {
        padding-top: 5px;
        padding-bottom: 2px;
    }
}

@media only screen and (max-width: 1024px) {
    .content {
        padding-left:0px;
        padding-right:0px;
    }
}



/* ------------------------------- */

.row {
    clear: both;
    box-sizing: border-box;
    margin-left:-15px;
    margin-right:-15px;
}
.modal-nomargin .row {
    margin-left:0px;
    margin-right:0px;

}
.row:before {
    content: " ";
}

.row:after {
    clear: both;
    content: " ";
    display:table;
}

.b-r {
    border-right: 1px solid #e4e7ea;
}
.col-md-3, .col-md-6, .col-md-12 {
    box-sizing: border-box;
    float:left;

    position: relative;
    min-height: 1px;
    color: #8d9ea7;
    padding-left: 15px;
    padding-right:15px;

}



.col-md-3 {
    width: 25%;
}

.col-md-6 {
    width: 50%;
}
.col-md-12 {
    width:100;
}
hr {
    color: transparent;
    background-color:transparent;
    border: solid 1px #e4e7ea;
    border-bottom: none;
}

.row p {
    margin:0;
    margin-top:5px;

}
.col-md-3:before, .col-md-6:before, .col-md-12:before {
    clear:both;
}

.col-md-3 strong, .col-md-6 strong, .col-md-12 strong {
    color:#313131;
}

/* TODO: col responsive */



/* ------------------------------- */


.toolbar .left .toolbar .right {
    box-sizing: border-box;
    position: relative;
    min-height: 1px;
    color: #8d9ea7;
    padding-left: 15px;
    padding-right:15px;
}

.toolbar {
    clear:both;
    box-sizing:border-box;
    background-color:white;
    padding:15px 15px 8px 15px;
}
.toolbar h4 {
    line-height: 24px;
    padding:0px;
    margin:0px;
    font-size:14px;
    margin-top:6px;
}

.toolbar:before {
    content: " ";
}

.toolbar:after {
    clear: both;
    content: " ";
    display:table;
}
.toolbar .left {
    float:left;
}
.toolbar .right {
    float:right;
}
button {
    padding:8px;
    background-color:#41b3f9;
    color:white;
    font-size:13px;
    border:none;
    border-radius:3px;
}
button.cancel {
    background-color:#99a0b0;
    margin-right:10px;
}
button:hover {
    filter: brightness(120%);

}
button a {
    color:white
}
button i {
    padding-right:2px;
}
/* ------------------------------- */


.navigation {
    background-color:#000033;
    color:white;
    line-height:50px;
    padding-left:20px;
    justify-content: space-around;
    display:flex;
    flex-direction:row;


    background: -moz-linear-gradient(70deg, rgba(0,0,51,1) 0%, rgba(24,34,91,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(70deg, rgba(0,0,51,1) 0%, rgba(24,34,91,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(70deg, rgba(0,0,51,1) 0%,rgba(24,34,91,1) 100%);

}

.navigation a {
    color:white;
    text-decoration:none;
}


.navigation i {
    font-size:15px;
    padding-right:2px;
}

.navigation h2 {
    text-align:center;
    font-weight: normal;
}
.navigation>* {
    justify-content: space-around;
    margin: auto;
    flex:1;
    white-space: nowrap;
}


/* -------------------------------------- */

.modal {
    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* no scroll  */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto 0 auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 600px; /* Could be more or less, depending on screen size */
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.modal-footer {
    padding-top:10px;
}
.modal-footer:before, .modal-footer:after {
    display: table;
    content: " ";
    clear:both;
}

.modal-footer .left {
    float:left;
    height:32px;
    line-height: 32px;
}
.modal-footer .right {
    float:right;
    height:32px;
}


@keyframes animatetop {
    from {margin-top:0%; opacity:0}
    to {margin-top:15%; opacity:1}
}

/* -------------------------------------- */

.full-modal {
    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* no scroll  */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */
.full-modal-content {
    background-color: #fefefe;
    margin: 50px auto 0 auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
    animation-name: animatetop2;
    animation-duration: 0.2s;
}

.full-modal-footer {
    padding-top:10px;
}
.full-modal-footer:before, .modal-footer:after {
    display: table;
    content: " ";
    clear:both;
}

.full-modal-footer .left {
    float:left;
    height:32px;
    line-height: 32px;
}
.full-modal-footer .right {
    float:right;
    height:32px;
}


@keyframes animatetop2 {
    from {margin-top:0%; opacity:0}
    to {margin-top:50px; opacity:1}
}


/* The Close Button */
.close {
    color: #666;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    filter: brightness(120%);
    cursor: pointer;
}

.modal h2 {
    margin:0px;
    padding:0px;
    margin-bottom:15px;
}
.modal-footer {
    text-align: right;
}

input {
    padding:5px;
}

/* ---------------------------------------------- */


.sk-bg {
    display: block;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
.sk-content {
    z-index: 5;
    top:50%;
    position:absolute;
    left:50%;
    margin-left:-200px;
    width:400px;
}

.sk-content h2 {
    font-weight:normal;
    color:white;
    text-align: center;
}
.sk-folding-cube {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
    transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
    transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
    transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    } 25%, 75% {
          -webkit-transform: perspective(140px) rotateX(0deg);
          transform: perspective(140px) rotateX(0deg);
          opacity: 1;
      } 90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    } 25%, 75% {
          -webkit-transform: perspective(140px) rotateX(0deg);
          transform: perspective(140px) rotateX(0deg);
          opacity: 1;
      } 90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
}

/* ------------------------------------- */

.screenReaderText {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* tabs -------------------------------- */

.nav {
    padding-left:0px;
    margin-bottom:0px;
    list-style:none;
}
.nav:before, .nav:after {
    display: table;
    content: " ";
}
.customTab {
    border-bottom:2px solid #f7fafc;
}

ul,ol {
    margin-top:0;
}
.customtab li a:hover {
    background-color:#41b3f9;
    color:white !important;
}
.nav-tabs>li {
    float:left;
    margin-bottom:-1px;
}
.nav>li {
    position:relative;
    display:block;
}
.customtab li.active a {
    color:#41b3f9;
    border:0;
    margin-bottom:-1px;
    border-bottom:2px solid #41b3f9;
}

.nav-tabs>li>a {
    margin-right:2px;
    line-height:1.42;
    border-radius: 0;
    color: #263238;
}
.nav>li>a {
    position:relative;
    display:block;
    padding:10px 15px 5px 15px;
    font-size:14px;
}