/* class margin */

.mt25 {
    margin-top: 25px;
}

/* font menu left */

.left-side li a {
    letter-spacing: 0;
}

.page-sidebar .page-sidebar-menu .sub-menu li>a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li>a {
    font-size: 13.5px;
}

.pl-0 {
	padding-left:0;
}

.font-size-12 {
	font-size: 12px;
}

.font-size-16 {
	font-size: 16px !important;
}

.doubleLine {
	text-decoration-line: underline;
  	text-decoration-style: double;
}

.not-allowed {
	cursor: not-allowed !important;
    pointer-events: initial !important;
}
/* new color template */

/* blue */

/*
.sidebar-nav {
    background: rgb(8, 146, 185);
}

.skin-josh .sidebar .page-sidebar-menu > li {
    border-bottom: 1px solid rgb(8, 146, 185);
}

.skin-josh .logo {
    background-color: rgb(8, 146, 185);
}

.skin-josh .navbar {
    background-color: rgb(8, 146, 185);
}

.skin-josh .left-side {
    background: rgb(8, 146, 185);
}


.left-side .active {
    background: #097594 !important;
}

.skin-josh .sidebar li ul {
    background: rgb(35, 166, 204);
    border-top: 0.08em solid rgba(0, 175, 226, 0.64);
}

.skin-josh .sidebar .page-sidebar-menu > li:hover {
    background: #0E83A5;
    border-bottom: 1px solid #0E83A5;
}


body > .header .navbar .sidebar-toggle {
    background-color: #097594;
}

.navbar-right .nav .open > a, .navbar-right .nav .open > a:hover, .navbar-right .nav .open > a:focus, .navbar-right .nav > li > a:hover, .navbar-right .nav > li > a:focus {
    background-color: #097594;
    border-color: #1A9A8C;
}

*/

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

/* blue green */

/*
.sidebar-nav {
    background: rgb(6, 169, 151);
}

.skin-josh .sidebar .page-sidebar-menu > li {
    border-bottom: 1px solid rgb(6, 169, 151);
}

.skin-josh .logo {
    background-color: rgb(6, 169, 151);
}

.skin-josh .navbar {
    background-color: rgb(6, 169, 151);
}

.skin-josh .left-side {
    background: rgb(6, 169, 151);
}


.left-side .active {
    background: rgb(7, 140, 126) !important;
}

.skin-josh .sidebar li ul {
    background: rgb(20, 185, 167);
    border-top: 0.08em solid #2BD6C3;
}

.skin-josh .sidebar .page-sidebar-menu > li:hover {
    background: #1A9A8C;
    border-bottom: 1px solid rgba(26, 154, 140, 0.65);
}


body > .header .navbar .sidebar-toggle {
    background-color: rgb(7, 140, 126);
}

.navbar-right .nav .open > a, .navbar-right .nav .open > a:hover, .navbar-right .nav .open > a:focus, .navbar-right .nav > li > a:hover, .navbar-right .nav > li > a:focus {
    background-color: rgb(7, 140, 126);
    border-color: #1A9A8C;
}

*/

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

/* yellow */

.sidebar-nav {
    /*background: rgb(8, 146, 185);*/
    background-color: #e3bb1c;
}

.skin-josh .sidebar .page-sidebar-menu>li {
    /*border-bottom: 1px solid rgb(8, 146, 185);*/
    border-bottom: 0px solid;
    background-color: #e3bb1c;
}

.skin-josh .logo {
    /*background-color: rgb(8, 146, 185);*/
    background: rgba(132, 63, 185, 1);
    background: -moz-linear-gradient(top, rgba(202, 152, 0, 1) 0%, rgba(227, 187, 28, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(132, 63, 185, 1)), color-stop(100%, rgba(105, 62, 149, 1)));
    background: -webkit-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: -o-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: -ms-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: linear-gradient(to bottom, rgba(202, 152, 0, 1) 0%, rgba(227, 187, 28, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4ac00', endColorstr='#e4ac00', GradientType=0);
    /*background-color : #e3bb1c;*/
}

.skin-josh .navbar {
    /*background-color: rgb(8, 146, 185);*/
    background: rgba(132, 63, 185, 1);
    background: -moz-linear-gradient(top, rgba(202, 152, 0, 1) 0%, rgba(227, 187, 28, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(132, 63, 185, 1)), color-stop(100%, rgba(105, 62, 149, 1)));
    background: -webkit-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: -o-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: -ms-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: linear-gradient(to bottom, rgba(202, 152, 0, 1) 0%, rgba(227, 187, 28, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4ac00', endColorstr='#e4ac00', GradientType=0);
}

.skin-josh .left-side {
    /*background: rgb(8, 146, 185);*/
    background-color: #e3bb1c;
}

.left-side .active, .left-side .active>a {
    /*background: #097594 !important;*/
    background-color: #ca9800 !important;
    /*color: #838181 !important;
	font-weight: bold;*/
}

.skin-josh .sidebar li ul {
    background: rgb(35, 166, 204);
    border-top: 0.08em solid rgba(0, 175, 226, 0.64);
}

.skin-josh .sidebar .page-sidebar-menu>li:hover {
    background: #CECECE;
    border-bottom: 1px solid #E8AE00;
    /*color: #838181 !important;*/
}

.answerstdonly {
    background-color: #fbffc1 !important;
    border: 1px solid rgba(165, 160, 9, 0.8) !important;
}

body>.header .navbar .sidebar-toggle {
    /*background-color: #097594;*/
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #FFF;
    background: rgba(132, 63, 185, 1);
    background: -moz-linear-gradient(top, rgba(202, 152, 0, 1) 0%, rgba(227, 187, 28, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(132, 63, 185, 1)), color-stop(100%, rgba(105, 62, 149, 1)));
    background: -webkit-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: -o-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: -ms-linear-gradient(top, rgba(132, 63, 185, 1) 0%, rgba(105, 62, 149, 1) 100%);
    background: linear-gradient(to bottom, rgba(202, 152, 0, 1) 0%, rgba(227, 187, 28, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4ac00', endColorstr='#e4ac00', GradientType=0);
}

.navbar-right .nav .open>a, .navbar-right .nav .open>a:hover, .navbar-right .nav .open>a:focus, .navbar-right .nav>li>a:hover, .navbar-right .nav>li>a:focus {
    background-color: #097594;
    border-color: #1A9A8C;
}

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

/*	Qzu edit	*/

body>.header .logo_mobile {
    display: none;
}

.skin-josh .right-side>.content-header {
    min-height: 35px;
    padding: 0px;
}

.right-side>.content-header>.breadcrumb {
    top: 0px;
}

legend {
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
    margin-bottom: 10px;
}

.img-for-mobile {
    width: 200px;
    height: 220px;
}

.img-for-mobileBunditCard {
    width: 350px;
    height: 220px;
}

.img-for-mobileBoxATK {
    width: 300px;
    height: 170px;
}

.img-for-mobileHoldATK {
    width: auto;
    height: 220px;
}

.pager {
    margin: 8px 0;
}

.pager .step>a {
    float: none;
}

.pager li>a {
    border: none;
    font-size: 1.4em;
    padding: 0 14px;
}

.sidebar-nav ul a {
    padding: 12px 5px 12px 5px;
}

.text-bold {
    font-weight: bold;
}

.text-right {
    text-align: right;
}

.float-right {
    float: right;
}

.text-center {
    text-align: center;
}

.radio label, .checkbox label {
    min-height: 27px;
}

.frm-other-mobile {
    display: inline;
    width: auto;
    height: 26px;
    padding: 2px 12px;
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.checkbox i, .checkbox-inline i, .radio i, .radio-inline i {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.checkbox i.small, .checkbox-inline i.small, .radio i.small, .radio-inline i.small {
    font-size: 1.3em;
    top: 2px;
    margin-top: 6px;
    margin-left: 18px;
}

.checkbox input[type=checkbox]:checked+i:before, .checkbox-inline input[type=checkbox]:checked+i:before {
    content: "\f046";
}

.radio input[type=radio]:checked+i:before, .radio-inline input[type=radio]:checked+i:before {
    content: "\f192";
}

.link_showdetail {
    font-size: 1.4em;
    text-align: center;
}

.right-side>.content-header>.breadcrumb {
    left: 2px;
}

.position-flag {
    float: right;
    padding: 9px 2px 0 0;
}

.position-flag-login {
    float: right;
    padding: 0 2px 5px 0;
}

.link-flag-login {
    width: 25px;
    /*height:30px !important;*/
    cursor: pointer;
}

.link-flag {
    width: 30px;
    /*height:30px !important;*/
    cursor: pointer;
}

.set-display {
    display: inline;
}

.setdisplayonscreensmall {
    display: none;
}

/*Form Wizard*/

.bs-wizard {
    margin-top: 5px;
}

.bs-wizard {
    border-bottom: solid 1px #e0e0e0;
    padding: 0 14px 10px 14px;
}

.bs-wizard>.bs-wizard-step {
    padding: 0;
    position: relative;
    width: 20%;
}

.bs-wizard>.bs-wizard-step+.bs-wizard-step {}

.bs-wizard>.bs-wizard-step .bs-wizard-stepnum {
    color: #595959;
    font-size: 16px;
    margin-bottom: 5px;
}

.bs-wizard>.bs-wizard-step .bs-wizard-info {
    color: #999;
    font-size: 14px;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot {
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    background: #fbe8aa;
    top: 23px;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot:after {
    content: ' ';
    width: 14px;
    height: 14px;
    background: #fbbd19;
    border-radius: 50px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.bs-wizard-dot-1:after {
    content: '1';
}

.bs-wizard>.bs-wizard-step>.progress {
    position: relative;
    border-radius: 0px;
    height: 8px;
    box-shadow: none;
    margin: 20px 0;
}

.bs-wizard>.bs-wizard-step>.progress>.progress-bar {
    width: 0px;
    box-shadow: none;
    background: #fbe8aa;
}

.bs-wizard>.bs-wizard-step.complete>.progress>.progress-bar {
    width: 100%;
}

.bs-wizard>.bs-wizard-step.active>.progress>.progress-bar {
    width: 50%;
}

.bs-wizard>.bs-wizard-step.non-active>.progress>.progress-bar {
    width: 50%;
}

.bs-wizard>.bs-wizard-step.active-complete>.progress>.progress-bar {
    width: 100%;
}

.bs-wizard>.bs-wizard-step:first-child.active>.progress>.progress-bar {
    width: 0%;
}

.bs-wizard>.bs-wizard-step:last-child.active>.progress>.progress-bar {
    width: 100%;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot {
    background-color: #f5f5f5;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:after {
    opacity: 0;
}

.bs-wizard>.bs-wizard-step:first-child>.progress {
    left: 50%;
    width: 50%;
}

.bs-wizard>.bs-wizard-step:last-child>.progress {
    width: 50%;
}

.bs-wizard>.bs-wizard-step.disabled a.bs-wizard-dot {
    pointer-events: none;
}

.bs-wizard>.bs-wizard-step.active .bs-wizard-info {
    color: #525252;
    font-weight: bold;
}

.bs-wizard>.bs-wizard-step.active-complete .bs-wizard-info {
    color: #525252;
    font-weight: bold;
}

.bs-wizard>.bs-wizard-step.non-active .bs-wizard-info {
    color: #525252;
    font-weight: normal;
}

/*END Form Wizard*/

.font-normal {
    font-weight: normal;
}

.notpayment {
    font-size: 1.15em;
    font-weight: bold;
    color: #FF0000;
}

.successpayment {
    font-size: 1.15em;
    font-weight: bold;
    color: #0baf0b;
}

.graduate_status .txtgreen {
    color: #00A99D;
}

.graduate_status .txtorange {
    color: #F15A24;
    font-weight: normal;
}


.graduate_status .txtred {
    color: #FF0000;
}

.graduate_status .set-display-1 {
    display: inline;
}

.graduate_status .set-display-2 {
    display: none;
}

.graduate_status .hr {
    background: #DFB517 no-repeat scroll center;
    width: 97%;
    height: .1em;
    margin: 10px 0 10px 0;
}

.graduate_status .tbl-warning {
    border-collapse: collapse;
    border: solid 1px #FF0000;
    font-size: 1.1em;
    width: 95%;
    text-align: center;
    margin: 20px 5px 0 0;
    padding: 5px
}

.graduate_status .tbl_report {
    border-collapse: collapse;
    border: solid 1px #DFB517;
    font-size: 1.0em;
    width: 95%;
}

/* schedule of graduate  */

.graduate_status .tbl_report_pracday1, .graduate_status .tbl_report_pracday2, .graduate_status .tbl_report_pracday3, .graduate_status .tbl_report_pracday4 {
    border-collapse: collapse;
    font-size: 1.0em;
    width: 100%;
}

.graduate_status .tbl_report_pracday1 {
    border: solid 1px #00ca48;
}

.graduate_status .tbl_report_pracday2 {
    border: solid 1px #00ca48;
}

.graduate_status .tbl_report_pracday3 {
    border: solid 1px #00ca48;
}

.graduate_status .tbl_report_pracday4 {
    border: solid 1px #00ca48;
}

.tbl-title-day1 {
    background-color: #14f865;
    font-size: 1.2em;
    font-weight: bold;
}

.tbl_report_pracday1 td, .tbl_report_pracday2 td, .tbl_report_pracday3 td, .tbl_report_pracday4 td {
    padding: 3px;
}

/*  E N D */

.datasub {
    padding-left: 10px;
    font-size: 0.9em;
    line-height: 20px;
}

.datasub1 {
    color: #009933;
}

.datasub2 {
    color: #F90;
}

.datasub3 {
    color: #9400d3;
}

.datasub4 {
    color: #06F;
}

.datasub5 {
    color: #08af9f;
}

.datasub6 {
    color: #d0c10c;
}

.alert-success {
    color: #fff;
    background-color: #22ddad;
    border-color: #acf6ac;
}

.alert-success .alert-link {
    color: #fff;
}

.alert-info {
    color: #fff;
    background-color: #62aceb;
    border-color: #67C5DF;
}

.alert-info .alert-link {
    color: #fff;
}

.alert-warning {
    color: #fff;
    background-color: #ffbb35;
    border-color: #F5A83D;
}

.alert-warning .alert-link {
    color: #fff;
}

.alert-danger {
    color: #fff;
    background-color: #ff908d;
    border-color: #EF6F6C;
}

.alert-danger .alert-link {
    color: #fff;
}

.FontContinue {
    font-size: 1.35em;
    font-weight: bold;
    color: #F00;
    padding: 0 0 0 0;
}

.FontSuccess {
    font-size: 20px;
    font-weight: bold;
    /*padding: 0 0 25px 0;*/
}

.FontBlue {
	color: #337ab7;
	font-size: 1.35em;
    font-weight: bold;
	padding: 0 0 0 0;
}

::-webkit-input-placeholder {
    color: #999;
    opacity: 0.4 !important;
}

:-moz-placeholder {
    color: #999;
    opacity: 0.4 !important;
}

::-moz-placeholder {
    color: #999;
    opacity: 0.4 !important;
}

:-ms-input-placeholder {
    color: #999;
    opacity: 0.4 !important;
}

.login_logo {
    width: 310px;
}

.nodrop {
    pointer-events: visible !important;
    cursor: not-allowed !important;
}

@media screen and (max-width: 320px) {
    .login_logo {
        width: 270px;
    }
}

@media screen and (max-width: 768px) {
    .bs-wizard>.bs-wizard-step a {
        margin: 0 7px 0 7px;
    }
	
	.img-for-mobileBunditCard {
		width: 250px;
		height: 180px;
	}
	
	.img-for-mobileBoxATK {
		width: 230px;
		height: 130px;
	}

	.img-for-mobileHoldATK {
		width: auto;
		height: 160px;
	}
}

@media screen and (max-width: 560px) {
    body>.header .logo {
        display: none;
    }
    .navbar .navbar-right {
        display: none;
    }
    body>.header .logo_mobile {
        display: inline;
        float: left;
    }
    body>.header .navbar .sidebar-toggle {
        float: right;
        margin: 8px 5px 8px 5px;
    }
    body>.header .navbar .sidebar-toggle {
        padding: 14px 8px 6px 8px;
    }
    .skin-josh .right-side>.content-header {
        margin-bottom: 10px;
    }
    .panel-body {
        padding-left: 10px;
        padding-right: 10px;
    }
    legend {
        margin-bottom: 10px;
        font-size: 1.0em;
        font-weight: bold;
    }
    .panel-primary>.panel-heading {
        height: 25px;
        padding: 4px 10px;
    }
    .panel-title {
        font-size: 1.0em;
    }
    .img-for-mobile {
        width: 110px;
        height: 120px;
    }
	.img-for-mobileBunditCard {
		/*width: 250px;
		height: 180px; */
		width: 185px;
		height: 120px;
	}
	
	.img-for-mobileBoxATK {
		width: 210px;
		height: 110px;
	}

	.img-for-mobileHoldATK {
		width: auto;
		height: 140px;
	}
	
    .frm-margin-bottom-onmobile {
        margin-bottom: 15px;
    }
    .normal-fontsize-on-mobile {
        font-size: 0.9em;
    }
	 .normal-fontsize-on-mobile-sub {
        font-size: 0.7em;
    }
    .pager {
        font-size: 0.9em;
    }
    .padding-on-mobile {
        padding-left: 5px;
        padding-right: 5px;
    }
    .frm-other-mobile {
        display: inline;
        width: auto;
        height: 26px;
    }
    .link_showdetail {
        font-size: 1.25em;
        text-align: center;
    }
    .set-display {
        display: none;
    }
    .setdisplayonscreensmall {
        display: inline;
    }
    .position-flag {
        float: right;
        padding: 9px 0 0 0;
        display: none;
    }
    .bs-wizard>.bs-wizard-step .bs-wizard-info {
        font-size: 0.9em;
    }
    .bs-wizard>.bs-wizard-step>.bs-wizard-dot {
        width: 25px;
        height: 25px;
        top: 25px;
    }
    .bs-wizard>.bs-wizard-step>.bs-wizard-dot:after {
        width: 12px;
        height: 12px;
        top: 6px;
        left: 6px;
    }
    .graduate_status .paddingleft {
        padding-left: 25px;
    }
    .graduate_status .set-display-1 {
        display: none;
    }
    .graduate_status .set-display-2 {
        display: inline;
    }
    .graduate_status th, td {
        white-space: normal !important;
    }
    th, td {
        white-space: nowrap;
    }
    .ui-autocomplete {
        width: 85% !important;
        font-size: 0.95em !important;
    }
    ::-webkit-input-placeholder {
        font-size: 0.95em;
    }
    :-moz-placeholder {
        font-size: 0.95em;
    }
    ::-moz-placeholder {
        font-size: 0.95em;
    }
    :-ms-input-placeholder {
        font-size: 0.95em;
    }
}

@media screen and (max-width: 426px) {
	.img-for-mobileBunditCard {
		width: 135px;
		height: 85px;
	}
}

@media screen and (max-width: 375px) {
	.img-for-mobileBunditCard {
		width: 135px;
		height: 85px;
	}
}

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

/* end new color template */

/* loading */

.loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

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

@-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);
    }
}

/* end loading */

.riot {
    /*padding: 9px 4px 0px 45px;*/
    padding: 9px 4px 0px 5px;
}

.riot div span.fac-name {
    font-size: 10px;
    color: yellow;
    display: inherit;
    margin-top: -5px;
}

li.view-website a {
    padding: 5px 7px !important;
    margin-top: 5px;
}

/* flatbuttons */

@media (max-width: 1280px) {
    .advanced-tool i {
        display: none;
    }
}

span.advanced-tool .list-group-item {
    position: relative;
    display: block;
    padding: 5px 5px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}

li {
    list-style: none;
}

.flatbuttons {
    width: 100%;
    margin: 0px;
    padding-left: 4%;
    text-align: center;
}

.flatbuttons ul {
    padding: 20px;
}

.flatbuttons ul li {
    width: 150px;
    float: left;
    padding: 5px;
    list-style: none;
}

.flatbuttons ul li a {
    text-decoration: none;
    font-family: lato !important;
}

.flatbuttons div {
    clear: both;
    padding-top: 40px;
    padding-bottom: 0px;
}

/* flatbuttons for small width. */

.flatbuttons_small {
    width: 100%;
    margin: 0px;
    padding-left: 0%;
    text-align: center;
    margin: -20px;
}

.flatbuttons_small ul {
    padding: 20px;
}

.flatbuttons_small ul li {
    width: 120px;
    float: left;
    padding: 10px;
    padding-left: 50px;
    padding-right: 10px;
    padding-bottom: 20px;
    list-style: none;
}

.flatbuttons_small ul li a {
    text-decoration: none;
    font-family: lato !important;
}

/* styles for button sizes */

.flatbuttons_size {
    width: 100%;
    margin: 0px;
    padding-left: 0%;
    text-align: center;
}

.flatbuttons_size ul {
    padding: 20px;
}

.flatbuttons_size ul li {
    width: auto;
    float: left;
    padding: 10px;
    list-style: none;
    clear: both;
}

.flatbuttons_size ul li a {
    text-decoration: none;
    ;
}

/* Button Group style */

.buttongroup li {
    margin: 15px 0;
}

/* Button Group style */

.dorpdown-buttons li {
    float: left;
    padding: 10px;
}

a, a:hover {
    text-decoration: none;
}

/*quick icons*/

.panel-body .btn:not(.btn-block) {
    width: auto;
    margin-bottom: 10px;
}

/* Social Dashboard*/

.f {
    font-size: 25px;
    text-align: right;
    position: absolute;
    top: 15px;
    right: 10px;
    outline: none;
}

a {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
}

/* Visitor */

a.visitor i, .visitor h4.list-group-item-heading {
    color: #F89A14;
}

a.visitor:hover {
    background-color: #F89A14;
}

a.visitor:hover * {
    color: #FFF;
}

/* Facebook */

a.facebook-like i, .facebook-like h4.list-group-item-heading {
    color: #418BCA;
}

a.facebook-like:hover {
    background-color: #418BCA;
}

a.facebook-like:hover * {
    color: #FFF;
}

/* Google */

a.google-plus i, .google-plus h4.list-group-item-heading {
    color: #EF6F6C;
}

a.google-plus:hover {
    background-color: #EF6F6C;
}

a.google-plus:hover * {
    color: #FFF;
}

/* Twitter */

a.twitter i, .twitter h4.list-group-item-heading {
    color: #67C5DF;
}

a.twitter:hover {
    background-color: #67C5DF;
}

a.twitter:hover * {
    color: #FFF;
}

/* Linkedin */

a.linkedin i, .linkedin h4.list-group-item-heading {
    color: #418BCA;
}

a.linkedin:hover {
    background-color: #418BCA;
}

a.linkedin:hover * {
    color: #FFF;
}

/* Tumblr */

a.tumblr i, .tumblr h4.list-group-item-heading {
    color: #418BCA;
}

a.tumblr:hover {
    background-color: #418BCA;
}

a.tumblr:hover * {
    color: #FFF;
}

/* Youtube */

a.youtube i, .youtube h4.list-group-item-heading {
    color: #EF6F6C;
}

a.youtube:hover {
    background-color: #EF6F6C;
}

a.youtube:hover * {
    color: #FFF;
}

/* Vimeo */

a.vimeo i, .vimeo h4.list-group-item-heading {
    color: #67C5DF;
}

a.vimeo:hover {
    background-color: #67C5DF;
}

a.vimeo:hover * {
    color: #FFF;
}

/*Group buttons*/

.ui-group-buttons .or {
    position: relative;
    float: left;
    width: .3em;
    height: 1.3em;
    z-index: 3;
    font-size: 12px
}

.ui-group-buttons .or:before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: 'or';
    background-color: #5a5a5a;
    margin-top: -.1em;
    margin-left: -.9em;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.55;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    border-radius: 500px;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.ui-group-buttons .or:after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: .3em;
    height: 2.84em;
    background-color: rgba(0, 0, 0, 0);
    border-top: .6em solid #5a5a5a;
    border-bottom: .6em solid #5a5a5a
}

.ui-group-buttons .or.or-lg {
    height: 1.3em;
    font-size: 16px
}

.ui-group-buttons .or.or-lg:after {
    height: 2.85em
}

.ui-group-buttons .or.or-sm {
    height: 1em
}

.ui-group-buttons .or.or-sm:after {
    height: 2.5em
}

.ui-group-buttons .or.or-xs {
    height: .25em
}

.ui-group-buttons .or.or-xs:after {
    height: 1.84em;
    z-index: -1000
}

.ui-group-buttons {
    display: inline-block;
    vertical-align: middle
}

.ui-group-buttons:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ui-group-buttons .btn {
    float: left;
    border-radius: 0
}

.ui-group-buttons .btn:first-child {
    margin-left: 0;
    border-top-left-radius: .25em;
    border-bottom-left-radius: .25em;
    padding-right: 15px
}

.ui-group-buttons .btn:last-child {
    border-top-right-radius: .25em;
    border-bottom-right-radius: .25em;
    padding-left: 15px
}

/*socail buttons*/

.btn-social {
    position: relative;
    padding-left: 44px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.btn-social :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2)
}

.btn-social.btn-lg {
    padding-left: 61px
}

.btn-social.btn-lg :first-child {
    line-height: 45px;
    width: 45px;
    font-size: 1.8em
}

.btn-social.btn-sm {
    padding-left: 38px
}

.btn-social.btn-sm :first-child {
    line-height: 28px;
    width: 28px;
    font-size: 1.4em
}

.btn-social.btn-xs {
    padding-left: 30px
}

.btn-social.btn-xs :first-child {
    line-height: 20px;
    width: 20px;
    font-size: 1.2em
}

.btn-social-icon {
    position: relative;
    padding-left: 44px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 34px;
    width: 34px;
    padding-left: 0;
    padding-right: 0
}

.btn-social-icon :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2)
}

.btn-social-icon.btn-lg {
    padding-left: 61px
}

.btn-social-icon.btn-lg :first-child {
    line-height: 45px;
    width: 45px;
    font-size: 1.8em
}

.btn-social-icon.btn-sm {
    padding-left: 38px
}

.btn-social-icon.btn-sm :first-child {
    line-height: 28px;
    width: 28px;
    font-size: 1.4em
}

.btn-social-icon.btn-xs {
    padding-left: 30px
}

.btn-social-icon.btn-xs :first-child {
    line-height: 20px;
    width: 20px;
    font-size: 1.2em
}

.btn-social-icon :first-child {
    border: none;
    text-align: center;
    width: 100% !important
}

.btn-social-icon.btn-lg {
    height: 45px;
    width: 45px;
    padding-left: 0;
    padding-right: 0
}

.btn-social-icon.btn-sm {
    height: 30px;
    width: 30px;
    padding-left: 0;
    padding-right: 0
}

.btn-social-icon.btn-xs {
    height: 22px;
    width: 22px;
    padding-left: 0;
    padding-right: 0
}

.btn-bitbucket {
    color: #fff;
    background-color: #205081;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-bitbucket:hover, .btn-bitbucket:focus, .btn-bitbucket:active, .btn-bitbucket.active, .open .dropdown-toggle.btn-bitbucket {
    color: #fff;
    background-color: #183c60;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-bitbucket:active, .btn-bitbucket.active, .open .dropdown-toggle.btn-bitbucket {
    background-image: none
}

.btn-bitbucket.disabled, .btn-bitbucket[disabled], fieldset[disabled] .btn-bitbucket, .btn-bitbucket.disabled:hover, .btn-bitbucket[disabled]:hover, fieldset[disabled] .btn-bitbucket:hover, .btn-bitbucket.disabled:focus, .btn-bitbucket[disabled]:focus, fieldset[disabled] .btn-bitbucket:focus, .btn-bitbucket.disabled:active, .btn-bitbucket[disabled]:active, fieldset[disabled] .btn-bitbucket:active, .btn-bitbucket.disabled.active, .btn-bitbucket[disabled].active, fieldset[disabled] .btn-bitbucket.active {
    background-color: #205081;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-dropbox {
    color: #fff;
    background-color: #1087dd;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-dropbox:hover, .btn-dropbox:focus, .btn-dropbox:active, .btn-dropbox.active, .open .dropdown-toggle.btn-dropbox {
    color: #fff;
    background-color: #0d70b7;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-dropbox:active, .btn-dropbox.active, .open .dropdown-toggle.btn-dropbox {
    background-image: none
}

.btn-dropbox.disabled, .btn-dropbox[disabled], fieldset[disabled] .btn-dropbox, .btn-dropbox.disabled:hover, .btn-dropbox[disabled]:hover, fieldset[disabled] .btn-dropbox:hover, .btn-dropbox.disabled:focus, .btn-dropbox[disabled]:focus, fieldset[disabled] .btn-dropbox:focus, .btn-dropbox.disabled:active, .btn-dropbox[disabled]:active, fieldset[disabled] .btn-dropbox:active, .btn-dropbox.disabled.active, .btn-dropbox[disabled].active, fieldset[disabled] .btn-dropbox.active {
    background-color: #1087dd;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook {
    color: #fff;
    background-color: #418BCA;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open .dropdown-toggle.btn-facebook {
    color: #fff;
    background-color: #30487b;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:active, .btn-facebook.active, .open .dropdown-toggle.btn-facebook {
    background-image: none
}

.btn-facebook.disabled, .btn-facebook[disabled], fieldset[disabled] .btn-facebook, .btn-facebook.disabled:hover, .btn-facebook[disabled]:hover, fieldset[disabled] .btn-facebook:hover, .btn-facebook.disabled:focus, .btn-facebook[disabled]:focus, fieldset[disabled] .btn-facebook:focus, .btn-facebook.disabled:active, .btn-facebook[disabled]:active, fieldset[disabled] .btn-facebook:active, .btn-facebook.disabled.active, .btn-facebook[disabled].active, fieldset[disabled] .btn-facebook.active {
    background-color: #418BCA;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-flickr {
    color: #fff;
    background-color: #ff0084;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-flickr:hover, .btn-flickr:focus, .btn-flickr:active, .btn-flickr.active, .open .dropdown-toggle.btn-flickr {
    color: #fff;
    background-color: #d6006f;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-flickr:active, .btn-flickr.active, .open .dropdown-toggle.btn-flickr {
    background-image: none
}

.btn-flickr.disabled, .btn-flickr[disabled], fieldset[disabled] .btn-flickr, .btn-flickr.disabled:hover, .btn-flickr[disabled]:hover, fieldset[disabled] .btn-flickr:hover, .btn-flickr.disabled:focus, .btn-flickr[disabled]:focus, fieldset[disabled] .btn-flickr:focus, .btn-flickr.disabled:active, .btn-flickr[disabled]:active, fieldset[disabled] .btn-flickr:active, .btn-flickr.disabled.active, .btn-flickr[disabled].active, fieldset[disabled] .btn-flickr.active {
    background-color: #ff0084;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-github {
    color: #fff;
    background-color: #444;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-github:hover, .btn-github:focus, .btn-github:active, .btn-github.active, .open .dropdown-toggle.btn-github {
    color: #fff;
    background-color: #303030;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-github:active, .btn-github.active, .open .dropdown-toggle.btn-github {
    background-image: none
}

.btn-github.disabled, .btn-github[disabled], fieldset[disabled] .btn-github, .btn-github.disabled:hover, .btn-github[disabled]:hover, fieldset[disabled] .btn-github:hover, .btn-github.disabled:focus, .btn-github[disabled]:focus, fieldset[disabled] .btn-github:focus, .btn-github.disabled:active, .btn-github[disabled]:active, fieldset[disabled] .btn-github:active, .btn-github.disabled.active, .btn-github[disabled].active, fieldset[disabled] .btn-github.active {
    background-color: #444;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-google-plus {
    color: #fff;
    background-color: #EF6F6C;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-google-plus:hover, .btn-google-plus:focus, .btn-google-plus:active, .btn-google-plus.active, .open .dropdown-toggle.btn-google-plus {
    color: #fff;
    background-color: #ca3523;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-google-plus:active, .btn-google-plus.active, .open .dropdown-toggle.btn-google-plus {
    background-image: none
}

.btn-google-plus.disabled, .btn-google-plus[disabled], fieldset[disabled] .btn-google-plus, .btn-google-plus.disabled:hover, .btn-google-plus[disabled]:hover, fieldset[disabled] .btn-google-plus:hover, .btn-google-plus.disabled:focus, .btn-google-plus[disabled]:focus, fieldset[disabled] .btn-google-plus:focus, .btn-google-plus.disabled:active, .btn-google-plus[disabled]:active, fieldset[disabled] .btn-google-plus:active, .btn-google-plus.disabled.active, .btn-google-plus[disabled].active, fieldset[disabled] .btn-google-plus.active {
    background-color: #EF6F6C;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-instagram {
    color: #fff;
    background-color: #517fa4;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-instagram:hover, .btn-instagram:focus, .btn-instagram:active, .btn-instagram.active, .open .dropdown-toggle.btn-instagram {
    color: #fff;
    background-color: #446a89;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-instagram:active, .btn-instagram.active, .open .dropdown-toggle.btn-instagram {
    background-image: none
}

.btn-instagram.disabled, .btn-instagram[disabled], fieldset[disabled] .btn-instagram, .btn-instagram.disabled:hover, .btn-instagram[disabled]:hover, fieldset[disabled] .btn-instagram:hover, .btn-instagram.disabled:focus, .btn-instagram[disabled]:focus, fieldset[disabled] .btn-instagram:focus, .btn-instagram.disabled:active, .btn-instagram[disabled]:active, fieldset[disabled] .btn-instagram:active, .btn-instagram.disabled.active, .btn-instagram[disabled].active, fieldset[disabled] .btn-instagram.active {
    background-color: #517fa4;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-linkedin {
    color: #fff;
    background-color: #007bb6;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-linkedin:hover, .btn-linkedin:focus, .btn-linkedin:active, .btn-linkedin.active, .open .dropdown-toggle.btn-linkedin {
    color: #fff;
    background-color: #005f8d;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-linkedin:active, .btn-linkedin.active, .open .dropdown-toggle.btn-linkedin {
    background-image: none
}

.btn-linkedin.disabled, .btn-linkedin[disabled], fieldset[disabled] .btn-linkedin, .btn-linkedin.disabled:hover, .btn-linkedin[disabled]:hover, fieldset[disabled] .btn-linkedin:hover, .btn-linkedin.disabled:focus, .btn-linkedin[disabled]:focus, fieldset[disabled] .btn-linkedin:focus, .btn-linkedin.disabled:active, .btn-linkedin[disabled]:active, fieldset[disabled] .btn-linkedin:active, .btn-linkedin.disabled.active, .btn-linkedin[disabled].active, fieldset[disabled] .btn-linkedin.active {
    background-color: #007bb6;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-pinterest {
    color: #fff;
    background-color: #cb2027;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-pinterest:hover, .btn-pinterest:focus, .btn-pinterest:active, .btn-pinterest.active, .open .dropdown-toggle.btn-pinterest {
    color: #fff;
    background-color: #a81a20;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-pinterest:active, .btn-pinterest.active, .open .dropdown-toggle.btn-pinterest {
    background-image: none
}

.btn-pinterest.disabled, .btn-pinterest[disabled], fieldset[disabled] .btn-pinterest, .btn-pinterest.disabled:hover, .btn-pinterest[disabled]:hover, fieldset[disabled] .btn-pinterest:hover, .btn-pinterest.disabled:focus, .btn-pinterest[disabled]:focus, fieldset[disabled] .btn-pinterest:focus, .btn-pinterest.disabled:active, .btn-pinterest[disabled]:active, fieldset[disabled] .btn-pinterest:active, .btn-pinterest.disabled.active, .btn-pinterest[disabled].active, fieldset[disabled] .btn-pinterest.active {
    background-color: #cb2027;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-tumblr {
    color: #fff;
    background-color: #2c4762;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-tumblr:hover, .btn-tumblr:focus, .btn-tumblr:active, .btn-tumblr.active, .open .dropdown-toggle.btn-tumblr {
    color: #fff;
    background-color: #1f3346;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-tumblr:active, .btn-tumblr.active, .open .dropdown-toggle.btn-tumblr {
    background-image: none
}

.btn-tumblr.disabled, .btn-tumblr[disabled], fieldset[disabled] .btn-tumblr, .btn-tumblr.disabled:hover, .btn-tumblr[disabled]:hover, fieldset[disabled] .btn-tumblr:hover, .btn-tumblr.disabled:focus, .btn-tumblr[disabled]:focus, fieldset[disabled] .btn-tumblr:focus, .btn-tumblr.disabled:active, .btn-tumblr[disabled]:active, fieldset[disabled] .btn-tumblr:active, .btn-tumblr.disabled.active, .btn-tumblr[disabled].active, fieldset[disabled] .btn-tumblr.active {
    background-color: #2c4762;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-twitter {
    color: #fff;
    background-color: #2ba9e1;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active, .open .dropdown-toggle.btn-twitter {
    color: #fff;
    background-color: #1c92c7;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-twitter:active, .btn-twitter.active, .open .dropdown-toggle.btn-twitter {
    background-image: none
}

.btn-twitter.disabled, .btn-twitter[disabled], fieldset[disabled] .btn-twitter, .btn-twitter.disabled:hover, .btn-twitter[disabled]:hover, fieldset[disabled] .btn-twitter:hover, .btn-twitter.disabled:focus, .btn-twitter[disabled]:focus, fieldset[disabled] .btn-twitter:focus, .btn-twitter.disabled:active, .btn-twitter[disabled]:active, fieldset[disabled] .btn-twitter:active, .btn-twitter.disabled.active, .btn-twitter[disabled].active, fieldset[disabled] .btn-twitter.active {
    background-color: #2ba9e1;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-vk {
    color: #fff;
    background-color: #587ea3;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-vk:hover, .btn-vk:focus, .btn-vk:active, .btn-vk.active, .open .dropdown-toggle.btn-vk {
    color: #fff;
    background-color: #4a6a89;
    border-color: rgba(0, 0, 0, 0.2)
}

.btn-vk:active, .btn-vk.active, .open .dropdown-toggle.btn-vk {
    background-image: none
}

.btn-vk.disabled, .btn-vk[disabled], fieldset[disabled] .btn-vk, .btn-vk.disabled:hover, .btn-vk[disabled]:hover, fieldset[disabled] .btn-vk:hover, .btn-vk.disabled:focus, .btn-vk[disabled]:focus, fieldset[disabled] .btn-vk:focus, .btn-vk.disabled:active, .btn-vk[disabled]:active, fieldset[disabled] .btn-vk:active, .btn-vk.disabled.active, .btn-vk[disabled].active, fieldset[disabled] .btn-vk.active {
    background-color: #587ea3;
    border-color: rgba(0, 0, 0, 0.2)
}

/*
 * Only for this example - not needed for the buttons
 * ----------------------------------------------------- */

.btn-social-icon {
    margin-bottom: 4px;
}

.social-class .social-hex {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: 10px;
    opacity: .3;
    float: right
}

.social-class li {
    margin-bottom: 4px;
    font-family: lato !important;
}

.social-class li:hover .social-hex {
    opacity: 1;
    font-family: lato !important;
}

.social-class li:hover code {
    background-color: #e8e8ee
}

.social-class code {
    cursor: default;
    font-family: lato !important;
}

/*Buttons With Labels*/

.btn-label {
    position: relative;
    left: -14px;
    display: inline-block;
    padding: 6px 15px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px 0 0 3px;
}

.btn-labeled {
    padding-top: 0;
    padding-bottom: 0;
}

.btn {
    margin-bottom: 10px;
}

/*=====================================================================================================*/

.text-small-red {
    font-size: 12px;
    color: #CC0000;
}

.text-small-green {
    font-size: 12px;
    color: #339900;
}

.text-small-blue {
    font-size: 12px;
    color: #000099;
}

.text-small-gray {
    font-size: 12px;
    color: #999;
}

.text-small-yellow {
    font-size: 12px;
    color: #FFCC00;
}

.td-center {
    text-align: center;
}

.td-left {
    text-align: left;
}

.td-right {
    text-align: right;
}

.th-center {
    text-align: center !important;
}

.th-left {
    text-align: left !important;
}

.th-right {
    text-align: right !important;
}

.th-bold, .td-bold {
    font-weight: bold;
}

.th-middle {
    vertical-align: middle !important;
}

.dropdown-menu>li>a {
    vertical-align: top;
}

body>.header .logo {
    padding: 0;
}

/* datatable */

.dataTables_wrapper .row:FIRST-CHILD .col-md-6, .dataTables_wrapper .row:FIRST-CHILD .col-sm-12 {
    padding-left: 0px;
    padding-right: 0px;
}

.dataTables_filter .form-control {
    margin-left: 0px;
}

.input-small {
    width: 150px !important;
}

/* Graph */

#counter_web text[text-anchor="end"], #equipment_web text[text-anchor="end"], #browser_web text[text-anchor="end"] {
    display: none;
}

#counter_web .highcharts-axis-labels text[text-anchor="end"], #equipment_web .highcharts-axis-labels text[text-anchor="end"], #browser_web .highcharts-axis-labels text[text-anchor="end"] {
    display: block !important;
}

.table .tool {
    width: 150px;
}

/* Fancybox */

#fancybox_popup {
    min-width: 500px;
    max-height: 500px;
}

#fancybox_popup .title {
    padding: 10px;
    font-weight: bold;
    color: #FFFFFF;
    border-bottom: solid 1px #418BCA;
    background: #418BCA;
}

#fancybox_popup .title .panel-title {
    padding-right: 30px;
}

#fancybox_popup .content {
    padding: 10px;
}

#fancybox_popup .title .panel-title i {
    margin-right: 5px;
}

.fancybox-inner .panel {
    margin-bottom: 0px;
}

.fancybox-opened {
    z-index: 2000;
}

.form-horizontal .form-group span.text {
    display: block;
    padding-top: 8px;
}

.form-horizontal .form-group span.text-scroll {
    overflow-y: auto;
    height: 150px;
}

.table-toolbar.add {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #ccc;
}

.table-toolbar.add .btn-group a {
    margin-bottom: 10px;
}

label span.required {
    color: red;
}

label.error {
    font-size: 0.95em;
    color: red !important;
    font-weight: bold;
}

/*datepicker*/

select.ui-datepicker-month {
    margin-right: 1px !important;
}

select.ui-datepicker-year {
    margin-left: 1px !important;
}

.ui-datepicker .ui-datepicker-header {
    background: #3399FF;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    font-weight: bold;
    color: #4876FF;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    color: #1C1C1C;
}

.ui-state-default, .ui-widget-content .ui-state-active {
    background: #C6E2FF;
}

.ui-datepicker th {
    padding: .7em .0em;
}

.ui-widget-header .ui-state-hover, .ui-widget-content .ui-state-hover {
    background: #ffffff;
}

.ui-priority-secondary:HOVER {
    background: #FCF6CF;
}

.ui-widget-header .ui-icon {
    background-image: url(../images/ui/ui-icons_ffffff_256x240.png);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url(../images/ui/ui-icons_ef8c08_256x240.png)/*{iconsHover}*/
    ;
}

.ui-datepicker-close {
    color: #1C1C1C !important;
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
    opacity: 1;
}

.form-control[readonly] {
    cursor: not-allowed;
    background-color: #fff;
    opacity: 1;
    cursor: pointer;
}

.note-dialog .note-modal-form {
    margin: 15px;
}

/* modules changegroup */

.popup-changegroup {
    width: 300px !important;
}

/* modules contactus */

.popup-contactus {
    width: 700px;
}

@media (max-width: 768px) {
    #fancybox_popup {
        min-width: 0px;
    }
    .popup-contactus {
        width: auto;
    }
    .form-horizontal .form-group span.text-scroll {
        height: 80px;
    }
    span.text-date-to {
        margin-left: 15px;
    }
    .form-horizontal .form-group span.text {
        padding: 10px 0px;
    }
}

.sidebar li .sub-menu li i {
    padding-right: 2px;
}

span.text-date-to {
    float: left;
    line-height: 32px;
}

textarea.form-control {
    min-height: 100px;
}

.input-group[class*="col-"] {
    padding-left: 15px;
}

#ui-datepicker-div {
    z-index: 2 !important;
}

.chosen-container-multi .chosen-choices {
    border-radius: 4px;
    min-height: 34px;
    font-size: 14px;
}

.fileinput .form-control {
    min-width: 150px;
}

.option-operators {
    padding-bottom: 25px;
}

.radio, .checkbox {
    padding-left: 20px;
}

text[text-anchor="end"] {
    display: none;
}

/* ----- slide-year ----- */

/*.slide-year-button{
	padding: 25px;
	text-align: center;
}*/

#previous_year {
    float: left;
    margin-right: 10px;
    padding: 6px;
    line-height: 12px;
}

#next_year {
    float: right;
    margin-left: 10px;
    padding: 6px;
    line-height: 12px;
}

#previous_year, #next_year {
    font-size: 20px;
    color: #0FB9B3;
}

#previous_year:HOVER, #next_year:HOVER {
    font-size: 20px;
    color: #fff;
}

.slide-year-button .btn-group .year {
    width: 115px;
}

/* ----- end slide-year ----- */

.graph-detail {
    text-align: right;
    margin-right: 10px;
}

.tr-color-rgba-green-yellow {
    background-color: rgba(226, 255, 142, 0.54) !important;
}

.tr-color-rgba-red {
    background-color: rgba(255, 209, 209, 0.54) !important;
}

.tr-color-rgba-crimson {
    background-color: rgba(255, 85, 85, 0.56) !important;
}

.nodata {
    text-align: center;
    background-color: #f9f9f9;
}

.green-yellow-red {
    padding-left: 10px;
}

.highlighter {
    background-color: rgba(246, 255, 0, 0.64);
}

.article-detail {
    margin-top: 10px;
}

.article-detail img {
    width: 100% !important;
}

@media (max-width: 768px) {
    .radio-inline+.radio-inline, .checkbox-inline+.checkbox-inline {
        margin-top: 0;
        margin-left: 0px;
    }
    .radio-inline, .checkbox-inline {
        width: 100%;
    }
    .view-website {
        display: none !important;
    }
    /*.riot div span.fac-name span.fac{
		display: none !important;
	}*/
}

.fancybox-wrap {
    z-index: 8050 !important;
}

.search-nodata {
    color: red;
    padding: 10px;
    background: #FFF6D8;
    text-align: center;
    margin-top: 10px;
}

.menu ul li {
    margin: 5px 0px;
}

.btn-menu {
    color: #484848;
    background-color: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-menu i {
    color: #83B9E0;
    font-size: 15px !important;
}

ul.sub-menu {
    border-left: 1px solid #83BBE4;
    margin-left: 15px;
    padding-left: 25px;
}

.btn-menu.un-link {
    cursor: default !important;
}

a.btn-menu:HOVER {
    background-color: #EFEFEF;
}

a.un-link:HOVER {
    background-color: #FFFFFF;
}

.menu .btn {
    margin-bottom: 5px;
}

.form-horizontal .control-label {
    text-align: left;
}

.popup-view-example {
    width: 850px;
}

.popup-view-example {
    padding: 10px;
}

.popup-view-example table {
    width: 100%;
}

.popup-view-example table tr th, .popup-view-example table tr td {
    padding: 10px;
    vertical-align: text-top !important;
}

.popup-view-example table, .popup-view-example table tr, .popup-view-example table tr th, .popup-view-example table tr td {
    border: 1px solid #ccc;
}

.popup-view-example table tr th {
    text-align: center;
}

.upload-view-file {
    margin-left: 10px;
    position: absolute !important;
    line-height: 20px;
    border-radius: 5px !important;
}

span.text-show-message {
    color: #636363;
    display: inherit;
}

.specifically {
    color: #008796;
    font-weight: bold;
}

#viewExample {
    margin-top: 10px !important;
}

.table thead tr th {
    vertical-align: middle;
}

.red {
    color: red;
}

.report-head-detail div {
    margin-right: -15px;
    margin-left: -15px;
}

.report-head-detail div span:FIRST-CHILD {
    width: 150px;
    display: inline-block;
}

i.green-stripe {
    color: #00bc8c;
}

span.text-to {
    float: left;
    line-height: 30px;
}

.securable-box {
    margin-top: 20px;
}

.report-head-detail div span {
    margin: 5px 0px;
}

form.border-bottom-mb10 {
    margin-bottom: 10px;
    border-bottom: 1px solid #57A7DE;
}

.page-sidebar-menu .livicon {
    margin-right: 5px;
}

/* responsive-tabs */

.tabs-responsive {
    margin-left: 15px;
    margin-right: 15px;
}

.r-tabs {
    position: relative;
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius: 2px;
    padding: 10px;
}

.r-tabs .r-tabs-nav .r-tabs-tab {
    position: relative;
    background-color: #ffffff;
}

.r-tabs .r-tabs-nav .r-tabs-anchor {
    display: inline-block;
    padding: 10px 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: #545454;
}

@media (max-width: 768px) {
    .r-tabs .r-tabs-panel {
        padding: 10px 10px 10px 10px;
    }
    .r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
        background-color: #fff !important;
        color: #00bcd4 !important;
        text-shadow: none !important;
    }
}

.r-tabs .r-tabs-nav .r-tabs-state-disabled {
    opacity: 0.5;
}

.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
    color: #545454;
    text-shadow: none;
    background-color: white;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.r-tabs .r-tabs-panel {
    background-color: white;
    border-bottom: 4px solid white;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
    display: block;
    padding: 10px;
    background-color: #DEDEDE;
    color: #545454;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
    background-color: #fff;
    color: #1B579D;
    text-shadow: none;
    font-size: 18px;
}

.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
    opacity: 0.5;
}

.info {
    display: inline-block;
    margin-top: 10px;
    margin-right: 10px;
    padding: 10px 20px;
    width: 300px;
    line-height: 100%;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 14px;
    color: #00c5ad;
    border: 2px solid #00ab94;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
}

.r-tabs .r-tabs-panel {
    padding: 30px 10px 10px 10px;
}

/*#horizontalTab_news div.line{
	border-bottom: 1px solid #ccc;
    margin-top: -4px;
}*/

@media (min-width: 768px) {
    #horizontalTab_news div.line {
        border-bottom: 1px solid #ccc;
        margin-top: -4px;
    }
}

#horizontalTab_news .media .media-left a img {
    width: 100px;
    height: 100px;
}

.r-tabs-tab.r-tabs-state-active {
    border-bottom: 4px solid #00bcd4;
}

div.readmore {
    text-align: right;
}

div.detail-date {
    color: #9E9E9E;
}

/* END responsive-tabs */