@font-face {
  font-family: gobcl;
  src: url("../fonts/gobcl_regular.otf");
}

body {
    font-family: gobcl, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    /* zoom: 90%; */
}

/*
btn {
	border: 2px solid white;
}

.h-custom {
	height: calc(100% - 73px);
}

.tooltip-pos{
	right: 0
}

span.error {
	color: #dc3545;
}

a {
    color: inherit !important;
}
*/

.loader,
.loader:after {border-radius: 50%;width: 10em;height: 10em;}
.loader {
    margin: 100px auto;
    font-size: 4px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(12, 12, 12, 0.2);
    border-right: 1.1em solid rgba(12, 12, 12, 0.2);
    border-bottom: 1.1em solid rgba(12, 12, 12, 0.2);
    border-left: 1.1em solid #999;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
@-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 {position:absolute;top:0;left:0;width:100%;height:100%;background-color: rgba(255,255,255,0.5);}

.error {color: #c00;}

li {
    list-style: none;
}

input {
    border-radius: 10px !important;
    padding: 0.5em 1em !important;
    font-size: 1em !important;
    height: 30px !important;
} 

select {
    background: white; 
    height: 30px !important;
    border-radius: 10px !important;
    border: 1px solid grey;
}

/*
.clickable {
    display: flex;
    flex-direction: row;
    align-content: center;
}*/

input[type="radio"] {
    margin-top: -4px !important;
} 

table input[type="radio"] {
    position: relative;
    margin: -15px 5px 0 !important;
    top: 10px;
} 

.customcheck input:checked ~ .checkmark {
    background-color: #0088ce !important;
}

.btn-border {
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    font-size: 0.8em;
    padding: 0.5em 1em;
    margin: 0.75em auto;
}

.container {
    width: 1360px !important;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-products {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
	background: url(../images/banner.png) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center;  
    color: white;
    z-index: 999;
}

.banner-degrade {
    display: flex;
    /* background: rgba(17, 30, 45, 0.75); */
    background: linear-gradient(to right, rgba(0,112,192,0.75), rgba(0, 176, 80, 0.75)) !important;
    height: min-content;
    padding: 0.5em;
    border: none !important;
    color: white !important;
    width: 100%;
    height: 101%;
}

/*
    position: relative;
    background: url(../recursos/banner.png) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center;
    background: linear-gradient(to right, rgb(96,182,108), rgb(32,49,88)) !important;   
*/

.navbar-products h1 {
    margin: 0;
    padding: 0;
}

.collapse {
    display: flex;
}

.central {
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.info-products {
    text-align: justify;
}

.info-products h1 {
    font-size: 2em;
    margin: 0 auto 10px;
}

.h8em {
    height: 8em;
}

.margin8 {
    margin-top: 11em;
}

.margin10 {
    margin-top: 10em !important;
}

.rowline {
    display: flex;
    flex-direction: row;
}

.auto {
    margin: auto;
}

.block {
    position: relative;
    background: white;
    border: 2px solid transparent;
    padding: 0 0.5em;
    z-index: 2;
    color: grey;
    text-align: center;
    font-size: 1.75em;
    line-height: 1.25;
    transition: 0.5s all;
    margin-bottom: 0.25em;
    width: 100%;
}

.column {
    display: flex;
    flex-direction: column;
}

.panel {
    padding: 0 !important;
}

.panel-info {
    margin: 0;
    padding: 0;
    border: 1px solid #60b66cbf;
}

.panel-heading {
    padding: 10px 30px;
    color: white !important;
    background: linear-gradient(to right, rgba(0,112,192,0.85), rgba(0, 176, 80, 0.85)) !important;
}

.panel-body {
    padding: 25px 15px;
}

.progress {
    background-color: transparent;
}

.ums {
    position: relative;
    background: url(../images/bg-ums.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center;
    width: auto;
    height: 45%;
}

.gda {
    position: relative;
    background: url(../images/bg-gda.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center;
    width: auto;
    height: 14.25em;
}

.electrolight {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, rgba(68,168,216,0.75), rgba(98,178,47,0.75)) !important;  
    height: min-content;
    padding: 0.5em;
    border: none !important;
    color: white !important;
    position: absolute;
    text-align: left;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 101%;
}

.green {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, rgba(0,112,192,0.6), rgba(0, 176, 80, 0.6)) !important;   
    height: min-content;
    padding: 0.5em;
    border: none !important;
    color: white !important;
    position: absolute;
    text-align: left;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 101%;
    height: 101%;
}

.btn {
    background-image: none;
    border: none;
    transition: 0.5s all;
} 

/*
.banner {
    width: 98%;
    margin-top: 10px; 
    height: auto;
}

.banner img {
    max-width: 100%;
}
*/

/* ------------------ */
/*     NAVBAR-SEC     */
/* ------------------ */

.navbar-pf
 {
    background: linear-gradient(to right, #0070c0, rgba(0, 176, 80)) !important; 
    border: 0;
    border-radius: 0;
    border-top: 3px solid #39a5dc;
    margin-bottom: 0;
    min-height: 0;
}

.navbar-pf .navbar-primary {
        background-image: inherit !important;
    }

.navbar-pf .navbar-header {
        border-bottom: none !important;
    }

.navbar-pf .navbar-utility>li>a {
        border-left: none !important;
        color: white !important;
        font-weight: bold !important;
        padding: 7px 10px;
    }

.navbar-pf .navbar-primary>.active>a, .navbar-pf .navbar-primary>.active>a:focus, .navbar-pf .navbar-primary>.active>a:hover, .navbar-pf .navbar-primary>.open>a, .navbar-pf .navbar-primary>.open>a:focus, .navbar-pf .navbar-primary>.open>a:hover
 {
        background-color: white !important;
        border-bottom-color: white !important;
        border-top-color: none !important;
        box-shadow: none !important;
        color: #0070c0 !important;
        background-image: none !important;
        background-repeat: repeat-x;
        filter: none !important;;
    }

/* ------------------ */
/*     NAVBAR  CSS    */
/* ------------------ */

.navbar-sec {
    background-color: #111e2d;
    border-color: #2c2d3a;
}

.navbar-sec .navbar-nav>li>a { color: white; }
        
.navbar-sec .navbar-nav>.active>a:hover, .navbar-sec .navbar-nav>li>a:hover {
    color: #fff;
    background-color: #080808;
}
        
.navbar-sec .navbar-toggle {
    border-color: #333;
}
        
.navbar-sec .navbar-toggle .icon-bar {
    background-color: #fff;
}
        
.navbar-sec .navbar-nav>.open>a {
    color: #fff;
    background-color: #080808;
}
        
.nav-tabs-hal {font-size: 12px;}
        
.kc-action-cell {
    background-color: transparent;
    /* background-image: linear-gradient(to left, rgb(0, 101, 156), rgb(17, 30, 45)) !important; */
    background-repeat: repeat-x;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
        
.note {
    margin-top: 6px;
    padding: 0 1px;
    font-size: 11px;
    line-height: 15px;
    color: #999;
}
        
.bootstrap-datetimepicker-widget .datepicker-years thead .picker-switch {
    cursor: default;
    pointer-events: none;
}
        
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
    background: #f1f1f1;
    cursor: pointer
}   
        
.bootstrap-datetimepicker-widget table td.today {
    position: relative
}
        
.bootstrap-datetimepicker-widget table td.today:before {
    content: '';
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 7px 7px;
    border-bottom-color: #0088ce;
    border-top-color: rgba(0, 0, 0, .2);
    position: absolute;
    bottom: 4px;
    right: 4px
}
        
.bootstrap-datetimepicker-widget table td span {
    display: inline-block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 1px
}
        
.bootstrap-datetimepicker-widget table td span:hover { background: #f1f1f1 }
        
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #0088ce;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}
        
.btnUpload {width: 55px;height: 26px;}

.inputText{
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    /*      font: 400 13.3333px Arial; */
    font: 400 11.0px "Open Sans",Helvetica,Arial,sans-serif;
    padding: 1px 3px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
    border: 1px solid #bbb;
    /*     font-size: 11px; */
}

.input-group-addon {
    color: #363636;
    background-color: transparent;
    border: none;
}

.navbar-nav > li > .dropdown-menu {
    border-radius: 10px !important;
}

.notifications .notification-menu .notification-title {
    background: linear-gradient(to right, rgba(0,112,192,0.75), rgba(0, 176, 80, 0.75)) !important;
}

.navbar-toggle {
    position: absolute !important;
    padding: 9px 10px;
    margin-right: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 2px solid white !important;
    border-radius: 5px;
    top: 2em;
    right: 1em;
}

.navbar-sidebar ul li a:hover,
        .navbar-sidebar>ul>li>ul>li a:focus,
        .pf3-banner-link {
            text-decoration: none
        }
        .navbar-sidebar .navbar-toggle-sidebar,
        header .navbar.navbar-default {
            filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)!important
        }

        .navbar-sidebar {
            /*     background: url(../img/grid-sidebar.png) 50% 100% no-repeat #292e33; */
            /*  background: #292e33; */
            background: #fff;
            border: 0;
            border-radius: 0;
            border-right: 1px solid lightgrey;
            bottom: 0;
            left: -240px;
            margin: 0;
            padding: 0;
            position: fixed;
            top: 50px;
            transition: all .2s cubic-bezier(.35, 0, .25, 1);
            width: 240px;
            z-index: 1029
        }

        .navbar-sidebar.pf-m-modifier {
            top: 121px
        }

        @media (min-width:992px) {
            .navbar-sidebar {
                box-shadow: none!important;
                left: 0;
                overflow-x: hidden;
                overflow-y: auto;
                padding-right: 0
            }
        }

        .navbar-sidebar.open {
            box-shadow: 0 0 3px rgba(0, 0, 0, .95);
            left: 0;
            overflow-x: hidden;
            overflow-y: auto
        }

        .navbar-sidebar.open .navbar-toggle-sidebar {
            box-shadow: none;
            background-color: transparent;
            right: 0
        }

        .navbar-sidebar.open .navbar-toggle-sidebar:active,
        .navbar-sidebar.open .navbar-toggle-sidebar:hover {
            background: rgba(92, 103, 112, .5)!important
        }

        .navbar-sidebar.open .navbar-toggle-sidebar:focus {
            background: 0 0
        }

        .navbar-sidebar.open .navbar-toggle-sidebar .fa-angle-double-right {
            left: 6px
        }

        .navbar-sidebar.open .navbar-toggle-sidebar .fa-angle-double-right:before {
            content: "\f100"
        }

        .navbar-sidebar .form-group {
            display: block
        }

        .navbar-sidebar .navbar-form {
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            margin-bottom: 4px;
            margin-top: 0;
            padding-bottom: 0;
            padding-top: 0;
            position: relative
        }

        .navbar-sidebar .navbar-form:before {
            color: #eee;
            content: "\f002";
            font: 14px/1 FontAwesome;
            position: absolute;
            left: 24px;
            top: 4px
        }

        .navbar-sidebar .navbar-form .btn {
            display: none
        }

        .navbar-sidebar .navbar-form .form-control {
            background: rgba(255, 255, 255, .15);
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            color: #dbdada;
            display: block;
            height: 22px;
            padding-bottom: 1px;
            padding-left: 22px;
            padding-top: 1px;
            width: 100%
        }

        .navbar-sidebar .navbar-form .form-control:focus {
            background: rgba(255, 255, 255, .3);
            color: #fff;
            -webkit-transition-duration: .4s;
            transition-duration: .4s;
            -webkit-transition-property: background, color;
            transition-property: background, color
        }

        .navbar-sidebar .navbar-right {
            float: none!important;
            margin-left: 0;
            margin-right: 5px
        }

        .navbar-sidebar .navbar-right>li.active:hover>a,
        .navbar-sidebar .navbar-right>li.active>a {
            background: 0 0!important;
            color: #3bb1dc!important
        }

        .navbar-sidebar .navbar-right>li:hover {
            background: #212121
        }

        .navbar-sidebar .navbar-right>li:hover>a {
            background: 0 0;
            color: #fff
        }

        .navbar-sidebar .navbar-right>li>a {
            color: #eee;
            padding: 7px 20px
        }

        .navbar-sidebar .navbar-right>li>a:hover {
            color: #fff
        }

        .navbar-sidebar .navbar-toggle-sidebar {
            background: transparent;
            border: 0;
            border-radius: 0 !important;
            color: rgba(255, 255, 255, .6);
            height: 98%;
            padding: 0;
            position: absolute;
            right: -30px;
            top: 0;
            width: 25px;
            z-index: 3
        }

        .navbar-sidebar .navbar-toggle-sidebar:active,
        .navbar-sidebar .navbar-toggle-sidebar:focus,
        .navbar-sidebar .navbar-toggle-sidebar:hover {
            background: lightgrey;
            color: #fff;
            outline: 0
        }

        .navbar-sidebar .navbar-toggle-sidebar .fa-angle-double-right {
            font-size: 20px;
            position: absolute;
            left: 7px;
            top: 5px
        }

        .navbar-sidebar ul {
            list-style: none;
            margin: 0;
            padding: 0
        }

        .navbar-sidebar ul li {
            position: relative
        }

        .navbar-sidebar ul li.active>a {
            color: #fff;
            font-weight: 600
        }

        .navbar-sidebar ul li a {
            /*     color: #fff; */
            display: block;
            padding: 5px 20px
        }

        .navbar-sidebar>ul {
            margin: 0 0 20px
        }

        .navbar-sidebar>ul>li>a {
            border-bottom: 1px solid #393f44;
            font-size: 16px;
            margin-bottom: 10px;
            line-height: 60px;
            padding-bottom: 0;
            padding-top: 0
        }

        .navbar-sidebar>ul>li>ul>li.active {
            background-color: #111e2d;
        }

        .navbar-sidebar>ul>li>ul>li.active:after {
            background: #0088ce;
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 4px;
            z-index: 2
        }

        .navbar-sidebar>ul>li>ul>li.active>a:hover,
        .navbar-sidebar>ul>li>ul>li.active>ul>li.active>a:hover {
            background: 0 0
        }

        .navbar-sidebar>ul>li>ul>li.active>ul {
            display: block
        }

        .navbar-sidebar>ul>li>ul>li.active>ul>li.active>a {
            color: #0088ce
        }

        .navbar-sidebar>ul>li>ul>li.active>ul>li>a:hover {
            background: rgba(0, 0, 0, .1)
        }

        .navbar-sidebar>ul>li>ul>li a:hover {
            background: rgba(101, 109, 115, .15)
        }

        .navbar-sidebar>ul>li>ul>li a[data-toggle]:before {
            content: "\f107";
            font-family: FontAwesome;
            margin-right: 5px;
            vertical-align: 0
        }

        .navbar-sidebar>ul>li>ul>li a[data-toggle].collapsed:before {
            content: "\f105";
            margin-left: 2px;
            margin-right: 7px
        }

        .navbar-sidebar>ul>li>ul>li>ul,
        .navbar-sidebar>ul>li>ul>li>ul.collapse {
            display: none
        }

        .navbar-sidebar>ul>li>ul>li>ul.collapse.in {
            display: block
        }

        .navbar-sidebar>ul>li>ul>li>ul>li>a {
            padding-left: 34px
        }

        .navbar-sidebar .fa-angle-right {
            color: #fff;
            float: right;
            font-size: 18px;
            padding-top: 2px;
            text-align: right
        }

        .pattern-section p,
        .pforg-no-code,
        .sections>.row .section-img {
            text-align: center
        }

        .navbar-sidebar.hidden {
            display: none
        }

        .navbar-sidebar.navbar-home {
            background: #040404;
            border-right: 1px solid #393f44;
            border-top: 1px solid #393f44
        }

        .post_content h2+h3{margin-top:0}
        .post_content h2[id],.post_content h3[id],.post_content h4[id],.post_content h5[id],.post_content p[id]{margin-top:-82px;padding-top:82px}
        .post_content .example-pf iframe{border:none;margin-bottom:10px;-webkit-box-shadow:0 1px 1px rgba(3,3,3,.175);box-shadow:0 1px 1px rgba(3,3,3,.175)}
        .post_content .cards-pf{margin-bottom:10px}
        .post_content .example-pf-demo .cards-pf{margin-bottom:0}
        .post_content div+h2[id],.post_content ol+h2[id],.post_content p+h2[id],.post_content ul+h2[id]{padding-top:116px}
        .post_content h1,.post_content h2,.post_content h3{line-height:1.4;padding-bottom:10px}
        .post_content #html-css>h2[id]:first-child{padding-top:106px}
        .post_content ol+h2{margin-top:42px}
        .post_content ol+h2[id]{margin-top:-82px}
        .post_content .row+h2{margin-top:36px}
        .post_content .row+h2[id]{margin-top:-82px}

        .clearfix img{max-width:100%}.collapse-toggle{color:#0088ce;padding-left:12px;position:relative}

        header+.container-fluid{
            padding-bottom:50px;
            padding-top:62px;
            transition:padding-left .2s cubic-bezier(.35,0,.25,1)
        }
        .has-sidebar header+.container-fluid{
            padding-left:45px
        }

        .container, .container-fluid {
            padding-left: 20px;
            padding-right: 20px;
        }
        .container, .container-fluid {
            margin-right: auto;
            margin-left: auto;
        }

/* ------------------ */
/*    CONTENTS CSS    */
/* ------------------ */

.branding {
    margin: 1.5em;
    width: max-content;
}

.branding img {
    height: 4.25em;
    margin: 0 0.25em;
}

.card-pf {
    border: 1px solid lightgrey !important;
    border-radius: 10px;
    text-align: center;
    height: 18em;
}

.card-pf2 {
    height: auto;
    border-top: 2px solid transparent;
    box-shadow: 0 1px 1px rgba(3,3,3,.175);
}

.card-pf2 h1 {
    margin-left: 20px;
}

.card-pf img, .card-pf2 img {
    height: 120px; 
    width: 120px;
}

.card-pf2 img {
    margin-left: 20px;
}

.container-fluid {
    padding-top: 0 !important;
}

.navbar-sidebar {
    top: 0 !important;
}

.navbar-sec .navbar-nav > li > a {
    border: 2px solid white;
    border-radius: 20px;
}

.navbar-sidebar > ul > li > ul > li.active {
    background: white !important;
}

.navbar-sidebar ul li.active > a {
    color: #0088ce !important;
}

.navbar-sidebar ul li > a:hover {
    color: white !important;
    background: linear-gradient(to right, rgba(0,112,192,0.75), rgba(0, 176, 80, 0.75)) !important;
}

.navbar-sidebar > ul {
    margin: 0 0 10px !important;
}

.breadcrumb {
    padding: 4px 15px !important;
    border-bottom: 1px solid lightgrey;
}

.primary-menu ul li a {
    height: 40px;
    padding: 0.25em 2em;
}

table {
    margin-top: 1em;
}

.table-bordered {
    border: none;
}

/*
tbody {
    border: 1px solid lightgrey;
}
*/

tbody tr:nth-child(even) {
    background: #f2f2f2;
}

.table > thead {
    color: #0088ce;
    background: white;
    border-bottom: 2px solid #0088ce;
}

.table > thead th {
    font-family: gobcl !important;
    border: none !important;
}

.table-bordered > tbody > tr > td {
    border: 1px solid lightgrey;
    padding: 7px 5px !important;
}

.mini-banners img {
    height: 85px; 
    width: 260px;
    margin: 0.2em 0;
    border: 1px solid white;
}

.mini-banners img:hover {
    transition: 0.5s all;
    transform: scale(1.075);
}

.customcheck {
    text-align: left;
}

.btn-xls {
    width : 40px;
    height: 40px;
    border: 0;
    background-size: contain;
}

.btn-csv {
    width : 40px;
    height: 40px;
    border: 0;
    background-size: contain;
}
        
div.dt-buttons {
    position: relative;
    float: right;
}

.error{
    color: #dc3545;
}

/* ------------------ */
/*     SLIDER CSS     */
/* ------------------ */


.slider {
    width: 98%;
    margin: 10px 0;
    padding: 0;
}

#slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 1100 / 300;
    overflow: hidden;
}

/* SLIDES */
#slideshow .slideitem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#slideshow .slideitem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Texto opcional dentro del slide */
#slideshow .slideitem > span {
    position: absolute;
    z-index: 2;
    top: 4em;
    right: 5em;
    width: 250px;
    transform: rotate(-20deg);
}

/* BOTONES */
.slidebtn {
    position: absolute;
    top: 10px;
    bottom: 10px;
    z-index: 10;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px;
    transform: scale(1.5);
}

.slidebtn:active,
.slidebtn:focus {
    outline: none;
}

.slidebtn img {
    width: 40px;
    height: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease,
                transform 0.3s ease;
}

.slidebtn:hover img {
    opacity: 1;
    transform: scale(1.1);
}

.prev-arrow {
    left: 10px;
}

.next-arrow {
    right: 10px;
}

/* PUNTOS */
.slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    transition: opacity 0.3s ease;
}

.slider-dots li {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 20px;
    background:black;
    margin: 0 5px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.slider-dots li.active-dot {
    background: #fff;
    border-radius: 1em;
    width: 4em;
    transition: 0.25s all;
}

.special {
    border: 2px solid #0088cc;
    color: #0088cc;
    border-radius: 10px;
    padding: 0.5em;
    margin: auto 1em;
    cursor: pointer;
    text-align: center;
}

.side-banners {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: white;
    z-index: 1200;
    padding: 1em 1.5em;
    overflow: auto;
    transition: 0.33s all;
    scrollbar-color: #0088ce white;
}

/*
.side-banners:scrollbar {
    width: 7px;
}

.side-banners:scrollbar-track {
    background: white;
    border-radius: 5px;
}

.side-banners:scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(0,112,192,0.75), rgba(0, 176, 80, 0.75)) !important;
}
*/

.close-btn {
    margin: auto;
    background: white;
    color: tomato;
    border-radius: 5px;
    border: 2px solid tomato;
    width: 36px;
    height: 36px;
}

.toggleMenu .side-banners {
    right: 0px;
    transition: 0.33s all;
}

.style10 {font-size: 16px; color: #000000; font-weight: bold;}
.style01 {color: #000000; padding: 3px;}
.style02 {font-size: 12px; color: #000000; font-weight: bold;}

/* ------------------ */
/*     NAVBAR CSS     */
/* ------------------ */

.navbar-footer {
    height: 26px;
    min-height: 26px;
    background-color: #f9f9f9;
    border-top: 1px solid #b7babe;
}

.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0;
}

.navbar-footer .footer-tools {
    float: right;
    border-bottom: 0;
    font-size: 11px;
    margin: 0;
}

.navbar-footer .footer-tools>li>.tool {
    border-left: 1px solid #b7babe;
    line-height: 1;
    padding: 7px 10px;
}

.navbar-sec {
    background-color: #032b5e;
    border-color: #e7e7e7;
}

.panel {
    width: 600px;
    margin: 1px auto;
}

body.modal-open {
    overflow: visible;
}

.container {
    padding-left: 0;
    padding-right: 0;
}

.wizard .wizard-body {
    background-color: #fcfcfc;
}
   
/*    
.modal {
    position: relative;
    display: block;
    z-index: 1; 
}
*/

.modal-header {
  background: linear-gradient(to right, rgba(0,112,192,0.75), rgba(0, 176, 80, 0.75)) !important;
  border-radius: 15px 15px 0 0 !important;
  color: white;
}

.modal-content {
    border-radius: 15px !important;
}

.close {
    color: white;
    font-size: 1.5em;
}

.modal .wizard nav {
    border-bottom-left-radius: 4px;
}

.modal .wizard .wizard-body {
    border-bottom-right-radius: 4px;
}
    
.panel .wizard nav {
    border-bottom-left-radius: 4px;
}

.panel .wizard .wizard-body {
    border-bottom-right-radius: 4px;
}

.issue-data-block:hover, .issue-data-block.focused {
    background-color: #f5f5f5;
    /*  border-left: 5px solid #3572b0; */
    /*  padding-left: 5px; */
}

.issue-data-block {
    border-bottom: 1px solid #ccc;
    padding: 5px;
    padding-left: 10px;
}

.action-body {
    overflow: auto;
    overflow-y: hidden;
    margin: 3px 0 0 5px;
}

/*
=================================
        MAIL INBOX
=================================
*/
.mail-body {
    padding-left: 20px; 
    padding-right: 20px;
}

.mail-box {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.mail-box aside {
    display: table-cell;
    float: none;
    height: 100%;
    padding: 0;
    vertical-align: top;
}

.mail-box .sm-side {
    width: 20%;
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
     border-right: 1px solid lightgrey;
}

.mail-box .lg-side {
    width: 35%;
    background: #fff;
    border-radius: 0px 4px 4px 0;
    -webkit-border-radius: 0px 4px 4px 0;
    border-right: 1px solid lightgrey;
}

.mail-box .lg-side2 {
    width: 45%;
    background: #fff;
    border-radius: 0px 4px 4px 0;
    padding: 1em;
     -webkit-border-radius: 0px 4px 4px 0;
}

.mail-box .sm-side .user-head {
    background: #2980b9;
    border-radius: 4px 0px 0px 0;
    -webkit-border-radius: 4px 0px 0px 0;
    padding: 10px;
    color: #fff;
    min-height: 80px;
}

.user-head .inbox-avatar {
    width: 65px;
    float: left;
}

.user-head .inbox-avatar img {
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

.user-head .user-name {
    display: inline-block;
    margin: 0 0 0 10px;
}

.user-head .user-name h5 {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 0;
    font-weight: 300;
}

.user-head .user-name h5 a {
    color: #fff;
}

.user-head .user-name span a {
    font-size: 12px;
    color: #87e2e7;
}

a.mail-dropdown {
    background: #1abc9c;
    padding: 3px 5px;
    font-size: 10px;
    color: #ddd;
    border-radius: 2px;
    margin-top: 20px;
}

.inbox-body {
    padding: 20px;
}

.btn-compose {
    background: #2055a4;
    padding: 12px 0;
    text-align: center;
    width: 100%;
    color: #fff;
}

.btn-compose:hover {
    background: #133363;
    color: #fff;
}

ul.inbox-nav {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.inbox-divider {
    border-bottom: none;
}

ul.inbox-nav li {
    display: inline-block;
    line-height: 45px;
    width: 100%;
}

ul.inbox-nav li a {
    color: #6a6a6a;
    line-height: 45px;
    width: 100%;
    display: inline-block;
    padding: 0 20px;
}

ul.inbox-nav li a:hover,
ul.inbox-nav li.active a,
ul.inbox-nav li a:focus {
    color: #6a6a6a;
    background: #def3ff;
}

ul.inbox-nav li a i {
    padding-right: 10px;
    font-size: 16px;
    color: #6a6a6a;
}

ul.inbox-nav li a span.label {
    margin-top: 13px;
}

ul.labels-info li h4 {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    color: #5c5c5e;
    font-size: 13px;
    text-transform: uppercase;
}

ul.labels-info li {
    margin: 0;
}

ul.labels-info li a {
    color: #6a6a6a;
    border-radius: 0;
}

ul.labels-info li a:hover,
ul.labels-info li a:focus {
    color: #6a6a6a;
    background: #d5d7de;
}

ul.labels-info li a i {
    padding-right: 10px;
}

.nav.nav-pills.nav-stacked.labels-info p {
    margin-bottom: 0;
    padding: 0 22px;
    color: #9d9f9e;
    font-size: 11px;
}

.inbox-head {
    padding: 20px;
    background: #3498db;
    color: #fff;
    border-radius: 0 4px 0 0;
    -webkit-border-radius: 0 4px 0 0;
    min-height: 80px;
}

.inbox-head h3 {
    margin: 0;
    display: inline-block;
    padding-top: 6px;
    font-weight: 300;
}

.inbox-head .sr-input {
    height: 40px;
    border: none;
    box-shadow: none;
    padding: 0 10px;
    float: left;
    border-radius: 4px 0 0 4px;
    color: #8a8a8a;
}

.inbox-head .sr-btn {
    height: 40px;
    border: none;
    background: #2980b9;
    color: #fff;
    padding: 0 20px;
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
}

.table-inbox {
    border: 1px solid #d3d3d3;
    margin-bottom: 0;
}

.table-inbox tr td {
    padding: 12px !important;
}

.table-inbox tr td:hover {
    cursor: pointer;
}

.table-inbox tr td .fa-star.inbox-started,
.table-inbox tr td .fa-star:hover {
    color: #f78a09;
}

.table-inbox tr td .fa-star {
    color: #d5d5d5;
}

.table-inbox tr.unread td {
    font-weight: 600;
    background: #f7f7f7;
}

ul.inbox-pagination {
    float: right;
    list-style: none;
}

ul.inbox-pagination li {
    float: left;
}

.mail-option {
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
}

.mail-option .chk-all,
.mail-option .btn-group {
    margin-right: 5px;
}

.mail-option .chk-all,
.mail-option .btn-group a.btn {
    border: 1px solid #e7e7e7;
    padding: 5px 10px;
    display: inline-block;
    background: #fcfcfc;
    color: #afafaf;
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
}

.inbox-pagination a.np-btn {
    border: 1px solid #e7e7e7;
    padding: 5px 15px;
    display: inline-block;
    background: #fcfcfc;
    color: #afafaf;
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
}

.mail-option .chk-all input[type=checkbox] {
    margin-top: 0;
}

.mail-option .btn-group a.all {
    padding: 0;
    border: none;
}

.inbox-pagination a.np-btn {
    margin-left: 5px;
}

.inbox-pagination li span {
    display: inline-block;
    margin-top: 7px;
    margin-right: 5px;
}

.fileinput-button {
    border: 1px solid #e6e6e6;
    background: #eeeeee;
}

.inbox-body .modal .modal-body input,
.inbox-body .modal .modal-body textarea {
    border: 1px solid #e6e6e6;
    box-shadow: none;
}

.btn-default {
    padding: 0.5em 1em;
    border-radius: 10px !important;
    border: 1px solid lightgrey !important;
    margin: 0 0.5em !important;
}

.btn {
    padding: 0.5em 1em;
    border-radius: 10px !important;
}

.btn-primary {
    background-color: #00659C !important;
}

.btn-danger {
    background-color: tomato;
}

.btn-primary:hover {
    background-color: #203158 !important;
    transition: 0.5s all;
}

.btn-send,
.btn-send:hover {
    background: #00A8B3;
    color: #fff;
}

.btn-send:hover {
    background: #009da7;
}

.modal-header h4.modal-title {
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.modal-body label {
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

.heading-inbox h4 {
    font-size: 18px;
    color: #444;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 20px;
}

.sender-info {
    margin-bottom: 20px;
}

.sender-info img {
    width: 30px;
    height: 30px;
}

.sender-dropdown {
    background: #eaeaea;
    padding: 0 3px;
    color: #777;
    font-size: 10px;
}

.view-mail a {
    color: #FF6C60;
}

.attachment-mail {
    margin-top: 30px;
}

.attachment-mail ul {
    width: 100%;
    display: inline-block;
    margin-bottom: 30px;
}

.attachment-mail ul li {
    float: left;
    width: 150px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.attachment-mail ul li img {
    width: 100%;
}

.attachment-mail ul li span {
    float: right;
}

.attachment-mail .file-name {
    float: left;
}

.attachment-mail .links {
    width: 100%;
    display: inline-block;
}

.attachments-sections ul {
    list-style: none;
    border-top: 1px solid #e9e9e9;
    padding: 30px 15px 20px;
}

.attachments-sections ul li {
    padding: 10px;
    margin-right: 20px;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    display: inline-flex;
}

.attachments-sections ul li .thumb {
    display: inline-block;
    margin-right: 10px;
}

.attachments-sections ul li .thumb i {
    font-size: 30px;
    margin: 0;
    color: #2e383e;
}

.attachments-sections ul li .details p.file-name {
    display: block;
    margin-bottom: 0;
    color: #2e383e;
}

.attachments-sections ul li .details .buttons .file-size {
    margin-right: 10px;
    margin-bottom: 0;
    font-size: 13px;
}

.attachments-sections ul li .details .buttons a {
    font-size: 13px;
    margin-right: 10px;
}

.attachments-sections ul li .details .buttons a:last-child {
    margin-right: 0;
}

.new_mail {
    background: #e6e9ed;
    border-radius: 10px !important;
}

/* */
.alertMsg,
.msgSubject,
.msgFrom {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.message-body {
    border: 1px solid lightgrey;
    border-radius: 10px;
    padding: 1em;
}

.timeline-panel > .timeline-heading {
    background: rgba(0,112,192,0.2);
    color: #0070c0;
    font-weight: bold;
}

li.timeline-inverted > .timeline-panel > .timeline-heading {
    background: rgba(0, 176, 80, 0.2) !important;
    color: #00b050;
    font-weight: bold;
}

/*
.circle {
	width: 80px;
	height: 80px;
	border-radius: 50px;
	font-size: 3.5em;
	color: rgba(24,55,94,1);
	margin: 0.5em auto;
	border: 3px solid rgba(24,55,94,1);
}

.circle-full  {
	width: 80px;
	height: 80px;
	border-radius: 80px;
	font-size: 3.5em;
	color: white;
	margin: 0.5em auto;
	background: rgba(0,212,255,1);
	border: 3px solid rgba(0,212,255,1);
}

.column {
    display: flex;
    flex-direction: column;
}

.block, .block2 {
    background: white;
    border: 2px solid #f2f2f2;
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.15);
    padding: 0.5em 0.3em;
    z-index: 2;
    color: grey;
    text-align: center;
    font-size: 1.5em;
    margin: 0.2em;
    transition: 0.5s all;
    line-height: normal;
    height: auto;
}

.block2 {
    background: transparent;
    position: relative;
    padding: 0em;
}

.block i, .block2 i {
    font-size: 4.5em;
    margin: 0.25em auto;
}

.block2 i {
    font-size: 6em;
    padding: 0em;
}

.block span {
    padding-top: 2em;
}

.block:hover {
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
    border: 2px solid #43a7d8;
    transition: 0.33s all;
    color: #43a7d8;
    cursor: pointer;
}

.block2:hover {
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
    transition: 0.33s all;
    cursor: pointer;
}

.rowline, .rowline2 {
    display: flex;
    flex-direction: row;
}

.center {
    display: flex;
}

.quarter {
    width: 24%;
}

.third {
    width: 33%;
}

.third-b {
    width: 30%;
}

.half {
    width: 50%;
}

.three-quarters {
    width: 75%;
}

.full {
    width: 100%;
}
*/

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */


/* FADING TOP */
.fade-in-top {
	-webkit-animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


/* PULSATE */
.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


/*#signupModal .modal-content*/
	/*{*/
	/*	min-height:650px;*/
	/*}*/
	.modal-md2 {
		--mdb-modal-width: 650px;
	}
	.stepper{--mdb-steps-transition: height 0.2s ease-in-out;position:relative;padding:0;margin:0;width:100%;list-style:none;overflow:hidden;transition:var(--mdb-steps-transition)}.steps-step,.timeline-step,.stepper-vertical .stepper-step{--mdb-steps-step-after-left: 2.45rem;--mdb-steps-step-after-width: 1px;--mdb-steps-step-after-margin-top: 0.5rem;--mdb-steps-step-after-bg: rgba(var(--mdb-emphasis-color-rgb), 0.1);height:fit-content;position:relative}.steps-step-after,.timeline-step:after,.stepper-vertical .stepper-step:not(:last-child):after{position:absolute;left:var(--mdb-steps-step-after-left);width:var(--mdb-steps-step-after-width);margin-top:var(--mdb-steps-step-after-margin-top);content:"";background-color:var(--mdb-steps-step-after-bg)}.steps-content,.timeline-content,.stepper-vertical .stepper-content{--mdb-steps-content-padding-y: 1.5rem;overflow:hidden;padding-top:0;padding-bottom:var(--mdb-steps-content-padding-y);padding-right:var(--mdb-steps-content-padding-y)}.steps-head-vertical,.timeline-head,.stepper-vertical .stepper-head{--mdb-steps-head-vertical-padding-top: 1.5rem;--mdb-steps-head-vertical-padding-x: 1.5rem;padding-left:var(--mdb-steps-head-vertical-padding-x);padding-right:var(--mdb-steps-head-vertical-padding-x);padding-top:var(--mdb-steps-head-vertical-padding-top)}.steps-head-icon-vertical,.timeline-head-icon,.stepper-vertical .stepper-head-icon{--mdb-steps-head-icon-vertical-margin-right: 0.75rem;margin-right:var(--mdb-steps-head-icon-vertical-margin-right)}.steps-head-text-after-vertical,.stepper-vertical .stepper-head-text:after{position:absolute}.steps-head,.timeline-head,.stepper-head{--mdb-steps-head-line-height: 1.3;--mdb-steps-head-hover-bgc: rgba(var(--mdb-emphasis-color-rgb), 0.025);display:flex;align-items:center;text-decoration:none;color:unset;line-height:var(--mdb-steps-head-line-height)}.steps-head-hover,.stepper-head:hover{background-color:var(--mdb-steps-head-hover-bgc)}.steps-head-focus,.stepper-head:focus{outline:none}.steps-head-text,.timeline-head-text,.stepper-head-text{--mdb-steps-head-text-color: rgba(var(--mdb-emphasis-color-rgb), 0.55);--mdb-steps-head-text-after-font-size: 0.8rem;color:var(--mdb-steps-head-text-color)}.steps-head-text-after,.timeline-head-text:after,.stepper-head-text:after{display:flex;font-size:var(--mdb-steps-head-text-after-font-size);content:attr(data-mdb-content)}.steps-head-icon,.timeline-head-icon,.stepper-head-icon{--mdb-steps-head-icon-font-size: 0.875rem;--mdb-steps-head-icon-width: 1.938rem;--mdb-steps-head-icon-height: 1.938rem;--mdb-steps-head-icon-font-weight: 500;display:flex;justify-content:center;align-items:center;border-radius:100%;font-size:var(--mdb-steps-head-icon-font-size);width:var(--mdb-steps-head-icon-width);height:var(--mdb-steps-head-icon-height);font-weight:var(--mdb-steps-head-icon-font-weight)}.steps-active-head-text,.timeline-head-text,.stepper-active .stepper-head-text{--mdb-steps-active-head-text-font-weight: 500;font-weight:var(--mdb-steps-active-head-text-font-weight)}.stepper{--mdb-stepper-padding-x: 1rem;--mdb-stepper-step-height: 4.5rem;--mdb-stepper-step-head-padding-left: 0rem;--mdb-stepper-step-head-padding-right: 0rem;--mdb-stepper-step-head-height: 1px;--mdb-stepper-step-head-bg: rgba(var(--mdb-emphasis-color-rgb), 0.1);--mdb-stepper-step-head-margin-right: 0.5rem;--mdb-stepper-step-head-margin-left: 0.5rem;--mdb-stepper-head-icon-margin-y: 1.5rem;--mdb-stepper-head-icon-margin-right: 0.5rem;--mdb-stepper-vertical-step-top: 3.25rem;--mdb-stepper-vertical-step-height: calc(100% - 2.45rem);--mdb-stepper-vertical-content-padding-left: 3.75rem;--mdb-stepper-vertical-content-transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;--mdb-stepper-vertical-head-padding-bottom: 1.5rem;--mdb-stepper-mobile-step-margin-y: 1rem;--mdb-stepper-mobile-step-head-padding-x: 0.25rem;--mdb-stepper-mobile-head-icon-height: 0.5rem;--mdb-stepper-mobile-head-icon-width: 0.5rem;--mdb-stepper-mobile-content-top: 2.56rem;--mdb-stepper-mobile-active-head-icon-bg: var(--mdb-primary);--mdb-stepper-mobile-completed-head-icon-bg: var(--mdb-success);--mdb-stepper-head-icon-bg: var(--mdb-surface-inverted-bg);--mdb-stepper-head-icon-color: var(--mdb-surface-inverted-color);--mdb-stepper-completed-head-icon-bg: var(--mdb-success-bg-subtle);--mdb-stepper-completed-head-icon-color: var(--mdb-success-text-emphasis);--mdb-stepper-active-head-icon-bg: var(--mdb-primary-bg-subtle);--mdb-stepper-active-head-icon-color: var(--mdb-primary-text-emphasis);--mdb-stepper-invalid-head-icon-bg: var(--mdb-danger-bg-subtle);--mdb-stepper-invalid-head-icon-color: var(--mdb-danger-text-emphasis);--mdb-stepper-disabled-head-color: rgba(var(--mdb-emphasis-color-rgb), 0.3);--mdb-stepper-disabled-head-icon-bg: var(--mdb-surface-inverted-bg);--mdb-stepper-disabled-head-icon-color: rgba(var(--mdb-surface-inverted-color-rgb), 0.55);--mdb-stepper-mobile-head-padding-y: 0.5rem;--mdb-stepper-mobile-head-padding-x: 1rem;--mdb-stepper-mobile-footer-height: 2.5rem;--mdb-stepper-back-btn-i-margin-right: 0.5rem;--mdb-stepper-next-btn-i-margin-left: 0.5rem;--mdb-stepper-mobile-progress-bar-height: 0.3rem;--mdb-stepper-mobile-progress-height: 0.3rem;--mdb-stepper-mobile-progress-background-color: var(--mdb-secondary-bg);--mdb-stepper-mobile-active-progress-bar-color: var(--mdb-primary);--mdb-stepper-mobile-footer-bg: var(--mdb-stepper-mobile-bg);--mdb-stepper-mobile-head-bg: var(--mdb-stepper-mobile-bg);--mdb-stepper-mobile-invalid-icon-bg: var(--mdb-danger)}.stepper:not(.stepper-vertical){display:flex;justify-content:space-between}.stepper:not(.stepper-vertical) .stepper-content{position:absolute;width:100%;padding-right:var(--mdb-stepper-padding-x);padding-left:var(--mdb-stepper-padding-x)}.stepper:not(.stepper-vertical) .stepper-step{flex:auto;height:var(--mdb-stepper-step-height)}.stepper:not(.stepper-vertical) .stepper-step:first-child .stepper-head{padding-left:var(--mdb-stepper-step-head-padding-left)}.stepper:not(.stepper-vertical) .stepper-step:last-child .stepper-head{padding-right:var(--mdb-stepper-step-head-padding-right)}.stepper:not(.stepper-vertical) .stepper-step:not(:first-child) .stepper-head:before{flex:1;height:var(--mdb-stepper-step-head-height);width:100%;margin-right:var(--mdb-stepper-step-head-margin-right);content:"";background-color:var(--mdb-stepper-step-head-bg)}.stepper:not(.stepper-vertical) .stepper-step:not(:last-child) .stepper-head:after{flex:1;height:var(--mdb-stepper-step-head-height);width:100%;margin-left:var(--mdb-stepper-step-head-margin-left);content:"";background-color:var(--mdb-stepper-step-head-bg)}.stepper:not(.stepper-vertical) .stepper-head-icon{margin-top:var(--mdb-stepper-head-icon-margin-y);margin-right:var(--mdb-stepper-head-icon-margin-right);margin-bottom:var(--mdb-stepper-head-icon-margin-y);margin-left:0}.stepper-vertical .stepper-step:not(:last-child):after{top:var(--mdb-stepper-vertical-step-top);height:var(--mdb-stepper-vertical-step-height)}.stepper-vertical .stepper-content{padding-left:var(--mdb-stepper-vertical-content-padding-left);transition:var(--mdb-stepper-vertical-content-transition)}.stepper-vertical .stepper-content-hide{margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important;padding-bottom:0 !important;height:0 !important}.stepper-vertical .stepper-head{padding-bottom:var(--mdb-stepper-vertical-head-padding-bottom)}.stepper.stepper-mobile{justify-content:center;align-items:flex-end}.stepper.stepper-mobile.stepper-progress-bar .stepper-head-icon{display:none}.stepper.stepper-mobile .stepper-step{flex:unset;height:fit-content;margin-top:var(--mdb-stepper-mobile-step-margin-y);margin-bottom:var(--mdb-stepper-mobile-step-margin-y)}.stepper.stepper-mobile .stepper-step:not(:last-child) .stepper-head:after{margin-left:0}.stepper.stepper-mobile .stepper-step:not(:first-child) .stepper-head:before{margin-right:0}.stepper.stepper-mobile .stepper-step:not(:last-child):not(:first-child) .stepper-head{padding-left:var(--mdb-stepper-mobile-step-head-padding-x);padding-right:var(--mdb-stepper-mobile-step-head-padding-x)}.stepper.stepper-mobile .stepper-head-icon{font-size:0;margin:0;height:var(--mdb-stepper-mobile-head-icon-height);width:var(--mdb-stepper-mobile-head-icon-width);z-index:1}.stepper.stepper-mobile .stepper-head-text{display:none}.stepper.stepper-mobile .stepper-content{top:var(--mdb-stepper-mobile-content-top)}.stepper.stepper-mobile .stepper-active .stepper-head-icon{background-color:var(--mdb-stepper-mobile-active-head-icon-bg)}.stepper.stepper-mobile .stepper-completed .stepper-head-icon{background-color:var(--mdb-stepper-mobile-completed-head-icon-bg)}.stepper.stepper-mobile .stepper-invalid .stepper-head-icon{background-color:var(--mdb-stepper-mobile-invalid-icon-bg)}.stepper-form{display:inherit;justify-content:inherit;width:inherit;position:inherit}.stepper-content{left:0}.stepper-head{cursor:pointer}.stepper-head-icon{background-color:var(--mdb-stepper-head-icon-bg);color:var(--mdb-stepper-head-icon-color)}.stepper-completed .stepper-head-icon{background-color:var(--mdb-stepper-completed-head-icon-bg);color:var(--mdb-stepper-completed-head-icon-color)}.stepper-active .stepper-content{display:block}.stepper-active .stepper-head-icon{background-color:var(--mdb-stepper-active-head-icon-bg);color:var(--mdb-stepper-active-head-icon-color)}.stepper-invalid .stepper-head-icon{background-color:var(--mdb-stepper-invalid-head-icon-bg);color:var(--mdb-stepper-invalid-head-icon-color)}.stepper-disabled .stepper-head{cursor:default}.stepper-disabled .stepper-head-icon{background-color:var(--mdb-stepper-disabled-head-icon-bg);color:var(--mdb-stepper-disabled-head-icon-color)}.stepper-disabled .stepper-head-text{color:var(--mdb-stepper-disabled-head-color)}.stepper-mobile-head{position:absolute;align-self:normal;height:fit-content;background-color:var(--mdb-stepper-mobile-head-bg);width:100%;padding-top:var(--mdb-stepper-mobile-head-padding-y);padding-right:var(--mdb-stepper-mobile-head-padding-x);padding-bottom:var(--mdb-stepper-mobile-head-padding-y);padding-left:var(--mdb-stepper-mobile-head-padding-x)}.stepper-mobile-footer{position:absolute;display:flex;justify-content:space-between;align-items:center;background-color:var(--mdb-stepper-mobile-footer-bg);width:100%;height:var(--mdb-stepper-mobile-footer-height)}.stepper-back-btn{display:block;left:0}.stepper-back-btn .btn-link{color:unset}.stepper-back-btn i{margin-right:var(--mdb-stepper-back-btn-i-margin-right)}.stepper-next-btn{display:block;right:0}.stepper-next-btn .btn-link{color:unset}.stepper-next-btn i{margin-left:var(--mdb-stepper-next-btn-i-margin-left)}.stepper-mobile-progress-bar{height:var(--mdb-stepper-mobile-progress-bar-height);background-color:var(--mdb-stepper-mobile-active-progress-bar-color);width:0}.stepper-mobile-progress{height:var(--mdb-stepper-mobile-progress-height);flex-grow:100;background-color:var(--mdb-stepper-mobile-progress-background-color)}

@media (max-width: 450px) {
	.h-custom {
		height: 100%;
	}
}

/***** BREAKPOINTS *****/

/*  Large Devices (laptop /desktop) - 1080px an up  */
@media only screen and (max-width: 1080px) {

    h1 {
        margin: 1em auto 0.25em auto;
        font-size: 2em;
    }

    main {
        padding: 0.5em;
    }

    .container {
        width: 100% !important;
        margin: 0.8em 0em;
    }

    .margin8 {
        margin-top: 12em;
    }

    .banner {
        width: 100%;
        margin-bottom: 2em;
    }

    .block, .block2 {
        font-size: 1.25em;
        width: auto;
    }

    .block2 {
        background: transparent;
        height: 12em;
        width: 100%;
    }

    .rowline2 {
        display: flex;
        flex-direction: column;
    }

    .column-row {
        display: flex;
        flex-direction: row;
    }

    .blue, .green, .electrolight, .bluepurple {
        width: 100.4%;
        height: 101%;
    }
}

/*  Large Devices (landscape tablets) - 768px an up  */
@media only screen and (max-width: 768px) {

    .card-pf img, .card-pf2 img {
        height: 90px; 
        width: 90px;
    }

    .collapse {
        display:none !important;
    }

    h1 {
        margin: 2em auto 0.25em auto;
        font-size: 2em;
    }

    h2 {
        font-size: 1.75em;
        margin: 0.1em;
    }

    h3 {
        font-size: 1.25em;
        margin: 0em;
    }

    em {
        font-size: 1em;
    }

    #plain {
        margin: auto;
        width: 600px;
    }

    .modal-dialog {
    /*  height: 80% !important; */
        padding-top:10%;
    }
        
    .modal-content {
        height: 100% !important;
        overflow:visible;
    }
    
    .modal-body {
        height: 80%;
        overflow: auto;
    }
    
    .modal .modal-dialog {
        width: 600px;
    }

    .modal-confirm { 
        color: #636363;    
        width: 400px; 
    }

    .modal-confirm .modal-content {
        padding: 20px;  
        border-radius: 5px; 
        border: none; 
        text-align: center;   
        font-size: 14px;
    }

    .modal-confirm .modal-header {  
        border-bottom: none; 
        position: relative; 
    }
    
    .modal-confirm h4 { 
        text-align: center; 
        font-size: 26px; 
        margin: 30px 0 -10px; 
    }
    
    .modal-confirm .close { 
        position: absolute; 
        top: -5px;  
        right: -2px;
    }

    .modal-confirm .modal-body {
        color: #999;
    }
        
    .modal-confirm .modal-footer {
        border: none; 
        text-align: center;
        border-radius: 5px;
        font-size: 13px;
        padding: 10px 15px 25px;
    }

    .modal-confirm .modal-footer a { 
        color: #999; 
    } 

    .modal-confirm .icon-box {
        width: 80px; 
        height: 80px;  
        margin: 0 auto; 
        border-radius: 50%; 
        z-index: 9; 
        text-align: center; 
        border: 3px solid #f15e5e;
    }
    
    .modal-confirm .icon-box i {
        color: #f15e5e; 
        font-size: 46px;    
        display: inline-block;  
        margin-top: 13px;
    }
    
    .modal-confirm .btn, .modal-confirm .btn:active {
        color: #fff;
        border-radius: 4px;
    /*  background: #60c7c1; */
        text-decoration: none;
        transition: all 0.4s;
        line-height: normal;
        min-width: 120px;
        border: none;
        min-height: 40px;
        border-radius: 3px;
        margin: 0 5px;
    }
    
    .modal-confirm .btn-secondary { 
        background: #c1c1c1; 
    }
    
    .modal-confirm .btn-secondary:hover, .modal-confirm .btn-secondary:focus {  
        background: #a8a8a8; 
    }

    .modal-confirm .btn-danger { 
        background: #f15e5e; 
    }

    .modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus { 
        background: #ee3535; 
    }

    .trigger-btn {
        display: inline-block;
        margin: 100px auto;
    }
    
    .panel {
        width: 600px;
        margin: 1px auto;
    }

    .col-7, .col-5 {
        width: 100%;
        margin: 1em;
    }

    .navbar-pmgd {
        height: 4em;
    }

    .big-title2 {
        width: 90%;
        margin: 0 5%;
        top: 25%;
    }

    .slider {
        width: 100%;
        height: 50vh;
    }

    .logo {
        width: 11em;
        margin: 1em 37%;
    }

    .big-title {
        top: 12%;
    }

    .degrade-pmgd, .degrade-pip {
        width: 100%;
        height: 50vh;
    }

    .column-row {
        display: flex;
        flex-direction: column;
    }

    .block {
        font-size: 1.5em;
        margin: 0.3em 0;
    }

    .block2 {
        font-size: 1.5em;
        margin: 0.25em !important;
        height: 10em;
        width: auto;
    }

    .gda {
        height: 7em;    
    }

    .col-sm-6 {
        margin: 0.75em 0;
        padding: 0;
    }

    .block i {
        font-size: 5em;
    }

    .block2 i {
        font-size: 4em !important;
    }

    .rowline, .rowline2 {
        flex-direction: column;
    }

    .others {
        margin: 0.25em !important;
    }

    .others img {
        max-width: 35% !important;
        position: relative;
        top: -3.5em;
        margin: 0 auto;
    }

    .scale:hover {
        transform: scale(1.025);
        transition: 0.33s all;
    }

    .border-box i {
        font-size: 3.5em !important;
        margin: auto 0;
    }

    .border-box {
        font-size: 0.85em;
    }   

    .active:has(i:hover) {
        transform: scale(1.05);
    }

    table {
        font-size: 0.75em;
    }

    tbody button i {
        font-size: 3.5em !important;
        transition: 0.5s all;
    }
}

@media (min-width:992px) {
    .navbar-sidebar .navbar-form {
        margin-bottom: 24px;
        margin-right: 0;
        margin-top: 23px;
        padding-left: 10px;
        padding-right: 0
    }
            
    .navbar-sidebar .navbar-form:before {
        left: 14px;
        top: 4px
    }

    .navbar-sidebar .navbar-right>li>a {
        padding: 25px 15px
    }

    .home .navbar-sidebar .navbar-right>li.open,
    .home .navbar-sidebar .navbar-right>li:hover {
        background: #252525;
        background: rgba(0, 0, 0, .1)
    }

    .navbar-sidebar .navbar-toggle-sidebar {
        display: none
    }

    .has-sidebar header+.container-fluid{
        padding-left:260px
    }

    .navbar-sidebar.navbar-primary {
        left: -240px
    }
            
    .sections>.row h3 {
        text-align: center
    }
}

@media (min-width:768px) and (max-width:991px) {
    .navbar-sidebar .secondary-menu-toggle-icon {
        color: #0088ce;
        display: inline-block;
        font-family: FontAwesome;
        font-size: inherit;
        margin-right: 10px;
        -webkit-font-smoothing: antialiased
    }
            
    .navbar-sidebar .secondary-menu-toggle-icon:before {
        content: '\f190'
    }

    .navbar-sidebar .secondary-menu-toggle-icon.collapsed:before {
        content: '\f18e'
    }
}

/*  Large Devices (landscape tablets) - 600px an up  */
@media only screen and (max-width: 600px) {
    .navbar-products {
        height: 8em;
    }

    h1 {
        margin: 2em auto 0.25em auto;
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.5em;
        margin: 0.1em;
    }

    .plus {
        font-size: 5em;
    }

    tbody button i {
        font-size: 3em !important;
        transition: 0.5s all;
    }

    .schedule {
        width: inherit;
        font-size: 1em !important;
        margin: 0.75em 0.25em;
    }

    .overflow {
        overflow-x: auto;
        padding-top: 0.5em;
        scrollbar-color: #43a7d8 white;
        scrollbar-width: thin;
        scrollbar-gutter: auto;
    }

    .view768 {
        width: 768px;
        margin: 1em auto;
        font-size: 1em;
    }

    .inners {
        margin: 1em auto;
    }

    .logo {
        width: 10em;
        margin: 2em 33%;
    }

    .mobile-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .mobile-wrap .quarter {
        width: 43.75%;
        margin: 0.5em auto;
    }

    .third-b {
        width: 45%;
    }

    .block {
        margin: 1.5% 1%;
    }

    .block i {
        font-size: 6.5em;
    }

    .block2 {
        font-size: 1em;
    }

    .block2 i {
        font-size: 4em !important;
    }

    .logo {
        width: 9em;
        margin: 2em 37.5%;
    }

    .slider {
        height: 45vh;
    }

    .degrade {
        height: 45vh;
    }

    .line-block {
        margin: 0.75em auto;
    }

    .panel {
        width: 90%;
        margin: 1px auto;
    }

    .navbar-custom { background-color: #032b5e !important; }
        
    .kc-action-cell {
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    /*  cursor: pointer; */
    }
        
    .error{color: #c00;}

    .tooltip-inner {
        text-align: left;
        min-width: 350px;
    }
        
    .createdDiv{
        font-size:20px;color:#1d97d5
    }
}

/*  Large Devices (landscape tablets) - 480px an up  */
@media only screen and (max-width: 400px) {

    .logo {
        width: 9em;
        margin: 2em 32%;
    }

    h1 {
        margin: 2.75em auto 0.25em auto;
        font-size: 1.75em;
    }

    h2 {
        font-size: 1.25em;
        margin: 0.1em;
    }

    .mobile-wrap .quarter {
        width: 42.5%;
    }

    .third-b {
        width: 44%;
    }

}