html {
    background:#222;
}

.webui-popover {
    max-width:unset;   
}
.webui-no-padding  .webui-popover-content {
    padding: 0 !important;   
    overflow:hidden !important;
}

/* 112*63 96*54 */
.is-module-type-tabs .is-module-tabs-list li,
.is-module-type-tabs .is-module-tabs-list img {
    
    height:56px;
}
.is-module-tabs-list {
    
}

.is-module-type-tabs .is-module-tabs-list canvas {
    width:100%;
    height:100%; 
}

.modal-body img.is-tab-96 {
    width:96px !important;
}
.modal-body img.is-tab-112 {
    width:112px !important;
}
.modal-body img.is-tab-128 {
    width:128px !important;
}
.modal-body img.is-tab-144 {
    width:144px !important;
}

/**
 * Google Images
 */
 .img-preview-container {
    margin:-0px auto;
    width:100%;
    max-width:800px;
    height:0px;
    position:relative; 
    z-index:1;
} 
.img-preview {
    margin-top:-0px;
    width:96px;
    height:54px;
    overflow:hidden;
    position:absolute;
    right:1px;    
    bottom:1px;
    z-index:1;
} 

.google-images-container {
    margin: 0px 0 30px;
    padding: 15px 15px;
    position:relative;
    text-align: center;
    background:rgba(20, 25, 30, 0.7);
    border: 1px solid #353333;  
}
.google-images-container .subtitle {
    padding: 0 0 5px 0  !important;
    margin: 0 0 10px  !important;   
    text-align:left;
}
.google-images-container .subtitle a {
    /* margin:0 10px; */
}
.google-images-container .subtitle .material-icons {
    position:relative;
    top:1px;
    font-size: 70%;
}

.google-thumbnails-list {
    margin:0 -4px;
}

.is-image-visited.is-active {
    border-color:#00ffd2 !important;
}
.is-image-visited {
    border-color:#f70 !important;
}
/* 
.google-thumbnails-list {
    margin:0 -3px;
    padding: 0; 
    text-align: left;
}
.google-thumbnails-list li {
    margin:15px 3px;    
    height: 90px;   
}
.google-images-container li {
    display: inline-block;   
    position:relative;
}
.google-images-container img {
    padding:5px;  
    height:100%;
    min-width:150px;
    background:#111;
    border:1px solid #353333; 
}
.google-image-item-additional {
    position:absolute;
    top: 100%;
    right: 0;
    opacity: .7;
    font-size: 60%;
    width: 100%;
    text-align: right;
    line-height: 1;
    padding: 0px 0 4px;
    background: rgba(93, 92, 92, 1);
}
.google-image-item-additional a {

}
.thumbnail-element.new-tab-multi {
    cursor:pointer;
    transition:all .3s ease;
}
.thumbnail-element.new-tab-multi:hover {
    background:#4B4A4A;   
}

.google-images-container .pagination {
    margin:25px 0 0;      
}
.google-images-container .pagination-list li {
    padding:0px;      
}
.google-images-container .pagination-link {
    min-width:40px;     
}
.image-url .material-icons {
    margin:0 5px;    
    position:relative;
    top:3px;
}
 */


button.src-to-image {
    min-width:70px;
}

.is-module-tabs-list a {
    min-height: auto;
    display: inline-flex  !important;
}

.is-module-content {
    min-height: auto;
}
/**
 * Module, Add and Edit
 */
 
 .img-container {
    margin:0 auto; 
    max-width:800px;
    max-height:500px;
    border:1px solid #757575; 
}
 
.file-cta, 
.file-name {
    border-radius:0;   
} 
 
.cropper {
    margin:0 0 30px;
    padding:15px 0 15px 0;
    min-height:205px;
    position:relative;
    text-align: center;
    /* border-bottom:1px solid #353333;   */
    background: rgba(20, 25, 30, 0.7);
    border: 1px solid #353333;     
}
.close-cropper-box {

}
.always-visible .is-module-content {
    height: auto;
    min-height: auto;
}
.always-visible {
    display:block !important;    
}
.not-visible {
    display:none !important;  
}

.close-google-images {
    position:absolute;
    right: 15px;
    top: 22px;
}
.close-add-content {
    float:right;
}
.cropper .button {
    border: 0 none;
}

.new-tab-url-head-title,
.new-tab-screenshot-head-title {
    min-width:70px;   
}




.is-cropper-all-preview {
    margin:12px 15px 0;
    
    /* position: absolute;
    top: 20%;
    right: 10px;
    z-index:10;
    width: 200px;   */
    
    background:rgba(2,3,4,.6);
}
.module-multi-form .modal-body {
    margin: 0 auto;
    text-align:center !important;
    border-color:#757575;
}
.modal-body img {
    /* width:160px;
    height:90px; */
    margin:0 10px;
    padding:0;
    max-width:auto !important;
    border:1px solid #757575; 
}
.modal-body img:first-child {
    /* width:160px;
    height:90px; */
}
.modal-body img:last-of-type {
    /* width:160px;
    height:90px; */
}


.is-module-form-title .small {
    padding:0 10px; 
    color:#00d1b2;
}



.cropper-buttons .has-addons {
    display:inline-flex;
    vertical-align:top;
}
.cropper-buttons {
    text-align:center;
}
.cropper-buttons .material-icons {
    position: relative;
    top: 1px;   
    font-size:22px;
}



.new-tab-content-options {
    margin:0 0px 0 0;
    display: inline-block !important;
    vertical-align: top;  
}
.cancel-ajax-op,
.google-images-option {
    margin-right:5px;
}
.cancel-ajax-op {
    display:inline-flex;
}

.file-icon {
    margin-right: 0;
}


.new-tab-multi.button.is-loading::after {
    border-color:#3A342E ;
    border-right-color: transparent;
    border-top-color: transparent;
}

.online-image-url {
    width:50%;
    min-width:250px; 
    max-width:600px; 
    display: inline-flex !important;
}

.module-multi-form .icon-google2 {
    font-size:15px;
}












.flex-images { overflow: hidden; }
.flex-images .item { float: left; margin: 4px; border: 1px solid rgb(100, 99, 99); box-sizing: content-box; overflow: hidden; position: relative;  }
.flex-images .item img { display: block; width: auto; height: 100%; cursor:pointer; }

.flex-images .bottom { 
    padding: 0 2.5% 0 2%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:5;
    width:95.5%;
    text-align:right;
    font-size:11px; 
    white-space:nowrap;
    color: #fff;
    background: #222;
    background: rgba(0,0,0,.7);
    opacity:.5;
    transition:all .2s ease;
}
.google-thumbnail:hover .bottom { 
    opacity:.9;
}
.flex-images .image-home-url,
.flex-images .image-topic-url { 
    padding:0px 2px 2px;
    float:left;
    position: relative;
    top: 1px;
    font-size: 95%;
    transition:inherit;
}
.flex-images .image-home-url { 
    margin-right:2px;
}
.image-url.show-in-frame{ 
    position: absolute;
    right: 4px;
    bottom: 0px;   
    transition:inherit;    
}
.google-thumbnail:hover .image-url.show-in-frame { 
    background: rgba(3,3,3, 0.7);
    padding: 10px 12px;  
    right: 0px;  
}
.google-thumbnail:hover .image-url.show-in-frame:hover { 
    background: #aaa;
    padding: 15px ;   
    right: 0px; 
}

.google-images-container .pagination {
    margin:10px -4px 7px;
}

.google-images-container .pagination-link {
    min-width:35px;
}

.api-image-divider {
    vertical-align:middle;
    display:inline-flex !important;
    background: rgb(30, 35, 43);
    pointer-events:none;
}

.api-image-divider .api-divider-inner-content {
    margin:auto;    
}
.api-image-divider .tag,
.api-image-divider .button {
    /* display:inline-block !important; */
    height:auto;
}
.tag.is-divider-searchquery {
    margin:5px 0 0;  
    white-space: normal;
}



.is-api-image-loading {
    padding:0 !important;
    margin-left:-27px !important;
    margin-top:-20px !important;
    position:absolute;
    top:50% !important;
    left:50% !important;
    z-index:50;
    width:60px !important;
    height:32px !important;
    max-width:50px !important;
    opacity:.6;
    background:rgba(2,3,4,1) !important;
}
.button.is-api-image-loading.is-loading::after {
    height:.8em !important;
    height: .8em !important;
    width: .8em !important;
    left: calc(50% - (1em / 2)) !important;
    top: calc(50% - (1.1em / 2)) !important;
}

.is-api-image-loading .is-goto-cropper {
    display:none;
}
.is-goto-cropper {
    position:absolute;
    top:5px ;
    left:5px;
    z-index:50;    
    opacity:.8;
    border-color:#666 !important;
}