/**************** NORMALIZE ****************//**************** NORMALIZE ****************//**************** NORMALIZE ****************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none;}
article, aside, div, details, fieldset, figcaption, figure, form, footer, h1, h2, h3, h4, header, hgroup, legend, menu, nav, section {display: block; position: relative; margin: 0px; padding: 0px; box-sizing: border-box;}

html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
a {text-decoration: none; background-color: transparent;}
ol, ul {display: block; position: relative; list-style: none; box-sizing: border-box;} li {display: block; position: relative; list-style-type: none; box-sizing: border-box;}
blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
input[disabled] {cursor: default;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
input[type="number"] {-moz-appearance: textfield;}
input[type="search"] {-webkit-appearance: textfield; box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}



/**************** ISO CSS ****************//**************** ISO CSS ****************//**************** ISO CSS ****************/

.iso-block {display: block !important;} .iso-inline {display: inline !important;} .iso-inblock {display: inline-block !important;}
.iso-overflow {overflow: hidden !important;} .iso-clear:after {content: ""; display: block; width: 0px; height: 0px; clear: both; visibility: hidden;}
.iso-hide {opacity: 0 !important; pointer-events: none !important; display: none !important;} .iso-wait {opacity: 0.5; cursor: default; pointer-events: none;}
.iso-nopoint {pointer-events: none;}

.iso-text-left {text-align: left !important;} .iso-text-left input, .iso-text-left textarea {text-align: left !important;} 
.iso-text-right {text-align: right !important;} .iso-text-right input, .iso-text-right textarea {text-align: right !important;}
.iso-text-center {text-align: center !important;} .iso-text-center input, .iso-text-center textarea {text-align: center !important;}
.iso-text-capitalize {text-transform: capitalize;} .iso-text-nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.iso-text-break {word-break: break-all;} .iso-text-for-copy {width: 1px; height: 1px; opacity: 0; overflow: hidden;} .iso-mobi {display: none !important;}


@media screen and (max-width: 750px) {
    .iso-nomobi {display: none !important;} .iso-mobi {display: inherit !important;}
}



/**************** FLEX ****************//**************** FLEX ****************//**************** FLEX ****************/

.flex, [class*='flex-'] {
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: flex-start; -webkit-justify-content: flex-start; align-items: flex-start; -webkit-align-items: flex-start; align-content: flex-start; -webkit-align-content: flex-start;
}
.flex > * {flex: 0 0 auto; -webkit-flex: 0 0 auto;} [class*='flex-'] > * {flex: 0 0 auto; -webkit-flex: 0 0 auto;}
.flex-reverse {flex-direction: row-reverse; -webkit-flex-direction: row-reverse;}
.flex-column {flex-direction: column; -webkit-flex-direction: column;}
.flex-colreverse {flex-direction: column-reverse; -webkit-flex-direction: column-reverse;}
.flex-nowrap {flex-wrap: nowrap; -webkit-flex-wrap: nowrap;}
.flex-wrapreverse {flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse;}
.flex-end {justify-content: flex-end; -webkit-justify-content: flex-end;}
.flex-between {justify-content: space-between; -webkit-justify-content: space-between;}
.flex-around {justify-content: space-around; -webkit-justify-content: space-around}
.flex-center {justify-content: center; -webkit-justify-content: center;}
.flex-iend {align-items: flex-end; -webkit-align-items: flex-end;}
.flex-icenter {align-items: center; -webkit-align-items: center;}
.flex-ibaseline {align-items: baseline; -webkit-align-items: baseline;}
.flex-istretch {align-items: stretch; -webkit-align-items: stretch;}
.flex-cend {align-content: flex-end; -webkit-align-content: flex-end;}
.flex-ccenter {align-content: center; -webkit-align-content: center;}
.flex-cbetween {align-content: space-between; -webkit-align-content: space-between;}
.flex-caround {align-content: space-around; -webkit-align-content: space-around;}

.flex > .nofix, [class*='flex-'] > .nofix {flex: 1 1 auto; -webkit-flex: 1 1 auto;}

.flex-vcenter {align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;}
.flex-acenter {justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;}
.flex-end-center {justify-content: flex-end; -webkit-justify-content: flex-end;}


@media screen and (max-width: 750px) {
    .flex-end-center {justify-content: center; -webkit-justify-content: center;}
}



/**************** ROOT ****************//**************** ROOT ****************//**************** ROOT ****************/

:root {

    --main: hsla(213,96%,42%,1);
    --bg-main: hsla(213,96%,48%,1);
    --bg-main-light: hsla(213,48%,96%,1);
    --bg-main-sublight: hsla(213,84%,90%,1);
    --br-main: hsla(213,90%,60%,1);
    --br-main-light: hsla(213,90%,84%,1);
    
    --red: hsla(0,84%,48%,1);
    --bg-red: hsla(0,84%,60%,1);
    --bg-red-light: hsla(0,48%,96%,1);
    --br-red: hsla(0,96%,60%,1);
    
    --orange: hsla(24,72%,42%,1);
    --bg-orange: hsla(24,96%,60%,1);
        
    --yellow: hsla(48,96%,42%,1);
    --bg-yellow: hsla(48,96%,60%,1);

    --green: hsla(132,78%,30%,1);
    --bg-green: hsla(132,72%,36%,1);
    --br-green-light: hsla(132,66%,48%,1);   

    --teal: hsla(198,96%,36%,1);
    --bg-teal: hsla(198,96%,66%,1);

    --blue: hsla(213,96%,42%,1);
    --bg-blue: hsla(213,96%,48%,1);
    --br-blue: hsla(213,90%,60%,1);
           
    --purple: hsla(282,84%,66%,1);
    --bg-purple: hsla(282,66%,60%,1);
    
    --pink: hsla(348,96%,60%,1);
    --bg-pink: hsla(348,96%,60%,1);
    
    --white: hsla(0,0%,100%,1);
    
    --black: hsla(0,0%,0%,1);
    --bg-black: hsla(0,0%,12%,1);
            
    --grey: hsla(0,0%,48%,1);
    --bg-grey: hsla(0,0%,90%,1);
    --bg-grey-light: hsla(0,0%,96%,1);
    --bg-grey-dark: hsla(0,0%,84%,1);
    --br-grey: hsla(0,0%,78%,1);
    --br-grey-dark: hsla(0,0%,72%,1);

}

:root .cbox {
    
    --main: hsla(213,96%,42%,1);
    --bg-main: hsla(213,96%,48%,1);
    --br-main: hsla(213,90%,60%,1);
    
    --red: hsla(0,84%,48%,1);
    --bg-red: hsla(0,84%,60%,1);
    --br-red: hsla(0,96%,60%,1);
    
    --orange: hsla(24,72%,42%,1);
    --bg-orange: hsla(24,96%,60%,1);
        
    --yellow: hsla(48,96%,42%,1);
    --bg-yellow: hsla(48,96%,60%,1);

    --green: hsla(132,78%,30%,1);
    --bg-green: hsla(132,66%,48%,1);   

    --teal: hsla(198,96%,36%,1);
    --bg-teal: hsla(198,96%,66%,1);

    --blue: hsla(213,96%,42%,1);
    --bg-blue: hsla(213,96%,48%,1);
    --br-blue: hsla(213,90%,60%,1);
           
    --purple: hsla(282,84%,66%,1);
    --bg-purple: hsla(282,66%,60%,1);
    
    --pink: hsla(348,96%,60%,1);
    --bg-pink: hsla(348,96%,60%,1);
    
    --black: hsla(0,0%,12%,1);
    --bg-black: hsla(0,0%,24%,1);
    
    --grey: hsla(0,0%,54%,1);
    --bg-grey-dark: hsla(0,0%,90%,1);
    --br-grey: hsla(0,0%,84%,1);
    --br-grey-dark: hsla(0,0%,78%,1);
    
}



/**************** BODY ****************//**************** BODY ****************//**************** BODY ****************/

body {
    font-family: 'Nunito', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: 0px;
    color: var(--black); background: var(--bg-black); -webkit-font-smoothing: antialiased; overflow: hidden;
}
b, strong {font-weight: 700;}
h1, h4, .merr {font-family: 'Merriweather', serif; font-style: normal; font-weight: 700;}



/**************** LNK ****************//**************** LNK ****************//**************** LNK ****************/

.lnk {color: var(--main); opacity: 1; cursor: pointer; transition: opacity ease 240ms;} .lnk:hover {opacity: 0.72;}
.lnk.nocolor {color: inherit;} 
.btn.noclick {cursor: default; pointer-events: none;}
.lnk.nohover {cursor: inherit; opacity: 1;}

.lnk.red {color: var(--red);} .lnk.orange {color: var(--orange);} .lnk.yellow {color: var(--yellow);} .lnk.green {color: var(--green);}
.lnk.teal {color: var(--teal);} .lnk.blue {color: var(--blue);} .lnk.purple {color: var(--purple);} .lnk.pink {color: var(--pink);}

.lnk.black {color: var(--black);} .lnk.grey {color: var(--grey);} .lnk.white {color: var(--white);}

/*** LNK LIKE BTN ***/

.lnk.lbtn {
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;
    
    position: relative; min-height: 24px; padding: 5px 0px 5px 0px; font-weight: 800; font-size: 14px; line-height: 14px; text-align: center; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box;
}

/*** LNK LIKE BTN OPTIONS ***/

.lnk.lbtn.left {justify-content: flex-start; -webkit-justify-content: flex-start; text-align: left;}
.lnk.lbtn.hide {display: none;}
.lnk.lbtn.wait {opacity: 0.5; cursor: default; pointer-events: none;}

/*** LNK LIKE BTN CONTENT ***/

.lnk.lbtn > [class*='fa-'] {
    flex: 0 0 auto; -webkit-flex: 0 0 auto;
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: center; -webkit-justify-content: center; align-items: flex-start; -webkit-align-items: flex-start; align-content: flex-start; -webkit-align-content: flex-start;
    
    width: 18px; height: 14px; font-size: 16px; line-height: 14px; text-align: center;
}
.lnk.lbtn > b {display: block; flex: 1 1 auto; -webkit-flex: 1 1 auto; font-weight: inherit; margin-bottom: -1px; margin-right: -1px;}
.lnk.lbtn > [class*='fa-'] + b {margin-left: 12px;}
.lnk.lbtn > b + [class*='fa-'] {margin-left: 12px;}

/*** LNK LIKE BTN SIZE ***/

.lnk.lbtn.h18 {min-height: 18px; padding: 2px 0px 2px 0px;}

.lnk.lbtn.h14 {min-height: 14px; padding: 0px 0px 0px 0px; font-size: 12px;}
.lnk.lbtn.h14 > [class*='fa-'] {width: 16px; font-size: 14px;}
.lnk.lbtn.h14 > b {margin-bottom: 0px;}

.lnk.lbtn.u12 {font-size: 12px;}
.lnk.lbtn.u12 > [class*='fa-'] {width: 16px; font-size: 14px;}

/*** LNK LIKE BTN ALARM ***/

.lnk.lbtn .alarm {margin: -5px 0px -5px 10px;}

/*** LNK LIKE BTN SYNC ***/

.lnk.lbtn.sync {cursor: default; pointer-events: none;}
.lnk.lbtn.sync > [class*='fa-'] {opacity: 0;}
.lnk.lbtn.sync > b {opacity: 0;}
.lnk.lbtn.sync .sync {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.lnk.lbtn.sync .sync > [class*='fa-'] {
    display: block; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0px 0px -12px;
    font-size: 20px; line-height: 24px; text-align: center; animation: sync 1800ms infinite linear forwards;
}

.lnk.lbtn.h18.h14 .sync > [class*='fa-'] {font-size: 18px;}
.lnk.lbtn.h18.u12 .sync > [class*='fa-'] {font-size: 18px;}



/**************** BTN ****************//**************** BTN ****************//**************** BTN ****************/

.btn {
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;
    
    position: relative; min-height: 54px; padding: 17px 27px 17px 27px; font-weight: 800; font-size: 16px; line-height: 20px; text-align: center; text-transform: uppercase; letter-spacing: 1px;
    color: var(--white); background: var(--bg-main); border-radius: 9px; box-sizing: border-box; cursor: pointer; transition: opacity ease 240ms;
}
.btn:hover {opacity: 0.84;}

.btn.red {background: var(--bg-red);} .btn.orange {background: var(--bg-orange);} .btn.yellow {background: var(--bg-yellow);}
.btn.green {background: var(--bg-green);} .btn.teal {background: var(--bg-teal);} .btn.purple {background: var(--bg-purple);}
.btn.pink {background: var(--bg-pink);} 

.btn.black {background: var(--bg-black);}
.btn.grey {color: var(--black); background: var(--bg-grey-dark);}
.btn.grey.sel {color: var(--white); background: var(--bg-black);}
.btn.grey.error {color: var(--white); background: var(--bg-red);}

/*** BTN NOBG ***/

.btn.nobg {background: none; color: var(--main);}
.btn.nobg.black {color: var(--black);}

/*** BTN LIKE LNK ***/

.btn.llnk {color: var(--main); background: var(--bg-grey-dark);}
.btn.llnk.black {color: var(--black);}

/*** BTN OPTIONS ***/

.btn.left {justify-content: flex-start; -webkit-justify-content: flex-start; text-align: left;}
.btn.hide {display: none;}
.btn.wait {opacity: 0.5; cursor: default; pointer-events: none;}
.btn.noclick {cursor: default; pointer-events: none;}
.btn.nohover {cursor: inherit; opacity: 1;}
.btn.nopad {padding-left: 0px !important; padding-right: 0px !important;}

/*** BTN CONTENT ***/

.btn > [class*='fa-'] {
    flex: 0 0 auto; -webkit-flex: 0 0 auto;
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap;
    justify-content: center; -webkit-justify-content: center; align-items: flex-start; -webkit-align-items: flex-start; align-content: flex-start; -webkit-align-content: flex-start;
    
    width: 20px; height: 20px; font-size: 18px; line-height: 20px; text-align: center;
}
.btn > b {display: block; flex: 1 1 auto; -webkit-flex: 1 1 auto; font-weight: inherit; margin-bottom: -1px; margin-right: -1px;}
.btn > [class*='fa-'] + b {margin-left: 12px;}
.btn > b + [class*='fa-'] {margin-left: 12px;}

/*** BTN SIZE ***/

.btn.h60 {min-height: 60px; padding: 20px 30px 20px 30px; font-size: 18px;}
.btn.h60 > [class*='fa-'] {width: 22px; font-size: 20px;}

.btn.h48 {min-height: 48px; padding: 14px 24px 14px 24px; font-size: 14px;}
.btn.h48 > [class*='fa-'] {width: 18px; font-size: 16px;}

.btn.h36 {min-height: 36px; padding: 8px 18px 8px 18px; font-size: 14px;}
.btn.h36 > [class*='fa-'] {width: 18px; font-size: 16px;}

.btn.h24 {min-height: 24px; padding: 2px 9px 2px 9px; font-size: 12px; border-radius: 6px;}
.btn.h24 > b {margin-bottom: 0px;}
.btn.h24 > [class*='fa-'] {width: 16px; font-size: 14px;}

.btn.w66 {width: 66%; min-width: fit-content;}
.btn.w50 {width: 50%; min-width: fit-content;}
.btn.w100 {width: 100%;}

.btn.u14 {font-size: 14px;}
.btn.u14 > [class*='fa-'] {width: 16px; font-size: 14px;}

.btn.i24 > [class*='fa-'] {width: 26px; font-size: 24px;}
.btn.i30 > [class*='fa-'] {width: 32px; font-size: 30px;}
.btn.i36 > [class*='fa-'] {width: 38px; font-size: 36px;}

/*** BTN ALARM ***/

.btn .alarm {margin: -2px 0px -2px 10px;}

/*** BTN SYNC ***/

.btn.sync {cursor: default; pointer-events: none;}
.btn.sync > [class*='fa-'] {opacity: 0;}
.btn.sync > b {opacity: 0;}
.btn.sync .sync {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.btn.sync .sync > [class*='fa-'] {
    display: block; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0px 0px -15px;
    font-size: 22px; line-height: 30px; text-align: center; animation: sync 1800ms infinite linear forwards;
}
@keyframes sync { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }

.btn.h60.sync .sync > [class*='fa-'] {font-size: 24px;}
.btn.h48.sync .sync > [class*='fa-'] {font-size: 20px;}
.btn.h36.sync .sync > [class*='fa-'] {font-size: 20px;}
.btn.h24.sync .sync > [class*='fa-'] {font-size: 18px;}
.btn.u14.sync .sync > [class*='fa-'] {font-size: 18px;}


/**************** COMPONENTS ****************//**************** COMPONENTS ****************//**************** COMPONENTS ****************/
/**************** COMPONENTS ****************//**************** COMPONENTS ****************//**************** COMPONENTS ****************/
/**************** COMPONENTS ****************//**************** COMPONENTS ****************//**************** COMPONENTS ****************/

/**************** ALARM ****************//**************** ALARM ****************//**************** ALARM ****************/

.alarm {display: block; position: relative; width: 24px; font-weight: 800; font-size: 12px; line-height: 24px; box-sizing: border-box;}
.alarm[data-count="0"] {display: none;}
.alarm span {display: block; position: relative; width: 100%; padding-top: 100%; background: var(--bg-red); border-radius: 100%; box-sizing: border-box; overflow: hidden;}
.alarm i {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0px 0px 0px 0px; color: var(--white); font-size: inherit; line-height: inherit; text-align: center; letter-spacing: 0px; box-sizing: border-box;}
.alarm [class*='fa-'] {animation: alarm-rotate 480ms infinite ease forwards;}
@keyframes alarm-rotate { 0% {transform: rotate(-10deg);} 50% {transform: rotate(10deg);} 100% {transform: rotate(-10deg);} }



/**************** ARTICLES TEXT CONTENT ****************//**************** ARTICLES TEXT CONTENT ****************//**************** ARTICLES TEXT CONTENT ****************/

article.article {padding: 30px 36px 18px 36px; font-size: 16px; line-height: 22px; text-align: left; color: var(--black);}
article.article img {display: block; width: calc(100% + 48px); height: auto !important; margin: 12px -24px 12px -24px;}

article.article div {padding-bottom: 12px; text-align: left;}
article.article p {padding-bottom: 12px; text-align: left;}
article.article p.center {text-align: center;}
article.article p.red {color: var(--red);}

article.article h1, article.article h2, article.article h3, article.article h4 {
    font-family: 'Nunito', sans-serif; font-style: normal; font-weight: 700; padding-top: 9px; padding-bottom: 9px; font-size: 20px; line-height: 26px; text-align: left;
}
article.article h1.center, article.article h2.center, article.article h3.center, article.article h4.center {text-align: center;}
article.article h1.red, article.article h2.red, article.article h3.red, article.article h4.red {color: var(--red);}

article.article ul {list-style-type: disc; padding-bottom: 12px; padding-left: 36px;}
article.article ol {list-style-type: decimal; padding-bottom: 12px; padding-left: 36px;}
article.article li {display: list-item; list-style-type: inherit; padding-bottom: 12px; text-align: left;}

article.article blockquote {margin: 12px 0px 24px 0px; padding: 12px 18px 0px 15px; background: var(--bg-grey-light); border-left: solid var(--br-grey);}

article.article i, article.article em {font-style: italic;}

article.article a:not([class]) {color: var(--main); word-break: break-all; opacity: 1; cursor: pointer; transition: opacity ease 240ms;}
article.article a:not([class]):hover {opacity: 0.72;}

article.article > *:first-child {padding-top: 0 !important; margin-top: 0 !important;}


@media screen and (max-width: 750px) {
    article.article {padding: 18px 18px 6px 18px;}
    article.article img {width: calc(100% + 36px); margin: 12px -18px 12px -18px;}
}



/**************** BANANAS ****************//**************** BANANAS ****************//**************** BANANAS ****************/

.bnb {
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; align-content: center; -webkit-align-content: center;
    width: 100%; padding: 0px 0px 36px 0px;
}

.bnb .bn a {display: block; width: 100%;}
.bnb .bn img {display: block; width: 100%; cursor: pointer; transition: all ease-in 120ms;}
.bnb .bn img:hover {filter: brightness(1.12); -webkit-filter: brightness(1.12);}

.bnb .bn.b160-600 {width: 160px; height: 600px;}
.bnb .bn.b300-250 {width: 300px; height: 250px;}
.bnb .bn.b300-600 {width: 300px; height: 600px;}
.bnb .bn.b320-100 {width: 320px; height: 100px;}
.bnb .bn.b728-90 {width: 728px; height: 90px;}
.bnb .bn.b970-90 {width: 970px; height: 90px;}
.bnb .bn.b970-250 {width: 970px; height: 250px;}



/**************** INTL PHONE ****************//**************** INTL PHONE ****************//**************** INTL PHONE ****************/

.iti {width: 100%;}
.iti__country {padding: 9px 12px;}
.iti__country-name, .iti__flag-box {margin-right: 12px;}
.iti__selected-flag {padding: 0 9px 0 12px;}
.iti--allow-dropdown input, .iti--allow-dropdown input[type=tel], .iti--allow-dropdown input[type=text],
.iti--separate-dial-code input, .iti--separate-dial-code input[type=tel], .iti--separate-dial-code input[type=text] {padding-left: 60px;}



/**************** SIMPLEBAR SCROLL ****************//**************** SIMPLEBAR SCROLL ****************//**************** SIMPLEBAR SCROLL ****************/

.scrollbox {width: 100%; height: 100%;}
.scrollbar {width: 100%; height: 100%;}
.scrollpad {width: 100%; padding: 0px 0px 0px 0px;}

/**/ #body.touch .scrollbox {overflow-x: hidden; overflow-y: auto;}
/**/ #body.touch .scrollbar {height: auto;}

.scrollbar .simplebar-track.simplebar-vertical {top: 0; bottom: 0; right: 0; width: 12px; background: hsla(0,0%,0%,0.12); transition: width ease 240ms; z-index: 100;}
.scrollbar .simplebar-track.simplebar-vertical.simplebar-hover {width: 12px;}
.scrollbar .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {top: 0px; bottom: 0px; left: 0px; right: 0px; background: hsla(0,0%,0%,0.3); border-radius: 0px; opacity: 1; transition: opacity ease 240ms;}
.scrollbar .simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {opacity: 1;}

.scrollbar.mini .simplebar-track.simplebar-vertical {width: 9px; background: hsla(0,0%,0%,0.06);}
.scrollbar.mini .simplebar-track.simplebar-vertical.simplebar-hover {width: 9px;}
.scrollbar.mini .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {background: hsla(0,0%,0%,0.24); opacity: 1;}
.scrollbar.mini .simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {opacity: 1;}

.scrollbar.hide .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {opacity: 0;}
.scrollbar.hide .simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {opacity: 1;}



/**************** TIME CLOCK ****************//**************** TIME CLOCK ****************//**************** TIME CLOCK ****************/

.time-clock {width: 156px;}
.time-clock > div {
    width: 30px; height: 36px; margin: 0px 3px 0px 3px; font-weight: 700; font-size: 16px; line-height: 36px; text-align: center;
    color: var(--black); background: var(--bg-grey-light); border-radius: 6px;
}
.time-clock > div.col {width: 6px; color: var(--black); background: none; animation: clock-blink 1000ms infinite linear forwards;}
@keyframes clock-blink { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} }



/**************** MESSENGER ****************//**************** TIME CLOCK ****************//**************** TIME CLOCK ****************/

/*** POINTER ***/

.messenger-pointer {
    position: fixed; bottom: 36px; right: -360px; height: 66px; padding: 9px;
    border: solid 3px; border-color: var(--red); background: var(--white); border-radius: 18px;
    box-shadow: 0px 0px 36px -6px hsl(0,0%,0%,0.12);  transition: all ease 360ms; cursor: pointer; z-index: 1000;
}
.messenger-pointer.open {right: 36px;}
.messenger-pointer.open:hover {filter: brightness(1.12);}
.messenger-pointer .pointer {width: 42px; height: 42px; color: var(--white); background: var(--red); border-radius: 9px; animation: alarm-rotate 480ms infinite ease forwards;}
.messenger-pointer .pointer > i {display: block; font-size: 18px; line-height: 1; text-align: center;}
.messenger-pointer .text {display: none; padding: 2px 24px 0px 24px; font-weight: 800; font-size: 16px; line-height: 40px; text-transform: uppercase; letter-spacing: 1px; color: var(--red);}
.messenger-pointer .text.new {display: block;}

.messenger-pointer[data-count="0"] {border-color: var(--main);}
.messenger-pointer[data-count="0"] .pointer {background: var(--main); animation: none;}
.messenger-pointer[data-count="0"] .text {display: block; color: var(--main);}
.messenger-pointer[data-count="0"] .text.new {display: none;}

.messenger-pointer .sync {display: none;}
.messenger-pointer.sync {cursor: default; pointer-events: none;}
.messenger-pointer.sync > * {opacity: 0;}
.messenger-pointer.sync .sync {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1;}
.messenger-pointer.sync .sync > [class*='fa-'] {
    display: block; position: absolute; top: 50%; left: 20px; width: 30px; height: 30px; margin: -15px 0px 0px 0px;
    font-size: 22px; line-height: 30px; text-align: center; color: var(--red); animation: sync 1800ms infinite linear forwards;
}
.messenger-pointer[data-count="0"].sync .sync > [class*='fa-'] {color: var(--main);}

@media screen and (max-width: 750px) {
    .messenger-pointer.open {transform: translateX(calc(100% - 27px));}
}

/*** MESSENGER ***/

.messenger.fullscreen {
    display: none; position: fixed; bottom: 36px; right: -396px; width: 360px; height: 540px; max-height: calc(100% - 72px); min-height: 360px; padding: 62px 0px 78px 0px;
    background: var(--white); box-shadow: 0px 0px 36px -6px hsl(0,0%,0%,0.12);
    transition: right ease 360ms; overflow: hidden; z-index: 1000;
}
.messenger.fullscreen.open {right: 36px;}

.messenger .messenger-ttl {position: absolute; top: 0px; left: 0px; width: 100%; height: 62px; padding: 9px 54px 7px 18px; z-index: 10;}
.messenger .messenger-ttl .name {width: 96%; height: 26px; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.messenger .messenger-ttl .data {width: 100%; font-size: 14px; line-height: 20px; color: var(--grey);}
.messenger .messenger-close {position: absolute; top: 50%; right: 18px; width: 36px; height: 36px; margin-top: -18px; font-size: 20px; line-height: 38px; text-align: center; z-index: 10;}

.messenger .messages-wrap {width: 100%; height: 100%; background: var(--bg-main-light);}

.messenger .messages-wrap .scrollbar.mini .simplebar-track.simplebar-vertical {width: 6px; background: none;}
.messenger .messages-wrap .scrollbar.mini .simplebar-track.simplebar-vertical.simplebar-hover {width: 6px;}
.messenger .messages-wrap .scrollbar.mini .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {background: hsla(0,0%,0%,0.24); opacity: 0;}
.messenger .messages-wrap .scrollbar.mini .simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {opacity: 1;}

.messenger .messages-new-box {position: absolute; bottom: 24px; left: 0px; width: 100%; transform: translate(0px,6px); opacity: 0; pointer-events: none; transition: all ease 240ms; z-index: 100;}
.messenger.new .messages-new-box {transform: translate(0px,0px); opacity: 1; pointer-events: auto;}
.messenger .messages-new-btn {
    min-height: 36px; padding: 0px 24px 0px 24px; font-size: 14px; line-height: 36px; text-align: center;
    color: var(--white); background: hsla(0,0%,24%,0.84); border-radius: 36px; cursor: pointer;
}

.messenger .messages {
    display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: flex-end; -webkit-justify-content: flex-end; align-items: flex-start; -webkit-align-items: flex-start; align-content: flex-start; -webkit-align-content: flex-start;
    width: 100%; min-height: 400px; padding: 18px 0px 0px 0px;
}
.messenger .messages .message {
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    width: 100%; overflow: hidden;
}
.messenger .messages .message .mbox {max-width: 78%; padding: 0px 0px 18px 0px; overflow: hidden;}
.messenger .messages .message .mbox > span {display: block; padding: 0px 0px 6px 0px; font-weight: 400; font-size: 12px; line-height: 1; color: var(--grey); white-space: nowrap;}
.messenger .messages .message .mbox > div {
    max-width: 100%; min-height: 36px; padding: 8px 12px 8px 12px;
    font-weight: 400; font-size: 14px; line-height: 20px; white-space: pre-line;
    color: var(--black ); background: var(--white); box-shadow: 0px 3px 3px -3px hsla(0,0%,0%,0.3);
}
.messenger .messages .message .mbox > div:after {content: ''; display: block; position: absolute; top: 0px;} 

.messenger .messages .message.to {justify-content: flex-start; -webkit-justify-content: flex-start;}
.messenger .messages .message.to .mbox {padding-left: 18px;}
.messenger .messages .message.to .mbox > span {margin-left: -6px; text-align: left;}
.messenger .messages .message.to .mbox > div {float: left; background: var(--white); border-radius: 0px 6px 6px 6px;}
.messenger .messages .message.to .mbox > div:after {left: -6px; border: 3px solid transparent; border-top: 3px solid var(--white); border-right: 3px solid var(--white);}

.messenger .messages .message.from {justify-content: end; -webkit-justify-content: end;}
.messenger .messages .message.from .mbox {padding-right: 18px;}
.messenger .messages .message.from .mbox > span {margin-right: -6px; text-align: right;}
.messenger .messages .message.from .mbox > div {float: right; background: hsla(132,60%,90%); border-radius: 6px 0px 6px 6px;}
.messenger .messages .message.from .mbox > div:after {right: -6px; border: 3px solid transparent; border-top: 3px solid hsla(132,60%,90%); border-left: 3px solid hsla(132,60%,90%);}

.messenger .message-send {
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: flex-start; -webkit-justify-content: flex-start; align-items: flex-start; -webkit-align-items: flex-start; align-content: flex-start; -webkit-align-content: flex-start;

    position: absolute; bottom: 0px; left: 0px; width: 100%; height: 78px; padding: 12px; z-index: 10;
}
.messenger .message-send .textarea {flex: 1 1 auto; -webkit-flex: 1 1 auto;}
.messenger .message-send .textarea textarea {width: 100%; height: 52px; font-size: 14px; line-height: 20px; white-space: normal;}
.messenger .message-send .btn {width: 54px; min-height: 54px; margin: 0px 0px 0px 12px; padding: 0px 0px 0px 0px; background: var(--bg-main-light);}
.messenger .message-send .btn > [class*='fa-'] {width: 36px; height: 36px; font-size: 36px; line-height: 36px;}


@media screen and (max-width: 750px) {
    .messenger.fullscreen {bottom: 0px; right: -110%; width: 100%; height: 100%; min-height: 0px; max-height: 100%; border-radius: 0px;}
    .messenger.fullscreen.open {right: 0%;}
}