html {
   scroll-behavior: smooth;
}

body {
   margin-top: 100px;
   background-color: #212121;
   color: #fff;
}

.default-color-dark {
	background-color: #2176d8 !important;
	color: #fff !important;
}

.btn-input-group {
    background-color: #2176d8 !important;
    color: #fff !important;
}

.btn-input-group,
.btn-form-group {
   background-color: #2176d8;
   color: #fff;
}

.btn-input-group:hover,
.btn-form-group:hover {
   color: #fff;
}


textarea {
   resize: none;
}

.captcha-code {
   text-align: center;
   width: 70px;
}

.navi-wrapper {
   width: 100%;
}

.navi-scroll-wrapper {
   overflow: hidden;
   width: 100%;
   position: relative;
}

.navi-scroll-wrapper .nav-button {
   position: absolute;
   top: 0;
   bottom: 0;
   z-index: 5;
   border: none;
   padding: 0 32px;
   background-color: transparent;
   opacity: 0;
   cursor: pointer;
   transition: all 150ms ease-in-out;
}

.navi-scroll-wrapper .nav-button i {
   color: rgb(43, 187, 173);
   transition: 250ms ease-in all;
}

.navi-scroll-wrapper .nav-button i:hover {
   color: #fff;
}

.navi-scroll-wrapper .nav-button.next {
   right: 0;
   background-image: linear-gradient(90deg, rgba(13, 13, 13, 0) 0%, #212121 40%);
   transform: translate(100%, 0);
}

.navi-scroll-wrapper .nav-button.prev {
   left: 0;
   background-image: linear-gradient(90deg, #212121 40%, rgba(13, 13, 13, 0) 100%);
   transform: translate(-100%, 0);
}

.navi-scroll-wrapper .nav-button.show {
   opacity: 1;
   transform: translate(0, 0);
   outline: 0;
}

.navi-scroll-wrapper .scroll-box {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   overflow: hidden;
   gap: 10px;
   width: 100%;
   padding: 0 10px;
   background-color: #212121;
   -webkit-overflow-scrolling: touch;
}

.navi-scroll-wrapper .scroll-box::-webkit-scrollbar {
   display: none;
}

.navi-scroll-wrapper .scroll-box button,
.navi-scroll-wrapper .scroll-box .button_kreis {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 6px 12px;
   background-color: #212121;
   color: rgb(43, 187, 173);
   border-radius: 4px;
   white-space: nowrap;
   font-size: 16px;
   line-height: 1.5;
   cursor: pointer;
   border: 2px solid rgb(43, 187, 173);
   transition: 250ms ease-in all;
}

.navi-scroll-wrapper .scroll-box .button_kreis {
   width: 40px;
   height: 40px;
   border-radius: 50%;
}

.navi-scroll-wrapper .scroll-box .button_inbox {
   width: 40px;
   height: 40px;
   padding: 0 35px;
}

.navi-scroll-wrapper .scroll-box button:hover,
.navi-scroll-wrapper .scroll-box button:focus,
.navi-scroll-wrapper .scroll-box .button_kreis:hover,
.navi-scroll-wrapper .scroll-box .button_kreis:focus {
   background-color: rgba(43, 187, 173, 0.3);
   color: #fff;
   outline: 0;
}

.white-textarea textarea.md-textarea:focus:not([readonly]),
.active-white-2 input.form-control[type=url]:focus:not([readonly]),
.active-white-2 input.form-control[type=password]:focus:not([readonly]),
.active-white-2 input.form-control[type=search]:focus:not([readonly]),
.active-white-2 input.form-control[type=email]:focus:not([readonly]),
.active-white-2 input.form-control[type=tel]:focus:not([readonly]),
.active-white-2 input.form-control[type=text]:focus:not([readonly]) {
   border-bottom: 2px solid #fff;
   box-shadow: 0 1px 0 0 #fff;
   color: #fff;
}

.active-white-textarea-2 textarea.md-textarea,
.active-white input.form-control[type=url],
.active-white input.form-control[type=password],
.active-white input.form-control[type=search],
.active-white input.form-control[type=email],
.active-white input.form-control[type=tel],
.active-white input.form-control[type=text] {
   border-bottom: 1px solid #fff;
   color: #fff;
}

.radio input[type="radio"],
.radio-elegant-color input[type="radio"] {
   position: absolute;
   left: -9999px;
}

.radio input[type="radio"]+label,
.radio-elegant-color input[type="radio"]+label {
   position: relative;
   padding: 1px 0 0 35px;
   cursor: pointer;
}

.radio input[type="radio"]+label:before,
.radio-elegant-color input[type="radio"]+label:before {
   content: '';
   background: rgba(255, 255, 255, 0);
   border: 2px solid #fff;
   height: 22px;
   width: 22px;
   border-radius: 50%;
   position: absolute;
   top: 2px;
   left: 2px;
}

.radio-elegant-color input[type="radio"]+label:before {
   background: #2E2E2E;
}

.radio input[type="radio"]+label:after,
.radio-elegant-color input[type="radio"]+label:after {
   content: '';
   background: #fff;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   position: absolute;
   top: 7px;
   left: 7px;
   opacity: 0;
   transform: scale(2);
   transition: transform 0.3s linear, opacity 0.3s linear;
}

.radio input[type="radio"]:checked+label:after,
.radio-elegant-color input[type="radio"]:checked+label:after {
   opacity: 1;
   transform: scale(1);
}

.checkbox input[type="checkbox"] {
   position: absolute;
   left: -9999px;
}

.checkbox input[type="checkbox"]+label {
   position: relative;
   padding: 1px 0 0 35px;
   cursor: pointer;
}

.checkbox input[type="checkbox"]+label:before {
   content: '';
   background: rgba(255, 255, 255, 0);
   border: 2px solid #fff;
   border-radius: 3px;
   height: 22px;
   width: 22px;
   position: absolute;
   top: 2px;
   left: 2px;
}

.checkbox input[type="checkbox"]+label:after {
   content: '';
   border-style: solid;
   border-width: 0 0 2px 2px;
   border-color: transparent transparent #fff #fff;
   width: 15px;
   height: 9px;
   position: absolute;
   top: 6px;
   left: 6px;
   opacity: 0;
   transform: scale(2) rotate(-45deg);
   transition: transform 0.3s linear, opacity 0.3s linear;
}

.checkbox input[type="checkbox"]:checked+label:after {
   opacity: 1;
   transform: scale(1) rotate(-45deg);
}

[data-notify="progressbar"] {
   margin-bottom: 0;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 5px;
}

.tooltip.show {
	opacity: 1;
}

.tooltip-inner {
   background-color: #212121;
   border: 1px solid #2E2E2E;
   white-space: normal;
   max-width: 310px;
   overflow: hidden;
   word-wrap: break-word;
}

.tooltip .arrow,
.popover .arrow {
   display: none;
}

.popover {
   border: 1px solid #2E2E2E;
   border-radius: 4px;
   font-size: 16px;
}

.popover-body {
   background-color: #212121;
   color: #fff;
}

#checkIcon {
   transition: transform 0.3s ease;
}

.btn.clicked #checkIcon {
   animation: rotate 1s infinite linear;
}

@keyframes rotate {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

.logout-right {
   margin-top: 12px;
}

.fa-hover-restartSession,
.fa-hover-fm-logout {
   transition: color 0.4s ease;
}
.fa-hover-restartSession:hover {
   color: #2BBBAD;
}
.fa-hover-fm-logout:hover {
   color: rgb(204, 0, 0);
}

.badge-large {
   font-size: 16px;
   padding: 5px 10px;
}

.inbox {
   position: relative;
}

.delete-link,
.download-link,
.reply-link {
   position: absolute;
   top: 17px;
   right: 15px;
}

.download-link {
   right: 45px;
}

.reply-link {
   right: 78px;
}

.delete-link:hover,
.download-link:hover,
.reply-link:hover {
   transition: transform 0.3s linear;
   transform: scale(1.2);
}

.inbox_modal {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}