/* FONTS */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('../../assets/fonts/opensans/normal_400.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../../assets/fonts/opensans/normal_600.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../assets/fonts/opensans/normal_700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url('../../assets/fonts/opensans/normal_800.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../assets/fonts/opensans/italic_400.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url('../../assets/fonts/opensans/italic_600.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../../assets/fonts/opensans/italic_700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local('Open Sans Extrabold Italic'), local('OpenSans-ExtraboldItalic'), url('../../assets/fonts/opensans/italic_800.woff2') format('woff2');
}
/* end fonts */

*,input[type=text], input[type=password], .btn, .form-control, .panel-title, pre {
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	font-size:12px;
	font-family: 'Open Sans', verdana, sans-serif;
}	


/*
 * Added by Iwan, 21 February 2024 (CODE: 231006)
 */
 .wysiwyg_wrapper .btn {
	font-size: 14px;
	font-weight: 400;
}

.wysiwyg_wrapper .btn-lg {
	font-size: 18px;
}

.wysiwyg_wrapper .btn-sm,
.wysiwyg_wrapper .btn-xs {
	font-size: 12px;
}

.wysiwyg_wrapper,
.wysiwyg_wrapper td,
.wysiwyg_wrapper th {
	font-size: 14px;
}

#my-grid .wysiwyg_wrapper table,
[id^="my-grid-"] .wysiwyg_wrapper table {
	background: unset;
}

#my-grid .wysiwyg_wrapper table td,
[id^="my-grid-"] .wysiwyg_wrapper table td,
#center-panel #my-grid .wysiwyg_wrapper table td,
#center-panel [id^="my-grid-"] .wysiwyg_wrapper table td {
	border: 1px solid #dddddd;
}

#ModalContent #my-grid .wysiwyg_wrapper table td,
#ModalContent [id^="my-grid-"] .wysiwyg_wrapper table td {
	color: #ffffff;
}

.wysiwyg_wrapper a:not(.btn),
.wysiwyg_wrapper u,
.wysiwyg_wrapper i,
.wysiwyg_wrapper em,
.wysiwyg_wrapper b,
.wysiwyg_wrapper strong,
.wysiwyg_wrapper span,
.wysiwyg_wrapper label,
.wysiwyg_wrapper input,
.wysiwyg_wrapper option,
.wysiwyg_wrapper button,
.wysiwyg_wrapper img,
.wysiwyg_wrapper sub,
.wysiwyg_wrapper sup,
.wysiwyg_wrapper code,
.wysiwyg_wrapper kbd,
.wysiwyg_wrapper samp,
.wysiwyg_wrapper var,
.wysiwyg_wrapper q,
.wysiwyg_wrapper dfn,
.wysiwyg_wrapper bdo,
.wysiwyg_wrapper kbd,
.wysiwyg_wrapper area,
.wysiwyg_wrapper output,
.wysiwyg_wrapper abbr,
.wysiwyg_wrapper acronym,
.wysiwyg_wrapper time,
.wysiwyg_wrapper small,
.wysiwyg_wrapper big,
.wysiwyg_wrapper tt,
.wysiwyg_wrapper h1,
.wysiwyg_wrapper h2,
.wysiwyg_wrapper h3,
.wysiwyg_wrapper h4,
.wysiwyg_wrapper h5,
.wysiwyg_wrapper h6,
.wysiwyg_wrapper p,
.wysiwyg_wrapper div,
.wysiwyg_wrapper li,
.wysiwyg_wrapper form,
.wysiwyg_wrapper pre,
.wysiwyg_wrapper blockquote,
.wysiwyg_wrapper video,
.wysiwyg_wrapper canvas,
.wysiwyg_wrapper address,
.wysiwyg_wrapper article,
.wysiwyg_wrapper aside,
.wysiwyg_wrapper main,
.wysiwyg_wrapper header,
.wysiwyg_wrapper footer,
.wysiwyg_wrapper nav,
.wysiwyg_wrapper section,
.wysiwyg_wrapper figcaption,
.wysiwyg_wrapper dd,
.wysiwyg_wrapper dt,
.wysiwyg_wrapper noscript {
	font-style: revert;
	font-variant: revert;
	font-weight: revert;
	font-size: revert;
}
/* */


body{
	background: #2d2d2d;
}

hr {
	border-color:#6a6a6a;
	border-style:dashed;
}

.form-group label {
	color:#fff;
	font-weight: normal;
}

.input-group-addon {
	background: #444444;
	border-color:#565656;
	color:#CECECE;
}

.form-control {
	background:#3F3F3F !important;
	color:white !important;
	border-color:#565656 !important;
	border-left: 1px solid #565656 !important;
}

.form-control:disabled {
	background: #383838 !important;
	border-color:#3F3F3F !important;
}

.form-control:focus {
	box-shadow: none !important;
}

#BadgeReminder {
	/*background: #51961F; */
	color:#fff;
}

#BadgeNews {
	background: #51961F; 
	color:#fff;
}

#BadgeNotification {
	background: #51961F; 
	color:#fff;
}

.btn-primary {
	background: #51961F; 
	margin-right:2px;
	text-shadow: 0px -1px 0px #5b6ddc;
	outline: none;
	border: 1px solid #6AAF34;
	cursor: pointer;
}

.btn-primary img {
	margin-right:3px;
	vertical-align:middle;
}

.btn-primary:hover,
.btn-primary:focus ,
.my-link-group .list-group-item:hover
{
	background: #4C891C;
	outline: none !important;
	border: 1px solid #6AAF34;
}

#ContentTab {
	color:#fff;
}

#ContentTab a {
	color:#f7eda7;
}

#JudulSOP {
	color:#333;
}

#JudulSOP a {
	color: #238BAA;
}

#ModalContent hr {
	border-color:#f1f1f1;
	border-style: solid;
}

#ModalContent .form-group label {
	color:#333 !important;
	font-weight: bold !important;
}

#ModalContent .form-control {
	background:#fff !important;
	border:1px solid #ddd !important;
	color:#333 !important;
}

#ModalFooter .btn-primary, 
#ModalContent .btn-primary,
.popover-content .btn-primary {
	border:1px solid #4B8E18;
	font-weight: bold;
	background: #5CBC1C; 
}
#ModalFooter .btn-primary:hover,
#ModalFooter .btn-primary:focus,
#ModalContent .btn-primary:hover,
#ModalContent .btn-primary:focus,
.popover-content .btn-primary {
	background: #52AD16;
	border:1px solid #42890F;
}

#ModalContent #my-grid th,
#ModalContent [id^="my-grid-"] th,
#KontenRetrieval #my-grid th,
#KontenRetrieval [id^="my-grid-"] th,
#my-grid-roster th {
	border-color:#C9DCEA;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#deeffc+0,d7e6f2+100 */
	background-color: #deeffc; /* Old browsers */
	background-color: -moz-linear-gradient(top,  #deeffc 0%, #d7e6f2 100%); /* FF3.6+ */
	background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deeffc), color-stop(100%,#d7e6f2)); /* Chrome,Safari4+ */
	background-color: -webkit-linear-gradient(top,  #deeffc 0%,#d7e6f2 100%); /* Chrome10+,Safari5.1+ */
	background-color: -o-linear-gradient(top,  #deeffc 0%,#d7e6f2 100%); /* Opera 11.10+ */
	background-color: -ms-linear-gradient(top,  #deeffc 0%,#d7e6f2 100%); /* IE10+ */
	background-color: linear-gradient(to bottom,  #deeffc 0%,#d7e6f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deeffc', endColorstr='#d7e6f2',GradientType=0 ); /* IE6-9 */
	color:#000;
	font-weight: bold;
}

#ModalContent #my-grid td,
#ModalContent [id^="my-grid-"] td,
#KontenRetrieval #my-grid td,
#KontenRetrieval [id^="my-grid-"] td {
	color:#000;
}

#ModalContent .dataTables_filter, 
#ModalContent .dataTables_length, 
#ModalContent .dataTables_info,
#KontenRetrieval .dataTables_filter, 
#KontenRetrieval .dataTables_length, 
#KontenRetrieval .dataTables_info  {
	color: #000;
}

.my-alert-success {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#299a0b+0,299a0b+100;Green+Flat+%231 */
	background: #299a0b; /* Old browsers */
	background: -moz-linear-gradient(top,  #299a0b 0%, #299a0b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #299a0b 0%,#299a0b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
	border-radius: 0px;
	border:0px;
	border-left:4px solid #53D62F;
	margin-bottom: 0px;
	color:#fff;
}

.my-alert-danger {
	background: #EA4848;
	border-radius: 0px;
	border:0px;
	color:#fff;
	border-left: 4px solid #FF8484;
	margin-bottom: 0px;
}

.my-alert-info {
	background: #41B7C1;
	border-radius: 0px;
	border:0px;
	color:#fff;
	border-left: 4px solid #64DCE5;
	margin-bottom: 0px;
}

.my-alert-warning {
	background: #E58B1D;
	border-radius: 0px;
	border:0px;
	color:#fff;
	border-left: 4px solid #FFB668;
	margin-bottom: 0px;
}

#center-panel #my-grid th,
#center-panel #my-gridz th,
#center-panel [id^="my-grid-"] th,
#datanya-reporting-aux-activity th,
#datanya-reporting-call-count th,
#datanya-reporting-message-retrieval th,
#datanya-reporting-refund-approved th,
#datanya-reporting-user-activity th,
#datanya th {
	padding:8px;
	border:1px solid #6a6a6a;
	color :white;
	background-color: #4a4a4a;
	background-color: -moz-linear-gradient(top,  #4a4a4a 0%, #3e3e3e 100%);
	background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a4a4a), color-stop(100%,#3e3e3e));
	background-color: -webkit-linear-gradient(top,  #4a4a4a 0%,#3e3e3e 100%);
	background-color: -o-linear-gradient(top,  #4a4a4a 0%,#3e3e3e 100%);
	background-color: -ms-linear-gradient(top,  #4a4a4a 0%,#3e3e3e 100%);
	background-color: linear-gradient(to bottom,  #4a4a4a 0%,#3e3e3e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#3e3e3e',GradientType=0 );
}

#center-panel #my-grid tbody tr:nth-child(odd) td,
#center-panel #my-gridz tbody tr:nth-child(odd) td,
#center-panel [id^="my-grid-"] tbody tr:nth-child(odd) td,
#datanya-reporting-aux-activity tbody tr:nth-child(odd) td,
#datanya-reporting-call-count tbody tr:nth-child(odd) td,
#datanya-reporting-message-retrieval tbody tr:nth-child(odd) td,
#datanya-reporting-refund-approved tbody tr:nth-child(odd) td,
#datanya-reporting-user-activity tbody tr:nth-child(odd) td,
#datanya tbody tr:nth-child(odd) td {
   background: transparent;
}

#center-panel #my-grid td, 
#center-panel #my-gridz td, 
#center-panel [id^="my-grid-"] td,
#datanya-reporting-aux-activity td,
#datanya-reporting-call-count td,
#datanya-reporting-message-retrieval td,
#datanya-reporting-refund-approved td,
#datanya-reporting-user-activity td,
#datanya td {
	border:1px solid #424242; /*sebelumnya 5E5E5E */
 	color: white;
}

#center-panel #my-grid td a,
#center-panel #my-gridz td a,
#center-panel [id^="my-grid-"] td a,
#datanya-reporting-aux-activity td a,
#datanya-reporting-call-count td a,
#datanya-reporting-message-retrieval td a,
#datanya-reporting-refund-approved td a,
#datanya-reporting-user-activity td a,
#datanya td a, 
#ElastixCampaignList {
	color:#f7eda7;
}

#center-panel .dataTables_filter, 
#center-panel .dataTables_length, 
#center-panel .dataTables_info,
#data-report .dataTables_filter, 
#data-report .dataTables_length, 
#data-report .dataTables_info {
	color: #fff;
}

#center-panel .dataTables_length select {
	cursor: pointer;
}
#center-panel .paginate_button a,
#data-report .paginate_button a {
	background: #3A3A3A !important;
	border-color:#4C4C4C !important;
	color: #fff !important;
	text-decoration: none;
}

#center-panel .paginate_button a:hover,
#data-report .paginate_button a:hover  {
	background: #494949 !important;
}

#center-panel .paginate_button.active a,
#data-report .paginate_button.active a {
	background: #51961F !important;
	border-color:#6AAF34 !important;
}

#center-panel .paginate_button.disabled a,
#data-report .paginate_button.disabled a {
	color:#777 !important;
}

.area-submit{
	padding:12px;
	margin-top:20px;
	border-radius:4px;
	background: #095866;
	background: -moz-linear-gradient(top,  #095866 0%, #353535 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#095866), color-stop(100%,#353535));
	background: -webkit-linear-gradient(top,  #095866 0%,#353535 100%);
	background: -o-linear-gradient(top,  #095866 0%,#353535 100%);
	background: -ms-linear-gradient(top,  #095866 0%,#353535 100%);
	background: linear-gradient(to bottom,  #095866 0%,#353535 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#095866', endColorstr='#353535',GradientType=0 );
}

.area-submit #ContentChange {
	color:white;
}

.tokenize-sample
{
  	border-left-color:#AED5F2 !important;
}

.page_id {
	color:#fff !important;
	background: transparent !important;
	border-radius: 0px !important;
	border-color:#4D4D4D !important;
}

.form-control
{
	box-shadow: none;
	border-radius: 0px;
  	background:#FCFCFC;
  	border-left:2px solid;
  	color: #262626;
}

.login-panel{
	margin:auto;
	margin-top:80px;
	width:270px;
}

.login-panel img{
	margin-bottom:20px;
}

.login-panel  > .panel{
	padding:15px;
}

.footer{
	text-align:center;
	padding:5px;
	color:#666;
}

.glyphicon {
	font-size: 13px;
}

.btn > .glyphicon{
	margin-right:4px;
}

.error{
	color:red;
	margin:5px;
}

.modal-backdrop.in {
	opacity: 0;
}

.blur {
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: blur(1px);
}

#Processing, #ajaxFailed{
	display: none;
	position: fixed;
	top:0px;
	width: 100%;


	/*
     * Added by Iwan, 3 April 2024 (CODE: 240305)
     */
	z-index: 1050;
	/* */


}
#Processing .process, #ajaxFailed .FailedMessage{
	margin: auto;
	width: 80px;
	background-color: #f9edbe;
	border: 1px solid #f0c36d;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	text-align: center;
	color: black;
	font-weight: bold;
	padding: 5px 0px 7px 0px;
	z-index: 8;
}
.FailedMessage{
	width: 260px !important;
} 

#AuxStatus {
	display: none;
	z-index: 7;
	background: #FFD6D6;
	border:0px solid #FF6363;
	width: 200px;
	height:115px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	padding:10px;
	text-align: center;
	font-size: 14px;
	color:#892727;
	border-radius: 3px;
}

#AuxStatusPopup {
	display: none;
	width:100%;
	background: #FFD6D6;
	border-bottom:1px solid #FF6363;
	height: 35px;
	line-height: 35px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	color:#892727;
	vertical-align: middle;
}

.modal-header{
	border-bottom-style:dashed;
	border-color:#ccc;
}

.modal-footer
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,efefef+100 */
	background: #fcfcfc; /* Old browsers */
	background: -moz-linear-gradient(top,  #fcfcfc 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fcfcfc 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fcfcfc 0%,#efefef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fcfcfc 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fcfcfc 0%,#efefef 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
}

#my-jam {
	height: 50px;
	line-height: 33px;
}

.app-header{
	width:100%;


	/*
	 * Added by Iwan, 8 March 2023
	 * Change fixed to absolute, so the dropdown notice layout can work properly
	 * Original: position:fixed;
	 */
	position:absolute;
	/* */


	top:0px;
	height:35px;
	color:white;
	clear:both;
	padding-right: 25px;

	/*background: #82795d;
	background: -moz-linear-gradient(top,  #82795d 0%, #706850 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82795d), color-stop(100%,#706850));
	background: -webkit-linear-gradient(top,  #82795d 0%,#706850 100%);
	background: -o-linear-gradient(top,  #82795d 0%,#706850 100%);
	background: -ms-linear-gradient(top,  #82795d 0%,#706850 100%);
	background: linear-gradient(to bottom,  #82795d 0%,#706850 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82795d', endColorstr='#706850',GradientType=0 );
	-webkit-box-shadow: inset 0px 1px 0px #766e55;
	box-shadow: inset 0px 1px 0px #766e55;*/

/*	background: #48587c;
	background: -moz-linear-gradient(top,  #48587c 0%, #3f4c6b 100%); 
	background: -webkit-linear-gradient(top,  #48587c 0%,#3f4c6b 100%);
	background: linear-gradient(to bottom,  #48587c 0%,#3f4c6b 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48587c', endColorstr='#3f4c6b',GradientType=0 ); 
	webkit-box-shadow: inset 0px 1px 0px #54668E;
	box-shadow: inset 0px 1px 0px #54668E;*/

	background: rgb(79,79,79); 
	background: -moz-linear-gradient(top,  rgba(79,79,79,1) 0%, rgba(71,71,71,1) 100%); 
	background: -webkit-linear-gradient(top,  rgba(79,79,79,1) 0%,rgba(71,71,71,1) 100%); 
	background: linear-gradient(to bottom,  rgba(79,79,79,1) 0%,rgba(71,71,71,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#474747',GradientType=0 );

}

.app-header .dropdown-toggle:hover, .app-header .dropdown-toggle:focus, .app-header .dropdown-toggle:active{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2a770+0,9b9053+100 */
	background: #b2a770; /* Old browsers */
	background: -moz-linear-gradient(top,  #b2a770 0%, #9b9053 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #b2a770 0%,#9b9053 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #b2a770 0%,#9b9053 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2a770', endColorstr='#9b9053',GradientType=0 ); /* IE6-9 */
}

.app-header  .navbar-brand {
	height:35px; padding-top:6px;
}

.app-header-label{
	float:left;
	height:35px;
	line-height:35px;
}

.app-header .dropdown{
	background:transparent;
	height:35px;
}

.app-header .dropdown-toggle{
	color:white;
	height:35px;
	padding-top: 8px;
}

#center-panel {
    margin-left: 220px;
    padding:18px 22px 18px 22px;
	overflow:auto;
	color: #fff;
}

#side-panel {
    position: fixed;
    float: left;
    width: 220px;
	background-color:#282828;
    border-right:1px solid #3e3e3e;
	-webkit-box-shadow: inset -2px 0px 5px 0px rgba(31,31,31,1);
	-moz-box-shadow: inset -2px 0px 5px 0px rgba(31,31,31,1);
	box-shadow: inset -2px 0px 5px 0px rgba(31,31,31,1);
	color: white;


	/*
	 * Added by Iwan, 29 April 2024 (CODE: 240402)
	 */
	overflow-y: auto;
	/* */


}

#side-panel p {
	padding: 10px 18px 10px 18px;
	margin-bottom: 0px;
}

#side-panel .list-group {
	margin-top: 0px;
}

#side-panel .list-group-item {
	padding: 8px 15px 8px 15px;
	border-radius: 0px;
	cursor: pointer;
	border:0px;
	border-top:1px solid #232323;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f4f4f4+2,eaeaea+4,eaeaea+100 */
	background: rgba(45,45,45,1);
	background: -moz-linear-gradient(left, rgba(45,45,45,1) 0%, rgba(45,45,45,1) 77%, rgba(36,36,36,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(45,45,45,1)), color-stop(77%, rgba(45,45,45,1)), color-stop(100%, rgba(36,36,36,1)));
	background: -webkit-linear-gradient(left, rgba(45,45,45,1) 0%, rgba(45,45,45,1) 77%, rgba(36,36,36,1) 100%);
	background: -o-linear-gradient(left, rgba(45,45,45,1) 0%, rgba(45,45,45,1) 77%, rgba(36,36,36,1) 100%);
	background: -ms-linear-gradient(left, rgba(45,45,45,1) 0%, rgba(45,45,45,1) 77%, rgba(36,36,36,1) 100%);
	background: linear-gradient(to right, rgba(45,45,45,1) 0%, rgba(45,45,45,1) 77%, rgba(36,36,36,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#242424', GradientType=1 );
	-webkit-box-shadow: inset 0px 1px 0px #383838;
	box-shadow: inset 0px 1px 0px #383838;

	position: relative;
	outline:none !important;
	color:#fff;
}

#side-panel .list-group-item:last-child {
	border-bottom:2px solid #232323;
}

#side-panel .list-group-item:hover, #side-panel .list-group-item:focus  {
	padding-left: 20px;
	background: #3b3b3b;
	-webkit-box-shadow: inset 0px 1px 0px #474747;
	box-shadow: inset 0px 1px 0px #474747;
}

#side-panel .list-group-item.active:after {
    /*content: '';
    position:absolute;
    right:-4px;
   	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid white; */
}

#side-panel .list-group-item img {
	margin-right: 4px;
}

#side-panel .list-group-item.active {
	background: #51961F; 
	color: #fff;
	padding-left: 20px;
	outline:none !important;
	-webkit-box-shadow: inset 0px 0px 1px 0px #A1EA5D;
	-moz-box-shadow: inset 0px 0px 1px 0px #A1EA5D;
	box-shadow: inset 0px 0px 1px 0px #A1EA5D;
}

/*#side-panel .list-group-item.active #BadgeReminder,
#side-panel .list-group-item.active #BadgeNews,
#side-panel .list-group-item.active #BadgeNotification {
	color:blue;
	background: #fff;
}*/


/**
 * Added by Milo, 09 April 2024
 * Split Reminder badge to Reminder and Callback
 **/
#side-panel .list-group-item.active #BadgeReminder{
	color:blue;
	background: #51961F;
}
#side-panel .list-group-item.active #BadgeNews,
#side-panel .list-group-item.active #BadgeNotification {
	color:blue;
	background: #fff;
}

#my-tabs {
	border-color: #424242;
	border-width: 1px;
}

#my-tabs a {
	background:#4C4C4C;
	border-color:#4C4C4C;
	padding:7px 18px 7px 18px;
	outline:none !important;
	color:white;
}

#my-tabs a:hover {
	background:#5B5B5B;
	border-color:#5B5B5B;
}

#my-tabs > .active > a {
	color:white;
	background: #51961F; 
	border-color:#51961F;
}

.btn-default {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
	font-weight:bold;
}

.my-panel .form-group {
	margin-bottom:8px;
}

.my-panel {
	background: #353535 !important;
	border-color:#424242;
}

.my-panel h4 {
	color:white;
}

.my-panel{
	border-top:0px;
	-webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
	background:white;
	padding:7px;
}

.input-group-addon{
	border-radius: 0px;
}

.form-control:focus
{
	background: #FFFFFF;
	border-left-width: 1px;
}

.list-group-service{
	margin-top: 10px;
}

.list-group-service a,
.list-group-reminder a
{
	padding:7px 15px 7px 15px;
	color:#fff !important;
	background: #4a4a4a;
	border:1px solid #6a6a6a;
	border-radius: 2px !important;
}

.list-group-service a:hover, 
.list-group-service a:focus,
.list-group-reminder a:hover, 
.list-group-reminder a:focus
{
	background: #3F3F3F;
	outline: none;
}

.list-group-service a span,
.list-group-reminder a span
{
	color:#999;
	padding-top: 2px;
}

.my-breadcrumb {
	margin-bottom:15px;
	/*background: #994F71; 509B87*/
	background: #095866;
	background: -moz-linear-gradient(top,  #095866 0%, #353535 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#095866), color-stop(100%,#353535));
	background: -webkit-linear-gradient(top,  #095866 0%,#353535 100%);
	background: -o-linear-gradient(top,  #095866 0%,#353535 100%);
	background: -ms-linear-gradient(top,  #095866 0%,#353535 100%);
	background: linear-gradient(to bottom,  #095866 0%,#353535 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#095866', endColorstr='#353535',GradientType=0 );
	
	color:#fff;
}

.my-breadcrumb a {
	color:#fff !important;
}
.my-breadcrumb a:hover,
.my-breadcrumb a:focus {
	outline: none;
}

.my-breadcrumb > li + li:before {
    color: #fff;
    content: "\2022  ";
    padding: 0 5px;
}

.HirarkiLink:hover,
.HirarkiLink:focus {
	color: #f90 !important;
	outline: none !important; 
}

#tabs-service {
	border-bottom: 1px solid #545454;
}

#tabs-service li a {
	color: #fff;
}

#tabs-service li a:hover, 
#tabs-service li a:focus {
	background: #4a4a4a;
	border-color:transparent;
	cursor: pointer;
	outline: none;
}

#tabs-service li.active a {
	background: #4a4a4a;
	border-color:transparent;
	cursor: pointer;
}

.page-wrap
{
	padding:20px 0px 0px 0px;
	text-align:center;
	cursor:pointer;
	position:relative;
	border:1px solid transparent;
}

.page-wrap-link{
	padding:0px 7px 10px 7px;
	color:#fff;
}

.page-wrap:hover
{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #3F3F3F;
	border:1px solid #424242;
}

.page-wrap:hover .hover-btn-left,.page-wrap:hover .hover-btn-right{
	display: block;
	text-decoration:none;
	font-size:11px;
}

.show_page_content_link, .show_page_content_link:hover{
	text-decoration:none;
	color:#333;
}

.hover-btn-left {
	position: absolute;
	top:0px;
	left:0px;
	display: none;
	padding:1px;
	width:50%;
	border-bottom:1px solid #4C4C4C;
	border-right:1px solid #4C4C4C;
	-webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomright: 3px;
     border-top-left-radius: 3px;
     border-bottom-right-radius: 3px;
     background: #3A3A3A;
}

.hover-btn-right {
	position: absolute;
	top:0px;
	right:0px;
	display: none;
	padding:1px;
	width:50%;
	border-bottom:1px solid #4C4C4C;
	-webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomleft: 3px;
     border-top-right-radius: 3px;
     border-bottom-left-radius: 3px;
    background: #3A3A3A;
}

.hover-btn-left:hover, 
.hover-btn-right:hover,
.hover-btn-left:focus, 
.hover-btn-right:focus {
	background:#549625;
	border-color:#549625;
	color:#fff !important;
	outline: none;
}

.panel-gue  > .panel-heading {
	color: #333;
}

.panel-gue  p {
	border-top:1px dashed #ccc;
	padding:5px 0px 0px 0px;
	width:100%;
}

.label-page{
	font-weight:bold;
	color:#999;
	letter-spacing: 0.0925em;
	font-size:10px;
}

.my-property  .list-group-item
{
	/*padding: 8px 15px 8px 15px;*/
	margin-bottom: 7px;
	border-radius: 0px;
	border:1px solid #686868;
	padding:5px 10px 5px 10px;
	text-align:left;
	cursor:pointer;
	background-color: #4a4a4a;
	color: #fff !important;
}

.my-property  .list-group-item:hover {
	background: #595959;
}

.my-property .list-group-item img
{
    opacity: 0.6;
    filter: alpha(opacity=60);
}

#CC_DesignPanel{
	border:1px solid #4d4d4d;
	background:url(
		data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAHElEQVQImWNQU1P7D8PGxsZwzEC6BDIHWRHpEgDWhjajzUUzrgAAAABJRU5ErkJggg==
   ) repeat;
	padding:20px;
	overflow:auto;
	position: relative;
}

#sortable, #sortable_menu, #sortable_form, #sortingDest { list-style-type: none; margin:0; padding:0; }
#sortable li {
	margin-bottom: 10px;
}

#sortable_menu li{
	margin-bottom:5px;
	padding:3px 8px 3px 8px;
	background:#f1f1f1;
}

#sortable_menu li.active{
	background:#d9edf6;
	color:#46768c;
	font-weight:bold;
}

#sortable_menu li a
{
	padding:5px;
	margin-top:-3px;
	margin-right:-7px;
	width:38px;
	text-align:center;
	margin-left:5px;
}

#sortable_menu li a:hover
{
	text-decoration:none;
	background:#C2E2EF;
}


.check_area
{
	margin-top:10px;
	padding:3px 8px 3px 8px;
}

.check_area2
{
	margin-top:2px;
	margin-bottom:10px;
	padding-bottom: 15px;
	border-bottom:1px dotted #ddd;
}

.backend_agent_speaking
{
	border-left:4px solid;
	border-right:4px solid;
	border-top:1px solid;
	border-bottom:1px solid;
	padding:17px 13px 17px 13px;
	letter-spacing: 0.0525em;
}

.backend_agent_speaking p
{
	margin:0px;
	padding:0px;
}

.frontend_agent_speaking
{
	border-left:4px solid;
	border-right:4px solid;
	border-top:1px solid;
	border-bottom:1px solid;
	padding:20px 13px 20px 13px;
	letter-spacing: 0.0525em;
	width: 97%;
	margin: auto;
	margin-bottom: 20px;
}

.frontend_agent_speaking p
{
	margin:0px;
	padding:0px;
}

/*
.backend_agent_speaking pre
{
	white-space: pre-wrap;
	word-wrap: break-word;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	-webkit-tab-size: 4;
	tab-size: 4;
	letter-spacing: 0.0525em;
	font-size:20px;
	padding:17px 13px 17px 13px;
	margin-bottom:0px;
	background:none;
	border:0px;
}
*/

.backend_notes
{
	border:1px solid;
	padding:10px;
}

.backend_notes p
{
	margin:0px;
	padding:0px;


	/*
	 * Added by Iwan, 23 January 2024 (CODE: 231006)
	 * Initial
	 *
	 * Added by Iwan, 21 February 2024 (CODE: 231006)
	 * Commented out as it does not aligned with WYSIWYG editor
	 */
	/* font-size: 14px !important;*/
	/* */


}


/*
 * Added by Iwan, 23 January 2024 (CODE: 231006)
 * Initial
 *
 * Added by Iwan, 21 February 2024 (CODE: 231006)
 * Commented out as it does not aligned with WYSIWYG editor
 */
/*
.backend_notes span
{
	font-size: 14px !important;
}
*/
/* */


.frontend_notes
{
	border:1px solid;
	padding:10px;
	width: 97%;
	margin: auto;
	margin-bottom: 20px;
}

.frontend_notes p
{
	margin:0px !important;
	padding:0px !important;


	/*
	 * Added by Iwan, 21 February 2024 (CODE: 231006)
	 * Commented out as it does not aligned with WYSIWYG editor
	 */
	/* font-size: 14px !important; */
	/* */


}

.frontend_notes span
{
	margin:0px !important;
	padding:0px !important;


	/*
	 * Added by Iwan, 21 February 2024 (CODE: 231006)
	 * Commented out as it does not aligned with WYSIWYG editor
	 */
	/* font-size: 14px !important; */
	/* */


}

/*
.backend_notes pre
{
	white-space: pre-wrap; 
	word-wrap: break-word; 
	-moz-tab-size: 4;
	-o-tab-size: 4;
	-webkit-tab-size: 4;
	tab-size: 4;
	padding:15px;
	margin-bottom:0px;
	background:none;
	border:0px;
}
*/

.backend_menu
{
	padding:18px 22px 28px 22px;
	margin-bottom:0px;
	background: #353535 !important;
	border:1px solid #4D4D4D !important;
}

.frontend_menu
{
	padding:0px 22px 5px 22px;
	margin-bottom:20px;
}


.frontend_filters {

	padding: 0px 22px 5px 22px;
	margin-bottom: 20px;
	color: white;
}

div.colorPicker-picker {
	height: 20px;
	width: 20px;
	padding: 0 !important;
	cursor: pointer;
	line-height: 16px;
	font-size:0.75em;
	font-weight:bold;
	text-align: center;
	border:1px solid #999;
}

div.colorPicker-palette {
	width: 110px;
	position: absolute;
	border: 1px solid #598FEF;
	background-color: #EFEFEF;
	padding: 2px;
	z-index: 9999;
}
div.colorPicker_hexWrap {width: 100%; float:left }
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }

div.colorPicker-swatch {
  height: 12px;
  width: 12px;
  border: 1px solid #000;
  margin: 2px;
  float: left;
  cursor: pointer;
  line-height: 12px;
}

.my-color-picker
{
	margin-bottom: 8px;
}

.my-color-picker td
{
	padding-right:5px;
}

.sample_code
{
	padding:5px;
	border:1px solid #ccc;
	margin-top:5px;
	margin-bottom:5px;
	border-radius:2px;
	background:#f1f1f1;
	color:#000;
	font-size:10px;
}

.my-replacement{
	padding-left:13px;
}

.my-replacement li {
	color:#000;
}

.alert-success{
	border-color:#77B243;
}

.bagian-kiri {
	border-right:1px solid #6a6a6a;
	border-right-style:dotted;
	padding-right:23px;
}

.bagian-kanan {
	padding-left:23px;
}

.menu_saya{
	padding:4px 7px 4px 7px;
	border-bottom:1px dotted #515151;
	font-size:13px;
	cursor:pointer;
	color: #fff;
}

.menu_saya:hover{
	border-bottom:1px solid #6AAF34;
	color:white;
	background: #51961F; 
}

.link_menu
{
	text-decoration:none;
	color:#333;
}

.link_menu:hover
{
	text-decoration:none;
}

.backend_custom_content
{
	padding:10px;
	position: relative;
	background: #353535 !important;
	border:1px solid #4D4D4D !important;
}

.backend_custom_content .corner-top-left, 
.backend_custom_content .corner-top-right {
	background: transparent;
	border-radius: 0px;
	border-color:#4D4D4D;
}
.backend_custom_content .corner-top-right:hover {
	background: #51961F;
	border-color: #6AAF34;
	color:#fff;
}


/*
 * Added by Iwan, 23 January 2024 (CODE: 231006)
 */
.backend_custom_content form .help-block
{
	color:#ffffff;
}

.backend_custom_content form [id^="MyCustomFieldForm"] a#InstallRelease
{
	color:#333333 !important;
}
/* */


.frontend_custom_content
{
	width: 97%;
	margin: auto;
	margin-bottom: 15px;
}

.frontend_form
{
	width: 60%;
	margin: auto;
	margin-bottom: 15px;
	padding: 0px 15px 10px 15px;
}

.frontend_form .form-control
{
	font-size:14px;
}

.frontend_form .alert-info, 
.form-inner .alert-info, 
#right_form .alert-info {
	background: #41464e;
	border-color:#606f88;
	color:#fff !important;
}

.my-tab-content
{
	border:1px solid #ddd;
	border-top:0px;
	padding:20px;
	-webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
}

.box-top
{
	padding:5px 10px 5px 10px;
	position:absolute;
	top:0px;
}

.box-top-right
{
	right:0px;
	border-left:1px solid #ddd;
	border-bottom:1px solid #ddd;
	-webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
     border-bottom-left-radius: 4px;
}

.drag_field
{
	border:1px solid #ddd;
	padding:5px 10px 5px 10px;
	text-align:left;
	margin-bottom:10px;
	cursor:pointer;
	background:#f4f4f4;
}

.drag_field img
{
	margin-right:3px;
}


#sortable_form li
{
	position: relative;
}

.myFormCheckbox
{
	margin-right:5px; 
	position: absolute;
	top:4px;
	left: 0px;
}

.CC_my-form-group{
	border:1px dotted transparent;
	padding:5px;
	margin-bottom:5px;
	cursor: pointer;
	margin-left:15px;
}

.CC_my-form-group:hover{
	background:#f4f4f4;
}


/*
 * Added by Iwan, 23 January 2024 (CODE: 231006)
 */
 .CC_my-form-group div hr
{
	border-color: #6a6a6a !important;
	border-style: dashed !important;
}
/* */


.popover-title
{
	font-size: 11px;
	font-weight: bold;
}

.popover {
    max-width: 100%;
    width: 380px;
}

.popover-form
{
	margin:10px 0px 10px 0px;
	width: 100%;
}

.popover-form td
{
	padding:3px;
}

.popover-form td input, 
.popover-form td select,
.popover-form td textarea
{
	border:1px solid #ccc;
	padding:3px 5px 3px 5px;
	border-radius:2px;
	width:100%;
}

.popover-form td textarea 
{
	width:177px;
	resize:vertical;
}

.myLightbulb
{
	vertical-align: top;
}

.my-hidden-tooltip span {
    z-index:10;
    display:none; 
    padding:14px 20px;
    margin-top:-20px; 
    margin-left:12px;
    width:220px; 
    line-height:16px;
}
.my-hidden-tooltip:hover span{
    display:inline; 
    position:absolute; 
    color:#111;
    background:#fffAF0;
}
.my-hidden-tooltip .callout {
	z-index:20;
	position:absolute;
	top:15px;
	border:0;
	left:-12px;
}

/*CSS3 extras*/
.my-hidden-tooltip span
{
    border-radius:4px;
}

.my-hidden-tooltip span pre
{
	white-space: pre-wrap; /* CSS 2.1 */
	word-wrap: break-word; /* IE7 */
	-moz-tab-size: 4;
	-o-tab-size: 4;
	-webkit-tab-size: 4;
	tab-size: 4;
	padding:0px;
	margin:0px;
	background:none;
	border:0px;
}

.form-inner
{
	width:70%;
	margin: auto;
	padding: 30px 0px 15px 0px;
}

.form-inner input[type=text], 
.form-inner input[type=password], 
.form-inner textarea,
.form-inner .form-control
{
	font-size: 14px !important;
}

.corner
{
	padding:5px 10px 5px 10px;
	position:absolute;
}

.corner-top-right
{
	top:0px;
	right:0px;
	border-left:1px solid #ddd;
	border-bottom:1px solid #ddd;
	-webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
     border-bottom-left-radius: 4px;
    background:#FCFCFC;
}

.corner-top-left
{
	top:0px;
	left:0px;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
	-webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
     border-bottom-right-radius: 4px;
     background:#FCFCFC;
}

.get-copy td
{
	padding:5px;
}

.tokenize-sample { 
	width: 100%; 
	background:#FCFCFC;
  	border-left:2px solid;
  	color: #262626;
}

.my-link
{
	text-decoration:underline;
}

.my-link-group .list-group-item
{
	font-weight:bold;
}

.my-link-group .list-group-item:hover
{
	color:white;
	border-color:transparent;
}

.my-link2, .my-link2:focus, .my-link2:active
{
	text-decoration:none;
}

.my-link2:hover
{
	color:green;
	text-decoration:none;
}

.cc_popup_head
{
	border-top:0px;
	border-radius:0px;
    clear: both;
    color:#fff;
    border-color:#3F3F3F;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#706555+0,2d2d2d+100 */
	/*background: rgb(112,101,85); 
	background: -moz-linear-gradient(top,  rgba(112,101,85,1) 0%, rgba(45,45,45,1) 100%); 
	background: -webkit-linear-gradient(top,  rgba(112,101,85,1) 0%,rgba(45,45,45,1) 100%); 
	background: linear-gradient(to bottom,  rgba(112,101,85,1) 0%,rgba(45,45,45,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#706555', endColorstr='#2d2d2d',GradientType=0 ); 
	*/

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48507a+0,2d2d2d+100 */
	/*background: #48507a;
	background: -moz-linear-gradient(top,  #48507a 0%, #2d2d2d 100%); 
	background: -webkit-linear-gradient(top,  #48507a 0%,#2d2d2d 100%); 
	background: linear-gradient(to bottom,  #48507a 0%,#2d2d2d 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48507a', endColorstr='#2d2d2d',GradientType=0 );*/ 

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#474747+0,2d2d2d+100 */
	background: #474747; 
	background: -moz-linear-gradient(top,  #474747 0%, #2d2d2d 100%);
	background: -webkit-linear-gradient(top,  #474747 0%,#2d2d2d 100%); 
	background: linear-gradient(to bottom,  #474747 0%,#2d2d2d 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#2d2d2d',GradientType=0 );

}

#Popup_Back .btn-default
{
	border:0px !important;
}

.cc_search .form-control {
	border-color:#7F7863 !important;
	border-left: 3px solid #4F7F3D !important;
}

.cc_popup_head #Popup_ClientInfo {
	color: #fff;
}

.cc_popup_head #Popup_ClientInfo:hover {
	color: #A4DD1F;
}

.cc_popup_content
{
	border-radius:0px;
	margin-bottom: 80px;
	background: #353535;
	border-color:#424242;
}

.cc_popup_content .panel-body
{
	padding: 0px;
}

.cc_popup_content .breadcrumb
{
	margin-bottom: 8px;
	border-radius:0px;
	background: transparent;
	padding:0px 15px 0px 15px;
	margin-top: 10px;
}

.cc_popup_content .breadcrumb > li
{
	padding: 8px 0px 8px 0px;
}

.cc_popup_content .breadcrumb > li + li:before
{
	padding: 0px;
}

.cc_popup_content .breadcrumb > li > a
{
	padding: 9px 8px 9px 8px;
	color:#f7eda7;
}

.cc_popup_content .breadcrumb > li:first-child > a
{
	background-image:url('../../assets/img/home.png');
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 28px;
}

.cc_popup_content .breadcrumb > li > a:hover
{
	background-color: #4a4a4a;
	text-decoration: none;
}

.cc_popup_content .alert
{
	margin-bottom: 10px;
}

.cc_popup_content .alert.alert-warning
{
	background: #fff1ae !important;
	border-color:#f4e28b;
	color:#232323;
}

.cc_popup_content .alert.alert-info
{
	color:#232323;
}

.cc_client_name
{
	font-weight: bold;
	font-family: trebuchet MS;
	font-size: 15px;
	color:black;
	margin-left: 5px;
	padding-top: 2px;
}

.cc_client_name:hover
{
	cursor: pointer;
}

.cc_popup_head table td
{
	padding:0px 5px 0px 0px;
}

.cc_popup_footer{
	position: fixed;
	bottom: 0px;
	width: 100%;
}

.cc_popup_footer .panel{
	margin-bottom: -1px;
	border-radius:0px;
	background-color: #4a4a4a;
	border-color:#5E5E5E;
}

.cc_waktu
{
	width:100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 4px;
}

.cc_search
{
	width:280px;
	float: right;
}

.inactive_page
{
	width:96%; margin:auto; color:red;
}

.tabs-padding
{
	padding: 20px 5px 10px 5px;
}

.my-well
{
	margin-bottom:15px;
	background-color: #3A3A3A;
	border:1px solid #3F3F3F;
}

.my-well .btn-default, 
.my-btn-default {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#595959+0,4f4f4f+100 */
	background: #595959 !important; /* Old browsers */
	background: -moz-linear-gradient(top,  #595959 0%, #4f4f4f 100%) !important; /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #595959 0%,#4f4f4f 100%) !important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #595959 0%,#4f4f4f 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595959', endColorstr='#4f4f4f',GradientType=0 ) !important; /* IE6-9 */
	border:1px solid #6B6B6B !important;
	font-weight: normal !important;
	color: #fff !important;
}

.my-well .btn-default:hover,
.my-well .btn-default:focus,
.my-btn-default:hover,
.my-btn-default:focus,
.my-well .CC_PageMode_Active {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3f3f3f+0,595959+100 */
	background: #3f3f3f !important; /* Old browsers */
	background: -moz-linear-gradient(top,  #3f3f3f 0%, #595959 100%) !important; /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #3f3f3f 0%,#595959 100%) !important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #3f3f3f 0%,#595959 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#595959',GradientType=0 ) !important; /* IE6-9 */

}

.ColTabKiriDest
{
	padding-right: 7px;
}

.ColTabKananDest
{
	padding-left: 7px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.TabKiriDest, .TabKananDest
{
	border-right:1px solid #ddd;
	padding:10px;
}

.TabKananDest
{
	border-color:transparent;
	padding-top: 0px;
	padding-bottom: 0px;
}

.DragDest
{
	border:1px solid #ddd;
	padding:5px 10px 5px 10px;
	text-align:left;
	cursor:pointer;
	background:#f9f9f9;
	margin-bottom: 5px;
}

.DragDest img
{
	margin-right: 3px;
}

.panel-dest-item, .highlight-box
{
	margin-bottom: 15px;
}

.panel-dest-item .panel-body, .panel-dest-item .panel-heading
{
	padding: 7px 10px 7px 10px;
}

.tabel-dest td
{
	padding: 2px 5px 2px 5px;
	vertical-align: top;
}

.highlight-box
{
	width: 100%;
	height: 100px;
	border:1px dashed #EABA72;
	background: #FFF7EA;
}

.DestFlowLoop
{
	width: 96%;
	margin: auto;
	margin-top: 9px;
	margin-bottom: 10px;
}

.contact-dest
{
	border:1px solid;
	width: 100%;
	padding:0px 10px 10px 10px;
	height: 540px;
	overflow: auto;
}

.add-to
{
	border:1px solid #ddd;
	padding:8px;
	margin-right: 5px;
	width: 150px;
	cursor: pointer;
}

.tabel-dest-contact td
{
	padding: 2px 20px 2px 0px;
	color:green;
}

.attachment_field
{
	width: 100%;
	padding:10px;
	border:1px solid #5E5E5E;
	background: #3D3D3D;
	color:#fff;
}

.attachment_field2
{
	width: 100%;
	padding:10px;
	border:1px solid #ccc;
	background: #f1f1f1;
	color:#fff;
}

.table-dest-attachment td
{
	padding-right: 10px;
	padding-bottom: 3px;
}

.table-dest-attachment td input[type=text]
{
	border:1px solid #bebebe;
	padding: 1px 5px 1px 5px;
}

.attachment_field2 td {
	color: #000;
}

.WidthTemplateMessage
{
	width:100px;
}

.WidthTemplateMessage2
{
	width:135px;
}

#TabelSituationRoster {
	list-style-type: none;
	margin:0px;
	padding: 0px;
}

#TabelSituationRoster li {
	padding: 2px 0px 2px 0px;
}

#RemoveRosterSituation {
	margin-right: 10px;
}

#FinishRoster{
	display: none;
	margin-top: 20px;
}

#auto_active {
	display: none;
	padding: 0px;
	margin: 0px;
	padding-left: 10px;
}

.t2 
{
	width: 100%;
}

.t2 td
{
	padding-right: 5px;
}

.MySlider{
    position:fixed;
    background:#fff;
    right:0px;
    top:60px;
    z-index: 9;
}
.well-slider{
	margin-bottom: 10px;
	clear: both;
	height: 37px;
}
.RosterJudul
{
	float: left;
	margin-left: 5px;
}
.ButtonCloseSlider{
	width: 180px;
	background: transparent;
	height: 17px;
	line-height: 17px;
	text-align: center;
	float: right;
	cursor: pointer;
	color:#3990CE;
	font-weight: bold;
}
.ButtonCloseSlider:hover{
	text-decoration: underline;
}

.common-hr{
	margin-bottom: 20px;
	margin-top: 0px;
}

.tabel_popup_faq a
{
	margin-right: 5px;
}

#myFAQ ul li a {
	font-weight: bold !important;
}

.MsgEventNumber td { 
	padding: 4px;
	vertical-align: top;
}

.MsgEventNumber td p { 
	margin-bottom: 0px;
}


#TabKiriDest{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */
/*background: #ffffff; 
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); 
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );*/
}

.unread-news
{
	font-weight: bold;
}

.modal-fullscreen {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    margin-top: -1px;
    overflow: hidden;
}
.modal-fullscreen div.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}

#ListSOPDetail .list-group-item.active {
	font-weight: bold;
	background: #f1f1f1;
	color:#333;
	border-color:#ccc;
}

#ListSOPDetail .list-group-item
{
	padding-top:6px;
	padding-bottom:6px;
}

#PanelSOP, #PanelSOP p,
.content-news, .content-news p 
{


	/*
	 * Added by Iwan, 21 February 2024 (CODE: 231006)
	 * Commented out as it does not aligned with WYSIWYG editor
	 */
	/* font-size: 12px !important; */
	/* */


}

.link-panel
{
	color:white;
}

.link-panel:hover {
	color:white;
	text-decoration: underline;
}

.tabel_detail_retrieval td
{
	padding-right: 5px;
}

.ListAllForm
{
	padding: 7px 10px 7px 10px;
	background: #f4f4f4;
	margin-bottom: 3px;
	cursor: pointer;
	color:#0993EF;
	border-left:3px solid transparent;
}

.ListAllForm:hover, 
.ListAllForm-Active
{
	color:white;
	background: #f4f4f4 !important;
	color:#0993EF;
	border-left:3px solid #2E86C1;
}

.IframeFormAll
{
	padding: 0px;
	width: 100%;
	border:0px;
}

#KontenRetrieval
{
	padding-left:10px;
	padding-right: 10px;
}

.HirarkiLink
{
	color:#333;
	text-decoration: none !important;
}

.HirarkiLink:hover
{
	color:#f90;
}



.grid-dashboard
{
	width:100%;
	padding: 15px 30px 15px 30px;
	
	background: #353535;
	border:1px solid #424242;
	margin-bottom:20px;
}

#detail-dashboard {
	cursor: pointer;
}
#detail-dashboard:hover
{
	border-color:#f90;
}

#Dash_Total, #dash_anwsered, #dash_abandoned, #dash_outbound 
{
	font-weight: bold;
	font-size: 32px;
	font-family: arial;
}

.panel-reporting  > .panel-body ul {
	list-style-type: none; 
	margin:0; 
	padding:0;
}

.panel-reporting  > .panel-body ul li a {
	border:0px;
	padding: 2px 7px 3px 7px;
	font-size: 12px;
}

.panel-reporting  > .panel-body ul li a:hover {
	color:white;
}

.header-reporting
{
	padding: 0px;
	margin-bottom: 0px;
	margin-top: 5px;
}

.header-reporting span
{
	color: #999;
}

.aux_table td {
	padding: 3px;
}

.aux_table td hr {
	margin-top: 5px;
	margin-bottom: 7px;
}

.user-info {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#31a2ff+0,258dc8+100 */
	background: #31a2ff; /* Old browsers */
	background: -moz-linear-gradient(top,  #31a2ff 0%, #258dc8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#31a2ff), color-stop(100%,#258dc8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #31a2ff 0%,#258dc8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #31a2ff 0%,#258dc8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #31a2ff 0%,#258dc8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #31a2ff 0%,#258dc8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31a2ff', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
	color: white;
}

.cc_client_name:hover
{
	color:#5f9be5;
}

.contact-dest
{
	border-color:#8FD2EA;
	background: #f2f9fe; 
	background: -moz-linear-gradient(top,  #f2f9fe 0%, #d6f0fd 100%); 
	background: -webkit-linear-gradient(top,  #f2f9fe 0%,#d6f0fd 100%); 
	background: linear-gradient(to bottom,  #f2f9fe 0%,#d6f0fd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); 
}

.my-input-field {
	border:1px solid #ddd;
	padding: 2px;
	width: 100%;
}

#RosterLinkQ tbody td .my-input-field {
	background: #f4f4f4;
}

.small-button {
	border:1px solid #ccc;
	background: #f1f1f1;
	padding: 1px 7px 1px 7px;
}

.small-button:hover {
	background: #D6700A;
	border-color:#D6700A;
	color: #fff;
}

.ListAllForm:hover, 
.ListAllForm-Active
{
	background:#428bca;
}

.panel-reporting {
	border-color:#6A6A6A;
	border-radius: 0px;
}

.panel-reporting > .panel-heading {
	background: #4A4A4A;
	border-color:#6A6A6A;
	border-radius: 0px;
	color:#fff;
}

.panel-reporting > .panel-body {
	background: #353535;
}

.panel-reporting  > .panel-body ul li a {
	background: transparent;
	color: #fff;
}

.panel-reporting  > .panel-body ul li a:hover, 
.panel-reporting  > .panel-body ul li a.active 
 {
	background:#4C891C;
}

.btn-bawah-popup a {
	font-weight: bold !important;
}


/*
 * Added by Iwan, 8 March 2024 (CODE: 240301)
 */
.CatatanKuBtn {
	position: fixed;
	width: 100%;
}

.CatatanKuBtn #OpenNote {
	position: absolute;
	top: -31px;
	right: 17px;
	border-radius: 0px;
}
/* */


.CatatanKu {
	position:fixed; 
	bottom:0px; 


	/*
	 * Added by Iwan, 8 March 2024 (CODE: 240301)
	 * Change value from 99999 to -1
	 * Original: z-index: 99999;
	 */
	z-index: -1;
	/* */


	width:100%; 
}

.CatatanKu #OpenNote {
	position: absolute;
	top: -31px;
    right: 17px;
    border-radius: 0px;
}

#CatatanKu { 
	display: none; 
	height:200px; 
	background: #4a4a4a;
}

#CatatanKu textarea {
	width: 97%;
	height: 162px;
	resize:none;
	margin-top: 5px;
	background: #ffffff;
    border: 0px;
    color:#000;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    z-index: 99999;
}

#CatatanKu textarea:focus {
	outline:none;
}

@media screen and (max-width:768px) {
	.login-panel{
		width:90%;
		margin-top:20px;
	}
	.bagian-kiri {
		border:0px;
		padding-right:15px;
	}
	.bagian-kanan {
		padding-left:15px;
	}
	.cc_search
	{
		width:100%;
		float: none;
	}
	.WidthTemplateMessage, .WidthTemplateMessage2
	{
		width:auto;
	}
}


/*
 * Added by Iwan, 5 January 2023
 */
.dragable_touch {
	cursor: move;
}
/* */


/*
 * Added by Iwan, 3 March 2023
 */
.top-text-block {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333333;
	white-space: inherit !important;
	border-bottom: 1px solid #ebeaea;
	position: relative;
	cursor: pointer;
}

.top-text-block:hover:before {
	content: '';
	width: 4px;
	background: #f05a1a;
	left: 0;
	top: 0;
	bottom: 0;
	position: absolute;
}

.top-text-block.unread {
	background: #ffffcc;
}


/*
 * Added by Iwan, 7 March 2023
 */
.top-text-block:hover {
	background: #f0f0f0;
}

.top-text-block.unread:hover {
	background: #ffffaa;
}

.top-text-block.add-block:hover {
	background: none;
}

.top-text-block.add-block:hover:before {
	background: none;
}

/* */


.top-text-block .top-text-light {
	color: #999999;
	font-size: 0.8em;
}

.top-text-block .top-text-light2 {
	color: #000360;
	font-size: 0.8em;
	font-weight: normal;
}

.top-head-dropdown .dropdown-menu {
	width: 350px;


	/*
	 * Added by Iwan, 18 May 2023 (CODE: 230510)
	 * Change to 520px
	 * Original: max-height: 400px;
	 */
	max-height: 520px;
	/* */


	/*max-height: 93vh;*/
	overflow: auto;
}
.top-head-dropdown li:last-child .top-text-block {
	border-bottom: 0;
}

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

.loader-topbar {
	margin: 5px auto;
	border: 3px solid #dddddd;
	border-radius: 50%;
	border-top: 3px solid #666666;
	width: 22px;
	height: 22px;
	-webkit-animation: spin-topbar 1s linear infinite;
	animation: spin-topbar 1s linear infinite;
}

.notice-fix {
	position: revert;
}

@-webkit-keyframes spin-topbar {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin-topbar {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* */


/*
 * Added by Iwan, 13 March 2023
 */
.dt-adv-search-header {
	background-color:#353535 !important;
	padding-bottom:10px !important;
	padding-top:0 !important;
	padding-left:0 !important;
	padding-right:0 !important;
	border-top:1px solid #353535 !important;
	border-left:1px solid #353535 !important;
	border-right:1px solid #353535 !important;
}
/* */


/*
 * Added by Iwan, 15 March 2023
 */
.search-box {
	padding-right: 20px;
}

.clear-input {
	position: absolute;
	right: 20px;
	top: 8px;
	cursor: pointer;
}
/* */


/*
 * Added by Iwan, 17 March 2023
 */
.popover.popover-fix {
	width: unset;
}

.popover.top>.arrow.arrow-fix {
	bottom: -10px;
}

.popover.right>.arrow.arrow-fix {
	left: -10px;
}

.popover-title.popover-title-fix {
	color: #000000;
}

.popover-content.popover-content-fix {
	color: #000000;
}

.btn.btn-link.popovers:focus {
	outline: none;
}
/* */


/*
 * Added by Iwan, 21 March 2023
 */
.cc_popup_news {
	border-radius: 0px;
	margin-top: 10px;
	background: #353535;
	/*border-color: #2d2d2d;*/
	border: unset;
}

.glow-on-hover-1 {
	/* width: 220px;*/
	height: 100%;
	min-height: 30px;
	margin: 0;
	border: none;
	outline: none;
	color: #ffffff;
	background: #111111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.glow-on-hover-1:before {
	content: '';
	background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 1;
	transition: opacity .4s ease-in-out;
	border-radius: 10px;
}

.glow-on-hover-1:active {
	color: #000000;
}

.glow-on-hover-1:active:after {
	background: transparent;
}

.glow-on-hover-1:hover:before {
	opacity: 1;
}

.glow-on-hover-1:hover:after {
	background: transparent;
}

.glow-on-hover-1:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111111;
	left: 0;
	top: 0;
	border-radius: 10px;
}

.glow-on-hover-2 {
	/* width: 220px;*/
	height: 100%;
	min-height: 30px;
	margin: 0;
	border: none;
	outline: none;
	color: #ffffff;
	background: #111111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.glow-on-hover-2:before {
	content: '';
	background: linear-gradient(45deg, #ff00c8, #ff0000, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff);
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 1;
	transition: opacity .3s ease-in-out;
	border-radius: 10px;
}

.glow-on-hover-2:active {
	color: #000000;
}

.glow-on-hover-2:active:after {
	background: transparent;
}

.glow-on-hover-2:hover:before {
	opacity: 1;
}

.glow-on-hover-2:hover:after {
	background: transparent;
}

.glow-on-hover-2:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111111;
	left: 0;
	top: 0;
	border-radius: 10px;
}

.glow-on-hover-3 {
	/* width: 220px;*/
	height: 100%;
	min-height: 30px;
	margin: 0;
	border: none;
	outline: none;
	color: #ffffff;
	background: #111111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.glow-on-hover-3:before {
	content: '';
	background: linear-gradient(45deg, #002bff, #7a00ff, #ff00c8, #ff0000, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5);
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 1;
	transition: opacity .3s ease-in-out;
	border-radius: 10px;
}

.glow-on-hover-3:active {
	color: #000000;
}

.glow-on-hover-3:active:after {
	background: transparent;
}

.glow-on-hover-3:hover:before {
	opacity: 1;
}

.glow-on-hover-3:hover:after {
	background: transparent;
}

.glow-on-hover-3:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111111;
	left: 0;
	top: 0;
	border-radius: 10px;
}

.glow-on-hover-4 {
	/* width: 220px;*/
	height: 100%;
	min-height: 30px;
	margin: 0;
	border: none;
	outline: none;
	color: #ffffff;
	background: #111111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.glow-on-hover-4:before {
	content: '';
	background: linear-gradient(45deg, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000, #ff0000, #ff7300, #fffb00);
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 1;
	transition: opacity .3s ease-in-out;
	border-radius: 10px;
}

.glow-on-hover-4:active {
	color: #000000;
}

.glow-on-hover-4:active:after {
	background: transparent;
}

.glow-on-hover-4:hover:before {
	opacity: 1;
}

.glow-on-hover-4:hover:after {
	background: transparent;
}

.glow-on-hover-4:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111111;
	left: 0;
	top: 0;
	border-radius: 10px;
}

.glow-on-hover-5 {
	/* width: 220px;*/
	height: 100%;
	min-height: 30px;
	margin: 0;
	border: none;
	outline: none;
	color: #ffffff;
	background: #111111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.glow-on-hover-5:before {
	content: '';
	background: linear-gradient(45deg, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000, #ff0000);
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 1;
	transition: opacity .3s ease-in-out;
	border-radius: 10px;
}

.glow-on-hover-5:active {
	color: #000000;
}

.glow-on-hover-5:active:after {
	background: transparent;
}

.glow-on-hover-5:hover:before {
	opacity: 1;
}

.glow-on-hover-5:hover:after {
	background: transparent;
}

.glow-on-hover-5:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111111;
	left: 0;
	top: 0;
	border-radius: 10px;
}

.glow-on-hover-6 {
	/* width: 220px;*/
	height: 100%;
	min-height: 30px;
	margin: 0;
	border: none;
	outline: none;
	color: #ffffff;
	background: #111111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.glow-on-hover-6:before {
	content: '';
	background: linear-gradient(45deg, #ff0000, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8);
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 1;
	transition: opacity .3s ease-in-out;
	border-radius: 10px;
}

.glow-on-hover-6:active {
	color: #000000;
}

.glow-on-hover-6:active:after {
	background: transparent;
}

.glow-on-hover-6:hover:before {
	opacity: 1;
}

.glow-on-hover-6:hover:after {
	background: transparent;
}

.glow-on-hover-6:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111111;
	left: 0;
	top: 0;
	border-radius: 10px;
}

.glow-on-hover-7 {
	/* width: 220px;*/
	height: 100%;
	min-height: 30px;
	margin: 0px;
	border: none;
	outline: none;
	color: #ffffff;
	background: #111111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.glow-on-hover-7:before {
	content: '';
	background: linear-gradient(45deg, #7a00ff, #ff00c8, #ff0000, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff);
	position: absolute;
	top: -2px;
	left:-2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 1;
	transition: opacity .3s ease-in-out;
	border-radius: 10px;
}

.glow-on-hover-7:active {
	color: #000000;
}

.glow-on-hover-7:active:after {
	background: transparent;
}

.glow-on-hover-7:hover:before {
	opacity: 1;
}

.glow-on-hover-7:hover:after {
	background: transparent;
}

.glow-on-hover-7:after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111111;
	left: 0;
	top: 0;
	border-radius: 10px;
}

@keyframes glowing {
	0% { background-position: 0 0; }
	50% { background-position: 400% 0; }
	100% { background-position: 0 0; }
}

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


/*
 * Added by Iwan, 22 March 2023
 */
/* Define the keyframes for the shaking animation */
@keyframes shake {
	0% { transform: rotate(0); }
	2% { transform: rotate(5deg); }
	4% { transform: rotate(-5deg); }
	6% { transform: rotate(4deg); }
	8% { transform: rotate(-4deg); }
	10% { transform: rotate(2deg); }
	11% { transform: rotate(-2deg); }
	12% { transform: rotate(1deg); }
	13% { transform: rotate(0); }
	15% { transform: rotate(5deg); }
	17% { transform: rotate(-5deg); }
	19% { transform: rotate(4deg); }
	21% { transform: rotate(-4deg); }
	23% { transform: rotate(2deg); }
	24% { transform: rotate(-2deg); }
	25% { transform: rotate(1deg); }
	26% { transform: rotate(0); }
}

/* Apply the animation to the element */
.animate-shake {
	animation-name: shake;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes grow-shrink {
	0% { transform: scale(1); }
	10% { transform: scale(1.3); }
	15% { transform: scale(1.3); }
	25% { transform: scale(1); }
}

/* Apply the animation to the element */
.animate-grow-shrink {
	animation-name: grow-shrink;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
/* */


/*
 * Added by Iwan, 22 March 2023
 */
.scroll-text {
	overflow: hidden;
}

.scroll-text div {
	display: inline-block;
	white-space: nowrap;
	animation: scroll 15s linear infinite;
}

@keyframes scroll {
	0% { transform: translateX(100%); }
	100% { transform: translateX(-20%); }
}

.ellipsis {
	white-space: nowrap; /* Prevents text from wrapping */
	overflow: hidden; /* Hides any overflowing text */
	text-overflow: ellipsis; /* Adds an ellipsis to the end of the text */
}

.panel-footer-notice {
	padding: unset;
	background-color: #2d2d2d;;
	border-top-color: #2d2d2d;
	border-left-color: #2d2d2d;
	border-right-color: #2d2d2d;
	border-bottom-color: #2d2d2d;
}
/* */


/*
 * Added by Iwan, 12 April 2023
 */
#ModalContentStatic hr {
	border-color:#f1f1f1;
	border-style: solid;
}

#ModalContentStatic .form-group label {
	color:#333 !important;
	font-weight: bold !important;
}

#ModalContentStatic .form-control {
	background:#fff !important;
	border:1px solid #ddd !important;
	color:#333 !important;
}

#ModalFooterStatic .btn-primary, 
#ModalContentStatic .btn-primary,
.popover-content .btn-primary {
	border:1px solid #4B8E18;
	font-weight: bold;
	background: #5CBC1C; 
}
#ModalFooterStatic .btn-primary:hover,
#ModalFooterStatic .btn-primary:focus,
#ModalContentStatic .btn-primary:hover,
#ModalContentStatic .btn-primary:focus,
.popover-content .btn-primary {
	background: #52AD16;
	border:1px solid #42890F;
}

#ModalContentStatic #my-grid th,
#ModalContentStatic [id^="my-grid-"] th {
	border-color:#C9DCEA;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#deeffc+0,d7e6f2+100 */
	background-color: #deeffc; /* Old browsers */
	background-color: -moz-linear-gradient(top,  #deeffc 0%, #d7e6f2 100%); /* FF3.6+ */
	background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deeffc), color-stop(100%,#d7e6f2)); /* Chrome,Safari4+ */
	background-color: -webkit-linear-gradient(top,  #deeffc 0%,#d7e6f2 100%); /* Chrome10+,Safari5.1+ */
	background-color: -o-linear-gradient(top,  #deeffc 0%,#d7e6f2 100%); /* Opera 11.10+ */
	background-color: -ms-linear-gradient(top,  #deeffc 0%,#d7e6f2 100%); /* IE10+ */
	background-color: linear-gradient(to bottom,  #deeffc 0%,#d7e6f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deeffc', endColorstr='#d7e6f2',GradientType=0 ); /* IE6-9 */
	color:#000;
	font-weight: bold;
}

#ModalContentStatic #my-grid td,
#ModalContentStatic [id^="my-grid-"] td {
	color:#000;
}

#ModalContentStatic .dataTables_filter, 
#ModalContentStatic .dataTables_length, 
#ModalContentStatic .dataTables_info,
#KontenRetrieval .dataTables_filter, 
#KontenRetrieval .dataTables_length, 
#KontenRetrieval .dataTables_info  {
	color: #000;
}
/* */


/*
 * Added by Iwan, 30 May 2023 (CODE: 230517)
 */
.top-text-heading-client {
	font-size: 11px;
	font-style: italic;
}
/* */


/*
 * Added by Iwan, 31 May 2023 (CODE: 230517)
 */
.marquee_container {
	padding: 0px;
	/*background-color: #3b5998;
	width: 200px;*/
	width: 100%;
	/*font-family: Arial,sans-serif;
	font-weight: 700;
	line-height: 1.5;*/
	overflow: hidden;
}

.marquee_text {
	/*color: white;
	text-decoration: none;
	text-align: center;*/
	white-space: nowrap;
	display: inline-flex;
	line-height: 2;
}

.marquee_text_backandforth {
	animation: backAndForth 7s linear infinite;
}

.marquee_text_backandforth2 {
	animation: backAndForth2 14s linear infinite;
}

.marquee_text_backandforth3 {
	animation: backAndForth3 21s linear infinite;
}

.marquee_text_backandforth4 {
	animation: backAndForth4 28s linear infinite;
}

.marquee_text_backandforth5 {
	animation: backAndForth5 35s linear infinite;
}

.marquee_text_backandforth6 {
	animation: backAndForth6 42s linear infinite;
}

.marquee_text_backandforth7 {
	animation: backAndForth7 49s linear infinite;
}

.marquee_text_backandforth8 {
	animation: backAndForth8 56s linear infinite;
}

@keyframes backAndForth {
	0% { transform: translateX(0); }
	10% { transform: translateX(0); }
	45% { transform: translateX(calc(-100% + 237px)); }
	55% { transform: translateX(calc(-100% + 237px)); }
	90% { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes backAndForth2 {
	0% { transform: translateX(0); }
	5% { transform: translateX(0); }
	46% { transform: translateX(calc(-100% + 237px)); }
	54% { transform: translateX(calc(-100% + 237px)); }
	95% { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes backAndForth3 {
	0% { transform: translateX(0); }
	3% { transform: translateX(0); }
	47% { transform: translateX(calc(-100% + 237px)); }
	53% { transform: translateX(calc(-100% + 237px)); }
	97% { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes backAndForth4 {
	0% { transform: translateX(0); }
	2% { transform: translateX(0); }
	48% { transform: translateX(calc(-100% + 237px)); }
	52% { transform: translateX(calc(-100% + 237px)); }
	98% { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes backAndForth5 {
	0% { transform: translateX(0); }
	1% { transform: translateX(0); }
	49% { transform: translateX(calc(-100% + 237px)); }
	51% { transform: translateX(calc(-100% + 237px)); }
	99% { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes backAndForth6 {
	0% { transform: translateX(0); }
	1% { transform: translateX(0); }
	49% { transform: translateX(calc(-100% + 237px)); }
	51% { transform: translateX(calc(-100% + 237px)); }
	99% { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes backAndForth7 {
	0% { transform: translateX(0); }
	1% { transform: translateX(0); }
	49% { transform: translateX(calc(-100% + 237px)); }
	51% { transform: translateX(calc(-100% + 237px)); }
	99% { transform: translateX(0); }
	100% { transform: translateX(0); }
}

@keyframes backAndForth8 {
	0% { transform: translateX(0); }
	1% { transform: translateX(0); }
	49% { transform: translateX(calc(-100% + 237px)); }
	51% { transform: translateX(calc(-100% + 237px)); }
	99% { transform: translateX(0); }
	100% { transform: translateX(0); }
}
/* */


/*
 * Added by Iwan, 2 June 2023 (CODE: 230601)
 */
@keyframes fade1 {
	from { opacity: 1.0; }
	20% { opacity: 0.0; }
	21% { opacity: 1.0; }
	to { opacity: 1.0; }
}

@-webkit-keyframes fade1 {
	from { opacity: 1.0; }
	20% { opacity: 0.0; }
	21% { opacity: 1.0; }
	to { opacity: 1.0; }
}

.blinking {
	animation:fade1 1000ms infinite;
	-webkit-animation:fade1 1000ms infinite;
}
/* */


/*
 * Added by Iwan, 8 June 2023 (CODE: 230517)
 */
.ellipsis-span {
	display: block;
	/*width: 200px;*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/*cursor: pointer;*/
}

.ellipsis-span.full {
	white-space: normal;
	text-overflow: unset;
	overflow: unset;
	cursor: auto;
}

.ellipsis-span.overflowed {
	cursor: pointer;
}
/* */



/*
 * Added by Iwan, 5 July 2023 (CODE: 230701)
 */
#side-panel .list-group-item.active #BadgeActiveLog {
	color:blue;
	background: #fff;
}

#BadgeActiveLog {
	background: #51961F; 
	color:#fff;
}
/* */


/**
 * Added by Milo, 09 April 2024
 * Split Reminder badge to Reminder and Callback
 **/

#BadgeReminder .badge.badge-callback{
  color: #fff; 
  background-color: #f0ad4e;
  border-color: #eea236;
}
#BadgeReminder .badge.badge-reminder{
	color:blue;
	background: #fff;
}

/*
 * Added by Iwan, 7 March 2024 (CODE: 240301)
 */
.panel-heading.clickable {
	cursor: pointer;
}

.cc_popup_content .panel-body.backend_custom_content {
	padding: 10px;
}

#ContentTab .backend_custom_content a {
	color: #ffffff;
}

#ContentTab .backend_custom_content .panel-default .panel-title a {
	color: #000000;
}

#ContentTab .backend_custom_content .panel-info .panel-title a {
	color: #31708f;
}

#ContentTab .backend_custom_content .panel-warning .panel-title a {
	color: #8a6d3b;
}

#ContentTab .backend_custom_content .panel-danger .panel-title a {
	color: #a94442;
}

#ContentTab .backend_custom_content .panel-success .panel-title a {
	color: #3c763d;
}

.panel-secondary {
	border-color: #6a6a6a;
}

.panel-secondary > .panel-heading {
	color: #ffffff;
	background-color: #4a4a4a;
	border-color: #6a6a6a;
}

.panel-secondary > .panel-heading + .panel-collapse > .panel-body {
	border-top-color: #6a6a6a;
}

.panel-secondary > .panel-heading .badge {
	color: #4a4a4a;
	background-color: #333;
}

.panel-secondary > .panel-footer + .panel-collapse > .panel-body {
	border-bottom-color: #6a6a6a;
}
/* */

/*
 * Added by Iwan, 3 April 2024 (CODE: 240305)
 */
/* Define custom spinner animation */
@keyframes custom-spinner {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Style the button */
.custom-spinner-btn {
	position: relative;
	padding-left: 30px; /* Adjust as needed */
	overflow: hidden;
	/*background-color: #007bff;*/ /* Button background color */
	/*color: white;&/ /* Button text color */
	/*border: none;*/
	/*cursor: pointer;*/
}

/* Style the spinner icon */
.custom-spinner-btn::before {
	content: '';
	position: absolute;
	top: 18%;
	left: 5px; /* Adjust as needed */
	transform: translateY(-50%);
	width: 17px; /* Adjust as needed */
	height: 17px; /* Adjust as needed */
	border: 2px solid transparent;
	border-top-color: white;
	border-radius: 50%;
	animation: custom-spinner 1s linear infinite;
}
/* */


/*
 * Added by Iwan, 6 September 2024 (CODE: 240801)
 */
/* Define custom radio button selected color */
.custom-radio {
	position: relative;
	padding-left: 20px;
	cursor: pointer;
	font-size: 12px;
	display: inline-block;
  }

  /* Hide the default radio button */
  .custom-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }

  /* Create custom radio button appearance */
  .custom-radio input[type="radio"] + span {
	position: absolute;
	top: 10px;
	left: 0;
	height: 11px;
	width: 11px;
	background-color: #ffffff;
	border-radius: 50%;
  }

  /* Option 1 (Green) */
  .custom-radio input[type="radio"]:checked + span.optgreen:before {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 7px;
	height: 8px;
	background-color: green; /* Option 1 dot color */
	border-radius: 50%;
  }

  /* Option 2 (Red) */
  .custom-radio input[type="radio"]:checked + span.optred:before {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 7px;
	height: 8px;
	background-color: red; /* Option 2 dot color */
	border-radius: 50%;
  }

  /* Radio button hover effect */
  .custom-radio:hover input[type="radio"] + span {
	background-color: #eeeeee;
  }
/* */

.code-view {
	font-family: monospace;
	white-space: pre-wrap;
}

.map_form {
	width: 100%;
	height: 400px;
	margin-top: 10px;
	display: none; /* Initially hidden */
}

.map_form_error_msg {
	color: yellow;
	font-size: 12px;
	display: none;
}

mapbox-search-box input[class*="--Input"] {
	background-color: #3f3f3f !important;
	border: 1px solid #565656 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	padding: 5px 30px 5px 10px !important;
	height: 30px !important;
}

mapbox-search-box button[class*="--ClearBtn"] {
	color: #c0c0c0 !important;
}