.bg-login-image {
    background: url('../img/iris.png');
    background-position: center;
    /* background-size: cover; */
}
.hidden{
	display:none;
}
.pull-right{
	float:right;
}
.text-bold{
	font-weight:bold;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
/*MENU*/
.bg-gradient-primary {
    background-color: #130037;
    background-image: none;
    background-size: cover;
}

/*TABLE*/
.dataTable td{padding:10px;}
table.dataTable tbody tr:hover {background-color:#dfe7f9 !important;}
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    top: 12px;
    left: 4px;
    height: 14px;
    width: 14px;
    display: inline-block;
	margin-right:5px;
    color: white;
    border: 2px solid white;
    border-radius: 14px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    line-height: 14px;
    content: '+';
    background-color: #0275d8;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
    top: 12px;
    left: 4px;
    height: 14px;
    width: 14px;
    display: inline-block;
    color: white;
    border: 2px solid white;
    border-radius: 14px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    line-height: 14px;
	content: '-';
    background-color: #d33333;
}


table thead tr{
	font-size:14px;
}
table tbody tr td{
	font-size:11px;
}

/*TRANSACTIONS PAGE*/
.nav-tabs .nav-item a.nav-link{
	color: #130037;
	border: solid 1px #130037;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: white !important;
    background-color: #130037;
}

.nb-form {
    position: fixed;
    z-index: 9999;
    width: 300px;
    background: #FFF;
    right: 20px;
    bottom: -197px;
    transition: all .5s cubic-bezier(.22, .67, .43, 1.22) .2s;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}

.change_stat{
	/*padding:10px;
	height:30px;*/
	width:100px;
	font-size:12px;
}
/*
.nb-form:hover {
    bottom: 0px;
}
*/

/*-- User Icon --*/

.nb-form .user-icon {
    position: absolute;
    top: -99px;
    right: 12px;
    display: block;
    width: 58px;
    margin: 20px auto 15px;
    border-radius: 100%;
	cursor:pointer;
}

/*-- Title --*/

.nb-form .title {
    background: #03a9f4;
    font-size: 16px !important;
    padding: 20px 18px !important;
    color: #fff !important;
    border-radius: 10px 10px 0 0;
}

/*-- Text --*/

.nb-form p {
    font-size: 13px;
    margin: 0;
    padding: 15px;
    color: #666;
}

.nb-form p.message {
    margin-left: 7px;
	margin-top:-10px;
}

/*-- Concern Button --*/
.nb-form form {
    padding: 0 15px 15px 15px;
}

.nb-form input,
.nb-form select,
.nb-form textarea {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    width: 254px;
    max-width: 254px;
    margin-bottom: 10px;
    margin-left: 7px;
    padding: 6px;
    border: none;
    border-radius: 4px;
    color: #999;
    border-bottom: 1px solid #f0f0f0;
}

.nb-form input:focus,
.nb-form select:focus,
.nb-form textarea:focus {
    outline: none;
    box-shadow: none;
}

.nb-form input[type='submit'] {
    display: block;
    width: 120px;
    margin: 0 auto;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .4s ease;
    color: #fff !important;
    border: none;
}

.nb-form input[type='submit']:hover {
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.07),0 1px 7px 0 rgba(0,0,0,0.02),0 3px 1px -1px rgba(0,0,0,0.1);
}

.nb-form textarea {
    min-height: 110px;
}


.nb-form ::-webkit-input-placeholder {
    color: #ccb0b0;
}

.nb-form ::-moz-placeholder{
    color: #ccb0b0;
}

.nb-form :-ms-input-placeholder {
    color: #ccb0b0;
}

.nb-form :-moz-placeholder {
    color: #ccb0b0;
}

.nb-form input[type='submit'] {
    background: #03a9f4;
}

@media screen and (max-width: px) {
    .user-icon{
		top: -89px;
    }

    .nb-form .message {
        display: none;
    }

    .nb-form form {
        padding-top: 15px;
    }
    .nb-form{
        right: 40%;
        bottom: -147px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/*PLAY BUTTON*/
#MyImage {
    position: relative;
    margin: 20px auto;
    width: 100%;
    max-width: 1024px;
}
#theImage {
    display: block;
    position: relative;
    width: 100%;
}
#myButton {
    /*position: absolute;
    left: 35%;
    top: 45%;*/
	width:100%;
	height:10vh;
	font-size:30px;
	border-radius:100px;
	opacity: 0.7;
	
	transition: all .4s ease-in-out;
}

#myButton:hover {
	opacity: 1;
	transform: scale(1.1);
}

.scroll-to-top{
	display:none !important;
}

/* ============== Email ===================*/
#mobile-inbox-date{display:none;}
 .email-leftbar {
	 width: 230px;
	 float: left;
	 background-color: white;
	 padding: 20px;
	 border-radius: 5px;
}
 .email-rightbar {
	 margin-left: 260px;
}
 .dot-online {
	 position: absolute;
	 left: 28px;
	 font-size: 12px;
}
 .chat-user-box p.user-title {
	 font-size: 11px;
	 color: black;
	 font-weight: 500;
}
 .chat-user-box p {
	 font-size: 12px;
}
 @media (max-width: 767px) {
	 .email-leftbar {
		 float: none;
		 width: 100%;
	}
	 .email-rightbar {
		 margin: 0;
	}
}
 .mail-list a {
	 display: block;
	 color: #0d0d0d;
	 font-size: 13px;
	 line-height: 24px;
	 padding: 5px;
}
 .mail-list a.active {
	 color: red;
	 font-weight: 500;
}
 .message-list {
	 display: block;
	 padding-left: 0;
}
 .message-list li {
	 position: relative;
	 display: block;
	 height: 75px;
	 line-height: 75px;
	 cursor: default;
	 transition-duration: 0.3s;
}
 .message-list li a {
	 color: black;
}
 .message-list li:hover {
	 background: rgba(0, 0, 0, 0.08);
	 transition-duration: 0.05s;
}
 .message-list li .col-mail {
	 float: left;
	 position: relative;
}
 .message-list li .col-mail-1 {
	 width: 320px;
}
 .message-list li .col-mail-1 .star-toggle, .message-list li .col-mail-1 .checkbox-wrapper-mail, .message-list li .col-mail-1 .dot {
	 display: block;
	 float: left;
}
 .message-list li .col-mail-1 .dot {
	 border: 4px solid transparent;
	 border-radius: 100px;
	 margin: 22px 26px 0;
	 height: 0;
	 width: 0;
	 line-height: 0;
	 font-size: 0;
}
 .message-list li .col-mail-1 .checkbox-wrapper-mail {
	 margin: 28px 10px 0 20px;
}
 .message-list li .col-mail-1 .star-toggle {
	 margin-top: 31px;
	 font-size: 11px;
	 margin-left: 5px;
}
 .message-list li .col-mail-1 .title {
	 position: absolute;
	 left: 110px;
	 right: 0;
	 top: 8px;
	 text-overflow: ellipsis;
	 overflow: hidden;
	 white-space: nowrap;
	 margin-bottom: 0;
}
 .message-list li .col-mail-2 {
	 position: absolute;
	 top: 0;
	 left: 0px;
	 right: 0;
	 bottom: 0;
}
 .message-list li .col-mail-2 .subject, .message-list li .col-mail-2 .date {
	 position: absolute;
	 top: 0;
}
 .message-list li .col-mail-2 .subject {
	 left: 0;
	 right: 200px;
	 text-overflow: ellipsis;
	 overflow: hidden;
	 white-space: nowrap;
	 top: 8px;
}
 .message-list li .col-mail-2 .date {
	 right: 0;
	 width: 312px;
	 padding-left: 70px;
}
 .message-list li.active, .message-list li.active:hover {
	 box-shadow: inset 3px 0 0 blue;
}
 .message-list li.unread {
	 background-color: #f7f7f7;
	 font-weight: 500;
	 color: #000;
}
 .message-list li.unread a {
	 color: #000;
	 font-weight: 500;
}
 .message-list .checkbox-wrapper-mail {
	 cursor: pointer;
	 height: 20px;
	 width: 20px;
	 position: relative;
	 display: inline-block;
	 box-shadow: inset 0 0 0 1px gray-300;
	 border-radius: 1px;
}
 .message-list .checkbox-wrapper-mail input {
	 opacity: 0;
	 cursor: pointer;
}
 .message-list .checkbox-wrapper-mail input:checked ~ label {
	 opacity: 1;
}
 .message-list .checkbox-wrapper-mail label {
	 position: absolute;
	 height: 20px;
	 width: 20px;
	 left: 0;
	 cursor: pointer;
	 opacity: 0;
	 margin-bottom: 0;
	 transition-duration: 0.05s;
	 top: 0;
}
 .message-list .checkbox-wrapper-mail label:before {
	 content: "\F12C";
	 font-family: "Material Design Icons";
	 top: 0;
	 height: 20px;
	 color: #000;
	 width: 20px;
	 position: absolute;
	 margin-top: -27px;
	 left: 4px;
	 font-size: 13px;
}
 .email-inbox {
	 position: relative;
}
 .email-inbox .form-control, .email-inbox .form-control:focus {
	 border: 1px solid white;
	 font-size: 13px;
	 height: 40px;
	 padding-left: 34px;
	 padding-right: 12px;
	 margin-right: 16px;
	 background: #f6f6f6;
	 box-shadow: none;
	 border: none;
}
 .email-inbox button {
	 position: absolute;
	 top: 12px;
	 left: 6px;
	 display: block;
	 color: gray;
	 font-size: 11px;
	 border: none;
	 background-color: transparent;
}
 @media (max-width: 425px) {
	 .title img {
		 display: none;
	}
}
 .email-img-overlay .email-overlay i {
	 background: blue;
	 color: white;
	 font-size: 20px;
	 border-radius: 50%;
	 height: 40px;
	 width: 40px;
	 line-height: 40px;
	 transition: all 0.5s;
	 position: absolute;
	 top: 50%;
	 transform: translateY(-50%);
	 text-align: center;
	 left: 0;
	 right: 0px;
	 margin: 0 auto;
	 opacity: 0;
}
 .email-img-overlay:hover img {
	 opacity: 0.2;
}
 .email-img-overlay:hover .email-overlay i {
	 opacity: 1;
}
 @media (max-width: 375px) {
	 .date {
		 display: none;
	}
}
 @media (max-width: 768px) {
	 .mo-mb-2 {
		 margin-bottom: 10px;
	}
	 .mo-mt-2 {
		 margin-top: 10px !important;
	}
	 .ex-pages {
		 padding: 24px 0px;
	}
	 .btn-toolbar {
		 margin-top: 15px;
	}
}

/*RESPONSIVE*/
@media only screen and (max-width: 767px) 
{
	.vera-wallet-logo,#wallet-refresh{
		display:none;
	}
    #add_account{
		width:100%;
		margin-bottom:10px;
	}
	#accounts{
		margin-bottom:10px;
	}
	#confirm_box{
		margin-top:5px;
	}
	.nav-tabs .nav-item{
		width: 50px;
		height:50px;
		font-size:7px;
		color:white !important;
	}
	.no-arrow{
		display:block;
	}
	#myButton {
		/*top: 35%;
		left:15%;*/
		width:100%;
		height:5vh;
		border-radius:20px;
		font-size:18px;
	}
	
	table thead tr{
		font-size:14px;
	}
	table tbody tr td{
		font-size:11px;
	}
	.change_stat{
		/*padding:10px;
		height:30px;*/
		width:100px;
		font-size:12px;
	}
	
	#report_form #start, #report_form #end{
		width:50% !important;
	}
	#report_form #get-range{
		width:100% !important;
	}
}