/* ========== Toggle Styles ========== */
    * {
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    html, body {
        width: 100%;
        height: 100%;

        padding: 0;
        margin: 0;
    }
    body {
        font-family: 'Ubuntu';
        font-size: 18px;
    }
    /* a:visited {
        color: #337ab7;
    } */
    a:hover {
        text-decoration: none !important;
    }
    .full {
        width: 100% !important;
    }
    .half {
        width: 50% !important;
    }
    .mail-button {
        outline: none;
        background: transparent;
        border: none;
    }
    .input[type="radio"], input[type="checkbox"] {
        margin: 0;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
/* ========== Assets ========== */
    .label-link {
        color: #000;
        cursor: pointer;
    }
    .sortable {
        cursor: pointer;
    }
    .enable-select2 {
        height: 30px !important;
    }
    .select2-search__field {
        width: 100% !important;
    }
    .mainContentWrapper,
    .dashboardWrapper {
        background: #e9edf2;
    }
    /* Buttons */
        .btn {
            font-weight: 800;

            overflow: hidden;

            border-width: 0;
            outline: none;
            border-radius: 2px;

            color: #ecf0f1;

            transition: background-color .3s;
        }
        .dockBtn {
            background: transparent;
            color: #fff;

            border: none;
            padding: 0;
            margin: 0 0 0 10px;

            font-size: 1.4em;

            outline: 0;

            display: none;
        }
        .disabledButton {
            padding: 10px 15px;

            font-weight: 800;

            overflow: hidden;

            border-width: 0;
            outline: none;
            border-radius: 2px;

            color: #5f5f5f;

            transition: background-color .3s;
        }
        .blueBtn {
            background: #0065a4
        }
            .blueBtn:hover {
                background-color: #3296C8;
                box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
            }

        .greenBtn {
            background: green;
        }
            .greenBtn:hover {
                background-color: #00cf00;
                box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
            }

        .redBtn {
            background: #bb0000;
        }
            .redBtn:hover {
                background-color: #ff7070;
                box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
            }
    /* Icons */
        .fa-eye,
        .fa-sign-in,
        .fa-envelope-o {
            color: white;
        }
        .fa-square {
            color: #0065A4;
            text-shadow: 1px 1px 1px #ccc;
        }
        .fa-angle-right {
            font-weight: 800;
            font-size: 1.3em;
        }
        .requiredAlert {
            color: #fff;
            background-color: #ed6060;
            font-weight: 800;
            padding: 0px 10px;
            margin-top: 4px;
            font-size: 0.8em;
        }
        .fa-question-circle {
            color: #25b7d3;
        }
        .fa-file-excel-o {
            margin-right: 10px;
        }
    /* Colors */
        .dmsBlue {
            color: #014369;
        }
        .red {
            color: #f44336 !important;
        }
        .yellow {
            color: #fbbc05 !important;
        }
        .green {
            color: #4CAF50 !important;
        }
        .redBg:after {
            background: #ff1313;
        }
        .yellowBg:after {
            background: #f5d700 !important;
        }
        .greenBg:after {
            background: #1af500;
        }
        .greyBg:after {
            background: #ccc;
        }
    /* Scroll Bar */
        ::-webkit-scrollbar {
          width: 0.5em;
          height: 10px;
        }
        ::-webkit-scrollbar-button {
          width: 0px;
          height: 0px;
        }
        ::-webkit-scrollbar-thumb {
          background: #e1e1e1;
          border: 0px none #ffffff;
          border-radius: 44px;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: #ffffff;
        }
        ::-webkit-scrollbar-thumb:active {
          background: #0065a4;
        }
        ::-webkit-scrollbar-track {
          background: #666666;
          border: 0px none #ffffff;
          border-radius: 50px;
        }
        ::-webkit-scrollbar-track:hover {
          background: #666666;
        }
        ::-webkit-scrollbar-track:active {
          background: #333333;
        }
        ::-webkit-scrollbar-corner {
          background: transparent;
        }
    /* Search Bar */
        .searchBtnContainer {
            position:relative;
            display: inline-block;
        }
            .searchBtnContainer input {
                font-size:18px;

                padding:8px 10px 3px 20px;
                display:block;

                width:300px;

                border:none;
                border-bottom:1px solid #757575;
                background: transparent;
            }
            .searchBtnContainer input:focus {
                outline:none;
            }

        .searchBtnContainer .fa-search {
            position: absolute;
            left: 0;
            top: 11px;

            color: #bbb;
        }
        /* Bottom Bars */
        .bar    {
            position:relative;
            display:block;
            width:300px;
        }
            .bar:before, .bar:after {
                content:'';

                height:2px;
                width:0;
                bottom:1px;
                position:absolute;

                background:#0065a4;

                transition:0.2s ease all;
                -moz-transition:0.2s ease all;
                -webkit-transition:0.2s ease all;
            }
            .bar:before {
                left:50%;
            }
            .bar:after {
                right:50%;
            }

        /* Highlighter */
        .highlight {
            position:absolute;
            height:60%;
            width:100px;
            top:25%;
            left:0;

            pointer-events:none;
            opacity:0.5;
        }

        /* Active State */
        input:focus ~ .bar:before,
        input:focus ~ .bar:after {
            width:50%;
        }
        input:focus ~ .highlight {
            -webkit-animation:inputHighlighter 0.3s ease;
            -moz-animation:inputHighlighter 0.3s ease;
            animation:inputHighlighter 0.3s ease;
        }
        /* Input Highlighter */
        @-webkit-keyframes inputHighlighter {
            from {
                background:#5264AE;
            }
            to {
            width:0; background:transparent;
            }
        }
        @-moz-keyframes inputHighlighter {
            from {
                background:#5264AE;
            }
            to {
                width:0; background:transparent;
            }
        }
        @keyframes inputHighlighter {
            from {
                background:#5264AE;
            }
            to {
                width:0; background:transparent;
            }
        }
    /* Select Field */
            /* Style Select Field */
            select {
                font-family: inherit;
                background-color: #fff;

                padding: 4px 0;
                width: 100%;

                font-size: 0.9em;

                color: #797979;

                border: none;
                border-bottom: 2px solid rgba(0,0,0, 0.12);
                border-radius: 3px;
            }
                select:focus {
                  outline: none;
                }

            input {
                font-family: inherit;
                background-color: #fff;

                padding: 4px 0;

                font-size: 0.9em;

                color: #b1b1b1;

                border: none;
                border-bottom: 2px solid rgba(0,0,0, 0.12);
                border-radius: 3px;
            }
            .fake-select {
              font-family: inherit;

              background-color: transparent;

              width: 100%;
              padding: 4px 0;

              font-size: 16px;

              color: rgba(0,0,0, 0.26);

              border: none;
              border-bottom: 1px solid rgba(0,0,0, 0.12);
            }
            .mdl-selectfield label {
              display: none;
            }

            /* Custom Arrow */
            .mdl-selectfield {
              font-family: 'Roboto','Helvetica','Arial',sans-serif;
              position: relative;
            }
                .mdl-selectfield select {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                }
                .mdl-selectfield:after {
                position: absolute;
                top: 1.6em;
                right: 1em;

                /* Down Arrow */
                width: 1px;
                height: 0;

                padding: 0;
                content: '';

                border-left: .25em solid transparent;
                border-right: .25em solid transparent;
                border-top: 0.375em solid rgba(0,0,0, 0.12);
                pointer-events: none;
                }
    /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 10; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        .modal-backdrop.in {
            z-index: 1;
        }
    /* Modal Content/Box */
        .modalContainer {
            width: 10%;
            position: relative;
            top: 50%;
            margin: 0 auto;
            transform: translateY(-50%);
            background: #252525;
            border-radius: 10px;
        }
        .modalContent {
            padding: 20px;
            text-align: center;
        }
        .fa-3x {
            font-size: 5em;
            color: #fff;
        }

        .fa-star-o, .fa-star {
            font-size: 1.3em;
            font-weight: 700;
            cursor: pointer;
        }
    /* Toggle Switch */
        .onoffswitch {
        width: 114px;

        float: left;
        position: relative;

        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select: none;
        }
            .onoffswitch label {
                margin-bottom: 0;
            }

        .onoffswitch-checkbox {
            display: none;
        }
        .onoffswitch-label {
            display: block;
            overflow: hidden;
            cursor: pointer;
        }
        .onoffswitch-inner {
            display: block;

            width: 200%;
            margin-left: -100%;

            transition: margin 0.3s ease-in 0s;
        }
        .onoffswitch-inner:before,
        .onoffswitch-inner:after {
            display: block;
            float: left;

            width: 50%;
            height: 30px;
            padding: 0;

            font-size: 15px;
            font-weight: bold;

            color: white;

            box-sizing: border-box;
            border-radius: 3px;
            line-height: 30px;
        }

        .onoffswitch-inner:before {
            content: "Active";
            padding-left: 14px;
            background-color: #0065A4;
            color: #FFFFFF;
        }

        .onoffswitch-inner:after {
            content: "Disable";

            padding-right: 14px;

            background-color: #EEEEEE;

            color: #999999;
            text-align: right;

            border: 2px solid #0065A4;
            border-radius: 3px;
        }

        .onoffswitch-switch {
            display: block;

            width: 21px;
            margin: 6px;

            background: #FFFFFF;

            position: absolute;
            top: 0;
            bottom: 0;
            right: 80px;

            border: 2px solid #999999;
            border-radius: 17px;

            transition: all 0.3s ease-in 0s;
        }

        .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
        }

        .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
            right: 0px;
        }
    /* Pagination */
        .paginationContainer {
            width: 100%;
            text-align: right;
            padding: 10px 0 0 0;
        }
    /* Advanced Search */
        .filterContainer {
            padding: 5px 15px;
            border-radius: 3px;
            margin: 10px 0;

            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            background-color: #fbfbfb;
            box-shadow: 0 0px 9px rgba(0, 0, 0, .1);;

            width: 100%;
        }
                .filterContainer div {
                    width: 16%;
                    margin: 5px 0;

                    outline: none;
                }
                .filterContainer + div {
                    text-align: right;
                }
                .filterFormContainer input {
                    background-color: #fff;
                    border-color: #e9e9e9;
                    color: #88939C;

                    box-shadow: none;

                    padding: 5px 12px;
                    width: 100%;

                    font-size: 14px;

                    background-image: none;

                    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                }

            .filterFormContainer input {
                background-color: #fff;
                border-color: #e9e9e9;
                color: #88939C;

                box-shadow: none;

                padding: 5px 12px;
                width: 100%;

                font-size: 14px;

                background-image: none;

                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            }

        .dateFilterContainer input {
            background-color: #fff;
            border-color: #e9e9e9;
            color: #797979;

            padding: 5px 12px;
            width: 48%;

            font-size: 14px;

            background-image: none;

            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }

        .filterCheckboxContainer label {
            font-weight: normal;
            color: #88939C;
            margin: 5px 0;
        }
    /* Table */
        .tableContainer {
            padding: 15px 15px;
            border-radius: 3px;

            background-color: #fbfbfb;
            box-shadow: 0 0px 9px rgba(0, 0, 0, .1);;

            width: 100%;
        }
        .tableContent {
            overflow-x: auto;
        }
        .tableList {
            border-collapse: collapse;
            table-layout: fixed;

            text-align: left;
            font-size: 0.8em;

            color: #525252;

            margin-bottom: 15px;
            width: 190%;
        }
            .tableList th {
                font-weight: bold;
            }
            .tableList thead th:first-child {
                width: 35px;
            }
            .tableList th, td {
                padding: 8px 0;
                border-bottom: 1px solid #e9e9e9;
            }
            .tableList a {
                color: #337ab7;
            }
            .tableList a:hover {
                color: blue;
            }

        .thMedium {
            width: 100px;
        }
        .thLarge {
            min-width: 180px !important;
        }
    /* Panel */
        .panel {
            float: left;
            width: 100%;
            margin-bottom: 0;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            border-radius: 0px;
            border: 0px;
            border-top: 2px solid #E5E5E5;
            position: relative;
            -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
        }
        .panel.panel-default {
            border-top-color: #F5F5F5;
            border-top-width: 1px;
            margin-bottom: 10px;
        }
        .panel.panel-primary {
            border-top-color: #1b1e24;
        }
        .panel.panel-success {
            border-top-color: #95b75d;
        }
        .panel.panel-info {
            border-top-color: #1caf9a;
        }
        .panel.panel-warning {
            border-top-color: #1caf9a;
        }
        .panel.panel-danger {
            border-top-color: #E04B4A;
        }
        .panel.panel-colorful:before {
            content: "";
            width: 100%;
            height: 2px;
            background: linear-gradient(left, #E04B4A 0%, #1caf9a 50%, #95b75d 100%);
            background: -o-linear-gradient(left, #E04B4A 0%, #1caf9a 50%, #95b75d 100%);
            background: -moz-linear-gradient(left, #E04B4A 0%, #1caf9a 50%, #95b75d 100%);
            background: -webkit-linear-gradient(left, #E04B4A 0%, #1caf9a 50%, #95b75d 100%);
            background: -ms-linear-gradient(left, #E04B4A 0%, #1caf9a 50%, #95b75d 100%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0, #E04B4A), color-stop(0.5, #1caf9a), color-stop(1, #95b75d));
            display: block;
            left: 0px;
            top: 0px;
        }
        .panel .panel-heading {
            padding: 10px;
        }
        .panel .panel-heading .panel-title-image {
            width: 30px;
            border: 2px solid #D5D5D5;
            -moz-border-radius: 20%;
            -webkit-border-radius: 20%;
            border-radius: 20%;
            margin-right: 5px;
        }
        .panel .panel-heading .panel-title {
            margin-left: 7px;
            font-size: 0.7em;
            font-weight: bold;
            display: inline-block;
        }
        .panel .panel-heading .panel-title-box {
            float: left;
        }
        .panel .panel-heading .panel-title-box h3 {
            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
            color: #1b1e24;
            padding: 0px;
            margin: 0px;
        }
        .panel .panel-heading .panel-title-box span {
            font-size: 12px;
            color: #586377;
            font-weight: 400;
            line-height: 12px;
        }
        .panel .panel-heading,
        .panel .panel-footer,
        .panel .panel-body {
            width: 100%;
        }
        .panel .panel-body {
            padding: 5px 5px 0 5px;
            position: relative;
            font-weight: bold;
            text-align: center;
        }
        .panel .panel-body.scroll {
            padding-right: 0px;
        }
        .panel .panel-body.panel-body-map {
            padding: 5px;
        }
        .panel .panel-body.panel-body-image img {
            -moz-border-radius: 5px 5px 0px 0px;
            -webkit-border-radius: 5px 5px 0px 0px;
            border-radius: 5px 5px 0px 0px;
            width: 100%;
        }
        .panel .panel-body.panel-body-image .panel-body-inform {
            width: 30px;
            height: 30px;
            position: absolute;
            bottom: -15px;
            left: 50%;
            background: #1caf9a;
            color: #FFF;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            border-radius: 0px;
            margin-left: -15px;
            text-align: center;
            line-height: 30px;
            padding-left: 1px;
            padding-top: 1px;
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .panel .panel-title {
            font-size: 16px;
            font-weight: 400;
            line-height: 30px;
            display: block;
            color: #1b1e24;
        }
        .panel-heading select {
            width: 18%;
            float: right;
        }
        ul.panel-controls {
            float: right;
            padding: 0px;
            margin: 0px;
            list-style: none;
            position: relative;
        }
        ul.panel-controls > li {
            float: left;
        }
        ul.panel-controls > li > a {
            display: block;
            float: left;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 28px;
            color: #22262e;
            border: 1px solid #BBB;
            -moz-border-radius: 20%;
            -webkit-border-radius: 20%;
            border-radius: 20%;
            margin-left: 3px;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            transition: all 200ms ease;
        }
        ul.panel-controls > li > a.control-primary {
            color: #1b1e24;
            border-color: #1b1e24;
        }
        ul.panel-controls > li > a.control-success {
            color: #95b75d;
            border-color: #95b75d;
        }
        ul.panel-controls > li > a.control-info {
            color: #1caf9a;
            border-color: #1caf9a;
        }
        ul.panel-controls > li > a.control-warning {
            color: #1caf9a;
            border-color: #1caf9a;
        }
        ul.panel-controls > li > a.control-danger {
            color: #E04B4A;
            border-color: #E04B4A;
        }
        ul.panel-controls > li > a:hover {
            border-color: #999;
            color: #1b1e24;
        }
        ul.panel-controls > li > a.rounded {
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            border-radius: 0px;
        }
        ul.panel-controls.panel-controls-title {
            margin-top: 3px;
        }
        .panel-hidden-controls ul.panel-controls > li > a {
            opacity: 0;
            filter: alpha(opacity = 0);
        }
        .panel-hidden-controls:hover ul.panel-controls > li > a {
            opacity: 0.8;
            filter: alpha(opacity = 80);
        }
        .panel-hidden-controls:hover ul.panel-controls > li > a:hover {
            opacity: 1;
            filter: alpha(opacity = 100);
        }
        ul.panel-controls > li.label-control .label,
        .label-form {
            display: inline-block;
            font-size: 11px;
            padding: 5px 10px;
            line-height: 12px;
            margin-top: 4px;
        }
        ul.panel-controls > li > .dropdown-menu {
            left: auto;
            right: 3px;
        }
        ul.panel-controls > li > .dropdown-menu:after,
        ul.panel-controls > li > .dropdown-menu:before {
            left: auto;
            right: 11px;
        }
        ul.panel-controls > li > .dropdown-menu:after {
            margin-left: auto;
            margin-right: -5px;
        }
        ul.panel-controls > li > .dropdown-menu:before {
            margin-left: auto;
            margin-right: -6px;
        }
        .panel-heading .label {
            line-height: 16px;
            padding: 4px 10px;
            margin: 3px 0px 3px 5px;
            font-size: 12px;
            display: inline-block;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
        .panel-heading .label.pulsate {
            -webkit-animation: pulsate 1s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation: pulsate 1s ease-out;
            -moz-animation-iteration-count: infinite;
            animation: pulsate 1s ease-out;
            animation-iteration-count: infinite;
        }
        /* PANEL BODY PRICING */
        .panel.panel-primary .panel-body-pricing small {
            color: #1b1e24;
        }
        .panel.panel-success .panel-body-pricing small {
            color: #95b75d;
        }
        .panel.panel-info .panel-body-pricing small {
            color: #1caf9a;
        }
        .panel.panel-warning .panel-body-pricing small {
            color: #1caf9a;
        }
        .panel.panel-danger .panel-body-pricing small {
            color: #E04B4A;
        }
        .panel-body.panel-body-pricing h2 {
            font-size: 26px;
            font-weight: 400;
        }
        .panel-body.panel-body-pricing h2 small {
            text-transform: uppercase;
        }
        .panel-body.panel-body-pricing p {
            font-size: 13px;
            color: #666;
            margin-bottom: 15px;
        }
        .panel-body.panel-body-pricing p.text-muted {
            color: #AAA;
            font-size: 11px;
        }
        .panel-body.panel-body-pricing .fa {
            color: #EEE;
        }
    /* Progress bar */
        .progressContainer {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            width: 100%;
            padding: 15px;
        }
        .progressBarContainer {
            width: 20%;
            text-align: left;
            margin-top: 0px;
        }
            .progressBarContainer:nth-child(n+6) {
                margin-top: 5px;
            }
            .progressBarContainer label {
                font-size: 0.8em;
                color: #33414e;
            }
        .progress {
            width: 100%;
        }
        .progress-list {
            float: left;

            width: 100%;
            padding: 0px 5px;

            font-size: 11px;
        }
        .progress-list .progress {
            clear: both;

            margin-top: 20px;
        }
        .progress-bar {
            background-color: #006ba9;
        }
            .progress-bar a {
                color: white;

                text-decoration: none;
                cursor: pointer;
            }
    /* Tooltip */
        #tooltip {
            text-align: center;
            color: #fff;
            background: #111;
            position: absolute;
            z-index: 100;
            padding: 15px;
        }

            #tooltip:after /* triangle decoration */ {
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #111;
                content: '';
                position: absolute;
                left: 50%;
                bottom: -10px;
                margin-left: -10px;
            }

                #tooltip.top:after {
                    border-top-color: transparent;
                    border-bottom: 10px solid #111;
                    top: -20px;
                    bottom: auto;
                }

                #tooltip.left:after {
                    left: 10px;
                    margin: 0;
                }

                #tooltip.right:after {
                    right: 10px;
                    left: auto;
                    margin: 0;
                }
/* ========== Base Site ========== */
    .logoBase {
        display: none;
    }
    .userMenu {
        display: none !important;
    }
    .indicatorContainer {
        width: 28%;

        text-align: center;

        background: #263238;

        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        border: 0px solid #000000;
        padding-bottom: 3px;
    }
    .pageContent {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        width: 100%;
        min-height: 100%;
        padding-top: 80px;

        overflow-y: auto;

        background: #e9edf2;
    }
    .headerWrapper {
        width: 100%;
        height: 80px;

        padding: 0 10px;

        display: flex;
        justify-content: space-between;
        align-items: center;

        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        background: #006ba9;

        border-bottom: 10px solid #014369;

        box-shadow: 0px 5px 15px rgba(0, 0, 0, .2);
    }
    .headerLogoContainer {
        height: 100%;
        min-width: 180px;
    }
        .headerLogoContainer a {
            height: 100%;

            display: block;
        }
        .headerLogoContainer img {
            height: 100%;
            padding: 10px;
        }

    .sidebarWrapper {
        width: 12%;
        height: calc(100% - 80px);
        position: fixed;

        background: #263238;
    }
    .menuItens {
        margin-top: 20px;
        padding: 0px;

        list-style: none;
    }
        .menuItens li {
            color: #fff;
        }
        .menuItens a {
            padding: 10px;
            width: 100%;

            text-decoration: none;

            display: block;

            color: #e2e2e2;

            -webkit-transition: background .15s linear,color .15s linear;
            -o-transition: background .15s linear,color .15s linear;
            transition: background .15s linear,color .15s linear;
        }
        .menuItens a:hover {
            background-color: rgba(0,0,0,.1);
            color: #fff;

            text-decoration: none;

            -webkit-transition: background .15s linear,color .15s linear;
            -o-transition: background .15s linear,color .15s linear;
            transition: background .15s linear,color .15s linear;
        }
        .menuItens a:visited {
            color: inherit;
        }
        .menuItens a i:first-child{
            width: 20px;
        }
        .menuItens p {
            margin-left: 15px;

            display: inline-block;
            font-size: 0.9em;
        }

    .sidebarLogout {
        display: none;
    }
    .sideLogoContainer {
        width: 100%;
        padding: 10px;
        position: absolute;
        bottom: 30px;
        left: 0;
        text-align: center;
    }
        .sideLogoContainer img {
            width: 70%;
        }
    .activeMenu {
        background-color: #25b7d3;
        color: #fff;
    }
    .headerContainer {
        height: 100%;
        display: inline-flex;
        justify-content: flex-start;

        color: #fff;

        font-weight: 800;
        font-size: 0.9em;
    }
        .headerContainer a {
            color: white;
        }
        .headerContainer a:hover {
            color: inherit;
            text-decoration: none;
            background: #014369;
        }
        .headerContainer a:visited {
            color: inherit;
            text-decoration: none;
        }

    .ratingsContainer {
        height: 100%;
        padding: 10px;
        margin-right: 20px;

        display: flex;
        justify-content: center;
        flex-direction: column;
    }
        .ratingsContainer label {
            display: block;
        }
        .ratingsContainer button {
        background: transparent;
        color: #fff;

        border: none;
        outline: 0;
        padding: 0;
        }

    .personalInfo {
        height: 100%;
        padding: 10px 0 10px 10px;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        -webkit-transition: background .15s linear,color .15s linear;
        -o-transition: background .15s linear,color .15s linear;
        transition: background .15s linear,color .15s linear;
    }
    .userPic {
        height: 50px;
    }
        .userPic img {
            height: 100%;
            border-radius: 50%;
        }

    .info {
        height: 100%;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
        .info span {
            width: 100%;
            display: block;
        }

    .userCompany {
        color: #d8d8d8;
    }
    .editProfile {
        height: 100%;
        padding: 0 10px 0 10px;
        display: flex;
        align-items: center;
    }
        .editProfile .fa-cog {
            font-size: 1.3em;
        }

    .userRole {
        color: #d8d8d8;
    }
    .logoutContainer {
        display: flex;
        align-items: center;
        padding: 10px;
    }
        .logoutContainer:hover {
            color: inherit;
            text-decoration: none;
            background: #014369;
        }
        .logoutContainer i {
            margin-left: 5px;
        }
        .logoutContainer a:hover {
            color: inherit;
            text-decoration: none;
        }

    .mainContentWrapper {
        padding: 1%;
        padding-left: 13%;
        height: 100%;
        width: 100%
    }
    .content {
        padding: 30px 20px 15px 20px;
        height: 100%;
    }
/* ========== Login Screen ========== */
    .logoContainer {
        width: 100%;
        text-align: left;
        margin: 60px 0 20px 0;
        padding-left: 241px;
    }
    .logoLogin {
        width: 16%;
    }
    .loginText {
        display: none;
    }
    .colorBar img {
        width: 20%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .loginWrapper {
        background-image: url("../img/login-background.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-color: #fff;
    }
    .inner-bg {
        padding: 0px 0 170px 0;
    }
    .col-sm-offset-3 {
        margin: 300px 0px 0px 60px;
        margin-left: 100px !important;
    }
    .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .top-content .text {
        color: #fff;
    }
    .top-content .text h1 {
        color: #fff;
    }
    .top-content .description {
        margin: 20px 0 10px 0;
    }
    .top-content .description p {
        opacity: 0.8;
    }
    .top-content .description a {
        color: #fff;
    }
    .top-content .description a:hover,
    .top-content .description a:focus {
        border-bottom: 1px dotted #fff;
    }
    .form-top {
        overflow: hidden;
        padding: 0 25px 15px 25px;
        background: #fff;
        -moz-border-radius: 4px 4px 0 0;
        -webkit-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
        text-align: left;
    }
        .form-top a,
        .form-top a:hover {
            color: #00CBEC;
        }

    .form-top-left {
        float: left;
        width: 75%;
        padding-top: 25px;
    }
        .form-top-left h3 {
            margin-top: 0; color: #1f1f1f;
        }
        .form-top-left p {
            opacity: 0.8; color: #1f1f1f;
        }
        .form-top-left input[type=checkbox] {
            margin-right: 5px;
        }

    .form-top-right {
        float: left;
        width: 25%;
        padding-top: 5px;
        font-size: 66px;
        color: #fff;
        line-height: 100px;
        text-align: right;
        opacity: 0.3;
    }
    .form-bottom {
        padding: 25px 25px 30px 25px;
        background:  #fff;
        -moz-border-radius: 0 0 4px 4px;
        -webkit-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 4px;
        text-align: left;
    }
        .form-bottom a:visited {
            color: #fff;
        }
        .form-bottom form textarea {
            height: 100px;
        }
        .form-bottom form button.btn {
            width: 100%;
        }
        .form-bottom form .input-error {
            border-color: #de615e;
        }
    .form-top .alert-danger,
    .form-top .alert {
        margin: 15px 0px 0px 0;
    }
    .form-signin {
        display: flex;
        flex-direction: column;
        #reset-password{
            text-align: center;
        }
    }
    .col-sm-6.col-sm-offset-3.form-box {
        /* border: #0099ec solid 2px; */
        padding-left: 0px;
        padding-right: 0px;
    }
/* ========== Edit Profile ========== */
    .googlePlay {
        width: 15%;
    }
    .appleStore {
        width: 13%;
    }
    .sectionContainer {
        display: inline-flex;
        justify-content: flex-start;
    }
    .pushWrapper {
        display: inline-flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }
    .pushContainer {
        width: 45%;
    }
    .profileSection {
        margin-bottom: 30px;
    }
    .pictureSection {
        width: 50%;
        display: inline-block
    }
    .airSection {
        display: inline-block;
        width: 50%
    }
    .avatarContainer {
        height: 165px;
        margin-bottom: 15px;
        display: inline-block;
    }
        .avatarContainer img {
            height: 100%;
            border-radius: 50%;
        }

    .avatarFileContainer {
        width: 425px;

        padding: 7px 7px;
        border-radius: 3px;
        background-color: #fbfbfb;
        box-shadow: 0 0px 9px rgba(0, 0, 0, .1);
    }
        .avatarFileContainer label {
            display: inline-block;
            width: 200px;

            font-weight: bold;
            font-size: 0.7em;
        }
/* ========== Follow Up ========== */
    .advSearchWrapper {
        display: inline-block;
        margin-bottom: 10px;
    }
    .toggleButton {
        cursor: pointer;
        color: #337ab7;
    }
    .select2-container .select2-search--inline .select2-search__field {
        font-size: 0.9em !important;
    }
    .breadcrumbs {
        display: none;
    }
    .seeMore a {
        text-decoration: none;
    }
        .seeMore a:hover {
            color: #337ab7;
        }
    .newText {
        display: none;
    }
    .specialSelect {
        position: relative;
    }
        .specialSelect label {
            width: 100%;
        }
    .select2-container {
        width: 100% !important;
    }
    .select2-selection__placeholder {
        color: #797979 !important;
        font-weight: 400;
    }
    .advanced_search_select {
        font-size: 0.9em;
        border: none !important;
        border-bottom: 2px solid rgba(0,0,0, 0.12) !important;
        border-radius: 3px !important;
        font-weight: 600;
        padding-right: 20px;
    }
    .advanced_search_select_dropdown {
        font-size: 0.8em;
    }
    .advanced_search_select .select2-selection__clear {
        position: relative;
        z-index: 1000;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 0 !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        border-radius: 3px;
    }
    .advSearchForm .select2-container .select2-selection--multiple {
        min-height: 1px;
        height: 35px;
        overflow-x: hidden;
        width: 520%;
    }
    .advSearchForm .select2-container .select2-search--inline .select2-search__field {
        margin-top: 4px;
    }
    .advSearchForm .select2-container--default .select2-selection--multiple {
        border: none;
        border-bottom: 2px solid rgba(0,0,0, 0.12);
        border-radius: 3px;
    }
    .filterFormContainer input {
        padding: 0px 5px;
        height: 30px;
        color: #444;
        font-weight: 600;
    }
    .filterFormContainer input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: #797979;
        font-weight: 400;
    }
    .filterFormContainer input::-moz-placeholder { /* Firefox 19+ */
        color: #797979;
        font-weight: 400;
    }
    .filterFormContainer input:-ms-input-placeholder { /* IE 10+ */
        color: #797979;
        font-weight: 400;
    }
    .filterFormContainer input:-moz-placeholder { /* Firefox 18- */
        color: #797979;
        font-weight: 400;
    }
/* ========== Order Detail ========== */
    .orderWrapper {
        display: flex;
        justify-content: space-between;

        padding-left: 12%;
        width: 68%;
        height: 100%;

        background: #e9edf2;
    }
    /* cards */
        .cardWrapper {
            width: 100%;
            height: 100%;
        }
        .cardContainer {
            height: 100%;

            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
            .cardContainer .container {
                width: 50%;
                padding: 15px;
            }
        .card {
            display: inline-block;
            position: relative;

            margin-bottom: 10px;

            width: 99%;

            border-radius: 3px;

            border-left: 15px solid #B0C934;
            background-color: #fbfbfb;
            box-shadow: 0 0px 9px rgba(0, 0, 0, .1);

            overflow: hidden;
        }
            .card .cardRow {
                margin: 20px;
            }

        .cardBorder {
            width: 100%;
            padding: 0 0 4px 0;
            text-align: center;
            z-index: 9;
        }
            .cardBorder span {
                text-transform: uppercase;
                color: #fff;
                font-size: 0.7em;
            }

        .innerCard {
            width: 100%;
            height: 100%;


            padding: 5px 12px 5px 12px;
        }
            .innerCard label {
                font-size: 0.8em;
            }
            .innerCard p {
                margin: 0;
                font-size: 0.7em;
            }

         .innerCard2 {
            width: 100%;
            height: 100%;


            padding: 5px 5px 5px 12px;
        }
            .innerCard label {
                font-size: 0.8em;
            }
            .innerCard p {
                margin: 0;
                font-size: 0.7em;

            }

        .infoContainer a {
            font-size: 0.7em;
            cursor: pointer;
        }
        .airFreight {
            min-height: 200px;
        }
        .airFreight .cardBorder {
            background-color: #6a4fff;
        }
        .oceanFreight .cardBorder {
            background-color: #4fbeff;
        }
        .purcharseDetail .cardBorder {
            background-color: #fc56ff;
        }
        .servicePriority .cardBorder {
            background-color: #00b126;
        }
        .customClearence .cardBorder {
            background-color: #ff4f4f;
        }
        .originPickup .cardBorder {
            background-color: #ffc107;
        }
        .goodsDetails .cardBorder {
            background-color: #5e126b;
        }

        .mantra .cardBorder {
            background-color: #009688;
        }
        .documents .cardBorder {
            background-color: #656565;
        }

        .goodsDetails {
            min-height: 150px;
        }
            .goodsDetails td,
            .goodsDetails th {
                font-size: 0.7em;
                padding-right: 10px;
            }

        .originPickup {
            min-height: 150px;
        }
            .originPickup td,
            .originPickup th {
                font-size: 0.7em;
                padding-right: 10px;
            }

        .customClearence {
            min-height: 150px;
        }
        .servicePriority {
            min-height: 155px;
        }
        .oceanFreight th {
            padding: 0 10px 0 0;
        }
        .oceanFreight td {
            border-bottom: none;
            padding: 0 10px 0 0;

            font-size: 0.8em;
        }
        .cardRow {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .cardRow2 {
            display: flex;
            display: block;
            flex-wrap: wrap;
        }
    /* timeline */
        .tlWrapper {
            width: 32%;
            height: 100%;
            overflow-y: auto;

            background: #263238
        }
        .tlContainer {
            height: 100%;
        }
            .tlContainer > div:first-child {
                /* margin-left: -170px; */
                height: 100%;

                padding: 10px;
            }

        .followupBtn {
            display: none;
        }
        .stageContainer {
            width: 100%;
            text-align: right;
        }
            .stageContainer p {
                display: inline-block;
                text-align: right;

                color: #fff;

                margin-top: 20px;
                margin-bottom: 0;

                word-break: break-word;
                width: 65%;
            }
        .tlBegin {
            /* text-align: center; */
            margin: 15px 0;
        }
        .entryContent {
            /* background: #9d9da7; */
            color: #000;

            padding: 5px 10px;
            /* border-radius: 3px;
            border: 3px solid #eaeaea; */

            /* min-width: 80px; */

            /* display: inline-block;

            text-transform: uppercase; */
            font-weight: bold;
        }
        .tlContent {
            height: 100%;
        }
        .tlList {
            padding: 0;

            position: relative;

            list-style: none;
        }
            .tlList li {
                display: flex;
                position: relative;
                height: auto;
            }
            .tlList li:before {
                /* content: ''; */
                width: 1px;
                height: 100%;
                background: #2fb4e0;
                position: absolute;
                z-index: 1;
                left: 0;
                right: 0;
                margin: 0 auto;
            }

        .dateContainer,
        .dateInfoWrapper {
            float: left;
            position: relative;
        }
        .dateContainer {
            width: 50%;
        }
        .dateInfoWrapper {
            width: 50%;
            padding: 10px;
        }
            .dateInfoWrapper:after {
                /* content: ''; */

                position: absolute;
                height: 11px;
                width: 11px;

                top: 24px;
                right: 0;
                left: 0;
                margin: 0 -5px;
                z-index: 10;

                border-radius: 15px;

                border: solid 1px #263238;
            }

        .dateInfoContainer {
            margin: 5px 8px;
            padding: 5px 10px;
            width: 100%;

            position: relative;

            border-radius: 3px;

            background: #fff;
        }
            .dateInfoContainer:after {
                content: '';

                top: 7px;
                left: -15px;
                position: absolute;

                border: solid 8px #fff;
                border-bottom: solid 8px transparent;
                border-top: solid 8px transparent;
                border-left: solid 8px transparent;
            }
            .dateInfoContainer label {
                color: #2fb4e0;

                font-size: 0.7em;
                font-weight: 500;
            }
            .dateInfoContainer p {
                color: #9d9da7;
                font-size: 0.7em;
            }

        .notes span {
            word-wrap: break-word;
            font-size: 0.7em;
        }
        .tlDate {
            margin: 22px 10px 0px 20px;

            text-align: right;
            font-size: 12px;

            color: #999999;
        }
/* ========== Control Access ========== */
    .accessControlHeader {
        background: #FFF;

        text-align: center;
        color: white;
        font-style: italic;

        width: 100%;
        padding: 5px 0;
        margin-bottom: 60px;
    }

    .accessControl {
        background: rgb(120,219,250);
        background: -moz-radial-gradient(center, ellipse cover, rgba(120,219,250,1) 0%, rgba(12,112,172,1) 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(120,219,250,1)), color-stop(100%,rgba(12,112,172,1)));
        background: -webkit-radial-gradient(center, ellipse cover, rgba(120,219,250,1) 0%,rgba(12,112,172,1) 100%);
        background: -o-radial-gradient(center, ellipse cover, rgba(120,219,250,1) 0%,rgba(12,112,172,1) 100%);
        background: -ms-radial-gradient(center, ellipse cover, rgba(120,219,250,1) 0%,rgba(12,112,172,1) 100%);
        background: radial-gradient(ellipse at 49% 30%, rgba(120,219,250,1) 20%,rgba(12,112,172,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78dbfa', endColorstr='#0c70ac',GradientType=1 );
    }

    .accessControlFooter {
        background: #0065a4;

        text-align: center;
        color: white;
        font-style: italic;

        width: 100%;
        padding: 10px 0;

        bottom: 0;
        left: 0;
    }

    .accessControlWrapper {
        text-align: center;

        max-width: 800px;
        max-height: 630px;

        background-color: #FFF;

        border-radius: 3px 3px 3px 3px;
        -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        border: 0px solid #000000;

        box-shadow: 0 1px 4px rgba(0, 0, 0, .6);;

        margin: 0 auto;
        padding: 20px;

        overflow-y: scroll;
    }
        .accessControlWrapper h3 {
            font-weight: 800;
            color: #545454;

            text-align: left;
        }
        .accessControlWrapper h3 a:visited {
            color: #fff;
        }

    .accessControlTable {
        border-collapse: collapse;

        text-align: left;
        font-size: 0.8em;

        background: #FFF;

        width: 100%;
        margin-bottom: 15px;
    }

        .accessControlTable th {
            font-size: 14px;
            font-weight: 800;

            color: #333;

            padding: 10px 8px;

            border-bottom: 1px solid #ccc;
        }
        .accessControlTable td {
            padding: 5px 8px;
        }
        .accessControlTable tbody tr {
            border-bottom: 1px solid #ccc;
        }

    .accessControlBtnContainer {
        width: 100%;
        margin-bottom: 20px;
    }
/* ========== Dashboard ========== */
    .greenIndicator {
        background: #47af50;
    }
    .yellowIndicator {
        background: #fbbc3b;
    }
    .redIndicator {
        background: #f44336;
    }
    .greenIndicator,
    .yellowIndicator,
    .redIndicator {
        color: #fff;
        padding: 5px;
        border-radius: 9px;
    }
    .dashboardWrapper {
        padding-left: 12%;
    }
    .worldMap {
        height: 100%;
        margin-bottom: 15px;
    }
    .progressBarContainer label {
        margin-bottom: 0;
    }
    .columnWrapper {
        height: 250px;
    }
    .donutWrapper {
        height: 395px;
    }
    .mapPanel {
        height: 485px;
    }
    .dashboardRow {
        width: 100%;
        display: inline-block;
        margin-top: 10px;
    }
    .carouselContainer {
        text-align: center;
    }
    .carouselPagination {
        text-align: center;
    }
    .slide {
        display: inline-block;
        width: 100%;
    }
    .slideLabel {
        /* display: none; */
        font-size: 1em;
    }
    .activeSlide {
        display: block;
    }
    .carouselPagination a {
        font-size: 0.8em;

        color: #7d7c7c;

        cursor: pointer;
    }
        .carouselPagination a:hover {
            text-decoration: none;
        }

    .panel-label {
        font-size: 2em;
    }
    .panel-controls .dropdown span {
        font-weight: bold;
        font-size: 0.9em;
    }
    .servicePanel {
        padding: 0px 10px 10px 10px;
    }
    .gm-style-iw a:visited {
        color: #23527c;
    }
    #columnchart_material {
        width: 100%;
    }
/* ========== Report ========== */
    /* .reportList {
        width: 600%;
    }
        .reportList thead th:first-child {
                width: auto;
            } */

    .filterContainer .greenBtn {
        margin-right: 10px;
    }
    .exportDataContainer {
        width: 100%;
        margin-bottom: 10px;
        display: inline;
    }
        .exportDataContainer input {
            height: 32px;
        }
        .exportDataContainer i {
            margin-right: 5px;
        }

    .searchInputContainer {
        display: inline;
    }
    .date-field {
        width: 180px;
    }
    .schedulerContainer {
        padding: 5px 15px;
        border-radius: 3px;

        background-color: #fbfbfb;
        box-shadow: 0 0px 9px rgba(0, 0, 0, .1);;

        width: 100%;
    }
/* ========== Documents ========== */
    .dwnldBtnContainer {
        display: inline-block;
        text-align: right;
        width: 100%;
        margin-bottom: 10px;
    }
    .documentList {
        width: 100% !important;
    }
/* ========== KPI ========== */
    .kpiList .thLarge {
        width: 400px;
    }
    .kpiTable {
        margin-bottom: 10px;
    }
    .tooltip-container {
        position: relative;
    }
            .tooltip-container i:hover + div[name=tooltipTable] {
                display: block;
                padding: 15px 15px;
                border-radius: 3px;
                background-color: #fbfbfb;
                box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
                width: 100%;
            }

    div[name="tooltipTable"] {
        position: absolute;
        bottom: 100%;
        left: -5px;

        padding: 10px;
        background: #ccc;
        display: none;
    }
        div[name="tooltipTable"]:before {
            width: 0;
            height: 0;
            content: "";

            position: absolute;
            top: 100%;
            left: 10px;

            border-top: 5px solid #fff;
            border-right: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid transparent;

            z-index: 999;
        }

    div[name="tooltipTable"] label {
        display: block;
    }
    .kpiWrapper {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .kpiContainer {
        margin-bottom: 10px;
    }
    .columnContainer{
        width: 49%;
    }
    .donutContainer {
        width: 24%;
        background: #fff;
    }
    .kpiHeader {
        width: 100%;
        padding: 3px 10px;

        background: #0065a4;
        color: #fff;
    }
        .kpiHeader label {
            margin: 0;
            font-size: 0.9em;
        }
        .kpiHeader a {
            color: #fff;
        }
        .kpiHeader a:visited {
            color: #fff;
        }
        .kpiHeader .fa-arrows {
            margin-right: 10px;
        }

    .kpiBody {
        width: 100%;
        background: #fff;
    }
    .container-fluid {
        padding: 0;
    }
    .grid-stack {
        background: transparent !important;
    }
/* De 320px até 768px */
    @media screen and (min-width: 320px) and (max-width: 768px) {
        /* ========== Login Screen ========== */
            .logoLogin {
                width: 76%;
            }
            .logoContainer {
                margin: 0;
                display: block;
                padding: 0;
            }
            .col-sm-offset-3 {
                margin: 50px 0px 0px 0px;
                margin-left: 0 !important;
            }
            .colorBar {
                display: none;
            }
            .loginWrapper {
                background-image: none;
            }
            .loginText {
                display: block;
                text-align: center;
                margin-top: 35px;
            }
            .loginText img {
                width: 80%;
            }
        /* ========== Base Site ========== */
            .logoBase {
                display: inline-block;
            }
            .mainContentWrapper {
                padding: 5px;
                height: auto;
                width: 100%;
            }
            .cardContainer .container {
                width: 100%;
                padding: 0 10px;
            }
            .headerContainer {
                display: none;
            }
            .headerLogoContainer {
                width: 100%;
                text-align: center;
            }
            .dockBtn {
                display: block;
            }
            .mainContent {
                padding: 0;
            }
            .sidebarWrapper {
                /* left: -100%; */

                z-index: 999;

                width: 100%;
            }
            .userMenu {
                display: flex !important;
                align-items: center;
            }
            .menuItens {
                margin: 0;
            }
            .menuUserPic {
                height: 50px;
            }
                .menuUserPic img {
                    height: 100%;
                    border-radius: 50%;
                    margin-right: 10px;
                }

            .sidebarLogout {
                display: block;
            }
            .menuInfo {
                display: inline-block;
                width: 100%;
            }
                .menuInfo span {
                    display: block;
                    color: #fff;
                }

            .menuUserName {
                font-weight: bold;
            }
            .editMenuProfile {
                display: none;
                width: 100%;
            }
                .editMenuProfile .fa {
                    color: #fff;
                    float: right;
                }
                .sideLogoContainer img {
                    width: 30%;

                }
        /* ========== Follow Up ========== */
            .filterContainer div {
                width: 100%;
                height: 27px;
            }
            .tlWrapper {
                position: fixed;
                z-index: 99;
                right: -100%;

                width: 100%;
            }
            .breadcrumbs {
                display: block;
                padding: 15px;
                width: 100%;
            }
                .breadcrumbs div {
                    display: inline-block;
                    width: 50%;
                }
                .breadcrumbs label {
                    color: #c3c3c3;
                }
                .breadcrumbs button {
                    margin-top: 7px;
                }

            .tlContainer > div:first-child {
                margin: 0;
            }
            .tlDate {
                width: 55%;
                margin: 40px 20px 0px 0;
                float: right;
            }
        /* ========== Edit Profile ========== */
            .googlePlay {
                width: 45%;
            }
            .appleStore {
                width: 41%;
            }
            .sectionContainer {
                display: block;
                width: 100%;
            }
            .airSection {
                width: 100%;
            }
            .pushWrapper {
                display: block;
            }
            .pushContainer {
                width: 100%;
            }
            .pictureSection {
                width: 100%;
                display: block;
            }
            .avatarFileContainer {
                width: 100%
            }
                .avatarFileContainer label {
                    display: inline-block;
                    width: 164px;
                    font-weight: 400;
                    font-size: 0.6em;
                }
                .avatarFileContainer .btn {
                    padding: 3px 6px;
                    font-size: 11px;
                }
        /* ========== Follow Up ========== */
            .filterContainer div {
                width: 100%;
                height: 27px;
            }
            .tlWrapper {
                position: fixed;
                z-index: 99;
                right: -100%;
                float: right;
                }
                .dateInfoContainer label,
                .dateInfoContainer p {
                    font-size: 0.8em;
                }
        /* ========== Order Detail ========== */
            .orderWrapper {
                padding: 0;
                width: 100%;
            }
            .cardWrapper {
                width: 100%;
            }
            .breadcrumbs label {
                font-size: 0.9em;
            }
            .exportDataContainer input {
                margin-top: 10px;
                width: 100%;
            }

            .tlContent {
                height: auto;
                margin-left: -94px;
                padding-bottom: 5em;
            }
            .entryContent p:first-child {
                margin: 23px 0;
            }
            .tlContainer > div:first-child {
                margin: 0;
            }
            .tlDate {
                width: 55%;
                margin: 22px 12px 0px 20px;

                font-size: 10px;

                float: right;
            }
            .dateInfoContainer label,
            .dateInfoContainer p {
                font-size: 0.8em;
            }
            .orderWrapper {
                padding: 0;
                width: 100%;
            }
            .cardWrapper {
                width: 100%;
            }
            .breadcrumbs label {
                font-size: 0.9em;
            }
            .exportDataContainer input {
                margin: 10px 0;
                width: 100%;
            }
            .followupBtn {
                display: block;
            }
        /* ========== Report ========== */
            .reportList thead th:first-child {
                width: 70px !important;
            }
            /* .reportList thead th {
                width: 200px !important;
            } */
            .searchInputContainer {
                display: flex;
                margin-top: 5px;
            }
                .searchInputContainer input {
                    width: 70%;
                }
                    .searchInputContainer input {
                        width: 70%;
                    }
                    .searchInputContainer .btn {
                        margin-right: 10px;
                    }

                /* .reportList {
                    width: 4000px !important;
                } */
                .advSearchWrapper {
                    width: 100%;
                }

            .reportBtn > button {
                width: 261px;
                margin-bottom: 5px;
            }
        /* ========== Assets ========== */
            /* Table */
                /* .tableList {
                    width: 1380px;
                } */
        /* ========== Documents ========== */
            /* .documentList {
                width: 620px !important;
            } */
        /* ========== Dashboard ========== */
            .dashboardWrapper {
                padding: 0;
            }
            .progressBarContainer {
                width: 50%;
            }
    }

.dotedLine {
    border: 1px dashed #969696;
    width: 100%;
    margin: 5px 0;
}

.worldMapLoadingModal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.worldMapModalContainer {
    width: 20%;
    position: relative;
    top: 50%;
    margin: 0 auto;
    transform: translateY(-50%);
    background: #252525;
    border-radius: 10px;
}