/*------ Normalise CSS ------*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* selectize */
.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder{visibility:visible!important;background:#f2f2f2!important;background:rgba(0,0,0,.06)!important;border:0!important;-webkit-box-shadow:inset 0 0 12px 4px #fff;box-shadow:inset 0 0 12px 4px #fff}.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{content:'!';visibility:hidden}.selectize-control.plugin-drag_drop .ui-sortable-helper{-webkit-box-shadow:0 2px 5px rgba(0,0,0,.2);box-shadow:0 2px 5px rgba(0,0,0,.2)}.selectize-dropdown-header{position:relative;padding:5px 8px;border-bottom:1px solid #d0d0d0;background:#f8f8f8;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}.selectize-dropdown-header-close{position:absolute;right:8px;top:50%;color:#303030;opacity:.4;margin-top:-12px;line-height:20px;font-size:20px!important}.selectize-dropdown-header-close:hover{color:#000}.selectize-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0 none;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.selectize-control.plugin-remove_button [data-value] .remove,.selectize-input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;display:inline-block}.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0 none}.selectize-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.selectize-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0 none}.selectize-control.plugin-remove_button [data-value]{position:relative;padding-right:24px!important}.selectize-control.plugin-remove_button [data-value] .remove{z-index:1;position:absolute;top:0;right:0;bottom:0;width:17px;text-align:center;font-weight:700;font-size:12px;color:inherit;text-decoration:none;vertical-align:middle;padding:2px 0 0;border-left:1px solid #0073bb;-webkit-border-radius:0 2px 2px 0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;box-sizing:border-box}.selectize-control.plugin-remove_button [data-value] .remove:hover{background:rgba(0,0,0,.05)}.selectize-control.plugin-remove_button [data-value].active .remove{border-left-color:#00578d}.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover{background:0 0}.selectize-control.plugin-remove_button .disabled [data-value] .remove{border-left-color:#aaa}.selectize-control.plugin-remove_button .remove-single{position:absolute;right:0;top:0;font-size:23px}.selectize-control,.selectize-input{position:relative}.selectize-dropdown,.selectize-input,.selectize-input input{color:#303030;font-family:inherit;font-size:13px;line-height:18px;-webkit-font-smoothing:inherit}.selectize-control.single .selectize-input.input-active,.selectize-input{background:#fff;cursor:text;display:inline-block}.selectize-input{border:1px solid #d0d0d0;padding:8px;width:100%;overflow:hidden;z-index:1;box-sizing:border-box;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 1px 1px rgba(0,0,0,.1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.selectize-control.multi .selectize-input.has-items{padding:5px 8px 2px}.selectize-input.full{background-color:#fff}.selectize-input.disabled,.selectize-input.disabled *{cursor:default!important}.selectize-input.focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.15);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}.selectize-input.dropdown-active{-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}.selectize-input>*{vertical-align:baseline;display:-moz-inline-stack;display:inline-block;zoom:1}.selectize-control.multi .selectize-input>div{cursor:pointer;margin:0 3px 3px 0;padding:2px 6px;background:#1da7ee;color:#fff;border:1px solid #0073bb}.selectize-control.multi .selectize-input>div.active{background:#92c836;color:#fff;border:1px solid #00578d}.selectize-control.multi .selectize-input.disabled>div,.selectize-control.multi .selectize-input.disabled>div.active{color:#fff;background:#d2d2d2;border:1px solid #aaa}.selectize-input>input{display:inline-block!important;padding:0!important;min-height:0!important;max-height:none!important;max-width:100%!important;margin:0 1px!important;text-indent:0!important;border:0!important;background:0 0!important;line-height:inherit!important;-webkit-user-select:auto!important;-webkit-box-shadow:none!important;box-shadow:none!important}.selectize-input>input::-ms-clear{display:none}.selectize-input>input:focus{outline:0!important}.selectize-input::after{content:' ';display:block;clear:left}.selectize-input.dropdown-active::before{content:' ';display:block;position:absolute;background:#f0f0f0;height:1px;bottom:0;left:0;right:0}.selectize-dropdown{position:absolute;z-index:10;border:1px solid #d0d0d0;background:#fff;margin:-1px 0 0;border-top:0 none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.1);-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}.selectize-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.selectize-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.selectize-dropdown .optgroup-header,.selectize-dropdown .option{padding:5px 8px}.selectize-dropdown .option,.selectize-dropdown [data-disabled],.selectize-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.selectize-dropdown [data-selectable].option{opacity:1}.selectize-dropdown .optgroup:first-child .optgroup-header{border-top:0 none}.selectize-dropdown .optgroup-header{color:#303030;background:#fff;cursor:default;padding-top:7px;font-weight:700;font-size:.85em}.selectize-dropdown .active{background-color:#f5fafd;color:#495c68}.selectize-dropdown .active.create{color:#495c68}.selectize-dropdown .create{color:rgba(48,48,48,.5)}.selectize-dropdown-content{overflow-y:auto;overflow-x:hidden;max-height:200px;-webkit-overflow-scrolling:touch}.selectize-control.single .selectize-input,.selectize-control.single .selectize-input input{cursor:pointer}.selectize-control.single .selectize-input.input-active,.selectize-control.single .selectize-input.input-active input{cursor:text}.selectize-control.single .selectize-input:after{content:' ';display:block;position:absolute;top:50%;right:15px;margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0;border-color:grey transparent transparent}.selectize-control.single .selectize-input.dropdown-active:after{margin-top:-4px;border-width:0 5px 5px;border-color:transparent transparent grey}.selectize-control.rtl.single .selectize-input:after{left:15px;right:auto}.selectize-control.rtl .selectize-input>input{margin:0 4px 0 -2px!important}.selectize-control .selectize-input.disabled{opacity:.5;background-color:#fafafa}.selectize-control.multi .selectize-input.has-items{padding-left:5px;padding-right:5px}.selectize-control.multi .selectize-input.disabled [data-value]{color:#999;text-shadow:none;background:0 0;-webkit-box-shadow:none;box-shadow:none}.selectize-control.multi .selectize-input.disabled [data-value],.selectize-control.multi .selectize-input.disabled [data-value] .remove{border-color:#e6e6e6}.selectize-control.multi .selectize-input.disabled [data-value] .remove{background:0 0}.selectize-control.multi .selectize-input [data-value]{text-shadow:0 1px 0 rgba(0,51,83,.3);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#1b9dec;background-image:-moz-linear-gradient(top,#1da7ee,#178ee9);background-image:-webkit-gradient(linear,0 0,0 100%,from(#1da7ee),to(#178ee9));background-image:-webkit-linear-gradient(top,#1da7ee,#178ee9);background-image:-o-linear-gradient(top,#1da7ee,#178ee9);background-image:linear-gradient(to bottom,#1da7ee,#178ee9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03);box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03)}.selectize-control.multi .selectize-input [data-value].active{background-color:#0085d4;background-image:-moz-linear-gradient(top,#008fd8,#0075cf);background-image:-webkit-gradient(linear,0 0,0 100%,from(#008fd8),to(#0075cf));background-image:-webkit-linear-gradient(top,#008fd8,#0075cf);background-image:-o-linear-gradient(top,#008fd8,#0075cf);background-image:linear-gradient(to bottom,#008fd8,#0075cf);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0)}.selectize-control.single .selectize-input{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.8);box-shadow:0 1px 0 rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.8);background-color:#f9f9f9;background-image:-moz-linear-gradient(top,#fefefe,#f2f2f2);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fefefe),to(#f2f2f2));background-image:-webkit-linear-gradient(top,#fefefe,#f2f2f2);background-image:-o-linear-gradient(top,#fefefe,#f2f2f2);background-image:linear-gradient(to bottom,#fefefe,#f2f2f2);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffefefe', endColorstr='#fff2f2f2', GradientType=0)}.selectize-control.single .selectize-input,.selectize-dropdown.single{border-color:#b8b8b8}.selectize-dropdown .optgroup{border-top:1px solid #f0f0f0}.selectize-dropdown .optgroup:first-child{border-top:0 none}


/*------ fonts ------*/
@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Light.woff2') format('woff2'),
    url('../fonts/Oxygen-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Bold.woff2') format('woff2'),
    url('../fonts/Oxygen-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Regular.woff2') format('woff2'),
    url('../fonts/Oxygen-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.woff2') format('woff2'),
    url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lucida Grande';
    src: url('../fonts/LucidaGrande-Bold.woff2') format('woff2'),
    url('../fonts/LucidaGrande-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Lucida Grande';
    src: url('../fonts/LucidaGrande.woff2') format('woff2'),
    url('../fonts/LucidaGrande.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*------ Main CSS ------*/

body {
    font-family: 'Oxygen';
    font-weight: 400;
}
a, a:hover{
    text-decoration: none;
}
input:focus, textarea:focus, select:focus, button:focus{
    outline: none;
}

/* LOGIN */
.login-wrapper {
    float: left;
    width: 100%;
    height: 100vh;
    background-size: cover;
    position: relative;
    background: #333F45;
}
.login-block {
    float: left;
    width:  510px;
    height: auto;
    min-height: 400px;
    padding: 44px 50px;
    background: #E9ECEE;
    border-radius: 4px;
    position:  absolute;
    left: calc(50% - 255px);
    top: calc(50% - 200px);
    -webkit-box-shadow:  0 0 10px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:  0 0 10px 0px rgba(0, 0, 0, 0.25);
    box-shadow:  0 0 10px 0px rgba(0, 0, 0, 0.25);
}
.login-brand-logo {
    float:  left;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}
.login-input-block {
    float:  left;
    width:  100%;
    margin-bottom: 20px;
}
.login-input-box {
    float:  left;
    width: 100%;
    border: 1px solid #b6c5ca;
    border-radius: 3px;
    height:  50px;
    line-height: 50px;
    font-size: 16px;
    color: #4a4a4a;
    padding: 0 20px;
    transition: .3s linear;
}
.login-input-box::placeholder, .login-input-box::-webkit-input-placeholder , .login-input-box::-moz-placeholder {
    color: #b6c5ca;
    transition: .3s linear;
}
.login-input-box.caution {
    border-color: #ff7575;
    transition: .3s linear;
}
.alert.alert-danger.alert-block {
    float:  left;
    width: 100%;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
}
.button-block {
    float:  left;
    width: 100%;
}
.general-button {
    float:  left;
    width: 100%;
    text-align:  center;
    background: #54A1D7;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    height:  50px;
    line-height: 50px;
    border-radius: 3px;
    transition: .3s linear;
    position: relative;
    border: 0;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.general-button.login {
    text-transform:  uppercase;
}
.general-button:hover {
    color: #fff;
    background: #2fa6de;
}
.login-input-box::placeholder {
    color: #bdbdbd;
}
.url-click {
    float: left;
    width: 100%;
    margin: 20px 0 0;
    text-align: center;
    color: #2fa6de;
    transition: .4s linear;
}
.url-click:hover {
    color: #29a7e2;
}
.icon-lib:before{
    content: "";
    display: inline-block;
    background: url(../images/sprite.svg) no-repeat;
}
.icon-lib-list{
    display: block;
    background: url(../images/sprite.svg) no-repeat;
}
.icon-lib-af:after{
    content: "";
    display: inline-block;
    background: url(../images/sprite.svg) no-repeat;
}

/* Header */

.header-block {
    float:  left;
    width: 100%;
    height: 70px;
    background-color: #FFFFFF;
    position: relative;
    z-index: 9;
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
}
.header-block-wrapper {
    float:  left;
    width:  100%;
    height: 70px;
    display:  flex;
    align-items:  center;
    justify-content: space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
}
.user-image {
    float: left;
    height: 40px;
    width: 40px;
    position: relative;
    padding-right: 60px;
    cursor: pointer;
}
.user-image img {
    float: left;
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.brand-logo {
    float:  left;
    width: 200px;
    height: 70px;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
}
.user-block {
    float:  left;
    position:relative;
}
.drop-ico:after {
    background-position: -105px -42px;
    width: 10px;
    height: 5px;
    display:  inline-block;
    position: absolute;
    top: calc(50% - 2.5px);
    right: 0;
}
.center-block {
    float:  left;
    width: calc(100% - 200px);
    padding: 0 22px;
    display:  flex;
    justify-content: space-between;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
}
.menu-toggle-button {
    background-position: -10px -40px;
    width: 16px;
    height: 12px;
}
.menu-toggle-button {
    background-color: transparent;
    border: 0;
    cursor:  pointer;
}
.user-info-block {
    float: left;
    display: inline-block;
    display: flex;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
}
.info-list {
    float:  left;
    margin-right: 45px;
}
.ind-info {
    float:  left;
    margin-left: 48px;
    position: relative;
}
.toggle-block {
    float:  left;
    display:  block;
}
.info {
    background-position: -35px -36px;
    width: 8px;
    height: 16px;
}
.message {
    background-position: -54px -36px;
    width: 16px;
    height: 16px;
}
.notification {
    background-position: -80px -36px;
    width: 16px;
    height: 16px;
}
.ind-info:first-child {
    margin-left: 0;
}
.new-alert:after {
    content:  "";
    width:  7px;
    height: 7px;
    background: #FF4A5D;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: -4px;
}
.info:hover {
    background-position: -35px -62px;
}
.message:hover {
    background-position: -54px -62px;
}
.notification:hover {
    background-position: -80px -62px;
}
.menu-toggle-button:hover {
    background-position: -10px -66px;
}

/* content-area*/

.content-area {
    float:  left;
    width: 100%;
    height: calc(100vh - 70px);
}
.conten-wrapper {
    float: left;
    width: 100%;
    height: 100%;
}
.side-content-area {
    float:  left;
    width: 200px;
    height: 100%;
    background-color: #333F45;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3), 1px -25px 10px 0 #D9E4EC;
    transition: .4s ease-out;
}
.right-content-area {
    float:  left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #E9ECEE;
    transition: .4s ease-out;
}
.side-menu-list {
    float:  left;
    width: 100%;
}
.side-menu-list .ind-menu {
    float: left;
    width: 100%;
    display:  block;
    transition: .3s linear;
}
.menu-block {
    float:  left;
    width:  100%;
    height:  62px;
    padding: 0 23px;
    display:  flex;
    align-items:  center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    font-size: 15px;
    line-height: 22px;
    color: #BBBBBB;
    position:  relative;
    transition: .3s linear;
}
.menu-block:hover{
    color: #FFFFFF;
    transition: .3s linear;
}
.side-menu-list .ind-menu:first-child {
    background-color: #1D262C;
}
.side-menu-list .ind-menu:hover, .side-menu-list .ind-menu.active {
    background-color: #54A1D7;
    transition: .3s linear;
    color: #fff;
}
.ind-menu.active .menu-block {
    color: #fff;
}
.overview-ico:before {
    background-position: -11px -7px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 15px;
}
.manage-ico:before {
    margin-right: 20px;
    background-position: -38px -6px;
    width: 12px;
    height: 18px;
}
.deploy-ico:before {
    background-position: -60px -8px;
    width: 16px;
    height: 16px;
    margin-right: 15px;
}
.measure-ico:before {
    margin-right: 14px;
    background-position: -266px -10px;
    width: 18px;
    height: 15px;
}
.resource-ico:before {
    background-position: -86px -8px;
    width: 16px;
    height: 16px;
    margin-right: 15px;
}
.admin-ico:before {
    background-position: -111px -8px;
    width: 16px;
    height: 16px;
    margin-right: 15px;
}
.ply-ico:before {
    background-position: -84px -114px;
    width: 15px;
    height: 14px;
    margin-right : 15px
}

.ind-menu:hover .ply-ico:before, .ind-menu.active:hover .ply-ico:before {
    background-position: -106px -114px;
}
.ind-menu:hover .overview-ico:before, .ind-menu.active .overview-ico:before {
    background-position: -141px -7px;
}
.ind-menu:hover .manage-ico:before, .ind-menu.active .manage-ico:before {
    background-position: -168px -6px;
}
.ind-menu:hover .deploy-ico:before, .ind-menu.active .deploy-ico:before {
    background-position: -190px -8px;
}
.ind-menu:hover .measure-ico:before, .ind-menu.active .measure-ico:before {
    background-position: -292px -10px;
}
.ind-menu:hover .resource-ico:before, .ind-menu.active .resource-ico:before {
    background-position: -216px -8px;
}
.ind-menu:hover .admin-ico:before, .ind-menu.active .admin-ico:before {
    background-position: -241px -8px;
}
.toggle-opener-block {
    float: left;
    width: 100%;
}
.toggle-opener-block.show {
    display: block;
}
.toggle-opener {
    float:  left;
    width: 100%;
    margin-bottom:15px;
}
.toggle-opener li {
    float: left;
    width: 100%;
}
.toggle-opener li  a {
    color: #BBBBBB;
    float:  left;
    width: 100%;
    font-size: 15px;
    line-height: 22px;
    padding: 7px 62px;
    transition: .3s linear;
    position:relative;
}
.toggle-opener li a:hover, .toggle-opener li .active {
    background-color: #54A1D7;
    color: #fff;
    transition: .3s linear;
}
.graphic-ico:before {
     content: "";
     display: inline-block;
     background: url(../images/sprite_3.svg) no-repeat;
     background-position: -124px -87px;
     width: 16px;
     height: 16px;
     /* margin-right: 15px; */
     position: absolute;
     top: 9px;
     left: 35px;
 }
.audio-ico:before {
    content: "";
    display: inline-block;
    background: url(../images/sprite_3.svg) no-repeat;
    background-position: -170px -87px;
    width: 16px;
    height: 16px;
    /* margin-right: 15px; */
    position: absolute;
    top: 9px;
    left: 35px;
}
.video-ico:before {
    content: "";
    display: inline-block;
    background: url(../images/sprite_3.svg) no-repeat;
    background-position: -147px -87px;
    width: 16px;
    height: 16px;
    /* margin-right: 15px; */
    position: absolute;
    top: 9px;
    left: 35px;
}
.ind-gallerymenu:hover .graphic-ico:before{
    background-position: -124px -108px;
}
.ind-gallerymenu:hover .audio-ico:before{
    background-position: -170px -108px;
}
.ind-gallerymenu:hover .video-ico:before{
    background-position: -147px -108px;
}
/* right area*/

.right-top-header {
    float: left;
    width: 100%;
    height: 60px;
    padding: 0 22px;
    background-color: #f1f2f4;
}
.right-bottom-area {
    float: left;
    width: 100%;
    height: calc(100vh - 130px);
    padding: 13px 22px;
    background-color: #E9ECEE;
    overflow-y: auto;
}
.right-top-header-wrap {
    float:  left;
    width:  100%;
    height: 60px;
    display:  flex;
    align-items:  center;
    justify-content:  space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
}
.page-title {
    float: left;
}
.page-title .subheader {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
}
.header-option-block {
    float:  left;
}
.header-option-list {
    float:  left;
    width:  100%;
}
.header-option-list li {
    float:  left;
    display:  inline-block;
    min-width: 105px;
    text-align:  center;
}
.header-option-list li .header-option {
    float:  left;
    width: 100%;
    color: #444444;
    font-size: 13px;
    line-height: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.delete-ico:before {
    background-position: -125px -36px;
    width: 16px;
    height: 16px;
    vertical-align:  middle;
    position:  relative;
    top: -2px;
    margin-right: 8px;
}
.addto-ico:before {
    background-position: -150px -38px;
    width: 16px;
    height: 12px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 10px;
}
.share-ico:before {
    background-position: -177px -36px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-right: 10px;
}
.join-ico:before {
    content: "\f066";
    font-family: 'FontAwesome';
    font-size: 18px;
    margin-right: 8px;
    position: relative;
    top: 2px;
}
.header-option-list li:hover .header-option {
    color: #54A1D7;
}
.header-option-list li:hover .delete-ico:before {
    background-position: -125px -62px;
}
.header-option-list li:hover .addto-ico:before {
    background-position: -150px -64px;
}
.header-option-list li:hover .share-ico:before {
    background-position: -177px -62px;
}
.filter-block {
    float:  left;
    width:  100%;
    display:  block;
    margin-bottom: 13px;
}
.filter-block-wrap {
    float:  left;
    width: 100%;
    display:  flex;
    align-items:  center;
    justify-content:  space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
}
.count-block {
    float:  left;
}
.count-txt {
    float:  left;
    color: #444444;
    font-family: Lato;
    font-size: 11px;
    line-height: 18px;
    text-transform:  uppercase;
}
.tot-count {
    font-family: Lato;
    font-size: 15px;
    line-height: 22px;
}
.sort-wraper label {
    float:  left;
    color: #444444;
    font-family: Lato;
    font-size: 11px;
    line-height: 15px;
    margin-right: 10px;
    text-transform:  uppercase;
}
.sort-wraper {
    float:  left;
    height: 34px;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
}
.custom-dropdown {
    float:  left;
    display:  flex;
    align-items:  center;
    justify-content: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    margin-right: 10px;
}
.search-block {
    float:  left;
    position:  relative;
    margin-left: 15px;
}
.search-box {
    float:  left;
    width: 200px;
    padding: 8px 36px 8px 20px;
    border: 1px solid #B4B4B4;
    border-radius: 5px;
    background: #e9ecee;
    height: 34px;
    color: #444444;
    font-family: Lato;
    font-size: 12px;
    line-height: 18px;
}
.search-ico:before {
    background-position: -93px -18px;
    width: 16px;
    height: 16px;
    position:  absolute;
    right: 15px;
    top: calc(50% - 8px);
}
.dropdown label {
    float:  left;
    color: #444444;
    font-family: Lato;
    font-size: 11px;
    line-height: 15px;
    margin-right: 10px;
    text-transform:  uppercase;
}
.custom-drop {
    float:  left;
    min-width:  100px;
    height: 34px;
    color: #444444;
    font-family: Oxygen;
    font-size: 13px;
    padding: 0 25px 0 10px;
    line-height: 16px;
    border: 1px solid #B4B4B4;
    border-radius: 5px;
    background-color: #e9ecee;
    cursor:  pointer;
    text-align:  left;
    transition: .3s linear;
}
.sort-wraper {
    float:  left;
    height: 34px;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
}
.custom-dropdown {
    float:  left;
    display:  flex;
    align-items:  center;
    justify-content: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    margin-right: 10px;
}
.search-block {
    float:  left;
    position:  relative;
}
.search-box {
    float:  left;
    width: 200px;
    padding: 8px 36px 8px 20px;
    border: 1px solid #B4B4B4;
    border-radius: 5px;
    background: #e9ecee;
    height: 34px;
    color: #444444 ;
    font-family: Lato;
    font-size: 12px;
    line-height: 18px;
    transition: .3s linear;
}
.search-box:hover, .search-box:focus, .search-block:hover .search-box {
    background: #fff;
    transition: .3s linear;
    border-color: #54A1D7;
}
.search-ico:before {
    background-position: -202px -36px;
    width: 16px;
    height: 16px;
    position:  absolute;
    right: -2px;
    top: calc(50% - 8px);
}
.search-btn {
    float:  left;
    width:  16px;
    height: 16px;
    cursor: pointer;
    position:  absolute;
    right: 15px;
    top: calc(50% - 8px);
    background:  transparent;
    border: 0;
}
.custom-dropdown .dropdown-menu {
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.custom-drop:hover, .custom-drop:focus {
    background-color: #fff;
    transition: .3s linear;
    border-color: #54A1D7;
    color: #444;
}
.custom-dropdown .dropdown-item {
    padding: 10px 20px;
    font-size: 14px;
    color: #4a4a4a;
    cursor:  pointer;
}
.custom-dropdown .dropdown-item:focus, .custom-dropdown .dropdown-item:hover {
    background: #54A1D7;
    color: #fff;
}
.custom-dropdown .dropdown-item:first-child {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.custom-dropdown .dropdown-item:last-child {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.custom-dropdown .dropdown-toggle::after {
    position: absolute;
    right: 10px;
    top: calc(50% - 1.94px);
}
.list-wrap {
    float:  left;
    width:  100%;
}
.list-container {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-wrap:  wrap;
    -ms-flex-wrap:  wrap;
}
.panel-block {
    float: left;
    width: calc((100% / 5) - 16px);
    min-height: 390px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px;
    background-color: #FFFFFF;
    transition: .3s linear;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    display:  flex;
    flex-wrap:  wrap;
    justify-content: space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-wrap:  wrap;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    position: relative;
    cursor: pointer;
    z-index: 8;
}
.panel-block.new-panel {
    background: #fff;
    border: 1px solid #41ada6;
    padding: 18px;
}
.panel-block:nth-child(5n) {
    margin-right: 0;
}
.panel-block:hover, .panel-block.panel-selected {
    box-shadow: 0 3px 10px 1px rgba(0,0,0,0.2);
    transition: .3s linear;
}
.image-upload-block {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 25px;
}
.image-up {
    float: left;
    width: 120px;
    height: 120px;
    position: relative;
    border: 1px solid #e6e8ea;
    border-radius: 50%;
    background: #e6e8ea;
}
.image-up img {
    float: left;
    width: 120px;
    height: 120px;
    object-fit:  cover;
    border-radius: 50%;
}
.add-button:before {
    background-position: -37px -88px;
    width: 16px;
    height: 16px;
    position:  absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    cursor:  pointer;
}
.add-button {
    float:  left;
    width:  40px;
    height: 40px;
    padding: 0;
    position:  relative;
    overflow:  hidden;
    cursor:  pointer;
    border: 0;
    background: #54A1D7;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.hidden-input {
    float:  left;
    width: 40px;
    height: 40px;
    opacity: 0;
}
.upload-select {
    float: left;
    position: absolute;
    right: 0;
    bottom: 0;
}
.title-wrapper {
    float: left;
    width: 100%;
    margin-bottom: 25px;
}
.title-box {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    color: #555555;
    font-family: Oxygen;
    font-size: 20px;
    font-weight: bold;
    line-height: 27px;
    text-align: center;
}
.title-box:focus {
    outline: none;
}
.title-box::placeholder, .title-box::-webkit-input-placeholder, .title-box::-moz-placeholder, .title-box::-ms-input-placeholder, .title-box::-moz-placeholder {
    color: #555555;
}
.bar {
    position: relative;
    display: block;
    width: 100%;
}
.bar:before, .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: -5px;
    position: absolute;
    background: #54A1D7;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
.bar:before {
    left: 50%;
}
.bar:after {
    right: 50%;
}
.title-box:focus ~ .bar:before, .title-box:focus ~ .bar:after {
    width: 50%;
}
.title-box:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}
.description-wrapper {
    float:  left;
    width: 100%;
    padding-bottom: 21px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    /* margin-bottom: 10px; */
}
.description-box {
    float:  left;
    width:  100%;
    border: 0;
    color: #AAAAAA;
    font-family: Lato;
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    transition: .3s linear;
    text-transform: uppercase;
}
.description-box::placeholder, .description-box::-webkit-input-placeholder , .description-box::-moz-placeholder {
    color: #AAAAAA;
}
.description-box:focus::placeholder {
    color: #54A1D7;
    transition: .3s linear;
}
.panel-button-block {
    float:  left;
    width:  100%;
    text-align:  center;
    display: flex;
}
.panel-button {
    float:  left;
    width: 100%;
    color: #444444;
    font-family: Oxygen;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    text-align: center;
    background:  transparent;
    border: 0;
    padding-bottom: 0;
    cursor: pointer;
    text-transform:  uppercase;
    transition: .3s linear;
}
.panel-button:hover {
    color: #54A1D7;
    transition: .3s linear;
}
.new-panel .panel-button-block {
    pointer-events:  none;
    opacity: .3;
}
.stat-header .subheader {
    color: #555555;
    font-family: "Lucida Grande";
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 10px;
    max-height:  60px;
    overflow: hidden;
    word-break: break-all;
}
.track-count-block {
    float:  left;
    width:  100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ind-track-count {
    width: 33.33%;
}
.track-text {
    float:  left;
    width: 100%;
    color: #AAAAAA;
    font-family: Lato;
    font-size: 11px;
    line-height: 15px;
    text-transform:  uppercase;
}
.ind-track-count h5 {
    float:  left;
    width:  100%;
    color: #555555;
    font-family: Oxygen;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
}
.ind-track-count.btn-track {
    display:  flex;
    align-items:  center;
    justify-content: flex-end;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: flex-end;
    -ms-justify-content: flex-end;
}
.edit-button {
    float: left;
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    background: #54A1D7;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.edit-button:before {
    background-position: -37px -88px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    cursor: pointer;
}
.track-table {
    float: left;
    width: 100%;
    margin-bottom: 22px;
}
.ind-track-table {
    float:  left;
    width: 100%;
    display:  flex;
    align-items: center;
    justify-content:  space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
}
.ind-track-table span {
    color: #AAAAAA;
    font-family: Lato;
    font-size: 11px;
    line-height: 15px;
    text-transform: uppercase;
}
.chart-block {
    float:  left;
    width: 100%;
    margin-bottom: 10px;
}
.chart-block img {
    width: 100%;
    float:  left;
}
.left-align .panel-button {
    text-align:  left;
}
.edit-title .title-box {
    color: #555555;
    font-family: Oxygen;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    resize:  none;
    max-height: 60px;
    overflow: hidden;
}
.title-wrapper.edit-title {
    margin-bottom: 6px;
}
.inactive .title-box {
    pointer-events: none;
}
.inactive .description-box {
    pointer-events: none;
}
.select-ico {
    background-position: -64px -85px;
    width: 20px;
    height: 20px;
    border: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
.selected, .select-ico:hover {
    background-position: -94px -85px;
}
.panel-col .image-upload-block {
    margin-bottom: 10px;
}
.preloader {
    float:  left;
    width:  100%;
    height: 100vh;
    background: #333F45;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    position:  absolute;
    left:  0;
    top: 0;
    z-index: 99;
}
.pre-image {
    -webkit-animation: fadein 2s linear 1 normal forwards;
}

@-webkit-keyframes fadein{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.skew .menu-block {
    font-size: 0;
}
.skew .side-content-area {
    width: 62px;
}
.skew .menu-block:before {
    margin: 0;
}
.skew .right-content-area {
    width: calc(100% - 62px);
}
.description-box:focus {
    color: #54A1D7;
}
.face.front, .face.back {
    position:  absolute;
    left:  0;
    top: 0;
    padding:  20px;
    background: #fff;
    width: 100%;
    height: 100%;
    display:  flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-wrap: wrap;
    border-radius: 5px;
}
.face.front{
    z-index: 9;
}
.face.back{
    z-index: 8;
}
.panel-block.panel-col.flip {
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
.panel-block.panel-col.flip .front {
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    z-index: 9;
}
.panel-block.panel-col.flip .back {
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    z-index: 1000;
}
/*gallery*/
.gallery-wrapper {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.ind-galler-list {
    float: left;
    width: calc((100% / 5) - 12px);
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    background: #fff;
    cursor: pointer;
    position: relative;
}
.gallery-thumb img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
}
.gallery-thumb {
    float: left;
    width: 100%;
   /* height: calc(100% - 40px);*/
}
.ind-galler-list:nth-child(4n) {
    margin-right: 15px;
}
.ind-galler-list:nth-child(5n) {
    margin-right: 0;
}
.gallery-modal .carousel-item img {
    height: 470px;
    object-fit: contain;
}
.gallery-modal-wrapper {
    background: #000;
}
.close.md-close {
    position: absolute;
    top: 0px;
    right: 0px;
    text-shadow: none;
    opacity: 1;
    color: #ffff;
    font-weight: 100;
    font-size: 25px;
    background: #4a4a4a;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff;
    line-height: 16px;
    z-index:9;
}
.close.md-close:before {
    content: "×";
    position: relative;
    top: -1px;
}
.file-down-gallery:before {
    content: "\f019";
    font-family: 'FontAwesome';
}
.file-info-gallery:before {
    content: "\f05a";
    font-family: 'FontAwesome';
    color: #54A1D7;
    background-color: #fff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    float: left;
}
.gallery-option {
    position: absolute;
    top: 30px;
    right: 30px;
}
.gallery-option button {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 25px;
    cursor: pointer;
}
.info-toggler-block {
    float: left;
    width: 350px;
    height: 100%;
    padding: 20px;
    background: #E9ECEE;
    position: absolute;
    top: 0;
    right: -350px;
    transition: .4s ease-out;
    box-shadow: 2px 0 7px 0 #000;
}
.gallery-modal .modal-body {
    overflow: hidden;
    padding: 0;
}
.info-toggler-block.active-in {
    right: 0;
}
.toggle-table tbody tr td {
    font-size: 12px;
    color: #adadad;
}
.toggle-table tbody tr td:last-child {
    font-weight: 600;
    color: #4a4a4a;
}
.toggle-table tbody tr:first-child td {
    border-top: 0;
}
.togller-inside-opt {
    float: left;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.togller-inside-opt button {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.toggle-close:before {
    content: "×";
    position: relative;
    top: -1px;
    font-size: 30px;
    font-weight: 100;
    opacity: 1;
    color: rgb(0, 0, 0);
}
.gallery-modal .modal-header {
    padding: 0;
    border: 0;
}
.ind-galler-list.active:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    border: 5px solid #41ada6;
    background: #ffffff7d;
    border-radius: 5px;
    top:0;
    left:0;
}
.gallery-wrapper audio.react-audio-player {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e1e1e1;
    background: #f0f2f4;
    pointer-events: none;
    transition: .4s ease-out;
}

.image-float .ind-galler-list.no-hov:before {
    content: none;
}
.ind-galler-list.no-hov:hover:after {
    opacity: 0;
}
.gallery-thumb .add-button {
    width: 60px;
    height: 60px;
}
.ind-galler-list.no-hov .gallery-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}
.new-button-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.new-button-block p {
    float: left;
    width: 100%;
    font-size: 14px;
    margin: 10px 0;
    color: #54A1D7;
}
.new-panel .gallery-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-close:before {
    content: "×";
    font-size: 29px;
    font-weight: 300;
    color: #41aca5;
}
.file-close {
    background: transparent;
    border: 0;
    padding: 0;
    position: absolute;
    top: 5px;
    right: 14px;
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
}
.player-static .file-close {
    opacity: 0;
    pointer-events: none;
}

/*more details*/
.right-content-area.single-slot {
    padding: 20px;
    overflow-y: auto;
}
.vignet-panel {
    float: left;
    width: 100%;
    height: 195px;
    padding: 40px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    margin-bottom: 20px;
}
.single-slot .page-title .subheader {
    color: #575757;
}
.right-content-area.single-slot .page-title {
    margin-bottom: 15px;
}
.vignet-panel {
    display: flex;
    justify-content: space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
}
.vignet-panel-left {
    display: flex;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    width: 60%;
}
.vignet-panel-thumb {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 40px;
}
.vignet-panel-thumb img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vignet-panel-info {
    float: left;
    width: calc(100% - 140px);
}
.vignet-panel-info .subheader {
    float: left;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: #575757;
    margin-bottom: 10px;
}
.vignet-panel-more-info {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}
.vignet-panel-more-info li {
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #b4b4b4;
    margin-right: 20px;
    font-family: 'Lucida Grande';
}
.vignet-panel-info p {
    float: left;
    width: 100%;
    line-height: normal;
}
.vignet-panel-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}
.statistics {
    display: flex;
    justify-content: flex-end;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: flex-end;
    -ms-justify-content: flex-end;
}
.st-header {
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #b4b4b4;
    margin-right: 20px;
    font-family: 'Lucida Grande';
    margin: 0;
    margin-bottom: 5px;
}
.st-num {
    float: left;
    font-size: 20px;
    font-weight: 600;
    color: #575757;
}
.trans-button {
    float: left;
    height: 32px;
    background: #fff;
    border: 1px solid #b4b4b4;
    border-radius: 17px;
    font-size: 14px;
    min-width: 106px;
    margin-left: 15px;
    cursor: pointer;
    transition: .4s ease-out;
}
.ind-st {
    float: left;
    display: flex;
    flex-direction: column;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    margin-left: 30px;
}
.st-button-block {
    float: left;
}
.trans-button:hover {
    background: #42ADA6;
    color: #fff;
    border: 1px solid #42ADA6;
}
.other-vignet-panel {
    float: left;
    width: 100%;
}
.other-vignet-panel-left {
    float: left;
    width: calc(100% - 250px);
    border-radius: 4px;
    margin-bottom: 20px;
}
.other-vignet-panel-right {
    float: left;
    width: 230px;
    margin-left: 20px;
}
.other-vignet-side-panel {
    float: left;
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    border-radius: 4px;
}
.side-panel-header {
    float: left;
    width: 100%;
    height: 50px;
    display: flex;
    background: #fbfbfb;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #ececec;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.side-panel-header .subheader {
    font-size: 15px;
}
.graph-plot {
    float: left;
    width: 100%;
    height: auto;
    padding: 20px;
    background: #fff;
    min-height: 397px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.graph-plot img {
    width: 100%;
    object-fit: cover;
}
.side-panel-content {
    float: left;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 50px);
    padding: 20px;
}
.related-link-block {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.related-link-block h5 {
    float: left;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    padding-left: 15px;
    margin-bottom: 15px;
    font-family: 'Lucida Grande';
}
.related-link-block h5:before {
    content: "";
    width: 8px;
    height: 8px;
    border: 2px solid #dedede;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}
.related-link-block ul {
    float: left;
    width: 100%;
    padding-left: 15px;
    margin-bottom: 38px;
}
.related-link-block ul li {
    float: left;
    width: 100%;
}
.related-link-block ul li a {
    float: left;
    color: #18a4a1;
    font-size: 14px;
    margin-bottom: 7px;
    transition: .4s ease-out;
}
.related-link-block ul li a:hover {
    color: #2ea6db;
}
.related-link-block ul li:last-child a {
    margin-bottom: 0;
}
.related-link-block:before {
    content: "";
    width: 2px;
    height: 100%;
    background: #f8f8f8;
    position: absolute;
    left: 2.6px;
    top: 8px;
}
.related-link-block:last-child ul {
    margin-bottom: 15px;
}
.graph-panel {
    float: left;
    width: 100%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.vignet-detail-panel .sort-wraper {
    float: left;
    width: 100%;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    margin: 10px 0;
}
.vignet-table thead tr th {
    background: #fafafa;
    border-top: 0;
    border-bottom: 1px solid #ececec;
    font-size: 11px;
    text-transform: uppercase;
    padding: 25px .75rem;
}
.vignet-table tbody tr td {
    background: #fff;
    border-top: 1px solid #ececec;
    padding: 16px .75rem;
}
.vignet-table {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.vignet-table thead tr:first-child th:first-child {
    border-top-left-radius: 4px;
    width: 4%;
}
.vignet-table tbody tr:first-child td:first-child {
    border-top: 0;
}
.vignet-table thead tr:first-child th:last-child {
    border-top-right-radius: 4px;
    font-weight: 600;
}
.vignet-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}
.vignet-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}
.vignet-table tbody tr td:last-child {
    font-weight: 600;
}
.check-wrapper {
    float: left;
    height: 20px;
    position: relative;
}
.check-lbl:before {
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #dedede;
    display: inline-block;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}
.check-input:checked + .check-lbl:after {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/tick.png) no-repeat;
    position: absolute;
    left: 4px;
    top: calc(50% - 5.5px);
    cursor: pointer;
}
.check-input {
    float: left;
    width: 20px;
    height: 20px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    cursor: pointer;
}
.check-lbl {
    float: left;
    width: 20px;
    height: 20px;
    z-index: 8;
    cursor: pointer;
}
.vignet-table tbody tr  td:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
}
.filter-btn {
    float: left;
    height: 35px;
    font-size: 13px;
    border-radius: 5px;
    padding: 0 20px;
    border: 1px solid #b4b4b4;
    background: transparent;
    margin-right: 20px;
    cursor: pointer;
    transition: .4s ease-out;
}
.filter-btn:hover {
    background: #54A1D7;
    color: #fff;
    border-color: #54A1D7;
}

/*modal*/
.vig-modal .modal-body {
    padding: 0;
}
.modal-content-wrapper {
    float: left;
    width: 100%;
    min-height: 450px;
}
.modal-content-left {
    float: left;
    width: 30%;
    height: 100%;
    min-height: 450px;
    padding: 15px;
}
.vignet-file-img {
    float: left;
    width: 100%;
    height: 150px;
    border-radius: 4px;
}
.vignet-file-img img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.modal-content-right {
    float: left;
    width: 70%;
    height: 100%;
    padding: 20px;
    background: #E9ECEE;
    min-height: 450px;
}
.vignet-file-option {
    float: left;
    width: 100%;
    margin: 20px 0;
}
.vignet-file-option li {
    float: left;
    width: 100%;
    text-align: center;
    margin: 5px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #efefef;
}
.vignet-file-option li a {
    font-size: 12px;
    text-transform: uppercase;
    color: #54A1D7;
    transition: .4s ease-out;
}
.vignet-file-option li a:hover {
    color: #4a4a4a;
}
.vig-modal .md-close {
    top: -10px;
    right: -10px;
}
.vignet-file-header {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.vignet-file-header-left {
    float: left;
}
.vignet-file-header-left h5 {
    float: left;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}
.vignet-file-header-left p {
    float: left;
    width: 100%;
    font-size: 14px;
    color: #a7a7a7;
}
.more-button {
    background: transparent;
    padding: 0;
    border: 0;
    font-size: 14px;
    cursor:pointer;
}
.vig-file-st {
    float: left;
    width: 100%;
    margin-bottom: 25px;
}
.ind-vig-file {
    float: left;
    width: calc(50% - 3px);
    height: 70px;
    padding: 10px;
    background: #fff;
    margin-right: 5px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    border-radius: 4px;
}
.ind-vig-file:nth-child(2n) {
    margin-right: 0;
}
.stand-bg {
    font-family: 'FontAwesome';
    width: 70px;
    height: 40px;
    position: absolute;
    background: #000;
    position: relative;
    display: block;
    width: 35px;
    height: 20px;
    background: #54A1D7;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    transition: .4s ease-out;
}
.stand-bg:before {
    content: "";
    font-family: 'FontAwesome';
    width: 70px;
    height: 40px;
    position: absolute;
    background: #54A1D7;
    transform: rotate(60deg);
    width: 55px;
    height: 30px;
    width: 70px;
    height: 40px;
    width: 35px;
    height: 20px;
}
.stand-bg:after {
    content: "";
    font-family: 'FontAwesome';
    width: 70px;
    height: 40px;
    position: absolute;
    background: #54A1D7;
    transform: rotate(-60deg);
    width: 55px;
    height: 30px;
    width: 35px;
    height: 20px;
}
.file-ico {
    float: left;
    margin-right: 15px;
    width: 35px;
    position: relative;
}
.view-ico:before {
    content: "\f06e";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.view-ico {
    position: absolute;
    left: calc(50% - 9px);
    top: calc(50% - 9px);
}
.file-info {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    margin-right: 15px;
}
.file-info-wrap {
    float: left;
    width: calc(100% - 55px);
    display: flex;
}
.stand-num {
    margin-bottom: 6px;
}
.view-text {
    text-transform: uppercase;
    color: #999;
}
.fb-ico:before {
    content: "\f09a";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.fb-ico {
    position: absolute;
    left: calc(50% - 4.5px);
    top: calc(50% - 8px);
}
.shares-ico:before {
    content: "\f064";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.shares-ico {
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 7px);
}
.wa-ico:before {
    content: "\f232";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.wa-ico {
    position: absolute;
    left: calc(50% - 6.5px);
    top: calc(50% - 8px);
}
.ind-vig-file:hover .stand-bg {
    transform: rotate(90deg);
}
.stand-bg.red {
    background: #e33244;
}
.stand-bg.red:before {
    background: #e33244;
}
.stand-bg.red:after {
    background: #e33244;
}
.stand-bg.blue {
    background: #177bbb;
}
.stand-bg.blue:before {
    background: #177bbb;
}
.stand-bg.blue:after {
    background: #177bbb;
}
.stand-bg.green {
    background: #1aae88;
}
.stand-bg.green:before {
    background: #1aae88;
}
.stand-bg.green:after {
    background: #1aae88;
}
.tag-block .selectize-control.multi .selectize-input [data-value] {
    background: #54A1D7;
    border-color: #54A1D7;
}
.tag-block .selectize-control.plugin-remove_button [data-value] .remove {
    border-left: 1px solid #54A1D7;
}
.tag-block .selectize-input {
    border: 1px solid #d2d2d2;
    box-shadow: none;
    border-radius: 4px;
}
.tag-block .selectize-control.plugin-remove_button [data-value] {
    padding-right: 17px !important;
}
.tag-block .selectize-control, .selectize-input {
    position: relative;
    float: left;
    width: 100%;
}
.tag-block {
    float: left;
    width: 100%;
}
.tag-block h5 {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #9e9e9e;
}
.split-panel .play-list-add-blck .ind-panel {
    width: calc((100% / 2) - 12px);
}
.split-panel .play-list-add-blck .ind-panel:nth-child(4n) {
    margin-right: 15px;
}
.split-panel .play-list-add-blck .ind-panel:nth-child(2n) {
    margin-right: 0;
}
.playlist-block li {
    width: calc((100% / 3) - 12px);
}
.playlist-block li:nth-child(5n) {
    margin-right: 15px;
}
.playlist-block li:nth-child(3n) {
    margin-right: 0;
}

/*share*/
.share-block {
    float: left;
    width: 100%;
    background: #fff;
    height: 115px;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.share-button {
    float: left;
    width: calc((100% / 6) - 10px);
    margin-right: 15px;
    height: 70px;
    background: #e9ecee;
    color: #8e8e8e;
    border: 0;
    font-size: 29px;
    cursor: pointer;
    transition: .4s ease-out;
    border-radius: 50%;
    border: 1px solid #e6e6e6;
}
.share-button.fb:before {
    content: "\f09a";
    font-family: 'FontAwesome';
    transition: .4s ease-out;
}
.share-button.fb:hover:before {
    color: #3B569D;
}
.share-button.wa:before {
    content: "\f232";
    font-family: 'FontAwesome';
    transition: .4s ease-out;
}
.share-button.wa:hover:before {
    color: #4DA735;
}
.share-button.email:before {
    content: "\f003";
    font-family: 'FontAwesome';
    transition: .4s ease-out;
}
.share-button.email:hover:before {
    color: #DC4D41;
}
.share-button.web:before {
    content: "\f121";
    font-family: 'FontAwesome';
    transition: .4s ease-out;
}
.share-button.web:hover:before {
    color: #F16426;
}
.share-button.qr:before {
    content: "\f029";
    font-family: 'FontAwesome';
    transition: .4s ease-out;
}
.share-button.qr:hover:before {
    color: #000;
}
.fb:hover {
    border-color: #3B569D;
}
.wa:hover {
    border-color: #4DA735;
}
.email:hover {
    border-color: #DC4D41;
}
.web:hover {
    border-color: #F16426;
}
.qr:hover {
    border-color: #000;
}

/* playlist */
.ind-collection {
}
.collection-container {
    float: left;
    width: 100%;
}
.ind-collection {
    float: left;
    width: calc((100% / 5) - 21px);
    height: 300px;
    margin-right: 25px;
    margin-bottom: 25px;
}
.collections {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
}
.collections:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 4px 0px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
}
.collections-section {
    padding: 3rem 0;
}
.collections .collections__inner {
    position: relative;
    background: #ffffff;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 4px 0px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    z-index: 9;
}
.collections__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.collections__details {
    padding: 10px;
    float: left;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.collections__details h3 {
    font-size: 16px;
    color: #888;
    font-weight: 400;
    margin: 0 0 10px;
}
.collections__actions {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}
.collections__actions li {
    margin-left: 16px;
    color: #999;
    font-size: 16px;
}
.collections:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 4px 0px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
}
.collections__image {
    width: 100%;
    height: 240px;
}
.ind-collection:nth-child(5n) {
    margin-right: 0;
}
.collections__details h5 {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #333f45;
}
.fa-trash-o {
    color: #ff7272;
}
.fa-pencil {
    color: #ffb644;
}
.fa.fa-eye {
    color: #09ad79;
}
.new-panel .add-ico {
    width: 50px;
    height: 50px;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 44px;
    border-radius: 10px;
    margin: 0 auto;
    position: relative;
}
.new-panel .collections__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ind-collection.new-panel .add-new-button label {
    margin-bottom: 10px;
}
.new-panel .add-ico:before {
    content: "+";
    height: 22px;
    position: absolute;
    left: calc(50% - 12px);
    top: calc(50% - 25px);
}

/*playlist modal*/

.vig-ico:before {
    content: "\f016";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.vig-ico {
    position: absolute;
    left: calc(50% - 7px);
    top: calc(50% - 8px);
}
.input-block {
    float: left;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    position: relative;
}
.input-box {
    float: left;
    width: 100%;
    height: 100%;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    padding: 0 15px;
    font-size: 14px;
    color: #4a4a4a;
    padding-left: 50px;
}
.playlist-form-area {
    float: left;
    width: 100%;
    min-height: 248px;
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.url-ic:before {
    content: "\f0c1 ";
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #828282;
}
.url-ic {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfd;
    border: 1px solid #d2d2d2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.mail-ic {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfd;
    border: 1px solid #d2d2d2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.mail-ic:before {
    content: "\f0e0";
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #828282;
}
.textarea {
    float: left;
    width: 100%;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    resize: none;
    height: 70px;
    padding: 10px 10px;
    font-size: 14px;
    color: #4a4a4a;
}
.playlist-form-button {
    float: left;
    width: 100%;
    text-align: right;
}
.gen-button {
    float: right;
    height: 35px;
    background: #1aae88;
    border: transparent;
    color: #fff;
    font-size: 14px;
    padding: 0 25px;
    border-radius: 4px;
    cursor: pointer;
}
.text-block {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
.input-box::placeholder, .textarea::placeholder {
    color: #bfbfbf;
}

/*play-list edit*/

.back-ico:before {
    content: "\f053";
    font-family: 'FontAwesome';
    margin-right: 9px;
    color: #4a4a4a;
    font-weight: 100;
    font-size: 12px;
    transition: .4s ease-out;
}
.back-ico:hover:before {
    color: #fff;
    transition: .4s ease-out;
}
.Playlist-container {
    float: left;
    width: 100%;
}
.back-to-list {
    float: left;
    width: 100%;
    margin-bottom: 15px;
}
.ind-playlist-container {
    float: left;
    width: 100%;
}
.ind-playlist-editor {
    float: left;
    width: calc((100% / 5) - 12px);
    height: 100px;
    background: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    transition: .4s ease-out;
    position: relative;
}
.ind-playlist-editor:nth-child(5n) {
    margin-right: 0;
}
.play-img {
    float: left;
    width: 100px;
    height: 100px;
}
.play-img img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.play-desc {
    float: left;
    width: calc(100% - 100px);
    height: 100%;
    padding: 10px;
    padding-bottom: 32px;
    position: relative;
}
.play-desc .subheader {
    float: left;
    width: 100%;
    color: #54A1D7;
    font-size: 14px;
    font-weight: 600;
}
.play-option {
    float: left;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.play-option button {
    float: right;
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 10px;
    cursor: pointer;
    transition: .4s ease-out;
}
.view-play-button:before {
    content: "\f06e";
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #ccc;
    transition: .4s ease-out;
}
.add-play-button:before {
    content: "\f055";
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #ccc;
    transition: .4s ease-out;
}
.ind-playlist-editor:hover {
    box-shadow: 0 3px 10px 1px rgba(0,0,0,0.2);
}
.ind-playlist-editor:hover .add-play-button:before {
    color: #2fa6de;
}
.ind-playlist-editor:hover .view-play-button:before {
    color: #09ad79;
}
.playlist-side-panel {
    float: left;
    width: 250px;
    height: calc(100vh - 203px);
    margin-right: 15px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.split-panel .playlist-right-panel {
    float: left;
    width: calc(100% - 265px);
    height: calc(100vh - 203px);
}
.right-content-area.no-scroll {
    overflow: hidden;
    padding: 20px;
}
.split-panel .ind-playlist-container {
    float: left;
    width: 100%;
    height: calc(100vh - 253px);
    overflow-y: auto;
}
.playlist-side-header {
    float: left;
    width: 100%;
    height: 45px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #e7e7e7;
}
.header-input {
    float: left;
    width: 100%;
    height: 30px;
    background: #e9ecee;
    border: 1px solid #dedede;
    border-radius: 29px;
    position: relative;
    padding: 0 25px 0 6px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: auto;
}
.input-option {
    float: left;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: absolute;
    right: 22px;
    top: calc(50% - 9px);
    transition: .4s ease-out;
}
.save {
    opacity: 1;
    pointer-events: auto;
}
.modify:before {
    content: "\f040";
    font-family: 'FontAwesome';
    color: #ffb644;
    font-size: 14px;
}
.modify {
    opacity: 0;
    pointer-events: none;
}
.save:before {
    content: "\f0c7";
    font-family: 'FontAwesome';
    color: #09ad79;
    font-size: 14px;
}
.inactive .header-input {
    border-color: transparent;
    pointer-events: none;
}
.inactive .save {
    opacity: 0;
    pointer-events: none;
}
.inactive .modify {
    opacity: 1;
    pointer-events: auto;
}
.added-block {
    float: left;
    width: 100%;
    height: calc(100% - 45px);
    padding: 15px 23px !important;
    overflow-y: auto;
}
.ind-added {
    float: left;
    width: 100%;
    height: 30px;
    padding: 0px !important;
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
    padding-right: 30px !important;
    border-bottom: 1px solid #e7e7e7;
    position: relative;
}
.ind-added p {
    float: left;
    width: 100%;
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #54A1D7;
}
.remover-button {
    float: left;
    background: transparent;
    padding: 0;
    border: 0;
    position: absolute;
    right: 0;
    cursor: pointer;
}
.remover-button:before {
    content: "\f014";
    font-family: 'FontAwesome';
    color: #e7e7e7;
    font-size: 14px;
    transition: .4s ease-out;
}
.ind-added:hover .remover-button:before {
    color: #ff7272;
}
.ind-added:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}
.inactive .header-input {
    background: #fff;
}
.added-thumb {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    position: absolute;
    top: -3px;
    left: 0;
}
.added-thumb img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.header-text-added {
    float: left;
    width: 100%;
    position: relative;
    padding-left: 30px;
}

/* Vignet edit  modal */
.file-ic:before {
    content: "\f15b";
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #828282;
}
.file-ic {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfd;
    border: 1px solid #d2d2d2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.date-ic {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfd;
    border: 1px solid #d2d2d2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.date-ic:before {
    content: "\f073";
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #828282;
}
.user-ic {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfcfd;
    border: 1px solid #d2d2d2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.user-ic:before {
    content: "\f007";
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #828282;
}
.ind-playlist-editor.active:before {
    content: "";
    position: absolute;
    font-size: 24px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}
.ind-playlist-editor.active:after {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    font-size: 14px;
    right: 10px;
    top: 8px;
    width: 22px;
    height: 23px;
    background: #1aae88;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pl_list_add {
    display: none;
}
.alert {
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.alert-success {
    color: #ffffff;
    background-color: #3b996e;
    border-color: #354052;
}
.alert-danger {
    color: #fff;
    background-color: #e66d6d;
    border-color: #e66d6d;
}

.playlist-container {
    float: left;
    width: 100%;
    height: calc(100vh - 80px);
    padding: 15px;
}

.playlist-list-block {
    float: left;
    width: 100%;
    padding: 0;
}

.ind-play-list {
    float: left;
    display: inline-block;
    width: calc((100% / 4) - 12px);
    margin-right: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
}


.ind-play-list-container {
    float: left;
    width: 100%;
}

.ind-play-list-img {
    float: left;
    width: 100%;
    height: 250px;
}

.ind-play-list-img img {
    float: left;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 100%;
    object-fit: cover;
}

.ind-play-list:nth-child(5n) {
    margin-right: 15px;
}
.ind-play-list:nth-child(4n) {
    margin-right: 0;
}

.ind-play-list-text {
    float: left;
    width: 100%;
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 1px solid #ccc;
}

.ind-play-list-text .subheader {
    float: left;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.play-header-block {
    float: left;
    width: 100%;
    padding: 15px 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.play-header-blockk h4 {
    float: left;
    width: auto;
    font-size: 23px;
    color: #4a4a4a;
}
.general_button {
    float: left;
    background: #256f85;
    color: #fff;
    border: 0;
    padding: 6px 15px;
    border-radius: 5px;
}
.general_button:before {
    content: "\f060";
    font-family: 'FontAwesome';
    color: #fff;
    margin-right: 10px;
    font-size: 12px;
}
.video-react .video-react-big-play-button {
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    left: calc(50% - 45px);
    top: calc(50% - 22.5px);
}
.gallery-modal-wrapper .video-react .video-react-big-play-button {
    left: calc(50% - 45px);
    top: calc(50% - 22.5px);
}
.gallery-modal-wrapper .video-react .video-react-poster {
    background-size: cover;
}
.player-static:before {
    content: "\f144";
    width: 34px;
    height: 34px;
    float: left;
    font-family: 'FontAwesome';
    font-size: 34px;
    color: #22aca5;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(50% - 17px);
    top: calc(50% - 17px);
    border-radius: 50%;
    z-index: 9;
}
.player-static:after {
    content: "";
    background: rgba(0, 0, 0, 0.40);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
}
.gallery-wrapper .player-static audio.react-audio-player {
    opacity: 0;
}
.gallery-wrapper audio.react-audio-player {
    opacity: 1;
    pointer-events: auto;
}
.ng-dirty {
    border-color: red;
    outline-color: red;
}
.bootstrap-tagsinput {
    width:100%;
}
#vig-search-ctr {
    display: none;
}
.button-blk.view-vig-ctr.dis-view {
    float: left;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 12px 12px;
}
.button-blk.view-vig-ctr.dis-view button {
    min-width: 20px;
    height: 20px;
    float: right;
}

.added-sub .new-button-block {
    float: left;
    width: 100%;
    height: 100%;
}
.added-sub .new-button-block p {
    text-align: center;
}
.gallery-modal .carousel-control-next, .gallery-modal .carousel-control-prev {
    top: calc(50% - 75px);
    height: 150px;
}
.create-button {
    width: 70px;
    height: 70px;
    background: #41ada6;
    position: fixed;
    bottom: 20px;
    right: 35px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px 0 #00000087;
}
.create-button:before {
    content: "\f067";
    font-family: 'FontAwesome';
    font-size: 23px;
    color: #fff;
    font-weight: 100;
    position: absolute;
    left: calc(50% - 9px);
    top: calc(50% - 11.5px);
}

.login_container {
    padding: 2%;
    background: #f0f0f0;
    width: 480px;
    margin: 10% auto;
    border-radius: 8px;
}
.fgt_pwd {
    margin: 3%;
}
.back-block {
    float: left;
    width: 100%;
    margin-bottom: 15px;
}
.back-list {
    background: #54A1D7;
    color: #fff;
    font-size: 14px;
}
.react-confirm-alert-body {
    border: 1px solid #ccc !important;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2) !important;
    font-family: 'Oxygen' !important;
    color: #4a4a4a !important;
}
.react-confirm-alert-body>h1 {
    float: left !important;
    width: 100% !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
    font-weight: 600 !important;
    color: #54A1D7 !important;
}
.react-confirm-alert-button-group>button {
    background: #54A1D7 !important;
    color: #fff !important;
    font-size: 14px !important;
    border-radius: 4px !important;
}
.vignet-header {
    background: #333f44;
    color: #fff;
}
.vignet-header .close {
    text-shadow: none;
    opacity: 1;
    color: #fff;
    font-weight: 100;
}
.vig-mod .form-group label {
    padding: 0;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    font-weight: 600;
    color: #929292;
    font-size: 14px;
}
.vig-mod .form-control {
    /* background-color: #fff; */
    font-size: 14px;
    background: white;
}
.vig-mod .form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: #ced4da;
}
.vig-mod .form-control::placeholder {
    color: #ced4da;
    text-shadow: none;
}
.form-group button {
    margin-left: 10px;
}

.form-group button:focus {
    outline: none;
    box-shadow: none;
}
.button-gp {
    margin-bottom: 0;
}
.form-group {
    float: left;
    width: 100%;
}
.modal-footer .form-group {
    float: right;
    width: auto;
}

/****************Playlist ***************/

.right-panel-block {
    float: left;
    width: 100%;
    height: calc(100% - 82px);
    position: relative !important;
    padding: 15px;
}
.playlist-block {
    float: left;
    width: 100%;
    padding: 0;
    list-style-type: none;
}
.panel-new {background: #fff;box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;}

.playlist-block li {
    float: left;
    width: calc((100% / 5) - 12px);
    height: 350px;
    margin-right: 15px;
    transition: .3s ease-out;
    border-radius: 5px;
    cursor: pointer;
}
.playlist-block li:nth-child(5n) {
    margin-right: 0;
}
.panel-new:hover {
    box-shadow: 0 3px 10px 1px rgba(0,0,0,0.2);
}
.add-new-button {
    float: left;
    width: 75px;
    height: 75px;
}
.add-new-button label {
    float: left;
    font-size: 12px;
    color: #9d9d9d;
    width: 100%;
    text-align: center;
}
.add-ico {
    width: 50px;
    height: 50px;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 44px;
    border-radius: 10px;
    margin: 0 auto;
}
.added-play-list {
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
}
.added-sub {
    float: left;
    width: 95%;
    height: 95%;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    border-radius: 5px;
    position: absolute;
}
.added-sub.bot {
    bottom: 0;
    z-index: 7;
    right: 0;
}
.added-sub.mid {
    bottom: 8px;
    z-index: 8;
    right: 8px;
}
.added-sub.top {
    left: 0;
    top: 0;
    z-index: 9;
}
.added-sub-img {
    float: left;
    width: 100%;
    height: calc(100% - 60px);
    border-bottom: 1px solid #e8e8e8;
}
.added-sub-img img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.added-sub-opt {
    float: left;
    width: 100%;
    height: 60px;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.added-sub-opt .subheader {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #4a4a4a;
}
.opt-wrapper {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.opt-left {
    float: left;
    height: auto;
}
.opt-block {
    float: left;
    display: inline-block;
    padding: 0;
}
.opt-block li {
    float: left;
    width: auto;
    height: auto;
    display: inline-block;
    margin-right: 0;
    line-height: 14px;
    margin-left: 15px;
}
.view:before {
    content: "\f06e";
    font-family: 'FontAwesome';
}
.docs:before {
    content: "\f016";
    font-family: 'FontAwesome';
    margin-right: 5px;
}
.full-screen:before {
    content: "\f0b2";
    font-family: 'FontAwesome';
}
.edit:before {
    content: "\f040";
    font-family: 'FontAwesome';
}
.delete:before {
    content: "\f014";
    font-family: 'FontAwesome';
}
.opt-block li:first-child {
    margin-left: 0;
}
.opt-block .opt-icon {
    color: #8f8f8f;
    font-size: 14px;
    transition: .3s ease-out;
}
.opt-icon.delete:hover {
    color: #f66868;
}
.opt-icon.edit:hover {
    color: #efb932;
}
.opt-icon.full-screen:hover {
    color: #354052;
}
.playlist-block .added-list-play {
    margin-bottom: 15px;
}
/*list*/

.play-list-add-wrapper {
    float: left;
    width: 100%;
    height: 100%;
}
.play-list-add-blck {
    float: left;
    width: 100%;
    height: calc(100vh - 162px);
    padding: 0;
    list-style-type: none;
    overflow-y: auto;
}
.play-list-add-blck .ind-panel {
    float: left;
    width: calc((100% / 5) - 12px);
    height: 112px;
    margin-right: 15px;
    margin-bottom: 15px;
    background: #fff;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}
.vig-entries.active:before {
    content: "";
    position: absolute;
    font-size: 24px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}
.vig-entries.active:after{
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    font-size: 14px;
    right: 10px;
    top: 8px;
    width: 22px;
    height: 23px;
    background: #1aae88;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.play-list-add-blck .ind-panel:nth-child(5n) {
    margin-right: 0;
}
.play-list-panel-block {
    float: left;
    width: 100%;
    height: 100%;
}
.play-list-left {
    float: left;
    width: 110px;
    height: 110px;
    border-right: 1px solid #cdcdcd;
}
.play-list-left img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.play-list-right {
    float: left;
    width: calc(100% - 110px);
    height: 100%;
    padding: 15px;
    position: relative;
}
.play-list-right .subheader {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    max-height: 30px;
    overflow: hidden;
}
.playlist-add-button {
    background: transparent;
    border: 0;
    padding: 0;
    float: left;
    position: relative;
    padding-left: 25px;
    color: #788288;
    cursor: pointer;
}
.playlist-view-button {
    background: transparent;
    border: 0;
    padding: 0;
    float: left;
    position: relative;
    padding-left: 25px;
    color: #788288;
    cursor: pointer;
}
.playlist-add-button:before {
    content: "\f055";
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'FontAwesome';
    color: #788288;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
}

.playlist-view-button:before {
    content: "\f06e";
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'FontAwesome';
    color: #788288;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
}
.playlist-sv-button {
    background: transparent;
    border: 0;
    padding: 0;
    float: left;
    position: relative;
    padding-left: 25px;
    color: #788288;
    cursor: pointer;
}
.playlist-sv-button:before {
    content: "\f058";
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'FontAwesome';
    color: #1aae88;
    font-size: 21px;
    font-weight: 400;
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
}
.playlist-sv-button:focus {
    outline: none;
}
.playlist-add-button:hover, .playlist-add-button:hover:before {
    color: #3b996e;
}
.button-blk {
    float: left;
    position: absolute;
    right: 15px;
    bottom: 15px;
}
.button-blk.view-vig-ctr {
    right: 80px;
}
.play-list-pnl-wrapper {
    float: left;
    width: 325px;
    height: 100%;
    height: calc(100vh - 112px);
    background: #fff;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    margin-right: 15px;
}
.split-panel .play-list-add-wrapper {
    width: calc(100% - 340px);
    float: left;
}
.split-panel .play-list-add-blck .ind-panel {
    width: calc((100% / 4) - 15px);
}
.split-panel .play-list-add-blck .ind-panel:nth-child(5n) {
    margin-right: 15px;
}
.play-list-pnl-header {
    float: left;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #cdcdcd;
    background: #fff;
}
.play-list-pnl-header .subheader {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
    color: #4a4a4a;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
}
.play-list-pnl-list {
    float: left;
    width: 100%;
    height: calc(100vh - 164px);
    max-height: calc(100vh - 164px);
    overflow-y: auto;
    padding: 15px;
    background: #fff
}
.play-list-pnl-list-blk {
    float: left;
    width: 100%;
    padding: 0;
    list-style-type: none;
}
.left-pan-content {
    float: lw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.left-pan-content .subheader {
    margin: 0;
}
.ind-list-pnl-list {
    float: left;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 10px;
    margin-bottom: 10px;
    cursor: move;
}
.remove-button-panel {
    background: transparent;
    border: 0;
    padding: 0;
    float: left;
    position: relative;
}
.remove-button-panel:before {
    content: "\f056";
    font-family: 'FontAwesome';
    font-size: 14px;
    height: 21px;
    color: #e66d6d;
}
.pan-title-left {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
}
.img-blk {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #cdcddc;
    margin-right: 10px;
}
.img-blk img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.play-list-pnl-header .subheader:focus, .playlist-add-button:focus, .remove-button-panel:focus  {
    outline: none;
}
.play-list-pnl-header .subheader.inactive {
    pointer-events: none;
    border: 1px solid transparent;
}
.playlist-close-button:before {
    content: "\f044";
    font-family: 'FontAwesome';
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'FontAwesome';
    color: #f7c726;
    font-size: 23px;
    font-weight: 400;
    left: 0;
    top: calc(50% - 10px);
}
.playlist-close-button {
    background: transparent;
    border: 0;
    padding: 0;
    float: left;
    position: relative;
    color: #e66d6d;
    cursor: pointer;
}
.title-opt {
    float: left;
}
.title-opt button {
    float: left;
    display: flex;
    width: 20px;
    height: 20px;
    margin-left: 8px;
}
.footer-block-button {
    float: left;
    width: 100%;
    border-top: 1px solid #bababa;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/*more details*/
.right-content-area.single-slot {
    padding: 20px;
    overflow-y: auto;
}
.vignet-panel {
    float: left;
    width: 100%;
    height: 195px;
    padding: 40px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    margin-bottom: 20px;
}
.single-slot .page-title .subheader {
    color: #575757;
}
.right-content-area.single-slot .page-title {
    margin-bottom: 15px;
}
.vignet-panel {
    display: flex;
    justify-content: space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
}
.vignet-panel-left {
    display: flex;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    width: 60%;
}
.vignet-panel-thumb {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 40px;
}
.vignet-panel-thumb img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vignet-panel-info {
    float: left;
    width: calc(100% - 140px);
}
.vignet-panel-info .subheader {
    float: left;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: #575757;
    margin-bottom: 10px;
}
.vignet-panel-more-info {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}
.vignet-panel-more-info li {
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #b4b4b4;
    margin-right: 20px;
    font-family: 'Lucida Grande';
}
.vignet-panel-info p {
    float: left;
    width: 100%;
    line-height: normal;
}
.vignet-panel-right {
    /* text-align: right; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}
.statistics {
    display: flex;
    justify-content: flex-end;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: flex-end;
    -ms-justify-content: flex-end;
}
.st-header {
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #b4b4b4;
    margin-right: 20px;
    font-family: 'Lucida Grande';
    margin: 0;
    margin-bottom: 5px;
}
.st-num {
    float: left;
    font-size: 20px;
    font-weight: 600;
    color: #575757;
}
.trans-button {
    float: left;
    height: 32px;
    background: #fff;
    border: 1px solid #b4b4b4;
    border-radius: 17px;
    font-size: 14px;
    min-width: 106px;
    margin-left: 15px;
    cursor: pointer;
    transition: .4s ease-out;
}
.ind-st {
    float: left;
    display: flex;
    flex-direction: column;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    margin-left: 30px;
}
.st-button-block {
    float: left;
}
.trans-button:hover {
    background: #42ADA6;
    color: #fff;
    border: 1px solid #42ADA6;
}
.other-vignet-panel {
    float: left;
    width: 100%;
}
.other-vignet-panel-left {
    float: left;
    width: calc(100% - 250px);
    border-radius: 4px;
    margin-bottom: 20px;
}
.other-vignet-panel-right {
    float: left;
    width: 230px;
    margin-left: 20px;
}
.other-vignet-side-panel {
    float: left;
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    border-radius: 4px;
}
.side-panel-header {
    float: left;
    width: 100%;
    height: 50px;
    display: flex;
    background: #fbfbfb;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #ececec;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.side-panel-header .subheader {
    font-size: 15px;
}
.graph-plot {
    float: left;
    width: 100%;
    height: auto;
    padding: 20px;
    background: #fff;
    min-height: 397px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.graph-plot img {
    width: 100%;
    object-fit: cover;
}
.side-panel-content {
    float: left;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 50px);
    padding: 20px;
}
.related-link-block {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.related-link-block h5 {
    float: left;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    padding-left: 15px;
    margin-bottom: 15px;
    font-family: 'Lucida Grande';
}
.related-link-block h5:before {
    content: "";
    width: 8px;
    height: 8px;
    border: 2px solid #dedede;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}
.related-link-block ul {
    float: left;
    width: 100%;
    padding-left: 15px;
    margin-bottom: 38px;
}
.related-link-block ul li {
    float: left;
    width: 100%;
}
.related-link-block ul li a {
    float: left;
    /*width: 100%;*/
    color: #18a4a1;
    font-size: 14px;
    margin-bottom: 7px;
    transition: .4s ease-out;
}
.related-link-block ul li a:hover {
    color: #2ea6db;
}
.related-link-block ul li:last-child a {
    margin-bottom: 0;
}
.related-link-block:before {
    content: "";
    width: 2px;
    height: 100%;
    background: #f8f8f8;
    position: absolute;
    left: 2.6px;
    top: 8px;
}
.related-link-block:last-child ul {
    margin-bottom: 15px;
}
.graph-panel {
    float: left;
    width: 100%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.vignet-detail-panel .sort-wraper {
    float: left;
    width: 100%;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    margin: 10px 0;
}
.vignet-table thead tr th {
    background: #fafafa;
    border-top: 0;
    border-bottom: 1px solid #ececec;
    font-size: 11px;
    text-transform: uppercase;
    padding: 25px .75rem;
}
.vignet-table tbody tr td {
    background: #fff;
    border-top: 1px solid #ececec;
    /* font-size: 14px; */
    padding: 16px .75rem;
}
.vignet-table {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    /* font-family: 'Lucida Grande'; */
}
.vignet-table thead tr:first-child th:first-child {
    border-top-left-radius: 4px;
    width: 4%;
}
.vignet-table tbody tr:first-child td:first-child {
    border-top: 0;
}
.vignet-table thead tr:first-child th:last-child {
    border-top-right-radius: 4px;
    font-weight: 600;
}
.vignet-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}
.vignet-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}
.vignet-table tbody tr td:last-child {
    font-weight: 600;
}
.check-wrapper {
    float: left;
    /* width: 100%; */

    height: 20px;
    position: relative;
}
.check-lbl:before {
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #dedede;
    display: inline-block;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}
.check-input:checked + .check-lbl:after {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/tick.png) no-repeat;
    position: absolute;
    left: 4px;
    top: calc(50% - 5.5px);
    cursor: pointer;
}
.check-input {
    float: left;
    width: 20px;
    height: 20px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    cursor: pointer;
}
.check-lbl {
    float: left;
    width: 20px;
    height: 20px;
    /* position: absolute; */
    z-index: 8;
    cursor: pointer;
}
.vignet-table tbody tr  td:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
}
.filter-btn {
    float: left;
    height: 35px;
    font-size: 13px;
    border-radius: 5px;
    padding: 0 20px;
    border: 1px solid #b4b4b4;
    background: transparent;
    margin-right: 20px;
    cursor: pointer;
    transition: .4s ease-out;
}
.filter-btn:hover {
    background: #54A1D7;
    color: #fff;
    border-color: #54A1D7;
}

/*modal*/
.vig-modal .modal-body {
    padding: 0;
}
.modal-content-wrapper {
    float: left;
    width: 100%;
    min-height: 450px;
}
.modal-content-left {
    float: left;
    width: 30%;
    height: 100%;
    min-height: 450px;
    padding: 15px;
}
.vignet-file-img {
    float: left;
    width: 100%;
    height: 150px;
    border-radius: 4px;
}
.vignet-file-img img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.modal-content-right {
    float: left;
    width: 70%;
    height: 100%;
    padding: 20px;
    background: #E9ECEE;
    min-height: 450px;
}
.vignet-file-option {
    float: left;
    width: 100%;
    margin: 20px 0;
}
.vignet-file-option li {
    float: left;
    width: 100%;
    text-align: center;
    margin: 5px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #efefef;
}
.vignet-file-option li a {
    font-size: 12px;
    text-transform: uppercase;
    color: #54A1D7;
    transition: .4s ease-out;
}
.vignet-file-option li a:hover {
    color: #4a4a4a;
}
.vig-modal .md-close {
    top: -10px;
    right: -10px;
}
.vignet-file-header {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.vignet-file-header-left {
    float: left;
}
.vignet-file-header-left h5 {
    float: left;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}
.vignet-file-header-left p {
    float: left;
    width: 100%;
    font-size: 14px;
    color: #a7a7a7;
}
.more-button {
    background: transparent;
    padding: 0;
    border: 0;
    font-size: 14px;
    cursor:pointer;
}
.vig-file-st {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
/*.ind-vig-file {
    float: left;
    width: calc(50% - 3px);
    height: 70px;
    padding: 10px;
    background: #fff;
    margin-right: 5px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    border-radius: 4px;
}*/
.ind-vig-file:nth-child(2n) {
    margin-right: 0;
}
.stand-bg {
    font-family: 'FontAwesome';
    width: 70px;
    height: 40px;
    position: absolute;
    background: #000;
    position: relative;
    display: block;
    width: 35px;
    height: 20px;
    background: #54A1D7;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    transition: .4s ease-out;
}
.stand-bg:before {
    content: "";
    font-family: 'FontAwesome';
    width: 70px;
    height: 40px;
    position: absolute;
    background: #54A1D7;
    transform: rotate(60deg);
    width: 55px;
    height: 30px;
    width: 70px;
    height: 40px;
    width: 35px;
    height: 20px;
}
.stand-bg:after {
    content: "";
    font-family: 'FontAwesome';
    width: 70px;
    height: 40px;
    position: absolute;
    background: #54A1D7;
    transform: rotate(-60deg);
    width: 55px;
    height: 30px;
    width: 35px;
    height: 20px;
}
.file-ico {
    float: left;
    margin-right: 15px;
    width: 35px;
    position: relative;
}
.view-ico:before {
    content: "\f06e";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.view-ico {
    position: absolute;
    left: calc(50% - 9px);
    top: calc(50% - 9px);
}
.file-info {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    margin-right: 15px;
}
.file-info-wrap {
    float: left;
    width: calc(100% - 55px);
    display: flex;
}
.stand-num {
    margin-bottom: 6px;
}
.view-text {
    text-transform: uppercase;
    color: #999;
}
.fb-ico:before {
    content: "\f09a";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.fb-ico {
    position: absolute;
    left: calc(50% - 4.5px);
    top: calc(50% - 8px);
}
.shares-ico:before {
    content: "\f064";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.shares-ico {
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 7px);
}
.wa-ico:before {
    content: "\f232";
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    z-index: 9;
}
.wa-ico {
    position: absolute;
    left: calc(50% - 6.5px);
    top: calc(50% - 8px);
}
.ind-vig-file:hover .stand-bg {
    transform: rotate(90deg);
}
.stand-bg.red {
    background: #e33244;
}
.stand-bg.red:before {
    background: #e33244;
}
.stand-bg.red:after {
    background: #e33244;
}
.stand-bg.blue {
    background: #177bbb;
}
.stand-bg.blue:before {
    background: #177bbb;
}
.stand-bg.blue:after {
    background: #177bbb;
}
.stand-bg.green {
    background: #1aae88;
}
.stand-bg.green:before {
    background: #1aae88;
}
.stand-bg.green:after {
    background: #1aae88;
}
.tag-block .selectize-control.multi .selectize-input [data-value] {
    background: #54A1D7;
    border-color: #54A1D7;
}
.tag-block .selectize-control.plugin-remove_button [data-value] .remove {
    border-left: 1px solid #54A1D7;
}
.tag-block .selectize-input {
    border: 1px solid #d2d2d2;
    box-shadow: none;
    border-radius: 4px;
}
.tag-block .selectize-control.plugin-remove_button [data-value] {
    padding-right: 17px !important;
}
.tag-block .selectize-control, .selectize-input {
    position: relative;
    float: left;
    width: 100%;
}
.tag-block {
    float: left;
    width: 100%;
}
.tag-block h5 {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #9e9e9e;
}

.split-panel .play-list-add-blck .ind-panel {
    width: calc((100% / 2) - 12px);
}

.split-panel .play-list-add-blck .ind-panel:nth-child(4n) {
    margin-right: 15px;
}

.split-panel .play-list-add-blck .ind-panel:nth-child(2n) {
    margin-right: 0;
}
.playlist-block li {
    width: calc((100% / 3) - 12px);
}
.playlist-block li:nth-child(5n) {
    margin-right: 15px;
}
.playlist-block li:nth-child(3n) {
    margin-right: 0;
}
.playlist-collection {
    float: left;
    width: 100%;
}
.playlist-collection li {
    float: left;
    width: 100%;
    text-align: center;
    height: 40px;
    border: 1px solid #54A1D7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    color: #54A1D7;
    background: #fff;
    transition: .4s ease-out;
    cursor: pointer;
}
.playlist-collection li:hover {
    border: 1px solid #54A1D7;
    color: #fff;
    background: #54A1D7;
}
/*.fixed-scroll {
    height: 432px;
    max-height: 432px;
    overflow-y: auto;
}*/
.playlist-collection li:last-child {
    margin-bottom: 0;
}
/*menu*/
.skew .menu-text {
    opacity: 0;
}
.side-content-area.skew {
    width: 60px;
    transition: .4s ease-out;
}
.content-tab .nav-tabs .nav-item:last-child {
    border-top-right-radius: 5px;
}
.inner-skew .menu-text {
    opacity: 0;
    transition: .4s ease-out;
}
.inner-skew .side-content-area {
    width: 60px;
    transition: .4s ease-out;
}
.inner-skew .right-content-area {
    width: calc(100% - 60px);
    transition: .4s ease-out;
}
.vig-mod .form-control.without-ico {
    padding: 0 15px;
}
.progress-bar {
    font-size: 10px;
    float: left;
    margin: 24px 0;
    padding: 1px;
    border-radius: 13px;
}
.text-block .form-text {
    min-height: 90px;
    resize: none;
}
/*external*/
.wrapper.external {
    float: left;
    width: 100%;
    height: 100%;
    background: #E9ECEE;
}
.playlist-wrapper {
    float: left;
    width: 100%;
    min-height: 100vh;
    padding: 30px 0;
}

.playlist-wrapper h1 {
    float: left;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
}
.playlist-list-wrap {
    float: left;
    width: 100%;
}
.ind-playlist-list {
    float: left;
    width: calc((100% /4) - 12px);
    margin-right: 15px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    border-radius: 4px;
    margin-bottom: 15px;
}
.playlist-thumb {
    float: left;
    width: 100%;
    height: 230px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.playlist-thumb img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.ind-playlist-list:nth-child(4n) {
    margin-right: 0;
}
.playlist-desc {
    float: left;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    background: #fff;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.playlist-desc h5 {
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #54A1D7;
}
.no-overflow {
    overflow-y: auto;
}

/* Content */

.cont-image {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}
.cont-image img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.single-slot .page-title.with-img .subheader {
    float: left;
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #787878;
}
.content-tab {
    float: left;
    width: 100%;
    /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); */
    border-radius: 5px;
}
.content-tab .nav-tabs .nav-item {
    width: calc((100%  / 3));
    padding: 0;
}
.content-tab .nav-tabs .nav-link {
    height: 62px;
    padding: 0;
    display: flex;
    align-items: center;
    padding: 0 40px;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    border-radius: 0;
    position: relative;
    border: 1px solid #ddd;
    border-left: 0;
    border-bottom: 0;
    cursor: pointer;
}
.vign-ico:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -251px -36px;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 15px;
}
.any-ico:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -228px -36px;
    width: 14px;
    height: 16px;
    display: inline-block;
    margin-right: 15px;
}
.res-ico:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -277px -36px;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 15px;
}
.content-tab .nav-tabs .nav-link.active:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #54A1D7;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
}
.content-tab .nav-tabs {
    border-bottom: 1px solid #dddddd;
}
.content-tab .nav-tabs .nav-item.show .nav-link, .content-tab .nav-tabs .nav-link.active {
    border-color: #ddd #ddd #fff;
}
/*.content-tab .tab-content {
    float: left;
    width: 100%;
    height: calc(100vh - 217px);
    background: #fff;
    border-radius: 0 0 5px 5px;
}*/
.content-tab .tab-content {
    float: left;
    width: 100%;
    height: calc(100vh - 468px);
    background: #fff;
    border-radius: 0 0 5px 5px;
}
.content-tab .tab-content>.tab-pane {
    background: #fff;
    float: left;
    width: 100%;
    height: calc(100vh - 217px);
    border: 1px solid #ddd;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    padding: 40px;
    overflow-y: auto;
}
.content-tab .nav-tabs .nav-item:first-child .nav-link {
    border-left: 1px solid #ddd;
}
.content-tab .nav-tabs .nav-item:first-child .nav-link {
    border-left: 1px solid #ddd;
    border-top-left-radius: 5px;
    overflow: hidden;
}
.content-tab .nav-tabs .nav-item:last-child {
    border-top-right-radius: 5px;
}
.content-tab .nav-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: 5px;
    overflow: hidden;
}
.content-tab .nav-tabs .nav-item:first-child {
    border-top-left-radius: 5px;
}
.content-tab .nav-tabs.nav-4-item .nav-item {
    width: calc((100% / 4));
}

.main-header-panel {
    float: left;
    width: 100%;
    padding-bottom: 40px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f2f3;
}
.header-panel-left {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 40px;
    border-radius: 50%;
    position: relative;
}
.header-panel-left img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.header-panel-left .add-button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 34px;
    height: 34px;
}
.header-panel-right {
    float: left;
    width: calc(100% - 140px);
    display: flex;
    justify-content: space-between;
}
.detail-left {
    float: left;
    width: 70%;
}
.detail-left h5 {
    float: left;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #787878;
    margin-bottom: 8px;
}
.info-txt {
    float: left;
    width: 100%;
    margin-bottom: 16px;
}
.info-txt li {
    float: left;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    color: #aaaaaa;
    margin-right: 20px;
    text-transform: uppercase;
}
.detail-left p {
    float: left;
    width: 100%;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    margin-bottom: 24px;
}
.tag-block-edit {
    float: left;
    width: 100%;
}
.tag-block-edit li {
    float: left;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: normal;
    color: #A1A1A1;
    margin-right: 20px;
}
.edit-ico {
    float: left;
    background: url(../images/sprite.svg) no-repeat -228px -62px;
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
}
.detail-right {
    float: left;
    width: 30%;
}
.status-wrap {
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.ind-status {
    float: left;
    text-align: right;
}
.ind-status span {
    float: left;
    width: 100%;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    text-align: right;
    color: #aaaaaa;
    text-transform: uppercase;
}
.ind-status h5 {
    float: left;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: right;
    color: #555555;
}
.status-option-wrap {
    float: left;
    width: 100%;
    text-align: right;
}
.status-option {
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #f0f2f3;
    margin-left: 40px;
    cursor: pointer;
    position: relative;
    transition: .4s ease-out;
}
.option-edit:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -276px -61px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
}
.option-preview:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -253px -63px;
    width: 18px;
    height: 12px;
    position: absolute;
    left: calc(50% - 9px);
    top: calc(50% - 6px);
}
.option-upload:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -301px -60px;
    width: 14px;
    height: 18px;
    position: absolute;
    left: calc(50% - 7px);
    top: calc(50% - 9px);
}
.status-option:hover {
    border: 3px solid #24ada5;
}
.note-wrapper {
    float: left;
    width: 100%;
}
.note-header {
    float: left;
    width: 100%;
    font-family: Lato;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    color: #aaaaaa;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.ind-note {
    float: left;
    width: 100%;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 16px;
}
.ind-note-left {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.ind-note-left img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.ind-note-right {
    float: left;
    width: calc(100% - 48px);
    padding: 3px 0;
}
.ind-note-right textarea {
    float: left;
    width: 100%;
    height: 23px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #dddddd;
    background: transparent;
    font-family: Lato;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #787878;
    resize: none;
}
.ind-note.comment {
    display: block;
}
.comment .ind-note-left {
    display: block;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
}
.com-user-thumb {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: 50%;
}
.com-user-det {
    float: left;
    width: calc(100% - 48px);
}
.com-user-det h5 {
    float: left;
    width: 100%;
    font-family: Lato;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    margin-bottom: 3px;
}
.com-user-det p {
    float: left;
    font-family: Lato;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    color: #aaaaaa;
}
.added-comment-panel {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.com-user-thumb img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.added-comment-right p {
    float: left;
    width: 100%;
    font-family: Lato;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    text-align: right;
    color: #aaaaaa;
}
.commented-text {
    float: left;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dddddd;
}
.commented-text p {
    float: left;
    width: 100%;
    font-family: Lato;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #787878;
}
.ind-comment-to-com .ind-note-left {
    width: 40px;
    display: flex;
    align-items: center;
}
.comment-inp {
    float: left;
    width: 100%;
    height: 34px;
    object-fit: contain;
    border-radius: 17px;
    background-color: #ffffff;
    border: 0;
    font-family: Lato;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #787878;
    padding: 0 16px;
}
.ind-comment-to-com{
    float: left;
    width: 100%;
    margin-bottom: 16px;
}
.com-to-com {
    float: left;
    width: auto;
    min-height: 34px;
    object-fit: contain;
    border-radius: 17px;
    background-color: #ffffff;
    border: 0;
    font-family: Lato;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #787878;
    padding: 6px 16px;
    display: flex;
    align-items: center;
}
.com-to-com p {
    float: left;
    width: 100%;
    font-family: Lato;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #787878;
}
.user-col {
    color: #54A1D7;
}
.ind-comment-to-com:last-child {
    margin-bottom: 0;
}
.ind-note:last-child {
    margin-bottom: 0;
}
.content-tab .tab-content>.tab-pane .graph-plot {
    padding: 0;
}
.content-tab .tab-content>.tab-pane  .vignet-table {
    box-shadow: none;
}
.content-tab .tab-content>.tab-pane  .vignet-table {
    box-shadow: none;
}
.content-tab .tab-content>.tab-pane .custom-drop, .content-tab .tab-content>.tab-pane .search-box {
    background: #fff;
}

.share-block.social-share .share-button {
    width: calc((100% / 5) - 10px);
    height: 78px;
}
.share-block.social-share {
    margin: 0;
}
.md-op .close.md-close {
    top: -10px;
    right: -10px;
}

/*overview*/
.list__right-content-bottom {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tab-edit-ico {
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor:pointer;
}
.tab__sub-graph {
    float: left;
    width: 100%;
    display: flex;
}
.tab__sub-graph--container {
    width: calc(100%/5);
    padding: 0px 20px;
    border-right: 1px solid #ddddddbf;
    color: #565656;
}
.tab__panel {
    background: #fff;
    float: left;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    padding: 40px;
}
.tab_scroll{
    overflow-y: hidden;
}
.tab__sub-graph--container:last-child {
    padding-right: 0px;
    border-right: none;
}
.tab__sub-graph--text {
    display: flex;
    justify-content: space-between;
}
.tab__sub-graph--section {
    float: left;
    margin-top: 25px;
    width: 100%;
}
.tab__sub-graph--left h4 {
    font-size: 19px;
    font-weight: 600;
    padding-bottom: 10px;
}
.tab__sub-graph--left h5 {
    font-size: 13px;
}
.tab__sub-graph--right h3 {
    font-size: 28px;
    font-weight: 600;
}
.tab__content--social {
    width: 100%;
    padding: 40px 5px;
    display: flex;
    justify-content: space-evenly;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
}
.tab__social--items {
    display: flex;
}
.tab__social--img {
    width: 90px;
    height: 90px;
    margin-right: 30px;
    background: #ededed;
    /* padding: 25px 20px; */
    border: 1px solid rgba(158, 156, 156, 0.12156862745098039);
    border-radius: 50%;
    box-shadow: inset 0px 2px 0px 0px rgba(221, 224, 226, 0.7490196078431373);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fb-adj {
    padding: 0px 10px;
}
.oth-adj {
    padding: 0px 5px;
}
.tab__social--img img {
    max-height: 60px;
    max-width: 50px;
    vertical-align: text-bottom;
}
.tab__social--title-count {
    color: #565656;
    line-height: 30px;
    padding-top: 10px;
}
.tab__social--title-count h4 {
    font-size: 16px;
    font-weight: 500;
}
.tab__social--title-count h3 {
    font-size: 24px;
    font-weight: 600;
}
.tab__pannel--container {
    width: 100%;
}
.tab__pannel--dsn {
    width: calc((100%/2) - 10px);
    float: left;
    margin-right: 20px;
    background: #fff;
    border: 1px solid #ccccccc7;
    border-radius: 5px;
    margin-bottom: 30px;
}
.tab__pannel--dsn:last-child {
    margin-right: 0px;
}
.tab__pannel--header {
    border-bottom: 1px solid #ccccccc7;
    padding: 0 20px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tab__pannel-item--list {
    float: left;
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}
.list__img img {
    float: left;
    width: 100%;
    object-fit: cover;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #cccccc63;
}
.list__right-content {
    width: calc(100% - 150px);
    float: right;
    position: relative;
}
.list__right--text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: #565656;
    float: left;
    width: 100%;
}
.list__right-content--count {
    display: flex;
}
.count__item {
    margin-right: 30px;
    text-align: right;
}
.count__item:last-child {
    margin-right: 0px;
}
.tab__pannel-item--list li {
    /* height: 135px; */
    /* margin-bottom: 40px; */
    float: left;
    width: 100%;
    padding: 25px;
}
.list__right-content--detail h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}
.list__right-content--detail a {
    color: #4a4a4a;
}
.list__right-content--detail p {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 2px;
}
.count__item p {
    font-size: 12px;
}
.count__item h4 {
    font-size: 28px;
    font-weight: 600;
    padding-top: 5px;
}
.list__right-content--graph {
    float: right;
}
.tab-edit-ico:before {
    content: "";
    background: url(../images/sprite.png) no-repeat -61px -64px;
    width: 40px;
    height: 40px;
    bottom: 0;
    position: absolute;
}
.list__link a {
    font-size: 12px;
    float: right;
    color: rgba(86, 86, 86, 0.6784313725490196);
    font-weight: 400;
    padding-top: 3px;
}
.tab-user-ico:before {
    content: "";
    background: url(../images/iconUser.png);
    width: 14px;
    height: 16px;
    display: inline-block;
    margin-right: 15px;
}
.tab-bw-ico:before {
    content: "";
    background: url(../images/iconBw.png);
    width: 18px;
    height: 12px;
    display: inline-block;
    margin-right: 15px;
}
.tab-view-ico:before {
    content: "";
    background: url(../images/iconView.png);
    width: 18px;
    height: 12px;
    display: inline-block;
    margin-right: 15px;
}
.tab__sub-graph--section img {
    float: left;
    width: 100%;
}
.list__img {
    float: left;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-right: 30px;
}
.list__link {
    float: left;
    width: 100%;
}
.tab__pannel-item--list li:nth-child(even) {
    background: #fafafa;
}

/*user section*/

.vig-modal .modal-header {
    background: #f8f8f8;
    border-radius: 0;
    position: relative;
    min-height: 50px;
    padding: 10px 15px;
}
.vig-modal .modal-title {
    font-size: 18px;
    color: #131010;
    font-weight: 500;
}
.vig-modal .modal-btn-close {
    border: 0;
    background: transparent;
    color: #ababab;
    padding: 0;
    position: absolute;
    right: 15px;
    top: calc(50% - 8px);
    cursor: pointer;
    font-weight: 500;
}
.user-drop {
    float: left;
    width: 100%;
}

.drop-wrap {
    float: left;
}
.drop-wrap .select-box:last-child {
    margin-right: 0;
}

.select-box select {
    float: left;
    width: 130px;
    min-width: 130px;
    height: 40px;
    padding: 0 33px 0 15px;
    border: 1px solid #efefef;
    border-radius: 3px;
    font-size: 14px;
    color: #4a4a4a;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* background-image: url(assets/images/icon-arrow.png); */
    /* background-color: #fff; */
    /* background-repeat: no-repeat; */
    /* background-position-x: calc(100% - 12px); */
    /* background-position-y: 17px; */
    cursor: pointer;
}
.inp-box {
    float: left;
    width: 100%;
    height: 40px;
    font-size: 14px;
    background:#e9ecee;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    padding: 0 15px;
}

.tag-block.title {
    margin-bottom: 16px;
}
.general-btn {
    float: left;
    width: 100%;
    max-width: 150px;
    text-align: center;
    background: #54A1D7;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    border-radius: 32px;
    transition: .3s linear;
    position: relative;
    border: 0;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.general-btn.cancel-bt {
    background-color: #dfdfdf;
    border: 2px solid #d6d6d6;
    color: #131010;
    height: 30px;
    line-height: normal;
    max-width: 107px;
}
.general-btn.save-bt {
    border: 2px solid #54A1D7;
    color: #fff;
    height: 30px;
    line-height: normal;
    max-width: 107px;
}
.modal-content.main-user {
    float: left;
    height: auto;
}
.image-upload {
    float: left;
    width: 195px;
    border: 1px solid #e1e1e1;
    border-radius: 0;
    background-color: #e9ecee;
    position: relative;
    cursor: pointer;
}

.user-input-left {
    float: left;
    width: auto;
    height: auto;
}
.file-up {
    float: left;
    width: 195px;
    height: 200px;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
}

.user-input-left p {
    font-size: 14px;
    float: left;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}
.modal-content-left p {
    font-size: 14px;
    float: left;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    position: absolute;
    bottom: 22px;
    right: 50px;
    color: #9e9e9e;
}
.image-upload img {
    float: left;
    width: 100%;
}
.modal-content-left .image-title {
    float: left;
    width: 100%;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 14px;
}
.modal-content-right.main-user {
    float: left;
    background-color: #fff;
    min-height: 345px;
}
.sub-body {
    min-height: 345px;
}
.select-box.select-bg select {
    background-color: #f8f8f8;
}
.modal-footer.top {
    border: 0;
}
.tag-block.title h5 {
    font-family: Lato;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    color: #444444;
    margin-bottom: 10px;
}
.title-icon:before {
    content: "";
    background: url(../images/ico-us.png);
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: calc(50% - 8px);
}

.description-wrapper p {
    font-size: 11px;
    color: #aaaaaa;
    text-align: center;
    line-height: 15px;
}
.panel-block-ht {
    min-height: 337px;
}
.panel-block-img {
    float: left;
    width: 120px;
    height: 120px;
    position: relative;
    border: 1px solid #e6e8ea;
    border-radius: 50%;
    background: #e6e8ea;
}
.panel-block-img img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.btn-hide {
    opacity: 0;
}
.icon-lib-plus:before {
    content: "";
    display: inline-block;
    background: url(../images/sprite.png) no-repeat;
}
.add-button-plus:before {
    background-position: -17px -64px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    cursor: pointer;
}
.tab-plus-ico:before {
    content: "";
    background: url(../images/sprite.png) no-repeat -17px -64px;
    width: 40px;
    height: 40px;
    bottom: 0;
    position: absolute;
}
.add-button-plus {
    float: left;
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    background: #54A1D7;
    border-radius: 50%;
}
.add-button-plus:before {
    position: absolute;
    left: calc(50% - 19px);
    top: calc(50% - 19px);
    cursor: pointer;
}
.modal-adduser-header {
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    box-shadow: 0 1px 0 0 rgba(68, 68, 68, 0.1);
    background-color: #fbfbfb;
    padding: 0px 20px;
}
.modal-adduser-header h3 {
    font-size: 15px;
    font-weight: 400;
    color: #444444;
    float: left;
}
.task-option-block {
    float: right;
}
.modal-adduser-content {
    height: auto;
    width: 100%;
    padding: 20px;
    float: left;
    height: 100%;
    min-height: calc(100% - 50px);
}
.modal-adduser-content-left {
    width: calc(100% - 180px);
    float: left;
    padding-right: 20px;
}
.modal-adduser-content-right {
    width: 180px;
    float: right;
}
.modal-adduser-content-btn {
    float: left;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 7px 0px;
}
.modal-adduser-detail {
    /* margin-bottom: 20px; */
    float: left;
    width: 100%;
    margin-bottom: 20px;
}
.modal-adduser-detail p {
    font-size: 11px;
    color: #444444;
    margin-bottom: 10px;
}
.modal-adduser-detail.input-select input {
    border: none;
    background: #f8f8f8;
    width: 100%;
}
.input-select input {
    border: none;
    width: 100%;
    background: #f8f8f8;
    height: 34px;
    padding: 0px 20px;
    font-size: 15px;
    color: #444444;
    border-radius: 5px;
}
.input-select input::placeholder {
    opacity: 0.5;
    font-size: 15px;
    font-weight: 400;
    color: #444444;
}
.input-select select {
    border: none;
    width: 125px;
    background: #f8f8f8;
    height: 34px;
    padding: 0px 20px;
    color: #444444;
}
.modal-adduser-img {
    width: 180px;
    height: 180px;
    background: #f8f8f8;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-btn {
    height: 40px;
    line-height: 40px;
    margin: 0px 10px;
    width: 140px;
    text-align: center;
}
.btn-cancel {
    background: #fff;
    color: #444444;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(68, 68, 68, 0.33);
    border-radius: 20px;
    background-color: #f8f8f8;
    margin: 0;
}
.btn-cancel a {
    color: #444444;
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    margin: 0;
    font-family: Oxygen;
    font-size: 15px;
    letter-spacing: normal;
    color: #444444;
}
.modal-btn.btn-create {
    background: #54A1D7;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #54A1D7;
    border-radius: 50px;
    margin: 0;
}
.modal-btn.btn-create a {
    color: #fff;
    font-size: 15px;
    font-family: Oxygen;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 20;
}
.plus-button:before {
    background-position: -10px -88px;
    width: 16px;
    height: 16px;
}
.plus-button {
    float: left;
    background: #ccc;
    border: 0;
    padding: 0;
    line-height: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    background-color: #54A1D7;
    cursor: pointer;
}
.vig-modal.user-md .modal-title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: normal;
    color: #444444;
    line-height: normal;
    position: relative;
    padding-left: 26px;
}
.vig-modal.user-md  .modal-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.drop-wrap.modal-adduser-detail {
    margin-bottom: 0;
}
.modal-adduser-content-btn .modal-btn {
    margin-left: 20px;
}
.drop-wrap .select-box.select-bg select {
    height: 34px;
}

.select-box.select-bg:before {
    content: "";
    width: 10px;
    height: 6px;
    background: url(../images/icon-arrow.png);
    position: absolute;
    right: 14px;
    top: calc(50% - 3px);
}
.select-box.select-bg {
    position: relative;
    float: left;
}

/*Playlist section*/

.left-bottom-area {
    float: left;
    width: calc((100%/2) - 478px);
    padding: 10px;
    min-height: 616px;
}
.bottom-area-content {
    float: left;
    width: 100%;
    line-height: normal;
    margin-bottom: 12px;
    border-bottom: 1px solid #d4d4dc;
}
.contnt-list li {
    margin-bottom: 20px;
    font-weight: 500;
    color: #555555;
}
.botom-area-add {
    float: left;
    width: 100%;
}
.botom-area-add h3 {
    color: #555;
}
.bottom-title {
    float: left;
    width: 100%;
    padding: 0;
    position: relative;
    min-height: 175px;
}
.title-image {
    float: left;
    width: 10%;
}
.title-image img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.title-content {
    float: left;
    width: calc(100% - 120px);
}
.title-content h2 {
    float: left;
    width: 100%;
    margin-bottom: 8px;
    font-family: Oxygen;
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #787878;
}
.title-desc {
    float: left;
    width: 100%;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    margin-bottom: 10px;
}
.title-sub-content-left {
    float: left;
    width: 100%;
    font-size: 11px;
    color: #aaaaaa;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 16px;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
}
.title-sub-content {
    margin-left: 20px;
}
.right-content-section {
    float: left;
    width: 100%;
    height: 100%;
    transition: .4s ease-out;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}
.title-icons {
    float: left;
    width: 100%;
    /* margin-top: 24px; */
}
.ico-img {
    background-position: -54px -36px;
    width: 16px;
    height: 16px;
}
.icon-lib-list.ico-add {
    float: left;
    background-position: -54px -37px;
    width: 16px;
    height: 14px;
}
.icon-lib-list.ico-eye {
    float: left;
    background-position: -253px -63px;
    width: 18px;
    height: 12px;
}
.icon-lib-list.ico-upload {
    float: left;
    background-position: -301px -60px;
    width: 14px;
    height: 18px;
}
.report-img {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    margin-right: 5px;
}
.report-img img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.table-body-section tr {
    float:left;
    width: 100%;
    line-height: 30px;
}
.vignet-table .title-table thead {
    float: left;
    height: 74px;
}
.vignet-table.title-table thead tr th {
    border-bottom: 1px solid #dddddd;
    background: white;
    font-family: Lato;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    color: #444444;
    padding: 20px 0;
}
.content-table-sec {
    float: left;
    width: 100%;
    height: calc(100% - 195px);
}
.menu-icon {
    background-position: -10px -40px;
    width: 18px;
    height: 17px;
    border: 0;
    cursor: pointer;
}
.side-menu-icon {
    float: right;
    position: absolute;
    right: 0;
    top: 0;
}
.table.vignet-table.title-table {
    margin: 0;
    box-shadow: none;
}
.table-header {
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 12px 0 0;
}
.title-menu-icons {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 39px;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    margin-right: 28px;
}
.title-image-icon-sub {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 34px;
    border: 1px solid #54A1D7;
    border-radius: 50%;
    margin-right: 28px;
    position: absolute;
    top: 87px;
    left: 87px;
    background: #54A1D7;
}

.ico-write {
    float: left;
    background-position: -37px -88px;
    width: 16px;
    height: 16px;
}
.left-add-icon {
    float: left;
    padding-right: 10px;
}
.ico-write {
    float: left;
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    background: #54A1D7;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}

.ico-write:before {
    background-position: -37px -88px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    cursor: pointer;
}
/*.active:before {*/
    /*background: #54A1D7;*/
/*}*/
.left-icon {
    float: left;
    width: 100%;
    padding-left: 24px;
    position: relative;
}
.icon-left:before {
    content: "";
    width: 4px;
    height: 23px;
    position: absolute;
    top: 0;
    left: 0;
}
.header-content-right {
    float: left;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.64;
    letter-spacing: normal;
    color: #444444;
    text-transform: uppercase;
}
.image-up-playlist {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #e6e8ea;
    border-radius: 50%;
    background: #e6e8ea;
    margin-right: 20px;
}
.image-up-playlist img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.title-menu-icons.upload {
    margin: 0;
}
.vignet-table.title-table tbody tr td {
    padding: 15px  0;
    font-family: Lato;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: normal;
    color: #787878;
    vertical-align: middle;
    border: 0;
    position: relative;
}
.vignet-table.title-table tbody tr td:first-child {
    font-family: Oxygen;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #787878;
}
.vignet-table.title-table  thead tr:first-child th:first-child {
    width: auto;
    padding-left: 60px;
}
.vignet-table.title-table tbody tr td:first-child {
    width: auto;
    text-align: left;
    justify-content: flex-start;
    padding-left: 60px;
}
.vignet-table.title-table tbody tr:nth-child(even) td {
    background: #f8f8f8;
}
.vignet-table.title-table tbody tr:hover td:first-child:before {
    content: "";
    height: 40px;
    width: 5px;
    background: #54A1D7;
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
}
.vignet-table.title-table thead tr:first-child th:last-child {
    font-weight: 400;
}
.ico-add {
    background: url(../images/btn-add.png);
    width: 16px;
    height: 16px;
}
.toggle-ico {
    background: transparent;
    padding: 0;
    border: 0;
    line-height: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.toggle-ico:before {
    content: "";
    width: 16px;
    height: 4px;
    background-image: url(../images/option.png);
    background-repeat: no-repeat;
    display: inline-block;
}
.toggle-flip {
    float: left;
    width: 252px;
    height: 168px;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    right: 9px;
    top: 0;
    padding: 20px 0 0 0;
   /* display: none;*/
}

.toggle-flip li {
    float: left;
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.toggle-flip li a {
    float: left;
    width: 100%;
    height: 100%;
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-family: Oxygen;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    padding-right: 15px;
    position: relative;
}
.side-arrow:before {
    background-position: -169px -92px;
    width: 16px;
    height: 9px;
    position: absolute;
    right: 15px;
    transform: rotate(-90deg);
}
.toggle-flip li a.last-row {
    border-top: 1px solid #dddddd;
    padding: 0 0 0 40px;
}
.toggle-flip li:last-child {
    margin-bottom: 0;
    height: 52px;
}
.toggle-flip.active {
    display: block;
}
.toggle-flip {
    float: left;
    width: 252px;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    right: 9px;
    top: 0;
    padding: 20px 0 0 0;
    /*display: none;*/
}
.toggle-flip li {
    float: left;
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.toggle-flip li a {
    float: left;
    width: 100%;
    height: 100%;
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-family: Oxygen;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    padding-right: 15px;
    position: relative;
}
.side-arrow:before {
    background-position: -169px -92px;
    width: 16px;
    height: 9px;
    position: absolute;
    right: 15px;
    transform: rotate(-90deg);
}
.toggle-flip li a.last-row {
    border-top: 1px solid #dddddd;
    padding: 0 0 0 40px;
}
.toggle-flip li:last-child {
    margin-bottom: 0;
    height: 52px;
}
.toggle-flip.active {
    display: block;
}
.vignet-table.title-table tbody tr:hover td:last-child .toggles-block {
    opacity: 1;
    pointer-events: auto;
}
.toggles-block {
    float: left;
    display: block;
    position: absolute;
    right: 20px;
    top: calc(50% - 8px);
    opacity: 0;
    pointer-events: none;
}
.toggle-flip li a:hover {
    color: #54A1D7;
}
.new-page-wrap {
    float: left;
    text-align: center;
}
.new-page-content {
    float: left;
    width: 100%;
    height: calc(100vh - 474px);
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.new-page-wrap h1 {
    float: left;
    width: 100%;
    opacity: 0.5;
    font-family: Lato;
    font-size: 32px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.56;
    letter-spacing: normal;
    text-align: center;
    color: #444444;
    margin-bottom: 20px;
}
.new-page-wrap p {
    float: left;
    width: 100%;
    font-family: Lato;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    text-align: center;
    color: #444444;
    margin-bottom: 40px;
}
.vig-list-button {
    height: 40px;
    border: 0;
    font-family: Oxygen;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #ffffff;
    border-radius: 20px;
    background-color: #54A1D7;
    padding: 0 40px;
    cursor: pointer;
}
.vignet-table-block {
    float: left;
    width: 100%;
    max-height: calc(100% - 28px);
    overflow-y: auto;
    min-height: calc(100% - 28px);
}
.ply-wrp {
    height: 100%;
}
.user-toggle {
    float: left;
    width: 113px;
    background: #fff;
    position: absolute;
    top: 56px;
    right: 0;
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
}

.user-toggle ul li span {
    float: left;
    width: 100%;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #4a4a4a;
    cursor: pointer;
}

.user-toggle ul {
    float: left;
    width: 100%;
    padding: 10px 0;
}

.user-toggle ul li {
    float: left;
    width: 100%;
}

.user-toggle ul li a:hover {
    color: #54A1D7;
}

.user-toggle ul li:last-child {
    border-top: 1px solid #e4e4e4;
}
.user-toggle.active {
    display: block;
}

.pl-msg-wrap {

}

.modal-adduser-content-top {
    float: left;
    width: 100%;
}
.modal-adduser-detail-name {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}
.modal-adduser-detail-name p {
    font-size: 11px;
    color: #444444;
    margin-bottom: 10px;
}
.desc-area textarea {
    border: none;
    width: 100%;
    background: #f8f8f8;
    height: 180px;
    padding: 10px 19px;
    font-size: 15px;
    color: #444444;
    border-radius: 5px;
    resize: none;
}
.desc-area textarea::placeholder {
    color: #a9a9a9;
}
.modal-description-detail p {
    font-size: 11px;
    color: #444444;
    margin-bottom: 10px;
}

.modal-description-detail {
    width: calc(100% - 180px);
    float: left;
    padding-right: 20px;
    margin-bottom: 20px;
}

.pl-msg-wrap {
    float: left;
    width: calc(100%);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 50px;
    box-shadow: 0 -1px 10px 0 rgba(68, 68, 68, 0.2);
    background-color: #54A1D7;
    z-index: 10;
}
.pl-msg-l {
    float: left;
    width: calc(100% - 90px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    height: 100%;
}
.pl-msg {
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    color: #ffffff;
}
.pl-msg-r {
    float: left;
    width: 90px;
    height: 50px;
    background: #fff;
}
.pl-msg-r button {
    float: left;
    width: 100%;
    background: transparent;
    border: 0;
    height: 100%;
    font-family: Oxygen;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 0;
    letter-spacing: normal;
    color: #54A1D7;
    padding: 0;
}
.loaderWrapper {
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
}
.upload {
    float: left;
    width: 236px;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    right: 134px;
    top: 44px;
    padding: 20px 0 0 0;
}
.upload li {
    float: left;
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.upload li a {
    float: left;
    width: 100%;
    height: 100%;
    padding-left: 46px;
    display: flex;
    align-items: center;
    font-family: Oxygen;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    padding-right: 15px;
    position: relative;
}
.upload li a:hover {
    color: #54A1D7;
}
.icon-face:before {
    background: url(../images/iconFB_dark.png) no-repeat;
    width: 8px;
    height: 16px;
    position: absolute;
    left: 25px;
    top: calc(50% - 8px);
}
.icon-face:hover:before {
    background: url(../images/iconFB_color.png) no-repeat;
}
.icon-whatsapp:before {
    background: url(../images/iconWhatsapp_dark.png) no-repeat;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 21px;
    top: calc(50% - 9px);
}
.icon-whatsapp:hover:before {
    background: url(../images/iconWhatsapp_color.png) no-repeat;
}
.icon-email:before {
    background: url(../images/iconMail_dark.png) no-repeat;
    width: 16px;
    height: 14px;
    position: absolute;
    left: 22px;
    top: calc(50% - 7px);
}
.icon-email:hover:before {
    background: url(../images/iconMail_color.png) no-repeat;
}
.icon-embed:before {
    background: url(../images/iconLink_dark.png) no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 22px;
    top: calc(50% - 7px);
}
.icon-embed:hover:before {
    background: url(../images/iconLink_color.png) no-repeat;
}
.icon-qr:before {
    background: url(../images/iconQR_dark.png) no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 22px;
    top: calc(50% - 7px);
}
.icon-qr:hover:before {
    background: url(../images/iconQR_color.png) no-repeat;
}
.status-option-wrap {
    float: left;
    width: 100%;
    text-align: right;
    padding-left: 100px;
    position: relative;
}
.graph-headr {
    float: right;
    /*width: 100%;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.graph-headr h5 {
    float: left;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}
.font-bold {
    font-weight: 600;
}


/*Gallery section*/

.gallery-main-wrap {
    float: left;
    width: 100%;
    height: 100%;
}
.glery-main:hover {
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
}
.glery-main {
    float: left;
    width: calc((100% / 5) - 16px);
    height: 200px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    margin-right: 19px;
    border-radius: 5px;
    object-fit: contain;
    margin-bottom: 20px;
    cursor: pointer;
    /*transition: .2s ease-out;*/
}
.glery-image {
    float: left;
    width: 100%;
    height: 160px;
    background-color: #ffffff;
    border-radius: 5px 5px 0 0;
    position:relative;
}
.glery-image img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}
.glery-text {
    float: left;
    width: 100%;
    height: 40px;
    background: #fff;
    padding: 0 20px;
    position: relative;
    border-radius: 0 0 5px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.glery-main:nth-child(5n) {
    margin-right: 0;
}
.glery-text p {
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #555555;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 80%;
    white-space: nowrap;
}
.add-image {
    float: left;
    /* margin: 3px 20px 12px 0px; */
    background-color: transparent;
    border: 0;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    position: relative;
    right: -5px;
}
.glery-add-icon:before {
    content: "";
    height: 4px;
    width: 16px;
    background: url(../images/option.png) no-repeat;
    display: block;
    transform: rotate(90deg);
}
.glery-icon:before {
    content: "";
    height: 16px;
    width: 16px;
    background: url(../images/btn-add.png) no-repeat;
    display: block;
}
.image-toogle {
    float: left;
    width: 151px;
    height: auto;
    position: absolute;
    bottom: 28px;
    right: 24px;
    cursor: pointer;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    z-index: 9;
    padding: 20px 0 0 0;
}
.image-toogle li {
    float: left;
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.image-toogle li a {
    float: left;
    width: 100%;
    height: 100%;
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-family: Oxygen;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    padding-right: 15px;
    position: relative;
}
.image-toogle li a.last-section {
    border-top: 1px solid #dddddd;
}
.image-toogle li:last-child {
    margin-bottom: 0;
    height: 52px;
}


.new-gal .glery-add-icon:before {
    background: url(../images/btn-add-new.png) no-repeat;
    height: 16px;
}
.add-file {
    float: left;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.gal-toggle {
    width: 151px;
    height: 137px;
    object-fit: contain;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    position: absolute;
    right: 0;
    bottom: 9px;
    padding-top: 20px;
    display: none;

}
.gal-toggle li {
    float: left;
    width: 100%;
    height: 22px;
    margin-bottom: 10px;
}
.gal-toggle li a {
    float: left;
    width: 100%;
    text-align: left;
    line-height: 22px;
    padding-left: 40px;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
}
.gal-toggle li.last-block {
    border-top: 1px solid #dddddd;
    height: 42px;
    display: flex;
    align-items: center;
}
.gal-toggle li.last-block:last-child {
    margin-bottom: 0;
}
.gal-toggle li a:hover {
    color: #54A1D7
}
.glery-main .gal-size, .glery-main .gal-date, .glery-main .gal-user {
    display: none;
}
.list-view .glery-main {
    width: 100%;
    height: 60px;
    background: #fff;
    display: flex;
    display: table;
    margin-bottom: 0;
    border-radius: 0;
    padding-left: 60px;
    padding: 10px 10px 10px 60px;
    position: relative;
}
.list-view .glery-main:hover:before {
    content: "";
    width: 5px;
    height: 40px;
    background-color: #54A1D7;
    position: absolute;
    left: 0;
    top: calc(50% - 20px);
}
.list-view .glery-image {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}
.list-view .glery-text {
    background: transparent;
    padding: 0 10px;
    width: auto;
}
.list-view .glery-main:nth-child(odd) {
    background: #f8f8f8;
}
.list-view .glery-text .glery-add-icon {
    display: none;
}
.gallery-main-wrap.list-view .glery-image img {
    border-radius: 5px;
}
.list-view .glery-main .gal-size, .list-view .glery-main .gal-date, .list-view .glery-main .gal-user {
    display: block;
}
.list-view .glery-main .ind-tb {
    display: flex;
    align-items: center;
    /* padding: 9px; */
    height: 40px;
}
.ind-tb {
    float: left;
}
.list-view .ind-tb.gal-size {
    font-family: Lato;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: normal;
    text-align: right;
    color: #787878;
}

.list-view .ind-tb.gal-user {
    font-family: Lato;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: normal;
    text-align: right;
    color: #787878;
}

.list-view .ind-tb.gal-date {
    font-family: Lato;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: normal;
    text-align: right;
    color: #787878;
}

.list-view .ind-tb.glery-text {
    width: 50%;
}

.list-view .ind-tb.gal-size {
    width: 15%;
}

.list-view .ind-tb.gal-user {
    width: 15%;
}

.list-view .ind-tb.gal-date {
    width: 13%;
}
.ind-tb.gal-date .glery-add-icon {
    position: absolute;
    right: 20px;
    display: none;
}
.ind-tb.gal-date .glery-add-icon:before {
    transform: rotate(0);
}
.ind-tb.gal-date .gal-toggle {
    bottom: 0;
    right: 9px;
}
.list-view .glery-main:hover .ind-tb.gal-date .glery-add-icon {
    display: block;
}

.galery-grid {
    float: left;
    width: 40px;
    height: 34px;
    position: relative;
}
.left-grid-icons {
    float: left;
    display: flex;
    align-items: center;
    /*border-left: 1px solid #b4b4b4;*/
    height: 32px;
   /* padding-left: 10px;*/
}
.glery-grid-icon {
    float:left;
    border:0px;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 0;
    cursor: pointer;
}
.glery-list-icon {
    float: left;
    border: none;
}
.glery-grid-icon:before {
    background-position: -251px -36px;
    width: 16px;
    height: 16px;
}
.glery-list-icon:before {
    background-position: -10px -40px;
    width: 16px;
    height: 13px;
}
.galery-list {
    float: left;
    width: 100%;
}
.search-block.galery-section {
    margin-right:10px
}
.glery-grid-icon.active-in {
    border-radius: 5px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}
.list-view .glery-main {
    box-shadow: none;
}
.list-view .new-gal {
    background: transparent !important;
    padding-left: 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding-top: 0;
    height: 40px;
}
.list-view .glery-main.new-gal .glery-text p {
    color: #787878;
}
.list-view .new-gal:hover:before {
    content: none;
}
.list-view .new-gal .glery-text .glery-add-icon {
    display: block;
}
.list-view  .new-gal .glery-text {
    float: left;
    width: calc(100% - 40px);
    padding-right: 0;
}
.option-down:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -268px -88px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 9px);
}
.new-gal .glery-text p {
    text-align: center;
    width: 100%;
}
.ind-tb.gal-date .option-down {
    position: absolute;
    right: 20px;
    display: none;
}
/*content*/
.selectize-control.multi .selectize-input [data-value] {
    margin: 0;
    background: #f0f2f3;
    text-shadow: none;
    border-color: #f0f2f3;
    box-shadow: none;
    font-family: Lato;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
    padding: 0 3px;
    height: 20px;
    display: flex;
    align-items: center;
    margin-right: 5px;
}
.selectize-control.multi .selectize-input [data-value].active {

    background: #f0f2f3;
    text-shadow: none;
    border-color: #f0f2f3;
    box-shadow: none;
    font-family: Lato;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #444444;
}
.non-edit .selectize-control.multi .selectize-input {
    border: 1px solid transparent;
    padding: 0;
    pointer-events: none;
}
.non-edit .selectize-control.multi .selectize-input [data-value] {
    opacity: 0.5;
    font-family: Oxygen;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: normal;
    color: #444444;
    background: transparent;
    border: 1px solid transparent;
}
.non-edit .selectize-control.multi .selectize-input.has-items .selectize-control.multi .selectize-input {
    pointer-events: none;
}
.non-edit .selectize-control.multi .selectize-input [data-value]:before {
    content: "#";
}
.tag-edit {
    float: left;
    background: #54A1D7;
    height: 32px;
    padding: 5px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    min-width: 60px;
    color: #ffffff;
    cursor: pointer;
}
.select-tag {
    float: left;
    width: 100%;
    display: flex;
}

.tag-main-save .tag-edit {
    margin-left: 10px;
}
.tag-blck-btn {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tag-blck-btn.project-tag-wrap {
    float: left;
    display: flex;
    align-items: center;
    justify-content: normal;
    width: 100%;
    margin-bottom: 10px;
}
.tag-btn-algn {
    margin-left: 5px;
}


/*gallery popup*/

.gallery-toggler-block {
    float: left;
    width: 241px;
    height: 100%;
    padding: 20px;
    background: #E9ECEE;
    position: absolute;
    top: 0;
    right: 0;
    transition: .4s ease-out;
    box-shadow: 2px 0 7px 0 #000;
}
.popup-library {
    float: left;
    width: 100%;
    padding-left: 18px;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}
.popup-right-contnt {
    float: left;
    width: 100%;
}
.popup-right-contnt li {
    font-size: 12px;
    padding-left: 18px;
    margin-top: 7px;
}
.ico-play:before {
    background-position: -251px -36px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 13px;
    top: 21px;
}
.galery-popup {
    float: left;
    width: 100%;
    padding-left: 18px;
    margin-top: 15px;
}
.btn-galery-popup {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E9ECEE;
    border: 1px solid rgba(0, 0, 0, 0.57);
    cursor: pointer;
    position: relative;
    transition: .4s ease-out;
    margin-right: 16px;
}
.galery-edit-popup {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #f0f2f3;
    margin-left: 24px;
    cursor: pointer;
    position: relative;
    transition: .4s ease-out;
}
.galery-popup button:nth-child(3n) {
    margin-right: 0;
}
.close.glery-popup-close {
    position: absolute;
    top: -32px;
    right: 0px;
    text-shadow: none;
    opacity: 1;
    color: #ffff;
    font-weight: 100;
    font-size: 25px;
    /* background: #4a4a4a; */
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* border: 2px solid #fff; */
    line-height: 16px;
    z-index: 9;
}
.close:before {
    content: "x";
    position: absolute;
    top: 2px;
    left: 17px;
}
.popup-img-num {
    float: left;
    width: 100%;
    position: relative;
}
.img-num-main {
    float: left;
    position: absolute;
    right: calc(50% - 105px);
    bottom: calc(50% - 243px);
}
.img-num {
    font-size: 14px;
    font-weight: 500;
    color: #989393;
}
.btn-galery-popup:hover {
    border: 2px solid #24ada5;
}
.option-upload:hover:before {
    background-position: -177px -62px;
    width: 16px;
}
/*.option-edit:hover:before {*/
/*    background-position: -125px -62px;*/
/*}*/
.option-uplod:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -177px -36px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
}
.option-delet:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -125px -36px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
}
.option-down:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -268px -88px;;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 9px);
}
.option-delet:hover:before {
    background-position: -125px -62px;
}
.option-uplod:hover:before {
    background-position: -177px -62px;
}
.option-down:hover:before {
    background-position: -268px -88px;
}
.mob-galy {
    float: left;
    width: calc(100% - 240px);
}
.modal-dialog.full-wd-mod {
    max-width: 100%;
    /* min-height: 100%; */
    margin: 0;
    height: 100%;
}
.full-wd-mod .modal-content {
    height: 100%;
    border: 0;
}
.full-wd-mod .modal-content-wrapper {
    min-height: 100%;
}
.full-wd-mod .form-control {
    font-size: 14px;
    background: #e9ecee;
}
.modal-dialog.md-wd-mod {
    left: 7%;
    max-width: 85%;
    margin: 0;
    top: 4%;
    height: 75%;
}
.md-wd-mod .modal-content {
    height: 100%;
    border: 0;
}
.md-wd-mod .modal-content-wrapper {
    min-height: 100%;
}
.md-wd-mod .form-control {
    font-size: 14px;
    background: #e9ecee;
}
.add-vig .panel-block {
    width: calc((100% / 6) - 17px);
}
.add-vig .panel-block:nth-child(5n) {
    margin-right: 20px;
}
.add-vig .panel-block:nth-child(6n) {
    margin-right: 0;
}
.centered-text {
    width: 100%;
    display: inline-block;
    text-align: center;
}

/* User Listing*/
.user-member-panel {
    width: calc(100% + 15px);
    display: inline-block;
    margin: 0px -1.5px;
}
.user-card {
    float: left;
    padding: 10px;
    width: calc((100% / 4) - 15px);
    height: 95px;
    background: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid rgba(64,83,100,0.15);
    transition: .2s ease-out;
}
.user-card-image {
    float: left;
    width: 75px;
    height: 75px;
    margin-right: 10px;
    border-radius: 50%;
    position: relative;
}
.user-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.user-card-desc {
    float: left;
    width: calc(100% - 85px);
}
.user-card-desc h5 {
    width: 100%;
    font-weight: 600;
    margin: 0;
    margin-bottom: 5px;
    transition: .2s ease-out;
    color: #2A2F35;
    font-size: 14px;
    letter-spacing: -0.2px;
    line-height: 16px;
}
.user-card-desc p {
    width: 100%;
    font-weight: 500;
    margin-bottom: 6px;
    color: #6B7577;
    font-size: 12px;
    line-height: 14px;
}
.user-hover {
    float: left;
    top: 0%;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 9;
    transition: .4s ease-out;
}
.hover-chat {
    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;
    line-height: normal;
}
.hover-chat:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -451px -186px;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 6px;
}
.user-card:hover .user-hover {
    opacity: 1;
    pointer-events: auto;
}
.right-bottom-area.user {
    background: #f1f2f4;
    overflow-x: hidden;
}

.design-icon:before {
    content: "\f0b1";
    font-family: 'FontAwesome';
    margin-right: 6px;
    font-size: 10px;
    color:#6B7577;
}
.mail-icon:before {
    content: "\f0e0";
    font-family: 'FontAwesome';
    margin-right: 6px;
    font-size: 10px;
    color:#6b7577d4;
}
.phone-icon:before {
    content: "\f095";
    font-family: 'FontAwesome';
    margin-right: 6px;
    font-size: 12px;
    color:#6b7577d4;
}
.upload-user-select {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.edit-user-button {
    float: left;
    width: 30px;
    height: 30px;
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    background: #54A1D7;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.edit-user-button:before {
    content: "\f067";
    font-family: 'FontAwesome';
}
.upload-user-icon {
    float: left;
    position: absolute;
    right: 0;
    bottom:0;
}

.edit-user-icon {
    float: left;
    width: 27px;
    height: 27px;
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    background: #54A1D7;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.edit-user-icon:before {
    content: "";
    background-position: -21px -56px;
    width: 8px;
    height: 12px;
    position: absolute;
    left: calc(50% - 4px);
    top: calc(50% - 6px);
    cursor: pointer;
    background-size: 207px 98px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.float-button-block {
    float: left;
    position: fixed;
    right: 35px;
    bottom: 35px;
}

.float-button {
    float: left;
    width: 62px;
    height: 62px;
    background: #54A1D7;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.15);
    position: relative;
    transition: .4s ease-out;
}
.float-add:before {
    background-position: -10px -88px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 9px);
    cursor: pointer;

}
.slider-modal {
    background: rgba(0, 0, 0, 0.5);
}
.slider-modal .gallery-toggler-block {
    box-shadow: none;
}
.btn-golive {
    float: left;
    background: transparent;
    border: 1px solid #54A1D7;
    position: absolute;
    border-radius: 10px;
    font-size: 12px;
    padding: 3px 8px;
    color: #54A1D7;
    cursor: pointer;
}
.btn-golive.inactive {
    opacity: .5;
    border-color: #bdbdbd;
    color: #bdbdbd;
    background: #bdbdbd;
    color: #fff;
}

/*Error Message*/
.loginError {
    width: 100%;
    height: auto;
    float: left;
    margin: 5px 0px 10px 0px;
    padding: 0px 20px;
    transition: 0.3s ease-out;
}
.loginError h6 {
    font-size: 13px;
    font-weight: 600;
    color: rgb(230, 84, 84);
    text-align: center;
}
/*Error Message End*/
/*vignets-detail*/
.status-option-wrap.detail-icons {
    float: left;
    padding-left: 0;
    padding-top: 33px;
    display: flex;
    align-items: flex-start;
}
.status-option-wrap.detail-icons .status-option {
    margin-left: 4px;
}
.status-option-wrap.detail-icons .option-edit {
    margin-left: 0px;
}
.left-section {
    float: left;
    width: 70%;
    height: 100%;
    max-height: 270px;
    overflow-y: auto;
    border-right: 1px solid #e4e4e4;
}
.right-section {
    float: left;
    width: 30%;
}
.project-section {
    float: left;
    width: 100%;
    height: auto;
}
.project-header {
    float: left;
    font-family: Lato;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    color: #aaaaaa;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-top: 2px;
    padding-left: 15px;
}
.btn-add-project {
    float: left;
    border: transparent;
    background: transparent;
    color: #54A1D7;
    cursor: pointer;
    width: 20px;
    height: 18px;
    padding: 0;
    margin-left: 10px;
    font-size: 14px;
}
.project-list {
    float: left;
    width: 100%;
    padding: 0px 15px;
}
.project-content {
    float: left;
}
.project-content li {
    width: auto;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.36;
    letter-spacing: normal;
    color: #000;
    margin-right: 20px;
    text-transform: uppercase;
}
.project-content.tags li {
    background: #54A1D7;
    border-radius: 20px;
    padding: 3px 10px;
    margin-right: 10px;
    color: #fff;
}
.project-section {
    padding-top: 15px;
    height: 100%;
    min-height: 105px;
}
.project-content {
    display: flex;
    flex-wrap: wrap;
}
.comnt-txt-sub {
    padding-left: 50px;
}
.tab-pane.show.fade.overiew-padng {
    padding: 38px 40px 0 40px;
}
.overview-edit-btn {
    float: left;
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    background: #54A1D7;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    position: absolute;
    right: 0px;
    top: 78px;
}
.overview-edit-btn:before {
    background-position: -37px -88px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
    cursor: pointer;
}
.list__img.overview-main {
    position: relative;
}
.project-section.projects li {
    background: #d3d3d4;
    border-radius: 20px;
    padding: 3px 10px;
    margin-right: 10px;
    color: #444;
}
.project-section.tag {
    border-top: 1px solid #e4e4e4;
}
.project-section.projects {
    margin-bottom: 15px;
}
.project-section.tag:last-child {
    border-top: 0;
}
.note-header-wrap {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 15px 0px;
}
.note-header-wrap .note-header {
    width: auto;
    margin: 0;
}
.note-header-wrap .btn-add-project {
    background: #54A1D7;
    color: #fff;
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content-wrapper.small-modal {
    min-height: 200px;
    padding: 20px;
}

.modal-content-wrapper.small-modal div.ReactTags__selected span.ReactTags__tag {
    background: #dedede;
    border-radius: 50px;
    padding: 5px 10px;
    margin-bottom: 5px;
}

.modal-content-wrapper.small-modal div.ReactTags__tagInput {
    width: 100px;
}

.modal-content-wrapper.small-modal div.ReactTags__tagInput input.ReactTags__tagInputField, .modal-content-wrapper.small-modal div.ReactTags__tagInput input.ReactTags__tagInputField:focus {
    border: 0;
}
.modal-body .ind-note-right {
    min-height: 40px;
}
.modal-body .ind-note-right textarea {
    height: 100%;
    padding-top: 0px;
}
.modal-body .ind-note {
    background: #fff;
}
.button-wrap .upload {
    right: unset;
    left: 0;
}
.empty-vig-content {
    width: 100%;
    height: auto;
    margin: 10px auto;
    float: left;
}
.empty-vig-content p {
    width: 100%;
    text-align: center;
    height: auto;
    color: rgb(170, 170, 170);
    font-size: 0.9rem;
}
.empty-vig-content.emp-notes {
    padding-top: 60px;
}
.note-error-message {
    width: 100%;
    float: left;
    margin: 0px auto;
    padding-left: 67px;
    color: rgb(220, 53, 69);
    font-size: 12px;
    font-weight: 600;
}
.ind-note.new-note-block.note-error {
    margin-bottom: 0px;
}
.gallery-info {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.glery-text .gallery-info  p {
    max-width: 70%;
    float: left;
}
.gallery-opt nav {
    float: left;
    margin-left: 18px;
}
.gallery-opt nav:before {
    margin-right: 0;
}

nav.header-option.icon-lib.delete-ico:before {
    left: 0px;
    top: 0px;
}
.list-view nav.header-option.icon-lib.delete-ico:before {
    left: 0px;
    top: -7px;
}
.list-view .gallery-info nav.header-option.icon-lib.delete-ico:before {
    display: none;
}
.galery-popup .btn-galery-popup.option-down:before {
    left: 12px;
}
.galery-popup .btn-galery-popup.icon-lib.delete-ico:before {
    left: 5px;
}
.carousel-item.ytplayer-height-adj {
    height: 450px;
}
.left-section::-webkit-scrollbar {
    width: 0 !important
}
.content-tab .tab-content>.tab-pane::-webkit-scrollbar {
    width: 0 !important
}

.overiew-padng .status-wrap {
    border: 1px solid #dddddd;
}
.overiew-padng .status-wrap .ind-status {
    border-right: 1px solid #dddddd;
    width: calc(100%/3);
    float: left;
    position: relative;
    padding: 12px;
}
.overiew-padng .status-wrap .ind-status:last-child {
    border-right: none;
}
.overiew-padng .status-wrap .ind-status span {
    text-align: left;
    margin-bottom: 5px;
}
.overiew-padng .status-wrap .ind-status h5 {
    color: #787878;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    line-height: 32px;
}

.overiew-padng button.status-option.ico-lib.option-preview {
    position: absolute;
    right: 0px;
    top: 7px;
    height: 20px;
    border: none;
}

.overiew-padng button.status-option.ico-lib.option-upload {
    position: absolute;
    right: -12px;
    top: -6px;
    height: 20px;
    border: none;
}
.overiew-padng .status-option.edit-btn {
    width: auto;
    min-width: 105px;
    border-radius: 5px;
    background: #54A1D7;
    border: 1px solid #54A1D7;
    text-align: center;
    padding: 0px 5px;
    color: #fff;
    height: 30px;
    font-size: 14px;
}
.overiew-padng .status-option.ico-lib.option-edit:before {
    left: 82%;
}
.overiew-padng .detail-left p {
    margin-bottom: 6px;
}
.overiew-padng .detail-left h5 {
    margin-bottom: 2px;
}
.overiew-padng .main-header-panel {
    margin-bottom: 5px;
    padding-bottom: 10px;
}
.overiew-padng .main-header-panel {
    margin-bottom: 5px;
    padding-bottom: 10px;
}
.overiew-padng .upload-select .icon-lib.edit-image {
    background: #fff;
    border: 1px solid #787878;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
}
.overiew-padng .upload-select .icon-lib.edit-image:before {
    background-position: -251px -36px;
    cursor: pointer;
}
.note-header-wrap .note-header span {
    font-size: 12px;
    margin-left: 5px;
}
.detail-left.non-edit.description p {
    max-width: 850px;
}
.status-option-wrap.detail-icons.editcontent {
    margin-bottom: 15px;
}
.overiew-padng .upload-select .icon-lib.add-button.edit-image.fa-camera:before {
    background-position: -335px -88px;
    width: 22px;
    height: 16px;
    left: calc(50% - 10px);
    top: calc(50% - 9px);
}
.overiew-padng button.status-option.ico-lib.option-preview:hover:before {
    background-position: -314px -90px;
    width: 18px;
    height: 12px;
}
.gallery-thumb.audio-position {
    height: calc(100% - 40px);
}
.panel-button-block.ico-btns {
    justify-content: flex-end;
}
.panel-button.view {
    width: 30px;
}
.panel-button.statistics {
    width: 30px;
    position: relative;
    display: flex;
    align-items: center;
}
.panel-button.viewbtn {
    width: 30px;
    position: relative;
    display: flex;
    align-items: center;
}
.panel-button.icon-lib.statistics:before {
    background-position: -228px -36px;
    width: 15px;
    height: 14px;
}
.panel-button.icon-lib.viewbtn:before {
    background-position: -253px -63px;
    width: 18px;
    height: 11px;
}
.panel-button.icon-lib.viewbtn:hover:before {
    background-position: -314px -90px;
    width: 18px;
    height: 11px;
}
.panel-button.icon-lib.statistics:hover:before {
    background-position: -362px -87px;
    width: 15px;
    height: 14px;
}
.panel-button.icon-lib.viewbtn:hover:before {
    background-position: -314px -90px;
    width: 18px;
    height: 11px;
}
.form-control:focus,.btn.focus, .btn:focus {
    outline: none;
    box-shadow: none;
}
.graph-headr .btn.btn-secondary.btn-bgcolor {
    font-size: 14px;
}
.vignet-table {
    border: 1px solid #ececec;
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    background: #ffff;
    color: #444;
    border: 1px solid #B4B4B4;
}
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

/* Media Queries */

@media screen and (max-width: 1439px) and (min-width: 1221px) {
    .panel-block:nth-child(5n) {
        margin-right: 20px;
    }

    .panel-block {
        width: calc((100% / 4) - 15px);
    }
    .panel-block:nth-child(4n) {
        margin-right: 0px;
    }
    /* Playlist */
    .ind-collection {
        width: calc((100% / 4) - 21px);
    }

    .ind-collection:nth-child(2n) {
        margin-right: 25px;
    }
    .ind-collection:nth-child(3n) {
        margin-right: 25px;
    }
    .ind-collection:nth-child(4n) {
        margin-right: 0;
    }
    .ind-collection:nth-child(5n) {
        margin-right: 25px;
    }
    .ind-collection:last-child {
        margin-right: 0;
    }
    /*playlist edit*/
    .ind-playlist-editor {
        width: calc((100% / 4) - 12px);
    }
    .ind-playlist-editor:nth-child(5n) {
        margin-right: 15px;
    }
    .ind-playlist-editor:nth-child(2n) {
        margin-right: 15px;
    }
    .ind-playlist-editor:nth-child(3n) {
        margin-right: 15px;
    }
    .ind-playlist-editor:nth-child(4n) {
        margin-right: 0px;
    }
    .split-panel .ind-playlist-editor {
        width: calc((100% / 3) - 12px);
    }
    .split-panel .ind-playlist-editor:nth-child(2n) {
        margin-right: 15px;
    }
    .split-panel .ind-playlist-editor:nth-child(3n) {
        margin-right: 0px;
    }
    .add-vig .panel-block {
        width: calc((100% / 5) - 20px);
    }

    .add-vig .panel-block:nth-child(4n) {
        margin-right: 20px;
    }

    .add-vig .panel-block:nth-child(5n) {
        margin-right: 0;
    }

    .add-vig .panel-block:nth-child(6n) {
        margin-right: 20px;
    }

    /* User listing*/
    .user-card {
        width: calc((100% / 3) - 15px);
    }

}

@media screen and (max-width: 1220px) and (min-width: 1025px) {

    .panel-block:nth-child(5n) {
        margin-right: 20px;
    }
    .panel-block {
        width: calc((100% / 3) - 14px);
    }
    .panel-block:nth-child(3n) {
        margin-right: 0px;
    }
    /* Playlist */
    .ind-collection {
        width: calc((100% / 3) - 21px);
    }
    .ind-collection:nth-child(2n) {
        margin-right: 25px;
    }
    .ind-collection:nth-child(3n) {
        margin-right: 0;
    }
    .ind-collection:nth-child(5n) {
        margin-right: 25px;
    }
    .ind-collection:last-child {
        margin-right: 0;
    }

    /*playlist edit*/
    .ind-playlist-editor {
        width: calc((100% / 3) - 12px);
    }
    .ind-playlist-editor:nth-child(5n) {
        margin-right: 15px;
    }
    .ind-playlist-editor:nth-child(2n) {
        margin-right: 15px;
    }
    .ind-playlist-editor:nth-child(3n) {
        margin-right: 0px;
    }
    .split-panel .ind-playlist-editor {
        width: calc((100% / 2) - 12px);
    }
    .split-panel .ind-playlist-editor:nth-child(3n) {
        margin-right: 15px;
    }
    .split-panel .ind-playlist-editor:nth-child(2n) {
        margin-right: 0;
    }

    /*gallery-section*/

    .glery-main{
        float: left;
        width: calc((100% / 3) - 13px);

    }
    .glery-main:nth-child(3n) {
        margin-right: 0;
    }
    .add-vig .panel-block {
        width: calc((100% / 4) - 17px);
    }
    .add-vig .panel-block:nth-child(3n) {
        margin-right: 20px;
    }
    .add-vig .panel-block:nth-child(4n) {
        margin-right: 0px;
    }
}

@media screen and (max-width: 1280px) and (min-width: 768px) {

    .vignet-panel-left {
        width: 100%;
    }
    .vignet-panel {
        display: block;
        height: auto;
    }
    .vignet-panel-info .subheader {
        font-size: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .vignet-panel-more-info li {
        margin-right: 15px;
        /* width: 100%; */
        margin-bottom: 10px;
        font-size: 10px;
    }
    .vignet-panel-more-info {
        margin-bottom: 2px;
    }
    .statistics {
        justify-content: normal;
    }
    .vignet-panel-right {
        margin-top: 18px;
        flex-direction: unset;
        align-items: flex-end;
    }
    .vignet-panel-info p {
        font-size: 14px;
    }
    .ind-st {
        margin-left: 0;
        margin-right: 20px;
    }

    /*external*/

    .ind-playlist-list {
        width: calc((100% /3) - 12px);
    }
    .ind-playlist-list:nth-child(4n) {
        margin-right: 15px;
    }
    .ind-playlist-list:nth-child(3n) {
        margin-right: 0;
    }

    /*gallery*/

    .gallery-main-wrap.list-view {
        width: 100%;
        min-width: 900px !important;
    }
    .list-wrap {
        overflow: scroll;
        overflow-y: hidden;
        width: 100%;
    }
    /* User listing*/
    .user-card {
        width: calc((100% / 2) - 15px);
    }

}

@media (max-width: 1024px) {
    .playlist-block .added-list-play {
        width: 100%;
        margin-right: 0;
    }
    .play-list-pnl-header .subheader {
        width: 120px;
    }
    .split-panel .play-list-add-blck .ind-panel {
        width: 100%;
    }
    .split-panel .play-list-add-wrapper {
        width: calc(100% - 250px);
    }
    .play-list-pnl-wrapper {
        float: left;
        width: 235px;
    }
    .added-sub.mid {
        bottom: 8px;
        z-index: 8;
        right: 18px;
    }
    .ind-play-list {
        width: calc((100% / 3) - 10px);
    }
    .ind-play-list:nth-child(4n) {
        margin-right: 15px;
    }
    .ind-play-list:nth-child(3n) {
        margin-right: 0;
    }

    /*overview*/

    .tab__panel {
        padding: 15px;
    }

    .graph-plot {
        min-height: auto;
    }

    .tab__sub-graph {
        display: block;
    }

    .tab__sub-graph--container {
        width: 100%;
        float: left;
        padding: 0;
        margin-bottom: 20px;
        border-right: 0;
    }

    .tab__content--social {
        float: left;
        width: 100%;
        padding: 29px 0;
        display: block;
    }

    .tab__social--items {
        float: left;
        width: 100%;
        margin-bottom: 15px;
    }

    .tab__pannel--dsn {
        float: left;
        width: 100%;
    }

    .list__right-content {
        width: 100%;
    }

    .list__img {
        margin-bottom: 34px;
    }

    .add-vig .panel-block {
        width: calc((100% / 3) - 17px);
    }
    .add-vig .panel-block:nth-child(2n) {
        margin-right: 20px;
    }
    .add-vig .panel-block:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {

    .panel-block:nth-child(5n) {
        margin-right: 20px;
    }
    .panel-block {
        width: calc((100% / 2) - 10px);
    }
    .panel-block:nth-child(2n) {
        margin-right: 0;
    }
    .ind-galler-list {
        width: calc((100% / 3) - 10px);
    }
    .ind-galler-list:nth-child(4n) {
        margin-right: 15px;
    }
    .ind-galler-list:nth-child(3n) {
        margin-right: 0px;
    }
    .other-vignet-panel-left {
        width: 100%;
    }
    .vignet-table-block {
        overflow: scroll;
        overflow-y: hidden;
        width: 100%;
    }
    .vignet-table {
        width: 100%;
        min-width: 900px !important;
    }
    .other-vignet-panel-right {
        width: 100%;
        margin: 0;
    }

    /* Playlist */
    .ind-collection {
        width: calc((100% / 2) - 21px);
    }
    .ind-collection:nth-child(2n) {
        margin-right: 0;
    }
    .ind-collection:nth-child(5n) {
        margin-right: 25px;
    }
    .ind-collection:last-child {
        margin-right: 0;
    }

    /*playlist edit*/
    .ind-playlist-editor {
        width: calc((100% / 2) - 12px);
    }
    .ind-playlist-editor:nth-child(5n) {
        margin-right: 15px;
    }
    .ind-playlist-editor:nth-child(2n) {
        margin-right: 0;
    }
    .split-panel .ind-playlist-editor {
        width: 100%;
    }

    /*content*/

    .detail-left {
        float: left;
        width: 60%;
    }
    .detail-right {
        float: left;
        width: 40%;
    }
    .header-panel-right {
        width: 100%;
        margin-top: 20px;
    }

    /*gallery-section*/

    .glery-main{
        float: left;
        width: calc((100% / 2) - 19px);

    }
    .glery-main:nth-child(2n) {
        margin-right: 0;
    }
    /*    overview*/
    .left-section {
        width: 100%;
    }
    .right-section {
        width: 100%;
        margin-top: 37px;
    }

}

@media(max-width: 767px){

    /*login*/

    .login-block {
        width: 300px;
        left: calc(50% - 150px);
        top: calc(50% - 175px);
        padding: 30px;
        min-height: 350px;
        height:  auto;
    }
    .login-brand-logo img {
        float:  left;
        width: 100%;
    }

    .brand-logo {
        width: 100%;
    }
    .header-block-wrapper {
        display:  block;
        height: 130px;
    }
    .center-block {
        width: 100%;
        background: #fff;
        height: 60px;
        border-top: 1px solid #e9ecee;
    }
    .content-area {
        height: calc(100vh - 130px);
    }
    .header-block {
        height: 130px;
    }
    .side-content-area {
        position: absolute;
        left: -100%;
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.3), 1px -1px 10px 0 #D9E4EC;
        transition: .4s ease-out;
        z-index: 12;
    }
    .side-content-area.active {
        left: 0;
        transition: .4s ease-out;
        z-index: 12;
    }
    .right-content-area {
        width: 100%;
    }
    .list-container {
        grid-template-columns: repeat(1, 1fr);
        grid-column-gap: 0;
    }
    .filter-block-wrap {
        display:  block;
        height:  auto;
    }
    .count-block {
        float: left;
        width: 100%;
        margin-bottom: 10px;
    }
    .sort-wraper {
        float: left;
        width: 100%;
        display: block;
        height: auto;
    }
    .custom-dropdown {
        float:  left;
        /* width: 100%; */
        margin-bottom: 10px;
    }
    .search-block {
        float:  left;
        width: 100%;
        display:  block;
    }
    .filter-block {
        float:  left;
        width:  100%;
    }
    .header-option-list li {
        min-width: auto;
        margin-right: 25px;
    }
    .header-option-list li .header-option {
        font-size: 0;
    }
    .header-option-list li:last-child {
        margin-right: 0;
    }
    .header-option-list li .header-option:before {
        margin: 0;
    }
    .search-box {
        width: 100%;
    }
    .right-bottom-area {
        height: calc(100vh - 190px);
    }
    .user-image {
        width:  30px;
        height: 30px;
        padding-right: 50px;
    }
    .user-image img {
        width: 30px;
        height: 30px;
    }
    .panel-block {
        width: 100%;
        margin-right: 0;
        height: 360px;
    }
    .ind-galler-list {
        width: 100%;
        margin-right: 0;
    }
    /*more*/

    .vignet-panel-left {
        display: block;
        width: 100%;
        float: left;
        margin-bottom: 24px;
    }
    .vignet-panel-info {
        float: left;
        width: 100%;
    }
    .vignet-panel {
        display: block;
        width: 100%;
        height: auto;
        padding: 25px;
    }
    .vignet-panel-right {
        float: left;
        width: 100%;
    }
    .vignet-panel-info .subheader {
        text-align: center;
    }
    .vignet-panel-thumb {
        float: unset;
        margin-right: 0;
        max-width: 100px;
        margin: 0 auto;
        margin-bottom: 16px;
    }
    .vignet-panel-more-info li {
        float: left;
        width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }
    .vignet-panel-info p {
        text-align: center;
    }
    .statistics {
        justify-content: center;
        margin-bottom: 15px;
    }
    .statistics {
        justify-content: center;
        margin-bottom: 15px;
    }
    .st-button-block .trans-button {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        margin-left: 0;
    }
    .st-button-block .trans-button:last-child {
        margin-bottom: 0;
    }
    .ind-st {margin-left: 0;text-align: center;margin: 0 10px;}
    .other-vignet-panel-left {
        width: 100%;
    }
    .vignet-table-block {
        overflow: scroll;
        overflow-y: hidden;
        width: 100%;
    }
    .vignet-table {
        width: 100%;
        min-width: 900px !important;
    }
    .other-vignet-panel-right {
        width: 100%;
        margin: 0;
    }
    .ind-vig-file {
        width: 100%;
        margin-right: 0;
    }
    .vignet-file-header {
        display: block;
        width: 100%;
    }
    .vignet-file-header-left {
        margin-bottom: 10px;
    }

    /* Playlist */

    .ind-collection {
        float: left;
        width: 100%;
        margin-right: 0;
    }

    /* playlist edit */

    .ind-playlist-editor {
        width: 100%;
        margin-right: 0;
    }
    .playlist-side-panel {
        float: left;
        width: 100%;
        margin: 0;
        height: 200px;
        margin-bottom: 15px;
    }

    .split-panel .playlist-right-panel {
        float: left;
        width: 100%;
    }

    .right-content-area.no-scroll {
        overflow: auto;
    }
    .split-panel .ind-playlist-container {
        height: auto;
        overflow: hidden;
    }
    .modal-content-left {
        width: 100%;
        min-height: auto;
    }
    .modal-content-right {
        width: 100%;
    }
    .share-button {
        width: calc((100% / 5) - 12px);
        /* margin-bottom: 13px; */
        height: 43px;
        font-size: 16px;
    }
    .share-button:nth-child(5n) {
        margin-right: 0;
    }
    /*external*/

    .ind-playlist-list {
        width: 100%;
    }
    .play-list-pnl-wrapper {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
    .play-list-add-wrapper {
        float: left;
        width: 100%;
    }
    .split-panel .play-list-add-wrapper {
        width: 100%;
    }
    .split-panel .play-list-add-blck .ind-panel {
        width: 100%;
    }
    .play-list-add-blck .ind-panel {
        width: 100%;
        margin-right: 0;
    }
    .ind-play-list {
        width: 100%;
    }
    .inner-skew .right-content-area {
        width: 100%;
    }
    .progress-bar {
        margin: 10px 0;
    }
    /* content */

    .content-tab .nav-tabs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: unset;
        border-bottom: 0;
        height: auto;
        width: 100%;
    }
    .content-tab .nav-tabs .nav-item {
        flex: 0 0 60%;
    }
    .content-tab .tab-content>.tab-pane {
        padding: 15px;
    }
    .header-panel-right {
        width: 100%;
        display: block;
    }
    .detail-left {
        width: 100%;
    }
    .ind-status {
        width: 33.33%;
        text-align: center;
    }
    .detail-right {
        width: 100%;
    }
    .status-wrap {
        margin: 20px 0;
        padding: 15px 0;
        border: 1px solid #f0f2f3;
        border-right: 0;
        border-left: 0;
    }
    .info-txt li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }
    .info-txt li:last-child {
        margin: 0;
    }
    .tag-block-edit li {
        margin-right: 15px;
        width: 100px;
    }
    .ind-status span {
        text-align: center;
    }
    .ind-status h5 {
        text-align: center;
    }
    .detail-left h5 {
        font-size: 17px;
    }
    .content-tab .tab-content>.tab-pane .custom-dropdown {
        margin-right: 0;
    }

    /*external*/
    .ind-playlist-list {
        width: 100%;
    }

    /*playlist section*/
    .title-content {
        width: 100%;
    }

    .image-upload-block-playlist {
        float: left;
        margin-bottom: 20px;
    }

    .right-content-section {
        height: auto;
    }
    .new-page-content {
        height: 450px;
    }

    /*gallery-section*/

    .glery-main{
        float: left;
        width: calc((100% / 1) - 19px);

    }
    .glery-main:nth-child(1n) {
        margin-right: 0;
    }
    .left-grid-icons.left-line {
        float: right;
        /* width: 100%; */
        margin: 15px 0;
        border-left: 0;
    }
    .glery-main {
        width: 100%;
    }
    .gallery-main-wrap.list-view {
        width: 100%;
        min-width: 900px !important;
    }
    .list-wrap {
        overflow: scroll;
        overflow-y: hidden;
        width: 100%;
    }

    /*gallery popup*/
    .gallery-toggler-block {
        width: 100%;
        height: auto;
        position: relative;
    }

    .carouse-main {
        width: 100%;
    }
    .img-num-main {
        float: left;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .mob-galy {
        width: 100%;
    }
    .close.glery-popup-close {
        top: 0;
        right: 6px;
    }
    .left-grid-icons.mob-left {
        float: right;
        margin: 0;
        border-left: 0;
    }
    .add-vig .panel-block {
        width: 100%;
    }
    .add-vig .panel-block:nth-child(2n) {
        margin-right: 0;
    }
/*user listing*/
    .user-member-panel {
        width: 100%;
        display: inline-block;
        margin: 0;
    }
    .user-card {
        width: 100%;
        margin-right: 0;
    }
    .daterangepicker {
        left : unset !important;
        right :37px !important;
    }
/*    overview*/
    .left-section {
        width: 100%;
    }
    .right-section {
        width: 100%;
        margin-top: 37px;
    }
}


/* Media Queries End */

/*************Tags***********/

div.ReactTags__tags {
    position: relative;
}

/* Styles for the input */
div.ReactTags__tagInput {
    width: 200px;
    border-radius: 2px;
    display: inline-block;
}
div.ReactTags__tagInput input.ReactTags__tagInputField,
div.ReactTags__tagInput input.ReactTags__tagInputField:focus {
    height: 31px;
    margin: 0;
    font-size: 12px;
    width: 100%;
    border: 1px solid #eee;
    padding: 0 4px;
}

/* Styles for selected tags */
div.ReactTags__selected span.ReactTags__tag {
    border: 1px solid #ddd;
    background: #eee;
    font-size: 12px;
    display: inline-block;
    padding: 5px;
    margin: 0 5px;
    cursor: move;
    border-radius: 2px;
}
div.ReactTags__selected a.ReactTags__remove {
    color: #aaa;
    margin-left: 5px;
    cursor: pointer;
}

/* Styles for suggestions */
div.ReactTags__suggestions {
    position: absolute;
}
div.ReactTags__suggestions ul {
    list-style-type: none;
    box-shadow: .05em .01em .5em rgba(0,0,0,.2);
    background: white;
    width: 200px;
}
div.ReactTags__suggestions li {
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
    margin: 0;
}
div.ReactTags__suggestions li mark {
    text-decoration: underline;
    background: none;
    font-weight: 600;
}
div.ReactTags__suggestions ul li.ReactTags__activeSuggestion {
    background: #b7cfe0;
    cursor: pointer;
}
.is-invalid {
    border-color: #dc3545 !important;
    border-style: solid !important;
    border-width: 1px !important;
}
.error-message {
    margin: 10px 0 0 0 !important;
    color: #dc3545 !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

.medium-desc-area textarea {
    border: none;
    width: 100%;
    background: #f8f8f8;
    height: 100px;
    padding: 10px 19px;
    font-size: 15px;
    color: #444444;
    border-radius: 5px;
    resize: none;
}
.medium-desc-area textarea::placeholder {
    color: #a9a9a9;
}
.no-border {
    border : none;
}
.audio-player .player-static:before, .audio-player .player-static:after {
    content: none;
}
.audio-player .player-static .ind-tb.glery-image:after {
    content: "";
    background: rgba(0, 0, 0, 0.40);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    width: 100%;
    height: 160px;
}
.ind-tb.glery-text.audio-white {
    background: #f1f3f4;
}
.player-static .react-audio-player {
    display: none;
}
.audio-player .player-static .ind-tb.glery-image:before {
    content: "\f144";
    width: 34px;
    height: 34px;
    float: left;
    font-family: 'FontAwesome';
    font-size: 34px;
    color: #54A1D7;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(50% - 17px);
    top: calc(50% - 17px);
    border-radius: 50%;
    z-index: 9;
}
.gallery-thumb .react-audio-player {
    float: left;
    width: 100%;
}
.react-audio-player {
    float: left;
    width: 100%;
    height: 40px;
    border-radius: 0;
}

.recharts-tooltip-item {
    padding: 0;
    margin-left:15px;
    color: #fff !important;

}
.recharts-default-tooltip {
    display: flex;
}
.recharts-default-tooltip {
    float: left;
    display: flex;
    align-items: center;
    border: 1px solid #e4e4e400 !important;
    background: #54a1d7 !important;
    color: #fff  !important;
    font-size: 14px  !important;
    border-radius: 5px;
}
.vd-mod .modal-adduser-content-left {
    width: calc(100% - 300px);
}
.vd-mod .modal-adduser-content-right{
    width : 300px;
}
.header-thumb {
    float: left;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
.header-thumb img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.page-title.with-image {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
}
.backtoplaylist {
    padding: 4px 0;
    float: right;
    background: transparent;
    font-weight: 600;
    border: 0;
    font-size: 12px;
    cursor: pointer;
}
.full-wd-mod .modal-body {
    padding: 0;
    float: left;
    width: 100%;
    padding: 20px;
    background-color: #E9ECEE;
    height: calc(100vh - 50px);
    overflow-y: auto;
}
.md-wd-mod .modal-body {
    padding: 0;
    float: left;
    width: 100%;
    padding: 20px;
    background-color: #E9ECEE;
    height: calc(100vh - 90px);
}
.plus-button-add {
    background: #ccc;
    float: left;
    width: 30px;
    height: 30px;
    color: #fff;
    background: #54A1D7;
    border: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.glery-image .float-add {
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
}
.react-bootstrap-daterangepicker-container button {
    background: transparent;
    border: 1px solid #54A1D7;
    border-radius: 5px;
    height: 35px;
    font-size: 14px;
    padding: 0 25px 0 15px;
    position: relative;
    color: #54A1D7;
}
.react-bootstrap-daterangepicker-container {
    float: right;
    /*width: 100%;*/
    /*text-align: right;*/
    margin-bottom: 15px;
}
.react-bootstrap-daterangepicker-container button:after {
    content: "";
    background: url(../images/sprite.svg) no-repeat -105px -68px;
    width: 10px;
    height: 5px;
    position: absolute;
    right: 8px;
    top: calc(50% - 2.5px);
}
.daterangepicker.opensright:before {
    left: unset !important;
    right: 90px !important;
}
.daterangepicker.opensright:after {
    left: unset !important;
    right: 91px !important;
}
.daterangepicker{
    left: unset !important;
    right :80px !important;
    left: unset !important;
}
.inner-skew .toggle-opener li a {
    color: #BBBBBB;
    float: left;
    font-size: 15px;
    line-height: 22px;
    padding: 7px 0px;
    transition: .3s linear;
    position: relative;
}
.inner-skew .graphic-ico:before {
    content: "";
    display: inline-block;
    background: url(../images/sprite_3.svg) no-repeat;
    background-position: -124px -87px;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 9px;
    left: 22px;
}
.inner-skew .audio-ico:before {
    content: "";
    display: inline-block;
    background: url(../images/sprite_3.svg) no-repeat;
    background-position: -170px -87px;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 9px;
    left: 22px;
}
.inner-skew .video-ico:before {
    content: "";
    display: inline-block;
    background: url(../images/sprite_3.svg) no-repeat;
    background-position: -147px -87px;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 9px;
    left: 22px;
}
.audio-player .player-static .ind-tb.glery-image:after {
    content: "";
    background: rgba(0,0,0,.4);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
}

.list-view .react-audio-player {
    float: left;
    width: 400px;
    height: 40px !important;
    border-radius: 0;
    margin-top: 5px;
}

.list-view .option-down:before {
    content: "";
    background: url(../images/sprite.svg) no-repeat -268px -88px;
    width: 16px;
    height: 16px;
    position: absolute;
    left: calc(50% - 40px);
    top: 10px;
}
.list-view .float-button-block {
    z-index: 9;
}
.glery-main.head {
    width: 100%;
    display: flex;
    background: #e9ecee;
    line-height: 46px;
}
.glery-main.head .head-name {
    width: 53%;
}
.other-contents {
    display: flex;
    justify-content: space-between;
    width: 47%;
}
.other-contents .ind-tb.gal-date {
    width: 10%;
}
.head-name h5 {
    font-size: 16px;
    color: #212529;
    font-weight: 600;
}
.other-contents h5 {
    font-size: 14px;
    color: #212529;
    font-weight: 600;
}
.list-view .glery-main.head:hover:before {
    content: "";
    display: none;
}
.btn-secondary.btn-bgcolor {
    background-color: #fff;
    color: #848b92;
    border: 1px solid #848b9280;
}
.tab-head {
    float: left;
    width: 100%;
}
.tab-head h5 {
    float: left;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    padding-top: 9px;
}

.recharts-legend-item-text {
    font-size: 14px;
}
.drp-bdr{
    border-top: 1px solid #e4e4e4;
}

.md-width{
    max-width: 387px;
    margin: 1.75rem auto;
}
.gallery-cont-enter {
    height: 0px;
}

.gallery-cont-enter.gallery-cont-enter-active {
    height: 100px;
    -webkit-transition: height .3s ease;
}

.gallery-cont-leave.gallery-cont-leave-active {
    height: 0px;
    -webkit-transition: height .3s ease;
}
.share-mod .upload {
    position: relative;
    left: 0;
    width: 100%;
    top: 0;
}
.share-mod .modal-content {
    background: transparent;
    border: 0;
}
.share-mod .modal-body {
    float: left;
    width: 100%;
    height: auto;
    background: transparent;
}

.custom-drop.dropdown-toggle.button-adj:after {
    margin-left: 20px;
    margin-right: -10px;
}
.custom-drop.dropdown-toggle.button-adj.btn.btn-none {
    margin-right: 20px;
}
.dropdown-item.button-adj {
    font-size: 13px;
    margin: 0px;
    padding: 5px 10px;
}
.dropdown-menu.dropdown-menu.show.button-adj {
    min-width: 120px;
    max-height: 450px;
    overflow-y: auto;
}
/**************Autocomplete*************/
.ind-task-input {
    float: left;
    width: 100%;
    height: auto;
    min-height: 50px;
    display: flex;
    padding-left: 0;
    align-items: flex-start;
    padding-top: 8px;
    padding-right: 20px;
    position: relative;
    border-bottom: 1px solid #ECEFF1;
}
.ind-task-input .lb-tx {
    float: left;
    color: rgba(0,0,0,0.5);
    font-size: 14px;
    line-height: 16px;
    position: relative;
    top: 10px;
    left: 0;
    margin-right: 10px;
}
.tag-wrapper-bl {
    float: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.sl-tag {
    float: left;
    height: 32px;
    display: flex;
    align-items: center;
    background-color: #E0E0E0;
    border-radius: 100px;
    position: relative;
    padding-right: 30px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-align-items: center;
    max-width: 100%;
}
.tag-left {
    float: left;
    width: 32px;
    height: 32px;
    background: #F57C00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.87);
    font-size: 16px;
    letter-spacing: -0.03px;
    line-height: 19px;
    text-align: center;
    margin-right: 8px;
    flex-shrink: 0;
}
.tag-right {
    float: left;
    width: auto;
    color: rgba(0,0,0,0.87);
    font-size: 13px;
    line-height: 15px;
    max-width: 85%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.tag-cl {
    float: left;
    width: 16px;
    height: 16px;
    color: #fff;
    border-radius: 50%;
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 0;
    background: #666;
    position: absolute;
    right: 6px;
    top: calc(50% - 8px);
    cursor: pointer;
    line-height: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tag-wrapper-bl input {
    float: left;
    height: 32px;
    max-width: 250px;
    min-width: 110px;
    border: 1px solid transparent;
    color: rgba(0,0,0,0.87);
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 10px;
    background: transparent;
    padding: 0;
}
.select-drop {
    float: left;
    width: 100%;
    height: auto;
    max-height: 310px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9;
    overflow-y: auto;
}
.select-drop li {
    float: left;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #F2F2F2;
}
.select-drop li:hover {
    background: #fafafa;
}
.select-drop li.selected {
    background: #fafafa;
}
.select-drop-click {
    font-size: large;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 18px;
}
.select-drop-click-left {
    float: left;
    width: 17px;
    height: 17px;
    margin-right: 7px;
}
.select-drop-click-left img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #F2F2F2;
}
.select-drop-click-right {
    float: left;
    width: calc(100% - 24px);
    display: flex;
    align-items: center;
}
.select-drop-click-right h5 {
    float: left;
    color: #6B7577;
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    margin-right: 10px;
}
.select-drop li:hover .select-drop-click-right h5 {
    color: #3fa9f5;
}
.select-drop li.selected .select-drop-click-right h5 {
    color: #3fa9f5;
}
.select-drop-click-right p {
    float: left;
    color: #b1becd;
    font-size: 12px;
    line-height: 14px;
    margin: 0;
}
/**************Autocomplete End *************/