/* ===============================================
IMPORT CSS FILE /////////////////////////////////////////////////////////// */

@import url('reset.css');
@import url('fonts.css');
@import url('default.css');
@import url('quickstyle.css');

/* ========================================
Heading - Title Style /////////////////////////////////////////////////////////// */
.ft-primary {
}

.ft-secondary {
    font-family: HelveticaNeueLight !important;
}

.ft-secondary-bold {
    font-family: HelveticaNeue !important;
}

.ft-symbol {
    font-family: 'Times New Roman' !important;
}

.heading3 {
    position: relative;
    font-size: 20px;
    color: #0f5b97;
    border-bottom: 1px solid rgba(36, 142, 172, 0.35);
    box-shadow: 0 1px 0px 0px rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

.heading3 > span:first-letter {
    font-size: 24px;
    color: #00457c;
}

.text-name-header-1 {
    font-family: HelveticaNeueBold;
    font-size: 12px;
    color: #3C85BE;
}

.text-title-header-1 {
    font-family: HelveticaNeueBold;
    font-size: 16px;
    color: #000;
    text-transform: uppercase;
}

.text-name-1 {
    font-size: 14px;
    color: #FFF;
    text-transform: uppercase;
}

.text-title-1 {
    font-size: 12px;
    color: #c1e0f8;
}

.text-name-2 {
    font-family: HelveticaNeueMedium;
    font-size: 10px;
    color: #7b9bb1;
    text-transform: uppercase;
}

.text-name-2.normal {
    font-size: 12px;
    text-transform: none;
}

.text-title-2 {
    font-size: 10px;
    color: #688598;
}

.text-name-3 {
    font-family: HelveticaNeueMedium;
    font-size: 12px;
    color: #134784;
}

.text-title-3 {
    font-size: 13px;
    line-height: 1.4;
    color: #000;
}

.text-title-4 {
    font-family: HelveticaNeueMedium;
    font-size: 12px;
    line-height: 1;
    color: #000;
}

.text-title-5 {
    font-family: HelveticaNeueBold;
    font-size: 12px;
    color: #065c6f;
    text-transform: uppercase;
}

.text-content {
    font-family: HelveticaNeue;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

.text-link-1 {
    font-family: HelveticaNeueMedium;
    font-size: 12px;
    color: #1075BB;
}

.text-link-2 {
    font-family: HelveticaNeue;
    font-size: 12px;
    color: #FFF;
}

.text-link-3 {
    font-family: HelveticaNeueMedium;
    font-size: 12px;
    color: #1075BB;
    text-decoration: underline;
}

.text-link-3.active,
.text-link-3.unlink {
    font-family: HelveticaNeueBold;
    color: #000;
    text-decoration: none;
}

.text-display-1 {
    font-family: HelveticaNeueBold;
    font-size: 13px;
    color: #FFF;
}

.text-warning-1 {
    font-family: HelveticaNeue;
    font-size: 12px;
    font-weight: bold;
    color: #ebafaf;
}

.text-date-1 {
    font-family: HelveticaNeueMedium;
    font-size: 10px;
    line-height: 1;
    color: #298996;
}

.text-date-2 {
    font-size: 22px;
    color: #1d97bc;
}

.text-date-2.red {
    color: #d31603;
}

.text-date-2.green {
    color: #0D810C;
}

.text-input-1 {
    font-family: HelveticaNeueLight;
    font-size: 14px;
    color: #000;
}

.text-line-through {
    text-decoration: line-through !important;
}

.text-link {
    text-decoration: underline !important;
    color: #1075BB !important;
}

/* ========================================
List Style /////////////////////////////////////////////////////////// */
.stt-1 {
    padding: 0 5px 3px;
    border-bottom: 1px solid;
    font-family: HelveticaNeue;
    font-size: 10px;
    font-weight: bold;
    color: #666;
    text-align: center;
    transform: translateX(-10px);
}

.breadcrumb-1 {
}

.breadcrumb-1 > li {
    float: left;
}

.breadcrumb-1 > li > div {
    height: 30px;
}

.breadcrumb-1 > li a {
    display: block;
    font-family: HelveticaNeue;
    font-size: 10px;
    font-weight: bold;
    color: #1075BB;
}


.stripe-1 > *:nth-child(2n+1) {
    border-bottom: 1px solid rgba(129, 180, 222, 0.4);
}

.stripe-1 > *:nth-child(2n+2) {
    background: rgba(235, 245, 253, 0.65);
    border-bottom: 1px solid rgba(129, 180, 222, 0.25);
}

.stripe-2 {
    background: #ebf5fd;
    padding: 10px;
}

.stripe-2 > * {
    border-radius: 8px;
    box-shadow: 0 0 0 1px #cce1f2;
    overflow: hidden;
    margin-bottom: 10px;
}


/* ========================================
List Nav /////////////////////////////////////////////////////////// */
.tab-link-2 {
}

.tab-link-2 > ul {
    background: #F5FBFF;
}

.tab-link-2 > ul > li {
    position: relative;
    padding-top: 2px;
    opacity: .5;
}

.tab-link-2 > ul > li.active {
    background: #CCE1F2;
    transform: scale(1.1) translateY(4px);
    transition: transform linear .1s;
    z-index: 2;
    opacity: 1;
}

.tab-link-2 > ul > li.active:first-child {
    border-radius: 0 0 60px 0;
}

.tab-link-2 > ul > li.active:last-child {
    border-radius: 0 0 0 60px;
}

.tab-link-2 > ul > li::before {
    background: inherit;
    position: absolute;
    content: "";
    width: 30px;
    height: 100%;
    top: 0;
}

.tab-link-2 > ul > li:first-child::before {
    right: -30px;
}

.tab-link-2 > ul > li:last-child::before {
    left: -30px;
}

.tab-link-2 > ul > li.active:first-child::before {
    right: 4px;
    border-right: 2px solid #a2c9e6;
    border-radius: 0 0 15px;
    transform: skew(-20deg);
}

.tab-link-2 > ul > li.active:last-child::before {
    left: 4px;
    border-left: 2px solid #a2c9e6;
    border-radius: 0 0 0 15px;
    transform: skew(20deg);
}

.tab-link-2 > ul > li .text {
    font-family: HelveticaNeueMedium;
    font-size: 10px;
    line-height: 1;
    color: #1075BB;
    text-transform: uppercase;
}

.tab-link-2 > ul > li .number {
    font-family: HelveticaNeue;
    font-size: 10px;
    line-height: 1;
    color: #000;
    margin-top: 5px;
}

.tab-link-2 > ul > li .number.notification {
    color: #ef6806;
}

.tab-link-2 > ul > li .icon svg * {
    fill: #3C85BE !important;
}


.tab-link-3 {
    background: #F5FBFF;
}

.tab-link-3 > ul {
    background: #F5FBFF;
    height: 46px;
}

.tab-link-3 > ul > li {
    padding: 0px 20px;
    border-right: 1px solid rgba(162, 201, 230, 0.5);
    opacity: .5;
    transition: all linear .1s;
}

.tab-link-3 > ul > li:last-child {
    border-right: none;
}

.tab-link-3 > ul > li.active {
    background: #CCE1F2;
    border-right-color: #FFF;
    opacity: 1;
}

.tab-link-3 > ul > li .text {
    font-family: HelveticaNeueMedium;
    font-size: 10px;
    line-height: 1;
    color: #1075BB;
    text-transform: uppercase;
}

.tab-link-3 > ul > li .number {
    font-family: HelveticaNeue;
    font-size: 10px;
    line-height: 1;
    color: #000;
    margin-top: 5px;
}

.tab-link-3 > ul > li .icon svg * {
    fill: #3C85BE !important;
}


.tab-link-5 {
    position: relative;
}

.tab-link-5 .itm {
}

.tab-link-5 .itm .icon {
    display: block;
    background: #f5fbff;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    opacity: .85;
}

.tab-link-5 .itm .icon svg * {
    fill: #3c85be !important;
}

.tab-link-5 .itm .text {
    position: absolute;
    left: 50%;
    bottom: 0px;
    font-family: HelveticaNeue;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    transform: translateX(-50%);
    opacity: 0;
}

.tab-link-5 .itm.active .icon {
    background: #CDE2F2;
    opacity: 1;
}

.tab-link-5 .itm.active .icon:after {
    display: none;
    position: absolute;
    content: "";
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 6px solid #327EBB;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
}


.tab-link-6 {
}

.tab-link-6 > ul {
}

.tab-link-6 > ul > li {
    padding-right: 10px;
}

.tab-link-6 > ul > li:last-child {
    padding-right: 0;
}

.tab-link-6 > ul > li > div {
    background: #327EBB;
    width: 150px;
    height: 115px;
    border-radius: 10px;
    overflow: hidden;
}

.tab-link-6 > ul > li > div .icon {
    height: 45px;
    justify-content: flex-end;
}

.tab-link-6 > ul > li > div .text {
    flex: 1;
    padding: 0 5px;
    font-family: HelveticaNeueMedium;
    font-size: 11px;
    color: #CCE1F2;
}

.tab-link-6 > ul > li > div .number {
    background: rgba(0, 0, 0, 0.80);
    height: 22px;
    padding: 0 5px;
    font-size: 10px;
    color: #81B4DE;
    text-align: center;
}


.tab-link-7 {
    border-bottom: 1px solid #CCE1F2;
}

.tab-link-7 > ul {
    background: #F5FBFF;
    border-radius: 15px 15px 0 0;
}

.tab-link-7 > ul > li {
    position: relative;
    padding: 10px 25px;
    border-radius: inherit;
}

.tab-link-7 > ul > li.active {
    background: #CCE1F2;
    z-index: 2;
    opacity: 1;
}

.tab-link-7 > ul > li .text {
    font-family: HelveticaNeueMedium;
    font-size: 10px;
    line-height: 1;
    color: #1075BB;
    text-transform: uppercase;
}

.tab-link-7 > ul > li .icon svg * {
    fill: #3C85BE !important;
}




.list-item-03 {
    background: #000 none repeat scroll 0 0;
    box-shadow: 0 0 0 1px #111;
}

.list-item-03 > li {
    padding: 10px;
    border-bottom: 3px solid #111;
}

.list-item-03 > li:last-of-type {
    padding: 10px;
    border-bottom: none;
}

.list-item-03 > li.divider {
    background: #222222;
    height: 1px;
    padding: 0 !important;
}

.list-item-03 > li .icon-area {
    width: 30px;
}

.list-item-03 > li .icon-area svg * {
    fill: #FFF !important;
}

.list-item-03 > li .name-area {
    font-family: HelveticaNeueLight;
    text-transform: none;
    white-space: nowrap;
    color: #B8B8B8;
    vertical-align: bottom;
}

.list-item-03 > li.disabled {
    user-select: none;
    -moz-user-select: none;
    pointer-events: none;
    opacity: .3;
}



.list-item-04 {
}

.list-item-04 > li {
    float: left;
    padding-right: 35px;
    padding-bottom: 35px;
}

.list-item-04 > li > div {
    position: relative;
}

.list-item-04 > li > div .thumb {
    height: 55px;
}

.list-item-04 > li > div .title {
    position: absolute;
    top: 100%;
    left: 50%;
    font-family: HelveticaNeueMedium;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    transform: translateX(-50%);
}

.list-item-04 > li > div .number {
    font-size: 9px;
}


.list-item-05 {
}

.list-item-05 > li {
    width: 25%;
    padding: 20px 0;
    float: left;
}

.list-item-05 > li > div {
    background: #CCE1F2;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
}

.list-item-05 > li > div .icon {
    height: 45px;
    justify-content: flex-end;
}

.list-item-05 > li > div .text {
    flex: 1;
    padding: 0 5px;
    font-family: HelveticaNeueMedium;
    font-size: 11px;
    line-height: 15px;
    color: #000;
}

.list-item-05 > li > div .number {
    background: rgba(0, 0, 0, 0.1);
    height: 22px;
    padding: 0 5px;
    font-size: 10px;
    color: #000;
    text-align: center;
}

.list-item-05 > li > div.edited {
    background: #FFBD74;
}


.list-item-06 {
}

.list-item-06 > li {
    padding: 16px;
    border-bottom: 1px solid #ebf5fd;
    font-family: HelveticaNeue;
    font-size: 13px;
    color: #444444;
}

.list-item-06 > li.selected {
    background: #ffecd5;
}


.list-item-07 {
}

.list-item-07 > li {
    border-bottom: 1px solid rgba(4, 52, 91, 0.1);
}

.list-item-07 > li > div {
    display: flex;
}

.list-item-07 > li > div > .thumb {
    display: flex;
    position: relative;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
}

.list-item-07 > li > div > .thumb::before {
    display: none;
    background: #327ebb none repeat scroll 0 0;
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    left: 0;
    top: 50%;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.list-item-07 > li > div > .description {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 5px;
    overflow: auto;
}

.list-item-07 > li > div > .description .name {
    font-family: HelveticaNeueBold;
    font-size: 13px;
    color: #1075BB;
}

.list-item-07 > li > div > .description > .content {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: auto;
    font-size: 13px;
    color: #000;
}

.list-item-07 > li > div > .description > .content .emo {
    width: 20px;
    margin-right: 5px;
}


.list-thumbnail-1 {
}

.list-thumbnail-1 > li {
    width: 50%;
    float: left;
    border-right: 1px solid #ebf5fd;
    border-bottom: 1px solid #ebf5fd;
}

.list-thumbnail-1 > li:nth-of-type(2n+2) {
    border-right: none;
}

.list-thumbnail-1 > li .box {
    border: 4px solid #000;
    border-radius: 10px;
    overflow: hidden;
}


/* ========================================
Table Style /////////////////////////////////////////////////////////// */

.table-1 > .caption {
    background: #81B4DE;
    border-bottom: 2px solid #CCE1F2;
}

.table-1 > .caption > div {
    padding: 12px 5px;
    font-family: HelveticaNeueMedium;
    font-size: 12px;
    color: #FFF;
}

.table-1 > .content > .row-item:nth-child(2n+1) {
    background: #FFF;
}

.table-1 > .content > .row-item:nth-child(2n+2) {
    background: rgba(235, 245, 253, 0.6);
}

.table-1 > .content > .row-item > .display > div {
    padding: 12px 5px;
    font-size: 13px;
    color: #000;
}

.table-1 > .content > .row-item > .detail {
    display: none;
    padding-bottom: 20px;
    border-top: 1px solid #81B4DE;
}

.table-1 > .content > .row-item > .display.active > div {
    font-family: HelveticaNeueMedium;
}

.table-1 > .content > .row-item > .display.active ~ .detail {
    display: block;
}

.table-2 > .caption {
}

.table-2 > .caption > div {
    padding: 5px 5px;
    font-family: HelveticaNeueMedium;
    font-size: 10px;
    color: #000;
}

.table-2 > .content > .row-item > div {
    padding: 5px 5px;
    font-size: 11px;
    color: #333;
}

/* ========================================
Box Style /////////////////////////////////////////////////////////// */

.pseudo-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}

.box-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box-comment-1 {
    /*background: #c9e4f7 url("../resources/images/backgrounds/paper-caro-1-white.png") repeat scroll 0 0;*/
    background: #CCE1F2;
}

.box-comment-1 .input {
    padding: 5px 30px 5px 5px;
}

.box-comment-1 .input textarea {
    background: transparent;
    height: 100%;
    width: 100%;
    padding: 0;
    font-family: HelveticaNeueLight;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
}

.box-comment-1 .input ::-webkit-input-placeholder {
    color: #034274;
    opacity: .8;
}

.box-comment-1 .input :-moz-placeholder {
    color: #034274;
    opacity: .8;
}

.box-comment-1 .input ::-moz-placeholder {
    color: #034274;
    opacity: .8;
}

.box-comment-1 .input :-ms-input-placeholder {
    color: #034274;
    opacity: .8;
}

.box-comment-1 .send {
    background: #a0c6e4 none repeat scroll 0 0;
    border-radius: 10px 0 0;
    box-shadow: 1px 1px 0 0 #fff;
    transform: skewX(20deg) translateY(4px) translateX(-2px);
}

.box-comment-1 .send button {
    transform: skewX(-20deg) translateY(-2px);
}

.box-image-1 {
    display: block;
    background: #fff none repeat scroll 0 0;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px 0 #78b4e5;
    transform: scale(1) translateY(0px);
    transition: all 0.3s linear 0s;
}

.box-image-1 > img {
    display: block;
    width: 100%;
    filter: drop-shadow(1px 1px 0 #1075BB);
    -webkit-filter: drop-shadow(1px 1px 1px #1075BB);
}

.box-image-thumnail-1 {
    padding: 3px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.box-image-thumnail-1 .image-outer,
.box-image-thumnail-1 .image-outer img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.box-image-thumnail-1 .image-outer {
    background: #FFF;
    position: relative;
}

.box-image-thumnail-1 .image-outer img {
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom-color: rgba(255, 255, 255, 0.5);
    border-right-color: rgba(255, 255, 255, 0.5);
}

.box-image-thumnail-1 .image-outer .button-inner {
    position: absolute;
    right: 35px;
    bottom: 35px;
}

.box-image-thumnail-1.blue {
    border: 1px solid rgba(16, 117, 187, 0.0);
}

.box-image-thumnail-1.blue .image-outer:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: inherit;
}

.box-image-thumnail-1.blue .image-outer img {
    border: none;
}

.box-image-thumnail-1.rounded {
    border-radius: 8px;
}

.box-image-thumnail-2 {
    border-radius: 50%;
    border: 1px solid #81B4DE;
}

.box-image-thumnail-2::before {
    display: none;
    background: rgba(222, 239, 251, 0.4) none repeat scroll 0 0;
    position: absolute;
    content: "";
    height: 55px;
    width: 50px;
    left: 5px;
    top: 0;
    border-top: 2px solid #fff;
    box-shadow: 1px 1px 0 0 #DEEFFB;
    border-radius: 0 0 10px 10px;
    transform: skewX(-10deg);
}

.box-image-thumnail-2 .image-outer,
.box-image-thumnail-2 .image-outer img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.box-image-thumnail-2 .image-outer {
    position: relative;
}

.box-image-thumnail-2 .image-outer img {
}

.box-image-thumnail-3 {
    border: 1px dotted #81B4DE;
    border-radius: 50%;
    border: 1px solid #81B4DE;
}

.box-image-thumnail-3 .image-outer,
.box-image-thumnail-3 .image-outer img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.box-image-thumnail-3 .image-outer {
    position: relative;
}

.box-image-thumnail-3 .image-outer img {
}

.box-image-thumnail-3.square {
    border-radius: 0%;
}

.box-image-thumnail-3.rounded {
    border-radius: 5px;
}

.image-thumnail-1 {
    background: #FFF;
    border: 3px solid #FFF;
    box-shadow: 0px 0px 0 1px #FFF;
}

.box-setting-4 {
    background: #FFF;
}

.box-setting-4:last-child {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.box-setting-4 > .title {
    background: #ebf5fd;
    position: relative;
    padding: 30px 8px 5px;
    font-family: HelveticaNeueBold;
    font-size: 12px;
    color: #065C6F;
    text-transform: uppercase;
}

.box-setting-4 > .title .icon-right {
    position: absolute;
    right: 10px;
    bottom: 0px;
}

.box-setting-4 > .content > .itm {
    position: relative;
    padding: 10px 10px;
}

.box-setting-4 > .content > .itm:last-of-type {
    border-bottom: none;
}

.box-setting-4 > .content > .itm.open {
    background: #cce1f2;
    border-bottom: 1px solid #1075BB !important;
}

.box-setting-4 > .content > .itm.open:before {
    position: absolute;
    content: "";
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 8px solid #CCE1F2;
    left: 10px;
    top: 100%;
    pointer-events: none;
}

.box-setting-4 > .content > .itm .icon {
    position: relative;
    width: 35px;
}

.box-setting-4 > .content > .itm .name,
.box-setting-4 > .content > .itm .subname {
    font-family: HelveticaNeueBold;
    font-size: 15px;
    color: #999;
}

.box-setting-4 > .content > .itm .name {
    /*text-transform: uppercase;*/
}

.box-setting-4 > .content > .itm .subname {
    font-size: 13px;
}

.box-setting-4 > .content > .itm .text {
    font-family: HelveticaNeue;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
}

.box-setting-4 > .content > .itm .text b {
    font-family: HelveticaNeue;
    font-weight: normal;
    color: #000;
}

.box-setting-4 > .content > .itm .name ~ .subname,
.box-setting-4 > .content > .itm .name ~ .text-title-4 {
    margin-top: 5px;
}

.box-setting-4 > .content > .itm .name ~ .text-name-2,
.box-setting-4 > .content > .itm .subname ~ .text-name-2 {
    margin-top: 8px;
}

.box-setting-4 > .content > .itm .name ~ .text,
.box-setting-4 > .content > .itm .subname ~ .text,
.box-setting-4 > .content > .itm .text-title-4 ~ .text {
    margin-top: 5px;
}

.box-setting-4 > .content > .itm .name.clr-black ~ .text-title-4 {
    color: #39576f;
}

.box-setting-4 > .content > .itm .name ~ .text-date-1 {
    margin-top: 8px;
}


.box-setting-4 > .content > .more-overlay {
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

.box-setting-4 > .content > .itm-sub {
    display: none;
    position: relative;
    background: #FFF;
    padding: 0 30px 5px;
    border-bottom: 6px solid #f0f7fb;
    z-index: 10;
    margin-top: -6px;
}

.box-setting-4 > .content > .itm-sub.show {
    display: block;
}

.box-setting-4 > .content > .itm-sub > .itm {
    padding: 4px 0;
}

.box-setting-4 > .content > .itm-sub > .itm .link {
    font-family: HelveticaNeueBold;
    font-size: 13px;
    color: #327EBB;
    text-decoration: underline;
}

.box-setting-4 > .content.content-in > .itm:last-child,
.box-setting-4 > .content.content-in > .itm-sub:last-child {
    border-bottom-width: 1px;
}

.box-setting-4.inactive,
.box-setting-4.box-information {
    border-bottom-color: #000;
}

.box-setting-4.inactive {
    background: #fef0e2 !important;
    opacity: 1 !important;
}

.box-setting-4.box-information > .content > .itm {
    background: #000 !important;
    border-bottom: none;
    opacity: 1 !important;
}

.box-setting-4.no-saperator {
    padding-bottom: 0;
}

.box-setting-4 > .content > .itm.no-saperator {
    border-bottom: none;
}

.box-setting-4 > .content > .itm > .layout-fixed {
    height: 25px;
}

.box-setting-4 > .content > .itm.no-saperator > .layout-fixed,
.box-setting-4 > .content > .itm.row-one-content > .layout-fixed {
    height: 15px;
}

.box-setting-4 > .content.content-all-no-saperator > .itm.no-saperator:not(:first-child) {
    border: none;
}

.box-setting-4 > .content > .itm.disabled {
    opacity: .4;
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
}

.box-popup-1 {
    position: absolute;
    height: 0;
}

.box-popup-1 .popup-content {
    position: fixed;
    opacity: 0;
    transition: all linear .1s;
    z-index: 1200;
    pointer-events: none;
    box-shadow: 1px 1px 0 rgba(50, 126, 187, 0.3);
}

.box-popup-1.show .popup-content {
    opacity: 1;
    pointer-events: auto;
}

.box-popup-1 .popup-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 199;
    opacity: 0;
    pointer-events: none;
}

.box-popup-1.show .popup-overlay {
    opacity: 1;
    pointer-events: auto;
}

.box-popup-1.display-bottom-left .popup-content:after {
    position: absolute;
    content: "";
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
    left: 10px;
    bottom: -6px;
}

.box-counter-2 {
    display: block;
    background: #1075BB none repeat scroll 0 0;
    height: 20px;
    width: 20px;
    font-size: 10px;
    color: #FFF;
    border-radius: 50% 50% 50% 0;
}

.box-counter-2.orange {
    background: #f38419 none repeat scroll 0 0;
    box-shadow: 1px 1px 0 0 #000;
}

.box-counter-3 {
    position: absolute;
    height: 18px;
    width: 100%;
    bottom: 0;
    left: 0px;
    font-size: 9px;
    color: #000;
    text-align: center;
}

.img-style-01 {
    border: 1px solid #000;
    border-radius: 8px;
}

.calendar-1 {
    position: relative;
}

.calendar-1 .date-area {
    position: absolute;
    width: 100%;
    height: 75px;
    left: 0;
    bottom: 0;
    font-weight: normal;
}

.calendar-1 .date-area .day {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    padding-right: 5px;
    font-family: HelveticaNeueLight;
    font-size: 40px;
    line-height: 1;
    color: #000;
    text-align: right;
}

.calendar-1 .date-area .month {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding-bottom: 15px;
    padding-left: 5px;
    font-family: HelveticaNeueLight;
    font-size: 16px;
    font-weight: normal;
    color: #327EBB;
    text-align: left;
}

.calendar-1.small .date-area {
    height: 30px;
}

.calendar-1.small .date-area .day {
    padding-top: 2px;
    font-size: 10px;
    color: #FFF;
}

.calendar-1.small .date-area .month {
    font-size: 8px;
    padding-bottom: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.display-bottom-right {
    bottom: 0;
    right: 0;
}

.display-bottom-left {
    bottom: 0;
    left: 0;
}

.display-top-right {
    top: 0;
    right: 0;
}

.box-popup-1.display-bottom-right .popup-content {
    transform: translateX(-100%) translateY(-100%);
}

.box-popup-1.display-bottom-left .popup-content {
    transform: translateX(0) translateY(-100%);
}

.box-popup-1.display-top-right .popup-content {
    transform: translateX(-100%) translateY(0%);
}

.box-file-viewer-1,
.box-file-viewer-1 > .itm {
    background: #111;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.box-file-viewer-1 > .itm {
    display: flex;
    flex-direction: column;
    opacity: 0;
    z-index: -1;
    transition: all linear .2s;
}

.box-file-viewer-1 > .itm.active {
    opacity: 1;
    z-index: 10;
}

.box-file-viewer-1 > .itm > .view-area {
    flex: 1;
    position: relative;
}

.box-file-viewer-1 > .itm img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.box-file-viewer-1 > .itm audio,
.box-file-viewer-1 > .itm video {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.box-file-viewer-1 > .itm iframe {
    width: 100%;
    height: 100%;
}

.box-file-viewer-1 > .itm > .description {
    background: #000;
}

.box-file-viewer-1 > .control {
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    position: absolute;
    top: 75%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 1000000;
    transition: all linear .2s;
    margin-top: 25px;
}

.box-file-viewer-1 > .control svg * {
    fill: #000 !important;
}

.box-file-viewer-1 > .control.btn-prev {
    left: 2px;
}

.box-file-viewer-1 > .control.btn-next {
    right: 2px;
}

.box-file-viewer-1:hover > .control {
    opacity: 1;
}

.box-file-viewer-1 ~ .popup-close-button {
    position: absolute;
    top: 16px;
    right: 12px;
    z-index: 100;
}


.box-file-viewer-2 {
    display: flex;
    flex-direction: column;
    background: #111;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    color: #FFF;
}

.box-file-viewer-2 > .title {
    height: 50px;
    padding: 0 10px;
    font-family: HelveticaNeueMedium;
    font-size: 13px;
    color: #81B4DE;
    text-align: center;
}

    /*.box-file-viewer-2 > .content {
        flex: 1;
        overflow: auto;
        position: relative;
    }

        .box-file-viewer-2 > .content > .content-inner {
            display: flex;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            }*/

            .box-file-viewer-2 > .content {
                display: flex;
                flex: 1;
                overflow: auto;
                position: relative;
                padding: 0 10px;
            }

            .box-file-viewer-2 > .content > .content-inner {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
            }

            .box-file-viewer-2 > .controls {
                height: 50px;
                padding: 0 10px;
            }

/* ========================================
Form Style /////////////////////////////////////////////////////////// */
.form-style-1 {
    background: rgba(255, 255, 255, 0.1);
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 100%);
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 100%);
    border-radius: 20px;
}

.form-style-1 > .title {
    padding: 15px 10px 0px;
    font-family: HelveticaNeueLight;
    font-size: 22px;
    font-weight: normal;
    color: #FFF;
    text-align: center;
    margin-bottom: 10px;
}

.form-style-1 > .content .input-form-field-1 {
    border-radius: 0;
}

.form-style-1 > .content .row:not(:first-child) .input-form-field-1 {
    border-top: none;
    padding-top: 0px;
}

.form-style-1 > .content .row:not(:last-child) .input-form-field-1 {
    border-bottom: none;
    padding-bottom: 1px;
}

.form-style-1 > .buttons {
    padding-top: 15px;
    padding-bottom: 15px;
}

.form-style-2 {
    background: rgba(0, 0, 0, 0.2);
    padding-top: 8px;
    border-radius: 10px;
}

.form-style-2 > .title {
    background: #FFF;
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%);
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%);
    position: relative;
    padding: 8px 40px 10px 10px;
    font-family: HelveticaNeueLight;
    font-size: 20px;
    font-weight: normal;
    color: #034274;
    border-radius: 5px 0px 0px 3px;
    margin-left: -10px;
}

.form-style-2 > .title:before {
    position: absolute;
    content: "";
    height: 0;
    left: 0;
    top: 100%;
    border-bottom: 3px solid transparent;
    border-right: 10px solid #0A245C;
    border-top: 0 solid transparent;
}

.label-field-4 {
    display: inline-block;
    background: #3d90c8;
    padding: 2px 20px 2px 13px;
    border-bottom: 1px solid #034274;
    font-size: 16px;
    color: #ffffff;
    border-radius: 20px 20px 20px 10px;
}

.label-field-4.bluewhite {
    border-bottom: 1px solid #d4e8f8;
}

.label-form-field-1 {
    display: inline-block;
    position: relative;
    background: #FFF;
    padding: 0px 5px 5px 0;
    font-family: HelveticaNeueBold;
    font-size: 10px;
    color: #265a84;
    text-transform: uppercase;
    transform: translateX(8px) translateY(5px);
    margin: 0;
    z-index: 10;
}

.label-form-field-1.normal {
    font-size: 12px;
    text-transform: none;
}

.label-form-field-1.no-gutter {
    margin-left: -8px;
}

.label-form-field-2 {
    font-family: HelveticaNeue;
    font-size: 12px;
    color: #1075bb;
}


.input-form-field-1 {
    position: relative;
    padding: 2px;
    border: 1px solid rgba(129, 180, 222, 0.9);
    border-radius: 8px;
}

.input-form-field-1 input,
.input-form-field-1 textarea {
    background: #FFF;
    width: 100%;
    padding: 0 5px;
    font-family: HelveticaNeue;
    font-size: 14px;
    color: #000;
    border-radius: inherit;
}

.input-form-field-1 input[type=color] {
    padding: 0;
}

.input-form-field-1 input {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.input-form-field-1 textarea {
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.2;
}

.input-form-field-1 .field-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}

.input-form-field-1 select.field-overlay {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    animation: none !important;
}

.input-form-field-1 ::-webkit-input-placeholder {
    color: #81B4DE;
    -webkit-text-fill-color: #81B4DE;
    opacity: 1;
}

.input-form-field-1 :-moz-placeholder {
    color: #81B4DE;
    opacity: 1;
}

.input-form-field-1 ::-moz-placeholder {
    color: #81B4DE;
    opacity: 1;
}

.input-form-field-1 :-ms-input-placeholder {
    color: #81B4DE;
    opacity: 1;
}

.input-form-field-1 .sign-r {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
}

.input-form-field-1 .option-r {
    position: absolute;
    right: 0;
    top: 0;
}

.input-form-field-1 input[disabled],
.input-form-field-1 textarea[disabled] {
    background: #D1D1D1 none repeat scroll 0 0;
    color: #000;
    -webkit-text-fill-color: #000;
    opacity: 1;
}

.input-form-field-1.disabled {
    background: #D1D1D1 none repeat scroll 0 0;
}

.input-form-field-1.rounded {
    border-radius: 30px;
}

.input-form-field-1.square {
    border-radius: 0px;
}



.file-attach-1 {
    position: relative;
}

.file-attach-1 > input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 3;
}

.checkedbox-1 {
    display: inline-block;
    background: #1d97bc;
    position: relative;
    height: 22px;
    width: 22px;
    border-radius: 50%;
}

.checkedbox-1 > input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
}

.checkedbox-1 > i {
    background: url('../resources/images/icons/checkbox-checked-1.svg') no-repeat scroll center center transparent;
    background-size: 14px;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: all linear .1s;
    opacity: 0;
    border-radius: inherit;
}

.checkedbox-1 > input[type=radio] ~ i {
    background-image: url('../resources/images/icons/radio-checked-1.svg');
    background-size: 18px;
}

.checkedbox-1 > input:checked ~ i {
    opacity: 1;
}

.checkedbox-1 > span {
    background: #FFF;
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    border-radius: inherit;
    box-shadow: 0 0 0px 1px #1d97bc;
    transition: all linear .1s;
}

.checkedbox-1 > input:checked ~ span {
    background: transparent;
    box-shadow: none;
}

.checkedbox-1.small {
    height: 14px;
    width: 14px;
}

.checkedbox-1.small > i {
    background-size: 10px auto;
}

.checkedbox-1.big {
    height: 30px;
    width: 30px;
}

.checkedbox-1.big > i {
    background-size: 18px auto;
}

.checkedbox-1.square {
    border-radius: 5px;
}

.checkedbox-1.black > span {
    background: #333;
    box-shadow: 0 0 0px 1px #FFF;
}

.checkedbox-1.black > input:checked ~ span {
    background: #327EBB;
    box-shadow: 0 0 0px 1px #FFF;
}

.checkedbox-1.black > input:disabled ~ span {
    background: #2D575E none repeat scroll 0 0;
    box-shadow: 0 0 0 1px #569ABD;
}


.checked-field-2 {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
}

.checked-field-2 > i {
    background: #fff none no-repeat scroll center center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 1px solid #1D97BC;
    border-radius: 3px;
    z-index: 2;
}

.checked-field-2 > input[type="checkbox"] {
    background: transparent none repeat scroll 0 0;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 3;
}

.checked-field-2 > input[type="checkbox"]:checked + i {
    background-color: #1d97bc;
    background-image: url("../resources/images/icons/checked-form-1-white.svg");
    background-size: 10px 10px;
    border-color: #DEEFFB;
}

.checked-field-2 > input[type="checkbox"]:indeterminate + i {
    background-image: url("../resources/images/icons/indeterminate-form-2-blue.svg");
    background-size: 10px auto;
}

.checked-field-2 > input[type="checkbox"]:disabled + i {
    background-color: #ddd;
    opacity: 0.5;
}


.checkedbox-toggle-1 {
    display: inline-block;
    background: #1075bb;
    position: relative;
    height: 24px;
    width: 48px;
    border-radius: 30px;
}

.checkedbox-toggle-1 > input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
}

.checkedbox-toggle-1 > i {
    background: #FFF;
    position: absolute;
    z-index: 2;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    left: 5px;
    top: 5px;
    box-shadow: 0 0 0px 1px #1075bb;
    transition: all linear .1s;
}

.checkedbox-toggle-1 > input:checked ~ i {
    height: 20px;
    width: 20px;
    left: 26px;
    top: 2px;
    box-shadow: none;
}

.checkedbox-toggle-1 > span {
    background: #FFF;
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    border-radius: inherit;
    box-shadow: 0 0 0px 1px #1075bb;
    transition: all linear .1s;
}

.checkedbox-toggle-1 > span::after {
    position: absolute;
    content: "NO";
    width: 100%;
    padding: 0 0 0 20px;
    left: 0;
    top: 50%;
    font-size: 8px;
    color: #1075bb;
    text-align: center;
    transform: translateY(-50%);
}

.checkedbox-toggle-1 > input:checked ~ span {
    background: transparent;
    box-shadow: none;
}

.checkedbox-toggle-1 > input:checked ~ span::after {
    content: "";
    padding: 0 20px 0 0;
    font-family: HelveticaNeueMedium;
    color: #FFF;
}

.checkedbox-toggle-1.blue {
    box-shadow: 0 0 0px 1px #1A71B6;
    background: #1A71B6;
}

.checkedbox-toggle-1.darkblue {
    background: #81B4DE;
    box-shadow: none;
}

.checkedbox-toggle-1.black > span,
.checkedbox-toggle-1.black > i {
    background: #FFF;
    box-shadow: 0 0 0px 1px #327EBB;
}

.checkedbox-toggle-1.black > input:checked ~ span {
    background: #327EBB;
    box-shadow: 0 0 0px 1px #FFF;
}

.checkedbox-toggle-1.black > input:checked ~ i {
    background: #FFF;
    box-shadow: none;
}

.checkedbox-toggle-1.black > span::after {
    color: #FFF;
}

.checkedbox-toggle-1.black > input:checked ~ span::after {
    content: "All";
}

.checkedbox-toggle-3 {
    display: inline-block;
    background: #1075bb;
    position: relative;
    height: 24px;
    width: 48px;
    border-radius: 30px;
}

.checkedbox-toggle-3 > input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
}

.checkedbox-toggle-3 > i {
    background: #FFF;
    position: absolute;
    z-index: 2;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    left: 5px;
    top: 5px;
    box-shadow: 0 0 0px 1px #1075bb;
    transition: all linear .1s;
}

.checkedbox-toggle-3 > input:checked ~ i {
    height: 20px;
    width: 20px;
    left: 26px;
    top: 2px;
    box-shadow: none;
}

.checkedbox-toggle-3 > span {
    background: #FFF;
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0px;
    right: 0px;
    border-radius: inherit;
    box-shadow: 0 0 0px 1px #1075bb;
    transition: all linear .1s;
}

.checkedbox-toggle-3 > span::after {
    position: absolute;
    content: "OFF";
    width: 100%;
    padding: 0 0 0 20px;
    left: 0;
    top: 50%;
    font-size: 8px;
    color: #1075bb;
    text-align: center;
    transform: translateY(-50%);
}

.checkedbox-toggle-3 > input:checked ~ span {
    background: transparent;
    box-shadow: none;
}

.checkedbox-toggle-3 > input:checked ~ span::after {
    content: "";
    padding: 0 20px 0 0;
    font-family: HelveticaNeueMedium;
    color: #FFF;
}

.checkedbox-toggle-3.blue {
    box-shadow: 0 0 0px 1px #1A71B6;
    background: #1A71B6;
}

.checkedbox-toggle-3.darkblue {
    background: #81B4DE;
    box-shadow: none;
}

.checkedbox-toggle-3.black > span,
.checkedbox-toggle-3.black > i {
    background: #FFF;
    box-shadow: 0 0 0px 1px #327EBB;
}

.checkedbox-toggle-3.black > input:checked ~ span {
    background: #327EBB;
    box-shadow: 0 0 0px 1px #FFF;
}

.checkedbox-toggle-3.black > input:checked ~ i {
    background: #FFF;
    box-shadow: none;
}

.checkedbox-toggle-3.black > span::after {
    color: #FFF;
}

.checkedbox-toggle-3.black > input:checked ~ span::after {
    content: "All";
}

.checkedbox-toggle-2 {
    display: inline-block;
    position: relative;
    width: 26px;
    height: 18px;
}

.checkedbox-toggle-2 > input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
}

.checkedbox-toggle-2 > i {
    background: #DEEFFB;
    position: absolute;
    height: 14px;
    width: 100%;
    border-radius: 20px;
    left: 0px;
    top: 2px;
    transition: all linear .1s;
    z-index: 1;
}

.checkedbox-toggle-2 > input:checked ~ i {
    background: #1D97BC;
}

.checkedbox-toggle-2 > span {
    background: #B1C7D7;
    position: absolute;
    height: 18px;
    width: 18px;
    top: 0px;
    left: 0px;
    border: 1px solid #FFF;
    border-radius: 50%;
    transition: all linear .1s;
    z-index: 2;
}

.checkedbox-toggle-2 > input:checked ~ span {
    background: #FFF;
    left: 12px;
    border-color: #1D97BC;
}

.checkbox-image-1 {
    display: inline-block;
    position: relative;
}

.checkbox-image-1 > input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
}

.checkbox-image-1 > i {
    background: #FFF;
    display: block;
    position: relative;
    border: 1px solid #1075BB;
    z-index: 2;
}

.checkbox-image-1 > i svg {
    display: block;
}

.checkbox-image-1 > i svg * {
    fill: #B1C7D7 !important;
}

.checkbox-image-1 > input:checked ~ i {
    background: #1075BB;
}

.checkbox-image-1 > input:checked ~ i > svg * {
    fill: #FFF !important;
}

.checkbox-image-1.tear > i {
    border-color: rgba(29, 151, 188, 0.15);
}

.checkbox-image-1.tear > i svg {
    opacity: 0;
}

.checkbox-image-1.tear > i svg * {
    fill: #1075BB !important;
}

.checkbox-image-1.tear > input:checked ~ i {
    background: rgba(29, 151, 188, 0.80);
}

.checkbox-image-1.tear > input:checked ~ i > svg {
    opacity: 1;
}

.checkbox-image-1.tear > input:checked ~ i > svg * {
    fill: #FFF !important;
}

.checkbox-image-1 > i > span {
    display: block;
    font-family: HelveticaNeueBold;
    font-size: 12px;
    font-style: normal;
    color: #1075BB;
}

.checkbox-image-1 > input:checked ~ i > span {
    color: #FFF;
}


.checkbox-image-2 {
    position: relative;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.checkbox-image-2 > input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
}

.checkbox-image-2 > i {
    display: flex;
    width: inherit;
    height: inherit;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: inherit;
    z-index: 2;
}

.checkbox-image-2 > input:checked ~ i {
    border-color: #1075BB;
}


.checkbox-group-1 {
    height: 30px;
    border: 1px solid #1075BB;
}

.checkbox-group-1 > div {
    position: relative;
    height: 100%;
}

.checkbox-group-1 > div:not(:last-child) {
    border-right: 1px solid #1075BB;
}

.checkbox-group-1 > div > input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
}

.checkbox-group-1 > div > i {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
    font-family: HelveticaNeueMedium;
    font-size: 12px;
    font-style: normal;
    color: #1075BB;
}

.checkbox-group-1 > div > input:checked ~ i {
    background: #1075BB;
    color: #FFF;
}



.itm-chooseable > input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    opacity: 0;
}

.itm-chooseable > .background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.itm-chooseable > .prevent {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.itm-chooseable > .allow {
    position: absolute;
    z-index: 5;
}

.itm-chooseable > .prevent .icon-checked {
    opacity: 0;
    transition: all linear .3s;
}

.itm-chooseable > input:checked ~ .background {
}

.itm-chooseable > input:checked ~ .prevent .label-form-field-1 {
    color: #000;
}

.itm-chooseable > input:checked ~ .prevent .icon-checked {
    opacity: 1;
}

.itm-chooseable.selected ~ .itm-chooseable {
    z-index: 0;
}

.dropdown-field-1 {
    position: relative;
}

.dropdown-field-1 > select {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    opacity: 0;
}

.button-field-1 {
    display: inline-block;
    background: #034274;
    position: relative;
    border-radius: 50%;
}

.button-field-1:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.0);
    border-radius: 50%;
    transform: scale(1.2);
}

.button-field-1 .tooltip {
    position: absolute;
    border-radius: 50%;
    left: 0;
    bottom: 0;
}

.button-field-1.outline:before {
    border-color: #034274;
    opacity: .5;
}

.button-field-1.unoutline:before {
    opacity: 0;
}

.button-field-1.brain {
    border-radius: 50% 50% 3px;
}

.button-field-1.brain:before {
    border-color: #FFF;
    border-radius: 50% 50% 3px;
    opacity: 1;
}

.button-field-1.animated:before {
    animation: outline-zoom-1 linear 1s infinite;
}

.button-field-1.white {
    background: #FFF;
}

.button-field-1.white.outline:before {
    border-color: #FFF;
}

.button-field-1.black {
    background: #000;
}

.button-field-1.black.outline:before {
    border-color: #000;
}

.button-field-1.lightblue {
    background: #96CCF3;
}

.button-field-1.lightblue.outline:before {
    border-color: #96CCF3;
}

.button-field-1.lightblue-2 {
    background: #3f77a0;
}

.button-field-1.lightblue-2.outline:before {
    border-color: #3f77a0;
}

.button-field-1.lightblue-3 {
    background: #D4E7F7;
}

.button-field-1.lightblue-3.outline:before {
    border-color: #b5d3ed;
}

.button-field-1.red {
    background: #d31603;
}

.button-field-1.red.outline:before {
    border-color: #d31603;
}

.button-field-1.lightred {
    background: #fc4c3b;
}

.button-field-1.lightred.outline:before {
    border-color: #fc4c3b;
}

.button-field-1.green {
    background: #0d810c;
}

.button-field-1.green.outline:before {
    border-color: #0d810c;
}

.button-field-1.blue {
    background: #1075BB;
}

.button-field-1.blue.outline:before {
    border-color: #1075BB;
}

.button-field-1.yellown {
    background: #ae9b02;
}

.button-field-1.yellown.outline:before {
    border-color: #ae9b02;
}

.button-field-1.darkorange {
    background: #B57A2B;
}

.button-field-1.darkorange.outline:before {
    border-color: #B57A2B;
}

.button-field-1.darkpink {
    background: #864B9D;
}

.button-field-1.darkpink.outline:before {
    border-color: #864B9D;
}

.button-field-1.darkblue {
    background: #034274;
}

.button-field-1.darkblue.outline:before {
    border-color: #034274;
}

.button-field-1.transparent {
    background: transparent;
}

.button-form-field-1 {
    background: #175682;
    position: relative;
    font-family: HelveticaNeueBold;
    font-size: 12px;
    color: #d4e7f7;
    text-transform: uppercase;
}

.button-form-field-1 .icon * {
    fill: #d4e7f7 !important;
}

.button-form-field-1.transparent {
    border-color: transparent;
}

.button-form-field-1.white {
    border-color: #FFF;
    color: #FFF;
}

.button-form-field-1.white .icon * {
    fill: #FFF !important;
}

.button-form-field-1.gray {
    border-color: #999999;
    color: #999999;
}

.button-form-field-1.gray .icon * {
    fill: #999999 !important;
}

.button-form-field-1.darkgray {
    background: #333;
    color: #999;
}

.button-form-field-1.darkgray .icon * {
    fill: #999 !important;
}

.button-form-field-1.green {
    background: #0D810C;
    color: #FFF;
}

.button-form-field-1.green .icon * {
    fill: #FFF !important;
}

.button-form-field-1.red {
    background: #d31603;
    color: #FFF;
}

.button-form-field-1.red .icon * {
    fill: #FFF !important;
}

.button-form-field-1.blue-black {
    background: transparent;
    border-color: #327EBB;
    color: #327EBB;
}

.button-form-field-1.blue-black .icon * {
    fill: #327EBB !important;
}

.button-form-field-1.blue-gray {
    background: #214F6F;
    border-color: #214F6F;
}

.button-form-field-1.blue-grayness {
    background: #0e4261;
    border-color: #0e4261;
}

.button-form-field-1.no-outline {
    border-color: transparent !important;
}

.button-form-field-1 .icon {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
}

.button-form-field-1.position-left .icon {
    left: 10px;
}

.button-form-field-1.position-right .icon {
    right: 10px;
}

.button-form-field-1:disabled::after {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.button-form-field-2 {
    background: transparent;
    border: 1px solid #81b4de;
    font-family: HelveticaNeueBold;
    font-size: 12px;
    color: #1075BB;
    text-transform: uppercase;
}

.button-form-field-3 {
    background: #FFF;
    padding: 0 20px;
    border: 1px solid #1075BB;
    border-radius: 30px;
}


.button-function-1 {
    display: block;
    background: #327ebb;
    position: relative;
    border-radius: 50%;
    box-shadow: 1px 1px 0 #b1c7d7;
}

.button-function-1::after {
    background: rgba(255, 255, 255, 0.05) none repeat scroll 0 0;
    position: absolute;
    content: "";
    width: 130%;
    height: 130%;
    right: 0;
    bottom: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.button-function-1.green {
    background: #0D810C;
}

.button-function-1.red {
    background: #D31603;
}

.button-function-1.darkblue {
    background: #034274;
}

.button-function-1.lightblue {
    background: #7DA3C2;
}


.button-function-4 {
    display: block;
    background: #EECA56;
    position: relative;
    border-radius: 50%;
    box-shadow: 1px 1px 0 #EECA56;
}

.button-function-4::after {
    background: rgba(255, 255, 255, 0.05) none repeat scroll 0 0;
    position: absolute;
    content: "";
    width: 130%;
    height: 130%;
    right: 0;
    bottom: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.button-function-4.green {
    background: #0D810C;
}

.button-function-4.red {
    background: #D31603;
}

.button-function-4.darkblue {
    background: #034274;
}

.button-function-4.lightblue {
    background: #7DA3C2;
}

.button-function-4.white {
    background: #FFF;
}


.button-function-2 {
    display: inline-block;
    background: #FFF;
    border: 1px solid;
    color: #d4e7f7;
    border-radius: 50%;
    box-shadow: 1px 1px 0 0 #327EBB;
}

.button-function-2.blue,
.button-function-2.blue svg * {
    color: rgba(16, 117, 187, 0.3);
    fill: #1075BB !important;
}

.button-function-2.green,
.button-function-2.green svg * {
    color: rgba(13, 129, 12, 0.3);
    fill: #0D810C !important;
}

.button-function-2.red,
.button-function-2.red svg * {
    color: rgba(211, 22, 3, 0.3);
    fill: #D31603 !important;
}

.button-function-3 {
    background: transparent;
    border: 1px solid;
    color: #FFF;
    border-radius: 50%;
}

.button-function-3,
.button-function-3 svg * {
    color: rgba(255, 255, 255, 0.7);
    fill: #FFF !important;
}

.button-function-3.blue,
.button-function-3.blue svg * {
    color: rgba(16, 117, 187, 0.7);
    fill: #1075BB !important;
}

.button-function-3.green,
.button-function-3.green svg * {
    color: rgba(13, 129, 12, 0.7);
    fill: #0D810C !important;
}

.button-icon-1 {
    background: transparent;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.button-icon-1 > div {
    position: relative;
    height: 100%;
    padding-bottom: 1px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-family: HelveticaNeueBold, Arial;
    font-size: 14px;
    color: #1075BB;
    border-radius: inherit;
}

.button-icon-1[disabled]:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 1px #d31603 inset;
    z-index: 10;
}

.button-icon-1[disabled]:after {
    background: #d31603 none repeat scroll 0 0;
    position: absolute;
    content: "";
    height: 100%;
    width: 2px;
    top: 0;
    transform: rotate(-45deg);
}

.button-icon-1[disabled] > div {
    opacity: .6;
}

.button-icon-1.green > div {
    background: rgba(13, 129, 12, 0.3);
}

.button-icon-1.gray > div {
    background: rgba(153, 153, 153, 0.3);
}

.button-icon-1.yellown > div {
    background: rgba(229, 205, 11, 0.6);
}

.button-icon-1.red > div {
    background: rgba(211, 22, 3, 0.3);
}

.button-icon-1.blue > div {
    background: rgba(50, 126, 187, 0.3);
}

/* ========================================
Popup Style /////////////////////////////////////////////////////////// */
.popup {
    position: relative;
    width: 100%;
    height: 100%;
}

.popup .popup-inner {
    background: #81B4DE;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    border: 1px dotted rgba(0, 0, 0, 0.5);
    overflow: auto;
    border-radius: 10px;
    box-shadow: 0 0 0 3px #4784b6;
}

.popup .popup-inner > .title {
    position: relative;
    padding: 10px;
    font-family: Geosan;
    font-size: 19px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
}

.popup .popup-inner > .title > i {
    position: absolute;
    left: 10px;
    top: 20px;
    transform: scale(2.3) translateY(-3px);
    opacity: .3;
}

.popup .popup-inner > .content {
    font-family: HelveticaNeueLight;
    font-size: 16px;
    color: #81B4DE;
}

.popup .popup-inner > .buttons {
    padding-bottom: 15px;
}

.popup .popup-inner > .buttons .btn[disabled] {
    opacity: .4;
}

.popup .popup-inner > .buttons .btn.btn-cancel {
    font-family: Roboto;
    font-size: 18px;
    color: #000;
    text-transform: uppercase;
}

.popup .popup-inner > .buttons .btn.btn-reset {
    font-family: Roboto;
    font-size: 17px;
    color: #1384be;
    text-transform: uppercase;
}

.popup .popup-inner > .buttons .btn.btn-ok {
    background: #4399db;
    position: relative;
    height: 66px;
    width: 66px;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0 0px 6px rgba(255, 255, 255, 0.20);
    margin-right: 2px;
    margin-bottom: 2px;
}

.popup .popup-inner > .buttons .btn.btn-ok::before,
.popup .popup-inner > .buttons .btn.btn-ok::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
}

.popup .popup-inner > .buttons .btn.btn-ok::before {
    border: 3px solid rgba(0, 0, 0, 0.025);
    border-right-color: rgba(255, 255, 255, 0.4);
    animation: rotate-1 linear 10s infinite;
}

.popup .popup-inner > .buttons .btn.btn-ok::after {
    border: 5px solid rgba(255, 255, 255, 0);
    border-left-color: rgba(255, 255, 255, .8);
    animation: rotate-2 ease-in-out 12s infinite;
}

.popup[data-style="confirm-delete"] .popup-inner {
    background: #960404;
    box-shadow: 0 0 0 3px #810101;
}

.popup[data-style="confirm-delete"] .popup-inner > .content {
    color: #f19696;
}

.popup[data-style="confirm-delete"] .popup-inner > .buttons .btn.btn-ok {
    background: #e67363;
}

.popup-2 {
    background: #222;
}

.popup-2:before {
    background: #222 none repeat scroll 0 0;
    position: absolute;
    content: "";
    height: 0px;
    width: 100%;
    left: 0;
    bottom: 100%;
    border-radius: 100% 100% 0 0;
}

.popup-2 > .title {
    position: relative;
    padding: 10px 15px;
    font-family: HelveticaNeueBold;
    font-size: 14px;
    color: #327ebb;
}

.popup-2 > .title .icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.popup-2 > .title .icon svg * {
    fill: #444 !important;
}

.popup-2 > .content {
    padding: 10px 15px;
    font-family: HelveticaNeueLight;
    font-size: 14px;
    line-height: 1.4;
    color: #b2dcff;
}

.popup-2 > .content b {
    font-family: HelveticaNeue;
    font-weight: normal;
}

.popup-2 > .buttons {
    padding: 10px 5px 15px;
    margin-bottom: -10px;
    margin-left: -15px;
    margin-right: -15px;
}


.popup-3 {
}

.popup-3 > .title {
    font-family: HelveticaNeueLight;
    font-size: 16px;
    color: #327ebb;
}

.popup-3 > .content {
    font-family: HelveticaNeueLight;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
}

.popup-3 > .content .text-confirm {
    padding: 10px 0;
}

.popup-3 > .content b {
    font-family: HelveticaNeue;
    font-weight: normal;
}

.popup-3 > .buttons {
    padding: 0 !important;
    margin-left: -10px;
    margin-right: -10px;
}


.popup-container.popup-showing {
    z-index: 1000;
}
/* ========================================
Table Style /////////////////////////////////////////////////////////// */

/* ========================================
Button Style /////////////////////////////////////////////////////////// */

/* ========================================
Hyperlink Style /////////////////////////////////////////////////////////// */

.link-text-1 {
    font-family: HelveticaNeueLight;
    font-size: 16px;
    color: #FFF;
}

/* ========================================
Text Content Style /////////////////////////////////////////////////////////// */
.baseline, .baseline * {
    vertical-align: baseline;
}

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

.breakword {
    word-break: break-all;
}

.first-capitalize::first-letter {
    text-transform: uppercase;
}

/* ========================================
Background Style /////////////////////////////////////////////////////////// */
.bg-transparent,
.bg-transparent:hover,
.bg-transparent[disabled] {
    background: transparent;
}

.bg-header-1 {
    background: #EBF5FD;
}

.bg-search-filter-1 {
    background: #CCE1F2 !important;
}

.bg-search-filter-2 {
    background: rgba(255, 255, 255, 0.3) !important;
}

.bg-overlay-1 {
    background: #CCE1F2;
    position: relative;
}

.bg-overlay-1:before,
.bg-overlay-1:after {
    background: transparent url("../resources/images/icons/gutter-4.svg") no-repeat scroll 0 0;
    position: absolute;
    content: "";
    top: -4px;
    height: 10px;
    width: 100%;
}

.bg-overlay-1:before {
    background-position: left 0;
    background-size: 45px auto;
    left: 0;
}

.bg-overlay-1:after {
    background-position: right 0;
    background-size: 45px auto;
    right: 0;
}

.bg-white {
    background-color: #FFF !important;
}

.bg-black-2 {
    background: rgba(193, 224, 248, 0.35);
}

.bg-red {
    background: #d31603 !important;
}

.bg-green {
    background: #0d810c !important;
}

.bg-lightblue {
    background: #ebf5fd !important;
}

.bg-bluegray {
    background: #7da3c2 !important;
}

.bg-lightred {
    background-color: #fcd1d1 !important;
}

/* ========================================
Color Style /////////////////////////////////////////////////////////// */

.clr-black {
    color: #000000 !important;
}

.clr-black svg *,
svg.clr-black * {
    fill: #000 !important;
}

.clr-gray {
    color: #7a7a7a !important;
}

.clr-red {
    color: #d31603 !important;
}

.clr-green {
    color: #0d810c !important;
}

.clr-blue {
    color: #1A71B6 !important;
}

.clr-bluegray {
    color: #7da3c2 !important;
}

.clr-orange {
    color: #ffb874 !important;
}

.clr-tear {
    color: #6bb6c0 !important;
}

.clr-white {
    color: #FFFFFF !important;
}

.clr-white svg *,
svg.clr-white * {
    fill: #FFFFFF !important;
}

.clr-date-1 {
    color: #666 !important;
}

.clr-clickable {
    color: #1075BB !important;
    position: relative;
}

.clr-clickable::after {
    position: absolute;
    content: "";
    height: 0;
    border-bottom: 8px solid;
    border-left: 8px solid transparent;
    bottom: 5px;
    margin-left: 5px;
}

.clr-clickable.no-symbol::after {
    display: none;
}


svg.clr-symbol * {
    fill: #333 !important;
}

svg.clr-symbol-clickable * {
    fill: #327EBB !important;
}

svg.clr-symbol-clickable.alert *,
svg.clr-symbol-clickable.red * {
    fill: #d31603 !important;
}

/* ========================================
Shadow Style /////////////////////////////////////////////////////////// */

.bdr-black {
    border: 1px solid #333;
}

.bdr-black-50 {
    border: 1px solid rgba(51, 51, 51, 0.5);
}

.bdr-none {
    border: none !important;
}

/* ========================================
Separator Style /////////////////////////////////////////////////////////// */
.separator-3 {
    height: 0px;
    border-top: 1px solid #c1e0f8;
}

.separator-3-blue {
    height: 0px;
    border-top: 1px solid #115f9c;
}

.separator-4 {
    height: 0px;
    border-top: 1px solid rgba(193, 224, 248, 0.5);
}

.separator-4-blue {
    height: 0px;
    border-top: 1px solid rgba(5, 74, 128, 0.50);
}

.separator-4-lightblue {
    height: 0px;
    border-bottom: 1px solid rgba(50, 126, 187, 0.15);
}

.separator-4-black {
    height: 0;
    border-bottom: 1px solid rgba(145, 166, 182, 0.15);
}

.separator-6 {
    height: 0px;
    border-top: 1px solid rgba(193, 224, 248, 0.10);
}

.separator-6-black {
    height: 0px;
    border-top: 1px solid #000000;
}

/* ========================================
Icon Style /////////////////////////////////////////////////////////// */

.app-search-icon {
    width: 24px;
    height: 24px;
    background: url('../resources/images/icons/search-blue-1.svg') no-repeat scroll center center !important;
    background-size: 10px !important;
}

.app-setting-icon {
    width: 24px;
    height: 24px;
    background: url('../resources/images/icons/setting-blue-1.svg') no-repeat scroll center center !important;
    background-size: 10px !important;
}

.app-notification-icon {
    width: 22px;
    height: 22px;
    background: url('../resources/images/icons/notification-blue-1.svg') no-repeat scroll center center !important;
}

.app-option-icon {
    width: 24px;
    height: 24px;
    background: url('../resources/images/icons/option-blue-1.svg') no-repeat scroll center center !important;
    background-size: 10px !important;
}

.app-exp-inp-icon {
    width: 24px;
    height: 24px;
    background: url('../resources/images/icons/file-blue-1.svg') no-repeat scroll center center !important;
    background-size: 10px !important;
}

.app-item-next-icon {
    width: 16px;
    height: 16px;
    background: url('../resources/images/icons/next-blue-1.svg') no-repeat scroll center center !important;
    background-size: 100% !important;
}


/* ========================================
Loader Style /////////////////////////////////////////////////////////// */

/* ========================================
Animated Style /////////////////////////////////////////////////////////// */
@keyframes rotate-1 {
    from {
        transform: rotate(5deg);
    }

    to {
        transform: rotate(365deg);
    }
}

@keyframes rotate-2 {
    from {
        transform: rotate(50deg);
    }

    to {
        transform: rotate(-310deg);
    }
}

@keyframes outline-zoom-1 {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes outline-zoom-2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.animated-zoom-1 {
    animation: outline-zoom-2 ease-in-out 10s infinite;
}
