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

#wrapper-uis {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar-uis a,
#sidebar-uis a:hover,
#sidebar-uis a:focus {
    color: inherit !important;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar-uis {
    min-width: 220px;
    max-width: 220px;
    background: rgba(42, 46, 134, 1.00);
    color: #fff;
    transition: all 0.3s;
}

#sidebar-uis.active {
    margin-left: -230px;
}

#sidebar-uis .sidebar-header {
    padding: 20px;
    background: rgba(42, 46, 134, 1.00);
}

#sidebar-uis ul.components {
    padding: 80px 0;
}

#sidebar-uis ul p {
    color: #fff;
    padding: 1px;
}

#sidebar-uis ul li {
 border-bottom: 1px solid rgba(255, 255, 255, 0.30);
}

#sidebar-uis ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar-uis ul li a:hover {
    color: #fff;
    background: rgba(82, 161, 234, 1.00);
}

#sidebar-uis ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: rgba(42, 46, 134, 1.00);
}

#sidebar-uis .icon-container { text-align: center; }
#sidebar-uis .icon-container [class^="flaticon-"], .icon-container [class*=" flaticon-"] {
            color: #fff; font-size: 27px; background-color: rgba(42, 46, 134, 1.00); margin: 0 auto; margin-bottom: 0; padding: 12px; border-radius: 2px; 
            -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; display: block; width: 65px; box-shadow: 0px 3px 25px 0px rgba(42, 46, 134, 1.00);
        }
#sidebar-uis .icon-marginl-10 {
    margin-left:10px;
}
#sidebar-uis .icon-marginr-20 {
    margin-right:20px;
}
#sidebar-uis .icon-marginl-20 {
	margin-left:20px;
}
#sidebar-uis .icon-marginr-35 {
	margin-right:35px;
}
#sidebar-uis .icon-name { color: #fff; font-size: 18px; transition: .3s; }
#sidebar-uis .icon-container [class*="flaticon-"]:hover { color: #fff; background-color: rgba(82, 161, 234, 1.00); cursor: pointer;}
#sidebar-uis .icon-container [class*="flaticon-"]:hover + span[class="icon-name"] { color: #fff; background-color: rgba(42, 46, 134, 1.00); cursor: pointer;}

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

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

#sidebar-uis ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: rgba(42, 46, 134, 1.00);
}


/* ---------------------------------------------------
    BANNER SETTING
----------------------------------------------------- */
#banner-uis {
	z-index: 1000;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	color: #fff;
	background-color: rgba(42, 46, 134, 1.00);
	width: 100%;
	display: block;
	height: auto;
	overflow: hidden;
    border-bottom: solid #aaa 1px;
}

#banner-uis #uis-logo {
	height: 5.5rem;
    max-width: 220px;
    min-width: 220px;
    background-color: #acb0c3;
}

#banner-uis #uis-logo a {
	padding-top: 0rem;
    padding-bottom: 0rem;
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

#banner-uis img {
    display: inline;
    height: 5.5rem;
    width: auto;
}

#banner-uis h2 {
	vertical-align: middle;
	text-align:center;
    font-size: 1.2em !important;
}

#banner-uis .navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
}

#banner-uis #user {
	height: auto;
}

#banner-uis #user a {
	position: relative;
	display: inline-block;
	padding-left: 4.5rem;
	/*font-weight: 700;*/
	line-height: 1.5em;
	vertical-align: middle;
	/*font-size: 1.125rem;*/
	font-size: 1rem;
    color:#fff;
}

#banner-uis #user a:link {
    text-decoration: none;
}

#banner-uis #user a:before {
	content: "";
	width: 4rem;
	height: 4rem;
	display: block;
	background: url("../common/images/icon_me.svg")no-repeat 50% 50% / cover;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -2rem;
}

#banner-uis #user a span {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  padding: 2renm 2rem 0 0;
}

#userinfo-uis .icon-container { text-align: center; }
#userinfo-uis .icon-container [class^="flaticon-"], .icon-container [class*=" flaticon-"] {
            color: #fff; font-size: 22px; background-color: #555; margin: 0 auto; margin-bottom: 0; padding: 8px; border-radius: 2px; 
            -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; display: block; width: 65px; 
        }
#userinfo-uis .icon-container [class*="flaticon-"]:hover { color: #aaa; cursor: pointer;}
#userinfo-uis .icon-container [class*="flaticon-"]:hover + span[class="icon-name"] { color: #aaa; cursor: pointer;}


/* ---------------------------------------------------
    CHAT MESSAGES
----------------------------------------------------- */

/* Chat Header */

.chat-messages .chat-container .chat-header {
    padding: 20px 0 20px 20px;
    border-bottom: 1px solid #e9ecef;
}
.chat-messages .chat-container .chat-header .media i.icon {
    font-size: 24px;
    padding: 10px;
    background-color: #c2d5ff;
    border-radius: 50%;
    color: #1a73e9;
}
.chat-messages .chat-container .chat-header .media .custom-dropdown a.dropdown-toggle:hover {
    background-color: transparent;
}

.chat-messages .chat-container .chat-header .media .media-body h6 {
    font-size: 19px;
    font-weight: 600;
    line-height: 2.5;
    color: #1d1d1d;
}
.chat-messages .chat-container .chat-header .media .media-body p {
    color: #6a6c86;
}
.chat-messages .chat-container .chat-header .media i:not(.icon) {
    font-size: 17px;
    color: #888ea8;
    cursor: pointer;
}

/* Chat Body */


.chat-messages .chat-container .chat-body .message-scroll {
    height: 290px;
}


.chat-messages .chat-container .chat-body .table > tbody > tr > td {
    padding: 18px 19px 24px 19px;
}
.chat-messages .chat-container .chat-body .table > tbody > tr .media img {
    width: 48px;
}
.chat-messages .chat-container .chat-body .table > tbody > tr .media .media-body h6 {
    font-weight: 600;
    font-size: 17px;
    color: #1d1d1d;
}
.chat-messages .chat-container .chat-body .table > tbody > tr .media .media-body p.message {
    color: #6a6c86;
    font-size: 15px;
}
.chat-messages .chat-container .chat-body .table > tbody > tr .media .media-body a:hover {
    text-decoration: underline !important;
}
.chat-messages .chat-container .chat-body .table > tbody > tr > td .meta-time {
    color: #9a9a9a;
    font-size: 13px;
}
.chat-messages .chat-container .chat-body .show-all-msg a {
    color: #3862f5;
    font-size: 19px;
}

/* Chat Header */

.chat-lines .chat-container .chat-header {
    padding: 20px 0 20px 20px;
    border-bottom: 1px solid #e9ecef;
}
.chat-lines .chat-container .chat-header .media i.icon {
    font-size: 24px;
    padding: 10px;
    background-color: #3862f5;
    border-radius: 50%;
    color: #fff;
}
.chat-lines .chat-container .chat-header .media .custom-dropdown a.dropdown-toggle:hover {
    background-color: transparent;
}

.chat-lines .chat-container .chat-header .media .media-body h6 {
    font-size: 19px;
    font-weight: 600;
    line-height: 2.5;
    color: #1d1d1d;
}
.chat-lines .chat-container .chat-header .media .media-body p {
    color: #6a6c86;
}
.chat-lines .chat-container .chat-header .media i:not(.icon) {
    font-size: 17px;
    color: #888ea8;
    cursor: pointer;
}

/* Chat Body */


.chat-lines .chat-container .chat-body .message-scroll {
    height: 290px;
}

.chat-lines .chat-container .chat-body .table > tbody > tr > td {
    padding: 8px 19px 14px 19px;
}
.chat-lines .chat-container .chat-body .table > tbody > tr .media img {
    width: 48px;
}
.chat-lines .chat-container .chat-body .table > tbody > tr .media .media-body h6 {
    font-weight: 600;
    font-size: 17px;
    color: #1d1d1d;
}
.chat-lines .chat-container .chat-body .table > tbody > tr .media .media-body p.message {
    color: #6a6c86;
    font-size: 15px;
}
.chat-lines .chat-container .chat-body .table > tbody > tr > td .meta-time {
    color: #9a9a9a;
    font-size: 13px;
}
.chat-lines .chat-container .chat-body .show-all-msg a {
    color: #3862f5;
    font-size: 19px;
}

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

#content-uis {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
    background-image: linear-gradient(
        135deg
        , #f8f9fd 0%, #D8D7E1 100%);
}

#top #notice a {
	text-decoration: none;
}

#top #notice dl {
	display: block;
	padding: 0;
}

#top #notice a:first-of-type dl {
	padding-top: 0;
}

#top #notice dl dt {
	display: block;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.65em;
	position: relative;
	padding-bottom: 0.375rem;
}

#top #notice dl dt span {
	display: inline-block;
	padding: 0 0.8125em;
	line-height: 1.25rem;
	height: 1.25rem;
	overflow: hidden;
	text-align: center;
	min-width: 7.5rem;
	color: white;
	border-radius: 0.625rem;
	margin-left: 0.875em;
	vertical-align: middle;
	font-size: 0.875rem;
	margin-top: -0.125em;
}

#top #notice dl dt span.expiration {
	background-color: rgba(244, 90, 90, 1.00);
}

#top #notice dl dt span.product {
	background-color: rgba(53, 140, 212, 1.00);
}

#top #notice dl dt span.completion {
	background-color: rgba(107, 113, 199, 1.00)
}

#top #notice dl dt span.etc {
	background-color: rgba(136, 136, 136, 1.00);
}

#top #notice dl dd {
	display: block;
	color: rgba(17, 17, 17, 1.00);
	line-height: 1.65em;
	font-size: 1.125rem;
}

/* ---------------------------------------------------
    FOOTER STYLE
----------------------------------------------------- */

#footer-uis {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    NAVBAR STYLE
----------------------------------------------------- */

#navbar-uis {
	/* - position: fixed; - */
    right: 0;
    top: 76px;
    width: 100%;
    height: 46px;
    border-top: solid #aaa 1px;
    background: #555;
    padding-top: 3px;
    z-index: 10;

}

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


@media screen and (min-width: 641px) and (max-width: 768px){
    #uis-title strong {
        display: none;
    }
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -230px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
    .navbar-title {
        display: none !important;
    }
    #uis-title strong {
        display: none;
    }    
}

/*  
    ======================
        MEDIA QUERIES
    ======================
*/

@media (max-width: 991px) {

    /*
        =============
            NavBar
        =============
    */

    .main-container.sidebar-closed #content {
        margin-right: 0;
    }

    header.tabMobileView {
        box-shadow: none!important;
    }
    header.tabMobileView img {
        margin-left: 5px;
    }

    header.tabMobileView .toggle-sidebar,
    header.tabMobileView .sidebarCollapse {
        display: inline-block;
        color: #beb3b6;
        font-size: 30px;
        line-height: 0;
        margin-left: 6px;
        margin-right: 0;
    }

    header.tabMobileView {
        background-color: rgba(42, 46, 134, 1.00);
        height: 47px;
    }

    #banner-uis .navbar input.search-form-control {
        background-color: #292938!important;
        color: #d3d3d3!important;
    }

    #banner-uis .navbar {
        background-color: rgba(42, 46, 134, 1.00) !important;
        border-bottom: 0.01rem solid rgba(42, 46, 134, 1.00) !important;
    }

    #banner-uis .navbar .navbar-nav .nav-item.dropdown .nav-link:hover span {
        color: #fff!important;
    }

    #banner-uis .navbar .navbar-nav .nav-item.dropdown.show a.nav-link span {
        color: #fff!important;
    }

    #banner-uis .navbar .navbar-nav .nav-item.user-profile-dropdown .nav-link.user {
        margin-right: 0;
    }
    #banner-uis .navbar .navbar-nav .nav-item.dropdown.message-dropdown .dropdown-menu {
        left: -65px;
    }

    #banner-uis .navbar .navbar-nav .nav-item.dropdown.notification-dropdown .dropdown-menu {
        left: -120px;
    }

    #banner-uis .navbar .navbar-nav .nav-item.app-dropdown .dropdown-menu {
        right: -39px;
    }
    #banner-uis .navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu {
        right: -80px;
    }
    #banner-uis h2 {
        font-size: 1.25em !important;
    }
    #banner-uis h6 {
        font-size: 0.75em !important;
    }
    #banner-uis #user a span {
        font-size: 0.75em !important;
      }
    .navbar-brand {
        display: none;
    }
    #uis-title strong {
        display: none;
    }    
        
    /*
        =============
            Sidebar
        =============
    */


    body:not(.topbar-layout) header.navbar:not(.tabMobileView) {
        top: 47px;
    }
    #content {
        margin-top: 104px;
    }
    .main-container:not(.sbar-open) .sidebar-wrapper {
        width: 0;
        left: -35px;
    }
    .sidebar-wrapper .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
        background-color: #707792!important;
    }
    .sidebar-wrapper .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        background-color: #707792!important;
    }
    .sidebar-wrapper .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        width: 3px;
    }
    .sidebar-wrapper {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 9999;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }
    .sidebar-noneoverflow {
        overflow: hidden;
    }
    #sidebar {
        height: 100vh!important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }

    /* display .overlay when it has the .active class */

    .overlay.show {
        display: block;
        opacity: .7;
    }
    #dismiss {
        position: absolute;
        top: 110px;
        right: -32px;
        background-color: #2b293d;
        padding: 5px 9px;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        color: #fff;
        cursor: pointer;
    }



    /*
        ======================
            Control Sidebar
        ======================
    */
    .control-sidebar { height: 90vh!important; }
    .cs-noneoverflow {
        overflow: hidden;
        -webkit-overflow-scrolling:touch;
    }


    /*
        =============
            Footer
        =============
    */
    .footer-section .footer-section-1 {
        width: 0;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .control-sidebar { top: 103px!important; }
}
@media (max-width: 767px) {
    .control-sidebar { top: 104px!important; }
    .control-sidebar-scroll { height: 87.5%!important; }
}


@media (min-width: 992px) {
    header.navbar {
        margin: 0 0 0 220px;
        height: 5.5rem;
    } 
}

/* ---------------------------------------------------
    COMMON STYLE
----------------------------------------------------- */

#download-request-form .badge, #shipping-request-form .badge {
    display: inline-block;
    text-align: center;
    height: 1.75em;
    padding: 0 1em;
    vertical-align: middle;
    background: #1abc9c;
    color: #fff !important;
    border-radius: 0.875em;
    line-height: 1.75em;
    white-space: nowrap;
    font-size: 1rem !important;
    overflow: hidden;
}

/* ---------------------------------------------------
    COMMON STYLE
----------------------------------------------------- */
.font-w{
	font-weight: 600;
}
.itemize .item-font{
	display: block;
    width: 5rem;
}
.container h3 span.font-14{
	font-size: 14px;
}
.form label.width-15{
	width:15rem;
}

.sev_check {
    visibility: hidden;
}