/*  
    colors lighter to darker (from https://coolors.co/f1f2eb-d8dad3-72c02c-566246-4a4a48): 
    #f1f2eb - light gray
    #e5e6df - lighter gray
    #dddddd - gray
    #286090 - BASIS
    #34617e - darker
    #485973 - dark blue
    #3e4753 - very dark blue (sidebar)
     - dark grey
    #4a4a48 - very dark grey
*/

/* -- BODY AND BODY ELEMENTS -- */
    body {
        padding-top: 0;
        padding-bottom: 0;
    }

@media (max-width: 991px) {
    .row > * {
        flex-shrink: 0 !important;
        width: 100% !important;
    }
}
    /* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
    .dl-horizontal dt {
        white-space: normal;
    }

    /*Browsers, by default, have their option to print background-colors and images turned off. These lines bypass this. */
    * {
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */
        color-adjust: exact !important; /*Firefox*/
    }

    /*scrollup*/
    .cube-portfolio #filters-container .cbp-filter-item-active {
        background: transparent !important;
    }

    .scrollup {
        background-color: #286090;
        padding: 0;
        text-align: center;
        position: fixed;
        bottom: 0;
        right: 50%;
        margin-right: -32px;
        width: 44px;
        opacity: 0.45;
        filter: alpha(opacity=45);
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

        .scrollup:hover {
            background-color: #286090;
            opacity: 1.0;
            filter: alpha(opacity=100);
        }

    /* buttons */
    .btn-default {
        background-color: #286090 !important;
        border-color: #34617e !important;
    }

    .btn-outline-default {
        color: #34617e !important;
        border-color: #34617e !important;
    }

    .btn-default.active, .btn-default:hover, .btn-default:active, .open > .dropdown-toggle.btn-default {
        background-color: #34617e !important;
        box-shadow: rgba(95,114,82, 0.27) 3px 4px 3px !important;
    }

    .btn-outline-default.active, .btn-outline-default:hover, .btn-outline-default:active, .open > .dropdown-toggle.btn-outline-default {
        background-color: #34617e !important;
        box-shadow: rgba(95,114,82, 0.27) 3px 4px 3px !important;
        color: #ffffff !important;
    }

    .btn-default.focus, .btn-default:focus {
        background-color: #34617e !important;
        border-color: #286090 !important;
    }

    .btn-outline-default.focus, .btn-outline-default:focus {
        background-color: #34617e !important;
        border-color: #286090 !important;
    }

    .nobtn {
        border: 0;
        background: transparent;
        float: left;
        margin-left: 10px;
        color: #286090;
    }

        .nobtn:hover {
            color: #286090;
        }

    .btn {
        border-radius: 4px;
        box-shadow: rgba(95,114,82, 0.27) 2px 2px;
        padding: 3px 6px;
        margin: 12px 0 !important;
        cursor: pointer !important;
    }

@media (max-width: 991px) {
    .btndefault {
        display: block;
        width: 100%;
    }
    body, html {
        padding-top: 0 !improtant;
        margin-top: 0 !important;
    }
}

    .btnn {
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer !important;
        border: 1px solid #dddddd !important;
        padding: 2px 6px !important;
        margin: 0 !important;
        color: #000000;
        box-shadow: none !important;
    }

    .btn-danger {
        background-color: #c9302c !important;
        color: #ffffff !important;
    }

    .btn-warning {
        background-color: #ec971f !important;
        color: #ffffff !important;
    }
    /*counter cards*/
    .countercards {
        display: inline-block;
        background-color: #f1f2eb;
        border-radius: 4px;
        box-shadow: 2px 2px rgba(159,158,158,0.27);
        text-align: center;
        margin: 6px 1% 0 0;
        float: left;
        height: 64px !important;
        padding: 8px 4px 6px 0 !important;
        max-width: 13% !important;
        vertical-align: middle;
    }

    .panel1 {
        clear: both;
        position: relative;
    }


    /* dropdown language selection*/
    .dropbtn {
        color: grey;
        padding: 3px 6px;
        border: none;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        border: none;
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        z-index: 3;
        border: none;
        background-color: #dddddd;
        top: 0 !important;
        cursor: default;
        left: auto;
        right: 0;
        min-width: unset !important;
    }

        .dropdown-menu a {
            text-decoration: none;
            display: block;
            border: none;
            padding-left: 15px;
        }

            .dropdown-menu a:hover {
                font-weight: bold;
            }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: transparent !important;
        border: none;
    }

    .langselection {
        border: none;
        background: transparent;
    }

    /*tootlips*/

    .tooltip-inner {
        background-color: #3e4753;
        box-shadow: 0px 0px 4px grey;
        opacity: 1 !important;
    }

    .tooltip.bs-tooltip-right .tooltip-arrow::before {
        border-right-color: #3e4753 !important;
    }

    .tooltip.bs-tooltip-left .tooltip-arrow::before {
        border-left-color: #3e4753 !important;
    }

    .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
        border-bottom-color: #3e4753 !important;
    }

    .tooltip.bs-tooltip-top .tooltip-arrow::before {
        border-top-color: #3e4753 !important;
    }

    .breadcrumb {
        background-color: #e9ecef !important;
        border: none;
        padding: 6px 11px;
        border-radius: 0.25rem;
    }

    #status {
        width: 100%;
        color: #FFF;
        text-align: center;
    }

    .offline {
        background: red;
    }

    /* -- BASIC TEXT ISSUES -- */
    /* links */
    a {
        color: #286090;
        text-decoration: none;
    }

    .alink a {
        color: #e5e6df;
    }

        .alink a:hover {
            color: #f1f2eb;
        }

    a:hover {
        color: #34617e;
        text-decoration: none;
    }

    a:focus {
        color: #34617e;
        text-decoration: none;
    }

    .darklink {
        color: #4a4a48;
    }

        .darklink:hover {
            color: #34617e;
        }

    /*colors*/
    .color-red {
        color: #c9302c;
    }

    .color-green {
        color: #538223 !important;
    }

    .color-yellow {
        color: #ec971f !important;
    }

    /*Block Headline*/
    .headline {
        display: block;
        margin: 24px 0 25px 0;
        border-bottom: 1px dotted #809db2;
    }

        .headline h2 {
            font-size: 22px;
        }

        .headline h2,
        .headline h3,
        .headline h4 {
            margin: 0 0 -2px 0;
            padding-bottom: 5px;
            display: inline-block;
            border-bottom: 2px solid #e5e6df;
        }

    .headline-md {
        margin-bottom: 15px;
    }

        .headline-md h2 {
            font-size: 21px;
        }

    /* -- FORMS ISSUES -- */

    /* Set widths on the form inputs since otherwise they're 100% wide */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="select"] {
        max-width: 420px;
    }

    /*form-control*/
    .form-control, .form-select {
        margin-bottom: 6px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        background-color: #edf2f6;
    }

    .forms-control {
        float: left;
        width: 64px;
        text-align: right;
    }

    .form-control:focus, .form-select:focus {
        border-color: #286090;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 127, 166, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 127, 166, 0.6);
    }

    .form-control::-moz-placeholder, .form-select::-moz-placeholder {
        color: #777;
        opacity: 1;
    }

    .form-control:-ms-input-placeholder, .form-select:-ms-input-placeholder {
        color: #777;
    }

    .form-control::-webkit-input-placeholder, .form-select::-webkit-input-placeholder {
        color: #777;
    }

    .form-control[disabled],
    .form-control[readonly],
    fieldset[disabled] .form-control,
    .form-select[disabled],
    .form-select[readonly],
    fieldset[disabled] .form-select {
        cursor: not-allowed;
        background-color: #eee !important;
        opacity: 1;
    }

    textarea.form-control, textarea.form-select {
        height: auto;
    }

    /*checkbox*/
    input[type=checkbox] {
        /* Double-sized Checkboxes */
        -ms-transform: scale(2); /* IE */
        -moz-transform: scale(2); /* FF */
        -webkit-transform: scale(2); /* Safari and Chrome */
        -o-transform: scale(2); /* Opera */
        transform: scale(2);
        border: 2px solid;
        opacity: 0.7 !important;
    }

    .checkbox {
        margin: 12px 12px 24px 8px !important;
    }

    input[type=radio] {
        border: 0px;
        /*width: calc(100% - 24px);*/
        height: 36px;
        width: 36px;
        margin: 12px calc(50% - 18px);
        -webkit-appearance: radio;
    }

    input[type="text"] {
        display: block;
    }

    .input_wide {
        margin: 0 auto;
        width: 148px !important;
        text-align: left;
        background-color: #e9ecef;
        padding: 4px;
    }

    .input_narrow {
        width: 48px !important;
        text-align: right;
        background-color: #e9ecef;
        padding: 4px;
        display: inline-block !important;
    }

    .input_wwide {
        width: 104px !important;
        text-align: center !important;
        background-color: #e9ecef;
        margin: 0 auto;
        padding: 4px;
        min-height: 36px;
    }

    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select {
        max-width: 420px !important;
    }

    .input_date {
        width: 142px;
        max-width: 142px !important;
    }


    @media (max-width: 991px) {
        .colab {
            display: unset !important;
            font-size: 0.9em;
        }

        .foco {
            display: unset !important;
            max-width: unset !important;
        }

        .leftbtn {
            margin: 12px 48px !important;
        }

        .ryks {
            display: block !important;
            margin: 6px !important;
        }
    }

    @media (min-width: 992px) {
        .colab {
            display: inline-block !important;
            text-align: right;
            vertical-align: middle;
            font-size: 0.9em;
            padding-right: 4px;
        }

        .foco {
            max-width: unset !important;
            vertical-align: middle;
            float: right;
        }

        .form-control {
            width: stretch;
        }

        .leftbtn {
            margin: 20px 10px !important;
        }

        .ryk {
            display: block !important;
            margin: 6px;
        }
    }

    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="select"] {
        max-width: unset;
    }


    .wider {
        margin-left: -10px;
        margin-right: -10px;
    }

    .field-icon {
        float: right !important;
        margin-top: -36px !important;
        margin-right: 4px !important;
        position: relative !important;
        cursor: pointer !important;
        font-size: 1.4em !important;
    }

    .psw {
        vertical-align: super;
    }

    .overl {
        margin-top: 24px;
        border-top: 1px dotted #DEDEDE;
    }

    .lft {
        float: left;
    }

    .ryk {
        margin-left: 24px;
        vertical-align: middle;
    }

    /* -- NAVIGATION ISSUES -- */
    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background-color: #777;
        border-color: #fff
    }


    /*leftovers*/


    .no-padding {
        padding: 0;
    }





    /* TABLE ISSUES */

    table {
        border: 0;
    }

        table td div input .input_narrowdev {
            width: 48px !important;
            text-align: right;
            background-color: #e2e8ee;
            padding: 4px;
            display: inline-block !important;
        }

    .table > :not(:first-child) {
        border-top: unset;
    }

    .table thead th {
        background-color: #dddddd;
        vertical-align: middle !important;
        font-weight: 400 !important;
        font-size: 0.90em !important;
        text-align: center !important;
        border-bottom: 1px solid #dddddd;
    }

    .pagertable, th, td {
        width: unset;
    }

    th {
        font-weight: 400 !important;
        font-size: 0.85em;
    }

    .table th, .table td {
        border: none !important;
    }

    tbody {
        border-style: none !important;
    }

    tfooter td {
        background-color: rgba(95,114,82, 0.27);
    }

    td, th {
        padding: 4px;
        width: auto;
        border: 0;
        vertical-align: middle !important;
    }

    th a {
        display: block;
        padding: 0 4px 0 15px;
        background: url("https://www.pitstopplusmanager.com/images/sort-unsorted.png") no-repeat;
    }

    th.sortasc a {
        display: block;
        padding: 0 4px 0 15px;
        background: url("https://www.pitstopplusmanager.com/images/sort-asc.png") no-repeat;
    }

    th.sortdesc a {
        display: block;
        padding: 0 4px 0 15px;
        background: url("https://www.pitstopplusmanager.com/images/sort-desc.png") no-repeat;
    }





    .copyright {
        padding: 13px 0 14px;
    }



    .gotomenu {
        background-color: #286090;
        color: #ffffff;
        text-align: center;
        padding: 20px 16px 12px 12px;
        width: 68px;
        height: 64px;
        opacity: 0.45;
        filter: alpha(opacity=45);
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        overflow: visible;
    }

        .gotomenu:hover {
            background-color: #286090;
            opacity: 1.0;
            filter: alpha(opacity=100);
            border-color: #286090 !important;
            box-shadow: 0 0 2px 3px rgba(95,114,82,0.5) !important;
        }

    .addcow {
        z-index: 120;
        position: fixed;
        right: 0;
        background-color: #286090;
        color: #ffffff;
        text-align: center;
        padding: 8px 4px 4px 4px;
        width: 68px;
        height: 64px;
        opacity: 0.45;
        filter: alpha(opacity=45);
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        overflow: visible;
        font-size: x-small;
        font-family: 'Arial Narrow', Arial, sans-serif;
    }

        .addcow:hover {
            background-color: #286090;
            opacity: 1.0;
            filter: alpha(opacity=100);
        }

    .btn400 {
        width: 180px;
        margin: 12px auto !important;
        display: block;
        text-align: center !important;
    }

    .nametext {
        width: 164px;
        text-align: left;
        background-color: #dff4cd;
    }

    .highalarm {
        background-color: #d23030;
        padding: 6px;
        color: #ffffff;
        font-weight: bold;
    }

    .observe {
        background-color: #eae815;
        padding: 6px;
        font-weight: bold;
    }

    .normalmarked {
        color: #000000;
        padding: 6px;
        font-weight: normal;
    }

    .notactive {
        font-size: 0.8em;
        color: #9f9e9e;
        font-style: italic;
    }

    .cntr {
        vertical-align: middle;
        text-align: center;
        margin: 0 auto;
    }



    /*control-label {
    text-align: left;
    font-weight: bold !important;
    vertical-align: middle;
}*/

    .rght {
        text-align: right !important;
        font-weight: 400;
        font-size: 0.9em;
    }

    .lft {
        text-align: left !important;
        float: left;
    }

    .footer {
        border-bottom: 1px solid #3e4753;
    }

    .HiddenCol {
        display: none;
    }

    /*panel*/
    .panel {
        background-color: #ffffff;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .panel-heading {
        /**/
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #40729e), color-stop(0.5, #286090));
        background-image: -o-linear-gradient(bottom, #40729e 0%, #286090 50%);
        background-image: -moz-linear-gradient(bottom, #40729e 0%, #286090 50%);
        background-image: -webkit-linear-gradient(bottom, #40729e 0%, #286090 50%);
        background-image: -ms-linear-gradient(bottom, #40729e 0%, #286090 50%);
        background-image: linear-gradient(to bottom, #40729e 0%, #286090 50%);
    }

        .panel-heading .accordion-toggle:after {
            /* symbol for "opening" panels */
            font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
            content: "\e114"; /* adjust as needed, taken from bootstrap.css */
            float: left;
            margin-top: 0;
            margin-right: 6px;
            margin-bottom: 8px;
            color: #286090;
        }

        .panel-heading .accordion-toggle.collapsed:after {
            /* symbol for "collapsed" panels */
            content: "\e080"; /* adjust as needed, taken from bootstrap.css */
        }

    .panel-titlse {
        font-size: 28px !important;
        margin-top: 0;
        padding-bottom: 6px;
        text-decoration: none;
        color: #ffffff;
        margin-bottom: 6px;
    }

    .panel-title > a {
        color: inherit;
        text-decoration: none;
    }

    .panel-group .panel-heading + .panel-collapse .panel-body {
        padding-left: 16px;
    }

    .panel-group .panel {
        overflow: hidden;
        border-radius: 0;
    }

    .panel-footer {
        margin-top: 6px;
        padding: 10px 15px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        font-size: 11px;
        color: GrayText;
    }

    .navbar {
        padding: 15px 10px;
        background: #fff;
        border: none;
        border-radius: 0;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .navbar-btn {
        box-shadow: none;
        outline: none !important;
        border: none;
    }

        .navbar-btn:hover {
            background-color: #34617e !important;
        }

    .line {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ddd;
        margin: 40px 0;
    }

    /*different from default*/

    a > .panel-title:before {
        font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
        content: "\e114"; /* adjust as needed, taken from bootstrap.css */
        text-align: left;
        color: #ffffff;
        float: left;
    }

    a[aria-expanded="true"] > .panel-title:before {
        content: "\e080"; /* adjust as needed, taken from bootstrap.css */
    }

    .vertal {
        vertical-align: middle;
        padding-top: 6px;
    }

    .left250px {
        position: relative;
        margin-left: 216px !important;
    }

    .left400px {
        position: relative;
        margin-left: 400px !important;
    }

    .left_btn {
        position: absolute;
        float: left;
        margin-left: 132px;
        margin-top: 12px;
        font-size: 0.7em;
    }

    .smalll {
        font-size: 0.7em;
        position: absolute;
        left: 0;
        right: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

    .wrapper {
        display: flex;
        align-items: stretch;
    }

    #sidebar {
        min-width: 250px;
        max-width: 250px;
        background: #3e4753;
        color: #fff;
    }

        #sidebar.active {
            min-width: 80px;
            max-width: 80px;
            text-align: center;
        }

            #sidebar.active .sidebar-header h3,
            #sidebar.active .CTAs {
                display: none;
            }

            #sidebar.active .sidebar-header strong {
                display: block;
            }

        #sidebar ul li a {
            text-align: left;
        }

        #sidebar a {
            color: #fff !important;
        }

        #sidebar.active ul li a {
            padding: 20px 10px;
            text-align: center;
            font-size: 1.1em;
            margin-left: -5px;
            line-height: 175%;
        }

            #sidebar.active ul li a i {
                margin-right: 0;
                display: block;
                font-size: 1.8em;
                margin-bottom: 5px;
            }

        #sidebar.active ul ul a {
            padding: 10px !important;
        }

        #sidebar.active .dropdown-toggle::after {
            top: auto;
            bottom: 10px;
            right: 50%;
            -webkit-transform: translateX(50%);
            -ms-transform: translateX(50%);
            transform: translateX(50%);
        }

        #sidebar .sidebar-header {
            padding: 20px;
            background: #3e4753;
        }

            #sidebar .sidebar-header strong {
                display: none;
                font-size: 1.8em;
            }

        #sidebar ul.components {
            padding: 0 0;
            border-bottom: 1px solid rgba(72, 89, 115, 0.4);
        }

        #sidebar ul li a {
            padding: 10px;
            font-size: 1.1em;
            display: block;
            border-bottom: 1px solid #485973;
        }

            #sidebar ul li a:hover {
                color: #fff;
                background: #485973;
            }

            #sidebar ul li a i {
                margin-right: 10px;
            }

        #sidebar ul li.active > a,
        a[aria-expanded="true"] {
            color: #fff;
            background: #485973;
        }

    a[data-toggle="collapse"] {
        position: relative;
    }

    .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    ul ul a {
        font-size: 0.9em !important;
        padding-left: 30px !important;
        background: rgba(72, 89, 115, 0.8);
        border-bottom: 1px solid #dddddd;
    }

    ul.CTAs {
        padding: 20px;
    }

        ul.CTAs a {
            text-align: center;
            font-size: 0.9em !important;
            display: block;
            border-radius: 5px;
            margin-bottom: 5px;
        }

    a.download {
        background: #fff;
        color: #7386D5;
    }

    a.article,
    a.article:hover {
        background: #e5e6df !important;
        color: #fff !important;
    }

    /*virer ikke - skal få teksten til at gå væk under collapse*/
    #sidebar .list-unstyled .components span {
        display: none;
    }


    /* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */

    #topcontent {
        width: 100%;
        padding: 0;
        min-height: 70vh;
        transition: all 0.3s;
    }

    /* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 991px) {
    #sidebar {
        min-width: 92px;
        max-width: 92px;
        text-align: center;
        margin-left: -92px !important;
    }

    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    #sidebar.active {
        margin-left: 0 !important;
    }

        #sidebar.active li a img {
            height: 32px;
            fill: yellow;
        }

    #sidebar .sidebar-header h3,
    #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 20px 2px;
    }

        #sidebar ul li a span {
            font-size: 0.85em;
        }

        #sidebar ul li a i {
            margin-right: 0;
            display: block !important;
            font-size: 1.3em;
        }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }
}

/* ---------------------------------------------------
BURGER STYLING
----------------------------------------------------- */

#sidebarCollapse {
    width: 40px;
    height: 38px;
    background: #cccccc;
    border-radius: 4px;
    padding: 0;
    margin-left: -10px;
}

    #sidebarCollapse span {
        width: 30px;
        height: 3px;
        margin: 0 auto;
        display: block;
        background: #286090;
        transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
        border-radius: 2px;
        opacity: 1;
    }

    #sidebarCollapse:hover span {
        background: #ffffff;
        transition: 0.2s;
    }

@media (min-width: 992px) {
    #sidebarCollapse span:first-of-type {
        /* rotate first one */
        transform: rotate(45deg) translate(2px, 2px);
    }

    #sidebarCollapse span:nth-of-type(2) {
        /* second one is not visible */
        opacity: 0;
    }

    #sidebarCollapse span:last-of-type {
        /* rotate third one */
        transform: rotate(-45deg) translate(2px, -2px);
    }

    #sidebarCollapse.active span {
        /* no rotation */
        transform: none;
        /* all bars are visible */
        opacity: 1;
        margin: 5px auto;
    }

    .navbar-btn {
        margin-left: -15px;
    }
}

@media (max-width: 991px) {
    #sidebarCollapse.active span:first-of-type {
        /* rotate first one */
        transform: rotate(45deg) translate(6px, 6px);
    }

    #sidebarCollapse.active span:nth-of-type(2) {
        /* second one is not visible */
        opacity: 0;
    }

    #sidebarCollapse.active span:last-of-type {
        /* rotate third one */
        transform: rotate(-45deg) translate(5px, -5px);
    }

    #sidebarCollapse span {
        /* no rotation */
        transform: none;
        /* all bars are visible */
        opacity: 1;
        margin: 5px auto;
    }

    .navbar-btn {
        margin-left: 0px;
    }

    .navbar {
        position: unset;
        flex-wrap: unset;
        text-align: right;
    }

    .navbar-btn {
        margin-left: -6px;
    }
}


    .card-deck .card {
        margin: 12px;
    }

    .card-text {
        font-size: 0.85em;
        text-align: center;
    }

    .card-title {
        color: #000;
        font-size: 13px;
        font-weight: 400;
        margin: 0 0 12px;
        text-transform: uppercase;
        line-height: 15px;
        text-align: center;
    }

    .card {
        background-color: #f1f2eb;
    }

        .card:hover {
            border: 2px solid #286090;
            box-shadow: #3e4753 5px 6px 4px;
        }

    /*icons*/

    a:hover .fa-times {
        color: #8b0000 !important;
    }

    .icon {
        display: inline-block;
        width: 22px;
        height: 18px;
        background-size: contain;
        margin: auto;
    }

    .icon-planning {
        background-image: url(fonts/planning.svg);
    }

    .icon-registration {
        background-image: url(fonts/registration.svg);
    }

    /*slider*/
    .switch {
        position: relative;
        display: inline-block;
        width: 54px;
        height: 28px;
        margin-bottom: 6px;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc !important;
        -webkit-transition: .4s;
        transition: .4s;
        border: 1px solid #286090;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 0;
            bottom: 0;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    input:checked + .slider {
        background-color: #286090 !important;
    }

    input:focus + .slider {
        box-shadow: 0 0 2px #286090;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 26px;
    }

        .slider.round:before {
            border-radius: 50%;
        }

    /*loader and spinner*/
    .loader,
    .loader:after {
        border-radius: 50%;
        width: 10em;
        height: 10em;
    }

    .loader {
        margin: 30vh auto;
        position: relative;
        text-indent: -9999em;
        border-top: 0.6em solid rgba(255, 255, 255, 0);
        border-right: 0.6em solid rgba(255, 255, 255, 0);
        border-bottom: 0.6em solid rgba(255, 255, 255, 0);
        border-left: 0.6em solid #286090;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: lds-ring 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }

    @-webkit-keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    #loadingDiv {
        opacity: 0.9;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #bbb;
        z-index: 2;
    }

    .lds-ring {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

        .lds-ring div {
            box-sizing: border-box;
            display: block;
            position: absolute;
            width: 96px;
            height: 96px;
            margin: 12px;
            border: 12px solid #fff;
            border-radius: 50%;
            animation: lds-ring 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            border-color: #286090 transparent transparent transparent;
        }

            .lds-ring div:nth-child(1) {
                animation-delay: -0.45s;
            }

            .lds-ring div:nth-child(2) {
                animation-delay: -0.3s;
            }

            .lds-ring div:nth-child(3) {
                animation-delay: -0.15s;
            }

    @keyframes lds-ring {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /*pager styling*/
    tr.GridPager td {
        margin: 2px 0;
        padding: 4px;
        border: 0;
    }

    .GridPager a, .GridPager span {
        display: block;
        width: auto;
        text-align: center;
        text-decoration: none;
        margin: 0;
        padding: 0 4px;
    }

    .GridPager a {
        background-color: #f2f2f2;
        color: #286090;
        border: 1px solid #dddddd;
    }

        .GridPager a:hover {
            background-color: #34617e;
            color: #FFFFFF;
            border: 1px solid #dddddd;
        }

    .GridPager span {
        background-color: #286090;
        color: #ffffff;
        border: 1px solid #969696;
    }




    /*TIMELINES*/
    .timelinefuture {
        color: #3e4753 !important;
    }

        .timelinefuture:hover {
            color: #34617e !important;
            text-decoration: none;
        }

    @media (min-width: 992px) {
        hr {
            margin: 48px 10% 0 8%;
            height: 6px !important;
            border: none;
            background: #3e4753 !important;
            position: relative;
            background: linear-gradient(to left, #3e4753 76%, #286090 24%) !important;
            opacity: 0.75;
        }
    }

    @media (max-width: 991px) {
        hr {
            margin: 48px 10% 0 8%;
            height: 6px !important;
            border: none;
            background: #3e4753 !important;
            position: relative;
            background: linear-gradient(to right, #286090 50%, #3e4753 50%) !important;
            opacity: 0.75;
        }
    }


    .rgt {
        text-align: right;
    }

    .rowheader {
        font-weight: bold;
        font-size: 0.95em;
        font-style: italic;
        display: inline-block;
        color: #777;
    }

    .inl {
        display: inline-block;
    }

    .addunit {
        display: inline-block;
    }

    /* PAGINATION */

.pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px -8px;
    border-radius: 4px;
}

    .pagination-ys table {
        margin-left: -4px;
        border-bottom: none;
    }

        .pagination-ys table > tbody > tr > td {
            display: inline;
        }

            .pagination-ys table > tbody > tr > td > a,
            .pagination-ys table > tbody > tr > td > span {
                position: relative;
                float: left;
                padding: 2px 9px;
                text-decoration: none;
                color: #808080;
                background-color: #ffffff;
                border: 1px solid #dddddd;
                margin-left: -1px;
            }

            .pagination-ys table > tbody > tr > td > span {
                position: relative;
                float: left;
                padding: 2px 9px;
                text-decoration: none;
                margin-left: -1px;
                z-index: 2;
                color: #286090;
                font-weight: 800;
                background-color: #f5f5f5;
                border-color: #dddddd;
                cursor: default;
            }

            .pagination-ys table > tbody > tr > td:first-child > a,
            .pagination-ys table > tbody > tr > td:first-child > span {
                margin-left: 0;
                border-bottom-left-radius: 4px;
                border-top-left-radius: 4px;
            }

            .pagination-ys table > tbody > tr > td:last-child > a,
            .pagination-ys table > tbody > tr > td:last-child > span {
                border-bottom-right-radius: 4px;
                border-top-right-radius: 4px;
            }

            .pagination-ys table > tbody > tr > td > a:hover,
            .pagination-ys table > tbody > tr > td > span:hover,
            .pagination-ys table > tbody > tr > td > a:focus,
            .pagination-ys table > tbody > tr > td > span:focus {
                color: #286090;
                background-color: #eeeeee;
                border-color: #dddddd;
            }