.btn-add-views {
    margin-top: 22px;
    margin-bottom: 11px;
    margin-right: 6px;
    background-color: #0547b2 !important;
    color: #fafafa !important;
    width: 38px;
    height: 38px;
}
.btn-del-views {
    margin-top: 22px;
    margin-bottom: 11px;
    margin-right: 6px;
    background-color: #D32F2F !important;
    color: #fafafa !important;
    width: 38px;
    height: 38px;
}
.btn-status-views {
    margin-top: 22px;
    margin-bottom: 11px;
    margin-right: 6px;
    background-color: #212121 !important;
    color: #fafafa !important;
    width: 38px;
    height: 38px;
}
.btn-close-views {
    margin-top: 22px;
    margin-bottom: 11px;
	margin-right: 6px;
    background-color: #F4F4F4 !important;
    color: #484448 !important;
    width: 38px;
    height: 38px;
}

.btn-export-views {
    margin-top: 22px;
    margin-bottom: 11px;
	margin-right: 6px;
    background-color: #217346 !important;
    color: #fafafa !important;
    width: 38px;
    height: 38px;
}

.btn-export-views:hover {
    background-color: #34a567 !important;
}
.btn-close-views:hover {
    background-color: #E6E6E6 !important;
}

.btn-add-views:hover {
    background-color: #0267d1 !important;
}
.btn-del-views:hover {
    background-color: #ef5350 !important;
}
.btn-status-views:hover {
    background-color: #616161 !important;
}
/*shadow*/
.custom-box-shadow {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.custom-box-shadow:hover {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.gmd-3 {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

/*end shadow*/
/*custom checkbox*/
/* Customize the label (the container) */

.container-label {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 1px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: auto;
}

/* Hide the browser's default checkbox */

input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer;
    height: 0 !important;
    width: 0 !important;
}

/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    /*bottom: 0;*/
    height: 20px;
    width: 20px;
    background-color: #dfe0e4;
}

/* On mouse-over, add a grey background color */

input:hover ~ .checkmark {
    background-color: #9d9ea2;
}

/* When the checkbox is checked, add a blue background */

input:checked ~ .checkmark {
    background-color: #0078e3;
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */

input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.checkmark:after {
    left: 8px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* end custom checkbox*/




/*custom radio buttom*/

/* The container */
.container-radio {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 1px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark-radio {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #ddd;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark-radio {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-radio input:checked ~ .checkmark-radio {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-radio:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark-radio:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container-radio .checkmark-radio:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/*end custom radio buttom*/
.login-margin {
    margin-top: 5%;
}

.login-heading-style {
    height: 96px;
    color: #faf8fc !important;
    background: #202124 !important;
    border-bottom: transparent;
}

.btn-send-style,
.btn-send-style:focus,
.btn-send-style:focus {
    color: #faf8fc !important;
    background: #0267d1;
    width: 110px;
}

.btn-send-style:hover {
    background: #0547b2 !important;
}

.btn-cancel-style {
    color: #0267d1 !important;
    background-color: #fafafa !important;
    width: 110px;
}

.btn-cancel-style:hover {
    background-color: #f5f5f5 !important;
}

body {

}

@media (min-width: 1200px) {
    #userInfoSmall{display: none;}
}

@media (min-width: 768px) and (max-width: 1199px) {
    #userInfoSmall{display: none;}
}

@media (max-width: 767px) {
    #userInfo{display: none;}
}

@media (max-width: 480px) {
    #userInfo{display: none;}
}
			
.nav-button {
    background-color: #212121 !important;
    border-bottom: 5px solid transparent !important;
    color: #b6b5b8 !important;
}

.nav-button:hover,
.nav-button:focus,
.nav-button:active {
    color: #faf8fc !important;
    border-bottom: 3px solid #2184C8 !important;
}

.nav-button-user {
    font-size: small;
}

/*ul[class="dropdown-menu"] {*/
    /*background-color: #202124 !important;*/
/*}*/

/*ul[class="dropdown-menu"] a {*/
    /*color: #b6b5b8;*/
    /*background: #202324 !important;*/
/*}*/

/*ul[class="dropdown-menu"] a:hover {*/
    /*!*	 color: #0267d1 !important ;*!*/
    /*color: white;*/
/*}*/

.cool-link {
    display: inline-block;
    color: #2184C8;
    text-decoration: none;
}

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #2184C8;
    transition: width .3s;
}

.cool-link:hover::after {
    width: 100%;
}

.navbar-color {
    background-color: #212121;
    border-color: #212121 !important;
}